While smart phone’s got the ball rolling for mobile browsing some years ago, the arrival of the iPad in April 2010 really began the revolution for people who wanted to cruise the net while out and about.
As with all new technologies, there were initially a lot of doubters who insisted the tablet concept wouldn’t get off the ground. Boy have they got egg on their faces now! The tablet market now has a very strong foothold with sales exceeding 20 million in 2010 (3 million iPads were sold within 80 days of its release), and it’s estimated that this figure could quadruple by 2012.
The tablet is an excellent example of the speed with which the technology industry evolves. Just a few years ago if you wanted to design/build a website, there were just a few browsers that you needed to consider. With the introduction of mobile/tablet browsing, creating a website that looks good and is easy to use on a full size screen as well as a smaller one poses a significant challenge to designers.
Considerations for Tablet Design
Scaling of sites
Since web designers no longer have the luxury of knowing users will be visiting their website from a standard size monitor, they now face the issue of figuring out where to put “the fold”. For those new to the game, the fold marks the point where a user must scroll down to see more content. Hence the most important information/content is generally placed above the fold to ensure it’s seen before the user navigates away from the site.
With the trend of more viewing been done from smaller screens, many designers are beginning to scale back their designs and raising the fold to ensure important content and navigation options are readily available on smaller screens.
Giving the mouse the flick
A very important consideration for tablet design is that users will be using their finger to navigate rather than a mouse. While human fingers are pretty nifty little tools, they’re not as precise as a mouse is when it comes to navigating a website. The simple fact is your finger is a lot larger than a mouse cursor, and is physically incapable of doing what the cursor can. Given this, it’s important to ensure that important areas of your site, such as the navigation bar, don’t need to be zoomed in for tablet users to access them.
Catering for this doesn’t require that you go out and develop a tablet version of your site. Ideally you’ll want to achieve a middle ground with the size of your buttons, where they’re large enough to access with fingers, but don’t look ridiculous on a full size screen.
Check the form (fields)
Particularly for business sites, forms are an important part of the user experience. Whether it’s a simple contact form, shopping cart or newsletter signup; poorly designed fields can create immense frustration for users, and lead to high abandonment rates.
The easiest way to ensure your form fields are functioning correctly is to test them yourself. Jump on an iPad or any other tablet device and check for things like: clear rendering, speed of processing, unnecessary fields, and in general anything that makes the experience difficult or unpleasant.
Don’t be flashy
If you want your site to display well on a wide variety of platforms, the best way to achieve this is by sticking to standards-compliant HTML and CSS, and avoiding technologies which require additional software or browser plugins. As you’re no doubt aware, Apple has ditched flash and the iOS no longer supports it – so if you’ve got a flash-based site it might be time to consider a rebuild.
Sticking to standards compliant platforms doesn’t mean your site has to be boring. HTML5 has a great range of features for creating media and interactive elements which will work equally well on tablets and desktop browsers.
Up, down and sideways
Extending our discussion regarding “the fold” – another important consideration is that the majority of tablet devices have a built-in accelerometer. This means that the user could be holding the device in either a portrait or landscape position, or even switching between. So in addition to having to cater for multiple screen sizes and resolutions, you must also keep in mind different orientations.
The important thing here is to test your site from both orientations, and ensure that important information is visible without having to swipe. Also check for any kind of distortions that may occur as the site is switched between views, and iron out any problems so that the design and content are displayed optimally from both.
Test, test, test
Before you freak out at all the complexities of designing for multiple platforms and quit your web design job – rest assured it’s not THAT hard. The key thing is testing. Get your hands on a tablet device, preferably a couple of different ones if you can i.e an iPad and an Android based tablet, and put your site to the test. Key things you’ll want to consider while testing are: does the design display well? Is navigation simple? Is key content displayed above the fold?
If you don’t have direct access to a tablet, you could head into your nearest Apple store or tech provider and use theirs. Alternatively, there are a number of desktop simulators available online – just be careful to use one that actually renders your site in tablet resolution.
Three ‘no good for tablet’ designs
It’s always helpful to see where other people have gone wrong, it’s what allows (smart) humans to keep moving forward. With that spirit in mind here are three designs which don’t present so well on tablets.
A cool brand with a really cool website, unless you’re viewing on a tablet. Entirely flash-based, it doesn’t cater well at all for mobile devices.
I feel a bit bad throwing the unsuspecting Tennessee Theatre into my ‘bad designs’ section, as their site isn’t that bad. Unfortunately they’ve disobeyed one of the key rules for tablet design though, drop down menus.
Okay I admit, this one is kind of a joke – when I searched ‘bad website designs’ this little number was pretty quick to present itself. You name it, this website disobeys it. It’s crowded, has little buttons everywhere and is downright ugly. Be careful, this one might actually make your tablet self destruct.
Tips for awesome tablet design
So we’ve given you plenty to consider when optimizing your site for tablets, along with some examples of what not to do. Now here are some tips to ensure your website looks awesome from the smaller screen.
Push some buttons
As discussed earlier, the human finger is pretty clunky compared to the mouse cursor. Therefore, 16×16 px icons are going to be pretty useless to someone viewing your site on a tablet. As a guide, the average finger can fairly easily click on an area of about 20px. Keep in mind not to go overboard with button size, as you don’t want to present desktop users a site that looks like it was designed for a 3-year-old.
Getting the Type right
Hitting the mark with typography isn’t a simple feat with tablets. On one hand, you don’t want your type too small as it will require users to zoom in, and potentially swipe across if your lines are too long. At the other end of the scale, you don’t want it too large as it will require excessive scrolling. So, achieving text that hits the mark is about more than getting the right font-size. You’ll need to play with the size, line-height/length, and font-face. Until someone comes up with a simple how-to on this, the key is to just play around with it until you achieve something that’s simple to read and doesn’t strain the eye.
Less complicated = better
The less the user has to zoom in and out and scroll around to view your site the better. Keep in mind that if your site design renders well on a desktop – it won’t necessarily render so well on a tablet. The easiest way to achieve a less complicated design effectively is to go through your site and strip out any elements which aren’t absolutely necessary. Doing this will deliver two benefits; firstly it will make your site more tablet friendly, secondly it will in many cases enhance the desktop browsing experience.
It doesn’t have to be a bitter pill
While many of you may be cringing at the number of considerations to be made for tablet design, keep in mind that it’s a good excuse to review and improve your overall site design, and may also make your job more simple in the future. Tablets force designers to utilize limited viewing space more effectively, which means that a lot of unnecessary content and elements are stripped away – leaving a simpler, better looking design with a strong focus on what you want users to see: your core content.
Is your site optimized for tablet viewing?
Additional tablet design resources:
Resource for mobile UI guidelines
Designing specifically for Android tablets
7 Web UI mistakes to avoid for smartphone and tablet