weballey logo
left Web design - layout backnext right
homesearchsite mape-mail




< layout >
HTML tables
style sheets


      A sheet of paper will mostly be held vertical. A computer screen will have a larger width than it is high. The layout of a web page should be adapted to this. The most important information should be visible right away. If the page is longer than one screen, it should be clear to your visitor
    Some designers will advise you to limit the size of a page to a standard screen size. Studies have shown visitors are more likely to click a link. Before he will scroll to see the rest of the page.

Paper: vertical Screen: horizontal

    If the page consist mainly of text, the text should be about 10 to 12 words wide. More or less will make reading it uncomfortable. Longer lines will make it hard to go from the end of a line to the beginning of the next. Your eyes will sometimes go to the beginning of the same line you just read. You may also skip a line, thus missing part of the text.
    Shorter lines tend to spread a sentence over too many lines. The words loose their connection. Just write down a sentence, all words on a separate line. Show it to someone else. He'll probably have to read the sentence twice before he can understand what is written.
    You have little control on the size of the characters on a screen. Normally browsers will show a 12 point Courier type face. But a user is entirely free to set it to his own preferences. I prefer reading an 11 point Helvetica type face.
    High resolution screens will need a 14 point or even larger font size. Otherwise the text may become too small to be readable. You will have to keep in mind the smallest common screen size. You will just have to assume the user will not change the standard settings.
    To keep text readable, it should be no wider than 400 pixels on a VGA screen measuring 640x480 points. This leaves 240 points. Part of that will be taken up by the browser window and scroll bars. You should also have some margin on both sides of the text. This leaves a bar of 150 to 200 points wide to be used.
    You can fill this space in several ways. You may consider using images, titles, outlines, links, menus, or logos. A very common use of this space is a colored bar on the left side of the screen. On top a company logo, below a menu with links to related pages on the same site. This makes navigating the site very easy. The leftover space used very efficiently this way.

left Copyright © Gerben Hoekstra - All rights reserved backnext right