Tag Archives: navigation

Site evolution

Posted in Web strategy on by Paul Boag

In this post I look at how a site can be enhanced over time rather than redesigned intermittently.

In a previous article I talked about changing the client/web designer relationship from a “per project relationship”, to a more dynamic continual association, allowing for site evolution rather than site redesign. In this entry, I want to unpack that concept a little further and look at how a site can be enhanced over time rather than redesigned intermittently.

Benefits of evolution

Before we look at how site evolution can be achieved, let’s take a moment to examine why it is worth doing in the first case.

Why throw money away?

As I indicated in my last article on the subject, there are significant cost savings to make by evolving rather than redesigning your website. Most organisations redesign their website every three years or so. The old site is thrown away, and a new better site is put in its place. This demands a significant investment each time as the entire site is rebuilt from scratch. By taking a more evolutionary approach, each financial investment into the website builds upon the previous work done. With evolution, it is about building on what has gone before not replacing it.

Something to shout about

From a marketing perspective, evolution offers some exciting opportunities. With periodic redesign, you get one decent chance to shout about your site every few years when it undergoes a major relaunch. However, evolution allows you to go back to your users continually, telling them about the latest developments on the site. Each time you make a usability enhancement or improve the sites accessibility you can inform your customers. Every time you add a new piece of functionality, you have something new to shout about. Evolution provides a continual stream of marketing opportunities even for the most unexciting site.

Keep them coming back for more

I have written before about the importance of generating repeat traffic and keeping users engaged. Traditionally this has been achieved through updates to the content. Things like regular news stories, constantly updating events and new product ranges are all great ways to keep users checking your site. However, site evolution now offering the opportunity to engage users through improvements in the functionality and appearance of the site. User return to the site to see how it has been enhanced as much as to see what content has changed. Small tweaks to the site are a good way of demonstrating that your site is constantly maintained and worth regular visits.

Laying the right foundation

The benefits of site evolution are obvious but how do you practically go about evolving your website over time? The key lies in laying the right foundation. Too many sites are built with redesign instead of evolution in mind. They are built with the expectation that not much will change on the site for two or three years and then it will be built again from scratch. Sites built with this mindset will be difficult to evolve because the fundamental building blocks of evolution will not be there.

If you are commissioning a website build, it is vital that you ensure your designers and developers build with evolution rather than redesign in mind. Only if they do this can be hope to move your site forward in incremental steps rather than periodic redesigns.

Building blocks of evolution

These “building blocks for evolution” can be summarised as follows:

Separation of content from design

I have talked about web standards many times before in this blog. Standards primarily revolve around separating the content of your site from its visual appearance.

This approach provides many benefits but the one that applies the most to site evolution is the ability to make global design changes simply and easily. Site evolution works on the assumption that you cannot guess how your site will change over time. It is therefore vital to make everything as easy to alter as possible. By separating design from content, you can adapt the look and feel of your site from a central location instead of editing each individual page. Without this separation, design changes become a painful process of find and replace across every page on your site.

Let’s say for example you change your corporate colours and your website needs to reflect this. With standards, you can edit your central design files (CSS) and these changes are shown instantly across your whole site. Without web standards, you would have to edit manually every page of your entire site in order to achieve the same result. The time involved in such an undertaking would almost be as significant as a complete site rebuild!

Separation of behaviour from content

In the same way, you separate content from design because you cannot predict what changes you may wish to make in the future, so you should also separate behaviour. For example, just because you currently want all links to external websites to open in a new window, doesn’t mean you will always want that to be the case. By putting this kind of behavioural functionality in a separate file, it is easy to edit them centrally rather than updating each page individually where the behaviour is used.

Well defined content

As important as it is to separate out the design and behaviour from the content, it is equally important to ensure the content is clearly “marked up”. “Mark up” refers to how the content on your site is defined. This definition is how your web browser knows what to do with it. For example, an important heading on your site would be “marked up” as follows:

<h1>This is an important heading</h1>

Without those tags, the browser would have no way of knowing that particular piece of text is a heading. However, more importantly without this clean, uncomplicated definition of content you cannot easily define how that content should look or behave. For example without the H1 tag you see above it would be impossible for you to change the appearance of all your major headings.

I know this is in danger of getting technical, something I try to avoid on this site. However, as a website owner you need to be aware that many web designers do not produce this kind of well “marked up” content. If they don’t do it on your site, then evolving the appearance or functionality is going to be that much more difficult.

Templates and content management

Most of the web pages on your site look the same. They have the same navigation, the same branding, and the same layout. Normally, it is only the content that changes. It is therefore sensible that these common areas in each page are built using a template. That way when you change the template you update all occurrences of these consistent elements across the whole site. Once again, this approach allows you to make site wide changes ease.

The only slight complication to this approach is that some special technology is required. In affect, each page needs to be built automatically from the template when the user goes to that page. In most cases, this process is handled by a content management system. If you are considering evolving your site overtime then a content management system is probably a good investment. Not only does it allow pages to use templates it also gives you (the site owner) a lot more control over the structure and content of your site. Typically, a content management system will allow you to edit pages, add new pages and reorganise the structure of your site. In short, a content management system allows you to evolve the content and structure of your site without the need for web designers.

Design flexibility

The final principle of site evolution is ensuring flexibility in the look and feel of your site. Although I have already outlined how separation of content from design enables you to make gl
obal changes to the look an
d feel of your site, you still want a design that is as flexible as possible. You do not want to be in a position where you are making major changes to a sites appearance just because you add a new top-level section or a new type of content. A design should be flexible enough to accommodate these kinds of additions without a major overhaul. This makes for a better user experience as dramatic changes in a sites layout and design can cause confusion and frustration. Far better that a sites look and feel evolves through a series of small changes that the user has time to assimilate.

Conclusions

There are obvious benefits to evolving a site over time rather than undertaking sporadic redesigns. However, it is important to remember that the foundations need to be in place before you can successfully follow this approach. It will be hard to evolve a site that has not been built with this approach in mind. Ensuring content, design, and functionality are all maintained separately is key to the success of a constantly evolving website. Without those the overheads of evolving your site will be too high.

Solid up-to-date Search engine advice

Posted in Marketing on by Paul Boag

There is a lot of out of date advice online regarding search engine optimisation. However, there are some underlying principles that remain true.

There is a new article on "A list Apart" that looks at the issue of "Ambient findability".

Although not primarily focused on search engine optimisation, the article did list a few excellent hints on improving your search engine ranking. What I particularly liked about this list is that it does not include any clever tricks to fool the search engines into improving your ranking. Instead, this list contains universal advice that will work will all search engines and will not quickly become out of date when the search engines change their algorithm.

  • Determine the most common keywords and phrases (with optimal conversion rates) that users from your target audience are entering into search engines.
  • Include those keywords and phrases in your visible body text, navigation links, page headers and titles, metadata tags, and alternative text for graphic images.
  • Proceed cautiously (or not at all) when considering the use of drop-down menus, image maps, frames, dynamic URLs, JavaScript, DHTML, Flash, and other coding approaches that may prevent a search engine spider from crawling your pages.
  • Create direct links from your home page, sitemap, and navigation system to important destination pages to increase their page popularity ranking.
  • Use RSS feeds with ample backlinks to your site’s target destinations to encourage subscriptions and visits and boost organic search rankings.
  • Reduce HTML code bloat and overall file size by embracing web standards to ensure accessibility and improve keyword density.

I would love to hear your ideas for "generic" search engine optimisation that avoids clever gimmicks.

Web design podcast episode 4

Posted in Classic shows on by Paul Boag

On this weeks boagworld.com I am without Marcus due to various technical problems with Skype. However, we hope to have Marcus back with us next week so he can continue to show his ignorance then.
Our main subject for this week is “how to improve your search engine rankings”.

Play

Podcast: Download (11.2MB)

To download the latest podcast click here.

Below is a brief outline of the things covered in this week’s podcast as well as links to some of the articles mentioned:

Search engine optimisation

Here are my pearls of wisdom ;)

Part of a bigger strategy

Remember your search engine optimisation work should just be a small part of a bigger marketing strategy. Search engine placement is not good enough by itself.

Search engines are not all that!

Search engines have their place but they also have their drawbacks:

  • Delays in seeing results
  • An unpredictable outcome
  • Need for constant attention
  • A passive approach to marketing

Learn more about the problems with search engines.

Consider quick fixes

Because search engines take time to index new sites, consider using pay-per-click advertising until you gain the positioning you want from the main listings.

Visit Google Adwords site

Stay focused

Make sure you have a clear focus for your website. Ensure your links, content and navigation are built around that focus and that you do not deviate from it. A lack of focus will dilute your ranking on your chosen keywords.

Use web standards!

For fear of going on about web standards, make sure the code you use is semantic. Your HTML should describe what content elements are, in order to tell the search engines what is important and what is not. For example how does a search engine know what a title is unless you give it a heading tag?

Learn more about web standards.

Don’t make the search engines work

Although search engines can index PDF files and flash sites they cannot do it as well as they can index HTML. Therefore avoid using these plug-ins wherever possible in order to improve your ranking.

Link popularity

Encouraging others to link to your site is key to a successful SEO campaign. However, focus on the quality of links not the quantity. Ensure people that link to you are relevant to your subject matter and have a good page ranking.

Learn more about link popularity

News

Dreamweaver 8 is out!

I have just finished downloading the new Dreamweaver 8 upgrade but haven’t had time to review it yet.

View Dreamweaver’s new features here.

Firefox 1.5 is now in Beta

Firefox have released 1.5 in Beta. I hope that this will go some way to continuing its battle against IE especially how IE 7 is in Beta. Personally, I still prefer Firefox because it has some excellent web design tools as well as the Web Developers Extension.

More move to web standards

More and more big name sites are adopting web standards. This week the GAP and Slashdot jump on the bandwagon.

Google ranking factor checklist updated

The site which lists the alleged factors that effect your sites ranking on Google have been updated to include the latest changes made.

View Google Ranking Factors site

Review

Because of this weeks theme, I review SEO Elite, an excellent tool for improving your site engine positioning.

Learn more about SEO Elite.

What makes good web design?

Posted in Design on by Paul Boag

I am in crisis today. Some days I am just not sure what constitutes good web design anymore. Help me see the light.

The never-ending process of redesigning the HTML soup that is headscape.co.uk continues. While seeking inspiration for my copy I came across this site:

Burza

What surprised me was my confused reaction to the site.

Its cool… oh yes it is

To start with I thought, wow this is cool. It looks great, it is built in web standards and it even caters for users who do not have the flash plug-in installed. A great example on modern web design, using semantic code and degrading nicely.

Oh no it isn’t

However, when I got past the technical and design excellence I started to find some confusing features. For a start, it took me a moment to work out what they did. Despite, the big banner saying, "We do web stuff" I had trouble grasping what the site was about. Was it a games site, a site for kids, what?

I loved the little cool figures and even grasped relatively quickly that they were the main navigation. However, I was then left wondering what each section contained. The white arrows everywhere and the spidery yellow text made it hard to interpret what was going on.

In two minds

I am not writing all of this to slag off the site. Quite the contrary, in many respects I am very jealous of the talent behind it. The reason I am writing is that I really do not know if it is a good piece of web design or not. Obviously, in many respects, it is, but from a usability standpoint, I am not so sure. Is it form over function or am I just turning into a grumpy old man? What do you think? How would you rate this site?

Web design podcast episode 3

Posted in Classic shows on by Paul Boag

On this weeks boagworld.com I am joined by Marcus Lillington. Not because he has anything particularly insightful to share but simply to avoid you having to listen to me droning on for half an hour unaccompanied! Our main subject for this week is the top ten mistakes made by clients.

Play

Podcast: Download (28.7MB)

To download the latest podcast click here.

Below is a brief outline of the things covered in this week’s podcast as well as links to some of the articles mentioned:

Top 10 client mistakes

In no particular order here is our top ten mistakes made by clients:

Marketing departments gone mad

Why is it marketing departments are obsessed with collecting personal details even at the cost of alienating potential customers… read my article on marketing department and forms.

Unrealistic deadlines

Clients should not consider their website as an afterthought that is left to the last minute. Developing a decent website takes longer than you think!

Budget

Clients need to be willing to discuss budget with web design companies. Firstly, this will enable them to see if their budget is realistic and secondly it will allow the web design company to work around budgetary constraints.

Design by committee

Design is subjective so the more people involved in choosing the greater the chance of ending up compromising on the lowest common denominator.

Copying the competition

Although it is good to keep consistency of terminology and navigation with the competition in order to help users who are "shopping around", it is also important to stand out from the crowd.

Creeping specifications

It is inevitable that a client will think of more features they wish to add to their website during development. However, we encourage them to implement these ideas in a second phase. This will stop the deadline for the project slipping and give them a second chance to promote the site when the new features are added.

Failing to consider the breath of platforms

Many clients only care what their website looks like on their own PC presuming that the site will look the same for everybody. It is important to remember that resolution, monitor type, device, operating system and video drivers all effect the appearance of your site.

Not considering site promotion

It is amazing how many people still do not consider promoting their site but rather expect people to magically find it. Still more believe that search engine placement is all that matters. A website should be integrated into your overall marketing strategy… read more about promoting your site.

Under estimating the clients role

It is easy to forget just how much a client has to contribute to a sites development. From copy to review and testing, the client’s role is vital and they need to set aside sufficient time to focus on the websites development.

Failing to keep content fresh

Many clients allow their sites to stagnate once it goes live. By doing so they undermine the companies credibility and fail to provide motivation for users to return to the site again to see what has changed… read more about generating repeat traffic.

News

A new web design podcast almost!

I thought I had found a new podcast dedicated to web design on itunes but it appears it is not yet live. Keep an eye on Livemotionstudio. Since recording episode three I have spotted another new podcast called ericd.netwhich is dedicated to the more technical side of web design.

Accessibility business case

If you are looking for a water tight business case for making your site accessible then check out the new W3C article on web accessibility.

A new live chat system is launched

There is a new flash-based live chat system. Not only can you chat with visitors to your site using instant messaging but you can also see them and here them too! If you haven’t encountered live chat before read my article on the subject.

Macromedia Podcast

Macromedia has launched a podcast that provides help and support to users of their Studio suite of products.

Review

Did not have time for a review this week because Marcus talks too much :)

Website storyboarding

Posted in Design on by Paul Boag

With a project as complex as producing a new website, there is a lot of room for misunderstanding and confusion. That is why it is so important to have a clear specification of what the site will do and how it is structured. Enter the HTML storyboard.

Molly Holzschlag on her site has raised the issue of prototyping techniques and different ways of storyboarding a website. It would appear that everybody has his or her own method of doing this so I thought I would throw my approach into the ring.

Why storyboarding is important

Before I tell you how I go about storyboarding a site, let us recap on why it is so important. The structure and content of a site can have profound effects on design, budget, choice of technology and delivery timescales. Without a storyboard, there is room for confusion as to what exactly the nature of the site is. This can lead to last minute changes that in turn push out deadlines and increase costs. A good storyboard can provide everybody with a clear understand of the sites scope and minimise any late additions.

My approach

As I have already said, there are many approaches to storyboarding but my preferred approach is to create an HTML storyboard. This involves building a completely un-styled outline of the site using HTML. Although the storyboard does not include every individual page on the site, it does try to cover the major functional areas and main sections. Each page in the storyboard will include the main navigation, related links, a functional description of the page, and some notes on content for that page. Although each page has no design elements, it will indicate all of the major elements to appear on each page. Sometimes I also try to approximate the position of these elements to give a better impression of the final site.

The benefits of this approach

I believe that producing an HTML storyboard has several advantages beyond the improved communication I have already mentioned.

  • It allows the client to navigate around the storyboard as if it is the final site. This helps them get a much better feel of how things fit together.
  • You can also carry out valuable usability testing against this kind of wireframe
  • It is possible to layer additional css formatting on top of the HTML in order to try out different design concepts
  • If built right these HTML storyboards can also act as the basic HTML structure for the final site as well therefore reducing overall production time

