Boagworld

News and events | Dealing with the client from hell | The international web | Julie Howell on Accessibility

News and events

There are tons of news stories which have sprung up since I last recorded a show. In fact I have spent all morning wading through my RSS feeds. Unfortunately as always I can only squeeze a few into the show so you will have to check out my delicious feed for the rest.

Gerry McGovern on Intranets

The first story I wanted to mention is a couple of posts by Gerry McGovern concerning intranets. I am constantly getting emails asking for me to talk about intranets on the show but somehow have never gotten around to it. Fortunately Gerry has and if you are somebody who works on intranet sites then you should take the time to check them out.

The first, tackles the basic problem of how to get senior management engaged with the intranet. Gerry observes that generally speaking management don’t consider the intranet an important asset to the business and so the site never gets the backing it deserves and requires. In the post he suggests the solution is in how the intranet is portrayed to management and goes on to propose a better approach.

The second article Gerry has posted on intranets is a breakdown of a report on what staff really want from their intranet. Basically, staff overwhelmingly want a better organized intranet where they can quickly find people, policies and procedures, and forms.

Gerry goes on to look at the numbers behind this conclusion and links to a summary of the results in PDF form.

SXSW Panel Picker

Probably the biggest web design news since I have been away is that SXSW have launched their annual panel picker. For those of you who do not know, SXSW is the biggest web design conference of the year and takes place in Austin Texas. The massive event has democratized their selection of panels by opening it up for you to vote on.

By going to the SXSW panel picker you can browse over 680 suggested panels and vote for the ones you like the look of most. Although this sounds great in principle, as Andy Budd points out, it can turn into a popularity contest for the speakers and not necessarily an assessment of the quality of the subjects.

That said, I need you to all vote for the three panels I am associated with whether you think they are any good or not! I don’t even care if you are attending SXSW or not, just get on the site and vote. Hell, I have crafted this podcast lovingly for you every week for over two years the least you can do is vote for me :)

Seriously though, I am hoping to be on three panels (yes I know this overkill) and am really excited as it is my first year speaking at the conference.

My panels are:

Selling your web design services (which will hopefully be me and marcus doing something very much in the style of boagworld)
Running a Successful Web Design Business (which will be a panel made up of myself, Andy Clarke, Jon Hicks and Alun Rowe)
Social networking as a brand (made up of a massive panel including Jina Bolton, Steve Smith, Mark Norman Francis, Bryan Veloso, and Steve Ganz)

Hopefully at least one of these will come off.

HTML characters lookup

My next news item that I wanted to mention is a useful little tool which has recently been launched. I love this tool because it solves a really simple problem in a very easy to use way. Basically all it does is allow you to look up the HTML code you need to include ampersands, spaces or other characters which need to be escaped.

Let me explain the problem in case you don’t know what I am talking about. In HTML certain characters are reserved for use in the code. For example if you type an & it will interpret that as code and not text. It is therefore necessary to code up these characters in a special way. This online tool will tell you exactly how to do that.

You simply type in the character you wish to use and it returns the code you have to use. The site uses AJAX so results return incredibly quickly and if you are a mac user you can even download a dashboard widget.

Very useful indeed.

Moving from Print to the web

My final new story for today is some help for you print designers out there who are struggling to make the transition to the web. It is not always an easy process not just because of learning the technical side but also the mental shift involved.

Well, if that is you I would like to make two suggestions. First up, I would like to recommend an article I came across that takes you through the process of moving from print to the web. Its extremely good and makes some excellent recommendations about where to start.

Secondly, you might want to think about getting some training on CSS and XHTML. There are a number of courses out there but if you are UK based I would like to particularly recommend a beginners CSS course being run by Rachel Andrews and Drew McLellan. These guys are both experts in their field and they have a session coming up in October. Of course this course is ideal for anybody starting out with CSS, not just print designers!

Marcus’ bit: Dealing with the client from hell

Found this rather frustrated boagworlder (Cadore) in the forum – read on&#…;

Hello everyone, I was wondering if I could get some feedback on how to proceed with a problematic client.

I have a small business client who contacted me about a website. After talking with her she decided she wanted a basic two column layout with some navigation, she would provide language, etc. All was good, but here is the main problem: I design the header or banner, whichever you call it, and she says it looks great, she loves it. Then we move onto the navigation, she likes the navigation, but now the header seems “too busy” – take a step back. One thing that cracks me up is she said in emails she wants to have a large amount of leaves throughout the design. So, I incorporate leaves and she says she is thinking of not having any leaves at all now. It’s like she wants to do the design for me? Me designer – you client. Do you understand what I am saying, every step forward she wants to go a step back. Now she has a problem with the navigation, and the background image, that she has loved and hated 4 times already. Does anyone have any advice how to deal with a client like this. I was thinking of having her sign off on every little things, but this doesn’t make for a happy working relationship. Any advice on you have proceeded with a client like this would be appreciated.

I have talked loads about getting contracts in place, making sure everything’s agreed up front etc etc. But, agreeing on the look and feel of a site is not so easy to nail down before you start working on a project.

Certainly do all of the following before you start:

Find out who will be signing off the design.
Encourage the client to make this as small a group as possible.
Talk to these people. Obviously, talk to them about project specifics (see below) but try to get to know them a bit. Get an idea whether they’re conservative in their outlook, arty, whacky&#…; whatever. I remember seeing a panel at SXSW where a Swedish creative director said that he insisted on getting drunk with his clients before starting the job&#…; there is some wisdom in that!
As them for examples of favourite sites, particularly in their sector. Ask them why they like them.
Ask them for any other marketing material that they have, particularly items they like.
Discuss their brand (even if it’s just their logo) and the importance of continuity. Make sure that you are aware of any limitations.
Discuss colours.
Discuss imagery. Ask for imagery that you can use.
Discuss layout.
Finally, when you’re discussing these items, make sure that you provide examples, choices, potential solutions etc. Your client is almost certainly not an expert web designer therefore they need ideas from you; alternatives if you like.
However, you must explain why you’re recommending a particular idea. You need to communicate that you are an expert. This is actually the crux of the problem I think. Successful designers communicate their ideas before they ‘put pen to paper’ and provide solid reasoning for their choices afterwards.

Summarise all of your discussions in an email. Insist that they agree (or not) upon all of the points in the email before you start.
Ok, so that’s all done, now you have a choice:

Limited iterations

This is when you say to the client:

‘Ok, we will put together a design concept for you. You can come back to us with any modifications/comments once that will be incorporated into the design concept, anything after that is chargeable’.

I think this works well for small client, low budget work because everyone knows where they stand and possibly expectations are lower. Also, constantly going back over a design can affect the bottom line of a small project a lot more than a big technical project.

Averaging things out

The problem with this approach is that it can piss off your clients. You can end up looking petty or, even worse, you can end up making changes for free after the agreed cut off point (“it was only a 10 minute job”)&#…;

The approach that we have ended up with at Headscape takes the view that clients won’t pay time and materials for design concept work (they need a fixed price), so we have estimated what we think the average time spent on this work and charge that to all clients. This price is per concept but effectively allows unlimited mods to that concept. If a client wants multiple concepts then they pay accordingly.

Paul’s corner: The international web

Just before I went on holiday last week I posted an entry on boagworld. On my return I was gob-smacked to see it had generated the most comments of any post I have ever added to my site.

The whole thing started with an email I received from a first time listener to the show. He was complaining about a joke I made at the expense of my american listeners. Those who listen to the show regularly will know that this is not uncommon and this listener felt the comments were inappropriate. I posted a throw away line on twitter about this and accidently started a debate on political correctness and international differences. Overnight I found myself thinking a lot about the subject and this lead to a blog post on the international web.

I started by apologizing if my humor caused any offense but the main thrust of the article was looking at the broader issues of engaging with an international audience. I found the challenges of working across multiple cultures fascinating and felt it applied to all aspects of web design (not just podcasts).

However, unfortunately the majority of comments I received focused on the apology rather than the points I was trying to raise. I really appreciated the encouragement found in the comments but would like to come back to this issue of culture and cultural differences when designing for the web. This is a challenge that we all face and I want to cover the 5 points I mentioned in my blog post again for the sake of those of you who do not read my blog.

Ask the expert: Julie Howell on Accessibility

Paul:
Today I’ve been fortunate enough to grab a few minutes of Julie Howell’s time. Julie is the director of accessibility at a digital design agency called Fortune Cookie and is also the former digital policy development manager at the Royal National Institute for the Blind. She has also been involved, I believe if this is right Julie, that you were involved as the technical author for the PAS-78 or do you call it P.A.S 78?

Julie:
It’s pronounced PAS. Also RNIB is for Royal National Institute of Blind People if you want to…

Paul:
Oh, I missed out the People didn’t I. Oh well, there you go.

Julie:
Well it’s a recent change anyway.

Paul:
Ah, it’s to keep me guessing. Anyway good to have you on the show.

Julie:
Thank you.

Paul:
And obviously, unsurprisingly we have Julie in here to talk about accessibility [laughs]. You know, it’s kinda a no-brainer really. So I thought the best place to start is, well Julie, it strikes me, and I know a lot of the people that listen to our show, that the world of web accessibility seems to be a bit of a mess at the moment. We’ve kinda got WCAG2 that seems to be taking forever to come out. We’ve got now this thing called the WCAG Samurai, what’s all that about? They seem to be in competition with WCAG2. Then whenever you go into or if you are brave enough to venture onto an accessibility forum, they all seem to be fighting over tiny details and you are terrified to say anything incase you get jumped over. Do you think that accessibility is in trouble and if so, what can it do to dig itself out of the hole? What can the accessibility community do?

Julie:
You know, I don’t think there’s as big a problem as is being suggested. I think that what you have to keep in mind is perspective and context. There is heated debate on some areas of the web about accessibility, how accessibility will change or how the guidance might change moving forward in the great big wide world of web design. But in the much bigger world of commercial companies posting content on the web, there isn’t that concern. Everything seems quite stable. It doesn’t worry me at all that the techies or the geeks, and I mean that in the nicest possible way, are having heated debate because it’s really important. That’s how things change and improve and move forward. What is important is that we as people who are part of what I call the accessibility movement, who care about accessibility and who care about the lot of disabled people, keep presenting consistent guidance to the people who really can make the difference to disabled people. That’s businesses who are putting their services onto the web. The fact that there is heated debate about the technicalities I think is positive not negative.

Paul:
It strikes me that there is a little bit of confusion among the business community about what is actually expected of them. Things like the Disability Discrimination Act. They’re not sure how it should be interpreted in reality. Do you think there’s a case or there’s a need for more legal cases to be taken up so that the boundaries of accessibility are better defined?

Julie:
I think there’s a few things in there. I think that the greatest problem that we have, rather than it being arguments about the technicality, is actually a PR issue. We have guidance. We have the Web Content Accessibility Guidance and the other two separate guidance published by the Web Accessibility Initiative. We also have the document published by the British Standards Institution, PAS-78, and I guess we’ll talk about that a little bit more. What we lack is any consistent and well resourced drive to raise awareness of those documents among the community that needs to now about them and that is businesses. That for me is the missing part of the puzzle. Of course the guidelines will keep changing because the technology is changing at such a fast rate. So that I think is healthy. But what we really do need is more effort put into helping businesses understand the guidance that we have. Businesses should not be engaged in the technical discussions because that’s not where they fit into all of this. Businesses want clear, succinct, and that’s a huge problem I have with WCAG2, succinct guidance so that they just know what to… Businesses are saying to us, and I’m saying “us” as in the voluntary sector, the government, the Disability Rights Commission (DRC), that they care about the disabled peoples access and they want to do something about it. They just don’t know what to do. They are confused about which guidance to follow and to my mind, that is due to poor PR and not having any single government department or agency in the UK responsible for pushing the guidance. We’ve got individual organisations and voluntary organisations such as RNIB and RNID doing great work on their own but there’s no government force or business force behind it. Championing the guidance that we have and saying “Actually, there’s no confusion here. The guidance has been published, it is stable and this is all you have to do to follow it. Go forth and get on with it”.

Paul:
Let’s talk about PAS-78 a little bit in context of the business community and what they need to know. Correct me if I am wrong but my understanding of that document is that it was meant to be advice for people that run websites, website owners, to really get them up and running. Is that a fair assessment of what it was about?

Julie:
Erm… I’ve never heard it described that way.

Paul:
[Laughs]

Julie:
[Laughing] I would say that it’s there to provide clarity. We were concerned by the feedback that we were receiving that people in the business community were confused about the range of accessibility guidance that was available on the web. If you go to a search engine and type in “web accessibility”, you get all sorts of stuff back and some of it seems to be conflicting. So what we wanted to do with PAS-78 was pull all of the web accessibility guidance that’s produced by WAI, and also that’s produced by the software developers such as Adobe and others like Microsoft, all together into a single document that can be read within a couple of hours if you want to sit down and read it end to end or could easily be dipped in and out of, which was the definitive guide to the process of making a website accessible. The existing technical guidelines are not for business managers so we have written a document that is in a language that business managers can engage with, can digest, and puts everything together as a process. So it talks about guidelines and it doesn’t seek to create any new guidance. It points to guidance that’s already been published by WAI and others. But it also explains this is a process. This is what you do at this stage and it’s very important to involve disabled people at this stage; at this stage you should write an accessibility policy, later an accessibility statement. These are some of the questions you might want to ask when you are appointing a web design agency. So it puts all of that together in one document. That’s what we were seeking to do really. There’s a few words I used when I was launching it. Two of those words were harmonise and consolidate. It was nothing new. It was bringing together all of the guidance so there was absolutely no doubt. If anyone in the business says “I don’t understand what to do to make my site accessible”, PAS-78 is the only answer they need.

