The plight of the in-house designer

Posted in Web strategy on June 19, 2008 by Paul Boag

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

I last worked as an in-house designer/developer over 8 years ago, so I don’t feel I can really comment on the subject. I therefore enlisted the help of the boagworld forum and dug out various emails I have been sent over the last couple of years. I also picked the brains of Paul (our researcher) and Ryan (our producer) to compile 10 quick tips for improving the lot of in-house staff.

1. Coding with others in mind

The general consensus seems to be that as an in-house coder it is important to consider the next guy. Whether you are working as part of a team or as a lone developer, sooner or later somebody else will have to pick up your code and work with it.

Two techniques were suggested for coding with others in mind. The first was to carefully comment all of the code your produce and if appropriate even create supporting documentation. The second was to have a library of reusable code so that all work produced is consistently marked up. That way it can be passed around the team easily.

Personally, I believe this is good practice whether you are working in-house or not. Certainly Headscape use an extensive library of HTML, CSS and Javascript snippets.

Of course, if you are working alone the need for a library of snippets is less pressing. However, our next problem is a bigger concern.

2. Seeking out like minded people

Many in-house designers/developers are working in isolation. There are a relatively few organisations that can afford a web team. Working alone has two obvious drawbacks. First, it is hard to keep up-to-date with new approaches because you are learning on your own. It is easy to get stuck in a rut, using the same old techniques. In web design stagnation can be dangerous both for your career and for the evolution of the site you are supporting.

Second, it can be lonely. Even though you have other people with whom you work, they do not share your experiences as a web developer. You cannot moan about shared problems or ‘geek out’ on code or typography.

The solution is something we have spoken a lot about before. Make contacts within the industry both online and off. Use tools like forums, twitter, and mailing lists. Offline, look for meetups and conferences you can attend. Nothing in your area? Don’t let that put you off. Setup something yourself. If somewhere as backwards as Dorset has a web designer meetup then there is no reason why your area cannot!

3. A demonstration speaks a thousand words

The feeling of isolation can be exasperated because management often simply fail to ‘get’ what you are trying to do. It can be amazingly frustrating when you have a great idea but you fail to make others see why it is so good.

One solution might be to build a proof of concept or prototype. It is often much easier to convince management of an idea if they can see it in action. Some even spend their evenings producing prototypes as they are not given the opportunity while at work. Personally, I cannot help but wonder whether you should actually be looking for a new job if you are forced to develop ideas in the evenings!

4. Impose some structure

One idea I agree with is that in-house developer you should work within the same rigid structure used by external agencies. Too many in-house teams are treated like a free resource people can turn to whenever they like. This leads to scope creep and (more importantly) to the web team being undervalued.

So what do I mean by a rigid structure? I am talking about things like:

Statements of work
Change control procedure
Client signoff
Project milestones (for both yourself and the client)
Resource assignment and budgeting

These techniques ensure projects run smoothly, limit scope creep and project a professional image to the internal clients improving their perception of the development team.

They are also worth applying no matter how small the job. For example if you have been asked to change some copy on the website always confirm what the requirement is via email. This acts as a mini statement of work. Project management doesn’t need to be onerous to be effective.

5. Encourage internal charging

Of course the best way of making somebody value your work is to charge them for it. There seems to be a general consensus that where possible internal charging is a good idea. However, often this is outside of your control.

If you are unable to charge internal clients there are alternatives. One option is to calculate how much you cost the company per hour. Once you have this figure (even if it is an approximation) you can start to include it in statements of work. List all of the tasks to be done, associate a time with each of these tasks and include the cost to the company for each.

Hopefully this will make internal clients think twice before using up your time. If you want further leverage start submitting a monthly report to management outlining what work you have been doing and the associated costs. Let clients know you are doing this as a further incentive for them to think twice.

6. Be the authority

Another piece of advice that was generally agreed upon is the need to be seen internally as an expert. How you are perceived is important if you want your opinion to be respected.

Avoid being hesitant or negative about ideas because you are unsure how to implement them. Instead research solutions and if appropriate bring in an expert. Using specialists does not undermine your authority. Rather it demonstrates that you can manage a project even if it is bigger than your personal capabilities.

7. Exude confidence, personality and enthusiasm

On the subject of negativity, avoid saying ‘no’. Many internal web teams are perceived as a barrier to be overcome. Internal clients often turn to external agencies in an attempt to bypass them entirely. Once you are ‘out of the loop’ you loose control entirely.

A better tactic than saying ‘no’ is to say ‘yes’ but go on to explain the consequences. Once you have explained the negative impact of a suggestion, be quick to provide a positive alternative of your own.

Be confident and enthusiastic about every project. Avoiding being perceived as the stereotypical geek sitting in the dark barely uttering a word. Ensure you are likeable. If people like you they will listen to and respect your opinion.

8. Broadcast your successes

To further enhance your reputation internally make sure you broadcast your successes. If you launch a new sub-site or feature, ensure you tell as many people internally as possible.

If the company has an internal newsletter or mailing list make sure you write something for it explaining what you have done and why in plain English. Focus on what the project brings to the business rather than how it works and why it was challenging.

Offer to run workshops about the web or give a mini-presentation on web strategy to management. Anything to make you appear pro active and a benefit to the business.

9. Understand the politics

A lot of the points so far relate to company politics. Every organisation has its internal politics and ‘rising above them’ isn’t a realistic option.

One area where politics becomes particularly important is sign off. If you are having trouble getting something approved ask yourself the following questions…

Does my internal client have the power to sign off themselves or is there somebody else I should be talking to?
Who are the people influencing those signing off?
Who are the opinionated trouble makers slowing down the process?

In many cases the person who appears to be the decision maker is not really. They are being controlled by management higher up or influenced by a few vocal individuals. If this is the case you need to speak directly to these people or at the very least give your client the tools to force sign off through.

10. Stick to the facts

Finally, always have facts to back up your opinion. This is especially important if people within the organisation do not respect your opinion.

Facts and figures are especially good but when that is not an option turn to an expert opinion. Quoting an internationally respected author like Steve Krug will generally carry more weight than your own opinion.

That said, remember to explain who this person is and why their opinion matters. You cannot expect the heading of marketing to have a clue who Steve Krug is.

Where an internal client remains unconvinced by an experts opinion turn instead to the weight of evidence. Don’t quote just one expert, quote ten. The shear number of people saying the same thing will impress.

So there you have it. Advice straight from the boagworld community. If you have anything to add, post it in the comments below.

122. Screencasting

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

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

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.

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.

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.

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.

114. Forum

Posted in Classic shows on March 4, 2008 by Paul Boag

On show 114: Should designers stick to designing? What goes into a usability test script, and we talk to Alex Mogilevsky from Microsoft about Internet Explorer 8.

Podcast: Download (32.8MB)

Download this show.

Launch our podcast player

News and events | User testing scripts | Alex Mogilevsky from Microsoft | Listener emails

News and events

Before we look at the news I want to share a bit about boagworld. There is so much happening with both Boagworld and Headscape. If you are interested read my random news post.

However, for now I just want to mention the forum. For a while now the forum has been experiencing technical difficulties. Fortunately that is behind us and I want to encourage you all to check it out.

I can honestly say that the boagworld forum is the best forum I have ever been involved in. Not because of anything I have done, but because of the awesome people on there. They are so amazingly helpful and I have never seen a flame war or newbie bashing.

Please take a few minutes to sign up. Even if you don’t regularly participate, you can at least add your location to our listeners map :)

Instant mobile sites

I want to mention a website called MoFuse.

I have talked before about the importance of the mobile web. With a new generation of internet enabled phones we need to “moblise” our sites quickly.

MoFuse makes the process painless. It takes your RSS feed and tailors it for different mobile devices. For example an iPhone user would receive a different experience to a WAP user.

As well as RSS you can add static pages and customise the design. It is an impressive service and the basic setup is free.

I should stress that this is not an ideal solution. It does not replace a carefully crafted mobile site. However, it is a good starting point, especially if all you want is a mobile version of your personal blog.

And yes, I did create a mobile version of boagworld (m.boagworld.com) that allows you to stream the podcast on your iPhone.

Layout, do’s and don’ts

My next news item is a post by Andy Rutledge on bad layout conventions. He highlights two problems.

The first is three column layouts where the main content is framed by two side columns. Andy argues this creates several problems and demonstrates how things could be improved by taking the Apple store (which uses this layout) and redesigning it so that the two side columns are to the right of the main content.

The second problem is organising different sections of information into long vertical columns of varying lengths. This requires a lot of scanning and scrolling. Again, Andy demonstrates the problem by fixing it on an example site. He uses a horizontal approach where the sections span the width of the page rather than being sorted vertically.

At the same time Andy posted this article, the guys at Web Designers Wall posted some inspirational grid based designs. Interestingly I saw the Web Designers Wall post first and was inspired by the list of sites. However, after reading Andy’s post I returned and noticed the problems Andy has identified. Suddenly my opinion was changed.

I recommend checking out both posts. They will change the way you view layout.

jQuery for designers

At the beginning of the year I said designers should learn Javascript. I have also said in the past that we should avoid frameworks and learn Javascript from scratch. However, Christian Heilmann challenged this assumption in our recent interview.

This week I found a tutorial aimed at introducing jQuery to designers. What I read blew me away. Not only is jQuery small (approximately 29kb) it also reduces the amount of code I need to write considerably. It will quickly earn back those extra bytes.

However, what I love most is that it reads like CSS. To find elements by tag, class or id you don’t use getElementBy as you would in Javascript. Instead you specify it in the same way as CSS using # . and tag names.

Finally, it makes animation easy. You can slide things around, change their opacity and much more. Check out the extensive documentation to learn more.

Although I haven’t used it on a project yet, it is looking hopefully.

Feature: User testing scripts

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

Expert interview: Alex Mogilevsky

Before we get to the interview with Alex it is worth saying that he contacted me a few days after this interview saying that it could be out of date by the time of broadcast. He was of course correct as last night Microsoft announced that IE8 will be standards compliant by default. Although I still do not have a problem with Microsoft’s previous position, I know a number of people disagree with me. It is encouraging to see Microsoft listen to the community and change its approach accordingly. I am sure they will have to endure criticism from other quarters for this decision and we need to encourage them.

Paul:Okay, joining me today is Alex from Microsoft. Now Alex have you noticed how I avoided trying to say your surname there? How do you pronounce it? Ah well I haven’t got a hope have I? I’m doomed. But it’s good to have you on the show anyway. Now it’s really nice of you to come on. We thought it’d be good to get you on the show to talk a little about IE because I understand that that’s what you’re currently involved with. But before we get on to that can you give the listeners a bit of a background as to who you are and what you do and kind of how you ended up being involved with IE

Alex: Uh yeah I’m at Microsoft for about 15 years now and I worked on all kinds of projects from word to publisher and IE now. I first worked on it at the end of A5 so it is my, technically it is my fifth version of IE although the real big one that I worked on was IE 5.5.

Paul:Oh okay.

Alex: I have a reason to not like .5 version (of IE) because that was really a big project for me and I have to explain that it was 5.5.

Paul:(Pauls laughs.) Yeah it may be a .5 version number but it was massive to you. I get the idea. Well obviously um part of the reason that we got you on the show today is to talk about version targeting. But we also want to talk about a lot of different things as well. How you see the browser developing in the future? What the futures of browesers generally is? But let’s kick off with the subject of version targeting. Did you expect the kind of level of reaction that you got off of the back of this?

Alex:It was surpising to see huge negative reaction from people being published. I don’t know there were probably hundreds and hundreds of comments on IE blog. It’s hard to find the positive one. When you talk to somebody who is actually creating content for the web I get a little time to explain the concept is, everybody agrees that well there is some content there, there has to be a way to figure out what the author was thinking when they were creating it. So you should be kind of marking that content with some clue for the browser to render it properly. It is quite amazing to me that people who disagree with version point fingers at Microsoft. That it is totally Microsoft’s thing.

Paul:I mean it’s interesting isn’t it, cause one of the reasons that people said that Microsoft introduced versioning was because there was such a kind of kick back over IE 7 breaking the web, as it has been put. Um Would you think that IE 7 has been perceived as a failure within Microsoft? Many people seem to have thought of it, you know, there is this perception that is the way it is perceived in Microsoft. Is that actually the case?

Alex: Well. It depends on how you define failure. I think from one point of view it didn’t do enough from another it did too much. So go with what everybody ask us. We go and do more standard, and we didn’t get standard enough. It’s not 100% of standard but the little that we did broke so much that we really learned the hard way that we can’t make any progress without doing something about not breaking exsisting web.

Paul:Do you think that with the kind of issue, you know, one of the main comment that I’ve read about the version targeting is the fact that by default um, that you have to kind of opt into version targeting in effect to opt out of it. That by default it will render as IE 7 for time and memorial. Do you think that that’s likely to change before the release of IE 8 or is Microsoft fairly set on that now?

Alex: I don’t think we have any other option. What would that option be, is go and visit every website on the web and opt it out and then carefully figure out which ones are actually designed to work with IE 8 even though they couldn’t have possibly known what it means.

Paul: So do you think that it would be too much of a burden on people out there creating websites, that when they’re seeing a problem and they’re saying why does IE 8, you know, break my website. Telling them to just add another single line of code, you know, do you think that’s asking too much?

Alex: Well I think any assumption like assumes that every site out there actually has a person who understands why it is what it is and is actually capable of fixing them. The vast majority of people publish and they don’t know what a version is. They don’t know if their site is in Quirks mode or standards mode. They look at this as a browser bug. But, maybe there is something that is relying on a bug in previous browsers where old browsers were compatable in being non-standards.

Paul:I’m in agreement. I think you’ve come up, I mean it is a compromise what you guys have come up with, but as compromises go I think it is a very good one. I think it’s much more important to keep the web an environment that anybody can put information up on without having to be an expert in web design. If that means as professional web designers we’re slightly inconvenienced that seems to be a price worth paying from my point of view. But let’s move on from version targeting cause we’ve talked about it far too much on the show. Let’s talk a little bit about the process of developing a web browser. I think for a lot of web designers we’re entirely on the side of, obviously, you know putting things into a web browser. Getting things to render correctly. How do you go about creating a web browser? What’s involved? What should we be aware of?

Alex:Well a web browser is an enormously complicated thing. There is a reason that new browsers don’t show up too much. You have to build at the same time a decent editor, a rendering system that can render almost any kind of text and graphic. It has to be fast. It has to have object model. It has to parse a variety of different things. And is has to be compliant with a standard which is a book of at least 2 or 3 inches thick if you count HTML, CSS, and object model.

Paul:You say that developing a browsers is hugely complex and obviously it is, and that’s part of the reason that browsers don’t come around very often, or updates to browsers. But, on the other hand we do seem to see other browser manufacturers moving much quicker than Microsoft. Why is that? Why does there seem to be slower movement out of Microsoft than elsewhere.

Alex:I’m not sure that much quicker is the right way to describe it. The reason a lot of browsers are way ahead of Microsoft in a particular standard support is I think for two reasons. First we actually care about standards and we are nice people.

Paul:(laughing) You’re implying that no one else is nice and no one else cares about standards. I’m sure that’s not true.

Alex:No not really. This is how this happened. When we started working on browsers, which was, IE 1, 2, 3, 4 in the 90′s, there wasn’t so much of a standard. There was some idea you can mark text with tags in angle brackets and it will render somehow. So a b means bold. Eventually some kind of defacto standards developed. Every site was built for Netscape and it was important to be like Netscape. It was pretty much a standard. So when we built a browser at that time we were trying to be as compatable with that standard as possible. Then what happened, Netscape just went away for a few years and we were left alone. There was nobody to compete with. That is a hard place to be. You have to be compatable with the web. You can’t break anything. How do you make progress at that time. There was no versioning. At that point we decided to be nice and return the favour to other browsers and we went away for 5 years and were sitting for 5 years on the beach and letting everybody else catch up.

Paul:That was really generous of you. That was a wonderful thing. That’s a good answer I like that Alex.

Alex:Now everybody’s caught up we can be in the game together.

Paul:Okay. So now that everybody’s at the same level you’re going to go for it majorly. So that brings us quite nicely on to the future of browsers. You know, particularly IE 8. Obviously you can’t really tell us anything that isn’t already publicly known and I wouldn’t expect you to. But, not everybody that listens to this podcast already knows all that is publicly out there about IE 8. So tell us what kind of direction you’re going in. How are you going to compete with these other browsers out there now that they’ve caught you up?

