However, the recent updates to WordPress enables developers to provide different Post Formats. According to the Codex:

Post Formats is a theme feature introduced with Version 3.1. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. The Post Formats feature provides a standardized list of formats that are available to all themes that support the feature.

This is perhaps an attempt to level with Tumblr which is build around this very concept. However, WordPress provides very little guidelines as to how to work with the different Post Formats. I suppose the core team is leaving the details to the large ecosystem of designers and developers to figure out what to do with this new feature.

The Basic Structure

Post Formats have opened a world of opportunities for designers and developers. We are no longer limited to the mundane blog posts that WordPress is so darn good at publishing.

For the purpose of this tutorial, let’s say we are supporting the gallery, audio and video Post Formats. This can be done with a quick snippet in the functions.php

add_theme_support( 'post-formats', array( 'gallery' , 'video' , 'audio' ) );

However, developers have been struggling to keep their implementation of Post Formats clean and bloat-free. The most common approach seems to be using if/else conditions within template files and providing the markup for each Post Format – all within a single document. This is, of course, very inefficient and can get very bloated very quickly.

I find the most efficient manner of integrating Post Formats is this code snippet in the index.php and single.php templates:

<?php if ( have_posts() ) :
  while ( have_posts() ) : the_post(); 
    get_template_part( 'content', get_post_format() );
  endwhile;
endif; ?>

For each Post Format you support in your theme, there must be a separate template containing the markup. For instance, for the gallery format, the filename would be content-gallery.php and likewise for all the other formats you choose to support.

In case your theme does not have the appropriate template, it will fall back to the default content.php.

Functions.php

Firstly, we create a function within functions.php with the only parameter being Post Format:

function enqueue_post_format_resources($format) {

if( in_array($format, array('gallery')) ) {
  wp_register_script('galleria', get_template_directory_uri() . '/js/galleria/galleria.js', false, false);
  wp_register_script('galleriatheme', get_template_directory_uri() . '/js/galleria/classic/galleria.classic.js', false, false);
  wp_register_style('galleriathemecss', get_template_directory_uri() . '/js/galleria/classic/galleria.classic.css', false, false);
  wp_enqueue_style( 'galleriathemecss' );

} elseif( in_array($format, array('audio', 'video')) ) {

  wp_register_script('mejs', get_template_directory_uri() . '/js/mejs/mediaelement-and-player.min.js', false, false);
  wp_register_style( 'mejscss', get_template_directory_uri() . '/js/mejs/mediaelementplayer.min.css', false, false );
  wp_enqueue_style( 'mejscss' );

} else {
  return false;
}

}//end function

We are checking if the given format matches a certain criteria. Firstly, we check if it is a gallery – in which case, we will register and scripts and stylesheets of the fantastic Galleria javascript library.

Secondly, we check if the Post Format is either audio or video. In this case, we register the resources of MediaElement.js – which is an outstanding library for handling HTML5 Audio and Video in all browsers.

You have the liberty to add any library or polyfill as you see fit and set conditions for a particular Post Format.

One curious thing about the code above is that only the stylesheets are being enqueued, but not the scripts. This is because we are going to lazy-load the scripts within the theme using Modernizr (discussed below). However, this step is entirely optional. You can go ahead and use wp_enqueue_script for each of the registered scripts above. That will directly print the code in your theme’s wp_footer.

We will need a custom script that displays the enqueued script:

/* 
* Display the enqueued scripts
* URL: http://jamesfishwick.com/2011/modernizr-and-jquery-and-wp_enqueue_script-oh-my/
*/

function registered_scripts( $handles = array() ) {
   global $wp_scripts, $wp_styles;

   foreach ( $wp_scripts->registered as $registered )
     $script_urls[ $registered->handle ] = $registered->src;

    foreach ( $wp_styles->registered as $registered )
      $style_urls[ $registered->handle ] = $registered->src;

    if ( empty( $handles ) ) {
      $handles = array_merge( $wp_scripts->queue, $wp_styles->queue );
      array_values( $handles );
    }

    $output = '';

    foreach ( $handles as $handle ) {
      if ( !empty( $script_urls[ $handle ] ) )
        $output .= $script_urls[ $handle ] . ',';

     if ( !empty( $style_urls[ $handle ] ) )
        $output .= $style_urls[ $handle ] . ',';
    }

  $output = substr( $output, 0, -1 );
   echo $output;

}// end function

I will allow the original author of this snippet James Fishwick explain the functionality of registered_script().

content-{format}.php

Now that we have set up a script that registers and enqueues scripts and styles based on the post format that is passed along as a variable, we can now include this snippet at the beginning of each content-{format}.php file:

<?php enqueue_post_format_resources( get_post_format() ); ?>

Hence, when the Post Format is video, the function will be called to enqueue all the necessary resources appropriate for this format – which is, in this example, the components of MediaElement.js.

Loading Registered Scripts with Modernizr

In functions.php, I only loaded the stylesheets using wp_enqueue_style but left out the javascript files. The purpose for this is that we are going to be using Modernizr for loading the script resources.

