Tag Archives: speaking

Taking a brand online

Posted in Design on by Paul Boag

“and here is our style guide”… thump! A huge tome lands on the desk in front of you. When it is written entirely for print, how do you begin to turn it into something that will work on the web?

Of course not all style guides are “huge tomes”. Some are nothing more than a logo and some colours. However, with only a few rare exceptions, they all tend to be written with print in mind. Sizes are set in millimeters and not pixels, logos don’t display well at 72 dpi and colours often just don’t work well on screen.

Many designers feel that style guides limit their creativity, but I would argue that actually you have to be extremely creative to get some guides to work for the web! Below are 4 areas that can be particularly challenging and a few pointers about how I deal with each of them.

Typography

Style guides often set fonts and rarely are those fonts as universal as those found on the web. Generally speaking there is not much you can do about it except explain the limitations to the client. Normally speaking the client will accept the inevitable.

However, once in a blue moon you come across a client who starts insisting. He talks about having headings as images so you can set the font.

Although it is possible to work around the limitations of web fonts using techniques such as sIFR you also need to consider legibility.

The trouble is that often the fonts selected in style guides are picked because they look good in print. However, not all fonts that look good at print resolution, work when reduced to the screen. They often pixelate and become difficult to read especially at smaller sizes.

If you do use corporate fonts make sure they are used at a reasonable size in order to maintain legibility.

Layout

Layout can be another tricky area that is often included in a style guide. The guide might suggest a 3 column layout or stipulate the position of the logo. Although where possible it is good to stick with these recommendations, you should not do so when they conflict with web conventions.

For example I recently worked on a project where the style guide specified the logo should be positioned top right. Unfortunately it has become a convention on the web to display the logo top left and the search top right. Both myself and the client agreed that conforming to this web convention was more important that sticking rigidly to the guidelines.This decision was made easier by the fact that we had stuck very closely to the guidelines in other areas.

Another thing to be wary of in regards to layout is that guidelines often have a bias towards A4 portrait style layout. It also works on the assumption that you have pixel perfect control over positioning. Neither of these assumptions are correct when it comes to the web.

In short I think guidelines about layout need to be taken with a huge pinch of salt. It is extremely hard to replicate them faithfully on the web and as long as other areas of branding are better represented then their absence will not damage the brand online.

Logos

Unfortunately, where you maybe able to get away with changes to layout, you rarely can when it comes to the logo. This can prove an incredible challenge when the logo wasn’t produced with the web in mind. A poorly designed logo can often become illegible when reduced down in size.

Although I sympathize with designers who have to deal with “bad” logos, I would argue that a logo is so central to an overall brand identity (which extends way beyond the web) that changing it is out of the question.

However, although you cannot “change” the logo as such, minor tweaks to correct poor web rendering is possible. I have been known to tweak font size, weighting and spacing in order to aid legibility at smaller sizes. I have also been known to make minor changes to colour which brings us nicely onto…

Colour

Gone are the days when we worried about the web safe palette. However, that does not mean we can now apply colour guidelines without a second thought. There are still 2 major considerations to take into account when working with colour guidelines.

The first is the differences you see in how colour is displayed. I have spoken about colour display numerous times before so I wont repeat myself here. However, the fact that colour can often appear either lighter or darker on some monitors does mean that certain colours that look great in print (where its displayed is carefully controlled) will look terrible to some users.

The only solution to this problem is to manually adjust colours so that they sit nearer the middle of the brightness range. Light colours are made darker and darker colours lighter.

Another aspect of colour I have talked about before is colour bleed. This is explained brilliantly in a 24 ways article by Jason Santa Maria. In essence it means the smaller the text the more the colour of that text is influenced by its surrounding colour. Text on a white background becomes lighter and text on a black background becomes darker.

Again in order to counteract this problem it maybe necessary to manually adjust the brightness of a colour when used on smaller text. You cannot rely solely on the pantone numbers supplied in the style guide.

In conclusion

The key to successfully bring a brand online is to pick and choose your battles. Keep in mind the ultimate aim, which is to associate the website with other marketing collateral in the minds of the target audience. Making this association does not require compliance with every aspect of a style guide. If you comply closely in some areas, this can give you more flexibility in another area without significantly damaging the brand.

Advice for CMS users

Posted in Accessibility, Site content on by Paul Boag

I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.

Introduction

Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.

This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.

Writing for the web

Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.

Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.

Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.

Below we investigate these two challenges in more depth and suggest some possible solutions.

Writing style

Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.

Engaging with the user

Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.

The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:

Using a personal tone

By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.

Writing how you speak

If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.

Avoid being patronizing

The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.

Making your copy clear

The W3C accessibility guidelines clearly state:

Use the clearest and simplest language appropriate for a site’s content.

In other words ensure that your reader can understand what you have written.

Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:

Jargon

A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.

You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.

Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.

When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.

Reading level

There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.

Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.

Below is some advice on how you might go about improving comprehension of your copy:

  • Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
  • Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
  • Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
  • Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
  • Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.

Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.

Making web pages easy to scan

It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.

There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:

Front loading

Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.

Keep it short

Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.

Keep paragraphs short

As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.

 

Keep sentences short

 

At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.

Break your copy up

As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:

  • Can I associate a heading or sub heading with this block of text?
  • Could this paragraph be reduced to an easy to scan bullet point list?
  • Is there a key message in this paragraph that users need to instantly see?

If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.

Many good content management systems (including Headscape’s own CMS) provide this functionality.

Accessibility

We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.

As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.

The importance of markup

So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.

So, if for example you want to tell the browser that something is a heading you would mark it up like this:

<h1>This is a heading</h1>

or a paragraph would be marked up like this:

<p>This is a paragraph of text</p>

Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.

Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.

Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.

More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.

The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.

Marking up content in this way brings a whole host of advantages including (but not limited to):

  • The ability to redesign how an individual style looks universally across the entire site without editing each page.
  • The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
  • The ability for screen readers and other assistive technologies to understand the site.

In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.

Text alternatives

Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.

The most common example of this is with the inclusion of images into your pages.

There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.

Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.

A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.

Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.

Meaningful links

Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:

Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.

Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.

This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.

Acronyms and abbreviations

Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.

In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.

However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.

This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.

This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.

Using tables correctly

Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.

Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.

We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.

That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.

Working with imagery

Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:

Animation

Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.

The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.

If animation is to be used we recommend:

  • That the user is given the ability to disable the animation
  • That the animation is not too rapid so that it proves less distracting
Colour

Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.

These two issues are addressed in the W3C guidelines on accessibility:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Further information

Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.

If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].

Show 79: Despise the listener

Posted in Classic shows on by Paul Boag

A great line up this week with Paul, Marcus and Andy Clarke.

Play

Podcast: Download (21.4MB)

We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.

Download this show.

Launch our podcast player

News and events

Google Analytics gets interface upgrade

Like so many who join Google, Jeff Veen has been forced to be somewhat tight lipped about what he has been working on. However in the last week we have finally been able to see the fruits of his labors with the relaunch of a new and improved Google Analytics. You would be forgiven for thinking that a load of new functionality has been added to the service. In fact that is not the case. The only changes have been to the user interface. The difference is that you can now find everything quickly and easily.

If like me you found the old Analytics service confusing and difficult to use then you might want to take a look at the new revised version. It is a definite improvement.

Great new articles on A List Apart

For a while I have been a little disappointed with the articles coming out of A List Apart. Perhaps they were simply too “high brow” for the likes of me but they lacked any practical application. However this issue is different. It has two great articles about handling clients.

The first entitled “Stand and Deliver” provides some superb advice on presenting your designs to a client. The second called “Educate Your Stakeholders!” talks (unsurprisingly) about educating the decision makers in a web project so they make more informed choices.

Both are really superb articles and I would definitely recommend you check them out.

Teaching the traditional web

We are all acutely aware that the web is changing at a rapid rate. At the moment the focus is very much on web applications however we cannot afford to ignore the massive number of page based sites that still need to adapt to the changing way people are interacting online. In a post called Teaching the traditional web, Keith Robinson discusses how we need to alter our approach to page based websites based on deep linking, RSS feeds and mobile access. A very enlightening read.

Baselines and vertical rhythm

Having Richard Rutter on the show a few weeks back made me acutely aware of my shortcomings when it came to web typography. Although I promised myself I would look into the subject in more depth I was a bit vague as to where I should start. Fortunately Richard has given me a starting point with a list of resources on his site that look at the subject of baselines.

I know that many people find web typography an uninspiring subject but good typography can have such a profound impact on how people perceive design that it really is worth your attention.

Client corner: Getting things done in web design

I have just finished reading “Getting Things Done” by David Allen. Not only has it seriously helped me to get control of my workload but its also made me rethink how I approach web design projects with clients. In this week’s client corner I suggest some techniques that designers and clients should use when a new project is starting.

As seems to be the default approach these days I blogged on this earlier in the week so if you want more information on what I said in the show then be sure to check out that post.

Ask the expert: Andy Clarke on CSS 3

Following Andy Budd’s recent criticism of the W3C CSS Working group it seemed appropriate to have Andy Clarke on the show to talk about the progress of CSS 3. Andy is an invited expert on the CSS working group so has the inside track on what is really happening. In the show Andy talks about…

  • Some of the cool layout features available in CSS 3.
  • The modular nature of CSS3.
  • The slow progress made by the group.
  • And the need for the web design community to contribute in the process.

Agony uncle: Insurance for web designers

We received the following question from Brian last week:

As an avid listener to your podcast – and having spent the day catching up on them while travelling! – I was very interested in a particular segment where your good self and that Lillington chap mentioned your Terms and Conditions and having, ‘…all the right insurances in place…’, with regard to setting up a business.

I’ve recently done some work with a mate – a few hopefully not-too-shabby websites – and although we think we are getting the hang of sorting out contracts now, we have never been able to settle on what to put in our Terms and Conditions. Every time I start to do it I either glaze over or start putting stupid things in due basically to boredom!

As for insurance we never assumed that we would need any for web design. Its not like we’re making nitroglycerine or heart bypass machines… so we assumed the basic rules of common sense prevailed.

To this end, if you have any advice on what insurances might apply or what sort of thing should be covering in T&C’s?

Firstly I’ll cover the terms and conditions issue, much as I don’t want to appear protective over our ts & cs, we have reached the conclusion that by providing them we are in effect providing legal advice.

This is not what we do and it’s not a path we wish to tread!

We suggest speaking to your lawyer or maybe a local chamber of commerce who could provide a standard terms and conditions contract template. I also droned on about the different aspects of terms and conditions in episode 65.

Insurance, however, is another matter. Though, again, I am concerned about making stuff up here (as is often the case!) so the majority of the following content is from Business Link. This is what we currently pay good money for:

Professional Indemnity

If you are in the business of selling your knowledge or skills, you may want to consider taking out professional indemnity insurance.

This protects your business against compensation sought by a client if you have made mistakes or are found to have been negligent in some or all of the services that you provide for them. Professional indemnity insurance will also cover any legal costs.

Public Liability

If members of the public or customers come to your premises or you go to theirs, you should think about taking out public liability insurance. This type of insurance covers any awards of damages given to a member of the public because of an injury or damage to their property caused by you or your business.

Product Liability

In product liability insurance (PLI) terms, a product is any physical item that is sold or given away.

Products must be “fit for purpose”. Under the Consumer Protection Act 1987, you’re legally responsible for any damage or injury that a product you supply may cause. PLI covers you against compensation awarded as a result of damage to property or personal injury caused by your product.

Employers Liability

Employers’ liability compulsory insurance (ELCI) enables businesses to meet the costs of compensation and legal fees for employees who are injured or made ill at work through the fault of the employer.

Key Man Insurance

Key man insurance is designed to cover you for the financial costs of losing key personnel. We still have this for Paul….goodness knows why! ;-)

Review: Looking beyond web design books

This weeks review section isn’t so much a review as a recommendation. At SXSW you are really spoilt for choice as to what to attend. In fact there is so much choice it is overwhelming. After much consideration I decided to take an interesting approach. I decided to mainly attend panels on subjects I knew nothing, or little about. Instead of going to panels on CSS or design I went to sessions on marketing and strategy. The result was an incredibly enjoyable and enlightening week.

On my return to the UK I decided to take a similar approach in my reading. Prior to this the majority of books I read where either on CSS or Javascript. However I am now trying to broaden out the range of books I read to encompass other subjects like productivity, business process, and even some sociology. As with SXSW it has been an incredibly rewarding experience and something I would encourage others to do. I have been amazed at just how much of what I have read has related in someway to my job and I believe it has genuinely improved the quality of my work.

I would really encourage others to try the same thing and would like to suggest three books to break you in gradually. Although none of these books are directly to do with web design they all include valuable lessons that you can apply to your work on a daily basis…

Elitism in web design

Posted in News on by Paul Boag

Every time I attend a web design conference the same issue raises it ugly head; elitism. This time around it seems to be targeted at the Brit Pack.

I have just gotten off the phone with Andy Clarke. I was arranging for him to come on next weeks .net podcast. While chatting he asked if he could discuss the issue of elitism because the members of the Brit Pack were coming under criticism for it at SXSW. He has just posted about it on his blog and I thought I would share my thoughts on the subject as I find myself in the strange position of having a foot in both camps.

The Brit Pack Booze Up?

As you probably already know if you listen to my podcast, Boagworld was a joint sponsor of the Great British Booze Up, a party at SXSW. It was a hugely successful evening mainly thanks to the hard work of Andy Budd and the clear:left team who put an enormous amount of effort in making the evening work. However, I did find myself getting irritated a number of times throughout the evening when people referred to it as a Brit Pack event. It wasn’t a Brit Pack event as I was one of the primary sponsors and I am not a member of the Brit Pack. Things came to a head for me when somebody said exactly the same thing yet again while I was standing next to Andy Clarke. I finally cracked and very pointedly explained that it wasn’t a Brit Pack event because I wasn’t a member. Andy, to his credit immediately turned around and said he would make sure I was added.

What was interesting was how this made me feel. On one hand I was really pleased. It made me feel like I had “made the big time” in someway and that my contribution to the community was valued. However, on the other hand it pissed me off because what Andy obviously didn’t remember was that I asked if I could join back in 2005 (when the world had yet to be exposed to the wonder that was my podcast) and he very politely said no.

Is it okay to exclude others?

So was Andy wrong to exclude me back in 2005? Am I only now being offered a place because I am more well known? Is the Brit Pack an elitist group that only allows in the select and “famous” few?

