Internet Performance Delivered right to your inbox

Mobile Website Design & Development

We recently unveiled DynStatus, the new home for Dyn related status reports and updates. We realize that a lot of our customers relying on our service are constantly on the go and don’t always have the luxury to be able to check our system statuses from a desktop computer. We thought we’d make life a little easier for them and create a mobile version of the site.

Mobile Devices: The Wave of the Present

In 2006, PC World reported that there will be at least four billion mobile subscribers on the planet by 2010. To put it bluntly, that’s a lot of people! It should come as no surprise that designing for mobile devices has become increasingly popular. However, there is still a lot of ambiguity as to how to design and develop for them. My hope is that this article will help clear up some of the questions faced when designing for mobile devices.

Creating a website for a mobile device is very different than creating a website for a traditional desktop computer. Some of the differences are obvious such as screen size and download speeds. Then there are the not-so-obvious such as coding methods and implementation. Unfortunately, there is no best way to design a mobile website. There are good practices to follow, but because of the lack of standards supported by all of the different devices there is no one simple solution.

General Guidelines

Just like designing your first website for a normal size monitor, designing your first mobile website can be an intimidating task. Just as much planning needs to go into it, if not more. Having gone through the experience, here are some simple guidelines I can recommend.

Keep it Flexible

Screen sizes vary from device to device, especially on devices like iPhones where you can view it vertically or horizontally. I recommend designing with a fluid layout. Avoid specifying font sizes using ems, pixels, or percents. Instead use CSS values such as medium or small. Using a completely fluid layout will ensure maximum compatibility between devices.

Do Not Use Unnecessary Images

This ties in a little bit with using flexible layouts. Keep images to a bare minimum. In fact, I’d recommend not using them at all if you can avoid it for several reasons:

  1. It will greatly reduce complex layouts and designs
  2. It will decrease the number of HTTP requests and save your users on bandwidth, which matters much more on a mobile device then it does on a desktop computer
  3. If you use an image, make sure you have the alt attribute specified

Also, I’d stay away from using the background-image property. It’s supported by the XHTML Mobile Profile 1.0 Doctype, but some phones will not support it.

Access Keys

Screenshot of status.dyn-inc.com/mobileI find touch screen devices to be hypersensitive and not always accurate when touching the screen with your finger or stylus. On most mobile devices, using the accesskey attribute on links will allow you to access the link just by pressing the number or letter on the keypad. When doing this, it might help if you try to make it obvious to the user that they can use access keys. If you look at the image on the right, you see that I singled out the “H” in Home so that users can figure out that pressing “H” will take them back to the Home Page.

Testing

You might think I’d say test your mobile site on as many devices as possible, but I’m not going to. There are just so many devices available and its unfeasible to test them all out. Aside from that, who has the money to go out and purchase a number of devices? I recommend testing in the typical browsers such as Firefox, Internet Explorer and Safari. You’ll also want to test your site on two or three mobile devices as well as on the Lynx web browser which is a text-only browser. If your site looks good on Lynx, then it should degrade nicely on just about any mobile device.

Learn More

Despite the complications of designing for mobile devices, there are some great resources available. A great book that I cannot recommend enough is Mobile Web Design by Cameron Moll. It deals with just about everything, including development methods, testing and validating, and using advance features such as Flash, RSS and AJAX. There are also some great references made available by the W3C, such as Mobile Web Best Practices 1.0 and CSS Mobile Profile 2.0.

KISS (Keep it Simple Silly)

If there was only one thing I would want you to take away from this article, it would be keep mobile websites as simple as possible. If someone is looking at a website on their mobile device, chances are they want the content fast and easy to read. The user doesn’t want to have to wait for long downloads, deal with unnecessary images, and mentally process complex layouts. If you can remember this, then all of the other technical challenges, such as coding methods and implementation will become less crucial.

Article authored by Dan Marino


Share Now