116. Back

Posted in Classic shows on May 7, 2008 by Paul Boag

Returning with a new site. Jeff Croft talks about his view on web standards and we discover why the personal website is dead.

Podcast: Download (28.3MB)

Download this show.

Launch our podcast player

News and events

Creating grid layouts

Last month I attended the Future of Web Design conference. The speakers were exceptional, however my favorite was a presentation by Jon Hicks on his web development process. The guys at Carsonified are slowly releasing the videos so it wonʼt be long before you get to watch it yourself.

I find it interesting to see how people work and it is amazing how many new techniques you learn. One thing Jon shared was a Javascript library called GridLayouts that overlays a grid systems on top of your pages. This is useful when creating layouts directly in CSS because you can align elements to the grid.

I have since discovered there is a firefox extension called GridFox that does the same thing.

Flash goes open source

Of course, you might be wasting your time designing with CSS. According to Aral Balkan flash is soon going to be everywhere and is the platform we should now be developing on.

The reason for Aralʼs excitement is an announcement by Adobe that Flash is going open source. Not only will the swf format be open source, they are also relaxing the licensing on the flash player.

All of this is good for the flash platform. Although it is never going to replace HTML, it does undermine one of the main arguments used by its detractors.

Accessibility and AJAX

While Flash gets a shot in the arm its main competitor AJAX is under attack. Brothercake has written a passionate article for Operaʼs development site pleading with us to stop using AJAX.

His argument is that AJAX is immature and unnecessary in the majority of cases. He believes that the accessibility cost of using AJAX outweighs it benefits (many of which are oversold).

I cannot say I agree with everything he has written, but the article does make you pause and consider whether your implementation of AJAX has been entirely necessary. Coming within days of the WCAG 2.0 candidate release, I think this article puts accessibility firmly back on the agenda. It will be interesting to see what affect WCAG 2.0. has on the growth of AJAX and web 2.0.

Developing effective forum leadership

Our final news story is anything but web 2.0. because it focuses on the oldest of community tools, the forum. It is an article by Patrick O’Keefe entitled Develop Effective Forum Leadership.

The article is aimed at those website owners who run larger communities and need to provide guidance to their community leaders. I have worked with so many large organisations who have tried and failed to effectively run communities. Their failure is often down to bad decisions concerning moderation and management.

This article helps to address those issues providing solid advice. If you are a community manager or have clients who run (or want to run) a forum then this is a must read.

Feature: The personal website is dead

This week Zeldman mourned the decline of the personal site. Several responded rebutting the claim. In this weeks feature I explain why I agree with Zeldman but just don’t care.

Interview: Jeff Croft Talks About His View On Web Standards

Paul: OK. Joining me today is Jeff Croft, who no doubt you have heard of. Good to have you on the show Jeff

Jeff: Great to be here Paul, thanks for having me.

Paul: So you work for Blue Flavour, and I have to confess the reason why I wanted you on the show is because you do tend to court a little bit of controversy, shall we say, is that a fair comment?

Jeff: I suppose that’s a fair comment. I don’t necessarily do it on purpose, but it does seem to keep happening!

Paul: Well you say you don’t do it on purpose, but I’ve looked through your blog, and you have some excellent articles on there that are really good and really quite excited me. Not necessarily because I agreed with every word

Jeff: Sure

Paul: But what I like about what you do, Jeff, is that you challenge kind of the standards, you know, you challenge the standard thinking and you kind of come at things from a different angle. So…

Jeff: Right

Paul: As a result of this, you seem to have antagonised a few people, especially in the standards community. Why is that? What have you done and why…why do people find you so annoying, Jeff?

Jeff: Well I was going to ask you that same thing Paul!

Paul: Ha ha ha

Jeff: No, seriously, it’s a good question. Like I said, I won’t ever set out to antagonise anyone. I think sometimes, you know, people take opposing viewpoints on these industry matters, a little personally, that’s, you know, my opinion. I know I write in kind of a pointed way that sometimes is blunt and I tend to be the type of person who doesn’t always have a filter when maybe I should. But, you know, I love everyone in this community, everyone I’ve ever met in this community’s been awesome so I’m not…it certainly isn’t ever personal, but I think, dealing specifically with web standards, it sort of feels a lot like religion to me. Like I sort of see myself as a Protestant of sorts, like I…you know I came up as a firm believer in the dogma of web standards, but more recently I’ve sort of split off from the Church on a few key points, but in the end, I mean Catholics and Protestants are both Christians, right? And we read the same Bible which is, I suppose, designing with web standards, and so you know, just there’s….I usually sort people there’s probably 5% of stuff that I differ on than kind of the purist viewpoints. So I’d see it as a purist versus pragmatist sort of thing
and I like to write about it and I like to write in a kind of a blunt way that I guess sometimes rubs people the wrong way.

Paul: So you’d like to call yourself a pragmatist. Tell us a little bit about where you, you know, what areas you think that other people are being too purist over when it comes to web standards. What are the areas that get under your skin?

Jeff: Well the main thing is just that I don’t really consider…I never think of web standards as the end goal. I think of web standards as a means to the end, and so, you know, when I’m building a website my priorities are, you know, to serve the needs of the client and to create a great user experience, more than my priorities are to validate or to, you know, use all the right ….most semantic elements all the time. I mean I do try to do that, but it’s…those are just in support of the greater goals that I have and I think…sometimes I feel like peoples’ priorities get a little out of whack there, and that’s kind of the purist mentality that I’m talking about.

Paul: I mean the trouble is with writing posts like this, and this is something I get accused of as well, that when you say something like, well web standards, you know, are not the goal, they’re merely a means to an end and all the rest of it

Jeff: Right

Paul: Aren’t you actually encouraging lazy coding?

Jeff: Well I don’t think so. I can see how it seems that way. I mean I definitely do believe that everyone should be writing valid markup and CSS and I just encourage people to remember that web standards are simply tools to advocate, you know, to help achieve the end goal, and you know, if you’re…I don’t know, I guess it’s kind of hard to explain, but if, like…let me use an example. If you’re building a house, I don’t think anybody would have their goal be…I need to use a hammer, and nails and bolts when I’m building this house. I don’t think that would be anybody’s end goal. Their goal would probably be like, I’m going to build a house that is structurally sound and has spaces that serve the needs of the residents and it’s comfortable and it’s aesthetically pleasing. They’d probably have goals like that. And you know, they probably would use a hammer, nails and bolts, but I don’t think they’d probably get so bent out of shape about, well in this house I used, you know, 3½ inch long nails instead of 3 inch nails, but those are the kind of like sort of semantic and pedantic debates that we get into in the industry a lot that irritate me a little bit because I feel like sometimes people just don’t pay attention to, you know, somebody can redesign a site that can be beautiful and amazing, and they make a blog post about it, and they say, you know, this is a new project I’ve done and it’s got all this new innovative stuff and the comments on it are, well you didn’t encode your ampersands and you know, you used too many divs and just to me I’m just like, man you totally missed the point, you totally missed all the great stuff that is there about my site.

Paul: But I mean using your house example that you just gave

Jeff: Right

Paul: I mean, within, you know, construction there are standards. There are, you know, rules that have to be followed and it may be the case that the person that’s getting their house built for them doesn’t…don’t particularly care about those things, you know, they care about the aesthetics, they care about the living space, they care about that kind of stuff, but somebody has to care about, you know, the fact that it’s built to Fire Regulations and things like that. Is that not our job as a Designer to worry about things like that?

Jeff: I think it’s completely our job, I just think that it is our job to …to do those things and to create great user experiences and have beautiful designs and…and it’s mostly just a priorities thing, like it’s just…I think all those things are important. Validating and creating, you know, writing semantic mark-up, all these things are important to me, they’re just… they’re just tools that I use to reach greater goals is all….and I think some people in our industry have turned that around to where they are more interested in writing valid code than they are in creating great experiences.

Paul: Mmm. So do you actually think that there are situations where the, you know, these different objectives come into conflict, because you know, I can’t say that in my experience there have been many situations where you know, I’ve gone, you know, oh I can’t do that because it’ll make the code invalid or whatever, you know, where…or where, you know, I’ve had to over-rule a client because I feel that it would compromise, the, you know, the semantics of the website. They don’t often seem to come into conflict, but I mean do you disagree?

Jeff: No,….no I agree, they’re very rarely in conflict if ever. It’s…you know, it’s more what irritates me and what I have talked about is more it has to do with the discussion and the kind of….community, you know, within the web standards community it’s not something that really affects client work too much or anything like that, it’s just I want to talk about some other stuff; I want to talk about design and I want to talk about users and I want to talk about community and networking and bringing people together and sometimes I feel like those conversations can’t be had because they’re…because as soon as somebody starts to talk about something a little bit more abstract and conceptual, people derail the conversation by saying, again, like your ampersands are unencoded, or you know, why did you use all these divs when you could’ve, you know, been more semantic, or you know, whatever. So….it’s more about the conversation…yes

Paul: I’ve got to say, I can associate with your point of view, I mean at the moment I’m re-building the Headscape website, our corporate website, and you know, although obviously I should primarily be thinking about the client all the time and potential customers that are coming along to the site, after all, that’s the target audience, but you can’t help but almost be a little bit afraid, you know, that …oh is this code of good enough standard, are people going to criticise this, that and the other, and really you shouldn’t have to live your life in fear of what your peers will say.

Jeff: Exactly, that’s exactly wha
t I think.

Paul: But I mean from the point of view of…we were talking about lazy coding weren’t we, and about, you know, does this encourage lazy coding. You guys have taken an interesting position at Blue Flavour, and I have to say this…this is something I think I probably disagree with, which is that you guys use Blueprint, which is the CSS library, actually in a production environment. That’s interesting that you take that point of view. Explain a little bit about how you came to that…that point, you know that position.

Jeff: Well…well first of all I was sort of involved in the creation of Blueprint. It was…I was accidentally involved; I didn’t mean to be, but at my previous job I had…I had created a sort of CSS framework for us to use internally, it was a media company, a newspaper company and we had several different newspaper sites. They were all similar and we had a team of designers and we wanted to just sort of standardise on some….some class names and just some ways of coding things across our sites and across our team, so that you know, we would all kind of be on the same page, and I wrote an article on a A List Apart about that process and somebody found…somebody went and found that code and wrote me an e-mail asking if they could use it, and I said sure, I can’t support it, but if you want to use it, go ahead, and thinking that they were probably going to use it on their personal site or whatever, and it turns out what they’re actually going to do is build Blueprint. So that’s kind of how the whole thing happened and…so that’s how I got involved in it and I gotta say before I go any further that since then, Blueprint is very different from what I wrote and there’s been a lot of changes, and a lot of them are good but a lot of them I don’t like too, so I don’t….at this point in time I’m not as sold on Blueprint as I was three or four months ago just because of some of the changes they’ve made. But I think the reason, I mean the justification to me for using Blueprint or any CSS framework like that is the same justification that you would have for any Open Source project. It’s really good CSS written by smart people that has been tested by the masses, it’s constantly being updated, having bug fixes applied, and you know I believe that most of the time the Open Source community is going to be able to write better code than you or me or any one individual person, so to me that’s the justification, it’s the same reason I would use Apache or Django or Rails or Linux or anything Open Source because it’s just been proven time and time again that….that Open Source methodology works for having good code.

Paul: I mean, I have to say, I had a look at it and played with it for a bit, and I’ve got to say that for some stuff it was very impressive, you know, if you’re putting together wireframes or, you know, doing initial production work then I can see a value in it, but I think what concerned me was some of the limitations surrounded the fact that, you know, it’s designed primarily for a fixed based site, but also…sorry, is that…am I wrong?

Jeff: No, no, you’re absolutely right, although I think adding liquid is on their ‘to do’ list, but yes,

Paul: OK. And then…I mean the other thing was that, you know, I’m trying to avoid using the word ‘semantic’ in order not to get in trouble with you, but I mean the thing that did strike me with it is that there were a lot of class names that you were having to put in, you know, which is fine, you know, I can accept that, you know, it’s not the end of the world if you do that, but you know, if it’s a site that’s going to be around over the long term, I just felt it was a little bit of a second-rate solution for probably the type of clients I do. Now I can understand that if you’re doing, you know, a lower…you know, lower end work, smaller websites, with less of a budget and you need to turn things around quickly then this is better than not using standards at all, but it just felt a little bit of a lightweight solution. Am I being unfair to it?

Jeff: Nope, I don’t think you’re being unfair at all. I think you’re absolutely right and I think, you know, I mean at Blue Flavour, we have used Blueprint before, we don’t use it all the time, and it is…we do tend to use it in those situations where we have a very tight timeframe or a very tight budget, and just need to get things done and get them out the door as quickly as possible. Because like you said, I mean we think it’s a good solution that is better than not using web standards at all, but it’s…it’s never going to be as good as hand-crafting every line of code for, you know, for the particular project. We recognise that, but it’s, you know, sometimes in the real world, when we have deadlines and clients and budgets, sometimes just getting things done on, you know, an efficient way trumps being absolutely perfect every time which is again that pragmatist versus purist sort of view.

Paul: I mean it felt like a bigger compromise, and maybe…I’m using some other, you know, frameworks and libraries, you know, I just jQuery for example in JavaScript, and this felt more of a compromise, more of interfering with the kind of underlying content of the site, and that’s what I was probably slightly uncomfortable with, was the idea that, you know, the content would be in some ways compromised if the site was going to be around a long time, you know, if it was a shorter term project that maybe wasn’t around as long, then the fact that the content is somewhat compromised maybe is not as big a deal.

Jeff: Yeah, well I think, you know, when you were saying that I was thinking, you know, like you use jQuery, so do I. I think there’s a certain…like…those of us who are not great JavaScript people will lean on these frameworks, whereas I bet JavaScript gurus sometimes have the same feelings like about…it being a compromise when using one of those libraries, you know, and there’s probably people in the Ruby community that say, ‘oh, I’m not going to use Rails, it’s a compromise’, because they really know the ins and outs of Ruby or they really know the ins and outs of JavaScript and we really know the ins and outs of HTML CSS so yeah, I wonder if it’s always …these kind of libraries are always going to be a little more popular with people who are…who are like have to use CSS but it’s not really their primary area of expertise.

Paul: So what you’re implying is that I’m a snob?

Jeff: Sort of!

Paul: Ha ha ha…..that’s fair enough, that’s OK. I don’t mind being a snob! So I’ve….so moving on from that then a little bit

Jeff: OK

Paul: Now I’ve read some stuff that you’ve written before critical of validators and you know, some of these automated validators that are out there. Maybe tell us a little bit about why you’re critical of them, why you feel so anti towards them?

Jeff: Well it’s not so much that I’m opposed to the validators, I mean on the contrary actually I use validators almost every single day. What I’m critical of is the way people use them sometimes. I think that, you know, validators are there for…as a tool to help you de-bug during the development process, you know, you have some problem on your page and why isn’t it working? When you validate you find the error and then that helps you move along to solving it. But what irritates me is the use of validators as sort of in unprovoked attacks on other peoples’ code, you know, where again, it’s kind of that same…that same mentality of somebody launches their new site and the first thing somebody does is view source and validate it, so that they can then make a comment that says, you know, this is crap, and that is…that is really irritating. I feel like there’s almost never any reason to validate someone else’s code, I mean unless they’ve asked you to, I can’t understand why….it’s just that mentality of the first thing you do when you get to a site is view source is a little baffling to me, because I’m…I’m more interested in the design and the functionality and what are they doing here that’s new and interesting.

Paul: I guess…but that depends…surely that depends on your priorities, I mean…you know, I find it quite interesting to look at other people’s code and how they’ve built the site. It doesn’t necessarily mean I’m going to validate it.

Jeff: Right, and….no and I mean that’s fine, I do that at times as well and that’s certainly how I learned a lot of what I know, but I don’t do it with the intention of then picking apart every single error they made publicly, which is really the thing that bothers me.

Paul: I have to say the other thing that concerns me a little bit about this is I’m starting to see more clients going and viewing source and validating websites and you know, it’s quite difficult, because I mean obviously like yourselves, we kind of sell ourselves on, you know, being standard based designers and produce good quality code and all the rest of it; it’s part of our sales package. And you know, when a client goes along and validates one of our client sites and it’s invalid, you know, you feel like you have to defend yourself in some way, but, you know, there are good reasons why a site won’t validate sometimes, and…and certainly once a client starts using a content management system you can pretty much kiss goodbye to it can’t you really?

Jeff: In many of them, yeah.

Paul: OK. That’s…it’s interesting to hear a little bit about the way that you operate and the kind of priorities that you have at Blue Flavour. In some of the posts that you’ve put up, I mean you were kind enough to send through a big bunch of your more controversial posts to me which was good. And I was reading through some of them, really enjoying them by the way, but there seemed to be this kind of under-lying current that maybe standards and even the W3C to some extent, a kind of stifling innovation. Where does this kind of feeling come from, you know, is that something you really, really believe and what makes you believe it?

Jeff: I would say again it’s not so much that I think that the W3C themselves or the standards themselves are stifling innovation; it’s the culture of compliance that is around those standards and around the web standards community to where people are so obsessed with being valid and being compliant all the time that they…you know, they tend to…I think it even extends past actually writing mark-up or writing CSS to where people just keep doing things the same way that everybody else is doing them or the way that Jeffrey Zeldman told them is the way to do things, or whatever, and it just kind of….they just keep doing things the same way and not innovating as much as I would like to see. Now I say that, and I…but I know I probably do the same thing myself, like I don’t…I’m not always incredibly innovative either, so…so it’s kind of, you know, it’s a balance there. But I think….I think also, I mean…and this might be a little bit of difference in my viewpoint too, is when I really thing of web standards, the web standards movement, I think about the browsers. I think the…gold web standards movement was to get the browsers all rendering standards correctly and supporting standards, which for the most part has been done, I mean granted there are still little problems here and there, and IE isn’t totally there, but at least we know that they’re on board now. I don’t think of web standards movement so much as being a thing where we’re getting the developers all on board. I mean I guess that’s part of it too, but when I think about the web standards movement when I was, you know, when I was first involved in it four or five years ago or however long it was, to me it was all about the browsers, and so, you know, today I think there’s a sort of chicken and egg problem where…browser makers could be innovating and doing cool new things and the one that consistently has done cool new things is Webkit in Safari, I mean they’re adding the CSS3 properties and they’re adding, you know, they’re coming up with properties of their own and adding them and they’re…and they’re doing it, I mean today we have this name spacing, right, where they can say, you know, it’s going to be hyphen webkit hyphen border radius or whatever, so they can keep it out of the, you know, it’s got its own name spaces, kept out of the global area so it doesn’t conflict with anything else, and I would just like to see a lot more of that kind of innovation from browser makers where they’re trying these new things, they’re throwing them in, they’re letting developers play with them, and like I said, it’s kind of a chicken and egg thing I think where the browser makers would like to do this maybe, but they’re afraid of the backlash from the standards community. If they’re adding new properties that aren’t part of a spec, you know, the standards community is…has proven that it’s going to backlash against them and it’s going to say, ‘why did you add this, this isn’t in the spec’, and so then they don’t do things, but the developers and designers also would like to try new things but…so it’s kind of a chicken and egg thing there a little bit I think. So that’s the…that’s the main …the main plan I have on that, and the, you know, like there are examples, like X….sorry, XML HTTP request or Ajax, you know, was a pr
oprietary IE property that they just put in, and eventually got standardised, and that’s kind of the way that I would like to see it go more is where the browser makers are doing new things and then we’re trying to standardise them, which is the opposite I know if, you know, some really respectable people and friends of mine like Jina Bolton and Andy Clarke which see that it should go the other way, which is that specs are written and then browser makers standardise on them, so…

Paul: Yeah…I must admit, listening to you talk kind of fills me with a certain level of dread, to be honest, when you talk about browser manufacturers. You know, I studied…I studied designing websites back in ’95, and you know, and so I lived through this whole period of time where you have browser manufacturers, you know, introducing all kinds of bizarre tags and it was absolute chaos, you know, and you didn’t know what was happening on what browsers. What’s to stop that happening again, beyond the standards community growling in the corner aggressively?

Jeff: Yeah, well I mean that…I mean I was there for that too. I studied also in ’95 and yeah, it was pure chaos. But I think, you know, I mean first of all I think the standards community has made a lot of inroads to where these, you know, I don’t think it would be complete chaos simply because we understand the value of standards now. And there are some…there are some mechanisms in place like the name spacing I’m talking about, where they can do these things and keep them from conflicting with other…so when …when WebKit decides they’re going to add border radius property, they can do it under dash webkit dash border radius, so that if anybody is actually using the real border radius without a, you know, prefix, you know, there’s no conflict, so I think, you know I just feel like there’s some mechanisms in place that would keep it from being so chaotic and the value of standards we’ve learned through the web standards movement, you know, and the browser makers are now on board with the idea of inter-operability, I think would keep it from being so chaotic, but I guess I don’t know for sure. It is…it’s definitely…there’s definitely a balance there because I definitely feel like the browsers have not been doing as many new things as they did back in those days, but those new things did cause problems too, so it’s, you know, but as a Designer I sometimes get bored, I’m like, I’ve played with all that stuff; I’ve played with all the tools we have and I want to try something different, you know, I want something that will…I want advanced grid positioning and, you know, I want to be able to draw shapes and, you know, it’s not out there.

Paul: I mean that is the only trouble I guess with…you know, you were talking about innovation and we need to be innovating more as Designers as well as browser manufacturers. The trouble with innovation to some degree is that you’re always in danger of undermining users’ expectations. I mean this is something you hear someone like Nielsen go on about loads. How…where do you feel the balance is between kind of doing cool new stuff and…you know, not undermining users’ needs or expectations?

Jeff: Well you’ll probably remember from back in the late ‘90s and that sort of thing that there was….and another sort of interest of mine is the sort of demise of the personal website, but back in those days, there was just so many experimental kind of crazy out there personal projects that were happening, and I think that that is a great place to try those things, because they’re not…they’re not real users accessing them; people that are using them are, you know, expecting that, I mean that sort of thing’s a great place to try new things, is on personal projects. Now again, with the culture of compliance that we have, I don’t know how that would fly today. Like if somebody made some crazy experimental site, I think there’s a certain fear of doing that because of backlash again from the web standards community, like you know, it’s a thing where people aren’t seeing the…the meaning, you know, it’s…I’m putting this out there because I’m trying to do something new and difference and …and it’s almost not allowed by the web standards community. Well, you can’t do that, because it doesn’t validate, or you know, whatever. And again, like I said, that’s not always specifically about validation and mark-up. It goes onto the…to that …into usability and into layout and design where people say, don’t change that because it’s messing with users’ expectations, but I think there are places where you can try those things and personal projects to me are the big place where you can try that.

Paul: You’ve got a good point about personal website. It’s like everybody now …have…you know, it’s all about blogs isn’t it, it’s all about….there’s almost this kind of citizen journalism thing where, you know, we’re all actually trying to create a little audience for ourselves and so therefore we don’t want to do anything too dangerous with our…with our personal sites. I remember my….my first personal site was absolutely chaotic, you know, it had no proper navigation whatsoever, but it was fun, it was a place I could experiment, so yeah…

Jeff: Yeah, that’s a real kind of…pet annoyance of mine is that …the loss of that, and I do think, you know, it’s because everything’s a blog, and I love blogs, and you know I have a blog, but I still wish that there was just a little bit more of that crazy experimentation that we had going on back then.