Conclusion

Do I always use this approach? No. Sometimes the site (or budget) is too small to justify the work involved. I have also come to recognise that some of the theoretical benefits listed above do not always pan out in practice. However, on the right project, implemented in the right way, this can be a very powerful tool. A good HTML storyboard can act as the road map for the entire project.

Sticking up for the humble site map

Posted in User experience on by Paul Boag

I was working on a site map yesterday and realised how little thought I give them. They tend to be an after thought in the design process. Vowing to repent of this half-assed attitude, I set out to learn all I could about this under appreciated site tool.

Why site maps are cool

Perhaps it is a sad reflection on the state of my life but I have come to consider the humble site map quite cool. I used to add them to a site mainly because they were required if the site was to be Priority 2 compliant. However, I was to discover they have many hidden benefits:

  • Site maps are a lifeline if users are lost or frustrated with a site. Users often turn to them as a last resort. This means they are a great opportunity to save a visitor who would otherwise be lost to your competition.
  • Site maps can often be more successful than a homepage at directing a user to the content they require.
  • Search engines love them because they give quick access to the most important sections of the site.
  • Users who require a speech browser find them incredibly useful too as they can skip directly to the content they require without navigating through the sites hierarchy.

How to build a great site map

So, what did I learn about how to make a decent site map? Well there are a few simple tips you can follow to guarantee success:

Don’t be shy

Do not hide your site map away. According to testing carried out by Jakob Nielsen 85% of users were unaware that sites they visited regularly had a site map. Avoid this by not hiding your site map down in your footer and by clearly naming it "site map"

Keep it clean

Make sure your site map is clean and simple. Do not over design it or make it a navigational challenge in its own right

Don’t try and be clever

Do not use JavaScript to make your map expand and contract like windows explorer. This undermines the whole idea of a site map which is that you can see an overview of the whole site in one go.

Show where they have been

Use link colours to show users which pages in the site map they have already visited.

Show where they are

If you can use server side coding to show the user where they were in the sites information architecture before they entered the site map. This is the same principle as using a "you are here" marker on a map.

Don’t go overboard

If you have, a large site do not show every page on the whole site. A site map should not be more than a couple of screens in depth. More than this overwhelms the user.

What have I missed?

So there you have it, my guide to the perfect site map. If you have any additional ideas of how the humble site map can be improved please let me know.

New National Trust site: Accessibility failure?

Posted in Accessibility on by Paul Boag

Yesterday I wrote about the imminent arrival of the new National Trust website and my involvement in the last version. Well today, the new site has gone live and I am left feeling somewhat disappointed by the result.

Perhaps I am suffering from a case of sour grapes because I did not design the new version. Perhaps after 18 months of waiting and countless delays in the launch date I had set my expectations too high. Perhaps I was just being naive believing the publicity that promised improved usability and accessibility.

In my last post, I outlined four hopes I had for the new site. These were:

  • A desire to see the navigational shortcomings of the old site dealt with
  • A site that conveyed the awesome architecture and countryside the Trust manage.
  • A site built with the latest in web technology (web standards)
  • Improved accessibility

So let us look at each of these in turn.

Navigation

The problems of the old sites navigation were apparent to anybody. There were reasons why it was done in that way but at the end of the day, they are no excuse. My hope was that the new site would provide a clear navigational approach that would aid users to find their way around what is an enormous site.

Although the navigation is now definitely more flexible I am not actually convinced, it is any clear or easier to use.

It took me some considerable time to work out how the navigation worked at all. From the homepage, it would appear that the top-level sections are listed across the very top of the page. However, after navigating around the site for some time I discovered this was not the case. The top-level navigation is actually represented by the three boxes in the centre of the screen (which btw, appears below the fold at 800×600). The links at the top of the page are shortcuts to content buried deeper in the sites information architecture. Perhaps it is just me but I was totally thrown by the idea of only three top-level sections that appear as images below the fold of most users’ screens.

Once you move beyond the homepage things do not become much clearer. One click beyond the homepage and you arrive at landing pages for each of the main sections. These display the sub navigation at the bottom of the page. Click on one of these options and the sub navigation now leaps to the left hand side of the page. In its defence, this side navigation works very well. It is clear, consistent and highlights the section you are currently in.

Although in many ways, the navigation is a vast improvement on what came before it seems to have lost consistency along the way.

Site look and feel

In my last post, I said how I hoped they would make good use of the huge photographic library the Trust has to portray the amazing architecture and countryside the Trust manage. Now, look and feel is a personal thing, but I do not feel they have captured any sense of the Trusts holdings. The site seems to be more about navigation and interface than message. The homepage does the best job at portraying more and perhaps that is enough.

Web standards

Another less surprising disappointment was the fact content has not been separated from design. Why does this matter I hear you ask? Well without repeating everything that I have written on the subject in the past, probably the biggest drawback is with printing. The demographic the Trust is trying to reach generally find reading on screen a painful process. They tend to like to print content and read it offline. However, because this site uses table based design the printed version often looks messy and in a few occasions cuts off content on the right hand side of the screen.

I guess it is not the end of the world that the site is not built using web standards but they have missed many benefits by letting this opportunity pass them by.

Accessibility

This area is the one that really horrified me! The new site promised improved accessibility, but if anything, it has taken a step back. At the very least, I was hoping the site would pass an accessibility test by an automated check like Bobby, but it fails even that. The previous site produced back in 2000 allowed the user to resize text in the browser, and change the contrast and font size using a style sheet swapper. Five years on and not only does the new site fail even the most basic accessibility test but it also drops the only accessibility feature that existed on the previous version! I am in shock that the site could so badly fail its users many of whom have visual and physical disabilities associated with old age. Yes, it is possible to resize some of the text but much of the navigation now uses imagery that cannot be resized.

Bitter and twisted

Perhaps I am being melodramatic. Perhaps you are better off ignoring my sad rant that betrays my feels of rejection at not being involved in this rebuild. I would be interested to know what other people have to say about the site. Am I completely loosing the plot?

New National Trust site about to go live

Posted in Reviews on by Paul Boag

Back in 2000, I had the privilege of being the lead developer on the 2nd generation of the National Trust web site. With the third generation of the site about to launch, I am excited to see them move on.

Working on the National Trust web site was one of the most enjoyable sites I have ever done. When the Trust came to us they had little more than a "home made" site put together by some enthusiastic amateurs and a few technical staff at the Trust. We had the privilege of redesigning it from the ground up; information architecture, design, content, the lot.

Our approach

What was particularly enjoyable was there huge archive of photography. They had over 100,000 photos of some of the more amazing architecture and countryside in England and Wales. It did not take us long to realise that these images should rule the design and so everything else was built around that.

Project challenges

Accessibility

Of course, the project was not without its challenges. Firstly, the Trust wanted to ensure the site was accessible by their more elderly members who in many cases had failing vision. At the time, there was still much confusion about accessibility and how to ensure your site was accessible. Very different messages were coming from organisations such as the W3C, the RNIB and the British government. In the end we decided to adopt a similar approach to the "zoom the web" approach which seems to be the way things are moving at the moment. We simply switched to a different stylesheet to increase contrast and font size. Although the site was not WAI compliant, it did demonstrate some initial thinking in the area.

Navigation

The second problem area was navigation and in this, the constraints were much more frustrating. I will not bore you with the details but it is worth explaining that because of internal politics at the time we were only able to add a very basic header to the site that provided primary site navigation by a dropdown! In hindsight, this was my primary failing on the site. I feel I should have really fought for a more user-friendly form of navigation as dropdowns prove especially difficult to older users. However, I was not as knowledgeable as perhaps I am now and the whole industry has become older and wiser.

No content management system

The final problem with the site was totally out of my control. This was that the Trust wanted the entire site built as flat HTML. This was driven by technical constraints at their end and both the Trust and I were very aware of the maintenance problems going forward.

National Trust moves on