Alex:Well the biggest thing to know about IE 8 is it is back. We have a real team of people who is really serious about building a good browser. The biggest investment in this one is obviously standards. That’s the biggest thing that everybody was unhappy about with the previous versions. We get as much as we can of good standards support right here. We are making major investments in CSS 2.1 doing whatever it means to be compatable. Interestingly enough it has to be defined what it means to be compatable, to say that you are compatable. We are doing as much as we can in this area. There will be a lot of exciting user interface features there. But I don’t think I can tell about that because I am really a core technology person and I learn about our UI implements from demos.

Paul:Fair enough. So, internally are you working towards a deadline of any description over this? I presume we’re not talking about another 5 years here? We’re talking about a much shorter period of time.

Alex:Definitely it is way closer than 5 years.

Paul:(laughs) That’s good. You want to narrow it down any from that or am I pushing my luck?

Alex:Yeah I don’t think I can have a number. Unless it is publicly known and I haven’t checked in the last couple of days. But you are going to see it pretty soon. I am going to set your expectations pretty low. Don’t expect this to be done in quaters because what we are doing with new standards layout it isn’t crazy and insane trying to rewrite things like this in less than 10 years.

Paul: So you’re suggesting that before too long we might see a beta. You’ve obviously come under a bit of an attack from Opera and they’re have been several comments about that. And then you’ve come out and said that you’ve done that acid test. How big a deal really is that in the real world? Do you think it is a fair test of a browser?

Alex:Well it is an acid test. As I understand in chemistry it checks the presence of a chemical, right? I guess it is a variant like that. I spent days taking this apart and figuring out what every line means and what features do you have to have, and how are they supposed to work to render a particular pixel in a particular place. It is quite and interesting test in the way that it tests very few features but it test the features in corner cases of intersting features of a standard. So you would assume if you get that far, if you manage to render text at all and you render Acid 2 you are in really good shape.

Paul:So is is fair to say…The danger is, and I have heard some people say this, with IE 8 you’ve just been going after being able to say yeah we pass the Acid 2 test. You could kind of develop those things in isolation. My hope, and I suspect your hope as well, is that you’re going to go beyond that. It’s almost inconsequential that you passed the Acid 2 test. It’s part of a broader aim to introduce better standards support. Is that a fair comment?

Alex:Yes it is. It probably would be not unreasonable to have another browser that doesn’t have an particularly promise but passes the Acid 2 test. We are really trying to be as close to standard as possible.

Paul:Let’s broaden it out cause we’ve kind of picked on IE quite a lot here. Let’s broaden it out to talk about where browsers are going generally in the next few years. I mean, what do you think we’re going to see happening in browsers generally?

Alex:Well from my point of view as standards and layout, I see actually multiple browsers being 100% compatable with CSS 2.1 which most helps both browsers and standards to really get into the new steps. We’ve heard a lot of criticism on standards not moving. Like CSS 3 some people are saying that trying to make sense of all the different parts of CSS 3 what is the next step there. In my opinion I am as unhappy with CSS 3 not moving as designers are. For this to move you have to have a solid ground of the previous version not only being a solid standard but also being supported properly. Then addding every little feature to CSS 3 become important because now we can have several implementations of that. As far as standards go I am really looking forward to the world after IE 8. And there are all the different directions of being mobile. Bringing more of the technologies into the browsers that they can perhaps take a bite out of flash or out of .pdf. Where you can have real content that was unthinkable for a browser a few years ago. Into every place that has a good browser. So I’m really optimistic. One thing to understand about developing a new browser is it’s exciting who writes is how has it. But for a web designer it is like making wine. Something happens today that will actually make the difference in the life of a web designer 10 or 15 years from now. Whatever is being shipped today, everybody you care about now has this one.

Paul:What we need you guys to do is drop support for IE 6 really quick cause then we can use it as an excuse to drop support as well.

Alex:This goes back to versioning a little bit. There is 3 kinds of versioning. There is versioning of a standard, version of a browser and version of a document. The version of a document is something that we are not going to drop ever. If something is written for IE 6 today 100 years from now we will still want to render it this way right? We wouldn’t go to the library and throw away all the books that are older than 100 years.

Paul:That’s a very good point.

Alex: In this sense many pages today are in Quirks mode. Google is in Quirks mode. If you try to render it in 100% standard it will look a little different. It will look quite odd by the way.

Paul:That’s a whole other discussion. Google and it’s standards support. What about typography? Are we going to see some improvements on that front? I mean we’ve noticed some of the other browsers starting to support web fonts and things like that. Can we expect a similar thing from IE?

Alex:IE supports font embedding for several versions now. There was an extremly complicated discussion within the standards group on how do you create a standard for downloadable fonts that can be standardized but is also friendly to font manufacturers. To people who own fonts. It’s easy to implement a hyperlink to a font that will be downloaded and used. Then it encourages to just put fonts out there, which you’re not supposed to do.

Paul:Obviously this isn’t down to Microsoft cause this is the whole standards group discussing this. That strike me as no different than what we do with imagery at the moment. Images can be pirated and that’s somebody’s intellectual property. It’s kind of just the way things have been. Do you feel that their is a kind of tightening up on things like that. Like people are more concerned about that then perhaps they were in the early days?

Alex:It is a good comparison of the difference of, whats the difference of an image or a song or a movie or a font. It is just so much more expensive to build a font. It is so easy to share if you just put out a file that if we make it easier to share we will just business model for a lot of small design companies who just build fonts. So we have to be very careful on how exactly it is being done. I think we are fairly close to be able to come up with a workable standard. We’re just not there yet.

Paul:Okay. So that is something that will probably turn up at some point but not necessarily in IE 8.

Alex:Well if that standard is embedded OpenType it is already there.

Paul:Yeah that’s true. Let’s just touch on briefly another kind of criticism that really hasn’t been aimed at the IE group but Microsoft as a whole, which is this whole issue of Office. The latest version of Office. I know a lot of people who are passionate about HTML emails who were deeply disturbed to see that the latest versio of Outlook doesn’t use IE’s rendering engine. Can you give us any kind of insight into what happened there? I mean obviously it’s not your area but it does affect you guys to some degree.

Alex:I wasn’t part of this decision but I can very well understand how that happened. When Office 2007 was being planned IE team pretty much didn’t exsist. We completely rebuilt the team for IE 7. I am not joking that we were 5 years on the beach. IE team stopped exsisting after IE 6. People went off doing their own different things. Of people working on IE 7 and now IE 8 there is litterally a handful of people who worked on IE 5. Maybe even less. It is a brand new team. When Office 2007 was being planned in 2003 there wasn’t anybody to talk to. The biggest concern about HTML email is security. So even is somebody wanted to build in IE 8 currently in a product to read email it would put a major requirement on IE to be able to be able to open all of these emails securly. If you take browser security and application security for things like Outlook it is a multiplier. It is way harder to build it that way. So I think that is totally sucks that you can’t send HTML email but I think that they decision that they had to make in Office 2007 was really difficult.

Paul:Interesting stuff. It’s been great. I’ve really enjoyed chatting with you Alex. I feel like I’ve got a little bit more of an understanding of what’s gone on inside of Microsoft and where things have gone. It sounds like a big part of all of this was your own success. That because other browser manufacturers disappeared and you were kind of left alone there wasn’t the kind of investment internally within Microsoft to keep things moving forward and it’s had ramifications. It’s very interesting.

Alex:Yeah. Thanks for talking to me. I have to say that you have a great podcast. I’ve been learning a lot from you. You don’t even imagine how much you yourself have on the future of internet. Just putting together this show.

Paul:(I can just see Paul’s head growing) Oh well thank very much Alex. I’m sure I’m not that important really but I’ll pretend I am. Thanks very much for coming on the show. We’ll get you back in the future. Perhaps once IE 8 is out in beta. You can talk a little bit more then. That would be fun.

Alex:I would love to. Thank you.

Listeners email:

Implementing RSS

Our first question is an audio question about RSS. It asks what tools exist for adding RSS to a clients website.

The simplest solution is to use a blog. Whether you use Movable Type, Word Press or Blogger they will all generate an RSS feed. Blogs are also easy to update and can be customised to integrate with the rest of your site.

However, a blog might not meet your clients requirements. For example, they might wish the RSS feed to link to a non-blog page or even a third party site. One option is to use a social bookmarking tool like Delicious. This creates an RSS feed of all links added. Alternatively you could use a desktop application such as FeedForAll. FeedForAll is a cross platform application that allows users to easily create, edit and publish RSS feeds. It also comes with a PHP script that converts RSS into HTML via PHP. This is ideal for embedding RSS into your website.

Hope that helps.

Should designers just design

Our next question comes from Travis…

I have recently been asked to join a web development/design team as their full-time UI designer. My responsibilities would include the UI design only and not css, html ajax, etc. I know the basics of css and html and have designed standards-based sites from scratch, and am eager to learn more code to further my skill set. I have been discouraged from learning code while in this new position, and focus on the UI design. Do most web design firms share this same structure?

Excellent question Travis and one that causes much lively discussion. Infact Cameron Moll asked the same question and the last I saw there was 114 comments!

My answer is that designers should be able to code. Personally, I don’t believe you can be an effective interface designers without an understanding of the underlying code and the constraints of HTML and CSS. I respect those who say that design shouldn’t be constrained by technology. However, in the real world its more complicated.

Setting that debate aside I would suggest that not knowing code is going to damage your career. Personally I would not hire somebody who cannot build as well as design a site. Consider your next job and whether you can afford to stay somewhere that actively discourages you from expanding your knowledge of the web.

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

111. Utopia

Posted in Classic shows on February 14, 2008 by Paul Boag

On show 111: Designer and developer work together in utopian harmony. Two great listener reviews and Aral Balkan announces the biggest online web design conference ever.

Podcast: Download (31.2MB)

Download this show.

Launch our podcast player

News and events | Designers and developers in perfect harmony | Aral on Singularity | Listener emails

News and events

Fixing your product pages

I want to kick off this week’s news with an article on Think Vitamin which I missed when it originally come out back in November. It is a post by Amy Hoy providing some basic advice on user experience design, focusing in particular on product pages.

Amy starts by giving some basic tips. These include…

Be nice to your users and customers (and potential customers).
Design as if your main goal is to inform and educate.
Be honest and forthcoming.
Help your users and customers to do what they want, not what you want them to do.
Be consistent with your message and quality of service (and I’m including software design here, folks).
Scientific, measurable “usability” doesn’t necessarily make for a good experience.
Good design makes people feel good.

She then moves on to look at specific examples. She compares the product download pages of Opera and Firefox. This is a fascinating insight into what can go wrong with user experience design.

What I particularly like about this article is Amy’s engaging writing style. She is incredibly personable and her writing really drew me in. It is a long time since I have read a post word for word.

Being inspired by newspaper design

I often talk on boagworld about looking beyond the web for inspiration. Too often as designers we look at other websites, when we should be looking to art, architecture and the world around us for inspiration.

Admittedly this can be somewhat of a stretch at times. It’s not always easy to see how a piece of art or kids toy can inspire a website. Many of us don’t even try as a result.

How about starting with an easier comparison? This week I came across a superb post that looks at award winning newspaper design and it really excited me about the possibilities when I finally get around to redesigning boagworld.

I think we have a lot of learn from newspaper designers and in many ways there are a lot of similarities. Both web design and newspaper design rely heavily on white space and grid layout. Both have to deal with large amounts of written content. Both have to copy with constantly changing content. The list goes on.

Take a few moments to read this post, even if you just look at the designs. It will definitely inspire you.

Using browser history to improve the user experience

My final news story of the day is an interesting idea centred around a users browser history. Niall Kennedy has proposed a technique where you could use CSS and Javascript to display content based on what sites a person has previously visited.

Although I am not sure I like the idea of websites snooping through my browser history, it does provide some ways of improving the user experience. If nothing else it can remove some of the clutter from our websites.

Let me give you an example of how it could be used. A website could check your browser history to see if you regularly used digg.com. If you did then it could post a “digg it” button. If not it could be hidden away. The same principle could be used to show only a RSS subscribe button for the specific news reader you use, rather than showing them all. The possibilities are endless.

Whether you can see an application for this or not, it is still a very impressive and clever idea. Definitely worth investigating further.

Feature: Designer and developer in perfect harmony

In this week’s feature Marcus is looking at the working relationships between web design teams. He brings together a few Headscape employees to discuss how to ensure a good working relationship between all parties.

These are the roles that we look at and who represents them in Headscape:

Requirements analysis, information architecture development (consultancy) – Marcus
Design, templates – Leigh Howells and Paul
Technical development – Rob Borley
Project management – Charlie Allen

These are the issues we covered…

What are the things that really make a project work well for you?
From the other perspective, what are your pet hates?
Designer and developers – should clients be able to talk to you directly?
Most projects have a habit of their scope creeping. How can that best be avoided?
At Headscape we use a number of different tools to manage projects. How do these tools work?
Particularly with designers and developers, we have set up ‘buddy’ systems. How does this work? Is it effective?
Some projects stall or go on hold for a while. Are you able to just pick up where you left off?

Expert interview: Aral Balkan on Singularity

Paul: So, joining me today is Aral Balkan. Hello Aral.

Aral: Hi, Paul. How are you?

Paul: Not too bad. It’s been a while since we’ve had you on the show.

Aral: It has been a while. I’ve missed it.

Paul: Uhm, so yeah, basically, I’ve been keeping a secret from Marcus. Which is I stoically refused to tell him what Singularity is all about.

Aral (laughing): Was he curious?

Paul: He was.

Marcus: It’s something to do with Star Trek, isn’t it?

Aral: Well I am a big fan, but no.

Paul: So why don’t you tell him what Singularity is all about.

Aral: Well, Singularity is going to be the world’s first large scale online web converence.

Marcus: Okay.

Aral: In a nutshell, that’s what it is.

Paul: So, I mean how does this work from a technology point of view, from an organizational point of view. Tell us a little bit about how it’s going to be organized.

Aral: Uh, sure! Well, basically it’s a web conference, so in terms of topics, it’s very eclectic. We’ve got a really cool group of speakers who have confirmed already, about 24 of them, from all parts of the web really. We have web standards people. We have JavaScript developers. We have artists who work on the web and they’re going to be presenting their sessions online. It’s going to be streamed through a custom interface built in Flash, based on the Flash platform, using technologies like Adobe Connect which used to be called “Breeze”. It allows the real time streaming of audio, video, and also sharing of interactions or objects through the web. Beyond that, we’re also going to have a very local character to it with local hubs where people will be able to gather and watch the audience and interact.

Paul: Oh, ok, so it…

Aral: I mean, watch the conference and interact.

Paul: Right, so people will actually get together as well, because that was one of my questions. One of the best thing about conferences is meeting up with people.

Aral: Definitely! The bit that I don’t like is the travelling. It’s being stuck in coach next to someone who’s, you know, not feeling too well or is kind slumping onto your seat or having the hotel from Hell experience that I’m currently having over here. (Paul laughs)

Aral: Don’t even get me started on that. There was techno music until 2 AM from the bar downstairs.

Paul: Nice!

Aral: Well, it was refreshing in the morning, though, because the shower went from boiling from freezing back to boiling and kept doing that. So, yeah, I think this is going to hopefully take the best parts of what attending a conference means, and maybe leave some of the bits that aren’t as great.

Paul: Are you going to leave it for local groups to set up local meetings or is that something that you can organize centrally?

Aral: I want to see it as decentralized as possible. I am talking to a few venue sponsors, potential venue sponsors. We’re talking with Yahoo at the moment. The BBC, I’m talking with Ian there. There are very interested and very excited about it. But, beyond that, I want it to have a grass-roots character. So, we’re already getting people volunteering for regional areas. I’ve called them Ambassadors. We have an ambassador from Bristol and there are people from Singapore, Mexico, all over, that are very interested in volunteering. So, we’re probably going to have regional volunteers and ambassadors who organize local groups, user groups, to have meetings around Singularity, where attendees can go and join and hopefully take it further, you know, add a local character to it.

Paul: OK, let’s cover some of the basics. How many speakers are you looking at, first of all. Let’s start with that.

Aral: Okay. We’re going to have a little over 100 hundred speakers.

Paul: Wow!

Aral: So, yeah, it is actually a large web conference.

Paul: Yeah.

Aral: And the that its online.

Paul: So when… how long is this going to be over? You know, if you’re going to have 100 speakers…

Aral: It’s three days.

Paul: It’s going to be over three days…

Aral: And it’s multiple track.

Paul: Multiple track, okay. That’s what I was going to ask.

Aral: And I think one of the things, just cut you off there, with uh… it is multiple track, but everything is recorded.

Paul: Oh, Okay.

Aral: So, its presented live and we’ve got some really great ideas for making those presentations a little bit more interactive than you can get in the real world. But, it will also be recorded. So, if you do miss something on the day, you’ll be able to watch it later.

Paul: Cool! How are you going to deal with things like time differences? Are you going to have it going 24 hours? Or, how are you dealing with that?

Aral: Well, initially, I was thinking about having it 24 hours. Just because it sounded really cool.

(All Laugh)

Aral: You know? “Three days! Twenty four hours!! One hundred plus speakers!!!” But then I thought about it. Especially the local meet ups. I want those meet ups to have a BarCamp-like character to them, you know? Where people can stay over. And I didn’t want the conference, the somewhat one-way part of it taking up part of the day.

Paul: Right…

Aral: So, I think it would be nice to have the presentations during the day and then after that, leave time for people at local gatherings to create their own sessions to talk about what they’ve been listening to, to add to it, to localize it for themselves in a matter of speaking.

Paul: Sure.

Aral: You know, to have, to do things to tell you the truth, I have no idea what they’ll come up with, which is great.

Paul: So, when is this scheduled for? What are the dates that people should book for it?

Aral: Well, we finally have dates. We’ve been going back and forth internally before we announced, but it’s the end of October. October 24th through the 26th.

Paul: Okay, that sounds good. And do you know a price yet, or are you still working on that?

Aral: Well, the pricing we’re still working on, but I think we’re going to be very positively surprised by the pricing. We’re actually working to get it even lower than we initially thought we wanted it. And we’re working closely with certain sponsors and we’ll definitely be announcing more about the sponsorship that we have as they become official, but some of our sponsors are interested in keeping the ticket price low as well and supporting us.

Paul: So, how many people are you expecting to attend this conference? Have you got any idea of what you’re aiming for?

Aral: Well, my conservative estimate right now is 10,000.

Paul: WOW!

Aral: And that’s based partly on past experience. We did 2 one-day open source flash conferences using similar technologies, for which we got about a thousand attendees at each one. Those were much smaller. One day, three or four speakers. My conservative estimate is that this will be about ten times the size of that.

Paul: That’s amazing. I mean that will be really cool to, you know, if that comes off. Are you trying to get a range of different speakers? Are you covering any particular areas of web design or are you going as eclectic as you can?

Aral: Well, the tagline that I was going with initially was that Singularity would define web 08. And I’m kind of trying to get people away from using version numbers when talking about the web. We’re getting away from using version numbers when talking about software because you know the moment you slap one on its outdated. So, I think maybe using the year would be easier because you’d at least know that you’re talking about a definite stat of time. So, my initial idea is that it would define Web ’08, and as such, I’m trying to get as eclectic a mix of speakers as possible. And also, I see that there is a lot of overlap with which to send applications for example. There’s a lot of overlap over what people using AJAX are doing and then traditionally web standards people are getting interested in applications as well. So, I want to have a real mix. I also don’t want people on the Flash platform to be excluded, as they sometimes are. But, this is definitely not… that’s not the focus of the conference.

Paul: So, where can people find out more about this? I mean obviously, some people are going to want to be signing up. Obviously, you can’t do that yet, until the price has been set. So, is there any kind of way (

Aral: Of course.) they can express their interested or find out more information or whatever?

Aral: They definitely can. The site is “singlularity08.com”. You can also get to it from “singularityconference.com”. And, basically, we have a blog there and you can express your interest. You can email me directly as well. My email address is “[email protected]”. Or just email my private address at “[email protected]”. Yes, so definitely, if you want to be kept in touch when we do release information, but there is also an RSS feed that you can subscribe to on the site.

Paul: Cool! Well thank you very much for coming on the show.

Aral: Thank you for having me, Paul. And of course you’re speaking.

Paul: Well, yes, of course. That goes without saying (Paul laughs).

Aral: Are you excited? Have you decided what you are speaking about?

Paul: I have not a clue yet, no. (Aral laughs)

Aral: Have I just put you on the spot?

Paul: Yes, totally. Thank you very much. (Aral laughs) And its going to be a weird one. It’s going to be a different way of speaking and so you kind of need to tailor what you’re doing to approach. It will be interesting.

Aral: Exactly. And we’re going have dry runs and we’re going to try out the interface as well.

Paul: Cool.

Aral: And maybe tweak it for different types of presentations. We just have so much potential with what we can do.

Paul: Mmmm. Yeah.

Aral: Because, we can actually control the medium. So, it’s really exciting.

Paul: Excellent! Excellent stuff! Really looking forward to it and we’ll get you back on the show closer to the time to see if we can drum up a bit more support for it. Excellent stuff. Thank you for your time.

Aral: Sounds great, Paul. Thank you so much.

Paul: Alright then.

Listeners email:

An alternative wireframing tool

A few weeks back I talked on the show about wireframing tools. Not long afterwards I received an enthusiastic email from Wen talking about a product called OverSite. He was so passionate about the product that I thought we should get him on the show to talk about it. This is what he had to say…

I’ve been catching up on my episodes of BoagWorld, and I just recently listened to your discussion about wireframing. As a UI designer, I completely understand the importance of mocking up a UI, and testing the mockup, before ever launching Photoshop.or Dreamweaver. So I thought I’d provide a review of a wireframing tool that I use, called OverSite. I haven’t seen many other tools out there like it, so I figured you and your listeners might find it useful.

OverSite is a shareware application that runs on Windows as well as Mac OS X; I use the Mac version myself, but am able to exchange OverSite files back and forth with my PC-using colleagues. OverSite lets you create a full or partial representation of your site structure: all of the sections and pages that make up your site. You can do this in one of two ways. The first way is fairly predictable; you add one section or page at a time by clicking a button, entering a name in a popup dialog, and clicking OK. The second way is fairly clever. You open a window that OverSite calls the Rapid Structure Creator. There, you type out your entire site structure in one text area, putting line breaks between sections and pages, and using indentation to indicate nested levels. Then you just click OK and viola! OverSite generates a tree depicting your entire site structure.

At this point, you can dive into your wireframing. Each page contains its own wireframe canvas. You can place the usual widgets on the canvas: buttons, textfields, checkboxes, images, etc. You can also place basic geometric shapes like circles, rectangles, lines and stars on the canvas. Each component can be individually styled; you can also create global styles that apply to all components, or to components of a specific type. OverSite also lets you create what it calls composites, which are complex elements that are made up of individual widgets.

Let’s say that you have a search form that will appear on a few different pages. You can create a composite representing this form. The composite might contain a few labels and text fields, maybe a checkbox or two, and a couple of buttons. If you want, you can tell OverSite to automatically draw a border around the form elements. Once you’ve created that form composite, you can drop it into your wireframes where ever you want it.

OverSite does lack built-in, complex widget types, such as tables. You can create them out of the widgets that OverSite does provide, but it would be nice for OverSite to create them for you.

While each page has its own wireframe canvas, so does each section. The purpose of a section’s wireframe is to create elements that will appear on all of the pages within that section. For those who have used server-side-includes, it’s kind of like that. As an example, say you had a navigation bar that should go on the top of every page in your Products And Services section. You would create that navigation bar once, in the Products And Services wireframe canvas. Then the nav bar will appear in every page within that section. In addition, OverSite provides tools to modify that nav bar in specific pages, for example, to change the color of a specific link in the nav bar when you’re actually on the page that that link refers to.

Static wireframes are fine, but I prefer being able to test the interaction between screens before I actually build the site out. OverSite lets you link any widget or composite to another page. If you don’t want to do the work yourself, you can also tell OverSite to auto-generate a simple navigation bar. Then, you can use OverSite’s built-in web browser to test out your site’s navigation.

Another useful thing I’ve found is OverSite’s notes. The notes functionality lets you provide details about specific widgets. That way, when you print or export your wireframes, you can include more information to whomever you’re handing them off to.

As an added bonus, OverSite will also create a graphical sitemap based on your website structure. You can tweak the appearance of the sitemap… the operative word being “tweak”. Fonts, colors, spacing, and icon sizes are under your control, but not much more. Here’s where I think the application could do better to allow you to fully customize the sitemap. Still, it’s created automatically for you without your having to lift a finger, so that’s something. Plus, the sitemap can be exported into a number of formats: GIF, JPEG, PNG, PDF, Scalable Vector Graphics, and others.

Once you’ve finished your wireframes and want someone else to be able to play around with them, you can export them as web pages for non-OverSite-using people to click-through. You have two options here: export your stuff as pure HTML, or export them as imagemaps. The trade-off between the two is fairly obvious: pure HTML will provide you web pages that looks more “real world”, but won’t look exactly like your wireframes do, and they’ll look different in different browsers. Imagemaps ensure that you know exactly what your pages will look like, but it’s typically not going to look like a real web site.

As a UI designer, OverSite’s become a pretty indispensable tool in my software arsenol. You can get it at the developer’s website.

A vertical rhythm calculator

In the same show we also had Jason Beaird talking about vertical rhythm (among other things) and this promoted an email from James. He wrote…

Hi I’ve been listening to your podcast for about six months now and really enjoy the mixed style of content and witty banter.

With all the talk of CSS vertical rhythm and em based layouts I thought I would point you in the direction of a vertical rhythm calculator that I built in Flex to help people work out all of those nice em values. My own site has been developed using the same principles with all typography and measurements set in em’s for an elastic layout. I am developing an AIR version that has an integrated browser so that you get visual feedback of your calculations, I remember one of the John’s comment on how useful such a tool would be on the fabulous Rissington podcast.

I have checked it out myself and have to say it is very impressive. What is more he has now created that desktop version. Check it out.

107. Running to keep up

Posted in Classic shows on January 15, 2008 by Paul Boag

On show 107: What should you be learning about in 2008, Jason Beaird on web design basics and how to deal with portfolio pages.

Download this show.

Launch our podcast player

News and events | Where to focus in 08 | Jason Beaird on design basics | Listener emails

News and events

Setting expectations

Our first news story today is an article on working with your clients. Specifically it focuses on the subject of setting your clients expectations and clearly communicating with them.

We all work for somebody. We all have clients in some form. Whether our clients are other companies or simply our boss we all know the feeling when they seem to expect something which we believed we never promised.

This article looks at two ways of managing this kind of scenario. First be diligent up front. As the article says…

Setting expectations isn’t difficult, or mysterious, but it does take time and you have to be diligent about it.

Second it suggests being consistent. That doesn’t mean you are inflexible. It means that you need to be consistent in your communications throughout a project. If goal posts move, it is important that you explain the ramifications.

The principles of this article are universally applicable. So whoever you are take a few minutes to check it out.

Great websites do, not say

The next post I found falls into the category of “it’s funny because it’s true”. It’s a post by one of my favourite bloggers Gerry McGovern who seems to rant against websites that spend more time talking about user experience rather than offering it. He begins his rant by focusing on welcome copy…

I don’t want to pass meaningless pleasantries with your website. I don’t want to shake its hand. Or talk about the weather. I’m at your website for a reason. I’m in a hurry. I’m impatient. So kill the welcome, please.

He goes on to criticise sites that waste valuable copy explaining how easy their sites are…

If it’s really easy, why are you telling me it’s really easy and quick? For starters, you’ve wasted my time by making me read your meaningless sentence.

If you ever write copy for websites then you should read this post. If you don’t then check it out anyway if only for the pure entertainment value.

CSS: The All-Expandable Box

My final suggestion for your reading pleasure is a post on the Web Designers Wall entitled The All-Expandable Box. This solves a problem which I encounter all the time.

As you will know if you listen to this show regularly I am a great fan of using ems for typography. I like the idea users can resize their text to suit their own requirements.

The downside of this approach is that it can quickly break designs especially when text is contained within a box. The box will naturally expand vertically but not horizontally. The result is that you loose control of line length. Enabling the whole interface to expand including the box itself is very useful. This article shows you how.

Its a nice clean technique that should act as a building block for much more complex things. So if you are considering doing more ems based design then this should be a nice starting point.

Feature: Where to focus in 08

As web designers we are all busy people. We are in such a fast moving sector that it can be hard to know what is worthy of our attention. Should we be focusing on Silverlight or brushing up on Javascript? Learning Rails or grappling with mobile devices? This week I want to share my thoughts of where you should be focusing your energies in 2008.

Expert interview: Jason Beaird on design basics

Paul Boag: Joining me today is Jason beard author of an incredibly useful and wonderful book that I’ve really come to love. That’s – How would you describe it? Is it a basic introduction to designing?

Jason Beaird: It’s a basic introduction to graphic design principles. The book was really first intended for web developers in fact the initial working title was web design for developers and it kind of expanded into just a introduction to graphic design principles for anybody not just for developers, not people already creating websites. But anybody interested in design really.

Paul Boag: Mmm what’s so great about it is that you’ve kind of really taken time to go over the basic principle of creating a beautiful website. Which I guess is the title of the book, “The Principles of beautiful of web design” that’s the title isn’t it?

Jason Beaird: That’s correct.

Paul Boag: I really should have it in front of me shouldn’t I [Jason laughs] Oh but you’ve got to be fairly impressed that I knew that of the top of my head.

Jason Beaird: I’m just impressed that you have a copy yourself.

Paul Boag: Well yes I do. And it’s good because a lot of people that listen to this show are not necessarily professional designers we have a lot of people who listen to the show who are website owners but have to do a bit of design in order to maintain their site. We’ve got Developers that developing applications and having to do some design as part of that and we’ve also got people who probably are designers but not full time so are interested in how the professionals go about doing these things. So it’s a really good book for the boagworld listeners and why I’ve been so desperate to get you on the show for so long Jason, so it’s good to have you Jason.

Jason Beaird: So everybody laughs along.

Paul Boag: Well you’re a busy man; you’ve got a lot to do. So I thought what we would basically do is take the chapters from the book and maybe pick out some of the basic principles from each of those chapter and get you to talk about them little bit. So the chapters in your book are layout and composition, colour, texture, typography and imagery and that for a start made me very enthusiastic. Because it’s like really obvious, basic stuff that here are the main issues you are going to come across from a design prospective and you know we’re going to do a chapter on each which I just thought very refreshing and very logical and that’s good. So let’s kick off with layout and composition so tell us a bit about some of the stuff you cover in that chapter maybe and some of the basic principles that non-designers need to know about.

Jason Beaird: Well the entire book is really just basics, in my opinion. It’s just stuff that a lot of people think designers have as intuition and really it’s just stuff you can learn and learning these principle is like learning how to hand code. Really you can a website using a WYSIWYG but understanding the tags and selectors allows you to see inside and know what’s going on. And these are just basic. But really this is going to be the fire hose version of the book.

< p>Paul Boag: Yeah, I’m asking you to compress the entire book into about 20-30 minutes. [Both laugh]

Jason Beaird: I’ll give it a shot. We’ll start out with layout, some of the main principles of graphic design theory is balance, unity and emphasis and learning how to take all three of those and use them effectively in a layout is a pretty good place to start, from a layout prospective. By balance I mean symmetry. Is it divided right down the middle, or does it still feel balanced even though it’s divided into columns? By unity I mean do the elements of the website feel like they are one cohesive thing. You know does it feel like it’s a singular unit rather than a bunch of different bits. Then emphasis obviously is about creating a focal point on the page. And keeping that focal point and understanding where people are going to look and why they are going to look there and so there there’s different ways to create all three of those things. One thing I talked about in the first chapter about balance and creating balance is design proportion which some people call the golden mean or the golden ratio. Really it’s just a rule that if you divide a width by 1.62 just a number called Phi** you get a pleasing proportionate division. And so to make that simpler it can also be known as the rule of thirds. If you divide something by thirds it’s pretty close to the 1/ 1.62 ratio and you can come up with a pleasing kind of division for a navigation column and content area by using that kind of division. But really that’s sort of an overview.

< p>Paul Boag: Yeah, I wonder why the rule of thirds works, did you find out anything in your research about why that is pleasing?

Jason Beaird: I didn’t really find out a whole lot of solid information about it. But there is some out there, pythagorans noticed that it was a very common division in nature things like with leaves and shells had the same division and ratio and then started to develop the concept that anything designed around that is designing around nature so is therefore designing around gods design so you know. So the Romans and the Greeks built there some of their architecture on the golden ratio, the golden mean it’s a stable of graphic design since those times.

Paul Boag: Yeah and it really does work. I remember even back in Art College when I was being taught photography the same principles apply to photography composition you know or really anything you do, whether its print design or web design. So yeah the rule of thirds I think is a good one to take away.

Jason Beaird: Yep.

Paul Boag: Ok, what about colour tells us a little bit about colour because that’s a huge subject that people have written entire books on and you had one chapter so what did you chose to pick out on the subject of colour?

Jason Beaird: That’s the important thing to remember about these chapters is that there are entire books dedicated to each. I feel like was already trying to squeeze it already into the book. But with colour I think the most important thing to remember is that people’s perception of colour depend on their own personal experiences and cultural like right now, red and green means Christmas, for most Americans and most people around the globe whether they believe in that or not it’s just something that we’ve been exposed to so much that that’s the way we see it.

Paul Boag: Yeah.

Jason Beaird: But beyond those personal perceptions and traditional perceptions it’s good to know that there are ways to align colours where you really can’t make too big a mistake. [Laughs] and that are using a colour wheel and to rely on colour schemes that exist. With any rule it can be broken for whatever purpose you want but it’s good to know what the good colour choices look like before you start making your own and relying on color schemes or a colour wheel is a good way to get started.

Paul Boag: I think when you talk about these rules exist to be broken, ok that’s true but the kind of audience you are trying to reach, maybe a non-designer audience kind of playing safe is kind of always a good way to go.

Jason Beaird: That’s true.

Paul Boag: And you know using a colour wheels and stuff. Don’t you also mention in the book about finding a photograph that you like and or is that somewhere else, that might be somewhere else but it’s a nice idea anyway, taking a photograph and extracting the colours from that. I think is quite a nice way of doing it as well. Have you ever tried that?

Jason Beaird:I have tried that, I use that quite often. I don’t know if I mentioned that in the book or not. I mention a few other software based colour chooses and one that come out around the time I was writing the book that I didn’t get a chance to include was adobe kuler, at

Paul Boag: Yeah I think using a tool like that is very handy indeed. Because let’s face it we perceive colour in slightly different ways and what is it one in ten or is it one in 20 men are colour blind anyway.

Jason Beaird: I believe it’s 1 in 10 have slight colour blindness where they can’t tell, usually a red green; where they can’t tell the difference between red and green. Yeah so I mean yes, using a tool is a good idea if you are not a designer who’s really confident in colour.

Paul Boag: Now what about the subject of texture that was an interesting one I was quite interested that that was included in the chapter listings. And I, I intuitively do stuff with texture but I’ve never really thought about it that much so tell us a little bit about why you decided to include that and what advice would you give?

Jason Beaird: That for me was probably one of the hardest chapters to write because it was a lot of intuition and I like to use texture a lot in my own designs and I think that where truly the design begins. But there is not much principle wise to it. You can talk about points and lines and shape and that’s where all visual effects begin. But texture is really about creating a tactile quality and a theme for you website. Whether that is a smooth shape like apple computer with rounded corners and glossy buttons or whether that is a wicked worn look with a brick texture or something that makes it look nostalgia or old or whatever feel you want to create you can do that with texture. And I was trying to just convey that in that chapter.

Paul Boag: Yeah I mean texture kind a gives character to the site in many ways doesn’t it from the kind of grunge look you get through to the highly reflective look, or like what you say, sites like Apple. So what kind of, you talked about points and lines and perhaps you could explain some of those concepts to us.

Jason Beaird: Right you can create any kind of visual effect with just points. I showed an example; a picture of my cat, abbie, created with a dot matrix printer kind of effect on it. It’s just points. And then you can move in and use lines and shapes. It’s just important to remember that lines can create movement, horizontal line doesn’t have as much movement as say a diagonal line or vertical lines lead you up and down the page. It’s important to remember eye movement when you are creating textures. But really it’s just like what I said about creating a tactile quality and theme for the website.

Paul Boag: So as far as people may be, say a developer who has just developed an application and he needs it to look kind of half decent but doesn’t want to do anything too risky incase he screws it up and he’s not a designer. I mean what kind of advice do you give a person like that? Do you encourage them, probably best to stay away from doing too much textual stuff or is that something you should get into?

Jason Beaird: I think it’s something you should think about. Texture can easily be overdone and it can become goofy and silly rather than being professional. And I think it’s just in moderation. The thing to remember is to not leave your website backgrounds on div’s, backgrounds colors on div’s. Create some kind of texture, feel to it, whether that’s rounded corners or whether to go for the minimal stick where you don’t really use background images but rely on negative space. It’s just the fact of going beyond the standard HTML look. I mean obviously with style sheets you can’t just leave it un-styled because it’s styled content has no structure to it any more because, we’ve taken out the tables we’ve taken out the design in HTML and now we are relying on style sheets, so now you really have to build something up. That’s good I think, it makes people think about texture and all these typography, colour all these elements of design. But to think about it and just go beyond the basics. Just try to recreate something that you already like, picture wise, that doesn’t mean stealing the design but looking at another website you think captures the professional look and feel that you are going for and try to recreate that in your website.

Paul Boag: Yeah, it’s interesting that you talk about looking for inspiration. What kind of advice do you give people for a good place to look, should they just be looking at other websites or should they be looking beyond the web a bit?

Jason Beaird: I really believe that people need to look beyond the web. One of the tags for this book is that you don’t need to go to art school to design great looking websites and well I was kind scared of that headline, that professors from collage would hate me for it. [Paul laugh] It’s really true because if you have a passion for it, it will draw an inspiration from all sorts of sources whether it is architecture, or goofy things like traffic patterns or a door that you see, anything really can really inspire a look and feel to a website. Jonathan Stickler wrote an article about how he was inspired by an art deco building and that’s what gave him the design idea for his current website design.

Paul Boag:Yeah, and I thinks that particularly true when it comes to texture and colour as well as you can see textures and colors around you in everything from a plant pot through to a magazine so yeah.

Jason Beaird: One of the other big things from going through a collage art programs is that if you go to school for graphic design you’re not just going to school for graphic design you actually have to take all the traditional art classes, painting, drawing, pottery sometimes, a lot of history and really the reason for that is to create a foundation to a visual exposure to art. So you have this vocabulary and this experience pool to draw from when you are creating other designs.

Paul Boag: You mentioned earlier, negative space when you were talking about texture as another kind of approach to things. Negative space is something I think designers always throw around; it’s a term that we like to use quite a lot. But it’s not something we ever kind of explain. Just spend a couple of minutes explaining how negative space works and why it’s so important, if you would.

Jason Beaird: Negative space is important because it allows you eye to move around things if you had a page completely crammed with text you wouldn’t have any focal point to start with apart from the top of the page. Our eyes usually gravitate towards the center of the composition, so if you think about that you can have an element something around the center of the composition that can lead you to another element. Negative space is really a tool for moving the eye around.

Paul Boag: Right.

Jason Beaird: If you have, like I said before diagonal lines create movement. If you have diagonal lines that move you up towards something else. I gave a few examples in the book; it’s hard to talk about it with having any visuals.

Paul Boag: Yeah I know. It’s frustrating isn’t it? I really sometimes, I really regret doing an audio podcast, it’s a bad choice. [laughs] Ok, let’s look at the subject of typography. I’m guessing it must have been a hard chapter to write because A) typography is a massive subject and B) typography on the web is quite a tricky area. It’s kind of easy to almost easy, as a non-designer, to dismiss typography by going; well there are only about 4 fonts I’m allowed to use anyway so therefore typography on the web doesn’t exist. Why is that wrong, why is that not the truth and how did you squeeze a chapter out of this.

Jason Beaird: Well just like a lot of the chapters there are a lot of books on the subject of typography that go way beyond our experience with web or even print graphic design that go way back to the roots of communication and that’s really what typography is about. Its communication and all websites you’re trying to communicate something so if you can’t do that with pictures and ideas you have to do that with words so the way those words appear to people should become part of your design. It’s on hard with the state that it’s in with the web, having a limited palette of fonts to choose from. But at the same time it’s a good thing, I think for the novice because even though we are limited to this certain number of fonts that everybody has in their computers. Most of those fonts aside from comic sans are decent [laughs] for body text and things like that. The most important thing to remember is that there are other fonts out there and to have sensitivity towards things like spacing between lines and the vertical rhythm. Vertical rhythm isn’t something I talked about in my book because I thought it was an advanced subject but right after the book was published it sort of exploded into a big topic in web design and there’s a lot great articles out there written by other great web designers about vertical rhythm and how that affects your typography.

Paul Boag: So what is vertical rhythm for those that don’t know?

Jason Beaird: Vertical rhythm is just creating a space between your lines that kind of matches up throughout the website so that the spacing in the lines in your navigation area and the spacing in your lines in the content area kind of line up and their not just randomly spaced apart so you get weird alignments between things. It’s creating vertical rhythm, it itself is a good description; you’re creating a rhythm or pattern for your eye to follow down the page.

Paul Boag: So it’s all about basically making sure multiple typographic elements across columns have some kind of relationship to one another and that they are not just higaty pigaty all over the place.

Jason Beaird: That s the way I understand it, that’s the way I think of it is it’s really about creating a pattern and paying attention to the way the text lines up.

Paul Boag: So whatever, bearing in mind that we are limited to such a small set of fonts. What sort of basic advice would you give to someone starting on in web typography. You mentioned line spacing, what are you getting at there?

Jason Beaird: The default line spacing for HTML is very tight. And with tight text like that it’s kind of hard to read And also thinking about the width of the text you are reading . When you are reading a newspaper article or a magazine article the reason the columns are so narrow is because it’s easy, or a book even, it’s easy for your eye to scan a certain width of text and it’s easy for your eye to move to the next line if there is a little bit of space between it. And if you kind of know those basic concepts you can make it a little more pleasing to read that the default set up for typography on the web.

Paul Boag: Yeah, because especially if you’ve got a fluid site you can end up with ridiculously long line lengths if you don’t.

Jason Beaird: Right and I think that’s a lot of the beef people have with fluid layouts is that not only are you taking power from the graphic designer but you’ll also making line widths that are incredibly hard to read. But in my opinion if the user is comfortable expanding the site out to that width, and it’s readable having the line width that long, then obviously they don’t have a problem with it. But you should sort of leave that up to the user if you can. But it’s been proven that it’s easier to read text that’s been set to a certain width.

Paul Boag: Are there certain type faces that are better suited to kind of headings in preference to body’s and vice versa?

Jason Beaird: Well with body text, traditionally it use to be that body text for books and that were set to times or serif fonts because the serifs sort of lead your eye to the next character, but because of the resolution we have with the monitors and the way the text is being presented it’s actually been proven that sans serif fonts are better, fonts like Arial and Helvetica, are easier to read in smaller sizes because you don’t get the kind of resolution, the kind of detail that you get with printed type. And now that’s changing, we’re getting higher and higher resolutions in displays so maybe that will change in the future. But it’s just important to know those kinds of idea when choosing the body type for your website. But when you are choosing a heading, when you’ve got something that is very large it really just matters how the text displays and because you can use images and because you can use things like (scalable Inman Flash Replacement) sIFR to display another font besides the standard 6 or 7 fonts that are available – I call it the ok 5 9 [laughs] that are available across the Mac and web computers, Mac and PC computers sorry. You can choose other fonts that are outside those fonts to use for headers or areas where you want to give a little more design appeal. So there is a world of fonts out there, some good, some corny, that are available, some free and some very expensive that you can use for the headline on your website and it’s just important to be aware of those other fonts. I gave a few resources for free fonts I like www.1001 fonts.com is a good place to go for licensed fonts is a great font boundary, there is just a lot of fonts makers that make excellent fonts, not just for printed material like books but for web designers and people working on the web should be aware as well.

Paul Boag: Cool. So the last chapter in your book talks about imagery and I’m fascinated, and I have to confess that I haven’t read that chapter yet, so I’m kind of fascinated to know what you cover in that chapter as far as using imagery on the web. What kind of advice do you give?

Jason Beaird: Well the imagery. The graphic design doesn’t stop creating the frame around the website. It’s also about formatting the inside which is kind of difficult when you give the power to the user, give them content management. But choosing supporting content imagery is one thing that can really enhance the user experience of the web site. And finding and creating supporting imagery for awebsite content can be very difficult if you don’t know where to look or if you’re not a good illustrator or if you are not good at Photoshop. So I just try to give a basic primer on finding this type of supporting imagery and if you find an image that might work, how to tweak it to work for your needs. I just wanted to give a basic intro to using stock photo sites like iPhoto or stock photo exchange which is sxc.hu is a free stock photography site that is really great it has a lot of images. Finding images and then using them in your site is one way to really enhance the experience for your user, beyond that also I try to warn people from stealing images from Google and stop using the stock images and stock photography that we are all use to seeing in most free publication. I mean really here are a lot of stock images that have been created; the guy with the light bulb over his head, the hands holding the tree that’s growing in the soil in the persons hands. These are clique in the stock photography world you have to be aware when choosing images, to enhance the user experience.

Paul Boag: Yeah, yeah, defiantly , did you cover any of the technical aspects of compressing images or whether to go gif or jpeg and that kind of thing.

Jason Beaird: Yeah I did give a quick primer on jpegs, gifs and pings. And just a quick for everybody, if you are using a photo you obviously want to use a jpeg because usually with photos you usually have a lot of different tones and images. And gifs and pings the file space is based on the number of colours in the image. If you are using an icon type thing or a colour field where you have a limited number of colours then gif or pings are the way to go. And choosing between gifs and pings is really all about choosing between the types of transparency you want to have. Internet explorer 6 and below doesn’t support alpha transparency where you have a sort of gradient from opaque to transparent it just supports on an off. So with pings if you have transparency then you get a pink halo around them. Areas where there is transparency you can’t see it, now there are fixes for that but it’s kind of hacky still and for that reason people still hang onto the good old gif format which has transparency and unfortunately also has animation. [Both laugh]

Paul Boag: So is that one of your rules? Never ever use animated gifs?

Jason Beaird: Actually no it’s not, because I’ve used animated gifs even on my own site if you go to my site jasongraphics.com and hover over the logo it was sort of an experiment toy to play with I was designing my current layout, it was a sliding door type image where I’ve got the still part of the Jason graphics logo and then when you move over it jumps up, the position of the image jumps up so you see the animated moving, like sunrays over the logo. So that’s an animated gif and I’m not ashamed of that. But I think that animated gifs in a lot of ways degrade the professionalism of a lot of websites.

Paul Boag: It sounds a superb book, for anyone that’s not from a design background. Where can they get a hold of a copy, where can they find out more about it, how can they buy it I guess is the next question?

Jason Beaird: Well I’d love you to buy it.

Paul Boag: Obviously.

Jason Beaird: I set a little promo site for the book at www.principlesofbeautifulwebdesign.com were you can kind of hover over, I did a fun little thing where if you hover over each of the chapter names it sort of point s out in the website design itself how the things play a part of the design I made for the promo site.

Paul Boag: Oh cool.

Jason Beaird: Beyond that amazon.com has a good price for the book usually and you can go of course to site point.com to buy directly from them, and most people prefer to do is buy directly from Sitepoint. They sent you lots of emails about books that are coming out and specials. A lot of people are big fans of Sitepoint. I really like them a lot too.

Paul Boag: Yeah if you haven’t checked out Sitepoint before, then it’s worth saying that they are a lot more than a book publisher they have got a huge site with tons of great articles of all aspects of web design and a really active forum as well.

Jason Beaird: The forums are a great place to get involved and a great place to learn new things.

Paul Boag: Thank you so much for coming on the show I can’t say I normally get people on the show to pimp their book and to be honest that wasn’t what I originally ask you to do either. But the more I think about it the more I’ll looked at it, the more I think it’s a perfect book for a lot people that listen to this show if you are starting out in any form of design and don’t come from a design background then I can highly recommend this is a book to check out. Jason, we’ll get you back again in the future no doubt and make you cover some of these things in more depth. But for now thanks you very much for being on the show.

Jason Beaird: I appreciate it, it’s like being on the Dave Letterman show or the Conon O’Brien [Paul laughs] it’s like a status symbol. But I’m glad to be here and thanks for having me on the show.

Paul Boag: Thanks very much.

Listeners email:

A excellent wire-framing tool

Robin:I’m a part-time web developer, committed to web standards, one day I’d like to make it my job. I’m a regular listener of boagworld in my car (traffic jam) going to work.

Remembering your discussion with Marcus about wire-framing (Powerpoint or Visio) i just came across this product: http://www.axure.com/demo.aspx. Looks spectacular although much to expensive for me (still).

Keep up the good work.

Building an online portfolio

Sultan:On the Headscape website I notice you have “related links” and “related pages”. What is the logic of that?

Also in your portfolio section when I click on a thumbnail why don’t you guys link to the actual sites rather than to a screen shot?

First of all let me say there is a lot about the Headscape website which I don’t like. It was built a while ago and our thinking has moved on.

One example of this is related pages and links. The logic was that related pages referred to other pages on the same website. Related links where external links to third parties. However in hindsight I don’t think that is a very clear distinction and should probably be changed.

I am however more happy with what we have done in our portfolio section. We have several reasons for the decision to link to screen shots rather than live sites. These include…

Some of the sites are intranets and not available to the public
Some sites had limited shelf life and are no longer available
We wanted the user to be able to click through multiples sites in quick succession

