Running a successful web design agency

Mike and Keir from Carsonified interview Marcus and Paul on how they have made Headscape the successful web design agency it is today.

Keir: Okay, hi Paul

Paul: Hello!

Keir: Thanks for joining us.

Paul: That’s alright!

Keir: Thanks for agreeing to let us turn the tables.

Paul: Are we not saying hello to Marcus?

Keir: Oh sorry, hello Marcus!

Paul: He’s refusing to talk now!

Marcus: Hello!

Keir: So we’ll ease you guys in gently, first of all to you Paul, obviously now your company has grown big and strong and you’ve moved on really from being a web designer / builder…

Marcus: I want to see where this is going!

Paul: You’re going to ask me what my job is aren’t you?!

Keir: No! I’m not going to ask that I’m just going to ask do you miss doing that, being hands on, that sort of thing?

Paul: I have moments of it, yeah. Because I’m somebody who has a short attention span, and I like skipping from thing to thing, I felt like I’d reached a point where when I was designing, all my designs were looking the same. Which was an indication that…

Keir: I think Marcus is nodding for some reason Paul..!

Paul: That my designs all look the same?! So that to me was the part where I had to start moving on and doing different things. But no, I dabble still, I do Boagworld, I do Headscape, but yeah, I do miss it sometimes.

Headscape website

Keir: On the same subject, do you find it hard to relinquish that control at all?

Marcus: No!

Paul: (Laughs) No! Not at all!

Marcus: Sorry I was answering for Paul!

Paul: And I think you’re correct! No, I have certain standards that I think we should keep to as a company in terms of quality of code, that kind of thing. But the guys at Headscape are very good. So it’s often semantic arguments that we have rather than anything of value! In terms of design I have to battle against the fact that I have personal preferences in that I have a design style…you have a design style. When you’re working with a designer, not everybody at Headscape produces design that is in line with my personal aesthetic, and it should be that way because you want a broad range of stuff, but sometimes I struggle to recognise that this is a good piece of design, it’s just not what I like.

Keir: Is there not a Headscape aesthetic, a little bit?

Paul: I think there is to some degree, we pretend there isn’t and we tell our clients there isn’t, but I think there probably is, and I think that’s largely come about (a) because of my own personal bias, but (b) because of the type of clients we work with. With the majority of clients we work with we would be laughed out of the room if we did the kind of stuff you do.

Marcus: That’s a bit harsh! Bloody Hell!

Paul: I’m not saying its bad! It’s great design!

Keir: I think a nice big pumping heart on the homepage of Headscape? That would go down a treat Paul!

Paul: And I know that Mike can do that kind of design.

Marcus: We’ve been talking Mike up a lot lately.

Paul: I know!

Marcus: We’ll have to start interviewing you now!

Keir: Right, back to the questions!

Marcus: As an inspiration for the guys at Headscape to maybe go down a different route, and your work is very inspirational from that point of view. They all say ‘Ooo Yeah, we like a bit of that!’

Keir: That’s nice to know!

Paul: They need to have opportunities to break out from the constraints and the boxes that they’re put in because of the type of clients that we work for.

Keir: So that raises an interesting question, how do you deal with that internally when someone comes and the brief maybe doesn’t quite need a new avenue to go down – how do you hold a designer back from experimenting, do you suggest other outlets internally?

Paul: To be entirely frank with you, our problem at the moment is the other way round, that our designers self-censor themselves, because they work on so many of these kinds of sites, and they predict what the client is going to say and so hold back sometimes.

Keir: And are they normally right or is there room for expression?

Paul: Yeah, they are normally right, but that’s not the point. I see it as our job to push the client. I mean there’s a classic example, I won’t name the client but there was one recently that said they wanted something ‘different’ and ‘radical’ and so we said ‘are you sure?’, and then we did all this cool stuff for them and then they said ‘could we tone it back?’ and so I turned round and said ‘you wanted something radical?’ to which they responded ‘Yeah, we didn’t really did we?!’ (Laughs)

Keir: So what do you see as the hot topics, or is there anything in the web world right now that really excites you? Or even you Marcus?

Paul: (Pauses, sighs) No. No!

Marcus: I’m much more business oriented, so things that excite me are…

Paul: Spreadsheets?!

Marcus: No, no… God no! Because we’ve been doing this for a long time, and we were never the sort of people to say ‘in five years time we’d like to be there’ but then suddenly we find ‘Oh, we’re there!’, so then you find yourself saying ‘What now then?’ and so I’m more interested in what the new thing would be. Because I’m not a designer, I’m not a developer, so I don’t really feel it’s my job to get enthused about anything in particular, HTML5 for example. I’m like, ‘great, cool!’ Paul is much better placed to answer that question as it’s not my specialism. My specialism in this world, if I have one, is talking to people who have websites about what their website could do for them, and so to a certain extent I need to be informed, but he does that for me.

Boagworld Podcast Live

Image Source

Keir: So how do you split your work for a new client? I contact Headscape for whatever reason, we agree to meet, I give you a brief outline of what my requirements are, would I speak to you (Marcus) and what sort of stuff would you want to get out of me and then would you hand over to Paul or the Project Managers?

Marcus: It varies. If it was a really big project I’d say to someone on the phone…

Keir: Give it to someone else!

Marcus: (Emphatically) No! No! Rather than have a lengthy chat on the phone I’d say I’ll come and meet you, and it would usually just be me at that point. And for virtually all projects people will come to us with a ‘We want to do something’, not a ‘We’ve heard you guys are quite good, what can you do for us?’ 99% of the time people have a pretty specific idea that they want us to do x, y or z, so I’ll go along and talk about that, and question why they might want to do that – that’s really the big part of it actually. Why do you want to do that? How’s that going to help you? Is it going to make you more money, is it going to make people who come to your site happier?

Keir: So very much from the business angle, the benefits of having a web presence or what expanding it will do for their own business? Bottom line stuff really?

Marcus: Yeah, to a certain extent, but also that’s the kind of nice client who comes to us. Quite often what we’re doing is responding to invitations to tender, and then it’s case of a brief will come through and we will respond usually with a phone call and questions – what do you mean by this and this and this, are you sure you want to be doing that. We’ll respond with a proposal and hopefully we’ll be invited back to talk to these people, at which point I’ll wheel him out (Paul!) and he’ll enthuse at them for half an hour!

Paul: It takes me a while to latch on to the part of the project that excites me, because if you go into a pitch not excited about the project, you ain’t gonna win it.

Keir: Sure.

Paul: But once you’ve indentified that thing in it that really grabs you and you want to do then I’m away and it’s great. So I mean, I tend to go in at the pitch stage and I give the big presentation. Then we normally, if we win it, at the beginning part of the project is where I flesh out that stuff that I was enthusing about, so where we really develop and set the direction of it. I talk the client through the process, help them to focus the vision, and that’s done in conjunction with the development team, the developer, project manager, designer, all the rest of it. Once that process has been done I step back and the project manager runs with the project.

Marcus: That’s the big bit out that I do. Requirements, information architecture, stakeholder interviews, all that stuff, and then I’ll step away from it usually. Then project managers, designers and developers get on and build it.

Paul: Periodically through the project I keep my eye on it to make sure that that vision that was created at the start of the project hasn’t been lost at any stage.

Keir: Just quickly because I’m really keen to know, there’s a lot of talk in the internet about, and I hate the term, spec work. Mark and I have talked about this a lot. I’m of the opinion that doing a tender or response to a proposal could be deemed as doing spec work in some respects because by the definition you’re doing work – how much time or value and what’s the end product of that…

Marcus: Shall I tell you how I define it? I as a sales person, and I do information architecture as well and that is all paid work, but at least 50% of my role is as a sales person and sales people don’t get paid by clients.

Paul: They’re a cost of sale.

Marcus: So if it’s work that I’m doing then it’s fine, if I have to get a designer to do work as part of that document, then I don’t think that’s right

Paul: Because those are chargeable people, I’m a chargeable person.

Keir: We know that Paul!

Paul: The most that Marcus would require of me would be to bounce some ideas around in the proposal stage. The pitch obviously is free; we would go up and do that. But the way that I view it actually is that spec work in my opinion is work that you give to a client that could potentially be used in the actual project. So our proposal documents aren’t spec work….feel free to disagree

Keir: No, it’s interesting because you make it sound like you go to a pitch with nothing?

Marcus: Correct. We don’t pitch any graphics ever.

Paul: No. Never. Never any graphics.

Keir: OK, so how much work would you say goes into a pitch?

Paul: Into the pitch itself?

Keir: Not the actual time of the pitch.

Paul: OK, preparing for the pitch, well the proposal, a lot of work goes into that.

Marcus: At least a day. Usually two.

Paul: Because that, with the type of work that we do, there’s quite a lot of boilerplate in it, ‘We’re Headscape this is what we do’ but with large public sector organisations that we tender for they want to know a lot of detail like financial history, they want to know the name of your third child, but it’s not a document that necessarily contains lots of ideas.

Marcus: A good way to think about the process is – we’ve won the work, and the process usually starts off with him analysing the existing website, the brief they’ve got, talking ideas, he’ll make a bunch of recommendations out of his own mind as it were. I’ll then test that on a load of stakeholders via one to one interviews. Based on that we’ll then put together a report which pulls all that together. Then we’ll do information architecture, then we’ll do mood boards that will kick in to the actual design. And that’s a load of work that I’ve just described. If we value giving designs up front then all of that is pointless.

Paul: It’s the fact that before you make a recommendation to the client, either in terms of visuals or in terms of the direction or vision of the site, you need to understand the client, you need to understand the business and the objectives. You never get all of that from a brief. It doesn’t matter how thorough they think the brief is. So therefore our proposals are very detailed responses to the brief that has been provided. But oftentimes that not what we’ll end up delivering. Often we’ll win the work, do a lot of research work and then turn round to them and say ‘Actually what you asked for out of the gate was this, and that’s not the right thing, we need to be going in this direction.’ So the proposal document only really exists to establish our credibility and to get us to the point of actually winning the work. There’s not loads of stuff in that proposal that they could take and say ‘A-ha’ I really like these ideas I’m going to take these and go with another agency. It’s not that type of document, but with a piece of speculative design they could do that, they could say ‘A-ha’ I really like this bit of design, I’m going to take this and give it someone who is cheaper.

Marcus: To finally nail this point to the table! We see proposals and pitches, the proper response from us is to basically tell our prospective clients that we can do a really good job, and give them lots of reasons why. We think your project might be really similar to the one we did for this client. Look at all the work we did on this and this was the process we went through, with lots of pictures of what we did for that client, but no actual ‘ We might be able to do something that looks a bit like this for you.’

Keir: That’s a historical thing though because you’ve got a canon of work, you’ve got heritage. What would your advice be to young people up and coming, 18, 19 20 years of age when you’ve not got that canon, you’ve not got that history?

Paul: I would encourage them to actually do some voluntary work.

Keir: Build up the portfolio

Paul: Yeah.

Marcus: It’s the same when you’re looking for a job, we want to see your portfolio, what you’ve done before and we think clients are the same.

Paul: My attitude is, let’s take a piece of speculative design work is going to cost two days of a designers time – I’m just plucking random figures out of the air here – but you could spend two days doing speculative design work for some dodgy guy who says ‘If you do some speculative design work you’ll win the business’ – and let’s be honest, these are the kind of guys you are going to be working for when you start out – screw that for a game of soldiers, he’s just trying to get one over on you. I’d prefer to spend to the two days working for a local charity that have got no money but a really worthy cause, give them a great design that they can take away and build or do what they want with, and then I’ve got a good portfolio piece.

Marcus: That said, we used to do designs up front. We were shooting ourselves in the foot doing it.

Keir: Before we move on, I think the one thing that struck me was of your comments, and I think it was in response to a particular blog post was that spec design work was actually bad for the client, more than it is for the designer which is quite a unique perspective

Paul: I was reading some of my stuff over that because I think we have a rock solid argument. I won’t go through the whole argument now because there are other things to talk about but basically it boils down to the fact that as a designer or developer you are not well enough informed at the spec stage to produce anything other than a piece of show-off work – so all you are doing is going ‘Taa Daa!!’ look how talented we are! You are not solving any problems, you are not challenging their brief, you are literally just doing a bit of fancy work. And the reality is that if you are the client you are paying for it anyway, because we have to roll the cost of sale into the project. But here’s the killer. You’re not just paying for the piece of speculative work I’ve done for you, but you’re also paying for the speculative work I did for ‘Mike’ who turned us down., because we still have to recover the cost of time we spent doing Mike’s piece of work. So the reality is your paying for your own speculative piece of work and for other people’s speculative piece of work! Sorry, I’m pointing aggressively!

Paul Boag speaking at Future of Web Design

Keir: I’m retracting quickly!

Marcus: I’m gonna get him a box to stand on!

Paul: But I get really annoyed about it and really passionate about it. I would never hire a company that does speculative design work because I’m paying for other people’s design work! It doesn’t make sense!

Keir: Moving swiftly on! (laughs) Going back to the original question! So there’s nothing exciting going on in the world of web?

Paul: Sorry, I’m very aware we’ve gone off on a tangent! There are two levels of excitement. There’s the Silicon Valley, web app type of excitement that everybody features. The cutting-edge, we’re-some-fancy-agency-startup-with-lots-of-venture-capital. And then you go to a conference and there are large companies that are ‘dealing with scalability with over a million hits!’, and you think to yourself ‘very interesting, but no kind of impact on my life’ – but over time that sort of cool stuff tends to trickle down, and I get excited at the next tier down. I get excited when I start to see some of that really cool stuff that maybe is old hat now, that everybody was talking about a year ago or maybe two years ago, when I start seeing that appearing on average websites. Websites that the vast majority of us are working on.

Keir: Can you give an example of something that has done that for you recently?

Paul: Just this whole web application culture of Javascript driven, application-like / desktop-like, because for such a long time that was only for things like Gmail and Google Maps and stuff like that, but now that’s all trickling down and you’re starting to see rich internet applications in boring everyday sites, whether it be a university site or you know, Sussex Police! Anna was telling me about a Police website where is you hear a police helicopter flying over you at night you can look it up the next day and find out why it was there and what it was doing! And all of those Web 2.0 things about openness and transparency as well as some of the technology stuff like AJAX, all of that stuff is now becoming mainstream. And I get excited when fringe stuff becomes mainstream, and the bigger community of developers outside of ‘The Valley’ all start doing it. That’s why I get excited about the web, and that’s why I get excited about stuff that everybody else was excited about a year or two years ago!

Mike: We wanted to move on to the subject of blogging. As a company I believe you don’t blog?

Paul: Not as a company no.

Mike: So you blog as Boagworld, but recently we’ve been intrigued to see you’ve been blogging more personally on Posterous so really we’re trying to work out, is Boagworld purely on the education side and those on your micro-blog are more personal? We were particularly struck by one article – what was the title? ‘The Idea of Personal Brands Stinks’, you use AudioBoo, you have a lot of outlets, how do you decide what goes where?

Paul: You’re making a fundamental mistake here!

Paul: I make many Paul!

Paul: The fundamental mistake you’re making is that you’re presuming that I have a strategy! Which I really really don’t!

Mike: The question should have been, what do you get out of blogging professionally and personally?

Paul: I’ve never been so professionally interviewed!

Keir: Apparently Anna can cut stuff out! It’s apparent that you might get work out of your blogging, I don’t know, but you obviously get more out of it than just that?

Paul: OK! Let me see if I can find a question in there somewhere!

Keir: We don’t do this for a living you know!

Paul: There’s a few things to comment on. First of all, without a doubt, blogging is a major marketing tool for Headscape. The vast majority of our new business comes in via that. It is definitely and categorically a business tool. But it didn’t start out that way. When I started out blogging, it was a little bit of ego – we went to @media 2005 and they got different bloggers to stand up and I thought ‘I want to be like that!’ so I get very inspired and I started blogging partly because of that. But I quickly realised no-one was interested in what I was writing at the time so the blog for me became this place where I could take what I was learning and picking up and rationalise it in a way that made sense to me. So it became a way of me wrapping me head around everything that was going on. It was also a way for me to be storing and holding the stuff I was learning because my memory is horrendous and to this day I find myself saying ‘I’m sure I’ve written something on that’ and I go onto my blog and it’s a way for me to remember. I know it sounds stupid but I really do this, and so I’ll read through my blog and say ‘OK, so that’s what I’m supposed to think about this!’ But it really helps to clarify my thinking – so that was a big part of it. But Boagworld, the domain was bought and I thought I’d write a bit about web design, it was my personal website, and as I wrote more about web design as my head was buzzing with that at the time as this was the time of Web Standards and we were getting into accessibility. And then other people started to take an interest in it and it grew and grew – and then we started the podcast which really came out of the fact that (a) I’d got an iPod for Christmas that was just about beginning to support podcasts, and so I looked for a web design one and there wasn’t one so I thought ‘I’ll do that’ because it’s easier than writing one and I’m crap at writing.

Marcus: (Shyly) Hello, it’s Paul, this is the first ever podcast!

Paul: (Laughs) Which is pretty much what it sounded like!!! It’s like stepping back in time listening to those early ones.

Keir: How long ago was that Paul?

Paul: 2005/2006? I’ll have to have a look. No, it must have been 2005. It was growing, it was building momentum until it eventually became this thing of it’s own. It was beginning to have marketing benefits and I was beginning to spend some of my work time doing this. So relatively recently I came to this realisation that Headscape had robbed me of my blog! Which I’m quite happy with as it’s turned into this great marketing tool which is fun to do and I love it. But I had nowhere to share, I dunno, a silly video of James or some cool thing that was nothing to do with web design or whatever else. So that’s where Posterous came from. It was just an easy way for me to talk about something that wasn’t web design. Occasionally bits of web design get in there – I’ll tell you my dirty little secret for this one, which is that often, if there’s an idea I’ve had, I’m too lazy to write a blog post about it, I’ll record a video. But I won’t put the video onto Boagworld as there’s an expectation that I’ll have a transcript of it to make it accessible, and so I just put it on Posterous to get around it which is really naughty and I should be ashamed of myself! But I do occasionally do that. But most of the time Posterous is just about me having fun. Then you get into things like AudioBoo – AudioBoo is my idea of micro-podcasting, like Twitter is micro-blogging. So it’s little snippets of tips and advice. So, how do I decide what goes on where?

Keir: You’re interviewing yourself now!

Mike: Let’s go and get some coffee! Marcus?

Paul: So basically, if it’s not good enough and not long enough to be a blog post, it’ll become and AudioBoo, that’s if it’s about web design. If it’s about web design and it’s too long for an AudioBoo, it’ll become a blog post. If it’s not about web design, it’s Posterous.

Keir: So you do have a strategy!?

Paul: But where it falls down is where I’ll do a little AudioBoo about something which is the beginning of a thought, then it ends up as a blog post and then it ends up on the podcast as well. So it kind of ripples through.

Keir: That’s cool – it’s interesting to know all that but what I’d personally like to know is what makes you want to share such personal stuff sometimes? I know you’re a Christian and you talk about God, but you also talk about some other personal stuff sometimes too? What is it in you that makes you want to do that?

Paul: I think it’s two things. It’s two major parts of my personality. One is that I am a massive extravert, I’m a massive show-off – I’m never happier than when I’ve got a massive audience. To be entirely frank, you know!

Keir: Had anyone spotted that?!

Paul: Unlike Marcus I can’t sing or play a musical instrument! The best I can do is jump up and down, wave my hands in the air and say ‘Look at Me!’ So there’s that aspect to it. I think there’s another aspect to it. Somebody said to me right when I was a young kid, they said Paul, the thing about you is that you live with your heart on your sleeve, what you see is what you get. And I still think I’m like that now. I’m a very open person. If I’m grumpy everyone knows I’m grumpy, if I’m happy everybody knows I’m happy. I live my life in the open and always have. So I do that online, because I’m not a different person online than I am offline, and I know a lot of people are, but I don’t choose to be that.

Keir: Thanks Paul, that’s a nice explanation.

Mike: OK, one of the questions we have is about honesty and speaking and blogging. Do you ever…

Paul: I make up stuff all the time!

Mike: But it’s very hard I think to always be honest, in all spheres of life. Do you feel you are always as honest as you are?

Paul: Does this go back to the conversation we were having previously Mike?

Mike: It does yeah.

Paul: Because we had this conversation, me and Mike about when you stand on the stage, and sometimes you get off after a presentation and sometimes you go ‘Why did I say that?’ and you think, ‘I said that because I think that’s what people expected me to say’ rather than what I was actually thinking. I mean you gave the example about where you gave a talk about sketching where you said ‘Get away from your computer and start sketching’ when that’s not actually what he does. (Laughs) Well it was either a case of share an example where I had done that and I would rather humiliate you than me!

Mike: Yeah, I wanna reverse that! Anna can apparently cut things out.

Paul: No, no, no editing. We tell people that but it’s a lie! And I’ve done similar things, I’ll be honest. For me where the line comes with honesty is, I don’t think there’s anything wrong with saying ‘I think this is the way it should be’ – but where you fall down and it gets a bit shady is where you say ‘I think this is the way it should be’ but fail to mention that you’re actually there yet, we’re heading in that direction. And I’ve made that mistake too. But I do try and be transparently honest – I don’t try and dress up anything that I talk about, and in fact I’m probably a bit self-deprecating actually. Actually I think a lot of people think I’m a bit of a joker and a bit of a moron. But I do like to simplify things and I do like to take the mystery out of things – I think there are a lot of people, and this goes back to our conversation, I think there are a lot of people making out like their job is a lot fancier, a lot harder than it actually is – and we do like to justify our own existence by using lots of clever words., and having ‘processes’ and ‘methodologies’ and ‘systems.’

Mike: Cool, thanks, that’s interesting. So coming on to status, how important do you think status is in the industry?

Paul: OK, well I’m glad you worded that question the way you did, as I was worried that you were going to word it ‘How important is status is to you?’, and you’d purposely put the question of honesty beforehand! (Laughs)

Keir: We were going to ask ‘How big is your ego?’ but then we’ve scribbled that out! But this also comes off the back of your article about personal branding; the idea of web celebrity, a lot of people would refer to you as one of those.

Paul: I’m going to be entirely honest about this right – which I don’t think a lot of people are. Yes, I love it.

All: (Laughs)

Paul: Of course I love it! Of course you’re going to love it when someone comes up to you and says ‘You’re Paul Boag aren’t you, I really love what you do!’ and anyone who pretends that they don’t like being praised is a liar.

Marcus: I’ve got quite a funny story actually. I went to the Comedy Store in Leicester Square last Friday evening, and we got there and sat in our seats, and there was this young couple, both of them in their early twenties came and sat down next to us for the first half. And I kept seeing this guy look at me, and I thought ‘He’s recognised me!’

All: (Laughs)

Marcus: Nothing was said! Interval comes, I get another beer and sit back down. And he said, ‘I think I know who you are’ and I was like…you’ve got it wrong!

Keir: You’re Paul Boag!

Marcus: But supporting what Paul’s saying, I get recognised at conferences. ‘Say something’ that’s what they always say.

Paul: Yeah!

Marcus: Especially Americans!

Marcus: So I said to one guy, ‘You’re a web designer are you?’ and he said ‘No, I think my Mum’s got one of your records!’

All: (Laughs)

Marcus: It’s gone full circle now. If it’s someone young I expect them to recognise me from the podcast.

Mike: Didn’t your daughter’s friend come up and say she knew you from the podcast?

Marcus: Yes, yes, it still amazes me, because I just pitch up once a week and try and make it look stupid!

Keir: What band were you in again?

Marcus: A band called ‘Breathe’

Keir: And now it’s ‘Stroke the Toad?’

Marcus: Now it’s Stroke the Toad.

Paul: Yeah, to say you don’t like that, I mean, I was at Thorpe Park recently with my youth group and we were queuing up and some guy came up to me and said ‘Are you Paul Boag?!’ and my youth group were wetting themselves, they thought it was hilarious! And yeah I like it, course I do! And people are really kind, they’re really nice about it – but you gotta keep it in perspective right? You know, I’m a niche of a niche of a niche of a niche. I might aspire to be Leo Laporte, and Leo Laporte might aspire to be a daytime TV presenter who aspires to be I dunno, a mainstream TV presenter who aspires to be a film thing and so it goes on. And it’s the whole premise – and I reject the premise – but it’s the premise that because you’re well known, and because a lot of people have heard of you, that in some way your life is of more value. And I think that’s the point I was trying to get across in the personal branding thing. There’s this friend of mine I grew up with who got married to this Indian guy, and she works out in India – we actually raised money for her on the podcast over Christmas – and runs an orphanage out there with a couple of hundred kids who have had their lives ruined. She does more good in a single day than I will do in my lifetime. And OK no-one knows about here, and no-one is interested in her, and I get people come up to me on the Tube?? And that’s ridiculous to me! And that’s what made me angry and that’s what made me want to do that post. And then it all gets out of proportion and it all gets silly. Where in our culture – sorry this is all getting a bit heavy! – where in our culture did we get to a point where Kevin Rose can’t stand in a blimmin’ party without being mobbed by people? You know, that’s weird? There’s something screwed up there.

Marcus: That’s not weird? That’s normal?!

Keir: I guess celebrity is changing? When I grew up fame was the pop stars, the rock stars and now you’ve got tech celebrities.

Marcus: If they had a rock star in that room they would get even more mobbed, but it still happens.

Paul: Just because it’s normal doesn’t make it not weird. Just because it’s been going on for a hundred years, doesn’t make it not weird.

Marcus: I’d say it’s human nature.