Paul: Mmm. I mean it’s a good point as well. A question I often get asked by people is, you know, how do I promote myself online. They say, I don’t want to…I don’t want to run a blog because I don’t want to write. Well you know, a personal project in a way you’re trying out different things like a sandbox you can play in. It’s a good way of promoting yourself and showing what you’re capable of, and that you do innovate without having to write reams of stuff, because let’s face it, not all of us are big writers, so….yeah

Jeff: Right.

Paul: Good to have your perspective on things. It’s really nice to have a kind of new perspective and you know, a different point of view, so great to have you on the show, and no doubt we will get you back in again in the future. Good to talk to you.

Jeff: Great. Thanks so much for having me.

Thanks to Anna Debenham for transcribing this interview.

Listeners feedback:

Getting a site
off the ground

Shaun writes: Following the headscape redesign and promised boagworld redesign what tips can you give to getting a personal/own site off the drawing board/local machine and actually published.

The problem with internal projects is they lack motivation. They are never as important as client work because they donʼt directly generate income. The answer is to increase their perceived importance. I use a number of techniques:

Document the benefits to your business or personal profile.
Produce a statement of work just as you would an external client.
Price the project so that you can set it against your targets as a marketing cost.
Set a deadline and preferably announce that publicly so you are forced to meet it.
Block out time for the project rather than attempting to “fit it around” client work.

Ultimately it comes down to determination. However, knowing the value of the project and treating it as any other project really helps.

Testing

Erich writes: Thanks so much for the show, all the work you guys put in really shows. It is great learning about aspects of the business that I donʼt get to deal with much.

I was just wondering if you guys had any kind of a testing station at Headscape. We are looking at putting something like that together at my work. Somewhere you can just go sit at and run through all the browsers, maybe even some with different versions of flash and such. Do you guys run anything like that?

Because our designers are based remotely it is not easy to have a central testing suite. We did try that at one stage but it did not work. Connecting remotely wasnʼt as smooth as it should have been and we found multiple designers often wanted access at the same time.

Currently, each designer runs a number of virtual PCs on their individual machines. Most have two versions of XP one running IE7 and one with IE6. We also run multiple version of Firefox and Opera. Most of our designers also own macs allowing them to test Safari. Those that donʼt connect to a mac in the office.

To be honest our testing environment is not the most sophisticated. Most clients do not want to pay for testing against minority browsers and when they do we setup something specific for their needs usefully using a virtual machine. If you are interested in setting up your own Virtual Machines then I recommend VMWare Fusion⁽⁷⁾ for the mac and Virtual PC⁽⁸⁾ under windows.

What goes into a user testing script

Posted in User experience on February 29, 2008 by Paul Boag

I have talked before about the benefits of user testing. I have discussed how to user test on a budget. Now, I want to look at some basics that go into every usability test script.

What should go in a usability test script? That largely depends on what you are testing. If you are testing design concepts then your testing will be limited to questions about the navigation and communication of core messages. You could carry out some flash testing but your options are fairly limited.

However, if you are testing a wireframe or version of your site then more options are available. In such cases, the testing is about completion of tasks. For example, could the user find the price of a particular product, or the contact details for a key member of staff.

The choice of tasks to test should be based on key activities that your personas wish to complete. Let me give you an example. Let us say we have a persona called Jane who was considering attending a health spa. The first two pieces of information Jane wants about the spa is price and availability. It is therefore logical that any testing for the spa should include tasks to find this information.

Although what is tested will vary, there is some information that should always be included. Below are highlights from a fictional transcript demonstrating what should always be covered.

Hi Jane. My name is Marcus and I am going to be running the session. Joining me is Paul. I have asked him along to take some notes as we talk. I hope that is okay.

By introducing yourself and others in the room you help to put the user at their ease. Offering coffee can help too! Be sure to explain any recording equipment in the room as this can be intimidating.

The idea of this meeting is to see if we can improve a website that is currently under development. You are going to help us test the site. Its important to understand that we are testing the site and not you. So you can relax!

By explaining to the user that you are testing the site and not them, they will behave more naturally.

I should also explain that there are no right or wrong answers so don’t worry about messing up.

We need you to be honest. If you are struggling with something or don’t like the way it works, say so. You aren’t going to offend anybody.

If the user perceives the session as a test (with right and wrong answers) they will tell you what they think is right, rather than what they feel.

Also, many users are worried about offending the facilitator with negative comments. This is why it is important to stress that you want honest answers and no offense will be taken.

The most important thing to remember is that we need you to explain what you are thinking. Try to think out loud and talk about the various options you are considering. Before you click on any link explain what other options you considered and why you picked the one you did.

Getting the user to articulate their thoughts is fundamental to the success of the session. It cannot be stressed enough. Even though you have explained this up front, you will still need to prompt them throughout the session.

Finally, if you have any questions please feel free to ask. I might not be able to answer them straight away because this could prejudice the testing. However, I will answer them at the end.

It is important to explain why you may not answer their questions during the session. If they do ask questions be sure to address them at the end.

Let’s start off with something easy. Can you tell me a bit about yourself? Tell me about your job?

It is always good to begin a session with some simple personal questions such as family status, age and job title. This helps build the users confidence and provides useful background information.

Tell me a bit about your computer experience. How confident do you feel using a PC? Do you use them for work? What about at home?

How much do you use the internet? What kind of sites do you use regularly and find most useful?

Building up an understanding of the users computer and web experience provides context for the session. It also indicates how representative they are of the target audience.

Okay, lets talk about the site. Its a site for a health spa. Before I show you the site I want to ask about your expectations. What do you think a health spa website should look like and what information would it contain?

It is helpful before revealing the site to ask users about their expectations. If the expectations do not meet the reality it can cause confusion. Asking about expectations also provides opportunity to find out more about what users want from the site.

The session would then continue to address issues specific to the stage of development the website was currently at, This part of the test is primarily either “do they understand what they are seeing” questions or task completion.

Random News

Posted in News on February 29, 2008 by Paul Boag

Boagworld has moved, the forum is back, Headscape has rebranded, our product is shaping up, the book is progressing and I seem to be speaking loads.

Wow! Life feels like it is moving at 100 miles an hour at the moment. I am busier than I have ever been, but it is all incredibly exciting.

Here is a random collection of the cool stuff that is happening.

The Boagworld website has moved

For a while now we have had problems with the hosting of boagworld. You may or may not have noticed it depending on how you use the site. However, the forum was particularly bad.

Well, we have now moved over to Media Temple and the site is flying. Check out the new enhanced forum and add yourself to the boagworld listeners map.

Headscape is rebranding

Setting up Headscape was an unusual process. We took a number of clients from our previous company and so was busy from day one. However, like any company, we needed things like letterheads, business cards and branding. The result was that I threw together our logo in under an hour and moved on with the next thing.

Well it is 6 years on and we are still insanely busy. However, it is time to finally get a professional to produce our brand identity. The obvious choice was Mr Hicks and what a stunning job he has done!

Unfortunately, because we are still run off our feet we haven’t managed a proper launch. Although Jon has provided most of the marketing material we need, the website is still down to us (we thought it wouldn’t look good if he designed that!)

However, rest assured we are working on it and it should appear before too long! What is more, this has spurred me on to look at redesigning boagworld. We will see!

Our product is coming

Part of the reason things are so busy is because we are developing a web based application. It is looking pretty good and it won’t be long before we start a closed beta. However, if you are coming to SXSW then grab me and I’ll show you a sneak peek to whet your appetite.

For now all I will say is that it will “make getting design sign off a breeze“.

The book is progressing

A number of you have been asking how the book is coming along. Well, after stalling for a while it is moving forward again. Best of all we are reaching the point where I am able to release some of what I have done for you to check out!

Also my publisher run a special scheme which some of you maybe interested in. Although we intend to give the first chapter away for free, you can also sign up to receive draft chapters as they are written. You do have to pay for the privilege but will receive the final book at the end. Think of it as being a beta tester for the book.

I’ll let you know more as things progress.

Speaking

Not that I have a lot of time for writing at the moment as I seem to spend half my days preparing presentations. Here are just a few of my upcoming speaking engagements. If you happen to be attending any of these let me know (especially if you are coming to the Great British Booze-up). I would love to hook up!

SXSW – Social networking and your brand
Highland Fling – Conference host and interviewer
@Media 08 – A panel on business and management
FOWD – Promoting and selling web design services
Singularity – No idea what I am speaking on yet!

So in short… I am busy! Despite that, its loads of fun.

Show 102: Worktime blues

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

On this week’s show: Paul looks at why you should have a training budget and how to spend it. Marcus looks at capturing requirements and Roo Reynolds introduces us to the possibilities of virtual worlds and their impact on web design.

Download this show.

Launch our podcast player

News and events | Marcus Requirements capture | Paul: Spending the training budget | Roo Reynolds on virtual worlds | Question of the week

News and events

10 Absolute “Nos!” for Freelancers

I know that many of the people that listen to the boagworld podcast are freelancers so I keep an eye out for stories that appeal to this group. I was therefore drawn to an article in my news reader entitled 10 Absolute “Nos!” for freelancers. It’s a great article that lists 10 questions asked by clients to which the answer should always be no.

The questions include classics such as “Can you show me a mock-up to help us choose a designer/developer?”, “Can I pay for my e-commerce site from my website sales?” and “Can I just pay the whole amount when it’s done?”. Almost without exception I agreed with every item on this list. The only exception is “Will you register and host my site?” because I think a lot of clients expect this even if it is a pain in the arse. Of course, the fact that I work for an agency rather than as a freelancer could be colouring my view on this one. However, whether you are a freelancer, an agency employee or just an enthusiastic amateur this is all good advice.

Making the most of working with designers

Adaptive Path are an agency I really admire. Not only do they produce some cutting edge work they are also some of the foremost thinkers in the world of web design. I was therefore understandably interested when one of their clients recently asked them how to make the most of working with a design agency.

The resulting blog post called “Making the Most of a Design Engagement” is a fascinating collection of tips that is definitely worth a read.

The subject of how an agency and client engage is something that I have posted on a number of times [1], [2], [3]. However, reading the perspective of another agency (especially one so well respected) is very enlightening. What I found most encouraging of all is that they obviously struggle with the same kind of client issues we all do.

Whether you are somebody who commissions web designers or whether you are a designer yourself take the time to read this short post.

How Open ID will change your site

Just before I went away on holiday (did I mention I had been away?) there was a new post on the Think Vitamin website about OpenID. I am a big fan of OpenID and have spoken about it before on the show. However, its a tricky concept to explain. At its heart it allows you to login to all the many services you use on the web from one single site so having to deal with only a single username and password.

I sincerely believe that if you are building a new website that has any form of login then you should consider including an OpenID login. The problem at the moment is that you will have to do this in addition to the normal login process. You might wonder if it is worth the effort.

The article on the Think Vitamin site does an excellent job at explaining just how significant OpenID is going to be (even though it exaggerates it in places). It explains the background, the problem and the possibilities. If you haven’t looked at OpenID yet or are sceptical about its worth then the Think Vitamin is a great place to start.

Good practice when working with Tag Clouds

Tagging is everywhere these days. From Flickr to Delicious every site seems to have tags. Even blogs like this one has tags. Tags are a useful alternative form of navigation that allows users to quickly find related content no matter where it is in the sites hierarchy. There is no doubt they are powerful and incredibly useful especially on larger sites with a lot of content.

The problem is that they are relatively new. We are still working out how to successfully integrate them into our websites and what role they play. Fortunately a recent article entitled “Tag Clouds Gallery: Examples And Good Practices” attempts to establish some best practice for tagging and makes some suggestions about their design and integration.

If you are doing some design work with tags or if you are looking to add tags to your own site then you may want to take a look at this post. My only word of caution is that it only tells half the story. It addresses tag clouds but says little about how tags on individual pages should be displayed.

Marcus’ bit: Requirements capture

While Paul has been buddying up with Mickey, Donald and Pluto, I have been working with a UK higher education institution at the very early stages of their website redesign project.

One of the things that we have been discussing in detail is the process we will go through to capture requirements and set objectives for the site. I thought I should share them here.

Existing site review

I have looked in the past at carrying out an expert review relating solely on a site’s information architecture. A site review takes on board some aspects of the existing site’s IA but is more general than that.

I tend to look at the following site features very much from a usability point of view:

Navigability – can I find things?
Consistency of navigation
Visual hierarchy – consistency of the design
Writing style
Processes – search, making a comment, ordering etc
Terminology
Content – grouping, repetition, wide/narrow mix, internal/external mix etc

The main purposes of the review are:

To highlight to all stakeholders what the site issues are
To highlight to all stakeholders positive aspects of the existing site
To suggest possible solutions to issues
To explain the processes involved in achieving goals

Stakeholder interviews

We have found that interviewing key internal staff (i.e. content owners) and sometimes key users, is the most valuable exercise in creating a requirements and objectives document.

Each interview is done on a one-to-one basis to ensure that people say what they really mean! The interviews are semi-structured which means that we will create a script of questions but will happily allow people move off-track.

The interviews aim to gather opinion on the site’s user base, weighting of content, issues and opportunities.

Work together

Though we are usually brought in as experts to consult on this type of process it is imperative that the client is involved at every step of the way. This is because one of the purposes of the exercise is information gathering. For example, creating user personas based just on stakeholders interview input may miss something that discussing/reviewing with the web team would not.

Create the document

What we are trying to do is record all findings in a manner that can be used as a basis for all the work to follow – IA, design, copywriting, build etc. In other words – create a list of requirements for the new site and give them an order of priority.

It needs to get into detail to be useful. A recent review we carried out contained over twenty specific opportunities for the site, which target audience groups each issue related to and how the site could deliver each opportunity.

This was coupled with a detailed list of requirements per audience group – 25 audience groups with over a hundred requirements. The requirements we also graded for importance into ‘must haves’, ‘should haves’ and ‘nice to haves’.

Paul’s corner: Spending your training budget

I recently received a question from Harry asking “what approach do you take to training?”. He has some budget set aside and is wondering how he should spend it. As I am always keen to spend other people’s money this seemed the perfect subject for me to talk about… read keeping your skills sharp.

Training course give away

While I am on the subject of training, the guys over at Clearleft have two training courses coming up on January the 24th and 25th in Brighton. The first is CSS mastery by Andy Budd and the second is Bulletproof AJAX by Jeremy Keith. If you would like to attend but cannot get your company to produce the £345 + VAT for the early bird fee then I might be able to help. I have one free place to give away to either course (your choice) for a lucky random winner. We will announce the winner on our Christmas special so entries need to be in by Friday 14th of December. Just send me an email with your name and contact details with “clearleft competition” in the subject line.

Ask the expert: Roo Reynolds on virtual worlds

Paul: Okay, so joining me today is Roo Reynolds who is a meta verse evangelist for IBM, Its nice to have you on the show Roo

Roo: Hi Paul,

Paul: What on earth is a meta verse evangelist?

Roo: That’s a good question, I guess a meta verse evangelist is someone who helps people understand the very exciting and confusing area of virtual worlds.

Paul: Ah, virtual worlds. Now the people listening to this show might be thinking what has that got to do with web design, why have we got someone one on here talking about virtual worlds and I am quite happy to admit that that’s not our normal fair. Its not what we normally cover on the show but I wanted to get Roo on partly because um, well to be frank we grew up together didn’t we pretty much

Roo: we did we were family friends for many, many years

Paul: yeah, which was very bizarre to then discover the he is a kind of world authority on virtual worlds. so that sounds very dramatic doesn’t it

Roo: A thought leader?

Paul: A thought Leader

Roo: I remember inheriting your old star wars toys Paul

Paul: There we go, So I set you of on a good direction in your career by getting you into Sci-fi early. I am now taking all of the credit for all that you have achieved since then.

Roo: Its all thanks to you (giggle)

Paul: yeah (hahahaha) Well um, but I though it was quite interesting. I was doing a presentation where one of the things I wanted to talk about in this discussion was upcoming and emerging technologies and how they would affect things and I wanted to talk about virtual worlds and realised that I knew absolutely nothing about them so I gave Roo a call and we had a chat on the phone. Then I got educated so I figured I ought to pass on that education to everybody that listens to this show so that’s um, a bit of the background. So lets kick of the with the first questions. So what exactly are virtual worlds and why do you think there is so much hype surrounding them at the moment there has been lots of talk about, you know, things like second life and that kind of thing. Perhaps if you could explain them a bit, and explain why there is so much enthusiasm about it at the moment

Roo: yeah I can try. So I guess I can ask you to think about it. as it a good an example anyway, probably the most popular example of a virtual world. At the moment. So these are things which are kind of digital online environments or as some people would describe the as multi-user virtual environments its that kind of online social space. So to the untrained eye they might look a lot like game but there are no game elements inside virtual worlds or rather there are but they exist within the broader world. So something like second life doesn’t really have any point there is no final point no enemies to kill there is no “x” level to achieve its just a world and if you want to inhabit that world and build a shop or you want to habit that and be an explorer and wonder around finding interesting things and talking to people then that cool as well.

Paul: Hmm, I mean the immediate thing which comes out of that is well, you know, what is the point. Why do people take part in virtual worlds and what kind of ways are people using them

Roo: Yeah, there are a lot of different answers to that, almost as many answers as there are different people really so as in the real world there is not point. people make up their own point they decide that the are going to make a lot of money or they are going to be an artist and be well known or open a sex shop or whatever it might be and people will have different personal goals which they set themselves. So really any goal is a tangible thing that people will almost determine for themselves

Paul: So I guess in many ways its like the web itself it’s a tool and how chose to use that tool is largely up to you

Roo: Yeah exactly. And within that you will get lots of different things, I mentioned some, you will also get games within that so people play chess inside virtual worlds and people do all kinds of crazy things. Yeah I guess the answer to your question is really why is there so much hype about them, its because over the last 12 months or 16 months or so the press has been covering this is quite a bit way. That turned it into a kind of hype feeding frenzy. Garner had a very famous prediction about how 80% of active internet users by 2011 I think it was will be using virtual worlds and will have an avatar. Not necessarily in second life but in a virtual world. And all of this make people realise that this might just be the next “big thing” its gone from being the kind of space where people will, I don’t mean this in any derogatory way, everyday people will would hang out in to becoming a space that a lot of big companies and small companies and advertising and marketing firms are really getting interested in. You know we have all seen “the web” in that ,very early in my career, was the web being picked up by corporation and some people almost missed the boat and had to catch up later on

Paul: So Why do you think this is going to be the next big thing? Why do you think a virtual worlds are going to be you know, you talked about how some companies had to play catch up on the internet you almost imply that this I going to be as big as the internet is. Did I miss interpret that or do you really think its going to be incredibly significant and if so why?

Roo: Well, I think it is always going to be a subset of the internet, you know, this is just another communications media and its probably will remain a subset of the web. There will always be a place for flat 2D content, But once you start getting into 3D social stuff and giving people a real time opportunity to relate to each other and see each other and this sense of presence where you can see what the other is paying attention to. For me joining a circle for the first time, a circle of people talking and I walked up to it, and you know people took a step back to invite me into that circle. That was a really compelling moment to me. It was also a real eye opener that the “real world etiquette” that we see in society all the time actually was playing out for real in this virtual space as well. In terms of why it might be the next big thing a lot of different elements are coming together at the same time here, we finally have, almost complete availability of broadband, certainly in this country and in the west. We have got fairly powerful machines now that have 3D graphics accelerators and sound cards, this is something which is now also happening in corporate environments as well as at home. There is kind of a point in time where the… someone might describe it as a tipping point where there is this lot of interest and we have seen this massive press interest, but also big companies getting involved, you know when you see Sony with their playstation home project which is going to be like a lobbying environment for the playstation 3 its been delayed a little bit, but that is really the kind of mass Market application for virtual worlds and it is things like that which really opened my eyes to where this might take is. This is not going to be a niche thing with a few geeks hanging around and some would argue that it has never been that. Really virtual worlds have been attractive to creative people and to the people who feel like they want to kind of express themselves and share things, Its not full of 16 year old boy with glasses sitting in their bedrooms and really there is a difference between games, traditional online games and Massively multiplayer online role-playing games And a space like virtual worlds that allows them to be attractive to the mass market . So yeah I wouldn’t say it is going to replace the web or even be the largest portion of the internet. But there is certainly a growing space for these virtual worlds

Paul: so what, I mean, I can understand how some people are maybe making money out of being involved in virtual worlds where, I don’t know, where they are creating things which they are selling inside that virtual world, but what about other companies, how are larger organisations using it. For example, how do IBM use it?

Roo: well, we are maybe quite weird in because we do an awful lot in virtual worlds. We do everything from recruitment too employee discussions and meetings. although of course we cannot use a virtual world for confidential discussion, we certainly have the types of meetings we would have in public spaces, like conferences, we also have virtual facets to real world conferences like forties a really big conference we run, and we had that for the first time happening in second life running in parallel to the real world event so people who could not make it to the real world event could at least attend. They could see and hear some of the presentations and they could mingle and network. So like I said we are a bit weird in that in that we do so much, that’s partly because we are such a big company. Now a lot of other people would look at it and say they have a very particular need or desire, something they want to get out of it and for some people historically it has been marketing, or advertising, it has been to reach a wider audience or to reach them in a different way. Which is more playful and allows them to be really participants rather than just eye balls

Paul: yeah, I mean one thing you said was earlier was that you referred to virtual worlds as a subset of the internet and the web. Its another that that going on online. One of the things which strikes me is that if you do something, in something like second life, say if you run a conference that conference is kind of just fenced into the second life world so its not going to get picked up by search engines, its not going to be very accessible and things like that do you think that there are going to be changes in that, do you think there will be more crossover between virtual and maybe the more traditional web

Roo: yeah absolutely this is one of the areas that really excites me at the moment, this whole area of interoperability and that needs to be not just between different virtual worlds but also between the web and virtual worlds so this idea of the virtual universe sort of thing as a virtual world or virtual worlds is something that IBM even throws this term 3D internet around quite a lot. In a kind of evolutionary next step when you look at virtual worlds today they tend to be proprietary walled gardens and actually a lot of people would compare them to AOL in the mid nineties but actully when you start thinking about how they may interconnect, and that inset just moving your avatar from world of war craft to second or habbo or whatever its actually much more interesting than that. Its things like bringing you wallet with you your friends list with you being able to blur the lines between virtual worlds and bring content in from the web and share content back out to the web, these things are beginning to be possible and in some ways one of the reason I think second life is so successful because it does have the ability to make request to web content and bring that in so you have dynamic stuff going on. But that is still very early days and I think that we will probably see a massive focus and in fact the big conference in san hosa very recently where this came out in a very big way but a lot of companies will be wanting to get together and its very, you know the will is definitely there to have a real focus in the next few month on interactivity

Paul: I mean so, I am kind of very aware this for many of the people listening to this show that are kind of a mixture of designers, developers, you know, people that are running websites that a lot of this is very theoretical and it is not something they would be directly involved in at the moment. I mean do you think there is anything that they should be doing, that they should be aware of when it comes to virtual worlds. Is this an area you think they should be keeping an eye on or doing anything actively.

Roo: Yeah, I guess most people I talk to even if they are not going to rush out tomorrow and buy some space in some virtual world and um, you know its not for everyone. But most people who I talk to at least want to stay informed once they have got that hook in their head that this is, you know, I obviously find it very interesting but people tend to come away with the a sensation that this might go somewhere and there is enough evidence already today that its fairly compelling, if you look at it on the “garnet height curve” this idea that things go though a life cycle of interest it haven’t yet peaked the top of that and it is now falling back down into this trough of disillusionment in the long run what might happen it might reach the stable plateau where it will actually become a really useful space that interesting work will happen and kind of follow the same progression as so many technologies before it. Most people come away with the feeling that they want to keep an eye on it. Now I guess if I am going to step back a little bit and look more broadly at what is going on, on the web then for web designers and for almost all of them, this is very big on their radar the whole area of social online collaboration and this whole “web 2.0″ umbrella which you started talking about a year ago if not longer and has been you know really quite large for me, that fits very neatly into this same space. What you are talking about are people sharing content and whether that is a a chat or something they have built themselves you know, you look at a world like second life and most of it is not built but the company that runs it. As with youtube and del.icio.us and as with flickr and so many other popular services and site these days, it is built by its users. So maybe it is something people need to be aware of maybe its something which will gradually fit into a growing mentally of this is how the web works. Yes it happens to be 3D at the moment on the popular ones and yes they are not all currently delivered through websites, mind there are plenty that are, and there probably will be an increasing number that are delivered though the browser. So yeah, if people find this stuff interesting then they should keep an eye on it, maybe read a bit more about it.

Paul: Where is a good place for them to go then to wrap up, as far as if they want to find out more information or want to read up about the potential of it, where would you recommend they start by looking?

Roo: well there are a lot o very good blogs out there, if they have a very academic mind then they and want to read some really good writing on the subject then the best one I can think of is http://terranova.blogs.com/ , its one that I have guest authored for, but not the one I regularly write for, the one I regularly write for is http://eightbar.co.uk/about/roo, which has got a growing profile in the space of virtual worlds, That is written by a bunch of IBMers writing about what they find interesting. I have a personal blog a personal blog at http://rooreynolds.com if anyone wants to follow that although, please don’t all come at once

Paul: (Laughs) its really not that popular out podcast that it would…

Roo: no you are paul, you wouldn’t know how popular you are, but you are.

Paul: That’s okay, Thank you very much for you time , I think it is interesting we spend so much time on it with the immediate here and now problems, but every now and again it is nice to poke out heads above the parapet and see what is going on a bit further afield; so thank you very much for time coming and being on the show

Question of the week

Do you think virtual worlds are going to be a mainstream method of online communication or are they a novelty doomed to failure? Answers in the comments.

Show 101: Delusional

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

On this week’s show: Paul finally looks at the subject of intranets. Marcus delves deeper into the subject of rates and Andy Budd discusses getting design sign off.

Podcast: Download (28.8MB)

Download this show.

Launch our podcast player

News and events | Marcus: Rates (Part 2) | Paul: Intranet delusions | Andy Budd on design sign off | Question of the week

News and events

OpenSocial from Google

The big news this week is the launch of OpenSocial, which is a new way for developers to build widgets/applications for a number of high profile social networks. At the moment the line up includes Google, MySpace, LinkedIn and many more. It really is an impressive list of partners.

This is exciting news for those who wish to deliver content to existing social networks as before OpenSocial it was necessary to re-code your application for each site it was delivered to. In many cases this just wasn’t worth the effort and a lot of developers just focused on the big name that is Facebook.

Now developers can build once and deliver to any number of social networking sites. However what is even more interesting is that you can build these applications using nothing more than HTML and Javascript. Unlike building an application for Facebook, coding for OpenSocial looks like it is going to be extremely easy.

The development community is still trying to get their head around what exactly all of this means but it would appear that OpenSocial does not go as far as some would like. For example (as Jeremy Keith points out) it does not solve the problem of having to re-enter your personal details and friends on every site you sign up for.

Content and presentation

I came across an excellent post by Mark Boulton this week that looks at how designers engage with content. He comes at it from the angle of typography, arguing that it is about a lot more than just typefaces. However, his underlying point is much broader.

How often do we really engage with the content on the websites we design? Does the content inform our designs? Are we just building templates that get populated or are we really working with the content in the same way art directors do?

If you look at traditional ad campaigns the design and content work hand in hand. The design reinforces the message and the message informs the design. Although we see this all the time on TV commercials, billboard ads and marketing campaigns we rarely see it on the web.

In many ways we have cracked a lot of the technical challenges of the web. We have best practice for coding, accessibility and usability. We know how to make our sites available and usable for all. But do we know how to really engage with users? How to interact with them on an emotional level? That is the next big challenge.

Online calendars and date pickers

The final news story for today is another great list from Smashing Magazine. This time they list the top online calendars and date pickers. I don’t know about you but I seem to spend a lot of time working with dates for various reasons. Much of the information we put on the web is date specific, from events to blog posts. It is common to want users to be able to search by date or access a calendar of events.

This post from Smashing Magazine offers a plethora of date related tools from online calendars you can embed into your own website to date pickers that avoid those difference in date formatting.

If you ever need to work with date related information this list is worth a look.

Marcus’ bit: Rates Part 2

This can be a tricky subject and, because of that, I’m not going to go into what Headscape charges. I’m going to look at some survey figures and talk about charging for different services and when and how you should go about raising your rates.

This topic is of interest to both clients looking for an agency as well agencies and freelancers – we all want to know if we’re competitive. To save myself writing about this from both angles, and probably confusing everyone, I’m just going to concentrate on this from an agency standpoint. However, each point is easy to switch round to the client angle.

Enough rambling…

You get what you pay for

So using my favourite car analogy, are you offering a Bentley, a BMW, a Ford or a Lada! I guess the point I’m making is don’t over or under sell yourself. Recognise what you can offer and go hard for that market.

Have you got thousands of happy clients being serviced by a hundred staff in marble clad offices in central London? Or are you and your mate from Uni just kicking off your business in your dad’s garage?

You might not like it but talent, in this case, doesn’t really matter one jot. No big spending client is going to go for our second option above. This is fact of life. Accept it, move on.

If you want to charge top dollar then you need to show the following:

Relevant, high quality portfolio
Reliability and flexibility
Wide range of services
Innovation or at least ‘keeping up’

So, what do people charge

Right here, right now – I don’t know. However, I have got details of a UK survey carried out a couple of years back that, with a bit of an uplift, are I believe still relevant.

These are daily charge out averages across all agencies that submitted to the survey:

Director – £750
Consultant – £650
Creative lead – £670
Designer – £570
Project manager – £600
IA/usability consultant – £610
Developer – £610

Of course, the actual figures varied greatly even within certain disciplines. For example, creative lead rates were as low as £370 and as high as £800.

Pricing roles

At Headscape we used to have one flat rate for all services provided. At the time, this felt fair and was certainly easy to manage.

As we have grown, we have found that the pressures on some staff, particularly the directors, have grown markedly and therefore we have had to charge more for those roles.

Regionality

The survey suggests that regional price differences are, pretty much, London and ‘everywhere else’. Notably with the South West coming a strong second! (We are based, more or less, in the South West).

Large city based agencies will always be able to charge a premium but I expect this is less so now due to ease of communication. We have had a number of clients over the years that we have never met.

Raising prices

This is a balance. We should all raise our prices to keep up with inflation but, we should only do so if we think the market will take it. Also, it’s possible that a particular service that was seen as ‘cutting edge’ and therefore got a high price tag, may later become ‘run of the mill’ so it’s possible that you may need to cut the price for that service.

Paul’s corner: Intranet delusions

I have been asked a number of times to talk about Intranet development and I have always avoided doing so. This is partly because I am not an expert in the field (although that doesn’t normally stop me talking about something!) However, it is also because intranets are a massive area and one in which so many mistakes are made. There seems to be a huge amount of naivety about developing and running Intranets. Against such a backdrop I am somewhat unsure where to begin.

In the end I have decided to take 5 of the most common misconceptions about Intranets and see if we can shed some light on why they are wrong.

Ask the expert: Andy Budd on design sign off

Paul: Joining me today is Andy Budd, hello again Andy.

Andy Budd: Hi Paul, how are you doing?

Paul: Not bad, it’s been a little while since I’ve had you on boagworld, I think?

Andy Budd: It has, I think it’s been a couple of years now, I think it was d.construct 2006 was the last time I remember chatting to you.

Paul: Unbelievable, I’ve spoken to you since then on the .net podcast mind, so, we’re keeping in touch.

Andy Budd: Yeah, and also just hanging out together, and doing, ya know, things.

Paul: I try and obviously avoid you, because whenever I meet you, you seem to be horribly rude to me but I will forgive you.

Andy Budd: What?!?

Paul: (Laughs)

Andy Budd: Oh Paul, you know that’s not true, that’s not true.

Paul: Ye, but I want to paint you in a bad light and get a bit of sympathy for myself.

Andy Budd: Oh okay, that’s your tactic actually isn’t it?

Paul: Yeah.

Andy Budd: I also heard that you try and play dumb, so ya know, everybody else comes across as being smart and you get the sympathy vote.

Paul: You’ve been listening to the Rissington Podcast haven’t you?

Andy Budd: (Laughs) I have indeed.

Paul: (Laughs)

Andy Budd: I’m not sure I’d buy that but, ya know, it sounds good.

Paul: You think I’m just naturally dumb?

Andy Budd: … So what was the first question?

Paul: Okay.

Andy Budd: (Laughs)

Paul: First question, no, what we’re going to talk about today with Andy is just looking at maybe processes, ya know, when you run a website company how do you go about dealing with getting things like design sign off and this was something that came up quite a lot in the 100^th episode that we recorded a little while back and is also some we talked, we vaguely talked about running a web company on the .net podcast recently but I kind of wanted to home in more on design, because design is a hugely subjective area and getting design sign off is quite a challenging process. So Andy lets kick by just, if you could give us a rough sketch about how clear:left go through the design process, what are the steps that you go through?

Andy Budd: Yeah absolutely, it’s kind of interesting because it has changed, ya know, a small amount anyway from when when we started to what we’re doing now. I guess one of the main differences from what we do to what a lot of other agencies do is we generally only present a single design concept. It’s very common, particularly for companies that come more out of a print background to do this whole idea of like, we’ll show three design concepts to a client, I think that partly comes from a desire of print design companies too sort of make a bit more money rather than just showing one design, they do three designs a let the client pick. I’ve always found that this is kind of an odd way of doing things because, well first of all I don’t think you really giving your client good value because what your ending up doing is your doing three times the amount of work and the client only get a third of the value, they get to pick one of those three designs.

Paul: (Agrees)

Andy Budd: The other thing I’ve found is whenever I worked at agencies that have taken that process and I’ve been the designer developing the designs invariably what happens is you, say you’ve got a week to produce the designs, you spend maybe three of four days on one design and it’s working really well and your happy with it and it’s moving in the right direction, you only spend one or two days on another design which you kind of fine with, if the client picks it then your happy because it looks nice and then you’ll do something quickly for the last half a day just to kind of fill up the space.

Paul: Yeah.

Andy Budd: And then you have this horrible situation were by, even if the client picks the design that your least convinced with or what more than likely happens is they’ll pick elements from each design and create a bit of a Frankenstein’s monster, and I kind of do think that clients come to professional design consultancies for their design knowledge and their design experience and I think that from my perspective and from my experience the design that the designer feels most happy about is probably the design that fits closest to the clients goals, because that the one they’ve been spending the most time and effort on, thinking about, so really the first thing we tend to do at clear:left is only ever show our client an initial design or one design. That doesn’t necessarily mean that we’ll only create one design, quite often, for instance, Paul one of our designers, our lead designer might create a couple of different versions initially and we’ll have a design review and I’ll look at what’s going on and we’ll chat about various pros and cons of the different designs and he might spin off in another direction but we tend to show the client what we think is the best bet rather than something that is half finished or just something that we don’t think is quite right.

Paul: Yeah, I would agree with that, that the whole principle of if you show a client a multiple designs they inevitably pick a little bit from each of them and that never quite works as well as it sounds. I mean, have you ever tried with multiple designs, having more than one designer work on those designs so you do like one each with three of you or something like that?

Andy Budd: Well again, I think this goes back to giving value to the client and I don’t think it makes sense for the client to pay for two or three designers time and expertise to give them the opportunity to only pick one.

Paul: (Agrees)

Andy Budd: I think what tends to happen in that sense is design stops being about solving problems and starts to become much more subjective and almost a beauty competition.

Paul: Yeah.

Andy Budd: So what happens is rather than the client picking a design or understanding the design from a technical point of view, ya know, why you’ve, ya know, what mood your trying to create or what feeling or sensation or how the hierarchy works and how the hierarchy that you’ve created matches the hierarchy of use that you need a user to flow through. Rather than it being more scientific it becomes much more subjective and it becomes much more about, ya know, whether the client liked particular colour, they had a particular colour on their bedroom wall and they hated it or they loved it or it’s their favourite colour, so I think, again, just having that kind of three design approach makes it much for subjective and much less scientific.

Paul: Yeah.

Andy Budd: I do agree that if a clients got lots of money, ya know, your talking with a big client and they’ve got months and months of design budget available then it does make sense, the kind of clients that myself and most of my colleagues sort of deal with, they got reasonable budgets but they haven’t got budgets to burn so they want to see as much value as possible and the idea of pitching two designs just kind of, ya know, seems… it just doesn’t in an environmentally sort of, ya know, challenging world that we live in at the moment, where people want to recycle and people want to see usage. Throwing two designs away always seems a bit, kind of wasteful.

Paul: I mean, talking about the thing of making the process more scientific and less subjective, how to do you go about encouraging the client to set aside personal preference and focus on how they should really be judging the design? And, sorry, there’s a spin off question now which is how should they really be judging the design?

Andy Budd: Well, it’s a really difficult question …. I think everybody feels that they have a good understanding of what design is. Everyone’s got their own personal opinion, everyone’s got their own personal tastes, so everyone feels that they’ve got an understanding of design. We’ve all watched changing rooms, we all know that a fancy designer comes along and he’s got big cuffs and ya know paints, crazy colours on the wall, sticks vases all over the place and that’s design, but I think what people actually see is not design but the manifestation of design. The actual design process is much less creative than people like to think, it’s much less throwing bits of colour on the wall and using your creative juices to see what colours and shapes match. It is much more the processes, much more the starting off with a central problem or a central set of problems that you’re trying to solve and using design techniques: hierarchy, colour, weight, positioning, to create a design that solves a solution, and again, and you have to look at design works within constraints. If you are asked to sit down in front of a blank canvas and just create something, that’s much more than an artistic endeavour than a design endeavour. Funny enough, we were having this conversation in the office today, a couple of minutes before we had this conversation and it’s much easier for good designers to have constraints, to have content to design around to have an idea who’s going to be using the site so I think design is much more the scientific process than a number of clients give it credit for. In answer to your first question “how do you get clients to feed back in the right way”, it’s very, very difficult. Ideally, what I’d like to say is, we sit down with every single client and explain the design process in detail, explain how it all works and stuff but unfortunately, design is very subjective and also feed back is very, very difficult to interpret. If a client comes to you and says “I want it more wizzier, more zingy” their using the vocabulary they have at hand to describe something they have an idea of in their mind and our job as designers is to try and understand what it is they are actually trying to say. They are trying to communicate a visual thing or a motional thing with words and quite often it’s not possible, quite often, you will have to try two or three different approaches before you actually figure out what “zingy” means. Does “zingy” mean bright and colourful, does “zingy” mean they want motion and so it’s difficult having design discussions with people who aren’t trained in using ya know, having design discussions and frankly, I find it difficult enough sort of having internal design reviews with our designers and trying to describe what’s right and what’s wrong with the design. So I do, ya know, I do really understand from a clients perspective, how difficult it is to try and deal with their designers and get their designs or get their sense across. I think we always try and take it back to first principals. We try and encourage our clients, no to sort of worry or obsess too much over the details but to kind of think more of the broad picture so not more whether you like this particular colour or whether you like this particular shape but ya know, what kind of sense of feeling you’re trying to have this design communicate ya know, we’re doing some work with an environmental website at the moment and they really wanted to create a sense of a feeling of nature and openness and warmness but really avoid the kind of clich233s ya know, let’s have pictures of trees and ya know, it will all be green and kind of earthy. So they communicated the sense and the emotion they wanted to get across and then we obviously translated that and put it into graphical format and I think in reality, that’s what the designers’ job is. It’s translation, except instead of translating one written language into another, we’re translating a written language or an oral language into a visual language and so it’s interesting but yeah, it’s setting the boundaries and saying to people, this is not, ya know, we’re not asking you at this stage to comment on the details or on the general sense, the layout or the feeling and as you move along, get more and more specific.

Paul: You talk about how sometimes a client uses a different language to describe what they’re seeking from a design so do you ever use things like mood boards or what other sites do you like as a way of kind of getting an idea of their personal tastes? And should you be catering for their personal tastes anyway?

Andy Budd: It’s a fine balance, I mean, yes and no. Ultimately, it’s not the client that will be using the website, it’s the clients’ client, so the clients’ customers so really the ultimate goal is to create something that, ya know, the customers or the visitors are going to use, the visitors are going to love and their going to feel as though it’s their own but obviously, you are also dealing with human emotion and if a clients paying you money to create a design, you want them to be happy with it as well. Again, it’s an interesting challenge. We used to in the past, really encourage our clients to go out and have a look at different websites that are out their and we’ve actually got a, sort of a flicker group of inspiring websites that we can point clients to and say, look, here’s some of our favourite websites. Why don’t you go and have a look at some of these, ya know, use those as a basis because it’s really useful instead of asking people to off cold to describe what they want and to actually show you stuff and say, I like the typography of this site or I like the colour scheme of that site. A lot of designers will actually say, you shouldn’t ever show sites, ya know because then it kind of gets a bit derivative but I think, ya know, as we’re working on the web it is helpful to show clients similar designs in that same medium so I think it is useful for us anyway to show clients sites. And that’s always a good starting point, ya know, we like this site because and we like that site because. Unfortunately is sometimes backfires and sometime, particularly if the client isn’t as, sort of embedded in the design community as we are, they will pick some sites that they use on a daily basis that don’t necessarily show good design as designer might preserve it and then we have to kind of work round the edges and show kind of show them what we think they might be kind of thinking about, but the mood boards is a really good point it’s something that we’ve started using more recently and it’s a really good kind of first step, rather that jumping straight to the design process and possibly missing a translation, we have started showing clients mood boards, and if some of your listeners don’t know what mood boards are, they’re essentially a very quick way of explaining a mood or a sense or a feeling or a colour scheme on a design without actually having to do visual design, so what you do is take elements of design that you might have seen elsewhere, you might take some interesting photos you’ve seen on flickr, and maybe those photos have an interesting colour scheme or they might have a particular theme or sense that your trying to get across, ya know, maybe take some navigation elements from one site or a t-shirt you particular like the colour scheme from, a whole bunch of different things, put them down on a piece of paper, I mean in the old days it was a piece of paper in advertising, they would cut out bits from magazines. These days we tend to do digital mood boards which are more graphic art and photos and present them to the client, and that gives the client a kind of basis in which they can spin off their opinions, so they can look now at this mood board and say well, we said we wanted it clean, we didn’t mean we wanted it sort of white, we meant we wanted it sort of, ya know, some other adjective that works with clean, and it kind of gives them a discussion point, rather than just sitting around words you can now look at something physical and tangible and the good thing is mood boards only need to take an hour or two. And again we’re working with a client at the moment and we initially created some mood boards for them and it sparked a discussion and they weren’t sure about some of the things on the mood board but some of the things on the mood board they really liked so we worked out a second iteration which was even closer to what they wanted and when we finally sort of got to a level that we felt both of us understood what we expected from a design point of view then you can move onto the next stage.

Paul: Yeah, I mean it’s quite interesting, I think design from my personal experience is as much about what you do before you site down in front of photoshop or whatever than it is actually in the actually putting pixels on the page. I’d be interesting in what other things you do before you get to the design stage, you’ve said you use mood boards, what about things like personas what business background information do you tray and get before you start? Do you get people to personify there company and describe what kind of person it would be, ya know all the kind of techniques that people use, what do you guys use?

Andy Budd: Well again, that’s really interesting, I mean your right, a majority of people kind of think design is a visual thing, ya know, so, ya know the first thing they think about or expect when they’re getting designs is to see some kind of photoshop comps or some pretty pictures, clear:left we are a user experience design consultancy and what that essentially means is we kind of do meta design, we don’t just do the visual stuff but we design the systems and so what we do from the outset of dealing with our clients is we have workshops with them we ya know, a big discovery period to find out exactly what it is that they want, ya know, requirements gathering, we’ll do research into their users so quite often we’ll go out and we’ll interview potential users, their potential kind of market, we’ve done work in the education sector we’re we’ve spent a few days in schools and we’ve talked to teachers and pupils and school secretaries to find out how they do their day to day work, what kind of features and functions they would require off a site, using this information research we might create personas, and personas are a great way of capturing a rough demographic I guess of users and it allows you to start thinking in terms of how people will use the site because what tends to happen is people will sit down and think of the stereotypical user but each users got different needs and the nice thing about personas, is if you’ve got your personas fairly accurate it can then help you work out what features and functionality you need by following on the scenarios, a scenario is say your buying shoes or you doing a shoe store, so it might be that I want to buy a pair of dress shoes because I’m going to a formal function so I want to get a pair of smart shoes to match my suit so then what you can do is you can sit down and plan out on this system, how would I get from the homepage through to the purchasing process, how to get from a to b to c and that kind of helps design the system. The problem with personas is quite often you will do personas and they’re sitting in a draw, so personas aren’t right for every single project, and we’ve had a couple of experiences recently were we have done personas and we probably shouldn’t have done because the client already had a fairly good understanding of what they wanted to do but it’s kind of trial and error.

Paul: Yeah.

Andy Budd: Most of the time we find personas work really, really well, but they do work best when the client doesn’t really have a set idea of how their website is going to function and ye we do wire frames and wire frames are a big part of what we do, a big part of information architecture and big part of the user experience and design and again if your listening are you aren’t aware of what a wire frame is, it’s kind of somewhat like a story board in movies, so in a movie rather than just going and filming everything because celluloid’s really expensive, they’ll get some artist in to draw out scene by scene, frame by frame almost, how the story is going to progress and that’s a way of planning the shots, planning the locations and you can sit down in front of the story board and get a real sense of how the movie is going to flow and to work before you ever need to set up on set, and so we do something very similar with our websites, we create wire frames, which they can be on paper, they can be in HTML and it’s literally kind of a wire frame a kind of rough representation of how the site is going to fit together, and so when it comes to visual design and it come to the interface design the designer isn’t working from a blank sheet, they’re working from a fairly details blueprint, no so much on layout terms but on content, ya know, we need to have this block of content here, this is what inside this block of content, this is the hierarchy, this is more important, this is less important and so basically once the client has seen the wire frames and understood how the process is supposed to flow, they’re already signed off and they’ve already agreed to lay off the design decisions were as more traditional visual designers would try and do that on a photoshop document and I don’t really think you can capture, ya know, if you doing a fairly flat design or a fairly simple brochure website, you can probably capture that sense in a photoshop document but if you doing a more advanced, if you doing a more complicated site that has more interaction, maybe a, like a sort of social software, web applications site, you can’t show all this stuff in a flat document so you need to have this click through process.

Paul: No that’s cool. Okay to rap up I just wanted to ask about the subject of iterations because it’s something that we’re asked quite a lot and basically what people do or are concerned about is how many iterations do you go through when the client comes back to you and says I want this changing and then you make that change and then they want something else changing and it kind of can go on through this endless cycle, were do you draw the line do you have a contractual arrangement, we’ll do three versions of this or how do you deal with it?

Andy Budd: Again a very interesting question, the way we tend to work a clear:left is we tend to sell our services based on time spent rather than some kind of end point, because design is very subjective and as you say, you can’t sort of keep going on and on and on and keep making changes because not only will the project spiral out of control in terms of time but also in terms of budget and stuff, so what we tend to do with our clients and with our project is we specify a certain amount of time, we’ll spend 20 days on visual design and ye 20 days on a template build or whatever and we are a little bit flexible and this kind of almost goes back to something I was talking about on my blog recently about deadlines and stuff, ya know, if design takes a couple of days more and templates take a couple of days less in the end it all kind of balances it’s self out, but we do tract time to make sure we’re on track, we tend to say to clients that we’ll offer two iteration, again sometimes it requires more sometimes it requires less, but all along we track the time so to make sure we’re not going vastly off. What we try and do is kind of make the iterations increase in size so going back to what we where say before about the mood boards, you can do a mood board really, really quickly and you can get to a point a lot faster, understanding what the clients needs are by giving them a mood board or a couple of mood boards, a couple of quickly little iterations and, ya know you get significantly further down the line. Something we’ve been doing recently which I think is a really interesting idea and seems to be working really well is this concept of a one day design concept.

Paul: Okay.

Andy Budd: And so what we do is, in the olden days we’d spend like maybe a week coming up with an initial design concept and it was really good and it was really high level and it was really detailed and we’d give it to the client and if the client wasn’t sure about various elements, we’d be a little bit, because we’d spend so much time and effort into the design we’d be a little bit more resistant to making changes, were as we realised that if we did just a quick design iteration, that was just one day or one and a half days we’re much less kind of stuck on the design because it will be rough, because it will a bit rough and ready, which means that we’re much more flexible and happy to make changes and go in different directions also it means that if you are only given a day or a day and a half to do a design, you don’t obsess on the details, you work on the more broad brush strokes, you get the feeling and the sense and the layout right, you don’t worry about how the text is aligning or how the icons are place and that give clients first of all some instant feedback and rather than the old days, you’d go away and do a design, magic would happen and two weeks later a completely finished product, it gives clients a bit more of an insight and a bit more input into the process.

Paul: Yeah.

Andy Budd: They’ll see after a design they’re getting something that’s already start like a real project and they’re getting really excited, they sort of start inputting and feeding back. The difficulty is managing the right kind of feedback and getting the right kind of feedback at the right time because obviously in the early phase is what we really want is our clients to feedback on is just the overall look and feel. Is the layout right, is it giving the right sense, and not obsess about the details because we haven’t spent any time on the details.

Paul: Yeah.

Andy Budd: And then we iterate and once we’ve got an idea we’ll do another iteration which is more finessed and then maybe a third iteration which is more finessed. And then normally by that point because we’ve gone through a bunch of different steps and we’ve kind of had client buy in on the way by the time it gets to the second, third round of iterations, it usually is just dealing with the details.

Paul: Yeah.

Andy Budd: The problem is that almost all clients obsess about the details more than they really need too. And it easy too, I understand, if someone puts a design in front of you and they say, give me feedback clients obviously want to be really helpful, and they’ll jump into the design and say well that buttons miss aligned or I don’t like that orange I think it should be a different colour or whatever and really obsess about the details and I think at that point, ya know, that’s our job to obsess about the details I think. As designers we are more obsessive and we’ll sit there and we’ll move things a couple of pixels or ya know, play around in the colour palette and make sure things are exactly right and so what we’ve been tending to do is once we’ve got the initial direction of the project, once we know that the client likes the overall scheme, we kind of go ahead and build it and don’t necessarily go ahead and design it and while we’re not necessarily, not asking for feedback, so we’ll present our designs and if clients look at them and say oh well this is wrong and that’s wrong, that’s fine we’ll go and make the changes, as the client looks at them, I think basically what I’m trying to say is if you ask for detailed feedback you’ll get detailed feedback, if you present something to a client then if there is an issue they’ll feed back and if there isn’t they won’t. I think this has come about from a lot of usability testing, we sit down with test subjects and if we ask them for an opinion they’ll always give us an opinion, trying to be helpful whether that opinion is something they really think or something they’ve thought, well I’ve been asked to say something so I better say something.

Paul: Yeah.

Andy Budd: And so we’ve been trying to be a lot more subtle with feedback and rather asking for a definite cut off time, a definite sign off, we now expect a long list of stuff, it’s like here are the design, if you have anything to say that’s fine but if you don’t that’s great we’ll just get on and implement them.

Paul: Yeah, I like that. That’s a really good approach. Thank you very much Andy that was a really interesting conversation. I think every agency does things in a slightly different way and it’s good to hear the clear:left methodology.

Andy Budd: Excellent, well actually, sorry can I just jump in there and say something.

Paul: Yeah.

Andy Budd: Because I think this is an interesting point and it is a problematic thing, I don’t think a lot of companies have a process and a lot of companies will, ya know, every single project they will do the same thing time and time again and that’s good because you know at the start of a project exactly what your going to do step 1, step 2, step 3, the problem is not all projects and not all clients want all those step or all of those steps are necessarily valid for the thing they are trying to do.

Paul: Yeah.

Andy Budd: So I think what we’ve learned over time really at clear:left and it’s something we’re still learning and I think everybody’s still learning is rather than having a process have a methodology have a bunch of tools that you can use on a particular project, so if a certain project requires wire framing we do wire framing, if it doesn’t, drop it. Ya know, if a certain project needs a mood board, we do a mood board if a certain project doesn’t, we don’t do it. And so I think a methodology is the right point here rather than a process because a methodology keeps you flexible and a methodology means you don’t get stuck doing the same stuff over and over again.

Paul: Excellent, Okay, thank you very much Andy and I’m sure we will have you back in at least before the next two years are up. (Laughs)

Andy Budd: Yay, well thanks very much Paul delightful.

Question of the week

What tips or techniques do you use to smooth the process of design sign off? Answers in the comments.

Show 98: Flybe Farce

Posted in Classic shows on October 16, 2007 by Paul Boag

On this week’s show: Paul looks at the ongoing role of the website manager. Marcus looks at when to allow a loss leading project and instead of an expert section we are looking at the ultimate web design reading list.

Podcast: Download (18.7MB)

Download this show.

Launch our podcast player

News and events | Loss leading projects | Ongoing role of the web designer | Web designers reading list | Question of the week

Housekeeping: Prizes and problems

A free ticket for FOWD (New York)

With the 100th boagworld show coming up on the 20th October I am beginning to feel guilty. After all its going to be such a great time and all you poor Americans are going to miss out. I know how hard done by you all are and I couldn’t live with myself if I didn’t offer something as compensation.

Fortunately the guys at Carsonified are insuring that at least one of you poor hard done by Americans have something to cheer you up! They are offering you the chance to win a free ticket to the Future of Web Design conference in New York City between the 6-8 November. The ticket normally cost $195 and you get to see great speakers such as Jeffrey Zeldman, Andy Clarke, and Ryan Singer.

Now obviously this is not as good as going to the recording of the 100th boagworld but you will have to just struggle through. For your chance to win a ticket simply email me your name by the 22nd October and we will pick a random winner. For more information on the conference itself visit futureofwebdesign.com.

Download problems

From time to time I get emails from you complaining that episodes of Boagworld are getting cut short in itunes. Its rare but does happen. Unfortunately this is one of itunes less publicized ‘features’. I just wanted to say that the files are complete, the problem is that the connection gets dropped part way through and itunes thinks it has finished. If this happens to you simply delete the file and re-download it from scratch. It almost always comes down fine second time.

News and events

Em Calculator

Personally, I love using ems. Although I don’t use them extensively on every site I build but I do use them a lot. They strike me as the perfect compromise between the pixel perfect control of fixed design and the accessibility and flexibility of fluid. Ems based sites scale as the user increases text size providing a rudimentary zoom functionality.

However I am not claiming that ems are perfect. They are not always the most appropriate solution and have their own technical difficulties. One personal problem I always had with ems was working out the sizing. The problem is that ems inherit from one another. 1 em may equal 10 pixels in one part of the HTML but equal something entirely different deeper down because of inheritance.

I always hated maths and so it is unsurprising that this inheritance issue made my brain want to dribble out of my ears. You can therefore imagine my relief to discover this week that somebody has built a great little em calculator that works out this nesting for you. Simply set the base size and then add the nested tags and em setting for each. The calculator does the rest.

Check it out. I guarantee if you work with ems regularly you will think it is a real time saver.

How to disarm 10 difficult client observations/requests

Next up, a great article about dealing with clients. We all know what it feels like, client after client churn out the same old comments…

I’ll know what I like when I see it.

or…

I love beige; can we get more beige in this?

… the list goes on. These kinds of questions are horribly frustrating and despite the fact that we hear them time and again we are often left floundering as to how to respond. This article lists 10 such comments from clients and proposes some ways to respond to them.

Obviously everybody has to respond to these questions in a way that suits them. However, it is still interesting to see how others suggest you answer these questions. Check it out and then post how you would respond to those questions in our comments.

The resurrection of downloadable fonts

Next up, the return of the downloadable font. Some call it the Holy Grail of web typography. Others just believe it would be used and abused. However, whatever you think you cannot deny that being able to define whatever font you like on a website is something that there is demand for.

The idea has been around since 1998 but different implementations of it by browser manufacturers meant it never gained traction. However according to a number of courses including Robert Nyman it looks like it is back on the cards again.

Both Safari and Opera have now implemented a standards based solution to the problem called @font-face, which is certainly good news. However, until IE and Firefox follow suit this is still not going to get a lot of traction. We will have to wait and see.

Creating better user personas

I feel like I have been talking about user personas a lot recently. They are certainly a tool I have been using for a long time and with good reason. I find them incredibly useful in focusing the designer and client on who they are developing for. They help to define functionality, content, tone and design.

However although I have done an introduction to personas on the show I have avoided going into too much depth. Developing a really good persona is a skill and I am far from an expert. However, if you do want to learn more about personas then you should consider reading Ten Steps to Personas a relatively short article outlining some more advanced techniques.

Now I should warn you up front this is not the easiest of reads. It is certainly more heavy duty than most of the things we cover here. However, I wanted to mention it because I know many of you are already using personas and this will take you to the next level. Also if all else fails it has a very useful chart outlining the steps accompanied by lots of pretty pictures ;)

Marcus’ bit: When to allow a loss leading project

Even after going on at length in this podcast about making sure that contracts are in place, tasks are recorded in detail, requirements consultations are paid for and project management effort is not underestimated – all to avoid under-charging – sometimes there are occasions when you should take a hit and do a project as a loss leader. In this week’s show Marcus explains why loss leaders are sometimes a good idea.

Paul’s corner: Ongoing role of the website manager

While writing my book I have been thinking a lot about the role of the website manager. In particular it has struck me how underestimated the role is. One aspect of the job that is particularly overlooked is the long term commitment involved. In the book I talk about what that ongoing role is and what companies need to consider if they are going to properly support a website over it life. Fortunately my publisher is keen for me to share my thoughts on various aspects of the book so I have put together a blog on the ongoing role of the website manager.

Web Designers reading list

Instead of doing an ask the expert section this week I thought I would answer the single most common question I get from people who listen to this show…

What books would you recommend.

This is something I have blogged and spoken on before but I am going to give you my latest list of top picks based on my ever growing reading list.

Question of the week

What books would you recommend about web design? Answer in the comments.

Marcus on loss leaders

Posted in Web strategy on October 15, 2007 by Paul Boag

…sometimes there are occasions when you should take a hit and do a project as a loss leader.

Even after going on at length about making sure that contracts are in place, tasks are recorded in detail, requirements consultations are paid for and project management effort is not underestimated – all to avoid under-charging – sometimes there are occasions when you should take a hit and do a project as a loss leader.

The two main benefits being:

future profits through repeat work
marketing the company (which is harder to measure)

So, when would this be?

A multi-national comes knocking

Generally speaking, I would really try to avoid cutting costs if a huge name brand asks you to pitch for work. Firstly, I doubt budget would be much of an issue for them and secondly, you don’t want to label yourself as ‘cheap’.

However, you may be pitching against a lot of other agencies and you know the allocated budget (which happens to be lower than you would like to charge). In this case you may want to lower your quote to around the budget mark simply to give yourself a chance of winning a big name client.

Promises of future riches

I would avoid any client that says ‘do this job on the cheap for me and there’ll be loads more in the future’. However, if you reach the same conclusion yourself then you might want to consider it. Repeat work is far more profitable and reliable than having to win new clients all the time.

Basically, as with all these examples, you need to try and limit how much you are discounting and be very aware of what you’re giving away so a) you can weigh up the risks and b) be able to measure whether the risk was worth it in the end.

You’ve got a new toy

If you have a new application or piece of software with nothing but a dummy site associated with it, then offering a discount to a client to implement it is almost certainly worth it.

There is nothing more powerful as a sales tool than a real case study demonstrating a product or service so, until you get a real example, it is in your interests try and make one happen.

It is also fair on the client to reduce price in this instance because it is likely that a certain amount of bug fixing will happen during the project thereby often dragging the project out longer than expected.

Ongoing role of a website manager

Posted in Web strategy on October 11, 2007 by Paul Boag

Although there is a general acceptance that a website manager is required to “make the site happen” (as in go live) there is little or no conception in many cases that there is an ongoing role there.

Many organizations and individuals simply underestimate the enormity of the job faced by website managers/owners, failing to grasp that it is an ongoing commitment. It is our job as web designers to make clients aware that running a website requires somebody to be responsible for it over the long term. Every website requires a website manager.

This lack of understand about the role of website manager probably explains why it is often a fairly unrecognized position despite the fact that the website itself is considered an important asset. Although there is a general acceptance that a website manager is required to “make the site happen” (as in go live) there is little or no conception in many cases that there is an ongoing role there.

It is almost as if there is a “build it and it will run” mentality, where the organization fails to grasp that a website manager is needed throughout the entire lifecycle of a website to ensure that it evolves and remains successful.

A good website manager need to be constantly fulfilling three roles…

Evaluating site objectives
Refining the site
Promoting the site

Evaluating site objectives

A website manager should be constantly evaluating the objectives of his website and asking if changes need to be made to its overall vision and direction. This kind of assessment does not need to occur on a daily basis but should be done at least every six months (more often if things in your organization move quickly).

These reviews should consider questions such as:

Have the underlying objectives of the website changed?
How is the site performing against its success criteria and do those criteria need to change?
What is the competition doing and how are we performing against them?
How has the target audience changed and what response are we getting from them in regards to the site?

Refining the site

On a more practical level the website manager should also be refining the site in response to changes in these objectives. If the success criteria for the site are not being met, then steps need to be taken to address the problem. Equally, if the competition is luring away your visitors then the site needs to be altered to encourage them back.

This continual “tweaking” of the site can manifest itself in three different ways:

Changes to the front end interface of the website
The addition, deletion and editing of written content
The introduction of new functionality

For example a luxury holiday booking service might respond to increased competition in the sector by adding a flight price comparison tool to the site (new functionality). A tool like that is very appealing to some users and will draw them away from the competition. Equally, they might look at adding regular reviews of existing destinations (new content) to encourage users to keep coming back. Finally, they might refine the design based on user feedback to make it easier to navigate and improve legibility (changes to design).

Responding to user feedback is often the best way of refining the website, which is why ongoing usability testing, polling and analysis of site stats is so important.

Site promotion

Although it is possible to get online marketing specialists to help with the promotion of a website I have seen some organizations fail to allocate budget to this task. As a result it often falls to the website manager to pick up the promotion of a site.

Site promotion needs a definite ongoing commitment. The number of visitors coming to your website will slowly decline if you do not actively promote it.

You can promote a website in a number of different ways.

Offline promotion – Offline promotion includes letterheads, business cards, signage, phone systems and other marketing collateral.
Email marketing – Email can be a powerful marketing tool to drive new traffic but also a good way of encouraging existing users to return to your website.
Search mechanisms – Search mechanisms are more than good placement on Google. It also includes pay per click campaigns and social networking tools.
Guerilla marketing – Guerilla marketing is a catchall term for lost cost marketing methods. It includes techniques like forum speeding, viral marketing, blogging and even podcasting.

Site promotion requires more than mere lip service. It needs dedicated resources (either internally or externally) on an ongoing basis. It is important to decide early in the process who is going to be responsible for this work.

Show 97: FoWA

Posted in Classic shows on October 9, 2007 by Paul Boag

On this week’s show: Paul proposes tactics for overcoming design by committee. Marcus talks about extracting a budget from clients and Dan Cederholm compares pixels, ems and percentages.

Podcast: Download (27.0MB)

Download this show.

Launch our podcast player

News and events | Extracting a budget from your prospects | Avoiding design by committee | Dan Cederholm on ems vs pixels vs percentages | Question of the week

About 100th episode

We really want the 100th episode to be as interactive as possible while keeping the format of the normal show. So with this in mind here is what we have in mind for our live show…

News – This will be the top 4 news stories that have most effected web design since the shows launch in August 2005
Marcus – Most unreasonable client
Paul – The worst web design mistakes of all time
Ask the expert – Ask Paul and Marcus any question you want whether it is related to web design or not

You can either turn up on the night and contribute or send us an email or MP3 with your contribution to any of the above areas.

News and events

Gossip from FoWA

I wanted to share a little about the FoWA conference I have just attended. It was absolutely superb and I am extremely glad I attended. The speaker line up was excellent and the subject matter was inspiring. There was a good supporting expo which was great as it prevented the problems that have occurred previously of sponsors touting their wares in the speaking slots.

However, I am not bringing it up simply to gloat that I was there and you weren’t. I got to speak to some great people and leant a few things that is worth passing on. Firstly, it is very apparent that the power of podcasting as a marketing medium is really on the rise. I had a long chat with David Prager and Jay Adelson about Revision 3 the company that produces Diggnation among other shows. It sounds like things are going great for them and they are pulling in some big name advertisers. However, the advertising model is not the only approach that is working within podcasting. The other is the promotional approach where you showcase products that subscribers can then buy. This is perfectly demonstrated by Wine Library TV hosted by Gary Vaynerchuk that allows you to purchase the wines reviewed in the show. I was fortune enough to meet Gary at FoWA and it is obvious that it is passion for the subject and strength of personality that makes the show work.

Of course the real power of podcasting was demonstrated in the live taping of a diggnation episode. I estimate that approximately 1200 people turned up for the recording and it was more like a rock concert than a geek conference. Kevin Rose and Alex Albrecht (the hosts of the show) were pretty much mobbed after the show by insane fans. It was almost scary and drove home the power of the medium.

I could talk about some of the great speakers I got to hear including a stella performance by Daniel Burka who gave his first ever conference presentation. However, I don’t have the time to cover it all so want to share instead a couple of rumors surrounding Google. The first is that the fabled gPhone from Google is in fact going to be an operating system rather than a specific hardware device. If this is true it could well introduce yet another platform for creating cool web based mobile applications. Finally I wanted to mention the imminent announcement of Google in relationship to its APIs. It would appear Google is about to open up its many online offers from Gmail to Docs allowing third parties to build web applications based on them. This will really open up the opportunities for developers to really innovate.

The average website visitor

The next news story of the day is yet another list from Smashing Magazine (this is getting boring now). This one attempts to bring together some general stats on website users from various sources. Although the article acknowledges that really you need to look at your own stats it does explain that from time to time you want a more general picture of the average web user.

The post therefore lists 8 facts you should know about the average user. These include (but are not limited to)…

The most popular browsers (bet you can’t guess!)
Most common screen resolution
Most popular operating system
Most popular browser family worldwide
Most popular browser in Europe
Most common browser size

Getting started with Photoshop

We know that not everybody who listens to this show are web designers. Some of you are developers, clients or students. Some of you are just starting out in web design. If you fall into any of the above but want to get a better understanding of a key tool of the web designer then you maybe interested in a new article by Sitepoint. This detailed tutorial is an introduction to using Photoshop.

This is an amazingly detailed introduction that covers everything from the user interface right the way through to working with Alpha Channels. As you can imagine it is a long read but if you have the time I cannot think of a better introduction to this hugely powerful image editor.

Waking the sleepers

Last up today is a post by the guys over at 37 Signals. The post is primarily written for those running web applications but actually the principles apply to a much broader audience. It is looking at the subject of sleepers. Sleepers are those users who sign up for your service but never use it (or stop using it). This clearly applies to web applications but is also applicable to ecommerce sites or even sites that offer newsletters or other registered features.

It asks how these users can be reinvigorated and encouraged to become active again. Using an email from StumbleUpon as an example the post suggests so good ways of breathing some life back into your users.

If you are struggling with an apathetic user base this is worth a quick look.

Marcus’ bit: Extracting the budget from clients

So here’s the situation: I receive an invitation to tender in my inbox from a potentially good client. The brief is well written and, for the most part, the requirements are clear. The first thing I do is check the timescales, second is to see what the budget is. But what if the brief does not include a budget? How do you extract the budget from the client?

Paul’s corner: Avoiding design by committee

So I have now reached chapter 4 of my book writing marathon and in line with my commitment to recycling I want to share with you some of the content from my initial draft. Chapter 4 focuses on the role of the client in the design process and one of the big challenges that they face is design by committee. Of course, avoiding design by committee is something designers want to avoid too which is why I thought it would be a good subject to cover on the show.

Ask the expert: Dan Cederholm on ems vs pixels vs percentages

Paul: So one of the most common questions that I seem to get time and time again as far as CSS is concerned, revolves around working with ems and pixels and percentages and what to use when and how to work out what you should be using and all of that kind of thing. So, I thought, “Let’s get an expert in.” And so, I have Dan Cederholm joining me. (Dan Snickering) Hello, Dan.

Dan Cederholm: Hello Paul!

Paul: Don’t snicker! You are the expert for today.

Dan Cederholm: (laughing) I’ll try to be. I’ll put on my “expert hat”.

Paul: Just go with the flow, its fine.

Dan Cederholm: I will. (laughs some more)

Paul: Okay. So Dan, like I said, this is a common question that we get asked and I’m just interested in your opinion about “When’s the right time to use what combination? Should we mainly be using ems? Should we mainly be using percentages? Should we be going pixels?” What’s your take on the discussion?

Dan Cederholm: Well I think it, in a very politicianesque way, I’d say it depends. (Paul laughing) And this call is over. I could just hang up now (Dan laughs).

Paul: Okay

Dan Cederholm: No, I’m just kidding, it depends.

Paul: Depends on what then? (Paul laughs)

Dan Cederholm: Yeah, so it depends. Now are you referring to strictly font sizing or units in general for boxes and things?

Paul: I mean, there’s lots of different things isn’t there? (Dan: Yeah) There’s kind of, do we make, you know, when we design a whole web site, should the web site be fixed width? Should it be hybrid? Should it be fluid? Should it be built so its elastic? Let’s start with that as the discussion.

