Our blog | equimedia

5 examples of tablet and iPad influenced website design

Written by Ryan | 13-Jun-2012 11:05:30

At a time when I'm often still frustrated by mobile sites being displayed by default on a tablet - check out www.waterstones.co.uk or www.eurostar.co.uk on your tablet/iPad – I'm always pleased to see plenty of other sites who don't make this mistake.

Even better is finding websites who have clearly taken the influence of a tablets/iPads experience and adapted their web design accordingly. Bigger buttons, bigger content, simple navigation etc….. nothing new when it comes to good web design, but maybe having a tablet user experience at front of mind just really helps ensure these principles are carried through.

Other elements, such as left hand navigation & large scrollable panels aren't necessarily standard web practice, but there are plenty of websites showing how well these can work for desk top experiences as well as tablets.

Furthermore, to a large degree, we no longer need to concern ourselves with "below the fold". There are plenty of sites now who, following on from the influence of "blog design", are confident in having long scrolling pages. They know users are now much more comfortable moving down a page to absorb content. There is a great opinion piece on the Venture Beat website from Elliot Jay Stocks stressing this point.

Responsive web design (where websites are built so their design and layout change according to the screen size and orientation) will surely become more and more commonplace – many of the sites below are also "responsive" – but for the purposes of this post, we wanted to focus on how tablets are influencing desktop designs.

Below there are 5 examples of websites who appear to have been strongly influenced by tablets; the experience on a tablet is great, but take a look at these sites on a desktop. It works just as well, if not better, largely because the "tablet design" approach helps them deliver a desktop website which, in our view, achieves many best practice web design principles.

Website: www.dennys.com
Feature: Large content and scrolling panels.
Benefit: Key messages are clear and immediately visible. Navigation is very simple. No clutter!

Website: www.fork-cms.com
Feature: Huge main message, simple image and call to action.
Benefit: You can immediately see what Fork do & what they want you to do, but you can also quickly and easily access more information.

Website: www.amazon.co.uk
Feature: Larger search box, less clutter and large clickable product panels.
Benefit: Not only are products easier to get to, but it's easier to get to the wish list and shopping basket since this launched late in 2011.

Website: www.bbc.co.uk/news
Feature: Large clickable headers, long scrolling page & lots of content laid out well.
Benefit: There is a huge amount of content organised in a way that is easy to prioritise and digest.

Website: www.shoplocket.com
Feature: Incredibly visual design with very limited content and a single call to action.
Benefit: The bright design and simple navigation make the user experience pleasant and efficient.