It's been quite a while since the first tablet or mobile device appeared with the new functionality of being able to rotate, flipping your view seamlessly from portrait to landscape mode.
It’s an amazingly useful feature, and one that surely caters for any website or app design, but begs the question: how can we design to take full advantage of our new flexible canvas?
I’ve heard that you are supposed to view the tablet in portrait mode so it feels more like the proportions of a book or newspaper rather than a laptop, but this doesn’t work for me. In my opinion it's personal preference how you choose to orientate your tablet or mobile phone. I use two devices: an iPad and an iPhone. With the iPad I find it more useful in landscape, but the iPhone (which feels like a smaller version of the iPad), I prefer to hold in portrait mode.
The best way to take advantage of the flexible canvas is to build an app in which you can reconfigure the layout depending on orientation. Take the BBC news app for example. In landscape mode the news headlines appear on the left-hand side leaving a large viewing pane to the right for the article you are reading. Tilt your device and the headlines shift to the top leaving a large viewing pane now at the bottom. Notice that the size of the body text remains the same.
But without going to the effort of designing bespoke mobile or tablet versions of websites what can we do to make the experience for users more pleasant?
Text size
The most obvious thing to do is to enlarge the text size. Type can get pretty small when viewed on a smartphone in portrait mode. Yes viewers can zoom in but I think it's more helpful to try and make the text bigger – to read at a glance. One of the main problems I see is cramming text into narrow columns, meaning it becomes virtually illegible. An example of this can be seen on the Sky Sports News homepage:
The red highlight shows how small things can get.
Don't cram too much in
Most websites are governed by a fixed width of about 960 pixels. If we enlarged this width we'd be out of the safe viewable area for many computer monitors. I've never been a fan of flexible or stretchy layouts because it goes against my typographic principles – I like to constrain the text by a character limit (52-78 characters, including spaces) known as “the measure”, this enables readers to skip from line to line more easily. However, phones and tablets tend to benefit from a stretchy layout.
Also tablet and smart phone users know how to scroll — so try not to be tempted to cram too much above the fold and let the page breathe.
Watch out for rollovers
On touchscreens, because you don’t have a mouse pointer rollovers, don't work so make sure that any roll over effects are not essential for basic navigation.
Make links more clickable and make buttons easier to press.
It can be tricky using the touchscreen so larger custom dropdowns, form fields and larger buttons are more advantageous.
Be careful when using Flash
Flash isn't supported on some devices so try and make sure there is a fallback option.
Lose the third column
This is quite controversial as a third column containing contextual links is pretty much a standard convention with most websites these days. But, by removing it you get much more screen real estate available for the meaty content — the challenge is to include the contextual stuff elsewhere, either through clever information architecture or by including it in the main body of the page.
The main navigation
One of the hardest things I find when using a mobile phone to search the internet is using the main navigation of many websites. Apart from having a mobile version of the website, probably the best thing to do is to restrict the main nav to about 5 items, make it a lot bigger and avoid flyouts.
Colour contrast
Make sure there is adequate colour contrast. This should be checked on all websites anyway but be aware that with mobile phone and tablet devices many people keep brightness and contrast low to save battery.
That’s it. Please let me know if you can think of anything else to add to the list.