192. Next Generation

Posted in Classic shows on November 18, 2009 by Paul Boag

On this week’s show: We have interviews with two great upcoming web designers (Jamie Rumblelow and James Proud) as well as a new segment called Elevator Pitch.

Podcast: Download (31.6MB)

Download this show.

Launch our podcast player

Housekeeping

The Website Owners Manual is finally out this friday! To celebrate its launch, I will be running free public Consultancy Clinics on the 20th November starting at 3PM (UK time). If you would like free advice about your website or would just like to hear the advice given to others, then join the conversation via the Boagworld blog.

News

Mockingbird

A big part of most webs projects is wireframing. A wireframe is a communication tool, a design tool and a specification tool. Without it, there can be misunderstanding and miscommunication.

I have written about wireframing before. In that post I outlined the benefits of wireframing, but I also recommended tools including something called Balsamiq.

Balsamiq is a cross platform application that allows you to quickly put together wireframes that can later be easily edited.

Although Balsamiq is a great application it does suffer from one major flaw (beyond comic sans being its default font!). Balsamiq is great for creating wireframes but is not good for sharing them.

Balsamiq saves files in its own propitiatory format and although it will allow the export of images, this does not work well for interlinked pages.

There is a plugin called Napkee that allows you to export Balsamiq as HTML and CSS. However, this is clumsy at best and still needs to be hosted somewhere.

Mockingbird

Enter Mockingbird. Mockingbird has obviously been closely modelled on Balsamiq and yet has the advantage of being an online application. It can do pretty much everything that Balsamiq can, but also allows you to share wireframes with others. You can even embed them on your own website, so others do not know you are using a third party tool.

So whether you are a web designer producing wireframes for your clients or a website owner building them for your own site, I would recommend giving mockingbird a try. Best of all its free, so there is no reason not to.

More on redesigning

Two weeks ago we featured a Web Designers Depot post entitled “Preparing and planning for a redesign.” It was a good post that focused on what clients need to do as part of a website revamp.

This week a post entitled “Redesign: When To Relaunch The Site and Best Practices” tackles a similar topic. However, what makes this one different is that it is focuses on web designers redesigning their own websites.

It is an interesting topic that certainly comes with its own unique challenges. As the author says:

How can we work on designing our clients’ websites successfully every day and then perpetually neglect our own?

The post goes on to answer this question as well as suggest ways we can avoid our own websites becoming neglected. Subjects she tackles includes:

Why we struggle to redesign our sites
Whether we should be redesigning at all
Finding the time to redesign
Planning a redesign
Updating your brand
Wireframing
Design
Development and testing

The advice is great and although this post is aimed at web designers redesigning their own sites, it has lots of good advice that applies to any website owners. Certainly worth checking out.

Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode

It’s frustrating but testing your websites is an important part of our job. To make matters worse, it is much harder to test in multiple versions of Internet Explorer than it should be.

The problem as I am sure you know, is that it is impossible to install IE6, 7, and 8 side by side under the same operating system.

One solution to the problem is IETester. This truly remarkable piece of software allows you to easily switch between different versions of IE and even provides a load of development tools similar to Firebug.

Although there is no doubt that this is an impressive application, it is not perfect. No matter how good an emulator is, it is still not the same as using the real thing. As a result I am only willing to use this for ‘in development testing’. Before launch, I would still want to test in an actual build.

In the past this would have involved running multiple operating system using Virtual Machine software such as VMware or VirtualBox. However with the arrival of Windows 7 we now have another choice.

According to a post on Sitepoint this week it is now possible to ‘Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode.’ The post explains that this miracle is possible thanks to Microsoft Virtual PC.

Virtual PC is Microsoft’s alternative to VMware and VirtualBox. It’s available as a free download for most versions of Windows. As a standalone product, it’s functional but offers fewer facilities than the competition. However, XP Mode is Virtual PC’s killer feature. It provides:

a fully licensed, stripped-down, virtual copy of Windows XP SP3.

a clever facility which integrates the guest Windows XP OS with your Windows 7 host. In effect, you can run XP applications as if they were native Windows 7 programs. Although the XP application is isolated, it can still access the host’s files and systems.

The tutorial then goes on to explain how this technology will allow you to run the three versions of IE side by side.

Whatever our role, we should all be testing websites. As a result this is an absolute must read.

How to create clear web navigation menus

Last week I found myself in the unusual position of disagreeing with Gerry McGovern. Fortunately that has quickly changed with his latest post entitled ‘How to create clear web navigation menus.’

Gerry presents four ways you can improve your navigation in his own tongue-in-cheek style:

Stick with conventions

Every year a phone directory is delivered to my home and every year it’s the same. Have they no imagination in those phone companies? I mean, come on, hasn’t A-Z been done to death at this stage? Why don’t they try Z-A for a change?

Avoid audience based navigation

We once dealt with a department of agriculture who had the following menus: Farmers, Producers, Exporters, Researchers. What if you were a farmer who was also a producer, who exported most of your produce, and who right now wanted to do some soil analysis research? Where should you click?

Be consistent

Have a consistent place for your navigation. If you use the left column, keep it there. Don’t start shifting the navigation into the center or right columns as you go deeper into the site.

Avoid quick links

“Come, little links, gather round,” said the designer to the links. And the little links gathered round, all happy and expectant.

“Well, the good news is that we think you’re very special links and because you’re so special we’re going to call you Quick Links,” said the designer.

“Quick Links!” they shouted in unison. Then a silence fell and a little voice was heard to say:
“Master designer, does that mean the other links are Slow Links?”

I am being to wonder if Gerry is loosing the plot ;-)

Interview: The next generation

This week we are doing something a little different for our interview segment of the show. We have two great interviews with two up and coming stars of the web design scene. There is some real talent emerging and we are keen to showcase their work and passion here on the show.

Jamie Rumbelow

Paul: So, yet another interview from Future of Web Apps and this time we are talking to Jamie Rumbelow. Good to have you on the show Jamie.

Jamie: It’s great to be here, it’s unexpected and …..

Paul: … and cool

Jamie: … and very cool. It’s very cool to be here on Boagworld

Paul

Anna: Hello Anna

Paul: There we go, good. Anna likes this, so much I know. Um, yeah, so we thought we’d get you in. Um, I know nothing about you. We’ve talked a bit on Twitter

Jamie: We have

Paul: But that’s about it, so tell me a bit about yourself, your background, a bit of what you’re doing and that kinda thing

Jamie: Right well, um, well my name’s Jamie

Paul: Ok

Jamie: Jamie Rumbelow and I’m fourteen so I’m still…

Paul: Excuse me! You’re fourteen!

Jamie: Fourteen

Paul: Ok, I just wanna establish that, that’s fine

Jamie: So, I’m, I’m, I’m kind of a developer, um but not quite cos I’ve still got stuff to do…

Paul: Yeah

Jamie: Like school and…

Paul: (laughs) just GCSEs and stuff like that, yeah

Jamie: You know, um, yeah I’m trying to get my name out into the scene. I’ve been actually started to do talking, I’ve been kinda launching a â€˜speaking’ career

Paul: Yeah

Jamie: So I’m hoping to follow in the footsteps of the great Paul Boag

Paul: Oh well, you know

Jamie: Um…

Paul: Don’t laugh Anna. Show respect

Jamie: Well yeah, I spoke at Tomorrow’s Web which was a conference run by a guy called Grant Bell and it was all about young people in technology

Paul: Yeah

Jamie: And Anna spoke at it too and um it was, it was really good a day, wasn’t it?

Anna: Hmmm, yeah it was really good

Jamie: So yeah, really enjoyed that, um…

Paul: Ok. So, I mean…..you’re fourteen and you’re trying to get your name known in the scene. Um, that’s quite ambitious to start that at fourteen. Why? Why, why are you so desperate to kinda get in there now?

Jamie: Well, I’ve always been quite enthusiastic and quite…..driven, um, and I really want to, you know, come out of school, come out with…….education (laughs)

Paul: Yeah that would be good

Jamie: Yeah but actually having made a name for myself and already have people knowing about me, interested in stuff I do, so that eventually, when I do actually launch as a full time career I’ll already have good grounding to work on. But it’s not just that, I want to meet cool people and I wanna do stuff like this, cos I…..you know, meeting loads of amazing, great people it’s a really really good benefit.

Paul: So, I mean, you know do you find with the…you know….as you wanna do loads of speaking stuff, you’ve set up and run your own event as well

Jamie: Yeah

Paul: So, tell us a little a bit about that actually before I go on to the next thing

Jamie: Oh well, it’s called Cambridge Geek Day, um, I had the idea …last year, in December and my mum said â€˜It’s the most expensive, time consuming thing you could possibly do, why are you doing it?’ And she actually forbidded me from doing it.

Paul: (laughs) So that went well didn’t it! (laughs again)

Jamie: Yeah, so anyway, I, I hid it from behind her back, um, for ages…..and you lying to your mum, it’s really…..

Paul: That’s not good. Kids don’t lie to your parents

Jamie: Yeah exactly. But I knew….I knew that I could pull it off. Anyway I got sponsorship

Paul: Really, you managed to get sponsorship?

Jamie: Yeah. I got sponsorship from loads of really really good sponsors. I got loads of great speakers lined up and……anyway it’s all steaming ahead right now. So I… my… I woke up to 300 T-shirts being delivered to my door and my mum had no idea about it. So I just told her that I got sponsorship and she was very fine with it

Paul: Your mum is very cool, I have to say. That is impressive after she banned you

Jamie: But yeah, I think she was just worried about me cos, you know, I’ve got more important things to do.

Paul: Yeah

Jamie: So yeah (laughs) back to the point. Um, yeah so it’s a conference for developers, it’s about developery topics

Paul: Right

Jamie: And that’s kind of…because that’s what I know about, that’s what I do, I’d rather run a developer conference than a design conference, purely because…….

Paul: Yeah. And it’s the same…..specifically young people or…

Jamie: No, no, there aren’t enough young people in Cambridge

Paul: In the Cambridge area

Jamie: So, I did an internship with a company called Broader Sheet. Have you heard about them?

Paul: No I haven’t actually

Jamie: Well they’re making an intelligent news aggregator, um but they’re a small start up and they work from the Red Gate offices, have you heard of them?

Paul: Yes

Jamie: Um, so I was in the Red Gate offices and Red Gate do a start up incubator where they have loads of start-ups working within the offices and getting the food and that sort of thing. Um, and I met loads of really really cool people, really passionate, intelligent people, in Cambridge, doing start-ups stuff and being…..you know, so I thought it would be a really great opportunity to kinda capitalise on that amount of people and it’s a bit of a faff to come to London and go to Brighton and you know all the places where the conferences are held. So I thought I’d run my own one

Paul: Yeah, good for you…totally. So when’s that happening?

Jamie: November the 21st

Paul: Ok, so not long then

Jamie: No, not long at all, we haven’t started selling tickets yet but depending when this is out, if it ever is (laughs)

Paul: It will be out don’t worry

Jamie: We’ll probably be selling tickets by then. Tickets are gonna be Â£60

Paul: Ok

Jamie: But with that you get coffee when you’re….and biscuits and tea and stuff when you arrive and during all the breaks and you also get a two course meal for lunch. Um, and we’ve got an after party and it’s gonna be well put together and I’m making sure it’s high quality

Paul: See, I mean, that…. you gotta say is really impressive because so often I’m like, encouraging you know people to start up local groups and to get meeting up and if there’s nothing in your area then just to do something. And people always come back with â€˜Oh I don’t know if I could do that’. And you think, no disrespect, but if a fourteen year old could that then you know then these guys who are web professionals should be able to do it. So, I think you’re a…..you’re actually incredibly inspiring from that point of view.

Jamie: Well, I’m honoured, thank you

Paul: (laughs) So, I mean what’s the plan? You’re gonna do your GCSEs. Are gonna go through the normal career path of GCSEs, A Levels, University? Or what, you know….have you got any thoughts on that?

Jamie: Well, I wanna do A Levels, purely because……it’s shows a certain level of intelligence, you know to have A Levels and they’re good qualifications. Um, but I’m not quite sure about Uni. Now a lot of people who are young and have already got a bit of a head start in the tech scene didn’t go to Uni, Anna included

Paul: Yeah, Anna for example, yeah

Jamie: So, I don’t know whether it would be so much benefit….educationally. As far as life skills go, maybe it would be good, so you know, be able to grow up a bit and live by yourself and that sort of thing. But I think I’d still be able to cope with that so…….my family want me to go to Uni but I don’t particularly want to

Paul: Well, you know you don’t have to make that decision yet which is helpful

Jamie: No, plenty of time

Paul: So I mean…….Ok let’s get your perspective on the web scene as it stands at the moment because you know there’s a lot of old crusty people like me that are, you know, saying what the next big thing is and what we think is important and all of the rest of it but I’m quite interested in your perspective you know…you’re gonna be…so…..let’s say you…….let’s say you went to University, so you’ve got two years of A Levels, well you’re fourteen at the moment so it’s two years until your GCSEs isn’t it

Jamie: I’m doing….I’m starting my GCSEs this year, I’m in Year 10

Paul: Right, so that is one or two years……one…two until those are taken? Let’s say two. Then another two years A Level, right? Let’s say you didn’t go to University, cos otherwise we’re getting too far ahead. So, let’s say four years time, what do you think you’re going to be doing when you come out and start work? What do you think is gonna be different?

Jamie: Well, I think the….I think the Web’s being opened up a lot more in terms of actually a platform rather than just a resource. So, I spoke about this at Tomorrow’s Web and it was talking about how the….that actually from the very beginnings of the Web it was always documents, it was always……you know just information linking to one another. No we’re starting to see things popping out from that like the Web 2.0 movement, and Google Wave, which is really cool

Paul: Don’t tell me you’ve got…….

Jamie: I’ve got a…..do you want an invite?

Paul: Yes, I flippin’ do

Jamie: Ok, I’ll send you an invite

Paul: Thank you. How come he gets a copy of Google Wave before me?! How did you manage to swing that?

Jamie: Oh, I was in the Developer Preview and…..

Paul: Ah, that’s just mean…..

Jamie: Oh and I know Bob from Huddle, he’s CTO at Huddle ….I think

Paul: God, he’s fourteen and he’s better connected than I am. That’s really irritating

Jamie: I’ll send you an invite

Paul: No more. No more of these young talented people. We’re not interviewing anymore young, talented people on the show. It’s just depressing. Anyway, sorry you were saying…..cool stuff

Jamie: So, yeah Google Wave is really cool and I don’t think it’s the end all solution to communication on the Web, definitely not. And it’s…..the Developer Preview especially was mediocre in terms of implementation, how it was written, it was buggy, the user interface was terrible, etc. Um but I can see the ideas behind it and the way it’s going forward and I really think that within a few years if we…..I think we really need to re-think how we talk and how we use the Web to communicate. Cos as I said it’s very kinda…..almost linear conversation, it’s been….you know we’ve always had bulletin boards or blogs with comments that you know…emails, all these communication platforms that we have on the Web aren’t particularly…….well they’re not particularly suited to the Web

Paul: Mmmm, and even if you ….email is like the kinda equivalent of the page-based stuff is just sending letters backwards and forwards isn’t it?

Jamie: Exactly. It’s like faxing

Paul: Instead of things like APIs and stuff like that you know you’re passing data backwards and forwards which in much more inline with Google Wave and passing….you know….chunks….packets of data of information backwards and forwards, so….

Jamie: But APIs really excite me

Paul: Oh do they?

Jamie: Yeah A) from a techie point of view cos I you know…um and also cos you can do so much with so little code, so little time and you can actually make some really cool stuff. This guy called Chris Harlman

Paul: Yeah I know Christian

Jamie: Yeah, he’s good fun

Paul: Yeah he is

Jamie: Um, he’s the …..he’s the Developer Evangelist for Yahoo I think

Paul: Yes, that correct, something like that

Jamie: And he’s been preaching YQL a lot and YQL is this um….SQL-like which is the query language that communicates databases. But YQL is like that but for the Web so you can query APIs effectively and then it all goes to Yahoo, Yahoo caches it, it will go to Yahoo servers, all that sort of thing but it’s all actually really really well thought out and well put together and his blog is all powered by YQL. So, it’s got all his presentations, all the books he’s written, all of the events he’s going to… from up coming, he’s photos from Flickr, he’s tweets from Twitter, all of his social presence is all combined into this one through a couple of YQL codes and I think it’s really cool that now we can do that. I think that we just need to start thinking about how we can use that data in different ways and just expanding that more and making that even…..

Paul: So that’s the kinda stuff you’d like to get into when you’re actually…in the…

Jamie: Yeah, maybe

Paul: Maybe?

Jamie: If I don’t…if my ambitions of being a rockstar don’t….you know…….turn out, yeah

Paul: Yeah, don’t pan out. I think you’re going down the wrong route for that, I have to say. You’re mixing with the wrong crowd if you wanna be a rockstar.

Ok well, it’s really good to talk to you Jamie and it’s good see the future of Web Design is safe, that there are people like you out there and that you’re getting stuck in now. I hope it’s a real encouragement to…..cos I know a lot of students listen to this and so it’s really good to hear that there are other young people out there getting stuck in. So, thank you very much

Jamie: Thank you

Thanks goes to Debbie-Jayne Reyes for transcribing this interview.

Also one quick note about the geek event Jamie was organising. Unfortunately this has had to be delayed. However, if you follow Jamie on his blog then you can find out when it is rescheduled.

James Proud

Paul: Ok, so joining me is James Proud from GigLocator. Good to have you on the show James.

James: Thank you for having me.

Paul: Now basically I’m doing this interview because Anna told me that you’re really cool and you talk some great stuff and I needed to get you on the show, so Anna is here too. Come on say “Hello”.

Anna: Hello.

Paul: And she’s now going to ask all the questions. Go Anna.

Anna: Oooh.

Paul: I’ll break you in. So first of all, tell us about GigLocator.

James: Sure, well GigLocator is a live music site, basically. Its completely worldwide, so whatever country, genre of music, artist and we will hopefully have all their past and upcoming gigs, and you’ll be able to easily find the tickets for the gigs so you don’t have to pay through-the-nose, for example, if you saw a gig on ticketmaster and it was £20, if you come to us you might see was the seetickets gig link and that’s £15. So you can get the cheapest tickets always up to date and you don’t have to miss out on gigs and its just making it a lot easier to go to music you love without have to trawl through all the ticket sites etc.

Paul: And you said you created this yourself and with one other guy?

James: I have got a co-founder. He’s mainly dealt with all negotiations with the ticket providers, I’ve done the design front-end and back-end stuff.

Paul: The immediate thing that springs to mind is: flipping heck that’s a big lo’ job to undertake! You’re looking at being worldwide here and you’ve had to arrange and negotiate with all the ticket providers.

James: Yeah, it’s been quite hard, he’s been dealing with people in the Czech Republic and GermansÉ Yeah it’s quite hard, but we’ve managed to get a lot of good data.

Paul: Ok, so you’ve got some good data, but all of these ticket people all round the world have all got their different systems, how the hell do you build something like that?

James: Three months of building a system that can normalise all of the different types of data. So whenever we get a new feed in, for example, you have a really decent feed that has all the artist names and the address of venue, then you find another feed that doesn’t have the artists name, it’ll just have ‘the artist name – Live Tour’. So all you’ve got to work with is ‘Madonna’s Live Tour’. So you’ve got to build a system that can decipher that its actually Madonna performing though you only have that title. They might only give you the name of the venue, so we’ve got to deal with finding all these things and putting them all together, but things are going quite well and we managed to sort it out.

Paul: That’s pretty impressive. So is this venture capital funded or is it being boot-strapped, how are you going about building it?

James: We are boot-strapping at the moment. We didn’t want to go down the route of getting seed funding early on because I could build it without the funding so we’ve just basically knuckled down and lived without money for a bit, but we’re going very well at the moment.

Paul: That’s quite a scary thing to do, did you work somewhere previously?

James: I was doing my A-Levels and doing some freelance work on the side, so I used to work with my co-founder for Coca-Cola music, Universal music doing freelance work there and that got us into the live music space. Then 6 or 7 months ago I said ‘I’m not doing freelance work anymore and I’m just going to focus on this’. So i’ve not earned any money for our consultancy and he’s just done small jobs on the side to pay for server costs, and it’s going fine.

Paul: That’s a really brave decision to make. So how old are you?

James: I was 18 a month ago.

Paul: Ok, so you’ve come out of A-Levels straight into this. That in itself is a big thing to do. You have the thing: ‘Do I go off to university? What about my career path?’ Why have you gone down this route?

James: I’ve taken a gap year out, so at the end if this goes tits-up I could go to univ, but the rate that things are going now I hopefully won’t. I’ve never really wanted to work for anyone else at all and I saw this as a chance at an idea and I was getting some great feedback so I thought let’s just do this and focus my time on it.

Paul: Its really interesting, this is what ScrunchUp is all about, which is now online and up and running. Little cheer from Ryan in the background there. This is something you struggled with as well Anna, what you’re doing: you did freelance for a bit, now maybe you’re looking for a permanent position. Do you ever regret not going to university?

Anna: Of course I do, all my friends are at uni, they’re all having fun, they’ve got it quite easy. Sometimes I feel like I’m not ready for this. I don’t regret not going because I just think working is better for me, but I do sometimes wonder: ‘What would it have been like?’ So either way I would’ve regretted my decision.

Paul: You’re just someone that’s ‘glass half empty’ kind of person. The green isÉ ‘The green is always grasser on the other side’? The grass is always greenerÉ

Anna: One things I wanted to ask you James, has your age got in the way of what you do or has it helped you?

James: When I was first developing, it got in the way because I couldn’t spend my whole waking life doing it so I’d have to go to college. So now that it’s finished its no longer a factor. It’s helped in a way, I always tried when doing work before launching before I had to show my face I never really promoted my age I just didn’t think it was important. But it’s helped me the fact that people are amazed that you’ve done this at this age, but I’ve done coding since I was 9 and I was paid at 12.

Paul: You got paid? Hang on, you got paid to code when you were 12 years old?

James: Yes.

Paul: I fell really old! When I was 12 they didn’t have blooming computers! So what’s next then? Is this actually launched and up and running?

James: Yes it’s been up and running for about 7 weeks, the reception, the things that have happened are amazing, it’s phenomenal.

Paul: Give me some examples.

James: Im now getting paid to speak at places. I was on the TV.

Paul: You were on the TV? Tell us about that, being on the TV’s cool.

James: A couple of days ago Channel 4 were looking for someone that runs a website but also has experience with Google Wave and I did a small piece on the news about Google Wave and how it affects me as a web developer and a site owner.

Paul: Ok, let’s go off on a complete tangent because I haven’t played with Google Wave. What’s it like? Is it as good as everybody says it is?

James: It’s quite good, but at the moment it’s lacking features. But Google’s made it so open that people can make features. So today they released it to 100,000 people. So hopefully with all of the developers that are now on it some amazing things will happen, give it a month or so and it should be quite a good platform.

Paul: That’s the big hurdle, you can build a great app, but if no one has heard of it then you fall down. Especially when you’ve spent so much time negotiating all these deals and developing it. So how are you – you’re boot-strapping it still, you haven’t got a lot of money behind you – how are you building a bit of momentum behind this?

James: We were at FOWA today, I was invited to come down. I got a free ticket. So I’m doing a bit of work with Sun, promoting it that way. But we’ve not actually gone full steam ahead with our PR or press because we are waiting to develop a few exciting new features that we think a lot of people will be interested in. So we’ve built a solid platform that does what it does: gigs, tickets etc making sure that’s perfect. But now we’re building on some extra things onto that so later in the month we’ll release those and alongside that we’ll start doing press.

Paul: So how are you intending to do it, or is it mainly your colleague that’s doing that?

James: The press stuff? Well because I’ve been doing all the speaking and I’ve been around London and all the events, I’ve built up a good relationship with quite a lot of people. So we are going to be targeting some music related stuff, just try and get it out there. Whatever that it takes. I’ll do anything. Take one for the team.

Paul: That’s a good entrepreneurial spirit. I like that very much. Have you got any more questions?

Anna: Yeah, so where do you see yourself in the next 5 years?

James: I’d like to say a year or so after I’ve had my exit. Either this is doing tremendously well still, or its had the exit. But hopefully I’ll still be working for myself working on fun things whatever it may be.

Paul: So that’s the plan, to go for an exit point where you sell the app and move onto the next thing?

James: Yeah, I think everyone is looking for their big exit. It’s either an exit or an IPO. If you’re money orientated. Work for the love of it. No I love it, its a great thing, it’s my life.

Paul: You could build a lifestyle business, for example, the business I run is a lifestyle business. We run the company so that it gives us a good standard of living and we’ll run it forever like that. Im not criticising, but looking for an exit is a different way of doing things. Well that was really interesting, i think its great to talk to people that are actually out there building these web apps but not with massive budgets and not ‘in the Valley’ and all the stereotypical stuff, you’re boot-strapping it, there’s just a couple of you guys doing it and it’s still possible.

James: It’s not about having a mass of money, it’s about losing control of your company. Why would you want to be a minority shareholder in a company, it’s your baby. I personally wouldn’t be motivated to work if it wasn’t mine still.

Paul: Of course. Thank you for your time and we’ll get you back on in the future.

Thanks goes to Simon Hamp for transcribing this interview.

Elevator Pitch: A/B tests.com

We are introducing a new segment to the show this week. It is called Elevator Pitch and is produced by our very own Paul Stanton. The idea is that Paul interviews companies who have a product that might be of interest to you guys. They give a quick elevator pitch and Paul asks them some questions.

We start the series with ABtests.com.

Stanton: OK so today I am here with Joshua Porter, Hello Joshua

Joshua: Hi Paul;

Stanton: How are you doing?

Joshua:I am doing good, what time is it there?

Stanton: It is about 10:30 in the morning.

Joshua: Ok it is still dark here so

Stanton:(laughs) So where abuts are you based

Joshua: I am north of Boston in a small sea coast town called Newburyport, Massachusetts

Stanton: Ok so is it night time there? I can never figure out the timezone differences.

Joshua: yes it is still dark, nobody is up so this is usually when I get most of my work done actually

Stanton: Nice and quiet I guess

Joshua: Yes absolutely

Stanton: So we have got you on today to talk about a website you are involved with called abtests.com, so give us the elevator pitch, what it is and why you made it.

Joshua: Sure, so yes its abtest.com and it is a really simple site the idea is that we upload and allow other people to upload the results of A,B tests. For those not familiar with A,B testing it is really pretty simple if or while you are designing a web page or screen in a web application you might design two separate instances of that page and then test to see which one works better. So you split up your traffic your audience coming to the page into two and 50% of the people see design A and 50% of the people will see design B and then you measure to see which audience converted better against some goal you have set up. For example say you have a sign up in a web application and you have a sign up page and you want to test two different variations to see which one works better, that is essentially the gist of A,B tests. The reason why we created the site was for people to share their tests with others so the way it started was I had been doing a bunch of testing and I had seen some people online writing up some of their tests and what I found was that I always found the results really fascinating. So for example we have some write ups on the site now where people have provided two screenshots of design A and design B and the only thing different is simply the placement of the call to action button, the primary sign up button and after doing testing it turns out that sometimes the placement actually matters, if you place the button in a place on the page then you actually get more people clicking on it. So these sort of things fascinated me and I had seen a few of them written up in blog posts and things online but I wanted a lot more of them and the designers that I have talked to really liked that concept as well so we created the site. I created it with a couple of guys from a start up called performable that I am involved in as well. You know we are kind of seeing where it goes at this point. We have had a lot of interest in it and we have found some interesting issues around it such as for example some people will never upload the results of their test because they want to keep them secret but others see it as a great way to promote their startup or something like that.

Stanton: Right so you are not actually providing the mechanism for people to do A,B tests this is simply for people that have had results and want to publish them and share them with other people, that right?

Joshua: Right now yeah, we do have quite a few things in the works but we will not be providing like a piece of software that allows you to do A,B testing. We might provide some other software that does things in and around testing, ermm but there are plenty of tools out there one of the tools the most popular one is google website optimiser which is a free tool which allows you too do A,B Testing and one of the folks who is promoting abtest.com with us is kissmetrics they have some tools in that space too. So we are not going to compete with them in any way.

Stanton: OK so how long has the site been running for now?

Joshua: The site has been running for about a month now I think

Stanton: OK and roughly how many tests are up there now

Joshua: We have er gee I don’t know what the number is 12 or 15. I haven’t actually been spending as much time as I wanted to on the site because I am actually working on a startup and building some other software. But we are .. the big challenge again is kind of getting people comfortable with the notion of sharing their tests. That is kind of the big challenge now so we are working on that.

Stanton: Sure, it is quite amazing to look through the stuff that people have put on there and you see the screenshots side by side and you have to look closely on them to see what has changed because it shows how just the tiniest change in either the text or the placement or the colouring in some cases can lead to quite big percentage improvements on calls to action so I think it will be really useful for people to come and have a look through and hopefully share their own tests as well.

Joshua: Yeah, one of the big findings that we are seeing is that testing like this or viewing the results of these tests really changes peoples perceptions of design, I mean it is kind of a pretty big insight to some people to see that OK you know the colour of a button does change things, the call to action copy can have a dramatic effect so what I hope kind of for the site and the test results is that teams can take them back and start talking about real design issues and hopefully push to the background things like politics and emotional debates and “this is what I think” and so this is what we are going to try type of arguments and say you know what testing really does work. lets really start testing things. I think at some point teams will start focusing more on really important things, like their users, the words that matter to their users, the things that motivate their users and really kind of return to the basics of design.

Stanton: Great so you have kind of given us a couple of hints to where the site may go in the future, have you any other plans

Joshua: SO two things I am working on right now. One is to really fill out the site with information how to test. as I mentioned we are not planning on providing a tool to test, but people want to know what A,B testing is. They want to know how to do it and they want to see examples of what other people have tested so they can get a idea of what they should test. That has been one of the biggest surprises that people do not know what to test so people you know have the question shall we test another colour?, should we test different copy or different button styles? whatever. So that has been a big thing so we are going to round out the site with a bunch of information, content basically around where to test and some of the interesting topics. So for example actually I am working on some copy now that is what A,A testing is, a version of A.B testing but is a version of testing where you test the same thing twice so 50% of people, you basically segment your audience into two parts and the two parts seem the same thing and that might sound like a ridiculous idea because you are testing the same thing twice but it is actually valuable thing to do early on when you are getting into testing because it tells you how much noise is in your system. So if you run design A versus design A itself and you have some difference there, so one has slightly higher conversion than the other and of course all of the numbers you get from testing are fuzzy to a certain extent the question is how much, so if you have some variance there and you know there is noise in your testing setup and you know that is your margin of error. So after you do A,A testing then when you move on to A,B testing you can say the margin of error is about 1% so then in that case if B outperforms A by 1% you know it is not really, it may not be a significant result because there is that much noise in your system to begin with. Anyway tat is just one example of some of the content stuff we are going to fill the site out with going forward.

