Blog

Designing for Touch Screen

Now, this post was supposed to go out about two weeks ago, and since then it seems that every designer under the sun has written on the same subject – That’ll teach us for being lazy. Nonetheless, we decided to publish it anyway, just in case anyone missed any of the other great posts out there…

By now you should all have heard of the iPad, and if not then you must have been living under a rock for the last few months! Touch screen devices are here to stay and you need to start thinking about how to design and develop to get the most out of them. Apple would like you to believe that the iPad is the only touch screen device that anyone should own (and to be honest it probably is the best), but there are already some strong competitors, and many more coming to the market this year. So, you need to get your thinking caps on and start designing your websites to work with them, as well as updating your other sites, too. There are a lot of things to consider… here are just a few.


1. No CSS hover

CSS hover states (such as a:hover) are not supported. Now, a designer should never rely on a hover state to communicate a link, they should be clearly defined, different to body copy and be relied upon purely as a feedback mechanism – To put it simply, your websites should be completely navigable and user-friendly without hover states even coming into it.

However, this can cause a few problems, especially concerning drop-down menus – which is quite a major issue for many websites. Personally I’m not a big fan of drop-down menus anyway. Many rely on Javascript, which is an accessibility issue, and they are a bit of a dated way to navigate now. Saying that, many websites use them well and I can definitely see their use in allowing the user to quickly jump between sub-pages. A great example of one of these sites is Ebuyer.com, which uses a CSS only drop-down menu accompanied by a static sub-menu once you land on the category overview page. This is great for touch devices because if, for example, you click the ‘Components’ link on your iPad (and the drop down menu doesn’t work because you can’t hover over it), then the sub-menu is still displayed on the left and the user can easily find what they are after.

Alternatively, for a drop-down menu to be obvious on a touch device (because you can tap-to-open some of them) there must be a link / button to indicate that the menu expands, such as a small arrow. This is especially important if you have a mix of drop down and non-drop down links in your navigation.

2. 1024 x 768

It’s not dead and it’s making a come back! Well, maybe not a come back, but smaller screens are definitely becoming more popular seeing as though you can’t really hold a 24″ screen in your hand… The length of the page is not important (and I’m not starting a fold debate), but the width definitely is. Many sites I view on my iPad are right up to the edge and look uncomfortably tight fitted. I always try and use the 960 grid system which allows for just enough margin on the left and right for any design to sit perfectly on a 1024 screen. If you want to keep up with the times though, you’ll be starting to build flexible, liquid layout websites which utilise the latest advances in CSS3 :)

3. Fat fingers

A finger is less accurate then a mouse pointer, and, although touch screen technology is pretty damn accurate, spacing out your links and items a little more wouldn’t go amiss to help users when browsing. White space always aids a design (when used effectively) and there’s no need to squash it all up!

4. Right Handed

The (unwritten) standard is for sub-menus to be on the left hand side of a web page. However, most people are right handed and so when they hold a touch device they have to lean right across the page to choose their desired link. Because of this you should start thinking about using browser detection to switch the menu from one side to the other depending on whether a user is on a touch device or not, as well as tweaking other parts of the layout like increasing font sizes and image resolutions (enter stage right – iPhone4 Retina Display).

5. iPad Rotation CSS

The iPad, just like the iPhone has rotation detection and I’m sure new devices coming to the market will do too. You can use some simple meta tags and some cool CSS to change the styles of the page depending on the rotation of screen. Check out this tutorial by Matthew Taylor.

6. No Flash … Yes HTML5

The iPad doesn’t support Flash for various reasons, instead opting to use HTML5, which is a massive step forwards - even IE9 is going to have support! So, if you want videos to work on the iPad, and run smoothly on other touch screen devices I would recommend using the HTML5 <video> tag. For everything else like banners and other animated media then jQuery is great as it runs relatively smoothly on most mobile / touch browsers.

The web shouldn’t change at the drop of a hat for the iPad, but as a web designer / developer you should support all new devices – especially the most popular ones. We’ve put up with IE6 for all these years, so simply putting a little more thought, and a tad more code into your websites shouldn’t be a problem. It’s the future, and it’s easy.

By Chris Kemm