EverWeb Codebox

Readability

Website Bad Practices

Many website owners and designers are unwittingly driving away visitors who suffer from reading difficulties and those who suffer from dyslexia.

Most of us know that black text on a pure white background and justified text should NEVER be used on a website but there a number of other factors that can cause a web page to be unreadable.

Since around 20% of the web surfing community are likely to have some sort of reading impairment, it's worth taking the time to consider their special needs and to make web pages easier to read for the rest of us.

Justified Text & Letter Spacing

Justified text is not only difficult to read for dyslexic users, but for non-dyslexic users as well. This is because it creates large uneven spaces between letters and words. Most of us use the ragged right hand edge of a block of text to judge where the next line is. Justified text makes this more difficult for most and impossible for some.

When these spaces line up above one another, a distracting river of whitespace can appear. This can cause dyslexic readers to repeatedly lose their place when reading. You can avoid creating the river effect by using left aligned text, instead of justified or center aligned text for your paragraphs.

Fonts are designed with an optimum letter spacing. Tampering with this can also contribute to the river effect. If the spacing is not acceptable, change the font not the spacing.

Some people have a habit of using a double space after a period and seem to think that this contributes to clarity when in fact it is another bad practice that can contribute to the river effect.

Blurring & Colors

Blurring is a distortion effect which is made worse by two bad pratices - using black text on a pure white background and and long blocks of text.

Using a slightly off white background such as #FEFEFE and even a slight off black text goes a long way to avoiding this. Similarly, it's better to use #CCCCCC on a black backround.

Long blocks of text are difficult for all of use to read. Short paragraphs creates more focus and gets the ideas across one at a time.

Washout

Washout makes text look faint and indistinct. The worst offenders are serif fonts and italics.

Avoid serif fonts such as Georgia, Times and Times New Roman and confine italics to single words.

Layout

Try to avoid cramming a web page with objects. Use defined content blocks with plenty of white space around them.

Do not mix font types on any given page and avoid the use of colors except for blue for headings and/or hyperlinks.

Red/green is the most common form of color blindness so both colors should never be used together on the same page.

Animation & Media

Avoid flashing text/images, animated GIFs, looping movies and autoplay sliders that can't be turned off.

Animation adds interest to a web page but most of us only need to see it once!