Show 94: Flickr Features

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

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

Podcast: Download (25.3MB)

Download this show.

Launch our podcast player

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

News and events

Developing your designs with the client

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

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

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

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

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

Become a better illustrator

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

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

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

A new approach to stopping spam

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

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

Photoshop secret shortcuts

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

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

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

Great stuff. Definitely worth checking out.

Marcus’ bit: Using client references

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

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

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

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

Don’t just assume

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

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

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

Vary the list

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

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

Paul’s corner: What we can learn from flickr

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

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

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

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

Patrick:
Yeah, I keep busy for sure.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Patrick:
[Laughing] Yeah, exactly.

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

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

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

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

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

Patrick:
Certainly.

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

Patrick:
No problem. Thanks for having me.

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

What we can learn from Flickr

Posted in Site content on September 13, 2007 by Paul Boag

Once we wrap our heads around the fact that we should be focusing on our content rather than our website it offers some interesting new opportunities.

Alternative delivery mechanisms

Flickr realized very early on that they were about photos, not running a website. Central to the Flickr philosophy is empowering users to share their photos. It doesn’t matter to Flickr how their users share their photos. What matters is that they are exposed to the biggest audience possible. By opening up their content via an API Flickr photos can be accessed through a huge variety of methods including (but not limited to)…

The Flickr website
Mobile devices
Desktop widgets
Digital WiFi photo frames
Third party desktop applications
Third party websites
Even printed material (such as moo cards)

In short, Flickr has let go of the concept of driving traffic to their website and focused on putting their content in front of as many people as possible.

You maybe asking yourself how this applies to your website. After all you are not flickr and don’t share photos. However, the principles can apply to most content types. Take for example the humble blog. A blog is made up of individual blog posts. Each of these are content items that could be delivered through almost all the mechanisms mentioned above (with the possible exception of digital photo frames). Equally you might be a university who holds a database of all of your courses. Again, why limit that data to your own website? It could just as easily be delivered to a much wider audience.

Amazon get this idea. They have had an API since the dawn of time and are more than happy to push their product lines out beyond the confines of their website. Of course by doing so they loose some level of control over their content but that is offset by the many more potential customers who are exposed to their products and their brand.

However it isn’t just Flickr’s API that should impress you. Its also how they navigate and organize their content.

Navigate via meta data

Take a look at your average Flickr photo. It contains a lot more than the photo itself. Each photo has associated with a mass of additional information (known as meta data). Just some of the data held on a photo includes…

A title of the photo
A description of the photo
Comments on the photo
The photoset the photo belongs to
The user who uploaded the photo
Tags for the photo
Notes on the photo
The copyright restrictions
The longitude and latitude of the location where the photo was taken
The type of camera used to take the photo
Settings used when taking the photo

However, what is interesting is not the amount of data available about the photo, but the fact that it is possible to navigate by almost all of those criteria. You can search on title, description, tags and pretty much anything else. You can click to see the photos of a user who has commented or even see all of the photos that have a certain copyright restriction. You can view photos geographically via a map and even look at photos taken with a specific F stop!

This richness of navigation really helps when navigating a huge amount of data (such as the 1 billion photos in Flickr). It enables users to quickly and easily find what they are looking for as well as exposing them to content that perhaps they would have never previously found.

Again there is a lot that we can learn from this. In particular there are real benefits here for ecommerce sites. Building up rich meta data around products and allowing users to navigate via that, will expose them to many more products and allow them to narrow their search much quicker. For example on an ecommerce site users could choose to navigate via customer ratings or brand name as well as more traditional categories. With our blog example from earlier users could navigate posts by tag, author, or even number of comments. The possibilities are endless.

Of course, this approach is not without its risks. Without the kind of clean simple design implemented by Flickr users could quickly be overwhelmed by all of these options. However, it does not need to be that way and with some careful visual hierarchy a site can be both meta rich and easy to use.

Conclusions

The key to this approach is to start thinking beyond the page metaphor and to start looking at your content in terms of data types. Obviously this approach does not apply to all content types (for example I don’t envision pushing the about us page to third party applications) however most sites contains some form of key content to which these principles apply. The trick is identifying what they are.

Show 91: God Bless America

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

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

Podcast: Download (32.3MB)

Download this show.

Launch our podcast player

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

News and events

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

Gerry McGovern on Intranets

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

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

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

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

SXSW Panel Picker

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

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

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

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

My panels are:

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

Hopefully at least one of these will come off.

HTML characters lookup

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

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

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

Very useful indeed.

Moving from Print to the web

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

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

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

Marcus’ bit: Dealing with the client from hell

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

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

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

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

Certainly do all of the following before you start:

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

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

Limited iterations

This is when you say to the client:

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

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

Averaging things out

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

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

Paul’s corner: The international web

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

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

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

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

Ask the expert: Julie Howell on Accessibility

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

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

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

Julie:
Well it’s a recent change anyway.

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

Julie:
Thank you.

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

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

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

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

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

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

Paul:
[Laughs]

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

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

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

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

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

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

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

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

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

Paul:
Wow!

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

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

Show 90: Digg

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

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

Podcast: Download (22.1MB)

Download this show.

Launch our podcast player

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

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

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

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

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

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

News and events

Eric Meyer tries to prevent history repeating itself

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

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

“Your browser is not compatible and must be upgraded”

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

“This site is for iPhone users only.”

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

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

6 Keys to Understanding Modern CSS-based Layouts

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

As Jonathan says in his post…

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

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

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

How to mix fonts

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

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

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

Making money through forums

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

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

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

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

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

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

Daniel Burka talks about Digg

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

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

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

Daniel: [laughs]

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

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

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

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

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

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

Paul: Oh okay

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

Paul: Hmmm.

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

Paul: Yeah.

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

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

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

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

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

Paul: Hmmm.

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

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

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

Paul: Ummm.

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

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

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

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

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

Paul: Yeah.

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

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

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

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

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

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

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

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

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

Paul: Yeah.

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

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

Daniel: [laughs]

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

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

Paul: Ahhh.

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

Paul: Ahhh.

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

Paul: Okay.

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

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

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

Paul: [laughs]

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

Paul: Yeah.

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

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

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

Paul: Sure.

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

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

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

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

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

Paul: [laughs]

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

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

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

Paul: Oh I didn't know that.

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

Paul: Yeah. [laughs]

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

Paul: Yeah

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

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

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

Paul: Yeah.

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

Paul: Yeah.

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

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

Daniel: Right.

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

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

Paul: Cool.

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

Paul: Yeah.

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

Paul: [laughs]

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

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

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

Paul: Yeah.

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

Paul: [laughs]

Daniel: [laughs]

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

Daniel: Shoot! [laughs]

Paul: [laughs]

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

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

Daniel: That would be fun.

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

Daniel: Thanks so much for having me.

Paul’s corner: Quick and dirty competitive analysis

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

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

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

No show next week

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

Show 89: 404

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

On this week’s show: Paul talks about creating the perfect 404 page, Marcus covers some of the basics of rich media and Aral Balkan makes working with databases and APIs a whole lot easier in flash.

Download this show.

Launch our podcast player

Before we dive into today’s show I have a small request from you our loyal fans *cough*. As you may have noticed the show notes we produce for this podcast are a lot more comprehensive than once they were. They are almost a complete transcript, which is important to us because we want the show to be as accessible as possible. I have been contacted by a number of deaf users who are frustrated because they cannot access the show and to be honest I sympathize. We have done our best to produce a complete script but we are getting hung up on the expert section. I just do not have the time to go through and reproduce everything say. An alternative would be to use a service like Casting Words but to be frank I am not confident on the quality we would get back. I was therefore wondering if any of you would like to volunteer? I know a number of people have offered to transcribe in the past but quickly became overwhelmed with the amount of work involved. However, transcribing just this section of the show (typically about 10 minutes) shouldn’t be too bad. Hopefully if we can put a rota together it should be too big a job and best of all you would get to listen to the expert sections in advance :)