Stanton: So sounds really good. A,A testing is something I have never heard of before so that is quite interesting and I will guess you will become quite a good resource for all this testing, for people to go to.

Joshua: yes I hope so.

Stanton: So where can people find out more information.

Joshua: So they can go to www.abtests.com check it out we are actually going to push some changes up soon that allow you to view tests and view related tests so hopefully it will be easier even than it is now.

Stanton: Good stuff, well thank you for that

Joshua: Thank you Paul

Stanton: We will hopefully check back with you in the future to see how things are going.

Joshua: Great sounds good.

Thanks goes to Shaun Hare for transcribing this segment.

190. Become a branding Ninja

Posted in Classic shows on November 4, 2009 by Paul Boag

On this week’s show: Ryan and Stanton interview Alex Hunter about managing your brand. Meanwhile Paul and Marcus look at how to speed up your website.

Podcast: Download (28.6MB)

Download this show.

Launch our podcast player

News

Offline inspiration

It has been a while since we have featured a Smashing Magazine post on the show so thought it was about time.

Shocking though this will be, it is not a top 10 list. Instead it is an excellent post on finding inspiration offline.

The post argues that using online sources such as CSS galleries for inspiration is not enough. As designers we need to be taking a walk, visiting a museum or spending time sketching. We need to consider these an essential part of our job description.

The post examines eight areas of inspiration:

Nature
Museums
Sketching
Hobbies
Music
Photography
Traditional art
Our own imaginations

It then discusses what can be found in these areas of inspiration. In particular the post looks at:

Texture
Color
Shapes
Changing our perspective
Discovering themes

The problem is that we don’t feel like visiting a museum is work and even if we do our bosses certainly do not! However, this is eloquently addressed to:

The trick is to consider alternative inspiration an an essential part of the job. While it feels more like play than work at first, finding true inspiration should mean more than browsing through the same material over and over. And we should know that in a creative industry, having fun is okay; it doesn’t mean we’re being unproductive.

Girl looking at Museum exhbit

Image source

Some of the best design work I ever did came from offline sources. I just wish I prioritised this kind of research more.

All you need to know about CSS3

Mr Stanton discovered a great new site this week – CSS3.info. With CSS 2.1. becoming increasingly supported and integrated into our work, it is time to look ahead at what CSS 3 has in store.

CSS3 has got some really interesting new features that are already supported in some browsers. From advanced selectors such as attribute selection through to multiple column layouts, there is a host of goodies we can start to play with.

What is more, by using graded browser support we don’t need to worry too much about IE’s lack of support.

CSS3.info is a great starting point if you want to begin using some of these advanced CSS features. It provides examples of each new feature and tells you what browsers support it. It also provides a selector check so you can see what advanced selectors work in different browsers. Finally, it also provides up-to-date information on how the new specification is progressing.

I really would encourage you to take a look at CSS3. Its got some really exciting features that you can start using now.

Preparing and planning for a redesign

Although I am generally against the principle of redesigning sites from the ground up, there is no doubt that every site needs a refresh once in a while.

Knowing when and how to go about redesigning your website can be a tricky process. Fortunately Web Designers Depot has a post that might help. Entitled “Preparing and planning for a redesign” it provides some valuable advice for any website owners thinking of redesigning.

The Firefox website before and after its redesign

The post starts by looking at how you know it is time to redesign. Contributing factors include:

Out of date technologies and techniques
The age of a design
The lack of a CMS
Search engine ranking problems
Under performance
Your competition

It then goes on to look at what needs to be done in preparation for a redesign. This includes:

Identifying what works
Being clear on what doesn’t
Looking at what can be removed, combined or added
Knowing what motivates your users
Whether a complete redesign is even necessary

Finally, the article concludes by looking at some potential dangers in redesigning. These include dealing with repeat users and avoiding broken links.

Although I don’t agree with everything in this post, it is a useful article if you are considering a redesign. Check it out.

Confusing menus and links: the web’s biggest challenge

I want to conclude with a post that might make you rethink your sites navigation. It is by Gerry McGovern and is entitled “Confusing menus and links: the web’s biggest challenge.”

Gerry applies his task focused approach to information architecture. He argues that too many organisations are more concerned with organising their content into an IA, than meeting the needs of users.

He suggests that to make a truly effective information architecture we need to start thinking like our users, who are focused on the task at hand.

To demonstrate his point he refers to the BBC sports site as a good example:

If you visit the BBC homepage and choose “Sport” you are brought to a page about sport. Just sport. The critical first screen is all about sport. No links to news or weather or business. Just sport. If you click on Football you arrive at a page that’s just about Football. Just Football. Not cricket. Not rugby. Not golf. Just football. If you click on “Premier League” you get to a page dedicated to the Premier League.

This is not web design. It’s web management. It’s about eliminating all choices that are not connected with the customer’s current task, which in the above example might be: Find out the latest news about the Premier League.

BBC Football website

Too often as website owners we clutter our navigation with other content that users “might want” or which we want them to look at. Although there are times when we want to cross link or promote other content, we need to be careful not to distract users from achieving their primary aim. If they become overwhelmed by links and fail to complete their task easily, they will leave.

He ends with a radical suggestion:

Menus and links need to be designed in the context of the task the customer is trying to complete. That means stripping away higher-level options and creating links that point forward based on the task at hand.

Stripping away top level navigation is not always a good idea, but this post should make us sit up and think.

Interview: Alex Hunter discusses developing an online brand

Ryan: OK, joining us today is Alex Hunter and we’ve just listened to you do a talk on… what was the talk title, I’ve forgotten?

Stanton: It was kind of “Managing Your Brand”.

Ryan: “Managing Your … Marketing Your Web App and Future Brands Online” – it was really good talk; really fascinating.

Alex: Thank you.

Ryan: So, would you like to tell us a little bit about yourself Alex?

Alex: Yeah. Sure. I’m an independent, kind of, brand ninja if you will. I’ve worked with some of the biggest brands in the world – on both sides of the pond. I live here in the UK but am originally from California.

Ryan: OK. And your talk was focused around making yourself your brand; putting your reputation on the line, in a way. It was really interesting – do you want to tell us a little bit about that?

Alex: Absolutely, yeah. Brand is one of those things that falls by the wayside, especially when it’s a developer-centred organisation. Developers are creating amazing technologies, incredible platforms but while they’ve been doing that they’ve actually been completely changing the game; they’ve been fundamentally changing the way marketing and branding works. It’s amazing, because they’ve create apps and platforms (i.e. social networking) that allow consumers to connect with brands for the very first time. Before, it was just send a letter out, watch a billboard, very mono-directional. But now we have these tools to connect with brands, and the irony is that the people that created that conversation aren’t responding to the fact that they need to have their brands intact.

Ryan: Right, OK.

Stanton: You gave a couple of examples of companies that you respect and that do this kind of thing really well. Can you give us a run through those?

Alex: Sure. I think Digg has put a lot of time and effort into their brand over their, what is, five-year or six-year existence. They’ve done a lot of little things really, really well and it was nice to hear Kevin Rose allude to them yesterday. Things like their blog – I think they’ve got the best corporate blog in the world because it’s not just the Vice-President of PR doing the blogging. It’s not even just Kevin or Jay (the founder and CEO respectively). It’s the developers, the designers, the DB admins, the receptionists, the community managers i.e. the faces and the names of the people that created and curate the community that we as the “Digg Community” have invested so much time and energy into. We can connect with those people now because it’s a name and a face of a real person. And so what they do whenever they roll out a new piece of technology or a new development, they say “Hey, I’m the guy that did this. Here’s why and here’s how (in excrutiating detail). What do you think?”. And that’s kind of revolutionary.

Stanton: So you would encourage people – especially working in small teams – not to be scared of just talking about what they’re doing and just waiting for “Let’s just wrap it up in a press release” or something and just talk about it naturally and be precious and passionate.

Alex: The being “precious” about it, I think, is a very, very big risk. That transparency is really beautiful because it brings people into the journey – especially when you’re creating something brand new – when it’s just an idea. You’re creating a new product and you’re updating people on it. It’s why reality TV is such a painful hit, I mean. It’s because people are looking into this thing and, Lord knows, the dev cycle is dramatic and painful and “4 o’clock in the morning” caffeine-induced frenzies. But also, it’s like when things go wrong, hold your hands up – be transparent, human. Don’t hide behind a brand name or a product name. And people will engage with that.

Ryan: So, how should people be doing this really? How should people be developing their brand and associating themselves towards the brand and then putting it out there. What techniques should they be using?

Alex: It’s a great question. I think that there’s – especially with Twitter, interestingly – there’s this real blurring of the line between personal brand and corporate brand. A lot of the big names that we know in technology embody their brand; Kevin Rose is Digg, Gary Veynerchuk is Wine Library TV, Tony Hsieh is Zappos – they’re all completely interconnected; there’s no separating them. They’ve invested themselves emotionally in what they do and that shows in the brand. And I think they’re defined by what they want to be. Gary has always been very clear about what his values are, Digg is very clear about what their values are. Apple are very clear about what their values are, and I think, trite as it may sound, going through and identifying your values – and it was really refreshing because as I came off the stage some dude came up to me and say “Hey, thank you. We’ve been labouring over this for years and we finally sat down – or I stopped sitting down with myself and brought the whole team in – and we defined our values” and it’s just gone up exponentially through that. And so I think it’s just define the values, creating an identity out of that and then saying “What are we now and what are we going to be, well, indefinitely really”.

Ryan: So do you think that’s got to be one of the first stages when you release it – you’ve got to be thinking about where you’re going to take it and how you’re going to present it to the world.

Alex: Absolutely

Ryan: That’s vitally important.

Stanton: So you talked about brand consistency and not to be scared of it or precious of it again. You should be willing to put it out there and how other people in your company – just use it and get it out there.

Alex: It’s… consistency is a funny one. People always say “The more people you give the message to the more watered down it becomes and the less consistent the message is”. Big brands are really scared of losing the refinement of their message. Realistically, they’ve been doing it for the last 30 years because the person who answers the phone in the call centre is the first point of contact that a user has with your brand. They are representing your brand. The receptionist is representing your brand. So giving someone an account on Twitter to do the same is no different, it’s just a little bit more of a public stage. But, on the flip side, that’s a good thing because people can see you responding to positive comments and negative comments and reacting and helping people in a very public forum. That’s why things like Get Satisfaction and applications like that – and actually in South Africa there’s a really popular one called Hello Peter which businesses are all into trying to respond and react to. So I think it’s a good thing and people shouldn’t be scared of consistency.

Ryan: Some brands, and we’re talking here quite a bit about people being associated to the brand and being kind of interchangeable. You say Steve Jobs, you say Apple, you always think of the two. For brands like, you mentioned, Diet Coke – being that you were invested into that brand – there’s no person that you can think of associated to that but you see that brand and you’re committed to it. McDonalds, things like that. What differences are there between the two? How do you promote? It’s kind of a logo you’re promoting in a way, isn’t it.

Alex: It’s a really good question. Diet Coke – the Coke/Pepsi thing is a fascinating brand battle and one of the few where it’s really only a two-horse race, especially in the consumer arena. I mean you’ve got Boeing and Airbus but they don’t really have to advertise because, well, I don’t have $100 billion lying around. Coke and Pepsi, I think, play off the fact that they are rivals and you are either one or the other. I think the more you consume of it the more passionate you become about it. So, if you are a regular Diet Coke drinker – like my wife won’t go to restaurants that serve Pepsi, she’ll leave because she can’t stand the taste of it. I’m sure it’s psychological because as Dave Chapelle said in that video, “It’s all the same”. It’s sugared water in a tin can! But they’ve managed to kind of feed off each other to an extent that has developed this rivalry and therefore developed this passion within its user base.

Ryan: I suppose then there’s so many different avenues that you can take to compete and get your brand out there. Is there any more that particularly stand out; having a direct competitor is one way of developing your brand or having a figurehead or any other ways you can go about it?

Alex: Absolutely, absolutely – especially for small – or reasonably small – brands. I think there’s a couple of things that are really important. In kind of extending the reach of the brand and the application with content like blogs – like the Digg example is a great one – but also engagement, both in the physical world and in the digital world. There are a lot of web companies that are getting really good at hosting real world events where users meet up and are rewarded both on a macro-like Digg or a Yelp on a micro level like some companies here in Europe like Qype that I mentioned during my talk that are introducing users to each other and to the people that either administrator or are the, kind of, power users within the community. Kevin Rose mentioned that again yesterday as a really good way; launch parties, regular user meetups, get people talking, get people connected. That really breeds loyalty. It’s astounding what that can do in terms of the competitive.

Ryan: I think Digg is an excellent example because they have so many methods of getting their message out there, don’t they. They’ve got the blog and the meetups and everything else.

Stanton: It’s like that with the bigger companies that come out. They can release different products that might not be wildly different but there’s the kind of umbrella brand that’s so strong that you can pick up that product and you know it’s new and you know the quality of it.

Alex: It’s really interesting. The web has actually fundamentally changed the way brand is perceived because we have these, like, loyalty mechanisms built in. Let’s look at, like, re-branding an acquisition. If my local supermarket gets bought by another supermarket, I don’t care. As long as it’s still there and has food in it – whatever! When Yahoo! bought Flickr they kind of didn’t know what to do with the brand. Do you keep it Flickr or do you make it Yahoo! Photos? And they’ve been kind of to-ing and fro-ing. But you can’t because that loyalty that’s in the Flickr community, that has built it up to where it is, would be PISSED OFF. So now, the compromise that just did recently was “Flickr by Yahoo!”.

Ryan: And people don’t seem to like it!

Alex: Exactly! Can you imagine what would happen if they rebranded it to just Yahoo! Photos? I mean, of course you’d get over it eventually but it’d take a lot longer and you’d lose a lot of customers.

Stanton: That kind of touches on one of the key things I took away from your talk. You said “Look after your users best interests, not yours”.

Alex: Absolutely. It’s hard because you gotta pay the bills. But that reputation will put you head and shoulders above anybody else. The Amazing Tunes example that I used. There are other unsigned artists sites out there, but not that give 70% of the profits back to the user and not that have a DAB radio station that you can get featured on. That’s looking after users. That’s the definition of an ethical web company.

Stanton: So for anyone starting out or building a company or a start-up or something, are there any common mistakes or pitfalls that you see all the time, or that you’d encourage people to watch out for or avoid.

Alex: Absolutely. There’s the ever-present “If you build it, they will come” mentality. If a build a solid app, no matter how ugly it is, people will come. They will not because they’ll never hear about it. And there are competitive apps to almost everything, and if there isn’t one today, there will be one tomorrow, and they will have looked at what you’ve done and they will have started an outreach, they will have started a Twitter account, they will have started a blog, they will have networked it physically and they will have networked it digitally, they will have thought about the presence, the UI. And I think that siloing and kind of compartmentalising and just saying “I’m going to iterate my app” is not going to work. There are exceptions to that rule. TweetDeck – he developed it to solve a personal problem, it just happened to be really well solved, and so it’s kind of growing on its own. But that is the exception to the rule. I think that hiding under a bushel, expecting it to develop on its own, it’s just not going to happen.

Ryan: With regards to cost of developing your brand, it can be the chicken and the egg sometimes. You need to develop an app and get it out there to make some return to put some investment into marketing it. What initial steps can be used to build yourself up before you can plough some money into it and doing it properly.

Alex: It’s kind of interesting. I think, yeah – you’ve got to have a concept obviously and some basic stuff done but I think one of the things that I’ve always found that worked, and it was really interesting to hear someone talk about it yesterday – I’m not sure who it was – but this kind of closed beta invite only concept seems to work really well at generating buzz. And if you just get one or two people saying “What the heck is this?”. You get these precious invites – which really aren’t that precious – Spotify’s a great example; actually Spotify’s a great example on two levels: 1) it was invite only for the longest time and 2) our pals in America couldn’t have it and they wanted it so badly that they were spoofing IP addresses and whatever they had to do to actually be able to use it. That kind of sense of exclusivity is a free way of generating that kind of buzz, if you can just get enough people to talk about it and it’s just an occasional whisper in the air, a Moo Card dropped somewhere with an invite code on it – that will just start to get people excited about it. But you have to make sure the product doesn’t suck on the back of it, because that will also spread pretty quickly as well.

Stanton: A lot of the talks I’ve sat in on today are starting to tie in. Yesterday it was “If you’re going to release something, release it early”. Do one or two things but do them really well, don’t try and do everything at once because you won’t be able to. And then see how things get – see how your users react to it and then build. I guess that’s reacting with the branding people that engage with the brand and then you’re building it and they feel invested.

Alex: That focus is really important as well, and I think that’s why APIs are so important in the early stage because you can get people developing iPhone apps and other integrations without taking your eye off the ball and doing those one or two things really well and going “Oh crap we’ve got to go home and develop the iPhone app”. It’s really interesting the way that it’s evolved – product development.

Ryan: Do you have any predictions of how things are going to change in the future. At the minute we’ve got these big companies that are doing it really well, everyone’s kind of imitating and doing similiar things to try and push their brands as well, and inevitably, things will change again. Any predictions about where things might be going?

Alex: I think it will become even more democratic. I think that the users will become even more powerful because the time to reaction is so fast.

Ryan: Yeah

Alex: But I also think loyalty will get even stronger and if you’re going to develop a competing app to an incumbant you’re going to have to work 10 times harder to get people off of what they’re using. As people start to use even more social currency, more points systems, giving more “value” to a user, it’ll be harder and harder to bring them over. I also think it’s going to be harder for people to acquire web brands, especially the big companies – the Yahoo!s the AOLs of the world to acquire small web brands without alienating those kind of fervently loyal people that are already their user base.

Ryan: You did mention people coming up with all this sort of cutesy names and stuff, mispellings and things like that. The market just seems to be saturated with it. How should people be thinking about deciding on a good brand and what fundamental things should they be thinking about when they’re making those decisions

Alex: I think that’s a great question. It’s less about the name – like you said it’s really easy just to misspell something or drop a consonant; that’s really lazy – you’ve got to look at it much more as a value-driven. What are our values? What is our product like? What is our team made of? Where are we in the world? And then use that to feed in the name to something obviously catchy, obviously when you can get the domain for a reasonable price – those are practical things that you need to take into consideration. But it’s got to be catchy; it’s got to be engaging, it’s got to mean something. And I think people have started to catch onto the whole “if you can make it a verb”. Digg and Google have become verbs (by the fact that they’re just ubiquitous), but I think people are now starting to say (at least, I’ve heard people around London say) “I’m going to Qype that” and it means “I’m going to check what this place is like” in terms of reviewing a restaurant before I go into it or whip out their Qype Radar iPhone app and check it out before they walk into it. So I think that that’s a really interesting revolution.

Stanton: You’ve got to work hard to get to that place, don’t you?

Alex: You really do.

Stanton: Then it appears in the dictionary!

Alex: That’s when you know it’s all over. You’ve won!

Ryan: OK, well, thank you very much for your time. I really enjoyed your talk and I think listeners will find that really useful. Thank you so much.

Thanks goes to Sam Kirkpatrick for transcribing this interview

Listeners feedback: Give yourself a speed boost!

Normally the listener section of the show focuses on me answering listener questions. However, this week on twitter and the forum it has been the other way around.

You may have noticed that boagworld has been running slow for sometime. Well, I finally decided it was time to fix the problem. However, my knowledge on the subject was fairly limited. That was why I turned to the Boagworld community and boy did they help!

I thought it was only fair that I share the top 5 things I learn from them.

Read 5 Ways To Give Your Site A Speed Boost In Less Than 30 Minutes.

154. Top Ten

Posted in Classic shows on February 25, 2009 by Paul Boag

On this week’s show: Relly Annett-Baker talks about good copywriting, Paul learns how to be a more efficient designer and we look at the ultimate website launch checklist.

Podcast: Download (31.8MB)

Download this show.

Launch our podcast player

Housekeeping

SXSW

Boagworld is doing loads of good stuff surrounding this years SXSW. The full details can be found here. However, the highlights are…

A live Boagworld show on Saturday 14th 6.30PM at the convention centre – With guests: Andy Budd, Daniel Burka, Joe Stump and Jeremy Keith. Please sign up on upcoming or follow via uStream.
The Great British Boozeup on Monday 16th at 7:30PM at Shakespeare’s Pub – An evening of great beer and an all British soundtrack. Again please sign up on upcoming.
Boagworld SXSW coverage – Instead of spamming both twitter and your RSS reader with content from SXSW, we are bring it all together on one handy streaming page.

So whether you are actually attending SXSW or not, hopefully there will be something for everybody.

News and events

The ultimate website launch checklist

Making a website live is a scary process. There is so much that could go wrong. However worse still, there is so much you could forget. When it comes to launching a website, you can’t afford to take chances.

Well, BOX UK has been compiling a website launch checklist that takes some of the risk out of the process. This list includes everything from validating your HTML to announcing the launch on Twitter.

If you are responsible for launching websites, then this post is a good starting point for your own checklist.

Mr Budd is on fire (not literally)

Normally when I write about the news, I focus on specific posts that have appeared over the last week. However, instead I want to draw your attention to Andy Budd.

In case you are one of the three people who haven’t heard of Mr Budd,let me give you a quick summary. Andy is a user experience specialist and founder of ClearLeft – an agency that does a mixture of web design work and training. Andy is also author of CSS Mastery, an excellent book that I highly recommend.

The reason I want to focus on Andy is because he has really started to churn out some superb posts recently. Although an accomplished author and speaker, Andy has written less on his blog over the past year or so. However, in this last week he has released two cracking posts.

The first is entitled "Don’t treat your website like a commodity" and focuses on how we approach the market. It warns against trying to artificially create a need for your site. Instead he suggests shaping your site around user requirements.

The second is entitled "Is your website like a leaky bucket?" and is in many ways a continuation of the previous post. In this one he warns against the mentality of continually driving new users to your site and instead encourages us to focus on retaining the users we already have.

With these kinds of quality post coming from Andy again, now is the time to add him to your RSS reader (if you have not already).

A win for the generalist

I am very much a jack of all trades and master of none. Others have accused me of ‘having enough knowledge to be dangerous’.

In the world of web design, specialists are the order of the day. As a result I am beginning to feel obsolete. However, perhaps that is a false perception.

If like me you are a generalist, then you may draw comfort from ‘Bringing Holistic Awareness to Your Design‘, a post on Boxes and Arrows. In the article they explain that if you want to build websites that score high in user satisfaction, you need a team with a good general understanding. In particular they wrote…

The more each team member understood the business goals, the user needs, and the capabilities and limitations of the IT environment "a holistic view" the more successful the project. In contrast, the more each team member was "siloed" into knowing just their piece of the whole, the less successful the project.

Now, the article does not apply that specialists are wrong. It merely points out that in order to build a successful website you need to see the bigger picture.

It goes on to identify 5 ways that you can ensure your team keeps this broad perspective. They are…

All team members conduct at least some user research
Team members participate in work and task flow workshops
Team members share and discuss information as a team
Team members prioritize information as a team
Team members design together in collaborative workshops

This is certainly something we have begun to take on board at Headscape and we would encourage you to do the same.

Interview: Relly Annett-Baker on Copywriting for the Web

Paul: OK, so joining me today is Relly Annett-Baker who is a copywriter over at poppycopy.co.uk. Hello Relly, how are you?

Relly: Hello, how are you?

Paul: So here we are, on the phone, after a false start.

Relly: I know, it’s good for an internet-based podcasting that we end up using the phone, but there you go. It’s reliable, I like it.

Paul: Yes, all that digital technology, it’s nothing but trouble. Good old analogue.

Relly: Yes, analogue beats everything.

Paul: OK, so we’ve got Relly on the show today to really talk us through some of the kind of fundamentals of copywriting, and copywriting specifically for the web and how we go about doing that. So, Relly, I guess the best thing to do is start with the absolute fundamentals here, and we’ll start by asking you what do you think makes good copy, how do you define good copy?

Relly: Erm, good copy starts with good writing, which sounds, you know, really obvious, but erm, really, unless your spelling and your grammar and your sense is not there, you’re not going to write good copy. So, that’s, you know, the start of it, so if you’re going to write copy, make sure you can write prose well, to begin with. Erm, beyond that, it’s then about… The difference between copy and normal writing is that you’re selling something, essentially, whether it’s a service or, er, an actual product, or, erm, even, you know, just an entire, just an idea. Erm, so, it’s about benefits, rather than specifications. A specification is, you know, what you put into your brochure when someone wants to know whether a dishwasher is going to fit in their kitchen. But, the benefits is much more about the time they’re going to save and be able to spend with their family, using your fantastic, very quick, very efficient dishwasher. Erm, and the other thing that good copy should do, above everything else, is entice a reader to investigate. Especially on the web, your copy has to earn it’s place; it has to earn an extra second of eyeballing, because people just scan on, we get so much information thrown at us, especially on the web, that your copy need to be clear enough that it can be easily understood and also enticing enough that someone wants to stick with you and find out more, rather than flick on to the next thing they can look at.

Paul: Umm. I mean, you talked there about "especially on the web", what do see as being the, kind of, primary differences between writing for the web and any other medium?

Relly: I guess the biggest difference is that print mediums are fixed, that’s why we have different editions of books or magazines that come out, whereas the web is fluid, so, the difference between wikipedia and the Encyclopaedia Britannica, and there are pros and cons for both of those mediums, erm, that they use, but mainly that you can alter things as you go, nothing’s ever sort of set down as "right, that’s what we said and we can never go back and change it". So, erm, the other thing is the web is used primarily for people that skim-read a lot of information and use it to gather information before they decide to go on and request a brochure or find out more about what it is that you’re offering. It’s usually the first point of contact for people looking up, so it needs to make a good first impression, erm, and as such it also needs to communicate what your company is like, what sort of, you know, erm, formalities you have, erm, how big you are, how small you are, and how you like to operate and convey that, er, which print very rarely needs to do, it’s often, by then, erm, when a print brochure comes into someone’s hands, they’re already aware of your brand and they’ve got a better idea of who you are.

Paul: Mmm, I mean, there’s the kind of one issue that often comes up with the differences between the print, er, printed medium and the web, is that, you know, that because people scan, copy on the web should be kept short. I mean, is that something that you would agree with? I know that I’ve seen, you know, some articles written on A List Apart written before, that say "no it’s not about the length of the copy, it’s about how engaging it is". So, I’m quite interested in your opinion on that.

Relly: Yeah, I would very much agree, that it’s much more about, erm, engagement rather than length. Often with print, you get told you have, you know, space for 250 words and that’s how long your copy has to be. With the web, your copy can be as long as it needs to be, but that’s not necessarily as long as you’d like it to be. But as long as you can keep people engaged and keep them with an interest to keep on reading, get more information about you, and then, er, essentially they can read 5000 words about you, but if they don’t press the button at the bottom that says "get in contact" or "ring us" or "do something", then that’s kind of all for naught. What you want is to, erm, your copy to be long enough to persuade someone that they want to take the next step and get in contact with you and make a, you know, make that step towards doing business with you.

Paul: Mmm, I mean you talk, you’ve talked a lot about engagement already, how do you go about engaging people as you write copy? What kind of tricks and techniques are there, or is it probably a lot more complicated than that?

Relly: (laughs) Erm, I wouldn’t say it was the sort of thing where there’s, erm, there’s one way to do it; there are different, different, erm, styles and it really depends on your audience. Erm, often when we think of copy we think directly of advertising, and when we think of advertising we think of billboards. Billboards have, literally, two seconds to engage you and fix a message in your head. So, they have to have a certain amount of shock-value, and that’s usually accompanied by a large image that ties that together. The web is a very different beast in that respect, in that you’re making a one-on-one relationship; you don’t have to talk to everyone in the street, you can concentrate on who you think your best customer is. You do research about you customers and your users, and then you write for them, and you write in a way that’s going to, erm, keep them reading. Erm, so it comes down to a lot of research about who you’re writing for.

Paul: Mmm, that’s really interesting, you talk about writing for a specific person or, er, a specific group of people, because, it sounds then like you guys suffer from the same problem that designers would suffer from, when a client turns around and says ‘our target audience is the general public’, and they won’t narrow it down any. So, er, is it fair to say that you’ve got the same need to prioritize audiences that a designer would have?

Relly: Absolutely, you cannot write something that is going to engage everyone all the time, you have to know who your audience is. Erm, and that often involves doing, you know, research that, erm, the clients themselves don’t necessarily take on as part of the need for copy, but, erm, often the product tells you what sort of copy you need to write. If you’re, erm, writing about a teddy-bear shop, it’s quite obvious that you’re not generally writing for a, sort of, you know, middle-aged, managerial businessman; you’re writing for either, erm, older women who collect them, or younger children and therefore you’re writing for parents. But when you get into services, it gets a bit more complicated and so you have to do more research about the people who make contact currently on the website, if there is an existing website, or, you know, what business they’re going for and who actually makes them, makes that next step, you know, and who predominantly makes up their sales; those are the people you should be writing for. I often say to, erm, to people who are writing, who are starting to write their own copy, to have a style guide and to practice that – try writing a letter to your best customer; obviously, you don’t have to send it, but, you know, as if you were going to address them, face to face, what would you talk about and how would you introduce your product, and what specifically would they be interested in about it. And once you’ve practised writing about your products in that manner, it feels difficult ‘coz it feels like you’re cutting off 50% of your potential audience, but if you can target on, you know, the 10% that make up your actual, erm, sellable audience, then your erm, your returns will be much higher.

Paul: Mmm, very interesting. I like the idea of getting people to practice by writing a letter. I can imagine that works very well. Let’s talk about, umm, some of the common mistakes when it comes to copywriting, ‘coz let’s face it, you know, the majority of websites aren’t, er, produced and written by, you know, er, trained copy-writers, or even (Relly laughs)… they’re either written by, erm, the designer when he gets completely fed up with waiting for content from the client, or it’s written by the website owner. Umm, in either case, you know, they’re not obviously as experienced as you, so I’m interested in some of the really bad mistakes you see coming up again and again.

Relly: Erm, the obvious one is when people take their brochure copy and just move that straight across to their website and say: "that’ll do, that’s perfect, that’s exactly what we want."

Paul: OK, we we always say that, why is that wrong?

