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