So, if you can spare the time drop me a line.

News and events

Writing for the web

First up this week is the fact that the latest issue of A List Apart is entirely dedicated to the subject of writing for the web. There are two great articles both of which are definitely worth reading. The first post takes the idea of personas and suggests that your website too should have a persona. What tone of voice should your website have? What character should it project? The second article (and my personal favorite of the two) is a passionate defense of good writing on the web. It fights hard against the attitude that web copy should be kept to a minimum arguing instead that if the content is web written it draws the user in and engages with them in the same way good design can.

Both articles are excellent and has made me reconsider the importance of good copy. It is an area I am constantly frustrated by and just wish I could get my clients to pay for a copywriter to really bring their sites alive.

Microformats in Google Maps

Next up is a really exciting announcement by Google. It would appear that Google Maps now supports Microformats. I can hear your cries of disappointment… thats not that exciting! Well, I think it is. This is a huge boost for the Microformats community and puts literally millions more hcards out there. Not only will this raise the awareness of Microformats but I also think it will lead to some interesting mashups using the massive database of businesses that are displayed on Google Maps.

If you are yet to play with Microformats or haven’t gotten around to adding them to your website then now is the time. They are quick and easy to implement and oh so very cool ;)

There has been a lot written about Microformats but it is nice to see big players picking it up and running with it. Good stuff.

Corporate Web Standards

What you don’t see a lot written about anymore is web standards. Its almost as if all of the arguments have been made. However, I did come across an article this week that convinced me there was more to cover. It was a discussion about implementing web standards in a large corporate environment where you are weighed down under legacy pages and internal politics.

It was a refreshing article because it was so pragmatic. Much of what you read about standards is bordering on fanatical. This article was much more down to earth accepting that you cannot implement the perfect solution especially within a large corporate environment. It talked about little steps and something being better than nothing.

If you work in a large organisation then this is definitely worth reading. You will find it very encouraging.

Web Design advice

Last up is a couple of websites I have stumbled across this last week. Both of them are provide general web design advice and I have to say both look very impressive. The first was sent to me by Charles Russell who recommended it as an alternative to “The Principles of Beautiful Web Design“. I am not sure it is an alternative personally but it is certainly an interesting website. It is called Web Design from Scratch and does exactly what it says on the tin. It literally covers every aspect of web design providing basic advice and then referring you on elsewhere. Ideal for the beginners.

The other site I wanted to mention is the Web Designers Wall which I believe has only just launched. It seems to be filled with all kinds of nice goodies including tutorials, code snippets, commentary, inspiration and more. What is more the site design is beautiful. I have a feeling that this site is only going to improve with age.

Marcus’ bit: Rich media

Multimedia doesn’t really mean that much anymore I think. It used to refer to CD-Rom type content but now I think it refers to any web content that isn’t just plain old text and images.

I have been pricing up some new/interesting/dynamic content for one of our clients and it struck me that I haven’t discussed this sort of thing here before. I guess there isn’t a great deal of point to this other than ‘have you thought of doing…’, so here goes…

Animated shortcut banners

These seem to be all the rage at the moment. Usually quite a large portion of the homepage is dedicated to a rolling carousel of messages or adverts for content deeper in a site. There will usually be 3 or 4 different ads that flow from one to another. Manual controls are also available to go straight to a particular shortcut or pause on an ad.

There’s a good example at Wildfowl and Wetlands Trust.

Video

I don’t really mean just plain video; I’m referring to a piece we did for the Surrey Hills AONB that incorporated:

Still shots
Video footage
Voiceover

All of which were pulled together to create a tourism video that can be downloaded at Surrey Hills.

The voiceover, incidentally, was done by Surrey Hills patron and famous british actress, Penelope Keith. Going to her rather grand house to record the session was a great experience.

Voiceover

Which brings me nicely on the subject of voiceover. I have two rules relating to voiceover recording:

ALWAYS use a professional actor. The girl in the office with the ‘nice’ voice will sound rubbish, so will the ‘posh’ guy in accounts (we know, we’ve done it!). Voiceover actors aren’t that expensive and, because they’re professional they’re quick. I have used Voicebookers in the past and they have been superb.

Less important but… use a proper voiceover recording studio. I have used studios in London that are really very reasonable and the quality is superb. Though of course this isn’t always possible as with Penelope Keith (recorded my laptop).

Panoramic imagery

We have done a few external 360 degree images, again for Surrey Hills and some for National Trails. We haven’t used dedicated equipment that take full spherical shots basically because you end up with an unnecessary amount of sky. I have simply used a decent camera and tripod and done two full sweeps of portrait images (roughly one just below the horizon, the other just above), moving the camera about 10 degrees each time.

The ‘fun’ part with these images is that they are usually taken from high vantage points so expect to have to do a lot of climbing to out of the way places!

There is a compromise to be made with panoramics. The best time to take a good landscape photo is early in the morning or just before sunset. However, for a panoramic that doesn’t work because you will have the sun in view for a large chunk of the image. This is one of the reasons why panoramic images can often look a little ‘flat’.

Dynamic screensaver

This is quite a cool idea where the standard screensaver idea (pretty pictures rolling from one to the next) is enhanced to allow the client to update information to it. Basically, when the screensaver fires up (as long as it connected to the internet) it checks with the client’s site to see if any changes have been made and automatically updates if there has. This is really handy for news stories but could be used for anything.

Mapping

I think I have discussed mapping previously because it is something Headscape has done a lot of in the past. Up until recently we tended to develop maps using Flash where points of interest are dynamically generated using grid references. We also added features such as layering of different categories.

However, recently we have developed a site for River Thames that utilises Google Maps. The site’s main purpose is to promote the River and encourage people to visit. Again, we have used Google Maps to show points of interest such as places to eat, places to stay etc that are controllable in layers. Using GM is very cool though because the points shown alter when the maps are dragged and/or zoomed (apparently lots of brain power went into making this work!).

Finally, we also created a trip planner or itinerary builder that gives site users the opportunity to list all the places they want to visit (inc. contact details, address, directions etc) and print this off in a print friendly design or email to a friend.

Paul’s corner: Handling missing pages

I noticed this last week that I have been getting a lot of traffic from the Smashing Magazine and so I went to check out where it was coming from. Turns out it was an article on 404 error pages and they had used my error page as an example. The article also referenced another site called the 404 Research Lab that provides lots of good information on setting up custom error pages. All of this reminded me I wrote a blog post ages ago about handling missing pages and yet for some reason i have never spoken about it on the show before. Seems strange because it is a subject we all need to deal with. So, I thought it was time I covered the subject properly using my old blog post as the basis.

Review: Aral Balkan on SWX

Paul Boag: OK, so joining me today is Aral Balkan. Hello! How are you?

Aral Balkan: I’m fine, Paul. How are you doing?

Paul: Not too bad. I feel like I’m speaking to you quite a lot recently, one way or the other.

Aral: [laughs] I know, but it’s fun, huh?

Paul: So I was explaining to everybody earlier in the show how we got you into Headscape to give us a little bit of training and kind of bring us up to speed with what was going on with Flash.

Aral: Yeah, that was a lot of fun, too.

Paul: You had a good day, did you? It wasn’t too painful then.

Aral: Yeah. Me and my bunny had a good day. [laughs]

Paul: Yeah, that was deeply disturbing, on so many levels.

Aral: [laughs]

Paul: But I think we’ll just leave it at that. We won’t tell people any more details on that. We’ll just leave them worrying about it. [laughs]

Aral: OK, let’s do that. [laughs]

