How to Design and Build a Mobile Website
These days, it doesn't just seem like everyone has an iPhone, BlackBerry, or Android phone. Fifty million people in the United States actually do, according to comScore statistics.
"Mobile devices are completely changing the way we interact with information," says Brian Fling, president of pinch/zoom, a mobile and Web application development agency based in Seattle. Fling is also author of Mobile Design and Development. 'All of our past assumptions about how the user interacts with information are being challenged. The trick is for small businesses to leverage the new opportunities of a mobile browsing experience."
Unfortunately, even though many smartphones can view it, your old desktop-ready website won't exactly meet the challenge. A mobile-friendly website is often very much separate from a company's primary online presence. That doesn't mean it's unnecessary. 'The main issue is that consumers today are expecting more out of their mobile experience,' says Jennifer Peper, vice president of Aristotle Interactive, a Web design firm based in Little Rock, Arkansas.
Follow this guide to creating a user-friendly, memorable mobile online experience for your customers.
Making Your Website Mobile-Friendly: Determine Your Need
The good news is that developing a mobile website — at least a basic one — isn't as time-consuming or expensive as one might think. A number of online services exist that will quickly create a mobile-friendly version of your existing Web site, and many of them are free. Google Mobile Optimizer is probably the quickest fix, but also the most basic and least customizable. Other solid options are Mippin, MoFuse, Mobify, and WireNode. These services also offer premium paid products that allow for a greater degree of customization.
Others prefer a more hands-on, DIY approach. But unless you are fluent in HTML, you'll probably be in the market for an experienced mobile Web designer. 'At this point we are crossing the threshold where more and more mobile devices can experience rich websites,' says Brian Suda, a software developer with the firm Clara, based in Reykjavik, Iceland. 'It makes sense to spend the time and do it right. A Web designer knows a lot more the ins and outs of mobile.' Whether you use an online service, hire a designer, or (bravely) set out on your own, it's essential to be armed with knowledge of the best practices to follow. That way, you'll know exactly what you want, and you won't waste any time or money.
Dig Deeper: How to Hire a Web Designer.
Making Your Website Mobile-Friendly: Optimize Content for a Mobile Context
The first, and most obvious, challenge is translating the content you have designed for a desktop experience into the much smaller screen size and typically slower performance of a mobile device. (Sure, an iPhone user can view most normal desktop websites, but pinching and zooming in on tiny links may not translate to the best consumer experience.)
'Context is king, not content,' says Cameron Moll, author of Mobile Web Design. 'You have all this great content, but if you haven't catered to the limitations and opportunities provided by the mobile Web, then you're missing the boat. More than anything else, the device itself dictates what the experience becomes.'
Don't know where to start? "Identify the low hanging fruit—the one or two features of your website that would be the most useful to your customer," says Brian Suda. "Ideally, you want to replicate everything available on your website on the mobile version, but start with the most important things first." Single out the features that have the most relevance in a mobile context, but realize that context is unique for each business. For example, an airline might choose a flight status update feature, or information on missing luggage because its customers will most likely be accessing their mobile devices while at the airport. Obviously, the task of picking and choosing the most relevant is easier said than done.
'Probably the hardest thing is trying to put yourself in the head of the user and understand what the user really needs,' Fling says. 'It's a very user-driven media. When we put content on those devices, we have to respect that.' It boils down to really understanding your target customer. For a retailer, a knee-jerk reaction would be simply creating a shopping experience for the mobile user, Fling says. Sometimes, that works, but 'sometimes the customer is expecting a more sophisticated experience,' he says.
Working with Best Buy, Fling saw that the company could provide customers other valuable utilities on the mobile site, such as a tool to alert customers when a store has an item, and to be able to hold it if they do. (That can come in handy on the release day for the latest Twilight DVD.) Once you've focused on a few valuable features for the mobile context, you can trim down the fat in other areas of your website.
'It's really about trying to ask yourself what was it about your business or service that made it successful in the first place,' Fling says, 'and how you can use mobile devices to create a more personalized experience for end users."
Dig Deeper: Six Key Website Design Points.
Making Your Website Mobile-Friendly: Optimize Your Design
Now, you need to organize your content. There are a multitude of design elements when you're writing for the mobile Web that you need to pay attention to — 60, in fact, according to Francois Daoust, a mobile expert at the World Wide Web Consortium (W3C), an international community to develop Web standards. You can check them all out in the W3C Mobile Best Practices document. (The W3C also has a handy tool to test how well your finished product meets those standards.) The goal is to design your site in a way that makes it as readable as possible across multiple devices and platforms. (With smartphone innovation occurring at rocket speed, you don't want to tie down your mobile website to a version that may be out of date in two months.)
'There are a lot of different mobile devices out there,' Suda says. 'Certainly the iPhone is the flavor of the month, but when you look at the numbers it's just a tiny percentage of all phones on the market. We don't want to design a website for just three percent of the market.' Here are a few general practices that are important to keep in mind when it comes to the design and functionality of your mobile-friendly website:
Rethink navigation. Present options in a simple vertical list, instead of requiring mobile users to access multiple layers of navigation. Because mobile devices don't cache like desktops (meaning they don't store a website's data to allow it to load more quickly the next time a user visits), you want to limit to the number of pages a mobile user has to load. Also, limit scrolling to one direction: vertical. Make sure your mobile site does not have unnecessary sidebars or pop-up windows. Another trick is the use of Ajax, which is basically a way of retrieving only a portion of the Web page rather than having to refresh the entire page.
Rethink graphics. Resize images for the smaller screen size, and get rid of any unnecessary graphics that might slow down the page loading. Make links and buttons large and easier to read and click. Don't use frames or tables for layout. Also, don't rely on Flash, as that won't necessarily be supported.
Give the option of visiting your full site. While the point of the mobile version is to optimize for viewing on mobile devices, some users may want to access content that you haven't deemed necessary to include on the mobile version.
Dig Deeper: Getting your business ready for mobile.
Making Your Website Mobile-Friendly: Optimize for Specific Devices
Certainly you want to make your mobile website as readable on as many devices as possible. However, that doesn't mean you should miss the opportunity to tweak your site to match the unique capabilities of specific devices. 'You can provide a much more positive brand experience with an iPhone compatible version built just for that browser,' Peper says.
There are a number of tricks to do that. Use what is commonly referred to as 'sniffer technology' to detect what type of device the consumer accessing your mobile website is using. Then, it feeds a version of your website tailored to that specific device. Another method is CSS3 media queries—adding a mobile specific style sheet to apply certain properties for certain devices, so you don't have to go the more expensive route of adapting the content on your server. The cost will still add up, however, if you are trying to create unique experiences for every device out there.
'At the end of the day, it comes down to budget,' Suda says. 'You could conceivably have 15 versions of your website, but the cost quickly escalates and it becomes a maintenance nightmare.'
Again, it comes down to look at your target consumers and making a compromise. Is your business selling to high-end customers? It's probably good sense to invest in an iPhone compatible mobile site. But if your business is more B2B, the BlackBerry version might be a higher priority.
Dig Deeper: Website Design for the BlackBerry Generation
Making Your Website Mobile-Friendly: Think Outside the Web
Mobile Web has its fair share of limitations, but don't forget about the opportunities it provides beyond the desktop. 'A phone is designed to make phone calls,' Suda says. 'Use that to your advantage when you're designing the mobile version. Instead of a form to fill out your phone number, include a link that will start dialing for you.' In the end, creating a mobile-friendly website is a good place to start, but don't stop there.
While the mobile Web is an efficient way to make your content available on mobile devices across platforms, with the rise in prominence of smartphones, it's becoming somewhat less relevant. 'Most people today are using apps to access Web content,' Moll says. So, your next investment is to take advantage of the growing web application market and their ability to create a more interactive experience for your customers.
Dig Deeper: Should You Create an iPhone App?