Question the details

I have been working on a wireframe walk through of an ecommerce checkout the last few days. What has struck me most is how important it is to question the details of your design.

They say “the devil is in the details”. Cliche though it is, it is actually true. When deadlines are looming and budgets are tight it is easy to make snap decisions about the details of your design that can ultimately be incredibly detrimental.

To produce truly great design we need to find the time to think about and question the details of our work.

To give you an indication of the type of questions you should be asking I thought I would share some of the details I have obsessed over while working on wire framing a recent ecommerce checkout process.

Question whether more clicks are bad

Conventional wisdom dictates that we should minimise the number of clicks required to complete any task on a website. However, in a world of broadband and Ajax I’m not sure that is always true.

I think the most important thing is to ensure that users feel they are making progress and that sometimes making them click a few extra times is the best way to achieve this.

While working on wire framing my e-commerce checkout process I decided to add an additional screen for users paying by cash, cheque or voucher. Without this additional step the experience felt jarring and left users wondering whether they had clicked on the right thing. The one extra screen provided them with the reassurance that they were heading in the right direction. In my opinion this was more important than reducing the number of clicks.

Cash payment Screen

Question conventional wisdom

The number of clicks is not the only conventional wisdom we should be challenging. It is easy to blindly follow supposed best practice without asking whether it is right for your site or not.

Take for example those “remember me” checkboxes you find on most login screens. I found myself asking whether a user needed to confirm their login if they previously checked this box. After all if they have asked us to store their e-mail address and password why can’t we automatically log them in?

Remember me checkbox

Ultimately we decided against this partly for security reasons (because we store credit card information) and partly because we felt it would just freak users out. However, even if you end up agreeing with the conventional wisdom that does not mean it should never be challenged.

Question the need for data entry

One detail that should always be challenged is the need for users to enter data. Nothing will prevent the user from completing a call to action more than being asked to fill out a form. It is really important that we challenge the need for every field that appears on our website.

A simple example of this is remembering data that the user has already entered once. For example if the user has been required to enter their e-mail address in order to recover a password they should not have to enter it again to then log in.

Note reminding me to avoid data re-entry

However sometimes you may wish to add additional fields so you can ultimately reduce the overall amount of data a user has to enter. For example we decided to ask users for their credit card type even know we do not need this data. This then allowed us to hide some additional fields like start date and issue number from credit card users who do not have that information on their cards.

Credit card type selection option

Question the “what if” scenarios

Another area of detail we all need to pay particular attention to is the “what if” scenarios. There are hundreds of these edge cases which need to be considered in any interaction flow and yet it is often left to the developer to decide what happens.

A good example of this occurred while working on my checkout process. I have to decide what would happen if a user tried to register with an e-mail address already tied to an account in. The easiest solution was to display an error message. However that leaves the user to work out what they should do next. Instead I decided to take them to the password recovery because if their e-mail address is already registered they would need to recover their password before they could login.

Note saying we should take users to a password recovery screen

Question your micro copy

Micro copy is one area where few questions are asked and details are largely ignored. Often it is left to the developer to throw together some instructions when more consideration and questioning is desperately needed.

Micro copy is a huge area and not something that I’m going to discuss in detail here. But in order to give you a sense of the kind of questions you should be asking, let me tell you about a single question I asked while designing my e-commerce checkout process.

The question was this: “should instructional text, buttons and links being written in the third person or the first person?” In other words should we be talking about “my order” or “your order”?

Eventually we decided that when we were providing instructions these would be written in the third person (e.g. “select your delivery address”). However, when the user was required to take an action it would be written in the first person (e.g. “deliver to my home address”).

Screenshot showing the various use of language we employ

Question how you can differentiate

How to differentiate your website from everybody else’s is a burning question that most website owners ask. However they often content themselves with just addressing this issue on one or two pages of their site (often the homepage).

I believe we should be looking for opportunities to differentiate ourselves in the details on every page of our website. As you are working on pages ask yourself the question “how can I differentiate here?”

While working on this e-commerce checkout process I used the fact that the company in question works through a network of local franchisees to personalise the experience. Throughout the entire process I named the local franchisee the customer will be dealing with and even provided a local number they could call. This is not something that their competitors could do.

Introducing their local driver

Questioning the desire to go with the simple (for you) solution

Finally I want to encourage you to question the motivation you have for the little decisions you make while working on a website. Are you going for the simplest solution for you, or the simplest solution for users?

It would have been easy to force users to register by creating a password, before they were allowed to place an order. However we knew users saw registration as a barrier to completing their main task (placing an order).

We decided instead of going the easy route we would automatically generate a password. However we knew that many users would not remember there are automatically generated password and so also gave them the ability to set their own password if they so wished.

Create an easy to remember password

Going the extra mile and paying attention to this kind of detail turns a mediocre experience into a truly exceptional one. It does take extra time but ultimately it will pay dividends both in the reputation of the web designer, the profitability of the website and the experience of users.

Web Design News 22/06/10

This week: The Boagworld Podcast goes off air, how to design better and faster, using stories in your design ideas and how to think from a users perspective.

Boagworld Podcast takes a break

The biggest news of the week (at least if you are listening to this… maybe) is that this will be the last Boagworld Podcast in its present format.

As I announced this week on the Boagworld blog we are taking a 6 month break from podcasting before returning with a new show and a new format.

To be honest at this stage we are not quite sure what that will be. That is why we wanted to take 6 months off to experiment with new formats and different material.

Between now and the end of the year we will still be putting out just as much content as we are now, but in a variety of different formats as we experiment with where to take Boagworld.

In fact we are starting these experimentations with a niche Webinar that we will be holding on the 21st July. If you work as part on an in-house web team then you maybe interested in joining us for a free interactive session where we talk about battling bureaucracy and ensuring the website gets the attention it deserves. To register your place email me on [email protected]. Remember to secure a place you need to be a permanent member of a web team in a large(ish) corporate or public sector organisation.

This will no doubt be just the first of more niche content that addresses the different needs of different members of the web community.

Dolphins saying 'So long and thanks for all the fish'

ShopArtGallery, Shutterstock

Design Better And Faster With Rapid Prototyping

If you have watched my presentation about Pain Free Design Signoff you will know I am a great believer in working collaboratively with our clients and showing them everything from initial sketches to final comps.

However considering the looks I get from some other web designers when I suggest such a hands on role for the client, I was beginning to wonder if I was alone in this view.

Fortunately an article entitled “Design Better And Faster With Rapid Prototyping” on Smashing Magazine has reassured me otherwise.

When talking about engaging all stakeholders in the design and prototyping process the author writes…

Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

He goes on to say…

Rapid prototyping helps teams experiment with multiple approaches and ideas, it facilitates discussion through visuals instead of words, it ensures that everyone shares a common understanding, and it reduces risk and avoids missed requirements, leading to a better design faster.

I couldn’t agree more!

The post goes on to look at how best to use prototyping and client interaction in the design process. In particular it looks at the fidelity of your prototypes in terms of design, functionality and content.

A graph describing the different levels of fidelity in prototypes from sketches to fully interactive websites using real content

He also provides a great list of do’s and don’ts that includes my favourite line in the post…

Do work collaboratively with users, business and IT stakeholders while rapid prototyping. Apart from giving valuable feedback, they also gain a sense of ownership of the final product.

This is a great article and definitely worth reading.

Using Stories for Design Ideas

Prototyping is a great way for discussing possible solutions. However, often there is a need to communicate and discuss the underlying problem first.

Before we can agree that a new feature is required, we first need to agree what problem it is solving. To do that we need to understand what the user wants.

User testing can partly help, however it doesn’t really focus on understanding the users ‘story’ or their motivation.

An article on Johnny Holland Magazine talks about how stories can guide our design process and inform what we do on our websites.

This is a new concept for me and one I am still wrapping my head around. However, as I understand it the idea is to take the problems we believe users are experiencing and weave them into a ‘story.’ This story that not only identifies the problem but also how the user feels and behaves.

Once you have the story it becomes easier to rewrite with a ‘happy ending.’ An ending where your website solves the user’s problem.

It’s a hard concept to explain so I recommend checking out the post. It contains lots of examples of how to turn a basic problem into a story and then how to use that story to generate a solution.

In essence it is an alternative to brainstorming that is ideal for the collaborative approach I have been talking about. This is because everybody is working from the same stories and so understands the problem that needs solving and the proposed solution.

An example of user centric thinking

While on the subject of understanding the users thinking, I want to conclude with an example and how it can solve very real problems.

The problem I want to look at is checkout abandonment. More and more people are abandoning the checkout process when purchasing from an ecommerce site. Of those users a whopping 29% are giving up because they are forced to register. That is second only to hidden charges being applied at checkout.

Abadnoned shopping cart

Sam Aronov, Shutterstock

In order to solve this problem you need to understand how users think. Why do they hate registering so much?

According to econsultancy the reasons are as follows…

  • Completing my purchase will take much longer than if I didn’t register.
  • I will need to provide lots more personal information.
  • I will start getting spammed with offers and promotions.
  • The retailer will pass my personal details on to third parties, who will also start spamming me.
  • Why do they need me to register? All I want to do is buy this one thing.

After reading that list you can understand the users point of view. The question then arises – why not remove registration entirely? As econsultancy points out, there are a lot of benefits for both the customer and retailer in registering. It’s just that the user cannot see that.

The real genius of the econsultancy post is what it does next. After identifying the feelings of both customer and retailers the post focuses on the crux of the problem…

The ironic thing about the whole ‘encourage customers register’ challenge is that when you break it all down, all new customers should be required to simply complete is one additional field – the create password field.

By understanding the users objections on a granular level you discover quite how small a problem is how obvious the solution.

Instead of asking the user to register up front you move the password creation field to the end of the checkout accompanied by the question “Would you like to save your details for next time?”

Actually I think it could be made even more compelling by asking “Would you like to save time when you next purchase?”

By understanding that while purchasing the user is focused on the buying process rather than registration, it becomes much easier to find the right solution.

This is user centric thinking in action.

Death to design by committee

We all know that design by committee leads to horrendous design and yet committees happen anyway. In this post I ask why, layout the argument against them and look at ways to overcome the problem.

“Wow that looks great, let me just show it to a few colleagues before I sign it off.”

At first glance the above statement looks positive. However if you have worked on websites for any length of time you know it is the kiss of death.

Even if there is no formal committee, any web designer and most website owners will tell you that once a design is ‘shown around’ only bad things can happen.

Designer with a gun to his head

olly, Shutterstock

The problem is two fold.

First, design is subjective, what one person thinks is amazing another hates. Unfortunately website owners often feel they need to please everybody.

However, once design becomes a group decision you inevitably end up with a bland design that nobody hates but nobody likes either. It is not so much design by committee as design by compromise.

Second, stakeholders rarely have all the facts to make an informed design decision. They don’t know the projects history or understand the target audience, business objectives and success criteria. Even if they do have these insights they rarely have an understanding of why the designer took the approach she did. Nine times out of ten the person is simply shown the design and asked “what do you think?”

With design by committee so flawed and the results so substandard why does it still happen?

Why design by committee exists

Although to those of us who have experienced design by committee the drawbacks seem obviously, to a first timer it can appear necessary and even appealing.

