Smart phone purchases in the 3rd quarter of 2010 were up 96% compared to the year before, according to Gartner. Apple is about to launch the second version of its “magical” iPad, and a host of imitators are releasing their swarms now. The desktop computer isn’t dead, but a lot of people looking at websites with something else—and the touch screen revolution is just getting started. Is your site ready?
First, let’s first be realistic about traffic levels from touch screens. For the Orbit site, only about 1% of visitors are using iPads and 2% are using smart phones. Not a ton, but these numbers are growing steadily.
So if, after reading this, you find that your site isn’t touch-friendly, take a look at your analytics – (for Google Analytics users, it’s in Visitors > Browser Capabilities > Browsers and OS). How many people are you disappointing? Several? Dozens? Hundreds? Decide what to do based on this information.
Although touch screen technology is changing fast, making it hard to predict future user behavior, here are our initial best practices for touch-friendly web design.
1. Size Matters
Smart phones have screens that are simply too small to comfortably display a full-size site. If you follow the rest of the guidelines below, smart phone users will still be able to get around your site, but it won’t be easy. So if you want to serve the smart phone demographic, we absolutely recommend some mobile web design. Design a smaller version of your site, specifically for smart phones.
Tablet screen sizes are typically between 10 and 7 inches—with a resolution width of 1024 pixels. This means they should be big enough to work with your full-size site, so long as your site is no more than 1000 pixels wide.
John Cooney: We rarely recommend making a site wider than 1000 pixels, even if most desktop monitors have a resolution width of at least 1600 pixels. Most users will never even notice the width of your site, especially if it is well designed, unless it’s too wide. If your site’s too wide, users will definitely notice and will likely leave. Everyone hates to scroll horizontally.
2. Skip the Flash
By leaving Flash off iPhones and iPads, Apple and Steve Jobs have successfully given Adobe a black eye. I’m not predicting the death of Flash. (In fact, Flash was my first love online.) There will always be a place for it in my heart, and a place for it on the web. But at least for now, Apple rules the touch screen world and Flash is a problem.
You probably don’t need Flash anyway. If you just want an area of the home page to rotate different pictures and text, this can (and should) be done without Flash.
John Cooney: In addition to Flash, there are additional functions that won’t work on a smart phone or iPad (and likely won’t work on the forthcoming competitor tablets). Uploading through the browser isn’t supported, nor are plugins or Java applets. If you have advanced functionality that you want touch screen visitors to use, you may need to consider creating an app.
3. Use Touch-Friendly Navigation
Links are usually smaller than buttons. When navigating a website on a touch screen, you need better aim to touch links, especially if they’re close together. Especially for the main navigation, make links and buttons fingertip sized or bigger—and remember that desktop users will always appreciate links that are easy to click too. No one wants a dexterity challenge when they’re just trying to find your phone number.
4. Limit Rollovers
So limit rollover effects to style enhancements instead of necessary controls—again, this will help make your site easier to use for desktop visitors too.
John Cooney: Users look where to go with their eyes before they move the mouse; elements hidden until rollover may never be seen.
Next time you’re near an iPad, try out your site. Or better yet, ask someone else to do it and watch them. If you follow the above guidelines, everything should work well—but it’s likely there’s a few things that need some attention. So take a look at your analytics and think about ways of making your site accessible to all users.
The revolution is coming. Make sure you and your website are on the right side of history. Here’s a little visual recap for you. Enjoy!
Still curious about the touch screen revolution? Read Part II of Viva la Fingertip! by John Cooney, Orbit’s one and only web development leader.