About 18 months ago, they finally decided to face the situation and move the entire site across to a content management system. As part of this rebuild, they also wanted to address some of the design issues and so a new look and feel was produced. Unfortunately, due to an internal reorganisation within the Trust and our lack of experience in the particular content management system they had selected, they chose not to employ Headscape to do the new look and feel. I have to say in many ways I feel this was the right decision. The Trust was a very different organisation to the one we first got involved in and I understood their desire to introduce new blood. In many ways, I felt I had done my part moving the organisations website to the centre of their marketing strategy rather than an added extra that received little funding and no serious consideration.

Waiting with baited breath

I have been waiting with baited breath to see the new National Trust site. For some reason they seem to have faced delay after delay in its launch. I do not know the details for this slippage but I would like to think they come from a desire to get the new site perfect before going live.

My hopes for the new National Trust site

So, what are my hopes for the site. Well, firstly I hope they fix the navigational problems the site suffers from. Secondly, I imagine the new site will dramatically improve from an accessibility perspective using the latest techniques and conforming to W3C standards. Thirdly, I hope they will move across to a web standards based build and all the associated benefits that has. Finally, my desire is to see a user interface that really shows off the beauty of the properties they own. The National Trust own some of the most amazing places in the world and I pray that their site captures that awesome architecture and wonderful countryside.

Accessibility for low vision users

Posted in Accessibility on by Paul Boag

Using web standards, many web designers have become a lot better at ensuring their sites are readable by speech browsers but what about the much larger audience that have some limited vision.

Feeling smug about accessibility

As I continue to work on the redesign of the Headscape website, it would be easy for me to become rather complacent about accessibility. After all, I have separated content from design ensuring the site degrades nicely on older browsers and works well for most speech browsers. I have even ensured all my XHTML is valid and the code passes a bobby check. What more could be asked of me?

The trouble with accessibility

The trouble is accessibility is about more than fulfilling a series of checkpoints or building to a certain set of standards. Sometimes things are more complex than that and sometimes there are no clear answers at all.

Low vision users

Take for example low vision users. Unlike speech browser users it is not enough to create clean code which their browsers can easily read (although even that has a whole bunch of issues I will not bore you with here). Low vision users have a number of requirements that need to be specifically catered for. For example:

  • They require a simplified interface free of anything but the most essential navigational elements.
  • They need a single column layout as content can be pushed off screen at large font size.
  • It is imperative the user can scale the font to any size without the design breaking.

So what are the options?

Remove the site sheet

The quickest and easiest option would be to allow the user to strip out all the styling of the site and see the raw content. It would not look very pretty but at least they would be able to scales it or even change the colours using their browser settings.

The downside of this approach is that this goes no way to meeting the first of our three criteria listed above because it just shows everything to the user.

Make the site scalable

Another option is to make the site scalable. This means that the interface adapts to compensate for increases in font size. However even the best scalable site is going to be hard pushed to accommodate some of the font sizes visually impaired users require. One option is to make the site elastic which means the whole interface magnifies with the text. The downside of this approach is that it can push elements off screen and as a result low vision users often fail to see them.

Of course using a single design approach to fit all also has an impact on the visual styling of the site as well as the usability. For example, a user who does not have a visual impairment is going to find a single column design frustrating and unattractive. It smacks of designing for the lowest common denominator where nobody wins.

Alternative stylesheet

The third option and my current favourite, is to create an alternative stylesheet for visually impaired users. Because we have separated content from design, it is easy to create a new style that can accommodate all of a visually impaired users requirements without compromising the standard design.

In some ways this feels like going full circle back to the days were we used an alternative accessible version. This approach was generally frowned upon especially by organisations such as the RNIB because these accessible sites often had less content and were poorly maintained. There was a feeling that disabled users were being treated as second class citizens.

The zoom layout is not like a ghettoized text-only page. It remains as fresh and updated as the regular page because the content is the same. All that has changed is the style sheet.

I tried to speak to the RNIB about this issue, but unfortunately despite assurances they would respond, have heard nothing. However, I then discussed it with Robin Christopherson at AbilityNet who specialise in assistive technology and he agreed that alternative stylesheets was the best option currently available:

If done properly they can radically alter the experience for different groups. This is quite different from ‘ghetoising’ groups by offering them an alternative site with, in most cases, less content or functionality (your ‘Text only’ link). It’s this that we and the RNIB object to.

The problems

Unfortunately, at the moment even this approach is not without its problem. The biggest and most obvious of which is the fact that when a user arrives at your site they have to first find the accessible version. This can be incredibly challenging and there is no simple solution. Obviously, a prominent link will help but at the sizes some visually impaired users would require this will totally dominate the design.

I am currently working on a JavaScript approach that would detect the font sizes specified in the users browser and change style if they are not the default setting. Of course not every person who happens not to be using the default settings are visually impaired and anyway there are significant browser compatibility issues to overcome.

The ideal world

In an ideal world there would be a way of telling the browser that a zoomed version is available. The user could then configure the browser to use this alternative version if it is found. Although there is some talk about making this happen it is still a long way from being a reality. In the meantime we might have to accept there is no ideal solution and endeavour to find a happy medium that provides the best possible to all users.

So what’s your approach?

So how does your site cater for low vision users? Do you do anything at all? I would love to hear how other people tackle the issue.

Further reading

If you want to know more about creating alternative low vision versions of your site I would highly recommend these two pages:

Zoom the web – presentation from the @media 2005 conference

Big, Stark & Chunky

 

Sample site review

Posted in Web strategy on by Paul Boag

A part of my job at Headscape is to provide site reviews for clients. These range from short overview reports to detailed studies on particular aspects of a site. I recently completed a review for a small ecommerce site called TrapAWasp and felt that it neatly tidied together a number of different issues I had been discussing in this blog. The client has been kind enough to allow me to publish it here so hopefully it will be of some use to others. Please bear in mind that this is only a condensed site overview and doesn’t tackle issues in much depth.

Summary

As with all ecommerce sites there are two key factors that dictate its success or failure. These are the number of visitors that are driven to the site and the number of those visitors who are then converted into customers. It is these two factors that Headscape uses to assess the effectiveness of an ecommerce site.

Without looking at the web logs of a site it is hard to tell just how successful the site is at converting users. However, the initial indications for TrapAWasp are good. The site is generally well designed, has few significant usability problems, and addresses most of the major questions raised by users considering purchasing online.

A more important problem exists with regard to driving traffic to the site in the first place. Although good use is being made of Google Adwords the organic listing on search engines (in particular Google) is very poor. We believe there is significant opportunity here as a cursory analysis of the competition makes us believe it would not take much to push TrapAWasp to the top of Google’s ranking.

Visitor conversion

In many ways TrapAWasp is an example of good design. It is clean, simple and focused on enabling users to complete a purchase in the minimum number of steps. However, as with all sites there is always room for improvement and so below we outline several issues which should be addressed.

Design

The site has a strong visual identity. It is well branded: the site name, use of imagery and introduction leaves the user in no doubt as to what the site is about. However, two issues are of concern and should be addressed.

Screen resolution

28% of users are still viewing their computers at 800×600. Unfortunately TrapAWasp has not been optimised for this resolution and therefore requires limited horizontal scrolling in order to be able to read the product descriptions. This also creates problems with the number of products the user initially sees on page load. At 800×600 it appears TrapAWasp only offers 2 products while at 1024×768 the site offers only 4 products. Although users will scroll they tend to make judgements on whether a site has what they want without scrolling down a page. Jakob Neilsen a leading usability expert suggests that key content and products should be visible without the need for the user to scroll. One possibility would be to move the "view details" link to below the description so compressing the amount of space required for each product. Although this wouldn’t make all of the products visible it would help the situation as well as correcting the visual imbalance of white space next to the last two products.

Click here for more on scrolling and screen resolution

Browser compatibility

Although well over 80% of users’ access the World Wide Web using Internet explorer it is a mistake to ignore other browsers. Due to numerous security scares more and more users are turning to alternative browsers such as Firefox. Firefox has now captured well over 8% of the marketplace and is continuing to grow rapidly. Although not serious, http://www.trapawasp.co.uk/ does have some problems displaying in non-IE browsers. Some examples of the problems encountered include text being rendered with the wrong font and images being incorrectly positioned. Although it could be argued these problems do not affect the usability of the site it can knock consumer confidence leading to the belief that the site is in some way unprofessional.