Paul:
OK. So where would they find and get hold of that?

Julie:
Well PAS-78 is free. Now it’s freely available because of the Disability Rights Commission. If you go to the DRC, the DRC have a licensing agreement with the British Standards Institution. So if you go to the Disability Rights Commission website you can download a PAS-78. It’s available in a variety of formats including accessible PDF. After all the medium is the message. The website address for that is http://www.drc-gb.org/pas.

Paul:
Well that brings us nicely onto WCAG then doesn’t it. What are your impressions are of WCAG2, how the WCAG Samurai stuff fits into that and what your current thinking is on all of this?

Julie:
Yeah, we live in interesting times as they say. I’ve been involved with WAI to a lesser and greater degree since 1995. A long time. I’m very conversant in the processes that are there. Now I’m a policy person and a disability rights campaigner. I’m not a coder. I’m not a geek, meant in the nicest possible way, and I’ve got no interest in become one either. I used to design websites but that was back in the day and it’s all very different now. What I care about is disabled people getting access to the web. I care that businesses are enable to make that happen. So as your listeners know WCAG2 has been in development for a really long time. That in itself troubles me because that makes it seem like disabled people are a huge nuisance and very, very difficult to cater for because an organisation catering in specialising to disabled peoples needs on the web takes many, many years to come up with guidance. I don’t like the message that puts out and I think that fuels some of that kind of confusion and misunderstanding and hence that’s why we did the PAS. It was so much quicker and it puts out, I feel, the right messages. People joke about it now don’t they. How long it’s taken WCAG2 to appear and that is because it’s subject to a very rigorous process of course but taking a long time. Now it’s in its latest drafting stages and I have to say… I’m sure you’ve read it or at least looked at it. I haven’t read it because I don’t have the time to read a document of that size. However, it’s not for me. It really is a technical manual now and as a technical manual, what is important is that those of you who are developing code and need to read the technical stuff are engaged by it, will read it and use it effectively. So that’s where the checking needs to be done. I think in the past where we’re getting some of these struggles at the moment, is because WCAG1 was a document for all. So you could read it if you were a developer and you could also have a good read of it if you weren’t and get something out of it. Looking at it now, it looks like a technical manual. Then, for me, it comes back down to PR. If it’s a technical manual then they to call it such and make it clear. If you put that on the desk of any business director general / CEO and well you can imagine the reception that you’ll get, who wants to read that? That said WAI always produce very comprehensive guides to their guidelines and curricular to help the various groups to apply the guidance correctly. They will do so in this case and again for me it’s down to PR. It needs to be made very clear to each individual group, developers, business owners, advocates as well, which guidance is for which group so that we don’t get people belly aching “Oh this is too long”, “I don’t have time to read a document of 100+ pages”.

Paul:
What hadn’t occurred to me there until you just said it, the fact that this applies not just to people like Adobe and Microsoft but also applies to me potentially. If I’m developing a web application that enables users to contribute and upload content then in effect I’m being an equivalent of a Facebook or a Myspace and I need to be aware of those kinds of accessibility issues there are well. It’s quite interesting.

Julie:
It is and then it gets more interesting when you look at it in the context of the law in this country. We have the Disability Discrimination Act and that puts, and I choose these words very carefully, a legal duty on “service providers”. Now software developers are not covered by the DDA. However, the line is blurring. If a website is inaccessible, say a blind person goes to a site to do some shopping and it’s inaccessible, who’s responsibility is it? Whose legal duty is it that the site is accessible? Well it’s the owner of the business because it’s their service. But there’s an argument that the developer who coded the site has aided and abetted the discrimination. But we don’t have any case laws so this is all theoretical until we do get some case laws to back up what were saying. However software developers are not subject to the DDA. There’s a blurry of the lines, in my opinion, between a service provider and a software developer. But if I was to take an educated guess, if a disabled person experienced an instance of discrimination as defined under the Disability Discrimination Act and that happened because they tried to utilise a server via somebody’s page on a social networking site, who would be responsible? That would be very interesting. We also have the DDA, the Disability Discrimination Act. I have Multiple sclerosis. Everybody knows this. I’m very open about it and it really informs my work. Being somebody who stands to benefit, stands to live my life as I choose to and prosper because of the DDA, I can tell you from this side of the fence that the DDA is a very weak piece of legislation as it is. We don’t to date have any case law regarding websites but even if there was a case, it would take quite a number of cases to have any useful body of guidance other than what we already have and know as is published in PAS-78. Really that is your best guide. So yeah, interesting times that we live in. What I would say is that would hope that anybody who is responsible for social networking has a social conscience and cares very much about the ability of every member of society to be able to use the content, to both access it and create it. Unfortunately, disabled people don’t always figure in the planning process when people are putting together solutions and this is again where the web accessibility needs to keep on ramping up that awareness effort to get everybody to understand and to be thinking about disabled people at the earliest part of the conceptual process for new technology. It’s an issue we’ve always had that with web accessibility we’re always running to catch up because new ideas that come to market on the web really, really quickly and the trick to it, in my opinion, is getting close to the innovators, throwing in their face and keep on reminding them. Today we’re talking about accessibility of social networks, tomorrow it will be something else but I’ve got no idea what it’ll be.

Paul:
OK. So just before we wrap up let’s bring it back down to the more mundane day to day level. There will be a lot of people that are listening to this podcast and listening to our conversation thinking “Wow! This seems really overwhelming. It all seems very complicated. There seems to be talking about us having to get disabled people in to do testing, that sounds very expensive. There are legal obligations here and that sounds very scary. There are these various technical guidelines and they all seem very confusing.” Just to those people that are web sites owners that have perhaps buried their head in the sand so far about accessibility. What little step would you suggest to them? Just to get them going. Just to make the first tentative steps into the world of making their site more accessible.

Julie:
The first document to read is PAS-78 which is free of charge. It’s only about 60 pages and that’s in large print. It really is quite an easy read. We made sure of that when we wrote it. PAS-78 sets it all out in plain language. It’s very much written with the business audience in mind. I’d also offer some encouragement. Have a look at some of the case studies, you can easily find them on the web, of big companies that have applied accessibility and are profiting from it. An example being Legal & General, the one that I talk about a lot at the moment. Legal & General had a 300% increase in the take-up of one of their financial products via their website after they made the site more accessible.

Paul:
Wow!

Julie:
300% in a matter of months. You wouldn’t dare set that as a business target. It astonished me and I’ve long believed in this stuff. 300% is amazing. There’s also been a lot written about Tesco. Tesco take millions more in extra business away from their competitors because they’ve made their site more accessible. Accessibility is a good news story. There is money to be had through accessibility. If you make your website content available to the biggest possible audience that you’re tapping into a much bigger pot of money. Disabled people as a group in the UK alone are estimated to have an annual spending power in the region of £85 billion! An incredible amount of money that someone needs to exploit, to capitalise one. Disable people are very happy to be marketed to. Perhaps more so than other groups because disabled people, in particular blind people, are not exposed to advertising and therefore not exposed to a lot of choice that those of us that can see take for granted. Accessible sites are also interoperable sites. They work well on different platforms. If you make your site accessible for a PC you’re making it accessible for many other technologies including a mobile phone which people are using increasingly more now in the UK. Yes, there is a legal imperative as well. I wouldn’t be afraid of that though. There’s a long process involved in that. The DDA to safeguard disabled people’s rights to participate in society. Now indeed when a disabled people feels and finds that they have been discriminated against because of the way a web service is presented to them, of course they are going to feel angry and upset. I have long said I have never understood why I should be able to use a product or service to buy some tickets online because I can see but my blind friend can’t. To me that’s completely unacceptable and unnecessary discrimination. However it’s not a case of “Oh I’m not happy” and we’re all in court. There’s a process there of conciliation. The DRC is involved in that process or it can be, as well as a number of disability organisations because what we want is not to take anybody to the cleaners. It’s to make the web more accessible. The key to that is my mind is dialog. When I used to work at RNIB, if a blind person contacted me having found a website they couldn’t use and it was one of the bigger ones. This is what happened with Tesco. 40 blind people got onto us saying they couldn’t use Tesco and they wanted a legal case to be taken. This was tremendous because it’s alerted Tesco to this issue and it meant that we were able to start a dialogue, the result of which is hundreds if not thousands of blind people are now able to do online shopping for their groceries and delivered to their home which is wonderful. Tesco is not unhappy because it’s bringing in a lot more money through that channel where it wasn’t bringing in any previously from disabled people because it was inaccessible. What we are trying to achieve here is sustained change that will see disabled people included in society to the degree that it would seem outrageous and ridiculous not to do so. Big changes happen. I never thought I’d see smoking banned in public places. I can’t believe it. My goodness if we can do that as a society we can change the way we behave towards disabled people, stop belly aching about the issues and talk to each other about working towards solutions. I’m optimistic that in 20 years we’ll see disabled people much more included in everything that we are all doing now to keep the debate about disabled people and accessibility alive, contributing to a brighter future for disabled people. We should just keep on doing what we are all doing.

Paul:
Excellent. Thank you so much Julie for taking time to come in and talk about that. It was really interesting. I hope to get you back in again in the future before too long.

Quick and dirty competitive analysis

Posted in Web strategy on August 9, 2007 by Paul Boag

If you have a long list of competitors, doing a comprehensive review of them all might be too time consuming to be justifiable.

Every organisation should know what their competition is doing online. However, getting your boss to pay for proper competitive analysis is not always easy. I therefore thought I would share some quick and dirty techniques for doing competitive analysis yourself.

I am going to go ahead and make the assumption that you already know who your competitors are. If you haven’t already, make a list of them including their websites. Depending on your sector this could be a fairly long list. It will range from the large well established players to the small and dynamic upstart.

If you have a long list of competitors, doing a comprehensive review of them all might be too time consuming to be justifiable. In such situations you will be forced to narrow the list a little. However, be careful. The tendency when narrowing the field is to focus on the largest competitors. This can be a mistake. Sometimes the smaller sites, or those new to the marketplace, are more likely to be doing something innovative which you might be able to learn from. Instead try and ensure a mix of both larger and smaller sites.

Once you have established which websites you want to review I would suggest trying the following steps.

Basic review

Step 1 is to do a basic visual review yourself. Nothing beats taking the time to look through a competitors website. As you look through each site ask yourself a series of questions.

What is the message and tone of voice being used on this site?
What content and functionality is highlighted on the homepage and in the navigation?
What image are they trying to project through the design?
What functionality and content do they have compared with your own website?
What labeling are they applying to the content areas and site sections?

The aim is to gain a better understanding of the strategy being used by your competition regarding the web. Where you encounter differences in approach from your own site ask yourself why. Why have they chosen to approach the problem in a different way? Does that alternative approach give them an advantage?

User testing

Step 2 is to try user testing your competitors websites. There is no reason why you can only user test your own website. In many cases it can prove extremely useful to test your competitions website because it gives you an opportunity to test out responses to design, content, functionality and site structure. In short you can learn from what they have gotten right and improve on what they have done badly.

I am not going to get into the details of running a user test session here, although this is a subject we should return to at some point. What is important, is that testing a competitors site is a great training ground for making improvements to your own.

Accessibility

My next step when assessing a competitors website is to assess how accessible the site is. Potentially your competitors could be turning away valuable business simply because their site takes too long to download or because it cannot be accessed by people who don’t use internet explorer. Obviously accessibility is also about access for the disabled and this can be assessed using the WAI guidelines. However, if you are a website owner or manager rather than a designer/developer these guidelines may well prove more confusing than helpful.

For the sake of this section I want to suggest two tests that you can use to help assess how many users your competition are turning away.

Browser support

The first is to look at your website on as many different browsers and computers as possible. Many people do not realize that there are other browsers than Internet Explorer and that even Internet Explorer has various versions that will display your website differently. I would recommend you look at your site in at least Internet Explorer 6, Internet Explorer 7, Firefox, Opera and Safari for the mac. You may well be surprised at the differences you see. You can either download these browsers and test the websites manually or alternatively use a services such as Browsershot that will provide screenshots of website as displayed in different browsers. Obviously, if you use a screenshot service then you won’t get the interactivity of a real browser. However, for the sake of assessing the competition this is normally enough.

Download times

The second test you might want to perform is analyzing how fast the site downloads. In this age of broadband many web designers have become less concerned about download times. However, not everybody has broadband and most sites cannot afford to ignore dialup users. One service that helps you find out how long your site takes to download is a website optimization tool. Ideally you should be looking for download times of less than 10 seconds however anywhere between 10 and 20 seconds is acceptable.

Online visibility

My final step for assessing the competition is to look at how visible their website is. That is to say, how easy it is to find. Do your competitor’s websites rank higher than your own? Do more people link to them? Is there more talk about your competitor’s brands than your own? All of these questions are incredibly revealing.

A good place to start is with one of the many free websites that check various sources to ascertain online visibility. The one that I use most often is popuri.us. This checks your competitors visibility on Yahoo! and Google, but also on blogging search engines like Technorati and social networking sites like del.icio.us.

If you want more specific information relating to your visibility on certain search phrase then you will need a rank-checking tool. Again there are various free services available including Google Ranking, which checks all major search engines despite the fact that its name appear Google specific.

However, it is the question of linking that is most interesting. Who links to your competition and can you persuade them to link to your site? Finding out who links to your competition is remarkably simple. Just use the same popuri.us service I mentioned earlier. You will notice a number of the results are marked “backlinks”. By clicking on the details link associated with these backlinks you will be taken to the appropriate search engine and see all of the webpages that link to your competition. Alternatively you can simply go to the search engine you wish to check and type:

link:http://www.yourcompetition.com

This will return all of the sites linking to that website address. You can now contact these websites as appropriate asking if they would be willing to link to you instead of your competition.

Summary

The above is not intended to produce a perfect competitive analysis but it should get you started. Its a quick and dirty approach that gives you a handle on:

How easy your competitors websites are to find
Whether they are turning potential visitors away
How easy their site is to use
What they are trying to communicate and achieve through their content and functionality

Hope that helps.

Show 86: Boagworld Book

Posted in Classic shows on July 10, 2007 by Paul Boag

On this week’s show: Paul talks about taking a brand online, Marcus gives some advice about reviewing your information architecture and Ian Lloyd introduces us to the challenges of designing for screen readers.

Podcast: Download (44.6MB)

Paul’s personal news

Just a bit of personal news before I get into the industry related stories. I want to let everybody know I have signed a contract to write a book. The book is going to be primarily for website owners rather than web designers, however to be honest I think it could appeal equally to both. I intend to look at what “client’s need to know about building and running a website” so hopefully it should show by example how best to communicate and work with clients.

The most exciting thing about this book from my point of view, is the fact that I want to write it as a collaborative process with you the boagworld community. I am going to release chapters for you to see in advance of publication and also blog on various aspects of what I am writing. I really want to encourage you to share your thoughts and make suggestions as we go along through comments and the forum. I have already set up a forum thread dedicated to book ideas as well as an initial blog post on the book.

Obviously writing a book is a really slow process, but hopefully it is something that we can all get excited about.

News and events

Building for the iphone

Unsurprisingly there is a lot of information appearing relating to building web applications for the iphone. There is an iphone gallery consisting of hundreds of screenshots of the iphone. This is great if you want to mirror the look and feel of the iphone as closely as possible. There is also the iphone developers guide from Apple which provides loads of great advice. Finally there is iphoney, a piece of software that replicates some of the iphone’s web browsing functionality and lets you see what your application will finally look like.

Of course whether it is worth developing for the iphone at this stage is another matter. I guess if you are trying to reach the tech-savy audience who are iphone owners then maybe. Otherwise it might be better to wait until the iphone becomes more mainstream or other phones start offering the same level of web experience.

@media podcast

I was gutted to miss @media this year. Well, I say gutted, I was actually on a really pleasant family holiday, so I cant complain. However, I did miss a great line up of speakers talking about some amazing subjects. I was particularly depressed to have missed Jesse James Garrett’s keynote on “Beyond AJAX” and “Diabolical Design: The Devil is in the Details” by Jason Santa Maria.

Fortunately the recordings of the @media sessions are beginning to filter out for me to download and listen to. However, note that I don’t call them a podcast. There is no feed that I can find which is extremely frustrating.

Setting that little moan aside, it is great to be able to listen to these speakers even though I did not attend the conference and I would strongly encourage you to download and listen to a few yourselves.

Common mistakes in web copy

Although we would prefer to avoid it, the reality is that as web designers we write far more copy than we would like to admit. As for those of us who are website owners, a substantial part of our responsibility is writing good web copy.

We have talked on the show before about writing good copy but our focus has mainly been on style rather than technical detail. This week, I came across a post about common grammatical mistakes. However what I liked about this post is that it wasn’t focusing on the silly details of grammar that don’t really apply particularly well to the conversational tone of the web. Instead it looked at errors such as when to use “me, myself or I” and the difference between “i.e. and e.g”.

If you ever have to write copy then spend a few minutes to check it out. It only covers the worse offenders so doesn’t take long to read.

A department dedicated to the web

Jeffrey Zeldman has written a post entitled “let there be web divisions“. If you are responsible for deciding who should manage your corporate website then you simply must read this. If you are a mere foot solider then it might not be as relevant but it is still a good read.

Basically Jeffrey proposes that a company website should not sit under IT or marketing (as is traditional) but should be a division in its own right. I am not going to repeat all of Zeldman’s logic, but I have to say I wholeheartedly agree with it.

Websites are simply too multi disciplined to sit comfortably under either department and too important to be caught in an endless tug-of-war.

Paul’s corner: Taking a brand online

About a week ago, I had to give a presentation to a board of directors ,explaining the process we went through to develop a new design for their website. A large proportion of that presentation focused on the issue of brand identity. This organisation had a very well developed style guide and we spent a lot of time and effort getting that guide to work online. My presentation talked about the various steps involved and it occurred to me this might make an interesting podcast section.

I have also put together a blog post on the subject of “taking a brand online” and it is this that I cover on the show.

Marcus’ bit: Information architecture review

I am currently in the process of carrying out an information architecture review for a new Headscape client. I have done a fair amount of IA work over the years but I have found myself particularly enjoying this one so I thought I’d waffle on about what I’ve been doing.

We have covered the various aspects of IA work in previous podcasts – Expert Review, Stakeholder Interviews, Card Sorting and Wire Frame testing. This section is looking at the first of these, expert review, in a bit more detail.

I think it’s worth explaining what I mean by Expert Review. When we carry out an Expert Review we are effectively analysing a client’s existing site content, site structure and naming conventions with a view to creating a new IA based on our experience of using and developing websites. This is a collaborative process with the client – it has to be; we can make logical, usability based decisions but cannot claim to be experts in the client’s particular field.

First things first

I make sure that I have a good grasp of a number of things prior to carrying out an IA review. At the kick off meeting make sure the following are covered:

Target audience – this is crucial for the development of the IA. It may be that the existing site caters for one group well but another poorly.
Site aims – is there a stepped process that the client wants their users to go through.
Design – things like horizontal over vertical navigation can affect the IA.
Homepage requirements – find out what the killer apps and content are as these will need to be linked to from the homepage.
Finally, have a general discussion about content and site structure. See what the client thinks is important and what’s not.

Map out the existing site

The first thing I do is map out the existing site’s IA. This is a fairly slow and laborious task but it is the best way to not only learn about a site’s content and structure but also to understand what they do and what they offer.

Be logical, captain

Usually, the goal of this type of exercise is to streamline content into groups and name those groups so that users will understand what’s inside them.

Site’s that have grown organically over a period of time tend to spread content all over the place. It is usually fairly easy, though time consuming, to group content together. There are various methods for doing this; I tend to print out the existing site IA (that I usually create in Excel unless it’s a particularly small site, then I might use Visio) and scribble all over the printout until I’m getting somewhere. Some people like to use cloud/cluster diagrams (either on paper or using software) or there is always the age old method of creating ‘cards’ where each page name is written onto a scrap of paper. This is a bit like doing card sorting on your own where you group the cards into piles and give names to each pile.

Naming

We come from the ‘it does exactly what it says on the tin’ school of page/section naming. Marketing departments often don’t! A good example of this is the trend to verbs as section names over nouns. I remember one client wanting to call a site section ‘Enjoy’ when the section covered ‘Leisure Activities’. No prizes for guessing what we recommended!

Labels should be as descriptive as possible. Sometimes this can be difficult when:

there isn’t much space, for example, ‘How to register for our newsletter’ won’t fit on the average button, even ‘Newsletter Registration’ would probably be too much for a top level, so I would go for just ‘Newsletter’. It’s fairly obvious that the content underneath will relate to the organisation’s newsletter and should logically include registration, whereas ‘Register’ leaves the user asking ‘register for what?’
Sometimes sites are so big that main sections can include too much differing content to be labelled descriptively. In this case, I would recommend either shortcuts on the homepage replicating the main sections that include descriptive words or create drop down navigation that displays the lower level links.

Section ordering

This should follow some sort of desired path through the site. For example, the client may want users to get a bit of background, followed by an understanding of what the organisation offers, followed by some examples of previous work with a view to finally making contact. This would translate to:

About Us | Services | Case Studies | Contact Us

Conventions

Users don’t want to have to think (that sounds familiar!); they want to look and understand straight away. Following conventions helps with this process. For example, many sites include an About Us section as the first main section. This usually includes some history, annual reports, job vacancies and contact details. Users looking for this type of information don’t want to have guess that this information might be under, for example, ‘Company Background’ which is located at the far right of a horizontal navigation.

Collaborate – to a point

When you have created your first draft it then needs to be reviewed by the client, discussed and iterated until everyone is happy. Take on board any changes that are based on your lack of understanding of what the client does but be prepared to stand your ground on issues relating to web conventions and usability – after all, they’re paying for your expertise.

Ask an expert: Ian Lloyd on screen readers

On this week’s show we have Ian Lloyd giving us an introduction to the world of screen readers. I vividly remember the first time I heard a screen reader being used. I was gob-smacked by how painful an experience it was and I am still amazed that anybody manages to use them effectively.

It struck me that many of you listening to this show might not have heard a screen reader before. Hearing what blind people have to work with really makes you take their needs seriously and so I thought I would get Ian on the show to give you a taster.

In his segment, Ian takes us through some classic problems that screen reader users experience. Unfortunately to best understand what is going on in some of the examples you need to see what he is doing. In order to get around this problem Ian has made a screencast to accompany the audio. There was too much detail to make it available online or via your video pod but you can download the screen reader .mov file here.

What follows is a transcript of Ian’s section of the show…

Hello Paul, Hello Marcus and hello to listeners of Boagworld. This is the ‘Ask the Expert’ section and today I’m going to be talking about screen readers.

Now, I don’t actually qualify [meant to say classify!] myself as an expert screen reader user simply because I don;t use one on a day-to-day basis, because I’m not forced to; I do have good vision. As such, the way that I would use a screen reader would be different from someone who has to use it on a day-to-day basis. That said, I still think it’s useful to demonstrate to people what a screen reader sounds like. And the reason for this is that as far as I am aware on your podcast although you’ve talked about accessibility a lot and mentioned screen readers I don’t believe we’ve ever had a demonstration of what they actually are like for people when pages are built incorrectly.

So, today I’m going to be showing a few problems using a screen reader. I’m also going to be doing this as a video, so this is a screencast. I understand that at the end of this you will be providing a URL for listeners so that they can access this and view what’s happening on screen. Because of course it’s all well and good to listen to this stuff but to get the full context it would be good to actually see the video as well. I will try my best to describe what’s happening on screen throughout this podcast though.

Now the first example we’re going to look at is Amazon dot com. And somewhat cheekily I’ve brought up the page for my own book on Amazon. And, er, just having a look around at what I can find on the screen and there are some issues there. So, let’s have a look at this.

[Screen reader reads out page graphic correctly 'Build your own website the right way using HTML and CSS, Link graphic']

Oh, so that’s not too bad. I’ve just found an image there and it’s announced it correctly because it’s found a suitable alt attribute but underneath there are a couple of thumbnail images which, if I want to access those, it gives me a whole different … well, hear for yourself:

[Screen reader announces: 'See larger image, Link' then moves to next link, the thumbnail image and reads an unintelligible string of characters - numbers letters and underscores - out to the listener].

Mmm, doesn’t make an awful lot of sense does it? Let’s try the next image:

[Screen reader reads out more unintelligible characters and takes almost 8 seconds to read it out]

So, what’s happening there? Well, it’s quite simple: there’s no alt attribute defined for that image and so JAWS tries to fill in the gap and, er … oh I didn’t mention earlier that JAWS is the name of the screen reader that I’m using. So it tries to fill in the gaps because it doesn’t have an alt attribute it uses the file name instead and the filename, as is often the case on Amazon, is a right load of old gobbledegook! So it doesn’t give it any useful information about that image.

Here’s another example of the same thing.

[Screen reader reads out an image gallery as 'thumbs slash zero, thumbs slash one, thumbs slash two' etc]

So this is actually a photo gallery, erm, with a bunch of thumbnail images hence it’s reading ‘thumbs’ because that’s the folder where the thumbnail [image] is actually in and it’s reading them sequentially as well. It doesn’t sound quite as painful as the Amazon example but it still doesn’t tell you any useful information about the images on the page.

[Screen reader announces more examples from the same page]

So let’s listen to a slightly improved version of that:

[Screen reader announces the same images but with appropriate alt attributes, e.g. 'The Mystery Machine, driven by Scooby' for a photo of a camper van that is painted like the Mystery Machine from the cartoon Scooby Doo]

If we were to look at that on the video I’m showing that page with the style sheet disabled and the alt attributes displaying inline next to the image. As you could hear in the second example it was far more usable – you could actually understand what the image was about (as long as you understood some of the VW terminology used in there), whereas in the first example none of the images actually had alt attributes so it was just trying to read out the location of the file.

So let’s look at another example.

[Screen reader announces content of new page 'Page has no links' and then starts reading subsequent page content before I stop it]

What I’m looking at on screen is a page that seems to have a page full of links. But if you were listening carefully to the beginning of that, the screen reader thought otherwise. I’ll just try to find that again for you.

[I scrub back in the video clip to find the part where the screen reader says no links]

According to the screen reader the page doesn’t have any links. And the reason it thinks that is, well, there *aren’t* any links. What’s actually happening … is … we have a whole bunch of text on the page that is styled using CSS and the behaviour for the link is added using JavaScript. So, we have a <span> element that has an onclick event, location.href=’somewhere.html’ and that’s [the span] wrapped around the text that says ‘This is a link – click me’. Um, but of course it’s not a link. The screen reader can’t find it because it’s not an <a href="">, it’s something else that’s been styled to look like a link and behave like a link. But it’s not. Thankfull that’s not too common but you have to just be aware that what may look great on screen for you may not be any use to someone using a screen reader. You have to use the right markup for the job.