Some of the common reasons for design by committee include…

  • The website owner is not the decision maker - Instead he is a project manager who has to get approval from higher in the organisation. This is a particular problem on larger websites.
  • The website owner feels out of his depth – Many website owners have never run a website or made decisions about design. They therefore feel the need to get the advice and opinions of others to reassure themselves about their decision.
  • Because design is subjective – The very reason designers argue against design by committee is also a reason for it. If design is subjective how can the website owner be expected to make a design decision alone? Surely they need to consult others to get a wider opinion than their own personal tastes?
  • It shares the responsibility - In many organisations there is a culture of blame and ‘arse covering’. This inevitably leads to website owners being reluctant to make decisions alone. They know that if they consult widely then it is harder for them to be blamed when things go wrong.
  • It is politically necessary – Many website owners know that committees are bad for the design process. However, they are left with little choice if they want a design to be approved. Without consulting internal stakeholders the design is likely to get blocked on principle, whether or not it is a good design.

A client feels out of depth giving design feedback

corepics, Shutterstock

When you look at design by committee from a certain point of view you can understand why some take this approach. However, there are things that can be done to overcome these arguments, while at the same time combatting the problems design by committee creates.

How to overcome design by committee

Once you understand the reasons behind design by committee there is actually a number of alternative approaches.

Separate the problems

Design feedback normally falls into two categories – aesthetic and structural. If a design is going to be rejected it is because somebody doesn’t ‘like the feel’ or there is an argument over who gets what featured in the navigation or on the homepage.

The danger is that an entire design will be rejected on the basis of a content dispute or because somebody doesn’t like the blue. This is throwing the baby out with the bathwater.

Avoid this by making sure the stakeholder doesn’t just see the final design. Instead present mood boards and wireframes.

The mood board focuses on aesthetics while the wireframe looks only at the structure and information to be included.

This has two advantages. First, it allows the stakeholders to separate in their minds decisions about aesthetics and content. This prevents entire designs being rejected because of minor issues.

Second, producing mood boards and wireframes is considerably quicker than final designs. This means that even if an element of the design is rejected it does not require major rework.

Divide and conquer

Another tactic for overcoming design by committee is speaking to stakeholders individually rather than in a group. Although this is best done in person, it can also be done over the phone if necessary.

Design committee arguing over colour

corepics, Shutterstock

Although individual discussions takes more effort the benefits are enormous….

  • It prevents design on the fly – When a group of people discuss design they try to reach a consensus. This means that they make design changes in the room and you loose control. By speaking to people individually you prevent this problem.
  • It neutralises the ‘alpha male’ characters – In group meetings you will always find somebody who dominates the conversation (not always a man!) They overwhelm quieter members and bounce people into agreeing with their standpoint. By consulting with people individually you avoid them having too great an influence.
  • It puts you in control – By speaking to stakeholders individually you are the only person who knows what has been said. This puts you in a powerful position that allows you to pick and choose the feedback you use.

Of course any feedback is bad feedback if the stakeholder doesn’t understand the context of the project.

Ensure opinions are informed

Some stakeholders argue that they do not need background information on a design in order to judge it. They say that users don’t have that background, so why should they? The answer is simple, they are not users.

A stakeholder needs to judge the design from a business perspective as much as that of a user. They need to understand the business objectives, they need to know about corporate guidelines and what the competition is doing. In short they need to understand the context in which the design was created.

However, in many cases the stakeholder is simply given the design and asked “what do you think?”

The obvious solution is to provide the background to each stakeholder before asking for feedback. However if we are avoiding group meetings then presenting to each stakeholder is time consuming and repetitive.

Also even if you do present to each stakeholder there is nothing to stop that person passing the design to others for their feedback without your knowledge or presentation.

One way to avoid this problem is by providing the design as part of a presentation either in powerpoint, PDF or an application like Get Signoff.

Unfortunately people will not always read the copy associated with a design. Therefore an even better approach is to record a video of the design with an audio track explaining your approach. This is hard to ignore and ensures the design will never be seen out of context.

The problem does not just lie in controlling the presentation, it is also important to control the feedback.

Control the feedback

If you ask stakeholders “what do you think?” you are encouraging a personal response. This is actually not the feedback you are seeking.

Bill looking horrified at stakeholder feedback

Ljupco Smokovski, Shutterstock

Instead ask questions that focus the stakeholder on the real issues…

  • Does it meet the agreed business objectives?
  • Do you feel the target audience will respond favourably to the design?

It is also worth focusing the client on factors that informed the design…

  • Is the design inline with your corporate branding?
  • Is the design what you expected based on the approved mood board?
  • Does the design reflect the agreed visual hierarchy agreed in the wireframes?

Notice that the above questions all require a simple yes or no answer. This prevents the feedback straying into personal opinion. However, it is also a little restrictive so we always ask “if not, why not?” after each question.

Asking “why not” achieves two things. First it forces the stakeholder to better articulate the problem and ensure there is a valid, well reasoned argument behind their statement. Second, it opens a discussion that a simple yes/no answer prevents.

Unfortunately no matter how well presented a design, there will be times when people cannot agree. In such situations testing can break the deadlock.

Turn to testing

Ultimately any amount of stakeholder feedback has a limited use. The stakeholder is not the user and it is the user that the design must appeal to. That is why whenever possible a design should be tested with real users too.

Design testing can be an effective way of breaking deadlocks between stakeholders. By asking users to comment on design you effectively render the personal opinions of stakeholders redundant. Best of all design testing can be done cheaply and easily using services like Ethnio and What Users Do.

Whatusersdo.com

Finally it is worth reminding stakeholders that no design decision is set in stone. Often the best way to evaluate design is by putting it live and seeing what happens. Things can always be changed later.

For larger sites (where the stakes are higher) A/B testing should be making many of the design decisions anyway. Ultimately testing is always going to be more effective than the opinions of stakeholders.

Conclusions

It is important to note that at no stage in this post have I tried to exclude stakeholders from the design process. I believe that design is a collaborative process and not something that springs spontaneously from the creative mind of a designer.

What I have tried to communicate is that although the contribution of stakeholders are valuable they have to be informed and shaped into something that is actually of use to the designer. Comments like “I don’t like the green” doesn’t help anyone.

Is there a business case for buying an iPad?

So you want an iPad, but is there really a business case to buy one? As a freelancer can you justify the cost? As a website owner will you be able to persuade the boss?

As web designers (and to a lesser extent website owners) we love the latest gadget. The iPad is no exception. However, if we look at it dispassionately from an entirely business perspective, is it worth the money?

Let’s be honest at the start. The iPad is not designed primarily as a work machine. It is designed for watching videos, reading books and surfing the web while lounging around the house. That said, I think there are three possible business reasons for getting an iPad…

  • For testing
  • For the applications
  • For the portability

Lets examine each.

For testing

When you are desperately trying to come up with a reason to buy yourself an iPad this is probably your first line of attack. After all the iPad is selling like hot cakes, which means it will not be long before a lot of people will be accessing your site using it.

It is also true that the iPad is a unique browsing experience especially in terms of the touchscreen. There are also differences between how an iPad and an iPhone render a web page and none of the iPad browser emulators I have found accurately display like the real thing.

iPad Peek

ooo… what is that interesting looking website featured in the screenshot above. You should check that out ;-)

Testing is a fairly solid argument for having at least one iPad within your company. However lets not kid ourselves, we were not anywhere near as keen to spend hundreds of dollars buying screen reader software so we can test on that.

For the applications

The iPad already has some great applications for web designers and website owners. Here are a few of the most notable…

Tweetdeck for the iPad

Tweetdeck for the iPad is the ultimate way to stay on top of your social media responsibilities.

Newsrack and Instapaper

This is how RSS feeds were meant to be read. It is so much nicer being able to relax on the couch rather than sit at your desk (although admittedly you could do that with your laptop).

Newsrack

instapaper

Dropbox for the iPad

Having instant access to all of my files has already been a lifesaver since buying the iPad.

dropbox

FTPOnTheGo for the iPad

This program allows you to connect to your web server and edit files to your hearts content. I wouldn’t want to do a lot of coding on this, but its great for quick changes.

FTPOnTheGo

Audio Notes for the iPad

The best noting taking app ever! Take notes in a meeting while recording the audio. Can’t remember what your notes meant? Simply touch the note to hear the playback of the audio at that point in the meeting. If like me, you are crap at taking notes in client meetings then this will be invaluable.

Audio Notes

Moodboard for the iPad

We use moodboards a lot in our design process. They are a great way to give the client a feel for our approach without spending a lot of time on design. However creating moodboards can be fairly time consuming in their own right.

Moodboard for the iPad makes the whole process quick and painless. It is perfectly possible to throw together a moodboard with the client in a matter of minutes.

iMockups for the iPad

Although nowhere near as sophisticated as something like Flairbuilder, iMockups does allow you to create quick and dirty wireframes with the client. However personally, I prefer pen and paper.

Obviously the list of applications will grow over time. However, although these applications will only become more impressive I don’t think the iPad will ever be a production powerhouse. It is meant primarily for the consumption of information rather than production. At a push it can do both, but you will still find yourself returning to laptop for most production work.

For portability

The final ‘business’ reason for buying an iPad is portability. This really is the perfect conference device and ideal for client meetings.

Lugging a laptop around just for the sake of taking a few notes, checking email or surfing the web seems like overkill. That said there are two flaws in this argument.

First, you already own a laptop so can you justify the expense just for the sake of a few pounds in weight? Second, if you want portability then you need 3G connectivity.

Of course the 3G connectivity is expensive and also only provides 3G for the iPad. What about your laptop? It’s not like Mr Jobs has allowed us to tether our Laptops and iPads. Even if he did that is one hell of a big modem!

One option is to buy a Mifi instead and get a wifi only iPad. This allows you to connect either an iPad or a Laptop to 3G via wifi.

MiFi on the three.co.uk website

So is there a business case?

If I am completely honest I would say the most common answer is no. The testing argument is strong, but it is still early days and although it is nice to know your site works on the iPad it is not critical.

Unless you are a constant road warrior who does nothing but surf the web, answer email and take notes, then the iPad is not business critical. It is a nice to have but you will find yourself constantly returning to your laptop.

However… buy one anyway. There may not be a business case but you will not regret it for a minute. It’s a great media consumption device and it will prevent you from spending so many hours hunched over your laptop in a darkened room.

Sometimes you just have to treat yourself.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

My five commandments for wireframing

When it comes to wireframes I am a fanatic. I believe they are an indispensable part of the development process. That is why I enforce 5 unbreakable rules.

I am a fundamentalist when it comes to wireframing. Its almost like a religious furore. To me they are utterly indispensable and when they are not used it makes me want to smite people!

However, I am not writing this to convince you of the value of wireframing. If you need convincing read “The 7 Wonders Of Wireframes“. But, what I do want to share is my five commandments for wireframing. They are…

  • Thou shall not neglect to wireframe
  • Thou shall not wireframe alone
  • Thou shall not be afraid
  • Thou shall start with pen and paper
  • Thou shall test thy wireframes

Let our sermon for the day begin with “Thou shall not neglect to wireframe”.

Thou shall not neglect to wireframe

From my perspective things start to go wrong when you decide to skip wireframing. After all there are always plausible excuses…

This is such a small change it doesn’t need wireframing

The client won’t pay for wireframes

There isn’t time to wireframe

The problem is that these objections simply are not true. Hand drawn wireframes are incredibly quick to produce. For example, creating a sketch of a tiny change to your web site takes only seconds. However the benefit these quick sketches provide, is incalculable. Ultimately they will save time, money and a lot of potential aggravation. Without them, misunderstandings over requirements can quickly creep in. So let me be clear – I believe in wireframing every piece of new functionality even if it is just on the back of a napkin.

