skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Mobile Web site Guidelines

June 29th, 2007 by tamuwebmaster

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. Because of this, considerations to content delivery need to be made in light of these devices. These basic guidelines serve as a starting point in preparing mobile-friendly content and applications.

Standards

  • Validate to XHTML Basic 1.0.

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

  • Ensure that content is readable without style sheets.
  • Create a style sheet specifically for mobile devices.
  • 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 and for those that do, it will vary from device to device.  For example, if you have a rotating image on your site, also have a version with a static default image that a device can pull if they can’t support scripting. This way the user experience is still consistent.
  • Place scripts in external files.

Forms

  • Limit the use of forms, particularly text elements, when not needed. 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 . So, for example, 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. This class can then be styled so the long link actually scrolls horizontally when selected allowing people to read the entire link more easily.
  • 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 text 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

In many cases, mobile-friendly sites are very similar to sites where accessibility is a priority. Common features include meaningful ALT text, single column design, no frames, and no pop-ups.

For more information on developing with mobile devices in mind, the W3C offers a draft of their Mobile Web Best Practices.

Friday, June 29th, 2007 Mobile Web, Style Guide
Share this article

4 Comments to Mobile Web site Guidelines

  1. I have a few good resources for this:

    SXSW 2007 Mobile Web Presentation | Blue FlavordotMobi Mobile Web Guide in HTML | Blue Flavor
    Also UT has done some really cool development in this area UT Mobile Services if anyone has any interest, I know the person who developed this for UT.

  2. Matt Herzberger on June 29th, 2007
  3. For WAP devices it’s not just XHTML Basic. The WAP Forum developed the XHTML Mobile 1.0 DTD in 2001. It’s starting to see light in XML delivery applications like flight schedules, package tracking, email, directions, maps, calendars (read “what Google does”) etc.

    Like Matt wrote in his presentation/blog, there are several opportunities for the higher-ed demographic.

  4. Chris Siems on July 3rd, 2007
  5. Follow up to that, I am guest blogging this month for Edu Web conference and wrote this post Mobile Web for Higher Ed

  6. Matt Herzberger on July 3rd, 2007
  7. I would also recommend checking out handsetdetection.com which will help simplify the process when developing for mobile as well as web.

  8. Tambo on November 16th, 2008

Leave a comment

Categories

Archives