Mobile Web Site Guidelines

A growing number of users have mobile devices that they use to access information on the Web. The University has developed a Web site for mobile users at m.utexas.edu. To be included in the mobile site email the Web Team. The guidelines below are intended to assist Web developers in preparing mobile-friendly content and applications.

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.

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.
  • If you put the mobile stylesheet after the screen stylesheet in your code, then use "display: none" for whatever you don't want going to a mobile device.

Forms

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

Things to avoid

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