With upwords of 200 million currently active wireless subscribers in the United States alone, and with mobile internet’s popularity increasing and accessibility improving, it’s no surprise that your website should be optimized to be viewed on mobile devices.
Every designer, it seems, has a distinct opinion and preference between designing for desktops and laptops running a resolution of 800×600 pixels or those running 1024×768 pixels. But with this debate, the type of target audience can play a significant role in the ultimate outcome of design. Mobile devices literally come in many different shapes and sizes, and manufacturers can’t seem to stick to their own standards.
Mobile devices have a variety of uses and fill many different roles for different types of consumers. The term mobile device can describe anything ranging from the simplest cellular telephone to the most complex PDA, so the breadth of products on the market is very wide. What many websites and online companies have found, though, is that this is simply too large a market to not provide specific content for.
With the “mobile internet” still very much in its infancy, it’s difficult to ascertain what direction it might be headed in. Big search engines Yahoo, MSN, and Google have created versions of their websites specifically for mobile phones, but even those don’t look the same on every device. Most devices will at least attempt to display a site coded in HTML, XHTML, XML, or CSS, but with no standard in place for the recognition of navigational elements, they are forced to display everything vertically in correspondence to placement within the code itself. As you can imagine, this can work very well with sites that employ a strictly vertical layout, and can get very confusing with sites that have columns of navigational content.
But when taken into careful consideration, your website can enjoy a successful translation onto the small screen, you’ll just have to choose carefully which small screen you’d like to design for. Check out this comprehensive list of screen resolutions for common consumer cell phone models. Don’t want to read through it all? I don’t blame you. I’ll paraphrase it for you: the most common cell phone screen size is on the smaller size of the spectrum, and is 96×64. This is the screen size that most of the mobile-specific web content is built for, and is the size that many carriers design their downloadable content pages for. But some Blackberries and PocketPCs run 320×240, and some can even run 640×480, so you can imagine how poor a site designed for such a smaller screen would look when scaled to display on a PDA.
Color palettes are another issue to consider. While most phones will attempt to convert hexadecimal codes to their closest displayable cousin, many popular consumer phones have a reduced color palette, and of course these can vary dramatically between manufacturers and model types.
Thankfully, when developing a site for mobile devices, there are some helpful resources that will make the process a lot less like guesswork. There are several emulators available online for the various operating systems that are run on many PDAs. Mozilla is designing a browser called Minimo specifically for mobile devices, and current versions of Opera will allow you to preview the site with an emulator that will show you what your site would look like on a mobile device running Opera Mini 2.0.
When designing for mobile devices, keep in mind that while mobile bandwidth is increasing and devices are getting more and more sophisticated, it is best to be as low-res as possible. Stick to a couple of easily translatable colors and keep all images skinnier than 90 pixels. Use only valid HTML, XHTML, or XML, and lay out all content in one vertical column.
Tag:
Add to 
Jim is a designer and a staff writer for murdok. He is also the editor of the FlashNewz newsletter.