Paul: So, as part of that day, you mentioned SWX, which is something that you’ve been involved in developing. And it sounded so cool and kind of dragged my attention back when there were points where I was thinking that this is beginning to get a bit out of depth to me.

Aral: [laughs]

Paul: There were techie people in the room that understood what was going on.

Aral: Yeah.

Paul: But then you started talking about SWX, and I started to think, “Ooh, that sounds cool” so I thought I’d get you on the show and ask you a little bit about it.

Aral: That’s great. That’s great, because SWX is what I’m most excited about these days.

Paul: Good stuff. So, do you want to kick us off by telling us a little bit about what SWX is?

Aral: Well, SWX is a couple of things. SWX itself is a new data format for Flash. It’s actually the native data format for Flash, which is kind of weird, because Flash has been around for a while, so why hasn’t it had a native data format until this point? I don’t know. Nobody else did it, so at the end; I was like, “OK. Well, I guess I have to bite the bullet here.”

And when I say native data format, if you’re not very fluent with Flash, think about JSON, or what JSON is for JavaScript. But it’s actually a step beyond that, because, with JSON, you still either have to parse it, or in JavaScript you have to evaluate it, before you can use it. So there’s another step before you can use it, after the data’s loaded.

In SWX, there isn’t. It uses SWF files, which are native Flash files, to store data, so it makes it very easy to work with.

Paul: What’s the kind of target audience for this? Who do you see as using it?

Aral: There are a couple. So, anyone right now who’s working with Flash basically can use this to build mash-ups, to build data-driven Flash applications. And also, mobile developers who are developing with Flash Lite can use SWX to develop mobile Flash applications.

And in fact, that’s where it’s currently, I think, most useful, because with SWX RPC–which is the remote procedure call, the gateway for it–you can make remote procedure calls, so call back-end services and methods, through SWX. And it’s the only RPC solution, really, because Flash Remoting doesn’t work on Flash mobile, on Flash Lite, so it’s the only RPC solution for mobile right now.

Paul: I think what kind of struck me about it was the fact that there are a lot of people out there that maybe have been doing some superficial stuff with Flash…

Aral: Yeah.

Paul: And have been doing some ActionScript and things like that.

Aral: Right.

Paul: But when it gets to things like making data calls, it all seems to get horribly complicated, all of a sudden.

Aral: It does. It gets very hairy, and I don’t know why. I think part of it is because the back-end, the server side, of applications has traditionally been the realm of traditional programmers: the brainiacs, the people who are very comfortable talking in code, thinking in code.

And they’re not always the best people, I find, to simplify concepts, because they’re so intelligent, they can understand all of this, or they have such a focus on this that they don’t mind spending hours trying to set something up. Sometimes, they’re not always the best people to create simpler systems for mere mortals like the rest of us.

Paul: [laughs]

Aral: So that was my main motivation behind it, because I think Flash is great for building mash-ups and data-driven applications. But we don’t get as much experimentation in Flash with that, and I think it’s because it’s too hard. The barrier of entry is too high. You have to jump through so many hoops to get even something basic working, whereas it should just be, off the bat, you should be able to get started with things. And that’s been my focus with SWX.

So, for example, on the Mac, there’s a bundle that you can download that gives you everything you need to start using SWX, with a one-click installer, a disk image.

Paul: Cool.

Aral: My focus, really, with SWX is on simplicity. And when I say simplicity, I mean for the whole process, from the moment you go on the website and download SWX, to the moment you can get up and running. I’m trying to make that whole process as easy as possible, basically.

Paul: From what you showed me when you came into Headscape…

Aral: Yeah.

Paul: Basically, within a few minutes, you can kind of download this bundle onto my Mac. I can run an install file, which sets everything up for me.

Aral: Yeah.

Paul: And you’ve even set up…

Aral: Well, you basically get a development server for free.

Paul: Yeah.

Aral: It uses the MAMP Bundle, which is a great bundle that has Apache, PHP, MySQL. So if you’ve ever been afraid to work with these things, that’s also a way to get started, because there they are on your machine, running, without any configuration or anything on your part.

Paul: And you have also included some kind of interfaces to common APIs, things like Flickr and Twitter and stuff.

Aral: Yes, and in fact, if you remember the installation process and everything that you were talking about, you don’t even have to download and install SWX to start working with the pre-existing APIs that come with it, because I host an instance of the SWX gateway on swxformat.org. It’s the public SWX gateway that you can just hit directly from your Flash applications.

Paul: Ah!

Aral: So if you don’t want to mess with the back-end, but say you want to build a mash-up that uses Flickr or Twitter, currently two of the main APIs that I have on there, you don’t even have to download SWX. You can just open up Flash, write four or five lines of code, and get, for example, the list of your latest photos from Flickr.

Paul: Cool.

Aral: Or your friends’ photos. With nothing else. So you don’t even have to download anything to start working with SWX, because it is native. What you’re getting from the back-end, from that SWX gateway, is a SWF, and Flash knows how to deal with that, and the data in there is a native Flash object and ready for you to use the moment it loads.

Paul: So, how does somebody get started on this? Where do they go? What do they have to do? Especially, you made it sound very simple for the Mac. Is it horribly complicated if you’re a Windows user?

Aral: Oh, not at all, not at all. Like I said, regardless or what platform you’re on, unless you want to build your own server-side services, if you want to use the APIs that it comes with, you don’t even have to download it, actually.

Paul: Oh, OK.

Aral: In fact, just last week, I got moo cards printed. And these little moo cards have all the code you need on the back of them, because there’s only about four lines of text you can put on the back.

Paul: [laughs]

Aral: But they have all the code you need to get the latest public timeline updates from Twitter. So it’s actually, seriously, four lines of code, and it fits on a moo card.

Paul: Wow!

Aral: So, to get started, you don’t have to do anything, really, apart from open up Flash, write four lines of code, and see it run and get the feeling that, “Wow, maybe I can build data-driven applications in Flash, too, because this is simple.”

The next step would be to download SWX onto your own machine. If you have a development server already, if you have a web server with PHP, then you just download the ZIP file, unzip it into your web root, and hit that location in the browser, and the start page comes up and guides you through the rest of it.

Paul: Cool.

Aral: If you’re on a Mac, get the MAMP Bundle, and that’ll get you started even faster. But, like I said, you don’t even need to download anything to start playing with it.

Paul: So these four lines of code to get you going…

Aral: Yeah.

Paul: If they don’t have one of your precious mood cards, where can they go to learn those kind of basics?

Aral: Well, on swxformat.org, there is a screencast right now. It runs you through the MAMP Bundle, but the concepts are exactly the same for all of the rest.

Paul: OK.

Aral: Although, I am going to record a few more screencasts. I’ve started putting them up on Viddler, which is actually really cool. I don’t know if you’re used it.

Paul: Yeah, I have.

Aral: But it’s really great for screencasts, because it keeps the original resolution of your movie. So I’m going to record quite a few more and put them up there, including one that will just get you started, like the moo card does.

Paul: Cool.

Aral: So, look on swxformat.org. And also, look on my blog, because I blog about SWX quite often there: it is aralbalkan.com.

Paul: So as I understand it, at the moment, this is all built on PHP and MySQL. Is that going to change? Are we going to see other platforms supporting this, too?

Aral: Well, basically, the SWX format itself is a data format, so it’s platform-agnostic, in terms of the back-end, etcetera. So if you have a SWX SWF, you’ll be able to load that. Even if it’s offline, if you have if on your hard drive, you’ll be able to load it into Flash and get the data off of it.

Paul: Excellent.

Aral: And then there’s SWX RPC, which is an implementation of a gateway, basically, or an endpoint, that serves SWX SWFs. And the current implementation of that is only in PHP.

Paul: Right.

