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.

Show 90: Digg

Posted in Classic shows on August 14, 2007 by Paul Boag

On this week’s show: Marcus abandons Paul to go on holiday. Paul talks about competitive analysis and does an in-depth interview with Daniel Burka, the creative director at digg.com.

Podcast: Download (22.1MB)

News and events | Daniel Burka talks about Digg | Competitive analysis

Hello? Is anybody there? I am so lonely, nobody to talk to, nobody to rant at, nobody to take the piss of! Your listening to boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and this week, I am sad and alone as Marcus is away on Holiday (or should I say vacation?).

I have to say it is not the same without him. Of course on the upside in many ways its a lot better. Less waffle, no interruptions, no skype problems and you get to hear my undiluted genius. So thats okay then :)

Because we don’t have Marcus around this week, todays show will be a little different. For a start Marcus wont be saying much, which should make the show shorter. However, in his place we have an extended interview with Daniel Burka the creative director at the social news website Digg. We cover loads of stuff from the difference in designing for social networking sites to working with AJAX and designing for the iPhone.

I will also be doing my segment as normal. This week I will be providing a quick and dirty introduction to competitive analysis. We will be looking at what you can learn from your competitions websites and how you go about extracting the maximum amount of information.

But before we can get into all that good stuff we first need to look at what has been happening in the world of web design over the last week.

News and events

Eric Meyer tries to prevent history repeating itself

First up in the news segment of the show today is a passionate call to action by Eric Meyer. Like myself, Eric has been working in the web for a very long time and is all too familiar with the problems of the past. He is a veteran of the browser wars (how dramatic does that sound!) and remembers the many problems that period caused.

During that time many web designers simply gave up trying to support multiple browsers and instead displayed the now famous message…

“Your browser is not compatible and must be upgraded”

It is therefore particularly disturbing when we thought those days are over to see the return of a similar message. As Eric points out in his post, those types of messages are returning in the form of…

“This site is for iPhone users only.”

As Eric says: Stop it! Stop it right now. He is absolutely right. There is no reason whatsoever for shutting out users from viewing iPhone optimized pages. Sure they might not look as good on a non iphone browser but other than that they should work fine on a compliant browser. To be honest, even if they don’t, that is still no reason to block non iphone users. If I choose to look at an iphone site on my Windows mobile device or even on my desktop browser, I am not going to expect it to look perfect. However, I could have all kinds of reasons for wanting to do it from wanting to check out the functionality to using an alternative mobile browser that is just as capable of displaying the content.

In Short, Eric argues (and I whole heartedly agree) that the “best viewed in…” approach to web design is a fools errand. Whether it is the iphone or something else, make sure you avoid that road at all costs.

6 Keys to Understanding Modern CSS-based Layouts

Talking about best practice, Jonathan Snook has posted a helpful article for those of you still struggling to move across to modern CSS-based layout.

As Jonathan says in his post…

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

Jonathan addresses this challenge by talking about 6 key principles that will help you get over this hump. He talks about; the box model, floating columns, sizing with ems, image replacement, floated navigation and sprites.

Its an interesting list although I am not entirely sure I would include the same items. For example there is no mention of HasLayout or IE conditional comments. However, Jonathan does say it is just his take on things and encourages people to add suggestions in the comments so they are definitely worth reading too.

How to mix fonts

So you might be listening to this feeling smug about your CSS skills but how are you with typography? Working with type is a challenging area and one that is very easy to get wrong. That is especially true when trying to combine multiple fonts together in an effective way.

Fortunately, David who listens to the show, has sent me a link to a cheat sheet on mixing typefaces. Not only does it provide specific examples of typefaces that work well together, it also gives you some basic information on typography.

I am a great fan of cheat sheets and have a number pinned to my wall including my much loved microformats cheat sheet. So, if you are looking for some advice on typography add this to your collection.

Making money through forums

My final news story for this week’s show comes off of the back of a story knocking around here in the UK. A number of large companies have pulled their advertising off of Facebook following the discovery that those ads were appearing on the profile of the BNP (a pseudo- fascist political party in the UK). These companies were unhappy that their brands being associated with the organisation.

This Facebook story is indicative of a wider problem that advertisers seem to be having with social networking sites and forums in particular. So the question then arises, can you make money from a social networking site?

For most of us this is not a question we have to deal with. Most of us don’t run social networking websites. However, many of us do run forums and we are looking to make a bit of extra cash from them.

If that is you then you might want to check out “Can forums still make money?” on sitepoint. This post suggests a load of ways you can improve your return on your forum and make some cash to cover hosting costs. The post is very realistic suggesting that the vast majority of us are not going to get rich from our forums. However, it might help pay for your cleaner (which is what I spend my Adsense revenue on!) and so it is worthy of your attention.

As a slight aside before I wrap up the news segment of today’s show, the article also links to some useful tips from Google about maximizing your return from Google Adsense, so you might want to check that out too.

Talking of social networking websites, that brings me on nicely to my interview with Daniel Burka from Digg…

Daniel Burka talks about Digg

Paul: Okay. So joining me today is Daniel Burka the lead designer/creative director/God of all things user interface at Digg.com. Is that a fair way to describe you Daniel?

Daniel: That was a very polite introduction. Thank you very much.

Paul: Well, it is always good to butter up the guests at the beginning…

Daniel: [laughs]

Paul: I find it goes down better that way. [laughs] So Daniel, I thought that it would be great to get you on the show, simply because you seemed to have worked so extensively with web projects centered very much on social participation and web applications, you know, and various other Web 2.0 buzzwords. Obviously Digg.com is a good example of that. And a lot of listeners of this show are still working on content heavy brochure-ware type sites. But, they seem to be really interested in more interactive elements to their site. And so we thought, let’s get an expert on the show that seems to specialize in this area. So, here is my first question Daniel. What do you see as being the main differences between designing and social networking sites, compared to more traditional content heavy sites that I am sure you have worked on in previous lives, so to speak?

Daniel: Oh yeah, I mean absolutely. I worked on those kinds of sites in the past. The big difference with something like Digg is that all of the content on the site, pretty much, is provided by users and so we're building conduits as frequently as we can where people can provide their input, provide content you know foster discussion, these kinds of things so I guess wherever possible we're not only designing the technically areas that they can do it but focusing the design on encouraging them to participate.

Paul: So how to you do that? How do you encourage someone to participate in using kind of design tools and design approaches?

Daniel: Right. I guess the big thing is to make it obvious that other users have provided content to the site. So, making it clear that the Digg count went up because other people you know dug the story. You know, showing which users submitted certain things or which user made a comment. You know that indicates, Oh okay. Other people, like me, have participated and that might be something I might be able to do too.

Paul: So how did you deal with the kind of early days before Digg had really taken off? Where perhaps you had less content than you do now and you kind of want to give the impression that there is loads going on, when perhaps here isn't?

Daniel: Right. I guess by the time I got involved in Digg which is about 4-5 months after it had started. So Kevin and Owen originally developed the site.

Paul: Oh okay

Daniel: And then they hired the company that I work with in Canada. They hired us to come in and basically do a design review and redesign of the site and that was the primary focus of the redesign was to look and say, Okay, what is this site about? And what the site is about providing input and so the original design which was more definitely designed from an engineer's perspective. It had all of that content, it had all of the facts and the bits and the place to Digg something, but it wasn't very clear at all what you should do or why you should do it.

Paul: Hmmm.

Daniel: And so, you-know probably the most interesting thing I have ever done on Digg was to take the Digg count, to make it really big and stick it on the left and stick a really explicit Digg It button under it. So, I mean that's clearing indicating X number of people already participated.

Paul: Yeah.

Daniel: And if you want to participate hit the big button.

Paul: Yeah. The kind of putting right in front of peoples face where they can't possibly miss it, so to speak.

Daniel: Right. I mean that is the entire purpose of the website is to, you know, say you like something.

Paul: So what other kind of things did you implement in those early days when you came in and started redesigning the site?

Daniel: The original focus, I actually thought this was a kind of interesting approach to take. Steven and I were looking at the site and trying to determine that. It already, in some ways, had a fairly large scope to the website. So we were trying to determine where do we get started. Often that is redesign the look of the site or redesign the home page. We looked at it and what is the most important thing here and the story format, I think, was probably the most important thing about Digg. And so we looked at each individual story in the list. There is a whole row of them on the homepage. We got about 15 on there now. And kind of a singled one of those and dissected it and said, What is important about a story? Why did the user submit it? Why is another person going to be interested in it? How do I encourage them to participate into that story? And so, that story format counts for a few different iterations since we started.

Paul: Hmmm.

Daniel: I think that being the primary focus of ours.

Paul: I mean what about the kind of more rich elements that you started to introduce? Where there is a lot less page refreshes that perhaps there once was and you kind of changed the way the people interacted with the site by introducing AJAX and things like that. I mean was that a big shift? What kind of thinking went into that process?

Daniel: Absolutely. I mean that is critical to Digg's success. Owen and Kevin had already started playing around with AJAX and this was before anybody like Jesse James Garrett that coined the phrase, AJAX. So, we were still calling it Asynchronous Javascript and XML request. Thank God someone has shortened that. And the fact that you are requiring mass participation to make something interesting would be entirely stymied if we had forced a page reload every single time a person wanted to participate.

