Tag Archives: Colour

Web standards at all costs?

Posted in Web strategy on by Paul Boag

So should you always build sites using web standards? Should tables really only be used for tabular data? Is it CSS at all costs?

I received an email today from a web designer called Keir with a question for the podcast. It is a question I have heard many times before, but because of work I am currently doing for Headscape, I have had to think twice about the answer.

Here is what Keir wrote:

Why would I want to design using CSS considering the amount of work that has to go into building a CSS site that is compatible with all major browsers, using hacks and work arounds when I could build one straight forward design through tables in a fraction of the time that would look practically identical in all browsers (aside from the ease of updating design?)

Actually taking time to think about the answer

Under normal circumstances, I would have just referred Keir to the article I wrote on the benefits of web standards, but today was different. Today I was building a disposable wireframe for usability testing, which for the sake of speed was being produced using tables for layout. Today, I have also been thinking about Headscape’s business strategy and the impact of web standards on some aspects of our productivity.

Not all approaches suit everybody

Sure, web standards have a huge list of benefits but is it always the right solution for every web design agency? Possibly not. Let’s live in the real world here, building table based sites is quicker for small, flat sites that rarely (if ever) change. Okay, you might have headaches later on but for some web design companies that is not an issue. Take for example a small web design company that is building cheap, flat sites for estate agents. Estate agents are not willing to pay more than a few hundred pounds for their site and care little about accessibility, or future proofing. All they care is whether it looks okay in Internet Explorer. Now, the web design company has a choice. They can do one of the following:

  • Explain to the client the benefits of web standards and why they should pay more for their site to be built properly
  • Take the risk of running at a loss and build the site with web standards anyway while still keeping the price low.
  • Churn the site out, tables and all, using a WYSIWYG like Dreamweaver

Commercial reality matters

I am sure some of the web standards evangelist would argue that the web design company should take the first option. I would suggest that in the real world of commercial design this would be a mistake. Not only would they probably loose the work but also even if they did win it I am not convinced that the estate agent would really feel the benefit. After all, will it help to sell more houses? Possibly, but I doubt it would generate a big enough return on investment to justify the extra expenditure.

So what am I saying?

I am not suggesting that if you are a small web design agency (or freelancer) who works on small websites, you should not bother with web standards. What I am saying is that you have to be pragmatic and that you can introduce some elements of web standards while leaving others aside. For example, probably the majority of delays with web standards come from positioning. Having to use floats and absolute/relative positioning can sometimes prove a lot trickier than simply adding the odd table.

Mix and match

Maybe for some it is simply easier to use tables for the basic layout and then use web standards for things like fonts, colours and design details. This does not have to be an either or decision. The transition from odd school design to web standards can be a gradual process and you can judge how far down the web standards root you go on a per project basis. Like all aspects of web design, the use of web standards has to be a compromise and it should be used as and when appropriate. However, remember, you cannot choose when you use web standards if you have never taken the time to learn it. Web standards should be another tool in your tool belt that you choose to use when appropriate.

For more on getting the balance right between business drivers and technical considerations read "the missing pillar of web design"

The missing pillar of web design

Posted in Web strategy on by Paul Boag

After listening to the various podcasts coming out the Web Essentials conference this year it has made me think a lot about the nature of web design and the current state of the industry. Although there are some very exciting developments, I am concerned that we may be in danger of loosing some perspective.

Six Pillars of web design

For fear of stretching an analogy, I believe that there are six pillars of web design. Each pillar represents a fundamental part of any website development project and a successful site has an equal balance between all pillars.

These pillars are:

Usability

Usability is a well-recognised sphere of web development with many champions such as Steve Krug and Jacob Nielsen. Sites with bad usability suffer from poor rates of repeat traffic and failure by users to complete calls to action.

Accessibility

For the sake of this article, web accessibility refers to making your site accessible to the widest possible audience whether they are disabled, using old technology or alternative devices. This is a particularly popular area at the moment within the web design community, with a lot of effort being put into developing techniques to improve site accessibility.

Aesthetics

Aesthetics refers to the branded look and feel for a site. Covering colour schemes, styling and interface, aesthetics has a huge impact on how a users perceives a site. For a long time this was my far the most dominant pillar of web design but now it is seen by many as secondary.

Development

This pillar of web design is experiencing phenomenal growth, with ever more powerful "web applications" emerging. It covers web standards and AJAX as well as more traditional server side scripting.

Content

In many ways, this pillar is ignored by many web designers being considered "the clients problem". The reality is that content can make or break a website. Well-written, easy to read content combined with useful applications can go a long way to supporting an otherwise weak site.

Objectives