Dan Cederholm: Okay. Width in general… Well, I think, like I said, it does depend. It’s a tough decision to make depending on the site and depending on what’s in the site and the design and that kinda thing. It can be tricky. I love EM based design. And that’s what I use currently on SimpleBits and a few other sites that I’ve done recently. But, I’ve actually been sort of re-thinking that because its difficult to do… to drop in say an image or something that’s fixed width in that design and still account for that fixed element to be cut off or to look odd when the text is re-sized or if the text, the base font size is different. To me, the difficulty with an em-based layout is sort of the fixed image problems. So, for instance, on SimpleBits, for my blog posts I’ve been wanting to do more visual stuff like drop in an image from Flickr or a photograph or something.

Paul: Sure.

Dan Cederholm: But that becomes difficult because its em-based. If the image is a fixed pixel width, obviously its hard to just drop that in and design around it so that it looks like its meant to be there, you know?

Paul: Mmm Hmm

Dan Cederholm: And now there are tricks that people have experimented with, with em-based and setting the image width as well.

Paul: Right

Dan Cederholm: But that, of course, gets tricky when if the image is blown up it looks, you know, it will look terrible or shrunk down or won’t look as nice as it would if it was re-sized properly. To me, that’s the biggest drawback to em-based layouts. So, depending on the site, if the site is not image heavy or if you’re not going to be doing a lot of that sort of image stuff, then em-based styles can be excellent and they can provide, sort of that flexibility, almost like zooming in and out just by changing the font size.

Paul: So would your recommend that over, say, a percentage-based layout?

Dan Cederholm: Well I think that… I like the… They each have their own, sort of pros and cons. The percentage-based layout is great as well. So that’s fluid, or liquid, right?

Paul: Yeah.

Dan Cederholm: And that, that gives a little more control to the reader, because they can stretch their window out. Now, the main problem there is the “max-width” and “min-width” in Internet Explorer 6 and below. So, the common problem with that, or why people don’t use liquid layout is if you stretch the window out really, really wide, then line length becomes a problem with readability.

Paul: Mmm Hmm.

Dan Cederholm: But, that can be solved by setting a max-width to certain things. So in IE 6 and below, that’s not supported aside from some javascript hack or something. But, liquid layouts do offer that extra control for the reader. Some people… its weird, its like a religious sort of divide. Some people hate liquid layouts. Some people love them or swear by them. Its interesting how people can get. It can be a heated debate with designers. I found… it’s interesting with uhm… so, the iPhone came out over here in the US and I found liquid layouts actually look far better in the iPhone because of that small window width and that becomes even more of an advantage on a smaller screen. As opposed to fixed-width layout or even an em-based layout, the viewport isn’t necessarily computed correctly and you don’t take advantage of the full screen, whereas with a liquid layout, it does.

Paul: So when you do, say an em-based layout or a full liquid layout, what about things like margins and padding? Do you do those in the same settings or do you do those using pixels, or how do you work with those?

Dan Cederholm: Yeah, that’s a good question. So, one of the … the tough parts of a liquid layout or percentage-based IS margins and padding, because often times you need to add extra elements to add padding around, say if you want a fixed gutter width between columns. Unless you’re specifying percentage, like let’s say its a simple 2-column layout. The left column is 70% and the right column is 30%, which equals 100%. You can’t say the 70% block has a margin right of 10 pixels because now its 100% plus 10 pixels, which doesn’t work.

Paul: Yeah.

Dan Cederholm: So, you could either… there’s a couple choices… You could do a percentage gutter, so you have like 70, uh sorry, 65% with a 5% right margin and then 30% on the other side. Or, the other option would be to add another element sort of like a div that’s inside of each and the add a pixel amount to that without a width at all. So, there’s extra markup involved there. One of the things I like about ems is that instead of worrying about percentages, ems are… you can add… its easier to add gutters and padding with ems because the math works. (Dan Laughs, Paul agrees) So, you’ve got a whole width for the layout of say, 70 ems, or whatever it is and then you can break that up doing the math properly with the width of the columns and the width of the gutters as well. So, percentages are tricky because you can’t go above 100% and you can’t take away from a percentage with a pixel amount.

Paul: Yeah.

Dan Cederholm: Take away, or add with a pixel amount. So if you want fixed width gutters with liquid layout, it often requires extra markup to do that.

Paul: What about when it comes to typography? Are you suggesting always go with ems in situation like that? Because you’ve then got to add just more complexities too. You’ve got keywords that you can kind of throw into the mix there as well.

Dan Cederholm: Right. Right. Yeah, I prefer… in my own work, I prefer to use the keyword as a base. So, I’ll use “small” as a base on the body.

Paul: Right.

Dan Cederholm: And then use percentages for going up or down from there. So, headings may be 120% for a heading or whatever and then paragraphs would be 90 or that kind of thing. I like that because to me its sort of, ok, this is a base line. I know its not going to be the exactly the same in all browsers but I’ve had good luck with getting pretty damn close cross-browser sizing that way. The other way to do it is with ems and there’s a great article by Richard Rutter, actually, about sizing text with ems that he wrote a few years ago. And he explains a way of using a percentage as a base to knock it down to.. oh, are you familiar with it?

Paul: Yeah.

Dan Cederholm: And then that sort of… you can relate em units to pixel amounts. So, if you’re used to sizing text with pixels but want to use ems, he explains a way of sort of knocking down that base so that the math becomes simpler and using… specifying ems but thinking what that would be in a pixel amount.

Paul: Yeah, which is the approach that I normally use. The only thing that kind of (Dan: It is? Okay.) does my head in about that is that obviously ems inherit from one another.

Dan Cederholm: Right, exactly.

Paul: And that’s where it gets really confusing.

Dan Cederholm: It really does, doesn’t it? I mean especially if you’re nesting more than one level deep. Then the math becomes mind boggling.

Dan Cederholm: And so that still happens with the keyword percentage model that I use often… the same problem… so when you’re nesting percentages, things start to get a little weird. It becomes a little difficult to do the math but I found that I’m not often nesting too far… you know, more than maybe two levels or so when I’m sizing things. And if I am, then unfortunately, I have to do the math or try a different approach but, yeah, that is a tricky part of ems or percentages. In a perfect, ideal world, I think the designer could specify pixel, right, and then the browser would resize it from there but, you know, IE actually 7 and 6 and 5 don’t let you resize the text and I’m kinda baffled why its still a problem in IE 7. So, that would be ideal because the designer can say, “Look, this is what I intended to be as a base and this is gonna look the same across browsers for the most part for most resolutions and then the user can always over-ride that.” I mean, the user should always be able to over-ride that. But, unfortunately, for baffling reasons, they chose not to let someone do that in IE. So, that goes back to, I guess, your site statistics and if IE is a low percentage, which is probably not going to be the case for most sites, you could sort of weigh that and can say, “Well, I’ll go with pixels.” And, I mean, a lot of people do go with pixels now anyway, and just not worry about it. But I tend to, you know, I bump up si… I don’t wear glasses, for instance, and I bump the text size up on a lot of sites.

Paul: Yeah, I do too.

Dan Cederholm: And so, if I’m doing that, and I have pretty good eye-sight, I imagine a lot of people would as well.

Paul: Ok so what…

Dan Cederholm: Having that control is important.

Paul: Yeah. So, one last question before I let you go (Dan: Yeah) and get back to your normal work… You were talking about browsers there. And so, Internet Explorer 7 has come along with sort of this zoom page functionality.

Dan Cederholm: Right.

Paul: How does that enter in all of this? Does it change the landscape in any way?

Dan Cederholm: I think it definitely helps. That’s what sort of baffles me even more. I’m using the word, “baffle” a lot today. (Paul laughs, Dan chuckles) Why they would add the page zoom to IE 7 but not allow you to re-size font set in pixels. So, I think it helps in a way but the problem there is that it will… your viewport stays the same. So, when you zoom the layout, you’ll start to get horizontal scroll bars and you’ll have to sort of navigate the page that way, whereas just zooming the text, the viewport stays the same and you can read the page a little easier, I find. I mean, it’d be interesting to talk to someone that has low vision and uses, you know, zoom or text bumping up on a regular basis. I think that that’s sort of the… the downside I see to it is that its, it can help but, let’s say that you’re looking at a block of text and you use the page zoom feature and you’re window is small. Let’s say you’re on a small screen device or something or at least you’re monitor is small or whatever. So, zooming in will make it easier to read but you might have to do some extra navigating of the windows to keep reading that. Whereas bumping up the text, you shouldn’t have to do that. It should stay within it’s container and the window should just… yeah, you’d be scrolling down but you won’t be scrolling horizontally.

Paul: I mean that’s a particular problem, isn’t it? With fluid designs, I’ve noticed, with a zoom function that as soon as you start zooming on a fluid web site,

Dan Cederholm: Oh, right.

Paul (continues): you immediately get horizontal scroll bars. Which to me, is ridiculous.

Dan Cederholm (laughing): Right, right. Exactly! Right, so in bumping up the text in a fluid design, should be, I think, should be a lot more… better an experience. That brings up a good point though, with em-based design. Now, when you’re bumping the text with an em-based design, the entire layout, if they layout is set in ems as well, the whole layout will expand. Sort of like zoom, but… So, that’s something to consider as well. Where the layout could go beyond the viewport, you could get horizontal scroll bars as well there. So if you have an extra wide layout in ems, that can be an issue. Just bumping it up one notch or two notches could cause that sort of scrolling problem.

Paul: Yeah. So, the long and the short of this, is there’s no right answer, is there?

Paul: There’s no perfect solution here.

Dan Cederholm: Yeah, there really isn’t.

Dan Cederholm: I mean, like a lot of things in web design, there’s not… yeah, it sort of just depends on a case-by-case. I mean, people fall into sort of things that work for them, you know, like I use the “keyword/percentage” thing and that just seems to work. Other people like the em-based approach to text sizing. But neither one is really right. I think you’re correct in saying there is no real right answer at this point. It will be interesting to see how CSS evolves and affects the way we layout pages. Just the other day, I was looking at the CSS 3 grid layout draft.

Paul: Bleh!

Dan Cederholm: Yeah. (laughs) Which is pretty amazing. And maybe we’ll be able to use it in the next fifty years.

Paul: Well on that cheery thought, (Dan (laughing): Sorry) I’ll have to grapple with CCS 3.

Paul: Thank you so much for your time, Dan. I appreciate you coming and explaining the different options that are available.

Dan Cederholm: Ahh! Its my pleasure. Thanks for having me.

Question of the week

Pxels, ems, percentages… which do you use the most? Answer in the comments.

Show 96: Moll on Mobile

Posted in Classic shows on October 2, 2007 by Paul Boag

On this week’s show: Paul suggests some ways a client can pick which agencies to ask to tender. Marcus asks when is speculative design okay and Cameron Moll explaining how to get started on the mobile web.

Podcast: Download (31.0MB)

Download this show.

Launch our podcast player

News and events | When is speculative design okay? | Who to ask to tender? | Cameron Moll on the mobile web

News and events

Social Participation as a business tool

Back in 2006 I spoke at refresh06. One of the presentations I gave there has since proved a popular subject and I have been asked to speak on it again a number of times in various forms. It is on the subject of social participation and how to use it as a marketing and business tool. Social networks and communities are often seen as the domain of the teenage crowd with sites like YouTube and MySpace dominated by this demographic. However, community based applications are applicable to all audiences and can be a powerful tool for businesses.

After preparing the latest incarnation for a presentation I am giving at IBM, I thought I would do a run through (as I have only limited time). Discovering the new record feature in keynote I decided to record the whole thing and upload it for all to see. Hope it is useful.

Test your website for mobile compatibility

So this week we have Cameron Moll on the show talking about some of things covered in his new book “Mobile Web Design”. In his book he mentions an interesting site that I would like to pass on to you. It is a web application that allows you to test how well your website would appear on a mobile device. You simply enter your website address, wait while it calculates your results (it even gives a random mobile web development tip while you wait) and then view a complete breakdown of any issues with your site.

The report is distilled down into a single score but you can also see performance in each of the individual areas including:

Speed
Cost in terms of data access
Quality of code

and a whole host of miscellaneous tests. However, best of all is the fact that it also provides an emulation of what your site would look like on a whole host of mobile devices.

Laying out inline images

My next story tackles one of the mixed blessing of content management systems. Although it is great that content management systems allow clients to add content themselves they almost always fine a way of screw up the look of a site in the process. One way that they manage this is adding inline images. They are often required to add specific classes to images for them to be displayed correctly. Unsurprisingly the client sometimes fails to do this and the design becomes broken.

This week the List Apart website proposes one way to slightly reduce this risk. They use javascript to detect content images on a page and then apply different classes based on the width of the image in relation to its containing tag. In other words the Javascript detects whether the image is a full column, half column, or quarter column image and lays it out appropriately.

Its not the perfect solution and there are still ample other ways clients can screw up a design but it is a nice use of javascript that enhances a design without being mission critical. I think seeing this kind of use of Javascript and we should all be looking to use it for this type of thing.

10 Usability nightmares you should be aware of

My last story this week is another top ten list from the guys at smashing magazine (they do like their lists!). This one is a list of the top 10 usability mistakes and I have to say it is an entertaining list focusing on some big name sites. The list includes:

Hidden log-in links
Pop-ups for content presentation
Dragging instead of vertical navigation
Invisible links
Visual noise
Dead end
Content blocks layering upon each other
Dynamic navigation
Drop-Down Menus
Blinking images

Each mistake is explained in detail including some offending screenshots. A worthwhile read for us all.

Marcus’ bit: When is speculative design okay?

I have decided to talk about speculative design work this week because we have recently produced a couple of designs and, although we recommend that it should be avoided, sometimes you simply can’t.

Unpaid prospective work is the bane of all of graphic based agencies and freelancers. It’s also something we have looked at before, but it’s such a significant subject I think it’s a good idea to look at it again.

The worst case

Some ‘clients’, and I use the word loosely, are simply looking for free work. It seems that they think ‘art’ or ‘drawing’ is not real work and is something that only fools pay for. They usually ask for a number of different page designs and concepts and will often ask for revisions on delivered designs.

The project often ends up being dropped by ‘the board’ and then mysteriously, a few months later, something very similar to your design appears for all to see.
These people are effectively stealing from you. Don’t do it.

When is it ok?

If you take the line that we should never do unpaid work then the answer is ‘never’.

However, life simply isn’t like that so you need to make some choices. You could argue that as long as the client is genuine i.e. it’s a real project that someone will win and subsequently get paid for, then it’s ok. It’s a fair fight and the best design will win.

But, this isn’t just about getting paid.

Educate (how many times do I use that as a heading!)

Speculative design is a beauty contest. The whole point of the exercise is to impress the client. This can possibly be seen as taking a somewhat derogatory view of a client’s ability to make the distinction between a design for them versus a design for their users. But even for those that understand the distinction, I don’t think it is possible to separate ‘what I like’ from ‘what is right for our users’. If there is a choice, then people can’t help picking the one they like best.

Added to this, there’s the big issue of designing in the dark. Even if a client has supplied a detailed brief and they’re happy to chat on the phone, the guy pitching still doesn’t really know what the requirements are. The early part of any design project involves detailed discussions about an organisations USPs, target audience, brand values, site statistics, site goals, etc etc.
User interface design is a collaborative process between the agency and the client that goes through an iterative cycle based on user feedback. This simply doesn’t happen with speculative design work.
So, in summary, always have this conversation with prospective clients. I know for a fact that on one job, we won the work by doing so. The client saw it as the most professional and well thought through approach taken by the agencies pitching for the job.

However, sometimes you have to do it or you will jeopardise your chance of winning the work – but still have the conversation and ask whether or not producing an initial concept will adversely affect your bid.

Paul’s corner: Who to ask to tender?

With literally millions of web design companies worldwide where do you begin when trying to draw up a list of potential agencies? Who do you invite to tender?

Ask the expert: Cameron Moll on the mobile web

Paul: Okay so joining me today is Cameron Moll. Good to have you on the show Cameron.

Cameron Moll: Hey, thanks Paul.

Paul: I think this is your first time on Boagworld, is it not?

Cameron Moll: Yeah it is.

Paul: Ah that’s good stuff we alway like to get new people on instead of having the same old boring people on every time. Nice to get someone from the States as well. Which is good.

Cameron Moll: Yeah absolutely and I’m kinda bummed you didn’t pick me for your hundredth episode.

Paul: Well if your in London you can come to our hundredth episode and join in the show. Do you happen to be over then by any chance?

Cameron Moll: Uh, when’s that gonna be.

Paul: Uh, October 20.

Cameron Moll: Um, unfortunately not.

Paul: Argg.Shame, what a shame. Yeah, so we’re looking forward to our hundredth that should be fun. So I mean the reason we’ve got you on the show today is because you’ve just produced a book called Mobile Web Design. This you already know I’m sure. So we thought it would be good to get you on the show just to talk about some of the things that you kind of cover in the book, and give a bit of an introduction, um, to the world of developing mobile websites. And um the question I wanted to kick off with is in your book you dicsuss kind of four different responses to kind of mobile web. In other words four different approaches people could take when they start thinking about the subject of mobile web design. And I just wondered whether you could talk us through those four different approaches that people could use.

Cameron Moll: Yeah that’s probably a good place to start. Um, most of these are straight forward right. It’s I think a pretty simple thinking to understand how one would approach the mobile web. And uh, you know I produced these about two years ago as I was trying to understand how someone like myself, you, how we would make that leap over to mobile. The more I was researching it the more it became apparent that you know there is really these four methods, and what they boil down to is, uh, is this. So one, you essentially do nothing. Two, you reduce the number of images and styling therby reducing the file size, uh, the page weight and so on. Three, handheld style sheets and then four, mobile optimized or what some refer to as content adaptation. And uh, the breakdown is essentially this, if you’re going with that first approach your saying “You know what, I’m going to do nothing.” I’m either lazy. I assume that my users have devices that can support the content I already developed and uh, you know when you think about the mobile web obviously the question that comes to mind is what technology am I going to use? How am I developing content for mobile devices? And fourthly, most devices out on the market today will support well structured mark up out of the box. And so most of the devices being sold, most of the devices that people have in hand today are going to support your html markup. So a lot of user will take that approach, I guess developers that is, take the approach to say you know what, what I have developed it good enough. I’m going to push it out there. And with things like the iPhone and some of the higher end Nokia devices that are out on the market, most of those devices can support a full desktop experience. Right, so it’s this idea that I refered to as content zooming. And so with the iPhone I can see the full website. I can pinch or zoom in. With some of the Nokia devices and Oprea mini 4, I can have that same experience. And so the thinking with that first approach is, lets just leave the content as is and allow those higher end devices to access them.

Paul: Sure (thoughtfully like he is paying attention)

Cameron Moll: Uh, the second approach. This essentially takes the existing markup and content and says lets pull out the images. Lets pull out the styling and allow users to access that raw content. And the thinking there is we’ll reduce the file size. We’ll take out all those big images, that unnecessary styling. Most of the devices out on the market today, well I shouldn’t say most, but alot of them don’t support the styling that you and I are used to using on the desktop. So, the thinking here is just to pull all that out and allow the device to see the raw content. And after all people are after the content not necessarly the background images and colours and things like that. Now the third approach is perhaps right now the most controversial, and that being handheld style sheets. I mean these have been promoted as kind of this poster child of all things web. So any device whethe it be a mobile device, a car a watch or what have you should potentiall be able to take the same markup and with a style sheet specific for that device, again it might be a printer it might be a mobile device. Being able to attach specific style sheets that render the presentation differently for that given device. So the idea being, you know if I just attach a handheld style sheet to my markup. I don’t touch the markup. I don’t touch anything else. I just add that handheld style sheet then great it’s going to display it differently and so on. Of course there are drawbacks to this approach and I guess what I’m skipping here is there is drawbacks that I cover in detail in the book to.

Paul: Yeah (thoughtfully like he is paying attention)

Cameron Moll: To each of these approaches. They all have pros and cons. The biggest one here with handheld style sheets, cutting to the chase, is the fact that not all devices support it. I would guesstimate, I don’t have any exact figures, I don’t know that they exist. But is guesstimate only about half the devices out on the market will support handheld style sheets. And even of those that do the support is somewhat shotty. In that some of those devices will correctly obey a property such as “display none” but they’ll still in the background download the associated content with that. So if you’ve got a large image for example, and you attach to that “display none” it won’t show it but it’s still gonna download in the background that image or that content. So right now, at least, using handheld style sheets is a bit of a pipe dream. It’s just we’d love to be able to have the power to access those, that capability. But right now it’s just not all that feasible.

Paul: Hmm. (thoughtfully like he is paying attention)

Cameron Moll: Finally, on the fourth point, mobile optimized content. This is where you say “You know what. I understand that the environment of being mobile, this idea of context is different that it is when I am sitting at my desktop.” It’s different because I might be using one hand for data entry. I’ve got a much smaller screen and naturally I’m out on the street. I’m out driving or something along those lines. So we say what’s different about that experience, then sitting at one’s desktop. Proponents of this fourth approach essentially say, “You know what the other approaches, especially the do nothing approach completely ignore context.” And that is what is the user doing when they’re out walking. When they’re on the tube or the subway and so on. So this last approach says, okay the context of being mobile is different than anything else. People want to do things differently when they’re out and about. So we’re gonna reformat our content to cater to that experience. We’re gonna present and entirely different experience, and altered experience perhaps to that of the desktop that addresses the specific needs of being mobile. The arguement I make in the book, I guess coming full circle with these approaches is, I often get asked the question “Well what’s the best approach then Camerson?” I don’t know. And you ask 20 different people in this industry and you’ll get 20 different answers. Right now I think the most feasible approaches moving forward are the first approach, do nothing, and the last approach, to create mobile optimized content. The arguement being is one, you need to understand first of all the context of mobile users and therefore adapt that experience to that context. But at the same time you have alot of capable devices out on the market that may be able to render a full experience that users are used to elsewhere.

Paul: I mean you talked there about context and in particular the fact that peole might be using it one handed or whatever else. What are kind of the major differences that you are seeing between kind of a user experience designed for the desktop compared to user experience designed for the mobile device? How do they alter? What should we be doing differently?

Cameron Moll: Well I think that the key phrase here is mobile right. So Barbra Ballard, I quote her in the book, I love her quote that essentially says that when we’re talking about mobile it’s referencing the user not the device. And I think if we start there saying okay mobile is about the user not necessarily the device that they are using but the user. We then start to understand. Okay what is this user trying to do? Where are they? What are the limitations that they confront? And what are the oportunities that are provided through mobile that might not be provided elsewhere? So, it’s not about how do we make this experience similar to the desktop, but how is it different? How do we make it different and how do we welcome that different experience? So this idea of context, it’s this idea, you know, you have this great content, and we hear this phrase “content is king.” Well I argue that context is king. Cause when a user is mobile that content is of little value if you ignore the context in which it is being used. That inevitably leads to the question. What are the needs? What are the problems? What are the tasks that users may encounter in an environment of mobility. Then that leads to what are the opportunities that mobile provides for that given context. For our content, for our company that the PC doesn’t.

Paul: Yeah. I mean it’s a very interesting area because it’s almost somethign you need to address on almost an individual project basis. Looking at what content you’re working with, and working out what of that content is actually relvant to a mobile device and which isn’t. I mean you use an example about that somebody’s probably not going to want to look at your portfolio page on your personal website on a mobile device. It’s just not the right context. I guess that’s what your getting at there.

Cameron Moll: Right. You bring out a very interesting point and that is, let’s say a given company. Let’s say you and I as developers are working within an organization right. And we’ve got 20 projects that we manage. Something you said earlier keys to the point of looking at those 20 applications or websites and saying okay first of all which of these 20 apps might be relevant to someone being mobile. We cut that down to say 5 or 6 or whatever the number becomes. Within those applications or sites if we’re talking about existing content here within those applications or websites it’s those 5 or 6 as being perhaps suitable to mobility. We then look within those entire applications, so within a given application for example that might have 20 different tasks that a user does with that application. We then say okay which of those tasks are relevant to someone being mobile. So it’s this process, at least with existing content, looking at what are the applications we provide and within those applications what are the features that are going to be relevant. Now what that also ignores though is the fact that we’re not saying what are new opportunities? What applications have we not developed that might cater to mobile? Or within an application that we have developed, what opportunities such as location awareness might be provided to a user that we just haven’t even thought about it.

Paul: Yeah. I mean that whole about the fact that you get into this mentality that a mobile device is a cut down version of what you provide on the desktop. Actually, there are opportunities to do stuff on a mobile device that isn’t actually possible on a desktop and the location aware stuff is a good example of that I guess.

Cameron Moll: Right exactly.

Paul: Okay. So lets say as a web designer I’m beginning to get a bit excited about the mobile web. It’s obviously the way that things are going. You provide some excellent statistics in your book about take up levels of mobile devices and I’ve cribbed those and used them on the show before. So I think that there is a lot of people that are listenin to the show and going yeah this is something that I am really quite excited about. But where do I start? What kind of technical skills to I need to develop mobile websites? Is it enough to just know standards based design? Or is there other thins I need to know as well?

Cameron Moll: You know that’s a perfect question. If you look at where we are at now today it’s totally different then say 4 or 5 ago. I remember the same hype 4 or 5 years ago where people were saying mobiles coming. Developing websites for mobile devices is the next big thing. It just kind of died out. I think largely it was due to the fact that back then you still had to develop in WML, which is not a cryptic language. It actually provided a lot of clarity and unity to the mobile web environment 4 or 5 years ago. But at the same time it required that a lot of us had to learn a new language in addition to HTML or CSS. That’s no longer the case. So this second time around when we hear this hype about the mobile web, to me at least it feels much more real. Because now we have again, as I mentioned earlier, most devices out on the market, in fact nearly all of them support HTML, XHTML, and some level of CSS. So that means that you and I, we already know HTML. We already know CSS. We can take that knowledge and start developing content for mobile devices. Whereas 4 or 5 years ago we had to learn a new language just to get over that barrier of providing content. So the good news is, for the most part, really if you know standards based design and development techniques, you are 90% there. I think the other 10% is left to understanding context. So trying to understand what those limitations are with mobile devices and mobile users. And also looking at the opportunities. so again we’re talking about smaller screens, data entry. Those being limitations but at the same time location awarenes. Users just want to do things different. They’re out on the go, which can be a great advantage depending on what kind of content you’re providing. So I think the good news here, long story short, yes. You and I can just build on the knowledge we already have if we just start to understand just a little bit about what the users are doing.

Paul: I mean you say. It’s interesting some of the words you use. You say ‘for the most part.’ Or ‘some browers understand CSS.” And I think that’s the other big fear that people have when they start investigating the mobile web, is the huge plethora of different browsers and devices and all of this kind of stuff. And it seems like how the hell am I supposed to test on that. It’s impossible to test on every conceiveable device and every conceiveable browser. Where do you start? Where do you put your initial efforts?

Cameron Moll: You know when I first started talking about mobile I think I was a bit to pessimistic in that I would stand up, say in a conference or in an article, and say okay if you’re going to test for mobile devices be prepared to test on dozens of browsers and if you think 4 or 5 desktop browsers. And getting consistency right for those is difficult. Wait till you see the mobile web. I’m a bit more optimistic now. I hope the book at least comes across that way and when I talk about it at conferences it comes across that way. And the reason being is this. There are some pretty easy ways to deal with that challenge of consistency. Of testing for mobile devices. Of just developing content period for mobile devices right. So you and I, you use probably the web developer extension for Firefox. We both probably at some point used Opera. Both of those browsers with those extensions and plugins can, at least at the very start, render and initial small screen preview. They both have options to be able to do that. So starting at the very least we can develop, again because we’re developing in XHTML rather than WML, we can within the browser at least do a very quick test to see roughly how it’s going to show up for the user. After that, once you’ve got at least the markup structurally sound you can then jump over to emulators. Now there are plenty of online emulators. .moby provides one. Opera mini provides another and there’s several others out there. But also there’s desktop software that you can download to be able to emulate mobile devices. So then taking 5 or 10 mobile devices I can now test how my content’s going to render, and it’s very close to how it will actually render on the device. But you can’t stop there. The last step has to be actual devices. And I think this was what was insurmountable for me starting out as a mobile developer. At least a beginner saying oh gosh do I have to go out an purchase 100 devices to be able to test my content. Well fortunately you can get away with 5 or 10 devices. If you can get 5 or 10 devices that vary widely. By that I mean one being a very basic phone, another one being a PDA,another one being a popular device such as the Razor. If you can get 5 devices that vary widely, 5 to 10, the chances are that that content is going to render well for most devices out there on the market. That will get you close enough. A lot of that is based not just on my personal preference but on the case study that I offer in the book. That is the Yahoo! website for the FIFA world cup last year. They took that approach. They said you know it would be difficult to test on 100 devices but we think if we can get 5 to 10 widely varying devices that chances are our content is going to display well for a global audience. Which indeed it was for that particular website. So that’s the arguement that I’ve made. I’ve hear others make that arguement as well. And it’s not difficult to get that number of devices right. So you can probably get 3 to 5 from yourself, from friends, collegues and so on, on loan for a couple hours. If you’ve got a blog you can ask for volunteers to do testing. I’ve done that before and it works pretty well. And then finally anyone can hop on eBay and do a search for unlocked mobile phones and purchase phones for an affordable price and get you know 5 to 10 devices. That’s how I did it. You know I hopped on eBay. I bought about 5 phones that were unlocked and then I just take my SIM card and swap that around the phones when I am doing testing. So it’s really not that difficult once you’re done developing your content to make sure that it renders well for mobile devices.

Paul: What do you think about the kind of growing thing that we’re seeing at the moment about designing mobile sites for specific devices? Like the iPhone. Do you think that is a bad route to go?

Cameron Moll: You know I’m not going to say it’s a bad route to go. But I do question it’s integrity. Three years ago or so, when I bought, well this was a little bit after I bought my Treo, for example which is a feature rich PDA. There were all kinds of Treo specific sites that had been developed. So you had something like, lets just say you had something like ESPN.com/mobile/pda/treo would be the web address for that content. And it was formatted just for that device. When you think about all the devices that are out on the market you then realize that that becomes a big chore to try to develope content for X number of devices. Now I think with the iPhone at least you have that same experience being repeated. For me it feels in part like you know years ago when we hit up a website and it said best viewd with Internet Explorer 4.0 or something like that. You know that is what we’re seeing now with the iPhone. Granted the iPhone provides a much different experience and a much richer experience, which is great, but at the same time I worry that we are spending a lot of effort on a device that 1. Is not a market majority and 2. The device itself, the iPhone itself might change at some point in the future. I might have a larger screen. It may render content differently. Which then will require that we go back and rewrite that content yet again. So the arguement I’ve made is if it makes business sense to develop and iPhone optimized site well more power to you. Go for it. But I advocate as a default creating content that can render on as many devices as possible. Not necessarily just one device.

Paul: Cool. Thank you so much Cameron. That is incredibly useful. Where can people find out more about your book then?

Cameron Moll: The web address is mobilewebbook.com or they can find a link from my website cameronmoll.com.

Paul: Excellent. It’s a .PDF book that you can download instantly. Now waiting around for delivery at $19. The best thing of all is it’s nice a short. Just over 100 pages. Isn’t that right? Something like that?

Cameron Moll: That’s correct. And I’ll give your listeners a heads up that we’ve got a print version coming out in October to be announced soon.

Paul: Oh that’s excellent. So you’ve got the choice either way. Alright thank you very much for coming on the show Cameron. We’ll get you on again in the future no doubt.

Cameron Moll: Hey thanks Paul.

Social Participation as a business tool (Video)

Posted in Web strategy on September 28, 2007 by Paul Boag

Community based applications are applicable to all audiences and can be a powerful tool for businesses.

Social networks and communities are often seen as the domain of the teenage crowd with sites like YouTube and MySpace dominated by this demographic. However, community based applications are applicable to all audiences and can be a powerful tool for businesses.

Show 95: In honour of the the RAF

Posted in Classic shows on September 25, 2007 by Paul Boag

On this week’s show: Paul shares some techniques for selling your services through your online profile. Marcus discusses project time scales and Ben Hunt talks about marketing your web business.

Podcast: Download (24.9MB)

Download this show.

Launch our podcast player

News and events | Project time scales | Social networking for sales | Ben Hunt on marketing a web business

News and events

The Rissington Podcast

For over 2 years now we have been doing this podcast and in that entire time we have reigned supreme. There have been other web design podcasts but lets be frank they have been shit ;) Obviously out of politeness I have pretended they had their place but I think it was obvious to all that only boagworld was really worth listening to.

However, like all great empires sooner or later they crumble and fall to a new rising star and I fear that maybe true with Boagworld. There is a new kid on the block called the Rissington Podcast. Not only is it hosted by two web design guru’s in the form of John Oxton and Jon Hicks but it is also professionally put together and at times really funny.

This rambling, question based show shares some great advice on web design in an entertaining and friendly manner. Definitely check it out, we promise not to cry. After all, it is even more British than us!

Net Promoter Score

On last weeks .net magazine podcast we got talking about how to measure the improvements we make to the user experience in order to prove their value to a client. Peter Merholz from Adaptive Path mentioned something called the Net Promoter Score which I have confess I had never heard of.

Fortunately I wasn’t alone in my ignorance because Andy Budd had not come across the term either. However, unlike me he took the time do some research into the Net Promoter Score and post his findings online…

To calculate your Net Promoters Score, you ask your customers “how likely they would be to recommend you to a friend”, and get them to grade their answers on a scale of zero to ten. Zero would be extremely unlikely while ten would be highly likely. Those who answer nine or ten are considered promoters, and are the most likely people to evangelise your services. Those who answer between zero and six are considered detractors and are the type of people who will spread negative views about your services.

To work out your Net Promoters Score, you simply subtract the percentage of detractors from the percentage of promoters. A good score would be in the range of 50-80%, while an average score would be 5-10%. A poor score would be in the negatives…

Andy then goes on to explain how this basic question can be used to assess the value of your service. I can see why Peter brought this up on the show as it would seem an excellent way of assessing improvements made to the user experience. By testing before and after a site redesign it would be easy to measure improvements in the experience.

Try it on your next project.

15 Excellent Examples of Web Typography

This is a bit of a random news story but I really wanted to mention it. I am excited to see that the movement towards better typography on the web continues to build momentum and I am constantly amazed at just what is possible with a bit of determination.

Typography can me an incredibly powerful tool in our design arsenal, as I have no doubt said many times before. However, if you still need convincing then check out these 15 superb examples of web typography which I came across this week. There really is some inspiring stuff in here and it should be enough to get even the most jaded web designer playing with type again.

Social net offers new perspective

Talking of being inspired, my last news story of today is a post by Bill Thompson on the BBC technology site. I am not sure it is directly to do with web design but it certainly went a long way to re-energising me about the work I do on the web.

The article focuses on how the social side of the web is transforming not just the way we interact online but also our world as a whole. While other journalists seem to be hammering the social net as a haven for child predators and terrorist trainers, Bill talks about how it is uniting cultures and making the news we see on TV real again.

Bill writes:

What will happen when these people (referring to online friends we have made) start dying in famines or wars, or when the climate changes caused by global warming lead to floods and droughts and natural disasters?

What happens when the photos on Facebook and Flickr show devastated crops and starving families – and these people are not just faces on the television but old friends, people whose likes and dislikes and reading habits and favourite films we know and share?

The world is different when it’s the people you know, and I do not think we will be able to resist the forces of change when our friends are dying on screen, in front of us, and we know that we could do something but have decided not to.

The article really grasps the power of the social web, a power I personally am all too well aware of. Running and developing an online community is a strange thing. Many perceive social networks as a numbers game (a way of attracting traffic). However at its heart are real people and real relationships. I will never forget a woman called Crystal whom I became friends with back in 1997 when I ran a virtual community. Crystal was dying of cancer and was housebound. For such a long time she was the heart of our community until one day she died. The grief that we felt was just as real even though none of us had ever met her face to face. She was a real friend to me, a real person.

I think that is why many online communities fail. They fail because they don’t grasp that communities are about people and relationship rather than features and technology.

Marcus’ bit: Project timescales

I have often rambled on about the importance of contracts on this podcast and, within those the contracts, the need for a detailed spec, a detailed task list and associated timescales and milestones.

I still think all of those things are important but I do think that often (me included) people go into a land of fantasy when it comes a) when they can start a project and b) how long each one of those tasks will take.

Clients are guilty of this too.

This is what usually happens:

The client, not knowing how long the project will take, picks a date for project completion because they don’t want it left open. Let’s call it ‘date x’.
Unless it’s patently impossible to achieve, agencies will agree to this deadline because they don’t want to adversely affect their bid.
A certain amount of back and forth over the delivery date happens because, for example, it takes longer than expected to agree on a contract, or maybe the scope has extended a little, etc. But the agency can’t really move the date to somewhere comfortable because they have already agreed to ‘date x’. So, all parties then agree to ‘date x plus 1 month’ or similar.
The project then slips and both parties start blaming each other for it – the agency feels that the client is overly pushy and, worse, the client thinks that the agency is unprofessional, inattentive etc.

Be honest from the start

Seriously, do it. I was just having a conversation this morning with a potential client (hi Graham) who is looking for a new site. He has an unrealistic delivery deadline of the end of October. With Headscape’s current workload, I felt that we could deliver the project, at best, by the end of January. This blew our chances completely but -

a) Graham appreciated the honesty and, who knows, may want to work with us again or recommend us to others;

b) If I had underestimated – a favourite at this time of year is to say ‘we can do it by Christmas’ – then I would have become very unpopular internally and also with the client when we failed to deliver.

Don’t forget you have other clients

It is so easy to think ‘standard CMS site redesign equals 10 weeks’ and then go and quote a date for completion 10 weeks from now! Don’t forget the following:

It usually takes at least 2 weeks to sign a contract
Do you have the resources to start straight away?
What other projects are imminent?
Staff holidays

Educate

I think the problems I am referring to relate to the fact that, even now, we are working in a relatively ‘young’ industry. This means that many clients simply don’t have an understanding of how long projects, and the tasks within those projects, can take.

This used to be a problem with pricing and still is in some cases. However, client expectations of cost seem to be a lot more in line with each other than they were, say 3 years ago.

If we can explain what we do and how long it takes right from the start with a potential client, then hopefully client expectations of project length will also balance out.

Paul’s corner: Social networking for sales

From time to time I get questions about how to build your reputation in the field of web design. How do you become well known so that you can attract more work in? Its a fair question and one that inspired an article I wrote recently called The Geeks Alternative To Golf.

Ask the expert: Ben Hunt on marketing a web business

Ben:

Ill be talking about marketing a web business. And the things that I cover will apply particularly to small web businesses, little shops, web designers. But, the principles that we will be going over will apply to the whole of web design and in fact the design of any site at all.

What I am going to be talking about I guess comes under headology, psychology. It will be stuff like: self perception, posture, attitude, and brand – which are really central things.

So, starting with brand… what is brand? Well, brand is how people perceive you. What do you offer, what can you do for them. And what differentiates you from alternatives. Differentiation is absolutely vital and you must not ever underestimate it. There is a couple of books that have been really influential in hammering this point home to me.

The first one I would like to mention is called Purple Cow. It is written by Seth Godin, the kind of godfather of marketing. And the core premise of Purple Cow is… whatever you do, you have got to stand out 241 you’ve got to be memorable. In the 22st century just fitting in with people’s general expectations, fitting in with the crowd simply doesn’t cut it anymore.

The second book that I really loved is called Zag and it is written by a guy called Martin Neumeier. And it comes at the same kind of thing, but from a different angle. It says, “When everybody zigs, zag.” You go in the other direction. What ever is going on around you, do whatever it takes to stand out, to be noticeable and to go against the flow. Zag is also full of brilliant examples that explain why and also how you can go about it.

So what I am going to be covering is broadly three steps that will help you to get into a really winning mindset. Okay, so let’s dive in.

These days so much to choose from that we are surrounded by so many brands and so many messages all of the time. What drives our decisions and our choices as clients and what drives our client’s choices. And I find that it really really helps me if I try and get into the head of my potential customers. So the first thing to note, which is really often overlooked, I cannot stress this enough is people who land on your website (generally speaking) want you to be the one.

No one really enjoys trolling search engine results. People say to you, “Oh you know, you competitors are only a click away.” And I would like to say to these doom-and-gloom merchants, “So what!”. You know, when somebody is on my website, we are half-way there. We are over the first hurdle.

And these people are going to fall into two categories. They are either going to be someone who is looking for what we do and if they are fantastic! All we need to do then is to communicate that, quickly and cleanly to them, without giving them any reason to click back to the Google search results. And if this people is in the other category of people who aren’t looking for what we offer, no problem! We have got nothing to lose. We’re unlikely to be able to turn them around at this point and they are probably looking for something else.

But what we might hope to do, is leave a positive impression so that one day when they are sitting there at there desk going, “Do you know what we really need is someone who does expert site reviews, or somebody who specializes in Web 2.0 design.” You might hope that hey remember you.

It is really important to get your head around this reality that people who are visiting your sites are your friends and they want you to be right, so all you have to do is not bugger-it all up.

Okay, so let’s take it for granted that your honored site visitor is in the first camp. They are here because they are looking for what you offer; they want you to be the agency for them. Moving on to step two… How to let them make a positive decision.

Now here my advice is, work out who they really are. Who are your real customers? I see a lot of small agencies and free lancers, who on their websites they try and betray themselves as something they’re not – either bigger or broader or more capable. We don’t need to do that. The absolute core of this whole blurb I am spatting at is don’t pretend to be a big corp megabucks agency, if you’re not. Yeah…

The whole trick is to be who you are, and portray that in a strong way that people love; that people connect with. I mean, you’ve seen all this stuff where people say, “We this and we that.”. You know, all over their website. When it is clearly one guy sitting in his bedroom. And there is nothing wrong with being one guy sitting in your bedroom doing work; there is a market for that kind of thing. And the other kind of stuff you find is people say is that, “Oh, we do work for clients ranging from 50-quid jobs (for small local businesses) up to mega-gazillion jobs for international blah-blah-blah…”. And you sit there going, you don’t do those kinds of jobs.

So who are you trying to win? Are you trying to win BMW and SONY and Disney? Do you think they… those guys are going to come along to your website and fall for this stuff? Let’s say they did.

Let’s go on a flight of fancy and say that the VP of Marketing for Disney lands on your website cause they just happens to find himself between web agencies, looking for a new one, and he goes, “Oh wow! These people seem to have a team although I can’t see them because there are no names and there is not much of a portfolio. And they say that they work with companies just like mine, a massive global conglomerate.” Let’s say you caught him on a bad day and he accidentally picks up the phone and calls you. How long is he going to be on the phone for, one minute 241 two minutes, before he realizes that you can’t possibly give him the security that he as a big-massive client needs. So we just need to accept that these aren’t the guys who will be paying your wage.

So think, “Who are the real people who want what you offer?” And then, we brand ourselves, we pitch ourselves for those people uniquely. There is no point in pretending to be what you are not. What you need to do is present what you are, in the best light possible, which brings us onto step three… How to show who you are in a way that wins customers.

So the trick is to examine all the aspects of what you are, what you do, and how you work whether you perceive it as positive or negative. And build those things into a brand, into a whole impression, that really delivers for you. So let’s get back into our customers head.

Who are they, first of all? So they are not BMW and Disney and all of these guys. They aren’t going to be paying your bills. Who is going to be paying your bills? Who needs what you have? This is a two-way match between supply and demand. You can’t just be what you are not. You can only offer what you can offer. You can’t sell to people who need something else.

Let’s start with the givens. Let’s start with what you are and what your capabilities are, what you can do. And then, picture a market for that. But the trick here is to select what to show that might make you memorable and create a connection.

Often the things that you might perceive as weakness… for example if you are stuck in that mindset of thinking, “You need to pretend to be a massive full service agency.”… the things that you think are weaknesses may in fact be real strengths if you can spin them right, if you can present them in a right way. But, fundamentally this is all about getting your head around it.

Branding isn’t about pretending to be something that you are not. Branding is about working out who you are and what you really do and then standing there and saying it with confidence in a way that really impacts people.

Okay, so let’s look at a few things. Ah, you might be thinking, “We are not based in central London.” Great! You’re nearer to your local customers. You’re nearer your local small businesses who want somebody around the corner. They don’t want a big kind of so-ho agency.

So you are thinking, “We are just one person.” Fantastic! You have no huge wage bills and that keeps the cost down. And very often, your clients can know that they can pickup the phone, and might even have your mobile number, and they can pickup the phone and speak to you. And that is worth an awful lot to a lot of clients, knowing who is going to be on the other end of the phone.

“What about if you haven’t got an office?” Who cares if you haven’t got an office? You go to your clients and meet at their premises. It also keeps the fees down. Your local clients will respect that.

“You don’t know everything about web technology.” Who does? You might be a specialist in PHP or CSS. Or you might have a particular passion for religious organizations or green issues or whatever it is, whatever really floats your boat is whatever you want to do. Let’s do that.

Nobody knows everything. So if you are a small scale agency, we talk about this a lot, everyone has a network of other professionals and amateurs in your area, or around the world, who can help. And even the big agencies do that – everybody does that.

So what we are talking about is, say what you are really about. Lots of people make a positive decision to work with my agency, after reading our ethical policy that we publish on our website. And that works great for us because the kind of clients that we love to work for are actually attracted by reading that stuff and the other clients who are in industries that we don’t do, they don’t bother to get in touch. Which saves everybody time and effort. So now you are getting your brand together. We need to build in, what your audience wants.

So if you are really suited to dealing with other local small businesses, say. Think about what signs, what signals they are looking for to be able to make a positive decision to take the next step.

There are two important things to remember here. Remember the customer in on your side. They want you to be the one. And also, here’s a new one, you don’t have to close a sale on your website.

They job of the website is to get a qualified visitor from the point of first initial contact, knowing nothing about you, to the point of taking the next step. That’s it. So focus your efforts on giving the right kind of visitor, the right kind of signals, that you probably right for them. That is all that you need to do.

Now generally, you’ll be looking to reinforce just a few points and I always think of these as like check boxes in somebody’s mind. I like to picture somebody; think of what they look like, where they’re working, sitting at their computer typing something into a search engine and clicking on some results. And thinking, “What are the check boxes, what are the three or four check boxes (there are not usually more that that), in this person’s mind that I need to tick-off?”

And if you can tick-off those check boxes without upsetting the person, or giving them any reason to go away, and not believe in you then you’ve probably done your job. Then what you do is, you say (here is a call to action)… “If you want to talk about this more, that is fantastic, pickup the phone and call me and I would love to speak with you!”

Let’s imagine, depending on the market you are talking to, what kind of check boxes might be in somebody’s head. I think very often that they are things like, “I can trust these guys.” or “They are not going to be too expensive and will fit my budget.” or “They like working with companies like mine.”

So they are looking for evidence of all of those things. And it might be like what we said before; “I can get somebody on the phone if I need help.” And clients aren’t necessarily super confident in their requirements. You know, if it is an engineering company, and they don’t really know anything about media or marketing in particular, then there is no reason to think that they are sitting there being really really cynical. What they looking for is a friend, they are looking for someone to be on their side and to help them through this process.

All we need to do is get them effectively to feel good about you 241 is really what we are saying. We have to get them from first finding you, to coming to a point where they have no reason to think you are not the right agency for them, then you give them a call to action and you say, “Let’s get together and let’s talk about we can do for you.”

The thing I would add here is to do with focus. You need to plan the steps from the home page through to that call to action. Now you know your website might only be one page. You might only need one page to do that. You don’t have to have a news section. You might not have news to give. Don’t put a news section on because it will be a dead pit.

You should put on your website only the things that you need to get that person from A through to B. And you need to be very very focused about it. So don’t put in more pages than you need. Don’t put in more images than you need. Don’t put in more blurb-bump-from-rhubarb, the more blurb-bump-from-rhubarb you put on your website the more you’re going to be watering down your message.

Get all of these steps right, you have done your job and you should see the difference in your bottom line.

The Geeks alternative to golf

Posted in Web strategy on September 19, 2007 by Paul Boag

As a diehard geek/web designer I have developed a number of other techniques that allow me to network and sell my skills.

I have never been a great fan of golf. As far as I can see it is a silly game that ruins a perfectly good walk. For the longest time I didn’t get why so many people played it. I especially did not understand why successful business people wasted so much time hitting a small ball around in a field.

One day I mentioned my dislike of the sport to a golfing friend and his answer surprised me. “I don’t like it much either” he replied. “Then why do you play it?” I asked. He responded by telling me that he played with potential or existing clients. In short it was a sales tool. Golf is a boring slow paced game that allows ample time to for “networking”. My friend had plenty of opportunities to subtly sell his services.

Personally I don’t care how good a sales tool it is; I have no intention of taking up golf. However, as a diehard geek/web designer I have developed a number of other techniques that allow me to network and sell my skills.

Blatant networking

Most of us have already heard of Linkedin (www.linkedin.com). Aimed squarely at the business community its objective is to connect you to new business contacts through mutual acquaintances. At its heart, it is all about sales. It gives suppliers a chance to connect to potential customers through referrals, while buyers feel more confident in the supplier because it comes as a recommendation from an existing contact.

However, although it seems great in principle, I am yet to win any work through it. As somebody who isn’t really a sales person it feels heavy-handed and slightly aggressive.

An alternative is to make use of one of the many social networking sites out there. The first that springs to mind is myspace but no self-respecting professional would be caught dead there, so we need to look a little further. The answer seems to lie in facebook that appears to have exploded in popularity recently. I am continually amazed at just how many of my clients have a facebook page and just how many new contacts I am making through my facebook account.

The reason facebook works well is that it is not as formal as a company website. It is your “personal” page and people respond better to individuals rather than to organizations. It is far easier to ask a quick question of a person on facebook than complete a contact form on a website and risk being hassled by a sales person.

Of course you have to give people a reason to add you as a friend on facebook. They have to see a value in the relationship. What can you offer them? What do they get out of the association? This brings us nicely on to the “aren’t I clever” approach of social networking.

The “aren’t I clever” approach

Making contacts through sites like facebook is not enough in itself. Although it gets your name in front of people on a semi-regular basis it does not associate that name with quality work. Some degree of self-promotion is also needed.

Telling the world how great you are is always difficult. The problem is that if you do it the wrong way you come across as arrogant and nobody wants to work with somebody like that. The best approach is to not directly promote yourself at all but allow your knowledge and expertise to do the talking.

The most common way to achieve this is through a blog. By writing about your experience as a web designer you will naturally start to communicate your depth of expertise in the field. Blog posts demonstrating your experience are reassuring for potential clients because they show that you “know what you are talking about.” If you take the time to write your posts in plain English and avoid web design jargon then you will also be educating potential clients at the same time. This adds real value from their perspective and makes them more likely to subscribe to your posts.

Of course not all of us are great writers. However, there are alternative ways of promoting your expertise. If you are a designer your blog might consist mainly of example designs that you have produced with short explanations of your approach. If you are a coder you might want to focus on releasing code snippets that others can reuse. The important thing is that you express your knowledge and passion for the subject.

For me a podcast worked best. I found myself frustrated by only blogging as it was much harder to express my enthusiasm for the subject. By podcasting more of that passion comes across. Another advantage of podcasting over the written word is that people get to know you better. They feel like they have made a real connection and that helps when generating sales leads. However, podcasting is not for everybody and you need to discover what is right for you.

Giving away your genius

Although it is great to demonstrate your knowledge, many people are concerned that this gives away their competitive edge and intellectual property. The reasoning goes that if I tell the world how I code a particular solution or how I approach a certain aspect of web design, then my competition will use that knowledge.

To some extent this is a legitimate concern. Indeed, I know that many of my competitors listen to and learn from my podcast. However, ultimately I believe the benefits outweigh the drawbacks. Prospective clients respond so favorably to an open attitude and the knowledge you communicate through that approach that it wins far more work than is lost through loss of competitive advantage.

Another important point to consider is that the more you blog and talk about your expertise the higher your online profile and the more likely you are to be found. If you post content online it will help your search engine ranking and if the content is good then you will find more people linking to you. On the other hand if you fail to post for fear of losing your competitive edge then people will not discover you in the first place. Don’t allow a fear of your competition to hamper your marketing strategy.

Of course the danger with blogs, podcasts and social networks is that we hide behind them. Sooner of later we have to confront the real world.

Don’t forget real life

As I said at the beginning of this article, I consider myself a geek. One of the things I have observed about geeks is that many of us find face to face interaction difficult, especially when it comes to self promotion. We tend to shy away from such opportunities and hide behind technology. However, this is a serious mistake. If we are seeking to generate new business and increase our profile then we have to get ourselves out there meeting people.

There is certainly no shortage of opportunities available from conferences to meet-ups. Start by engaging with the web design community. Sure, some of them will be the competition but many will work for in-house web teams or agencies in search of outside expertise.

Conferences are a good way to meet people but meet-ups are even better. These informal gatherings of web designers are superb for networking because they provide many opportunities to chat and socialize. From Barcamp to Refresh there are literally thousands of these get togethers all over the world and they happen on a regular basis. The best place to start is by searching on “web design” at upcoming.org.

One problem you might encounter is that you may have to travel. Many events like these tend to focus on larger cities so if you live in a more rural area you could find a lack of events nearby. Personally, I live in the middle of nowhere but I still make the effort to go up to London because I am persuaded that face to face meetings are important.

So you have attended a meet-up and made a few contacts, the question is how to keep in touch and build those relationships? That is where twitter comes in.

Why twitter?

Take a moment to think about the problem. You have met somebody for a couple of hours at a meet-up. You get on well and feel it is worth keeping in touch. You could swap telephone numbers but why would you call them? You certainly don’t know them well enough at this stage to call for a chat! You could exchange email addresses but what reason would you have to write? People get enough junk email as it is without you pestering them. What you need is a lightweight and informal way of keeping in touch so that the next time you meet you have something to talk about. Twitter is the answer.

By adding a new contact to your twitter list (and vice versa) you can track each others thoughts and activities. My contacts on twitter post about their work, where they are going, their home life, all kinds of random pieces of information. By following this information I will have something to talk to them about next time we meet. I will know that one contact failed his motorcycle test or that another has just enjoyed a holiday in spain. It gives us something to discuss.

Equally, if they are following my twitters then they will know about my life and I will remain in the forefront of their mind. That way, the next time work becomes available for which I might be suited, they will remember me.

In short twitter keeps the relationship fresh even when there are long gaps between physical contact.

Of course, this technique only works when both parties are on twitter. However, more and more people are joining up to services like this and certainly many web designers are already using it.

Quick fire tips to social networking

So there you are. The geek alternative to golf. Social networking sites, blogging, podcasting, meet-ups and twitter. However, let me leave you with three pieces of advice that have been invaluable to me in my online interactions.

First, resist the temptation to actively sell. When it is so easy to block you the last thing you want to do is push your luck. If the prospective client can see your talent through your blog and is in regular contact with you through twitter or facebook then they will come to you when they have work available.

Second, use an actual picture of yourself. When registering for facebook, twitter or any other social website there is a temptation to use some clever icon or cartoon as your profile picture. Resist the urge. If somebody has met you for the first time at a meet-up they may well not remember your name when you ask them to be a friend on one of these sites. However, if they see your picture they are much more likely to recall you and hit add instead of block.

Finally, never dismiss anybody. If you become focused on sales and networking you may find yourself judging people by their potential value. It is a mistake to shun somebody because they are “just a student” or a junior designer. I have learnt from personal experience that anybody has the potential to bring in business. A junior designer can recommend you to his or her boss. A student will one day graduate and work for a company. Everybody has a value to your business and you should not ignore anybody. Anyway, to do so would be downright rude!

Show 94: Flickr Features

Posted in Classic shows on September 18, 2007 by Paul Boag

On this week’s show: Paul uses flickr as an example of best practice, Marcus discusses the use of client references and Patrick McNeil from Design Meltdown examines emerging design trends.

Podcast: Download (25.3MB)

Download this show.

Launch our podcast player

News and events | Using client references | What we can learn from flickr | Patrick McNeil talks about design trends

News and events

Developing your designs with the client

As I said on last week’s show I have started to reconsider the way we manage projects and I am considering a more Agile approach than we have used in the past. What I like about the principles of Agile development is the idea of getting the entire development team working together. Designer, developer, project manager, everybody.

From my limited understanding of Agile development it is also considered a good idea to engage with the client in this way too, by actively involving them in the development process. However I have to confess I find this concept hard to get my head around.

My problem is that Agile development is a very fluid process and I am not sure I am keen to expose the client to that level of internal workings. However, although I am still learning and have yet to draw my final conclusions I have to say I was impressed by an article on this subject that appeared this week on A List Apart.

The article talks about how you could include the client in a series of workshops so getting them more involved (and therefore more committed) to the project. What I found most reassuring about this article was that it proposed a semi-structured approach to the workshop thus addressing some of my concerns.

I am still not convinced that an Agile approach to development is always possible but I must admit I am warming to the idea and believe it is something we should all be considering.

Become a better illustrator

Its funny how you can be told something is great countless times and yet somehow you never get around to checking it out. Well up until this week that was true for me when it came to the video podcasts produced by Anton Peck.

I met Anton last year at SXSW and everybody told me what a great illustrator he was. We have been in contact on and off ever since thanks to twitter and IM but I have never really had much time to dig around his site. However, this week he launched a new version and it motivated me enough to have a look. While poking around I came across a series of video podcasts I had heard mention of before. They provide some excellent tips on how to be a better illustrator including working with colour, skin tones and custom photoshop brushes.

After talking to Anton I can say with some degree of certainty that there will be many more of this tutorials to come, so be sure to subscribe to the feed if you are a budding illustrator.

A new approach to stopping spam

There seems to be a never-ending torrent of spam these days not just in our inboxes but on any online form we create. There have been loads of solutions put forward but either they have accessibility problems or put the emphasis on the user to prove they are not a bot. Although there are also a few filtering services, they aren’t 100% effective and many have to be paid for.

Fortunately some clever spark has come up with a new approach to the problem. It relies on the fact that bots go crazy when they encounter a form and start randomly filling in every field. The technique involves creating an additional field with a particularly tempting name like “body”. The bots cannot resist completing the field while you can hide it entirely from users by moving it off screen with CSS or removing it with Javascript. The technique can be made accessible with a descriptive label for those using screen readers. This label asks them to leave the field blank. When the form is validated you can then simply delete any submissions that have content in the honeytrap field.

Photoshop secret shortcuts

We don’t seem to do many news stories for you hard core designers these days, so I thought I would end todays news segment with one for you. The Web Designers Wall has published a great list of photoshop secret shortcuts that are ludicrously useful.

I have been using Photoshop since its initial version and i wasn’t aware of half of these. For example did you know you could…

Navigate the document left or right using a key combination and a scroll wheel
That you could scale font size using arrow keys
That you can zoom with the scroll wheel
That you can drag to change numerical values
That you can use a keyboard shortcut to expand or collapse all layer groups
That you can easily hide or show multiple layers

Great stuff. Definitely worth checking out.

Marcus’ bit: Using client references

This is quite a tricky subject to discuss because I know that some of the clients that Headscape often uses as referees listen to this show!
So, first up, how to judge if a client will be a good reference. Ask yourself the following:

Did I deliver on time and on budget?
Did I deliver a quality/cool/innovative/rockin’ site or product? In other words, did you exceed expectations?
Did you get on with the client?
Is the client web savvy? I.e. would you be happy for them to talk to another potential client about your capabilities?
Would the client’s company name/brand/reputation help yours?

If the answers to all of the above are generally ‘yes’, then you really should try to get them to act as a referee for you or, failing that, get a testimonial from them.

Of course, if the answers are generally ‘no’ but the client was Coca Cola then, chances are, you should try and use them anyway!

Don’t just assume

Always ask people if they mind doing it. It quite often involves some work on their part, for example filling in a form.
I have asked clients in the past if I can just include their details in an ongoing fashion and most agree to this. However, I have made a point of checking back again with them, usually after 6 months or so, to see if it’s still ok. The last thing you want is someone getting tired of you asking for a reference because they’ll end up sounding weary of the process with the prospective client.

Also, try and read between the lines when you’re asking someone. If they agree, but you really think that they would rather not, then save them up for a particularly big tender you’re after.

Sometimes, tenders ask for a very large amount of references. In these cases, I include all the contact details but I ask that I am contacted, to ask permission, prior to any communication.

Vary the list

Not all tenders ask for references and, if that is the case, don’t include any. I simply add in a line saying that references can be supplied on request.

For those that do ask, don’t roll out the same old names for every proposal. They will end up getting hacked off with you continually including them. But, the main reason for not doing this is that you should try to include appropriate references for that particular prospective client. Obviously, similar organisations should be used but you may also want to consider whether the two people would get on well.

Paul’s corner: What we can learn from flickr

This years dconstruct really inspired me especially the talk by Tom Coates. It challenged my perception that web design is all about the website. Instead, as website owners, we need to start thinking about what content we hold rather than the method by which it is delivered.

These days the web is becoming less about websites and more about content delivery in all of its various forms. Once we wrap our heads around the fact that we should be focusing on our content rather than our website it offers some interesting new opportunities. However, instead of talking in theoretical terms lets look at a real world example; the photo sharing site flickr.

Ask the expert: Patrick McNeil from Design Meltdown talks about design trends

Paul:
So joining me today is Patrick McNeil who is probably best known for Design Meltdown although you seem to be running a whole plethora of sites at the moment Patrick.

Patrick:
Yeah, I keep busy for sure.

Paul:
That’s good. I wanted you on the show because from Design Meltdown it’s very apparent that you follow what’s going on as far design trends online. I though it would be good to get you in to discuss current design trends and that kind of thing. But before we get into that, tell us a bit about how Design Meltdown came about.

Patrick:
Well it started in school actually. I had a teacher on my design classes and we were using this book called Genius Moves by Steven Heller. In the book he catalogs design over the last hundred years by these totally random things like “big text” and “big hands”. Strange little things that you would never thing to classify design on. So it got me thinking about web stuff. I started snapshotting sites and starting building a folder structure of stuff. Then I realised “Hey, I can make a little website out of this” and that’s pretty much how it got started.

Paul:
It’s probably worth saying that’s it a lot more than the normal kind of screenshot sites that you see. It’s more of a blog organised in categories. Is that a fair way to describe it?

Patrick:
Yeah, I can of view it as a catalog of web sites. It’s almost like a library of stuff. As opposed to a showcase of beautiful sites it’s more of a showcase of sites in particular classifications where they make sense to go together.

Paul:
Yeah. You seem to give a bit of a commentary about what you are seeing in these different things which it looks like it has lead onto a regular column in .Net Magazine I noticed.

Patrick:
Yeah. I’ve been writing for .Net for about a year and a half now. Basically it’s the same thing there too. I pick some kind strange category and comment on it. It seemed to me that when I started it not only did I want to catalog the sites and show them in a new way from the other catalogs but I thought the commentary felt kinda weird writing about stuff at first. It felt so egotistical or something. Just the commentary seemed to be something that was new to that area. It was normally just “Here’s a bunch of cool sites to look at” instead of allowing me to write my thoughts on the topic.

Paul:
Definitely. You’ve been doing this for a while now. The site’s been up and running for a while. Tell us a little but about what you feel you’ve learnt through the process in regards to design and web design in particular.

Patrick:
Well certainly by moderating the sites that are coming in and then cataloguing them I’m forced to look at hundreds of sites. Inevitably you’re a little more exposed to what’s going on. A lot of times I feel I kind of have a feel of what’s popular at any given time. It’s really weird to feel that in touch. I know we all surf a lot but it seems kind of excessive because I have all these people submitting their latest and greatest sites. It puts you in touch with what’s going on. I think the biggest design lesson I’ve learned is, and we should know this because we go to school for it, that everything has meaning. Even the most trivial, insignificant-seemly things have abundant meaning to them. One of the perfect examples is when I commented on the badge at BoagWorld and that is how you first found me I think. With the badge, I would have used it flippantly and I think my comment on it initially was poking fun at it almost. Then you realise there’s actual power in that tool. Everything is a tool and potentially everything can have meaning right down to the smallest thing. There’s a pattern to fold over a corner to make it look like the page has been turned over like you would do in a real book. Things like that I might have initially thought were meaningless and after doing this for a while and you see enough sites that did the same thing, you’re like “Well there is actually some thought process that can go into that”. You can put some meaning into just about anything. It’s kind of fascinating. Makes me think more about the design elements that I would choose to use seeing that they have more meaning.

Paul:
So how has it influenced the designs that you’re producing these days?

Patrick:
I don’t a lot of design ironically. I tend to be more of a developer but I definitely do get to do a mix of things. I think it just makes me more aware of what I am doing and a little bit more aware of exactly what I’m doing and a little more conscientious when I go to implement something that I don’t just say “Well I think these shiny sites look cool lately so I’ll make a shiny site” or “I want a badge on my site”. It just makes me think things through a little better and not do things so flippantly. I try to consider what the real purpose of the site is, what the message is and that sort of thing before trying to come up with design elements that follow that need.

Paul:
You said a minute ago that you’ve been forced by doing this to become very aware of what design trends are around. What do you think is going on at the moment? What are the emerging trends you see going around at the minute?

Patrick:
Certainly there’s one that seems pretty obvious, everybody has made a shiny website by now. One where everything is all glossy. I think that that’s gone through some interesting patterns. It seems that lately, and this is probably true of almost any trend, at first it’s used just randomly and not very well and then over time it becomes more integrated into how designers work. So the results now are sites that are just absolutely beautiful. They completely use the style as opposed to just saying “I’m going to make a shiny logo”. It really is used throughout the entire design and creates a unified feel to it if that makes sense. It seems like patterns like that you see it more effectively used. The other one which I think has been going on for a little while now but it’s certainly a big trend, is the idea of more rapid communications. I’m sure you’re aware of how short attention spans are on the web. You go to a lot of sites now where they’ll have, and it’s sometimes bigger than the logo, a bold statement in ten words or less about what this company actually does. It used to be you’d go to some sites, even now if you find an older site, you’d be confused what the product is. You can’t even tell by the home page what the heck this company sells. So nowadays it seems like the utmost importance where there’s so many applications doing this, that and the other to clearly say this is some online accounting software, this is a to-do list manager, this software will help you track you Windows network, that sort of thing. It becomes the whole banner across the top quickly communicating what the heck the product is and then quite often it’s associated with an action item to sign up for an evaluation, getting a free account, something like that. That’s not so much a design pattern as it is a marketing pattern I guess. That certainly seems to be one of the more popular formulas to follow.

Paul:
There seems to be a bit of a skizzum in some ways in design where you’ve got that kind of design where it’s very functional based, very much orientated around meeting users needs and then on the other side of it you’re seeing some really beautiful, very ornate websites. There seems to be a lot of art deco stuff around. Very flowery or that kind of thing.

Patrick:
Yeah, definitely. Ornate has always been popular. That’s followed the same pattern I think as the whole shiny style in that it’s become a whole lot more refined and that you see people implementing it in a whole lot of different ways. It’s not “I’m going to throw a flourish on here and there” and that’ll be it. But now it’s become more that they have worked it into the entire design and almost makes designs that revolve around it. It makes a much more cleaner approach I guess.

Paul:
There’s some really stunningly beautiful stuff about. What about you personally? What kind of design styles appeal most to you and why?

Patrick:
On Design Meltdown I have a category called Super Clean. You’ll see sites like one I’m looking at now http://www.id-confirm.com. They have these network identification deals. If you just look at it, it’s just so clean and easy to consume. It’s simple and yet it has enough design and pizzazz to it where it feels like a really refined and high quality site. I love those and then ironically on the complete flip end, I love sites more like http://green.yahoo.com/18seconds. Sites like this are more inline with what you are referring to. I really love these visually intense sites where it becomes more about the experience of what you’re about to consume as opposed to just the content. Sites like this have to sell you on the whole idea of what they are doing before they let you get the content so to speak. I think I really like this approach even better probably because I’m not up to making designs like this to be completely honest. It feels a little beyond me and you always feel attracted to the things that you find most difficult. It’s kinda fascinating.

Paul:
Yeah, it is. Obviously sites like yours and there are other similar types out there, a lot of people go to these sites for inspiration when they are doing they own design work. I was just interested what your opinion was on that, whether you felt that was healthy or whether you’d encourage people to look further a field? And what other places you look for inspiration? There’s a couple of questions in there. [laughs]

Patrick:
[Laughing] Yeah, there’s three of four I think. I find that at my work my co-workers come to me all the time and ask “What do you have on this?”. I’ll point them to some articles and stuff to get inspired by and I think it’s incredibly healthy. I think if you’re going to design a site and you know the client… I think the key is to not to come to Design Meltdown to find out what you’re going to design but to decide the elements ahead of time and then come here to find resources that match that. Say you have a client and you know the site’s going to be blue. You have no choice, that’s the client’s colours or whatever. So it’s going to be a blue site. You could come here and start going through blue sites and see how other people have implemented the same style.

Paul:
I think that’s what is quite nice about your site. Because it’s organised in that way where you can go in and look at just blue sites or can look at sites that use a particularly clean style. You can do it that way round in preference to looking at hundreds of screenshots and thinking “I’m going to rip that one off”.

Patrick:
[Laughing] Yeah, exactly.

Paul:
A much more healthy way of thinking at it. Do you look for inspiration beyond the web? Are you one of those people that looks at architecture and print magazines, stuff like that? Or are you more interested in just the web?

