In this tutorial, we are going to build a fabulous cross-browser dropdown navigation menu with the help of some advanced CSS3 properties. CSS has made leaps and bounds in recent years. With an ever-solidifying specification and widespread browser support, using CSS3 properties today is very much a feasible option.

The world has moved on quite a bit and these days supporting our beloved browser Internet Explorer 6 is no longer a business requirement for most of our clients. Therefore, we can start taking advantage of the new technologies and reap their benefits.

Although CSS3 support still varies from browser to browser as they rely on proprietary vendor-specific properties. We will have a deep look into these properties as this tutorial progresses.

The demo

Before we go into the nitty-gritty of front-end web development, let us have a look at what we are trying to accomplish. Without further ado, the fully functional demo is presented below:

Such navigation menus are common around the web. But here, in this tutorial, we are going to build it with CSS3 techniques without using a single image. We will also provide a fallback for older non-supporting browsers – thus achieving maximum cross-browser compatibility.

The markup

We are going to start from the basic top-level navigation only. After we have successfully styled the top-level horizontal navigation, we will gradually move to the second and third levels. The top-level navigation is simply an unordered list wrapped around a HTML5 <nav> tag.

<nav>
 <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Breakfast</a></li>
   <li><a href="#">Brunch</a></li>
   <li><a href="#">Lunch</a></li>
   <li><a href="#">Tea</a></li>
   <li><a href="#">Supper</a></li>
 </ul>
</nav>

Internet Explorer versions 8 and earlier cannot process HTML5 elements, let alone style them. Therefore, you must include the Modernizr script in your pages. Modernizr is also handy for the purpose of progressive enhancement.

The basic CSS scaffolding

The scaffolding includes Eric Meyer’s CSS Reset and some basic styling that manipulates the markup to make a basic navigation. Let’s have a closer look:

Firstly, we are going to design a horizontal navigation menu as seen at the top of this website. In the following CSS code, we are going to define the structures of the document and the navigation menu.

body {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 13px;
 line-height: 30px;
 font-weight: 300;
 background: url(/demo/css3-nav-menu/images/background.jpg);
 min-width: 600px;
}
section.content {
 width: 660px;
 min-width: 500px;
 margin: 0 auto;
 text-align: center;
 zoom: 1;
}
section.content:before,
section.content:after {
 display: table;
 content: "";
 zoom: 1;
}
section.content:after {
 clear: both;
}
header {
 padding: 30px 0 0 0;
 text-align: center;
}

The CSS code here is pretty much self-explanatory but allow me to explain certain bits and pieces:

• On the body element, we are applying a background image and setting the typography and layout settings for the entire document.
• You are probably wondering what those :before and :after pseudo-classes are for. Maybe puzzled over the display:table and content: “” too? This is Nicolas Gallagher’s awesome micro clearfix hack.

nav {
 zoom: 1;
 margin: 20px auto 0 auto;
 width: auto;
 text-align: left;
 background-color: #efefef;
}
nav:before, nav:after {
 display: table;
 content: "";
 zoom: 1;
}
nav:after {
 clear: both;
}

nav ul {
 float: left;
 zoom: 1;
 width: auto;
 background: #FFF;
 z-index: 100;
 border-right: 1px solid #e8e8e8;
}
nav ul:before, nav ul:after {
 display: table;
 content: "";
 zoom: 1;
}
nav ul:after {
 clear: both;
}

The HTML5 nav element and the ul elements both gets a bit of styling and the same clearfix technique as before.

nav ul li {
 float: left;
 padding: 0 0 10px 0;
 position: relative;
 outline: none;
 line-height: 1.2em;
 padding: 0 1px 0 0;
 border-left: 1px solid #e8e8e8;
}
nav ul a {
 padding: 15px 20px 15px 20px;
 font-weight: bold;
 outline: none;
 float: left;
 display: block;
 zoom: 1;
}
nav ul a:link, nav ul a:visited {
 color: #666;
 text-decoration: none;
 background-color: #ededed;
 background-repeat: repeat-x;
 outline: none;
}
nav ul a:hover, nav ul a:active {
 color: #a67b45;
 text-decoration: none;
 background-color: #ffffff;
}

Finally, here is what happens:

• The list items are floated left to make a horizontal navigation menu.
• The anchors are also floated left and styled with colour and background colour.

At this point your document should look something like this:

Now let’s get to the good stuff!

CSS3 Gradient

