Tag Archives: audience

A partnership of cooperation

Posted in Web strategy on by Paul Boag

At this years FoWD I shared how the relationship between web design agency and client is fundamentally broken. Where there should be mutual respect and cooperation, there is negativity and mistrust.

I am horrified by some of the stories I hear from clients and web designers about failed web projects. In most cases the problem has been not with the project itself, but with the relationship between client and supplier.

Although we are learning at Headscape, we have discovered three principles that will help both designers and clients work better together. To run a successful web project you need:

  • Mutual respect
  • A defined relationship
  • A positive attitude

By building these characteristics into your relationships there is a much greater chance of success. Let us look at how.

Learn mutual respect

It is disturbing to hear how some web designers refer to their clients. There is an underlying feeling that clients are stupid and just hamper the development process.

In reality clients are normally a key component and extremely knowledgeable. The client usually has a better understanding of their business objectives and target audience. They know what they want to achieve through the website and will have to work with it over the long term.

The client is the sites advocate, evangelist, defender, content provider and more. He is the driving force behind the site and deserves the designers respect.

However respect is a two way street, and clients often undervalue web designers. This is especially true in in-house teams although it also occurs when hiring external agencies.

Clients often reduce the role of the web designer to a pixel pusher. They micro manage designers effectively ignoring the extensive experience the vast majority bring to the table. Everybody has an opinion about design, but good design is not about personal opinion. It is about fundamental rules of layout, typography, colour theory and more. It is the designer who has expertise in these areas, and the client needs to respect this.

This lack of respect is often because both parties misunderstand their respective roles.

Define the boundaries of the relationship

Both designer and client have expectations of their role and that of their opposite. However, these expectations often differ. For example, if a client has not worked on a web project before they are unlikely to be aware of their role. This can lead to the client straying onto the designers territory or failing to fulfil their own obligations in the eyes of the designer.

At the outset of a project define the boundaries of the relationship. The client’s role in particular needs to be clearly defined.

Clients should be focusing on three things:

  • The business objectives – The client understands the business objectives associated with the website. Therefore, they should be constantly asking whether the design fulfils these objectives and if not explaining to the designer where they believe it falls down.
  • The needs of users – A good client should have an insight into the behaviour and character of their target audience. The client should assess designs not based on personal opinion, but within the context of the target audience. They should ask how users will react to a design, not what you think of it personally.
  • Problems and not solutions – Many clients endeavour to find solutions to perceived problems rather than communicating the problem to the designer. For example, a client should not suggest that a design is changed to a specific colour. Instead they should express concern that the target audience may not respond well to a particular colour. The designer can then decide on the best way to resolve the problem. If the client does not communicate the underlying problem, but merely suggests a solution, he is straying onto the designers territory. This prevents the designer from doing his job properly.

Of course, it is not just what you say but the way you say thing.

Build a positive attitude

Interestingly that both designers and clients perceive the other as a barrier. Designers believe that projects would run smoother without the objections of clients. Client perceive designers as negative and constantly undermining their ideas and suggestions.

Personally I rarely say ‘no’ to a client. Saying ‘no’ ends the discussion and leads to confrontation. It also fails to communicate the problem or identify a way forward.

Does this mean I do everything my clients ask? Not at all. Instead I provide them with enough information to realise that their suggestion may not be the wisest decision. In short I say ‘yes we could do that’, but then go on to explain the consequences of their suggestion.

However, you should not stop there. Also ask the question ‘why’. The other party may make a suggestion that seems ridiculous, but they will have had their reasons. You need to know what those reasons are. By understanding them you maybe able to provide an alternative that keeps everybody happy.

Maintaining a good working relationship between client and designer is not an exact science. However these approaches have gone a long way to improving the way we work with clients. Hopefully they can do the same for you.

142. Community

Posted in Classic shows on by Paul Boag

In this week’s show Ryan and Stanton cover the news in Paul’s absence, we’re joined by Mark Boulton to discuss design by community and Marcus reminds us to keep positive.

Download this show.

Launch our podcast player

News and events

Typeface.js

There are many solutions to insert custom fonts into your designs, whether it’s the good old CSS image replacement techniques, SiFR or FLiR, we’re really just biding our time until font-embedding through the @font-face rule becomes widely supported in the browsers (we’ve covered font-embedding before in show 129) But for now, there’s another technique on the block called typeface.js which uses browsers’ vector drawing capabilities to draw text in HTML documents.

Browsers have, for a while, supported vector drawing – Firefox, Safari and Opera support the canvas element was well as SVG, and IE supports VML. The Typeface.js project uses this vector capability to ‘draw’ the fonts within your webpage.

There are a couple of caveats, while the ‘drawn’ text is selectable, it’s not highlighted (though this should be remedied in future versions) and the fonts have to be converted first through a tool available on their website. But this might be a nice little fallback if the users browser doesn’t support @font-face.

Sell Your Web App

In our next news item Ryan Carson, owner of Carsonified, has this week published a blog entitled “Sell Your Web App: Lessons I Learned From Selling Dropsend” and as you would expect from that title he shares his tips and mistakes when selling his app and it’s a very interesting read.

He talks about considerations like choosing the right merchant account, anticipating high lawyer and accountancy fees and off course being discreet, don’t blog about your sale!

He’s also prompted for people to leave their own tips in the comments so if you’ve sold a web app yourself head over to thinkvitamin.com and share your experiences as well.

Lessons learned while building an iPhone site.

Theres a nice article on the Flickr Blog which details some of the lessons they learned while building the popular iPhone version of the Flickr site. They go into detail of subjects such as “don’t use a javaScript library or CSS framework”, “Load page fragments instead of full pages”, “optimize everything” and making sure to tell the user what’s happening through visual indicators.

If you’re developing iPhone apps, or are even just thinking about it I’d recommend giving this article a read before you start work, it may save you a lot of time down the line.

Free Site Validator

Our final news item brings our attention to a service blogged about by Roger Johansson at 456bereastreet.com. Roger was looking for a way to validate his site without having to do every page individually and what he found was freesitevalidator.com.

The service automatically craws each page of your site and checks it for validation, as well as giving you a report of any broken/dead links. Also known as Link Rot!

The service looks really useful so be sure to check it out.

Back to top

Interview: Mark Boulton on Design by Community

Paul: So as I said at the start of the show, joining me today is Mark Boulton. Good to have you on the show Mark.

Mark: Good to be here.

Paul: It’s nice to finally talk to you, we met up for the first time just a few days ago now.

Mark: Yeah, it was it was about a week ago.

Paul: It was great to do so. I talked about you a few weeks ago on the show as well when we were talking about a recent blog post that you wrote. But we will come on to that in just a minute. What we are going to talk about today with Mark is that he has done the unthinkable from a design point of view. Haven’t you really?

Mark: I have really yes.

Paul: You’re totally insane and so I wanted to pick you brain about why you have chosen to do the unthinkable. Before we get onto that, all of this resolves around some work your doing for Drupal. Tell us a little bit A) about what Drupal is and B) what you are doing.

Mark: Drupal is a Content Management Framework I guess, that allows people to build websites and its an open source project, it’s been going for quite a while now. I think seven years or so. The software is on version six now and it has a very large user base. Probably three hundred or so registered users.

Paul: Three hundred users?

Mark: Three hundred thousand!

Paul: Ah ok.

Mark: So it’s a pretty enormous project really, and with it being Open Source these are all very passionate developers. It’s quite a developer centric platform.

Paul: Ok.

Mark: The community, with it being open source the community contribute quite a lot to it, with modules and themes and that kind of thing, plugins. Our involvement in the project is redesigning drupal.org, which is kind of the home on the web of the framework, so you can go there and download and read documentation. But it’s also the home of the community, which is a pretty huge one. So it’s very exciting.

Paul: So tell us a little bit about the design process that you’re using, and this is what you blogged on and what kind of caught my attention and struck me as a ridiculous idea and what on earth were you thinking about?

Mark: Yeah, well I’ve been working with Lisa Raquelt who is a user experience researcher and kind of strategist. She started very early on in the process. She started blogging about it with the Drupal Association, who represent the Drupal community, who engaged us on the project. They are very happy with this being an open source project. They’re very happy with us to talk about it. Which is completely opposite to the way you normally work with a client.

Paul: Yeah, totally.

Mark: Normally you sign NDAs and it’s very closed doors. You don’t want to tell the competition, its the complete opposite, which is terrifying. Lisa started blogging about it and got really really great feedback from the community, really valuable feedback. Then I then started blogging about some of the design work we were doing. We are redesigning the wordmark and the branding currently. And I thought I may as well just jump in feet first here and see how this goes, which is totally contrary to the way I’ve been working in the past and the way your mind tells you you should work. You just shouldn’t openly talk about design because you’d think that it’s very subjective and everyone is going to have their own opinions, which is true. But we blogged about it a couple of weeks ago and it’s where my blog post on my own site, markboulton.co.uk, came about was I had a lot of people including yourself Paul. Who were saying I was insane, why are you doing this? And it’s this notion of design by community that’s very different to design by committee. Which is what a lot of people was telling me, "You can’t design by committee, it never works." Which is true, it never does.

Paul: So why do you think we are so hesitant as designers to talk openly? Is it fear of the subjective, is it that we don’t like people looking at our designs before they are finished? Why are we so hesitant do you think?

Mark: It’s a really interesting question that. I had an interesting conversation with an architect a couple of weeks ago about the exact same thing. A lot of architects don’t open up. A lot of designers, maybe product designers. An insight into the way somebody works and as designers we all work very differently and sometimes it’s a very private process. To expose that it’s almost like going out shopping with no clothes on. Suddenly you’re exposing the way that you work to everybody, to judge you, and people will judge you. It is a terrifying thought. I think part of it is also schooling. If you’ve done art at school, which most designers have done, most visual designers. You slave away on a piece of art and it’s not finished yet and it’s not finished and you don’t want anyone to look at it until it is finished, so I think there is an element of that as well. When I released two versions of the Drupal wordmark, for feedback they were very much just sketches. They were right in their first iteration. I would normally never do that but I thought let’s see what the community thinks.

Paul: So what happened when you released those two sketches?

Mark: It was carnage. Initially it was quite painful sometimes to listen to some of the comments to be honest. I think anybody takes their own work personally. If someone then attacks some of your own work with necessarily seeing any of the context and that kind of thing, then it can smart a little bit. But I’ve written my own blog for a while now and I’ve got reasonably thick skin, so it wasn’t that bad. What did come out through all of the comments were trends. Trends started to emerge. So from people’s subjective opinion, if enough people were having the same kind of subjective opinion, then that becomes less of an opinion and more of trend. And it was really those trends were looking to identify, that we could feed back into the development of the design.

Paul: It’s interesting there you talked about the fact the people who were seeing this stuff didn’t have the context. Did you not prepare the ground in any way? Did you not tell them why you took the approach you did? Or did you literally just put out the branding there and go, "What do you think?"

Mark: Yeah, there is a reasonably sticky situation with Drupal, particularly with the wordmark. They have a kind of logo at the moment, which is a kind of drop with a face on it. And that logo at the moment is under GPL so it can’t be trademarked which means the Drupal Association can not protect their own property, as it were, because this logo is under GPL. Which means that anybody can take it, change it, completely mess around with it. Which is fine, the community have been doing that for a long time now. So when I took on and blogged about this redesign of the wordmark, there was not the context, the business context, was perhaps lacking because I felt that I could not provide that business context. Because I was the designer and that should really come from someone else, and that was a little late in coming. Which is why the first blog post really didn’t go down too well, because I assumed the audience knew that this project was happening. As it turned out, it actually wasn’t. They didn’t know and it was all a bit of a mess, but it’s kind of smoothed over now, with later iterations and there’s been more blogging done by the Drupal Association. Which has provided the rationale for redesigning the branding.

Paul: Right, so there is a lesson to be learned there I guess of the importance of providing context and why stuff is happening and why you are taking the approach you are I guess.

Mark: Absolutely yeah, I think context is really important, especially for branding and logo design and that kind of thing. Just providing, and I was very aware of this when I blogged it. We all saw what happened with the London 2012 logo, when that is released very early without any context, it’s either misunderstood, or just hated or really liked. I’d rather have that kind of opinion anyway, than somebody kind of going, "Yeah, its alright."

Paul: You prefer to create a strong reaction.

Mark: Yeah, either positive or negative, because those are the reactions you can act upon. Anything in the middle is kind of gray, middle ground. That’s actually very very difficult to take on board and move forward with. So any kind of negative or positive reaction, you can take that on board, which we did. But the context for the Drupal logo is going to be the other stuff around it, which is the branding, the tone of voice, what is said on the page, the design, the other design elements around it, how it interacts with the existing kind of drop because they are still keeping that as a mascot. So it’s how all of that works together was perhaps lacking at this early stage. Which is why perhaps, going back to your initial question, designers don’t actually release very early on because the context isn’t there yet.

Paul: Yeah, which makes a lot of sense. When it came to the feedback, so you were obviously asking for feedback here, were you setting any kind of constraints on that feedback? From time to time I’ve talked on the subject about how to get design signoff and that kind of thing and one of the things that I always say is, "Don’t just say, ‘What do you think?’" but actually kind of try and guide the type of feedback you want and give a context to it, is that something you did?

Mark: Yeah. Not initially, which was why we had to.. The initial blog post didn’t really go down so well from an actionable sort of feedback point of view. Because I felt that a lot of the design questions I wanted answered. I think it was too early and I hold my hands up for that. I think it was too early in the process for me to blog about that. The second post that I put up I asked for specifics on whether or not the word mark needed a capital D or a lower case d and whether or not it needed, we were developing the idea of a secondary icon with it which is a splash and whether or not it needed the splash or not. We got some really great feedback because that focused people’s attention. That provided a really great selection of trends which have fed back into the next iteration. The first post was a bit of a free for all to be honest. Nothing really useful came out of it, which was a shame.

Paul: I mean you kind of, you talked about trends. Do you think that that is kind of, those trends that you see emerging, have the way that you have taken those on board has it been a kind of anecdotal trends or are you talking statistics here? Were you kind of marking down how many people you know said, "Yes, there should be an uppercase D." or whatever or are you just kind of taking on a feeling? Does that make sense?

Mark: Yeah. It was kind of taking on the feeling. More qualitative than quantitative at this point. However, for the cap D or lowercase d we could have just run a poll which in hindsight we should have done, is just had a tick box for each question as it were. However I’m always a little, I actually quite like a lot of the qualitative feedback because people were saying, "Yes cap D and splash," but then they go on to say something else. If we just reigned it into a simple poll then we would have lost all that really great, valuable feedback, because it’s that that provides context for their answer.

Paul: Yeah, I mean you won’t necessarily know why they’re saying a capital D.

Mark: Exactly, and there was enough of people saying the same kind of thing in those comments for it to be a pretty good trend for us to act upon. And it also throws out more heads about them on as it were. There was a lot of valuable comment from the Drupal community especially. And that we would have spent six months trying to research the ins and outs of that community, the history and the culture because there is an awful lot, you know. It’s been going seven years and there’s a lot of people in there. I would have been around ‘til next year trying to fully understand that community if I hadn’t adopted this open way of working.

Paul: It’s quite interesting, isn’t it? I mean when they were coming back and you were seeing a trend emerging very definitely one way or the other over something, were you always going with that decision or were sometimes you saying "Well actually, although everybody’s saying we should go with a capital D or whatever, I’m not going to because of X, Y and Z."

Mark: Yes. I think there does have to be somebody who is willing to make a decision on something that needs to be decided upon. If fifty percent of people said, "I like a black website," and fifty percent of people say, "I like a white website," the compromise is that you end up with a gray website and nobody wants gray. So, what we’ve done especially with the cap D and lowercase d for example there was pretty much an overwhelming response to, "Yes it should be lowercase d," because it’s kind of more attractive aesthetically and all the rest of it. However we’ve chosen to go with uppercase D and that is because of business requirements and also because of the ties in with the documentation. We’ve revised the word mark now where the uppercase D is actually a lot better than the previous version. Perhaps when I posted initially the lowercase d and the uppercase D were not really on an equal footing design-wise. The uppercase D needed a lot of refinement and again perhaps that skewed the results, skewed the comments and so we’ve actually reversed the general trend there and said, "Actually no. We think we should go with the uppercase D for this reason and this reason," and that will continue throughout the whole process. We’ve got to remember, and it’s very important, that the Drupal Association hired us for our expertise and if we feel strongly about something then hopefully we’ll go ahead with that and we’ll push back on any feedback.

Paul: I mean it’s quite interesting. You talk about, "as we go through this process." So it sounds like you’re gonna keep going down this line, that you’re gonna, you know, as you create say, the website interface that you’ll expose that.

Mark: Yeah we are. If you have a look on groups.google.org and do a search for the redesign group in there we have set in a bunch of dates in the calendar for gathering community feedback. So we will be posting up a link on Thursday to the prototype we’re developing and we’ll be doing that for the next six to eight weeks. Every other week we’ll be posting a link up there to gather feedback throughout the weekend. So we’ll be posting it up on Thursday/Friday morning and then we’ll be kind of locking off comments on Monday and then all of those comments will hopefully try and establish some trends and feedback. That’ll then feed back into the next iteration. So we’ve pretty much set a precedent here and we’re gonna be designing in the open ‘til the final curtain call, as it were.

Paul: Excellent! So how do you feel this differs from design by committee? Because from chatting to you when we met up whenever it was I got the distinct impression from you, you saw this as a very different kind of experience, but why, what makes it different?

Mark: Yeah, well I’ve been involved in design by committee quite a few times. I’m sure a lot of designers have and generally in those instances you’re in a boardroom or a meeting and there are several people, maybe twelve tops, and they all have very strong opinions. Generally, as I said in my blog post, there might be an alpha male in there or two sometimes. People can rally around the loudest voice, so all of a sudden that becomes the opinion. It can be a very, very difficult environment to work in because there are so few people, all with a very loud voice. Design by community is a different kettle of fish really because we’re designing for essentially 300,000 clients and the wider web community as well, we’re not just asking the Drupal community for feedback here, we’re also asking the wider web community for feedback. Anybody can get involved in this, it’s not just for the Drupal community. So anybody can. So if you feel like, talking to the listeners here, if anyone feels like weighting in with their comments, please do. Because it’s very important to us that the wider audience is reflected in this redesign and not just designing for the Drupal community. So it’s a very different process I think, because we’re kind of staffing back a little bit. We’re not in a meeting room with twelve people trying to come up with a solution. We’re putting stuff out there. We’re asking for comments from a lot of people who are thankfully providing comments, which is great. Really thoughtful feedback, then we can try and establish trends and then it’s those trends that we act upon. It becomes a little less subjective. That’s the idea anyway.

Paul: It’s the scale that turns it into trends rather than just an opinionated person I guess.

Mark: Yeah, that’s right. And you do have to, like I said initially, sometimes it’s difficult to read a bit of a flaming going on on your blog posts, you know, because there are quite a few people out there who will be very passionate about this project. They’re very passionate about Drupal because they’ve got a lot of time and money, a lot of people their livelihood is dependent upon this platform. So we have to really take that into account that this is serious for a lot of people. We’re not just redesigning a website here, we’re actually providing a platform for a community to do their work. So it’s pretty important stuff.

Paul: So, I mean do you think that this is a kind of a peculiar situation? You know, is the Drupal project unusual or would this be a kind of approach you would encourage for other designers working on other types of projects?

Mark: It’s a really interesting question. I mean I’ve worked waterfall methodologies in the past so you get your, you do your research, you do your initial designs, they get signed off and then you build your website, it’s very linear. And after working at the BBC for so long I realized that, because we worked very iteratively at the BBC that actually a more iterative approach was actually more valuable so to take that client-side approach, and the agile software development approach, to take that commercially with design is actually very difficult. But with the clients we are currently working with, that’s the way that we work. So we don’t work in a waterfall methodology, we work very iteratively upon fixed time scales. So we have a week per iteration for example. Now the feedback thing, the only difference really between Drupal and any other big project is the fact it’s open source and has a very, very big active community who are used to working in this way. I think that’s the critical thing is that they’re used to people putting software updates out early, feedback and they get changed and honed down until the final version is released but it’s just the way that they’re working so we have to kind of slot into that culture and it’s not a culture that design thrives in actually.

Paul: No, I can imagine.

Mark: No it’s a very difficult environment for design because, and it goes back again to one of your initial questions about wanting to sit there and craft a solution until it’s finished. Well that goes counter to the way that this open source culture works. They want to see stuff early. They want to feed back. They want their say. So as long as you kind of understand that and they’re not being grouchy or attacking you in any way they just want the very best for the project. So yeah, it’s worthwhile considering it as a working approach. Certainly the iterative approach is worthwhile considering for any project but the getting feedback early, if your audience is big enough then give it a go and see how it works. You know if you speak to me in six weeks time I may have a completely different conversation. This is really very much a work in progress and we’re just seeing how it’s going. It’s not been done as openly in the public before. I can’t really remember any projects from a design perspective that have been like this. It’s fairly unique. Which is really great, it’s exciting. So we’ll just see. We’ll see what happens.

Paul: Yeah, very interesting stuff Mark. Thank you very much for coming on the show.

Mark: Thank you for having me. It’s been a pleasure.

Paul: And we will wait with baited breath to see future blog posts as to how the experience goes to the bitter end.

Mark: Please do because I’ll be blogging about it pretty much constantly throughout the life of the project.

Paul: We’ll keep an eye on that. Thank you very much for your time and we’ll get you back on soon enough.

Mark: Great! Thanks Paul!

Paul: Bye bye.

Mark: Cheers. Bye.

Thanks goes to Todd Dietrich and Andy Kinsey for transcribing this interview.

Back to top

Listeners feedback:

Keeping Positive

Got this question from Bill (remember him?!)….

I have just found out that the potential new project I have put loads of work in to winning is not coming my way. I wrote an extensive proposal, did some unpaid mock-up work, attended a presentation and jumped through every hoop thrown my way.

I was told by the client that it was ‘very close’ but on this occasion I had not been successful. Gutted.

How do you guys at Headscape cope with these types of rejections?

To be honest, and this is from a lot of bitter experience, it’s hard and some are harder to take than others.

I do, however, have a few thoughts and pointers that may help. Firstly, you can help yourself by weeding out the enquiries that you will never win.

Are these people worth your time?

Check out the email address of the enquirer. If it’s gmail, hotmail, yahoo or similar then chances are your potential client is just looking for free consultancy from you. I.e. they have an idea and have no idea what’s entailed in making that idea happen. And they certainly will not pay you to research it.

Secondly, and I am only aware of this possibility in the UK, but you can check up on a company through the Companies House website. This tells you all sorts of useful information about how long they’ve been around, their liquidity etc. You may change your mind about responding to a tender sent from a dissolved company.

Talk money

There is nothing more frustrating than being told that you are ‘way out of the ballpark’ after putting hours, even days, of effort into a proposal.

Ask people, up front, what their budget is. Explain that you need to know it to respond with the most appropriate solution for them. An example I often use is usability testing. Everyone knows that testing, preferably many times throughout a project can only be a good thing. But that said, not doing any testing doesn’t automatically mean that your client will get an unusable turkey for a site.

If you don’t get anywhere by asking then create a 2 or 3 paragraph solution with associated tasks (a mini proposal I guess) and email that to the potential client with an associated ballpark price. If they still want you to deliver a ‘full’ proposal then, chances are, your ballpark is within their range.

Ask/listen

Ok, so assuming you think that responding to the proposal is a good use of your time, you now need to read their brief in detail noting questions you have along the way. You will make a number of assumptions about what is the correct solution for this client while you are reading.

You need to talk to the client to confirm their answers to your questions but you also need to listen to their responses to ensure that your assumptions are correct. It’s very easy to arrogantly assume that ‘you know best’ because you’ve been doing it for years.

This also applies to your written proposal. Don’t describe and price up what you think the client needs – go through every point in their brief and respond to it accordingly. If it is plain obvious that something they’re asking for makes no sense at all, then tackle it head on and explain why they shouldn’t be doing it.

Stick to your guns

We decided, quite a while back, and for very good reason, that we would not do any unpaid mock-up design work. In some cases this has been seen as a positive thing (once it has been explained) but with other potential projects I’m sure it has adversely affected our chances of winning the work. However, we should stick to what we believe is right. Chopping and changing presents a negative image to both potential clients and our staff.

If you do decide to present initial mock-up ideas don’t be tempted into iterating them further. Any client who asks for is again asking for free work and is most definitely to be avoided.

Be gracious

Sometimes you just have to accept that you’re not the right fit with certain companies – even if the initial phone call or meeting went really well. It may well be that someone else delivers just the thing that really swings it for the client – sometime you just don’t know what that is.

If you do lose then you need to accept that you win some, you lose some. It often happens that these things happen in streaks which can be very frustrating. We found ourselves turning away superb opportunities earlier this year simply because we were too busy.

But always try to bring a positive attitude to any rejection because it is possible that these people will contact you again for further work (though beware that you are simply making up numbers!) or they may recommend you to others. They won’t do either if you react badly to the rejection!

Back to top

141. Feedback

Posted in Classic shows on by Paul Boag

In this week’s show, Paul Annett joins us to discuss how he pushes the boundaries of CSS and we look at how to improve your website through user feedback.

Download this show.

Launch our podcast player

News and events

Working from home

I suspect the vast majority of people listening to this podcast spend at least some of their time working from home. In today’s world, doing the type of work we do, there is no reason not to.

However, home working is not the utopia some believe. It has its own challenges and problems. For me it is a constant sense of guilt that I am not pulling my weight in the business. For others it is a lack of motivation or fighting the distraction of housework and family.

With some many of us struggling with the relatively new environment of home working it is great to see people sharing their experiences in a new A List Apart article (Working from home: Readers respond).

This article has some great advice and although it contradicts itself in parts (different people deal with home working in different ways) it is full of ideas that I either already implement or will be soon.

While I am talking about A List Apart I want to quickly mention "Progressive Enhancement with CSS". This is a follow up article to "Understanding Progressive Enhancement" an article we mentioned in an earlier show. It is a great article that explains one possible technique for ensuring your CSS squeezes the best out of as many browsers as possible. If you have a chance, give it a read.

Everything you know about CSS is wrong

Talking about CSS, yet another book on the subject has been released this week. However, this one is different. Written by Rachel Andrews and Kevin Yank, "Everything You Know About CSS Is Wrong" is aimed at web designers who already know CSS well. The emphasis is on emerging techniques and future CSS support.

I haven’t read this book yet (although I do have it on order), but it looks very exciting. It has been a while since I have got to experiment with CSS and so this will hopefully point me in the right direction.

It tackles subjects like Internet Explorer 8, CSS tables and CSS3. These are all topical subjects and so the book appears to have a lot of potential.

I will review the book once I have read it and we intend to get Kevin on the show to talk about some of the techniques.

Reduce your business costs with free stuff

With the economy in tatters and a general sense of impending doom, we are beginning to see posts on how to cut cost and tighten belts. One such article is "Reduce Your Business Costs With Free Stuff" on the Think Vitamin website.

The article is a mixture of ideas on how to save money in your business. Some will save you thousands and apply only to larger companies, while others save only a few pounds a month. However whatever type of business you run, from a humble part time freelancer to a multi-national design agency, there is something in here for you.

Ideas include:

  • Cutting costs on your phone system without reverting to VoIP
  • Subletting office space
  • Open source versions of basecamp, Microsoft office, campfire and much more
  • Moving email and hosting in house

Although I think some of the suggestions are somewhat short term (Managing email internally would quickly become an expensive headache) I generally agree with most of what is suggested.

If you are beginning to feel the squeeze then this one is worth the read.

HTML Email: What mail clients are people using?

Finally this week there has been an interesting evolution in our understanding of HTML email clients. This has been nicely summarised by Alex Walker on the Sitepoint blog. He writes:

There are lots of reasons for hating HTML Email, but perhaps no#1 on most people’s hit list is having to produce HTML Email to deliver to potentially hundreds of different mail clients and configurations.

Now, clearly it’s completely impractical to test your work on hundreds of mail rigs, but the question is, where do you draw the line? Generic browser usage statistics are reasonably common, but mail clients stats?

In the past you could confidently make up whatever numbers you liked on those question without fear of being caught out. But that may be changing.

Litmus, who produce an excellent web-based browser and email testing suite are now publishing email client usage statistics from their new Fingerprint email analysis system. It makes very interesting reading.

Alex goes on to summarise the key findings which include:

  • 60% of people use web based clients
  • Just over 80% of the HTML email market is dominated by Outlook, Hotmail and Yahoo!
  • Business still generally stick with Outlook although they seem reluctant to upgrade to 2007

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

Paul Boag: Joining me today is Paul Annett from clear:left, good to have you on the show Paul.

Paul Annett: Thank you very much. Nice of you to have me here.

Paul Boag: So Paul is, with a few others from his company, the people who really make clear:left happen, rather than Andy and Jeremy and Rich, which we know, well Richard does work, but Andy and Jeremy certainly don’t do anything do they?

Paul Annett: Well, you know, they fly around the world a bit you know?

Paul Boag: Yeah that counts. I guess..

Paul Annett: No, we all chip in, obviously. Everyone does their fair share, so we say.

Paul Boag: Very diplomatic of you. I feel like I can insult them over this as I do the equivalent of no work in my role as well.

Paul Annett: I was going to say… Well there’s eight of us at clear:left, yeah we all just chip in. We’re all caught making the tea, that sort of stuff.

Paul Boag: Cool. Well tell us about your role. What is it you do at clear:left?

Paul Annett: Well, I’m a user experience designer. So that means, well it’s more than just making a web site look pretty, which were are accused of sometimes in the trade; to make sure that the sites are easy to use, as well as a pleasure to use really. That’s something that’s often overlooked with some web site design companies, obviously none of your audience.

Paul Boag: Obviously not.

Paul Annett: It’s a vital ingredient in the mix really. My job does overlap with some of the other guys in the office. Basically, we all know each other’s jobs fairly well so we chip in and share some responsibilities. My main focus is UX design. We’ve also got the others guys doing information architecture, they tend to start the project off with handing over wire frames or prototypes to me. Then once I’ve finished my bit I then hand over the designs to our front end developers who then code up the HTML and CSS. As I say we do overlap a bit more than that but that’s basically how it works.

Paul Boag: I’m quite interested in how that works. You are saying you don’t do too much HTML and CSS, or how does it work.

Paul Annett: I don’t do a lot right now, I used to when I was freelance before joining clear:left. I used to do pretty much everything on a project. I don’t do a lot now; I don’t really have time to. The occasions when I do get time to are when we are working on our own projects. I especially seem to have had a bunch of project holding pages or client holding pages in the past where Natalie and Jeremy who do the front end are busy doing other projects and we need to just get something up there while the design is being made. So I will code up that kind of thing. I don’t really get to work on a lot of the big life projects, but then I’m no where near as proficient as Natalie and Jeremy are at those kind of things. I think they would have a fit if they considered my code going live.

Paul Boag: See that’s quite interesting, isn’t it? You’ve begun to build a bit of a reputation as somebody that does-I don’t know-CSS embellishments for want of a better word on some of your designs. You know the kind of thing that other web designers go oh. The most kind of well known example would be the Silverback holding page where you have the clever resizing background How did that come about? Where did that idea come from?

Paul Annett: It comes from… it’s fortune, really, that I happened to be building that page because it was one of the holding pages. I always look for something unusual to do, or something that’s going to catch someone’s eye, that kind of thing. That particular technique was quite appropriate because the site has quite a niche audience, in terms of web designers. People who wouldn’t necessarily pick up on the subtleties and things that I like that are in there, they’re like hidden gems, wouldn’t care. Web designers seem to catch on to that, it’s something they haven’t seen before. The particular technique itself was just a happy accident, really, because I virtually designed the site, it’s a very simple little holding page with the gorilla icon, designed by Arch Nemesis podcaster, John Hicks.

Paul Boag: Well he designed our logo as well so he can’t be that arch nemesis

Paul Annett: That was fantastic drawing on it’s own. But then when I put the vines there, I was just thinking finally give it some kind of depth. I was fiddling around with some of the CSS, and because I don’t know, this is a benefit, because I don’t know CSS like the back of my hand. I do sort of dip in and out. I might make mistakes. Those mistakes might accidentally do something that makes me go oh hang on maybe I can actually use that for something, which is what happened in this case. I happened to position the only layer of vines that I had a percentage off the screen. It moved in relation to the grid. That got me thinking, well maybe I can do this with multiple layers of vines. I didn’t think much of it at the time, but I happened to mention that I had launched the holding page on twitter and a few people.

Paul Boag: All hell broke loose.

Paul Annett: Yeah the few people that follow me thought oh that’s nice and they twittered it, and other people twittered it. Before we knew it, a day later, we had 25,000 views on the web site and we were thinking wow we’ve hit something here. 50% of those people signed up for more information about our product, which it didn’t even exist yet, and the web site didn’t even say what it’s about. So they were just intrigued to find out more based on the what they had seen.

Paul Boag: So that caught you very much by surprise then?

Paul Annett: Oh yeah We were kind of overwhelmed. If it had been, in an anyway, some kind of planned INAUDIBLE machine, then we would have waited until we had actually started building the app probably. We had over 10,000 people signed up for something we were thinking we’ve really got to pull something out of the bag here. Hopefully we did.

Paul Boag: Well you do have very good feedback on it. That really demonstrates well the power of design, that even something that, let’s be honest, is maybe, gimmicky is not the right word but you know, isn’t fundamental to the functionality of the site, yet had a huge marketing impact. So it was very worthwhile.

Paul Annett: Exactly. These things, they are gimmicky. They’re things that people come back to and play with and just want to fiddle around and look at it again. They don’t mean anything. The idea is that they entertain me and maybe some other web designers. It just happened that it entertained 25,000 web designers.

Paul Boag: Is this something that you do regularly? Do you sneak things like this in a lot?

Paul Annett: It is something that I like to do, as I said, to entertainment myself. But I do now look for places where I can sneak these things in. I think I’ve always done it really. I always strive to do something unusual. Back in the days of my freelance site, which is nice-design.co.uk, which is still there but not updated since IE8 so if you are using IE8 it will break. Even then, that was one of the first sites where the header and the sidebar were fixed and it was only the content that scrolled. It’s an unusual thing to see, other than the framesets, obviously, back in the day. I always try to sneak these things in. And when I’ve been working here at clear:left, last year’s de-construct site where we snuck in an Easter egg. There’s a style switch on it, I don’t know if you saw it, but when the site launched it was like a wire frame and along the top there a time line which said the progress of the site as it was being built. It was played as if it was being built live as the event got nearer. The time line at the top was actually a style sheet switcher and we deliberately hid the mouse cursor and made it not look like a bunch of links so that if people found it by chance then they would be pleasantly delighted at the surprise of these extra designs on the site that they’d found. Actually we had a few people email us and say terrible usability, they don’t look like links and the mouse cursor doesn’t look like a hand when you move over them. They kind of missed the point, it wasn’t supposed to look like a link, it was supposed to be a hidden little gem for people to find. That got good feedback as well.

Paul Boag: It’s that creating a sense of satisfaction from a user that they found something special or you know, it’s that little bit of wow factor.

Paul Annett: Yeah. When people are then able to say their friends oh go on look at this, then they feel like part of an exclusive little club of people that are in the know. Definitely.

Paul Boag: You talked a lot of the Silverback example of how basically that came about because you were fiddling with CSS and then something didn’t behave as you expected it to and you saw some potential in there. So that was very much a technology driven way of coming to it. Is it always like that or are sometimes these things planned in from the start. I guess in others words, do you have the ideas and implement them or how does it happen?

Paul Annett: It really varies. Sometimes it’s design driven, like with the de-construct site last year, that was design driven and we wanted to have something which resembled the process that building a web site out there. The silverback one was kind of technology driven but also slightly design driven because I wanted to give it that depth. To take that one step further, I’ve used the same technique on the UX London site. UX London is another conference were running next year in June, uxlondon.com. The technique that I used on silverback is reimplemented there. There’s no three dimensional movement or anything like that, but as you resize the window, the logo changes color. That’s just done by having a transparent window through the logo in the shape of the U and the X, so as you resize the window, the background color behind the whole page slides sideways and changes the color of the logo. This kind of this could be done with Flash, it could be done with Java Script, but I don’t know Flash, and I don’t know Java Script, so it is me trying to find my own little work around and quirky way of doing things really.

Paul Boag: I guess the thing that you know when you start thinking about these things is browser support. Some of these things you are doing are kind of either very advanced CSS or very hackerish CSS so either way you come up with browser support issues. Do you worry about that or is it just that they’re extras and it doesn’t really matter.

Paul Annett: Well fortunately because the audience for the sites that we’ve done in this sort of extreme way are web designers so you know they are going to be using the latest browsers. They’re going to be using firefox and they’re not going to be using IE6. We wouldn’t go to that sort of an extreme on a client web site and everything that we do, everything that leaves our doors is valid CSS, valid HTML. It wouldn’t be allowed not to be if you know what I mean. We’re very standards aware as a company, but I do like to kind of push the boundaries on things a little bit and see what I can get away with. Not in anyway inaccessible, but just not very conventional and if it doesn’t work in IE6 and doesn’t work in other browsers then as long as we implement something that looks the same but without the effects then that’s fine. The silverback site, if you look at it in IE6 is just a gorilla in front of some vines, no movement, nothing lost. Nobody coming to that site will be like there’s something missing here, but they just won’t get that extra little embellishment.

Paul Boag: It’s that graceful degradation.

Paul Annett: Progressive enhancement really. Most people that do have the technology get the extra stuff. This isn’t a company policy, but personally I’m usually in the favor of, I’ve seen quite a couple of sites recently that had a browser upgrade nag bar where if you’ve got IE6 then it says hey just upgrade your damn browser, you’re missing out on stuff. We’d never do that, we wouldn’t put that on a client site here, but I might put that on my own site. I haven’t, but I might.

Paul Boag: Sounds like a good idea to me. What’s the kind of process you go through in getting these extras added in? Are they kind of planned in from day one. When you, say for example, did the UX London web site, did you have it in your head right from the beginning that you wanted to do this with the logo, or something occurred to you further down the design process? When did it happen, is it in the design stage, the build stage?

Paul Annett: With that particular one, that was something that I tried out on a previous site. It didn’t really work 100% and we thought we’ll do something else with the site. But I had it in the back of my mind that I wanted to do it from the start on that project. But in general, again it varies really. If, sorry to be so vague and unspecific.

Paul Boag: No no, that’s the nature of design isn’t it?

Paul Annett: One thing I do advocate is that with all our client’s stuff, as well as our own stuff, I always present mock ups in a browser. I never send out a JPEG of mock ups to clients because for start, they are going to view it at the wrong size, they are going to look at it in preview or some kind of windows equivalent, image viewer, and it’s going to be resized to fit their screen, so they’re not going to see it in the context of the web site anyway. Not only that, but it also gives you the opportunity to actually build part of the site so you might have the header as a flat JPEG and the footer as a flat JPEG and the left hand side as a flat JPEG but the right hand side, where you want some kind of interactivity, you could spend a little bit of time building that so that it kind of explains to the client that this is what I want to happen here, roughly. Obviously it wouldn’t be the final thing because you don’t want to invest that much time up front, to give them that little bit of insight. That’s what I do when I am building holding pages or whenever I do get the opportunity to do something like that in house here is that I’ll code up some bits I think is the unique, gimmicky bit of it, and all the rest will just be a flat JPEG. It’s just to sell the idea internally, if you like, and to have everyone gather around my Mac here and ridicule me and laugh at you.

Paul Boag: It makes sense that more and more web design that we are doing these days has got so many interactive elements with use of Java Script and various other things, that a static JPEG doesn’t always cut it anymore does it?

Paul Annett: No, exactly. Another thing we do to combat that here at clear:left is that we often build prototypes of a site, instead of having like a paper wire frame which we often do as well but if there are interactions that need to be explained to the client we’ll build a flat wire frame of it in HTML just using framework and Java Script libraries and simulate the AJAX side of things just with hard coded Java Scripts. It’s also not production quality code, but the prototype wire frame and the flat JPEG combined will give the client a better idea of exactly how the finished site will be.

Paul Boag: Sounds good. We’ve talked a couple of time about is this gimmicky, is this not you know… I’m quite interested as where you feel the line is drawn between good design here and tipping into that naff gimmick area. Do you know what I mean?

Paul Annett: Yeah. There are a couple of things that haven’t seen the lights of day yet, which maybe they will one day. I guess it depends on how much time it’s going to take and how much value it gives us at the end of the day. Using a similar kind of thing with positioning elements we’ve got these great big letters in the clear:left office and we regularly rearrange the letters that spell clear:left to spell different words on the shelf at the office. To simulate this online I’ve built a little page which has got the word clear:left across the page when it’s at full screen at 1024 pixels wide and as you resize the window all the letters swap places because they’re all positioned at different places at different percentages off the screen, blank bits of image and all this complicated CSS positioning going on. When you reach 800 pixels wide it says elf:cartel. So it doesn’t have any fundamental reason or… it doesn’t do anything, it’s pointless, so it’s not going to be anywhere probably. But that is too, possibly gimmicky. There are some ideas which are not necessarily web based which are gimmicky but do work like when we were planning this year’s de-construct and INAUDIBLE wants to get some silverback promotion in there. I talked to him why don’t we just have a gorilla one day running around dishing out silverback branded bananas. Everyone laughed and thought it would be stupid, and then we did it. And then it was really successful and everyone loved it. Yeah, it was a bit of a gimmick but again it kind of fitted with the brand so it worked.

Paul Boag: It’s a fine line isn’t it, you walk in things like that? Because you know you could have been absolutely ridiculed for something like that. How do you know what is going to go down well and what’s not? I guess you don’t.

Paul Annett: Yeah, luck. I was ridiculed for that here in the office but we went with it and it seemed to work. It was great fun.

Paul Boag: I’ve seen pictures. It looked entertaining if nothing else. Going back to the online stuff, even if you develop something like that, it never sees the light of day, you never know that technique may come in use in a future web site that you develop and it might be appropriate.

Paul Annett: Yeah there’s always like a library of that stuff that we’ve kind of half developed and ideas that we’ve got, notes, that kind of thing. It might well see the light of day in the future

Paul Boag: Let finish off with just a kind of general advice that you like to give designers out there that they look at some of the cool little things that you do and they think I’d really like to do that but I don’t want to just go out and copy him because there’s nothing imaginative in that. I want to kind of get into that mentality of looking for opportunities to do this kind of thing. What advice can you give them? How can you start them off?

Paul Annett: There’s loads of stuff that’s come out as a result of the silverback hype, if you like. There was an article that I did on ThinkVitamincom which kind of explains how to achieve that technique. People have taken that and done all sorts of other things with it. I’ve seen someone creating moving 3d images and that style of a zoetrope(?) toy thing, which uses the same kind of principles but applied in a different way. So by all means, the best advice in all cases of web design is to look at the code, see how someone else has done something and see how you can adapt that to your own stuff. One thing that I really rely a lot on is, especially in these hidden Easter eggie things, is alpha transparency and thinking of how you can create a window through the front layer of a web site so you could have, instead of having a white background on the web site, put a white foreground layer with a window through it, shaped in the shape of whatever, and see how you can make that interact with the background layer so as you perhaps scroll down the page something becomes visible through this previously invisible transparent window. There’s a site called webleeddesign which does this brilliantly. That’s my ultimate, I would have loved to have made something like that, it’s really good. Only that one page, but it’s really nice with that alpha transparency in the front there. Think about what you can do with resizing the text on a browser so-we redesigning the clear:left site at the moment, hopefully it will be online soon-now I’m giving up an Easter egg that’s coming up on it.

Paul Boag: No one listens to this podcast so it’s fine.

Paul Annett: There are certain things hidden on certain pages and if you bump the text size up a couple of points then those things would become visible because of course you can control the position of things based on ems. As you resize things, your font size gets bigger, it perhaps moves in relation to the other things and things begin to peak out from behind something that was previously in front of it. I play around with that kind of thing a lot. That’s the advice I’d give you in terms of this particular way of doing things.

Paul Boag: That’s some great advice there, there’s lots of possibility. I like what your saying that it only takes a small number of techniques, you talked about transparency there, you talked about the background stuff, and you talked about the font resizing, but the possibilities of just those three things are endless really. You could do all kinds of things with them.

Paul Annett: Exactly, combine them in different ways. Again someone take this and do something with it, but imagine a line going diagonally across the screen but in font of that you’ve got a completely white page and across that white page is a very narrow slot of transparency, so if your line starts at the top right hand corner all you see is a dot in the top right hand corner but as soon as you start scrolling down the screen, that dot moves to the left because it’s visible through that hole. That’s a very basic example of how you could use windows of alpha transparency interacting with the background to do something which moves horizontally as you scroll vertically. I haven’t done anything with that yet as I haven’t thought of anything good to do with it but maybe someone can.

Paul Boag: That’s absolutely brilliant Paul, there’s some really good advice in there and thank you for taking the time to come on the show. I hope we can get you back on before too long.

Paul Annett: Thanks. Thanks very much for having me.

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

Users can be invaluable when deciding how to move a website forward. We should always listen to what they say. However, sometimes that is easier said than done. Read more here.

Back to top

Improving your site with user feedback

Posted in Site content on by Paul Boag

Users can be invaluable when deciding how to move a website forward. We should always listen to what they say. However, sometimes that is easier said than done.

Whether you are a website owner or a web designer, listen to your users. Whether you are running a web application like GetSignOff or developing content driven websites, listen to your users.

We all know that user feedback can be invaluable for improving our sites. However, knowing something and putting it into practice are different things.

There are two problems with listening to users:

  • How to listen to them in the first place
  • How to decide what is valuable feedback and what is not

We will never pay more than lip service to the idea of users shaping our sites unless we overcome these obstacles.

Collecting user feedback

Everybody thinks they know their audience. However, in reality they probably do not. When was the last time you actually asked a user his opinion? You may think you know what they want but you can’t be sure unless you ask.

Fortunately there are a number of ways to collect feedback from users:

Face to face

From focus groups to usability sessions, meeting users in the flesh provides unparalleled feedback. Meeting users allow a level of interaction unavailable through other methods because they allow two way real-time interaction.

This creates a better empathy and connection with users. You can get inside their heads by watching their mannerisms, listening to their tone of voice and even observing the way they dress. All of these subtle elements help construct a picture of the type of person they are.

Admittedly face to face meetings can be difficult to arrange. However I would encourage you to settle for nothing less. You may not do it extensively, but make sure you do it at least once.

Web stats and search queries

In my post ‘use web stats for more‘ I explored what could be learnt from analysing web logs and search queries. I explained that web stats could be used to find and resolve problems with usability, accessibility and content. I also looked at how monitoring search queries reveal what users really want from your site and the mental model they use to find your content.

In short, web stats are an invaluable source for identifying trends in behaviour and expectations.

Questionnaires and surveys

Probably the most traditional and most favoured form of collecting user feedback is the ‘survey/questionairre’. One reason they are favoured is because they identify broad trends in much the same way as web stats.

Personally I am not a fan of this approach, especially when used in isolation. Tracking broad trends through statistical analysis does not encourage empathy with users. As is pointed out in the book Subject to change, empathy is an important aspect of successful web development. Without empathy you will not truly understand your users.

Also, in my experience there is a difference between what users say and what they actually want. Users often request features and functionality when in reality they value a simple user experience. Without a two way discussion with users it is hard to identify the underlying needs.

Finally, unless users feel strongly about a site they are unlikely to complete a survey. This polarises results suggesting extreme opinion where it does not exist.

I am not suggesting surveys are useless. The problem is how they are acted upon. Many treat survey results as absolute. In fact it is necessary to ignore some results and read between the lines of others.

Third party web applications

The final way of collecting user feedback is through a new generation of community tools. Sites like Get Satisfaction and User Voice allow two way interaction with users. Users can submit suggestions, questions and complaints online and you can respond in kind. This happens in an open forum allowing anybody to participate in the discussion.

This open format (when compared to the predefined questions of a survey) encourages a more personal discussion and provides opportunity for a deeper level of discussion.

As with surveys the people responding are likely to be more polarised in opinion. However, because of the interactive nature of these services it is possible to dig a little deeper and understand the underlying issues.

Personally, I have found these services an invaluable way of building a closer relationship with users and better understanding what they are looking for.

Of course, whatever method you use to collect feedback it must be assessed. You need to determine what must be acted upon and what can be safely ignored.

Assessing user feedback

Once you have engaged your users, you will be amazed at the quality and quantity of suggestions. The problem becomes deciding what to implement.

I have had this problem for some time with both Boagworld and more recently GetSignOff. I have established 4 criteria I use to judge whether I act on a suggestion or not. These are:

  • Level of feedback – How many people are making the suggestion? If it is a substantial number then you should seriously consider implementing the idea. However if it is just a vocal minority then you may wish to think twice.
  • Source of feedback – Who is making the suggestion? Are those people your core audience? It is easy to find yourself implementing functionality for a group of users who provide no value to your business or site.
  • Cost of implementation – Consider return on investment when deciding on whether to implement a suggestion or not. If it is time consuming to build and expensive to implement, then the benefit to your users and your business must be high.
  • Impact – Finally, consider the broader impact of adding new functionality or content. Will it introduce complexity into your site? Will it break another part of the site? Will it distract users from your call to action or undermine business objectives? Often implementing a suggestion can have surprising consequences.

There is no doubt that listening to users can be an invaluable way of improving your site. However, ask yourself how you intend to gather their feedback and respond to the results.

GetSignOff goes public

Posted in News on by Paul Boag

Today GetSignOff finally opens to the public. It has been an interesting journey.

Part of my reason for writing this post is obviously to pimp GetSignOff and to encourage you all to check it out. However, I also want to take a moment and reflect on the lessons learnt so far. This is Headscape’s first application and we have got some things right and some wrong. I wanted to share all that I have learnt.

However, let me begin with the blatant advertising…

What is GetSignOff?

GetSignOff is an application aimed at web designers. It allows you to present designs, manage feedback and handle multiple iterations of a design concept. However, most of all it is designed to help you get sign off from clients.

It has loads of cool features…

  • Can be used to approve mood boards, interface elements, imagery, personas, storyboards, site design concepts or any other element of the web design process
  • Fully customisable CSS and visual appearance
  • Use your own customised domain name
  • Up to 30GB of storage
  • Manage unlimited numbers of clients, projects and designs
  • Create and manage multiple versions of each design
  • Add notes directly on your designs
  • Check to see if a client has viewed a design
  • Receive notifications via email and RSS
  • Each client can support multiple logins
  • Restrict client logins to specific projects
  • Easy to use interface (ideal for clients!)
  • Clear sign off procedure to ensure everybody knows when a design is approved

Okay, I have pimped it enough now. Signup for a free account and try it yourself.

What we have learnt?

Building a web application is nothing like building sites for clients. It has been a real eye opening experience and we have learnt a lot on the journey. At the minute my head is spinning but I wanted to share a few random thoughts. Apologises for their rough and ready nature…

  • Beta users rock! – The best thing we did was release a beta. Getting feedback from real users blew away our carefully laid plans and ‘all knowing’ attitude. Our beta users came up with some awesome ideas, and found horrendous bugs. However, even when they criticised the application they were amazingly encouraging. I can never thank them enough and would encourage anybody building an application to take a similar approach.
  • Cherish your users – I know saying ‘customer service is important’ has become a cliché but that is because it is true! People are so grateful when you answer their enquiries quickly and efficiently. You can defuse an angry customer by simply being helpful and attentive. It is not difficult.
  • Keep it simple – The temptation to add more and more features is overwhelming. People come up with great ideas and you have the overwhelming desire to use them. However, resist this temptation. I am so glad that I have read both Subject to Change and The Laws of Simplicity while developing this app. Both have encouraged me to keep things simple.
  • Don’t rush into features – There is also a desire to implement great ideas quickly. Somebody suggests something so good that you just have to add it. The trouble is this can lead to all kinds of complications. I have learnt it is better to consider an idea for a couple of weeks before implementing.
  • Pricing is a bitch – I hated this part. We looked at the competition, considered the value to the client and still couldn’t settle on a price. Unfortunately, it was hard to rely on feedback from beta users in this area. After all, they wanted it to be as cheap as possible. In the end it was Ryan Carson who helped the most. He warned against under pricing and rightly so. I think we all have a tendency to devalue our own work.
  • You only get one chance – This is currently terrifying me. You get one chance to make a first impression. I know the current wisdom is to release early, but if you release crap then users will never come back. Hopefully we have struck the right balance between quality and getting to market quickly.
  • Treat it like client work – This project stagnated for ages. It was something we wanted to make happen, but slipped because of paid client work. The way we kick started the project was by pricing and running it as a piece of client work. Only then did it get the priority it deserved.
  • Don’t fear competition – The first time we heard about a competing product we were gutted. By the third and forth we were in danger of slipping into despair. However, actually there was no need. Competition is good. It spurred us on and we even learnt from mistakes our competitors made. However, most importantly of all it made us focus. Until then we were trying to build an application that met the needs of anybody wanting design sign off. After we became aware of the competition we focused our app on meeting the needs of web designers. We decided to go niche and it was the best thing we could have done. While our competitors struggle to meet disparate needs, we focus on the requirements of a single target audience.

In reality we are just at the beginning of our journey. We have so much more we want to do with GetSignOff. However, there is no doubt that today is a significant milestone.

All I would ask of you is that you give the product a chance. If after signing up for a free account you like it, tell your friends and blog about it.

139. Brand

Posted in Classic shows on by Paul Boag

On this week’s show we’re joined by Ryan Carson to discuss building an online brand. We look at promoting your site with minimal budget and Marcus shares his views on working in an office.

Play

Podcast: Download (33.1MB)

Download this show.

Launch our podcast player

News and events

Understanding progressive enhancement

Its funny how we spend our whole lives telling clients to avoid jargon and yet web design has more jargon than most. Every few months we seem to make up some new term that is thrown around like everybody knows it.

In reality some we have never heard certain terms, while others seems so similar to one another that the difference escapes us. Take for example ‘graceful degradation’ and ‘progressive enhancement’. Have you heard of them? Could you tell me the difference?

I have to be honest, I couldn’t. In fact in a few weeks you will hear an interview I recorded with Paul Annett from clear:left where I make a comment about graceful degradation and he said ‘no its more like progressive enhancement’. I had no clue why one was right and the other was wrong and I am supposedly a web design expert. Does that make me thick? Possibly. However, more likely I just missed the memo on that one.

The trouble is we are all too busy looking intelligent to clearly communicate with one another.

I have to some extent criticised A List Apart (among others) in the past for perpetuating this kind of ‘in the know mentality’. However, I am now being forced to eat my words (gratefully so) as they published an excellent article on Progressive Enhancement and why you should care about it.

Now if only somebody could explain what Web 2.0. really is.

A free conference (kind of)

I realise that some of the advice I give on this show is unrealistic for some. For example, I talk about the importance of attending conferences. However, when a conference can cost hundreds of pounds it is not always possible.

One alternative is to listen to the podcasts that most conferences published. Unfortunately, they are slow to appear and are hard to follow without being able to see the slides.

Fortunately, the FOWA in London has significantly raised the bar and other conferences will be forced to follow suit.

FOWA has released video of most talks. These appeared within hours of the speaker taking the stage, and are beautifully done including both speaker and screen.

There are also ‘highlights reels’ for most talks. These are a cut down version of the presentation, ideal if you are too busy to watch the whole thing.

With some of the most influential people in web design taking the stage, this is an invaluable resource and Carsonified should be congratulated for making it freely available.

Design Float

Talking of useful resources check out Design Float. Design Float is basically a Digg clone. However it is a clone aimed at designers.

I have to say I don’t like sites that rip off Digg. I have huge respect for what people like Daniel Burka and Joe Stump are doing at Digg. I hate to see people directly ripping off their work (normally badly).

However, Digg does have one flaw. It doesn’t serve the niche very well. Even Kevin Rose recently said: "We don’t really do a good job of servicing the long tail of content." And he is right.

As a web designer, categories such as technology or design are just too broad for me to bother following Digg regularly. Until this problem is resolved, Design Float is an alternative.

Design Float allows me to only see stories relating to web design and although the smaller community means that stories are posted less regularly, what is posted is pretty good.

I recommend checking it out. However, if you are a designer don’t just limit yourself to web design posts. Also look at the other design posts. There is some pretty inspiring stuff there.

Can we stop supporting text scaling?

Finally today, a post by Dave Shea in which he discusses page zooming.

Most modern browsers now support page zooming. The only exception is Safari and that will soon change. This allows users to zoom an entire page, not just the text. Obviously this is beneficial to those with visual impairments. However, is also exciting for web site owners and designers.

Traditionally websites have been forced to support text resizing. This significantly increased development time as well as making design integrity challenging. As text scales, designs often breakdown especially when fixed sized images are involved.

With page zooming these problems go away. It provides the designer with more control and reduces the costs of development. A cost normally passed on to the website owner.

Dave asks whether it is time to support page zoom rather than text resizing. As can be seem from the comments, there is no wrong or right answer. Nevertheless it is an interesting question and one you might want to start considering for your own site.

Back to top

Interview: Ryan Carson on Building an Online Brand

Paul: So I’m really excited to have joining me today Ryan Carson from Carsonified. Good to speak to you Ryan.

Ryan: Thanks for having me Paul. Good to be here.

Paul: It seems that we are crossing paths more and more often with me doing various things with Future Of conferences and you guys kindly giving discounts to my listeners, so it’s good to finally actually have you on the show.

Ryan: Thanks. It’s great to be here.

Paul: So the reason I have asked Ryan on to the show today is to talk a little bit about building an online brand. Carsonified have got lots of different brand identities going on with obviously Carsonified itself and then Future Of and ThinkVitamin and various other things. Ryan’s a bit of an expert really, or he comes across like that anyway, at building an online brand and I wanted to talk to him about how he’s gone about doing that. But before we get into that, Ryan, tell us a little bit about the background of Carsonified. How did it come into being, so to speak? How did it end up being what it is today?

Ryan: Well, it was kind of born four years ago. It started off basically as just me in our top bedroom. I used to be a developer in a web design studio and when Jill and I, my wife and I, got married four years ago we just decided to start our own company. At that point it was just me and I was trying to build web apps and attempting to make money and didn’t really do a great job of it. Then I kind of slowly moved into doing sort of more workshops and things and then we built our first proper web app, which was DropSend, and then we just kept growing and growing and doing more web apps and more websites, for ourself not for clients, and then we launched a couple big conferences, Future Of Web Apps and Future Of Web Design, and all of a sudden now we’re about eleven people. Located in Bath and just love what we do and are really excited to be part of the web industry. So that’s us kind of in a nutshell.

Paul: It’s quite interesting, the approach that you’ve taken. You’ve come from the same background as the vast majority of us yet your business has gone in a completely different direction. You haven’t gone down the road of delivering solutions to clients but you’ve done this quite eclectic thing of a bit of web apps here, conferences here. Was that an intentional thing or has it just kind of naturally evolved that way?

Ryan: It kind of naturally evolved but my mother, and your mom always knows you best, she always said there’s a vein that’s been running through my life for a long time, which is just connecting people. I don’t know, for whatever reason I just get a lot of joy out of connecting people and physical events are just a great way to do that. I’m passionate about the web and therefore it’s kind of like, well, connecting people in the web industry, in the technology sector is just kind of made sense. It did start off with this thing called BD4D which you probably don’t remember, By Designers For Designers. A friend and I did that and it was bd4d.com which is now gone but the idea was we got together designers for free just at a bar and people showed their work. It was in London originally and it kind of took off and I think then it was always just a for fun thing. We called it the Creative Fight Club. I think that was kind of the genesis of our events career. We don’t really see ourself as an events company we see ourselves very much as lovers of the web and technology and we just kind of happen to connect people at events so, it just kind of worked that way. I’m also not a big fan of working for clients because it’s just so hard. I really respect what you guys at Headscape and any web designer web developer because constantly doing work for clients is really hard work and it’s fun but it’s hard and because we run our own conferences and build our own web apps thankfully we’re our own client which gives us a bit more freedom. So that’s kind of how we ended up there.

Paul: It depends on how you look at it Ryan because from my point of view you’ve got thousands of clients while I only have one at a time because you have all those users of your apps and the people who come to your conferences. You’ve got far more trouble in my opinion.

Ryan: I guess you could look at it like that but they tend to be less demanding. They’re not paying us thousands of pounds each so it kind of. But you could look at it like that. We try to treat all of you who come to our show with the same respect as clients, it’s just a shorter term, lower economic value relationship.

Paul: OK, so let’s talk about brand a little bit and profile and stuff like that. Carsonified has kind of built quite a significant online profile and I’m just quite interested in some of the techniques that you’ve used to achieve that. You know, how have you made that happen?

Ryan: OK, well I think underlying everything we do is genuineness. I think that we care very much about honesty and being genuine and being kind and friendly and that sounds a bit fuzzy and happy but that’s just kind of, I don’t know, the way we are. And I think that’s been the key to our success, that when we do things people know that we’re not trying to pull the wool over their eyes or secretly sell them something. We have a genuine interest in the web and the tech industry and so when we do things people kind of know there’s real people that are behind this, we’re not some company. And I think we’ve always been very personal and very human and very transparent and I think that at least set the stage for being successful, but obviously we just follow through with pumping out tons of hopefully valuable content. We see building a brand as basically building friends and I think that on our blogs and through our tweets and at our events and through our communications we try to treat everybody as friends and that’s kind of, I think, a little bit of the key to our success.

Paul: I like that idea of talking about treating people as friends. I think that’s a good way. Too many people treat people as potential customers in preference to actually having any real interest in them as human beings I guess. So it’s good.

Ryan: Well yeah. I just kind of think about who do you like being around? I mean, It’s your friends and there’s a reason for that. I think why does business have to be different? Of course there’s an element of professionality but when you go to the pub and you relax it’s because you feel comfortable with people and I think that whole idea should permeate business. You know with your friends you just buy them a beer, but with your customers there’s significant money being exchanged I think that should involve even more trust than friendship. Hopefully our customers, our attendees and our sponsors really believe that we’re doing the right thing for them. You guys probably do something very similar when you work with your clients. You want them to know that you care about them. That this isn’t just about money that you actually are trying to build something beautiful and worthwhile for them.

Paul: Yeah. I mean it’s interesting. You talking about friends reminds me a little bit of the Innocent smoothie guys that I heard talking at Fuel, which is obviously one of your conferences, where they were talking about how they refer to their customers as family, don’t they? And I always thought was quite a. It sounds naff when you say out loud, referring to your customers as family but if you kind of treat them with that kind of respect, I don’t know, it’s good but it depends on how you get on with your family I guess.

Ryan: Yeah. It could be good or bad but the problem is that would never work if you didn’t actually think Innocent cared about you. If you looked on their bottle and there was E numbers and preservatives and stuff you’d think, “Well, they talk this stuff, but they don’t really seem that committed to doing this.” So I think it really needs to be backed up with a sincere and real effort to support. I mean, we’ve been talking about accessibility, this is a good example, at Carsonified for years. You know, “Yeah we care about accessibility and it’s a great thing,” but we don’t actually know what we’re doing and so we just met with AbilityNet yesterday with Robin and we said we want to get serious about this. I know that you guys are really good at accessibility and sort of putting our money where our mouth is. We want people with disabilities to be able to attend our shows and to use our websites. Let’s actually spend some money on that and get serious about it so at the bottom of each page we’re going to put a little thumbs up symbol that will go to a site that explains why accessibility is important to us and what we’ve done to move towards that with also sort of some tips and hints for people who are disabled like how can you use this site better and get more out of it so trying to put our money where our mouth is really.

Paul: Yeah. I tell you one of my favorite moments I ever had at one of your conferences was, I can’t even remember who the speaker was but the question that came out for the panel was about promoting your business and can you do that outside of San Francisco and California and this guy said you had to be in California you had to be at San Francisco if you wanted to launch a web app and you stood up afterwards and you completely laid into this guy and you said, “No no no, that’s not the case, blah blah blah.” But it does strike me, you know, you’re a Bath-based company and Bath isn’t exactly the beating heart of the web design world and I’m quite interested as to whether you feel that that’s been a barrier to you in any way, being based where you are.

Ryan: That’s a great question. It makes it harder, for sure. You know, we have to go to London to have meetings to go to drink, parties, to network, blah blah blah, but the way we make up for that, and I think a lot of your listeners won’t be in London necessarily or New York or Silicon Valley so this is applicable to all of you out there. It’s all about being visible on the web. And you guys do a good job of this as well. You just have to get yourself out there. So we blog as much as we can, we tweet as much as we can. We try to gather a community around us and that’s the way we make up for the fact that we’re not in London or Silicon Valley. I was going to say another important thing about building a brand, and this fits into that, you need to have an opinion in order to be heard, and that means that you have to be comfortable with the fact that people will completely disagree with you sometimes. You know I think in a way I’ve been successful at building a brand because I’m willing to say something that pisses people off really. You know and I think it’s only interesting to hear from someone who has an opinion. When Paul Graham said that “You know you need to be in the startup hub,” it just really made me angry, because he was basically saying to every one of us, well, you know you’re just kind of screwed, and I just thought, “You know what? That’s just not true, and it makes mad and I’m gonna sort of put my reputation on the line by going on stage and disagreeing with you, a well known entrepreneur.” And if I kind of was afraid to do that you know, not so many people know about et cetera. So yeah, get out there, blog, be as controversial as you can, you know as long as you’re being genuine and be ready for people to say mean things about you really.

Paul: Talking about mean things and people say mean things about you. You’ve come under some criticism for being somewhat pushy in your self-promotion. Do you think that’s kind of justified in any way? Do you think maybe there’s a cultural difference there, the fact that you’re American and are us English more uncomfortable with marketing and promoting ourselves?

Ryan: Yes, I think there is a cultural difference. But I’m also kind of, I like to think I’m friendly but I am sort of a brash person. I’m not afraid to tell you my opinion and do what I think I need to do. While being kind, I don’t want to sort of hurt anybody, but I think there is a cultural difference and I do think that, I mean my wife is English so I’m obviously very familiar with English culture now and British culture and I think there is kind of a slight uncomfortableness with getting on stage and blowing your own horn. I think that in the UK we need to get over that. Not change our culture here but be willing to admit that in the UK if we don’t start to step up to the plate and start talking about ourselves, the rest of the world’s just gonna carry on in the tech space. Mike Harrington, he’s not going to shut up. You know and unless we really start to kind of compete with that and start talk about all of the great things that are going on in the UK and really kind of get out there I think unfortunately it means that the startups and the web designers and web developers that are British are going to start to fall behind in the world stage. For instance, I was trying to think, who are the rock star developers in the UK? Who can you name? I mean I can name a couple but who do you think?

Paul: It’s hard. It’s hard to say. I think there are more rock star designers than there are developers. You know you can think of people like Rachel Andrew, and Drew. Two that spring to mind. Jeremy Keith is kind of a developer but maybe not really.

Ryan: Matt Biddle. You know, there’s a few but it’s just. It’s not the plethora that are sort of being spoken about, in the US particularly, but I have no doubt there’s just as many talented people here. It’s just that, that hesitancy to say, “I’m going to do my own startup. I’ve got a good idea. I’ve got what it takes. I’m gonna start talking about it.” It’s just less common over here. I’m not saying that’s a bad thing and that everyone here should change but I think if you want to build a brand in the web space you just need to admit that I’ve got to get out there. You know I had an interesting conversation with Alex Hunter who is sort of really big in Virgin, The Virgin Group, he’s high up and he’s met Richard Branson a bunch of times. And you know what was crazy? He said that Richard was really shy. And I was like, “Really?” That’s a great example I think of a guy, he’s obviously driven and I don’t think everyone should be like Richard Branson but he’s obviously driven and he understands that in order to get Virgin talked about, to build a brand he’s got to be kind of crazy and get out there. He’s always hanging from helicopters or you know flying spaceships and you know, that’s why people talk about him.

Paul: I think there’s also a little bit within the web design community here in the UK of kind of almost false modesty and a little bit of trying to persuade the world that we’re being very altruistic in what we’re doing and not being up front. I receive criticism for the fact that I’m very open about the fact that Boagworld is a marketing tool and that we make money out of it.

Ryan: But it’s the truth.

Paul: Yeah, exactly. So I think I prefer to be up front about those things, than kind of hide them behind a façade of false modesty to be honest.

Ryan: Well yeah and that kind of goes back to my thing I said earlier about being genuine. I think you’ll always be better off if you’re genuine. And of course we’re sort of painting with broad brushstrokes here, but there’s some very talented people here and I just think, let’s get on our soap boxes and sort of shouting back at the Americans really. And people are doing it, I just think there should be more of it.

Paul: Talking about effective marketing tools, ThinkVitamin, let’s talk about that for a little bit. ThinkVitamin is a website that you run which is basically web design related and web app related kind of articles and stuff like that. I’m guessing that was set up as a marketing tool. Tell me a little bit about why it exists and how you came about setting it up and what its aim is for you.

Ryan: Yes. So thinkvitamin.com has two purposes. It’s to build good will and to give back to the community but it’s also a marketing tool and those things are actually very related. If we pump out great content we give away for free it will be valuable, but those of you who read thinkvitamin.com will also probably come to our shows. It’s a symbiotic relationship. We’re very happy to do that. There is a little bit of altruism there, we do actually want to provide good content and give it away for free but we also realize we needed a platform to talk about our shows. We kind of kept calling in favors like, “Do you mind blogging about Future Of Web Apps?” and “Can you mention it?” We just thought we need to build a big site that people go to so we can tell them about that and we’re fortunate to have great connections. We know people like you and Molly Holzschlag and Kevin Rose and just big Internet people and they all agreed to be on the advisory board and really that’s just a group of people that we trust that occasionally write for us but we’re actually taking ThinkVitamin in a new direction where we want it to pretty much become it’s own little business. So we’ve hired a full time Editor named Simon Mackie and he was really high up at SitePoint actually. And he’s come over and he’s taken the reigns and we’re gonna, yeah we’re gonna basically grow that team and expand that out into its own little business.

Paul: That’s interesting.

Ryan: It’ll be better for the readers. It kind of was dying. The publishing schedule was going down and I think we realized, “Man this is so valuable we have over 50,000 RSS subscribers, closer to 70 if you count the news feed,” and we thought, “This is great, we should grow it.”

Paul: Yeah. I mean it’s interesting in some ways you’ve kind of taken the same approach that we have at Headscape using ThinkVitamin that you could have created a blog on the Futures Of website and you could have put this content there. There’s actually a value in separating it out and making it a standalone thing. It feels less salesy I guess. The same way as I could have posted my Boagworld stuff on the Headscape site. You know it could be the Headscape podcast instead of the Boagworld one. All the rest of it. It just comes on a bit too strong if you do that I guess.

Ryan: I totally agree. And it’s interesting because I had a good conversation with Mike at FreshBooks, and freshbooks.com for those of you who don’t know is an app that helps you send out invoices. He had this blog and he was really slogging his guts out on it and at freshbooks.com/blog or something and he said, “I don’t get it. No one’s really reading it,” and to me it was obvious for that reason you just said. Well it’s clear that this is just a marketing tool. Why would you put a blog on your company’s site, on your product’s site? It’s just kind of obvious and that’s exactly why we haven’t done it for our events, you know we put occasional updates there but it’s hard. As much as I like Web 2.0 Expo or something I would never read a blog from Web 2.0 Expo. It’s just too blech, you know what I mean?

Paul: Yeah totally. It’s interesting that the other thing that you’ve done, which again is something that I do, which is that you haven’t just relied on people coming into your sites, whether it be ThinkVitamin or the Futures Of sites or even the Carsonified site. You’ve made a big deal of kind of going out there and using tools like Twitter and Qik and YouTube. I’m just interested as how effective you’ve found those things.

Ryan: I find Qik to be really effective, or Qik, however the heck you say it qik.com and I was really shocked as soon as I started broadcasting was that just tons of people were interacting and I almost couldn’t wait to do the next one. Annoyingly 3G is kind of spotty in Bath so it makes the quality a little bit bad but I’d highly recommend Qik or any other comparable service. It’s so fun you just take your phone with you, I had to get a kind of crappy Nokia phone or something, because I use my iPhone for normal business but just grabbed it from the 3 store, got a plan I think it’s 20 pounds a month that gives you unlimited data which you’ll need if you’re streaming live video from a phone, and whenever I’d walk to Starbucks or something I’d just turn it on and start talking and people would show up because the way Qik works for people who don’t know is you actually see comments live on the phone screen.

Paul: That’s very cool.