Personally I feel that there maybe an element of elitism but if there is it is certainly not intentional and it is not something we should be criticizing. Sure, back in 2005 I was somewhat annoyed that I wasn’t accepted into the “club” and felt excluded for not being “famous” enough. But I think that was my problem and not Andy’s. To him it was just a few of his mates on a mailing list chatting. I wanted to join simply to be associated with that group of people who I respected and admired. I didn’t really have much to contribute and was more interested in promoting my site through the Brit Pack than I was in adding anything of value. Andy didn’t know me from Adam and was perfectly within his rights to protect his group of friends.

Networking happens

Everybody is trying to impress somebody at SXSW. Everybody wants to speak to those who they admire and this can lead to some hurt feelings along the way. I remember speaking to a hero of mine (who shall remain nameless) and we were having a very nice conversation up until the point he spotted somebody more important. Instantly he ended the conversation and moved on to this new person. I was incredibly hurt by this until I caught myself doing exactly the same thing to somebody who listens to the show! I didn’t do it on purpose, and I suspect neither did the person with whom I was talking. It was just that this was the first time I had seen the person all week and didn’t want to miss the opportunity.

I guess what I am saying is that we need to accept that friendship groups are okay and that networking is an important part of these large conferences. It occurs in every walk of life and is not within itself a bad thing.

Maybe the guys in the Brit Pack have been a little naive about how they are perceived and the influence they have. They probably don’t realize they are in the “cool club” and to be honest I think we need to keep it that way. After all imagine how much worse it would if they knew how much we all wanted to emulate them :)

My advise is that if you feel excluded from a group like the Brit Pack you have one of three choices. Set up your own group (which is after all how the Brit Pack came about), start adding real value to the community until they finally come around and recognise your contribution, or bitch about it. The choice is yours.

Show 70: SXSW

Posted in Classic shows on by Paul Boag

This special episode of boagworld comes direct from SXSW. Paul and Marcus interview a whole host of webcelebs including the founder of Twitter, Ryan Carson and a gaggle of panellists.

Play

Podcast: Download (28.8MB)

Download this show.

To subscribe directly within itunes click here

So here I sit in my hotel room at SXSW. Last night was the British Booze up and what a superb evening it turned out to be. In fact the conference as a whole has been incredibly enjoyable. I have been fortunate enough to meet some great people and attend some superb panels.

However, putting together this podcast has been much more challenging. The problem is that it could so easily become tedious if you didn’t manage to attend, full of in jokes and pointless drunkenness.

What we have aimed to do in this week’s show is give you a taste of the SXSW experience. So yes, there is some pointless drunkenness but there are also panellists talking about their presentations and sponsors speaking about their products. We have also tried to give you our own personal opinions of the show. We discuss exactly how useful (or not) the conference is and whether it has simply become too big.

I am not even going to try to produce normal show notes for today’s episode. Partly because the show is somewhat random and also partly because at the time of writing Marcus is still hacking the final format around. However, I am sure you will forgive this unprofessionalism on our part considering we both drank far too much at last night’s party!

Show 68: Tagtastic

Posted in Classic shows on by Paul Boag

This weeks show includes hints on email campaigns, writing Web design contracts and site navigation approaches.

Play

Podcast: Download (23.1MB)

On this week’s show; Matthew Patterson from Campaign monitor shares some handy hints on sending an email campaign, Marcus finishes his series on web design contracts and Paul looks at some interesting alternative approaches to site navigation.

Download this show.

To subscribe directly within itunes click here

News and events

Diversity in web design

This week the web design blogosphere has been dominated by discussions about the lack of women speakers at conferences. Jeffrey Zeldman, Eric Meyer, Jeremy Keith, Tantek… the list goes on and on. Frankly, I find the debate less than helpful. It is interesting to note that all of the women I have seen post on the subject have seemed very defensive almost as if they are under attack for not speaking more!

More on Open ID

Open ID continues to build momentum with both AOL and Digg.com saying they will support the standard. Dan Webb also provides a guide on how to support Open ID in your web applications.

Validation: why it matters

Ethan Marcotte has just published an interesting article on the List Apart website looking at the business benefits of validation and why it continues to polarise the web community.

The sorry state of web accessibility

The subject of web accessibility receives another body blow this week with Mike Davies posting a damning criticism. What is probably most disturbing is that I am yet to find a post disagreeing with him.

Client Corner: The statement of work (final chapter!)

This week sees the end of Marcus’ series on the statement of work (I know, it is distressing for us all!). In this final segment he takes a look a:

  • Milestones and timescales
  • Project management
  • Testing
  • Deliverables
  • Pricing

Ask an expert: Matthew Patterson on email campaigns

Matthew Patterson works for campaign monitor one of the best email management sites about. Their site is stuffed with great advice for those thinking of running an email campaign and so it seemed only natural to get him on the show and get his thoughts on how best to run a successful campaign.

