185. Innovate

On this week’s show: We talk about Google Chrome Frame, how to be an innovator, and measuring the success of your website.

Play

Download this show.

Launch our podcast player

Housekeeping

Win Pitches, Charm Clients and Get Signoff

Being a great designer or developer is only half the battle. You also need to be able to promote and sell your services. Unfortunately many web designers and freelancers struggle to engage with clients.

The problem appears to be so big and I get so many questions on the subject that I have teamed up with the guys at Carsonified to run a full days workshop on the subject.

It takes place on the 23rd of October in London. If you book soon the price is £375 although if you quote the code CWPB_09 you can get an additional 15% off.

Book Your Place Now!

Shopify Design Competition

Shopify (who sponsor the show) are running a design competition to find the best designed Shopify store.

They want your help picking a winner and so are giving away either a 15″ Macbook Pro or one of 20 iPod Nanos to encourage you to participate.

All it will cost you is a quick tweet and an opportunity to look through some stunning ecommerce websites. It is an excellent source of inspiration if you are considering adding a store to your website.

To vote go to win.shopify.com.

Back to top

News

Google Chrome Frame

Google have just released Google Chrome Frame for IE in an attempt to improve Internet Explorer. But will it have a real world impact?

Read my thoughts on whether it will make a difference.

A List Apart on Search

The latest issue of A List Apart is a bumper edition with three well considered posts on various aspects of search.

What makes these articles particularly interesting is that they are not about search engine placement. In fact they are not about external search engines at all. All three posts are about making better use of your internal search engine.

My personal favourite is “Internal Search Analysis.” This post focuses on the wealth of information that can be gathered by monitoring your internal search engine. By looking at what people search on, when they search and what they do once they have searched, you can learn a huge amount about your users and the effectiveness of your site.

However, the benefits do not stop there as “Beyond Goals: Site Search Analytics from the Bottom Up” demonstrates. The emphasis of this post is on how analysing internal search can dramatically alter your approach to content.

The final post is “Testing Search for Relevancy and Precision.” This focuses on the fact that site search is often not developed with the consideration and care it deserves. It provides methods for establishing the most important site queries and then checking that those queries lead to relevant content.

Together these three posts provide an excellent introduction to site search and should be required reading for anybody running a website.

How social marketing is changing business

There is a lot of BS written about the subject of Social Media. To be honest I am not a great fan of the term. However, it is changing the way we interact online and in particular it is changing the way organisations are interacting with their users and customers.

Mashable posted an article this week entitled “4 Ways Social Media is Changing Business” that really drives home this point. What is more, if this post is to be believe social media is changing business for the better.

The author identifies 4 positive changes that social media has had on business. These are:

  • A move from trying to sell to making connections
  • A shift away from large campaigns to small acts
  • An emphasis on being ourselves rather than controlling our image
  • An effort to be constantly available to users

The one that interested me the most was the “small acts”. Facebook, Twitter and other social media websites allow us all to reach massive audiences, and so the need for million dollar campaigns are increasingly a thing of the past.

At the same time users have the ability to make their experiences of interacting with you heard by a large audience quickly and easily.

This means it is the small acts of excellent customer service that matter. Get those right and you create a passionate enthusiastic following who will do your marketing for you.

Anyway, it is an inspiring read and if you are struggling to “get” social media, you might want to take a look.

Prototyping and the design process

With websites becoming increasingly complex and expensive to build, the need to prototype is paramount.

Unfortunately there are so many ways to prototype a design, from simple hand drawn sketches to entire working prototype. It is often hard to know which is the best approach.

Integrating Prototyping Into Your Design Process” is a post on Boxes and Arrows that seeks to bring clarity to the different way of prototyping a site.

The post talks in terms of fidelity. Visual Fidelity, which refers to how close the prototype looks to the final design. And functional fidelity, which is how closely the prototype reflects the way the site will work.

The post goes on to identify different types of prototyping and where they fall within this spectrum. For example design comps have a high visual fidelity but a low functional fidelity, while an interactive wireframe will have a lower visual fidelity but will be functionally better.

However, the majority of the post is taken up comparing and contrasting the benefits of different prototyping approaches and asking when these are best used.

It is a useful post because it helps you pick the right tool for the job. Even the smallest web project can have some form of prototyping and so it is applicable to everyone.

Back to top

Feature: How to become an innovator

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

Read ‘How To Become An Innovator’

Back to top

Listeners feedback:

Measuring success

This week I twittered the following little fact I found through macworld:

43 per cent of UK companies admit that they have no quantifiable method of measuring whether their website is effective.

Shortly thereafter Stelian responded with the following tweet:

How can you measure if your company’s website is effective for the business? if you don’t own an online shop.

It is a good question. Its easy to establish measurable goals when you building an ecommerce site. However it is much harder if it is an informational or service based site. Nevertheless it is not impossible.

Every website should have an objective that the owner wishes to achieve. It might be to communicate an idea, rally support or generate leads. Whatever the case these objectives need to be converted into calls to action. What is it you want users to do?

These calls to action will vary depending on the type of site. However, typically they include things like:

  • Picking up the phone
  • Completing a contact us form
  • Signing a petition
  • Subscribing to a newsletter
  • Watching a product demo

The list could go on. What is interesting is that almost all calls to action are measurable. If a user completes a contact form, that is trackable. If a user watches a product demo, that is trackable.

The hardest calls to actions to track are those that leave the website. Typically these are phone enquiries or going to a physical location. However, even these are trackable with some careful planning. Discount codes or free gifts are a great way of getting users to identify they came from the website. For example:

Print this voucher and take it to one of our stores for a free t-shirt.

The phone is even easier. In this case you can have a unique number that is only found on the website. If the user calls that number, you can be sure they came from the website.

The point is every website should have measurements by which its success can be judged. Without these success criteria it will be largely directionless and will certainly struggle to justify further investment.

Back to top

A dedicated follower of fashion

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

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

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

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

  • Inspire me
  • Cause innovation
  • Give me confidence

Let me explain what I mean.

Inspiration

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

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

The new and shiny also inspire me to innovate.

Innovation

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

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

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

Confidence

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

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

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

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

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.

 

Enlightenment for the web?

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

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

Alchemy or science?

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

Sleeping with the enemy

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

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

The missing pillar of web design

After listening to the various podcasts coming out the Web Essentials conference this year it has made me think a lot about the nature of web design and the current state of the industry. Although there are some very exciting developments, I am concerned that we may be in danger of loosing some perspective.

Six Pillars of web design

For fear of stretching an analogy, I believe that there are six pillars of web design. Each pillar represents a fundamental part of any website development project and a successful site has an equal balance between all pillars.

These pillars are:

Usability

Usability is a well-recognised sphere of web development with many champions such as Steve Krug and Jacob Nielsen. Sites with bad usability suffer from poor rates of repeat traffic and failure by users to complete calls to action.

Accessibility

For the sake of this article, web accessibility refers to making your site accessible to the widest possible audience whether they are disabled, using old technology or alternative devices. This is a particularly popular area at the moment within the web design community, with a lot of effort being put into developing techniques to improve site accessibility.

Aesthetics

Aesthetics refers to the branded look and feel for a site. Covering colour schemes, styling and interface, aesthetics has a huge impact on how a users perceives a site. For a long time this was my far the most dominant pillar of web design but now it is seen by many as secondary.

Development

This pillar of web design is experiencing phenomenal growth, with ever more powerful "web applications" emerging. It covers web standards and AJAX as well as more traditional server side scripting.

Content

In many ways, this pillar is ignored by many web designers being considered "the clients problem". The reality is that content can make or break a website. Well-written, easy to read content combined with useful applications can go a long way to supporting an otherwise weak site.

Objectives

This is the missing pillar of web design. Often overlooked in the web design process and yet fundamental to any sites success. Why does the site exist? What is it trying to achieve? What returns on investment are required? These are all essential questions that are easy to ignore. Fundermentally this is the "business model" behind the site.

Since initially writing this article Alist Apart have published an excellent article on site objectives and strategies. It is definately worth a read.

Maintaining the balance

Problems arise when these pillars are not in balance. If one pillar is removed, or even if one pillar becomes greater than another does, then the whole structure becomes unstable.

Like in every other area of life, web design goes through "trends". From brochureware to flash, from web standards to AJAX, we are all prone to jumping on the bandwagon. Of course, in once sense this is a good thing. When we see other people’s groundbreaking work, it inspires us to innovate ourselves. We are seeing this with AJAX and Web 2.0. There is a lot of innovation happening around the "development pillar" and that is good to see. It should be applauded. However, we must be careful to ensure that this pillar does not become unbalanced with the others. I am seeing many web 2.0 applications that function wonderfully, degrade nicely, look stunning, but are at the end of the day are pointless, lacking a clear objective!

The sixth pillar

I hear a lot of grumbling in the web design community about clients. Our clients aren’t interested in accessibility or AJAX or web standards. Many see their clients as being ignorant and a barrier to progress. Although I am sure there is the odd ignorant client out there, I think the main problem is that they focus most heavily on the one pillar of web design we largely ignore… objectives.

They are concerned with the sites return on investment, whether that is in sales, leads, or brand awareness. They don’t care about accessibility unless it will help them achieve their objectives. They are not interested in the underlying technology if it won’t solve their business problems.

The holistic approach

So who is right? Are our client’s right to obsess about objectives and goals, or are we right focusing on accessibility and applications? The reality is that we should be taking a holistic approach to web design where we all at least keep an eye on the other pillars. Even if you specialise in accessibility you should not be blind to technology and equally if you specialise in technology it should not be at the expense of all else.

By maintaining an overview of all the pillars of web design, we are sure to keep them in balance and prevent too much bias towards any one area.