A while back I bought an Apple iPad. I’ve always been a little bit of an early adopter – but I made this purchase from the strictly pragmatic perspective of someone that really dislikes having to bust out the laptop at a restaurant when meeting with a client. It’s hard to describe just how poorly a laptop fits on the table, surrounded by all manners of spill-able liquids – not to mention the guest has to be seated right next to you to be able to see anything. And trying to type anything longer than a domain name brings about a whole other set of issues. So for me, the iPad made sense. It functions as my daily planner, ebook reader, and casual web browser – just at home in a restaurant as it is in my lap on the couch.
Why bother?
The iPad has become the first device I use in the morning, and the last device I use before bed. Now here’s the real kicker, they’re not selling 1 million of these devices per month because they aren’t good at browsing the web. Furthermore, this is just the deep breath before the plunge – there’s no shortage of hardware manufacturers putting themselves in position for a massive tablet campaign. Now whether any of these devices get any traction is open for debate, but what’s not is that mobile computing is where all of the action is taking place right now.
Morgan Stanley analyst Katy Huberty has raised her projections on not only Apple’s iPad but the tablet market in general, predicting that tablets will outsell netbooks by 2012 as Apple ramps the iPad production and other vendors join the fray.
So the trend is definitely coming, it’s no longer a matter of if – but a matter of timing.
Based on our experience with iPad Web browsing, we would not be surprised to see tablet daily Internet usage exceed traditional PC Internet usage in the coming years
– Katy Huberty (Morgan Stanley)
And there it is… So what does all of this mean? If people are using tablets now, what needs to be done differently in terms of web design? The easiest way to tackle this question is to look at the operating mode of each medium – from the mobile phone to the desktop, and the devices in between.
How can we design for this trend?
The biggest concern to keep in mind is that the core functionality of your site or web application continues to perform as expected under the medium of tablets and phones. Javascript seems to be pretty safe, but Flash is a non-starter. Either eliminate Flash from your content, or have something to replace it when it doesn’t render. Apple has come right out and said they would not support flash on the iPad or iPhone (the biggest marketshare of mobile browsing), and support on the devices that do offer is a mixed bag.
Input: The Desktop
We’re all familiar with this one – a desktop keeps the screen vertically oriented perpendicular to the input surface (mouse and keyboard). The mouse is a relatively low bandwidth pointing device, but is extremely precise – allowing a user to click on a small button, link, or image; as well as select large swaths of text. In addition to this, we have the keyboard – an extremely high bandwidth device for text entry. Then we wrap all this up with a multitasking environment with a large display, able to position two web pages side by side in most cases. the desktop is the premier platform for the creation of content, and an great performer in the consumption of content.
Input: The Netbook
I’m using the term netbook here, but this applies to most laptops as well. Here we have a portable device with the same high bandwidth keyboard, perpendicular to a vertical display device (although not usually large enough to display multiple sites side by side), and a relatively precise track pad or nib for pointing. Again, a netbook user is able to click small links, and select large portions of text for copy and pasting; and is an adequate performer in the creation of content (more-so the laptop over the netbook), and an solid performer in the consumption of content.
Input: The Tablet
The tablet is a significant departure from the previous modes of input, and shares more in common with the mobile phone than the desktop. The screen and input device are one, and with the use of multi-touch this very much a high bandwidth mode of operation. However, the pointing ability of the touchscreen is vastly inferior to the precision of the mouse or trackpad. A user is unable to discern what’s obstructed from view by their finger, and trying hit a small button requires zooming in on the display.
Input: The Phone
The phone pretty much shares everything in common with the tablet, only in a much smaller form factor with a much smaller display.
Keep your fonts and input items of a respectable size. Gone are the days of 15″ monitors – and needing to cram as much as possible into a small space. Don’t go below a size 12 font for any reason, and it’s probably safe to say that 14 or 16 is perfect all around. Better yet, adjust the typography to accommodate the width of the window (try resizing the window of this site) to ensure an optimal experience across all platforms.
Putting it into Practice
Knowing that the way people are interacting with the web is changing, how do we design for this shift?
We design for their fingers of course!
We can borrow a lot from existing touchscreen interface design, elements need to be large enough to be easily selected by a digit, and likewise we need to look at elements as binary, action or inaction. For instance, a hover state is very difficult to achieve on a touch screen, so cascading menus aren’t going to work well. Likewise, tool tips and other hover feedback are going to be lost on the user.
While it’s nice to be able to create a mobile version of a site, this isn’t always necessary. For one, iPads are large enough to accommodate most 960px width layouts comfortably, and secondly, most mobile phone surfers are already used to panning and zooming as necessary to navigate a traditional site. If you’re site is text-content heavy, it’s probably worthwhile to have a liquid width layout to facilitate ease of reading, but for most sites (at this point) the cost doesn’t justify the result.
