Blog entries about web design & development, our clients, our projects, our company, and more

Mobile Phone Web Design and Development Considerations

Posted February 04, 2008 @ 7:53 AM, by Marc, in Mobile Development — 0

In early 2007 I began to research web design and development tailored for mobile devices. While I’m far from a pro on the subject, I feel that I’ve gathered enough generally-accepted information to form a list of best practices one must consider when targeting mobile device users.

At the time of writing this article, Apple’s iPhone makes nearly all of this information useless, and if other phone manufacturers follow in Apple’s footsteps, I’ll be editing this list quite a bit or taking it offline altogether; time will tell.

When designing and developing for mobile phones, do not…

• serve JavaScript or Flash, because most mobile browsers don’t support them
• require lengthy input, because typing on a phone isn’t fun. Opt for clickable form inputs when possible
• serve invalid markup, because mobile phone browsers aren’t that good at interpreting bad code
• serve images unless they’re part of the content. Considering that most mobile phone service providers charge based on the amount of data downloaded, and that a majority of images are typically for decoration only, there is no need to send them to a visitor who is using a mobile phone
• create a directory structure that uses long file names and/or unnecessarily deep-rooted directories. The more you make mobile phone users click around, the more they download… and the more they pay for all of that bandwidth
• create text links that say things like “click here”, or “more”. Every text link should explain what the visitor will experience before they click on it, effectively reducing the chance that they will follow a link they didn’t mean to follow
• use an image map, ever … EVER
• utilize any form of popups, automatic or not. Most mobile browsers behave unexpectedly when a popup link is opened, even if the user willingly opens it
• use any form of auto-refresh since it causes more data to download to the visitor’s mobile phone
• use any form of client-side redirection. Server-side redirection is fine, but client-side redirection causes more data to download
• use fixed-width or position-based styles, because you want to avoid forcing the mobile visitor to scroll sideways as often as possible. One exception would be a content-based image that is wider than the mobile phone’s screen
• put irrelevant information above relevant information. Making a mobile visitor scroll past information they don’t need to find what they’re looking for is simply bad practice
• use colors that do not contrast well with each other. The color reproduction abilities of a mobile phone aren’t impressive and colors that are similar might not be seen as colors that are different
• use inline styles, because it’s simply more data for the mobile phone to download
• rely on cookies actually working, because not all mobile browsers use them

When designing and developing for mobile phones, do…

• remember that most visitors who are using mobile phones have different interests than visitors who are using desktops. They often have more immediate and goal-directed intentions as well, which are to find out specific pieces of information that are relevant to their context and nothing more
• utilize some sort of Skip to main content link above all content. This will allow the mobile visitor to skip the often lengthy navigation content they do not need to see every time
• have a link beneath the main content area that says something like “Back to navigation” or “Back to top”. This will assist the mobile visitor by not forcing them to scroll on a device where scrolling is already a challenge
• attempt to use access keys in order to increase the visitor’s ability to select a link. Learn more about access keys
• use as few text-based inputs as necessary. Reducing how much typing a mobile phone user has to do will ensure a better experience for them

Other considerations to remember…

• Not all mobile phone browsers respect the media attribute’s handheld value. This simply means that those mobile phone browsers will pose as desktop-based browsers, and if you’ve defined a special handheld stylesheet, it won’t be used
• Remember that most visitors using mobile phones pay for their service by the amount of data they download, not the amount of time spent surfing the internet. When possible, the designer and developer should keep in mind the amount of data they’re forcing the visitor to download. Be it content-worthy images, extraneous code, etc.—it should be avoided if it isn’t necessary

---

---

---

• Previous: Reduce Browser Discrepancies With an Initial Template
• Next: Website Front-end Quality Control Considerations