181. Interview or death

On this week’s show: how to avoid design by committee, why you shouldn’t bother submitting to Digg and how to specialise in being a generalist.

Play

Download this show.

Launch our podcast player

Housekeeping: .net awards

Boagworld has once again been nominated for the ‘Best Podcast of the Year’ in the .net Awards. In case you did not know the .net Awards celebrate the best in web design and development, and are brought to you by the world’s best-selling magazine for web builders – .net.

The winner of the .net awards is chosen by a panel of judges and a public vote. I would therefore very much appreciate it if you would take the time for vote for our podcast.

Back to top

News

The 7 deadly sins of blogging

I few weeks back I wrote a post entitled “10 Harsh Truths About Corporate Blogging“. The idea was to highlight bad practice in the way many organisations approach blogging. This week sees the release of a similar article entitled “The 7 Deadly Sins of Blogging“. Interestingly even though both articles tackle very similar subjects in a similar way, both of posts raise very different issues.

According to the article on Copy Blogger the 7 deadly sins of blogging are:

  • Selfishness – Focusing on what you want from your readers rather than what you can give them.
  • Sloth – Not being willing to put in the work that is required to run a successful blog.
  • Impatience – Expecting to see instant returns on the time invested in blogging.
  • Lameness – Producing poor quality uninteresting content.
  • Identicality – Copying the blogging styles of others rather than finding your own voice.
  • Irrelevance – Writing about something nobody is interested in.
  • Boorishness – Being that guy who just won’t shut up about his pet subject.
Its a good list and one that really makes you think about the way you approach blogging. However, ultimately I think it all comes down to the authors first point, selfishness. As she puts it – if you want to run a successful blog you need to:
Give. And then tomorrow, you give some more. And the next day, you give more.

UX Design – Myths and consistency

There are two user experience posts that I particularly want to mention this week.

The first deals with the lack of consistency users experience online. The post asks “Should There Be a United Set of Styles For Web Interfaces?” The author argues that operating systems encourage a degree of consistency by providing standard interface elements that can be easily utilised by third party developers. Generally speaking most mac apps use the OS interface elements and the same is true for windows.

The author goes on to propose that CSS 3 provides an opportunity to standardise the rendering of form elements across browsers so that whether you are viewing that element in Firefox or Safari it will look the same.

Although I like the concept it falls down on a number of levels…

  • CSS3 is not supported by IE6 at all.
  • Even in other browsers CSS3 support varies, meaning that the elements wouldn’t be consistent anyway.
  • In my mind using different browsers is like using different operating systems. You tend to only use one at a time and so consistency is not a high priority.
That said consistency is important. However, I think getting consistency across a single site is a more pressing aim, and one that many website fail miserably at.
The second post on user experience is far more practical and frankly useful. Entitled “Top 10 UX Myths” it blasts apart many of the common misconceptions about UX design. My personal favourites are:
  • People don’t change – Just because users didn’t scroll in 1994 doesn’t mean they don’t now!
  • Design to avoid clicks – Sometimes it is better to ask a user to click more than overwhelm them with too many options.
  • People know what they like - You cannot blindly give people what they ask for. Often there is a difference between what they think they want and what they actually like.

If you are a website owner I highly recommend you read this. If you are a UX designer than check it out. It will make you smile!

Typography – Stats, facts and sizing

There continues to be a lot of buzz around web typography this week with 3 posts/sites I would like to quickly mention.

Typographic Design Patterns and Best Practices

This is a Smashing Magazine post that researches 13 web typography questions. It addresses issues such as most frequently used fonts, the average size of body copy and how often links are underlined.

Although it is always interesting to see what others are doing, it is important to remember that just because a lot of people are doing something that doesn’t necessarily mean it is a good idea.

CSS Font-Sizing: a Definitive Guide

This Sitepoint post tries to bring clarity to the confusing world of CSS font sizing. As anybody who has worked with CSS knows, setting font sizes is not as straightforward as it should be. This post lays out the various options and then recommends an approach.

Obviously there are no absolute answer when it comes to this subject. However, this post does recommend some good practice and helps you understand the problems surrounding font sizing.

Typedia

This newly launched site  is essentially Wikipedia for type. This shared encyclopedia for type attempts to classify, categorise and connect fonts.

The site has a powerful search facility that allows you to search for fonts by foundry, typeface, designer and more. It also helps you better understand typography and has growing little community where you can discuss type (among other things).

If you are a typography geek, this is definitely worth checking out.

Volume does not equal success

Are you desperate to get on the homepage of Digg? Do you crave to be number one on Google? Do you monitor your visitor stats and page views continuously? If so, then I recommend you read Gerry McGovern’s latest post “Volume is the wrong way to measure web success .”

Gerry says you are looking in the wrong place if you want to measure the success of your website. He argues that it is not the number of visitors that matter, but whether you are providing users with what they need. In fact he even argues that an obsession with volume can be damaging to a site:

Measuring success based on volume encourages bad practice. The search engine optimization industry is often a prime culprit of such bad practice. A search expert I met once refused to remove out of date and clearly wrong and misleading pages from the site he was involved with because it would reduce search traffic volume.

For too long we have belonged to the Cult of Volume when it comes to measuring whether a website is successful or not. For an increasing number of websites, high volume traffic reflects the website’s failure to help customers quickly complete the tasks they came to complete.

Perhaps it is time to stop looking at volume as a measure of success and look instead to the completion of calls to action. Did users complete your contact form, signup for your newsletter or buy your product. In other words, did your website meet your business objectives and the needs of your users?

Back to top

Feature: Hold stakeholder interviews now or pay later

Committees are the kiss of death to any web project. Give the kiss of life to your dying project with some one-to-one interviews.

Read ‘Hold stakeholder interviews now or pay later’

Back to top

Listeners feedback:

Specialise in being a generalist

Colin writes: I’m a former web design company owner – I worked initially as a freelancer, the business grew quite quickly, I took on staff, and then gave it all up. The reason was because I couldn’t decide what role to focus on and ended up doing the vast majority of the work.

Web design and development seems to be a seemingly endless list of skills – but how do you decide which direction to go down, and how do you stay up on technology?

What if like me, i’m a jack of all trades, but master of none? What can I do to help me decide where to focus my efforts?

There is certainly a big push towards specialising. This is especially true if you are a freelancer looking to stand out from the crowd. However, I do not agree it is always true. It certainly hasn’t been for me.

I was once in a very similar position to Colin. When we started Headscape I was responsible for all the design and development we did. We began to grow by simply taking on more generalists like myself. However, the point came when we started to employ specialists. As the roles started to fragment I felt the need to make a decision. Just like Colin I asked what role I should adopt.

In the end I made the decision to specialise in being a generalist. With so many of the top level designers and developers specialising I saw an opportunity to maintain a broad overview. We had specialists within the company and so there was little need for me to personally specialise. By remaining a generalist I had the opportunity to improve internal communication, identify new areas worth exploring and have enough knowledge to speak intelligently to our clients on most issues.

My level of knowledge in any particular area varies depending on my personal interest. For example, I know only a little about flash development or server side coding. However, I know enough to get by and identify any potential problems.

I understand the need to specialise if you are a freelancer. However, if you are running a small agency who are employed to provide the complete solution to clients, then I think there is a need for you to be a generalist.

Sites like Digg are not worth your time

Mike asks: Should blogmasters submit their posts to digg and stumbleupon, or should we let our users submit them for us?

I don’t think there is a right or wrong answer to this question. However, personally I leave it to users to submit for me. The reason why? – I don’t think social sites like digg or stumbleupon provide much in the way of valuable traffic to my blog. They are simply not worth my time and attention.

It is actually not that easy to drive a lot of traffic to your blog through these sites. Sure, we have all heard about the Digg effect. However, getting highly ranked is hard. It is the submissions of a few prominent Diggers that dominate the homepage. The chances of your post getting picked up are relatively slim unless you happen to post silly videos or breaking news.

Even if your post is fortunate enough to gain a high profile on these site, the quality of traffic is low. The users visiting your site are interested in only one thing – the particular post. They are not interested in who posted it or the site it is hosted on. The chances of them turning into regular readers is almost zero. The chances of them completing a call to action even lower.

In my opinion it is better to take the time you would have spent submitting your post and invest it in making that post really stand out from the crowd. If your content is outstanding it will naturally attract an audience.

Back to top

ClickTale launches real time monitoring

We are proud to launch the new ClickTale Real-Time Monitor, which enables you to see where visitors are coming from, and watch exactly what they are doing in Real-Time! See precisely which pages they are browsing, as well as all their mouse moves, clicks, scrolling and keystrokes. This is an industry first in web analytics, and we are proud to be able to offer it to you today, for FREE!

via ClickTale Blog » It’s Time For Real-Time.

It may seem like something out of 1984 but you have to say this is a website owners wet dream. Now you can see in real time how effective online marketing efforts are. Post on twitter and watch your followers visit your website and navigate about in real time.

In case you are wondering, I am not watching you reading this. I have more important things to do with my life!

170. Versus

On this week’s show: Paul talks about the conflicts surrounding design decisions, and Teifion challenges a BBC article that asks “Are the days of the web amateur numbered?”

Play

Download this show.

Launch our podcast player

News

Please start from the beginning

Not long ago I read Malcolm Gladwell’s book Outliers, which includes many stories about how well known individuals got their big break. There is something fascinating about people’s backgrounds – the opportunities and experiences that help shape a career. I am often surprised that people’s success has more to do with circumstances than talent.

Our very own Ryan Taylor shares this fascination and so has started a new video series where he asks industry figures about their background. He started the series by interviewing me. Apparently he wanted to practice before interviewing important people :-) He has since moved on to talk to Drew McLellan and has Mel Kirk and Sarah Parmenter waiting to be released.

I think there is a lot of potential in this series. The web is still such a young medium and few trained to be a ‘web designer’. It is therefore fascinating to see how people came to the industry. There is also a lot to be learnt for those starting out in their careers. Be sure to pop along to Ryan’s site and subscribe to his RSS feed. I look forward to future interviews.

Running a card sorting exercise

Establishing your site’s information architecture can be one of the most challenging jobs for a website owner. You face two major obstacles. The first is your organizational bias. You can become so institutionalized by the way your organization works, that it can prove  hard to view things from an outside perspective. What seems logical to you can make no sense to an end user. Second is internal politics. Information architecture can often become an area of contention with different parts of the organization vying for top level billing. This can lead to IA by committee, which never leads to a user centric approach.

Card sorting is one way to overcome these challenges. It is an objective way of organizing the information on your site, around user’s needs rather than company structure. It works by putting users in control of creating that structure by asking them to sort cards containing content in a meaningful way.

At first glance, running a card sorting exercise can appear intimating. However, as a post on Sitepoint demonstrates, it is actually straightforward. “Run Your First Card Sort” is a step by step walk through of everything involved in running a card sorting session. Although the method laid out is not the only approach, it does tackle the key steps including…

  1. Preparation
  2. Recruitment
  3. Running the session
  4. Interpretation and reporting

If you haven’t run a card sorting session before and would like to make your IA more user centric, then I would highly recommend this post.

The complete Google Analytics power guide

I have watched with fascination as Google Analytics slowly decimated the website statistics sector. When Google Analytics was launched it was a relatively simple product, more aimed at smaller websites and blogs. However, over time it has become increasingly more powerful and useful to even the most stats hungry power user. Enterprise products have struggled to compete with a product that offers so much functionality for free.

However, with this increased power came more complexity. What was once a simple product has become increasingly harder to master. Although Jeff Veen did some amazing work at simplifying the interface, it is still hard to harness its full power. The result is that many fail to use it to its full potential while others are too intimidated to try.

This is unfortunate as Google Analytics offers so much information to an experienced user. It paints a picture of how users are truly interacting with your site, while informing your sites structure and content.

Fortunately “The Complete Google Analytics Power User Guide” equips website owners with all they need to know to squeeze the full potential from this incredible powerful tool. This series of posts include detailed information on every aspect of the program from setup to tracking goals and funnels. Best of all the various posts have also be brought together in a single 45 page PDF, making it a lot more accessible for offline reading.

If you ever use Google Analytics or are interested in what it can do for your site, this is definitely worth downloading.

Estimating time for design projects

One of the toughest parts of being a web designer is estimating the price of projects. There are so many variables. So many ways you could approach a project, and so many things that could go wrong. Nobody likes estimating a job and rarely do any of us get it spot on. It is a minefield of pain. On one hand you need to add contingency  for the unseen, but on the other, if you add too much you become uncompetitive.

Effective Strategy To Estimate Time For Your Design Projects is a new Smashing Magazine post that endeavors to address these issues. It begins by looking at what causes a project to be misquoted. Reasons include…

  • Unknown technologies
  • Grey areas in the specification provided
  • Bespoke development in unfamiliar areas
  • The cost of sale being too high
  • Lack of time to quote properly
  • Too high a desire to win the work
  • No previous time tracking to refer back to
  • Estimating time for a project is not fun

It then goes on to address each of these issues with a particular emphasis on granular planning and the need to track time.

I have mixed feelings about this post. It provides an excellent structure for creating quotes and even has a list of common tasks to quote against. However, it feels a little labor intensive at points, going into more detail than most can justify. I guess to some extent it depends on the size of projects you undertake.

That said, it certainly makes you think about your quotation process and encourages you to be more efficient in the way you price projects. This can never be a bad thing.

Before I move on from news – if you live in UK mark the 22nd June down in your calendar. That is the date tickets for dconstruct go on sale, and judging by previous years they will sell out shortly thereafter. Myself and Marcus will be there recording interviews for the show. However, we are also going to arrange a meetup over lunch so hopefully that will be an extra incentive to come.

Back to top

Feature: Clients vs. Designers

Establishing the look and feel of a site can be a point of contention. Web designers can become frustrated because their expertise is not respected. Client are annoyed because their designer does not listen to them. How then do we ensure the design process runs smoothly?

Read The Battlefield of Design – Clients vs. Designers

Back to top

Listeners feedback: Amateur vs Professional

Teifion Jordan sent us a very insightful review of a BBC article that I wanted to share with you…

The article is titled “Is the web’s amateur hour over?“, a provocative title for those that blog, contribute to open source, have a flickr account with photos licensed under CC and so on and so forth. The article opens describing somebody that revels in the name “Antichrist of silicon valley”, anybody that revels in a name such as that is either crazy or doing it for the attention and page views it brings them. It sums up the rest of the description pretty accurately.

The article then explains how he dislikes things such as Wikipedia because they’re maintained by people working for free, how seasoned professionals are being put out of work by amateurs on youtube. At this point the article moves onto showing that all the big tech bloggers, these so called “amateurs”, are actually seasoned journalists.

The crux of the article is of course Amateur vs Professional, does the fact that anybody can start a blog mean that anybody is a journalist? Does having a flickr account make you a photographer? Yes and no, technically yes but in reality most people will never gain enough of an audience to become influential or make money from it. Professionals are paid and generally for a good reason, a professional blogger probably has experience and good writing ability, an amateur probably won’t.

But we’ve still not come to the actual issue, I’ll say it again. Amateur vs Professional, yes that’s it, it’s the 2nd word in, verses. The sensationalist man described at the start of the article seems to feel that there is a competition on between those that work for free and those that work for money. More importantly, he feels that those that work for free are making it harder for those that work for money to find work!

But that’s really not true is it? If it were true then wouldn’t we all be using Linux because it’s free? Wouldn’t Open office be the de-facto standard of office software? Why would Apple even bother making the iPhone if Google is just going to make Android? Why does Paul bother to make websites when anybody could just do it for themselves?

There are I think three main reasons. Quality, Trust and Support. Open Office is a nice piece of software but it’s not got the features of MS Office, it’s not as high a quality product. Linux is really really well supported if you know where to look, for most people however they’d much rather get a normal computer which they already know how to use and can phone tech support for. And trust, if you pay Paul huge sums of money to make a website for you then you trust he will do a good job, that he knows what he is doing.

So no, I don’t think it is Amateurs vs Professionals, I think it is Amateurs and Professionals. One does not exclude the other, instead one will spur on the other and generate often healthy competition. Think about how much IE6 stagnated because nobody was competing with it any more. Now that people are competing with them on browsers MS are starting to get their act together somewhat.

Next, the work of an amateur can be used to help a professional. PHP is a free product but countless people make money writing websites in PHP. Throughout this “review” I have maintained the position that on average a paid for product or service will be of a higher quality. This is true, on average it will be better but not always. There’s a reason that if I had a 2nd computer it’d be booting Linux and not Vista, there’s a reason I develop websites in PHP rather than C#. It’s because the free option is better or the paid option not good enough to warrant the cost in my opinion.

Lastly I want to come to why. We’ve all seen them, the blogs that must have about 3 readers one of whom is the Mum of the author, I know they exist because I write one such blog. Why do people post up bad photos to Flickr? Why do I spend a lot of time running an online game from which I make no money? It’s because everybody has a hobby or two and this is the way that they peruse it. There is nothing wrong with this and should in fact be encouraged. What may now be a bad set of photos on a flickr account could in a few months with encouragement and tips a very good set of high quality photos. What may for now be just a programming hobby could in a few years turn into a very very good language.

Paul started up this podcast because he thought it’d be fun and may or may not have been high from using the computer for too long. It’s come a long way since then with thousands of listeners and an entire community built around it. Thus I end with the idea that while something may be amateur now, it can become professional in time and that this is good.

Back to top

Case Study: Wiltshire Farm Foods

One of the biggest challenges of running a successful website is balancing the needs of users with those of the business. This is especially true when an existing business model conflicts with user needs.

Although not always the case, one situation where this conflict can arise is with franchise based businesses. For the last few years I have been working with a franchise business called Wiltshire Farm Foods. Although, their business model has been phenomenally successful it caused significant problems for their online customers.

When business models and user needs conflict

When hired to redevelop the Wiltshire Farm Foods website I saw an opportunity for a quick win. Before a user could enter the website, they were required to provide a postcode. This was a massive barrier to entry as users do not like handing over personal information (such as a postcode) without being given a reason. From looking at the website statistics it was obvious many users were abandoning the site because of this requirement. I couldn’t understand why the company had created such a huge usability hurdle.

The Old WFF homepage