Usability

Usability is an extremely important area of ecommerce design. If a user finds a site hard to use they will often choose to turn to the competition rather than struggle to overcome the obstacles they are facing. Generally the usability on this site is excellent. However, three issues should be addressed.

Delivery address

One minor but very frustrating issue with the checkout form is the need to enter address information twice. Even if you do not check the box marked "Check if you require goods dispatched to an alternative address" you are still required to enter the delivery address. Small problems like this can prove incredibly frustrating and should be avoided if possible.

Deteracat

Another potential cause of confusion is the sudden appearance of a link back to Deteracat on both the checkout and credit card pages. We have no problem in principle to the advert for Deteracat on the right hand side of these pages as cross selling is a good idea and one that should be encouraged. Our concern rather, revolves around the "continue shopping at Deteracat" button in the main body of the page. This immediately generates doubt in the minds of users at a critical stage in the buying process. The user is left wondering if they have selected the right products or whether they have been transferred to another site. We understand the motivation for this approach and the ability it gives the user to purchase products from both sites at the same time however we believe that the confusion this causes outweighs the benefits.

Addressing user concerns

One final issue with regard to usability is the "how to buy" section. It is good practice to have a section that addresses many of the frequently asked questions users have regarding online purchases, but we feel that there is still room for improvement. More information needs to be provided within this section with regard to security. Users are hesitant to give credit card and personal details unless they know it is secure. Although you do provide this information on the credit card page this is late on in the process and after the user has already given you significant amounts of information. On a similar vein it would also be wise to provide some form of privacy statement here. Again we are aware that this information is available from the footer but we do not believe this gives the information the prominence it deserves. Finally we believe that the how to buy section should include information on delivery times as this is another common question and a significant number of users will be unable to view the flash animation on the homepage. In short there needs to be greater emphasis placed on answering users queries and that this section may need a name change to accommodate this kind of information.

Accessibility

It is easy to dismiss accessibility as being an issue solely about the disabled however the truth is that it is a much broader issue than that. Accessibility refers to ensuring a web site is accessible to the widest possible audience including disabled users, those with poor vision or motor skills such as the elderly, and those working within various technological constraints.

Disabled users

Disabled users in the UK have a spending power of £50 billion annually according to the Disability Rights Commission. What is more this figure does not include the elderly who have poor vision or motor skills. Catering to this audience provides a unique way to separate you from your competition. That is not to say that you ignore your abled-bodied users. Rather, we recommend that you make some modifications to your site to make it more disabled-user friendly. There is not time in this report to catalogue every problem disabled users might encounter with this site, but we can say that the site fails to meet even the most basic level of international standards on
accessibility (WAI Level A or Priority 1).

Click here for more on accessibility and business

Technological barriers

As well as creating barriers to the disabled a site can also create technological barriers which force users to turn to the competition. One example of this is in the use of JavaScript. JavaScript has been used in order to carry out the validation of the checkout form. These scripts check that each field has been correctly completed and informs the user of any potential errors. The problem is that 5% of users do not have JavaScript available so these users simply cannot purchase from the site. This is the equivalent of turning away one in twenty customers who try to enter a shop.

Another technological barrier is download time. Although broadband has exploded over the last year still over 50% of users still access using dial up. http://www.trapawasp.co.uk/ takes approximately 17 seconds to download on a 56k modem compared with say http://www.waspbane.com/ which takes only 7 seconds to download over the same connection. With a 10-second difference per page and a 6-page purchase process that is a minute of unnecessary waiting. It may not sound like a lot but website users are incredibly fickle.

Driving traffic

You can have the best website in the world but if nobody is aware of its existence then it means nothing. Unfortunately TrapAWasp does not have the online profile it should have and this will be having a direct impact on the number of sales being made. The problem is the most pronounced on Google where TrapAWasp does not feature within the top 100 results on valuable keywords such as "wasp traps" (results on google.co.uk were slightly more positive but not by much).

Not that things are entirely doom and gloom. TrapAWasp does appear to be supported by a very effective Google Adwords campaign that goes a long way to redressing the balance of poor organic listings. It also has better ratings on sites such as MSN search (listed 7 th) and Yahoo (listed 8 th). However with Google owning 69% of the British search market it is vital that TrapAWasp receives a good listing there. Pay per click campaigns can prove very effective but they also dramatically reduce profit margins and so should only be seen as a stopgap or compliment to organic listings.

After comparing TrapAWasp against other sites listed under rated keywords it became obvious that the problem laid in the sites link popularity.

Google uses a complex algorithm to calculate your position in the ranking. However, two factors dominate that placement. One is keyword density and the other is link popularity.

Keyword density refers to the number of times a particular keyword/key phrase appears in the content of the site. For example the phrase wasp traps appears 17 times in your homepage giving it a keyword density of about 11%. After comparing this to other web sites we discovered that TrapAWasp is on a par with the competition. It is therefore fair to say that this is not the factor that is limiting your rating. That leaves the factor of link popularity.

Link popularity refers to the number of sites who link to TrapAWasp and the perceived popularity of those sites. The more sites that link to you and that you in turn link back to, the higher your ranking. However, it is not just about numbers. It is also about the perceived quality of the site that links to you as well. For example a link from the BBC website would be worth a lot more than a link from an unknown name. Another important factor is the words used in the link to you. The words "wasp trap specialist" will rank you better on the words "wasp trap" than a link using the words "The Jones family business". Currently not a single site listed on Google link to you and this explains your poor ranking.

There is, however, good news. Even the sites ranked in the top positions on Google have very little in the way of sites linking to them. It would not take many good quality links to move TrapAWasp to the top of Google’s organic listing.

Click here for more on link popularity

Below I outline a few techniques that would significantly help your placement on Google:

Look for link partners

Firstly look for as many sites that will link to you as possible and get them to add your site. One way of doing this is to search on Google for the words "add url" and a related keyword phrase such as "wasp traps". Doing so led me to this site: http://www.backyardgardener.com/ph/gardenproblem/gardenproblem.htm which actually has listed a wasp trap that is no long available! There is an add url link at the bottom of the left hand navigation that will allow you to add your site.

Copy the competition

Go to Google and search on a key phrase that is related to your site. Copy the url of the site listed number one in the list and then search again using the following search phrase "links: <url of competition>". This will show you all of the sites that link to that url. Contact each of those sites in turn and ask them if they will also link to you. Once you have done this return to Google and repeat the process all over again but this time with the next site down on the list.

Message Board seeding

Another very effective approach is to take part in message boards on related subjects such as gardening. When posting on these boards you can add a link back to your site and so improve your link popularity. However, a word of warning on this approach. If you just post adverts on peoples forums they will remove them and probably ban you for good. A more successful approach is to contribute to the forum providing useful advice and insights. Almost all forums allow you to add a signature to your post and it is in this signature that you include a link to your site.

Increasing keywords

Although this approach is not related to link popularity it is a vital component of increasing the traffic levels to your site.

One of the problems with securing high ranking is that short keyword phrases such as "wasp traps" are highly competitive. However, users often use much long search terms and it is sometimes easier to target these. The best way of targeting them is to include a lot of copy on your site that is related to the subject matter. This is normally achieved by adding an articles section on your site. This can prove very effective
. Take for example the Headscape site. Web design is a highly competitive sector and competition for the keyword "web design" is immense. However because we have an extensive archive of articles we gain a lot of traffic through longer phrases. Search on "how do I become number one on search engines" and you will see what we mean.

We would recommend that an article section relating to wasps is added to the site. This could build on the existing content which talks about how to find a wasps nest and general information about wasps.

Conclusions

This review has outlined a number of areas in which TrapAWasp could be improved. However, our recommendation is that increasing the levels of traffic should be the number one priority. Poor ranking on Google is significantly damaging the levels of traffic and with a minimum amount of work we are confident that the site’s ranking could be dramatically improved.

National Trails web site launched

Posted in News on by Paul Boag