However, the primary reason is that clients often make significant alternations to the sites we deliver. After the end of the project we simply cannot guarantee that the quality of design and code will be maintained and so prefer not to directly link to the sites.

I am not suggesting that this is the right decision however it is the course of action we have chosen for Headscape.

Show 101: Delusional

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

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

Podcast: Download (28.8MB)

Download this show.

Launch our podcast player

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

News and events

OpenSocial from Google

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

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

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

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

Content and presentation

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

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

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

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

Online calendars and date pickers

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

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

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

Marcus’ bit: Rates Part 2

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

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

Enough rambling…

You get what you pay for

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

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

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

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

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

So, what do people charge

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

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

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

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

Pricing roles

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

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

Regionality

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

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

Raising prices

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

Paul’s corner: Intranet delusions

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

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

Ask the expert: Andy Budd on design sign off

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

Andy Budd: Hi Paul, how are you doing?

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

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

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

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

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

Andy Budd: What?!?

Paul: (Laughs)

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

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

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

Paul: Yeah.

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

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

Andy Budd: (Laughs) I have indeed.

Paul: (Laughs)

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

Paul: You think I’m just naturally dumb?

Andy Budd: … So what was the first question?

Paul: Okay.

Andy Budd: (Laughs)

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

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

Paul: (Agrees)

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

Paul: Yeah.

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

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

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

Paul: (Agrees)

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

Paul: Yeah.

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

Paul: Yeah.

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

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

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

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

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

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

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

Paul: Yeah.

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

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

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

Paul: Okay.

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

Paul: Yeah.

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

Paul: Yeah.

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

Paul: Yeah.

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

Paul: Yeah.

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

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

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

Paul: Yeah.

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

Paul: Yeah.

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

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

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

Question of the week

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

Favicons: Small but significant

Posted in Design on October 18, 2007 by Paul Boag

Favicons are those 16 by 16 pixel graphics that appear in your address bar, bookmarks and various other places. They maybe tiny, but they are becoming increasingly important.

Its so easy to ignore favicons. They seem frivolous somehow. As if they belong in the same category as the blink tag or the splash screen. However, although they are small and nothing more than eye candy, they are far from insignificant.

There was a time where the only place favicons appeared was the address bar in your browser or possibly bookmarks…

However, recently they seem to have become much more prevalent. Many websites have taken to displaying a favicon when they link to a website. Desktop applications (such as RSS readers) have also used favicons when linking to websites…

With your favicon starting to pop you all over the place it is becoming increasingly important that it represents your website well. After all, this is probably the only graphical representation of your site somebody is going to see before actually viewing your site.

Designing your favicon

So what makes a good favicon? At its most basic level your favicon should reflect your sites brand. A favicon gives you the opportunity to represent your brand in locations where it would be impossible to place your logo. Also when users follow the link associated with your favicon they want to be reassured that they have arrived at the right location. It is therefore important for the look of your site and your favicon to reflect each other.

So working from the starting point that your favicon should be based roughly on your logo, what options are available to you. I would suggest you can take one of three approaches:

Scale down your logo
Crop your logo
Create a favicon based on (but not the same as) your logo

Simply scaling down your logo is often the simplest approach. However, the effectiveness of this is dependent on the complexity of your logo. A simple logo should work well as a favicon, but a more detailed design will struggle.

In the future I suspect it will be standard practice when developing a corporate identity to consider the appearance of a favicon. However until then, if you have a complex logo, then there are two remaining options.

One option is the approach I have taken on boagworld. Instead of trying to get the whole of my rather half arsed logo to work as a favicon I have cropped and scaled a portion of it. In most cases this is a viable alternative to showing the whole thing. However, occasionally a logo defies even this approach.

Take for example the flickr logo…

Because of its reliance on typography it would be impossible to scale or crop into a favicon. Their solution to the problem is to use an icon that is two circles containing their corporate colours.

The result still reinforces their brand identity even though it does not show their entire logo.

Getting the design of your favicon right can be tricky so you might want some inspiration. If so then have a look at Daniel Burka’s collection of favicons it might point you in the right direction.

Producing your favicon

Once you have designed your perfect favicon the next question is how do you get it onto your website. Fortunately there are a number of tools out there which can help you. The one I tend to use the most is a website that converts any image file into a favicon.ico (the file type that a browser will recognise). Simply upload your image and the website does the rest.

Now that you have your favicon.ico all you need to do is add it to your website. To do that simply upload the file to your website and add the following code (check that the path in the href is correct) to all your web pages. The code goes in the head tag at the top of your HTML…

<link rel="shortcut icon" href="favicon.ico" >

Job done!

Show 98: Flybe Farce

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

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

Podcast: Download (18.7MB)

Download this show.

Launch our podcast player

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

Housekeeping: Prizes and problems

A free ticket for FOWD (New York)

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

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

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

Download problems

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

News and events

Em Calculator

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

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

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

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

How to disarm 10 difficult client observations/requests

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

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

or…

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

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

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

The resurrection of downloadable fonts

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

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

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

Creating better user personas

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

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

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

Marcus’ bit: When to allow a loss leading project

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

Paul’s corner: Ongoing role of the website manager

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

Web Designers reading list

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

What books would you recommend.

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

Question of the week

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

Show 97: FoWA

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

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

Podcast: Download (27.0MB)

Download this show.

Launch our podcast player

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

About 100th episode

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

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

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

News and events

Gossip from FoWA

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

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

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

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

The average website visitor

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

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

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

Getting started with Photoshop

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

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

Waking the sleepers

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

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

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

Marcus’ bit: Extracting the budget from clients

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

Paul’s corner: Avoiding design by committee

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

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

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

Dan Cederholm: Hello Paul!

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

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

Paul: Just go with the flow, its fine.

Dan Cederholm: I will. (laughs some more)

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

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

Paul: Okay

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

Paul: Depends on what then? (Paul laughs)

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

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

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

Paul: Sure.

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

Paul: Mmm Hmm

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

Paul: Right

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

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

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

Paul: Yeah.

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

Paul: Mmm Hmm.

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

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

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

Paul: Yeah.

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

Paul: Yeah.

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

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

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

Paul: Right.

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

Paul: Yeah.

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

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

Dan Cederholm: Right, exactly.

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

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

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

Paul: Yeah, I do too.

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

Paul: Ok so what…

Dan Cederholm: Having that control is important.

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

Dan Cederholm: Right.

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

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

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

Dan Cederholm: Oh, right.

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

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

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

Paul: There’s no perfect solution here.

Dan Cederholm: Yeah, there really isn’t.

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

Paul: Bleh!

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

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

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

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

Question of the week

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

Show 95: In honour of the the RAF

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

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

Podcast: Download (24.9MB)

Download this show.

Launch our podcast player

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

News and events

The Rissington Podcast

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

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

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

Net Promoter Score

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

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

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

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

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

Try it on your next project.

15 Excellent Examples of Web Typography

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

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

Social net offers new perspective

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

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

Bill writes:

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

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

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

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

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

Marcus’ bit: Project timescales

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

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

Clients are guilty of this too.

This is what usually happens:

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

Be honest from the start

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

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

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

Don’t forget you have other clients

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

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

Educate

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

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

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

Paul’s corner: Social networking for sales

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

Ask the expert: Ben Hunt on marketing a web business

Ben:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Show 94: Flickr Features

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

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

Podcast: Download (25.3MB)

Download this show.

Launch our podcast player

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

News and events

Developing your designs with the client

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

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

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

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

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

Become a better illustrator

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

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

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

A new approach to stopping spam

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

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

Photoshop secret shortcuts

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

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

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

Great stuff. Definitely worth checking out.

Marcus’ bit: Using client references

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

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

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

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

Don’t just assume

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

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

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

Vary the list

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

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

Paul’s corner: What we can learn from flickr

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

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

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

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

Patrick:
Yeah, I keep busy for sure.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Patrick:
[Laughing] Yeah, exactly.

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

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

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

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

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

Patrick:
Certainly.

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

Patrick:
No problem. Thanks for having me.

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

Show 90: Digg

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

On this week’s show: Marcus abandons Paul to go on holiday. Paul talks about competitive analysis and does an in-depth interview with Daniel Burka, the creative director at digg.com.

Podcast: Download (22.1MB)

Download this show.

Launch our podcast player

News and events | Daniel Burka talks about Digg | Competitive analysis

Hello? Is anybody there? I am so lonely, nobody to talk to, nobody to rant at, nobody to take the piss of! Your listening to boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and this week, I am sad and alone as Marcus is away on Holiday (or should I say vacation?).

I have to say it is not the same without him. Of course on the upside in many ways its a lot better. Less waffle, no interruptions, no skype problems and you get to hear my undiluted genius. So thats okay then :)

Because we don’t have Marcus around this week, todays show will be a little different. For a start Marcus wont be saying much, which should make the show shorter. However, in his place we have an extended interview with Daniel Burka the creative director at the social news website Digg. We cover loads of stuff from the difference in designing for social networking sites to working with AJAX and designing for the iPhone.

I will also be doing my segment as normal. This week I will be providing a quick and dirty introduction to competitive analysis. We will be looking at what you can learn from your competitions websites and how you go about extracting the maximum amount of information.

But before we can get into all that good stuff we first need to look at what has been happening in the world of web design over the last week.

News and events

Eric Meyer tries to prevent history repeating itself

First up in the news segment of the show today is a passionate call to action by Eric Meyer. Like myself, Eric has been working in the web for a very long time and is all too familiar with the problems of the past. He is a veteran of the browser wars (how dramatic does that sound!) and remembers the many problems that period caused.

During that time many web designers simply gave up trying to support multiple browsers and instead displayed the now famous message…

“Your browser is not compatible and must be upgraded”

It is therefore particularly disturbing when we thought those days are over to see the return of a similar message. As Eric points out in his post, those types of messages are returning in the form of…

“This site is for iPhone users only.”

As Eric says: Stop it! Stop it right now. He is absolutely right. There is no reason whatsoever for shutting out users from viewing iPhone optimized pages. Sure they might not look as good on a non iphone browser but other than that they should work fine on a compliant browser. To be honest, even if they don’t, that is still no reason to block non iphone users. If I choose to look at an iphone site on my Windows mobile device or even on my desktop browser, I am not going to expect it to look perfect. However, I could have all kinds of reasons for wanting to do it from wanting to check out the functionality to using an alternative mobile browser that is just as capable of displaying the content.

In Short, Eric argues (and I whole heartedly agree) that the “best viewed in…” approach to web design is a fools errand. Whether it is the iphone or something else, make sure you avoid that road at all costs.

6 Keys to Understanding Modern CSS-based Layouts

Talking about best practice, Jonathan Snook has posted a helpful article for those of you still struggling to move across to modern CSS-based layout.

As Jonathan says in his post…

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

Jonathan addresses this challenge by talking about 6 key principles that will help you get over this hump. He talks about; the box model, floating columns, sizing with ems, image replacement, floated navigation and sprites.

Its an interesting list although I am not entirely sure I would include the same items. For example there is no mention of HasLayout or IE conditional comments. However, Jonathan does say it is just his take on things and encourages people to add suggestions in the comments so they are definitely worth reading too.

How to mix fonts

So you might be listening to this feeling smug about your CSS skills but how are you with typography? Working with type is a challenging area and one that is very easy to get wrong. That is especially true when trying to combine multiple fonts together in an effective way.

Fortunately, David who listens to the show, has sent me a link to a cheat sheet on mixing typefaces. Not only does it provide specific examples of typefaces that work well together, it also gives you some basic information on typography.

I am a great fan of cheat sheets and have a number pinned to my wall including my much loved microformats cheat sheet. So, if you are looking for some advice on typography add this to your collection.

Making money through forums

My final news story for this week’s show comes off of the back of a story knocking around here in the UK. A number of large companies have pulled their advertising off of Facebook following the discovery that those ads were appearing on the profile of the BNP (a pseudo- fascist political party in the UK). These companies were unhappy that their brands being associated with the organisation.

This Facebook story is indicative of a wider problem that advertisers seem to be having with social networking sites and forums in particular. So the question then arises, can you make money from a social networking site?

For most of us this is not a question we have to deal with. Most of us don’t run social networking websites. However, many of us do run forums and we are looking to make a bit of extra cash from them.

If that is you then you might want to check out “Can forums still make money?” on sitepoint. This post suggests a load of ways you can improve your return on your forum and make some cash to cover hosting costs. The post is very realistic suggesting that the vast majority of us are not going to get rich from our forums. However, it might help pay for your cleaner (which is what I spend my Adsense revenue on!) and so it is worthy of your attention.

As a slight aside before I wrap up the news segment of today’s show, the article also links to some useful tips from Google about maximizing your return from Google Adsense, so you might want to check that out too.

Talking of social networking websites, that brings me on nicely to my interview with Daniel Burka from Digg…

Daniel Burka talks about Digg

Paul: Okay. So joining me today is Daniel Burka the lead designer/creative director/God of all things user interface at Digg.com. Is that a fair way to describe you Daniel?

Daniel: That was a very polite introduction. Thank you very much.

Paul: Well, it is always good to butter up the guests at the beginning…

Daniel: [laughs]

Paul: I find it goes down better that way. [laughs] So Daniel, I thought that it would be great to get you on the show, simply because you seemed to have worked so extensively with web projects centered very much on social participation and web applications, you know, and various other Web 2.0 buzzwords. Obviously Digg.com is a good example of that. And a lot of listeners of this show are still working on content heavy brochure-ware type sites. But, they seem to be really interested in more interactive elements to their site. And so we thought, let’s get an expert on the show that seems to specialize in this area. So, here is my first question Daniel. What do you see as being the main differences between designing and social networking sites, compared to more traditional content heavy sites that I am sure you have worked on in previous lives, so to speak?

Daniel: Oh yeah, I mean absolutely. I worked on those kinds of sites in the past. The big difference with something like Digg is that all of the content on the site, pretty much, is provided by users and so we're building conduits as frequently as we can where people can provide their input, provide content you know foster discussion, these kinds of things so I guess wherever possible we're not only designing the technically areas that they can do it but focusing the design on encouraging them to participate.

Paul: So how to you do that? How do you encourage someone to participate in using kind of design tools and design approaches?

Daniel: Right. I guess the big thing is to make it obvious that other users have provided content to the site. So, making it clear that the Digg count went up because other people you know dug the story. You know, showing which users submitted certain things or which user made a comment. You know that indicates, Oh okay. Other people, like me, have participated and that might be something I might be able to do too.

Paul: So how did you deal with the kind of early days before Digg had really taken off? Where perhaps you had less content than you do now and you kind of want to give the impression that there is loads going on, when perhaps here isn't?

Daniel: Right. I guess by the time I got involved in Digg which is about 4-5 months after it had started. So Kevin and Owen originally developed the site.

Paul: Oh okay

Daniel: And then they hired the company that I work with in Canada. They hired us to come in and basically do a design review and redesign of the site and that was the primary focus of the redesign was to look and say, Okay, what is this site about? And what the site is about providing input and so the original design which was more definitely designed from an engineer's perspective. It had all of that content, it had all of the facts and the bits and the place to Digg something, but it wasn't very clear at all what you should do or why you should do it.

Paul: Hmmm.

Daniel: And so, you-know probably the most interesting thing I have ever done on Digg was to take the Digg count, to make it really big and stick it on the left and stick a really explicit Digg It button under it. So, I mean that's clearing indicating X number of people already participated.

Paul: Yeah.

Daniel: And if you want to participate hit the big button.

Paul: Yeah. The kind of putting right in front of peoples face where they can't possibly miss it, so to speak.

Daniel: Right. I mean that is the entire purpose of the website is to, you know, say you like something.

Paul: So what other kind of things did you implement in those early days when you came in and started redesigning the site?

Daniel: The original focus, I actually thought this was a kind of interesting approach to take. Steven and I were looking at the site and trying to determine that. It already, in some ways, had a fairly large scope to the website. So we were trying to determine where do we get started. Often that is redesign the look of the site or redesign the home page. We looked at it and what is the most important thing here and the story format, I think, was probably the most important thing about Digg. And so we looked at each individual story in the list. There is a whole row of them on the homepage. We got about 15 on there now. And kind of a singled one of those and dissected it and said, What is important about a story? Why did the user submit it? Why is another person going to be interested in it? How do I encourage them to participate into that story? And so, that story format counts for a few different iterations since we started.

Paul: Hmmm.

Daniel: I think that being the primary focus of ours.

Paul: I mean what about the kind of more rich elements that you started to introduce? Where there is a lot less page refreshes that perhaps there once was and you kind of changed the way the people interacted with the site by introducing AJAX and things like that. I mean was that a big shift? What kind of thinking went into that process?

Daniel: Absolutely. I mean that is critical to Digg's success. Owen and Kevin had already started playing around with AJAX and this was before anybody like Jesse James Garrett that coined the phrase, AJAX. So, we were still calling it Asynchronous Javascript and XML request. Thank God someone has shortened that. And the fact that you are requiring mass participation to make something interesting would be entirely stymied if we had forced a page reload every single time a person wanted to participate.

Paul: Ummm.

Daniel: So we are using that all over the place. The Digg It button is the one real obvious place. And then you know especially in the comment system. There are various other areas where we're basically allowing you to have a really low-threshold of participation. No long page loads. Immediate reaction that what I did I got a reaction back from that, so I get that positive feeling.

Paul: So how does that kind of process work within Digg? I mean are you actually involved in coding the AJAX elements or do you just do the user interface? How do those kinds of accountabilities split up?

Daniel: Right. I guess we've got a really good balance I think between the development and the UI design. We are really tightly integrated with the different teams. And we are getting big enough now that we can actually speak about them as teams. So generally the flow at Digg starts with it's great we have a really design focused process here that Kevin will come up with an idea and then he and I will bounce the idea back and forth usually and figure out what the pros and cons are and then kind of rough out the design aspect. And then, basically take it from the conceptual stage code it statically and then work with the developers in terms of coding the functionality into it. So I don't do a lot of PHP or very much Javascript, but I provide with them XHTML and CSS and obviously the images and work with them implementing the basic flows.

Paul: I think a lot of the impression I get is a lot of organizations is still struggling to work out whose responsibility is the AJAX elements. It's kind of client side stuff that is very user-interface oriented. So should it be a designer job or is it kind of so intrinsic in the kind of connecting to the database and pulling out the content and that kind of thing which is actually a developer's job? It's quite interesting to hear how different people do it.

Daniel: Right. We probably fall into the developer's side of things. You know, it is submitting content to the database which is not horribly different than a normal form submitting to the database.

Paul: Yeah.

Daniel: So that is probably how we line it up.

Paul: Yeah. You guys seem to be doing some interesting things at the moment. One of the things that I imagine is particularly challenging is that you got a tech-savvy audience which is where Digg started. But you're constantly at the moment in this process of broadening that audience out to be more of a mainstream audience. And I'm just interested from a kind of design point of view, and user-interface point of view, what challenges that has presented you as far as shifting that audience. You know kind of in-mid process if you want. Most websites have a fairly good idea of who their target audience is upfront. But you are having to adapt that as the site evolves and I imagine that must be tricky at times.

Daniel: Oh, absolutely. I mean we started off as you said as very a tech-heavy site at about this time last year. I guess just over a year ago we broadened out very explicitly by introducing other content areas to the website. As we grow, and as a less tech-savvy audience comes in, there definitely is a real dichotomy between the perceived power-user who understands the very complex form type systems versus people who barely used a comment system on a weblog. On different areas of the site that level of experience I guess really comes to the fore. Although, I think I really take inspiration from the FireFox Project in that regard – particularly in Van Gudgers response. He is one of lead engineers on the FireFox Project. One of his best qualities being saying No! during the FireFox development and a lot of power-users perceive that they want all of these options at their finger tips. They want a hundred different options, if there are a hundred possibilities. Where as, in reality, having a simple system actually works better for both the power-user and the relative novice. I think the correlation between what happened with the Mozilla Suite, which was the previous iteration before FireFox which had a lot of different features and a lot of different buttons and customizability, versus FireFox which is really the torn-down simple browser. Which really ended up serving both audiences better.

Paul: So have you had the kind of guts to take functionality away or are you more kind of hiding it away so that it is still accessible to the power-user wants to go and get it?

Daniel: Well that is definitely the balance that we try and make. I think hiding the functionality is actually I was just reading a book a friend lent me. John Maeda’s book The Laws of Simplicity and he covers this subject. I think that it is really interesting that you can hide functionality as long as it doesn't feel intimidating and as long as you are not obscuring the functionality. I think you can actually, quite successfully, create a simple site by tucking functionally under the right areas, I guess.

Paul: That struck me. This whole idea of dealing with different types of audiences is a very challenging area. You have been at Digg for a while now, what has been the most challenging aspect from your point of view?

Daniel: Well, I think managing user feedback is definitely one of the big points of working at Digg. It is very intimidating working on a site where, every time you want something new, you have about 2 million people seeing it the next day and giving you their feedback on it. It is fantastic! It is really inspiring and exciting – and at the same time horribly intimidating. It is hard not to get frozen-up when you are about to launch something in two days and you kind of have to brace for the criticism because you know that people are going to be critical. And I mean that in the positive sense. They are going to critique what you have done. And so, being able to basically listen to a wide range of opinions and make sure that you are listening to everyone. But, you don't necessarily do what everyone says because there are obviously people with conflicting opinions and there are people who have very specific interests that may or may not be reflected by other people. I think managing those expectations that people want to know that you are listening to them and they want to see their suggestions reflected in what you are doing. Balancing those types of expectations is a really challenging part of the job.

Paul: So how do you go about that? How do go about deciding which suggestions you are going to implement and which you are not? Do you have some kind of process for that?

Daniel: I'm not sure if it is horribly formalized. I think the first and really important thing that we've learned at Digg, and I have learned on other projects being worked on, is taking a really deep breath. People will immediately ask for feedback on something, the minute you launch it

Paul: Yeah.

Daniel: They will ask for change. So don't make a change for the first week, unless they point out obviously drastic problems that you didn't anticipate. Take a deep breath. Let people give their feedback. Let them get some experience with the change because people are adverse to change generally. Their first reaction is going to be, Well I was familiar with it the other way, now it is different and I don't feel comfortable with that. And so, you will get a lot of feedback in that regard. And then carefully go through and filter and look for themes of feedback from different people. Try to determine why they were giving that feedback. And then iterate from there. I think that iterative process is so important.

Paul: One of the things that I think everyone has noticed recently about Digg, is that you released this iPhone interface. Everybody is going on about the iPhone endlessly and I am hugely jealous that we don't have it over here in the UK. And so, I am obviously bitter and twisted about it.

Daniel: [laughs]

Paul: But, putting that aside there is this plethora of iPhone applications coming out and Digg is one of the people who have done it. Were you involved in that putting it together?

Daniel: Yeah, absolutely. Joe, who is one of our developers, kind of came over and he was talking about it and was thinking it would be a great idea. And we both kind of got excited and pumped the whole thing out over our weekends.

Paul: Ahhh.

Daniel: Big props to Joe Hewett, who is not the Joe who works here, but Joe Hewett has made this great framework basically to start developing for iPhone applications in Safari.

Paul: Ahhh.

Daniel: He actually released a prototype of it on Friday afternoon. I think? And we started off from there and started developing. That is what does the sliding effects in our interface.

Paul: Okay.

Daniel: And we kind of took what he had done and I think we launched on a Tuesday the next week and on Wednesday Joe had already refined it and made into a kind of framework more people could use. So it was very useful to us.

Paul: So how do you feel about that, because that is a very different interface to be developing? It is much more controlled. You know the browser you are aimed at. You know the screen size. Was it a pleasant experience?

Daniel: Oh, absolutely. It was really really fun. I mean, there were a few things that were really fun about it. One, you are absolutely in that controlled environment. I mean people aren't resizing there fonts. You have a controlled number of fonts. You know the resolution. You can accommodate for when you flip the screen and it goes to wide-mode. And plus you are working with a rendering engine that doesn't suck.

Paul: [laughs]

Daniel: So it is really fun. [laughs] I mean you can even use advanced Webkit only type rounded corners and all kinds of fun stuff like that so, that part of it is really liberating. I can just imagine if all web design was like that. You know if all browsers were actually as standards compliant as they think they are. So that was fun. But, I think the most interesting thing is that you're working with an input device that is this big-fat-honking finger. And so, everything you do you have to be thinking about that. I think it will be interesting to see who succeeds at developing applications like that. But, you really have to think about pairing things down.

Paul: Yeah.

Daniel: When you are clicking with a finger there is no way you can have four or five buttons in a row and expect the person to be able to pick one out when they are sitting on a bouncing bus, with this phone in their hand. And so, buttons have to be really big. The Digg button on the source pages for instance is about two and a half times bigger than one on the normal site. And the links, we considered two different links. One to go to the source and one to go to what we call the Permalink page, the story page, of that particular item. But you know, even having just two buttons per story was much too difficult on the iPhone so we just have one you just can't miss which is a big finger button and it slides over and you get the story.

Paul: Yeah. Do you think you will be doing kind of more with Digg where you are kind of delivering the content, through other various mechanisms; such as the iPhone? I mean, could you imagine doing stuff with desktop applications like using AIR or anything else? Is that an area that you think you would get into?

Daniel: I think the really exciting thing is that we are finally getting a proper API out there. And so, I guess we launched the API maybe two or three months ago. Maybe longer than that, I forget, but I think it will be really interesting to see you know if a desktop experience of dig is really valuable somebody is going to pick up that project and go with it.

Paul: Sure.

Daniel: And they'll develop it on the API. So, I'm not sure if explicitly if a desktop application will be great, but I could see it having certain benefits and maybe toying around with the idea ñ for sure.

Paul: Is there something personally you are interested in as a web designer doing, you know, it's a different medium again isn't it? You're going from a browser based environment to a desktop environment. Is that something that interests you personally?

Daniel: Oh, absolutely. I think it is interesting that those lines are really blurring. I mean, AIRs is that first salvo, in that regard, you really are to a large degree developing a web application. You can develop it in HTML and CSS with basically the same skills it takes to make an iPhone application, or a basic website, you can build an AIR app. That is pretty exciting. I think that once that platform matures, it could open up a whole range of things.

Paul: From a personal perspective, what is the area of your job that you most enjoy?

Daniel: I really enjoy trying to make things easy for people. Sometimes is really irks me if Kevin describes my job as making things pretty.

Paul: [laughs]

Daniel: I think it is such a minor part of design. You know it is an interesting one. But I think sitting down trying to determine, when you are looking at a fairly complex system you are trying to build, and trying to figure out how to not be complex. What to takeaway, how to design something so that it feels simple by putting the really important things upfront. And throwing it by some users and watching them how they do it. I think it is really exciting to see somebody participate in something that is under the hood really complex, but which they have fun and they feel that they are participating. And they do not put a lot of thought into what they are doing, they are trying to achieve what they came to do.

Paul: What about the fact that you kind of have been working on Digg for a prolonged period of time and it is that one site you have been working on continually? I guess because I work for a web design agency where I have a series of clients back-to-back and I am doing different things the whole time. Sometimes it strikes me that we're working on a project for a prolonged time is both a blessing and a curse. I just kind of wondered, what you think? Do you really enjoy being able to spend time digging into that one area?

Daniel: That is a very interesting point, because I also come from the web design company background where I basically would do a different project every month. And until December I was still fairly heavily involved in the day-to-day affairs of my previous company, so it has been a reasonably new experience for me

Paul: Oh I didn't know that.

Daniel: To be working solely on one site, with Pounce on the side. [laughs]

Paul: Yeah. [laughs]

Daniel: Another site I have been working on. So this is really very interesting. Absolutely, there are so many things fantastic about it. It is really fun to be able to go into great detail and have the time to go back into something you designed previously, and to alter it. It is not necessarily that you made a mistake, but a month later you suddenly realize that a big improvement to that would be if I did X. And so you actually have the opportunity to go back and do those kinds of things. Where as I am sure, if you were working with a client, it has happened before that you know six months later you see something you say it is obvious to me now but it is kind of out of your control. The contract is over. You know

Paul: Yeah

Daniel: They're working with a different firm. There are all kinds of things like that. And so, working on something as big as Digg it is really fun too. Within Digg there are lots of different projects. There are different pages. There are new things we are working on. And so you kind of I guess segment them into kind of different projects you can go around in a circle and come back to later on.

Paul: Do you ever envision a day where you throw out the existing user interface and apply a new one? Or do you think it will always be a kind of evolving iterative process?

Daniel: Oh, I think an iterative process for sure.

Paul: Yeah.

Daniel: I don't want to second guess what is possible in the future. We may have some brilliant idea or new technology that blows our minds. But, I think there is no reason to throw out something that is working pretty well. I think there is a kind a rush sometimes to you know, to start from scratch that real desire to start from scratch sometimes. But something like Digg, I mean it has changed fairly significantly over the last two years, but I don't know if too many people notice

Paul: Yeah.

Daniel: Other than a few big pushes we made, that things had changed much. I think that is really healthy that people become familiar with systems. They learn how to interact with them. And to really shake them up, you really better have a damn good reason to do it.

Paul: Yeah. Okay so last question then before we finish up. Is there any stuff that you are working on with Digg that you are allowed to talk about [laughs] because obviously there are things you are not allowed to talk about.

Daniel: Right.

Paul: But the stuff that you are allowed to talk about, what is really exciting you and what are you really enjoying getting into at the moment?

Daniel: Oh, there is a bunch of things. I think I am allowed to talk about that Kevin mentioned the other day that we are working on the images section.

Paul: Cool.

Daniel: So we are going to do right now you can do news and videos. And we are pretty confident we are going to get into images as well. And so we are working on a couple of projects to kind of lay the framework for doing that. So, some people think it is as easy as adding a section

Paul: Yeah.

Daniel: And putting a title on it. But if we want to do that, we want to do it the right way. And lay the ground work first. I am working a couple of things I cannot go into great detail unfortunately there so much secrecy here that we can't

Paul: [laughs]

Daniel: Layout too much of what we are up to. But, I am really excited that we are headed in this direction.

Paul: Yeah. The trouble is that you guys get ripped off so quickly, don't you, that you need to keep things quite.

Daniel: Well. I think it is a combination of problems. One is that we are obviously concerned with people duplicating our features and the other one is that we want to be careful setting expectations. Because if we say we are going to do something, we really want to do it.

Paul: Yeah.

Daniel: And I think people will get disappointed if we say, In two months we are going to launch such-and-such. and you know lot's of stuff happens in two months. And unfortunately if that had to get pushed back, and that two months was a totally random date that I pulled out of my head

Paul: [laughs]

Daniel: [laughs]

Paul: See know, we all believe that it is all going to happen in two months.

Daniel: Shoot! [laughs]

Paul: [laughs]

Daniel: [laughs] People will be disappointed or they will feel like we haven't lived up to their expectations I suppose.

Paul: Yeah. Okay. Well that was really great. Thank you very much for coming on the show Daniel. No doubt we will try and crowbar you again in the future to come and talk to us about Pounce as well. Because that is an exciting project.

Daniel: That would be fun.

Paul: Okay thank you very much for your time and talk to you again soon.

Daniel: Thanks so much for having me.

Paul’s corner: Quick and dirty competitive analysis

Great stuff from Daniel! It was really fun to speak to him even though I managed to offend him after we stopped recording by calling him an American (he is Canadian). Hopefully he will forgive me for the ultimate crime!

Okay, so before I wrap up today’s show lets take a quick look at the subject of competitive analysis. Its actually a segment I have just written for the book I am working on and so I thought I would share what I have covered. The idea is not to make you an expert in the field but simply to allow you to extract as much information as possible from your competitions websites in a quick and easy manner.

As always I have written this up as a blog post entitled “Quick and dirty competitive analysis” so check that out in the show notes if you want to see exactly what I covered.

No show next week

So that is about it for this week’s show. Remember that there will be no show next week as I am going away on holiday too! Yippee! However, if you need your boagworld fix don’t forget you can check out the forum and chat with other people about the poor quality of Marcus’ jokes.

Show 88: Two fat ladies

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

On this week’s show: Paul shares some thoughts on recording your creative ideas, Marcus discusses setting up a web design company and we review the Principles of Beautiful web design by Jason Beaird.

Podcast: Download (19.7MB)

Download this show.

Launch our podcast player

Housekeeping

Before we get into the news there are a couple of housekeeping items I want to share with you all…

Eric Meyer Competition

In last week’s show we ran a competition to win a free ticket to Eric Meyer’s upcoming London workshop. The response to the competition has been truly phenomenal with a surprising mix of answer to our question…

“In which episode of the boagworld podcast did I first mention the subject of web standards?”

The answer was actually the very first show although we did have many suggest it was show 2. Although Show 2 was dedicated to web standards they were actually mentioned in the very first episode. Very well done to all of those of you who spotted that little trick in the question.

Anyway the winner, selected at random from the correct answers is… John Thixton.

Congratulations John, we will be in contact shortly to get you signed up.

Thanks very much to the guys over at Carson Systems who were kind enough to supply us with the free ticket. Don’t forget that even if you didn’t win you can still sign up for the workshop on the Carson systems website.

100th Boagworld

