Supporting Mobile Devices
Use of mobile devices to view Web pages is going exponentially (we do not mean iPhones). Ensuring your Web site is setup for optimal Web viewing we recommend creating HTML files which do no rely on tables to position elements on the page. Without tables a designated mobile style sheet can position page elements to be read on a small screen.
HTML Structure
To review how the HTML elements should be structured please see the HTML Standards section.
Including the Mobile Style Sheet
To include a style sheet specifically to be rendered on a mobile device we recommend placing it after your main style sheet and using it to override the main large screen viewable styles to reduce file size and redundancy.
<link href="css/main.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/mobile.css" rel="stylesheet" type="text/css" media="handheld" /> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"/>
Basics for displaying elements on a small screen
- Linearize all sections of the page
- Remove all background images
- Use percentage widths (100% on most elements)
- Highlight headers
- Remove any unnecessary information
- Show "Skip To" links at top of page