Why whitespace matters

Designers love it, website owners want to fill it. Whitespace seems to be one of the most controversial aspects of design. Why then is it so important and how can we ensure it is maintained?

Whitespace is a fundamental building block of good design. Its one of the first thing any visual designer is taught. However, to many website owners it is simply a waste of space that could be used to better promote their messages, services or products.

In this post I aim to explain why whitespace matters and how to keep whitespace in a design without compromising business objectives. However, before I can do that we need to be clear what we mean by whitespace.

What do designers mean by whitespace?

When designers talk about whitespace, they actually mean negative space. In other words the space between screen elements. That is not always ‘white’. This space maybe a colour or texture but either way it is space within a design that does not include screen elements. Below you can see a couple of examples of ‘whitespace’ in on various websites.

Apple Homepage

wearefixel.com

With whitespace clearly defined the next questions becomes “why does it matter?”

Why whitespace matters

Whitespace is a fundamental element of design for good reason. Used well it can transform a design and provide many benefits. Some of those benefits are purely aesthetic while others have a tangible impact on the effectiveness of your site.

Below I share four benefits from the latter group:

Improved legibility

The most obvious benefit of whitespace is that it increases legibility. You only need to compare the examples shown in Mark Boulton’s superb article on whitespace to see how a good use of whitespace can make an enormous difference to legibility.

Two paragraphs with different line spacing and margins

Higher comprehension

Believe it or not whitespace between paragraphs and around blocks of text actually helps people understand what they are reading better. According to research in 2004, this kind of whitespace increases comprehension by almost 20%.

instapaper for the iPad

Increased attention

Whitespace can also be a powerful way of drawing the users attention to a particular screen element. To a non designer the most obvious way to make something stand out is to make it bigger. However often surrounding the item with whitespace can be just as effective.

Simple publishing

Creates the right tone (sometimes)

Finally the use of whitespace can be a powerful way to communicate elegance, openness and freshness. Obviously this isn’t always the design look and feel you wish to communicate. However when it is, you cannot do better than having loads of whitespace.

David Bushell's website

Hopefully by now the benefits of whitespace are obvious. However even with the best intentions in the world, whitespace can often be pushed out of a design. In order to prevent this we need to understand why it happens and how to combat it.

The three enemies of whitespace

I believe there are three primary reasons why whitespace is pushed out of a design. If you understand what these are and how to deal with them then your design stands a better chance of maintaining the whitespace it needs.

Lets start by looking at the fold.

The fold

Whitespace is often pushed out of a design because somebody within the organisation believes users do not scroll. The result is that they insist as much content as possible is placed high on the page sucking any whitespace from the design.

However the belief that users do not scroll was proved false as early as 1997 and more modern studies have shown that users routinely scroll to the very bottom of pages.

In addition it is important to remember that we do not know the point at which users have to start scrolling. This is dependant on operating system, browser, resolution and many other factors. In the end worrying about ‘the fold’ is a false economy.

That said, it is still good practice to ensure the primary calls to action and content are placed near the top of the page. However, this is not to suggest other content will be ignored. What is more, placing too much content high on the page will reduce the prominence of key content because it will be overwhelmed by the proximity of lesser content as discussed in ‘increased attention’ above.

Trying to say too much

Another common reason for whitespace being removed from a design is because there is a desire to communicate too much information at one time. Most website owners have a lot they want to say but unfortunately users only have limited attention. It is therefore important that you ‘spend’ this user attention wisely.

The Google and Yahoo homepages are good examples of this problem. Both Google and Yahoo offer similar services. However, they take radically different approaches to their primary homepages.

As you can see from the screenshots below Yahoo tries to get the user to look at everything at once. Google on the other hand recognises that users have limited attention and so focus on their primary offering first – search. By looking at the two homepages (let alone their relative incomes) it is immediately apparent which is more effective.

Image of the Yahoo and Google homepage side by side

In order to drive this point home I suggest allocating yourself (or those within your organisation pushing for more content on your homepage) 15 points of user attention. Each item you add to the page costs 1 point. If one screen element is more important than another you need to assign it additional points to make it stand out. With only limited points available it quickly becomes obvious you cannot say everything on the homepage and so whitespace does not need to be pushed out of the equation.

Politics

Of course even with the best will in the world sometimes a website owner can be forced into adding too much content to a page because of internal politics. When somebody higher within your organisation insists his or her pet project appears on the homepage there is little you can do about it.

This is where the book ‘Laws of Simplicity‘ offers some great advice. If you cannot remove a piece of content then try shrinking or hiding it.

Take for example the approach we used on the Wiltshire Farm Foods homepage. For various reasons it was decided the homepage should include food and health News despite the fact that this information distracted from the primary call to action (buy a meal) and was not something the vast majority of users were interested in.

Our solution was to have this content present but hide it unless the user chose to view it. A simple piece of javascript enabled the user to expand it on request. This hid the content from those not interested and enabled the design to have more whitespace.

Food and health news expanded

Food and health news colapsed

Conclusions

There is little doubt that whitespace is a valuable design tool that can make any website more effective. What is more I see no reason it needs to be such a point of friction between designers and website owners. I believe any design can maintain its whitespace while meeting a site’s business objectives.

But what do you guys think? What problems have you experienced with whitespace? Why do you believe whitespace in design is so important? Let’s have a flame war in the comments below ;-)

No Money, No Matter

As we begin to feel the fallout of the econmic crisis and some organisations cut funding for their websites, how can we be more effective in the way we work.

Once again I spoke at IWMW this year and as the whole conference was on ‘The Web in Turbulent Times’ I thought I would address how to achieve more on our websites with less money.

Originally this talk was going to be based on my post ‘5 Options When Website Budgets Get Slashed‘. However, as I prepared the focus shifted to something more upbeat.

As I prepared I honestly became excited about the possibilities of having less money to spend gave! It provided a valuable opportunity to slim down bloated websites, to start thinking strategically and to engage with web design agencies in a new way.

Anyway I hope you enjoy…

Update: Apologises for the poor audio 4 minutes in. It only lasts a couple of minutes.

Watch the actual presentation at IWMW


Thanks to Shutterstock who provided the vast majority of images in this presentation.

This presentation is heavily influenced by the following posts. If you cannot view the video then I suggest you read these.

The Three Secrets of Simplicity

Many website owners damage their sites by continually adding features and content when they should be simplifying. In this post I reveal why that happens and how to simplify your website.

Controlling The Website Animal

Has your website grown into an out of control monster? Does it consume your time and energy with its mountains of legacy content? If so its time to put it on a diet.

No Plans To Redesign Your Site? Now Is The Time To Hire A Web Design Agency

Many website owners hire their web design agency at the wrong time. Instead of hiring a web designer when you need work done, hire them when you don’t!

If you want to know more about how Headscape works with its clients drop me an email.

Web Design News 17/05/10

This week: how design and content work together, running a design workshop, the importance of control and top tips for effective landing pages.

How design and content should work together

Relly pointed me at a superb article this week that should be required reading for all web designers and website owners. Entitled “Expanding our Definition of User Experience Design” it asks one simple question: “when did user experience design become just about visuals?”

It’s a fair question. Most web designers like to think of themselves as user experience designers and most website owners are keen to create a great user experience. However, both parties are thinking purely in terms of visual design. Content is often nothing more than an after thought.

The author of this post argues extremely convincingly that user experience design is about both visual design and content. If we wish to improve the user experience on our sites we need to consider the whole package. As Zeldman puts it…

Content informs design; design without content is decoration.

She goes on to look at practical ways those of us who truly care about the user experience can begin to convince others of the importance of content.

Ying Yang Sign

filmfoto, Shutterstock

One suggestion that resonated with me is that we should stop treating content as something separate to design. Instead of making things like content strategy an optional extra in our proposals, we should make it a required part of any consideration of user experience. This is certainly an approach I had not considered before, but it makes a lot of sense.

The more I think about this the more I feel that an agency who sells user experience design without considering content is not in fact selling UX design at all.

Running a design workshop

As I have said before on the show, Headscape runs a very inclusive design process. We believe in allowing the client to see design ideas early and in including the entire project team in design decisions.

We believe these things are important to ensure everybody is moving in the same direction and towards a common goal.

MiniToy team standing in a circle, over arrow signs aiming at a target sign at the center of the team

Antonis Papantoniou, Shutterstock

It is a viewpoint reflected in a UXMatters post entitled “Achieving Design Focus: An Approach to Design Workshops.” The post begins with the following introduction…

Stakeholders with business, design, and technology viewpoints can pull products in different design directions.

Creating a focus around design goals and asking and answering the hard design questions as a team is an effective way of coalescing a team around one design direction.

Of course the question now becomes: “How do we run this kind of inclusive process?” As the post suggests, the answer lies in running a design workshop…

A design workshop creates an environment in which stakeholders with different skills can work as one team to deliver a design solution that will help make their product successful.

The post then goes on to outline how to run an effective design workshop.

If you are a web designer this is certainly a post worth reading. We have found that design workshops are a superb way of improving engagement with the client and identifying problems early in the process.

If you are a website owner engaging a web designer, I would insist that they include a design workshop as part of their process.

The importance of control

Our next post is a great article about control on 52 Weeks of UX.

Essentially the post is talking about the importance of simplicity, a subject generally overlooked by most website owners and designers. As the article puts it…

One of the things that makes [simplicity] so difficult is the ever increasing demand to add more features, more settings, or more controls. While all these things are intended to make it easier on the user, it actually serves to create a state of discomfort and even momentary confusion and anxiety.

It goes on to discuss something called Hicks Law…

Hick’s Law is a design principle that states: “The time it takes to make a decision increases as the number of alternatives increases.”

In other words, the more choices we offer a user the more anxiety they feel about making the right decision.

studio mixer

Thomas Staiger, Shutterstock

This can be applied to web design in a couple of ways…

  • Navigational choices – too often websites overwhelm users with navigational choices. A large number of options is fine if the right choice for the user is obvious. Too often this is not the case with sections potentially overlapping and content not always where one would expect. As a general rule of thumb, less navigational options are better.
  • Personalisation – Website owners often seem obsessed with allowing users to personalise their site. Setting aside whether users really want to be able to personalise a site they might only visit once or twice a year, there is a bigger questions of whether personalisation helps or hinders. My feeling is that the additional complexity and options personalisation introduces can often cause more confusion than it solves.

Read the article for yourself and see how more options does not always equate to more control.

Top tips for effective landing pages

I want to conclude today by changing subject away from user experience to look briefly at marketing and in particular landing pages. As a recent post on econsultancy says…

If you want to do online marketing well, you need to get the basics right, and few things are more important than writing effective landing pages.

It goes on to explain that…

A landing page is the page someone sees when they click on an advert, usually next to search results but elsewhere, for example, within a marketing email.

In other words it is the first page a user encounters after responding to a call to action contained within a marketing campaign. As a result it is extremely important.

Netflix landing page

The post sums it up beautifully when it says…

If you’ve invested money in getting people to your pages then you need to make sure the page they land on makes the most of that investment.

The article then walks us through 10 tips for creating a more effective landing page. My favourites from the list are…

  • Have a clear goal
  • Make your call to action obvious
  • Don’t ask too much
  • Trust nothing, test everything

It’s a great list and ideal for somebody looking at landing pages for the first time. If you have been pushing people from your ad campaigns through to your homepage it is time to think again and this article is a good place to start.

197. Energise your ecommerce

This week on Boagworld: We examine ways to improve the conversion rate on your ecommerce site, review CSS Mastery 2nd Edition and take a look at Zen Coding.

Play

Download this show.

Launch our podcast player

News

Lessons in simplicity and constraints