Patrick:
I would say I’m mostly interested in on the web I guess. Primarily because just to keep up on Design Meltdown I have to go through 100 sites to find 10 good ones it kinda forces that. But I certainly get inspired by anything offline. I love going to an old library and looking through old books because the typography is amazing. They’re not limited by the whole computer and everything’s got to line up so easily and whatever. Getting into older things, going to museums and looking at old paintings, it’s amazing the design skills that you can see in work in those things. I think there’s certainly more than enough inspiration offline. Another thing I think people and I get tempted to do is to make a fake paint splatter on the computer instead of getting a can of paint spray, spraying some paper and scanning it. I think there’s this real tendency to think that you’ve got to do it on the computer whereas you can certainly unplug and do a lot of stuff to get a much more realistic feel.

Paul:
Yeah, I know. I think that’s great. So one last question before I let you get on with looking at several more hundred sites. I have to ask you about this thing of sites like yours where people just go along to them and basically rip off the content they are seeing. That’s always a hard line for people. I don’t think anybody necessarily goes along to this site going “I’m going to rip this off in it’s entirety” but you end up doing that. Where’s the line do you think between being inspired but somebody’s site and actually overstepping that kind of line and ripping them off so to speak.

Patrick:
Oh well, that’s kinda tough isn’t it. Most normal designs, most normal down to earth design, can have some similarities to almost any other kind of site that you’ve never seen before. I think it’s really on the designer. If they are unethical and choose to steal designs… I think it’s a mindset. I think as a young designer people might be more tempted to base more heavily on somebody’s design and as long you are honest about it or you do it in cases where it’s a student project, something where you’re learning from this experience, I don’t think there’s anything wrong with that. But as a professional designer you certainly just have to know you can’t do that. I think the big key is to before you even go looking for inspiration to think about how to solve a certain clients problem. You listen to the client and find out what their needs are, what they are trying to sell, all these things. You form ideas on what that might mean in terms of the design. Then you can just use these are tools to make you think along these lines.

Paul:
Yeah I would agree with that. I think the real danger comes when you start having Photoshop open in one window and the web browser open in another. If you’re looking at one site in one window and then you’re design it in Photoshop, then you’ve gone to far. I tell you something that I did hear once that I think works very well is that if you see a website that you really like instead of doing a screen grab and keeping that just pick out individual sections of it, little bits of it, and screen capture just the buttons or the links or the navigation. That works quite well.

Patrick:
Certainly.

Paul:
Interesting. Thank you very much for coming on the show Patrick. It was good to hear from you.

Patrick:
No problem. Thanks for having me.

Paul:
Hopefully we’ll have you back in the future.

Show 93: dconstructed

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

On this week’s show: Paul talks about how to make the most of the footer, Marcus explains why cold calling never works and Gary Marshall shares some great advice on writing content.

Podcast: Download (27.3MB)

Download this show.

Launch our podcast player

News and events | Why cold calling never works | Making the most of the footer | Gary Marshall on writing better content

News and events

iPod Touch

Unless you have been living in a cave for the last week you will already know that Apple has just released a new range of iPods including the massively exciting iPod Touch. What is so exciting about the iPod Touch is that it is basically an iphone without the phone. This means it has WiFi and a fully functional web browser. This is a major development in the web design world as it will mean millions of internet enabled iPods and a whole new audience in a whole new context.

What is more Apple has also done a deal with Starbucks where by songs played in Starbucks can be purchased directly on the iPod. I am convinced this is just the tip of the iceberg in terms of context / location aware mobile web. It won’t be long before you arrive at a University Campus and access a campus map or go to a shopping mall and access all of the menus of the various restaurants.

With the iPod being such a universal device now is the time to think about how you are going to utilize the power of the mobile web.

Free photo manipulation tools

This week I came across a site stuffed with loads of free photo manipulation tools. These guys have certainly been busy as there are loads of really fun tools including a Mosaic maker, CD cover creator and even a Hockneyizer. However, probably the most useful tool to us web designers is the palette generator. Upload an image and it will automatically create a colour palette based on it. Nice!

dconstruct feedback

This last week also saw the dconstruct conference in Brighton. I was fortunate enough to attend it and got to hear some truly remarkable speakers. I am not even going to try and recount all that was said, however I do want to particularly mention three superb talks.

Tom Coates, gave a mind blowing presentation on shifting our thinking from a website model to a data model and the consequences of this in terms of how we develop applications and how users navigate data. Tom’s presentation really felt like a glimpse of things to come.

Leisa Reichelt gave an inspiring presentation about how we develop projects. Amongst other things she talked about Agile development and I have to say this was the first time it has been explained in language I understood. This talk definitely made me reconsider how we run projects.

Finally, I couldn’t mention dconstruct without talking about Jared Spool’s presentation on experience design. Jared (who is a superb speaker) took us through how to create great experience design, explaining why it is important and how to draw together the necessary skills to make your design stand out from the crowd. Compelling stuff.

The reason I mention all of this is that all of these talks will soon be released as podcasts and I wanted to strongly encourage you to check them out!

170+ Expert Ideas From World’s Leading Developers

The final story today is the release of an article on the smashing magazine website. The guys at the magazine interviewed 50 designers and asked them 6 questions. This has led to an article with 175 professional suggestions, tips and ideas.

Its always fascinating to see how other designers work so this article is definitely worth a once over.

Marcus’ bit: Why cold calling never works

Ok, to say that cold never works is a bit strong because very occasionally it does. I should also qualify that I am talking about winning quality web design work here.

So, a more appropriate, but considerably more boring, title would be: why cold calling almost never works when selling quality web design services.

But, in my opinion, you don’t really even need to qualify the ‘what’ you are selling. I guess there are certain products or services that can, effectively, be sold over the phone to a person/organisation that you don’t know but I expect they are few and far between.

The word ‘effectively’, in the last sentence, is pivotal to this. I would love to see the ratio of telesales staff costs against actual sales won via the telesales force for, say, a double glazing company over the last year. The fact that I seem never to be called these days by double glazing companies suggests that my suspicions are correct and it simply isn’t worth it.

I don’t know anyone who likes being called out-of-the-blue and certainly, no-one who has actually bought anything through this process. I think most people are instantly ‘on guard’ and mistrusting of a cold call. This has worsened, I believe, over time and has now reached the point where it has almost become a joke.

Anyway, I’m rambling off the point – back to web design.

You can’t create a project that doesn’t exist

This is the main issue. Even if you are lucky enough to find a receptive listener, the chances of calling them right at the point where they are thinking about starting a web project is remote. The best you can hope for is that contact will be made later when a real project does happen.

You may not be talking to the right person

It is very possible that the one successful call that you made after a day’s banging the phone was actually to a chatty junior who cannot make or even influence decisions. Asking to speak to the ‘marketing director’ or ‘person in charge of the web budget’ etc is a recipe for an instant hang up.

Even if you are speaking to the ‘right’ person, chances are they will have to go to other partners or directors and that group will want to know track record, where did the recommendation come from etc.

Making yourself known

Ok, so you can’t actually win work cold calling but you can occasionally start the process of winning work through a cold call. However, I would say from experience, that this cannot be a completely cold call. You need at least one thing connecting you to the person at the other end – and the direct mail piece you sent them two days ago does not count because they will have instantly thrown it in the bin!

The kind of things that can make this type of call potentially worth it are:

Work done for one of their competitors (vertical selling)
Locality (“we’re in the same town”)
Professional connection e.g. a print designer you are close to works for them
Social connection e.g. my neighbour Dave Smith works for your accounts department and thought I should call you….

But remember you are simply selling your professionalism, skills and competence; basically, just the chance to pitch for work when it comes around.

However, I would recommend that the majority of your efforts are spent on a) ‘hot’ calls to people who contact you with real projects and b) your existing clients as they are usually your best prospects.

Paul’s corner: Making the most of the footer

This week I thought I would try and tackle a question from Peter in Italy…

Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

Gary Marshall on writing better content

Paul Boag:
So, joining me today is Gary Marshal, a technology journalist and author and many other good things as well. Hello Gary.

Gary Marshall:
Hi Paul, how are you doing?

Paul Boag:
Not too bad, good to have you on the show, we had you on once before as I remember.

Gary Marshall:
Yeah it was a couple of months ago now wasn’t it?

Paul Boag:
Yeah it was a little while back. What I thought would be good today is to get you on to talk in broader terms about writing for the web, and writing in general, as obviously that’s what you do for a living. That’s your job, and so I thought I’d kick off with really a question about copy writing and copy writers; do you thing website owners should be looking to get a professional copy writer in to work on their website rather than doing so themselves?

Gary Marshall:
I think it depends a lot on the website that you have, if your doing something where your unique selling point is a fantastic price for a product, then it probably doesn’t matter too much what the copy’s like, but the more important the text of your site is, the more important it is to have good text. So take for example if your site is a brochure then obviously the quality of copy then is really, really important. There’s also the technical side of writing as well, which is not so much a copy writer but more of a technical writer for that so you know, product information, frequently asked questions, support, that kind of thing.

Paul Boag:
What benefit do you get from getting in somebody who does this professionally in preference to trying to do it yourself, where’s the real kind of money earner in it? If that makes sense, the return on investment.

Gary Marshall:
Yeah. Well it really depends on what your sites all about. One of the things about getting a professional to do it is it saves you time, the same way you would get somebody in to do stuff around the house because your time is better spent doing what your good at. But particularly with copy writing, if you get somebody who is pretty experienced in this, what they’re doing isn’t so much writing, but its writing that works. So you know a good copy writer can say more in a sentence than your average guy can say in 700 paragraphs, which is one of the reasons that guys in advertising get paid so much, because they come up with these fantastic strap lines that lodge in peoples minds.

Paul Boag:
Yep ok that’s fair enough. Obviously the main thing that puts off people from getting a copy writer is the cost associated with it and sometimes its just prohibitive, although I have to say that I get somewhat confused that people recognise they cant do design and they get a designer in to do that but somehow people think they can do copy which is somewhat confusing sometimes.

Gary Marshall:
Yeah, it’s not that expensive. If your going to have a multi page, 1000 page website then yeah it is going to cost you a fair whack of cash, but he majority of writers tend to be paid by the word, so you’ll set a rate, and what it is you want to get and the end result isn’t going to be an awful lot of money. Your looking at a couple of hundred quid for a couple of thousand words, its not a lot.

Paul Boag:
No I suppose in the grand scheme of things that isn’t much at all is it? If you think of the amount that people pay for content management systems and design work and usability testing and all that other stuff.

Gary Marshall:
Provided they’re good at what they do. Of somebody is going to polish the text in your website, and make what you do sound absolutely fantastic, if that makes the difference between somebody hiring you or not or somebody buying your product or not then it’s paid for itself.

Paul Boag:
So, making the presumption that there are some people out there that just aren’t in a position to hire a professional copy writer and its just not an option – what advice would you give someone who is starting out writing copy for their own website? Where would you start? What are the most common mistakes?

Gary Marshall:
I think the most common mistakes are thinking from your own point of view rather than from your visitors point of view, I’d say that’s probably the worst offence that you can do, and it’s the old moaner when if you have a frequently asked questions section it’s the questions you hope people would ask rather than the one people actually do ask, you get an awful lot of people where on a website the fist page is the entire corporate history and as a visitor I don’t care, I don’t want to know this stuff I want to know what are you going to do for me why should I hang about here. So it needs to be very much ‘put yourself in the customers shoes’. Have a look at other websites and see what you like about them and what works on those sites. The other thing you need to think about big style is search engine optimisation. I was talking to someone the other day who was saying ‘when we do searches on particular products and particular areas we just don’t come up in the results at all’ and I said ‘do any of these phrases or words feature on your site?’ the answer was no. That was probably why they weren’t featuring in the search results! It might be obvious to you that your search should come up if you look for, I don’t know, web design companies in Brighton, but if you don’t have the words ‘web design’ and ‘Brighton’ in your website its not going to be indexed by any of the search engines. That can be a really difficult one to pull off, you see a lot of bad copy writing that’s done purely on the basis of SEO, where they’re just trying to get as many different phrases in as they possibly can to try and get it up in the Google rankings and I think that’s counter productive because ultimately your trying to get humans to read this and if somebody comes to your website and the whole thing is stacked with all these meaningless phrases that don’t actually give you any useful information at all, then your just going to go ‘what a waste of time, I’m out of here’

Paul Boag:
Do you think there’s a difference between writing for the web and writing for other mediums?

Gary Marshall:
Yes

Paul Boag:
What kind of differences? What should people be doing differently?

Gary Marshall:
The biggest one is brevity, simply because your reading on a screen – you’ve no control over what sort of screen people are going to be reading on for starters, so I might be looking at it on my BlackBerry, you might be using a 22 inch monitor, but web content doesn’t lend itself to huge blocks of text and long, long sentences so you need to think much more visually than you do with the printed page I think, break it up a lot more and have a lot more white space. The way to present it can be important also, even having a bigger gap between lines can make a big difference to whether your text looks appealing or not. Again, work back from the basis of ‘what is it that your visitors are going to want here?’ You need to really start with that. I find that bullet pointing is usually a very good way to approach it. So, you sit down and think ‘what are people coming to my website for? And what is it they’re going to be looking for?’ and answer that first. If you’ve got a bit of spare time go into you full corporate history and everything you’ve done in your life, but concentrate on the purpose of your site first.

Paul Boag:
It strikes me that websites, unlike other mediums aren’t linear, so you have the option to start with the top level brief information and highlights, and people can kind of dig down to the in depth stuff if they want to.

Gary Marshall:
Indeed, one of the things you see in print a lot is the use of ‘pull quotes’ to draw your attention to a particular bit of the body copy, and its basically a sales technique and exactly the same thing works on websites and can be very effective and can encourage people to read more. The other thing I would say is try not to link too much in your actual body copy because every little blue line there is a potential reason for someone to disappear.

Paul Boag:
Ok that’s interesting.

Gary Marshall:
I think it can get in the way – if you’re trying to engage people you don’t want people to go off on tangents because you’ve got this short attention span thing going on.

Paul Boag:
Yeah I can accept that – the other thing as well is that if the page is full hundreds of links it makes it visually quite difficult to read as well.

Gary Marshall:
Yeah and avoid these kind of hover over adverts that infest websites. If it looks like a link I expect it to be a link and if I move my mouse over it and just get ‘find out about hotels in Guatemala’ or something its instantly away from the website. There’s something as well, I don’t know if its true or not but in journalism school they teach you when writing for tabloids you should write on the assumption that your reader is going to be a small child, and I think that can work with websites as well because it really does focus you on getting the information there quickly with the minimum amount of waffle and without going off on huge tangents. And like the old press thing as well where you have all the information in the first paragraph and you expand on it as you go along, so you should be able to chop from the bottom. If you’ve written 500 words, you should be able to chop the bottom 250 off that without losing sense of what you’re doing.

Paul Boag:
Yeah that’s good. So, websites are one thing – your kind of corporate websites and things like that, but more and more organisations are starting to use blogs as a method of communicating. Do you think there’s a difference there? What advice would you give to people writing posts for blogs?

Gary Marshall:
Be sure that you want to do it in the first place. Jacob Neilson quite famously said the other week that businesses shouldn’t blog, and he’s getting a bit of a headline generator there – he doesn’t mean no business should blog, but it can backfire because the nature of blogging is very much off the cuff, very quick reactions to things and that’s fine if it suits your particular kind if business, but if people are coming to your site for in depth information then I don’t think blogging does suit because by it very nature blogging is your most recent thought at the top so if you don’t have regular readers its quite easy to fall into the trap of assuming everybody knows the context of what your talking about, and they might not because you wrote about it 3 weeks ago or 3 months ago. That’s quite a common pitfall I think. The other thing about blogging is because it’s quick and easy it does encourage you maybe not to craft things as well and not think things through. You have got to remember that this stuff potentially hangs about for eternity. So it might be tempting to, I don’t know, slag off the competition or something but it could well come back and bite you later on. I think with blogging, it comes back to any sort of writing – you need to know what your trying to achieve with it because if you don’t have a clear idea of what your blog is going to bring to your website, and what benefit its going to bring to your visitors and customers it’s a potential massive waste of time and effort that you could be spending on something more interesting.

Paul Boag:
Yeah.

Gary Marshall:
I sound really negative; I don’t mean to be really grumpy today! But I think it’s a bit like in the early days in the web there was always these wonderful ‘do-hickeys’ and logos you could slap all over your website and lots of people did without actually asking ‘does this bring me any kind of benefit whatsoever?’. Done well, blogging can be a fantastic thing on a website. I’ve seen a few examples of it in all kinds of things – I was looking for drum loops for ‘Garage Band’ and I was looking at the various drum loop companies and I found one that the owners blog, and they talk about how they do the stuff, what they’ve got coming down the line, why they think that they’re great and nobody else is and all this kind of stuff and I really quite warmed to them and that encouraged me to have a look on their website and I ended up spending money on it. Other sites that are just plain old e-commerce things and really don’t care. Unless your doing a kind of niche market where I don’t know, ‘golfing grandmothers’ or something then the very fact that you’ve got a niche people are more likely to pay attention to what you’ve got to say. I don’t care if the marketing director of Comet has a blog; I have no interest in what he’s got to say – so adding it to something like that would be a waste of time. I don’t want to read a blog on ‘great big faceless ISP dot com’ whereas ‘Merchant city music’, which is a music shop in Glasgow, I’d be quite interested in what these guys have got to say, so ‘We’ve got some amazing stuff coming in!’ or ‘we were away seeing a band last night and they were fantastic!’. That feeling that your part of a bigger picture can be really effective, particularly with smaller businesses.

Paul Boag:
Yeah, good stuff I couldn’t agree with you more. I think there are a lot of blogs out there that shouldn’t be out there and there are also some places that should be blogging that aren’t.

Gary Marshall:
Yeah I would agree with that.

Paul Boag:
OK thank you very much for your time Gary, it was really good to talk to you again and no doubt we’ll have you back on the show in the future

Gary Marshall:
No doubt!

Show 91: God Bless America

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

On this week’s show: Paul gets to grips with the fact that the whole world isn’t British, Marcus explains how to deal with the client from hell and Julie Howell shares her expertise on accessibility

Podcast: Download (32.3MB)

Download this show.

Launch our podcast player

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

News and events

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

Gerry McGovern on Intranets

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

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

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

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

SXSW Panel Picker

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

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

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

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

My panels are:

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

Hopefully at least one of these will come off.

HTML characters lookup

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

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

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

Very useful indeed.

Moving from Print to the web

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

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

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

Marcus’ bit: Dealing with the client from hell

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

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

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

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

Certainly do all of the following before you start:

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

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

Limited iterations

This is when you say to the client:

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

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

Averaging things out

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

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

Paul’s corner: The international web

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

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

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

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

Ask the expert: Julie Howell on Accessibility

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

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

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

Julie:
Well it’s a recent change anyway.

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

Julie:
Thank you.

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

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

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

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

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

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

Paul:
[Laughs]

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

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

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

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

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

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

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

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

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

Paul:
Wow!

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

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

Show 86: Boagworld Book

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

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

Podcast: Download (44.6MB)

Download this show.

Launch our podcast player

Paul’s personal news

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

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

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

News and events

Building for the iphone

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

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

@media podcast

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

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

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

Common mistakes in web copy

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

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

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

A department dedicated to the web

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

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

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

Paul’s corner: Taking a brand online

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

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

Marcus’ bit: Information architecture review

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

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

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

First things first

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

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

Map out the existing site

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

Be logical, captain

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

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

Naming

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

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

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

Section ordering

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

About Us | Services | Case Studies | Contact Us

Conventions

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

Collaborate – to a point

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

Ask an expert: Ian Lloyd on screen readers

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Here’s another example of the same thing.

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

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

[Screen reader announces more examples from the same page]

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

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

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

So let’s look at another example.

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

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

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

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

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

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

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

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

Basically, completely unusable.

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

[screen reader interrupts as page loads]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[more screen reader confusion]

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

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

No show next week

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

Taking a brand online

Posted in Design on July 6, 2007 by Paul Boag

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

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

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

Typography

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

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

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

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

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

Layout

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

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

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

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

Logos

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

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

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

Colour

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

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

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

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

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

In conclusion

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

Show 85: Bulletproof

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

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

Podcast: Download (20.3MB)

Download this show.

Launch our podcast player

News and events

Unfolding the fold

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

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

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

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

d.construct tickets on sale 10th July

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

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

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

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

Fonts licensed for web apps

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

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

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

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

A new way to visualize your desktop

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

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

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

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

Paul’s corner: Design advice for developers

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

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

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

Marcus’ bit: Post launch Protocol

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

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

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

News and events

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

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

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

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

Shortcuts

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

Homepage shortcuts tend to link to:

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

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

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

Imagery

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

Communicate

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

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

Think big

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

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

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

Review: Jeremy Keith’s Bulletproof AJAX

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

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

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

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

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

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

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

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

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

Show 83: iphone bollocks

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

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

Podcast: Download (19.3MB)

Download this show.

Launch our podcast player

News and events

Safari for Windows

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

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

We will see.

Applications for the iphone

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

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

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

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

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

Web Design-isms: 7 Surefire Styles that Work

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

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

CSS frameworks

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

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

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

Agony uncle: The importance of undo

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

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

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

Client corner: Stakeholder interviews

Got this question from Dusted.

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

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

Starting off with a few…

Describe your department’s needs of the web site.

What can be done in a better way?

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

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

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

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

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

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

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

Politics

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

Education

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

Verification

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

Semi-structured

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

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

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

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

Ask the expert: Struan Robertson on Legal Issues

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

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

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

News and events

Creating grid layouts

Flash goes open source

Accessibility and AJAX

Developing effective forum leadership

Feature: The personal website is dead

Interview: Jeff Croft Talks About His View On Web Standards

Listeners feedback:

Getting a site off the ground

Testing

The Boagworld website has moved

Headscape is rebranding

Our product is coming

The book is progressing

Speaking

News and events

10 Absolute “Nos!” for Freelancers

Making the most of working with designers

How Open ID will change your site

Good practice when working with Tag Clouds

Marcus’ bit: Requirements capture

Existing site review

Stakeholder interviews

Work together

Create the document

Paul’s corner: Spending your training budget

Training course give away

Ask the expert: Roo Reynolds on virtual worlds

Question of the week

News and events

OpenSocial from Google

Content and presentation

Online calendars and date pickers

Marcus’ bit: Rates Part 2

You get what you pay for

So, what do people charge

Pricing roles

Regionality

Raising prices

Paul’s corner: Intranet delusions

Ask the expert: Andy Budd on design sign off

Question of the week

Housekeeping: Prizes and problems

A free ticket for FOWD (New York)

Download problems

News and events

Em Calculator

How to disarm 10 difficult client observations/requests

The resurrection of downloadable fonts

Creating better user personas

Marcus’ bit: When to allow a loss leading project

Paul’s corner: Ongoing role of the website manager

Web Designers reading list

Question of the week

A multi-national comes knocking

Promises of future riches

You’ve got a new toy

Evaluating site objectives

Refining the site

Site promotion

About 100th episode

News and events

Gossip from FoWA

The average website visitor

Getting started with Photoshop

Waking the sleepers

Marcus’ bit: Extracting the budget from clients

Paul’s corner: Avoiding design by committee

Ask the expert: Dan Cederholm on ems vs pixels vs percentages

Question of the week

News and events

Social Participation as a business tool

Test your website for mobile compatibility

Laying out inline images

10 Usability nightmares you should be aware of

Marcus’ bit: When is speculative design okay?

The worst case

When is it ok?

Educate (how many times do I use that as a heading!)

Paul’s corner: Who to ask to tender?

Getting a site
off the ground