|This chart, provided by Device Magazine, shows the increasing mobile device web browser usage.|
Below is my list of mobile web design do's and don'ts:
1. Screen ResolutionScreen resolution is important when making your website mobile device compatible. Uxbooth.com created this easy to read chart for the various mobile screen dimensions. You will probably need more than one mobile stylesheet for the website.
|Mobile device screen resolutions provided by Uxbooth.com.|
2. Keep It SimpleYou are more limited with space on mobile devices. Don't clutter up the screen with too many links or graphics. Make sure the interface is not confusing to the user. The simpler the better. If you don't have many links (or you want the photographs to be in the spotlight), you can focus on images. Subaru has a very nice example of this:
|Subaru's mobile website.|
3. OptionsSome users may want to view the full site on their phone. Maybe they can't find what they are looking for or they don't like the layout of the mobile site. Giving them the option to view the full site really helps usability. If the user has a tablet, it may be easier for them to navigate around the full site they're used to instead of using the mobile site. This link is usually towards the bottom of the website design.
4. Navigation & LinksOnly include the necessary links and keep buttons simple. If you have a lot of navigation links, narrow it down or lay it out in a different format. For example, Walmart & Amazon have a lot of navigation and sub navigation on their full website. They simplified it as much as possible so the user would not get lost.
|Walmart.com's mobile website.|
|Amazon's mobile website.|
5. User Text EntryKeep user text entry to a minimum. Make use of checkboxes and drop down menus when possible. The shorter the URL, the better. Remember, these users most likely do not have access to a traditional keyboard and mouse. Some tablet users attach keyboards, however, this is a very small percentage of users.
6. Pop-UpsThis is a definite no-no. On mobile devices, a user can get lost very easily if there are pop up windows and some will not work properly.
TBH Creative Client ExamplesTBH Creative recommends to develop a mobile version of your website and can help you through the options and process. We recently completed a mobile design project for Wheaton World Wide Moving (under contract by Williams Randall Marketing). The mobile site design has easy to use navigation, minimized text, more spacing between links and buttons for fingers to easily click, and a simple, sleek design. If the full website was viewed on a mobile device, the user could easily get confused. See the difference:
|Wheaton's homepage. View the site.|
|The mobile version of Wheaton Worldwide is coming soon.|