So, you could have a page that’s full of links that say ‘click here’ but of course that’s another problem all in itself. Let’s have a listen to that:

[Screen reader reads 'Click here to view' repeatedly as I tab through the links on the page]

Yes, so … the problem there is that it doesn’t give you any information at all. And this is actually still quite common. In fact just yesterday I was looking at Facebook dot com (for my sins) and, er, I was quite shocked to find that they were using a lot of this where the link phrase was ‘click here’ as opposed to the phrase that you would really want to have, so for example instead of saying ‘click here for more information’ and having ‘click here’ as the link phrase you would have ‘for more information about our products’. That would be the link phrase. Erm, but if you just use ‘click here’ and you’ve got a whole page of links that reads ‘click here’ this is what you get:

[Screen reader once again reads 'Click here to view' repeatedly as I tab through the links on the page]

Basically, completely unusable.

Now the next example I have is of a form, and in this example, er, the form has been laid out using a table. Thankfully, these days, tables are being used less for layout and people are using CSS for page layouts. However, for forms it’s still not uncommon to see someone put a table in there. And, er …

[screen reader interrupts as page loads]

OK, so in this example what I’m looking at on screen is what appears to be, um, well … four text inputs, and then there is a radio button and it’s basically asking for some personal information, first name, surname, your age, place of birth and then a question ‘Do you have a nut alergy’, the answers being ‘no’, ‘yes’ or ‘don’t know’. So let’s see what the screen reader makes of this.

[screen reader says 'table with two columns and four rows'. I tab to the first input and it reads 'surname/family name - edit']

Already we’re hitting a problem. Because the first field that I tab to I can see on screen is *actually* [the one for the] the first name . But the screen reader believed that to be the surname.

So I’ve now tabbed to the second field which is the surname and it didn’t announce anything. So let’s tab to the next field:

[screen reader announces field as 'town/city - edit']

Again it’s getting it wrong. I’ve actually tabbed to the field that says ‘Age next birthday’

[tab to the next field, screen reader announces 'tab - edit']

And *now* I’m in the ‘town/city of birth’ field and it hasn’t told me anything.

[screen reader announces 'yes - radio button', then 'don't know', reading the radio button choices]

This is all a bit confusing here. OK, so it’s asking me the question ‘Do I have a nut allergy?’.

[I tab to the next field, screen reader announces 'Yes - radio button - unchecked']

OK, so … that thinks I’m at the yes radio button but I’m looking at it on screen and it says ‘no’. So, what’s going on here? Now this is going to be a difficult one to explain on the podcast; this is one of the sections where you really need to see the video. But what’s actually happening here is we’ve got a table to lay out the page and the text sits above the text input, so for example where we’re asking for first name, the text that says first name is in the first column and the input that relates to that is in a column underneath, sorry, I mean a table cell underneath it in the next table row. Now the reason this is causing a problem is because if you were to actually linearize that table, in other words look at it in the order of the source code you get a very different view of it. And this is what happens with the screen reader. So if I were to look at this form and read it out in a linear fashion, it goes like this:

First Name [text]
Surname [text]
Form input for First name
Form input for Surname
Age [text]
Town/City of birth [text]
Form input for Age
Form input for Town/City of birth

And so on. The problem is that the screen reader expects the text for that input to appear before that input, and because of the way this has been laid out it really really gets things confused. As I said, this is quite a difficult one to explain on the podcast but if you look at the video clip you’ll see why this is causing a problem.

[screen reader blurts a few things out as I try to manipulate it ... poorly]

Sorry about that, that didn’t add anything useful at all. Hopefully Paul can edit that out!

OK, so …. the big problem here is that you may be asking a question as we have here that says ‘Do you have a nut allergy?’ and the answers are ‘no’, ‘yes’ and ‘don’t know’. But if you do put the form elements in the wrong order you’re gonna have a problem. And the reason is obviously that with a nut allergy that could be a life or death situation. You could be filling out a form as a blind user and you select what you think is the ‘yes’ radio button but because the form has been poorly laid out and doesn’t have <label> elements that are actually helping to enforce the accessibility you may actually have been selecting the no checkbox [meant to say radio] and it really could be a life or death situation. It may *not* be as bad as that – it could end up with you booking the wrong hotel location or date. So you have to be very careful with the form layout.

OK, one final example. Now everyone’s talking about AJAX, it;s the buzzword of the moment. Unfortunately it’s also not very good for screen reader users. And the reason for this is that, er, anything that is updated on the page after page load is very very problematic to pass on to the screen readers. now the example I’m going to give here is a fairly simple one, and it’s the Google Suggest page. What Google Suggest does is let you type in your search phrase and as you type it’s calling back to the server, finding suggestions for you which it then populates in a list underneath the search input. So let’s have a listen to that.

[screen reader announces: 'google search - edit, type and text' then reads each letter of search term 'this is a test' as I type]

So I’ve just typed ‘this is a test’ and on screen underneath that is a whole bunch of suggestions that it has found. But if I try and actually access any of those using the keyboard:

[screen reader announces 'Google search - edit, Google search - edit, Google search - edit, Google search - edit' with each keypress on the down arrow]

It’s actually doing nothing. On screen I can actually see that it’s going up and down the options but the screen reader, it’s getting nothing back at all, nothing useful at all.

[more screen reader confusion]

Well thankfully with Google Suggest this is something tat you can opt out of – you don’t have to use Google Suggest, it’s not enforced on you. But it’s a very simple example and it just goes to show that a very simple technique like this can be, basically, completely unusable for someone using a screen reader.

So, that was just a few examples. Hopefully you’ve had an indication of how a poorly built website or web page can affect a user. the bottom line is, keep listening to the podcast, keep doing things right, keep using good markup and, if you can, test your own web pages or web sites using a demo version of JAWS. It really does pay dividends to find out how this works – or doesn’t work. So, thank you very much, I hope this has been useful, and I look forward to the next podcast, Paul. Thanks guys.

No show next week

Unfortunately there will be no show next week as I am away speaking at the Institutional Web Management Workshop. However we will be back the week of the 23rd July.

Show 85: Bulletproof

Posted in Classic shows on July 3, 2007 by Paul Boag

On this week’s show: Paul provides some design advice for developers, Marcus provides so post launch pointers and we review Jeremy Keith’s Bulletproof AJAX book.

Podcast: Download (20.3MB)

News and events

Unfolding the fold

The first news story today is actually not news at all. Well, its news to me (because I wasn’t previously aware of it) but the actual post was made back in December of last year.

The post relates to that most irritating of subjects; “the fold”. I have spoken about the fold many times before. The mythical point at which people have to start to scroll. I say mythical because this point changes depending on your screen resolution, browser type and toolbars.

The reason it is so annoying is because clients are obsessed with it. They are convinced that users don’t scroll (a perception rooted in the early 90s) and no amount of persuasion seems to change their minds.

However, hopefully the post I found this week will help. “Unfolding the Fold” is a post on the ClickTale blog that provides some hard stats about the fold and scrolling in general. It demonstrates that the vast majority of people scroll, with almost all of them scrolling right to the bottom of the page. Their conclusion is that there really is no reason to squeeze all of your content above the fold.

d.construct tickets on sale 10th July

If you are in the UK on the 7th September you should be sure to come to d.construct. d.construct is in my opinion one of the best web design conferences around. The reason I like it so much is that it works hard to maintain a grass root feel that is accessible to anybody.

For a start the price ticket is very accessible at £85 + VAT. Secondly, the whole thing happens on a single day so there is no need for expensive hotel bills if that is a problem. Finally, they have a great mix of speakers with many of the big names you would expect but also a lot of less well known people in order to “shake up the scene”.

The reason I mention it now is because the tickets are going on sale next tuesday (the 10th). Historically they sell out incredibly fast. Although this year they do have a larger venue and so that should help somewhat.

I really want to encourage you to attend this event if at all possible. I will definitely be there and it would be great for us all to meet up.

Fonts licensed for web apps

Talking of d.construct, Richard Rutter (one of the organizers of the event) has posted an interesting blog entry on “font licensing“. Admittedly font licensing, doesn’t sound very exciting but potentially it could be. Richard has spotted a press release from a prominent font provider. This press release talks about a new type of license…

Ascender Corporation announced a new licensing program for font software implementations with server-based applications.

Richard goes on to suggest this might be another move towards browsers supporting downloadable fonts. This would allow us to use whatever font we wished on a website rather than being limited to what the user has on his or her desktop.

Richard does warn that this might just be in reference to Silverlight, because Ascender does work very closely with Microsoft. However, personally within the context of Opera’s move towards downloadable fonts, I am hopefully this might be something more.

A new way to visualize your desktop

Finally today, I wanted to mention a technology called Bumptop. I recently watched a demonstration of the system and was blown away. Basically, Bumptop is a new way to work with files that mirrors much more closing the experience of interacting with your desk in the physical universe. You can stack files, throw them around and even crumple them up in a 3D environment.

When I first watched this demo it felt like a novelty, but the more I thought about it the more potential I saw to organize content in a more dynamic and flexible way.

What I like most about this interface is that it is not trying to teach us a new method of interaction. Instead it is trying to replicate something we are already familiar with. The idea of using metaphors we already understand is a staple of interface design and is what makes things like tabs, desktops and folders so successful.

I think as web designers we could learn from technologies like this. We should be looking to build on established conventions people understand rather than always seeking to do the next big thing or be innovative in someway. Bumptop is innovative but it does so in a way that is instantly accessible to everybody.

Paul’s corner: Design advice for developers

I received this great question from Simon that I thought worth addressing on the show…

I hear lots of questions about the technical and business side of Web design, but what I don’t hear is how do the already technical amongst us become better designers – maybe being a visual thing this just won’t work on an audio podcast, but at least you could give us your top 5 ways to grow artistically.

As has become tradition, I decided to blog on the subject a few days ago but unsurprisingly failed to stick to “5 ways to grow artistically”. Instead I managed to produce a long and rambling essay on “when designers design” which I bore you all with on the show.

Marcus’ bit: Post launch Protocol

Everyone, client and agency, seems to understand the principle of not letting a site stagnate. Content should be regularly updated and, ….and what?

We see a lot of client demands for content management systems that are then often not used for lengthy periods of time. Therefore I thought it could be useful to look at what options there are to a site manager after that big day when the site goes live.

Of course, not everything here will apply to everyone but hopefully some of it will.

News and events

Stories, articles, seminars, fun days, whatever. These are your opportunity to create new content very regularly.

Clients are invariably perfectly happy with their site when it goes live. This is understandable, they have more often than not spent months working on it, tinkering with this, fretting with that and a) they need to spend some time on other aspects of their job (that have been neglected) and b) the site really has never been more up to date!

But what often happens is that a couple of months down the line they realise that new content needs creating but they can’t remember any of the CMS training. The 50 page accompanying manual is too scary so things get left. This happens until we are asked to add the new content because we’re too busy and it’s urgent and often, later on, further CMS training is booked.

News and events provide a steady stream of new content that helps keep the site fresh but also the CMS skills of those looking after the site.

Shortcuts

Updating shortcuts to key content is again a simple way of refreshing a site’s content without putting that much effort in.

Homepage shortcuts tend to link to:

Latest news
Latest events
Repeated main navigation
Products
Special offers
Facilities e.g. login, subscribe etc
Important ‘deep’ content
Popular topics

I guess the point I’m making here is a lot of these shortcuts can simply be rotated giving a feeling of change on the site. For example, changing a link to a main section on a weekly basis is a simple task and one that does not require the writing of any new content.

Utilising usage stats may be a good way of seeing which areas of the site need further promotion. In fact, use everything at your disposal, stats packages, CMS, content suppliers, agency support contract, internal marketing team etc so that you are as informed as possible.

Imagery

Don’t just update copy. Adding new banner imagery can really rejuvenate a tired looking design. Always look to include appropriate imagery with news articles, events etc.

Communicate

Keep your eyes open to what’s happening within your company/organisation. There may be a new project/department/member of staff etc that might be outside your sphere, that would really add value to the website.

Make yourself (and your role) known to everyone. Send out questionnaires or surveys asking people what they want to see on the site or if they have any pertinent content.

Think big

Finally, don’t lose sight of the main purpose of the site while dealing with the smaller things. It may be that the main purpose of your site is to promote your brand so updating the look and feel of the site regularly may be a lot more important than updated content. In fact, continually evolving the design of a site over time is probably far more cost effective (not to mention the effect it has on keeping the site fresh) than ‘big bang’ redesigns every 3 years or so.

Alternatively, sales leads may be the site’s primary function. In which case, keep in touch with sales and experiment with ways to boost leads.

The other really big area that site owners need to look at is site promotion. This warrants a post of its own so I’ll look at that another time.

Review: Jeremy Keith’s Bulletproof AJAX

I have decided not to do “ask the expert” this week, so we can have a review instead. Unfortunately we don’t have the time to do both segments every week so I have to mix and match from time to time.

The book I want to review is “Bulletproof Ajax” by Jeremy Keith. I read it almost 6 months ago, but haven’t had an opportunity to talk about it on the show until now.

The book is designed to be the sequel to Jeremy’s previous book “DOM Scripting: Web Design with JavaScript and the Document Object Model” which was written as an introduction to Javascript for designers. Bulletproof AJAX is therefore written in a similar tone with the focus on making AJAX accessible to designers rather than providing the technical detail you would expect from a developers book.

I have to confess I found the book a little frustrating at first. As somebody that had bought and learnt Javascript through Jeremy’s first book, I felt a little annoyed that the first 2 chapters seemed to be dedicated to laying the foundations we had already covered in the first book. I am guessing the idea was that people could buy this book in isolation without first owning DOM Scripting, but in my opinion the amount of detail provided in Chapter 1 and 2 wouldn’t make that possible. For me those first 2 chapters felt like padding to make a short book feel slightly more substantial.

However, that criticism aside the rest of the book was definitely worth the very reasonable price tag. Jeremy has an excellent writing style that is clear and engaging. He seems to explain complex topics in such a manner that you wonder what all the fuss is about. You come away from the book thinking this “AJAX stuff” is easy and wondering what all of the fuss is about. Admittedly he only covers the basics, but it is enough to get you producing the kind of AJAX applications most designers would like to build.

But, Jeremy doesn’t shy away from the more complex underlying issues surrounding AJAX. In particular he talks about accessibility and ensuring your applications work with Javascript disabled. He does this through a technique called HIJAX. I will not endeavor to explain to you the details of it here, except to say it relies on the server doing most of the heavy lifting.

From applying the principles taught in this book I have to say the HIJAX approach works very well. All of the complex stuff is handled by the developers on the server side and I get to focus on how the information is returned to the user. AJAX is a funny area that sits between client side and server side and leaves designers and developers wondering who is responsible for what. Using the HIJAX approach taught in this book, the division is much clearer.

So would I recommend this book? As with DOM Scripting it depends on who you are. If you are a designer who has read Jeremy’s first book and would like to start producing AJAX applications then absolutely. However, if you haven’t read his first book then I suggest you do that first, unless you are already confident in producing unobtrusive javascript.

If you are a developer on the other hand then my recommendation is to steer clear. This book is not meant for you and you will find it frustratingly lightweight.

Show 82: Microsoft drones

Posted in Classic shows on June 12, 2007 by Paul Boag

This week on Boagworld: Paul talks about managing enquiries, Marcus asks whether you should add links to your website on client sites and Rob Borley talks about ASP .net.

Podcast: Download (25.9MB)

News and events

Staying Creative

I came across a great article this week by Keith Robinson about how to keep being consistently creative. Constantly being creative can be a challenge sometimes, especially when a chunk of your time is spent on less creative activities like coding or consultancy. This article provides some incredibly practical advice about how to keep those creative juices flowing.

The one part that particularly resonated with me was the need for time to play. I am very fortunate at Headscape that Chris and Marcus let me have time to experiment and try new stuff. The result is that I am much more creative than when I used to do production work all the time.

However, this article also offers advice for those of you who don’t have the same luxury. It talks about how to force yourself to engage on even the most dull project as well as the need to pursue your own projects and interact with other creative people.

WCAG Samurai

Over a year ago now Joe Clark published an article on A List Apart entitled “to hell with WCAG 2.0“. Following this slamming attack he went on to create the WCAG Samurai who would develop an alternative to WCAG 2 based on WCAG 1. A year later and we have a working draft of WCAG 2 as well as the recently released WCAG Samurai guidelines.

I have to say the WCAG Samurai Errata is a lot easier to understand than WCAG 2.0 but WCAG 2.0 has come a long way since Joe Clark’s article. Personally, the arrival of the WCAG Samurai guidelines have generated mixed feels in me.

I not an accessibility expert and so am naturally drawn to the Samurai guidelines. They are easy to understand and don’t use confusing or vague language. However, at the same time I have a feeling that yet another set of guidelines is only going to confuse matters.

I guess my hope is that all of the different interpretations on accessibility will make clients realize that accessibility is about more than confirming to a series of checkpoints and encourage them to start thinking in depth about their accessibility policy.

Movable Type 4 (Beta)

Yes I use Movable Type. I know the rest of the world uses WordPress but movable type works for me. I run the boagworld website on movable type and have no intention of changing so don’t bother writing in trying to convince me.

That said, I wanted to point out the recent release of a beta for Movable Type 4. I have to say I haven’t installed it yet but it looks good. Its still in beta and apparently buggy in places but some of the features look impressive.

They have revamped the interface which in my opinion was better than WordPress anyway. They have improved the content management capabilities, finally added a WYSIWYG editor and added support for Open ID.

If you are not already a Word Press drone then check it out.

Mobile web developers guide

This week the dev.mobi website has released a comprehensive guide for mobile web developers.

If you have listened to this podcast for any length of time you will know that I am constantly banging on about the mobile web. Developing websites that work on mobile devices is going to become ever bigger business and although it is a challenging area, I think it will be a huge niche for those willing to embrace it.

Of course, at the moment it is a relatively immature market and finding good information can be tricky. However, this guide looks very good. I can’t claim to have read it all yet but from what I have seen this is a must read if you are looking to explore the area of the mobile web further.

Agony uncle: Promotional links

I was ferreting around in the forum for something to chat about and found this question from Remy:

I was wondering what the opinion was on adding a “Site built by Such and Co.” at the footer of a client web site.

  

I remember thinking it was normal practice in the late 90s and early 00s, but the more I look around today the less and less I see other web design/developer firms doing it.

  

I do think it’s a cleaner design if you don’t add a link off to a random (to the user) web site, but I remember hearing on one of the podcasts on boagworld that this is how this had contributed to Headscape’s (page)ranking on Google – i.e. by having well ranked web sites linking back to Headscape.

  

Just want to see what other people thought before I go and slap a nasty ‘who dunit’ at the bottom of my client’s web site.

This is a fairly old post and there’s a lot of interesting and useful stuff on there. But I thought that chatting things through, and letting people know what Headscape does, could be useful.

It generates business

It really does. Lots of it. I can honestly say that I think our credit (which was, interestingly, on a separate credits page) on the old National Trust site played a major part in whether or not Headscape would have survived its first couple of years.

I try to make sure that I always ask new enquirers how they discovered Headscape. Off the top of my head, I would say that around 1 in 20 say they followed a link from one of the sites we have built. We are currently talking to a prospect that followed the link on one of the university sites we developed.

Don’t expect a link

Whether a link appears is up to the client. Ask them if they mind. If they do, ask if you could have a link on a credits page or possibly just on a single page (e.g. ‘About this site’ if they have one or the contact page).

If they still mind, leave it.

We formalise the arrangement in our terms and conditions, as follows:

The Contractor shall have the right to incorporate, in a readily viewable location, a credit and hypertext link in the Deliverables.

Use useful wording

Useful wording to a search engine that is. For example, ‘Designed by Headscape’ doesn’t really help page ranking at all, whereas ‘Web design by Headscape’ does as it includes the search term ‘web design’.

Beware CMS based sites!

There is always the possibility that doing this could backfire. If a client has control over aspects of a site’s presentation then there is always the possibility that they could make a nasty mess of your excellent work. You have to ask yourself whether a link, in this case, is valuable.

Client corner: Handling enquiries

The idea of the client corner section is that we tackle questions clients have. However, this week I answer a problem I am facing myself; how to handle enquiries better. We get enquiries from the Headscape website and I just don’t think we handle them very well. I always have the feeling some are getting lost and when I go away on holiday they just don’t get answered. After some thought on the subject I think I have come up with some enquiry handling techniques that might help.

Ask the expert: Rob Borley on ASP .net

I often get people asking to know more about the way we work as Headscape. What technologies do we use, what approaches do we take, how do we make business decisions? To be honest I often avoid this questions because I don’t want this podcast to feel too much like a Headscape sales pitch. However, several times I have been asked by people why Headscape works mainly with ASP .net instead of PHP or Ruby on Rails so I thought we might take a look at that decision.

Knowing little about server side coding myself I thought it was best to get Rob Borley (our technical lead) onto the show to talk about the decision we made in going down the .net route.

Its actually a really interesting segment that gives a real insight into how we run our business and how we go about making decisions in regards to technology.

Website feedback mechanisms

Posted in Marketing on June 11, 2007 by Paul Boag

For many businesses a website is a lead generation tool. However, although a lot of thought is put into the website itself, very little is put into the gathering of the leads that result from the website.

As normal, when I returned from holiday I found myself faced with a mountain of email. Among the pile I have found several enquiries from the Headscape website which have remained unanswered for the week that I was away. Obviously, this is not good and it has started me thinking about how we as website owners handle enquiries and feedback that come from our websites.

As far as I am aware there isn’t much written on the subject of enquiry processing, which is strange considering that correspondence between website owners and site users is fundamental to the success of many sites. As nobody else seems to be talking about this much I thought I would jot down my thoughts on the subject.

Mechanisms for feedback gathering

A good place to start is by examining the methods you allow users to communicate through. It is easy to underestimate just how many options are available and each has its own pros and cons. Think carefully about your site and the people that use it. Are you really providing the right mechanisms for your users?

Email

Email is probably the most common form of communication from a website to its owner. Its easy to add an email address on your website and a lot of users prefer to email directly rather than use a form, because they can then keep a copy of the correspondence.

However, email is not without its problems. Not every user has an email address or access to their email client at a particular time. Also publishing your email address on a website opens yourself up to spam. There are ways to mask your address from spammers, but this often creates accessibility problems.

Forms

The next most common option is to allow communication through forms. A contact us form has an advantage over email because it doesn’t require the user to have an email client. However it can still suffer from spam. One advantage of a form is that it allows you to funnel emails in different directions based on the type of user enquiry. For example if a user specifies the message as a support query it can be sent to a different person than a sales enquiry.

Forms are probably the most versatile and powerful communication technique available and certainly work well on larger sites. However they are not always the right solution 100% of the time.

Forums

Although forums are often perceived as “user to user environments” rather than “user to website owner”, that doesn’t have to be true. Forums are an excellent way of communicating directly with your users. They are particularly good on a site where the enquiries are not confidential in nature and where you are getting the same enquiry again and again. A typical example of this is a support forum. By answering a support question publicly you avoid having to answer the same question multiple times and empower users to find their answers quicker without having to wait for your response.

Obviously, this approach wouldn’t be appropriate for sales enquiries and it still can suffer from spam however in certain circumstances forums can be very powerful.

Comments

Comments are a growing feedback mechanism, made popular by the growth of blogging. In many ways they provide similar benefits to a forum however they are slightly more limiting. On a forum a user can start a new thread dedicated to any subject they choose. When posting a comment it is normally attached to an existing web page on a specific topic. Although this is restrictive it can be appropriate if you are looking for feedback on a specific issue and want to avoid too much secondary discussion.

Ratings and reviews

Ratings and reviews can work particularly well when you are looking for feedback on a product line or article. Although ratings provide only limited feedback (a score) this also means that it is very easy for a user to participate. The ease of contribution makes it more likely a user will feedback than otherwise would have been the case. This approach works well when a website owner wants feedback on a specific web page. Having questions like “did this page answer your question. Yes or No?” is much more likely to get a response than an open comments box.

Live chat

More and more sites are introducing “live chat” facilities. To be honest I have mixed feelings about live chat. On the right site I am convinced it can be a powerful tool, however it can also create usability and accessibility problems. The best use of live chat I have seen is for answering support queries. They allow users to get instant answers without having to pay international phone call rates to contact foreign websites. They also allow website owner to handle a greater number of simultaneous enquiries than would be possible on a phone call. However live chat can be intrusive when the website owner initiates the conversation and on smaller sites the demands of having somebody available to answer queries can be prohibitive.

Of course, unlike every other method mentioned so far, live chat doesn’t seem to attract spam and so in that regards it is appealing.

Instant messaging

A cheaper and easier to implement alternative to live chat is simply to publish an instant messaging address on your site. Of course this does require your visitors to have an instant messaging client installed but that is less of an issue these days. Although instant messaging is a nice extra to have, I don’t think it will ever be more than an alternative for people who particularly like to communicate that way.

Offline mechanisms

It is easy to forget offline mechanisms of communication such as telephone and post. In fact it is surprising just how many organisations fail to include their telephone number and postal address on their sites.

Different mediums are good for different things and although a website can be an amazing tool there are some times when you just want to pick up the phone and talk to somebody. If you fail to put traditional contact information on your site then you do it at your own peril.

Dealing with feedback

Although the different communication methods are interesting, I guess the real question is how do you deal with enquiries when they come in (from whatever source). It is in this area that my own site currently fails and that is what got me thinking about how we approach the problem with our clients. This is the advice we normally give:

Feedback manager

One of the biggest problems I encounter when it comes to handling enquiries is that nobody sees it as there responsibility. Probably the best thing that can be done to improve how feedback is handled, is to ensure that there is at least one person in the organisation that has a clearly defined responsibility to respond to these correspondence.

Depending on the size of the website and the structure of your organisation, this may need to be multiple individuals, but the key is to ensure that these individuals are in no doubt about what is required from them.

Collection mechanisms

As I have learnt from personal experience over the last week the way that feedback is collected and processed is crucial. When somebody completes an online form where does it go? What happens if the person collecting those emails is away? How do you make sure that email is not lost in transit? How do you ensure the feedback has been responded to?

I remember working on a classic example of a bad collection mechanism a few years back. We were working for a travel company would created personalized quotes based on a form completed via their website. The problem was that enquiry form was sent as an email to a public folder in outlook. Sales staff would check that folder periodically and respond to any outstanding emails.

The whole process was incredibly painful. The folder wasn’t checked regularly enough and sales people would cherry pick the best leads leaving many emails unanswered in the hope that some other “sap” would deal with them. Emails would be responded to multiple times in some cases while others were simply lost in the scramble.

Eventually we built them a backend system that allowed administrators to assign enquiries and track their progress through the system, as well as provide reporting on response times and conversion.