Ryan: Yeah, it’s great for interaction and any tool you can use to interact with your fans will increase your connection and that friendship. It will show you want to be real and you want to connect with people and I think hopefully we’ve achieved that where people think, “Gosh you know Carsonified we know who’s there we know it’s not a company it’s really these people that are there and they’re interested in hearing from me and talking to me,” so that’s been good. YouTube has been amazing, I mean I hate YouTube, it’s ugly, it’s a bit crude you know but man there’s just a lot of people on it. I used this cruddy little video camera, filmed myself giving some tips about business, threw it in iMovie, put some music to it and popped it on YouTube and I think I can’t remember the figures it’s up to, it’s up to like 10 or 15,000 views in literally like two hours work.

Paul: Yeah, I keep meaning to get around to that myself and I’ve never quite managed it.

Ryan: Now you can use a Flip camera. Flip is just a type of camera, you just record and then it’s got a USB dongle built right into it. You pop it in and it actually automatically uploads it to YouTube.

Paul: That’s nice.

Ryan: There’s a couple tools you can use to make it easier. And then Facebook, I’ve been using Facebook a lot just to connect with people and remember people’s birthdays and say hello and just be a friend to them. The more connections you can have to people the better, which builds your brand and I feel that, like a mercenary when I say that, and I don’t like it, like I do believe it’s just a better way to live to connect with people and it happens to build your brand which is great and I like that as well, but I think it’s important that you need to be genuine and actually care about people for this to connect.

Paul: What about Twitter? How have you got on with that? Have you found that a useful tool?

Ryan: I love Twitter. And it’s been probably the best way I think for me to communicate I’ve got I think around 4,200 followers now and I don’t know why people follow me. I don’t think I’m particularly interesting but I do whenever I tweet I try to imagine if I was somebody else and I was reading it if I would find it interesting. I think with Twitter don’t tweet too much, maybe a couple times a day max. If you tweet too much people unsubscribe.

Paul: That will explain my problem then, I tweet too much.

Ryan: I still follow you so it’s not too bad. But you know Evan Williams had a good tip he said you should tweet things every so often that you’re not quite sure if you should tweet because they’re a bit too personal or a bit too blech, because that’s the type of stuff that’s actually fun and interesting to read. Initially we had a twitter account for Carsonified and we deleted it. I think we decided that that was kind of exactly what not to do. People don’t really want to hear from a company, they want to hear from you.

Paul: That’s almost the same as having a blog on your own corporate website isn’t it? Having a kind of corporate Twitter account. After saying that we have set one up for GetSignoff but more as a for announcements. If something goes down with the service or if we’ve done some bug fixes or stuff like that. By far the majority I do via the Boagworld Twitter account which is just me talking about my life. I agree with what you’re saying about putting personal stuff there as well that people seem to like to know what’s going on with each other’s lives. I like to know how Jackson’s doing. People like to know, I don’t know. Making it personal, it’s about that personal connection again isn’t it really?

Ryan: Definitely. And I think that that’s the future, you know just in general. Humankind you know it’s just kind of being personal and not hiding anymore behind companies or brands or policies or terms and conditions. It’s about, “Hey, how can I help you and how can I take care of you?” and that’s just a better way to live and it will massively benefit your company which is great. What’s interesting though is that everybody, including us, continues to look at the Signal vs. Noise blog from 37signals and kind of scratch our heads it’s like, it’s the one blog where it is a company blog, I mean yes it’s called Signal vs. Noise, but it’s on their domain, and yet they have over 90,000 subscribers. It’s funny because I think everyone is kind of, “How do you do that? I want to replicate that.” In the end I think you know, they were kind of first. You can’t have that many of those type of blogs and I think most of us are gonna have to be happy with just doing a good blog that is real and personal whether, and I mean ours is carsonified.com and it seems to work and we have about 4,000 subscribers and for us that’s a pretty good number. We should post more but that’s something I haven’t quite figured out yet and I’d be interested to hear from your listeners what they think about that. Is it possible to have a company blog that people care about or is it just not possible? I don’t know.

Paul: I think what you said there about being first is quite significant. I think originality goes a long way. I mean even with the Boagworld podcast. Simply the fact that I was the first web design podcast it seems to give it a momentum that keeps things going, you know because you keep delivering the goods so to speak which obviously the guys at 37signals really have done. I think there is a momentum in being first in something.

Ryan: Yes and that’s probably the secret sauce.

Paul: OK, So let’s wrap this up with kind of a last question which is: What advice would you give to budding entrepreneurs seeking to increase their profile? Let’s have some kind of top tips if you’ve got some.

Ryan: OK. The first tip I give is to start connecting with people that you feel are influential. You know, spend some time and try to get out and physically meet these people, get to know them and to not be creepy about it, but to get out there, to get in front of them and to get to know them. See if you can do something to help them out, to get on their radar, and I think building sort of a group of friends that trusts you but is also influential is just instantly valuable. So I’d do that and you can use all the tools we talked about for that: Facebook, Twitter, etc. etc. but physical meeting is always the best. I mean you want to have a beer with people.

Paul: And you say you do that by trying to help them out in some way? Because that’s always the difficult thing. It’s all well and good to say, “Get to know influential people,” but how you do that’s the tricky part isn’t it?

Ryan: Well my dad always did something that worked. If it was someone he really respected or cared about and wanted to get on their radar he would find an article about them in a magazine and he’d actually go to a framer and have it framed and then write them a personal note and just kind of say and send it to them and say, “You know, I bet you haven’t had time to actually frame a picture of your article so I thought you might want this for your wall.”

Paul: What a genius idea. I love it.

Ryan: And it’s genuine. I’m not trying to get anything out of you but I respect you and here you go. It’s very subtle. You have to be very careful to not try to sort of bribe people. If you come across that way it’s exactly what you don’t want to do. If you feel, and kind of think deep down, “Do I actually want to be friends with this person or am I trying to use them?” I think you should steer very clear of a person if you just think actually I don’t really like this person I’m just trying to get something out of them. But if you think there’s some synergy there, that’s a great way to do it. Remember people’s birthdays, it’s just a nice thing to do. Stuff like that is a great way. Most people’s friends don’t even do that for them. I’ve had people send me stuff and you know it just makes me smile and I’ll always take their call or answer their email now. So I think that’s a good idea.

Paul: Any others?

Ryan: Um, other tips. Um, probably put a real emphasis on customer service and build a real base of caring in your company. Not just for your customers but for your own team. I think that your team will never be able to treat your customers well if they don’t think that they’re treated well. So I think as entrepreneurs grow and they start to hire people I think it’s important to remember to take care of your staff first and then your customers second. And a really great resource for that is what zappos.com does. Zappos.com has an amazing company culture. They have this book called the Culture Book and every year it comes out and you can buy it and it’s basically a bunch of testimonials, thousands of them from the Zappos employees about why they love their job. And it’s just packed full of ideas of how to take care of your team and it’s a great inspirational resource. I think you can either get it on eBay or Amazon or you can buy it straight from Zappos. A couple hopefully useful tips?

Paul: Yeah that’s excellent. Ryan thank you so much for coming on the show, it’s been really good to get you on and I think there’s some really good useful advice there for anybody looking to kind of build an online brand so thank you very much and no doubt we will have you back again soon.

Ryan: Thank you, it’s an honor.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

Site promotion with minimal budget

Our first question is from Adam in the boagworld forum:

I have got a site that needs an awful lot of promotion to work, and have got very little budget to do it with. I could probably spend a little bit on Google AdWords but on nothing else. So, how can I promote my site for little money?

Adam went on to tell me it was a charity website. This makes it challenging. As Adam said…

There are thousands of Charity sites, and many better funded, and just altogether bigger.

In this situation search engine optimisation or Adwords is going to be tough. The competition is fierce and so it will be expensive to be highly ranked.

The other problem with a charity site is that unless it is niche (e.g. bird protection) the potential audience is open ended. However, with limited resources there is little point in targeting ‘the general public’. You will have no impact on such a broad audience.

Target a specific group as it will be easier to gain momentum within a smaller audience. For example, there are Christian charities who do general humanitarian aid. Even though anybody could be a potential supporter, they instead target other christians. Therefore they are well known in that circle. Better to have a lot of support from a niche audience than a small amount of support across the general populous.

Once you have picked the audience use three techniques to reach them:

  • Offline promotion – Engage with your audience offline as well as on. Attend conferences, produce offline promotional material and target magazines your audience reads. As web designers we often forget to power of offline marketing.
  • Social marketing – Identify the social sites your audience You should be wherever your audience is interacting. Finally, seek out key figures who your audience admire and respect. See if you can get them on board and encourage them to promote your site.
  • Editorial promotion - Find out if your audience reads online blogs or magazines. Offer to write articles for these sites. Do not overtly promote your charity but instead write content which will be of interest to the audience. Failing that make use of comments to join in the discussions and increase your sites profile among that audience.

However, be careful. In your haste to promote your site do not spam. The key is to offer something of value. You must earn the right to promote your site.

Sitepoint has an excellent article entitled ‘10 rules for driving traffic using forums‘. Although it is focused on forums, its advice is applicable to most forms of online promotion.

Office Or Not

This from Brad:

A question from Canada! I’m a long-time listener of the show, and I thank you both for your entertainment and inspiration.

A little bit of background first… Two years ago I co-founded a small web development company, and to date we have not yet invested in office space. As we slowly move on to ‘higher profile’ clients, we find it increasingly important to have someone in-house, to answered the phones, do the books, etc, etc, so we can focus on growing the business.

That said, I’m obviously touching on a huge spectrum of possible questions, so I’ll try to narrow it down. I don’t think this is something you have covered specifically on the show before…

Is office space really important for a creative business? If so, what steps would you recommend. And if not, are there better areas to spend $2000 / month?

If I had been asked this question only two years or so ago I would have said that office working for a web team is not important at all. If anything, I would have said that home working was better. The following extract from Paul’s blog, written in 2005, underlines this:

The benefits of a virtual company

By virtual company, I mean we do not have a central office. Each member of staff works from home and we communicate and file share with tools such as Skype, CVS and Groove.

People are often curious about an entire company home working and ask how well it works in reality. My answer is usually that it is brilliant. From the employee perspective, you do not have to commute and you can see a lot more of your family. For example, if I were still working for IBM when I used to commute an hour and a half everyday, I would only see my 2-year-old son at weekends. As an employer, I love it because my staff tend to work the hours they would commute and generally home working is seen as a big bonus that keeps people at the company longer. Not to mention the savings made on premises.

Communication really is not a big problem. There are so many tools out there these days that help, and broadband means that even telephone conversations are now free.

Paul goes on to say that the only drawback of home working is that it lacks the social aspects of working in an office.

Not true I’m afraid. Though of course home working does give you an environment to ‘get your head down’ without interruption, what it really lacks, that phone/email/IM cannot replace, is creative collaboration. People simply do not bounce ideas around like they do if they work together.

Our current office is open plan and there’s nowhere to hide yourself away. This has meant that I haven’t really frequented it that often – I need ‘calm’ to write. However, watching particularly our development team grow and work really effectively together underlined to all of us the value of working together.

So much so that we are about to move into our ‘dream’ offices where there will be a mixture of open plan spaces and areas where we can work quietly.

So (finally!), in answer to Brad’s question, I think that office working is better for the business in the long run and I would say warrants the additional associated cost (though beware the costs, they can mount up – another podcast topic I think). That said, we have managed for nearly seven years before doing it properly (i.e. pretty much all of us will be in together most of the time) so it won’t necessarily damage you if you leave it awhile.

Back to top

Overcoming stagnation

Posted in Web strategy on by Paul Boag

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

In a recent report that I wrote for one of our clients at Headscape I explained how most websites pass through a common product life cycle. This life cycle includes the following stages…

  • Exploration – Most organisations begin with a series of exploratory sites, where they discover the potential of the web. This often involves low investment and slow growth.
  • Growth – At some point during the exploration phases the ‘penny drops’ and the organisation realises how the web can benefit their business. More substantial investment is made, the site is dramatically improved, and rapid growth follows.
  • Stagnation – Following the initial rapid growth there is a period of stagnation. This is because the ‘quick win’ fixes have been made to the site. Obvious problems have been resolved and so the benefits of fixing these changes have passed.
  • Maturity – Once the challenges of overcoming stagnation have been met, a site enters a period of gradual but steady growth. This is characterised by continual incremental changes to the site, which consistently stimulate growth.

It is easy to generate rapid growth on an early version of a website. There are so many obvious problems to fix. You can have a big impact with relatively little effort. However, what happens once that stage is over? How do you avoid sinking into stagnation?

Overcoming stagnation

Stagnation is not an entirely negative period. Although it consists of slower growth, it does not mean a decline. However it does generate fear…

  • A fear that growth will turn into decline
  • A fear of the competition catching up
  • A fear of losing customer loyalty

This fear can lead to knee jerk reactions that are detrimental. This mentality manifests itself in two particular reactions. First, it leads to panic decision making. Something has to be done and it must be done now. Second, it leads to the creation of additional features. These two reactions often go hand in hand. As growth slows, organisations seek ways to maintain momentum. One source they turn to is user feedback. However, instead of considering the impact of suggestions on the overall usability, they instead grasp hold of it ‘as something we can do’ and implement immediately. This leads to feature creep and complexity. Before long all vision for the site is lost and the organisation has become reactive.

This can be overcome in three ways…

  • Going back to basics – Step back occasionally and ask two questions. Why does your site exist and who is it aimed at? So much time can be spent troubleshooting, adding features and responding to requests, that focus is lost. It is easy to spend time placating the requests of the vocal minority, while damaging usability for the majority.
  • Pause and evaluate – Every website receives criticism. However, it is important to pause before responding to that criticism. Who is criticising? Are they an important segment of your audience, how many of the same comments are you receiving? How serious is the criticism? Is it a mild inconvenience or a serious issue? What are the ramifications of fixing the problem? Who else will it effect and in what way? The danger is that by rushing in to a fix a problem you create more.
  • Simplify – There is a belief that growth is maintained by giving the user more. However, often the opposite is true. Look to solve problems and increase growth by simplifying your site not by adding new features.

It is the area of simplicity where I believe there is most to learn.

The importance of simplicity

There are two reasons why simplicity is important…

  • Simplicity sales
  • Users have limited attention

What do I mean when I say simplicity sales?

Simplicity sells

One of the most successful products of our time is the iPod, and yet it is inferior to its competition in almost all ways. It is more expensive, has inferior technology and offers less features. The reason it has come to dominate the market is because it is simple and easy to use. This simplicity has become the trademark of Apple products and with it has come new-found growth for the company.

There are examples online too. In the early years of the web Yahoo! dominated search listings. However, as the web grew their site struggled to adapt. It became complex and hard to use. It is therefore not surprising that the minimalist interface of Google came as a breath of fresh air and quickly supplanted Yahoo’s dominance.

Google went on to apply this same simplistic approach to online advertising. They swept aside traditional banner advertising, replacing it with simpler text adverts accompanied by a ease to use administration system that allowed anybody to run an ad campaigns. The majority of users will select simplicity over functionality.

Limited attention

We forget that people have a limited capacity to process information. In fact we are only able to process 6-7 pieces of information simultaneously. That is why we find it so hard to learn to drive. It is not until we can process information on a sub conscious level that we feel relaxed driving.

As we translate this principle to the web it becomes apparent why web pages can be so overwhelming. There is simply too much going on. One technique to reduce complexity is assigning user attention points to pages. For example, lets say you have 15 points of user attention to spend. Each item you add to the page costs 1 point of attention. If you want something to stand out it needs more points. This demonstrates that you need to reduce the number of screen elements or risk a lack of focus because points are too thinly spread. This problem is perfectly demonstrated by the difference between the Yahoo! and Google home pages…

Google and Yahoo Homepages

When compared to Google it is obvious that Yahoo! is demanding too much from its users and spreading their attention too thinly. By having so much content and not emphasising any particular element, the whole page lacks definition. It needs to prioritise and simplify its content.

To move a website from stagnation to maturity we need to simplify. This involves making some difficult choices.

Simplifying is hard for two reasons…

  • It is hard to remove functionality you have invested in.
  • It is hard to remove functionality people use.

Nevertheless it is necessary.

When it comes to the mental barrier of removing functionality you need to recognise that it is costing you money. Every time the complexity of that functionality undermines the user experience it is potentially driving users away and reducing profit.

Just because some people use a piece of functionality does not mean you should keep it. Every piece of functionality on your website is probably used. The question is, how much are they used and how badly does it overcomplicate the user experience for everybody else?

The above post is an extract from a report written for WFF by Headscape

Quality or quickly?

Posted in Web strategy on by Paul Boag

What is more important, to reach market quickly or to launch with a quality product?

I received this question from Pete in South Africa…

I have been working on a small web application, which I hope to launch soon. My problem is that I am spending ages tweaking and improving it before launch. I fear that if I spend much longer on it somebody will beat me to market. What is more important, getting the product right or launching it quickly?

It is a good question and one with no single answer. It is certainly something we have been struggling with as we prepare to launch GetSignOff.

The advantage of launching early

twitter website

The prevailing wisdom is to launch early. The logic goes that by launching quickly you can be first to market and then refine the offering based on user feedback.

There is certainly something to be said for being first to market, especially online. It is easier to build some buzz around your product if it is an original idea. You can also establish a customer basis more easily when there is little choice available. However it is not without its drawbacks.

The disadvantages of launching early

You only get one chance to make a first impression. If a user does not like your product they are unlikely to return. They will therefore never see improvements you make later. The customer is lost.

Also, by launching early your competition has the chance to adapt before they launch. Few ideas are truly original and somebody somewhere will already be developing something similar. If you launch too early they have the opportunity to adapt their offering to undermine you.

Of course, the danger of delaying launch is procrastination. That has certainly been my experience. The idea for GetSignOff was formed over a year and a half ago and we wasted far too much time. Be careful you do not make the same mistake and spend too long obsessing over details.

How to make a decision

When to release is dependant on two factors, what you are releasing and who it is aimed at.

If you are releasing a traditional website it is important that the quality is high. There is no option to slap on a beta label, and users are less tolerant of problems.

getsignoff screenshot

If the product is a web application the decision is dependant on the nature of that application. If it is business critical, the users will have a lower tolerance for problems. However, if it is something like twitter then downtime and problems are more easily accepted. After all, the inability to twitter is not the end of the world (not that you would guess that from some peoples reaction).

The second factor that determines when you launch is audience. For example the audience for GetSignOff are other web designers. Although you couldn’t find a more critical audience, they do understand that a new product will have bugs. They are also experienced enough to work around usability problems and muddle through. However, if your audience is not so computer literate they are more likely to give up and try another site.

Fearing competition

There seems to be a fear of competition among web developers. They have this desire to be completely original, and so rush the launch of their application.

However, competition is to be expected and choice is good. I have received numerous apologetic emails and twitters from people pointing out the competition to GetSignOff. Their tone indicates that this is the end of the world. In reality it is to be expected. Even if GetSignOff was identical to its competition it would not be a problem. There are enough customers to go around. The web is a big place.

Take baked beans for example. There are a lot of varieties of backed beans and they are all basically the same. They do not even taste different. However, all of these varieties can exist side by side in the marketplace quite happily. There is enough demand.

In conclusion, there is no need to rush to market. Take your time and get your product right. However, be careful not to procrastinate and remember that you will need to tweak your application long after launch. No matter how careful the planning, you will not get it right first time.

131. Version Control

Posted in Classic shows on by Paul Boag

In this weeks show Ryan and Stanton return to talk about the importance of version control and answer your questions on project  management and invoicing applications, download sizes and page weight.

Play

Podcast: Download (17.8MB)

Download this show.

Launch our podcast player

News and events

Twitter Cuts UK SMS

This week the team over at Twitter announced that they would no longer be delivering outbound SMS over there UK number. They go on to explain that the bill which up until now they’ve been footing is simply too great and that even with a limit of 250 messages per week they estimate a yearly cost of $1000 per user.

Thanks to established relationships with SMS services in Canada, India and the United States the outbound SMS service will be continuing uninterrupted in those countries.

Twitter has suggested a number of alternatives to the service, links to which can be found on their blog. It would also appear that a number of start-ups are rushing to fill the void as TechCrunch have also reported.

A large portion of Twitters popularity is due to their SMS facilities and it is feared that “freezing” out the UK and other countries from this service will be detrimental to their future.

It reminds me of when Pandora, the online radio station, closed its doors entirely to its UK audience due to licensing constraints and it begs to question do we poor souls in the UK miss out on all the good toys?

facelift (FLIR) Image Replacement for Fonts

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that aren’t otherwise supported in web browsers. The generated image is automatically placed on your site and works in a similar way to sIFR, the big difference being the lack of Flash.

This script uses PHP and javaScript and utilises actual .ttf font files to generate its replacement images, so you can simply specify which elements you want to replace, h1, h2 tags etc, download a font you want to use, point the script to it and your done.

I’m looking forward to having a play with this script as it seems to be simple to use and the fact that you don’t have to mess around with Flash like you do with sIFR is a big bonus in my book.

Take a look at the number of examples they have on their website and see for yourself.

Gmail went down!

So Gmail went down for a few hours this week and as Josh Catone said in his sitepoint article article:

Judging by the reactions on Twitter and in the blogosphere, you’d have thought that the world ended.

There’s nothing really more we can say about this that Josh hasn’t already mentioned, but suffice it to say, no web sites/app is going to have 100% up time and this echoes what Stanton and I were talking about the other week in regards to S3 going down. It’s important to always have a backup and not to put all your eggs in one basket because when the service you’re using goes down, and invariably it will, you need a plan B.

Back to top

And Now For Something Completely Random

During the recording of this weeks podcast we were thrown completely when we spotted Paul Annett from Clear:Left dressed up as a Gorilla on Yahoo Live! and then proceeded to start dancing… always aiming to share the hysterics here’s proof. Random indeed.

Paul Annett Dresses as a Gorilla

Feature: To Version Control or Not?

Version control can seem like a very daunting thing to incorporate into your work flow, but once it’s there you can be left wondering how you ever lived without it. In this week’s feature Stanton shares his experiences with you in a bid to convince you why you need it.

Back to top

Listeners feedback:

Project Management and Invoicing Applications

James writes: I would like some boagworld advice. I’m a web designer and SharePoint specialist at a large company in Cambridge, UK. Over the last 3 to 4 years i have been messing around with web design etc. I now am very busy outside of work and it is getting busier every month.

I started of with a server under the bed at home with UPS hosting these sites. They ranged from personal sites, to company profile pages to shops. This server has now been replaced with a VPS hosted externally.

My plan is to keep working full time and manage my time very carefully outside of work and keep these sites coming in and out etc and then one day take the big leap into the self-employed world.

What could you recommend for me to manage my tasks, projects, time-management and invoicing etc?

I love the podcast and would be quite happy to chat further with you. Look forward to hearing your experience comments.

Well there is a multitude of online and desktop applications designed specifically for managing your business.

Probably the most popular project management app I know of is 37 Signals’ BaseCamp and that’s certainly the first one that springs to mind when I’m asked this question. Depending on what package you have, BaseCamp allows you to create projects, set milestones, to-do lists, manage time spent on tasks among other things, however BaseCamp is tailored more towards collaborative projects for when you’re working with a team of people. It doesn’t provide facilities for invoicing clients and managing your accounts and so it might not be the perfect choice if you working alone.

Another app I know of and which comes highly recommended is FreeAgent. FreeAgent like BaseCamp allows you to create and manage projects, clients and timescales, however in addition it provides you with the facility to generate invoices, manage your bank accounts as well as your expenses and incomes. It’s designed for sole traders, partnerships and limited companies and is wrapped up in a nice, user friendly interface.

A final mention goes to a Microsoft app that I came across a couple of years ago now, and has only this year been release in the UK. It’s called Office Accouting Express 2008 and it’s actually free to download and use. As you would expect it integrates with other Office applications and provides you with all the facilities you would expect from an accounting package, invoicing, client management etc. So if you’re working on a PC it’s worth having a look.

Luckily you can have a play with all these apps before you buy. BaseCamp has a free account which allows you to create 1 project so you can get in and see how it all works, FreeAgent has a series of demos you can use to see if the interface and facilities are to your liking and as I’ve said Office Accounting Express is free. So my advice would be check out them al
l and see what works for you and no doubt there will be several suggestions in the show comments on other apps that I haven’t mentioned here.

Download Sizes

