intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles



Web pages are viewed on screens. Screen sizes can vary from several metres across down to a couple of mobile phone centimetres. Normal measurements won't work. You need pixels.

A common screen size is 1024 pixels wide. The really big screens just have bigger pixels and the smaller ones have smaller ones and the very small a lot less.

The smallest screen size these days is 800 pixels wide. Getting rarer but we still need to make pages that will look right on them. So we need some way to limit the width of a page to less than 800. Allowing for browser edges and scroll bars, pages really need to be less than 780 pixels wide. Except on very small screens, therefore, visitors will not have to scroll horizontally. That is regarded as poor design. Vertical scrolling, simple with modern mice, laptop panels and browser technology is acceptable, although it is a good idea to try and ensure that important content, especially navigation, is visible on a typical screen without any scrolling and there is a lot to be said for a home page that shows in its entirety.


The other measurement offered by most programs is a percentage. This is unlikely to be suitable for a page width as it will result in pages that appear differently on different screens, with widescreen displays tending to stretch content in a bizarre way.

Where percentage measurements can be used is in setting the height of a page. The peripheral tool bars and space occupied by the task bar at the bottom of a display can vary considerably between users, even with the same browser, making a exact number of pixels difficult to guess. A height setting of, say, 90%, however will present a page (content permitting) that fills a monitor quite reasonably, with things that you want near the bottom being near the bottom and not running across the middle of a screen.

You will also find percentages a useful way to avoid making calculations when dividing a page into sections. For two columns, for example, in a 770 pixel wide page, a width of 50% is simpler than working out a pixel width which will need to take account of things like the space between columns and maybe borders. (1/2 of 770 will seldom achieve what you want!)