Today I'm going to recap some concrete considerations you should make in order to make sure your web design is optimized for use on a touch-based tablet.
In March, I wrote an article entitled How the iPad (and Tablets) Are Driving a New Age of Web Design. In that article, I looked at the iPad - a platform I'd been using on a daily basis for about ten months - and how it had changed the considerations of the modern web designer. With the rise in tablets (or, rather, the rise of the iPad), touch inputs are being used much more often when browsing the web. It's a different story to smartphones, who often have a specialist touch site.
In that article, I looked at the concepts of designing for tablets, such as designing for new resolutions. While very similar, this article will cover considerations you should be making for touch driven devices.
1. Design With the Finger in Mind
Perhaps one of the biggest considerations is to remember that the human finger is not at all as precise as a cursor controlled by a mouse or trackpad. Take your finger, and hold it up to your display next to your cursor. It's pretty clear that the kind of precise action achievable with a mouse is just not possible when using touch-based inputs.
For this reason, a lot of web apps now have native iPad counterparts that better suit the precision of a finger. Of course, you don't need to go and develop an app, in fact, forcing your users to use an app could turn them away. The takeaway for this point is to simply make sure that key areas like your navigation don't need to be zoomed in to be accessed by users on a touch interface.
In order to achieve good usability in both mouse and touch, designers need to compromise in the "middle ground"; everything needs to be touchable with the human finger, but not look excessively large when being viewed with a more traditional mouse and PC setup.
After launching both sites on an iPad, it's obvious Apple's site has the better navigation. While both work well with a mouse, Apple's menu is clearly the easiest for touch whereas the BBC's requires a lot more precision.1a. Avoid Making an iPad-specific Version
When I penned my article in March on iPad web design, I wrote this line: "meaning designers must reach that "middle ground" ... or have a separate tablet-dedicated site that uses a different stylesheet (and even a different layout) altogether". I take that back.
Unless your web design expressly needs a custom version for touch-based interfaces, it's not generally good practice to segment your visitors with different versions of a site. If you have multiple versions for different platforms, it's probably going to be more difficult to maintain, but, more importantly, will break the connection the users make between browsing your site on a desktop, and doing so on a tablet. If it looks different, they have to learn a second way of navigation which doesn't help anyone.
If you must create an iPad-specific version, always provide a return route for users to opt to view the full site.
2. Stick to Standards, Avoid Flash
Take a look at your design and think of what makes it what it is. You've no doubt used HTML and CSS, but have you used Flash or some other technology? The best way to account for the widest range of platforms is to stick to standards-complaint HTML and CSS, and especially avoid the use of technologies that require browser plugins or additional software.
Luckily, HTML5 provides a great set of tools for creating interactive and media elements that will work seamlessly on a tablet and the main current-generation desktop browsers. I might stir up controversy by suggesting this, but (where web design is concerned) try to avoid Flash at all costs. Not only does it have many problems on the desktop, the majority-share iPad doesn't support it, and neither will those running Windows 8's Metro UI.
There are a number of reasons why you should use HTML5 in general, aside from the fact it's more likely to just instantly work on a tablet. Media such as audio and video work really well with HTML5 and work across various platforms. I was amazed by some of the HTML5 stuff I saw when I was researching a recent roundup, since it provided Flash-like effects but with none of the hassle and exclusion from iOS.
Naturally, you should make sure all your code is written in compliance with standards, like any website, iPad-oriented or otherwise.
A lot of popular services, including YouTube, automatically offer up HTML5-powered video players on both their own site and when embedded on others. In this case, this video is embedded on a blog and plays back seamlessly on an iPad.3. Aim For 1000px, or Design Adaptively
Of course, there are going to be exceptions to this, but generally you should be looking to design for resolutions around 1024px so that they will fit a tablet natively. Most website's grid systems total a width of around 960px anyway, so this shouldn't be a massive problem to implement. Should you choose to ignore this advice, your website will likely end up being scaled down to fit the width of a tablet browser, resulting in the requirement for the user to zoom in. This leaves a lot more zooming in-and-out and swiping around to find things, which doesn't help anyone.
The solution to the problem comes in the form of adaptive CSS, which can change styles depending on platform, browser and resolution. I've already explained that I don't really like the idea of creating a unique iPad-targeted version of a website, but simply modifying some styles for iPad users shouldn't be a problem. Unfortunately, it does leave a lot more work, but can sometimes be a simple step that makes major improvements.
If you are looking to design simultaneously for multiple resolutions or just modifying trivial styles between platforms (such as changing the recognition of links on an iPad versus a desktop), there's a handful of services to help you, including Adapt.js. Also be sure to check out the awesome article on adaptive layouts from Smashing Magazine.
4. Incorporate Mobile Safari Enhancements
iOS has this pretty awesome way of bookmarking a website to your homepage, so it looks just like a link to open an app. The most basic form of this is to add a small icon to put on the homescreen when it is saved there by a user. This is achieved with a single line of code:
1 |
|
2 |
<link rel="apple-touch-icon" href="img/icon.png" /> |
Note: This snippet will automatically add the Apple-style gloss to your icon. Swap out apple-touch-icon for apple-touch-icon-precomposed to remove that gloss.
There are some other, normally unused meta tags that can be applied to your design to enhance it when it's saved to an iPad's homescreen. For example, the line below will hide the address and bookmarks bar and just show the webpage fullscreen.
1 |
|
2 |
<meta name="apple-mobile-web-app-capable" content="yes" /> |
These are just two of the available snippets, and you should definitely check out the MobileTuts+ tutorial on this topic. These make little difference to your site on non-iOS platforms, but might improve the experience of them on an iPad, should your app be suited to them.
5. Remember Multiple Orientations
With the increasing use of tablets, most of which have an accelerometer built in, there is a new kind of fold being introduced. While we've written about the fold passing away, there's a new one that's being introduced with the increase in tablets being used.
When a tablet switches orientation, the entire view of a webpage can be distorted. As with accommodating multiple browser resolutions, one must also make sure their website represents the multiple resolutions capable of a single tablet, that of its portrait and landscape orientations.
The checklist item here is to make sure your key information is visible without swiping when you view it in landscape and portrait. These can provide radically different snapshots of your site, so try to test them out in both orientations to make sure all users of a specific tablet can see the best representation of your site design and its content.
CNN's website in both portrait and landscape orientation in Mobile Safari.6. Actually Test Your Site
An important step in ensuring your site works on an iPad is to actually test your site out on a touch interface and consider: how simple is it? If you need to, visit an Apple store, push aside one of the kids on Facebook and load up your design.
If you don't have an iPad, nor access to a store with one on display, but you do have a Mac, download Xcode, open up the iPad simulator and give it a whirl there to test out things like resolution and orientation.
Xcode is a free download for users of OS X Lion, and offers iPhone and iPad simulators which roughly allow you to see how your site appears in different resolutions.Wrap-up
Tablets have definitely changed web design, arguably for the better and it's becoming increasingly important to accommodate them when we design new sites. A user who visits your design on their iPad first, only to find it not working, requiring a lot of scrolling or some other frustration, might be turned away for life because of the impression it gives them.
I've certainly visited a lot of websites on my iPad in the 16 months I've owned one, and experimented a bit in working with iPad-specific design (like in tip #4). Follow these six tips and you should be set to go with an iPad-compatible design. As long as it technically works, doesn't require a ton of zooming and/or scrolling and can actually be used with a finger, you're on a path to accommodating a valuable niche of the browsing market.