Thou shall not wireframe alone

Another big danger I have observed in wireframing is what one of our developers calls the ‘chinese whispers effect‘. This starts with the information architect who produces the wireframe alone. He then passes it to the project manager who gives it to the designer. The designer turns it into a design and finally passes it to the developer. With each step along the line, the vision of what the site should do becomes degraded. Another problem with this approach is that the other team members get little input into the wireframe so it’s possible the information architect will produce something that for whatever reason is impractical. By the time the designer or developer has seen the wireframe it has already been signed off by the client.

I believe the best way to overcome this problem is to wireframe as a group. Get together the entire project team (including the client if possible) and produce the wireframes. This makes it a much more collaborative process and ensures that any possible problems are identified early.

Thou shall not be afraid

The dirty secret of wireframing is that many people avoid it because they “can’t draw” or are “afraid of looking stupid” when put on the spot in a group. Instead they want to hide away and craft carefully considered wireframes. My message to these people is simple – get over it. Photo of wireframes This fear undermines the power of wireframes. Wireframing should be about thinking out loud. It should involve throwing ideas out there and discussing different approaches. You should come away with a final set of wireframes borne out of many iterations and approaches.

Thou shall start with pen and paper

To keep a light weight, spontaneous approach, wireframes should be initially produced with pen and paper. This also aids group working. It is easy for everybody to participate, to scribble on other people’s work and put together their own ideas. It takes the power away from the person sitting behind the laptop that is plugged into the projector. I am not saying that wireframes cannot become more sophisticated as they are finalised. You can use whatever tool you want from Balsamiq to FlairBuilder or even Powerpoint. However, they should start with paper.

Thou shall test thy wireframes

Finally, I believe wireframes should always be tested. However, that does not have to be a major undertaking. It is enough to show them to three or four people and simply ask if they get it. It doesn’t need to be documented or formalised in anyway. It just acts as a sanity check with somebody from outside of the project.

A personal perspective

Okay so I admit it, I am not really a fundamentalist when it comes to wireframes. I think they’re really important but also recognise my ‘commandments’ do not apply in every company and every situation. The reason I am using such strong rhetoric is because I have seen too many projects falter without the clarity wireframes bring. It’s such a simple thing to do that there really is no reason not to wireframe. So what about you? What stops you from wireframing and what advice do you have to make wireframing more effective?

Review: The best wireframing tool yet?

When there are so many wireframe tools that help plan your website, finding the right one can be challenging. However, I think I have found a real gem.

Maybe your wireframe needs to be more interactive. Maybe you just want it to look more impressive for the client. Whatever the case, there are no shortage of tools that will do the job.

From web apps like Balsamiq and Mockingbird to desktop software like Omnigraffle or even Powerpoint, there is no shortage of ways to wireframe.

Each have their pros and cons but all seem to fall down in one fundamental way – It is hard to share your wireframes with the client. For example Mockingbird is a great wireframing tool, but clients who use IE cannot view them. Balsamiq suffers from a similar problem where wireframes can only be shown as images.

Balsamiq

These tools are all great for internal development. However, as a communication tool with the client they fail miserably.

However, while at SXSW I ran into a chap who has built a tool that overcomes this problem. The app is called Flairbuilder.

Present your wireframes to clients with ease

Like Balsamiq, Flairbuilder is an Adobe Air application. This means it is cross platform unlike many of my previous software recommendations.

Building in Flairbuilder is similar to other wireframing tool. It is quick, easy and fairly intuitive.

Flairbuilder

Things get interesting when you have finished and want to show the client. At this point you have a couple of options.

You can email the saved file to the client and tell them to open it using the Flairbuilder online viewer.

Flairbuilder free view application

Alternatively you can upload the finished wireframe to your own server and send the client a URL which automatically loads that file into the viewer. e.g.

http://www.flairbuilder.com/viewer/?url=http://www.boagworld.com/sample.fbp

Because the viewer is built in flash it is accessible to anybody with the plugin and provides a consistent viewing experience independent of browser or operating system.

However it isn’t just Flairbuilder’s sharing capabilities that makes it so good. It is also the functionality of the application itself.

Everything you would expect and more

Flairbuilder does everything you would expect from a wireframing application. You can add, edit and remove pages. You can insert boxes, text, form elements and other screen objects. These can be dragged around the page and edited to your hearts content.

However, Flairbuilder is not designed primarily as a static wireframing tool. It is designed as a powerful prototyping application. Elements are not static. You can add events to them in order to make them interactive.

We are not just talking about linking pages together either. In Flairbuilder it is possible to…

  • Show and hide elements
  • Display popup windows
  • Create carousels and slideshows
  • Build working tabs
  • Insert usable accordions

The list goes on.

In short Flairbuilder is the most powerful wireframing tool I have yet to encounter.

A reasonable price

What makes it even more amazing is the price. Admittedly it cannot compete with Mockingbird which is currently free. However, for the additional functionality you get over something like Balsamiq (priced at $79) the $99 price tag seems very reasonable.

Any drawbacks?

With me heaping all of this praise on Flairbuilder you might be under the impression I am being paid for this review. I am not. The creator did give me a free copy, but he did so without ever asking for anything in return. The reason I am writing this review is because I am honestly impressed with the product.

However, it does have one drawback. It can become slow when dealing with large wireframes. When you start adding in a lot of imagery (not something one often does with wireframes) it seems to slow the whole system down considerably. This can prove very frustrating at times.

An image heavy wireframe

That said, a recent update seems to have gone some way to improving the problem and I am sure more updates will follow shortly.

Finally, if I was being super picky I would say the application has a small learning curve when you start. This is hardly surprising with so much power under the hood. However, this could prove problematic if you are new to such tools.

Do I recommend Flairbuilder?

So do I recommend this application? Absolutely. At least, I do if you want a tool that can build complex wireframes and prototypes that need to be viewed by a wide range of people.

If on the other hand you just need something simple for your own reference then a free product like Mockingbird maybe the way to go.

193. Get more from Google Analytics

On this week’s show: Paul and Marcus are joined by Matt Curry who shares some advanced Google Analytics techniques. We have a review of Fancy Form Design by Jina Bolton and Paul goes on endlessly about the Website Owners Manual.

Play

Download this show.

Launch our podcast player

Housekeeping

How can I not mention the launch of my book the Website Owners Manual? You are going to be sick of hearing about this, but console yourself with the fact that I have a very short attention span and will soon get bored of it. Please take a few minutes to learn more about this book at boagworld.com/websiteownersmanual. I would especially encourage those of you who are web designers to check it out. This book contains all the information your clients ‘need to know’. It was written specifically to be given away to clients, so helping your projects run smoother. I even managed to pursued my publisher to give significant discounts to those buying more than 5 copies. However, as an extra bonus for boagworld listeners you can also get an additional 40% off of any website owners manual purchase (including the multi-buy packs) if you use the code ‘boagworld’ at checkout.

Back to top

News

Design interactive prototypes – Fast!

With websites and web applications becoming increasingly complex it is often hard to visualise them before build. Photoshops comps fail miserably and static wireframes are little better. The only way of truly communicating how a site is going to work is to build an interactive prototype. Unfortunately building prototypes can be time consuming and expensive. Although clients need to understand how their site will work, they are rarely willing to pay for a prototype. One solution is IxEdit, an ‘interaction design tool.’ This tool has to be seen to be believed, but essentially allows designers to build jQuery driven prototypes without writing a single line of code.

With IxEdit you can build everything from the automatic insertion of HTML to accordion effects. In fact you seem to be able to build most of the elements and effects supported by jQuery. Of course the quality of code is not going to be as good as something written by hand. That is why the product is billed as ideal for prototyping. However, for better or worse, I am sure a lot of web designers will use this tool for live sites too.

Making passwords more usable?

On the subject of Javascript and interaction, there is some interesting work being done with password masking. In show 173 I talked about some of the problems surrounding password masking. Essentially, although hiding passwords increases security it also creates a usability challenge. Jakob Nielsen wrote:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. [It] costs you business due to login failures. Password masking has become common for no reasons other than (a) it’s easy to do, and (b) it was the default in the Web’s early days.

There have been a few solutions doing the rounds. The simplest of which is to add a checkbox allowing users to keep their password entry hidden. However another popular approach is the one adopted by the iPhone. Instead of revealing the entire password it shows only the last letter entered. These two approaches have now been combined and made simple to implement using a sprinkling of jQuery. Delayed Password Masking couldn’t be easier to setup and helps go someway to improving usability.

How to be more transparent

In my post “The 10 Harsh Truths About Corporate Blogging” I wrote:

People don’t like interacting with organisations, corporations or machines. People like conversing with people. People don’t like, trust or want to work with corporations. We associated those feelings with individuals, not companies.

In other words, if you want to make a connection with your users you need to be open, transparent and show the people within your organisation. However, knowing this and doing it, are two different things. That is where a recent UX Booth post comes in. The title of the post is “Transparency: Benefits and Best Practice.” Personally, I think this is a misleading title. It doesn’t really explain in any depth why transparency is important and fails to provide much in the way of ‘best practice’ (I can see I will have to write something on this subject). What the post does do well is give you some cracking examples of sites that communicate the personalities and people behind their organisations. It certainly has inspired me to look again at the Headscape website, and I hope it will inspire you to become more open as an organisation.

In other news – Google and Microsoft talk about stuff

Normally I like to keep the content of this section of the show focused on the here and now. I see little point in reporting what might affect you ‘one day’ in the future. That said, there are two stories that have come out this week, which I simply couldn’t ignore despite the fact neither will have an impact on you today.

Google to add site speed to search algorithm

This week when talking about the importance of website speed Matt Cutts from Google said:

Historically, we haven’t had to use it in our search rankings, but a lot of people within Google think that the Web should be fast. It should be a good experience, and so it’s sort of fair to say that if you’re a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don’t want that as much.

If Google follow through on this thinking the consequences could be massive. In particular this could further undermine the already shaky rankings of flash heavy websites. It could also provide a real advantage to those with the financial resources to throw more server and bandwidth capabilities at slow websites. That said, on the upside it would refocus website owners on the importance of performance and help to speed up the web for everybody. It will also encourage better coding practices maybe push legacy tables based websites down the rankings. Of course all of this could be redundant. We have no way of knowing whether Google will implement this change, and even if they do, how great a priority they will place on speed.

Microsoft talks about IE9

The other news that might shape the future of the web comes from Microsoft. With Windows 7 complete it would seem they are turning their attention to Internet Explorer 9. Apparently the new browser is only in very early stages of development. However, Microsoft are making it clear what their priorities for the browser are. These include:

  • A desire to provide better HTML5 support
  • Significant speed increases for Javascript
  • Improved CSS support
  • Better use of hardware acceleration

All music to my ears. However, I was sad to read that according to Mashable they have only been working on the new browser for 3 weeks!

Back to top

Interview: Matt Curry on Getting more from Google Analytics

Transcription to follow shortly.
In the meantime follow Matt on Twitter.

Listeners book review: Fancy Form Design by Jina Bolton

What is it?

This book, in Jina’s own words, is aimed at anyone who’s involved with any part of the creation of an online form. Split into 5 sections, it covers the Planning, Designing, Structure, Styling and Enhancing of forms used on the internet Written in a format that is more about advising and guiding rather than teaching, this book will appeal to people who are used to the Sitepoint way of writing, and want to really understand the thinking behind creating a successful web form. It’s not one of those “learn in 24 hour” type books, but is more written as if you’re at a workshop run by Jina. This is not a hardcore reference manual that covers absolutely every permeation of a web form, but will have you more confident and eager to apply what you learn to forms you build from now on.

No bloat

With this book, Jina has tackled a subject that frustrates many a web designer. Forms are often too time consuming, too technical, or too stubborn to spend time getting right. Resources on the internet fall usually into 2 categories, not enough info, or too bloated and confusing. What Jina has managed to do is get straight to the point, without the bloat.

A form is just a form. Isn’t it?

Straight from the 1st chapter Jina had me thinking differently about forms. Before reading this book, I would not have said things like sliders, colour pickers, or drag and drop items are elements of form design, but when you look at where they are used, it’s obvious they are. I’m already more excited about forms than I was before. And I think that’s what this book does really well. It takes the process of form creation, and says “yeah, I know, a form is a form. But look, you can do this with it…”. Jina shows you how a form is very much like a website design. You need to think about typography used, colours & imagery, how the form is going to be structured and how it will affect how it used.

Good practices make perfect

Throughout the book, Jina runs through some processes for creating perfect forms. It starts with how to research and find inspiration. Many people who have built forms in the past would probably not have used the processes talked about in the book. It’s an eye-opener to best practice, and to how investing time in tried and tested techniques at the beginning will save you time further down the line. Many of the practices Jina talks about are transferable techniques, that can be adapted and implemented on web design, brochure design, database design etc. What I really liked is the way the book doesn’t force you to follow the practices, but is more like a friend giving you some tips.

Get your hands dirty

Although I mentioned this book isn’t a “teach yourself in 24 hours” jobby, it is by no means a pure reference book. You can follow along with Jina, and get your hands dirty with some HTML markup and CSS. JavaScript is kept to a minimum by using jQuery, and again has example code you can work along to.

In a nutshell

Fancy Form Design is probably the best title for this book. It explains how to design forms that look fancy. Jina does not pretend this book will make you a master of AJAX form submission techniques, nor an expert in JavaScript server-side form validation. It breaks down the components of creating a form, the content of that form, how to jazz it up with some clever styling tricks and jQuery magic, and makes you think about forms more as an important part of your design rather than a stone in your shoe. To me, this book does exactly what it says on the tin. Buy Fancy Form Design from Amazon

Back to top

192. Next Generation

On this week’s show: We have interviews with two great upcoming web designers (Jamie Rumblelow and James Proud) as well as a new segment called Elevator Pitch.

Play

Download this show.

Launch our podcast player

Housekeeping

The Website Owners Manual is finally out this friday! To celebrate its launch, I will be running free public Consultancy Clinics on the 20th November starting at 3PM (UK time). If you would like free advice about your website or would just like to hear the advice given to others, then join the conversation via the Boagworld blog.

Back to top

News

Mockingbird

A big part of most webs projects is wireframing. A wireframe is a communication tool, a design tool and a specification tool. Without it, there can be misunderstanding and miscommunication.

I have written about wireframing before. In that post I outlined the benefits of wireframing, but I also recommended tools including something called Balsamiq.

Balsamiq is a cross platform application that allows you to quickly put together wireframes that can later be easily edited.

Although Balsamiq is a great application it does suffer from one major flaw (beyond comic sans being its default font!). Balsamiq is great for creating wireframes but is not good for sharing them.

Balsamiq saves files in its own propitiatory format and although it will allow the export of images, this does not work well for interlinked pages.

There is a plugin called Napkee that allows you to export Balsamiq as HTML and CSS. However, this is clumsy at best and still needs to be hosted somewhere.

Mockingbird

Enter Mockingbird. Mockingbird has obviously been closely modelled on Balsamiq and yet has the advantage of being an online application. It can do pretty much everything that Balsamiq can, but also allows you to share wireframes with others. You can even embed them on your own website, so others do not know you are using a third party tool.

So whether you are a web designer producing wireframes for your clients or a website owner building them for your own site, I would recommend giving mockingbird a try. Best of all its free, so there is no reason not to.

More on redesigning

Two weeks ago we featured a Web Designers Depot post entitled “Preparing and planning for a redesign.” It was a good post that focused on what clients need to do as part of a website revamp.

This week a post entitled “Redesign: When To Relaunch The Site and Best Practices” tackles a similar topic. However, what makes this one different is that it is focuses on web designers redesigning their own websites.

It is an interesting topic that certainly comes with its own unique challenges. As the author says:

How can we work on designing our clients’ websites successfully every day and then perpetually neglect our own?

The post goes on to answer this question as well as suggest ways we can avoid our own websites becoming neglected. Subjects she tackles includes:

  • Why we struggle to redesign our sites
  • Whether we should be redesigning at all
  • Finding the time to redesign
  • Planning a redesign
  • Updating your brand
  • Wireframing
  • Design
  • Development and testing

The advice is great and although this post is aimed at web designers redesigning their own sites, it has lots of good advice that applies to any website owners. Certainly worth checking out.

Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode

It’s frustrating but testing your websites is an important part of our job. To make matters worse, it is much harder to test in multiple versions of Internet Explorer than it should be.

The problem as I am sure you know, is that it is impossible to install IE6, 7, and 8 side by side under the same operating system.

One solution to the problem is IETester. This truly remarkable piece of software allows you to easily switch between different versions of IE and even provides a load of development tools similar to Firebug.

Although there is no doubt that this is an impressive application, it is not perfect. No matter how good an emulator is, it is still not the same as using the real thing. As a result I am only willing to use this for ‘in development testing’. Before launch, I would still want to test in an actual build.

In the past this would have involved running multiple operating system using Virtual Machine software such as VMware or VirtualBox. However with the arrival of Windows 7 we now have another choice.

According to a post on Sitepoint this week it is now possible to ‘Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode.’ The post explains that this miracle is possible thanks to Microsoft Virtual PC.

Virtual PC is Microsoft’s alternative to VMware and VirtualBox. It’s available as a free download for most versions of Windows. As a standalone product, it’s functional but offers fewer facilities than the competition. However, XP Mode is Virtual PC’s killer feature. It provides:

  • a fully licensed, stripped-down, virtual copy of Windows XP SP3.
  • a clever facility which integrates the guest Windows XP OS with your Windows 7 host. In effect, you can run XP applications as if they were native Windows 7 programs. Although the XP application is isolated, it can still access the host’s files and systems.

The tutorial then goes on to explain how this technology will allow you to run the three versions of IE side by side.

Whatever our role, we should all be testing websites. As a result this is an absolute must read.

How to create clear web navigation menus

Last week I found myself in the unusual position of disagreeing with Gerry McGovern. Fortunately that has quickly changed with his latest post entitled ‘How to create clear web navigation menus.’

Gerry presents four ways you can improve your navigation in his own tongue-in-cheek style:

Stick with conventions

Every year a phone directory is delivered to my home and every year it’s the same. Have they no imagination in those phone companies? I mean, come on, hasn’t A-Z been done to death at this stage? Why don’t they try Z-A for a change?

Avoid audience based navigation

We once dealt with a department of agriculture who had the following menus: Farmers, Producers, Exporters, Researchers. What if you were a farmer who was also a producer, who exported most of your produce, and who right now wanted to do some soil analysis research? Where should you click?

Be consistent

Have a consistent place for your navigation. If you use the left column, keep it there. Don’t start shifting the navigation into the center or right columns as you go deeper into the site.

Avoid quick links

“Come, little links, gather round,” said the designer to the links. And the little links gathered round, all happy and expectant.

“Well, the good news is that we think you’re very special links and because you’re so special we’re going to call you Quick Links,” said the designer.

“Quick Links!” they shouted in unison. Then a silence fell and a little voice was heard to say:
“Master designer, does that mean the other links are Slow Links?”

I am being to wonder if Gerry is loosing the plot ;-)

Back to top

Interview: The next generation

This week we are doing something a little different for our interview segment of the show. We have two great interviews with two up and coming stars of the web design scene. There is some real talent emerging and we are keen to showcase their work and passion here on the show.

Jamie Rumbelow

Paul: So, yet another interview from Future of Web Apps and this time we are talking to Jamie Rumbelow. Good to have you on the show Jamie.

Jamie: It’s great to be here, it’s unexpected and …..

Paul: … and cool

Jamie: … and very cool. It’s very cool to be here on Boagworld

Paul

Anna: Hello Anna

Paul: There we go, good. Anna likes this, so much I know. Um, yeah, so we thought we’d get you in. Um, I know nothing about you. We’ve talked a bit on Twitter

Jamie: We have

Paul: But that’s about it, so tell me a bit about yourself, your background, a bit of what you’re doing and that kinda thing

Jamie: Right well, um, well my name’s Jamie

Paul: Ok

Jamie: Jamie Rumbelow and I’m fourteen so I’m still…

Paul: Excuse me! You’re fourteen!

Jamie: Fourteen

Paul: Ok, I just wanna establish that, that’s fine

Jamie: So, I’m, I’m, I’m kind of a developer, um but not quite cos I’ve still got stuff to do…

Paul: Yeah

Jamie: Like school and…

Paul: (laughs) just GCSEs and stuff like that, yeah

Jamie: You know, um, yeah I’m trying to get my name out into the scene. I’ve been actually started to do talking, I’ve been kinda launching a ‘speaking’ career

Paul: Yeah

Jamie: So I’m hoping to follow in the footsteps of the great Paul Boag

Paul: Oh well, you know

Jamie: Um…

Paul: Don’t laugh Anna. Show respect

Jamie: Well yeah, I spoke at Tomorrow’s Web which was a conference run by a guy called Grant Bell and it was all about young people in technology

Paul: Yeah

Jamie: And Anna spoke at it too and um it was, it was really good a day, wasn’t it?

Anna: Hmmm, yeah it was really good

Jamie: So yeah, really enjoyed that, um…

Paul: Ok. So, I mean…..you’re fourteen and you’re trying to get your name known in the scene. Um, that’s quite ambitious to start that at fourteen. Why? Why, why are you so desperate to kinda get in there now?

Jamie: Well, I’ve always been quite enthusiastic and quite…..driven, um, and I really want to, you know, come out of school, come out with…….education (laughs)

Paul: Yeah that would be good

Jamie: Yeah but actually having made a name for myself and already have people knowing about me, interested in stuff I do, so that eventually, when I do actually launch as a full time career I’ll already have good grounding to work on. But it’s not just that, I want to meet cool people and I wanna do stuff like this, cos I…..you know, meeting loads of amazing, great people it’s a really really good benefit.

Paul: So, I mean, you know do you find with the…you know….as you wanna do loads of speaking stuff, you’ve set up and run your own event as well

Jamie: Yeah

Paul: So, tell us a little a bit about that actually before I go on to the next thing

Jamie: Oh well, it’s called Cambridge Geek Day, um, I had the idea …last year, in December and my mum said ‘It’s the most expensive, time consuming thing you could possibly do, why are you doing it?’ And she actually forbidded me from doing it.

Paul: (laughs) So that went well didn’t it! (laughs again)

Jamie: Yeah, so anyway, I, I hid it from behind her back, um, for ages…..and you lying to your mum, it’s really…..

Paul: That’s not good. Kids don’t lie to your parents

Jamie: Yeah exactly. But I knew….I knew that I could pull it off. Anyway I got sponsorship

Paul: Really, you managed to get sponsorship?

Jamie: Yeah. I got sponsorship from loads of really really good sponsors. I got loads of great speakers lined up and……anyway it’s all steaming ahead right now. So I… my… I woke up to 300 T-shirts being delivered to my door and my mum had no idea about it. So I just told her that I got sponsorship and she was very fine with it

Paul: Your mum is very cool, I have to say. That is impressive after she banned you

Jamie: But yeah, I think she was just worried about me cos, you know, I’ve got more important things to do.

Paul: Yeah

Jamie: So yeah (laughs) back to the point. Um, yeah so it’s a conference for developers, it’s about developery topics

Paul: Right

Jamie: And that’s kind of…because that’s what I know about, that’s what I do, I’d rather run a developer conference than a design conference, purely because…….

Paul: Yeah. And it’s the same…..specifically young people or…

Jamie: No, no, there aren’t enough young people in Cambridge

Paul: In the Cambridge area

Jamie: So, I did an internship with a company called Broader Sheet. Have you heard about them?

Paul: No I haven’t actually

Jamie: Well they’re making an intelligent news aggregator, um but they’re a small start up and they work from the Red Gate offices, have you heard of them?

Paul: Yes

Jamie: Um, so I was in the Red Gate offices and Red Gate do a start up incubator where they have loads of start-ups working within the offices and getting the food and that sort of thing. Um, and I met loads of really really cool people, really passionate, intelligent people, in Cambridge, doing start-ups stuff and being…..you know, so I thought it would be a really great opportunity to kinda capitalise on that amount of people and it’s a bit of a faff to come to London and go to Brighton and you know all the places where the conferences are held. So I thought I’d run my own one

Paul: Yeah, good for you…totally. So when’s that happening?

Jamie: November the 21st

Paul: Ok, so not long then

Jamie: No, not long at all, we haven’t started selling tickets yet but depending when this is out, if it ever is (laughs)

Paul: It will be out don’t worry

Jamie: We’ll probably be selling tickets by then. Tickets are gonna be £60

Paul: Ok

Jamie: But with that you get coffee when you’re….and biscuits and tea and stuff when you arrive and during all the breaks and you also get a two course meal for lunch. Um, and we’ve got an after party and it’s gonna be well put together and I’m making sure it’s high quality

Paul: See, I mean, that…. you gotta say is really impressive because so often I’m like, encouraging you know people to start up local groups and to get meeting up and if there’s nothing in your area then just to do something. And people always come back with ‘Oh I don’t know if I could do that’. And you think, no disrespect, but if a fourteen year old could that then you know then these guys who are web professionals should be able to do it. So, I think you’re a…..you’re actually incredibly inspiring from that point of view.

Jamie: Well, I’m honoured, thank you

Paul: (laughs) So, I mean what’s the plan? You’re gonna do your GCSEs. Are gonna go through the normal career path of GCSEs, A Levels, University? Or what, you know….have you got any thoughts on that?

Jamie: Well, I wanna do A Levels, purely because……it’s shows a certain level of intelligence, you know to have A Levels and they’re good qualifications. Um, but I’m not quite sure about Uni. Now a lot of people who are young and have already got a bit of a head start in the tech scene didn’t go to Uni, Anna included

Paul: Yeah, Anna for example, yeah

Jamie: So, I don’t know whether it would be so much benefit….educationally. As far as life skills go, maybe it would be good, so you know, be able to grow up a bit and live by yourself and that sort of thing. But I think I’d still be able to cope with that so…….my family want me to go to Uni but I don’t particularly want to

Paul: Well, you know you don’t have to make that decision yet which is helpful

Jamie: No, plenty of time

Paul: So I mean…….Ok let’s get your perspective on the web scene as it stands at the moment because you know there’s a lot of old crusty people like me that are, you know, saying what the next big thing is and what we think is important and all of the rest of it but I’m quite interested in your perspective you know…you’re gonna be…so…..let’s say you…….let’s say you went to University, so you’ve got two years of A Levels, well you’re fourteen at the moment so it’s two years until your GCSEs isn’t it

Jamie: I’m doing….I’m starting my GCSEs this year, I’m in Year 10

Paul: Right, so that is one or two years……one…two until those are taken? Let’s say two. Then another two years A Level, right? Let’s say you didn’t go to University, cos otherwise we’re getting too far ahead. So, let’s say four years time, what do you think you’re going to be doing when you come out and start work? What do you think is gonna be different?

Jamie: Well, I think the….I think the Web’s being opened up a lot more in terms of actually a platform rather than just a resource. So, I spoke about this at Tomorrow’s Web and it was talking about how the….that actually from the very beginnings of the Web it was always documents, it was always……you know just information linking to one another. No we’re starting to see things popping out from that like the Web 2.0 movement, and Google Wave, which is really cool

Paul: Don’t tell me you’ve got…….

Jamie: I’ve got a…..do you want an invite?

Paul: Yes, I flippin’ do

Jamie: Ok, I’ll send you an invite

Paul: Thank you. How come he gets a copy of Google Wave before me?! How did you manage to swing that?

Jamie: Oh, I was in the Developer Preview and…..

Paul: Ah, that’s just mean…..

Jamie: Oh and I know Bob from Huddle, he’s CTO at Huddle ….I think

Paul: God, he’s fourteen and he’s better connected than I am. That’s really irritating

Jamie: I’ll send you an invite

Paul: No more. No more of these young talented people. We’re not interviewing anymore young, talented people on the show. It’s just depressing. Anyway, sorry you were saying…..cool stuff

Jamie: So, yeah Google Wave is really cool and I don’t think it’s the end all solution to communication on the Web, definitely not. And it’s…..the Developer Preview especially was mediocre in terms of implementation, how it was written, it was buggy, the user interface was terrible, etc. Um but I can see the ideas behind it and the way it’s going forward and I really think that within a few years if we…..I think we really need to re-think how we talk and how we use the Web to communicate. Cos as I said it’s very kinda…..almost linear conversation, it’s been….you know we’ve always had bulletin boards or blogs with comments that you know…emails, all these communication platforms that we have on the Web aren’t particularly…….well they’re not particularly suited to the Web

Paul: Mmmm, and even if you ….email is like the kinda equivalent of the page-based stuff is just sending letters backwards and forwards isn’t it?

Jamie: Exactly. It’s like faxing

Paul: Instead of things like APIs and stuff like that you know you’re passing data backwards and forwards which in much more inline with Google Wave and passing….you know….chunks….packets of data of information backwards and forwards, so….

Jamie: But APIs really excite me

Paul: Oh do they?

Jamie: Yeah A) from a techie point of view cos I you know…um and also cos you can do so much with so little code, so little time and you can actually make some really cool stuff. This guy called Chris Harlman

Paul: Yeah I know Christian

Jamie: Yeah, he’s good fun

Paul: Yeah he is

Jamie: Um, he’s the …..he’s the Developer Evangelist for Yahoo I think

Paul: Yes, that correct, something like that

Jamie: And he’s been preaching YQL a lot and YQL is this um….SQL-like which is the query language that communicates databases. But YQL is like that but for the Web so you can query APIs effectively and then it all goes to Yahoo, Yahoo caches it, it will go to Yahoo servers, all that sort of thing but it’s all actually really really well thought out and well put together and his blog is all powered by YQL. So, it’s got all his presentations, all the books he’s written, all of the events he’s going to… from up coming, he’s photos from Flickr, he’s tweets from Twitter, all of his social presence is all combined into this one through a couple of YQL codes and I think it’s really cool that now we can do that. I think that we just need to start thinking about how we can use that data in different ways and just expanding that more and making that even…..

Paul: So that’s the kinda stuff you’d like to get into when you’re actually…in the…

Jamie: Yeah, maybe

Paul: Maybe?

Jamie: If I don’t…if my ambitions of being a rockstar don’t….you know…….turn out, yeah

Paul: Yeah, don’t pan out. I think you’re going down the wrong route for that, I have to say. You’re mixing with the wrong crowd if you wanna be a rockstar.

Ok well, it’s really good to talk to you Jamie and it’s good see the future of Web Design is safe, that there are people like you out there and that you’re getting stuck in now. I hope it’s a real encouragement to…..cos I know a lot of students listen to this and so it’s really good to hear that there are other young people out there getting stuck in. So, thank you very much

Jamie: Thank you

Thanks goes to Debbie-Jayne Reyes for transcribing this interview.

Also one quick note about the geek event Jamie was organising. Unfortunately this has had to be delayed. However, if you follow Jamie on his blog then you can find out when it is rescheduled.

James Proud

Paul: Ok, so joining me is James Proud from GigLocator. Good to have you on the show James.

James: Thank you for having me.

Paul: Now basically I’m doing this interview because Anna told me that you’re really cool and you talk some great stuff and I needed to get you on the show, so Anna is here too. Come on say “Hello”.

Anna: Hello.

Paul: And she’s now going to ask all the questions. Go Anna.

Anna: Oooh.

Paul: I’ll break you in. So first of all, tell us about GigLocator.

James: Sure, well GigLocator is a live music site, basically. Its completely worldwide, so whatever country, genre of music, artist and we will hopefully have all their past and upcoming gigs, and you’ll be able to easily find the tickets for the gigs so you don’t have to pay through-the-nose, for example, if you saw a gig on ticketmaster and it was £20, if you come to us you might see was the seetickets gig link and that’s £15. So you can get the cheapest tickets always up to date and you don’t have to miss out on gigs and its just making it a lot easier to go to music you love without have to trawl through all the ticket sites etc.

Paul: And you said you created this yourself and with one other guy?

James: I have got a co-founder. He’s mainly dealt with all negotiations with the ticket providers, I’ve done the design front-end and back-end stuff.

Paul: The immediate thing that springs to mind is: flipping heck that’s a big lo’ job to undertake! You’re looking at being worldwide here and you’ve had to arrange and negotiate with all the ticket providers.

James: Yeah, it’s been quite hard, he’s been dealing with people in the Czech Republic and GermansÉ Yeah it’s quite hard, but we’ve managed to get a lot of good data.

Paul: Ok, so you’ve got some good data, but all of these ticket people all round the world have all got their different systems, how the hell do you build something like that?

James: Three months of building a system that can normalise all of the different types of data. So whenever we get a new feed in, for example, you have a really decent feed that has all the artist names and the address of venue, then you find another feed that doesn’t have the artists name, it’ll just have ‘the artist name – Live Tour’. So all you’ve got to work with is ‘Madonna’s Live Tour’. So you’ve got to build a system that can decipher that its actually Madonna performing though you only have that title. They might only give you the name of the venue, so we’ve got to deal with finding all these things and putting them all together, but things are going quite well and we managed to sort it out.

Paul: That’s pretty impressive. So is this venture capital funded or is it being boot-strapped, how are you going about building it?

James: We are boot-strapping at the moment. We didn’t want to go down the route of getting seed funding early on because I could build it without the funding so we’ve just basically knuckled down and lived without money for a bit, but we’re going very well at the moment.

Paul: That’s quite a scary thing to do, did you work somewhere previously?

James: I was doing my A-Levels and doing some freelance work on the side, so I used to work with my co-founder for Coca-Cola music, Universal music doing freelance work there and that got us into the live music space. Then 6 or 7 months ago I said ‘I’m not doing freelance work anymore and I’m just going to focus on this’. So i’ve not earned any money for our consultancy and he’s just done small jobs on the side to pay for server costs, and it’s going fine.

