mobile websites

Mobile Web Site Guidelines

Leave a comment

Mobile Web Site Guidelines

A growing number of users have portable devices like cell phones or portable digital assistants (PDAs) that they use to access information on the Web. The University has developed a Web site for mobile users at www.utexas.mobi. The guidelines below are intended to assist Web developers in preparing mobile-friendly content and applications. The W3C Mobile Web Best Practices Draft also has valuable information on developing for mobile devices.

Developers might notice that mobile-friendly sites and accessible sites have many common features including useful ALT text, single column design, no frames, no pop-ups, no Javascript, and no dynamic menus.

Standards

Images

  • Minimize the use of images. If you must use them, make them relevant and supply meaningful ALT text so that mobile devices can use the text descriptions.
  • Make images smaller than 100 pixels. Specify the image height and width in the source code.
  • Don’t use background images on your mobile pages.

CSS

  • Use external style sheets to control presentation.
  • Ensure that contents are readable without style sheets.
  • Use the link element to link to an external style sheet. Some handhelds don’t recognize @import or @media.
  • Keep the CSS simple, and remove extraneous styling information.

Client Side Scripting

  • Avoid client side scripting if possible and ensure that content is readable even if scripts are disabled. Many mobile browsers have limited scripting support.
  • Place repeated scripts in external files.

Forms

  • Limit the use of forms (particularly text elements). It is difficult for mobile users to input many characters.

Interface

  • Design your mobile site for maximum readability.
  • Use one column layouts and avoid floats. Horizontal overflow can be a problem on handhelds, so make sure wide elements fit the narrow screen.
  • Design with document order in mind.
  • Add skip anchors. ‘Skip to content’ and ‘Back to top’ anchor links are vital when using a mobile device.
  • Be consistent. Use similar alignment, color, and layout on pages.
  • Align content to the left.
  • Place non-essential links and other marginal content at the bottom of the page.
  • Set margins and padding to 0. Widths and margins are detrimental to good handheld display.
  • Take advantage of ordered lists of links and accesskeys (see example below). If you have eight links, put them in an ordered list and assign an accesskey of 1 to the first link, 2, to the second link, etc. This will enable users to navigate more easily.
  • Use a nowrap class for long links that might go over one line (see example below).This class can then be styled so the long link actually scrolls horizontally when selected allowing people to read the the entire link more easily.The example below illustrates the use of the accesskey attribute and the nowrap class to improve navigation and display in a mobile site. 
    		<ol> <li><a href="dir/" accesskey="1">Directory</a></li> <li><a href="maps/index.html" accesskey="2">Campus Maps</a></li> <li><a href="https://mail.austin.utexas.edu/oma/" accesskey="2"> Outlook Mobile Access to web.austin.utexas.edu</a></li> </ol> /** Nowrap class style definition **/ .nowrap { white-space:nowrap; }

    In the example above, users can press the number 2 to select the Campus Maps link. If they select the third item, text will scroll horizontally (like a marquee) to display the entire item.

  • Limit text size. Default sizing of text should be consistent with individual devices’ standard font sizes. Large type should not be larger than twice the size of paragraph text.
  • Use text rather than images for navigation labels and headers, but be sure to keep textual descriptions as short as possible.
  • Minimize white space on the page.
  • Limit the number of different colors used on a page.

Things to avoid

  • Frames
  • Image maps
  • Tables
  • Pop-ups
  • Dynamic effects that specifically require mouse or keyboard for navigating

Mobile User Agents

There are literally hundreds of different browsers and mobile devices. Below is a list of strings that we currently use for detecting mobile user agents.

  • AvantGo
  • Blackberry
  • Blazer
  • Handspring
  • Kyocera
  • LG
  • MMP
  • Motorola
  • NetFront
  • Nokia
  • Palm
  • RIM
  • Samsung
  • Smartphone
  • SonyEricsson
  • WAP
  • Windows CE
  • Xiino

Leave a comment