A Look Into: Building Websites for Tablet Users

Editor’s note: This is a contributed article by Lakshmi Harikumar who anchors the content marketing efforts of MobStac Inc, an HTML5-enabled mobile cloud publishing platform that seamlessly integrates with your existing website and makes your content accessible to mobile and tablet devices through mobile sites and apps.

The tablet arena, which was once solely dominated by the Apple’s iPad, is now booming with a new entrant every day. The Google Nexus 7, Amazon Kindle, Microsoft Surface, and a host of other tablet devices that have entered the market are pushing marketers to think beyond the PC website and develop a stand-alone tablet strategy – or, at a minimum, a tablet-friendly website.

Are tablets a replacement for smartphones? The short answer is no. In fact, a recent comScore report clearly reveals that one in four smartphone owners also used a tablet. Moreover, there are some clear differences in the way people use these two devices. While some of your mobile web strategies may work for tablet users, your tablet readers have particular needs that require special consideration.

More On: Responsive Web Layouts For Mobile Screens: Intro, Tips And Examples

Building for the Tablet

Accessing content and information seems to be the top-most activity of tablet owners across the world, says a study by the Online Publishers Association. Content consumption included watching videos, followed by reading news. So, what should you, as a content marketer or publisher, be doing to woo your tablet readers?

Tablet readers are used to engaging with a myriad of apps, which are built with rich graphics and highly detailed visuals. Hence, tablet readers expect the same lean-back, app-like reading experience they are used to seeing on their desktop browsers.

Scroll is passé; swipe is in

The only way to engage your ever-growing tablet visitors is by thinking beyond PC website norms i.e. the vertical scroll formats and layouts, and to start building a more personal, interactive website. Tablet readers are used to gestures like swiping and flicking and prefer these to the older "scroll and click" way of navigating sites.

Take advantage of HTML5 and CSS3 to display content in a paginated, well-formatted layout that emulates a printed magazine and give readers the experience of flipping the pages of their favorite magazines.

Check out our HTML5/CSS3 Tutorial Series

Touch-friendly Websites

Every tablet on the market today works with a touch interface, which has redefined the very idea of how we interact with personal computers. For optimal reading experience on tablets, it’s as simple as placing the minimum text size at 14 pixels. But what about user interfaces especially when it comes to human input?

It’s in the Fingers

While PC websites load on a screen that is placed at a certain distance from the eye accessible with the mouse via a cursor, tablets are designed to be held in hand and to accept input from the user’s fingers.

Increase text padding so that there is quite a bit of an area around hyperlinked text that can be clicked even by large fingers. Also increase line-spacing between sentences so that there is no clash between hyperlinked texts, form fields or dropdown menus. Remove hover events but keep the behaviors and controls intuitive, or at least predictable enough so that users need not relearn how to navigate your site.

We recommend you comply with Apple’s iOS Human Interface Guidelines when building a tablet-friendly website.

Avoid Flashy elements

With the iPad still the leader of the pack in the tablet market, it’s still safe to not build for Flash. However, you can create a betterapp-like experience for your readers on their tablet browsers using HTML5. Use less of JavaScript-based animations to keep your tablet website fast and accessible across all tablet devices.

Orientation matters

Your tablet visitor can view your website in landscape or portrait orientation; so make sure your tablet website’s content rearranges itself automatically to fit both these orientations. See 30 Responsive Portfolios For Your Inspiration for an idea of how your content needs to rearrange itself to suit different screen sizes and orientations.

And for further reading, take a look at:

Mobile Web Design: 10 Tips To Better Usability

30 Useful Responsive Web Design Tutorials

50 Useful Responsive Web Design Tools For Designers

Lastly, always use images that are of very high resolution, or make sure your images resize for different orientations, so that users get the full picture. The 16:9 aspect ratio works well with most tablets.

Wrap Up

When building a tablet-friendly website, think beyond PC websites and take personal interaction a step further. Rethink and rebuild your websites for a world where tablets are first.