The Web is Not Print

There are a number of ways in which web pages differ from printed pages and one huge mistake that some people make is in trying to recreate printed pages on the web.

Actually it is possible to create pages on the web that work exactly the same way as printed pages do but to do that you do not create actual web pages. Instead, if you really do need to make your pages on the web work exactly the same way that they would as print pages then you need to create them as PDFs instead of as web pages. Only by doing it that way can you ensure that the page will look the same for everyone.

There are a number of ways in which web pages differ significantly from printed pages.

Firstly you cannot tell what fonts that will be used to view your content. The fonts used to display a web page are those on the computer being used to display the web page, not the computer being used to create the web page, and so if you choose a less common font the chances become greater that people viewing the page will see the content in a different font. You can work around this somewhat by providing a list of fonts so as to control which fonts might be used and specifying preferences but the final display font depends on what is on their computer. There are ways to "embed" a font into your stylesheet but to start with you can only do that if the font is in the public domain or you have distribution rights to the font, and secondly it doesn't work for all browsers and requires a slightly different version of the command and different versions of the font to work across more browsers. There is also the possibility that attempting to embed a font may break your font list for some browsers that don't support it leaving you with less control of what font gets used.

You cannot control the font at all really because your visitors can always add a stylesheet to their browser specifying that all web pages should be displayed using their preferred font.

Similarly you can't control the size at which your text appears. Some browsers automatically zoom the web page to better fit in the browser viewport which could result in your text ending up huge or perhaps too small to read. In most browsers they can also choose to zoom the page in or out until the page size suits them. Your visitors can also resize the text on the web page independently of the rest of the page so that if zooming the page to make the page big enough to read would also make it way too wide, they can instead just make the text bigger while leaving the rest of the page content alone. This will totally rearrange the way your page looks and make a total mess of your page if you haven't allowed for it.

Just about everything that you specify in your stylesheet as to how the page should look are suggestions that can be overridden by visitors to your page who prefer to use their own settings.

The appearance of your page can also differ slightly between browsers and since any one of your visitors wil most likely only see the page in one browser these minor differences do not matter at all unless it results in the page looking wrong in one browser. For example in determining widths specified as percentages (the sensible way to specify widths given that some of your visitors will have a viewport 200 pixels wide and some will have a viewport 2200 pixels wide) the percentages need to be rounded to an exact number of pixels. Some browsers may round up and some may round down resulting in a border being offset by one pixel in some browsers at some viewport widths as compared to other browsers. This doesn't matter at all as long as everything in the web page still appears to be lined up. There is nothing that you can do to get pixel perfect matches across all browsers with regard to where the borders on your blocks of content are and they will be impacted whenever your visitor resizes either their browser or the font size of your content in any case.

Your goal in laying out your web page shouldn't be a pixel perfect match to a printed page since you cannot achieve that no matter what you do. All you need is for your visitor to change any one thing in the way they want to see your page and your pixel perfect layout is immediately broken even if you did somehow manage to get the page looking the same across all browsers. The goal that you should have in creating your page layout is to create something that will still look right in different viewports sizes and whth the font size changed significantly from what you specify. Only by designing flexibility into your page layout can you ensure that it will look good for the majority of your audience.

Part of a web designer's job is to educate those people that they are creating web pages for in the importance of flexibility and looking reasonable rather than attempting to create pixel perfect designs thatcan be easily broken. If they show you what appears to be a pixel perfect design in their browser then show them how that design can easily be turned into a jumbled mess just by changing a few browser settings. Explain to them that different people have their browser configured differently and that what looks perfect with one lot of settings may be a jumbled mess if it isn't properly designed to be flexible. Often just resizing their viewport, zooming the page, or enlarging font sizes will be sufficient to demonstrate what you are talking about.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow