Size Matters!
Too many newcomers to web design fail to allow for the fact that they are about to create a related set of electronic documents. Often previous experience is limited to producing single printed documents. Coming to terms with the implications of this is key if an easy to maintain site is to be developed. There are two key factors in making this change.
This page covers two aspects of text size, that need to be considered before fixing on a design for your site.
Related to this topic is the need for Stylesheets that apply common styling rules to all the pages that comprise the entire site.
Thinking Print is wrong!
There appear to be many "professional" web designers who have transferred from graphic design in the print industry. Too many just haven't made the necessary switch of approach and fail to realise the prime difference between design for paper documents and design for digital media.
When producing a printed document, you have total control. You determine the the size and quality of the paper to be used, the font, layout, colour. Everything about the end product. When designing for the web you have NONE of that. You can't even be sure that someone will see your document. They may well only listen to it!
Some web designers are so obsessed with their print roots that they go to the extremes of inserting Javascript to determine what browser agent is being used to browse their site so they can deliver a different version of their page to ensure that it looks as they intended. This approach misses the whole point of producing electronic documents.
THE fundamental is that it is for the recipient to determine how the document is presented, not the originator. "Over design" is one of the major flaws of many web sites. Of course, you can't entirely blame the web designer. Often it will be an ignorant client, with a print mentality, that insists on consistent visual delivery - but for me it is so very wrong!
Concentrate on the content. Don't worry too much about presentation. That is for the recipient to concern themselves with. In particular, do not fall into the trap of designing something that looks good on your screen. It's almost certain that no one else will view the site in quite the same conditions circumstances as you.
Image and Text Size
When sketching out your first site you will discover that images and text will appear to stretch to fill a particular area in different ways. This is a result of the way they are stored in the computer's memory.
Images are made up of a series of coloured dots, known as pixels. When displayed in the browser window they need to be displayed at their native resolution for best effect. Some screens have more pixels in them than others even if they are the same physical size. More pixels mean a sharper image, but it also means that images will display smaller on them. Each pixel is encoded as a stream of 1 and 0s, typically twenty four, eight for each of the three primary colours, red green and blue.
Text is typically encoded using ASCII (American Standard Code for Information Interchange) i.e. each letter, or character, gets turned into a stream of just eight 1 and 0s. The effect is that all the text on this page needs only a third of the storage space, and download time, required by the small graphic displayed in the top right corner of this page.
An ASCII character is displayed at whatever resolution/magnification the software rendering it determines. Normally, an ascii character is assigned to a font and the design of that font determines its width for any given height. Software that allows you to stretch lettering, has, in reality, stopped displaying letters and has converted them to images and is displaying those images. If that is what you want, you can do that within your web design, but generally with disastrous results for readability, and acceptability for those using aural browsers, screen readers, etc.
It is true that HTML does allow a browser to render an image so that a single pixel can be displayed in the space occupied by more or less pixels than the image file contains. However, most browsers are very poor at doing the necessary calculation to do this rendering well. It takes a lot of calculation and most people won't wait around while a browser the job, so browsers are not made to do it well. With very few exceptions, therefore, you should always have your images displayed "actual size", and it is down to you to prepare them so that they are the right size to be displayed on your screen, with no recalculation needed.
Page updated: 16 October 2008