The answer was simple – Wiltshire Farm Foods had chosen to give their franchisees control over pricing. Without knowing where the user was located it was impossible to provide a price.

The decision to give franchisee variable pricing was a good one in the pre e-commerce era. However, as the importance of the web grew, it created a significant problem when competing against large supermarket chains with a national distribution network and standardised prices.

Although this was a problem for online users, the model worked for the business as a whole. Wiltshire Farm Foods had an incredibly successful relationship with its franchisees. Some had been with the company since day one. The business was driven by the entrepreneurial spirit of its franchisees and independent pricing was a key component of that success.

Working within constraints

With the variable pricing constraint remaining unmovable it became a case of managing the impact. Our first step was to move the point at which users were asked for a postcode. Instead of requesting it up front, we only asked for it when users asked for a price. This allowed users to view products and clearly linked the request for a postcode with pricing. We also explained why this step was necessary to reassure users this was not a ploy to send them unsolicited mail. However, ultimately we could not get around the extra step required to see prices.

It would have been counter productive to dig our heels in and refuse to compromise the user experience. Instead we took a pragmatic approach and worked within the business constraints. Ultimately this worked in our favour. When Wiltshire Farm Foods saw the increase in sales that came from moving where users entered their postcode, it encouraged them to consider changes in their business model.

Users now get a web price for each product when they arrive on the site for the first time. This price is then ‘adjusted’ once they login or provide a postcode. The user is notified of the change and because the price normally decreases they are generally happy. It is not ideal but it is a dramatic improvement that has greatly increased sales.

Turning a negative into a positive

Although the introduction of web prices is significant, it has not been the biggest change in the site. The real change has happened in my own thinking. In the beginning I saw the franchise model as a hurdle to overcome. However, I have since come to realise the benefit it has to the overall user experience, especially for the site’s target audience.

The Wiltshire Farm Foods audience is elderly with the average purchaser being in their eighties. Not only does this audience have certain accessibility requirements, they also have a number of concerns that need addressing.

One of their biggest concerns is security, both when purchasing online but also when meals are delivered. They are nervous about letting strangers in their house and yet need help unpacking and storing their meals.

The Wiltshire Farm Foods franchise system accommodates this perfectly. Customers always get the same driver and feel they are dealing with a local supplier rather than a national brand. They can even pay with cash on delivery and place new orders directly with the driver.

The problem was that the website did not reflect this local caring service. I was so preoccupied with the negatives of the franchise system, that I failed to identify it as a major selling point.

Franchises can offer personal service

Fortunately as I grew to understand the business model, I was able to grasp what Wiltshire Farm Foods had known since the beginning – that service was what set them apart. Wiltshire Farm Foods did not need to be overly concerned about universal pricing because they offered things no national supermarket could. They offered a friendly, caring service from police checked uniformed drivers. These drivers would even unpack meals and take next orders. However, most importantly they were a local supplier who customers came to know personally.

Once I understood this important selling point it fundamentally altered my approach to the site. The homepage shifted away from merely showing products to promoting the service that was supplied alongside the meals.

WFF homepage

The homepage now focuses on promoting these ‘value added’ services through the use of animation. However, more importantly we made a feature of postcode entry. Entering your postcode no longer just revealed your region specific pricing, it introduced you to your local franchisee. Gone was the faceless national brand and instead you were given the names and phone number of your local supplier. Soon you will even see a photograph of your local franchisee and details about their delivery schedules.

Screenshot of the local outlet information

All of this helps to reassure the user and personalise the experience. Computers are seen by many (especially the elderly) as impersonal and cold. Techniques like this humanise the experience and connect with users.

Lessons learnt

There is a lot that can be learned from the development of the Wiltshire Farm Foods website. We can learn about the importance of understanding your target audience and their motivations. We can learn how a perceived limitation in a business model can be turned into a strength. However, what excites me most is the opportunities provided by the Franchise model to engage with users in a more personal way that is lacking in many websites. With the growth of online social interaction there is the potential for an unprecedented level of customer care.

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 ways to Battle Site Bureaucracy

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

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

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

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

1. Educate and inform

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

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

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

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

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

2. Hold stakeholder interviews

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

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

These one-to-one meetings provide two opportunities…

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

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

3. Avoid group committee meetings

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

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

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

4. Target your influencers

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

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

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

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

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

5. Use third party experts

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

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

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

6. Rely on evidence, not opinion

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

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

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

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

7. Focus on the user

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

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

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

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

What do you think?

Instead ask them…

How do you think users will respond to this?

This will keep them focused on the needs of users.

8. Control the feedback

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

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

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

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

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

9. Ask why

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

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

