Unit04-Adaptive Navigation

What you will learn

This unit is all about flexible navigation but I want to cite some stats about responsive design in general before I get into the navigation part.

Since the release of the iPhone in 2007 and Android OS in 2008 as well and the entrance of the tablet in 2010 there has been an explosion in the number of mobile devices being used to view web sites. When a traditional site is viewed on a phone or tablet, the experience can be frustrating if the site does not adapt to the smaller screen size. This is particularly difficult when using a phone.

In a recent news story (June 30, 2011) from Nielsen.com they reported that 38% of all phones sold are now smart phones and capable of browsing the internet.

Consumers are now choosing to purchase mobile devices (phones and tablets) rather than computers (desktop and laptops). As of Feb 2011 the total sales of portable devices surpassed the total sales of computers. As this trend continues, more and more of your website visitors will be using mobile devices to view your website.

Steven Musil of cnet News reported that as of October of 2011 mobile access in the US grew to 7%. He also reported that "the number of U.S. consumers using mobile devices to access the Web grew to more than 116 million, a 19 percent increase in the past year."

In an article on the Adobe Newsletter, Mr. Henderson says that the focus is shifting away from developing native apps to developing mobile sites that provide an excellent experience for users. So what do these trends mean for you as a web designer? It means we design for Mobile, NOW!

In this unit you will learn to make two level navigation that displays for chubby human fingers on phone and tablet as well as dropdown navigation on a desktop where you have a mouse to make choices. Have you ever thought about the fact that touch screen devicves lack a :hover state and so we have to design differently for these devices.

Tutorials

In this series I walk your through a simple single page example that is completly responsive to the device being used to display it. The images scale, the columnsa djust and the header scrunched as needed.

In part 1 I show you the completed flexible site so you have a good idea where I am headed with each of these tutorials.

Watch 2740_04a_overview

In part 2 I start off with some code in place and I show you the proper way to code a two level navigation using nested lists.

Watch 2740_04b_menuLists

In part 3 I add the necessary CSS to style the page for phone delivery.

Watch 2740_04c_phoneCSS

In part 4 I add the necessary CSS to style the page for tablet delivery.

Watch 2740_04d_tabletCSS.

In part 5 I add the necessary CSS to style the page for desktop delivery.

Watch 2740_04e_desktopCSS

In part 6 I show you a different approach to handling navigation on the phone. This approach works well for many navigation links and employs the phones built in functionality for displaying lists. You still begin with a responsive template but on the phone you hide the unordered list used for on the tablet and show an object and select input commonly used in forms. Maintaining duplicate navigation would be difficult so we use jquery to copy the unordered list at runtime. To really appreciate this one you need to see it on a real phone!

Watch 2740_04f_Select

In part 7 I show another approach to handling navigation on the phone. You begin with a responsive template and style the navigation on the phone to look cool. Then you hide the navigation used on the phone and display a button that says "Show Navigation". We add jQuery to slide the navigation drawer open and closed. This approach allows you the designer to control the look of the navigation including the active link. It works well for a medium number of links.

Remember to assign the unordered list used for the navigation an id of "myNav" and assign the button an id of "showPhoneNav". These are referenced by the jQuery file I put together from various sources on the internet.

Watch 2740_04g_jQuery

Paul