Paper vs. Pixels - Part 1

by Joe Gillespie — Aug 1, 2004

I've often heard the criticism of print designers that they can design only at one, fixed size, but that's not strictly true. Press ads have to be adapted for different publication and page dimensions. In packaging, designs usually have to work across a range of pack sizes.

If you have ever done any corporate identity work, you will know that a company image has to work in a great variety of situations, from a business card up to building signage. The media can vary from printed card to etched glass. So, to accuse print designs of being totally inflexible is just not fair.

The ever-changing screen

Having said that, a great many designers do tend to forget that there are many computer screen sizes out there – and some devices that aren't really computer screens at all.

Ideally, a Web page should work on any device, in any browser, at any size. Some pages must be like this by law or from a purely marketing perspective.

Yes, it's a tall order!

There aren't too many sites that do totally comply with accessibility legislation. You can put this down to aiming at a specific 'target audience', which is fair enough, or to budget constraints, and it's hard to argue with that. If it comes to simple ignorance or laziness, somebody is not doing his or her job properly.

Statistics

There’s no totally up to date and reliable research on what screen sizes people are using across the Web but TheCounter.com gives monthly figures based upon their server logs which show that about half of their readers use a screen resolution of 1024 x 768 – nominally a 17" screen. Another 35-40% use 800 x 600 - which suggests a 15" screen. That means that something like 10-15% are using larger or smaller screens – the larger being more dominant. Usage of the old 640 x 480 (12") screen has dropped to around 1% but now there are new devices like PDAs and Web-enabled cellphones with screen resolution of only half of that. That's a huge variation!

Then, the area of screens that can actually be used for Web page content is quite a bit less than the overall resolution. When you take the toolbars along the top into consideration, and any tab bars or scroll bars in a horizontal direction, you see that even maximised, you don't have all that much room left to play with. The page is almost certainly going to need to scroll in one, if not both directions to see all the content on smaller screens. Having to scroll in two directions is a big turn-off and should be avoided.

The potential problem here is that ‘designers’ tend to have larger and better monitors than general surfers. 19", 21" or even larger screens are not uncommon in design studios. It is very easy to be lulled into a false sense of security and to think that there’s plenty of room for that nicely, squared-up page element placed judiciously just above centre like a picture in a frame. Unfortunately, this kind of design fails miserably and it happens because the designer just won't accept that anyone of any significance uses an 800 x 600 screen with all the toolbars and tab bars in place.

They do!

This is very much a case of 'styling' getting in the way of 'design'. When it is pointed out to them, designers who do this generally see the errors of their ways but they could have saved themselves a lot of heartaches had they 'designed for the medium' from the beginning.

Print designs should not be 'forced' upon a Web page and print design software should not be repurposed for the Web despite the makers' claims to the contrary.

Use the right tools for the job.

Judging a design on your own screen

When you look at a print design on your screen, you don't take what you see literally. It is a 'preview'. You know that the printed job will look quite different and with a little experience, will be able to compensate in your mind's eye so that you can make a reasonable 'guesstimate' when you are making colour decisions and adjustments.

When you view a Web page on your own monitor, that is just a preview too. Unlike the print job, where there is one 'ideal' final result, the Web page will have a great many 'final results'. You will be totally oblivious of many of these and quite unprepared for the variations.

So, it is essential to check your pages on as many screens as possible – but especially on small screens. There must be an old one lying around unused somewhere. Hook it up! Use it! Wear blinkers!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float