Paul: That’s a really brave decision to make. So how old are you?

James: I was 18 a month ago.

Paul: Ok, so you’ve come out of A-Levels straight into this. That in itself is a big thing to do. You have the thing: ‘Do I go off to university? What about my career path?’ Why have you gone down this route?

James: I’ve taken a gap year out, so at the end if this goes tits-up I could go to univ, but the rate that things are going now I hopefully won’t. I’ve never really wanted to work for anyone else at all and I saw this as a chance at an idea and I was getting some great feedback so I thought let’s just do this and focus my time on it.

Paul: Its really interesting, this is what ScrunchUp is all about, which is now online and up and running. Little cheer from Ryan in the background there. This is something you struggled with as well Anna, what you’re doing: you did freelance for a bit, now maybe you’re looking for a permanent position. Do you ever regret not going to university?

Anna: Of course I do, all my friends are at uni, they’re all having fun, they’ve got it quite easy. Sometimes I feel like I’m not ready for this. I don’t regret not going because I just think working is better for me, but I do sometimes wonder: ‘What would it have been like?’ So either way I would’ve regretted my decision.

Paul: You’re just someone that’s ‘glass half empty’ kind of person. The green isÉ ‘The green is always grasser on the other side’? The grass is always greenerÉ

Anna: One things I wanted to ask you James, has your age got in the way of what you do or has it helped you?

James: When I was first developing, it got in the way because I couldn’t spend my whole waking life doing it so I’d have to go to college. So now that it’s finished its no longer a factor. It’s helped in a way, I always tried when doing work before launching before I had to show my face I never really promoted my age I just didn’t think it was important. But it’s helped me the fact that people are amazed that you’ve done this at this age, but I’ve done coding since I was 9 and I was paid at 12.

Paul: You got paid? Hang on, you got paid to code when you were 12 years old?

James: Yes.

Paul: I fell really old! When I was 12 they didn’t have blooming computers! So what’s next then? Is this actually launched and up and running?

James: Yes it’s been up and running for about 7 weeks, the reception, the things that have happened are amazing, it’s phenomenal.

Paul: Give me some examples.

James: Im now getting paid to speak at places. I was on the TV.

Paul: You were on the TV? Tell us about that, being on the TV’s cool.

James: A couple of days ago Channel 4 were looking for someone that runs a website but also has experience with Google Wave and I did a small piece on the news about Google Wave and how it affects me as a web developer and a site owner.

Paul: Ok, let’s go off on a complete tangent because I haven’t played with Google Wave. What’s it like? Is it as good as everybody says it is?

James: It’s quite good, but at the moment it’s lacking features. But Google’s made it so open that people can make features. So today they released it to 100,000 people. So hopefully with all of the developers that are now on it some amazing things will happen, give it a month or so and it should be quite a good platform.

Paul: That’s the big hurdle, you can build a great app, but if no one has heard of it then you fall down. Especially when you’ve spent so much time negotiating all these deals and developing it. So how are you – you’re boot-strapping it still, you haven’t got a lot of money behind you – how are you building a bit of momentum behind this?

James: We were at FOWA today, I was invited to come down. I got a free ticket. So I’m doing a bit of work with Sun, promoting it that way. But we’ve not actually gone full steam ahead with our PR or press because we are waiting to develop a few exciting new features that we think a lot of people will be interested in. So we’ve built a solid platform that does what it does: gigs, tickets etc making sure that’s perfect. But now we’re building on some extra things onto that so later in the month we’ll release those and alongside that we’ll start doing press.

Paul: So how are you intending to do it, or is it mainly your colleague that’s doing that?

James: The press stuff? Well because I’ve been doing all the speaking and I’ve been around London and all the events, I’ve built up a good relationship with quite a lot of people. So we are going to be targeting some music related stuff, just try and get it out there. Whatever that it takes. I’ll do anything. Take one for the team.

Paul: That’s a good entrepreneurial spirit. I like that very much. Have you got any more questions?

Anna: Yeah, so where do you see yourself in the next 5 years?

James: I’d like to say a year or so after I’ve had my exit. Either this is doing tremendously well still, or its had the exit. But hopefully I’ll still be working for myself working on fun things whatever it may be.

Paul: So that’s the plan, to go for an exit point where you sell the app and move onto the next thing?

James: Yeah, I think everyone is looking for their big exit. It’s either an exit or an IPO. If you’re money orientated. Work for the love of it. No I love it, its a great thing, it’s my life.

Paul: You could build a lifestyle business, for example, the business I run is a lifestyle business. We run the company so that it gives us a good standard of living and we’ll run it forever like that. Im not criticising, but looking for an exit is a different way of doing things. Well that was really interesting, i think its great to talk to people that are actually out there building these web apps but not with massive budgets and not ‘in the Valley’ and all the stereotypical stuff, you’re boot-strapping it, there’s just a couple of you guys doing it and it’s still possible.

James: It’s not about having a mass of money, it’s about losing control of your company. Why would you want to be a minority shareholder in a company, it’s your baby. I personally wouldn’t be motivated to work if it wasn’t mine still.

Paul: Of course. Thank you for your time and we’ll get you back on in the future.

Thanks goes to Simon Hamp for transcribing this interview.

Back to top

Elevator Pitch: A/B tests.com

We are introducing a new segment to the show this week. It is called Elevator Pitch and is produced by our very own Paul Stanton. The idea is that Paul interviews companies who have a product that might be of interest to you guys. They give a quick elevator pitch and Paul asks them some questions.

We start the series with ABtests.com.

Stanton: OK so today I am here with Joshua Porter, Hello Joshua

Joshua: Hi Paul;

Stanton: How are you doing?

Joshua:I am doing good, what time is it there?

Stanton: It is about 10:30 in the morning.

Joshua: Ok it is still dark here so

Stanton:(laughs) So where abuts are you based

Joshua: I am north of Boston in a small sea coast town called Newburyport, Massachusetts

Stanton: Ok so is it night time there? I can never figure out the timezone differences.

Joshua: yes it is still dark, nobody is up so this is usually when I get most of my work done actually

Stanton: Nice and quiet I guess

Joshua: Yes absolutely

Stanton: So we have got you on today to talk about a website you are involved with called abtests.com, so give us the elevator pitch, what it is and why you made it.

Joshua: Sure, so yes its abtest.com and it is a really simple site the idea is that we upload and allow other people to upload the results of A,B tests. For those not familiar with A,B testing it is really pretty simple if or while you are designing a web page or screen in a web application you might design two separate instances of that page and then test to see which one works better. So you split up your traffic your audience coming to the page into two and 50% of the people see design A and 50% of the people will see design B and then you measure to see which audience converted better against some goal you have set up. For example say you have a sign up in a web application and you have a sign up page and you want to test two different variations to see which one works better, that is essentially the gist of A,B tests. The reason why we created the site was for people to share their tests with others so the way it started was I had been doing a bunch of testing and I had seen some people online writing up some of their tests and what I found was that I always found the results really fascinating. So for example we have some write ups on the site now where people have provided two screenshots of design A and design B and the only thing different is simply the placement of the call to action button, the primary sign up button and after doing testing it turns out that sometimes the placement actually matters, if you place the button in a place on the page then you actually get more people clicking on it. So these sort of things fascinated me and I had seen a few of them written up in blog posts and things online but I wanted a lot more of them and the designers that I have talked to really liked that concept as well so we created the site. I created it with a couple of guys from a start up called performable that I am involved in as well. You know we are kind of seeing where it goes at this point. We have had a lot of interest in it and we have found some interesting issues around it such as for example some people will never upload the results of their test because they want to keep them secret but others see it as a great way to promote their startup or something like that.

Stanton: Right so you are not actually providing the mechanism for people to do A,B tests this is simply for people that have had results and want to publish them and share them with other people, that right?

Joshua: Right now yeah, we do have quite a few things in the works but we will not be providing like a piece of software that allows you to do A,B testing. We might provide some other software that does things in and around testing, ermm but there are plenty of tools out there one of the tools the most popular one is google website optimiser which is a free tool which allows you too do A,B Testing and one of the folks who is promoting abtest.com with us is kissmetrics they have some tools in that space too. So we are not going to compete with them in any way.

Stanton: OK so how long has the site been running for now?

Joshua: The site has been running for about a month now I think

Stanton: OK and roughly how many tests are up there now

Joshua: We have er gee I don’t know what the number is 12 or 15. I haven’t actually been spending as much time as I wanted to on the site because I am actually working on a startup and building some other software. But we are .. the big challenge again is kind of getting people comfortable with the notion of sharing their tests. That is kind of the big challenge now so we are working on that.

Stanton: Sure, it is quite amazing to look through the stuff that people have put on there and you see the screenshots side by side and you have to look closely on them to see what has changed because it shows how just the tiniest change in either the text or the placement or the colouring in some cases can lead to quite big percentage improvements on calls to action so I think it will be really useful for people to come and have a look through and hopefully share their own tests as well.

Joshua: Yeah, one of the big findings that we are seeing is that testing like this or viewing the results of these tests really changes peoples perceptions of design, I mean it is kind of a pretty big insight to some people to see that OK you know the colour of a button does change things, the call to action copy can have a dramatic effect so what I hope kind of for the site and the test results is that teams can take them back and start talking about real design issues and hopefully push to the background things like politics and emotional debates and “this is what I think” and so this is what we are going to try type of arguments and say you know what testing really does work. lets really start testing things. I think at some point teams will start focusing more on really important things, like their users, the words that matter to their users, the things that motivate their users and really kind of return to the basics of design.

Stanton: Great so you have kind of given us a couple of hints to where the site may go in the future, have you any other plans

Joshua: SO two things I am working on right now. One is to really fill out the site with information how to test. as I mentioned we are not planning on providing a tool to test, but people want to know what A,B testing is. They want to know how to do it and they want to see examples of what other people have tested so they can get a idea of what they should test. That has been one of the biggest surprises that people do not know what to test so people you know have the question shall we test another colour?, should we test different copy or different button styles? whatever. So that has been a big thing so we are going to round out the site with a bunch of information, content basically around where to test and some of the interesting topics. So for example actually I am working on some copy now that is what A,A testing is, a version of A.B testing but is a version of testing where you test the same thing twice so 50% of people, you basically segment your audience into two parts and the two parts seem the same thing and that might sound like a ridiculous idea because you are testing the same thing twice but it is actually valuable thing to do early on when you are getting into testing because it tells you how much noise is in your system. So if you run design A versus design A itself and you have some difference there, so one has slightly higher conversion than the other and of course all of the numbers you get from testing are fuzzy to a certain extent the question is how much, so if you have some variance there and you know there is noise in your testing setup and you know that is your margin of error. So after you do A,A testing then when you move on to A,B testing you can say the margin of error is about 1% so then in that case if B outperforms A by 1% you know it is not really, it may not be a significant result because there is that much noise in your system to begin with. Anyway tat is just one example of some of the content stuff we are going to fill the site out with going forward.

Stanton: So sounds really good. A,A testing is something I have never heard of before so that is quite interesting and I will guess you will become quite a good resource for all this testing, for people to go to.

Joshua: yes I hope so.

Stanton: So where can people find out more information.

Joshua: So they can go to www.abtests.com check it out we are actually going to push some changes up soon that allow you to view tests and view related tests so hopefully it will be easier even than it is now.

Stanton: Good stuff, well thank you for that

Joshua: Thank you Paul

Stanton: We will hopefully check back with you in the future to see how things are going.

Joshua: Great sounds good.

Thanks goes to Shaun Hare for transcribing this segment.

Back to top

The 7 wonders of wireframes

Quick, hand drawn wireframes can provide substantial benefits that will save you time and money.

Wireframes have become an intrinsic part of the way we work at Headscape. In this post I want to explain why we are so enthusiastic about them, and how we use them in our process.

However before we do that, lets take a step back and look at exactly what we mean by wireframes.

It is easy to think of wireframes as HTML prototypes of an entire website (or at least key sections). Although this is certainly one type of wireframe it is not the one I wish to focus on.

The problem with HTML prototypes is that they are time consuming and expensive. Building a functional prototype takes a lot of work and in most cases is  discarded once the final build begins. Unless you can find a way of turning your prototype into a working site, this strikes me as a waste of resources.  In my opinion, this cost precludes their use for anything other than the largest and most complex project. However, wireframing does not need to be like that. At Headscape the vast majority of wireframes are hand drawn sketches.

An example hand drawn wireframe

This most basic approach brings with it 7 benefits:

1. Improvements in team working

For us wireframing is not just the responsibility of a designer or user experience expert, it is something everybody participates in. We will regularly bring together designer, developer, project manager and whoever else is involved in the project, to wireframe key functionality. This is valuable because it improves team working and helping each member to better understand the role of others. It is also an excellent way to breaking the waterfall model of running projects, where each team member essentially works in isolation handing off work to the next person.

2. Clearer communication

These group wireframing sessions not only improve team working, but also communication.

We used to suffer from a problem where developers was not included early enough in the project cycle. This led to functionality being promised that was difficult or impossible to build. By including everybody in the wireframing process this problem has been eliminated. A developer will quickly spot issues in a wireframe that may be missed if  buried in an email thread or functional specification.

That is the beauty of wireframes. Because they are visual it is much easier to grasp what is being proposed. Specification documents and emails are fine, but they are harder to visualize and perceptions can vary. Wireframes leaves much less room for misunderstanding.

3. A more engaged client

Of course, wireframes do not just improve communication within your own team. They also improve communication with the client. Engaging with the client continually throughout a project is vitally important. This is especially true when it comes to visual design (see The Battlefield of Design: Designers vs Clients). A client who has seen a wireframe and has been given the opportunity to provide feedback, is more likely to sign off the final design.

With some of our clients we go even further by including them in the wireframing process. We have found that with the right client this can significantly increase the quality of work. What is more, it gives the client a sense of ownership and engagement which invests them in the final design.

4. More numerous approaches

Another huge advantage of hand drawn wireframes is how easy they are to produce. When all you need is a pen, some paper and a few seconds to sketch something out, it becomes liberating. It lets you to explore many more approaches than full comp production allows.

Much of our approach is based on Leah Buley’s presentation at this years SXSW. She encourages the production of a wide variety of wireframes tackling the problem from many different angles. We will produce wireframes aimed at different user groups, different levels of expertise, and with emphasis on different business objectives or brand values. The aim is to generate as many ideas as possible.

Thanks to Paul Mooney for the use of this video

Once you have established a wide variety of approaches, you can refine, discard and combine them until you have two or three that could work.

It would be impossible to explore this number of different approaches in any other way.

5. A basis for testing

Once you have two or three wireframes with potential, the next step is to test them with real users.

There is a perception that it is necessary to test against completed comps or HTML prototypes, however that is not the case. There is real benefit in testing even the most basic hand drawn wireframe. You can…

  • ask users what they would click on to complete certain key tasks,
  • get feedback on the naming of labels,
  • establish whether you have the right visual hierarchy.

Obviously testing against a hand drawn wireframe is not as informative as testing against a final site. However, it does enable you to identify problems before too much time has been invested.

6. A greater willingness to change

The problem with user testing a final design, HTML prototype, or worse still a completed site, is that a considerable amount of work has already been done. This makes it hard to change.

The same is true if a client rejects a finished design. Hours of work have gone into that design and the designer feels committed to that approach. There is a substantial cost in starting again.

This is not the case with hand drawn wireframes. Because they are quick and easy to produce, it costs nothing to discard them and try another approach. This willingness to change makes you much more responsive to the results of user testing and feedback from the client.

7. Faster and cheaper projects

Finally, although wireframing in this way takes a small investment of time and money, ultimately it brings cost savings and prevent slippages.

This is because…

  • The developer has been involved in wireframing and so isn’t surprised by unforseen functionality that might increase costs and extend timescales.
  • The client has seen the wireframes and so is more likely to signoff the final design. This reduces the need for expensive iterations or multiple concepts.
  • User testing is done earlier in the project and so changes can be made before significant development has begun. It is more expensive to change existing work than build it right first time.

Wireframing upfront also reduces uncertainty in projects. It is possible to budget for, and schedule in, wireframing. However, it is much harder to do that for unforeseen complexity and multiple iterations.

Adding polish

It is worth noting that hand drawn wireframes do come with their drawbacks. We have found that sketches can become messy and confusing once they have been drawn and redrawn based on feedback. This can lead to confusion and also lacks professionalism when presenting to the client.

We therefore tend to take the final wireframes and produce a more finished version to present to clients. This becomes the definitive document that we work from. It is at this stage we also add more detail in terms of copy, making it a complete roadmap to work from.

When we first started this process the final wireframes were very polished. However, we discovered that this caused confusion among some of our clients who mistook these for final designs. We also found that producing these was time consuming and so undermined the benefits of hand drawn sketches.

Finally, we have settled on a tool called Balsamiq for producing finished wireframes. The reason we like Balsamiq is because it is amazingly quick to produce a wireframe, but also still looks like a wireframe rather than a finished design.

An example of a Balsamiq Wireframe

Conclusion

Too often we begin the design process by opening Photoshop. However although Photoshop is a powerful tool, it is the wrong place to start. It is a sledgehammer to crack a nut.

You may shy away from sketching wireframes because you cannot draw. However, this is not about artistic ability. It is about quickly and visually communicating ideas. Wireframing should be fast and furious, and I actually believe that artistic ability can make you overly precious about the quality of your sketches.

Hopefully this post has communicated the benefits of hand drawn wireframes and encouraged you to close your macbook and open your sketchbook.

123. Plight

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

Play

Download this show.

Launch our podcast player

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

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

News and events

SPAM meltdown

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

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

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

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

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

Form Analytics

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

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

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

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

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

Art direction hits the blog

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

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

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

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

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

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

Prototyping

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

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

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

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

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

Back to top

Feature: The plight of the in-house designer

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

Back to top

Reviews: Textmate and Top 5 Tips for Web Designers

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

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

Textmate by Teifion Jordan

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

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

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

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

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

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

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

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

Top 5 Tips for Web Designers by John McFarlane

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

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

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

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

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

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

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

Back to top

Listeners feedback:

Newspaper columns on the web

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

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

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

The usability concern

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

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

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

The technical concern

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

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

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

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

Estimating dev/creative work

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

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

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

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

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

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

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

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

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

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

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

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

Back to top

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

120. WCAG 2

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

Download this show.

Launch our podcast player

News and events

IE testing made easy

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

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

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

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

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

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

Hosting your Javascript libraries

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

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

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

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

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

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

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

Prototyping website interaction in flash

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

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

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

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

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

The rule of thirds

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

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

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

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

Back to top

Feature: Defying Conventions

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

Back to top

Interview: Patrick Lauke on WCAG2

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

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

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

Patrick: Thanks for having me.

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

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

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

Patrick: Super!

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

Patrick: Excellent.

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

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

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

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

Paul: OK.

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

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

Patrick: Yeah

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

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

Paul: So has all that gone now?

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

Paul: OK

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

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

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

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

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

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

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

Paul: Yes

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

Paul: Yeah it does.

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

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

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

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

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

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

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

Paul: Cool

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

Paul: Ah, that’s good

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

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

Patrick: Absolutely

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

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

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

Patrick: a delight

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

Patrick: Yes, super duper. Okey-doke.

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

Back to top

Listeners feedback:

What are the key features of a CMS

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

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

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

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

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

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

Is certification worth it?

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

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

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

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

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.

 

Headscape is recruiting (again!)

Headscape are currently after two new members of staff. If you are an experienced Information Architect or a newly qualified developer, we would love to speak to you.

Yes I know, I am not supposed to be blogging at the moment. However, the reason I am not blogging is because we are so insanely busy. In order to get around this problem we are recruiting (yet again!). If you fancy the idea of working with the gang at Headscape then drop me an email.

Here are the jobs…

Information Architect

We are currently looking for a smart, articulate Information
Architect to work with our clients on initial stakeholder interviews,
user testing and the production of wireframes.

We are looking for candidates with some or all of the following skills:

  • An ability to organize complex information into simple, easy to
    understand structures.
  • Experience in running stakeholder interviews and other requirement
    gathering exercises.
  • Outstanding organizational and communication skills.
  • Proven experience in preparing, running and reporting on usability
    test sessions.
  • The ability to produce easy to digest documentation on IA and
    usability issues.
  • Extensive experience creating sitemaps, wireframes, use-case
    scenarios
    and flow diagrams.
  • Experience of working with large, complex, information heavy
    websites.
  • Ability to plan and execute competitive analysis.
  • Proven experience of working with and producing personas.
  • The ability to meet aggressive deadlines.
  • A good understanding of the design process.
  • A good understanding of technical constraints.
  • Experience of copyrighting.
  • Experience of working with B2C ecommerce sites.

The ideal candidate would be one who is able to work from our Southampton office for at least part of the week.

Experience:

  • Bachelors degree or the equivalent
  • 3 years experience designing websites preferably within a web design
    agency.

Graduate web developer

Starting salary: £22k+
Location: Southampton

Headscape is looking for a graduate web developer, with a 1st or 2:1 degree in a relevant discipline, who is passionate about their profession, keen to learn and can demonstrate good problem solving abilities.

Headscape’s core development technologies are ASP.NET v2.0, VB.NET, Microsoft SQL Server 2005 and XML/XSLT. We have our own, highly flexible content management system software that is the basis for most of our website implementation projects for clients. We are also in the process of developing an online service aimed at web designers.

If you don’t have skills in our core development technologies, don’t worry. We can help you to acquire the skills you’ll need. What we need is demonstrable ability and enthusiasm.

You will need to be a fast learner. You need to be a confident, productive developer. You need to understand relational databases. You must be motivated by developing real-world, web-based applications that really matter to their users. You’ll want to grab with both hands this once-in-a-lifetime opportunity to join a web agency with a national (becoming international) reputation.

If you have had some web development experience outside your degree course we’d love to hear about it too.

Your role will involve working in client project teams with project managers, designers, information architects and user interface developers to create superb bespoke web solutions on-time and within budget.

About Headscape

Headscape is an established web design agency based in the Southampton,
England. We produce top quality websites that are accessible to the
widest possible audience, easy to use and designed around our
clients business objectives. Clients include large government bodies,
educational institutions, charities and the commercial sector.

111. Utopia

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

Play

Download this show.

Launch our podcast player

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

News and events

Fixing your product pages

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

Amy starts by giving some basic tips. These include…

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

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

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

Being inspired by newspaper design

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

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

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

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

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

Using browser history to improve the user experience

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

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

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

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