Relly: Why is it wrong? Because, erm, your brochure should really be for when people have made contact with you and have an interest in your product. So then you can, you can work on selling them, you can, you can work on, er, getting past any of the objections that they might have, through a longer length of copy when they’re ready to address those issues, when they’ve already seen the positives. So, erm, your website should be… As an example, if you take, erm, say a hotel that’s, erm, setting itself up for events, or weddings, what a bride wants to see when she goes to the website is she obviously wants to see pictures of a lovely wedding, but she wants to know how the day is going to work for her, and why it’s going to be her, you know, perfect day. A bit further along the line, she wants to know how much glass hire is and how much it costs, you know, to have rooms in the hotel and she can be really direct in those. But, initially that first bit of copy needs to be one simple paragraph explaining why your hotel is absolutely perfect for her wedding day, as far as she’s concerned, the biggest day on the planet, and you have to make her feel she’s the most important person. Once she’s, once she feels like she wants to make the contact and book, the brochure can explain in far more detail what the liability insurance is, what the room size is; she needs to have a rough idea of these things, but they don’t need to be laid out for her, then and there.

Paul: Mmm, are there any other mistakes that you see quite a lot?

Relly: Yeah, people don’t revise or keep on top of their copy; so they kind of treat it like it’s been printed, and that’s it, they can’t ever go back and change it, or they feel they can only change it if they also change the design.

Paul: Yeah.

Relly: We’re starting to get past that a little now, erm, companies are getting a bit more used to the idea of blogs, and so they can keep updated in that respect. Erm, other mistakes people often end up writing for their client or their boss, rather than the actual audience, which goes back to, you know, what we were saying before, which is, you know, that’s a difficult one, everyone faces that where, you know, their boss says: "I think it should be like this", and if you know better, that’s, you know, that’s you having to then lay out why I think this works better because. Erm, but don’t, you know, be afraid to make the point that you are writing for the audience, the people that are going to buy and here are their needs and here are their requests, and this is how the copy has addressed that.

Paul: Umm.

Relly: And, I guess the other thing is that, erm, people (laughs), people who, er, don’t write very often, they fall into two categories, erm, especially with designers, this is so true, that designers either did art at school, because they wanted to get out of essay writing (Paul laughs) and therefore they haven’t written anything for a long time, and so they’re a bit rusty and they kind of need to maybe practice a bit before they lay something out and, you know, maybe hand it onto someone else and say: ‘does this make sense to you? Can you, can you read this out of context and understand, you know, where I’m going with it?’ Erm, I often talk about, erm, people using, er, text readers for the same thing; you know, I know they’re used in website design to check, erm, accessibility, that someone, you know is, er, able to have the text read to them and understand what’s going on they should be able to navigate around the website. It goes perfectly well for copy as well, copy is very much part of your navigation: it’s the information you’re imparting to that person. So that’s always a good way that, you know, if someone, if someone can read or be read the copy out of context and they get, you know, 70%, 80% of the idea of what’s going on, then you’re on a, you know, good track that way. Often you find that people, the other thing that happens is that people start writing and they get so excited about the fact that they’re writing, the prose just flows from them, like they were actually Lord Tennyson reincarnate (Paul laughs) and they come to the end and they’ve built up to a massive, dramatic conclusion (Paul laughs) about why their product is the best thing since sliced bread and actually that dramatic conclusion generally needs to be the opening statement, because it’s what catches hold of people and gets them to read onwards.

Paul: I mean is, I’m fascinated by this whole area of kind of trying to create a tone in your copy, er, because I’m not a copywriter, I write quite a lot, but in the sense of blog posts and things like that and so, whenever I’m writing, I’m writing in my own voice, if that makes sense. But, obviously when you’re writing for another site, when you’re trying to reach a very specific audience, when you’re writing within that tone of the website, that’s a very different kettle of fish and I’m interested in how you do that, how you go about setting a tone; how you go about sticking to a tone, you know, how do you do it? (laughs)

Relly: Ah, the creation of a style guide is very, that’s probably most important here. There are two things that I recommend when, umm, coming up with the, sort of the voice, the tone for a site, is to think about the persona of who that person is that’s writing, that’s especially true if you have multiple people who are writing as the same person, erm, often you find this now with companies that have begun to use Twitter streams and so on to communicate stuff and they they need to remain the same person, the, erm, NASA rockets do that very well, Discovery and the rest of them, they they’re able to communicate very well, both scientific facts and just, you know, prosaic information about the fact they’re bored of sitting on landing pads, launching pads and things like that and it’s quite nice because it’s able to communicate a human voice to something that essentially is a very complicated machine, erm, and the way that they’ve done that is to think: "well, if I, you know, it I was going to be a person talking about these experiences, what would I say?" and sometimes, you know, the most complicated, fascinating machine on earth, saying the most mundane things communicates more about their team that it could do than take a very long, scientific specification of what they were doing. So, it’s again going back to understanding your audience. NASA have understood that their audience on Twitter, they’re not space buffs, they’re people who are gererally interested, because most human beings are interested when a rocket goes up to space, it’s, you know, it’s an amazing thing, it doesn’t matter if you’re 6 years old, or 36 years old, it still seems, you know, astounding, that it happens. So, they’ve gone back and they’ve thought about, you know, how can we communicate to people every day and they treat the rockets as if they’re just people hanging around doing their jobs. just like everyone else uses Twitter. So, the first step is to understand your audience, and it takes a certain amount of, erm, it is quite cool to say but dissection, it is cutting out the people that you don’t want to talk to; people often know who their customers aren’t, even if they can’t quite focus on who their customers are and who their customers are becomes clearer with more and more research. Erm, a lot of what a copywriter does as research, right at the beginning, crosses over with information architecture, it’s a lot of looking at, erm, how best can we communicate these points and who really needs to know them and in what order? So you kind of, you go back and you assess, so this company is, erm, is selling er… they might be selling, we used dishwashers and washing machines earlier, so who’s the primary researcher and purchaser? It’s probably going to be, erm, it’s split probably 50-50 between female and male, as for the initial research, but they’re probably going to be above the age of 24, averagely; they’re probably going to own their own home and they might well have children and that gives you the sort of insight to the sort of family life that they have and what they, therefore, want to get out of that product. Erm, so then it’s erm, then it’s a case of looking at, I often go back then to erm, manufacturers, look how manufacturers’ websites work, how they describe their own products; what sort of visual advertising they’ve used to communicate these things and how that can be translated into words, what benefit are they selling with the visuals, often if I’ve been supplied visuals for the website, they can tie in together quite well. And then I create a persona, the person that is writing, you know, being the person who is writing for the website. So sometimes I’m a middle-aged man, sometimes I’m a teenage girl, sometimes, you know, I’m a cool, skating dude, it really, you know, it really depends on what, erm, angle I’m going for

Paul: Sure.

Relly: With the copy. I keep a swipe file, which is basically things that I take from magazines, from newspapers, from other advertising literature, from books, from articles, that I think has been written really well and I take it away and I say, I kind of take it apart and say: "what about that headline functions so well?" and "what about, what is it about this piece that talks so well to the audience that it’s that it’s going for?" that, erm, that’s especially good if, even if you’re not the target audience and you’re still engaged enough to read it; that’s, you know, often quite fascinating. One of my favourite places to, erm, take, er, hints and tips from, of all places, is the Daily Mail and the Sun (Paul laughs), believe it or not, because they are so good at putting across an emotive idea in very few words, there is nothing like a Sun headline for giving you a kick in the pants, for feeling, you know, and often you read it and you find yourself, erm, agreeing with the statement, out of hand, before you pull yourself back and go: "now hang on, no, hang on this is the Sun, I’m going to read this story first before I make up my own mind." (Paul chuckles) But, you know, they’re very good at doing that, and, erm, I mean it’s not ideal for everyone’s website, obviously, but to have the ability to do that, to take just a few words and make an emotive statement is really useful in copy, because what you want people to do, more than anything else, is feel that they must do something about getting hold of your product, they must find out more, they must buy it then and there, they must, you know, whatever is appropriate, you know, you’re not going to find many people who are going to one-click buy a conservatory so that’s not necessarily, you know, going to work so well, but you might well be able to get them to arrange to have someone to come round and measure for a conservatory and that’s the next step to getting them to do what you want them to do. Copy is all about behavioural management, essentially.

Paul: Yeah. I mean, it’s got a lot in common with design, you know. As I hear you talk, there’s so much overlap. I mean, but what’s so fascinating is that, you know, a client will spend a fortune on design and they will spend a lot of time and effort and forever express an opinion over look and feel and design, yet they don’t seem to want to invest money in writing good copy and they’ll say things like, you know: "content is king", yet they, there is this perception, I don’t know, is it a perception that they can do it themselves? Why isn’t it? Why is it so hard?

Relly: I don’t know. We, we poor copywriters, we are the Cinderella’s stepsisters of the web design world. Er, it’s especially true in web design, more than anywhere else that I’ve seen, erm, probably because the medium is that much newer, that, and it sprung out of interactivity, as opposed to, erm, books are about staid reading and advertising sprung from that; television and radio sit somewhere in the middle, but essentially it’s a written script, sometimes with pictures added. The web is a different medium altogether, it’s much more about doing, interacting and as more and more social media stuff springs up, you know, that’s more and more true and don’t get me started on the amount of companies that have got terrible facebook pages and so on. Erm, but again, it is that belief that it can be done by yourself; that’s not necessarily, you know, not true, you know, people can write their own copy, in the same way I can design a website – it might look like a dog’s dinner when I’m done, but I can do it. It depends, I can, I can start off, to turn it around, I know enough, I have enough of a little, you know, little amount of dangerous knowledge, to be able to put a blog up, design my own blog header in Photoshop and upload it and be able to update my blog day to day, but that doesn’t mean to say that I’m necessarily ready to design a site for a, you know, big multinational company that wants to sell direct from its website to multiple places around the world. The same goes with, erm, with copywriters. I think partly the reason that we get so little investment put in at the beginning of projects is that, erm, we’ve come to see creating a website as a visual thing, clients very often ask about how a site looks and they don’t care so much about how it works underneath, providing it works, which is the equivalent of asking a baker to bake an amazing cake and you get it delivered and it’s four tiers and it looks fantastic and it’s got these, you know, subtly crafted sugar-craft dancers on top and flowers trailing all around it and you cut it in half and it’s sawdust. And, you know, the copy very much does come under the sawdust category, we kind of get a bit left behind because everyone can write a bit and it doesn’t take that much, erm, knowledge to at least lay out something that makes sense, erm, I think it does kind of get neglected; erm, I often sort of say to people that, you know, that the copy is as much part of the navigation and the function of the site as anything you do with the menu buttons or whatever else, erm, and what we really need to do is to have designers… there are some designers who have the attitude that whatever happens after sign-off is no longer their concern, so the amount of sales that happen, whatever else, that’s not their problem, they’ve done their bit, they’ve designed a site, it works and it goes out. Whereas, really what we, what you’re then doing is designing for your client, erm, a very pretty picture-book of all their products, but that’s not necessarily a sales tool, so we need to look now much more at, erm, at websites as sales tools for companies and to people, you know.

Paul: So, I mean, where’s the line here, mind, because, umm, you know, I can imagine website owners sitting listening to this now going: "well, I mean she seems to be suggesting that we get a copywriter to write absolutely everything on our site", umm, but, you know, when you get into the realms of, you know, corporate blogs and things like that, I mean it’s going to cost a fortune, is it not, to get a copywriter involved at every stage. Where should a copywriter be involved, where shouldn’t they be involved, how do they fit in to the process?

Relly: Right, that’s a really good question. I don’t believe for one minute that you need to have, unless you have a site that need constant updating, you don’t need to have a content editor on-site all the time; in the same way that you don’t need to have a website designer on-site all the time, unless your website is constantly evolving. If you have a web team and your content changes a lot, then you might well want to think about getting a content editor in.

Paul: OK.

Relly: If you run an online shop and you change a few products a week, and you might introduce a few new products, er, via an email marketing, whatever, you might want to consider how much of that you want to give to a copywriter. If you’re updating a company blog and you’re sending, occasionally send out, erm, emails to old clients and invitations to new clients, you probably don’t need to get a copywriter, unless you feel it’s a better use of your time, and I think that it is the division a lot of the time, is that if you’re, if something really needs to sell, if it needs to make an impact, erm, I guess you wouldn’t find an advertising agency going ahead and taking on a billboard campaign, without getting a copywriter in, or their own in-house copywriter; it’s not going to be the managing director going: "well, we’ve got the artist to do this fantastic picture and we’ve bought all the advertising space, we’ve got a whole campaign rolled out, so I’d better think what we’re going to put on the, er, on the advert then." It just doesn’t work like that and that’s exactly, that should be exactly the same with your website. If you’re looking to launch a new campaign, if you’re selling something specifically, if it’s going to make a big difference to the way your company’s going to go, you want to get professionals in, and in this case it would probably be a copywriter would be the professional that you require. Erm, you know, you probably wouldn’t want to go and fiddle with your own plumbing, unless you have a very deep interest in DIY. It’s the same thing. Erm, but on the flipside of that, is that it’s, copywriting isn’t some arcane art that people can’t learn, in the same way that most people started learning web-design by sitting down in front of a computer, you know, bashing something out in Frontpage and going: "well, that kind of works", and then four years later cringing at what they’ve done. I think it’s very much the same for me, when I started writing copy and content, I was a radio producer and I have been responsible for some the worst chart hits in history (Paul laughs), you know, ascending to the chart because of the copy that I wrote, you know, to persuade people to buy the singles, you know, the competitions that we came up with, you know; it was my job, it paid my bills, buy I can’t say, you know, getting the cheeky girls to number 1 is my proudest achievement.

Paul: Oh dear.

Relly: And I was at least partly responsible for that (Paul laughs). I have to take my part in history on that one. Erm, you know, again it’s that thing, you know, anyone can go back and do it if they want to learn, you know, how to write copy. Just be aware that your first few attempts probably want someone to look through, but don’t be disheartened if you get to the end of it and think: "that’s not really what I wanted." You can always go halfway with a copywriter; I run workshops where I go into companies, talk to them about what their needs are, help them come up with a style guide, so they can say: ‘we’re going to write, it’s going from really simple stuff, like we’re going to have abbreviations and we’re not going to us the Oxford comma (Paul laughs), if that’s of any interest to any of you punctuation geeks out there, erm, right through to these are the sorts of people we’re addressing, these are there interests so we’re going to work these into this piece of copy, and, you know, I can then work with your staff members who will continue to write and then you’ve got, you know, a trained battalion of copywriters in-house ready to write things for you, on your behalf. And that’s often, you know, I often say to people that it’s not impossible to write copy, it just takes time to do it. As with anything else, it takes time to code a website well, properly and so that you can make a job out of it, it’s exactly the same with copywriting, but nothing stops you from building those skills up as you go.

Paul: That’s brilliant. That’s absolutely brilliant. It’s really good to hear a copywriter’s perspective on all of this stuff, because I don’t feel there’s enough really said about that part of the website and it’s been great to have you in on the show, Relly, and I really appreciate you taking the time.

Relly: Thank you very much.

Paul: So, thank you very much.

Relly: Thank you.

Thanks goes to Simon Douglas for transcribing this interview.

Listeners feedback:

Being a more efficient designer

Adam from Wales has written in with an interesting question:

Adam: With the economy tanking and client’s squeezing budget, can you give us any tips about being more efficient so we can turn around projects quicker.

It is a good question and one that got me thinking about creativity and its relationship with productivity. I also thought a lot about myself and how I work. All of this eventually led to…

10 Tips for Efficient Design

153. Harsh

Posted in Classic shows on February 18, 2009 by Paul Boag

On this week’s show: 10 harsh truths about your corporate website, Ryan reviews FreeAgent and Paul highlights the differences between print and the web.