This is the missing pillar of web design. Often overlooked in the web design process and yet fundamental to any sites success. Why does the site exist? What is it trying to achieve? What returns on investment are required? These are all essential questions that are easy to ignore. Fundermentally this is the "business model" behind the site.

Since initially writing this article Alist Apart have published an excellent article on site objectives and strategies. It is definately worth a read.

Maintaining the balance

Problems arise when these pillars are not in balance. If one pillar is removed, or even if one pillar becomes greater than another does, then the whole structure becomes unstable.

Like in every other area of life, web design goes through "trends". From brochureware to flash, from web standards to AJAX, we are all prone to jumping on the bandwagon. Of course, in once sense this is a good thing. When we see other people’s groundbreaking work, it inspires us to innovate ourselves. We are seeing this with AJAX and Web 2.0. There is a lot of innovation happening around the "development pillar" and that is good to see. It should be applauded. However, we must be careful to ensure that this pillar does not become unbalanced with the others. I am seeing many web 2.0 applications that function wonderfully, degrade nicely, look stunning, but are at the end of the day are pointless, lacking a clear objective!

The sixth pillar

I hear a lot of grumbling in the web design community about clients. Our clients aren’t interested in accessibility or AJAX or web standards. Many see their clients as being ignorant and a barrier to progress. Although I am sure there is the odd ignorant client out there, I think the main problem is that they focus most heavily on the one pillar of web design we largely ignore… objectives.

They are concerned with the sites return on investment, whether that is in sales, leads, or brand awareness. They don’t care about accessibility unless it will help them achieve their objectives. They are not interested in the underlying technology if it won’t solve their business problems.

The holistic approach

So who is right? Are our client’s right to obsess about objectives and goals, or are we right focusing on accessibility and applications? The reality is that we should be taking a holistic approach to web design where we all at least keep an eye on the other pillars. Even if you specialise in accessibility you should not be blind to technology and equally if you specialise in technology it should not be at the expense of all else.

By maintaining an overview of all the pillars of web design, we are sure to keep them in balance and prevent too much bias towards any one area.

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.

Sugar and spice

Posted in Design on by Paul Boag

According to some recent research by the University of Glamorgan, if you are designing a site primarily aimed at women, it is worth ensuring a female designer is working on it.

To summarise, the report claims that women are drawn to design by other women and there are major differences between the design style of men and women.

This is certainly something that has been borne out by my personal experience of working with female designers. I have been fortunate enough to work with two extremely talented women designers in the past and found that there approach to design was markedly different from the approach taken by their male colleagues. In particular their use of colour was much more refined and they tended towards more rounded (less aggressive) forms. These are just two of 23 distinct factors the research went on to identify.

Of course, there is one fundamental flaw in the approach of using female designers for women orientated sites. The problem lays in the fact that there are so few female web designers around. I recently attended the @Media 2005 conference for web design and of the 300 delegates; there were only approximately seven female designers. This surprises me as a large amount of web design work is highly creative and the arts generally have a strong female representation. No doubt, this is to do with the fact that web design is often perceived as a technology related area not an arts related subject. Technology as a whole is male dominated and so perhaps this is putting off women when considering a career choice.

It is my hope that we will see more women moving into the field of web design in the near future however in the meantime it is worth bearing in mind the research carried out by the University of Glamorgan. If you are forced to use a male designer for a female orientated site make sure the design is tested against a female audience before rolling it out across the site.

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

 

Stuck for inspiration

Posted in Design on by Paul Boag

I received a brief today that required some mock-up designs to be produced, however the brief made no mention whatsoever of design. There was no logo, no colour palette, no style guide, no likes or dislikes… nothing! There is nothing worse than a completely blank canvas. My trick for dealing with it is to start with colour.

Colour can be a powerful influence over a design. Colour can dictate mood, style and even choice of imagery. That is why I find it a useful starting point.

All I had to go on was what the organisation did and the area they worked in. They were a government body that helped to rejuvenate towns in the south west of England. That was fundamentally all I knew.

Now fortunately, I live in the South West of England (Dorset). I have many relatives spread out through Cromwell, Devon and Somerset and could refer to family photos for inspiration. A quick walk around my hometown also helped, as well as getting some fresh air into my lungs!

This trip around the area either virtually (using my photos) or physically (by walking around town) helped me to pick up certain characteristics. These included; the coastline, the rolling countryside and the soil (especially in parts of Somerset where it stains everything red even the bricks of the buildings). Suddenly I had something to work with which eventually led to this basic palette

So what is the morale of this story? Do not sit staring at a blank screen. Get up, look for inspiration offline and approach the problem laterally.

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!

