154. Top Ten

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

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

Podcast: Download (31.8MB)

Download this show.

Launch our podcast player

Housekeeping

SXSW

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

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

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

News and events

The ultimate website launch checklist

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

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

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

Mr Budd is on fire (not literally)

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

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

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

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

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

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

A win for the generalist

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

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

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

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

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

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

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

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

Interview: Relly Annett-Baker on Copywriting for the Web

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

Relly: Hello, how are you?

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

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

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

Relly: Yes, analogue beats everything.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Yeah.

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

Paul: Umm.

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

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

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

Paul: Sure.

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

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

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

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

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

Paul: OK.

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

Paul: Oh dear.

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

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

Relly: Thank you very much.

Paul: So, thank you very much.

Relly: Thank you.

Thanks goes to Simon Douglas for transcribing this interview.

Listeners feedback:

Being a more efficient designer

Adam from Wales has written in with an interesting question:

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

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

10 Tips for Efficient Design

What's with the attitude?

Posted in Working in web design on February 25, 2009 by Paul Boag

We face many challenges as designers and developers – IE6, the fast pace or change, meeting the needs of disabled users. However, I am coming to believe that our biggest challenge is our own attitude.

This post started off as a bit of fun. It was going to be another spoof, this time in the form of a top 10 list of harsh truths. However, as I began writing I found myself actually believing many of the points. In the end I was forced to scrap that draft and start from scratch.

I am worried about how people see us as web designers. More than that, I am worried how we behave as web designers, both with our clients and towards one another.

Let me explain what I mean, starting with the more obvious and damaging area – our attitude towards clients.

Our attitude towards clients

I speak to a lot of web designers and in all of those conversations I rarely hear a positive word said about the people who keep us employed.

The overwhelming attitude towards clients is one of disdain. Oh, we hide our feelings reasonably well when dealing with them face to face. However, behind their backs we are often critical and derisive.

We see clients as stupid, awkward, or intent on derailing the project. In short we see them as the enemy.

We have to change this attitude. Not only is it damaging to the relationship, it is also untrue. Just because somebody doesn’t understand the web, does not make them an idiot. Without a doubt they will be far more knowledgeable than you in many, many areas.

You cannot have it both ways. On one hand we set ourselves up as experts who should be listened to. On the other, we are surprised that the client doesn’t instinctively know, understand and except everything we suggest. If they could, we would not be the expert!

We need to recognise the critical role the client brings to the web design process and stop trying to exclude them for fear they might bring something different to the table we might not like.

Stop treating your clients like children and start treating them as peers. That means listening to their contributions even when it does not sit comfortably with your own views. This involves us losing our sense of moral superiority.

You do not have the moral high ground

I do not hide the fact that I am an evangelical christian. That means associating myself with some people who have an enormous sense of smug satisfaction and moral superiority. Some of these people really think they are ‘Gods gift,’ literally! However, they pale in comparison to the moral and intellectual snobbery I encounter in the web design community.

I am fed up with web designers who judge others (and their own clients) with such passion and vigour it borders on the fanatical.

We are not poets, artists or preachers. We do not have the luxury of free thinking theory. We should be pragmatists that work in the real world and solve real world problems.

The problem is that most of our high minded ideals are nothing more than ego. It is about exalting ourselves at the expense of others. Let me give you a few examples of what I mean…

Why doesn’t your site validate?

I can’t believe they code in .net

He is always asking people to retweet his posts.

Oh, they are just link baiting

Comments like that are just about pulling others down. Validation isn’t everything and how can you judge somebody’s decision to code in a certain language without any background information? Hell, what does it matter to you anyway? As for link baiting and retweeting – what is wrong with wanting to drive traffic? There seems to be an attitude that desiring your site to be popular and working towards that end, is in someway wrong! Admittedly new traffic is not the whole story but it is a part of it.

Promoting your sites or services is not desperate or needy. It is good business. If all you offer clients is moral superiority and a well built site, then you are only offering them half a service.

I am not saying there are no lines. I do not condone black hat SEO techniques and I hate SPAM as much as the next person. However, I think we need to drop the attitude and consider the broader picture. We need to consider the business behind the site.

Stop trying to be intellectually superior

Unfortunately we do not just like to feel morally superior, we also like to feel intellectually superior.

We dress our profession up in impenetrable jargon and give ourselves fancy job titles. In many ways we are like teenagers trying to appear more grown up by smoking and drinking.

I guess this is not surprising. Our industry is barely in its teens. We are trying to find our identity and justify our existence. However, in the process we are in danger of becoming elitist and inaccessible to outsiders.

Take for example the recent rash of Top 10 posts. It is something I have started doing myself and have received a massive amount of criticism for it. I have been accused of dumbing down, catering for the lowest common denominator and being desperate for traffic.

Indeed top 10 posts do drive more traffic. That is because people like them. They like them because they are accessible. They are easy to scan and easy to assimilate. In what way is that bad?

Those who criticise do so because they feel that in some way these posts cheapen the industry or devalue what we do. I get the same criticism about my podcast. We joke on the show and have fun. We make the information accessible. Therefore we must be devaluing it.

In my opinion this is a view driven by insecurity. By wrapping up what you say in long words and impenetrable jargon you can hide the truth. You can sound better than you really are.

Unfortunately this just isn’t true. By making it impenetrable you are actually hiding its worth. By explaining what you know in a clear and accessible way you demonstrate its real value.

The desire for exclusivity

All of this is driven by a desire to the ‘cool kid’. Perhaps it is a hang over from our school days when geeks were far from popular. We try to impress and dominate, when we should be empathising and working together.

Another manifestation of this cool kid mentality is our rejection of anything mainstream. As soon as something becomes popular we drop it like a stone. Now our clients are talking about twitter, we accuse them of ruining it and start looking for the next thing. We want to be exclusive, special, different.

The trouble is the mainstream pays the bills. We need to break out of our exclusive little bubble and try to associate more closely with that mainstream. We need to understand what the general populace are embracing and go with that, even if it means still supporting IE6.

Conclusion

This post is aimed as much at myself as anybody else. I catch myself doing many of the things I have written about here.

In many ways the web design community is awesome. There are not many industries where direct competitors talk to one another so openly and freely. However in doing so we have become somewhat insular and very intense. I think sometimes we are under the impression that we are shaping the future and that every choice we make is of crucial importance.

At the end of the day we are just building websites. We need to get some perspective.

Thus ends the rant :p

Rent a room at Headscape

Posted in News on February 24, 2009 by Paul Boag

Unfortunately our previous tenant has moved out so we now have a spare room available at the Headscape office. If you fancy working alongside a group of amazing designers and developers in the heart of rural Hampshire, read on.

Headscape has a gorgeous converted barn in the beautiful Hampshire countryside. It is a truly inspiring place to work especially for those seeking to escape the rat race.

We are currently looking for a freelancer or partnership interested in renting a spacious room at the Barn. Not only will you benefit from the wonderful surroundings, you will also get to work alongside some the brightest minds in the industry (if we do say so ourselves!).

What you get

We have tried to keep things simple. The monthly rent includes everything with the exception of your phone line*. This includes…

Your own private room
A desk and chair for your new office
Free coffee and tea
24 hour access with your own key
Use of the meeting room
The use of the kitchen
A lovely view over fields and forest
A fun and vibrant working environment!
An invite to our summer BBQs :)

* There is an existing phone line installed. All you need to do is get it transferred.

Location

Our offices are in Lockerley‎, Hampshire. Lockerley is a lovely little village with all mod-cons. These include exciting attractions such as…

A village shop
A pub (nearby)
A village green
A postbox

What more could you want :)

View Larger Map

The cost

It’s £336 per month, and you’ll need to pay a one-month deposit (to cover furniture, etc).

Interested?

If you are interested in learning about having an office at the Barn then call Paul on 07760 123 120 or email [email protected]

7 Harsh Truths about running online communities

Posted in Site content on February 23, 2009 by Paul Boag

In ‘10 harsh truths about corporate websites‘ I highlighted some of the problems I perceive in how companies run their websites. However, many organisations are not content to simply run a website, they want to run an online community too.

Don’t get me wrong, I am excited to see organisations embracing the idea of community. I have been involved in running virtuals communities since 1996 and in 2004 I wrote about the business benefits of community. To this day I encourage Headscape’s clients to build relationships with their users.

A well run community can…

Drive traffic to your site
Generate a passionate, evangelistic users
Encourage repeat traffic
Help develop your products and services
Save you money

This is not a ‘rant’ against community, or even corporations running communities. It is an argument against the way they sometimes choose to do so. I continually see the same mistakes being made by organisations. It is time that they faced the harsh realities of running an online community.

1. Technology does not create community

When clients ask for help to build a community, they almost always talk in terms of technology. “We want to add a forum to our site” or “can you create a profile system”.

In ‘10 harsh truths about corporate websites‘ I write about how a CMS will not solve your content problems. In the same way a forum will not create a community.

Vanilla Website

Community is about people and relationships, not technology. The technology is the easy part. You can have a forum like Vanilla up and running in minutes, but it will take months of hard work to build a vibrant community.

If you implement the technology and just sit back then your community will fail. The technology merely allows you to engage with your community in the same way as a telephone lets you talk to your friends. It is a tool and nothing more.

2. Show some commitment

I have already said that building a community takes time, but it also takes commitment.

Too many website owners start communities only to give up when they do not see fast results. A community can take months to get off the ground and years before it shows real returns.

It also takes ongoing input. To make your community successful it must be nurtured on a daily basis. When a user posts, you need to replying promptly. Until your community is well established it will need monitoring multiple times a day.

You also need to demonstrate commitment to the individuals that make up your community. You need to take on board their input, address their concerns and encourage their contributions. You need to show you care.

3. Learn how to lead

As well as caring for your users, you also need to know how to lead them.

This is not leadership in the ‘managerial’ sense. These people are not obligated to listen to you or do what you say. You need to inspire, excite and encourage them.

Running a community requires you to be more like a politician or preacher than a manager. You need to mobilise people around a common cause and stamp your personality on the community.

Unfortunately there are few course that teach these kinds of skills. However, I would encourage you to look at great leaders like Gandhi, Martin Luther King and even Barak Obama for inspiration. These men can teach you a lot about engaging with people and encourage others to follow your direction.

Photograph of Barak Obama

4. An antisocial community is your fault

As the leader of your community, your personality sets the tone. As a result if the community behaves in ways you do not want, then you only have yourself to blame.

I have seen many bloggers write about the negative comments they get on their posts. In most cases this is due to the tone they themselves strike in their writing. Although there are exceptions I believe that users will respond in the same voice you yourself set. If you are irreverent, then so will your users be. If you are rude, expect rude responses.

A good example of this is the social news website digg.com. Digg has developed a reputation for its ‘harsh and juvenile’ comments. I believe this comes from the leadership of founder Kevin Rose in his associated podcast Diggnation. This irreverent, comically and highly entertaining podcast has set a tone that has been carried across by users into the comments.

Diggnation Homepage

This is not a criticism of diggnation. Digg.com has become very successful because of their passionate community. It is merely an observation that you reap what you sow.

5. You need to swallow your pride

Another aspect to leading a community is the need to learn humility. No matter how well you run your community, you will mess up. When you do, how you respond is of crucial importance.

Because of the ‘distance’ that the web affords, people are often more critical than they would be face to face. Feelings are overstated and there is an inability to read the non-verbal signals we normally rely upon. This can often lead to confrontation and disagreement.

I have seen communities fail because the organisation alienated its community by responding badly to criticism.

If you want to run a successful community you must swallow your pride and never respond defensively to criticism. Instead acknowledge the comments and thank people for their honesty. Ask others what they think and hopefully they will come to your defence. If not, then you must seriously consider whether the criticism is valid. If it is then you need to admit your mistake and correct it.

By admitting you are wrong, it is possible to heal a relationship with your community and actually leave them even more enthusiastic about your brand than before.

flickr blog post - Sometimes we suck

6. Stop trying to control the message

If you work in marketing some of these points may make you feel uncomfortable. It feels messy and you do not have control over your message. Unfortunately that is the reality of community.

Community is not marketing in the traditional sense. It is not a broadcast medium, it is a dialogue with your users. Failing to grasp that will rip the heart from your community and force it underground.

I have seen unsuspecting companies experience a terrible backlash from a community simply fed up with being sold at rather than listened to. Users do not want a sales pitch or a feature list. They want the opportunity to feedback and a chance to help shape the future of the product or service they use.

Another tactic for controlling the message is to moderate. In extreme cases I have seen organisations moderate every single user contribution that appears on their site. However, I have also seen companies quietly remove negative comments made about their products and services. This is enormously counter productive because people feel censored and will go elsewhere to express their feelings.

That is the trouble with community, you simply cannot control it. If you do not allow it to flourish on your site and engage with it there, then it will pop up elsewhere where you have no control over what is written.

Adobe complaints on Get Satisfaction

7. Nobody likes to be alone

The final harsh truth I want to raise is that “users don’t want to be alone”. Too many organisations launch a forum with a plethora of topics and discussion areas only to have it lay dormant and unused. The reason – it appears empty, so what is the point of posting.

Before you can even consider adding community features to your site you need a critical mass of users that want to get involved. A lot of companies add community features not because users are asking for them but because management wants it. Communities like that rarely succeed.

Also there is a tendency to go straight for a forum. However, a forum requires a substantial number of users to work. Contributions can often become buried in some thread or topic and remain unanswered because it is never seen. If your community is small you may be better starting with comments, reviews or a mailing list. User contributions are much more likely to be noticed using these tools.

Finally, make sure you are seeding the discussion through new topics of your own. Asking lots of questions is a great way to stimulate discussion and prevent people from feeling like the only kid at the party.

Conclusions

After reading this you might feel that running a community is too much like hard work. You may decide not bother at all. However, that would be a mistake.

The ultimate harsh truth is that your users will be talking about your website, services and products, whether you want them to or not. The only question is whether you want to engage in that discussion.

10 tips for efficient design

Posted in Design, Mobile on February 19, 2009 by Paul Boag

Being a good designer is not always enough to survive hard economic times. You need to be efficient too.

I don’t want this to be another ‘recession’ post. Sure, being more efficient in the way we work as web designers, makes us more competitive and keeps us employed. However, that is not the only reason we should endeavour to ‘work smarter’.

Working as efficiently as possible brings other benefits too…

More time – The faster you can turn around work, the more time you have for personal projects, family and friends. I don’t know about you but this is a major motivator for me.
Better promotion prospects – It takes more than good design skills to be promoted. You need to demonstrate that you are proactive and efficient in the way you work. Management will value you more if you generate a higher return.
Increased profit – If you are a freelancer it is all about maximising profit. The smarter you work, the more money you earn. It’s that simple.

So how can you be more efficient and begin to work smarter? Here are 10 tips that will get you started.

