Align your text to the left and leave it ragged on the right. Left-aligned text increases reading speed. The straight left edge helps to anchor the eye when starting a new line.
Never fully justify text as it can create serious readability problems. Even if you personally like the look of fully justified text, don’t do it. Word spacing is likely to go awry and you will end up with large gaps between words and ‘rivers’ of white space running down your pages. Those rivers make reading your content difficult, if not impossible, for people with dyslexia. Anything other than left-aligned text can cause problems for people using screen magnifiers.
There seems to be little agreement on what is the best line length for optimum reading speeds. The most commonly held view is that limiting line length to 9 or 10 words can increase speed and comprehension (based on the assumption that the eye can only focus on about 3 inches of a page at a time). However recent research appears to show that the rules that apply to off-line print don’t necessarily apply to online print.
It is suggested that line length can actually be longer for online content. However, having said that, don’t go beyond about 80 characters as at that point readability will start to suffer.
Reading speed and user preferences are not simple matters, consider the following conclusions by Melissa Youngman and Dr. Lauren Scharff (1998)
“Users read faster when line lengths are long, although they tend to prefer shorter line lengths. When designing, first determine if performance or preference is important. If user performance is critical, use longer line lengths to increase reading speed. However, if user preference is critical, use shorter line lengths.” Usability.gov
Set the leading larger than the default – as a rough guide 1.3em of leading (130%) will make a big difference to the readability of a web page. Leading and line length however are related; the longer the line the bigger you need to make the leading.
Newspapers have very short line lengths and very little leading. They do this so that they can fit as much text into a small space as possible. However, given the variable nature of the devices people use to view web pages, we can never be sure what the line length is going to be for every user. In relation to leading my rule of thumb would be, if in doubt go bigger.
As an aside: you might be wondering why line-height is called ‘leading’. Well, in the olden days typesetters used pieces of lead to set the space between text lines. If you like typography and typography jargon – which I do – here’s a couple more. The space between characters is called kerning and the space between groups of characters is called tracking.
Need more exciting typography jargon? Here’s a glossary of typography terms.
Choose a font that is suitable to your subject matter. An article about ancient manuscripts can justify the use of a flowery old font whereas an article about the design of modern art galleries can’t. For the article about the design of modern art galleries you will be looking at using a clean and uncluttered san-serif font.
Don’t use more than two fonts on a page. It will look like a ransom note. Clearly that will be distracting for visitors and draw attention away from your content.
Off-line, headings are commonly set in a sans-serif* font, with body text set in serif. However, on-line, sans-serif are often used for both headings and body text; the cleaner outlines of the sans-serif fonts tends to make them easier to read on low resolution screens.
Don’t mix serif and sans-serif fonts in your body text, as it makes you look like an amateur, which isn’t good. You may not have considered it as important but poor typography decisions can damage the credibility of you and your organisation.
* Serif fonts are those with little decorative flourishes on them and sans-serif fonts are the clean and tidy ones. Compare Times New Roman with Helvetica and you will get it.
Avoid using italics for small text sizes. Italicized fonts can look particularly bad at small sizes as italics are not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.
Don’t use all caps for bodytype – or even capitalise all words in headings. The uniformly of size and shape of capitals make them harder to read than lower case letters.
Readability is increased when only the first letter in a heading is in capitals; each capital – being less recognizable – acts as an interruption to the eye as it scans across the text.
Ensure good contrast between the text colour and the background colour. If the contrast between your text and background colours is low, some of your visitors won’t be able to access your content. That’s why the WCAG contains guidelines for colour contrast. For complying with WCAG AA standard text the contrast ratios need to be 4.5:1 for standard text and 3:1 for large text. Large text means 14 point and larger (typically 18.66px).
Make it easy for visitors to understand what is a link and what is not a link. Don’t rely exclusively on mouseovers to identify links, as this can be confusing and reduces usability. (From Usability.gov).
For service based websites in particular, arrange your text for scanability, i.e. have lots of headings and provide the most important ideas at the start of paragraphs. Use lists rather than dense passages of text when possible.
Most of your visitors will not be interested in reading every word on your page. So make it easy for them to find the information they are seeking quickly by using headings as signposts; signposts for the various issues and topics you are covering in you text.
Use a writing style and language that is appropriate for your audience. Don’t dumb down or dumb up. Think about who you are writing for and write for that audience.
Ignore the idea that you should never use jargon. If your audience expects it and when using it will actually make your meaning clearer, use it.
On the other hand if you are not writing for a specialist audience don’t try to be clever by using jargon just for the sake of it. Think about your audience and tailor your style to suit.
Don’t strive to use ‘easy read’ thinking that that will make your content accessible to a wider audience. It will accommodate one part of your audience but it will put another part off (probably the larger part). Easy read is designed for people with learning difficulties – an easy read version is an alternative version, i.e. a version aimed at a particular audience.
Contact me If you value experience (over 20 years as a web developer) and unrivalled technical know-how. Do you need a new beautiful responsive, accessible website? Get in touch. Tel: 07810 098119.
An article I’ve just written for Disability Today: 25 years on the Web: have I learned anything yet?
Yes people did wander the earth when there was no Facebook, no Google and no World Wide Web. I can’t say I remember it well (my memory is not the best) but I was certainly there. I lived through the invention of the web, its enormous growth, its unprecedented speed of development and its current ubiquitousness in the developed world, so, do I have any insights?
Read the full article: 25 years on the Web: have I learned anything yet?
“Jim’s patience and close work with his designer meant we got a vibrant new image that we could use across all media.” Clare MacGillivray, Development Coordinator Edinburgh Tenants Federation
Or phone to talk over your ideas: 0141 576 9446.
Photo by yvestown on Flickr – used under a Creative Commons licence
Responsive design is about creating sites that change their layout according to the device they are being displayed on. for the most part, this means altering the layout to accommodate different screen sizes.
However, this doesn’t mean that responsive sites are automatically accessible. It doesn’t imply anything about the many requirements of making website accessible to people with different needs. For example images will need to have text labels for people who can’t see images, links will need to make sense when read out of context for people who use a keyboard to jump from link to link on the page. And for everyone – but critical for people with cognitive impairments – content needs to be well structured and easy to navigate.
In very (very) simple terms; a responsive website responds to screen size and an accessible website responds to a users’ access needs.
For example, in a responsive design, an image will resize itself to fit within the parameters of a smaller or larger screen; for accessibility the function of the image responds to the users’ needs by ensuring that function can be accessed in additional ways – other than just visually. For example, by having a text label attached to the image. So if the image is a search button; the text will say ‘Search’; if the images is a bar graph the information displayed in the bar graph will be available as text – perhaps via link to a different web page if a long explanation is needed.
To be fair – for many developers – responsive design is about making a site ‘usable’ on different devices – not just viewable. So for example the site doesn’t just adjust to accommodate the smaller screen size of a tablet computer, it also modifies the navigation scheme to suit the needs of tablet users (this could mean for example, having navigation that can be accessed by the users’ thumbs while they hold the device).
From this point of view responsive design could have have something to offer for people using alternative devices to access web content; if the website itself is responsive to how the users’ access device works that is a good thing and helps accessibility in the wider sense of the word; for example, by automatically adding skip links to a page to help someone who is using a screen reader.
Flexibility – is an important principle of accessible website design; content presentation should be flexible enough to accommodate the users’ needs; some of those needs are related to the device the person is using so a responsive website design is not the same as accessible website design, however, it can help make a site more accessible.Contact me if you need a responsive accessible website.
“…went above and beyond whilst working for me, as he often helped me with technical queries that I was unsure of or didn’t know how to do.” Nicola Beaumont
You can now download WCAG 2 Defining The Principles as an MS Word document. This is the one where I translate the rather confusing language of the WCAG 2 website accessibility principles into ‘Jim speak’ i.e. easy to understand language.
This is the shortest possible summary of the WCAG 2 guidelines; it just outlines the basic principles and makes it clear what they mean.
Tags: WCAG 2
Millions of new websites get built every year by business owners who haven’t thought very deeply about why they want a website; what it can or cannot do for them.
And after it’s up and running those same business owners silently accept that their website gets very little traffic and attracts very little business.
That’s not going to be you! In the course of this article we will take the time to figure out just why you should have a website and how you can design it to do a job for you.
“97% of shoppers research local products and services online. Your website stands a good chance of being a prospect’s first impression.”
A definition of marketing for service based businesses:
“Marketing for service based businesses: the entire process of building the relationship between your business and your customer or potential customer.”
To market your business successfully – you need to:
It is just another tool you use to meet your marketing aims. Think of nothing else when designing or redesigning your website; it’s not just about how it looks (that’s is very important as we will see later – but you aren’t creating visual art, or a set of magazine pages) and it’s not a vanity project to make you look good.
You website needs to:
In short – you need to
The action you usually want them to take is to register for your mailing list or get in touch via phone, e-mail or your contact form.
You are doing this so that you can keep in touch with them and build a relationship that shows you in a credible light. Remember —we said marketing was about building relationships.
Ok — so let’s take each of these things in turn and look at examples
Ideally you should be able to express this in no more than a couple of paragraphs. It should be easy to read and easy to understand.
It should also identify your niche, your target market and what makes you special.
Exercise 1: ignoring for now your target market and your unique selling point: write a single paragraph (or at a push two) that says exactly the service or products you provide. This should be written is such a way that it could become the introductory text on your website.
How do you make it sound like choosing you is the only logical choice? Here are some ideas to get you thinking:
Exercise 2: Write down the thing that make you stand out. Your unique selling points.
Be clear about who and where your potential customers are. If that’s clear you can:
If you have identified your target market to be time-starved small business owners and you run a virtual PA service, what would be the appropriate content for your website?
Clearly there will be the basic stuff; services you can provide; your rates, contact details etc. But there should also be content that is on there because you have a very clear idea of your target market.
Perhaps publications you have written? For example, you know small businesses are always worried about costs — so you could write some publications that address exactly that issue:
Exercise 3: Write down who your target market is and how you can ensure the content on your website is targeted at meeting their precise needs.
If you don’t look trustworthy; no-one will hang around long enough to give you their email address or purchase your services. Looking credible is central to the success or failure of your website.
Exercise 4: Brainstorm ideas for content you can add to your website to demonstrate and build upon your credibility.
Visual design is very important: but website design is not about providing cool graphics; it’s about solving problems, usability, readability, accessibility – it is about standing out
There is a study titled “Trust and mistrust of online health sites.” In it 15 participants review health sites that they find via Google. 94% of the factors mentioned for mistrusting a website were design related.
When talking about trusting or mistrusting a site, design related issues were mentioned 15 times more than content issues.
Specific problems included:
Poor design means people don’t hang around for long – which means they don’t buy-in to your service.
Good design = trust = more conversions = more money in your pocket
“As aesthetically orientated humans, we’re psychologically hardwired to trust beautiful people, and the same goes for websites. Our offline behaviour and inclinations translate to our online existence.” Dr. Brent Coker, who studied the impact of attractive websites on human behavior.
Attractive well designed websites look professional and inspire trust in site visitors. In short, design matters.
Attracting new customers: your website is the central hub of your sales funnel
Your marketing funnel is the system that draws people to your website and channels them towards your contact form or newsletter subscription form.
Encourage signups using:
Keeping in touch via a regular newsletter; that after all is why you attracted them to your site in the first place; so you could get them on your mailing list – and develop a long-term relationship, this allows you to demonstrate your expertise.
Marketing for services based businesses is all about building and maintaining relationships with customers.
The aim of your website is to get that relationship started; to do that you need a site that inspires trust. Ideally to the point where visitors are happy to register for your mailing list, email you or fill in your contact form.
If people visit but don’t get in touch then your website is not doing its job.
Although client-side images are preferred over server-side image maps – as equivalent text can be provided for each image map ‘hot-spot’ – server-side image maps are sometimes necessary. For example, a server side image can be used when the active regions of a client-side image map cannot be easily defined using an available geographic shape. In such cases the answer is to provide redundant text links relating to each link provided by the server side image map.
The following markup example is typical of the code used to reference a server side image map.
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" > </a>
The web pages accessed by the clicking the mage map in the above example would be completely hidden to someone using a screen reader or a text-only web browser, as there is no alternative way of accessing the links provided.
An example of the server side image with alt attribute added and an alternative set of links to the same content:
<a href="/cgi-bin/mymap.map"> <img ismap src="imagemap.gif" alt="Alternative text links are provided at the foot of the page."> </a>
You then make the following links available at the foot of the page,
<p><a href="about.html">About Us</a> | <a href="research.html">Research</a> </p>
As you can see in the example above the alt attribute provided information about where to find the text based links. The alternative text based links provided at the bottom of the page imply that the image map has two hot-spots, one to find information about the organisation and another for information related to research.
British Standard 8878 (BS 8878) is the Web Accessibility Code of Practice developed by the British Standards Institution, launched on December 2010.
The standard outlines procedures to help ensure that websites (and other web based services) are accessible to disabled people. In short, it provides guidance on good practice; how to develop your strategy and what practical steps to take to implement that strategy.
One assumption it makes is that accessible website design is a good thing and that it is something every organisation should be working on.
When building your new website:
BS 8878 aims to be more ‘holistic’ than other guidelines such as the Web Content Accessibility Guidelines (WCAG) which focus much more on technical issues.
Given this wider approach, it covers:
There are positive and negative factors that would influence you in considering whether you should adhere to BS 887.
In my opinion The BS 8878 is an extremely useful and important document as it recognises that website accessibility is a more complex subject than just applying the right techniques to a web page (i.e adding text labels to images).
It is also about how organisations operate in relation to equality (e.g. policy development), how organisations tender for website developers, how accessibility is tested and who tests it (e.g. disabled people) among other things.
A navigation menu is – if we are speaking structurally – a list.
I still see websites that don’t markup their navigations links as lists; I guess the reason for this is that designers don’t want to have ugly big bullet points littering their menu’s, or seemingly uncontrollable margins throwing out their carefully crafted layouts.
Is it possible to use the correct structural markup, and still make your menus look the way you want them to?
The simple answer is yes; you can use CSS to style lists to look more-or-less any way you want.
First, undermine your previous assumptions by visiting the Listamatic website to see examples of different list styles (with the CSS used for each).
Then visit Mark Newhouse’s Taming Lists tutorial to learn how to make your own.
And finally – if you can’t be bothered learning how to do it yourself – have a look at Accessify’s List-o-matic – where you fill in a few forms, and the List-o-matic tool does all the hard work for you.
Using the appropriate markup for all the structures in your web documents is the first step towards making them accessible; web pages need to be accessible to the ‘user agents’ people use first, before they can be accessible to the people themselves. Using valid standards based markup means you have the best chance of your pages being understood by those intermediate ‘user agents’ (usually that means computers and web browsers).
For HTML 4.01, you can indicate the character encoding in the head of your page using the following meta tag:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
ISO-8859-1 (commonly called Latin 1) is the default characters set for HTTP .1.1, and indicates a set of common English characters. Generally this is the most common character set indicated in web pages, and is likely to be the one you will use.
Creating valid HTML is one of the most important steps you can take when designing accessible websites. If you do not provide the appropriate character encoding this could lead to characters in your page not displaying correctly, which of course will have an impact on the accessibility of your content.
Other posts in this category
I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.
07810 098 119