Paul: Ummm.

Daniel: So we are using that all over the place. The Digg It button is the one real obvious place. And then you know especially in the comment system. There are various other areas where we're basically allowing you to have a really low-threshold of participation. No long page loads. Immediate reaction that what I did I got a reaction back from that, so I get that positive feeling.

Paul: So how does that kind of process work within Digg? I mean are you actually involved in coding the AJAX elements or do you just do the user interface? How do those kinds of accountabilities split up?

Daniel: Right. I guess we've got a really good balance I think between the development and the UI design. We are really tightly integrated with the different teams. And we are getting big enough now that we can actually speak about them as teams. So generally the flow at Digg starts with it's great we have a really design focused process here that Kevin will come up with an idea and then he and I will bounce the idea back and forth usually and figure out what the pros and cons are and then kind of rough out the design aspect. And then, basically take it from the conceptual stage code it statically and then work with the developers in terms of coding the functionality into it. So I don't do a lot of PHP or very much Javascript, but I provide with them XHTML and CSS and obviously the images and work with them implementing the basic flows.

Paul: I think a lot of the impression I get is a lot of organizations is still struggling to work out whose responsibility is the AJAX elements. It's kind of client side stuff that is very user-interface oriented. So should it be a designer job or is it kind of so intrinsic in the kind of connecting to the database and pulling out the content and that kind of thing which is actually a developer's job? It's quite interesting to hear how different people do it.

Daniel: Right. We probably fall into the developer's side of things. You know, it is submitting content to the database which is not horribly different than a normal form submitting to the database.

Paul: Yeah.

Daniel: So that is probably how we line it up.

Paul: Yeah. You guys seem to be doing some interesting things at the moment. One of the things that I imagine is particularly challenging is that you got a tech-savvy audience which is where Digg started. But you're constantly at the moment in this process of broadening that audience out to be more of a mainstream audience. And I'm just interested from a kind of design point of view, and user-interface point of view, what challenges that has presented you as far as shifting that audience. You know kind of in-mid process if you want. Most websites have a fairly good idea of who their target audience is upfront. But you are having to adapt that as the site evolves and I imagine that must be tricky at times.

Daniel: Oh, absolutely. I mean we started off as you said as very a tech-heavy site at about this time last year. I guess just over a year ago we broadened out very explicitly by introducing other content areas to the website. As we grow, and as a less tech-savvy audience comes in, there definitely is a real dichotomy between the perceived power-user who understands the very complex form type systems versus people who barely used a comment system on a weblog. On different areas of the site that level of experience I guess really comes to the fore. Although, I think I really take inspiration from the FireFox Project in that regard – particularly in Van Gudgers response. He is one of lead engineers on the FireFox Project. One of his best qualities being saying No! during the FireFox development and a lot of power-users perceive that they want all of these options at their finger tips. They want a hundred different options, if there are a hundred possibilities. Where as, in reality, having a simple system actually works better for both the power-user and the relative novice. I think the correlation between what happened with the Mozilla Suite, which was the previous iteration before FireFox which had a lot of different features and a lot of different buttons and customizability, versus FireFox which is really the torn-down simple browser. Which really ended up serving both audiences better.

Paul: So have you had the kind of guts to take functionality away or are you more kind of hiding it away so that it is still accessible to the power-user wants to go and get it?

Daniel: Well that is definitely the balance that we try and make. I think hiding the functionality is actually I was just reading a book a friend lent me. John Maeda’s book The Laws of Simplicity and he covers this subject. I think that it is really interesting that you can hide functionality as long as it doesn't feel intimidating and as long as you are not obscuring the functionality. I think you can actually, quite successfully, create a simple site by tucking functionally under the right areas, I guess.

Paul: That struck me. This whole idea of dealing with different types of audiences is a very challenging area. You have been at Digg for a while now, what has been the most challenging aspect from your point of view?

Daniel: Well, I think managing user feedback is definitely one of the big points of working at Digg. It is very intimidating working on a site where, every time you want something new, you have about 2 million people seeing it the next day and giving you their feedback on it. It is fantastic! It is really inspiring and exciting – and at the same time horribly intimidating. It is hard not to get frozen-up when you are about to launch something in two days and you kind of have to brace for the criticism because you know that people are going to be critical. And I mean that in the positive sense. They are going to critique what you have done. And so, being able to basically listen to a wide range of opinions and make sure that you are listening to everyone. But, you don't necessarily do what everyone says because there are obviously people with conflicting opinions and there are people who have very specific interests that may or may not be reflected by other people. I think managing those expectations that people want to know that you are listening to them and they want to see their suggestions reflected in what you are doing. Balancing those types of expectations is a really challenging part of the job.

Paul: So how do you go about that? How do go about deciding which suggestions you are going to implement and which you are not? Do you have some kind of process for that?

Daniel: I'm not sure if it is horribly formalized. I think the first and really important thing that we've learned at Digg, and I have learned on other projects being worked on, is taking a really deep breath. People will immediately ask for feedback on something, the minute you launch it

Paul: Yeah.

Daniel: They will ask for change. So don't make a change for the first week, unless they point out obviously drastic problems that you didn't anticipate. Take a deep breath. Let people give their feedback. Let them get some experience with the change because people are adverse to change generally. Their first reaction is going to be, Well I was familiar with it the other way, now it is different and I don't feel comfortable with that. And so, you will get a lot of feedback in that regard. And then carefully go through and filter and look for themes of feedback from different people. Try to determine why they were giving that feedback. And then iterate from there. I think that iterative process is so important.

Paul: One of the things that I think everyone has noticed recently about Digg, is that you released this iPhone interface. Everybody is going on about the iPhone endlessly and I am hugely jealous that we don't have it over here in the UK. And so, I am obviously bitter and twisted about it.

Daniel: [laughs]

Paul: But, putting that aside there is this plethora of iPhone applications coming out and Digg is one of the people who have done it. Were you involved in that putting it together?

Daniel: Yeah, absolutely. Joe, who is one of our developers, kind of came over and he was talking about it and was thinking it would be a great idea. And we both kind of got excited and pumped the whole thing out over our weekends.

Paul: Ahhh.

Daniel: Big props to Joe Hewett, who is not the Joe who works here, but Joe Hewett has made this great framework basically to start developing for iPhone applications in Safari.

Paul: Ahhh.

Daniel: He actually released a prototype of it on Friday afternoon. I think? And we started off from there and started developing. That is what does the sliding effects in our interface.

Paul: Okay.

Daniel: And we kind of took what he had done and I think we launched on a Tuesday the next week and on Wednesday Joe had already refined it and made into a kind of framework more people could use. So it was very useful to us.

Paul: So how do you feel about that, because that is a very different interface to be developing? It is much more controlled. You know the browser you are aimed at. You know the screen size. Was it a pleasant experience?

Daniel: Oh, absolutely. It was really really fun. I mean, there were a few things that were really fun about it. One, you are absolutely in that controlled environment. I mean people aren't resizing there fonts. You have a controlled number of fonts. You know the resolution. You can accommodate for when you flip the screen and it goes to wide-mode. And plus you are working with a rendering engine that doesn't suck.

Paul: [laughs]

Daniel: So it is really fun. [laughs] I mean you can even use advanced Webkit only type rounded corners and all kinds of fun stuff like that so, that part of it is really liberating. I can just imagine if all web design was like that. You know if all browsers were actually as standards compliant as they think they are. So that was fun. But, I think the most interesting thing is that you're working with an input device that is this big-fat-honking finger. And so, everything you do you have to be thinking about that. I think it will be interesting to see who succeeds at developing applications like that. But, you really have to think about pairing things down.

Paul: Yeah.

Daniel: When you are clicking with a finger there is no way you can have four or five buttons in a row and expect the person to be able to pick one out when they are sitting on a bouncing bus, with this phone in their hand. And so, buttons have to be really big. The Digg button on the source pages for instance is about two and a half times bigger than one on the normal site. And the links, we considered two different links. One to go to the source and one to go to what we call the Permalink page, the story page, of that particular item. But you know, even having just two buttons per story was much too difficult on the iPhone so we just have one you just can't miss which is a big finger button and it slides over and you get the story.

Paul: Yeah. Do you think you will be doing kind of more with Digg where you are kind of delivering the content, through other various mechanisms; such as the iPhone? I mean, could you imagine doing stuff with desktop applications like using AIR or anything else? Is that an area that you think you would get into?

Daniel: I think the really exciting thing is that we are finally getting a proper API out there. And so, I guess we launched the API maybe two or three months ago. Maybe longer than that, I forget, but I think it will be really interesting to see you know if a desktop experience of dig is really valuable somebody is going to pick up that project and go with it.

Paul: Sure.

Daniel: And they'll develop it on the API. So, I'm not sure if explicitly if a desktop application will be great, but I could see it having certain benefits and maybe toying around with the idea ñ for sure.

Paul: Is there something personally you are interested in as a web designer doing, you know, it's a different medium again isn't it? You're going from a browser based environment to a desktop environment. Is that something that interests you personally?

