A guide to web design for print designers
At Karova we do a lot of design direct with our clients, but sometimes we also build websites from a pre-supplied design. Almost every time we do this the design for the website has come from a clients existing print design house. This is a good move from the client perspective because the print house are often the people who came up with the brand in the first place. They are in a good position to supply a web design that fits perfectly with existing printed material. Unfortunately there are often issues with the designs supplied by print houses, so we often liaise with them in order to achieve a design solution that works well for everyone.
This article aims to provide a basic guide for print designers who have little or no experience in web design.
Document sizes
Print designers are used to thinking in terms of paper sizes and physical measures (mm or inches). The first thing to consider, even before laying down guides or block-outs, is what size stock the end product is going to be printed on. This knowledge will effect every aspect of the design. Similarly, the same is true for the web, but often print designers don’t think of it, or misunderstand how size applies to the web.
The web has no physical measurement, mm and inches are meaningless on screen. The only unit that can be relied upon at all is the pixel. Traditionally monitors have a native dpi, but this is in no way accurate and can not be trusted to work out correctly. Websites exist on a theoretical 72dpi resolution, but that does not mean that 72 pixels constitute one inch of the screen. This is best illustrated by considering the difference between a laptop and a desktop monitor. Laptop monitors are often much smaller physically, but can have the same number of pixels. For example, my desktop monitor is 24″ diagonally, and has 1920 pixels in width. But, a 15″ laptop can also have 1920 pixels in width. Consequently, everything is a lot smaller on the laptop, as 72 laptop pixels don’t get close to one inch of actual monitor. The same variation happens on every monitor - nothing is consistent, and that is why we can not use physical measures when designing for the web. It’s also why designing with tiny fonts is a bad idea.
Additionally we have to consider what the average user actually has in terms of screen size (measured in pixels for the reasons given above). Print designers can be certain that when they design for A3, everyone will see it at A3, because paper is a physical medium. The web is not, and the end output size and quality is not known. What we often find is print designers supply work at too high a resolution. It can be thought of as having designed something for A3 output, but then discovering it has to be printed on A4. Suddenly everything that was readable and neat becomes tiny and impractical. Sometimes the scaling is actually impossible (there’s no way to scale many form elements in Safari, for example)
As a rule, the smallest screen anyone will use is 800px wide. But, we need to allow for the edges of the browser, and the scroll bar - this can be thought of as being similar to bleed in printing. This means that the actual width available for the design is 760px. So, that’s the document size. If the clients end users are likely to have a computer bought in the last four or five years, this can be changed to 960px, which allows for more design space.
Fonts / Typefaces
The web is a very sad place for typographers. Due to a long history of browser vendors in-fighting, and type foundries licensing fears, fonts on the web are extremely limited. Any font being used needs to have been installed previously on the users machine. But, almost no-one is going to have “Frutiger” or whatever fancy corporate font the brand calls for. So the end user won’t see it in that font. There aren’t many fonts that can be guaranteed for all users, but the ones that are: Verdana, Arial, Helvetica (Mac only), Times New Roman, Georgia, Trebuchet (installed with Office) and monotype. That, sadly, is pretty much your entire selection.
There are tricks web designers can use to get other fonts. They are:
- Substitution with a graphic
- sIFR - a way of using Flash to replace HTML text with a dynamic flash object
Neither choice are suitable for body text, only headings. This is because of the massive overhead in using the techniques. Image replacement needs to be manually done for each instance, and Flash can run very slowly when the technique is used a lot on one page.
Typography
I said the web was a sad place for the typographer, and I didn’t mean just because of font/typeface limitations. There’s a lot missing in terms of typographic control too. CSS allows for limited options, but not all browsers support all of the CSS specification, and some of the CSS controls only apply when the document is printed, rather than on screen. There is no screen control for widows, and no soft hyphenation. No true leading. The toys you have to play with are line-hieght, letter spacing (which often looks terrible with small text), word-spacing (hardly ever useful), font-style (italic or normal), text-decoration (underline, overline, line-through, normal), and text-align (left, center, right, justified).
General design considerations
The web isn’t print. Complex layouts are often impossible (though you can do a lot with the right knowledge and imagination). Fine typographic control is often impossible. There’s also the issue of ‘the fold’. In print the whole page is seen at once, so the designer can lead the eye around an entire page. Not so with screen - the web behaves more like a broadsheet - only the very top bits are immediately visible, and the user needs to scroll down (flip the page) to see the rest - which limits design options. The web isn’t print in many ways, another thing a designer needs to allow for is font scaling. Users can set their browser to change their default font size. That over-writes anything the designer can set - so if the user’s font size is 18px rather than 12px, the design has to allow for that by providing extra space. Otherwise, the site becomes unreadable.
Conclusions
Designing for the web has a lot of complex considerations. It is in many ways rather limited when compared with print design. Print operates on a What You See Is What You Get principle - a print designer knows with certainty that what he’s designed is exactly what everyone will see. That’s not true for web, and so good web design allows for rather a lot of leeway. I’ve not even mentioned the problems that occur when cross-browser issues arise. Designing for the web is hard, much more complex than for print - where the only logistical complexity is in layout for multi-page or custom shaped media. Of course with print the stakes are a lot higher - a mistake can mean huge financial cost, but on the web it just means amending the file and that’s the problem sorted.
when designing for the web, and if you have little or no experience in the medium, it’s worth taking the following guides in mind until you have experience on when they can be ignored:
- Design in pixels, in a bitmap program like Photoshop. Don’t use Quark, don’t use vectors, don’t use any measures other than pixels, and work only in whole pixels.
- Design for a total width of 760px (or 960px if you know users will have a modern computer).
- Remember the scroll - the top of the page is important, so don’t waste it.
- Avoid complex layouts - three column is about as far as I’d suggest unless you know CSS and know how far you can push things.
- Avoid fancy fonts and anything other than basic typography. Fancy fonts may be used for headings.
- Allow breathing room. The font size you use might be bigger on the end users screen - and that overflow of text will have to go somewhere. Leave space for it.
That’s a lot of ‘don’t’. Not all of it applies if you’re familiar with web design, and building sites. But as a rough guide, you won’t go far wrong sticking to these ideas.
Good stuff about the web, that you can’t do with paper
For all of the problems jumping from print design to web design, there are also a few benefits that web offers which print doesn’t. Infinite document length is one, liquid layouts which change and adapt to the screen width are another. In-page pagination, and interactive elements. The realization that a page doesn’t mean literally a page - stuff can adapt and change.
It gets more fun the more you do it and the more experience you gain.
Entry Information
- Posted:
- Sun, 29th Jul 2007 at 16:07 UTC
- Filed under:
- Tags: