188. Clearscape or Headleft?

On this week’s show, Richard Rutter, Jeremy Keith and Andy Budd join myself and Marcus for a round table discussion.

Play

Download this show.

Launch our podcast player

Every once in a while it is good to do something different. This show is one of those occasions.

Spy Vs Spy Image

This week Andy, Richard and Jeremy from Clearleft came to the Barn to hang out with Headscape. While they were there we decided to record a podcast.

The show is largely unscripted and it seemed unfair to ask our team of volunteers to transcribe an hour long 5 way conversation! As a result, I am afraid we are lacking our normal show notes. I hope you understand.

That said, I can tell you we covered the following topics:

  • The differences between the working practices of Clearleft and Headscape
  • The beginnings of the two companies
  • The pros and cons of being a total service company like Headscape or specialising like Clearleft
  • The importance of passion in what we do
  • Deciding when to adopt new innovations
  • Whether locations affects success
  • Our plans for the future

We really hope you enjoy the show and we would love to hear your thoughts on the subjects discussed. Please make use of the comments below.

How to become an innovator

Whether you are a website owner, web designer or web developer you need to innovate. But how do you make it happen?

Innovation is at the heart of the web. Innovation is about finding new ways of doing things, building on the work of others and moving it forward. Without innovation, whether you are a designer, developer or website owner, you will struggle.

If you are not innovating you are following, and you do not want to be following the competition. Your competition maybe other freelancers, websites or the person who is going for the same job as you. Whatever the case you do not want to be following them, you want to be one step ahead of them.

How then do you learn to innovate? At the heart of innovation is a desire to challenge preconceptions.

Challenging preconceptions

You can only innovate if you successfully challenge existing best practice. This begins by asking the question “Why not?” Why can’t you do something? Why is something supposedly wrong? Depending on your role these questions may vary. For example:

  • As a web designer you might ask – Why does the site I am designing need navigation?
  • As a web developer you might ask – Why can’t CSS enable me to rotate text?
  • As a website owner you might ask – Why do I need a website at all? Why can’t I just use sites like Facebook and Twitter?

If it wasn’t for people willing to ask “why not” the web would be a poorer place. For example if it wasn’t for people like Jeffrey Zeldman and Eric Meyer asking why can’t we use CSS, we would still be working with HTML tag soup.

Equally if it wasn’t for people like Jeremy Keith we would still view Javascript as an evil tool that creates popups and inaccessible navigation.

Image of a pop-up ad

Of course, there are often good reasons why we cannot or should not do something. The question then becomes “are there ways to work around these problems?” That is where innovation truly begins and the only way to answer that question is to experiment.

Innovation through experimentation

The only way you can innovate is to experiment. The problem is most of us have forgotten how to experiment. We are so focused on deadlines and the bottom line that we feel “playing around” is a waste of time and money. However, it is not. It is vital for staying ahead in what is a very competitive and fast moving medium.

If you are to innovate you need to overcome two hurdles:

  • Finding time to experiment
  • Finding ways to experiment

Let’s address each in turn starting with finding the time.

Finding the time to experiment

We all know that Google encourages their employees to spend 20% of their time working on personal projects. This is their opportunity to experiment and innovate. However, Google is an enormous company sitting on big piles of cash! They can afford to “play.” Most of you will believe you cannot afford to do that!

In reality carving out some time for experimentation is not as hard as you think. Nobody works 100% of they’re working day. We all need breaks from normal work. Grinding away for an entire day is actually damaging to productivity. Working like this tends to take longer than if you take breaks and have time to play.

Experimenting with new ideas can be fun. It is exactly the kind of break you need from normal work. It makes the down time you have anyway more productive.

There is also a lot of evidence to suggest that shorter, more intensive periods of work actually allows you to get more done and to a better standard. Take for example Carsonified that work a 4 day week. They seem to suggest that as much gets done in 4 days than they would in 5. What if they spent the 5th day each week playing and experimenting? Or alternatively, what if they took an hour out of each day to work on new ideas? They would be able to do the same level of work but also gain time to experiment.

We spend our entire lives feeling like we don’t have enough time but in reality that is not true. If we all collectively watched 1% less TV we would be able to create 10,000 wikipedias. Makes you think doesn’t it.


Clay Shirky challenges among other things the belief that we lack time.

So lets presume you have committed to carving out some time for experimentation. How do you actually do it?

Ways to nurture experimentation

Its hard to define a single approach to experimentation. It very much depends on the type of work you do. The way you innovate as a designer is naturally going to be different to that of a website owner or developer. However there are some basic approaches that apply to pretty much everybody. These are not specific ways to experiment, rather they are general approaches you might wish to consider.

Experiment in a sandbox – Create a closed area where you can try out new ideas. This could be a development server or a closed beta website. This is the perfect place to try out new designs, experiment with site structure and content or play with new coding techniques. It is safe and private. Nobody needs to ever see your disastrous attempts at innovation!

Experiment on users – As your confidence grows with experimentation you might want to start exposing some of your ideas to real users. For example you might want to try some user testing with friends or even letting people into your closed sandbox. Admittedly experimenting on users applies more to designers and website owners. However it is useful for developers to get feedback from their peers. You will often find that allowing others into your experimentation process will spark interesting ideas and discussions.

Experiment on live – When did we get so precious about our sites that we are hesitant to explore new ideas on our live sites? Admittedly you might not want to do this on a high profile ecommerce site where the slightest mistake may cost millions. However, for many of the sites we run, it would be quite possible to try out ideas with no measurable impact. After all one of the best things about the web is that sites can easily be changed if things go wrong.

This trend towards conservatism has even extended to web design and personal sites. When was the last time you saw a personal site that really pushed the boundaries? They are few and far between these days. Even when sites do (such as the redesign of 24 Ways) they get criticised. I believe this is wrong. We should be innovating even if we fail. And we certainly shouldn’t be afraid to do so in public.

Screenshot of the 24 Ways website

Conclusions

Although I have focused in this post on the barrier of time and knowing how to experiment, I actually believe the biggest problem is fear. We fear wasting time on ideas that fail. However most of all we fear of being ridiculed for trying an idea that didn’t work. That is a real shame. Without people will to stand up and trying new things the web will never progress.

Ill leave you with these wise words from Winston Churchill:

Success consists of going from failure to failure without loss of enthusiasm.

Amen!

183. Inspired

On this week’s show: Paul shares 3 ways to make your site stand out from the crowd. Matt Curry introduces us to Google website optimiser and Lyle Barras reviews Dropbox.

Play

Download this show.

Launch our podcast player

Housekeeping

A couple of random pieces of housekeeping this week.

Sponsor SXSW

First, we are looking for some Micro sponsors for this year’s Great British Boozeup. In case you don’t know the Great British Boozeup is a party that Headscape and Clearleft have thrown for the last few years at SXSW.

This year we are looking for some additional sponsors. So if you are a company interested in reaching out to the web design community and have £500 to spend, drop us an email and will look at making you a sponsor.

We want to showcase your work

Second, I really want to start showcasing upcoming members of the web design community on Boagworld. Therefore, if you have written a great blog post that you think Boagworld readers would like, drop me a line with a link to the post and we will look at reprinting it on Boagworld. Obviously we will link back to your own blog and publish a little bio about yourself.

Back to top

News

6 Steps to Creating a Unique Selling Proposition

One of the first questions we ask new clients before beginning a site redesign is “what are your unique selling points?” Of course in reality it is extremely rare to find an organisation that have truly unique selling points. However, every organisation should have a clear idea of what their distinguishing features are. What are the things that makes them stand out from the crowd.

What surprises is how few clients know what their USPs are. This is fundamental stuff and yet many organisations fail to address them. Whether online or off an organisation needs to be able to clearly articulate what sets them apart.

There is an excellent post on Sitepoint this week entitled “6 Steps to Creating a Unique Selling Proposition” that kinds the reader through the process of establishing their USPs. The six steps include:

  • Describing your target audience
  • Explaining the problem you solve
  • Listing the biggest distinctive benefits
  • Defining your promise
  • Combining and reworking your promises
  • Cutting the whole thing down into a single statement

It is a great post and definitely worth a read if you are a website owner trying to communicate what your organisation is about online.

Building a blog with HTML 5

Last week I was at the Future of Web Design Tour in Bristol and was fortunate enough to hear Bruce Lawson talk about building a blog with HTML 5. It was a real eye opener.

Many of us have the perception that HTML 5 is a technology we will work with in the dim and distant future, when all the major browsers fully support it. However, that is not the case. Browser manufacturers already support many of the elements in HTML 5 and handle gracefully many of those they do not. The result is that we can start building sites using HTML 5 now.

In Bruce’s talk he built a basic blog live on stage demonstrating many of the new characteristics of HTML. It was an amazing demonstration that significantly improved my understanding of how this new specification would work in practice.

Unfortunately the talk is not online yet. However in the meantime Bruce has released an article on HTML 5 Doctor which covers exactly the same subject.

This is a ‘must read’ if you code HTML. There really is nothing stopping you using HTML 5 right now. However, if you are still to be convinced listen to next week’s show where we plan to interview Jeremy Keith on exactly this subject.

Colour communicates meaning

Colour is one of the most powerful tools in a designers arsenal. Colour can have a profound impact on how we respond to design and significantly influences our behaviour.

However, it is often an area that is underestimated by website owners. They view colour as a personal preference not as something that we respond to collectively. That is why I was so pleased to see Rob Mills post “How Colour Communicates Meaning.”

The post is a great introduction into colour theory and the meanings that are communicated through your choice of colour. The post looks at:

  • How colour affects our mood
  • How different colour communicates different messages
  • The cultural significance of colour
  • How colour is inspired by our surroundings
  • The political and religious associations of colour

It is a great post that introduces the reader to the world of colour theory.

With all of that in mind it is unsurprising that picking a colour palette can be tricky. One approach used by designers is to use a key image or photograph as the basis for a colour palette. Another post we came across this week shows you how to use Kuler as a tool for doing exactly this. So next time you are struggling to select a colour palette checkout this Sitepoint post on how to use Kuler to pick a palette from an image.

The Seven Deadly Sins of Web Project Management

TheSamBarnes.com is a great blog about web project management. We have mentioned it before on the show and it is certainly one of my regular pit stops.

Web project management is not the most exciting of subjects, but one that to some extent we all have to deal with. Whether you are freelancer running your own projects or a website owner dealing with politics and external suppliers, there is no avoiding project management.

A new series on the blog particularly caught my eye. It features the seven deadly sins of web project management. At the time of writing there were only two posts dealing with four ‘sins’. Nevertheless it is shaping up to be a great series.

If you ever find yourself managing projects this is a series you will want to read.

Back to top

Make your website stand out from the crowd

This week we discuss how too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

Read 3 Ways To Make Your Website Stand Out From The Crowd

Back to top

Listeners feedback:

A/B Testing

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

I’m Matt Curry, Head of New Media for apetito, and for my sins I’m one of Paul’s clients. We’ve worked with Headscape for around 5 years now, predominantly on WilthsireFarmFoods.com, an ecommerce site with a unique elderly customer base, which if you subscribe to the podcast, you’ll know a fair bit about by now.  As at WiltshireFarmFoods.com we have a healthy obsession with conversion rate and website optimization, so Paul’s asked me to respond to a reader question this week. How exciting.

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

Google Website Optimiser is a tool used, unsurprisingly, to optimize the conversion rate of your site. Now every site ultimately wants a user to do something, be it buy a product, subscribe to service, make a donation or something simply forwarding the article to a friend – if your site has a clear goal, Google Website Optimiser allows you to perform 2 types of tests on your website content, A/B Split tests and Multivariate Tests.

In the case of 37 Signals, they were seeing if Website Optimiser could help them increase the conversion rate of their paid plan signup page – they were testing different variations of copy for the Heading and subheading of the page, to see which combination worked the most effectively.

This is of course nothing new, and indeed, some platforms such as Demandware have content testing built in, alternative analytics packages such as Omniture or Coremetrics also do this, and looking at email content, many ESP’s such as Pure allow you to test multiple subject lines and broadcast times. At Wiltshire Farm Foods, being as obsessed with conversion rate as we are, we’ve performed numerous tests, such any rate changes a new design brings, testing changes to Average Order Value during a price led promotion, and checkout abandonment rates given different variations of microcopy.

Whilst simple A/B testing can be performed in easier ways – remember a simple landing page conversion test can be done by varying destination address in your Google Adwords, Google Website Optimizers power comes from it’s multivariate testing suite. This allows you to perform tests on variations of your content, as in the example from 37SIgnals, to see which combination works better at driving your visitors to action.

However, if you have a particularly complex site, as we have, Google Website Optimiser can be frustratingly limited. For example testing a new product detail page layout across the site – when you have friendly URLs in place, which we do via an isapi rewrite,  can be rather difficult. Google Website Optimiser is very strict on the criteria needed to complete a test, and if you most of your content is dynamically generated, be prepared to write considerable additional code to ensure you’re calling the correct tracking script for each experiment.

If all this sounds too much for you, remember many such tests can be done using User Defined Variables in your Google Analytics. I dearly love the Advanced Segments part of Analytics, and despite “still” not being able to overlay segments, it can tell you a great deal about your site. So, for example, for an A/B test based on a redesign of dynamic content such as a Product Details page, you could set the variable to “New Design” or “Old Design”, and track goal conversion from there.  Just remember to drop a cookie to ensure a consistent experience. Being able to set visitor variables like this in code, rather than having to rely on the strict requirements of Google Website Optimiser, means your open to test a great deal more.

Remember, that if you’re testing a radical change to your website, you should expect an initial drop in conversion – users tend not to like change! You may wish to only test the new design with only a small percentage of your traffic, and increase the percentage as you become more confident. When we launched the new Wiltshire farm foods website mid February, we started with only 1 in 20 visitors seeing the new design, and gradually (or not!) increased it as we saw the positive effect on conversion rate it had.

And of course, nothing even got to this stage without User Testing – but that’s a topic for later!

Personally, I’m surprised by the significant increases in conversion that 37Signals had – how many of us even read the headings of such pages – you normally can’t expect vast jumps in conversion rate unless you are radically changing content.

The most successful variant 37Signals tested was the one that communicated no commitment, a minimal time cost – signup takes less than 60 seconds, and a delayed monetary cost with a 30 day free trial – yet giving immediate utility to the user.  I’m not exactly shocked it won! If you haven’t read Richard Thalers Nudge, which deals with incentives & choice architecture, then I heartily recommend it.

Of course, any good website copywriter would be able to tell you this, without copious testing.  There’s certainly a danger, especially when you are looking at testing and changing copy that each page may end up with a different tone of voice, and your site could easily come across as schizophrenic. If you’re serious about conversion, employing someone to develop an audience-appropriate tone of voice is very important.

I’d be interested if 37Signals play around with the words “Free Trial” – since with nowadays promotionally savvy audience, these words can have negative connotations.

Finally, I would say, as a caveat, don’t get wrapped up in statistics, it sounds corny, but analysis paralysis can happen, getting so wrapped up in each little percentage point increase that you forget the bigger picture. We’re all clever people, we hopefully know our audience, what works and what doesn’t, and we should trust our gut instincts more.

A review of Dropbox

Lyle Barras has been kind enough to send us an audio review of Dropbox:

Hi Paul and Marcus, my name is Lyle and I’m a hobbyist web developer. I’d like to give a quick review of an online tool called dropbox and a little about the way I use it.

Dropbox is an online storage device. You simply sign up for an account at www.getdropbox.com; the free accounts give you 2GB of storage, and then download the little application.

You can download as many copies of the application as you want so that you can sync up as many computers as you want and the really great news is that it’s Mac, Windows and Linux compatible. I have tried it on all three and it works seamlessly. There is also a pretty cool web interface if you happen to be on a machine that doesn’t have the app installed.

As soon as you place a file or folder into the dropbox then it sync’s to the other machines you have set up and the file is there almost immediately.

If 2GB isn’t quite enough you can upgrade to one of the two paid accounts. Pro 50 gives you 50GB for $9.99/month and Pro 100 gives you 100GB for $19.99/month. I think the Pro 50 is pretty good value if your storage need is big enough.

At any time you can refer the tool to your mates. If they then sign up, even for a free account and download the app then you get another 250MB of free storage and so do they. To date I have referred two of my mates and got 500MB free.

I have found one problem with dropbox. When I upgraded my iMac and MacBook I found dropbox to be a bit glitchy and crashy. I did a bit of Googling and found that dropbox had already released a new fixed version of the app.

To pinch a bit of the advertising guff from the site

Dropbox replaces:

  • Emailing file attachments to yourself and other people
  • Using USB drives to move files between computers
  • Renaming files to keep a history of previous versions
  • Complicated backup software
  • FTP servers, system-specific sharing methods, Network Attached Storage (NAS)

As I said at the beginning I’m a hobbyist web developer. I had been using a memory stick to carry round my work as I can really justify one of these posh versioning tools. I was sick of thinking “Right I’ll do a little bit” and find that I have left the drive at home or in the office.

Dropbox replaces all that. I just use it as my memory stick and it’s always there I don’t even need to be connected to the net as long as I have sync’d the machine recently.

I’m utterly sold and couldn’t imagine not having my dropbox now.

Thanks for your time guys, keep up the good work and keep up the dodgy jokes Marcus.

Back to top

3 ways to make your site stand out from the crowd

Too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

I recently gave a presentation entitled the “10 Harsh Truths About Institutional Websites“. One of the point I made was that all Higher Education websites look the same. Nobody is innovating when it comes to design.

Screen captures of 9 higher education websites

However, the problem is not just limited to HE. Almost every sector has a design style. Why is that?

I believe there are 3 reasons:

  • Laziness – It is easy to follow the crowd blindly. To stand out you must innovate and challenge established practice. That takes effort and a lot of thought.
  • Fear – A fear of getting it wrong. What if you upset your users? What if you misjudge what they will like? Its safer to do what others have done because that has been proven to work.
  • Shortsightedness – Too many organisations only look at their own sector for inspiration. They look at what the competition is doing and copy it.

The problem is that if you follow the competition, you will always be one step behind. At best you will be invisible, at worse you will be a poor shadow of your competitors. To create a site design that stands out from the crowd and resonates with users you must take some risks.

Unfortunately this can be hard to do. We can become blinkered in our thinking, convinced a site should look a certain way and have a particular kind of layout. However, there are plenty of examples of sites that break this mould successfully.

Screenshot of Biola Undergraduate website

How then do we join the ranks of designers and website owners who think differently? I suggest there are three ways:

Constantly seek inspiration

The first step in thinking differently is to expose yourself to different types of design. It is easy to only look at your own site and that of your competition. Broaden your horizons.

A lot of people start with CSS galleries and they certainly have their place. However, in my experience you have to work through a lot of crap to find the truly stunning sites. Instead I subscribe to sites like Smashing Magazine, Webdesigners Depot, and Sitepoint who tend to do a lot of “Top 10 inspirational sites” posts. In these posts the author has done all the hard work for you by weeding out the dross and leaving only the best examples.

If you are looking for a specific design style I would also highly recommend Design Meltdown that organises inspirational web sites by categories such as colour, structure, elements and style.

But why stop there? Why limit your sources of inspiration to other websites? What about photography, architecture or print design. ffffound.com is an excellent source of inspiration. It is a massive collection of imagery from every source imaginable, bookmarked by members who consider it interesting. Another similar site is Emberapp which contains illustrations, logos, icons, typography and much more.

Finally, I would also encourage you to carry a camera and look for inspiration in the world around you. Once you get into the habit it is amazing how much inspiration can be found in everyday things. Even sitting here at my desk there are the colours of my houseplant’s leaves, the book cover next to me and the typography on my energy drink. Inspiration is everywhere if we get in the habit of looking for it.

A photo of the houseplant on my desk

But the problem is not just inspiration. It is also the fact we self censor.

Stop designing websites

Part of the reason we struggle to create original design is because we self censor. Recently I shared my personal inspiration library with the designers at Headscape. The response I got back from one of our designers was fascinating:

A quite beautiful collection of elements none of our clients will have the courage to ever use!

It is certainly true that Headscape work for some very conservative clients. However, there is a danger we give up without trying. It is easy to slip into the same old routine because we have convinced ourselves that nothing more is possible. We have a navigation bar, header, footer and content area in the same old places because we know that will get approved.

Even if we believe a client might approve something more adventurous, it can be hard to change our mindsets. After all, websites are meant to look a certain way… aren’t they?

When I was recently discussing this problem with Mike Kus from Carsonified he came up with a brilliant suggestion:

Next time you brief your designers tell them they are designing a poster rather than a website.

Although I am not sure my designers would appreciate being lied to (and I don’t think Mike was suggesting it seriously), it is a superb idea.

Too often we are constrained by the web. The need to add the same old elements and be confined by the same screen resolution. Letting go of that and designing for a different medium (such as a poster) is a superb way of encouraging creative thinking.

In Mike’s article “Web Design is a Journey” it surprised me how long it took his designs to look like an actual website. Where most of us start with a grid or wireframe, Mike starts with an image or other graphic element. He then shapes those elements into a website. It is almost as if he squeezes his design down into the constraints of a website. He certainly does not self censor.

The Stackoverflow website designed by Mike Kus

Of course, sometimes you will loose the battle and a client will insist on a super conservative design. What then?

Surprise and delight your users

Sometimes its just not appropriate to deviate too much from the norm. Does that mean your website is doomed to blend into the crowd? Not neccessarily.

Even when working on the most conservative of designs there is an opportunity to surprise and delight users in such a way that your site is memorable.

Paul Annett from Clearleft gave a stunning talk at SXSW 09 entitled “Ooo… that’s clever!”. He describes it as follows:

My talk was about design delighters and Easter eggs, about hiding clever little gems in websites which people will find, enjoy, and share with their friends. The benefit of this is an intangible viral marketing effect which will help engage your audience and build hype around your product or service.

Adding these little touches makes your site memorable and can be applied to almost any site, no matter how conservative th

e design. One example Paul gave was of innocent smoothies. Although the packaging of these drinks is certainly nice, they do not necessarily strike you as extraordinary. However, look at the bottom of a carton and you will be greeted with one of a number of amusing messages.

View of the bottom of innocent smoothy carton where you can read the words 'Stop looking at my bottom'

Image Credit: Duncan

Once you have read one of these little messages you are unlikely to forget innocent smoothies.

Paul’s talk is packed with examples like this and I highly recommend watching it.

Just by adding some of these little extras you separate your site from the competition in the minds of your users. You become memorable.

Conclusions

At the recent FOWD Tour, Elliot Jay Stocks commented on how boring most websites are, and how we need to innovate. I totally agree. We need to start exposing ourselves to more inspirational design, approaching the design of websites from a different angle and adding features that delight our users. We should not simply settle for what we know works.

10 ways to Battle Site Bureaucracy

Running a large institutional website is frustrating. Your site is often held back by internal politics and bureaucracy. Let me show you 10 ways to cut through the crap and get results.

My recent post ‘10 harsh truths about corporate websites‘ generated a huge number of comments both on my own blog and on Smashing Magazine. I seemed to tap into an undercurrent of frustration that exists within the industry.

However, although there was a lot of agreement about the points I raised, there was also resignation. There was a feeling that little could be done to overcome these problems because institutional websites are too entrenched in bureaucracy and politics.

Although I can sympathise with this position and have myself suffered from the problem, I am not one to give up! Over the last decade of working on these sites, I have developed a number of techniques which (sometimes) help to smooth their evolution. Hopefully they will help you too.

1. Educate and inform

At the heart of any technique for dealing with politics and bureaucracy has to be education.

Although there are occasions when people are just ‘trying to be difficult’, in most cases their objections are based on ignorance.

You cannot expect people to be as knowledgeable as you about the web. If you want people to make informed, sensible decisions you must educate them.

Education is also not just about giving them the background to a specific decision so they understand ‘why you are right’. It is about increasing your organisations general understanding of the web.

Run workshops, publish email newsletters, do anything that informs people about the latest web innovations. Increasingly I am invited into organisations to run short seminars on everything from accessibility to facebook! This kind of ongoing education means people are better informed when tough decisions need to be made.

2. Hold stakeholder interviews

One technique that we find very effective at Headscape are stakeholder interviews.

Stakeholder interviews involves meeting individually with anybody who has a ‘stake’ (interest) in the website. This is typically members of the marketing and IT teams, as well as departmental heads and senior management. However it should also include suppliers, customers and users of your website.

These one-to-one meetings provide two opportunities…

  • Requirements gathering – It is easy for website owners to live in isolated bubbles, separate from the rest of the organisation. These meetings provide an opportunity to understand the real needs and objectives of others within the business. It will highlight ways that your website can help, which you might not have previously considered.
  • To be inclusive – Stakeholder interviews offer a ‘political benefit’ as well. By meeting with people individually they feel included in the process. They feel their opinions are valued and listened to (which they should be!). People are much less likely to object if they have been consulted before a decision is reached.

People often complain about the website in stakeholder interviews. Allow them to do this and avoid becoming defensive. They will feel more favourably towards you and your website, if you listen to their concerns. We all like to be heard.

3. Avoid group committee meetings

The key to stakeholder interviews is their one-to-one nature. Group meetings can be very destructive. This is for a number of reasons…

  • The need to defend – In large organisations that have internal politics, everybody feels the need to defend their own ‘turf’. If somebody criticise the website, you are forced to defend it to ‘save face’ in front of others. Equally others feel the need to defend their own positions for the same reason.
  • A tendency to compromise - When two individuals in a group reach an impasse, the others try to find a compromise. This kind of ‘design on the fly’ inevitably leads to a bland solution. It will neither offend or inspire anybody. Unfortunately, to create a successful website you need to make tough choices that some will not like. A group approach does not lend itself to this.
  • A loss of control – It is easy for you to loss control in a group meeting. One-to-one meetings work better because you can divide and conquer. Only you know what the other stakeholders said. This puts you in charge and allows you to ‘cheery pick’ the feedback you receive. In a group meeting things can easily get out of hand and decisions are made without your buy-in.
  • The dominant individual - Every group has one or two dominant individuals. These are the people who bounce the rest of the group into agreeing with them, forcing their agenda through. A dominant individual drowns out quieter members, who become resentful later that nobody listened to them. Meeting with people individually prevents this because the dominant individuals cannot force their point of view on others or overwhelm quieter ones.

One cannot expect a larger organisation to run its website without some form of committee. However, there is no reason why that committee needs to meet as a group.

4. Target your influencers

Talking of dominant individuals, another successful tactic is to target influencers.

An influencer is somebody that others respect and follow. Their opinion is incredibly valuable and if you can sway them to your cause, others will fall into line. However, be careful not to confuse dominant people with influencers. A dominant person will ‘bully’ others into publicly agreeing with them. An influencer will fundamentally alter somebody’s attitude.

Identify who influences your decision makers and speak to them personally. This person might not even be a decision maker themselves, but they carry enough clout to make them worth your time.

When you meet with your influencers, really listen to what they have to say. They often have valuable insights which may change your strategy significantly. Do not go into a meeting with an influencer simply intent on pushing your own agenda. Instead try and shape your approach around their perspective.

If you get an influencer enthusiastic about your project it can make a huge difference.

5. Use third party experts

A variation on the influencers technique is to back up your ideas with third party expert opinion. This can be done in two ways…

  • Reference the work of a third party expert – For example, if you wish to discourage internal stakeholders from overwhelming users with options on the homepage, you might refer them to Steve Krug or Jakob Nielsen who have both written on the subject.
  • Hire a third party expert - I often find myself brought into companies simply to confirm what in-house staff have already been saying. Unfortunately, decision makers often doubt the opinion of their web team because they either undervalue them or feel they are pushing a hidden agenda. An independent expert can add creditability to your opinions.

Of course, for this approach to work the stakeholders need to respect the expert. There is no point referencing Steve Krug or hiring Jakob Nielsen, if the decision makers have never heard of them. It is often necessary to sell the credibility of your expert first.

6. Rely on evidence, not opinion

Sometimes it is better to avoid personal opinion entirely (even if that is the opinion of an expert). In such cases statistics can be your friend.

Nothing is more powerful for driving home a point than referring decision makers to Google Analytics. However web stats are not the only evidence you can draw upon. Others include…

  • Surveys and polls are an excellent way of getting feedback from your users that can then be presented to decision makers.
  • Twitter search and Google Alerts can be used to gauge how people view your site and brand. These can be powerful testimonials to present decision makers.
  • Heat maps can be used to take some of the subjectivity out of design.

Of course one of the most powerful evidence you can present is the results of usability testing.

7. Focus on the user

As website owners we know that a successful website is user focused. However, not all our decision makers will understand this and even those who do may get ‘distracted’ sometimes.

It is therefore important to constantly move our decision makers away from their own personal preferences and back on the needs of users.

User testing is one way of doing this. Being able to show decision makers how real users interact with your website is incredibly powerful. It helps them empathise with the needs of users rather than thinking only about their own agenda. Play them video clips of users interacting with your site or at the very least quote them the feedback of users.

However, even if you involve decision makers in user testing, they can still get caught up in their own agendas. One gentle way of preventing this is to word your questions carefully. When you need a decision makers response to something don’t ask…

What do you think?

Instead ask them…

How do you think users will respond to this?

This will keep them focused on the needs of users.

8. Control the feedback

As well as wording questions carefully there is also a need to control the feedback you receive. This is important if you want the decision makers to make considered decisions.

Take for example design sign off – never ask a decision marker if they like a design. It is too broad a question that will lead to a plethora of uninformed and ill considered responses. Instead ask them more specific questions such as…

  • Does the design conform to the brand guidelines?
  • Does the design meet the needs of our users?
  • Does the design emphasis the right content?
  • Does the design have a clear call to action?
  • Does the design fulfil our business objectives?

This prevents the decision maker from falling back on their gut reaction (i like it / I dislike it). It forces them to focus on the issues that define whether the design is successful or not and ignore personal preference for specific colours or layout.

Of course, sometimes you will not like the answer to these specific questions. When that happens you need to ask why.

9. Ask why

This is probably the most powerful of all the techniques I have listed here and yet by far the simplest.

When you face opposition to your plans, always ask why. Too often we switch to defensive mode and focus on better communicating our own position rather than understanding the opinion of the person opposing us. This is a mistake.

The question why is powerful for three reasons…

  • It informs – Often the objection raised initially is not the true underlying issue. By asking why you get to the root of the problem and that allows you to offer alternative solutions. Asking why ensures you have all the information required to deal with the issue.
  • It can confound – Most of us make decisions based on an intuitive leap. We do not always think through our decisions and so find it hard to articulate the underlying reason. By asking why you force people to stop and consider their logic. When they struggle to express the underlying reasons, they weaken their position.
  • It shows interest – By asking why you allow them to have their say. You demonstrate an interest in their opinion and establish empathy with their point of view.
  • Ultimately asking why avoids the disagreement from turning into an argument with entrenched position.

    10. Avoid confrontation

    I avoid confrontation at all costs. Going head-to-head with somebody especially in front of their colleagues achieves nothing. You can rarely get somebody to shift their position through confrontation.

    Once a disagreement escalates into a confrontation, nobody can afford to ‘lose face’ by backing down. It becomes a matter of ego, where pride dictates the outcome. Your website will almost certainly be caught in the cross fire.

    A better approach is to agree. The word yes can be immensely powerful. Whenever somebody suggests something to me, no matter how stupid, I will do the following…

    • Acknowledge and thank them for their input.
    • Say yes we could do that.
    • Go on to explain the consequences if we did.
    • Offer an alternative which could achieve the same aims.

    In short I tend to go around problems rather than bashing my head against them. I always look to work with others rather than against them.

    Conclusions

    So there you go, 10 techniques for battling site bureaucracy. I do not claim these techniques are foolproof. Neither do I suggest they are always appropriate. However, they are useful techniques in your arsenal which you may want to call upon from time to time.

    Finally, this is not a definitive list. I could have written more but then it wouldn’t have been a ‘top ten list!’ However, I would be interested to hear what works for you. Post your techniques in the comments.

    150. User Manipulation

    On this week’s show: Liz Danzico talks about user research. Paul explains how to create an effective call to action and we discover how one button cost $300 million in sales

    Download this show.

    Launch our podcast player

    News and events

    The $300 Million Button

    Our first news story is an incredibly tale from usability expert Jared Spool, which really shows the power of usability testing.

    In the post he writes about a client who had a fairly standard checkout process on his website. The process began with a login form:

    The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password.

    It is the kind of form I have seen on many ecommerce websites. This feature, which had been designed to help repeat customers, created two distinct problems:

    • New users resented the idea of having to register. One user said: "I’m not here to enter into a relationship. I just want to buy something."
    • Repeat users rarely remembered their username or password. They wasted substantial time guessing, before eventually resorted to creating a new account. In fact after examining the database Jared discovered that 45% of all customers had multiple registrations. Some did go as far as clicking on the forgotten password link but of those only 25% went on to place an order.

    In the end the site was redesigned, allowing the user to continue without registering. Within a year this created a $300 million increase in sales.

    Of course $300 million is a meaningless figure in itself. It is the percentage increase that matters. In this case is was a 45% increase. That is a staggering number and one that really drives home the importance of testing with real users.

    Read the ‘$300 million button’

    The UK government and graded browser support

    A couple of weeks ago I wrote about the importance of graded browser support. In my post I explained how we should not limit our support to the browsers we test and how it is unrealistic to push for identical support across all browsers.

    This is an approach which has been adopted by the likes of Yahoo! and the BBC for some time, but which now also extends to public sector website in the UK.

    According to The Web Standards Project the rules surrounding browser testing on public sector websites have been changed to better reflect best practice in graded browser support.

    Changes include an emphasise on functionality over identical layout across browsers (paragraph 39):

    You should check that the content, functionality and display all work as intended. There may be minor differences in the way that the website is displayed. The intent is not that it should be pixel perfect across browsers, but that a user of a particular browser does not notice anything appears wrong.

    As well as support for progressive enhancement (paragraphs 17-18):

    You should follow a progressive enhancement approach to developing websites to ensure that content is accessible to the widest possible number of browsers.

    This is excellent news and certainly provides a great reference for UK designers and website owners looking to convince others of the importance of graded browser support.

    BBC Graded Browser Support Table

    Read the UK government guidance on browser testing

    50 Illustrator tutorials

    List of Illustrator tutorials

    From development to design now, and a list of 50 tutorials that help you get your head around Adobe Illustrator.

    The list is compiled by UK web designer Chris Spooner. He echoes my own experiences when he writes:

    Adobe Illustrator can be a little tricky to get your head around, particularly after getting used to the workflow as applications such as Photoshop. The difference between layer use and creating and editing shapes can be especially strange at first hand.

    I am a Photoshop man and I have found it very difficult to make the transition to a vector based world, so this list was particularly appealing to me.

    Its a great list that you will definitely want to check out, if like me you have never got to grips with Illustrator before.

    Read 50 illustrator tutorials every designer should see

    A new approach to PNG Support

    Finally today I would like to draw your attention to a new technique that has been developed by Drew Diller for using PNG transparency in IE6.

    Unlike previous techniques this one allows you to use PNGs as background images instead of just as IMG tags. This opens up a world of possibilities and overcomes one of the most annoying limitations of IE6.

    This minor miracle is achieved not by using AlphaImageLoader as has been done in the past, but with VML.

    Implementation seems fairly straightforward and involves adding a Javascript library to your page. Because this is for IE6 only you can embed the code within a conditional comment. This means other browsers will not even download it.

    Although I have yet to use this approach myself, I have high hopes that this will finally solve the IE6/PNG barrier.

    Download DD_belatedPNG now.

    Back to top

    Interview: Liz Danzico on User Research

    Paul: So joining me today for our little interview is Liz Danzico. Liz, why don’t you start off by introducing yourself a little bit. Telling us a bit about yourself and your background.

    Liz: Sure. Um, I am a user experience consultant, I am here in New York City, I have been developing web sites and user experiences online for about 12 years now. Um, I do a lot of work with Happy Cog Studios here in New York, with Jeffrey Zeldman and Jason Santa Maria. Um, I’m also chair of the new MFA interactions design program.

    Paul: Okay.

    Liz: At the School of Visual Arts in New York.

    Paul: Excellent. I mean, so, to say that you’re an expert in user experience would be a slight understatement then, Liz.

    Liz: Well I wouldn’t go that far.

    Paul: You’d be too modest, obviously, to say that. Okay, so we got Liz on the show, I met Liz when I went to Future of Web Design and we got talking. Um, she’s got some fascinating insights into the whole area of user research, and usability generally, so I thought let’s get her on the show and let’s maybe, you know, try and cover things from, from the very basic level, a kind of introduction to this concept of user research. Um, so, perhaps a good place to start, if you’re okay Liz, um, would be, how would you go about defining the area of user research? What would you include, what would you exclude from that?

    Liz: Right. So … user research, even today, we’ve been doing user research on the web since, uh, the very beginning, so it’s a very old concept but it’s still fairly controversial. So the basic concept is it tells you what really happens when real people interact with your product or service. So, there are no real rules about what it includes and what it doesn’t [inaudible]. You can basically speculate about what your users want, or you can find that out, um, you know? And uh, and the, uh, the latter is probably a more useful approach for you to take than speculation. But with either one, thinking about your audience is useful no matter what. And so, so there are no real rules, now um, when you disconnect thinking about your audience from your business objectives, and you start getting, you know, very excited about behaviors that they’re doing that are sort of disconnected from the real mission that you’re trying to sort of accomplish, then it becomes, um, a bit murky, and confusing. But thinking about your audience is, just in general, is an extremely useful approach.

    Paul: Okay. I mean one of the things that, that, um, I’ve heard said before by, particularly cynical clients I have to say, but I’ve heard it said before, you know, ultimately user research, and all of this kind of stuff feels in some ways like, um, just another way for web designers to suck a bit of extra money out of us, you know that fundamentally how, I know my audience already, is the kind of attitude that many web site owners have, so why do you see it as an important part of the process?

    Liz: Well uh, you know, as we’ve been seeing design flaws often translate to lost business opportunities, you know, usability is becoming more important than ever as the number of web sites and products is, you know, increasing more and more every day. So, we design these products and services, and we are at the same time users of them, but there’s no way that we can really tell what are users, um, might want. And the best way to, you know, usability research doesn’t cost a lot of money, so, the best way that you can help your clients kind of understand that you need to do usability research in some way is to let them know that usability research is important and it doesn’t need to, um, suck up a lot of time or money in the, in the process. So there’s a great fantastic book by Steve Krug, called Don’t Make Me Think, which I’m sure you’re probably well aware of.

    Paul: Uh huh.

    Liz: And in one of the chapters towards the end, he has a chapter called "Usability Research on a Shoestring", or it’s probably better titled, which talks of this approach of going out into the hallway and kind of grabbing people, and just sitting them down, and putting them in front of your product or service, and getting some feedback. So getting some feedback from people, no matter who they are, is better than getting none at all. And so, I think starting there with clients, instead of the, you know, $100,000 user research project that’s going to take you across 8 markets, you know, in the United States, the UK, and Asia, then, is going to be a much better approach than kind of intimidating them with the very extensive projects.

    Paul: Mmm, I mean, when it, the kind of one scenario that I’ve come across before, um, is where we’ve come across with clients that say "Well we’ve already done user research, we already know our audience ’cause we’ve got somebody in to do this or that." Is there a difference between user research that’s been done primarily with an offline audience, and those with, you know, when you’re interacting with people online? Is there a difference in the kind of results and information that you’re after, and even the techniques, maybe, that you use?

    Liz: So, they are probably, when they say that they’ve done user research, they’re probably talking about focus groups. I would venture to guess that when they talk about that they’re probably talking about either focus groups or surveys of some kind and those are not, well, I wouldn’t say that they are, those are bad things to do, but those are not the kinds of user research techniques that are going to give them feedback about their product’s usability. Those kinds of techniques are going to give them good information about, um, certain kinds of things but they are not going to give them information about whether or not people can use the product or service that they’re looking at. So, you want to find out exactly what kinds of user research they’ve conducted. If they say the words "focus group" then you know you want to move them towards something that is a one on one kind of interview. Focus groups tend to be conducted with groups of people, as the name might suggest, um, and when groups of people get together to talk about, you know, they put forth a question for these people, and when they, you know, groups of people get together to talk about the question they might influence one another in their answers, they’re typically aren’t talking about an interface, they’re typically talking about ideas, so you’re not getting good feedback, like in a one on one kind of scenario. So you want to sort of guide them to a more individual, one on one kind of experience. Surveys, on the other hand, are good, but they don’t get that kind of personal experience with a moderator, sitting with an individual, kind of looking at an interface in a kind of task-based scenario.

    Paul: Okay, yeah that makes a lot of sense. I mean, let’s then talk about some of the techniques that can be used to better understand individuals, or how those individuals will interact with your product. What different kind of techniques do you use? I mean, there’s the kind of very basic usability session, but do you do, or are there other things above and beyond that, that you do?

    Liz: Right. Well, the sort of big secret is that, there are names and there are certainly techniques, but the big secret is there are really no sort of techniques beyond knowing who your users are, kind of documenting what you’re seeing, and then kind of analyzing/prioritizing the results of what you see. So, you can, I’m gonna tell you a number of techniques that we can go through, but if those basic sort of constructs are there, then you’ve done sort of good user research. Now, that being said, the techniques that you can do are usability testing, usability testing traditionally has taken place in a user lab where a moderator is sitting with an individual looking at a screen, or a product, or a sketch of an interface and going through questions in sort of a task-based way, asking people "Show me how you would search for x" or "Show me how you would check out," or, you know, and seeing, measuring the success or failure of that kind of task. The clients are typically sitting behind a one-way, a one-way glass, or mirror, and observing these kinds of things. People have been not so thrilled about this technique recently, saying that it kind of, um, is not, it doesn’t produce natural reactions from users, but that is one kind of technique. There is, uh, kind of creating personas, and using personas, user personas which are an archetype of your site or product’s users, and getting everyone involved in activities around those personas, whether that be using those personas as your talking through features around, you know, a brainstorming session, and getting people to sort of role-play those personas. That’s another user research method. There are, there’s sort of the ethnography kind of take, where a lot of people have been doing kind of in-home interviews and observations recently. Ethnography, cultural anthropologists and people who have been doing traditional ethnography have been watching closely the design research that we’ve been doing recently, and wondering if we’ve been doing it right and so on, but ethnography, in that sort of observing users in their "natural environment", has been I would say a more successful way recently of watching people use products and services, um, so I would say that those three things, usability testing in a lab, sort of using personas and scenarios, and ethnography or kind of going out into the field and watching users, whether they’re in their homes or their offices, are the three kind of key ways to gather user research with users. The fourth way that I’ll mention, and we can talk about this in a little bit, is not with users directly, but it is certainly user research that’s available more and more now, and that is data on sort of analytics, which you can gather from Google Analytics, Shaun Inman’s Mint, these kinds of things. Watching site data and user behavior through site analytics is another form of user research that gives you, you know, some information, and you can watch these traffic patterns on your site. It doesn’t answer the question "Why?" but it does show you some evidence as to how users are behaving on your site.

    Paul: It’s quite interesting that you bring up eth, ethnography, whoa I can’t even speak today, because, that’s of interest to me, because that’s an area that we’re beginning to explore a little bit more, and have kind of discovered the same thing, that there’s a real value of going into you know, somebody’s home, seeing the environment that they access the internet on, you know, do they have kids under their feet? You know, where they access their PC, can they sit comfortably at it? All those kinds of things. Um, I guess it’s also an advantage you don’t have to hire an expensive usability lab and all of the rest of it. But I have to confess, I’m a little bit new at it, so talk me through maybe some of the things, you know, how does it differ from a usability test that you would do in a usability lab, other than that you’re in a different environment?

    Liz: Well, uh, it depends. It doesn’t have to differ at all — it depends on the goals of the test. I would say that you could construct a test that’s exactly like one that you’d conduct in a lab, it just happens in someone’s home or office, or in a different environment. But as you said, you get the more realistic interruptions, and that kind of thing, and are they going to be able to complete this task given the natural kind of occurrences of their day. And that, depending on what kind of test you are constructing, that’s either going to inform your results or not. If you are doing task-based testing, so I could maybe talk about the different kind of usability testing that you could do.

    Paul: Yeah, that’s good.

    Liz: Yeah so there are different ways that you could conduct a usability test. Um, traditionally there is task-based testing, where you set up pre-written questions, before you get to the test, that are based on the goals of the testing. So, if we were testing a photo site, we would test whether or not users could upload photos, could they task photos, you know, those kinds of things. So we would write those kinds of questions up beforehand, and then ask those questions during the test. Um, that’s one kind of test. You could do that in a lab, and you can do that same test in someone’s home. In a lab there would not be the children screaming, and the phone ringing, and that kind of thing, or, if someone say were uploading a photo, you would never be able to tell if sort of, timing out, would be an issue, or if anything with time or space or motion would be an issue. If those kinds of things are a goal of your test, then you might want to think about doing it in real time, in someone’s home environment. Another type of testing is something that, I’ll say it was first coined by Mark Hurst, who is a user experience consultant at Good Experience, I think he coined it, it’s called "Listening Labs". Listening labs are, I’ll call them experimental, but they’ve probably been going on long before I was aware of them, where people are designing usability tests in real time. So in other words, you go into the test with absolutely nothing written down, and you sit down with users, and based on your initial interview with them, you hear who they are, and after understanding a little bit about how they use photos in general, say, then you kind of write the questions on the fly, and then sort of develop a test around who that person is and their behavior, with your product, or product type.

    Paul: Which I guess, makes people more engaged with the test, because it’s about what they specifically interested in. Is that the idea?

    Liz: Exactly. So it’s a more natural way of doing the test. That’s the idea. That kind of thing you could do either way, and probably is even more rewarding if you’re doing it in someone’s natural environment. And then the third type of test is sort of a web, a web wide kind of test, where you have people just surf the internet, as it were, and uh, and just have them think out loud, and that kind of thing is also, I’ve found, more rewarding and fruitful in someone’s home environment, because they have their bookmarks there, and they have their post-it notes. Whereas you put them in a sort of artificial setting and they don’t have those things around them. So, if you, it kind of just depends on the type of testing that you’re doing. If you’re doing just the first kind I talked about, just task analysis and having people go through that kind of task-based testing, doing it in a traditional usability lab is great, you know, I mean you really do get the answers that you’re looking for, and it just depends on your goals.

    Paul: I mean, it’s interesting, going back to Steve Krug’s book that you mentioned, I mean he talks about, I guess his agenda in that book is to get people to do testing who perhaps aren’t previously, and so, you know, he really downplays the demographic of who it is that you test, and that it’s more important that you test than that you get the right people, you know and all of that kind of thing. Um, but when you’re going into somebody’s home, and interacting with them, I’m guessing it’s more important to get the right demographic? Is that right?

    Liz: Yeah, I mean one of the, um, I think it’s always important to, it’s always important to get the right demographic. Um, but, well I would say that there is a hierarchy of common mistakes around usability testing that kind of has a trickle down effect. You know, the number one mistake is not conducting any research at all, um, and conducting research on the wrong audience is kind of further down the list. So, you know, yeah if you’re doing research on the wrong audience, it’s not going to affect, whether you do it in a lab or you’re doing it at your desk, or at the water cooler, or at home, it’s going to affect your results and your analysis, you know, no matter where it takes place. So, you know, I think that the drawback is you are going to waste more time going out to that person’s time going out to that person’s time, so it’s going to be a drawback for you, but I don’t think that, it doesn’t matter really where it happens, because if you’re testing on the wrong audience, you’re testing on the wrong audience. Um, you’re probably going to get more information out of that experience if you’re in someone’s home, than if you’re not, so if you’re going to test on the wrong audience, do it in someone’s home, because you’re going to, it’s a richer experience, you’re going to get more information out of it than if you’re just testing in a lab.

    Paul: No that makes perfect sense, I kind of see that. No, it’s difficult, isn’t it? Because, uh, obviously finding the right demographic of people, and picking the right people to test on is tricky, you know, it’s a more difficult thing and it can be time consuming. So have you got any advice about that? What really matters here? You know, for example, if you’re designing a web site for an over-60s audience, you know, are you, do you want to concentrate on the age aspect of that? Or the technical literacy aspect of that? You know, is it okay to have somebody younger if they’re not as good with the internet, if your audience is, do you, I’m kind of not wording this very well, but you get the idea — what’s important when you’re trying to match demographics?

    Liz: Um, well, it’s very specific to your clients. Developing a, so, whenever you are trying to match demographics, you want to work with your clients to develop what’s called a screener, and a screener is a, I would say, whether you’re trying to develop a pretty rigorous recruiting demographic with a professional recruiter, to say, recruit 300 people for an extensive study, or whether you’re going to go out into the hallway and grab some people, or whether you’re going to recruit from something called Craigslist, which a lot of people are familiar with, um, which a lot of people do, I would say developing a screener which kind of outlines your demographic is a really good idea.

    Paul: And what kind of things would that include? Sorry I interrupted you.

    Liz: Yeah, what a screener is, it kind of goes through, it’s a questionnaire that outlines a number of questions that you would ask a potential recruit, that says, if this person can answer a particular question we should keep them in or out, so it’s actually a really good exercise to go through that allows you to kind of think through the type of demographic that you would have. So that doesn’t answer your question in any way.

    Paul: It’s very interesting, though. Can you give me an example? Sorry, I’m interested in this screener thing, cause I haven’t come across it before. Can you give me an example of the type of questions? I mean obviously they’re going to be specific to the individual client, all the rest of it, but what kind of questions?

    Liz: Um, what kind of questions? So, let’s see, would this person, so, let’s see, has this person, I mean typical questions could be around financial demographics, age demographics, you know the sort of typical things. But let me think of some more interesting things. So, is this person a full-time student? Has this person been fired from a job in the last 6 months? Has this person participated in usability research in the last 6 months? Those types of things, so if the person answers yes or no, then they’re not a good candidate. But there are other kinds of things you could put into that screener that would be more specific to the project.

    Paul: So could it include something like is this person aware of a certain brand, because you want to associate with that brand?

    Liz: Absolutely, so does this person drink Coca-Cola on a regular basis, yes or no? That kind of thing. But I’ve found that the screener, because the clients that you work with are often kind of speaking in those terms about their audience, the screener is a really good way to kind of help them understand how you’re recruiting audiences, and a good tool to kind of work together with them to narrow down who you want to be in the target audience for your testing, or your research in general. So, that said, how do you develop a good kind of set of participants for a research study for, say, a product for people over 60? Um, what’s most important, you know it depends on, and I know I hate to say that it depends, but you’re going to develop a goal for the testing, right? And the goal might be about usability, the goal might be about navigation, it might be about design, it might be about, it’s going to have, you have to first identify the goal, and depending on what that goal is, then you can identify the audience. So, the audience, you know the goal might have nothing to do with age, although the product has to do with age. So you can kind of strip away, you can pull apart the product from the goal of the testing a bit, and sort of just focus on the goal of the test. That’s why developing goals for user research is so critical, um, because often times you can separate those and therefore develop a better set of participants for that user research.

    Paul: Mmm, that’s really good. I think what we’ve done here, is, a lot of people that listen to this show probably have a basic understanding of user testing. Maybe they’ve done some basic user testing before, or maybe they’ve even written a persona before, but I think what we’ve done, or what you’ve done, is push people a little bit further to kind of consider it in a little bit more detail what they’re doing in order to kind of refine the results that they’re getting back, and that’s really, really great. I mean, if somebody has just kind of done the very basics, you know, they’ve grabbed some people, they’ve done some user testing, maybe in their own office in front of their own PC, and they’ve got a few people in, um maybe they’ve created a couple of personas, what’s the next step for them? What should they be pushing? Is it through this screener? Is that the number one thing they should be doing? Is the goals more important? Is getting a better demographic more important? What’s the kind of next step for them?

    Liz: Mmm, that’s a good question. I think that one of the most, well, doing the research is really key. Analyzing the research and connecting the research to the next iteration of a design is also key. We haven’t talked about that at all.

    Paul: No, we haven’t, we ought to.

    Liz: It’s often a grey area, um, you know there are lots of reports that are produced, you know, diagrams and things, but there’s a lot of kind of intuition that happens between sort of translating the research and putting that research, feeding that research back into the design. There are hunches, leaps of faith, um, you know kind of between that analysis and design. I mean there are clear cut recommendations that one can make, but then there are a lot of more grey areas. So I would say that, I still think, even though I mentioned we’ve been doing this kind of research for at least, you know, more than a decade online, and you know quite a long time offline, I think we still need to get better at the rigor at which we translate those recommendations and findings. So that’s one place I think we need to focus. Um, in terms of the actual research itself, uh, you know, there’s something, I think there are other sorts of techniques. I’m interested in these kinds of emergent, I would say emergent techniques like the listening labs, um, you know where the kinds of things that we’re looking at today with kind of mobile research, where people are, we need to be looking at how people are using our sites not just in the browser on their desktop but, you know, in the browser on their phone, and how their context is changing constantly and how we need to sort of look at that adaptation. So how do we develop tests that are more emergent and can be a bit more flexible, rIght? So I think there’s something interesting about that listening lab, where we kind of understand the person, and then develop the questions around a person and how they use a product, rather than having a pre-written set of questions. So, something that’s more emergent, I think that’s an area that’s interesting to kind of look at. Then, uh, ethnography, really understanding, goes right along with this sort of, emergent, as you said you’ve been getting more excited about ethnography as well, so, thinking more about kind of fine-tuning our approach to people’s own context, whether that be ethnography, going into their homes, their offices, you know, where people are using our products, whether that be on the street, in the hallway, wherever it is, but really understanding how to find people where they’re using our products and test them or do some research around that, I think that’s really exciting and a really interesting opportunity. Um so that, that’s the next step for us, uh, and I think that the way that people are designing tests and doing some usability testing now, is, you know, is good, I don’t think that there’s a big next step that we can all take together, but I think these are three areas that I think as a discipline that we’re going to see people moving forward together in.

    Paul: Excellent. Let’s finish off, then, with a kind of where people should go if, you know, they’ve been excited by this interview, they want to learn a little bit more, um, about user research and user testing. You’ve mentioned Steve Krug’s book. What other resources are out there that people should be looking towards?

    Liz: Well, let’s see. You know, I was thinking about, I was thinking about that and there are physical places that people can go, but they’re all in San Francisco in the United States, so that’s not going to help anyone. There is, you know, A List Apart has a User Science topic that often publishes user research related methods-like articles, there’s always BoxesandArrows.com which publishes user research related topics, um, Adaptive Path, which is a user research consultancy, or at least one aspect of what they do, they have published a number of articles but they also do events. A lot of events are in the United States right now, but they may have international events as well. But they do kind of give away a lot of their content. Um, and then last but not least, there’s a new-ish publisher called Rosenfeld Media, and the books that Rosenfeld Media publishes are about methods in user experience and, one recently in web form design, was about the usability of web form design by Luke Wroblewski (called Web Form Design: Filling in the Blanks).

    Paul: Yeah, I saw that. That looked very good, I have to say.

    Liz: Yeah, so that’s something to keep an eye on as well.

    Paul: Excellent. Thank you so much, Liz, that was absolutely superb. And I will be fascinated to get you back on the show in the future to talk more depth about some of these issues. Thank you very much for your time, Liz.

    Liz: My pleasure.

    Thanks goes to Jason Rhodes for transcribing this interview.

    Back to top

    Listeners feedback:

    Every website should have a call to action, a response you want users to complete. But how do you encourage users to act? How do you create an effective call to action. Read More

    Back to top

    Snape and Keith, separated at birth?

    143. Partnership

    On this week’s show Paul and Marcus discuss how to promote your web application, ways to improve the client/designer relationship and tools for managing your font library.

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video

    News and events

    Obama top technology promises

    One of the most exciting things about being at this years FoWD conference in New York was that I got to witness the election of the next U.S. president.

    Whatever your political persuasions it was a landmark election. Not only will Obama be the first African American president he is also probably the most technically aware.

    Obama campaigned aggressively online, from a dedicated YouTube channel to Obama pages on Facebook and MySpace as well as Twitter feeds. He even had his own iPhone application.

    So what can we expect from this tech-savvy President? How will he shape the future of U.S. online presence and possibly that of the entire web? An article on tgdaily entitled ‘Barack Obama’s Top technology promises‘ gives us a roundup of various technological promises from Obama’s speeches. These include:

    • A commitment to Net Neutrality
    • A desire to expand broadband penetration in the U.S.
    • A review of the current wireless spectrum usage
    • Tougher legislation around online security.

    Of course, promises made on the campaign trail are one thing. We shall see what the reality turns out to be.

    Could Microsoft consider adopting Webkit?

    Talking of things that may never be, a young (and very brave) developer at Microsoft recently asked Steve Ballmer:

    Why is IE still relevant and why is it worth spending money on rendering engines when there are open source ones available that can respond to changes in Web standards faster?

    Ballmer’s response was surprising to say the least:

    There will still be a lot of proprietary innovation in the browser itself so we may need to have a rendering service. Open source is interesting. Apple has embraced Webkit and we may look at that, but we will continue to build extensions for IE 8.

    Although some have seen this as a sign that Microsoft may adopt Webkit, personally I am sceptical. Were Microsoft to completely change its rendering engine it would inevitably break large numbers of sites and cause outrage among many of their large corporate clients.

    The backlash when moving from IE6 to IE7 was massive. Moving to Webkit would conflict with Microsoft’s mantra of ‘not breaking the web’.

    That said, we can dream. Without a doubt the real innovation and competitive advantage among browsers is in features, not rendering engines. This would in many ways be a smart move allowing Microsoft to concentrate on differentiation through ‘extensions’ and functionality, rather than wasting time on getting pages to display correctly.

    WCAG 2.0 resources

    Something that is definitely going to happen very soon is the release of WCAG 2.0.

    WCAG 2.0. has now become a proposed recommendation. This means it is not only technically complete but has been successfully implemented on a large variety of sites. In short, it has been proved to work.

    According to the Web Standards group this means it could therefore be released before Christmas.

    This is hugely significant and very exciting from an accessibility point of view. WCAG 2.0. has come a long way from its controversial beginnings and is now a very good set of guidelines.

    Now is the time to start building compliant sites and the Web Standards Group has provided some useful resources for implementing WCAG 2.0.

    Prototyping with XHTML

    Our final story is a post on the Boxes and Arrows website encouraging us to ‘Prototyping with XHTML‘.

    The article lays out an approach to wireframing and prototyping, which is based entirely around the use of XHTML. Starting with the XHTML itself, you build up the structure and elements within your site. You then add CSS and Javascript to further refine the concept.

    It is an approach with a lot of merit. Unlike other methods, the prototype is not thrown away but becomes apart of the final deliverable. It is also an approach particularly suited to multiple iterations, allowing you to refine the design over time.

    In a world of web applications it is becoming increasingly important to demonstrate user interactions in a way static comps cannot. However, although this approach is appealing I do not believe it replaces the Photoshop mockup. Client’s like to see ‘finished’ looking designs. That said, it is another useful tool in your arsenal and you should be sure to read this post.

    Back to top

    Feature: A Partnership of Cooperation

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

    Back to top

    Listeners feedback:

    Marketing a web application

    Nick Charlton writes: Long time listener, haven’t asked a question before though..

    Apart from your blog, the podcast and twitter, how else have you marketed GetSignOff?

    To be honest, I have done very little marketing yet. However, I know that has got to change. The problem is that I am not a trained marketeer and so don’t really know what I am doing. That said I do have a rough plan:

    • Free pro accounts – While in beta we gave away numerous pro accounts to ‘web celebs’. However, to be honest it was a waste of time. These guys were either too busy to review it or just didn’t feel it was worth writing about. This time I intend to give free accounts to those who blog about the application. Not entirely sure how I am going to do this yet but I think it might generate some buzz.
    • Offering discounts – Discounts are an effective way of spreading word of mouth. Again I am not entirely sure if or when we will do this, but offering the occasional discount should encourage people to tell their friends.
    • Targeting appropriate publications – I am in the process of writing a number of articles either directly or indirectly related to GetSignOff. I have also asked some sites to review the application. I have approached sites like Digital Web, Think Vitamin and printed publications such as .net. Having a product aimed at people like myself makes identifying appropriate publications easy.
    • Producing supporting video content – I have already produced the ‘Getting design sign off‘ presentation but also intend to make some shorter tutorials for YouTube. These will contain valuable content in their own right, but will also promote GSO.
    • Utilising CSS galleries – Because my audience are web designers we have submitted GSO to several CSS galleries. We know that many web designers use these sites and so this gives our application a lot of exposure.
    • Use speaking opportunities – Speaking opportunities have been a great opportunity for promoting GSO and I have started tailoring my speaking slots around the subject of sign off.

    In time we may consider advertising through things like Google Adwords or the Deck. However, until we are confident in the return on investment we are not willing to invest more money in anything other than development.

    Font management

    Aurel writes: I would realy like to know how designers deal with fonts? From personal experience, I have alot of fonts and it takes me time to find or manage them. So I was wondering if you know of any way to group the fonts, e.g. when you go through the drop menu of fonts in photoshop, they apear in groups (or something along those lines).

    The solution I use was recommended on the Rissington Podcast (oh the shame of admitting that.)

    It is a piece of software called FontExplorer X which is available for both the mac and PC. It has some superb features if you are serious about fonts. These include:

    • Organising your fonts – Organise using a library, folders, tags and even smart sets. You can directly access all typefaces from a certain foundry or all fonts tagged with a certain keyword? You can even view all italic fonts.
    • Auto activation – FontExplorer allows you to decide which fonts are available in which applications. This is ideal if you want to avoid scrolling through large numbers of fonts in applications like Photoshop.
    • Font information – FontExplorer gives you a clear customisable preview of your fonts as well as detailed information on the character set and usage restrictions.

    The application also has an in built store that allows you to buy additional fonts within the same intuitive interface. I am guessing this is how they manage to offer the whole application absolutely free.

    Back to top

    A dedicated follower of fashion

    My name is Paul and I am an addict. I lust after anything new and shiny. But is that really wrong?

    I cost Headscape a fortune. If its new and shiny I want it, and being an impetuous child I am I normally get it. Whether it is a new online service or the latest Macbook Pro, I spend company money like no tomorrow.

    In many ways I feel guilty about this. However, should I really feel guilty? Is there value in my addiction?

    Normally I try and justify my new purchases individually, arguing I need them to do my job. Although, these argument have some truth I think there are better justifications for my ‘habit’. In fact as I have been agonising over whether to purchase the new Macbook Pro, 3 things come to mind. The new and shiny…

    • Inspire me
    • Cause innovation
    • Give me confidence

    Let me explain what I mean.

    Inspiration

    There is no doubt that the ‘new’ inspires me. It encourages me to look ahead and think about where design and technology is going. The ‘shiny’ also inspires me. It inspires me to produce something better. Something easier to use and more attractive to interact with. The joy I get from playing with a well designed gadget or a beautifully crafted web application, makes me want to give that experience to my users. Experiencing the exceptional work of others makes me want to be exceptional too.

    The opposite is equally true. Experiencing the disappointment of using something that did not meet my expectations can inspire as well. Learning from their mistakes and a desire not to repeat them, are valuable experiences.

    The new and shiny also inspire me to innovate.

    Innovation

    One of my most valuable roles within Headscape is to cause us to innovate. Whether it is introducing new approaches and techniques into the company or sitting with a client inspiring them about the potential of their site. This role is vital in the ever changing world of web design.

    But how do you innovate? By being inspired by the new and shiny. I learn so much from good design wherever it is. For example the design principles of Apple has fundamentally altered my attitudes towards the web. From them I have learnt that simplicity is more important than features. Would I have learnt this from reading a book about Apple? Possibly. However, the experience of using Apple products everyday has helped drive that message home.

    Equally, if I was a person always happy with what I have then I would never innovate. Innovation at its heart is about wanting more, wanting better. Without those of us who lust after the ‘new’, technology would never improve and design aesthetics would never change. It would be a dull stagnant world.

    Confidence

    This last point may cause you to laugh, but the ‘new and shiny’ gives me confidence. This happens in two ways.

    First, it gives me confidence in my sales role. Gadgets impress. Sad, but true. Walk into a sales meeting with the latest gadget and people respond. I remember walking into a number of presentations back in the day when tablet PCs were the ‘in’ thing. Every time I would get comments and every time it put the presentation on the right foot. Am I saying we won work because of my gadget? Not at all. However, it did break the ice and start a conversation.

    However, the more important way that the new and shiny give me confidence is through a knowledge that I am exposing myself to the cutting edge. I do not want either myself or my company to be in the long tale of web design. I want us to be at the forefront of our industry and to do that we need to be experiencing the forefront of design and technology.

    So there you go. Am I putting forward a valid argument or deluding myself to justify my habit? You tell me.

    129. Conferences

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

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

    Download this show.

    Launch our podcast player

    News and events

    Release of Firefox 3.1 Alpha

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

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

    The alpha is available from the Mozilla Developer Center.

    A List Aparts’ 2008 Survey

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

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

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

    The Future of Web Font Embedding

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

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

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

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

    Back to top

    Feature: A Year on the Conference Circuit

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

    Back to top

    Listeners feedback:

    Font Smoothing

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

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

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

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

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

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

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

    Browser Emulators

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

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

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

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

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

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

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

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

    Back to top

    122. Screencasting

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

    Play

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video

    News and events

    Typography everywhere

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

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

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

    The list could go on.

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

    Accessibility cheat sheet

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

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

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

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

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

    Advice on wireframes

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

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

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

    Top five tips for new web designers

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

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

    The tips include…

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

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

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

    Back to top

    Feature: Creating Screencasts

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

    Back to top

    Interview: Ian Lloyd on Sitepoint HTML Reference

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

    Ian: Hello Paul!

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

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

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

    Ian: I’ve heard my dulcet tones before.

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

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

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

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

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

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

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

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

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

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

    Paul: *Laughs knowingly*

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

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

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

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

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

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

    Ian: Sorry Paul.

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

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

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

    Ian: Ah yes.

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

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

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

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

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

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

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

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

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

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

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

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

    Paul: Nobody is beyond hope.

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

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

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

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

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

    Paul: There you go then.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Ian: What luck “HTML SUCKS!”?

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

    Ian: Yeah something like that.

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

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

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

    Ian: OK. Thank you very much Paul.

    Thanks to Lee Theobald for transcribing this interview.

    Back to top

    Listeners feedback:

    Can you trust developers?

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

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

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

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

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

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

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

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

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

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

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

    The life cycle of a website

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

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

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

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

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

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

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

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

    Back to top

    116. Back

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

    Play

    Download this show.

    Launch our podcast player

    News and events

    Creating grid layouts

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

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

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

    Flash goes open source

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

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

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

    Accessibility and AJAX

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

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

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

    Developing effective forum leadership

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

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

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

    Back to top

    Feature: The personal website is dead

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

    Back to top

    Interview: Jeff Croft Talks About His View On Web Standards

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

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

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

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

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

    Jeff: Sure

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

    Jeff: Right

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

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

    Paul: Ha ha ha

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

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

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

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

    Jeff: Right

    Paul: Aren’t you actually encouraging lazy coding?

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

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

    Jeff: Right

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Jeff: Sort of!

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

    Jeff: OK

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

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

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

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

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

    Jeff: In many of them, yeah.

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

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

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

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

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

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

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

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

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

    Jeff: Right.

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

    Jeff: Great. Thanks so much for having me.

    Thanks to Anna Debenham for transcribing this interview.

    Back to top

    Listeners feedback:

    Getting a site
    off the ground

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

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

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

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

    Testing

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

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

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

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

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

     

    Keeping your skills sharp

    I recently received a question from Harry asking “what approach do you take to training?”. He has some budget set aside and is wondering how he should spend it.

    I love working on the web because there is always some new exciting innovation. Of course the downside of this is that we are always running to keep up and there is always something new to learn.

    I was extremely impressed with Harry because he has had the foresight to save some money for training. I think more web designers could do with following his lead. We need to recognise that learning new stuff is crucial to our role and if we don’t then we will quickly find ourselves unemployable.

    So presuming you have had the foresight to set aside some cash to improve your skills what are your options? Well I believe you have two; spend the cash or convert it to time.

    Spending money on training

    There are certainly no shortage of ways to spend your hard earned cash on improving your skills.

    One option is to go on a training course as Harry has been considering. I know the guys over at Clear:Left runs some excellent training sessions on front end scripting subjects like the DOM and AJAX. Also Drew McLellan and Rachel Andrews at edgeofmyseat.com have started a very popular CSS course.

    Training courses are excellent for learning hands on skills in a short amount of time. However they can get pricey. A cheaper solution would be to simply buy a book. Books maybe cheaper but they do take time to read and digest. Nevertheless they are a good alternative if money is tight. I have recommended loads of books in the past so am not going to repeat myself here. However be careful, there is a lot of crap out there teaching bad practice.

    If you want to be a bit more forward thinking and strategic with your training budget, then you might want to think about spending the money on attending conferences and meetups. Although these don’t normally teach you practical skills in the same way as a training course, they do advance your thinking about web design and maybe suggest new approaches.

    There are some great conferences around. My personal favourites are SXSW, d.construct and the Future of Web Design. SXSW is pricey and somewhat overwhelming but is an experience if nothing else. d.construct and the Future of Web Design are smaller affairs but include a great line up of speakers.

    If a conference is beyond your means then consider attending a meetup. Spend your budget on accommodation and go to a hack day or other meetup. You don’t get the great line up of speakers but you do get to interact with other designers who are facing the same challenges as you.

    Time equals money

    We all know time equals money. This is especially true if you are a freelancer. If you are not working on client work then you are burning cash. Another alternative then to spending your training allowance on courses or conferences is to spend it in the form of time. Use that money to buy yourself time free from project work. Time to experiment and learn online. Personally this is how I learn the most.

    I try and set aside time each week to read sites like A List Apart, Think Vitamin or Digital Web. I then take the techniques I have learnt and experiment with them. If I discover a tutorial on AJAX I don’t just skim it but rather sit down and follow it through. If Smashing Magazine lists a load of flash galleries I actually check them out and look for projects I can integrate them with.

    By actually physically buying your time back from yourself using your training budget you avoid feeling guilty for ‘messing around’ or ‘sitting about reading blogs’. Spending time experimenting is probably the most important type of training you will do. Take Google’s lead and make sure you set aside some time every week for personal projects.

    Show 81: Money Matters

    This week on Boagworld: Paul gives advice to those who work with content management systems. Marcus finally talks about charge out rates and we talk to Dan Mall and Mark Huot about swfIR.

    Download this show.

    Launch our podcast player

    News and events

    37signals in Time Magazine

    I notice that 37signals have made it to Time Magazine. This is exciting stuff because it shows the growing awareness in mainstream media of the explosion of web 2.0 businesses. However, the real reason I mention this article is because of what it tells us about how 37signals work. You get to learn about their focus on simplicity, the fact that innovation can happen outside of Silicon valley and their approach to a distributed company.

    The one part of the article I personally found particularly interesting is how 37signals’ current suite of products was born out of a need they had to communicate across a distributed company. The idea of building a product that meet a personal need is a good one. It is particularly interesting to me as Headscape has started development of a product which does exactly that. I don’t want to say much more at the moment (as it might never happen), but this article contained a lot of valuable lessons for us.

    AJAX tools

    I seem to find myself doing more and more ajax and javascript these days. One of the more tricky areas is keeping the user informed about what is going on. I am encountering two specific problems:

    • How to draw the users attention to content that has changed
    • How to inform the user that content is still loading

    The latter is fairly straightforward as you simply display a loading graphic. However, I am a lazy sod and can’t be bothered to hand craft a beautiful animated gif. Fortunately this week I came across AJAXload which generates those pretty web 2.0. loading graphics for you. Very nice.

    Informing users of changing content is a bit more tricky. I have been aware of the fade to yellow technique for a while but that requires a white background, which my designs don’t ways have. What I didn’t know until I finished Jeremy Keith’s “Bulletproof Ajax” is that there is also a fade to anything technique. This is basically the same as the fade to yellow approach but the background colour doesn’t matter. Simply download the code and away you go :)

    Waves of creativity

    I stumbled across an article this week talking about the relationship between brain waves and creativity. This explained a lot about my own personal creativity! The gist of the article is that your brain needs to be relaxed in order to be at its most creative. This makes sense for me personally as inevitably I am at my most creative when I am lying in my bed at night.

    The sad truth is that we spend most of our lives in a more agitated state and so creativity is hard to achieve. This dove tales nicely with my experience of implementing “Getting Things Done: The Art of Stress-free Productivity” (David Allen). Since reading that book I have felt much more relaxed and in control and hence I have been considerably more creative.

    Eric Meyer explain why forms controls can’t be styled

    A big thanks to Eric Meyer who has been kind enough to look into the incredibly confusing area of form controls and then explained it to the rest of us. Many web designers express a real frustration with the fact that you cannot consistently style form elements. Although personally I think it is generally unwise from a usability perspective to start mucking around with form elements, I have still always wondered why browser developers have chosen to give us so little control. In a recent post Eric goes into extensive detail about why form controls are “weird” but the upshot is that you are simply better off not styling them.

    Agony uncle: Web Design rates

    Another question from Bob in Iceland:

    “Hi guys, I am becoming increasingly bewildered with what I should charge for web design work. I also do a fair amount of copywriting and content research. What should I charge? Should my rates change for different work? I am a one man band.”

    Firstly, I should say that there is no real fixed figure for web design related work. It depends very much on a number of factors, such as:

    • Experience e.g. proven capability to deliver
    • Ability to deliver specialist services e.g. usability testing
    • Size
    • Diversity of staff
    • Location
    • Portfolio

    However, to use a real example as a baseline, a survey carried out by eConsultancy a couple of years ago showed that English web design agencies employing 10 to 20 people with a turnover of approximately £1M, charged between £500 and £800 per day for most services. I expect this gone up a little since then.

    Setting your rates is partly science, partly weighing up what the market will bear for what you offer.

    You do need to work out to the best of your ability what your daily break even cost is but in, in theory, your annual figures should be able to tell you that. The biggest drain on any web agency, unless you have marble and gold clad offices in central London, will be your staff. Good creative/technical people don’t come cheap.

    Be realistic from a number of different angles:

    • Don’t try and charge a grand a day if you’re straight out of uni with no experience under your belt
    • Don’t expect to have 100% effort allocation – 70% is excellent
    • Price projects as honestly as you can but remember that clients are human beings and really don’t like paying for project manager anywhere near as much as they do technical development

    So should you charge different rates for different services. Again… it depends. Some jobs require a lower level of skill as part of the project. For example, recruitment (though an absolute pain) for any type of testing requires basic organisational skills and not,say, years of experience in project management. If you can outsource that work at a lower rate, then charge a lower rate, but if your PM ends up doing it then you have to charge at your PM rate.

    For years we charged a flat rate across the board because it was simpler to manage and we felt clients liked it. Over the past couple of years we have done a lot more consultative work that has placed pressure on the timetables of the directors. This has led us to having the following rate categories:

    • Creative director – Paul
    • Consultancy – IA, business analysis, testing etc
    • Standard – design, technical, pm

    We charge a fixed uplift (per client dependent on geographic location) for on site work – kick off meetings, testing etc.

    Client corner: Advice for CMS users

    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 so I thought there might be some value in sharing it on the show. For complete notes on everything I cover check out the CMS user blog post.

    Ask the expert: Dan Mall and Mark Huot on SWF image replacement

    I was fortunate enough to get some time to chat with Dan Mall and Mark Huot the creators of SWF image replacement. We talked about:

    • What exactly swfIR is and how it works
    • What kind of scenarios they imagine it being used in
    • What inspired them to create swfIR in the first place
    • A little bit about the process of applying it to a site
    • What the future holds for swfIR
    • What it is like working at Happy Cog

    No show next week

    Just a quick note to say there will be no show next week as I am off on holiday to sunny cornwall. However, please continue to send in your suggestions for the show and don’t forget you can always check out the forums if you want your boagworld fix :)

    The Business of Web Design

    I have been thinking a lot about our motivation as web designers (as you do!) and am becoming increasingly concerned that in many cases our motivation in projects is entirely wrong.

    I say “our motivation as web designers” but what I really mean is “my motivation”. I guess I have been doing some soul searching and have not been entirely happy with what I have found. However, I suspect that if you look honestly at yourself then you will find that, if you are a web designer, you suffer from a similar problem.

    Personal motivation

    So what am I talking about? Well, the web is a really exciting place at the moment. There is so much innovation and so many new technologies and techniques emerging. From tagging to AJAX, we are surrounding by cool things we are just itching to try out. We are constantly looking for opportunities to experiment with this stuff and that is no bad thing because it is by experimenting that we learn. If you are anything like me you are a diehard geek and love playing with new technologies and ways of doing things. That is what gets you up in the morning.

    Benefiting our users

    Of course, our desire to use all these techniques and technologies isn’t entirely selfish. Another motivation for us is the desire to benefit our end users. After all we are “user centric designers” right? Technologies like AJAX create a more pleasant user experience and the “trendy” web 2.0 design style, makes a site easier to navigate and read. The fact that we will look good to our peers and more attractive to prospective clients by using these approaches is a secondary consideration… isn’t it?

    Business benefits

    There is an added bonus to all these innovations too. In many cases they will benefit the clients business. Benefits such as reduced maintenance costs, increased customer satisfaction, fast development… the list could go on. All of these arguments are incredibly useful when trying to convince a client that they need to let you implement the latest “good practice”.

    The underlying problem

    So what is my problem? It is not that I have an issue with the three motivating factors outlined above. What I am uncomfortable with is the order. If we are completely honest with ourselves, in many cases the order is the same as that outlined above:

    1. Personal motivation
    2. Benefits to users
    3. Business benefits

    We are primarily driven by personal motivations and the desire to “play” with new technologies. The business drivers for implementing a new technique come at the bottom of our list and are really only a useful way of justifying what it is that we want to do anyway.

    I would argue that the list should actually be completely inverted. I believe that business benefits and objectives should be our primary concern even above the benefits to users. At the end of the day a website has to meet client objectives. Of course, in the majority of cases these objectives are best met by providing a good user experience, but our motivation should primarily be driven by business demands and not user needs. As for personal motivation, well that should come last of all.

    There are too many implementations of AJAX which exist only for personal gratification rather than business need. The same applies for design, standards, accessibility and indeed any other “best practice” you care to mention.

    Please don’t misinterpret me. I am not saying any of these things are wrong. They can all be hugely beneficial to most businesses. What I am saying is that each of us as designers or developers has to take a long hard look at why we are recommending various approaches to clients and ensure that our motivation is primarily business focused.

    As web designers, many of us somehow perceive ourselves above such torrid pursuits as business objectives. There is a definite climate of moral superiority at the moment as we focus on accessibility and best practice. Although it is good that web design is moving away from the early days when we were the web equivalent of time share salesmen, we need to be careful that our new found enthusiasm for best practice doesn’t divorce us from the realities of business online.

    The geeks gone soft

    Today is my eighth wedding anniversary and so I have decided to take some liberties with this blog. After all, while most men say I love you with flowers or chocolates, a geek says it with a blog post.

    Recently I was asked in an interview how I dealt with the stress of running my own web design company as well as podcasting, writing and keep on top of the latest innovations in web design. To be honest the question caught me somewhat off guard. My job is far from being the most stressful one in the world. but at times, it does get to me. Running your own business can take over and if you are not careful you can quickly find yourself "living to work" rather than "working to live". Fortunately, my family and in particular, Catherine my wife, prevents this from happening and ensures my stress levels remain under control!

    Cath is so incredibly supportive of what I do and yet does not let it take over my life. If it was not for her constantly dragging me away from my laptop, I would be forever lost in a world of CSS code and website validation. She strikes a perfect balance between reminding me about what is important in life and accepting that sometimes I just have to work.

    The last eight years have been awesome but it has been the last four (since we set up Headscape) that have proved just how incredible the woman I have married really is. Recently diggnation featured a story that explained why women should date a geek. It is a really funny article but also contains some nuggets of truth (at least for my marriage). One such nugget was:

    Here’s the deal, sweet and simple: Your geek will worship the ground you walk on. He’ll be so happy that a pretty girl like you paid attention to him that he’ll be at your feet. He’ll adore you as if you were his queen.

    And that’s exactly how I feel. Catherine is not only "pretty" in appearance but also in personality. I would be lost without her and I thank God everyday that she continues to pay me attention.

    Podcast 32: In-house vs. outsourcing

    Decisions, decisions… develop in house or use a third party web design company? This is discussed in this weeks podcast along with other bits and pieces.

    Play

    The decision of whether to develop your website in house (by taking on additional staff) or outsource it to the third party web design company can be a tricky. This week Paul and Marcus look at the pros and cons of both approaches as well as throwing in some additional options for good measure.

    Download this show.

    Also in this weeks show:

    In-house vs. outsourcing

    The decision of how you are going to resource your web project will radically affect not only the price of the project but also how that website develops in the future. It is therefore important to understand the options available to you and to know the pros and cons of each.

    Although there are some alternative approaches that I will discuss later, you basically have two options available:

    • You can use internal resources within your organisation to develop your new web project. This can either be existing staff or new employees that have been recruited specifically to work on the website.
    • You can outsource the project to a specialist web design agency who can work either on a fixed price or time and material basis.

    Either option has both its advantages and disadvantages:

    In-house development

    In short, an internal development team demonstrates a greater commitment to placing the web at the heart of your business

    If you envisage that your site is going to need ongoing support and development (beyond basic text amendments that could be completed via a CMS) then hiring in-house staff may well be the best way to proceed. Although this does produce an ongoing financial commitment in the form of salary, equipment and training, it will ultimately be cheaper than the higher rates you will be forced to pay an external agency. An in-house development team will not only understand your business better than an external agency but will also be in a position to push the virtues of the web internally on an ongoing basis.

    In short, an internal development team demonstrates a greater commitment to placing the web at the heart of your business and a vision to ensure your site evolves overtime instead of going through sporadic redesigns.

    Outsourcing your web project

    External agencies are often better placed for dealing with more challenging sites.

    Of course having an in-house team isn’t always appropriate. For a start the ongoing financial commitment may simply not be an option even where site evolution is the preferred approach. Secondly, external agencies can sometimes have the advantage when it comes to complex and cutting edge sites. External agencies are normally larger than in-house teams including more specialists in specific fields (e.g. accessibility, usability etc). In addition because of the competitive nature of external agencies there is more pressure on them to keep up-to-date with the latest innovations and developments. As a result they are often better placed for dealing with more challenging sites.

    Finally there is a danger in some organisations that the in-house web team can become “institutionalised” whereas an external agency will bring a fresh perspective that can challenge internal preconceptions.

    Management mistakes

    Of course the biggest factor in undermining in-house teams can often be mistakes made by management and not anything to do with the team itself. One such problem is recruiting the wrong person for the job. Often smaller organisations will recruit a web developer when what they really need is a web strategist and evangelist. Although coding and design are important skills, a smaller organisation needs to have somebody with business acumen that can help the organisation identify opportunities to utilise the web and to promote its use internally.

    However, probably the biggest mistake made my management is ignoring the internal team they have. As a member of an external agency who works with in-house teams on a regular basis, I am constantly amazed how often we are brought in only to validate what the in-house team has already been saying. It is as if our presence is required simply to mediate in the internal politics that can often be found in larger organisations.

    Other approaches

    Of course choosing how to develop your website doesn’t need to be a black and white choice between in-house or outsource. There are in fact a number of other options to suit different organisations:

    Ad-hoc specialists

    For larger organisations it may sometimes be appropriate to bring in specialists to compliment an existing in-house team. For example specialists in accessibility, usability or design can often work well alongside an in-house team primarily made up of coders.

    Part time contractors

    For smaller organisations that cannot afford fulltime in-house staff but who wish to enjoy the benefits that come with that approach, there is the option to take on a part-time contractor. These individuals will probably have 2 or 3 websites they manage on a regular basis but still will be able to work more closely with you than an external agency.

    Maintenance contract with an external agency

    Although probably the most expensive approach, maintenance contract with an external agency does provide the best level of service. If the agency provide the right kind of service this can be very much like working with an in-house team. The agency will really get to understand the business, evolve your website on a regular basis and still provide all of the benefits of an external agency.

    Conclusion

    In many ways the title of this entry is somewhat misleading. The decision between development in-house or outsourcing is not a black and white one. Different solutions are right for different organisations. However I believe one thing is universally true, whether you use an external agency or in-house staff, you need a “website owner” within your organisation who is the project manager for any work done and the evangelist for the site within your company.

    Enlightenment for the web?

    Well, I have just got home from the d.construct conference and want to post my last few impressions of the day.

    First of all I want to thank everybody at Clear:Left for putting this together. I know they all have a lot on their plates and it would have been easy to turn down the opportunity to do this conference. I am glad they didn’t.

    Alchemy or science?

    For me a lot of the day was actually summed up by Cory Doctorow from the Electronic Frontiers Foundation. At the start of his talk, Cory spoke about the Dark ages here in the UK when Alchemists competed against one another to turn lead into gold. They worked in secret fearing that others might steal their ideas. It was only as these people started collaborating, sharing ideas and working together that the superstition of Alchemy turned into the discipline of science and the Enlightenment dawned. I feel like in many ways that was what today was about.

    Sleeping with the enemy

    I was fortunate enough to spend a few minutes talking to Andy Budd from Clear:Left and it struck me how strange a situation I found myself in. Here I was sharing ideas, and chatting about new innovations with a man who has set up in direct competition with me! It’s wonderful that instead of all working in secret we can talk and innovate together. I have received so much from so many online, people who have had the vision to look beyond corporate competition and share with the wider community. I hope that to some extent this blog and podcast returns the favour.

    I could go on and start talking about how perhaps if we keep this collaborative vision we too might see our own enlightenment, but then that would be just too cheesy for words ;)