Page Layout
Remember that a Western reader will scan the page from the top-left, down to the bottom-right. Therefore, reading and text starting points should flow naturally in this direction, with the bottom-right corner reserved for your 'call to action' (CTA) - as this is where the reading will stop, and a decision needs to be made what to do next (Hint: Click on our information request or offer button!)
If there are natural decision break-points in your copy, then you should also have CTA links there as well. This enables you to capture someone's eye immediately if they're ready to move to the next stage. All CTAs should not look the same though. You could have several different graphical buttons, banners and adverts; and many different ways of asking/offering in text form. A well-designed page will have 4-5 CTA's on it, and at first-glance you wouldn't know it, as they're all integrated into the flow and context of the page, and are in different text and graphical formats.
It's generally wise to restrict pages to a maximum of 960-980 pixels wide. 1024x768 pixels is the typical minimum screen resolution these days, and you need to allow a few pixels extra for windows scrollbars and borders. Only a few percent of users are limited to the older 800 x 600 standard, and you'll find that allowing 960 pixels as your screen width will work much better with columns than trying to limit yourself to the lower resolution. You also don't want your users to have to scroll left and right - as this feels very counter-intuitive. People are used to scrolling up and down with their mouse-wheels; don't break a visitors flow by requiring them to do something out of the ordinary, as it will focus them off your 'story' and onto the mechanics of navigation - a definite sales 'no-no'! Anywhere that your site feels clumsy in this way will lose visitors.
Avoid large Adobe Flash headers which dominate 'above the fold'. Some sites have such large flash headers that you can't even see any content without scrolling down the page. This is complete indulgence on the part of the web designer - and you will lose a lot of visitors, as some won't bother to look.
Avoid using 'Under Construction' holder pages on a live site. Add pages in and integrate them as they're created. If you haven't even got the main pages created yet - then your site really isn't ready to go live. This is not to say that you shouldn't use a pre-launch announcement page or similar, that's good marketing. But don't have a bunch of pages on a live site where you click on a link expecting information, and then get greeted with the ubiquitous 'Under Construction' sign; it looks amateur, is very frustrating for the visitor, and creates an immediate feeling of the site being hurried or not ready. Many visitors will leave after seeing one of these pages.
By utilising CSS, you can define background images and colours for individual elements and areas of the screen. This becomes especially useful with the HTML <div> tag for creating individual content areas, such as headers, footers, sidebars, columns and inset blocks.
Typefaces, Fonts & Text
The shape & design style of type is known as the 'typeface' or 'font'. In computer terms, font also describes everything from the typeface to the size, colour, weight and spacing etc.
There are two kinds of typeface:
'Serif'... Which are the fonts with the little curly bits on the ends of the characters - such as Times
'Sans serif'... Which are the cleaner, straighter fonts, without the curly ends - such as Arial or Helvetica.
Fonts can also be proportional or fixed width. Times and Arial are proportional fonts, and the two most commonly used fonts on the Internet. With proportional fonts, each character occupies only the space that it requires; a letter 'i' is much narrower than a letter 'm' for instance.
Some text output requires standardised 'block' spacing, where each character occupies the same amount of space; these are called fixed width fonts. These are often used where text columns need to always 'line-up' with each other. An example of a fixed width font would be Courier. Programmers often use fixed-width fonts, as they can make code-formatting easier to read.
Examples:
This text is printed in the 'Times' font, a serif font which uses proportional spacing.
This text is printed in the 'Arial' font, a sans-serif font which uses proportional spacing.
This text is printed in the 'Courier' font, a serif font using fixed-width spacing.
Make sure there is a reasonable level of contrast for the text on the page. Medium-contrast text over a picture background can be very hard to read. With a 'busy' background or strong solid colour, you may find that bold white text is easier to read than black.
10 to 14 point (or 11 to 16 pixels) should normally be used as the standard paragraph text size. Avoid doing the entire page in very small or overly large text. A very small font can make it hard to read for many people, and overly large text makes your page look childish.
Keep standard paragraph text blocks left-aligned, and only use centred text for headings or emphasis. Large blocks of centred text look 'odd' and don't scan well, as the eye expects to start reading on the left-hand side of the page. Plus, it's easier on the eye when each new line starts in the same horizontal left-hand position.
Most professional websites these days tend to use 'sans serif' fonts, such as Arial or Helvetica, rather than 'serif' fonts, such as Times. (Chcekout 'Open Sans' - a Google Web Font.) Use bold and italics sparingly for emphasis when required; great chunks of bold text look very amateur. Beware of italics with small point sizes, as this can become unreadable.
All paragraph or body text should be in standard 'sentence case' i.e. A capital letter to start the sentence, and the rest in lower case. All upper case LOOKS LIKE YOU'RE SHOUTING!
Continued...