I am a great fan of simplicity and constraints. I have written enough about simplicity before so I won’t bore you again. However, unlike most people I enjoy the constraints of a brief and limited timescales.

I was therefore delighted to read a short little post on the 37Signals blog which summed up these two concepts so brilliantly. They wrote:

The easiest way to force the insight of what can be lived without is by playing a game of constraints: You have to ship on Friday, you can’t add more people, you can’t work nights. Fixed resources, fixed time. All that’s left to give is scope. It’s amazing how creative the cuts and sharp the sacrifices become when you’re backed into a corner. It’s when you have to choose that you make the best choices.

In other words constraints force simplicity. This is a mantra I can get behind.

They also end with an important point for website owners:

For every 1 day estimates of a task, there’s a simpler version of that you can do in 3 hours, and an even simpler still you can do in 30 minutes.

So next time you hire a designer and they ask your budget, tell them. This is a key constraint that will influence how the designer builds your site or application.

Making better use of your footer

Fat is fantastic – at least where footers are concerned. For a while now there has been a move towards ‘fat footers’. These contain so much more than the privacy policy and copyright statements of days gone by. Todays footers are full of information. The question is, what exactly should we put into our footers?

Designshack has an excellent post that gives you 10 ways to use your fantastically fat footer.

Some of the ideas are suggestions for content (such as using it for social media links or ‘about me’ content), while others are design ideas (such as using illustration or animation).

Personally I use footers for two purposes:

Secondary Content - Additional information that is not apart of the main content on the site. For example in the case of Boagworld this includes a blogroll, great content on other sites and stuff I am up to. This isn’t really apart of the boagworld blog. Its extra content readers might be interested in.

Calls to Action – I think footers are a great place to put calls to action. For example on the Headscape website, we have the contact form at the bottom of the page. Hopefully once people have read our compelling content they will be inspired to complete the form. 37Signals used to use a similar approach on their own website.

How to guarantee an improvement in your conversion

Later in this show we talked about ideas that might improve the conversion rate on your website. However, if you want a certain why of improving your conversion rate (or your site in general) then read: An Introduction To Website Split Testing.

Split testing (otherwise known as A/B testing) is the process of showing different users different versions of your site. You then monitor how these different versions affect user behaviour in order to find the best solution.

It is a guaranteed way of finding the best solution through a process of trial and error.

However despite its success, few website owners use the technique. I think it is generally perceived as time consuming and expensive.

Although it does take time to produce multiple versions of an idea and test it, actually running the test is fairly inexpensive. In fact Google provides a split test tool that is absolutely free. Also, there is no reason not to split testing an approach before you roll it out. After all it has already been built anyway.

To learn more about the benefits of split testing and how to get started, definitely read this post. It will inspire you and set you on the right path.

How to make sure you’re regular… at blogging

When I write about communicating with your audience in the Website Owners Manual I say:

The key is regularity, rather than frequency. Users should come to expect your communications. Communicating on an ad-hoc basis can be damaging, especially with blog posts.

This is a tone echoed in a post on ProBlogger this week. Tips on How to Keep Your Blogging Regular, emphasises the importance of regular posting before giving 5 ways to ensure you keep the habit up.

These include:

  • Don’t bite off more than you can chew
  • Regularity is more important than high frequency
  • Under promise and over deliver
  • Build a schedule
  • Have someone or something manage you

After six years of blogging, I can say I agree with each and every one of these points. This is great advice if you are blogging on a personal site. However, it is crucial if you are running a corporate blog. Read and take note.

Back to top

 

Feature: Increase your ecommerce sales

This week’s feature comes from a blog post I wrote some time before Christmas. It looks at 8 ways you can increase your ecommerce sales using as an example a site we have worked on called Wiltshire Farm Foods.

Read the original post: 8 ways we increased ecommerce sales by 10,000%

Back to top

 

Reviews

CSS Mastery 2nd Edition by Andy Budd

Read the CSS Mastery 2nd Edition review

Zen Coding

Read the Zen Coding review

Back to top

 

Lessons to be learnt from the new Google homepage

Have you noticed the new Google homepage? It is now the simplest it has ever been. I believe there is a lot we can learn not only from this simplicity but also to how Google has achieved it.

There is a lot of debate about the new Google homepage with its fading of secondary content. It amazes me that some web designers see it as a mistake. Personally it perfectly sums up my attitude towards simplicity in web design, and I would like to see more website owners have the confidence to follow suit.

However, as Leesy points out in the Boagworld forum, it is not just the simplicity of the google homepage that is exciting. It is also the way they have achieved that simplicity. It is their attention to detail.

8 ways we increased ecommerce sales by 10,000%

Discover how Headscape increased the sales of Wiltshire Farm Foods by 10,000% and how you can do the same for your site.

A 10,000% increase in sales over 5 years. Sounds incredible doesn’t it. Just to make that an even more incredible, their average customer is in their 80s! Who said the elderly don’t use the internet.

When we started working with Wiltshire Farm Foods their monthly revenue was a 100th of what it is today.

Of course in reality that success was not down entirely to us. Matt Curry, our client at Wiltshire Farm Foods has put his heart and soul into that website and as I say in Chapter one of the Website Owners Manual, it is the site champion who makes or breaks a site.

The organisation has recognised the importance and power of the web for their business and continually invested in it both for development and also in site promotion. If they had not had the foresight to do that then the site would have failed.

So what do I put the sites success down to? Well, honestly that is hard to say. There are so many factors. However below are 8 things that have without a doubt made an enormous difference.

1. Remove clutter

WFF Product Menu

Too many ecommerce websites are overwhelming. Everything is screaming for the users attention. There are offers, deals and recommended products wherever the user turns. Amongst all of this confusion it is hard to find what you want.

Amazon is like this and so we all naturally presume it must be right. However, one of the first conclusions we came to when working on Wiltshire Farm Foods is that they are not Amazon. Nobody is. You cannot presume that what works for one will work for all.

The emphasis of the Wiltshire Farm Foods website was on helping users find and buy the products they wanted. It is not in anyone interest to overwhelm them with stuff that only we wanted them to buy. It has to be the customer first.

This meant simplifying the site. With so much content shouting for attention, users could not find anything. We had to remove distraction and focus them on key tasks.

Take for example the site’s navigation. We actually hide away some of the ranges offered by Wiltshire Farm Foods. Insanity you might think. Surely this made it harder for users to find what they want? Admittedly for a small minority it did. However, hiding the less popular ranges (like soup) we could highlight the ranges that accounted for the vast majority of sales.

WFF Product Listing

The same was true for product listings. Some users were interested in a lot of different information from dietary content to customer ratings. However, this additional information made life harder for the mainstream users who were only interested in a photo, description and price.

We therefore decided to move all of this additional information on to the product details page. That way it was accessible for those who wanted it without distracting the majority.

WFF Shopping basket

The final area we significantly simplified was the shopping basket and checkout process. As I explained in my post on ecommerce lies, once the user has made the decision to purchase you need to remove all distractions.

The shopping basket is not the time to up-sell or cross selling. It’s not even the time to provide a navigation bar to other products. At this stage you want the user to do one thing and one thing only, proceed to checkout.

Talking of the shopping cart, we also focused heavily on getting it to stand out on the page.

2. Make sure the shopping cart stands out

Too many websites hide the shopping cart away. However, this is a crucial step in shopping and the first of the checkout process. In affect the shopping cart is an ecommerce websites primary call to action.

With this in mind we wanted to make the cart as prominent as possible. We achieved this in three ways:

  • We made the shopping basket button visually different from the rest of the site using colour
  • When items were added to the basket it was visually updated (see providing visual feedback video)
  • We tethered the basket summary to the top of the screen so that it would always be visible even when the user scrolled (see below)

As you can see from the video below, the tethering proved particularly effective and makes the call to action obvious at all times.

3. Provide visual feedback

One of the primary questions in the mind of users when interacting with a system like an ecommerce website is “did I do that right?”

Whether it is adding an item to the basket or filling in a login and password, users are concerned that they are doing things wrong. This is particularly true with a more elderly audience who have not grown up using computers.

It is therefore important to reassure users as they progress through the site. This can be achieved by providing visual feedback when the user takes an action.

For example on the Wiltshire Farm Foods website when an item is added to the basket the user gets multiple types of feedback to reassure them the item has been added:

  • The photo of the item is highlighted
  • The ‘add to basket’ button updates
  • The image of the item visually moves towards the basket
  • The basket itself updates

As you can see from the video below, the user is in no doubt that the item has been added.

However, the visual feedback does not stop at the basket. When the user is confronted with a form they are clearly shown what fields are required, and which have been completed correctly or incorrectly. This information is updated without the need for page refresh.

Form field feedback

4. The bigger the better

An image can say a thousand words. It is therefore unsurprisingly that the product shots on an ecommerce site are massively important. Even if your audience are not the elderly with failing vision, it is still important to have nice, big, clear shots of your products.

In the case of Wiltshire Farm Foods we have taken this principle to the extreme.

As we saw earlier the product list is essentially a grid of images with the addition of some basic product information. The image sells the meal in a way words never could, and the grid allows us to have large images. However, we did not stop there.

As you can see in the video below, clicking on a product listing displays an even bigger image in the product details. We also allow users to click on this larger photo and display an even bigger version that expands to fill the width of the page. This leaves the user in no doubt about what they are getting.

Of course this is dependant on having decent shots of the product. If you can only invest in a single thing for your ecommerce site this would be it. Spend money on getting the best photography you can. Its worth every penny.

5. Make buttons and links obvious

A continuation of the ‘bigger is better’ thinking can also be applied to buttons and links. Admittedly this might be exaggerated by the Wiltshire Farm Foods audience, but in my years of user testing I am constantly amazed how often users fail to spot important links and buttons.

You will therefore notice how ridiculously big some of the links and buttons on WFF are. However, size isn’t everything (no innuendo intended).

We also gave a lot of attention to appearance and wording too. For example, notice in the image below how the link looks like a link. Also we did not rely on the link alone because the wording of the link doesn’t communicate the action. We therefore added a button that communicates how clicking it will allow the user to ‘view all of our beef meals’.

Link to Meal catagory

The descriptive nature of buttons can also be seen elsewhere on the site. We are very conscious that users do not always read copy explaining buttons and so the button itself needs to communicate all the information required.

Take for example the image below. If all you read was the two buttons you would know exactly what choice was available. The surrounding text is entirely optional.

Example buttons

6. Always be there to help

An ecommerce transaction raises a lot of questions in the minds of users:

  • Is delivery free?
  • What if I don’t like the product?
  • Is my credit card information secure?

In addition there are questions about the site itself and how to use it.

Surprisingly many ecommerce websites seem reluctant to help their customers. Delivery and return policies are buried. Reassurance about security is limited to a tiny badge or padlock. And most importantly you have to search high and low for a phone number.

We were determined to address these problems on the WFF website. In the end we settled on three approaches:

1. The one stop solution

Our first move was to bring together all help into a single section of the site that was prominently displayed in the navigation bar. This avoided the user having to hunt around for different pieces of information.

We then looked at the enquiries received by WFF customer support and used these to identify the top issues. These where then prioritised and presented on the help homepage.

As you can see the top question was “how do I contact you” so we prominently featured the telephone number. This was then followed by questions about ordering and the website.

Help Section

2. The getting started guide

We also took an idea from the video games industry and provided users with a tutorial. However, the idea of the tutorial (which we called a getting started guide) was to guide users through their first transaction.

This is displayed prominently on the homepage and gives users who are overwhelmed by the site a starting point.

Get Started Content Area

3. Context sensitive help

Finally, we also wanted to provide context sensitive help throughout the purchase process. These are small pieces of microcopy found throughout the site nudging users in the right direction.

Example of context sensitive help

7. Handle errors gracefully

No matter how well designed your site or how much help you provide, things will inevitably go wrong.

If you do not want to lose the sale, you must handle the error gracefully and reassure the user they can still continue.

This is particularly important when working with the elderly audience found on Wiltshire Farm Foods. However, it is always wise to give users as much help as possible and not make assumptions about their abilities.

Below are a couple of examples of how we handle problems on the site.

Error message

The first example is an error message that appears when the user fails to login. There are several such messages across the website. However, they all have two characteristics in common:

  • The message is highly visible – This is achieved either by strong visual branding (as above) or by positioning the message next to field being edited (as in context sensitive help) .

  • The message tells the user what to do
    – It is important that messages clearly communicate how the user can overcome the problem.

The example above is probably a little wordy for most websites. Fortunately, our user testing has shown that a more elderly demographic actually reads instructional text! We can therefore take some liberties.

Example of empty search results

The second example of an error message appears when the user has entered a search term that returns no results. The danger in this situation is that users will conclude the site does not have whatever it was they searched for and so leave.

In reality there are number of reasons why no results might be returned. In such situations provide some guidance on searching. We also went one step further by including a phone number in case all else fails.

8. Communicate your value add

The final lesson we have learnt from working on WFF is the importance of communicating what extra you offer customers.

The problem is that there are so much choice for consumer. How for example could an organisation like Wiltshire Farm Foods compete with such a well known brand as Tescos?

Tescos sell frozen meals and a lot more besides. They deliver to your door and have a much broader range of products (although admittedly not frozen meals).

What enables Wiltshire Farm Foods to compete is their value added service. These include:

  • Police checked delivery staff
  • The option to pay cash on delivery
  • The ability to place your next order with the driver
  • Delivery staff will even unpack meals and place them in your freezer

When you are trying to each an elderly audience, these kinds of extra services are a real selling point.

Of course, these USPs are no good if users are unaware of them so considerable effort has been put into clearly communicating these on the site. In fact we are in the process of doing even more work in this area.

What are your USPs and are you clearly communicating them on your site?

Image showing WFFs complete service

Is that all?

So if you follow these 8 guidelines will you increase your sales by 10,000%? The answer is probably not.

In reality there is a lot more that affects the success of an ecommerce business than its website. There is the ongoing communications, customer service, fulfilment, and marketing to name but four.

The 10,000% increase makes a good title for a blog post! However, the percentage growth is not really the point. What matters is that by following the advice here you will be guaranteed to see growth and that is what matters.

However, if I could leave you just a single thought it would be this. Wiltshire Farm Foods looks a million miles away from the busyness of Amazon and indeed many other ecommerce websites. Do not just blindly follow the crowd (or even the advice in this post). Instead learn what your users need and give it to them. It really is that simple.

Of course, you might need some help doing that, but even the answer to that is simple. Give Headscape a call ;-)

The biggest ecommerce lies and how to avoid them

I am amazed at some of the advice I read about building successful ecommerce sites. I seriously wonder who writes this stuff! In this post I debunk 5 common myths.

Of all the sites I am involved in at Headscape it is the ecommerce sites that excite me the most.

How can you not get excited about working on a website where the fruits of your labour are so visible and direct? Do a good job and the website makes more money, screw up and profits decline. There is something wonderfully black and white about it.

With such a measurable and obvious success criteria, you would have thought best practice would be well established and generally accepted. Bad advice would be quickly exposed for what it is and successful techniques would rise to the top.

However, it would appear that is not the case. I am amazed at how bad some of the advice is and how much bad practice exists.

In this post I want to focus on five of the worst offenders, beginning with the belief that you can never give users too much information.

1. You can never give the user too much [Wrong!]

Only recently I was reading an article about ecommerce that actively argued for providing users with as much information as possible.

On the face of it, this sounds like a good idea. The more information you provide, the better informed their decision becomes. However, in reality too much information can be overwhelming and lead to choice paralysis.

Compare for example the experience of buying a computer. For you and me this is a purchasing decision we are very comfortable with. However, for the majority of consumers it can be an intimidating experience. It is a minefield because there are too many choices and options.

Recently I bought a Dell netbook. Even as an experienced computer users this was a harrowing decision. I knew I wanted a low end, cheap netbook, so immediately ignored the plethora of laptops and desktops that could have confused my purchasing decision. However, that didn’t make the purchasing process easier. I still had to choice between the Dell Mini 9, 10 and 10v. I had to wade through technical specs outlining the differences, most of which I found unintelligible.

Screen capture from Dell Website

Once I had made my choice, I was presented with even more details and options. I had to select colour, type of hard drive, size of hard drive, operating system and on and on and on. In fact it even made me approve options where I had no alternative choice!

When compared to the limited and clearly defined line up of Apple computers, the contrast could not be more apparent.

Screen capture from the Apple website

More is not always better. If you want to encourage users to buy, then you need to make their choice a simple one. Remove everything but the most important information and minimise the number of choices available. This is something that has been understood for some time in traditional retailing, but has not filtered through to the web.

One retail technique that has transferred to the web is up-selling. However, you should thing twice about how to implement this technique.

2. Never miss an opportunity to cross-sell [Wrong!]

We all know supermarkets do it. You are queuing at the checkout surrounded by chocolate, magazines and other extras. They hope we will be tempted to pick up something on the way out. You go in for a loaf of bread and come out with a basket full of chocolates and a magazine on interior design. Any marketeer will tell you how effective this technique is.

Photograph of a supermarket checkout

Many successful websites also use this approach very effectively. Amazon is always looking for opportunities to cross-sell, based on its extensive knowledge of your buying habits and those of other users. However, even though it is obvious we will buy items on the spur of the moment, Amazon does not always up-sell.

Amazon recognises that the web is not the same as the real world. Unlike supermarkets, Amazon will not up-sell once users reach the checkout. In fact they are careful to avoid any distractions.

Screen capture of Amazon checkout

When the competition is only a click away you do not have the luxury of asking users to stand in line at the checkout, while you present them with additional products. Unlike the supermarket checkout there is no person to guide you through the process. It is user driven and so has to be as easy, focused and fast as possible.

Yes, it is important to up-sell. However, do it before the checkout process begins. Once the user makes a decision to buy, you need to ensure nothing gets in the way of that transaction. Some opportunities to cross-sell are worth missing.

Of course, there is no reason you cannot encourage users to buy again after the transaction is complete. That is where we need to look beyond the website.

3. Its all about your site [Wrong!]

Web designers want to sell you web site design services. It is therefore unsurprising that they concentrate their attention and advice on the website. However, the website is only one small part of a successful ecommerce business. The heart of successful ecommerce lies in service, not the website.

Don’t become so fixated on tweaking and improving your website that you neglect other areas of the user experience. Good customer service extends well beyond the users interactions with the website. It also includes vital components such as:

  • Email notifications - Do you keep the customer informed about the progress of their order?
  • Telephone support – Do you allow customers to speak to you directly?
  • Returns policy – How easy is it for customers to return an item if they do not like it?
  • Fulfilment – Are you in a position where you can fulfil orders quickly and dispatch them immediately?
  • Complaints handling – How well do you handle customer complaints? Do you go the extra mile?
  • Ongoing communication – Do you regularly keep in touch with customers? Do you offer them special deals and discounts? Is it easy for customers to opt out of these communications?

Customers who receive superb service are considerably more likely to make a second purchase and even more likely to recommend you to friends and family.

Screenshot from Customer Service Matters

Visit Bruce’s blog Now

It is even possible to substantially reduce your marketing spend if you make customer service a priority. Instead your reputation will spread through word of mouth.

Do not misunderstand, I still believe that getting your website right is extremely important. Small things can make a big difference in the eyes of your users. Take for example security.

4. Users care about security… badges [Wrong!]

There is no doubt that users care about online security. In fact there is still a large proportion of people who are unwilling to buy online for fear of credit card fraud. The media has done an excellent job at ensuring the public are suspicious of online transactions, even though they are willing to hand over their credit card in a restaurant.

Whether the users concerns are justified or not, we need to take them seriously if we want people to buy.

Many ecommerce businesses spend a lot of money ensuring their sites are secure. How then do they choose to communicate this massive investment to their users in order to reassure them? – They slap a badge on their website!

Adding a small Verisign or Mcafee badge to your checkout page is not enough to alleviate users fears. At best they are free advertising for the companies involved. At worst they are entirely ignored because they look like banners.

A screen capture of a website with no security information except a Verisign logo

A better approach is to tackle the problem head on. Add copy to your website addressing this issue and the steps you have taken to ensure the customers security. Do not rely on a single graphic to say all that needs to be said.

5. Amazon is the template we should all follow [Wrong!]

This final lie is probably the most widely held of all. There is a belief that because Amazon is so successful, all ecommerce websites should follow their example.

There is however a number of flaws in this argument:

  • They don’t get everything right (nobody can).
  • They are partially successful because they were one of the first ecommerce websites to market.
  • Their reputation and brand recognition allows them to get away with a lot.
  • Users are familiar with their site and its eccentricities.

In short, what works for them will not necessarily work for you. Too many website owners blindly copy Amazon because they are seen as the leader in ecommerce. Not only is that flawed for the reasons I gave above, it also removes the possibility of you ever being better than Amazon or innovating in anyway.

Amazon Homepage

Don’t get me wrong – I believe there is a lot that can be learnt from Amazon. However, I do not believe it is in anybodies interest to blindly follow their lead.

Bonus lie: Ecommerce is easy

Probably the biggest lie of all is that ecommerce is easy. Admittedly off the shelf solutions such as Shopify make it extremely easy to build ecommerce websites. However, building the site is only the beginning. The real challenge comes in:

  • focusing your site,
  • deciding on when to up-sell,
  • providing great customer service,
  • communicating clearly
  • and learning from others.

Creating a successful ecommerce business is a long term commitment and you will need to continually evolve both your website and strategy.

So, what about you? What ecommerce lies have you heard? What great advice would you like to pass on? Post in the comments below.

10 problems your content management system will not solve and how to overcome them

Content management systems are often perceived as a silver bullet that will solve all your content problems. In reality having a CMS is not enough. You must also address broader issues associated with the content of your website.

So many website owners hate their content management system. This is often because it has failed to live up to their unrealistic expectations.

Many organisations purchased their CMS hoping to solve a wide range of issues surrounding content production and delivery. In reality, a CMS is only capable of overcoming relatively few. In fact often a content management system will solve one set of problems only to create more. It is these new problems that I wish to address here.

What follows is a list of 10 issues that are either directly created by content management systems or that a CMS will fail to solve.

1. A lack of editorial control

One of the primary reasons organisations purchase a content management system is to de-centralise control of content and therefore remove the bottlenecks that surround posting content to the web.

The consequence of this approach is a lack of central control to ensure the quality and accuracy of copy produced. This can lead to contradictions and varying styles of writing across the site.

Although many content management systems provide the tools for central editorial control, they are not always used and require somebody with the editorial experience.

The Solution: Get an editor

Unfortunately this is one problem that technology cannot solve. What is required is a content editor. Somebody who checks what is being produced and ensures it communicates a consistent message in a consistent tone.

Ideally this should be somebody who has experience in writing and editing online copy. However, the most important thing is that this person feels confident in editing copy, and has the authority to remove inappropriate material.

This person will also require a vision for the site and in particular what personality it should be projecting.

2. A lack of personality

Many websites lack real personality. They either ooze marketing BS or come across as singularly bland. This is largely due to the fact that they have been written by people more interested in communicating facts or selling stuff, than wishing to engage with users.

Websites with great copy that is full of personality, stand out from the crowd. They do more than convey information. They actively seek to make a connection with users in much the same way people do face to face.

Unfortunately the distributed nature of content production through the use of a CMS undermines that.

The solution: Decide on your sites personality

The first step towards overcoming this problem is to define who you are. If your website was a person what type of person would it be? What words best describe your sites character? Is it playful, serious, enthusiastic, or friendly?

Next put together a content style guide. This will include examples of writing styles that should be used on your website. It will also include guidelines in terms of tone and wording. This document should then be distributed to your content providers.

Producing an effective content style guide is not an easy task. You might wish to consider employing a freelance web copy writer if you do not have somebody in house. However once it has been produced, it should provide everything your content providers need to add some
personality into your copy.

Of course that does still require your content providers to be committed to the cause.

3. Uncommitted contributors

One of the great selling points of having a content management system is that they allow anybody to post to your website. Unfortunately, just because your staff can edit the site, does not mean they will.

It is not unusual to find that content management systems go unused except for by a few individuals. The belief that content management can be easily decentralised is false. There are two primary reasons for this.

Firstly, some people do not see it as their responsibility to provide web content. They see the website as a marketing or sales tool and so should be managed by marketeers.

The second reason is that most people do not have the time. Writing web content is often seen as a low priority and constantly gets pushed out by “real work.”

The solution: Recognise the importance of the web

The solution to this problem has to come from senior management.

The website needs to be seen as a critical business tool and job descriptions must reflect this by making site maintenance a key component of people’s job. This should include website duties being apart of employee assessment.

There is however another reason people do not using the CMS – they don’t know how to use it.

4. Poorly trained authors

When an organisation rolls out a new content management system they almost always offer some form of training. However, in many cases it is not enough.

Normally training consists of an intimidating manual and one off training session. For the few people who are updating the website regularly this is probably enough. However for more infrequent content providers, this is inadequate.

The trouble with one off initial training sessions is that by the time the content provider comes to update the website, they have forgotten what they learnt. Admittedly the information they need may well be contained in the manual, but who reads those?

This can easily lead to only a few people capable of making updates to the site, thereby undermining the very reason for having a CMS in the first place.

The solution: Provide video training material

The combination of occasional users and new employees, means that most organisations need a long term strategy for training people in the use of their content management systems.

We have found that a series of short video tutorials covering key functionality works much better than training sessions or intimidating manuals.

We still run training sessions for frequent users. However, the video tutorials allow users to work through the material at their own pace. Also, unlike a training course they can learn only the parts of the system they actually need.

However, training in the technology is only half the battle. Content contributors also need to know how to write compelling copy.

5. Bad copywriting

The harsh truth is that not everybody can write good web copy. Even somebody who writes brilliantly in print, does not necessarily write well for the web.

There is an art and science to writing good web copy that many people are unaware of. Copy written by content providers is often verbose, un-engaging and hard to scan.

The solution: Provide a structure for content production

The solution is three fold:

  • First, the introduction of an editor means that content providers do not have to worry about writing perfect copy. It should be the job of the editor to take the raw copy they provide and re-write it for the web.
  • Second, the training provided with a content management system should extend beyond the functionality and also include advice on writing good web copy.
  • Finally, by producing a basic template for content providers you can help them focus their writing. A content template should ask questions such as who is the audience, what is the key message for this page and what is the call to action?

However, the problem is not just limited to the quality of content but also the quantity.

6. Bloated websites

Much like this post, most websites end up far too bloated. This is a problem that content management systems only serve to exaggerate.

By removing the barriers to putting content online, you encourage people to add more. However, more is not always better.

Content providers often approach the website with entirely the wrong mentality. They look at the content they have or can easily produce, and decide to put it online because “somebody will find it useful.” They are driven by what content is available, rather than user’s need.

The problem is that the more they put online, the harder it is for users to find the content they want. It is like trying to find a needle in a haystack.

The solution: Focus on users and remove

The best solution is to prevent this from occurring in the first place. This is done by fixating on user needs. Before putting anything online ask two questions:

  • Is the content aimed at your primary audience?
  • Is the content essential for helping those users complete their objectives?

If you cannot answer yes to both questions, then seriously consider whether putting the content on your website will cause more harm than good.

Of course, you may already have a bloated website. If this is the case then you need to review each page of your site and apply the principles above. If a page fails to cater for a specific use case of your primary audience, then it maybe time for it to be removed.

The problem is that most organisations have people responsible for adding content to their websites. However, few have somebody charged with removing it. This is an important role and one your web editor should have the power and time to do.

However, user needs is not the only criteria for judging the worth of content. There are also calls to action.

7. No clear calls to action

As I have already said, most content providers are focusing on conveying information rather than meeting users needs. However, they are also neglecting the business needs too.

With the exception of marketeers and sales people, few content providers are thinking about calls to action. What is it that you want users to do next? How do you wish them to respond?

Even when content providers are thinking about calls to action, they are focusing on the big actions such as “contact us.” Until the user is ready to take those major steps they are left to wander around the website.

The solution: Always guide the user to the next action

It is important to consider the main calls to action for the entire site. Typically they consist of one or two major actions such as buying a product or completing a contact form.

However, there is also a need to think about the calls to action of each page. Avoid leaving your user with no obvious next step.

Take for example this page. Directly below this article you can take three actions:

  • Leave a comment
  • Provide feedback – That leads to videos offering a number of next steps
  • Read a related post

At no stage is the user left without a next action.

A big source of next actions is your information architecture. Unfortunately most navigation is not focused on users needs, let alone business objectives.

8. An organisational focused IA

An unfortunate side effect of running a content management system is that it encourages information architecture built around organisational structure rather than users needs.

If you look at most organisations CMS driven websites, their information architecture closely mirrors their internal structures. This is because it is easier to divide up responsibility for updating various parts of the site if it is structured along departmental lines.

The problem with this approach is that users do not think in terms of organisational structure. They are task focused and so often an organisational IA is entirely inappropriate. It leads to confusion and frustration among users.

The solution: Focus on user tasks

The only solution to this problem is to stop structuring sites around organisations and start focusing them on users.

Although it is easier in most content management systems to allocate permissions based on a per section basis, there is not normally a specific need to do so. It is just as feasible to give access on a per page basis making it unnecessary to organise around internal structure.

Ultimately your site should be about your users and that includes your IA. However, it does not stop there. The community you build around your site is important too.

9. No sense of community

Increasingly content management systems come with some great community tools. They have forums, comments and integrate with everything from Facebook to Twitter. However, great technology does not build great communities.

Many organisations implement these community features on their site and are disappointed when they are not used.

Worst still some organisations launch these features but moderate so heavily that users respond negatively. Eventually the functionality is removed entirely.

The solution: Build relationship not functionality

It is important to realise that online communities are about relationships and not technology. If you want to build a successful community around your website, you need to actively and regularly engage with users.

This involves having people within your organisation who are constantly talk to users, asking and answering questions, and getting to know people through open and honest relationship.

Of course, the problem here is the same as content production. This is not seen as an official role. Instead it often falls to enthusiastic individuals. If you want your community to succeed you are going to require passionate people who have the time and resources to sink into that community.

And it is a lack of resources that leads us to our final problem that content management systems cannot solve – single language content.

10. Single language content

The majority of invitations to tender Headscape receive for content management builds, request multi-lingual support.

In the end few of the sites we build actually make use of that functionality. In effect they are paying money for something they will never actually implement.

There are two many reasons for this.

The first is aspirational. Many organisations request multi-lingual support because they have dreams of expanding in the future and unfortunately those dreams do not come true. I can at least respect this viewpoint. There is nothing wrong with planning for functionality you might need at some point in the future.

However, the second reason is not so admirable. A lot of sites fail to implement their multi-lingual support because they have not fully thought through what that involves.

Implementing a CMS with multi-lingual support is easy. Creating a multi-lingual website is hard. You have to decide what content is going to be translated. You need to find a translator and then you also need to maintain that content over the long term.

The solution: Think twice before requesting multi-lingual support

There has to be a good business case for implementing a multi-lingual website. Unless you are sure that you are going to make money from a foreign market, it is probably not worth investing in language support.

If you aren’t serious about supporting other languages do not add it to your ITT, at least not as a primary requirement. There is no reason to rule out a CMS for not supporting multiple languages unless you are sure you are going to use that functionality.

Conclusions

You could interpret this post as a criticism of content management systems. That is not the case. I believe content management systems are a valuable addition to most websites. However, as I said at the beginning they are not the silver bullet may perceive them to be.

The success of your CMS is largely reliant on you being aware of its limitations and being prepared to deal with these restrictions. If you do then a CMS could be the best investment you ever make.

Introducing compelling content

Andy Kinsey shares 5 directives for writing compelling content.

As part of my role at AK Designs I am responsible for all the copy on the “home sites” as well as the copy on many client websites. In this role with clients I often face issues (and from some staff who think the same way) … On of the biggest issues that occurs on a regular basis is simply that the website owners or the company investors seem to turn around with ideas of what the copy should be, and I have always found (so far) that all they want to do is convince the end user.

Now don’t get me wrong, sometimes this fits the site and the audience you are trying to get to understand something, but most the time it isn’t.

The battle generally means I turn around and compromise, I mention AB testing of the copy to see what will produce the best results. They agree to the testing and 95% of the tests end to come back in my favour. So to help everyone get to grips with this idea I’ve created 5 directives of writing compelling copy.

5 Directives to Write Compelling Copy

Know Your Audience

Think of each page or email newsletter as being read by a single person, a person from your target audience. Give him or her a name, an age, a relationship status & maybe a background story. Now write you copy for this person alone, you are not wanting to convince her of anything but rather to feel compelled to visit again, tell a friend or even better to follow your call to action… if your audience feel preached too or spoken down too then they will switch off… where as if you can engage on a one-2-one basis then you will get some real business.

Use a present tense and Positive subject line

Imagine reading “10 websites were developed” … sounds boring and doesn’t attract your attention really, you don’t feel compelled to click and read it… now think about the line “We developed 10 New websites” notice it draws your attention it was us (we) the company and they are “new” so this implies a sense of importance, improvement and excitement. Other good words include “exciting”, “exclusive” and “introducing”.

Avoid sitting on the fence – it gets you no where

If your wanting to sell something, wanting to compel them to take an a particular action, be definitive. you are the “expert” otherwise they wouldn’t be visiting your site! So don’t use words such as “should”, “could”, “maybe” or “possibly” they have negative implications on most audiences, they make them question you and your product or site.

Be Concise

Don’t ramble on endlessly, get to your point quickly and clearly. Cut the rubbish and the jargon, no one wants to hear it or see it … it confuses the average person which is why there are so many sites claiming to be jargon busters or having jargon busters built in… save you and your customer sometime.

Connect

Connecting with your audience will never be easy, it will never be 100% successful even if you’ve got everything right on your site. What you need to think is that your customers will have something else on their mind, maybe someone is in hospital, maybe someone just knocked on the door or maybe they are hungry… a tiny little thing can distract and you will loose a sale (or however you call to action is built). So connect, make the user think positive thoughts, so even if they are distracted they will feel compelled to return.
I know these tips will help many of the website owners I know, and I know it will help your site be a success.

Image provided by The Trial

About the Author

Headshot of Andy Kinsey

Andy is director & chief designer @ AK Designs. Addicted to SEO, Designing, Twitter, His Googie (G1) and all things tech in general. AK Designs (andy kinsey designs) has worked with clients of all sizes from small local charities to larger national fiscal companies and a number of large multi-national organisations. Andy’s motto in life is simple, ”To under-promise and Over-Deliver” something continued into the AK Designs mission. The AK Designs website is also the home of Andy’s SEO articles.

Web Design Wisdom from Twitter

I asked my twitter followers for their web design words of wisdom. I had over 200 responses. Here are some of the lessons learnt.

I am a lazy guy and Twitter is the perfect tool for people like me. Rather than go to all the effort of searching for an answer on Google, I often find myself turning to the Twitterverse. After all, some of the brightest minds on the web use Twitter and I can get an answer faster from them than looking it up myself.

However, with this article I am taking laziness to a whole new level. Instead of carefully considering my own words of wisdom regarding web design, I have turned to Twitter…

I am writing a post on web design words of wisdom - think 'confusus says'. Post yours to Twitter in 140 characters or less. #webwisdom

Setting aside the people who wanted to point out that I cannot spell confucius, the responses was amazing. Answers ranged from the silly to the surreal. However, there were also some real gems and a number of recurring themes. What follows is a summary of the main recommendations.

Focus on the user

There was a general consensus that maintaining focus on the needs of users, was a crucial component in a successful website.

Dan Goodwin put it best when he wrote…

If you can’t work with your users, talk to them. If you can’t talk to them, at least think about them.

A number of users recommended Steve Krug’s book “Don’t Make Me Think”. However, the irony of one particular tweet made me smile…

Confucius says “Don’t Make Me Think”.

There was also a lot of advice about the importance of providing adequate signposting for users as they navigate your site. Colin McCormick wrote…

When leading a user make sure they always know where they are, how to leave and how to continue.

The issue of users becoming lost and confused also led to a call for simplicity.

Keep it simple

A number of contributors spoke about the importance of keeping our sites simple and intuitive. Niki Brown encapsulated this attitude when he wrote…

Keep it simple… the average user tends to get confused with massively complicated interfaces.

It is certainly true that many damage their sites by continually adding features and content, when they should be simplifying. However, according to some of our twitterers that is easier said than done. One wrote…

Simplicity is the most complex achievement.

While another indicated that the ability to create simple sites only comes with experience

As you become a better designer, your designs become simpler.

There is no doubt that simplifying a website can be challenging. However as I explain in “The Three Secrets of Simplicity“, if you challenge the need for new features it is possible. Too many web projects experience scope creep that undermines simplicity. That is where having a clearly defined brief comes in.

Clearly defining the scope

Too many web projects lack clear boundaries. Often they are wishlists of functionality that have not been fully considered. As Rich Wells points out, the first step is to define the problem…

When planning a site it’s always worth asking “what problem am I trying to solve?” before looking at functionality/solutions.

The trouble is that many of us are seduced by some new piece of web functionality and forget that our websites should primarily be about fufilling business objectives. As Marc Hindley points out…

Think business first, technology second.

Of course defining the scope of a project should not just be the role of the client. The web designer has a responsibility too. As Wendy Phillips explains…

Clients think they know what they want until you ask the right questions.

It is down to the web designer to ask the right questions. In order to do that they need to understand the business. One twitterer encourages them to…

Get as much info from the client upfront as possible, even things you think aren’t that relevant – get to know their needs.

Web designers and clients should work together to define the scope of a project. The client brings their business expertise while the web designer brings their knowledge of the web. Unfortunately the role of web designer is often reduced to that of a pixel pusher.

Recognise the value of web designers

Interestingly it is not just clients who undervalue web designers. Many web designers undervalue themselves. Andy Clarke endevours to encourage fellow web designers when he writes…

You don’t get paid for the hours you work, but for the years learning your skills and craft.

However, it is not just an issue of payment. The Twitter community also encourages web designers to be willing to walk away if clients become unreasonable. Alun Rowe writes…

Don’t be afraid to say no, or to walk away if a client becomes unreasonable. It’ll only cause you pain/distress later on.

David Roessli echos Alun’s point before also going on to say…

Be clear, direct, and honest. Don’t make promises you can’t keep.

Too often web designers will say anything to win or keep a piece of work. Ultimately this is damaging to both the web designers business, and the website of their client.

Of course, this advice doesn’t apply just to designers. It is valid for developers too. That said, there was also some developer specific tweets as well.

Developers pay heed

Whether you are a front end developer or a server side coder, there was some excellent advice coming from Twitter. Our very own Craig Rowe shared one particularly pragmatic piece of advice that made me smile…

Web development is a balance between well made and made just to work.

His second tweet contained a touch of bitterness that can only come from a .net developer fed up with receiving abuse from the fanatical PHP crowd…

The backend language really doesn’t matter.

That said, there is no denying he is right.

Talking of fanatical, Mark Mcaulay put another overly enthusiastic group in their place when he wrote…

WordPress is not the solution to everything.

Of course you could just as easily replace the word WordPress with any other CMS or development platform. Nothing is a silver bullet.

There was certainly no shortage of tweets touting the benefits of various frameworks, CMS and platforms. However, there was a general principle that 29Visual summed up well…

Learn a framework or develop your own. About 90% of the Website structure can be reused. The other 10% falls on design.

You can save yourself a lot of time with the right tool. However it is not just tools that can save time. Good code can too, as Joel Drapper explains…

Code with the next developer in mind.

I think we can all remember times when we have inherited code that is impossible to read let alone understand!

Our last piece of advice for developers comes from Vicky who shares one of the nicest tweets of the lot…

Code with humility and grace – acknowledge those who are on IE6 or screen readers.

That brings us on to the subject of accessibility.

Always keep accessibility in mind

The Twitter responses I received were particularly passionate about the importance of accessibility. However as Ricky Onsman pointed out, they wanted more than just access for the disabled…

Forget disability access – go for universal access.

In particular universal access included access to those using older browsers. That said, there was realism in their expectations. Nobody expected websites to look identical in all browsers. David Randall commented…

Web sites should not look the same in every browser – it’s okay to be different.

This passion for graded browser support was encouraging. However, it was not the end of their ambitions. As Joel explained, accessibility also brings with it improved search engine placement…

If your site is accessible, it’s also search engine friendly.

Website owners are often willing to invest considerable money in things like SEO or design, but rarely in accessibility. Hopefully Joel’s words will encourage them to reconsider.

Talking of investing in design…

Lessons about design

I conclude these words of wisdom from Twitter with three pearls surrounding the development of a design. The first comes from Colin who says…

Prototype and consider other designs. Do not be narrow minded. Be prepared to throw away every design at the design stage.

This is excellent advice. Often designers become locked into a single approach too early in the development cycle and fail to experiment and seek out inspiration. Of course there is a fine line between inspiration and theft. Tom Kenny writes…

Remember, inspiration is not about copying but rather kick-starting an idea of your own.

And that takes time and lots of different ideas and approaches.

But do not fret! If you are struggling to find your inspiration remember Bruce Lawson’s words of wisdom about design…

Readers care much much much much less about your design than you do. They care about content.

Conclusions

To be honest the idea of a twitter driven post was somewhat of a whim, but the replies I received were extremely impressive. This post does not do justice to the depth and quality of responses. There were superb tweets on launching a site, reinventing the wheel, and the importance of copy. I highly encourage you to look through the entire list.

However for now I leave you with some final words of wisdom from Jonathan Snook.

Anything is possible. Its just a matter of time and money

158. Home

On this week’s show: We share the highlights of SXSW, discuss home working, and interview Rob Borley about project management.

Play

Download this show.

Launch our podcast player

Housekeeping

Headscape still recruiting!

Headscape is still recruiting. We are looking for an enthusiastic, talented developer to join our team, working from of our offices in Hampshire. For more information see the job advertisement on Boagworld.

Back to top

News and events

The best of SXSW

Well, SXSW is over and I am back in the UK. But what happened at the conference? What was the big news this year?

That is actually a hard question to answer. There is so much at SXSW that it is almost impossible to get a sense of everything that is going on. Even if you could attend every panel that isn’t always where the real action takes place.

The real conference often happens at the parties and in the corridors. In fact, more than one spontaneous panel was started via Twitter, thanks to official panels being full.

Panels this year ranged from the downright dull to all out flame wars! One that I unfortunately missed was "Is Spec Work Evil!". However, Marcus attended and tells me it was particularly fiery. Personally, I am very much against speculative work as I have said before. However, not everybody would agree and the panel seemed to reflect this diverse opinion.

One panel I did make was Paul Annett’s amazingly inspirational talk on Easter Eggs and design twists. The talk focused on the little things you can add to your site to make users go ‘oooo that’s clever’.

Too often I neglect such ‘bells and whistles’ in favour of usability and accessibility. Paul demonstrated how these different priorities can sit side by side without compromising each other. He showed some great examples including the hidden arrow in the FedEx logo and the vines on the Silverback website.

fedex logo

The final panel I want to mention is ‘Being a UX Team of One‘ by Leah Burley of Adaptive Path. To be honest the title of this one was a little misleading (at least from my perspective).

What I took away from this session was that design should not be a solitary activity, solely reliant on the creative inspiration of one individual. Leah seemed to be arguing for a more collaborative approach especially at the wireframe stage. She proposed that all of those involved in the project should sit down together and hammer out the wireframe designs.

This addressed two separate problems we have been having at Headscape

  • The developers concerns at not being involved early enough in the process.
  • The question of who should do wireframing – the designer or the IA person.

Best of all Leah’s presentation was very pragmatic. She provided lots of practical approaches that encourage idea generation and collaboration. I highly recommend listening to the podcast of this when it is released.

Browser testing and IE6

In other news, there seems to have been a lot written about browsers this past week. Three stories in particular caught my eye…

  • .net Magazine seems to have hopped on the ‘dump IE6′ bandwagon – My opinion is the same as that of Jeremy Keith as expressed in last weeks show. It is not a matter of dropping IE6. We should instead being deciding whether we wish to offer it the same level of support as modern browsers. I am entirely in favour of providing IE6 with a basic stylesheet that avoids its shortcomings. However, I dislike the idea of dropping it entirely.
  • Microsoft has released SuperPreview this week that allows Windows users to test different versions of IE simultaneously. I have to say this looks like an impressive tool. It allows you to view IE6 and IE7 side by side. It also has many other tools that may also be useful. Support for IE8 and other browsers will follow and although it is currently in beta, I think it will quickly become an indispensable tool for Windows based web designers. Just a shame there is no mac support!
  • Finally, Sitepoint have written a brief outline of how to create the perfect browser testing suite. Ideally for those starting out it lists various online browser simulators, virtual machines and desktop browser emulators.

Browser testing continues to be a pain in the neck and I for one would be willing to pay for a decent way of streamlining this whole process. This is especially true now that IE8 has been officially released and we have another browser to add into the mix.

Screenshot of Superpreview

A simplicity case study

A few weeks ago I wrote about the importance of simplifying your website. Well, this week Gerry McGovern has written the perfect case study to support the argument I was putting forward.

Removing poor quality content increases customer satisfaction‘ talks about how the Microsoft website consists of a staggering 10 millions pages. Of those pages 3 million have never been viewed!

The post goes on to explain how the Microsoft Office team took a different approach with their site by removing irrelevant pages. According to McGovern…

By weeding the garden, the top task pages became easier to find. But just as importantly it became harder to find a minor task page when you were looking for a top task page.

In short, removing pages reduced noise. Disturbing though it sounds, I think we could all learn something from Microsoft’s example.

An introduction to Microformats

My final post today comes from Richard Rutter’s blog. It is basically an introduction to Microformats aimed at the non-geek. He wrote the post because he recently found himself trying to explain microformats to a client and could not think of a good post that covered the subject from their perspective.

Personally, I am not sure it is necessary to tell a client you are implementing Microformats. The cost of adding them is so small and the benefits so hard to explain, that you maybe better off just doing it.

That said, this is an excellent post and if you are struggling to understand the point of Microformats, this is certainly worth reading.

Back to top

Interview: Rob Borley on Project Management

Paul: So, joining me today is Mr. Rob Borley. Hello Rob.

Rob: Hi Paul, how are you doing?

Paul: Very well indeed. Good to have you on the show. It’s been a little while.

Rob: It has, It has. It’s weird hearing the show above you, um rather than being below.

Paul: Oh yes, because you sit upstairs, don’t you?

Rob: Indeed.

Paul: Do you actually hear it?

Rob: I do. It’s like have a little base bin ?

Paul: Awh. So, um, we have kind of been thinking for a little while that we need to get someone on the show to talk about project management. And the idea was we’d get some high profile web design project manager to come in and talk about web design project management. Then I realised, um, that I can’t actually think of any. You know, I really don’t know of any kind of web design project managers out there, other than obviously the people that work at Headscape.

Rob: Well, maybe there’s a gap in the market.

Paul: I think there is a gap in the market.

Rob: (unintelligible) celebrity project manager.

Paul: Well I think that’s somewhat of an oxymoron, but setting that aside, lets shift around a bit, yeah, so, um, so we thought, lets get you on the show. Um, now, you’re quite and interesting case because you started of as a techie.

Rob: Yes.

Paul: And you became a project manager.

Rob: Yes.

Paul: And, so, um, let’s start by talking about the role of project manager. How would you describe your core role? What is it that you do? I should know this I guess.

Rob: Well, you mean other than manage projects.

Paul: Ok, you just have to make a joke out of it. But you know what I’m getting at.

Rob: Yeah yeah. I mean, I guess, um, the main thing that we do is shovel shit, really. We deal with crap. You know, the main thing project manager would do is a filter between clients and the production team for the project. I mean, there are a couple of stages I guess. So you’ve got the planning part of the job, which is essentially working out what it is you need to do, um, making sure you got the results to do it, plotting a nice time line so they can all fit as far as having deadline. And then you’ve got the people said, because really project management is a people job. You need to know how to get the most out of all the people that are in your project team, um including the client. You need to include the client in your thinking, always. Yah, that’s essentially what we do.

Paul: Yah. It’s a people person thing. I always thought you were so charasmatic. Ok, so, I mean, I guess the question is, if you look at the kind of, if you look at Headscape, and the way that we’re organised, we’ve got four developers, four designers, and three project managers. I mean, that’s a lot of project managers. And, you know the question is, why, why have project mangers at all? Why couldn’t the designers and the developers do the job? Why couldn’t it be spread across multiple people? Justify you exsistance, Rob.

Rob: Yeah, this question kind of makes me nervous here. I feel like I’m re-interviewing for my own job. Not that I interviewed in the first place, but, I guess in one sense, if you were in a small project environment, you could almost get away with one person. If, you know, its a one person job, you could get away with them managing themselves for a limited amount of time. Um, but, as soon as you get beyond jobs which are more than one person, um, and go on for an extended period of time, you start needing to provide some glue to stick things together. You need someone whose got an overview of everything that’s going on. You know, the developers have got a very developer mindset about the way things happen. Designers are the same way, they know about the design stuff. Um, but actually translating what the client wants and feeding that into both areas and bring them together is what’s missing, if you don’t have a project manager.

Paul: So, to some degree, project management becomes necessary with scale. The bigger the projects, and the more complex the projects, then the more a need for a dedicated project manager.

Rob: Yeah, definitely. I mean, I guess the real role of a project manager in these situations is the facilitator. You’ve got all of these tools which are basically your resources, your developers, your designers, um, and you need to be able to enable them to work effectively together to produce what the end product is going to be.

Paul: So here’s a question that I didn’t pre-give you, in advance, which is always the best type. Why, why, why become a project manager? What made you – because you were heading up our technical development team, you were, you know, you were doing very well. Why did you feel the need to get involved in what you call shit shoveling?

Rob: Well, I think my main motivation was, Headscape was growing, and we started employing all of these younger, more dynamic, much more talented, better looking developers, that were basically going to show me up. So I figured that before I got shown in true light that I was going to need to move somewhere else. Um, no, well that’s partly true. Really, I think, its the people’s aspect that I’m really interested in. A good project manager is someone who is able to understand how his resources or how her resources work and how your clients work, and joining the two together. Um, while I quite like writing code really, I’m not passionate about it. So that side of it, you know, I reached as far as I wanted to go, and I really enjoy the people thing.

Paul: Ok. So what other, I mean, what other kind of characteristics do you think make a good project manager, obviously the people skills you talked about, what other, I mean if there are other people out there going well actually I’m not that passionate about coding, or I’m not that passionate about design, but I am passionate about the web, I do like the web design process, perhaps project management is the way I ought to be going. You know, what skills, what characteristics do they need, what personality traits do they need?

Rob: I think well, you need to be able to plan. Um, you know, planning is very very important. If you plan well, then your project will usually go well.

Paul: I like the cornification in that.

Rob: You have to be able to predict the future is helpful.

Paul: Yes.

Rob: A major part of what we de in the planning stages is assessing risk. You know, so, we’ve got what we’re starting with, we’ve got what we want to achieve, and we’ve got a time scale, now we need to work out what things might appear that are unforeseen, which are going to affect us reaching the time scale. So being able to foresee the future is helpful. Um, and so planning, being quite analytical and thorough. The logical background I have from being a programmer, a developer, is really helpful because you have to approach project management in a very analytical way, to make sure you don’t miss things. So there’s that side of it. And then there’s communication skills. You not only need to be able to communicate with a client affectively so they show that you understand what they want, um, and they understand where you are with the project, and they’re happy because a happy client makes everyone happy. But you also then need to communicate that with the various personalities in your team. You know, whether thats the developers locked up in a dark room with no social skills, or the crazy charismatic designers who…

Paul: You’ve just gone with stereotypes that so don’t apply. If I look at our team, no offense to our designers, they’re the ones that sit in the darkened room with their nose right pressed against the screen. And the developers are the ones that are crazy and never do any work.

Rob: (unintelligible) something about reading personalities. No, but you see my point. You’ve got these almost extremes, especially in the web, I guess, in the web world, you’ve got these extremes of personailities which somehow you need to be able to communicate with and put it all together and so, yeah, that’s an important skill. I think the third area, is to be quite relaxed about life. Because things will go wrong and do go wrong, it doesn’t matter how well you plan and how good you are at predicting the future. Stuff will appear that is completely unforeseen and will completely throw (unintelligible). And everyone gets really upset and people will shout at you and it goes a bit nuts. Um, and if you go nuts as well, you project team falls apart, because they look at you as the calm rudder in the storms of life. I can feel my other project manager buddies laughing at me, um, but if you’re calm and you can not get stressed at that but actually see, try and find a clear path through a very stressful situation, then really helps.

Paul: I would so be the worst project manager in the world. I’ve got the attention span of a newt, I’ve got no organisational abilities and I get stressed at everything. So overall, I think I’d fail.

Rob: Yeah, stick to web celeb.

Paul: Yes, I’ll come up with some other title that sounds good. Um, ok, so you talked about this really is, I can honestly say, a foreign area to me. Right? You talk about planning a project upfront. I’m not a planning person. Right? And there seems to be so many variables involved in a project and so much as you say, that can potentially go wrong. How do you plan it? I mean, you know, the kind of thing that you always talk about, when you talk about project management is endless gantt charts that seem to be outdated in about 5 minutes, sort of kicking a project off. How to you effectively plan a project?

Rob: Um, well, we do use a gantt. We always start a project with a gantt. And, um because it seems like thats what project managers are supposed to do, so we justify the time with a gantt. Um, but you do need, um, I think assessing risk is something that is vital in successful project management. Its something that we’ve been doing at Headscape, um, increasingly more over the last year or so otherwise this need to actually spend time highlighting what could actually go wrong here. So, you look at, I’m not going to be able to think of any examples now, but a particular, let’s say you building a shop or something. So potential things which could delay that project would be: the client not getting around to telling you what the products are on the shelf and content population is a big risk on meeting a project deadline, because it is out of your control. So, its like, I need the content by this date, and he needs to put the content in by X date. If the client doesn’t do it, there’s nothing you can do about it.

Paul: I’m guessing integration must always be a big risk. Integrating with third party applications.

Rob: Exactly, so if you’ve got some sort of third party database or a web service you’ve got to pull in, something that you’ve done a bit before, but you don’t know anything about, that’s a risk. Because you can guesstimate what’s going to happen, but its unforeseen. And so, the trick is basically, to find all the tasks that have these risks and then multiply (unintelligible) an hour by some random number. And then make the rest up as you go along.

Paul: So what about once the project gets going, how, what techniques and tools maybe do you use for monitoring and controlling the process and trying to keep on top of everything.

Rob: Yeah, I mean, there are lots of tools out there, obviously, lots of funky web-based ones, um, there is no substitute for talking to you team. Um, trying to (unintelligible) email or basecamp or something is impossibly without talking to you team. So, communicate. It’s a big part of what we do. You have to talk to the people doing the work, you have to talk to the clients, um you have to keep the lines of communication open. Um, but as far as actually keeping track of what’s going on, we do use basecamp, um which is great for managing lists, basically, you manage lists. So from our gantt shell, we’ll break it up into a series of tasks if you like, wide areas, um, and then, (unintelligible) ask people to add comments to them and take them off and then we’ve got kind of an overview of where our project is. Um, and hopefully from there, and when we’ve got the gant shell, we’ve got some dates, some milestones and reminders like you should have done this by then, um and so, you use that to kind of keep track of where you are.

Paul: Cool. What about, so that’s kind of dealing with the internal side of things. What about when it comes to the client, I mean, you talked about, you said earlier, a happy client makes everybody happy kind of thing. So what makes a client happy? What are the things that really, or perhaps turn it around the other way, what are the things that really piss of a client and where can it really go wrong?

Rob: This is really where the people side of it really comes in because every client is different. Some clients want you to talk to them for five hours a day, hold their hand, you know, spoon feed them, and some clients just want to know when it’s finished. So initially, when you’re kind of trying to assess your project team, if you like, your resources and what you’ve got, assessing the personality of your client early on, will really put you in a good place. Um, but, I guess, general principles, if you’re honest, it helps. Um, so, be realistic about what you’re telling your client is going to happen. Don’t promise the Earth by yesterday. Because then you won’t deliver and then they’ll get upset. If there’s going to be a problem, if things have slipped for some unknown reason, then tell them as soon as you know. Tell them as quickly as you possibly can. Um, manage their expectations is kind of the phrase that we use a lot. You gotta manage you clients expectations so that they’re not expecting something that you can’t deliver. And um, and then that limits the amount of upsetness that they get.

Paul: Slippage is a big one, isn’t it? This kinda whole area of things like, you know problems you kinda face, things, like slippage, scope creep, non-delivery, I mean, how do you have any kind of broad techniques for dealing with these kinds of things, or is it just kinda communications thing again.

Rob: It’s mainly I think a communication thing again. Um, part of the planning stage is trying to asses these risks and so you try and build in contingency to cope with those, and if you’re building enough contingency, you deliver the project early and that makes everyone really happy, even if its a long project, you deliver it early, you’ve exceeded their expectation also. Um, so I think, if somethings going to slip, I think you should say you’ve got to be honest. Sometimes things are just out of your control, so you’re two weeks before the end of a project, you in the middle of snagging, your lead developer goes down with appendicitis. There’s nothing you can do about that, and so you just need to communicate with the client and hope they take it well.

Paul: So wishing everything works out, I’m loving that approach. Ok, so, um, let’s finish of with a piece of generic advice. Either people starting out in project management or those that have had project management foisted upon them. You know, whats the kind of one piece of advice that you would leave for people?