Having a clearly defined and efficient mechanism for dealing with feedback from your site ensures that nothing slips through the cracks.

Speed of response

Ensuring that you respond quickly to enquiries is one of the best ways of differentiating yourself from your competition. One of the most common ways of achieving this is with an automated response as soon as a form is completed or an email sent. Although these kind of responses do provide some value as they let the user know the enquiry has been received, they do nothing to improve the users perception of your service. Automated response are impersonal and are the email equivalent of an automated telephone system saying that “your call is important to us”.

In my opinion nothing is better than a quick personal email thanking somebody for their enquiry and promising a more detailed response as soon as possible. Of course this isn’t always possible if you are dealing with a large number of enquiries, but for most businesses this is more than achievable.

Tracking feedback history

There is nothing more annoying than having to repeat yourself and with electronic communication at least, there should be no need to do so. Make sure that whatever system you use to track feedback also has the ability to archive and retrieve previous correspondence so that you don’t need to ask the user to cover old ground.

Personally I am a fan of customer management systems that allow for the tracks of all correspondence with a client whatever method is used. There are loads of greats systems around with something appropriate for your business, whatever its size.

Choosing a response mechanism

Finally I wanted to mention the mechanism by which we choose to respond to an enquiry. I recently listens to an interview with the authors of “Send: The How, Why, When – and When Not – of Email” who talked about the importance of knowing which medium to use in communications. The temptation is to respond in the medium with which you were originally contacted. For example, if somebody sends you an email you should respond with email. However, depending on the nature of the enquiry and the dialogue you need with the enquirer, it might be better to pick up the phone, instant message them or even use good old snail mail.

As with so much in life, always pick the right tool for the job.

Show 81: Money Matters

Posted in Classic shows on May 29, 2007 by Paul Boag

This week on Boagworld: Paul gives advice to those who work with content management systems. Marcus finally talks about charge out rates and we talk to Dan Mall and Mark Huot about swfIR.

News and events

37signals in Time Magazine

I notice that 37signals have made it to Time Magazine. This is exciting stuff because it shows the growing awareness in mainstream media of the explosion of web 2.0 businesses. However, the real reason I mention this article is because of what it tells us about how 37signals work. You get to learn about their focus on simplicity, the fact that innovation can happen outside of Silicon valley and their approach to a distributed company.

The one part of the article I personally found particularly interesting is how 37signals’ current suite of products was born out of a need they had to communicate across a distributed company. The idea of building a product that meet a personal need is a good one. It is particularly interesting to me as Headscape has started development of a product which does exactly that. I don’t want to say much more at the moment (as it might never happen), but this article contained a lot of valuable lessons for us.

AJAX tools

I seem to find myself doing more and more ajax and javascript these days. One of the more tricky areas is keeping the user informed about what is going on. I am encountering two specific problems:

How to draw the users attention to content that has changed
How to inform the user that content is still loading

The latter is fairly straightforward as you simply display a loading graphic. However, I am a lazy sod and can’t be bothered to hand craft a beautiful animated gif. Fortunately this week I came across AJAXload which generates those pretty web 2.0. loading graphics for you. Very nice.

Informing users of changing content is a bit more tricky. I have been aware of the fade to yellow technique for a while but that requires a white background, which my designs don’t ways have. What I didn’t know until I finished Jeremy Keith’s “Bulletproof Ajax” is that there is also a fade to anything technique. This is basically the same as the fade to yellow approach but the background colour doesn’t matter. Simply download the code and away you go :)

Waves of creativity

I stumbled across an article this week talking about the relationship between brain waves and creativity. This explained a lot about my own personal creativity! The gist of the article is that your brain needs to be relaxed in order to be at its most creative. This makes sense for me personally as inevitably I am at my most creative when I am lying in my bed at night.

The sad truth is that we spend most of our lives in a more agitated state and so creativity is hard to achieve. This dove tales nicely with my experience of implementing “Getting Things Done: The Art of Stress-free Productivity” (David Allen). Since reading that book I have felt much more relaxed and in control and hence I have been considerably more creative.

Eric Meyer explain why forms controls can’t be styled

A big thanks to Eric Meyer who has been kind enough to look into the incredibly confusing area of form controls and then explained it to the rest of us. Many web designers express a real frustration with the fact that you cannot consistently style form elements. Although personally I think it is generally unwise from a usability perspective to start mucking around with form elements, I have still always wondered why browser developers have chosen to give us so little control. In a recent post Eric goes into extensive detail about why form controls are “weird” but the upshot is that you are simply better off not styling them.

Agony uncle: Web Design rates

Another question from Bob in Iceland:

“Hi guys, I am becoming increasingly bewildered with what I should charge for web design work. I also do a fair amount of copywriting and content research. What should I charge? Should my rates change for different work? I am a one man band.”

Firstly, I should say that there is no real fixed figure for web design related work. It depends very much on a number of factors, such as:

Experience e.g. proven capability to deliver
Ability to deliver specialist services e.g. usability testing
Size
Diversity of staff
Location
Portfolio

However, to use a real example as a baseline, a survey carried out by eConsultancy a couple of years ago showed that English web design agencies employing 10 to 20 people with a turnover of approximately £1M, charged between £500 and £800 per day for most services. I expect this gone up a little since then.

Setting your rates is partly science, partly weighing up what the market will bear for what you offer.

You do need to work out to the best of your ability what your daily break even cost is but in, in theory, your annual figures should be able to tell you that. The biggest drain on any web agency, unless you have marble and gold clad offices in central London, will be your staff. Good creative/technical people don’t come cheap.

Be realistic from a number of different angles:

Don’t try and charge a grand a day if you’re straight out of uni with no experience under your belt
Don’t expect to have 100% effort allocation – 70% is excellent
Price projects as honestly as you can but remember that clients are human beings and really don’t like paying for project manager anywhere near as much as they do technical development

So should you charge different rates for different services. Again… it depends. Some jobs require a lower level of skill as part of the project. For example, recruitment (though an absolute pain) for any type of testing requires basic organisational skills and not,say, years of experience in project management. If you can outsource that work at a lower rate, then charge a lower rate, but if your PM ends up doing it then you have to charge at your PM rate.

For years we charged a flat rate across the board because it was simpler to manage and we felt clients liked it. Over the past couple of years we have done a lot more consultative work that has placed pressure on the timetables of the directors. This has led us to having the following rate categories:

Creative director – Paul
Consultancy – IA, business analysis, testing etc
Standard – design, technical, pm

We charge a fixed uplift (per client dependent on geographic location) for on site work – kick off meetings, testing etc.

Client corner: Advice for CMS users

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 so I thought there might be some value in sharing it on the show. For complete notes on everything I cover check out the CMS user blog post.

Ask the expert: Dan Mall and Mark Huot on SWF image replacement

I was fortunate enough to get some time to chat with Dan Mall and Mark Huot the creators of SWF image replacement. We talked about:

What exactly swfIR is and how it works
What kind of scenarios they imagine it being used in
What inspired them to create swfIR in the first place
A little bit about the process of applying it to a site
What the future holds for swfIR
What it is like working at Happy Cog

No show next week

Just a quick note to say there will be no show next week as I am off on holiday to sunny cornwall. However, please continue to send in your suggestions for the show and don’t forget you can always check out the forums if you want your boagworld fix :)

Advice for CMS users

Posted in Accessibility, Site content on May 23, 2007 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 78: POSH?

Posted in Classic shows on May 8, 2007 by Paul Boag

This week on Boagworld: Paul redesigns the way clients and designers interact, Marcus asks if you really need a content management system, and Garrett Dimon sharings his experiences of information architecture.

News and events

Breadcrumbs are good, its official

When Jakob Nielsen speaks the world listens. This week he has come out with the shocking revelation that Breadcrumbs are good. Okay, so this doesn’t come as a surprise to most of us, but its still an interesting read. Apparently more and more people have come to rely on this secondary navigation tool and notice if it isn’t there. Jakob believes that breadcrumbs never cause problems in user testing (although sometimes they are not seen) and provide a wealth of benefits to visitors that do use them. Finally, he goes on to talk about the fact that breadcrumbs should always show a sites hierarchy rather than the path a user has taken through a site.

Techcrunch drool over Silverlight

So the guys over at Techcrunch have spent the last week at MIX07 and seem to have been brainwashed by the nice fellows at Microsoft. They are positively drooling over Silverlight, Microsoft’s challenge to Flash. In one post they say:

“It makes Flash/Flex look like an absolute toy… without exaggeration, Ajax looks like a bicycle next to a Ferrari when compared to Silverlight”

Personally, I haven’t had a chance to look at Silverlight yet so cannot express much of an opinion. However, I find it hard to believe that Silverlight will topple Flashes dominance before Adobe responds with something equally impressive.

Although competition can never be a bad thing, it strikes me that this is yet another plugin for people to download and another platform we have to worry about developing for.

RSS in plain english

RSS can be a difficult concept to get your head around the first time you encounter it. Its still a good idea to explain what RSS is on your site for those that don’t know. Obviously you can create a page yourself explaining or sometimes I link to the BBC website which provides an excellent description. Of course if you want something a little more exciting you might want to link to this superb video that explains exactly what RSS is and how it works. Its just a shame they don’t offer the option to embed it directly into your own site.

How POSH are you?

I have to say I was very cynical about this news story when I first encountered it but after hearing Jeremy Keith’s argument on the last .net podcast I have to say I am coming around. POSH is yet another another “catchy” web acronym. It stands for “plain old semantic HTML”. So why do we need yet another acronym? Well the argument goes that nobody is getting excited about semantic HTML these days. Its just not cool. Instead we are obsessed with Microformats or AJAX, things that are perceived as being “in” and “trendy”. The POSH acronym is designed to get us talking about semantic HTML again. The idea is that we start blogging about how we mark stuff up and sharing ideas with one another. The example Jeremy gave on the show was; what is the best way to mark up a conservation in HTML? He suggested that it was simply an ordered list of blockquotes. Do you put that much thought into your code? I can’t say I always do.

So with that in mind I have opened a new section on the Boagworld forum where you can post your examples of good code. You can ask questions like; what is the best way to markup… or simply post how you choose to markup different elements. Whatever the case lets start sharing our good practice in HTML.

Client corner: Do you really need a CMS

Apart from a few ‘design only’ projects we get involved in, every tender that comes through the door includes the words “control over content is a must have”… or words to that effect.

But thinking about all the ‘full’ CMS based projects we have delivered, is that really what the client wanted/needed?

So what types of CMS solutions are there? Here’s a quick summary:

Limited CMS (non-structural) e.g.

News
Events
Popular a few years ago when ‘full’ CMS was a much more expensive.
Pros – simple to understand (and build)
Cons – clients tend to request more and more areas of the site become CMS controlled and you can end up with a bit of a mess and the cost of replacing can be prohibitive.

Blogging tools

Article based
With commenting

Full CMS

Control over structure: move pages, edit pages, create news pages (and sections) and the front end navigation updates automatically
Usually modular: news, events, downloads, forms (dynamic), lists, newsletter, etc
User management: Roles, permissions, preview, workflow
Licensed or bespoke?

You need to ask yourself a couple of fundamental questions:

Even if I have these tools, will I have time to use them? All websites need to have an owner or editor. Someone who’s job it is to manage all content sources and keep the site up to date. We have been asked many times to carry out work content population work on a CMS that we built…

How much of my content needs updating more than monthly and how often do I need to add new pages to my site? It seems that having the ability to extend a site is often seen as a ‘must have’ when in reality new pages are only added, say, quarterly at most. Added to that, the only content that changes regularly is, for example, news, events and case studies. Employing an agency to add new pages and manage site structure/navigation is not a big job (though some seem to charge extortionate rates). Added to that, clients who do not use a CMS very often tend to forget how to use it and then go back to the agency simply because of that.

To summarise, think very carefully about your requirements in this area and talk to prospective agencies about what they recommend. You could end up making a costly mistake.

Ask the expert: Garrett Dimon on Information Architecture

I am a huge fan of Garrett Dimon’s work and so I am really excited to have him on the show this week. Garrett’s job title is “information architect” and so unsuprisingly he joins us to share some of his experiences on working with information architecture. His advice includes:

Embrace constraints
Know when to challenge the constraints
Explore lots of ideas
Work in conjunction with clients
Don’t use your computer
Throw away more than you keep
Don’t worry about the details until later on
Simplify and cut back on details
Communicating is more important than documentation
Make your IA deliverables visual as they are easier to understand

Agony uncle: The wish list brief

This week I am back on Agony Uncle duty with an email from Dan in Swansea:

I am increasingly frustrated by the briefs I am getting through from potential clients. They read more like wishlists than real briefs. They lack focus and often ask for functionality they just don’t need. How do you respond to briefs like that?

Its a great question and set me thinking a lot about the web design process. In fact it was the primary motivation for a recent blog post on the subject which we talk about on the show. I think the key to this question is to not be afraid to go back to the client and challenge them. Perhaps propose a rough costing based on some of the items in their list but suggest that the first step (if you are taken on) would be to define and price a more accurate brief. I think most clients will respect you for suggesting an alternative and more effective strategy. In many ways its like the speculative design argument, it may feel scary to challenge the client before anything is signed but in my experience clients respond positively to a carefully thought through argument.

Review: Spoken Text

A while back I asked people to submit their own reviews. I didn’t specify that people couldn’t review their own product and so I recently received a review from Mark promoting Spoken Text. Now, I don’t want to open the flood gates to shameless self promotion but I like spoken text so much that I want to include it on the show. It is basically a free, text to speech system that allows you to convert multiple file types into audio files.