Bob writes: After reading a recent post from Smashing Magazine on textures I started to wonder… what is a good rule of thumb regarding document size per page on the web? Most of the example pages in the article ranked in at close to 900kb per page… am I behind the times?

Very good question, and one I think we all worry about at points. There’s more than just the filesize to really worry about, there’s the general ‘page weight’ which is affected by many factors, such as:

  • The number of HTTP requests made – if you’re pulling in a lot of external javaScript or CSS files, each one has to be requested seperately. You can combine these into single files to reduce load times, but at the expense of readability, maintainability and organisation
  • The size of any javaScript files you’re pulling in – you can get minified versions of most libraries, for example, which strip out all the extra spaces and line breaks in the code, which aren’t needed in order for the code to execute
  • CSS expressions can be a useful tool, but are bloody slow, especially when used a lot
  • Image filesize can have a massive effect on load times, which is one of your main concerns as you mentioned textures. I’m assuming you’re already familiar with image optimisation, but also test to see if you can squeeze images into a GIF, or a PNG8 if possible, these formats will give you a nice small filesize if you only need a limited colour pallete.

In this day and age it’s nice to think that we’re all cruising on nice fast broadband connections, but in reality we know that’s not the case and you really have to consider your audience, and the context in which they may visit your site (Paul’s talked about this quite recently). If you expect an older demographic to your site, or people in remote areas, then they might still be hitting you on a dial up connection. Some visitors may be using poor public wifi (I get suicidal on the train to and from London as the wifi is usually worse than dial-up), or mobile devices where the data charges can be ridiculously high.

There are a couple of tools I use to get an idea of how my pages weigh in:

There is a Firebug addon called YSlow which provides some nifty statistics on what’s happening under the hood of the pages you visit, and also grades the page performance and suggests methods to improve the loading time of your page.

I tested 2 sites quickly with this extension to give an idea of what you can expect to see, Amazon and Boagworld.

  • Amazon.com weighs in at 501k with 85 HTTP requests and a performance rating of D
  • Boagworld.com is a bit lighter on it’s feet at 57.6k and 79 HTTP requests, but has a performance rating of F, due to (among other things) including 37 external javascript files compared to Amazon’s 8, and 33 CSS background images compared to 9 with Amazon.

I also use a Firefox plugin called Firefox Throttle which lets you simulate a specific network speed (such as 56k) and get an idea of how long your site will take on certain connections.

Unfortunately I don’t think there’s a good rule of thumb here. Personally, I don’t let the page weight issue affect or limit my design, but try and make savings where I can nearer the end of the project, by optimising images, switching to minified JS libraries and reducing the amount of HTTP requests where possible.

Back to top

 

130. Air

Posted in Classic shows on by Paul Boag

On this week’s show; Paul talks about better understanding disabled users. We have a tip from Jeremy about problem solving and Jonathan Snook introduces us to Adobe Air.

Download this show.

Launch our podcast player

Housekeeping

A few pieces of housekeeping I wanted to quickly mention at the start of this week’s show.

  • FOWA – The guys over at Carsonified have been kind enough to offer boagworld listeners a 15% discount off of the upcoming Future of Web Apps conference in London. The conference takes place between the 8-10 October and is an absolutely superb event. To claim your discount use the code FOWA-bw at checkout. There are only 50 discounted places, so be quick.
  • SXSW – Talking of conferences can I ask a favour of you all. Marcus is desperate to go to next years SXSW conference in Texas. However he is only allowed to go if he is speaking. As you may know speakers for SXSW are chosen using a voting system. So, in order for Marcus to attend SXSW he needs your votes. Give an old popstar a second chance. Go vote for him now!
  • Think Vitamin - Finally I just thought I would quickly mention an article I have recently written for the Think Vitamin website. It is entitled "the 5 hidden costs of running a CMS" and I thought you might be interested in check it out. It is an extract from chapter 8 of my book the Website Owners Manual, which as I have said many times before, you can download right now ;)

News and events

Designing for emotion and flow

Not long ago I wrote an article for boagworld on the importance of context. In that article I highlighted elements such as time, mood and environment as key factors that contribute to a users context when accessing your site. This context directly impacts how the user interacts with your site. What I didn’t tackle in my article is exactly how context should affect the way you design.

An article called "Design for Emotion and Flow" on the boxes and arrows website, takes my post a step further by going into a lot more detail about what affects users behaviour and how we should design in a way that accommodates their state of mind.

Its quite an in-depth article but worth the read. It touches on user physiology as well as issues of environment and although it can be slightly theoretical at times, it focuses in on what you can practically do towards the end.

Articles like this always leave me with mixed feelings. They can easily feel overly analytical to the point where you wonder if they are applicable in the real world. However, in my experience if you take the time to read and digest them, they start to influence the way you design on an almost subconscious level.

7 essential guidelines to functional design

By contrast our next article is much more down to earth. The "7 Essential guidelines to functional design" is another post by smashing magazine and focuses on some fundamentals of good design.

However, don’t get the impression that this is just an article for designers. The principles it talks about also apply to developers and website owners. Basics such as the goal and audience for your site are things everybody should be considering.

According to Smashing Magazine the 7 essential guidelines to functional design are:

  • Consider our product’s goal
  • Consider who will be using it
  • Consider what your audience intends to do with it
  • Is it clear how to use it?
  • How does your user know it’s working?
  • Is it engaging to your users?
  • How does it handle mistakes?

Whether this is the definitive list, I am not so sure. However, it is a worthwhile read especially if you are just starting out.

15 companies that really get corporate blogging

While we are on the subject of lists our next post is "15 companies that really get corporate blogging". What can I say, I am a sucker for a list!

This one is really for those of you who run a website and in particular run a corporate blog. As the name suggests it lists companies that do a good job at blogging. However, it is not the list that attracted me to this article, it is the reason why the companies got on the list.

There is a lot of good advice to be gleaned from this post. Just a few snippets I picked up include:

  • Don’t just pimp your products, talk about other stuff too
  • Post regularly
  • Encourage conversation
  • Be candid and open
  • Offer advice and lessons you have learnt

The list could go on. Corporate blogging is by and large a disaster with many companies just failing to ‘get it’. According to a recent report, 56% of corporate blogs just republish press releases and two thirds hardly ever receive comments. However, as is highlighted in this post there are a growing number of organisations that are doing things right and we should follow their example.

Learning from signage

If you have listened to this show for any length of time you will know I am a great fan of looking beyond the web for inspiration. I also believe there a lot to be learnt from other forms of design including signage.

It would appear that Mark Boulton would agree with this sentiment judging by his recent post on airport signage. Mark, compares the signage in two airports and looks at how the lessons learnt apply to web design.

Some of the gems he discovered include:

  • Signage should work without colour coding
  • Only designers care about fonts
  • Don’t rely too heavily on pictograms
  • Always put your ideas to the test

This is a great article which should (if nothing else) encourage you to look at the world around you for inspiration.

Back to top

Interview: Johnathan Snook on Adobe Air

Paul: Joining me today is Johnathan Snook who I recently saw at the @Media conference. It was great to see you there again Johnathon.

Johnathan: A pleasure to see you there as well.

Paul: You really got me with your presentation. It was an excellent presentation. Very, very enjoyable, and you touched on the subject of Adobe Air. It wasn’t the main thrust of the presentation, but it was the bit that really grabbed my attention so I thought "let’s get you on the show and have a bit of a chat about it" if that’s O.K. with you.

Johnathan: Absolutely.

Paul: Good. So, let’s start from the absolute basics so that we’re all on the same page. Could you just explain very briefly what Adobe Air is so that people that haven’t come across it before kind of know what it does.

Johnathan: Certainly. Adobe Air is a development platform for making desktop applications to make desktop applications cross-platform. So, something that you build once and that would work on Windows, Mac OSX as well as Linux.

Paul: O.K. And this is built using web technologies…

Johnathan: Yeah, It’s really great that they’ve managed to leverage what they know things like Flash, Flex, and really the kicker is being able to develop desktop applications using HTML, CSS and JavaScript that, obviously, a lot of us web developers are going to be familiar with.

Paul: Sure. So, I mean that’s I guess why we’ve included it on the show even though it’s a web design podcast, that kind of line between the web and desktop applications seems to be blurring and Air is a big part of that. What drove you to kind of investigate it and kind of look into Air as a product?

Johnathan: For me, it was just a curiosity. The platform, what it could do, knowing that I could create a cross-platform desktop application was kind of enticing. When we build for the web we’re trying to do things as cross-platform as possible make sure that we target as many browsers as we can, and really be able to reach out to the people and do really cool things. So, for me it was like, O.K., well what can I do with this what are the possibilities. One of the first things that went off in my brain was building a Twitter application. At the time, when Twitter was up for more than 24 hours straight, it was kind of cool to be able to build a desktop application to kind of separate out from the web, because the web site was frustrating me to know end, and to be able to put in stuff that made the site more usable for me and in the end was a tool that I got to use every day and that I enjoyed to use.

Paul: Cool. I’ve kind of got a basic understanding of it. I understand what it does and I understand the kind of technologies that exist under it, but can you kind of give me an idea of, you know, how it works as such. I know how to create an HTML page, CSS and Javascript and stuff like that. How do I get from there into turning it into a Air application?

Johnathan: It’s surprisingly quite easy. What happens is, if you look at the Air runtime, is it essentially runs your Air application, so you don’t create a .exe file or a .dwg file you don’t create an executable in the traditional sense. What you end up doing is creating a .air file that you use to distribute. The Air runtime actually handles that. Building that .air file, there is an SDK available from Adobe that allows you to compile this Air file. So, those Air files are pretty straight forward, they’re really just like a ZIP file with some extra information in it. So, to create an actual Air application, you can do it just using a normal text editor, you can do with specific IDEs like Eclipse. If you’re into Flex development, they have Flex builder. If you’re into just doing HTML and CSS kind of thing, you might want to look into Aptana they have Air support built right in. If you’re a fan of Dreamweaver, there’s a Dreamweaver extension for automatically compiling your application, and being able to set properties on your application. So, things like how big should the window be when it opens up, can I resize it, what kind of stuff can I do with it. That obviously, in this GUI sense, to a certain degree can make things a lot easier. So, I think there are a lot of benefits to using an IDE with built in support, but you don’t have to. There is the capability of just using a normal text editor and then running the SDK command line sequences to actually generate the Air file. It is really straight forward.

Paul: So, the one selling feature or one thing about Air that’s been promoted quite heavily is the fact that you can take online applications offline in a sense. The application is still usable even if you’re not connected to the Internet at a particular point in time. I think they showed off, right from the beginning, an eBay example of that where you could do all kinds of things offline, and then when you connected it was all uploaded. How does that kind of process work? There must be some kind of local database that’s running, one presumes.

Johnathan: That’s correct. I think some people may be familiar with Google Gears in having the local storage using the SQLite database. Adobe Air actually does something very similar. They do have a local SQLite database that you’ve seen create local databases and store any information there. There’s actually different ways. You have access to the local file system, so you can certainly write new files. Say, if you wanted to create new text files, xml files, new binary formats. So, if you wanted to create an image editing software that stores files in a binary format, you could do that. So, there’s a lot of flexibility there because you do have some access to the local system. You have network connectivity, so you can do either regular AJAX calls or you can do socket connections. You can connect to web servers. You can connect to remote database servers. You’ve got a lot of flexibility and a lot of control because of that.

Paul: You seem quite enthusiastic about the development environment. What has been your impression of it. Was it something that was a steep learning curve, but when you get there it’s really cool, or is it easy straight out of the box? What were your impressions?

Johnathan: I think it’s going to depend on what it is you’re trying to do. I think that there are going to be some frustrations. There are going to be some things that you have to understand about the environment. To give you an example; the HTML/CSS stuff is pretty cool it basically runs on a WebKit engine, which is the same engine that powers Safari. That gives you a lot of control and stuff, but ultimately that WebKit engine is still running within a Flash runtime. So, there are some limitations to that because of the fact that Adobe just simply hasn’t built in certain support. Things like support for double byte character encoding, so Chinese and Japanese character sets can be more difficult. However, they are working on that. Version 1.1 is supposed to be coming out soon it will have support for that, but right now you’re limited because of that.

Paul: What kind of people should be delving into this. Is this the kind of thing that only a hardcore developer like yourself should be touching or is it something that somebody like myself that would be a front-end interface designer should I even bother picking it up or am I better keeping away?

Johnathan: It’s really easy to develop in. I think you can make really quick solutions really straight forward. To give you a comparison; there is a Mac software called Fluid for creating site applications, but that is separated from the browser. You can kind of plot the same kind of things with Adobe Air because you do have that WebKit engine. You can basically use it as a browser. So, to give you a quick example; Muxtape, which is an online mix-taping thing you upload MP3s, and then people can go to your page and listen to your mix tape… The problem is that if you accidentally close the browser, you lose that information. I think there are a lot of websites that have this stickiness factor where you want to decouple the application from the browser. So, I put together a really basic example in which you type in a URL and it loads up a mix tape. That’s a very straight forward interface, but to be able to do that in a desktop application that I can minimize to the dock or the system tray is something that is, I think, a lot more appealing than running this kind of stuff through the web browser. And, it was really easy to put together. I spent about an hour one evening to put that kind of thing … I mean it is a very basic prototype, but the fact is that it is very straight forward to put that together. So, I think if web developers have ideas, they can really take advantage of that and build pretty cool stuff.

Paul: So, it’s not something we need to be intimidated of, then.

Johnathan: No, absolutely not.

Paul: The other thing that maybe is a bit of a concern to us very standards-based designers in comparison to the Flash community is that Adobe says we support CSS and HTML, as well as Flash, but obviously Flash is their product. You kind of get this feeling that they’re going to always support Flash more and that CSS and HTMl are a bit of an afterthought. Is that the case, or is that unfounded?

Johnathan: To a certain degree, it is the case. It’s, I think, unfortunate. I think they are more familiar with Flash. They’re more familiar with that environment. So, as you try to build the equivalent of a browser within this Flash runtime it’s going to be extremely difficult and I think things are going to get missed. And, I saw that sort of along the Beta process. Things like no support for "undo." I mean, that’s a pretty basic thing, but the fact that that’s not built in there does hamper people trying to build HTML-based applications. It works great in Flash-based applications and then what you end up running into is, to give you another example with Snitter, my little desktop Twitter application because it’s built using HTML and CSS, it had certain limitations, but there’s other Twitter clients built with Adobe Air that were built using Flash that actually have different limitations. So, people would say, "Well this application can do it just fine. Why can’t yours?" You have to kind of explain to them that it’s because of the limitations of how the environment was developed. Despite the fact that they are both still Adobe Air applications, technically they’re done differently and there are maybe more limitations as a result of that.

Paul: Is there an opportunity to mix Flash and XHTML and CSS and whatever else together, or do you have to make this decision up front?

Johnathan: No, absolutely not. Certainly, within the Adobe Air environment, you have that flexibility to create these little hybrid applications. I think Snitter, for example, is a good example of it. There’s a lot of Flash components out there that can do certain things. For example, a bunch of folks made an iMap component, so you can actually connect to an iMap server. However, that component is Flash-based. Another component out there that I saw was a Jabber client. So, let’s say you wanted to do a GMail chat client or some other Jabber-connected application, you can import those Flash runtimes into your application and use them from Javascript. So, you do have that flexibility to use both technologies and take advantage of that. I’ve certainly done that with Snitter, and I’ve done that with other applications as well because we have that flexibility of the environment. I think there is that sort of understanding that you can do that, and actually look out for the solutions that not only are HTML and Javascript, but that are Flash-based as well and come up with new ways of thinking because I think, traditionally, as web developers, we tend to separate those two as much as we can.

Paul: That’s quite interesting. You talked about this kind of hybrid approach of combining Flash and HTML at @Media combining them together and about how we had some fears as standards-based designers of even touching Flash in any kind of context. Is that a kind of approach that you would apply beyond Air to the web generally?

Johnathan: Absolutely. I think MuxTape is a great example of that. To be able to play MP3s isn’t something that’s easily done using Javascript. However, you can take advantage of Flash and use its capabilities to play MP3s to create new interfaces that aren’t specifically 100% Flash-based; that we have something that’s still HTML and Javascript that interacts in ways that I think a lot of us are comfortable with, but still have access to a lot of features that Flash offers to us you know, the fact that we can create the bridge between the two; we can do that on the web just as well as we can do that within Adobe Air.

Paul: O.K. That all sounds very interesting and it certainly has made me want to kind of pick up Air and have a play with it and kind of get my hands dirty. I guess, perhaps as the last question then, is what tips would you give to people like me that haven’t yet touched Air and are considering having a play. What are the big traps to avoid? What are the good things to start with. Where should I begin the journey, so to speak?

Johnathan: I think probably one of the first things you should do is head over to the Adobe web site. They have a number of really good resources to start off with. Obviously, you’re going to need the SDK so you can actually build your applications, but they also have the dev center where they have a number of introductory articles to learn how to build applications and it doesn’t mean those applications have to be built using Adobe applications like Dreamweaver, you can certainly do them without. So, there’s a lot of really good tutorials on there. From there, they lead off to a number of resources outside of Adobe that would certainly help you get started.

Paul: What about mistakes? What were the big mistakes you made up front that, with hindsight, you would avoid? Or, did you get it right the first time?

Johnathan: I don’t make mistakes! Well, I think one of the cool things about the environment is certainly the flexibility to take advantage of a lot of advanced CSS. Because you are using the WebKit engine which, when it comes to CSS 3 support, is one of the most advanced, you know that you have support for things like rounded corners, border radius, that you have support for multiple backgrounds, image-based borders you can do some really cool stuff with that that is really fun to play around with. You can create transparent applications, so if you wanted something that was completely and uniquely shaped, you can do these really cool things. The downfall for that is that you can quickly start running into performance issues. If you start creating all of these alpha PNGs that are layered over the top of each other, they give you a lot of flexibility, but unfortunately are a performance drain on how much your system can actually handle. I think that was one of my initial mistakes going in and saying "Wow, I’ve got all of this stuff that I can use let me throw everything at it" and then realizing that, you know, maybe that wasn’t the best solution. I think we still have to be wise in considering how we structure our CSS, how do we structure the design in such a way that, while it’s still flexible, it still does things from a performance-minded aspect so we’re not doing things that are going to unnecessarily slow down or application. Those are things that we’ve got to think about.

Paul: That’s some really good advice Johnathan. Thank you so much for coming on the show. That was a great introduction to Air. Hopefully it’s encouraged a lot of people listening to the show to go out there and give it a go. Thanks for coming on and talk to you again soon.

Johnathan: Awesome. Thank you very much.

Thanks to Aaron Cooper for transcribing this interview.

Back to top

Listeners feedback:

Getting a feel for accessibility

Our first contribution is from Kenneth and is about accessibility:

I listen to your podcast all the time and am working hard to become a very good web designer. My question for you is about accessibility, I hear a lot of people talking about it but not a lot of web designers are working hard on it to create sites that disabled people can use. I want to be a person who builds accessible sites that really work. How would someone know if their site is really accessible? How can you feel what disabled people are feeling when they visit your site? Could you talk about the different tools that disabled people use to go online so that we can use those tools and try to understand how they feel.

Okay. Let’s start by clearing up a minor point. Validation is not directly related to accessibility. Having a site that validates does not make it accessible. Equally, a site that does not validate is not necessarily inaccessible. Admittedly a site that validates is more likely to be accessible, but that is all. It is great you validate your code and you should continue to do so. However, it is okay if your site does not always validate. There are good reasons why Boagworld does not and I am sure the same is true for Clear:Left.

Let’s turn our attention to the heart of the question; how can you better understand the experiences of disabled users? It is an admirable aim but one that ultimately is impossible to achieve. There are so many different types of disability that you cannot associate with them all. That said, I can make a few suggestions which might help.

A good place to start is by trying out a screen reader. Increasingly screen readers are bundled with operating systems. Recent versions of Microsoft Windows come with a basic Narrator, while the Mac OS includes a more feature-rich screen reader called VoiceOver. However, the most widely used screen readers are the separate commercial products like JAWS for windows. This is probably a good place to start as JAWS offers a free trial version for you to experiment with.

However, be warned. When you first use a screen reader it is an intimidating experience. They take a lot of getting used to and can leave you with the impression that a blind person will never be able to use the internet. An alternative would be to watch a demonstration of a screen reader in action. Ian Lloyd did an excellent demonstration for Boagworld a while ago.

Of course not all visually impaired users are blind. Some use screen magnifiers which enlarge screen content. Again, most operating systems have this functionality built in so you can easily try this for yourself. However, there are also a number of commercial products you can try out too.

The other form of visual impairment worth investigating is colour blindness. Although not as serious, it is far more common and affects a large number of users. There are a couple of tools which will give you an idea of what a colour blind person is seeing. The first is Colorblind Web Page Filter which allows you to enter a url and see what that page would look like to a colour blind user. The second is Sim Daltonism, a colour blindness simulator for the Mac OS. Both will help you better understand what the web is like for colour blind users.

The final little tip I want to share with you is kind of stupid but does sort of work. I do a lot of design for the elderly and they often suffer from a mixture of visual problems and motor issues (like arthritis). In order to better understand their experience I have bought a pair to ski gloves and some reading glasses (I don’t need reading glasses). Every now and again, I surf the site I am designing wearing both the glasses and gloves. The glasses make the screen hard to read while the gloves hamper my use of the mouse and the keyboard. There is nothing more frustrating than trying to select something from a drop down menu wearing ski gloves!

Turning problems upside down

Our second listener contribution for today is not a question but a tip. It comes from Jeremy and he writes:

I can’t remember the name of the book off the top of my head (Getting Things Done?) that you’ve been recommending, but you mentioning it reminded me of a problem solving method that I learned a few years back that I thought you might enjoy. It’s called turning the problem upside down. It sounds stupid, but honestly it works pretty well.

The principle behind it is if you can’t figure out a solution to a problem or are having trouble coming up with different ideas, you turn the problem upside down, or invert it, and then come up with solutions for the backwards problem. For some reason it’s much easier to think of the backwards solutions. Then you flip them back to normal and there are your solutions. Sounds confusing, so here’s an example:

Problem: You want to increase traffic to your website

Turn the problem upside down: You want to decrease traffic to your website

Some ‘off the top of my head’ Solutions:

  • Make the site unfriendly
  • Randomly shut it off
  • Never update anything
  • Be rude
  • Keep key content hidden or difficult to find

Now let’s flip the solutions back again and see if they solve the original problem:

  • Make the site more warm/friendly
  • Make sure it stays up reliably
  • Be good about frequently updating content
  • Be aware how of my copy and if I’m talking down to my visitors
  • Make sure the good content is easy to find and prominent

What a great little tip! Excellent when you are suffering from creative block. I love it when you guys send in suggestions rather than questions. I know from the forum that the boagworld audience is hugely experienced and its great when you share that experience. Keep them coming!

129. Conferences

Posted in Classic shows on by Paul Boag

This week’s show sees the return of Ryan and Stanton, holding the fort while Paul and Marcus sun themselves on holiday. .

We’ll be talking about taking your first steps into the world of conferences and answering your questions about font smoothing and browser emulators

Download this show.

Launch our podcast player

News and events

Release of Firefox 3.1 Alpha

Last Wednesday saw a new developer release from the Firefox team. Firefox 3.1 Alpha, or “Shiretoko” is now available for download. Shiretoko is built on a pre-release version of the Gecko 1.9.1 platform and introduces several new features for you to play with.

  • Web standards improvements in the Gecko layout engine
    • They don’t actually say what improvements, so I guess we’ll have to trust them with this one but from what i can gather, they’ve added a lot more CSS3 selectors like :nth-child, the CSS3 “word-wrap” property, CSS3 columns, text-shadow, box-shadow, border-image and more.
  • Text APIfor the <canvas> element.
    • This is a quite detailed API for drawing vector text within the canvas element, and is sure to set the hearts ot typophiles beating just a little bit faster.
  • Support for using border images.
    • The design community has been screaming for this for as long as I can remember, the ability to specify images as borders. The whole rounded-corner craze might be slightly out-of-style now, but I’m sure we’ll see some innovation with this feature very soon.
  • Support for JavaScript query selectors.
    • Now I’m not completely down with the javaScript kids, so I apologise if i don’t get this quite right. But the query selectors seem to be a way to target specific selectors instead of having to filter a result set provided by the getElementsByTagName() call, you can now do the filtering before you execute the query.
  • Several improvements to the Smart Location Bar.
    • When you start typing a URL, Firefox starts giving you options to choose from, you can now filter those results while you’re typing.
  • A new tab switching behaviour.
    • Pressing Ctrl+Tab now gives you a filmstrip style overlay which lets you quickly navigate to your open tabs, and mimics the similar feature in most operating systems nowadays.

