No, not spam, for a change, but the problem of designing for a world where your website could be viewed on anything from an iPhone or Nokia N95 (tiny screens, no Flash) through to a Playstation 3 or Wii connected to 40″ or larger TV screens.
They all have different resolutions, colour rendering (view the pictures below), interfaces, and so on.
Let’s take a look at this picture:
In the picture, you have three things connected to the internet, all wirelessly, running three different browsers and on different resolutions.
I’m now going to be quite geeky and go through the different displays and browsers involved…
LG 26″ LCD TV, Opera Browser on a Nintendo Wii
Now, sadly the Wii isn’t known for its high res capabilities. It runs at This means that the best it can do with most websites can be described as ‘passable’. The browsing experience isn’t actually too bad once you’ve got your favourites in. Funnily enough, the requirements for good design on this setup are remarkably similar to the little iPhone hiding beneath it – because of both the low resolution (a Wii, I believe, outputs at 854×480) and the clumsy control systems on both. You need big, easy to click links, clear design, and no Flash.
The screen is 56.5cm by 34cm giving an area of 1921 cm2 and 409920 viewable pixels.
Laptop 14″ Widescreen, Running XP and Firefox
Now this is a more conventional screen resolution. 1280×768. The dpi is conventional (I’m guessing about 96dpi off the top of my head) and the OS, browser and CPU all are up to the job. Most people should get it right for this sort of system, but it’s worth bearing in mind a few things… you can see that it’s nothing like as bright or white as the other two displays in the image. Yep, you got it – all screens render colours differently. That means you have to pick your colours carefully. We had a burnt orange on a website that a client insisted on once. It looked like an insipid green/orange on a cheap old Dell screen.
So not only do we have to think about all the different sizes, we have colours to worry about too! For our own designs we check on a number of screens to make sure colours don’t go weird. Some will, some won’t, and it’s hard to predict.
The screen is 30.5cm by 18.5cm giving an area of 564 cm2 and 983040 viewable pixels.
iPhone, Running Safari
The iPhone is the current geek status symbol mobile phone. I got mine as a Xmas present and in terms of web browsing it’s really moved the game forward. As a phone it’s a bit sucky compared to more phone like mobiles (if you see what I mean) – no voice dialing and ropey bluetooth support means that making phone calls as I drive is no longer a safe game – I can’t simply prod the bluetooth button on the dashboard, say the name of the person I wish to speak to, and continue. But I’m going off on a tangent.
By bringing us a very neat and portable web solution, the iPhone and iPod Touch have made surfing the net while waiting at a train station, or sitting in the garden a far easier proposition. And they’ve sold millions of them so far. And you can be anything that people owning them are visiting your website. And if your site is hard for them to use, they’ll get their kicks elsewhere and maybe, just maybe, be drawn to a rival’s website. You wouldn’t want that would you?
The screen is 7.5cm by 5cm giving an area of 37.5 cm2 and 153600 viewable pixels.
Right, So They’re Different…Tell Me Something New!
Now ok, that’s shown they’re different – quite markedly so. And what does that mean? Well it means that if you want your website to work with all browsers, you’re going to have to take a good, long hard look at what you’re offering to those different users.
An iPhone user is possibly on the move, trying to poke links on a moving bus. A Wii user is shakily pointing their remote at a screen that may well be larger than the owner. A laptop owner has a nice, precise mouse. A desktop PC of course could be a different proposition. A friend of mine uses a simply vast 30″ monitor for doing artwork – his browsing experience is vastly different.
And consider this: the screen area of a 26″ TV is 51 times larger than an iPhone, and the resolution of a laptop screen is way higher than most other things. I saw one laptop with a 1920×1200 screen recently and the dpi was ridiculously dense (if slightly gorgeous for picture viewing!) – that means they may have larger fonts. What’s your design going to do with that?
Ten years ago screens ranged, mostly, from around 640×480 to 1280×1024. Anything outside of that scope was rare or had a very limited browser.
My point then is that if we’re going to service the needs of the now widely varied viewers, we have to make some hard decisions. Fluid design isn’t the answer – reading a 20″ long line of text on a big monitor is horrible. Perhaps larger sites, with more money, could serve up different versions of their content, designed for different screens. BBC does that, with designs for tiny WAP mobile phones, PDAs and full browsers. Our sites have a mobile css for small screen mobile phones, though it doesn’t detect all of them. It just serves a cut down text only version of the site.
The web industry is starting to get hard, both businesses and designers need to know this. I believe that their current practices could leave them only servicing 40% of potential visitors in the near future. And that simply won’t do.
A Liverpool Web Designer 