1. Use snippets

Let’s start with the obvious technical stuff. First make sure you have a library of code snippets that can be easily reused. These could include Eric Meyers CSS Reset or your own code for dealing with common HTML content such as news listings or pagination.

These libraries of snippets provide two benefits. First, they save a lot of typing. However more importantly, they ensure consistency across projects. Because you are using the same code for each project, all of the IDs, classes and structure remain consistent. This will save a lot of time when trying to remember why you built something in a certain way or how it works.

2. Use a Javascript library

In a similar vein to snippets I would highly recommend you adopt a Javascript library. Personally, I am a huge fan of jQuery because it is designed for those familiar with CSS. It is also amazingly easy to learn and very lightweight.

Using a library like jQuery has proved a massive time saver for me. It has allowed me to avoid endlessly battling with browser inconsistencies (at least in Javascript!) and avoid reinventing the wheel.

jQuery (like most Javascript libraries) also supports a large number of plug-ins produced by third parties. These too can be a massive time saver. However, a word of warning – be careful using a plug-in you do not fully understand. The quality of plug-ins varies massively and if you discover a problem with one, you can waste many hours trying to fix it, if you do not understand how it works.

3. Configure your tools properly

Often in our haste to ‘get on with a project’ we fail to take the time to prepare properly. One example is in how our software is configured. We settle for working with tools ‘out of the box’ when some minor modifications could improve our efficiency.

Photoshop is a good example of this. It has all kinds of configuration options from keyboard shortcuts to palette layout. Take a few moments to set these up for your workflow, and you could save hours of unnecessary clicking over the long run.

Look at whatever tools you use to build websites and consider how their interface can be tweaked to your needs.

4. Have one system for tasks

For fear of reinforcing a stereotype, designers tend not to be the most organised people. Not only do we need to organise the structure of our software tools, we also need to do the same for our projects.

Fortunately, not all of us have to manage entire projects. However, we do all have tasks that need completing. How we organise those tasks can dramatically affect our efficiency.

A common mistake with task management is to have tasks spread across multiple places. Some tasks exist as emails, some in a todo list, still more in a notebook or on your mobile phone. The result is that things get overlooked.

In order to efficiently manage your tasks they need to be gathered into a single central location. For me that is a task organiser called Omnifocus, which syncs between my desktop and iPhone.

Tasks are still collected using multiple methods. However, once a day I transfer them to Omnifocus. If I attend a meeting and take physical notes that include tasks, I put the notebook into my in-tray until I can add the tasks to Omnifocus. If I receive an email with a task, I drag that email into Omnifocus. Ultimately everything ends up in Omnifocus.

By being this regimented about the way I organise tasks, I ensure nothing ever gets missed. I also avoid wasting time trying to track down the details of a task I have lost.

5. Embrace and manage admin

Part of the problem we face is that answering email and organising tasks feels like a waste of time. Its not ‘proper work’. This is especially true when the pressure is on and deadlines are tight. We arrive at work in the morning and launch into our projects without checking our task list. The result is that we prioritise the wrong work and miss deadlines.

I begin each day by doing two things. I answer and file all my emails (I always achieve inbox zero). I then review all of my tasks and identify the ones that I wish to complete that day.

However, I don’t stop there. I have designated admin time. Once I am done my morning review I close my tasks and email until lunchtime. I focus solely on work and avoid admin entirely. This prevents email and other admin from interrupting the flow of my production work. It keeps me focused.

6. Distractions must die

Of course it is not just email that distract us from work. There is instant messaging, Twitter, Facebook, RSS and… lets face it… the entire internet!

Don’t misunderstand me, some distraction is good. I have a very short attention span and so if I work on a single thing for more than about 30-40 minutes I start to ‘zone out’. However, there is a difference between ‘having a break from work’ and ‘getting distracted’.

Every 40 minutes or so I will take a 5 minute break and fire up Tweetdeck or Google reader. What I try to avoid is keeping these applications permanently open (although with twitter I have to confess I often fail).

By leaving an application open that can distract you with notifications (‘You have a new tweet’, ‘You have mail’, etc.), you risk it interrupting your flow of work. These constant micro-interruptions make it hard to ‘get into the zone’.

7. Keep a tidy environment

Distractions extend beyond your PC as well. Your work environment can also have an impact on efficiently.

If you work from home, endeavour to keep your personal and work life separate. Ensure you can close the door on the rest of the house and that the rest of the family know not to interrupt. Also if possible, try to keep your working area separate from the rest of the house. A garage or loft are ideal. I used to work in a small room directly between our lounge and kitchen. It was impossible to focus on anything with the constant noise from the two rooms.

Pay attention to your desk as well. Keep it clean and uncluttered. This reduces distractions but also creates a better mental state conducive to work. Ensure your physical files and disks are easy to find. Knowing you took some notes that are in a notebook somewhere does not make them easy to find. This is especially true when your desk is three feet deep under paper work!

Personally I scan what notes and physical paper I can. What I have to keep in physical form, I file in a single filing cabinet organised alphabetically.

8. Avoid multi tasking

There is a myth that multi tasking makes you more efficient – it doesn’t! As designers we like to ‘flit’ from one thing to another. However, ultimately this is damaging to productivity. We need to learn to focus on a single task and follow it through to completion.

As I have already said, I find it hard to focus for any length of time. In order to help me focus I break my tasks down into smaller ones. That way I rarely have to do one thing for too long. Take this post for example. To write the whole thing from beginning to end would take a couple of hours. That is longer than I could focus for. So, in order to stop me getting distracted and jumping onto another task, I break it down. This post was made up of three tasks…

Once I complete one task, I switch to another project for a while. Once I have completed a task on that project I may switch back to this post.

Although this is a kind of multi-tasking, it is more structured and ensures I spend as long as my attention allows on each project. I do not simply drift between projects.

Depending on your character this might be too extremely. You may find it easy to concentrate for extended periods. However, if you struggle to concentrate, do not use multi-tasks as an excuse to be distracted.

9. Don’t do excessive hours

Another widely held myth of productivity is that the longer you work, the more you get done. After all, on face value this makes sense. However, I sincerely believe this is not true, especially if your job relies on you generating ideas and being creative.

Obviously we have to put the hours in, if we want to pay the bills. However, do not allow your boss or clients to force you into excessive hours. The occasional all-nighter is one thing, regular 12 hour days is another.

It is incredibly easy to get burnt out as a web designer. You are expected to continually be creative, as well as keeping up with one of the fasting moving sectors on the planet. Things are continually changing and evolving and it is a struggle to stay current.

Working long hours damages your capability to take on board new information and cripples creative thinking. Ensure you limit your hours and book regular holidays. Do not push yourself too hard or you will fail to deliver.

Finally, accept your natural cycle. When you are ‘in the zone’ work every hour God gives you. However, you must also accept that sometimes you need to just stop and rest. Don’t feel guilty about the days when you hardly do anything.

10. Communicate better

I would like to end this post with possibly the best efficiency tip of all – If you want to avoid wasting time, learn to communicate better.

So much of our time is wasted because of miscommunication and misunderstanding. How many times have you had to redo a design because you misunderstood the client or showed them work too late in the process.

Take the time to really engage with the client and understand their requirements. Make sure that you include them in the design process and show them work often and early.

Finally, use tools such as gallery sites, mood boards and sketches to ensure everybody has the same understanding and is working towards the same goal.

By effectively communicating with clients, you can potentially save days on each project that would have been wasted on reworks and amendments.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

153. Harsh

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

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

