Best Web Site Design Tips & Tricks

Create Short, Concise and Precise Headlines

The aim of a headline is precise communication in a handful of words. Headlines must be;

• short, concise and precise,
• rich in information,
• a clear summary of the following article or paragraph,
• front loaded with keywords,
• understandable out of context,
• predictable so readers know what to expect.

If you want to see some very good examples of the above rules, view the BBC news pages.

• Rule: Create Short, Concise And Precise Headlines.

Write For Online Not For Print

A text book or magazine can provide page after page of text to a reader, no so with online content.

The following are some well documented tricks to use:

• Use headings an subheadings.
• Use bulleted lists.
• Highlight keywords.
• Use short paragraphs.
• Create a simple writing style.
• Write as if talking to your reader not at your reader.

Reading text online is quite different and more difficult than sitting in your comfortable arm chair reading a good book. Online text needs to draw users into the text more and provide better scannability cues.

• Rule: Write For Online Not Print.

Don’t Make Your Columns Too Wide

When it comes to readability, learn from the experts. Book and newspaper publishers learned many moons ago not to make text lines too long. Look at any newspaper for example. Text is printed in columns to make the lines short. Why? They do this because it’s easy for the eye of the reader to quickly move to the beginning of the next column. Long lines of text are very difficult to read.

Although the age of designing for 800×600 pixel screens has gone this is still a good size to design for when it comes to text layout. It also has the plus that those still viewing at this resolution (about 10%) will also be able to read your editorial without horizontal scrolling all the time.

So, what size columns should you use? Well for fixed width layouts, with most viewers using 1024×768 or 1920×1080 screens a page width of 1000 pixels is usually a good compromise with editorial column widths between 600 and 760 pixels. This gives plenty of space for sidebars and menus without squeezing the editorial. It also has the advantage that the 800×600 pixel screen users can also read your editorial comfortably.

The alternative is to use a fluid layout. this will look fine on 800×600 screens, good on 1024×1768 screens but not so good on larger screens due to the text lines getting too long.

• Rule: Don’t Make Your Page Too Wide.

• Rule: Don’t Make Your Text Columns Wider Than 760 Pixels.

Tiny Link Click Targets Are Useless

When providing click targets such as graphical button or text links don’t make them too small. Give the use a good target are to aim for. Remember some visitors may not be as dexterous as others and not all mice are born equal.

A click target of one letter is a lot harder to hit than a click target of a complete word or complete phrase. Same rule applies to graphics, make them a good sized target.

• Rule: Do Not Use Tiny Link Click Targets.

Don’t Underline Words For Emphasis

Now this rule may seem strange at first, but think about it. You’re editorial is being viewed over the Internet! So why shouldn’t you underline words?

Well, on the Internet, underlined words indicate a link, but if you are underlining for emphasis your readers may not realise this and think your links are broken.

If you want to emphasise text, use italics, boldface, color or ALL CAPS.

• Rule: Don’t Underline Words.