146. Obsessive

On this week’s show, Paul interviews Nicholas Felton about designing with data, we celebrate the return of 24Ways, and explain how community can keep users coming back for more.

Play

Download this show.

Launch our podcast player

Housekeeping

Two pieces of housekeeping before we begin:

  • First, Jaysone wrote in asking about the chat room we mention on the show. He wanted to know what it was and whether anybody could join. The chat room is associated with the shows we occasionally stream live. You can watch these shows at http://boagworld.com/live and interact with us as we record via the chat room. Anyone is welcome although you will probably need to follow me on Twitter to see when the shows are being recorded.
  • Talking of streaming shows, the next live show will be our Christmas special on the 8th December at 2.30PM UK time. The show will be an open question and answer time so either send in your questions in advance or come along and join us in the chatroom. We will also be doing a feature on this years top Christmas gifts for geeks. You can vote for your suggestions over at UserVoice.

News and events

24 Ways is back

This week sees the return of 24 Ways. 24 ways is the advent calendar for web geeks. Each day throughout December they publish a daily dose of web design and development goodness to bring a little Christmas cheer.

I am not sure whether it is the quality of the posts or that 24 Ways appears just before Christmas, but I always get excited when they return.

This year it returns with a somewhat controversial new look (personally I think it is great they are experimenting) and a whole new set of posts. They still offer a complete archive of previous posts so be sure to look through that, as well as subscribe to their RSS feed.

There is something very special about 24 Ways. I think part of the reason I like it so much is because the writers are given a free hand. They can write on whatever they want and so inevitably write about their passions. This leads to a better quality of post.

As if that glowing recommendation is not enough, I should also point out that our very own Marcus Lillington has a post coming soon. Surely that will be enough to encourage you to subscribe!

iPhone designers kit

In the past I have been slightly rude to the guys over at Smashing Magazine about their endless lists of other people’s creativity (we love them really). However, this week they have released something that is genuinely useful.

The iPhone Starter Kit, is a set of button elements and various iPhone interface options, bundled in a Photoshop PSD. The pack is ideal for mobile developers and front-end designers who need a professional way to show mock-ups or try out ideas.

You can use the set for free and without restriction. This includes both private and commercial projects. The only thing they ask is that you do not resell it.

Admittedly you may not be doing work on the iPhone right now. However, I suspect it will only be a matter of time before we will all be working on a mobile application of some description.

The mobile sector is incredibly exciting at the moment and this is another useful little weapon in our arsenal.

5 Ways to Get Usability Testing on the Cheap

Our next post is from the sitepoint blog and is entitled ‘5 Ways to Get Usability Testing on the Cheap‘.

Usability testing is a good idea for any new web site. Increasing the usability of your web site is good because it will increase visitor satisfaction, which in turn increases sales and user loyalty. On the business savings side, usability testing can also save you money in development, maintenance, and support costs.

The problem is website owners often perceive it as expensive, failing to grasp the high return on investment. However, it doesn’t need to be and any project can incorporate some user testing, no matter what the budget.

The sitepoint post makes 5 suggestions of how you can keep the cost down…

  • Use a service like usertesting.com, which provides a video of users interacting with your site.
  • Get a written user response to your site from Feedback Army for as little as $7.
  • Use a DIY user testing tool like Silverback for the mac or Morae for Windows.
  • Ask friends and family to take a look at the site. Alternatively ask for some feedback on the boagworld forum.
  • Use services like Crazy Egg or Click Density to get heatmaps showing how users interact with your site.

Whatever approach you choose, always make sure you have at least some user testing in every project.

Site search options

One of the things I hate most about the Boagworld website is its search facility. The built in search mechanism that comes with my blogging software sucks! This is particularly embarrassing as I am always banging on to clients about how important search is. After all half your users will turn to the search box before even considering browsing the site. Search has to be right.

I have half heartedly looked around for something that would do the job. I remember looking at Atomz a while back and also there is the obvious Google integration route, but nothing inspired me.

This week however another post from Sitepoint caught my eye. It was talking about the new site search from Yahoo! Recently adopted by Techcrunch it has some fairly impressive features…

  • Real-time indexing of content – When new blog posts or comments are added to the site, the search index updates almost immediately.
  • Customised ranking – You can fine tune the algorithm to fit your audience and user experience.
  • Structured search – You can build your own refinement mechanisms. For example I could allow users to filter posts by category, number of comments, tag or any other criteria I set.
  • Blending Web with site results – Users can search both site and web content and see the results blended together in a single display.

If your site search sucks as much as mine, you might want to check this out.

Back to top

Interview: Nicholas Felton on ‘Designing Data’

Paul: So joining me to day is Nicholas Felton. Good to have you on the show Nicholas!

Nicholas: Thanks so much Paul, it’s a pleasure being here.

Paul: It’s the first time that I’ve really spoken to you. I only first saw you or heard about your work at Future of Web Design and I have to say you completely blew me away with a presentation that was very different from the majority of stuff that was being talked about because it wasn’t really fundamentally about Web design, I guess in a way.

Nicholas: No, I think in a way it’s about a weird hobby that’s kind of developed into a tiny Web phenomenon.

Paul: Well, from what I can gather it’s a fairly big Web phenomenon according to Keir from Carsonified who was raving about you afterwards. For those people that haven’t come across you before, tell us a bit about yourself. Who are you? What is it that you do? Where is it you work? A bit of background basically.

Nicholas: Sure, sure. Well again, my name is Nicholas Felton. I’m a graphic designer, predominantly print but I definitely dabble in the web and am there more and more frequently. I went to art school, I studied graphic design about ten years ago here in America at the Rhode Island School of Design and I’ve worked in graphic design firms and advertising doing identity and on the side I’ve started my personal website called Feltron where I’ve grown these annual reports that have become something that I’m sort of getting well known for.

Paul: So let’s talk about these annual reports, because this is what you were talking about at Future of Web Design. There’s a lot of people that might be listening to this thinking “Well, hang on a minute he’s just said that he’s primarily a print designer, this is a web design podcast. Why have we got him on the show?” Well just to kind of deal with that to start with, I mean obviously web design should be a lot broader, we should be looking outside of the web for inspiration and I’ve found these Felton Annual Reports incredibly inspiring. For those that don’t know, tell us a little bit about what they are.

Nicholas: Alright. Well, I really latched onto this name for them because I think it communicates pretty quickly what it’s about. Everyone understands what an annual report is. It’s the summation of a year. I’ve just attached my name, more precisely my sort of Web name, which is Feltron. My last name is Felton. But these started in 2004. I was just trying to get a grip on the year and wrap it up and I looked around at the websites I was looking at and the books I enjoyed and I put that all on my site but I snuck in a couple of little details, like the number of postcards that I sent and worked out the number of air miles that I traveled and those sort of, they hooked me. And so the next year I went back through my records and I put together a multi-page feature for my website where I looked at my travel in more detail, making pie charts of the countries that I went to. I split up my photography into all these different metrics that I could examine and between that I came up with about six pages I think of exploration of my eating and drinking habits and the culture that I enjoyed for the year and this is something I thought would only be appealing to people who knew me well, it would be a little bonus for them at the end of the year and it turned out to be a little viral and people started sending it to their friends and I started hearing from strangers that they thought it was fantastic and people saying, “I want to do this,” so I’ve tried to spend more and more time on it each year to stay in the forefront of this desire that I see building for people to encapsulate their year in this kind of report.

Paul: For me personally, when I heard you speak I immediately came away with a desire to do the same thing, just as you described.

Nicholas: That’s fantastic.

Paul: But the question that’s burning in me is, “Why?” Why do I feel the desire to do that? Why did you do it? Where did the idea come from? How did this all start?

Nicholas: I think it wasn’t that hard for me to do. The first one that I described, which was a multi-page document I actually didn’t do anything different than I’d been doing for previous years. I just had this natural habit that in my calendar I would write down where I went socially as well as what I did for work and I was able to look at that and between the names of the restaurants I knew this was a Thai restaurant so I could sort of make pie charts of what types of meals I was eating and I knew how many bars I had been to and I guess after that year I decided I was really going to formally examine this and decided to strictly track more things over the course of the year. I guess for me it’s driven by curiosity, I think I’m a pretty naturally curious person, maybe you are as well and it’s not about changing my behavior. I really don’t want the reports or this recording of my year to affect what I do over the year. I think I find a lot of solace in the numbers that come out of it. Just knowing how many beers I had or how many coffees I had or how many air miles I traveled is really comforting to me. It’s a way of tackling some of the unknown in our life.

Paul: It’s interesting because when you describe it, if someone hasn’t seen these reports you kind of think of an annual general report that’s published by a company, which are tediously dull documents but the things that you produce are graphically stunning as well. So I’m interested, is it primarily a kind of data collection exercise for you, or is it more a graphic design exercise? Is it about, I mean you kind of indicated that it’s about the data that you’re gathering rather than maybe the graphics, but the graphics are obviously what sells it to other people I guess. I don’t know.

Nicholas: Yeah, it’s hard for me to split it, but I have to say it’s absolutely about the finished product which is a piece of graphic design and the better the data is the better the story I have to tell so it’s a narrative of my year. It’s all encapsulated. It’s primarily a visual piece and I do put a lot of time and effort into making sure that it’s very visual and very easy to read quickly but that there are little details in it you can pull out if you want to spend more time with it.

Paul: Yeah. I mean that’s the immediate thing that you said there, it’s very time consuming.

Nicholas: Yes.

Paul: Not only from a design point of view, and I’m sure it must take you just an unbelievable number of hours to produce something that is so exquisitely designed but I mean tracking all this stuff, you must spend, I mean I’m surprised there isn’t a big part of one of your pie charts that’s just entitled “Tracking” you know where you spend hours just tracking all this information. What keeps you going? Why do you continue to do this?

Nicholas: Well first of all, it just doesn’t take that much time actually. I tend to sit down in the morning in front of my calendar and write down the meaningful things from the previous day but at most five to ten minutes a day. It’s definitely a background process that’s running in me all the time as, “Do I need to take note of this for my reporting?” And when I do leave my routine, when I travel, it’s a bit more complicated because then I’m doing new things and I want to make sure I get them right but it’s something I think you get into the habit of doing. For anyone who writes a diary or does these sort of recordings of the day I think after a while it’s not a burden at all. Last year I did find out, I decided out of this curiosity that I wanted to record every street that I’d walked down in New York City and that did become a little burdensome, but it was well worth it.

Paul: It’s interesting that you picked that one out because that was the one that I really looked at and went “Wow, that must have taken a long time.”

Nicholas: Yes. But it was well worth it. A year is a long time but it’s actually not that long of a time and I had a lot of hunches going into it about where I would go and where I didn’t go and it’s phenomenal to see how little of the city my routine is actually settled into.

Paul: Yeah, it’s a fascinating exercise. Just kind of give us a little bit of an idea, you know tell us you just mentioned walking down certain streets. Tell the listeners some of the other things that you collect, the other bits of information.

Nicholas: Well last year I was keeping track of every single alcoholic beverage that I had. For some reason I think drinking is really easy to keep track of because it is sort of a binary act, it’s like “one drink” versus a meal which can be more complicated but so alcoholic beverages I had 968 in 2007. I had 83,565 milligrams of caffeine through all my coffee beverages which by examining my weight and the caffeine content of each type I was able to deduce was approximately 6.8 lethal doses. I knew there’d be a couple lethal doses in there I just wasn’t sure how many and I worked it out.

Paul: That’s just horrifying. How do you decide what it is you’re going to track?

Nicholas: It usually just leads naturally out of the previous year. So like in June I will decide, “I wish I’d been tracking that this year,” and so next year I’ll make a point of doing that. So last year I started delving into the distances I’ve traveled, I worked out that I traveled about 1075 miles on the New York City subways. So this year I’ve taken a much closer look at the distances I’ve traveled. I’ve worn a pedometer all year so I could figure out how far I’ve walked and yeah.

Paul: What kind of other stuff are you tracking at the moment? You’re tracking how far you’ve walked, what other things?

Nicholas: Mostly the same things from previous years, but I’d like to look at it all through the lens of distance so it’ll be a different measure of the year rather than relating things to days or hours how does that relate to how far in terms of length I was through the year.

Paul: I mean you mentioned a pedometer there. What other kind of tools do you use for collecting data when you’re out there? When you’re out and about I feel like you need a really handy little iPhone app or something here that kind of records all this stuff for you but what tools are you using?

Nicholas: Well yes the iPhone is great I’ve tried to have some sort of smart phone where I can take notes at all times through this project but often times it’s just as simple as sending an email to myself so I have this little note that gets collected and goes into a folder and I make sure that I enter that into my calendar. It mostly all goes into iCal. I also use Backpack by the 37signals guys to keep running lists of the clothes that I purchase through the year or the movies that I saw and then when it all comes together it’s Excel. Everything needs to get into a spreadsheet so that all the math can get done and that’s probably half of the time it takes to design is just collating all the numbers.

Paul: Yeah, I’ll bet. Wow. This is absolutely fascinating. It’s something very addictive about the whole idea. I mean OK, for somebody like me, let’s say I wanted to go for this and I wanted to try it. What kind of advice would you give me starting out?

Nicholas: Well probably the best advice is to pick something that you’re going to be able to track, that you’re not just picking “What websites do I visit?” because it’s going to be overwhelming and you’re just going to pass on it after a week or two so pick something that’s easy that you do, not too infrequently that it’s not interesting but frequently enough that you’re going to get a good data set out of it. And so like if you see a lot of concerts I think concerts attended is great and then what aspects of that that are interesting? Who did you see and where was it or how long was it? So I think definitely in this website I’ve been developing to help other people create their own annual reports or just personal reporting in a way you can just have one really rich data set and by slicing it in different ways I think you can get a lot of interesting presentations out of it.

Paul: You mentioned a site there that you’re developing. Tell us a bit about that.

Nicholas: OK, it’s called daytum.com. It’s D-A-Y-T-U-M and it’s just a place where I’ve tried to remove a lot of the boundaries for creating a document like this. So there are two parts of it, there’s the recording element that can get complicated so we want to make a way that’s really easy for you to count things and then the display part of it which is practically inaccessible to a lot of people so there are a lot of built-in pie charts and stack line graphs and counting methods that are all built in, in a sort of clean design and you can just make this page that fills up with graphs and numeric intricacies of your life.

Paul: I must admit I’ve had a quick look at it and I haven’t signed up for it yet and you know it has that same clean look that your reports have and you know it’s obviously beautifully designed as well I mean we’ve spent a long time haven’t we talking about the collecting of the data I think that’s probably the most fascinating bit but as this is a web design podcast I feel like we should be talking about the design a little bit as well.

Nicholas: Absolutely.

Paul: You know I think the kind of key thing that really struck me is that you’re presenting, you know, fairly dry data and don’t get me wrong, I’m not implying that your life is boring but at the end of the day it’s data that you’re presenting and you’re doing that in a kind of visually stunning way. Tell us a bit about how the design comes together, you know. What’s your design process?

Nicholas: Well I have the benefit of being in control of all the data so if something isn’t looking right one way I can explore it a different way or I can rewrite a headline which is one of the greatest advantages that any designer can have rather than working for someone else. And then I sort of have an infographics approach where I really eschew using keys or trying to make your eye go in too many places to understand something so whenever possible I try and keep everything really focused so you can look in one spot and hopefully understand what’s going on there immediately rather than having to look at color codes or translate symbols unnaturally.

Paul: I mean is it, a lot of graphic designers out there that kind of find working with data and, you know, things like that incredibly dull. How do you keep inspired? How do you get something out of it? Because you’re not working with gorgeous imagery or anything like that, you know it’s quite dry, what inspires you about doing this kind of stuff?

Nicholas: Well I guess they’re kind of like puzzles for me. Um, I will see the establishing of infographics sort of like the data’s there and it wants to look interesting so how can I make a system that’s going to present it in the most instructional way? So I’ll play with that system so that it will line up in a dramatic way rather than just sitting in a static predictable line graph or bar chart or something like that.

Paul: I mean also you seem to use typography very heavily so I’m guessing that’s something you’re particularly passionate about.

Nicholas: Yeah I guess it’s my two natural loves in one place: the numbers and type.

Paul: Oh dear. So what advice would you give for us Web designers that are kind of, you know we do work with data a fair amount, you know from surveys through to content management systems that provide reporting and things like that. What do you think the key is to presenting data in an understandable and approachable format?

Nicholas: I think that one of the key things is just getting away from the default options that you’re given like I’ve found it’s really impossible to get a nice looking graph out of Excel or out of Apple’s Numbers and the same is kind of true for the Google Chart API which is what we use for daytum.com which is basically a way to send a URL to Google and they return a pie chart or a line graph but they can get really overly complicated and ugly very quickly so it’s a matter of stripping it down and making sure that this is something that’s going to be dramatic and simple to understand.

Paul: It’s that simplicity thing again that, you know, have taken something complex and as you say stripping it down and keeping it simple.

Nicholas: Absolutely, and even if you have the benefit being able to edit your material so that I’m looking at a pie chart that has four or five slices rather than seventeen I think it’s going to benefit your readers enormously.

Paul: So Daytum, that you are in the process, is that actually live now or is that still in the process of being developed? I can’t remember whether it was generally accessible or whether it was in a closed beta.

Nicholas: It’s in a beta but the wait list is down to less than a week now so it’s just a queue basically to protect out severs. But yeah, we’re adding new features all the time. We’re about to add averages there so you can examine your average cup of coffee or your average commute time and we just plan on trying to preserve the user experience by making sure we don’t get too swamped and growing it over time.

Paul: So how did this come about? You keep saying “we” so who’s the team that’s behind that?

Nicholas: Yes it’s my partner Ryan Case who is more on the development side but is also a fantastic user interface designer and he came to me in January or February of this year and like many people had said we should figure out a way to do this year reports on the web so that other people can do it but he had the technical chops and motivation to really get the ball rolling and he’s become actually a great data tracker himself and has been keeping track of all his beers religiously and all the trains he’s been taking, which I didn’t know he had in him. So I think it goes to show anybody with the proper motivation could get started.

Paul: So is this your full-time job now or is it a part-time project?

Nicholas: It’s about half-time at this point. I still have my editorial clients and web clients and identity clients that I work for but this definitely occupies as much free time as I can give to it.

Paul: Well I found the whole thing incredibly inspiring.

Nicholas: Thank you so much.

Paul: It made me look from a completely different perspective at graphic design and also at life in general I guess and we have so many people who come on the show that are talking about the stock and trade of web design and thought it’d be really good to get you on just to give a different perspective and make us look outside of our little boxes. Thank you so much for coming on and I wish you all the best in your various projects.

Nicholas: Thank you Paul. Thank you.

Paul: Good to talk to you.

Nicholas: OK, take care. Bye bye.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

This week’s listener contribution is a question from Dave. He writes:

I am having real problem maintaining users. They visit the site once and then I never seen them again. I have good content, the site is usable and so I am at a loss as to what I should do.

Should I be worried? Are repeat users really important? What can I do to keep them coming back which doesn’t cost a fortunate?

It is such a good question that it spawned an entire post on using community as a retention tool.

Back to top

144. Scale

On this week’s show Paul talks to Joe Stump from Digg about scalable websites, we review the best apps for web designers and investigate services for sending bulk emails.

Play

Download this show.

Launch our podcast player

News and events

How much should you charge?

If you are starting your freelance career the number one question you will have is ‘how much should I charge?’ It is important and yet strangely it is not something you are taught at college. Perhaps they don’t teach it because it is a damn hard question to answer. It is certainly something we have avoided talking about on this show.

Fortunately an article entitled ‘Six things to consider when setting your freelance rate‘ has been released this week. Although the article does not give a magic number, it does provide 6 valuable insights that will inform your final decision. These include…

  • Young freelancers and recent grads almost always ask for too little.
  • You can do things your clients can’t.
  • Your rate influences your perceived value.
  • You don’t get to keep it all.
  • An hour worked is not an hour billed.
  • The higher you start, the less you’ll need to increase.

I couldn’t agree more with everything said in this article. However, the one that really resonated with me was ‘You do not get to keep it all.’ Your rate has not only got to cover your billable hours but the cost of sales and marketing, as well as your various overhead. The article has a link to a superb rates calculator that helps you work out your chargeable rate based on these various costs. Definitely worth checking out.

A plethora of accessibility posts

With the implement arrival of WCAG 2.0. we are seeing a resurgence of interest in accessibility. This has led to a plethora of accessibility posts over the last few weeks. These include…

  • Writing good ALT text – This is a simple post about the use of the ALT attribute. It suggests two rules of thumb when it comes to writing ALT text. First, if you were to describe the document to someone over the phone, would you mention the image or its content? If you would, the image probably needs an alternative text. Second, does the alternative text of any images in the document make sense if you turn off the display of images in your web browser? Simple advice, but well worth remembering.
  • Designing for Dyslexia – This is a series of 3 in depth articles that look at the subject of Dyslexia. It asks what Dyslexia is and how we as web designers can improve our sites to accommodate the needs of Dyslexia users. Its interesting stuff. Part 1 defines what Dyslexia is. Part 2 looks at some of the conflicting requirements with users who have visual impairments. Part 3 suggests some specific things you can do to improve the legibility of your designs.
  • Accessible forms using WCAG 2.0. – This extensive post aims to provide web developers and others with practical advice about the preparation of accessible HTML forms. It compares the WCAG 1.0 accessibility requirements relating to forms with those contained in WCAG 2.0. Important stuff but not a 5 minute read!
  • Too much accessibility – The RNIB explains how the LEGEND tag can cause more harm than good if not concise and relevant. The reason? LEGEND text isn’t read at the start of the FIELDSET, it is read at the start of the label. It repeats at the beginning of every single text label in that FIELDSET.

A business case for deleting content

I find myself using the word ‘simplify’ a lot when I talk to clients these days. So many website owners are constantly wanting to add features or content to their site. However, in reality we should be removing not adding to our already bloated websites. This is particularly true for large institutional websites. However it does also apply to smaller sites.

Take for example the Headscape website. When we started the redesign process for our site, I sat down and really thought through what information prospective clients wanted. The answer was very little. In the end our large text heavy website was reduced to a single page. That is the power of simplicity.

Gerrry McGovern summed it up perfectly this week in his post entitled the ‘Business case for deleting content‘. He wrote:

The more you delete, the more you simplify. The more you simplify, the more you increase the chances of your customers succeeding on your website.

We may think that we cannot delete content because ‘somebody might want it’ or because we believe ‘it will help our search engine ranking’. However, bloated sites bring complexity and with complexity comes confusion. The more content on your site, the less chance a user will be able to find the content they need.

12 principles for keeping your code clean

We finish today with a great post for those who need help with their HTML code. Whether you are a student learning HTML or a designer who is more comfortable in Photoshop than Coda, this is a very useful article.

The post provides 12 excellent tips for keeping your code clean. These include…

  • Use a strict doctype
  • Set your character set and encode those characters
  • Indent your code
  • Keep your CSS and JavaScript external
  • Nest your tags properly
  • Eliminate unnecessary divs
  • Use better naming conventions
  • Leave typography to the CSS
  • Add a class/ID to your BODY tag
  • Validate
  • Order your code logically
  • Just do what you can!

The article explores each of these points in depth and communicates clearly current best practice in coding HTML. Well worth the read even if only as a reminder.

Back to top

Interview: Joe Stump on Building a Scalable Site

Paul: Ok, so joining me today is Joe Stump from Digg. Good to have you on the show Joe.

Joe: Oh, good to be here.

Paul: Have we had you on the show before?

Joe: Ah, not that I’m aware of.

Paul: Oh, wow, well we need to rectify that then. It’s good to have you on. Well, I have to say, this interview was arranged by Ryan, who is our producer. And he’s a developer, and I’m a designer. And he suggested we got you on the show, not that I wouldn’t like you on the show, obviously. That we got you on the show, obviously about scaling websites. Now, I’m going to be out of my depth very quickly here, so you’re going to have to be very gentle with me Joe.

Joe: Sure

Paul: So, in fact, it was so bad, that as I sat down to write questions I thought: "I don’t know what I’m doing here" , so I went and talked to some of the developers at headscape, and I asked some of the Boagworld listeners, and so we’ve got a little selection of questions for you, that, hopefully we can learn a little bit about how you go about doing things at Digg. Lets start off, what’s your job title, what is it that you do at Digg?

Joe: Ah, I have a really fancy job title that doesn’t mean a lot of anything, but ah, my official job title is "Lead Architect" and um, I think what best describes it, is that I manage the technical implementation on the code side.

Paul: OK

Joe: So, Digg’s broken up into a lot of different arenas on the tech side, we’ve got, R&D, which is headed up by Anton Cast, we’ve got operations, which is headed up by Scott Baker, and then under that are the people that I work with, ah, probably most closely in implementing solutions for Digg. Ron Gorodetzky is our lead systems engineer, Tim Ellis, also known as timeless, is our chief DB wonk, and then, Mike Newton is our lead network guy. So I think us four kind of steer the technical implementation along. The managers, ah, the manage, and handle the strategy and partners, and stuff like that.

Paul: You managed to say the word manager with real distain.

Joe: Oh, no actually, I have a great manager, John Quinn, he’s our VP of engineering, he’s by far the best direct manager I’ve probably ever worked with. Yeah, he’s really good.

Paul: OK, well lets go back in time a little bit. And start by, well, when was the point when you realized, that you were going to start having scaling issues with Digg? When did you start thinking about the whole subject of scaling?

Joe: Um, well Digg was pretty big when I came on board, so Digg was about 10 – 12 million uniques when I joined on.

Paul: Wow.

Joe: And I think we’d just cleared 35 million last month. So scaling was obviously an issue, but the big difference is that, I think sites generally go through a few different levels of scaling, where like the first one’s like, "I’m just going to throw it on a virtual server, or an Amazon server, you know, you’re basically just seeing if things are going to just "stick to the wall", and then they do. Ah, so the first thing you normally do is start breaking services off onto separate boxes. I want to put my DB on one box, my server on another box, and maybe memcached on each of them. And then you hit, read saturation on that one DB server, so then you go to the kinda next level of scaling. Which is where Digg was when I started, where you start dangling, a whole bunch of read slaves, off of your DB master, so, and for those who are not familiar with the master / slave terms, you send all your writes to one database server, and then that disseminates those writes to a whole bunch of slaves, and then you send all your read traffic to those slaves. So that’s where Digg was when I started. It’s write http traffic across a whole bunch of servers, its read traffic across a whole bunch of slaves, and then we have one master. And we’re now going through, what I think is the third phase, where you hit write saturation on your master, which is a bigger problem, because you then need to start sending some write traffic to some masters, and we’re actually going with a strategy that’s common with Facebook, and Flickr, and those kind of websites, where it’s called horizontal partitioning, where you put some of your records on one server, and the other records on another, so it’s like, you can say, for users, all users whose names start with A through J, would go on this database server, and K to Z live on this other database server. So we’re in the middle of implementing the first swipe at that. So we’ll be pretty aggressively into where everything will be federated and partitioned across a whole bunch of servers.

Paul: OK, one of the questions which kinda came up, which kinda relates to that, is, once you start spreading things across multiple servers, how do you handle things like user sessions, which have obviously got to be persistent.

Joe: Aha, so there are a couple of ways to handle that which, I’d say most people are handling it by.. There’s two ways, probably that you can do it easily. One of them, is if you have what they call "session affinity" on your load balancer, so the load balancer will say: "Oh, well this person, last time I had them here, they went to server A, so we’ll send it back to that server". So the session always lives on only one box. That’s one way to do it, we don’t do that here, we have a custom session handler in PHP which sorts the session in Memcache, and that allows you to.

Paul: Can you just clarify what memcache is, for idiots like me who don’t know.

Joe: Sure, memcache is a distributed caching system that’s actually, basically what it allows you to do, is expose a machines RAM over the network, and cache stuff into another machines RAM across the network.

Paul: Ah, OK

Joe: Yeah, it’s insanely fast, it was developed by Danga back in the day, and Brice Fitzpatrick, yeah so it’s heavily used by anyone whose scaling with LAMP, even a lot of people who aren’t. They all use memcached.

Paul: Wow

Joe: So, yeah, we store all of our session data in memcached, so PHP creates a unique session id, and we just stuff session data into that in memcached, and we can distribute that across, I don’t know, 50 or 60 memcached servers, and what not.

Paul: So how many servers do you guys have, it must be a staggering number by now.

Joe: Um, yeah, it’s kinda funny, every time I ask Ron that, he’s always like "Ah, I don’t know"

Paul: Laughs

Joe: Because we really can’t I mean, I couldn’t give you a specific number because on any given day, we’ll pull or push into production, a dozen servers, so, hundreds, there’s definitely hundreds in production. So.

Paul: I mean, with that many servers, so obviously you’re talking about taking servers on and offline, and all that kind of thing, I mean, making updates to the site, when Daniel comes up with some stupid idea, that you’ve got to apply to the site, of a new feature that he wants to apply on the site, and you’ve gone through the process of making it work. And you’ve then got to push it live.

Joe: Aha

Paul: How does that work? How do you go about pushing something like that live when there are so many servers involved.

Joe: So we have Ron Gorodetzky our lead systems engineer guy. So us developers have a bunch of M4 make files, that, when you check the code out, you run basically Make, Install, and it, for lack of a better word, it builds or compiles the website into a cohesive package, and then Ron pushes that to each server, I think he is still doing it by rsynch, but I know we are migrating over to Puppet, so it may happen via Puppet soon. The production side of things, is something that’s handled completely by operations, so I couldn’t tell you specifically how it happens, but generally, we make a tag of the website, and tell Ron, we need you to push "9.4.15" or something like that, and he does a checkout, builds it, and pushes it to all of the different servers.

Paul: So is that – do you actually have to take the site offline to do those updates? How do you minimize the downtime that’s involved with that.

Joe: Oh, well there’s a bunch of different ways. Um, we don’t bring the website down normally for pushes, it depends on the size and complexity of the push. But like, day to day pushes, we probably push I guess, a minimum of once a day, just little bug fixes and stuff like that. And those happen generally in the middle of the day, and nobody notices, it’s no big deal. Ah, the outages these days, are completely dependant on database activity, you know, like database fixes and stuff like that. And the ways that we’re getting around that these days, is using a different method of partitioning called vertical partitioning. Where, like for instance, like I think our comment Diggs table, of like, who’s dug a comment, up or down, that’s like 15 billion records in it.

Paul: Wow

Joe: that’s like, yeah, if you’re like to alter that table, you’d probably crash mysql, but if you were, it would probably take a week to alter it. So instead we probably create another table, where we have like comments, and then we have another one called comments_made_up, or something like comments_diggs, comments_diggs_beta, and that has a couple of extra fields in it. And so we’ll say, OK, we’re about to push the code, at the end. When we push the code, the first comment id that was added to the table was 15,000,000,001, so then you start at 15,000,000,000 and work my way back in the table. So we do some of that live as well. For the next push that we’re doing, we’re using a migration table, which will tell us how far along each record is, and which records we’ve actually migrated, and stuff like that. And then we’re going to use this package called "GearMan" which is a queuing system which we’ve had in production for a while. And we’re basically turning our servers into a giant BotNet, so we’ll back fill all those partitions quickly.

Paul: Wow, that kind of amount of data, it must create huge problems, even adding a new piece of functionality onto the site, to actually code it in a way that’s not going to have a momentous impact on the database. This must be something that’s always constantly on your mind I guess?

Joe: Yeah, I’ll tell you a really funny story that highlights that perfectly, we have these little green badges that are on the Digg button, and they indicate, that a friend of yours has dug that story. And when you hover it shows the last four friends to dig it or something. So that’s a pretty knurly query, against a very big table, and we’ve actually had to, what I would call "dial it down a bit", so that it only shows up on the stories that are 48 hours old, and it won’t show up if there are more than 500 diggs or something. So the features fairly usable, but it’s not like… Well before if someone went to the top of 365, it was basically crashing our servers. So we’ve been rewriting that, and we basically, the way that we’re rewriting it is: If you write something, we take that Digg and we drop it into each of your followers buckets. So we make a bucket for each story for each person. Any time one of their friends digs it, we drop that dig into their bucket, but the problem is, like Kevin Rose is followed by 40,000 people, so every time he digs something, I need to drop 40,000 things into 40,000 different buckets. And we did the math, and just to get that feature up and running in a vast sane manner, so that it will scale, so we can bring it back in full capacity so everyone can use it all the time. We need 1.25 GB of storage, and we need to be able to sustain 3000 writes per second in order to keep just that small feature online.

Paul: So that really kind of illustrates that a relatively small feature that someone comes up with, has massive ramifications from your point of view.

Joe: Yeah, this is something that has kind of been something that I always talk about. I mean even back when I was doing consulting, I’d kind of have clients come to me, and it would be: "Check out this awesome design", and I would be like "that designs awesome, but that little feature down there, that’s going to cost you know, $100,000 in servers, and 500 man hours. But it’s, like, well the designers think of sizes and shapes, and so Daniel always jokes around and says: "Well I can make it purple" if that will make it easier for you" you know, it’s like…

Paul: Laughs

Joe: Laughs – well that doesn’t make it easier!

Paul: Well, we’re going to get you and Daniel back on the show to talk about this whole design / developer relationships, so you can lace your side of it now, and get your side in first. Before he defends himself.

Joe: Sounds like a plan.

Paul: So are you at the point now where you’ve got an architecture that’s kind of infinitely scalable, or are you going to have to go back to the drawing board if Digg just goes even more, you know off the scale than it already is?

Joe: Yeah, well we’re actually at the drawing board right now.

Paul: Yeah?

Joe: Yeah, Ron, myself, and some of the other senior peeps, about 8 or 10 months ago, we started putting together… well we knew that we were going to start to have serious limitations, especially since we were going to be scaling internationally. You know there is a problem with latency. With you guys across the pond hitting the west coast and other things like that. So we want to be in multiple data centers. We want to be actively serving traffic from multiple data centers, so we’re are, well we need to horizontally partition, we need to make sure we can do that. And we need to live in two different data centers. We need to be able to survive one data center disappearing. So we spent basically a week in front of the white board, and we created this thing called IDDB, which is kind of an elastic storage engine, built on top of SQL, and memcachedb, that we’re going to be putting the first bits and pieces into production, probably over a month or so. And really, the whole partitioning thing isn’t the difficult thing to figure out. The difficult thing is basically spanning multiple data centers, and also we’ll have a couple hundred gigabytes of data, and I need to spray that across, you know, a couple dozen different servers, without bringing the site down. So we have a couple million – 3 or 4 million users, and I need to take all of their records, and all of their auxiliary records, here’s like your user record, and there’s also a bunch of cruft related to that. So I need to take all of that, and migrate it to different partitions. But I need to do that while the site’s still up and running, and I need to do that without breaking the site for you. So, that’s the more complex problem at this point.

Paul: I mean you talk about spreading across multiple data centers, and if one of those data centers goes down, the site does too, and whatever. How are you currently handling redundancy? How are you making sure the site stands up at the minute?

Joe: Right now, our only single point of failure at this point, is our actual data center, so if the data center falls off the planet, then we’ve got problems. But we’ve got a general architecture. We’ve got a couple of general balancers up front. And those two have, what we call a "heartbeat" between them, and if one of them falls off, the other instantly takes over traffic for it. And that balances traffic across, I couldn’t even tell you, dozens and dozens of web servers, and of course, the load balancer does help checks on those, so if any of those falls over, it will drop it out of the pool. Behind that, we have, I think, 4, I guess our masters are technically single points of failure, but we have multiple masters as well, and we have dozens of read slaves hanging off of them. I think right now it takes about 10 minutes to bring a new master into production if one fails. So, and then we have, to store our files, we have a thing called MogileFS, which is a distributed web dav storage engine of sorts, and we can loose multiple nodes on that, and not have any problem with that as well.

