Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! »

Ben Hunt’s Web Doctor Report for FairSay.com

This is an example of one of Ben Hunt’s Web Doctor reports.

Purpose

FairSay Ltd. is a UK company that provides various consulting services to support non-profit-making organisations worldwide to run more effective campaigns. The site is an extensive point of presence for FairSay and provides links to a range of associated peripheral services and networks.

The site’s objectives are directly to promote FairSay’s services, and to provide an access point from which non-profits can find further resources and support.

This report will analyse the general effectiveness of the FairSay.com web site from the perspective of a new visitor, addressing relevant aspects of branding, usability, accessibility, graphic design, and any other factors that seem relevant to successful and effective communication.

The site was successfully redesigned recently, and the focus of this report will be to address areas to improve further on the gains made in the redesign. A quick “design tweak” is included to illustrate points made.

Summary

The FairSay site is instantly accessible and very readable. You’ve done a great job with creating a site that communicates directly to your visitors. The site has a lot of strengths, and certainly fulfils its objectives today. The purpose of this report is to identify areas to polish, rather than to fix.

Original FairSay.com screenshot 50% scale

The balance of content is appropriate, with good use of text (i.e. plenty) and white space (plenty too). Your logo is excellent, distinctive and clear.

When you arrive at the site, I do feel there’s some lack of people. The image of the clutching hands feels a bit unreal.

Recommend: How about some imagery of the end result benefits, i.e. what you’re about; the people your customers are here to help? (Of course, your clients could be there to help pandas, or the environment, so maybe photographs of your clients’ campaigns in action would help give the right impression, i.e. that you’re active, your clients are active, and your services help make a real difference on the ground, without overly focusing/prejudicing your target end beneficiary?)

A few pages have started to incorporate illustrative graphics (like the pie chart on the “Campaigning Strategy” page). These could be effective, provided the illustration points in the right direction to support the message of the page.

Current graphic:

Current Campaigning Strategy banner

Taking the example of the pie chart, I’m not sure it’s on target, as charts could suggest a sterile analysis after the fact, rather than pro-active, energetic action. More suitable imagery for “get on the right track and avoid the pitfalls” might be, say, a photo of a team of adventurers trekking, which would incorporate “teamwork” and “planning for action”, as well as tying in more human imagery.

The imagery should reflect the content of the individual sections, but I would certainly recommend either making these sections simpler (smaller, with the text coming through stronger) or richer and more distinctive (using stronger photos/graphics).

If graphics are used (which is acceptable), I recommend “zooming them up”: i.e. increase the size or presence of the meaningful elements to use more of the space.

Alternative suggestion, zoomed up a bit. Text is clearer, graphics are same size:

Alternative Campaigning Strategy banner

Home page

What do you do?

The home page doesn’t exactly say what you do. (The first nav link is “What we do”, but that doesn’t answer the question, just indicates somewhere I might to to get an answer.)

I also missed the “What We Do” box in the lower right-hand column. It’s in a low-priority place on the page, and because it’s quite low down, it doesn’t jump out as something you should scan to understand “what the site’s about”.

Also, in this box, the repetition of the word “Campaigning” as a prefix to almost every term makes all the text less scannable. While I appreciate the benefit of including the term in links, it will result in the important “What we do” being skipped by some people.