Mark shares four great reasons why he thinks we might be interested in it as web designers:

Use spoken text to provide alternative audio versions of the content on your website
Allow users to record and save any content from your website they want
Create a podcast of your websites content
Create your own podcast of other people’s content that you want to listen to while on the go

There are two things that excite me most about this service (beyond the fact that it is free). First is the accessibility benefits it could bring for visually impaired users and secondly the ability to make instant podcasts of new stories from your site without the complication of finding somebody to present it.

This isn’t a service that is useful to everyone but I think in certain circumstances this could be a killer app.

Show 76: Clients and Agency

Posted in Classic shows on April 24, 2007 by Paul Boag

Marcus talks about setting up a web design company while Paul talks about the role of the client and Derek Featherstone talks about making your web application accessible.

Podcast: Download (27.5MB)

News and events

Eric Meyer’s reset style

I have talked before about the idea of having a CSS file that removes all of the browsers styling in order to allow you to work from a clean slate across multiple browsers. Well, over this last week Eric Meyer has picked up on the idea and has been collaboratively developing a reset CSS file via his blog. If you do a lot of CSS work, this is definitely worth getting your hands on.

Microsoft Silverlight

Microsoft are gunning after Adobe on all fronts at the moment including a flash competitor called Silverlight. Like flash, Silverlight offers animation, interactivity and cross browser compatibility (although I don’t seem to be able to get it working on a mac). However, their real focus is on video where they trump Flash by offering high definition quality. It also appears to offer more “standards friendly” methods of inserting and manipulating movies, however as I said I have been unable to test this so far.

The biggest hurdle Microsoft faces will be take up. At the moment Flash dominates partly because in many cases it is installed almost invisibly in the background. In contrast, at the moment, Silverlight is a separate installation that takes place outside of the browser. No doubt this will change in the future.

35 Designers, 5 questions

Smashing magazine are certainly on a role at the moment, publishing a range of superb web design articles. One of the most recent is a post where they asked 35 designers (of which I was one) 5 questions about their approach to web design. The resulting article is a fascinating read and gives you a real insight into how other web designers work. The questions included:

1 aspect of design you give the highest priority to.
1 most useful CSS-technique you use very often.
1 font you use in your projects very often.
1 design-related book you highly recommend to read.
1 design magazine you read on a daily/weekly basis (online or offline).

CSS tools

Another Smashing magazine post. This one lists some very useful CSS tools including form builders, list makers, CSS layout templates and much more. If you are starting out in standards based coding some of the tools here will produce you some brilliant examples of clean code.

Client corner: The role of the client

Myself and Marcus swap roles this week and I take a look at our client corner issue; the role of the client. There is a lot written about the role of web designers but very little written about what part website owners play in the evolution of their sites. It is an area I have been thinking a lot about recently and I wanted to share a few thoughts with you. It is a subject that I have recently blogged on so if you want more information on what I consider the role of the client to be then I suggest you check that out.

Ask the expert: Derek Featherstone on ARIA

We are lucky enough to have accessibility expert Derek Featherstone on this week’s show talking about making web applications accessible. He talks about how HTML is not designed to support web applications and that the methods used to make it work are often little more than hacks. He then introduces a new standard from the W3C called ARIA and explains how this will assist in making web applications more accessible. If you want to know more about what ARIA is and how it can make your applications more accessible then Derek recommends a recent article on the List Apart website.

Agony Uncle: Setting up a web design company

Marcus takes on the lofty role of Agony Uncle this week responding to a question on the forum about setting up a web design company. The question, from Stanton, starts with him setting the scene of someone wanting to break out on their own but worrying about how they will cope without that guaranteed income.

Marcus gets all nostalgic about the early days of Headscape and then provides advice about starting up. He covers all the boring bits about incorporation, insurance, funding and documentation. He then talks about getting business in and not forgetting that someone has to be the salesman!

The role of the website owner

Posted in Web strategy on April 23, 2007 by Paul Boag

There is a lot written about the role of web designers but very little written about what part website owners play in the evolution of their sites. It is an area I have been thinking a lot about recently and I wanted to share a few thoughts with you.

Many web designers view the client as almost an inconvenience in the web development process but in reality they are absolutely fundamental to a websites success. However unlike the role of designer or developer, the part web site owners play is much harder to define.

In fact I would argue that the role of web site owner is one of the most multi-facitated jobs within web development and we as designers and developers need to recognise and encourage that role.

Of course to a large extent it is our responsibility as web agencies to lift some of the responsibility from the shoulders of website owners. However I would still suggest that there are a number of areas where the client has to take the lead.

Visionary

A good web design agency should be able to help their clients shape a vision for their organisations website, however it is down to the website owner to “own” that vision and develop it over the long term. The person responsible for a website needs to have a clear picture of what role the site plays within their business and how that role could be expanded over time.

In my mind vision falls into two categories. There is the core vision for the site. In other words, what is the unshakable objective of the site, which doesn’t really change over time. However there is also the site roadmap. This is a vision of how the site is going to develop over the coming months and even in some cases, years. What kind of new functionality maybe added and how is the user base expected to change. Without the website owner having a good handle on these two areas, a site can easily wander off track and loose its sense of purpose and focus.

Advocate

As well as having a clear vision for a site the website owner also needs to be the sites advocate. By that I mean he needs to defend the site against others within the organisation that would seek to undermine its focus. This is especially a problem within larger organisations where people think more on a departmental rather than corporate level. This typically leads to individual departments pushing their agendas on the website and the site becoming the victim of internal politics. It is not unusual to find departments fighting over home page real estate or top level sections in the information architecture.

It is the role of the website owner to make sure the integrity of his or her site is defended and that it does not sink under the weight of internal dispute.

Evangelist

But the job of the website owner is not just defensive. A good website owner should be offensive too, actively promoting the website within his or her organisation. They should enthuse about the potential of the web and actively engage with departments and people within the company, looking for ways that the website can better serve their needs. A website owner needs to be passionate about their site and encouraging others to share that passion.

Content guardian

Probably the most time consuming and demanding of the responsibilities held by the website owner is to oversee the content of the site. Not only is it his or her responsibility to dictate what content appears on the site, but that the content added communicates a consistent message and tone. The website owner needs to encourage and nurture content contributors ensuring that they keep their content up to date and relevant. However the largest workload is in the initial development of a site, when it is down to the client to plan what needs to be communicated on the site and draw together that content from various contributors across the organisation. Time and again I see clients significantly underestimate the amount of work involved here and it is vital that the agency and client agree on content delivery milestones upfront in order to avoid slippage.

Project coordinator

Developing a website involves a lot of people. Designers, developers, usability experts, content contributors, hosting companies… the list goes on. Although in many cases a website owner turns to a web design agency to handle the management of many of these roles it is still inevitable that some management will be required by the client. Website owners often have to get internal sign off on designs, content, budget and many other aspects of the project. As I have already said they also have to manage content contributors and in some cases may have to manage multiple suppliers (design agency, development house, hosting company). In short, even if they outsource the project to an agency it is still going to require some management by the client.

Referee!

The unfortunate truth is that the final role a website owner often has to fulfill is unofficial referee. Web development projects are a series of compromises. Accessibility needs to be traded off against design, design against marketing, marketing against usability and so on. The different contributors to a website have very different perspectives on what is important, so it is down to the website owner to break stalemates and find a middle ground. Ultimately they have to be the decision maker.

The web agencies role

So there you have it, the role of the client. The trouble is that as web designers we often fail to communicate to the client our expectations of what it is we believe they should do. Instead we assume the client will just fulfill their obligations. Because we have worked on so many web design projects we assume the division of responsibilities is obvious. The reality is that they are not and it is down to us to educate the client.

Show 73: Drone

Posted in Classic shows on April 3, 2007 by Paul Boag

Marcus makes sweet love to our clients. I fiddle with my captions and our lead developer drones on about setting up a development server.

Podcast: Download (28.3MB)

News and events

This year saw some of the best April fool technology jokes around and so I do my best to convince Marcus that they are real news. Spot the real from the fakes:

Dutch to revert to table based layouts

According to quirksmode.org, the Dutch government has been forced to revise its accessibility guidelines due to an estimated € 20 million it would cost for government sites to make the move from table based design to web standards.

WCAG 2.0 finally here

Accessify has announced that WCAG 2.0 has finally been released. This extremely controversial revision to the WAI gudelines has been pushed through despite strong objections by the web design community.

Amazon to become accessible

Amazon has always been held up as an example of quite how hard the web can be for those using assistive technologies such as screen readers. Nevertheless a press release on the National Federation of the Blind site seems to indicate that Amazon maybe willing to change its ways as they announce a partnership with the NFB to clean up their act.

Google TiSP

Google are finally releasing their much-anticipated free wi-fi network (Google TiSP) that will span much for the USA. Rumours of this network have been circulating for some time, however nobody anticipated the innovative way the network would be laid.

@media 2007: Antarctica

Following the failure of @Media Hong Kong, which was cancelled due to lack of demand, the guys at Vivabit have decided to launch @Media Antarctica. Like Web Directions North, this conference will combine web design talks with outdoor sports in probably the most ambitious project of its kind.

Get Naked Day

Dustin Diaz is once again encouraging all website owners to get naked on the 5th April by exposing your HTML to the world. This superb publicity stunt is a great way of demonstrating the flexibility of web standards. Good on you Dustin!

Making love to your clients

Marcus continues his series on selling web design services by looking at the process of managing your clients:

You may build the best websites in the world but if you do not know how to sell your services then nobody will hire you. Web design, like nearly everything, is a competitive marketplace and simply being a good designer/developer is not enough. You also need a sales and marketing hat.

That said, it does seem that there is more work out there than agencies to do it.

Play to your strengths
Don’t bite off more than you can chew when pitching for work. Do not pitch for contracts that are too big for you and avoid relying too heavily on outsourcing, as many clients are uncomfortable with this. Also, from personal experience, contracting or partnering can end up being very expensive – don’t make everything you do a loss leader! In particular don’t promise something unless you are 100% sure that you can deliver on it. Failure to deliver can seriously undermine your company’s reputation.

In summary, be honest with the client. If you can’t deliver by a particular deadline or you don’t have the skills in-house, tell the client. Try and find a workaround e.g. splitting the work between you and another agency. In the end, you will gain more respect from the client.

Love your clients – old and new
With existing clients, if you pay attention to them and care for them, you will have a very small cost of sale for a significant proportion of your work going forward.
This gets harder and harder the longer you are around and the bigger you get. I haven’t really needed to chase work for a long time now (because we’ve been so busy!) so I try to make sure that when an existing client contacts us to discuss further work we are responsive and helpful. For most clients I would recommend carrying out annual review meetings – both parties are encouraged to think about new features for the site and the meeting is used to discuss the merits of the ideas, likely budgets, timescales etc.

From listening at SXSW… with new clients you should try to befriend them (get drunk with them one Swedish guy said) before working with them. This is great if they want to be friends and I expect quite a lot do. However, we work with a lot of public sector clients who get nervous if we offer to buy them an ice-cream, let alone lunch.
I guess the message was ‘put the effort in, not only will it be appreciated, it will make your life easier going forward’.

Question the client
Don’t be afraid to ask questions about a brief supplied by a client. You may even be in a position to help the client write their brief. Asking questions and making suggestions is a great way to build a relationship with your clients and make you stand out from the crowd. Of course, ultimately it will allow you to put together a better proposal that meets the client’s needs even when they are not fully expressed in the brief.

Also, stand up for yourself! If you think your idea is just what they should be doing instead of the daft stuff in their brief – tell them. Again, this will probably bring a lot of respect your way.

Ask an expert: Rob on setting up a development environment

Rob Borley the lead developer at Headscape talks about how to go about setting up a development environment to allow you to work on dynamic websites. He talks about some of the potential dangers, recommends some great resources to get you started and reviews some different development tools.

Easy styling of images

Here is an interesting problem that keeps cropping up. How do you balance the need for easy update by web editors with the desire to make a site as visually appealing as possible? Take for example the images that website owners inevitably want to add to their site via a content management system. They don’t have the skill to add captions or add styling so how do you make the process simple for them.

A while ago I wrote a post suggesting one solution to the issue. Recently it got dugg and has since proved very popular. In this week’s show I talk through the process and explain some of the benefits.

Review: Oxygen XML editor

In last week’s show I suggested it would be great to receive some reviews from you the boagworld listener. This week I received the first one from Tom and so we have included it on the show.

He reviews Oxygen an XML editor with some quite remarkable features. If you work regularly with XML you will definitely want to check this out.

Show 72: Neverending Beta

Posted in Classic shows on March 27, 2007 by Paul Boag

On this week’s show: web stats meet usability testing, Apollo and why it is important, working with corporate colour palettes and how to sell your web design services.

Podcast: Download (24.1MB)

News and events

This week appears to be the week of never-ending betas however I have managed to squeeze in some pointless fun and an article about accessible content management systems:

Click2Map

There seems to be a growing number of tools out there that make the management of Google Maps easier. One that I have just discovered this week is Click2Map. You can easily and quickly add custom markers by entering an address (even if you are outside of the US). It is still in beta and needs a lot of work (for example you cannot integrate the maps directly into your site) but it is still great for a quick and easy way of linking to locations.

Popuri.us

Another “beta” service I spotted this week is Popuri.us. This site provides SEO reports on your site including rankings on Google, Yahoo, Alexa, Delicious and Technorati. Currently it seems to be suffering from some performance issues; nevertheless it gives a good indication of your online visibility. Of course if you are a Firefox user you may find the SEO add-on more convenient.

Finding an accessible CMS

