How to make your website tablet-ready

Today, most websites can be viewed on tablets - but most certainly weren’t designed for them. In fact, some websites are pretty much unusable on tablets, with teeny-weeny mouse click icons when chunky buttons are what are required. If you’re designing and building a website now that you know will need to be adapted for tablet(s), there are still a number of good practices to observe. And most of them, happily, will improve both your original website and your tablet. But before you even start to create a new website that supports one or more tablets, you will need to answer some fundamental questions. Let’s get the geeky bit out of the way…

Programming Hints

• Find out about HTML 5 - the arrival of HTML 5 makes your life a lot easier; it supports all four main tablet platforms – and browsers Chrome, Firefox 5 and above, Safari and Internet Explorer 9 (though it doesn’t support IE 6, 7, and 8.) So…

• Create the website with a browser detect page - when using Flash as content, a simple script can detect browser types and send the most appropriate version – for example, HTML to tablets and Flash to most desktop users.

• Know your tablet platforms - are you designing for Android, iOS, Blackberry Tablet OS, Windows 7 or all four? It’s fair to say that Blackberry OS and Windows 7 are currently the least significant of the four.

• Choose wisely - your tablet choice will ultimately be determined by your target audience, but assuming you have a limited budget that allows a maximum of two selections, it’s highly likely you will opt for iOS and Android.

• Kick off with the simplest - start creating your website for iOS (as it doesn’t support Flash), then use the iOS as your template for the Android version and just add on the extras.

UX/Design Hints

• Understand the way tablets work – there is hardly ever a ‘Rollover’ event on tablets. It’s one click/touch and you’re there.

• Use big buttons – it has to be finger-friendly with tablets, if it’s too fiddly for fat cats in wine bars, it doesn’t work. (Mind you, there’s no need to go completely ‘Jack and Jill’ on the button/icon size if the links are spaced out enough.)

• Use space – and never put two frequently used functions too close together.

• Expand hit area – make your responsive area BIGGER than the icon buttons.

• But avoid overlapping hit areas – make sure you’re nottooclose to another hyperlink.

• Flag the links – if you use hyperlinks or want to signal interactivity. Whether you use underlines, bold text, contrasting type colour, arrows or icons, make sure it’s bleedin’ obvious.

• Use ‘More’ – the More button is a generally understood indicator that you can read, well, more. However, don’t overdo it; too many More buttons can be distracting from a usability perspective.

• Always make photos clickable and relevant – ensure your photos are part of the main story link, unless the photo is relevant in itself – i.e. the shot/graphic is there to be enlarged/experienced in isolation.

• Use fluid width – tablets have no right way of viewing. Websites can be viewed in either landscape or portrait. For designers, that means two completely different layouts – and it’s why the iPad highlights the necessity of fluid width design.

• Tablets do not have a fold, vertical or horizontal – tablets have established that websites need not look identical on every device. You may have already developed style sheets for mobile phones but you will now need to include the No Fold policy for tablets. In portrait mode, most of your website should be visible in one go. And in landscape mode, the touch interface makes it easy to browse sites that display content horizontally.

• Cut the copy – it’s no bad discipline to reduce your copy to the shortest it can possibly be, whether you’re talking about tablets or conventional websites. Tolstoy would have been a lousy web writer, though I doubt this ever troubled him. Unless you’re a five-year-old school kid, you don’t actually read the copy by spelling out words as you go along. People scan-read websites and recognise individual words in exactly the same way they recognise visual images. And of course, slashing the copy will make everything look cooler, too.

• Study outstanding UX examples – as is often the case, outstanding examples of best practice are the likes of Google and Apple. If you refer to www.apple.com/mac, the top bar is reserved for navigation. It’s one click to almost anywhere. All photos are clickable. It’s a website that works equally well on the iPad, and there are a host of other clever features which today’s designers would do well to note – form follows function at all stages and at no point do you feel there is an uncomfortable tension between the aesthetics of the site and the usability. The navigation is consistent between the website (with which the user may already be familiar) and the tablet is just a reflection of this, with a few tablet variants such as the lack of rollover menus.

• And don’t forget - the most important facet of a website is the content - and that’s irrelevant without usability!

Creating superior user experiences is at the heart of all successful digital design and, if you choose to observe some of the hints and tips above, you’ll find it easier than ever to get great results from websites and tablets alike. And HTML 5, with its cross-platform appeal, will undoubtedly save you time putting all the solutions together.