Mobile device web design

Designing for mobile devices

As more Internet users go mobile, web designers have to start designing for a new standard of web devices. Luckily if your site has been designed with accessibility in mind it already might accessible to both screen readers as well as mobile devices.

The use of valid XHTML and CSS design will mean that when user have photos turned of and are just browsing text, the text will be logically presented and easy to read on a tiny screen

Here are some points to consider:

1. Screen size

   Mobile devices vary in screen size from very small to 640X480 such as a PSP. PDAs and cell phone screens are smaller than desktops and they also render the pages differently. A sampling of resolutions:

   PalmOS (Zire and Tungsten)
   160×160
   320×320
   320×480

   Blackberry 7100x series
   240×260

   Blackberry 7780
   240×240

   Dell Axim x30 and x50 Pocket PCs
   320×240

   Dell Axim x50v
   640×480

   HP iPaq
   240×320

   Smartphones (Motorola, Samsung, and i-mate)
   220×176

   So instead of just designing for 800X600 you may have to take into account over 10 screen sizes.

2. Design with CSS, XML, XHTML

   Most devices have the fewest issues viewing Web sites coded with XML/XHTML, the most common HTML standard. It’s not necessary to build a separate site when developing with CSS and XHTML. However, some large sites like Yahoo! and Google have separate sites for mobile users.

   Depending on your audience and Web site’s purpose, creating a separate Web page for mobile devices might be worth considering. If you don’t have the resources or design for a small business, CSS and HTML works fine.

3. Focus on the most important pages of a Web site

   Generally, mobile users view only a couple of pages per site, just enough to get the information they need and move on. It’s time consuming and tedious to surf with a small screen, so make sure your site is logically ordered with your main text near the top of the page.

4. Text entry is difficult

   Not all mobile devices come with a QWERTY or any kind of keyboard. Many cell phones rely on T9 Predictive Text Input for text entry. Though it speeds text entry, it’s still tiresome to repeatedly press buttons when entering more than a few words. Give the user choices that allow moving and selecting using the cell phone’s buttons much like the Web pages of the Internet’s early days when everything was text-based. Users just used the arrow buttons to move to an underlined link and then press “Enter” to go to that content.

5. Test with an emulator

   A few sites offer an on-line emulator or one for downloading. An emulator allows you to view a Web site just like it would appear on a cell phone or whatever device the emulator covers. Available emulators:

   • PalmOS

   • Windows Mobile 2003

   • PocketPC from Microsoft

   • Smartphone

   • PocketPC from YoSpace

   • PocketIE Emulator

Check out Mozilla.org ’s current project Minimo Project (Mini Mozilla), a browser for small devices and machines with limited resources. Opera’s browser comes with the ability to render its browser for small screen and handheld style sheet testing. It also has a section on how to design and write for small devices. Microsoft provides an SDKs (software development kit) for Windows Mobile as well as articles and emulators. Check out the style guides:

• AvantGo

• Microsoft

• Opera

• Palm Web Clipping Developer’s Guide

Statistics show a growing market for mobile devices, which leads to more interest in Web sites specially designed for such devices, or at least, use CSS and XHTML or XML. These tips and resources will help designers maximize the small screen surfing experience.

Image Size

Because of the high cost of bandwidth most mobile users will browse with images turned off. If they leave images on the slow connection speed of gprs means any images you include should be fully optimised and cropped to a size that will display on a screen with very limited real estate.