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