Aral: So, it will be ported later on. It’s currently in beta. And once we get closer to the release date and certain things are standardized, I’m going to be concentrating on orchestrating the ports. There’s a lot of interest from quite a few people to port it to Ruby, to J2EE, to.NET.

Paul: Excellent.

Aral: And my focus right now is on getting SWX to a level where it’s somewhat of a standard–not like an Internet standard, but at least, within itself, we know what we’re talking about when we say a SWX SWF so that, if it’s being generated from Ruby, it’s the same thing…

Paul: Yeah.

Aral: So there’s no fragmentation. That’s my focus right now. In fact, I’m writing my first RFC…

Paul: [laughs]

Aral: For the SWX formats, just so things are a bit more standardized, before we go porting it to every possible technology.

Paul: Excellent! That just sounds really exciting…

Aral: I’m really excited about it!

Paul: Yeah, I bet you are.

Aral: This has gotten me excited and working with technology again, at a level that I hadn’t been in the past. It’s fun. Because this stuff, the data exchange between tiers, it’s really not rocket science, and it shouldn’t be rocket science. We’re just moving stuff from one place to another. And my philosophy is: make that as simple as possible for people so they can concentrate on the really fun bits…

Paul: Yeah.

Aral: Building the user interface, building a great user experience. Because those are the hardest bits, really, conceptually, and they’re also the most fun.

Paul: Yeah. That’s great stuff, and I wish you all the best with it in the future. And thanks for coming on the show and telling us a little bit about it.

Aral: Thanks so much, Paul, for having me. It was a lot of fun.

Paul: Yeah. OK. Good to talk to you, and we’ll speak to you again soon.

Aral: OK, take care of yourself.

Advice for CMS users

Posted in Accessibility, Site content on May 23, 2007 by Paul Boag

I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.

Introduction

Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.

This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.

Writing for the web

Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.

Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.

Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.

Below we investigate these two challenges in more depth and suggest some possible solutions.

Writing style

Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.

Engaging with the user

Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.

The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:

Using a personal tone

By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.

Writing how you speak

If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.

Avoid being patronizing

The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.

Making your copy clear

The W3C accessibility guidelines clearly state:

Use the clearest and simplest language appropriate for a site’s content.

In other words ensure that your reader can understand what you have written.

Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:

Jargon

A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.

You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.

Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.

When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.

Reading level

There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.

Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.

Below is some advice on how you might go about improving comprehension of your copy:

Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.

Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.

Making web pages easy to scan

It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.

There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:

Front loading

Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.

Keep it short

Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.

Keep paragraphs short

As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.

Keep sentences short

At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.

Break your copy up

As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:

Can I associate a heading or sub heading with this block of text?
Could this paragraph be reduced to an easy to scan bullet point list?
Is there a key message in this paragraph that users need to instantly see?

If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.

Many good content management systems (including Headscape’s own CMS) provide this functionality.

Accessibility

We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.

As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.

The importance of markup

So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.

So, if for example you want to tell the browser that something is a heading you would mark it up like this:

<h1>This is a heading</h1>

or a paragraph would be marked up like this:

<p>This is a paragraph of text</p>

Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.

Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.

Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.

More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.

The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.

Marking up content in this way brings a whole host of advantages including (but not limited to):

The ability to redesign how an individual style looks universally across the entire site without editing each page.
The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
The ability for screen readers and other assistive technologies to understand the site.

In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.

Text alternatives

Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.

The most common example of this is with the inclusion of images into your pages.

There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.

Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.

A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.

Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.

Meaningful links

Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:

Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.

Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.

This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.

Acronyms and abbreviations

Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.

In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.

However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.

This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.

This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.

Using tables correctly

Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.

Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.

We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.

That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.

Working with imagery

Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:

Animation

Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.

The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.

If animation is to be used we recommend:

That the user is given the ability to disable the animation
That the animation is not too rapid so that it proves less distracting

Colour

Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.

These two issues are addressed in the W3C guidelines on accessibility:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Further information

Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.

If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].

Show 79: Despise the listener

Posted in Classic shows on May 15, 2007 by Paul Boag

A great line up this week with Paul, Marcus and Andy Clarke.

Podcast: Download (21.4MB)

We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.

Download this show.

Launch our podcast player

News and events

Google Analytics gets interface upgrade

Like so many who join Google, Jeff Veen has been forced to be somewhat tight lipped about what he has been working on. However in the last week we have finally been able to see the fruits of his labors with the relaunch of a new and improved Google Analytics. You would be forgiven for thinking that a load of new functionality has been added to the service. In fact that is not the case. The only changes have been to the user interface. The difference is that you can now find everything quickly and easily.

If like me you found the old Analytics service confusing and difficult to use then you might want to take a look at the new revised version. It is a definite improvement.

Great new articles on A List Apart

For a while I have been a little disappointed with the articles coming out of A List Apart. Perhaps they were simply too “high brow” for the likes of me but they lacked any practical application. However this issue is different. It has two great articles about handling clients.

The first entitled “Stand and Deliver” provides some superb advice on presenting your designs to a client. The second called “Educate Your Stakeholders!” talks (unsurprisingly) about educating the decision makers in a web project so they make more informed choices.

Both are really superb articles and I would definitely recommend you check them out.

Teaching the traditional web

We are all acutely aware that the web is changing at a rapid rate. At the moment the focus is very much on web applications however we cannot afford to ignore the massive number of page based sites that still need to adapt to the changing way people are interacting online. In a post called Teaching the traditional web, Keith Robinson discusses how we need to alter our approach to page based websites based on deep linking, RSS feeds and mobile access. A very enlightening read.

Baselines and vertical rhythm

Having Richard Rutter on the show a few weeks back made me acutely aware of my shortcomings when it came to web typography. Although I promised myself I would look into the subject in more depth I was a bit vague as to where I should start. Fortunately Richard has given me a starting point with a list of resources on his site that look at the subject of baselines.

I know that many people find web typography an uninspiring subject but good typography can have such a profound impact on how people perceive design that it really is worth your attention.

Client corner: Getting things done in web design

I have just finished reading “Getting Things Done” by David Allen. Not only has it seriously helped me to get control of my workload but its also made me rethink how I approach web design projects with clients. In this week’s client corner I suggest some techniques that designers and clients should use when a new project is starting.

As seems to be the default approach these days I blogged on this earlier in the week so if you want more information on what I said in the show then be sure to check out that post.

Ask the expert: Andy Clarke on CSS 3

Following Andy Budd’s recent criticism of the W3C CSS Working group it seemed appropriate to have Andy Clarke on the show to talk about the progress of CSS 3. Andy is an invited expert on the CSS working group so has the inside track on what is really happening. In the show Andy talks about…

Some of the cool layout features available in CSS 3.
The modular nature of CSS3.
The slow progress made by the group.
And the need for the web design community to contribute in the process.

Agony uncle: Insurance for web designers

We received the following question from Brian last week:

As an avid listener to your podcast – and having spent the day catching up on them while travelling! – I was very interested in a particular segment where your good self and that Lillington chap mentioned your Terms and Conditions and having, ‘…all the right insurances in place…’, with regard to setting up a business.

I’ve recently done some work with a mate – a few hopefully not-too-shabby websites – and although we think we are getting the hang of sorting out contracts now, we have never been able to settle on what to put in our Terms and Conditions. Every time I start to do it I either glaze over or start putting stupid things in due basically to boredom!

As for insurance we never assumed that we would need any for web design. Its not like we’re making nitroglycerine or heart bypass machines… so we assumed the basic rules of common sense prevailed.

To this end, if you have any advice on what insurances might apply or what sort of thing should be covering in T&C’s?

Firstly I’ll cover the terms and conditions issue, much as I don’t want to appear protective over our ts & cs, we have reached the conclusion that by providing them we are in effect providing legal advice.

This is not what we do and it’s not a path we wish to tread!