Recommend: To fix this, you should aim to front-load the text (i.e. move the more meaningful & distinctive words as close to the front of the paragraph/sentence as possible. You could also mix up the terminology to reduce the repetition, or you might consider keeping “Campaigning” in light-green on green, and highlighting the following (more differentiating) words in white on green. You could also break up the repetition by including short descriptions as part of the links (which would also let you include more key words).

You have the strap line “Making Campaigning Count” as the main heading on the home page. It’s then lost on subsequent pages. Also, it’s not very descriptive as a H1.

(Keywords used in headings, particularly your main H1, are taken as very relevant to the subject matter of the page. So try to use a high proportion of terms that are likely to be relevant to people’s search queries.)

Recommend: Use a strap line together with an introduction section on the home page that more accurately describes your offerings.

The charcoal-coloured feature panel feels a bit too sober. White text on the almost-black background also seems less readable than the default black-on-white.

Recommend: Include panels set into the black background. These could fit into the rounded rectangles nicely, and each panel can have its own style that reflects its content matter. Currently, all the panels seem the same, making you actually have to read the content to tell what they’re about.

They would all be more effective if they looked more distinct from each other. The design would support more colour to add mood/meaning to certain promotions. You can still use the plain black background too (perhaps for text-only messages).

Usability: How easy is it to get what you want from the site?

There’s quite a lot of content on this site, and overall, it’s easy to find your way around. The user interface feels conventional and obvious.

I would recommend making the links on the main navigation bar full-height, i.e. use all the vertical and horizontal space for hyperlinks. Avoid dead bits of bar. If you do this, also make sure the entire link hotspot highlights on mouse-over.

Headings could be bolder to aid scanning. Large, normal-weight Verdana can come across quite thin and spidery. Recommend a bold weight (e.g. Times/Georgia, or large normal-weight Arial).

“RSS feed” and “Print this” links would be clearer if reinforced with small icons.

There are a few inconsistencies in style, such as the bullets on these 2 lists. “Related blogs” is a bulleted list, which is very clear; but “Recent Entries” above a definition list is used. Either approach is permissible, but the bulleted list is certainly easier to scan.

SEO: How search-engine-friendly is the site?

The site makes good use of meta tags and titles.

Recommend: Add meta title tags, using same content as page title.

The repetition of “FairSay &emdash; Making Campaigning Count” in every <title> dilutes the keyword density of title tags site-wide. Recommend: Keep to “- Fairsay” only.

The site could make better use of internal link text. There are a lot of “more >” or “Read More…” links that miss the opportunity to tell search engines what the site considers the linked page to be about. Definitely put more descriptive terms in the global navigation (the title properties on the global nav links are identical to the link text).

Architecture & Navigation

Navigation doesn’t tell me much (“What we do | Events | Tools | Networks | Blog). These terms also have zero SEO benefit, as the same text is found on millions of other sites, so can’t differentiate you.

(The text used in site-wide links has a significant impact on the meaning of the pages they link to. So it’s advantageous to include keywords relevant to the subject matter of the target pages.)

Recommend: Suggest using one or two additional terms, e.g.: “Campaign support | Fair Say events | Tools for nonprofits | Campaigning networks | FairSay blog”. (see design tweak below)

The breadcrumb trail takes up a whole line. This is not necessarily a problem, but as the site already has a lot of white space, your content is starting quite low down the page (halfway down on a large display).

I don’t feel the tag cloud navigation adds value to the site.

Content & Copy

Content is straightforward and the language level is plain, which should be accessible to a very wide audience. Headings are generally meaningful and aid scanning. Paragraph length is good for readability.

Generally, I tend to prefer 1 or 2 sentences per paragraph in a web article. FairSay typically uses up to 3 sentences, which is perfectly acceptable.

Accessibility & Build quality

The site is highly accessible, with text used extensively (very safe), good use of acronyms and other tags & properties to make the site easy for everyone to access, regardless of disability.

The green hyperlink colour does not provide quite enough tonal contrast against the white background.

In the green side panel, light green text is used against a green background. This only provides a 40% tonal contrast (80% brilliance foreground against 40% brilliance background), which is certainly not enough to make the site accessible to many people with visual impairments, and causes unnecessary strain for people with good vision.

The AccessKey used for “Skip to content” link is “2”, which is not conventional. More typical keys are “1”, “c”, or “s”.

The overall production standard is first-rate. However, I’m not sure why an HTML image tag is used to display the background to the navigation.

Ideally, use <img> tags only for content. Any background graphics should be implemented using CSS (usually background images, occasionally bullet graphics).

Note: I’ve noticed a definition lists are applied wrongly for portlet structure. In “Related blogs”, the definition term holds the title and <dd> contains a list of links.

This should either be a header followed by unordered list &emdash; or &emdash; a single <dt> followed by multiple <dd>s.

Note: In the blog section there are 2 doctype definitions.

Consider setting the alt property on the logo, for the benefit of screen readers and other user agents, rather than repeating the words in <title>.

Hint: Home/site map etc. navigation links could perhaps be spaced slightly further apart to make them easier for people with motor difficulties to target.

Recommend using bold text for the main nav bar, as the thin white text could be lost against the gradient background for people with visual impairments.

Tweaked Design

My tweaked design 50% scale
  • Main navigation links are more descriptive & bolder. Better use made of space at page top.
  • Feature panels are more distinctive and give individual messages more visual appeal.

Side-by-side

Original FairSay.com screenshot 50% scale
My tweaked design 50% scale
About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.