After reading through the documentation and watching a few of the demo videos I was pretty much sold, but knew that I wouldn’t really know how good of fit it would be until I was able to install it in my own WP environment.  Unfortunately this became a little bit of a leap of faith as Shopp is not a free plug-in.  I had to pony up the doe before I would even know if it was good or not.  This is why I am writing this review and tutorial, to hopefully help people make a decision on using Shopp without having to feel like they might be wasting their money in making the “$55 blind leap”.

Luckily for me, I wasn’t let down. Overall I have to say I give the plug-in an 8.5 out of 10.  It is very impressive, very robust and easy to use, but it did have a few things that really irked me and I’ll touch those as well as the all of the benefits I found.

Pros

• Easy to install WordPress plug-in
• Plays nicely with other plug-ins
• Dashboard widgets for at-a-glance sales and marketing performance tracking
• Shortcode support for placing products and categories in blog posts or pages
• Handles multiple product images with easy drag-and-drop sorting
• Basic inventory management and low-stock e-mail alerts
• Support for selling digital & physical products and donations
• Search engine optimized shopping pages
• Product image galleries with beautifully smooth transitions
• Support for custom checkout fields and product inputs
• Fast product search
• Customizable product drill-down menus
• Built-in tiered rates based on a flat rate, order quantity, or weight
• Custom discount settings: Apply any of your discount options using promo/coupon codes
• Standards-compliant mark-up output
• Customizable shopping interface templates (Very easy to customize and control)
• Over 200 comprehensive template tags for unparalleled custom template development
• AJAX-capable shopping cart and development API for custom cart behaviors

*These are just a few of the great features that I found very satisfying in using this plug-in.  You can view their entire list of features here.

Cons

• Conditional Tags were a little tricky to figure out
• Permalink structure does not include a full path to a product by default
• Documentation is very scattered and hard to navigate
• Cost money / other eCommerce plug-ins don’t (but in my opinion it’s worth it)

How to Use Conditional Tags

As I stated earlier I am very happy overall with Shopp, and out of the very few “Cons” that I came across while using it, there was really only one that made me pull my hair out at times.  It was the lack of documentation of using conditional tags.  WordPress has a conditional tag structure already built in that lets you easily change what content is displayed and how that content is styled on a particular page depending on what conditions that page matches.  A good example was that in my “Shopp” I wanted to add an “active” class to the category/page the user was currently on.  On a default WP page this is simple, you would use the following to do so:

<a href="/about-us/"<?php
if (is_page('23'))
{
echo " class=\"current\"";
}?>>
Link to About Us
<a/>

However, there is no notation in the Shopp documentation on how get this to work using the Shopp templates.  Since Shopp uses it’s own templating system, the only way to accomplish this task would be to create  a separate template for every category… wow that could really be a pain depending on how many categories you have, and have to add new templates down the road and as more categories are created!

Luckily after many hours of pulling what hair I have left out of my skull, I thought of this.  Which actually works!  It seems that Shopp does contain conditional tags, but there not documented anywhere!  To add a class to a link for a particular category you would the following:

<a href="/about-us/"<?php
if(shopp('category','is-category','id=1'))
{
echo " class=\"current\"";
}?>>
Link to About Us
<a/>

If you don’t need to change what content is displayed, only how then you can accomplish this completely through css and this nifty little piece of code:

<?php shopp('category','name'); ?>

What this will do is print the category name of current product/section you are on.  Here is an example of how you might use this to you styling benefit:

Let’s say, that for some reason,  you wanted to set all of the links to be blue in the “Movie” category of your online store.  Well, we will start by simply adding the php snippit above as a class/id value for the hightest surrounding div/element possible like so:

<div class="<?php shopp('category','name'); ?>">
     <a href"/link-1/">Link 1</a>
     <a href"/link-1/">Link 2</a>
</div>

This will now give the div/element a class of the category you are currently viewing.  In this case we are viewing the “Movies” category, so the class for this div will be set to “Movies” (yes it is case sensitive).  Next we just need to add some CSS to help style the links inside of that div by using a descendant selector like so:

.Movies a {
     color: blue;
}

This will now set all of the links to be blue, but only on the “Movies” category and single product pages.

I hope that this little tutorial is able to save some of you from losing as much hair as I did in finding this solution.  Other than this little bump in the development process, I think Shopp is a fantastic plug-in, it is well worth the cost, and I definitely recommend it to anyone looking to supply themselves or their clients with an easy to use eCommerce solution.

There are ways to hack around and make it easier for your client, I even wrote an article over at Foraker.com that explains how incorporate the power of custom fields in WordPress, and this way may be easy to understand for people familiar with WP and PHP but for my clients  I feel that the default layout of using custom fields is a little hard to understand.  Mostly I have had issues with clients wanting to the custom field to be an image and the only way to do this is for the client to upload the photo first via the media up-loader and then insert the path in the custom field value.  Wouldn’t it be nice if the custom field just had an upload feature associated with it?   Also, sometimes my clients are unsure if they can stray from the ones I preset for them and just start creating their own custom field names and values.  This is an issue as they are unaware of the variable calls that need to be placed in the post/page templates as well.  Overall I feel it’s just not as easy as it should be.  This is where Flutter comes in.

What is Flutter?

Good question.  From the words of Freshout, the creators of Flutter, “Flutter is a feature rich WordPress CMS plugin that focuses on easy templating for the developer and simplified content management for the admin by creating custom write panels that can be fully customized.”

A big bonus of Flutter is that it allows you to remove the “generic” page/post buttons from your WordPress dashboard navigation and input new custom buttons that will help categorize the website’s content in a way that is easier for your client to understand.  An example would if you have a cleint that will be publishing multiple types of posts, such as news or events. Instead of having the client manage these in one general section titled “posts” and hoping/praying that they remember to make sure they apply the correct template and custom fields.  With Flutter you can create two custom sections, one titled “News” and the other “Events”.  The client would then use these new buttons to manage posts according to their type, and the post edit screen will already have the associated template, category and custom fields preset.  Pretty sweet huh?!?  Alright then lets move on to the setup and installation of flutter.

Getting Started

Installing Flutter:

1. Download the plug-in here
2. Unzip the file and upload it to your plug-ins directory (/wp-content/plugins/)
3. You will need to create a few additional folders on your server, and make sure they are writable:
   -/wp-content/plugins/fresh-page/thirdparty/phpthumb/cache/
   -/wp-content/files_flutter/
   -wp-content/files_flutter/modules/
4. Now login to your WP site and activate the plug-in (/wp-admin/plugins.php)

That’s it. You should now notice 2 additional buttons in your dashboard navigation.  One is a completely new tab titled “Flutter”,  in this section you will create all of your write panels (custom templates) and write fields.  The second is sub link under the “Settings” tab.  This section will help you set a few global settings for flutter, as well as WordPress in general.

Custom Write Panels

Custom write panels are basically custom templates for posts and pages.  Once you click on the the “Write Panel” link from flutter menu you will be given the option to manage current write panels, import a write panel or create a new one.

Let’s create a new panel:

1. Click on the button “+ Create a Write Panel”
2. Now decide if the template will be for a post or a page (depending on your decision here, the options below may differ)

Options for a post:

1. Give it a name
2. Chose what categories posts created in this write panel will automatically be assigned to
3. Decide whether there will be multiples of this type of post
4. Set what fields the client will see on the edit post screen
5. Then set your advanced fields, FYI – sometimes the fewer options your client has to dig around in, the better.
6. Now click finish

Options for a page:

1. Give it a name
2. Choose a page template that pages in this write panel will use by default
3. Decide whether there will be multiples of this type of page
4. Set what fields the client will see on edit page screen
5. Then set your advanced fields, FYI -  Again, sometimes the fewer options your client has to dig around in, the better.

After you have a write panel created (template), the next step is to add custom fields to that panel.

1. To create a new custom field click on the “+ Create a Field” link
2. Give it a name, this is the name you will use for your variable call so keep it simple
3. Label your field, this the title that the field will be given on the edit post/page screen
4. Decide whether or not the user can duplicate this field and add multiple entries of the same type of content
5. The order you would like to appear on the edit post/page screen
6. Set whether or not this field is required or not (if this set to required, the client will not be able to publish this post/page until a value is entered)
7. Type: Flutter offers multiple types of fields which a great bonus! For example now you can set this field type as image and on the edit post/page screen the user will have the option of uploading an image or entering a url path. Nice!
8. Press continue to add the field.  From here add as many custom fields as you wish for this particular panel

