Website design catering for touchscreens

[PAH]

I noticed the other day that the Radio Times website has been updated to a design that I feel is what they would expect the site to look like if it was an iPad app. Particularly the TV listings section.

If tablets and smartphones with touchscreens are now the norm is there a market for upgrading existing websites to be more user friendly for these devices rather than catering predominantly for the mouse/keyboard?

Could this be a golden age for web designers/developers with a view to getting those HTML5 skills up to speed and offering site upgrades 'ready for iPad'?

Maybe it's not quite as obvious a market ripe for cashing into as the 'millenium bug', but it could have more legs.

[scooterscot]

Available themes in Rapidweaver have been compatible for iPad for the last couple of years now.

In fact the website my business uses detects the platform used before making the appropriate interface available. All done using rapid weaver. I know nothing about html or css or any other fancy acronym.

[PAH]

Had a quick look around and there are a few blogs/sites offering design guidelines for building sites that offer a user experience suitable for touch screens.

Minimum sizes for buttons, white space around navigation options, not relying on mouse hover for functionality (menus etc) seem to be the starting point. Designing more for fat fingers than small mouses.

Then you've got to cater for people wanting to navigate between pages by brushing a finger across the screen and all the other Apple interface style navigation.

Not sure (yet) how much of that is available 'out of the box' using current HTML5/CSS3 standards without having to resort to jQuery type libraries.

[d000hg]

I think making a website display AND accept input on a touch device is pretty essential - but that doesn't mean HTML5... that isn't widely enough supported yet. Although it is very weird how the tables have turned - mobile devices are pushing HTML5 whereas only recently they had totally horrific browsers which made IE6 look great.

[PAH]

HTML5 is leading us all to the promised land.

No more hacking stuff about trying to get it working consistently on a multitude of browsers and devices.

No more false dawn plug-ins that get sucked up by the desperate and spat out by the righteous.

One world. One god. One internet standard. Amen.

[NickFitz]

Google around for "responsive design".

As for HTML5 (and CSS3, which is often lumped under the same label) being "not widely supported" - it's supported on Firefox, Safari, Chrome, Opera and IE9. In fact, the IE Team have stated that "We built IE9 from the ground up for HTML5".

By judicious use of HTML, CSS and JS one can easily implement sites that provide reasonable fallback presentation for those stuck with ten-year-old garbage like IE6/7/8 (7 and 8 were just patch releases of IE6 if truth be told) whilst providing a first-class experience for the majority using other browsers (including IE9).

Mind you, if your target market is China and/or South Korea, all this goes out of the window: IE6 still rules there

[PAH]

Thanks. Something to read up on, on a typical miserable bank holiday weekend.

I remember reading a book on web UI some years ago and it basically took a few hundred pages to say "just copy Amazon", as they (and many other big successful sites) spend lots of money and effort getting their site design right.

Maybe the bigger sites (Amazon, YouTube, Google) will become more obviously touch control oriented if tablets continue to be desirable. Or maybe they already are but have done it subtly enough to not alienate the majority who still browse using mouse and keyboard.

I've seen some interesting HTML5 designs but not sure if they are going the same way as Flash sites, more about presentation than content. It's easy to get carried away with all the pizazz when something as simple as Google shows it's not really necessary.

[NickFitz]

I remember reading a book on web UI some years ago and it basically took a few hundred pages to say "just copy Amazon", as they (and many other big successful sites) spend lots of money and effort getting their site design right.

These days, the advice tends to be more "Whatever you do, don't copy Amazon"

Amazon can get away with all kinds of crap, simply because they're Amazon and people are going to spend their money there anyway.

[d000hg]

those stuck with ten-year-old garbage like IE6/7/8 (7 and 8 were just patch releases of IE6 if truth be told) whilst providing a first-class experience for the majority using other browsers (including IE9).

For someone so technically savvy you do sometimes spout idealistic rubbish Nick. For a startk, XP will never progress beyond IE8 and XP is still massive in the business world. So suggesting only those stuck in the past have not bothered to upgrade to IE9 isn't really useful - if your site targets businesses then IE8 has to be a prime consideration, not a fallback.

IE7 is going fast on the heels of IE6 but IE8 is here to stay, personally I think it's hugely better than IE6 but that's kind of besides the point. In the real world it doesn't matter if FF, Chrome and Safari support HTML5, IE8 can't be a 2nd thought for those who sell to businesses.

A more serious technical question - if your site targets XP/IE8 users, is it worth doing a fancy HTML5 page and all the work to make a GOOD fall-back, or better just to focus on a well-designed HTML4 site?

[doodab]

Maybe the bigger sites (Amazon, YouTube, Google) will become more obviously touch control oriented if tablets continue to be desirable. Or maybe they already are but have done it subtly enough to not alienate the majority who still browse using mouse and keyboard.

They all offer apps optimised for the touch screen experience, as do ebay & imdb and lots of others. I doubt many people visit the sites directly from their smartphone or ipad browser.