One of the biggest complaints against content management systems is that they are often not very accessible. Gez Lemon has been kind enough to do an analysis of a whole bunch of them for us and provides a great article on the pros and cons of each from an accessibility point of view. If you are considering implementing a CMS and care about accessibility (which you should do) then check this out.

Arial vs Helvetica

So you think you know your typefaces? Maybe you are even a bit of a typography snob? But, can you tell the difference between Arial and Helvetica? Of course you can, at least that was what I thought until I actually tried.

Selling your web design services

So this week’s client corner is seriously lacking advice for clients (sorry about that). Instead Marcus takes a look at the subject of selling your web design services. Surprisingly for Marcus, he has written fairly comprehensive notes on what we covered so here you go…
You may build the best websites in the world but if you do not know how to sell your services then nobody will hire you. Web design, like nearly everything, is a competitive marketplace and simply being a good designer/developer is not enough. You also need a sales and marketing hat.
That said, it does seem that there is more work out there than agencies to do it.

Cold call?

Don’t buy databases of ‘quality’ contacts in a particular sector. I may be cynical but I reckon the vast majority of these ‘leads’ were tricked into supplying their details. You’re trying to sell solutions to your potential clients’ online problems not pallets of dog food. I my experience, cold calling is a waste of time and effort – the only way you’ll win work is if you’re lucky enough to call someone when they’re about to release a tender.
The only exception to this rule are local businesses where picking up the phone and saying ‘hi, we’re just over the road from you and we’re really good at what we do. If you ever need the services that we provide please do include us in any suppler selection process you intend to go through’. If they’re friendly why not meet up for a beer (see Love Your Clients)…

Focus on a specific market sector

If your only case study is a sewage works site then go after other sewage works sites first. This is common sense: you have a proven ability to produce a website with probably very similar features to the one the other sewage site wants. You have a real, live working example to show them and a client who will (hopefully) say nice things about you.

Tender sites

I get asked about these a lot. They are (I think) better than straight cold calling but not much. Golden rule – don’t do any speculative design work as some may be a scam. I think most of these are simply there because a lot of tenders are required to be competitive but the client already has a preferred agency. I have generated a ‘nose’ for when we are making up numbers so, if you get that feeling, be brave, walk away…
Of course, try to talk (and I mean talk not email) to the client. Be bold, ask questions about how many others are going for the project, what is the budget (we need to know to be able to provide the most appropriate solution), are the deadlines set in stone etc etc etc… If you’re getting negative feelings… guess what… walk away…
If you do decide to go for something off one of these sites, I recommend the following as a response:

boiler plate ‘Why Us’. You should already have this in another proposal. Up to 10 pages of skills, experience, examples of design work and above all USP.
No more than 2 sides of A4 of ‘your solution’ i.e. a summary.
Tasks by task breakdown of price (inc. payment terms with at least a third up front (‘on delivery’ if you’re really worried about the client!)

The trick here is to start at the bottom. Do the task breakdown first (it may put you way over budget if you know it – if so, walk away) which will lead to an obvious solution summary then tack the ‘aren’t we great’ on the front.
The idea is to put as little effort in as possible without making it look that way.
Much better idea to…

Market, market, market!

There are so many ways to market yourself. For example, you can drive round your local neighbourhood shouting through a loud hailer if you like! Headscape’s marketing effort is focussed virtually solely on Boagworld now. The point is, try to find something that you can do that you feel passionate about and will get people either ringing you directly or, just as good, recommending you to others.

Know when to walk away

It is the hardest thing in the world to do, but it is important that you know when to turn down work. There are times when the clients requirements are unrealistic or the job is simply too big. On other occasions, the chance of winning a job does not justify the investment involved in pitching for it. There is a natural tendency to want to run after every piece of work, but sometimes you just have to say no.
I got the impression listening at SXSW that the agencies I most admire (e.g. Happy Cog) simply wait around for projects that they are interested in and the clients should be damn grateful! Or maybe that was the impression that Mr Z wanted to convey.

Ask an expert: Aral on Apollo

Aral Balkan is one of my favourite speakers and this week in the “ask an expert” section he puts his enthusiasm and humour into an insightful introduction of Apollo. Apollo is a new development platform from Adobe that allows web designers to start developing desktop applications.

Working with corporate colours

This week’s agony uncle question is based on something I found in the boagworld forum. Pecko asked whether we should use Photoshop to convert corporate colours for the web or whether we should do it by hand. A lot of the people on the forum argued that you should allow Photoshop to take the strain but in the show I argue that we should do it by hand. My argument was based on something I had read before and yet I couldn’t for the life of me remember where I had read it. I eventually found it was from a brilliant article by Jason Santa Maria on 24 Ways. I hope he will forgive me for not crediting him on the show.

Review: ClickTale

I was recently asked to beta test ClickTale, a new statistics-tracking tool. Not only does it provide you with all of the basic web stats you would expect, it also allows you to watch recordings of how users interact with your site. You can see their cursor move around the screen, watch them scroll and even move between pages. The product is currently in closed beta but it is definitely worth keeping an eye on because it is extremely powerful and acts as a passable alternative when usability testing is just not an option.

Show 69: All alone

Posted in Classic shows on March 6, 2007 by Paul Boag

Abandoned by Marcus, Paul struggles on alone through this week’s show. Bravely he manages to cover; the cure to hiccups, how to hunt down those pesky CSS bugs and what’s new in Photoshop CS3.

Podcast: Download (19.4MB)

News and events

SWF image replacement

This week sees the launch of SWF image replacement (swfIR), not to be confused with sIFR which replaces text. swfIR combines javascript with flash to apply cool effects to imagery on the fly. swfIR can add rounded corners, drop shadows, borders and even make images scale. What is more it degrades nicely on unsupported browsers. Of course nothing is perfect and there are some known issues. However, it is certainly a good option if you have clients uploading lots of images which need styling.

Yahoo! Pipes

Yahoo! has launched something called Pipes which apparently allows you to “rewire the web” (and here was I thinking the web was made up of tubes). Basically Pipes allow you to combine and repurpose multiple RSS feeds and APIs. At its most basic level it is similar to a service like Feed Digest however it is capable of doing a whole lot more. Not the most user friendly interface in the world but definitely worth having a play with.

Ajax inspiration

I came across miniajax.com which is a nice little site that showcases the latest gadgets and gizmos in the world of AJAX and Javascript. For those of you who already code Javascript this is a great place for inspiration, for the rest of you it is “copy and paste heaven”.

Accessibility and the UK law

Struan Robertson has produced two great articles that clearly lay out your legal obligations on accessibility if you run a website in the UK. Ignore at your peril:

Client Corner: Choosing a design

With Marcus away it fell to me to tackle the client’s corner segment this week. Sticking to what I know best, I decided to discuss how to choose the right design for your site when confronted with multiple options. We look at:

How deeply a client should be involved in the design process
The dangers of design by committee
The subjective nature of design
The need to include your target audience in the decision process
The importance of brand identity
The problems with choosing a colour palette
The influence of imagery
Layout, resolution and the fold.

Ask an expert: Gary Marshall on instructional copy

Out of all of the guests to appear on the .net podcast Gary Marshall is one of my favourites. He is not a web designer but a technology journalist which means he brings a completely new perspective to the table. On this week’s show I get him in to discuss his impressions on instructional text; you know, the copy the client doesn’t write. From error messages to tooltip help, it is often down to the web designer to write instructional text and what do we know about writing!

Agony Uncle: Bug Hunting

Diagnosing and fixing problems in CSS can be a bitch. Often we resort to randomly trying different things until something works. However, there is a better way. This week we look at bug testing techniques including:

Know your bugs; sites like Position is Everything will help with that
Validate your code
Apply borders
Create a stripped down test case
Systematically remove chunks of code

Review: Photoshop CS3

This week I finally got around to installing Photoshop CS3 Beta and I have to say I really like it. I put it off for ages because normally these upgrades aren’t worth the effort but this one has made some substantial improvements. Probably the most exciting for me personal are the improvements to the interface, which now has docked palettes rather than those annoying floating ones. However, there are a lot of cool features beyond that, including:

Quick Select
Refine Edges
An improved bridge
Smart filters
Improved cloning

For a more comprehensive review check out the National Association of Photoshop Professionals (no I am not making that organisation up!)

Show 68: Tagtastic

Posted in Classic shows on February 27, 2007 by Paul Boag

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

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.

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.

Show 64: Hosting

Posted in Classic shows on January 22, 2007 by Paul Boag

This week on Boagworld we explain all you need to know about hosting , look at how to interpret other people’s CSS and review an excellent HTML email testing tool. Oh yes… and Marcus drones on about client stuff.

Podcast: Download (22.3MB)

News and events

Heuristic Testing

This week seems to be the week of Heuristic usability testing. Andy Budd kicked us off with a post on how Jakob Nielsen’s classic article on heuristic testing needs updating to take into account the new generation of web applications. Lisa Herrod then followed up with an excellent article on the sitepoint website looking at how heuristic testing can be used by web development teams.

The Future of Web Design

I know that a lot of people cannot afford the time or money to go to web conferences but I thought the Future of Web Design one day conference was worth a mention as it is only £59. It has a great line up of speakers including people from 37Signals, Flickr and Adaptive Path.

Tips for better design review process

You maybe the best designer in the world but if you cannot “sell” your designs to the client then more often than not they will be rejected. Many designers hate the design sign off process and are often frustrated with the final result. Keith Robinson has written a superb article that will help you better manage the successful sign off of your designs.

Seven Accessibility Mistakes

A while back Chris Heilmann wrote two articles on typical accessibility mistakes that people should avoid at all costs. I am sure that they were great articles but I never got around to reading them. Fortunately Roger Johansson has taken the time to summarise them in a nice easy to digest format.

Client corner: Questions for designers

How do you know which is the right web design agency to go with? Proposals are important but what questions do you ask at the presentation? This week Marcus gives website owners the inside track on what to ask prospective web design agencies. Here are some of the main points he covered:

Get a detailed breakdown of rates and pricing.
Understand what happens if things go wrong.
Ask about the contractual arrangements.
Request financial information on the company.
Get detailed information on the work they have done.
Know the team who will be working on your project.
Always ask to speak to existing clients.

Agony Uncle: Understanding other people’s CSS

There is nothing worse than working on a site built by somebody else. This especially true when it comes to the CSS. What styles affect which elements? How do the styles cascade down? What is going to be effected if I make a change to a style? This week in the agony uncle corner we look at some of the tools which can help solve these issues. In particular we take a look at the Firebug Firefox extension and the CSS panel in Dreamweaver.

Ask an expert: Mark Crawley on hosting

One of the things that has been requested for the “ask an expert” section is that we try and get on some new names rather than the normal “web celebs”. With that in mind this week’s guy is an old work colleague of mine; Mark Crawley. He talks about an area we should have covered a long time ago… hosting.

Review: Testing HTML Email

Although many condemn HTML emails as truly evil, the reality is that many of us are occasionally forced by clients into producing them. Setting aside the appalling support for standards, the next biggest headache with working on HTML emails is testing. Fortunately Site Vista, a UK based company has solved the problem by producing a testing suite very similar to Browser cam but for email.

Podcast 61: Christmas Special

Posted in Classic shows on December 11, 2006 by Paul Boag

In our Christmas Podcast Special; Skype murders Marcus rendition of Silent Night, Paul shares his list to Santa and they both look at the successes and failures of the web over the last year.

Podcast: Download (24.1MB)

I know what you’re thinking; “not the most riveting subject”. However, don’t let that put you off. Although return on investment might not float your boat, it is still extremely important and you should take the time to listen to this show.

So another year is done and boagworld finishes for its Christmas break. We will be back in January but until then you can enjoy this extra special episode of the show.

It’s been a real pleasure working on the show over the last year. We really want to thank you all for listening. We never anticipated that the show would prove such a success and hopefully we can continue to keep it fresh and exciting in the New Year with our new format.

This year’s Christmas special is slightly more structured than last year’s so I figured a few notes on what we covered maybe appropriate. Enjoy!

Special offers to boagworld listeners

A couple of companies that listen to boagworld wanted to give something back to the boagworld community. Although I haven’t purchased from either site yet myself, I thought it was nice they were enthusiastic to share a small token with you all.

Houlton Wines will give you a 10% discount if you quote the coupon code “boagworld” when ordering. Equally Seams will offer 25% off any tshirt if you quote to code “boagworld001” when you checkout with paypal.

News

I tried to give the news a Christmas theme this week by ensuring all the stories had a Christmas slant. Guess which one fails to meet the criteria!

Biggest Tech Mistakes of 2006

Thank you to everybody who nominated a tech mistake of 2006. Below is the shortlist. You will have to listen to the show to hear who Marcus announced as the winner.

Best web applications of 2006

Also in the show we look at the best web sites and applications of the year. Nominations include:

Dear Santa

I thought it might be fun to share some of the gadgets I will be asking Christmas for this year. Of course if you want to buy me any of them I am sure Santa won’t mind!

Finally, we do a quick review of the services offered the Shaw Trust. If you haven’t come across these guys before then definitely check them out. They offer some very interesting web accessibility services which is ideal if you want to test your site with real disabled users.

Thanks for listening, and we will speak to you all in the New Year. Happy Christmas!

Podcast 57: Afraid of Standards?

Posted in Classic shows on November 6, 2006 by Paul Boag

This week Paul and Marcus are joined by Ben Henick author of an excellent article about standards found on the List Apart website. Together they have a frank and open discussion about the downsides of designing with standards.

Podcast: Download (28.4MB)