Template Configuration

The next step is to call these custom fields to appropriate spots in your post/page templates.  There are few different ways to go about this, as your field values may serve various purposes.  Below I will outline the more general calls for flutter fields along with how to display multiple fields as the Freshout documentation is limited and a little hard to understand.

To call any custom field value we are going to use the php echo construct.  Also just to note that any of these calls should be used within the_loop.

Basic Variable Call

<? echo get('variable'); ?>

Get an Image with Image Tags

<? echo get_image('variable'); ?>

Get Multiple Check Box Values

<? $checks = get('variable');
$output = "";
foreach($checks as $check){
$output .= "<span>$check,</span> ";
}
echo $output;
// or return $output
?>

Display Duplicate Fields

<?php
$total = getFieldDuplicates('variable',1);
for($i = 1; $i < $total+1; $i++){
echo get('variable',1,$i);
}?>

Display Duplicate Groups

This one is a little bit tricky as instead of just duplicating one custom field, we are duplicating a group that may contain multiple custom fields.  In the example below we are calling a group of fields that can be duplicated.  When using “getGroupDupliates(‘variable1′)”, we can replace variable1 with any field name from that particular group.  For this call we are displaying a group that contains a field name of “variable1″. Then we begin to display the values which are a thumbnail with the value of “variable2″ that has a title value of “variable1″. Then we are wanting this thumbnail to link to the value of “variable3″.

<?php $total = getGroupDuplicates('variable1');?>
<?php for($i = 1; $i < $total+1; $i++):?>
<?php echo "<li>";
echo "<a title=\"" .get('variable1',$i,1). "\" href=\"";
echo get('variable2',$i,1);
echo "\">";
echo "<img src=\"" .get('variable3',$i,1). "\" alt=\"\" />";
echo "</a>";
echo "</li>"; ?>
<?php endfor;?>

The End Result

Once we have our write panels configured and our custom field calls placed in our WordPress template files we should be ready to rock and roll!

Oh and when creating your write panels and custom fields don’t feel like you have to have everything set in place right away. If the purpose of a write panel changes and you need to add/remove custom fields you can do this at any time and the changes will be made to any current or future posts/pages.

Flutter takes a little time to get used to but once you are able to get in a really play around with it you’ll begin to realize the potential it can have to make the use of custom fields much easier for you and your client.

It wasn’t until about three years ago though that I actually designed and developed my first portfolio site.  That design is now long gone ( thank goodness), along with the other half a dozen or so that I’ve rolled through in the past three years.  This site has seen many face lifts but has been a wonderful and powerful tool for showcasing my freelance  and corporate portfolio.  For those of you that may be just getting started in web design, I highly recommend creating a personal portfolio to help you showcase your work.  It can be a very valuable tool, as mine has really helped strengthen my career and land opportunities that may have been out of reach without one.  The reach and power that a solid online portfolio can have is far beyond anything I had imagined when I first began developing my own.  Another plus to having a personal site is that is can be a playground for learning new things in web development, as  no one can tell you what you can and can’t do on your own site.  You are your own client and that can be a good and a bad thing!

Since it’s original conception I have added quite a few things to help strengthen my site, including a blog.  This has been a great little space for me to let out my often incoherent ramblings.  Over time my reader base has grown and for those of you that have read or posted comments on my articles, I want say thank you. I have learned so much from many of you.  I also really appreciate all of the sites who have featured my work and for all of their great comments and emails.  These sites have really helped increase the amount of RSS subscribers, twitter followers and visits in general to my site.

Whether you are just starting out in the web design field or you are looking for a little boost in your traffic/readers, a first stop would be to submit your site to some of the web design galleries out there. Sometimes it can take a while for your site to be approved, as many of them are very particular in what sites they showcase, but once you are featured on one or two you will notice that your site will begin to trickle through the rest of the community without you even having to submit them.   It’s always fun to spot your work somewhere isn’t it?  This has always been really exciting to me, where I might be studding my analytics and notice that from the 2 or 3 sites that I submitted a link to, there are 30 more that are now showcasing and sharing my work.

I am grateful for the chance I have to share my passion for design, below are a few of the sites that have featured my personal portfolio over the past 3 years.  If you are looking for a place to start, all of these are great resources to help get your work out there.