Accessibility debates, more harm than good!

Posted in Accessibility on by Paul Boag

There is a growing rift between web designers over the issue of accessibility. Three camps exist, those who believe accessibility is about disability, those who believe it is broader than that and those who really do not care either way. As normal, my position is a foot in two camps.

There is currently a virtual fistfight ensuing between numerous well-respected figures in the accessibility community that represents of a wider gulf that is emerging between web designers.

The two positions taken are as follows:

Accessibility is about the disabled

Many believe that web accessibility is entirely about meeting the needs of disabled people. It is about helping those who have no control over how they access web sites because of some physical or concoctive disability. These developers believe that if people chose to use incompatible software, whilst there are compatible options available, then this does not constitute an accessibility issue.

Accessibility is not just about the disabled

The other side of the argument is that accessibility is not "just" or even "primarily" about people with disabilities. Rather, it is about going to all reasonable lengths to ensure the widest possible access to information you provide on your site.

Feet in two camps

With fear and trepidation, I would like to wade into the middle of the debate by suggesting that the pragmatic and socially responsible approach lies somewhere in between.

Socially responsible

I believe that accessibility should be about more than meeting the needs of disabled users. It should certainly extend beyond the sometimes-limiting checkpoints of the WAI guidelines.

I do not believe we can always expect users to upgrade or change their browser options simply because it is theoretically possible. As web designers, we work with computers and browsers all the time. It is easy therefore to forget that the majority of people do not know how to upgrade their browsers or even change their default settings. Hell, many of them have trouble completing online forms! Even if they do, there are many environments where that option is unavailable to them such as in some corporate offices or in a public library where configuration is limited or non-existent.

Pragmatic

After saying all of that you have to draw the line somewhere. The real world, with limited timescales, and finite budgets, does not allow you to develop around every browser bug or accommodate every possible limitation. In the real world, you have to worry about return on investment. Is it worth 2 weeks work to get your site working successfully on a Mac when your selling a product that only runs under windows? Is it worth making sure your site works with screen readers when you are offering driving lessons? In some situations the answer to both those questions could actually be yes, but what you need to ask yourself is how often is that the case. In addition, some functionality is just impossible to reproduce in an entirely accessible format. In fact, I would go as far as to say it is impossible to make a site entirely accessible anyway. We need to resign ourselves to the fact that accessibility is full of grey areas and we have to endeavour to do the best we can with the resources available to us. We need to make decisions on a case-by-case basis.

Don’t forget the third camp

At the beginning of this entry, I mentioned three camps. It is important to remember that there is a huge number of web site owners out there that have not faced up to the issue of web site accessibility at all. Arguments like this can just make an intimidating subject even more so. In my opinion, taking one-step into the world of accessibility is better than doing nothing at all. If all you do is ensure your site runs in a browser other than internet explorer or that colour-blind people can still read your copy then that has more value than all the endless theoretic debates in the world.

How to ruin a design

Posted in Design on by Paul Boag

I don’t have a proper post for you today. I guess its more of a rant than anything else. Why is it that some of my clients just can’t make a decision on their design?

I have a client at the moment (I wont use names to protect their identity and my income from them) that is going around and around in circles over the design I have created for them. When they first saw it they loved it. Raved about it in fact. However they then started picking over tiny details until now they aren’t sure about any of it.

Well rather than just moan about them I thought I would see if I could get to the bottom of what causes this kind of situation. After all they are not unique.

This is what I have come up with:

Design by committee

One of the most common problems with choosing a design is that more than one person is involved in the decision making process. Because design is subjective you will get a different opinion from every person you show. The more people you show the more opinions you get. If it is necessary to keep all of these people happy you often end up with the lowest common denominator at the end of the day and then nobody likes it.

Can’t see the wood for the trees

Often clients get too close to the design. They think about it too much and end up over working the problem. Its something that as designers we are trained to avoid. “Know when to stop” was one of the first lessons I learnt as a professional graphic designer. If you look at something too long and work on it for too long you will end up ruining it. Its so important to step back and maintain perspective but often people fail to do that.

The domino effect

This is a bit tricky to explain but I have seen clients do it again and again. They look at my design and generally really like it but there is one thing they are not sure about. Instead of going back to the designer and saying “I am not sure that typeface is working” they come back and ask me to change it to Arial. However when that doesn’t look any better they ask me to change something else in the hope that the second change will sort out the first change. This process can go on and on without end. I guess it is partly to do with the point above because they make small changes which end up throwing the whole design out of balance and no amount of additional changes will fix that. They have lost the bigger picture.

Micro management

