The purpose of this article is to point out some of the differences between designing for print and designing for the Web, and to try to explain why there are these differences and why you should not lose sleep over them. It is aimed at clients and designers with a print media background who perceive the Web as a new kind of paper; and are disappointed when they try to apply ideas that work very well in the print media but are totally inappropriate for the Internet.
The basic 'language' of Web pages is HTML (HyperText Markup Language or How This Might Look), and it was designed so that it could display in an appropriate way on a range of devices and platforms. It was never intended to be any kind of substitute for the sophistication of DTP and page-layout software, and there is no real reason why it should ever be - remember, the Internet is a growing medium that can deliver web pages not only to your desktop computer, but also to your television, your mobile phone, your PDA, your fridge, and numerous other devices. In short, the Internet has to be flexible, adaptable, and able to cope with an unpredictable range of delivery devices. You have no way of knowing what kind of machine the end-user will be viewing your site with - how many colours their screen can support, how big the screen is, what the resolution of the screen is, or even if it's a screen at all - many vision-impaired people use Braille displays that convert the words on the screen into a series of raised dots on a tactile device, or screen-reading software that converts a Web page into synthesized speech.
The inherent flexibility of website design will drive you insane if you approach it as, say, something similar to designing a printed brochure. When you work on a print project, you can (indeed, have to) specify a whole load of variables - the number and size of pages, the exact content of each page, the fonts, font sizes and colours, the type and weight of the paper etc. None of this applies in Web design - the only common denominator may be the actual content - the words, and the pictures.
We consider it a big mistake to try to use the Web to reproduce a printed document exactly, and to expect a page to look exactly the same in different browsers, under different operating systems, on different machines. There are formats, such as Flash and PDF that can offer a broadly similar appearance on numerous platforms, but for general-usage Web pages, we do not recommend them. They will only work if the site visitor has a plug-in - PDF on the Web is very slow, and Flash cannot be read by search engine spiders. These formats also require quite a lot of bandwidth to work effectively. If the visitor is forced to download a plug-in that they don't already have, you can expect them to wander off to some other site rather than deal with the hassle of getting and installing a plug-in. And many Internet users in corporate environments are not allowed to download anything which involves the installation of a program onto their computer.
We prefer to stick to good old HTML, and we do push it to its limits. Now, you need to know what the limits are, and what can be done about them. Things that crop up again and again are: specific fonts; specific font sizes; Pantone or other specified colours; page sizes and page breaks; erratic printing of pages; resolution of images. All of these are discussed in some detail in the next two parts of this article.
Fonts
Print designers have the luxury of being able to specify any font they like, and they know that if the repro house doesn't have a copy of that font, they can always supply it to them. On a Web site, the fonts that can be displayed are limited to those fonts that are actually installed on a visitor's machine. PCs running Microsoft Windows come with a basic range of fonts (Arial, Comic Sans, Times New Roman, Verdana). Macintosh machines have a similarly limited range of fonts installed as part of the basic operating system. (I don't think Linux/Unix boxes have any fonts.) So when a Web page specifies the font for a chunk of text to be 'Tutti-Frutti 543', the browser can only display that font if it is found on the users computer. If the font is not found, then the browser will use the 'default' font of the system in question, which is likely to be Times New Roman. There is a slight way round this in HTML - you can specify several fonts for a chunk of text, and the browser will go through the list, and use the first one it finds that is in the list and on the home computer (for example, Windows comes with a font called 'Arial' - to all intents and purposes this is the same as 'Helvetica'; on a Mac, you will not find a font called 'Arial', but you will find 'Helvetica'). So, your specification of the font for a piece of text could be <font face = "Arial, Helvetica"> and this would produce a similar result on both PCs and Macs.
At the time of writing there is no system for embedding fonts into Web pages, and we do not expect this to ever happen. Bear in mind that a font is a copyrighted piece of Intellectual Property. You are entitled to be a little bit confused, because you've seen Flash pages and PDF pages on the Web and they seem to be able to use any font they like. But what you are actually seeing in those pages is not a font at all - what it really is, is a drawing of the text on a page that follows the outlines of the font exactly. But you cannot install the font from that onto your computer (if you copy and paste text from a PDF document, you will only get the character description - if you paste it into, say, Notepad, the text will appear in whatever font you have selected as default for Notepad).
Font sizes
You're already a bit depressed because you really love Tutti-Frutti 543, and I've just told you you can't have it. Well, I'm now about to tell you you can't have it in 10pt! Actually, that's not quite true, you can actually specify point sizes in a web page. But different systems have different ideas about how big a point is. It comes down to screen resolution. We all think our monitors are pretty sharp and hi-resolution. They are not. An Apple Mac monitor has a screen resolution of 72 dots (or pixels) per inch. A typical PC monitor is 96 dpi. And 17" and upwards monitors can display 120 dpi. This all has a serious impact on how a font specified in points will look on different systems. In general, HTML uses relative sizes for fonts, something like 'smallest, smaller, normal, larger, largest', and these all take their base size from what a user may have specified in their browser. To complicate matters, Internet Explorer & Netscape evolved their own silly font sizing methods, so that now the whole issue of font sizing is a total nightmare. But the one thing to be avoided at all costs on the Web, is the use of point sizing, because it will not adapt when a user changes their base setting (as vision-impaired and people over 45 often do) - it's a fixed size, I grant you, but that fixity of size is also dependent on the screen resolution of the user.
Colour matching
OK, so I've dispelled your perceptions on fonts and their sizes, am I now going to tell you you can't specify a Pantone colour and expect an exact match? You betcha!
You're into print, so you know very well that printing uses Cyan, Magenta, Yellow and Black (CMYK) as the constituent colours. Frequently you will specify a spot colour using Pantone or some other system. You may or may not know that computer monitors use Red, Green and Blue (RGB) to produce their images. There can often be a difference during conversion. And you also need to know that individual monitors can vary greatly in the way that they display colour, depending on their age, their quality, the way their owner has set them up (brightness, contrast, etc). So the very concept of a standard rendering of anything to do with colour is virtually meaningless on the Internet.
It is possible to calibrate monitors, printers and scanners against known standards, but, quite simply, none of your site visitors will ever do that.
Page sizes & breaks
So, I've enlightened you by telling you that fonts, font sizes and colour are all somewhat, shall we say "variable" on the web. Now I'm going to dispel your illusions of what a page is!
The concept of a 'page' on the Web is a bit different to what it is in print. In a printed document, you know you've reached the end of the page because there is no more paper, but on the web, we have scroll bars, so a page can actually be infinitely longer than the screen. And even if you try to limit the 'length' of a page so that it fits on one screen, your efforts could well be thwarted because people have different screen resolutions. It is seldom a worthwhile effort.
Printing web pages
As a print designer, you are naturally appalled at what your computer's printer spits out when you print off a web page. And I can't really blame you on this point, but I should explain that Web browsers were designed for the sole purpose of displaying pages on a computer monitor - Microsoft and Netscape don't really want you to print out web pages - and web pages are not generally designed to be printed out.
It is possible to design a 'printer-friendly' page, and we have done that in recent projects and on this site, where you might prefer to spit out the entire article to your printer rather than undergo the discomfort of reading a long article on your computer when you really want to read it in the bath. Such 'printable' pages will normally be designed with black text on a white background, without the page navigation that is normal on a Web page (but useless and meaningless on a printed page). High-resolution images would be used instead of the low-resolution that are specified for an online page.
Image resolution
Another thing that gets print designers slightly animated is that on the web we do not use big high-resolution images. We want a page to download very quickly. We do not want our page to be more than about 80 kilobytes, including images. We do not need our images to have more than 96 dots to the inch (the monitor can't display more than that, so it's a waste of bandwidth if you try). Images on the web are the very antithesis of what a print designer treasures. Mr Printer likes 300 dpi images big enough to fill an A4 or bigger page.
Conclusion
When you design for print, you expect to have total control over the finished article. You specify all aspects of the job, the fonts, the images, the page size and numbers, the paper, the finishing etc.
When you design for the web, you have much less control over pretty much every aspect of the situation. Yes, you can specify fonts (but that only works if the user already has the font you specified), you can specify relative font sizes, you cannot control how the colours look on an individual system, you can build a page but you don't really know how big it is, printing the pages is hit-and-miss and so on.
Having said all that, there are occasions when we do produce a reasonable facsimile of printed material on the web. And we do it so well, taking into account the enormous range of variables mentioned above, that it may just make you think that what we have written here is not actually true at all...
Considerations when designing websites as opposed to print.