Back to top

Feature: Designer and developer in perfect harmony

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

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

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

These are the issues we covered…

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

Back to top

Expert interview: Aral Balkan on Singularity

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

Aral: Hi, Paul. How are you?

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

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

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

Aral (laughing): Was he curious?

Paul: He was.

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

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

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

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

Marcus: Okay.

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

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

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

Paul: Oh, ok, so it…

Aral: I mean, watch the conference and interact.

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

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

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

Paul: Nice!

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

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

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

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

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

Paul: Wow!

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

Paul: Yeah.

Aral: And the that its online.

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

Aral: It’s three days.

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

Aral: And it’s multiple track.

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

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

Paul: Oh, Okay.

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

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

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

(All Laugh)

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

Paul: Right…

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

Paul: Sure.

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

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

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

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

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

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

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

Paul: WOW!

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

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

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

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

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

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

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

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

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

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

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

Aral: Have I just put you on the spot?

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

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

Paul: Cool.

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

Paul: Mmmm. Yeah.

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

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

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

Paul: Alright then.

Back to top

Listeners email:

An alternative wireframing tool

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

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

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

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

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

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

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

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

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

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

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

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

A vertical rhythm calculator

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

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

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

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

105. Christmas Cheer

On this week’s show: Paul suggests some gifts to buy the geek in your life. Marcus talks about wireframes and Matthew Paterson talks about the Email Standards Project.

Download this show.

Clear:left winner

Congratulations to Ryan Downie who is the lucky winner of the Clear:Left training competition. Ryan will have his pick of either a place on the CSS Mastery.

If you didn’t win do not despair. There are places still available on both courses for a mere £345 + VAT. I have attended Jeremy Keith’s course on AJAX and have to say it was superb. I am sure the CSS course is just as good. Go to the clear:left website for more details.

News and events

Opera goes on the offensive against Microsoft

Without a doubt the biggest story of the week and in many ways the year is the fact that Opera is filing an antitrust suit against Microsoft. This story is huge, not because one browser manufacturer is litigating against another (something that is a common occurrence) but because of the strange ripple effect this seems to be causing in the web design community.

However, before we get into the ripples lets look at the antitrust suit itself. Operas beef seems to focus on two areas. First, they object to Internet Explorer being bundled with Windows (surprise, surprise). Second, they are complaining about Microsoft’s lack of commitments to web standards.

Call me an old cynic but this whole thing stinks of a massive PR exercise. This is especially true when it comes to the complaints about standards. As Eric Meyer points out, the timing of this claim seems odd to say the last. If the suit had been filed before the release of IE7 it would make some kind of sense. It was certainly true that standards support in IE was very poor. However, IE7 is a huge step forward and Microsoft seem to be active in its development of IE8.

To me this just looks like an exercise in pandering to the gripes of the web design community. It was as if Opera knew it wouldn’t get a lot of support for the whole “unbundle IE” argument and so threw in the standards issue to drum up some support.

However, as I have already said, the Opera antitrust suit is not the most interesting part of this story. The real clincher is the spin off discussion that has emerged sparked primarily by a very provocative post by Andy Clarke. He argues that this suit makes the position of the W3C CSS working group untenable. Andy asks how Microsoft and Opera can work together to create the next generation of CSS when they are in legal action over exactly that issue. This has led to a much wider discussion about how the W3C works and highlighted a divide between how browser manufacturers and designers see the world. Without a doubt there is huge frustration at the glacier speed at which the W3C moves. This is largely due to the challenges faced by browser manufacturers in implementing the specifications.

But the story does not end there. This frustration with slow progress seems to extend beyond even the W3C to also encompass the Web Standards Project which was setup precisely to push for better standards support. Some very prominent figures are even questioning its role.

If we as web designers want to pressure browser makers to provide better standards support then we need to invest in organisations like WaSP. They need to have the kind of funding that political lobby groups have. This will enable them to employ full time staff to constantly lobby and educate browser providers on what web designers need. In my opinion we as web designers need to put our money where our mouth is and start giving financing to organisations like WaSP so they can be more effective.

Boagworld christmas appeal

Talking about putting your money where your mouth is, I would like to thank everybody who has been kind enough to give to our Christmas Appeal. We have been raising money to support an orphanage and school in an extremely poor part of India. The idea is that you pay for anything of value you have received from Boagworld. Ask yourself how much have we taught you on the show? How much have we entertained you? Then decide how much you would pay for that and give that money.

So far we have received £465 and we are still collecting. Even if you hear this show after Christmas we are still collecting! To donate something or for more information go to christmas.boagworld.com.

The best CSS designs of 2007

Not only is Christmas almost upon us, the year is about to draw to a close. This makes it the time of year when bloggers look back at the year just gone and compile “the best of 2007″ lists. Normally I am lukewarm about such things however there is a great list over at web designer wall. They have compiled the best of CSS design in 2007. If you are in need of inspiration this is definitely worth a look. There is some truly stunning stuff here.

Talking of rating design you might also want to check out commandshift3.com which is basically hot or not for web design. When you visit the homepage you are shown two designs and you click on the design you prefer. Not only does it allow you to vote for designs it also lets you look at the best and worst based on votes received. This makes it a great site for inspiration and for learning what not to do!

Marcus’ bit: Quick and Dirty Wireframes

So a couple of week’s ago I wrote a post on the use of wireframes in web design. Marcus couldn’t come up with a decent topic to talk about himself this week so has decided to reuse my post and pass it off as his own! ;)

Back to top

Paul’s corner: Geek Gifts for Christmas

For my segment of the show this week I decided it might be fun to look at Christmas presents. Specifically what you should buy for the geek in your life. In order to avoid it sounding like a wish list for myself the items I have picked are items that I own myself and can personally recommend.

Back to top

Ask the expert: Introduction to the Email Standards Project

Hello world of Boag, I’m here today just to give you a really quick introduction to the Email Standards Project, a new community effort that has launched recently.

If you’re a web designer, and you’ve ever created HTML emails, you will know that getting them to look reasonably consistent across the major email clients is hair-pullingly frustrating.

At least with websites, there are only a few major browsers you have to worry about, and thanks to the Web Standards Project they are much improved from the days of the browser wars. With email you have at least 12 email clients with big shares of the audience.

Unfortunately, HTML email is still stuck back in 1998 with that Celine Dion song from ‘Titanic’ – nobody wants to be there. Over the last 10 years, web designers, and particularly web standardsy type designer, have generally taken a ‘Just Say No’ approach to HTML email. ‘Don’t send it, don’t read it, pretend it never happened’.

That approach has not been a spectacular success – millions of people still sent HTML emails, but because the designers wouldn’t touch them they were hideously ugly and just made designers hate them even more.

HTML email is here to stay. It is the default format in many clients, and sometimes it really does give a better experience for the reader than plain text. The Threadless newsletter is a great example – the send every week an email with pictures of the latest shirts. Trying to describe the shirts in text is nowhere near as useful. A picture is worth at least 1,000 words!

So here we are in 2007, and in order to get reasonable rendering, designers are having to dust off their table coding skills to get things working in Outlook, Lotus Notes, Gmail, Yahoo, Thunderbird…it goes on.

At Freshview we deal with designers every day through Campaign Monitor and MailBuild who are struggling with this problem, and we finally decided to do something about it. That is where the Email Standards Project came from.

Together with a few other people we’ve put a site up at http://www.email-standards.org (email hyphen standards dot org), and you will find a link for that in the show notes. The central idea of the Email Standards Project is that we want to work with designers and with email client developers to improve support for web standards in email clients.

It’s not one of those sites that is all talk and no practicality though – jump onto the site and you will see a bunch of tests we have done to work out exactly what does, and what does not work in all the major email clients as far as a core of normal HTML and CSS like padding, margins, floats, lists and so on.

If you’ve seen the Acid test for browsers, over at the Web Standards Project, then this is basically the same idea except for email. We’ve already had some contact with some of the big email client representatives about our results, which is really exciting. Check out the blog for updates in that area.

If you know the pain of designing HTML emails, and you want to support the project, then there is a section on the site that covers that too, and we’ve had a huge number of people offer to help, and some great feedback from people like Jeffrey Zeldman and Cameron Moll.

If you are a website owner, and you want to know why this matters to you, then check out the site for an article on why web standards are important for email, or talk to your web design firm. As is often the case, it comes down to money – better standards support means less time spent getting things to work, and more time on the actual design.

So thanks for giving me the chance to say a few words about the Email Standards Project, and I hope you all do get a chance to checkout the website, email-standards.org.

Happy Christmas!

That about wraps it up for this week’s show. We will be back with a slightly amended format as from Wednesday the 9th January. See you then.

Quick and dirty wireframes

I am currently in the process of wireframing an internal project that we are working on at Headscape. It occurred to me that despite the fact that wireframes are a fundamental tool of web design, they are not something I have spoken about before.

What is a wireframe?

Fundamentally a wireframe is a tool for rapidly prototyping a website. They roughly approximate the layout, content and hierarchy of a web page as well as the relationship between pages. Effectively you are building a rough version of the site.

Wireframes don’t look attractive. They are not designed as such. Rather they give a sense of how things will be organised on your site. In many cases they lack colour and imagery, although there is no reason why they should. However, they do show visual hierarchy through layout, font size and shading.

Example wireframe

What benefits do they provide?

So why produce a wireframe? Well there are a number of good reasons…

  • They act as a reference point for the designer to work from, demonstrating the relative importance of various screen elements.
  • They can be used to test with. This enables you to ensure users can navigate a site and find key content on a page.
  • They help flush out the details of a site that are often missed. These include things like password recovery and error handling.
  • They help to define interactive elements such as AJAX and Javascript in a way a static Photoshop mockup cannot.
  • They help the client to visualise how the site will work.
  • They identify navigational issues which need resolving.

How to create a wireframe

Once you have recognised the benefit of producing wireframes the next question becomes how exactly do you build them? The answer is largely dictated by two factors; the time available and the complexity of the website.

If you are really strapped for time then simply sketching out some key pages is better than nothing. Even these can be used in testing and shown to the client. However, a sketch does not show interactive elements or the relationship between pages.

If you have a little more time you could produce key pages in a tool like Omnigraffle or Visio. Better still is powerpoint which allows you to link multiple pages together, so creating a basic navigable site.

However, probably the most common way to build wireframes is using HTML. Of course the downside of this approach is that it can take longer if you are overly precious about your code. Personally, when it comes to wireframes I prefer the quick and dirty approach. I create my HTML wireframes using the WYSIWYG editor in Dreamweaver, churning out the pages through a mixture of CSS and tables. I don’t care what is going on under the hood. All I care about is that I can get a sense of how the site would work.

Taking this somewhat cavalier attitude to HTML wireframes is not without its drawbacks. Because the underlying code is a mess, ultimately the wireframe has to be thrown away. A better approach would be to use nice clean semantic code which can then be reused for the final build. However, in my experience this rarely works in reality. The only time I do use this approach is when building a site on our content management system. In such situations it is as easy to rapidly produce pages in the cms as it is in Dreamweaver.

The key to wireframes is for them to be quick and disposable. Wireframes are the place for you to experiment and try out new ideas. They are the place for testing and adaptation, not for being overly precious.

If your site is a simple one then using sketches or a tool like Visio will probably be enough. However, if it is more complex with a lot of pages or interaction then consider using an HTML wireframe. In short use the right tool for the job!