Non hierarchical navigation

Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought this sounded like a great issue to cover on the show.

Instead of trying to stuff everything we covered in those show notes, I have instead posted a separate article on non hierarchical navigation which includes everything I said and the links I mentioned. Hope you find it useful.

Refresh06

Posted in Working in web design on by Paul Boag

So Refresh06 is now over and I am mere moments away from heading back to the UK. Although the conference suffered from the occasional hiccup it has been incredibly enjoyable and I have been inspired by the amazing people I have met.

It has been a pretty incredible time and it’s hard to know what the highlight was. A good contender is the behind the scenes tour of the Kennedy Space Centre organised by a boagworld listener Benny (who is a real life Rocket Scientist!). However, good as that was, I would have to say the top spot has to go to the people I have been fortunate enough to meet.

I am not a big conference goer or indeed even a regular member of the web design community. However I have been made to feel incredibly welcome over the last week. To a large extent this has been down to Andy and Jeremy who have both taken me under their collective wing. Despite the constant humiliation and piss taking, they have both made a point of introducing me to new people and making me feel part of the gang.

And what a gang it is. I am not even going to try and mention everybody I have met, however I would like to say a special thanks to Jina, Dan, Cindy, and Jade who seemed to endure me for longer than most.

For me conferences are all about the people. The talks are a secondary factor. I guess that is a strange thing for me to say as somebody who was speaking at Refresh06 but I honestly believe there is more to learn about web design by chatting over a pint than sitting in a conference hall.

Refresh06 wasn’t perfect. The organisation could have been tighter at times and there have been some problems with the audio recording (meaning my sessions are not going to be available). However, for me none of that matters. What matters is that I got to talk to some incredibly talented people and meet my web design superhero Cameron Moll (although I was too shy to have a long conversation with him!).

All in all a brilliant time and I cannot wait to SXSW.

The problem with IE7 zoom

Posted in Accessibility on by Paul Boag

The one feature of IE7 that seems to have received almost universal praise is the ability to zoom a page. However, although I generally like this feature it does have one frustrating problem.

If you haven’t seen this functionality yet then I should explain this is more than simply scaling the text size. Zooming scales the entire webpage (graphics and all).

The idea, originally invented by Opera, is an excellent one. Generally speaking it allows the user to scale any site without breaking the design.

It works particularly well for fixed width sites as it allows the user to expand the design to fill the screen when running at higher resolutions.

So this:

Screenshot of Headscape at 100% zoom

becomes this:

Screenshot of Headscape at 175% zoom

Not perfect, but pretty good.

However, the problem comes with scalable sites. Because these already fill the whole width of the browser window, as soon as you begin to scale the content on the right of the page gets pushed off screen like so:

Screenshot of boagworld when magnified

This wasn’t a problem with traditional text resizing because only the text changed size and not the surrounding layout. This new approach is actually a step backwards for the accessibility of scalable sites.

Although it is possible to just resize text in IE7, this option is nowhere near as prominent as the zoom function and so will almost certainly become obsolete. The question is, will this cause scalable sites to become obsolete as well? It will certainly make me think twice before suggesting them to clients.

Return on Investment

Posted in Web strategy on by Paul Boag

Recently a listener of my podcast wrote to me complaining that a recent screencast I did on the business benefits of web standards, didn’t work under Linux because it used Flash 8. This raised an interesting question. Do I care?

You see my problem is that I am obsessed with return on investment at the moment. It’s my pet subject and I find myself examining everything within this context. If a web design decision cannot demonstrate a business benefit then it probably isn’t worth doing. So, when I received the email mentioning the problem in Linux I couldn’t help wondering whether it was a problem worth fixing.

My logic went something like this:

I used an automated tool called Camtasia to produce the screencast and that generated the flash file for me. Other than the time involved in preparing and recording the screencast very little investment was spent.

The resulting screencast has proved extremely popular hitting the front page of digg.com and increasing my own exposure and that of my web design agency. In short it was a useful marketing tool, as well as a good way to promote the benefits of web standards. Win, win.

Because accessibility is important to me and because I wanted the presentation to be available to as many people as possible I produced it in four formats:

  • Flash Video
  • Audio Only
  • PowerPoint
  • PDF

Now admittedly it could do with an HTML version and I am working on that. However, generally speaking I thought I had made the effort.

So when I received the request for a Flash 7 version compatible with Linux, I had to consider if the additional work was justified. Unfortunately I had a problem.

I couldn’t find a quick automated method of producing the screencasts in Flash 7 format. Sure it could be done, but was the additional work justified from a business perspective.

If the presentation was a marketing tool then I had to ask myself whether building a Linux version would expose my presentation to anymore of my target audience. Well, obviously the people that buy my services aren’t other web designers but rather website owners. Do that many website owners really access websites from the Linux platform? My feeling was that the additional work wouldn’t generate sufficient additional leads to make it worth the while.

Of course, I had to consider secondary factors too. Would the absence of a Linux version adversely affect how people perceived my work? Possibly. Would it affect how I was perceived by potential clients? Probably not.

In the end I decided not to rework the screencast to support Flash 7.

You have probably guessed by now that I am exaggerating to make a point. Before we add new functionality to our sites we need to ask ourselves; will it pay for itself?

Obviously, the stuff I produce on this site is more than a marketing tool to me (although it does fulfil that role too). However, the point remains.

So what do you think? Did I make the wrong decision in not supporting Linux users? Does a moral obligation outweigh business considerations?

Podcast 44: Writing for the web

Posted in Classic shows on by Paul Boag

This week on boagworld.com: How to write good website copy and why designers should care. Is using Dreamweaver cheating? And how to “super charge” your web feeds.

Play

Podcast: Download (22.4MB)

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

This week in the world of web design

There are some very interesting stories that have caught my attention this week:

Zeldman on W3C

It would seem that it is no longer just Joe Clark speaking out against the W3C. Jeffrey Zeldman (the godfather of web standards) has condemned the W3C in an article on his site, saying:

Beholden to its corporate paymasters who alone can afford membership, the W3C seems increasingly detached from ordinary designers and developers.

John C. Dvorak on CSS

John C. Dvorak, don’t you love him. What I like is the way he is always so positive and upbeat! The man that has made his career from being a "cranky geek" turns his critical eye on CSS in an article for PC magazine.

Andy Budd thinks web standards are not important

Always one to make us think in new ways, Andy Budd encourages us to stop think of web standards as a goal in itself, but to use them to get on with the business of building websites. His talk at the first London Web Standards Group reflected many of the same sentiments I expressed in my post "the sin of over enthusiasm".

Question: Is using Dreamweaver cheating

Thanks to Chris for his excellent question about using Dreamweaver. This led to an interesting discussion about developer attitudes to Dreamweaver, as well as a rundown of Dreamweaver 8′s superb coding environment.

Writing for the web

This week’s main topic is about writing for the web. To be frank this is not an area I am an expert in and so this week’s show lifts heavily from a number of sources.

Calling All Designers: Learn to Write!
An excellent article on the "A List Apart" website, explaining why designers need to take more of an interest in the copy on their sites.

Jakob Nielsen: How to Write for the Web
We touched on the principle of "front loading" proposed by Nielsen in this article.

Steve Krug: Don’t make me think
This book has some excellent advice on keeping your sites content short and to the point

Mencap: Creating accessible copy
The advice in this PDF file aims to show web site owners how to write accessible web copy. However, I would argue its suggestions apply to every website, not just those focusing on accessibility.

Boagworld: Effective website copy
This previous boagworld post brings together various tips I have picked up over the years, many of which made it into this week’s show.

Also in this week’s show

Finally, we also take a look at web feeds. Why you should add them to your site and how to get the most out of them by using an excellent service from feedburner.

Web Feeds Explained

The benefits of web feeds

Podcast 42: Choosing the right design

Posted in Classic shows on by Paul Boag

It’s not unusual to be in a position where you have to choose between more than one design for a site. This podcast may help with the question “which design do I pick?”.

Play

Podcast: Download (30.7MB)

In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

How to approach choosing a design

Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:

Avoid personal opinions

Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.

Be careful who you show

Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.

View the design in context

It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.

Check on multiple monitors

A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.

View at different resolutions

A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.

Accessing the design

Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.

Colour

Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.

Layout

There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.

Weighting and flow

Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.

Typography

As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.

Accessibility

Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.

Usability

Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.

Branding

To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.

Imagery

The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:

  • Small busy images that are hard to see
  • A lack of consistency across the site with different styles of imagery, all mixed up together
  • Images that grab your attention away from content rather than directing you to it.

The golden rule

If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.

Also in this show

In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.

Molly Holzschlag : Web Essentials 05

Posted in Reviews on by Paul Boag

I have just finished listening to Molly Holzschlag’s keynote speech at the Web Essentials conference in Sydney. As usual, Molly had some fascinating insights into the changing world of web development, but something about her presentation just did not sit right with me.

Specialists working together

Molly primarily focused on the increasing number of fields within web design. As web development becomes more complex, so the need for specialists in different fields becomes more important. From usability and accessibility consultants to designers and developers, the range of specialists continues to grow. Molly went on to say that these specialists are increasingly working together to develop more complex web applications.

So what’s my problem!

So why did this not sit right with me? I certainly agreed with everything Molly said and she is definitely more knowledgeable than I am about the latest developments in web design. I think what I felt uncomfortable with was that Molly spoke as if this collaboration of web design specialists was the norm within the industry. In my experience, the web development world Molly was describing only exists within the high end of web design. I got the impression Molly believed that the majority of web designers specialised in different fields and worked in teams to develop sites. Although she did acknowledge this was not the case throughout the industry, I think she had a slightly unrealistic view about what was the norm.

There are still many all rounders

I work with fairly big clients including government bodies and various higher educational institutions. However, even within organisations of this size their web teams are limited. In most cases, they consisted of web editors and web developers/designers. Largely speaking individuals in web teams still have to be general "all rounders" and do not get the luxury of specialising in specific fields such as accessibility or usability. The majority of people still need to be "jacks of all trades" to some extent.

Now obviously the clients I work with are not comparable with those who engage Molly. However, I did get the feeling that Molly was describing a web design world that is still beyond the majority of my clients and certainly beyond the reach of the majority.

The need for trailblazers

Of course, it is important to remember that Molly and her peers are trailblazers in the industry, which are vital to our continued growth. However, I do have some concern that the gap between these trailblazers and those who follow might become too big for us to bridge. It is important that there are individuals who can bridge that gap and bring these working practices at the forefront of web design to the rest of the industry.

No real conclusion

I am not sure what my point is here and I have no nice conclusion to wrap up with. This is certainly not meant as a criticism of Molly or her peers. I guess it is merely me expressing a concern that for most of us, the world Molly describes is not yet here.

If you have had time to listen to Molly’s keynote I would be interested to hear your thoughts on it. Does your organisation have specialists or are your web developers "jacks of all trades"?

@Media2005

Posted in News on by Paul Boag

@Media 2005 was the first Web standards and accessibility conference here in the UK and only the second worldwide. The conference demonstrated a growing commitment to building accessible and standards friendly web sites.
So what came out of the conference and why will it affect the way we all build web sites.

I was fortunate enough to attend this two day conference and had the opportunity to listen to some of the leading figures in web design. They spoke about how the way we build web sites will change and how it will benefit us all, both users and site owners alike.

I have to confess I was totally inspired by the conference and so here are just some of my initial thoughts:

Taking standards based design the next step

I probably haven’t spoken about standards based design enough on this site before, but what I have written has hopefully explained that web standards are about separating content from design. This has a whole range of benefits including, but not limited to;

  • faster download time,
  • sites being easier to maintain or redesign,
  • greater accessibility,
  • available to a greater range of browsers and devices,
  • better print capability.

However what really inspired me was a talk by Jeremy Keith who took the idea one step further and suggested we also separated out behaviour from content.

If you have read my blog before you will know that I try and avoid technical jargon because there are enough people out there providing the technical detail. With that in mind I am not going to get into the specifics of DOM and Javascript and exactly what I mean by behaviour. However what I will say is that by separating out interactive / functional elements from your web site you gain a number of advantages. These include:

  • the ability to manage all of your functionality (such as popup windows etc.) from one central source,
  • a cleaner, more accessible web site that will still work even for people without the software to view the extra functionality,
  • the ability to add new functionality site wide without editing each page that the functionality needs to appear in.

The beauty of Design

Douglas Bowman gave two very inspiring sessions that raised a number of interesting points. One of the issues he touched on is something that is particularly close to my heart and something which I believe is fundamentally important to good web design. He spoke about our tenancy as designers to be constrained by the practicalities of web page construction and that this often stifles our creativity.

So many web sites look the same, not because they are trying to conform to design standards (which is something I whole heartedly support) but because the designers have an inability to think outside of the constraints of the medium. Douglas encouraged innovation where we design first and work out how to build it later. Only by taking this approach can we ensure not only the best design for the job but also that we are constantly pushing back the technical boundaries of web design.

The real face of accessibility

For a long time now I have accepted that we have a responsibility as web designers and indeed web site owners to ensure that our web sites are accessible to the widest possible audience. Indeed I routinely check my sites against web accessibility guidelines and fix individual little problems so they work better with speech browsers. However it wasn’t until a presentation by Robin Christopherson from Ability Net that I fully began to realise how impossible it is to browse the web as a blind user. Robin himself is blind and demonstrated some of the problems faced by blind users. He did a particularly compelling demonstration by attempting to navigate the Amazon.co.uk web site using a standard speech browser. Although I have tested pages before in speech browsers I don’t think I have ever attempted to achieve anything other than basic tasks. Robin’s demonstration was a real eye opener and has galvanised my commitment to creating truly accessible design.

Praise and criticism

For me this conference was a real turning point. I have to be honest that over the last few months I have become disillusioned with web design. As somebody that has been involved in the web since the early days I missed the challenge and excitement of those chaotic times. Somehow things had become very stale and sensible. However @media 2005 has made me realise that I have a real opportunity to shape the way the web develops in the future and make it a much more usable place for everybody.

I have read some comments that have critised the conference and in particular the speakers for being to insular. Some have expressed a sense that those speaking and running the conference were elitist in some way. Certainly they all seemed to be good friends but I would argue that their closeness is one of the reasons they have achieved so much. I have to confess I had a pang of envy that I was not one of the elite who inspired web designers worldwide and is forging the future of the web. However I quickly realised that it is down to people like me and you to implement these new methodologies on a daily basis if we are really going to achieve a more accessible web. You can have all the evangelists in the world but unless they win converts and those converts act on their new found convictions it means nothing. They have certainly made a convert out of me and I thank them for their inspiration and hard work.

