619504.0450
be picky!

mobile web best practices

wait a sec? cater to dumbphones? over smartphones?
w3c guidelines for mobile web design and development

SAN DIEGO WEB STUDIO MOBILE SERVICES

MOBILE WEBSITE ADAPTATIONS

number one: usability and navigation USABILITY | 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.

related pages intro just call. relax. we'll take care of your website business related pages intro addendum
big marketing companies reduce clients to little fish in big ponds

hand coded websites by san diego web designer

 web design & development by eJuliet of san diego web design studio © 2002 - 2011 √ all rights reserved

211 walnut avenue ♣ san diego, ca 92103 ♣ tel. 619.504.0450

that's how we roll ... & clean 619.504.0450

© Copyright San Diego Web Design Studio 2003 - 2011 All Rights Reserved
home | map & street view | table of contents

∞ [sdws]
back to top of san diego web design home page