Podcast: Download (20.3MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

Housekeeping

Consultancy Clinic

I wanted to followup on the consultancy clinic idea I mentioned a few episodes ago.

As you may remember I was toying with the idea of doing one-to-one chargeable skype calls for those who want my advice. I get so many people asking for help that I am unable to answer them all. After all, I have to work for a living!

A consultancy clinic would allow me to help people with their web strategy, while at the same time keeping the Headscape directors happy! Instead of having to commission a full blown consultancy project, you can just have a chat with me on a pay-as-you-go basis.

Anyway, the reason I bring it up again is because I have decided to go for the idea. I have launched a consultancy clinic website, where you can get more information and book an appointment.

However as well as wanting to pimp the service, I also wanted to mention the site itself. I decided to use this as a test case for the graded browser support I wrote about recently. I have therefore written a blog post outlining the approach I used on this site and how it worked in practice.

Even if you are not interested in the consultancy clinic, you maybe interested in how the site was built.

FreeAgent Discount

The guys over at FreeAgent are offering a 25% discount to all boagworld listeners until the end of Febuary. Just enter the code newfac when subscribing and the discount will apply for 6 months. Find a review of FreeAgent later in the show.

News and events

Feature fatigue

This week Gerry McGovern writes about what he calls the ‘Hidden power of content‘. In fact it is mainly a commentary on a Time Magazine column about buying habits.

You maybe wondering why I mention it here? Well for two reasons.

First, it is an interesting post for those of you who run ecommerce sites. It talks about how your product copy needs to focus on more than features, if you want to encourage long term satisfaction in your customers.

Second, he writes about the idea of feature fatigue. This is very relevant to all website owners and something I touched on recently in my post ‘5 options when website budgets get slashed‘.

We love to add more and more features to our websites, but that is not always the right decision. Users have become overwhelmed with features and are looking instead for simplicity and ease of use.

Read the post for yourself and ask how it applies to your site.

Striking font stacks

I am increasingly excited by typography on the web. Not because of the possibility of font embedding or techniques like sIFR. No, what really excites me is the work being done right now using font stacks.

The beauty of font stacks is that even if a user doesn’t have your preferred font, it can still display an alternative.

A lot of designers have been working hard to help us squeeze the most from the fonts installed on our machines. Huge amounts of research has been done on common fonts, as well as the best stack combinations. The trouble is this information is spread all over the web.

However, this week Paul discovered an excellent post that brings all of this research and best practice together. ‘Striking web sites with font stacks that inspire‘ is a great post that not only lists the latest thinking on font stacks, it also provides some incredibly inspiring examples of them in use.

If you are looking to become a great designer then understanding font stacks is essential. This post is an excellent place to start.

Tips for improving your HTML and content

Our final featured post this week is ‘5 Top Tips to Beautify Your HTML and Enrich Your Content‘ by Mike Brown over at Sitepoint.

HTML is a deceptive language. On the surface it is amazingly simple and anybody can be writing HTML in a few minutes. However, the longer you work with it the more you discover the variety of ways in which it can be implemented – some good, some bad.

This post shares some very basic best practice for working with HTML. Advice includes:

Using short URLs
Being consistent in your markup
Minimize uses of class and id attributes
Add title attributes and other metadata to enrich content
Use comments and whitespace to help readability and ease maintenance

All basic stuff but ideal for beginners and a useful reminder when the rest of us get sloppy.

Feature: 10 Harsh Truths About Corporate Websites

We all make mistakes running our websites. However the nature of those mistakes varies depending on the size of your website. As your site and organisation grow, the mistakes begin to change. This post addresses common mistakes in larger organisations. Read More

Listeners feedback:

Review: FreeAgent

Way back in show 131, Stanton and myself answered a listeners question about project management and invoicing applications, and I mentioned FreeAgent in my line up of apps that I thought you listeners would be interested in.

I’m now going to discuss the app in more detail, as I’ve been really getting into it and using it to it’s full potential.

FreeAgent is a fully featured online accounting tool wrapped in a sleek, comprehensive and easy to use interface. It’s aimed at Sole Traders, Partnerships and Limited Companys, they offer a free 30 day trial to get you started and after that there’s a price plan ranging from £15 – £25 a month at the time of recording this review.

I’m a simple code monkey and the thought of managing my taxes and invoices sends shivers down my spine. So I love that FreeAgent just takes me by the hand and guides me through the whole process.

Accounting is project based, which doesn’t suite everyone, but that really depends on your personal preference.

You simply start off by creating a client, then you assign a project to that client, you add timeslips to the project and using your hourly rate FreeAgent tells you what you’ve earned and what you owe the tax man and the whole thing is pretty much that simple.

As I’ve said it’s fully featured, you can create invoices, manage expenses and mileage, upload and analyze your bank statements, create a login for your accountant, view real time profit and loss reports the list goes on and the guys are constant adding new stuff.

Even if you decide you don’t like using FreeAgent after you’ve signed up you have the option to export your data at any time and try something else, so there’s no fear of loosing anything.

This week sees the launch of a redesign to freeagentcentral.com and the FreeAgent app itself and I’ve been one of th
e luck ones to get a sneak peek behind the scenes and I can tell you that the guys have been putting a lot of effort into improving the general interface based on user feedback. They’ve refreshed the colour scheme to make things easier on the eye for long term use and restructured some of the navigation to make moving from projects, time tracking and invoicing much more intuitive.

In my opinion it’s definitely worth a look so if you want to know more about FreeAgent head over to freeagentcentral.com, watch the 2 minutes video introduction and take the tour. They’ve even got a number of demo’s so you can go in and play with the app before you sign up. Even more incentive to have a look would be the 25% discount the guys are offering to all boagworld listeners, just enter the code ‘newfac‘ when signing up for a free trial and the discount will last for 6 months once you subscribe.

The difference between print and web

Jake Knight asks a brilliant question, that I am amazed we have yet to address on the show.

Jake Knight: What are 5 things you would want any print graphic designer to know first and foremost about designing for the web?

So it is a top 5 list you want? You have been reading too much Smashing Magazine! Okay here goes – The top 5 things every print designer needs to know about the web…

Let go of pixel control – One of the hardest things for print designers (and marketeers for that matter) to accept that you do not have pixel perfect control on the web. Different browsers, resolutions, monitors, operating systems and video cards all alter the way your site is displayed. Add to this the users ability to change font sizes, colours and browser dimensions, and it becomes impossible to have the control you get in print.

Don’t be afraid of the code – Many print designers shy away from coding HTML. They rely instead on a ‘techie’ to handle this side of things. That is a mistake. To really get to grips with the web you need to understand how it works. HTML/CCS/Javascript all shape and influence design (for better or worse). Also, it really isn’t that hard. HTML in particular is a very simple language.

Web Typography is not so bad – Okay so you haven’t got the freedom of print, but typography on the web can be just as creative. By using font stacks, line spacing, and kerning you can create truly gorgeous typography. Also when you just have to have a particular font, there are techniques such as image replacement and sIFR. If you are a typography bluff and want to discover what is possible, check out Richard Rutter’s blog.

It is an interactive environment – One of the most common mistakes of print designers is to focus on aesthetics and forget usability. The web is interactive and web design has more in common with signage design than brochure design. Your job is to help users complete tasks, not just to produce attractive design.

Your skills are transferable – Everybody goes on so much about the differences between print and the web. It is easy to get demoralised and conclude you could never make the switch. However, in reality most of your skills are transferable. Layout, colour theory, typography and composition are just some of things that are universal no matter what the medium.

So there you go Jake, 5 nuggets of advice for anybody considering moving into the web from print.

150. User Manipulation

Posted in Classic shows on January 28, 2009 by Paul Boag

On this week’s show: Liz Danzico talks about user research. Paul explains how to create an effective call to action and we discover how one button cost $300 million in sales

Download this show.

Launch our podcast player

News and events

The $300 Million Button

Our first news story is an incredibly tale from usability expert Jared Spool, which really shows the power of usability testing.

In the post he writes about a client who had a fairly standard checkout process on his website. The process began with a login form:

The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password.

It is the kind of form I have seen on many ecommerce websites. This feature, which had been designed to help repeat customers, created two distinct problems:

New users resented the idea of having to register. One user said: "I’m not here to enter into a relationship. I just want to buy something."
Repeat users rarely remembered their username or password. They wasted substantial time guessing, before eventually resorted to creating a new account. In fact after examining the database Jared discovered that 45% of all customers had multiple registrations. Some did go as far as clicking on the forgotten password link but of those only 25% went on to place an order.

In the end the site was redesigned, allowing the user to continue without registering. Within a year this created a $300 million increase in sales.

Of course $300 million is a meaningless figure in itself. It is the percentage increase that matters. In this case is was a 45% increase. That is a staggering number and one that really drives home the importance of testing with real users.

Read the ‘$300 million button’

The UK government and graded browser support

A couple of weeks ago I wrote about the importance of graded browser support. In my post I explained how we should not limit our support to the browsers we test and how it is unrealistic to push for identical support across all browsers.

This is an approach which has been adopted by the likes of Yahoo! and the BBC for some time, but which now also extends to public sector website in the UK.

According to The Web Standards Project the rules surrounding browser testing on public sector websites have been changed to better reflect best practice in graded browser support.

Changes include an emphasise on functionality over identical layout across browsers (paragraph 39):

You should check that the content, functionality and display all work as intended. There may be minor differences in the way that the website is displayed. The intent is not that it should be pixel perfect across browsers, but that a user of a particular browser does not notice anything appears wrong.

As well as support for progressive enhancement (paragraphs 17-18):

You should follow a progressive enhancement approach to developing websites to ensure that content is accessible to the widest possible number of browsers.

This is excellent news and certainly provides a great reference for UK designers and website owners looking to convince others of the importance of graded browser support.

Read the UK government guidance on browser testing

50 Illustrator tutorials

From development to design now, and a list of 50 tutorials that help you get your head around Adobe Illustrator.

The list is compiled by UK web designer Chris Spooner. He echoes my own experiences when he writes:

Adobe Illustrator can be a little tricky to get your head around, particularly after getting used to the workflow as applications such as Photoshop. The difference between layer use and creating and editing shapes can be especially strange at first hand.

I am a Photoshop man and I have found it very difficult to make the transition to a vector based world, so this list was particularly appealing to me.

Its a great list that you will definitely want to check out, if like me you have never got to grips with Illustrator before.

Read 50 illustrator tutorials every designer should see

A new approach to PNG Support

Finally today I would like to draw your attention to a new technique that has been developed by Drew Diller for using PNG transparency in IE6.

Unlike previous techniques this one allows you to use PNGs as background images instead of just as IMG tags. This opens up a world of possibilities and overcomes one of the most annoying limitations of IE6.

This minor miracle is achieved not by using AlphaImageLoader as has been done in the past, but with VML.

Implementation seems fairly straightforward and involves adding a Javascript library to your page. Because this is for IE6 only you can embed the code within a conditional comment. This means other browsers will not even download it.

Although I have yet to use this approach myself, I have high hopes that this will finally solve the IE6/PNG barrier.

Download DD_belatedPNG now.

Interview: Liz Danzico on User Research

Paul: So joining me today for our little interview is Liz Danzico. Liz, why don’t you start off by introducing yourself a little bit. Telling us a bit about yourself and your background.

Liz: Sure. Um, I am a user experience consultant, I am here in New York City, I have been developing web sites and user experiences online for about 12 years now. Um, I do a lot of work with Happy Cog Studios here in New York, with Jeffrey Zeldman and Jason Santa Maria. Um, I’m also chair of the new MFA interactions design program.

Paul: Okay.

Liz: At the School of Visual Arts in New York.

Paul: Excellent. I mean, so, to say that you’re an expert in user experience would be a slight understatement then, Liz.

Liz: Well I wouldn’t go that far.

Paul: You’d be too modest, obviously, to say that. Okay, so we got Liz on the show, I met Liz when I went to Future of Web Design and we got talking. Um, she’s got some fascinating insights into the whole area of user research, and usability generally, so I thought let’s get her on the show and let’s maybe, you know, try and cover things from, from the very basic level, a kind of introduction to this concept of user research. Um, so, perhaps a good place to start, if you’re okay Liz, um, would be, how would you go about defining the area of user research? What would you include, what would you exclude from that?

Liz: Right. So … user research, even today, we’ve been doing user research on the web since, uh, the very beginning, so it’s a very old concept but it’s still fairly controversial. So the basic concept is it tells you what really happens when real people interact with your product or service. So, there are no real rules about what it includes and what it doesn’t [inaudible]. You can basically speculate about what your users want, or you can find that out, um, you know? And uh, and the, uh, the latter is probably a more useful approach for you to take than speculation. But with either one, thinking about your audience is useful no matter what. And so, so there are no real rules, now um, when you disconnect thinking about your audience from your business objectives, and you start getting, you know, very excited about behaviors that they’re doing that are sort of disconnected from the real mission that you’re trying to sort of accomplish, then it becomes, um, a bit murky, and confusing. But thinking about your audience is, just in general, is an extremely useful approach.

Paul: Okay. I mean one of the things that, that, um, I’ve heard said before by, particularly cynical clients I have to say, but I’ve heard it said before, you know, ultimately user research, and all of this kind of stuff feels in some ways like, um, just another way for web designers to suck a bit of extra money out of us, you know that fundamentally how, I know my audience already, is the kind of attitude that many web site owners have, so why do you see it as an important part of the process?

Liz: Well uh, you know, as we’ve been seeing design flaws often translate to lost business opportunities, you know, usability is becoming more important than ever as the number of web sites and products is, you know, increasing more and more every day. So, we design these products and services, and we are at the same time users of them, but there’s no way that we can really tell what are users, um, might want. And the best way to, you know, usability research doesn’t cost a lot of money, so, the best way that you can help your clients kind of understand that you need to do usability research in some way is to let them know that usability research is important and it doesn’t need to, um, suck up a lot of time or money in the, in the process. So there’s a great fantastic book by Steve Krug, called Don’t Make Me Think, which I’m sure you’re probably well aware of.

Paul: Uh huh.

Liz: And in one of the chapters towards the end, he has a chapter called "Usability Research on a Shoestring", or it’s probably better titled, which talks of this approach of going out into the hallway and kind of grabbing people, and just sitting them down, and putting them in front of your product or service, and getting some feedback. So getting some feedback from people, no matter who they are, is better than getting none at all. And so, I think starting there with clients, instead of the, you know, $100,000 user research project that’s going to take you across 8 markets, you know, in the United States, the UK, and Asia, then, is going to be a much better approach than kind of intimidating them with the very extensive projects.

Paul: Mmm, I mean, when it, the kind of one scenario that I’ve come across before, um, is where we’ve come across with clients that say "Well we’ve already done user research, we already know our audience ’cause we’ve got somebody in to do this or that." Is there a difference between user research that’s been done primarily with an offline audience, and those with, you know, when you’re interacting with people online? Is there a difference in the kind of results and information that you’re after, and even the techniques, maybe, that you use?

Liz: So, they are probably, when they say that they’ve done user research, they’re probably talking about focus groups. I would venture to guess that when they talk about that they’re probably talking about either focus groups or surveys of some kind and those are not, well, I wouldn’t say that they are, those are bad things to do, but those are not the kinds of user research techniques that are going to give them feedback about their product’s usability. Those kinds of techniques are going to give them good information about, um, certain kinds of things but they are not going to give them information about whether or not people can use the product or service that they’re looking at. So, you want to find out exactly what kinds of user research they’ve conducted. If they say the words "focus group" then you know you want to move them towards something that is a one on one kind of interview. Focus groups tend to be conducted with groups of people, as the name might suggest, um, and when groups of people get together to talk about, you know, they put forth a question for these people, and when they, you know, groups of people get together to talk about the question they might influence one another in their answers, they’re typically aren’t talking about an interface, they’re typically talking about ideas, so you’re not getting good feedback, like in a one on one kind of scenario. So you want to sort of guide them to a more individual, one on one kind of experience. Surveys, on the other hand, are good, but they don’t get that kind of personal experience with a moderator, sitting with an individual, kind of looking at an interface in a kind of task-based scenario.

Paul: Okay, yeah that makes a lot of sense. I mean, let’s then talk about some of the techniques that can be used to better understand individuals, or how those individuals will interact with your product. What different kind of techniques do you use? I mean, there’s the kind of very basic usability session, but do you do, or are there other things above and beyond that, that you do?

Liz: Right. Well, the sort of big secret is that, there are names and there are certainly techniques, but the big secret is there are really no sort of techniques beyond knowing who your users are, kind of documenting what you’re seeing, and then kind of analyzing/prioritizing the results of what you see. So, you can, I’m gonna tell you a number of techniques that we can go through, but if those basic sort of constructs are there, then you’ve done sort of good user research. Now, that being said, the techniques that you can do are usability testing, usability testing traditionally has taken place in a user lab where a moderator is sitting with an individual looking at a screen, or a product, or a sketch of an interface and going through questions in sort of a task-based way, asking people "Show me how you would search for x" or "Show me how you would check out," or, you know, and seeing, measuring the success or failure of that kind of task. The clients are typically sitting behind a one-way, a one-way glass, or mirror, and observing these kinds of things. People have been not so thrilled about this technique recently, saying that it kind of, um, is not, it doesn’t produce natural reactions from users, but that is one kind of technique. There is, uh, kind of creating personas, and using personas, user personas which are an archetype of your site or product’s users, and getting everyone involved in activities around those personas, whether that be using those personas as your talking through features around, you know, a brainstorming session, and getting people to sort of role-play those personas. That’s another user research method. There are, there’s sort of the ethnography kind of take, where a lot of people have been doing kind of in-home interviews and observations recently. Ethnography, cultural anthropologists and people who have been doing traditional ethnography have been watching closely the design research that we’ve been doing recently, and wondering if we’ve been doing it right and so on, but ethnography, in that sort of observing users in their "natural environment", has been I would say a more successful way recently of watching people use products and services, um, so I would say that those three things, usability testing in a lab, sort of using personas and scenarios, and ethnography or kind of going out into the field and watching users, whether they’re in their homes or their offices, are the three kind of key ways to gather user research with users. The fourth way that I’ll mention, and we can talk about this in a little bit, is not with users directly, but it is certainly user research that’s available more and more now, and that is data on sort of analytics, which you can gather from Google Analytics, Shaun Inman’s Mint, these kinds of things. Watching site data and user behavior through site analytics is another form of user research that gives you, you know, some information, and you can watch these traffic patterns on your site. It doesn’t answer the question "Why?" but it does show you some evidence as to how users are behaving on your site.

Paul: It’s quite interesting that you bring up eth, ethnography, whoa I can’t even speak today, because, that’s of interest to me, because that’s an area that we’re beginning to explore a little bit more, and have kind of discovered the same thing, that there’s a real value of going into you know, somebody’s home, seeing the environment that they access the internet on, you know, do they have kids under their feet? You know, where they access their PC, can they sit comfortably at it? All those kinds of things. Um, I guess it’s also an advantage you don’t have to hire an expensive usability lab and all of the rest of it. But I have to confess, I’m a little bit new at it, so talk me through maybe some of the things, you know, how does it differ from a usability test that you would do in a usability lab, other than that you’re in a different environment?

Liz: Well, uh, it depends. It doesn’t have to differ at all — it depends on the goals of the test. I would say that you could construct a test that’s exactly like one that you’d conduct in a lab, it just happens in someone’s home or office, or in a different environment. But as you said, you get the more realistic interruptions, and that kind of thing, and are they going to be able to complete this task given the natural kind of occurrences of their day. And that, depending on what kind of test you are constructing, that’s either going to inform your results or not. If you are doing task-based testing, so I could maybe talk about the different kind of usability testing that you could do.

Paul: Yeah, that’s good.

Liz: Yeah so there are different ways that you could conduct a usability test. Um, traditionally there is task-based testing, where you set up pre-written questions, before you get to the test, that are based on the goals of the testing. So, if we were testing a photo site, we would test whether or not users could upload photos, could they task photos, you know, those kinds of things. So we would write those kinds of questions up beforehand, and then ask those questions during the test. Um, that’s one kind of test. You could do that in a lab, and you can do that same test in someone’s home. In a lab there would not be the children screaming, and the phone ringing, and that kind of thing, or, if someone say were uploading a photo, you would never be able to tell if sort of, timing out, would be an issue, or if anything with time or space or motion would be an issue. If those kinds of things are a goal of your test, then you might want to think about doing it in real time, in someone’s home environment. Another type of testing is something that, I’ll say it was first coined by Mark Hurst, who is a user experience consultant at Good Experience, I think he coined it, it’s called "Listening Labs". Listening labs are, I’ll call them experimental, but they’ve probably been going on long before I was aware of them, where people are designing usability tests in real time. So in other words, you go into the test with absolutely nothing written down, and you sit down with users, and based on your initial interview with them, you hear who they are, and after understanding a little bit about how they use photos in general, say, then you kind of write the questions on the fly, and then sort of develop a test around who that person is and their behavior, with your product, or product type.

Paul: Which I guess, makes people more engaged with the test, because it’s about what they specifically interested in. Is that the idea?

Liz: Exactly. So it’s a more natural way of doing the test. That’s the idea. That kind of thing you could do either way, and probably is even more rewarding if you’re doing it in someone’s natural environment. And then the third type of test is sort of a web, a web wide kind of test, where you have people just surf the internet, as it were, and uh, and just have them think out loud, and that kind of thing is also, I’ve found, more rewarding and fruitful in someone’s home environment, because they have their bookmarks there, and they have their post-it notes. Whereas you put them in a sort of artificial setting and they don’t have those things around them. So, if you, it kind of just depends on the type of testing that you’re doing. If you’re doing just the first kind I talked about, just task analysis and having people go through that kind of task-based testing, doing it in a traditional usability lab is great, you know, I mean you really do get the answers that you’re looking for, and it just depends on your goals.

Paul: I mean, it’s interesting, going back to Steve Krug’s book that you mentioned, I mean he talks about, I guess his agenda in that book is to get people to do testing who perhaps aren’t previously, and so, you know, he really downplays the demographic of who it is that you test, and that it’s more important that you test than that you get the right people, you know and all of that kind of thing. Um, but when you’re going into somebody’s home, and interacting with them, I’m guessing it’s more important to get the right demographic? Is that right?

Liz: Yeah, I mean one of the, um, I think it’s always important to, it’s always important to get the right demographic. Um, but, well I would say that there is a hierarchy of common mistakes around usability testing that kind of has a trickle down effect. You know, the number one mistake is not conducting any research at all, um, and conducting research on the wrong audience is kind of further down the list. So, you know, yeah if you’re doing research on the wrong audience, it’s not going to affect, whether you do it in a lab or you’re doing it at your desk, or at the water cooler, or at home, it’s going to affect your results and your analysis, you know, no matter where it takes place. So, you know, I think that the drawback is you are going to waste more time going out to that person’s time going out to that person’s time, so it’s going to be a drawback for you, but I don’t think that, it doesn’t matter really where it happens, because if you’re testing on the wrong audience, you’re testing on the wrong audience. Um, you’re probably going to get more information out of that experience if you’re in someone’s home, than if you’re not, so if you’re going to test on the wrong audience, do it in someone’s home, because you’re going to, it’s a richer experience, you’re going to get more information out of it than if you’re just testing in a lab.

Paul: No that makes perfect sense, I kind of see that. No, it’s difficult, isn’t it? Because, uh, obviously finding the right demographic of people, and picking the right people to test on is tricky, you know, it’s a more difficult thing and it can be time consuming. So have you got any advice about that? What really matters here? You know, for example, if you’re designing a web site for an over-60s audience, you know, are you, do you want to concentrate on the age aspect of that? Or the technical literacy aspect of that? You know, is it okay to have somebody younger if they’re not as good with the internet, if your audience is, do you, I’m kind of not wording this very well, but you get the idea — what’s important when you’re trying to match demographics?

Liz: Um, well, it’s very specific to your clients. Developing a, so, whenever you are trying to match demographics, you want to work with your clients to develop what’s called a screener, and a screener is a, I would say, whether you’re trying to develop a pretty rigorous recruiting demographic with a professional recruiter, to say, recruit 300 people for an extensive study, or whether you’re going to go out into the hallway and grab some people, or whether you’re going to recruit from something called Craigslist, which a lot of people are familiar with, um, which a lot of people do, I would say developing a screener which kind of outlines your demographic is a really good idea.

Paul: And what kind of things would that include? Sorry I interrupted you.

Liz: Yeah, what a screener is, it kind of goes through, it’s a questionnaire that outlines a number of questions that you would ask a potential recruit, that says, if this person can answer a particular question we should keep them in or out, so it’s actually a really good exercise to go through that allows you to kind of think through the type of demographic that you would have. So that doesn’t answer your question in any way.

Paul: It’s very interesting, though. Can you give me an example? Sorry, I’m interested in this screener thing, cause I haven’t come across it before. Can you give me an example of the type of questions? I mean obviously they’re going to be specific to the individual client, all the rest of it, but what kind of questions?

Liz: Um, what kind of questions? So, let’s see, would this person, so, let’s see, has this person, I mean typical questions could be around financial demographics, age demographics, you know the sort of typical things. But let me think of some more interesting things. So, is this person a full-time student? Has this person been fired from a job in the last 6 months? Has this person participated in usability research in the last 6 months? Those types of things, so if the person answers yes or no, then they’re not a good candidate. But there are other kinds of things you could put into that screener that would be more specific to the project.

Paul: So could it include something like is this person aware of a certain brand, because you want to associate with that brand?

Liz: Absolutely, so does this person drink Coca-Cola on a regular basis, yes or no? That kind of thing. But I’ve found that the screener, because the clients that you work with are often kind of speaking in those terms about their audience, the screener is a really good way to kind of help them understand how you’re recruiting audiences, and a good tool to kind of work together with them to narrow down who you want to be in the target audience for your testing, or your research in general. So, that said, how do you develop a good kind of set of participants for a research study for, say, a product for people over 60? Um, what’s most important, you know it depends on, and I know I hate to say that it depends, but you’re going to develop a goal for the testing, right? And the goal might be about usability, the goal might be about navigation, it might be about design, it might be about, it’s going to have, you have to first identify the goal, and depending on what that goal is, then you can identify the audience. So, the audience, you know the goal might have nothing to do with age, although the product has to do with age. So you can kind of strip away, you can pull apart the product from the goal of the testing a bit, and sort of just focus on the goal of the test. That’s why developing goals for user research is so critical, um, because often times you can separate those and therefore develop a better set of participants for that user research.

Paul: Mmm, that’s really good. I think what we’ve done here, is, a lot of people that listen to this show probably have a basic understanding of user testing. Maybe they’ve done some basic user testing before, or maybe they’ve even written a persona before, but I think what we’ve done, or what you’ve done, is push people a little bit further to kind of consider it in a little bit more detail what they’re doing in order to kind of refine the results that they’re getting back, and that’s really, really great. I mean, if somebody has just kind of done the very basics, you know, they’ve grabbed some people, they’ve done some user testing, maybe in their own office in front of their own PC, and they’ve got a few people in, um maybe they’ve created a couple of personas, what’s the next step for them? What should they be pushing? Is it through this screener? Is that the number one thing they should be doing? Is the goals more important? Is getting a better demographic more important? What’s the kind of next step for them?

Liz: Mmm, that’s a good question. I think that one of the most, well, doing the research is really key. Analyzing the research and connecting the research to the next iteration of a design is also key. We haven’t talked about that at all.

Paul: No, we haven’t, we ought to.

Liz: It’s often a grey area, um, you know there are lots of reports that are produced, you know, diagrams and things, but there’s a lot of kind of intuition that happens between sort of translating the research and putting that research, feeding that research back into the design. There are hunches, leaps of faith, um, you know kind of between that analysis and design. I mean there are clear cut recommendations that one can make, but then there are a lot of more grey areas. So I would say that, I still think, even though I mentioned we’ve been doing this kind of research for at least, you know, more than a decade online, and you know quite a long time offline, I think we still need to get better at the rigor at which we translate those recommendations and findings. So that’s one place I think we need to focus. Um, in terms of the actual research itself, uh, you know, there’s something, I think there are other sorts of techniques. I’m interested in these kinds of emergent, I would say emergent techniques like the listening labs, um, you know where the kinds of things that we’re looking at today with kind of mobile research, where people are, we need to be looking at how people are using our sites not just in the browser on their desktop but, you know, in the browser on their phone, and how their context is changing constantly and how we need to sort of look at that adaptation. So how do we develop tests that are more emergent and can be a bit more flexible, rIght? So I think there’s something interesting about that listening lab, where we kind of understand the person, and then develop the questions around a person and how they use a product, rather than having a pre-written set of questions. So, something that’s more emergent, I think that’s an area that’s interesting to kind of look at. Then, uh, ethnography, really understanding, goes right along with this sort of, emergent, as you said you’ve been getting more excited about ethnography as well, so, thinking more about kind of fine-tuning our approach to people’s own context, whether that be ethnography, going into their homes, their offices, you know, where people are using our products, whether that be on the street, in the hallway, wherever it is, but really understanding how to find people where they’re using our products and test them or do some research around that, I think that’s really exciting and a really interesting opportunity. Um so that, that’s the next step for us, uh, and I think that the way that people are designing tests and doing some usability testing now, is, you know, is good, I don’t think that there’s a big next step that we can all take together, but I think these are three areas that I think as a discipline that we’re going to see people moving forward together in.

Paul: Excellent. Let’s finish off, then, with a kind of where people should go if, you know, they’ve been excited by this interview, they want to learn a little bit more, um, about user research and user testing. You’ve mentioned Steve Krug’s book. What other resources are out there that people should be looking towards?

Liz: Well, let’s see. You know, I was thinking about, I was thinking about that and there are physical places that people can go, but they’re all in San Francisco in the United States, so that’s not going to help anyone. There is, you know, A List Apart has a User Science topic that often publishes user research related methods-like articles, there’s always BoxesandArrows.com which publishes user research related topics, um, Adaptive Path, which is a user research consultancy, or at least one aspect of what they do, they have published a number of articles but they also do events. A lot of events are in the United States right now, but they may have international events as well. But they do kind of give away a lot of their content. Um, and then last but not least, there’s a new-ish publisher called Rosenfeld Media, and the books that Rosenfeld Media publishes are about methods in user experience and, one recently in web form design, was about the usability of web form design by Luke Wroblewski (called Web Form Design: Filling in the Blanks).

Paul: Yeah, I saw that. That looked very good, I have to say.

Liz: Yeah, so that’s something to keep an eye on as well.

Paul: Excellent. Thank you so much, Liz, that was absolutely superb. And I will be fascinated to get you back on the show in the future to talk more depth about some of these issues. Thank you very much for your time, Liz.

Liz: My pleasure.

Thanks goes to Jason Rhodes for transcribing this interview.

Listeners feedback:

Every website should have a call to action, a response you want users to complete. But how do you encourage users to act? How do you create an effective call to action. Read More

Snape and Keith, separated at birth?

Video: Introduction to WCAG 2

Posted in Accessibility on January 26, 2009 by Paul Boag

I recently gave an internal presentation at Headscape about WCAG 2. A number of people expressed an interest in seeing it so I made a point to record it.

At the end the presentation I references a stripped down version of the guidelines found here.

I also refer to a quick reference guide to WCAG 2 that can be found here.

Apologises

Apologises for the poor audio quality of this video. Unfortunately the decision to record the presentation was made at the last minute and so we didn’t have a proper mic setup arranged. You can also tell it is not quite as slick as my normal presentations :)

~~I would also like to apologise for the lack of transcript of this video.~~ Again, it was not my initial intention to put this video online as this was an internal presentation containing my initial thoughts on WCAG 2. I am still learning a lot about the new guidelines and will publish a more considered article when I have a better understanding of the subject.

Feedback

On that subject, I would be interested to hear your feedback on the thoughts I present. Do you agree with my interpretation of the new guidelines? Have I misunderstood anything? Are there other elements I should have addressed? Your thoughts would be appreciated in the comments.

Update: We now have a transcript!

Thanks go to Anna Debenham who braved the horrendous audio to transcribe the presentation. If you cannot face the video we do at least now have a written version!

Paul: Ok, this has worked out a little bit weird because the idea initially with this presentation was that it was really about bringing us up to speed with WCAG2 now that WCAG2 has been released. But I made the mistake of mentioning it online and several people said “ooh, can you record that?” so now it’s a little bit of both, a little bit of a presentation to you guys and a little bit of a presentation that will go on the web.

Paul: So as you guys probably know, WCAG2 has now been released, and as accessibility is a big part of what we deliver and we talk a lot about accessibility, we need to be up to speed on it and we need to know what we’re doing. Obviously accessibility has become such a part of what we do day in and day out that we don’t necessarily think too much about it, it’s almost an intrinsic part of what we do, but with changes to WCAG2, or with the arrival of WCAG2, there have been differences, changes, things that have altered, so I want to make sure that everybody is up to speed with it. Feel free to butt in with questions, that’s absolutely fine.

Audience: Will the video be able to see the screen?

Paul: The video will be able to see the screen. Ok, so, WCAG2. Basically, WCAG1 came out in 1999 which is a good old time ago, in Internet terms that’s like forever, and there was a real need to make some changes and improve WCAG1. Let me just pop back and just explain.

The Journey to WCAG2

Paul: So, yeah, like I said, WCAG1 came out in 1999, it quickly dated as technology evolved, and some of the guidelines actually became harmful in a way. So you guys know that for example, we don’t always take note of what they say about Access Keys, we don’t always take note of what they say about “make sure you put text in an empty form field” and things like that. And WCAG1 was very much built with HTML in mind, and obviously the web is a lot broader than that and there are a lot more formats about. But unfortunately development of WCAG2 was very slow, and also fraught with controversy. I mean, famously with Joe Clarke who is an accessibility expert wrote on A List Apart “to hell with WCAG2″ because it basically had become a bit of a joke, because it was very generic; they were trying to write a set of guidelines that really made no effort to mention specific technology because they didn’t want it to date like WCAG1, but the result is it became unreadable and nobody could understand it.

WCAG2 Reborn

Paul: But, things did change. Major changes were made to the WCAG2 draft and things did improve dramatically. They really listened to the community, and the language in it now is much clearer. So what I want to do now is talk a little bit through what WCAG2 includes and what it doesn’t, and how we’re then going to go about implementing it and how it affects us.

Principles

Paul: Ok, so let’s look at the structure of WCAG2. Basically WCAG2 has 3 tiers to it that you need to know about. Tier number 1 is the idea of Principles. So this is kind of the most generic of the tiers, you know, it’s really kind of aimed at the kind of things you would tell a board of directors that doesn’t really understand anything technical, that doesn’t really understand accessibility at all. And there are 4 principles which are the foundations of web accessibility and these principles I’ll come onto a little bit later.

Guidelines

Paul: Underneath each of those principles are Guidelines. So, within each principle there are 3 or 4 guidelines or a number of guidelines that is different for each principle. But there are a total of 12 guidelines, and these are goals that you should be working towards in order to make your content more accessible to users.

Success Criteria

Paul: Under each guideline, there are Success Criteria. So now we’ve really hit the nitty-gritty, these are kind of specific, measurable goals that you’ve got to achieve. And this is how you judge whether your site is WCAG2 compliant, if you like. So, this is the really important level if that makes sense, but it’s organised within this hierarchy of guidelines and principles.

Techniques

Paul: Now, actually, there is kind of a 4th tier as well which is techniques. So you’re trying to, maybe as designers, you’re trying to conform to the Success Criteria, well there’s a whole load of different ways and different techniques that you can do that and you could read about those, and you could make up your own techniques if you wanted to, but there are some laid down that can help you get going.

Working with WCAG2

Paul: So those are the 3 levels that WCAG2 is built around. Now let’s dive into those a little bit. I had to think about how much detail I want to go into in this room. Obviously we don’t want to go into every technique that you could possibly apply and we don’t even want to go into necessarily every success criteria. That’s really for you guys to look through afterwards. What we are going to do is look at those guidelines and those principles, and hopefully help you to understand where WCAG2 stands over stuff.

Perceivable

Paul: Ok, so, the first… heh, totally illegible text, isn’t that great. Very accessible!

Audience: (laughter)

Paul: So the number 1 principle is Perceivable, and that’s 1 of your 4 principles that you’ve got here. And perceivable is basically talking about “information and user interface components must be presentable to users in ways that they can perceive”

Audience: (laughter)

Paul: Unlike that! (points to presentation)

Audience: (laughter) Is the rest of the presentation like this?

Paul: Yes.

Audience: (more laughter)

Paul: You actually don’t need to read this anyway which is very useful. So, Perceivable is basically about “can you see it?”, that is it as far as the principle is concerned, and the answer is “no you can’t”. But perceivable then breaks down into a series of guidelines. So, let’s have a look at what these guidelines are. So basically, perceivable is broken down into 4 guidelines. And if we talk through each of those it should give you an idea.

Text Alternatives

Paul: The first one is text alternatives. So this is stuff we already know. “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” So this really applies to things like video, audio, forms that you create, and interestingly CAPTCHA is particularly mentioned here. And that is a particular accessibility problem that hasn’t been particularly well solved I don’t think.

Time Based Media

Paul: The next way that Perceivable works itself out is in time-based media. What we’re talking about here is that you need to provide an alternative for anything that is time-based. So here we’re talking about captions for video, sign-language maybe, media alternatives, but it also applies to live and pre-recorded video. So if you’re streaming stuff, then you need to think about this as well as with stuff that’s pre-recorded. Now, it does take into account the difference between “crap, how are we going to make streaming video accessible?”. If you read into the guidelines it does give some good advice there. So that’s not quite as scary as it first sounds.

Adaptable

Paul: Anything that we produce needs to be adaptable. In other words, content can be presented in different ways. For example, a simpler layout maybe for people with cognitive disabilities for example. Really, this boils down to things like using semantic markup, meaningful order in your HTML so that if the CSS is stripped away it still makes sense in the order that it is presented, and not relying on colour and other sensory elements to convey information.

Distinguishable

Paul: And then finally it’s got to be distinguishable. So it’s about making it easier for users to see and hear content including separating foreground from background and that kind of stuff. So we’re talking here about contrast, colour, and control over things like audio and video, that kind of stuff. So that’s where we’re at with perceivable.

Operable

Paul: Let’s move onto the next principle which is Operable. So, Operable is about user interface components and navigation, and making them easy to use so that somebody can use them whatever disability they may have. So this again breaks down into 4 different guidelines, the most obvious of which is Keyboard Access. So everything that we produce has to be accessible via a keyboard. So, for example, the Flash video that we’re currently creating for the Wiltshire Farm Foods home page needs to be keyboard operated, alright? Which I bet it isn’t at the moment! And to be fair, it’s part of production, I’m sure they’d put that in at the end if I hadn’t reminded them. That existed under WCAG1, so there’s nothing different there. So everything needs to be keyboard accessible.

Enough Time

Paul: You also need to provide enough time for people to take in the information that they’re being presented with. So giving the ability to pause, stop and control time based material is really important as well.

Seizures

Paul: You’ve got to take into account seizures, some people can have seizures triggered by animation and that kind of thing, so there are various limits that the guidelines lay down about flashing objects and stuff like that.

Navigable

Paul: And then finally it’s got to be navigable. So this includes things like skipping content, having descriptive page titles, tab order, links that make sense out of context, lot’s of headings, that kind of stuff. Is this all making sense?

Audience: Yes, apart from time-based media, I don’t understand that.

Paul: Time-based media, we’re talking about video and audio. So let’s say you had… one of our podcasts. So, there are certain things we need to ensure. One is that it is operable, in other words, a user can pause the podcast if we get annoying, or they want time to take in the information that we’ve said, but the other thing is that we also need to provide an alternative way of them getting it which is why we provide the show notes that we do and the transcripts and stuff like that.

Audience: Ok, well that kind of fits under Text Alternatives and giving it control so it’s under Operable… I just don’t get where it is under perceivable, as a perceivable thing, it has to be perceivable?

Paul: Yeah, basically.

Audience: Video, audio… all has to be perceivable then?

Paul: Yes. Some of these principles and certainly some of the guidelines do overlap to some degree. But when you draw down to the Success Criteria level, of how you actually apply these things, then there are more specific techniques. I think what they did is create a load of success criteria, and then kind of chunked them together in meaningful groups, but sometimes they’re not so meaningful. But it is a vast improvement on WCAG1 as far as being able to understand it.

Understandable

Paul: Ok, talking of understanding it, our next one is Understandable. So this is the next one of our 4 top-level principles, so everything you produce has to be understandable. So what does that mean? Well that results in 3 guidelines. It has to be Readable, Predictable and has to be able to provide Input Assistance. So how does that work itself out in practice?

Readable

Paul: With Readable, we’re talking about making content readable, text content mainly. So this works out in things like setting the language in your HTML, you know, setting what the language is in the header, avoiding using jargon, finally we’ve got a decent reason to go back to clients and say, you know, “you can’t use that kind of language, nobody understands it!”. Also things like abbreviations need to be explained, and also reading level as well, and that’s something I really want to get through to a lot of our clients because a lot of our clients, especially the public sector clients that we have, have this attitude of “well of course, people that look at our site are of post-graduate degree people, and they have excellent reading level”, but that doesn’t take into account things like people that speak English as a 2nd language, who can be very intelligent but not particularly good at reading, also people with Dyslexia can be incredibly intelligent but not particularly good at reading. So reading level is an important aspect of it.

Predictable

Paul: For it to be understandable it also needs to be predictable. So with this we’re talking about things like consistent navigation, and no uninitiated changes. And this is a particularly important one in our world of AJAX and JavaScript and all this cool stuff that we’re doing where we can often trigger events without asking the user’s permission first. When I say “asking for permission” I mean they haven’t clicked on link or they’ve not initiated it in any way. Users need to initiate these actions… and no pop-up windows without them clicking first to trigger a pop-up and being aware of what’s going to happen. It’s all about making it understandable and making them aware of what’s going on.

Input Assistance

Paul: The last guideline under Understandable is Input Assistance. So this is going into the realms of when we do forms, how do we handle errors, what kind of feedback do we give to the user, what labels – are things clearly marked up as labels, are they descriptive of the fields and the forms and that kind of stuff. We’re also talking about help, what additional help are you provided in terms of tool tip and contextual help and anything else that you care to mention. So that’s Understandable, that’s what that principle is driving at.

Robust

Paul: The final principle is Robust. “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.” In other words, what we build has to work on everything.

Audience: What about AJAX?

Paul: I think that’s where we get into the realm of progressive enhancement, that it’s fine to use something like AJAX as long as, if the AJAX is taken away, it still operates. Or, you provide an alternative version, the guidelines do actually accept that you can do alternative versions of something. So Gmail is a good example of that, Gmail, it actually doesn’t work if AJAX is turned off but they do provide an HTML only version of it which does the same thing. I’m not a great fan of that because it’s twice as much stuff to maintain, and one version become out of date and all the rest of it. My preferred technique is to build it so it works normally, and then to layer on the JavaScript and AJAX on top of it to provide enhanced functionality, which is what we guys have been doing pretty much all along and we need to continue in doing that.

Compatibility

Paul: So that Robust principle actually only comes down to one guideline which is Compatible, so that’s about maximising compatibility with current… listen to the wording of this… Maximise compatibility with current and future user agents, so we also need to be looking forward as well and predicting the future which is always good. But that’s where it comes back to using solid, good code that is’nt reliant on lots of hacks in order to get it to work, and it goes back to the conversation that we’ve been having recently about browser testing, upgraded browser support and that kind of stuff as well. So Compatibility and Robustness is the last principle. The other thing I should have mentioned with Compatibility is this also includes things like validation, making sure that your code validates, and just generally other markup type stuff.

What, no AAA, AA, A?

Paul: Ok, another thing that might have occurred to you is AAA, AA, A.. Priority 1, 2 and 3. Priority 1, 2 and 3 are still there, there are still those levels of conformance, but I get a real sense from the tome of this document, and this is just my personal opinion, people watching this video who know a lot more about accessibility might jump all over me on this, but my sense is that they were playing down those 3 levels of conformance. To be honest, I think I’m pretty keen on that. I don’t think those levels of conformance have done a lot of good generally speaking, because I think it’s kind of developed a checkbox mentality amongst some of our clients “We must be AA compliant” or “We must be A compliant” and they’re not actually thinking about the needs of the users, they’re just ticking the boxes so they meet some quota that has been established somewhere. One of the things that’s quite interesting, and I’m not sure if it’s a change from WCAG1 or not, I couldn’t find the reference in WCAG1 but again someone will correct me no doubt, but conformance in WCAG2 seems to be on a page-by-page basis. So you’re no longer in a situation where you want to claim conformance so you’re claiming conformance for an entire site, but you’re rather conforming on a page-by-page basis. And this allows you to basically pick-and-mix the level of conformance you want to reach on any particular page which is much, much more sensible because there are some elements where you might be building a particularly complex application that really isn’t going to manage being AAA compliant, whereas the rest of the site is AAA, and this one page isn’t. So it’s giving you the ability to mix and match. In fact, in the guidelines it says “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. In other words they’re saying it’s just not possible to be AAA in some situations, so don’t even try.

Start With Basics

Paul: So how does this relate to what we do on a day-to-day basis? Well, I think the language we use with our clients pretty much will remain consistent with how it was with WCAG1 which is that we need to start of by encouraging all our clients to start with the absolute basics. A lot of people are put off of accessibility because of the enormity of it, of all the things they’ve got to do. And even to be single A compliant there is quite a lot to do if you’ve got a site that has never been built to be single A compliant before. So I think our attitude has got to be that you work towards this over time, it is an ongoing process, you don’t need to do it all in one big go and that you need to start with the absolute basics, the quick wins, the stuff… you know, it’s the 80/20 rule, 80% of the problems that people are going to encounter from an accessibility point of view is caused by 20% of the accessibility issues if that makes sense. So we can solve a small number of issues but have a big impact on the site. So we’ll start off with some real basic stuff. Things like putting in “alt” and “title” attributes, providing alternatives to media, things like video and audio, being aware of JavaScript and the problems that JavaScript can create if it’s not implemented correctly, providing resizable text so that the user has the ability to either increase or decrease the text size on sites, to build everything to be standards based because that makes it so much easier in future.

Audience: Aren’t we moving away from resizable text?

Paul: We’re moving away from the resizable interface where the whole thing scales up and down, but there’s no reason why we can’t keep the text itself rescaleable. The layers should be able to push up and down. It has to be said with resizeable text, it is becoming less of an issue. The reason it’s becoming less of an issue is because browsers now have this zoom functionality built into them. But I don’t think we’re quite there yet to be able to drop resizable text entirely is my current feeling… I’ve got mixed feelings about it. But the obvious aim we’re going for here is to be single A compliant.

Build Over Time

Paul: So all of this is about building accessibility over time. Taking the guidelines by themselves is not going to be enough, and taking this checkbox mentality that I talked about earlier is not going to be enough. Once you’ve done these quick fixes, the next step on from that is to start consulting with your community. We need to encourage our clients to start talking to their users and find out what accessibility concerns they have. I also think, which I think we’re quite poor at, that we need to start testing with real users some of the accessibility stuff that we do, and the big problem there is persuading clients to pay for that. It’s really hard to get clients to pay for that kind of testing but I do think that it’s a really useful thing to do, and there are organisations out there that provide people you can get in to do testing, or that you can send sites out and they test with them. So, testing with real disabled users is really worthwhile. I think it’s about identifying major issues and dealing with those first, just pragmatic kind of prioritisation of issues, something you do with usability. With usability you look for the quick wins and the showstoppers and those you deal with first, exactly the same with accessibility. Now, what the major showstoppers are for those navigating the site need to be dealt with. And over time you build towards AA and AAA compliance if you can. But you only do that maybe on some pages. The big concern clients have and the reason they get into this check-box mentality of saying “we’ve got to be double A or we’ve got to conform to the WCAG guidelines” is fear, a fear of litigation. Especially our bigger clients, they’re really worried they’re going to get serious issues. But I think it’s important to stress with clients that litigation doesn’t happen overnight. You don’t suddenly have come through the post a writ saying “you need to come into court about this accessibility issue on your site”. It doesn’t happen like that. What happens in reality is the user complains. And if the user is repeatedly not heard and not listened to, and not responded to and not cared about and rejected, they get angry enough to maybe approach someone like the RNIB who then take it on into litigation for them. That’s the reality of what happens.

Quick Response

Paul: So as a result, you can diffuse that by responding to complaints quickly. So as you’re building up over time with the accessibility policy, if someone does complain, you need to write back to them and you need to deal with that issue straight up. Ok, so that’s how the client should be dealing with all this and there’s loads more I could say on this but I don’t want it to go on forever.

Headscape’s Approach

Paul: Let’s briefly talk about Headscape and our approach and how we should be approaching the subject of accessibility.

Establish Approach With Client

Paul: Well first of all I think everything that we do in our approach should be in conjunction with the client. I don’t think necessarily we talk enough to the client about accessibility. Some clients are just so bamboozled by it that they want us to take control, others want a say in it and what to be reassured that we’re doing something about it. So I think there’s a dialogue that we need to make sure happens. And if a client just wants us to take control of it, that’s great. If they want to be involved in the process, then that’s great to but we need to engage with the client and talk to the client more about it.

Remain Pragmatic

Paul: The second thing and I think this is really important is that we need to remain pragmatic in our approach to accessibility. Everything I’ve been talking about before like building up accessibility gradually, about doing the quick wins first and the show stoppers and that kind of stuff, that’s all pragmatic. I don’t want us on one hand to ignore accessibility, and it needs to be an integral part of everything we do, but on the other hand you can become extremist about it. We could spend hours and hours trying to get something to work in every conceivable user agent in the world and we can worry about every type of disability to the point where it becomes like a paralysis that stops us actually doing anything. So there’s a real balance that we need to strike here. And we need to strike that with our clients and working with our clients.

Have a rationale

Paul: Now I think it’s worth saying that if we decide not to comply with a guideline for whatever reason, we need to have a rationale for that. So we might not conform even to single A compliance in certain situations, although to be honest I can’t think of any off the top of my head, but if we do decide not to conform, we need a damned good reason why not. In other words, we need to have thought about it. And the other thing about accessibility is that we always think about it at the end of the project. It’s too late by then, we’ve built everything. So it really needs to become an intrinsic part of everything that we do.

Responsibilities.

Paul: Let’s talk about the idea of responsibility here and whose responsibility accessibility is within Headscape. Basically I’m going to say, everybody. One of the absolute great things about WCAG2 is because it’s got this 3 tiered approach, it is “accessible” to everybody. It’s understandable by everybody. So therefore it can be everybody’s responsibility to keep an eye on accessibility. And so this is how I think it should split down.

Sales/Client – Principles

Paul: Marcus and Chris and the Client should be worried about principles. The Operable, the Perceivable, those basic top-level principles. And you should be looking at anything that goes out from the company and going “well is that really operable?” So you can take a very top-level approach to it. And I think as you talk to clients as well you take this very top-level approach to it. That’s the level you guys should be working at.

Guidelines – Project Managers

Paul: Project managers, I think you need to be looking and understanding from the guidelines point of view. So you need to go in and read what those guidelines are, and you need to be sure that you understand them. And as you look at any work that goes out from the company, you need to be thinking “does it conform to those guidelines?” You don’t necessarily care about the nitty-gritty of how those are measured, or the nitty-gritty of how they’re achieved, but has that guideline been met? That’s the level you need to be working at.

Success Criteria – Designers and Developers

Paul: Then when it comes to the designers and developers, you need to get right into these guidelines. And you need to understand the success criteria and how to apply the guideline and how to make them work in practice.

Check Everything

Paul: So basically, we need to be checking everything that goes out the company for accessibility. And I have to say I’m making the mistake of saying this on camera, but I think we’ve got a bit lax recently when it comes to accessibility. We reached a point where it was becoming quite intuitive to us, and we were doing it quite naturally, and then as a result of that, we stopped checking because it was the natural process of what we were doing, and then bad habits start to seep in again. So WCAG2 is a great opportunity for us to say “ok, we need to start reviewing everything we’re doing as it goes out again”. So I’d really, really encourage you to check everything.

Needs to be second nature

Paul: basically we need to get to the point where this is second nature to us, so that we’re doing this intuitively again, but not to the point where we’re no longer checking.

Audience: Clients often say “what’s the difference? If I just got for single A compliancy, what won’t my site be reaching?”

Paul: I have to say that I think I would stop talking about double A, triple A and single A compliancy. I don’t think there’s really any value any more in talking about that to the clients.

Audience: I think there is because having the page by page conformance is a really good thing and that we can now argue that yes, we can now make the majority of your site triple A compliant, but for a page full of videos, we can make it single A compliant.

Paul: Ok

Audience: Clients will continue to reference it in briefs. You can’t not talk about it.

Audience: I think it’s actually quite a strong thing.

Audience: is it a page by page compliance, or template by template compliance?

Paul: I think it has to be page by page because the content that goes into the page, into the template, could invalidate it. This is why I think it’s something that should be downplayed. I accept the clients will still talk to us about it, but clients still talk to us about doing speculative design, it doesn’t mean we do it. I think there’s an education thing there whereby we need to move clients away from being obsessed by double A, single A compliance, and to start thinking about accessibility policies. What is there accessibility policy and what is it that they are trying to achieve on their site? Our base mark is going to be single A, it’s always single A, and I think it should continue to be single A.

Audience: but if you don’t talk to them about it, you could argue that less caring clients would just say “well why would I do anything about it, bottom line?”

Paul: Yeah, I said you shouldn’t talk about single A, double A, triple A, but that doesn’t mean you can’t talk to them about accessibility and the improvements that accessibility brings because for people that have got that sort of attitude you don’t want to talk about the disabled if they don’t care about the disabled, you talk about search engines, and that’s the best way to sell accessibility, by talking about search engine placement. That’s the reason you want to be accessible for people who have that kind of attitude. For those that care, and are talking about single A, double A and triple A, you need to say to them “well actually, conforming with any level, it’s great that you want to do accessibility, and certainly single A should be an absolute minimum, but we’d encourage you to start working up an accessibility policy and looking at your site as a whole and say could this area do more in your site, your accessibility policy should do real world testing with real users…” all kinds of things.

Audience: So you think that we should be encouraging large organisations that have accessibility policies themselves that refer to double A, triple A, to try and persuade them to kind of move away from that?

Paul: No, not necessarily, I wouldn’t go that far. Don’t get me wrong, I’m not saying that they’re a bad thing, I’m saying they’re not the be-all and end-all. And at the moment I feel like the vast majority of clients think they are the be-all and end-all. They’re obsessed with putting that little badge on the bottom of the page. And it’s not about putting badges on the page. The trouble with institutions that have these policies of single A, double A and triple A is that these policies are in place for the institution, not for the user. And that’s my problem with them. That’s why I think we should try to break that mentality with clients. And I accept that sometimes we’re going to lose, and that’s fine. Exactly the same goes when we were talking about browser support. I accept sometimes we’re going to lose that battle as well. But it doesn’t mean we shouldn’t try and fight it.

Audience: I just wondered why WCAG2 still does it, because yes, you’re right basically, and accessibility requirements should be based on user requirements and not ticking boxes, so why is it still in there?

Paul: I think it’s in there because… my impression… I hate talking about accessibility on camera! You remember what happened last time in the podcast? It was just a nightmare! I think the reason it’s still in is because some of those success criteria are hard to meet. Some of them are damn difficult. When you start talking about streaming video, you’ve got some difficult challenges there that need to be met. So I think as a result, what the W3C is saying there is that we accept that some of these things are difficult to do. And we accept that you’re not always going to be able to do them, so we’re going to make them triple A. But come on guys, some of this stuff is dead simple and we should be doing it, that’s single A. That’s my impression of the mentality behind it, and that’s a great mentality, but it’s when someone changes that to being guidelines, which is what they are, to being rules, really instilled by Moses and presented to the people. You know it’s not that and I think that’s an important differentiation to make.

Where to Start

Paul: I know what you guys are like, especially designers. Ok I’m making sweeping generalisations here. But, if you guys go along to the WCAG website and you look at the WCAG2 guidelines, it’s horrible! It’s intimidating and it’s scary and it goes on for pages. And there’s a lot of text around it.

Audience: There’s no pictures? (laughter)

Paul: There’s no pictures! The design isn’t even very good. So what I’ve done is I’ve taken that page, I’ve literally all I’ve done is I’ve stripped out the explanation text in front of it, and the waffle at the end of it, and I’ve left you with just the set of guidelines so it looks like a slightly less intimidating list. Not much but slightly. So that’s up at http://www.headscape.co.uk/WCAG2 so if you go to that, you can get just the actual list of criteria. There’s also, on the WCAG2 website, there’s a thing where you can go and you can say my site uses tables, my site uses video, my site has this and that, and you untick the ones that it doesn’t have and it narrows down the list of success criteria to only show you the ones that you need to care about. So you might want to check that one out as well. Ok, so that’s basically all I have to say, are there any other questions before we wrap up?

Questions

Audience: Clients are going to ask us the 1 minute elevator pitch. What’s the difference between WCAG2 and WCAG1? What would you highlight as differences?

Paul: I think there’s a bigger acceptance of things in the world other than HTML, so things like Flash, PDFs, all that kind of stuff, there’s much more reference to that kind of thing. It’s much better written, much better organised. I think it’s more pragmatic. It’s a little bit more… I think it will last the test of time more. It’s hard to pin down exactly what I mean by that. There is actually a document out that talks about the specific differences between WCAG1 and WCAG2 if you wanted to get into that level of detail. And to be honest, I couldn’t tell you what that is yet because I haven’t looked at it in that much depth myself.

Audience: I think you and I do need a couple of the more detailed stuff, to get the guidelines, just one or two examples basically. Something that’s new between WCAG1 and WCAG2, and also some of the differences between single A, double A and triple A. The streaming video is an excellent example.

Paul: Just go along to http://www.headscape.co.uk/WCAG2 and you’ll be able to see those different levels.

Audience: It seems like, an almost unwritten principle, or unwritten in your list of principles. It’s technology agnostic.

Paul: WCAG2 started off as so technologically agnostic that it wasn’t understandable.

Audience: WCAG1, the first line is all about “it must be W3C technologies”.

Paul: Yeah, it will pretty much accommodate anything. You know, it talks in terms of audio and video. It doesn’t mention Flash for example specifically, at least I don’t think it does, but it refers to those kinds of things. It refers to documents that are not HTML. I’m saying this as much for the video as anything else, I’m still learning about it as well. So I think it’s going to be a learning process for a while for us to really get to grips with this, and truth be told we probably should have started a little sooner than this, but it’s not radically different from WCAG1. This is as much getting us back into the habit of thinking about accessibility as anything else really. Ok?

Audience: 1 more question. Are they new Keynote animations?

Paul: Yeah, they are new Keynote animations.

140. Launch

Posted in Classic shows on October 22, 2008 by Paul Boag

In this week’s show GetSignOff has finally launched, we talk about how to use web stats to improve your site and we answer your questions about roles with web design and should you help clients with hosting.

Podcast: Download (25.2MB)

Download this show.

Launch our podcast player

News and events

Acid3 receptions and misconceptions and do we have a winner?

The team that develop WebKit, the open source web browser engine that Safari and the new Google Chrome are built on, have just announced that the engine passes the Acid3 test developed by The Web Standard Project (Wasp).

So what is Acid3?

Acid3 runs a series of tests against a given browser and produces a score, the goal being 100/100. This score is generated from how "standards compliant" the browser is. For example whether it supports CSS2.1 styles such as "inline-block" and "pre-wrap", if it supports SVG-Fonts, what DOM features is supports and a whole range of other criteria.

So WebKit passes!

Does this mean we should ditch Firefox, IE and all the other browsers in favour of Safari or Chrome, well no, and that’s what Lars Gunther is talking about in his article over at WaSP.

It’s great that tests like Acid3 exist and that browser developers endeavour to build better browsers because of them. All in all it results in a much better experience for the average user and makes our lives as Web Designers much more hassle free.

6 Things To Like About Dreamweaver CS4

So Dreamweaver CS4 became available this week, 15th October to be exact and Alex Walker over at Site Point has been having a play and has shared with us 6 thinks he likes about the new release. Check out his article for details of each, but a summarised list is:

UI/Workflow Improvements
The Related Files Toolbar
Code Navigator
Live View
Advanced JavaScript Interpretation
Making JavaScript Unobtrusive

From reading the article these improvements over the previous version look really promising. One feature that really caught my eye is "intelligent code completion" for JavaScript and the most popular libraries such as jQuery, MooTools, Prototype etc, the same way it does for HTML!

It would also appear that Adobe are making big improvements to the "Display View" of Dreamweaver, which has historically been the stigma plaguing most "professional" designers who use it. The "Display View" now has integrated code navigation, so you can use it to jump to specific elements within the page and Adobe have also built WebKit into Dreamweavers core so you can run your site through the software to test JavaScript, rendered CSS, server-side code etc.

So will these new features encourage more people to use Dreamweaver?

7 Ingredients of Good Corporate Design

Smashing Magazine has published a great article that discusses 7 ingredients to good corporate design. They break the discussion into two elements:

Design as artistic representation, which consists of:
- Logo
- Typography
- Colours
Design strategy, consisting of:
- Brand
- Quality
- Community
- Culture

It’s important to understand that corporate design isn’t simply of a graphical nature but is intrinsically linked with your strategy, the goals that you set and how you implement them and this article is well worth the read.

Launch: GetSignOff Goes Public

Monday GetSignOff finally opened to the public. It has been an interesting journey read more here.

Feature: Using Web Stats for More

We all use web stat tools like Google Analytics for tracking marketing campaigns. However, they can also be used to improve your site. We discuss this in this weeks feature.

Listeners feedback:

Salesman seeks designer/developer

Got this audio question from Andrew:

Hi Paul, hello Marcus and hi to all the people who work at the show. I live in Canada so hearing your nice English voices through my headphones is great. My name is Steve and I’ve done some freelance web design for clients in the past, but the part I enjoyed the most was the selling cycle; being able to explain to the client what a standards based website could do for them and then persuade them that investing in such a site would be wise for their business. I bet there’s a lot of designers and developers out there who are absolute Jedis when it comes to coding CSS and HTML but really hate the selling part. And then there are people like me who can really sell well but I wish I could work with people who are amazing at building websites.

My two-pronged question is as follows:

Is there a website or another resource that would allow people like me, who love web design, but are more business/marketing oriented to touch base with people who are in the opposite situation? And I’m thinking more than just a job board here, I guess the best analogy would be something that Marcus might be familiar with – adverts in the back of music magazines that would say something like ‘band seeks drummer’ or ‘talented singer needs people to play instruments’.

My other question: how did you guys do it at Headscape, were you all great at coding and someone had to get pushed out the door and start selling or were there very separate roles from the beginning?

Ok, part one first (I’m original aren’t I)… the ‘band seeks drummer’ analogy is good but I much prefer a dating agency analogy! Cuddly, financially sound salesman WGSOH seeks quiet, intense, practical developer for fulfilling relationship. :-)

As far as I am aware, sadly, this service does not exist. Forums, like the Boagworld forum, have got to be your best bet.

Right, part two. Much as I would love to claim that I used to be great at coding before they kicked me out of the door to do the selling, it would be a blatant lie. When Headscape started, the three of us came from different disciplines – Paul was designer/tech (it’s true!), Chris was project manager and I was salesman. We soon didn’t have enough design/tech resource and started to recruit but the fact that a) Chris was organising and pushing projects along and b) that I was concentrating on bringing in new work meant that we were running things like a larger agency (more efficiently and with less risk) very early on.

I have banged on about how important effective selling is in the past many times so won’t repeat myself here. The only thing I will say is that having totally separate roles is not necessarily a good thing. Even now, we don’t have very separate roles. Chris and Paul are both heavily involved in the sales process and always have been. In my view, it is the responsibility of the company directors to se
ll.

But, added to that, Chris and I also do a lot of consultancy work (requirements analysis, IA work etc), and Paul still does design work. This is important because it keeps our ‘hand’ in. Getting too involved in one role can often lead to a lot of potentially out-of-date talking, and very little ‘doing’.

Do/should you help clients’ with hosting?

Hi all

I’m just about to do a ‘simple’ website for a friend (aka my 1st client) which will try to market something he is looking to rent out. Whilst I’m confident I can do the website, I’m not sure how far I should go with helping/organising his hosting. The client doesn’t know anything about hosting and doesn’t have any hosting space with his broadband provider.

Now I don’t really want to get into organising hosting unless I have to, so I’d just like to know what the ‘norm’ is in this regard? As a web developer/firm do you automatically sort out hosting, do you get the client to do it and then give you the hosting password so you can upload the site? Is it even a good/lucrative idea to get involved in sorting this out as part of the ‘service’? Can people suggest what they do please?

Thanks, Alex

This question came from the Forum and there are already some interesting posts in response. The biggest issue here is:

Can you support this website?

Can you provide support if the site goes down in the middle of the night, on Christmas Day, or even when you’re on your two week break to Spain?

If you decide to sell hosting then you become a middle man between your client and the hosting company. Your client is contracted to you to provide and support hosting, not the hosting company. Of course, you have a relationship with the hosting company where they will provide an agreed level of support but… you are still the person that has to deal with your clients’ issues as and when they arise.

At Headscape we are completely open about this with our clients. We tell them that we only provide support (of any kind) on working days between 9am and 5.30pm. We’re not set up to do anything more than that.

However, we do offer hosting for those clients that feel that the level of support that we offer is enough. We have our own managed platform and we also act as a reseller for a large hosting company.

The solution for those clients that require a superior level of service is simple. The client buys the hosting directly thereby taking you – the agency/freelancer – out of the loop. We specify technologies, discuss the level of support required, amount of bandwidth etc with client – we will also set up the site on the web server – but the client orders and pays for the hosting.

This has worked really well particularly for the larger, busier sites that we have developed.

All that said, if you act as a reseller, and you have enough clients, you can make a decent profit via hosting. However, don’t be fooled into thinking that it doesn’t involve any work keeping all those clients happy and up to date. If you have enough clients to make money out of hosting then it’s very likely that you will have regular hosting issues to deal with and constant renewals to deal with.

My friend and colleague, the long suffering Mr Scott, has many times said that he wished we had never touched hosting simply because it often ends being a constant irritation that gets in the way of project work and rarely pays for itself.

Using web stats for more

Posted in Site content on October 19, 2008 by Paul Boag

We all use web stat tools like Google Analytics for tracking marketing campaigns. However, they can also be used to improve your site.

As I continue my efforts to finish the website owner’s manual, I have reached a section on web stats. What struck me was how little most of us use the power of web stats. They can do so much more than monitor your marketing efforts. In particular they can:

Help find and resolve problems on your site
Improve the quality of the content you deliver

Let us look at how.

Finding and resolving problems

When it comes to web stats one of the most popular figures to monitor is conversion rate. Conversion rate compares the number of users visiting your site to the number that complete a call to action.

If your conversion rate is low, this could reflect a problem with your site. This could be due to:

Usability – The user is unable to find the call to action due to poor navigation or other usability issues.
Accessibility – For example a particular browser does not render the site correctly and so users cannot complete the call to action.
Content – The site does not provide adequately convincing content to encourage users to complete the call to action.

But what consists of a low conversion ratio? That entirely depends on your call to action. For example, an ecommerce site could have a ratio anywhere between half a percent and eight percent depending on the sector and product. On the other hand, a call to action that does not cost the user money should expect a higher figure.

The best approach is to compare a conversion ratio against itself over time. As you make adjustments to your site does that harm or improve conversion rate?

Fortunately website statistics can also help establish what changes will improve your conversion rate. Start by looking at where users exit your site.

Dropout points

When looking at where users exit your site exclude those who only view one page. If you do not the homepage will be at the top of your list. This is because people click through from a search engine, discover this is not the site they wanted and leave immediately. Although this may indicate a problem with your SEO, it does not reflect badly on the site.

Once these anomalies are excluded take a look at the remaining pages. Why are users leaving at these points? Is the content relevant and clearly presented? Is the navigation usable? Are you suggesting a next step to the user or are these dead end pages?

Look at the history of users who dropout at a particular page. How long have they been on the site by this point? What other pages have they viewed? How long did they spend on the exit page before leaving? Does this reveal trends which help to identify the problem?

Sometimes the problem will be obvious, other times it will not. In such cases try usability testing. This will uncover potential issues. If usability testing is not an option try using a tool like Click Tales.

Click Tales picks up where traditional analytical packages leave off. It allows you to see what users do on an individual page. It record user sessions anonymously showing you what they click on, hover over and how far down the page they scroll.

Although a technology like Click Tales is impressive it cannot replace traditional usability testing. It does not provide you the opportunity to question the user. For example it will not explain why users abandon shopping carts?

When the website owners of ecommerce sites start examining their website statistics they are often horrified by the dropout rate experienced on shopping cart pages. They worry that there is a fundamental usability flaw. However, in many cases that is not true. Questioning users reveal they abandon baskets for a host of reasons ranging from ‘I was saving the items to buy later’ through to ‘I wanted to compare the price on another site’. Like the homepage, shopping carts will always have a high exit rate and no amount of statistical analysis can change that.

However statistical analysis will allow us to improve the content and products we provide on our sites.

Identifying popular content

There is a real benefit in understanding what users want from our sites. From what content they want to what products they will buy, understand users requirements allows you to mould the site to user needs.

Website statistics can help identify popular content but not in the way you might expect. Looking at the most visited pages will not provide answers.

Popular pages can be misleading for three reasons:

Pages can be visited by mistake
Page can be popular because their prominent
Pages can be popular because they are gateway pages to deeper content

The homepage is a good example of these problems. I have already explained that the homepage is visited my mistake from search engines. It is also a prominent page and used as a navigational tool for finding other content.

Looking at how long users spend on a page can help to weed out ‘false positives’. However ultimately this is a flawed approach and can only give a partial indication of the popular content on your site.

A better approach is to look at the search terms users entered into search engines to reach your site. Almost all website analytical packages provide this information and it helps define users priorities. However, this is only going to show content that already exists on your site. If a user entered a search term for content you do not have, your site would not have been returned. The user would never come to your site. What you really need is a way of identify content that you do not offer but users want.

This is possible by examining the phrases users enter into your own sites search engine.

Approximately half of your visitors will use internal search. Every time they use search they are telling you exactly what they want from your site in their own words. That is incredibly valuable.

You need access to these search terms and particularly the ones that return zero results. This is the area where you need to do work. Users are expressing an interest in a piece of information you do not have or your search engine does not recognise.

Once you have access to these search phrases, start tailoring content around them. If the content does not exist, add it where appropriate. If it does exist but is not being found, introduce the exact phrasing your users are searching for. Better to use the language of your users than sticking to internal jargon nobody understands.

And there you have it. Proof that website stats can be used for a lot more than just tracking marketing campaigns.

137. Adobe

Posted in Classic shows on October 1, 2008 by Paul Boag

In this week’s show, Aral Balkan joins us to discuss the release of Adobe CS4 and we discuss how not to get blacklisted by google.

Download this show.

Launch our podcast player

News and events

Adobe CS4 is released

The biggest news of the week is the release of Adobe’s CS4 suite of products. This includes new versions of Photoshop, Flash, Illustrator, Dreamweaver, Fireworks, the list goes on.

This leaves every web designer asking the question, is it worth forking out over one thousand dollars for the latest set of enhancements? As always it depends on how you use the products.

The most significant changes are in workflow and interface. Adobe have been adding features to their applications for years and some of the interfaces have become unwieldy. This release addresses a lot of these issues. They have brought buried features out of the menu and into palettes and toolbars.

Also, if you tend to work entirely in the Adobe universe, you will be interested in the workflow improvements. It is now easier than ever to move work between applications and manage your entire workflow throughout your site development process.

However, workflow and interface improvements are probably not going to make you upgrade. After all how excited can you get about that kind of stuff?

What may tip the balance are the new 3D features. For example in Flash you have substantially improved animation tools for 3D objects and in Photoshop it is now possible to import 3D objects into a 2D image and manipulate them. I can see many web designers moving from buy stock photography to entire 3D models because it provides substantially more control.

However, if you are still debating about whether to upgrade to the latest version of Photoshop, go and check out a feature called ‘content aware scaling‘. It will blow your mind.

For more on the new features in Adobe CS4 listen to our interview with Aral later in the show. Also check out Adobe TV for video demonstrations of all the new features across the entire range.

Fire Vox

Next up is a Firefox extension that allows you to transform Firefox into a screen reader.

We all know accessibility is important. We all know we should develop with screen readers in mind. However, many of us fail to test in screen readers because they are expensive and time consuming.

Well, now you have no excuse. Fire Vox is an open source, freely available talking browser extension for the Firefox web browser. Think of it as a screen reader that is designed especially for Firefox.

In addition to the basic features that are expected of screen readers, such as being able to identify headings, links, images, etc. and providing navigational assistance, Fire Vox provides support for CSS speech module properties. It also works on Windows, Macintosh, and Linux.

Installation is slightly more fiddly than your average extension but if you follow the instructions it is easy enough to get up and running.

Once installed, it is probably one of the easiest screen readers I have used. They also provide some excellent tutorials on their site to get you up and running.

I highly recommend it.

Irresponsible content publication

According to Gerry McGovern, on the 8th September, a story about the bankruptcy of United Airlines parent company began circulating on the Web. Within hours of the story’s being released, their shares had dropped by 76 percent.

What has this got to do with web design I hear you ask? The answer; the story was 6 years old. Somehow it had been picked up by Google News and quickly caused panic among share holders.

Gerry uses this as an example of the dangers associated with out of date content. He goes on to talk about how our ‘content management system mentality’ has led to an online environment without editorial control.

The production of content for our sites has become so distributed and unregulated that nobody is responsible for reviewing or removing content. We put content online without considering if it is needed or whether it has an expiry date.

The content of our websites has been largely neglected and I believe the time has come for website owners to put the same investment into content as they do into the build of a site.

For those of you who are web designers, I would encourage you to start talking to your clients about how they plan to manage the content on their sites. Who will be responsible for the relevancy of what they place online?

Code CSS the clear:left way

It is always interesting to see how others build websites particularly when it is a high profile company you respect. One such company is Clearleft who are known for the quality of their CSS and Javascript.

One of the developers at Clearleft is Natalie Downe. She recently spoke at Barcamp London about the methodology Clearleft use when coding in CSS.

Although I didn’t get to hear her speak she has put her slides and notes (PDF 64.2mb) online. Fortunately, her notes are extremely comprehensive and it gives a real insight into her approach.

Obviously, there is not a single approach to building websites. However, Natalie shares some interesting ideas about ensuring your CSS remains maintainable and can be easily handed to other developers.

Interestingly we follow a similar approach at Headscape although we do differ in a few key ways. Nevertheless it is fascinating to see how others do it and there is a lot to learn from what Natalie shares.

Interview: Aral Balkan on the new Adobe Products

Paul: Ok, so joining me today is Aral Balkan, good to have you on the show.

Aral: Oh, thank you Paul, it’s always great to be here.

Paul: It’s been a little while, but it’s good to have you back, and we’ve got Aral on the show today, really to talk about a couple of random things really…

Aral: The story of my life!

Paul: …yeah, the story of your life, yeah, um, one of which is the new Adobe suite of products that are coming out, but before we get onto that, let’s talk about <head>, previously Singularity, what’s all that about for a start, what happened there?

Aral: Uh, with the name change?

Paul: Yeah.

Aral: It was quite unfortunate, about 2 weeks ago or so, I got a letter from a company called Singularity Ltd, and they’d apparently trademarked "Singularity" the word, and you know how trademark law works, it’s got different categories apparently, and these categories are really wide, so a single category coul
d include things like training and conferences, so this company was not actually doing a conference called Singularity, but they trademarked it under the same class, and so they weren’t too happy that we were using the name, and we had a talk as well, I called them up because I was like, oh crap, might as well just talk it out, and it just seemed like they wanted to have a legal conversation through the lawyers and stuff, you know, I’m not really into that, we only had 2 months to go and, you know, we’re a first year conference so I didn’t have the budget or the time really to get into that sort of a conversation and so I was like, yeah, you know what, this is going to hurt but let’s re brand, so I took a weekend out, redesigned the site, redesigned everything, and then we decided to go with the new name. I actually really like the new name…

Paul: Yeah, it’s a good name.

Aral: …it’s kind of edgy, it’s short, it’s memorable, and you know, given everything else, I probably wouldn’t have changed the name 2 months ago if I’d had a choice, but still, I like it.

Paul: These things happen don’t they.

Aral: These things do happen apparently, yeah.

Paul: So tell us a little bit about <head>, what is it? You know, it’s obviously a conference but tell us a bit more about it.

Aral: Well, it’s this conference and we have this amazing guy; Paul Boag speaking at it.

Paul: Well, obviously, yeah!

Aral: And that’s really all I need to say! How do you like that one?

Paul: That’s perfect. Keep going, you’re doing well.

Aral: It’s a virtual conference, so all of the sessions are streamed live over the Internet, and they’re interactive so you can ask questions as you’re viewing them, and the speaker can answer those questions. We’re using Adobe Connect Pro in order to do that, so it’s a tried and true system that’s been around for quite a few years actually, surprisingly. Also we have a couple hubs in London, in Manchester, we’re going to have one here in Brighton, one in Belgium, and there are a few more that still haven’t been finalised, but we may have 1 or 2 more hubs, and the one in London for example is taking place at the Magic Circle which I’m very excited about, it’s a lovely venue. Have you been there?

Paul: I’ve heard of it, but I haven’t actually been there, I’ve heard of other people talk about it.

Aral: It’s awesome, I was there last week, and it’s basically like the magician’s society in the UK, so it’s been around for about 100 years, and it’s got a museum where you can see actual items from Houdini and other people. Did you know that Prince Charles apparently is a member of the Magic Circle?

Paul: Oh, that doesn’t surprise me.

Aral: And he apparently had to do a little trick to get in with these cups and this ball, and he got accepted into the highest order of the magic circle, just kind of crazy!

Paul: There you go! So when is this conference?

Aral: The conference takes place October 24th to the 26th, and it’s everywhere, so you sign up to attend, and you can watch it from home, or if you’re in one of the cities where we have a hub, you can go from there.

Paul: I mean, why virtual? Why did you decide to have a virtual conference rather than the traditional get-together kind of thing?

Aral: Personal reasons Paul! No, um, actually seriously I do a lot of talks at conferences, so I fly around a lot, and the flying around bit and staying in strange hotels, sometimes it’s a great experience but depending on the hotel that you’re in, that’s not the bit that I really enjoy. You know, you go to a hotel, you don’t have wi-fi, the wi-fi costs 3 billion dollars or something, and I got to thinking whether that was actually part of the conference experience, the positive part of it for me, and I thought maybe not, and we do stuff on the web, that’s what we do, that’s the line of business that we’re in. So I thought why not try and see if we can create a conference that’s virtual, but yet try to keep some of the aspects of conferences that we like the most, like the social interactions, and that’s where the idea of the hubs came from, and that’s why it’s interactive and people can ask questions and communicate during the conference. And it’s an experiment, you know, it’s a first time conference so we’re trying it out, we’re going to see what works, see what doesn’t, and then we’re going to evolve it next year.

Paul: I mean what I find incredible about it is, I guess because people don’t need to travel, you’ve got an absolutely incredible line-up of speakers.

Aral: We do have some great speakers!

Paul: And you’ve got so many of them as well, there’s, what is there? Over 70 odd speakers?

Aral: Yeah, yeah, we’ve got 70 plus speakers, we’ve got amazing people; Tim O’Reilly for example is speaking, he’s doing a keynote in the London hub in person, we’ve got Jason Fried, and we’ve got yourself of course…

Paul: I don’t think you could put me in the same category as those 2, but keep going. I like the sound of it, that’s good.

Aral: Course we can! Dude, I’ve seen you in so many conferences, you rock! Um, and we’ve got Molly, Jeremy Keith, we’ve got so many people, I mean Rafi Haladjian, he’s the father of the Nabaztag bunny… I have one here! Yeah you saw it, when I came over with you guys.

Paul: Yes, I know how obsessional you are.

Aral: So, I mean, we’ve got amazing people. Gary Vaynerchuk, Wine Library TV, he’s awesome, I’m going to see if we can try and get a live video hook-up during the London hub with him, he’s just awesome, and just a whole bunch of people, I’m forgetting half of them, Richard Moross from moo.com, another one of my favourite companies.

Paul: It’s just a stella list, absolutely unbelievable. Do you think people are going to miss out from the fact that they’re not going to have that face-to-face experience?

Aral: I sure hope not, you know, we’re trying to build things that compensate for that, and next year especially I’m going to concentrate much more on the hubs. You know, I’m thinking of scaling it down next year because we’ve kind of gone for everything this year, which is exhilarating, but at the same time for a first year conference it’s a lot to do. Next year I’m thinking of maybe scaling it down a little bit, concentrating on 1 or 2 hubs, and try to build new interactions for connecting those hubs. I’ve got some really cool plans for it.

Paul: I mean, one of the kind of interesting things about this as well is the kind of underlying technology of all of this. I mean, how is it working, how are you going to connect all of these people? I mean, you’re talking about thousands of people, 70 speakers, you know, here I am sitting in the middle of Dorset in the back and beyond, you know, and how are all these people going to see my presentation?

Aral: Well, we’re using Adobe Connect Pro, so that does have a limit currently of 2,000 people in a room, so that’s where we’re limiting our attendance, we’re definitely not having more than 2,000, and I don’t think that’s going to be a problem. But Connect has a lot of features for basically connecting people. You can see the streamed audio and video of a presentation, but you can also interact both by typing, or you can send your own video feed. We’re probably not going to use that because of bandwidth concerns, but people can interact with other people who are in the session, they can chat with them and with the speaker, and so at the end of every session we’re going to have a question and answer, and the speaker will go through all of the written questions that they’ve received during the talk and answer them, and that format has really worked in the past as well for meetings that we’ve done.

Paul: So, this is not a technology I’ve come across before, this is something that’s kind of publicly available from Adobe is it?

Aral: Oh yeah, totally, Adobe Connect Pro has been available for several years. I think the full name, and it’s got one of those really long names, is Adobe Acrobat Connect Pro.

Paul: Right.

Aral: I know, I don’t know where they come up with them. But it’s a really cool piece of software for doing meetings and these sorts of virtual presentations. It used to be called Breeze.

Paul: Ahhh, that’s the name I recognize.

Aral: Yeah, there you go. It’s been around for years and years, so it’s really really stable, and Adobe actually has a new version of it, I don’t know what they’re calling it, I remember it’s beta name I think, but they have a free version for up to 3 or 4 people, so if you Google for that, or like in the transcript or something you guys can find it and link it, that’s really cool because you can just start playing with that. It used to be called Brio. I don’t know what they’re calling it now it’s been released.

Paul: The other thing that I noticed from Twitter was that you mentioned that you built the website using Google’s App Engine.

Aral: Yes.

Paul: Tell us bit about that.

Aral: Wow, it’s been a fun ride!

Paul: You sounded somewhat stressed at certain points through the period.

Aral: It has been really great.

Paul: What is it first of all? Explain to people what it is.

Aral: So Google App Engine is Google’s foray into providing access to the cloud; to its infrastructure. So basically Google has this massively scaleable infrastructure that hosts, it’s search and on it’s various applications on. So Google’s App Engine is Google’s way of saying "ok, here’s the technology that we have for building these infinitely scaleable applications, and we’re going to make it available to you in a very simple manner so you can build your applications on it and host them on it". And it’s really cool, the idea is awesome, and you’re going to be hearing so much more about it as they add more features to it. It’s currently in pre-release, so of course it was quite a gamble to base the website on a pre-release technology, but I’m still convinced that that gamble is going to pay off because basically the way I see it, there are the most intelligent developers in the world working at Google basically working for my application. Every feature they add basically adds a feature to my app in a way that I can use. So once they integrate things like the Google APIs, once they integrate other features, not that I have any insider information, but it just makes sense that they would do that, I think it’s just going to become a more and more powerful platform.

Paul: But you found it a little bit painful at times.

Aral: Well of course. It’s pre-release, right? And pre-release technologies have issues, so they’re figuring things out. It’s not something that, again, has been done before, Amazon has a really cool platform with simple DB, S3, S32 and those technologies which provide the same thing, but in some ways, Amazon’s platform is much more tested, much more tried, but it’s also more difficult to develop on, I mean, you need a lot of skills, you need to be a system administrator in order to build on EC2, or at least have some knowledge in that area. You need many more skills. With Google App Engine, if you know Python, you just download this SDK onto your machine, you install it and you have a local version of their environment on your machine and you can write a few lines of Python and start running your application on your local machine, and then you just enter one command and suddenly it’s on Google’s servers, and the theory is that a million people can hit it immediately and it’s not going to go down.

Paul: Yeah, which for a conference like this where a large number of people are all going to be using a site at the same time, it’s vital.

Aral: Yeah, and I mean we’re not going to stress it at all with our numbers, but you know, if you think of the next Flickr or the next Twitter, although you can’t currently build a mess
aging app on it, but apps that will get those numbers, that might get those numbers, they won’t have to go through the standard stages of development. Because these days, today, what happens is you build an application, you build it using some sort of rapid framework like Rails or Django or whatever, you build it, you put it up there, and if it gets really popular, then you basically have to go in, you have to re-architect a lot of things. You know, for some apps like Twitter, they’ve basically had to rebuild the application as it’s running. And that’s a lot of work. Google App Engine turns this on its head. You have hurdles to get by when you’re building the application, but you can test it, just with yourself, and if your application runs correctly for you, if you can get it to that point, then it will run that way for everyone that hits it. Or at least, that’s the idea, that’s where they’re heading for.

Paul: That sounds really exciting, I look forward to seeing that develop.

Aral: It is.

Paul: You’re very brave taking it on so early.

Aral: Well you know what, that’s the thing. A few people have told me when I was bitching and moaning when we had a few issues, and let me tell you, Google have been amazing, I have direct contact with a couple of engineers on their team, and they have been amazing in helping me out and working with me, and I’m working with them to try to improve it. But a few people when I was bitching about it were like "well, you know, you just got what you deserve for using pre-release technology". But the thing is, someone has to, right?

Paul: Exactly, yeah.

Aral: Someone has to, so the next time somebody tries a beta piece of software, tries to build it and provides feedback, instead of going "ha ha, I told you so!" kind of think, well you know, I’m probably going to end up using this in a few years time and I’m going to benefit from the lessons you’ve learnt. So some people have to be early adopters, and yeah, getting burned with certain things is part of it. But it’s just how it goes. But what interests me the most, Paul, about Google App Engine, and about like, EC2 et cetera, is that we’re kind of entering the age of the commodity web, where the web, where building scalable applications on the web becomes a commodity just like electricity or water. You know, so we won’t have to worry about things like hosting and this and that, it will just be like another meter reading, you know,um, I’ve made my app, here it is on the web, and I get charged for it by CPU cycles, by the amount of resources that I’m using, just like electricity.

Paul: I mean, that will be awesome. If we can reach that point where we don’t have to worry about scaleability and things like that, that would just be incredible.

Aral: Yeah, I think we’re nearly there.

Paul: That’s superb.

Aral: Yep.

Paul: Talking of you working with people, you said you were working closely with Google over this, I know you’ve got an excellent relationship with the guys over at Adobe, and no doubt you’ve been playing with CS4, tell us a little bit about it. You were over at the launch of it were you not?

Aral: Yes I was, I wasn’t actually speaking about CS4, but I was at the launch and I got to see some of the demos there. It’s a huge suite, you know, I didn’t have the chance to play with everything, so seeing some of their demos, it’s really cool, it looks like they’re really concentrating on integration between the products, they’ve been doing this for a couple of releases now, but it’s really starting to pay off. When Adobe bought Macromedia, everyone was like, well you know, how are they going to integrate things, and people were fearing it was going to be an instant process and some of the tools would be ruined. That hasn’t happened. But they have been integrating the products over the years with these release cycles. So, one of the demonstrations that I saw that was really cool for example was in In Design, which is a desktop publishing tool that they have, you can build a magazine, and then you can click a button, and then have that be an interactive magazine in Flash that you can put on the web with like a page turn effect and stuff like that.

Paul: Wow.

Aral: And that’s actually quite awesome.

Paul: Yeah.

Aral: I spent a bit of time a couple of years ago to build an app that did that from PDFs, and that software is still going strong and being used on the web, but now you can just do that with In Design and Flash. And things like that, it really worked on the workflow between various tools, and it makes a lot of sense because web video is such a big thing now, and being able to take things from After Effects and Premier into Flash and back and into DreamWeaver and put it up on your site, they’re really working on these workflows so they’re not joined to tools. I think that’s really for me the most exciting thing, apart from some of the cool stuff in Flash.

Paul: What have they done in Flash then that’s so cool?

Aral: Some of the cool stuff in Flash? Well, we have bone support now, IK support. You can draw like a stick man for example and then you can take this bone tool and trace over its various limbs, and then have this puppet that you can play with, and the cool thing is, you can publish this and this puppet is interactive once you’ve published your movie as well, it’s not just an authoring. So you’re going to see some amazing advances in like online games that use this, and in animation. For animators, it’s just going to make their lives so much easier. And that’s just like one of the new things they have.

Paul: Did you get a look at Photoshop and whether there have been any major changes in that?

Aral: Yeah! Well they’re really concentrating on the 3D stuff in Photoshop from what I can see. There’s a lot of 3D tools, you can bring in 3D models into it, you can paint into them, they stay 3D as you’re painting into them and outside of them. There was this one demo which I thought was really cool where they took an old-fashioned car and it was like a 3D model, and they just rubbed off the roof, and then it became like this convertable, but it’s still 3D, and they started painting the seats, which is kind of cool. I think that’s going to, again, it’s an integration with your
other tools, with your 3D tools. It does look really cool, I can’t wait to play more with it.

Paul: I guess the only other one that’s directly relevant to web design would be DreamWeaver. Did you get a chance to look at that?

Aral: Yes. Yeah, I did, and it seems to have gotten a whole bunch of new features as well especially with the CSS and their live preview of CSS. But to tell you the truth, I don’t really use DreamWeaver. I started out with, well no, ok, I started out with Front Page many many years ago.

Paul: You should be ashamed to even admit that.

Aral: Forgive me, I know, but I switched to DreamWeaver right away! But recently, you know, I just do a lot of my stuff in Text Mate, and I don’t know why that is, but I just find some of these tools to be way too heavy, especially for HTML, and I really like to have control over what I do. And Text Mate is light, I’ve begun to favour lightweight tools a lot.

Paul: Yeah, I must admit, I use DreamWeaver for a very long time as a text coding tool, not as a WYSIWIG, but in the end, it was just so slow to open up compared to other stuff and it just seemed to be chunky.

Aral: Yeah, I kind of went through the same thing, and I really, like I say, I really enjoy Text Mate. It is such a simple simple editor and it just works.

Paul: Ok, so that’s really great Aral. Going back to the conference just very briefly, by the time this comes out, people are going to have missed unfortunately the early bird discount, so how much are they looking at for this conference?

Aral: Well the main tickets are $149, but who knows, maybe we can do something special for listeners of your podcast.

Paul: Oooooh!

Aral: If they are going to miss it.

Paul: Ok, well you let me know that, and we’ll tag that on after this interview, I can do that easily enough.

Aral: Ok, cool.

Paul: You can find out about the conference over at headconference.com and I’ve got to say, this does look absolutely incredible. Am I right in saying that also people that have attended the conference, there’s no way you’re going to be able to listen to all 70 speakers over those couple of days. So they can go in and watch the videos after the event? Is that right?

Aral: Yep, all of the videos are going to be recorded and you’ll be able to watch them at any time.

Paul: So I mean, absolutely superb for a $149 or whatever it is, that’s an incredible deal and you will never come across a conference that’s got quite this line-up of speakers, and certainly of course, you don’t have to pay for hotel bills, you don’t have to pay for travelling, and you don’t even have to pay for time out of work.

Aral: Exactly, yep.

Paul: Sounds pretty good. Aral, thank you for coming on the show and we’ll get you back again in the future.

Aral: Thank you Paul, oh it will be great, I love being here.

Paul: Ok, good to talk to you.

Aral: Take care, Paul.

Listeners feedback:

Review of Stackoverflow by Teifion

I’m a developer not a designer so if you understand my incoherent babbling please keep in mind that this review probably won’t be as useful for designers but please, fall asleep after I stop talking.

About a month ago I joined a site called Stackoverflow. Essentially it is a cross between a Forum, Digg/Reddit, Wikipedia and a Blog; you ask questions and answer questions, you also get answers to your questions and you generally get them very fast. It is now in public beta.

It’s a simple idea that could be great and could also be completely useless. Jeff Atwood and Joel Spolsky have managed to make it very useful.

Now it’s time to add some actual content to the review or Paul will call me silly names again. Questions in Stackoverflow are allowed to be on any language or topic related to programming and here’s where the designers might be interested, this includes source control, HTML, CSS and even things such as keyboard layouts.

The question that you should ask yourself right after "why am I listening to Teifion" is "Why is this better than google?". The answer is a simple one, Google cannot look at your site and tell you why a div is wider than you want it to be while a site with 8000+ members probably can. I am given answers to my questions within 5 minutes bar I think 2 obscure questions.

Don’t feel that you are too new for the site either, you can ask anything from very simple to very complex questions, anything from "what is a class?" to "how do I benchmark a PHP or Python script via the Unix terminal and not from within the script itself?".

I strongly recommend that everybody check it out.

Don’t Get Blacklisted By Google

Jason from Toronto recently wrote to me with a questions about search engine optimisation:

I am desperate to improve the search engine ranking of my company website but I am confused by the contradictory advice online. We have even considered hiring an SEO company, but aren’t sure who is reputable. The last thing we want is to be blacklisted. Do you have any advice which might help?

It is true that Google comes down hard on sites who disregard their webmaster guidelines. Probably the highest profile example of this was when they effectively removed car manufacturer BMW from their search results for using doorway pages.

136. Stagnation

Posted in Classic shows on September 24, 2008 by Paul Boag

In this week’s show we talk about overcoming stagnation and Ed Merritt shares a technique to achieve fixed footers without the use of javaScript.

Download this show.

Launch our podcast player

News and events

Design by committee vs design by community

We all know that design by committee sucks, but why? What is it that makes the process fail and what would happen if you took it to the extreme, and opened up the design process to an entire community?

That is exactly what Mark Boulton has done with the redesign of the Drupal website. With over 200,000 registered users this is a significant community and not the kind of environment where you would feel inclined to design in the open.

However, according to Mark it has generally been a success.

The key would appear to be scale. In design by committee you typically have a handful of decision makers, and one or two dominant individuals who overwhelm the others. It is an environment of conflict and compromise.

However when designing by community, the sheer scale of the community drowns out anybody who seek to dominate the process. You move from an environment of personal opinion to one where you are monitoring emerging trends.

So next time you have a client wanting to design by committee, consider opening up the process rather than locking it down to one or two decision makers.

Self Directed Projects

When was the last time you worked on a personal or internal project? Do you do anything that is not paid client work? If not, then according to IdeasOnIdeas you should start.

This post interviews several designers about their their non-client work. It becomes obvious as you read that self directed projects offer real tangible benefits. These include…

R&D – The chance to experiment with emerging technologies and techniques, that otherwise you would not get to try out.

Build visibility – Higher exposure online as people are attracted to your work.

Prove capability – Demonstrating your ability to deliver solutions not in your portfolio of client work.

Increase skills – Allowing you to improve your skills in areas where they are weak or have not been maintained.

Team building – Building a sense of common purpose among your team in a way that is more engaging than client work.

Creates passion – Allowing you to work on a project that generates excitement rather than ones that simply pays the bills.

As a release mechanism – The chance to play, and let off steam after the limitations of client work.

After years of spending all my time on client work, I have now reached a point where most of what I do is self directed and I can honestly say it is a joy. I also think it has been hugely beneficial for Headscape.

Understanding Disabilities when Designing a Website

Back when I was a teenager the government launched a massive campaign warning of the dangers of unprotected sex and in particular the risk of contracting HIV. It was a very powerful campaign and led to a generation growing up much more aware of the risks. However this campaign wasn’t followed up for the next generation and the rates of sexually transmitted diseases increased.

Why do I bring this strange analogy up? Because I believe we are in danger of doing that with web accessibility. Many of us are getting bored of talking about accessibility. It feels like we are covering the same old ground. Why do we need another article about accessibility basics? We have heard it all before, right?

Well maybe some of us have, but there is a new generation of web designers who have not. They need to know what we take for granted. Also, it wouldn’t hurt us to be reminded every once in a while.

That is why I was so pleased to see Digital Web publishing an introduction to accessibility this week. Sure we have heard it all before and you might be tempted not to bother looking it up. However, I would encourage you to take the time. I guarantee it will give you at least one piece of advice which you fail to implement currently.

More ways to find inspiration

I often talk about how we need to look for inspiration beyond the web. In fact in this weeks Smashing Magazine, they post some incredibly inspiring graffiti that is worth a look. But, can we be inspired by other websites or does that always end in plagiarism?

It’s a dangerous game when you start turning to gallery sites for inspiration. Before you know it you can find yourself lifting far too much of the design.

How then can you be inspired without ripping off somebody else’s website? One way is to look at the design and ask yourself which specific elements you like. Is it the navigation, their styling of bullet lists or the way they handle the footer. By looking at individual elements rather than the whole you remove the temptation to copy the entire thing.

This is what a designer from Portugal has done. He has made screen grabs of websites and placed them in his flickr account. However, rather than grabbing the entire site, in most cases he captures only a fraction of the page. He removes the temptation to steal a whole design and yet provides himself with inspiration next time he needs to design a comment form or build an online calendar.

Take a look at his inspirational flickr feed and hopefully it will encourage you to take a similar approach.

Feature: Overcoming Stagnation

For many websites the days of rapid growth have passed and they have slipped into stagnation. How then can you re-energise a site and start it growing again? We look at this in this weeks feature.

Listeners feedback:

Fixed Footer without javaScript

Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

Ed begins…

A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough. Read more here.

Too many content management systems

Posted in Development on August 8, 2008 by Paul Boag

I know we live in a capitalist society. I know we are supposed to believe in choice. However, there are just too many damn content management systems. Another extract from the Website Owners Manual

Let’s face it, most content management systems look the same there days. They all offer very similar functionality. After all, most people want similar things. Once you have narrowed the field by price it can be hard to make the final decision.

However, functionality and price should not be the only criteria by which you make your judgement. There are a number of additional issues which need considering. In many ways these are just as important.

These include:

Licensing
The development team
Security
Accessibility and code quality
Documentation and training
Support
Community

We should begin by looking at the subject of licensing.

Licensing

Examine in detail the license attached to your choice of cms. It is not uncommon to find licenses that state you can make no change to the source code or use a alternative developer.

You may also find that licensing is per site or worse still per user. This can become very expensive if you want to setup multiple sites or have a large number of content contributors.

Ideally you want an agreement that allows unlimited use of the cms with the exception of reselling.

The development team

Look carefully at the development team behind any cms you are considering. For example is it an open source project with a community of developers or the product of a single company?

Neither approach is wrong. However you need to be confident in the long term health of the product.

Open source projects can be highly productive despite often being created by volunteers. That said, they can die off quickly if a more attractive project comes along. If you are considering an open source solution look at the age of the product. Mature products are more likely to remain supported in the long term.

With a commercial product you need to be confident in the long term viability of that company. Consider requesting a copy of their accounts to confirm their financial stability.

In both cases look for a team that are regularly releasing updates to their system. This is particularly important from a security perspective.

Security

Security is an important issue for any content management system. If your site is hacked you could loose content and find yourself in litigation if hackers get hold of your users personal data.

Judging the security of a content management system is not easy unless you have technical expertise. If unsure, get an experts opinion. However at the very least you can do a google search on the name of the cms and ‘security issues’. If you see lots of results then you will definitely want an expert opinion.

Accessibility and code quality is another important, and yet hard to judge, issue.

Accessibility and code quality

As we established in chapter 7 it is important to build using the latest best practice. This ensures your site is accessible and provides the flexibility to adapt over time.

Judging whether a content management system uses best practice is difficult if you are not a web designer. However, talk to the cms developers about their approach to accessibility. Equipped with the knowledge from chapter 7, you should be able to get an indication of their competency.

One aspect of best practice we have yet to discuss are webpage addresses. For a long time content management systems produced addresses that were hard to read. For example:

http://www.boagworld.com/index.php?sourceid=navclient&q=4

However, more recently content management developers have realized this is hard to read and damaging to search engines placement. Therefore modern content management systems produce addresses that look more like this:

http://boagworld.com/technology/friendly_urls/

This is a huge step forward and also allows the web address to be used as a navigational tool. Users can identify where they are in the site and even edit the url to find different pages. For example if the above address is shortened to:

http://boagworld.com/technology/

it will return all pages within the technology section.

Whenever possible look for systems that support friendly urls. They are a good feature to have and provide an indication of how up-to-date the practices of the developers are. If a cms supports friendly urls they probably support accessibility and standards too.

Additional information on best practice should also be made available through the documentation that supports the cms. This too is an important differentiating factor.

Documentation and training

Good documentation is a crucial component of any cms. As I have already said, content providers may not be using the system on a daily basis. They can easily forget how it works. Documentation should therefore be comprehensive and easy to use. Some content management systems also provide walkthroughs and video tutorials. These also help users understand how the system operates.

There should also be documentation for developers too. This will enable your web team to adapt the cms to better suit your needs. Without this it can be nearly impossible to work out how the cms works.

Alongside documentation, training is another useful resource. This is important for content providers who need more than a manual before they start using the system. Training provides them with hands on experience and the opportunity to ask questions.

No matter how good the cms and supporting documentation, there are occasions when you will require additional support.

Support

You need to ask some hard questions about support. What happens if you identify a bug in the content management system? Will you be required to pay for the fix? How fast can you expect a response? Do you require 24/7 support?

You need to know your requirements and have a good understanding of what the cms provider can offer.

Beyond fixes, there are broader questions about help. If you have a problem with the system is there somebody you can turn to for advice. Do you have to pay for this support and when is this support available?

Of course not all content management systems come with support. It is unusual for anything but enterprise level systems to offer this option. If it is not available you need to look at whether the system has a vibrant community.

Community

The community is made up of other individuals who use the cms. They share advice and experiences via forums, mailing lists and support sites. Such communities are particularly important for open source content management systems because these products rarely offer formal support and training. However, many commercial products also have excellent online communities.

A good community will be able to answer questions, offer support and even make available a range of plugins that can be used with your cms. Before investing in a cms ensure it has a vibrant community. Visit the support site and look at how many users are registered and how often they post. Examine the kind of topics people are discussing and particularly how supportive they are to new users. It is not unusual to find apparently vibrant communities that are hostile to new users asking ‘dumb questions.’

For more from the Website Owners Manual and early access to chapters as they are written go to the books website.

123. Plight

Posted in Classic shows on June 25, 2008 by Paul Boag

In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

Podcast: Download (30.4MB)

Download this show.

Launch our podcast player

A quick request. We are really in need of some more transcribers to help with the interviews we do. The team we have are doing an amazing job but it would be great to spread the load.

If you feel you could help once in a while please drop an email to Ryan our producer and he will add you to the list.

News and events

SPAM meltdown

It is always with fear and trepidation that I mention HTML email. It inevitably leads to a torrent of comments ‘educating’ me about the evils of HTML in email, and that we should only use plain text.

Although personally I wish HTML email was never invented and try to limit its use, I do accept it is here to stay. Despite its many drawbacks it is statistically more effective than plain text from a marketing perspective.

You will be hard pushed to pursued a client to forgo HTML. Inevitably we will have to produce HTML templates occassionally. Of course, being conscientious, when we do produce HTML emails we want to ensure they look great and are well coded. This leads me to a couple of stories worth mentioning.

The first is that Patrick McNeil (of Design Meltdown fame) has launched a new site called Spam Meltdown. The site showcases examples of great email design in much the same way as Design Meltdown does with websites. Patrick has done an amazing job on this site and he has my sympathy because he is subscribed to over 1000 mailing lists! The designs he showcases are organised by style, colour, industry and topic. As with design meltdown this categorisation approach works really well. You can quickly find inspiration by looking at categories that are relevant to your project.

The second news item worth mentioning is that Campaign Monitor have updated their chart for CSS support in email clients. Campaign Monitor is a service which allows you to send HTML newsletters, but they do a lot more than just take your money. They are actively involved in improving standards support among email clients through the email standards project. Next time you are trying to produce an HTML email template check out their CSS support grid as it will clearly show you whether a particular CSS property is supported.

Form Analytics

While I am on the subject of cool services like Campaign Monitor, I also want to mention Clicktale. Clicktale is a service that allows you to track users as they move about your site and even anonymously record their actions. The last time I mentioned them this disturbed many people who saw it as an invasion of privacy. However, I see it as a valuable tool for learning about user interaction and improve site usability.

If you share my view, then you maybe interested in a new service they are starting to offer. You can now not only track users as they click around your website, you can also watch how they interact with forms.

In addition to video recording, the new form analytics service also provides three invaluable reports…

The time report – This shows how long users spent completing each field.
The blank report – This provides information on fields that have been left blank on submission.
The refill report – Which highlight fields that have been completed incorrectly.

If you run a site that requires users to complete long or complex forms then you will see the benefit of this service. On a high trafficked ecommerce site this would be invaluable, substantially reducing the number of users dropping out at checkout.

Art direction hits the blog

This week has seen the launch of Jason Santa Maria’s new personal website. For those of you who do not know, Jason is the creative director at Happy Cog (Zeldman’s company).

Normally, I would not mention the launch of a new personal website. However, Jason has done something very interesting. His new design is well executed but plain. It certainly is not as inspiring as his other work. The reason for this simple approach is that it is a framework upon which he will build.

The idea is that each of his blog posts will have a custom design to accompany it. The design will therefore reflect the content. In effect he is bring art direction to his blog. This is a bold experiment and something that Zeldman has written about before.

Although I am fully behind the idea of bringing content and design closer together, I do have some reservations. First, there is a possibility that the constantly changing design could make navigation around the site confusing. Fortunately from what I have seen so far that will not be the case. Jason has been careful to ensure key navigational elements remain in a consistent location and have similar styling wherever you are in the site. However, if other designers were to adopt this approach would they be so careful?

My second concern is a purely practical one. If each article not only needs writing but also designing, will that reduce the amount Jason posts? In other words is a blog really the right place for this type of art direction?

However, despite these reservations I am really pleased Jason is trying this approach. A personal website should be the place to experiment and try new things. Too many blogs (including my own) are cookie cutter solutions with some pretty graphics slapped on top. Its superb to see somebody doing something different.

Prototyping

My final news story of the week returns to a subject we have touched on recently. How do you wireframe a modern web application with its high level of interaction? In show 120 I mentioned that one approach might be to utilise flash. Today I want to point you at an article on the List Apart website, which suggests that building prototypes maybe better than struggling with wireframes.

When I first saw this article I was hesitant. After all I can barely pursued my clients to pay for wireframes let alone a full blown prototype. However, the more I considered what was being suggest, the better the idea seemed.

The majority of time spent getting an application working is spent on bug fixing, browser support and non-core functionality. The rough ‘outline’ of an application can come together very quickly. What is more, unlike wireframing, a prototype can be used as the basis for the final build. It does not get thrown away like a wireframe.

The article also points out that prototypes are better for demonstrating difficult concepts to clients. They encourage earlier collaboration between designer and developer, and provide something substantially better to user test against.

With almost every new website having some form of web application, we all need to consider how to better conceptualise their operation.

Feature: The plight of the in-house designer

The more organisations I work with the more sympathy I have for in-house designers and developers. It is a role that can be thankless and isolating. How then can their lives be made that much easier? We discuss this in this weeks feature.

Reviews: Textmate and Top 5 Tips for Web Designers

We have two reviews this week by our lucky competition winners Teifion Jordan and John McFarlane. Teifion and John will be going to this year’s dConstruct in Brighton.

dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications. Tickets cost £125 inc VAT and went on sale yesterday so be sure to check it out.

Textmate by Teifion Jordan

Hi, I am Teifion Jordan, I am reviewing a program created by someone far smarter than me. I am going to be looking at Textmate. Textmate is a Mac only application though there is a similar editor called eText Editor for Windows.

First impressions of Textmate are that it’s pretty sparse, it looks like any other editor. I throw it a PHP file and it colours the text in, just like any other editor would. The colour scheme can be changed, both text and background colours can be altered, which is quite a neat touch. I can even make parts bold, italic and underlined which is a neat touch. It requires knowledge of Regular expressions but I can actually add in more rules for what to colour in! I used this to make variables used as array indexes appear differently, something I have wanted to do for some time. Not since I was a toddler, but definitely some time.

But enough moaning about how the program itself is both smarter and better looking than me, I wanted to try some code. I found that if I typed "foreach" in a PHP block and hit tab, I was presented with an entire foreach loop. Closer inspection revealed that there were dozens of snippets and commands for PHP and dozens more for each of the many languages and some things that were not languages. With 5 minutes of effort I had setup Textmate to post my blog posts for me, I am now one step closer to not having to put any effort at all into blogging.

It is possible to create your own snippets and not at all hard either. I now have one to tell me that I am beautiful and another to create a PostgreSQL query. I can also write new commands, I can write them in command line script, Python, Ruby and PHP to name a few. All of the commands are completely open sources, so you can see what’s already been done, and sort of plagiarise that sort of work for your own means. Except plagiarism is bad so don’t ever do it.

I can edit columns, I can write new snippets, commands and even entire languages, I can Regex, I can manage projects with a hierarchal file structure. It’s like before I was walking but now I’m on a push bike. I can’t make use of the ability to run down pedestrians until I learn how to do balance and pedal. Okay, the running down pedestrians was a bad example but anybody that is still listening and not calling the police must have understood it so I’ll continue. There’s nothing I can’t do in Textmate, I just need to look at the extensive online manual to learn it. And there I think is it’s biggest failing.

Textmate is a really lovely program to use but it’s so complicated. Coda, as a contrast, is a more intuitive application but it is to Textmate as a spade is to a chainsaw, that is, meant for a different problem and with fewer moving parts but also with the ability to digs holes? I’m sorry, my mind wandered. What I meant to say is that Textmate is great for dealing with code but not so much the design which is what apps such as Coda excel at. I’ve now been using Textmate for 10 months and I still think there is potential to unlock, though, that might be because I’m a thickie.

I suppose I should wrap this up by saying that I would heartily recommend anybody thinking about writing lots of code to give TextMate a good look. It takes a lot of time to get a lot out of it, but there really is a lot to get out of it.

Thank you very much for listening, I hope this was at least semi-informative

Top 5 Tips for Web Designers by John McFarlane

Hi, I’m John McFarlane and this is the first ever review brought to you live from my living room. Today I’m reviewing a post that has been submitted on the boagworld.com forum. The title is "Top 5 Tips for Web Designers". I’ve been reading through the replies and I’ve put together my top 5 top tips.

In at number 5 submitted by richquick, allow time and money for personal development, read blogs, buy books, attend conferences, experiment and learn new techniques and technologies.

In at number 4 posted by Jayphen, surround yourself with designers, whether they’re colleagues, real world contacts, online contacts, forums, podcasts. The more you talk about design the more you learn and I’d like to add to that e-mail designers for advice and let them know your experiences.

In at number 3 posted by some guy called Paul Boag, develop with the latest best practices, ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancements.

In at number 2 another one by Paul Boag, it’s an obvious one but one that can’t be put across more clearly, know HTML, CSS and javaScript inside out, you need to know the core technologies that underpin the web back to front. I’d like to add to this point, the basics of HTML and CSS are easily learnt but don’t be fooled into thinking that you know enough, you really need to know these subjects to an advanced level. This will benefit you when your implemented the latest best practices.

And that brings me on to my number 1 tip and that is love your job, I think if you love this industry and have a passion for web design, I think those qualities will guide you to achieve your goals. So enjoy your development and don’t rush yourself too much. Take the time to develop the right way, build contacts and friends and embrace the industry as a whole.

That about raps up this weeks review. I hope you’ve enjoyed the very first show live from my living room. Thank you and goodbye.

Listeners feedback:

Newspaper columns on the web

Adrian writes: Hey guys, long time listener from the states. I’ve been working on a new personal site lately and I’ve become fixated on the idea of using newspaper style columns. Since you two seem to know a thing or two usability, I’d figure I’d ask for your thoughts.

It seems like most people view them as a print concept that doesn’t translate well online but seeing as most screens these days are widescreen and vertical space is taken up by menu bars, docks and browser extensions, going horizontal strikes me as a logical solution.

I appreciate the logic. It is true that more computers than ever have widescreens and that vertical space is at a greater premium than horizontal. However, I would think very carefully before employing newspaper style columns. As I see it there are two concerns:

The usability concern

As you point out, people reference usability concerns as the primary reason against newspaper columns. In a newspaper, copy runs across several columns with the eye darting from the bottom of one column to the top of the next. This is acceptable because the user can view the entire newspaper in a single glance. There is no such thing as a scroll bar.

On the web it is different. You are unable to predict the height available in a browser window and so users will almost certainly have to scroll. This means the user will scroll down one column as they read and then have to scroll back to the top to start the next column. This is far from a pleasurable reading experience.

It is also important to consider width as well as height. As you say newspaper style columns works well on high resolution, widescreen monitors. On anything less the story becomes unreadable with narrow columns and short line lengths. The alternative is to allow both horizontal and vertical scrolling. But as I am sure you, know this is the ultimate usability error and should be avoided at all costs.

The technical concern

There are also technical considerations to take into account. How will a story be split over multiple columns? Currently this cannot be done in CSS, although this may appear in CSS3.

One option would be to manually layout each block of text. However, this isn’t going to be practical with anything other than the most static of sites.

The only option is to use some server side code. However, even this is not without its problems. Consideration needs to be given to inline elements such as images or quotations. What happens if they appear at the end of one column? Does a quote get split? Will the design accommodate larger images? What happens when text is scaled?

Although all of these technical problems can be overcome, you are forced to ask whether it worth the effort. This is especially true considering the serious usability concerns.

Estimating dev/creative work

Kirk Henry asks: I’m not sure if this should be listed as a question or not but her goes. I’m a Creative Director for a dev shop with some very large fortune 500 companies and a problem I always seem to come across is difficulty in the estimating process. We use excel documents, have some standard hours for comps but have to do custom estimation for multi media projects etc… my estimates are always pretty decent but I want to know what you guys use or what software you would recommend. I have been listening on itunes from the start and love the show.

Ok, this is probably the most important subject that we (and I mean the web community) don’t talk about. Why? I think, because it’s difficult to pin down a method of reliably estimating a project and, more so, we’re all guilty if underestimating time and again… these are my thoughts:

The first thing to ask yourself is ‘how serious is this project?’ I have a sixth sense for requests for quotes that fit into the following brackets:

‘We have this idea but have no idea how much it will cost and we want you to do all the research work involved in scoping it. Of course we won’t pay for the research and there’s no way we’ll pay sensible money for the work once we know what it is’
‘We have a supplier that we want to work with but my boss says I need a couple of other quotes’
‘Us guys in sales and marketing have been doing some blue sky thinking and want a quote to redevelop Google….’

You get the idea – timewasters. You need to deal with these requests quickly – this is how I do it. Have a chat with whichever department(s) would do this work if it ever materialised – get them to give you wide ballpark figures. Add in PM and contingency and send them an email. 99 out of a 100 won’t even bother getting back to you. Some will, but they’re usually trying to get free scoping (‘can you give me a bit more detail on how you reached those figures’).

Anyway, I’ve ranted long enough timewasters, back to Kirk’s question.

First question – do you know the budget? If yes, then you are looking to fit a scope into a set amount of effort. Can you do it? Will the ‘client’ be happy with the scope that fits their budget? Do they understand what that scope is (especially if you have reduced it to fit their budget)? DO NOT get creative with your effort allocations just to fit within the budget. Either ask for more (up front) or walk away.

If you don’t know the budget then you are looking to scope a project from scratch. If it’s a really big project then ideally you should be being paid to scope it as we’re looking at business analysis and consultancy here.

Break down the project into rough task areas. It’s likely that you’ll have done other projects that include similar tasks so you’ll know efforts on these (though ask yourself if you got it right last time). For the ‘new’ tasks, break it down further and you will probably find other smaller tasks that you have done before. For the really new stuff then you need to talk to an expert (designer/developer/IA) and get them to think the task through. They will provide you with an informed guess. That’s right – guess. Because people are guessing it is really important to overestimate fixed price projects. This is the cost to the client of having a fixed price.

Don’t forget to charge for meetings (if 3 people are attending then charge for 3 people!). Project management is notoriously undercharged. We have a rule of thumb of 15 – 20% (and that’s probably light).

The golden rule of estimating is don’t be tempted to lower your probably already too low price just to win the work. Be prepared to walk away.

As far as tools to help with estimating go, MS Project is great at separating tasks, linking resources to tasks and giving you a good idea of how long things will take. But, I tend to find that it is over the top at the quote stage and tend to stick with Excel.

Quick fix accessibility

Posted in Accessibility on June 9, 2008 by Paul Boag

Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your sites accessibility.

The Pareto principle (also known as the 80/20 rule) states that, for many events, 80% of the effects come from 20% of the causes. This is true for accessibility where a small number of issues cause the vast majority of problems. But what are these issues? That is a subjective question, but here are my top 5:

Poorly described images

By now you probably all know that images should have associated alt attributes, which describe them to visually impaired users and search engines. However, a related problem is the content of these alt attributes.

Many people have realized the benefit of alt attributes for search engine placement and so stuff them with keywords making them far too long.

All content images should have an alt attribute that clearly describes what is being shown in a concise manner.

Badly labelled links

It is not just images that are labelled badly. There are also problems with links. The text contained within a link should describe that link without context. This is because screen readers have the ability to read all links on a page as a single list. Users can then quickly navigate without listening to the entire page. However this is problematic because a link entitled ‘click here’ does not explain where it leads. A better link would read ‘click here for latest news’ or simply ‘latest news’. Where a longer description is required a title attribute can be added.

Descriptive links also help sighted users to quickly scan for the next page to visit.

No alternatives to media

It is not just images that need describing. When using video, audio or any form of media that requires a plugin (that some users may not have) it is necessary to provide an alternative version. This alternative should either be in the form of a transcript (in the case of audio) or captions (in the case of video or other media where visuals and audio are synced).

At first glance this seems a massive undertaking. However, there are a number of services like castingwords.com who provide transcription at a very reasonable rate. There are also tools like overstream.net, that help create captions.

Reliance on Javascript

Javascript is a programming language that can be used to achieve many of the interactions we see on websites. From popup windows to services like Google Maps, Javascript is amazingly flexible and heavily used.

Javascript is not inaccessible. In fact it was created by the W3C and sits alongside HTML (which provides the content) and CSS (which provides the design) as the language which provides behavior. The problem is not the technology but the implementation.

Not everybody has access to Javascript. Search engines in particular tend to ignore it. It is important that all content is accessible even when Javascript is turned off. The most common problem is using javascript to create navigation and other links. If Javascript is not available it is impossible to follow those links to the content beneath. Equally when Javascript is used to add content, this becomes inaccessible if Javascript is disabled.

The simple rule is to never rely solely on Javascript as a method of accessing content.

User controlled text

The final accessibility mistake I see regularly is text that cannot be resized. By default all major browsers allow users to set the size of text on a webpage. This is needed because website owners cannot predict users visual requirements. Most people with visual problems need to be able to increase font sizes. However, there are some visual impairments that require smaller text to fit within a limited field of view.

Although browsers provide this functionality by default, many web designers disable it. To be brutally honest there is no good reason for this beyond laziness. By fixing the font size the designer reduces the burden of testing but it provide no other tangible benefit. In short, ensure the fonts on your web site are scalable.

By addressing these five problems you will dramatically improve the accessibility of your website. None of these issues are particularly hard to overcome and the financial investment is minimal. However, by doing so you will increase the amount of traffic to your site and the number of visitors able to successfully navigate it.

Coda

Posted in Reviews on May 27, 2008 by Paul Boag

Find out why I am seriously considering abandoning the code editor I have been using for over a decade in favour of Coda for the mac.

I can’t remember when I first started using Dreamweaver but it would have been at least 1998. In those early days I was attracted to it because it could code all of the HTML soup that was necessary for table based design.

When I made the transition to standards I returned to hand coding but after some investigation I could find no better coder for me than Dreamweaver. It did everything I required and so I saw no reason to spend money on a new application.

I regularly look at emerging editors but nothing has tempted me to change. After all you cannot teach old dogs new tricks and changing editor seemed like too much work. That was until I came across Coda. I haven’t made the transition yet but I am seriously considering it.

So why am I tempted to leave Dreamweaver behind? What makes Coda so good?

Why Coda?

Its not that Coda is revolutionary. However, it is extremely well considered and has a clean, easy to use interface. They get the basics right including auto-complete, syntax highlighting and integrated FTP. However, in addition to this they add a number of extras which I am finding hugely useful.

Features

The following are the features that impressed me the most (even though they are far from perfect)…

Preview

One of the most impressive functions is the preview facility. I always liked the WYSIWYG function in Dreamweaver even after I moved across to standards based design. I could pull up the design view and click on an element to jump to the appropriate piece of code. On larger more complex pages this was incredibly useful. Unfortunately the Dreamweaver design view was far from WYSIWYG. It rarely rendered a page correctly, and so as my hand coding became more sophisticated it struggled to keep up.

Compared to Coda this looked positively prehistoric. Coda provides a constantly updating preview rendered by Webkit so it looks exactly the same as it would in Safari. What is more it provides basic debugging tools including a Javascript log and the all important inspector which allows me to click on an element in the preview mode and jump to the appropriate code.

My only criticism of the functionality is the constant page refreshes in preview mode. If you are working in split screen this can become distracting after a while.

Symbols

Talking of jumping to a specific place in the code there is also a great tool called symbols. Not the most descriptive name but incredibly useful. Symbols is an interface element that lists all the headings, divs with ids and comments in the current HTML page. You can then click on anyone of these to jump to the specific place in the code.

Clips

Two things I specifically like about Dreamweaver were snippets and configurable keyboard shortcuts. Snippets allowed me to keep a library of useful code that I could drop into the page. Keyboard shortcuts were excellent for quickly adding code without resorting to the mouse.

Coda solves these two problems using clips. Clips are essentially snippets but with the ability to add text expanding shortcuts. For example if you type ‘href’ and then press tab it will add a complete href link with the cursor placed at whatever point you specified when you created the clip.

Although clips are good they are not in my opinion quite as good as snippets in Dreamweaver. For a start you cannot organise your clips into folders which is important as the number of clips increases. Secondly although the text expanding function is useful it does not allow clips to be wrapped around an existing bit of code. This initially appears to only be possible by double clicking on the clip itself (requiring the mouse).

After some experimentation I discovered you could setup keyboard shortcuts in system preferences. However this doesn’t appear to be documented anywhere.

Find and replace

One feature that in my opinion blows Dreamweaver away is the find and replace interface. I have written before about how I like Dreamweaver’s find and replace functionality, however I think Coda’s is even better.

What makes Coda’s functionality so nice is that it easily allows you to add multiple wildcards into your search query. This allows you to be very specific about what code you wish to change and what you want to keep intact.

Unfortunately, although building the queries is a breeze, the scope of each search is seriously limited. You can only find and replace within the current document. Compared with Dreamweaver which allows you to search across all open documents, an entire folder or the whole site, this seems painfully limited.

Nice CSS interface

The final feature that has caught my eye is the CSS coding environment. I have to confess I am yet to put this through its paces, however what I have seen so far has impressed me.

Although it is possible to code CSS by hand there is also a graphical user interface which guides you through the process. I am not entirely sure how much I would use this but it does have some nice features. One I particularly like is that it provides an ordered list of all the styles in a panel at the side of the screen. You can then reorder them using drag and drop. Also, if you are in split screen mode, clicking on a style jumps you to the appropriate place in the code.

Will I, won’t I

So will this dog decide to learn a new trick? I am still not sure. At $79 the price is excellent, however when you have already spent several hundred dollars on one application, shelling out more seems unnecessary. Also the lack of site wide find and replace is frustrating and means that I cannot really get rid of Dreamweaver completely.

That said, I love everything else about this application. I will no doubt get comments suggesting I try Textmate and numerous other editors. Trust me, I have tried them all. However, nothing has managed to tempt me away from what I have been using for years like Coda.

Given a choice I would live with the application for a while longer. However, for some reason I only have a 12 day trial so I will have to make a choice soon. What I do know is that if I hadn’t already spent money on an editor and had years of ingrained habit, then I would definitely choose Coda.

Location aware

Posted in Development on May 19, 2008 by Paul Boag

The web is full of exciting innovations at the moment. However, it is geocoding that personally excites me the most. In this post I explain what it is and why I believe it offers so much potential.

I am definitely not an expert on geocoding but I have been aware of the idea for a long time. I first encountered the concept back in the late 90s. At the time it entirely passed me by and I couldn’t see why the person explaining it was so excited.

“Just imagine the possibilities if every file had a location stamp like it has a date stamp”

I obviously lacked imagination. It all felt too theoretical. Too far off.

Later the concept was reintroduced to me, but this time all I saw was a world of adverts being pushed to my mobile phone as I walk by the local starbuck. Who wanted that?

The lightbulb finally switched on when I heard Tom Coates speaking at d.construct last year (Download Tom’s talk: MP3). He talked about a project he was working on called Fire Eagle that allowed applications to pass your geo location back and forth.

Geocoding is a reality now

Nine months on and I have finally got to play with Fire Eagle. I no longer need imagination to see the potential, it is no longer far off. Geocoding is here and boy am I excited.

For me the real power of geocoding comes because of mobile devices. Once your mobile knows where you are the possibilities are endless. My iphone for example lacks GPS but it can work out my position based on cell towers and wifi networks. This enables me to do lots of things…

I can attach my location to twitter posts and see other twitters nearby. (via Twinkle)
I can upload photos with location information and see other photos taken from my current location. (via iFlickr)
I can view wikipedia entries of nearby locations.
I can broadcast my current location to my blog.
I can see which of my friends are nearby (presuming they too broadcast their location). (via Navizon)
I can find local restaurants, events and other points of interest.

All of that I setup for myself in a couple of hours. I haven’t even scratched the surface of what is to come.

The website owners perspective

This is not just something consumers should be getting excited about. It offers huge potential to website owners as well, because it provides users with new ways to access their information.

Consider for a moment what information you hold that is location specific. Do you have physical outlets (or other points of interest) that could be geocoded so users can easily find them? Maybe the content on your site relates to a geographical location (for example a university website). Or would users find it useful to know where you wrote a particular page of content (maybe a travel blog)?

I am the first to admit that geotagging is still in its infancy. However, there is no doubt it is on the cusp of going mainstream. Consumers have adopted car navigation systems very quickly and are familiar with adding points of interest (at least where speed cameras are concerned)! It will not be long before that experience makes the leap to mobiles.

It maybe premature to add location information to your data. but it is certainly the time to start thinking about what information you have that could be geotagged.

For more on geotagging and fire eagle listen to our upcoming interview with Tom Coates on show 118.

Question: Headscape tabs

Posted in Accessibility, Development on May 16, 2008 by Paul Boag

David Bridle writes: How did you get the tabbed menu to work in the headscape website?

The navigation on the Headscape website is built using the Javascript library jQuery. I have mentioned jQuery a number of times before so I won’t bother to repeat myself here.

I don’t claim to be a javascript expert but I have made Headscape as accessible as I know how. I am sure there will be people out there that could have done a better job but I will share what I did (for better or worse).

I am not going to get into too much code as I am not the right person to teach that. I also think it is more important to show you the techniques rather than post code that can be copy and paste into your own site. If you want to learn how to actually reproduce what I have done then I recommend the excellent documentation on the jQuery site or the designers guide to jQuery.

Choosing AJAX

It was important to me that the content found under each tab was accessible with Javascript disabled. My initial thought was to include all of the tabs in the page load. However, it quickly became obvious that this would make the download too large and would not allow for adding content in the future.

Eventually I concluded that I wanted to use AJAX. Using Jeremy Keith’s HIJAX approach I built one page for each of the case studies found under the tabs. I then linked to these from the homepage tabs using normal hrefs. Clicking on each tab would load the appropriate page.

Each of these individual pages were complete with a header and footer as well as the content I wanted to include on the homepage.

The Javascript

The next step was to create some javascript which prevented the default action of loading the entire page, and instead load only the portion I wanted.

This was achieved with a function that was triggered on clicking each tab. The function was attached unobtrusively (rather than included in the HTML itself) so I could easily remove it later if I wanted to alter the way the site worked.

The function carried out the following actions:

It captured the url of each link
$("#csMenu a").href
Append to the links the specific element I wanted to import using AJAX
var addr = $("#csMenu a").href + " #caseStudies
Load that content into the appropriate place on the page (which had the id = csCont)
$("#csCont").load(addr)
Applied some of the inbuilt effects in jQuery to make the animation fade in and out.
Prevented the default action
return false;

In reality it was slightly more complex because I needed to trigger additional functions to add a popup facility to some of the links within the imported content. However, fundamentally that was it.

The problem with AJAX

The only problem that remained were screen readers. Although the site worked with Javascript disabled the use of AJAX would confuse screen readers. Without getting too technical Screen readers are able to run Javascript but don’t always realize when AJAX has updated the page.

A lot of people cleverer than me have been struggling with this issue and failed to come up with a solution. That is why some developers such as Brothercake recommend against the use of AJAX.

I had good reasons for the choice of AJAX (which I won’t get into here) and so had to find a solution. This ended up being a simple hidden message telling screen reader users to disable Javascript. Thisl enable them to navigate the additional pages without problem. This message was the first item within the body tag and was hidden using CSS so it was only heard by Screen reader users.

No doubt I will receive criticism for this decision and to some extent rightly so. It presumes users know how to disable Javascript in their screen reader. Even if they do, it is not an ideal solution. Users should not be required to change preferences before they can view a site. However, the state of screen readers is far from ideal either, and it is was the best compromise I could find.

So there you have it. That is how I produced the tabs on the Headscape website. I would be fascinated to hear what other approaches people would have used. How could I have done it better?

Friendly web addresses

Posted in Development, User experience on May 11, 2008 by Paul Boag

When redesigning boagworld considerable time was spent formatting the sites’ web addresses. In this post I explain why so much time was taken and introduce you to the tools I used.

Website owners are beginning to realise that the address of each web page is a crucial part of its design. These friendlier website addresses provide three benefits:

Memorability
Better navigation
and improved search engine placement

Understanding these benefits provide a small but significant advantage over the competition.

Memorability

For Boagworld, the major consideration was ensuring my web addresses were memorable. If you have ever listened to the podcast you will know that each week I refer users to the shows notes by saying something like…

Go to boagworld.com/podcast and select show 114.

I did this because the address was too long to read and remember. A typical show would have an address of…

http://www.boagworld.com/archives/2008/03/114_forum.html

The problem was almost always the same when referring to third party sites. The URLs were just too hard to remember or guess.

Being able to guess a web address isimportant, and leads nicely on to our second benefit.

Better navigation

A well designed web address should enable a user to guess other related addresses. Take for example Flickr.

To see my photos you go to…

http://www.flickr.com/people/boagworld/

Once you have seen that website address, it is easy to guess the address for another users photographs. The same applies to tags. Once you have seen that photos tagged with my name have the address…

http://www.flickr.com/photos/tags/paulboag

…it is easy to guess the format for other tags.

However, the addresses on flickr do more than provide navigation. They also give context as to your location within the site. By looking at the addresses above you know not only where you are in the site but what type of information you are viewing.

In effect the web address contains valuable information about the page. This helps explain why friendly urls are good for search engine rankings.

Search engine ranking

Search engines do not always like web addresses produced by dynamically driven sites. Long query strings such as…

http://www.boagworld.com/index.php?sourceid=navclient&q=4

…would have once been rejected entirely by search engines. Today things have moved on, and most search engines will crawl them. However, they still place limits on how they crawl them and so generally they should be avoided.

Worst still, the web address above provides no keywords to help a search engine understand the meaning of the page.

However, a semantically written web address like the one for this article…

http://boagworld.com/technology/friendly_urls/

…says a lot about its content.

Hopefully now the benefits of meaningful web addresses are obvious. Let me now show you two tools I have used to improve the web addresses on the boagworld website.

Useful tools

The method for making your web addresses more friendly is largely dependant on the technology that generates your site. However if like me you are using a blogging platform, the chances are it already has the tools built in. Both movable type and wordpress allow you to set the format of your addresses and both have pretty poor defaults.

For example, movable type will default to archiving blog posts using the following format…

http://www.boagworld.com/year/month/name.html

Generally people are not interested in seeing posts from a specific period. Instead they want posts on a similar subject. I have therefore changed the format to…

http://www.boagworld.com/category/name.html

Of course, you maybe working with a technology that does not support this feature. If that is the case, check out How to succeed with URLs^(A)on A List Apart. This article provides so very practical approaches which may help.

The other tool I have adopted provides a useful fallback if all else fails. It is called Shorty^(B) and works likeTinyURL. You install it on your server and it takes long URLs and shortens them to something memorable.

For example I could take the web address of an article on sitepoint about Friendly URLs and reduce it from…

http://www.sitepoint.com/blogs/2007/11/05/friendly-urls/

to…

http://boagworld.com/links/sitepoint

This is invaluable on the podcast as it allows me to read every address. However it could also be used to shorten the URLs of key content on your site.

Hopefully I have convinced you of the value of friendly URLs and provided a couple of suggestions about how to start. However, I would love to hear your tips on creating the perfect web address. Post them in the comments below.

116. Back

Posted in Classic shows on May 7, 2008 by Paul Boag

Returning with a new site. Jeff Croft talks about his view on web standards and we discover why the personal website is dead.

Podcast: Download (28.3MB)

Download this show.

Launch our podcast player

News and events

Creating grid layouts

Last month I attended the Future of Web Design conference. The speakers were exceptional, however my favorite was a presentation by Jon Hicks on his web development process. The guys at Carsonified are slowly releasing the videos so it wonʼt be long before you get to watch it yourself.

I find it interesting to see how people work and it is amazing how many new techniques you learn. One thing Jon shared was a Javascript library called GridLayouts that overlays a grid systems on top of your pages. This is useful when creating layouts directly in CSS because you can align elements to the grid.

I have since discovered there is a firefox extension called GridFox that does the same thing.

Flash goes open source

Of course, you might be wasting your time designing with CSS. According to Aral Balkan flash is soon going to be everywhere and is the platform we should now be developing on.

The reason for Aralʼs excitement is an announcement by Adobe that Flash is going open source. Not only will the swf format be open source, they are also relaxing the licensing on the flash player.

All of this is good for the flash platform. Although it is never going to replace HTML, it does undermine one of the main arguments used by its detractors.

Accessibility and AJAX

While Flash gets a shot in the arm its main competitor AJAX is under attack. Brothercake has written a passionate article for Operaʼs development site pleading with us to stop using AJAX.

His argument is that AJAX is immature and unnecessary in the majority of cases. He believes that the accessibility cost of using AJAX outweighs it benefits (many of which are oversold).

I cannot say I agree with everything he has written, but the article does make you pause and consider whether your implementation of AJAX has been entirely necessary. Coming within days of the WCAG 2.0 candidate release, I think this article puts accessibility firmly back on the agenda. It will be interesting to see what affect WCAG 2.0. has on the growth of AJAX and web 2.0.

Developing effective forum leadership

Our final news story is anything but web 2.0. because it focuses on the oldest of community tools, the forum. It is an article by Patrick O’Keefe entitled Develop Effective Forum Leadership.

The article is aimed at those website owners who run larger communities and need to provide guidance to their community leaders. I have worked with so many large organisations who have tried and failed to effectively run communities. Their failure is often down to bad decisions concerning moderation and management.

This article helps to address those issues providing solid advice. If you are a community manager or have clients who run (or want to run) a forum then this is a must read.

Feature: The personal website is dead

This week Zeldman mourned the decline of the personal site. Several responded rebutting the claim. In this weeks feature I explain why I agree with Zeldman but just don’t care.

Interview: Jeff Croft Talks About His View On Web Standards

Paul: OK. Joining me today is Jeff Croft, who no doubt you have heard of. Good to have you on the show Jeff

Jeff: Great to be here Paul, thanks for having me.

Paul: So you work for Blue Flavour, and I have to confess the reason why I wanted you on the show is because you do tend to court a little bit of controversy, shall we say, is that a fair comment?

Jeff: I suppose that’s a fair comment. I don’t necessarily do it on purpose, but it does seem to keep happening!

Paul: Well you say you don’t do it on purpose, but I’ve looked through your blog, and you have some excellent articles on there that are really good and really quite excited me. Not necessarily because I agreed with every word

Jeff: Sure

Paul: But what I like about what you do, Jeff, is that you challenge kind of the standards, you know, you challenge the standard thinking and you kind of come at things from a different angle. So…

Jeff: Right

Paul: As a result of this, you seem to have antagonised a few people, especially in the standards community. Why is that? What have you done and why…why do people find you so annoying, Jeff?

Jeff: Well I was going to ask you that same thing Paul!

Paul: Ha ha ha

Jeff: No, seriously, it’s a good question. Like I said, I won’t ever set out to antagonise anyone. I think sometimes, you know, people take opposing viewpoints on these industry matters, a little personally, that’s, you know, my opinion. I know I write in kind of a pointed way that sometimes is blunt and I tend to be the type of person who doesn’t always have a filter when maybe I should. But, you know, I love everyone in this community, everyone I’ve ever met in this community’s been awesome so I’m not…it certainly isn’t ever personal, but I think, dealing specifically with web standards, it sort of feels a lot like religion to me. Like I sort of see myself as a Protestant of sorts, like I…you know I came up as a firm believer in the dogma of web standards, but more recently I’ve sort of split off from the Church on a few key points, but in the end, I mean Catholics and Protestants are both Christians, right? And we read the same Bible which is, I suppose, designing with web standards, and so you know, just there’s….I usually sort people there’s probably 5% of stuff that I differ on than kind of the purist viewpoints. So I’d see it as a purist versus pragmatist sort of thing
and I like to write about it and I like to write in a kind of a blunt way that I guess sometimes rubs people the wrong way.

Paul: So you’d like to call yourself a pragmatist. Tell us a little bit about where you, you know, what areas you think that other people are being too purist over when it comes to web standards. What are the areas that get under your skin?

Jeff: Well the main thing is just that I don’t really consider…I never think of web standards as the end goal. I think of web standards as a means to the end, and so, you know, when I’m building a website my priorities are, you know, to serve the needs of the client and to create a great user experience, more than my priorities are to validate or to, you know, use all the right ….most semantic elements all the time. I mean I do try to do that, but it’s…those are just in support of the greater goals that I have and I think…sometimes I feel like peoples’ priorities get a little out of whack there, and that’s kind of the purist mentality that I’m talking about.

Paul: I mean the trouble is with writing posts like this, and this is something I get accused of as well, that when you say something like, well web standards, you know, are not the goal, they’re merely a means to an end and all the rest of it

Jeff: Right

Paul: Aren’t you actually encouraging lazy coding?

Jeff: Well I don’t think so. I can see how it seems that way. I mean I definitely do believe that everyone should be writing valid markup and CSS and I just encourage people to remember that web standards are simply tools to advocate, you know, to help achieve the end goal, and you know, if you’re…I don’t know, I guess it’s kind of hard to explain, but if, like…let me use an example. If you’re building a house, I don’t think anybody would have their goal be…I need to use a hammer, and nails and bolts when I’m building this house. I don’t think that would be anybody’s end goal. Their goal would probably be like, I’m going to build a house that is structurally sound and has spaces that serve the needs of the residents and it’s comfortable and it’s aesthetically pleasing. They’d probably have goals like that. And you know, they probably would use a hammer, nails and bolts, but I don’t think they’d probably get so bent out of shape about, well in this house I used, you know, 3½ inch long nails instead of 3 inch nails, but those are the kind of like sort of semantic and pedantic debates that we get into in the industry a lot that irritate me a little bit because I feel like sometimes people just don’t pay attention to, you know, somebody can redesign a site that can be beautiful and amazing, and they make a blog post about it, and they say, you know, this is a new project I’ve done and it’s got all this new innovative stuff and the comments on it are, well you didn’t encode your ampersands and you know, you used too many divs and just to me I’m just like, man you totally missed the point, you totally missed all the great stuff that is there about my site.

Paul: But I mean using your house example that you just gave

Jeff: Right

Paul: I mean, within, you know, construction there are standards. There are, you know, rules that have to be followed and it may be the case that the person that’s getting their house built for them doesn’t…don’t particularly care about those things, you know, they care about the aesthetics, they care about the living space, they care about that kind of stuff, but somebody has to care about, you know, the fact that it’s built to Fire Regulations and things like that. Is that not our job as a Designer to worry about things like that?

Jeff: I think it’s completely our job, I just think that it is our job to …to do those things and to create great user experiences and have beautiful designs and…and it’s mostly just a priorities thing, like it’s just…I think all those things are important. Validating and creating, you know, writing semantic mark-up, all these things are important to me, they’re just… they’re just tools that I use to reach greater goals is all….and I think some people in our industry have turned that around to where they are more interested in writing valid code than they are in creating great experiences.

Paul: Mmm. So do you actually think that there are situations where the, you know, these different objectives come into conflict, because you know, I can’t say that in my experience there have been many situations where you know, I’ve gone, you know, oh I can’t do that because it’ll make the code invalid or whatever, you know, where…or where, you know, I’ve had to over-rule a client because I feel that it would compromise, the, you know, the semantics of the website. They don’t often seem to come into conflict, but I mean do you disagree?

Jeff: No,….no I agree, they’re very rarely in conflict if ever. It’s…you know, it’s more what irritates me and what I have talked about is more it has to do with the discussion and the kind of….community, you know, within the web standards community it’s not something that really affects client work too much or anything like that, it’s just I want to talk about some other stuff; I want to talk about design and I want to talk about users and I want to talk about community and networking and bringing people together and sometimes I feel like those conversations can’t be had because they’re…because as soon as somebody starts to talk about something a little bit more abstract and conceptual, people derail the conversation by saying, again, like your ampersands are unencoded, or you know, why did you use all these divs when you could’ve, you know, been more semantic, or you know, whatever. So….it’s more about the conversation…yes

Paul: I’ve got to say, I can associate with your point of view, I mean at the moment I’m re-building the Headscape website, our corporate website, and you know, although obviously I should primarily be thinking about the client all the time and potential customers that are coming along to the site, after all, that’s the target audience, but you can’t help but almost be a little bit afraid, you know, that …oh is this code of good enough standard, are people going to criticise this, that and the other, and really you shouldn’t have to live your life in fear of what your peers will say.

Jeff: Exactly, that’s exactly wha
t I think.

Paul: But I mean from the point of view of…we were talking about lazy coding weren’t we, and about, you know, does this encourage lazy coding. You guys have taken an interesting position at Blue Flavour, and I have to say this…this is something I think I probably disagree with, which is that you guys use Blueprint, which is the CSS library, actually in a production environment. That’s interesting that you take that point of view. Explain a little bit about how you came to that…that point, you know that position.

Jeff: Well…well first of all I was sort of involved in the creation of Blueprint. It was…I was accidentally involved; I didn’t mean to be, but at my previous job I had…I had created a sort of CSS framework for us to use internally, it was a media company, a newspaper company and we had several different newspaper sites. They were all similar and we had a team of designers and we wanted to just sort of standardise on some….some class names and just some ways of coding things across our sites and across our team, so that you know, we would all kind of be on the same page, and I wrote an article on a A List Apart about that process and somebody found…somebody went and found that code and wrote me an e-mail asking if they could use it, and I said sure, I can’t support it, but if you want to use it, go ahead, and thinking that they were probably going to use it on their personal site or whatever, and it turns out what they’re actually going to do is build Blueprint. So that’s kind of how the whole thing happened and…so that’s how I got involved in it and I gotta say before I go any further that since then, Blueprint is very different from what I wrote and there’s been a lot of changes, and a lot of them are good but a lot of them I don’t like too, so I don’t….at this point in time I’m not as sold on Blueprint as I was three or four months ago just because of some of the changes they’ve made. But I think the reason, I mean the justification to me for using Blueprint or any CSS framework like that is the same justification that you would have for any Open Source project. It’s really good CSS written by smart people that has been tested by the masses, it’s constantly being updated, having bug fixes applied, and you know I believe that most of the time the Open Source community is going to be able to write better code than you or me or any one individual person, so to me that’s the justification, it’s the same reason I would use Apache or Django or Rails or Linux or anything Open Source because it’s just been proven time and time again that….that Open Source methodology works for having good code.

Paul: I mean, I have to say, I had a look at it and played with it for a bit, and I’ve got to say that for some stuff it was very impressive, you know, if you’re putting together wireframes or, you know, doing initial production work then I can see a value in it, but I think what concerned me was some of the limitations surrounded the fact that, you know, it’s designed primarily for a fixed based site, but also…sorry, is that…am I wrong?

Jeff: No, no, you’re absolutely right, although I think adding liquid is on their ‘to do’ list, but yes,

Paul: OK. And then…I mean the other thing was that, you know, I’m trying to avoid using the word ‘semantic’ in order not to get in trouble with you, but I mean the thing that did strike me with it is that there were a lot of class names that you were having to put in, you know, which is fine, you know, I can accept that, you know, it’s not the end of the world if you do that, but you know, if it’s a site that’s going to be around over the long term, I just felt it was a little bit of a second-rate solution for probably the type of clients I do. Now I can understand that if you’re doing, you know, a lower…you know, lower end work, smaller websites, with less of a budget and you need to turn things around quickly then this is better than not using standards at all, but it just felt a little bit of a lightweight solution. Am I being unfair to it?

Jeff: Nope, I don’t think you’re being unfair at all. I think you’re absolutely right and I think, you know, I mean at Blue Flavour, we have used Blueprint before, we don’t use it all the time, and it is…we do tend to use it in those situations where we have a very tight timeframe or a very tight budget, and just need to get things done and get them out the door as quickly as possible. Because like you said, I mean we think it’s a good solution that is better than not using web standards at all, but it’s…it’s never going to be as good as hand-crafting every line of code for, you know, for the particular project. We recognise that, but it’s, you know, sometimes in the real world, when we have deadlines and clients and budgets, sometimes just getting things done on, you know, an efficient way trumps being absolutely perfect every time which is again that pragmatist versus purist sort of view.

Paul: I mean it felt like a bigger compromise, and maybe…I’m using some other, you know, frameworks and libraries, you know, I just jQuery for example in JavaScript, and this felt more of a compromise, more of interfering with the kind of underlying content of the site, and that’s what I was probably slightly uncomfortable with, was the idea that, you know, the content would be in some ways compromised if the site was going to be around a long time, you know, if it was a shorter term project that maybe wasn’t around as long, then the fact that the content is somewhat compromised maybe is not as big a deal.

Jeff: Yeah, well I think, you know, when you were saying that I was thinking, you know, like you use jQuery, so do I. I think there’s a certain…like…those of us who are not great JavaScript people will lean on these frameworks, whereas I bet JavaScript gurus sometimes have the same feelings like about…it being a compromise when using one of those libraries, you know, and there’s probably people in the Ruby community that say, ‘oh, I’m not going to use Rails, it’s a compromise’, because they really know the ins and outs of Ruby or they really know the ins and outs of JavaScript and we really know the ins and outs of HTML CSS so yeah, I wonder if it’s always …these kind of libraries are always going to be a little more popular with people who are…who are like have to use CSS but it’s not really their primary area of expertise.

Paul: So what you’re implying is that I’m a snob?

Jeff: Sort of!

Paul: Ha ha ha…..that’s fair enough, that’s OK. I don’t mind being a snob! So I’ve….so moving on from that then a little bit

Jeff: OK

Paul: Now I’ve read some stuff that you’ve written before critical of validators and you know, some of these automated validators that are out there. Maybe tell us a little bit about why you’re critical of them, why you feel so anti towards them?

Jeff: Well it’s not so much that I’m opposed to the validators, I mean on the contrary actually I use validators almost every single day. What I’m critical of is the way people use them sometimes. I think that, you know, validators are there for…as a tool to help you de-bug during the development process, you know, you have some problem on your page and why isn’t it working? When you validate you find the error and then that helps you move along to solving it. But what irritates me is the use of validators as sort of in unprovoked attacks on other peoples’ code, you know, where again, it’s kind of that same…that same mentality of somebody launches their new site and the first thing somebody does is view source and validate it, so that they can then make a comment that says, you know, this is crap, and that is…that is really irritating. I feel like there’s almost never any reason to validate someone else’s code, I mean unless they’ve asked you to, I can’t understand why….it’s just that mentality of the first thing you do when you get to a site is view source is a little baffling to me, because I’m…I’m more interested in the design and the functionality and what are they doing here that’s new and interesting.

Paul: I guess…but that depends…surely that depends on your priorities, I mean…you know, I find it quite interesting to look at other people’s code and how they’ve built the site. It doesn’t necessarily mean I’m going to validate it.

Jeff: Right, and….no and I mean that’s fine, I do that at times as well and that’s certainly how I learned a lot of what I know, but I don’t do it with the intention of then picking apart every single error they made publicly, which is really the thing that bothers me.

Paul: I have to say the other thing that concerns me a little bit about this is I’m starting to see more clients going and viewing source and validating websites and you know, it’s quite difficult, because I mean obviously like yourselves, we kind of sell ourselves on, you know, being standard based designers and produce good quality code and all the rest of it; it’s part of our sales package. And you know, when a client goes along and validates one of our client sites and it’s invalid, you know, you feel like you have to defend yourself in some way, but, you know, there are good reasons why a site won’t validate sometimes, and…and certainly once a client starts using a content management system you can pretty much kiss goodbye to it can’t you really?

Jeff: In many of them, yeah.

Paul: OK. That’s…it’s interesting to hear a little bit about the way that you operate and the kind of priorities that you have at Blue Flavour. In some of the posts that you’ve put up, I mean you were kind enough to send through a big bunch of your more controversial posts to me which was good. And I was reading through some of them, really enjoying them by the way, but there seemed to be this kind of under-lying current that maybe standards and even the W3C to some extent, a kind of stifling innovation. Where does this kind of feeling come from, you know, is that something you really, really believe and what makes you believe it?

Jeff: I would say again it’s not so much that I think that the W3C themselves or the standards themselves are stifling innovation; it’s the culture of compliance that is around those standards and around the web standards community to where people are so obsessed with being valid and being compliant all the time that they…you know, they tend to…I think it even extends past actually writing mark-up or writing CSS to where people just keep doing things the same way that everybody else is doing them or the way that Jeffrey Zeldman told them is the way to do things, or whatever, and it just kind of….they just keep doing things the same way and not innovating as much as I would like to see. Now I say that, and I…but I know I probably do the same thing myself, like I don’t…I’m not always incredibly innovative either, so…so it’s kind of, you know, it’s a balance there. But I think….I think also, I mean…and this might be a little bit of difference in my viewpoint too, is when I really thing of web standards, the web standards movement, I think about the browsers. I think the…gold web standards movement was to get the browsers all rendering standards correctly and supporting standards, which for the most part has been done, I mean granted there are still little problems here and there, and IE isn’t totally there, but at least we know that they’re on board now. I don’t think of web standards movement so much as being a thing where we’re getting the developers all on board. I mean I guess that’s part of it too, but when I think about the web standards movement when I was, you know, when I was first involved in it four or five years ago or however long it was, to me it was all about the browsers, and so, you know, today I think there’s a sort of chicken and egg problem where…browser makers could be innovating and doing cool new things and the one that consistently has done cool new things is Webkit in Safari, I mean they’re adding the CSS3 properties and they’re adding, you know, they’re coming up with properties of their own and adding them and they’re…and they’re doing it, I mean today we have this name spacing, right, where they can say, you know, it’s going to be hyphen webkit hyphen border radius or whatever, so they can keep it out of the, you know, it’s got its own name spaces, kept out of the global area so it doesn’t conflict with anything else, and I would just like to see a lot more of that kind of innovation from browser makers where they’re trying these new things, they’re throwing them in, they’re letting developers play with them, and like I said, it’s kind of a chicken and egg thing I think where the browser makers would like to do this maybe, but they’re afraid of the backlash from the standards community. If they’re adding new properties that aren’t part of a spec, you know, the standards community is…has proven that it’s going to backlash against them and it’s going to say, ‘why did you add this, this isn’t in the spec’, and so then they don’t do things, but the developers and designers also would like to try new things but…so it’s kind of a chicken and egg thing there a little bit I think. So that’s the…that’s the main …the main plan I have on that, and the, you know, like there are examples, like X….sorry, XML HTTP request or Ajax, you know, was a pr
oprietary IE property that they just put in, and eventually got standardised, and that’s kind of the way that I would like to see it go more is where the browser makers are doing new things and then we’re trying to standardise them, which is the opposite I know if, you know, some really respectable people and friends of mine like Jina Bolton and Andy Clarke which see that it should go the other way, which is that specs are written and then browser makers standardise on them, so…

Paul: Yeah…I must admit, listening to you talk kind of fills me with a certain level of dread, to be honest, when you talk about browser manufacturers. You know, I studied…I studied designing websites back in ’95, and you know, and so I lived through this whole period of time where you have browser manufacturers, you know, introducing all kinds of bizarre tags and it was absolute chaos, you know, and you didn’t know what was happening on what browsers. What’s to stop that happening again, beyond the standards community growling in the corner aggressively?

Jeff: Yeah, well I mean that…I mean I was there for that too. I studied also in ’95 and yeah, it was pure chaos. But I think, you know, I mean first of all I think the standards community has made a lot of inroads to where these, you know, I don’t think it would be complete chaos simply because we understand the value of standards now. And there are some…there are some mechanisms in place like the name spacing I’m talking about, where they can do these things and keep them from conflicting with other…so when …when WebKit decides they’re going to add border radius property, they can do it under dash webkit dash border radius, so that if anybody is actually using the real border radius without a, you know, prefix, you know, there’s no conflict, so I think, you know I just feel like there’s some mechanisms in place that would keep it from being so chaotic and the value of standards we’ve learned through the web standards movement, you know, and the browser makers are now on board with the idea of inter-operability, I think would keep it from being so chaotic, but I guess I don’t know for sure. It is…it’s definitely…there’s definitely a balance there because I definitely feel like the browsers have not been doing as many new things as they did back in those days, but those new things did cause problems too, so it’s, you know, but as a Designer I sometimes get bored, I’m like, I’ve played with all that stuff; I’ve played with all the tools we have and I want to try something different, you know, I want something that will…I want advanced grid positioning and, you know, I want to be able to draw shapes and, you know, it’s not out there.

Paul: I mean that is the only trouble I guess with…you know, you were talking about innovation and we need to be innovating more as Designers as well as browser manufacturers. The trouble with innovation to some degree is that you’re always in danger of undermining users’ expectations. I mean this is something you hear someone like Nielsen go on about loads. How…where do you feel the balance is between kind of doing cool new stuff and…you know, not undermining users’ needs or expectations?

Jeff: Well you’ll probably remember from back in the late ‘90s and that sort of thing that there was….and another sort of interest of mine is the sort of demise of the personal website, but back in those days, there was just so many experimental kind of crazy out there personal projects that were happening, and I think that that is a great place to try those things, because they’re not…they’re not real users accessing them; people that are using them are, you know, expecting that, I mean that sort of thing’s a great place to try new things, is on personal projects. Now again, with the culture of compliance that we have, I don’t know how that would fly today. Like if somebody made some crazy experimental site, I think there’s a certain fear of doing that because of backlash again from the web standards community, like you know, it’s a thing where people aren’t seeing the…the meaning, you know, it’s…I’m putting this out there because I’m trying to do something new and difference and …and it’s almost not allowed by the web standards community. Well, you can’t do that, because it doesn’t validate, or you know, whatever. And again, like I said, that’s not always specifically about validation and mark-up. It goes onto the…to that …into usability and into layout and design where people say, don’t change that because it’s messing with users’ expectations, but I think there are places where you can try those things and personal projects to me are the big place where you can try that.

Paul: You’ve got a good point about personal website. It’s like everybody now …have…you know, it’s all about blogs isn’t it, it’s all about….there’s almost this kind of citizen journalism thing where, you know, we’re all actually trying to create a little audience for ourselves and so therefore we don’t want to do anything too dangerous with our…with our personal sites. I remember my….my first personal site was absolutely chaotic, you know, it had no proper navigation whatsoever, but it was fun, it was a place I could experiment, so yeah…

Jeff: Yeah, that’s a real kind of…pet annoyance of mine is that …the loss of that, and I do think, you know, it’s because everything’s a blog, and I love blogs, and you know I have a blog, but I still wish that there was just a little bit more of that crazy experimentation that we had going on back then.

Paul: Mmm. I mean it’s a good point as well. A question I often get asked by people is, you know, how do I promote myself online. They say, I don’t want to…I don’t want to run a blog because I don’t want to write. Well you know, a personal project in a way you’re trying out different things like a sandbox you can play in. It’s a good way of promoting yourself and showing what you’re capable of, and that you do innovate without having to write reams of stuff, because let’s face it, not all of us are big writers, so….yeah

Jeff: Right.

Paul: Good to have your perspective on things. It’s really nice to have a kind of new perspective and you know, a different point of view, so great to have you on the show, and no doubt we will get you back in again in the future. Good to talk to you.

Jeff: Great. Thanks so much for having me.

Thanks to Anna Debenham for transcribing this interview.

Listeners feedback:

Getting a site
off the ground

Shaun writes: Following the headscape redesign and promised boagworld redesign what tips can you give to getting a personal/own site off the drawing board/local machine and actually published.

The problem with internal projects is they lack motivation. They are never as important as client work because they donʼt directly generate income. The answer is to increase their perceived importance. I use a number of techniques:

Document the benefits to your business or personal profile.
Produce a statement of work just as you would an external client.
Price the project so that you can set it against your targets as a marketing cost.
Set a deadline and preferably announce that publicly so you are forced to meet it.
Block out time for the project rather than attempting to “fit it around” client work.

Ultimately it comes down to determination. However, knowing the value of the project and treating it as any other project really helps.

Testing

Erich writes: Thanks so much for the show, all the work you guys put in really shows. It is great learning about aspects of the business that I donʼt get to deal with much.

I was just wondering if you guys had any kind of a testing station at Headscape. We are looking at putting something like that together at my work. Somewhere you can just go sit at and run through all the browsers, maybe even some with different versions of flash and such. Do you guys run anything like that?

Because our designers are based remotely it is not easy to have a central testing suite. We did try that at one stage but it did not work. Connecting remotely wasnʼt as smooth as it should have been and we found multiple designers often wanted access at the same time.

Currently, each designer runs a number of virtual PCs on their individual machines. Most have two versions of XP one running IE7 and one with IE6. We also run multiple version of Firefox and Opera. Most of our designers also own macs allowing them to test Safari. Those that donʼt connect to a mac in the office.

To be honest our testing environment is not the most sophisticated. Most clients do not want to pay for testing against minority browsers and when they do we setup something specific for their needs usefully using a virtual machine. If you are interested in setting up your own Virtual Machines then I recommend VMWare Fusion⁽⁷⁾ for the mac and Virtual PC⁽⁸⁾ under windows.

Lessons learnt at SXSW 08

Posted in News on March 17, 2008 by Paul Boag

Marcus shares his impressions of SXSW and the lessons we can all learn.

Looking back at my
notes, I didn’t realise how much I actually took! So, I have decided to focus
things a bit and look at talks given by people from three big interactive
agencies. These presentations were fascinating to me as they gave me an insight
into how these companies run their businesses, their projects and make
decisions about their futures.

Respect!

This was a great start
to the conference, really got me in the mood. What I expected was a Zeldman criticism of the corporate world’s misunderstanding /undervaluing/general
disdain of all things ‘web’. I think this was what he was trying to do but what
we got was a run down of how Happy Cog works or more particularly how it runs
it projects – great for me!

It was quite
reassuring in that they do pretty much exactly what Headscape does:

Stakeholder interviews – though there was
a wonderful description of when you really know that you’re about to get to the
bottom of an issue with a client – that ‘close the door’ moment
User testing/requirements
IA
Design – they still do multiple concepts (which
we very rarely do now) though try to avoid ‘Frankensteining’ the design
Build

The big thing, for
them, missing from this list is content and copywriting. They employ a
specialist copywriter who has a wide-ranging remit from kicking off the content
process to completely writing a site’s content. However, usually they
concentrate on editing ‘raw’ content into one styled voice.

Zeldman says that the
content is the most important aspect of any site. He has a point – we
don’t go to websites to enjoy the design or appreciate the usability of the
navigation.

This is, I expect, the
next big thing for Headscape.

Ten things we’ve learned at 37
Signals

Jason Fried telling
everyone 10 things they’ve learned at 37 Signals. I found his delivery a little
grating, which is why I probably don’t have too detailed notes on this talk.
But, again, this was interesting stuff from my point of view, learning about how
a small company operates particularly because we are about to go down the
product road.

The general theme of
his biggest messages were:

Keep it simple – otherwise you won’t ever
release your product.
Don’t plan – plans tend to have a habit
of becoming ‘sacred’. That is, people tend to stick to a particular goal
religiously, rather than adapting to what is the best way.
Don’t expect your next thing to be way better
than the last. If you’ve had a hit it doesn’t necessarily mean that you’re next
offering is going to be as well.
Don’t talk to each other! I really wasn’t sure
about this, but JF basically felt interrupting people through talking was the
key productivity killer. Methods of communication that can be ignored -
IM, email, Basecamp etc – are fine.

10 Tips to Managing a Creative
Environment

This was the best talk
of the lot for me. With most of the ‘famous’ agencies, I feel that what we do
is not too far away from what they offer. However, these guys felt like they
were in a higher league.

The talk was given by
Bryan Mason (CEO) and Sarah B. Nelson (Design Strategist) of Adaptive Path.

They had looked at
(and interviewed) a number of other organisations that they felt there was some
similarity with a design agency. These included:

Theatres
Restaurants
Orchestras

They are all highly
creative places (probably more so than the design agency), they have absolute
deadlines (again, probably more so than the design agency) that mean highly
regimented processes are required while keeping creative staff focused.

These are the tips
that they have learned:

Cross-train the entire team – not easy, but it does build
understanding and therefore empathy towards other people’s jobs and the effort
required to deliver them.
Rotate creative leadership - makes people value others’ decisions
because they know that they will get their turn.
Actively turn the corner – meaning make a specific decision to go
from ‘thinking’ to ‘doing’ and make sure that everyone knows which phase
they’re in. The thinking phase being the point where there are no bad ideas or
questions with people moving into their specific roles (see point 4) for the
doing phase. They described this process as divergence to convergence.
Know your roles - once the corner is turned everyone
needs to know what is expected of them and when.
Practice, practice, practice - they mean ‘practice as a group’ i.e. keep
familiarising (and improving) processes. This ensures quality under pressure.
Look to bring new people in at quiet times or on internal work.
Make you mission explicit - to the entire team so everyone knows
where the team is supposed to be going and what they stand for (i.e. what it
means to be a ‘Headscaper’ instead of just a ‘designer’ or ‘developer’). Cut
out stuff that isn’t part of the mission – be ruthless.
Kill your darlings - but do it respectfully e.g. for the
young chef – "we won’t use that recipe, it’s not for us. You put it on
your menu when you get your first restaurant!" AP hiring decisions are made
without discussion – thumbs up, they’re in, thumbs down, they’re out.
They only discuss if it’s neither.
Leadership is a service - leaders should talk to everyone about
their involvement. For example, a creative director should provide space not
enforce their vision.
Generate projects around the groups’ interest - in other words, only take on work that
you want! Easy said. However, maybe a watered down version would be to dish
work out based on personal preferences rather than just who’s available. BM
said "any time that AP has taken on work for the money or the kudos of a
particular client, it has bombed. If there’s no interest internally in a pitch
- drop it".
Remember your audience - what you’re doing isn’t for you, don’t forget that and don’t
forget who your specific audience is. They used the kitchen analogy where the
restaurant manager’s audience is their existing customers. He needs to make
sure that the guy who loves liver and onions gets the same every time. The chef
doesn’t care about this. His audience is the new customer.
Celebrate failure – creativity
doesn’t always work. Carry out project post mortems but call them ‘after
parties’! Discuss what worked, what didn’t and what was learned. Don’t
apportion blame. You want your creative team to take risks and to feel that
they can take risks. If you have a blame culture then safe and boring (and
eventually stagnation) is where you’ll end up.

What goes into a user testing script

Posted in User experience on February 29, 2008 by Paul Boag

I have talked before about the benefits of user testing. I have discussed how to user test on a budget. Now, I want to look at some basics that go into every usability test script.

What should go in a usability test script? That largely depends on what you are testing. If you are testing design concepts then your testing will be limited to questions about the navigation and communication of core messages. You could carry out some flash testing but your options are fairly limited.

However, if you are testing a wireframe or version of your site then more options are available. In such cases, the testing is about completion of tasks. For example, could the user find the price of a particular product, or the contact details for a key member of staff.

The choice of tasks to test should be based on key activities that your personas wish to complete. Let me give you an example. Let us say we have a persona called Jane who was considering attending a health spa. The first two pieces of information Jane wants about the spa is price and availability. It is therefore logical that any testing for the spa should include tasks to find this information.

Although what is tested will vary, there is some information that should always be included. Below are highlights from a fictional transcript demonstrating what should always be covered.

Hi Jane. My name is Marcus and I am going to be running the session. Joining me is Paul. I have asked him along to take some notes as we talk. I hope that is okay.

By introducing yourself and others in the room you help to put the user at their ease. Offering coffee can help too! Be sure to explain any recording equipment in the room as this can be intimidating.

The idea of this meeting is to see if we can improve a website that is currently under development. You are going to help us test the site. Its important to understand that we are testing the site and not you. So you can relax!

By explaining to the user that you are testing the site and not them, they will behave more naturally.

I should also explain that there are no right or wrong answers so don’t worry about messing up.

We need you to be honest. If you are struggling with something or don’t like the way it works, say so. You aren’t going to offend anybody.

If the user perceives the session as a test (with right and wrong answers) they will tell you what they think is right, rather than what they feel.

Also, many users are worried about offending the facilitator with negative comments. This is why it is important to stress that you want honest answers and no offense will be taken.

The most important thing to remember is that we need you to explain what you are thinking. Try to think out loud and talk about the various options you are considering. Before you click on any link explain what other options you considered and why you picked the one you did.

Getting the user to articulate their thoughts is fundamental to the success of the session. It cannot be stressed enough. Even though you have explained this up front, you will still need to prompt them throughout the session.

Finally, if you have any questions please feel free to ask. I might not be able to answer them straight away because this could prejudice the testing. However, I will answer them at the end.

It is important to explain why you may not answer their questions during the session. If they do ask questions be sure to address them at the end.

Let’s start off with something easy. Can you tell me a bit about yourself? Tell me about your job?

It is always good to begin a session with some simple personal questions such as family status, age and job title. This helps build the users confidence and provides useful background information.

Tell me a bit about your computer experience. How confident do you feel using a PC? Do you use them for work? What about at home?

How much do you use the internet? What kind of sites do you use regularly and find most useful?

Building up an understanding of the users computer and web experience provides context for the session. It also indicates how representative they are of the target audience.

Okay, lets talk about the site. Its a site for a health spa. Before I show you the site I want to ask about your expectations. What do you think a health spa website should look like and what information would it contain?

It is helpful before revealing the site to ask users about their expectations. If the expectations do not meet the reality it can cause confusion. Asking about expectations also provides opportunity to find out more about what users want from the site.

The session would then continue to address issues specific to the stage of development the website was currently at, This part of the test is primarily either “do they understand what they are seeing” questions or task completion.