Rob: Get to know your team. I think that’s the main thing I would say. Um, its kind of like, when you drive you car, you’re environment is a very organic, dynamic thing, you know what it really what’s going to happen and the only thing you’ve got to get you through it is that you understand you car. You know almost instinctively how it works, how to drive it it, if you get to that situation with your team, then whatever the project throws at you, you kind of, you can deal with it. If you understand how you client is going to react to a certain situtation, you can intincfully deal with it. And it keeps the stress levels low. You need to find ways of managing your stress levels.

Paul: There you go, that’s great advice. Thank you vert much for that, it was wonderful. I really appreciate you coming on the show.

Rob: My pleasure.

Thanks goes to Meredith Marsh for transcibing this interview.

Back to top

Feature: Home Working

I was recently contacted by a friend of mine Marieke Guy about writing a guest post for her blog on remote working.

I have been working at home for over 7 years now and am a great believer in the benefits. However when I actually sat down to write the post, I realised just how long it has taken me to find the right way of working.

As a large number of people who listen to this podcast work from home, I thought I would share my experiences to date and my hopes of where remote working will take me in the future.

The reality of home working

Back to top

Three secrets to simplicity

Many website owners damage their sites by continually adding features and content when they should be simplifying. In this post I reveal why that happens and how to simplify your website.

In my post ‘5 options when website budgets get slashed‘ I explained that many organisations waste money adding ever more functionality and content to their sites when they should be simplifying. Unfortunately it is much easier to add content than take it away. But why is that?

The 3 lures of complexity

In ‘10 harsh truths about corporate websites‘ I outlined 3 reasons why website owners shy away from removing content…

  • A fear of missing something – By putting everything online website owners believe they are giving users easy access to everything they need to know. Unfortunately, with so much available, it is hard to find anything.
  • A fear users will not understand – Whether it is a lack of confidence in their site or their audience, many website managers feel the need to provide endless instructions to users. Unfortunately, users never read this copy.
  • A desperate desire to convince – Many website managers are desperate to sell their product or communicate their message. Text becomes bloated with sales copy that actually conveys little valuable information.

However, I think there is more to it than that. First, there is a general laziness. It is easy to leave content online. It takes effort to remove it. Second (and more importantly) there is a desire to please users. If a user asks for a feature or piece of content, we feel obliged to provide it.

3 questions that encourage simplicity

Adding functionality requested by users is not always a good idea. You need to ask 3 questions…

  • How many people are asking for it? – If only a few people request a piece of functionality, there may not be the demand to justify the time and money.
  • Who is asking for it? – If it is not being requested by your primary audience then you should probably not be building it.
  • How will it affect others? – With new functionality comes complexity. Will that functionality confuse some users? Will it distract from your main call to action?

What then do you do if your site has become overly complex? How do you achieve simplicity?

3 steps to achieving simplicity

According to ‘The Laws of Simplicity‘ there are three practical ways you can simplify anything, including your site. These are:

  • Remove elements
  • Hide elements
  • Shrink elements

Let’s look at how these steps work in practice.

1. Remove

Headscape Website

The first step to simplifying your site is removing unnecessary content. This is by far the hardest step for the reasons I have outlined above. However, it is necessary as Steve Krug explains in his book ‘Don’t Make Me Think.’ He identifies two benefits of removing content…

  • It reduces the noise level of your site
  • It makes the useful content more prominent

Removing content really does make a difference. We applied these principles to our own website at headscape.co.uk and saw a significant increase in conversions (those visitors who request a quotation for our web design services) and some amazingly positive feedback on the site itself.

In fact we took the principle so much to heart that we went from a 40+ page site down to a single page! Of course, that kind of radical approach is not for every site. However, even removing some content can make a huge difference.

2. Hide

Unfortunately, it is not always possible to remove as much as you wish. Sometimes you need to keep content to serve secondary audiences. That is where hiding content comes in.

It is important to cater for secondary users, but you do not want their content to distract or confuse your main target audience. Instead of removing their content, you can hide it deeper within your site or within the interface itself.

Menu on the Wiltshire Farm Foods website

An example of this is a recent homepage redesign we completed for Wiltshire Farm Foods. Most of their sales come from 6 categories of meals. However, they also offer a number of other categories. On their old homepage the 6 main categories were lost among the other categories. Users felt overwhelmed by choice and sales were lost.

One option would have been to reduce the number of categories to focus on the 6 big sellers. However, this would upset a sizeable secondary audience. So instead, we hid some of the categories under a show more link. This meant that their secondary users could still be served, without overwhelming the primary audience.

3. Shrink

Finally, there are occasions when content can be neither removed or hidden. This is often because the content is of critical importance to a secondary audience and needs to accessed quickly. In such cases the content can be shrunk.

Take for example University websites. Their primary audience is almost always prospective students. However, they also cater for staff and existing students. These people need quick access to intranet tools such as the institutions address book. The solution is to add a small inconspicuous link on the homepage that takes them quickly to this content. By keeping the link small (shrunk) the site serves their needs without distracting or confusing the primary audience.

A similar approach was used on the Wiltshire Farm Foods new homepage. However in this case the content was actually shrunk.

Because of the elderly demographic it was important that we provided lots of help to new users. We therefore wanted to dedicate a substantial amount of homepage real estate to meet their needs as they arrived. Our solution was this…

WFF get started guide

Unfortunately this became distracting once the users were familiar with the site. It became a usability hurdle. One solution was to remove it. However, this would make it impossible for users to refer back to if they became stuck. The next option was to hide the content elsewhere (for example in the help section). However, previous usability studies of this demographic showed they develop ‘habits’ in the way they navigate. If we moved these links that they relied upon, it could prove confusing.

Our final solution was to shrink the content. So instead of moving or removing it we simply collapsed it…

WFF get started guide, collapsed

This meant the content continued to be accessible but did not become a distraction or take up too much real estate.

Conclusion

Although the ideal scenario is to remove content, it is also possible to simplify in other ways.

This should not be mistaken as an excuse to avoid removing content. However, you could use hiding and shrinking as the first step towards removing. If these techniques do not alienate your users, then it maybe appropriate to remove that content entirely.

Whatever the case, we should all be looking for ways to improve our sites by simplifying rather than adding more and more content.

5 options when website budgets get slashed

Your site is in desperate need of a redesign, content is out of date and the technology is archaic. Unfortunately times are tight and your budget has been cut. What do you do?

The economic downturn is affecting everybody and even at Headscape we have noticed the budgets of clients shrinking. With less money to spend how can you maximise the return on your investment?

To be honest I think it is a good thing that people have less to spend on their websites. We have had too many clients approach us asking for complete overhauls of their sites when that is not what is really required. Often more subtle changes can have a greater impact over the longer term. They certainly generate a better return on investment.

We have been working closely with our clients to suggest ways they can improve their sites without breaking the bank. Here are just 5 of our suggestions.

1. Realign rather than redesign

Why do you need a redesign anyway? Redesigning your entire website is time consuming and costly. However, more importantly it is often unnecessary. I seem to be quoting Cameron Moll’s excellent article “Good Designers Redesign, Great Designers Realign” a lot recently, but that is because he talks a lot of sense. He writes:

Like a kid in a candy store, we creatives redesign like it’s the new black. Why do we possess such an insatiable desire to refresh and remake? Why do we thrive on renewal? What tempts us to be seduced by the sway of renaissance?

I believe it is because we see a redesign as the solution to a failing, tired site. However that is rarely the case as Cameron goes on to explain:

Too often, look and feel, color scheme, layout, and identity are presented as solutions to problems… long before regard is given to other less-aesthetic issues that may very well be the root of the problem. The old warning against treating symptom rather than cause comes to mind.

What is more redesigns can often cause more harm than good by confusing the loyal users who are familiar with your old site.

When budgets are tight let go of the notion you need to do a complete redesign. You can improve your site many times over with the smallest change. Just take the case of the $300 million button I mentioned in show 150 of my podcast.

My facebook profile

2. Simplify

As website owners we are always looking to expand our websites by adding more features and content. However, that costs money we may not have.

Here is a radical alternative – Instead of adding more to your site, why not take things away.

Typically websites are stuffed with content and features that users simply do not use. A quick look at your analytics package will demonstrate the problem. The vast majority of traffic is to a handful of pages.

The problem is we tend to leave content in because ‘somebody might find it useful’. Although this maybe true, it does not necessarily mean keeping content is a good idea.

The more content and features we make available the harder it is for users to find what they need. It is the proverbial ‘needle in a haystack’.

Fortunately, simplifying your website does not have to be entirely about removing content. According to John Maeda’s book ‘The Laws of Simplicity‘ we can also streamline our sites by shrinking and hiding content too. Consider ways to reduce the prominence of less important content, to place a greater emphasis on what matters.

When budgets are tight take a long hard look at your site and ask whether more can be achieved by simplifying what you have rather than adding complexity.

Apple Homepage

3. Prioritise and phase development

Another technique which can be used when budgets are tight is to phase development. There seems to be a tendency among website owners to store up changes and roll them out in a single large deployment. Unfortunately this means a large single expenditure too and that can be problematic from a cash flow perspective.

A better approach is to roll out incremental changes on an ongoing basis. Not only is this better from a financial perspective, it brings other benefits as I explain in the Website Owners Manual. Phase development also provides:

  • Faster delivery because new features are launched independently. Some features can be launched while others are in development. This prevents a single feature stalling the entire rollout.
  • More accurate estimates. Bigger project are harder to estimate. Breaking them down makes it easier for suppliers to quote accurately.
  • Better PR opportunities. Whenever a new feature is launched there is an opportunity to publicize the site. New features can motivate users into taking another look. A single large project only provides a single opportunity to grab peoples attention.
  • Limited risk of working with a new supplier. Choosing an agency is always a risk. Until you work with somebody, it is hard to gauge how good they are. Reduce this risk by limiting the size of project they are commissioned to build. If the agency fails to perform, you can look elsewhere when commissioning subsequent work.

This is an approach commonly adopted by larger websites with their own in-house teams but much rarer among smaller sites who use external agencies. Nevertheless, it is an approach which works well in tough times.

Digg Technology Homepage

4. Reuse and recycle

Too often we reinvent the wheel. When budgets are plentiful this can make sense. Although there is similar functionality out there, we might choose to develop it ourselves so we have more control or can customise it to our exact requirements. However as budgets begin to get squeezed these are luxuries we cannot afford.

In a world of widgets, APIs and open source it is becoming increasingly hard to argue the case for custom builds. Why build your own mapping application when there is Google Maps? Why build a forum when you could use an open source alternative like Vanilla?

My only word of warning is in regards to integration. It can be hard to get these ‘prebuilt’ tools to work together. Be careful that the savings made are not lost to integration problems. Where possible use tools like WordPress that provides an architecture with a wide range of plugins for quick integration.

opensourceCMS screenshot

5. Move beyond the website

Finally, I think it is important to remember that your web strategy is not all about your website. We spend the majority of our ever decreasing budgets on adding bells and whistles to existing websites when there are large number of potential customers who never reach our sites.

Instead of sinking your budget and efforts solely into your website consider looking further afield. Could your web strategy be better served by putting resources into a Facebook group or a twitter account for example? Would your target audience listen to a podcast? Do they read RSS? What about a mailing list? The possibilities are endless.

Ask yourself where your target audience congregates. Instead of constantly trying to draw users to your site begin to spend time where they already meet. What social sites do they use? What editorial sites do they read? Contribute to these communities and offer to write for the editorial sites they read.

Many of these things can be done at almost no cost and with little technical knowledge. All it takes is some time and enthusiasm.

Conclusions

Whether a site is successful is not dictated by its budget. However many larger organisations have relied on money as a method of driving their web strategy forward. As these budgets are slashed there is an opportunity to gain a competitive advantage by being smarter.