My clients pay me a lot of money to build them a web site. I am not cheap and they could certainly get somebody to do it for a lot less money. So why do they hire me and not some student working out of his back bedroom? Well I would like to think it is because of my experience. Certainly that is what I am often told. However a surprising number of those clients that say exactly that then go on to micro manage my design. I have had clients tell me to move a box one pixel to the left or to the right. I have had clients ask me to change type size, colours, positions or any other design element you can think of. In short they design it themselves and just use me as an intimidate between them and the software they don’t know how to use. What a waste of money! If that is the way they want to work they should hire somebody a lot cheaper. Why spend all that money on me if they don’t value my opinion or experience. I don’t mean to sound arrogant, but it just seems common business sense to me.

Conclusions

So do I have any conclusions… well no, not really. Perhaps this is just a warning to those of you out there hiring web design companies. The client can make or break a project. You can hire the world’s best web design team but if you aren’t managing them correctly your web site will not reflect the skill of the people you hired.

I am not saying you should just go along with every suggestion the web design company makes. Rather I am saying stick with what you know well. You know your company and you know how to sell it. Let the web designer translate that knowledge into the online medium.

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: Colour

Posted in Design on by Paul Boag

In the first of my series on the basics of good web design I tackled how to handle branding. In this article I want to deal with the more subjective issue of colour. How do you choose the right colour palette?

A subjective decision

The biggest problem with choosing the right colour palette is that it is all down to individual taste. Colour is a matter of opinion and there is no right or wrong answer. As a result you will get as many opinions on your colour palette as people you ask.

Differences in colour

Part of the problem is that we all perceive colour in slightly different ways. Also roughly 1 in 20 people have some form of colour vision deficiency.

However that is just the beginning. In addition to the differences that exist between people in the way we perceive colour, there is also differences in the way our computers show colour.

There are a whole range of factors which affect the way our computers display colour. These include:

  • Monitor type
  • Monitor brightness and contrast settings
  • Graphics card used
  • Operating system being used
  • Colour depth
  • Gamma settings

Colour theory

Because the choice of colour is so subjective and because you cannot guarantee exactly how a colour is going to be finally displayed to the end user it is important to remove the choice of palette from the realms of personal opinion. One way to do this is to use colour theory.

A lot of research has been done in how users respond to colour and what emotional connections they make. We all know the basics like red means danger or blue is cold. However this area of research has gone much further.

An excellent book on the subject is Shigenobu Kobayashi’s book Color Image Scale. This book provides over 1000 colour palettes organised by mood, taste and lifestyle. What this book allows you to do is look up a concept such as "Urban" and find an appropriate colour palette.

I know that many people are skeptical of books like this but I believe they have real value. Kobayashi’s book was based on research done over 3 years involving analysing responses to colour from a large sample audience. Surely this is preferable to a few individuals debating the subject based on personal preference.

Corporate colours

Of course in many situations you don’t have the luxury of starting with a blank palette. Often you will be required to work with an existing corporate colour such as IBM blue. In these cases it is a matter of finding complimentary colours that work well with your corporate colour.

Again, in order to avoid descending into the world of personal opinion, I prefer to use colour theory as a base on which to build.

Fortunately there are some excellent tools out there that will help you build a palette based on a single corporate colour.

Some sites worth experimenting with are:

Color Match 5KColor scheme generator 2

However by far my favourite is a piece of software called Color Schemer Studio. This brilliant tool allows you to create a variety of colour palettes based on long standing colour theory principles. It also exports them in a variety of formats and provides RGB and HEX values. It even helps you ensure high contrast for the best web site readability.

Conclusions

This article just scratches the surface of an enormous subject but hopefully it provides a few useful tips to get you started on creating effective colour palettes while avoiding the squabbles of personal preference. In my next article in the Design 101 series we will look at structure and layout.

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.

How we are relaunching our own website

Posted in Web strategy on by Paul Boag

Its a bit embarrassing really. One of the primary things Headscape sells itself on is our experience with accessibility and the fact that we build using web standards. However our current site has a totally separate accessible version and is built with standard HTML. Looks like it is about time we redesigned our website!

I thought it would be good to take a slightly different tactic to most website redesigns where the company keeps the design under wraps until it goes live. Instead I thought I would share some of my experiences as we redesign the site and let you see some of the thought process we have gone through.

Establishing our aims

The first step in any redesign is to be clear about your objectives. Why do you want to redesign your site in the first place. After all in Headscape’s case we have received some very positive feedback about our current site.

Our goals are three fold:

  • Create one site to meet every bodies needs instead of having a separate accessible version. This will be inline with the position we now take on accessibility.
  • Create the new site using web standards is order to speed download, improve printability, and make the site easier to update.
  • Give the site a new look and feel so we can relaunch it and generate some renewed interest in the Headscape brand.