<script type="text/javascript">
Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
        Modernizr.load('js/jquery-1.7.2.min.js');
      }
    }
  }
  <?php if( wp_script_is('galleria', 'registered') ) { ?>,{ load: '<?php registered_scripts( array('galleria') ); ?>' } <?php } ?>
  <?php if( wp_script_is('galleriatheme', 'registered') ) { ?>,{ load: '<?php registered_scripts( array('galleriatheme') ); ?>' } <?php } ?>
  <?php if( wp_script_is('mejs', 'registered') ) { ?>,{ load: '<?php registered_scripts( array('mejs') ); ?>' } <?php } ?>
  ,{ load: '<?php registered_scripts( array('behaviour') ); ?>' }
 ]);
</script>

Firstly, we make a query to the Google CDN for hosted version of jQuery. There is a fallback in case the CDN file fails to load. The fallback is self-hosted within the theme’s own directory structure.

Once it has been ensured that jQuery is loaded – by whichever means – we are going to load the resource files necessary for the Post Format.

We are using lesser-known wp_script_is function to check if a particular script is registered. The scripts for the audio and video Post Format are only registered when such a post is being rendered. If the script is registered, it definitely means that an audio/video post is currently being rendered – so we load the necessary script using Modernizer.load().

Limitations

The stylesheets loaded using wp_enqueue_style are, by default, added to the wp_footer, meaning that your stylesheets will end up at the bottom of your document. This is bad web design practice.

You could also load your CSS resources just like the Javascripts, but you will need to add CSS Prefix to your copy of Modernizr. WordPress happens to have a function wp_style_is which serves the purpose of checking whether a stylesheet is registered. Instead of enqueueing the stylesheet directly from functions.php, you can load them using Modernizr in the same manner as the scripts.

Conclusion

Post Formats are still uncharted territory for a lot of WordPress developers. I have demonstrated a method of keeping the code itself and the final markup as squeaky-clean it is supposed to be. Instead of loading all the resource libraries, only load them when they are needed – and do so in the most elegant fashion possible.

After all, code is poetry.

The post Conditionally Enqueue Scripts and Styles for WordPress Post Formats appeared first on Saddam Azad - User Interface Designer & Front-end Engineer..

The whole point of the practice of web design is to present appropriate user interfaces that feel native to the users’ environment. Due to the rising number of users from mobile and tablet devices, the “Responsive Web Design” approach has become a necessity in modern day web design. There is a new commandment in web design practice: Thou shall not discriminate against devices.

I have written a hands-on tutorial using the Progressive Enhancement technique regarding the design and development of a “Bulletproof Navigation Menu” that works across all major browsers. But nowadays more and more people are browsing the internet with mobile devices and as a result, the  existing techniques of web development – as demonstrated in my tutorial – have become archaic and produces very unpleasant experiences for mobile users.

Demonstration

Responsive Navigation Menu – Click to Open Demonstration

The solution presented here is, by no means, ideal for developing complex navigation menus, is not without limitations and should not be copied wholesale into a production environment. This is a proof-of-concept that attempts to achieve that following:

• Mobile-first approach for development. Start with the smallest resolution and build upwards.
• Provide a (somewhat) native User Experience for users of mobile devices.
• Provide a complete desktop experience when browsed on large devices.

A slight warning about the demo: If you are going to stretch the corner of your browser to test how it “responds”, you may be disappointed. It is recommended that you reload the page after you have resized your viewport.

If you are keen on trying out the demonstration in your mobile device, use this shortlink:

http://bit.ly/respnav

The code is “available at Github” for your forking pleasure. You can also “download the source code” and play around.

Existing Responsive Navigation Patterns

The navigation happens to be the most important aspect of any website and it is important to provide appropriate navigability for users on any website regardless of the device they are browsing from. The problem with existing web design practice is that the content is not optimised and difficult to navigate on mobile devices.

Expert practitioners have extensively written about Responsive Web Design; patterns, best practices and what not. Some notable insights into responsive navigation design patterns are:

• Brad Frost’s article about “Responsive Navigation Patterns“ which provides excellent insight into the various methods of implementing responsive navigation menus.
• Michael Mesker of Palantir provides a real-life case study and insight into responsive design in the article “Scalable Navigation Patterns in Responsive Web Design“.

In the aforelinked article, I found this little sentence very intriguing:

Navigation patterns for RWD is exciting territory that we as an industry are all still exploring.

- Micheal Mesker.

The most popular solution to navigation design is, by far, the “select menu” approach, where the navigation is displayed as a select menu or dropdown menu on smaller viewports. There is a plethora of javascript libraries available for converting navigation menus to drop-downs on small screens. Some of the tools used by developers for converting their existing design to responsive are as follows:

• Matt Everson of Astuteo authored Mobile Dropdown Conversion.
• Viljami Salminen authored the “TinyNav.js” library.
• Roger Johansson has recently published “an alternative to the select element for smaller viewports” where the user can toggle the menu with a button on mobile devices.