Paul: Yeah, so at the moment it’s a physical problem that you have, that if your data center gets hit by an earthquake or whatever, then you have problems. Please tell me it’s not in San Francisco?

Joe: It’s not in San Francisco.

Paul: Ha ha, yeah, you’re not actually going to say where it is are you?

Joe: No I can say we have one on the west coast, and we have one on the east coast.

Paul: Oh, well that’s at least something. Um, I mean so far we’ve concentrated a lot on scaling technology, but there’s kind of another side to this, as well, where you get something like Digg, that has grown incredibly rapidly, over a very short length of time, and that is, kind of scaling the team behind it. You know, I don’t know how many developers were working on Digg when you joined it, but there would certainly be a heck of a lot more now. And I’m quite interested in how you went about growing the team. And how you deal with that kind of rapid growth, and making sure everyone knows what they’re working on, and not overwriting others work, and all the complexity that goes along side of that. How have you dealt with that?

Joe: Sure, I guess, to put things into context a little bit, when I was hired, we had both Kurt Wilms and I, were both hired on the same day, and were respectively employees 18 and 19, and developers, I think there were 7 of us. So, now we’re at the low 20′s as far as developers, and we’re in the mid 80s, as far as total employees, and that’s been in a year and 9 months. So as far as scaling the teams go, some of the building blocks were well in place by the time I got here. Like, source repository, stuff like that. But I think the crucial things that we’ve done, since I’ve come on board, that were, we had some coding standards that were out there, but they weren’t really in force. And then we had, we didn’t really have any frameworks in place. I think one of the problems, you know, when Jay, our CEO, was asking, where do we find more senior developers, I told Jay, like that’s not the right question, the right question is like, how do we get the code, and how do we get the technology, in a position, where we don’t have to hire really senior people. So I think the keys to that are, we do have pretty strict coding standards, so we do enforce those rigorously, through continuous integeration environment, and code reviews. Every piece of code that gets pushed to production has to be reviewed. And that’s literally 4 or 5 coders, sitting in a room, going line by line through change sets, and stuff like that. And that sounds really time consuming, but without question, on every code review I’ve sat in on, we’ve found one show stopper bug. So, those have been crucial, in getting things put together. The other things we did as we grew, is we broke the team up into smaller teams, so we have a development team of 20 – 25 developers, but that’s broken up into teams of between 3 and 5 developers. This really helps in a couple of areas. 1, it enforces code ownership. So everybody has this problem. I code this, then I go and work on something completely different. And 6 months later I come back to this code and I’ve forgotten. I don’t remember any of that. Where as if you’re always working in the same area of the sites, not only do you remember a lot more, you’re a lot more familiar with that. But also, you feel a bit more of a sense of ownership over that. You’re not just this hired gun that’s come in and ploughs through this feature then moves on to something else. You have your own territory that you need to keep track of. You need to keep really nice and what-not. So we did that, and then we have a bunch of core frameworks, that we’ve built. We have a small application framework, we have an AJAX framework, and now, we have this data access layer that we’ve been building up called IDDB. So I think those are pretty crucial too. It’s difficult to find coders that are intimately aware of memcached, and race conditions that exist in memcached, and um, we have to be very selective about what fields we add indexes on in mySQL. We also have to be very selective about how we store that. Normalization flies totally out the window, if you’re a DBA guy. A lot of concepts, they are not bad developers, by any means, they do great AJAX work, they do great application level PHP work, but if you don’t have frameworks in place for them to not have to worry about the super-super complex stuff. It’s going to be really difficult to hire, and it’s going to be really difficult to, you know, get a lot of stuff running in parallel and stuff.

Paul: Wow.

Joe: Yeah, and then we also, another one of the things we’ve adopted, is the agile SCRUM. So we’re doing sprints, and we’re running those in parallel now across all the teams. So right now we have 4 major projects going on right now.

Paul: Ok. So you talk about a sense of ownership there, and the developers are split down into multiple certain areas. You know, does that not get boring, for the developer, having to work on the same bit of code long time, or do you rotate people?

Joe: Well, we don’t currently rotate people, the team structure’s been in place for about 4 or 5 months now. And you know, most of the work they get is fairly immediate, and we’re moving major projects like Facebook connect, so the "Tools and integration team", their doing facebook connect now, and after this, they will maybe work on a new version of the API and so on. It’s written out to wide swaths of the site, so that we have "Site Apps" which does like, all the different applications on the site. And then we have "Tools and Integration" where we have the external projection of Digg, then we have "Core Apps" which is like, search, R&D stuff like recommendation engine, and what not, and then we have "Core Infrastructure".

Paul: So it’s probably enough to be interesting?

Joe: Yeah, we have pretty broad teams, and also, when we put people on those teams, even if someone has an amazing core infrastructure background, but they say, look, like, one of our UI guys, used to be really heavy into core infrastructure stuff when he worked at Quest, and managed massive warehouses, but he says, like, "That’s not what gets me up in the morning any more". It’s like, "Javascript UI interfaces are". So we try to put people on the teams where, you know, where their passions lie. And that’s kind of another thing that people need to recognize. And that’s like, not all developers are driven by, or interested in the same things. We have some, what I would call "UI / Frontend" developers, where like, they could care less about PHP, but we have PHP guys who could care less about Javascript. So I think, recognizing strengths and weaknesses, and capitalizing on those, is pretty important too.

Paul: OK, one last question to finish off, and that is, well you know, the kind of things that you’ve been talking about are fascinating to hear, about the kind of challenges that you have to face with the size of Digg, and the amount of traffic you have to handle. But obviously a lot of people who are listening to this podcast, aren’t at that stage. They are not working on massive projects like that. So I’m really interested in what advice you would have, for those who are just beginning to suffer from scalability problems, and they feel that it’s coming, and it’s something they need to be paying attention to. But it’s not on the enormous scale that you have to deal with. What things can they do right now to prevent problems down the line?

Joe: Um, I think, the easiest things you can do, is you need to re-think the LAMP acronym, because that stack is actually no longer really that stack. I would take Linux, and I’d take Apache out of that stack, and it doesn’t matter, as long as you’re running on a Unix. And as far as Apache goes, Lighty and EngineX are much better at getting a lot more money out of your box, as far as scalability goes. The two areas, that I think people, they sound hard, but they are really easy. One of them is installing and using Memcached, and the other one is installing and using a queuing system of some sort. And I think, like, recently I went through this with a little side project, called "Please Dress Me" which AJ and Gary Benashack and I did.

Paul: Oh, yes yes.

Joe: And we had a very small virtual server at MediaTemple, that survived pretty crushing blows from TechCrunch, Digg, BoingBoing, with almost no load. And that was like, beforehand, memcached is so second nature to me at this point, that I was just like, "Oh, well I’m just going to cache everything in memcached", and it was literally just like this RAM spewing machine. It didn’t actually hit the database. Actually my sysadmin at MediaTemple was like "Something’s really weard, MySQL is only doing like 1 query a second, and you’re doing like 500 requests per second from BoingBoing. So I’m cached. Yeah memcached is just like, it takes literally 10 minutes to install, and probably another hour or two to implement.

Paul: Wow, that sounds excellent, that’s really good advice. Joe, thank you so much for coming on the show, and I can’t wait to get you and Daniel fighting with one an other in the not too distant future. I’m hoping to get a good violent argument about designers and developers, just because I can.

Joe: Laughs.

Paul: I was a little bit disappointed when you guys sat down at Future of Web Design, were far too nice to one another, compared to the evening before, when you’d had a bit to drink, and you were talking in the restaurant. That’s the kind of conversation I want, that real vicious session.

Joe: OK, I’ll make sure that Daniel and I get liquored up before coming on then.

Paul: Yeah, that’s the answer. Ok, thank you so much Joe, that’s really good advice, and we’ll talk to you soon.

Joe: Thanks Paul, bye.

Thanks goes to Nathan O’Hanlon for transcribing this interview.

Back to top

Listeners feedback:

Top web designer applications

Often this section of the show consists of questions for myself and Marcus. However for a change, I thought we should ask the questions. Via the forum, the boagworld site and twitter I recently asked you to vote for your ‘favourite web designer application‘. The response was overwhelming and you can see the complete list of suggestions on UserVoice. However, here are the top 5…

  1. Firebug – Firebug is a Firefox addon that puts a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. A less popular suggestion was the Web Inspector in Safari.
  2. Web developer toolbar – The Web Developers toolbar is a Firefox addon that provides a variety of web development tools. You can disable CSS and Javascript, visually highlight elements, manage cookies and much more. A less popular alternative was the IE developers toolbar.
  3. Adobe Photoshop – A professional image-editing and graphics creation software from Adobe. It provides a large library of effects, filters and layers. This is the grandfather of such applications and many (like myself) use it out of habit more than anything else. Less popular suggestions included Fireworks, Illustrator and Inkscape.
  4. Coda – Coda is a one window development environment for the mac. It includes FTP, text editor, browser preview and even terminal window. A beautifully designed app it appeals to the more visual web designer. Simple, easy to use and elegant.
  5. TextMate – TextMate is a powerful text editor for the mac with an extensive plug-in architecture. From its code highlighting in near endless languages to support for numerous version control systems, TextMate is probably the most powerful text editor out there.

If you disagree with the Boagworld Listeners top five or want to see the other entries then head on over to UserVoice and vote for yourself.

Sending out bulk emails

My second listener contribution comes from the forum. It is a question from Richard about sending bulk email.

Richard writes: I need to send out bulk emails to approx 200k registered (opted in) users on a monthly basis.

Does anyone have any recommendations for an outsourced bulk email provider?

As with the previous contribution I want to focus on your responses rather than my own. This is what the Boagworld community had to say…

Jamie was the first of a number of people to recommend Campaign Monitor. Judging by the feedback from the forum they offer an excellent service but are expensive when compared to others.

As well as recommending Campaign Monitor Nick mentions Silverpop, which he described as ‘an enterprise affair’. Apparently it is not as polished as campaign monitor but considerably more powerful.

Phil recommended two more, Mail Chimp and Mad Mini. He hasn’t used them personally but the prices look good and he says the user interfaces appear polished.

Doug doesn’t recommend a specific service but does refer Richard to a post on Creative Tips which provides a comprehensive review of Campaign Monitor, MailChimp, AWeber, and Constant Contact.

If you have suggestions for Richard or would just like to share your experiences of using bulk email services then contribute to the thread in the boagworld forum.

Back to top

142. Community

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

Download this show.

Launch our podcast player

News and events

Typeface.js

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

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

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

Sell Your Web App

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

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

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

Lessons learned while building an iPhone site.

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

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

Free Site Validator

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

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

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

Back to top

Interview: Mark Boulton on Design by Community

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

Mark: Good to be here.

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

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

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

Mark: I have really yes.

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

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

Paul: Three hundred users?

Mark: Three hundred thousand!

Paul: Ah ok.

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

Paul: Ok.

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

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

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

Paul: Yeah, totally.

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

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

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

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

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

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

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

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

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

Paul: You prefer to create a strong reaction.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul: No, I can imagine.

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

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

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

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

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

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

Mark: Great! Thanks Paul!

Paul: Bye bye.

Mark: Cheers. Bye.

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

Back to top

Listeners feedback:

Keeping Positive

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

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

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

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

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

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

Are these people worth your time?

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

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

Talk money

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

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

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

Ask/listen

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

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

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

Stick to your guns

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

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

Be gracious

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

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

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

Back to top

141. Feedback

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

Download this show.

Launch our podcast player

News and events

Working from home

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

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

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

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

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

Everything you know about CSS is wrong

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

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

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

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

Reduce your business costs with free stuff

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

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

Ideas include:

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

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

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

HTML Email: What mail clients are people using?

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

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

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

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

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

Alex goes on to summarise the key findings which include:

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

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

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

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

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

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

Paul Boag: Yeah that counts. I guess..

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

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

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

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

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

Paul Boag: Obviously not.

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

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

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

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

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

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

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

Paul Boag: All hell broke loose.

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul Boag: It’s that graceful degradation.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

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

Back to top

Improving your site with user feedback

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

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

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

There are two problems with listening to users:

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

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

Collecting user feedback

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

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

Face to face

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

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

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

Web stats and search queries

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

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

Questionnaires and surveys

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

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

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

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

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

Third party web applications

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

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

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

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

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

Assessing user feedback

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

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

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

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

Using web stats for more

We all use web stat tools like Google Analytics for tracking marketing campaigns. However, they can also be used to improve your site.

As I continue my efforts to finish the website owner’s manual, I have reached a section on web stats. What struck me was how little most of us use the power of web stats. They can do so much more than monitor your marketing efforts. In particular they can:

  • Help find and resolve problems on your site
  • Improve the quality of the content you deliver

Let us look at how.

Finding and resolving problems

When it comes to web stats one of the most popular figures to monitor is conversion rate. Conversion rate compares the number of users visiting your site to the number that complete a call to action.

If your conversion rate is low, this could reflect a problem with your site. This could be due to:

  • Usability – The user is unable to find the call to action due to poor navigation or other usability issues.
  • Accessibility – For example a particular browser does not render the site correctly and so users cannot complete the call to action.
  • Content – The site does not provide adequately convincing content to encourage users to complete the call to action.

But what consists of a low conversion ratio? That entirely depends on your call to action. For example, an ecommerce site could have a ratio anywhere between half a percent and eight percent depending on the sector and product. On the other hand, a call to action that does not cost the user money should expect a higher figure.

The best approach is to compare a conversion ratio against itself over time. As you make adjustments to your site does that harm or improve conversion rate?

Fortunately website statistics can also help establish what changes will improve your conversion rate. Start by looking at where users exit your site.

Dropout points

When looking at where users exit your site exclude those who only view one page. If you do not the homepage will be at the top of your list. This is because people click through from a search engine, discover this is not the site they wanted and leave immediately. Although this may indicate a problem with your SEO, it does not reflect badly on the site.

Once these anomalies are excluded take a look at the remaining pages. Why are users leaving at these points? Is the content relevant and clearly presented? Is the navigation usable? Are you suggesting a next step to the user or are these dead end pages?

Look at the history of users who dropout at a particular page. How long have they been on the site by this point? What other pages have they viewed? How long did they spend on the exit page before leaving? Does this reveal trends which help to identify the problem?

Sometimes the problem will be obvious, other times it will not. In such cases try usability testing. This will uncover potential issues. If usability testing is not an option try using a tool like Click Tales.

Click Tales picks up where traditional analytical packages leave off. It allows you to see what users do on an individual page. It record user sessions anonymously showing you what they click on, hover over and how far down the page they scroll.

Although a technology like Click Tales is impressive it cannot replace traditional usability testing. It does not provide you the opportunity to question the user. For example it will not explain why users abandon shopping carts?

When the website owners of ecommerce sites start examining their website statistics they are often horrified by the dropout rate experienced on shopping cart pages. They worry that there is a fundamental usability flaw. However, in many cases that is not true. Questioning users reveal they abandon baskets for a host of reasons ranging from ‘I was saving the items to buy later’ through to ‘I wanted to compare the price on another site’. Like the homepage, shopping carts will always have a high exit rate and no amount of statistical analysis can change that.

However statistical analysis will allow us to improve the content and products we provide on our sites.

Identifying popular content

There is a real benefit in understanding what users want from our sites. From what content they want to what products they will buy, understand users requirements allows you to mould the site to user needs.

Website statistics can help identify popular content but not in the way you might expect. Looking at the most visited pages will not provide answers.

Popular pages can be misleading for three reasons:

  • Pages can be visited by mistake
  • Page can be popular because their prominent
  • Pages can be popular because they are gateway pages to deeper content

The homepage is a good example of these problems. I have already explained that the homepage is visited my mistake from search engines. It is also a prominent page and used as a navigational tool for finding other content.

Looking at how long users spend on a page can help to weed out ‘false positives’. However ultimately this is a flawed approach and can only give a partial indication of the popular content on your site.

A better approach is to look at the search terms users entered into search engines to reach your site. Almost all website analytical packages provide this information and it helps define users priorities. However, this is only going to show content that already exists on your site. If a user entered a search term for content you do not have, your site would not have been returned. The user would never come to your site. What you really need is a way of identify content that you do not offer but users want.

This is possible by examining the phrases users enter into your own sites search engine.

Approximately half of your visitors will use internal search. Every time they use search they are telling you exactly what they want from your site in their own words. That is incredibly valuable.

You need access to these search terms and particularly the ones that return zero results. This is the area where you need to do work. Users are expressing an interest in a piece of information you do not have or your search engine does not recognise.

Once you have access to these search phrases, start tailoring content around them. If the content does not exist, add it where appropriate. If it does exist but is not being found, introduce the exact phrasing your users are searching for. Better to use the language of your users than sticking to internal jargon nobody understands.

And there you have it. Proof that website stats can be used for a lot more than just tracking marketing campaigns.

Overcoming stagnation

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

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

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

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

Overcoming stagnation

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

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

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

This can be overcome in three ways…

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

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

The importance of simplicity

There are two reasons why simplicity is important…

  • Simplicity sales
  • Users have limited attention

What do I mean when I say simplicity sales?

Simplicity sells

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

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

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

Limited attention

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

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

Google and Yahoo Homepages

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

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

Simplifying is hard for two reasons…

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

Nevertheless it is necessary.

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

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

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

135. Libraries

In this week’s show we talk with John Resig on javaScript libraries and address the question what is more important when we release an app: speed or quality?

Play

Download this show.

Launch our podcast player

News and events

The complexity tax

Don’t you hate it when somebody beats you to the punch? I recently finished writing a report for our biggest client (Wiltshire Farm Foods). It talks a lot about the need to simplify and remove complexity. It is a lesson we should all learn and so I am in the process of turning extracts from the report into a blog post which we will cover in next weeks show.

However, it would appear I have been too slow and that Gerry McGovern has beaten me to it with an excellent post on the cost of complexity. However, where I focus on why simplicity is important, he addresses the underlying causes of complexity.

For me his post is summed up in the following quote…

Most organizations are producing far too much content. Too many emails, too many PowerPoints, too many reports, too many webpages. All this content creation activity keeps a lot of people busy.

If you are part of a large organisation or work on a substantial website you need to read this post.

10 Rules for Driving Traffic Using Forums

What do you do if you have no marketing budget but have some free time to promote your site? Well, there are a number of guerilla marketing techniques you could use but contributing to forums is one of the most effective.

Sitepoint has posted an article explaining why forums are a great way of driving traffic to your site. It goes on to suggest 10 rules for doing so effectively. These include…

  • Build your profile
  • Follow the rules
  • Start by responding
  • Contribute your expertise
  • Don’t be a ‘me too’ poster
  • Don’t self promote
  • Explain yourself, but be brief
  • If you’re wrong, say so
  • Write intelligently and correctly
  • Negativity is a no-no

This is an excellent article and one that you should definitely read before using forums as a marketing tool. If you do not, you are in danger of damaging your brand, rather than driving traffic.

Accessibility in suit and tie

The life of the corporate web worker who cares about standards and accessibility can be a frustrating one; hampered by office politics and archaic content management systems. In an article on the Think Vitamin site, Bruce Lawson looks at what you can do to make sure your projects are as accessible for your users as possible.

Its a very pragmatic article, which I love. Bruce works from the premise that this is going to be tough and makes suggestions like "some accessibility is better than none". He also talks about the need for ‘buy-in from the top’ but goes on to provide practical tips about how to get that buy in. What is more, his arguments for accessibility were backed up with facts. For example…

Finally, he looks at how to get content providers onboard through education and getting them writing HTML rather than relying on the WYSIWYG editor.

UK Government Browser Guidelines

Our final story raises an interesting discussion; should you decide which browsers to support based on popularity or capability?

Apparently, the UK government believes we should test on the basis of popularity. In a draft document advising public sector websites, it suggests that if a browser appears in visitor logs as being below an arbitrary percentage of total “unique visitors”, then it should not be listed as being “fully supported”.

On the surface this appears very sensible. However, as Jon Hicks points out on his site, this can create problems. He writes…

It isn’t clear how the supported browser list would be enforced, but I’m concerned that this approach will encourage browser sniffing, a move that will exclude browsers like Omniweb, Shiira and iCab, simply because their name isn’t ‘Safari’. They share the exact same rendering engine, and therefore require no further testing. You can be more inclusive without spending any extra resources.

In other words we should be defining our list of supported browsers based on capability rather than popularity. This is the approach used by Yahoo! and it is one that I would fully support.

The Yahoo model supports all browsers through progressive enhancement and graceful degradation, without the need to test on every browser. Its a neat solution but one that the UK government guidelines specifically say they do not advocate…

These guidelines do not advocate specific development methodologies, for example graceful degradation or progressive enhancement. However, it is widely accepted that sites conforming to open web standards such as XHTML and CSS are more likely to work well across a wide range of browsers.

How come if they are widely accepted, do they not advocate them?

Fortunately there is an opportunity to change things before this is set in stone. I recommend reading the WaSP article on the recommendations and then sending some polite feedback to the powers that be.

Back to top

Interview: John Resig on javaScript Libraries

Paul:Joining me today is John Resig, who is famous for jQuery and the work that he has been doing with jQuery. John, it is great to have you on the show.

John:Well, thanks for having me.

Paul:I have to say this at the beginning. I have to get this out of the way. I absolutely love working with jQuery, and it’s an absolute pleasure. I remember twittering just a few days ago that every time I start doing anything in jQuery it makes me smile, so that’s got to be a good sign.

John:Well that’s good. I’m glad to hear it.

Paul: What I wanted to do today is get you on the show and not just for me to suck up and say how great jQuery is, but to kind of look a little bit broader at the subject of JavaScript libraries. Because I have to say from a personal point of view my opinion has changed quite a lot about JavaScript libraries and I’m kind of interested in your perspective on things as somebody that’s actually created one. I think the place I want to start is for a long time I had the attitude that you shouldn’t use JavaScript or indeed any library and that you should know the underlying code yourself and all of this kind of thing. Let’s start with the question of how do you know if it’s appropriate to use a JavaScript library? When is it appropriate to use it? What’s your opinion on that?

John:Well, I guess my opinion is it’s always appropriate, and I mean the simple fact of the matter is that there’s two things. One is that when you’re developing, you’re trying to support, generally a large number of browsers simultaneously. This is the same as if you are doing CSS development, JavaScript development, you want to support a large enough market share and you want to make that development process easy. The problem is twofold that you’re going to be encountering weird browser bugs and the APIs, the different utilities the browsers provide, will be different. For example, Internet Explorer provides different ways of handling events from all the other browsers. So what libraries do is that they remove you away from dealing with browser bugs, which is huge. And at the same time they provide a simple interface that you can interact with that will just work ubiquitously.

Paul:Is there a problem there in the sense of, you know, somebody came along and they basically learned to write jQuery for example from scratch, but never learned the kind of underlying JavaScript? Is there a problem there, do people need to know JavaScript before they start using a library?

John:It depends on the library, but I don’t think you do. I don’t think you have to know JavaScript. In a lot of ways, at least in my experience with jQuery directly there’s a lot of people who have used jQuery who have never done any programming whatsoever. jQuery does embody a lot of advanced concepts but you don’t necessarily have to know them in order to make good use of jQuery. I know this sort of translates well into some of the other libraries but one point of concern you brought up was what if someone learns a library but doesn’t learn JavaScript? I used to be more concerned about that, if someone only knew a library and I guess from a purist perspective, that’s a bad thing. Fundamentally, you want people to be getting better at programming JavaScript, not this specific thing. However, I think the reality of it is, is that so many people are just using JavaScript or CSS or doing web design, they just want to get their job done. It’s not really a matter for them of becoming an excellent JavaScript programmer or awesome CSS user, you want to get from A to Z and finish their work in an effective manner that works everywhere. So I think it’s important to realize that this market, so to speak, exists. It’s a very large one. And that ignoring it completely will just leave users frustrated and going back to the simple cut and copy paste scripts that they used to use. So, I think what libraries are doing is they are instilling good standards, they are instilling good practices, even though the users don’t necessarily know about it. And then eventually what’s good is that since these libraries have these good practices that users can always open up a library and read about it and try to understand better what’s going on.

Paul:I guess that’s always been a little bit of my concern with relying heavily on a library is that if you come across something that’s a problem or a bug or something like that, you can’t fix it yourself because you don’t necessarily know your way around the library. What’s your response to people that say stuff like that?

John:Well by the same token if you encounter a problem with a browser you are far less capable of fixing that issue. There’s really no way about it other than that ultimately it would be good to have that knowledge, absolutely. I fully support people who want to do that and I’m writing a second book now encouraging people to do that, to dig into libraries, to learn more, to build their own. What’s important here is that you just don’t, you can’t force people to do it if they, one if they don’t want to or if they’re just not capable. There’s no reason I feel to force a designer, someone who’s a designer by trade to learn the fundamentals of object oriented programming, or functional programming. Theoretically that can help them some way in the future but what’s more important to them is doing good design and I think by helping people keep their focus where it should be. Obviously if a library is able to help programmers program better, that’s good as well. It’s all about helping people keeping their focus and making sure they aren’t down a rabbit hole getting sidetracked.

Paul:I think that’s the thing that really attracted me to jQuery is as a front-end interface designer was the fact that I could pick it up and run with it very easily. The conclusion I came to is, “OK. Well if I do by some chance find a major problem with it, there’s a massive community of very clever people out there that I can ask and I can get help from.” So, that kind of reassured me, I think. If then, we’ve kind of come to terms with the fact: “OK we want to use a library.” There are so many different ones out there. Run us through some of the different options available and the pros and cons and how do you go about picking which library is right for you?

John:Well it really depends a lot. There’s a coupe questions you need to answer. Probably the most important of which is you need to ask yourself, how do you want to write JavaScript? Because libraries end up augmenting or really changing the style of how you write JavaScript. So, finding a library that you like how it looks. It sounds very superficial, but you like how it looks, you like how the code feels is a great place to start. There’s obviously a lot of libraries to choose from. There’s a select group of libraries whose quality is generally above the others and the popularity of those libraries generally reflects the quality as well. Out of those I pick generally jQuery, Prototype, Yahoo UI, dojo, then also MooTools and sometimes XJS. What’s interesting is all those libraries are open source and they are all the most popular JavaScript libraries. I don’t think that’s a coincidence. It’s just a matter of fact that in the web these open source frameworks are going to improve better and attract more users and generally have better community to surround them. So out of these libraries though you break down into a lot of different paradigms for development. I’ll try to summarize as best I can, but it really is not substitute for trying it out yourself. Looking and seeing some examples you can have a pretty good feel right away. So, Prototype and MooTools, they both extend the native objects of the language. They both try to improve the JavaScript language itself. So they add new methods to arrays, they make strings better, at the same time they provide things like object-oriented code
, and all the way out to doing things like events and AJAX. The normal things that you would expect. But at a very broad level they are trying to improve the overall quality of the language and of the experience. Then you have Dojo, Yahoo UI, and XJS and they are generally very modular, very package oriented and they have components you can easily snap in and out with nice ways of handling dependencies and it can end up being a very cleanly architected style of coding. They really support object-oriented code, and additionally events, AJAX, all the normal stuff you would expect. I would tend to group jQuery a little bit differently in that jQuery is more oriented toward improving the relationship between JavaScript and HTML and that it’s highly focused on searching through an HTML document, modifying some things, just getting in and getting out. Unobtrusive, and it doesn’t provide any language features, it doesn’t provide any object-oriented code writing features, it’s just hyper-focused at the task on hand.

Paul:It strikes me from my experience with jQuery that it’s very much a tool that’s primarily focused at helping front-end interface people implement the kind of functionality that they require from a usability point of view rather than necessarily doing, I mean would you build massive applications in something like jQuery?

John:It’s absolutely possible and people do it all the time. For example, T-Mobile’s T-Online in Germany, they built their entire user area so like their mail, their calendar, and everything using jQuery. So it’s absolutely used for very large projects. What I think is very interesting for jQuery at least is that while we don’t explicitly provide the object-oriented styles that most hardcore developers are used to we provide some very interesting alternatives especially they way it, like functional programming that I think actually end up suiting development very well. It’s very different, I will completely grant that, but it’s still very capable of scaling quite large.

Paul:So if people go out there and they have a kind of play around with these different libraries and try each of them out as you say to kind of find what fits their style of coding, once they’ve found something that kind of codes in the way they would like to, for example for me the similarities between jQuery and CSS made it a very natural fit, but what are the kind of things that you should look for from a functional perspective? What kind of things should be included in a JavaScript library? Does that make sense?

John:At the very core there should be a set of features. Of the libraries that I listed previously they all have methods for doing DOM traversal, so traversing through an HTML document, modifying an HTML document, events, so handling user interaction, animations and AJAX. All of them have some support for that to one degree or another. You can be fairly safe in knowing that if you pick a library you will have that base level. In my opinion those sets of features are probably the most important features and the ones that you end up using the most with your applications. Some people might say in their particular case that maybe animations aren’t as important, or maybe that they aren’t using AJAX, it really depends but for most of the time that set of features is fairly comprehensive. On top of that you really have to start to, once you’ve tried to use it, and once you’ve played around, there’s a whole set of secondary features that you kind of have to dig into, ones that aren’t immediately code-related. Things like the community around a library, the documentation for a library and even the health of the projects themselves.

Paul:What do you mean by that last one, the health of a project?

John:There’s a lot of things. In health, do they have an active development team? Are there developers? Are there multiple developers? It’s the famous hit by a bus; if a developer is hit by a bus will the project still continue? Is there a team will continue? Can you view the source code? Is there a repository where you can go? Is there a bug tracker where you can submit bugs? And finally is there a test suite, is what you’re going to be using going to be tested and analyzed to make sure it stays working. Another point that’s important to bring up is that a lot of browsers now are starting to integrate the test suites of these libraries into their test suite. So for example actually this is a lot of my work at Mozilla, was integrating the test suites of Prototype, Scriptaculous, jQuery, MochiKit, a bunch of libraries into our test suite such that if we ever added a change that caused a regression to happen in a library we would catch it and we would fix it on our end. Obviously we would do this in a very smart way, we wouldn’t just blindly be like, “Oh something broke!” We would communicate to the library what the issue was or whatever and this has been very big because now you can, there’s an extra level of safety and security here, in that you’ll know that if you’re using a library like this that it’s going to continue to work going forward in these browsers. That’s an extra level of safety that your personal code can’t provide. I think that’s very interesting. I want to jump back here really quick to the other issues I mentioned.

Paul:Sorry, I distracted you there and we took you off topic.

John:It’s OK, it’s OK, of community and documentation. So community, it can be usually be pretty easy to determine the health of the community. All these libraries will have some sort of a mailing list or a forum that you can go to. Just hopping on there, seeing how many messages are posted, seeing what the typical response is like, how they treat new users, just stuff like that it can be really useful because if you’re just starting out, you know you’re going to have some pretty basic questions. Do they understand your problems? Do they help you out? Doing some searches on Google for example to see how many people are talking about it, or using a service like Technorati or something. Are people blogging about it? Is it positive? Are they having problems? The other thing is documentation. This is also pretty easy to tell. If you are starting out with a library, you’re probably going to start out by doing a quick test, running a simple application just to get a feel for it. When you’re doing that you’re immediately going to be in the documentation trying to figure out how things work. I think you’ll be able to determine pretty quickly if the documentation quality meets a standard that you, because if you aren’t, if the documentation just isn’t that good, you’ll immediately have problems and I guess you will have to resort to the mailing list or the forums or whatever. Secondary is, do they have good examples? Do they have books if you want to learn from a book? Do they have books that you can buy to learn from? So again there’s a whole lot of issues here but what a lot of it boils down to is looking at the libraries, looking at their style of code, does it seem alright with you? Then just doing a quick test with each of the libraries that you’ve picked out, building like a menu or just a basic form of interaction. How easy is it? How hard is it? Does it in fact mesh with you well? This is something you can do over the course of a single day and it definitely shouldn’t take you any longer th
an that. If it’s taking longer than that then you probably want to try a different library. Ultimately you should be trying to use these libraries to make your development simpler and easier. If it doesn’t improve your productivity, if it doesn’t improve the quality of your code then you probably shouldn’t be using it to begin with.

Paul:Tell us a little bit about the kind of plug-in architectures that exists around many JavaScript libraries. Certainly I know there’s a strong plug-in architecture with jQuery. Does the same kind of thing exist with other libraries?

John:It depends. What jQuery has is a little bit unique in that we provide a number of plug-in points that plug-ins can snap into and extend how jQuery works. So they can add in new CSS selector behavior, or they can add in new events or all sorts of intricate additions. Other libraries have things that aren’t quite of the same vane, in that they’ll have modules or packages that you can use. Also another thing that varies is how do the various projects treat these plug-ins? At least with jQuery there’s a dedicated plug-in repository that’s used that plug-ins are listed in that you can browse through, you can see ratings, comments, discussions and things like that. Currently no other framework has something similar to that to the best of my knowledge. It’s much looser, just people uploading, putting things to their websites or Google code or some such. So again, at least to me, what makes plug-ins, jQuery-style plug-ins important is that they are, that there’s extension points and that they are supported by jQuery fully.

Paul: The only thing that I think that I kind of struggle with a little bit about plug-ins, you know I love the idea that there are other people out there that can do the hard work for me in that they can develop something I was looking for, and I love the fact that I can go to jQuery, I can type in whatever I’m looking for and it will pull back stuff. I’m always a bit unsure mind about how reliable those plug-ins are, you know as you’ve been saying with the kind of, the core jQuery library that you’ve created I know there’s a big team of developers working on it, I know that it’s thoroughly tested, I know what browsers it’s tested against, all of that kind of stuff. Plug-ins are a bit more of an unknown entity. Is there any kind of advice that you can provide about judging whether a plug-in or module or whatever is reliable or not?

John:I mean you sort of have to use the same standards that you would use in looking at a library. Looking at, what you mentioned, is it tested? Is there good documentation? Are there, how many developers are working on it? Like for example in the jQuery project we started a sort of, sub-project called jQuery Glide in which we’ve taken a whole bunch of plug-ins and actually blessed them and proved them, given them themes, excellent documentation, examples, all this stuff and made them sort of official. We’re doing this more and more, trying to bring in more plug-ins, improve their quality and make sure that they’re up to our standards. There’s still tons and tons of plug-ins that are just excellent, but the issue comes down to that you have to sort of train your eye to look at, and be able to spot when something has good quality. The thing that’s easiest for a plug-in author or a library author to do is to just set up a page that has their code on it and has a basic example. At the very least every single library is going to have that. If you dig in and see that it has documentation, that it has tests, you begin to realize that that plug-in is a much higher quality, at the very least. I think it’s really starting to dig in to these side issues, that you begin to get a better picture of how, of the true nature and of the true health of a particular library.

Paul:Excellent! That’s really useful and I think it’s easy to just look at these libraries and indeed the plug-ins as well and ask, “Well do they have the basic functionality that I require?” But, like you say, looking at things like the community and documentation and things like that are equally important. It’s been very useful John. Thank you for taking the time to come on the show. No doubt we will get you back in the future to talk about some of the specific things going on with jQuery and maybe this book that you’re writing as well, sounds very good. Thanks for your time.

John:Thanks for having me, Thank you.

Thanks to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

Quality or Quickly?

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

I received this question from Pete in South Africa…

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

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

To read the rest of this blog click here.

Back to top

Quality or quickly?

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

I received this question from Pete in South Africa…

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

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

The advantage of launching early

twitter website

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

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

The disadvantages of launching early

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

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

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

How to make a decision

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

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

getsignoff screenshot

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

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

Fearing competition

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

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

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

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

128. Details

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

Play

Download this show.

Launch our podcast player

News and events

Silverback Launches

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

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

PatternTap

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

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

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

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

Google App Engine Update

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

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

S3

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

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

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

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

Back to top

Interview: Dan Rubin The Details Of Design

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

Dan Rubin:Good to speak to you Paul.

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

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

Paul:Oh was it?

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

Paul: laughs

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

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

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

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

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

Paul:A subconscious expression?

Dan Rubin:Yes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks to Sarah Galley for transcribing this interview.

Linkage

You can find Dan Rubins site, Superfluous Banter here.

Typography
Layout
Colour

Back to top

Listeners feedback:

Managing a Bigger Team

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

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

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

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

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

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

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

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

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

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

Terms and Conditions

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

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

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

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

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

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

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

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

Back to top

 

127. Context

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

Play

Download this show.

Launch our podcast player

News and events

Working from home

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

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

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

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

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

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

British Standard for accessibility

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

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

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

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

Growing your business through twitter

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

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

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

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

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

Smart CSS aint always sexy

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

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

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

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

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

Back to top

Feature: Content is dead, long live context

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

Back to top

Listeners feedback:

Video and an elderly audience

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

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

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

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

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

Most influential books

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

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

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

Content is dead, long live context

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

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

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

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

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

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

  • Environment
  • Device
  • Comfort
  • Mood
  • Time

Let’s look at each of these in turn.

Environment

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

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

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

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

Device

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

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

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

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

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

Comfort

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

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

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

Mood

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

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

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

Time

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

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

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

123. Plight

In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

Play

Download this show.

Launch our podcast player

A quick request. We are really in need of some more transcribers to help with the interviews we do. The team we have are doing an amazing job but it would be great to spread the load.

If you feel you could help once in a while please drop an email to Ryan our producer and he will add you to the list.

News and events

SPAM meltdown

It is always with fear and trepidation that I mention HTML email. It inevitably leads to a torrent of comments ‘educating’ me about the evils of HTML in email, and that we should only use plain text.

Although personally I wish HTML email was never invented and try to limit its use, I do accept it is here to stay. Despite its many drawbacks it is statistically more effective than plain text from a marketing perspective.

You will be hard pushed to pursued a client to forgo HTML. Inevitably we will have to produce HTML templates occassionally. Of course, being conscientious, when we do produce HTML emails we want to ensure they look great and are well coded. This leads me to a couple of stories worth mentioning.

The first is that Patrick McNeil (of Design Meltdown fame) has launched a new site called Spam Meltdown. The site showcases examples of great email design in much the same way as Design Meltdown does with websites. Patrick has done an amazing job on this site and he has my sympathy because he is subscribed to over 1000 mailing lists! The designs he showcases are organised by style, colour, industry and topic. As with design meltdown this categorisation approach works really well. You can quickly find inspiration by looking at categories that are relevant to your project.

The second news item worth mentioning is that Campaign Monitor have updated their chart for CSS support in email clients. Campaign Monitor is a service which allows you to send HTML newsletters, but they do a lot more than just take your money. They are actively involved in improving standards support among email clients through the email standards project. Next time you are trying to produce an HTML email template check out their CSS support grid as it will clearly show you whether a particular CSS property is supported.

Form Analytics

While I am on the subject of cool services like Campaign Monitor, I also want to mention Clicktale. Clicktale is a service that allows you to track users as they move about your site and even anonymously record their actions. The last time I mentioned them this disturbed many people who saw it as an invasion of privacy. However, I see it as a valuable tool for learning about user interaction and improve site usability.

If you share my view, then you maybe interested in a new service they are starting to offer. You can now not only track users as they click around your website, you can also watch how they interact with forms.

In addition to video recording, the new form analytics service also provides three invaluable reports…

  • The time report – This shows how long users spent completing each field.
  • The blank report – This provides information on fields that have been left blank on submission.
  • The refill report – Which highlight fields that have been completed incorrectly.

If you run a site that requires users to complete long or complex forms then you will see the benefit of this service. On a high trafficked ecommerce site this would be invaluable, substantially reducing the number of users dropping out at checkout.

Art direction hits the blog

This week has seen the launch of Jason Santa Maria’s new personal website. For those of you who do not know, Jason is the creative director at Happy Cog (Zeldman’s company).

Normally, I would not mention the launch of a new personal website. However, Jason has done something very interesting. His new design is well executed but plain. It certainly is not as inspiring as his other work. The reason for this simple approach is that it is a framework upon which he will build.

The idea is that each of his blog posts will have a custom design to accompany it. The design will therefore reflect the content. In effect he is bring art direction to his blog. This is a bold experiment and something that Zeldman has written about before.

Although I am fully behind the idea of bringing content and design closer together, I do have some reservations. First, there is a possibility that the constantly changing design could make navigation around the site confusing. Fortunately from what I have seen so far that will not be the case. Jason has been careful to ensure key navigational elements remain in a consistent location and have similar styling wherever you are in the site. However, if other designers were to adopt this approach would they be so careful?

My second concern is a purely practical one. If each article not only needs writing but also designing, will that reduce the amount Jason posts? In other words is a blog really the right place for this type of art direction?

However, despite these reservations I am really pleased Jason is trying this approach. A personal website should be the place to experiment and try new things. Too many blogs (including my own) are cookie cutter solutions with some pretty graphics slapped on top. Its superb to see somebody doing something different.

Prototyping

My final news story of the week returns to a subject we have touched on recently. How do you wireframe a modern web application with its high level of interaction? In show 120 I mentioned that one approach might be to utilise flash. Today I want to point you at an article on the List Apart website, which suggests that building prototypes maybe better than struggling with wireframes.

When I first saw this article I was hesitant. After all I can barely pursued my clients to pay for wireframes let alone a full blown prototype. However, the more I considered what was being suggest, the better the idea seemed.

The majority of time spent getting an application working is spent on bug fixing, browser support and non-core functionality. The rough ‘outline’ of an application can come together very quickly. What is more, unlike wireframing, a prototype can be used as the basis for the final build. It does not get thrown away like a wireframe.

The article also points out that prototypes are better for demonstrating difficult concepts to clients. They encourage earlier collaboration between designer and developer, and provide something substantially better to user test against.

With almost every new website having some form of web application, we all need to consider how to better conceptualise their operation.

Back to top

Feature: The plight of the in-house designer

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? We discuss this in this weeks feature.

Back to top

Reviews: Textmate and Top 5 Tips for Web Designers

We have two reviews this week by our lucky competition winners Teifion Jordan and John McFarlane. Teifion and John will be going to this year’s dConstruct in Brighton.

dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications. Tickets cost £125 inc VAT and went on sale yesterday so be sure to check it out.

Textmate by Teifion Jordan

Hi, I am Teifion Jordan, I am reviewing a program created by someone far smarter than me. I am going to be looking at Textmate. Textmate is a Mac only application though there is a similar editor called eText Editor for Windows.

First impressions of Textmate are that it’s pretty sparse, it looks like any other editor. I throw it a PHP file and it colours the text in, just like any other editor would. The colour scheme can be changed, both text and background colours can be altered, which is quite a neat touch. I can even make parts bold, italic and underlined which is a neat touch. It requires knowledge of Regular expressions but I can actually add in more rules for what to colour in! I used this to make variables used as array indexes appear differently, something I have wanted to do for some time. Not since I was a toddler, but definitely some time.

But enough moaning about how the program itself is both smarter and better looking than me, I wanted to try some code. I found that if I typed "foreach" in a PHP block and hit tab, I was presented with an entire foreach loop. Closer inspection revealed that there were dozens of snippets and commands for PHP and dozens more for each of the many languages and some things that were not languages. With 5 minutes of effort I had setup Textmate to post my blog posts for me, I am now one step closer to not having to put any effort at all into blogging.

It is possible to create your own snippets and not at all hard either. I now have one to tell me that I am beautiful and another to create a PostgreSQL query. I can also write new commands, I can write them in command line script, Python, Ruby and PHP to name a few. All of the commands are completely open sources, so you can see what’s already been done, and sort of plagiarise that sort of work for your own means. Except plagiarism is bad so don’t ever do it.

I can edit columns, I can write new snippets, commands and even entire languages, I can Regex, I can manage projects with a hierarchal file structure. It’s like before I was walking but now I’m on a push bike. I can’t make use of the ability to run down pedestrians until I learn how to do balance and pedal. Okay, the running down pedestrians was a bad example but anybody that is still listening and not calling the police must have understood it so I’ll continue. There’s nothing I can’t do in Textmate, I just need to look at the extensive online manual to learn it. And there I think is it’s biggest failing.

Textmate is a really lovely program to use but it’s so complicated. Coda, as a contrast, is a more intuitive application but it is to Textmate as a spade is to a chainsaw, that is, meant for a different problem and with fewer moving parts but also with the ability to digs holes? I’m sorry, my mind wandered. What I meant to say is that Textmate is great for dealing with code but not so much the design which is what apps such as Coda excel at. I’ve now been using Textmate for 10 months and I still think there is potential to unlock, though, that might be because I’m a thickie.

I suppose I should wrap this up by saying that I would heartily recommend anybody thinking about writing lots of code to give TextMate a good look. It takes a lot of time to get a lot out of it, but there really is a lot to get out of it.

Thank you very much for listening, I hope this was at least semi-informative

Top 5 Tips for Web Designers by John McFarlane

Hi, I’m John McFarlane and this is the first ever review brought to you live from my living room. Today I’m reviewing a post that has been submitted on the boagworld.com forum. The title is "Top 5 Tips for Web Designers". I’ve been reading through the replies and I’ve put together my top 5 top tips.

In at number 5 submitted by richquick, allow time and money for personal development, read blogs, buy books, attend conferences, experiment and learn new techniques and technologies.

In at number 4 posted by Jayphen, surround yourself with designers, whether they’re colleagues, real world contacts, online contacts, forums, podcasts. The more you talk about design the more you learn and I’d like to add to that e-mail designers for advice and let them know your experiences.

In at number 3 posted by some guy called Paul Boag, develop with the latest best practices, ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancements.

In at number 2 another one by Paul Boag, it’s an obvious one but one that can’t be put across more clearly, know HTML, CSS and javaScript inside out, you need to know the core technologies that underpin the web back to front. I’d like to add to this point, the basics of HTML and CSS are easily learnt but don’t be fooled into thinking that you know enough, you really need to know these subjects to an advanced level. This will benefit you when your implemented the latest best practices.

And that brings me on to my number 1 tip and that is love your job, I think if you love this industry and have a passion for web design, I think those qualities will guide you to achieve your goals. So enjoy your development and don’t rush yourself too much. Take the time to develop the right way, build contacts and friends and embrace the industry as a whole.

That about raps up this weeks review. I hope you’ve enjoyed the very first show live from my living room. Thank you and goodbye.

Back to top

Listeners feedback:

Newspaper columns on the web

Adrian writes: Hey guys, long time listener from the states. I’ve been working on a new personal site lately and I’ve become fixated on the idea of using newspaper style columns. Since you two seem to know a thing or two usability, I’d figure I’d ask for your thoughts.

It seems like most people view them as a print concept that doesn’t translate well online but seeing as most screens these days are widescreen and vertical space is taken up by menu bars, docks and browser extensions, going horizontal strikes me as a logical solution.

I appreciate the logic. It is true that more computers than ever have widescreens and that vertical space is at a greater premium than horizontal. However, I would think very carefully before employing newspaper style columns. As I see it there are two concerns:

The usability concern

As you point out, people reference usability concerns as the primary reason against newspaper columns. In a newspaper, copy runs across several columns with the eye darting from the bottom of one column to the top of the next. This is acceptable because the user can view the entire newspaper in a single glance. There is no such thing as a scroll bar.

On the web it is different. You are unable to predict the height available in a browser window and so users will almost certainly have to scroll. This means the user will scroll down one column as they read and then have to scroll back to the top to start the next column. This is far from a pleasurable reading experience.

It is also important to consider width as well as height. As you say newspaper style columns works well on high resolution, widescreen monitors. On anything less the story becomes unreadable with narrow columns and short line lengths. The alternative is to allow both horizontal and vertical scrolling. But as I am sure you, know this is the ultimate usability error and should be avoided at all costs.

The technical concern

There are also technical considerations to take into account. How will a story be split over multiple columns? Currently this cannot be done in CSS, although this may appear in CSS3.

One option would be to manually layout each block of text. However, this isn’t going to be practical with anything other than the most static of sites.

The only option is to use some server side code. However, even this is not without its problems. Consideration needs to be given to inline elements such as images or quotations. What happens if they appear at the end of one column? Does a quote get split? Will the design accommodate larger images? What happens when text is scaled?

Although all of these technical problems can be overcome, you are forced to ask whether it worth the effort. This is especially true considering the serious usability concerns.

Estimating dev/creative work

Kirk Henry asks: I’m not sure if this should be listed as a question or not but her goes. I’m a Creative Director for a dev shop with some very large fortune 500 companies and a problem I always seem to come across is difficulty in the estimating process. We use excel documents, have some standard hours for comps but have to do custom estimation for multi media projects etc… my estimates are always pretty decent but I want to know what you guys use or what software you would recommend. I have been listening on itunes from the start and love the show.

Ok, this is probably the most important subject that we (and I mean the web community) don’t talk about. Why? I think, because it’s difficult to pin down a method of reliably estimating a project and, more so, we’re all guilty if underestimating time and again… these are my thoughts:

The first thing to ask yourself is ‘how serious is this project?’ I have a sixth sense for requests for quotes that fit into the following brackets:

  • ‘We have this idea but have no idea how much it will cost and we want you to do all the research work involved in scoping it. Of course we won’t pay for the research and there’s no way we’ll pay sensible money for the work once we know what it is’
  • ‘We have a supplier that we want to work with but my boss says I need a couple of other quotes’
  • ‘Us guys in sales and marketing have been doing some blue sky thinking and want a quote to redevelop Google….’

You get the idea – timewasters. You need to deal with these requests quickly – this is how I do it. Have a chat with whichever department(s) would do this work if it ever materialised – get them to give you wide ballpark figures. Add in PM and contingency and send them an email. 99 out of a 100 won’t even bother getting back to you. Some will, but they’re usually trying to get free scoping (‘can you give me a bit more detail on how you reached those figures’).

Anyway, I’ve ranted long enough timewasters, back to Kirk’s question.

First question – do you know the budget? If yes, then you are looking to fit a scope into a set amount of effort. Can you do it? Will the ‘client’ be happy with the scope that fits their budget? Do they understand what that scope is (especially if you have reduced it to fit their budget)? DO NOT get creative with your effort allocations just to fit within the budget. Either ask for more (up front) or walk away.

If you don’t know the budget then you are looking to scope a project from scratch. If it’s a really big project then ideally you should be being paid to scope it as we’re looking at business analysis and consultancy here.

Break down the project into rough task areas. It’s likely that you’ll have done other projects that include similar tasks so you’ll know efforts on these (though ask yourself if you got it right last time). For the ‘new’ tasks, break it down further and you will probably find other smaller tasks that you have done before. For the really new stuff then you need to talk to an expert (designer/developer/IA) and get them to think the task through. They will provide you with an informed guess. That’s right – guess. Because people are guessing it is really important to overestimate fixed price projects. This is the cost to the client of having a fixed price.

Don’t forget to charge for meetings (if 3 people are attending then charge for 3 people!). Project management is notoriously undercharged. We have a rule of thumb of 15 – 20% (and that’s probably light).

The golden rule of estimating is don’t be tempted to lower your probably already too low price just to win the work. Be prepared to walk away.

As far as tools to help with estimating go, MS Project is great at separating tasks, linking resources to tasks and giving you a good idea of how long things will take. But, I tend to find that it is over the top at the quote stage and tend to stick with Excel.

Back to top

Website Owner's Manual

I have been working on my book (The Website Owner’s Manual) for a while, but finally I have something to show you.

Update: You can now order the website owners manual and get access to chapters as they are written.

No, I haven’t finished it and to be honest my progress continues to be slow. In fact it is so slow my publisher is currently looking for a release date of December! Oh the shame :(

A recap: What the book’s about

First of all a quick recap on what the book is about. This is what my publisher has written…

Just because you’re responsible for your organization’s web presence doesn’t mean you know how to build a website. The job of planning, launching, and managing a site often falls to people who have little or no experience in web design or development. Website Owner’s Manual is a book for the thousands of marketers, IT managers, project leaders, and business owners who need to put a website in place and keep it running with a minimum of trouble.

Website Owner’s Manual helps you form a vision for your site, guides you through the process of selecting a web design agency, and gives you enough background information to make intelligent decisions throughout the development process. This book provides a jargon-free overview of web design, including accessibility, usability, online marketing, and web development techniques. You’ll gain a practical understanding of the technologies, processes, and ideas that drive a successful website.

So, basically it is a book aimed at website owners rather than web designers. That said, I think there is a lot of useful content in for web designers as well.

Content includes…

  • Secrets to a successful website
  • Defining roles and evaluating objectives
  • Planning and measuring your success
  • Page design and branding
  • Layout challenges
  • Creating killer content
  • User testing
  • Content management systems
  • Web design best practices
  • Domains and hosting
  • Website promotion explained
  • Techniques for engaging visitors

All useful stuff, whatever your job title. What is more it shows web designers how to better communicate with clients. In particular it helps define the role of the client. I can imagine this is a book many web designers will end up buying for their more ‘challenging’ clients.

The news: Get early access to chapters

Of course most of this you already knew. The interesting part is that you can now read and contribute to the first 5 chapters of the book.

The thing I love about Manning (my publisher) is that they run something called MEAP (Manning Early Access Program). The aim of this program is to engage the reader in the process of writing the book. Think of it as user generated writing.

For between $23 – $40 you can join the program and gain access to all of the chapters as they are written. You will also get the final book when it is released.

Each chapter is released in a very rough and ready form including all my horrible, badly drawn, sketches. You can read each chapter and make suggestions, corrections and comments via the books own private forum. I will be checking it regularly and working with you to improve the book.

What a bloody brilliant idea!

So if you fancy getting involved go to the Manning website (yes it is horribly designed!).

There is even chapter one waiting for you free of charge.

120. WCAG 2

In this weeks show we talk with Patrick Lauke about WCAG 2 and we discuss the perils of blindly following conventions.

Download this show.

Launch our podcast player

News and events

IE testing made easy

Testing in Internet Explorer is horrible for many reasons. Not least the fact that you cannot run multiple versions of IE on a single operating system.

In the past there have been a number of solutions to this problem. There were standalone versions of IE. However, it quickly became apparent that they did not behave as IE does natively. There are online services which provided screenshots of your site in different versions of IE. However that does not give a sense of whether interactive elements were working correctly.

The only really feasible solution was to run multiple operating systems as virtual PCs but this was slow and inconvenient.

However, it looks like things might be about to change. DebugBar have just released IETester. A free web browser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7, IE 6 and IE5.5 on Vista and XP all at once.

They are currently describing it as Alpha software (whatever that means), so it sounds like it is still a work in progress. As with any such software it is hard to know if it is accurate. If you do choose to use IETester, I would still recommend giving your site a final once over in native copies of IE before making it live.

That said, this does look very promising and I will be trying it out myself very soon.

Hosting your Javascript libraries

Our next story is an announcement from Google. They have started to host the main Javascript libraries including…

  • jQuery
  • prototype
  • script.aculo.us
  • MooTools
  • dojo

This means that if you are using a Javascript library it does not need to run from your own server, but can pull it directly from Google.

“Why would I want to do that?” I hear you cry. Mainly to improve performance. First, according to people much cleverer than myself the Google servers are faster and can deliver libraries much quicker. I know little about server performance so I will have to take their word on this.

However the main reason is that if enough web developers use this approach we will see a significant caching benefit. Lets say a user visits headscape.co.uk and this site pulls its jquery library from Google. Boagworld.com does the same thing so when the user visits that site it uses the cached version (from the visit to Headscape) rather than re-downloading it again. As more and more sites pull their Javascript libraries from Google the likelihood that a user already has a cached copy of that particular library increases.

Of course allowing Google to host your Javascript does require a level of trust. What if Google goes down? What if Google turns evil and starts using Javascript to manipulate your site? What about the data this approach gives Google about your site?

However, if these concerns do not worry you, then there are definitely tangible benefits.

Prototyping website interaction in flash

Next up we have a tutorial demonstrating a quick and easy way to prototype complex website interactions.

In some ways the static Photoshop comp is becoming less useful. Modern websites have numerous interactive elements that are hard to convey through static images. There is a need for something that can demonstrate this functionality.

We have spoken before about wireframing interactive websites, but not how to demonstrate changes in visual look and feel. This article on boxes and arrows suggests that Flash maybe the answer.

The advantage that flash has over something like a clickable PDF is that it allows for easier updating when the client wants to make changes. However, it does require basic Actionscript skills. Fortunately, the tutorial talks you through these step by step and none of it is too challenging.

If you are looking for a way to better demonstrate interaction in your design comps then this might be the answer.

The rule of thirds

The final news story today is another post from those lovely people at Smashing Magazine (we love them since they said nice things about our podcast!) The article entitled “Applying Diving Proportion To Your Web Design“, introduces the reader to the fascinating subject of the golden ratio (also known as the divine proportion or rule of thirds.)

If you haven’t come across this principle before then I highly recommend reading more. The rule of thirds emerged in the Renaissance but has always excited in nature. There seems to be something inherently pleasing about these proportions and they occur again and again. There is something about human perception that is naturally drawn to this composition. We can use this to our advantage when designing websites.

The article goes on to demonstrate how the golden ratio can be used in all aspects of design from photography to web design. In particular it focuses on the benefits this can provide to the grid structure of your sites.

Admittedly if you have not come across the rule of thirds before this can all sound like hocus pocus. However it really does work. Following principles like this can dramatically improve your designs. What is more they can be followed by anyone even if you would not consider yourself a designer.

Back to top

Feature: Defying Conventions

As the web matures an increasing number of conventions are emerging. But should we always follow the crowd? In this weeks feature we discuss just that.

Back to top

Interview: Patrick Lauke on WCAG2

Paul: So joining me today is Patrick Lauke from splintered.co.uk, is that best way to refer to you?

Patrick: Yeah, it’s one of my many monikers, yes.

Paul: Just so many presence on the web, you’re just so well known. Good to have you on the show, Patrick, it’s been a while.

Patrick: Thanks for having me.

Paul: I don’t think you’ve actually been on Boagworld before have you done Dot Net with me, but I don’t think you’ve done Boagworld.

Patrick: Exactly, yeah, I’ve only had the pleasure of sitting on the Dot Net one.

Paul: Well this is the proper grown up, you know, professional version compared to Dot Net.

Patrick: Super!

Paul: So the reason I wanted you on the show, Patrick, I have to be honest is as much for me as it is for my listeners this time round, because you are our resident accessibility expert, and we had a conversation a long time ago on the show about WCAG2 and we talked a little bit, not with yourself but we’ve talked on the show before about WCAG2 and it was coming along and all the rest of it, but it suddenly occurred to me we haven’t done anything on it for ages, and I’m wholly ignorant on the subject and the current state of affairs, so I thought, I know, I’ll get Patrick on the show, I’m sure he’s bothered to read it and knows what’s going on. Hence you’re here.

Patrick: Excellent.

Paul: So you’re not going to let me down, you have actually read WCAG2 have you?

Patrick: I have, I’ve been fairly involved with it, yeah.

Paul: Good! That’s encouraging. OK so perhaps the best place to start is, where’s it currently at, what’s the stage of development at the moment?

Patrick: Right, well literally a few weeks ago it entered what’s called the Candidate Recommendation Stage, all part of that W3C terminology they use. It wasn’t…it has been in last call for about 2 years now, but yes, Candidate Recommendation really means that now the WCAG working group and the general public has been kind of sending in comments etc on the status of the document. They’ve all reached kind of a broad consensus about, yeah, it’s fairly…it’s pretty much there, you know, it’s fairly accurate, technically there’s no big howlers in the actual wording of the things. I mean there might still be a few minor, minor details that change from now until the end, but pretty much the actually core of it is as good as it’s going to get.

Paul: OK.

Patrick: And really the…kind of the purpose of this Candidate Recommendation Stage, you know, why aren’t they going straight out and releasing this now as a standard, is really to give people an opportunity to start test driving, you know, what WCAG2 says in its current state, so working group thinks it’s pretty much there, let’s test it out actually in the real world, so give people the opportunity to run it…run their websites through their paces according to WCAG2, see if, you know, things are feasible, if it’s realistic to kind of say, yeah, this will be the standard from now on, and they’ve actually…they want to make it quite official, so if you have an intention of kind of doing that, you have a website and you want to actually officially say, OK, I’m going to use that website to test WCAG2, they’re now asking for people to basically register their interest and to actually, you need to then implement that, you need to say, right, I’m going to run WCAG2 on my site and by the 30th of June you want to be able to basically say right, I’ve finished it, and then give feedback and basically say yeah, no problem, or you know, we tried and tried, but this is actually not realistic, it might need to be modified, but unless there are major, major issues that come out in the wash as people are now trying to implement it and test drive it, it should be fine really. One of the main things with WCAG2 is, as with any kind of Candidate Recommendation documents, is really that there are a few items where even though we’ve got consensus, the working group isn’t 100% sure that they’re going to make it in their current stage, so they’ve kind of gone very ambitious with some of them, but they realise that yeah, it might not actually make it through, and they’re called….quite fittingly, items at risk, which in the latest CR document, Candidate Recommendation document, they’re clearly marked, and they’re basically…the testing phase is really about, let’s have a look, specifically these kind of items at risk, can they actually be implemented in the kind of more stringent way that we’ve worded them? If not, we might have to scale them back. I mean there’s one for instance where it says, it talks about, you know, colour contrast, and they’ve worded it currently that the contrast needs to be on a ratio of 5:1, so if you’ve say got, you know, text and background colours, you need to have…want to do your calculations for the various algorithms, there needs to be a contrast of 5:1. Now they’ve put that at risk, because some people still felt that it might be a little bit….setting the mark a little bit too high, and they were already saying, OK, well if it turns out that it is too ambitious to say, right, you need to have that ratio, that they’re happy to kind of jump back to 4.5:1 or even 4:1, so it’s kind of things like that, we’re really now at the nitty-gritty stage with these kinds of things, of saying, you know, can it actually be implemented.

Paul: So this is getting very close to the point where, you know, your average website owner and your average web designer needs to be…we need to be looking at this now, don’t we really? I mean we’re getting that close?

Patrick: Yeah

Paul: OK, I mean it sounds like things have gone a long way since the kind of early stages where WCAG2 was quite heavily criticised. I mean what kind of shape do you personally think it’s in at the moment?

Patrick: Yes, I mean looking back, I think it was May 2006 where Joe Clarke wrote his kind of vitriolic post, to Hell with WCAG2 on A List Apart, we have definitely come a long way since then. I think it was a good wake-up call back then for somebody like Joe, somebody of Joe’s stature, to really come along and, where web designers maybe at that stage weren’t really that interested in WCAG2 to actually say, look guys, you need to start looking at this because in the current shape it’s in, it’s really not feasible, and what Joe said at the time, there are many things that he criticised, but you know, overall he was spot-on with a lot of the things. The main thing was that the whole document at that time was extremely bulky, it was one big monolithic document which tried to do everything. There was loads of Orwellian-style language, everything was made up of Newtons, and they pretty much invented…because the problem with WCAG2 it’s a kind of full shadow of it, is that because it tries to be technology agnostic, it tries to avoid in the main document and talk about anything relating to actual technology, so it doesn’t mention specific HTML elements or things like that, so to make it very tech-agnostic, that document at the time really re-defined almost anything, so it didn’t talk about web pages, but it started ta
lking about web units, and basically the glossary was almost bigger than the actual document, so you know, that was very problematic because even people who’d been doing web development for years, if you just gave them the document as it was, they would have had to completely re-learn whatever all the terms were, it was of no practical use.

Paul: So has all that gone now?

Patrick: Yes. The language has been simplified. I mean it’s gone now from 2006 onwards it’s gone through, I think it was 2 or 3 last call stages. Well it went back from…in 2006 it was at last call stage, literally the stage before we’re saying, OK, we’re up to Candidate Recommendation. They actually scaled that back. W3C don’t admit that was because of Joe Clarke, and OK, it was probably not exclusively because of his article, but I think the general kind of feelings that it stirred up, or that it tapped into, kind of made the W3C reconsider. They’ve scaled it back to a public working draft, which is kind of one step previous to that. Everybody had a pretty good look at it. There’s been rounds and rounds of comments, I mean I’ve submitted in the 2 year period that it’s now been since that article, I’ve submitted loads of comments. I mean ranging from really small things like, oh you missed a comma there, or that’s not very clear, to kind of very substantial things about the actual core concepts that are being discussed, and in that process, a lot of really hard copywriting and editing has happened since then. They’ve also split out the document into far more manageable sub-documents themselves. One of the main things, for instance, is that the whole structure of, you know, WCAG2, it’s actually a suite of documents. The main guidelines document itself is only a handful of pages, I think it’s…yes, 19 pages I’ve printed out today. That is purely the core guidelines document, and that’s the only part if you will, that is actually normative, that’s the only one that is the actual guidelines. Then there was a lot of extra documents that really are just what’s called informative, so you can read through them, but you can’t actually refer to them in terms of, you know, just if somebody sort of says, your site isn’t accessible, you can’t point to an informative document and say, yeah, but I’m following that particular thing.

Paul: OK

Patrick: One of the documents will be the techniques document. You can’t actually point to that and say, well I’m following these, because the only thing that’s important are the actual guidelines, so they’ve really slimmed it down, broken it up into separate documents, you know, 19 pages printed out, it’s nothing, you can pick that up, you can read it through. It’s roughly the same size now of WCAG1 if you will. So they’ve simplified the language. There were loads more contentious kind of fundamental problems with WCAG2 as it was back in May 2006. I mean one of the main ones that really caught, you know, the eye of a lot of developers, was the concept of base lines where basically at the time they were saying, even though the concept itself is good, but it’s pretty much read like, as a website owner I can basically say, right, to work with my site, you need to have Flash and you need to have this and you need to have that, which was completely opposite to, you know the very austere WCAG1 which basically said, you can’t have anything. This seemed to open it up completely and allow for website owners to basically say, right, you know, we are going to do a whole Flash website if you will, and our baseline will be, you need to have Flash to use this site. But the concept was good at the time, but the wording pretty much came out like that, so these kinds of things, base lines, at its core, is actually still in the current document. They’ve basically re-worded it and turned it on its head, where before it was talking about website owners can say what technology they’re using, now it’s far more, if as a website owner or designer, I’m using a technology, I need to make sure that I know for a fact that it’s supported by accessibility…assistive technologies, for instance screen readers, so they kind of turned it on their head. The onus isn’t any more on the user to say…to have the latest technology, but on the developer to make sure that the technology they use needs to be accessibility supported. So loads of kind of fundamental changes like that have happened really, and no, definitely to go back to the original question, it has improved quite dramatically since May 2006. I mean I’ve now familiarised myself extensively with it. It’s good bedtime reading material!

Paul: You’re not convincing me of that one. Not unless I want to go to sleep I guess!

Patrick: I know. OK, I’ll be blunt, it’s better toilet reading. You kind of print it out and you put it there, instead of a novel you’ve got that there. But it is very good. I mean it’s now down to the level of…it almost reads like common sense. You kind of…you go through it and you just find yourself nodding and thinking, like, that’s not contentious. OK, there are still a few here and there where I might slightly disagree in a heated argument, but overall there’s nothing really there that makes me think, ooh no, that’s never going to be realised, so absolutely, it’s in very, very good shape I would say, and this Candidate Recommendation Stage looks like it’s going to be very successful really, and fingers crossed, I think; I’m not 100% sure now of the timeline that W3C are working by, but I wouldn’t be surprised if, say by the end of calendar year, we might see actually WCAG2 being released and getting out and becoming a proper recommendation.

Paul: Cool. So then what’s the big differences from WCAG1. I mean with WCAG1, you know, every kind of standards-based designer became very familiar with that. I was a great fan of that, you know, single sheet which listed everything by priorities and I would go through and I’d check myself off, and I kind of knew where I stood with WCAG1. With WCAG2, it’s much more of an unknown entity at the moment, so kind of give me the potted version. Where are the big changes?

Patrick: Right. No you’re quite right, it’s actually a lot more vague WCAG2, but it’s that way for a reason. Right, so WCAG1 really was very much, I mean it’s a product of its time, I mean it was 1999, the web was still quite in its infancy, and it is very much HTML focused, WCAG1, there’s no denying that. There’s a few mentions of things like CSS, but pretty much it’s all about how to use HTML to create content that at the time would be deemed accessible. I mean JavaScript was pretty much bad; I mean you could use it but you need to make sure there’s a fall-back. Non-W3C technologies were completely out basically, unless you provided a W3C alternative, so things like Flash and PDF etc, when they first started becoming more and more used, that directly clashed with WCAG1 at the time. Now WCAG2, as I mentioned before, it’s far more tech-agnostic. It tries to basically not t
alk about specific technologies. It doesn’t directly reference HTML or CSS or Flash or Flex or various other things in the actual core guidelines. Now the reason for that is WCAG1 as soon as it was released, the thought behind it was that it would be updated on a very regular basis, but from 1999 onwards, nothing has really happened, and because it was so heavily influenced by the technology of its day, it aged very, very badly. I mean nowadays, if I hear people saying, we’re building against WCAG1, I almost have to chuckle a bit, because it is pretty much just going back to, you know, we’re doing the web like it’s 1999, you’re not really allowed to do anything, and it’s completely opposite to what’s actually happening with the web. I’m not going…well I am going to say Web 2.0 to sound all trendy, but you know, all those things, Ajax, Flash, PDF etc, particularly say PDF, there is now…there are now easy ways, or relatively easy ways, to create reasonably accessible PDFs, I mean the technology itself has moved on, the format has moved on, screen readers are quite capable of dealing with well-structured PDFs that are created in a certain way. We’re not really talking about, you know, you need to test your pages with links because, you know, people might just use a text only browser. Things have moved on, but WCAG1 is pretty much kind of frozen in time of 1999. There have been a few kind of…people who’ve been working towards WCAG1 have started kind of re-interpreting it a bit for the modern days. I mean in my own practice in my…one of my other identities, in my day job as web editor for the University of Salford, I’ve never actually said, we’re going to make our pages WCAG1 compliant, but always said, you know, we’re going to take inspiration from WCAG1, filter it through our own knowledge of what the technology landscape actually is today, and try to do the best we can to actually serve the users and you know, how they currently use the web.

Paul: So….so are you, you know, you said that you’d never claimed in your day job, you know, to be WCAG1. Are you intending, you know, are you more confident in WCAG2 to be able to say that, that we’re going to be WCAG2 compliant, or is it not that kind of thing?

Patrick: I think …I think yes, WCAG2, it would be a lot easier to say we’re working towards WCAG2, because to kind of go back a bit and explain WCAG2’s kind of…the thinking behind WCAG2 and how it’s structured. WCAG2 as I said, doesn’t talk about HTML, CSS, it really just sets out very general principles, when then break down into guidelines, which then in turn break down into success criteria. Now again it probably sounds like there’s a whole new language to learn, but it is fairly straightforward, so if you think, web pages themselves need to be the four principles. They need to be perceivable, operable, understandable and robust. So those are the four kind of guiding principles, which you know, make sense. It was already implicit in WCAG1, but this kind of just spells it out. These are the kind of four things that we want to make sure. Now under each of those principles, say perceivable or whatever, there are guidelines which still provide…they don’t go into detail, but they provide some very, very basic overall goals, so what we want to achieve is X. They’re not testable, because they’re still very, very generic, they’re saying, we just want to make sure that people can, say, use a keyboard to do things. They don’t go into detail about what that means particularly. And then under that you’ve got the testable, what are called success criteria. Now these are very small kind of little atomic sentences if you will, that say, right, very specifically, if you’re providing this, then make sure that that happens. Now I’ll pull out an example, I’ve made some notes here, let me just go through…yeah, I’ll give you an example here. So in the big WCAG2 document, you’ve got principle number 2, operable. User interface components must be operable. So, you know, you can’t argue with that, fair enough. Underneath that, there’s loads of guidelines, I’ve pulled out one here, guideline 2.4, navigable, which states that you should provide ways to help users navigate, find content and determine where they are. Again, that’s a very, very broad goal that doesn’t say anything about you need to use a link, you need to put title in here, or you need to make sure you use access keys. None of that. It basically just very generically tells you that. Now under Guideline 2.4, there’s loads of smaller success criteria. Now I’m just going to pull out one of them. The first one, 2.4.1, which basically is called bypass blocks, and I’m just going to read it straight from the thing, ‘a mechanism is available to bypass blocks of content that are repeated on multiple web pages’

Paul: Yes

Patrick: Now again, this doesn’t say anything about HTML or whatever, but it is quite testable. You can actually pull up your web pages and say, right, are we following this? Is there a mechanism available to bypass blocks of text, blocks of content, sorry, that are repeated? So I don’t know if that gives a flavour of…

Paul: Yeah it does.

Patrick: …against WCAG1. Now you couldn’t write a validator to actually just run through this and check for that, that is one of the core differences I think with WCAG2 compared to WCAG2. I mean even WCAG1 we all agreed that you can’t just run it through Bobby and then, you know, if Bobby gives you the thumbs up, that’s good. You still have to do some manual checking. But there were a lot of things that because it was so HTML-centric, you could pretty much run it through something and it gave you a fairly good indication of whether you were achieving that particular check-point in WCAG1 or not. Now the way the success criteria are worded, yes you could say, OK, if we accept that, we want a skip link, and the skip link will fulfil that particular success criterion, we could write an automated tester that just looks for skip-links, the presence of skip-links, however you want to code that, but it’s not to say that that is the only way in which you can pass that success criterion. The actual guidelines don’t say exactly what you’re supposed to do. They pretty much focus on the end result and particularly what I’m interested in, they focus on the end result for the user for the most part, so it really puts the onus on the developer to understand, these are the user needs, and this is the kind of very generic thing that needs to happen. You can then, from that success criteria, jump over to the techniques document for instance, which actually goes into detail, if you’re using HTML, here’s some of the ways in which you could achieve this success criterion, and then you can test against those, but the techniques document is only informative, it’s not the be-all and end-all. You could follow whatever’s said in there, or you could actually come up with something that’s completely separate, is not mentioned anywhere in the techniques, but if the end result of an actual real user is still, OK, they can still bypass blocks of text that way, then that’s fine.

Paul: Which is great, because it kind of gives people the freedom to innovate and come up with original ways of solving accessibility problems.

Patrick: Absolutely, and it puts…it puts the focus straight back on doing something that is good for the user, rather than right, we’re just going to go and make sure that we tick that particular box because the guideline says we need to do X in HTML and, well, we’ve done it, so we’re cool. This kind of forces you to actually think about solutions. I mean you can… you can go into the techniques document, and what’s mentioned in the techniques document, is pretty much they’re tried and tested ways in which that situation has been solved, so you know, you can be I’ll say lazy, but you know, you can get guidance from that techniques document, but that’s the important thing to know, is it doesn’t mean that you have to necessarily use one of those techniques, and absolutely you’re right, this will stimulate a lot more creative kind of ways in which these success criteria can actually be met. And as I said, it then applies to any technology. You could say, right I’m going to provide that functionality in Flash if I’m doing Flash, or maybe I need to do that in PDF, or whatever, so it is a lot more open. Which obviously is a problem if you’re very set in the ways of I’m going to run it through a validator, and I’m going to get a clear yes or no answer, because you pretty much need either a lot of user testing to say, OK are the users actually able to do this particular thing that the success criterion says, or you get experts that kind of help you with that, and there it’s a lot more likely that you’re going to get 2 or 3 experts and they might not necessarily agree on what’s the best way to implement something, so that is kind of…not the problem I would say, but the slight shift in mentality that website designers and website owners will have to make, that it’s less easy to make a very kind of cut and dried, yes it’s accessible, not it’s not accessible. I mean it was problematic before, now it could be even more woolly, which you know, is a bad thing in a way, but also a good thing because it does force you really to focus on the actual core of the problem rather than trying an easy way out and just implementing some mark-up that a guideline suggests.

Paul: Yeah, I mean yeah, I can see how it potentially might create some legal problems further down the line, but it certainly gets people beyond that kind of arse-covering check-box mentality, which has good to be good. So it sounds like a lot of the time we’re kind of going to be working as web designers on the success criteria level where we’re going through and making sure we conform with these various success criteria. What about priorities? WCAG1 had Priority A, AA, AAA or whatever you want to call it; Priority 1, Priority 2, Priority 3. I mean, did, you know, is there anything like that any more or has that gone away completely?

Patrick: No, that’s actually still there. At one point there was a bit of a change in terms of how it’s going to be worded, whether you could achieve full compliance or not by following…having to do all the success criteria for a particular level or not, but no, they’re pretty much there in their old form if you will, so it’s still called Level A, AA and AAA. One of the things that WCAG2 has tried to do in its wording of these Levels is to say that it wants to remove the kind of idea of hierarchy that AA aren’t less important than A, and AAA aren’t less important than AA. They’ve written a lot of nice words around it to explain why it’s actually still worth doing AAAs when you’re not fulfilling all of AA etc, but I think they’ve actually muddied up the waters a bit because in effect, you can’t claim, say, AAA, if you haven’t claimed AA, so the hierarchy is actually still there, so probably this explanation was quite confused, but it actually reflects exactly how confused the WCAG2 document is about that. They’ve tried to kind of have their cake and eat it at the same time, I think, because they have to…necessarily have some hierarchy, but they’re really trying to stress that they’re all equally important, you know, but some are just more important than others. So…interesting.

Paul: Yes. So I mean what, you know, we’ve got potentially, you know, if you’re right, until about Christmas to sort out our act and to kind of really get thinking about WCAG2. What kind of steps would you recommend for people that are owning and running websites in order to kind of prepare for this?

Patrick: I would say that because WCAG2, as I say, is a whole suite of documents, you’ve got the actual guidelines which I mean now I can read them and they’re quite understandable to me, but I’m obviously very close to the subject at hand. I can kind of understand where they’re coming from. But as part of the suite of documents, there are kind of better documents possibly to start with, depending on what your current level is. There are ….there are simple things like Understanding WCAG2, which kind of takes a helicopter view of WCAG2 and gives a lot more context that explains why, you know, certain guidelines are important, how, you know, people will use them, how they will benefit from them etc. It goes more of a context. It’s obviously a lot weightier than the actual core guidelines, but that is…if you’re a bit rusty with, you know, I haven’t looked at WCAG2 at all, you’re a bit rusty with what WCAG1 even was about, beyond just being a document that you checked some boxes against, that’s certainly worth reading, just to really get a feel of understanding why….why are we changing things, why wasn’t WCAG1 good enough, so that really gives you a good kind of introduction to the subject. And I think that’s an important step towards actually implementing WCAG2 would be for people to buy in, as with anything, if you’re trying to push it through at an organisational level. People need to understand the rationale behind it. You can’t just dump this document on say your developer’s desk and say, right, these are the new rules, you know, white is black, black is white, this is what you need to do now. They need to buy in from actually understanding what the rationale behind it is, so the understanding document will really give them all the information they need. Some, you know, technically minded people might be tempted to jump straight to the techniques document, which is fine, but again with the caveat that I mentioned before that the techniques document is actually only informative, so whatever’s written in there is not the law. Some techniques that are currently in there might even be proven later on to be maybe not optimal in certain situations etc, so it’s not the law; it can help you initially get, if you’re really technically minded, you might read the success criteria and say, yeah, OK, that’s all nice language, but what does it actually mean, you know, if I’m doing HTML, what….what are you expecting me to do? The techniques document can help, it will give you actual examples. If you’re using HTML do this, if you’re using Flash do that, etc, so it brings it back down to something that as a techie, you might be more comfortable with, but again, understand
ing that that is not the law; those are not the guidelines, and that there might be even better or more creative ways around the problems, but it’ll get you into the right frame of mind I would say.

Paul: Cool

Patrick: There’s also documentation that just pretty much compares WCAG2 to WCAG1,

Paul: Ah, that’s good

Patrick: Yeah, if you’ve got a lot of experience with WCAG1, that will kind of help you roughly map, you know, what used to be WCAG1’s check-point about this, is now this far broader guideline that covers a lot more aspects, so it’ll help you kind of move towards the thinking behind WCAG2. And I think that is the main thing as a website owner or as a designer; it’s more of a shift in perception if you will, more of a shift of understanding of what accessibility is, more than, you know, the change of how is my mark-up now going to be affected by it. It’s really moving beyond that kind of very HTML specific, you must do exactly this, to a more, you need to understand how users actually use your website and how to creatively kindly of help them in that pursuit really.

Paul: Cool. I mean that sounds good; there’s lots of different ways you can kind of start the process of learning it

Patrick: Absolutely

Paul: …which is good. I mean I guess my last question, you’ve almost kind of answered, which is, you know, if you’re somebody from a WCAG1 background that is comfortable with WCAG1, the one thing that you’re thinking is, hang on a minute, I kind of knew this, I had my head around this, you know, I’ve suddenly got to change to this new system, you know, is it going to involve more work, is it going to be painful? The fact that you’ve talked about this document that does transition, you know, between WCAG1 and WCAG2 sounds helpful. Overall, do you think it’s going to put more pressure on designers or is…more going to be expected of them as they develop stuff?

Patrick: I think it’s going to be interesting for a variety of reasons. I wouldn’t say necessarily there’s going to be more work involved. If you’ve been working similar to the way I’ve been working, that you take WCAG1, you take what you want from it, and you filter it through your knowledge of, yeah, that screen-readers can actually work well with PDFs, so I’m ignoring the non-W3C technologies I’ve banned that used to be in WCAG1, so if you’ve actually been doing accessibility based on WCAG1 in the real world rather than simply just following it as a set of check-points that you just tick the boxes, I wouldn’t say it’s going to be more work. Certainly if on the other hand, if you have been somebody who hasn’t been too understanding or involved with WCAG, you pretty much had it as a function in your, say, Dream…copy of Dreamweaver or whatever, I’ll just quickly run it through this validator, I’ll run it through Bobby, although Bobby’s now gone, thank God, various things like that, you know, if you really just saw it as a check-box exercise, yes there will be…it will be more of….I don’t want to say paradigm shift…well there you go, I just said it….absolutely, no cliché will be left unturned in this particular episode…you really need to start understanding it more. But if you’ve actually been doing what I would term in a quite elitist way, real web accessibility over the last few years, there’s no major, major big surprises there, and there’s…I wouldn’t say there’s a lot more work involved. Now it would be interesting, I think, one of the aspects will be if you’ve been working in an organisation and you’ve been trying to appease management say, and one of the things that management might have erroneously picked up is, we need to make sure our pages are Bobby-compliant, for instance, is that will be a difficult, I would say, or challenging, should we say, situation because you will have, already at the time you might have been crying, saying, well, the validator can’t check everything, you still need to do manual checks, but at the end of the day, some managers, all they wanted was to see the thumbs up and the smiling policeman with the helmet on their website. This time around it will be a lot more difficult, and yes, as I mentioned before, there will be automated tools that will help you in determining whether you’re doing certain things right according to WCAG2, but because, as I said, the techniques…there is no definitive list of techniques that are OK, and there are no definitive lists of techniques that aren’t OK, it’s practically impossible to write an automated checker that will be able to check against everything, so tools…automated tools will really just be relegated to certain interpretations of WCAG2. I know that there’s a few organisations in the States that are currently working on, you know, validators. I think the….name escapes me now, but the Fraunhofer Institute in Germany, they’re currently working on their own version of a WCAG2 accessibility tester for instance, and I had an interesting discussion with representatives from Fraunhofer the other week when I was in Germany at a conference, and they’d pretty much agreed that their tool will only check against, basically, their favourite techniques if you will, from the techniques document. Now who’s to say, as we said before, that those are the best techniques? They’re ours. You might come up with a really creative way that no tool has been primed to kind of sniff out in your mark-up or in your Flash or PDF or whatever, so you’ll always get a very, very subjective, based on what the developer’s written into their tool, very subjective assessment of your website, so bring it back to the point, it will be extremely difficult I think for a manager to be able to say, right, I just want to make sure that we pass that particular test, unless you then go and dig out exactly what that tool is looking for, and you end up back in the situation that we used to be in, where you’re trying to write it to get a good grade from a tool, rather than actually thinking about what is best for, you know, users with disabilities or users in general, so that, I think that will be the more challenging part, as I said, the paradigm shift, getting managers who might not have understood it up to now, to really kind of confront the fact that automated tools aren’t the be-all and end-all, and that yes, everything is a lot more subjective now, so really I would say the only solution to that is really start thinking more exclusively about proper user testing, getting actual end-users in there. You could give them the success criteria from WCAG2 and basically say, can you confirm that this is something that you can do on our website, so it becomes a lot less about automation and a lot more about actual end users.

Paul: Cool. I mean it all sounds really exciting, you know, a bit apprehensive, you know, a whole new thing to learn and all the rest of it, but I think the whole freedom of approach side of things, that you can approach problems in different ways and sold things in different
ways, is very refreshing and it all sounds really exciting. Patrick, thank you so much for coming on the show, that’s been really enlightening, and I look forward…

Patrick: a delight

Paul: Yes, and I look forward to getting you on again, maybe to get into some specifics once WCAG2 is up and running. Good to talk to you.

Patrick: Yes, super duper. Okey-doke.

Thanks to Alison “Anna’s Mum” Debenham for transcribing this interview.

Back to top

Listeners feedback:

What are the key features of a CMS

Hi Paul. Hi Marcus. What in your opinion are the important and fundamental features of a CMS, not such as the ability to create pages, but the add-on features that make a CMS better than other CMS’s around it. Thank you very much for answering my question.

Interestingly Drew Mclellan was talking about content management systems at this years @Media. He had an excellent list of things to look for in a CMS. Some of his recommendations were…

  • Friendly URLs
  • Data Feeds(RSS)
  • Customisable and accessible administration interface
  • Well implemented search
  • Multi-site support
  • Multi-language support
  • Caching
  • Support for user generated content

Interestingly some of the features he looks for (such as friendly urls) are not always required. He wants to see them there because it indicates best practice from the developers who built the system, not because he actually needs them.

He also spoke in his presentation about the importance of not buying a CMS based on a wish list of functionality you might need one day. This will lead to unnecessary expense. It is also the problem with ‘off the shelf content management systems’. You end up buying functionality you don’t require and introducing additional complexity into the user interface. Perhaps that is the reason why both edgeofmyseat.com (Drew’s company) and Headscape have chosen to build their own CMS codebase, which can be customised to clients needs.

If you are looking for more information on the selection of a content management system be sure to check out episode 24 where we dedicate the entire show to the topic.

Is certification worth it?

Chris asks: I’ve been working in web design for the last 5 years and am really looking to get into the more user experience side of things. I was wondering if you or our listeners knew of any qualifications or certifications that might be a good idea. Are they even worth the good idea in the first place or are they not worth the paper they were written on?

As somebody who regularly recruits user experience designers I have to say that qualifications and certifications mean little. Sure, I like an employee to have a degree simply because it demonstrates a certain level of academic achievement. However, I don’t think that web specific qualifications count for a huge amount.

What I consider important is example work, that shows your skills in user interface design. I want to see sites you have produced and for you to explain to me the underlying thought process that went into them.

Given a choice between work experience with a high profile web agency or becoming a student again, I would recommend the former every time.

119. Fluid Elastic

On this week’s show Ed Merritt joins us to discuss fluid, elastic layouts and we take a look at PHP Designer, a feature rich code editor.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Harness the power of "frilly bits"

I love watching design trends come and go on the web which maybe why I love Patrick McNeil’s Design Meltdown so much. One trend that has caught my eye is the move away from the Web 2.0. look to something more ornate.

This style makes use of what can only be called "frilly bits". You know the kind of things, those swirls and ornaments buried in typeface sets but rarely used. They have been around for years, used by blacksmiths and typesetters alike. They turn up on everything from wedding invitations to architecture, and now it would appear, the web.

One of the first sites I saw them was Cameron Molls blog. He is an amazing designer with a very ornate and delicate style (about as far away from my own as possible).

Recently one of Cameron’s readers asked him where he sourced such beautiful ornaments and he has been kind enough to share 25 different sources of similar frippery.

Unfortunately, simply knowing Cameron’s sources will not grant us the ability to design as well as him. However, it is an extremely useful list and definitely worth perusing at your leisure.

The cure for content-delay syndrome

Returning from the world of creativity to the realities of project management, our next post tackles the frustrating subject of clients failing to deliver content on time.

Entitled the cure for content-delay syndrome this article addresses once again the subject of copy-writing.

We have talked about the need for a copywriter many times before. I have encouraged you of the need to engage a professional to craft your sites copy, while at the same time struggling to convince my own clients of the need.

The problem is that ultimately many clients believe they can write their own copy. After all they are experts in their field and know their own audience. Some argue that it takes as long to brief somebody as to do it themselves. When budgets are tight, these sound like convincing arguments and are hard to dispute.

This post suggests that the answer in not to promote the use of a copywriter but an editor. An editor refines the clients text rather than writes it from scratch. This is considerably cheaper but still brings improvements in continuity, accessibility, usability and SEO. What is more, the client no longer needs to worry about the quality of his writing. Instead he can concentrate on "bashing it out" and let the editor improve its readability later.

Its a persuasive argument and gives me hope that I might soon be able to encourage my clients to engage a professional to work on their copy.

The roles of a web entrepreneur

From the role of an editor to the many roles of a buddying web entrepreneur.

We haven’t spoken much about developing web applications on the show (this is definitely something we should try to do soon). Traditionally web design has been a service industry and for the vast majority that is still the case. However, a growing number are looking to add a product line to their offering or make the switch entirely. Certainly this is something we are doing with getsignoff.com

But what does it take to be a web entrepreneur and build web applications? Well, unless you have a lot of venture capital it requires you to wear a lot of hats as explained in this post on Think Vitamin.

From marketeer to customer service representative, you are required to fulfil many more roles than you are used to. Its a challenging undertaking but the benefits are substantial. Get it right and you have a regular income without the overheads associated with a service based business.

Intranets revisited

Another subject that we have neglected on the show is intranets. They continue to grow in importance and yet have fundamental unresolved problems.

In two great posts Gerry McGovern exposes these flaws including the tendency for intranets to become dumping grounds for information and their lack of decent search.

Both posts in their own way focus on the fact that intranets should be about "getting things done". They should provide tangible productivity benefits but often fail to do so. Each post identifies a reason for this being the case.

The first points to the way intranets are perceived. Many see them as an information repository. This appears to be a fancy way of saying "where information goes to die". Viewing an intranet in this way, McGovern argues, is to miss the point. We should only be distributing information if it aids productivity or encourages collaboration.

The second post argues that intranets fail to aid productivity because information is just downright hard to find. In particular Gerry targets search but he also argues there is a wider problem of find-ability. Why is it he asks, that even in the largest of organisations nobody is dedicated to ensuring employees can quickly access the information they need to do their jobs?

If you have an intranet or are involved in developing them, then these are an excellent read.

Back to top

Feature: Fluid Elastic Design

When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages and in this weeks feature we have Ed Merritt with us to disuss them.

Back to top

Review: PHP Designer 2008

This week’s review is on PHP Designer 2008 has actually been submitted by Simon Jones of Zako Media. He writes…

As a web business, I needed stable coding platform or IDE which would allow me to be as productive as possible. Money was no object so I researched everything available from open-source packages to expensive commericial software. I discovered phpDesigner from www.mpsoftware.dk and was blown away. It’s much quicker than Zend and has most of the same features. phpDesigner has all the usual code highlighting and auto-completion for PHP, CSS, HTML, Perl, XML, Javascript, along with easy buttons to tidy this code on the fly. We all know how hard it is to keep code tidy… now we don’t have to. phpDesigner also allows you to arrange files by project without disrupting the standard windows folder system. If you ever want to transfer away from this software, you don’t need to worry about compatibility.

The smaller features I find most useful are: bracket matching, code explorer (to jump to functions, variables and arrays), code snippet library to store your most commonly used functions from project to project. Tooltip syntax reminders for PHP and rightclick to view PHP.net help page for that function. Finally it validates your syntax on the fly, without affecting performance… all other editors stalled, slowed and chugged away as they scanned the whole file every time a character was added. phpDesigner offers the same ability with very little processor time, as soon as you’ve finished a line, it hilights unobtrusively to show missing semi-colons, brackets etc. A more detailed error message can be accessed. This saves valuable Alt-Tab, Control-F5 time. (or for apple users, switch task and refresh browser) as you know the code is error free before you start.

The software offers links to internal ‘browsers’ for phpmyadmin and php help, has an inbuilt ftp client or allows you to call an external one like filezilla. It helps integrate nicely with Smarty templates and works with phpDocumentor for instant php documentation.

On the longer term projects, it has built in bug tracking information, project and global todo lists.

One of the most important and major strengths with this software is it’s stability. It has a few issues sometimes closing down if it’s travelled through a laptop’s standby mode, but otherwise it has never crashed or lost data in the years I’ve been using it. mpsoftware is obviously passionate about this product as updates are available very regularly offering additional functionality and fixing minor bugs.

This is by no means the full feature list, but more information can be found at www.mpsoftware.dk where they have a free cut down non-commercial version and sell the full version. Compare to other available software and it sounds expensive, but mpsoftware.dk is charging a ridiculously low €39 for a single license with further discounts for groups of 10.

Thanks to Simon for that review.

Back to top

Listeners feedback:

Can you set up a web design company in the evenings

John Bullock asks: Hello boagworld team, my name’s John and I’ve got a question for you. Basically I’m starting up my own web design company and I’m in what I think is an unusual situation of trying to do it along side my 9 to 5 job which has absolutely nothing to do with computers, it’s actually an engineering job so I actually have no chance at all to work with computers in my normal job. Now I know trying to set up a company alongside your 9 to 5, while obviously tiring, is a very sensible and safe way to do it, is it actually possible? Do you think it’s a realistic way of setting up a company or do you think I would have been better going with the freelance option? It’s great to have the show back after what seemed like a decade and keep up the good work.

Yes it is definitely possible. In fact it is the way the vast majority of freelancers begin. That is not to say it is easy. However, it is the most sensible approach. If you don’t your options are fairly limited…

  1. Wait to be made redundant and hope you get a payoff
  2. Live off the kindness of friends and family (a guaranteed way of losing friends)
  3. Borrow money from the bank

Personally, I am very much against borrowing money. It substantially increases the risk. If you setup loan free then you can get another job if things go wrong. With a loan you are left in debt and struggling to pay the rent.

Build up a freelance business on the side and save the money to pay for the first few months. Also if you are able, land some regular customers. This will give you an existing client base to bring in much needed cash. At the very least you will have a portfolio of client work to show off.

We were fortunate. The web design company we worked for folded. Although we didn’t get any redundancy payment we were able to take several of the clients with us. These not only provided valuable income in the first few months but also allowed us to attract other clients.

Domain names

Robert Prior asks: Hello Paul and Marcus, my name is Robert Prior and I am from Waco Texas, i’m currently a beginner web designer but in the future I would like to set up a small web design agency here where I live and my question is, when you’re trying to get the URL for your company name, how important is it to get different extensions like .net, .info, .tv are those important at all? Or do you just need to get the one main one like the .com name? Really enjoy the show, appreciate all the hard work you guys put into it and looking forward to future episodes. Thank you.

In my opinion your domain name is incredibly important. You should definitely try to get the domain extension for your country and .com as well. We have never managed to get headscape.com but as the vast majority of our business is in the United Kingdom headscape.co.uk has been adequate.

However a good domain is about a lot more than the extension. Personally I am not a fan of these new web 2.0. urls (flickr, del.icio.us, digg). They are hard to spell and hard to remember. In my opinion a good url should be a well known word (or words) even if not directly associated with your product. Headscape for example sounds more like a hair dressers than a web design agency, but at least it is memorable and easy to spell.

Another common mistake is to go for a domain name with hyphens. This never works well as it is hard to tell somebody. For example "headscape dot co dot uk" is much easier then "head hyphen scape dot co dot uk". Also users often later forget that it contained a hyphen.

The ideal domain is also descriptive of the site. For example we were blown away to discover getsignoff.com was available. It describes exactly what we do and is memorable too. That said more recent studies suggest that a brand name (Amazon.com) is more valuable than a generic name (books.com), so if you are forced to choose pick the former.

Finally, be careful to avoid words with multiple spellings especially if working internationally. For example don’t choice a domain like colorTheory.com because it could equally be spelt colourTheory.com.

Many claim that there are no good domain names left. Although it is harder these days getsignoff proves they are still out there. With a bit of lateral thinking (or using one of the domain suggestion tools) they can be found. There is no reason to start randomly start dropping vowels.

Coda

Find out why I am seriously considering abandoning the code editor I have been using for over a decade in favour of Coda for the mac.

I can’t remember when I first started using Dreamweaver but it would have been at least 1998. In those early days I was attracted to it because it could code all of the HTML soup that was necessary for table based design.

When I made the transition to standards I returned to hand coding but after some investigation I could find no better coder for me than Dreamweaver. It did everything I required and so I saw no reason to spend money on a new application.

I regularly look at emerging editors but nothing has tempted me to change. After all you cannot teach old dogs new tricks and changing editor seemed like too much work. That was until I came across Coda. I haven’t made the transition yet but I am seriously considering it.

So why am I tempted to leave Dreamweaver behind? What makes Coda so good?

Why Coda?

Screenshot of the Coda Interface

Its not that Coda is revolutionary. However, it is extremely well considered and has a clean, easy to use interface. They get the basics right including auto-complete, syntax highlighting and integrated FTP. However, in addition to this they add a number of extras which I am finding hugely useful.

Features

The following are the features that impressed me the most (even though they are far from perfect)…

Preview

One of the most impressive functions is the preview facility. I always liked the WYSIWYG function in Dreamweaver even after I moved across to standards based design. I could pull up the design view and click on an element to jump to the appropriate piece of code. On larger more complex pages this was incredibly useful. Unfortunately the Dreamweaver design view was far from WYSIWYG. It rarely rendered a page correctly, and so as my hand coding became more sophisticated it struggled to keep up.

Compared to Coda this looked positively prehistoric. Coda provides a constantly updating preview rendered by Webkit so it looks exactly the same as it would in Safari. What is more it provides basic debugging tools including a Javascript log and the all important inspector which allows me to click on an element in the preview mode and jump to the appropriate code.

My only criticism of the functionality is the constant page refreshes in preview mode. If you are working in split screen this can become distracting after a while.

Symbols

Talking of jumping to a specific place in the code there is also a great tool called symbols. Not the most descriptive name but incredibly useful. Symbols is an interface element that lists all the headings, divs with ids and comments in the current HTML page. You can then click on anyone of these to jump to the specific place in the code.

Clips

Two things I specifically like about Dreamweaver were snippets and configurable keyboard shortcuts. Snippets allowed me to keep a library of useful code that I could drop into the page. Keyboard shortcuts were excellent for quickly adding code without resorting to the mouse.

Coda solves these two problems using clips. Clips are essentially snippets but with the ability to add text expanding shortcuts. For example if you type ‘href’ and then press tab it will add a complete href link with the cursor placed at whatever point you specified when you created the clip.

Although clips are good they are not in my opinion quite as good as snippets in Dreamweaver. For a start you cannot organise your clips into folders which is important as the number of clips increases. Secondly although the text expanding function is useful it does not allow clips to be wrapped around an existing bit of code. This initially appears to only be possible by double clicking on the clip itself (requiring the mouse).

After some experimentation I discovered you could setup keyboard shortcuts in system preferences. However this doesn’t appear to be documented anywhere.

Find and replace

One feature that in my opinion blows Dreamweaver away is the find and replace interface. I have written before about how I like Dreamweaver’s find and replace functionality, however I think Coda’s is even better.

What makes Coda’s functionality so nice is that it easily allows you to add multiple wildcards into your search query. This allows you to be very specific about what code you wish to change and what you want to keep intact.

Unfortunately, although building the queries is a breeze, the scope of each search is seriously limited. You can only find and replace within the current document. Compared with Dreamweaver which allows you to search across all open documents, an entire folder or the whole site, this seems painfully limited.

Nice CSS interface

The final feature that has caught my eye is the CSS coding environment. I have to confess I am yet to put this through its paces, however what I have seen so far has impressed me.

Although it is possible to code CSS by hand there is also a graphical user interface which guides you through the process. I am not entirely sure how much I would use this but it does have some nice features. One I particularly like is that it provides an ordered list of all the styles in a panel at the side of the screen. You can then reorder them using drag and drop. Also, if you are in split screen mode, clicking on a style jumps you to the appropriate place in the code.

Will I, won’t I

So will this dog decide to learn a new trick? I am still not sure. At $79 the price is excellent, however when you have already spent several hundred dollars on one application, shelling out more seems unnecessary. Also the lack of site wide find and replace is frustrating and means that I cannot really get rid of Dreamweaver completely.

That said, I love everything else about this application. I will no doubt get comments suggesting I try Textmate and numerous other editors. Trust me, I have tried them all. However, nothing has managed to tempt me away from what I have been using for years like Coda.

Given a choice I would live with the application for a while longer. However, for some reason I only have a 12 day trial so I will have to make a choice soon. What I do know is that if I hadn’t already spent money on an editor and had years of ingrained habit, then I would definitely choose Coda.

117. Friendly

On this week’s show, we review woopra, a google analytics alternative and we explore why friendly urls are so important and what tools are out there to help you set them up.

Play

Download this show.

Launch our podcast player

Information

Fuel Conference

Fuel is a one-day conference for entrepreneurs and marketers who want to make their companies, services and products truly remarkable. The conference is on the 13th June 2008 and tickets cost £195 inc VAT however for lucky boagworld listeners if you enter the promo code boagworld at the checkout you will get a £25 discount!

Back to top

News and events

The devil is in the detail

We kick off the news with three stories that focus on the detail of web design. So much is said about design, usability, accessibility and other broad subjects. However, less is written about the small things. It is here that a good site becomes an excellent site.

The first is a post on the list apart website entitled Zebra Striping: Does it really help?(1). Zebra striping refers to alternating colours on a table of data. It is a small thing, but a lot of us do it thinking it helps the readability of the data. But does it really? This post takes that theory and puts it to the test. The results are inconclusive but it is an interesting read anyway.

The second story is about a new book released on the topic of web forms. It’s called Web Form Design(2) and as the title suggests looks at the much under-represented subject of creating a great looking, usable form.

As I have said before forms make or break some of the most crucial elements of a website: checkout, registration, data input, and any task requiring information entry. This looks like an excellent read and I highly recommend you check it out. I will be.

The final post that focuses on the detail of design is looks at pagination(3). It is a tutorial that explains how to code pagination semantically. It then demonstrates how you can use CSS to recreate the appearance of pagination on sites like digg or flickr. It is an easy read and ideal for beginners.

Review crazy

The next theme of the week is reviews. In particular Smashing Magazine have gone review crazy in two excellent (if somewhat excessive) posts.

The first reviews 35 useful code editors(4). Of course, we can write our code with a text editor but that wouldn’t make for a very interesting post! Also we like those advanced features like auto complete, formatting and debugging tools.

If like me you have been using the same coding tool for years, this article is worth a read. Things have certainly moved on and there is no shortage of choice out there. It might be time to change.

The second review from Smashing Magazine only manages 25 applications. This time it is WYSIWYG editors(5). I guess this compliments the previous post very well. However, generally speaking I would warn against producing sites using WYSIWYG editors. That said they do have their place. They are useful to give to clients who want to maintain their own sites. They are also good for posting to blogs or other sites where the styling is already set.

It has to be said that I personally code in Dreamweaver, which has a WYSIWYG component. I have been known to use it to find a particular part of the code I want to edit.

A balanced look at flash

Our final news item of the day is a post by Veerle on her blog entitled Does Flash irks me?(6). It is an excellent opinion piece that clearly lays out her feelings about flash. She explains how she decides whether to use it and dispels some of the misconceptions about the technology.

Her post is very timely coming as it does a week after flash goes open source. It is balanced and her attitude very much mirrors my own (therefore it must be right!). If you view flash as the ultimate evil or alternatively refuse to code in anything else, read this post. It will provide a healthy dose of realism.

Back to top

Feature: Friendly web addresses

When redesigning boagworld considerable time was spent formatting the sites’ web addresses. Find out why so much time was taken and an introduction to the tools I used in this weeks feature

Back to top

Review: woopra

When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is woopra. I give my thoughts to woopra in this weeks review

Back to top

Listeners feedback:

Creating consistant colors

Anna Joe Writes: I know that the colour of a website will look a little different on every monitor, but is there a profile setting that you use as an ‘average’ setting?

Since I work on Mac with a Mac monitor, I’m afraid most people will see something radically different than me. I have read that Mac defaults are brighter than Windows. I’m using a lot of dark colours, so I am concerned about the site appearing too dark on the majority of computers.

I have a list of colour settings provided on my computer… only one seems to have a Windows-related profile. It’s called ‘Nikon WinMonitor 4.0.0.3000′

Do you have any suggestions regarding this issue?"

I have to confess Anna, this was a subject I knew nothing about before your question. The way that I got around the problem was to look at any design I produced on as many different monitors as possible. To be honest, even after my research I would advise this as the best approach.

View your site on a TFT and an old CRT monitor. Also check on laptops and under different operating systems.

However, based on a bit of reading it would appear that the problem is to do with Gamma settings. Macs by default have gamma correction built in while PCs do not. This causes images (especially photographic images) which look good on a Macintosh monitor to appear too dark on a PC.

Fortunately there is a tool that allows us Mac users to experience the horror of the PC world. It’s called gamma toogle(7) and can be downloaded for free.

If you don’t have access to multiple machines for testing this would be the next best thing.

Setting up an ecommerce site

Paul East Writes: My girlfriend has come up with an sales idea that would require a simple store front application with the ability to take credit and debit card payments online.

Have you any advice on where to start or any recommendations on store front applications?

We’d like to try and keep start up costs low (we’d like to avoid paying a web designer, sorry!) and avoid eBay type stores if possible for that more professional look.

We’ve done a little investigation on merchant accounts but could do with a good steer on the rest!

Again this is not a subject I k
now a huge amount about. Most of the ecommerce sites I work on are considerably larger. However, hopefully I will be able to point you in the right direction.

First, for the best advice when it comes to setting up ecommerce sites big or small I would highly recommend the ebiz video podcast(8). These guys really know their stuff and in fact we had them on show 55 to talk about ecommerce basics.

Second, in the past I have come across two simple shopping cart systems that impressed me. The first is FatFreeCart(9). This simple system can be integrated easily into an existing site. If you are only selling one or two items this is perfect. The alternative is shopify10. This is a little more sophisticated but incredibly simple to setup and run.

Neither of the questions today are subjects I know much about and I am guessing there are people groaning at my advice. If that is the case, get in touch and we will put you on the show.

Back to top