What we didn’t want to do is make huge changes to the content as we don’t have the time internally to do that. We intended to make some minor updates to the case studies section but that was about it.

The design approach

Once we had a clear idea of our goals and knew exactly what our content would be it was time to move on to the design stage. I also knew that the colour scheme should be similar to the existing site and where possible the existing brand should be reflected. I also knew from feedback we have received that the site needed to be lighter in colour. With all of this in mind I produced the following:

Click here to see the new homepage design

Getting some feedback

Before we proceeded too much further we wanted to get some feedback on the site and see if we were heading in the right direction. We weren’t at the stage of full usability testing yet but some initial impressions would be nice. So far I have asked for a web site review from members of a forum I regularly contribute too and this has been very useful. My next step will be to ask some of our clients to take a look at the design and let me know what they think.

A final little twist

A final little idea I wanted to share with you before I close is the banner at the top of the new design. You will notice that it refers to accessibility. The idea of this block is that we are going to detect what people have entered into the search engine and change the banner accordingly. In other words if they have searched on accessibility they will see an accessibility banner while if they typed in usability they will see a usability banner. This not only allows the user to quickly find the content they are after but also makes us appear to specialise in exactly the area they are interested in.

Conclusions

So that is as far as we have got so far. Please feel free to post your comments on the design below. Any feedback is much appreciated. I will keep you updated on how things progress.

Effective web site copy

Posted in Site content on by Paul Boag

One of the visitors to boagworld.com recently wrote to me asking for some feedback on his organisations web site. One of the things I commented on was the copy found on the site. Not only was it too long but much of it was hard to read. I therefore thought it would be a good idea to post an article on the subject.

Writing the copy for a website can be a big challenge and it is one that often falls to the website manager in preference to the web design company. In some ways this is understandable as the web professional can’t possibly know the ins and outs of how your organisation operates. However this does put an enormous burden on the site owner to write for a medium unlike any other. That is why below I have outlined ten things worth taking into account when writing for the web.

Don’t patronise

I am shocked at quite how many sites treat me like the village idiot. I want to be informed but I don’t want to be patronised. Be careful when writing copy for your site not to treat people like fools.

Make it personal

The web is a very impersonal environment and computers are never really perceived as friendly. It is therefore important to compensate for this in your writing style. This can be a difficult balance to strike. You should appear friendly but not over familiar. Try to keep your writing style approachable in order to encourage users to trust you and therefore purchase from you.

Remember the medium

Never forget that your users are reading your copy on screen. Computer monitors have a crippling effect on the eyes and cannot often be viewed for extended times. Therefore keep your writing brief and to the point. Also ensure line lengths aren’t too long and that a print version is available for longer documents.

Make sure you can scan it

Because on screen reading is difficult and the web can overload us with information users rarely stay on a website for long. You will not often find a user reading an entire page of text. It is therefore important to make your content easy to scan. You can do this in the following ways:

  • Put important information or even a summary at the top of the page
  • Make use of headings and subheadings
  • Use bold, italics and colour to highlight important content
  • Use bullet points where possible

Say what you mean

Most people mainly use the internet as an information source. Their primary objective is information gathering. They therefore need copy that is direct and to the point.

Avoid marketing talk

Internet users have become acutely aware of marketing spin. Try and avoid the heavy sell. Users respond much better when you simply present the facts and allow them to make their own decisions.

Avoid jargon

Remember that not all your users will use the same terminology as you. They won’t necessarily know all the acronyms and industry terms which are so familiar to you. It is often worth passing copy via a family member or somebody unconnected with your industry to see if they understand it all.

Keep it short

Krug’s third law of usability states "Get rid of half the words on each page, then get rid of half of what’s left". Steve Krug is a usability expert that I admire greatly and although he was exaggerating for effect I do believe he has a point. Because users just don’t read large amounts of text on screen there is little point of it being there. Wherever possible keep text to a minimum and be sure to omit needless words.

Remove instructional text

Users don’t generally read instructions. Normally they just muddle through. When you do need to have instructions be sure to keep them to an absolute minimum.

Remove happy talk

Again this is Krugs choice of words and not mine but he makes a fine point. Krug refers to happy talk as anything that fails to convey useful information. It usually consists of sentences that begin with the phrase "welcome to…"

Accessible sites don't have to be ugly

Posted in Accessibility on by Paul Boag

Headscape have just launched a new web site for HACT. Hact is a development agency that acts as a catalyst for change in the housing sector. But what is significant about the HACT web site is that it is WAI Priority three compliant. In English that means it meets the highest standards in accessibility.

Still visually appealing

The big compliant designers always make about accessible web sites is that it compromises the sites look and feel. I have to say I think that is just an excuse for the fact that designers are put off by the intimidating list of requirements relating to accessibility. An accessible site does not need to be ugly. In fact all of the web sites I produce are compliant to at least the basic level of accessibility (Priority one). Take for example South Devon Area of Outstanding Natural Beauty. I hope you would agree that looks just as good as any other web site. I did not have to compromise at all on the design for this site in order to meet the minimum accessibility requirements.

Some challenges

I would however be lying if I was to say that building sites which meet the highest level of accessibility had no impact on design. At this level there are certain issues the designer needs to be aware of and take into consideration:

Scalability

When you try and make your site very accessible one of the requirements is that the site scales to fit the browser window. This can prove a problem for many designers because it means you cannot guarantee exactly how the site will look on different machines. In particular it can create a problem for users running at high resolutions because they have very long lengths that can become hard to read.

Font sizes

Sites that go beyond the basic level of accessibility also need to make the fonts on their web site re-sizable. That will allow users to manually change the font size using their browser. This can cause problems for a designer because the design needs to be flexible in order to accommodate text of varying size.

Javascript

Accessible sites cannot rely on Javascript too heavily. That is not to say it cannot be used, but the site needs to work without it. Many designers use Javascript for all kinds of functionality from popup windows to rollover buttons. However there is almost always work around’s for these problems if the designer is willing to persevere.

The visually impaired

One of the groups you need to be aware of when building highly accessible web sites is the visually impaired. It is therefore important that if you use images to convey information that this information is also available in another way. Equally using colour to convey information such as the current section of the site can cause problems.

The problems can be overcome

So yes there are some problems in building a site that is highly accessible but nothing that cannot be overcome with a bit of planning at the design stage. I would hope you agree that from looking at the HACT web site it is obvious that a web site can be both accessible and attractive visually.

Art direction on the web

Posted in Design on by Paul Boag

Your site might be the easiest to use, most accessible site in the world but without a good concept it may well fail to sell.

What is art direction?

The first thing to say is that art direction is not a new concept. In fact, it is one that is found in almost every other creative medium. You find art directors in film making as well as in print design and the world of advertising. Their job descriptions differ slightly from sector to sector but fundamentally they work alongside graphic designers and copywriters to come up with concepts that sell products or communicate ideas. They often communicate with us on an emotional level through the use of metaphor and symbolism. Art direction finds the switch that makes us buy into the product or concept they are trying to sell.

We are constantly exposed to the end product of art directors. Just try looking at billboards as you walk down the street or watching TV commercials and you will immediately see art direction at work.

How does this relate to the internet?

The sad truth is that although art direction has proved itself in every other advertising and marketing medium it has been largely ignored on the web. When it comes to web site design, developers focus almost exclusively on the interface, its usability, accessibility and functionality. Some attention is given to copy but only in an attempt to keep it easy to scan and digest. All too often little thought is given to the concept behind a site.

Let me give you an example of what I mean. Suppose a company who produced stair-lifts for the elderly were looking to launch a new website. Most web design agencies would focus on making sure it was easy for the elderly to use. They would ensure that the buttons were easy to click, that text was large and had sufficient contrast to improve readability. The graphic designer would probably include lots of stock photography of people using stair-lifts and warm reassuring colours. He will focus on whether to have a two or three column layout and how to incorporate the logo.

Although all of these things are important they fail to address the overall concept that will sell the product to the user. The approach lacks art direction. An art director focuses on a concept that will promote the benefits of the product. Stair-lifts provide freedom to an elderly person and open up areas of their house which have not been available to them for sometime. The art director may then focus on concepts of unlocking closed doors, breaking free of chains and flying free like a bird. This would be reflected in the choice of imagery and the copy used. This subliminal messaging reinforces the more traditional approach to web design and helps to move the user further along the sales process. It connects with the user on a deeper emotional level than traditional web design.

The way forward

So how do you begin to apply these techniques to your site?

Establish your concept

Have it clear in your mind what it is that you wish to communicate – be that the unique selling points of your product or the key message of your site. Also ensure that this message ties in with your objectives for your site. Always ask yourself, is this going to help me achieve my goals?

Brainstorm

Do whatever it takes to come up with as many ideas as possible. The more ideas you generate the higher probability one of them will be a gem. Don’t censor yourself. Write down everything that comes into your mind however bizarre it may seem. Also don’t worry about the details. That can come later. Focus on keeping up the flow of ideas and getting them down on paper. And remember, focus on symbolism and metaphor. The idea is to communicate your concept on an emotional level not necessarily a literal one.

