Go to TopSize 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 software designed to produce printed documents.

Coming to terms with the implications of this is key, if an easy to maintain site is to be developed.

When producing a printed document, you have total control. You determine the the size and quality of the paper to be used, the font, the layout, the 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!

Go to TopThinking 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.

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. To attempt to "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 that is so misguided!

Concentrate on the content and navigation. Don't worry too much about presentation. That is for the recipient to concern themselves with.

Go to TopText 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.

Text is typically encoded using ASCII (American Standard Code for Information Interchange) or some variant of it, in which each letter, or character, gets turned into a stream of just eight 1 and 0s. One effect of this 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.

Text is displayed at whatever size/magnification the software rendering it determines. As a web designer you'll find that when a character is assigned to a font, the design of that font determines its width for any given height. Change the font, and text will wrap onto the next line at different points. Your visitor may also do any of the following in their browser to upset your carefully crafted design:

  • Magnify/Shrink the text
  • Zoom the page
  • Change the browser's default fonts
  • Not have the fonts installed that your page requires
  • Set a personal stylesheet to over-ride yours
  • Turn off all styling
  • Use a screen reader so size becomes irrelevant

The result of all this is that trying to be over precise about such behaviour is largely a waste of time.

Go to TopImage Size

Computer screens, like televisions, display images as coloured dots, known as pixels. The colour of each pixel is achieved by sending a stream of 1 and 0s, typically twenty four, eight for each of the three primary colours, red green and blue. This method allows over 65 million different colours to be displayed.

Modern flat screens have a fixed number of pixels. Some models have more than others even if they are the same physical size. More pixels in a given space mean higher resolution and a sharper image but, as any image file contains a predetermnined number of pixels, it means that images will display smaller on screens with a higher resolution.

While HTML does allow a browser to render an image larger or smaller than its native size, browsers do this very poorly. It takes a lot of calculation to do the job well and, as most people won't wait around for images to be adjusted and displayed, browsers are not made to do it well.

In summary, for best effect, you should always prepare images for your site in files that will display at their native resolution, or "actual size" as KompoZer has it, so that they are the right size to be displayed with no recalculation needed. The convention is to place all the image files in a dedicated images folder, a subfolder of that where the pages themselves are stored.

As a post script, it's worth pointing out that a visitor can still play with your hard work in creating a pixel perfect design and:

  • Zoom the page
  • Turn off the display of images

so again, trying to be over precise in your design is largely a waste of time.

Go to TopSummary

Do not concern yourself with pixel perfect positioning of your page's content. Designing something that looks ideal on your screen will almost certainly not look the same on a different size or resolution of monitor, different browser, or different window size. No one will view your site in quite the same conditions or circumstances as you.

Test your page with your browser's window both maximised and restored to a range of different sizes. Also check appearance with the text magnified and shrunk In KompoZer, the keystrokes CTRL-+ and CTRL-- will do this. CTRL-0 will reset magnification to the default. Expect to see some corruption of the planned appearance. Only consider changing the way your page is coded if it is rendered unusable, not if it is merely "untidy".

NOTE: In recent versions of Firefox and Internet Explorer, the keystrokes CTRL-+ and CTRL-- will normally zoom a page. However, in Firefox there is an option to "Zoom text only". Internet Explorer has a separate "Text Size" control.

Go to Top Page updated: 9 July 2010