Podcast: Download (20.3MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

Housekeeping

Consultancy Clinic

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

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

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

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

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

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

FreeAgent Discount

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

News and events

Feature fatigue

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

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

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

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

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

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

Striking font stacks

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

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

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

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

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

Tips for improving your HTML and content

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

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

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

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

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

Feature: 10 Harsh Truths About Corporate Websites

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

Listeners feedback:

Review: FreeAgent

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

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

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

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

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

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

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

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

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

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

The difference between print and web

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

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

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

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

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

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

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

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

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

10 ways to Battle Site Bureaucracy

Posted in Web strategy on February 17, 2009 by Paul Boag

Running a large institutional website is frustrating. Your site is often held back by internal politics and bureaucracy. Let me show you 10 ways to cut through the crap and get results.

My recent post ‘10 harsh truths about corporate websites‘ generated a huge number of comments both on my own blog and on Smashing Magazine. I seemed to tap into an undercurrent of frustration that exists within the industry.

However, although there was a lot of agreement about the points I raised, there was also resignation. There was a feeling that little could be done to overcome these problems because institutional websites are too entrenched in bureaucracy and politics.

Although I can sympathise with this position and have myself suffered from the problem, I am not one to give up! Over the last decade of working on these sites, I have developed a number of techniques which (sometimes) help to smooth their evolution. Hopefully they will help you too.

1. Educate and inform

At the heart of any technique for dealing with politics and bureaucracy has to be education.

Although there are occasions when people are just ‘trying to be difficult’, in most cases their objections are based on ignorance.

You cannot expect people to be as knowledgeable as you about the web. If you want people to make informed, sensible decisions you must educate them.

Education is also not just about giving them the background to a specific decision so they understand ‘why you are right’. It is about increasing your organisations general understanding of the web.

Run workshops, publish email newsletters, do anything that informs people about the latest web innovations. Increasingly I am invited into organisations to run short seminars on everything from accessibility to facebook! This kind of ongoing education means people are better informed when tough decisions need to be made.

2. Hold stakeholder interviews

One technique that we find very effective at Headscape are stakeholder interviews.

Stakeholder interviews involves meeting individually with anybody who has a ‘stake’ (interest) in the website. This is typically members of the marketing and IT teams, as well as departmental heads and senior management. However it should also include suppliers, customers and users of your website.

These one-to-one meetings provide two opportunities…

Requirements gathering – It is easy for website owners to live in isolated bubbles, separate from the rest of the organisation. These meetings provide an opportunity to understand the real needs and objectives of others within the business. It will highlight ways that your website can help, which you might not have previously considered.
To be inclusive – Stakeholder interviews offer a ‘political benefit’ as well. By meeting with people individually they feel included in the process. They feel their opinions are valued and listened to (which they should be!). People are much less likely to object if they have been consulted before a decision is reached.

People often complain about the website in stakeholder interviews. Allow them to do this and avoid becoming defensive. They will feel more favourably towards you and your website, if you listen to their concerns. We all like to be heard.

3. Avoid group committee meetings

The key to stakeholder interviews is their one-to-one nature. Group meetings can be very destructive. This is for a number of reasons…

The need to defend – In large organisations that have internal politics, everybody feels the need to defend their own ‘turf’. If somebody criticise the website, you are forced to defend it to ‘save face’ in front of others. Equally others feel the need to defend their own positions for the same reason.
A tendency to compromise - When two individuals in a group reach an impasse, the others try to find a compromise. This kind of ‘design on the fly’ inevitably leads to a bland solution. It will neither offend or inspire anybody. Unfortunately, to create a successful website you need to make tough choices that some will not like. A group approach does not lend itself to this.
A loss of control – It is easy for you to loss control in a group meeting. One-to-one meetings work better because you can divide and conquer. Only you know what the other stakeholders said. This puts you in charge and allows you to ‘cheery pick’ the feedback you receive. In a group meeting things can easily get out of hand and decisions are made without your buy-in.
The dominant individual - Every group has one or two dominant individuals. These are the people who bounce the rest of the group into agreeing with them, forcing their agenda through. A dominant individual drowns out quieter members, who become resentful later that nobody listened to them. Meeting with people individually prevents this because the dominant individuals cannot force their point of view on others or overwhelm quieter ones.

One cannot expect a larger organisation to run its website without some form of committee. However, there is no reason why that committee needs to meet as a group.

4. Target your influencers

Talking of dominant individuals, another successful tactic is to target influencers.

An influencer is somebody that others respect and follow. Their opinion is incredibly valuable and if you can sway them to your cause, others will fall into line. However, be careful not to confuse dominant people with influencers. A dominant person will ‘bully’ others into publicly agreeing with them. An influencer will fundamentally alter somebody’s attitude.

Identify who influences your decision makers and speak to them personally. This person might not even be a decision maker themselves, but they carry enough clout to make them worth your time.

When you meet with your influencers, really listen to what they have to say. They often have valuable insights which may change your strategy significantly. Do not go into a meeting with an influencer simply intent on pushing your own agenda. Instead try and shape your approach around their perspective.

If you get an influencer enthusiastic about your project it can make a huge difference.

5. Use third party experts

A variation on the influencers technique is to back up your ideas with third party expert opinion. This can be done in two ways…

Reference the work of a third party expert – For example, if you wish to discourage internal stakeholders from overwhelming users with options on the homepage, you might refer them to Steve Krug or Jakob Nielsen who have both written on the subject.
Hire a third party expert - I often find myself brought into companies simply to confirm what in-house staff have already been saying. Unfortunately, decision makers often doubt the opinion of their web team because they either undervalue them or feel they are pushing a hidden agenda. An independent expert can add creditability to your opinions.

Of course, for this approach to work the stakeholders need to respect the expert. There is no point referencing Steve Krug or hiring Jakob Nielsen, if the decision makers have never heard of them. It is often necessary to sell the credibility of your expert first.

6. Rely on evidence, not opinion

Sometimes it is better to avoid personal opinion entirely (even if that is the opinion of an expert). In such cases statistics can be your friend.

Nothing is more powerful for driving home a point than referring decision makers to Google Analytics. However web stats are not the only evidence you can draw upon. Others include…

Surveys and polls are an excellent way of getting feedback from your users that can then be presented to decision makers.
Twitter search and Google Alerts can be used to gauge how people view your site and brand. These can be powerful testimonials to present decision makers.
Heat maps can be used to take some of the subjectivity out of design.

Of course one of the most powerful evidence you can present is the results of usability testing.

7. Focus on the user

As website owners we know that a successful website is user focused. However, not all our decision makers will understand this and even those who do may get ‘distracted’ sometimes.

It is therefore important to constantly move our decision makers away from their own personal preferences and back on the needs of users.

User testing is one way of doing this. Being able to show decision makers how real users interact with your website is incredibly powerful. It helps them empathise with the needs of users rather than thinking only about their own agenda. Play them video clips of users interacting with your site or at the very least quote them the feedback of users.

However, even if you involve decision makers in user testing, they can still get caught up in their own agendas. One gentle way of preventing this is to word your questions carefully. When you need a decision makers response to something don’t ask…

What do you think?

Instead ask them…

How do you think users will respond to this?

This will keep them focused on the needs of users.

8. Control the feedback

As well as wording questions carefully there is also a need to control the feedback you receive. This is important if you want the decision makers to make considered decisions.

Take for example design sign off – never ask a decision marker if they like a design. It is too broad a question that will lead to a plethora of uninformed and ill considered responses. Instead ask them more specific questions such as…

Does the design conform to the brand guidelines?
Does the design meet the needs of our users?
Does the design emphasis the right content?
Does the design have a clear call to action?
Does the design fulfil our business objectives?

This prevents the decision maker from falling back on their gut reaction (i like it / I dislike it). It forces them to focus on the issues that define whether the design is successful or not and ignore personal preference for specific colours or layout.

Of course, sometimes you will not like the answer to these specific questions. When that happens you need to ask why.

9. Ask why

This is probably the most powerful of all the techniques I have listed here and yet by far the simplest.

When you face opposition to your plans, always ask why. Too often we switch to defensive mode and focus on better communicating our own position rather than understanding the opinion of the person opposing us. This is a mistake.

The question why is powerful for three reasons…

It informs – Often the objection raised initially is not the true underlying issue. By asking why you get to the root of the problem and that allows you to offer alternative solutions. Asking why ensures you have all the information required to deal with the issue.

It can confound – Most of us make decisions based on an intuitive leap. We do not always think through our decisions and so find it hard to articulate the underlying reason. By asking why you force people to stop and consider their logic. When they struggle to express the underlying reasons, they weaken their position.

It shows interest – By asking why you allow them to have their say. You demonstrate an interest in their opinion and establish empathy with their point of view.

Ultimately asking why avoids the disagreement from turning into an argument with entrenched position.

10. Avoid confrontation

I avoid confrontation at all costs. Going head-to-head with somebody especially in front of their colleagues achieves nothing. You can rarely get somebody to shift their position through confrontation.

Once a disagreement escalates into a confrontation, nobody can afford to ‘lose face’ by backing down. It becomes a matter of ego, where pride dictates the outcome. Your website will almost certainly be caught in the cross fire.

A better approach is to agree. The word yes can be immensely powerful. Whenever somebody suggests something to me, no matter how stupid, I will do the following…

Acknowledge and thank them for their input.
Say yes we could do that.
Go on to explain the consequences if we did.
Offer an alternative which could achieve the same aims.

In short I tend to go around problems rather than bashing my head against them. I always look to work with others rather than against them.

Conclusions

So there you go, 10 techniques for battling site bureaucracy. I do not claim these techniques are foolproof. Neither do I suggest they are always appropriate. However, they are useful techniques in your arsenal which you may want to call upon from time to time.

Finally, this is not a definitive list. I could have written more but then it wouldn’t have been a ‘top ten list!’ However, I would be interested to hear what works for you. Post your techniques in the comments.

Boagworld at SXSW

Posted in News on February 16, 2009 by Paul Boag

Once again myself and Marcus will be attending SXSW. However, this year we are organised and have some great stuff lined up for you!

SXSW is probably the biggest event in the web design calendar and so we are going to be there covering everything that is happening. If you are going to be there then we have a couple of chances to meet up. If not, we still have you covered!

Boagworld live show

The thing I am most excited about is the live boagworld show we will be recording from the floor of SXSW.

We are not exactly Diggnation, so do not expect massive crowds. However, it should be a nice opportunity for those Boagworld listeners at the conference to get together and harass Marcus and myself as we try to record the show.

My biggest fear is that nobody will turn up, so I am tempting you with a stunning line up of guests! As well as myself and Marcus there will be…

Andy Budd (Author of CSS Mastery)
Daniel Burka (Creative Lead at Digg.com)
Jeremy Keitth (Author of DOM Scripting and Bulletproof AJAX)
Joe Stump (Lead Architect at Digg.com)

The show will be mainly listener driven so come along with loads of questions. We will get through as many as we can.

Finally, if you are unable to make the live show, we will try our best to stream it live via uStream.

To reassure me that we will not be recording alone, please signup on upcoming!

Great British Boozeup

Those who have been at SXSW the last couple of years will be pleased to hear that the ‘Great British Boozeup’ is returning.

This is the third year ClearLeft and ourselves have thrown the Great British Boozeup and this time we are joined by Naklab. Together we will be treating our American cousins to a good old fashioned knees-up to a soundtrack of great British tunes.

For information on where and when the boozeup will occur, check out upcoming.

Boagworld SXSW coverage

Last but by no means least we have something for those of you not attending.

I know how annoying it can be when you are not attending a conference. You want to know the highlights but you do not want your RSS reader full of endless posts or your twitter feed overwhelmed by chatter.

That is why we have created a SXSW coverage page where we will live blog the entire conference (or as much as we attend). Hopefully this will keep you up-to-date without it becoming annoying!

View our SXSW live coverage page

Staying serious

Posted in Design on February 15, 2009 by Paul Boag

Where is the line between being serious about your creativity and allowing it to become too solemn?

I love the videos released by the TED conference. They have some of the most inspiring content presented by the most amazing people.

Recently I watched one presentation that really challenged me as a creative person. In it Paula Scher looks back at her life in design (she’s done album covers, books, the Citibank logo …) and pinpoints the moment when she started being really serious about having fun.

Her example encourages us keep our work fresh, innovative and anything but solemn.

Our First AIR App

Posted in Development on February 13, 2009 by Paul Boag

With Adobe AIR now up to 100 million downloads, being utilised by big name players such as the BBC and increasingly invading our desktop Headscape decided to give it a go.

This is a guest post by two of the Headscape developers – Craig Rowe and Dave McDermid

Setting up

Adobe Air is Flash + WebKit + SQL Lite on the desktop. As a Flash developer you can dive right in and use the Air extension for Flash to publish your beautifully crafted swfs and AS code into an installable cross platform desktop app. However, the flash projector has been around for a while doing similar things and we wanted to put our hard earned web development skills to productive use. So we went the HTML/Javascript route.

The SDK is free for download but Aptana provides a rather neat eclipse based IDE in which to work. Handily the new project wizard allows you to import a multitude of Javascript libraries making it incredibly easy to get a new project up and running with your preferred initial setup (we went for jQuery).

The Problem

To make the exercise worth while we needed a real world problem to solve. Trivial examples usually do very little other than increase your ability to copy/paste example code and do your best fireworks night ‘ooo’ ‘ahh’ impression at it. Instead, we chose to add to our server admin experience…

As loving, caring web developers we actively monitor all our servers, and most of our live websites. For a while this was a DOS script, this was then migrated to a Bash script on a Cron job. It worked great, but required a computer science degree to maintain. So here was our problem: we needed a pretty, maintainable and reliable app to monitor websites. All it had to do was let us know when one disappears or throws a nasty error.

Download and try our site watcher AIR application

The Journey

Step 1: The wireframe

A new Adobe AIR project in Aptana comes with an html file named after your application which acts as your main program window. Creating a basic layout with a few buttons, titles etc can be done in a snap. The html, css and javascript are dealt with in exactly the same way as if intended to be deployed as a website (with no browser compatibility worries as we are only targeting the Adobe AIR WebKit rendering engine).

Step 2: The magic

The wireframe identified the main viewer as comprising of an unordered list of sites, each with their current status and edit/check/remove links. This list needed to be persisted, but editable by the user.

If this was a website we may be looking to server side scripting and a database of some nature. However, we had only jQuery and the air libraries. Although SQL Lite was an option we decided it was an over complication for what is a relatively simple, first AIR app. So, knowing that we could use jQuery to manipulate a DOM and the air libraries to save and open local files we opted for XML as a data source.


<?xml version="1.0" encoding="utf-8"?>
<sites>
<site address="http://www.headscape.co.uk/" status="200" frequency="30">
Headscape&#146;s website
</site>
...
</sites>

Looking back into our application html file we can see that we are given a readLocalfile() function that returns the string contents. This can then be passed into a jQuery object and manipulated in the usual way.

[The canny among you will notice that this readLocalfile() function is merely a few calls to the flash filesystem classes (using the AIR aliases). In fact at some points I directly call the flash library rather than using the AIR alias. There’s no functional difference, I’m just used to the flash namespaces]

With this ability added to the jquery ajax capabilities the application flow could be easily envisaged as follows:

On DOM Ready read the local xml file
For each site element in the xml create an LI element with the appropriate display and action elements
Fire off a jquery ajax call for each site
Use the response code to formulate a class for the LI to change its display
Fire off any notifications if the response code has changed i.e. e-mail, notification window, twitter post
Set a timeout before checking again
On window close parse the unordered list back into xml and write it to the persistent file

The Stumbling Blocks

Viewing the source of an installed AIR app can be done by nipping into program files (or Applications for the MACs amongst us) and looking in the application name directory. Here you will see the html, css and javascript files that make up the app (so we can continue to learn from others deployments just as we would with a website).

A brief look at the sitewatcher source and the flow described above becomes immediately clear. ‘Sitewatcher.html’ is our main form and it includes script.js as the main driver of the application with the #sites ul as the main containing element. The rest is GUI. ‘PopulateUIfromXML()’ directly completes steps 1-2 and fires off the 3-6 process via ‘CheckSite()’. However dispersed within this are the unusual non-front end website development bits, so we’ll look at those now:

Acting as a System Tray App

Many AIR apps, particularly those to do with notification (twitter, yammer etc) seem to want to run as system tray applications, we were no different.

The process of doing so is relatively easy, and encapsulated in the appropriately named SetUpSysTray() function of script.js. Essentially what we need to achieve is an override of the minimise behaviour, the setting of an appropriate icon and the associated window toggling behaviour.

Window.nativeWindow gives us access to the OS window holding our html window, and we can listen to events on it in much the same way. ‘nwMinimized’ is set to fire on display state changing and, if being minimized, instead docks (hides) the window and prevents the default behaviour.


if(air.NativeApplication.supportsSystemTrayIcon)
window.nativeWindow.addEventListener(runtime.flash.events.NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, nwMinimized);
function nwMinimized(nativeWindowDisplayStateEvent) {
if(nativeWindowDisplayStateEvent.afterDisplayState == runtime.flash.display.NativeWindowDisplayState.MINIMIZED) {
nativeWindowDisplayStateEvent.preventDefault();
Dock();
}
}
function Dock() {
window.nativeWindow.visible = !window.nativeWindow.visible;
}

This works fine but on its own will actually just hide the window from view/the taskbar leading the user to have to use task manager to close it. To ensure that an icon for your application sits in the system tray we need to set an icon for the nativeApplication (the mere presence of which will cause windows to display the app in the systray).

Back to SetUpSysTray() and we’re using a content loader to load the icon graphic into memory, with an iconLoadComplete handler waiting to do the work:


var iconLoader = new runtime.flash.display.Loader();
iconLoader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, iconLoadComplete);
iconLoader.load(new air.URLRequest("../icons/AIRApp_16.png"));
function iconLoadComplete(event){
if(air.NativeApplication.supportsSystemTrayIcon){
air.NativeApplication.nativeApplication.icon.bitmaps = new Array(event.target.content.bitmapData);
air.NativeApplication.nativeApplication.icon.tooltip = "SiteWatcher";
air.NativeApplication.nativeApplication.icon.menu = new air.NativeMenu();
// Create Menu Items
var openCommand = new air.NativeMenuItem("Toggle");
openCommand.addEventListener(air.Event.SELECT,function(event){
Dock();
});
var sep = new air.NativeMenuItem("", true);
var exitCommand = new air.NativeMenuItem("Exit");
exitCommand.addEventListener(air.Event.SELECT,function(event){
air.NativeApplication.nativeApplication.exit();
});
// Add Items to menu
air.NativeApplication.nativeApplication.icon.menu.addItem(openCommand);
air.NativeApplication.nativeApplication.icon.menu.addItem(sep);
air.NativeApplication.nativeApplication.icon.menu.addItem(exitCommand);
}
}

We simply set the native application icon to be the bitmap data before finalising the sys tray setup by creating a menu to appear on click.

Note for MACs: The minimised event listener is not applied if the system does not support system tray icons. This is to avoid confusion on MACs where a minimise goes to the MAC dock anyway.

Notification Windows

So the app can now run in the system tray and use jQuery to check the sites listed in an XML file at regular intervals. However we need a process of notification. The App could be running on an actively used machine in which case we want messenger style pop-ups. Or it could be running on a separate machine/server from where we want it to send e-mail/other notifications.

In the case of window notifications we took a short cut and used some example code from Adobe Developer Center. This is encapsulated within the DisplayManager.js and Message.js files. Display Manager acts as a queue, dequeuing and displaying on a timed basis if the user is present. This is an important requirement as you do not want a user missing a notification prompt merely because they were away from their desk for a while. It can be easily achieved via the USER_IDLE and USER_PRESENT air events – in this case stopping and starting the poller.

‘CheckSite()’ simply queues message HTML when the response code received is different from the previously stored code. When the queue poller is running (the user is present) the message is dequeued and displayed via Message.js.

At this point it is worth remembering that notification windows are no different to any other native window. It’s just a name we’re giving to the way we are using native windows. They therefore have their own events, contents, position etc and this can be seen by the Message.js code where a new chromeless, transparent native window is created and its contents loaded from the message.html template.

The display process is then as follows:

Message.js stores the message content in a variable on the new window
MessageScripts.js, then running once the message.html dom is ready, sets a listener on the HTML_BOUNDS_CHANGE event before setting the message variable content as the body – ultimately firing the bounds change event
This event is handled by setting the native window height to match before firing the layoutComplete event
On hearing this Message.js makes the window visible, finds an appropriate resting position (in relation to any other messages) and animates it in.

E-mailing

A key feature of any site watcher is to let us know when something bad happens. The combination of emails and an email-to-text service allows us to be notified the minute we spot trouble. This was easy enough in the bash script, using sendmail on the Mac. Not so straight forward for an AIR app. We can’t run sys commands and there is no built-in SMTP server. The solution is to use sockets in AIR. A little hardcore, but it keeps the solution nice and tight.

Anyone who’s sent an email with telnet will know that the principle of SMTP is, as the acronym suggests, simple. Adobe gives us plenty of clues for opening sockets and listening for messages. All we had to do was make sure we sent the right info. There are some restrictions in opening sockets from scripts outside the application sandbox, but for our purposes it worked a treat. With a little trial and error we were firing off emails left right and centre.

The icing on the cake was adding twitter support. With a one-line AJAX call in JQuery and a little config it was a no-brainer. This allows us to keep an online audit in the form of a private tweet stream. For people who check twitter more frequently than their email, it’s handy for notifications. If Twitter let us UK folk receive updates via SMS again then we can ditch email-to-text in favour of Twitter.

Step 3: The makeover

One of the nice benefits to working in the web-kit world is being able to use some CSS3 styling such as rounded corners. So we went to town. The more design that is CSS based and the less that is image based the better.

JQuery UI allowed us to make the entire list sortable in a sweep of the mouse, and the prefs popup tabbed in a blink (suddenly there was heaps to customise!).

The End

