Mobile Websites

Below is information, resources, and links to help you develop a website that can be accessed by mobile devices.

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 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.

• Download the CSS for Handheld Devices

Examples

• CA.gov is optimized for web-enabled mobile devices. When the site detects a mobile device, it will automatically reformat web pages to suit mobile devices. The stylesheet is available on WebTools for use by other State departments.

Mobile-Specific Websites

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.”

Creating the page is similar to creating any other web page, however, you would use a stripped down version of the xhtml. 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; not all browsers support CSS.

• Download the mobile.ca.gov template.

Examples

• California - Provides quick access to mobile-friendly links and information found on various State government and travel websites. Users of the site can keep track of the latest news or look up information when they are on the go. The website is free of complicated graphics and lengthy text that can slow down mobile web browsers. The CA.gov plans to add more links and functionality to the site as additional mobile-friendly content become available. Download the mobile.ca.gov template.
• Delaware
• Interactive Map: Rating the States - Government Technology. See how other states have implemented mobile websites.
• Maine
• Michigan
• Rhode Island
• State and federal agency mobile websites
• Texas
• Lincoln, Nebraska
• USA.gov
• Vermont

Considerations

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, allowing an average 20/25 character per line and 5/7 lines of visible text. 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.

Technical Specifications (from W3C)

• Usable Screen Width - 120 pixels, minimum.
• Markup Language Support - XHTML Basic 1.1 [XHTML-Basic] delivered with content type application/xhtml+xml.
• Character Encoding - UTF-8 [UTF-8]
• Image Format Support – JPEG & GIF 89a
• Maximum Total Page Weight - 20 kilobytes.
• Colors - 256 Colors, minimum.
• Style Sheet Support - CSS Level 1 [CSS]. In addition, CSS Level 2 [CSS2]@media rule together with the handheld and all media types
• HTTP - HTTP/1.0 [HTTP1.0] or more recent [HTTP1.1].
• Script - No support for client side scripting.

Emulators

• Google Mobile Emulator
• .mobi Emulator

Best Practices

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. XHTML Basic and XHTML Mobile Profile are two commonly-used mobile-specific markup languages for mobile web sites. Following these 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.
  • W3C
  • mobi
• Link the phone numbers to dial automatically. For example,
  <a href="tel:+19164645994">+1 916 464-5994</a>
• 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.

Resources

• Webtools - Mobile Devices

Research

• Government Technology - Mobile Browsing: Can Your iPhone Access State Portals?, February 2009
• IBM - More than 50% of consumers surveyed would rather access the Internet from a mobile phone or other device than a PC. The number of worldwide mobile-phone users is expected to climb to 5.8 billion people by 2013, and communication, travel, navigation, news and information services are expected to increase significantly in popularity over the mobile Internet.
• Nielson Mobile - The Worldwide State of the Mobile Web, July 2008 (PDF)
• Pew Internet & American Life Project - According to key findings, the mobile device will be the primary connection tool to the internet for most people in the world 2020.
• Smashing Magazine - Mobile Web Design Trends for 2009, January 2009