The alpha is available from the Mozilla Developer Center.

A List Aparts’ 2008 Survey

It’s that time of year again, the A List Apart team have unleashed their 2008 survey “for the people who make websites”. The survey gathers a massive amount of information, with around 33,000 people taking part last year and covers a wide range of questions covering all aspects of our beloved industry.

The survey covers everything from Age, Gender and Geography to Education, Employment, Vacation (holidays to the rest of us) and those oh-so-important salary details, how many hours worked and your methods of staying upto date with what’s happening in the industry. The data gathered is compiled into a comprehensive, yet easy to read report, and they also provide the raw (anonymous) data so you can do your own number crunching if you so wish.

You can also have a look at the 2007 survey results if you wish, and Paul and Marcus will no doubt be covering the results of this years survey when they’re published. So this is a call to arms really, help improve this survey by taking part at Alistapart.com. We took part, so should you!

The Future of Web Font Embedding

The last news item is a blog post by Richard Rutter on the future of web font embedding. With both Safari and Firefox supporting web fonts in their 3.1 releases, and development releases of Opera, it could be time to start playing with web fonts.

Richard starts by defining web fonts as using the @font-face rule to point to regular TrueType or OpenType font files on a web server, this is to clear up any confusion with Internet Explorer’s proprietary web font support with uses EOT font file, which is also a way to wrap the fonts in DRM, which i think might severely hamper any efforts to bring web fonts into the mainstream.

The font foundries and type designers seem to view web fonts as the death of their industry, insisting that their revenue streams will be destroyed by piracy and free font embedding, rather than seeing this as an opportunity to really boost their industry.

There’s nothing to say that the @font-face rule has to point to a locally hosted font file, The opportunity exists for the font providers to host the fonts themselves, and charge for their useage. This saves us, as designers, from having to install fonts on the machines we design on, and will undoubtedly allow us to choose from a much larger selection of fonts which can be switched quickly and easily.

Back to top

Feature: A Year on the Conference Circuit

This week’s feature has stemmed from a listener who asked “which conference would I suggest for a first timer”? And “how difficult is it if you don’t actually know anyone there”? Having attended a couple of the big conferences this year I thought it would be useful to share my experiences.

Back to top

Listeners feedback:

Font Smoothing

Steve Writes: I have been listening to your podcast. I really like it.

I jusr want to ask a question. On mac, the fonts seem to be all thicker than windows. What setting are u using? I’ve been using best for lcd. Today I changed to automatic, and the fonts were much thinner. It looks more alike with windows fonts.

Do you think this is a big problem for mac users? Since the fonts will look different. Which setting do you think is the best for web designer on macs?

The difference of Mac fonts compared to their Windows counterparts originates from Apple’s legacy in desktop publishing and graphic design, the fonts are rendered in a way which would give a closer approximation to how they would look when printed.

Mac’s use a specific font wrapper called dfont, this contains extra information to preserve certain features like font outlines and hinting which can then be rendered more accurately on-screen meaning that in general, fonts look better on a Mac, whichever smoothing method you choose.

If you’re a designer, I’d heavily recommend testing your design in as many different browsers as possible, but also on different operating systems as well. I work primarily on Windows Vista (don’t shoot me) and have a dualscreen setup, my second screen can be flipped over to my Mac where I can test in Safari, Firefox and Opera on Mac, I also run a Ubuntu system to test in. Rather than running a standalone IE6 build on vista, I run a full XP virtual machine with IE6 running natively as I just don’t trust the standalone builds.

One of the main things you’ll have to accept is that your design might not look identical on any combination of browser or operating system, and because you’re probably designing websites to be viewed by other people, I’d recommend keeping your font smoothing to the default setting of “automatic” which is most likely going to be the case for your target audience.

Browser Emulators

Andy Asks: Hey guys. Been listening (on and off) for a while now and love the show.

I was wondering if there is such a thing as a browser emulator, software that allows you to see your site as it would appear on IE, Firefox, Safari, Opera, etc. If there is one, is it total crap and not really work.

The answer to your question is yes, there are several websites that can provide you with this type of service.

One of the more popular sites is Litmus which is an online emulator that validates your HTML and CSS as well as presenting you with a screenshot of your website loaded in up to 23 different browsers across various operating systems. It can also provide you with a report of any compatibility issues it has come across. However there is a fee to get any real use out of this service.

What Litmus does it actually does very well; however there are a couple of major draw backs I’ve found:

  • You can’t have an interactive experience – Not all issues can be seen from a screenshot and more often than not you need to just take your mouse and navigate around the site to find problems.
  • You can’t test javaScript – You can’t see javaScript animations from a screenshot.

As Paul said in the previous question, there’s no substitution for the real thing, which is having multiple setups with multiple browsers installed. However that’s not always a viable option especially for freelancers working from home who don’t have the budget (and space…) to have several machines and licenses for operating systems needed for testing, in which case sites like Litmus are invaluable.

My advice is if you can test on the real thing, do, if you can’t then take a look at Litmus.

Back to top

A Year on the Conference Circuit

Posted in News on by Paul Boag

don’t feel like you’re going to be out of your depth when attending one, there isn’t a test at the end or anything..

This week’s feature has stemmed from a listener who asked “which conference would I suggest for a first timer”? And “how difficult is it if you don’t actually know anyone there”? Having attended a couple of the big conferences this year I thought it would be useful to share my experiences

Ah conferences, how we love thee. Conferences are a fantastic mechanism for networking and learning, wrapped up in a nice little bundle along with a steady supply of tea and Danish pastries.

Conferences I can personally vouch for are Future of Web Design (organised by Carsonified) and @media (organised by Vivabit), which both have quite different “feels” to them in my opinion.

Future of Web Design

FOWD is a one day conference, with no food (food is very important at these things), but is very affordable at around £150 (not including the workshops).

This year’s conference was chaired by non other than Paul Boag himself and featured guest speakers like Patrick McNeil, Andy Budd and Daniel Burka. The Carsonified guys seem big on networking, they organised a before and after party for the conference with substantial tabs behind the bars. It was a great opportunity to mingle with the attendees and speakers pre and post conference.

@media

@media is a two day conference with excellent food; however it’s more expensive at around £500, although @media runs two tracks (primary and secondary) of presentations which obviously means twice as many speakers and is in general a much larger event than FOWD. This years @media saw the appearance of speakers like Jeffery Veen, Jonathan Snook, Dan Rubin and Andy Clarke. In contrast the Vivabit guys focused on the learning, a longer conference, with more speakers and a modest after party in the lobby on the final day.

Cost

I compare prices of these conferences only because expense is always a consideration, and when you’ve taken into account accommodation, train tickets etc, the old credit card is often left quivering in your pocket but expect to pay on average, around £150 per day for the big conferences.

Speakers

Arguably the most important part of any conference is the quality of the speakers. And both FOWD and @media didn’t disappoint in this regard, Andy Clarke even spoke at both. Speakers’ reputations often precede them and it’s a simple matter to research the event before hand to see if the people talking are the people you’d like to hear from.

Everyone’s in the Same Boat

One thing that is universal about web design conferences is the friendly crowds they attract, it’s good to remember that everyone is there for the same reasons and it’s easy to drum up conversation and find mutual ground on a topic you have in common with someone else. The general advice is to just go and say hello! And that goes for introducing yourself to speakers as well. They’re not the kind of rock stars that disappear behind a curtain at the end of a show! Most of them can be found mingling with the crowd at the end of day looking for people to talk to just like you. In fact I can’t remember if it was Jonathan Snook or Dan Rubin who said to me “It would be nice if more people came up to talk to them.”

Still to Come This Year

The year is not over yet, there are plenty of conferences still to come:

And likely many more.

Conclusion

In conclusion there isn’t a conference for beginners as such but it’s safe to say that these types of conferences are deliberately aimed at a broad audience to make them accessible to as many people as possible. So don’t feel like you’re going to be out of your depth when attending one, there isn’t a test at the end or anything.

As for not knowing anyone, it up to you to be sociable, introduce yourself and don’t be shy, if you’re struggling, go stand near a crowd and invariably someone will turn around and start talking to you.

By Ryan Taylor (Thanks to Paul Stanton for the title)

128. Details

Posted in Classic shows on by Paul Boag

On this weeks show I’m accompanied by our Producer Ryan and Researcher Stanton. We Interview Dan Rubin on the Details of Design, and answer your questions on managing a bigger team and terms and conditions.

Play

Podcast: Download (23.0MB)

Download this show.

Launch our podcast player

News and events

Silverback Launches

This week has seen the release of Silverback, the highly anticipated app from the guys at Clear:Left. After months of speculations about what Silverback actually was, the “spontaneous, unobtrusive, usability testing software for web designers” is finally available for download.

We’re sure a majority of you know all about Silverback, but for those of you who don’t, Silverback, which is available exclusively for the Mac, is Clear:Left’s answer to convenient usability testing on the go. Utilising the iSight and screen capture facilities of the Mac, user’s experiences can be recorded and reviewed at a later date, taking away the costly and often difficult to setup up approach of using specialist equipment like multiple camcorders which can lead to hours of time spent trawling through video footage.

PatternTap

Whether you’re a designer or developer, there are many occasions where you go on the hunt for inspiration in interface design. Normal CSS Gallery sites give you great examples of full site design, but usually don’t focus on the small details of interface design. The only site i’ve ever been aware of is Christian Watsons “Elements of Design“, which is a great resource showing examples of elements like comment forms, calendars & date pickers, footers, image captions and so on.

There’s a new site I’ve come across this week called PatternTap.com which also wants to collect these design patterns and focus on specific elements of design and to help you to reference, collect and organise them for your own needs.

PatternTap is shaping up to be an absolute goldmine of inspiration, and looks like it will build into a large resource of design element exmples. There’s currently 46 collections, everything from 404 pages, audio players, pagination and search boxes. It let’s you create your own “lightbox” style user sets, so you can keep your favourite examples organised for future reference.

I’ll definitely be adding this to my toolbox of design inspiration links, and recommend you give it a look too.

Google App Engine Update

This week also sees the release of a small update to the Google Apps Engine. The Google Apps Engine allows developers to build applications on Googles own infrastructure. I have to admit that the Google Apps Engine is not something I’ve developed with personally however that doesn’t stop us talking about it so let’s run through the list:

  • Firstly you can now have up to 10 apps on your account as opposed to the previous limit of three 3, the Engine also limits developers to 1000 files per application, so the increase in the number of apps you can now have is a welcome addition.
  • Time windows for Dashboard graphs: Zoom in on the data in your dashboard to get a more accurate picture of whats going on. You can zoom in to see graphs for the last 24, 12, and 6 hour periods.
  • Log files can now be downloaded in plain text.
  • And finally you can send email as the logged in user: If you’re using the users API, you can now send email from the email address of the currently-logged-in user were as before it was only possible from the administrators account.

S3

So some of you may be aware that Amazon’s S3 service suffered from some 6 hours of downtime recently, this echoes the issues of service availability that happened back in February.

For those of you who don’t know, the S3, or “Simple Storage Service” is a scalable and inexpensive data storage infrastructure, which allows you to store and retrieve any amount of data.

So this is a fantastic idea – in theory, it means that if you’re developing a large website or web app and need lots of storage, you don’t have to pay for huge webhosting plans with lots of physical diskspace, you store your assets “in the cloud” as it were, and you’re charged based on how much storage space you, and how much bandwidth you consume.

Lots of large sites rely on the S3 service for their storage needs, Twitter, BaseCamp and SlideShare to name but 3 and the recent downtime has raised the age old issue, “are we putting all our eggs in one basket?” Jonathan Boutelle put it best in a recent blog post, stating “When S3 goes down, the internet goes down”. Aral Balkan also wrote recently urging people to have contingency plans in case events like this happen again, stating that the Open Source Google App Engine SDK could be the answer.

Back to top

Interview: Dan Rubin The Details Of Design

Paul:Joining me today is Dan Rubin who I recently saw at the @media conference. Good to see you or speak to you again Dan should I say?

Dan Rubin:Good to speak to you Paul.

Paul:It was good to meet up with you at @media. It feels like a long time since we met up and it was great to hear you speaking there. That was a first for me.

Dan Rubin:Thanks. It was a privilege to be able to help out Patrick it being very last-minute.

Paul:Oh was it?

Dan Rubin:He sent me an email about two weeks prior saying someone had dropped out and of course I wasn’t going to say no.

Paul: laughs

Dan Rubin:It’s been over 10 years since my last trip to the UK, so it was a great opportunity.

Paul:Cool. Well I have to say considering you only had two weeks to put together the presentation, it was truly phenomenal. It was an excellent presentation and I really enjoyed it. You were talking about ‘design is in the detail’ I guess was the kind of subject you were tackling?

Dan Rubin: I’ve been talking a lot lately about the level of detail, the attention to detail and the design and I’ve done a couple of presentations with Brian Veloso over the last year on that same kind of topic. This was an extension of that injecting some of my own little personal preferences into the talk and got to cover things like typography and some of the simple practical things that you can improve very easily that result in a big improvement and typography, and little tricks in using grids, not on how to make them but how to actually implement them and how they can help workflow and bring things together and make layouts tighter and better without
that much effort and the same thing with digital transformations in photography and a lot of pixel detail that a lot of people don’t notice and its all about the subtle level of design.

Paul:I got this vague feeling that as you were talking you were a little bit appologetic for some of these manushi that kind of individually you sit there and go ‘how is anyone going to notice that?’, but accumulatively they have this effect on the design don’t they?

Dan Rubin:Well that’s the thing. It comes down more to feeling than seeing but its about as a designer what you feel with your eyes more than anything else and how that translates to what users or viewers or readers also feel but since they don’t know it is there, they are likely to never actually see it, but as a designer you’ll know it is there, you can see it, and the trick is to get it to the point of you can still see it but it is not really visible it is just felt.

Paul:A subconscious expression?

Dan Rubin:Yes.

Paul:You covered loads of tips in your presentation and there was some excellent stuff in there but if you had to pick out one that has the biggest impact on a design, which of the many things you talked about would that be?

Dan Rubin:I think what it would be is to really underscore trusting your eyes and it seems a really simple concept and whenever I put that up on the screen you get giggles from the audience. The truth is many of us don’t actually take the time as designers to just step away and look at what we’re working on. It doesn’t matter whether it is for screen or print. The medium is a material at this point and it is just having faith in what you see and what you feel. That’s what being a visual creative is all about. It is trusting what you see. It is the same as being a good musician comes down to trusting what you hear and sometimes we forget that, and we start getting into designing based on the rules or how we think we are supposed to do things or designing on technical limitations alone. When we do that we stop using our eyes.

Paul:It’s interesting in the presentation you talk quite a lot about some of the details and the mechanics of design. You were talking about font sizes going incrementally up, your heading and your sub headings and there being a mathematical relationship in their sizes. You talked about being consistent in your margins and padding and how all those things inter-relate. Are we saying that design is something that can be learnt and it is a mathematical thing and it’s a set of rules that you just adhere to? Or is there some sort of underlying artistic thing, some people just know how to do it and it’s not something that can be learnt. What’s your opinion on it because I get mixed feelings from you? On one hand you talk about these rules and on the other hand you talk about stepping back and looking at your design and it feels more kind of arty-farty if that makes sense!

Dan Rubin:What a load of questions and rightfully so! It’s something I’ve written about before years ago and had a bit of back and forth on the topic with Paul Scrivvens of 9 Rules, with him arguing that you don’t need any natural artistic ability because he didn’t think he had any, yet he was clearly doing things that looked good. I was arguing the opposite but when it comes down to it it’s really not something that you can say definitively either way. Just as there are people who naturally seem to be good musicians or good athletes or good at math and programming, there are people who seem to naturally be good at design and any kind of creative endeavours. It is really difficult to tell whether that seeming innate ability has come from something that happened in very early childhood development or if they were born with it. I do think that however difficult it is to put a finger on it, once you get old enough, especially to the point w here probably most of your listeners are doing what your doing for a living already or you are thinking of changing from one thing to another, you’re past that point of subconscious development where you need to put conscious effort into something and you can. I think you can be trained to do most of the things designers do. You can even train yourself to see the way that creatives see. The older you get the harder it becomes to incorporate into the way you view the world. That is a big part of it. That comes down to sometimes the different personalities. How hard is it to put a finger on what makes you ‘you’. I would say as a teacher, and I spend a lot of time teaching high school students over here about music as well, since that’s my other passion, and it’s specifically not just playing music but it’s specifically singing which is one of those things that you can either carry a tune or you can’t. I’ve also seen kids who can’t carry a tune when they start singing learn how they train themselves. They learn the proper muscle memory, and it’s amazing to see what people can actually accomplish when they put their mind to it. If you are listening out there and you want to become a better designer or maybe you’re not a designer and you’re a programmer or a web standards junkie, and I can say that because I am one too, and there isn’t any reason that you can’t become a better designer, or become a designer from scratch if you realy really want to.

Paul:I think that’s really important to say because I think so many people are intimidated from getting involved in design because there’s almost a bit of snobbery. If you’re not artistic, you’re not artistic there’s nothing you can do about that. I personnaly don’t believe that that’s true. Like you say I think there are some people that are naturally inclined that way but I think a lot of the principles that you were talking about in your presentation pretty much anybody can pick up on and do, which is what encouraged me so much hearing you talk.

Dan Rubin:That is one of the reasons why one of the reasons I say one of the most important thing is to trust your eyes and that’s instinctual. These rules, as a good teacher you have to teach these rules. When you start learning any discipline the first things that you are taught are the basics.The basics are things that many people, once they learn enough, don’t conciously think about, but what you find if you deconstruct their work is that they are doing them, they have incorporated into their flow into their process so it’s second nature to them. What we think of as instinct is really just experience.

Paul:Yeah. One of the things you did mention in the presentation that grabbed my attention is you talked a lot about texture and adding more texture to your design and about how that creates a real feel. There seems to be a slight skism, I don’t know if that is the right word, but like 2 different camps in design at the moment. People like yourself, Elliot Jay Stock is another example that does very rich, very textured design. It’s absolutely gorgeous. At the other end of the extreme you’ve got people like 37signals doing this minimalistic functional design. How do you feel those two sides fit togeth
er? Is there a role for one or the other or have they both got their place

Dan Rubin:I really think that both have their place and more than that it’s popular to create divisions. Not just these days, if you look at any industry that spends a lot of its time looking at itself, like we do, you start to find reasons to create little clicks within it or factions or what have you. If you just ignore those splits that happen because we spend way too much time looking at what we do and try to deconstruct it and answer that question of ‘why’. What you find is that it’s all the same thing. When I talk about texture it is important to understand that it doesn’t just mean rough or ??bulap or brick. Texture can also mean smooth and polished and speaking directly about 37signals for instance. I’ve used their apps and I’ve loved them since the first time they came out. If you look at the first versions of Base Camp and Backpack, before their incremental re-design they’ve actually added the little drop shadow over time. If y ou look at it as a designer you see the flaws in the way they’ve done it because it doesn’t look real and it just ends at some edges, it has hard edges, but that’s not the point. The point is they added it because it created a separation, they added it because they felt it needed it. The rest of the interface doesn’t need any other texture because it isn’t supposed to have a feel to it. It’s actually supposed to totally get out of the way and there are different approaches to minimalism. You can use minimalism in subtle detail where you add in things like I was showing in my presentation, or you can use minimalism where you keep taking away and 37signals apps feel right, they always have felt right to me so as far as I’m concerned that means they’ve hit the nail on the head. It shows when you see people trying to recreate the application interface and theat style that 37signals uses and they get stuck in this pattern of adding things, like they feel ‘well, that’s 37siganls l ook so I think we have to add things to make it better, to make it better, and they never work as well because it’s not just about that. So the answer is, and I try to underscore this when I talk to people about this or present about it or even write about it, as much as these things can be presented as rules and definitive this is the way to do something. the fact is you have to do what works best for you and your particular project or circumstance or situation, and you also have to be open to the fact that what works for you right now might change. It might be different next year, next month or next week, and being able to adapt to your situation as a designer specially is really important, because you have to adapt if you’re doing client work, you have to adapt from project to project, because your style might work for one client but you might need to tweek your style to do what’s best for another client. If your working on your own applications, what works for your users now might not work for your users once they become users that have used your app for a year and they’re experts now.

Paul:You talk about tweaking your style. How easy is that, do you think, to do in reality? I mean I’ve got a very strong style in my design, and I really struggle and I look at someone like Cameron Moll’s style and I just love it. I love the light-handed feel, he’s very delicate, beautiful design, and I wish I was more like that, but there is no way I can make myself become like that, or can I? Is there a way of changing your style?

Dan Rubin:I think we’re all naturally mimics. I’m not going to dig into my opinions on human adapability too much. I spend a lot of time thinking about that as far as evaluating how people use things, whether it’s interfaces or products and it’s interesting to start to see those patterns but you can see it on a global scale too. Historically human beings are species very, very adaptable and that happens on macro and micro levels. If you want to adapt your style you can. You look for the inflences you want to model yourself after. This is just how people learn to be designers when they’re starting out, or learn to be artists. When I took my first watercolour and oil painting classes when I was 11 or 12, the way we learnt was to recreate examples that were painted by masters. So learn how to use the brush strokes they use, to learn how to mix colours the way that they use them, to learn how to use the tools the way that they use them becau se you only discover your preferences and your style by mimicing, copying others. You find out what works and you decide what works for you and what doesn’t. So changing how you design and how you see is not necessarily easy, because at a certain point you’re reprogramming muscle memory and from my experience with singing I know how difficult that is to do. Once muscle memory has been built up to the point where you don’t think about it and you just react, it’s very difficult to break that down and re-build it. Difficult does not mean impossible.

Paul:That’s really interesting that you say that because I’ve always very much struggled to design in any other way than I already do, but I obviously need to push myself in this area. Talking of 37signals, I’m sure you have been following their recent post and various reactions to it about skipping Photoshop, and how they move straight into building with HTML and CSS and I just wondered what your opinion was on that.

Dan Rubin:I know I’d get roped into this discussion somehow. There has already been some great responses from people like Jeff Croft and Mark Boulten to the 37signals post on that, and even interestingly enough a follow-up post sourced by 37signals announcing that they were looking for an additional designer for their team that can push them into different directions that they havent been going naturally. That comes back to the whole adaptability and willing us to change and being open to it. In the argument itself I can’t say I always start in Photoshop or Fireworks or some sort of visual tool. I think Jeff said 37signals starts with a visual tool, it’s pencil and paper. I think even if your tool is a marker on a whiteboard to a certain extent everybody tends to start there, even if you don’t start there you start with a picture in your mind. So there’s some level in the process where a visualisation is occuring, if that’s fair to say. When it comes down to it why does the tool that you’re using to visualise really matter? It starts in your head if you’re a primarily visual person you can either realise that vision by programming it and seeing it in the browser or using Photoshop as a tool. All of these are just tools when it comes down to it, they’re not the end result. They’re just part of the process. I’ve done both. I’ve built straight from XHTML and CSS many times and I do tend to find that most visual designers that have weighed in on this conversation also find that in my opinion the result ends up being more simplistic. that’s not necessarily to say bad. It’s just different and you’ll find that the tools that you use as a visual creative influsence the end result because that comes down to constraints. 37signals of course is huge on constraints and you do save time when you’re doing straight HTML and CSS, you skip a lot of the temptation to play around like I know I do with layers and layer setting s and percentages of opacity. I spend a lot of time playing when I’m in Photoshop, I don’t think that’s bad. That’s part of the creative process when using that tool. When I used to paint which I havent done in way too long. I would play with my
palatte, when I was doing oils my palatte and my palatte knife was tool before I got to the canvas, and I would play with mixing my colours ‘and that’s not quite right’ and ‘wait and go over here’ and sometimes you get it onto the canvas and it doesn’t look the way you want it to and have to wait for it to dry and then you paint over it because that’s what you do with that tool. When you’re doing watercolours you don’t have that forgiveness of the tool, you have extra constraints, so you don’t experiment as much putting it on the paper, putting the paint to paper because you know once it’s dried and there you can’t go back. you can’t paint over it. So you adjust your style depending on the tools and the workflow and it’s all good, it ‘s just all different and you have to I think do yourself a favour and experiment to find which works best for you and don’t be afraid if you’re working on a project and you think ‘this doesn’t feel like it needs a lot of subtle gradients and lines and shadows and Photoshop work. I might just be able to build this without using Photoshop at all’. So do it if it feels like that will work best go that route. If you feel the opposite go the other route. If you feel like it should involve a lot more natural media pull out your watercolour pad and paint something and scan it in and incorporate that