Next up, you may remember that a few weeks back we talked about the fact that we wanted to have a little celebration to mark the 100th episode of the boagworld podcast. Well, thanks to the organizational skills of Ian Forrester we now have a date and a venue. We will be recording the 100th episode of boagworld live at Ye Old Cock Tavern, London on Saturday 20th October 2007.

As well as recording the show live we are going to put a big wad of cash behind the bar so there should be free drinks for a while. We really appreciate all of the support you guys have given us over the last couple of years and want to in some way say thank you.

If you can possibly turn up it would be great to see you. Book it in to your calendar and sign up on upcoming. Please take the time to sign up on upcoming because it gives us an idea of how many people are coming.

News and events

Web redesign is a bad strategy

My first news story of the week is yet another post by Gerry McGovern. This article definitely makes up for his previous post about the best sites being ugly sites! This time around he talks about a particular passion of mine. He argues that website redesigns are nearly always a bad idea and that it fails to address the underlying issues.

This is certainly a position I have held for a long time. I believe that sites should evolve instead of going through a succession of wholesale redesigns. McGovern argues that redesigns too often happen for the wrong reasons such as changes in management, boredom, or a feeling the site has fallen into disrepair. I couldn’t agree more and would encourage people to think twice before complete overhauling their website.

YSlow for Firebug

Those lovely folks over at the Yahoo! Developer Network have been kind enough to produce a great plugin to the firebug firefox extension. I have spoken on the show before about how firebug provides loads of useful functionality to web developers including the ability to edit, debug and monitor both CSS and Javascript on live sites. However YSlow adds to that already impressive line up of functionality.

YSlow analyzes web pages and tells you why they’re slow based on the rules for high performance web sites. It analyzes any web page and generates a grade for each rule and an overall grade. If a page can be improved, YSlow lists the specific changes to be made. It also calculates the total size of the web page for both empty cache and primed cache scenarios, as well as information about cookies. Finally, it lists all the components in the page allows you to view the HTTP response headers for any component.

Find redundant CSS selectors

Talking of useful development tools for firefox, you might want to check out the Dust-me selector which has been released by the sitepoint guys this week. The dust-me extension helps you find unused CSS selectors.

You know what it is like. Maybe you are working with somebody else’s CSS file or maybe you are working on an old website and can’t remember what you have done. Whatever the case you don’t know what half of the CSS selectors do and so dare not remove any just in case they are used somewhere. Enter Dust-me.

Dust-me will monitor the pages of a website you surf around making a list of any unused styles it finds in attached stylesheets. The list is constantly updated as you move from page to page. Once you have looked around the whole site you end up with a definitive list of styles which can be safely removed. Nice!

Although this is useful I am sure there must be something out there which scans all of the HTML pages and saves you the effort of navigating around the site. If you know of such a tool post it on the show notes.

Marcus’ bit: Setting up a web design company

We got this question from Ali:

Have you done any podcasts on how to start a business? More specifically a web design company such as the one you have. Just a request if you have not done a podcast, could you have a whole one dedicated to starting a web design business. I mean how to start one, start with business plan or just start one day building websites for various people and build your own portfolio?

We have previously discussed the aspects of running a web design company, recently covering who you should look to employ and a little bit further back a fairly long piece where Paul and I reminisced about setting up Headscape. However, we haven’t really looked at the initial set up properly.

Though we’re not going to dedicate the whole podcast to it, I thought I would cover some of the things you need to think about.

Business plan?

To be totally honest, unless you are looking for funding, then I think writing a business plan is a waste of effort. I do think it is a good idea to write down what you want from the business and how you think you want the business to be viewed – in essence, a mission statement (though it has to actually mean something!).

It is also worth asking yourself where you want the business to be in 2, 3, 5 and 10 years time. Keep reviewing and don’t be afraid to change as your views and your business changes.

Coming back to funding; unless you are looking to develop a product and therefore require R&D time (and therefore backing) you shouldn’t really need any funding. If you can run your business from home the set up costs are fairly minimal.

Forecasting

Running a web design company, from a business point of view, can be a fairly nervy existence. Put simply, there is only so much work you can take on at any one time and clients will rarely wait for you to be ready, so there is always a point in the not too distant future (1, 2 maybe 3 months) where the work ends.

Therefore, not only do you need to be out there pitching for work, you also need have a good idea of what you need to make each month to break even. This takes thought and usually the input of someone with some accountancy experience. Producing an annual financial forecast has been invaluable to us as we know exactly where we stand throughout the year.

Keep a close eye on productivity as this is the bane of the fixed price service business. It’s very easy to get excited about a big new contract but they are usually the ones that end up being priced badly, take much longer to complete than originally expected and therefore ending costing you; not only on the visible bottom line but also in lost sales because you couldn’t take on new work.

Keep searching for new clients

When a business starts it tends to rely on a handful of clients to survive. This is perfectly normal but it means that young businesses are placed at risk if they lose one good client. I have always said that sales get easier and easier as time moves on based simply on numbers. In other words: the more clients you sign up, the more referrals you will get.
So, in the early days, make a particular effort to gain new clients as well as relying on existing ones.

Ok, that covers some general good practice, but what about some of the more detailed stuff.

Decide on branding

Here’s a few fundamentals:

Company name
URL – Obviously relates hugely to the previous point!
Logo/ corporate ID – you will need letterheads, business cards, invoices etc
Build your website – much as this is the biggest pain possible, it is fundamental. In the beginning it’s that old rock and hard place scenario where you can’t win new web design work because you only have a holding page, but you can’t build the site because you are working on precious paid work. I wondered recently why I tend not to work so many evenings as I used to – now I remember!

Boring stuff

You will need to register your company. In the UK this costs money, not a great deal but you will need to do it.
Limited company, partnership, sole trader? Take advice from professionals on this and other items here.
Insurance – I covered this in a recent podcast so I won’t go into detail, but you do need to look at:
- Professional indemnity
- Public/product liability
- Employers liability
- Key man
Contracts – you need to sort out your standard contract documentation before you start and make sure that it is used for all jobs.

Pitching early on

Even though it can feel like you don’t stand a chance against more well-established agencies, you do hold a few aces:

You have fresh ideas
You’re keen
Even though your company doesn’t have a much of a portfolio, there is no reason at all why you can’t demonstrate work done at previous companies as long as you’re honest about it and explain, in detail, about your role
You’re cheap! However, don’t continually undercut your own margins or you won’t be in business for long. Be prepared to walk away… be prepared to walk away!

Initial prospects

This is when friends, family and old work colleagues come to the fore. Even though I have just pointed out some of the good points relating to early businesses, gaining some business ‘easily’ through your contacts is highly recommended.

The cost of sale is usually much less so, again, you are helping out that bottom line and giving yourself more time for production work and pitching.

Consider outsourcing

Finally, try to build up a group of trustworthy contacts that you can outsource to a) when it gets really busy and b) if there’s a part of a project that is outside your skillset.

Paul’s corner: Recording creativity

I like to think of myself as an ideas person. I guess that is another way of saying that I am crap at implementing the ideas I have. One problem I used to suffer from was recording the ideas I had in a form that I could refer back to later. Overtime I have developed a couple of techniques that help me manage my ideas better. Whether you are a designer, developer or website owner, we are all required to be creative in our jobs. We are all looking for ways to become more creative. With that in mind I thought I would share some of those techniques with you.

Review: The Principles of Beautiful Web Design

This week I have received probably the most sarcastic and rude question ever to be sent to me. However, at the heart of all that cheek there was actually a very good question…

Once you have got to grips with the basic of HTML and CSS where do you go next?

Its a good question and there are a lot of potential answers to it. However one of the more sarcastic comments that surrounded the question made me think that perhaps the next step is to ensure a good grasp of basic design principles such as layout, typography, imagery and colour.

This in turn made me think of the book I am reading at the moment, “The Principles of Beautiful Web Design” by Jason Beaird.

Jason’s book really is a basic introduction to good design practices for the web. It is ideal for developers, amateurs or indeed anybody looking to improve the look and feel of their website. It is made up of 5 chapters each dedicated to one aspect of good design; layout, colour, texture, typography and imagery. It really is very good and talks a lot of real sense. I could imagine this being very useful for web site owners who want to understand the design process better and be more informed when signing off designs submitted to them by an agency.

However, what surprised me the most was how useful i found it myself (as somebody who calls himself a designer). I was intending to have a quick flick through the book so I could get the gist of what was being covered. However, I found myself being drawn in by Jason’s friendly writing style and by finding myself continually going “oh I forgotten about that” or “I really should spend more time doing that”. In short it works as a useful reminder service to designers too.

Check it out. Its a worthwhile read if you want to go over the basics.

Emerging design trends

Posted in Design on July 16, 2007 by Paul Boag

Web 2.0. brought with it a lot of things. One was a new style of design. However, design is a fickle thing and we are already seeing some new trends emerging.

Gradients, reflections, drop shadows and rounded corners are all classic elements of web 2.0. design. For a while now these kind of stylings have dominated emerging websites. However, I have started to notice a shift recently and I have to say I like what I am seeing. Below I outline a few of the design elements that are currently in vogue and why I particularly like them.

Don’t get me wrong. This is not to say that I think these design elements are new (many are blatantly not), I am simply saying that they seem to be becoming trendy again.

Goodbye to the Fold

With web 2.0. came bigger font sizes and bolder designs. A consequence of this was less emphasis on cramming content above the mythical line that is the fold. Although many elements of web 2.0. design are falling out of favor, rejecting the fold seems to be growing in popularity. You see more and more sites willing to embrace the idea that users do in actual fact scroll and at this years @media the whole subject was met with considerable passion!

Personally I view this as a huge step forward for design. In many ways it is as significant as the end to the web safe palette. We now know that users are happy to scroll and although it is still good practice to keep key content above the fold, that doesn’t mean everything has to be.

It was always a false concept anyway with the fold moving depending on resolution, browser type, toolbars and window size. Accepting this and moving on, is progress indeed.

Functional Footer

The footer has always been an underused page element. Often it was used as nothing more than a nice way to finish off a design and a place to dump all of the crap that we don’t know what to do with! Now however, we are beginning to see sites that actually utilize this screen element to provide supporting navigation and information.

These “expanded footers” such as you find on Apples website, are being adopted more widely and provide some real “added value” to the user. They often contain things like; contact information, related links, and about us.

Resolution dependent layout

Another feature that seems to be growing in popularity is resolution dependent layout. This is where the layout adapts based on the viewable area. The most classic implementation of this is where at resolutions greater than 800 by 600 a third column of content is displayed. At 800 by 600 the content is pushed down to the bottom of the main column.

This is quite a hard feature to explain. It is much easier if you see it in action. Go to Patrick Haney’s website and reduce your window size. As you reduce it down you will suddenly see that the third column disappears and the content can now be found at the bottom of the page.

This approach makes better use of available space than either fixed width (with its empty space) or fluid (with its long line lengths). In my opinion this approach gives a real alternative to the fixed/fluid debate.

Right column navigation

Traditionally navigation on the web either appears on the left or at the top. Right hand navigation has somewhat been frowned upon. However, more recently this trend seems to have been changing with more websites adopting it. I think this is partly due to blogs, which seem to have right hand navigation by default. However, it has always struck me as strange that the convention is towards left. If you think about it there are a lot of good reasons for right hand navigation…

It puts the content first visually
Your cursor natural hovers near the scrollbars on the right
We are familiar with right hand navigation from tabs in books
We know from usability research that whether navigation is on the left or right, it makes no difference in the time it takes to complete a task

Overall I am hugely in favor of right hand navigation and I am glad to see it becoming more popular.

Focus on content

I have also observed a growing movement towards more content focused websites. By that I mean that more user interfaces are becoming understated in order to put the emphasis on the content rather than the design.

The most classic example of this is Garrett Dimon’s blog which is understated to the point of minimalism. The entire site is built to make the process of accessing and reading the content as easy as possible.

Although this doesn’t work well for every site (where there is as great a need to build brand identity as convey information) I do think that overall this is a healthy move. Too many designers are more concerned with showing off their design prowess than they are with focusing on content. The irony is it takes more design skill to build a clean, content orientated design than something more flashy.

Emphasis on typography

Finally, thanks to people like Richard Rutter we are seeing a growing interest in typography. For too long web designers have ignored typography concluding that we are too limited in fonts to do anything useful. However, typography is more than type. It is about things like leading, spacing, and style. Much more than typeface alone.

A growing number of web designers are recognizing this and doing ever more creative things with the limited number of fonts at our disposal.

So there you go. Those are the design trends I see emerging at the moment. What about you? Have I missed anything? What other things are going on that we should all be aware of?

Right, all I need now is some time to redesign this site :)

Taking a brand online

Posted in Design on July 6, 2007 by Paul Boag

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

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

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

Typography

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

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

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

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

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

Layout

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

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

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

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

Logos

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

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

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

Colour

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

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

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

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

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

In conclusion

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

When developers design

Posted in Design on June 27, 2007 by Paul Boag

Although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.

First things first, I am not going to be able to teach you good design practice in a single post. That comes with time, training and to some degree, talent :)

However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

General comments

Before I plunge head first into specific tips I would like to share some more general comments based on my observations of when developers do design. Hopefully these will help you think of design as more than arranging pixels.

Empathy

In many ways developers work in a world of absolutes. A piece of code either works or it doesn’t. Your world tends to be very literal, very straightforward. Computers are in many ways easy to understand. People on the other hand are a very different matter. We are messing beings full of contradictions and inconsistencies. This is the world of the designer.

Designers are trying to engage with people and to do that they empathize. They try and put themselves in the shoes of the user, to really understand how they think, how they approach a problem.

One of the most common mistakes I see developers make is that they fail to do this. To a lesser or greater extent they perceive the user as being similar to themselves. They make assumptions about the users motivations and abilities. They often misunderstand what the user is trying to achieve.

If I could give only one piece of advice it would be to encourage you to empathize. Really think through what the user is like. Are they in a hurry? Do they have a specific aim? What is their outlook on life? Will they have kids clamoring for their attention while they surf your site?

Really try to get inside their heads. It will definitely help.

Avoid graphical applications

The temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.

Its hard enough to apply the principles of good design without adding learning a new application on top of it.

You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…

Don’t try and be great; be invisible

Don’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate.

Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it.

If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!

Specific advice

Okay, so enough with the airy fairy advice, lets get specific. How do you make your design good enough to be invisible, non-offensive? Well, let me suggest 5 areas that you should pay particular attention to. Obviously I could write reams on each but lets keep this very simply and easy to implement.

Typography

The key to good typography is constraint and consistency.

Avoid using too many typefaces, normally 1 or 2 is enough. Also avoid having too many variations in sizes and weighting. Only use size and weighting to emphasis the hierarchy of the content. The larger and bolder the type, the more important the content.

Also try to be consistent in your application of typography. If something is a certain size and weight on one page ensure it is done the same on another. Although CSS makes this relatively easy, watch out if you are working with ems as you may have inheritance problems.

Finally, don’t just think about the type itself but also line length and line height. Don’t allow lines of text to become too long (between 40 – 60 characters is good) because they are hard to read. Also add some whitespace between lines of text as it will make the page feel more spacious, which brings us nicely onto…

Whitespace

Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.

In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.

The grid system

You often hear people complain that a website looks boxy but in actual fact boxes are good. A good website should have a strong underlying structure of columns and rows. It helps the user identify hierarchy and communicates a sense of order in the site. Although a good designer will break out from the grid he will always have a grid structure still there underneath.

Think about how many columns the site is going to have. Ensure these are applied consistently across the whole site, but don’t be afraid to occasionally span across multiple columns. Also ensure elements are placed consistently in this grid from page to page. Do not move elements around, especially navigational elements like the menu bar and search.

A grid may seem restrictive and not very “creative” but it essential to all design.

Colour

Working with colour is particularly tricky and so I would suggest where possible you avoid making too many colour choices. Your best bet is to turn to an automated colour creator like Kuler. You can either choose from one of the existing palettes or enter a base colour (usually a corporate colour) and it will produce a palette based on that.

Notice that Kuler only includes 5 colours in its palette. This is good practice, resist the temptation to use too many colours. Apart from this site (where I was just being silly), I tend to use a very limited colour palette. One nice little trick however is to use a strong contrasting colour to highlight important content. Because it is a contrasting colour it will make content stand out from the rest of the site.

Imagery

The design work I have seen done by developers tends to shy away from the use of imagery and in someways that is not a bad thing. It is easy to get imagery wrong but I would encourage you to be a little more adventurous. Imagery is a great way to draw the users eye and so can be used to highlight key content.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…

Avoid animation.
Choice images with a strong foreground element.
Compress your imagery but not too much!
Use faces, people are naturally drawn to them.
Avoid clipart illustrations

I am sure there is more I could suggest but those are the ones that immediately spring to mind.

Taking it further

So there you go. Hopefully that has helped a little. Obviously, there is so much more that could be said, but that should have at least started you off. If you do want to take the next step and improve your design skill then check out Jason Beaird’s book “The Principles of Beautiful Web Design”.

Show 79: Despise the listener

Posted in Classic shows on May 15, 2007 by Paul Boag

A great line up this week with Paul, Marcus and Andy Clarke.

Podcast: Download (21.4MB)

We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.

Download this show.

Launch our podcast player

News and events

Google Analytics gets interface upgrade

Like so many who join Google, Jeff Veen has been forced to be somewhat tight lipped about what he has been working on. However in the last week we have finally been able to see the fruits of his labors with the relaunch of a new and improved Google Analytics. You would be forgiven for thinking that a load of new functionality has been added to the service. In fact that is not the case. The only changes have been to the user interface. The difference is that you can now find everything quickly and easily.

If like me you found the old Analytics service confusing and difficult to use then you might want to take a look at the new revised version. It is a definite improvement.

Great new articles on A List Apart

For a while I have been a little disappointed with the articles coming out of A List Apart. Perhaps they were simply too “high brow” for the likes of me but they lacked any practical application. However this issue is different. It has two great articles about handling clients.

The first entitled “Stand and Deliver” provides some superb advice on presenting your designs to a client. The second called “Educate Your Stakeholders!” talks (unsurprisingly) about educating the decision makers in a web project so they make more informed choices.

Both are really superb articles and I would definitely recommend you check them out.

Teaching the traditional web

We are all acutely aware that the web is changing at a rapid rate. At the moment the focus is very much on web applications however we cannot afford to ignore the massive number of page based sites that still need to adapt to the changing way people are interacting online. In a post called Teaching the traditional web, Keith Robinson discusses how we need to alter our approach to page based websites based on deep linking, RSS feeds and mobile access. A very enlightening read.

Baselines and vertical rhythm

Having Richard Rutter on the show a few weeks back made me acutely aware of my shortcomings when it came to web typography. Although I promised myself I would look into the subject in more depth I was a bit vague as to where I should start. Fortunately Richard has given me a starting point with a list of resources on his site that look at the subject of baselines.

I know that many people find web typography an uninspiring subject but good typography can have such a profound impact on how people perceive design that it really is worth your attention.

Client corner: Getting things done in web design

I have just finished reading “Getting Things Done” by David Allen. Not only has it seriously helped me to get control of my workload but its also made me rethink how I approach web design projects with clients. In this week’s client corner I suggest some techniques that designers and clients should use when a new project is starting.

As seems to be the default approach these days I blogged on this earlier in the week so if you want more information on what I said in the show then be sure to check out that post.

Ask the expert: Andy Clarke on CSS 3

Following Andy Budd’s recent criticism of the W3C CSS Working group it seemed appropriate to have Andy Clarke on the show to talk about the progress of CSS 3. Andy is an invited expert on the CSS working group so has the inside track on what is really happening. In the show Andy talks about…

Some of the cool layout features available in CSS 3.
The modular nature of CSS3.
The slow progress made by the group.
And the need for the web design community to contribute in the process.

Agony uncle: Insurance for web designers

We received the following question from Brian last week:

As an avid listener to your podcast – and having spent the day catching up on them while travelling! – I was very interested in a particular segment where your good self and that Lillington chap mentioned your Terms and Conditions and having, ‘…all the right insurances in place…’, with regard to setting up a business.

I’ve recently done some work with a mate – a few hopefully not-too-shabby websites – and although we think we are getting the hang of sorting out contracts now, we have never been able to settle on what to put in our Terms and Conditions. Every time I start to do it I either glaze over or start putting stupid things in due basically to boredom!

As for insurance we never assumed that we would need any for web design. Its not like we’re making nitroglycerine or heart bypass machines… so we assumed the basic rules of common sense prevailed.

To this end, if you have any advice on what insurances might apply or what sort of thing should be covering in T&C’s?

Firstly I’ll cover the terms and conditions issue, much as I don’t want to appear protective over our ts & cs, we have reached the conclusion that by providing them we are in effect providing legal advice.

This is not what we do and it’s not a path we wish to tread!

We suggest speaking to your lawyer or maybe a local chamber of commerce who could provide a standard terms and conditions contract template. I also droned on about the different aspects of terms and conditions in episode 65.

Insurance, however, is another matter. Though, again, I am concerned about making stuff up here (as is often the case!) so the majority of the following content is from Business Link. This is what we currently pay good money for:

Professional Indemnity

If you are in the business of selling your knowledge or skills, you may want to consider taking out professional indemnity insurance.

This protects your business against compensation sought by a client if you have made mistakes or are found to have been negligent in some or all of the services that you provide for them. Professional indemnity insurance will also cover any legal costs.

Public Liability

If members of the public or customers come to your premises or you go to theirs, you should think about taking out public liability insurance. This type of insurance covers any awards of damages given to a member of the public because of an injury or damage to their property caused by you or your business.

Product Liability

In product liability insurance (PLI) terms, a product is any physical item that is sold or given away.

Products must be “fit for purpose”. Under the Consumer Protection Act 1987, you’re legally responsible for any damage or injury that a product you supply may cause. PLI covers you against compensation awarded as a result of damage to property or personal injury caused by your product.

Employers Liability

Employers’ liability compulsory insurance (ELCI) enables businesses to meet the costs of compensation and legal fees for employees who are injured or made ill at work through the fault of the employer.

Key Man Insurance

Key man insurance is designed to cover you for the financial costs of losing key personnel. We still have this for Paul….goodness knows why! ;-)

Review: Looking beyond web design books

This weeks review section isn’t so much a review as a recommendation. At SXSW you are really spoilt for choice as to what to attend. In fact there is so much choice it is overwhelming. After much consideration I decided to take an interesting approach. I decided to mainly attend panels on subjects I knew nothing, or little about. Instead of going to panels on CSS or design I went to sessions on marketing and strategy. The result was an incredibly enjoyable and enlightening week.

On my return to the UK I decided to take a similar approach in my reading. Prior to this the majority of books I read where either on CSS or Javascript. However I am now trying to broaden out the range of books I read to encompass other subjects like productivity, business process, and even some sociology. As with SXSW it has been an incredibly rewarding experience and something I would encourage others to do. I have been amazed at just how much of what I have read has related in someway to my job and I believe it has genuinely improved the quality of my work.

I would really encourage others to try the same thing and would like to suggest three books to break you in gradually. Although none of these books are directly to do with web design they all include valuable lessons that you can apply to your work on a daily basis…

Show 75: Christian Bears

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

Marcus is back and talks about what to do if a client doesn’t pay. I look at clearing floats in CSS and we have Richard Rutter on the show giving us the lowdown on good web typography.

Podcast: Download (22.9MB)

Download this show.

News and Events

Blogger’s code of conduct

This week has seen Tim O’Reilly pushing hard for a code of conduct among bloggers following the vicious online attacks against Kathy Sierra. Although, like everybody else, I was shocked by what Kathy has been through and although I respect Tim’s endeavors to change the current situation, I struggle to see what good a code of conduct will really do.

Tips for Bloggers

Tom Johnson has drawn together 20 principles for a successful blog based on feedback he has received from numerous top bloggers. If you are new to blogging or trying to revive a failing blog this article is definitely worth checking out.

120 Adobe Photoshop tips

Talking of tech tips, check out this superb document of over 100 things you never knew you could do in Photoshop. As a regular Photoshop user I was shocked by just how many of these I was unaware of. For example did you know that you could:

Straighten a crooked image using the measure tool?
Access key image function by right clicking the top bar of an image?
Modify the text on multiple text layers at the same time?

CSS Vista

The wonderful folks over at Site Vista has released a superb new tool that allows you to edit CSS files and instantly see the changes in both Firefox and Internet Explorer simultaneously. Very useful indeed although currently it is only available under windows.

Client corner: Resolving payment disputes

This week Marcus answers a question from Dan in Texas. Dan has a client who hasn’t paid and so is asking whether he should take their site down or not.

The core of Marcus’ approach is to ensure good dialogue with the client. He covers the idea that prevention is better than cure by establishing clear contracts up front but then looks at what steps can be taken if things do go wrong. We also when this happened to us at Headscape and how we resolved the dispute.

Marcus also broadens the discussion to look at it from the client’s perspective. He investigates when a client should withhold payment and how this should be discussed with the web agency.

Ask the expert: Richard Rutter on web typography

Richard Rutter is one of the three founders of Clear:Left and is passionate about typography. In fact he is so passionate that he has produced a practical guide to web typography which is freely available at webtypography.net. He therefore seemed the logical choice to introduce us to the basics of using typography on the web.

Agony Uncle: Clearing Floats

I got sent a question by Dan in Texas ages ago and I promised him we would tackle it on the show. Unfortunately I totally forgot about it until I read this recent article by Robert Nyman a couple of days back. Dan was asking about dealing with floats in CSS and how to ensure that the parent of a floated item contained it. This was exactly what Robert was talking about in his post and so I have shamelessly used his thoughts in the show to answer Dan’s question. Thanks Robert ;)

Review: Question Form

I am a great believer in giving users the chance to feedback their thoughts on a site. However its not always that easy. Online forms and email are hard to collate and all of the survey services I have found online in the past are crap. However, recently I came across a site called Question Form which really does stand head and shoulders above the competition

It is incredibly quick and easy to put a survey together
It provides a painless user experience to the user
You have complete customizable control over how your form looks
It provides excellent statistics as well as access to individual responses
It offers alerts of new responses via email, RSS and even SMS

The basic account is absolutely free and the pro accounts start from as little as $10. If you are thinking of adding a survey to your site then you should definitely check these guys out.

If you fancy trying a form out then take a second to complete the boagworld podcast survey.

Show 75 Script

In last week’s show I posted the rather muddled notes I use when recording the show. This was to make up for the less than perfect show notes I provide here. This idea seemed popular so here is my script from this week’s show.

Show 72: Neverending Beta

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

On this week’s show: web stats meet usability testing, Apollo and why it is important, working with corporate colour palettes and how to sell your web design services.

Podcast: Download (24.1MB)

Download this show.

To subscribe directly within itunes click here

News and events

This week appears to be the week of never-ending betas however I have managed to squeeze in some pointless fun and an article about accessible content management systems:

Click2Map

There seems to be a growing number of tools out there that make the management of Google Maps easier. One that I have just discovered this week is Click2Map. You can easily and quickly add custom markers by entering an address (even if you are outside of the US). It is still in beta and needs a lot of work (for example you cannot integrate the maps directly into your site) but it is still great for a quick and easy way of linking to locations.

Popuri.us

Another “beta” service I spotted this week is Popuri.us. This site provides SEO reports on your site including rankings on Google, Yahoo, Alexa, Delicious and Technorati. Currently it seems to be suffering from some performance issues; nevertheless it gives a good indication of your online visibility. Of course if you are a Firefox user you may find the SEO add-on more convenient.

Finding an accessible CMS

One of the biggest complaints against content management systems is that they are often not very accessible. Gez Lemon has been kind enough to do an analysis of a whole bunch of them for us and provides a great article on the pros and cons of each from an accessibility point of view. If you are considering implementing a CMS and care about accessibility (which you should do) then check this out.

Arial vs Helvetica

So you think you know your typefaces? Maybe you are even a bit of a typography snob? But, can you tell the difference between Arial and Helvetica? Of course you can, at least that was what I thought until I actually tried.

Selling your web design services

So this week’s client corner is seriously lacking advice for clients (sorry about that). Instead Marcus takes a look at the subject of selling your web design services. Surprisingly for Marcus, he has written fairly comprehensive notes on what we covered so here you go…
You may build the best websites in the world but if you do not know how to sell your services then nobody will hire you. Web design, like nearly everything, is a competitive marketplace and simply being a good designer/developer is not enough. You also need a sales and marketing hat.
That said, it does seem that there is more work out there than agencies to do it.

Cold call?

Don’t buy databases of ‘quality’ contacts in a particular sector. I may be cynical but I reckon the vast majority of these ‘leads’ were tricked into supplying their details. You’re trying to sell solutions to your potential clients’ online problems not pallets of dog food. I my experience, cold calling is a waste of time and effort – the only way you’ll win work is if you’re lucky enough to call someone when they’re about to release a tender.
The only exception to this rule are local businesses where picking up the phone and saying ‘hi, we’re just over the road from you and we’re really good at what we do. If you ever need the services that we provide please do include us in any suppler selection process you intend to go through’. If they’re friendly why not meet up for a beer (see Love Your Clients)…

Focus on a specific market sector

If your only case study is a sewage works site then go after other sewage works sites first. This is common sense: you have a proven ability to produce a website with probably very similar features to the one the other sewage site wants. You have a real, live working example to show them and a client who will (hopefully) say nice things about you.

Tender sites

I get asked about these a lot. They are (I think) better than straight cold calling but not much. Golden rule – don’t do any speculative design work as some may be a scam. I think most of these are simply there because a lot of tenders are required to be competitive but the client already has a preferred agency. I have generated a ‘nose’ for when we are making up numbers so, if you get that feeling, be brave, walk away…
Of course, try to talk (and I mean talk not email) to the client. Be bold, ask questions about how many others are going for the project, what is the budget (we need to know to be able to provide the most appropriate solution), are the deadlines set in stone etc etc etc… If you’re getting negative feelings… guess what… walk away…
If you do decide to go for something off one of these sites, I recommend the following as a response:

boiler plate ‘Why Us’. You should already have this in another proposal. Up to 10 pages of skills, experience, examples of design work and above all USP.
No more than 2 sides of A4 of ‘your solution’ i.e. a summary.
Tasks by task breakdown of price (inc. payment terms with at least a third up front (‘on delivery’ if you’re really worried about the client!)

The trick here is to start at the bottom. Do the task breakdown first (it may put you way over budget if you know it – if so, walk away) which will lead to an obvious solution summary then tack the ‘aren’t we great’ on the front.
The idea is to put as little effort in as possible without making it look that way.
Much better idea to…

Market, market, market!

There are so many ways to market yourself. For example, you can drive round your local neighbourhood shouting through a loud hailer if you like! Headscape’s marketing effort is focussed virtually solely on Boagworld now. The point is, try to find something that you can do that you feel passionate about and will get people either ringing you directly or, just as good, recommending you to others.

Know when to walk away

It is the hardest thing in the world to do, but it is important that you know when to turn down work. There are times when the clients requirements are unrealistic or the job is simply too big. On other occasions, the chance of winning a job does not justify the investment involved in pitching for it. There is a natural tendency to want to run after every piece of work, but sometimes you just have to say no.
I got the impression listening at SXSW that the agencies I most admire (e.g. Happy Cog) simply wait around for projects that they are interested in and the clients should be damn grateful! Or maybe that was the impression that Mr Z wanted to convey.

Ask an expert: Aral on Apollo

Aral Balkan is one of my favourite speakers and this week in the “ask an expert” section he puts his enthusiasm and humour into an insightful introduction of Apollo. Apollo is a new development platform from Adobe that allows web designers to start developing desktop applications.

Working with corporate colours

This week’s agony uncle question is based on something I found in the boagworld forum. Pecko asked whether we should use Photoshop to convert corporate colours for the web or whether we should do it by hand. A lot of the people on the forum argued that you should allow Photoshop to take the strain but in the show I argue that we should do it by hand. My argument was based on something I had read before and yet I couldn’t for the life of me remember where I had read it. I eventually found it was from a brilliant article by Jason Santa Maria on 24 Ways. I hope he will forgive me for not crediting him on the show.

Review: ClickTale

I was recently asked to beta test ClickTale, a new statistics-tracking tool. Not only does it provide you with all of the basic web stats you would expect, it also allows you to watch recordings of how users interact with your site. You can see their cursor move around the screen, watch them scroll and even move between pages. The product is currently in closed beta but it is definitely worth keeping an eye on because it is extremely powerful and acts as a passable alternative when usability testing is just not an option.

Podcast 42: Choosing the right design

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

It’s not unusual to be in a position where you have to choose between more than one design for a site. This podcast may help with the question “which design do I pick?”.

Podcast: Download (30.7MB)

In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

How to approach choosing a design

Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:

Avoid personal opinions

Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.

Be careful who you show

Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.

View the design in context

It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.

Check on multiple monitors

A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.

View at different resolutions

A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.

Accessing the design

Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.

Colour

Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.

Layout

There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.

Weighting and flow

Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.

Typography

As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.

Accessibility

Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.

Usability

Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.

Branding

To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.

Imagery

The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:

Small busy images that are hard to see
A lack of consistency across the site with different styles of imagery, all mixed up together
Images that grab your attention away from content rather than directing you to it.

The golden rule

If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.

Also in this show

In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.