Responsive Web for Touch-Screen Devices

 

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
Each of the options listed above is best suited to specific secondary navigation needs. Landing pages are well suited to a longer list of related pages, or posts in the case of a blog.  Secondary Nav bars can work quite well where there will be a limited number of secondary links needed,  these secondary bars would ideally only be visible on pages related to a specific main menu item.Sidebar links are well suited to current related topics or pages.  There is more of a trend towards larger footer areas on web sites over the past few years as this area can afford more space to have more direct links to inner pages. There are also other options that are gaining momentum in the web world one being a clickable button that opens up an expanding menu with a nested menu system. This is especially popular on sites where mobile access is of primary concern as the menu stays open with one click until you select a link to another page. A single menu button that opens  a list of links is featured on the newest flagship wordpress theme – twentytwelve. That being the case we are sure to see more creative navigation solutions being used over the next few years as we strive to deliver content to a wider array of web ready devices.

 

This article just touches briefly on the whole topic of navigation and usability with a focus on responsive design for touch screen devices.  Responsive Web Design is more than just having a site that looks good on different screens,  it is web design that makes it easy for visitors to use your site whether on their computer, tablet, or phone.
In Category: Web Design

Scott Creamer

No comments yet. Be the first.