Today sees the launch of the Countryside Agency’s flagship website about the network of National Trails. This site is the culmination of month’s worth of work by the team at Headscape and I thought I would share with you a few of the highlights and lowlights of the project.

The brief

It was a challenging brief. Take twelve separate trail web sites and unify them under a common brand while still maintaining some sense of individuality. In addition to this, we had to conform to basic levels of accessibility, integrate a content management system that allowed individual trail officers to manage their own sites and come up with a user-friendly way of accessing a large database of accommodation and services.

Problems of interface

For me personally the number one problem to solve was the inconsistent user experience across these multiple trail sites. Users were faced with inconsistent positioning of navigation, different information architectures and conflicting terminology. The only sensible solution was to standardise the interface across all sites. Not only would this solve the user experience problems it would avoid the overwhelming challenge of having to come up with designs for twelve different sites!

Of course, there were two downsides to this approach:

  • This did not solve the briefs demand for a sense of individually on each site
  • It made it harder for the user to instantly tell which trail they were on

The solution was to give each site its own unique colour scheme. By doing this, you could associate very different feels with each site while also giving the user clear visual clues when they moved between different trails.

Web standards, the cornerstone of this project

Once I had decided upon on the approach it became obvious that a web standards approach would rapidly accelerate the development cycle. By separating content from design, I could create one basic layout and use cascading style sheets to change the colour palette of each site.

Web standards brought other benefits too. By separating design from content, we could easily address the need to conform to single ‘A’ compliancy in regards to accessibility. What is more we could easily supply an alternative printable style that ensured the site only printed certain page elements. I felt this was particularly important, as much of the information on the site would actually be useful to visitors while physically visiting the trail.

Finally, web standards allow us the ability to continually tweak and refine the design through the life cycle of the project and indeed after launch. This enables us to be much more responsive to feedback and work out any user interface bugs that might be spotted along the way.

The lowlights

I have to confess that normally I get to the end of the project like this hating the site because I have just worked with it too long. However, in the case of this site I do not feel that way. Of course that is not to say there aren’t a few things that still annoy me about it.

One of the biggest problems we have yet to overcome (although we are looking into some options) is the WYSIWYG editor we are using in the content management system. We seem unable to find an appropriate editor that produces clean code, which does not invalidate the occasional page. What is more there does not seem to be an editor on the market that forces the user into ensuring any content they add is accessible.

Another annoyance for me is that I have been forced to use some table layout on the homepage. This does not in anyway cause problems it is just a matter of principle on my part.

A crowning glory

Despite the odd annoyance listed above and a few hundred little bits and pieces, I am actually incredibly pleased with how this site has turned out. It truly is a crowning glory for Headscape and easily the best piece of work we have done to date (in my opinion). The size and complexity of the site as much as anything else makes it an incredible achievement. I have particular respect for Charlie Allen the project manager on the site who has dealt with 12 individual clients, and been responsible for the population of over 75000 web pages worth of content.

Another feature I particularly like are the flash maps created by Chris Sanderson one of our team of designers. He has come up with a brilliant way of giving people access to a large database of accommodation and services while also giving them a sense of the route the trail takes. This is an excellent example of how flash should be used rather than for nasty animated introduction with no skip button! Of course, in order to maintain accessibility we also had to provide a way of accessing the same information without flash.

Not that this is the end of our work with the National Trails site. There is always more to be done. The site will need tweaking and maintaining. There is site promotion to consider as well as new functionality to consider. Just because a site goes live does not mean it is ever truly finished.

The clients verdict

I couldn’t finish this entry without including a quote from an email I have just received from the client at National Trails:

I just wanted to give you my personal thanks for all your hard work on this site. I think its fabulous. I’m so proud of it and of the fact that we made the right choice of contractors to do the work!

Fearing the fold

Posted in Design, User experience on by Paul Boag

Its funny how challenging one preconception can leave you totally inspired. I am in the process of reading a book called CSS Zen Garden by Molly Holzschlag and David Shea based on David’s superb site. While reading the book and browsing the associated site I couldn’t help noticing that many of the designs were incredibly long and had little in the way of valuable content above the fold.

The preconception

Now somewhere along the line I had got it into my head that any content of value had to be kept above the fold (so users could see it without scrolling) when running at 800 by 600. In effect this mean ‘t almost all of your content had to be crammed into an area approximately 770 pixels by 430 pixels. This doesn’t leave a lot of room for decorative elements, let alone white space. As a result my designs often looked overly busy.

The usability question

Now just because another designer chooses to ignore a principle like keeping content above the fold doesn’t necessarily make it right. If that was the case then we would all still be using mystery meat navigation! But it did start me thinking about whether the principle still held true.

With that in mind I did a little research and came across this interesting article from Jakob Nielsen the well known usability "guru". He said:

In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behaviour is probably due to users getting more experience with scrolling Web pages.

Although he goes on to say that it is still good practice to keep navigation above the fold he does add:

…scrolling is no longer a usability disaster for navigation pages. Scrolling still reduces usability, but all design involves trade-offs, and the argument against scrolling is no longer as strong as it used to be .

What is more this report was written back in 1997 so there is no reason to believe that users have not become even more comfortable with the idea of scrolling in order to find content.

Where is the fold?

Obviously the other question here is, was I right in my assumption that I only had approximately 430 pixels of height to work with above the fold. This number is dictated by three factors:

  • The browser the user is working with
  • The screen resolution they are running at
  • Any additional toolbars they might be using as part of their operating system

To be honest it is hard to predict the first and last of those factors however there are some good statistics on screen resolution. I looked at several sources of statistics but probably the most representative was those found at thecounter.com as this site has stats on the widest range of users. As of May 2005 their stats showed the following trend:

  • 56% of users running at 1024×768
  • 28% of users running at 800×600
  • 8% of users running at 1280×1024

Another site stated:

The current trend is that more and more computers are using a screen size of 1024×768 pixels

Conclusions

It is apparent that the prevailing trend is towards 1024×768 but 28% of people still running at 800×600 cannot be ignored. However I do believe that the shift is significant enough to warrant some more flexibility in design. Combined with Jakob Neilsen’s testing on scrolling I believe it is fair to conclude that as long as users running at 800×600 don’t have to scroll sideward (in other words the width of your site doesn’t exceed approximately 770 pixels) then we can safely expect them to scroll vertically for content.

Speeding up the web development process

Posted in Development on by Paul Boag

I am currently working with our lead developer at Headscape to streamline the process of building and deploying content managed web sites. Part of this process revolves around seperating out the different aspects of a sites development to make it easier for multiple people to work on the site at the same time and to standardise some elements which had previously been bespoke to individual projects.

Current working process

Normally a web project runs something like this:

  • Establish initial design concepts
  • Work on the Information architecture
  • Create the site templates (XHTML) and style (CSS) for the site based on the designs and information architecture
  • Populate the site with content
  • Make the site live

Obviously this is hugely over simplified but you get the idea. However the problem with this approach is two fold:

  • It is a fairly linear process which involves each phase being dependant on the previous steps being completed
  • The site templates (XHTML) and style (CSS) have to be made bespoke each time to fit the project

A new working process

The process we are moving to helps to solve both of these problem areas. By seperating not only the presentation from the content but also the content from the structure you can start to standardise even more of the process. Let me explain:

Standardising the structure

As all the content is held in the content management system there is no need for the site templates (XHTML) to be bespoke for every project. These site templates no longer contain content but rather only define the structure of the site. After all the majority of sites contain the same basic structural content such as navigation bars, content areas and the like. By consistantly naming these areas you can then just use style sheets to change the way this structure is presented.

This approach means that instead of having to build the site templates and styles from scratch each time, you can have a basic predefined template which are then tweak accordingly. Obviously some changes will need to be made. The style in particular would have to be altered quite considerably for each project, nevertheless basic features such as column layouts could be predefined. The site templates would require only minor tweaking on a per project basis to take into account issues such as some clients wanting their news templates categorised by subject while others would want it organised by date.

Working independantly

This approach would also allow a lot more stages of the project to happen independantly. For example the person populating the content can do so even before the design is finalised because they can still navigate the unstyled site and see the content they have entered. The added bonus of this is that the designer can play around with different designs directly on the final structure and content. This means he can see exactly how his designs will work with real content instead of endless blocks of dummy text.

The result

The result of all of this is that an average content managed web site could be produced considerably faster and using less internal resources to do it.

Further reading

If you are interested in knowing more about seperating out the different layers of web design I highly recommend this article on the subject.

GPS it and they will come

Posted in Marketing on by Paul Boag

Have you noticed just how many people have satellite navigation systems in their cars these days? Still more have hand held devices that they use while cycling and walking. The majority of these devices allow users to download or manually enter points of interest. Does your organisation have points of interest people should know about?

Points of Interest

As you may have already gathered from this blog I have recently purchased a TomTom Go 300. It is a portable satellite navigation system that can be used while walking or in the car. Like many such devices it allows me to add points of interest and it wasnt long before I was surfing the web trying to find points of interest to add. What I discovered is there is a huge community of people collating and sharing POI on a variety of different subjects from National monuments to Burger Kings. Sites like POI handler and POI place were packed with locations to download. However many of the locations I was interested in downloading were either incomplete or simply not available.

Geo Caching

As I looked further I also came across a hobby which was totally new to me; Geo Caching. Apparently all around the country enthusiasts have hidden little boxes of "treasure". Often they include a few odds and ends as well as a pen and paper so you can show you managed to visit the "cache". The idea is that using just the GPS position you hunt down the cache as a kind of treasure hunt. Normally the caches are hidden at the end of a nice countryside walk and so encourage people to get out and about. There are some excellent sites that cater to this new "hi-tech" hobby including GeoCaching.com, however like the POI the available caches was often limited.

Driving visitors to your sites

It was at this point I started to think about some of my clients. Headscape does a large amount of its work in the heritage and tourism sectors including clients such as the National Trust and Countryside Agency. It occured to me that organisations like this are always seeking ways to promote their locations and to encourage more visitors. It would be an easy process to convert their extensive databases of attractions, accommodation, places to eat ect. into downloadable POI that could be used by anybody with a GPS device. Not only would it be an excellent resources for the growing number of GPS users it would also be an excellent way of driving visitors to their locations.

The same applied with the GeoCaches. Although slightly more work was involved in setting up a caches it was still a quick and easy way of promoting a key location.

In short, if you are looking for ways to attract visitors to the locations you promote then GPS provides a quick and easy way of generating visitors for minimal investment.

Make your site easy to print

Posted in Design on by Paul Boag

If like me you get frustrated by the fact that most web sites never print properly then you will be pleased to hear that you can format your web site totally differently when you send it to print!

A printable web site is vital

Lets face it, computers suck when it comes to reading large amounts of text. Although many improvements such as Cleartype have been made I doubt that the screen will ever replace good old paper for readability. The reality is that when most users are faced with a lot of content they want to read on a web site they tend to print it out and read it that way.

The problem is that few web sites print very well. It is common to see the right hand sides of web sites completely cut off when printed there by making the content unreadable.

Fortunately web standards based design can solve this problem by allowing you to completely change the appearance of your site when printed simply by using a separate cascading style sheet. This is because web standards separates design from the content of your site.

What to print and what to leave off

So what exactly should your site look like when you print it? Well there are two factors to consider:

  • The limitations of printers
  • The requirements of your users

The limitations of printers

Browsers tend to be fairly restrictive by default in what they print. This is largely in order to save their users ink on printing large areas of background colour which aren’t really necessary. As a result background images and colours are not printed by default and so should be avoided in print versions.

Secondly printers tend to have a narrower printable area than the average web site which is why sites are often cut off. Unfortunately each make of printer has a slightly different printable areas so I would recommend that any print version of a site is scalable to fit the available area.

The requirements of your users

At the end of the day the user is looking to be able to easily read the content he has printed. He is not interested in navigational elements which are redundant when printed. Take for example this page you are viewing now. If you were to print this you wouldn’t need any of the navigation or fancy graphics. All you would need is:

  • The branding – which site the print out came from
  • The title of the article
  • The content of the article

Everything else is redundant.

In order to aid readability (which is what a print out is all about) you should increase font size and use black text on a white background. This is not the place for lots of fancy graphics. Rather a print out should be entirely about ease of legibility.

Conclusions

In the past separate, easy to print version has been the domain of sites with expensive content management systems that could produce a separate printable version of a page. However web standards provides us with the opportunity to offer this type of functionality without multiple templates or maintaining separate versions of the same page.

Why not print this article to see these principles in action.

Design 101: Branding

Posted in Design on by Paul Boag

There are lots of articles on usability, accessibility, technical development and sales techniques for your web site but precious little on how to make your site aesthetically pleasing. I therefore want to post a series of articles on the basics of good graphical design. Today we will start with branding.

If you are responsible for your organisation’s web site the issue of branding is certain to have come up. How do you ensure that your web site reflects your offline brand identity? Well here are a few things to take into consideration:

The web is not the same as print

A degree of flexibility is required when portraying brand identity online. It is not always possible to accurately reflect branding in the same way online as in print material. The following issues can often cause a problem:

Fonts

Organisations often have corporate fonts which they expect to see reflected online. However not all fonts work well on screen. Serif fonts can be much harder to read online than in print and so should normally be avoided unless they are being used at a larger size for headings. Also it is important to remember that the majority of text will be dynamic and not graphical. This means that every PC which views that web page will have to have that font installed on their machine in order to be able to view it. To ensure that a user has the particular typeface the web designer will be forced to work with a very limited number of fonts. If your corporate typeface doesn’t fall into this set of universal fonts then it is best to avoid using it for anything other than graphical headings.

Colour

It is also important to note that a colour which works well in print won’t necessarily work well on the web. Colour in print is shown using ink on paper while colour on the web is displayed as projected light on a screen. Just this simple difference can dramatically alter the way the same colour appears. Combine with this the fact that printed colours are made up of CMYK while a monitor uses RGB to show your chosen colour. Finally it is important to remember that every monitor and PC graphic card will display your site with different brightness, contrast and saturation. This means your corporate colour might look fine on your monitor but appears almost black on another. It is important to take all of these factors into account when choosing how closely you stick to your corporate colour palette online.

Lost detail

Another difference between the web and print is the loss of fine detail online. I have already spoken about the problems with some fonts but it can also be a problem with logos too. The reason for this is to do with the number of dots per inch a monitor can show. When you look at a printed brochure your logo is made up of hundreds of tiny dots packed together. In fact the dots are so tiny and so close together that you cant see them. On average a piece of print work is made up of about 300 dots per inch. Now a computer monitor works on a similar principle however it can only show 72 dpi. This means that a lot of the finer detail is lost.

This can prove a real problem with complex logos that are being shown at a small size on screen. You might wish to look at ways of simplifying your logo in order to make it more web friendly.

Positioning

There is a general principle which you should be aware of when looking at how to apply your corporate branding to your web site. Users have come to expect to find the logo in the top left of the web site. This is a good idea not only because of users expectations but also because this is the first part of the screen the user will look at. Users will scan a web site from the top left to the bottom right (the same way we read a book – left to right, top to bottom).

The importance of tag lines

Your corporate branding online should also be accompanied by a tag line that clearly explains what you offer. Unlike when people read a brochure, users of your web site are much less likely to know anything about your organisation. In many cases they will have found you via a search engine and might not clearly understand what you offer. A tag line closely associated with your logo will make this immediately clear.

Find a web design company that can produce a range of styles

Finally make sure you find a web design company that can produce a site that reflects your corporate style. It is surprising how many web design companies have a very strong "house style" and find it hard to tailor their graphical style to match yours. Make sure your web designer has a broad portfolio of different styles or that their "house style" is inline with what you need.

Next time we will look at colour palette and how to go about choosing the right colour palette for your web site.

Top usability mistakes

Posted in User experience on by Paul Boag

I read an interesting article today which outlined some of the top usability mistakes made by major web sites. Here’s your chance to learn from their mistakes.

Here is a summary of the major usability blunders found on leading web sites:

No search function

It is amazing that there are major web sites out there that still don’t have a search function. A usability study by Jakob Nielsen found that more than half of all users will head straight for the search function on a web site. If you have a site that has more than, lets say, 100 pages you should be looking to add search functionality.

Massive download times

Many web designer are using the increase in broadband as an excuse for poorly built web pages. However broadband usage only stands at 27%so it is important not to alienate the other 73%. There is no reason why an average web page should take more than 10-15 seconds to load. Improvements in image compression and the cleaner code produced by web standards should significantly improve download time.

Find out just how quickly your site downloads.

Non-scannable Text

People read very differently online to how they read printed material. They tend to scan web pages rather than read word-for-word. It is therefore important to provide visual elements in order to aid scanning.

Read more about this subject

Unclear linking

Probably one of the first question somebody asks when arriving at a new web page is "where can I go next?". It is important to make it clear what the user can click on. Make sure links are obvious whether textual or image based. Never leave the user guessing what is a link and what isn’t.

Poor 404 error page

As I have just covered this in a recent article so I won’t dwell on it in any great detail. However I will say that providing a helpful error page when things go wrong is an invaluable usability aid.

Visited links not show

I have to confess it is only recently that I have come to understand the importance of this myself after reading another article by Jakob Nielsen. Users often find themselves lost within a site when it isn’t clearly marked which pages they have already visited. By simply changing the visual appearance of visited links the user has a much clearer idea of where they have been in the site and avoids going round and round in circles.

The use of frames

This could really be an article in itself. There are numerous problems with frames but some of the most significant usability ones are:

  • Pages can be unprintable
  • Pages can’t be bookmarked, nor their URLs emailed
  • The back, refresh and history buttons can become disabled
  • Visited links across frames don’t change colour

Important information contained in images

In order to have greater control over the appearance of text web designers often use images instead of dynamic text. However this creates usability and accessibility problems. Images take longer to download so those of us with slow connections have to wait for important information to appear. Those using older browsers or screen readers may find that information contained in images becomes totally inaccessible to them.

Unlike some, I am not proposing that you do not use graphical text. However I am proposing that all images should haveALT tags so the user can access that information while the page is loading.

Breaking with conventions

In my article entitled "why all web sites should look the same" I explain why web designers shouldn’t go against conventions. Users expect to find the logo in the top left. They expect to find navigation either across the top or down the left hand side. The web is incredibly confusing anyway, with every site having its own user interface. The last thing a web designer should do is add to that confusion.

Handling missing pages

Posted in User experience on by Paul Boag

No matter how well built your website is there is no avoiding the fact that sometimes the page a user is looking for just can’t be found. What matters is how you handle the problem when it occurs.

When a page cannot be found it generates something called a 404 error. This is usually shown to the user as an unfriendly generic web page generated by the browser itself. It does nothing to help the user find the content they are looking for and in many cases doesn’t even give them a decent explanation as to why the page didn’t appear in the first place.

What causes a 404 error?

404 errors can be caused by a number of factors. Some of the most common reasons include:

Pages being moved

Reorganisation of a web site is a common practice and one that often leads to broken links. Sometimes these can be links internally which were missed in the update, however more often than not they are external links from search engines or third party web sites that become out of date.

Mistyping

Where web site addresses appear in printed form it is neccessary for users to retype them into a browser. Unsuprisingly this can sometimes lead to mistakes being made and a 404 error being generated.

Designing the perfect 404 error page

As with all web design there is no perfect way to build a 404 error page. However there are some general principles that you may well wish to take into account:

Avoid redirecting

Many sites choose to redirect users to the home page instead of displaying a custom 404 error page. This can prove hugely confusing. Take for example this web site, imagine you had arrived on this site following a link to a specific article. If I had removed the article it would be confusing to find yourself redirected to the home page which would display totally different content to that which you had expected.

Make it obvious what the page is

It is important to make this page stand out. It needs to be made clear to the user at a glance that they have not been taken to the page they are expecting and how they should go about overcoming this problem. The design should be minimalistic while still containing the navigation and branding from the rest of the site.

Offer a site map

A site map helps a user gain a quick understanding of the overall structure of the site they have arrived at. It provides a context that should help them quickly and easily find the content they are looking for.

User friendly terminology

As somebody responsible for your web site I am sure you know what a 404 error page is (at least you do now you have read this article), however that doesn’t mean your average user does. Avoid using the term 404 error when creating your custom page. Rather explain that the page cannot be found in as an apologetic way as possible. Avoid giving the user the impression that you consider it their fault they can’t find what they are looking for.

Make sure the user can search

If you have an internal search engine use it. There really is not much more to say on this point. It’s a not brainer really. This will help users quickly and easily find what they are looking for on the site.

Conclusions

The web is a hard enough place to navigate anyway, without the further confusion of pages dissappearing when you try and access them. An intuative, well considered 404 error page makes a big difference to the usability of a web site. However avoiding the error in the first place is even better. Where possible fix broken links that occur. If the page has simply moved try setting up redirects to the new page or ensure the link is updated. Don’t see a 404 error page as a quick fix to fundermental problems with your site.

Is it time to upgrade your web site?

Posted in Web strategy on by Paul Boag

How do you know when it’s time to upgrade your web site? Should you expect to have to upgrade your site regularly? This article gives you the answers.

How do you know when it’s time to upgrade your web site? You may be receiving recommendations to improve your site only months after it was initially launched. Can you really be expected to invest more money in your site so soon? The answer is probably not. However, it is important to understand that your web site is not a static entity that rarely changes. Like the Internet itself, your site should constantly expand and develop.

Why should I upgrade?

So why do I believe that your web site should be constantly developing? Surely once you have put your message out there that should be enough. Unfortunately things don’t work that way on the web.

Because brand loyalty is a thing of the past.

Unfortunately the very nature of the Internet is fast paced evolution. With millions of websites only a click away, the stakes are constantly being raised and somebody is always doing it bigger and better. Users are constantly expecting more and brand loyalty is a thing of the past. You constantly have to work to ensure your customers don’t click from you to your competition.

Because your site will appear neglected.

New possibilities on the web are emerging so rapidly that it is easy for your site to look out of date. Although it is not possible to keep up with every new innovation, you do need to keep up with the main trends. If you don’t, your site can appear to lack investment and that reflects badly on the perception of your company.

Because users behaviour changes

One of the consequences of the Internet being such a new medium is that users are still coming to grips with it. The way they navigate, read and interact with web sites is adapting to enable more efficient browsing. Users have come to anticipate navigation being found in a certain place. They have also grown to scan pages instead of reading them and to filter out unnecessary information such as advertising. It is important that your site takes into account these changing trends.

To ensure compatibility

Unfortunately a lot of mistakes were made in the early days of the web. A lot of web sites were developed without anticipating the rapid changes in technology. As a result the technologies employed were not always the best ones for the long term. In order to ensure that your web site can grow in the future it is necessary to upgrade now rather than later.

When to upgrade

So when do you upgrade? Below I provide a list of questions that should give you an indication of whether now is the time. If you find that the answer to many of these questions is yes then its probably time for you to improve your site.

  • Does your competition have functionality and features that you don’t have?
  • Does the design of your site look dated when compared to others?
  • Does your site fail to show new product lines or still feature out of date products?
  • Has your business model changed so that the content on your site is not relevant in many places?
  • Are users not staying on your site as long as they used to?
  • Are your visitors leaving after only a few pages?
  • Are the hits on your site failing because you are seeing less repeat traffic?
  • Are you seeing a drop in leads, contacts or sales through your web site?

Will I always be upgrading?

It can begin to feel like you are constantly making changes and improving your web site and to some extent that is how it should be at the moment. The Internet is still in its early stages and your web site has probably only been around a few years. People are still learning how best to use the web and the technology is still evolving.

However, it won’t be like this forever. As with any golden age, from the Industrial Revolution to the Renaissance, things will eventually slow down and equilibrium will be reached. Standards will be established and technology will develop less rapidly. Already many lessons have been learned and a longer term approach is being adopted.