Optimising Your Website for Tablet Browsing

Optimising Your Website for Tablet Browsing

A well-designed homepage for your website not only boosts traffic, but helps to establish a firm and effective brand. Your website represents your first point of contact with your customers, especially as mobile technology becomes better suited to browsing.

However, the increased use of mobile platforms – particularly following the launch of the latest generation of iPad and Windows 8 tablet devices – presents a uniquely challenging environment for designers. To ready your site for a world in which manufacturers are becoming increasingly prolific, you should prepare to alter your entire design philosophy.

1. Function over form

Firstly, and most importantly, keep designs simple. Apple has already done its bit to discourage the use of gimmicks and overdesign by abandoning support for Flash, but there are still many things to avoid in a mobile world. Memory or processor intensive features, such as heavy reliance on Javascript, may be fine for desktops or laptops, as these computers have the power to handle such features (and large screens to showcase your designs) – yet, they might be less convenient for a modestly specked tablet and or mobile phone. Stick to HTML5 to provide users across all platforms with a unified experience and to avoid alienating users of particular devices.

2. You can touch this

A crucial aspect of developing for smartphones and tablets is their unique focus on touch-interface, requiring numerous subtle design adjustments. Crucially, remember that the human finger lacks the precision clicking power of a computer cursor, and respond accordingly by increasing text padding around links. Care should also be taken to increase line spacing in text, to avoid interactive elements clashing. The ascendency of the touchscreen also requires that designers abandon scrolling in favour of a more “pagelike” format, to fully exploit the swipe function.

3. Flexible scaling

With mobile devices now becoming the go-to technology for web access, designers must be mindful of the fact that not all users will be viewing their page on standard monitors. This is particularly true in light of the recent upswing in popularity of the Windows tablet and the resulting diversification of screen sizes. With this in mind, designers should always be willing to scale content appropriately, and be willing to accommodate multiple screen orientations. It is worth taking the time to scale for both landscape and portrait, allowing you to maximize the comfort and convenience to your users while giving them a more integrated “app-like” experience.

4. Make fonts easy on the eye

In the small world of tablet and phone browsing, extra attention should be paid to typography to spare headaches in the user. This means adjusting not only the size of the text to prevent unnecessary swiping and zooming, but also selecting an appropriate font. Unfortunately, this aspect of design is all about trial, error, and optimization, and can’t be achieved through consulting how-to guides. You’ll need to play around a bit before you find a combination that is both easy to read and easy to navigate on a smaller scale.

5. Don’t despair

From what’s been said here, you might come away thinking that mobile web optimisation is a mire of pitfalls and artificial limitations. But while the specifics of working on this new platform may appear daunting at first, they represent timeless common-sense design principles. Limitations such as these should be viewed first and foremost as an opportunity to innovate, and this is especially true in an area where many struggle to adapt. By sticking to the basics and focusing on developing a site which can be intuitively navigated and easily read, you’ll not only end up with a great site, but your visitors will thank you by sticking around, too.


Ninjacrunch is a design blog showcasing the best of all design- and art-related topics today. Ninjacrunch helps the design community by providing inspirations, tutorials, web resources and a lot more!

Leave a comment!