Top Left technique

1. Top Left technique • Users should be able to look at a website and work out what it’s about in less than 4 seconds. • Put the introduction text at the top of the layout. • Humans look to the top of web page layouts when they search for important site features such as navigation menus and search features. (eye tracking study). • Aim for a minimum of 300 words per page (max 1000).

2. Text block size • Blocks of text should not be too long or too wide. • When paragraphs get long, they’re harder to read because there’s less whitespace. • Whitespace gives paragraphs shape, which acts like visual clues, making it easier to find your place, and to find the start of the next line. • Use small paragraphs. Lines of around 100 characters have neat bite-size chunks of text that can easily be read. That’s why newspapers and magazines use several columns on a page, and why books use the same format.

3. Spacing text • Whitespace is important for text to be readable. • Whitespace around elements is known as guttering, or margin when applied to blocks of text. • It’s useful because it helps the eye to identify a block of text as a group, and also helps you quickly find the beginning of each line.

4. Case / Capitalisation • DON’T USE CAPS FOR BODY TEXT, BECAUSE IT DECREASES THE CONTRAST BETWEEN LETTERS WHEN THEY ALL TAKE UP THE SAME SIZED BOX. • Capital letters are useful because they identify the start of a piece of text (sentence) or an important piece of information such as a name. • Full capitalisation is more tiring and slower to read, because it reduces recognition by making all letters a similar size.

5. Contrast in text colours • It’s very important to have enough contrast between text and its background.

6. Alignment • Left-aligned text is easier to read than right-aligned text. • On-screen text is easier to read in narrower columns.

7. Emphasis • Create emphasis through using underlines, bold and italics, but don’t use them too much. • Emboldening increases contrast, and contrast only works when it has something to contrast against. Lots of bold text doesn’t draw attention, it competes for attention, creates extra noise and decreases readability. • Italics are good for emphasising words or short phrases. • Underlining text can emphasise certain words or short phrases, but use it in moderation. Be careful that underlining for emphasis is not mistakable for a hyperlink.

8. Font style – Serif or Sans Serif? • Serif basically means ‘small line’ on letters and sans serif without a small line (Serif Sans serif). • Don’t use too many different font styles. • In body text, try using Verdana, Helvetica or other sans-serif fonts. • As a rule, don’t use more than 3 different typefaces throughout a single web page design.

9. Font sizes • Don’t use too many different font sizes. • Font sizes work as signs that say "Here is something important" or "Here is a new section”. • There needs to be enough difference for text size to work. • Don’t use more than 3 different font sizes for your main content (i.e. main header, sub-header, body). Other screen elements may use alternative sizes (such as superscript/subscript, labels, advertisements, separate navigation links).

10. Scalable text • Change the size of the text on your CSS page and create a resource to teach others how to do it. • Extra help is available for this task so ask your teacher if necessary.