The question why is powerful for three reasons…

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

    10. Avoid confrontation

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

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

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

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

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

    Conclusions

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

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

    Tips for a transformed twitter

    With everybody from Britney to Obama now on Twitter it is safe to say the social networking platform has gone mainstream. But what does this mean for the service and how can we as website owners use it?

    Paul Carter from New York writes:

    Paul, I notice that you have been lamenting a lot on twitter about it becoming a marketing tool. Is that really wrong? Shouldn’t we be embracing and using it?

    I sent my first twitter in November of 2006, only 7 months after the services launch. For me it was a way to keep in touch with new friends I had made at the Refresh 06 conference. It was less intrusive than instant messaging and less formal than email. I quickly became hooked.

    For the longest time it was the tool of geeks. My friends laughed at me as I sent tweets from the pub, my family stared blankly as I explained the service. However, that has all changed now.

    Like Facebook before it Twitter is everywhere at the moment. It was even recently discussed by Stephen Fry and Jonathan Ross on the BBC in front of 4 million viewers. It has become mainstream and increasingly it is being used as a marketing tool. There is no going back.

    However, Paul is right. I am wrong to lament what Twitter once was and should embrace it as a tool I can use. Nevertheless like everybody, I need to be careful how I use it. I do not believe Twitter users will allow the tool to be reduced to a broadcast mechanism for pimping the latest blog post or special offer.

    So how am I choosing to use Twitter?

    I guess the first thing to say is that I am not a Twitter success story. Sure I have nearly 4000 people following me but that pale into insignificance when compared to others. That said, Twitter is turning into a third string of my online presence, alongside this blog and podcast.

    With that in mind let me share with you a few tips that have helped me better utilise this interesting new tool.

    1. Above all, keep it personal

    Although twitterers like CNN breaking news have been very successful, generally I feel corporate twitter accounts are a mistake.

    In my opinion twitter is about person to person communication and not a broadcast tool for faceless corporations. To use it in that way is to miss the potential of twitter.

    Does that mean you cannot have a twitter account for your organisation? Not at all. For example if Vitaly Friedman created a twitter account you might not recognise the name. However, if he used the name SmashingMag you are more likely to follow because you know the Smashing Magazine website.

    It is not the name that matters so much as the tone of posts. In my opinion your tweets should be more than an endless string of press releases and links. It should include personal content and a dialogue with followers.

    This is important because it enables you to make a connection with your users. An open and honest relationship with users is very powerful. It builds trust, loyalty and engagement. It encourages repeat traffic and word of mouth recommendation.

    CNN Breaking News Twitter Page

    2. Learn from others

    I have learnt a lot about Twittering just by reading the tweets of those I admire. Merlin Mann for example injects a lot of humour into his posts and his followers really respond to that. Darren Rowse on the other hand strikes a good place between recommending content others have written with promoting his own posts.

    As well as examining the style of others you can also examine statistics. Use a tool like TweetStats.com to examine how often others tweet and how often they reply to their followers. All of this helps to build up a picture of what makes a successful twitterer.

    There are also a growing number of great sites which give advice on how to get the most out of twitter. One of my personal favourites is TwiTip that covers subjects such as “The Merit of Twitter Competitions” and “How To Get Unfollowed On Twitter“.

    TweetStats

    3. Get a good desktop client

    Without a shadow of doubt the most powerful twitter client currently available is TweetDeck. This air application not only runs on Windows, Mac and Lynx but also provides a range of superb tools for managing your life on Twitter.

    With TweetDeck you can create groups, filter tweets, monitor certain subjects as well as tweet, reply and retweet posts.

    In fact it is so powerful that it can be somewhat intimidating at first. Don’t let that put you off. Check out this short tutorial into TweetDeck’s core features and you will be up and running in no time.

    TweetDeck

    4. Use twitter on the road

    If your twitter account is going to be personal as well as professional then you will almost certainly want to use it on the road. One option is to simply use Twitters mobile website. However if you are fortunate enough to have an iPhone then there is a wealth of Twitter clients available to you.

    I think I have paid for and tried almost every twitter client on the Iphone, but the winner hands down is Tweetie.

    I love Tweetie. It has a clean, easy to use interface, and yet is packed with powerful features including the ability to:

    • Handle multiple twitter accounts.
    • Navigate reply chains.
    • View twitter trends and perform custom searches.
    • Access complete user profiles.

    In many ways it is even better than TweetDeck because it has much of TweetDeck’s power, but in a much cleaner interface. If only they did a desktop application!

    Tweetie Screenshots

    5. Tracking the results

    Although I have already mentioned TweetStats, that is just the tip of the statistical iceberg.

    There are an ever growing number of tools you can use to track your activity on twitter. However, the ones that really interest me are those that track click throughs. What I really want to know is if I mention a link in twitter, how many people click through.

    If the link is one on my own sites I could use Google Analytics using their URL tagging tool. However, this is somewhat fiddly and only applies if I am linking to my own site. What is more these URLs can get long, which is a problem when limited to 140 characters.

    Fortunately there is a tool called TwitterBurner which solves these problems. It shortens the URL and tracks all click throughs even to sites you do not run yourself. Best of all it is now supported from directly within TweetDeck (although not Tweetie unfortunately).

    Tweetburner Homepage

    6. Follow as well as be followed

    Always remember that Twitter is a two way conversation. A big part of successful twittering is about replying to those who tweet you.

    Twitter is also not just about who follows you. It is also about who you follow. One service that I find particularly useful is Mr Tweet.

    Mr Tweet will provides two type of information.

    • First it suggests people you might want to consider following because they fall within your broad network (people who are followed by your friends).
    • Second it suggests those from your list of followers who you should follow back.

    For each of these people it provides various stats including:

    • The number of followers they have
    • The chance of them replying to you
    • How often they update

    This is a great way of extending your network of contacts and potentially increasing the chance of your tweets being retweeted. Its also a great way of meeting new people!

    MrTweet homepage

    7. Integrate whenever possible

    If you are intending to use Twitter for anything other than personal use it needs to be incorporated into the rest of your web strategy. That means it needs to linkup with your other online activity including your website and other social networks.

    There are no shortage of tools that help you do this from the basic twitter widget to a tool for sending your tweets to facebook.

    One tool that particularly caught my attention is called TwitterFeed. It posts content from an RSS feed to Twitter which is a useful way of updating your followers about new posts.

    However, use any tool that automatically posts to Twitter with caution. It can easily become annoying if used too much. Also it lacks the friendliness of a personal post.

    twitterfeed homepage

    8. Don’t over think it

    Of course the problem with all these tools, statistics and analysis is that it can suck the spontaneity and personality from your tweets.

    Although some of those late night drunken tweets are best gone, you want to avoid your tweets becoming too sterile.

    Let me explain what I mean. I am naturally a fairly good public speaker. However, once I was sent to a public speaking workshop. They taught me all the techniques you should use to be exceptional. However, instead of it improving my skills it made me so amazingly self conscious that I was paralysed. I was over analysing what I was doing.

    The danger is we do the same with Twitter. Sure, Twitter can be used as a marketing tool but that doesn’t mean it cannot be fun too. Don’t let articles like this suck the joy out of twittering!

    Twitter message from Boagworld: mmm... caburys cream egg and redbull. Nice post lunch snack

    Effective browser support

    Browser support should focus on usability and accessibility rather than pixel perfect design. Sites should render in all browsers, but provide advanced features and aesthetics to those which can support it.

    Most web design contracts address browser support. Many agencies still treat support as a black or white decision – a browser is either supported or it is not. If the browser is not supported the site is often unusable. However, this approach fails to acknowledge the diverse and evolving nature of the web. We should be supporting all browsers.

    What does ‘support’ mean?

    Although we support all browsers, that does not mean every user will have the same experience. For example, it is unrealistic to expect a user accessing the web through a text only browser to have the same experience as somebody using the latest version of Firefox.

    As Yahoo states in their own browser support documentation:

    Requiring the same experience for all users creates a barrier to participation. Availability and accessibility of content should be our key priority.

    Supporting a browser should provide the best experience possible within the constraints of that browser, and should exclude none.

    Expecting pixel perfect accuracy across browsers is unrealistic and not cost effective.

    The problem with pixel perfect design

    With browser technology improving all of the time it is unsurprising that modern websites do not always render the same in older browsers such as Internet Explorer 6 (released 2001) as they do in more contemporary counterparts. In fact even modern browsers differ in the way they display HTML.

    Many web designers go to extreme lengths to ensure consistency across their ‘supported browsers’. However although this is achievable if the number of supported browsers is limited, it comes at a cost. This includes:

    • Significant overhead in the time required to overcome limitations in older browsers.
    • Increased likelihood that unsupported browsers cannot access the site. This is because of hacks and excessive code employed to ensure consistency.
    • A tendency to design for the lowest common denominator.

    A better approach is to ensure that the site works well and looks reasonable on the lowest common denominator browser, and then ‘enhance it’ for more capable browsers.

    For example, modern browsers support design enhancements such as:

    • rounded corners
    • drop shadows
    • Improved typography

    and various other styling not supported by older browsers without additional code and effort. However as Andy Clarke explains – because these design elements are not intrinsic to the usability or functionality of the site they can be safely dropped.

    If this approach is adopted, it is less likely browsers will render sites incorrectly and so the level of testing can be reduced.

    Testing

    When a black and white approach to browser support is employed, testing can become expensive and time consuming. While website owners want to support as many browsers as possible, web designers want to limit the number supported to make testing manageable.

    However, if a modern approach is adopted the burden of testing is reduced. This is because instead of testing focusing on pixel perfect precision across all browsers, the focus is on usability and accessibility.

    Obviously, when claiming support for all browsers it becomes impossible to test in every browser combination. Instead it is necessary to prioritize browsers based on website statistics and ensure accessibility by testing in these.

    The number of browsers and versions that a site is tested on will vary depending on the budget available for testing. However, even testing on a handful of browsers will normally cover the majority of users experiences (as a relatively low number of browsers dominate the market). In addition, those browsers that are not tested should reliably render the page because no unnecessary code or hacks are used to build the site.

    Conclusion

    In conclusion, building websites that are enhanced for more capable browsers – improves accessibility, reduce costs and ensure every user gets the best experience possible within the limitation of their choice of browser.

    142. Community

    In this week’s show Ryan and Stanton cover the news in Paul’s absence, we’re joined by Mark Boulton to discuss design by community and Marcus reminds us to keep positive.

    Download this show.

    Launch our podcast player

    News and events

    Typeface.js

    There are many solutions to insert custom fonts into your designs, whether it’s the good old CSS image replacement techniques, SiFR or FLiR, we’re really just biding our time until font-embedding through the @font-face rule becomes widely supported in the browsers (we’ve covered font-embedding before in show 129) But for now, there’s another technique on the block called typeface.js which uses browsers’ vector drawing capabilities to draw text in HTML documents.

    Browsers have, for a while, supported vector drawing – Firefox, Safari and Opera support the canvas element was well as SVG, and IE supports VML. The Typeface.js project uses this vector capability to ‘draw’ the fonts within your webpage.

    There are a couple of caveats, while the ‘drawn’ text is selectable, it’s not highlighted (though this should be remedied in future versions) and the fonts have to be converted first through a tool available on their website. But this might be a nice little fallback if the users browser doesn’t support @font-face.

    Sell Your Web App

    In our next news item Ryan Carson, owner of Carsonified, has this week published a blog entitled “Sell Your Web App: Lessons I Learned From Selling Dropsend” and as you would expect from that title he shares his tips and mistakes when selling his app and it’s a very interesting read.

    He talks about considerations like choosing the right merchant account, anticipating high lawyer and accountancy fees and off course being discreet, don’t blog about your sale!

    He’s also prompted for people to leave their own tips in the comments so if you’ve sold a web app yourself head over to thinkvitamin.com and share your experiences as well.

    Lessons learned while building an iPhone site.

    Theres a nice article on the Flickr Blog which details some of the lessons they learned while building the popular iPhone version of the Flickr site. They go into detail of subjects such as “don’t use a javaScript library or CSS framework”, “Load page fragments instead of full pages”, “optimize everything” and making sure to tell the user what’s happening through visual indicators.

    If you’re developing iPhone apps, or are even just thinking about it I’d recommend giving this article a read before you start work, it may save you a lot of time down the line.

    Free Site Validator

    Our final news item brings our attention to a service blogged about by Roger Johansson at 456bereastreet.com. Roger was looking for a way to validate his site without having to do every page individually and what he found was freesitevalidator.com.

    The service automatically craws each page of your site and checks it for validation, as well as giving you a report of any broken/dead links. Also known as Link Rot!

    The service looks really useful so be sure to check it out.

    Back to top

    Interview: Mark Boulton on Design by Community

    Paul: So as I said at the start of the show, joining me today is Mark Boulton. Good to have you on the show Mark.

    Mark: Good to be here.

    Paul: It’s nice to finally talk to you, we met up for the first time just a few days ago now.

    Mark: Yeah, it was it was about a week ago.

    Paul: It was great to do so. I talked about you a few weeks ago on the show as well when we were talking about a recent blog post that you wrote. But we will come on to that in just a minute. What we are going to talk about today with Mark is that he has done the unthinkable from a design point of view. Haven’t you really?

    Mark: I have really yes.

    Paul: You’re totally insane and so I wanted to pick you brain about why you have chosen to do the unthinkable. Before we get onto that, all of this resolves around some work your doing for Drupal. Tell us a little bit A) about what Drupal is and B) what you are doing.

    Mark: Drupal is a Content Management Framework I guess, that allows people to build websites and its an open source project, it’s been going for quite a while now. I think seven years or so. The software is on version six now and it has a very large user base. Probably three hundred or so registered users.

    Paul: Three hundred users?

    Mark: Three hundred thousand!

    Paul: Ah ok.

    Mark: So it’s a pretty enormous project really, and with it being Open Source these are all very passionate developers. It’s quite a developer centric platform.

    Paul: Ok.

    Mark: The community, with it being open source the community contribute quite a lot to it, with modules and themes and that kind of thing, plugins. Our involvement in the project is redesigning drupal.org, which is kind of the home on the web of the framework, so you can go there and download and read documentation. But it’s also the home of the community, which is a pretty huge one. So it’s very exciting.

    Paul: So tell us a little bit about the design process that you’re using, and this is what you blogged on and what kind of caught my attention and struck me as a ridiculous idea and what on earth were you thinking about?

    Mark: Yeah, well I’ve been working with Lisa Raquelt who is a user experience researcher and kind of strategist. She started very early on in the process. She started blogging about it with the Drupal Association, who represent the Drupal community, who engaged us on the project. They are very happy with this being an open source project. They’re very happy with us to talk about it. Which is completely opposite to the way you normally work with a client.

    Paul: Yeah, totally.

    Mark: Normally you sign NDAs and it’s very closed doors. You don’t want to tell the competition, its the complete opposite, which is terrifying. Lisa started blogging about it and got really really great feedback from the community, really valuable feedback. Then I then started blogging about some of the design work we were doing. We are redesigning the wordmark and the branding currently. And I thought I may as well just jump in feet first here and see how this goes, which is totally contrary to the way I’ve been working in the past and the way your mind tells you you should work. You just shouldn’t openly talk about design because you’d think that it’s very subjective and everyone is going to have their own opinions, which is true. But we blogged about it a couple of weeks ago and it’s where my blog post on my own site, markboulton.co.uk, came about was I had a lot of people including yourself Paul. Who were saying I was insane, why are you doing this? And it’s this notion of design by community that’s very different to design by committee. Which is what a lot of people was telling me, "You can’t design by committee, it never works." Which is true, it never does.

    Paul: So why do you think we are so hesitant as designers to talk openly? Is it fear of the subjective, is it that we don’t like people looking at our designs before they are finished? Why are we so hesitant do you think?

    Mark: It’s a really interesting question that. I had an interesting conversation with an architect a couple of weeks ago about the exact same thing. A lot of architects don’t open up. A lot of designers, maybe product designers. An insight into the way somebody works and as designers we all work very differently and sometimes it’s a very private process. To expose that it’s almost like going out shopping with no clothes on. Suddenly you’re exposing the way that you work to everybody, to judge you, and people will judge you. It is a terrifying thought. I think part of it is also schooling. If you’ve done art at school, which most designers have done, most visual designers. You slave away on a piece of art and it’s not finished yet and it’s not finished and you don’t want anyone to look at it until it is finished, so I think there is an element of that as well. When I released two versions of the Drupal wordmark, for feedback they were very much just sketches. They were right in their first iteration. I would normally never do that but I thought let’s see what the community thinks.

    Paul: So what happened when you released those two sketches?

    Mark: It was carnage. Initially it was quite painful sometimes to listen to some of the comments to be honest. I think anybody takes their own work personally. If someone then attacks some of your own work with necessarily seeing any of the context and that kind of thing, then it can smart a little bit. But I’ve written my own blog for a while now and I’ve got reasonably thick skin, so it wasn’t that bad. What did come out through all of the comments were trends. Trends started to emerge. So from people’s subjective opinion, if enough people were having the same kind of subjective opinion, then that becomes less of an opinion and more of trend. And it was really those trends were looking to identify, that we could feed back into the development of the design.

    Paul: It’s interesting there you talked about the fact the people who were seeing this stuff didn’t have the context. Did you not prepare the ground in any way? Did you not tell them why you took the approach you did? Or did you literally just put out the branding there and go, "What do you think?"

    Mark: Yeah, there is a reasonably sticky situation with Drupal, particularly with the wordmark. They have a kind of logo at the moment, which is a kind of drop with a face on it. And that logo at the moment is under GPL so it can’t be trademarked which means the Drupal Association can not protect their own property, as it were, because this logo is under GPL. Which means that anybody can take it, change it, completely mess around with it. Which is fine, the community have been doing that for a long time now. So when I took on and blogged about this redesign of the wordmark, there was not the context, the business context, was perhaps lacking because I felt that I could not provide that business context. Because I was the designer and that should really come from someone else, and that was a little late in coming. Which is why the first blog post really didn’t go down too well, because I assumed the audience knew that this project was happening. As it turned out, it actually wasn’t. They didn’t know and it was all a bit of a mess, but it’s kind of smoothed over now, with later iterations and there’s been more blogging done by the Drupal Association. Which has provided the rationale for redesigning the branding.

    Paul: Right, so there is a lesson to be learned there I guess of the importance of providing context and why stuff is happening and why you are taking the approach you are I guess.

    Mark: Absolutely yeah, I think context is really important, especially for branding and logo design and that kind of thing. Just providing, and I was very aware of this when I blogged it. We all saw what happened with the London 2012 logo, when that is released very early without any context, it’s either misunderstood, or just hated or really liked. I’d rather have that kind of opinion anyway, than somebody kind of going, "Yeah, its alright."

    Paul: You prefer to create a strong reaction.

    Mark: Yeah, either positive or negative, because those are the reactions you can act upon. Anything in the middle is kind of gray, middle ground. That’s actually very very difficult to take on board and move forward with. So any kind of negative or positive reaction, you can take that on board, which we did. But the context for the Drupal logo is going to be the other stuff around it, which is the branding, the tone of voice, what is said on the page, the design, the other design elements around it, how it interacts with the existing kind of drop because they are still keeping that as a mascot. So it’s how all of that works together was perhaps lacking at this early stage. Which is why perhaps, going back to your initial question, designers don’t actually release very early on because the context isn’t there yet.

    Paul: Yeah, which makes a lot of sense. When it came to the feedback, so you were obviously asking for feedback here, were you setting any kind of constraints on that feedback? From time to time I’ve talked on the subject about how to get design signoff and that kind of thing and one of the things that I always say is, "Don’t just say, ‘What do you think?’" but actually kind of try and guide the type of feedback you want and give a context to it, is that something you did?

    Mark: Yeah. Not initially, which was why we had to.. The initial blog post didn’t really go down so well from an actionable sort of feedback point of view. Because I felt that a lot of the design questions I wanted answered. I think it was too early and I hold my hands up for that. I think it was too early in the process for me to blog about that. The second post that I put up I asked for specifics on whether or not the word mark needed a capital D or a lower case d and whether or not it needed, we were developing the idea of a secondary icon with it which is a splash and whether or not it needed the splash or not. We got some really great feedback because that focused people’s attention. That provided a really great selection of trends which have fed back into the next iteration. The first post was a bit of a free for all to be honest. Nothing really useful came out of it, which was a shame.

    Paul: I mean you kind of, you talked about trends. Do you think that that is kind of, those trends that you see emerging, have the way that you have taken those on board has it been a kind of anecdotal trends or are you talking statistics here? Were you kind of marking down how many people you know said, "Yes, there should be an uppercase D." or whatever or are you just kind of taking on a feeling? Does that make sense?

    Mark: Yeah. It was kind of taking on the feeling. More qualitative than quantitative at this point. However, for the cap D or lowercase d we could have just run a poll which in hindsight we should have done, is just had a tick box for each question as it were. However I’m always a little, I actually quite like a lot of the qualitative feedback because people were saying, "Yes cap D and splash," but then they go on to say something else. If we just reigned it into a simple poll then we would have lost all that really great, valuable feedback, because it’s that that provides context for their answer.

    Paul: Yeah, I mean you won’t necessarily know why they’re saying a capital D.

    Mark: Exactly, and there was enough of people saying the same kind of thing in those comments for it to be a pretty good trend for us to act upon. And it also throws out more heads about them on as it were. There was a lot of valuable comment from the Drupal community especially. And that we would have spent six months trying to research the ins and outs of that community, the history and the culture because there is an awful lot, you know. It’s been going seven years and there’s a lot of people in there. I would have been around ‘til next year trying to fully understand that community if I hadn’t adopted this open way of working.

    Paul: It’s quite interesting, isn’t it? I mean when they were coming back and you were seeing a trend emerging very definitely one way or the other over something, were you always going with that decision or were sometimes you saying "Well actually, although everybody’s saying we should go with a capital D or whatever, I’m not going to because of X, Y and Z."

    Mark: Yes. I think there does have to be somebody who is willing to make a decision on something that needs to be decided upon. If fifty percent of people said, "I like a black website," and fifty percent of people say, "I like a white website," the compromise is that you end up with a gray website and nobody wants gray. So, what we’ve done especially with the cap D and lowercase d for example there was pretty much an overwhelming response to, "Yes it should be lowercase d," because it’s kind of more attractive aesthetically and all the rest of it. However we’ve chosen to go with uppercase D and that is because of business requirements and also because of the ties in with the documentation. We’ve revised the word mark now where the uppercase D is actually a lot better than the previous version. Perhaps when I posted initially the lowercase d and the uppercase D were not really on an equal footing design-wise. The uppercase D needed a lot of refinement and again perhaps that skewed the results, skewed the comments and so we’ve actually reversed the general trend there and said, "Actually no. We think we should go with the uppercase D for this reason and this reason," and that will continue throughout the whole process. We’ve got to remember, and it’s very important, that the Drupal Association hired us for our expertise and if we feel strongly about something then hopefully we’ll go ahead with that and we’ll push back on any feedback.

    Paul: I mean it’s quite interesting. You talk about, "as we go through this process." So it sounds like you’re gonna keep going down this line, that you’re gonna, you know, as you create say, the website interface that you’ll expose that.

    Mark: Yeah we are. If you have a look on groups.google.org and do a search for the redesign group in there we have set in a bunch of dates in the calendar for gathering community feedback. So we will be posting up a link on Thursday to the prototype we’re developing and we’ll be doing that for the next six to eight weeks. Every other week we’ll be posting a link up there to gather feedback throughout the weekend. So we’ll be posting it up on Thursday/Friday morning and then we’ll be kind of locking off comments on Monday and then all of those comments will hopefully try and establish some trends and feedback. That’ll then feed back into the next iteration. So we’ve pretty much set a precedent here and we’re gonna be designing in the open ‘til the final curtain call, as it were.

    Paul: Excellent! So how do you feel this differs from design by committee? Because from chatting to you when we met up whenever it was I got the distinct impression from you, you saw this as a very different kind of experience, but why, what makes it different?

    Mark: Yeah, well I’ve been involved in design by committee quite a few times. I’m sure a lot of designers have and generally in those instances you’re in a boardroom or a meeting and there are several people, maybe twelve tops, and they all have very strong opinions. Generally, as I said in my blog post, there might be an alpha male in there or two sometimes. People can rally around the loudest voice, so all of a sudden that becomes the opinion. It can be a very, very difficult environment to work in because there are so few people, all with a very loud voice. Design by community is a different kettle of fish really because we’re designing for essentially 300,000 clients and the wider web community as well, we’re not just asking the Drupal community for feedback here, we’re also asking the wider web community for feedback. Anybody can get involved in this, it’s not just for the Drupal community. So anybody can. So if you feel like, talking to the listeners here, if anyone feels like weighting in with their comments, please do. Because it’s very important to us that the wider audience is reflected in this redesign and not just designing for the Drupal community. So it’s a very different process I think, because we’re kind of staffing back a little bit. We’re not in a meeting room with twelve people trying to come up with a solution. We’re putting stuff out there. We’re asking for comments from a lot of people who are thankfully providing comments, which is great. Really thoughtful feedback, then we can try and establish trends and then it’s those trends that we act upon. It becomes a little less subjective. That’s the idea anyway.

    Paul: It’s the scale that turns it into trends rather than just an opinionated person I guess.

    Mark: Yeah, that’s right. And you do have to, like I said initially, sometimes it’s difficult to read a bit of a flaming going on on your blog posts, you know, because there are quite a few people out there who will be very passionate about this project. They’re very passionate about Drupal because they’ve got a lot of time and money, a lot of people their livelihood is dependent upon this platform. So we have to really take that into account that this is serious for a lot of people. We’re not just redesigning a website here, we’re actually providing a platform for a community to do their work. So it’s pretty important stuff.

    Paul: So, I mean do you think that this is a kind of a peculiar situation? You know, is the Drupal project unusual or would this be a kind of approach you would encourage for other designers working on other types of projects?

    Mark: It’s a really interesting question. I mean I’ve worked waterfall methodologies in the past so you get your, you do your research, you do your initial designs, they get signed off and then you build your website, it’s very linear. And after working at the BBC for so long I realized that, because we worked very iteratively at the BBC that actually a more iterative approach was actually more valuable so to take that client-side approach, and the agile software development approach, to take that commercially with design is actually very difficult. But with the clients we are currently working with, that’s the way that we work. So we don’t work in a waterfall methodology, we work very iteratively upon fixed time scales. So we have a week per iteration for example. Now the feedback thing, the only difference really between Drupal and any other big project is the fact it’s open source and has a very, very big active community who are used to working in this way. I think that’s the critical thing is that they’re used to people putting software updates out early, feedback and they get changed and honed down until the final version is released but it’s just the way that they’re working so we have to kind of slot into that culture and it’s not a culture that design thrives in actually.

    Paul: No, I can imagine.

    Mark: No it’s a very difficult environment for design because, and it goes back again to one of your initial questions about wanting to sit there and craft a solution until it’s finished. Well that goes counter to the way that this open source culture works. They want to see stuff early. They want to feed back. They want their say. So as long as you kind of understand that and they’re not being grouchy or attacking you in any way they just want the very best for the project. So yeah, it’s worthwhile considering it as a working approach. Certainly the iterative approach is worthwhile considering for any project but the getting feedback early, if your audience is big enough then give it a go and see how it works. You know if you speak to me in six weeks time I may have a completely different conversation. This is really very much a work in progress and we’re just seeing how it’s going. It’s not been done as openly in the public before. I can’t really remember any projects from a design perspective that have been like this. It’s fairly unique. Which is really great, it’s exciting. So we’ll just see. We’ll see what happens.

    Paul: Yeah, very interesting stuff Mark. Thank you very much for coming on the show.

    Mark: Thank you for having me. It’s been a pleasure.

    Paul: And we will wait with baited breath to see future blog posts as to how the experience goes to the bitter end.

    Mark: Please do because I’ll be blogging about it pretty much constantly throughout the life of the project.

    Paul: We’ll keep an eye on that. Thank you very much for your time and we’ll get you back on soon enough.

    Mark: Great! Thanks Paul!

    Paul: Bye bye.

    Mark: Cheers. Bye.

    Thanks goes to Todd Dietrich and Andy Kinsey for transcribing this interview.

    Back to top

    Listeners feedback:

    Keeping Positive

    Got this question from Bill (remember him?!)….

    I have just found out that the potential new project I have put loads of work in to winning is not coming my way. I wrote an extensive proposal, did some unpaid mock-up work, attended a presentation and jumped through every hoop thrown my way.

    I was told by the client that it was ‘very close’ but on this occasion I had not been successful. Gutted.

    How do you guys at Headscape cope with these types of rejections?

    To be honest, and this is from a lot of bitter experience, it’s hard and some are harder to take than others.

    I do, however, have a few thoughts and pointers that may help. Firstly, you can help yourself by weeding out the enquiries that you will never win.

    Are these people worth your time?

    Check out the email address of the enquirer. If it’s gmail, hotmail, yahoo or similar then chances are your potential client is just looking for free consultancy from you. I.e. they have an idea and have no idea what’s entailed in making that idea happen. And they certainly will not pay you to research it.

    Secondly, and I am only aware of this possibility in the UK, but you can check up on a company through the Companies House website. This tells you all sorts of useful information about how long they’ve been around, their liquidity etc. You may change your mind about responding to a tender sent from a dissolved company.

    Talk money

    There is nothing more frustrating than being told that you are ‘way out of the ballpark’ after putting hours, even days, of effort into a proposal.

    Ask people, up front, what their budget is. Explain that you need to know it to respond with the most appropriate solution for them. An example I often use is usability testing. Everyone knows that testing, preferably many times throughout a project can only be a good thing. But that said, not doing any testing doesn’t automatically mean that your client will get an unusable turkey for a site.

    If you don’t get anywhere by asking then create a 2 or 3 paragraph solution with associated tasks (a mini proposal I guess) and email that to the potential client with an associated ballpark price. If they still want you to deliver a ‘full’ proposal then, chances are, your ballpark is within their range.

    Ask/listen

    Ok, so assuming you think that responding to the proposal is a good use of your time, you now need to read their brief in detail noting questions you have along the way. You will make a number of assumptions about what is the correct solution for this client while you are reading.

    You need to talk to the client to confirm their answers to your questions but you also need to listen to their responses to ensure that your assumptions are correct. It’s very easy to arrogantly assume that ‘you know best’ because you’ve been doing it for years.

    This also applies to your written proposal. Don’t describe and price up what you think the client needs – go through every point in their brief and respond to it accordingly. If it is plain obvious that something they’re asking for makes no sense at all, then tackle it head on and explain why they shouldn’t be doing it.

    Stick to your guns

    We decided, quite a while back, and for very good reason, that we would not do any unpaid mock-up design work. In some cases this has been seen as a positive thing (once it has been explained) but with other potential projects I’m sure it has adversely affected our chances of winning the work. However, we should stick to what we believe is right. Chopping and changing presents a negative image to both potential clients and our staff.

    If you do decide to present initial mock-up ideas don’t be tempted into iterating them further. Any client who asks for is again asking for free work and is most definitely to be avoided.

    Be gracious

    Sometimes you just have to accept that you’re not the right fit with certain companies – even if the initial phone call or meeting went really well. It may well be that someone else delivers just the thing that really swings it for the client – sometime you just don’t know what that is.

    If you do lose then you need to accept that you win some, you lose some. It often happens that these things happen in streaks which can be very frustrating. We found ourselves turning away superb opportunities earlier this year simply because we were too busy.

    But always try to bring a positive attitude to any rejection because it is possible that these people will contact you again for further work (though beware that you are simply making up numbers!) or they may recommend you to others. They won’t do either if you react badly to the rejection!

    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

    Using web stats for more

    We all use web stat tools like Google Analytics for tracking marketing campaigns. However, they can also be used to improve your site.

    As I continue my efforts to finish the website owner’s manual, I have reached a section on web stats. What struck me was how little most of us use the power of web stats. They can do so much more than monitor your marketing efforts. In particular they can:

    • Help find and resolve problems on your site
    • Improve the quality of the content you deliver

    Let us look at how.

    Finding and resolving problems

    When it comes to web stats one of the most popular figures to monitor is conversion rate. Conversion rate compares the number of users visiting your site to the number that complete a call to action.

    If your conversion rate is low, this could reflect a problem with your site. This could be due to:

    • Usability – The user is unable to find the call to action due to poor navigation or other usability issues.
    • Accessibility – For example a particular browser does not render the site correctly and so users cannot complete the call to action.
    • Content – The site does not provide adequately convincing content to encourage users to complete the call to action.

    But what consists of a low conversion ratio? That entirely depends on your call to action. For example, an ecommerce site could have a ratio anywhere between half a percent and eight percent depending on the sector and product. On the other hand, a call to action that does not cost the user money should expect a higher figure.

    The best approach is to compare a conversion ratio against itself over time. As you make adjustments to your site does that harm or improve conversion rate?

    Fortunately website statistics can also help establish what changes will improve your conversion rate. Start by looking at where users exit your site.

    Dropout points

    When looking at where users exit your site exclude those who only view one page. If you do not the homepage will be at the top of your list. This is because people click through from a search engine, discover this is not the site they wanted and leave immediately. Although this may indicate a problem with your SEO, it does not reflect badly on the site.

    Once these anomalies are excluded take a look at the remaining pages. Why are users leaving at these points? Is the content relevant and clearly presented? Is the navigation usable? Are you suggesting a next step to the user or are these dead end pages?

    Look at the history of users who dropout at a particular page. How long have they been on the site by this point? What other pages have they viewed? How long did they spend on the exit page before leaving? Does this reveal trends which help to identify the problem?

    Sometimes the problem will be obvious, other times it will not. In such cases try usability testing. This will uncover potential issues. If usability testing is not an option try using a tool like Click Tales.

    Click Tales picks up where traditional analytical packages leave off. It allows you to see what users do on an individual page. It record user sessions anonymously showing you what they click on, hover over and how far down the page they scroll.

    Although a technology like Click Tales is impressive it cannot replace traditional usability testing. It does not provide you the opportunity to question the user. For example it will not explain why users abandon shopping carts?

    When the website owners of ecommerce sites start examining their website statistics they are often horrified by the dropout rate experienced on shopping cart pages. They worry that there is a fundamental usability flaw. However, in many cases that is not true. Questioning users reveal they abandon baskets for a host of reasons ranging from ‘I was saving the items to buy later’ through to ‘I wanted to compare the price on another site’. Like the homepage, shopping carts will always have a high exit rate and no amount of statistical analysis can change that.

    However statistical analysis will allow us to improve the content and products we provide on our sites.

    Identifying popular content

    There is a real benefit in understanding what users want from our sites. From what content they want to what products they will buy, understand users requirements allows you to mould the site to user needs.

    Website statistics can help identify popular content but not in the way you might expect. Looking at the most visited pages will not provide answers.

    Popular pages can be misleading for three reasons:

    • Pages can be visited by mistake
    • Page can be popular because their prominent
    • Pages can be popular because they are gateway pages to deeper content

    The homepage is a good example of these problems. I have already explained that the homepage is visited my mistake from search engines. It is also a prominent page and used as a navigational tool for finding other content.

    Looking at how long users spend on a page can help to weed out ‘false positives’. However ultimately this is a flawed approach and can only give a partial indication of the popular content on your site.

    A better approach is to look at the search terms users entered into search engines to reach your site. Almost all website analytical packages provide this information and it helps define users priorities. However, this is only going to show content that already exists on your site. If a user entered a search term for content you do not have, your site would not have been returned. The user would never come to your site. What you really need is a way of identify content that you do not offer but users want.

    This is possible by examining the phrases users enter into your own sites search engine.

    Approximately half of your visitors will use internal search. Every time they use search they are telling you exactly what they want from your site in their own words. That is incredibly valuable.

    You need access to these search terms and particularly the ones that return zero results. This is the area where you need to do work. Users are expressing an interest in a piece of information you do not have or your search engine does not recognise.

    Once you have access to these search phrases, start tailoring content around them. If the content does not exist, add it where appropriate. If it does exist but is not being found, introduce the exact phrasing your users are searching for. Better to use the language of your users than sticking to internal jargon nobody understands.

    And there you have it. Proof that website stats can be used for a lot more than just tracking marketing campaigns.

    131. Version Control

    In this weeks show Ryan and Stanton return to talk about the importance of version control and answer your questions on project  management and invoicing applications, download sizes and page weight.

    Play

    Download this show.

    Launch our podcast player

    News and events

    Twitter Cuts UK SMS

    This week the team over at Twitter announced that they would no longer be delivering outbound SMS over there UK number. They go on to explain that the bill which up until now they’ve been footing is simply too great and that even with a limit of 250 messages per week they estimate a yearly cost of $1000 per user.

    Thanks to established relationships with SMS services in Canada, India and the United States the outbound SMS service will be continuing uninterrupted in those countries.

    Twitter has suggested a number of alternatives to the service, links to which can be found on their blog. It would also appear that a number of start-ups are rushing to fill the void as TechCrunch have also reported.

    A large portion of Twitters popularity is due to their SMS facilities and it is feared that “freezing” out the UK and other countries from this service will be detrimental to their future.

    It reminds me of when Pandora, the online radio station, closed its doors entirely to its UK audience due to licensing constraints and it begs to question do we poor souls in the UK miss out on all the good toys?

    facelift (FLIR) Image Replacement for Fonts

    Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that aren’t otherwise supported in web browsers. The generated image is automatically placed on your site and works in a similar way to sIFR, the big difference being the lack of Flash.

    This script uses PHP and javaScript and utilises actual .ttf font files to generate its replacement images, so you can simply specify which elements you want to replace, h1, h2 tags etc, download a font you want to use, point the script to it and your done.

    I’m looking forward to having a play with this script as it seems to be simple to use and the fact that you don’t have to mess around with Flash like you do with sIFR is a big bonus in my book.

    Take a look at the number of examples they have on their website and see for yourself.

    Gmail went down!

    So Gmail went down for a few hours this week and as Josh Catone said in his sitepoint article article:

    Judging by the reactions on Twitter and in the blogosphere, you’d have thought that the world ended.

    There’s nothing really more we can say about this that Josh hasn’t already mentioned, but suffice it to say, no web sites/app is going to have 100% up time and this echoes what Stanton and I were talking about the other week in regards to S3 going down. It’s important to always have a backup and not to put all your eggs in one basket because when the service you’re using goes down, and invariably it will, you need a plan B.

    Back to top

    And Now For Something Completely Random

    During the recording of this weeks podcast we were thrown completely when we spotted Paul Annett from Clear:Left dressed up as a Gorilla on Yahoo Live! and then proceeded to start dancing… always aiming to share the hysterics here’s proof. Random indeed.

    Paul Annett Dresses as a Gorilla

    Feature: To Version Control or Not?

    Version control can seem like a very daunting thing to incorporate into your work flow, but once it’s there you can be left wondering how you ever lived without it. In this week’s feature Stanton shares his experiences with you in a bid to convince you why you need it.

    Back to top

    Listeners feedback:

    Project Management and Invoicing Applications

    James writes: I would like some boagworld advice. I’m a web designer and SharePoint specialist at a large company in Cambridge, UK. Over the last 3 to 4 years i have been messing around with web design etc. I now am very busy outside of work and it is getting busier every month.

    I started of with a server under the bed at home with UPS hosting these sites. They ranged from personal sites, to company profile pages to shops. This server has now been replaced with a VPS hosted externally.

    My plan is to keep working full time and manage my time very carefully outside of work and keep these sites coming in and out etc and then one day take the big leap into the self-employed world.

    What could you recommend for me to manage my tasks, projects, time-management and invoicing etc?

    I love the podcast and would be quite happy to chat further with you. Look forward to hearing your experience comments.

    Well there is a multitude of online and desktop applications designed specifically for managing your business.

    Probably the most popular project management app I know of is 37 Signals’ BaseCamp and that’s certainly the first one that springs to mind when I’m asked this question. Depending on what package you have, BaseCamp allows you to create projects, set milestones, to-do lists, manage time spent on tasks among other things, however BaseCamp is tailored more towards collaborative projects for when you’re working with a team of people. It doesn’t provide facilities for invoicing clients and managing your accounts and so it might not be the perfect choice if you working alone.

    Another app I know of and which comes highly recommended is FreeAgent. FreeAgent like BaseCamp allows you to create and manage projects, clients and timescales, however in addition it provides you with the facility to generate invoices, manage your bank accounts as well as your expenses and incomes. It’s designed for sole traders, partnerships and limited companies and is wrapped up in a nice, user friendly interface.

    A final mention goes to a Microsoft app that I came across a couple of years ago now, and has only this year been release in the UK. It’s called Office Accouting Express 2008 and it’s actually free to download and use. As you would expect it integrates with other Office applications and provides you with all the facilities you would expect from an accounting package, invoicing, client management etc. So if you’re working on a PC it’s worth having a look.

    Luckily you can have a play with all these apps before you buy. BaseCamp has a free account which allows you to create 1 project so you can get in and see how it all works, FreeAgent has a series of demos you can use to see if the interface and facilities are to your liking and as I’ve said Office Accounting Express is free. So my advice would be check out them al
    l and see what works for you and no doubt there will be several suggestions in the show comments on other apps that I haven’t mentioned here.

    Download Sizes

    Bob writes: After reading a recent post from Smashing Magazine on textures I started to wonder… what is a good rule of thumb regarding document size per page on the web? Most of the example pages in the article ranked in at close to 900kb per page… am I behind the times?

    Very good question, and one I think we all worry about at points. There’s more than just the filesize to really worry about, there’s the general ‘page weight’ which is affected by many factors, such as:

    • The number of HTTP requests made – if you’re pulling in a lot of external javaScript or CSS files, each one has to be requested seperately. You can combine these into single files to reduce load times, but at the expense of readability, maintainability and organisation
    • The size of any javaScript files you’re pulling in – you can get minified versions of most libraries, for example, which strip out all the extra spaces and line breaks in the code, which aren’t needed in order for the code to execute
    • CSS expressions can be a useful tool, but are bloody slow, especially when used a lot
    • Image filesize can have a massive effect on load times, which is one of your main concerns as you mentioned textures. I’m assuming you’re already familiar with image optimisation, but also test to see if you can squeeze images into a GIF, or a PNG8 if possible, these formats will give you a nice small filesize if you only need a limited colour pallete.

    In this day and age it’s nice to think that we’re all cruising on nice fast broadband connections, but in reality we know that’s not the case and you really have to consider your audience, and the context in which they may visit your site (Paul’s talked about this quite recently). If you expect an older demographic to your site, or people in remote areas, then they might still be hitting you on a dial up connection. Some visitors may be using poor public wifi (I get suicidal on the train to and from London as the wifi is usually worse than dial-up), or mobile devices where the data charges can be ridiculously high.

    There are a couple of tools I use to get an idea of how my pages weigh in:

    There is a Firebug addon called YSlow which provides some nifty statistics on what’s happening under the hood of the pages you visit, and also grades the page performance and suggests methods to improve the loading time of your page.

    I tested 2 sites quickly with this extension to give an idea of what you can expect to see, Amazon and Boagworld.

    • Amazon.com weighs in at 501k with 85 HTTP requests and a performance rating of D
    • Boagworld.com is a bit lighter on it’s feet at 57.6k and 79 HTTP requests, but has a performance rating of F, due to (among other things) including 37 external javascript files compared to Amazon’s 8, and 33 CSS background images compared to 9 with Amazon.

    I also use a Firefox plugin called Firefox Throttle which lets you simulate a specific network speed (such as 56k) and get an idea of how long your site will take on certain connections.

    Unfortunately I don’t think there’s a good rule of thumb here. Personally, I don’t let the page weight issue affect or limit my design, but try and make savings where I can nearer the end of the project, by optimising images, switching to minified JS libraries and reducing the amount of HTTP requests where possible.

    Back to top

     

    117. Friendly

    On this week’s show, we review woopra, a google analytics alternative and we explore why friendly urls are so important and what tools are out there to help you set them up.

    Play

    Download this show.

    Launch our podcast player

    Information

    Fuel Conference

    Fuel is a one-day conference for entrepreneurs and marketers who want to make their companies, services and products truly remarkable. The conference is on the 13th June 2008 and tickets cost £195 inc VAT however for lucky boagworld listeners if you enter the promo code boagworld at the checkout you will get a £25 discount!

    Back to top

    News and events

    The devil is in the detail

    We kick off the news with three stories that focus on the detail of web design. So much is said about design, usability, accessibility and other broad subjects. However, less is written about the small things. It is here that a good site becomes an excellent site.

    The first is a post on the list apart website entitled Zebra Striping: Does it really help?(1). Zebra striping refers to alternating colours on a table of data. It is a small thing, but a lot of us do it thinking it helps the readability of the data. But does it really? This post takes that theory and puts it to the test. The results are inconclusive but it is an interesting read anyway.

    The second story is about a new book released on the topic of web forms. It’s called Web Form Design(2) and as the title suggests looks at the much under-represented subject of creating a great looking, usable form.

    As I have said before forms make or break some of the most crucial elements of a website: checkout, registration, data input, and any task requiring information entry. This looks like an excellent read and I highly recommend you check it out. I will be.

    The final post that focuses on the detail of design is looks at pagination(3). It is a tutorial that explains how to code pagination semantically. It then demonstrates how you can use CSS to recreate the appearance of pagination on sites like digg or flickr. It is an easy read and ideal for beginners.

    Review crazy

    The next theme of the week is reviews. In particular Smashing Magazine have gone review crazy in two excellent (if somewhat excessive) posts.

    The first reviews 35 useful code editors(4). Of course, we can write our code with a text editor but that wouldn’t make for a very interesting post! Also we like those advanced features like auto complete, formatting and debugging tools.

    If like me you have been using the same coding tool for years, this article is worth a read. Things have certainly moved on and there is no shortage of choice out there. It might be time to change.

    The second review from Smashing Magazine only manages 25 applications. This time it is WYSIWYG editors(5). I guess this compliments the previous post very well. However, generally speaking I would warn against producing sites using WYSIWYG editors. That said they do have their place. They are useful to give to clients who want to maintain their own sites. They are also good for posting to blogs or other sites where the styling is already set.

    It has to be said that I personally code in Dreamweaver, which has a WYSIWYG component. I have been known to use it to find a particular part of the code I want to edit.

    A balanced look at flash

    Our final news item of the day is a post by Veerle on her blog entitled Does Flash irks me?(6). It is an excellent opinion piece that clearly lays out her feelings about flash. She explains how she decides whether to use it and dispels some of the misconceptions about the technology.

    Her post is very timely coming as it does a week after flash goes open source. It is balanced and her attitude very much mirrors my own (therefore it must be right!). If you view flash as the ultimate evil or alternatively refuse to code in anything else, read this post. It will provide a healthy dose of realism.

    Back to top

    Feature: Friendly web addresses

    When redesigning boagworld considerable time was spent formatting the sites’ web addresses. Find out why so much time was taken and an introduction to the tools I used in this weeks feature

    Back to top

    Review: woopra

    When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is woopra. I give my thoughts to woopra in this weeks review

    Back to top

    Listeners feedback:

    Creating consistant colors

    Anna Joe Writes: I know that the colour of a website will look a little different on every monitor, but is there a profile setting that you use as an ‘average’ setting?

    Since I work on Mac with a Mac monitor, I’m afraid most people will see something radically different than me. I have read that Mac defaults are brighter than Windows. I’m using a lot of dark colours, so I am concerned about the site appearing too dark on the majority of computers.

    I have a list of colour settings provided on my computer… only one seems to have a Windows-related profile. It’s called ‘Nikon WinMonitor 4.0.0.3000′

    Do you have any suggestions regarding this issue?"

    I have to confess Anna, this was a subject I knew nothing about before your question. The way that I got around the problem was to look at any design I produced on as many different monitors as possible. To be honest, even after my research I would advise this as the best approach.

    View your site on a TFT and an old CRT monitor. Also check on laptops and under different operating systems.

    However, based on a bit of reading it would appear that the problem is to do with Gamma settings. Macs by default have gamma correction built in while PCs do not. This causes images (especially photographic images) which look good on a Macintosh monitor to appear too dark on a PC.

    Fortunately there is a tool that allows us Mac users to experience the horror of the PC world. It’s called gamma toogle(7) and can be downloaded for free.

    If you don’t have access to multiple machines for testing this would be the next best thing.

    Setting up an ecommerce site

    Paul East Writes: My girlfriend has come up with an sales idea that would require a simple store front application with the ability to take credit and debit card payments online.

    Have you any advice on where to start or any recommendations on store front applications?

    We’d like to try and keep start up costs low (we’d like to avoid paying a web designer, sorry!) and avoid eBay type stores if possible for that more professional look.

    We’ve done a little investigation on merchant accounts but could do with a good steer on the rest!

    Again this is not a subject I k
    now a huge amount about. Most of the ecommerce sites I work on are considerably larger. However, hopefully I will be able to point you in the right direction.

    First, for the best advice when it comes to setting up ecommerce sites big or small I would highly recommend the ebiz video podcast(8). These guys really know their stuff and in fact we had them on show 55 to talk about ecommerce basics.

    Second, in the past I have come across two simple shopping cart systems that impressed me. The first is FatFreeCart(9). This simple system can be integrated easily into an existing site. If you are only selling one or two items this is perfect. The alternative is shopify10. This is a little more sophisticated but incredibly simple to setup and run.

    Neither of the questions today are subjects I know much about and I am guessing there are people groaning at my advice. If that is the case, get in touch and we will put you on the show.

    Back to top

    113. Hiring

    On show 113: Christian Heilmann on common Javascript mistakes. Marcus talks about hiring new staff and Paul shares his journey into screencasting.

    Play

    Download this show.

    Launch our podcast player

    News and events | Hiring new staff | Christian Heilmann on common Javascript mistakes | Listener emails

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

    If you feel you could help once in a while please drop me an email and I will add you to the list.

    News and events

    Highly extensible CSS

    A while back Cameron Moll released a tantalising screencast of a seminar he was running on Highly extensible CSS. Website today need to be ultra-flexible, dealing with changing content, multiple devices, and user customisation. Cameron’s presentation aimed to teach designers and developers how to build interfaces capable of adapting to the unforeseen.

    Unfortunately, I didn’t get the opportunity to attend. I was therefore excited to discover that Cameron is about to cover the same subject in a series of four posts on his website, all for free!

    So far he has only posted the introduction. However I am really looking forward to the whole series. For now just check out the screencast and see if it excites you as much as it did me…

    Video tools

    Talking of screen casts I have actually been working on several myself at the moment. We are in the process of redeveloping the Headscape website and have decided to include a couple of demonstrations and presentations.

    This means I have been in research mode and I thought I would share what I have found. Firstly, I have discovered a great screencasting tool called Screen Flow. This Leopard only software stands head and shoulders above anything else I have tried on either Windows or the Mac. It is amazingly easy to record and edit your screencast and has some great built in effects. My favourite feature is that it will capture from both a web cam and the screen at the same time. This allows you to cut between video and the screen or even overlay a video feed on top of the cast.

    Once I had recorded my video I started to look for somewhere to host it. Although I would be foolish not to put it on Youtube where it will get the most exposure, I didn’t want to use Youtube when embedding on my site. The quality on YouTube is poor and you are limited over length and size. With this in mind I looked at a number of competitors. The winner for me turned out to be Vimeo. The quality is superb, they are much more flexible over length and time, but most of all they provide links to the original file and allow you to customise the interface.

    So, if you are looking to create a screencast I highly recommend Screen Flow and Vimeo. Also, if you are looking for tips on how to make an engaging video then check out Ryan Caron’s tips over at Carsonified.

    Microformat boost

    The last thing I want to mention in this week’s news segment is the growing interest we are seeing in Microformats recently.

    For a start Firefox 3 is going to have built in support for Microformats, which will be hugely significant in itself. However the guys over at Yahoo! are doing some interesting stuff in the area too. Yahoo! Micro Search is a new way of viewing search results that include all kinds of metadata including microformats. According to David Peterson at Sitepoint this could allow Yahoo to really challenge Google.

    I am not sure whether that is true or not, but I do know it is a great time to start using Microformats. If you want to get started then check out Microformats.org or for you more advanced users have a look at this interesting demo of compound Microformats.

    Back to top

    Feature: Hiring new staff

    Marcus shares his thoughts about taking on web design staff for the first time.

    Back to top

    Expert interview: Christian Heilmann on common Javascript mistakes

    Paul: As I said at the beginning of the show, joining me today is Christian Heilmann. Hello Christian, how are you?

    Christian: Hello Paul. Why it’s quite fun cause it’s Valentines day & I’m stuck with you as a date.

    Paul: Well I’m sorry that you had to ah to endure me on Valentines Day but I’m sure you’ll survive. And um yeah… so basically, the reason that we’ve got you on the show today is we want to talk a little bit, a little bit about javascript. Now we’ve talked a lot of times about javascript before and it’s not a new subject, but I kind-of um… felt it would be worth touching on the kind-of common mistakes that we’re seeing a lot in the world of javascript at the moment. I think um… you know obviously javascript is very in and there’s load of cool stuff being done with it but not always in the wisest ways. Um… and then on top of that, so there’s this kind-of group of people that are doing quite advanced stuff with javascript with maybe not considering all the ramifications of what they’re doing. And there’s another kind-of group of people which are people like myself that go ‘Ewww… look at that, that’s cool I want to start doing things like that.’ And so you know a little, a little knowledge is dangerous as they say, and you know we’ve picked up books like Jeremy Keith’s scripting book and read that and now we think that we can, we can build javascript applications and are kind-of hacking things together. So I thought lets spend a few minutes looking at those, those kinds of issues. So um um… maybe probably a good place to start off if you don’t mind Christian is what advice you’d give to somebody starting to learn javascript so that, so that they kind of avoid some of these mistakes you know from the get go. What good principals, good foundations should they be working on?

    Christian: Um… the main foundation is that javascript is a language in its own rights. It’s uh uh… you can not take any other knowledge and try to apply it on to javascript and this is where the two angles actually come where people that come from a higher programming language background trying to find the same principals that apply there inside javascript

    Paul: Um hum…

    Christian: Or people that come from CSS design background, basically think that it’s as easy as applying a CSS selector to an element that everything will be matched magically…

    Paul: Yeah…

    Christian: … and not realizing that there is an impact on speed and an impact on how the browser actually finds these things and what kind of mistakes the browser does. The main thing to remember about javascript is ah… there are many different ways of javascript, there are many different environments where it’s applied. So there is lots of really clever things being done right now with javascript, even on the service side and inside frameworks and inside API’s. But there’s also, in the end you would run it in a browser sooner or later. And if that’s where you are going to work the best advice is actually to not trust javascript ever and to actually um… enhance with it but not really rely on it.

    Paul: Um hum…

    Christian: So if there is a window print link, then this link should be generated with javascript and not just be an ‘href’ javascript window print because if somebody doesn’t have javascript or for some reason javascript’s broke, or the engine doesn’t work in your environment then you click the button and nothing happens. And there’s nothing worse than uh promising an end user something that you don’t deliver in the end.

    Paul: Yeah.

    Christian: The other thing is that uh… when you start from javascript, one of the first things to remember is that you should always learn the if statements and learn that they’re your best friend. Like never do: ‘apply something’ BUT IF ‘something’ THEN ‘apply something’. So if you…

    Paul: Umm…

    Christian: Try to access a heading with an ID for example, and then you don’t just do: HEADING ID ‘something’ = ‘something’… cause it might not be there.

    Paul: Yeah.

    Christian: So basically test for it, before you apply it. When you follow this principle through with all of your programming, this kind of defensive programming, then you will (we will) definitely write good javascript in any programming language really. Over the years when you get more and more experience you just learn more and more ways how the technology that you use fails…

    Paul: Mmm…

    Christian: …rather than actually succeeds. So you learn how to avoid the biggest pitfalls.

    Paul: I mean, you always hear this thing don’t you about um… that not all browsers support javascript or that not all users have javascript turned on. I mean how real a problem is that? Is that being overly cautious to worry too much about that kind of thing or is it a real problem? Are there actually a lot of users out there that… that don’t have javascript for one reason or another?

    Christian: It’s impossible to say. Its statistics and it’s a bit like flash. When you when you look at flash statistics and you hear like a 99% have it enabled on the Adobe side, then you’re like ‘Oh yeah really.’ because these are the only stats that you find…

    Paul: Um hum…

    Christian: …the company that delivers that is a bit like… yeah, I think that the Microsoft help pages with have a lot of hits from people with Windows.

    Paul: Yeah.

    Christian: So um… it’s not really a problem I don’t see the problem at all. I see the problem of people… uh, architecting and designing applications around the premise that javascript will be there, and everything will be happy and work.

    Paul: Mmm hmm…

    Christian: If you write your applications like javascript does not need to be there, but is nice when it’s there and actually makes it a lot smoother, then you don’t have a problem…

    Paul: Mmm…

    Christian: I don’t buy this whole argument of like… oh AJAX is so cool because we don’t’ have much traffic on our servers any longer. It’s like yeah, but you never know the environment that javascript is run in. It could…

    Paul: Mmm…

    Christian: …my mobile phone, it could be it could be an iPhone, it could be it could be an old browser. I just bought myself this eeePC that doesn’t have much memory. It’s uh… you can never expect the end user to actually cater their hardware to your needs…

    Paul: Mmm…

    Christian: So it’s pretty… it’s pretty unsafe to actually rely on it. So even if the statistics are ridiculously low, it doesn’t really matter because you don’t want to deliver a bad practice and deliver a bad experience to users.

    Paul: Mmm…

    Christian: And then there’s, of course, the SEO problems as well. If you have a navigation that’s dependent on javascript and doesn’t show anything – or you make elements clickable that shouldn’t be clickable, then you won’t have search engine spiders following these links and your sites won’t be indexed.

    Paul: Mmm…

    Christian: Same with accessibility. When you make something clickable that is not clickable by default, like a ‘span’ or a ‘div’ or whatever, then you can not expect a user agent actually to allow people with assistive technology or people that use a keyboard to use the same application because browsers are just not clever enough for that.

    Paul: Mmm. So what about people, um… starting out as absolute beginners – what are the most common mistakes you’re seeing them make when they start out doing javascript?

    Christian: A lot is copy and pasting and hoping that nothing breaks…

    Paul: (Laughs)

    Christian: …and ah… also um… a lot of it is skimming tutorials. A good tutorial writer will tell you a lot in the paragraphs between the code examples.

    Paul: Mmm.

    Christian: And um… just going through the code examples and trying to figure out what’s going there yourself and copy and pasting it does not really make you a good developer. This information was put there for a reason and actually explains you the smaller bits that you need to know about the language. ‘Cause most of the javascript errors that actually happen in the real world is not because you did a coding mistake, but because you made an application mistake that you expected a browser to do something. Or you expected an application to give you the right information back, where as you didn’t test for it. So um… I think trusting tutorials and uh… just copy and pasting code without actually knowing what it does is a very dangerous thing.

    Paul: Mmm… Would you apply that same principal to frameworks? You know and not under… if you don’t understand what a framework is doing then it is probably best to avoid it.

    Christian: Well it’s a matter of what it does. I mean uh… the last few years in web development have become a lot more transparent than before and that’s… Firebug is actually to blame for that.

    Paul: Mmm…

    Christian: It’s great because you can look at code that is generated by javascript or a backend application and you always know, you can always analyze the whole document ñ what’s doing on there if you know your Firebug. That’s another thing that I would actually tell any developer that would start with javascript to get his head around it’s like java… uh… Firebug is a great great way to learn from other people’s mistakes and also to monitor what’s going on in your scripts all the time. When it comes to library’s, that’s a bit of a different story because um… I had a bit of foot in mouth moment there when I proclaimed in the past that most library’s are bloated and unnecessary and um… now I am part of a library…

    Paul: (Laughs)

    Christian: …and uh I’m also I also talked to media AJAX to a lot of library developers and I realized that all the libraries do the same thing. All of them actually make the pain and the uncertainty that is browsers out there bearable for you.

    Paul: Mmm.

    Christian: So um… if you don’t understand what the source code of jQuery is, or the source code of the YUI is that does not mean that you shouldn’t use it.

    Paul: Okay.

    Christian: Other people have had that problem before you and loads and loads of people find bugs and submit bugs and help these libraries get better. So now a days if you are a new javascript developer I would basically say that you have learn the syntax, you have to learn the standards like what does DOM scripting mean, how does event handling work – but by all means if you go into a production please please use a library.

    Paul: Oh okay.

    Christian: Because that one take the cruft of all the fixing and uh… hacking that you have to do to make something work away from you.

    Paul: Mmm.

    Christian: It’s a matter of what you do. I mean if you’re doing a high traffic Twitter clone, or whatever, that runs an error application then you might have to these fixes – but you’re not necessarily going to do that as a new beginner.

    Paul: Okay yeah… that that’s a very different opinion than I’ve heard in the past and it’s quite interesting to hear the other side of the argument. It’s good. So what about… what about dangerous people like me? So you know… where I knew nothing about javascript but I decided: ‘Yeah, I really need to learn this’. So I got a couple of books, I’ve read a couple of books and I’m kind of up and running but I’m not… you know I’m not a developer. I’m not somebody that’s an expert. You know… what other kind of common screwups you’ve seen people like me make?

    Christian: Um… It’s tricky to say. It’s like most of the time, what these kind of people do is also try to solve problems that other technologies have with javascript.

    Paul: Mmm…

    Christian: Which is sometimes cool, but sometimes it’s also thinking about there’s a reason why that doesn’t work. So um… I mean the classic is… the classic is like rounded corners and things like that. There are loads of javascript rounded corner solutions which on the outskirt look like they are really clean solutions. This is also might be to put a class on a ‘div’ and to put a bit of javascript in and then everything has rounded corners and there’s no harm done.

    Paul: Mmm.

    Christian: That the javascript needs to inject a lot of HTML and probably is slow doing so. It’s the other side of the story it’s uh… I think people like you, that are just enthusiastic about it and basically want do it are not necessarily savvy of the implications that it has.

    Paul: Yeah.

    Christian: So the uh… the information that we need there is that we need a lot more tutorials on um… how javascript impacts performance. And we are starting with that already in the development network and other people are doing that as well, but there are lots of mistakes being done as well there. The other problem that I see with people that have just started with javascript, is they apply… they find one solution, they find one library then they become the biggest fan of that library then everything else is rubbish.

    Paul: (Laughs)

    Christian: And uh… that is a very dangerous attitude as well because you will not be, you will in your career work for different clients that will use different libraries as well. So you shouldn’t make yourself dependent on only one but understand what the benefits of each of them are and where you should apply them.

    Paul: Um huh.

    Christian: And how they actually make your life easier, or how they make your life less easy, than another competing product. So the implications there is that a lot of people use these newer libraries, or newer ways of using javascript, to actually make javascript behave like their favorite language or their favorite technology. That’s why people went nuts with every javascript library came up with the CSS selectors.

    Paul: Yeah.

    Christian: And that’s great because now I can go fifty levels deep in my CSS selector and the javascript finds what’s in there. While this is already an indicator that your HTML is not necessarily good structure

    Paul: (Laughs)

    Christian: …and it also means that if you change your HTML in the future you also have to change that path, or if you don’t change that path then your javascript will break.

    Paul: Yeah.

    Christian: And a lot of libraries break silently as well. So instead of just getting the error in your face that you’ve basically screwed up, you will not know what’s going on and will wonder what’s going on.

    Paul: Mmm.

    Christian: And when that happens that’s normally when people, like you, fire up emails to the library developers and tell them that their product is rubbish.

    Paul: (Laughs) Yeah… I can’t disagree with that. That’s the kind of thing that I’d do probably. Um… what about, I’ll tell you the one thing that I’ve come across is that… I’m kind of competent enough to write functions to do a lot of the things that I need to do. Nothing really complicated, I couldn’t build anything too sophisticated, but you know enough to get me by. But then as I’m kind of looking at other people and what they’re doing um… a lot of them are using object orientated type techniques in the code that they are writing. There’s me hacking away with little functions and there seems to be some transition across object orientated approach when you kinda hit a certain level… you know why, what’s the benefits of that? Why do people take that kind of approach?

    Christian: (Laughs) Um… It’s been very beneficial in other languages, and other environments, especially when the environment is rather sophisticated.

    Paul: Mmm.

    Christian: Then ah… you seen for example action script. Action script has been as much as a hacky javascript. Yeah, look what I can do if I do it this way language and now with the Flex frameworks, and Adobe opening up more and more to the java world, um… it’s getting more and more into structured ways. And the structured ways are hard to understand for somebody who is not from that background.

    Paul: Mmm.

    Christian: And I can safely say that, I’m not myself. So I um… I have a lot of problems with like properly, or massive structures, and frameworks. But when you see people do proper action script, for example, or do Rhino applications for the server in javascript, or some of the things that are happening with javascript 2… that there is a reason for that and the reason for that is the scalability is just so much bigger.

    Paul: Right.

    Christian: It’s uh… basically you can extend an object and I can reuse a class and I don’t have to worry about that. It’s like I start building these little small components, all of them in themselves tested and unit tested, and I know they work. And then I can build a bigger application from them.

    Paul: Mmm.

    Christian: Basically without really needing to know to test these things ever again.

    Paul: Yeah.

    Christian: That’s how things like PEAR and PHP and Perl libraries work as well. It’s people extending these kind of already existing bits, and bobs, rather than starting from scratch every time.

    Paul: Mmm hum.

    Christian: Most of the time for the little web development things that we do like the AJAX form or the Constentina navigation that’s not necessarily needed, but when you write a library for example, and it grows, like YUI is growing or like jQuery is growing as well… then you need to adhere to these standards ’cause otherwise everyone will just submit their own code in forms that are just terrible.

    Paul: Yeah.

    Christian: And there’s not much magic to it. I mean I get annoyed when I see javascript guys going on stage and saying like: ‘Well guys, this is a function and when it’s an object it’s a method and…’ and why should I know this? Well you should know this because you need to communicate with other developers as well sooner or later.

    Paul: Umm hmm.

    Christian: And these people speak that lingo and rather than you having to explain yourself for 15 minutes you could communicate in 3 minutes.

    Paul: Mmm.

    Christian: And that gives you more time for lunch break.

    Paul: (Laughs) …or drinking…

    Christian: So the worlds of hard core programming and javascript are actually getting closer and closer and seeing some of the things that browser vendors come out with and some of the other software that builds on web technologies that is being built at the moment, I don’t think that we can actually rely on our being the cool cookie web developer anymore.

    Paul: Mmm.

    Christian: It’s a bit like we have to have broaden our horizons the same way that backend people have to broaden their horizons when it comes to using javascript, but you can only make someone understand your problems when you understand how they tick.

    Paul: Mmm.

    Christian: Otherwise you start preaching to the choir.

    Paul: Yeah. Okay here’s the last question to wrap up with. I’m going to open it up and let you rant uncontrollably. What are the worst mistakes that you’re seeing at the moment made with javascript, just generally.

    Christian: Uh. The worst mistakes that I see are that people write little scripts for tasks over and over again.

    Paul: Okay.

    Christian: The same task and I see them actually tying the interface a lot to the javascript. So…

    Paul: What do you mean by that?

    Christian: Instead of making a javascript that actually creates the things it needs, there will be HTML that is just not necessary where the is not javascript available.

    Paul: Okay yeah.

    Christian: So instead of starting with the proper HTML and CSS structure, you basically have this whole gumph of HTML because there’s the javascript to clean it up anyways.

    Paul: Yeah.

    Christian: So um… basically the main tip is you will never ever be able to replace a proper HTML structure. It doesn’t matter where technology is going because technology will go away from that sooner or later, but at least a human could actually go there and see that there is a structure.

    Paul: Mmm hum.

    Christian: And that there’s a way to convert this to something better in a second step. If you’ve created a lot of spaghetti code with like HTML and javascript mixed in and lots of little scripts in there, then you will never be able to convert that to something better in the future and this is what we’ve been running in circles for years and years. We’ve never been improving things, we’ve just been fixing things and adding little bits, and bobs, to it.

    Paul: (Laughs)

    Christian: The other thing that I keeps seeing is well the fan boy thing, about javascript libraries and of the academic way of some people measuring javascript. You have all these like, I mean there’s people that spend like weeks finding different javascript includes and script libraries and measuring how fast they are on their computer…

    Paul: (Laughs)

    Christian: …generating twelve thousand objects and trying to put them on dominoes. Show me the application that needs that done, then your comparison actually makes sense.

    Paul: Yeah.

    Christian: It’s the same as CSS. You have like ’10 Most CSS Tricks That You Never Knew’ or ’10 Most Beautiful Naviagations’. It’s like list blog posts digging their way through the internet.

    Paul: (Laughs)

    Christian: And it’s the same way there right now, like I can appear immensely cleaver if I just put loads and loads of effort comparing things to each other. Instead of saying ‘this’ means use ‘that one for this one’ and ‘use that one for this one’ cause the benefits of that one library is ‘this’ and the benefits of the other library are ‘that’.

    Paul: Yeah.

    Christian: It normally is like, ‘Oh yeah… that library won.’ or ‘All of the others are bad’.

    Paul: Yeah.

    Christian: And that’s never the case.

    Paul: Hmmm.

    Christian: We have to get away from this putting things together randomly and making up an application, to a proper web application design and I’m going to be in New York at the end of the month, no actually beginning of next month at AJAX Worlds and my talk there will be about how to do javascript design and javascript architecture of big applications.

    Paul: Mmm hmm.

    Christian: That’s going to be quite interesting feedback from the audience I’m quite sure about this, but it’s a matter that we grow up, we actually have to grow up as web developers and take our stuff serious and actually make sure that we don’t build for ourselves – but we build for the guy that comes after us cause that will always happen as well.

    Paul: Yeah… and that’s really good advice.

    Christian: If you think like that, then you will never write bad code and sometimes people just have to suffer that themselves before they start doing it.

    Paul: Mmm.

    Christian: It’s always clever to think of yourself as the javascript god that can do things better anyways, but some times it’s good to leave your superhero skills in the corner and just do something that works and that’s understandable and spend some time documenting for the next guy that has to take it over from you.

    Paul: And I think that applies to everybody you know people, even people doing HTML or CSS or server side stuff thinking about the next person is, yeah, hugely important.

    Christian: Yeah.

    Paul: Thank you so much Christian. That was very useful and I really appreciate you taking the time to come on the show on Valentine’s of all days. Good to talk to you Christian and we’ll speak soon.

    Christian: See you soon. Bye.

    Back to top

    Listeners email:

    Rolling out new features

    Our first listener comment is from Alex who has come up with a clever little approach for educating existing users about new features…

    I just listened to show 112, where you mentioned Christian Heilmann’s javascript walkthroughs. These walkthroughs reminded me that I wanted to do something similar for our website, except I wasn’t able to squeeze it in before the deadline.

    My workplace decided on a total revamp of their website, and the final design had some substantial visual and navigational changes. Among other changes, disparate logins had been consolidated into one login button. Of course, now we had the problem of habitual users; because the website hadn’t changed for several years, how do we now try to avoid several hundred support calls asking where the logins have gone?

    Well, the obvious solution is to not make such drastic changes. Going for evolution, not revolution and whatnot. Failing that, is something like Christian’s walkthrough popups. However, these would still show up for new users, for whom this information would prove totally useless.

    Here’s the solution I had planned:

    A couple weeks before the new site or feature launch, we use javascript to set a cookie. This accomplishes two things: 1) we target people who have javascript, so we know the popups will work for them, and 2) we’ll know they were at this page *before* we changed the design or added a feature. Now, once we launch, we check for that cookie using PHP (or other server-side scripting). Why do this on the server side? Well, it lets us avoid even inserting the popup code for people who don’t have the cookie. If the cookie exists, we can then delete the cookie (so they don’t see the walkthrough again), and then insert the walkthrough divs and javascript.

    Even though I didn’t get a chance to implement it, maybe this will help other people prepare for site overhauls.

    What a great idea Alex. Existing users rarely like sudden changes to the sites they use regularly and often need a lot of help making the transition. This is an excellent way of doing that without confusing new users with unnecessary information.

    Content management and CSS

    Our second listener contribution is a question from Adrian…

    Thank you very much for the show – it has been so helpful!

    I have been given the job of creating an Intranet site for a small business. After listening to your shows I would love to create this website using webstandards and have been learning CSS. As well as this it is important that the users of the site can modify the content via a CMS.

    So my questions are; can both of these things be satisfied? Also is it possible to design the website using webstandards and then “plug” a CMS into the already created website?

    It is definitely possible for content providers to update content built using CSS. In fact it is easier, and allows the designer to maintain more control over the design. Traditionally content providers had to make all kinds of design decisions when adding content. If they needed to add a heading they had to decide what that heading looked like. If they wanted to make a piece of content stand out, they would pick a colour and font size to make that happen.

    However, when a site has been built with standards the content provider doesn’t need to worry about what content will look like. They simply say this is a heading by defining it as an H1 and the CSS will decide how to style this. Equally to make something stand out they mark it as strong and the style sheet does the rest. Simple.

    The only problem is that some content management systems do not have WYSIWYG editors capable of supporting this approach. They are still focused on giving the content provider design control. Fortunately there are editors out there that do think in this way. A good example is xstandard although there are others. These can just be dropped into your CMS.

    Finally, it is certainly possible to plug standards based code into a CMS. Infact, it is actually easier because the style and content have been separated. A content management system is (as it name suggests) primarily concerned with content. It doesn’t care about how that content is styled. Nothing makes integration easier than nice clean meaningful markup, unencumbered by formatting.

    110. The mighty Meyer

    On Show 110: Eric Meyer on version targeting, the business benefits of usability testing and do I have to have a blog?

    Play

    Download this show.

    Launch our podcast player

    News and events | The profit and loss of usability | Eric Meyer on version targeting | Listener emails

    News and events

    Before we kick off the news section today I should point out that I actually link to many more articles, tutorials and news stories than I ever include on the show. If you go to boagworld and click the links in the header you can receive all of these posts by either email or RSS.

    CSS reference library

    Raise your hands if you have ever used the W3 School. Okay put your hand down now because you are looking kind of stupid. For those of you who didn’t raise your hands the W3 School is a comprehensive reference sources for almost every web language around. It really is very impressive.

    The problem is that it doesn’t provide the nicest user experience. If you are looking for CSS reference information then a possible alternative is the new Sitepoint reference section. At the moment it only includes information on CSS however they are obviously looking to expand.

    Its design is a lot more attractive than W3 School and although it is not as comprehensive it will provide you with all the latest information on CSS properties including CSS 3. It also provides you with an indication of which browsers support that property.

    Stay on :target

    Talking of CSS 3 there is an interesting article by Brian Suda over at Think Vitamin entitled Stay on :target. Target is a new CSS pseudo-class being introduced in CSS 3. Although it has yet to be implemented by Internet Explorer it is supported by many other browsers.

    Essentially what target does is allow you to style a target element in much the same way you can style on hover. So when you click on a link that goes to a fragment identifier (what used to be called anchor links) then it styles that fragment.

    So for example a good use of this attribute would be to highlight the content that you have just been jumped to (like the fade to yellow technique) or to hide and show content when the user clicks on a tab.

    Of course many of you might be asking why I bring this up when it isn’t supported in IE. Well, not only is it an interesting glimpse into what is to come, it can also be used right now when the functionality provided isn’t crucial. For example you wouldn’t want it to hide and show content but it might be okay to highlight linked content with it.

    Read the article and you can see the potential yourself.

    Search behaviour patterns

    Another article worth reading is Search behaviour principles over at Boxes and Arrows. This article looks at how people search and the different types of searchers there are. It also looks at what things affect the way people search and techniques that can be used to accommodate their approaches.

    As I have said before on this show, not enough attention is given to search and this article will really get you thinking about how to better accommodate it. Best of all there are still a lot of hints that can be applied here even if you are lumbered with an inflexible search mechanism that cannot be customised or tweaked.

    10 principles of effective web design

    Talking of search usability brings us nicely on to our final story of the day which is a post from Smashing magazine. We haven’t mentioned them in a while but this week they are back with another top ten list. This time it is the 10 principles of effective web design.

    Personally I think it is a misleading title as actually the post is about basic usability techniques. That said, it is a very good list and contains some really solid advice. It also contains lots of examples which really helps you get your head around the issues.

    I don’t think the post has a lot to offer seasoned usability testers but if you have always avoided the subject in the past then this is a nice simple starting point.

    Back to top

    Feature: The profit and loss of usability

    We have looked at the subject of usability testing relatively recently on the show and have mentioned it countless times before. However, never have we taken a step back and asked the fundamental question: why is usability testing important? This week we look at how usability testing can be presented to clients and dispel some of the misconceptions about it.

    For more detail on what we cover read my post The profit and loss of usability.

    Back to top

    Expert interview: Eric Meyer on version targeting

    Paul: So on last weeks show we discussed Internet Explorer 8 and some of the plans Microsoft have for it and joining me this week is Eric Meyer. Hello Eric, good to have you on the show.

    Eric: Cheers, hello.

    Paul: Cheers, very British of you.

    Eric: I try to localise my content.

    Paul: Yes, very good. Most impressed! We’ve got Eric on the show really because this whole news surrounding Microsoft and what they were planning to do was broken on the A List Apart website, in 2 articles, one of which Eric wrote. The reason I think I wanted to get you on the show to talk about it is because I was kind of struck by the honesty of your article that a lot of what you were saying was very much ‘I really don’t want to like this idea but…’ kind of attitude. Which is the kind of attitude that I think goes down well with the people that listen to this show. So I was wondering Eric, could you kick off by giving a brief explanation of what it is that Microsoft are proposing doing, just so that we’ve got a bit of an understanding of it?

    Eric: Um, well pretty much what they’re proposing is that Internet Explorer, Internet Explorer 8, and in the future will recognise a single element, a meta tag which can be used to say ‘This is the version of Internet Explorer that I want you to act like’ so that Internet Explorer 11 can act like Internet Explorer 8 did, or Internet Explorer 7.

    Paul: Right.

    Eric: So the idea basically is well they call it Version Targeting so that you can have your page actually targeted to a certain version of Internet Explorer even if newer versions have come out.

    Paul: Ok. So, I mean at face value that sounds very much like browser sniffing, which is obviously something that has kind of become considered bad practice. How does it differ?

    Eric: Well my perspective is that it differs because it actually reverses the direction of sniffing. Browser sniffing To date it has been a case of authors trying to figure out what browsers they want to sniff for and what should happen as a result. This was sort of the reverse side of. It would be the browser sniffing the page to say, ‘What do you want me to do?’, at least in the case of Internet Explorer. It should be clear that Microsoft has so far as I am aware anyway not proposed that anyone else has to do this, or that this has become any part of any sort of standard. They’re saying if it is what we want. This is what we’re planning to do on the browser. So they have the same echoes. I really feel like they are not the same thing. There are a lot of people who disagree with me but they are really very different because one of the reasons that browser sniffing by authors has become viewed as a bad practice is because it becomes fragile over time. First of all there’s a case of people saying ‘If this is Internet Explorer do such and so’, and they don’t consider that there might be a version this version of Internet Explorer that might change what I’m trying to work around. Another reason is that people make guesses about what will be in user agent strings which is usually what people browser sniff on and sometimes those guesses turn out to be wrong as when Safari first came out its user agent strings had the phrase White Gecko in parenthesis.

    Paul: Yeah.

    Eric: A lot of people had done browser sniffing scripts that looked for the word Gecko so all of the scripts thought that Safari was Mozilla, Firefox or whatever and so some of them broke. In a way it is hard to fault the authors because how are they supposed to know a browser from Apple, not based on Gecko, would have the word Gecko on it’s user agent string and yet that happened so this would be much more controlled it seems to me were it would be browser saying ‘What do you want me to act like?’ and that’s the other reason this has varied from browser sniffing usually tries to predict the future, whereas this version targeting that looks like it will happen in Internet Explorer it actually has to predict the past which is inherently easier to do.

    Paul: Why has Microsoft decided to take this position? It seems to me like in some ways they’ve created a rod for their own back in the sense that they are producing I don’t know, Internet Explorer 11 and in that has got to be the rendering engine for 10, 9, 8, 7 and all the way back. Is that not just a lot of work on their part? What’s driving them in this direction?

    Eric: I think it will be a lot of work on their part. I do not believe that the idea is to have completely separate rendering engines for each of those browsers, but to have effectively if then else statements in the rendering engine or cases or switch statements for a little more program language savvy. The reason that they’re doing this is that they really have a problem, well they have a dilemma, and they need to get out of the dilemma. The dilemma that they face is basically this: There are a lot of pages out there both on the public web and in private intranets that were developed to IE6 or IE7 let’s say and weren’t developed in an open standards way they weren’t developed the way a lot of people in the standards movement develop sites which is to code to the standards and then figure out how to work around the problems that they encounter. If you have an intranet, a massive intranet site, and your company standard is IE7 the default tendency is to develop it to IE7, you use behaviours that are not correct according to the standard, but are the way that IE7 acts. You have all these past mistakes which every browser makes past mistakes. IE7 it can be argued has made more mistakes than others, not an argument I want to get into. They have that situation where there’s this large legacy of pages. So they can’t have those break for a number of reasons, many of them business reasons, actual monetary reasons but at the ground level you could look at it as if the browser changes enough that those pages start to break it becomes a bad browsing experience for users of that browser. At the same time, the Internet Explorer team would like very much to improve their standards support. They did this for IE7; they fixed a lot of things. They went more towards the updating the browser and didn’t worry quite as much about breaking sites, and they got into quite a lot of trouble over it both internally and externally. There were people who took on the task for breaking the web. We’ve been here before as an industry back in 2000. This is how DOCTYPE switching became to be because the first few iterations of IE and Netscape did very badly at CSS support. They tried and more power too them but Internet Explorer got the box model wrong. Netscape got so many things wrong that they had to junk it and start off with a new browser. So DOCTYPE switching was basically invented as a way of being able to say ‘Given these criteria render pages the way they used to be rendered and give them these other criteria go the more standard route’. From the Microsoft prospective this is like a super DOCTYPE switch except in this case instead of hinging it on a DOCTYPE they’re hinging it on information about what the browser version is.

    Paul: Yeah. It is interesting when I first heard about this and I first read your article and the other one on A List Apart, my initial reaction was oh no all this feels wrong and indeed which is what in the sense you said that you went through when you were writing the article and then we actually were discussing it on last weeks show with John Oxton and John Hicks, the same kind of thing came out that we felt very uncomfortable with this and we were reflecting on a lot of things that were said including Jeremy Keith who made this point of you’re actually in a position where you’re actively having to tell Internet Explorer 8 how to behave like Internet Explorer 8 and not IE7, which seems a bizarre set of circumstances but since then I’ve been thinking about it a little and I’m struggling to come up with a reason that I really object to this beyond a principle of the thing that I feel like I shouldn’t agree with it but I’m having trouble articulating why I guess. What kind of things are you seeing? You must have seen a lot of objections come up when you are brave enough to step up and say what you did on A List Apart, I’m sure there was quite a backlash. What kind of things are people saying and throwing against this?

    Eric: Well I can see quite a few objections.

    Paul: *laughs*

    Eric: Well one of them is an objection that Jeremy brought forth which I think I am glad that were talking about that which is that the default behaviour is to default to IE7 as I understand. So when IE8 comes out, if it doesn’t see this version target meta tag in a page it will assume that page is to be treated as IE7 would have treated it, which again completely reverses what were used to. What were used to is when a new browser comes out the page will be interpreted according to the latest and greatest unless you’re using a quirks mode DOCTYPE switch but anyway, it’s bizarre, and yet I did go through the same thing when I first saw it I was like &#”;What!&#”; *laughs*

    Paul: Yeah.

    Eric: Good old WTF basically.

    Paul: *laughs*

    Eric: And when I first saw this it was at the beginning of January when Aaron Gustafson submitted the first draft of his article, I hadn’t actually heard about this before then, and I started arguing with him about it in the A List Apart editing forum and very quickly came to realise, &#”;Why am I objecting to this?&#”; and I took the time to step back and say &#”;What’s the deal here?&#”; and that’s were my article came from with the two of us going back and for and it was like, could you write an article about that because that’s what a lot of people are going to go through. So there’s the default behaviour, you have to have the meta to have the latest and greatest, yeah, I would like to see that changed, I would like to have Internet Explorer act the way browsers always have because that’s what I’m used too, but at the same time I have to be realistic about the problems that they face, that I was explaining before.

    Paul: Yeah, because that wouldn’t solve their fundamental problem which is that people that aren’t aware of working to the latest standards aren’t going to be aware that they have to put meta data in there pages either.

    Eric: Right, so people have said that Microsoft, of anyone, are in a position to educate people who are not aware of the need to do that one thing and that’s the point I made when I was talking to a member of the IE team about this. There are other objects that I think mostly have been related to that for example Bruce Lawson posted just in the last few days, the default behaviour means that from an accessibility point of view any page that doesn’t have this meta tag is stuck with IE7′s accessibility support which apparently is not were it should be, so he’s made the point that freezing pages to IE7 in the absence of any other information freezes them in this inaccessible state, I’m not an accessibility expert so I don’t know how best to categories that but, will have accessibility problems and keep them for years and years as opposed to, ya know, as accessibility problems improve in Internet Explorer, getting those benefits and that a very real objection and a very real concern, and I think one that needs to be made to the Microsoft people because accessibility is very important. There are other objections from the javaScript community, it’s actually been interesting in the javaScript community, there’s been a real dichotomy, there have been some javaScript library authors who’s been like &#”;Yes! Finally, thank god somebody is talking about versioning!&#”; right, and there’ve been others who have been like &#”;Oh my god, are you kidding, libraries will have to support all these backwards engines&#”;.

    Paul: Yeah.

    Eric: Again, I’m not an expert to know what side of that certain dichotomy I would come down on, in my own blog posts I’m saying, wouldn’t you just use object detection and not worry about what the version number is?, but I guess that doesn’t fully address the problem, or at least that’s what I’ve been told. Again it’s something that needs to be figured out, because there have been some fantastic javaScript libraries and fantastic things that can be done with those and if this is a move that will hamper the growth of that field then that’s something else that would also bother me. There’s also the security objects, the idea that every backwards versions that you have your complicating your ability to keep your security holes closed, that’s the kind of thing we’re I have to say &#”;Look that’s down to the browser maker to figure out&#”;.

    Paul: I guess that the problem with the whole default behaviour thing is how badly it’s going to break things, how many sites are going to be broken if the default behaviour was the latest browser and how badly are these sites going to be broken, are they going to be unusable? Are we talking about some small changes? I guess there are a lot of websites out there as well that just aren’t supported at all, content has been put online, nobody is checking them, nobody is checking when a new browser comes along, and if when IE8 was released and those websites became completely inaccessible and unusable then obviously there’s a big issue there because your loosing vast amounts of content on the web. I guess a lot of it is unknown entities at the moment isn’t it? It’s guess work.

    Eric: Yeah. There’s a lot of guess work and that’s part of the problem, I think if we knew, if there were some kind of statistics, like if the IE team were to come out and said we built a version were the default behaviour was latest and we tested it against these 1000 QA sites and 20% of them broke, 5% were completely unusable, that would be one thing, or if they said we tested and 2 sites were broken, you could still read them but they look a little weird, that would be different and nobody does really know and at least nobody outside of Microsoft and maybe not even them, I don’t know if they’ve done that kind of testing yet. And, I’m sorry, there is one other objection that come from a couple of other browser manufacturers that this is in affect, anti-competitive, whether it’s meant to be or not, but it has that effect because Internet Explorer has such a large market share they have to worry about what it does and so to them it becomes a lot harder to do that, so if they are going to keep up this effort it’s going to become a lot harder to do in this version targeting world after a few releases, of course the question is whether they would need to do that or not and there’s a lot of debate about that, there are people who are like, &#”;Just stop, stop making reference to Internet Explorer and just let it strangle itself to death&#”;. I don’t want to get into all the back and forth that’s happened but that is another objection.

    Paul: I guess, is there some danger here as well that once you’ve got this version targeting in place Microsoft could go off on some complete tangent and start introducing all kinds of proprietary functionality into their browser that isn’t supported in the other and we end up in a situation were we’re having browser wars again with different browsers implementing different proprietary tags and stuff like that, or are we truly beyond that do you think?

    Eric: Umm, It is certainly a risk and how much of a risk influences were people stand on this. I don’t see that personally as being much of a risk, because yes, the Internet Explorer team could introduce a load of proprietary properties that let an author change the colour of the browser kernel right or replace the backwards and forwards buttons in the browser, whatever, and if nobody else supports that, I think those efforts will largely support them strangling themselves, I mean, colours scroll bars we don’t really hear about anymore, people will still do them, but nobody else really cares.

    Paul: Yeah.

    Eric: So, I would not claim to be smart enough to see everything that could possibly be done but I think in a lot of ways that might not be a bad thing, because it would let Microsoft experiment with less constraints, they can do initial implementation of things that are in CSS3 and if the behaviour of those things changes, in a later version they can fix what they did, they can change to match the spec, and then still have backwards compatibility for pages that took assumption of that, there are people that would say &#”;Well they should never implement anything that hasn’t been completely nailed down&#”;, but that doesn’t really work, because one of the ways that you get yourself out of the candidate recommendation stages at the W3C is to have implementations and the only way to have implementations is for someone to implement them and if they find out during that phase, and this is what the candidate phase is about, if they find out in that phase that such and such property that has been specified, doesn’t work in the real world for whatever reason, they’re then able to go back and change it, but in the mean time if your Internet Explorer and 11′ty billion pages have been implemented to your particular version of the property.

    Paul: So, you wrote this A List Apart article that went out of the 21st of January, and we should probably say that we’re recording this interview on the 29th of January and it’s not going to go out for another week, so things might move on in-between but there’s obviously been a lot of discussion since you released that article, have your views really changed in any way, are you still in favour of this approach or have there been more concerns raised that have made you doubt it?

    Eric: Hmm, I’m still in favour of the general idea, the implementation I’m a little less, I guess I would say I’m more agnostic about, but the general idea of backwards compatibility so as not to break sites, whilst still being able to change and improve and fix the browser I’m all in favour off. The default behaviour still bothers me, and I’m still having trouble working out if there is a case of honest to goodness technical reasons or it just feels wrong, there has to be something, how’s it’s gone about is a different question, if the IE team and the people that they have to answer to effectively can be convinced that having the default behaviour switched and then educating people whole want to freeze their sites, on how to freeze there sites using the meta, they can be convinced to do that and that that will fix the problems that they face then I’m all for it. Accessibility concerns do bother me and I think that that’s another argument in favour of switching the default behaviour but at the same time I also have to recognise that switching the default behaviour, as you said earlier, from a certain prospective, completely negates the entire reason to do this, given a certain set of circumstances if they’re going to switch the default behaviour it might almost as well not even do it. Again though that also depends on how much breakage on how many sites and what kind.

    Paul: Yeah.

    Eric: The other unknown that we’re facing here is we don’t yet know just how different the IE8 behaviours are compared to IE7, we have a clue in that we already know that there’s an internal build of IE8 that can support the ACID2 test, which they weren’t even really very close too, well I guess that depends on who you talk to, but they didn’t support it before so in or to support ACID2 they have to have things like generated content with CSS which we completely don’t have in IE7 they have to have fixed some of there parsing bugs and so on and so forth that hints at a very large change, an even bigger change than that between IE6 and IE7, but we don’t know at this stage, it could be, and this has been one of my objects to ACID2 or one of my discomforts with ACID2 over the years, it could be that they’ve just implemented exactly the things that were needed to ACID2 work and not more, which is the wrong way to go about supporting ACID2 and I don’t know that they’ve done that, but it’s possible. So I may be that it’s not such a huge change, but those things came about as sort of a broader push towards implementing more advanced selectors and fixing bugs and implementing area content and really pushing into the areas of CSS2 that they don’t support and the areas of advanced CSS modules that they don’t support yet, then that could be an enormous change and in that case there’s more chance of them breaking a ton of sites if they don’t have a mechanism like this in place to deal with them.

    Paul: So I mean in some senses, after discussing this for however long we’ve been discussing it, there’s very little at this stage that we can really do about this, for the average web designer, Internet Explorer 8 isn’t going to be out in the immediate, one presumes and even when it does we’re talking about relatively minor changes that they’re going to have to make to their site, I guess the biggest immediate concern is maybe how you think about building sites at the moment, do you worry so much about things like progressive enhancement if maybe the way that Internet Explorer works in the future, I guess they’re still good principles.

    Eric: Yes, absolutely they’re still good principles and that is how I have developed sites and will continue to develop sites and really I think what it comes down to here is who’s going to have to add the meta tag.

    Paul: Yeah.

    Eric: Is it going to be people who do forward development, ya know forward compatible development, is it going to be standards aware developers or is it going to be people who aren’t in that sort of craft. It’s not fair in a way, that the people who have been doing things in the right way will have to take that on, but on the other hand it could well if you look at the numbers, there are a lot less of us.

    Paul: And in some ways we’re much more equipped to do it.

    Eric: Right, to understand why it’s needed and how to do it the right way and when not to do it for that matter.

    Paul: Yeah.

    Eric: Because when you develop a site for someone and it seems like a one off and they really not going to be keeping it up, you might want to keep the meta tag off because you know that that will default to IE7 and that’s what you want or you might explicitly include it because you want it to default to IE7 and IE8 or ya know on my site if this happens I’ll probably use the edge keyword of IE equals 1024.

    Paul: Yeah.

    Eric: So I’ll always get the latest and greatest and so that’s for me personally, but for a client I would have a much harder time justifying that because clients don’t care if it’s forward compatible development or not they just care about whether their site works and will continue to work right and so the point has been made, as you did, that in a lot of ways people who are sort of more clued in are better equipped to take this on as opposed to somebody’s grandmother who uses Dreamweaver or whatever to put together a site for her poetry circle and this happens all the time, they don’t even look at the mark-up let alone would understand why this would need to be done why there would need to be some kind of meta tag, first you would need to explain the concept of tags etc, etc, etc.

    Paul: I mean a lot of these people don’t even realise that there are multiple versions of a browser, or indeed that there are multiple browsers.

    Eric: *laughs* And those are also issues that will need to be faced, somebody is going to have to do this. A lot of these advances that IE8 seems to have ready to go as indicated by passing the ACID2 test may well have to come back out.

    Paul: Yeah.

    Eric: You can always back changes out of a code base and that really seems to me to be the dilemma and I’ll want to say again, there are people who reject that as being the choice, there are people who feel very strongly that that isn’t in fact a choice, even if you except that’s a choice that they should keep the changes in but be willing to break sites because sites always have to be updated anyway and that’s how browsers have always done it, so there’s a large amount of history that says that can happen but browsers can still advance.

    Paul: We will see won’t we, that’s what it boils down to. We will have to wait and see. Okay, Eric, thank you so much for coming on the show and talking that through, it’s an interesting area and I think it’s an area that will have significant impact on how things develop in the future, so it’s good to have your perspective on it. Thanks very much.

    Eric: Paul, thanks for having me on, I really appreciate it.

    Back to top

    Listeners email:

    Basic CMS options

    As in last week’s show I so badly bastardised the name of our textmate reviewer, I decided it is only fair to allow him another go this week. He asks:

    I have a friend who wants me to build a website that they can update. They don’t know how to write HTML or CSS. What is the best way to solve this problem?

    The obvious solution is to use a content management system of some type. Indeed this is something we have covered before on the show back in show 24. If you were building a relatively big site that needs constant updating, then I would definitely encourage you to check out that episode. However if your needs are simpler a full blown CMS might be overkill. In such situations you should consider a simple blogging system like WordPress.

    One final option maybe to use a tool like Contribute. That way you could build a nice simple static site but your friend would have a WYSIWYG tool to edit it.

    The importance of blogs

    Our second question is from Lauren:

    My question is about starting a blog. Right now, my nights are filled with homework, but once I complete my program, I can truly dedicate my time to building my portfolio. Are blogs really that important now? I don’t know if I can come up with meaningful content to make my blog stand out. Does this mean that I won’t be able to find a good job in the industry without one?

    You talk about a portfolio and blog as if they are separate things, but I would suggest they should be combined. As somebody who regularly hires web designers, I have to say I find portfolio websites frustrating. At worst they show me some pretty pictures, at best examples of fully functional websites. However, what they don’t tell me is the thought process behind the designs. Why did you choose the colors you did? Who is the target audience and how did this affect the design?

    A blog can also be used as a portfolio but allows more depth into the designs you are presenting. Also, a blog allows you to link to other content on the web and express your views on that content. This shows me as a potential employer that you are well read and interested in what is out there.

    As a student looking for your first job I wouldn’t expect your blog to include new CSS techniques or innovative approaches to user testing. However, I would like to see examples of work fully explained and evidence that you are reading other web design sites and have opinions on what you are reading.

    Show 96: Moll on Mobile

    On this week’s show: Paul suggests some ways a client can pick which agencies to ask to tender. Marcus asks when is speculative design okay and Cameron Moll explaining how to get started on the mobile web.

    Play

    Download this show.

    Launch our podcast player

    News and events | When is speculative design okay? | Who to ask to tender? | Cameron Moll on the mobile web

    News and events

    Social Participation as a business tool

    Back in 2006 I spoke at refresh06. One of the presentations I gave there has since proved a popular subject and I have been asked to speak on it again a number of times in various forms. It is on the subject of social participation and how to use it as a marketing and business tool. Social networks and communities are often seen as the domain of the teenage crowd with sites like YouTube and MySpace dominated by this demographic. However, community based applications are applicable to all audiences and can be a powerful tool for businesses.

    After preparing the latest incarnation for a presentation I am giving at IBM, I thought I would do a run through (as I have only limited time). Discovering the new record feature in keynote I decided to record the whole thing and upload it for all to see. Hope it is useful.

    Test your website for mobile compatibility

    So this week we have Cameron Moll on the show talking about some of things covered in his new book “Mobile Web Design”. In his book he mentions an interesting site that I would like to pass on to you. It is a web application that allows you to test how well your website would appear on a mobile device. You simply enter your website address, wait while it calculates your results (it even gives a random mobile web development tip while you wait) and then view a complete breakdown of any issues with your site.

    The report is distilled down into a single score but you can also see performance in each of the individual areas including:

    • Speed
    • Cost in terms of data access
    • Quality of code

    and a whole host of miscellaneous tests. However, best of all is the fact that it also provides an emulation of what your site would look like on a whole host of mobile devices.

    Laying out inline images

    My next story tackles one of the mixed blessing of content management systems. Although it is great that content management systems allow clients to add content themselves they almost always fine a way of screw up the look of a site in the process. One way that they manage this is adding inline images. They are often required to add specific classes to images for them to be displayed correctly. Unsurprisingly the client sometimes fails to do this and the design becomes broken.

    This week the List Apart website proposes one way to slightly reduce this risk. They use javascript to detect content images on a page and then apply different classes based on the width of the image in relation to its containing tag. In other words the Javascript detects whether the image is a full column, half column, or quarter column image and lays it out appropriately.

    Its not the perfect solution and there are still ample other ways clients can screw up a design but it is a nice use of javascript that enhances a design without being mission critical. I think seeing this kind of use of Javascript and we should all be looking to use it for this type of thing.

    10 Usability nightmares you should be aware of

    My last story this week is another top ten list from the guys at smashing magazine (they do like their lists!). This one is a list of the top 10 usability mistakes and I have to say it is an entertaining list focusing on some big name sites. The list includes:

    • Hidden log-in links
    • Pop-ups for content presentation
    • Dragging instead of vertical navigation
    • Invisible links
    • Visual noise
    • Dead end
    • Content blocks layering upon each other
    • Dynamic navigation
    • Drop-Down Menus
    • Blinking images

    Each mistake is explained in detail including some offending screenshots. A worthwhile read for us all.

    Back to top

    Marcus’ bit: When is speculative design okay?

    I have decided to talk about speculative design work this week because we have recently produced a couple of designs and, although we recommend that it should be avoided, sometimes you simply can’t.

    Unpaid prospective work is the bane of all of graphic based agencies and freelancers. It’s also something we have looked at before, but it’s such a significant subject I think it’s a good idea to look at it again.

    The worst case

    Some ‘clients’, and I use the word loosely, are simply looking for free work. It seems that they think ‘art’ or ‘drawing’ is not real work and is something that only fools pay for. They usually ask for a number of different page designs and concepts and will often ask for revisions on delivered designs.

    The project often ends up being dropped by ‘the board’ and then mysteriously, a few months later, something very similar to your design appears for all to see.
    These people are effectively stealing from you. Don’t do it.

    When is it ok?

    If you take the line that we should never do unpaid work then the answer is ‘never’.

    However, life simply isn’t like that so you need to make some choices. You could argue that as long as the client is genuine i.e. it’s a real project that someone will win and subsequently get paid for, then it’s ok. It’s a fair fight and the best design will win.

    But, this isn’t just about getting paid.

    Educate (how many times do I use that as a heading!)

    Speculative design is a beauty contest. The whole point of the exercise is to impress the client. This can possibly be seen as taking a somewhat derogatory view of a client’s ability to make the distinction between a design for them versus a design for their users. But even for those that understand the distinction, I don’t think it is possible to separate ‘what I like’ from ‘what is right for our users’. If there is a choice, then people can’t help picking the one they like best.

    Added to this, there’s the big issue of designing in the dark. Even if a client has supplied a detailed brief and they’re happy to chat on the phone, the guy pitching still doesn’t really know what the requirements are. The early part of any design project involves detailed discussions about an organisations USPs, target audience, brand values, site statistics, site goals, etc etc.
    User interface design is a collaborative process between the agency and the client that goes through an iterative cycle based on user feedback. This simply doesn’t happen with speculative design work.
    So, in summary, always have this conversation with prospective clients. I know for a fact that on one job, we won the work by doing so. The client saw it as the most professional and well thought through approach taken by the agencies pitching for the job.

    However, sometimes you have to do it or you will jeopardise your chance of winning the work – but still have the conversation and ask whether or not producing an initial concept will adversely affect your bid.

    Back to top

    Paul’s corner: Who to ask to tender?

    With literally millions of web design companies worldwide where do you begin when trying to draw up a list of potential agencies? Who do you invite to tender?

    Back to top

    Ask the expert: Cameron Moll on the mobile web

    Paul: Okay so joining me today is Cameron Moll. Good to have you on the show Cameron.

    Cameron Moll: Hey, thanks Paul.

    Paul: I think this is your first time on Boagworld, is it not?

    Cameron Moll: Yeah it is.

    Paul: Ah that’s good stuff we alway like to get new people on instead of having the same old boring people on every time. Nice to get someone from the States as well. Which is good.

    Cameron Moll: Yeah absolutely and I’m kinda bummed you didn’t pick me for your hundredth episode.

    Paul: Well if your in London you can come to our hundredth episode and join in the show. Do you happen to be over then by any chance?

    Cameron Moll: Uh, when’s that gonna be.

    Paul: Uh, October 20.

    Cameron Moll: Um, unfortunately not.

    Paul: Argg.Shame, what a shame. Yeah, so we’re looking forward to our hundredth that should be fun. So I mean the reason we’ve got you on the show today is because you’ve just produced a book called Mobile Web Design. This you already know I’m sure. So we thought it would be good to get you on the show just to talk about some of the things that you kind of cover in the book, and give a bit of an introduction, um, to the world of developing mobile websites. And um the question I wanted to kick off with is in your book you dicsuss kind of four different responses to kind of mobile web. In other words four different approaches people could take when they start thinking about the subject of mobile web design. And I just wondered whether you could talk us through those four different approaches that people could use.

    Cameron Moll: Yeah that’s probably a good place to start. Um, most of these are straight forward right. It’s I think a pretty simple thinking to understand how one would approach the mobile web. And uh, you know I produced these about two years ago as I was trying to understand how someone like myself, you, how we would make that leap over to mobile. The more I was researching it the more it became apparent that you know there is really these four methods, and what they boil down to is, uh, is this. So one, you essentially do nothing. Two, you reduce the number of images and styling therby reducing the file size, uh, the page weight and so on. Three, handheld style sheets and then four, mobile optimized or what some refer to as content adaptation. And uh, the breakdown is essentially this, if you’re going with that first approach your saying “You know what, I’m going to do nothing.” I’m either lazy. I assume that my users have devices that can support the content I already developed and uh, you know when you think about the mobile web obviously the question that comes to mind is what technology am I going to use? How am I developing content for mobile devices? And fourthly, most devices out on the market today will support well structured mark up out of the box. And so most of the devices being sold, most of the devices that people have in hand today are going to support your html markup. So a lot of user will take that approach, I guess developers that is, take the approach to say you know what, what I have developed it good enough. I’m going to push it out there. And with things like the iPhone and some of the higher end Nokia devices that are out on the market, most of those devices can support a full desktop experience. Right, so it’s this idea that I refered to as content zooming. And so with the iPhone I can see the full website. I can pinch or zoom in. With some of the Nokia devices and Oprea mini 4, I can have that same experience. And so the thinking with that first approach is, lets just leave the content as is and allow those higher end devices to access them.

    Paul: Sure (thoughtfully like he is paying attention)

    Cameron Moll: Uh, the second approach. This essentially takes the existing markup and content and says lets pull out the images. Lets pull out the styling and allow users to access that raw content. And the thinking there is we’ll reduce the file size. We’ll take out all those big images, that unnecessary styling. Most of the devices out on the market today, well I shouldn’t say most, but alot of them don’t support the styling that you and I are used to using on the desktop. So, the thinking here is just to pull all that out and allow the device to see the raw content. And after all people are after the content not necessarly the background images and colours and things like that. Now the third approach is perhaps right now the most controversial, and that being handheld style sheets. I mean these have been promoted as kind of this poster child of all things web. So any device whethe it be a mobile device, a car a watch or what have you should potentiall be able to take the same markup and with a style sheet specific for that device, again it might be a printer it might be a mobile device. Being able to attach specific style sheets that render the presentation differently for that given device. So the idea being, you know if I just attach a handheld style sheet to my markup. I don’t touch the markup. I don’t touch anything else. I just add that handheld style sheet then great it’s going to display it differently and so on. Of course there are drawbacks to this approach and I guess what I’m skipping here is there is drawbacks that I cover in detail in the book to.

    Paul: Yeah (thoughtfully like he is paying attention)

    Cameron Moll: To each of these approaches. They all have pros and cons. The biggest one here with handheld style sheets, cutting to the chase, is the fact that not all devices support it. I would guesstimate, I don’t have any exact figures, I don’t know that they exist. But is guesstimate only about half the devices out on the market will support handheld style sheets. And even of those that do the support is somewhat shotty. In that some of those devices will correctly obey a property such as “display none” but they’ll still in the background download the associated content with that. So if you’ve got a large image for example, and you attach to that “display none” it won’t show it but it’s still gonna download in the background that image or that content. So right now, at least, using handheld style sheets is a bit of a pipe dream. It’s just we’d love to be able to have the power to access those, that capability. But right now it’s just not all that feasible.

    Paul: Hmm. (thoughtfully like he is paying attention)

    Cameron Moll: Finally, on the fourth point, mobile optimized content. This is where you say “You know what. I understand that the environment of being mobile, this idea of context is different that it is when I am sitting at my desktop.” It’s different because I might be using one hand for data entry. I’ve got a much smaller screen and naturally I’m out on the street. I’m out driving or something along those lines. So we say what’s different about that experience, then sitting at one’s desktop. Proponents of this fourth approach essentially say, “You know what the other approaches, especially the do nothing approach completely ignore context.” And that is what is the user doing when they’re out walking. When they’re on the tube or the subway and so on. So this last approach says, okay the context of being mobile is different than anything else. People want to do things differently when they’re out and about. So we’re gonna reformat our content to cater to that experience. We’re gonna present and entirely different experience, and altered experience perhaps to that of the desktop that addresses the specific needs of being mobile. The arguement I make in the book, I guess coming full circle with these approaches is, I often get asked the question “Well what’s the best approach then Camerson?” I don’t know. And you ask 20 different people in this industry and you’ll get 20 different answers. Right now I think the most feasible approaches moving forward are the first approach, do nothing, and the last approach, to create mobile optimized content. The arguement being is one, you need to understand first of all the context of mobile users and therefore adapt that experience to that context. But at the same time you have alot of capable devices out on the market that may be able to render a full experience that users are used to elsewhere.

    Paul: I mean you talked there about context and in particular the fact that peole might be using it one handed or whatever else. What are kind of the major differences that you are seeing between kind of a user experience designed for the desktop compared to user experience designed for the mobile device? How do they alter? What should we be doing differently?

    Cameron Moll: Well I think that the key phrase here is mobile right. So Barbra Ballard, I quote her in the book, I love her quote that essentially says that when we’re talking about mobile it’s referencing the user not the device. And I think if we start there saying okay mobile is about the user not necessarily the device that they are using but the user. We then start to understand. Okay what is this user trying to do? Where are they? What are the limitations that they confront? And what are the oportunities that are provided through mobile that might not be provided elsewhere? So, it’s not about how do we make this experience similar to the desktop, but how is it different? How do we make it different and how do we welcome that different experience? So this idea of context, it’s this idea, you know, you have this great content, and we hear this phrase “content is king.” Well I argue that context is king. Cause when a user is mobile that content is of little value if you ignore the context in which it is being used. That inevitably leads to the question. What are the needs? What are the problems? What are the tasks that users may encounter in an environment of mobility. Then that leads to what are the opportunities that mobile provides for that given context. For our content, for our company that the PC doesn’t.

    Paul: Yeah. I mean it’s a very interesting area because it’s almost somethign you need to address on almost an individual project basis. Looking at what content you’re working with, and working out what of that content is actually relvant to a mobile device and which isn’t. I mean you use an example about that somebody’s probably not going to want to look at your portfolio page on your personal website on a mobile device. It’s just not the right context. I guess that’s what your getting at there.

    Cameron Moll: Right. You bring out a very interesting point and that is, let’s say a given company. Let’s say you and I as developers are working within an organization right. And we’ve got 20 projects that we manage. Something you said earlier keys to the point of looking at those 20 applications or websites and saying okay first of all which of these 20 apps might be relevant to someone being mobile. We cut that down to say 5 or 6 or whatever the number becomes. Within those applications or sites if we’re talking about existing content here within those applications or websites it’s those 5 or 6 as being perhaps suitable to mobility. We then look within those entire applications, so within a given application for example that might have 20 different tasks that a user does with that application. We then say okay which of those tasks are relevant to someone being mobile. So it’s this process, at least with existing content, looking at what are the applications we provide and within those applications what are the features that are going to be relevant. Now what that also ignores though is the fact that we’re not saying what are new opportunities? What applications have we not developed that might cater to mobile? Or within an application that we have developed, what opportunities such as location awareness might be provided to a user that we just haven’t even thought about it.

    Paul: Yeah. I mean that whole about the fact that you get into this mentality that a mobile device is a cut down version of what you provide on the desktop. Actually, there are opportunities to do stuff on a mobile device that isn’t actually possible on a desktop and the location aware stuff is a good example of that I guess.

    Cameron Moll: Right exactly.

    Paul: Okay. So lets say as a web designer I’m beginning to get a bit excited about the mobile web. It’s obviously the way that things are going. You provide some excellent statistics in your book about take up levels of mobile devices and I’ve cribbed those and used them on the show before. So I think that there is a lot of people that are listenin to the show and going yeah this is something that I am really quite excited about. But where do I start? What kind of technical skills to I need to develop mobile websites? Is it enough to just know standards based design? Or is there other thins I need to know as well?

    Cameron Moll: You know that’s a perfect question. If you look at where we are at now today it’s totally different then say 4 or 5 ago. I remember the same hype 4 or 5 years ago where people were saying mobiles coming. Developing websites for mobile devices is the next big thing. It just kind of died out. I think largely it was due to the fact that back then you still had to develop in WML, which is not a cryptic language. It actually provided a lot of clarity and unity to the mobile web environment 4 or 5 years ago. But at the same time it required that a lot of us had to learn a new language in addition to HTML or CSS. That’s no longer the case. So this second time around when we hear this hype about the mobile web, to me at least it feels much more real. Because now we have again, as I mentioned earlier, most devices out on the market, in fact nearly all of them support HTML, XHTML, and some level of CSS. So that means that you and I, we already know HTML. We already know CSS. We can take that knowledge and start developing content for mobile devices. Whereas 4 or 5 years ago we had to learn a new language just to get over that barrier of providing content. So the good news is, for the most part, really if you know standards based design and development techniques, you are 90% there. I think the other 10% is left to understanding context. So trying to understand what those limitations are with mobile devices and mobile users. And also looking at the opportunities. so again we’re talking about smaller screens, data entry. Those being limitations but at the same time location awarenes. Users just want to do things different. They’re out on the go, which can be a great advantage depending on what kind of content you’re providing. So I think the good news here, long story short, yes. You and I can just build on the knowledge we already have if we just start to understand just a little bit about what the users are doing.

    Paul: I mean you say. It’s interesting some of the words you use. You say ‘for the most part.’ Or ‘some browers understand CSS.” And I think that’s the other big fear that people have when they start investigating the mobile web, is the huge plethora of different browsers and devices and all of this kind of stuff. And it seems like how the hell am I supposed to test on that. It’s impossible to test on every conceiveable device and every conceiveable browser. Where do you start? Where do you put your initial efforts?

    Cameron Moll: You know when I first started talking about mobile I think I was a bit to pessimistic in that I would stand up, say in a conference or in an article, and say okay if you’re going to test for mobile devices be prepared to test on dozens of browsers and if you think 4 or 5 desktop browsers. And getting consistency right for those is difficult. Wait till you see the mobile web. I’m a bit more optimistic now. I hope the book at least comes across that way and when I talk about it at conferences it comes across that way. And the reason being is this. There are some pretty easy ways to deal with that challenge of consistency. Of testing for mobile devices. Of just developing content period for mobile devices right. So you and I, you use probably the web developer extension for Firefox. We both probably at some point used Opera. Both of those browsers with those extensions and plugins can, at least at the very start, render and initial small screen preview. They both have options to be able to do that. So starting at the very least we can develop, again because we’re developing in XHTML rather than WML, we can within the browser at least do a very quick test to see roughly how it’s going to show up for the user. After that, once you’ve got at least the markup structurally sound you can then jump over to emulators. Now there are plenty of online emulators. .moby provides one. Opera mini provides another and there’s several others out there. But also there’s desktop software that you can download to be able to emulate mobile devices. So then taking 5 or 10 mobile devices I can now test how my content’s going to render, and it’s very close to how it will actually render on the device. But you can’t stop there. The last step has to be actual devices. And I think this was what was insurmountable for me starting out as a mobile developer. At least a beginner saying oh gosh do I have to go out an purchase 100 devices to be able to test my content. Well fortunately you can get away with 5 or 10 devices. If you can get 5 or 10 devices that vary widely. By that I mean one being a very basic phone, another one being a PDA,another one being a popular device such as the Razor. If you can get 5 devices that vary widely, 5 to 10, the chances are that that content is going to render well for most devices out there on the market. That will get you close enough. A lot of that is based not just on my personal preference but on the case study that I offer in the book. That is the Yahoo! website for the FIFA world cup last year. They took that approach. They said you know it would be difficult to test on 100 devices but we think if we can get 5 to 10 widely varying devices that chances are our content is going to display well for a global audience. Which indeed it was for that particular website. So that’s the arguement that I’ve made. I’ve hear others make that arguement as well. And it’s not difficult to get that number of devices right. So you can probably get 3 to 5 from yourself, from friends, collegues and so on, on loan for a couple hours. If you’ve got a blog you can ask for volunteers to do testing. I’ve done that before and it works pretty well. And then finally anyone can hop on eBay and do a search for unlocked mobile phones and purchase phones for an affordable price and get you know 5 to 10 devices. That’s how I did it. You know I hopped on eBay. I bought about 5 phones that were unlocked and then I just take my SIM card and swap that around the phones when I am doing testing. So it’s really not that difficult once you’re done developing your content to make sure that it renders well for mobile devices.

    Paul: What do you think about the kind of growing thing that we’re seeing at the moment about designing mobile sites for specific devices? Like the iPhone. Do you think that is a bad route to go?

    Cameron Moll: You know I’m not going to say it’s a bad route to go. But I do question it’s integrity. Three years ago or so, when I bought, well this was a little bit after I bought my Treo, for example which is a feature rich PDA. There were all kinds of Treo specific sites that had been developed. So you had something like, lets just say you had something like ESPN.com/mobile/pda/treo would be the web address for that content. And it was formatted just for that device. When you think about all the devices that are out on the market you then realize that that becomes a big chore to try to develope content for X number of devices. Now I think with the iPhone at least you have that same experience being repeated. For me it feels in part like you know years ago when we hit up a website and it said best viewd with Internet Explorer 4.0 or something like that. You know that is what we’re seeing now with the iPhone. Granted the iPhone provides a much different experience and a much richer experience, which is great, but at the same time I worry that we are spending a lot of effort on a device that 1. Is not a market majority and 2. The device itself, the iPhone itself might change at some point in the future. I might have a larger screen. It may render content differently. Which then will require that we go back and rewrite that content yet again. So the arguement I’ve made is if it makes business sense to develop and iPhone optimized site well more power to you. Go for it. But I advocate as a default creating content that can render on as many devices as possible. Not necessarily just one device.

    Paul: Cool. Thank you so much Cameron. That is incredibly useful. Where can people find out more about your book then?

    Cameron Moll: The web address is mobilewebbook.com or they can find a link from my website cameronmoll.com.

    Paul: Excellent. It’s a .PDF book that you can download instantly. Now waiting around for delivery at $19. The best thing of all is it’s nice a short. Just over 100 pages. Isn’t that right? Something like that?

    Cameron Moll: That’s correct. And I’ll give your listeners a heads up that we’ve got a print version coming out in October to be announced soon.

    Paul: Oh that’s excellent. So you’ve got the choice either way. Alright thank you very much for coming on the show Cameron. We’ll get you on again in the future no doubt.

    Cameron Moll: Hey thanks Paul.

    Back to top

    Show 75: Christian Bears

    Marcus is back and talks about what to do if a client doesn’t pay. I look at clearing floats in CSS and we have Richard Rutter on the show giving us the lowdown on good web typography.

    Play

    Download this show.

    News and Events

    Blogger’s code of conduct

    This week has seen Tim O’Reilly pushing hard for a code of conduct among bloggers following the vicious online attacks against Kathy Sierra. Although, like everybody else, I was shocked by what Kathy has been through and although I respect Tim’s endeavors to change the current situation, I struggle to see what good a code of conduct will really do.

    Tips for Bloggers

    Tom Johnson has drawn together 20 principles for a successful blog based on feedback he has received from numerous top bloggers. If you are new to blogging or trying to revive a failing blog this article is definitely worth checking out.

    120 Adobe Photoshop tips

    Talking of tech tips, check out this superb document of over 100 things you never knew you could do in Photoshop. As a regular Photoshop user I was shocked by just how many of these I was unaware of. For example did you know that you could:

    • Straighten a crooked image using the measure tool?
    • Access key image function by right clicking the top bar of an image?
    • Modify the text on multiple text layers at the same time?

    CSS Vista

    The wonderful folks over at Site Vista has released a superb new tool that allows you to edit CSS files and instantly see the changes in both Firefox and Internet Explorer simultaneously. Very useful indeed although currently it is only available under windows.

    Client corner: Resolving payment disputes

    This week Marcus answers a question from Dan in Texas. Dan has a client who hasn’t paid and so is asking whether he should take their site down or not.

    The core of Marcus’ approach is to ensure good dialogue with the client. He covers the idea that prevention is better than cure by establishing clear contracts up front but then looks at what steps can be taken if things do go wrong. We also when this happened to us at Headscape and how we resolved the dispute.

    Marcus also broadens the discussion to look at it from the client’s perspective. He investigates when a client should withhold payment and how this should be discussed with the web agency.

    Ask the expert: Richard Rutter on web typography

    Richard Rutter is one of the three founders of Clear:Left and is passionate about typography. In fact he is so passionate that he has produced a practical guide to web typography which is freely available at webtypography.net. He therefore seemed the logical choice to introduce us to the basics of using typography on the web.

    Agony Uncle: Clearing Floats

    I got sent a question by Dan in Texas ages ago and I promised him we would tackle it on the show. Unfortunately I totally forgot about it until I read this recent article by Robert Nyman a couple of days back. Dan was asking about dealing with floats in CSS and how to ensure that the parent of a floated item contained it. This was exactly what Robert was talking about in his post and so I have shamelessly used his thoughts in the show to answer Dan’s question. Thanks Robert ;)

    Review: Question Form

    I am a great believer in giving users the chance to feedback their thoughts on a site. However its not always that easy. Online forms and email are hard to collate and all of the survey services I have found online in the past are crap. However, recently I came across a site called Question Form which really does stand head and shoulders above the competition

    • It is incredibly quick and easy to put a survey together
    • It provides a painless user experience to the user
    • You have complete customizable control over how your form looks
    • It provides excellent statistics as well as access to individual responses
    • It offers alerts of new responses via email, RSS and even SMS

    The basic account is absolutely free and the pro accounts start from as little as $10. If you are thinking of adding a survey to your site then you should definitely check these guys out.

    If you fancy trying a form out then take a second to complete the boagworld podcast survey.

    Show 75 Script

    In last week’s show I posted the rather muddled notes I use when recording the show. This was to make up for the less than perfect show notes I provide here. This idea seemed popular so here is my script from this week’s show.