Daniel: Oh, absolutely. I think it is interesting that those lines are really blurring. I mean, AIRs is that first salvo, in that regard, you really are to a large degree developing a web application. You can develop it in HTML and CSS with basically the same skills it takes to make an iPhone application, or a basic website, you can build an AIR app. That is pretty exciting. I think that once that platform matures, it could open up a whole range of things.

Paul: From a personal perspective, what is the area of your job that you most enjoy?

Daniel: I really enjoy trying to make things easy for people. Sometimes is really irks me if Kevin describes my job as making things pretty.

Paul: [laughs]

Daniel: I think it is such a minor part of design. You know it is an interesting one. But I think sitting down trying to determine, when you are looking at a fairly complex system you are trying to build, and trying to figure out how to not be complex. What to takeaway, how to design something so that it feels simple by putting the really important things upfront. And throwing it by some users and watching them how they do it. I think it is really exciting to see somebody participate in something that is under the hood really complex, but which they have fun and they feel that they are participating. And they do not put a lot of thought into what they are doing, they are trying to achieve what they came to do.

Paul: What about the fact that you kind of have been working on Digg for a prolonged period of time and it is that one site you have been working on continually? I guess because I work for a web design agency where I have a series of clients back-to-back and I am doing different things the whole time. Sometimes it strikes me that we're working on a project for a prolonged time is both a blessing and a curse. I just kind of wondered, what you think? Do you really enjoy being able to spend time digging into that one area?

Daniel: That is a very interesting point, because I also come from the web design company background where I basically would do a different project every month. And until December I was still fairly heavily involved in the day-to-day affairs of my previous company, so it has been a reasonably new experience for me

Paul: Oh I didn't know that.

Daniel: To be working solely on one site, with Pounce on the side. [laughs]

Paul: Yeah. [laughs]

Daniel: Another site I have been working on. So this is really very interesting. Absolutely, there are so many things fantastic about it. It is really fun to be able to go into great detail and have the time to go back into something you designed previously, and to alter it. It is not necessarily that you made a mistake, but a month later you suddenly realize that a big improvement to that would be if I did X. And so you actually have the opportunity to go back and do those kinds of things. Where as I am sure, if you were working with a client, it has happened before that you know six months later you see something you say it is obvious to me now but it is kind of out of your control. The contract is over. You know

Paul: Yeah

Daniel: They're working with a different firm. There are all kinds of things like that. And so, working on something as big as Digg it is really fun too. Within Digg there are lots of different projects. There are different pages. There are new things we are working on. And so you kind of I guess segment them into kind of different projects you can go around in a circle and come back to later on.

Paul: Do you ever envision a day where you throw out the existing user interface and apply a new one? Or do you think it will always be a kind of evolving iterative process?

Daniel: Oh, I think an iterative process for sure.

Paul: Yeah.

Daniel: I don't want to second guess what is possible in the future. We may have some brilliant idea or new technology that blows our minds. But, I think there is no reason to throw out something that is working pretty well. I think there is a kind a rush sometimes to you know, to start from scratch that real desire to start from scratch sometimes. But something like Digg, I mean it has changed fairly significantly over the last two years, but I don't know if too many people notice

Paul: Yeah.

Daniel: Other than a few big pushes we made, that things had changed much. I think that is really healthy that people become familiar with systems. They learn how to interact with them. And to really shake them up, you really better have a damn good reason to do it.

Paul: Yeah. Okay so last question then before we finish up. Is there any stuff that you are working on with Digg that you are allowed to talk about [laughs] because obviously there are things you are not allowed to talk about.

Daniel: Right.

Paul: But the stuff that you are allowed to talk about, what is really exciting you and what are you really enjoying getting into at the moment?

Daniel: Oh, there is a bunch of things. I think I am allowed to talk about that Kevin mentioned the other day that we are working on the images section.

Paul: Cool.

Daniel: So we are going to do right now you can do news and videos. And we are pretty confident we are going to get into images as well. And so we are working on a couple of projects to kind of lay the framework for doing that. So, some people think it is as easy as adding a section

Paul: Yeah.

Daniel: And putting a title on it. But if we want to do that, we want to do it the right way. And lay the ground work first. I am working a couple of things I cannot go into great detail unfortunately there so much secrecy here that we can't

Paul: [laughs]

Daniel: Layout too much of what we are up to. But, I am really excited that we are headed in this direction.

Paul: Yeah. The trouble is that you guys get ripped off so quickly, don't you, that you need to keep things quite.

Daniel: Well. I think it is a combination of problems. One is that we are obviously concerned with people duplicating our features and the other one is that we want to be careful setting expectations. Because if we say we are going to do something, we really want to do it.

Paul: Yeah.

Daniel: And I think people will get disappointed if we say, In two months we are going to launch such-and-such. and you know lot's of stuff happens in two months. And unfortunately if that had to get pushed back, and that two months was a totally random date that I pulled out of my head

Paul: [laughs]

Daniel: [laughs]

Paul: See know, we all believe that it is all going to happen in two months.

Daniel: Shoot! [laughs]

Paul: [laughs]

Daniel: [laughs] People will be disappointed or they will feel like we haven't lived up to their expectations I suppose.

Paul: Yeah. Okay. Well that was really great. Thank you very much for coming on the show Daniel. No doubt we will try and crowbar you again in the future to come and talk to us about Pounce as well. Because that is an exciting project.

Daniel: That would be fun.

Paul: Okay thank you very much for your time and talk to you again soon.

Daniel: Thanks so much for having me.

Paul’s corner: Quick and dirty competitive analysis

Great stuff from Daniel! It was really fun to speak to him even though I managed to offend him after we stopped recording by calling him an American (he is Canadian). Hopefully he will forgive me for the ultimate crime!

Okay, so before I wrap up today’s show lets take a quick look at the subject of competitive analysis. Its actually a segment I have just written for the book I am working on and so I thought I would share what I have covered. The idea is not to make you an expert in the field but simply to allow you to extract as much information as possible from your competitions websites in a quick and easy manner.

As always I have written this up as a blog post entitled “Quick and dirty competitive analysis” so check that out in the show notes if you want to see exactly what I covered.

No show next week

So that is about it for this week’s show. Remember that there will be no show next week as I am going away on holiday too! Yippee! However, if you need your boagworld fix don’t forget you can check out the forum and chat with other people about the poor quality of Marcus’ jokes.

Show 88: Two fat ladies

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

On this week’s show: Paul shares some thoughts on recording your creative ideas, Marcus discusses setting up a web design company and we review the Principles of Beautiful web design by Jason Beaird.

Podcast: Download (19.7MB)

Housekeeping

Before we get into the news there are a couple of housekeeping items I want to share with you all…

Eric Meyer Competition

In last week’s show we ran a competition to win a free ticket to Eric Meyer’s upcoming London workshop. The response to the competition has been truly phenomenal with a surprising mix of answer to our question…

“In which episode of the boagworld podcast did I first mention the subject of web standards?”

The answer was actually the very first show although we did have many suggest it was show 2. Although Show 2 was dedicated to web standards they were actually mentioned in the very first episode. Very well done to all of those of you who spotted that little trick in the question.

Anyway the winner, selected at random from the correct answers is… John Thixton.

Congratulations John, we will be in contact shortly to get you signed up.

Thanks very much to the guys over at Carson Systems who were kind enough to supply us with the free ticket. Don’t forget that even if you didn’t win you can still sign up for the workshop on the Carson systems website.

100th Boagworld

Next up, you may remember that a few weeks back we talked about the fact that we wanted to have a little celebration to mark the 100th episode of the boagworld podcast. Well, thanks to the organizational skills of Ian Forrester we now have a date and a venue. We will be recording the 100th episode of boagworld live at Ye Old Cock Tavern, London on Saturday 20th October 2007.

As well as recording the show live we are going to put a big wad of cash behind the bar so there should be free drinks for a while. We really appreciate all of the support you guys have given us over the last couple of years and want to in some way say thank you.

If you can possibly turn up it would be great to see you. Book it in to your calendar and sign up on upcoming. Please take the time to sign up on upcoming because it gives us an idea of how many people are coming.

News and events

Web redesign is a bad strategy

My first news story of the week is yet another post by Gerry McGovern. This article definitely makes up for his previous post about the best sites being ugly sites! This time around he talks about a particular passion of mine. He argues that website redesigns are nearly always a bad idea and that it fails to address the underlying issues.

This is certainly a position I have held for a long time. I believe that sites should evolve instead of going through a succession of wholesale redesigns. McGovern argues that redesigns too often happen for the wrong reasons such as changes in management, boredom, or a feeling the site has fallen into disrepair. I couldn’t agree more and would encourage people to think twice before complete overhauling their website.

YSlow for Firebug

Those lovely folks over at the Yahoo! Developer Network have been kind enough to produce a great plugin to the firebug firefox extension. I have spoken on the show before about how firebug provides loads of useful functionality to web developers including the ability to edit, debug and monitor both CSS and Javascript on live sites. However YSlow adds to that already impressive line up of functionality.

YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. It analyzes any web page and generates a grade for each rule and an overall grade. If a page can be improved, YSlow lists the specific changes to be made. It also calculates the total size of the web page for both empty cache and primed cache scenarios, as well as information about cookies. Finally, it lists all the components in the page allows you to view the HTTP response headers for any component.

Find redundant CSS selectors

Talking of useful development tools for firefox, you might want to check out the Dust-me selector which has been released by the sitepoint guys this week. The dust-me extension helps you find unused CSS selectors.

You know what it is like. Maybe you are working with somebody else’s CSS file or maybe you are working on an old website and can’t remember what you have done. Whatever the case you don’t know what half of the CSS selectors do and so dare not remove any just in case they are used somewhere. Enter Dust-me.

Dust-me will monitor the pages of a website you surf around making a list of any unused styles it finds in attached stylesheets. The list is constantly updated as you move from page to page. Once you have looked around the whole site you end up with a definitive list of styles which can be safely removed. Nice!

Although this is useful I am sure there must be something out there which scans all of the HTML pages and saves you the effort of navigating around the site. If you know of such a tool post it on the show notes.

Marcus’ bit: Setting up a web design company

We got this question from Ali:

Have you done any podcasts on how to start a business? More specifically a web design company such as the one you have. Just a request if you have not done a podcast, could you have a whole one dedicated to starting a web design business. I mean how to start one, start with business plan or just start one day building websites for various people and build your own portfolio?

We have previously discussed the aspects of running a web design company, recently covering who you should look to employ and a little bit further back a fairly long piece where Paul and I reminisced about setting up Headscape. However, we haven’t really looked at the initial set up properly.

Though we’re not going to dedicate the whole podcast to it, I thought I would cover some of the things you need to think about.

Business plan?

To be totally honest, unless you are looking for funding, then I think writing a business plan is a waste of effort. I do think it is a good idea to write down what you want from the business and how you think you want the business to be viewed – in essence, a mission statement (though it has to actually mean something!).

It is also worth asking yourself where you want the business to be in 2, 3, 5 and 10 years time. Keep reviewing and don’t be afraid to change as your views and your business changes.

Coming back to funding; unless you are looking to develop a product and therefore require R&D time (and therefore backing) you shouldn’t really need any funding. If you can run your business from home the set up costs are fairly minimal.

Forecasting

Running a web design company, from a business point of view, can be a fairly nervy existence. Put simply, there is only so much work you can take on at any one time and clients will rarely wait for you to be ready, so there is always a point in the not too distant future (1, 2 maybe 3 months) where the work ends.

Therefore, not only do you need to be out there pitching for work, you also need have a good idea of what you need to make each month to break even. This takes thought and usually the input of someone with some accountancy experience. Producing an annual financial forecast has been invaluable to us as we know exactly where we stand throughout the year.

Keep a close eye on productivity as this is the bane of the fixed price service business. It’s very easy to get excited about a big new contract but they are usually the ones that end up being priced badly, take much longer to complete than originally expected and therefore ending costing you; not only on the visible bottom line but also in lost sales because you couldn’t take on new work.

Keep searching for new clients

When a business starts it tends to rely on a handful of clients to survive. This is perfectly normal but it means that young businesses are placed at risk if they lose one good client. I have always said that sales get easier and easier as time moves on based simply on numbers. In other words: the more clients you sign up, the more referrals you will get.
So, in the early days, make a particular effort to gain new clients as well as relying on existing ones.

Ok, that covers some general good practice, but what about some of the more detailed stuff.

Decide on branding

Here’s a few fundamentals:

Company name
URL – Obviously relates hugely to the previous point!
Logo/ corporate ID – you will need letterheads, business cards, invoices etc
Build your website – much as this is the biggest pain possible, it is fundamental. In the beginning it’s that old rock and hard place scenario where you can’t win new web design work because you only have a holding page, but you can’t build the site because you are working on precious paid work. I wondered recently why I tend not to work so many evenings as I used to – now I remember!

Boring stuff

You will need to register your company. In the UK this costs money, not a great deal but you will need to do it.
Limited company, partnership, sole trader? Take advice from professionals on this and other items here.
Insurance – I covered this in a recent podcast so I won’t go into detail, but you do need to look at:
- Professional indemnity
- Public/product liability
- Employers liability
- Key man
Contracts – you need to sort out your standard contract documentation before you start and make sure that it is used for all jobs.

Pitching early on

Even though it can feel like you don’t stand a chance against more well-established agencies, you do hold a few aces:

You have fresh ideas
You’re keen
Even though your company doesn’t have a much of a portfolio, there is no reason at all why you can’t demonstrate work done at previous companies as long as you’re honest about it and explain, in detail, about your role
You’re cheap! However, don’t continually undercut your own margins or you won’t be in business for long. Be prepared to walk away… be prepared to walk away!

Initial prospects

This is when friends, family and old work colleagues come to the fore. Even though I have just pointed out some of the good points relating to early businesses, gaining some business ‘easily’ through your contacts is highly recommended.

The cost of sale is usually much less so, again, you are helping out that bottom line and giving yourself more time for production work and pitching.

Consider outsourcing

Finally, try to build up a group of trustworthy contacts that you can outsource to a) when it gets really busy and b) if there’s a part of a project that is outside your skillset.

Paul’s corner: Recording creativity

I like to think of myself as an ideas person. I guess that is another way of saying that I am crap at implementing the ideas I have. One problem I used to suffer from was recording the ideas I had in a form that I could refer back to later. Overtime I have developed a couple of techniques that help me manage my ideas better. Whether you are a designer, developer or website owner, we are all required to be creative in our jobs. We are all looking for ways to become more creative. With that in mind I thought I would share some of those techniques with you.

Review: The Principles of Beautiful Web Design

This week I have received probably the most sarcastic and rude question ever to be sent to me. However, at the heart of all that cheek there was actually a very good question…

Once you have got to grips with the basic of HTML and CSS where do you go next?

Its a good question and there are a lot of potential answers to it. However one of the more sarcastic comments that surrounded the question made me think that perhaps the next step is to ensure a good grasp of basic design principles such as layout, typography, imagery and colour.

This in turn made me think of the book I am reading at the moment, “The Principles of Beautiful Web Design” by Jason Beaird.

Jason’s book really is a basic introduction to good design practices for the web. It is ideal for developers, amateurs or indeed anybody looking to improve the look and feel of their website. It is made up of 5 chapters each dedicated to one aspect of good design; layout, colour, texture, typography and imagery. It really is very good and talks a lot of real sense. I could imagine this being very useful for web site owners who want to understand the design process better and be more informed when signing off designs submitted to them by an agency.

However, what surprised me the most was how useful i found it myself (as somebody who calls himself a designer). I was intending to have a quick flick through the book so I could get the gist of what was being covered. However, I found myself being drawn in by Jason’s friendly writing style and by finding myself continually going “oh I forgotten about that” or “I really should spend more time doing that”. In short it works as a useful reminder service to designers too.

Check it out. Its a worthwhile read if you want to go over the basics.

Emerging design trends

Posted in Design on July 16, 2007 by Paul Boag

Web 2.0. brought with it a lot of things. One was a new style of design. However, design is a fickle thing and we are already seeing some new trends emerging.

Gradients, reflections, drop shadows and rounded corners are all classic elements of web 2.0. design. For a while now these kind of stylings have dominated emerging websites. However, I have started to notice a shift recently and I have to say I like what I am seeing. Below I outline a few of the design elements that are currently in vogue and why I particularly like them.

Don’t get me wrong. This is not to say that I think these design elements are new (many are blatantly not), I am simply saying that they seem to be becoming trendy again.

Goodbye to the Fold

With web 2.0. came bigger font sizes and bolder designs. A consequence of this was less emphasis on cramming content above the mythical line that is the fold. Although many elements of web 2.0. design are falling out of favor, rejecting the fold seems to be growing in popularity. You see more and more sites willing to embrace the idea that users do in actual fact scroll and at this years @media the whole subject was met with considerable passion!

Personally I view this as a huge step forward for design. In many ways it is as significant as the end to the web safe palette. We now know that users are happy to scroll and although it is still good practice to keep key content above the fold, that doesn’t mean everything has to be.

It was always a false concept anyway with the fold moving depending on resolution, browser type, toolbars and window size. Accepting this and moving on, is progress indeed.

Functional Footer

The footer has always been an underused page element. Often it was used as nothing more than a nice way to finish off a design and a place to dump all of the crap that we don’t know what to do with! Now however, we are beginning to see sites that actually utilize this screen element to provide supporting navigation and information.

These “expanded footers” such as you find on Apples website, are being adopted more widely and provide some real “added value” to the user. They often contain things like; contact information, related links, and about us.

Resolution dependent layout

Another feature that seems to be growing in popularity is resolution dependent layout. This is where the layout adapts based on the viewable area. The most classic implementation of this is where at resolutions greater than 800 by 600 a third column of content is displayed. At 800 by 600 the content is pushed down to the bottom of the main column.

This is quite a hard feature to explain. It is much easier if you see it in action. Go to Patrick Haney’s website and reduce your window size. As you reduce it down you will suddenly see that the third column disappears and the content can now be found at the bottom of the page.

This approach makes better use of available space than either fixed width (with its empty space) or fluid (with its long line lengths). In my opinion this approach gives a real alternative to the fixed/fluid debate.

