I spend a fair amount of time on the W3C (World Wide Web Consortium) website keeping up with the latest web standards, specifications, guidelines, software, and tools so that our web development meets those criteria. Unfortunately, a lot of what is on W3C is adopted fairly slowly with browsers such as Internet Explorer.
Within the last couple of years we’ve been seeing a surge in mobile web browsing also called a microbrowser, minibrowser or wireless internet browser (WIB).
As of 2006 some mobile browsers can handle latest technologies like CSS 2.1, JavaScript and Ajax. Websites designed for access from these browsers are referred to as wireless portals.
Wikipedia has a great chart showing the default web browsers used on the majority of handheld devices.
Below are the 4 main areas of concern when developing your site for mobile devices and how to address them:
(List compiled from W3C)
NAVIGATION – Using the same navigation mechanisms across a service helps users orient themselves and allows them to identify navigation mechanisms more easily.
Users of devices that do not have pointing devices have to scroll between hyperlinks using the keypad. Intelligent grouping, perhaps optimized through adaptation according to usage patterns, can assist usability.
A “drill-down” method, based on major headings, can often provide an effective means of navigation; because of the linear arrangement of content, small screen size and lack of pointing device, it is often useful to provide a means to jump entire sections of content.
At each target of the drill-down navigation an “up” link should be provided to allow the user to jump up an entire section.BALANCE – Take into account the trade-off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.
The design should aim to provide a balance between having a large number of navigation links on a page and the need to navigate multiple links to reach content.
Scrolling a page when there are many links on it can be very cumbersome, as the scrolling action on many mobile devices selects each link in turn. On the other hand, each retrieval of a navigation page takes time and adds cost, so the number of links on a page should not be minimized at the expense of adding page retrievals.
Design the service so that frequently accessed information is easily reached with a minimum number of page retrievals. Navigation to less frequently accessed information may take more retrievals as a result. A guideline is that users become frustrated if it takes more than four retrievals to reach their objective. Whether this can be achieved depends on the nature of the site and, in particular, how items in menus group together to provide understandable themes.
NAVBAR – Provide only minimal navigation at the top of the page.
Provide basic navigation, which should be placed on the top of the page. Any other secondary navigational element may be placed at the bottom of the page if really needed. It is important the users should be able to see page content once the page has loaded without
Provide the basic links on a single line.
CENTRAL MEANING – Ensure that material that is central to the meaning of the page precedes material that is not.
Many Web pages are designed with significant navigational and other elements at the top of or to the side of the page (e.g. Menu Bars, Breadcrumb Trails and Search Functions). This provides a convenient and well-understood navigational metaphor on large displays. However, on small displays this can result in the navigation appearing instead of the actual content of the page when the page is first retrieved.
Because it is important for the user to gain an idea of the content of the page on initial view, there should be a minimum amount of clutter preceding this – including navigation, decorative images, advertising and other material that is not central to the user’s experience of the page. The user should not have to scroll significantly to find the primary content of the page.
Menu selections can be placed away from the top of the page with a simple link to the selection at the top of the page. Alternatively, use meta navigation on top of the page with simple text links to major sections of the Web site.
Leave a comment