Paul:It really down to the right tool for the job thought process.

Dan Rubin:Exactly. The thing that 37signals does really well is stick to their guns. They state their opinion so firmly that people can easily interpret it as law and I think that’s very important. In any industry it’s very important to have people who do that, who can stick to what they believe so strongly and apply it so universally that it creates this set of rules, but it doesn’t mean that they have to be followed or cant be partially followed or bent or broken and you find just as much as 37signals is enfatic about skipping Photoshop. There are other people who would never in a million years go straight to HTML and CSS, doesn’t mean that either camp is right.

Paul:OK. One last question just to wrap this up. We’re running out of time but there’s something I wanted to ask you which is: We’ve been already talking about that there are people that may be want to learn to be better designers, to find their style and to move into this area, perhaps they’ve been a developer background and they’ve been previously put off exploring design because they have been made to feel inadequate. What kind of resources would you encourage people to look for or look at in order to get going I guess?

Dan Rubin:Whether you’re starting from scratch or just trying to improve what you already have it’s important to touch on a couple of specific areas, and those are typography, layout and working with colour. This applies just to design because it’s worked whether you’re designing on the web or designing in print or branding or whatever you’re doing. Typography is kind of my first love with design and if you want to learn about typography you have to go out and buy ‘The Elements of Typographic Style’ by Robert Bringhurst. It’s the bible for typographers. It’s really easy to read too because he’s a well respected Canadian poet as well. He just happens to be an excellent typographer and book designer, so if you are in a rush, you cant get to the book store or Amazon right away Mark Boulton’s series ‘Five Simple Steps To Better Typography’ is a great place to start as well and he references a ton of other good resources. Start there if you a re going to start online but no matter what buy ‘The Elements of Typographic Style’. When it comes to layout there are a lot of things that you can learn about layout but you’ve got to learn about grids, even if you never use them. Do yourself a favour of learning and I’ll reference Mark again, actually I’ll reference Mark in all three of these. He’s got great starter tutorials about this stuff so ‘Five Simple Steps To Designing Grid Systems’ is really a great place to start. Cameron Moll has written about Griding The 960 and read up over on Khoi Vinh’s site about grids. ‘Grids Are Good’ is a great demonstration as well, and if you want to get a physical book to hold ‘Grid Systems In Graphic Design’ is a great, great phyisical book and I think it’s important to as web designers to also reference ‘Print’, because Print is where all these design rules come from and typography rules and colour rules, so learn from these different implem entations and you’ll figure out things that you can do that you didn’t think about, because you haven’t seen them on the web. So ‘Grid Systems In Graphic Design’ is by Josef Müller Brockmann I believe would be the pronounciation, look that up. Colour, and this is something that’s very preferential maybe but read up again Mark Boulton’s ‘Five Simple Steps To Designing With Colour’. He’s great at teaching, he’s great at communicating all these things. Also play around with some of the online tools like Adobe Kuler, is fun. Look at what other people are putting together, look at combinations, again feel is important. Whatever feels right for what you’re trying to do. Another cool tool is Colorjack. You got a couple of ways of mixing colours and it’s really, really cool to look at. Finally on the topic of colour whenever using colours in an interface please be aware of the different types of colourbl indness that exist, and there are lots of tools online. Photoshop CS4 will have some tools built in as well but there are plug-ins that you can get right now for all sorts of tools and online tools as well that allow you to see what you’re designing, or even just a colour palatte. See them through the eyes of someone that has these various colourblindness afflictions and make sure that whatever you do doesn’t render something unuseable to what ends up being a large percentage of the viewing public when it comes down to it.

Paul:WOW !! That’s a good set of resources !! My word.

Dan Rubin:You didn’t think I’d be that prepared did you?

Paul:That’s a superb list. I certainly didn’t know about all those posts from Mark Boulton. there was some great stuff in there – Thank you very much Dan. Just to say that Dan’s talk at @media will be no doubt going live at some point and you’ll be able to download it and listen to it. Definitely do that, it was superb. So check that out. You will be able to go the shownotes for this episode for all those links that will be useful as well. No doubt you won’t be able to remember them all. Dan thanks for coming on the show, it’s very much appreciated and we will get you back on in the future.

Dan Rubin:Thanks very much for having me Paul. It was a pleasure.

Thanks to Sarah Galley for transcribing this interview.

Linkage

You can find Dan Rubins site, Superfluous Banter here.

Typography
Layout
Colour

Back to top

Listeners feedback:

Managing a Bigger Team

Jon asks: We are a company of 4 people – myself (owner, design lead and general business development/project management person), one designer, and 2 developers.

We are hopefully about to merge with a slightly larger company in a neighbouring town who have slightly more staff than we do (7 in all), and who have more of a project management structure – 2 project managers, using the services of 1 designer, 3 developers, and 1 designer/developer. I would end up as owner/MD of the enlarged company.

My question is really about project management? What do you think is the best organizational structure for a company of 11 people? I was feeling pushed on the project management side before this merger came along, and the merger will bring 2 project managers with it. How does Headscape do it for example – I think you have project managers there – do the designers and developers report to project managers, or do the project managers pick from a pool of design and development resource as required? What are your thoughts generally on the whole project management side of things.

A-ha… this is part two to a question I answered a few weeks back relating to pricing work after two companies merge. I wanted more detail at the time and now I have it!

Comparing to Headscape, we have 4 designers, 4 developers, 3 project managers, 2 business development/analysts and 1 lazy good-for-nothing called Paul … seriously though, Paul effectively markets Headscape and I have to say he’s rather good at it (ungrits teeth…)

Following the merger Jon will have a team of 11. As he is new MD, I think it is imperative that he much reduces the design and PM aspects of his role and concentrates on bringing in business as there are quite a few more mouths to feed.

That leaves roughly 3 designers, 5 developers and 2 PMs. Depending on the work you’re doing I think that is ok especially considering Jon can bolster both the design and PM groups if needed.

Regarding the allocation of work, project managers should rule the roost. Full stop.

It is their job to manage resources. Delivering projects effectively and on time means that they must know that they are in charge regarding who does what and when they need to do it by. A certain amount of fitting the right person to the job should be done but generally, the rule should be that the next piece of work goes to the next available person. This would be particularly useful advice in a merged company where it would much easier to keep going back to ‘your’ guys because you trust them.

One thing that has worked really well for us is to set invoicing targets for the project managers. We don’t operate performance related targets but it still really helps to focus minds on hitting milestones at the end of months.

Terms and Conditions

Adam writes: I am developing my own web application. In summary, it’s a site with user submission of content in a social networking format with video uploads. Anyone can register an account.

I of course have to try and write Terms of Service for this and I am getting stuck. I am wondering what Headscape uses, especially for Getsignoff, and whether you found a pre-written terms of service, or had a specialist write one.

What’s your solution to the problem, and what should / should not be included.

I have to confess to conferring with Headscape’s fount of all legalese knowledge on this – our MD Chris Scott. I tried to get him on the show but he’s still a little jittery after the last time all those years ago… anyway, Chris put together the TOS for Getsignoff and these are his thoughts on it:

For Getsignoff I looked at the TOS of other online services like Harvest, Basecamp, Youtube and Flickr. I’m not a legal person, but this gave me enough material to be able to identify the key issues that I thought we needed to cover in our TOS.

I assembled this into a brief for our legal adviser that was part overview of what we wanted to achieve and part draft TOS using adapted clauses from other TOSs.

Our legal adviser pretty much re-wrote what I had given him but this was from a position where he had a good understanding of how we wanted Getsignoff to work.

The bottom line with this sort of thing is that you really need to get a professional legal person to assist.

Back to top

 

127. Context

Posted in Classic shows on by Paul Boag

In this week’s show we discuss taking context into consideration when designing websites and we answer your questions about video for an elderly audience and the most influential books in the industry. 

Play

Podcast: Download (21.8MB)

Download this show.

Launch our podcast player

News and events

Working from home

The first post this week appears on A List Apart and applies to a growing number of people in the web design business. That is because it is tackling the subject of home working.

According to the home business report (PDF) published in October 2007, home based business account for 28% of all employment and have a combined UK turnover in excess of £364 billion.

No doubt that percentage is even higher among web designers. Therefore it comes as no surprise that this subject is being increasingly written about in web design circles.

This particular post is written from the perspective of a home working mother. However, her advice applies to anybody consider working from home. This advice includes:

  • How to draw the line between work and home
  • How to isolate yourself from the rest of the family while working
  • How to explain to your client the screaming child in the background of a conference call
  • How to win clients that are understanding of your situation

If you are already a home worker, I am not sure this article tells you anything you wont have already learnt the hard way. However, if you are considering making the switch for whatever reason this is definitely a worthwhile read.

British Standard for accessibility

Some time ago the British Standards Institute and the Disability Right Commission teamed up to release the first formal guide for business on website accessibility entitled PAS 78.

PAS 78 was intended to be a web accessibility guide, aimed at website owners rather than web designers . Personally I found the result somewhat disappointing. Although the advice was solid the language was hard going and it referred too often to the WAI guidelines. Although these guidelines are superb they are too technical for most website owners.

However, despite my personal opinion the document has proved very popular and is now being converted into a full British Standard. A British Standard is a common standard used across a variety of products produced in the UK. Although anybody can claim to meet these standards without external review, it is possible to be officially certified. Once certified you can display a BSI Kite Mark. This is a symbol of quality universally recognised in the UK.

Personally, I think this is a much better route for web accessibility to take. The alternative is legislation and that carries with it numerous problems. The team working on the standard is excellent and I look forward to seeing the result.

Growing your business through twitter

The next post solves an embarrassing problem I have. When sitting in the pubs with my mates, they occasionally catch me twittering. It is particularly embarrassing because I cannot really explain why I do it. Fortunately now I can thanks to a post from Tiffini Jones at Blue Flavor.

Actually the truth be told, Tiffini’s post refers heavily to another by Elliot J Stocks a few months earlier. He suggests that twitter is:

  • An ice-breaker
  • A purveyor of "ambient intimacy"
  • A broadcasting / marketing tool
  • A fount of knowledge
  • A social network

Both posts communicate well the power of social networks if used wisely. This has certainly been my experienced and without tools like Twitter this site and podcast would have been nowhere near as successful.

I know a lot of people look down their nose at twitter. They claim it is a time waster, unprofessional and dull. However, I think they are missing the potential. I believe that networking tools like Twitter will in time diminish the role of search engines. Increasingly people will turn to online contacts for recommendations about products, services and information, rather than relying on the algorithms of Google.

Smart CSS aint always sexy

My final article today, demonstrates a sea change in the web standards community. It is a controversial article on the Digital Web Magazine entitled Smart CSS aint always sexy CSS.

The article challenges some of the basic arguments of standards zealots. For example is it so bad to name a class ‘red’? Do we need to pursue semantics at all cost, even when it compromises performance or maintainability?

This seems to be representative of a growing group of designers calling for a more pragmatic approach to web standards. Increasingly I am seeing little examples of rebellion against the more extreme supporters of standards. Whether it is the posts of Jeff Croft or the twitterings of Andy Clarke, it would appear there is the beginning of a more grown up approach.

Does this mean we can throw away good practice? Not at all. It simply means we are mature enough in our knowledge to bend the rule sometimes. Before you can paint like Jackson Pollock, you first need to know how to paint traditionally.

The morale of the story is that if you are new to standards then you should stick to the rules. However, if you are more experienced, there is nothing wrong with making compromises from time to time.

Back to top

Feature: Content is dead, long live context

No, content is not dead. Yes content is important, but there can only be one king and I am beginning to wonder if it is context in this weeks feature.

Back to top

Listeners feedback:

Video and an elderly audience

Steven writes: I am currently working on a website that is going to be targeted toward an older demographic. There seems to be a large disagreement on whether video should be included on the site. The site is quite in depth and video explanation could be crucial. The main argument seems to be that people might not have the flash player and in turn not be able to view the video. On the other hand the Adobe site says that market penetration on flash player is over 99%!? Is flash video a usability issue?

One of the largest clients Headscape works with is trying to reach an elderly audience and so I have put some thought into this issue already. Unfortunately as with all of life, it is not a straight yes or no answer.

I see no reason why you cannot use video on your site. Although I do not believe Adobe when they claim flash has 99% penetration, I do believe the vast majority of your audience will have it installed. In my experience those who do not have flash are those behind a corporate firewall.

Although you can expect the vast majority to have flash I don’t believe you can design solely for it. The elderly develop visual, physical and cognitive c
onditions that can make it hard to interact with flash in some circumstances. Although a well designed application can minimise these problems, it will still affect a significant number of users.

I am afraid that although you can use flash, you will have to also provide an alternative. This could either be in the form of a transcript or captions (depending on the nature of the video), but additional work is required.

Most influential books

Teifion asks: What are the two most influential books you have read. Not just for web design but work and life in general.

I think this is possibly the hardest question I have ever had to answer. Choosing just two books has been horribly difficult. In an attempt to cheat slightly I have changed the rules to reflect BBC Radio 4s Desert Island Discs. This means I get the Bible and the complete works of Shakespeare for free! My choices are therefore…

  • Getting things done by David Allen – I know I have spoken endlessly about this book before but that is because it has had such a profound impact on me. It is an easy book to dismiss with statements like "I don’t need to read it because I am already organised" or "it just tells you to write lists". In fact it is about a lot more than that. Getting things done has made me radically rethink my life and what I spend my time doing. It has made me question my priorities and change what I spend my life doing. Yes, I do write a lot of lists now and yes I am more organised but that is not what I got from this book. It taught me to take control of my life and decide what I want to achieve.
  • Designing with Web Standards by Jeffrey Zeldman – I bought this book entirely by accident and yet it set my entire career in a new direction. Before reading this book I was feeling uninspired and stagnant in my career. I was bored with web design and felt that I had gone as far as I could. Reading this completely re-inspired me and introduced me to the web standards community. Without this book I doubt I would still be doing web design and certainly wouldn’t be doing this podcast or speaking around the world. Thanks Jeffrey!

Content is dead, long live context

Posted in User experience on by Paul Boag

No, content is not dead. Yes content is important, but there can only be one king and I am beginning to wonder if it is context.

The more I consider context the more I recognise its impact on every aspect of a website. Context affects design, usability, accessibility and content. Its influence is profound, and yet it is largely ignored by many web designers.

But what is context when applied to a website? Its actually hard to define. It is easier to think in terms of the users context while access your website. Understanding this context affects how you design a site.

We put a lot of emphasis on user centric design. We believe that understanding users is important. For example, we believe in carrying out user testing. However, think for a minute about the way we do this. We bring the user into an artificial environment (such as a usability lab). We remove them from their normal context.

Equally when we create personas they focus on demographics (age, sex, job etc) rather than their context. We miss a crucial part of the jigsaw.

So what is the users context? I have identified 5 aspects that form his or her context. These are:

  • Environment
  • Device
  • Comfort
  • Mood
  • Time

Let’s look at each of these in turn.

Environment

Environment refers to a number of factors including location. The kind of information a user wants to access is dependant on his or her location. For example somebody planning a weekend break using their PC at home, will want information on hotels and attractions. When they are actually on their break and using their mobile phone, they are more likely to want information on the nearest pub or the opening times of a museum they want to visit.

Location does not just affect content. It can also affect design. Viewing web content outside will mean battling with sunlight and so high contrast is required. Alternatively, you do not want to be dealing with fiddly form elements while being jostled at a train station.

However, environment is not just about location it also includes distractions and surroundings. For example a mother of three toddlers may find it hard to concentrate on a complex survey, with the children demanding her attention. Equally a user accessing the web from a library is not going to appreciate audio suddenly playing on your website.

Environment also defines the type of device we use to access the web. This is another aspect of context.

Device

Although location and the device often go hand in hand (you tend to use a PC at home and a mobile while out), this is not the only affect device has on context. The device also determines the input methods available.

Few mobile phones come with QWERTY keyboards. None come with a mouse. You can access the web via games consoles like the wii. These generally rely on gamepads, remotes and on screen keyboards.

Different input devices should radically affect the user interface. Not only do each of these devices alter how you interact with the system, they also alter how you view the information.

Typically PC users are sitting close to their monitor and viewing at relatively high resolutions. Games consoles are normally attached to a TV where you sit much further away and the resolution is lower. Mobile devices have a lower resolution still and the viewing position is different again. This all affect the design of your website.

Talking of viewing position, the other factor that needs considering is the users comfort.

Comfort

How physically comfortable a user is affects the length of time they will interact with your site. Although you cannot know whether your target audience is comfortable or not, sometimes you can make an educated guess. For example, if you know your users will be accessing your site via a kiosk in a shopping mall, they will probably be standing and not stay long.

Comfort is to a large degree dictated by environment but not entirely. It can also be dictated by physical conditions. If you are launching a site aimed at those who suffer from back pain or weak bladders, do not expect them to spend a long time on your site!

In some ways comfort is also closely linked to our next factor, mood.

Mood

There is no way we can predict the emotional whims of our audience, but they do have an affect on attention span. Those who are busy or stressed get irritable with a site quicker. They are likely to give up and walk away. Conversely those who are relaxed muddle through and are more tolerant of bad design.

It is important to consider the likely temperament of your users. For example, business executives are likely to be less patient with a site than a pensioner siting in his villa in the south of France.

Environment, device and comfort can all have an impact on mood. However, the biggest influcening factor is time.

Time

It is obvious that the time available to a user affects how long they spend on a site. However, we often do not take this into account when designing a site. Unnecessary form fields and key content buried deep within your site, are just 2 ways we ignore the time constraints users operate under.

Online banking is a good example. It is so complex to login to my account that it is quicker to pick up the phone. With time being a valuable commodity users will often choose a competitors site because they can get things done faster.

Of course, in reality there is a lot of overlap in these facets of context. However, I have yet to read much about context that isn’t directly related to mobile devices. Hopefully I have demonstrated that context applies to all the work we do and not just to mobile websites.

Lessons from the O2 failure

Posted in User experience on by Paul Boag

I don’t want to start ranting about the debacle that was upgrading via the O2 website, from my iphone to the iphone 3G. However, there are a couple of things we can learn about good site design from their mistakes.

Like most of the British population (or so it seemed) I tried to upgrade my first generation iphone for the new iphone 3G. Following the instructions I received from 02 I went to their website and then spent the next 2 hours battling to place my order. This horrendous experience raises some interesting points.

  • Load test - If you are expecting shit loads of people to hit your site at the same time then run some loading testing against it!
  • Don’t cause a panic – Announcing there is limited stock and that you are going to sell on a first-come-first-served basis is going to cause a rush.
  • Provide alternatives – Don’t force users into only purchasing through a website. Allow them to purchase via phone or store too.
  • Keep it simple – The whole process could have been streamlined. Adding a text message as a method of authentication was unnecessarily complicated and caused problems.
  • Avoid AJAX – On a site that is going to be hit by heavy traffic, avoid using unnecessary AJAX. It was impossible to jump to the appropriate place in the process. Instead I was forced me to start from scratch each time the page hung.
  • Use cookies – By using cookies they could have saved me considerable time entering my information again and again.
  • Clear messaging – Despite completing the process I am unsure of whether I have an iphone coming or not. The site needed to make it clear whether an order had been successfully placed.
  • Error handling – When things went wrong with the site it didn’t respond elegantly. Some carefully written messages could have cleared up a lot of confusion.
  • Better labels – One label asked me if I wanted a bolt on package. It didn’t explain what that package was or what answer was required. It just gave me a blank text box. What was I supposed to type into it? Should I leave it blank? Why was it a text box and not a dropdown menu? Was this the reason my submission was failing?
  • Email confirmation – It would have been nice to receive an email confirming or rejecting my order.
  • Waiting list – For those who failed to place an order before the product ‘sold out’ there should be an alternative. Never turn a customer away. Either offer the chance to pre-order with an estimated delivery date or at give the change to register to be informed when new stock arrives.

Update: Alex made some excellent additional points in the comments and I wanted to mention them here too. He added to my already extensive list:

  • Get a CDN or virtual servers – If you’re expecting a lot of traffic in a short time, look to share the load. Think about placing your critical functions (such as an online shop) onto a platform that allows you to deploy additional servers on demand (often called Virtual Private Servers) – such as Amazon S3 or similar. If you can’t change onto something like that – you can still help your server by moving images, CSS and javascript onto another server, or even a CDN. A Content Delivery Network (CDN) is a network of servers that contain copy of your key files to help spread the load.
  • Have a backup plan (or have two!) -
    If you have something really high-profile, have a backup plan, or two! In this case, O2 DID have a back-up plan… they had a ‘failover’ site… which was a simple one-page form to take down customers details. The only problem was it didn’t work when it needed too… it failed too!
  • Brief your call centre -
    Knowing that some customers were likely to experience trouble accessing the site (or even just getting confused placing an order), you should make sure that you brief your call centre staff – put on extra staff and make sure that they can take orders too, and know what to do.
    When I called O2′s customer services, they couldn’t offer any help as ‘upgrades were online only’. Additionally they couldn’t check if my 3 times I put my credit card details in were registered (they weren’t as it happens).
    If all goes wrong… the call centre is your last line of defense, and O2 dropped the ball here too.

Update 2: Well, the iPhone 3G has now launched in the UK and O2s website continues to fail users. This time Apple was forced to turn away customers from their stores because they were unable to register them with the O2 site. The reason why: The O2 website would only work in Internet Explorer. This provides us with yet another lesson to learn…

  • Build for your audience – Consider who your target audience is and what requirements they have. In particular consider their accessibility need to make sure you never turn away people wanting to give you money.

All in all it was badly handled and I am pissed off. Can you tell!

Copy with personality

Posted in Site content on by Paul Boag

Too much of the copy I read on websites is bland and uninspiring. Its time to add some personality.

If your website was a person what type of person would it be? Is it young idealistic and carefree or a portly middle aged business man that likes to play golf on the weekend?

The chances are it is neither. In fact it probably has no personality at all. It may have pretty graphics which set a tone, but it is the copy that should add the character.

Unfortunately most online copy is a mixture of various styles and tone. Website owners simply do not consider what personality their copy is communicating.

However, copy doesn’t need to be this way. Let’s look at three examples of great writing.

Lynx shower gel

Photograph of Lynx shower gel

For my shame I buy Lynx shower gel. This is surprising because their product is aimed at teenage men (something I have long since stopped being). The copy on their bottles reflects their audience and definitely communicates a very strong personality; that of an oversexed young guy desperate to get laid…

Want skin she can’t wait to get her hands on? Lynx Smoothing Shower Scrub with cactus milk exfoliates and energises your skin to keep her coming back for more.

I particularly like the way they refers to ‘cactus milk’ rather than Aloe Vera. Aloe Vera is mentioned a lot in women’s beauty products and that is not at all appropriate for this image conscious male audience.

I want one of those

I want one of those is a website that sells a variety of gadgets and gizmos. It is trying to project a fun, light-hearted persona full of ideas and great things to do. Its copy reflects that.

Waboba Ball

Take for example the Waboba Ball that they sell. Basically it is a plastic ball you throw around in the sea. There is very little to say about it but that doesn’t put off the copy writers on this site…

Named after the rare and sacred Waboba goat found only in the high Annapurna (not sure there’s a low one), this ball, whilst devoid of hooves, hair, horns and questionable eating habits, is just like a goat, and even bounces on water just like a goat does. Hmmm. Perhaps it isn’t named after the goat after all, we just looked up goats and it seems that they tend not to bounce on water, or anything else come to that. The Waboba Ball however miraculously does bounce, a lot. This brilliant invention is what larking about in water was invented for. Forget lobbing plastic discs at each other in the pool or at the beach, this hackey-sack sized little monster bounces off the water like you wouldn’t believe.

Genius. What it lacks in real selling points it makes up for in character.

Innocent Smoothies

Package shot of innocent smoothies

Innocent are masters of good copy. Their packaging is a work of art from the “stop looking at my bottom” message on the bottom of their bottles to the “enjoy by” notice rather than the normal “Use by”. Their website too has some gems of good copy that simply oozes personality…

We were wondering if you’d like to join the innocent family. Don’t worry – it’s not some weird cult. It’s just our way of staying in touch with the people who drink our drinks i.e. you. Every week we’ll email you our news and give you the chance to win lots of drinks. We’ll also invite you to nice events like the innocent village fete and maybe send you the odd present if you’re lucky. Finally, we’ll very occasionally ask you what you reckon we should do next, as we sometimes get confused.

Its self deprecating, its friendly and most importantly it draws you in, pursuing you to keep reading.

So what about your site? Admittedly the above examples are all fairly light hearted and friendly. Not all websites want to communicate this type of personality. However, all organisations should demonstrate some kind of personality through its copy. Its time to decide what that personality is.

122. Screencasting

Posted in Classic shows on by Paul Boag

In this weeks show we have Ian Lloyd discussing Sitepoints HTML reference and we take a look at creating screencasts.

Play

Podcast: Download (28.7MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Typography everywhere

This week has seen a plethora of posts about typography. There is an article about changes being made to typography in Firefox 3, a post dedicated to working with paragraphs and some future developments in CSS 3 fonts. Combined with the growing support for embeddable fonts, it would appear that web typography has a rosy future.

Although all of these posts are interesting, I feel we are not making use of the typographic tools we have already. I have learnt a huge amount by reading what people like Richard Rutter and Jon Hicks have to say on the subject. For example how many of you…

  • Ever change the default kerning
  • Really get specific in your cascade of fonts
  • Consider vertical alignment
  • Think about the relative sizing of our various typographic elements

The list could go on.

Many web designers choose to ignore web typography because it is so restricted. However, this will soon change. We need to learn to walk with the basic tools currently available before we run with what is to come.

Accessibility cheat sheet

Our next story follows on nicely from last week’s feature in which we addressed accessibility quick fixes.

Aaron Baker has written an accessibility checklist aimed at designers and developers who know little about web accessibility. The idea is that by simply referring to the list during development they will be able to avoid the major accessibility issues.

Aaron is the first to admit this isn’t an ideal solution. He also accepts the checklist fails to cover everything. However, in my opinion he has done a damn good job at making the accessibility guidelines… accessible!

What I like most is that he also provides a PDF version that prints out as a single page. Instead of having to wade through pages of W3C guidelines you can print out a single page and pin it to the wall. Ideal for those starting down the road of accessibility.

Does this mean we can ignore WCAG? Absolutely not. However, this is certainly an easier starting point for those who are intimidated by the subject of web accessibility.

Advice on wireframes

We are having an interesting discussion within Headscape at the moment. Where does the job of an information architect (IA) end and that of a designer begin? When it comes to wireframing in particular, the line is blurred. A wireframe is often produced by the IA but can strongly define the layout and design. This reduces the designer to skinning a site, which is a real waste of their skills.

I was therefore excited to read the first in what will be a series of posts on wireframing. The author identifies exactly the problem we have been struggling with and talks about page description documents. These documents differ from traditional wireframes because they do not endeavour to establish a layout. Instead this is left to the designer. A page description document focuses on identifying and prioritising content. It is then down to the designer to represent this on the site.

It is an interesting approach and one that I think has a lot of merit. However, I am equally excited to see the other posts in this series, where the author promises to show us example wireframes and provide more details on his approach.

Top five tips for new web designers

The final news story of today is an unusual choice as it comes from our own forum. Our forum is always full of great threads, but one in particular caught my eye this week because it covered the most common question I get asked; ‘what advice do you have for a new web designer?’.

It is not a long thread (yet!) and so is easy enough to follow. However, each poster has provided some excellent advice in the form of their top 5 tips.

The tips include…

  • Advice on business
  • Techniques for improving your skills
  • Areas to focus on
  • Books and sites to read
  • What to learn first
  • How to increase your profile

Without exception they are all gold dust and if you are new to design then definitely give them a read.

Equally if you have been a web designer for a few years take a moment to post your own contribution. I think you will probably learn something at the same time.

Back to top

Feature: Creating Screencasts

Video is becoming an intrinsic part of the web and not just dumb ass videos on YouTube. Video can be used to show off products and provide online presentations. But how do you create a high quality screencast on a budget? We look at this issue in this weeks feature.

Back to top

Interview: Ian Lloyd on Sitepoint HTML Reference

Paul: OK. So joining me today is Ian Lloyd. Hello Ian.

Ian: Hello Paul!

Paul: Have we had you on Boagworld before or is it just .Net?

Ian: Erm… Actually never in real life person. I did the video thing for you before, the screencast.

Paul: Yeah. That’s it. I knew there was something.

Ian: I’ve heard my dulcet tones before.

Paul: Yeah but not on a live, real, happening interview type basis.

Ian: Is this happening? What as in cool, hip and happening? Wow.

Paul: This is happening right now! So there we go. That’s exciting. So the reason I have Ian on the show today is that he had just undertaken and completed a mammoth project no less, in the form of a HTML reference guide that is now available via SitePoint. Now we’ve talked before on the show about the CSS reference guide but the HTML one is a new project that is beta at the moment. Why have you showed a beta tag on it? Come on, put your money where your mouth is. Commit to a real live version!

Ian:Well that’s not really my shout in fairness but I think the reason they do it is that with all the will of the world and all the technical editing that goes on and all the rest of it, invariably there’s going to be things that will crop up.

Paul: I was always under the impression that you were infallible Ian.

Ian:Well I would to keep that myth going but it’s obviously completely untrue. But no, I think it’s sensible. From what I can gather they did this with the CSS reference and they told me that they did get some good feedback as a result of doing this. So it gives them an opportunity to capture anything that has so far evaded various editing stages. There are little things that you can easily, easily miss. So it makes sense. Put it in front of a whole bunch of pedants and you will find that things will be revealed that you weren’t aware of.

Paul:Yes certainly. So tell us a little bit about how the project came about. How did you end up working on this from SitePoint and how you get involved?

Ian:Right… Well it’s actually quite a long story that I’ll try and shorten down. Basically I’ve got a bit of history with SitePoint. It goes back to probably 2001/2002, something like that where I was writing articles for them. I had written a few and they had been scored quite highly. At the end of 2003, I took a year out of work.

Paul: Ah I didn’t know… Yes I did know that.

Ian:While I was travelling around the world I made it my business to try and call in on people that I knew from the web. You know, you’ve part of the world so I’ll pop in and say hello. That’s what I did with the SitePoint guys. I was in Melbourne for a while so I thought I’d pop in and say hello. So we did lunch and I was having a chat with one of the guys there who was saying “Oh, have you ever thought of writing an accessibility book?” and I was like “Oh, I don’t know. I don’t know if I’ve got a book in me. It seems like a lot of work.” But not long after that I was asked if I’d like to do some tech editing and I thought “Yeah OK, I’ll do that” and I actually did it while I was still travelling around Australia in the van. So that was actually quite easy to do, wasn’t too bad at all. And then what happened is that when I got back to the UK I was asked “Do you want to write a book?” and this is the beginners book you have reviewed in the past on the show. So it’s kind of been an escalation from there really. So there was that book and I did a couple of bits and pieces for APress and then not so long ago I got the call back from SitePoint saying “Do you want to do this HTML reference?”. At the time I thought “I don’t know. I’m not sure. Does the world need another HTML reference?”. But I kind of thought that when I did the first book, and that’s done pretty well and I’ve had some really good feedback, so I though “Well, let’s think about this. Maybe it’s worth doing”. In my mind I convinced myself that this wouldn’t be a difficult thing to write…

Paul: *Laughs knowingly*

Ian:See you think you know HTML. You think you know it because you use it everyday and I though “Well how difficult can it be?” compared to say the Javascript reference they were writing. There’s a million and one ways you can approach something with Javascript where as with HTML there’s a finite number of elements or tags, whichever you prefer to use, that you can use in any given scenario so you think it’s pretty straight forward isn’t it. That’s what I thought anyway and I was also thinking in terms of browser compatibility the bigger problems come from the CSS you put over the top. That’s where you get all the quirks happening. So I thought to my mind, “Yeah this isn’t going to be too difficult a job”. But I think I underestimated it.

Paul:Is that not always the way when it comes to any kind of project like this that it always ends up being loads bigger than you thought it was going to be.

Ian:I think it actually surprised me how much more work there was involved. I don’t know if you did that little test a little while ago that was one of those things everyone was sending around, how many HTML elements can you do in 2 minutes or something. Everyone was having a go at it. You think you know quite a lot but then you realise there’s so many more you didn’t know and there was so many that I vaguely remember and but probably would never use. That was the funny thing, writing about these elements where I think “Well, that’s that one done. Never going to use and nobody’s every going to read it either but it’s got to be covered.

Paul:So with the CSS reference guide that they produced they have now turned it into a book. Are they intending to do the same with this? Is that the plan?

Ian:Absolutely. And that was the other strange thing I thought “This is kind of a strange business model. They are going to put it on-line for free but also gonna do a book. Will people actually buy a book?” But I’m sure they don’t do these things without doing the research first. I’m pretty sure they’ve got a good idea on what they’re doing with this. I never went into it thinking I’m going to make millions out of this because it’s never going to happen. Anyone who’s written a book, yourself included…

Paul:I’m still witting so I’m still in that naive state of thinking “Yeah, it’s going to sell hundreds of thousands of copies and millions of copies and I’m going to be rich”. So don’t shatter it.

Ian: Sorry Paul.

Paul: Just say how much money I’m going to make.

Ian: Oh yeah, you’re going to be rolling on a bed of money. You’re not going to know what to do with the stuff.

Paul: Excellent. Wonderful. Great. I’m looking forward to that. *laughs* So basically it’s gonna turn into a book before too long.

Ian: Ah yes.

Paul:You mention that there were some things in there that you thought “I’ve written this but I’m never going to use this and probably no one else is as well”. I noticed there were a couple of sections in there dedicated to depreciated HTML tags and stuff that people actually shouldn’t use. That’s a bit of an unusual decision isn’t it – to put in stuff people that people actually shouldn’t be using. Why take that route?

Ian:Well the thing is because it’s a reference you have to include everything. So everything that is in the W3C approved recommendation, everything in there is included. Even if it’s as much use as a chocolate teapot it has to go in there. And that includes the deprecated tags but there’s also things that are included such as blink or bgsound or marquee that were never actually defined in any standard but because they have almost universal support, not all of them have the same level of support, but basically there’s a lot of elements out there that were never defined in the standard but are well supported. So the decision is this has to go in there, we can’t deny it’s existence. It may not be something that anyone would want to use but as it’s a reference book we should include it. There were some that we didn’t include that I can’t remember off the top of my head what they would be. Things that were perhaps defined in Netscape 4 and just are not supported in anything and given that Netscape 4 is dead and gone a long time ago, there were some things that didn’t make it in. But the reason for having a second index that said “Here are some elements that you shouldn’t use or should avoid or these are deprecated ones” was really a case of saying that we’ve got this index of all these things and I don’t want anyone to think that because it’s in the index that it’s necessarily approved. So I wanted to kind of pull them out and say “It’s in the reference but actually we don’t really you to use those.”

Paul:Which are the worse culprits? Which are the ones you think that people are using a lot and they really, really shouldn’t be? Your chance now to lecture people and preach to them about their bad HTML.

Ian:Well strangely enough I don’t actually see a lot of them used now. I think probably the most common is people using the bold and italics, the <b> and the <i> tags, when really they should be using strong and em. Then again the b and i tags do have their place but they are usually misused. Thankfully the kind if things that I wouldn’t want people to use, you don’t tend to see much nowadays anyway like the blink, marquee or bgsound that was always a pet hate of mine. You’d visit a site and then suddenly you’d get some Indonesian Gamelan music blaring through that was set in a bgsound. I was kind of thinking it’s good that this is gone but if you go to any page on MySpace and they’re replaced it with something that has got sound in Flash. So yeah, that may have gone but they have replaced it with something equally annoying.

Paul:Now there’s a little question there. You say that bold and italic have got that place. How is it supposed to be used? Educate me as to the proper use of those two.

Ian:Well if you what you are actually marking up something that describes something typographical. So if you are putting the b tag around something because you are describing it as bold. So it’s that kind of context. I use in the examples on the reference it’s like I’m describing a sign of something like that. So there are reasons when you use it but generally speaking when people are using it is when you want emphasis or strong emphasis. In most cases what I would end up using would be strong and em because that is what I’m normally trying to do, emphasis.

Paul:What other kind of bad practice have you been seeing? What are the things, not just with specific tags but general bad practice, that are your pet peeves when it comes to HTML? What things are people doing a lot that just piss you off?

Ian:Like I said earlier, because of the kind of sites that I tend to look at I don’t actually stumble across too many coding sins because that’s kind of the circles I’m in I suppose. The funniest thing is when you see your own mark-up from years ago and I’ve just had to do this for something at work where I’ve taken on a reworking of something written 10 years ago and I’m like “Oh my God. This is awful”. It had been duplicated 5 times instead of one file with the logic inside that one file. So it was like “Hang on. I have to do this five times over?”. But it was nice to go back and see something that was old and table layout and all the rest of it and give it a good clean up in the process. So yeah, it’s funny when you look at your own mark-up and think “I’ve moved on”.

Paul:Even when you just look at what you learned from when you started doing standards to when you’re doing it now. I look back on the early standards work I did and it’s all div-tastic. There’s just divs everywhere.

Ian: Oh yeah. But there’s no meaning to the document as such.

Paul: Yeah. No meaning whatsoever. It used CSS so it must be alright *laughs* Which obviously doesn’t quite work does it in reality but there you go.

Ian:I guess the kind of thing that I really see a lot is just general sloppiness. People not closing tags when they’ve said they are using XHTML or unsymmetrical opening and closing. Those kind of things. Probably the first thing is missing alt attributes for images which is such an easy thing to put right but I see it so often. I guess probably the worse offences come from the kind of people who probably have never looked at a reference and may never look at a reference so I don’t know that this would solve the problems. And by that what I mean is people who would never actually get their hands dirty in the code. They’ll be using things like Frontpage, Word. You know – save as HTML in Word. You just want to beat them over the head with a large reference book. I don’t know if those kind of people are beyond hope. Maybe we we’ll be there at one point who knows. Maybe they are not beyond saving.

Paul: Nobody is beyond hope.

Ian:Funnily enough, I was saying about the Frontpage thing. It’s quite shocking I was looking at the program for a local college evening course and out of curiosity I flicked through to the computing section to see if they were doing any web design courses and
yay, there were. How To Build A Website and it was a seven week course, how to build a website using Frontpage. And it was like head slap, what are they doing?

Paul: Ah. That’s amazing that people are still doing that.

Ian: Shocking. So yeah. It’s not going to go away in the short term still.

Paul:When you were going through this reference, putting it together, was there a tag that you came across that you thought “Why don’t I use this more often? That’s an underused tag.” For example, I’ve just suddenly started using definition lists more.

Ian: Paul, you’ve taken the words right out of my mouth. That’s exactly what I was going to say.

Paul: There you go then.

Ian:That’s exactly one of those things that I don’t tend to use an awful lot myself but there are certainly uses for it. When we did this quiz thing that we were talking about earlier, I did with some people at first. So few of them had actually heard of definition lists. It was like “What is this markup of which you speak? What is this dl? What is this dd?” They had never heard of it and it surprises me but, I don’t know, maybe it shouldn’t be a surprise. You see list items used absolutely everywhere but it seems to be a bit of mystery to people. So that would be one that people could use more often and I’d certainly like to see people use them more often.

Paul:Umm. I’ve found it really useful. It’s surprisingly how many of the things, for example a news story where you have a title and then the description underneath the news story. There’s loads of examples like that where there are these paired matchings that suit a definition list so well. It’s a cool tag, if a HTML tag is capable of being cool which is probably doubtful.

Ian:There are some others as well which I would certainly like to see people use more often and they’re not ones that I don’t use, I use them all the time. Things like the accessibility specific type ones like for forms: label, fieldset and legend. I’d like to see them used more often. To some people this is something that they still don’t get. Of course in general, using the proper semantic markup. As you’ve already mentioned sites that are div-tastic. Stick a couple of headings in there and some unordered lists and already you’re starting to give your document more structure.

Paul:So talking about semantics and all that stuff, I noticed that you have a section dedicated to Microformats. Microformats aren’t really part of the W3C specification so why did you decide to include them?

Ian:Because it’s really cool. Yeah, it’s really cool stuff Paul. No, the reason really is because in the process of drawing up the table of contents, looking at all the elements we needed to cover, it became clear that there are certain things that HTML can’t do. Obviously this is not a revelation otherwise Microformats wouldn’t have come about anyway. But it felt right to put it in because essentially although Microformats are still developing they do go through a rigid process of being documented, discuss, ratified and all the kind of thing. So while it isn’t W3C recommendation it feels like it’s controlled. Also it doesn’t really do any harm. You can add this in over the top of HTML. You’re still using plain old HTML but adding that extra richness in without necessarily doing any harm. So it felt like something safe to put in. I guess the only problem with putting something like this in, at least for the printed version of the book, is that as they are developing it can get out of date. At least with the on-line version as things get added and they are adopted, that can easily be added in. It felt like a useful thing to do.

Paul:And it’s good to give Microformats higher profile because I think there are still a lot of people that are unaware of them. So it’s good.

Ian:I was gonna say it is by no means a complete Microformats reference. It really is still a fairly entry level introduction. I mean there are books out there specifically for Microformats. If someone really wants to learn more they’d do better to pick up a book or go to Microformats.org to learn more. Hopefully it would give some exposure to it that perhaps wouldn’t otherwise. And the other good thing about it is because the reference on SitePoint is very, very searchable hopefully by the time that Google’s indexed it you will find people that stumble across that wouldn’t have done otherwise and just from doing a search from inside the site itself. There’s a chance that people might learn about Microformats when they might not have otherwise of done. But we’ll see.

Paul:Bearing in mind that a lot of people listening to this podcast are web designers and you know, they are sitting there going “Well I know HTML”, like we were saying at the beginning that you have this perception that is something you know back to front. So just to finish up with is there a kind of one area that you really want to challenge people over or one piece of good practice that you’d like to push people on where they’re not as hot as they should be.

Ian:Hmmm… That’s a tricky one. I’m obviously aware that the audience of the podcast know a fair amount already. I guess you do have some people that are relative beginners so I’m not entirely sure the advice is appropriate for the audience. But the kind of advice that I would always give is that, and maybe I’m teaching people to suck eggs here, but really it’s so much more useful if you can learn from the ground up. You know, learn the code using really simple tools. I use Dreamweaver a lot, an awful lot, but that’s because I know how Dreamweaver is going to handle the markup. I know if there any little forbals, what it’s gonna do. So it’s very quick for me to use that without causing any real damage. But I wouldn’t really recommend that to a beginner. I’d say learn the basics. Walk before you run. Obviously things like I mentioned earlier – Word and Frontpage. Never, ever dream of using anything like that because they just do an awful, shocking job of it. In essence, HTML is not difficult to get to grips with. What I tend to find is a problem is what you then layer over the top of it. It’s the browser incompatibilities with CSS and obviously with Javascript it can be as simple or as complex as you like. HTML is not massively difficult to learn but it’s still useful to learn from the ground u
p and not let a tool do it for you. I think that’ll be my advice.

Paul:On one hand it’s not difficult to learn but on the other hand I think it’s quite difficult to master, if that makes sense. It takes quite a long time…

Ian:You’re talking about the pedantic kind of… When you start to argue about the fine details about which element is appropriate for this usage and you can get into some debates over some things, yeah.

Paul:I liked the way you referred to it as pedantic. Do you think we’ve gone a little bit overboard with our obsession with HTML and marking up everything correctly?

Ian:I don’t know. I think it’s a good thing that people discuss and try and squeeze the most out of it. But there are some grey areas and you do sometimes think it is a bit limited, hence things like Microformats adding the richness on top of it. But I don’t know. It’s usually good natured, put it that way.

Paul:Oh OK. I thought I was going to get you to say something really controversial that would get you flamed but I didn’t quite manage to…

Ian: What luck “HTML SUCKS!”?

Paul: Yeah like “Just use Frontpage. It’ll be fine man.”

Ian: Yeah something like that.

Paul:OK. Thank you so much for coming on the show and where can people check this out if they want to try out this reference for themselves?

Ian: The HTML reference is at http://reference.sitepoint.com/html and if you want the CSS reference, replace /HTML with /CSS. And I understand that the Javascript reference written by James Edwards aka BrotherCake is still ongoing. So at some part there will be a third part to this reference. So we’ll have all three layers.

Paul:And I have to say I’ve been impressed with what I’ve seen so far. I’ve actually been using the HTML reference believe it or not. In fact I used it yesterday to check something. I can highly recommend it. Much better than that crappy old W3Schools so you can ignore that from now on and use that instead. OK, thanks very much Ian. That was really good and I look forward to seeing you soon.

Ian: OK. Thank you very much Paul.

Thanks to Lee Theobald for transcribing this interview.

Back to top

Listeners feedback:

Can you trust developers?

JW writes: I have been on the buying side of both fixed and hourly projects with lackluster results lately. The process can be quite frustrating for me with some of the following bubbling to the top:

  • Inaccurate estimates both in cost and time
  • A lack of commitment to carry out all agreed items within a scope when it takes longer to accomplish than originally planned.
  • The need to ask for more money when the scope doesn’t change.

Which leaves me asking “How much is the developers “word” worth?”

JW’s email goes on to talk about the differences between fixed price and time and material work. I believe that this is where the heart of the problem lies.

I know many within the web design industry will disagree with me but I advise in my upcoming book to only work with developers willing to agree to a fix price contract.

There are always exceptions, such as when you have found a developer you know and trust. In such circumstances I suggest the complete opposite. However, generally speaking I don’t believe it should be the client who takes the risk for projects overrunning. Obviously, if the scope is changed by the client then additional work should be priced and agreed (once again on a fixed price contract).

Make sure the scope is clearly defined up front even if it delays the project starting. The tendency is to jump right into development work as soon as possible, especially when deadlines are tight. However, this could cause problems later.

Unfortunately, occasionally you will encounter a developer who agrees to fixed price project only to move the goal posts part way through the project. By this stage it is difficult to walk away. How then do you avoid ending up with this kind of developer?

There are two approaches that work well. First, before engaging a new developer ask to speak with a selection of their existing clients. If possible, contact clients independently of the developer. That way you won’t just get fed a tame client who is bound to say nice things.

Second, for larger projects consider separating off some of the initial work into a smaller self contained project. That way you can ‘try the agency out’ before committing to a larger project with a greater degree of risk.

In answer to the original question, I am sad to say you cannot trust a developers word. You have to put safe guards in place and mitigate the risk.

The life cycle of a website

Richard asks: What is the life cycle of the websites we develop as web designers? Do you see it as a short term year / year and a half, or a longer term two / three years? What kind of time period should we expect to wait before being contacted by a client about a potential redesign?

I would like to challenge two presumptions you make in your question. First, you are presuming sites should be redesigned periodically. Second, you suggest that the client has to come to you. In my opinion, neither are ideal scenarios.

I have written before about how, ideally websites should evolve rather than going through a continual cycle of redesign. I do however accept that this decision lies with the client and not yourself. Nevertheless I would encourage you to work hard at persuading the client of the benefits this approach brings. This serves both your interests as a web designer and those of your client. Throwing out all previous work on a site every couple of years is lunacy and totally unnecessary.

I also have to say that you are doing your clients a disservice by simply waiting for them to contact you. It is your role to continually suggest ideas on how their site could be improved based on emerging innovations.

We offer our clients the opportunity to regularly meet with us (free of charge) to discuss their site and where they should go next. This encourages them to think in terms of evolving their sites. It also ensures the sites do not stagnate and die.

Not that this approach is completely altruistic. By speaking with our
clients regularly we ensure they don’t forget us and increase the likelihood of repeat business.

Do we always take this approach? No. Some clients don’t want us continually pestering them. Some simply cannot afford to move their site forward. In this case we take a more passive role, encouraging them to read this blog or just ‘keep in touch’. However, this is the exception not the rule.

So to answer the original question; I would argue that the life cycle of a website should ideally be indefinite, as it evolves and changes overtime. This happens through a partnership between agency and client.

Back to top