Paul: Yeah, and I’m saying human nature sucks!

Marcus: Well deal with it!

Keir: OK, so it has some benefits to you, but it is important?

Paul: In the industry?

Marcus: I’ve been thinking about this. Who’s the most famous web celeb? Zeldman maybe? People with big web projects and big budgets go to Happy Cog because of Zeldman’s celebrity. Not only that – he wouldn’t be famous if he didn’t know his stuff and talked well etc etc.

Paul: The sad fact is there are designers and developers and agencies out there that are as good as Happy Cog.

Marcus: Course there are.

Paul: And there are certainly ones that are better than us. But they don’t get the exposure because they are introverted people. It makes me sad but that’s the reality.

Keir: You actually said the other day in your video…

Paul: Oh don’t quote me back! I’m going to have to contradict myself!

Keir: You said the other day that you could be introverted and be just as successful.

Paul: Yeah, I think you can, but in a different way.

Marcus: What, in a non-successful way?! You can be as good a designer, as good a developer without being famous, but if you’re trying to win business using the Zeldman / Happy Cog argument then you’re going to be a lot better off if you’re somebody who’s known.

Paul: Yeah, but you could still be known and be an introvert. It’s indentifying the methods by which you’re known. For example, Rachel Andrew. Until relatively recently she didn’t do a huge amount of public speaking, and even now doesn’t do massive amounts. But she’s written book after book after book after book. She’s known for that writing and that has given her the profile. You could be an introvert and blog, and have one of the best blogs in the world. You could be submitting gorgeous designs to CSS galleries and be winning work that way. So it doesn’t need to be by being mouthy and extrovert.

Keir: The funny thing is there are agencies out there that are as good as each other – some might win work because of their public persona, and then there are those who win work because they constantly put out a really high standard of work.

Marcus: There are others that might win work because they have a really pushy salesman! It’s just another way of marketing yourself or your company.

Paul: To be honest, look at yourself Mike. OK, you’ve done a couple of speaking slots, but you haven’t spoken a huge amount. But your work has been picked up by people, and people have gone ‘Wow, I really like that’ and that’s spread virally without you jumping up and down like I do going ‘Look at Me!’ So it’s perfectly possible, it’s just a different way of doing it.

Keir: Another question that’s worth asking is that a lot of people have become well down for their niche – recently you’ve been talking a lot about educating clients, Mike has talked a lot about creativity and where he gets ideas from., they tend to be offline. Andy Clarke talks a lot about progressive CSS, CSS3 that sort of thing, for someone who is looking to get their face known in the industry is that something they should do? Find something they’re really interested in and just push it out?

Paul: Absolutely. I remember much nearer the beginning I’d built up a popular podcast that a lot of people listened to and were passionate about. But I couldn’t get speaking opportunities. And I think it was Ryan actually, who was honest enough to talk to me about it and it was his response that was ‘I don’t know what it is that you do?’ – a lot of people don’t know what it is I do! But

Keir: That’s a whole other interview Paul!

Paul: He didn’t know what box to put me in. People like putting other people in boxes.

Mike: It makes picking speakers easy to be honest.

Paul: So you can go, ‘We need someone in this slot who’s going to talk about business’ or ‘development’ or whatever else. I packaged myself very specifically for conferences and speaker opportunities, I will talk about this kind of stuff. Once you’ve done it once, that’s it. But, the problem is you can’t do that forever. You need to re-invent yourself. Jeremy Keith is very good at that. He started off as the DOM scripting guy, then he became the microformats guy, now he’s the HTML5 guy. He knows how to move from thing to thing. He would say that his interests change and he moves on, it might be, it might be a totally subconscious thing, but it’s a damn clever thing, however you slice it.

Marcus: I would argue that this applies to life, not just web design. I’ve got quite big kids now, and I’ve been saying to them for years now relating this to subjects that they are studying, do what you like doing, not what you think you ought to be doing. It applies across the board. If you can do something well, you are going to enjoy doing it.

Keir: Yeah, that will come out when you speak about it, in the passion.

Paul: OK?! Finished with us?!

Marcus: You’ve got a whole podcast here! At least 45 minutes!

Paul: OK, well thanks very much for listening to Boagworld, we’ll see you again next week!

Keir: Thanks a lot!

Thanks goes to Andy Wickes for transcribing this interview.

184. HTML5

On this week’s show: We interview Jeremy Keith about the truth of HTML5 and Ryan Carson shares some more advice about building your own web application.

Play

Download this show.

Launch our podcast player

News

Apple and UI design

Whether you are a fan of the Mac OS or Windows, there is no denying that Apple know what they are doing when it comes to user experience design. There is a lot that can be learnt from them whether you are developing a piece of software or even a website.

This week I have come across two sites which perfectly demonstrates just how deep Apple’s knowledge of UI design goes. The first is Finer Things in Mac, which is a site dedicated to highlighting the small details in the mac OS UI which makes it shine. Examples include:

  • The naming of buttons so they are more descriptive than “Okay” or “Cancel”
  • The way Time machine changes the clock in the menu bar as you go back in time
  • The accuracy of progress bars when compared to windows

The second area that demonstrates Apple’s expertise is in how they have chosen to tackle accessibility on the iPhone 3.1 interface. It is hard to imagine that a touchscreen device with only one physical button could ever be accessible to blind users. However, it would appear they have made it happen.

Marco, a totally blind user who works with Mozilla wrote in his post My first experience using an accessible touch screen device:

I must say this was an amazing experience! My fingers definitely need to get used to gestures such as flicking or tapping, or using a rotor. But having an iPod Nano 4th generation helped with that, since moving the finger over the screen like on a dialer felt most like tracking around the iPod’s click wheel. Even the sound the rotor makes is the same.

This amazing result is made possible by Apple’s VoiceOver technology which is extremely hard to describe. However Apple do provide a video that demonstrates the technology in action and I highly recommend you watch it.

Do you need cake if the icing is amazing?

On last week’s show I talked about 3 Ways to Stand Out From the Crowd. One of the things I mentioned as part of that post was Paul Annett’s talk at SXSW called Oh… that’s clever. In this talk he looked at ways to add design delights that excite and amuse users.

Although I am a massive fan of this approach, it can be taken too far. A Sitepoint article entitled: Do You Need Cake if the Icing is Amazing? looks at one example of where this happened.

The article is about the HEMA website where as the author describes it:

The site renders as what appears to be a garden-variety, IKEA-like online store: navigation tabs along the top and popular products displayed in a grid. Yawn. yawn.

That’s when reality seems to break, and strange and wonderful stuff start to happen.

It all begins when a plastic cup tumbles over, bumps the sticky tape, and a domino effect is set in motion. The tape then crashes onto the stapler before squishing the cake, noisily sliding down the xylophone, and knocking over the fluorescent pens like skittles.

This chain of slapstick events continues, drawing ironing boards, blenders, yo-yos, coat hangers, and kettles into the growing maelstrom before eventually breaking out into parts of the site navigation and text.

By the time this sequence of events has all played out, the tabs are torn and frayed, the navigation text has collapsed into a puddle, and confetti flutters about from above. Very, very cute.

The post is an interesting analysis of the pros and cons of this kind of approach. It concludes by saying:

But as sublimely clever as the animation is, I have to wonder if this project, and the buzz it created, has translated into anything particularly useful for the HEMA business.

What’s more, I wonder how many users have ended up feeling disappointed, frustrated, or confused by being unable to find some of the “bread and butter” basics like locating a store, giving feedback, or asking a question.

I have to say I agree. Although adding design delights and easter eggs is nice, it is easy to overstep the line and end up damaging usability and accessibility.

GIT: Your new best friend

If you develop websites as part of a team you probably use a version control system. We do at Headscape and it seems to be common practice. At the most basic level a version control system allows you to manage files, prevent overwriting by multiple contributors and allow rollback to previous versions of an entire site or a particular file.

The dominant player in this market is Subversion but there is a new kid on the block which seems to be getting a lot of press.

Git is a free & open source, distributed version control system designed to handle everything from small to very large projects. Every Git clone is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server.

This distributed approach has a number of obvious benefits, but it would appear this is just the tip of the iceberg. Think Vitamin has published a post entitled “Why You Should Switch from Subversion to Git” which explains the advantages of Git in full.

There is also a detailed introduction to Git on Sitepoint entitled “Git: Your New Best Friend“.

I freely confess that I know nothing about version control systems (that is Dave and Craig’s areas of expertise). However, I have seen a lot of love for Git online and if you are a developer this is almost certainly worth checking out.

Project management and simplicity

Building and running a successful website is about a lot more than having a great design team. It is also about having a visionary website owner who can think creatively and manage projects successfully.

However, being able to manage projects and have time to think creatively about your site can be a challenging combination. Life is simply too hectic.

Fortunately there are two posts this week that might go someway to inspiring and organising you better.

The first is “How Simplicity Can Help Creativity“. It looks at how simple changes to your routine can help grow your creativity. It contains good solid advice, although admittedly some of the suggestions are primarily aimed at writers.

The second is a Smashing Magazine article entitled “How to Find Time For Everything!” This is essentially a productivity post. However, it is particularly aimed at web workers. It covers everything from your working environment to prioritising and planning.

Both posts are worth a read if you find yourself constantly caught up in the day to day running of your website and never get the opportunity to think more strategically.

Back to top

Interview: Jeremy Keith talks about HTML5

Paul: So we are doing our first interview of the day at dConstruct, and joining us, of course, is Jeremy Keith – hello Jeremy.

Jeremy: Hello.

Marcus: Such a happy hello.

Paul: It is, he’s a happy, jolly person; well known for his jolliness.

Jeremy: It’s true.

Paul: So, HTML 5.

Jeremy: Yes.

Paul: There has been so much talk about HTML 5 recently, we thought, as we’re going to be seeing you, as we’re going to be at dConstruct, we ought to grab you and talk about the subject of HTML 5. Now, I haven’t thought through in a huge amount of depth want I want to cover…

Marcus: Surely Jeremy in cartoon form is want you want to cover?

Paul: Yes, that’s a really good point.

Jeremy: I was really shocked you haven’t prepared.

Paul: Yeah, but actually I managed to watch the cartoon, or read the cartoon.

Jeremy: So that was about you’re level.

Paul: That was about my level, yeah, I felt happy there. So maybe just run through this fundamental issue that XHTML 2 has gone away; HTML 5 seems to be the new thing that all the cool kids like, so what’s going on there?

Jeremy: Okay, well first of all HTML 5 has been around for quite a while; they’ve been working on this, so nothing has particularly changed. Well, Google had their IO Summit thing a few months back, and they came out and said, “We totally support HTML 5, and we think it’s the future”, and suddenly a lot of people got very interested in HTML 5 who hadn’t been paying attention, which is a bit weird. It’s like it’s been going on for ages, but as soon as Google says it’s interesting then people are interested. So that was one thing that kind of sparked a bit of interest in HTML 5 which is kind of good to see. But then the whole XHTML 2 thing was just really bizarre because I hadn’t realised the misconceptions that a lot of plain old working web developers were under about the format. Basically, XHTML 2 has been dead for years, and I thought everyone understood this.

Paul: No.

Jeremy: Okay, so HTML 4.01 was finalised around 2001, and after that W3C said okay, HTML is done, and we think the future is XML based… all these various XML based technologies, and amongst that is XHTML. Now, we all rated XHTML 1, but all that was, was just HTML 4, really. I mean all it is, is just an XML version of HTML. Nothing new was added, it’s all the same elements; everything works pretty much the same. So, really, XHTML 1 is just HTML, and most people used it that way, they would serve it as HTML. This upset a lot of people who thought, “Oh no, you’re serving XML as HTML and that’s bad,” but most of us didn’t care, you know. Browsers rendered it, we were able to validate against it, and that was good. I mean that’s why I use XHTML 1. I serve it as text/html, I don’t care that browsers then treat it as HTML, I get the validator telling me if I forget to close a paragraph, or if I forget to quote an attribute; that’s useful to me as a web developer. But it’s not a completely different format to HTML, it’s just HTML redefined as XML.

XHTML 2 is what the W3C started working on after HTML 4 was finished. XHTML 2 was going to be a complete break; an utterly new format. I mean things like you wouldn’t have an image element, you would have ‘object’ to cover any kind of thing you would put on a page. All sorts of things that really, theoretically, were wonderfully pure and abstract, but practically, just no way anybody’s ever going to use this, because it wasn’t backwards compatible with all the content on the web today.

So there was this kind of split in this W3C around 2004. There was this one particular meeting where the W3C really put their foot down and said, “The future is XML and particularly, XHTML 2. We know it’s not backwards compatible, we don’t care, we’re going to plough forward with this.” And some people in the W3C said “That’s it, we can’t deal with this”, and split off into this separate splinter group (this was Opera and Mozilla at this point), and they called themselves the ‘WHAT Working Group’. Web Hypertext Application something… I don’t know. It’s clearly a ‘back-ronym’ right? They came up with the word ‘what’ and figured out words to go around it.

So, they start work on this thing which they call HTML 5. That’s kind of this buzzword umbrella term to cover one, the next version of the mark-up language we know as HTML, two, XForms which is a good thing that the W3C have been working on to make life better for web developers, but mostly this idea of what they were calling web applications one, which was the idea that we’re moving from documents to web apps, and that’s what real people working on the web really need; fill in the gaps in HTML… We’re working with HTML now to kind of force things to act like applications, we don’t have native things to build applications like, let’s be able to make applications natively so that we don’t have to rely on a plug-in like Flash, or Silverlight, or any of these other non-open technologies.

So that started in 2004. Meanwhile XHTML 2 is being developed at the W3C in the ivory tower where no-one is actually going to use it, and in 2006 Tim Berners Lee wrote a blog post and said, “Yeah we were wrong, we were wrong.”

Paul: Good for him.

Jeremy: Yeah he said, “Actually HTML is still good and is actually the future on the web,” and restarted a charter for the HTML working group. So in 2007, the W3C start work on HTML 5, as in the sequel to HTML 4.

Paul: Corr, this is complicated!

Jeremy: Working with the W… what, working with the WHAT working group?

Marcus: I need a coffee.

Jeremy: I know, I know.

So basically now you’ve got two groups working on this one spec. You’ve got the WHATWG which has a very open process, you’ve got the W3C which is generally more closed, although the HTML working group is more open than most W3C things. A lot of things with W3C happen behind closed doors. Actually with the HTML working group now, anybody can join; it’s a little bit convoluted how you join, but anybody can join.

Meanwhile XHTML 2 was still being developed, you know, down in the cellar they’re working on XHTML 2. But everyone knew, or I assume everyone knew, that it was like this kind of joke really – it wasn’t really intended for working web authors to use on the public web. So earlier this year, finally, 2009, W3C announced, “Oh buy the way, we’re not renewing the charter for XHTML 2″, and most of them went, yeah, no surprise there – really it’s been dead for years.

But a lot of people got really confused, “Oh no I have to change from XHTML to HTML now; I have to change all my mark-up back.” No, if you’re writing XHTML 1, that is basically HTML anyway, and HTML 4 and XHTML 1, those doctypes aren’t going anywhere, your documents are still perfectly good, you don’t have to change anything; everything’s absolutely fine. And what also happened was that some of these people, who were sort of traditionally, as I said, hated it when people like me would serve XHTML 1 as HTML, “Oh no the browser’s treated it as HTML”… They started gloating and saying, “Ah, this is great, this proves that the problem is XML and XHTML in particular, and everyone who ever used XHTML was a fool”, more or less… which really bugged, because like I said, Gareth Rushgrove write a great blog post about this. The reason I use XHTML is to make the validator more powerful, it catches those little things. Basically, it’s like a best practices coding style. So in the same way you’ve got things like JSLint that catches JavaScript coding practices, even if your JavaScript is perfectly valid and will execute, this thing will catch little things which aren’t best practices. That’s what I use the validator for when I write XHTML – it catches little things that wouldn’t be caught if I was writing HTML. So even though I think that’s the reason most developers use XHTML, these people who really looked down on XHTML from the start were like, “Hah-hah, we won!” and were gloating now, and that kicked off a whole shit storm. I’m sorry I shouldn’t say that!

Paul: That’s okay.

Marcus: You can say what you like!

Jeremy: Yeah, so that needed clearing up and a bunch of us were like, “Okay, this is the story and this is what it’s like with XHMTL 2. I know it sounds like XHTML 1, but actually they’re different as chalk and cheese.” I wrote a blog post, and that was okay, and this guy Brad turned it into a comic, and then everyone read it. Then they were, “Oh now I get it – cartoon Jeremy says it’s like cheese, so now I understand it.” No seriously, it did make a big difference, it was more accessible…

Marcus: You must have been happy with ham and hamster…

Jeremy: That I did like; that got quoted on Twitter a lot.

Marcus: Fantastic.

Paul: So this leaves you writing what now? Are you still writing XHTML?

Jeremy: Let’s take sites I’ve built already, so my own personal site, adactio.com, that’s XHTML 1, it has been since 2001, I’m not going to change that. Actually I’ve made a vow not to change my mark-up anyway. Because I kind of assume when people redesign their sites, they change their CSS and they change their mark-up, and I think…

Paul: That kind of destroys the whole point of it, yeah.

Jeremy: So whenever I do a redesign, what I actually do is I add sort of a skin on top. So I’ve got a bunch of skins to my site, I kind of made a vow to myself that even if I’m doing a redesign and think it’ll be really useful to change the mark-up here, but that’s just me personally. Actually at work, and on other projects, I do now use HTML 5.

Paul: Right. Now how does that work, because everybody says, “Well, HTML 5 isn’t supported.”

Jeremy: It’s not ready yet.

Paul: No, exactly.

Jeremy: 2022…

Paul: Yeah, yeah – all of that kind of stuff.

Jeremy: Here’s the thing. If you want to write HTML 5, you take whatever doctype you’re using today, XHTML 1, HTML 4, HTML 3.2, and you change that doctype to ‘doctype HTML’, and there you go you’re writing HTML 5.

Paul: Okay!

Jeremy: So most of HTML 5 is HTML 4. The vast, vast majority of it is exactly the same language, and yet even that is really, really ambitious because one of the things they’re doing is they’re going to define error handling for HTML. Every version of HTML before this, 3.2, 4… All of these previous version, they just defined here’s what authors can do, you’ve got this element, you’ve got that element, boom – the end.

They never defined what happens when you do something wrong, or what a browser should do when it encounters mis-nested tags, things like that. So the browsers have had to kind of invent it, and what happens is that most browsers… Talk to a browser maker and they spend fifty percent of their time figuring out how does Internet Explorer handle this error, and recreating that. A huge amount of time is wasted on this. Or, whatever the leading browser maker is today, how does that browser handle errors? We need to copy that and reverse engineer it. The spec doesn’t tell them how to handle errors. So HTML 5, one of the ambitions is to take HTML 4 and define error handling for everything in it. That alone is massive; massively ambitious. And that alone would take a long time.

In addition, there’s new stuff. So you’ve got this web form stuff, you’ve got new types of inputs, user agents will be able to give us, you know, calendars and sliders and all this stuff, really cool. You’ve got some new structural elements, you’ve got some new rich media stuff like audio and video, you’ve got canvas… So that’s on top of the error handling. So, yes HTML 5 has a lot of new stuff that, frankly, you can’t use today, although a lot of it’s quite well supported, obviously not Internet Explorer, but in a lot browsers, you can use stuff like audio and video, and canvas and stuff like that.

You can’t use all of HTML 5 today, that’s true. But we probably don’t use all of HTML 4 today. For example, if you say, “I’m not going to use a mark-up spec if all of it isn’t implemented in the major browser vendor,” which would be like Internet Explorer, you say, “I’m not going to use a mark-up spec unless Internet Explorer fully implements it.” And yet you would have been using HTML 4 for years. Now, Internet Explorer didn’t fully implement HTML 4 until Internet Explorer 8 when they added support for the abbreviation element.

Paul: Right, okay.

Jeremy: Internet Explorer 7, Internet Explorer 6, Internet Explorer 5, didn’t support HTML 4, if you define support as every single thing in the spec. And you’ve been using CSS 2.1 for years. There isn’t a browser out there… Actually Internet Explorer is the first browser to fully support CSS 2.1, although you could quibble on some stuff, and yet we’ve been using it for years. Because if, ideally, you have to wait until something is fully support until you use it, it’s kind of silly, you just support features. You decide this feature is supported enough that I can use it. Enough browsers support video or canvas that I can use it today. So when people say, “I can’t use it because it’s not ready or it’s not support,” that’s too binary; it’s too simplistic a way of looking at it, because all the technologies we use today, CSS, HTML, are partially support in different browsers – that’s just the way it is.

Paul: Let’s talk about the new structural elements that have been added in to HTML 5. So you’ve got header and footer, and these various other things. I mean obviously you can’t use those as is at the moment because the support isn’t wide enough, is that correct or incorrect?

Jeremy: Well, support’s actually pretty wide in a lot of browsers. What a lot of browsers will do… It’s not so much that they’re supporting these elements, it’s just that they allow you to use arbitrary elements. So in Firefox and Safari, I could write a tag called ‘foo’, and in my style sheets I could say ‘foo, display block, colour red’ and it would work. So if you define working, or support as that, then actually yeah in Firefox and Safari and Opera you can use these new elements today.

Internet Explorer doesn’t have that, Internet Explorer doesn’t let you use arbitrary elements, but there’s a little JavaScript hack you can use to make Internet Explorer behave. In fact we’ve been using this for years with the abbreviation element. If I wanted to use abbreviation and style it in Internet Explorer, in JavaScript I would say ‘document.createElement(‘abbr’)', and suddenly I could style it. It doesn’t make any sense, but then again whatever does with Internet Explorer. So we use the same hack to say create all these new elements.

Paul: Okay, so are you using them at the moment?

Jeremy: No. What I’m doing is, I’m trying to get my head around how these structural concepts work, but I’m not ready to make the move to new elements, and I’m not ready to do client side work that relies on JavaScript, which is what I’d be doing if I used this JavaScript hack. So what I do is, I take the concept, I take the names – header, footer, section – and I use them as my class names. So I’ll have div class equals section, div class equals header, div class equals footer, and it’s partly so I can get my head round how these things work together, and also, it allows me to basically have self documenting code in that when I’m handing it off to developers that are back end developers who are building a system, I often give templates – HTML templates. And I would usually have to write out this is how this class works, and I’d have to comment everything and say the class of ‘foobar’ is used for this kind of content. And now I can kind of say, just link to the HTML 5 spec; header is for this, footer is for that, section is for this, and okay I’m using classes not elements, but the definitions…

Paul: Are the same.

Jeremy: Are the same. So there’s benefit for me getting my head round this new stuff and sort of getting a jump up on what we’re going to be using in the future, and it’s a benefit for documentation because it’s a great big spec documenting all this stuff. So I’m using them but not really in day to day work.

Paul: Because there’s some debate, is there not, about these pre-defined elements, you know, things like footer I mean. I was reading Zeldman about, well footer isn’t what you expect it to be. So potentially, as this is still in draft, you might be using footer in what will ultimately end up being the wrong way because they might change the way footer works and then you’re going to be out of sync with things.

Jeremy: Yeah, but it’s by using these things that you get to know these problems, and flag them up and bring them to the working group. In Zeldman’s thing, he said… So Zeldman asked a bunch of us to get together with him in New York about two weeks ago, because basically we’re all working web developers, we’re all interested in HTML 5, but we’re kind of sceptical of it, so like we’d be hearing conflicting things people say, there’s a lot of rumours going round, we don’t know what to believe, let’s all get together in one room and go through the spec.

We spent two days literally just going through the spec, and figured out how it affects us. And we’re not interested in the browser features, and the DOM stuff and the APIs, we’re interested in the structural stuff; we spent most of the time talking about this and the semantic meanings of these new elements, and that’s where we came against these issues. Like, wait a minute, the content model for what they call footer is totally different from what any working web developer would call a footer. So in our element, footer, you can’t put a nav element, and you can’t use headings, you can’t use H1s or H2s. But you ask a working web developer what footer is, and they point you to Flickr, or their blog they have, you know, “Oh a footer’s where I pull in my pictures from Flickr, and I have other navigation, and stuff like that.” So instead you have a flat footer which has kind of got a bit more popular in the last few years. So there’s a clash there in the semantic meaning of footer in English for most working web developers, and the semantic meaning of footer the element, and that’s something that came out of that meeting, we realised okay, this is an issue. That’s one of the things that we flagged up.

And there’s a few things like that, that when you really sit down and look you realise hang on, these two elements sound really, really similar, why are there two of them? So there’s a section and an article… For historical reasons I can see why they’re different, but they’ve actually evolved over time now to converge and get really similar. So we found a bunch of these things as authors we realised there were issues with, and we’re bringing them to the working group, we’re flagging them up, we’re publishing them, we’re blogging about it. And I think the reason this hasn’t really come to light before, is that most of the people on the list, and in IRC and the WHAT Working Group, they’re kind of hard core developers making web apps. These are the people building Google Wave, and building these big, big apps, and they’re not really thinking so much about the semantic meaning of documents. And also, there’s the browser makers, which is good – you want browser makers involved in the spec so that you know this stuff’s going to be implemented…

Paul: Yeah, of course.

Jeremy: As Hicksy keeps saying, you know, if one browser maker says I won’t implement this feature, that feature comes out of the spec, because otherwise the spec is just fiction, and it wants to be practical. And of course, that means the spec won’t be the best possible spec it could be, but it will be the best possible spec it can be and be implemented…

Paul: …Realistically.

Jeremy: Exactly, realistically. So, there hasn’t been enough working web developers involved in the process, in my opinion. There’s a lot of programmers, a lot of browser makers, not enough just, you know, working web developers. So, recently, Zeldman made this effort, let’s all get together. I’d been researching it a lot, and so I was explaining stuff to them, they were telling me about how they felt about this stuff, there was Eric Meyer there who’s got a lot of history with working with specs, and Tantek was there and he knows about how to read these kind of specs. So together we had a really good group of people, and we were able to come to the consensus that we can all… I mean, we disagreed on some stuff, I’d like to have this feature, and I don’t care about that feature, but there was a core set of stuff we all agreed on that was in the spec: this was confusing, that needs to either change, be dropped, stuff like that, and that would be our concerns. And what I what I’ve been encouraging people to do on my blog, which has kind of turned into an HTML 5 blog…

Paul: Yeah it has, I’ve noticed this!

Jeremy: …Is to get you, the kind of people who would read my blog, to get involved in the process, to get involved in the WHAT WG, and I’ve seen it happening, it’s great. I’ve seen web developers going on the IRC channel asking really basic questions like, “I’m confused by this element, how am I supposed to use it?” And then these people who are writing the spec, having to explain in normal words how it’s supposed to work, and then realising hang on this might be a problem, if I can’t explain it well then maybe this element is going to be an issue, and things like footer are obviously a problem; it’s got to change.

Paul: I read some article which seemed very left field, which was basically saying why is the W3C actually defining things like nav, and footer, and article, and section and all the rest of it? Why can’t we make up our own tags? Which kind of almost brings you back to XML I guess.

Jeremy: Yeah, the idea of extensibility. I think it’s probably John Allsopp’s List-A-Part article you talking about.

Paul: It wasn’t actually, but yeah I was aware of that one as well.

Jeremy: So there’s basically two schools of thought. What you need to provide is a mechanism for extensibility that allows anybody to extend it, and this kind of is the W3C idea of RDF and RDFA, that potentially you could encode any data in the universe, it’s infinitely extendable, and any author can define a vocabulary. And then there’s the other school of thought which is you keep the extensibility deliberately limited, and deliberately centralised to a community, and that people have to cooperate to decide what extensibility is to be used. Now that basically comes from the micro-format school of thought, where you don’t try and encode everything in the universe. You look for what’s the most common use cases, what’s the minimum you need to allow people to encode those cases, and you quantify that. You say we’ll create an element for that because eighty percent of people are publishing it, but we’re not going to create an element for something that’s really fringe, and sort of left field.

And that’s the way the HTML 5 group have gone, it’s like we’re going to keep things scarce and controlled, and if we create a new element it’s for a really good reason; we’ve thought about it, and it’s actually going to help web developers. And if anything, I think they might have created too many, not too few, and it’s only a handful, there’s maybe like ten new elements, you know structural elements, and if anything I think so of them could go.

So there’s these two very different schools of thought, and I was reading a blog post from 2006, nothing to do with HTML 5, it was to do with this idea of namespaces in HTML, which is what you get in XML – allows namespaces to allow you to create your vocabulary, you can put anything in there. It said if namespaces had been allowed in HTML then during the browser wars in the late nineties when this browser was inventing this tag, and that browser was inventing that tag, and it was just this mess of stuff, if there was a way to infinitely extend HTML, it would have legitimised that. They would have been okay with that, and we couldn’t have complained. As it was, they had to sit down in the end and sit around the table and hash this stuff out, because we complained and said, “It’s a messed up landscape and you’ve got some browsers supporting some stuff and some browsers support another thing.”

So, because HTML is limited, you have a certain amount of interoperability, and so I’ve come around to that point of view. That actually I can see the case for extending HTML and we have some mechanisms, we have the class attribute, a fairly limited extensibility thing, and I can see why for your own personal needs you might want to extend HTML, but I do actually think there’s a benefit to having a community deciding what’s the best elements, as long as that community is listening to all concerns, and that includes authors. My concern is that the community isn’t getting enough input from working web developers, but I see that changing. So I’m actually pretty reassured.

Paul: Okay, that makes a lot more sense. There’s one other question that I want to ask before we wrap things up, which is this canvas element. There seems to be a lot of excitement about canvas, but very little descriptions about what it does and why it’s exciting that is accessible to a lot of people, and understandable by a lot of people. Can you kind of summarise the canvas?

Jeremy: The canvas is a dynamic image.

Paul: Right.

Jeremy: The image element is static, and the canvas element is dynamic over time, and it can be interactive. So basically I believe you can have interactive graphs, you can have moving things like animation, you can draw on it and define movements… So it can do a lot of stuff that say, you know, Flash 1 could do, all this basic sort of stuff, and it is very exciting that where you would have needed a plug-in, you can now write an element and write some script, and you don’t need a powerful piece of software to write this stuff, you just need a text editor and everything’s cool.

So that’s good, and it’s already implemented in a lot of browsers; Safari, Firefox – they’ve got canvas, and people have already done really exciting things. John Resic has ported the processing language into JavaScript, processing.js, that uses canvas; it’s amazing. You’ve got this ball bouncing, and lines going, and generative art; all this amazing stuff – no plug-in required, it’s all native to the browser. That’s great. So the spec that defines canvas is for interactive or dynamic images. It is not for text. The spec doesn’t ever say… in fact it will forbid you from using text. But because it can, people have started putting text in there and then dynamically…

Paul: Because doesn’t Google Wave use it?

Jeremy: Err, I’m not sure about Google Wave, I haven’t really checked that out…

Paul: Perhaps I’m getting confused…

Jeremy: But Google is certainly experimenting with canvas with some things. But there’re things like… Have you seen Bespin? It’s this Mozilla project which is basically a text editor in your browser, or a code editor in your browser, and it’s all built using canvas. It’s incredibly powerful, it’s really impressive. But, those bits of text that are in canvas are just shapes to the DOM, there is no DOM saying this is a string, this is an element, it’s just there are some vector shapes, because canvas is just vector. So any piece of assistive technology just sees a bunch of… like there’s an image here of some kind. And you can find some fallback to describe the image, this is a chart showing blah blah blah, but if you’re putting a text editor in there, there’s no way they can interact with it, it’s just impossible.

Now, you could say, “But that’s not the point,” and the spec should maybe say you don’t use it for this, but people are going to use it for that because you can. So you say, okay, then the challenge is, if people are going to use it for that, even if they should be using a different technology like SVG or Flash, if people are going to do that how do we make it accessible, and that’s where there’s a lot of work going on. There’s people at Apple working on this, James Craig, who’s a really smart guy, he’s working on this idea of a shadow DOM that’s in canvas, so there is work on that. I personally think it’s such a big issue, it’s such a big thing, it’s such a powerful thing, I think it might benefit from being split off into its own spec.

Paul: Oh, okay.

Jeremy: Which has already happened with some HTML 5 stuff. Things like storage and client-side database, there’s all this powerful stuff. A lot of that ends up being spun off into a separate spec because it’s like it’s getting too unwieldy for the mark-ups.

Paul: Yeah, yeah.

Jeremy: And I kind of have this suspicion that this might be the case with canvas, because otherwise it may hold up the rest of the spec, and we’ve seen this happen with CSS 3. There were certain parts of the modules that were really important to solve for internationalisation reasons like text modules, but because that one part of CSS 3 was hard to solve it held up all this other stuff like multiple background images and border radius, and it held the hold thing back, and I would rather see things split off and worked on separately than be part of a spec and holding it back. So we’ll see; canvas is a big, big issue.

Paul: So you wouldn’t be doing a huge amount yourself in Clear Left, doing huge amount with canvas at the moment?

Jeremy: No, but that’s not the kind of work we do, it doesn’t really require…

Paul: But then the kind of work you do is the kind of work that a lot of the people listening to this will be doing. Rather than big fancy web apps.

Jeremy: Yeah, what we tend to do is documents that have interactive elements to them rather than applications that sometimes have document-like parts, and I think most people working on the web are like that, you know documents… Some things you want to be more interactive. So there’s other things in HTML 5 I would use, but that wouldn’t be one of them.

I’ll use some of the new input types already, because the default behaviour, if you say input type equals foo, the browser doesn’t know what foo is, it will just display a text input. That’s the default fallback behaviour for every browser. So if you try one of these new things like input type equals search, well in Safari will get this nice search field the same way you get in the Google search part of Safari; you get this nice styled thing with a little ‘x’ in the corner. Every other browser just gets a text input, which is what you would have got anyway. And there’s a few things like that I use today, because there’s no harm and because there is that kind of degradation that works well. But it’s the little things I use.

Paul: So, let’s finish things by saying okay, there’s some people that have listened to this and thought, “Yeah, really cool. I want to be doing some of that kind of stuff that you’ve just mentioned.” Where do they go to learn that stuff? And don’t say the spec!

Marcus: Where do normal people go?

Jeremy: The full spec has got loads of stuff for browser makers; we don’t care about that – we’re not browser makers. Michael Smith at W3C has actually spun off… Parse the spec, take out all the stuff for browser makers, and that just leaves the stuff for authors.

Paul: See, now didn’t that… That was like today that came out wasn’t it?

Jeremy: No, no, it’s been out for a while, but I pointed Zeldman to it and he blogged about it.

Paul: Ah, that’s where I read about it. There we go.

Jeremy: Yeah, because we’ve got this basecamp going for our HTML 5 super-friends group, and err…

Paul: You’re a super-friend!

Jeremy: Yeah, with unicorns.

Paul: Okay, that’s good!

Jeremy: And Eric was saying, “We should create a version for the spec that’s just the author’s stuff without the browser stuff,” and I was like actually that exists and it’s over here and then Zeldman linked to it. If you look at Zeldman, he’s linked to it; I’ve linked to it in my blog a few times as well. So there’s that, that’s really useful for just getting the semantics. Going to the IRC channel and the chat there, there’s also sites like html5doctor.com, that’s people like Bruce Lawson, and Remi Sharp, and these people. You have a question, you write to them, they answer the question.

Paul: Brilliant.

Jeremy: They also get questions from people with genuine medical problems, because they give out good Google juice for the word ‘doctor’.

So that’s very useful for web developers who say, “How do I do this? I don’t understand this element.” Yeah, start using it. I would say you’ve basically got three options today. You can just swap out your doctype to ‘doctype html’ and stop there, and just carry on doing what you’re doing – that’s one way. You can swap out your doctype and start using the class names that are taken from these structural elements, that’s what I’m doing, that’s another way. Or you can be hardcore. Swap out your doctype and start actually using these new elements, and use this JavaScript hack for IE.

So you’ve got these three levels of how far you want to go. I mean, on your personal site you could use that third option, push the boat out and go for it. I wouldn’t really do it on a client’s site yet. So you’ve got those things, there’s a validator, html5.validator.nu, and actually the W3C validator uses that, so you can validate HTML 5 today, and that means you can use Aria roles in HTML 5, which you can’t do in HTML 4 or XHTML and validate at the same time. So that’s really, really useful having Aria and HTML together. So you can do it today, keep up with HTML 5 Doctor, hang out in the RSD channel, and if you’re up to it, join the mailing list, although there’s a lot of talk from browsers makers. It goes way over my head.

Paul: Okay, thank you so much Jeremy, that was really useful. I think that has certainly clarified a lot for me, and I’m sure for a lot of people listening too.

Jeremy: I sew clarity.

Paul: Yes, thank you for passing your wisdom on to us.

Jeremy: Any time Paul.

Paul: Okay thanks.

Thanks goes to Gareth James for transcribing this interview.

Back to top

Ryan Carson: advice on building web apps part 3

Hey everyone, I’m Ryan Carson, founder of Carsonified.com, the makers of Think Vitamin, DropSend and the events Future of Web Apps and Future of Web Design.

We’ve both failed and succeeded in building web apps so I’m going to share a few tips that we learned the hard way. Hope you find them useful!

  1. Measure marketing success. As developers and designers, we often shy away from marketing as it’s perceived as dirty. This will absolutely kill your web app. So make sure every time you place an ad, send out an email newsletter or ask someone to link to you, use the Google URL Builder and track the results as a campaign in Google Analytics.
  2. Write out the signup steps for your app. Before you even begin wireframing, spend a day jotting down the rough steps that the user will go through to sign up for an account. This helps you spot potential areas for improving the user experience. Make sure to pay special attention to which form fields should be required and what kind of help text you’ll write to accompany the page.
  3. Give away free-upgrade coupons. When we were running DropSend.com, we placed a simple status message at the top of every page of the app. We changed it weekly to make sure people noticed it and we also made it really noticeable with colour. We regularly offered a coupon code which allowed users to upgrade for free for the month and it worked surprisingly well. I think this is because it removes the risk of trying out the more expensive plan. I’d definitely recommend it.
  4. Create content for your potential users. One of the most powerful ways to do marketing for your product is to offer valuable content to your potential customers. This is expensive and time consuming but it’s highly effective. For example, if you’re building a todo list web app, write a blog that offers a free daily productivity tip or GTD hack. Make sure to offer a weekly newsletter – they’re very effective if they’re based on good content (and not cheesy sales offers).
  5. Get your hosting and deployment nailed down. The thing that will haunt you forever is poor hosting and deployment methods. I’d highly recommend that you make a 1-button deployment system that quickly deploys from a development environment to a staging environment and then to a production server. Make sure the database on the staging environment is identical to production, as this will help you spot bugs. I can’t tell you how many times we’ve had trouble because no one except the developer new how to deploy the site. It needs to be easy, bullet-proof, and reversible if things go wrong.

That’s it – hope everyone found those simple tips useful.

By the way, we’ll be discussing other important web app topics at The Future of Web Apps on Sep 30 – Oct 2nd in London. Speakers include Twitter, Facebook, Mozilla, Gary Vaynerchuk, Kevin Rose of digg, Mike Arrington of TechCrunch and more. Feel free to stop by the site at http://bit.ly/fowa-london-09

Back to top

183. Inspired

On this week’s show: Paul shares 3 ways to make your site stand out from the crowd. Matt Curry introduces us to Google website optimiser and Lyle Barras reviews Dropbox.

Play

Download this show.

Launch our podcast player

Housekeeping

A couple of random pieces of housekeeping this week.

Sponsor SXSW

First, we are looking for some Micro sponsors for this year’s Great British Boozeup. In case you don’t know the Great British Boozeup is a party that Headscape and Clearleft have thrown for the last few years at SXSW.

This year we are looking for some additional sponsors. So if you are a company interested in reaching out to the web design community and have £500 to spend, drop us an email and will look at making you a sponsor.

We want to showcase your work

Second, I really want to start showcasing upcoming members of the web design community on Boagworld. Therefore, if you have written a great blog post that you think Boagworld readers would like, drop me a line with a link to the post and we will look at reprinting it on Boagworld. Obviously we will link back to your own blog and publish a little bio about yourself.

Back to top

News

6 Steps to Creating a Unique Selling Proposition

One of the first questions we ask new clients before beginning a site redesign is “what are your unique selling points?” Of course in reality it is extremely rare to find an organisation that have truly unique selling points. However, every organisation should have a clear idea of what their distinguishing features are. What are the things that makes them stand out from the crowd.

What surprises is how few clients know what their USPs are. This is fundamental stuff and yet many organisations fail to address them. Whether online or off an organisation needs to be able to clearly articulate what sets them apart.

There is an excellent post on Sitepoint this week entitled “6 Steps to Creating a Unique Selling Proposition” that kinds the reader through the process of establishing their USPs. The six steps include:

  • Describing your target audience
  • Explaining the problem you solve
  • Listing the biggest distinctive benefits
  • Defining your promise
  • Combining and reworking your promises
  • Cutting the whole thing down into a single statement

It is a great post and definitely worth a read if you are a website owner trying to communicate what your organisation is about online.

Building a blog with HTML 5

Last week I was at the Future of Web Design Tour in Bristol and was fortunate enough to hear Bruce Lawson talk about building a blog with HTML 5. It was a real eye opener.

Many of us have the perception that HTML 5 is a technology we will work with in the dim and distant future, when all the major browsers fully support it. However, that is not the case. Browser manufacturers already support many of the elements in HTML 5 and handle gracefully many of those they do not. The result is that we can start building sites using HTML 5 now.

In Bruce’s talk he built a basic blog live on stage demonstrating many of the new characteristics of HTML. It was an amazing demonstration that significantly improved my understanding of how this new specification would work in practice.

Unfortunately the talk is not online yet. However in the meantime Bruce has released an article on HTML 5 Doctor which covers exactly the same subject.

This is a ‘must read’ if you code HTML. There really is nothing stopping you using HTML 5 right now. However, if you are still to be convinced listen to next week’s show where we plan to interview Jeremy Keith on exactly this subject.

Colour communicates meaning

Colour is one of the most powerful tools in a designers arsenal. Colour can have a profound impact on how we respond to design and significantly influences our behaviour.

However, it is often an area that is underestimated by website owners. They view colour as a personal preference not as something that we respond to collectively. That is why I was so pleased to see Rob Mills post “How Colour Communicates Meaning.”

The post is a great introduction into colour theory and the meanings that are communicated through your choice of colour. The post looks at:

  • How colour affects our mood
  • How different colour communicates different messages
  • The cultural significance of colour
  • How colour is inspired by our surroundings
  • The political and religious associations of colour

It is a great post that introduces the reader to the world of colour theory.

With all of that in mind it is unsurprising that picking a colour palette can be tricky. One approach used by designers is to use a key image or photograph as the basis for a colour palette. Another post we came across this week shows you how to use Kuler as a tool for doing exactly this. So next time you are struggling to select a colour palette checkout this Sitepoint post on how to use Kuler to pick a palette from an image.

The Seven Deadly Sins of Web Project Management

TheSamBarnes.com is a great blog about web project management. We have mentioned it before on the show and it is certainly one of my regular pit stops.

Web project management is not the most exciting of subjects, but one that to some extent we all have to deal with. Whether you are freelancer running your own projects or a website owner dealing with politics and external suppliers, there is no avoiding project management.

A new series on the blog particularly caught my eye. It features the seven deadly sins of web project management. At the time of writing there were only two posts dealing with four ‘sins’. Nevertheless it is shaping up to be a great series.

If you ever find yourself managing projects this is a series you will want to read.

Back to top

Make your website stand out from the crowd

This week we discuss how too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

Read 3 Ways To Make Your Website Stand Out From The Crowd

Back to top

Listeners feedback:

A/B Testing

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

I’m Matt Curry, Head of New Media for apetito, and for my sins I’m one of Paul’s clients. We’ve worked with Headscape for around 5 years now, predominantly on WilthsireFarmFoods.com, an ecommerce site with a unique elderly customer base, which if you subscribe to the podcast, you’ll know a fair bit about by now.  As at WiltshireFarmFoods.com we have a healthy obsession with conversion rate and website optimization, so Paul’s asked me to respond to a reader question this week. How exciting.

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

Google Website Optimiser is a tool used, unsurprisingly, to optimize the conversion rate of your site. Now every site ultimately wants a user to do something, be it buy a product, subscribe to service, make a donation or something simply forwarding the article to a friend – if your site has a clear goal, Google Website Optimiser allows you to perform 2 types of tests on your website content, A/B Split tests and Multivariate Tests.

In the case of 37 Signals, they were seeing if Website Optimiser could help them increase the conversion rate of their paid plan signup page – they were testing different variations of copy for the Heading and subheading of the page, to see which combination worked the most effectively.

This is of course nothing new, and indeed, some platforms such as Demandware have content testing built in, alternative analytics packages such as Omniture or Coremetrics also do this, and looking at email content, many ESP’s such as Pure allow you to test multiple subject lines and broadcast times. At Wiltshire Farm Foods, being as obsessed with conversion rate as we are, we’ve performed numerous tests, such any rate changes a new design brings, testing changes to Average Order Value during a price led promotion, and checkout abandonment rates given different variations of microcopy.

Whilst simple A/B testing can be performed in easier ways – remember a simple landing page conversion test can be done by varying destination address in your Google Adwords, Google Website Optimizers power comes from it’s multivariate testing suite. This allows you to perform tests on variations of your content, as in the example from 37SIgnals, to see which combination works better at driving your visitors to action.

However, if you have a particularly complex site, as we have, Google Website Optimiser can be frustratingly limited. For example testing a new product detail page layout across the site – when you have friendly URLs in place, which we do via an isapi rewrite,  can be rather difficult. Google Website Optimiser is very strict on the criteria needed to complete a test, and if you most of your content is dynamically generated, be prepared to write considerable additional code to ensure you’re calling the correct tracking script for each experiment.

If all this sounds too much for you, remember many such tests can be done using User Defined Variables in your Google Analytics. I dearly love the Advanced Segments part of Analytics, and despite “still” not being able to overlay segments, it can tell you a great deal about your site. So, for example, for an A/B test based on a redesign of dynamic content such as a Product Details page, you could set the variable to “New Design” or “Old Design”, and track goal conversion from there.  Just remember to drop a cookie to ensure a consistent experience. Being able to set visitor variables like this in code, rather than having to rely on the strict requirements of Google Website Optimiser, means your open to test a great deal more.

Remember, that if you’re testing a radical change to your website, you should expect an initial drop in conversion – users tend not to like change! You may wish to only test the new design with only a small percentage of your traffic, and increase the percentage as you become more confident. When we launched the new Wiltshire farm foods website mid February, we started with only 1 in 20 visitors seeing the new design, and gradually (or not!) increased it as we saw the positive effect on conversion rate it had.

And of course, nothing even got to this stage without User Testing – but that’s a topic for later!

Personally, I’m surprised by the significant increases in conversion that 37Signals had – how many of us even read the headings of such pages – you normally can’t expect vast jumps in conversion rate unless you are radically changing content.

The most successful variant 37Signals tested was the one that communicated no commitment, a minimal time cost – signup takes less than 60 seconds, and a delayed monetary cost with a 30 day free trial – yet giving immediate utility to the user.  I’m not exactly shocked it won! If you haven’t read Richard Thalers Nudge, which deals with incentives & choice architecture, then I heartily recommend it.

Of course, any good website copywriter would be able to tell you this, without copious testing.  There’s certainly a danger, especially when you are looking at testing and changing copy that each page may end up with a different tone of voice, and your site could easily come across as schizophrenic. If you’re serious about conversion, employing someone to develop an audience-appropriate tone of voice is very important.

I’d be interested if 37Signals play around with the words “Free Trial” – since with nowadays promotionally savvy audience, these words can have negative connotations.

Finally, I would say, as a caveat, don’t get wrapped up in statistics, it sounds corny, but analysis paralysis can happen, getting so wrapped up in each little percentage point increase that you forget the bigger picture. We’re all clever people, we hopefully know our audience, what works and what doesn’t, and we should trust our gut instincts more.

A review of Dropbox

Lyle Barras has been kind enough to send us an audio review of Dropbox:

Hi Paul and Marcus, my name is Lyle and I’m a hobbyist web developer. I’d like to give a quick review of an online tool called dropbox and a little about the way I use it.

Dropbox is an online storage device. You simply sign up for an account at www.getdropbox.com; the free accounts give you 2GB of storage, and then download the little application.

You can download as many copies of the application as you want so that you can sync up as many computers as you want and the really great news is that it’s Mac, Windows and Linux compatible. I have tried it on all three and it works seamlessly. There is also a pretty cool web interface if you happen to be on a machine that doesn’t have the app installed.

As soon as you place a file or folder into the dropbox then it sync’s to the other machines you have set up and the file is there almost immediately.

If 2GB isn’t quite enough you can upgrade to one of the two paid accounts. Pro 50 gives you 50GB for $9.99/month and Pro 100 gives you 100GB for $19.99/month. I think the Pro 50 is pretty good value if your storage need is big enough.

At any time you can refer the tool to your mates. If they then sign up, even for a free account and download the app then you get another 250MB of free storage and so do they. To date I have referred two of my mates and got 500MB free.

I have found one problem with dropbox. When I upgraded my iMac and MacBook I found dropbox to be a bit glitchy and crashy. I did a bit of Googling and found that dropbox had already released a new fixed version of the app.

To pinch a bit of the advertising guff from the site

Dropbox replaces:

  • Emailing file attachments to yourself and other people
  • Using USB drives to move files between computers
  • Renaming files to keep a history of previous versions
  • Complicated backup software
  • FTP servers, system-specific sharing methods, Network Attached Storage (NAS)

As I said at the beginning I’m a hobbyist web developer. I had been using a memory stick to carry round my work as I can really justify one of these posh versioning tools. I was sick of thinking “Right I’ll do a little bit” and find that I have left the drive at home or in the office.

Dropbox replaces all that. I just use it as my memory stick and it’s always there I don’t even need to be connected to the net as long as I have sync’d the machine recently.

I’m utterly sold and couldn’t imagine not having my dropbox now.

Thanks for your time guys, keep up the good work and keep up the dodgy jokes Marcus.

Back to top

179. Affordance

On this week’s show: Ryan and Stanton are back and we are joined by Mr Marcus Lillington! We talk to Dan Rubin about making your interface invisible and answer your questions about working on multiple projects at the same time.

Play

Download this show

Launch our podcast player

News

RTFM

The first post this week is an article on webdesignernotebook.com from Yaili, in which she has a little rant on the fact that we, web designers, like to complain about how little recognition our profession has, how everyone likes to think they can make a website, and how clients don’t respect our work. But when it comes to actually doing something that could make us a bit closer to any other “official” profession, we’re bored and dismiss it. It’s so much funnier to complain about IE6!

Yaili has made a point of reading through the W3C specifications for CSSS2.1 and 3, HTML 4.01 and HTML 5. While most of us claim to be familiar with the specifications, how many of us – hand on heart – can honestly say they’ve fully read all of them?

The W3C specs are the closest thing we have to a manual and anyone who works in this field should have read them at least once, we don’t have to know them by heart or be able to quote from them, but we should be familiar with what they contain and be able to use them as a reference like any other professional book, as Yaili says, “After all, those specs lay the foundation of what we work on every day, so we should at least have an overall knowledge of them and of what they address.”

I know personally, this post has acted as an encouragement to print off the specs and read them again on the commute.

Structural Tags in HTML5

If you’ve been inspired by Yaili’s encouragement to read the HTML5 spec’s, then the next post might be of interest to you also. The HTML5 specification has added quite a few interesting and useful tags for structuring your markup and will replace many of our typical DIV entries from our code.

Of course this is an audio podcast, so I’m not going to start reading code out for you, but this is a nicely detailed article which explains the new tags such as header, footer, nav, article and aside which you can start using today, and includes a couple of tricks to make current browsers treat them as they should by using the CSS display:block attribute as well as a javascript fix for Internet Explorer.

It’s a nice primer for anyone starting to play with HTML5, so give it a read!

Redesigning your own site

And finally we have an article on A List Apart which touches on those times when you have to deal with your most difficult client. Yourself.

Lea Alcantara discusses her experience and thought process of redesigning her personal site. Your personal site has to demonstrate proficiency in the very latest development and trends in the industry while remaining true to the brand which you may have taken years to establish. Cameron Moll’s mantra of “Good designers redesign, great designers realign” features heavily in this thought process.

The article details Lea’s process from start to finish, explaining certain dead ends – like thinking she could jump right into Photoshop and play – to starting with her branding and letting the design evolve from that. She explains how she consulted with some trusted design friends and urged them to provide objective design analysis instead of personal taste.

While the article is focused on a particular site design I think there’s some good tips in here that we can all take away, or at least keep in mind when we decide to work with our most difficult client.

Back to top

 

Interview: Dan Rubin making your interface invisible

Ryan: You did a really good talk this afternoon on “making your interface invisible”.

Dan: Thank You

Ryan: What does that mean then? *Laughter*

Dan: Select all…. delete

Ryan: Hiding the interface from your users

Dan: making you interface invisible, doesn’t mean what it sounds like. Thankfully. It’s about the idea of designing for the experience rather than for the visuals or particular features or anything like that. Making those blend so far into the background that users don’t even notice them. That’s what I mean by making the interfaces invisible.
It’s not a new concept if you do a couple of searches on The Google, you will actually find even A-list apart article back in 2000 covering the same kind of stuff. It just hasn’t seemed to sink in and one of the reasons that I’ve kind of thinking lately is that there just aren’t enough designers and developers talking about it. Usually you here about the concept of it an interface disappearing being talked about user experience (UX folk) designers or usability experts and consultants. A lot of the time designers and developer just don’t listen to people who are the same us, those who don’t do exactly what we do. We do listen to them but we just don’t listen in the same way. So if we only hear the same kind of advice from people who aren’t doing what we are doing it’s easier for us to dismiss it. I think it’s more important for people who do the actual design and do the actual development to be talking about it not just thinking about it, but doing it.

Ryan: You mentioned in your talk your talk was targets at not just people who design interfaces but (I can’t remember how you put it), not just designers who push pixels around who do the actual visual design. I’ve always associated interface design with that.

Dan: The thing that I’ve learned from clients (first of all) and then then I realised it applies to all of us. Is that when people hear the word “design” they think that it’s something visual and it’s not. The concept of design is much more basic, its creative problem solving. I mean it can be called a lot of things, but design isn’t just a purely visual task and you can design thing without any visual element. People who design applications aren’t designing the interface to the application; they are designing the interaction, that’s why we have so many. The answer to that the industry has come up with is to come up with a lot of different terms that your experience designer, that your interaction designer. The reason we have to come up with these terms is that people hear design on its own and they think visual. But that’s a visual designer, a graphic designer an interface designer. If were just talking about the process of design, it’s something that everybody is a part of. Whether you’re a developer, an information architect, an interface designer or you’re an amateur, it really doesn’t matter. Your part of the design process. It’s a much bigger concept, that’s why when talking about the idea of designing for the experience, trying to design the experience itself rather than specific parts of it and making sure those parts blend into the background. People just come away having a wonderful experience. That’s why everybody in the team on a given project has to be a member of the design process, otherwise that won’t happen.

Ryan: In your talk you mentioned mimicking physical interfaces and you were kind of talking about trying translate what we do in the real world into your interfaces and those kind of experiences, it’s that right?

Dan: yeh, well there is this concept that we all know, we all talk about look and feel. That’s a common phrase that’s used a lot. But a more specific concept and term that I recently discovered called “affordance” and it’s been around for ages. It’s not new to people who are cognitive psychologists or who are in product design and it really we do the same thing with interface design. Any that’s designed for the screen, especially if it’s designed to be used like applications are. What we are really doing is designing products and software designers again know about this, but for some reason in the web world we’ve got a lot of people who haven’t come up through the traditional lines of education, which includes a lot of that psychology background. Which is fine as long as we are open to learning this stuff and realising we should know it. It all exists and has been around for ages. It’s basically the principal that allows us to interact with objects and interfaces in the real world, outside of the screen, and understanding that we use the size the shape the texture and constancy of things that we interact with in the real world to know how to interact with them before we touch them. And that’s the concept of affordance. That’s what it’s about those aspects of an elements design and construction or what not, that us to know exactly what to do with it and how we can interact with it. There are a lot of great examples of this in Donald Normans book the design of everyday things, which is a product design book essentials but so many of the principals apply to what we do. Not just interface design but again the design of applications and design of interaction. People are using what we build and that’s no different to people using a product that you’ve designed and engineered. We are designing and engineering what ends up being a total experience, it’s not something we can hold in our hands like a physical product but it’s a virtual product.

Ryan: You mentioned that you shouldn’t have to describe your interfaces; they should be intuitive to use.

Dan: I’m very against instructions in interface design.

Ryan: this leads me catching you taking pictures in the men’s toilets earlier.

Dan: Yes, this could be seen as compromising. But …erm… (Ryan has a little giggle fit) I do that all the time.
What I’ve found once is that now that I’ve started looking outward because I didn’t start as a designer in interface design. I started as a graphic designer and doing print. And so I’m always looking at things in the real world for inspiration. For whatever reason in the past year or so I’ve started actually realising how many direct parallels, 1 to 1 parallels there are in the real world with these interfaces that are all around us, they are just 3 dimensional. We just interact with them physically instead of through the intermediary of the mouse or the track-pad and the keyboard. And really they are not that different and so the examples in the restrooms, they are full of them for some reason whether its public restrooms or private stall in a hotel where something clearly hasn’t been designed to be intuitive and thus it needs printed instruction. It doesn’t mean instructions are bad, there are something’s that are so complex that they can’t be simplified beyond a certain point, so they need some sort of instructional text. But far too often we use instructions as an easy out, where we design something that really should be more intuitive, but instead of going back and redesigning it we put a little help icon next to it (or a little bit of help text when someone hovers over it). Or we will just put up a help page, before someone begins a task, and we expect people to read this stuff. The fact is people notice it’s there, they don’t always necessarily read it but they know it’s there and so it’s adding visual clutter that is probably not necessary. If you redesigned that interaction you could get rid of the need for instruction, you make intuitive there is no need for explanation. I think it’s a good marker in the design process that if you find an element of your interfaces requires instructions then you need to redesign it and keep refining and redesigning it. It may not be a refinement it maybe redesigning it from scratch but if you’re always on the lookout for that, like “Is this intuitive? Does this work without someone explaining how it works?” if you keep on doing that you won’t dig yourself into a hole.

Ryan: sorry I’m just chuckling to myself about your toilet reference. Realising that the last person I interview was Elliot J Stocks and I began that interview with “Hi Elliot the last time I saw you were outside a men’s toilet” (fits of laughter) I’m going to be getting myself a reputation.

Dan: it used to be the water cooler and now apparently it’s the restroom.

Ryan: we have to clear up the reason the men’s toilet reference was because you were taking a picture of a diagram of the showing taps and a description.

Dan: the taps that we are all familiar with now that are motion sensitive that don’t have taps anymore to turn them on and off, you just put your hand under it. And that design is not new it’s been around, I’ve never seen one with instructions because it is intuitive. They haven’t broken this one the one in the restroom here just works but even though I knew how to use it, the fact that I saw that descriptive image and text next to it. And its next to every single sink, it was a distraction. So where I would have been able to just go and put my hands under it, for a split second I was distracted by oh what’s this instruction. It made me think that it was something that I didn’t know how to use and that’s where instructions can be bad as well. Maybe you’ve added it in because you mean well, not because you need the instructions but you think that it will help the user by having them there. That that extra bit of information never hurts and that’s actually the wrong thing to do. It has the opposite effect, it adds clutter. If something is intuitive then you’ve spent the time designing it well that people don’t need instructions, by adding them you are actually making it harder to interact with.

Ryan: its weird (repeated… 3 times?) weird occurrence isn’t it. You also mentioned looking at desktop application design and translating that to the web, I found that really interesting. Can you talk about that a little bit?

Dan: yeh, there is a lot we can learn about interface design from the desktop. We can’t do everything on the web and even with things like adobe air and flex we can’t do everything we can do we can when building desktop applications. The thing is that basic interface conventions have been around a lot longer than any of our interface conventions, that we tend to think of being created on the web. The fact is that they haven’t there are very few things that are web specific. One of the things being the silly little Mickey mouse hand icon that we mouse over a link, that’s one of the main examples that I gave. In the desktop we have a much more precise pointer mouse or the default mouse pointer rather (the arrow) whether you’re on a Mac windows or Linux it doesn’t matter. It’s consistent, it has a very specific point, you know at the very tip of that there is one pixel that we use to interact with whatever we are clicking on. It’s much easier to use and target something accurately. Whereas the Mickey Mouse hand is more vague, there isn’t a single point that is clearly defined in the icon and on top of that it only appear once you’ve already began your interaction with something. Developers and designers we tend to work with the web and applications very differently than most users. We’ll mouse over things because we want to see whatever hover effects there are, we appreciate maybe the idea of discoverability in an interface more than the average user. Whereas a regular user (if I can make such a general statement) will look at an interface and without moving their mouse around, they will decide what they want to interact with before they then go and interact with it. So if the only way of knowing something can be clicked on is mousing over it and seeing that hand icon appear it’s not intuitive. Something can easily be missed and so what I suggest is to take a cue from the desktop and only use that hand icon for what it was originally designed and that’s hypertext links. So if you’ve got a link that you’ve underline in your text on a webpage or in a web app, as long it’s an underlined text link in the body of text use it, leave it as the default. Everywhere else if you use that default mouse pointer it’s much more like using a desktop app and it’s much more precise and it forces you to design something that looks like you can interact with it before the mouse ever gets near it.

Ryan: do you think people are just possibly used to the mouse cursor changing to the pointer, and if you took that away, that could possibly have a detrimental effect rather than a positive effect?

Dan: I don’t think so, I think we are as the creators of the web. But based on the fact that I still see some users trying to double click things on the web for instance, that is a connection that none of us on the web “we don’t do that”, and that in some instances that we should. There are some instances through JavaScript where we can do that, basically if a convention exists we should try and use it because it makes for more intuitive experience. So if we have an interface in a web app that require folders for instance, and that are folders that are more like on the desktop rather than a list in a sidebar, it makes sense that we if it was a desktop app that we double click it. We wouldn’t just do a single click, so let’s make that web app respond with a double click because that’s what people tend to expect. The mouse point, that Mickey Mouse hand isn’t something people expect, because it doesn’t happen until they have already made a decision. Maybe they are used to it appearing but it doesn’t affect their decision making process and because of that if you eliminate it what you will find is people won’t notice it’s gone. You will be designing thing people know they can click on and all they are interested in is mousing toward it and clicking on it. If it looks clickable they won’t expect that cursor to change as much, otherwise people would not be able to switch from using a web browser to using a regular desktop app because that hand never appears. If they were reliant on that they wouldn’t be able to use the web for an hour and then use a regular menu-ed app, they would be confused about how the cursor wasn’t changing but that’s not how people work.

Ryan: I think as well how many times have you seen people where they look at a file structure and expect to be able to right click on a folder and have all the options that you normally have. And just because that’s they are familiar with.

Dan: exactly and that’s what I talk about learning from the desktop, that’s the kind of thing that I’m talking about. The desktop has been around and creating these conventions for a lot longer than the web has. Users have been using desktop apps longer than they have the web, maybe you can find younger users who are coming to the web first and barely using desktop apps, it doesn’t mean they don’t use their operating system, they do. They use their web browser too. Those are the first thing they interact with when they start up the computer. Until we get to the point where (and I hope this point doesn’t come) if we had a device that was only a web device and had no other interface than the web then maybe you could make an n argument for it. But I think that would be a bad thing, I would rather see the web and the desktop come together as far as interface conventions and how we work with them in applications. Rather than being web applications, I would rather see them just being applications and when you use them you don’t think about if you’re using something that’s running in a web browser or that’s communicating with a remote server rather than your hard drive. You’re just using an application to do a task, there shouldn’t be a distinction and I don’t think that users have as much of that distinction that we do as developers. We like to think that there is a huge difference between a web app and a desktop app, but the for users it’s likely they don’t think of it in those terms. This is where I complete this task they don’t think that Gmail a web app it’s not a necessarily a web email app it’s their email. It’s their inbox, that’s how they think of it and we have to understand that’s how users perceive what we do. It’s a very very different way to look it.

Ryan: Especially as the barriers are disappearing, things like adobe air for tweet deck and emailing to outlook and mail. And the walls are just fading away.

Dan: Which is a good thing, as those walls fade away we need to as practitioners on the web we need to take as many cues as possible from the desktop and help make that transition more seamless.

Ryan: you mentioned a few resources in your talk, and I bet you can’t remember them…

Dan: Actually I can. I remember…
Jared (I would remember him anyway) – he has uie.com has excellent resources about all sorts of things about usability and that’s ultimately …that’s what this is all about usability. The article I refer to at the end of the talk of Jared’s was one he published the exact same day that I came up with the description for the idea of this talk that I gave today. So it was an odd moment and it’s about the exact same thing that this talk was. Keeping your interface invisible.

Ryan: and your talk previously

Dan: well yes we have been doing work with Jared, we have been very lucky to do a couple of workshops with him. It’s always fun to share the stage with him; it’s even fun to chat with him over dinner because you always learn something. You always come away with a smile on your face even if all you learned was how to laugh and enjoy his magic tricks with the card deck. It’s always enjoyable, so hes a great resource, his site is great resource. And UIE as a company is great resource if you’re looking for information about user testing, usability it’s the place to go. And the article is very recent so look on his site and you will see it on the list of articles a specific lot about invisible interface design and the experience.
I also reference Steve crouges book don’t make me think, which is awesome, excellent, funny, good, and thin. All the things a book should be. Educational, easy to read and short.

Ryan: plane flights worth it isn’t it

Dan: exactly yes, if you don’t have it you will get it and read it and find yourself going back to it again and again and dog ear it and mark it up like crazy and you share it around and sometimes don’t get it back.
And the other book by Donald Norman, the design of everyday things. It’s really a product design book but it’s useful for anyone who deals with designs that are meant to be used by someone else.

Ryan: have you seen thedieline.com product design website.

Dan: no I haven’t

Ryan: it may have been Elliot J Stocks last time he was on I believe it’s just the thedieline.com And it’s looking at product design. They release a series of particular products like an aerosol can or packaging for a toy and look at all different packaging. It’s really interesting.

Dan: I will have to look it up.

Ryan: it’s a really good site

Dan: I eat that stuff up because the more I look outside of the web the more I find that everything that we are doing, that we feel like we are discovering for the first time has already been done. A lot of it has already been done, especially the basic concepts of product design or we talk about information architecture all the time, but we didn’t invent the term. It’s been around for decades and possibly even decades before the web was around. And it comes from architecture and way finding enviromatnetor graphic design, these are concepts that people have been thinking about for a lot longer than we’ve been thinking about them. Possibly for a lot longer than some of us have been alive. I think it puts what we do into perspective; first of all there is a wealth of information and knowledge out there that’s been proven which can help convince us and our clients. If we are going to someone and we are explaining the idea of information architecture to them and we’re not just explaining it as something new in particular for the web. This thing has been around since before the web was even thought of that making it a whole lot easier to gain credibility with clients. It’s not just information architecture it’s so many of these basic principles of interaction, they are all basic psychological principles of human interaction really.

Ryan: what was that word you’ve been using all day again?

Dan: affordance – look it up its good stuff.

Ryan: ok Dan, well thank you very much for taking the time to interview you.

Dan: thanks for letting me ramble on

Ryan: it’s been a pleasure to see you again

Dan: always. Thank you

Much thanks goes to Andy Kinsey for transcribing this interview.

Back to top

 

Listeners Questions

Stories of our failures

Dinu writes:

Looking from afar, established agencies like yours seem to be almost perfect. However, I’m sure you’ve had to deal with missed deadlines, over-booking, etc. I would like to hear about some of these #fail stories (just to get a “you are not alone” feeling for the rest of us), and also to know how you managed to overcome these common pitfalls.
Hope this question gets a chance of being aired.

Thanks and stay awesome….

Transcript coming soon…

Working on multiple projects

Emil Sundberg writes:

Hi,
I’m running a small web agency and I just found your podcast. Great show!

We’re a small team, 4 people, doing web development for clients and use Basecamp/Backpack/Highrise/Campfire (yes we’re 37signals addicts) and I think it would be interesting to hear you talk about how you work with your team in the big picture, not an individual project. How do you plan multiple projects with a limited staff? Who’s deciding what’s most important and what should be done next. Do you use and planning tools or an Excel/Whiteboard?

Transcript coming soon…

Back to top

 

177. Back in business

On this week’s show: Paul and Marcus talk to Brett Welch about the business of web design, and Paul chats with Ryan Taylor about creating a buzz.

Play

Download this show.

Launch our podcast player

Twitter post: Decided I like the boagworld podcast much more when @stanton and @ryanhavoc host it. Odd.

Oh right, I see! I’ll get my coat!

Back to top

News

The web font showdown

There has been a lot of exciting developments in the world of embeddable web fonts. It doesn’t look like it will be long before having custom fonts on our websites will be a reality.

We already have the likes of Cufon, which appears to be a huge improvement over the flash based sIFR technique. We also have Jeff Veen’s Typekit coming soon. This promises to give us access to a large number of fonts using nothing more than CSS font-face and some Javascript.

However, this week has also seen clearleft’s announcement of Font Deck, a direct competitor to Typekit. The rumour is that it will differ from Typekit because it will not rely on Javascript. Exactly how this will work is currently unclear. There is also a possibility it will use the same kind of caching approach Google Code offer for Javascript libraries. If it does this will significantly improve the perceived download speeds of fonts.

Although Font Deck is arriving a little late to the party, ultimately it will come down to who has the best selection of fonts. Until we know that there will be no clear winner.

That said, judging by an article on Think Vitamin, Typekit looks pretty impressive. The article demonstrates how Typekit will work and I have to say it looks very straightforward. Unsurprisingly for an application developed by Jeff Veen, it is incredibly well designed. However, it is not perfect. The demo page associated with the post shows a significant delay as custom fonts are loaded. Until that is complete the user sees a web safe font. Unless they seriously ramp up their server capability this delay could get even bigger as the popularity of their service increases. This might possibly be the opportunity that Font Deck needs to leapfrog their competition.

Moving design forward

Web design has come a long way from the grey backgrounds and blue and purple links of just a few short years ago. But where do we go from here? That is the topic tackled by Jennifer Farley in “Art Direction: Taking Web Design To The Next Level.”

As you will guess from the title, Jennifer’s answer is Art Direction. Art Direction is (among other things) the process of bringing together design and content. This is something sadly lacking in modern web design. Most websites are designed with little understanding of what content they will finally contain. Design is built around a series of templates integrated into a content management system. There is little customisation of the design to work with the content of each page.

Jennifer shares some examples of sites that endeavour to move beyond the template mentality and introduce real art direction. They are definitely worth looking at as they will inspire you to move beyond template design.

Jennifer’s article is not the only post that encourages a change in our approach to design. The other is a post from 37 Signals entitled “Stop following directions and start designing.” This post encourages designers to view feedback from the client as suggestions rather than solutions. The author writes…

When you’re getting direction from a client, manager, art director, etc., it is easy to fall into the mode of just following instructions. You get so caught up in getting it right that you forget to keep thinking about the problem.

Of course it is totally understandable to take the ideas of those that pay our bills as gospel. But we should also be reminded that those same people hired us for our expertise.

That is easy to say when you work for a company that does not have clients! That said, it is good advice and worth taking on board.

Being persuasive

My favourite post of the week is “50 Scientifically Proven Ways to Be Persuasive.” Although not strictly to do with web design it provides a lot of advice that can be applied when trying to nudge users in a certain direction.

For example one of the techniques suggests personalising the herd effect. The herd effect is used regularly on websites as a way of nudging users to complete a particular call to action. For example it is not uncommon to see ‘popular products’ on ecommerce sites or ‘average donation values’ on charity sites. This is because we tend to be led by the crowd. If somebody else did something then we will too.

However, the post suggests taking this step one step further  by personalising the message. It cites an example from a hotel change…

The hotel sign in the bathroom informed the guests that many prior guests chose to be environmentally friendly by recycling their towels. However, when the message mentioned that majority of the guests who stayed in this specific room chose to be more environmentally conscious and reused their towels, towel recycling jumped 33%, even though the message was largely the same.

So instead of refering to popular products you would say “other users who bought this product also bought this”. This is a approach also used regularly by ecommerce sites like Amazon.

This is just one example from a massive list included in this post. It really has a wealth of knowledge that is applicable to almost all aspects of web design from information architecture to copywriting.

Continued confusion over HTML 5 and XHTML 2

The last few weeks have been full of discussion about HTML 5 and the demise of XHML 2. There seems to be a lot of division and confusion over what designers and developers should be doing. Should we be abandoning XHTML 1.0. and moving to HTML 4? Should we try and adopt HTML 5 even though it is in draft? Its all very confusing and I have to admit I’ve felt unsure myself.

Fortunately there are some very clever chappies giving out excellent advice. Jeremy Keith has written an excellent post on the subject, as has Bruce Lawson. Drew McLellan has also contributed some interesting points to the discussion.

The problem is that it is all pretty turgid stuff and a bit of pain to wade through. The good news is that you don’t have to. Brad Colbow has saved us from this pain by turning the whole discussion into a very easy to follow (and bueatifully designed) comic strip.

Extract from the comic strip

SO, if you want to know whether you should be closing your tags and whether you can start supporting HTML 5 now, then pop over to smashing magazine and take a look.

I won’t ruin the end, but I will say you won’t need to change the way you code.

Back to top

Interview: Brett Welch on the business of web desgin

Paul Boag: So joining me on the show is Brett Welch. Good to have you on the show.

Brett Welch: It`s good to be here.

Paul: Thank you for agreeing to do this on very short notice. Because I didn`t notice your talk. We`re still at Future of Web Design. I`m still interviewing people here. You’re going to get bored of me saying that cause I’m doing loads of them. I didn’t notice your talk on the line up so I almost missed you entirely and I didn’t hear you either. So I haven’t heard what you said. But I’ve had lots of people come up to me saying you are interviewing Brett right? He’s really good. So you obviously went down very well. Which is a good thing.

Brett: That’s a good thing yeah.

Paul: Because I missed it what did you talk about?

Brett: Okay. I talked about how designers can go beyond pushing pixels and start to create more effective website for their clients. So I talked about the business end of web design. Which you know a lot of the time gets ignored at conferences like this.

Paul: Sure does.

Brett: And I think it’s really important. Cause that’s where the money flows into their pockets. So when it comes to actually getting the client on board and that process. That’s a really important part that I thought needed talking about. I talked about how designers can do that and I used and acronym called BUSTA and I put a bit picture of Busta Rhymes up there because if you’re into rap and hip hop you’ll know the guy. Not that he’s had any hits recently. As far as I know. BUSTA stands for talk Business. Understand why they want to go online. Talk stragety. Talk business targets and set an Action plan.

Paul: Okay.

Brett: So there’s the B-U-S-T-A. Or in one sentence you can say. Businesses Understand Strategy Tactics and Action. So all together it sorta works as sort of a nice little coat hanger for your thinking. And the idea really is to start off by talking about a clients business. What do you do? How long have you been doing it? How do you sell what you sell? Sort of getting into the business owner’s mind a bit. I think that’s something that you need to do to set the tone of what you are going to talk about. It’s not about a pretty website. It’s about having something that actually is effective for the business owner. The next thing is really understanding what they are trying to achieve. That’s important because you may need to dial up their expectations or dial down their expectations.

Paul: Okay.

Brett: Sometimes people if they’ve read a few blogs. They’re thinking that they’re an expert. They’re thinking that they can take it to the next level really easily. Sometimes you need to slow that down a bit and say hold on. You’re not going to be Amazon overnight. You need to take it slow. Other guys are going to be a bit timid. I don’t really know much about bespoke stuff. That’s where you need to hold their hand a bit. Guide them to understanding how exicted they should be. So the next part is strategy. I made a big point about the fact that strategy is not dirty word. It’s really just about connecting the dots between their website and their business. It’s about understanding how you can achieve the goals you want to achieve. Through their website. The main thing about stragety is really helping them understand what they can achieve. and showing them how they can achieve it with concrete targets. That’s what where T comes in. T is your targets. There I think you need to set 3 to 5 concrete targets business targets that actually relate to things like revenues and customer leads. Things like, not traffic. I actually made a point of saying not traffic. Traffice doesn’t mean anything until you understand what your conversions are like. It’s great to say 1000 people came to my website. If you’re not actually getting leads out of that. That are captured in some sort of database or if you’re not making money out of the sales. It’s an empty number. Then finally was action. So you need to set some short, medium and long term goals. A plan. The tools. The what and the how really. How are you going to get there? I think that was a rough overview of what sort of B-U-S-T-A is all about.

Paul: Okay. So what are the benefits of using this kind of approach. As a freelancer say. Why do I need to worry about this kind of stuff?

Brett: I think that even the process, if you look at it from the other point of view, from the business owner’s point of view, it’s still an important one to go through. A lot of people don’t realize that you probably need a marketing plan for your website. Because how else are you going to get people to view it? It’s just like opening a bit store. You need to put in the same amount of effort and ongoing effort to get a result. So I think the why is really more effective websites. If you think about what you’re doing in a business oriented way what’s going to come out the other end is going to be a much more refined and polished representation of what you want to achieve. It’s going to work better for you. I think you get from a freelance point of view you get less arguements from clients. They say I don’t like that blue and you can say well that blue will get you better conversions.

Paul: Right so you’re going back to the stuff you established.

Brett: Exactly. You established already so you can link it back. Obviously you need to have a valid point. You can’t just make things up.

Paul: Well you can try.

Brett: You can try. The real key thing is you can close arguements off by, the silly ones anyway, saying ‘hey look this is better for these reasons.’ Trust me.

Paul: The way we often talk about it is it moves aways from personal opinion of like I don’t like this colour to well this colour comes out of this set of things that we agreed up front.

Brett: Exactly. It’s drawn from this business goal. Then the other ones are you get repeat business because you’ve set that action plan. You’ve got long term and medium term goals that they’re going to link back to you. So once your first sections done and they sort of say ‘This is working well.’ Then they go who’s the next person to talk to? Obviously the same person cause you’ve had them actually plan.

Paul: It’s interesting we went up to a pitch on Tuesday and it was for a small little job, a design job, and we went through this pitch and we outlined what we do. We got to a point in the pitch where we said ‘But if this is as far as you’re going to go don’t hire us.’ If you’re only looking in short term views of this immediate project then we’re not the right people for you. But here’s where we think you should be going over the long term. And I think ultimately that’s really beneficial. It means that your going to get that long term business that you’re talking about.

Brett: Absolutely. People want to know what’s next. I think being able to answer that question ‘What’s next?’ is really a key to making them come back to you when it’s time to implement what’s next.

Paul: How far do you think you can go on that line? We do a lot of work with public sector clients I remembe sitting in one meeting when they wanted to establish a 5 year plan for the website. Which to me seemed unrealistically far ahead. How far do you go with things like that?

Brett: If you can imagine 5 years ahead I think congratulations. I think that’s great. The main thing is not so much how far you can think ahead. I think it’s really the exercise of thinking ahead that is most valuable. Whether it’s a 6 month or 12 month or a 2 year or a 5 year plan. However far you can get that’s great cause you probably have a fantastic imagination. Right now Twitter is big in 5 years who knows what it’s going to be?

Paul: Exactly.

Brett: You can work those into your plan. It’s great to sort of skecth something rough out for as far as you can think ahead. I think it’s the exercise that makes the, it’s the process that makes it more effective and more polished. The outcome just becomes more effective in the wash.

Paul: What you don’t cover in that B-U-S-T-A analogy is, you don’t talk about user testing and user feedback as a tool to convince clients to do a particular thing. I’m guessing that’s part of your process as well.

Brett: Well I think that’s really important. It’s not specifically part of B-U-S-T-A cause usability…

Paul: Yeah it would ruin the whole…

Brett: I think that when you talk about two things Targets well three things Strategy Targets and Action. Those last two, if you’re going to achieve the targets you want to achieve then that’s where you need to, and the action plan, doing that testing and doing that side of things is a really important part of making sure you can achieve those goals. I’m a big fan of usability testing and I read your article on ThinkVitamin. What was it?

Paul: I don’t remember. I write so many of them I get confused.

Brett: It was like cheap usability…

Paul: Oh yes I remember that.

Brett: That was like fantastic and I like tweeted it. It’s the sort of thing that I’ve definitely fit in and the actions and the targets. Because targets are about conversions and actions are about how are you going to get those conversions. I think usability is really a big part in working out those conversions. It’s like supermarkets. They have the aisles and they put the products in the right places because they want the kid to scream about the cholocate at the last minute. It’s all well thought out and on a different level it is usability. It’s arranging things in a way so the client behaves in a way, or the customer behaves the way you want them to behave. So I think it’s an essential part of the process. I didn’t fit in talking about it.

Paul: You can only fit so much in.

Brett: That’s for sure.

Paul: It was very impressive that you did it in only 10 minutes. Obviously there are real benefits to using this approach in regards to convincing clients of stuff as we’ve already said. You know you can say well we’ve gone with this colour because of these reasons etcetra. Do you think there is also a value from a sales point of view in terms of up selling yourself and giving yourself more credibility and value?

Brett: Absolutely. That was final point that I didn’t manage to get to about why you’d follow a process like this. It’s simply higher profits. What I’m saying is nothing particularly new or ground breaking. It’s really just a simple process that helps you get your head around these things. So that you’re able to more effectively how valuable what you do is and basically end up with a more effective result which sort of is a feedback. If you do something, if you sound like you do something well you do something well. Then it sort of feeds back and they’ll tell their friends and it’s sort of a marketing for yourself. So I think that having that process really is just about being able to up sell and justify. The problem that we’ve got right now and I talked about this briefly in the talk as well, is that design is becoming a comodity. People view design as a comodity. That’s a real shame. It is about up selling. It’s about selling yourself, the value you have and effectively communicating what you do. In a way that puts you in the right light so that people are willing to pay the money for it.

Marcus: It also makes you seem like more of the expert.

Brett: That’s exactly it.

Marcus: We actually tell people who say we’re not doing this obviously we feel this is the right thing for your business to take this kind of consultative approach but it benefits us as well. We tell people upfront it’s a benefit to us as well. And they’re like oh okay I see this is helping everybody.

Brett: Yeah that’s right. I think there is two things, one of the key questions we have right now that every freelancer has to ask themselves is are you worth it? Are you worth your cost? I think the two things that are worth it are strategy. Being strategic and being an expert because experts know things that you don’t. If you can get both of those things into your pitch then whatever you do you’ve already put yourself on a different platter. I think that’s where you really, and we tell this to our designers, we have a large community of resellers for GoodBarry and we tell them all the time, we have training sessions, we always talk about making sure you really lay out what they want to do, how they want to do it, and link it back to their business so that they can really put themselves at that expert level and justify the price.

Paul: I think there is also an issue here of the fact that clients like to be reassured. That when you’re buying from somebody you want to be reassured that this person knows what they are doing.

Brett: It’s about trust.

Paul: Having a methodology and an approach that you work through and has all of the different things that you just outlined. I think gives you, it gives clients that reassuring feeling that these guys know what they are doing. They’ve got an approach and they always use this approach and are comfortable with that.

Brett: I think that it’s not just about the followig the process by wrote necissarily. It’s about, or each design or freelance person or agency has their own specialties. I think at a broad level you can follow it. But there are some parts where you may dig deeaper because that’s your real expertise area. These processes are meant to be used and bent. Adapted to whatever your situation is.

Paul: So where do you think the time is to start talking about these processes? Is it once the client as signed on the dotted line? You take them through or do you encourage people to be talking about this even at the pitch stage.

Brett: I think at the pitch stage. When you’re pitching you need to demonstrate, not necissarily tell them the name of your process what your following, the methodology. But start to go through the process and say look I want to talk about your business so lets do that. Then I want to understand why your going online. Then I want to talk with you about strategies we can use, and targets that work for you. Then we’re going to talk about how we’re going to achieve this. Just by setting out that roadmap I think you’re already putting yourself miles ahead of everybody else who’s gone right to what sort of colours do you like? I think right in the pitch stage. You don’t want to go into too much detail. I think you have to strike a balance between showing them that you know this stuff really well and that you can really help them achieve these things but also leaving enough behind the fence so that there is something they’re actually going to pay for. That’s the trick is that balance. I would always fall more on the side of making friends with the client and sort of making them understand the process and how great they can be. How effective they can be. Rather than holding too much back.

Paul: I think the other benefit talking about this, I don’t know what your attitude is towards this but, it’s actually quite a good arguement agains speculative design work as well. If you’re in a position where your talking to a client and they’re asking for speculative design you can almost say well in a way this isn’t the time to do it because I haven’t understood your business. We haven’t set targets. We haven’t got a strategy here. So you can take them through the logic of why it’s too early for me to start putting designs in front of you. Is that something you’d agree with?

Brett: Totally. I’m not sure what our official company stance would be. I don’t think we’ve really talked about it. On principle I definitely agree. In our reseller training we teach stuff like that. I would have to say that I, yeah I use 99designs as an example.

Paul: Oh that’s where Ryan’s comment. I heard Ryan’s comment right at the end.

Brett: I said designers if you want to see we broke it down we had millions of designs and millions of dollars put in there and you crunch the numbers and it works out that every design that is gone and done is worth $2.80. That’s lower than minimum wage. You can go work at McDonald’s and do better than that. I think that, yeah I’m not a fan personally of speculative design. I would generally say and what we teach our resellers as part of our training is saying don’t go with that. We want to go in and understand the business. Make sure that you get your head around what they want to do because your work needs to reflect that.

Paul: I realize I haven’t asked you about GoodBarry at all. What do you guys do? I haven’t come across you before.

Brett: We have a platform for running online businesses. When you’re going online these days business owners want to be able to run their website. Email marketing is more and more important. Selling products and hooking into Paypal and things like that is harder than it needs to be. Behind all that, having a CRM database that you can track your customers and save them in a central place when they sumbit a webform or interact with your site however they interact. We’ve got a platform that does all of that.

Paul: Wow!

Brett: Our system does everything that’s in sort of that realm. It’s great for web designers because they’re able to actually create any design and put it on the system. Use all of that functionality without doing any programming. So that’s sort of what we sell. We have a reseller program. That’s why we’re here. We get designers on board to become resellers of our product. Basically they use the product they get comissions. They get a whole bunch of training from us about how to make more money and how to, pratical training. How to be a reseller. We not only take you one as a resller we want you to be able to add value to your clients. And give you some ideas about how you can do that.

Paul: Interesting business model. Well thank you so much for coming on the show. That was really useful.

Brett: That was really fun.

Paul: It’s nice to hear some other people saying the things we rant on about week in and week out.

Marcus: That’s what we rant on about all the time.

Brett: Yeah I saw your talk at FOWD in New York.

Paul: Educating Clients to Say Yes.

Brett: It really struck a chord. It’s like this is what I am talking about. I think we’re definitly on the same page.

Paul: Excellent.

Thanks goes to Curtis McHale for transcribing this interview.

Back to top

Listeners feedback: Creating a buzz

Paul: So we’re going to do something a little bit different for the listener feedback section today and it’s come about because I was chatting with Ryan Taylor via IM and he asked a particular question and I nearly turned round to him and said “Ah, you can pay for one of my consultancy clinics for an answer to that question” but then I thought that might be a bit tight of me of me, so instead I thought, lets talk about that on the show because it’s a really good issue to discuss and its a different way of doing the listener feedback and I think we’ll probably do it with some other people in the future as well. So I have Ryan on the show, hello Ryan.

Ryan: Hello Paul.

Paul: Oh I’m so honoured to meet you, your the guy that does that podcast aren’t you?

Ryan: I am, I’m the one who makes sure it doesn’t sink like a lead weight.

Paul: It’s so exciting, I feel quite in owe of this amazing super start that I have on the show.

Ryan: *laughs*

Paul: Can I have your autograph?

Ryan: Of course, you’ll have to come up here though, I’m not coming down there.

Paul: That’s a bloody long way to go isn’t it? Can’t be bothered with that.

Ryan: Aye, you have us come down there often enough.

Paul: Yes this is true.

Ryan: *laughs*

Paul: But you live up north, it’s dangerous there.

Ryan: It’s not.

Paul: There’s wild animals and thugs and things.

Ryan: It’s all rumour and hearsay.

Paul: I see it on the news all the time.

Ryan: If you weren’t such southern softies you’d be alright.

Paul: And also isn’t there loads of pollution from the factories chucking out toxic gases and stuff.

Ryan: Yeah well you see though, if the ice caps melt and we flood, your going to go first because we’re higher up than you.

Paul: That is true. Yeah but whenever I think about the north I always have this image of a post apocalyptic barren waste land anyway so it’s all swings and roundabouts.

Ryan: That’s Scotland, you’re going too far north.

Paul: *laughs*

Ryan: *laughs*

Paul: Anyway, it’s really good to have you on the show. I actually listened to last weeks show which was sold waffle but very entertaining none the less.

Ryan: Well we try our best.

Paul: *laughs* It was good, I really enjoyed it. I particularly enjoyed the horrendous swearing after the outro music.

Ryan: Oh, Anna’s just so good at all the editing she does, it was constant throughout, I really feel sorry for her.

Paul: She worked hard on that one.

Ryan: I had to ring her up an apologies personally for that one.

Paul: *laughs*

Ryan: *laughs*

Paul: Yen, we were chatting on IM and you asked a question do you want to share what you asked? Or what the issue was?

Ryan: well, erm, as you know I’ve been recording my own series of video interviews called please start from the beginning and you were the first person I interviews.

Paul: ah, it was very boring. Have you started editing them down yet? Or have other people been more concise?

Ryan: they are getting long

Paul: oh shit really.

Ryan: I think Dan Rubin holds the record at 50 minutes

Paul: flip me!

Ryan: well has also been the most interesting interview, has also received the most hits and the most traffic.

Paul: really?

Ryan: yep, everybody likes to hear Mr. Rubin waffle

Paul: I Marcus should be pretty good when you get to do him because of his whole pop-star career.

Ryan: he keeps putting me off you know…everybody I can get hold of his the hardest one to nail down. I’ve been asking him since the weekend in June and I’ve done 10 interviews now and I just can’t nail him down.

Paul: So the basic principal of the show is that you ask people about their past and ask them how they got where they got.

Ryan: Yeh, its nothing technical it’s something a little different in that I want to know what people do now, what their job title is is the first question I ask, Because I think it’s interesting to hear about what peoples different job titles are because there are so many different bearings of the same thing in the industry. So I ask that first and discuss what they do now, and then ask them to go back to the beginning as per the title of the series and take me through their career path. All the experiences they had all the lucky breaks they had, achievements and so far it’s working out really well.

Paul: Cool

Ryan: Yeh, people seem to like talking about themselves.

Paul: yeh, it’s funny that. So as we were chatting, do you want to say what your question was, what was it you were getting at, what was it you wanted from me?

Ryan: the question was how can I kind of advertise the series a bit better, how can I get more people watching it. The uptake so far has been really good, I’ve had some really good feedback and people are kind of linking to it and spreading the word a little on twitter. But for a lonely guy like me with less than 400 followers it’s hard when I tweet and you’ve only got potentially 400 people that will see it. You know the number of people coming to the site is good it’s better than I’ve ever had, but I’d like more people seeing the videos and commenting and just spreading the word. Someone like yourself with 9000 followers it’s very easy for you to spread the word about thing and I was wondering how you built your way up with Boagworld? If I do something similar, starting from the beginning.

Paul: yeh, I think this is a problem most people have they’ve got some particular website or application or service that they are offering and wanting to build up a bit of a buzz. I’m not that high up the food chain if you compare me with Mr Carson or some of the guys over in America who seem to find it very easy to create buzz and excitement about products. But I guess I’ve picked up a few things that have worked for me. I think the first one is struck me is patience, you know you haven’t been doing it that long have you?

Ryan: Well no, not too long. So far we’ve released the 8th video and it’s been steady. The kind of traffic interest has been steady level, it’s not like a huge, it not going up every week. You know we release Monday and obviously get a surge of traffic on a Monday as everyone comes to visit. That tails of towards the end of the week and then the next Monday we get another surge of traffic and I suppose there is going to be more traffic with more interest of people who are more in the public eye. Like Ryan Carson for example. There will be a spike in traffic I would have thought. But everybody just seems to like everybody which is quite interesting. So it seems to be the same every Monday, there seems to be the same amount of traffic coming to watch that video. Despite whom the person is.

Paul: well that to some degree might be down to be how much the person interview is actually pimping what you have done. You’ve got a good model in the sense you’ve got a situation where your interview well known individuals which works really well as a technique because if they do mention it and push it themselves then it’s going to drive traffic to your site and hopefully get people hooked on the other ones. Erm, but ye hi mean that’s only kind of part of the equation actually. To be honest it was a long time before I actually saw much traffic on Boagworld at all. I mean I reckon it was over a year before I got much over the 400 / 600 subscriber numbers. So it was a long long time before anything really happened, you just really need to keep plugging away and releasing regularly and often. You’re on ITunes now aren’t you?

Ryan: yes, I finally got the series on ITunes and the uptake of that has been pretty good as well, you know people jumped on that straight away and that’s slowly increasing which is nice. Yeh searchable on iTunes and please start from the beginning.

Paul: this is sounding like a massive big plug for free start from the beginning; on the other hand it is also useful stuff for other people because other people are on the same kind of position. We’ve given one tip which is produce content which has got expert whom has a big following, because they are going to talk about it which is a good thing. I mean the other thing that I think a big part of it is, is your own reputation aswel. That (erm) it’s easier for me, if I launch something new … I don’t know let me say I started a new podcast or website it will be relatively easy for me to create some buzz around that because I’ve already got 9000 followers on twitter, because I already know other people and friendly with names that will actually promote it themselves, If I ask them too. So your own reputation matters quite a lot as well and your building up quite a good network of people you know, and don’t be afraid to ask those people to pimp it a little bit. This is where your really going to see the pay off from all the conferences and meeting and chatting with people. Because you’ve become a name that people are aware of, so there’s another tip. Take the time to build up your own personal brand and reputation and attend conferences, because people will take more of an interest in you. Take this week clear left have realised font-deck, now because it’s clea

Ryan: left that’s done it they’ve had far more publicity than some other web app that has just been launched, does that kind of make sense?

Ryan: yeh, yeh, absolutely. Erm I suppose it’s a bit like anything, your reputation again takes time doesn’t it. (

Paul: yeh) I have this slight fear of ramming it down some people throats, I want people to come visit the videos and participate without really feeling harassed into doing so. (

Paul: mmmm) So I don’t want to be tweeting all the time about it and things like that. I’ve been looking at some people who retweet and nearly everybody i’ve interviewed tweeted to say there is an interview there. So if and when people see that tweet they tend to click through, it’s for people who maybe miss that tweet. It seems to be that twitter is the main thing that is driving traffic to my site for my series, and I was wondering if there was anything else I could be doing to advertise it and get people to find it naturally?

Paul: That’s the trouble isn’t it with twitter, something will get missed because you’ve just got this stream of stuff. I think there are a few things to say on that before we move on to other things you could do. Erm, I will actually tweet about something multiple times but I will subtly different ways ok. So for example I will initially (say in your case this video) then later in the day I will I maybe quote some of the comments have been made on the video. I will refer back to it a couple of days later, you know i’ve been pleased with the level of traffic or whatever. Just in order to bring it up a few times so that’s one thing that I do. The other thing is pick your times for actually tweeting about it, and that’s where something like using bit.ly like where you can track traffic is really worthwhile. Erm, because that enables you to kind of monitor the different links that your tweeting out, and notice which time of day gets the best level of traffic for you. So for example in my case I know that if I tweet around about between 5 and 8 in the evening UK I will get the most click through on whatever I do. And the reason for that is the people in UK have just finished work and are at home having their T and are checking twitter whilst they are there. They’ve got time to look at stuff, but yet in America that are following me are just waking up and are around now and their traffic is added to it in addition. So thinking about when you twitter is quite important as well.

Ryan: well that’s interesting because i’ve been releasing the episodes around about 11.30 just before lunch so people could watch over lunch if they wanted to.

Paul: yeh but that doesn’t particularly support the American audience and that is a big audience. I mean you’ve been interviewing people in America as well so I think it’s more important for you (

Ryan: mmm). The other thing you might want to do is, the people that speak that you’ve got coming on the show I presume you write to them and email them when their show goes live…or at least you should do (

Ryan: yes I do). Right include in that the embed code, in case they want to put the video on their site, because that then enable them to have some content, it’s easy and quick to put up on their site and will give you more exposure. And it’s on their blog so it’s permanent, rather than twitter which disappear in time, so that maybe a good way of doing it. (How else can I do build buzz) I mean the other part of it is building the community as well. That is at the moment you’ve just got the early days, and you’ve got visitors (

Ryan: yeh) rather than actually a community. For example I now have people that come back to my site whatever I post. So I mean you want to look at building up that community in the comments and the stuff like that. You want to give people the opportunity and making people feel involved in it. So you do that by saying “hey who should I interview?”, or “what questions should I ask them?” erm, encourage people to put comments on the video maybe ask them questions in order to encourage that commenting. That’s always a good thing you can do. And then of course in addition that as well maybe run a competition where you get people to write in and suggest themselves, why you should interview them not just interview web celebs. Interview some ordinary designers as well, people that have been in the industry from the beginning but aren’t necessarily well-known names. So anything to kind of draw the community together, because once people feel like they are involved in you know Boagworld or from the beginning, once they feel like they’ve got an ownership in then they will start to promote it themselves and that’s where word-of-mouth recommendation really comes in because people are really enthusiastic about it.

Ryan: ok that’s a good idea; I have been trying to contact and target people not necessarily big. I know the majority of people i’ve been interviewing are web celebs i’ve been trying to get all different kinds of people and different kinds of profession in the industry. So I’m trying to get a copywriter and a journalist for industry, and all the different people and their takes on the industry and how they ended up getting involved in it. To try and get as much of a diverse catalogue of people as possible. So ye hi like that idea of getting people, because as you say people don’t have to be a web celeb or a big speaker or a speaker or an a-list person to have an interesting story of what they have been doing. So yeh I like that.

Paul: The other aspect to this is looking for influencer’s o those are individuals that have a big network and a lot of influence. Going back to say twitter for example a lot of people go on about you’ve got 9000 follower or 12000 followers or whatever. But actually the number of followers is less important than erm who is following you. And if you can kind of get at and influence (no wrong word) if you can get certain key influencers to mention your product or service or website then they will reach a much bigger audiences o for example you take someone like Jeremy Keith as a good example of this. His number of followers is actually less than mine yet the people that do follow him are in turn big influencers themselves, so he’s as much of a big influencer if that makes sense?

Ryan: yeh, it’s kind of quality over quantity

Paul: yeh, exactly, totally. Erm, what else? (Mumbling) could you do? … I mean the main thing is just a time thing it has to be said, you just have to keep plugging away being regular posting, not giving up on the project because a lot of people do that you know, especially with blogs. They do it for a while and they give up because they aren’t getting the returns they want out of it. And you know maybe try writing for things like smashing magazine or sitepoint or the webdesigners depot and write about career paths that are relevant to that what it is your doing. The guys at smashing magazine are always looking for new articles because they have this beast that needs feeding on a daily basis. I know you’ve tried to write some stuff for .net mag but I have to .net mag isn’t the best place to start because they are monthly publication which means they can be a lot more picky about what they have in. Also they are very reliant on big names, while you don’t care about the name it’s about this particular product. And actually have got less of a reach (fewer subscribers) than something like smashing magazine or webdesigners depot so I would try and go to write for some of them.

Ryan: mmm that’s another interesting idea, the whole idea from this series stemmed from the fog around job titles and you know how people just kind of pick a name for themselves, like yourself web strategist (

Paul: chuckles, yeh) you know it’s so ambiguous all the time and that’s where people starting out in the industry. That’s what it started off as; people don’t know what they want to be because there is no kind of defined roles.

Paul: that’s what we spoke about on last week’s show.

Ryan: absolutely that’s really where this started and that why I started putting this series together so the series is great that it’s self promotion of myself. But it started off from an interest and it still is, and I’m enjoying doing it because it interests me knowing about other people’s career paths and that’s why I like it. I want to interview interesting people that don’t necessarily have to be hugely popular people. So ye hi like that idea about writing about them, I think that will be the natural progression when i’ve got a few more interviews and bit more raw data to work with. An article about career paths will be something in the pipeline.

Paul: I mean the back log of material really important as well (

Ryan: yeah) , because I mean i’ve got people that start from show one that are still working their way through, and obviously that increased the number of hits and visitors, because people are going back episode after episode. The other thing you’ve got to think about which is the big problem that I had which is the one of getting it transcribed so that its good from a search engine point of view as well as an accessibility point of view. But you know that’s a big old challenge doing that until you’ve got a community like I’m fortunate enough to have that are helping out and supporting it, it’s really difficult to do that.

Ryan: absolutely.

Paul: but anyway I think at that point we ought to wrap it up else this will be the longest show ever recorded, but hopefully there was some useful stuff in there for you and other people. Giving you a little hint at how the consultancy clinics work.
I think I may like to do this again so if you have a web project or you want some advice on something whatever it is then write in to [email protected] and once in a while we’ll pick one and do an interview like this. What do you think good idea Ryan?

Ryan: yeh really good idea I think people will find it useful.

Thanks goes to Andy Kinsey for transcript this listeners question.

Back to top

173. UX

On this week’s show: Paul talks to Leah Buley from Adaptive Path about user experience design and Marcus provides some advice on warranties and other legal stuff.

Play

Download this show.

Launch our podcast player

Housekeeping

I just wanted to mention the Summer Camp that Carsonified are running on the 20th and 21st of July in Bath. Its a free ‘get together’ for students or web entrepreneurs looking to discuss web start-ups. Sounds like it will be an interesting gathering and with numbers limited to only 8 places there will be lots of time for addressing individual problems. Check it out.

Back to top

News

XHTML 2 is dead, long live HTML 5

The big news this week is the W3C’s decision to stop development of XHTML 2 so that more resources can be put into HTML 5. In a statement the W3C said…

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML.

Although I am no expert, this strikes me as a good decision for two reasons. First, the two ‘flavours’ of HTML was causing confusion. The overlap between the two was significant and they lacked distinctive roles. Second, HTML 5 has gained significant momentum in terms of browser support and community engagement. XHTML 2 on the other hand seemed to be floundering with little movement from the working group. According to Bruce Lawson the decision to drop XHTML will make little difference to most developers. However, one can at least expect to see an acceleration is the adoption of HTML 5 and hopefully greater support by browser manufacturers.

Designers tools

I spotted a twitter by Paul Annett this week that is worth mentioning. It was a link to a collection of Photoshop files containing UI elements for each major browser. The files contain browser windows, dropbox boxes, radio buttons and other user interface elements. This is extremely useful to any web designer mocking up a web page, and saves having to screengrab and isolate each element manually. However this resource is just one of many available on the “Designers Toolbox“. Other resources include…

It also has a load of additional resources for print based designers. It is an impressive site and definitely worth checking out.

Inspirational about us pages

Smashing Magazine have released Best Practices for Effective Design of About Me Pages. The post first caught my attention because “About Us” pages are so often neglected. As the article says…

The “about me”-page is one of the most overlooked pages in development and one of the highest ranked pages on many websites.

I get the feeling most website owners don’t really know what to do with this page. They feel obliged to have it because everybody else does, but fail to really understand its role. Unfortunately I am not sure that this article provides any answers. It focuses on the “About” pages of web designers rather than more general websites, and also shows a lot of examples while providing little in terms of ‘best practice’. That said, it has some stunningly designed “About” pages and so is definitely worth a read. They really are inspiring and will make you long to redesign your own “About” page. Toby Powell's About Me Page

Password Masking

Why is it that as human beings we have a tendency to accept the status quo? Even if we think something is a bad idea we often fail to speak up because it has always been that way and ‘surely there must be a good reason’. One example of this for me is password masking. This is the practice whereby content entered into a password field is blanked out for security reasons. Although I can understand the logic of this it has always struck me as a significant usability and accessibility issue. However, despite that I have never actually challenged the practice. Fortunately Jakob Nielsen has in his post ‘Stop password masking‘. He writes…

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn’t even increase security, but it does cost you business due to login failures. Password masking has become common for no reasons other than (a) it’s easy to do, and (b) it was the default in the Web’s early days.

I couldn’t agree more. I believe the security concerns are massively over rated and the usability issues largely ignored. Unsurprisingly Jakob has come under some criticism for his cavalier attitude towards security. Christian Heilmann writes…

As a frequent traveller I am constantly seeing people logging into web sites in hotel lobbies (when they check in for their flight for example and enter their bonus miles account details), in Internet Cafes or when they use their laptop in a public space.

However Jakob addresses this when he writes… Yes, users are sometimes truly at risk of having bystanders spy on their passwords, such as when they’re using an Internet cafe. It’s therefore worth offering them a checkbox to have their passwords masked; for high-risk applications, such as bank accounts, you might even check this box by default. In cases where there’s a tension between security and usability, sometimes security should win. Again I agree with Jakob. Too often password masking is used without thinking. When a user registers for a site that contains little personal information and no financial details, why should they have to enter the password twice simply because they cannot see if they typed it right the first time! Its absurd.

Interview: Leah Buley on UX design

Paul: OK So I have Leah Buley today from Adaptive Path. Great to have you on the show Leah, thanks for agreeing to come on.

Leah: Thanks Paul I am excited to be here.

Paul: So I heard you this year at South by South West(SXSW) talking about UX teams of one, which I have to say, was the highlight of my SXSW. I am not just sucking up it really was the most enjoyable one

Leah: (laughs) You might just be sucking up but I will take it. I will take it all in.

Paul:Yeah just take it , just go with the flow. So the reason it was so erm inspiring I think from my point of view was that the company we run Headscape was for a long time a distributed company and we then came together and started having an office, but I don’t think we have really got our heads around the advantages of all being in a office together. So all of your talking about brainstorming and stuff like that was hugely, kind of blindly obvious but revolutionary at the same time. It was a light bulb moment for me. So thank you very much for that.

Leah: My pleasure. Paul. So I thought lets share some of the stuff that you covered at SXSW with the listeners of Boagworld because I know there is a lot of people out there that em maybe are open to a new approach to the way they are handling design and User interface, usability and all that kind of thing. So lets kick off by talking about and perhaps defining design as you see it, because you obviously don’t see design purely as the aesthetics of a site, and as you were talking you obviously had a much bigger role in mind for what you would consider a designer so tell us a little about that.

Leah: yeah, well actually the first caveat I should make is that I am not a trained designer,

Paul: OK

Leah: I have an information science background and have done years of work as a developer so you should take everything I say with a grain of salt. But I think what is interesting from my perspective is that a lot of people in our field are not actually trained designers but they are doing design work.

Paul: yes

Leah: So recognising that and understanding essentially there is a process to design and how anybody can do it is an important thing and for me the way that I would define design is basically anybody who is taking a known problem and consciously reframing it, often with the use of constraints. So in my mind design is much more a process as whereby something new emerges as opposed to outcome that somebody produces. The designer or the role of the designer, anyone who does the design is to shepherd that process basically.

Paul: hmmm Yes This is kind of a complete tangent really but it was something that came up in your talk and I was fascinated by it and wanted to know a little more about it. You talking in your presentation about Forrester CX model ? Which I had not come across that description of it. I had heard of kind of a similar approach used in sales as the sales approach, but could you explain what that model is and why you brought it up in your presentation.

Leah: Sure yes , it’s a report that Forrestor’s put out called the customer experience journey it is written by a guy named Bruce Temkin who actually has a excellent blog called experience matters where he writes a lot about user experience, from the kind of business person’s perspective so check it out if you haven’t already. The interesting thing is that Bruce has written a lot about experience based differentiation for companies, which is basically just the idea that you have a better user experience you therefore have a better product and evidently his writing about his experience based definition has been one of there most popular reports, which sort of suggests that executives recognise customer experience as really critical to their success and that many of them are many of them are offering a sub-par experience right now. So then in this customer experience journey Bruce essentially explains how an organisation can build a strong customer experience practise and the report has a lot of recommendations about a corporate culture and employee training and how to deal with trade offs, but in particular there’s a sort of a model that describes five steps for the evolution of customer experience in an organisation it’s great, it’s like it’s beautifully simple but it is also deceptively simple at the same time.

Paul: yeah

Leah: The five steps are, er the first step is interested basically so at that point the customers organisation is aware that user experience or customer experience is something they should be thinking about, but they have not really done anything about it yet. The second step they get invested, which basically means they hire somebody to do some work, this tends to be someone that is at a pretty low level. At the third step they become committed, which means they have someone who is an executive who has responsibility for the outcome of that user experience work. At the fourth step they become engaged at a very high level sort of a organisation’s initiative level user experience is a priority and then the fifth step the nirvana of customer experience is that they become, it becomes so embedded into the fabric of the organisation that it is kind of like the first principles to everything we do it does not have to be explicitly called out like a project team to make the website more user friendly or a project to make our products less funky to hold or whatever.

Paul: hmmm

Leah: So emm that’s the model so it fascinates me and kinda frustrates me a little about it is that it makes it seem so linear like you can just put one foot in front of the other and eventually over time you will reach step 5. I think there are different stages that are tricky for different reasons, the leap from having lower level user experience people to executive user experience people can be awkward for organisations for a lot of reasons and what I have seen just on my personal experience is that companies have, it is not like they start out with one user experience person and then it grows and grows and grows and then ends up they have a team what happens is they have kinda epics in the approach to user experience so sometimes it’s big and they will hire big staff and in lean times or some executive goes away the staff will shrink and then some other champion will come along and he will want to bring it back. I have been in situations where I am a user experience team of one or even when I am on a team of professionals and you learn that there was a user experience practise several years ago and then it went away and it is like discovering cave paintings or hill dwellings or something and you realise there have been other people that have come before you and you are like why did they go away what happened? So that leads to like a really core belief I have about user experience practise which is that it is not built by delivering killer projects and sort of building on top of killer projects one by one but it is built through relationships and patience and mutual respect over time and that it is about really erm sort of investing the time to actually get to know the people who need to work with you as a user experience professional investing the time to understand their concerns and their objectives and to take those things seriously and to work with them as a designer to facilitate them achieving their goals as well as you achieving your goals. I know that is touchy feely but I think it is in my personal experience that that works well, has worked well for me.

Paul: I think it is very true as well I mean I think there will be a lot of people listening to this interview that maybe er you know feel like they are stuck on one of those stages and can’t progress things and can’t move forward. Whether they are responsible for their website within the organisation, whether they are a internal web designer or something else. And it is very easy to become kind of bitter and angry and become the no person within the organisation that is constantly you know fighting against the system but actually building the relationships is the best way to move things forward and you know I do a lot of work in large higher education and public sector organisations that have huge amounts of bureaucracy and it is ultimately the relationship and carrying people along with you that enables you to do things and move things forward.

Leah: Yeah. I absolutely agree and I think it is particularly interesting talking to you as someone who has worked in big bureaucracies because they are the hardest places to do it I think, it is just the bureaucracy itself can add an extra layer of frustration that is on top of the initial frustration that I think we often feel as user experience people just trying to communicate why this new area is important. So it is very easy to get embittered, yeah if I think of my own personal experience I have seen that too and the trick is to make yourself feel a little less alone and the challenge for that is if you are user experience team of one, and you do not have a big group you don’t have colleagues who have the same experience as you, you kind of have to find a way to find a way to make friends with the non user experience people that you work with and turn them into colleagues and turn them into allies and that you do through soft skills much more than design skills on some level. I think the dirty secret of design is that it is fifty percent soft skills and then the rest is design and if you can learn to listen well to people and ask more questions than you answer and I don’t know be a fun lunch date I think those are the sort of things that will serve you very well in this line of business.

Paul: Yeah, totally agree it is really interesting to hear you say that because yes, really good really good. Let’s move on before I start ranting about that particular subject. Ermhmm lets talk about Adaptive Path and the process to design that you guys take. Obviously you guys produce some superb work and I am really interested in the little glimpse you gave us in your presentation at South by of that process and how you go about doing things so maybe you could try and summarise that for the listener.

Leah: Yes of course. Well in a nutshell it is a mess it is just a total mess and I am serious about that it is a messy process and that’s part of the magic er but actually, when a little secret of Adaptive Path is and it’s design process is we do not have a set design process unlike some other companies in this field who you know often have like the discovery and then the research and whatever phases. We don’t really have a set process we what we kind of do is custom design each project to match the problem that the customers have but even so I think must projects tend to involve at least three things in some kind of configuration to one another and those three things would be 1. Trying to understand the business environment in which the project has to succeed 2. Trying to understand the user’s context in which the product is actually going to be used in the end and the third part and the thing I talked a lot about at SXSW the design exploration and when I say exploration I use that word very deliberately because we try to treat it er as a process that has to widen before it can get narrow, we try to sort of approach design as actually as a erm exploring a new field essentially but in terms of those three prongs understanding the business problem tends to be really just a lot of honestly trying to ask the hard questions of our customers in a way that will help them to be open to the answers. One of the kind of philosophies of us t Adaptive Path is that we encourage our clients to reframe or rethink everything and so that is a really great foundation then coming back to them and saying in terms of the design approach we are going to take we are going to really explore wide, really broadly and present to you some ideas that maybe push further than you would be thinking of pushing right now but we do that so we can potentially adjust those ideas for the things that are the right size for the constraints and the objectives you have right now. So the design exploration, that particular process we tend to . It is pretty basic we tend to start out and force ourselves to actually spend some dedicated time coming up with lots of different ideas and obviously that is informed by user research which is the second item that I mentioned. We try and start by going into the field to observe users and in context and get as much information as we possibly can about not just what they want to with the product but also the circumstances of their lives at the point at which they are going to use the products because one of the things we find that people are always more distracted and busy and multitasking when asking them than they think they are. Understanding the nature of that helps us to say OK now we are going to sit down and explore the designs for this product what are the constraints that we know our user has and our business has and then the constraints become just a useful device in sort of the process of design exploration hmm in that you can say well if we know that the person who is going to be using this product will also have four other applications open on their desk at the same time or fourteen other applications or forty how do we design something that is optimised as for minimal attention or for is optimised for quick hit interaction so then that little nugget becomes a thing to design with. So lets design a screen that is the ideal starting point for somebody that has ten seconds to do anything but the trick is that you can’t just let yourself stop with those known constraints, you can’t just say we have designed the screen for ten second interaction so we are done with it. If we are truly delivering on our promise that we are helping our clients rethink everything we need to explore beyond that we need to explore more widely beyond that so then we use a lot of other devices that kind of help us to brainstorm in really different ways. This is kind of a funny example but I will bring it up because it illustrates nicely how different kinds of tools help you brainstorm in different ways. We did a project not long ago where we wanted to rethink mobile devices and how we work with them in the world and so in order to force ourselves to rethink that we actually did an exercise where we went out into the world with different kinds of physical objects that were not shaped like mobile phones. They were shaped like pencils and magnifying glasses and wire whisks.

Paul: OK Leah and pretended like those things were mobile phones and imagined what we would possibly want to do with something like that and it is just great because these simple devices would help you to re.. to just forget your assumptions, we have some many assumptions about what a thing has to be and the trick is as a good designer is to force yourself to erm break those assumptions at least for a little bit of times so you can allow your creative process to suggest new ideas to you. Paul. It is really interesting it is fascinating to hear that you are doing that kind of stuff but I am sitting here thinking there are going to be people listening to this show that their design process may consist of you know understanding the business objectives, understanding the users needs and putting a bit of time into that and then they launch Photoshop or fireworks and they are sitting there and they do the design.

Leah: Yes

Paul: and your coming along and talking about going out with whisks and you are talking about coming up with loads of ideas and they are just thinking that is so divorced from the way they are currently working that is this kind of quite hard to imagine that transition.

Leah: Well I don’t think it has to be and that’s what’s interesting and that’s what I tried to talk about a little at SXSW which is that you may not be on an adventure to re-envision the mobile experience but that there are some pretty basic techniques that we can employ even when we are sitting at our desks, even when we are in front of our computers to help us think more broadly. So some of things I have talked about they are really basic they are almost like hacks you can think of them as design hacks if you wanted to 1. Is essentially stealing ideas stealing inspiration from the visuals, sort of visual sources that you encounter everyday so one idea that I really believe very strongly in is keeping an inspiration library

Paul: Yes Leah So if you are using the web and you see something that is an interesting design to you take a screenshot of it and put in some place where you stores those things and then when it is time to start designing flip through that thing flip through your inspiration library and see if there is anything that kind of inspires you in a way that you wouldn’t expect. If that is not on the level of taking a wire whisk out into the world to redefine a phone but if your designing a kind of news portal and you happen to see a guided wizard that, you know screenshot, that has some real interesting kind of treatment of help information and then you realise oh call out boxes could really work in a real interesting way in my news portal that’s sort of the level of forcing yourself to think in a different way or more broad way I also think that just playing with word association is actually so kind of beneficial and talking about what do we want this thing to feel like, or what if it felt like this plus that and then actually just doing a quick sketch of what that would actually mean or look like. The interesting thing is that I have worked with classically trained designers who would probably most certainly call me a design hack but who would say there is one kind of optimal way to design a webpage or design a sort of software that essentially takes the top priority into consideration then the second kind of priority and then the third priority and then lay out the page accordingly so people notice the top thing first and then the second and third thing. But I think the way that metaphor kind of works on us as human beings is actually much more interesting and it can create it can make the experience of using a product or a website feel like something really pungent that is not just actually about information processing it is about a user experience. Ermhmm at the IA summit Cindy Chastain a Information Architect based out of New York city did a presentation on using themes in design and the way she described these themes was basically that you sort of create a little story or create several little stories for what we design could be about and that depending on the story you take the way that you actually design that thing will be really really different. The example she gave is that she did a website for a woman who wrote all of these soap operas in the United States that a soap opera that has been popular for decades and decades she was the primary writer on it and the website is for fans of this soap opera to go and see all of these you see all of these pre-recorded old recordings of the soap opera but in figuring out ermm what experience they wanted to provide for this product they created three different themes and one theme was like the story of a writer and which was basically about the woman who worked the soap opera and the other theme was a love affair with a soap opera which is basically about the fan experience and the third was like forty decades of television or four decades of television which was basically about the TV creation process. Depending on which theme or story you were to go with would create a very different design. In fact they did pick one design that ended up being very specific and tangible and allowed them to design for a really meaningful metaphorical experience for the people who used it but you have to imagine as a end user going into a website that tells you about the story of a writer is going to be very different from a website that tells you, that immerses you in the feeling of being a soap opera fan and I think when I and so I love that example because it shows really nicely how just choosing metaphors and choosing inspiration and choosing examples can encourage a whole world of brainstorming in various possible directions.

Paul: I recently warmed very much to this principle of generating a large number of ideas and the idea of stepping away from the computer, and you have talked about having sheets which forced you to do like six wireframes, like different mock-ups on a single page and you talked about overcoming that thing of running out of steam, like you know I have done two or three designs now what do I do, type of thing. So all of that was really interesting and the idea of including other people in that process so you are not working in isolation and I went back and we did this. We sat down and got er a developer in the room and I got a project manager, I got lots of different people in and we did this and we had a really productive day and got loads done and then it occurred to me that I got five people sitting in a room for a day and that is five man days worth of work.

Leah: Ahhhh

Paul: And you suddenly go crap that is out of our budget that’s a lot. You know it suddenly meant I started going into the practical mentality is a cost effective way of doing things and should we be working like this. I am interested in you thoughts on that.

Leah: Yeah Well it is interesting I hear this concern a lot from people and I am fascinated to hear that you did it and that you did it for a day which I want to hear more details about that later on but I think that the thing is it does not have to take a day and I think that the concern that it will be a vast investment of time for everybody isn’t isn’t .. it is a real concern but I think it is something that can be managed. I have actually had some pretty productive workshops that are an hour long or two hours long and that’s if you round five people for you know an hour or two it is obviously still five or ten hours it is not a week of man hours necessarily. So I think you actually need to be very careful about scheduling sessions that are fixed in time and have clear goals and end points, and just to constrain it a little bit. I actually personally believe that constraining time is another benefit in the brainstorming process. Particularly when you get people that are not necessarily used to being usually involved in designing it can be very scary to jump right in developing ideas and hard actually so I think what happens in a group like that, is people like to think about the ideas for a while and then maybe one thing and get warmed up have a cookie or muffin or something and they feel like they are more casual and they will start sketching, you do not need that time that is just road clearing what you can do is you can give them structured activities that will get them to put there ideas on paper immediately and that will have the same sort of net effect. When we do workshops with folks we do these sort of template based workshops and we give them literally five minutes or seven minutes to sort of sketch out all of their ideas and maybe we will do a couple of rounds of that but the beautiful part is when you have five minutes you don’t even have enough time to think what it is you want to do you just start drawing..

Paul: Yeah

Leah: and it sort of it circumvents the throat clearing that happens in the sort of longer meetings erm and templates I think are really helpful actually in those workshops particularly because people are funny you know we really like to accomplish tasks, if you put something in front of us kinda well defined and has a clear end point I think our impulse is to just do it and kind of get it over with. So if you give someone a template it helps them to sort of say like draw an idea for say what you think should happen in the system explain what the important aspects of that idea are and tell me another product in the world that it is kind of like erm and then you tell them they have five minutes to do it you will be amazed how quickly people can crank out a lot of ideas and then you do a couple of rounds of that and it’s erm in a structure like that that you can really get a lot out in a hour or two hours.

Paul: I mean yeah you have hit the nail on the head there we made, you know the first time we did this we made a lot of mistakes and there was a lot of kind of oh I don’t know whether I am kind of comfortable with this, there was a lot of preamble kind of thing and also we just got tired out. You know there is only so long that you can do something like that. Now admittedly along side that we were doing things like, it was kind of a kick off meeting as well and we were kind of introducing the project to some of the people in the room and that kind of thing but to be honest putting it all together in one big meeting was too much we would have been better of splitting that over a period of time, there were reasons why we had to do it that way because one of the guys isn’t local and he was down but it did kind of get me thinking about this you know the amount of time but like you say if you have structured activities and you set time limits on it then actually that is beneficial yeah

Leah: But also I think actually it is probably important to acknowledge the point that you make that there is time commitment in working this way and it is not like, it is not like you can squeeze it in and still do everything in the way that have already been doing it, it’s there is an actual time commitment to doing it this way. We often at Adaptive Path can do week long design sprints where we essentially we do a lot of the brainstorming activities that we have been talking about in this conversation in the first part of the week and will actually produce wireframes by the end of the week and it is really aggressive and it’s incredibly productive and brings us a lot of work but you cannot do anything else during that week there is just no way. So you sometimes you have to make time move quickly.

Paul: Another thing is ultimately you get the time you are investing back in things like having a developer sit in the room is going to avoid problems later down the line where you know …

Leah: yeah

Paul: where he suddenly turns round and says hang on a minute you have come up with this is the design and we can’t implement that or there is something suggested at these early stages but because the project manager is not there it gets lost in the system and all the rest of it. So I think you know it just feels like a lot up front is the best way of describing it.

Leah: Yeah and I think it is important, you know if you are a team of one in an organisation or where you do not have a lot of support as the user experience and where they may not have a lot of erm comfort, your colleagues may not have a lot of experience or comfort or familiarity with design it is important to go just sort of take baby steps with them with this stuff. I think that you rather than coming in and you are there for a little while and you realise this isn’t quiet working lets change everything and have a two day off site and get the executives to support all this. That might be a little ambitious but erm what might be a little more feasible is to talk to the team and say I feel like there are some ideas we all have that er that maybe it would just be good to get out so that we can actually consider them directly and talk about what’s appropriate or not for the product, could be schedule a hour and half workshop I will structure it don’t worry you do not need to do anything just come with yourself and a pencil in your hand and I will give you cookies and it will be fun and that’s kind of like a starting point to get people ending up engaged in the activity and what I find is when you give people a little bit of a taste of it and they see it can be so productive they become much more enthusiastic about participating and making time for it later on. So particularly if anyone who is listening to this conversation is a team of one or is even like a freelancer with a organisation that they do not have an established relationship with I would say start out with baby steps and structure a workshop in a way that will actually help the participants to see the effects of it pretty quickly

Paul: So we have talked a lot about kind of generating a lot of ideas and you know certainly when we gave this a go we ended up with loads of ideas, erm So I think we need to end this interview by kind of going well now what? You have got this big pile of ideas how do you kind of refine them down into what you are going to actually use.

Leah: Yes, that is always the hardest part of the process actually and not at the same time I think what will happen is there will be a couple of ideas that will be really exciting and everyone will sort of know it. I do not know if that correlates with your experience but the trick is even though some ideas seem like wooh that is pretty cool or wow that would be kind of awesome if we built that it is a question of is that appropriate for the business needs that are driving the product, appropriate for the users needs and for that it ends up a lot of kind of compromise but in order to know where you make sense to compromise or where it doesn’t make sense to compromise it can be really critical to have a well articulated statement of what experience you are trying to produce.

Paul: yes

Leah: We use design principles at Adaptive Path which I know a lot of folks in the field use but for us we try to potentially create five to seven short succinct statements of what the experience of the product should be and doing that helps us to look at all those ideas and say, like this is the coolest most web 2.0 interface I ever saw but it does not support our design principle so it is probably out of the door. The key to the design principles are that they are not, it is not a statement of what the functionality of there system is, it is not like sort of brand attributes it really needs to be something that implicitly invokes what the experience is going to be like so like TiVo has some great design principles early on in the development of their product they created some statements of what they wanted their product to be and you can even when you use TiVo now you can really see a reflection of that. Their design principles were “it’s entertainment stupid”, “it’s TV stupid”, “it’s video dammit”, everything is smooth and gentle, no modality or deep hierarchy, respect the viewers privacy. These are all things they are not quite features and functionality although some of them allude to it, they are not quite brand statements although there is certainly a lot of brand personality expressed in them. They sort of describe what the experience of using TiVo should feel like and it kind so works well in that respect.

Paul: hmmm, excellent that’s been so useful I could carry in talking for hours about this particular subject, but that is certainly a brilliant introduction and I would encourage people to check out the slides that you produced for that presentation which are up on slide share if you search for UX team of one you will find them no doubt. Thank you very much for coming on the show Leah and hopefully we will get you on again in the future to talk about other related issues and we can start this whole conversation all over again.

Leah: That sounds great, thank you very much Paul, I really enjoyed it.

Paul: Good to talk to you, Bye

Leah: Take care, Bye now.

Listeners feedback: Warranties

Got this question through from Andy Wickes:

I’m really interested in how you draw up a warranty regarding a website, and what you cover and for how long.

We are constantly plagued with clients expecting us to continue to support their site months after completion even though they refuse to pay a support fee.

There seems to be an expectation that a site should never develop a problem, never break when new browsers are released, and never cause issues even though we all know that sometimes issues arise from hosts that we end up attending to on their behalf.

I agree with your that the most vital thing is a firm agreement between agency and client at the outset as to exactly what each party expects from the other, but I am keen to learn what you expect to find in a ‘standard’ warrarnty agreement, what is covered, what length of time is suitable as part of the build fee.

Slightly ‘how long is a piece of string’ I grant you, but something I know my team and friend find a constantly challenging topic!

We include the following warranty as part of all our contracts:

The Contractor warrants that all the Deliverables shall collectively provide the functionality specified in the Statement of Work. For a period of twelve (12) months from the date of acceptance by the Client of the final Deliverable the Contractor shall promptly remedy at the Contractor’s own cost any non-compliance of the Deliverables with the specification set out in the Statement of Work or such non performance of the Site.

So, in English, that means that we will fix any genuine bugs for free on a site that we have developed within twelve months of the go-live date. There are two key issues that can crop up relating to warranties.

Interpretation

Taking my last sentence as an example – what does ‘genuine bugs’ mean? If it’s a CMS job, then some kind of functionality defect such as a form not submitting properly would definitely fit that description. But, as Andy mentions, what about rendering bugs in new browsers? The legalese states that we will fix bugs “within the specification of the Statement of Work”. New browsers aren’t included in that.

That old adage ‘common sense’ tends to come to the forefront in situations like this. If the ‘fix’ will take a tiny amount of time and, at that point, you are negotiating another much larger project with the same client then giving a little slack probably wouldn’t hurt your relationship. However, you always have to make sure that the client knows that you are offering something that is outside of the warranty otherwise you could end up creating an expectation that it will happen every time.

Another recent example where we decided it was in our interest to fix a number of sites free of charge – that were all outside their warranty – was when early versions of our CMS became vulnerable to a security risk.

Though we could have insisted that the work we carried out was chargeable, we decided that having a bunch of broken sites was potentially more damaging to our reputation than worrying about chasing clients for the small cost of fixing the sites.

Expectation

The second issue relates to what a client expects of a warranty with an agency. There is a view, I believe, that a lot of clients see a warranty as a support agreement.

We have often had calls or emails that relate to CMS usage, for example, “I can’t remember how to input a news story on to the site, can you remind me”.  Again, in this type of situation, common sense should rule but if a client is continually asking support related queries or is outside of the warranty period then explain that you can either provide an estimate for the work they are requesting or that they may wish to consider setting up a support agreement where they can call-off your time more easily.

This can be occasionally met with a frosty reception especially if you are no longer working with that particular client but, you are not being unreasonable in any way. You are simply charging for your time like everyone else in business. To use an analogy, no-one likes paying to have their car serviced but equally, we don’t expect the garage to do it for free.

Summary

As with most things contract related, make sure that you discuss what your warranty means with your new client before you start work. Concentrate on the fact that it is not a support agreement and discuss the potential need for a support agreement.

Also mention that websites, like most things, do break sometimes and often this is long after a warranty period has run out.

Back to top

149. White Hat

On this week’s show: How to become number one on Google *cough*, are customer testimonials worth it and how do you create a reassuring website.

Download this show.

Launch our podcast player

Housekeeping

Some housekeeping to kick off today’s show I am afraid:

Web Design Introductory Training

Drew and Rachel over at EdgeOfMySeat.com are running two training courses next month that look ideal for those starting out in web design. What is more they are offering boagworld listeners 10% off if they enter the promo code ‘boagworld’ at checkout.

The two courses are…

HTML and Web Standards for Beginners – 19th February

a one day course ideally suited to those wanting to get into web design, or perhaps for clients who have to format content with HTML for their websites. Covers the basic web standards principals of semantic markup and separation of content, structure and presentation.

Beginners CSS – 20th February

a one day course for learning CSS from the ground up. We go from zero knowledge right through to building floated, positioned and fixed width layouts.

For more information visit edgeofmyseat.com/training/

Bamboo Juice

Next up is a conference I am really excited to be speaking at. It called Bamboo Juice and is a one day conference taking place at the Eden Project in Cornwall. There is a growing line up of speakers that currently includes people like Jeremy Keith and myself.

It is great to see conferences happening further afield in the UK and I really want to see this one succeed. Please support it if you can. Cornwall is a stunning place and the Eden Project is a must visit. You ticket includes entry to the Eden Project so you will have a chance to look around.

Best of all the entire conference only costs £99! Please, please join us. Its going to be great fun and it should have a nice intimate feel with lots of time for chatting.

You can book your ticket now at bamboojuice.co.uk.

Consultancy Competition

Just a reminder of our free consultancy competition. Headscape are giving away a free days consultancy to a lucky winner. Email us with your name, URL and why you want us to help you out. We will pick a winner at the end of the month.

If you can’t wait that long Paul has started running mini-consultancy clinics via Skype. You can buy 30 minutes or more of Paul’s time and he will chat with you about your site, career or anything else (within reason). Its a bit of an experiment at the moment so if you are interested in trying it out visit the Boagworld forum where he talks more about the idea.

Back to top

News and events

More on jQuery

If you listen to this show regularly then no doubt you will be aware of what a huge jQuery fan I am. I was therefore super excited this week to see the release of a new version of jQuery that builds on what is already an excellent Javascript library.

Most of the improvements are in performance. This is remarkable as jQuery was already one of the most lightweight and speedy libraries available. However, they seem to have made some significant improvements.

The main new piece of functionality is something called Live Events. Live Events allows you to bind events (such as a onclick event) to all elements even if they have yet to be created. Let me give you an example. Let’s say you wanted all links with a class=’external’ to open in a new window. Previously you would create a function that added an event to all links with that class so that when the link was clicked it opened a new window. The problem was that if you added more links dynamically to the page you would have to rerun the function if you wanted them to behave in the same way. With live events this is no longer necessary. This is a huge improvement and one that will streamline a lot of code.

I really cannot say enough good things about jQuery. It really is enormously powerful and a real time saver. What you can do with it is quite amazing as is demonstrated by a post from Smashing Magazine this week entitled "45+ New jQuery Techniques For Good User Experience". Whether you use jQuery already or not, check this post out. It will definitely give you loads of ideas for enhancing your sites.

Getting started with HTML 5

Talking of new releases, there is a significant amount of buzz surrounding HTML 5 at the moment. This is somewhat surprising considering it is a long way from being finished and some even argue we do not need it in its current form.

Cameron Moll does a nice job of providing a round up of what is currently being written about HTML 5 including a nice little summary at the beginning…

The world isn’t ready for HTML 5 at large just yet, but we can begin preparing for it by using common, semantic selector names (header, nav, section, etc.)

To be honest it is still early days for HTML 5 with some estimating it will be released in 2022 some estimating that it will not be fully implemented by browsers until 2022. With those kind of timescales we can afford not to care. Jeff Croft puts it up nicely in his post "Two Thousand and Twenty Two" where he says…

It ultimately doesn’t matter if HTML 5 is available next month, next year, or fifty years from now. Those of us who do real work in this industry know that the only thing that really matters is what specs and technologies are supported by the browsers real people use.

Jeff came under a lot of attack for his post but I have to say I agree with him. What matters to real web designers and real website owners is what browsers will support now. So my advice is to ignore HTML 5 now and brush up on your WCAG 2 instead!

Web design trends for 2009

We turn now to the more immediate future and a post by the people over at Smashing Magazine. "Web Design Trends of 2009" endeavours to look at emerging trends that could become mainstream over the coming year.

To be honest I am not sure these are some much web design trends of 2009, as a look back at the end of the last year. However, it makes interesting reading none the less.

The trends listed include…

  • Use of letterpress typography, where text is ‘punched out’ of the background
  • An increase in the richness of user interfaces through the use of Javascript
  • The general acceptance of PNG transparency
  • Big bold typography
  • An increased use of font replacement using tools like sFIR
  • More sites than ever using overlay boxes to display images and video
  • A proliferation of video and screencasts
  • Blogs adopting a more magazine orientated design aesthetic
  • Lots of Javascript slideshows wherever you look

Nothing particularly surprising, but the article does provide some inspiring examples of these different trends and analysis about wh
y they are becoming fashionable.

Your website can thrive in a recession

We conclude today with another post about the recession. To be honest I am getting sick of talking about it. In fact I suspect it is turning into a self fulfilling prophesy. However, Gerry McGovern has written an interesting post about how your website could thrive in a recession.

The article mainly focuses on the cost savings that can be made by bringing customer interactions online. He quotes research which states:

the average cost of a web interaction is 27 pence, the average cost of a phone interaction is 3.76 Sterling and the average cost of a face-to-face interaction is 9.34 Sterling.

He goes on to say:

So, it is 14 times cheaper to allow a customer to complete a task on a website than to have the customer complete the same task over the phone. The Web is 35 times cheaper for completing such a task than a face-to-face interaction. Isn’t that a compelling business case for a website during a recession?

It is an interesting argument and one that may sway some of the people holding the purse strings. However it fails to take into account the upfront development cost of moving customer interactions online. For better or worse companies are focusing on short term cost savings at the moment rather than long term expenses. As a result some web design projects are being put on hold.

Nevertheless if you work for an organisation that deals with a large number of customers then this article is a powerful arguement. It is certainly something that you need to show your boss.

Back to top

Feature: Becoming Number One On Google

‘Become number one on Google’ – The dream of every website owner and titles like that grab people’s attention. What can you do to help achieve that dream without resorting to black hat techniques? Read More

Back to top

Listeners feedback:

Customer testimonials – Are they worth it?

Question from Dave Rupert –

“Client Testimonials” – whenever some marketing aficionado comes up with these they want them on the site. When was the last time you thought “OOOOH CLIENT TESTIMONIALS!! OMFGWTFBMXBBQ!!1!” and clicked to go see a whole page of them? Are these out of date? Does anyone care about them? Are there examples of good implementation? Do you use Client Testimonials on your site? If so, why?

This is a good question because it has made me question something that I have always considered to be a really good thing on websites.

I think someone in Dave’s position – who I assume is a web developer/owner – won’t ever get excited about a list of client testimonials. Let’s face it, they’re not for Dave. They’re meant for visitors to the site to try and persuade them that buying a product or hiring a service is a good idea. The idea is that customers are far more likely to trust a testimonial from an existing client than the marketing speak on a website.

But this is where I have started to question my thinking. For example: “I am Mr X from company Y and I have to tell you that after using these people’s services I am now a better, more rounded person and I have decided to name my first-born after the MD”… this rather points to the fact that Mr X is the MD’s brother/drinking buddy/receiver of folding in a reverse handed way (delete as appropriate)… or even the MD himself!

So, do potential customers place any value in testimonials or do they instantly think they are fiction. In my opinion, I do still think they have value, particularly if you back up an online testimonial with that particular client’s contact details in a proposal. I also think that video testimonials have more value than written ones because (unless they are a complete setup) you will be getting the client’s real feelings and you can watch their body language.

Slightly going of point, regarding providing client contact details for inclusion in a proposal, I have started to ask potential new clients which of our existing clients they would like to talk to rather than simply providing a list chosen by me. I think this adds a further degree of trust.

Fundamentally, I do still think testimonials are a good thing and we will continue to use them on our site. But I don’t think I will be placing so much importance on them as I used to.

How do you make your site feel safe

Kevin Dees asks an interesting question on the forum:

I don’t know if this question has been asked before but I’m interested in what other designers have done to help make a site "feel safe".

Many times I find myself leaving e-commerce sites… because they do not feel safe. I find that this is due to poor design. Big flashing buttons and the like make me wonder if I’m going to get scammed.

So, I guess what my question is "how, as a designer, do you make your site feel safe, welcoming, and secure with the design itself? What are good practices? How do you make users go were you want them to, yet make them feel like they are still in control? What do you suggest adding or even keeping way from when it comes to design"

The answers he got in the forum didn’t really address his question. They focused on the realities of making a site safe (security and technology) rather than on the perception of security.

A site maybe the safest in the world but if the design isn’t right you are left with doubts. Take for example the new US government site that allows people to apply for visa waivers every time they travel to the US. One would hope that a site collecting that amount of personal data would be extremely secure but the design leaves you wondering if it is legitimate. It just doesn’t ‘feel’ professional.

I have spent a long time trying to come up with an answer for Kevin. However, I have found it hard to define what provides that sense of security. Part of the problem is that I think as a web designer I am more sensitive to the ‘vibe’ a site gives off than the average user. I am not sure I am best placed to judge.

Also, a lot of the things that occurred to me where content issues more than design. Delivery policy, site security, returns policy etc. are all content issues and so do not answer Kevin’s question.

However a few things have come to mind…

  • An attention to detail – Sites that lack an attention to detail always make me nervous. Poor browser support, bad grammar, inconsistencies and ill considered design reek of unprofessionalism. If I am going to spend my money on a site, I want to know that money and time has been invested in its creation. If an organisation is shoddy in the production of their own site, then I can probably expect the same attitude in the way they interact with me!
  • Structure – I think a strong grid structure is very reassuring. It conveys a sense of order that is disconcerting when not there. I think that is the problem I have with the US immigration site. The form you have to fill in is all over the place. Fields don’t line up and the site lacks any sense of order.
  • Colour – Misjudging colour can have a serious physiological effect on how we perceive a site. Some colours ar
    e naturally more trustworthy than others. Blue for example has a very safe reliable quality. However using a conservative blue on a site aimed at young girls will project entirely the wrong image and make the audience suspicious of your site.
  • Trying too hard – Some sites just try too hard, shouting for attention. Flashy graphics, heavy sales copy and advertising orientated imagery all scream desperation and manipulation. People do not like to be manipulated or pushed into responding. They like to move at their own pace. Push them too hard and they will run away.

I am not sure I have done particularly well at answering the question either, but hopefully there is something in there you might find useful.

 

124. HTML 5

In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5

Download this show.

Launch our podcast player

Watch the behind the scenes video (Part 1)

Watch the behind the scenes video (Part 2)

News and events

Removing Microformats

The story that has generated the most email this week is the BBC announcement that they will be dropping the hCalendar Microformat. This decisions comes because of long standing accessibility concerns over the machine readable content within that particular Microformat. The problem is that code meant to be used programatically is potentially read out to screen reader users and displayed as meaningless tooltips to sighted users.

The decision of the BBC to adopt Microformats was a huge boost to the movement. Equally the rejection the hCalendar is a blow. However, it is important not to get this out of proportion. Remember, they are only rejecting a single Microformat not the whole approach.

The other thing to consider is that the BBC is a public service organisation with an incredibly high obligation to ensure maximum accessibility. In many ways they are in a unique position. Although it maybe appropriate for your organisation to pull hCalendars too, it should not be based on the decision of the BBC.

My advice is as follows. If you already have hCalendar information on your site I would probably leave it (dependant on your exact circumstances). The Microformat community is working on a solution and I would implement that rather than removing hCalendar entirely. If however, you are not yet using hCalendar then I suggest you hold off until an updated specification is released.

Becoming employable

In the past we have spoken about becoming a professional web designer. I know that many people who listen to this show or read the blog are students. You are concerned that the skills you are being taught are out of date and will not improve your employment prospects. How then do you become a more employable web designer? What skills do you actually require?

Andy Rutledge tackles this subject in his post "the employable web designer". Without a doubt it is the best post I have read on the subject of web design career development. I highly recommend you read it.

The thing that impresses me is that it looks beyond the obvious design and technical skills required to be a web designer. It also tackles the business and communication skills too. He really drives home quite how wide an understand a good web designer has to have.

My only criticism is that it could feel demoralising. You may read the list and think it is an unachievable aim. However, I don’t think that is the case. What Andy outlines is the optimal requirement of a web designer, rather than what is needed to get your first step on the ladder. I certainly did not have all of the attributes listed when I started.

All we need now is a second post telling us how to gain the skills he lists.

Better CSS font stacks

David (a boagworld listener) sent in the next story. It covers a subject that I am currently still grappling with. It is a post about CSS font stacks.

If you code in CSS you already know about font stacks. It is where you specify the fonts you wish to use. You can say for instance; use Helvetica and if that isn’t available use Arial. If that fails use a generic san-serif font.

For many of us that is as far as our thinking goes. The majority of us use very basic font stacks that are uninspiring to the point of being insipid.

I love this post because it lays out a very clear methodology for improving your font stacks. It also goes on to provide an impressive selection of font stacks organised into heading and body fonts, allowing you to instantly improve your site

If your site is looking tired and boring, but you don’t have the time to redesign, consider adding a new font stack. Such a simple change could make a real difference.

Do flexible layouts still matter?

Our last story of the day is a post from Smashing Magazine entitled Flexible Layouts: Challenge For The Future. To be honest I was ensure whether to include this post or not. On one hand it covers an issue many people have been asking me about. On the other, its arguments seem stretched and the whole thing ends with an advert for a CSS framework.

The article tackles zooming and fluid design. The new generation of web browsers – Firefox 3, Opera 9.5 and Internet Explorer 7 – provide full screen zooming. This gives users has the ability to enlarge the whole interface, not just text. Some are arguing that this is the end of fluid layout because zooming tackles many of the accessibility concerns associated with fixed width sites. However, this article strongly disagrees.

The author argues that flexible designs are better for mobile devices, that pixels are becoming less important and that the user shouldn’t be required to customise a site to their needs (it should be done automatically). Although his arguments are weak at times and he uses some fairly dodgy comparisons I do generally agree with him. I see no reason to think fluid design will go away anytime soon.

That said, I am in no doubt that page zoom does reduce the number of occasions fluid sites are necessary. Ultimately there is no right or wrong answer. It is entirely based on the situation. For example Boagworld, Headscape and The Website Owners Manual all use fixed designs. However, many of my client websites do not. That decision is based on numerous factors such as device, user base and business priorities.

Back to top

Feature: Creating a Better Survey

The web allows us to interact with our customers more than any other medium. One of the tools in our arsenal is the online survey. However, these are often badly implemented. In this weeks feature we find out how we make your surveys more effective?

Back to top

Interview: Lachlan Hunt on HTML 5

Paul: Joining me today is Lachlan Hunt; It’s good to have you on the show

Lachlan: Thank You Very much

Paul: It’s great to have you here I really appreciate you taking the time to join us, now the reason that we asked Lachlan on the show is because he posted a brilliant article on the A List Apart site about the subject of HTML 5 and I have been keen to look at this subject for a while partly because of my own ignorance to be honest, um, so lets kinda kick off by if you could perhaps tell us a little bit about where HTML 5 is at the moment I know that kinda getting a language to a release like this finalized is a massive process so can you tell us where we are at in that process.

Lachlan: OK, it’s, um, a really an ongoing process with browsers implementing different parts of it progressively so it’s not, you know, going to be all implemented at once and ready to go in one, er the next few browser implementations. We have some features implemented already and shipping in browsers other features which are being worked on at the moment and other are planned for, but still a few years of yet. But it is gradually getting there. We are trying to focus on what authors really need, instead of trying to do it all at once

Paul:Ahh, okay so that a slightly different approach that we have seen in the past, the idea of an incremental roll out. So how does that work from the W3C’s point of view are they doing modular releases is that how it works

Lachlan: Um, at the moment no, but the way the spec is structured each part of the spec, what I am trying to indicate is the stability of each section of the spec as we go along. SO thing like the Canvas API which has been in browsers for a few years now, it should be getting to IE very soon. That section is pretty stable, Other things for example "data grid" or a lot of the web forms are not widely implemented.

Paul: OK so that quite an interesting approach to the problem I guess from what you were saying earlier to me there is a community base element people can get involved and contribute. How is that all working then?

Lachlan: Well we’ve got a REALLY REALLY open mailing list on whatwg.org anyone can subscribe at the moment there wa about 800 subscribers on that list anyone is free to subscribe and post feedback about the spec if they want to, but that’s not for everyone obviously because it’s quite a high volume mailing list and not everyone can keep up with that. We have also got an open blog on http://blog.whatwg.org/ where absolute anyone who wants to can write an article submit it and have it published. Anything to do with what the WHATWG are about, HTML5 and anything related to it at all. It’s also a good way to let the community know what’s going on by publishing articles also to find out what people think because they keep posting comments on there as well. We have also got an open forum which is at http://forums.whatwg.org/ again anyone can subscribe to that, am sue you know how a forum works

Paul: So there are lots of different ways to be involved, I have to confess things like that can feel quite intimidating to get involved in. You’re kinda worried about putting your foot in it, and saying something really dumb, is there kind of Opportunities to lurk and are people fairly friendly over there? I guess you are going to say yes aren’t you

Lachlan: Yeah everyone is friendly over there,they are nice sort of area to go to aim at web developers and people who aren’t quite as technical with the spec areas and stuff. You can ask any question you want and just learn whatever you want as well. Their is also the w3c side of it as well. Which is strictly related but is more focused on the actual technical side and issues so yeah. The What WG and the W3C are both publishing exactly the same spec and they both work on it together and feedback can be sent to either place, it will all be taken into account

Paul: Oooh, that’s useful. So looking at kinda the state of affairs at the moment with HTML 5, reading through your article there was some things in there that really sounded quite exciting, there was this thing about structure and some kind of additional elements that could be used, which provide a little bit more structure, headers and footers and things like that can you tell us a little about that, and maybe explain a bit of what those do.

Lachlan: Well at the beginning of the work back in 2004 / 2005 we basically took a look at what a lot of site where doing and we noticed that they were all using a similar structure. All the blog’s were using headers and footer and generally things like column layouts to show articles and stuff like that. So we wanted some semantic elements to come and cover each of those features that people actually used, solving the real problems that they were actually focusing on. instead of having to do "Div" elements for everything, which is what people do we give them an actual element and that also has a side effect of increasing accessibility because an element with specific semantics can be hooked into the accessibility API’s and help someone with assistive technology navigate the document a bit easier.

Paul: Okay, because I mean reaction just glancing at it quickly and not thinking about it was what’s wrong with the div with an ID Equals footer, or an ID equal header or whatever but like you say, as you think about it more it become obvious that if those are considered distant elements, one person might call it a footer another might call it "the bottom" or whatever else if they have consistent semantic names then you know you can have screen readers and stuff jumping to the footer or avoiding / not reading the footer depending on what is set in their preferences, is that what you are thinking?

Lachlan: Yeah that sort of it, it’s also helping the authoring side too, as there are lots of Div elements in source code which makes it easier to read if you have got elements with different names

Paul: yeah very much so, I spend half my life trying to which closing Div relates to which elements, that very exciting. Obviously the other big area you talk about in your A List Apart article is the audio visual elements and there is a lot that’s happening in there. It’s always had the vague feeling that HTML has never had any kind of, erm, erm, the audio visual elements have always been and after thought, what happing in HTML 5 in regards to that?

Lachlan: Well we have added the video and audio elements to the spec to try and allow video to be added directly to HTML, at the moment we have sites like youtube revel and all the other video site out there using flash to embed video and using the flash to give customized controls and stuff to the user, it’s really awkward, depending on proprietor technology, so we want to open that up a bit give a very very easy to use Javascript API to hook into and promote custom controls and all sorts of cool stuff with videos and of course audio as well. We have got experimental implementations of that in opera and in webkit. I have heard mozilla is considering implementing it as as it is now I am not sure of the status of their implementation. However the one big problem with video and audio at the moment is with Codecs, there are a whole load of software patent issues going around and we are not quite sure what codec we are going to standardize upon or if we are going o be able to get common codec support among the browsers, That’s an open issue but I am no lawyer to I cannot really go into that, so the ultimate aim is that you will be able to embed your movie file, your avid file or whatever directly into the HTML without the need to kinda pump it through something like flash

Paul: cool

Lachlan: that make it a whole lot easier to the authors hopefully

Paul: Yeah, you kind of, to some extent got to ask the question why do we need that when we have got a solution like flash

Lachlan: Well because Flash is a proprietary technology it’s managed only buy Adobe , they control it, they control the changes and what does and what does not go into future versions of it, however the thing with HTML is that it is an open standard platform which can be implemented by anyone and maintain interoperability between those venders.

Paul: It’s intrusting isn’t it that adobe has just announced they are opening up the flash format, do you wonder if that’s a reaction to some of the stuff you have been doing to kind of force their hand if they want to stay ahead o the game and dominant they need to be open

Lachlan: Yeah I don’t know how that going to work though, it depends, if they open the format up and actually make it an open development process where anyone can contribute to the future version and features which go into it or whether they just write the specs and tell other people to implement based on what they write, so I don’t know much about that. It will be interesting to see how it goes.

Paul: Very interesting, Now the next thing you cover in the A List Apart article is something which you titled "Document Representation" now I have to confess this confused me, so do you want to explain a little about what you meant by document representation. What you were getting at there.

Lachlan: Yeah, well in the past we have had HTM, and XHTML with two separate specs, HTML 4.1 which a lot of people use and XHTML 1.0 which a whole lot of other people use one of them is based on XML and is really really strict syntax that requires well formedness and is supposed to when you serve it correctly, if you make a well formedness error the browser is suppose to stop processing and throw and error message saying "Sorry I cannot handle this" where as HTML is more sorta loose and convenient in its error handling, it’s the traditional inspired by SGML, although really only syntactically similar these day but the error handling is a bit more lenient and you can get away with making a lot more errors. So instead of having two distinct language which you can use we have combined them into a single language which share the same elements and attributes and everything and as much a possible and when the browser reads those file it produces and internal representation called the DOM, a lot of javascript user will be familiar with the DOM as they work with that with their scripts to modify the document through the DOM. That’s an internal representation which is mapped, the DOM which is sort of mapped to by the syntax’s, the HTML and the XHTML syntax’s so it give the authors a choice of which syntax they want to use

