mobile web best practices

w3c guidelines for mobile web design and development

optimize mobile sites in accordance with best practice recommendations by w3c

MOBILE WEBSITE ADAPTATIONS

number one: usability and navigationUSABILITY | INTUITIVE USER INTERFACE | CONSISTENT NAVIGATION

mobile navigational menus
  •   keep url short with minimal required keystrokes
  •   situate navigation menus at top of mobile webpage
  •   top of page menus should be short enough to expose content below
  •   auxiliary navigation can be placed in footer if essential
  •   achieve balance between excessive links and required click-throughs
  •   avoid burying content that requires numerous clicks to access
  •   maintain consistent navigation patterns throughout site
  •   group categorically similar link topics together for intuitive selection
  •   avoid placing any content more than 4 clicks away from any page
  •   provide buttons that allow jumping up or down over a section of content
  •   clearly denote the destination target of each link
  •   avoid programming links to open in new windows or tabs
  •   clearly identify and notate links that open documents or files of a different type, i.e. pdf, doc, ppt, wav, mpeg4
  •   warn users if following a specific link results in very large file types or downloads
  •   warn users if following a specific link will render content in a different language
  •   default file types for mobile are xhtml, jpg and gif formats, all others should be identified in link text
  •   provide proper link descriptions and avoid use of noninformative "click here" text
  •   use of image maps for navigation should be limited to devices that support them
  •   minimize inclusion of external links as they are resource heavy and will slow performance
  •   minimize use of images and break large graphics into smaller parts that join together

number two: content delivery and presentationCONTENT DELIVERY & PRESENTATION

format and legibility
  •   use clear and concise headings and link text
  •   format content and headings for ease of scanning type perusal
  •   cover only one idea per paragraph
  •   top-load each paragraph with the main descriptive word[s] at the beginning
  •   apply content presentation for readers to easily "skim" rather than read word for word
  •   deliver content using the most simple word for its meaning, i.e, rather than "eat" instead of "consume"

number 3: logically categorically organizedMOBILE DESIGN TIPS

limitations and device specs
  •   keep in mind your end user is not equipped with a mouse
  •   visitor may be browsing with limited or slow bandwidth
  •   mobile processors are less powerful than pc counterparts
  •   mobile users are often data size sensitive to carrier imposed quotas
  •   mobile users may have limited memory supply
  •   screen sizes are much smaller than desktops and laptops
note

Please Note: These lists are by no means comprehensive and are a work in progress.