Advertisement
General

Designing With Tablets in Mind: Six Tips to Remember

by

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:

<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.

<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.

Related Posts
  • Code
    Articles
    Mobile Operating Systems in 2014Dj45i preview image@2x
    As a mobile developer, it's good to be familiar with the most important platforms in the mobile space. In this article, we'll take a look at the most important mobile operating systems, their current state, and how they're performing in the current mobile landscape.Read More…
  • Computer Skills
    App Training
    Demystifying Microsoft Office & Office 365 PricingOffice logo
    You want to buy Microsoft Office, but which suite should you get? This tutorial will help you choose the best for your usage and will guide you toward a better understanding of how Microsoft has structured its most popular software offering's pricing.Read More…
  • Game Development
    Game Design
    Quick Tip: What Is the Best Screen Resolution for Your Game?Screen resolution 400px
    Chosing the optimal resolution for a game from the start of development can reduce headaches with porting later on. In this Quick Tip, I'll help you choose the best screen resolution for your game.Read More…
  • Code
    Articles
    What Makes Mobile Design Unique?Mobile unique icon2x
    Are you getting started with mobile design? Any designer who's had the opportunity to design for mobile devices as well as desktop computers knows that mobile design is a one of a kind discipline. You'll find challenges unique for mobile. In this introductory article, I'd like to take a look at some of the attributes that make mobile unique. It's no secret that thinking about a product's design makes for a better product. This doesn't solely relate to aesthetics as design also influences how a product's functionality and how the user interacts with it. Design choices have a distinct influence on usability and user experience. When you start out as a mobile designer or developer, it's your responsibility to make the product not only work for you, but also for its target audience.Read More…
  • Computer Skills
    Hardware
    Apples and Pears: A Guide to Alternative Apple AccessoriesLogitech icon 2x
    While Apple manufactures some of the best accessories for the Mac, they aren't the only company that does so. In fact, there are many other companies that manufacture some great accessories for your Mac, from keyboards and mice to cables and adapters. Some of these are not only cheaper, they're far more versatile and feature-packed than Apple's offerings. In this guide, I'll show you some alternatives to Apple's own accessories for your Mac, saving you money as well as increasing your productivity using accessories that you may never have considered before.Read More…
  • Code
    Articles
    WordPress and Tablets: Optimising Now and Looking to the FutureThumbnail
    Tablets are becoming more popular as each day passes and more people are turning to them for the consumption of web-based content. Across Tuts+, we've already discussed in several articles how to design with these new tablet devices in mind. Today, we're going to revisit the topic of considered tablet design and look at it in the context of WordPress.Read More…