Right column navigation

Traditionally navigation on the web either appears on the left or at the top. Right hand navigation has somewhat been frowned upon. However, more recently this trend seems to have been changing with more websites adopting it. I think this is partly due to blogs, which seem to have right hand navigation by default. However, it has always struck me as strange that the convention is towards left. If you think about it there are a lot of good reasons for right hand navigation…

It puts the content first visually
Your cursor natural hovers near the scrollbars on the right
We are familiar with right hand navigation from tabs in books
We know from usability research that whether navigation is on the left or right, it makes no difference in the time it takes to complete a task

Overall I am hugely in favor of right hand navigation and I am glad to see it becoming more popular.

Focus on content

I have also observed a growing movement towards more content focused websites. By that I mean that more user interfaces are becoming understated in order to put the emphasis on the content rather than the design.

The most classic example of this is Garrett Dimon’s blog which is understated to the point of minimalism. The entire site is built to make the process of accessing and reading the content as easy as possible.

Although this doesn’t work well for every site (where there is as great a need to build brand identity as convey information) I do think that overall this is a healthy move. Too many designers are more concerned with showing off their design prowess than they are with focusing on content. The irony is it takes more design skill to build a clean, content orientated design than something more flashy.

Emphasis on typography

Finally, thanks to people like Richard Rutter we are seeing a growing interest in typography. For too long web designers have ignored typography concluding that we are too limited in fonts to do anything useful. However, typography is more than type. It is about things like leading, spacing, and style. Much more than typeface alone.

A growing number of web designers are recognizing this and doing ever more creative things with the limited number of fonts at our disposal.

So there you go. Those are the design trends I see emerging at the moment. What about you? Have I missed anything? What other things are going on that we should all be aware of?

Right, all I need now is some time to redesign this site :)

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.

Taking a brand online

Posted in Design on July 6, 2007 by Paul Boag

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

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

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

Typography

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

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

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

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

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

Layout

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

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

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

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

Logos

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

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

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

Colour

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

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

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

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

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

In conclusion

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

Show 83: iphone bollocks

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

On this week’s show: Paul talks about the importance of undo, Marcus explains the benefits of stakeholder interviews and Struan Robertson highlights some legal deathtraps waiting for us online.

Podcast: Download (19.3MB)

News and events

Safari for Windows

Probably the most talked about story of the last week is the fact that Apple have released Safari for windows. To be honest I am a little surprised just how much has been written about this considering I don’t think the impact is going to be that significant. Will Safari cut into Internet Explorers market share? Probably not. Will it undermine the market share Firefox has developed? Almost certainly.

If safari under windows rendered exactly the same as under OSX then there maybe some benefit to windows based web developers. At the moment it is impossible for them to test on Safari without buying a mac. This has the potential of changing that. However, in all likelihood differences will emerge and if they do then this is just another browser that we have to test against.

We will see.

Applications for the iphone

At the same time Steve Jobs announced Safari for windows he also talked about the iphone. The biggest criticism of the iphone to date has been the fact that it is locked down so third parties cannot develop applications for it. Apparently Apple have been thinking long and hard about the problem and have come up with a solution. They are going to allow developers to build web 2.0 applications that can be accessed by iphone users using the built in Safari browser.

What a load of bollocks. They are telling us something we already knew. As soon as Steve Jobs announced that the iphone carried a full safari browser we knew that web applications would be developed for it. Sure, they are now saying that methods are going to be provided to automatically access iphone features such as dialing and google maps but very little detail was given. As far as I can see Apple is not giving people anything more than they already had.

Jason at 37 Signals is excited about what this means for web apps. He says…

This is the coming out party for web apps. We are very excited about this. These are exciting times.

…and he is right. It is exciting for us web developers. However, I am not convinced the user will see it that way. David Shea mirrored my own reaction at this news when he simply posted a graph showing the astronomical cost of data calls on mobile carriers. Web applications are great for web designers but for users of mobile devices like the iphone they could quickly be prohibitively expensive.

Web Design-isms: 7 Surefire Styles that Work

I found a great article on Think Vitamin this week that talks about design trends on the web. One of the things you learn early on as a designer is that despite your desire to produce something completely original you never will. Everything has been done before and in this article Larissa Meek takes us through 7 styles of design that appear again and again on the web.

The article very much reminded me of design meltdown, an excellent site that showcases different approaches to design. However, what I particularly liked about this post is that the author showed examples of how these styles occur in art as well as online. This is nice because it encourages us as web designers to look beyond the web for inspiration, a subject I have spoken about before.

CSS frameworks

The final story caught my eye because it is an extension of something we have been doing for a while. A while back I talked on the show about the fact that Headscape work with standard XHTML templates. We use these templates as a starting point for development. They allow you to jump start the build process as well as ensure consist naming conventions across the entire design team.

In a new post on the List Apart website Jeff Croft proposes a similar approach for CSS, based on the concept of Frameworks. Jeff argues that certain aspects of CSS development are often repeated across multiple projects. From browser reset styles to creating horizontal menus and standard grid layouts, it seems absurd that we generate these from scratch each time. Jeff proposes that instead we create a series of CSS files that we can be reuse again.

Its a great idea and one definitely worth exploring if you work on lots of similar projects or are part of a large team where you are looking for consistency.

Agony uncle: The importance of undo

A couple of weeks back I received this email from Tom in Texas:

I am a designer currently working on developing a web 2.0 app. The developer is doing some really cool AJAX stuff but unfortunately most of it breaks the back button in the browser. He is arguing that it doesn’t really matter as there are lots of other ways of going back. What is your opinion on the subject?

Once I had recovered from the naivety of the developers comment and finished counting slowly to 10, I started to think through the role of undo. In the end this very simple question from Tom evolved into a blog post on the importance of undo. It is this subject I am looking at in todays show.

Client corner: Stakeholder interviews

Got this question from Dusted.

I’m about to begin a project to help an organization evaluate its current web site and web site management. I’m also going to perform some research and planning to help them start developing a new web site.

The organization is quite complex with a lot of different departments – marketing/events, sales, information/press, youth and more. Each person responsible for each department will be interviewed and I need some advice about what questions to ask them.

Starting off with a few…

Describe your department’s needs of the web site.

What can be done in a better way?

The results of the interviews will be used when I present my evaluation (and research/planning) to the board.

Any advice, links to articles, books… help of any kind would be deeply appreciated.

We have done quite a lot of stakeholder interviews over the years so this question seemed like one I could help with.

Stakeholder interviews can often be confused with user interviews, as they can often happen during the same process. I tend to differentiate the 2 by calling them internal and external stakeholders. These groups will always require a very different set of questions.

This piece refers to internal stakeholders only; those people that:

Will be paying for the project!
Are content owners
- Some won’t know or want to be content owners – “that’s X’s job”
- Some will consider their content considerably more important than everyone elses – “there should be a tab called ‘Corporate Accountancy’ and a big ad on the homepage”!
Will be users e.g. sales

There are a number of good reasons for talking to stakeholders, as follows:

Politics

Most organisations involve some sort of tension between departments/stakeholders/teams/whatever. Giving representatives from each of these groups (make sure you don’t leave anyone out!) provides everyone with a voice. It ensures that everyone has said their piece and it’s down in writing. Ultimately, it gets buy in on the project from all parties thereby creating a better end product.

Education

This applies from both sides. The interviewer is looking to be educated regarding the various points and specialisms that the interviewee has (that’s the point of the interview!). However, the interviewer also has an opportunity to educate a whole raft of internal staff about the web. A good example would be why it’s not a good idea to name site sections after departmental structure. In fact, teaching users to think of their end users early in the interview will probably affect what they have to say.

Verification

Talking to internal stakeholders can often highlight the need to develop certain functionality/facilities/micro-sites/etc that web managers only thought might be useful. Interviews can also be used as a test bed for ideas as well as feedback.

Semi-structured

Following on form the last point, make a point of telling interviewees that they can go off track. The questions are useful as guides but don’t stop writing down what someone is saying if it doesn’t fit with the script.

So, finally on to some good questions to ask&#…;

Questions will, of course, vary depending on the organisation, end user requirements etc, but looking back through a number of scripts, these seem to crop up regularly:

What does your department do?
What are your ‘processes’?
Who is your client and what do they want?
How do you think the web can help you deliver?
What is your role?
What is the biggest pain about your job? What takes the most time?
Describe your Internet understanding/usage?
Describe your software understanding/usage?
Name applications that you are a confident user of.
Do you store any information in databases? What?
The current website – what’s good and bad about it, what’s bad about it?
Are you tasked with providing content for part of the website? If not, do you want to be?

Ask the expert: Struan Robertson on Legal Issues

Today’s guest expert on Boagworld is Struan Robertson a corporate lawyer who specializes in IT law. I first met him on the .net podcast and thought it would be great to get him on the show to give us a small taster of the kinds of legal issues encountered by web professionals. In the show he answers three questions on particular scenarios to give you a taster of the kind of issues that can arise. These include:

What are the dangers of working on websites for illegal companies
Some of the issues surrounding using images when you aren’t sure about the licensing
Storing private data

Although the particular scenarios are quite specific hopefully they communicate some underlying messages and encourage you to take your legal obligations seriously. If you are interested in learning more about the legal issues surrounding web design and IT in general then check out Outlaw.com where Struan provides a lot more advice. Also Struan writes a column in the .net magazine where he covers different legal issues each month.

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 80: Home sweet home

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

On the show this week: Paul talks about preserving the design of your home page, Marcus takes a look at project management software. and John Oxton shares his experiences of working as a freelancer for web 2.0. companies.

Podcast: Download (24.6MB)

News and events

d.construct

Without a doubt my favorite conference is d.construct. Admittedly, SXSW has the wow factor and I loved every minute there but I’m a patriotic kind of guy and so d.construct wins because it is home grown. I guess I could have gone for @media which is also UK based but I prefer the more friendly atmosphere of d.construct.

d.construct this year looks particularly exciting to me. They have just launched their new site and I am pleased to see the theme revolves around user interface design. This obviously appeals to me more than last year, which had a technical feel, and so I cannot wait to sign up.

Registration is not open yet but they have already announced the price as being £85 + VAT. This is great value for a day packed with speakers such as Jared Spool, Cameron Moll and many more.

The date is the 7th of September in Brighton, so be sure to keep your eye on the site as tickets will sell out fast.

IA one sheeters

Convincing clients that information architecture work is of value can be tricky sometimes. They simply don’t understand the value of things like wireframes, usability testing and heuristic evaluation. Thankfully, Leah Buley has been kind enough to put together some “mini brochures” on different areas of IA, outlining how they work and what benefits they provide.

Each brochure is a single sheet of A4 which has been well written and nicely laid out. You can download them as PDFs and customize them to your own requirements.

Jakob Nielsen on web 2.0

According to the BBC, Jakob Nielsen is claiming that many web 2.0 companies are neglecting the basics of good design. Apparently, he has warned that the rush to make webpages more dynamic often means users were badly served.

The main focus of Nielsen’s criticism seems to be on personalization tools and social participation software. He argues that 90% of users almost never contribute to sites and so never make use of these features. He suggests that too much time is spent on these secondary tools at the expense of more basic fundamentals.

Although at first glance this looks like more hard line usability dogma from Nielsen, however in reality I don’t believe it is. I am guessing at his intentions, but I don’t believe he is suggesting that sites like digg.com or wikipedia (which are based entirely on social participation) are flawed. I think his criticism is being leveled at existing content based sites which are retrofitting web 2.0 features simply because they are “cool”. If indeed this is what he is saying then I entirely agree. Too many sites are jumping on the bandwagon and adding unnecessary complexity when all users really want to do is get the information they require as quickly and simply as possible.

Left navigation vs. Right navigation

I was sent a link this week to a fascinating study carried out by the University of Southampton. The goal of the study was to compare left hand navigation to navigation on the right in order to establish which approach enabled users to complex tasks the quickest.

The usability of two Web page layouts was directly compared: one with the main site navigation menu on the left of the page, and one with the main site navigation menu on the right. Sixty-four participants were divided equally into two groups and assigned to either the left- or the right-hand navigation test condition. Using a stopwatch, the time to complete each of five tasks was measured.

The general assumption is that left hand navigation is more user friendly but this study seems to prove what I have always suspected, there is little difference. In fact if anything there is a slight leaning towards right hand navigation which could be to do with the majority of the population being right handed.

Client corner: Project Management Software

This week’s client corner is based on a question from William…

What do you use for project management software and how do you implement it within your Distributed Company?

I am asking this question because up until now our company has not been busy enough to need a specific project manager, but as we are growing, we have several projects on the go and we are in need of some organization in this area.

Although we are not a distributed company, we do work from several different locations at times.

I have looked into some different programs, but there are so many it’s hard to know what is good. I could download the trials and try each one out, but I would rather get some expert advice and save myself the reviewing time.

Project management applies to all parties i.e. client and agency so I guess this is not just a ‘Client Corner’.
Our project managers use a number of different software tools, as follows:

Groove

One place for all pm issues.
Suiting Distributed pm
Works offline
File Repository to store Requirements, specifications, PSD’s, client delivered content etc
Loads of differing tools – calendars, document review, links, Tasks Tool for task allocation
Customisation – Create & deploy custom forms & views quickly with out any programming skills.
Manage tasks
Example : Production Management Issues

Forms captures input & feedback on production management Issues
Views used to create different cuts of the same data, can apply filters to the data, e.g instead of show me all, show me just those that are marked Action “Next”.
Differing views

by assignment
By client
By status
By importance
New requests
Unactioned requests etc
Form to capture any kind of work request that needs resource allocation : Purpose is to move all flagged emails, scribblings on notepads, phone call requests from staff into one place.
Summary of current jobs – all chargeable work broken down by Job, Client, Stage and Target Month
Invoice request form – to notify when invoicing milestones are reached.

Harvest Timetracker

Online time management and recording tool.
Excellent for reporting time and materials work

MS Project

We use Project to create Gantt Charts in contracts but rarely use them to track tasks. The main reason being that keeping Project up to date can be fiddly and often more time is spent updating Gantt charts than actually doing work!

Outlook

Don’t underestimate the value of email correspondence
We use email for all sign-off as written forms are a pain
Search in Outlook 07 is superb
All email can be exported to Groove

Content templates

Our project managers also create various templates to aid content delivery from clients.
Software tends to be either Word or Excel, whichever is most appropriate, for example:

For field based content e.g. Events including title, date, description etc we will agree field types with the client (followed by sign-off) then create an Excel template for the client to populate with content.
For general text page content we will create a Word based form including headings such as Page title, body text, body image, main images, related links etc

Ask the expert: John Oxton on web 2.0 product development

After last weeks .net magazine podcast I managed to grab a few minutes with John Oxton to discuss his experiences of developing web 2.0 products. It was a fascinating chat in which he compares two very different approaches. He talked about an American company that planned their product in immense detail and a UK company who are basically “just winging it”. His conclusion; planning is great if you have a lot of cash to burn but “winging it” seems to work better if you want to get something out the door!

John also talks a bit about his experience as a freelancer working for these third party companies. He talks about how it is easy to get sucked into areas which you aren’t really being paid for and how important it is to stay focused on your role.

It was a great little chat and I am definitely keen to talk to him some more in the future.

Agony uncle: Defending the home page

This weeks agony uncle section is based on a question from Andy in the Cotswolds. He writes:

My question is about a home page I am currently working on. The client keeps asking me to add more and more elements and it is slowly destroying the look and feel of the page. He wants so much ‘stuff’ above the fold that I am having to use every available space and drop down font sizes until they are barely readable. What can I do to explain to the client that this is a bad thing?

The question got me thinking about how I deal with this kind of situation. Although I have some techniques I use, I don’t think I am as effective as I could be. I therefore started to formulate some tactics that I have blogged about them over at “Keeping your home page clean“.

Review: Ecto

Like almost everybody else these days, I blog a lot. However despite a plethora of blogging tools out there none of them seem to have a good interface for actually writing the copy. Sure, they have great tools for tagging, categorizing and managing blog posts, but not for actually writing them.

In my experience the windows are too small, they don’t have good support for marking up your HTML, they don’t have very friendly spell checkers (if they have them at all) and you can’t write blog posts offline.

Being the fussy git that I am, I ended up with an incredibly complex process for creating a blog post. I would write it in Word (which has a good spell checker) copy and paste it into Dreamweaver (where I would mark it up as I wanted) and then into movable type (the system behind my blog). It was a stupid system but it kind of worked for me.

However, when I switched to the mac I decided to have a look around to see if I could find anything better. That was when I came across Ecto (which incidentally is available for windows too).

Ecto is a superb desktop blog publishing tool that provides me with all of the features I want:

Its spell checker highlights misspellings as I write
It allows me complete control over the markup
Lets me create my own markup macros so I can add markup with keyboard shortcuts
Posts directly to my blog while still being able to edit offline

However more than that, Ecto gives me a bunch of tools that I never realized I needed until they were there:

The ability to add images directly from my hard drive to the site
The ability to take images straight out of iPhoto and post them on the site
Add my current iTunes song to the blog post
Include links to Amazon (with your affiliate ID)
Add or create your own Ecto scripts

In short this is an extremely powerful, but easy to use desktop blogging tool, that I would highly recommend.

Show 79: Despise the listener

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

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

Podcast: Download (21.4MB)

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

News and events

Google Analytics gets interface upgrade

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

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

Great new articles on A List Apart

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

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

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

Teaching the traditional web

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

Baselines and vertical rhythm

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

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

Client corner: Getting things done in web design

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

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

Ask the expert: Andy Clarke on CSS 3

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

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

Agony uncle: Insurance for web designers

We received the following question from Brian last week:

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

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

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

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

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

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

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

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

Professional Indemnity

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

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

Public Liability

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

Product Liability

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

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

Employers Liability

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

Key Man Insurance

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

Review: Looking beyond web design books

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

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

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

Show 77: A dream?

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

On this week’s show: Paul talks about how a client’s work is never done, Marcus looks at dealing with scope creep and we review Dreamweaver CS3 (is it really worth upgrading?).

Podcast: Download (20.5MB)

“Adobe Dreamweaver CS3 (PC)” on Amazon

News and events

The web design survey

A List Apart are trying to build up a picture of the web design community by launching their web design survey. In my opinion this is an incredibly valuable project because there is so little statistical data on our profession. We have next to no information on salary levels, job titles, location, type of work done or even educational background. Its a strange situation for what is now a mature industry. Perhaps, as Jeffrey Zeldman suggests, it is largely due to the fact that we work in a hidden profession where the practitioners have meaningless job titles that bear little resemblance to the work we do.

Coding for content

If you listened to the SXSW special we did a while back you may remember me interviewing Garrett Dimon about the recent redesign of his blog. In that interview he talked a lot about his desire to focus on content and that the design should exist only to support that. The results of this effort are truly phenomenal and he has produced one of the most refreshing sites I have seen in ages. It is clean, easy to use and really succeeds in bringing the content to the fore. Well, this week he wrote an article that follows up on previous comments he made about his design approach by talking about how he coded the site. Its a great article and really shows off the fact that an attention to detail and methodical thought process can really generate some amazing results.

Don’t be a hero: Giving up is good

How often have you heard me drone on about return on investment? Well, now you can hear the guys at 37 Signals talk about the same thing but from a slightly different angle. In their post “Don’t be a hero: Giving up is good” they talk about the fact that developers don’t like to be beaten and will continue grappling with a problem long after it ceased to be profitable. The article argues that it is important to know when you cut your loses and drop functionality if it is simply taking too long to implement.

Working with tables and CSS

It’s amazing how many problems you have with tables even after you have moved across to CSS based design. One common problem I see a lot is the data in tables pushing out the tables width which in turn often breaks the design (see an example). Fortunately this week I found a post that seemed to solve the problem. It uses the table-layout property in CSS along with overflow:hidden. Its a useful little technique that is definitely work checking out.

Client corner: A client’s work is never done

In last week’s client corner section I talked about the role of the client and how in many cases it is very poorly defined. This started me thinking in more depth about how clients perceive web projects and how they often fail to grasp the enormity of the undertaking. In this weeks show I explore the ongoing commitment that clients have to make to their websites and look at what exactly they will find themselves doing on a day-to-day basis. As with last week’s client corner, this is a subject I have recently blogged about and so if you want to refresh your memory on what I said in the show check out my blog post on the subject.

Agony uncle: Dealing with scope creep

This week we will be reviewing a question from Bob in Iceland – “How should I deal with clients that keep changing the spec throughout a project?”

I guess the first thing to say is that the spec will change, they always do. Often it is perfectly understandable because people see a new design or piece of functionality and think ‘hey, we could do X or Y as well’.

But… and I have been as guilty of this as anyone… often the scope will creep as the client learns about the web development process as the project goes along. This is avoidable. It can often be seen as pedantic, or possibly even negative, to spell out exactly what a client is getting. For example, design iterations or template styles. Ask yourself when writing the spec – would a layman understand this? If not, then add notes to explain.

So, what to do when the first request outside scope comes in? As with most things, use your brain regarding how to respond!

If it is a 5 minute job then just do it, but make sure that client is aware that it is outside scope so a) you can earn some points with them and b) let them know that you are keeping a tight eye on the scope of the project.

Anything over that, you need to respond in writing (email is fine) stating that the work is outside scope and you estimate it will take X hours to complete… please confirm that you wish us to go ahead with the work. This puts the onus back on the client and makes them think about whether they really do want the work done.

It is good practice to have a change control procedure written into any statement of work. These can sometimes be over the top, demanding contract extensions in writing and the like (which probably is appropriate for a large new piece of work) but usually something like –

As and when issues arise, it is the project manager’s responsibility to raise these with the client and agree any actions to be taken.

If any rescheduling is required, the project manager will be responsible for ensuring that acceptable changes to the schedule are agreed with the client and documented.
The project manager will maintain an issue log and ensure that issues are either closed following discussion with the client or result in an agreed change to the project plan, with associated change documentation including price change where required.

Basically, this is saying ‘use your head’ and make sure you write down whatever is agreed.

Sometimes, however, it is wise to carry out additional work as a gesture of good will. This is usually appropriate if you ‘owe’ the client a ‘favour’ of some sort, for example if you had charged 5 days to produce a design and it took 1 because they signed it off immediately. You don’t necessarily actually owe them anything (assuming a fixed price contract) but they will be aware that you didn’t put in as much effort and probably won’t take a kind view to your charging them for an extra half an hour’s work at the end of the project.

Review: Dreamweaver CS3

I finally got my hands on a copy of Dreamweaver CS3 this week and although I am still taking it all in I thought I would share some of initial thoughts.

I guess the question you want answer is whether it is worth upgrading or not. As normal the answer isn’t black and white. If you are a a strong standards based designer who has worked with things like DOM Scripting or AJAX then this upgrade probably isn’t for you. However if you are still finding your feet with CSS and don’t want to learn Javascript then this upgrade is definitely worth considering.

Obviously Adobe is trying to pursued us that Dreamweaver offers a huge range of reasons to upgrades such as better Photoshop integration and improved browser testing. However, when it comes down to it, I believe it only offers two killer features.

CSS Layout made easy

If you are new to CSS this feature might be useful. It basically allows you to select from a series of CSS layout templates to get you started. Now, this never replaces hand coding it from scratch, however if you are anything like me you find it easier to learn from example and this certainly helps with that.

Spry framework

If you have tried and failed to get your head around DOM Scripting and AJAX then I would suggest you start off by buying “DOM Scripting: Web Design with JavaScript and the Document Object Model” (J. Keith) or “Bulletproof Ajax (Voices That Matter)” (Jeremy Keith). However, if even that fails then you might want to take a look at the Javascript framework now built into Dreamweaver CS3. As with CSS layout I should stress this isn’t as good as hand coding because:

you are stuffed if you want to add or amend functionality not offered from within the framework.
the code is bloated in places meaning it will make the page take longer to download.

However, that said, the functionality offered in Dreamweaver is very impressive. You can achieve all of the following without touching a line of code:

Work with XML datasets (like RSS feeds)
Expand and collapse content areas
Make accordion menus
Validate forms

The code isn’t great but at least from what I have seen it degrades reasonably and isn’t too intrusive.

If you are a confident CSS and DOM Scripting coder then the upgrade offers considerably less. Personally the best thing I saw was the ability to sort my CSS files in a drag and drop approach. Beyond that and copy and paste straight from Photoshop, there really isn’t much to get excited about.

The question is; has Adobe done enough with Dreamweaver CS3 to keep themselves ahead of Microsoft’s Expression Web which reports say is very impressive. Personally the lack of mac support in Expression Web could well be the deciding factor in what otherwise are very equally matched products.

“Microsoft Expression Web (PC)” on Amazon

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!

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 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 67: Marcusworld

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

This week Dan Rubin looks at the design fundamentals and Marcus continues his series on the statement of work.

Podcast: Download (22.0MB)

This week on the Boagworld Podcast, Dan Rubin looks at the design fundamentals of white space and page layout. Marcus continues his series on the statement of work, while Paul explains openID and tackles the HasLayout bug in Internet Explorer.

Download this show

News and events

Keyword forecasting

Last week saw an interesting new tool released by the Microsoft Adcenter Lab. The keyword analyser is an experimental tool which allows you to see predictions of future searches on specific keywords. You can compare the growth of multiple keywords and even get basic demographics on who is searching on these terms. I am not sure that this tool is actually that useful, however it is strangely compelling nevertheless.

Introduction to the DOM

Chris Heilmann shows us a sneak peek of his upcoming DOM scripting workshop in a 10 minute Screencast. Although not enough to get you started in DOM scripting it will certainly help you grasp the underlying principles.

Lessons in freelancing

As Cameron Moll prepares to leave the world of freelancing he shares his experiences from the last 18 months on his blog. Cameron gives a valuable insight into the lessons he has learnt and I would strongly encourage any freelancers to take a few moments to read it.

Jonathan Snook on CSS

When it comes to CSS we all work in slightly different ways, which is why it is always interesting to get an insight into somebody else’s approach. This week Jonathan Snook shares his top CSS tips and it is nice to see he has added some controversial tip bits.

Clients corner: Statement of work (technologies)

Marcus continues his series on the statement of work by discussing what needs to be said in the documentation about technologies, training and content population. He also looks at the hidden costs associated with hosting and how it should be handled in the contract.

Ask an expert: Dan Rubin on white space and layout

I remember sitting behind Dan at a conference once watching him work on a design (when he should have been listening to the speaker!). It was fascinating to see how he approached user interface work so I thought it would be great to get him on the show to talk about the fundamentals of design; white space and layout.

Agony Uncle: HasLayout

This week in the agony uncle segment we look at the HasLayout bug. In my experience this one bug creates the majority of problems that we encounter in IE. It’s an amazingly hard bug to explain and yet fortunately relatively easy to fix. I explain what it is and what problems it causes as well as looking at some possible solutions.

Review: Open ID

This week saw the announcement by Microsoft that they are going to start supporting Open ID. We take a look at what Open ID is, how it works and why you should consider implementing it on your own site. Most of what we cover is also tackled in Simon Willison’s excellent Screencast on Open ID.

