Design Considerations For Mobile Sites

Nielsen released a report last week detailing the consumer market share of smartphone manufacturers in the US. Android, iOS, and Blackberry lead the pack with 29%, 27% and 27% share respectively. The remaining share was split between Windows Phone 7, Symbian, and HP/Palm WebOS devices.

What’s clear about these results is that the fight between the phone manufacturers is tough, and consumers are the winners with a wealth of devices to choose from. And they are choosing, with an estimated 40 million smartphone users in February of 2010, and an expected 80 million users sometime this year.

While majority of the excitement in the mobile marketplace generally surrounds native apps, mobile sites are a cost-effective standard for any brand hoping to reach potential consumers. Here are a few design and development considerations to take when stating a mobile site project.

First, a definition..

Mobile sites are where design is optimized for mobile platforms, ranging from small screen sizes of feature phones and smartphone, to tablet displays for the iPad and upcoming android devices from Motorola, HTC, and more. These sites sometimes operate on a separate sub-domain of the main website (mobile.example.com), presenting the same, or similar information. Some browser detection technology is used to automatically redirect readers to the mobile site.

An alternative to developing a separate mobile site is to develop an adaptive, responsive web design. Responsive web design is the practice of designing a site to be reactive and reconfigure its layout and content presentation automatically based on the screen size it is being viewed on. Using a combination of Javascript and CSS3 media queries, this technique resizes text and images dynamically, showing and hiding content for easy viewing, consistent layout and legibility. This practice allows the same site (example.com) to be developed once, rather than creating a separate mobile site at a separate sub-domain.

Avoid pinch and zoom

On most smartphone screens (for example, my 3.5 inch iPhone 4 screen), full-sized website designs are zoomed out to the point where content and text are illegible and the site is difficult to navigate. While a 1280 pixel widescreen site design looks great on a laptop or desktop, on an e-mobile device one must continually pinch, zoom and swipe the display to read text comfortably.

georgia-aquarium1 georgia-aquarium2

[Above: the Georgia Aquarium mobile site vs the Georgia Aquarium main site, both viewed on and iPhone 4. Also notice the lack of flash support.]

If you happen to be on a feature phone without a pinch and zoom capability, the website view is even more difficult to navigate. In most cases, it’s a usability hindrance, and it’s just not done in modern design. Also, the more difficult it is to view a site on mobile devices, the less likely a user will spend time viewing content.

Optimized Site Design

While the proliferation of 3G coverage (and the advent and adoption of 4G/Long Term Evolution technology) means that the bandwidth available for mobile devices is increasing, site designs should not assume that coverage or data allowances is the same for all viewers. Projects should strive for sites that load quickly and efficiently, and not tax viewers monthly data allotments.

Site designs should also be optimized to make text prominent and easy to read. Image file sizes and dimensions must be reduced and managed for mobile screens and bandwidth constraints. Media-queries, proper viewport setting, and device or screen-size specific stylesheets need to be utilized, alongside efficient information presentation.


[Above & Center: the Georgetown Neighborhood mobile site displays the likely answers to site visitors questions immediately  when yo visit the site: How to get there, and what is there to do (shopping, dining, etc.). Right: The main site is appropriate for less intensive search and information discovery.]

Android browsers and Mobile Safari are more up-to-date with respect to new web standard HTML5 display features like multiple backgrounds, curved borders, gradients, drop-shadows, masking, transforms and transitions. These allow graphic elements like backgrounds and buttons to be generated by a few lines of code that are quick to download, opposed to individual images for buttons, banners, and background.

Touch Friendly Layouts

Mobile screen navigation does not have the same fidelity as desktop or laptop interfaces have. Instead of precise point and click capability with a mouse pointer, you have to target links with your fingertips.



[Above :  The Dremel microsite renders links as spaced app-like buttons as opposed to text links.]

Main navigation links and social media links should be designed and sized to accommodate fingertip sizing, or even actually designed as app-like buttons. Here’s a quick consideration: can your site be navigated using the same hand that is holding the device?

Have you developed a mobile site for a client?

How did you choose to optimize content and design elements?

What design choices did you make to make the site social and shareable?