Multi-lingual web sites

Posted in Site content on by Paul Boag

Here is a scary fact. Did you know that you could be turning away 64% of your potential audience? OK, I might be stretching the truth slightly but I bet it makes you read on!

Did you know that only 36% of those using the internet speak English as their first language? I certainly didn’t until I came across the Internet World Stats web site.

The top ten languages are:

  • English (36.3%)
  • Chinese (13.3%)
  • Japanese (8.3%)
  • Spanish (6.8%)
  • German (6.6%)
  • French (4.2%)
  • Koran (3.7%)
  • Italian (3.6%)
  • Portuguese (2.8%)
  • Dutch (1.7%)
  • Others (12.8%)

But I only want to reach English speakers

Obviously if your web site and products are aimed purely at an English speaking audience then this does not apply to you. However I do have a word of caution. Don’t presume that just because your market is British that everybody primarily language is English. For example 26% of people in Wales speak welsh and also we have a very large number of ethnic minorities who would not consider English their first language.

But so many people speak English as their second language

True, but it doesn’t mean they want to have to. Also just because they can speak English doesn’t mean they find it easy. Why make it harder for people to understand your site. By translating your site into their local language you show a commitment to non-English speaking users.

So how do I go about translation?

If you are trying to reach a broader international market then translating your site into the appropriate languages is vital. However resist the temptation to use one of the many automated tools you find online such as google’s language tool. Although useful they are just not accurate enough to use on your site.

Where possible, the best option is to get translation done "in country". A native resident of the country you are trying to target will be able to pick up on the nuances of the way people speak rather than just providing a literal translation. This means your copy will seem more natural and easy to read. If you have ever read a Japanese video recorder instruction manual you will know what I mean. It may have been translated perfectly well into English but it can still be confusing and hard to follow.

Oh yes, a couple of design points to leave you with:

  • Make sure your design is flexible enough to accommodate more wordy languages. For example, the average German sentence is a third longer than its English equivalent.
  • Don’t use flags to allow people to choose between languages. If I am American or Australian I am not going to be happy clicking on a Union Jack to get to the English version.

The personal touch

Posted in Site content on by Paul Boag

Computers can seem very impersonal at times so it is important to do everything possible to make your website seem more friendly and approachable.

Computers are not the friendliest of machines. They always seem to take what you so literally and never come across as very helpful! This can make the internet seem quite an impersonal place at times. It also doesn’t help when you are trying to encourage a user to purchase your product or service. Many seem to be taking the approach of developing sophisticated software that appears more human however I believe that at the end of the day nothing beats the personal touch. This article identifies a few ways that you can make your website seem less foreboding and more approachable. The result will hopefully be an increase in sales:

Writing style

The way your copy reads has a huge effect on how people perceive your website and therefore your company. Copy should be friendly and approachable without being overly familiar. Avoid the hard sell or the use of corporate mumbo jumbo. Be succinct, direct and friendly. For more information on writing for the web click here .

Phone

Always have your phone number prominently placed on your website. Preferably make it a free phone number in order to demonstrate that the users call is important to you. Make sure the phone is manned when you said it would be and is always answered promptly and professionally. A website without a telephone number gives the impression that the user’s queries are an inconvenience that should be avoided. By placing the phone number prominently on every page you are communicating a desire to help with any problems a user might be facing.

Email

I am constantly amazed at how many websites fail to have their email address available to their users. Often you find it buried deep within the site and then it is an address such as [email protected] . This leaves me wondering if I should be writing to this address. Make sure your email address is always visible and that it is something obviously like [email protected] . You may already have an enquiries form on your website but that is not always the most convenient approach for a user who is paying to access the internet by the minute. You should always offer an email address as well as a form. When you do receive enquiries via email be sure to answer them quickly. This means that you must check your email regularly and then respond immediately. Remember while they are waiting for your reply they are checking out your competition! Although it is possible to set up auto responders which send an automated response to any emails you receive this doesn’t replace the human touch.

Live Chat

Live chat is a relatively new approach to dealing with customer enquiries and is offered by a number of companies. Basically it allows the user to request a chat session with a member of your customer services. A small chat window opens and the two parties are connected. However on top of that it also allows you to monitor users moving around your site in real time and offer them the opportunity to chat if they appear to be having difficulty. What really sets this approach apart is that it is more instant than email but more anonymous than the phone. Users can ask their questions but easily walk away at anytime if they become uncomfortable.

For more information on live chat check out:

Live Person

Human Face

I went to a website recently that handled enquiries beautifully. I clicked on an enquiries link which took me to a page that not only provided an email address and phone number but also the name and photograph of the person I would be speaking to. This really made me feel like I was going to talk to a real human being in preference to a faceless corporation. It totally changed my attitude to the call.

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.

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.