The problem with IE7 zoom

Posted in Accessibility on November 1, 2006 by Paul Boag

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

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

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

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

So this:

Screenshot of Headscape at 100% zoom

becomes this:

Screenshot of Headscape at 175% zoom

Not perfect, but pretty good.

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

Screenshot of boagworld when magnified

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

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

Podcast 51: Better Google Listings

Posted in Classic shows on September 26, 2006 by Paul Boag

We all want better listings for our sites on Google, but search engine optimisation often appears to be a dark art and a morally murky area. In this show, we explore the issue and provide some practical advice.

Podcast: Download (28.3MB)

View the more radical design approach

Google accounts for over 49% of all searches and has one of the most complex and closely guarded search algorithms. It is not surprising therefore that your website ranking on Google can be a subject of much pain and frustration.

Ranking criteria

The exact nature of how Google ranks websites is largely unknown. However, it is generally accepted that the following items are a major contributing factor:

The age of your domain name
The amount of content available to the search engines
The amount of websites linking to your website and their popularity
The information architecture of your website
The quality of a page build
The relevancy to the end user

Page Ranking

A broad-brush indication of your rating is Google’s Page Rank. This numerical value provides some idea of your success in search rankings. There are numerous ways of viewing your page ranking but probably the simplest is to install the Google Toolbar.

Page Indexing

Another important factor in ranking your site is the accessibility of your content to Google. Google can only list your pages if it can access them. You can easily find out how much of your site is indexed by typing the following into Google:

Site:yourDomain.com

This won’t return every page as it will consider some pages duplicates. To see all pages click on the link at the bottom of the results.

Inbound Links

Of course probably the most significant factor in your page ranking, is still inbound links. The quantity and quality of links are crucial in how well your site is rated. You can view how many sites link to you by entering the following into Google:

Link:yourDomain.com

What does Google look at?

So when Google visits your site, what exactly is it looking for? Well, Google pays particular attention to the following elements on your pages:

The page title
The body content
Your meta tags
Headings
The naming and destination of links

Of course Google cannot index everything. It struggles with some content and cannot access others at all. Below is a list of the more troublesome elements. Although these elements can be used on a site you should not rely on a search engine being able to fully index them:

Images
PDF documents
Flash
Multimedia content

SEO Good Practice

Understanding how Google works is one thing, improving your listing is quite another. Below are is a list of good practices I have picked up while researching the show. These should go a long way to helping you improve your sites placement. However, ultimately search engine is a specialist area and you may wish to consider outsourcing this work if you are able.

Identify a list of keywords to focus on. Keep it short and specific. Trying to ranking highly on lots of broad phrases will prove impossible.
Endeavour to include keywords in your page URLs. Look at the address for this page. Notice that it repeats the title of the article. Does your site do this or does it have incomprehensible URLs?
Use Heading Tags and keeping the H1 tag for the page title rather than the title of the site.
Make sure that every page has real content rather than lists of links. I recommend at least 50 words per page.
Wherever possible using keywords in your links (both in the body of the page and within navigation).
Use breadcrumbs through the site.
Try to keep keyword density at around the 5% mark.
Separate your content from your design by using CSS based layout.
Make sure any Javascript you use is unobtrusive and degrades nicely.
Ensure that meta data (keywords and descriptions) is unique to each page and not generic across the whole site.
Remember that content only accessible after submitting a form is invisible to Google.
Wherever possible, link to other content within your own site using consistent link descriptions.
Ensure all images have an alt attribute (alt tag).
Make sure your site has a sitemap.
Look at your competition and analysis what SEO steps they are taking.

Conclusion

Improving your ranking on Google can be a slow and frustrating experience. It is not unusual for a website to take 4 months to be fully listed and even longer if it is a new domain. Even more frustrating is the fact that Google keeps much of its algorithm a closely guarded secret, which means that much of what we know about improving rankings is educated guesswork. Despite that, we cannot ignore Google. They are a dominant force in the marketplace and search engine listings are a vital component of any online marketing strategy.

Also in this show…

Also in this week’s show we review CSS – The Missing Manual, take a look at a standalone version of IE 7 and check out a new automated testing suit. In the news we also see @media go global and have a look at the latest Web standards advice from A List Apart.

Web standards War – Watch our language

Posted in News on September 21, 2006 by Paul Boag

The war is over! …… Or is it?

The thing that disturbed me most at this year’s @media conference was the final panel in which it was announced that the “web standards war was won”. I remember saying at the time that this was far from my experience and so was particularly encouraged to read a recent Think Vitamin post.

If we want to seriously increase the take up of standards based design we need to simplify our language and make sure the underlying concepts are accessible to all.

One of my unofficial aims for this podcast and blog has always been to explain the benefits of standards based design. I passionately believe that using CSS for layout, semantic XHTML for content and Javascript for behaviour benefits everybody. Website owners have a site that is easier to update, can adapt to multiple devices and is more search engine friendly. Designers and developers find maintenance a much more pleasurable experience, changes less painful and large builds much quicker.

The idea that web standards were now the norm really shocked me. Certainly, that has not been my experience and I still receive regular emails explaining how my podcast is encouraging people to adopt standards. How could that be the case if everybody is already using them? Here is just one example of an email I have received this week:

I know CSS has been around for quite a few years already – but the whole "web standards" bit is new to a lot of people. My point is basically that you and your podcasts are helping to educate the public and web designers about the importance of web standards in web design.

I think the comment at @media demonstrated an underlying problem. The web design community has fractured. I believe there are two tiers; the “elite” that read the right blogs, attend the right conferences and own the right books. Then there are the rest, those that don’t have the time or money to keep on top of every new trend. So often, the former look down on the latter (something I have written about before) and condemn them for bad practice. However, in many cases they are just struggling to get by and need our encouragement not condemnation. As long as clients are willing to pay for old table based sites, then these designers don’t have the business justification for getting their skills up to speed.

I guess that leads nicely on to the other group that still needs a lot of convincing… the clients. To say the web standards debate has been won among this group is absurd. Most are totally unaware of good practice in development. As long as the site looks okay in their browser then they are happy. We need to continually educate our clients (and prospects) of the need to build, standards based sites.

Spread the word

The think Vitamin article encourages us to spread the word and makes a few suggestions about how we can do that. However, I believe the primary method was missing; we need to change our language. I have been interviewing a number of people recently for the show and have noticed one reoccurring problem; they cannot help but use jargon. In many cases the people I interviewed were unable to get through a conversation without talking about “web standards”, “web 2.0”, “progressive enhancement”, “web services”, “frameworks”… the list could go on. Even though I always explain that my podcast is aimed at a mass audience, they cannot help themselves. We need to learn to stop talking techie! For the majority of web designers out there, these phrases mean nothing. If designers and developers don’t understand them, then how are clients ever going to grasp the concept.

The boagworld.com podcast is often criticised for its lack of technical detail and for “dumming down”. I am often forced to over simplify a concept in order to make it accessible to the audience I am trying to reach. Now although this sometimes makes me less than accurate I believe that this is preferable to using jargon that nobody is going to understand.

If we want to seriously increase the take up of standards based design we need to simplify our language and make sure the underlying concepts are accessible to all.

Revolution or evolution?

Posted in Web strategy on July 15, 2006 by Paul Boag

In my last podcast, I spoke about choosing the right design for your site. In the past, I have also written about the need for sites to evolve rather than redesign. Therefore, I thought I would put some of my theories to the test, with the redesign of boagworld.

Ever since my podcast co-host (Marcus) joked that it was about time boagworld got a face lift, I have been mulling over what to do with the site. Obviously, I am not going to change the site just because Marcus said so but equally there are a number of reasons why the site needs some attention:

We had a new logo for the boagworld podcast waiting to be launched
The sites code is looking a little dated and doesn’t really reflect the latest techniques I have been using elsewhere
The sites layout is very much like a personal blog and not very reflective of the community aspects of boagworld.
I want to move away from a fixed width site, which is no longer reflective of the approach I take on commercial projects.

A revolution

With all of that in mind, I started the process of redesigning. As it was my site I simply let rip and just had fun rather than worrying too much about things like brand identity. The new design was a radical departure from the current site, with no real continuity. Despite this, I really liked the design. Sometimes it is fun to shake things up and shatters preconceptions, especially when it is your site and you don’t have to worry about "business realities". Without a doubt, this approach was very much a revolution rather than an evolution of the boagworld site.

An evolution

However, the more I looked at it and the more I thought about it, the more I began to worry. This radical departure flew in the face of the advice I gave in my "site evolution" post. In this post, I suggested that a site should gradually evolve over time rather than go through periodic redesigns. One of my reasons for this approach is that it keeps continuity in brand identity and doesn’t leave users feeling overwhelmed when they see the new site. I therefore went back to the drawing board and produced a more conservative design, which was more in line with the existing site.

View the more evolutionary design approach

What do you think?

So how do I decide which approach to adopt? In the end, I have decided to take some of my own advice from my last podcast: "Ask your audience".

If you are reading this post then you are very definitely my audience. So what do you think? Which approach is better and why?

Podcast 42: Choosing the right design

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

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

Podcast: Download (30.7MB)

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