Paul: So why do we need that choice what is the key difference, I mean you talk about HTML being more lenient are there other reason for choosing one over the other.

Lachlan: erm, well I don’t really know. However a lot of authors do prefer the strict syntax of XHTML like to make sure they quote the attributes and encode all their ampersands properly. They like to know they have done everything perfectly as with HTML a lot of people do make mistakes inadvertently and don’t want end users to see big error messages, so it’s a bit more user friendly if some little small error slips though their CMS and causes problems.

Paul: So it’s basically come down to personal preference then

Lachlan: yeah

Paul: Okay, that’s fair enough, so both, we are going to see equal support for both of them in browser manufacturers are we

Lachlan: Well that’s the hope we have said that we have got good support in most browsers, it’s just IE which is lagging behind

Paul: (Sarcasm) Oh that’s a suprise (Laughs) Okay are there ant other things in HTML 5 that might be of interest to those listening to the show which we should be paying attention to?

Lachlan: erm, well, as I said before we got canvas implemented in most browsers

Paul: So tell us, what’s canvas

Lachlan: It’s a 2D drawing API that you can use javascript to draw dynamic image with. People have used it to implement things like graphs that are built using tables of data which are on the page. People have also gone and done 3D games with it which is really cool

Paul: Wow, that incredible. I mean that sounds very similar to SVG is it a different thing.

Lachlan: It is different SVG is entirely done with XML, you modify that with script via the DOM by changing elements and attributes and stuff or with CSS. Canvas is an immediate mode graphics API where it is more like a bitmap sort of thing where as SVG is vector graphics, and canvas is bit map. They can both do images, the same sort of images, if you like but we have both vector images and bitmap images, so they both can serve different purposes.

Paul: Right, I see. Okay that’s good, so okay the big question, kind of the final question everyone is going to have is when can they start doing some of the cool stuff. Now you said right at the beginning this is going to be modular support based thing so we are going to be able to see some of these elements before others. You know some parts before other, so what can we do now, what are we going to be able to do soon give us an idea of where things are at.

Lachlan: erm, okay let’s see I think what’s being implemented at the moment. Cross document messaging is being implemented at the moment, that’s an API that lets you send message between documents with javascript without worrying about cross domain security issues,

Paul: Oooo…. that’s good.

Lachlan: Yeah it’s a really, really handy API that been implemented in opera for a while and I heard mozilla is implementing it soonish and should be in firefox 3 thought I am not entirely sure about that. That should be very very soon, erm, what else have we got, we got…. hmmm, this is tough

Paul: Sorry put you on the spot there (laughs) is that last one supported in webkit?

Lachlan: erm, I am not sure I would have to double cheek that

Paul: Okay that’s fair enough

Lachlan: yeah,

Paul: Okay so any other elements? Things like the structural changes are any of those being supported yet?

Lachlan: Not quite yet, erm as far as I know support for those requires changed to the phaser, and to implment the new pharsing algorithm in HTML 5, as far as I know browsers are not yet focusing on doing that because..

Paul: Okay that’s a shame, because that one I liked the sound of, what about the audio and the visual stuff?

Lachlan: We have experimental implementations in opera which supports OGG video, though it’s not really in a public build version yet, there is a experimental version which was released last year sometime. And webkit also has support in their nightly builds, which supports mpeg 4 unfortunate they don’t support the same codec but you can experiment with them.

Paul: (laughs) That would be far to easy

Lachlan: yes I know

Paul: So it’s all progressing slowly but, erm you know obviously the one name which has been very absent in the list you keep mentioning is Internet Explorer, so I expect we can probably see some slower movement there. We are talking you know in the years before this all becomes mainstream and we can actually start using it. Is that a fair comment to make?

Lachlan: Yes it will be several years before the entire spec is finished, we are hoping that it can get finished sooner rather than later but realistically it’s going to be quite a while yet, But it is important to know people will be able to use theses features before the spec is finished; so it depends on when browsers start supporting features authors can go ahead and use it.

Paul: That’s great and real exciting that you can start to do that sort of stuff. you know that we don’t need to wait for it all to be set in stone before moving forward. And it’s always exciting as well to see the future, know what coming up and be aware of everything. so is there somewhere people can go a websites address and keep an eye on what is currently supported by browsers.

Lachlan: Not at the moment but that’s something worth looking into, I think there is a wiki on the Working Group site, it does have some implementations listed but I am not sure how up to date. But it’s something I think we should look into

Paul: Yeah it would be great to have some kind of single page which says what features are supported by each browser that you could check back every few months see what’s going, there you go there is my contribution to the working group (laughs). Alright it was really good to speak to you and thank you so much for your time, What we will do is to get you back in further down the line and have a check to see where we have currently got to in the development of HTML 5, Thank you so much for your time.

Thanks to Jamie Knight for transcribing this interview.

Back to top

Listeners feedback:

Staying healthy on the web

Evan writes: My question to you is not entirely related to design, development or management but rather about health in the web industry. This is very important but we often seem to forget about it. We spend hours upon hours at our desks but are unaware of the damage this could be having on our health. Eyeballs almost touching the screen, typing without a break, sitting incorrectly – just a few examples. So, what do you do to maintain good health while working?

I am possibly the worst person in the world to answer this question. I consistently abuse my body while at work. In fact a physiotherapist friend said I had the worse posture in front of a computer she had ever encountered.

However, there is possibly something to learn from my terrible example. Let’s look at what I do and compare that to best practice.

  • I sit with my leg tucked up under me – Posture while working is important. Both feet should be flat on the floor, rest your wrists on the desktop in front of your keyboard and make sure your monitor is at eye level (in other words avoid laptop screens).
  • I stoically refuse to use anything other than my preferred mouse and keyboard – Using the same keyboard and mouse in the same position day after day can cause damage. Try using a variety of different hardware and positions. Push your mouse and keyboard nearer or further from you to change the position of your arms.
  • I believe that an individual pixel should fill my field of view - Leaning too close to your monitor is a particular weakness of designers who want to position that pixel ‘just so’. This not only damages your eyes but also your back. When you learn forward your neck and back support the weight of your head. When sat upright, the head is supported by a straight spine and therefore your chair bears the weight.

On the upside I do take regular breaks. I would like to claim this is because of my health. However, I think it has more to do with my short attention span. I get easily distracted and wander off to do something more interesting.

From Photoshop to HTML

I see a lot of PSD 2 HTML services on the internet but never tried any out. It seems to be an great option for an designer for making an quick website, to edit later myself.

What is the opinion of you guys? Love to hear you discuss this topic in one the next podcasts.

An long time listener from Holland.

I have to confess to being a snob over these services. Until recently I have always doubted the quality of the code but after seeing some recent examples I have begun to change my mind.

We are even considering giving them a try at Headscape, just to see what happens. Certainly from an economic point of view they make sense especially if you have more work than you can handle. That said, I do have three concerns.

First, results may vary. Without a personal recommendation it could be hard to find a provider who can produce the quality you require. Anybody can convert a photoshop document into HTML. However, it is much harder to do so using techniques like microformats, semantic markup and accessibility. Also, just because the quality was good once, does not mean it will be so again. As the good providers get busy it can lead to a decline in quality.

Second, people code in different ways. Unless careful attention is given to commenting, it is hard to pick up somebody elses markup. This is fine for relatively static sites where only small changes are required. However for projects where change happens regularly as the site evolves, it is more important that the markup is tailored to your style of coding.

My final concern is that this could lead to designers not learning HTML. As I have said before on the show, I believe all designers should be able to code themselves. You need to understand how the web works and markup is apart of that. Also, if you cannot code how can you judge the quality of the markup you receive?

Back to top

109. Rissington?

On Show 109. IE8 divides the web design community, Anton Peck talks about imagery, and the Rissington Podcast crew stand in for Marcus.

Download this show.

Launch our podcast player

News and events | Anton Peck on imagery | Listener emails

Unfortunately Marcus is not yet back on active duty but does thank you all for your kind support. However, do not fret. You do not have to endure another show of me waffling on by myself. Stepping into Marcus’ still warm shoes are two giants in the world of web design and podcasting. From the infamous Rissington Podcast we have Jon Hicks and John Oxton.

News and events

Microsoft to automatically roll out IE7

First up I was sent an article by several listeners which seems to indicate Microsoft is intending to do an auto-update of Internet explorer on the 12th February.

When IE7 was initially released Microsoft made the decision to make the upgrade to their latest browser optional. So even though a user had requested automatic updates they would not receive IE7 unless they specifically approved it. This decision not to force users to update frustrated those in the web design community who wanted to wave goodbye to the evils of IE6.

However, it would now appear Microsoft has decided to take the plunge and will be rolling out IE7 as part of the automatic update. Not all users are signed up to receive these updates but those who are will be using IE7 from February 12th (if they are not already).

Expect to see a significant decline in IE6 users to your site very soon. Perhaps it will not be long before IE6 follows IE5.

IE8 divides the standards community

Talking of Microsoft and Internet Explorer, probably the biggest story of the week is Microsoft’s plans for IE8.

IE8 promises to be a huge step forward in standards support and has been significantly rebuilt in order to enable this. However, such dramatic changes in their rendering engine comes at a cost. They fear that by becoming more standards compliant they will break many websites which are not built with standards in mind.

The way they have dealt with this problem is to introduce a small piece of code that you drop into your pages which can be used to specify what version of IE your site is designed to work with. The browser then renders the webpage as if it was that version of the browser. So for example you could specify that a page was designed for IE7 and a person viewing the page in IE8 would see the page as if it was rendered in IE7.

If no browser is specified then it defaults to rendering the page in IE7 that way no matter what changes Microsoft make in future browsers legacy sites are still rendered correctly.

What on the face of it seems like a very sensible plan has caused uproar in the web design community. A List Apart and Eric Meyer seem to be generally supporting the principle while many others including the likes of Jeremy Keith strongly object.

One of the main sticking point seems to be that this approach breaks progressive enhancement. In other words I may choose to implement a piece of functionality on my site knowing that it wont currently work in IE7 but does work in other more compliant browsers such as Firefox. If i don’t add this special code when IE8 comes along it will look at my page see the code is absent and so render it as IE7. That means even if IE8 supports the functionality now it wont use it because it is rendering my site as IE7.

Its a complex issue with good arguments on both sides. In next week’s show Eric Meyer and myself will discuss it in more depth.

HTML 5 is coming

Still on the subject of the future of web design we now turn to HTML 5 which has just been released in draft format. Sitepoint provides a nice little summary of what is in and what’s out. There is also a summary of the differences between HTML 4 and 5 which is very useful as well.

I cannot claim to have read the entire specification yet but I have to say what I have seen contains some exciting stuff. Having HTML tags to define common areas like headers, footers and navigation offers some interesting possibilities and its good to see built in support for video and audio.

The big shame is that practical application of this is still a long way off but its nice to know that there is potential there.

Career advice for web designers

Of course all these upcoming technologies wont matter to you if my predications of a couple of weeks ago come true and we all find ourselves without a job! This week I was pleased to discover I was not the only one with a pessimistic attitude towards the coming year. Robert Scoble has posted a entry entitled “what to do if you are laid off in 2008 recession“, which I thought was a particularly cheery title.

Actually it is a really good post with some excellent advice. What I like most about it is that the advice applies as much to a student trying to break into web design for the first time as it does to a out of work professional.

In fact if you are considering a career change of any kind (or have had one forced upon you) then this is a good read.

Advice includes…

  • Spend at least 30% of your day job hunting
  • Start a blog
  • Share your knowledge with the world
  • Demonstrate your skills on youtube
  • Networking
  • Contact web start ups because they are hiring.
  • Volunteer
  • Prioritise friends and family

The list goes on and is definitely worth reading.

Back to top

Expert interview: Anton Peck on imagery

Paul: So joining me today, as I said at the start of the show, is Anton Peck. How are you Anton?

Anton Peck: I’m doing great Paul. Thank you.

Paul: It’s good to have you on the show.

Anton Peck: I know. It’s about time isn’t it? *laughs*

Paul: It seems like it’s been a while. We haven’t actually had you on BoagWorld before have we?

Anton Peck: No, no. This is the first time.

Paul: But I’ve known you from… Where did we first meet? Was it South By Southwest?

Anton Peck: Yeah. I think we had sorta done virtual communication before then through email, IM or whatever. But we actually first met at South By Southwest last time.

Paul: Cool. So Anton, tell me and the listeners a little bit about yourself. How do you describe yourself? Do you primarily describe yourself as a web designer or an illustrator?

Anton Peck: That’s a tough call. The illustration is more my fancy, my hobby. It’s where my passion lies but the design is what I’ve been doing for a long time. So it’s sort of my trade of skill.

Paul: I see. So you’re kind of torn between two worlds.

Anton Peck: A little bit.

Paul: But fortunately those two worlds do overlap quite a lot which is why we have you on the show today. We thought it would be good to get Anton in really not to just talk about illustration but to talk about imagery on the web generally as that’s kind of his thing really, amongst many others, because you have a growing reputation. You do art-casts don’t you which are like illustration tutorials? Is that a good way to describe them?

Anton Peck: Yeah, that’s probably a good way to describe them. That is the rumor that I do those isn’t it. I don’t do them as often as I should but I do manage to get them out every once in a while.

Paul: And they are excellent. I have to say, I really do enjoy watching them. So let’s talk a little about imagery on websites and the use of imagery on websites. Let’s start off with a really nebulous and broad question that I guess is pretty impossible to answer but I’m going to ask anyway, which is what makes good imagery for a website? How do you go about picking imagery for a website?

Anton Peck: Well there’s a few things and some of them might seem obvious. First of all the images should complement the content of the website so that the substance isn’t too diluted from its original intent. I know that might seem kinda out there and obvious but it’s probably disappointing and surprising that there’s a lot of website owners that would want to put an image on a website because it’s really pretty or cool.

Paul: I guess it’s important to have imagery that relates to the branding or message you are trying to communicate.

Anton Peck: Right because imagery is meant to support the content rather than take away from it. You don’t want to pull everybody’s focus right away to the images but at the same time you want to support what’s already there. The images should have some interesting quality about them which could mean how well they have been cropped or resized. They should be saved at a pretty decent quality if they are JPEG’s or GIF’s. Not over compressed as they can sometimes diminish the personality of the website. When you go to a website and you see that it’s over compressed it really doesn’t look very good.

Paul: So for a relative newbie, an amateur that’s getting into web design, there’s always this question of GIF vs. JPEG. What do you use and when?

Anton Peck: Well for photographic style images that have a lot of… I would say colours but that’s not quite accurate but more photographic style images I would use JPEG’s. Then for images like logos, things that seem very flat and have a limited palette, maybe go with the GIF’s. Although I tend to do that a little bit less now that PNG’s are finding a little bit more broad support among browsers.

Paul: So do you use PNG’s very much?

Anton Peck: Every so often. They compress nicely especially when you use the adaptive palette which is similar to a GIF format but they can actually get a little bit smaller.

Paul: Cool, yeah. That’s been my experience as well.

Anton Peck: It just gets a little tricky when you are trying to do transparency.

Paul: Yes, exactly.

Anton Peck: That’s a whole other discussion.

Paul: Yeah, I don’t think I’m going to open that can of worms today. So any other tips for selecting good imagery?

Anton Peck: Well I would say it’s got to be appropriate and tasteful of course. So that way you can minimise the risk of offending someone or losing possible business. If you might have a certain sense of humour and want to put something on your website, you might have to watch out for how that might appear to someone else.

Paul: And I guess cultural considerations come in there as well. It’s easy to forget that the worldwide web is worldwide.

Anton Peck: Definitely.

Paul: The next big issue that a lot of people face is this whole kind of stock imagery kind of question. You reach a point where your website’s becoming relatively important to your business or you’re a web designer that’s working for certain clients. At what stage do you say that actually stock imagery isn’t the way to go, perhaps I should be getting something specifically commissioned whether that be commissioned illustrations, commission photography or whatever. It’s a difficult line. What’s your opinion on stock imagery? Is it the devil’s spawn or does it have a place? What do you think?

Anton Peck: No, I think it definitely has a place. It offers a great solution for those trying to find a good quality image when they can’t afford a commissioned photograph.

Paul: So what kinds of site do you use for stock imagery?

Anton Peck: I’ve been a fan of Crestock.com lately.

Paul: Ooo! I haven’t heard of that one.

Anton Peck: Yes and actually they have this huge contest going on where you can win a Mac Pro and all kinds of equipment. It’s a Photoshop contest and I happen to be one of the few judges on that particular site.

Paul: Ahh. So what’s this website again?

Anton Peck: It’s Crestock.com.

Paul: OK. I’ll check that out. Sounds good. So does that do both illustration and photography or…

Anton Peck: Yeah. They have a wide range of different material. They have background textures and you can search for pretty much anything there. A lot of it is user supported so if you even feel that you are a good photographer you can submit your work and see if you can even sell it and make a little bit of money off of it.

Paul: Oh cool. So when selecting stock photography, what should you look for? What should you avoid? The trouble with stock photography is a lot of it can look really similar to one another. What advice would you give about selecting stock imagery?

Anton Peck: Well there’s no real secret to it. There’s not a lot of advice either other than just go through a lot of it. Don’t try to find the very first searches you come across as that would be a higher chance it would be used somewhere else. You want to get a unique image, something that’s probably not as commonly found. It’s always a little disconcerting when you come across a new image that you see on 13 different sites like, “Oh that’s the same image used there”.

Paul: Yeah. It becomes obvious that it’s stock imagery.

Anton Peck: Right. So you want to find that unique image.

Paul: Yeah, couldn’t agree more.

Anton Peck: And the only way to find the perfect, unique image is to just go through a lot of it.

Paul: Yes! Which does take time doesn’t it.

Anton Peck: Certainly.

Paul: When it comes to commissioning stuff is there any particular advice you would give there in regards to briefing the photographer or the illustrator? I mean when somebody commissions you to do a piece of work, what kind of information are you after from them?

Anton Peck: Since they would commission me as an illustrator rather than an actual photographer, I’d mainly look at what they are trying to achieve for their website and how they expect it to support what they’ve done. One of the things that I was gong to talk about for commission photography, even though I’m not one, was the benefits for the websites because you can have a one of a kind image that fits exactly what is needed for the page. A photographer can come out to the business and take photos of the staff and location which is obviously something you can’t do with stock photos.

Paul: Yeah, which obviously makes a huge difference. I think often at times people actually want to see that kind of stuff because on the web you’ve got no way of judging what the company behind the website is really like. So to be able to see real imagery of real people and real locations does add some credibility and trustworthiness to a company. It’s not just somebody working out their back bedroom or whatever.

Anton Peck: Exactly what I was thinking, yes.

Paul: OK so you have a budget. How much difference does it make actually commissioning imagery rather than getting stock imagery. Is there really a difference? Is it really worth going out and getting stuff specifically commissioned?

Anton Peck: I would say if you are looking to get high exposure and if you were a big enough business I would definitely say do it.

Paul: So why is that? What difference does it make?

Anton Peck: Well that’s exactly what I mentioned earlier. It’s the one image that you are going to own or the website is going to own and it’s not going to be found anywhere else. Completely unique.

Paul: You do feel that when you go through these thousands and thousands of stock images that “Well, it’s pretty much unique. Who else is going to use it?” but it’s amazing how often images turn up. I’ve got a little program that changes my desktop image on a regular basis and I’ve had this really nice one that I loved and kept for a while which was a cityscape of London that had been made all futuristic and I thought “Wow! What a great image”. And then I’m going on the tube and there’s the same image plastered across the wall. It’s amazing how often they do turn up again.

Anton Peck: Yeah it’s takes away a little bit doesn’t it?

Paul: Yeah definitely. Definitely. You’re an illustrator, let’s get onto the role of illustration. What advances or disadvantages do you think that illustration has over photography. When should you be using photography, when should you be using illustration?

Anton Peck: Illustration’s gonna provide a whole different type of personality to a website that you can never find in a photo. You can create situations, objects, environments that would either be too expensive to reproduce or they just don’t exist in the real world. Things that you just can’t do with a photograph. Again, that’s going to have to be through the interview of the illustrator trying to describe whether the job is appropriate or not. Actually that would be up to the art director trying to commission to decide whether they need an illustrator or a photographer. But custom website illustrations are so unique right now. When you do have a custom illustration it stands out a great deal more than a photograph. I think one of the greatest examples that stands out on the top of my mind would be Andy Clark’s website with Kevin Cornell’s image that he did of that scooterboy, the guy on the scooter.

Paul: Yeah, it looks superb. That’s stuffandnonense.com, if I remember.

Anton Peck: .co.uk

Paul: Oh .co.uk. Well check that out.

Anton Peck: Just try to imagine if Andy would have reproduced that with a photograph. It wouldn’t have the same personality I don’t think. He wouldn’t have been able to pull it off.

Paul: So do you think that photography has less personality generally or is it just the stock photography that has less personality?

Anton Peck: I wouldn’t call it a more or less personality thing as much it would be a different type of personality. It depends on what you’ve going for.

Paul: Do you think there’s some situations where illustration just isn’t appropriate because it would create the wrong kind of personality or is illustration flexible enough to be able to work in most situations?

Anton Peck: No I think illustration is not appropriate for everything. I think there’s probably a time and a place where an illustration is not going to do the job of a photograph. The photograph tends to look a little bit more… I was going to say professional but I don’t think that’s the word for it. There’s a sort of business approach… I don’t know. Illustration is very personal. It’s one of a kind. It seems that if you have a corporation maybe an illustration isn’t going to work unless it’s a certain kind of illustration.

Paul: Yeah I kind of know what you mean. There’s something… A photograph has a kind of… trustworthiness isn’t the right word but a realism to it perhaps that lends itself to certain circumstances.

Anton Peck: Definitely. It’s really hard to distinguish between the two. It would really boil down to the specific case that it was going to be used.

Paul: Tell us a little bit about some of the different types of illustration and why you would pick when. Obviously every kind of illustrator has very different styles but are they any kinds of broad categories you would recommend in certain circumstances?

Anton Peck: Well, let me think off the top of my head. It seems like you have a real nice vector, flowery styles with flat colours like Veerle. Her work is fabulous and it’s all Illustrator. Her style is just so unique. Then I think of Kevin Cornell. His style is so organic and painted. Then there’s styles like my own. I tend to learn for more photorealism in some cases. My own personal gallery doesn’t lean that way too much. There’s a few different styles out there and it’s hard to say when it’s going to be used properly.

Paul: Do you think that some styles date more quickly than others? You talked about that flowery style where you see a lot of art deco type shapes being used on the web at the moment. Do you think that illustration goes through more fashion trends than photograph does?

Anton Peck: I would venture to say yes and in a way. However like all fashion trends, it always comes back. Right now the big popular thing is artwork that looks like it’s straight from the 70′s. The muted brown colours and the nice organic curves, swirls and circles, things like that. Those are going over quite well I think.

Paul: It’s interesting isn’t it. I think there some sites that need to be fashion conscious and on the cutting edge of what’s going on and there are others that need to be generic and long lasting. It very depends on what kind of industry you are in as whether you should follow these trends or not I guess.

Anton Peck: Right. Or then if it seems to expire then you can just change it out and get a new one.

Paul: The glory of CSS, the separation of content from design.

Anton Peck: Absolutely.

Paul: OK Anton. Thank you very much for coming on the show. It’s really interesting that we haven’t tackled the discussion of imagery before.

Anton Peck: I did have one real quick public service announce if you’ll let me have another minute.

Paul: Yeah, go for it.

Anton Peck: For your listeners I’m wanted to just bring up that they shouldn’t take images, and I know it’s kind of obvious, take images from fountain sites or Flickr or Google Image search. That’s just bad practice and they are normally just going to get found out and it’s not a very nice thing to do. If they find images on sites that they like, they can contact the owner to obtain permission.

Paul: And it’s surprising. Often the owners are very happy and flexible to accommodate that. If you take the time to contact them they are often very flattered that you asked. Good piece of advice. OK thank you very much Anton and we’ll get you back on the show again in the future. Good to talk to you.

Back to top

Listeners email:

Textmate reviewed

Teifion shares his thoughts on Textmate for the mac, an incredibly powerful text editor with a sophisticated plug-in architecture.

I have to confess that I have only opened Textmate once and found myself unsure where to begin. I do know however that Teifion and many other web developers rate it extremely highly and use it as their primary development tool. In the show I pick Mr Hicks and Oxton’s collective brains about its benefits and whether I should make the effort to learn it properly.

Javascript or JQuery

The second listener contribution comes from Will who writes…

I was listening to your last one and you said it would be important to learn javascript for 2008. I know bits of javascript but don’t particularly like it and don’t know ajax yet, however, I have been playing with jQuery and find it much simpler. Do you think it’s a good alternative to learning all of javascript and have you used it at all?

Personally I think it is important to learn a language from scratch and that relying too heavily on libraries can cause problems in the long run. Although there is nothing wrong with you learning jQuery I would suggest it should be an addition to learning Javascript rather than a replacement.

If you want to know if Mr Oxton and Hicks disagree with me you will have to listen to the show :)

To leave an audio comment for the show skype “boagworldshow” or call +44 20 8133 5122.