Responsive Design – much more than just resizable web pages
When the topic of responsive design is discussed much of the focus is on layout. Specifically, how to make best use of available screen view port areas, with the end goal of delivering content in a way that allows for the best user experience possible.
It is very advantageous to have a web site that is easy to digest whether viewing it on a large desktop computer, tablet, or a smart phone. That being the case it is understandable that much of a designers efforts will be put into decisions of what content to put in what order as well as having images, headers, footers, menus, and video players that will properly resize when the site is viewed at different resolutions.
While having a web site that does not require excessive zooming and scrolling when viewed from smaller screens goes a long way to providing a more satisfying web experience, touch-screen devices offer additional challenges to web designers that go beyond the smaller screen size.
Responsive Web Design – Navigation from a Touch Screen Device
Many web sites are designed with drop down navigation. It makes perfect sense from a space and design perspective, as more areas of the web site can be linked-to right on the main navigation bar while minimizing the use of the important ‘above-the-fold’ area of the web page. The problem is that most of the drop down style navigation menus make use of the hover state of a pointing device such as a mouse. Currently touch screen devices have little to no support for the hover state and therein lies the problem.
If you have ever tried to navigate on a web site that relies on hover based drop down menu links from your touch screen smart phone or tablet, you know the frustration of trying to click on a disappearing link in that split second that the menu is open. Unless you are perfect in your timing there will be pages that you will never be able to access if the main drop down menu is the only way to get to those pages. This is bad news for the site owner as few users will have the patience to persist after a few missed tries. With the number of smart phone and tablet users on the increase with no apparent end in sight, it would be unwise to exclude your touch-screen web site visitors.
Responsive Design – moving away from hover based drop down menus
Over the past year I have begun to move away from using hover based navigation. Now for clarification I am not talking about hover based design styles such as having the menu buttons change background color, or font-weight. These hover based effects are strictly visual and not essential to navigating the web site. What I am referring to as mentioned above is not relying upon a hover state of the users mouse to open a series of links which in turn give access to a secondary menu list of pages.
Responsive Design – Navigation Options
With the move away from hover based drop-down menus there is a need to explore other options for navigating within web sites. The best navigation solution depends a lot on the type of content that is needing to be served on the site, as well as the size and purpose of the site.
Here is a short list of possible secondary navigation options:
- Landing Page – for category of links or type of pages
- Secondary Nav Bar – right below main navigation
- Footer link lists
- Sidebar link lists