Special thanks to these sites:

“Every creator painfully experiences the chasm between his inner vision and its ultimate expression.”

- Isaac Bashevis Singer

This explains my situation to a tee, as I am sure it does for many other designers.  Over the last 2 years I have gone through theme, after theme, after flipping theme for giblette.com and to no avail.  I was never fully satisfied while the end result.  Half of the issue was my process, which if only one good thing has come from my dissatisfaction with my personal site it’s that I’ve had the opportunity to refine my design process, which has helped me to deliver a more solid product to my clients.  The other half has to do with not really knowing what I want from my personal site. Is it a blog?  Is it a portfolio showcase?  Is it both?  Is it more?  Etc…

Finally after two years I feel that my process has been well refined and that my personal goals are understood enough that I was able to layout the overview of what giblette.com should be.  Really in the end it’s everything that I have been doing for the past few years.  It’s a playground… my playground.  The wonderful thing about having a personal website should be the freedom you receive in being able to try new ideas and express who you are. Instead of trying to develop a master theme that focused on “this or that”, what I really needed was something simple and to the point. I feel the new layout accomplishes this.  It is simple and flexible enough for future growth, as I am sure I will continue to have new ideas.  I have set up three main areas that should contain everything I want this site to accomplish.  So here is a quick outline of what this site will entail:

my Work

This is a big thing for every designer but I wanted a place where I could easily add new projects within just a few minutes of backend time and allow people to see the various types of work I am involved in.  Building a few custom fields in my WordPress theme has accomplished the speed of project entry and also incorporating an ajax based gallery I am able to quickly showcase different types of work that’s organized by work type.

the Blog

This is pretty self explanatory, it’s a blog.  The topics I hope to cover more about here are helpful tips & tricks, tutorials and information about my experiences as a designer/web developer.

my Projects

Just as I tend to get a million ideas rushing through my head about this site, I always seem to get ideas about other side projects that I feel are worthy of future development. Well over the past year a few of these ideas have actually gone into development. Yay!  And a few are currently in beta almost ready for a public release. So in this section I will be giving overviews of my side projects (ie project purpose, version details, release dates, etc.).

Overall I am very pleased to finally have the site up to par and at a level I personally am happy with.  I am actually loving the lighter, brighter version of giblette.com.  For so long I have had dark themes and honestly I am not sure if that had anything to do with me not being completely satisfied or not but I do know one thing… I do prefer reading content on a lighter background.  I hated even proof reading my own articles in the previous dark themes.

Also, I have received this question a few times already so I’ll just answer it here. “Why orange?” – Well as I stated above, your personal website should really be an expression of who you are and what you’re about.  For me, life is really good right now… to quote the Frank Sinatra, “Orange is the happiest color”, and right now I have everything to be happy about. ]]> http://www.giblette.com/blog/news/finally-seeing-the-light/feed/ 9 http://www.giblette.com/blog/marketing/social-networking-etiquette/ http://www.giblette.com/blog/marketing/social-networking-etiquette/#comments Sun, 19 Apr 2009 18:56:53 +0000 Joshua Giblette http://www.giblette.com/?p=890 Social networking can be an amazing tool to help us craft our online profiles/resumes. These online tools help many connect with old friends, find new jobs/new hires, and share personal information with others. The one item we can’t soon forget though, is the damage that comes from not using…

Nothing frustrates me more than to find a designer that has true, raw talent but lacks one very important element…confidence.  As a designer, you cannot only be a bottled up source of inspiration ready to explode onto print, web and any other favored medium. You need to be a salesman, ready to boast in stride about all of that creativity.  That’s right a salesman, I know, sometimes it seems that the usual stereotype of a salesman is far from the image you want to see in the mirror, some washed up high school/college athlete trying to sell something they truly don’t understand or comprehend.  That’s not at all what I mean.

Your Responsibility

It is your responsibility to sell to your client that there is a reason your ideas and creativity are worth the top dollar they should be paying you.  There are a lot of so called “designers” out there, and lets face it, sometimes the client is one of them. You cannot lack confidence in your work and ability, you need to be able to express the difference in quality in your work and the high school kid down the street.

