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?