Perhaps the reason for the popularity of this approach is that most developers are converting their existing designs to adapt to the mobile viewports. This is quite the opposite of what we are trying to achieve with the mobile-first approach.

There are some notable hands-on tutorials that demonstrate the mobile-first approach for developing responsive navigation menus:

• Joshua Johanson has written a brilliant tutorial for DesignShack: “Code a Responsive Navigation Menu“.
• Jeremy Hixon’s piece at SmashingMag: “Progressive And Responsive Navigation“.
• Nick La for WebDesignerWall authored “Mobile Navigation Design and Tutorial“.
• Filament Group posted their brilliant article “A Responsive Design Approach for Navigation“.

The existing solutions are commendable work by their respective authors but they also come with some limitations.

This tutorial will follow “the toggle” pattern (as classified by Brad Frost) for building a relatively complex website navigation. The development process will be entirely mobile-first and will attempt to deliver a very native user experience to all users regardless of the device resolution.

Prerequisites

If you are downloading the source from Github, you can skip this section entirely. Please make sure that your local web server is fired up and the files are placed in your htdocs.

We are going to use fine blend of libraries and tools for development of this navigation menu. Before we get started with the development, please complete the following steps:

1. Download the latest copy of Normalise.css.
2. Download the latest jQuery, the latest Modernizr and Selectivizr.
3. Download the HoverIntent library.
4. Grab the latest Overthrow.js from Filament Group.
5. Get an good understanding of Viewport and Device Width, if you do not already.
6. Get your code editor fired up.

Now setup a basic file and folder structure as per the following:

The File Structure for the Demonstration

Place the javascript libraries (jQuery, Modernizr and Selectivizr) into the js folder. Also, place normalise.css in the css folder. Now, we are set to go.

Target Segments of the Audience

The target audience will vary from project to project, depending on the business objectives of the website and the client funding it. But for the purpose of this demonstration, we have selected four broad target audiences.

Since we are building from small devices upwards towards larger screen sizes, here is the order of the segments of the audience we are going to cater for:

1. Smartphones with a minimum device width of 320 pixels and a maximum device width of 480 pixels. This covers pretty much all smartphones out there.
2. Small tablet and mobile devices with a resolution between 481 and 767 pixels. This includes the 4+ inch phones and the small 7-inch tablets.
3. iPad specific stylesheet¹, with a minimum device width of 768 and maximum of 1024, which defines rules that apply to both portrait and landscape orientations.
4. Desktop devices and anything larger.

There is always the scope of further segmenting the Target Audiences. It is possible to design different layouts for portrait and landscape orientations and also for internet-enabled televisions. Some websites cater up to 6 segments using Media Queries. There is no rule of thumb or general guideline as to how many segments you should style for. The matter is entirely variable based on business requirements.

The Markup

Now that we know our target segments and have built the basic file structure, let us start with the markup.

The <head>

The code above borrows heavily from the “320 and Up Framework” and some bits and pieces from “Twitter Bootstrap” as well as the “HTML5 Boilerplate Mobile“. Unfortunately, all frameworks/boilerplates come with some useless cruft that is no good for this demonstration. So, instead of copying the boilerplates wholesale, we are only taking the useful bits and pieces.

<!doctype html>
<head>
 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <title>Responsive Navigation Menu</title>
 <meta name="description" content="A hands-on tutorial on how to build an advanced Responsive Navigation Menu.">
 <meta name="author" content="Saddam Azad - UI Designer and Front-end Web Developer. London, UK.">

 <!-- http://t.co/dKP3o1e -->
 <meta name="HandheldFriendly" content="True">
 <meta name="MobileOptimized" content="320">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 <link rel="shortcut icon" href="/favicon.ico">

 <!-- For all browsers -->
 <link href='http://fonts.googleapis.com/css?family=Euphoria+Script|Lato' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/normalise.css" media="screen">
 <link rel="stylesheet" href="css/atmosphere.css" media="screen">

 <!-- Media Queries -->
 <link rel="stylesheet" href="css/mobile-nav.css" media="screen and (min-width: 320px) and (max-width: 1024px)">

 <link rel="stylesheet" href="css/smartphone.css" media="screen and (min-width:320px) and (max-width:480px)">
 <link rel="stylesheet" href="css/tablet.css" media="screen and (min-width: 481px) and (max-width: 767px)">
 <link rel="stylesheet" href="css/ipad.css" media="screen and (min-width: 768px) and (max-width: 1024px)">

 <link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 1025px)">

 <!--[if lt IE 9]>
 <link rel="stylesheet" href="css/desktop.css" media="screen">
 <![endif]-->

 <!--[if (lt IE 9) & (!IEMobile)]>
 <script src="js/selectivizr-1.0.3.min.js"></script>
 <![endif]-->
 <script src="js/modernizr-2.5.3.min.js"></script>

 <meta http-equiv="cleartype" content="on">
</head>

Some of the notable pieces from this code are:

• The meta tags with attributes such as HandheldFriendly, MobileOptimised and “Viewport“.
  • These are “Mobile Meta Tags” that are quite essential for developing for mobile devices.
  • The “Complete Idiot’s Guide to Viewport and Media Queries” may shed some light if you are in the dark.
  • The markup documentation for “HTML5 Boilerplate” provides a far better insight into these meta tags.
• For the purpose of this tutorial, we are going to add a link to Google Webfonts to retrieve the fonts  ”Euphoria Script“ and “Lato“. This step is entirely optional.
• And then we are going to use a modified bastardised version of Andy Clarke’s “Hardboiled CSS3 Media Queries” for the purpose of linking our stylesheets.

The reason for separating the stylesheets is because adding so many Media Queries within one stylesheet is perhaps not the best idea, in my opinion. This is actually quite a controversial issue and purely a matter of preference and/or situational requirement. I personally prefer the external stylesheets and I believe it serves the purpose of this tutorial better. Zoe Gillenwater has written comprehensive pros and cons for “external vs. embedded media queries” that is a must-read.

But why so many stylesheets? Here’s why:

1. The first stylesheet is a query to Google Web Fonts for “Euphoria Script“ and “Lato“ fonts.
2. The normalise.css is the alternative to reset.css that is much better suited for modern web design.
3. The atmosphere.css is the colour, texture and typography separated from the layout and media-specific code.
4. The first of the Media Queries, mobile-nav.css, defines a broad resolution window (between 320 pixels and 1024 pixels). This is the common code that would be applicable to a large range of devices – from phones to tablets. Hence, instead of replicating the code, we are creating a separate stylesheet.
5. The smartphone.css targets devices between a width of 320 and 480 pixels, as defined in our list of Target Audiences.
6. The following is tablet.css which accounts for #2 on the Target Audience list: tablets (and large phones) between the resolutions 481 and 767 pixels.
7. Next comes the ipad.css. With this stylesheet, we will cover both the portrait and landscape orientations.
8. The next one is the desktop.css for screens larger than 1025 pixels.
9. Since Internet Explorer 8 and below do not support Media Queries, we are going to tell older IE versions to accept desktop.css as the default stylesheet through conditional comments.

Once the Media Queries are set up, there are some other interesting bits in the <head>:

• We will have to embed Selectivizr for Internet Explorer 8 and below.
• Embed Modernizr for all browsers.
• Lastly, we have added a meta tag to activate cleartype rendering in Mobile IE for smooth font rendering.

The <body>

Now that we’re done with the head, let us build the essential bits of the body. Within the header element, we have set up the branding and tagline as headings.

<body>
<header role="banner">
  <h1 id="branding"><a href="#">Responsive Navigation</a></h1>
  <h2 id="tagline">A beautifully crafted responsive navigation menu</h2>

  <nav>

    <a class="btn btn-navbar" data-toggle="collapse">
      <span></span>
      <span></span>
      <span></span>
    </a>

    <ul id="menu" class="overthrow">
    ...
    </ul>

  </nav>
</header>

After the branding and tagline comes the most crucial nav element and there are two components within:

1. An anchor with class btn — and within it lies three span elements. This bit of the code is borrowed from the “Navbar Component” of the Bootstrap framework.
2. An unordered list called ‘menu’. The list items would be enclosed within the unordered list but they are not demonstrated here for the sake of clarity.¹ Get the whole markup from Github.
3. Note that the menu contains a classname of ‘overthrow’. This is a requirement of Overthrow.js as it enables greater support on mobile devices (using pollyfills where necessary and graceful degradation when not supported).

Apart from the header element, there are space fillers such as a section element with some content and a footer element with credits. These are non-essential for the tutorial.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>

<script src="js/plugins.js"></script>
<script src="js/helper.js"></script>
<script src="js/script.js"></script>

</body>
</html>

As you can see, there are quite a few javascript files being linked to:

• Firstly, it is a call to the Google CDN for the jQuery library. In the event that jQuert fails to load from the CDN, it will be found within the ‘js’ folder of our structure.
• The plugins.js file is borrowed from the HTML5 Boilerplate and can be found in the “Github repo“.
  • It is recommended that you append all additional jQuery libraries with this file.  It would save us an additional HTTP request for each library and keep all the libraries in one place.
  • Append the “HoverIntent” library.
  • Append “Overthrow.js” as well.
• The helper.js is borrowed from the Mobile Boilerplate.
• The script.js will be a blank document for now but we are going to need it later.

The Stylesheets: Atmosphere

Now that our markup structure is complete, let us move on to the stylesheets. Apart from the link to Google Web Fonts, the next stylesheet embedded into our document is normalise.css.

The following stylesheet is the atmosphere.css. There are bits of the CSS styling that apply to elements regardless of the resolution. An example would the background-image of the document. The colour, texture and typography remain constant across all devices. This is aptly-named as the “atmosphere” of the design by Andy Clarke, the author of 320-and-Up.

/* The clearfix method */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

First up, we have the “CSS Clearfix method” which allows us to clear floated elements with ease.

/* Basic Styling of the Body */
body {
  background: #e0e0e0 url(/demo/responsive-nav/img/background.png);
  margin: 0 auto;
  color: black;
  text-align: center;
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-weight: 300 !important;
  font-size: 10px;
  position: relative;
  overflow: auto;
  max-width: 1300px;
}
a:link,
a:visited {
  color: #666;
  text-decoration: underline;
}
a:hover,
a:active {
  color: #a67b45;
  text-decoration: none;
  outline: none;
}
a:active {
  color: #ff6000;
}

When styling the body, we are:

• Using a background pattern that can be repeated.
• Making Lato the default font, and falling back to Helvetica/Arial when Google Web Fonts cannot be loaded.
• Setting the default font size to 10px. Alternatively, you can use the “62.5% technique“.
• Setting the max-width to 1300 pixels.

/* Le Header */
header {
  padding: 20px 0;
  position: relative;
}
header h1#branding a {
  font-family: "Euphoria Script", cursive;
  font-weight: normal;
}
header h1#branding a:link,
header h1#branding a:visited {
  color: #000;
  text-decoration: none;
}
header h1#branding a:hover,
header h1#branding a:active {
  color: #a67b45;
  text-decoration: none;
}
header h2#tagline {
  text-align: center;
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  color: #444;
}

Next, we are styling the header element.

• The branding is using the fantastic Euphoria Script font from Google Web Fonts. Falls back to any cursive font that is default on the system.
• Making the tagline uppercase and aligning to the center of the screen. This will remain consistent across all viewports.

/* The common properties in the NAV element */
header nav {
  background-color: #f8f8f8;
  background-image: -moz-linear-gradient(top, #ffffff, #ededed);
  background-image: -ms-linear-gradient(top, #ffffff, #ededed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ededed));
  background-image: -webkit-linear-gradient(top, #ffffff, #ededed);
  background-image: -o-linear-gradient(top, #ffffff, #ededed);
  background-image: linear-gradient(top, #ffffff, #ededed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 1.5em;
}

/* Making sure lists have no margin/padding */
header ul#menu {
  margin: 0 !important;
  padding: 0 !important;
}

This is the crucial navigation bar. Over here, we are defining the basic style of the navigation bar that will be applicable to both the mobile and desktop resolutions. We are also using vendor-specific code for CSS3 Gradients and Box Shadow.

/* The content and footer sections */
section.content,
footer {
  padding: 10px 20px;
  background: #FFF;
  font-size: 1.5em;
  line-height: 1.5em;
  text-align: left;
  -webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
}
footer {
  margin: 20px 0;
}

Over here, we are styling the content box and the footer. The code should be self-explanatory.

The Stylesheets: Navigation Menu for Mobile Devices

Here is what we are trying to accomplish:

Navigation Bar for Mobile Devices

Now that the basic CSS bits are done, let us move on to the CSS Media Queries.  The first CSS attached to the document that is using the Media Queries is the mobile-nav.css that is applicable to devices with widths between 320 and 1024 pixels. This stylesheet applies to a very broad spectrum of devices ranging from smartphones to iPads.

I have previously mentioned that this bit of code will be used by at least three of the target segments of the audience. So, instead of repeating the CSS, we are delegating it to a separate stylesheet document.

/* The NAV element in mobile devices */
header nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  zoom: 1;
  width: auto;
  text-align: left;
  height: 40px;
  width: 100%;
}

The nav element is given a fixed position on top the viewport so that it remains in place even when you scroll the page.

/* The button on the top-right */
nav .btn-navbar {
  position: fixed;
  right: 10px;
  top: 6px;
  padding: 7px 10px;
  margin-left: 5px;
  margin-right: 5px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
}
nav .btn-navbar:active {
  background-color: #e6e6e6;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d9d9d9), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ffffff, #d9d9d9);
  background-color: #d9d9d9;
  background-image: -moz-linear-gradient(top, #d9d9d9, #ffffff);
  background-image: -ms-linear-gradient(top, #d9d9d9, #ffffff);
  background-image: -o-linear-gradient(top, #d9d9d9, #ffffff);
  background-image: linear-gradient(top, #d9d9d9, #ffffff);
  background-repeat: repeat-x;
}
nav .btn-navbar .icon-bar {
  display: block;
  width: 18px;
  height: 2px;
  background-color: #000;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
nav .btn-navbar.active .icon-bar {
  background-color: #a67b45;
  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25);
}
.btn-navbar .icon-bar + .icon-bar {
  margin-top: 3px;
}

The button on the top-right corner is given a fixed position and sprinkled with some CSS3 Inset Box Shadow for looks. The icon-bar elements are designed to emulate the look of native buttons. This bit of the code is borrowed from Bootstrap and modified to fit the needs.

Next up, we are going to style the navigation menu itself. The menu would reveal itself when the top-right button is clicked/touched. However, before we get into the behaviour manipulation with Javascript, let us style the menu.

/* Using the touch scrolling on capable devices. */
.overthrow-enabled .overthrow {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

A noticeable line in the code is the -webkit-overflow-scrolling: touch;. This is for “Native Momentum Scrolling” on iOS devices.²

We are taking advantage of the Overthrow library that enables overflow scrolling on few devices using a polyfill and gracefully degrades on non-supporting devices.

/* The unordered list with the menu */
ul#menu {
  background: #000;
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  font-size: 15px !important;
  overflow-x: hidden;
  -ms-overflow-x: hidden;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
ul#menu li {
  display: block;
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  background-color: #ededed;
  background-repeat: repeat-x;
  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);
}
ul#menu li:last-child {
  border: none;
}
ul#menu li.hasChildren {
  height: auto !important;
}
ul#menu li.hasChildren ul {
  display: none;
  margin: 0 !important;
  padding: 0 0 0 20px !important;
}
ul#menu li.hasChildren ul li {
  background: none;
}
ul#menu li a {
  display: block;
  text-decoration: none;
  padding: 12px 10px;
  font-weight: normal;
}
ul#menu li a span {
  display: block;
}
ul#menu li a:link,
ul#menu li a:visited {
  color: #666;
  text-decoration: none;
  outline: none;
}
ul#menu li a:hover,
ul#menu li a:active {
  color: #a67b45;
  text-decoration: none;
  outline: none;
  background: rgba(0, 0, 0, 0.05);
}
ul#menu li.hasChildren a > span {
  background: url(/demo/responsive-nav/img/sprite.png);
  background-position: right -97px !important;
  background-repeat: no-repeat;
}
ul#menu li.hasChildren a:hover > span,
ul#menu li.hasChildren.hover > a span {
  background-position: right -138px !important;
}

