How to design web sites for tablets

This story is brought to you by Sourcebits, a Global leader in Strategy, User Experience & Engineering for Mobile & Cloud. Follow Sourcebits on Twitter for recent news and updates.

Imagine a website that looks horrible on a tablet. Or worse, doesn’t even actually function.

Oh wait, you don’t have to … because today, two whole years after the iPad picked up the dead tablet industry and whipped it into roaring, raging life, many websites are not optimized for tablets. Even new ones. Shocking? Sure. Unthinkable? Maybe. Unfortunately, however, it’s reality. And it’s not just the obscure little sites, either — try using Google Docs on your iPad for anything other than viewing.

Above: Google Docs doesn’t like mobile Safari …

What’s the problem? 

Sometimes it’s the simple stuff: a site with links and clickable images that are just a little bit too small. Usability guru Jakob Nielsen has skewered this fat-fingered problem, particularly on midsize tables like the Kindle Fire. Not so surprisingly , a design built for a 15″ laptop screen or a 22″ monitor doesn’t always translate well to a 10″ iPad screen, and users have to make liberal use of the standard double-tap protocol to “big-ify” text and navigation. Make this a frequent necessity on your site, and they’ll want to double tap you, too.

Five key differences …

In general, there are at least five key differences between designing websites for tablets, and designing for desktops and laptops:

  • Size
    Tablets are generally smaller (who knew?).
  • Screen resolution
    Tablets have widely varying screen resolutions (from the Kindle Fire’s 600×1,024 to the new iPad’s 2,048-by-1,536 pixels). Orientation is flexible as well, so user could be viewing your site in landscape or portrait, widescreen or tall.
  • Compatibility
    Yes, there’s the problem with Adobe Flash. But also other plugins (Silverlight, anyone?) and even JavaScript-heavy computationally-intensive web apps can cause problems on tablets.
  • Touch interfaces
    This is the big one. The touch interface is fundamentally different from a traditional desktop/laptop experience. It requires bigger clickable elements and fewer hidden navigation elements.
  • Memory and CPU limitations
    The limitation is often overlooked, but tablets have less RAM (working memory) and punier CPUs, so media-intensive experiences can be challenging for tablet users.

So how do you design websites for tablet users?

Shawn Neumann, founder of the web agency Domain7, says the most important thing is to understand the user experience and strategize from there. “The desktop is the research or get-something-done place, and the phone is the on-the-run and killing-time device. The tablet is the living room, fireside device, but it’s also a catchall, a bridge between diving deep and getting quick info,” Neumann says.

“Sometimes a responsive approach works best,” Neumann suggests. A responsive website is fluid, adjusting to different screen sizes and display resolutions, so that theoretically the same site can be viewed on both large and small screens. Realistically, the results are not always optimal: “There are challenges around resolution thresholds,” he acknowledges. A design intended for large monitors won’t always look great on a 7″ screen. In that case, Neumann says, you cannot assume that you can deliver one design for all mediums. “The one-site experience doesn’t work anymore – you can’t assume that people will be able to zoom and pinch and see everything.”

That opens up a number of different possibilities, from building a mobile-friendly site, to sending users customized versions of your site based on the device they’re using. The mobile-friendly site can be challenging, particularly if it’s running off a different content management system (or none at all). Maintaining both sites can be challenging and expensive, and you risk annoying users who cannot access the full version of your site on their tablet. And in either case, you’re incurring extra development effort, extra cost.

In some cases you can use shortcuts: software like Pressly or OnSwipe. They’ll take your standard website and, with a little magic pixie dust, seamlessly output a version that is optimized for tablet viewing.

That’s the route that Jason Baptiste, chief executive and co-founder of OnSwipe, prefers. “The world is shifting from on-click to on-swipe, from a three-foot user experience to a one-foot,” he says. It’s a more focused, concentrated user interface, according to Baptiste, and it requires a different design approach. “Some camps say you should design once and publish everywhere. I think that’s a real cop-out. On a tablet you should be designing for touch.”

The implications are obvious

What works better on tablets? Simple, clean user interfaces with large, obvious, and well-spaced navigation and controls. Go easy on the interactivity and the heavy-duty plugins. Create a flexible framework that works well on multiple screen sizes. You may not be able to master every use case, but you’ll be close. And, decide if you’re willing to use a service to automatically reformat your site for tablets and other mobile viewers.

There’s a reason personalized content aggregators Flipboard and Pulse are so popular: they make the web beautiful on small devices. Watch what they’re doing and take notes on how your website might need to change.

The tablet market is exploding

More tablets are being sold every week. Research firm Gartner estimates that there will be 665 million tablets in use worldwide by 2016. And it’s not just volume: it’s quality. Adobe’s Digital Marketing Insights report shows that tablet visitors spend 20 percent more per purchase than regular website visitors, making them the exact kind of visitors you want.

The implication is clear: make your site tablet-friendly, or risk losing traffic … and revenue.

Photo credits: FlickrFlickr

Topics >

blog comments powered by Disqus