Narrow the field

Now that your ideas are down on paper start to work through them and remove the weaker ones. Once you have narrowed the field to a few of the best start to flesh them out and add detail. Compare them to your objectives again to make sure they clearly communicate the right message. This process should make it clear which is the best concept to proceed with.

Managing the team

Now is the time to work with your designer, programmer, copywriter or external design agency to apply this concept to your site. Remain flexible, since a good idea can always be better, but don’t allow your concept to get lost in the practicalities. It is your job to bring all of these people together to turn your concept into a reality.

Conclusions

So is that all there is to art direction? Of course not. To a large extent art direction is a creative process that is hard to quantify. If you are not confident thinking in this way then maybe you are better finding a web design agency that offers these services. However, don’t be afraid to experiment. A good concept can have a dramatic effect on the response levels your site generates and shouldn’t be lightly ignored. Also with so few websites making use of art direction techniques there is a real opportunity to put yourself ahead of your competition.

Financial benefits of usability

Posted in User experience on by Paul Boag

In this article I outline exactly why usability testing is worth the effort and how it can translate into real financial gain.

A large part of my job is improving web site usability. However, convincing companies to spend time and money on usability testing is always an uphill battle. Somehow it is seen as a luxury that can be left out. This couldn’t be further from the truth! Below I outline exactly why usability testing is worth the effort and how it can translate into real financial gain.

Reducing Customer Support

Answering customer queries, taking orders and handling complaints can prove an expensive and resource hungry job. But a well designed, usable web site can significantly reduce this burden. If your web site makes it easy to order online, get questions answered and resolve problems then your users won’t need to phone, fax or email you. This means you can reduce the number of man hours dedicated to customer support and so make significant financial savings.

Design is a matter of opinion

It is amazing how many web development projects stall over disagreements based on personal opinion. Disagreements over colour schemes, the benefits or drawbacks of dropdown menus, the amount of marketing information that can be collected from a website before you begin to put people off. These are the kind of issues that can prevent a site progressing in its development. Everybody seems to have an opinion and everybody thinks they are right. By presenting these issues to a sample of your target audience you can get a truly independent point of view. This often cuts days or even weeks off development time allowing you to become the first to market.

Increased customer satisfaction

We all know that customer satisfaction leads to customer loyalty and that customer loyalty leads to repeat sales. This is especially true on the web where your competition is only a click away. When it is so easy to go elsewhere customers become very fickle and the tiniest thing can make them give up on you and visit your competition. However a site that has been tested with real users, and therefore meets their needs, can give you an edge over your competition. It will ensure your customers to stay with you while encouraging your competition’s customers to make the switch.

Decreased need to publish after-the-fact fixes

Hindsight is a great thing. Once your web site is live and real users are interacting with it on a daily basis it often becomes obvious where the flaws are in your site. However, changes at this late stage can often be too late and expensive. If users find your site difficult to use on their first visit they are extremely unlikely to ever come back again. It is therefore vital that any problems are resolved BEFORE the web site goes live.

Decrease in abandoned shopping baskets

Something like 70% of shopping baskets are abandoned on the web! This equates to millions of pounds of lost revenue. People abandon shopping baskets for lots of different reasons some of which are beyond your control to prevent. However the vast majority are abandoned because the user becomes frustrated with the shopping process. Usability testing can help identify these points of frustration early and help remove them from the shopping flow.

Early identification of problems

Effective usability testing isn’t just something that is carried out at the end of a project. By that point it is almost too late to make changes and correct problems. Usability testing should be an integrated part of the development process happening continually as the site is developed. This enables you to identify problems early and avoid having to make expensive and complex adaptation later in the site’s life. By catching problems early it is possible to correct problems before they have too great an impact to correct .

Removal of unnecessary features

It is often surprising what usability testing turns up. It is not unusual for it to actually demonstrate that your web site is over-engineered. Sometimes you discover that actually your site is too small to bother about a search function or that your target audience isn’t interested in some of the applications you are offering. By carrying out testing you discover this early on in the sites development and can drop these components before time and money is invested in building them.

Web accessibility & business

Posted in Accessibility on by Paul Boag

Why is it important for a business to make its website accessible and how to go about achieving it.

Background

On the web you can never be certain how the end user will view your web pages. Accessible website design, therefore, means designing for diversity. An accessible website works on a variety of different web browsers and hardware platforms (old and new). Site content will be available to someone with a 21" screen using the latest Windows PC, to someone viewing with WebTV, or a disabled person accessing the Internet through a speech-enabled device. It will be flexible enough to accommodate the access needs of the end user, e.g., a visually impaired user may need to enlarge text or change colours on the page