The menu itself is a quite simple dropdown. A few noteworthy bits of the code are:

• The menu is positioned just below the bar.
• The menu takes 100% of the width of the viewport.
• Due to the fact that, in some devices, a horizontal scrollbar appears, we have used overflow-x: hidden;  and its Mobile IE counterpart.
• The list items have CSS3 Gradients that is supported by most modern mobile browsers. Otherwise, it falls back to a light shade of grey.

All is done with the mobile navigation. But a few problems remain:

• The menu requires a fixed height for the overflow scroll to work. But how do you apply a fixed height on a menu that can vary in height?
• We have styled the navigation menu, but how do we make it appear on screen?

The answer to both is: Javascript, of course.

The Javascript: Behaviour Layer that does the Magic

After the javascript behaviour is applied, here is what it should look like on mobile devices:

Interactive Button and Expanded View of the Navigation

All custom Javascript code is going into the script.js file.

We are going to reuse the jQuery plugin developed for the “Bulletproof CSS3 Dropdown Navigation Menu” as it is essential for both the desktop and mobile navigation layouts. Here is the custom plugin once again, for your convenience:

/*
* jquery.dropdown.js
* Apply sexy dropdowns on any ul with child ul.
* Depends on: jquery.hoverIntent.js
*/

$.fn.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").on('hover', function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
};

Here is what the plugin accomplishes:

• Find the list items with children, adds the class ‘hasChildren’ and also adds a span to wrap the anchor for styling purposes.
• Adds the class ‘hover’ when the list items are hovered upon.

Now that the plugin is done, let us go further into the script.

$(function() {

  // Calling the jquery dropdown
  $('nav').dropdown();

  /*
  * Applicable only to Mobile-nav
  */

  // Checking if the top-right button is visible.
  if ($("nav a.btn-navbar").is(":visible")) {

    // Making the dropdown magically appear onclick/touch.
    $('nav a.btn-navbar').on('click', function() {
      $('ul#menu').slideToggle('fast', function() {
        $('ul#menu').css({

        // The height must be fixed for the native-scrolling on iOS
        'height': $(this).height(),

        // But we don't want the height of the nav to exceed the viewport.
        'max-height': $(window).height() + 20
        });
      });

      $(this).toggleClass('active');

    }); // end on.click

    // Making the children appear on click/touch
    $('ul#menu li.hasChildren a').on('click', function() {
      $(this).parent().children('ul').slideToggle('fast', function() {

          $('ul#menu').css({

          // Resetting the height to auto in order to expand/contract the menu upon interaction.
          'height': 'auto',

          // But we don't want the height of the nav to exceed the viewport.
          'max-height': $(window).height() + 20
          });

        }); // end slideToggle
    }); // end on.click

 } // end visibility check

});

The code above accomplishes the following:

• Firstly, we are calling the jQuery function that was provided a little earlier onto the nav element.
• Checking to see if the btn-navbaris visible on screen. If it is visible, it would mean that the mobile-nav is active.³
  • Once it is established that the mobile-nav is indeed what the user is experiencing, there is a ‘click’ event on the button that toggles the unordered list.
  • Once the animation for slideToggle is complete, we are defining the height of the menu. This is because native-scrolling on iOS devices only work on objects with a fixed height.
  • Next, we are ensuring that the height of the menu does not exceed the viewport by setting a max-height.
  • Next up, there is another ‘click’ event that makes sure the list items with children can expand and contract on click/touch.
  • The height of the entire menu is reset once the user expands/contracts a list item.

