By now, everyone pretty much understands the importance of providing a second, mobile-specific (or at least mobile-friendly) website to their viewers. After all, there are already more than 83 million mobile web users out there, and mobile web browsing is paced to exceed desktop web browsing by 2014.
There are many new factors to consider when designing for the growing mobile market: smaller screen sizes; slower connection speeds; unique and specific browsing intentions (e.g. quick access to phone number, directions, hours, prices, etc.); and emerging mobile-specific technologies like location awareness, one-click dialing (webpage phone numbers become links) and camera integration.
Let’s take a look at one area of the most obvious differences: screen size.
When addressing the screen size issue, there are actually several sub factors to consider: physical screen size, resolution (visible pixels) and orientation. While designing a mobile website layout on a high-def 26” widescreen in the office, it’s easy to forget that mobile viewers may be staring at a tiny 2” by 3” screen in bright sunlight and while driving with one hand (what!?). Oh, and they don’t have the precise control of a mouse pointer; they have a thumb.
At BrownBoots, we subscribe to the Rule of Thumb: Every mobile website (or app) should be easily navigable by use of one, big, fat, clumsy thumb.
Here are a few design suggestions by which we abide:
- Most links should occupy an area no smaller than 50 pixels by 50 pixels (about the area of a light thumbprint).If the website requires only a few pages, consider tabbed navigation (like folder tabs in a filing cabinet).If the site or page requires more than a few related links, consider giving each the entire page width. One layout we like is a rectangular link with a small 50×50 icon floated left, the link title on the first line, and a 4-5 word description beneath the title. Add borders to the top and/or bottom to offset the links, and space them about 4 pixels apart. The entire area is a link. Avoid short text links. For one, they’re usually shorter than 50 pixels. And, they often seem to lie close to other links and make it difficult to select the correct link.
- Place large groups of links in dropdown lists. Many mobile devices open dropdown lists in a large device-specific interface that makes selection much easier. This is a great way to free up screen space, too; after all, viewers want to see content, not navigation. Dropdown lists are especially practical if the links are obvious enough not to require additional description text.
- Make links obvious. There’s no “hover” feature on touchscreen devices. If you must use inline links (e.g. a word in the middle of a paragraph), use a contrasting color and underline them. Bolding may help, too.
Experience these design practices for yourself on BrownBoots’ mobile website: http://m.brownboots.com. Learn more about mobile website development with BrownBoots’ AC University PowerPoint presentation titled Mobilize Your Website: http://www.brownboots.com/sft690/acumobilewebforweb.pptx.
If you’d like to know more about mobile website development, e-mail Scott at firstname.lastname@example.org or call BrownBoots Interactive at 920.906.9175.