Stop designing websites, start designing posters

A new generation of websites are emerging that look less like websites and more like posters. They are easy to use, visually engaging and most of all different.

Sometimes I think I am deeply conflicted. On one side I am always going on about how print is not like the web and web designers need to stick to conventions.

On the other hand I feel inspired to be more creative in my work and take some risks. I am bored with the same old approach to websites.

In one recent post I wrote:

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

How then can we be different and yet still ensure our websites are usable?

Looking to the poster for inspiration

One way to remain usable and yet be different, is to look for inspiration beyond the web. For example, look at print designs that have to grab people’s attention and communicate a lot of information quickly.

One example of this is printed posters.

Posters have to be:

  • Visually attractive in order to grab attention.
  • Easy to take in at a glance
  • Provide more information to the more interested reader

In other words they need to be…

  • Engaging
  • Usable
  • Scanable
  • Have a clear information hierarchy

Sound familiar? Websites face exactly the same challenges.

Take a look at these posters below. Each is visually striking, provides key information first but has additional information for those interested. This is how we should approach web design.

DJ Andy Smith Poster

Art Attack 2006 Poster

Paris Je Taime Poster

Animals are not clowns

Morgellons Disease

Urban Typography

Using poster design on the web

You maybe looking at these and wondering how this approach can be applied to the web. After all, they don’t have much in the way of content.

Setting aside the fact that most websites have far too much content and need to be simplified, it is not impossible even with more content.

In fact a lot of web designers have already taken inspiration from poster design. Here are just a few from my inspiration library.

Flourish Web Design

Flourish Web Design

Groovy Web Design

Groovy Web Design

Kitschen Sink

Kitschen Sink

Samsung

samsung

Lana Landis

Lana Landis

Finch

FINCH

Carsonified Events

Carsonified Events

Noel Design

Noel Design

Personally I find this new generation of websites encouraging. It demonstrates an advance in the aesthetics of the web without undermining the principles of usability.

These designers should be commended for their desire to push the boundaries of traditional web design and for looking beyond the web for inspiration. They should be commended for rejecting the myth of the fold.

What about you?

So have I inspired you? Do you think that we can learn from the print design world or are the two worlds too different? Post your thoughts in the comments.

182. North and South

On this week’s show: Molly talks about the future of web standards. Paul explains the differences between print and the web, and Ryan asks if job titles matter.

Play

Download this show.

Launch our podcast player

News

Being a better blogger

These days blogging has become an important tool for most organisations. Although I have written about the Harsh Truths of Corporate Blogging, I have said little about how to actively improve your corporate blog. I therefore want to draw your attention to two excellent articles that were published this week:

  • A Simple Way To Funnel New Traffic & Sales From Buried Blog Archives – One of the problem with blogging is that old posts get buried over time. Because of the way blogs are structured older posts normally receive very little traffic. This article suggests a couple of good solutions. First it recommends editing older posts so they are suitable for republishing via sites like Ezine Articles. Second, it recommends turning your better posts into PDF reports. Strangely this seems to significantly increase their creditability.
  • Do Long Blog Posts Scare Away Readers? – One thing I struggle with is the length of my blog posts. After all copy for the web should be short, right? Well not according to this article. Using movie lengths as an analogy, this post argues that it is not length that matters but ‘tightness’. A good blog post should be exactly the length it needs to be in order to effectively communicate its point. Not a word more.

If you are a blogger, both of these posts are definitely worthy of your attention.

Demystifying the “duplicate content penalty”

So Google have posted an article in the attempt to put peoples mind at easy about duplicate content on their websites, and whether or not Google penalises you for doing so.

The article goes through how Google filters duplicate documents by grouping them together reduce redundancy when searching.

They summarize with:

Having duplicate content can affect your site in a variety of ways; but unless you’ve been duplicating deliberately, it’s unlikely that one of those ways will be a penalty. This means that:

  • You typically don’t need to submit a reconsideration request when you’re cleaning up innocently duplicated content.
  • If you’re a webmaster of beginner-to-intermediate savviness, you probably don’t need to put too much energy into worrying about duplicate content, since most search engines have ways of handling it.
  • You can help your fellow webmasters by not perpetuating the myth of duplicate content penalties! The remedies for duplicate content are entirely within your control.

The general gist of the article is, if you deliberately post duplicate content in an attempt to rank higher on Google they will penalise you, but otherwise you don’t have anything to worry about.

7 common design mistakes that clients love

Although our next post is aimed at web designers I think it is just as important that website owners read it too. Entitled “7 Common Design Mistakes That Clients Love” it puts together a series of carefully constructed arguments tackling the more common design mistakes requested by clients. The list includes:

  • Scrimping on photography
  • Wanting a Flash intro
  • Too much information
  • Using white text on a black background
  • Wanting the logo bigger
  • Ripping off someone else’s logo
  • Wanting a terrible font

The arguments against each of these atrocities are a nice mixture of referencing research, quoting stats and simple effective communication. If you are a designer this article will help you better articulate why these things are wrong. If you are a website owner it may go someway to explaining why your designer gets so grumpy when you suggest any of them!

How To Give A More Exciting Presentation: A Note To Speakers

Our final story is courtesy of Inayaili de León over at the Web Designers Notebook and it’s stemmed from her recent attendance at dConstruct.

Yaili shares her advice to conference speakers on the do’s and don’t of a good presentation.

She goes into these points in detail so read them in detail there, but to summarise her do’s are:

  • Make us Laugh
  • Ask questions that we had never asked ourselves
  • Make controversial remarks
  • Be practical
  • Sprinkle your presentation with interesting facts
  • and use multimedia

She then goes on to explain her don’t and offers a selection of emergency tips to recover a dieing talk such as bashing Micrsoft and loading up a LOLCat (which always get a laugh).

It’s a thorough article offering good advice and she also links to some examples of well presented talks to learn from, so if you’re planning on presenting in the future it’s well worth a read.

Back to top

Interview: Molly Holzschlag on the future of web standards

Being transcribed…Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

Moving from print to web

Jake Knight writes: What are 5 things you would want any print graphic designer to know first and foremost about designing for the web?

I think the differences between the web and print causes a lot of confusion, not just among designers but also clients. The problem is that in the early days of the web a lot of work went into making the web behave like print and this led to the table based designs that have proved so problematic since.

In reality, although there are some similarities between print and the web, there are also a lot of differences. Narrowing down the list to just five things is hard. However, here are the issues I believe cause the most confusion especially among clients:

  • Lack of control – When developing a design for print you can guarantee that everybody will have the same approximate experience. Each copy of a design will be identical. However, that is not true of the web. Differences in browser, resolution and countless other factors means that everybody will have a slightly different experience. Accepting that is key to producing a successful website.
  • The scrollbar – Print designs do not come with a scrollbar. Typically a reader of printed design can view the entire design in one glance. Even if they cannot the designer knows exactly the point at which readers will need to turn a page or unfold the design. On the web, designers do not have this luxury. There is no way of knowing what the user can see in a single glance and this has a fundamental influence on the way we design.
  • Lower resolutions – Print designers are mostly used to working at 300-600dpi. On the web we are limited to 72dpi (generally speaking). This seemingly minor difference has profound consequences on the selection of imagery, use of typography and application of logos. An image, font or logo that works beautifully in print can become unreadable on the web because the lower resolution pixelates graphical elements at smaller sizes.
  • Colour – While colour in print is produced by the application of ink on paper, on the web it is produced through projected light. This means that colour will be reproduced differently on screen. Typically this means that dark colours become darker and light colours become lighter. This can often mean that corporate colours need to be adapted to work online. For more information on this read Jason Santa Maria’s excellent article Cheating Color.
  • Interaction – Finally it is important to remember that the web is an interactive medium with more in common with software design than print. Users are required to click links, enter data and interact with applications. It is not the passive experience of reading. Although print and web design share a lot in common, a print designer will have to considerably expand his skill set to accommodate these interactive elements. Learning about user experience design is key to the role of web designer.

Obviously this is only the tip of the iceberg but hopefully it demonstrates just how different the experience of designing for the web is. Something that clients in particular need to be aware of.

The importance of job titles?

Hi Paul and Marcus, I work for a 8+ people studio that develops websites. My job title is “developer” and I do tasks from chopping up a design and turning it into HTML, then adding it into our CMS, and then adding content. I will then help clients by supporting them on their website and helping them add future content.

I am quite happy in my job, but I know that if I ever want to apply for a new job, the job title I have is very important. I am worried that my job title is not specific enough to my skills, do you think I should change it to something that sounds more representative, as “developer” could lead someone to believe I only do small tasks.

I think the question of how important job titles are is one for much debate, however there is an obvious requirement for people in any industry to have an appropriate title that describes what they do, the problem is peoples definitions of what a particular title means can be extremely varied.

To add to the confusion there are often multiple variations of the same title. For example my definition of a Front-End Developer is someone who codes HTML, CSS and javaScript, however this same role is often labeled as:

  • Front-End Engineer
  • Client-Side Developer
  • Client-Side Engineer
  • or simply Developer

The same goes for Back-End Developers i.e. people who code in a server side language such as PHP or Ruby. Again the list of variants can be endless:

  • Back-End Engineer
  • Server-Side Developer
  • Server-Side Engineer
  • or again simply Developer

So if your job title is Developer, which discipline are you or do you do both?

I don’t have a definitive answer to this question, however things certainly become much clearer when you specialise in a certain area, for example:

  • javaScript Developer
  • PHP Developer
  • Front-End Developer

To answer your question though, your job title isn’t as important to potential employers as you may think. When you apply for a new job they will look firstly at your portfolio and whether you can demonstrate the skills that they require. Instead of picking a job title that you think potential employers would like to see, pick one that is actually relevant to what you do and have a good portfolio to back it up.

Back to top

161. In or Out

On this week’s show: Paul announces Micro-Boagworld, we discuss the pros and cons of outsourcing web work and see what recommendation the Boagworld forum has to offer.

Play

Download this show.

Launch our podcast player

Housekeeping

For a while I have been toying with the idea of doing a Micro-podcast that works in a similar way to Twitter but with audio. It would provide the opportunity to share hits, tricks and reviews too short for the main show. My problem was that I needed an application which made this as easy as posting a tweet. Anything more and it would prove too demanding.

Fortunately a new iPhone application has launched that does exactly that. Called AudioBoo it allows you to record 3 minute audio snippets that then get posted to a website, twitter, facebook and a podcast feed.

I am therefore pleased to announce Micro-Boagworld…

View Micro-Boagworld posts here

Subscribe to the RSS feed here

Boagworld AudioBoo Homepage

Back to top

News

Pricing and projects

Alyssa Gregory has written two good posts this week both relating to the pricing of web projects.

The first post tackles the notoriously difficult subject of How To Estimate Time For A Project. After all, time is money.

Estimating how long a project will take is tricky and although this post doesn’t provide any magic formulas it does provide good solid advice.

As well as considering the obvious deliverables Alyssa also recommends time for project management, reviewing work, debugging and client turn around. Finally, she recommends adding a buffer for the unexpected.

Of course, she doesn’t discuss how all of this time translates into your final price. How much you charge is a matter of conjecture. However, in a second post she does explore a related subject – How To Raise Your Rates.

In this post, she handles the sensitive subject of how to tell a client that you will be raising your rates for future projects. She suggests five techniques you should employ…

  • Give Notice
  • Set a schedule (make increases annual for example)
  • Make it fair (keep the increments small and manageable by the client)
  • Send it in writing
  • Balance it out (Balance your increase with an incentive – e.g. a special, a one-time discount)

Its all good advice and important too. As your skills and experience increase, you will need to ensure your rates reflect that. Knowing how to hand those rate increases is vital if you want to keep your clients happy.

IE8 and IE6

Microsoft have announced that IE8 will be released via the Windows Automatic Update starting on the third week of April.

The final version of the browser has been available since March and yet adoption has been sluggish. Hopefully Automatic update will change this trend significantly. However, it does not guarantee universal adoption. Although the update will be marked as important users will not be forced to upgrade. In fact Microsoft has released a blocker toolkit so corporate users can avoid the update entirely.

Worst of all, it is likely that the update will impact the numbers using IE7 more than IE6. IE6 users tend to be hold outs and are unlikely to upgrade now when they did not upgrade to IE7.

The only hope is that many IT departments have a policy of running a version behind the current release. If that is the case, the arrival of IE8 may encourage some of them to adopt IE7.

The entire web design community is keen to reduce its level of support for IE6 and hopefully this update will allow that. In fact, another post this week entitled – 10 Cool Things We’ll Be Able To Do Once IE6 Is Dead – points out just what a wonderful world it would be.

Once IE6 is gone we will be able to…

  • Use child selectors
  • Make full use of 24-bit PNGs
  • Use attribute selectors
  • Use a wider range of display properties
  • Use min-width and max-width
  • Throw away 90% of CSS hacks (and 90% of the reasons for needing them!)
  • Add abbreviations that everyone can see
  • Trust z-index again
  • Save time and money
  • Enjoy ourselves again!

Simple and impressive design techniques

Last week I was doing a consultancy clinic with a developer who wanted advice on designing his website. He was a great coder but did not have much experience designing.

Although I recommended The Principles of Beautiful Web Design by Jason Beaird it would have been great to point him at the latest Smashing Magazine post – 10 Simple and Impressive Design Techniques.

This post has some easy to implement techniques that are ideal for developers trying to improve their design skills. Techniques include…

  • Adding Contrast
  • Using Gradients
  • A Better Use of Colour
  • Improved Letter Spacing
  • Changing Case
  • Use of Anti-Aliasing
  • Adding Imperfections
  • Implementing blurring
  • Careful Alignment
  • Trimming the Fat

Read the whole articles for more details and great examples of these techniques in action.

Influencing user behaviour

A big part of good design is guiding the user to complete the actions you want. Influencing user behaviour can be achieved through a variety of techniques. However, it can often be hard to know where to begin.

One resource that might help you influence user behaviour is The Design with Intent Toolkit. This is essentially a printable ‘cheat sheet’ that suggests a variety of techniques you can apply to your projects.

The techniques do not just apply to web design but all aspects of design. Consequently not all of the techniques will apply. However a lot do, ranging from the use of metaphors to setting up good default options.

Some of the techniques contained in this cheat sheet are also beautifully demonstrated in another post I wanted to mention. Entitled 12 Excellent Examples of "Lazy Registration" it addresses the problem of user signup.

Essentially it is a post that showcases methods for getting around the problem of user registration. As the post itself says…

Signup forms have long irked the casual visitor. During the process of discovery, nobody wants to stop and fill out details before they can "unlock" the rest of the site’s potential.

It has certainly been my experience that signup forms are a barrier and so it is interesting to see how different web applications have overcome the problem.

Back to top

Feature: When to outsource web work

Your in charge of your organisations website. It has become moderately successful and now you have a decision. Do you hire a full time web designer or outsource to a web design agency?

Read the full article

Back to top

Listeners feedback:

In this week’s listener feedback section we look at a series of recommendations from the Boagworld forum…

A good introduction to Javascript

Jake writes: I’m curious as to whether or not anyone on the forum has strong opinions on a good introductory javascript book? And by introductory I mean something that’s more about initial learning steps such as syntax, etc. and then talks about best practices.

Doug answers: You might want to look at one of the books out for coding in jQuery, if you’re planning on going in that direction anyway. As for how to learn javascript I usually push people towards Lynda.com.

Matt also replies: Awesome book – DOM Scripting – I’d start with this before jQuery as I think you need some javascript knowledge to use jQuery to its fullest.

A good but free survey tool

Simon asks: I want to create some simple(ish) survey’s to get clients to fill out after a training session. I know of some paid for solutions, but does anyone have any suggestions for any free tools?

Laura replies: For something short, I’d use the survey function on PollDaddy. You can get up to 100 responses, and I think ten questions. Ten isn’t many, but you can do conditional branching for free, which is rare, and good.

I’ve also used SurveyMonkey before, it’s clean and simple.

A review of Clicktales

Peter shares his experiences of Clicktales…

On the recommendation of Paul, I tired out ClickTales.com; and I have to say the results have been interesting (sad, in my personal case) to say the least.

For those of you not in "the know", or missed episode 141, ClickTales is an app that lets you record and review the actions of your website’s visitors. And I’d agree with Paul: inexpensive, revealing, but limited in essence because you can witness what a user goes through.

In my case it was most effective because my results have been telling me that I should redesign my website’s structure completely… so I decided I should start from scratch all together and redesign. :)

Web Design for ROI

Bill reviews Web Design for ROI by Lance Loveday & Sandra Niehaus…

Each year I find one or two books that really stand out. This book, Web Design for ROI, changed the way I look at current eCommerce projects and helped me identify better strategies for building web sites.

Rich adds: I agree this is an excellent book.

Not too much new for a seasoned pro like myself, but I did still learn a fair bit and I’d recommend it to anyone with an interest in websites that make money.

Pro Paypal e-commerce

Finally, Ian shares an extensive review of the book ‘Pro Paypal e-commerce‘. Ian writes a very thorough review but here are a couple of highlights.

I thought this was a great read. It’s not often you finish a book and feel confident you have all the information you’re going to need to complete your project. The book isn’t just technical but also has lots of useful nuggets on business practices and background on payment systems in general for those that are unfamiliar with them at this level.

I feel confident in recommending this book to anyone who is involved with developing E-commerce systems or is going to be in the future. The author Damon Williams has a very readable style that is mercifully faux-humour free but never dull and explains everything clearly and concisely and despite its relatively low page count at 260 pages or so, still manages to cover a lot of ground without ever feeling as if it’s being too terse.

For more reviews about everything from web design books to software visit the Boagworld forum. We are also going to do some cool new stuff on the forum over the coming weeks. Keep an eye on it. We have already added a Jobs category for those of you who are looking to hire a web designer, so be sure to check that out.

Back to top

 

160. Education, Education, Education

On this week’s show: We speak to Aarron Walter about teaching web standards. Ryan Carson starts a series on web applications and Paul talks about remote user testing.

Play

Download this show.

Launch our podcast player

Housekeeping

A couple of quick pieces of housekeeping to kick off with…

  • Huge thanks to Ryan Taylor, Paul Stanton and Sarah Parmenter who did a stellar job standing in for myself and Marcus on last week’s show. They were actually far too good and I have already started receiving requests that they become the permanent hosts! Anyway, if you didn’t hear last week’s show then make a point of downloading it.
  • My second piece of housekeeping is a quick plug for Bamboo Juice, a grass roots conference taking place in Cornwall on the 24th April. Myself and Jeremy Keith are just two of the speakers in what will be a packed day. It’s so good to see smaller conferences like this springing up outside of London and so I would encourage as many of you as possible to attend. Best of all its only £99 (£79 for Boagworld listeners!)

News

To be honest, what with SXSW and my week’s holiday I am feeling completely out of touch with the web design world. Fortunately, Mr Stanton is continually updating our twitter feed with juicy stories. I have therefore picked 4 that caught my eye.

How to create a great web design CV

Poor old Smashing Magazine. People do like to tease them (myself included), but they write some damn useful articles. A recent example that caught my eye was ‘How To Create A Great Web Design CV and Resume?‘.

This post is essentially two articles in one. It starts by asking 10 designers to design a hypothetical CV for a fictional individual. Each designer writes a short paragraph about their chosen approach and you get to look at some nice examples.

The second part of the post provides 10 useful tips for creating a great CV. Suggestions include…

  • Make it printable
  • Have a summary
  • Link to online projects
  • Show your personality
  • Keep it simple and understandable

For the complete list of tips read the whole post.

Its a good post, but I am not sure whether producing a ‘designed CV’ is entirely necessary for web designers. If I was hiring a print designer then I would expect a CV to look impressive. However, if I am recruiting a web designer I think I would be just as happy receiving a cleanly designed CV that links to a stunning portfolio website.

There are a lot of differences between designing for the web and print. It is possible to be good at one and not the other. Therefore, a printed CV doesn’t tell me much about a persons capability as a web designer. That said, a well designed CV isn’t going to hurt your cause!

Design: Make it Memorable

One tip that could have gone in the Smashing Magazine article, is to make your CV ‘memorable’ and not just ‘flashy’. This picks up on the theme of a post over at 37 Signals entitled Designers: Make it Memorable.

The post talks about the difference between making something visually appealing and actually memorable. Too many sites are impressive but fail to leave a lasting impression. At one point in the post the author writes…

I started to recall those amazing Flash Sites of the Day. You know those sites that get passed around via IM in your office on a slow day? Simply amazing design and programming. Problem is: I can’t for the life of me remember what those URLs were much less the company/product that was being featured! Isn’t that the point with those sites? That the impact should be profound so that you remember Product or Company X?

This is a lesson that all those involved in the web design process need to learn. Whether we are designers or website owners, we have a tendency towards thing that provide the wow factor. However, often it is the thing that makes us go wow we remember rather than the message being communicated.

Statistics and website owners

Our next article of the week is an ‘all too brief’ post on web stats entitled How to Sell Statistics to Clients.

The post focuses on a common problem – most website owners know they should be tracking website statistics, but don’t really know what they are looking for. In fact the author writes…

In my experience, the loudness or frequency of a person’s request for web statistics is inversely proportional to their understanding of them.

That has often been my experience too.

He goes on to identify three ways that we as web designers can help rectify this problem. These are:

  • Providing cheat sheets that help the client understand terms like ‘hits’ ‘page views’ and ‘unique users’.
  • Add web metrics training into the budget of your projects.
  • Provide summaries and reports for the client on key metrics such as conversion rates or sales.

To be honest this is a much bigger problem than can be covered in a short blog post. Too many website owners think that having Google Analytics will solve their statistics needs. However, having the data is not the same as understanding it. If this information is misread it can lead to bad decisions about the future development of a site.

Specialist vs. Generalist: Who Wins?

The final post this week is of interest to pretty much everybody who listens to this show. It asks which is better – the Specialist or the Generalist.

This is an important questions for both web designers and website owners. As web designers we need to know whether we should be specialising in a specific area of web design. It is important for our careers and our businesses.

As website owners we want to know whether the pain of dealing with multiple specialist suppliers is worth the increased expertise you would receive over a generalist.

It has to be said the article is written mainly from the web designers perspective. However, I think there are lessons to be learnt for all sides.

The post outlines the pros and cons of both approaches, but ultimately comes down on the fence when it says…

There are advantages to being in both groups, but I think the only way to be truly successful is by being a little of both. You can be a specialist, but in order to be able to develop a profitable business, you may need to be able to supplement your specialty services with some add-on services that may not be exactly in line with your focus.

Personally, I think it depends on how you define specialist. The type and level of specialisation can vary massively and the way you position yourself will define your success. For example, you may specialise in a certain discipline (e.g. Ruby on Rails development) or in a specific market (Higher Education).

Ultimately, whether you are a website owner seeking an agency or a web designer forging a career, it is all about balance.

As a web designer, if you specialise too much you will not find work. If you generalise you cannot differentiate yourself.

As a website owner you want a web designer who is enough of an expert to deliver an outstanding solution, but you do not want so many specialists that your project turns into a nightmare.

Back to top

Interview: Aarron Walter on Interact

Paul: Hello, and so joining me today is Aarron Walter. Good to have you on the show, Aarron.

Aarron: Thanks for having me.

Paul: And the reason we have Aarron on the show is because he is going to talk about a new initiative.. is ‘initiative’ the right word, Aarron?

Aarron: Yeah, yeah.

Paul: Let’s go with that. A new initiative from the web standards project, called Interact. Now, let’s kick off, Aarron, by maybe you telling our listeners a little bit about what Interact is.

Aarron: So, whilst Interact is an open curriculum framework, basically we’ve been recognising that the Web Standards Project has been around for a long time and we’ve done a lot of things to try to get standards into industry. And to a certain degree we’ve made some big triumphs in that respect, but there are still a lot of websites out there that aren’t following standards and people that are sort of behind. And we saw the Achilles heal as to why that’s not happening, as really, education. So, you know, our medium’s really young and it hasn’t really found it’s bearings with how we’re going to marry industry and education, so whilst Interact is a curriculum that has a series of courses that teach not only web standards, but best practices.

So there’s of course the stuff that you would expect from WaSP which is the front-end development courses that teach progressive enhancement and semantic markup and that sort of thing. But we have six learning tracks that include foundations; there’s a course in there that’s like an intro to internet concepts and how people can use the internet to teach themselves and use RSS, that sort of thing.

So there’s front end development, there’s a design track, there’s server side development, there’s user science and then there’s also professional practice. So what we’re trying to do is create a collection of courses that are very modular, to try to get these into schools. And we recognise that not every school is just going to take the entire curriculum and integrate that into their program. You know, if you’re a Computer Science program maybe you’ll take a course or two, if you’re a design program you’ll take a course or two, or even just grab the assignments or look at our competencies.

Each course is based on competencies, which are the things a student has to master before they can pass a course. And then the evaluation methods: So each course has assignments, it has exam questions, it has readings that come from Operas own web standards curriculum – we’ve been collaborating with them. It has textbooks, it has pretty much everything that an educator could need to teach a particular topic.

Paul: Okay, so is this something that is then aimed entirely at educators, or if somebody wanted to get into web design and they were trying to learn it in their spare time, could they just go to this and use it in isolation by themselves?

Aarron: To some degree, I guess they could, but Operas web standards curriculum is really learner-centric, so if you’re trying to teach yourself, that’s probably the place to go. But ours is very much focused on educators, because we feel like there’s a lot of great resources out there on the web if someone wants to teach themselves, but there’s not a lot of great stuff for educators to get stuff into their courses.

Paul: So, when you say ‘educators’, I mean what kind of level are we looking at here? Earlier you mentioned schools. Are we talking about school age, or are we talking about higher education? What are we covering here?

Aarron: I’d say our primary target is higher education, colleges, universities, even training programs to some degree. But we are also seeing some of our content in high schools as well and we’d like to see that more. Especially foundations courses like the web design one course or the internet fundamentals course. If students could go into college with a solid foundation, then they can start to focus more on "What can I do with these techniques?" than theory and concept.

Paul: So is this design to be fairly international or is it quite U.S centric in the way that it’s written.

Aarron: We want it to be very international and the people that have worked together on this are from lots of different places. We’ve got some folks in Europe, Canada and of course some folks in the U.S, so it is in an international group that’s coming together and we’re actually working with WaSPs ILG group – that’s the International Liaison Group. And we’re working on, this year one of our big goals is to try to get a lot of our content translated to different languages.

Paul: Okay, so there will be multiple language versions of all of this as well at some point?

Aarron: That’s the direction we’re heading, yes.

Paul: So, I mean, how did this come about in the sense of, you know, well, how did you get involved in it for a start and what was the motivation behind it?

Aarron: So, I’ve been teaching for the past ten years in different schools in the U.S and colleges and universities, but I’ve also been working in the industry as well. And I got on WaSPs mailing list, I just joined the mailing list and started to talk to some folks and then they invited me to join – it was a year ago, I guess it was at the very beginning of 2008 – and so I joined the education task force who created the Interact project. And basically there were ideas about the curriculum and I’d heard lots of people say "Yeah, what we really need is, you know, education’s way behind" and they’re happy to point fingers and "We need a curriculum", but it just never was really transpiring from anyone coming from the industry and so we kind of just decided we need to do this. And I’ve helped create curricula before as a faculty member at the Art Institute of Atlanta and so I had some ideas and we had a really great group of folks that are in the education task force – people that are educators and people that are experts from the industries. So, yeah.. actually South by South West was where this all started, which is pretty amazing, of course there are lots of great people there. So Glenda Sims, who’s one of the heads of WaSP these days introduced me to Chris Mills from Opera who was working on his project and we kind of had some drinks at the Geeks Club bowling event and we just kind of went crazy talking about these ideas. And Steph Troeth then Leslie Jensen-Inman and we all had these ideas, and then we just set a goal for ourselves in 2008 at South by South West and we said "In a years time, we’re gonna be back and we’re gonna have a curriculum." and that’s what we did. This year we launched our curriculum at South By.

Paul: That’s quite an impressive turnaround for the amount of information that’s in there. How did you draw everything together? Where did it all come from?

Aarron: Well, we met every week online and we talked and we established a course template, which really helped us. The stuff that we really needed to put in these foundation courses, we all know what needs to go in there. It’s just a matter of getting around the pedagogy or the educational part of it. So we developed a template for assignments, a template for a course and a template for learning modules which are basically like, you know, a teacher could teach a concept like let’s say, HTML forms in a weeks time. So we developed those templates and then from there we just assigned courses to different people and we used a wiki and we just met regularly and.. I gotta say, you don’t have to have a huge group to develop a curriculum.You just have to have a few people who really have their heart in it and.. we have some amazing folks, so..

Paul: So, what kind of response are you getting so far from H.E institutions? Are they interested in adopting it? If they are, how are they going to go about that, because, I mean, my impression is that it always takes forever to get a curriculum approved at a university or whatever. So I’m just interested in how that process is going.

Aarron: Yeah, education is.. one of it’s benefits is that it’s slow to move, so once it gets a solid foundation it keeps that solid, but you know, one of it’s drawbacks is that it’s slow to move. And so we’ve got some schools that are really excited about it and generally the folks that.. you know, it’s only been a couple of weeks that this has been live, we’ve got some folks that are really excited about it and those are folks that were kind of headed in the same direction themselves. So we’ve gotten some responses from schools in Europe and some schools in the United States that are interested in pulling some stuff in. And we have a school that’s looking at using a lot of our content right now. So we’re in the early stages of trying to get this out there. I think the easiest part is building the curriculum, because we know what needs to go in there. The hardest part is getting it into schools. So one of our strategies is to get the endorsements of folks in the industry, so we’ve gotten endorsements from Google, from Yahoo, from Adobe, from W3C, from Opera, from Mozilla – they’re all just super excited about what we’re doing and that sort of brand recognition can help us get our foot in the door with schools. And of course going out to conferences, we’ve got folks at the European Accessibility conference right now, talking about it, so we’re just trying to get out there and let people know.

Paul: Excellent. That sounds brilliant. I mean, I know that a lot of people that listen to the Boagworld podcast – there’s a large number of students that we’ve got listening and I often get complaints about this, that what they’re being taught at university bears no resemblance to what they’re hearing on this podcast. And I’m hoping that that’s because the podcast is right and the university is wrong and not the other way around. So if they’re listening to this and they’re getting really excited about it and, you know, they’ve gone to your website and they’re seeing the curriculum – I’ve got it on front of me now and it does look really exciting – how do they make this happen in their institution? What would you encourage them to do?

Aarron: So, this is the interesting thing – that so many of us have complained about a problem, but there aren’t a lot of people that will take that complaint and turn it into action. So if you’re a student or if you’re an educator what we need you to do is, there’s a page that’s called Advocate Standards (http://interact.webstandards.org/advocate/) – you can get to it from the homepage of http://interact.webstandards.org. It kind of just describes what standards are, why they’re relevant to you and we need people to share that information with their teachers, we need people to share just this website with their colleagues and show them the testimonials of the people who believe in this and want students to come out of schools with these skills. So we need people to act in a bottom-up sort of way, you know, grass roots. Take this to your classroom, take this to your teacher, take this department chair and just let him know. That’s the most powerful thing that people can do right now.

Paul: I mean, what I’m quite excited about from looking at this curriculum is that it contains a lot more than "Here’s how you code in X language" or whatever and even has got more in it than just design and user experience stuff. All this stuff about professional practices is very exciting too. Could you perhaps tell us a little bit about that?

Aarron: Yeah, so professional practice, we want people to not only get the concrete skills of "I can code a standard compliant page" or "I can construct a usable website", but we want people to be able to present their about their work and you know, be able to survive in a real career in the web. And so professional practices is going to have a series of courses to do that. We’ve got some pretty exciting ones that are coming up. There’s ‘writing for the web’ – it’s going to be a really cool one, that Alan Hussain from a List Apart is going to be creating. And we have a presentation course that’s coming down the line. So, we’ve got a number of those coming up.

Paul: That’s quite interesting, you just said something that I hadn’t grasped which is that there’s more to come here. That this isn’t the end of the line. It sounds like you’ve got lots more that you’re still developing. Is that right?

Aarron: Yeah. We call it a living curriculum, because you never write a curriculum and then you’re done. Especially in our industry, things change so fast. is what of course we’re going to be working on this year. Our design track is light right now and we want to try and address that ASAP, so we’ve got Dan Rubin and Ethan Marcott, are working together to create a foundation design course, that is specific to what web designers need to understand. And we also have Dan Mall is going to be helping us with a Flash course and Aral Balkan is also going to help us with some flash stuff too. We have a lot of stuff going on this year for new courses, so we hope next year at South By when we see everybody that we’ll have a brand new stack to add to Interact.

Paul: Excellent, so do you kind of envisage, from an institutional point of view that, like we were saying, it takes a long time for a curriculum to get approved and that part of the problem has always been that, by the time it’s approved it’s out of date, when it comes to the web. So is the idea that you’re going to get institutions to buy into the Interact curriculum in its evolving nature so that they always get the most up to date version of it. Is that the kind of plan? They’re not grasping one moment in time from it, if that makes sense?

Aarron: Yeah, exactly and we want to take some of the hard work out of being a teacher. I speak from experience, there’s so many things you have to keep track of and trying to keep pace with a lot of changing technologies and concepts, that’s hard on top of the umpteen other plates you’re spinning. So that’s exactly what’s going to happen, is that our courses, they’re not chiseled in stone, they’re published on the web, they’re in an expression engine and we’ll change those as they need to be changed. But that said, we need to strike a balance, because we can’t be chasing every new technology all the time, we have to evaluate and there has to be foundational concepts that remain steady. Separation of presentation and content, that’s steady foundation concept. But new technologies or techniques, they might change.

Paul: Okay, I mean, the whole area of education and web design is massively exciting and there’s so much going on at the moment in so many different fields. I mean, from your perspective, what else out there is really exciting you at the moment that you’re seeing.

Aarron: There’s so much, I just feel like last year that I just saw so many companies, organisations, individuals that, it seems that everyone just was pissed and they just walked out their house and they were headed in one direction until it was like everyone sort of meets up in one big mob. And so, what Opera’s doing, what Chris Mills has done with the 55 articles that he’s brought together and edited for Opera Web Standards Curriculum, that’s huge. Those are all rolled into WaSP Interact as our recommended reading, so that was fantastic. Yahoos Juku project, if you’ve heard of this it’s quite amazing. Nick Fogler, who’s the running Juku – Yahoo actually has a training program, where they bring students that are not employees, they’re not hiring them. They bring them in and they train them to be front end engineers over the course of a few months. And they’re doing it because they’re trying to solve this problem on their own. So, we’re talking with them about how they’re solving problems and looking to collaborate and discuss what we can learn from them. John Allsopp who runs Web Directions (the conference series), he brought myself and Chris Mills and Steph Troeth together with a number of other experts and we did Ed Directions, which was a day long workshop that taught teachers how to teach these concepts in their classroom. So there’s just so much stuff that’s happening right now and that’s just the tip of the iceberg.

Paul: Exciting stuff. It sounds like it’s a really good time and it’s great to have you on the show. How you manage to fit all of this in alongside earning a living too is quite beyond me, but it’s really good that so many people are volunteering and pitching in. That’s great. Okay, let’s get you back on the show, I guess in a years time and sees what’s changed. But thank you very much for coming in now and I will talk to you again soon. Thanks.

Aarron: Thanks for having me.

Thanks goes to Andrew Marquis for transcribing this interview.

Back to top

Listeners feedback:

We have two emails this week dealing with two totally unrelated subjects.

Remote user testing

Our first email is from Steve. He writes…

Catching up on past podcasts, I listened to the episode on User Testing (#150). A method I’ve used that I haven’t heard tossed around much is remote user testing using a screen sharing program like GoToMeeting.

I used this for usability testing of our Intranet and it has several advantages:

  • No need for people to come to central testing facility, or you to go to them.
  • The user is at their own computer, so more comfortable.
  • Ability to record the entire session (screen and audio) so others can look at it later.
  • Tester can conduct testing while in his underwear only (I didn’t do this, but you could.)

What do you think of this method?

Sounds interesting although it would not be my preferred approach.

It’s easy to become a snob when it comes to usability testing and so let me make it entirely clear – any usability testing is better than none.

If you have no budget for user testing, test on friends and family. If time is tight, test on a colleague sitting nearby.

In the same way, if you are having trouble arranging sessions then use Steve’s approach. Something is always better than nothing.

That said, I do have some concerns with remote testing. These include…

  • It sets a minimum bar of technical competency. A user has to be able to connect to the system in order to participate. I know this would have been beyond the capabilities of some test subjects I have worked with.
  • It is less personal. Face to face usability testing puts users much more at their ease and allows you to build a relationship that facilitates honest feedback.
  • It does not allow you to read non-visual signals. Users will often pull a face or shift their positions when they are frustrated. As a facilitator you need to be able to see these signals and ask what they mean.
  • You are not seeing exactly what the user is seeing. You can only see their screen. You cannot see other distractions such as TV in the background. You cannot see the position of their keyboard and mouse. You have a limited field of view.

My preferred approach is to test in people’s homes. Not only are the users more relaxed, you also get a unique glimpse into their world. You see where they access the web, you learn about their home environment and even gain a better understanding of their character.

However, we do not always live in a perfect world and so would definitely use remote testing if better options were not available.

Finding a job

Our second email is a rather despondent one from Andrew…

I have one question, In the past you’ve talked about hiring new for staff, but as far as I can tell you’ve never discussed how to look for a job. I’m currently looking for a career in the industry, but I can’t get a resume to any company or even talk to someone of said company. Almost all the businesses I’ve approached (or at least tried to) either work from home, are no longer at that address, or no longer in business, and actually are just freelancers. And when I find a job posting online its for someone far more experienced then I am. I’m completely demoralized.

You have my sympathy Andrew and I have to say its a tough time to to break into any new sector including web design.

I am also probably not the best person to answer this question. I have been completely unemployable for some time now due to my ill defined skillset and opinionated character :)

So, I am going to try something different with this question. If you have some advice for Andrew, post a comment below. That way we can get the Boagworld community helping each other.

In the meantime here are a few random ideas from me…

  • Give up on the cold calling technique. Randomly contacting agencies is largely a waste of time. You have to get amazingly lucky to contact an agency who happens to be currently recruiting.
  • Try for an internship. Admittedly you will not get paid, but it is a foot in the door. You get a chance to improve your skills and also get to know the people in the industry within your area.
  • Be willing to move. There are jobs out there but they are often further a field.
  • Put yourself in a neat little box. Potential employers need to know what you do. Are you a designer, a coder or a server side developer? Companies don’t know what to do with people who know a bit about everything.
  • Start networking. The best place to find job opportunities is by attending conferences and meetups. Even if you cannot afford the conference itself, turn up at the parties and stand in the halls. Just get yourself out there.
  • Register with recruitment agencies. As an employer I hate recruitment agencies because they cost me money. However, we do still sometimes use them and it doesn’t cost you anything to be listed with them.
  • Ensure your website is perfect. The first thing I do when I look at a potential employee is check out their website. Their site has to be outstanding. It needs to look amazing, be well coded and rich with great content that demonstrates a passion for the web.

Hopefully that helps Andrew and keep an eye on the comments for more advice.

Back to top

Series: Building A Better Web Application by Ryan Carson

Ryan Carson: Hi I am founder of Carsonified a small web company in Bath, England. I am an American as you can probably tell, as for living in England I have been here about nine years. So a little bit of history about us real quick so you know who I am. I have a computer science degree and I have been involved in building four web apps and we are building a fifth truvay.com which will be released later in 2009, and we have sold two of our webapps dropsend.com and heyamigo.net. So the stuff that I am going to share with you today are lessons I have learnt the hard way basically as we have built web apps.

So the first thing I want to talk about is the Admin area that you will build for your web app. What a lot of people don’t know is that the Admin area is really the key to good customer service. If you haven’t enabled really easy customer service then it makes it hard to actually please your customers when they have problems so the first one to make sure you build into your admin for your web app are one click refunds so if someone calls and complains and says hey I am having trouble this month I am really frustrated please help you want to be able to just go into the admin do a search for their email address, their name or their company or anything and bam one click and refund their last invoice and what this does is it gives you, it gives you the ability to just make them happy right away. With a lot of web apps these days on recurring billing you will probably be charging people 5,10,15, $20 a month so losing that amount of revenue in return for really making a customer happy is super important. So make that easy for yourself to refund that money.

The second thing I would make it easy to do is have one click password reset that automatically sends out email with the new password, so with Dropsend it was really hard to reset people’s passwords and that was the number one request people had problems with, they couldn’t remember their password. So if I was to do it again what I would do is I would actually build the admin so I could forward an email from somebody presuming they had sent it from the email address of the account, forward it into Dropsend or the admin and it would automatically know that what it needed to do is reset the password for that email and then it sends out a new one so literally you do not even have to visit the admin area to reset someone’s password you just forward an email that would be amazing, so that’s the way I would do it next time.

The next thing I would do is also doing a one-click resend invoice. So a lot of people they don’t understand they can go into their "My Account" area of a web app to see their past invoices and what they will do is they will just email you and say hey you know I need last month’s invoice. If it is hard for you to find that or send that it is going to make you less likely to help that person so I would do a search on the email address show a list of invoices bam one click and it emails them a pdf version of the invoice. That’s another, that leads me onto another area that I would like to talk about that is invoicing. If you are doing recurring billing sort of every month billing your customers make sure that you are not re-inventing the wheel I would recommend a web app called Spreedly.com and what it is basically it is a web service for recurring billing they have done all the hard work, written all the code, the code for the Dropsend recurring billing was at least I think 1200 lines of PHP and it was good solid code but it was really hard and painful to write. So I would recommend don’t re-invent the wheel use a service like Spreedly because it is making calls to an API if later you decide you don’t want to use a service like Spreedly any more that layer has been abstracted out so you could replace it with your own billing system or another one and it won’t kill you, but I would say hands down don’t rebuild reoccurring billing it is a real pain in the ass.

The last tip I would say about your admin area is make sure that it is easy to give your customers credits. you want to be able to login search for an email address and just give them, hey I want to give them five bucks towards next month, ten bucks just to make them happy and you will have lots of happy customers. So that is my five minutes of tips, thanks Paul for letting me be a part of this. Take care Bye.

Back to top

10 criteria for selecting a CMS

Choosing a content management system can be tricky. Without a clearly defined set of requirements you will be seduced by fancy functionality that you will never use. What then should you look for in a CMS?

I have written about content management systems before. I have highlighted the hidden costs of a CMS, explained the differentiators behind the feature list and even provided advice for CMS users. However, I have never asked what features you should be looking for in a content management systems. That is what I want to address here.

Illustration of a sales man selling a CMS the client does not need.

When I left home for University my mother taught me a valuable lesson. If you want to save money, never go grocery shopping when you are hungry and always write a list. If you don’t you will be tempted to buy things you do not need.

The same principle is true when it comes to selecting a content management system. Without a clearly defined set of requirements you will be seduced by fancy functionality that you will never use. Before you know it you will be buying an enterprise level system for tens of thousands of dollars when a free blogging tool would have done.

How then do you establish your list of requirements? Although your circumstances will vary there are ten areas that are particularly important.

1. Core functionality

When most people think of content management, they are thinking of the creation, deletion, editing and organizing of pages. They assume all content management systems do this and so take the functionality for granted. However that is not necessarily the case. There is also no guarantee that it is done in an intuitive fashion.

Not all blogging platforms for example allow the owner to manage and organize pages into a tree hierarchy. Instead the individual ‘posts’ are automatically organized by criteria such as date or category. In some situations this is perfectly adequate. In fact this limitation in functionality keeps the interface simple and easy to understand. However, in other circumstances the absence of this functionality can be frustrating.

Blogger Homepage

Consider carefully the basic functionality you need. Even if you do not require the ability to structure and organize pages now, you may in the future. Be wary of any system that does not allow you to complete these core activities.

Also ask yourself how easy it is to complete these tasks. There are literally thousands of content management systems on the market, the majority of which offer the core functionality. However they vary hugely in usability. Alway look to test a system for usability before making a purchase.

The editor is one core feature worth particular attention.

2. The editor

The majority of content management systems have a WYSIWYG editor. Strangely this editor is often ill considered, despite the fact that it is the most used feature within the system.

The editor is the interface through which content is added and amended. Traditionally, it has also allowed the content provider to apply basic formatting such as the selection of fonts and colour. However more recently there has been a move away from this type of editor to something that reflects the principles of best practice.

The danger of traditional WYSIWYG editors is two fold. First, they give the content provider too much design control. They are able to customize the appearance of a page to such an extent that it could undermine the consistence of design and branding. Second, in order to achieve this level of design control the cms mixes design and content.

The new generation of editors take a different approach. The content provider uses the editor to markup headings, lists, links and other elements without dictating how they should appear.

Wordpress WYSIWYG

Ensure your list of requirements include an editor that uses this approach and does not give content providers control over appearance. At the very least look for content management systems that allow the editor to be replaced with a more appropriate solution.

The editor should also be able to handle external assets including images and downloads. That brings us on to the management of these assets.

3. Managing assets

Managing images and files are badly handled by some cms packages. Issues of accessibility and ease of use can cause frustration with badly designed systems. Images in particular can cause problems. Ensure that the content management system you select forces content provider to add alt attributes to imagery. You may also want a cms that provides basic image editing tools such as crop, resize and rotate. However, finding such a cms can be a challenge.

Also consider how the content management system deals with uploading and attaching PDFs, Word documents and other similar files. How are they then displayed to users? What descriptions can be attached to the files and is the search capable of indexing them.

4. Search

Search is an important aspect of any site. Approximately half of users will start with search when looking for content. However, often the search functionality available in content management systems is inadequate.

Here are a few things to look for when assessing search functionality:

  • Freshness – How often does the search engine index your site? This is especially important if your site changes regularly.
  • Completeness – Does it index the entire content of each page? What about attached files such as PDFs, Word documents, Excel and Powerpoint?
  • Speed – Some search engines can take an age to return results. This is especially common on large sites.
  • Scope – Can you limit the scope of search to a particular section of the site or refine search results once returned?
  • Ranking – How does the search engine determine the ranking of results? Can this be customized either by the website owner or by the user?
  • Customization – Can you control how results are returned and customize the design?

The issue of customization is one that goes far beyond search.

5. Customization

I have been unfortunate enough to work with content management systems that are completely inflexible in their presentation.

Illustration demonstrating the inflexibility of some CMS

The presentation of your content should not be dictated by technology. It is simply not necessary now that we have techniques for separating design and content. Unfortunately like web designers, many content management providers have failed to adopt best practice and their systems produce horrendous code. This places unreasonable constraints on design and seriously impacts accessibility.

You need a content management system that allows flexibility in the way content is returned and presented. For example can you return news stories in reverse chronological order? Can you display events on a calendar? Is it possible to extract the latest user comments and display them on the homepage? It is flexibility that makes a cms stand out.

Talking of user comments, it is worth mentioning all forms of user interactions.

6. User interaction

If you intend to gather user feedback, your cms must provide that functionality or allow third party plugins to do so. Equally, if you want a community on your site then you will require functionality such as chat, forums, comments and ratings.

As a minimum you will require the ability to post forms and collect the responses. How easy does the cms make this process? Can you customize the fields or does that require technical expertise? What about the results? Can you specify who they are emailed to? Can they be written to a database or outputted as an excel document? Consider the type of functionality that you will require and look for a cms that supports that.

Also ask what tools exist for communicating with your customers. Can you send email newsletters? Can recipients be organized into groups who are mailed individually? What about news feeds and RSS?

Finally consider how you want users to be managed. Do you need to reset passwords or set permissions? Do you need to be able to export user information into other systems?

But it is not just user permissions that may need managing. You also have to consider permissions for those editing the site.

7. Roles and permissions

As the number of content providers increase, you will want more control over who can edit what. For example, personnel should be able to post job advertisements but not add content to the homepage. This requires a content management system that supports permissions. Although implementation can vary, permissions normally allow you to specify whether users to edit specific pages or even entire sections of the site.

Illustration showing the consequences of not having a permissions system

As the number of contributors grows still further you may require one individual to review the content being posted to ensure accuracy and consistent tone. Alternatively content might be inputed by a junior member of staff who requires the approval of somebody more senior before making that content live.

In both cases this requires a cms that supports multiple roles. This can be as simple as editors and approver, or complex allowing customized roles with different permissions.

Finally, enterprise level content management systems support entire workflows where a page update has to go through a series of checkpoints before being allowed to go live. These complex scenarios require the ability to roll back pages to a pervious version.

8. Versioning

Being able to revert to a previous version of a page allows you to quickly recover if something is posted by accident.

Some content management systems have complex versioning that allow you to rollback to a specific date. However, in most cases this is overkill. The most common use of versioning is simply to return to the last saved state.

Although this sounds like an indispensable feature, in my experience it is rarely used expect in complex workflow situations. That said, although versioning was once a enterprise level tool it is increasingly becoming available in most content management systems. This is also true of multi-site support.

9. Multiple site support

With more content management systems allowing you to run multiple websites from the same installation, I would recommend that this is a must-have feature.

Although you may not currently need to manage more than a single site, that could change. You may decide to launch a new site targeting a different audience.

Alternatively with the growth of the mobile web, you may create a separate site designed for mobile devices. Whatever the reason, having the flexibility to run multiple websites is important.

Movable Type admin system

Another feature that you may not require immediately but could need in the future, is multilingual support.

10. Multilingual support

It is easy to dismiss the need to support multiple languages. Your site may be targeted specifically at the domestic market or you may sell a language specific product. However think twice before dismissing this requirement.

Even if your product is language specific, that could change. It is important that your cms can grow with your business and changing requirements.

Also just because you are targeting the domestic market does not mean you can ignore language. We live in a multicultural society where numerous languages are spoken. Being able to accommodate these differences provides a significant edge on your competition.

That said, do think through the ramifications of this requirement. Just because you have the ability to add multiple languages doesn’t mean you have the content. Too many of my clients have insisted on multilingual support and yet have never used it. They have failed to consider where they are going to get the content translated and how they intend to pay for it.

Conclusions

Features are an important part of the CMS selection process, but they are not everything. It is also important to consider issues like licensing, support, accessibility, security, training and much more.

I leave you with a word of warning – Don’t let your list of requirements become a wish list. Keep your requirements to a minimum, but at the same time keep an eye on the future. Its a fine line to walk. On one hand you don’t want to pay for functionality you never use. On the other, you do not want to be stuck with a content management system that no longer meets your needs.

This has been an extract from the Website Owners Manual - now available as an ebook and for preorder in print.

Win a copy of 'A Practical Guide to Designing for the Web'

Everybody involved in the web design process needs an understanding of design fundamentals. That is why everybody should read “A Practical Guide to Designing for the Web”.

Maybe you are a website owner who has to sign off on a design comp. Maybe you are a developer who has to implement the design produced by somebody else. You might even be responsible for a sites design without having any formal design training. Whatever the case, you should probably read Mark Boulton’s new book.

This PDF book covers the underlying principles of all good design. Whether it be online or in print, good design is governed by certain best practices. This book introduces the reader to these principles, including subjects such as…

  • How to start the design process
  • Research and ideas
  • An introduction to typography
  • The basics of colour theory
  • The rules of good layout

The book is unsurprisingly beautifully designed. However it is also well written and engaging. I can highly recommend it.

Page sample from Marks book

Win a free copy

You could go and purchase a copy right now for only £12 (and I would encourage you to do so). Alternatively you could win one of three free copies by entering our twitter competition.

For your chance to win a copy of this inspiring book, twitter your top design tip using the hash tag #designTip. For example your tip might be…

#designTip – If you wish to draw attention to a design element surround it with whitespace.

The closing date for this competition is Friday 27th February, so get your tips in before then.

The winners will be chosen by Mark and we will direct message them shortly after the 27th. To ensure we can do so please subscribe to the Boagworld Twitter feed.

The winners will also be announced over twitter and on the boagworld podcast.

Current entries

Below you can view the current Design Tips that users have submitted.

Video: Introduction to WCAG 2

I recently gave an internal presentation at Headscape about WCAG 2. A number of people expressed an interest in seeing it so I made a point to record it.

At the end the presentation I references a stripped down version of the guidelines found here.

I also refer to a quick reference guide to WCAG 2 that can be found here.

Apologises

Apologises for the poor audio quality of this video. Unfortunately the decision to record the presentation was made at the last minute and so we didn’t have a proper mic setup arranged. You can also tell it is not quite as slick as my normal presentations :)

I would also like to apologise for the lack of transcript of this video. Again, it was not my initial intention to put this video online as this was an internal presentation containing my initial thoughts on WCAG 2. I am still learning a lot about the new guidelines and will publish a more considered article when I have a better understanding of the subject.

Feedback

On that subject, I would be interested to hear your feedback on the thoughts I present. Do you agree with my interpretation of the new guidelines? Have I misunderstood anything? Are there other elements I should have addressed? Your thoughts would be appreciated in the comments.

Update: We now have a transcript!

Thanks go to Anna Debenham who braved the horrendous audio to transcribe the presentation. If you cannot face the video we do at least now have a written version!

Paul: Ok, this has worked out a little bit weird because the idea initially with this presentation was that it was really about bringing us up to speed with WCAG2 now that WCAG2 has been released. But I made the mistake of mentioning it online and several people said “ooh, can you record that?” so now it’s a little bit of both, a little bit of a presentation to you guys and a little bit of a presentation that will go on the web.

Paul: So as you guys probably know, WCAG2 has now been released, and as accessibility is a big part of what we deliver and we talk a lot about accessibility, we need to be up to speed on it and we need to know what we’re doing. Obviously accessibility has become such a part of what we do day in and day out that we don’t necessarily think too much about it, it’s almost an intrinsic part of what we do, but with changes to WCAG2, or with the arrival of WCAG2, there have been differences, changes, things that have altered, so I want to make sure that everybody is up to speed with it. Feel free to butt in with questions, that’s absolutely fine.

Audience: Will the video be able to see the screen?

Paul: The video will be able to see the screen. Ok, so, WCAG2. Basically, WCAG1 came out in 1999 which is a good old time ago, in Internet terms that’s like forever, and there was a real need to make some changes and improve WCAG1. Let me just pop back and just explain.

The Journey to WCAG2

Paul: So, yeah, like I said, WCAG1 came out in 1999, it quickly dated as technology evolved, and some of the guidelines actually became harmful in a way. So you guys know that for example, we don’t always take note of what they say about Access Keys, we don’t always take note of what they say about “make sure you put text in an empty form field” and things like that. And WCAG1 was very much built with HTML in mind, and obviously the web is a lot broader than that and there are a lot more formats about. But unfortunately development of WCAG2 was very slow, and also fraught with controversy. I mean, famously with Joe Clarke who is an accessibility expert wrote on A List Apart “to hell with WCAG2″ because it basically had become a bit of a joke, because it was very generic; they were trying to write a set of guidelines that really made no effort to mention specific technology because they didn’t want it to date like WCAG1, but the result is it became unreadable and nobody could understand it.

WCAG2 Reborn

Paul: But, things did change. Major changes were made to the WCAG2 draft and things did improve dramatically. They really listened to the community, and the language in it now is much clearer. So what I want to do now is talk a little bit through what WCAG2 includes and what it doesn’t, and how we’re then going to go about implementing it and how it affects us.

Principles

Paul: Ok, so let’s look at the structure of WCAG2. Basically WCAG2 has 3 tiers to it that you need to know about. Tier number 1 is the idea of Principles. So this is kind of the most generic of the tiers, you know, it’s really kind of aimed at the kind of things you would tell a board of directors that doesn’t really understand anything technical, that doesn’t really understand accessibility at all. And there are 4 principles which are the foundations of web accessibility and these principles I’ll come onto a little bit later.

Guidelines

Paul: Underneath each of those principles are Guidelines. So, within each principle there are 3 or 4 guidelines or a number of guidelines that is different for each principle. But there are a total of 12 guidelines, and these are goals that you should be working towards in order to make your content more accessible to users.

Success Criteria

Paul: Under each guideline, there are Success Criteria. So now we’ve really hit the nitty-gritty, these are kind of specific, measurable goals that you’ve got to achieve. And this is how you judge whether your site is WCAG2 compliant, if you like. So, this is the really important level if that makes sense, but it’s organised within this hierarchy of guidelines and principles.

Techniques

Paul: Now, actually, there is kind of a 4th tier as well which is techniques. So you’re trying to, maybe as designers, you’re trying to conform to the Success Criteria, well there’s a whole load of different ways and different techniques that you can do that and you could read about those, and you could make up your own techniques if you wanted to, but there are some laid down that can help you get going.

Working with WCAG2

Paul: So those are the 3 levels that WCAG2 is built around. Now let’s dive into those a little bit. I had to think about how much detail I want to go into in this room. Obviously we don’t want to go into every technique that you could possibly apply and we don’t even want to go into necessarily every success criteria. That’s really for you guys to look through afterwards. What we are going to do is look at those guidelines and those principles, and hopefully help you to understand where WCAG2 stands over stuff.

Perceivable

Paul: Ok, so, the first… heh, totally illegible text, isn’t that great. Very accessible!

Audience: (laughter)

Paul: So the number 1 principle is Perceivable, and that’s 1 of your 4 principles that you’ve got here. And perceivable is basically talking about “information and user interface components must be presentable to users in ways that they can perceive”

Audience: (laughter)

Paul: Unlike that! (points to presentation)

Audience: (laughter) Is the rest of the presentation like this?

Paul: Yes.

Audience: (more laughter)

Paul: You actually don’t need to read this anyway which is very useful. So, Perceivable is basically about “can you see it?”, that is it as far as the principle is concerned, and the answer is “no you can’t”. But perceivable then breaks down into a series of guidelines. So, let’s have a look at what these guidelines are. So basically, perceivable is broken down into 4 guidelines. And if we talk through each of those it should give you an idea.

Text Alternatives

Paul: The first one is text alternatives. So this is stuff we already know. “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” So this really applies to things like video, audio, forms that you create, and interestingly CAPTCHA is particularly mentioned here. And that is a particular accessibility problem that hasn’t been particularly well solved I don’t think.

Time Based Media

Paul: The next way that Perceivable works itself out is in time-based media. What we’re talking about here is that you need to provide an alternative for anything that is time-based. So here we’re talking about captions for video, sign-language maybe, media alternatives, but it also applies to live and pre-recorded video. So if you’re streaming stuff, then you need to think about this as well as with stuff that’s pre-recorded. Now, it does take into account the difference between “crap, how are we going to make streaming video accessible?”. If you read into the guidelines it does give some good advice there. So that’s not quite as scary as it first sounds.

Adaptable

Paul: Anything that we produce needs to be adaptable. In other words, content can be presented in different ways. For example, a simpler layout maybe for people with cognitive disabilities for example. Really, this boils down to things like using semantic markup, meaningful order in your HTML so that if the CSS is stripped away it still makes sense in the order that it is presented, and not relying on colour and other sensory elements to convey information.

Distinguishable

Paul: And then finally it’s got to be distinguishable. So it’s about making it easier for users to see and hear content including separating foreground from background and that kind of stuff. So we’re talking here about contrast, colour, and control over things like audio and video, that kind of stuff. So that’s where we’re at with perceivable.

Operable

Paul: Let’s move onto the next principle which is Operable. So, Operable is about user interface components and navigation, and making them easy to use so that somebody can use them whatever disability they may have. So this again breaks down into 4 different guidelines, the most obvious of which is Keyboard Access. So everything that we produce has to be accessible via a keyboard. So, for example, the Flash video that we’re currently creating for the Wiltshire Farm Foods home page needs to be keyboard operated, alright? Which I bet it isn’t at the moment! And to be fair, it’s part of production, I’m sure they’d put that in at the end if I hadn’t reminded them. That existed under WCAG1, so there’s nothing different there. So everything needs to be keyboard accessible.

Enough Time

Paul: You also need to provide enough time for people to take in the information that they’re being presented with. So giving the ability to pause, stop and control time based material is really important as well.

Seizures

Paul: You’ve got to take into account seizures, some people can have seizures triggered by animation and that kind of thing, so there are various limits that the guidelines lay down about flashing objects and stuff like that.

Navigable

Paul: And then finally it’s got to be navigable. So this includes things like skipping content, having descriptive page titles, tab order, links that make sense out of context, lot’s of headings, that kind of stuff. Is this all making sense?

Audience: Yes, apart from time-based media, I don’t understand that.

Paul: Time-based media, we’re talking about video and audio. So let’s say you had… one of our podcasts. So, there are certain things we need to ensure. One is that it is operable, in other words, a user can pause the podcast if we get annoying, or they want time to take in the information that we’ve said, but the other thing is that we also need to provide an alternative way of them getting it which is why we provide the show notes that we do and the transcripts and stuff like that.

Audience: Ok, well that kind of fits under Text Alternatives and giving it control so it’s under Operable… I just don’t get where it is under perceivable, as a perceivable thing, it has to be perceivable?

Paul: Yeah, basically.

Audience: Video, audio… all has to be perceivable then?

Paul: Yes. Some of these principles and certainly some of the guidelines do overlap to some degree. But when you draw down to the Success Criteria level, of how you actually apply these things, then there are more specific techniques. I think what they did is create a load of success criteria, and then kind of chunked them together in meaningful groups, but sometimes they’re not so meaningful. But it is a vast improvement on WCAG1 as far as being able to understand it.

Understandable

Paul: Ok, talking of understanding it, our next one is Understandable. So this is the next one of our 4 top-level principles, so everything you produce has to be understandable. So what does that mean? Well that results in 3 guidelines. It has to be Readable, Predictable and has to be able to provide Input Assistance. So how does that work itself out in practice?

Readable

Paul: With Readable, we’re talking about making content readable, text content mainly. So this works out in things like setting the language in your HTML, you know, setting what the language is in the header, avoiding using jargon, finally we’ve got a decent reason to go back to clients and say, you know, “you can’t use that kind of language, nobody understands it!”. Also things like abbreviations need to be explained, and also reading level as well, and that’s something I really want to get through to a lot of our clients because a lot of our clients, especially the public sector clients that we have, have this attitude of “well of course, people that look at our site are of post-graduate degree people, and they have excellent reading level”, but that doesn’t take into account things like people that speak English as a 2nd language, who can be very intelligent but not particularly good at reading, also people with Dyslexia can be incredibly intelligent but not particularly good at reading. So reading level is an important aspect of it.

Predictable

Paul: For it to be understandable it also needs to be predictable. So with this we’re talking about things like consistent navigation, and no uninitiated changes. And this is a particularly important one in our world of AJAX and JavaScript and all this cool stuff that we’re doing where we can often trigger events without asking the user’s permission first. When I say “asking for permission” I mean they haven’t clicked on link or they’ve not initiated it in any way. Users need to initiate these actions… and no pop-up windows without them clicking first to trigger a pop-up and being aware of what’s going to happen. It’s all about making it understandable and making them aware of what’s going on.

Input Assistance

Paul: The last guideline under Understandable is Input Assistance. So this is going into the realms of when we do forms, how do we handle errors, what kind of feedback do we give to the user, what labels – are things clearly marked up as labels, are they descriptive of the fields and the forms and that kind of stuff. We’re also talking about help, what additional help are you provided in terms of tool tip and contextual help and anything else that you care to mention. So that’s Understandable, that’s what that principle is driving at.

Robust

Paul: The final principle is Robust. “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.” In other words, what we build has to work on everything.

Audience: What about AJAX?

Paul: I think that’s where we get into the realm of progressive enhancement, that it’s fine to use something like AJAX as long as, if the AJAX is taken away, it still operates. Or, you provide an alternative version, the guidelines do actually accept that you can do alternative versions of something. So Gmail is a good example of that, Gmail, it actually doesn’t work if AJAX is turned off but they do provide an HTML only version of it which does the same thing. I’m not a great fan of that because it’s twice as much stuff to maintain, and one version become out of date and all the rest of it. My preferred technique is to build it so it works normally, and then to layer on the JavaScript and AJAX on top of it to provide enhanced functionality, which is what we guys have been doing pretty much all along and we need to continue in doing that.

Compatibility

Paul: So that Robust principle actually only comes down to one guideline which is Compatible, so that’s about maximising compatibility with current… listen to the wording of this… Maximise compatibility with current and future user agents, so we also need to be looking forward as well and predicting the future which is always good. But that’s where it comes back to using solid, good code that is’nt reliant on lots of hacks in order to get it to work, and it goes back to the conversation that we’ve been having recently about browser testing, upgraded browser support and that kind of stuff as well. So Compatibility and Robustness is the last principle. The other thing I should have mentioned with Compatibility is this also includes things like validation, making sure that your code validates, and just generally other markup type stuff.

What, no AAA, AA, A?

Paul: Ok, another thing that might have occurred to you is AAA, AA, A.. Priority 1, 2 and 3. Priority 1, 2 and 3 are still there, there are still those levels of conformance, but I get a real sense from the tome of this document, and this is just my personal opinion, people watching this video who know a lot more about accessibility might jump all over me on this, but my sense is that they were playing down those 3 levels of conformance. To be honest, I think I’m pretty keen on that. I don’t think those levels of conformance have done a lot of good generally speaking, because I think it’s kind of developed a checkbox mentality amongst some of our clients “We must be AA compliant” or “We must be A compliant” and they’re not actually thinking about the needs of the users, they’re just ticking the boxes so they meet some quota that has been established somewhere. One of the things that’s quite interesting, and I’m not sure if it’s a change from WCAG1 or not, I couldn’t find the reference in WCAG1 but again someone will correct me no doubt, but conformance in WCAG2 seems to be on a page-by-page basis. So you’re no longer in a situation where you want to claim conformance so you’re claiming conformance for an entire site, but you’re rather conforming on a page-by-page basis. And this allows you to basically pick-and-mix the level of conformance you want to reach on any particular page which is much, much more sensible because there are some elements where you might be building a particularly complex application that really isn’t going to manage being AAA compliant, whereas the rest of the site is AAA, and this one page isn’t. So it’s giving you the ability to mix and match. In fact, in the guidelines it says “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. In other words they’re saying it’s just not possible to be AAA in some situations, so don’t even try.

Start With Basics

Paul: So how does this relate to what we do on a day-to-day basis? Well, I think the language we use with our clients pretty much will remain consistent with how it was with WCAG1 which is that we need to start of by encouraging all our clients to start with the absolute basics. A lot of people are put off of accessibility because of the enormity of it, of all the things they’ve got to do. And even to be single A compliant there is quite a lot to do if you’ve got a site that has never been built to be single A compliant before. So I think our attitude has got to be that you work towards this over time, it is an ongoing process, you don’t need to do it all in one big go and that you need to start with the absolute basics, the quick wins, the stuff… you know, it’s the 80/20 rule, 80% of the problems that people are going to encounter from an accessibility point of view is caused by 20% of the accessibility issues if that makes sense. So we can solve a small number of issues but have a big impact on the site. So we’ll start off with some real basic stuff. Things like putting in “alt” and “title” attributes, providing alternatives to media, things like video and audio, being aware of JavaScript and the problems that JavaScript can create if it’s not implemented correctly, providing resizable text so that the user has the ability to either increase or decrease the text size on sites, to build everything to be standards based because that makes it so much easier in future.

Audience: Aren’t we moving away from resizable text?

Paul: We’re moving away from the resizable interface where the whole thing scales up and down, but there’s no reason why we can’t keep the text itself rescaleable. The layers should be able to push up and down. It has to be said with resizeable text, it is becoming less of an issue. The reason it’s becoming less of an issue is because browsers now have this zoom functionality built into them. But I don’t think we’re quite there yet to be able to drop resizable text entirely is my current feeling… I’ve got mixed feelings about it. But the obvious aim we’re going for here is to be single A compliant.

Build Over Time

Paul: So all of this is about building accessibility over time. Taking the guidelines by themselves is not going to be enough, and taking this checkbox mentality that I talked about earlier is not going to be enough. Once you’ve done these quick fixes, the next step on from that is to start consulting with your community. We need to encourage our clients to start talking to their users and find out what accessibility concerns they have. I also think, which I think we’re quite poor at, that we need to start testing with real users some of the accessibility stuff that we do, and the big problem there is persuading clients to pay for that. It’s really hard to get clients to pay for that kind of testing but I do think that it’s a really useful thing to do, and there are organisations out there that provide people you can get in to do testing, or that you can send sites out and they test with them. So, testing with real disabled users is really worthwhile. I think it’s about identifying major issues and dealing with those first, just pragmatic kind of prioritisation of issues, something you do with usability. With usability you look for the quick wins and the showstoppers and those you deal with first, exactly the same with accessibility. Now, what the major showstoppers are for those navigating the site need to be dealt with. And over time you build towards AA and AAA compliance if you can. But you only do that maybe on some pages. The big concern clients have and the reason they get into this check-box mentality of saying “we’ve got to be double A or we’ve got to conform to the WCAG guidelines” is fear, a fear of litigation. Especially our bigger clients, they’re really worried they’re going to get serious issues. But I think it’s important to stress with clients that litigation doesn’t happen overnight. You don’t suddenly have come through the post a writ saying “you need to come into court about this accessibility issue on your site”. It doesn’t happen like that. What happens in reality is the user complains. And if the user is repeatedly not heard and not listened to, and not responded to and not cared about and rejected, they get angry enough to maybe approach someone like the RNIB who then take it on into litigation for them. That’s the reality of what happens.

Quick Response

Paul: So as a result, you can diffuse that by responding to complaints quickly. So as you’re building up over time with the accessibility policy, if someone does complain, you need to write back to them and you need to deal with that issue straight up. Ok, so that’s how the client should be dealing with all this and there’s loads more I could say on this but I don’t want it to go on forever.

Headscape’s Approach

Paul: Let’s briefly talk about Headscape and our approach and how we should be approaching the subject of accessibility.

Establish Approach With Client

Paul: Well first of all I think everything that we do in our approach should be in conjunction with the client. I don’t think necessarily we talk enough to the client about accessibility. Some clients are just so bamboozled by it that they want us to take control, others want a say in it and what to be reassured that we’re doing something about it. So I think there’s a dialogue that we need to make sure happens. And if a client just wants us to take control of it, that’s great. If they want to be involved in the process, then that’s great to but we need to engage with the client and talk to the client more about it.

Remain Pragmatic

Paul: The second thing and I think this is really important is that we need to remain pragmatic in our approach to accessibility. Everything I’ve been talking about before like building up accessibility gradually, about doing the quick wins first and the show stoppers and that kind of stuff, that’s all pragmatic. I don’t want us on one hand to ignore accessibility, and it needs to be an integral part of everything we do, but on the other hand you can become extremist about it. We could spend hours and hours trying to get something to work in every conceivable user agent in the world and we can worry about every type of disability to the point where it becomes like a paralysis that stops us actually doing anything. So there’s a real balance that we need to strike here. And we need to strike that with our clients and working with our clients.

Have a rationale

Paul: Now I think it’s worth saying that if we decide not to comply with a guideline for whatever reason, we need to have a rationale for that. So we might not conform even to single A compliance in certain situations, although to be honest I can’t think of any off the top of my head, but if we do decide not to conform, we need a damned good reason why not. In other words, we need to have thought about it. And the other thing about accessibility is that we always think about it at the end of the project. It’s too late by then, we’ve built everything. So it really needs to become an intrinsic part of everything that we do.

Responsibilities.

Paul: Let’s talk about the idea of responsibility here and whose responsibility accessibility is within Headscape. Basically I’m going to say, everybody. One of the absolute great things about WCAG2 is because it’s got this 3 tiered approach, it is “accessible” to everybody. It’s understandable by everybody. So therefore it can be everybody’s responsibility to keep an eye on accessibility. And so this is how I think it should split down.

Sales/Client – Principles

Paul: Marcus and Chris and the Client should be worried about principles. The Operable, the Perceivable, those basic top-level principles. And you should be looking at anything that goes out from the company and going “well is that really operable?” So you can take a very top-level approach to it. And I think as you talk to clients as well you take this very top-level approach to it. That’s the level you guys should be working at.

Guidelines – Project Managers

Paul: Project managers, I think you need to be looking and understanding from the guidelines point of view. So you need to go in and read what those guidelines are, and you need to be sure that you understand them. And as you look at any work that goes out from the company, you need to be thinking “does it conform to those guidelines?” You don’t necessarily care about the nitty-gritty of how those are measured, or the nitty-gritty of how they’re achieved, but has that guideline been met? That’s the level you need to be working at.

Success Criteria – Designers and Developers

Paul: Then when it comes to the designers and developers, you need to get right into these guidelines. And you need to understand the success criteria and how to apply the guideline and how to make them work in practice.

Check Everything

Paul: So basically, we need to be checking everything that goes out the company for accessibility. And I have to say I’m making the mistake of saying this on camera, but I think we’ve got a bit lax recently when it comes to accessibility. We reached a point where it was becoming quite intuitive to us, and we were doing it quite naturally, and then as a result of that, we stopped checking because it was the natural process of what we were doing, and then bad habits start to seep in again. So WCAG2 is a great opportunity for us to say “ok, we need to start reviewing everything we’re doing as it goes out again”. So I’d really, really encourage you to check everything.

Needs to be second nature

Paul: basically we need to get to the point where this is second nature to us, so that we’re doing this intuitively again, but not to the point where we’re no longer checking.

Audience: Clients often say “what’s the difference? If I just got for single A compliancy, what won’t my site be reaching?”

Paul: I have to say that I think I would stop talking about double A, triple A and single A compliancy. I don’t think there’s really any value any more in talking about that to the clients.

Audience: I think there is because having the page by page conformance is a really good thing and that we can now argue that yes, we can now make the majority of your site triple A compliant, but for a page full of videos, we can make it single A compliant.

Paul: Ok

Audience: Clients will continue to reference it in briefs. You can’t not talk about it.

Audience: I think it’s actually quite a strong thing.

Audience: is it a page by page compliance, or template by template compliance?

Paul: I think it has to be page by page because the content that goes into the page, into the template, could invalidate it. This is why I think it’s something that should be downplayed. I accept the clients will still talk to us about it, but clients still talk to us about doing speculative design, it doesn’t mean we do it. I think there’s an education thing there whereby we need to move clients away from being obsessed by double A, single A compliance, and to start thinking about accessibility policies. What is there accessibility policy and what is it that they are trying to achieve on their site? Our base mark is going to be single A, it’s always single A, and I think it should continue to be single A.

Audience: but if you don’t talk to them about it, you could argue that less caring clients would just say “well why would I do anything about it, bottom line?”

Paul: Yeah, I said you shouldn’t talk about single A, double A, triple A, but that doesn’t mean you can’t talk to them about accessibility and the improvements that accessibility brings because for people that have got that sort of attitude you don’t want to talk about the disabled if they don’t care about the disabled, you talk about search engines, and that’s the best way to sell accessibility, by talking about search engine placement. That’s the reason you want to be accessible for people who have that kind of attitude. For those that care, and are talking about single A, double A and triple A, you need to say to them “well actually, conforming with any level, it’s great that you want to do accessibility, and certainly single A should be an absolute minimum, but we’d encourage you to start working up an accessibility policy and looking at your site as a whole and say could this area do more in your site, your accessibility policy should do real world testing with real users…” all kinds of things.

Audience: So you think that we should be encouraging large organisations that have accessibility policies themselves that refer to double A, triple A, to try and persuade them to kind of move away from that?

Paul: No, not necessarily, I wouldn’t go that far. Don’t get me wrong, I’m not saying that they’re a bad thing, I’m saying they’re not the be-all and end-all. And at the moment I feel like the vast majority of clients think they are the be-all and end-all. They’re obsessed with putting that little badge on the bottom of the page. And it’s not about putting badges on the page. The trouble with institutions that have these policies of single A, double A and triple A is that these policies are in place for the institution, not for the user. And that’s my problem with them. That’s why I think we should try to break that mentality with clients. And I accept that sometimes we’re going to lose, and that’s fine. Exactly the same goes when we were talking about browser support. I accept sometimes we’re going to lose that battle as well. But it doesn’t mean we shouldn’t try and fight it.

Audience: I just wondered why WCAG2 still does it, because yes, you’re right basically, and accessibility requirements should be based on user requirements and not ticking boxes, so why is it still in there?

Paul: I think it’s in there because… my impression… I hate talking about accessibility on camera! You remember what happened last time in the podcast? It was just a nightmare! I think the reason it’s still in is because some of those success criteria are hard to meet. Some of them are damn difficult. When you start talking about streaming video, you’ve got some difficult challenges there that need to be met. So I think as a result, what the W3C is saying there is that we accept that some of these things are difficult to do. And we accept that you’re not always going to be able to do them, so we’re going to make them triple A. But come on guys, some of this stuff is dead simple and we should be doing it, that’s single A. That’s my impression of the mentality behind it, and that’s a great mentality, but it’s when someone changes that to being guidelines, which is what they are, to being rules, really instilled by Moses and presented to the people. You know it’s not that and I think that’s an important differentiation to make.

Where to Start

Paul: I know what you guys are like, especially designers. Ok I’m making sweeping generalisations here. But, if you guys go along to the WCAG website and you look at the WCAG2 guidelines, it’s horrible! It’s intimidating and it’s scary and it goes on for pages. And there’s a lot of text around it.

Audience: There’s no pictures? (laughter)

Paul: There’s no pictures! The design isn’t even very good. So what I’ve done is I’ve taken that page, I’ve literally all I’ve done is I’ve stripped out the explanation text in front of it, and the waffle at the end of it, and I’ve left you with just the set of guidelines so it looks like a slightly less intimidating list. Not much but slightly. So that’s up at http://www.headscape.co.uk/WCAG2 so if you go to that, you can get just the actual list of criteria. There’s also, on the WCAG2 website, there’s a thing where you can go and you can say my site uses tables, my site uses video, my site has this and that, and you untick the ones that it doesn’t have and it narrows down the list of success criteria to only show you the ones that you need to care about. So you might want to check that one out as well. Ok, so that’s basically all I have to say, are there any other questions before we wrap up?

Questions

Audience: Clients are going to ask us the 1 minute elevator pitch. What’s the difference between WCAG2 and WCAG1? What would you highlight as differences?

Paul: I think there’s a bigger acceptance of things in the world other than HTML, so things like Flash, PDFs, all that kind of stuff, there’s much more reference to that kind of thing. It’s much better written, much better organised. I think it’s more pragmatic. It’s a little bit more… I think it will last the test of time more. It’s hard to pin down exactly what I mean by that. There is actually a document out that talks about the specific differences between WCAG1 and WCAG2 if you wanted to get into that level of detail. And to be honest, I couldn’t tell you what that is yet because I haven’t looked at it in that much depth myself.

Audience: I think you and I do need a couple of the more detailed stuff, to get the guidelines, just one or two examples basically. Something that’s new between WCAG1 and WCAG2, and also some of the differences between single A, double A and triple A. The streaming video is an excellent example.

Paul: Just go along to http://www.headscape.co.uk/WCAG2 and you’ll be able to see those different levels.

Audience: It seems like, an almost unwritten principle, or unwritten in your list of principles. It’s technology agnostic.

Paul: WCAG2 started off as so technologically agnostic that it wasn’t understandable.

Audience: WCAG1, the first line is all about “it must be W3C technologies”.

Paul: Yeah, it will pretty much accommodate anything. You know, it talks in terms of audio and video. It doesn’t mention Flash for example specifically, at least I don’t think it does, but it refers to those kinds of things. It refers to documents that are not HTML. I’m saying this as much for the video as anything else, I’m still learning about it as well. So I think it’s going to be a learning process for a while for us to really get to grips with this, and truth be told we probably should have started a little sooner than this, but it’s not radically different from WCAG1. This is as much getting us back into the habit of thinking about accessibility as anything else really. Ok?

Audience: 1 more question. Are they new Keynote animations?

Paul: Yeah, they are new Keynote animations.

147. Ho Ho Ho

This week on Boagworld: IT’S CHRISTMAS!

Play

Download this show.

Launch our podcast player

Watch the behind the scenes video

This week’s Boagworld is our live Christmas special recorded via ustream.tv. It is our last show before the Christmas break. We return on Wednesday 14th January 2009!

News and events

Kevin Rose’s Christmas Shopping list

Later in the show we are going to share your top geek gifts. However, before we do that I thought we would start with Kevin Roses’ list to Santa.

Kevin has posted his top 10 gifts for geeks and it makes interesting reading. His list includes:

  • Amazon MP3 Gift Certificates – Notice this is not iTunes
  • A USB Drive that can go through the wash and survive to tell the tale
  • A clever little box that can stream Netflix films to your TV
  • A kit for getting you into building your own electronics
  • A HD flip camera
  • Some awesome luggage that is perfect for conferences
  • An insane all in one printer with touch screen
  • A Drobo
  • A micro tool with 19 different functions
  • A Casio slow motion camera

I whole heartedly support the inclusion of the Drobo in this list and I love the look of the luggage. However, personally I would prefer iTunes vouchers because then I can waste even more money buying Apps for my iPhone.

20 signs you don’t want that web design project

Admittedly this next post is not very festive but it brought a smile to my lips and isn’t that what Christmas is all about?

Zeldman goes all ‘ba humbug’ this week when he shares 20 signs that you do not want that web design project. There are some real gems in here. My favourites include:

A previously uninvolved marketing guy starts telling you, your client, and your client’s boss that the minimalist look “doesn’t knock me out.” A discussion of what the site’s 18-year-old users want, backed by research, does not dent the determination of the 52-year-old marketing guy to demand a rethink of the approved design to be more appealing to his aesthetic sensibility.

At meeting to which you have traveled at your own expense, client informs you that he doesn’t have a budget per se, but is open to “trading services.”

Client begins first meeting by making a big show of telling you that you are the expert. You are in charge, he says: he will defer to you in all things, because you understand the web and he does not. (Trust your uncle Jeffrey: this man will micromanage every hair on the project’s head.)

Very funny stuff and sadly, depressingly true. Nice to know even the mighty Zeldman has to deal with this kind of thing!

2008 on the Web: The 20 Key Events

Our final story for this Christmas show comes from Mashable. They share with us the 20 key events that have shaped the web in 2008.

You get a lot of these retrospectives at the end of the year but this is actually a very good list.

According to Mashable some of the key events of 2008 include:

  • The presidential election being fought online
  • The growth of data portability
  • The Apple apps store
  • Citizen Journalism
  • The Facebook redesign
  • The economic downturn
  • Streaming TV
  • Twitter
  • Microsoft and Yahoo!
  • Justin.tv suicide
  • Rick Rolling

The complete list and more detailed analysis can be found on Mashable.

It makes interesting reading if only to reinforce how fast things move online. In one year so much has happened. It makes you wonder what 2009 has in store. No doubt we will have a plethora of predications in January.

Back to top

Geek Gifts this Christmas

On last years Christmas show we shared our ideas for the perfect geek Christmas gift. This year we thought it might be more fun for the Boagworld community to share their ideas.

You guys have submitted and voted on some great suggestions and here is the top 10:

  1. A new Macbook Pro
  2. Adobe CS4 Design Premium
  3. iPhone 3G
  4. Marcus to play his guitar
  5. A Nintendo Wii
  6. A moleskin notebook and Lamy 2000 pen
  7. Apple TV
  8. Nikon D300 DSLR
  9. New iMac
  10. USB slippers

I was a bit gutted to see that ‘A decent joke from Marcus’ didn’t quite make it into the top 10 list. However, I thought it deserved a mention anyway :)

Other entries worth a mention include a netbook, A job and the Website Owners Manual!

Back to top

Boagworld Christmas Appeal

Last year I decided at the last minute to raise some money for a charity on the Christmas show. The Charity we chose to raise money for was called the Bethesda Project. It is a school and children’s home in rural India. The children who attend the school or live in the home come from very deprived backgrounds and the project provides them with a unique opportunity to better their lives.

The Boagworld community last year raised over £1000 to help this project and our money was able to buy an entire new building for the school. It was an incredible achievement and one that you should all be proud of.

However, over the last two years the project has doubled in size and they continue to need our help. With that in mind we are providing you the chance to give again.

I know you guys are constantly bombarded with appeals for money from various faceless charities. Its hard when you feel no connection to the people involved. I am lucky because I grew up with Sarah who helps run the project. I know her and her husband. I know the amazing sacrifice they have made to help these kids.

I therefore thought it might help if I shared a short video interview I did with them last Sunday while at church. Apologises for the poor quality but this was a spur of the moment thing and recorded on my little digital camera.

Occasionally I get emails from people asking who my ‘web design heroes are’. It always strikes me as a bizarre question. The web is an amazing place and I am honoured to be involved in developing something that is the pinnacle of human achievement and knowledge. However, in my opinion it does not generate heroes.

My heroes are people like Sarah and Simon. These people are intelligent and talented. They could have earned a fortune in the commercial sector. Instead they have devoted their lives to serving others. That is to be admired and respected. In my opinion that should be supported.

That said, I know times are tough and people haven’t got a lot of spare cash. SO, I have decided to bribe you. If you give something to the Boagworld appeal no matter how big or small we will give you the chance to win a GetSignOff T-Shirt. As an added bonus I will get Marcus to sign it (he used to be a popstar don’t you know!) and I may even sign it myself.

So can I ask everybody to give something even if its just a few dollars. The majority of last years £1000 was made up to tiny individual gifts. Simply go to http://justgiving.com/boagworld/

Back to top

Question time

The remainder of the show was dedicated to answering questions either sent in by listeners or asked directly in the chat room. Questions included:

Paul asks – What would be you’re ultimate (non-electrical/non-computer related) Christmas present and why?

Doug asks – what’s been your favorite site redesign, either that you have done or you’ve seen done on the internet in the last year or so?

Paul asks – For someone interested in getting into the Web Design industry, what would be the 1 piece of advice you give them?

Matthew asks – What would you be doing, career wise, if the web did not exist?

Jamie asks – How much do you think technical competency counts for or against a good sales team.

Matthew asks – What is your innate age? Have you alway been a 42 year old in spirit? Or a 12 year old?

Paul asks – What Christmas present did you really want that you never got as a kid?

Back to top

146. Obsessive

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

Play

Download this show.

Launch our podcast player

Housekeeping

Two pieces of housekeeping before we begin:

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

News and events

24 Ways is back

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

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

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

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

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

iPhone designers kit

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

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

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

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

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

5 Ways to Get Usability Testing on the Cheap

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

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

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

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

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

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

Site search options

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

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

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

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

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

Back to top

Interview: Nicholas Felton on ‘Designing Data’

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

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

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

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

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

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

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

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

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

Nicholas: That’s fantastic.

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

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

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

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

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

Nicholas: Yes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nicholas: Absolutely.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Well I found the whole thing incredibly inspiring.

Nicholas: Thank you so much.

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

Nicholas: Thank you Paul. Thank you.

Paul: Good to talk to you.

Nicholas: OK, take care. Bye bye.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

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

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

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

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

Back to top

144. Scale

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

Play

Download this show.

Launch our podcast player

News and events

How much should you charge?

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

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

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

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

A plethora of accessibility posts

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

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

A business case for deleting content

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

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

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

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

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

12 principles for keeping your code clean

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

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

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

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

Back to top

Interview: Joe Stump on Building a Scalable Site

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

Joe: Oh, good to be here.

Paul: Have we had you on the show before?

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

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

Joe: Sure

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

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

Paul: OK

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

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

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

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

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

Paul: Wow.

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

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

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

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

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

Paul: Ah, OK

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

Paul: Wow

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

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

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

Paul: Laughs

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

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

Joe: Aha

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

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

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

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

Paul: Wow

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

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

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

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

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

Paul: Laughs

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

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

Joe: Sounds like a plan.

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

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

Paul: Yeah?

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

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

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

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

Joe: It’s not in San Francisco.

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

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

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

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

Paul: Wow.

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

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

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

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

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

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

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

Paul: Oh, yes yes.

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

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

Joe: Laughs.

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

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

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

Joe: Thanks Paul, bye.

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

Back to top

Listeners feedback:

Top web designer applications

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

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

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

Sending out bulk emails

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

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

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

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

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

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

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

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

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

Back to top

143. Partnership

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

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Obama top technology promises

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

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

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

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

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

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

Could Microsoft consider adopting Webkit?

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

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

Ballmer’s response was surprising to say the least:

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

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

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

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

WCAG 2.0 resources

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

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

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

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

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

Prototyping with XHTML

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

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

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

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

Back to top

Feature: A Partnership of Cooperation

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

Back to top

Listeners feedback:

Marketing a web application

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

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

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

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

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

Font management

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

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

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

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

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

Back to top

141. Feedback

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

Download this show.

Launch our podcast player

News and events

Working from home

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

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

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

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

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

Everything you know about CSS is wrong

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

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

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

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

Reduce your business costs with free stuff

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

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

Ideas include:

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

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

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

HTML Email: What mail clients are people using?

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

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

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

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

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

Alex goes on to summarise the key findings which include:

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

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

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

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

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

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

Paul Boag: Yeah that counts. I guess..

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

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

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

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

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

Paul Boag: Obviously not.

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

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

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

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

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

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

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

Paul Boag: All hell broke loose.

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul Boag: It’s that graceful degradation.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

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

Back to top

Don't get blacklisted by Google

There are so many SEO companies and so much advice about how to get ranked highly on Google. How can you tell the good from the bad?

Jason from Toronto recently wrote to me with a questions about search engine optimisation:

I am desperate to improve the search engine ranking of my company website but I am confused by the contradictory advice online. We have even considered hiring an SEO company, but aren’t sure who is reputable. The last thing we want is to be blacklisted. Do you have any advice which might help?

It is true that Google comes down hard on sites who disregard their webmaster guidelines. Probably the highest profile example of this was when they effectively removed car manufacturer BMW from their search results for using doorway pages.

With many search engine optimisation companies still using these ‘black hat’ techniques, it is important to be able to tell the good from the bad.

Later we will look at some of the SEO techniques that can get you blacklisted but first lets examine ways to identify a less than reputable SEO company.

Spotting the black hat operators

Always be sceptical of any company that contacts you out of the blue. If you are going to hire an SEO company, ideally you should use a personal recommendation.

Definitely beware of companies who guarantee a particular ranking. If a company promises that you will be ranked number one on Google, ask for more information. It is relatively easy to get a website ranked number one on Google for an obscure term. However it is much harder to get ranked for something that is useful from a marketing perspective.

Also ask what happens if a company fails to live up to its guarantee? Is there any real value in their promise? The answer is probably not.

Finally ask the SEO company to clearly explain the techniques they are intending to use. If they are evasive with their answers they should be avoided.

If you do discover the techniques they are intending to implement, this will enable you to judge whether you are in danger of being blacklisted.

Know their techniques

Most search engines provided guidelines about unacceptable SEO techniques. Google in particular provide excellent documentation for website owners looking to improve their rankings. They provide advice on selecting an SEO provider and layout what it considers unacceptable techniques. These include:

  • Hidden text and links – Some SEO companies use hidden keywords and links that provide no value to the user, but are designed to increase search engine rankings. Techniques include adding text that is the same colour as the background, hiding content with CSS, setting the font size to zero or hiding text behind images.
  • Search engine only content – Using techniques such as redirects and cloaking it is possible to show different content to a search engine than to a real user. This approach is often adopted on sites built using Adobe Flash. However, this breaks Google’s terms of service and could led to you being removed.
  • Sending automated submissions to Google – Many website owners and SEO companies use software packages such as Web Position Gold to automatically submit their websites to multiple search engines. Again, this breaks Google’s terms of service and could led to you being removed.
  • Duplicating content – Although Google recognises that some content is duplicated for legitimate reasons (e.g. a separate print version of your site), it frowns on websites that deliberately duplicated in an attempt to manipulate search engine rankings.
  • Doorway pages – These are pages that are created with the sole purpose of ranking well for certain keywords. They often have poor content and exist solely to funnel users into the main site.
  • Keyword stuffing – This refers to the practice of loading a webpage with keywords in an attempt to manipulate a site’s ranking. This can results in a negative user experience, and could harm your site’s ranking.
  • Participating in link schemes – Although your site ranking is partially based on who links to you, link exchange programs are still a bad idea. Exchanging links indiscriminately without considering their relevancy will damage rather than help your ranking.

Will implementing the above techniques get you removed entirely from Google? Probably not. However, they could damage your ranking over the long term and will almost certainly be a waste of money implementing.

Should you therefore avoid hiring SEO companies? Not necessarily. There are many reputable companies offering superb advice on how to improve your rankings. It just depends who you go with.

129. Conferences

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

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

Download this show.

Launch our podcast player

News and events

Release of Firefox 3.1 Alpha

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

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

The alpha is available from the Mozilla Developer Center.

A List Aparts’ 2008 Survey

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

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

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

The Future of Web Font Embedding

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

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

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

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

Back to top

Feature: A Year on the Conference Circuit

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

Back to top

Listeners feedback:

Font Smoothing

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

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

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

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

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

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

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

Browser Emulators

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

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

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

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

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

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

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

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

Back to top