It is also your responsibility to explain your methods and concepts in terms the client can understand.  Far too often I have seen designers/developers explain ideas in a way that is way too technical, it goes way over the client’s understanding, and in the end the idea is lost on the person who matters most, the client.  Even worse is when the designer doesn’t explain anything.  It’s too easy to get comfortable in thinking, “oh well this comes easy to me, so they’ll totally understand my thought process in this concept if I just send this design comp over in an email.”

Please, never assume that because something comes naturally and easy for you, that it will be the same for everyone else.  Take pride in your talents and remember that the client hired you for a reason. When delivering anything, always explain your concepts in the most non technical way as possible.  Also, if you have time, storyboard everything. It is so much easier to sell an idea with visual concepts.

Don’t Under Sell

This is another issue that seems to lie with designers green or veteran, they underbid their work.  You need to know what you are worth.  If you are charging $50 for logo and you feel you are creating great work, it’s time to rethink your pricing structure.  Your price is one element that sells you as a professional, people know that they get what they pay for.  By charging so little you undermine your talents and quality of work.  When you are charging you too little, you will appear to be no more a professional than your neighbor’s 16 year old nephew who “designs” websites in FrontPage­®.  Now if that’s what you want to be is the neighborhood kid who designs for the price of a tank of gas to get to the prom, then that’s fine, but that’s the farthest you’ll ever go.

Just know that clients are willing to pay what your product is really worth, if you can sell them on what sets you apart from the “nephew”.

What Sets You Apart

So what does set you apart?!?  College right?!?  Maybe.  College is great place to start, and to begin your knowledge and portfolio.  Here are a few things that set the design greats apart from the “nephews”: (in order of importance)

1. Personality
2. Experience/Portfolio
3. Confidence
4. Thirst for knowledge
5. Ability to Listen
6. Communication/People Skills
7. Organization

I have interviewed designers in the past for career opportunities and I rarely look at what College they attended.  I pay close attention to items listed above.  I would rather work with someone who has a great personality, amazing portfolio and can express their ideas and thoughts to me clearly, than someone you has a college degree, good portfolio and is a complete “jack-a”.

I am in no way saying college is not the way to, because it is.  All I am saying is there is so much more to design than a piece of paper or being able to recognize fonts at random. You need to be confident in your work and have the desire/ability to continue to learn.  You also need to be able to present your ideas with a level of enthusiasm that expresses, “Hey!  This is a one way street, it’s the way to go!”.  You have to know how to address all different types of people, as clients come in all shapes, sizes and personalities.  Last of all, being organized is a huge key to success, you need to remember your clients needs, and how you plan to accomplish them.

Now get out there and sell

So to wrap up this little rant, I just want to emphasize again, that if you want to be a successful designer, do not hide behind your Macbook or PC.  Get out there and express your ideas, explain your inspirations and sell, sell, sell.

In design, you will always want to allow yourself enough time to go through multiple ideas, theories, concepts and revisions. This usually requires hours and hours of work. Having the antiquate amount of time allotted to a project can help make a designer relax and allow him/her to break “designer’s block” all together. With enough time allowed, the final product is always better than what the idea first started out as.

Now, for “training” if you will, I have tried to find new ways to stretch my process and refine my way of thinking through concepts and break the neediness I have for certain tools, practices, content and even time.  I have come to love a new way of “training” or pushing myself as a designer outside of my comfort zone. I found this idea posted by someone else via Facebook. I tried it and absolutely loved the thrill it gave, as it is different from everything I have ever done.

The Project is called “My New Band’s Album”, in which you create a CD cover for a new band. The trick is that the band’s name, album title and cover picture are all randomly generated…and you have to complete this “masterpiece” in under 5 minutes!

Here are the rules:

Challenge yourself to do this all within 5 minutes….

Make your band’s album cover:

1 – Go to Wikipedia. Hit “random”
or click http://en.wikipedia.org/wiki/Special:Random
The first random Wikipedia article you get is the name of your band.

2 – Go to Quotations Page and select “random quotations”
or click http://www.quotationspage.com/random.php3
The last four or five words of the very last quote on the page is the title of your first album.

3 – Go to Flickr and click on “explore the last seven days”
or click http://www.flickr.com/explore/interesting/7days
Third picture, no matter what it is, will be your album cover.

4 – Use Photoshop or similar to put it all together.

You can then take it one step further and share it via Facebook, as well as view what others have done.  Browsing others work can help inspire you in realizing what can or even cannot be done in under 5 minutes.

5 – Post it to Facebook.

6 – Join the group and share your work!

I hope you found this to be a great way to help push yourself outside of your comfort zone as far as time and content are concerned.   It is really exciting to try and create something that is marketable, out of complete randomness in under 5 minutes!

Also below are some of my final results that I felt turned out the best.  Not all of the ones you create will be your favorites, but practice makes perfect.  Good luck and Have fun!

This is how I feel about lightbox (and all of it’s predecessors) right about now.

Don’t get me wrong Lokesh Dhakar, I think you have done a marvelous job on Lightbox, but just like an amazing artist who has a colossal hit that tops the charts, it has run it’s course (at least for me). Everywhere I look it’s being used, every new designer’s or photographer’s portfolio I find…there it is! Now there are a few who have taken it upon themselves to alter and adjust the script to help create a more cohesive feel with their site, and have even made very impressive style adjustments via CSS, kudos to all of you! On the other hand, most seem to just roll with the same white box, and are forgetting or don’t even try to advance their portfolio’s to be anything unique. The point of a portfolio is to help you standout from everyone else, if you’re not, then what’s the point? I know it’s like the pot calling the kettle black, I have been guilty too of over using it or it’s predecessors for simple gallery creations, but it’s time to move on.

The reason we all fell in love with Lightbox was that it was something unique, something we hadn’t seen before. The other big thing is that it’s simple to implement into any site, these two things make it addictive to designers. Designer’s need/want something to be unique, on the edge, dynamic and easy to use. So if you have seen anything or have been working on anything ground breaking, please share.

All I’m asking is that I want to see something new, I want to hear that next “underground hit” just waiting to emerge.

An invitation should be the kickoff to great conversations for upcoming events, so I hope you enjoy my collection and feel inspired to go out and design with passion, creativity and purpose.

tips to a great start on a new identity

1. Do some research! - You will always want to start by researching the company you will be branding to figure out what their goals and market audience is or will be.
2. Take a look around – Look into current trends, and maybe even competing companies to really help you understand the market.
3. The Spider Web – Now that you have some ideas what the company is all about, take out a piece of paper and pen.  Begin by writing down the company name in the middle of the paper and then like a spider web, start branching out with descriptive words about that company to help get your ideas out.  This will help you narrow down the purpose and symbolism your brand should entail.



4. Bust out the old sketch pad and pencil – Never go directly to Illustrator!  I have made this mistake in the past, and it takes so much longer to illustrate ideas on a computer than it does to quickly sketch them out.  Also don’t stop at the first good sketch, push yourself to do few more and then a few more.  Even though you may feel the first one is good, the one 30 more sketches down the road will be even better.
5. Tweak it, tweak it, and then tweak it again – Enough said.
6. Scan that sucker! – Once you feel you have expressed all of your ideas and paths on paper, it’s time to go digital.  The easiest way to transfer your idea to Illustrator is to scan it.  Then take that scanned image, no matter how rough, and place it in Illustrator.  Now lock that layer and begin to work on top of it.  You may go through many different rounds of that same logo in Illustrator, but once you have it you’ll know it.  You will also know that it is absolutely the most solid brand that your creative mind could produce.
7. All done - Please know that there is never one correct, or one right answer for a branding solution, there are millions for each project, but your job as a designer is to find just one.

examples of brands with great purpose

FedEx®

See anything?  Some people notice the well crafted hidden message in this logo, but not many right away.  Yet it creates a feeling of urgency and speed, which is exactly the message FedEx wants to deliver.  There is no way that this beautifully crafted logo was created without hours of sketching, pondering and more sketching.

symantec®

“It embodies the idea of symbiotic relationships, protection and security, balance with flexibility, and the undeniable synergy of two halves uniting to create a greater whole.” - symantec Interesting, see how they have used the Ying Yang to represent synergy?!?  Simple yet, symbolic.

nike®

Ah, one of the kings of marketing.  Contrary to popular belief, the swoosh is not piece of a wing, it actually symbolizes a check mark.   The check mark helps express the feeling that “this product is good to go”, or “go ahead, purchase this one”.  It definitely helps express accomplishment in a very simple yet symbolic manner.