This is an excerpt from the "Going Mobile: Harnessing mobile web, applications and SMS" presentation to ProductCamp.
The best mobile websites:
- Compliment rather than mirror the traditional website
- Are designed around a specific business goal
- Leverage the mobile capability to connect in-the-moment
- Provide a service or function that makes a person want to permanently bookmark your mobile landing page
The image of a mobile site next to a traditional site illustrates how a traditional website is designed to display more and richer content while the mobile site should be simple and clean.
Use mobile websites to provide:
- Business hours, location and phone number
- Landing pages for QR codes
- Simple reservation or order form for restaurant or take-out
- Complementary products and accessories that can be ordered online
- In-the-moment access to information and services
Mobile browsers and devices differ in their capabilities to handle images and the code which creates movement on the site (like javascript and HTML5). Pages can appear very different on different device platforms as shown in this example of the same mobile website viewed on an iPhone4, HTC Evo 4G (Android) and Blackberry Curve.
The pixel dimensions for mobile screens are different. What is viewable on one platform may be awkwardly "below the fold" or off the right side on another. Android compresses vertical whitespace. A font that looks great on Android may be off-center or unreadable on the Safari browser used on iPhone. Blackberry has multiple levels of controls that limit image filesizes - images may be rendered as labels (shown) or not at all.
The pixel dimensions for mobile screens are different. What is viewable on one platform may be awkwardly "below the fold" or off the right side on another. Android compresses vertical whitespace. A font that looks great on Android may be off-center or unreadable on the Safari browser used on iPhone. Blackberry has multiple levels of controls that limit image filesizes - images may be rendered as labels (shown) or not at all.
My advice? Keep things simple, optimize for the platform of choice, and test across all platforms that generate significant traffic to your website. Use Google Analytics to identify the mobile devices used to access your traditional website to determine which devices to optimize and support.
Addendum written on March 31, 2013: In the two years since presenting this topic in 2011, middleware such as Webkit and Responsive Design techniques have emerged to improve the situation for developing cross platform sites. The philosophy of Responsive Design is to display a minimalist site that can be accessed by all devices and then to test capabilities of the device to handle an upgraded display. This technique removes the need to identify devices or reroute to separate mobile websites, but we are still seeing strong differences in how sites appear across the different device and browser combinations. We are also noticing that the emulators are not always accurate. The advice I gave two years ago about keeping things simple and testing on the devices you want to optimize still holds true.
No comments:
Post a Comment