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.
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.
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?