Tag Archives: branding

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.

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.

Why all websites should look the same

Posted in Design, User experience on by Paul Boag

Web designers are constantly striving to create something unique. However, is that really the right approach? I would argue that many websites should conform rather than attempt to be unique.

One of the things I love about my job is the fact that I get to work with all sorts of companies and organisations. Headscape (the company I work for) has just launched www.smallpoxbiosecurity.org which provides information on the threat of an outbreak following the deliberate release of smallpox. Not the average run of the mill web site! Although I have to say that isn’t the most unusual web site I have ever worked on. That accolade would have to go to the chicken incinerator site, but that is a whole different story.

Do different sectors mean totally different approaches to design?

When we launched the small pox site it started me thinking about the variety of sites I get to work on. I have worked on heritage sites, financial sites, IT and tech sites, tourism sites, education sites… you name it I have worked on it. You would expect that all of these different sectors would result in completely different websites. To some degree that is true. Certainly the different target audiences result in different approaches. The branding of the individual organisations need to be taken into account. The content is obviously another major factor. However underlying all of this there are a number of common rules that seem to govern all websites.

The underlying rules of web design

A lot of the rules that under pin most web sites are related to convesions. Users have come to expect websites to work in a certain way and if you choose to ignore those conventions you do so at your own peril. Some of the most obvious are:

The position of navigation

Users have come to expect navigation to appear either on a top menu bar or down the left hand side. To be honest I am not sure how this happened as we are used to tabs on a book appears on the right hand side. Nevertheless this is where users look for it so generally speaking this is the best place to put it.

The position of the sites branding

Users want to instantly know that they are at the right site (or in some cases what site they have arrived at). In either case the logical place to find the branding is in the top left corner. In western culture we read from left to right and from top to bottom. As a result the branding should be in the first place people look… the top left.

The clearly communicated purpose

Users can often be unsure exactly what a site is about and so it is also important to clearly communicate on the homepage what the site covers. This can sometimes be done with a tag line while sometimes a paragraph of text is required. Whatever the approach this is key information the user will expect to find.

Copy conventions

Web users are an impatient lot and never read copy properly. It has therefore become the convention to keep your text short and to the point (unlike this article). Also include lots of bullet points, headings and highlighted text to allow easy scanning.

Section conventions

Obviously each site will have its unique sections depending on the content, however there are some universal sections people expect to find and expect to have certain names. Sections like “about us”, “contact us” and “news” all appear on most sites. Neglect to put them there or call them something unusual and your users probably won’t go hunting for them.

Tools conventions

People expect to find a search box. In fact 50% of people instinctively look for a search box when they first arrive at a web site. Also users will seek out a site map if they can’t find what they are looking for and they use breadcrumbs to identify where they are if they get really lost. As a result all of these elements need to appear in a good design.

The challenge

The list could go on a lot longer but I am sure you get the idea. Visit the www.smallpoxbiosecurity.org and see if Headscape have really put our money where our mouth is and then go and look at some of the big name websites and see how many of them follow the conventions I have outlined above. Finally take a long hard look at your own website and ask yourself if your site makes life easy for your users or if you are more concerned with being different.

Why all websites should look the same ;)

Posted in Design, User experience on by Paul Boag

One of the things I love about my job is the fact that I get to work with all sorts of companies and organisations. Headscape (the company I work for) has just launched www.smallpoxbiosecurity.orgwhich provides information on the threat of an outbreak following the deliberate release of smallpox. Not the average run of the mill web site! Although I have to say that isn’t the most unusual web site I have ever worked on. That accolade would have to go to the chicken incinerator site, but that is a whole different story.

Do different sectors mean totally different approaches to design?

When we launched the small pox site it started me thinking about the variety of sites I get to work on. I have worked on heritage sites, financial sites, IT and tech sites, tourism sites, education sites… you name it I have worked on it. You would expect that all of these different sectors would result in completely different websites. To some degree that is true. Certainly the different target audiences result in different approaches. The branding of the individual organisations need to be taken into account. The content is obviously another major factor. However underlying all of this there are a number of common rules that seem to govern all websites.

The underlying rules of web design

A lot of the rules that under pin most web sites are related to convesions. Users have come to expect websites to work in a certain way and if you choose to ignore those conventions you do so at your own peril. Some of the most obvious are:

The position of navigation

Users have come to expect navigation to appear either on a top menu bar or down the left hand side. To be honest I am not sure how this happened as we are used to tabs on a book appears on the right hand side. Nevertheless this is where users look for it so generally speaking this is the best place to put it.

The position of the sites branding

Users want to instantly know that they are at the right site (or in some cases what site they have arrived at). In either case the logical place to find the branding is in the top left corner. In western culture we read from left to right and from top to bottom. As a result the branding should be in the first place people look… the top left.

The clearly communicated purpose

Users can often be unsure exactly what a site is about and so it is also important to clearly communicate on the homepage what the site covers. This can sometimes be done with a tag line while sometimes a paragraph of text is required. Whatever the approach this is key information the user will expect to find.

Copy conventions

Web users are an impatient lot and never read copy properly. It has therefore become the convention to keep your text short and to the point (unlike this article). Also include lots of bullet points, headings and highlighted text to allow easy scanning.

Section conventions

Obviously each site will have its unique sections depending on the content, however there are some universal sections people expect to find and expect to have certain names. Sections like "about us", "contact us" and "news" all appear on most sites. Neglect to put them there or call them something unusual and your users probably won’t go hunting for them.

Tools conventions

People expect to find a search box. In fact 50% of people instinctively look for a search box when they first arrive at a web site. Also users will seek out a site map if they can’t find what they are looking for and they use breadcrumbs to identify where they are if they get really lost. As a result all of these elements need to appear in a good design.

The challenge

The list could go on a lot longer but I am sure you get the idea. Visit the www.smallpoxbiosecurity.org and see if Headscape have really put our money where our mouth is and then go and look at some of the big name websites and see how many of them follow the conventions I have outlined above. Finally take a long hard look at your own website and ask yourself if your site makes life easy for your users or if you are more concerned with being different.

The power of bookmarking

Posted in Marketing on by Paul Boag

The Internet apparently is becoming more like television, where people go directly to their favorite stations rather than looking around randomly for entertainment.

According to a new study, the majority of Web users worldwide use direct navigation and bookmarks, rather than search engines or links, to find sites.

The study by the StatMarket division of WebSideStory, a company that bills itself as a provider of e-business intelligence, said as of Feb. 6, 51.67 percent of Internet users arrived at sites via bookmarks or typing the name in their browser, compared to just over 46 percent a year ago.

In the early days of the Internet, the study notes, search engines and Web links moved people from site to site, which in turn led to the use of the term "surfing" to describe that movement.

"This trend indicates that branding is indeed taking hold on the Web," Geoff Johnston, vice president of product marketing for StatMarket said in a press release. "More and more, Internet users seem to know exactly where they want to go."

In the United States, the latest figures show 58 percent of Web users visited sites by bookmarks or direct navigation, compared to 50 percent last year.

The numbers are even higher in other countries. In Germany, use of direct navigation and bookmarks is up from 54 percent in 2001 to 63 percent this year. Japanese Web users hardly do any online surfing – they use direct navigation and bookmarks 71 percent of the time, up from 60 percent last year.