Why is web accessibility important

Accessible web design is important to businesses for legal, ethical and commercial reasons:

Legal

The Disability Discrimination Act requires organisations in the UK to make online information accessible to disabled people. Court action has never been taken in Britain although there have been high profile cases elsewhere. The Disability Rights Commission (DRC) intends to formally investigate online service providers in spring 2003. Court action on the grounds of discriminatory practice could be costly and damaging to public relations.

Ethical

It makes good business sense for organisations to demonstrate an inclusive and ethical approach – a good image will have an impact on customer perception and buying behaviour.

Commercial

Some organisations may be reluctant to prioritise web accessibility if they believe legal and ethical issues are the only driving forces. However, accessible websites have advantages: Websites designed to be accessible will attract a larger number of potential customers. The DRC found that disabled people in the UK have a combined spending power of £50 bn, yet still have difficulties gaining access to goods and services. Accessible websites are usually more ‘search engine friendly’ and, therefore, more likely to be found by potential customers. An accessible website, created in accordance with the World Wide Web Consortium’s (W3C] Accessibility Guidelines, costs less to maintain, and is ‘future proofed’ – more likely to continue working as browsers and hardware are updated. Accessible web design is important for organisations attempting to attract grant aid or funding, or contracts from public bodies. In the European Year of the Disabled 2003 the European Commission is more likely to consider funding organisations, which uphold the EC’s e-accessibility aims.

How do I achieve web accessibility?

Legally speaking, you achieve accessibility if your site is not deemed to discriminate against a user on the basis of their impairment. This is determined by how your site ‘measures up’ when judged against the W3C Accessibility Guidelines and the Disability Discrimination Act. The W3C Guidelines identify three levels of web accessibility: Level one compliance covers basic access issues, e.g., ensuring that all graphics have text descriptions (Alt tags). Level two compliance ensures that colour contrasts do not cloud legibility, that standard mark-up language is used to create well-structured documents and that navigation is clear and well organised. Level three compliance provides more advanced techniques, some not yet supported by current browsers. The level of accessibility you aspire to should be determined by the potential return on investment. For many companies level one compliance is adequate. However many people will still find it difficult to access your site. Achieving level two compliance will make a real impact on the number of people who can use your site. Ultimately all organisations should aspire towards level three compliance. Website accessibility is an on-going process not a one-off activity. Organisations, particularly larger enterprises, should develop a web accessibility policy and implementation plan. Objectives include: Deciding on the standards you will measure your site against. Auditing existing web pages as to their accessibility and how much work needs done. Testing pages using auditing tools such as Bobby and against different browsers and hardware platforms (both Mac and PC). Starting by making popular pages accessible. Ensuring that all new pages are designed to be accessible. Ensuring you have the tools that help you design and maintain accessible sites. Budgeting for training to develop expertise within your organisation.

Actions and Next Steps

Develop a web accessibility policy and implementation plan following the objectives included in ‘How do I achieve web accessibility?’ If building a new website, ensure that the web designer has expertise. Ask for examples of accessible sites they have designed. If designing the website in-house, budget for web accessibility training for web designers and content managers. Build the site using standard mark-up language [e.g. HTML); this will enable the site to work on a wide range of hardware and software. Use the techniques outlined within the W3C Accessibility Guidelines to ensure content will be flexible enough for many users’ needs.

Colour on the web

Posted in Design on by Paul Boag

How to choose the right colours for your website

Choosing the right colors for your Web site is a complex and often daunting task; many companies hire independent, special consultants just to devise color schemes that support and enhance an overall brand. However, if you have a sense of color harmony and understand the responses that certain colors can evoke, you can be your own color consultant and develop highly effective color combinations.

Before you begin mixing and matching colors, you must first have a firm understandingof your site’s message and goals. Once you understand what message you want tocommunicate, remember that perfecting a color palette is an iterative process,and above all, a creative one. Don’t be afraid to experiment with surprisingcolor combinations, but be sure to adequately test the results before unveilingyour product to the public.

Colour tips and guidelines

Understand your site’s message and brand

Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site’s brand.

Understand your audience

Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use a small number of colors in your palette

Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.

Use contrast for readability

Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.

Use grayscale to test contrast

When dealing with hues other than black, white, and gray, it’s sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.

Be aware of timeliness when choosing colors

Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.

Consider functional colors when choosing a palette

Don’t forget to establish functional colors for elements that communicate contextual information, such as headings and links.

Prepare for color differences on the Web

Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms .