Below is information, resources, and links to help you develop a website that can be accessed by mobile devices.
The state of California launched its first mobile website and iPhone app (CA.gov Locator) in 2009. At that time, the mobile site utilized a mobile stylesheet with limited information and links. Since then, the mobile website has been improved to include new dynamic, web-based apps.
The CA.gov portal is optimized for web-enabled devices. When the site detects a mobile device, it will automatically direct users to the mobile website. The site provides access to traffic information, state parks, hospitals, etc. near a user’s location. It is not necessary to download any of the applications from an app store.
- Mobile Template – Download the mobile template.
- Training Videos (YouTube) – Learn about Google Fusion Tables, the mobile template, and how to determine a user’s location.
- Past Presentations – The state’s mobile developer has provided several presentations at Webmaster User Group meetings
Designing Websites for Mobile Devices
There are two approaches to designing websites for mobile devices discussed here: handheld stylesheets and mobile-specific sites.
Handheld Style Sheets
Stylesheets can make your web pages ready for portable devices, such as a cell phone or PDA. However, most mobile devices will not display your site exactly the way you intended. Due to hardware and software limitations, most devices are designed to display certain elements of a web page. For example, the device may scale images down so the image can be displayed on the small screen. Other adjustments are made to text, links, and forms.
This is the easiest to implement, however it may not suit all of your mobile customers especially those who do not have time or bandwidth to browse your entire website and navigate through the links.
Also called mini or light mobile, these websites represent an existing site, section of a site, or just selected information. The pages display selected information in a size and format that works well for mobile devices. Information is delivered in small chunks that are easy to read on mobile devices.
The first step in creating your mobile website is to decide why someone would want to browse your site from a mobile device. For example, the most common uses might be to look up a contact number, find an address, or look up a bit of information. Think of users “on the go.”
You should keep the graphics, markup, and CSS to a minimum. Most mobile users are paying for data, so the less they have to download the better. Keep things simple.
Mobile devices have several challenges when compared to desktops and laptops. Think about your content differently when delivering it on mobile devices. For example,
- Small Screens. Mobile devices have small screens. Large images and horizontal scrolling should be avoided.
- Input. The majority of mobile devices are phones with a numeric keypad. While this is sufficient for dialing phone numbers, entering text is time consuming when compared to a computer keyboards.
- Limited and Expensive Bandwidth. Mobile devices have little bandwidth available when compared with a PC. While some providers offer flat-fees for mobile navigation, others still charge by connection time or volume.
- User Needs. Creating a mobile version of an existing website does not always make the most sense. Most of today’s mobile users are not likely to download large files or browse the web. For example, reading news, reading email, and looking up a phone number or address are the kinds of activities that users may want to perform while they are mobile.
- Device Limitations. Most mobile browsers do not support scripting or plug-ins. Mobile devices have minimal processing power, causing delays in viewing content and draining the battery.
The following are some best practices to consider when designing your mobile website.
- Limit scrolling to one direction. Minimize left/right navigation, which is difficult on a phone, and instead arrange your content in a single column layout.
- Minimize use of tables. Avoid the use of tables, and never use nested tables or tables for layout.
- Keep page sizes small. Mobile pages typically take longer to load due to slower network speeds, and mobile devices typically do not have much memory.
- Use consistent navigation. Provide a back button on every page. The standard “least number of clicks” rule used in Web design does not apply to mobile devices. Because the user has to “click” to switch between hyperlinks in a list it may actually require less keying to navigate several layers of navigation than it would to scroll through a long list of choices. Provide “up” and “down” links to skip entire sections of long documents.
- Minimize the use of images. Do not use graphics for spacing or images that cannot be displayed by mobile devices. Do not use large files unless critical information would be lost by use of a smaller format. Do not use background images or colors.
- Use valid mobile markup. Following standards will ensure that a wide array of mobile devices can parse and render your page as you intended.
- Validate your markup. Validate that your page conforms to the markup standard you have chosen using an XML validator, or online tools.
- Link the phone numbers to dial automatically.
- Keep it simple. Divide pages into usable but limited size portions. Page size should take into account the memory limitations of mobile devices. Use clear, concise, descriptive link text to help users decide whether to click a link. All file formats other than XHTML, GIF, and JPG should be noted. Many mobile devices do not support certain file formats such as, PDF, BMP, DOC, etc.
- Future-Friendly Resources
- Mobile Resources – HowTo.gov
- Mobile Web Best Practices
- Mobile Web @ W3C
- Mobile Web Vs. Native Apps (Video) – HowTo.gov
- Responsive Design – WebTools.ca.gov
- Writing Mobile Content – Useit.com
- You’ll Have Them at Swipe: Make an Awesome Mobile User Experience (webinar) – HowTo.gov