Mobile Websites

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 

Explore www.mobileawesomeness.com for ideas on what appeals to mobile users.

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. 

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.      

Design Your Website with Purpose

What constitutes GREATNESS in website design?

Your answer to this question will say more about what you do, what you value, and what you believe than the reality of how well the website in question will perform. For example, the Webby awards focus on innovative websites with jaw-dropping graphics and effects...a graphic designer's view of greatness.

Other websites are the equivalent of a Swiss army knife - less beautiful perhaps, but built on a solid CMS framework with lots of function, boat-loads of content, potential for expansion, and the security of Fort Knox...this is a web developer's view of greatness.

So what about the view of the person visiting your website? Who is that person and what was he hoping to find when he landed on this particular landing page? Most likely, the visitor's purpose was quite specific. While he may appreciate the attributes of great design and development, your visitor's view of greatness is probably to obtain what is sought with minimum time and hassle.

As Entrepreneurs, Executives and Product Managers, our top concern is to insure the website serves a primary purpose for our businesses. Whether that purpose is to inform, engage, retain, support or drive revenue, we must get crystal clear about the purpose of the website and what it takes to move our visitor to a desired action...what interactive marketers call "conversion". Without conversion, our websites become a liability rather than an asset. To achieve greatness, we must design our websites with a clear purpose, then track conversion and use the information to hone the website on an ongoing basis.

We measure conversion though use of web analytics and tracking offline follow-through. For example, measure clicks to contact a sales person and then record how many of these resulted in a sale. Web analytics tools like Google Analytics lets us simultaneously test how multiple pages perform. You'd be surprised how small changes like rearranging elements on a page, shortening text or using color can radically alter conversion results. Experts who have tested thousands of pages warn us that the most beautiful, innovative and feature-rich websites may not be the best performers in generating high conversion rates. Think about it...when you last went online to buy something, were you interested in sitting through a flash intro about the company or were you focused on finding and item and making a quick purchase?

For more information on this topic, I suggest:

• Don't Make Me Think by Steve Krug 
• Call to Action by Bryan and Jeffrey Eisenberg 
• Landing Page Optimization by Tim Ash 
• Jakob Nielsen's Web Usability Website (sign up for his bimonthly newsletter)

In summary, my top ten tips for great websites:

1. Be crystal clear about the purpose of the website 
2. Identify the intended audience and motivations for visiting the site; turn these into stories
3. Map the stories most common to your business into a sequence of pages (the beginnings of a wireframe) 
4. Provide relevant information in a glance: phrases replace sentences; all "above the fold" 
5. Provide a clear path from landing pages to the Visitor's goal 
6. Remove all obstacles in the path to conversion (long forms, distractions, poor navigation, distrust,...) 
7. Give the Visitor a reason to trust you (trust symbols, familiar brands, guarantees, testimonials, samples and case studies) 
8. Utilize web analytics to test alternate page designs, analyze traffic and click-paths
9. Utilize social media and other channels to learn how to better engage (don't just use these to hype your products) 
10. Analyze keywords and search engine traffic to provide relevant landing pages for your intended audience 

Remember, for most of us, traffic does not equal revenue...don't throw resources away driving traffic to a website that is not converting!