With this layer of Javascript, we now have a complete navigation menu – completely optimised for the mobile viewport.

The Stylesheets: Smartphones

This is what the mobile navigation will look like in smartphones:

Responsive Navigation in a Smartphone

The smartphones with a horizontal resolution between 320 and 480 pixels will be provided with a few unique interface features such as:

header h1#branding {
  position: fixed;
  top: -15px;
  left: 10px;
  font-size: 2.5em;
  z-index: 1000;
}

header h2#tagline {
  font-size: 2em;
  line-height: 1.5em;
  margin: 40px 0 0 0;
}

section.content p {
  line-height: 2em;
}

This concludes the content of smartphone.css.

The Stylesheets: Small Tablets and the iPad

Here is what it looks like on iPad and other tablets:

Responsive Navigation Menu on iPad (in Portrait Orientation)

The stylesheets tablet.css and ipad.css covers the device in both portrait and landscape orientations as we have not stipulated any orientation in the Media Queries. As there is litte difference between tablet.css and ipad.css, I have not repeated the code:

header h1#branding {
  font-size: 4em;
  z-index: 1000;
  margin: 40px 0 0 0;
}
header h2#tagline {
  font-size: 1.7em;
  margin: 15px 0 5px 0;
}

On tablet devices, the logo is much larger and positioned below the navigation bar. The tagline is positioned below the logo. However, on smaller tablets, the line-height of the text is slightly larger in order to increase readability:

section.content p {
 line-height: 1.8em;
 }

If you have a sidebar in your design, maybe you would like to have it placed at the bottom of the content in tablet.css. On the other hand, the sidebar can be placed on the right hand side on the iPad. The structure of the stylesheets allows us to craft variations in the design.

The Stylesheets: Desktop

Our final target segment of the audience is the desktop. These are users with viewports of horizontal resolution of 1025 pixels or higher. This covers almost all modern laptops, desktops and internet-plugged televisions.

Here is what the desktop users experience:

Responsive Navigation on Desktop and Larger Devices

The navigation presented to desktop users is vastly different from the mobile experience. This is a very common suckerfish navigation menu that desktop users are very much accustomed to.

The code below is vastly similar to the “Bulletproof CSS3 Dropdown Navigation Menu” tutorial I published in January 2012.

html {
  overflow: hidden;
}
.btn-navbar {
  display: none;
}
header {
  margin: 0 auto 20px auto;
  padding: 0 5px;
}

Firstly, we take care of the horizontal scrolling problem in older versions of IE with overflow: hidden applied to the html element. Next, we make sure the top-right button does not appear on desktop screens. Also, we place the header in the center of the screen using margins.

header h1#branding {
  font-size: 4em;
  margin: 10px 0 0 0;
}
header h2#tagline {
  font-size: 1.7em;
  margin: 15px 0 5px 0;
}
section,
footer {
  margin: 20px 5px;
}

The branding is given an appropriate size and aligned appropriately. The position and size of the tagline is also adjusted. Now let us get to the tasty navigation part.

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

Keeping in mind that the nav element would inherit some styles (such as gradient and font) from atmosphere.css, we can march on with the design on the desktop. The navigation is aligned to the center of the screen. We are also applying the :before and :after pseudo-class clearing technique.

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

The font-size on the primary-level list is set in pixels because em makes the children inherit relative styles, making the whole design inconsistent. Hence, going forward with a pixel-based size suites best.

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;
  list-style: none;
}
nav ul li.hasChildren a span {
  padding: 0 20px 0 0;
  background: url(/demo/responsive-nav/img/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;
}

The list items are floated to the left and positioned as you would find in a regular suckerfish dropdown navigation. The items that have nested lists are given the class “hasChildren” by the javascript library are now being styled.

nav ul a {
  padding: 15px 20px 15px 20px;
  font-weight: normal;
  float: left;
  display: block;
  zoom: 1;
}
nav ul a:link,
nav ul a:visited {
  color: #666;
  text-decoration: none;
  background-color: #f8f8f8;
  background-image: -moz-linear-gradient(top, #ffffff, #ededed);
  background-image: -ms-linear-gradient(top, #ffffff, #ededed);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ededed));
  background-image: -webkit-linear-gradient(top, #ffffff, #ededed);
  background-image: -o-linear-gradient(top, #ffffff, #ededed);
  background-image: linear-gradient(top, #ffffff, #ededed);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
  -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;
  outline: none;
}
nav ul a:hover,
nav ul a:active {
  color: #a67b45;
  text-decoration: none;
  background-color: #f4f4f4;
  background-image: -moz-linear-gradient(top, #ededed, #ffffff);
  background-image: -ms-linear-gradient(top, #ededed, #ffffff);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ededed), to(#ffffff));
  background-image: -webkit-linear-gradient(top, #ededed, #ffffff);
  background-image: -o-linear-gradient(top, #ededed, #ffffff);
  background-image: linear-gradient(top, #ededed, #ffffff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff', GradientType=0);
  -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;
  outline: none;
}
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;
}

The anchor links are given CSS3 Gradient backgrounds. The :hover and :active states have an inverted gradient. Also, the inset Box Shadow on the :active state gives the list items some visual depth.

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

This is the “switch” that makes the nested list appear when you hover on an item. Since we are using Selectivizr in our document, we can safely apply :hover pseudo-class on the list.

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: "";
}
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.hasChildren a > span {
  background: url(/demo/responsive-nav/img/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;
}

The code presented here is the CSS for the child lists. They are positioned in relation to their parent. The floats have been taken away from the list items and they are now block elements with a fixed width of 130 pixels.

.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;
}
nav li ul li ul {
  display: none;
  left: 130px !important;
  top: -3px;
}
.rgba nav li ul li ul {
  top: -10px;
}
.rgba nav li > ul {
  margin-top: -1px;
}

We are taking advantage of Modernizr to provide enhancements to the navigation on modern browsers. Browsers with rgba support would be provided with a transparent rounded border around the dropdowns that creates a nice visual effect. Go ahead the read the “Bulletproof CSS3 Dropdown Navigation Menu” article for a complete rundown on the development of this progressively enhanced menu.

That concludes the code for desktop.css.

With that, we have concluded the development of the navigation menu using the mobile-first approach. Try out the “demonstration site” and test using mobile/tablet devices.

Get the full access to source code which is “available at Github”.

Limitations

The solution provided above is not without limitations. The first and foremost being that the entire design is non-functional without Javascript. Unlike Roger Johansson’s solution, there is no fallback to a simple list in the absence of Javascript.

I have also spotted some irregular behaviour with the dropdowns whilst browsing with the iPhone that could not be traced and debugged. On the iPhone 4, there is a tendency to freeze when there is too many nested lists.

Also, the javascript code presented here uses the ‘click’ event which is not optimal for mobile devices. The ‘click’ event is significantly slow on MobileSafari (and other mobile browsers) in comparison to mobile-friendly events found in jQuery Mobile, jQMobi and jQTouch.

There may be other limitations and pitfalls that I am not aware of. All I can say is that this demonstration is highly experimental and probably not ready for production use.

Further Reading

Web design gurus from all over the world have written articles regarding responsive web design that are worthy reads:

• Responsive Web Design by Ethan Marcotte at A List Apart.
• A Simple Responsive Mobile First Navigation from TutsPlus WebDesign.
• Fluid Grids by Ethan Marcotte.
• Responsive Navigation Patterns by Brad Frost.
• An alternative to select elements as navigation in narrow viewports by Roger Johansson.
• Chris Spooner explains How to Create A Responsive Web Design with Media Queries.
• Touch Target Sizes by Luke Wroblewski.
• Build a smart mobile navigation without hacks by Aaron Gustafson at .Net Magazine.

Useful Resources

Some of the resources used in this demonstration in addition to some really interesting web development tools and tips:

• TinyNav.js for converting navigations to a select dropdowns for small screens.
• Hardboiled CSS3 Media Queries by Andy Clarke.
• Really Useful Resources and Tools for Responsive Web Design by Stephanie Walter at onextrapixel.
• First-class examples of RWD in practice at MediaQueri.es.
• Overthrow: An Overflow Polyfill for Responsive Design from Filament Group.

Conclusion

Learning the Mobile First approach will change your entire mindset towards the web design and the development process. It allows us to focus on the content and prioritise the essential elements over superflous visuals.

Focusing on a responsive navigation is simply the stepping stone towards delivering greater user experiences, in terms of navigability, to users from a vast array of devices.

A disclaimer: At the time of writing, this website is not responsive itself. The responsive version of the site is currently in the over and may take some time to bake. In this article, I have simply shared what I learned whilst developing responsive web designs for clients.

I hope you enjoyed the tutorial and please do share your thoughts in the comment section below.

1. It is worth mentioning that the markup of the menu remains exactly the same as “Bulletproof Navigation Menu” tutorial I authored in January 2012.
2. Thanks to Johan Brook
3. I am sure there is a better method of checking whether the viewport is small enough for the mobile-nav to be active. I am open to suggestions.

The post Building a Responsive, Mobile-First Navigation Menu appeared first on Saddam Azad - User Interface Designer & Front-end Engineer..

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.

The post Bulletproof CSS3 Dropdown Navigation Menu appeared first on Saddam Azad - User Interface Designer & Front-end Engineer..

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.

The post Proofing Tools for Web Designers and Agencies appeared first on Saddam Azad - User Interface Designer & Front-end Engineer..

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.

The post 5 Tips for Creating a Fabulous Web Design Portfolio appeared first on Saddam Azad - User Interface Designer & Front-end Engineer..