Hopefully this post has demonstrated a few of the possible avenues available and inspired you to discover some more of your own. However if you would like some more personal advice specific to your own website then feel free to drop me an email.

146. Obsessive

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

Play

Download this show.

Launch our podcast player

Housekeeping

Two pieces of housekeeping before we begin:

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

News and events

24 Ways is back

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

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

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

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

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

iPhone designers kit

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

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

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

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

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

5 Ways to Get Usability Testing on the Cheap

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

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

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

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

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

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

Site search options

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

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

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

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

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

Back to top

Interview: Nicholas Felton on ‘Designing Data’

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

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

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

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

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

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

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

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

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

Nicholas: That’s fantastic.

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

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

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

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

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

Nicholas: Yes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nicholas: Absolutely.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Well I found the whole thing incredibly inspiring.

Nicholas: Thank you so much.

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

Nicholas: Thank you Paul. Thank you.

Paul: Good to talk to you.

Nicholas: OK, take care. Bye bye.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

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

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

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

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

Back to top

144. Scale

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

Play

Download this show.

Launch our podcast player

News and events

How much should you charge?

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

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

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

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

A plethora of accessibility posts

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

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

A business case for deleting content

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

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

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

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

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

12 principles for keeping your code clean

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

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

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

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

Back to top

Interview: Joe Stump on Building a Scalable Site

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

Joe: Oh, good to be here.

Paul: Have we had you on the show before?

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

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

Joe: Sure

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

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

Paul: OK

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

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

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

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

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

Paul: Wow.

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

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

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

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

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

Paul: Ah, OK

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

Paul: Wow

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

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

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

Paul: Laughs

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

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

Joe: Aha

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

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

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

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

Paul: Wow

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

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

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

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

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

Paul: Laughs

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

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

Joe: Sounds like a plan.

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

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

Paul: Yeah?

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

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

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

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

Joe: It’s not in San Francisco.

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

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

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

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

Paul: Wow.

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

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

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

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

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

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

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

Paul: Oh, yes yes.

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

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

Joe: Laughs.

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

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

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

Joe: Thanks Paul, bye.

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

Back to top

Listeners feedback:

Top web designer applications

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

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

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

Sending out bulk emails

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

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

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

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

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

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

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

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

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

Back to top

GetSignOff goes public

Today GetSignOff finally opens to the public. It has been an interesting journey.

Part of my reason for writing this post is obviously to pimp GetSignOff and to encourage you all to check it out. However, I also want to take a moment and reflect on the lessons learnt so far. This is Headscape’s first application and we have got some things right and some wrong. I wanted to share all that I have learnt.

However, let me begin with the blatant advertising…

What is GetSignOff?

GetSignOff is an application aimed at web designers. It allows you to present designs, manage feedback and handle multiple iterations of a design concept. However, most of all it is designed to help you get sign off from clients.

It has loads of cool features…

  • Can be used to approve mood boards, interface elements, imagery, personas, storyboards, site design concepts or any other element of the web design process
  • Fully customisable CSS and visual appearance
  • Use your own customised domain name
  • Up to 30GB of storage
  • Manage unlimited numbers of clients, projects and designs
  • Create and manage multiple versions of each design
  • Add notes directly on your designs
  • Check to see if a client has viewed a design
  • Receive notifications via email and RSS
  • Each client can support multiple logins
  • Restrict client logins to specific projects
  • Easy to use interface (ideal for clients!)
  • Clear sign off procedure to ensure everybody knows when a design is approved

Okay, I have pimped it enough now. Signup for a free account and try it yourself.

What we have learnt?

Building a web application is nothing like building sites for clients. It has been a real eye opening experience and we have learnt a lot on the journey. At the minute my head is spinning but I wanted to share a few random thoughts. Apologises for their rough and ready nature…

  • Beta users rock! – The best thing we did was release a beta. Getting feedback from real users blew away our carefully laid plans and ‘all knowing’ attitude. Our beta users came up with some awesome ideas, and found horrendous bugs. However, even when they criticised the application they were amazingly encouraging. I can never thank them enough and would encourage anybody building an application to take a similar approach.
  • Cherish your users – I know saying ‘customer service is important’ has become a cliché but that is because it is true! People are so grateful when you answer their enquiries quickly and efficiently. You can defuse an angry customer by simply being helpful and attentive. It is not difficult.
  • Keep it simple – The temptation to add more and more features is overwhelming. People come up with great ideas and you have the overwhelming desire to use them. However, resist this temptation. I am so glad that I have read both Subject to Change and The Laws of Simplicity while developing this app. Both have encouraged me to keep things simple.
  • Don’t rush into features – There is also a desire to implement great ideas quickly. Somebody suggests something so good that you just have to add it. The trouble is this can lead to all kinds of complications. I have learnt it is better to consider an idea for a couple of weeks before implementing.
  • Pricing is a bitch – I hated this part. We looked at the competition, considered the value to the client and still couldn’t settle on a price. Unfortunately, it was hard to rely on feedback from beta users in this area. After all, they wanted it to be as cheap as possible. In the end it was Ryan Carson who helped the most. He warned against under pricing and rightly so. I think we all have a tendency to devalue our own work.
  • You only get one chance – This is currently terrifying me. You get one chance to make a first impression. I know the current wisdom is to release early, but if you release crap then users will never come back. Hopefully we have struck the right balance between quality and getting to market quickly.
  • Treat it like client work – This project stagnated for ages. It was something we wanted to make happen, but slipped because of paid client work. The way we kick started the project was by pricing and running it as a piece of client work. Only then did it get the priority it deserved.
  • Don’t fear competition – The first time we heard about a competing product we were gutted. By the third and forth we were in danger of slipping into despair. However, actually there was no need. Competition is good. It spurred us on and we even learnt from mistakes our competitors made. However, most importantly of all it made us focus. Until then we were trying to build an application that met the needs of anybody wanting design sign off. After we became aware of the competition we focused our app on meeting the needs of web designers. We decided to go niche and it was the best thing we could have done. While our competitors struggle to meet disparate needs, we focus on the requirements of a single target audience.

In reality we are just at the beginning of our journey. We have so much more we want to do with GetSignOff. However, there is no doubt that today is a significant milestone.

All I would ask of you is that you give the product a chance. If after signing up for a free account you like it, tell your friends and blog about it.

A dedicated follower of fashion

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

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

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

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

  • Inspire me
  • Cause innovation
  • Give me confidence

Let me explain what I mean.

Inspiration

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

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

The new and shiny also inspire me to innovate.

Innovation

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

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

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

Confidence

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

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

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

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

Overcoming stagnation

For many websites the days of rapid growth have passed and they have slipped into stagnation. How then can you re-energise a site and start it growing again?

In a recent report that I wrote for one of our clients at Headscape I explained how most websites pass through a common product life cycle. This life cycle includes the following stages…

  • Exploration – Most organisations begin with a series of exploratory sites, where they discover the potential of the web. This often involves low investment and slow growth.
  • Growth – At some point during the exploration phases the ‘penny drops’ and the organisation realises how the web can benefit their business. More substantial investment is made, the site is dramatically improved, and rapid growth follows.
  • Stagnation – Following the initial rapid growth there is a period of stagnation. This is because the ‘quick win’ fixes have been made to the site. Obvious problems have been resolved and so the benefits of fixing these changes have passed.
  • Maturity – Once the challenges of overcoming stagnation have been met, a site enters a period of gradual but steady growth. This is characterised by continual incremental changes to the site, which consistently stimulate growth.

It is easy to generate rapid growth on an early version of a website. There are so many obvious problems to fix. You can have a big impact with relatively little effort. However, what happens once that stage is over? How do you avoid sinking into stagnation?

Overcoming stagnation

Stagnation is not an entirely negative period. Although it consists of slower growth, it does not mean a decline. However it does generate fear…

  • A fear that growth will turn into decline
  • A fear of the competition catching up
  • A fear of losing customer loyalty

This fear can lead to knee jerk reactions that are detrimental. This mentality manifests itself in two particular reactions. First, it leads to panic decision making. Something has to be done and it must be done now. Second, it leads to the creation of additional features. These two reactions often go hand in hand. As growth slows, organisations seek ways to maintain momentum. One source they turn to is user feedback. However, instead of considering the impact of suggestions on the overall usability, they instead grasp hold of it ‘as something we can do’ and implement immediately. This leads to feature creep and complexity. Before long all vision for the site is lost and the organisation has become reactive.

This can be overcome in three ways…

  • Going back to basics – Step back occasionally and ask two questions. Why does your site exist and who is it aimed at? So much time can be spent troubleshooting, adding features and responding to requests, that focus is lost. It is easy to spend time placating the requests of the vocal minority, while damaging usability for the majority.
  • Pause and evaluate – Every website receives criticism. However, it is important to pause before responding to that criticism. Who is criticising? Are they an important segment of your audience, how many of the same comments are you receiving? How serious is the criticism? Is it a mild inconvenience or a serious issue? What are the ramifications of fixing the problem? Who else will it effect and in what way? The danger is that by rushing in to a fix a problem you create more.
  • Simplify – There is a belief that growth is maintained by giving the user more. However, often the opposite is true. Look to solve problems and increase growth by simplifying your site not by adding new features.

It is the area of simplicity where I believe there is most to learn.

The importance of simplicity

There are two reasons why simplicity is important…

  • Simplicity sales
  • Users have limited attention

What do I mean when I say simplicity sales?

Simplicity sells

One of the most successful products of our time is the iPod, and yet it is inferior to its competition in almost all ways. It is more expensive, has inferior technology and offers less features. The reason it has come to dominate the market is because it is simple and easy to use. This simplicity has become the trademark of Apple products and with it has come new-found growth for the company.

There are examples online too. In the early years of the web Yahoo! dominated search listings. However, as the web grew their site struggled to adapt. It became complex and hard to use. It is therefore not surprising that the minimalist interface of Google came as a breath of fresh air and quickly supplanted Yahoo’s dominance.

Google went on to apply this same simplistic approach to online advertising. They swept aside traditional banner advertising, replacing it with simpler text adverts accompanied by a ease to use administration system that allowed anybody to run an ad campaigns. The majority of users will select simplicity over functionality.

Limited attention

We forget that people have a limited capacity to process information. In fact we are only able to process 6-7 pieces of information simultaneously. That is why we find it so hard to learn to drive. It is not until we can process information on a sub conscious level that we feel relaxed driving.

As we translate this principle to the web it becomes apparent why web pages can be so overwhelming. There is simply too much going on. One technique to reduce complexity is assigning user attention points to pages. For example, lets say you have 15 points of user attention to spend. Each item you add to the page costs 1 point of attention. If you want something to stand out it needs more points. This demonstrates that you need to reduce the number of screen elements or risk a lack of focus because points are too thinly spread. This problem is perfectly demonstrated by the difference between the Yahoo! and Google home pages…

Google and Yahoo Homepages

When compared to Google it is obvious that Yahoo! is demanding too much from its users and spreading their attention too thinly. By having so much content and not emphasising any particular element, the whole page lacks definition. It needs to prioritise and simplify its content.

To move a website from stagnation to maturity we need to simplify. This involves making some difficult choices.

Simplifying is hard for two reasons…

  • It is hard to remove functionality you have invested in.
  • It is hard to remove functionality people use.

Nevertheless it is necessary.

When it comes to the mental barrier of removing functionality you need to recognise that it is costing you money. Every time the complexity of that functionality undermines the user experience it is potentially driving users away and reducing profit.

Just because some people use a piece of functionality does not mean you should keep it. Every piece of functionality on your website is probably used. The question is, how much are they used and how badly does it overcomplicate the user experience for everybody else?

The above post is an extract from a report written for WFF by Headscape