We suggest speaking to your lawyer or maybe a local chamber of commerce who could provide a standard terms and conditions contract template. I also droned on about the different aspects of terms and conditions in episode 65.

Insurance, however, is another matter. Though, again, I am concerned about making stuff up here (as is often the case!) so the majority of the following content is from Business Link. This is what we currently pay good money for:

Professional Indemnity

If you are in the business of selling your knowledge or skills, you may want to consider taking out professional indemnity insurance.

This protects your business against compensation sought by a client if you have made mistakes or are found to have been negligent in some or all of the services that you provide for them. Professional indemnity insurance will also cover any legal costs.

Public Liability

If members of the public or customers come to your premises or you go to theirs, you should think about taking out public liability insurance. This type of insurance covers any awards of damages given to a member of the public because of an injury or damage to their property caused by you or your business.

Product Liability

In product liability insurance (PLI) terms, a product is any physical item that is sold or given away.

Products must be “fit for purpose”. Under the Consumer Protection Act 1987, you’re legally responsible for any damage or injury that a product you supply may cause. PLI covers you against compensation awarded as a result of damage to property or personal injury caused by your product.

Employers Liability

Employers’ liability compulsory insurance (ELCI) enables businesses to meet the costs of compensation and legal fees for employees who are injured or made ill at work through the fault of the employer.

Key Man Insurance

Key man insurance is designed to cover you for the financial costs of losing key personnel. We still have this for Paul….goodness knows why! ;-)

Review: Looking beyond web design books

This weeks review section isn’t so much a review as a recommendation. At SXSW you are really spoilt for choice as to what to attend. In fact there is so much choice it is overwhelming. After much consideration I decided to take an interesting approach. I decided to mainly attend panels on subjects I knew nothing, or little about. Instead of going to panels on CSS or design I went to sessions on marketing and strategy. The result was an incredibly enjoyable and enlightening week.

On my return to the UK I decided to take a similar approach in my reading. Prior to this the majority of books I read where either on CSS or Javascript. However I am now trying to broaden out the range of books I read to encompass other subjects like productivity, business process, and even some sociology. As with SXSW it has been an incredibly rewarding experience and something I would encourage others to do. I have been amazed at just how much of what I have read has related in someway to my job and I believe it has genuinely improved the quality of my work.

I would really encourage others to try the same thing and would like to suggest three books to break you in gradually. Although none of these books are directly to do with web design they all include valuable lessons that you can apply to your work on a daily basis…

Show 69: All alone

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

Abandoned by Marcus, Paul struggles on alone through this week’s show. Bravely he manages to cover; the cure to hiccups, how to hunt down those pesky CSS bugs and what’s new in Photoshop CS3.

Podcast: Download (19.4MB)

Download this show.

To subscribe directly within itunes click here

News and events

SWF image replacement

This week sees the launch of SWF image replacement (swfIR), not to be confused with sIFR which replaces text. swfIR combines javascript with flash to apply cool effects to imagery on the fly. swfIR can add rounded corners, drop shadows, borders and even make images scale. What is more it degrades nicely on unsupported browsers. Of course nothing is perfect and there are some known issues. However, it is certainly a good option if you have clients uploading lots of images which need styling.

Yahoo! Pipes

Yahoo! has launched something called Pipes which apparently allows you to “rewire the web” (and here was I thinking the web was made up of tubes). Basically Pipes allow you to combine and repurpose multiple RSS feeds and APIs. At its most basic level it is similar to a service like Feed Digest however it is capable of doing a whole lot more. Not the most user friendly interface in the world but definitely worth having a play with.

Ajax inspiration

I came across miniajax.com which is a nice little site that showcases the latest gadgets and gizmos in the world of AJAX and Javascript. For those of you who already code Javascript this is a great place for inspiration, for the rest of you it is “copy and paste heaven”.

Accessibility and the UK law

Struan Robertson has produced two great articles that clearly lay out your legal obligations on accessibility if you run a website in the UK. Ignore at your peril:

Client Corner: Choosing a design

With Marcus away it fell to me to tackle the client’s corner segment this week. Sticking to what I know best, I decided to discuss how to choose the right design for your site when confronted with multiple options. We look at:

How deeply a client should be involved in the design process
The dangers of design by committee
The subjective nature of design
The need to include your target audience in the decision process
The importance of brand identity
The problems with choosing a colour palette
The influence of imagery
Layout, resolution and the fold.

Ask an expert: Gary Marshall on instructional copy

Out of all of the guests to appear on the .net podcast Gary Marshall is one of my favourites. He is not a web designer but a technology journalist which means he brings a completely new perspective to the table. On this week’s show I get him in to discuss his impressions on instructional text; you know, the copy the client doesn’t write. From error messages to tooltip help, it is often down to the web designer to write instructional text and what do we know about writing!

Agony Uncle: Bug Hunting

Diagnosing and fixing problems in CSS can be a bitch. Often we resort to randomly trying different things until something works. However, there is a better way. This week we look at bug testing techniques including:

Know your bugs; sites like Position is Everything will help with that
Validate your code
Apply borders
Create a stripped down test case
Systematically remove chunks of code

Review: Photoshop CS3

This week I finally got around to installing Photoshop CS3 Beta and I have to say I really like it. I put it off for ages because normally these upgrades aren’t worth the effort but this one has made some substantial improvements. Probably the most exciting for me personal are the improvements to the interface, which now has docked palettes rather than those annoying floating ones. However, there are a lot of cool features beyond that, including:

Quick Select
Refine Edges
An improved bridge
Smart filters
Improved cloning

For a more comprehensive review check out the National Association of Photoshop Professionals (no I am not making that organisation up!)

Podcast 52: Javascript Libraries

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

This week on boagworld.com we talk to Dustin Diaz about Javascript libraries, discuss other web design podcasts, launch our web design forum and help you get started with Microformats.

Podcast: Download (30.1MB)

Download this show.

To subscribe directly within itunes click here

In the news

Microformats

If you are interested in getting started with Microformats then check out the excellent ebook on Microformats by
Brian Suda
. He has also been kind enough to share a Microformats cheat sheet for free.

Microsoft and the BBC

This week saw an announcement by Microsoft and the BBC that they are exploring ways of developing [the BBCs] digital services. As you can see the announcement is somewhat lacking in details. However, this is potentially a huge development and could lead to some interesting online services.

Searching rich media

This year’s demo conference saw pluggd announce an amazing new feature that allows you to search inside of podcasts. This is symptomatic of a growing movement to ensure that rich media content is searchable. Other players in this space include Veotag and Podzinger.

Questions and comments

This week’s show included two excellent audio questions from listeners.

The first was about the open source forum software I mentioned a few weeks back called Vanilla. This led to a discussion about running online communities, the integration of Vanilla and my hopes for the new boagworld forum.

The second question was about what other podcasts I would recommend. Below are the list of the one’s I mentioned on the show. However, you can find a more comprehensive list of web design podcasts by going here.

Main feature

The main feature today is an interview with
Dustin Diaz
about Javascript libraries. Javascript is becoming increasingly important as web designers produce ever more powerful web applications. But, how do Javascript libraries fit in? Do they enable rapid development or are they simply a crutch for those that can’t be bothered to learn the language?

Review

There are so many great website applications around these days, many of which allow you to add their functionality to your own site through web services and APIs. The problem is that it is hard to discover what exactly is available. This week on boagworld we review three sites that help you do exactly that:

d.construct: Full of questions

Posted in Development on September 6, 2006 by Paul Boag

This will probably be my last chance to post before I am off to d.construct. I have a manic day tomorrow trying to get everything sorted before I go, however I wanted to share with you a couple of thoughts about the upcoming conference.

It’s funny how things work out sometimes. I had not really taken the time to look at what d.construct was covering this year. I enjoyed it tremendously last year and was confident that the guys at Clear:Left would pull together a great line up again.