Hopefully this post has given you an understanding of how quick and easy it really is to make a useful AIR application. We’ve shown how you can implement a system tray application that utilises notification popup windows and sends e-mails as well as uses local files as a data store. This is not intended as a best practice discussion. It was our first AIR app and developed in a very small amount of time as a proof of concept and so that we could share our experiences with you. We welcome any feedback.

Download and try our site watcher AIR application

152. War?

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

On this week’s show: Daniel Burka and Joe Stump from Digg discuss the supposed war between designers and developers. Paul talks about using twitter effectively and we ask ‘are you placing too much emphasis on your homepage?’

Podcast: Download (34.0MB)

Download this show.

Launch our podcast player

News and events

How to film video case studies

Increasingly your web strategy is about more than a website full of pretty pictures and well written copy. Video in particular is playing an increasing role, whether it is embedded in your website or shared via YouTube.

Video can be used in all kinds of ways from product demonstrations to viral marketing. However, a growing use for video is customer case studies.

This week 37 Signals have published a fascinating insight into how they created their customer case studies for Highrise. The article covers everything from…

How they chose who to interview
The way they shot the videos
What questions they asked
How they conducted the interviews
How they edited the videos
The time they spent preparing the whole thing

There is little written about producing quality videos and even less about customer case studies. Without a doubt these kinds of videos are extremely powerful and so it is great to read quality advice about their production.

Effective communication in web design

Smashing Magazine has posted an excellent article that I would highly recommend to all website owners. No, it is not my excellent Twitter article that I will cover later. It is actually an article entitled – Clear And Effective Communication In Web Design.

In essence it talks about how to communicate on the web through both copy and visuals. It is a comprehensive overview (if somewhat superficial) of all the key considerations of communicating effectively through your website.

The article focuses primarily on your website, largely ignoring broader communication issues. However it does tackle…

The different methods of communication – Images, text, titles, icons, design styling, colour, audio and visuals.
The challenges of clearly communicating – This includes the curse of too much copy, the need for personality and much more.
What you should be communicating – Your company vision, the websites offerings, the benefits to your users and calls to action.

It also nicely demonstrates how the design and copy work together to communicate your message. This is something I will be discussing with Jeffrey Zeldman in an upcoming show.

Do we place too much emphasis on the homepage?

Following on nicely from my recent post about where we invest our money, Christian Watson recently wrote about one of his clients who requested a homepage redesign.

In the article he writes…

Sure, I could refresh the colors and move some content around. But is this a good use of my time and her money when the home page represents 20-25% of page views?

It is a good question. Christian goes on to argue that we often place far too much emphasis on the homepage and that in fact it is little more than a gateway page to direct users to more important content.

He uses a nice analogy borrowed from Jared Spool. He compares the homepage with a hotel lobby…

When visitors arrive at your hotel, certainly they should find that the lobby represents the hotel favorably. It should be attractive, spacious, with elegant lighting, welcoming colors, and the odd feature here and there.

The lobby should make it easy for the visitor to orient themselves â€” to see where the front desk is and where the lifts are. It should make it easy for the guest to find out any important information at a glance â€” upcoming events or where the conference is being held.

However, hotels are ultimately judged by the quality of their rooms.

It is an excellent post that provides real food for thought.

Interview: Joe Stump & Daniel Burka on War Between Designers & Developers?

Paul: So I am really excited to have joining me today Daniel Burka and Joe Stump from Digg. Hello Guys

Daniel: Hello

Joe: Hey hey

Paul: I have had both of you on the show individually and Joe you were on not long ago were you really…

Joe: ermhh yes a couple of months ago maybe

Paul: What can I say, we cannot survive without you. So erm but I though lets bring the two of these wonderful people together and talk about designer,developer relationships and how the two of them get on together working at Digg. I mean I have to say this is just a rip off really isn’t it, it’s a rip of a panel you did. Was that Future of Web Design (FOWD) you did that panel?.

Daniel: Yes it was Future of Web Design in New York. I think we are rehashing the panel at South By South West (SXSW) this year so if anyone is there it would be awesome if you dropped by.

Paul: Excellent, I need to persuade you two to come along to the SXSW live Boagworld as well, but I will hassle of of air so that you can back out if you want to without committing yourself live in a interview.(Paul laughs). OK so lets kick off by talking about the designer and developer relationship and really I think that it strikes me there is a lot of mythology around this that you know designers and developers hate one another and I am not convinced it actually works like that in practice. When you guys did your panel at FOWD you actually were agreeing on a lot of points so I though we would start of by maybe highlighting some of the differences and then look at ways of working together er mm further down the line so lets talk about to begin with what you guys see as the main differences in outlook I guess between designers and developers. How do you look at the world in different ways, do you think? Maybe Joe do you want to kick us off. How do you think developers see the world differently to designers?.

Joe: Sure I think erh developers are definitely, their default kind of response erm is that they would rather, I always make the joke that coders by default are lazy, good coders are extremely lazy people that’s why they’re good coders because they want to automate as much of their lives as possible. Ermm so I think that erm developers tend to get a little complacent when it comes to the actual erm product sometimes because they are so busy and so interested in and so worried about the actual code or the more nerdy side of things you know like are we running the latest greatest versions of different softwares. Developers also tend to be a lot more interested in what the new hip nerdness is as opposed to what’s actually going to make the product better for users, you know so like I have been in product review meetings where people are like “well Why isn’t this new version of some strange bizarre open web specification that nobody has ever heard of ahead of some major forward user feature” . (laughs)

Paul: (laughs)

Joe: So ermm I think that that tends to be like a big difference. The designers you know it is their job to be curators of the website in my opinion and kind of move the user experience forward and often times developers don’t have a whole lot of interest in that. (laughs)

Daniel: On the flip side of that if we are both going to slag our own professions ermm I think designers are often you know pushing unrealistic goals. They are interested in building you know the perfect product and you know aiming straight for that instead of looking pragmatically at doing things in steps and figuring out what is technically possible and I think there is also a gap where designers can only see sometimes what features that they can view and don’t understand, don’t see the vision, of where developers can see you know amazing things they can you know do pro grammatically that designers just aren’t envisioning.

Paul: Yeah

Joe: I think that’s er is another key difference that I know that there is a lot of, there have been struggles and tensions between Daniel and I in the past over this idea of a holistic approach to design where where Daniel designs his vision and his vision is normally version 10.0 and I am looking at you know the technical roadmap and things that I need to do and like I am OK well lets talk about version 1.0 and then we can start talking about 2.0 like, developers are much more focused on an iterative process as far as releasing, you know like small chunks, reducing risk etc. etc. and designers tend to kind of like go well erm you know it is like I wanna build a pyramid it’s like great well how about first we start out by finding some limestone and then we work our way up to building a pyramid.

Daniel: So what you are saying is we have got a fantastic optimism. (laughing)

Joe: Yes

Daniel: But I think that’s partly it. Developers are very interested, as Joe was saying,in mitigating risk and in a lot of ways designers are very adverse to even thinking about risk and want to think about opportunity. So I think this is kind of the crux of the whole thing and what we are trying to talk about on that panel is that both of those views are super valuable and if you manage to find the right mix of those two things then you can develop a fantastic product that is both concerned about risk and pushes the boundaries of what is possible.

Paul: Mmmm I remember one point that came out from the presentation which is one that you made erm Joe which is about the dangers of if that mix is not right. It is always the designer that’s in front of the client or the boss or whatever ermm the kind of realism of the developer is kind of left out of the process and ideally the developer either needs to be involved in those kind of meetings or there needs to be a conversation that happens between the designer and the developer before anything is ever presented. Is that kind of, do you still feel like that is that still a valid point?.

Joe: Yeah, I feel that is a extremely valid point for two reasons erm and this is a discussion that Daniel and I just had yesterday in fact. The thing is as a developer the reason I want to be involved early on in the development or in the design and like development of the product phase you know when requirements are coming together and when you know the first kind of formations come out of the clays so to speak is because two reasons. One ermm and they all kind of come back to this same kind of problem, is that the designers and the product people don’t know the system, the actual bits and bytes that like you know go into making the product, as well as the developer like the data and the code and the actual systems and stuff like that and how they are put together. So Often times two things happen Daniel comes up with a design and there is like one small minute detail on the page that would require you know one of the largest computer farms in the world to calculate in real time. Whereas in lots and just as often as you know that happens where it is like Daniel I can’t calculate that number in any meaningful way on a regular basis so you gotta remove that. But just as often as that happens because of you know as a developer I have such like intrinsic knowledge of the relationships in the data and what data we are storing and stuff like that just as often I am like well why don’t we expose this data or do this and Daniel is like I did not know we could do that actually I totally would have done that if I had known that that was possible or feasible.

Daniel: Yeah and that’s, especially that side of things designers often hear the first part Joe is talking about, the you know well that is just not possible or more difficult than you think. Any designer that has worked with a developer has heard that aspect of it you know and that is of course very valuable but it is the other side of things that I think people fail to leverage most frequently is the ability of developers to see different patterns than you in the data and come up with those suggestions, you know it might still be your call whether or not that is a valuable thing for the user but just hearing these ideas coming out is is amazingly valuable. That has shaped a lot of Digg.

Paul: So would you say that is a kind of you know a common mistake that maybe designers make with developers that they don’t communicate enough with them ermm

Daniel: Absolutely

Paul: yeah

Daniel: Designers often see developers as mules its like I made this thing go build it and that is a bullshit attitude, its terrible.

Paul: mmmm what …

Daniel: Its not just designers either all product people have a tendency to do that. In some ways, as Joe was talking about developers being involved in the process, at Digg we’ve got a pretty good structure where design actually falls under the marketing team and in some ways I see design as a bridge between marketing and business development you know product interests and the development team. Because I am often sitting over here and I hear you know someone from business development or marketing throwing around an idea and I am like “I’m no developer but I have a good sense of what the developer sees as important and you’re talking crazy talk like that is going to be nuts” and they are about to go and pitch that to a potential partner and you know like every week I put the brakes on from that kind of thing I am like listen you need to talk to Joe you need to talk to a developer because that what you are talking about is going to be months of development and you are promising it to a partner in two weeks that’s nuts and so I like that in you in some ways the design team can often be a bridge between product marketing people and the technical teams.

Paul: Joe from your perspective what kind of, you know as your communicating with Daniel and other designers within digg looking back where do you think you’ve made mistakes in your relationship with designers?.

Joe: Ermm I mean the mistakes that I often make ,its a not even a mistake are I don’t wanna say are what we do are like flat out mistakes it’s just more ermm you know being a bit more reserved and not necessarily defaulting your answer to no. Err You know I think that Daniel often talks about how a natural tension between design and product and development is actually good for the product because you have eventually, as long as you can keep that at a good tension and not you know bad or where things are breaking but ermm I think often times developers are quick to say no. You know they will be sitting in a meeting and it is just immediately no I am not going to discuss that when in reality if they sat back and let the idea germinate you know they would, Its kinda weird because I have in a lot of meetings where things were, where the developers were like be oh my god that is an amazing product but we will never be able to build it and so it is like they want to build it but their default is to avoid risk so they say no. So a lot of the times when I talk with Daniel now and this is something I like quit doing I try not to say no unless it is just like blatantly in black and white no way that is possible kind of thing. I might let the idea germinate more I might no say no immediately I might want to go back and spend a couple of hours thinking about it if it is actually feasible because maybe you know. That’s what engineers love doing they love solving difficult problems and if you are saying no to difficult problems then you are failing at what your passion and hobby is. Ermm so I think that ..

Paul: There is also an aspect is there not of not just saying no but explaining why you are saying no so that the other party is kind of educated into the kind of problems you face so as Daniel said earlier that they can be the bridge to you know business development or whoever else.

Joe: Yeah absolutely, I am the king of analogies at this point ermm but the other thing that developers erhh, this is extremely common that they utterly fail at is that they think for some reason that they are like the target demographic of the product so they will come into a meeting and say this product will absolutely fail because it doesn’t have key binding so I can keyboard shortcuts it’s like nobody uses keyboard shortcuts like in the real world, they are all mice people like you know. It is stuff like that that a lot of the time developers are like “this will never work unless you have least 14 completely nerdy niche features in it” you know and I think developers too often you know they do that and that is just silly.

Daniel: Hey guys that’s been a special problem at digg,since we started of as the pure technology side so it was seen as by developers for developers and you know we have obviously branched out from there and now we have got other interests I want to make sure peoples mums can use the website and that’s you know certainly a , you make different choices based on that.

Paul: I mean it is very timely from my point of view to have this interview with you because on Friday we had a internal meeting in Headscape where we talked about all kinds of production things and one of the things that came out of the development team was this desire to be involved in the process more and err to have their say more and just to be included earlier. So I am quite interested in you know because obviously you guys have been working together for a long time what kind of practical advise would you give to a , maybe this is just a question for me and not for anyone else, but what kind of practical advise would you give for designers and developers working together within the organisation. How can that relationship work better?

Daniel: Yeah, absolutely involving your development team earlier in the process but that doesn’t necessarily mean sitting around brainstorming right at the beginning of a feature with them. I mean I try to sit down work out an idea get it 20% of the way there, you know work out some of the basic issues figure out what this thing really means what’s at the core of it you know it might be ten different features together but what are we actually trying to achieve with it right so at least get that far even throw down so basic wire frames or some really basic comps and then present it to the developers its like listen this isn’t just an idea I came up with you know last night I just want to spill my entire brain out in front of you it is something at least I have thought through you know I have put a few things through my brain and now here is this totally unformed, not totally unformed, slightly formed idea but it is not baked you know don’t wait until you have got it baked and then you are so disappointed when the development team says well that’s not possible or have you really though about this and you have got this complete package already made up in your mind but come to them with a least you know the kernel of the thought out idea and get them to poke holes in it. Get them to push it in other directions and show you what else you could be doing and then go back to the drawing board again.

Paul: What about from your point of view Joe?

Joe: Well yeah, So ermm I agree with Daniel in some sense on that I think it is crucial to before you take it to developers to formulate a cohesive problem or hypotheses. Like if you come to the developers with a half baked problem that you are trying to solve you are going to get like, they are just going to run wild with it and it is like you know difficult sometimes to keep developers focused when they get excited about a problem. So have a formulated problem that you know you have a small idea of how you are going to fix but not fully baked. The other thing too and this goes on both sides of the aisle it shouldn’t be get developers plural involved and it shouldn’t be get. like a lot when you are first germinating that idea and you haven’t really moved it forward start small and then continuously expose it to more and more people errmh because I find if you involve too many people early on in a the process whether it is designers, developers, product people things tend to , you tend to loose focus quickly and everyone wants you know it’s kind of like port barrel spending and major bills its like everyone wants to piggy back extra features and stuff and pet projects that they have wanted for so long into like some major new feature.

Daniel: It is just simple death by committee

Joe: Right

Paul: Yeah Yeah OK That’s interesting a little random question I remember going to a talk once where, and I can’t remember who it was who was giving it, where they suggested that errmh designers and developers swapped roles for a while. Where you try and sit in the other persons shoes and I was just interested whether you two had tried anything like that?

Joe: That would be disastrous for me. (laughs)

Daniel: I I mean I appreciate development roles and I am you know somewhat technical for a designer but yeah I know I have never done that but I have always worked so closely with the development team like at silverorange where I worked previously to digg there was only ten of us and I sat in a room with developers all the time. I worked in their code with them and worked on problems as a group so I think I, you know I have never worked in a place like say you worked in a big enterprise and your in this classic where designers are in one office and developers are in the other office and you toss stuff over the wall yes then I think that would hold value at least go and sit in the other office, go work in the other office for a few months just hear the other discussions that are going on because there are a totally different set of concerns a totally different set of values than what you are doing and if you don’t at least appreciate and understand that, and not just understand it so you know what you are fighting against but understand it to know what is important and how you can work with it then you know you would be really missing out.

Joe: I think I am ermhh I think I am kind of spoiled at Digg because you know I work with two of the webs brightest, you know Daniel and Mark Trammell as well so I actually push back on my developers pretty frequently where they you know we will leave a meeting and they are like I really really completely disagree with what Daniel or Mark are doing with the design and you know I tell them all the time like look you are not a designer and you definitely not at the level that those two are at and you sometimes have to defer to them and trust that they are doing their job and they are doing it well you know and ermhh I think developers don’t do that often enough they make these assumptions that you know the arty-farty designers are doing stupid shit again and that’s not the case. I mean they would not be especially where we are at at Digg and what not I mean Digg is able to be very picky with who they bring on and the people Daniel has brought in to design are extremely competent at what they do err so I am probably not qualified to answer that question because I am so spoiled at Digg but that is a common problem I see from developers where ermhh they don’t let the designers do their job and they try and be designers when in reality you know they do not have the experience or the expertise so.

Paul: Lets talk about conflict resolutions, sounds very grandiose but basically you know how do you go around resolving a situation where you know OK you kind of respect each others skills and you respect each others competencies but you know where some feature is suggested by Daniel and you know and you Daniel from your point of view it is absolutely core to what you are trying to achieve you know it is extremely important and then from a technical angle Joe it just seems incredibly complex and very very difficult. How is the eventual decision made as to whether that feature should be implemented and in what way it is implemented? How do you go about resolving that difference?.

Joe: Ermhh Well I mean I think as far as making the decision whether or not the feature makes it in, because there is actually two possibilities when it comes to the conflict resolution. Whether or not a feature actually makes it into the product and in what capacity does that feature make it into the product and I think in the former whether or not the feature actually makes into the product if Daniel comes to me and he’s resolute like this feature has to be in the product the feature is going to be in product. I am always going to defer to Daniel on on, if he feels that strongly and is that passionate about it you know and it is not something completely hare-brained like I want magic ponies to come flying out of the screen I am going to defer to his expertise on the fact that feature needs to be in the product. Where the conflict resolution comes into it is what capacity is that feature going to come into the product like a perfect example of I think of something where there has been we have had a recent discussion at Digg and where this has happened we have, and I talked about this probably in our last talk but, there are these little green badges on the digg buttons and they indicate one of your friends has dugg that story and when you hover over the digg button it shows like a little sample of the people that have dugg it. Ermhh So those were causing significant strain and problems with our systems and our code and on our databases so I came to Daniel and of course again as my risk aversion developer brain was coming to Daniel I was like Can we axe this feature until we can figure out how to like fix it. He was like “No” that feature cannot absolutely be axed and then we came to a resolution which was a short term solution until we can get a better solution in place where operations now have knobs they can dial down so the green badges don’t show up on stories older than 48hrs, they don’t show up on stories that have more than say 5 or 600 diggs and stuff like that. So the conflict resolution came in basically making trade-offs in how that feature is surfaced in works ermhh at our scale more often than not what that means is that Daniel has to give up the notion that everything is in real time. The feature will work it is just that it may take you know thirty seconds to a minute for an action to be distributed across the entire system, that is probably more how things are now at Digg so.

Paul: What about from your point Daniel, when do you back down over something and when do you keep pushing on it? How do you decide you know how serious Joe is about something and whether you should keep pushing or not?

Daniel: Right I mean it kind of comes down to you know when I am looking at the product I am not thinking of any one feature, I am thinking about the whole set and I want it all to work together and so you know I know I want to push out six different features this month and if I push and push Joe to do the one really hard one well that is going to affect the other five I wanted to get done. So any feature is tied to other features and it is also based on a time line if I want something done in a certain time line and that’s just not possible well then I have to start making compromises so you know you have to be realistic and then at the same time you have to realise developers work well with shame and so if you tell a developer well I bet a good developer could do that (All laugh) they will go back to their cube grumbling at you and figure out a more efficient way to do it.

Paul: OK. So now we are getting into the realms of how to manipulate each other.

Daniel: Absolutely.

Joe: That’s definitely err one that I agree does work but is not a trick you want to pull out of your bag too often.

Daniel: No it is the same with designers too, it is like I want to do this really complex thing, no way I can explain that to users in a way they will understand. “I thought you were good” arhh shit I will go back and try that again.

Paul: That is quite interesting what you just said there because so far we have talked very much about you know designers initiating features and that kind of stuff I mean are there situations where the developer is the one initiating features you know just said there a developer wanted to do something really cool and you said you couldn’t explain it. Does it run that way as well? or is it always the designer who drives first?.

Daniel: No Absolutely that happens at Digg, it happens sometimes at Digg so Joe yesterday sent me an email that had two big feature ideas in it. They may not be things we implement this month but maybe later on this year. I was looking at them and you know it is easy to disregard well he is a developer he does not understand what’s going on with the product but you look at the ideas and they are strong and they fit in with what we are doing and now I am trying to figure out you know how they make sense in the big picture I guess. So we have got a brilliant development team a lot of people over there with great ideas and we try to sit down, you know I guess Kevin has been doing those where we do meetings once a month I guess where developers if they have been working on a side project you know something they have always wanted to build into Digg they can present this at the Digg ideas meeting.

Paul: Ah OK

Daniel: A bunch of those products will make it into the full Digg I mean its awesome these brilliant people go and throw around crazy ideas and show you what is possible.

Joe: I think err yeah I mean I agree with that you definitely have, it is a two way street erm largely stuff comes from product at this point the Digg ideas meetings is definitely helping that you know open that up and kind of what I would call level that playing field a bit. But one of the things I think developers are in a in a unique position just like Daniel I work with people across the entire companies so I know initiatives that are going on in marketing I know initiatives that are going on in PR and biz dev etc. and you know if nothing else developers are very good about noticing and pointing out and discovering patterns and err a recent product that made it out that err was a developer initiated product was Digg dialogue because basically I noticed this common pattern where business development and Marketing and PR were setting up interviews and then like reaching out to people to like conduct interviews using the Digg engine kind of thing and I was why don’t we bake this into like a cohesive feature that’s turnkey because you know business development like Daniel was saying earlier lots of times they are just making these one off deals you know and they don’t really recognise when there is a product to be had there erm so that is another one that recently went out. It was like I recognised a pattern and baked this into something cohesive and move it forward.

Daniel: That is a good example of where we are being lazy some people want to do this one off thing over and over again and it is a bunch of work to don it each time well like we will just build a system to do it and we won’t have to do all the work every time. It was great.

Paul: OK that is really good lets leave then with one final question or one thing from each of you. Which is if you could give you know one piece of advice to either designers or developers on how to kind of interact with their counterpart what would that one piece of advice be?. Lets kick of with you Daniel what would be your one piece of advice to designers about dealing with developers?.

Daniel: My one piece of advice would be to see the big picture, you know aim for version 10 like we were talking about earlier and know what you want to build in the future but be realistic enough to back it up and build it in stages. You know waiting and building a feature over six months and eventually launching it is a terrible way to develop and it’s a terrible way to design having an idea of where you want to be in six months but realising in one month increments is so much better you’ll end up in a different place but at least you know where you are heading and you can adjust that goal as you go forward

Paul: Yeah. Brilliant. Joe what about you?

Joe: Ermhh I would say to the developers out there that there is different shades of no ermhh that you know there is the, the default should not always be no and remember what I said about the conflict resolution you should be deferring to the people that are experts in their field by default for the most part and to work on compromise in how the feature operates and make your concessions and have them make their concessions rather than just defaulting to saying no to the entire feature.

Daniel: And as a developer push to be involved early in the process, even at Digg we struggle with that a lot and as a designer I appreciate when developers want to be involved I want to hear their opinions you know it is fun to have them involved I hear all kinds of crazy stuff I never even considered that’s awesome.

Paul: Excellent. Thank you so much guys that was really good I appreciate you coming back on the show yet again. It was really good to get your perspectives together on that relationship because it is one a lot of people struggle with. So it is good to hear that it can work most of the time. Thanks for your time

Daniel: Thanks for having us on Paul

Joe: Bye

Thanks goes to Shaun Hare for transcribing this interview.

Listeners feedback:

With everybody from Britney to Obama now on Twitter it is safe to say the social networking platform has gone mainstream. But what does this mean for the service and how can we as website owners use it? Read More

10 harsh truths about corporate websites

Posted in Web strategy on February 11, 2009 by Paul Boag

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

Most of the clients I work with at Headscape are larger organisations – Universities, large charities, public sector institutions and large companies.

Over the last 7 years I have noticed certain reassuring misconceptions within these organisations. The idea of this post is to dispel these illusions and encourage people to face the harsh reality.

The problem is that if you are reading this post you are probably already aware of these things. However, hopefully this article will be a useful tool for convincing others within your organisation.

Anyway, here are my 10 harsh truths about larger websites.

1. You need a separate web division

In most organisations I work with the website is managed by either the marketing or IT department. However, this inevitably leads to a turf war and the site becoming the victim of internal politics.

In reality running a web strategy is not particularly suited to either group. IT maybe excellent at rolling out complex systems but they are not suited to developing a friendly users experience or establishing an online brand.

Marketing on the other hand is little better. As Jeffrey Zeldman puts it in his article ‘Let there be web divisions‘:

The web is a conversation. Marketing, by contrast, is a monologue… And then there’s all that messy business with semantic markup, CSS, unobtrusive scripting, card-sorting exercises, HTML run-throughs, involving users in accessibility, and the rest of the skills and experience that don’t fall under Marketing’s purview.

Instead the website should be managed by a single unified team. Again Zeldman sums it up when he writes:

Put them in a division that recognizes that your site is not a bastard of your brochures, nor a natural outgrowth of your group calendar. Let there be web divisions.

2. Managing your website is a full time job

Not only is the website often split between marketing and IT, it is also normally under resourced. Instead of having a dedicated web team, those responsible for the website are often expected to run it alongside their ‘day job’.

Where a web team is in place they are often over stretched. The vast majority of their time is spent on day to day maintenance rather than longer term strategic thinking.

This situation is further exaggerated because the people hired to ‘maintain’ the website are junior members of staff. They do not have the experience or authority to push the website forward.

It is time for organisations to seriously investing in their websites by hiring full time senior web managers to move their web strategies forward.

3. Periodic redesign is not enough

Because corporate websites are under resourced they are often neglected for long periods of time. They slowly become out of date both in terms of content, design and technology.

Eventually the site becomes such an embarrassment that management step in and demand it is sorted. This inevitably leads to a complete redesign at considerable expense.

As I point out in the website owners manual this a flawed approach. It is a waste of money because when the old site is replaced the investment put into it is lost. It is also tough on cash flow with a large expenditure happening every few years.

A better way is continual investment in your site, so allowing it to evolve over time. Not only is this less wasteful it is also better for the users as is pointed out in Cameron Moll’s post ‘Good Designers Redesign, Great Designers Realign‘.

4. Your site cannot appeal to everyone

One of the first questions I ask our clients is ‘who is your target audience?’ I am regularly shocked at the length of the reply. Too often it includes a long and detailed list of diverse people.

Inevitably my next question is which of those many demographic groups are most important. Depressingly the answer is that they are all equally important.

The harsh truth is that if you build a site for everybody it will appeal to nobody. It is important to be extremely focused in your audience and cater your design and content around them.

Does this mean you have to ignore your other users? Not at all. Your site should be accessible by all and should not offend or exclude anybody. However, it does need to have a clearly defined audience that the site is primarily aimed at.

5. Your site is not all about you

Where some website managers want their websites to appeal to everybody, others want it to appeal to themselves and their colleagues.

A surprising number of organisations choose to ignore their users entirely and build their websites entirely around an organisational perspective. This typically manifests itself in inappropriate design that caters to the managing directors personal preferences and content full of internal terminology and jargon.

A website should not be about pandering to the preferences of staff but about meeting the needs of users. Too many designs are rejected because the boss doesn’t like green. Equally too much website copy uses acronyms and terms that are only used internally within an organisation.

6. Design by committee brings death

The ultimate expression of a larger organisations approach to website management is the committee. A committee is formed to tackle the website because internal politics demand everybody has their say and all considerations are taken into account.

To say that all committees are a bad idea is naive and to suggest that a large corporate website could be developed without consultation is fanciful. However when it comes to design, committees are often the kiss of death.

Design is subjective. The way we respond to a design can be influenced by culture, gender, age, childhood experience or even physical conditions (such as colour blindness). What one person considers great design another could hate. This is why it is so important that design decisions are informed by user testing rather than personal experience. Unfortunately this approach is rarely followed when a committee is involved in design decisions.

Instead, design by committee becomes about compromise. Because different committee members have different opinions about the design, they looks for ways to find common ground. One person hates the blue colour palette while another loves it. This leads to design on the fly when the committee instructs the designer to ‘try a different blue’ in the hopes of finding a middle ground. Unfortunately this can only leads to bland design which neither appeals to, or excites, anybody.

7. You’re not getting value from your web team

Whether they have an in-house web team or use an external agency many organisations fail to get the most from their web designers.

Web designers are much more than pixel pushers. They have a wealth of knowledge about the web and how users interact with it. They also understand design techniques including grid systems, white space, colour theory and much more.

It is therefore wasteful to micro manage them by asking for ‘the logo to be made bigger’ or to ‘move that 3 pixels to the left’. By doing so you are reducing their role to that of software operator and wasting the wealth of experience they have.

If you want to get the maximum return from your web team present them with problems not solutions. For example, if you have a site aimed at teenage girls and the designer goes for corporate blue, suggest that the audience might not respond well to the colour. Do not tell them to change it to pink. That way the designer has the freedom to find a solution which might be even better than your choice of pink. You allow them to solve the problem you have presented.

8. A CMS is not a silver bullet

Many of the clients I work with have amazingly unrealistic expectations about content management systems. Those without one think it will solve all of their content woes, while those who do have one moan about it because it hasn’t!

It is certainly true that a content management system can bring a lot of benefits. They…

reduce the technical barriers of adding content,
all more people to edit and add content,
facilitate faster updates,
allow greater control.

However, many content management systems are less flexible than their owners wish. They fail to meet the changing demands of the websites they manage.

Website managers also complain that their CMS is hard to use. However, in many cases this is because those using them have not been given adequate training or are not using it regularly enough.

Finally, a content management system may allow for the easy updating of content, but that does not ensure it will be updated or even that the quality of copy will be maintained. Many content managed websites still have out of date content or are filled with poor quality copy. This is because the internal processes have not been put in place to support the content contributors.

If you are looking to a content management system to solve your site maintenance issues you will be disappointed.

9. You have too much content

Part of the problem with content maintenance on larger corporate websites is that there is too much content in the first place. Most of these sites have ‘evolved’ over years with more and more content being added. At no stage has anybody ever reviewed that content and asked what can be taken away.

Many website managers fill their sites with copy nobody will read. This happens because of:

A fear of missing something – By putting everything online they believe users will be able to find whatever they want. Unfortunately, with so much information being made available, it is hard to find anything.
A fear users will not understand – Whether it is a lack of confidence in their site or in their audience, many website managers feel the need to provide endless instructions to users. Unfortunately, users never read this copy.
A desperate desire to convince - Many website managers are desperate to sell their product or communicate their message. Text becomes bloated with sales copy which actually conveys little valuable information.

Steve Krug in his book ‘Don’t make me think’ encourages website managers to ‘Get rid of half the words on each page, then get rid of half of what’s left’. This will reduce the noise level of each page and make useful content more prominent.

10. You are wasting money on social networking

I have been encouraged that increasingly website managers are recognising that a web strategy is about more than running a website. They are using tools like Twitter, Facebook and YouTube to increase their reach and engage with new audiences.

However, although they are using these tools, too often they are doing so ineffectively. Corporate twitter accounts and posting sales demonstrations to YouTube miss the essence of social networking.

Social networking is about people engaging with people. Individuals do not want to build relationships with brands or corporations. They want to talk with other people. Too many organisations are throwing millions into facebook apps and viral videos when could be spending that money on engaging with people in a transparent and open away.

Instead of having a corporate twitter account or indeed even a corporate blog, encourage your employees to start tweeting and blogging themselves. Provide guildelines on acceptable behaviour and the tools they need to start engaging directly with the community that surrounds your products and services. This not only demonstrates a commitment to your community but also a human side to your business.

Conclusions

Large organisations do a lot right in the running of their websites. However, they also face some unique challenges that can lead to painful mistakes. Resolving these problems will involve accepting mistakes have been made, overcoming internal politics, and changing the way you control your brand. However, doing so will give you a significant competitive advantage and allow your web strategy to become more effective over the long term.

For more information on how you can make your site more effective read the Website Owners Manual or discuss your site with Paul personally.

There is a followup to this post entitled ‘10 ways to battle site bureaucracy.’ Check it out!

Why speculative design is wrong

Posted in Design on February 6, 2009 by Paul Boag

Many web design agencies are refusing to do unpaid design work before a contract is signed. This is not because it is damaging to them. It is because they believe it is damaging to their clients. But why?

On the surface asking a web design agency to produce some design concepts before you sign on the dotted line appears to be a good idea. After all, it allows you to assess the quality of their design work and see whether they have understood your brief.

However, if you scratch the surface of this once common practice, you quickly expose the flaws. Here are just five…

1. It costs everybody money

In order to remain in business every company needs to recover their cost of sale. This includes web designers. As speculative work is part of the sales process, they ultimately have to charge you for it. The web designer is forced to roll the cost of that work into the project if they win.

However, it is worse than that. The web designer also has to recover the cost of speculative design done for jobs he did not win. This means that if you choose to work with an agency that produces speculative design, you are paying for their failed sales pitches! Why should you be paying for other people’s design work?

2. It is about selling not delivering

As somebody who used to produce speculative designs for years, I can tell you that doing this type of design work is not about delivering a solution the client actually needs.

Speculative design is about impressing the client and creating the ‘wow factor’. The target audience is the client and not the end user.

Being a good web designer is about encouraging the client to make tough choices. A good designer will challenge your preconceptions and suggest better ways of meeting your business aims. However, they are not going to take that risk in the sales process. They will play safe, showing you what you want to see, rather than telling you what you need to hear.

The danger is that if you then hire this company the speculative design is adopted for your site. Ultimately you end up with a solution that fails to meet your businesses needs.

3. It is wasteful

Even worse than actually using a piece of speculative design is throwing it away. I have worked on many projects where the design work created as part of the sales process is discarded on project commencement.

What was the point of producing a piece of design only to discard it? Because ultimately you (the client) are paying for the design it is absurd that you would then choose not to use it.

Of course the reason you discard it, is because it is not fit for purpose. Not only was the design was created to sell, it is also largely uninformed.

4. It is uninformed

No matter how good the brief you distribute to agencies, they are still not going to have all the facts.

Good design comes from being well informed. The designer needs to understand business objectives, success criteria, brand personality, competition and numerous other factors in order to provide the right solution.

Most of all the design needs to emerge from an understanding of your users. Until the designer can interact and empathise with your users, he can produce nothing more than a superficial solution.

5. It ignores the collaborative nature of design

Finally speculative design ignores the collaborative nature of the design process. Good design is not just about a designer having a moment of inspiration and producing a master piece. Design is not the same thing as art.

Design is a collaborative process between the designer and the client. The designer may have the expertise in design aesthetics and usability, but the client knows their business and target audience.

If the designer works in isolation he cannot hope to produce a rounded design. Without mood boards, sketches and initial concepts there is no dialogue between client and designer. The design will only tell half the story.

Example Mood board

To request speculative design is to deny your own importance in the process.

The alternatives

So where does that leave you? If you should not ask for speculative design, how then can you assess the design skills of agencies?

The answer obviously lies in their portfolios. However, in my opinion it is about more than just looking at ‘pretty pictures’. In order to know whether a design has been successful you need background information.

I recommend that where a portfolio piece is relevant to your sector or project, you request the contact information of the client. This provides you with the opportunity to speak to that client and find out how well the design fulfils their business objectives.

Speaking to the client also gives you the opportunity to find out more about the designers. Did they understand the brief? Did they provide positive suggestions? Did they deal with criticism well? Were they flexible and understanding of broader objectives?

Ultimately there is far more to be learned by talking to existing clients than requesting speculative design.

10 things a web designer would never tell you

Posted in Design on February 5, 2009 by Paul Boag

These arty-farty web designers are always telling you how your site should look. Don’t listen to them! Don’t they know the customer is always right? Here are 10 things a ‘good web designer’ would never tell you about choosing the perfect design.

Working with web designers is a nightmare. You will never meet a more opinionated bunch of snobs. They are always going on about ‘white space’, ‘composition’ and how they went to art college (like that counts as a proper education!). When it comes to choosing the design of your site, they are the last people you should listen to.

What follows are 10 things you need to know about managing a web design project, that no web designer will ever tell you!

1. Always request speculative design up front

Before you pick which web designer to work with make sure they submit some designs for your site upfront. Whatever you do, don’t pay for this work. If they really want to work with you they will swallow the cost.

Some of them might start bleating about not doing ‘speculative design’ and that only designers desperate for work would do design for free. Personally I ignore this BS. If they are ‘so successful’ that they can’t spare the time to do unpaid work for me, then I don’t want to work with them.

What is great about speculative work is it is not constrained by ‘understanding the business’ or ‘user feedback’. Its all about creativity. Surely a good web designer can come up with great work out of thin air, even if they don’t know who the target audience is and have never spoken to the client. I want something that makes me go wow. Who cares if it ‘fulfils my business objectives.’ The more bells and whistles the better!

2. Don’t get hung up on end users

Web designers are always obsessing about the end users. They worry that users won’t like this or that they won’t understand that. Its pathetic.

People like to be told what to do and they will ultimately follow your lead. I once had a web designer complain because I wanted to collect users phone numbers on a sign up form for our newsletter. Apparently ‘users’ don’t like being asked for unnecessary personal information. Can you believe it! How the hell am I going to cold call these people if I don’t have their phone numbers. Sometimes you wonder how these idiots survive in business.

Instead of focus on user needs, focus on what you can squeeze out them. Times are tough these days and so you need to maximise your returns on every one of these sheep. You have to be tough in business.

3. Rely on your gut instinct, not testing

Talking of users – what is this obsession with user testing? Just sounds like a way for web designers to charge more money if you ask me.

After all you have probably been working in your job for years. You know all there is to know about your audience, right? Even if you did run user test sessions, stakeholder interviews or whatever other made up technique is the latest fashion, its not going to tell you stuff you do not already know.

Admittedly, these sessions occasionally turn up stuff you might not expect, but can you really trust the results? Surely your years of experience count for more than a few hours of testing.

Of course, the other problem is that user testing is massively expensive. I heard from a friend that it involves usability labs, videos, two way mirrors and ‘facilitators’ (whatever those are). That all sounds pricey to me!

Some web designers will tell you that they do it by going into user’s homes and talking with them in their own environment. They justify this by saying you learn more because the user is relaxed and you can see where they live. Personally, it doesn’t sound very professional and if it isn’t expensive, how could it possibly give good results?

4. Form a committee to provide feedback

Admittedly I maybe sounding a little arrogant, but I really am not. I think it is important to get the opinions of other people. I just think web designers are not the people you should be asking. They live in a techy bubble and do not understand what it is like to be an ordinary user like us.

I suggest forming a committee to approve any designs produced. After all web designers keep telling us that design is subjective. That means you shouldn’t rely on the opinion of just one person (especially if that person is a designer). What you need is a committee to thrash out what the site should look like.

Ideally you would call a meeting with the designer in the room and get them to produce something there and then under the direction of the committee. However, most designers tend to get ‘emotional’ when you suggest that. So instead I recommend giving them the freedom to produce something themselves and then discuss it as a group.

Now inevitably this will lead to disagreement. Some people will like the colour, others will hate it. This is natural. What you need to do is seek a compromise that will please everybody. If you can have the designer on hand to try out new ideas in the meeting this will really help. Before you know it you will have a design everybody can tolerate (although admittedly not everybody will like it).

5. Become obsessed with detail

“The devil is the detail they say. Nowhere is that more true than on a website. Unfortunately you cannot rely on a web designer to have that attention to detail. Its hardly their fault. They are ‘arty’ people after all and their brains just don’t work that way.

If you want your design to be ‘just so’ you will need to micro manage every aspect of the design process. Don’t be afraid to tell your designer exactly what you need them to do. Be as specific as possible. After all, they call themselves pixel pushers.

Also insist on consistency across all browsers. Web designers tend to be sloppy in this area. It might look great in Safari (apparently this is a browser – who knew!) but in Netscape 4 it looks awful. They will give you some rubbish about not all browsers being capable of rendering modern design. They will say that as long as it is usable on all browsers, that is what matters. The hell it is! You don’t put up with that kind of rubbish in print design, so why should you on the web?

6. Enforce corporate style guides to the letter

Your organisation has a corporate design guide for a reason and yet web designers think they can flaunt the rules. They will talk about the differences between print and the web. They will go on about colour on screen, web typography and dots per inch. However, the real reason they want to ignore your guidelines is because their egos will not allow them to work within limitations.

You must take a firm hand over this issue and stick to the letter of the law. Enforce pantone numbers and ensure they use corporate typefaces. They might mutter something about limited fonts on the web but this is just not true. I know for a fact that sites built in flash can use any font you want. With that in mind I always recommend that sites are built entirely with Adobe Flash.

Oh yes, and watch out for abuse of the logo. Most style guides say that the logo must have a certain number of millimetres around it to allow ample white space. I recommend taking a ruler and measuring the space around your monitor on screen. Better still, print out the design so you can be even more accurate.

7. Fit as much on the homepage as possible

Let’s take a moment to discuss the design of your homepage in particular.

Without a doubt the homepage is by far the most important page on your site. If I look at my own website statistics the majority of people who come to my site never get further than the homepage (I have no idea why this is the case!) This is a problem.

The solution is obvious when you also consider the importance of minimising the number of clicks a user has to make to reach content – Put as much content as possible on the homepage.

This also solves the problem of everybody within your organisation wanting homepage real estate. Instead of endlessly discussing whose content is most important, simply put it all on there.

Of course with so much content on the homepage people might complain their content is lost in the crowd. The best solution in such situations is to either make it bigger or animate it. I find flashing text particularly effective.

8. Ensure all content appears above the fold

Unfortunately you are limited in the amount of space available on the homepage. This is because all content has to sit above the fold.

The fold refers to the point where users have to start scrolling. As we know users do not scroll. In 1994 Jakob Nielsen found that only 10% of users would scroll when presented with a web page. 15 years on I see no reason why this would have changed.

Some designers will tell you that the fold is a myth. They will argue that it does not exist because different browsers, resolutions and toolbars all effect the vertical available space. All I know is that on my computer I have 470px of vertical space before I have to start scrolling. I am a fairly typical user and so you should ensure all content is within this area.

The only exception to this rule is if your boss has a different amount of vertical space. If he is going to be looking at the website I suggest designing for his browser. Alternatively simply print out the site for his approval.

9. You only need to test in Internet Explorer 6

Web designers like to claim they need to spend hours testing on every browser combination. However, in reality this is just another way to extract more money from you.

All you really need to do is build the site so it works on Internet Explorer 6.

Internet Explorer is the most dominant browser having by far the largest market share. Although there are different versions of IE most companies run IE6. As corporate customers are the people with the real money you should concentrate your testing on their browser. Also surely if it works in IE6 it will work in IE7! You can trust Microsoft not to break the web.

If you want to be super cautious, add a message to your site telling users it is optimised for internet explorer. Users can then download that browser if they want to see your site.

10. SEO is more important than design

Getting the design of your website right is important. However it is no use if nobody sees it. Your number one priority has to be driving traffic to your site.

The best way to do this is through search engines. Fortunately there are a plethora of tricks and techniques to fool Google into ranking you highly. You can use hidden text, cloaking pages, redirects, doorway pages and keyword stuffing to force you up the ranking. Google kindly list these techniques in their Web Master Guidelines.

The problem with some of these techniques is that they undermine the design and content of your site. They can also affect the usability and accessibility. However, this is a sacrifice worth making in order to keep those new users rolling in.

Some web designers place a higher emphasis on repeat traffic. However, in my experience it is hard to get a user to return a second time. This is almost certainly because they have seen everything already. Why would they come back? Concentrate your efforts on creating a steady stream of new users.

Conclusions

If I could leave you with a single thought from this post it would be this – your web designer does not work with you, he works for you.

You need to take control of the design process. Its your site and you should get the design you want. The role of the designer is to implement your idea. Do not allow him to drag you down into endless discussions about ‘users needs’, ‘accessibility’ and ‘usability’. These are all distractions from the primary aim – to impress your boss and earn that next promotion.

This article was based on a presentation I gave at Bathcamp and is a sick twist version of content taken from my book ‘The Website Owners Manual‘

151. Budget

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

On this week’s show: Paul shares 5 tips for when your website budget gets slashed. We have a review of Dropbox and discuss ways to improve the typography on your site.

Download this show.

Launch our podcast player

Housekeeping

Two pieces of housekeeping this week.

WCAG2 Video

A couple of weeks ago I did an internal presentation to the guys at Headscape about WCAG2. The idea was to bring them up to speed on the new accessibility guidelines and also to put accessibility back at the centre of our processes.

At the last minute I made the decision to record the session and put the video online. Although the audio is awful (hence not using it in the show) it maybe useful if you have not read up on WCAG2 yet. There is also a transcript if the audio becomes too much.

You can watch my Introduction to WCAG2 here.

Win a copy of ‘A Practical Guide to Designing for the Web’

Mark Boulton has just released a book that covers the underlying principles of all good design. Whether it be online or in print, good design is governed by certain best practices. This book introduces the reader to these principles, including subjects such as…

How to start the design process
Research and ideas
An introduction to typography
The basics of colour theory
The rules of good layout

The book is unsurprisingly beautifully designed. However it is also well written and engaging. I can highly recommend it.

You could go and purchase a copy right now for only £12 (and I would encourage you to do so). Alternatively you could win one of three free copies by entering our twitter competition.

For your chance to win a copy of this inspiring book, twitter your top design tip using the hash tag #designTip. For example your tip might be…

#designTip – If you wish to draw attention to a design element surround it with whitespace.

The closing date for this competition is Friday 27th February, so get your tips in before then.

The winners will be chosen by Mark and we will direct message them shortly after the 27th. To ensure we can do so please subscribe to the Boagworld Twitter feed.

The winners will also be announced over twitter and on the boagworld podcast.

See the excellent tips that have already been submitted here

News and events

IE8 Cometh!

The big news this week is that IE8 has taken one step closer to being officially released by announcing their first release candidate.

According to the IE blog:

The IE8 product is effectively complete and done. Our next step, after listening to feedback from the final testing feedback from the community, is releasing the final product.

Although they do not provide a release date it is fair to say that it will not be long now.

Whenever I talk about IE8 people immediately ask if they can stop supporting IE6. My recent article on graded browser support should make my opinion on that clear.

However, the more important question is are you ready for IE8? Do you know what CSS properties it supports and have you tested your websites in it?

Microsoft provide a handy table of CSS selectors and properties that IE8 and indeed all other versions of IE support.

Once you have looked at that check out the IE8 readiness guide for developers. This has loads of information about IE8 support for CSS, Javascript and various proprietary features.

It also has a small piece of code you can fall back on if you are experiencing serious rendering issues on existing websites. By inserting this code into the head of your HTML document it forces IE8 to render in the same way as IE7. I am sure this will be a useful stop gap measure for website owners unwilling to pay for updates to their sites.

15 Tips for Freelancers Starting Their Own Business

Next up some great advice for web design freelancers. Think Vitamin have published a post entitled ‘15 Tips for Freelancers Starting Their Own Business‘.

In actual fact the advice applies to all freelancers, not just those starting out.

It is a fairly arbitrary list, but it has some good stuff in there. Just a few of what has been included are…

Move Out of Your Back Bedroom
Don’t be Afraid to Pass
Work on your Sales Technique
Learn About Personality Types
Maintain a Verbal/Email Relationship

If you are a freelancer looking for advice I can also highly recommend FreelanceSwitch.com, which is an entire site dedicated entirely to helping freelancers. Check it out.

Facts and Figures

This last week seems to have been a week of facts and figures.

The first figure that caught my eye was that Adobe AIR has been installed 100 million times. That is an impressive figure, even if it is being overstated as some believe.

Moving web applications to the desktop is an area I find particularly exciting. I am not sure it is always necessary. However, platforms like AIR make it scaringly easy, as we discovered when we did a proof of concept recently at Headscape.

The same announcement from Adobe also stated that Flash 10 has a 55% market penetration on Internet connected computers and they expect that number to rise to 80% by Q2 2009. This is an improvement on the adoption speeds of previous versions.

Other facts and figures to appear this week came from the "state of the web" survey carried out by Web Directions South. This is a survey of professional web designers and developers. Some interesting figures pulled out of the survey by Roger Johansson included:

The number of Mac and Windows users are almost equal â€“ both are used by 46.8 % of respondents
As many as 4.7 % use some version of Internet Explorer as their primary browser
Only 29.5 % test their sites in IE 8
Many more use XHTML than HTML
Over 10 % still use tables for layout
Almost 70 % still use presentational markup
Only 69 % create print stylesheets

Not sure these figures are particularly useful, but interesting none the less :)

Sprite Optimization

Finally today, I
would like to draw your attention to an interesting post by Dave Shea on ‘Sprite Optimisation‘.

Let me briefly explain what CSS sprites are in case you are not aware. Let’s say you have a button with three states – unvisited, visited and hover. Instead of having one image for each state of button you can use a single image containing all three states. You then use CSS to position the image in such a way that it only shows the current state.

In fact Dave Shea wrote an excellent article on ‘CSS sprites‘ back in 2004.

Dave’s new post demonstrates that this technique is now being taken to the extreme with sites like Amazon, Google and Apple cramming large numbers of sprites into a single image.

Whether this is entirely necessary for the types of sites most of us are involved in is debatable. The technique also has some drawbacks on devices such as the iPhone, where performance can be effected.

That said, it is a way of substantially reducing the number of calls to the server so causing pages to load faster.

If you are suffering from performance problems or have a project that requires lightning download then check out Dave’s post and also a CSS sprite implementation guide he refers to.

Feature: 5 options when website budgets get slashed

Your site is in desperate need of a redesign, content is out of date and the technology is archaic. Unfortunately times are tight and your budget has been cut. What do you do? Read More

Listeners feedback:

I am very conscious that I have not been encouraging listener contributions and that is slack of me. This is a part of the show I really want to grow. As I have said before, Boagworld is about the community, not just my personal opinion.

With that in mind you can contribute in three ways…

Email – I cannot always respond personally but I read everyone.
Phone – You can either Skype ‘boagworldshow’ or call 020 8133 5122 and leave a message.
Forum – I often take questions from the forum, so make sure you join that too and get involved.

Talking of the forum, both of this week’s listener contributions come from there.

Listener Review of DropBox

From time to time we do listener reviews on the show and there is a section of the forum dedicated to reviews.

This week I have selected a review from the forum by Dave Redfern. He reviews DropBox, which although not strictly a web design tool will be useful to all.

Dave writes:

I came across dropbox last month thanks to the good people over at the mac roundtable podcast. Because i work on several computers from windows and mac machines in the same house, windows machines at work and at uni i am paranoid about making sure my files follow me around.

The basic concept of getdropbox.com is you install the software on each computer you have, then any files you wish to keep synced between them all you drop in this folder. If it is a public machine you can still access your files from their website although it is a little more clunky. You don’t need to set it to upload changes at a certain time or activate it, the software will automatically sync the folders whenever anything is changed.

A nice feature is within the dropbox folder there is a public folder and anything put in here can be accessed by anyone via a website link. the get the link all you need to do is right click on the file and select ‘copy link address’ and then paste it where ever you need. it is great for sending things to friends or showing clients screenshots of mock ups.

Preferences are very limited to limiting the bandwidth used at anyone time and changing the foler (although when i tried this feature i kept crashing my finder!) but simple is good sometimes.

It is free to sign up and you get 2gb of webspace free. you can upgrade to 50gb for $10/month or $100 for the year which seems reasonable.

the software is available for mac, windows and linux so perfect for anyone.

I will give it 3.5/5 at the moment. there is still some work to do on the software but a great start and very promising.

Personally I think 3.5/5 is a bit harsh but I know what he means. I love dropbox and have just paid for the 50gb account, but the web interface could do with some improvement. Also a native iPhone application would be nice.

That said we use it loads at Headscape to share files privately. It is perfect for that and online backup (including versioning) and I would highly recommend it to everyone.

Font Embedding on the Web

There is an interesting thread on the forum about font embedding that I also wanted to mention. Started by Dven he writes:

It’s a pretty popular subject but wanted to raise this to hear what your thoughts are on it all.

Basically a designer in our office found this link: http://www.fontburner.com. Thought that it be a good idea to maybe use in the near future. Now personally, I’m against embedding non-standard web fonts in this way.

The designer’s reaction. "its pretty much the way the design on web is going – limitations in type have always been a problem – not anymore. Its not the best solution, but pretty soon there will be a better one."

Be good to hear your thoughts?

After checking out Font Burner I discovered that it was a quick and easy way of adding sIFR to your site. We have talked about sIFR before on the show. It is a technique that uses flash to replace HTML text with your desired font.

I was pretty impressed by FontBurner but as Laura said…

It’s not the most semantic way to embed different fonts, as it requires <div class="font-name">text</div> if you want to change anything but <h1>.

Later in the thread Dvan went on to say…

These types of solutions are always prone to not working somewhere along the line. Guess I am kind of a very semantic guy and prefer to do things the ‘standard’ way.

Personally I do not feel that strongly. I think techniques like these are sometimes necessary to overcome browser limitations. That said, I do share his concern about these things not always being very reliable.

I actually rarely use sIFR. My preference is to make better use of font-stacks. These can be very powerful if used well. It is basically another variation on progressive enhancement. If the user has the nice font they get it, but if they don’t they get a substitute.

The reason most designers resort to sIFR is because the client insists on a
particular font. I would prefer to educate the client than resort to sIFR. By educating them over this issue you are laying the ground work for conversations about graded browser support and various other progressive enhancement issues.

On the subject of web typography, let me leaving you with a smashing magazine post that has come out this week – 50 Useful Design Tools for Beautiful Web Typography.

Tips for a transformed twitter

Posted in Marketing on February 3, 2009 by Paul Boag

Paul Carter from New York writes:

Paul, I notice that you have been lamenting a lot on twitter about it becoming a marketing tool. Is that really wrong? Shouldn’t we be embracing and using it?

I sent my first twitter in November of 2006, only 7 months after the services launch. For me it was a way to keep in touch with new friends I had made at the Refresh 06 conference. It was less intrusive than instant messaging and less formal than email. I quickly became hooked.

For the longest time it was the tool of geeks. My friends laughed at me as I sent tweets from the pub, my family stared blankly as I explained the service. However, that has all changed now.

Like Facebook before it Twitter is everywhere at the moment. It was even recently discussed by Stephen Fry and Jonathan Ross on the BBC in front of 4 million viewers. It has become mainstream and increasingly it is being used as a marketing tool. There is no going back.

However, Paul is right. I am wrong to lament what Twitter once was and should embrace it as a tool I can use. Nevertheless like everybody, I need to be careful how I use it. I do not believe Twitter users will allow the tool to be reduced to a broadcast mechanism for pimping the latest blog post or special offer.

So how am I choosing to use Twitter?

I guess the first thing to say is that I am not a Twitter success story. Sure I have nearly 4000 people following me but that pale into insignificance when compared to others. That said, Twitter is turning into a third string of my online presence, alongside this blog and podcast.

With that in mind let me share with you a few tips that have helped me better utilise this interesting new tool.

1. Above all, keep it personal

Although twitterers like CNN breaking news have been very successful, generally I feel corporate twitter accounts are a mistake.

In my opinion twitter is about person to person communication and not a broadcast tool for faceless corporations. To use it in that way is to miss the potential of twitter.

Does that mean you cannot have a twitter account for your organisation? Not at all. For example if Vitaly Friedman created a twitter account you might not recognise the name. However, if he used the name SmashingMag you are more likely to follow because you know the Smashing Magazine website.

It is not the name that matters so much as the tone of posts. In my opinion your tweets should be more than an endless string of press releases and links. It should include personal content and a dialogue with followers.

This is important because it enables you to make a connection with your users. An open and honest relationship with users is very powerful. It builds trust, loyalty and engagement. It encourages repeat traffic and word of mouth recommendation.

2. Learn from others

I have learnt a lot about Twittering just by reading the tweets of those I admire. Merlin Mann for example injects a lot of humour into his posts and his followers really respond to that. Darren Rowse on the other hand strikes a good place between recommending content others have written with promoting his own posts.

As well as examining the style of others you can also examine statistics. Use a tool like TweetStats.com to examine how often others tweet and how often they reply to their followers. All of this helps to build up a picture of what makes a successful twitterer.

There are also a growing number of great sites which give advice on how to get the most out of twitter. One of my personal favourites is TwiTip that covers subjects such as “The Merit of Twitter Competitions” and “How To Get Unfollowed On Twitter“.

3. Get a good desktop client

Without a shadow of doubt the most powerful twitter client currently available is TweetDeck. This air application not only runs on Windows, Mac and Lynx but also provides a range of superb tools for managing your life on Twitter.

With TweetDeck you can create groups, filter tweets, monitor certain subjects as well as tweet, reply and retweet posts.

In fact it is so powerful that it can be somewhat intimidating at first. Don’t let that put you off. Check out this short tutorial into TweetDeck’s core features and you will be up and running in no time.

4. Use twitter on the road

If your twitter account is going to be personal as well as professional then you will almost certainly want to use it on the road. One option is to simply use Twitters mobile website. However if you are fortunate enough to have an iPhone then there is a wealth of Twitter clients available to you.

I think I have paid for and tried almost every twitter client on the Iphone, but the winner hands down is Tweetie.

I love Tweetie. It has a clean, easy to use interface, and yet is packed with powerful features including the ability to:

Handle multiple twitter accounts.
Navigate reply chains.
View twitter trends and perform custom searches.
Access complete user profiles.

In many ways it is even better than TweetDeck because it has much of TweetDeck’s power, but in a much cleaner interface. If only they did a desktop application!

5. Tracking the results

Although I have already mentioned TweetStats, that is just the tip of the statistical iceberg.

There are an ever growing number of tools you can use to track your activity on twitter. However, the ones that really interest me are those that track click throughs. What I really want to know is if I mention a link in twitter, how many people click through.

If the link is one on my own sites I could use Google Analytics using their URL tagging tool. However, this is somewhat fiddly and only applies if I am linking to my own site. What is more these URLs can get long, which is a problem when limited to 140 characters.

Fortunately there is a tool called TwitterBurner which solves these problems. It shortens the URL and tracks all click throughs even to sites you do not run yourself. Best of all it is now supported from directly within TweetDeck (although not Tweetie unfortunately).

6. Follow as well as be followed

Always remember that Twitter is a two way conversation. A big part of successful twittering is about replying to those who tweet you.

Twitter is also not just about who follows you. It is also about who you follow. One service that I find particularly useful is Mr Tweet.

Mr Tweet will provides two type of information.

First it suggests people you might want to consider following because they fall within your broad network (people who are followed by your friends).
Second it suggests those from your list of followers who you should follow back.

For each of these people it provides various stats including:

The number of followers they have
The chance of them replying to you
How often they update

This is a great way of extending your network of contacts and potentially increasing the chance of your tweets being retweeted. Its also a great way of meeting new people!

7. Integrate whenever possible

If you are intending to use Twitter for anything other than personal use it needs to be incorporated into the rest of your web strategy. That means it needs to linkup with your other online activity including your website and other social networks.

There are no shortage of tools that help you do this from the basic twitter widget to a tool for sending your tweets to facebook.

One tool that particularly caught my attention is called TwitterFeed. It posts content from an RSS feed to Twitter which is a useful way of updating your followers about new posts.

However, use any tool that automatically posts to Twitter with caution. It can easily become annoying if used too much. Also it lacks the friendliness of a personal post.

8. Don’t over think it

Of course the problem with all these tools, statistics and analysis is that it can suck the spontaneity and personality from your tweets.

Although some of those late night drunken tweets are best gone, you want to avoid your tweets becoming too sterile.

Let me explain what I mean. I am naturally a fairly good public speaker. However, once I was sent to a public speaking workshop. They taught me all the techniques you should use to be exceptional. However, instead of it improving my skills it made me so amazingly self conscious that I was paralysed. I was over analysing what I was doing.

The danger is we do the same with Twitter. Sure, Twitter can be used as a marketing tool but that doesn’t mean it cannot be fun too. Don’t let articles like this suck the joy out of twittering!

My Favourite iPhone Applications

Posted in Mobile, Reviews on February 1, 2009 by Paul Boag

I often get asked what my favourite iPhone applications are. Its hardly surprising considering the excessive number of application I buy and the amount I go on about it. I therefore thought it was about time that I compiled a list of my favourites.

One caveat before I begin my rundown of top 5 applications – I am a fickle creature and so my favourite applications change regularly. What you see here is a snapshot of my current setup. It will no doubt change in a week or two!

1. Omnifocus

I am a Getting Things Done addict. Its the only way I can stay on top of the ridiculous number of half finished projects I have. I am also a worrier so having a system really gives me a sense of control I would otherwise lack.

I started off using Omnifocus as a desktop application. It is designed around the GTD methodology and I would only recommend it to people who are serious about this approach. Also the iPhone application is far from cheap but for me it was worth every penny!

Omnifcous is not perfect (adding tasks to the inbox takes too long) but I use it far more than any other application and I could not live without it. If you feel out of control in your life, read Getting Things Done and then buy this app.

2. Evernote

Evernote ensures you have your notes wherever you are. They offer a desktop client (both mac and PC), a web client and an iPhone application.

You can add text notes, audio notes or images. You can tag the notes, sync them across all your clients and even capture images using the iPhone camera or web cam. However, the real power of Evernote is its optical character recognition. If you upload an image to the evernote server it will convert any text in that image into a searchable format. Very useful indeed!

3. Tweetie

I have tried every twitter client available on the iPhone and Tweetie is by far the best for anybody serious about Twitter.

It allows the management of multiple accounts, access to entire conversation threads and offers a powerful search functionality. It also allows you to get detailed information on other users and to manage of your relationship with them. However, it is the interface I really like. It is clean, customisable and easy to use.

I cannot recommend this application highly enough.

4. Google Reader

This is my only web based iPhone application. There are actually a number of native applications that integrate with Google Reader but none of them are as good as Google’s own application.

I need an RSS reader which syncs across my iPhone and laptop. Google reader does that and does it using a clean and fast interface. I love the way Google handle RSS and so wanted an iPhone app that works with that.

That said I would prefer a native application. Occasionally mobile safari chokes on the Google reader application and it often makes the page reload unnecessarily. Unfortunately all of the alternatives I have tried are slow and unresponsive. Either that or do not offer as extensive functionality as Google’s own application.

5. Mobile Fotos

My final choice of application was a tricky one. I could have gone for facebook, brightkite, speakeasy, yammer or any number of others. In the end I chose Mobile Fotos.

Mobile Fotos is an application for managing and uploading to your flickr account. It is extremely well executed and they have thought of everything.

It is incredibly easy to manage your own photos and to access the photos of your contacts. It offers a powerful search functionality and allows you to view photos in the same intuitive way you do with the built in photo application.

Best of all it provides the ability to share a photo through either email or twitter. As a heavy twitter user this has proved invaluable.

Conclusion

This is the tip of a very big iceberg of applications. It was a hard choice to pick my favourite five. For example, I had to leave out Yummy which is the best delicious bookmarks application I have found. I have also had to miss ‘Bible‘ which is a very well thought through application and Instapaper which has been a life saver on long plane flights.

Of course the application I am really excited about is the SlingPlayer for the iPhone. But I am just going to have to wait for that!

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Never work for free?

Posted in Working in web design on January 30, 2009 by Paul Boag

I recently said on twitter that you should never work for free, but is that really true? Are there occasions when it is okay to do web work for no financial return?

Please note: This was a very hastily thrown together post in response to a twitter conversation. Sometimes 140 characters is not enough!

Unsurprisingly this strong statement got a reaction. Of course, there are occasions when you might choose to work for nothing, but not as many as you might think.

Let’s look at some of the reasons people give.

“It will be great publicity”

Will it? Will it really? People say that all the time but do not both to consider the statement in detail.

Take for example my case. The comment above was born out of a joke I made suggesting somebody might want to migrate the entire boagworld to WordPress for me because I was too lazy. People started to offer to do this for free because they thought it would be good publicity.

Think that through for just a second. I had agreed to no kind of publicity. However, lets imagine for a moment I had. What is the best publicity I could offer? A link on the site? A mention on the podcast? Would that for a minute make up for the hours/days of work that would have to go into that migration exercise. Of course not! The return on investment is just too low.

Before agreeing to do a project because it will be good publicity, ask yourself whether that time could be spent publicising yourself in other ways that are more effective.

“I work on a open source project”

In my opinion this is not working for free. This is investing in a product you use on a daily basis. You work on the project to enhance it so the end result is more valuable to you.

“It will be good for my portfolio”

Sure it might be, but as with publicity there are probably better ways to spend your time to improve your portfolio. What about developing your own site? What about building a web application?

There is a value in working with real clients. However, a client that does not pay is not a real client. The relationship is different because they are not paying for your services.

“I cannot charge friends and family”

Agreed. You cannot charge family. I myself am currently building a site for my dad and I wouldn’t consider charging him.
However, I feel a bit differently about friends. Why is it acceptable for your friends to ask you to build a website for free? If I had a friend who was an architect I wouldn’t ask him to design me a house for free! I certainly wouldn’t ask my friend who is a doctor to check me for prostate cancer!
My point is that we work in one of those professions where people feel they have the right to ask favours. I don’t think that is fair and I don’t believe we should allow friends to abuse our friendship.
Finally, I know that my close friends wouldn’t ask me to do a website for free. They have always offered to pay and admitted I rarely take it, but at least they offer.

“It’s for charity”

I am torn over this one. I have done charity work for free but I am coming to believe it is a mistake. Even a minimal charge helps to establish a better working relationship.

Charging has two benefits. First it gives you credibility and the client has to respect that you are a professional. Second, it gives the charity the right to comment on and participate in the build. Often if you do not charge they don’t feel they can say anything if they are unhappy.

One approach I have used in the past is to charge the client and then donate the money back to the charity at the end. That way you have the benefits of a paid relationship without the guilt :)

By taking this approach you are stressing that your skills are of value and should be chargeable. The donation is a separate decision which you can decide to make if you so wish.

Conclusions

If you follow me on twitter or listen to the podcast you will know I give away a lot of my time and money for free. I run a youth group, participate in a church and give away a substantial portion of my income.

However, I draw a distinction between my profession as a web designer and my personal life. I believe what we do is valuable and so should be a chargeable service.

Of course, I also recognise that this is an intensely personal area and everybody has to make their own decisions. I just hate to see people undervalue their skills. You are worth more than ‘free!’

5 options when website budgets get slashed

Posted in Web strategy on January 30, 2009 by Paul Boag

Your site is in desperate need of a redesign, content is out of date and the technology is archaic. Unfortunately times are tight and your budget has been cut. What do you do?

The economic downturn is affecting everybody and even at Headscape we have noticed the budgets of clients shrinking. With less money to spend how can you maximise the return on your investment?

To be honest I think it is a good thing that people have less to spend on their websites. We have had too many clients approach us asking for complete overhauls of their sites when that is not what is really required. Often more subtle changes can have a greater impact over the longer term. They certainly generate a better return on investment.

We have been working closely with our clients to suggest ways they can improve their sites without breaking the bank. Here are just 5 of our suggestions.

1. Realign rather than redesign

Why do you need a redesign anyway? Redesigning your entire website is time consuming and costly. However, more importantly it is often unnecessary. I seem to be quoting Cameron Moll’s excellent article “Good Designers Redesign, Great Designers Realign” a lot recently, but that is because he talks a lot of sense. He writes:

Like a kid in a candy store, we creatives redesign like it’s the new black. Why do we possess such an insatiable desire to refresh and remake? Why do we thrive on renewal? What tempts us to be seduced by the sway of renaissance?

I believe it is because we see a redesign as the solution to a failing, tired site. However that is rarely the case as Cameron goes on to explain:

Too often, look and feel, color scheme, layout, and identity are presented as solutions to problems… long before regard is given to other less-aesthetic issues that may very well be the root of the problem. The old warning against treating symptom rather than cause comes to mind.

What is more redesigns can often cause more harm than good by confusing the loyal users who are familiar with your old site.

When budgets are tight let go of the notion you need to do a complete redesign. You can improve your site many times over with the smallest change. Just take the case of the $300 million button I mentioned in show 150 of my podcast.

2. Simplify

As website owners we are always looking to expand our websites by adding more features and content. However, that costs money we may not have.

Here is a radical alternative – Instead of adding more to your site, why not take things away.

Typically websites are stuffed with content and features that users simply do not use. A quick look at your analytics package will demonstrate the problem. The vast majority of traffic is to a handful of pages.

The problem is we tend to leave content in because ‘somebody might find it useful’. Although this maybe true, it does not necessarily mean keeping content is a good idea.

The more content and features we make available the harder it is for users to find what they need. It is the proverbial ‘needle in a haystack’.

Fortunately, simplifying your website does not have to be entirely about removing content. According to John Maeda’s book ‘The Laws of Simplicity‘ we can also streamline our sites by shrinking and hiding content too. Consider ways to reduce the prominence of less important content, to place a greater emphasis on what matters.

When budgets are tight take a long hard look at your site and ask whether more can be achieved by simplifying what you have rather than adding complexity.

3. Prioritise and phase development

Another technique which can be used when budgets are tight is to phase development. There seems to be a tendency among website owners to store up changes and roll them out in a single large deployment. Unfortunately this means a large single expenditure too and that can be problematic from a cash flow perspective.

A better approach is to roll out incremental changes on an ongoing basis. Not only is this better from a financial perspective, it brings other benefits as I explain in the Website Owners Manual. Phase development also provides:

Faster delivery because new features are launched independently. Some features can be launched while others are in development. This prevents a single feature stalling the entire rollout.
More accurate estimates. Bigger project are harder to estimate. Breaking them down makes it easier for suppliers to quote accurately.
Better PR opportunities. Whenever a new feature is launched there is an opportunity to publicize the site. New features can motivate users into taking another look. A single large project only provides a single opportunity to grab peoples attention.
Limited risk of working with a new supplier. Choosing an agency is always a risk. Until you work with somebody, it is hard to gauge how good they are. Reduce this risk by limiting the size of project they are commissioned to build. If the agency fails to perform, you can look elsewhere when commissioning subsequent work.

This is an approach commonly adopted by larger websites with their own in-house teams but much rarer among smaller sites who use external agencies. Nevertheless, it is an approach which works well in tough times.

4. Reuse and recycle

Too often we reinvent the wheel. When budgets are plentiful this can make sense. Although there is similar functionality out there, we might choose to develop it ourselves so we have more control or can customise it to our exact requirements. However as budgets begin to get squeezed these are luxuries we cannot afford.

In a world of widgets, APIs and open source it is becoming increasingly hard to argue the case for custom builds. Why build your own mapping application when there is Google Maps? Why build a forum when you could use an open source alternative like Vanilla?

My only word of warning is in regards to integration. It can be hard to get these ‘prebuilt’ tools to work together. Be careful that the savings made are not lost to integration problems. Where possible use tools like WordPress that provides an architecture with a wide range of plugins for quick integration.

5. Move beyond the website

Finally, I think it is important to remember that your web strategy is not all about your website. We spend the majority of our ever decreasing budgets on adding bells and whistles to existing websites when there are large number of potential customers who never reach our sites.

Instead of sinking your budget and efforts solely into your website consider looking further afield. Could your web strategy be better served by putting resources into a Facebook group or a twitter account for example? Would your target audience listen to a podcast? Do they read RSS? What about a mailing list? The possibilities are endless.

Ask yourself where your target audience congregates. Instead of constantly trying to draw users to your site begin to spend time where they already meet. What social sites do they use? What editorial sites do they read? Contribute to these communities and offer to write for the editorial sites they read.

Many of these things can be done at almost no cost and with little technical knowledge. All it takes is some time and enthusiasm.

Conclusions

Whether a site is successful is not dictated by its budget. However many larger organisations have relied on money as a method of driving their web strategy forward. As these budgets are slashed there is an opportunity to gain a competitive advantage by being smarter.

Hopefully this post has demonstrated a few of the possible avenues available and inspired you to discover some more of your own. However if you would like some more personal advice specific to your own website then feel free to drop me an email.

150. User Manipulation

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

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

Download this show.

Launch our podcast player

News and events

The $300 Million Button

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

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

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

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

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

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

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

Read the ‘$300 million button’

The UK government and graded browser support

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

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

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

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

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

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

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

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

Read the UK government guidance on browser testing

50 Illustrator tutorials

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

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

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

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

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

Read 50 illustrator tutorials every designer should see

A new approach to PNG Support

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

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

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

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

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

Download DD_belatedPNG now.

Interview: Liz Danzico on User Research

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

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

Paul: Okay.

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

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

Liz: Well I wouldn’t go that far.

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

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

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

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

Paul: Uh huh.

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

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

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

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

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

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

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

Paul: Yeah, that’s good.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Liz: My pleasure.

Thanks goes to Jason Rhodes for transcribing this interview.

Listeners feedback:

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

Snape and Keith, separated at birth?