Before we go further, be sure to have read Chris Coyier’s excellent article on CSS3 Gradients if you have not already.

CSS3 gradients are incredibly useful for designing modern websites. Apart from providing flexibility in implementing design, they also reduce the number of HTTP requests — thus improving page load times.

nav {
 ...

 background-repeat: repeat-x;
 background-image: -moz-linear-gradient(top, #ffffff, #ededed); /* FF3.6+ */
 background-image: -ms-linear-gradient(top, #ffffff, #ededed); /* IE10 */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ededed)); /* Safari 4+, Chrome 2+ */
 background-image: -webkit-linear-gradient(top, #ffffff, #ededed); /* Safari 5.1+, Chrome 10+ */
 background-image: -o-linear-gradient(top, #ffffff, #ededed); /* Opera 11.10+ */
 background-image: linear-gradient(top, #ffffff, #ededed); /* The standard */
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0); /* IE9 and below */
}

Firstly, we are adding CSS Gradients on the nav element (the code is highlighted in bold text). It is a subtle white-to-grey gradient applied using background-image property. Browsers that do not support CSS3 Gradients will fall back to the design displayed earlier.

You may have noticed that there are vendor prefixes for different browsers. Here is the order I use:

1. Firstly -moz-linear-gradient for older versions of Firefox
2. Followed by -ms-linear-gradient for the upcoming version of Internet Explorer, version 10 (at the time of writing)
3. -webkit-gradient for older Webkit based browsers such as Safari 4 and Chrome 2.
4. For newer versions of Webkit browsers, apply -webkit-linear-gradient
5. For Opera versions 11.10 and above, -o-linear-gradient
6. The official standard for CSS3 Gradients: linear-gradient
7. Finally, everyone’s favourite browser family (Internet Explorer) needs a proprietary filter property, which is not valid CSS.

Exhausted? Well, this is the best we can do for now. In the future when everybody has a browser that supports CSS3 Gradients according to the official specification, simply remove all vendor-specific code.
Now let us apply the same gradient to the anchors.

nav ul a:link, nav ul a:visited {
 ...

 background-image: -moz-linear-gradient(top, #ffffff, #ededed);
 background-image: -ms-linear-gradient(top, #ffffff, #ededed);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ededed));
 background-image: -webkit-linear-gradient(top, #ffffff, #ededed);
 background-image: -o-linear-gradient(top, #ffffff, #ededed);
 background-image: linear-gradient(top, #ffffff, #ededed);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
}
nav ul a:hover, nav ul a:active {
 ...

 background-repeat: repeat-x;
 background-image: -moz-linear-gradient(top, #ededed, #ffffff);
 background-image: -ms-linear-gradient(top, #ededed, #ffffff);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #ffffff));
 background-image: -webkit-linear-gradient(top, #ededed, #ffffff);
 background-image: -o-linear-gradient(top, #ededed, #ffffff);
 background-image: linear-gradient(top, #ededed, #ffffff);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
}

The highlighted code above adds a CSS3 gradient on each of the anchors within the navigation menu. For hover and active states, the gradient has been reversed.

Here is what your document should look like now:

CSS3 Box Shadows

Now that the CSS3 Gradients have been applied, things are looking good now. We are going to apply some CSS3 Box Shadows on the navigation menu to add some visual depth to the design.

nav {
 ...

 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

We are going to add some nifty inset CSS Box Shadows on the :active pseudo-classes of the anchors. That way when you click on the navigation items, you get a more interactive experience.

nav ul a:active {
 -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3) inset;
    -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3) inset;
         box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3) inset;
}

As demonstrated below, there are multiple applications of CSS Box Shadows:

CSS3 Transition

CSS3 provides us the ability to include transition effects that were only once available on Adobe Flash¹. Transitions are meant to be used sensibly to enrich the user experience. In this case, I am attempting to create a desktop-application-esque experience for the users.

The transition is to be placed so that the box shadows and colour of anchors change with a subtle transition effect. It is barely noticeable but adds to the overall smoothness of the interface.

nav ul a:link, nav ul a:visited {
 ...

 -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
     -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
         transition: all 0.3s ease;
}

nav ul a:hover, nav ul a:active {
 ...

 -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
     -ms-transition: all 0.1s ease;
      -o-transition: all 0.1s ease;
         transition: all 0.1s ease;
}

The transition is set to all because we are transitioning two different properties of the anchor: the link colour and box-shadow. We could use transition: colour and transition: box-shadow separately but that would add too much redundancy with all the vendor-specific code.

If you are curious about the syntax of the transition, please refer to Dan Cederholm’s excellent guide to CSS3 Transitions on A List Apart.

Let’s have a closer look at the vendor specific codes:

1. We start with Webkit based browsers
2. Followed by Mozilla
3. The upcoming Microsoft Internet Explorer 10 comes with full support for CSS3 Transitions. Versions 9 and below have no support whatsoever.
4. Opera version 10.5+ supports transitions
5. Finally, the CSS3 standard.

The document should now resemble something like this:

The dropdown markup

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li class="breakfast active"><a href="#">Breakfast</a>
   <ul>
     <li class="bread"><a href="#">Bread</a>
       <ul>
         <li class="french"><a href="#">French</a></li>
         <li class="english"><a href="#">White</a></li>
         <li class="brown"><a href="#">Brown</a></li>
       </ul>
     </li>
     <li class="eggs"><a href="#">Eggs</a>
       <ul>
         <li><a href="#">Eggs Benedict</a></li>
         <li><a href="#">Deviled Eggs</a></li>
         <li><a href="#">Scotch Eggs</a></li>
         <li><a href="#">Scrambled Eggs</a></li>
       </ul>
     </li>
     <li class="bacon"><a href="#">Bacon</a>
       <ul>
         <li><a href="#">Canadian</a></li>
         <li><a href="#">Southern</a></li>
         <li><a href="#">Crisp</a></li>
       </ul>
     </li>
     <li class="jam"><a href="#">Preserves</a>
       <ul>
         <li><a href="#">Raspberry</a></li>
         <li><a href="#">Gooseberry</a></li>
         <li><a href="#">Strawberry</a></li>
         <li><a href="#">Blackberry</a></li>
       </ul>
     </li>
     <li class="coffee"><a href="#">Coffee</a>
       <ul>
         <li><a href="#">Cappuccino</a></li>
         <li><a href="#">Latte</a></li>
         <li><a href="#">Espresso</a></li>
         <li><a href="#">Macchiato</a></li>
       </ul>
     </li>
   </ul>
 </li>

...
</ul>

The code above is simply a sample of the full markup. As you can see, there are nested unordered lists within the top-level list items. Here is the full HTML.

Now that we have a complete nested HTML structure in place, it is time to style them.

Styling older browsers first

The principles of progressive enhancement teaches that we must cater for older browsers first before adding more features to newer, more standards-compliant browsers. Following those principles, we will be styling a basic version of the dropdown navigation first.

#menu li:hover > ul {
 display: block;
}

#menu li:hover > a {
 color: #a67b45;
}

nav li ul {
 display: none;
 margin: 0;
 position: absolute;
 top: 46px;
 left: 0px;
 width: 130px;
 border: none !important;
 padding: 2px;
 background: #999;
 z-index: 1000;
 zoom: 1;
 -webkit-box-shadow: none;
    -moz-box-shadow: none;
         box-shadow: none;
}

nav li ul:before, nav li ul:after {
 display: table;
 content: "";
 zoom: 1;
}

nav li ul:after {
 clear: both;
}

nav li ul a {
 float: none;
}

nav li ul li {
 width: 130px;
 display: block;
 border-top: 1px solid #cfcfcf;
 border-left: none !important;
}

nav li ul li ul {
 display: none;
 left: 130px !important;
 top: -3px;
}

At the beginning of the code block, you will see that when you hover on the top-level item, its children are displayed by switching its display property to block.

Then the code goes on to define the structure of the sub-level menu system. Some recurring features such as the clearfix hack and CSS3 Box Shadows are seen at play.

What you will across all browsers at this point is this:

Progressively enhanced

Modernizr adds classes to the html element of the document according to the capabilities available in the browser. We will require browsers that support RGBA to display an enhanced design.

.rgba nav li > ul {
 padding: 10px;
 left: -10px;
 background: rgba(0, 0, 0, 0.1);
 -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
         border-radius: 10px;
}

.rgba nav li ul li ul {
 top: -10px;
}

.rgba nav li > ul {
  margin-top: -1px;
}

Modernizr adds the class rgba to the html element of the document when the document loads. Using this method, we can style advanced browsers without affecting the older non-compliant ones.

With the enhanced design, standards-compliant browsers should now display the navigation with all the CSS3 RGBA goodness.

The code above has been update, thanks to a bug kindly reported by Stephen.

The jQuery plugin

For the purpose of this navigation, we are going to build a custom jQuery plugin. The purpose of the plugin is to:

1. Find out if the navigation items have any children. If they do, add a hasChildren classname
2. Wrap the inside list items anchors with a span, which is useful for applying styling
3. Apply the class hover when an onHover event occurs on the list items

Allow me to give to give you the code straight away:

$.fn.nav_dropdown = function(options) {

 var defaults = {};
 var opts = $.extend(defaults, options);

 // Apply on those items with children
 this.each(function() {
   $(this).find('li').each(function() {
     if($(this).find("ul").length > 0) {
       $(this).addClass("hasChildren");
       $(this).find('> a').wrapInner("<span></span>");
     }
   });
 });

 // Apply on all list items
 $(this).find("li").hover(function() {
   $(this).addClass('hover');
 }, function() {
   $(this).removeClass('hover');
 });

 $('li').has('ul').hover(function(){
   $(this).children('ul').show();
 }, function() {
   $(this).children('ul').hide();
 });
};

As you can see above, the jQuery plugin is very basic and nothing to be overwhelmed with. I am using the wonderful jQuery plugin authoring boilerplate provided by Mike Alsup of Learning jQuery.

Now all you have to do is to call the function and tell it what HTML element to apply it to:

$(function() {
  $('nav').nav_dropdown();
});

We have added the hasChildren class to the list items that contain further items as children. We will have to provide additional styling, so that users can visually tell them apart from the childless items.

Styling items with children

Before we go into the CSS styling, we have to create a CSS Sprite with arrows that act as pointers. There are four elements within the sprite as demonstrated below.

Now that we have an image with arrows, let us apply the styling. Firstly, the top-level items get their visual cues with the following code:

nav ul li.hasChildren a span {
 padding: 0 20px 0 0;
 background: url(/demo/css3-nav-menu/images/sprite.png);
 background-position: right top;
 background-repeat: no-repeat;
 display: block;
}
nav ul li.hasChildren a:hover span, nav ul li.hasChildren.hover a span {
 background-position: right -50px;
}

Now for the sub-level navigation items, we are going to apply some styling:

nav li ul li.hasChildren a > span {
 background: url(/demo/css3-nav-menu/images/sprite.png);
 background-position: right -97px !important;
 background-repeat: no-repeat;
}
nav li ul li.hasChildren a:hover > span,
nav li ul li.hasChildren.hover > a span {
 background-position: right -138px !important;
}

With the help of a little javascript and an image sprite, we have created a navigation where items are differentiable according to whether they have children.

And viola! That is all there is. Here is the final demo, one more time:

Conclusion

And we’re done! The final code is available at JSFiddle for your convenience.

Congratulations, you now have a completely cross-browser compliant CSS3 Navigation Menu that is fully functional in older non-supporting browsers and takes advantage of advanced CSS3 features in modern browsers.

If this tutorial has been helpful to you or If you happen to be a front-end development guru who knows more than me, your feedback would be very much appreciated.

Further reading

For further reading, here are some excellent resources from world-class web developers:

• Introduction to CSS3 – Borders at DesignShack.
• The elusive CSS Border Gradient by Nate Smith.
• Web Designer Wall has the beginner’s guide to Cross-browser CSS3 Gradient.

Please use this code for learning purposes only and please do not blindly copy/paste your way to glory. I cannot guarantee that the code will not break your existing layout. I herewith declare myself not responsible if the code presented here happens to break layouts or kill your neighbour’s cat.

What can you do with an unordered list?

As demonstrated above, we have styled a simple unordered list to design an outstanding cross-browser compliant navigation menu. What can you do with a humble ul?

Start forking the code and show us what you can do. Make sure you link to the live demo in your comment below.

1. Be sure to read Rich Bradshaw’s comprehensive guide to CSS3 Transitions, Transforms and Animation.

Thankfully, web technologies have advanced to the point that newer, more efficient means of communications have arrived – that are specifically tailored for this purpose.

I like to gather feedback, early and often. For this, I use web based proofing services. They are cheap and very efficient is maintaining an efficient channel of communication with the client. They help keep the designer and the client stay on the same page at all time.

Over the last 12 months, quite a few contenders have emerged in this space. Let’s have a look:

ProofHQ

ProofHQ is a comprehensive proofing tool — complete with contact and client management and full featured annotation, review and approval process management.

The app provides a very intuitive interface for feedback and approval management for designers as well as decision makers in the client company.

ProofHQ is not just limited to web designers, it can also satisfy the proofing needs of professional print designers. It handles Adobe Creative Suite¹ and multi-page PDF files with ease.

Among many great features, one that stands out is Basecamp integration. The seamless integration with the existing projects and milestones in Basecamp makes ProofHQ a perfect companion app.

Drag-and-Drop integration with the desktop and version management of concepts are nifty features that make this app truly fantastic.

ProofHQ Annotation and Comment Interface

For the solitary freelance designer, there is the $17/month package with 2GB is storage and up to 30 proofs per month. There are 5 more packages, suitable for teams of all sizes, from 2 to 40 users.

Up to 40 GB of storage and 1000 proofs per month is enough for quite a large company. The price tag of $299/month is more than reasonable.

Onotate

Onotate is another great service that focuses on annotation of design mockups. This tool gives the reviewer some really nifty tools to pinpoint the issues and annotate them clearly for the designer.

The simplicity on Onotate is sheer brilliance. The creation of Projects and Stages, as well the upload of concepts was a seamless process — all done through a brilliantly minimalistic interface.

The reviewers are given straight-forward tools for annotation and commenting on the concept. You can choose your mood when leaving a feedback on a concept.

Onotate Annotation Interface

Onotate would be perfect for the freelance designer showing off their concepts and prototypes to clients and gathering feedback. I would imagine the client would love the minimalistic interface that lets them get the work done without getting in the way.

The pricing plan is very simple. The only plan is $15/month and provides access for unlimited people to unlimited storage. Very good value for money, if you ask me.

DesignSignoff

This is a startup which recently acquired GetSignOff and have cooked up something quite fabulous.

DesignSignOff, as the name suggests, focuses on the process of review and sign-off of web design design prototypes. The app allows smooth collaboration between all parties and helps agencies get to the all-important milestone – Design SignOff.

What differentiates this app from the rest is its outstanding presentation toolkit. The app is designed for agencies that pitch concepts to clients. The clients can view the concepts in their own browsers and when the time is right, leave valuable feedback.

DesignSignOff is not just for design review and approval, it handles everything from pitch to sign-off. This is a truly innovative solution that alleviates much headache and streamlines the process at many top agencies.

DesignSignOff Review Interface

The package for ‘the little guy’ is $12 per month provides access to 1 user and allows 3 clients and up to 10 projects.

For small groups, the $25 per month package allows 20 clients and 50 projects, as well as SSL security. If you’re a behemoth looking for everything unlimited, it will set you back by a rather measly $35 a month.

ConceptShare

ConceptShare is the leading tool for design presentation and review. It cannot be easier to upload your design proofs for review. Almost every client I have worked with have familiarized with the interface of ConceptShare within minutes.

Update: There has been a few changes with ConceptShare. They are now focused towards agencies and businesses looking for proofing software. If you are representing an agency, get in touch with their Sales Department for a trial.

Conclusion

In my experience, the clients love web based proofing because it allows them to show off the designer’s work to their colleagues and loved ones and gather their opinions which, in turn, shapes their own opinion. Nearly half my clients come back to me with feedback from their wives!

Web based Design Proofing/Review and Sign-off applications are a major part of my design process.

What are your experiences with such applications? Let me know your thoughts and opinion.

1. Photoshop .PSD and Illustrator .AI files have been tested. Other formats may or may not be supported.

A client is likely to scan your portfolio before deciding to contact you. It is very likely that the reviewer is evaluating other portfolios as well. So how do you ensure that yours stand out amongst the crowd?

In this highly competitive industry, it is not enough to have some excellent pieces of work under your belt — you must also display your work and show a lot of professionalism in doing so.

In my 8 years in the industry, I have picked up a few tricks about how to design a portfolio with a punch and a kick.

Photo: {link:http://www.flickr.com/photos/22897666@N00/5489630899/}Catskills Photography{/link}

Tell a story

Most designers display a thumbnail of their portfolio piece and add a link to the live website. That, alone, is not enough to tell a reviewer what they want to know.

Tell the world about the experiences you’ve had whilst working on the project. Write a few sentences about the project, the people behind it and how it served the ultimate business objective of the client.

Focus on the deliverables that were expected from you at the beginning of the project. Let the world know how your work contributed to the success of the project and how it benefits the client’s bottom-line.

If you wish to, write about the hiccups along the way and how it helped you grow as a professional.

Your portfolio is not just a bunch of cropped images, it is a collection of experiences – and there’s a story behind every experience. Tell the story.

Create actionable steps for visitors

Once the reviewers have looked around, they would want to contact you via email, twitter or any other media. Make sure the contact options are easily available to all viewers. A simple actionable step to your inbox goes a long way.

Use strong call-to-actions to invite viewers to find out more about you and your services. Ask them to write to you and leave a comment. Ask for a job or a referral.

The people who are viewing your portfolio are likely people who are looking for a designer in their team. Show them what value you add to the company and why you should be hired.

Only display your best work

We have all designed something that we’re not particularly proud of. There were times when the client’s demands became the direction for the design, instead of your own liking, resulting in rather mediocre results.

There were times when the client employed other people to modify (read bastardize) my work. The masterpiece that I thought I created is no longer what it was.

It is easy to get carried away and showcase every little piece you have ever created. But think of what a prospective client might think of you when they see a mediocre or mutilated piece of work in your portfolio.

Not every piece is portfolio-worthy. Learn to let go.

Tag every piece with meta information

With each piece of work in your portfolio, display some key information such as:

• The name of the client.
• How long you have worked for the client.
• Your specific role in the project.
• What deliverables you produced.

Some designers even showcase what software they have used in the process. Customer testimonials are optional but they create a great bit of credibility for yourself in the eyes of the reviewers. Focus on the tangible benefits your client enjoyed as a direct benefit from your work, if you happen to have such information.

Show some personality

Your portfolio is an image your personality and your primary marketable skill. If your skill is User Interface Design, specifically for Web Apps, make your portfolio as clean, intuitive and usable as possible.

If you’re a Graphic Designer by heart, make sure your portfolio website speaks that language.

Bonus tip: A little Marketing knowledge goes a long way

The reviewers visiting your online portfolio are likely to be individuals whose sole focus is to deliver greater value to their end consumers. They will consider you, as a designer, only when they know that you care capable of adding more value to their products or services – which will, in turn, benefit their consumers.

Every piece in your portfolio needs to reflect how your services benefitted your client organisations. A little knowledge of marketing will help you gain insight as to how clients perceive their own companies and new hires.

For employers, even a new hire is an investment. When they hire a web designer, they will be making a significant investment in wages and overhead. As any businessperson would tell you, every investment is made to make a profit — a Return on Investment (ROI).

Your portfolio is not just for your own bragging rights, it is meant to influence prospective employers who need convincing. You need to convince them, through your portfolio, that you are capable of producing value and delivering a significant ROI for their businesses.

My scepticism began after I gave SASS/HAML a try. Even though the documentation looked very inviting, getting started was too much trouble. Not to mention the code was buggy.

It would be unfair to bash the developers of SASS/HAML, these technologies were experimental and not at all mature at that stage. Implementation in a large critical business application was not feasible by any means.

Years went by as they evolved and matured. SASS along with LESS and a few other newcomers became competitors in this particular niche. Many developers adopted them quickly and eventually the interwebs became swamped with debated about which one is better¹.

Recently, due to overwhelming noise² in the interwebs³, I decided to give them another try.

My objectives for using a CSS pre-processor were:

1. I like modular CSS files. I want them all concatenated and minified before passing onto the browser.
2. I do not want to handle the command-line interface. Running a command after every little CSS change seems counterproductive to me.
3. I want convenience and speed. Anything that slows me down would force me to go back to vanilla CSS.
4. I do not want to learn a new language.
5. Must fit into my workflow. I use Coda and develop most websites and applications with WordPress and CakePHP, respectively.

LESS appeared to be the easier choice, primarily because of the following reasons:

1. Less.js provides the option to pre-process CSS files on the fly
2. Less.app is a native Mac OS app that is free to use⁴
3. Language-agnostic⁵
4. Drag-drop setup. Just had to rename the file extension from .css to .less

I chose not to use Less.js with the project as it adds a little payload to the already heavy templates. Instead, I use Less.app for snooping my development folder and compile, concatenate and minify the output.

I have just started off with LESS and eager to find out more and more as I go on with my current project. I must say that the increase in productivity is noticeable as LESS is such a time-saver.

I never thought I would say this, but I am starting to get hooked on LESS.

1. The debate is brilliantly visualised at Wrangl, http://wrangl.com/sass-v-less
2. Lea Verou has an excellent case in the argument against CSS pre-processors. Aaron Russell defends CSS pre-processors and counters one criticism at a time. Both are must-reads.
3. Also, Twitter’s Bootstrap framework and Compass looks very promising
4. In comparison, Compass.app, is written in Java and costs money to run. It’s only $7 but I’m cheap.
5. A complete contrast to SASS and Compass. Their official documentation relies on the existence of Ruby.

So you have been working day and night putting your sweat, blood and tears into this new design piece. You’ve emailed your client the prototypes and screenshots, asking for their feedback, hoping to catch their attention and get the feedback ASAP.

Looking at this from the client’s perspective, they are receiving an email with numerous attachments with no context whatsoever. The client downloads the images and looks at the designs and, in most cases, they do not know how to communicate their feedback to the designer — apart from sending an email with long list of change requests or criticism.

You upon receiving the response, try to decipher and put a context on what the client tried to say. It becomes apparent that this is clearly not a very effective means of communication.

Lack of communication can ruin the project, or worse, the relationship between you and your client. How do you make sure that you clearly communicate your design decisions and effectively gather useful feedback? How do you make sure that client formally expresses their approval of the designs? Here are a few proven methods of effective communication and feedback gathering, for us creative types:

Rich Internet Applications to the rescue

With a plethora of affordable web-based proofing tools¹ available at our disposal — there is no reason not to put them to use.  These tools let you upload your design concepts and showcase them to your client.

The clients, in turn, get to annotate and leave comments after review. This feedback is essential for the designer to meet their client’s needs.

Some of these tools provide version management and contextual feedback systems, which are indispensable for rapid review and approval of your hard work.

Handling change requests

Change requests are usually good and constructive feedback for your designs. The client may have envisaged something different than what you have put up. Allow them to communicate what they want.

• Make sure every change request is officially documented. If a client asks you over Skype or phone to make a certain change, ask them to put it in wrtiting and send an email.
• Make a list of changes requested by the client and formally ask for a go-ahead before you commence the revision.
• Most clients, in my experience, add new ideas and features when they see the first mockup. In most cases, you have to end up adding features or tweaking some parts of  your design. This could mean that you end up working extra hours for the same pay.  In the event that you have to add new features and functionality to your design than what had previously been agreed upon, be sure you are charging extra for your time.

Staying within the scope

I am sure you and your client have agreed upon some Terms and Conditions before you commenced work on your project. Make sure you have communicated to the client that you will charge extra for any change in the scope of the project (i.e. addition of features).

• The client will, inevitably, come up with more ideas and request more changes during the entire process. But make sure that you stay within the scope originally defined during the beginning of project. If you are exceeding the scope, make sure you update the invoices.
• Feedback is good, but only if it does not make the deadlines impossible. Design changes can push the deadline of the project into months of delay — and when the delivery is delayed, it is the designer who is blamed. Therefore, in such cases you need to educate your client that further changes can be made post-launch and in order to deliver the product on time, it is essential to stick to the scope and timeframe. The key is to stick to the original timeline and helping the client limit the scope of the project.

Get them to sign a confirmation

Get it on paper and lay ground rules for future changes to design. It may not seem very important at the time, but it is vital that you get written (as opposed to verbal) approval of your designs.

The design will inevitably be changed in the future, during build and after launch. So make sure that in the future, the design changes are paid for. There should be a clear provision in your contract that allows additional design changes after the sign-off to be fully payable.

Change requests after sign-off

So often clients change their minds after they have said ‘yes’ to the design. The more they look at the designs, the more things they want changed.

If the changes are a must, you should be able to charge your clients for every change you make after the design has been approved — by the hour.

Conclusion

Feedback and approval are complex procedures and must be handled with a lot of professionalism. It is vital for complex design projects to have an effective communication platform. In my experience, having a lean and well-thought-out review and approval process can save a lot of time and in most cases, help you deliver client’s requirements on time.

Please feel free to share your experiences and opinion. How do you ensure timely sign-off from your clients?

External resources

• Designm.ag has 10 Rules and Resources for Better Design Feedback.
• Paul Boag, the guru, has written 10 Ways To Get Design Approval at 24ways.org.
• Paul Boag has his SXSW presentation about Pain Free Design Sign-Off at Boagworld.
• SmashingMagazine provides invaluable advice in How To Get Sign-Off For Your Designs, once again, by Paul Boag.

1. Mashable has a great list of Web Based Tools for Design Feedback.