It therefore came as a pleasant surprise to discover that the primarily focus was on web services and APIs. This was especially good, as I had just decided to address the issue on the boagworld.com podcast.

I have felt for a while that web services and APIs were something that I should address on the podcast but to be frank I don’t know much about them, so felt inadequate to speak on the subject. I had decided to ask Dustin Diaz on the show to give me his take on them but we were having trouble arranging a time (although I still hope to get him on soon!). You can therefore imagine my relief when I discovered d.construct would be covering the same area.

Questions and concerns

must confess, I have loads of questions that I am hoping will be answered. What little I know on the subject leaves me with some doubts about their usefulness to the average website owners. I can see the use for an enthusiastic bloggers who wants to sell amazon books or show their flickr photos. However, what do APIs offer large corporations or public institutions?

Even if a web service does appear useful, this in turn throws up a load of additional questions. For example, what if Google decides to discontinue its mapping service and your site is dependent on it? What if your site pulls in RSS feeds from Feedburner and their server goes down? In my experience, clients do not like being reliant on third parties for their site to operate successfully.

As you can see, I have all kinds of questions. As with so many of these emerging technologies I am left wondering how it will benefit my clients. I am happy to admit that I am blissfully ignorant in this area and my hope is that d.construct will show me the light.

I’ll tell you what I learn in next weeks show.

Say hello

If you are going to d.construct then please come over and say hello. I am always keen to chat with people that read this blog or listen to the podcast. That way I am not standing in the corner looking like billy no mates!

Come work with us!

Posted in News on September 1, 2006 by Paul Boag

Headscape’s endless quest for world domination continues as we seek to recruit yet another member of staff. This time we are seeking a designer. He or she can work from home so this job is open to anybody in the UK.

You need to be passionate about all aspects of web design. We want somebody that is obsessed with web standards, fanatical about good usability and with a track record of building accessible sites. You need to be up on the latest trends and techniques, comfortable whether talking about AJAX, semantics or validation.

However, most of all we are looking for somebody whose work can blow us away. If you think you can impress us with your eye for design and have a stunningly good portfolio then we want to hear from you.

You will need experience not only in design but also in website construction. A good grasp of XHTML and CSS are vital. A solid working knowledge of DOM scripting wouldn’t go amiss as would experience in flash.

If you are interested, drop us an email containing a CV and a list of sites you have worked on (including details of how you were involved). However, be warned, if your sites are not built with standards and don’t demonstrate a good grasp of accessibility, usability and semantics then you won’t get very far!

Headscape isn’t a huge company but we like it that way. We are very much a lifestyle business that believes people “work to live” rather than “live to work”. You’ll have flexibility in your working hours (as long as the job gets done), will get to work on sites for household names and we will ensure that you have enough time to keep up with our rapidly evolving industry.

Because you will work primarily from your own home we are accepting applicants from anywhere in the UK. So, if you are good at what you do then get in touch. We would love to hear from you.

Sample site review

Posted in Web strategy on July 13, 2005 by Paul Boag

A part of my job at Headscape is to provide site reviews for clients. These range from short overview reports to detailed studies on particular aspects of a site. I recently completed a review for a small ecommerce site called TrapAWasp and felt that it neatly tidied together a number of different issues I had been discussing in this blog. The client has been kind enough to allow me to publish it here so hopefully it will be of some use to others. Please bear in mind that this is only a condensed site overview and doesn’t tackle issues in much depth.

Summary

As with all ecommerce sites there are two key factors that dictate its success or failure. These are the number of visitors that are driven to the site and the number of those visitors who are then converted into customers. It is these two factors that Headscape uses to assess the effectiveness of an ecommerce site.

Without looking at the web logs of a site it is hard to tell just how successful the site is at converting users. However, the initial indications for TrapAWasp are good. The site is generally well designed, has few significant usability problems, and addresses most of the major questions raised by users considering purchasing online.

A more important problem exists with regard to driving traffic to the site in the first place. Although good use is being made of Google Adwords the organic listing on search engines (in particular Google) is very poor. We believe there is significant opportunity here as a cursory analysis of the competition makes us believe it would not take much to push TrapAWasp to the top of Google’s ranking.

Visitor conversion

In many ways TrapAWasp is an example of good design. It is clean, simple and focused on enabling users to complete a purchase in the minimum number of steps. However, as with all sites there is always room for improvement and so below we outline several issues which should be addressed.

Design

The site has a strong visual identity. It is well branded: the site name, use of imagery and introduction leaves the user in no doubt as to what the site is about. However, two issues are of concern and should be addressed.

Screen resolution

28% of users are still viewing their computers at 800×600. Unfortunately TrapAWasp has not been optimised for this resolution and therefore requires limited horizontal scrolling in order to be able to read the product descriptions. This also creates problems with the number of products the user initially sees on page load. At 800×600 it appears TrapAWasp only offers 2 products while at 1024×768 the site offers only 4 products. Although users will scroll they tend to make judgements on whether a site has what they want without scrolling down a page. Jakob Neilsen a leading usability expert suggests that key content and products should be visible without the need for the user to scroll. One possibility would be to move the "view details" link to below the description so compressing the amount of space required for each product. Although this wouldn’t make all of the products visible it would help the situation as well as correcting the visual imbalance of white space next to the last two products.

Click here for more on scrolling and screen resolution

Browser compatibility

Although well over 80% of users’ access the World Wide Web using Internet explorer it is a mistake to ignore other browsers. Due to numerous security scares more and more users are turning to alternative browsers such as Firefox. Firefox has now captured well over 8% of the marketplace and is continuing to grow rapidly. Although not serious, http://www.trapawasp.co.uk/ does have some problems displaying in non-IE browsers. Some examples of the problems encountered include text being rendered with the wrong font and images being incorrectly positioned. Although it could be argued these problems do not affect the usability of the site it can knock consumer confidence leading to the belief that the site is in some way unprofessional.

Usability

Usability is an extremely important area of ecommerce design. If a user finds a site hard to use they will often choose to turn to the competition rather than struggle to overcome the obstacles they are facing. Generally the usability on this site is excellent. However, three issues should be addressed.

Delivery address

One minor but very frustrating issue with the checkout form is the need to enter address information twice. Even if you do not check the box marked "Check if you require goods dispatched to an alternative address" you are still required to enter the delivery address. Small problems like this can prove incredibly frustrating and should be avoided if possible.

Deteracat

Another potential cause of confusion is the sudden appearance of a link back to Deteracat on both the checkout and credit card pages. We have no problem in principle to the advert for Deteracat on the right hand side of these pages as cross selling is a good idea and one that should be encouraged. Our concern rather, revolves around the "continue shopping at Deteracat" button in the main body of the page. This immediately generates doubt in the minds of users at a critical stage in the buying process. The user is left wondering if they have selected the right products or whether they have been transferred to another site. We understand the motivation for this approach and the ability it gives the user to purchase products from both sites at the same time however we believe that the confusion this causes outweighs the benefits.

Addressing user concerns

One final issue with regard to usability is the "how to buy" section. It is good practice to have a section that addresses many of the frequently asked questions users have regarding online purchases, but we feel that there is still room for improvement. More information needs to be provided within this section with regard to security. Users are hesitant to give credit card and personal details unless they know it is secure. Although you do provide this information on the credit card page this is late on in the process and after the user has already given you significant amounts of information. On a similar vein it would also be wise to provide some form of privacy statement here. Again we are aware that this information is available from the footer but we do not believe this gives the information the prominence it deserves. Finally we believe that the how to buy section should include information on delivery times as this is another common question and a significant number of users will be unable to view the flash animation on the homepage. In short there needs to be greater emphasis placed on answering users queries and that this section may need a name change to accommodate this kind of information.

Accessibility

It is easy to dismiss accessibility as being an issue solely about the disabled however the truth is that it is a much broader issue than that. Accessibility refers to ensuring a web site is accessible to the widest possible audience including disabled users, those with poor vision or motor skills such as the elderly, and those working within various technological constraints.

Disabled users

Disabled users in the UK have a spending power of £50 billion annually according to the Disability Rights Commission. What is more this figure does not include the elderly who have poor vision or motor skills. Catering to this audience provides a unique way to separate you from your competition. That is not to say that you ignore your abled-bodied users. Rather, we recommend that you make some modifications to your site to make it more disabled-user friendly. There is not time in this report to catalogue every problem disabled users might encounter with this site, but we can say that the site fails to meet even the most basic level of international standards on
accessibility (WAI Level A or Priority 1).

Click here for more on accessibility and business

Technological barriers

As well as creating barriers to the disabled a site can also create technological barriers which force users to turn to the competition. One example of this is in the use of JavaScript. JavaScript has been used in order to carry out the validation of the checkout form. These scripts check that each field has been correctly completed and informs the user of any potential errors. The problem is that 5% of users do not have JavaScript available so these users simply cannot purchase from the site. This is the equivalent of turning away one in twenty customers who try to enter a shop.

Another technological barrier is download time. Although broadband has exploded over the last year still over 50% of users still access using dial up. http://www.trapawasp.co.uk/ takes approximately 17 seconds to download on a 56k modem compared with say http://www.waspbane.com/ which takes only 7 seconds to download over the same connection. With a 10-second difference per page and a 6-page purchase process that is a minute of unnecessary waiting. It may not sound like a lot but website users are incredibly fickle.

Driving traffic

You can have the best website in the world but if nobody is aware of its existence then it means nothing. Unfortunately TrapAWasp does not have the online profile it should have and this will be having a direct impact on the number of sales being made. The problem is the most pronounced on Google where TrapAWasp does not feature within the top 100 results on valuable keywords such as "wasp traps" (results on google.co.uk were slightly more positive but not by much).

Not that things are entirely doom and gloom. TrapAWasp does appear to be supported by a very effective Google Adwords campaign that goes a long way to redressing the balance of poor organic listings. It also has better ratings on sites such as MSN search (listed 7 th) and Yahoo (listed 8 th). However with Google owning 69% of the British search market it is vital that TrapAWasp receives a good listing there. Pay per click campaigns can prove very effective but they also dramatically reduce profit margins and so should only be seen as a stopgap or compliment to organic listings.

After comparing TrapAWasp against other sites listed under rated keywords it became obvious that the problem laid in the sites link popularity.

Google uses a complex algorithm to calculate your position in the ranking. However, two factors dominate that placement. One is keyword density and the other is link popularity.

Keyword density refers to the number of times a particular keyword/key phrase appears in the content of the site. For example the phrase wasp traps appears 17 times in your homepage giving it a keyword density of about 11%. After comparing this to other web sites we discovered that TrapAWasp is on a par with the competition. It is therefore fair to say that this is not the factor that is limiting your rating. That leaves the factor of link popularity.

Link popularity refers to the number of sites who link to TrapAWasp and the perceived popularity of those sites. The more sites that link to you and that you in turn link back to, the higher your ranking. However, it is not just about numbers. It is also about the perceived quality of the site that links to you as well. For example a link from the BBC website would be worth a lot more than a link from an unknown name. Another important factor is the words used in the link to you. The words "wasp trap specialist" will rank you better on the words "wasp trap" than a link using the words "The Jones family business". Currently not a single site listed on Google link to you and this explains your poor ranking.

There is, however, good news. Even the sites ranked in the top positions on Google have very little in the way of sites linking to them. It would not take many good quality links to move TrapAWasp to the top of Google’s organic listing.

Click here for more on link popularity

Below I outline a few techniques that would significantly help your placement on Google:

Look for link partners

Firstly look for as many sites that will link to you as possible and get them to add your site. One way of doing this is to search on Google for the words "add url" and a related keyword phrase such as "wasp traps". Doing so led me to this site: http://www.backyardgardener.com/ph/gardenproblem/gardenproblem.htm which actually has listed a wasp trap that is no long available! There is an add url link at the bottom of the left hand navigation that will allow you to add your site.

Copy the competition

Go to Google and search on a key phrase that is related to your site. Copy the url of the site listed number one in the list and then search again using the following search phrase "links: <url of competition>". This will show you all of the sites that link to that url. Contact each of those sites in turn and ask them if they will also link to you. Once you have done this return to Google and repeat the process all over again but this time with the next site down on the list.

Message Board seeding

Another very effective approach is to take part in message boards on related subjects such as gardening. When posting on these boards you can add a link back to your site and so improve your link popularity. However, a word of warning on this approach. If you just post adverts on peoples forums they will remove them and probably ban you for good. A more successful approach is to contribute to the forum providing useful advice and insights. Almost all forums allow you to add a signature to your post and it is in this signature that you include a link to your site.

Increasing keywords

Although this approach is not related to link popularity it is a vital component of increasing the traffic levels to your site.

One of the problems with securing high ranking is that short keyword phrases such as "wasp traps" are highly competitive. However, users often use much long search terms and it is sometimes easier to target these. The best way of targeting them is to include a lot of copy on your site that is related to the subject matter. This is normally achieved by adding an articles section on your site. This can prove very effective
. Take for example the Headscape site. Web design is a highly competitive sector and competition for the keyword "web design" is immense. However because we have an extensive archive of articles we gain a lot of traffic through longer phrases. Search on "how do I become number one on search engines" and you will see what we mean.

We would recommend that an article section relating to wasps is added to the site. This could build on the existing content which talks about how to find a wasps nest and general information about wasps.

Conclusions

This review has outlined a number of areas in which TrapAWasp could be improved. However, our recommendation is that increasing the levels of traffic should be the number one priority. Poor ranking on Google is significantly damaging the levels of traffic and with a minimum amount of work we are confident that the site’s ranking could be dramatically improved.

Terrorist attack on London

Posted in Working in web design on July 7, 2005 by Paul Boag

As I sit here watching the bombings of London unfold I feel a need to write a few words on what I am seeing.

Courage in the face of chaos

This is the third time I have stopped work to watch images of terrorism piped into my home via BBC 24. Whether it is 9/11, the Madrid bombings or here at home I am always amazed at the courage of individuals caught up in events.

I was in central London only yesterday and yet I can only guess at the terror people must be feeling amidst the obvious chaos there. However, despite the fear people must be currently experience there seems to be a calm determination that we will not allow this attack to cripple us.

An impressive response by emergency services

What has particularly impressed me in this attack is the rapid and organised response of emergency services on the ground. I suppose this attack has been inevitable for sometime due to our actions over the war in Iraq and our close relationship with America, so it should come as no surprise that our emergency services are ready to act. However theory is one thing, reality is another and I cannot help but be impressed at the way they have responded.

Misunderstanding the British

There is talk that this attack is an attempt to create a climate of fear in the British nation. Without wanting to sound overly patriotic I would suggest that this is an extremely hard thing to achieve in Britain. We are a nation that lived through the Blitz of World War Two and even though that generation has largely passed it is somehow apart of our national identity now. What is more my generation grew up under the shadow of terrorism from the IRA with attacks on Manchester and London being just two that spring to mind let alone the endless bomb scares that seemed to plague every city. I do not believe that a single coordinated attack on London will have any real effect on the way we live our lives.

Obviously I want to end this entry by saying my hopes and prayers are with those that have family and friends either, dead, injured or unaccounted for. There is a lot of talk about how the damage could have been a lot worse and the death count much higher. However that comes as no consolation to the people currently suffering from this attack.

National Trails web site launched

Posted in News on July 1, 2005 by Paul Boag

Today sees the launch of the Countryside Agency’s flagship website about the network of National Trails. This site is the culmination of month’s worth of work by the team at Headscape and I thought I would share with you a few of the highlights and lowlights of the project.

The brief

It was a challenging brief. Take twelve separate trail web sites and unify them under a common brand while still maintaining some sense of individuality. In addition to this, we had to conform to basic levels of accessibility, integrate a content management system that allowed individual trail officers to manage their own sites and come up with a user-friendly way of accessing a large database of accommodation and services.

Problems of interface

For me personally the number one problem to solve was the inconsistent user experience across these multiple trail sites. Users were faced with inconsistent positioning of navigation, different information architectures and conflicting terminology. The only sensible solution was to standardise the interface across all sites. Not only would this solve the user experience problems it would avoid the overwhelming challenge of having to come up with designs for twelve different sites!

Of course, there were two downsides to this approach:

This did not solve the briefs demand for a sense of individually on each site
It made it harder for the user to instantly tell which trail they were on

The solution was to give each site its own unique colour scheme. By doing this, you could associate very different feels with each site while also giving the user clear visual clues when they moved between different trails.

Web standards, the cornerstone of this project

Once I had decided upon on the approach it became obvious that a web standards approach would rapidly accelerate the development cycle. By separating content from design, I could create one basic layout and use cascading style sheets to change the colour palette of each site.

Web standards brought other benefits too. By separating design from content, we could easily address the need to conform to single ‘A’ compliancy in regards to accessibility. What is more we could easily supply an alternative printable style that ensured the site only printed certain page elements. I felt this was particularly important, as much of the information on the site would actually be useful to visitors while physically visiting the trail.

Finally, web standards allow us the ability to continually tweak and refine the design through the life cycle of the project and indeed after launch. This enables us to be much more responsive to feedback and work out any user interface bugs that might be spotted along the way.

The lowlights

I have to confess that normally I get to the end of the project like this hating the site because I have just worked with it too long. However, in the case of this site I do not feel that way. Of course that is not to say there aren’t a few things that still annoy me about it.

One of the biggest problems we have yet to overcome (although we are looking into some options) is the WYSIWYG editor we are using in the content management system. We seem unable to find an appropriate editor that produces clean code, which does not invalidate the occasional page. What is more there does not seem to be an editor on the market that forces the user into ensuring any content they add is accessible.

Another annoyance for me is that I have been forced to use some table layout on the homepage. This does not in anyway cause problems it is just a matter of principle on my part.

A crowning glory

Despite the odd annoyance listed above and a few hundred little bits and pieces, I am actually incredibly pleased with how this site has turned out. It truly is a crowning glory for Headscape and easily the best piece of work we have done to date (in my opinion). The size and complexity of the site as much as anything else makes it an incredible achievement. I have particular respect for Charlie Allen the project manager on the site who has dealt with 12 individual clients, and been responsible for the population of over 75000 web pages worth of content.

Another feature I particularly like are the flash maps created by Chris Sanderson one of our team of designers. He has come up with a brilliant way of giving people access to a large database of accommodation and services while also giving them a sense of the route the trail takes. This is an excellent example of how flash should be used rather than for nasty animated introduction with no skip button! Of course, in order to maintain accessibility we also had to provide a way of accessing the same information without flash.

Not that this is the end of our work with the National Trails site. There is always more to be done. The site will need tweaking and maintaining. There is site promotion to consider as well as new functionality to consider. Just because a site goes live does not mean it is ever truly finished.

The clients verdict

I couldn’t finish this entry without including a quote from an email I have just received from the client at National Trails:

I just wanted to give you my personal thanks for all your hard work on this site. I think its fabulous. I’m so proud of it and of the fact that we made the right choice of contractors to do the work!

Is it time to upgrade your web site?

Posted in Web strategy on July 26, 2004 by Paul Boag

How do you know when it’s time to upgrade your web site? Should you expect to have to upgrade your site regularly? This article gives you the answers.

How do you know when it’s time to upgrade your web site? You may be receiving recommendations to improve your site only months after it was initially launched. Can you really be expected to invest more money in your site so soon? The answer is probably not. However, it is important to understand that your web site is not a static entity that rarely changes. Like the Internet itself, your site should constantly expand and develop.

Why should I upgrade?

So why do I believe that your web site should be constantly developing? Surely once you have put your message out there that should be enough. Unfortunately things don’t work that way on the web.

Because brand loyalty is a thing of the past.

Unfortunately the very nature of the Internet is fast paced evolution. With millions of websites only a click away, the stakes are constantly being raised and somebody is always doing it bigger and better. Users are constantly expecting more and brand loyalty is a thing of the past. You constantly have to work to ensure your customers don’t click from you to your competition.

Because your site will appear neglected.

New possibilities on the web are emerging so rapidly that it is easy for your site to look out of date. Although it is not possible to keep up with every new innovation, you do need to keep up with the main trends. If you don’t, your site can appear to lack investment and that reflects badly on the perception of your company.

Because users behaviour changes

One of the consequences of the Internet being such a new medium is that users are still coming to grips with it. The way they navigate, read and interact with web sites is adapting to enable more efficient browsing. Users have come to anticipate navigation being found in a certain place. They have also grown to scan pages instead of reading them and to filter out unnecessary information such as advertising. It is important that your site takes into account these changing trends.

To ensure compatibility

Unfortunately a lot of mistakes were made in the early days of the web. A lot of web sites were developed without anticipating the rapid changes in technology. As a result the technologies employed were not always the best ones for the long term. In order to ensure that your web site can grow in the future it is necessary to upgrade now rather than later.

When to upgrade

So when do you upgrade? Below I provide a list of questions that should give you an indication of whether now is the time. If you find that the answer to many of these questions is yes then its probably time for you to improve your site.

Does your competition have functionality and features that you don’t have?
Does the design of your site look dated when compared to others?
Does your site fail to show new product lines or still feature out of date products?
Has your business model changed so that the content on your site is not relevant in many places?
Are users not staying on your site as long as they used to?
Are your visitors leaving after only a few pages?
Are the hits on your site failing because you are seeing less repeat traffic?
Are you seeing a drop in leads, contacts or sales through your web site?

Will I always be upgrading?

It can begin to feel like you are constantly making changes and improving your web site and to some extent that is how it should be at the moment. The Internet is still in its early stages and your web site has probably only been around a few years. People are still learning how best to use the web and the technology is still evolving.

However, it won’t be like this forever. As with any golden age, from the Industrial Revolution to the Renaissance, things will eventually slow down and equilibrium will be reached. Standards will be established and technology will develop less rapidly. Already many lessons have been learned and a longer term approach is being adopted.

Colour on the web

Posted in Design on June 16, 2004 by Paul Boag

How to choose the right colours for your website

Choosing the right colors for your Web site is a complex and often daunting task; many companies hire independent, special consultants just to devise color schemes that support and enhance an overall brand. However, if you have a sense of color harmony and understand the responses that certain colors can evoke, you can be your own color consultant and develop highly effective color combinations.

Before you begin mixing and matching colors, you must first have a firm understandingof your site’s message and goals. Once you understand what message you want tocommunicate, remember that perfecting a color palette is an iterative process,and above all, a creative one. Don’t be afraid to experiment with surprisingcolor combinations, but be sure to adequately test the results before unveilingyour product to the public.

Colour tips and guidelines

Understand your site’s message and brand

Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site’s brand.

Understand your audience

Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use a small number of colors in your palette

Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.

Use contrast for readability

Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.

Use grayscale to test contrast

When dealing with hues other than black, white, and gray, it’s sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.

Be aware of timeliness when choosing colors

Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.

Consider functional colors when choosing a palette

Don’t forget to establish functional colors for elements that communicate contextual information, such as headings and links.

Prepare for color differences on the Web

Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms .