Tag Archives: USP

183. Inspired

Posted in Classic shows on by Paul Boag

On this week’s show: Paul shares 3 ways to make your site stand out from the crowd. Matt Curry introduces us to Google website optimiser and Lyle Barras reviews Dropbox.

Play

Podcast: Download (22.1MB)

Download this show.

Launch our podcast player

Housekeeping

A couple of random pieces of housekeeping this week.

Sponsor SXSW

First, we are looking for some Micro sponsors for this year’s Great British Boozeup. In case you don’t know the Great British Boozeup is a party that Headscape and Clearleft have thrown for the last few years at SXSW.

This year we are looking for some additional sponsors. So if you are a company interested in reaching out to the web design community and have £500 to spend, drop us an email and will look at making you a sponsor.

We want to showcase your work

Second, I really want to start showcasing upcoming members of the web design community on Boagworld. Therefore, if you have written a great blog post that you think Boagworld readers would like, drop me a line with a link to the post and we will look at reprinting it on Boagworld. Obviously we will link back to your own blog and publish a little bio about yourself.

Back to top

News

6 Steps to Creating a Unique Selling Proposition

One of the first questions we ask new clients before beginning a site redesign is “what are your unique selling points?” Of course in reality it is extremely rare to find an organisation that have truly unique selling points. However, every organisation should have a clear idea of what their distinguishing features are. What are the things that makes them stand out from the crowd.

What surprises is how few clients know what their USPs are. This is fundamental stuff and yet many organisations fail to address them. Whether online or off an organisation needs to be able to clearly articulate what sets them apart.

There is an excellent post on Sitepoint this week entitled “6 Steps to Creating a Unique Selling Proposition” that kinds the reader through the process of establishing their USPs. The six steps include:

  • Describing your target audience
  • Explaining the problem you solve
  • Listing the biggest distinctive benefits
  • Defining your promise
  • Combining and reworking your promises
  • Cutting the whole thing down into a single statement

It is a great post and definitely worth a read if you are a website owner trying to communicate what your organisation is about online.

Building a blog with HTML 5

Last week I was at the Future of Web Design Tour in Bristol and was fortunate enough to hear Bruce Lawson talk about building a blog with HTML 5. It was a real eye opener.

Many of us have the perception that HTML 5 is a technology we will work with in the dim and distant future, when all the major browsers fully support it. However, that is not the case. Browser manufacturers already support many of the elements in HTML 5 and handle gracefully many of those they do not. The result is that we can start building sites using HTML 5 now.

In Bruce’s talk he built a basic blog live on stage demonstrating many of the new characteristics of HTML. It was an amazing demonstration that significantly improved my understanding of how this new specification would work in practice.

Unfortunately the talk is not online yet. However in the meantime Bruce has released an article on HTML 5 Doctor which covers exactly the same subject.

This is a ‘must read’ if you code HTML. There really is nothing stopping you using HTML 5 right now. However, if you are still to be convinced listen to next week’s show where we plan to interview Jeremy Keith on exactly this subject.

Colour communicates meaning

Colour is one of the most powerful tools in a designers arsenal. Colour can have a profound impact on how we respond to design and significantly influences our behaviour.

However, it is often an area that is underestimated by website owners. They view colour as a personal preference not as something that we respond to collectively. That is why I was so pleased to see Rob Mills post “How Colour Communicates Meaning.”

The post is a great introduction into colour theory and the meanings that are communicated through your choice of colour. The post looks at:

  • How colour affects our mood
  • How different colour communicates different messages
  • The cultural significance of colour
  • How colour is inspired by our surroundings
  • The political and religious associations of colour

It is a great post that introduces the reader to the world of colour theory.

With all of that in mind it is unsurprising that picking a colour palette can be tricky. One approach used by designers is to use a key image or photograph as the basis for a colour palette. Another post we came across this week shows you how to use Kuler as a tool for doing exactly this. So next time you are struggling to select a colour palette checkout this Sitepoint post on how to use Kuler to pick a palette from an image.

The Seven Deadly Sins of Web Project Management

TheSamBarnes.com is a great blog about web project management. We have mentioned it before on the show and it is certainly one of my regular pit stops.

Web project management is not the most exciting of subjects, but one that to some extent we all have to deal with. Whether you are freelancer running your own projects or a website owner dealing with politics and external suppliers, there is no avoiding project management.

A new series on the blog particularly caught my eye. It features the seven deadly sins of web project management. At the time of writing there were only two posts dealing with four ‘sins’. Nevertheless it is shaping up to be a great series.

If you ever find yourself managing projects this is a series you will want to read.

Back to top

Make your website stand out from the crowd

This week we discuss how too many websites look the same as their competition. If you want users to remember your site it needs to stand out from the crowd.

Read 3 Ways To Make Your Website Stand Out From The Crowd

Back to top

Listeners feedback:

A/B Testing

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

I’m Matt Curry, Head of New Media for apetito, and for my sins I’m one of Paul’s clients. We’ve worked with Headscape for around 5 years now, predominantly on WilthsireFarmFoods.com, an ecommerce site with a unique elderly customer base, which if you subscribe to the podcast, you’ll know a fair bit about by now.  As at WiltshireFarmFoods.com we have a healthy obsession with conversion rate and website optimization, so Paul’s asked me to respond to a reader question this week. How exciting.

Joshua writes: I recently read an interesting post over on the 37signals blog about how they use Google Website Optimizer to test different versions of their landing page to see which converts the best. Do you guys have any experience using tools like this? Any tips or thoughts on the subject?

Google Website Optimiser is a tool used, unsurprisingly, to optimize the conversion rate of your site. Now every site ultimately wants a user to do something, be it buy a product, subscribe to service, make a donation or something simply forwarding the article to a friend – if your site has a clear goal, Google Website Optimiser allows you to perform 2 types of tests on your website content, A/B Split tests and Multivariate Tests.

In the case of 37 Signals, they were seeing if Website Optimiser could help them increase the conversion rate of their paid plan signup page – they were testing different variations of copy for the Heading and subheading of the page, to see which combination worked the most effectively.

This is of course nothing new, and indeed, some platforms such as Demandware have content testing built in, alternative analytics packages such as Omniture or Coremetrics also do this, and looking at email content, many ESP’s such as Pure allow you to test multiple subject lines and broadcast times. At Wiltshire Farm Foods, being as obsessed with conversion rate as we are, we’ve performed numerous tests, such any rate changes a new design brings, testing changes to Average Order Value during a price led promotion, and checkout abandonment rates given different variations of microcopy.

Whilst simple A/B testing can be performed in easier ways – remember a simple landing page conversion test can be done by varying destination address in your Google Adwords, Google Website Optimizers power comes from it’s multivariate testing suite. This allows you to perform tests on variations of your content, as in the example from 37SIgnals, to see which combination works better at driving your visitors to action.

However, if you have a particularly complex site, as we have, Google Website Optimiser can be frustratingly limited. For example testing a new product detail page layout across the site – when you have friendly URLs in place, which we do via an isapi rewrite,  can be rather difficult. Google Website Optimiser is very strict on the criteria needed to complete a test, and if you most of your content is dynamically generated, be prepared to write considerable additional code to ensure you’re calling the correct tracking script for each experiment.

If all this sounds too much for you, remember many such tests can be done using User Defined Variables in your Google Analytics. I dearly love the Advanced Segments part of Analytics, and despite “still” not being able to overlay segments, it can tell you a great deal about your site. So, for example, for an A/B test based on a redesign of dynamic content such as a Product Details page, you could set the variable to “New Design” or “Old Design”, and track goal conversion from there.  Just remember to drop a cookie to ensure a consistent experience. Being able to set visitor variables like this in code, rather than having to rely on the strict requirements of Google Website Optimiser, means your open to test a great deal more.

Remember, that if you’re testing a radical change to your website, you should expect an initial drop in conversion – users tend not to like change! You may wish to only test the new design with only a small percentage of your traffic, and increase the percentage as you become more confident. When we launched the new Wiltshire farm foods website mid February, we started with only 1 in 20 visitors seeing the new design, and gradually (or not!) increased it as we saw the positive effect on conversion rate it had.

And of course, nothing even got to this stage without User Testing – but that’s a topic for later!

Personally, I’m surprised by the significant increases in conversion that 37Signals had – how many of us even read the headings of such pages – you normally can’t expect vast jumps in conversion rate unless you are radically changing content.

The most successful variant 37Signals tested was the one that communicated no commitment, a minimal time cost – signup takes less than 60 seconds, and a delayed monetary cost with a 30 day free trial – yet giving immediate utility to the user.  I’m not exactly shocked it won! If you haven’t read Richard Thalers Nudge, which deals with incentives & choice architecture, then I heartily recommend it.

Of course, any good website copywriter would be able to tell you this, without copious testing.  There’s certainly a danger, especially when you are looking at testing and changing copy that each page may end up with a different tone of voice, and your site could easily come across as schizophrenic. If you’re serious about conversion, employing someone to develop an audience-appropriate tone of voice is very important.

I’d be interested if 37Signals play around with the words “Free Trial” – since with nowadays promotionally savvy audience, these words can have negative connotations.

Finally, I would say, as a caveat, don’t get wrapped up in statistics, it sounds corny, but analysis paralysis can happen, getting so wrapped up in each little percentage point increase that you forget the bigger picture. We’re all clever people, we hopefully know our audience, what works and what doesn’t, and we should trust our gut instincts more.

A review of Dropbox

Lyle Barras has been kind enough to send us an audio review of Dropbox:

Hi Paul and Marcus, my name is Lyle and I’m a hobbyist web developer. I’d like to give a quick review of an online tool called dropbox and a little about the way I use it.

Dropbox is an online storage device. You simply sign up for an account at www.getdropbox.com; the free accounts give you 2GB of storage, and then download the little application.

You can download as many copies of the application as you want so that you can sync up as many computers as you want and the really great news is that it’s Mac, Windows and Linux compatible. I have tried it on all three and it works seamlessly. There is also a pretty cool web interface if you happen to be on a machine that doesn’t have the app installed.

As soon as you place a file or folder into the dropbox then it sync’s to the other machines you have set up and the file is there almost immediately.

If 2GB isn’t quite enough you can upgrade to one of the two paid accounts. Pro 50 gives you 50GB for $9.99/month and Pro 100 gives you 100GB for $19.99/month. I think the Pro 50 is pretty good value if your storage need is big enough.

At any time you can refer the tool to your mates. If they then sign up, even for a free account and download the app then you get another 250MB of free storage and so do they. To date I have referred two of my mates and got 500MB free.

I have found one problem with dropbox. When I upgraded my iMac and MacBook I found dropbox to be a bit glitchy and crashy. I did a bit of Googling and found that dropbox had already released a new fixed version of the app.

To pinch a bit of the advertising guff from the site

Dropbox replaces:

  • Emailing file attachments to yourself and other people
  • Using USB drives to move files between computers
  • Renaming files to keep a history of previous versions
  • Complicated backup software
  • FTP servers, system-specific sharing methods, Network Attached Storage (NAS)

As I said at the beginning I’m a hobbyist web developer. I had been using a memory stick to carry round my work as I can really justify one of these posh versioning tools. I was sick of thinking “Right I’ll do a little bit” and find that I have left the drive at home or in the office.

Dropbox replaces all that. I just use it as my memory stick and it’s always there I don’t even need to be connected to the net as long as I have sync’d the machine recently.

I’m utterly sold and couldn’t imagine not having my dropbox now.

Thanks for your time guys, keep up the good work and keep up the dodgy jokes Marcus.

Back to top

The reality of home working

Posted in Mobile, Working in web design on by Paul Boag

An increasing number of people are trading in the cubicle for home working. However, is home working really everything it is cracked up to be? I share what I have discovered after 7 years of home working.

Like many people starting a new business, we begun Headscape working from home. It was a great way to keep costs low and ensure those long hours required when starting a business were more bearable. However the real appeal of home working, was the feeling it provided more flexibility.

The dream becomes a nightmare

To begin with it felt like being set free. I could work in my pyjamas, no longer worry about day time deliveries and get to see my new born son whenever I wanted. Unfortunately, like everything, the honeymoon period eventually wore off.

It did not take long for the presence of my new born child to turn from a blessing to a curse. His constant crying made work difficult and my loud conference calls often brought the wrath of my wife because they disturbed ‘nap time’.

I also found myself craving human interaction. Although my wife and son were around, I found I could go days (or in some cases even longer) without seeing another human sole. In fact there was a period of time when I rarely left the house.

Things weren’t much better when friends and family did come to visit. They seemed unable to grasp that I was at work and I suffered from constant interruptions.

Suffering from a lack of self control

However the biggest problem with my new found freedom was that it required a lot of self control. Many people suffer from a lack motivation when they start home working. They become get distracted by day time TV or making ‘yet another cup of tea’. However, I suffered from the opposite problem.

With work so easily accessible and a new business to worry about I found myself constantly drawn back into the office. For a considerable time all I did in my life was work and sleep. It was damaging to both myself and my relationship with the family. Something had to change.

What didn’t work

I decided that what I missed was the structure of office life. I therefore decided to recreate this structure at home. I started work at 9AM and finished at 5.30PM (at least that was the theory). I even dressed for work and at the end of the business day got changed into my casual clothes.

I set rigid boundaries for friends and family too. While I was at work I was off limits and simply would not interact with others. However, I did try and overcome my feels of isolation by experimenting with a plethora of communication tools. My aim was to enable better communication with other members of Headscape.

However ultimately all of these techniques failed. They failed to acknowledge the very nature of home working and left me with the worst aspects of both home and office.

I became increasingly irritable with family, annoyed by the constant interruptions created by the comms tools I had put in place, and trapped by the rigid routine of the 9 to 5.

The secret to home working

At this point you probably suspect I return to office life. However, that is not the case. In fact where most of Headscape now work in an office, I am one of the few hold outs who refuse to give up home working. I love it. It just took me a while to work out how to make it work.

The secret to home working is finding a balance. You need to put boundaries in place that ensure you strike the right work/home balance. However you must also ensure those ‘rules’ are not so restrictive they suck the pleasure out of home working.

Take for example working hours. I required boundaries. On one hand I needed to limit the hours I worked. However, I also had to overcome the guilt I felt when I believed I wasn’t working hard enough.

The answer wasn’t working 9AM to 5PM. This simply imposed an office model on a home environment. Rather I started tracking my time. Each day I work an 8 hour day. However rarely is that in normal business hours.

I tend to start around 9ish, but as anybody who follows me on Twitter knows I often take a nap in the afternoon. This suits my body clock and takes full advantage of my home working environment.

I also feel free to stop when friends or family come around. I often go for coffee or even see a movie with my wife. I then make up the time in evenings or weekends. Because I track the time, I do not need to feel guilty about these distractions.

I know what you are thinking- what if one of my colleagues needs something from me when I am out? Well, I always ensure I am instantly contactable. I have my iphone and will always answer it even if that means walking out of the movie. Also, I normally carry my laptop and 3G modem so I can act on things immediately if they are urgent.

Of course, I am not naive. If you work in customer support or as part of a closely knit team then this would not be possible. However if you do, then home working is probably not ideal anyway.

I think that is the problem with a lot of home working articles. They fail to take into account the huge variety of factors that can affect how you work from home. It is impossible to tell anybody how they should work from home because…

  • We all have different characters
  • We all have different job requirements
  • We all work in different home working environments

That said, I do think there is at least some advice I can give in regards to working environment.

Your working environment

When I first started home working we converted our dining room into an office. I did at least get one thing right. I realised the importance of having a dedicated working environment. You cannot work from your kitchen table when the room is also being used by the family. It just doesn’t work.

However, what I got wrong was the room I picked. Our dinning room was right in the middle of our house, between the kitchen and living room. Only a partition wall divided it from the living room and so I could hear everything happening in the house and vice versa.

Now my office is a converted garage adjoining the house. Its only link is through a heavy fire door and utility room. It is essentially a separate area exclusively for my work.

My home office

Pick your working environment carefully. Ensure you have a room away from the rest of the house. It will make a world of difference. Also, spend time and money to ensure it is as nice a place to work as possible. Lots of daylight is the key for me. That and nice furniture. If you don’t make your home office a nice place to work, it will become a prison you learn to hate.

Of course, no matter how nice your home office it will eventually drive you crazy. When you work and live in one place, you eventually feel the need to get out. That is where I am grateful we have a company office too. I have found myself really enjoying the change of environment and the opportunity to speak to real live human beings!

If you don’t have an office, then try working from a coffee shop or even break free from the office model entirely.

Beyond the office

While most companies are considering allowing their employees to home work I am beginning to experiment with leaving the idea of an office behind entirely.

The realisation that there is no need for me to be constrained by any kind of office first struck me when reading ‘The 4 Hour Work Week‘. Although there is a lot in that book I disagree with, I do think it gets one thing right – most of the work we do does not need to be constrained to a particular location.

Take for example this post. I am currently flying at 30,000 feet over the Atlantic on my way to SXSW. I can still blog. In fact Dave and Craig (two of our developers at Headscape) are sitting in front of me installing .net on a mac and Marcus is sitting beside me building a wireframe. As long as we have a computer, we can work anywhere.

This is even easier when I am on the ground! For £15 per month I have a 3G modem that allows me web access too. Combined with my iphone and laptop, I have a complete mobile office. I could work from anywhere.

Of course this approach is not without its challenges. My modem may give me web access in the UK, but using it abroad is expensive. That said, there are a growing number of wifi spots internationally so it is a problem that is diminishing.

As with home working the more significant barrier is a mental one. In the same way I had problems working out how best to work from home, I am also having problems knowing the best approach while travelling.

Over the summer I did an experiment in ‘road’ working when I went on holiday to the Highlands of Scotland with the family. I took a week’s holiday and decided to work for a week too, as an experiment. I have to say it didn’t go well. The temptations of the great outdoors and family fun was just too great. I did my weeks work but only just and it was not a pleasurable experience.

View from my window in Oban at Sunset

That said, I know of others who have got it working for them. I just need to find the right way for me. Perhaps I should get up early but stop after lunch. Perhaps I should take a long siesta in the middle of the day and work later into the evening. The possibilities are endless and one of them will strike the right balance between working and living the life I want to live.

What I am convinced of is that mobile computing has opened up limitless opportunities to work where we want and how we want. All that is holding us back is the status quo and outdated ideologies.

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

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

Sneak Geek

Posted in Reviews, Working in web design on by Marcus Lillington

Marcus shares some thoughts about our upcoming trip to SXSW.

I’ve really been looking forward to SXSW this year. I think it has something to do with familiarity with the whole event and also that Paul and I will be doing a little more than sitting in the audience (and bars).

So, it’s my third year. Does that mean I can say ‘southby’ now instead of the interminable south-by-south-west? I hope so.

Does it mean I can call myself a geek? No chance.

Other than making me feel old (which I honestly don’t care about), being at SXSW does give me a sense that I’m out of place.

In some ways I am a geek, but none of them to do with webs and internets. Following my career as a musician, and the advent of ‘proper’ jobs, I have, and let’s make no bones about it, been a salesman. Salesman is such a dirty word. It’s the complete opposite of ‘cool’ and in no way geeky at all.

I’m not suggesting I don’t have a role within the agency I work for, far from it. I like to think of myself as the person that interfaces (oh god, did I say ‘interface’) with people who are even less web-savvy than I am. This undoubtedly works. I have been blessed with enough intelligence to listen to people like Mr Boag and relay his words of wisdom, often making recommendations based on business objectives, in ways that potential (and existing) clients understand.

I’m likely to get shot down here but, usability is largely common sense and I’ve got bags of that too. But can I do design? No. Can I do any coding of any kind? No. Therefore, I am not a geek.

Ah yes, but geeks aren’t cool. Not like musicians are cool.

So, the SXSW music conference has got to be the real place to be right? I never attended it during my pop days, but, way back in early 90s I did go to MIDEM in Cannes which is the European equivalent. This event was frequented mostly by music business tossers (apologies) who were about as far away from ‘cool’ as you can get and I have a sneaking suspicion that the SXSW music conference is similar.

Conclusion: geeks are cool. Rock stars? No, probably not but the vast majority of the geeks I have met are conscientious, innovative people that really want to make some kind of difference. And, for the most part, very entertaining speakers.
Like I said, I’m really looking forward to southby this year.

7 Harsh Truths about running online communities

Posted in Site content on by Paul Boag

In ‘10 harsh truths about corporate websites‘ I highlighted some of the problems I perceive in how companies run their websites. However, many organisations are not content to simply run a website, they want to run an online community too.

Don’t get me wrong, I am excited to see organisations embracing the idea of community. I have been involved in running virtuals communities since 1996 and in 2004 I wrote about the business benefits of community. To this day I encourage Headscape’s clients to build relationships with their users.

A well run community can…

  • Drive traffic to your site
  • Generate a passionate, evangelistic users
  • Encourage repeat traffic
  • Help develop your products and services
  • Save you money

This is not a ‘rant’ against community, or even corporations running communities. It is an argument against the way they sometimes choose to do so. I continually see the same mistakes being made by organisations. It is time that they faced the harsh realities of running an online community.

1. Technology does not create community

When clients ask for help to build a community, they almost always talk in terms of technology. “We want to add a forum to our site” or “can you create a profile system”.

In ‘10 harsh truths about corporate websites‘ I write about how a CMS will not solve your content problems. In the same way a forum will not create a community.

Vanilla Website

Community is about people and relationships, not technology. The technology is the easy part. You can have a forum like Vanilla up and running in minutes, but it will take months of hard work to build a vibrant community.

If you implement the technology and just sit back then your community will fail. The technology merely allows you to engage with your community in the same way as a telephone lets you talk to your friends. It is a tool and nothing more.

2. Show some commitment

I have already said that building a community takes time, but it also takes commitment.

Too many website owners start communities only to give up when they do not see fast results. A community can take months to get off the ground and years before it shows real returns.

It also takes ongoing input. To make your community successful it must be nurtured on a daily basis. When a user posts, you need to replying promptly. Until your community is well established it will need monitoring multiple times a day.

You also need to demonstrate commitment to the individuals that make up your community. You need to take on board their input, address their concerns and encourage their contributions. You need to show you care.

3. Learn how to lead

As well as caring for your users, you also need to know how to lead them.

This is not leadership in the ‘managerial’ sense. These people are not obligated to listen to you or do what you say. You need to inspire, excite and encourage them.

Running a community requires you to be more like a politician or preacher than a manager. You need to mobilise people around a common cause and stamp your personality on the community.

Unfortunately there are few course that teach these kinds of skills. However, I would encourage you to look at great leaders like Gandhi, Martin Luther King and even Barak Obama for inspiration. These men can teach you a lot about engaging with people and encourage others to follow your direction.

Photograph of Barak Obama

4. An antisocial community is your fault

As the leader of your community, your personality sets the tone. As a result if the community behaves in ways you do not want, then you only have yourself to blame.

I have seen many bloggers write about the negative comments they get on their posts. In most cases this is due to the tone they themselves strike in their writing. Although there are exceptions I believe that users will respond in the same voice you yourself set. If you are irreverent, then so will your users be. If you are rude, expect rude responses.

A good example of this is the social news website digg.com. Digg has developed a reputation for its ‘harsh and juvenile’ comments. I believe this comes from the leadership of founder Kevin Rose in his associated podcast Diggnation. This irreverent, comically and highly entertaining podcast has set a tone that has been carried across by users into the comments.

Diggnation Homepage

This is not a criticism of diggnation. Digg.com has become very successful because of their passionate community. It is merely an observation that you reap what you sow.

5. You need to swallow your pride

Another aspect to leading a community is the need to learn humility. No matter how well you run your community, you will mess up. When you do, how you respond is of crucial importance.

Because of the ‘distance’ that the web affords, people are often more critical than they would be face to face. Feelings are overstated and there is an inability to read the non-verbal signals we normally rely upon. This can often lead to confrontation and disagreement.

I have seen communities fail because the organisation alienated its community by responding badly to criticism.

If you want to run a successful community you must swallow your pride and never respond defensively to criticism. Instead acknowledge the comments and thank people for their honesty. Ask others what they think and hopefully they will come to your defence. If not, then you must seriously consider whether the criticism is valid. If it is then you need to admit your mistake and correct it.

By admitting you are wrong, it is possible to heal a relationship with your community and actually leave them even more enthusiastic about your brand than before.

flickr blog post - Sometimes we suck

6. Stop trying to control the message

If you work in marketing some of these points may make you feel uncomfortable. It feels messy and you do not have control over your message. Unfortunately that is the reality of community.

Community is not marketing in the traditional sense. It is not a broadcast medium, it is a dialogue with your users. Failing to grasp that will rip the heart from your community and force it underground.

I have seen unsuspecting companies experience a terrible backlash from a community simply fed up with being sold at rather than listened to. Users do not want a sales pitch or a feature list. They want the opportunity to feedback and a chance to help shape the future of the product or service they use.

Another tactic for controlling the message is to moderate. In extreme cases I have seen organisations moderate every single user contribution that appears on their site. However, I have also seen companies quietly remove negative comments made about their products and services. This is enormously counter productive because people feel censored and will go elsewhere to express their feelings.

That is the trouble with community, you simply cannot control it. If you do not allow it to flourish on your site and engage with it there, then it will pop up elsewhere where you have no control over what is written.

Adobe complaints on Get Satisfaction

7. Nobody likes to be alone

The final harsh truth I want to raise is that “users don’t want to be alone”. Too many organisations launch a forum with a plethora of topics and discussion areas only to have it lay dormant and unused. The reason – it appears empty, so what is the point of posting.

Before you can even consider adding community features to your site you need a critical mass of users that want to get involved. A lot of companies add community features not because users are asking for them but because management wants it. Communities like that rarely succeed.

Also there is a tendency to go straight for a forum. However, a forum requires a substantial number of users to work. Contributions can often become buried in some thread or topic and remain unanswered because it is never seen. If your community is small you may be better starting with comments, reviews or a mailing list. User contributions are much more likely to be noticed using these tools.

Finally, make sure you are seeding the discussion through new topics of your own. Asking lots of questions is a great way to stimulate discussion and prevent people from feeling like the only kid at the party.

Conclusions

After reading this you might feel that running a community is too much like hard work. You may decide not bother at all. However, that would be a mistake.

The ultimate harsh truth is that your users will be talking about your website, services and products, whether you want them to or not. The only question is whether you want to engage in that discussion.

149. White Hat

Posted in Classic shows on by Paul Boag

On this week’s show: How to become number one on Google *cough*, are customer testimonials worth it and how do you create a reassuring website.

Download this show.

Launch our podcast player

Housekeeping

Some housekeeping to kick off today’s show I am afraid:

Web Design Introductory Training

Drew and Rachel over at EdgeOfMySeat.com are running two training courses next month that look ideal for those starting out in web design. What is more they are offering boagworld listeners 10% off if they enter the promo code ‘boagworld’ at checkout.

The two courses are…

HTML and Web Standards for Beginners – 19th February

a one day course ideally suited to those wanting to get into web design, or perhaps for clients who have to format content with HTML for their websites. Covers the basic web standards principals of semantic markup and separation of content, structure and presentation.

Beginners CSS – 20th February

a one day course for learning CSS from the ground up. We go from zero knowledge right through to building floated, positioned and fixed width layouts.

For more information visit edgeofmyseat.com/training/

Bamboo Juice

Next up is a conference I am really excited to be speaking at. It called Bamboo Juice and is a one day conference taking place at the Eden Project in Cornwall. There is a growing line up of speakers that currently includes people like Jeremy Keith and myself.

It is great to see conferences happening further afield in the UK and I really want to see this one succeed. Please support it if you can. Cornwall is a stunning place and the Eden Project is a must visit. You ticket includes entry to the Eden Project so you will have a chance to look around.

Best of all the entire conference only costs £99! Please, please join us. Its going to be great fun and it should have a nice intimate feel with lots of time for chatting.

You can book your ticket now at bamboojuice.co.uk.

Consultancy Competition

Just a reminder of our free consultancy competition. Headscape are giving away a free days consultancy to a lucky winner. Email us with your name, URL and why you want us to help you out. We will pick a winner at the end of the month.

If you can’t wait that long Paul has started running mini-consultancy clinics via Skype. You can buy 30 minutes or more of Paul’s time and he will chat with you about your site, career or anything else (within reason). Its a bit of an experiment at the moment so if you are interested in trying it out visit the Boagworld forum where he talks more about the idea.

Back to top

News and events

More on jQuery

If you listen to this show regularly then no doubt you will be aware of what a huge jQuery fan I am. I was therefore super excited this week to see the release of a new version of jQuery that builds on what is already an excellent Javascript library.

Most of the improvements are in performance. This is remarkable as jQuery was already one of the most lightweight and speedy libraries available. However, they seem to have made some significant improvements.

The main new piece of functionality is something called Live Events. Live Events allows you to bind events (such as a onclick event) to all elements even if they have yet to be created. Let me give you an example. Let’s say you wanted all links with a class=’external’ to open in a new window. Previously you would create a function that added an event to all links with that class so that when the link was clicked it opened a new window. The problem was that if you added more links dynamically to the page you would have to rerun the function if you wanted them to behave in the same way. With live events this is no longer necessary. This is a huge improvement and one that will streamline a lot of code.

I really cannot say enough good things about jQuery. It really is enormously powerful and a real time saver. What you can do with it is quite amazing as is demonstrated by a post from Smashing Magazine this week entitled "45+ New jQuery Techniques For Good User Experience". Whether you use jQuery already or not, check this post out. It will definitely give you loads of ideas for enhancing your sites.

Getting started with HTML 5

Talking of new releases, there is a significant amount of buzz surrounding HTML 5 at the moment. This is somewhat surprising considering it is a long way from being finished and some even argue we do not need it in its current form.

Cameron Moll does a nice job of providing a round up of what is currently being written about HTML 5 including a nice little summary at the beginning…

The world isn’t ready for HTML 5 at large just yet, but we can begin preparing for it by using common, semantic selector names (header, nav, section, etc.)

To be honest it is still early days for HTML 5 with some estimating it will be released in 2022 some estimating that it will not be fully implemented by browsers until 2022. With those kind of timescales we can afford not to care. Jeff Croft puts it up nicely in his post "Two Thousand and Twenty Two" where he says…

It ultimately doesn’t matter if HTML 5 is available next month, next year, or fifty years from now. Those of us who do real work in this industry know that the only thing that really matters is what specs and technologies are supported by the browsers real people use.

Jeff came under a lot of attack for his post but I have to say I agree with him. What matters to real web designers and real website owners is what browsers will support now. So my advice is to ignore HTML 5 now and brush up on your WCAG 2 instead!

Web design trends for 2009

We turn now to the more immediate future and a post by the people over at Smashing Magazine. "Web Design Trends of 2009" endeavours to look at emerging trends that could become mainstream over the coming year.

To be honest I am not sure these are some much web design trends of 2009, as a look back at the end of the last year. However, it makes interesting reading none the less.

The trends listed include…

  • Use of letterpress typography, where text is ‘punched out’ of the background
  • An increase in the richness of user interfaces through the use of Javascript
  • The general acceptance of PNG transparency
  • Big bold typography
  • An increased use of font replacement using tools like sFIR
  • More sites than ever using overlay boxes to display images and video
  • A proliferation of video and screencasts
  • Blogs adopting a more magazine orientated design aesthetic
  • Lots of Javascript slideshows wherever you look

Nothing particularly surprising, but the article does provide some inspiring examples of these different trends and analysis about wh
y they are becoming fashionable.

Your website can thrive in a recession

We conclude today with another post about the recession. To be honest I am getting sick of talking about it. In fact I suspect it is turning into a self fulfilling prophesy. However, Gerry McGovern has written an interesting post about how your website could thrive in a recession.

The article mainly focuses on the cost savings that can be made by bringing customer interactions online. He quotes research which states:

the average cost of a web interaction is 27 pence, the average cost of a phone interaction is 3.76 Sterling and the average cost of a face-to-face interaction is 9.34 Sterling.

He goes on to say:

So, it is 14 times cheaper to allow a customer to complete a task on a website than to have the customer complete the same task over the phone. The Web is 35 times cheaper for completing such a task than a face-to-face interaction. Isn’t that a compelling business case for a website during a recession?

It is an interesting argument and one that may sway some of the people holding the purse strings. However it fails to take into account the upfront development cost of moving customer interactions online. For better or worse companies are focusing on short term cost savings at the moment rather than long term expenses. As a result some web design projects are being put on hold.

Nevertheless if you work for an organisation that deals with a large number of customers then this article is a powerful arguement. It is certainly something that you need to show your boss.

Back to top

Feature: Becoming Number One On Google

‘Become number one on Google’ – The dream of every website owner and titles like that grab people’s attention. What can you do to help achieve that dream without resorting to black hat techniques? Read More

Back to top

Listeners feedback:

Customer testimonials – Are they worth it?

Question from Dave Rupert –

“Client Testimonials” – whenever some marketing aficionado comes up with these they want them on the site. When was the last time you thought “OOOOH CLIENT TESTIMONIALS!! OMFGWTFBMXBBQ!!1!” and clicked to go see a whole page of them? Are these out of date? Does anyone care about them? Are there examples of good implementation? Do you use Client Testimonials on your site? If so, why?

This is a good question because it has made me question something that I have always considered to be a really good thing on websites.

I think someone in Dave’s position – who I assume is a web developer/owner – won’t ever get excited about a list of client testimonials. Let’s face it, they’re not for Dave. They’re meant for visitors to the site to try and persuade them that buying a product or hiring a service is a good idea. The idea is that customers are far more likely to trust a testimonial from an existing client than the marketing speak on a website.

But this is where I have started to question my thinking. For example: “I am Mr X from company Y and I have to tell you that after using these people’s services I am now a better, more rounded person and I have decided to name my first-born after the MD”… this rather points to the fact that Mr X is the MD’s brother/drinking buddy/receiver of folding in a reverse handed way (delete as appropriate)… or even the MD himself!

So, do potential customers place any value in testimonials or do they instantly think they are fiction. In my opinion, I do still think they have value, particularly if you back up an online testimonial with that particular client’s contact details in a proposal. I also think that video testimonials have more value than written ones because (unless they are a complete setup) you will be getting the client’s real feelings and you can watch their body language.

Slightly going of point, regarding providing client contact details for inclusion in a proposal, I have started to ask potential new clients which of our existing clients they would like to talk to rather than simply providing a list chosen by me. I think this adds a further degree of trust.

Fundamentally, I do still think testimonials are a good thing and we will continue to use them on our site. But I don’t think I will be placing so much importance on them as I used to.

How do you make your site feel safe

Kevin Dees asks an interesting question on the forum:

I don’t know if this question has been asked before but I’m interested in what other designers have done to help make a site "feel safe".

Many times I find myself leaving e-commerce sites… because they do not feel safe. I find that this is due to poor design. Big flashing buttons and the like make me wonder if I’m going to get scammed.

So, I guess what my question is "how, as a designer, do you make your site feel safe, welcoming, and secure with the design itself? What are good practices? How do you make users go were you want them to, yet make them feel like they are still in control? What do you suggest adding or even keeping way from when it comes to design"

The answers he got in the forum didn’t really address his question. They focused on the realities of making a site safe (security and technology) rather than on the perception of security.

A site maybe the safest in the world but if the design isn’t right you are left with doubts. Take for example the new US government site that allows people to apply for visa waivers every time they travel to the US. One would hope that a site collecting that amount of personal data would be extremely secure but the design leaves you wondering if it is legitimate. It just doesn’t ‘feel’ professional.

I have spent a long time trying to come up with an answer for Kevin. However, I have found it hard to define what provides that sense of security. Part of the problem is that I think as a web designer I am more sensitive to the ‘vibe’ a site gives off than the average user. I am not sure I am best placed to judge.

Also, a lot of the things that occurred to me where content issues more than design. Delivery policy, site security, returns policy etc. are all content issues and so do not answer Kevin’s question.

However a few things have come to mind…

  • An attention to detail – Sites that lack an attention to detail always make me nervous. Poor browser support, bad grammar, inconsistencies and ill considered design reek of unprofessionalism. If I am going to spend my money on a site, I want to know that money and time has been invested in its creation. If an organisation is shoddy in the production of their own site, then I can probably expect the same attitude in the way they interact with me!
  • Structure – I think a strong grid structure is very reassuring. It conveys a sense of order that is disconcerting when not there. I think that is the problem I have with the US immigration site. The form you have to fill in is all over the place. Fields don’t line up and the site lacks any sense of order.
  • Colour – Misjudging colour can have a serious physiological effect on how we perceive a site. Some colours ar
    e naturally more trustworthy than others. Blue for example has a very safe reliable quality. However using a conservative blue on a site aimed at young girls will project entirely the wrong image and make the audience suspicious of your site.
  • Trying too hard – Some sites just try too hard, shouting for attention. Flashy graphics, heavy sales copy and advertising orientated imagery all scream desperation and manipulation. People do not like to be manipulated or pushed into responding. They like to move at their own pace. Push them too hard and they will run away.

I am not sure I have done particularly well at answering the question either, but hopefully there is something in there you might find useful.

 

What's in a name?

Posted in News on by Paul Boag

I am proud to announce that the Boagworld podcast has won this years .net magazine award for best podcast. However, I do also have some regrets.

It is getting embarrassing now. When I setup the Boagworld website and subsequent podcast it was just a personal side project. The name was a silly in joke. I put no consideration into it.

In the dot com boom I worked for a startup called TownPages. I headed up a team of designers who unsurprisingly enjoyed taking the piss out of me. One of those designers (a guy called Rob Crook) took offence at me having two monitors, while the rest of the team had to make do with one and so coined the term boagworld. He painted me as an empire builder, drunk with power :) The name stuck and eventually I bought the domain. It became a form of self deprecation that referred to my over inflated ego.

When I finally decided to create my own site Boagworld seemed the obvious choice. The site and podcast was me sharing about myself, why wouldn’t I choose Boagworld?

Four years on and it has become an embarrassment. Winning the .net award has particularly driven home how bad a choice it was.

Boagworld has long since stopped being about me. It is about the community and those who contribute to it. The success of the show is down to a whole bunch of people:

  • Marcus Lillington – He didn’t even get a mention in the .net magazine!
  • Ryan Taylor – Who produces the show every week
  • Paul Stanton – Who finds all of our news stories
  • Anna Debenham – Who publishes the show and edits the interviews
  • The interviewees – Who come on the show every other week and share their knowledge and experience
  • The forum leaders - Who make the community such a vibrant and friendly place.
  • Those who leave posts in the comments – Many say blog comments are negative and aggressive. That has never been my experience on boagworld. You guys add genuine value in what you post.
  • Those who contribute to the show – Your questions, jokes, and reviews have added an extra dimension that was lacking for a long time.
  • Our transcribers – Who painstakingly write out a transcript of every interview we broadcast. It blows my mind that people do this for free!

Trust me, this is not false humility on my part. I am more than happy to shout about my personal achievements. However, I have noticed the more I hand control to the community, the more successful the show has become. Perhaps there is a lesson there for other website owners.

So am I going to change the name? Of course not. I think it is too late for that. Anyway I suspect many of you would object. However, it does make you realise just how important it is to get your branding right from the beginning.

146. Obsessive

Posted in Classic shows on by Paul Boag

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

Podcast: Download (24.0MB)

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

141. Feedback

Posted in Classic shows on by Paul Boag

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

Download this show.

Launch our podcast player

News and events

Working from home

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

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

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

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

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

Everything you know about CSS is wrong

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

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

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

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

Reduce your business costs with free stuff

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

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

Ideas include:

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

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

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

HTML Email: What mail clients are people using?

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

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

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

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

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

Alex goes on to summarise the key findings which include:

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

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

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

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

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

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

Paul Boag: Yeah that counts. I guess..

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

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

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

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

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

Paul Boag: Obviously not.

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

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

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

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

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

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

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

Paul Boag: All hell broke loose.

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul Boag: It’s that graceful degradation.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

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

Back to top

136. Stagnation

Posted in Classic shows on by Paul Boag

In this week’s show we talk about overcoming stagnation and Ed Merritt shares a technique to achieve fixed footers without the use of javaScript.

Download this show.

Launch our podcast player

News and events

Design by committee vs design by community

We all know that design by committee sucks, but why? What is it that makes the process fail and what would happen if you took it to the extreme, and opened up the design process to an entire community?

That is exactly what Mark Boulton has done with the redesign of the Drupal website. With over 200,000 registered users this is a significant community and not the kind of environment where you would feel inclined to design in the open.

However, according to Mark it has generally been a success.

The key would appear to be scale. In design by committee you typically have a handful of decision makers, and one or two dominant individuals who overwhelm the others. It is an environment of conflict and compromise.

However when designing by community, the sheer scale of the community drowns out anybody who seek to dominate the process. You move from an environment of personal opinion to one where you are monitoring emerging trends.

So next time you have a client wanting to design by committee, consider opening up the process rather than locking it down to one or two decision makers.

Self Directed Projects

When was the last time you worked on a personal or internal project? Do you do anything that is not paid client work? If not, then according to IdeasOnIdeas you should start.

This post interviews several designers about their their non-client work. It becomes obvious as you read that self directed projects offer real tangible benefits. These include…

  • R&D – The chance to experiment with emerging technologies and techniques, that otherwise you would not get to try out.
  • Build visibility – Higher exposure online as people are attracted to your work.
  • Prove capability – Demonstrating your ability to deliver solutions not in your portfolio of client work.
  • Increase skills – Allowing you to improve your skills in areas where they are weak or have not been maintained.
  • Team building – Building a sense of common purpose among your team in a way that is more engaging than client work.
  • Creates passion – Allowing you to work on a project that generates excitement rather than ones that simply pays the bills.
  • As a release mechanism – The chance to play, and let off steam after the limitations of client work.

    • After years of spending all my time on client work, I have now reached a point where most of what I do is self directed and I can honestly say it is a joy. I also think it has been hugely beneficial for Headscape.

    Understanding Disabilities when Designing a Website

    Back when I was a teenager the government launched a massive campaign warning of the dangers of unprotected sex and in particular the risk of contracting HIV. It was a very powerful campaign and led to a generation growing up much more aware of the risks. However this campaign wasn’t followed up for the next generation and the rates of sexually transmitted diseases increased.

    Why do I bring this strange analogy up? Because I believe we are in danger of doing that with web accessibility. Many of us are getting bored of talking about accessibility. It feels like we are covering the same old ground. Why do we need another article about accessibility basics? We have heard it all before, right?

    Well maybe some of us have, but there is a new generation of web designers who have not. They need to know what we take for granted. Also, it wouldn’t hurt us to be reminded every once in a while.

    That is why I was so pleased to see Digital Web publishing an introduction to accessibility this week. Sure we have heard it all before and you might be tempted not to bother looking it up. However, I would encourage you to take the time. I guarantee it will give you at least one piece of advice which you fail to implement currently.

    More ways to find inspiration

    I often talk about how we need to look for inspiration beyond the web. In fact in this weeks Smashing Magazine, they post some incredibly inspiring graffiti that is worth a look. But, can we be inspired by other websites or does that always end in plagiarism?

    It’s a dangerous game when you start turning to gallery sites for inspiration. Before you know it you can find yourself lifting far too much of the design.

    How then can you be inspired without ripping off somebody else’s website? One way is to look at the design and ask yourself which specific elements you like. Is it the navigation, their styling of bullet lists or the way they handle the footer. By looking at individual elements rather than the whole you remove the temptation to copy the entire thing.

    This is what a designer from Portugal has done. He has made screen grabs of websites and placed them in his flickr account. However, rather than grabbing the entire site, in most cases he captures only a fraction of the page. He removes the temptation to steal a whole design and yet provides himself with inspiration next time he needs to design a comment form or build an online calendar.

    Take a look at his inspirational flickr feed and hopefully it will encourage you to take a similar approach.

    Back to top

    Feature: 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? We look at this in this weeks feature.

    Back to top

    Listeners feedback:

    Fixed Footer without javaScript

    Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

    Ed begins…

    A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough. Read more here.

    Back to top

    Fixed Footers without JavaScript

    Posted in Development on by Paul Boag

    Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

    A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough.

    This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

    I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

    The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

    Firstly, here’s a demonstration.

    The HTML

    <div id="container"> <div id="content"></div> <div id="footer"></div> </div>

    The CSS

    *, body {margin: 0; padding: 0;} #container {display: block; position: absolute; min-height: 100%;} #content {display: block; margin-bottom: 3em;} #footer {position: absolute; display: block; bottom: 0; height: 3em }

    IE6 Stylesheet

    body, #container {height: 100%;}

    this should be referenced using a conditional comment:

    <!--[if lt IE 7]> <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen"   /> <![endif]-->

    How it works

    As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

    • #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
    • #footer is positioned absolutely at the bottom of #container
    • #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

    Known Issues

    The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

    For example, if your mark-up was:

    <div id="extraContainer"> <div id="container"> <div id="content"></div> <div id="footer"></div> </div> </div>

    In your IE specific CSS you’d need to specify:

    body, #extraContainer, #container {height: 100%;}

    Conclusion

    This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time. Please let me know if you find any problems with it.

    Location aware

    Posted in Development on by Paul Boag

    The web is full of exciting innovations at the moment. However, it is geocoding that personally excites me the most. In this post I explain what it is and why I believe it offers so much potential.

    I am definitely not an expert on geocoding but I have been aware of the idea for a long time. I first encountered the concept back in the late 90s. At the time it entirely passed me by and I couldn’t see why the person explaining it was so excited.

    “Just imagine the possibilities if every file had a location stamp like it has a date stamp”

    I obviously lacked imagination. It all felt too theoretical. Too far off.

    Later the concept was reintroduced to me, but this time all I saw was a world of adverts being pushed to my mobile phone as I walk by the local starbuck. Who wanted that?

    The lightbulb finally switched on when I heard Tom Coates speaking at d.construct last year (Download Tom’s talk: MP3). He talked about a project he was working on called Fire Eagle that allowed applications to pass your geo location back and forth.

    Geocoding is a reality now

    Nine months on and I have finally got to play with Fire Eagle. I no longer need imagination to see the potential, it is no longer far off. Geocoding is here and boy am I excited.

    For me the real power of geocoding comes because of mobile devices. Once your mobile knows where you are the possibilities are endless. My iphone for example lacks GPS but it can work out my position based on cell towers and wifi networks. This enables me to do lots of things…

    All of that I setup for myself in a couple of hours. I haven’t even scratched the surface of what is to come.

    The website owners perspective

    This is not just something consumers should be getting excited about. It offers huge potential to website owners as well, because it provides users with new ways to access their information.

    Consider for a moment what information you hold that is location specific. Do you have physical outlets (or other points of interest) that could be geocoded so users can easily find them? Maybe the content on your site relates to a geographical location (for example a university website). Or would users find it useful to know where you wrote a particular page of content (maybe a travel blog)?

    I am the first to admit that geotagging is still in its infancy. However, there is no doubt it is on the cusp of going mainstream. Consumers have adopted car navigation systems very quickly and are familiar with adding points of interest (at least where speed cameras are concerned)! It will not be long before that experience makes the leap to mobiles.

    It maybe premature to add location information to your data. but it is certainly the time to start thinking about what information you have that could be geotagged.

    For more on geotagging and fire eagle listen to our upcoming interview with Tom Coates on show 118.

    Favicons: Small but significant

    Posted in Design on by Paul Boag

    Favicons are those 16 by 16 pixel graphics that appear in your address bar, bookmarks and various other places. They maybe tiny, but they are becoming increasingly important.

    Its so easy to ignore favicons. They seem frivolous somehow. As if they belong in the same category as the blink tag or the splash screen. However, although they are small and nothing more than eye candy, they are far from insignificant.

    There was a time where the only place favicons appeared was the address bar in your browser or possibly bookmarks…

    Address bar with Boagworld Favicon showing

    However, recently they seem to have become much more prevalent. Many websites have taken to displaying a favicon when they link to a website. Desktop applications (such as RSS readers) have also used favicons when linking to websites…

    With your favicon starting to pop you all over the place it is becoming increasingly important that it represents your website well. After all, this is probably the only graphical representation of your site somebody is going to see before actually viewing your site.

    Designing your favicon

    So what makes a good favicon? At its most basic level your favicon should reflect your sites brand. A favicon gives you the opportunity to represent your brand in locations where it would be impossible to place your logo. Also when users follow the link associated with your favicon they want to be reassured that they have arrived at the right location. It is therefore important for the look of your site and your favicon to reflect each other.

    So working from the starting point that your favicon should be based roughly on your logo, what options are available to you. I would suggest you can take one of three approaches:

    • Scale down your logo
    • Crop your logo
    • Create a favicon based on (but not the same as) your logo

    Simply scaling down your logo is often the simplest approach. However, the effectiveness of this is dependent on the complexity of your logo. A simple logo should work well as a favicon, but a more detailed design will struggle.

    In the future I suspect it will be standard practice when developing a corporate identity to consider the appearance of a favicon. However until then, if you have a complex logo, then there are two remaining options.

    One option is the approach I have taken on boagworld. Instead of trying to get the whole of my rather half arsed logo to work as a favicon I have cropped and scaled a portion of it. In most cases this is a viable alternative to showing the whole thing. However, occasionally a logo defies even this approach.

    Take for example the flickr logo…

    Flickr Logo

    Because of its reliance on typography it would be impossible to scale or crop into a favicon. Their solution to the problem is to use an icon that is two circles containing their corporate colours. Flickr Favicon

    The result still reinforces their brand identity even though it does not show their entire logo.

    Getting the design of your favicon right can be tricky so you might want some inspiration. If so then have a look at Daniel Burka’s collection of favicons it might point you in the right direction.

    Producing your favicon

    Once you have designed your perfect favicon the next question is how do you get it onto your website. Fortunately there are a number of tools out there which can help you. The one I tend to use the most is a website that converts any image file into a favicon.ico (the file type that a browser will recognise). Simply upload your image and the website does the rest.

    Now that you have your favicon.ico all you need to do is add it to your website. To do that simply upload the file to your website and add the following code (check that the path in the href is correct) to all your web pages. The code goes in the head tag at the top of your HTML…

    <link rel="shortcut icon" href="favicon.ico" >

    Job done!

    Show 96: Moll on Mobile

    Posted in Classic shows on by Paul Boag

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

    Play

    Podcast: Download (31.0MB)

    Download this show.

    Launch our podcast player

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

    News and events

    Social Participation as a business tool

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

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

    Test your website for mobile compatibility

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

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

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

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

    Laying out inline images

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

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

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

    10 Usability nightmares you should be aware of

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

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

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

    Back to top

    Marcus’ bit: When is speculative design okay?

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

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

    The worst case

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

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

    When is it ok?

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

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

    But, this isn’t just about getting paid.

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

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

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

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

    Back to top

    Paul’s corner: Who to ask to tender?

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

    Back to top

    Ask the expert: Cameron Moll on the mobile web

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

    Cameron Moll: Hey, thanks Paul.

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

    Cameron Moll: Yeah it is.

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

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

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

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

    Paul: Uh, October 20.

    Cameron Moll: Um, unfortunately not.

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

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

    Paul: Sure (thoughtfully like he is paying attention)

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

    Paul: Yeah (thoughtfully like he is paying attention)

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

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

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

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

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

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

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

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

    Cameron Moll: Right exactly.

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

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

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

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

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

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

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

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

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

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

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

    Cameron Moll: Hey thanks Paul.

    Back to top

    Show 93: dconstructed

    Posted in Classic shows on by Paul Boag

    On this week’s show: Paul talks about how to make the most of the footer, Marcus explains why cold calling never works and Gary Marshall shares some great advice on writing content.

    Play

    Podcast: Download (27.3MB)

    Download this show.

    Launch our podcast player

    News and events | Why cold calling never works | Making the most of the footer | Gary Marshall on writing better content

    News and events

    iPod Touch

    Unless you have been living in a cave for the last week you will already know that Apple has just released a new range of iPods including the massively exciting iPod Touch. What is so exciting about the iPod Touch is that it is basically an iphone without the phone. This means it has WiFi and a fully functional web browser. This is a major development in the web design world as it will mean millions of internet enabled iPods and a whole new audience in a whole new context.

    What is more Apple has also done a deal with Starbucks where by songs played in Starbucks can be purchased directly on the iPod. I am convinced this is just the tip of the iceberg in terms of context / location aware mobile web. It won’t be long before you arrive at a University Campus and access a campus map or go to a shopping mall and access all of the menus of the various restaurants.

    With the iPod being such a universal device now is the time to think about how you are going to utilize the power of the mobile web.

    Free photo manipulation tools

    This week I came across a site stuffed with loads of free photo manipulation tools. These guys have certainly been busy as there are loads of really fun tools including a Mosaic maker, CD cover creator and even a Hockneyizer. However, probably the most useful tool to us web designers is the palette generator. Upload an image and it will automatically create a colour palette based on it. Nice!

    dconstruct feedback

    This last week also saw the dconstruct conference in Brighton. I was fortunate enough to attend it and got to hear some truly remarkable speakers. I am not even going to try and recount all that was said, however I do want to particularly mention three superb talks.

    Tom Coates, gave a mind blowing presentation on shifting our thinking from a website model to a data model and the consequences of this in terms of how we develop applications and how users navigate data. Tom’s presentation really felt like a glimpse of things to come.

    Leisa Reichelt gave an inspiring presentation about how we develop projects. Amongst other things she talked about Agile development and I have to say this was the first time it has been explained in language I understood. This talk definitely made me reconsider how we run projects.

    Finally, I couldn’t mention dconstruct without talking about Jared Spool’s presentation on experience design. Jared (who is a superb speaker) took us through how to create great experience design, explaining why it is important and how to draw together the necessary skills to make your design stand out from the crowd. Compelling stuff.

    The reason I mention all of this is that all of these talks will soon be released as podcasts and I wanted to strongly encourage you to check them out!

    170+ Expert Ideas From World’s Leading Developers

    The final story today is the release of an article on the smashing magazine website. The guys at the magazine interviewed 50 designers and asked them 6 questions. This has led to an article with 175 professional suggestions, tips and ideas.

    Its always fascinating to see how other designers work so this article is definitely worth a once over.

    Back to top

    Marcus’ bit: Why cold calling never works

    Ok, to say that cold never works is a bit strong because very occasionally it does. I should also qualify that I am talking about winning quality web design work here.

    So, a more appropriate, but considerably more boring, title would be: why cold calling almost never works when selling quality web design services.

    But, in my opinion, you don’t really even need to qualify the ‘what’ you are selling. I guess there are certain products or services that can, effectively, be sold over the phone to a person/organisation that you don’t know but I expect they are few and far between.

    The word ‘effectively’, in the last sentence, is pivotal to this. I would love to see the ratio of telesales staff costs against actual sales won via the telesales force for, say, a double glazing company over the last year. The fact that I seem never to be called these days by double glazing companies suggests that my suspicions are correct and it simply isn’t worth it.

    I don’t know anyone who likes being called out-of-the-blue and certainly, no-one who has actually bought anything through this process. I think most people are instantly ‘on guard’ and mistrusting of a cold call. This has worsened, I believe, over time and has now reached the point where it has almost become a joke.

    Anyway, I’m rambling off the point – back to web design.

    You can’t create a project that doesn’t exist

    This is the main issue. Even if you are lucky enough to find a receptive listener, the chances of calling them right at the point where they are thinking about starting a web project is remote. The best you can hope for is that contact will be made later when a real project does happen.

    You may not be talking to the right person

    It is very possible that the one successful call that you made after a day’s banging the phone was actually to a chatty junior who cannot make or even influence decisions. Asking to speak to the ‘marketing director’ or ‘person in charge of the web budget’ etc is a recipe for an instant hang up.

    Even if you are speaking to the ‘right’ person, chances are they will have to go to other partners or directors and that group will want to know track record, where did the recommendation come from etc.

    Making yourself known

    Ok, so you can’t actually win work cold calling but you can occasionally start the process of winning work through a cold call. However, I would say from experience, that this cannot be a completely cold call. You need at least one thing connecting you to the person at the other end – and the direct mail piece you sent them two days ago does not count because they will have instantly thrown it in the bin!

    The kind of things that can make this type of call potentially worth it are:

    • Work done for one of their competitors (vertical selling)
    • Locality (“we’re in the same town”)
    • Professional connection e.g. a print designer you are close to works for them
    • Social connection e.g. my neighbour Dave Smith works for your accounts department and thought I should call you….

    But remember you are simply selling your professionalism, skills and competence; basically, just the chance to pitch for work when it comes around.

    However, I would recommend that the majority of your efforts are spent on a) ‘hot’ calls to people who contact you with real projects and b) your existing clients as they are usually your best prospects.

    Back to top

    Paul’s corner: Making the most of the footer

    This week I thought I would try and tackle a question from Peter in Italy…

    Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

    The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

    Back to top

    Gary Marshall on writing better content

    Paul Boag:
    So, joining me today is Gary Marshal, a technology journalist and author and many other good things as well. Hello Gary.

    Gary Marshall:
    Hi Paul, how are you doing?

    Paul Boag:
    Not too bad, good to have you on the show, we had you on once before as I remember.

    Gary Marshall:
    Yeah it was a couple of months ago now wasn’t it?

    Paul Boag:
    Yeah it was a little while back. What I thought would be good today is to get you on to talk in broader terms about writing for the web, and writing in general, as obviously that’s what you do for a living. That’s your job, and so I thought I’d kick off with really a question about copy writing and copy writers; do you thing website owners should be looking to get a professional copy writer in to work on their website rather than doing so themselves?

    Gary Marshall:
    I think it depends a lot on the website that you have, if your doing something where your unique selling point is a fantastic price for a product, then it probably doesn’t matter too much what the copy’s like, but the more important the text of your site is, the more important it is to have good text. So take for example if your site is a brochure then obviously the quality of copy then is really, really important. There’s also the technical side of writing as well, which is not so much a copy writer but more of a technical writer for that so you know, product information, frequently asked questions, support, that kind of thing.

    Paul Boag:
    What benefit do you get from getting in somebody who does this professionally in preference to trying to do it yourself, where’s the real kind of money earner in it? If that makes sense, the return on investment.

    Gary Marshall:
    Yeah. Well it really depends on what your sites all about. One of the things about getting a professional to do it is it saves you time, the same way you would get somebody in to do stuff around the house because your time is better spent doing what your good at. But particularly with copy writing, if you get somebody who is pretty experienced in this, what they’re doing isn’t so much writing, but its writing that works. So you know a good copy writer can say more in a sentence than your average guy can say in 700 paragraphs, which is one of the reasons that guys in advertising get paid so much, because they come up with these fantastic strap lines that lodge in peoples minds.

    Paul Boag:
    Yep ok that’s fair enough. Obviously the main thing that puts off people from getting a copy writer is the cost associated with it and sometimes its just prohibitive, although I have to say that I get somewhat confused that people recognise they cant do design and they get a designer in to do that but somehow people think they can do copy which is somewhat confusing sometimes.

    Gary Marshall:
    Yeah, it’s not that expensive. If your going to have a multi page, 1000 page website then yeah it is going to cost you a fair whack of cash, but he majority of writers tend to be paid by the word, so you’ll set a rate, and what it is you want to get and the end result isn’t going to be an awful lot of money. Your looking at a couple of hundred quid for a couple of thousand words, its not a lot.

    Paul Boag:
    No I suppose in the grand scheme of things that isn’t much at all is it? If you think of the amount that people pay for content management systems and design work and usability testing and all that other stuff.

    Gary Marshall:
    Provided they’re good at what they do. Of somebody is going to polish the text in your website, and make what you do sound absolutely fantastic, if that makes the difference between somebody hiring you or not or somebody buying your product or not then it’s paid for itself.

    Paul Boag:
    So, making the presumption that there are some people out there that just aren’t in a position to hire a professional copy writer and its just not an option – what advice would you give someone who is starting out writing copy for their own website? Where would you start? What are the most common mistakes?

    Gary Marshall:
    I think the most common mistakes are thinking from your own point of view rather than from your visitors point of view, I’d say that’s probably the worst offence that you can do, and it’s the old moaner when if you have a frequently asked questions section it’s the questions you hope people would ask rather than the one people actually do ask, you get an awful lot of people where on a website the fist page is the entire corporate history and as a visitor I don’t care, I don’t want to know this stuff I want to know what are you going to do for me why should I hang about here. So it needs to be very much ‘put yourself in the customers shoes’. Have a look at other websites and see what you like about them and what works on those sites. The other thing you need to think about big style is search engine optimisation. I was talking to someone the other day who was saying ‘when we do searches on particular products and particular areas we just don’t come up in the results at all’ and I said ‘do any of these phrases or words feature on your site?’ the answer was no. That was probably why they weren’t featuring in the search results! It might be obvious to you that your search should come up if you look for, I don’t know, web design companies in Brighton, but if you don’t have the words ‘web design’ and ‘Brighton’ in your website its not going to be indexed by any of the search engines. That can be a really difficult one to pull off, you see a lot of  bad copy writing that’s done purely on the basis of SEO, where they’re just trying to get as many different phrases in as they possibly can to try and get it up in the Google rankings and I think that’s counter productive because ultimately your trying to get humans to read this and if somebody comes to your website and the whole thing is stacked with all these meaningless phrases that don’t actually give you any useful information at all, then your just going to go ‘what a waste of time, I’m out of here’

    Paul Boag:
    Do you think there’s a difference between writing for the web and writing for other mediums?

    Gary Marshall:
    Yes

    Paul Boag:
    What kind of differences? What should people be doing differently?

    Gary Marshall:
    The biggest one is brevity, simply because your reading on a screen – you’ve no control over what sort of screen people are going to be reading on for starters, so I might be looking at it on my BlackBerry, you might be using a 22 inch monitor, but web content doesn’t lend itself to huge blocks of text and long, long sentences so you need to think much more visually than you do with the printed page I think, break it up a lot more and have a lot more white space. The way to present it can be important also, even having a bigger gap between lines can make a big difference to whether your text looks appealing or not. Again, work back from the basis of ‘what is it that your visitors are going to want here?’ You need to really start with that. I find that bullet pointing is usually a very good way to approach it. So, you sit down and think ‘what are people coming to my website for? And what is it they’re going to be looking for?’ and answer that first. If you’ve got a bit of spare time go into you full corporate history and everything you’ve done in your life, but concentrate on the purpose of your site first.

    Paul Boag:
    It strikes me that websites, unlike other mediums aren’t linear, so you have the option to start with the top level brief information and highlights, and people can kind of dig down to the in depth stuff if they want to.

    Gary Marshall:
    Indeed, one of the things you see in print a lot is the use of ‘pull quotes’ to draw your attention to a particular bit of the body copy, and its basically a sales technique and exactly the same thing works on websites and can be very effective and can encourage people to read more. The other thing I would say is try not to link too much in your actual body copy because every little blue line there is a potential reason for someone to disappear.

    Paul Boag:
    Ok that’s interesting.

    Gary Marshall:
    I think it can get in the way – if you’re trying to engage people you don’t want people to go off on tangents because you’ve got this short attention span thing going on.

    Paul Boag:
    Yeah I can accept that – the other thing as well is that if the page is full hundreds of links it makes it visually quite difficult to read as well.

    Gary Marshall:
    Yeah and avoid these kind of hover over adverts that infest websites. If it looks like a link I expect it to be a link and if I move my mouse over it and just get ‘find out about hotels in Guatemala’ or something its instantly away from the website. There’s something as well, I don’t know if its true or not but in journalism school they teach you when writing for tabloids you should write on the assumption that your reader is going to be a small child, and I think that can work with websites as well because it really does focus you on getting the information there quickly with the minimum amount of waffle and without going off on huge tangents. And like the old press thing as well where you have all the information in the first paragraph and you expand on it as you go along, so you should be able to chop from the bottom. If you’ve written 500 words, you should be able to chop the bottom 250 off that without losing sense of what you’re doing.

    Paul Boag:
    Yeah that’s good. So, websites are one thing – your kind of corporate websites and things like that, but more and more organisations are starting to use blogs as a method of communicating. Do you think there’s a difference there? What advice would you give to people writing posts for blogs?

    Gary Marshall:
    Be sure that you want to do it in the first place. Jacob Neilson quite famously said the other week that businesses shouldn’t blog, and he’s getting a bit of a headline generator there – he doesn’t mean no business should blog, but it can backfire because the nature of blogging is very much off the cuff, very quick reactions to things and that’s fine if it suits your particular kind if business, but if people are coming to your site for in depth information then I don’t think blogging does suit because by it very nature blogging is your most recent thought at the top so if you don’t have regular readers its quite easy to fall into the trap of assuming everybody knows the context of what your talking about, and they might not because you wrote about it 3 weeks ago or 3 months ago. That’s quite a common pitfall I think. The other thing about blogging is because it’s quick and easy it does encourage you maybe not to craft things as well and not think things through. You have got to remember that this stuff potentially hangs about for eternity. So it might be tempting to, I don’t know, slag off the competition or something but it could well come back and bite you later on. I think with blogging, it comes back to any sort of writing – you need to know what your trying to achieve with it because if you don’t have a clear idea of what your blog is going to bring to your website, and what benefit its going to bring to your visitors and customers it’s a potential massive waste of time and effort that you could be spending on something more interesting.

    Paul Boag:
    Yeah.

    Gary Marshall:
    I sound really negative; I don’t mean to be really grumpy today! But I think it’s a bit like in the early days in the web there was always these wonderful ‘do-hickeys’ and logos you could slap all over your website and lots of people did without actually asking ‘does this bring me any kind of benefit whatsoever?’. Done well, blogging can be a fantastic thing on a website. I’ve seen a few examples of it in all kinds of things – I was looking for drum loops for ‘Garage Band’ and I was looking at the various drum loop companies and I found one that the owners blog, and they talk about how they do the stuff, what they’ve got coming down the line, why they think that they’re great and nobody else is and all this kind of stuff and I really quite warmed to them and that encouraged me to have a look on their website and I ended up spending money on it. Other sites that are just plain old e-commerce things and really don’t care. Unless your doing a kind of niche market where I don’t know, ‘golfing grandmothers’ or something then the very fact that you’ve got a niche people are more likely to pay attention to what you’ve got to say. I don’t care if the marketing director of Comet has a blog; I have no interest in what he’s got to say – so adding it to something like that would be a waste of time. I don’t want to read a blog on ‘great big faceless ISP dot com’ whereas ‘Merchant city music’, which is a music shop in Glasgow, I’d be quite interested in what these guys have got to say, so ‘We’ve got some amazing stuff coming in!’ or ‘we were away seeing a band last night and they were fantastic!’. That feeling that your part of a bigger picture can be really effective, particularly with smaller businesses.

    Paul Boag:
    Yeah, good stuff I couldn’t agree with you more. I think there are a lot of blogs out there that shouldn’t be out there and there are also some places that should be blogging that aren’t.

    Gary Marshall:
    Yeah I would agree with that.

    Paul Boag:
    OK thank you very much for your time Gary, it was really good to talk to you again and no doubt we’ll have you back on the show in the future

    Gary Marshall:
    No doubt!

    Back to top

    Making the most of the footer

    Posted in User experience on by Paul Boag

    The footer is the graveyard of many websites. The place where links are sent to die. However it doesn’t have to be that way.

    This week I thought I would try and tackle a question from Peter in Italy…

    Disclaimer, copyright, accessibility statement and privacy policy; these are the links that can often be found in the footer of a page. Why is it important to add this information on a website and what should this information include?

    Good question! Why do we will fill our footers with all of this stuff? I suspect the truthful answers is three fold:

    • that we are lemmings, blindly following what others have done before.
    • that the only reason the footer exists at all is as a way of “finishing off” the bottom of the page.
    • that the footer is a dumping ground for information which doesn’t fit neatly anywhere else in the site.

    This somewhat reactionary approach cannot be healthy so lets take a step back and look at what is commonly found in footers and what better solutions might be out there.

    What is often found in the footer

    To start with let’s examine the list of footer items that Peter proposed:

    • disclaimer
    • copyright
    • privacy policy
    • accessibility statement

    Legal rambling

    First up, disclaimer and copyright. These two links are often joined by various other forms of legal talk. Generally speaking, these are a waste of time from the users perspective, but often have to appear for legal reasons. Exact legislation varies from country to country (for example in the UK you have to display certain company registration information), however few people actually care about this stuff.

    If nobody cares about this information why are we linking to it from every single page of the site (as footers tend to be universal)? What is more, why do we separate them out into numerous links? Why don’t we simply have a single link marked “legal information”?

    Peter in his question asked what should be included in this information and to be honest I dare not try and answer that. I am no lawyer and as I have already said the answer will depend on your location. However, I would suggest that where possible this information is written in plain english rather than the legal jargon used on many sites. Take a leaf out of the creative commons book.

    The users rights

    Peter also mentioned privacy policy in his question. I would bundle this into a general category that appears a lot in footers. Lets call it “user rights”. This includes things like privacy, return and cancellation policies.

    Unlike the legal ramblings, depending on the type of site, many users may actually be interested in this information. On ecommerce sites in particular users want to know these kinds of things and having that information gives them the confidence to buy.

    If you are selling stuff or if you are collecting personal data then consider including this kind of information in your footer.

    Accessibility

    Finally, the last item Peter identified is the accessibility statement. I have to say I like seeing an accessibility statement link in the footer. It tells me that the website owner has at least considered accessibility and thinks it is important enough to justify a link on every page. However, although I appreciate the sentiment I feel that there are better ways of going about it.

    The trouble with an “accessibility statement” is that it smacks of more ass covering. The emphasis is on defending the site against those that might criticize it rather than helping those users with accessibility needs.

    If you are having trouble using a site because of a disability you do not immediately think “what I need is an accessibility statement”! What you actually think is “I need help”. Accessibility should sit under a help section and should be written within that context. “What help can you provide people with disabilities” rather than how do you defend the fact that your site doesn’t scale.

    Of course it could be argued that people only look for help as a last resort. Perhaps it should be sold as a “guided tour” instead ;)

    Whether this help section (or whatever you call it) should be on the footer at all is another matter. In my opinion it is too important to leave in the graveyard of your average footer. However maybe if the footer becomes something more, it might be the right place. That leads us nicely on to asking what role the footer should actually fulfill.

    What role the footer should fulfill

    So if the footer is not a dumping ground for rogue links, what is it for? Well for a start, I would suggest it has a lot more power than we give it credit. Think about it for a moment…

    • We know most users are now comfortable with scrolling and reach the bottom of the page.
    • The footer appears at the end of the body content when users are looking for their next action (after scanning the page).
    • It appears on virtually every page of your site.

    The problem is that historically footers have been limited to a single line consisting of a few unattractive text links. However, there is absolutely no reason why they cannot be more. A growing number of sites demonstrate that if we free the footer from our artificial constraints it can be a powerful navigational aid. It can provide quick links to killer content and even be used for up selling and cross selling on ecommerce sites.

    When next you design a website I would encourage you to seriously consider how you can make the footer more than a place where unloved links go to die. Take a look around at how others are beginning to use the footer in more innovative ways.

    Show 90: Digg

    Posted in Classic shows on by Paul Boag

    On this week’s show: Marcus abandons Paul to go on holiday. Paul talks about competitive analysis and does an in-depth interview with Daniel Burka, the creative director at digg.com.

    Play

    Podcast: Download (22.1MB)

    Download this show.

    Launch our podcast player

    News and events | Daniel Burka talks about Digg | Competitive analysis

    Hello? Is anybody there? I am so lonely, nobody to talk to, nobody to rant at, nobody to take the piss of! Your listening to boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and this week, I am sad and alone as Marcus is away on Holiday (or should I say vacation?).

    I have to say it is not the same without him. Of course on the upside in many ways its a lot better. Less waffle, no interruptions, no skype problems and you get to hear my undiluted genius. So thats okay then :)

    Because we don’t have Marcus around this week, todays show will be a little different. For a start Marcus wont be saying much, which should make the show shorter. However, in his place we have an extended interview with Daniel Burka the creative director at the social news website Digg. We cover loads of stuff from the difference in designing for social networking sites to working with AJAX and designing for the iPhone.

    I will also be doing my segment as normal. This week I will be providing a quick and dirty introduction to competitive analysis. We will be looking at what you can learn from your competitions websites and how you go about extracting the maximum amount of information.

    But before we can get into all that good stuff we first need to look at what has been happening in the world of web design over the last week.

    News and events

    Eric Meyer tries to prevent history repeating itself

    First up in the news segment of the show today is a passionate call to action by Eric Meyer. Like myself, Eric has been working in the web for a very long time and is all too familiar with the problems of the past. He is a veteran of the browser wars (how dramatic does that sound!) and remembers the many problems that period caused.

    During that time many web designers simply gave up trying to support multiple browsers and instead displayed the now famous message…

    “Your browser is not compatible and must be upgraded”

    It is therefore particularly disturbing when we thought those days are over to see the return of a similar message. As Eric points out in his post, those types of messages are returning in the form of…

    “This site is for iPhone users only.”

    As Eric says: Stop it! Stop it right now. He is absolutely right. There is no reason whatsoever for shutting out users from viewing iPhone optimized pages. Sure they might not look as good on a non iphone browser but other than that they should work fine on a compliant browser. To be honest, even if they don’t, that is still no reason to block non iphone users. If I choose to look at an iphone site on my Windows mobile device or even on my desktop browser, I am not going to expect it to look perfect. However, I could have all kinds of reasons for wanting to do it from wanting to check out the functionality to using an alternative mobile browser that is just as capable of displaying the content.

    In Short, Eric argues (and I whole heartedly agree) that the “best viewed in…” approach to web design is a fools errand. Whether it is the iphone or something else, make sure you avoid that road at all costs.

    6 Keys to Understanding Modern CSS-based Layouts

    Talking about best practice, Jonathan Snook has posted a helpful article for those of you still struggling to move across to modern CSS-based layout.

    As Jonathan says in his post…

    Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

    Jonathan addresses this challenge by talking about 6 key principles that will help you get over this hump. He talks about; the box model, floating columns, sizing with ems, image replacement, floated navigation and sprites.

    Its an interesting list although I am not entirely sure I would include the same items. For example there is no mention of HasLayout or IE conditional comments. However, Jonathan does say it is just his take on things and encourages people to add suggestions in the comments so they are definitely worth reading too.

    How to mix fonts

    So you might be listening to this feeling smug about your CSS skills but how are you with typography? Working with type is a challenging area and one that is very easy to get wrong. That is especially true when trying to combine multiple fonts together in an effective way.

    Fortunately, David who listens to the show, has sent me a link to a cheat sheet on mixing typefaces. Not only does it provide specific examples of typefaces that work well together, it also gives you some basic information on typography.

    I am a great fan of cheat sheets and have a number pinned to my wall including my much loved microformats cheat sheet. So, if you are looking for some advice on typography add this to your collection.

    Making money through forums

    My final news story for this week’s show comes off of the back of a story knocking around here in the UK. A number of large companies have pulled their advertising off of Facebook following the discovery that those ads were appearing on the profile of the BNP (a pseudo- fascist political party in the UK). These companies were unhappy that their brands being associated with the organisation.

    This Facebook story is indicative of a wider problem that advertisers seem to be having with social networking sites and forums in particular. So the question then arises, can you make money from a social networking site?

    For most of us this is not a question we have to deal with. Most of us don’t run social networking websites. However, many of us do run forums and we are looking to make a bit of extra cash from them.

    If that is you then you might want to check out “Can forums still make money?” on sitepoint. This post suggests a load of ways you can improve your return on your forum and make some cash to cover hosting costs. The post is very realistic suggesting that the vast majority of us are not going to get rich from our forums. However, it might help pay for your cleaner (which is what I spend my Adsense revenue on!) and so it is worthy of your attention.

    As a slight aside before I wrap up the news segment of today’s show, the article also links to some useful tips from Google about maximizing your return from Google Adsense, so you might want to check that out too.

    Talking of social networking websites, that brings me on nicely to my interview with Daniel Burka from Digg…

    Back to top

    Daniel Burka talks about Digg

    Paul: Okay. So joining me today is Daniel Burka the lead designer/creative director/God of all things user interface at Digg.com. Is that a fair way to describe you Daniel?

    Daniel: That was a very polite introduction. Thank you very much.

    Paul: Well, it is always good to butter up the guests at the beginning…

    Daniel: [laughs]

    Paul: I find it goes down better that way. [laughs] So Daniel, I thought that it would be great to get you on the show, simply because you seemed to have worked so extensively with web projects centered very much on social participation and web applications, you know, and various other Web 2.0 buzzwords. Obviously Digg.com is a good example of that. And a lot of listeners of this show are still working on content heavy brochure-ware type sites. But, they seem to be really interested in more interactive elements to their site. And so we thought, let’s get an expert on the show that seems to specialize in this area. So, here is my first question Daniel. What do you see as being the main differences between designing and social networking sites, compared to more traditional content heavy sites that I am sure you have worked on in previous lives, so to speak?

    Daniel: Oh yeah, I mean absolutely. I worked on those kinds of sites in the past. The big difference with something like Digg is that all of the content on the site, pretty much, is provided by users and so we're building conduits as frequently as we can where people can provide their input, provide content you know foster discussion, these kinds of things so I guess wherever possible we're not only designing the technically areas that they can do it but focusing the design on encouraging them to participate.

    Paul: So how to you do that? How do you encourage someone to participate in using kind of design tools and design approaches?

    Daniel: Right. I guess the big thing is to make it obvious that other users have provided content to the site. So, making it clear that the Digg count went up because other people you know dug the story. You know, showing which users submitted certain things or which user made a comment. You know that indicates, Oh okay. Other people, like me, have participated and that might be something I might be able to do too.

    Paul: So how did you deal with the kind of early days before Digg had really taken off? Where perhaps you had less content than you do now and you kind of want to give the impression that there is loads going on, when perhaps here isn't?

    Daniel: Right. I guess by the time I got involved in Digg which is about 4-5 months after it had started. So Kevin and Owen originally developed the site.

    Paul: Oh okay

    Daniel: And then they hired the company that I work with in Canada. They hired us to come in and basically do a design review and redesign of the site and that was the primary focus of the redesign was to look and say, Okay, what is this site about? And what the site is about providing input and so the original design which was more definitely designed from an engineer's perspective. It had all of that content, it had all of the facts and the bits and the place to Digg something, but it wasn't very clear at all what you should do or why you should do it.

    Paul: Hmmm.

    Daniel: And so, you-know probably the most interesting thing I have ever done on Digg was to take the Digg count, to make it really big and stick it on the left and stick a really explicit Digg It button under it. So, I mean that's clearing indicating X number of people already participated.

    Paul: Yeah.

    Daniel: And if you want to participate hit the big button.

    Paul: Yeah. The kind of putting right in front of peoples face where they can't possibly miss it, so to speak.

    Daniel: Right. I mean that is the entire purpose of the website is to, you know, say you like something.

    Paul: So what other kind of things did you implement in those early days when you came in and started redesigning the site?

    Daniel: The original focus, I actually thought this was a kind of interesting approach to take. Steven and I were looking at the site and trying to determine that. It already, in some ways, had a fairly large scope to the website. So we were trying to determine where do we get started. Often that is redesign the look of the site or redesign the home page. We looked at it and what is the most important thing here and the story format, I think, was probably the most important thing about Digg. And so we looked at each individual story in the list. There is a whole row of them on the homepage. We got about 15 on there now. And kind of a singled one of those and dissected it and said, What is important about a story? Why did the user submit it? Why is another person going to be interested in it? How do I encourage them to participate into that story? And so, that story format counts for a few different iterations since we started.

    Paul: Hmmm.

    Daniel: I think that being the primary focus of ours.

    Paul: I mean what about the kind of more rich elements that you started to introduce? Where there is a lot less page refreshes that perhaps there once was and you kind of changed the way the people interacted with the site by introducing AJAX and things like that. I mean was that a big shift? What kind of thinking went into that process?

    Daniel: Absolutely. I mean that is critical to Digg's success. Owen and Kevin had already started playing around with AJAX and this was before anybody like Jesse James Garrett that coined the phrase, AJAX. So, we were still calling it Asynchronous Javascript and XML request. Thank God someone has shortened that. And the fact that you are requiring mass participation to make something interesting would be entirely stymied if we had forced a page reload every single time a person wanted to participate.

    Paul: Ummm.

    Daniel: So we are using that all over the place. The Digg It button is the one real obvious place. And then you know especially in the comment system. There are various other areas where we're basically allowing you to have a really low-threshold of participation. No long page loads. Immediate reaction that what I did I got a reaction back from that, so I get that positive feeling.

    Paul: So how does that kind of process work within Digg? I mean are you actually involved in coding the AJAX elements or do you just do the user interface? How do those kinds of accountabilities split up?

    Daniel: Right. I guess we've got a really good balance I think between the development and the UI design. We are really tightly integrated with the different teams. And we are getting big enough now that we can actually speak about them as teams. So generally the flow at Digg starts with it's great we have a really design focused process here that Kevin will come up with an idea and then he and I will bounce the idea back and forth usually and figure out what the pros and cons are and then kind of rough out the design aspect. And then, basically take it from the conceptual stage code it statically and then work with the developers in terms of coding the functionality into it. So I don't do a lot of PHP or very much Javascript, but I provide with them XHTML and CSS and obviously the images and work with them implementing the basic flows.

    Paul: I think a lot of the impression I get is a lot of organizations is still struggling to work out whose responsibility is the AJAX elements. It's kind of client side stuff that is very user-interface oriented. So should it be a designer job or is it kind of so intrinsic in the kind of connecting to the database and pulling out the content and that kind of thing which is actually a developer's job? It's quite interesting to hear how different people do it.

    Daniel: Right. We probably fall into the developer's side of things. You know, it is submitting content to the database which is not horribly different than a normal form submitting to the database.

    Paul: Yeah.

    Daniel: So that is probably how we line it up.

    Paul: Yeah. You guys seem to be doing some interesting things at the moment. One of the things that I imagine is particularly challenging is that you got a tech-savvy audience which is where Digg started. But you're constantly at the moment in this process of broadening that audience out to be more of a mainstream audience. And I'm just interested from a kind of design point of view, and user-interface point of view, what challenges that has presented you as far as shifting that audience. You know kind of in-mid process if you want. Most websites have a fairly good idea of who their target audience is upfront. But you are having to adapt that as the site evolves and I imagine that must be tricky at times.

    Daniel: Oh, absolutely. I mean we started off as you said as very a tech-heavy site at about this time last year. I guess just over a year ago we broadened out very explicitly by introducing other content areas to the website. As we grow, and as a less tech-savvy audience comes in, there definitely is a real dichotomy between the perceived power-user who understands the very complex form type systems versus people who barely used a comment system on a weblog. On different areas of the site that level of experience I guess really comes to the fore. Although, I think I really take inspiration from the FireFox Project in that regard – particularly in Van Gudgers response. He is one of lead engineers on the FireFox Project. One of his best qualities being saying No! during the FireFox development and a lot of power-users perceive that they want all of these options at their finger tips. They want a hundred different options, if there are a hundred possibilities. Where as, in reality, having a simple system actually works better for both the power-user and the relative novice. I think the correlation between what happened with the Mozilla Suite, which was the previous iteration before FireFox which had a lot of different features and a lot of different buttons and customizability, versus FireFox which is really the torn-down simple browser. Which really ended up serving both audiences better.

    Paul: So have you had the kind of guts to take functionality away or are you more kind of hiding it away so that it is still accessible to the power-user wants to go and get it?

    Daniel: Well that is definitely the balance that we try and make. I think hiding the functionality is actually I was just reading a book a friend lent me. John Maeda’s book The Laws of Simplicity and he covers this subject. I think that it is really interesting that you can hide functionality as long as it doesn't feel intimidating and as long as you are not obscuring the functionality. I think you can actually, quite successfully, create a simple site by tucking functionally under the right areas, I guess.

    Paul: That struck me. This whole idea of dealing with different types of audiences is a very challenging area. You have been at Digg for a while now, what has been the most challenging aspect from your point of view?

    Daniel: Well, I think managing user feedback is definitely one of the big points of working at Digg. It is very intimidating working on a site where, every time you want something new, you have about 2 million people seeing it the next day and giving you their feedback on it. It is fantastic! It is really inspiring and exciting – and at the same time horribly intimidating. It is hard not to get frozen-up when you are about to launch something in two days and you kind of have to brace for the criticism because you know that people are going to be critical. And I mean that in the positive sense. They are going to critique what you have done. And so, being able to basically listen to a wide range of opinions and make sure that you are listening to everyone. But, you don't necessarily do what everyone says because there are obviously people with conflicting opinions and there are people who have very specific interests that may or may not be reflected by other people. I think managing those expectations that people want to know that you are listening to them and they want to see their suggestions reflected in what you are doing. Balancing those types of expectations is a really challenging part of the job.

    Paul: So how do you go about that? How do go about deciding which suggestions you are going to implement and which you are not? Do you have some kind of process for that?

    Daniel: I'm not sure if it is horribly formalized. I think the first and really important thing that we've learned at Digg, and I have learned on other projects being worked on, is taking a really deep breath. People will immediately ask for feedback on something, the minute you launch it

    Paul: Yeah.

    Daniel: They will ask for change. So don't make a change for the first week, unless they point out obviously drastic problems that you didn't anticipate. Take a deep breath. Let people give their feedback. Let them get some experience with the change because people are adverse to change generally. Their first reaction is going to be, Well I was familiar with it the other way, now it is different and I don't feel comfortable with that. And so, you will get a lot of feedback in that regard. And then carefully go through and filter and look for themes of feedback from different people. Try to determine why they were giving that feedback. And then iterate from there. I think that iterative process is so important.

    Paul: One of the things that I think everyone has noticed recently about Digg, is that you released this iPhone interface. Everybody is going on about the iPhone endlessly and I am hugely jealous that we don't have it over here in the UK. And so, I am obviously bitter and twisted about it.

    Daniel: [laughs]

    Paul: But, putting that aside there is this plethora of iPhone applications coming out and Digg is one of the people who have done it. Were you involved in that putting it together?

    Daniel: Yeah, absolutely. Joe, who is one of our developers, kind of came over and he was talking about it and was thinking it would be a great idea. And we both kind of got excited and pumped the whole thing out over our weekends.

    Paul: Ahhh.

    Daniel: Big props to Joe Hewett, who is not the Joe who works here, but Joe Hewett has made this great framework basically to start developing for iPhone applications in Safari.

    Paul: Ahhh.

    Daniel: He actually released a prototype of it on Friday afternoon. I think? And we started off from there and started developing. That is what does the sliding effects in our interface.

    Paul: Okay.

    Daniel: And we kind of took what he had done and I think we launched on a Tuesday the next week and on Wednesday Joe had already refined it and made into a kind of framework more people could use. So it was very useful to us.

    Paul: So how do you feel about that, because that is a very different interface to be developing? It is much more controlled. You know the browser you are aimed at. You know the screen size. Was it a pleasant experience?

    Daniel: Oh, absolutely. It was really really fun. I mean, there were a few things that were really fun about it. One, you are absolutely in that controlled environment. I mean people aren't resizing there fonts. You have a controlled number of fonts. You know the resolution. You can accommodate for when you flip the screen and it goes to wide-mode. And plus you are working with a rendering engine that doesn't suck.

    Paul: [laughs]

    Daniel: So it is really fun. [laughs] I mean you can even use advanced Webkit only type rounded corners and all kinds of fun stuff like that so, that part of it is really liberating. I can just imagine if all web design was like that. You know if all browsers were actually as standards compliant as they think they are. So that was fun. But, I think the most interesting thing is that you're working with an input device that is this big-fat-honking finger. And so, everything you do you have to be thinking about that. I think it will be interesting to see who succeeds at developing applications like that. But, you really have to think about pairing things down.

    Paul: Yeah.

    Daniel: When you are clicking with a finger there is no way you can have four or five buttons in a row and expect the person to be able to pick one out when they are sitting on a bouncing bus, with this phone in their hand. And so, buttons have to be really big. The Digg button on the source pages for instance is about two and a half times bigger than one on the normal site. And the links, we considered two different links. One to go to the source and one to go to what we call the Permalink page, the story page, of that particular item. But you know, even having just two buttons per story was much too difficult on the iPhone so we just have one you just can't miss which is a big finger button and it slides over and you get the story.

    Paul: Yeah. Do you think you will be doing kind of more with Digg where you are kind of delivering the content, through other various mechanisms; such as the iPhone? I mean, could you imagine doing stuff with desktop applications like using AIR or anything else? Is that an area that you think you would get into?

    Daniel: I think the really exciting thing is that we are finally getting a proper API out there. And so, I guess we launched the API maybe two or three months ago. Maybe longer than that, I forget, but I think it will be really interesting to see you know if a desktop experience of dig is really valuable somebody is going to pick up that project and go with it.

    Paul: Sure.

    Daniel: And they'll develop it on the API. So, I'm not sure if explicitly if a desktop application will be great, but I could see it having certain benefits and maybe toying around with the idea ñ for sure.

    Paul: Is there something personally you are interested in as a web designer doing, you know, it's a different medium again isn't it? You're going from a browser based environment to a desktop environment. Is that something that interests you personally?

    Daniel: Oh, absolutely. I think it is interesting that those lines are really blurring. I mean, AIRs is that first salvo, in that regard, you really are to a large degree developing a web application. You can develop it in HTML and CSS with basically the same skills it takes to make an iPhone application, or a basic website, you can build an AIR app. That is pretty exciting. I think that once that platform matures, it could open up a whole range of things.

    Paul: From a personal perspective, what is the area of your job that you most enjoy?

    Daniel: I really enjoy trying to make things easy for people. Sometimes is really irks me if Kevin describes my job as making things pretty.

    Paul: [laughs]

    Daniel: I think it is such a minor part of design. You know it is an interesting one. But I think sitting down trying to determine, when you are looking at a fairly complex system you are trying to build, and trying to figure out how to not be complex. What to takeaway, how to design something so that it feels simple by putting the really important things upfront. And throwing it by some users and watching them how they do it. I think it is really exciting to see somebody participate in something that is under the hood really complex, but which they have fun and they feel that they are participating. And they do not put a lot of thought into what they are doing, they are trying to achieve what they came to do.

    Paul: What about the fact that you kind of have been working on Digg for a prolonged period of time and it is that one site you have been working on continually? I guess because I work for a web design agency where I have a series of clients back-to-back and I am doing different things the whole time. Sometimes it strikes me that we're working on a project for a prolonged time is both a blessing and a curse. I just kind of wondered, what you think? Do you really enjoy being able to spend time digging into that one area?

    Daniel: That is a very interesting point, because I also come from the web design company background where I basically would do a different project every month. And until December I was still fairly heavily involved in the day-to-day affairs of my previous company, so it has been a reasonably new experience for me

    Paul: Oh I didn't know that.

    Daniel: To be working solely on one site, with Pounce on the side. [laughs]

    Paul: Yeah. [laughs]

    Daniel: Another site I have been working on. So this is really very interesting. Absolutely, there are so many things fantastic about it. It is really fun to be able to go into great detail and have the time to go back into something you designed previously, and to alter it. It is not necessarily that you made a mistake, but a month later you suddenly realize that a big improvement to that would be if I did X. And so you actually have the opportunity to go back and do those kinds of things. Where as I am sure, if you were working with a client, it has happened before that you know six months later you see something you say it is obvious to me now but it is kind of out of your control. The contract is over. You know

    Paul: Yeah

    Daniel: They're working with a different firm. There are all kinds of things like that. And so, working on something as big as Digg it is really fun too. Within Digg there are lots of different projects. There are different pages. There are new things we are working on. And so you kind of I guess segment them into kind of different projects you can go around in a circle and come back to later on.

    Paul: Do you ever envision a day where you throw out the existing user interface and apply a new one? Or do you think it will always be a kind of evolving iterative process?

    Daniel: Oh, I think an iterative process for sure.

    Paul: Yeah.

    Daniel: I don't want to second guess what is possible in the future. We may have some brilliant idea or new technology that blows our minds. But, I think there is no reason to throw out something that is working pretty well. I think there is a kind a rush sometimes to you know, to start from scratch that real desire to start from scratch sometimes. But something like Digg, I mean it has changed fairly significantly over the last two years, but I don't know if too many people notice

    Paul: Yeah.

    Daniel: Other than a few big pushes we made, that things had changed much. I think that is really healthy that people become familiar with systems. They learn how to interact with them. And to really shake them up, you really better have a damn good reason to do it.

    Paul: Yeah. Okay so last question then before we finish up. Is there any stuff that you are working on with Digg that you are allowed to talk about [laughs] because obviously there are things you are not allowed to talk about.

    Daniel: Right.

    Paul: But the stuff that you are allowed to talk about, what is really exciting you and what are you really enjoying getting into at the moment?

    Daniel: Oh, there is a bunch of things. I think I am allowed to talk about that Kevin mentioned the other day that we are working on the images section.

    Paul: Cool.

    Daniel: So we are going to do right now you can do news and videos. And we are pretty confident we are going to get into images as well. And so we are working on a couple of projects to kind of lay the framework for doing that. So, some people think it is as easy as adding a section

    Paul: Yeah.

    Daniel: And putting a title on it. But if we want to do that, we want to do it the right way. And lay the ground work first. I am working a couple of things I cannot go into great detail unfortunately there so much secrecy here that we can't

    Paul: [laughs]

    Daniel: Layout too much of what we are up to. But, I am really excited that we are headed in this direction.

    Paul: Yeah. The trouble is that you guys get ripped off so quickly, don't you, that you need to keep things quite.

    Daniel: Well. I think it is a combination of problems. One is that we are obviously concerned with people duplicating our features and the other one is that we want to be careful setting expectations. Because if we say we are going to do something, we really want to do it.

    Paul: Yeah.

    Daniel: And I think people will get disappointed if we say, In two months we are going to launch such-and-such. and you know lot's of stuff happens in two months. And unfortunately if that had to get pushed back, and that two months was a totally random date that I pulled out of my head

    Paul: [laughs]

    Daniel: [laughs]

    Paul: See know, we all believe that it is all going to happen in two months.

    Daniel: Shoot! [laughs]

    Paul: [laughs]

    Daniel: [laughs] People will be disappointed or they will feel like we haven't lived up to their expectations I suppose.

    Paul: Yeah. Okay. Well that was really great. Thank you very much for coming on the show Daniel. No doubt we will try and crowbar you again in the future to come and talk to us about Pounce as well. Because that is an exciting project.

    Daniel: That would be fun.

    Paul: Okay thank you very much for your time and talk to you again soon.

    Daniel: Thanks so much for having me.

    Back to top

    Paul’s corner: Quick and dirty competitive analysis

    Great stuff from Daniel! It was really fun to speak to him even though I managed to offend him after we stopped recording by calling him an American (he is Canadian). Hopefully he will forgive me for the ultimate crime!

    Okay, so before I wrap up today’s show lets take a quick look at the subject of competitive analysis. Its actually a segment I have just written for the book I am working on and so I thought I would share what I have covered. The idea is not to make you an expert in the field but simply to allow you to extract as much information as possible from your competitions websites in a quick and easy manner.

    As always I have written this up as a blog post entitled “Quick and dirty competitive analysis” so check that out in the show notes if you want to see exactly what I covered.

    No show next week

    So that is about it for this week’s show. Remember that there will be no show next week as I am going away on holiday too! Yippee! However, if you need your boagworld fix don’t forget you can check out the forum and chat with other people about the poor quality of Marcus’ jokes.

    Back to top

    Advice for CMS users

    Posted in Accessibility, Site content on by Paul Boag

    I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web.

    Introduction

    Although content management systems enable anybody to publish content to the web, they do not guarantee the quality of what is published. Many content managed websites are hard to use, inaccessible and poorly structured not because of any failure in the design or technology but simply because the quality of content is poor.

    This document aims to introduce the reader to good practice for generating web content. In particular it focuses on advice about writing for the web and ensuring that what is produced is accessible to the widest audience possible.

    Writing for the web

    Writing great web content is a particular skill. Although it shares some characteristics with writing for other medium, there are many unique elements too.

    Two traits make writing for the web, particularly challenging. Firstly is the perception that most people have that computers are being cold and impersonal. Many see technology as the enemy and so a good copywriter has to work hard to ensure their copy has a friendly and approachable tone.

    Second is the fact that users rarely read pages in their entirety, but rather scan read. The emphasis is on looking for the next link that will take them one step closer to their goal.

    Below we investigate these two challenges in more depth and suggest some possible solutions.

    Writing style

    Well-written copy should be both engaging and accessible. In other words it should overcome people’s inherent suspicion of technology and ensure that, as wide an audience as possible understand what is written.

    Engaging with the user

    Computers are immensely unfriendly. This is mainly due to their total inability to interpret or communicate the more subtle forms of human communication such as body language and tone of voice.

    The result is that most people find interacting with a computer a cold and frustrating experience. However, there are techniques you can use to avoid the problem. These include:

    Using a personal tone

    By ensuring that your copy is friendly, informal and approachable, you help to counteract the inherent lack of personality associated with computers and the web. Even on a relatively formal site add more informality than you normally would in order to offset the users default perception.

    Writing how you speak

    If you are experienced in writing more formal offline documentation, writing in a more informal manner can be difficult. Although there is no one catchall solution to this, writing as you speak will certainly aid comprehension and generate a more informal feel.

    Avoid being patronizing

    The danger of writing in a more informal tone is that you overcompensate and your writing style becomes ‘chummy’ and patronizing. The writing as you speak rule comes in useful here. Picture your audience and ask yourself whether you would speak to them like that in a face-to-face meeting.

    Making your copy clear

    The W3C accessibility guidelines clearly state:

    Use the clearest and simplest language appropriate for a site’s content.

    In other words ensure that your reader can understand what you have written.

    Many people make huge assumptions about what their audience understands and careful consideration needs to be put into this subject. Particular assumptions are made in regards to:

    Jargon

    A common pitfall is the use of abbreviations and acronyms within web copy. The assumption is that your target audience will already be aware of the jargon used. However, this is an entirely false assumption.

    You cannot always assume that your audience will be aware of every acronym around. For example there are so many acronyms within web design that it would be impossible for one individual to know them all.

    Secondly, the reader maybe relative new to your target audience and so still learning much of the ‘lingo’.

    When writing copy ensure that whenever possible jargon is avoided and where that is not possible that it is accompanied by an explanation. We discuss acronyms and abbreviations further in the accessibility section.

    Reading level

    There are reasons why tabloid newspapers like the Sun sell so well. One of those reasons is because they require such a low reading level. As many as 40% of the population have a low literacy level and yet little consideration is given to their accessibility needs.

    Even when writing for a well-educated audience you cannot make assumptions about their reading level. Many people suffer from attention deficit disorder, dyslexia or other conditions that could affect their ability to process what you have written.

    Below is some advice on how you might go about improving comprehension of your copy:

    • Simplify punctuation – People suffering from a low literacy levels struggle with long sentences that include a lot of complex punctuation. Keep your sentences short and your punctuation simple.
    • Be consistent – There is often a desire when writing copy to vary your language to prevent a document appearing repetitive. Although this has its place it does make copy harder to comprehend. Where possible, use terms in a consistent manner across the whole site.
    • Use numbers not words – By simply referring to 1223 instead of ‘one thousand two hundred and twenty three’ you increase comprehension dramatically as well as shorten sentences and aid scanability.
    • Specify clear actions – If you wish a user to complete an action (for example to click on a button) clearly specify this. Do not assume the user will instinctively understand what is required of them.
    • Use imagery – The saying ‘an image speaks a thousand words’ is very true for low literacy users. If an image will help to convey the meaning of a page be sure to use it to support existing copy.

    Although the techniques above are of particular benefit to low literacy users, they do actually offer benefits to all users. Ease to comprehend copy aids the speed at which information can be digested and helps users scan copy as we are going to look at next.

    Making web pages easy to scan

    It can be a depressing realization that users will probably not read your carefully crafted text. However, the sooner you accept this reality the sooner you can start to adapt copy to aid users in their hunt for information.

    There are a number of techniques that can be used to help a user quickly scan through a page and identify the information they require:

    Front loading

    Front loading applies in two different contexts. Firstly, front-load the page by including a summary of the entire page right at the beginning of the document. This helps the user ascertain quickly whether the page is relevant to them or not. Secondly, front-load each individual paragraph so that the main point is first. Ideally a paragraph should only make a single point (see 2.2.2) but if it is longer then the user can get the gist by reading the first sentence.

    Keep it short

    Usability expert, Steve Krug recommends in his book “Don’t Make Me Think!: A Common Sense Approach to Web Usability” that a copywriter should take his copy, edit it down to half its original length and then half it again. This sounds like an impossible task but it is often easier than it appears. By removing repetition, marketing speak, and ‘happy talk’ (content with no real substance like ‘welcome to this site’) you will quickly find your content substantially reduced.

    Keep paragraphs short

    As well as keeping the page as a whole sort, you should ensure individual paragraphs are short too. Each paragraph should make a single point as this aids both user scanning and comprehension.

     

    Keep sentences short

     

    At a micro level you should also endeavor to keep each individual sentence as short as possible. Again this aids scanability and comprehension but also helps to remove any unnecessary ‘waffle’.

    Break your copy up

    As well as breaking up copy into short sentences and paragraphs you can also aid scanability by using other techniques as well. Look at each paragraph and ask yourself the following:

    • Can I associate a heading or sub heading with this block of text?
    • Could this paragraph be reduced to an easy to scan bullet point list?
    • Is there a key message in this paragraph that users need to instantly see?

    If the answer to the last question is yes, then you might wish to use a breakout box (also known as a pull out). This is a technique originally introduced in magazines to ‘hook the user’. They would take a key line from an article and highlight it in someway (usually in a separate box) to draw the reader into reading the rest of the article. The same technique can be used on a web page to draw a users attention to a key point that they maybe searching for.

    Many good content management systems (including Headscape’s own CMS) provide this functionality.

    Accessibility

    We have already touched on the importance of accessibility when talking about writing clear copy, however accessibility extends beyond simply the copy you write.

    As a content management system user, you are required to go beyond just writing the copy. You are also required to enter the copy into the system so that it can be displayed on the site. This requires you to ‘markup’ your copy correctly.

    The importance of markup

    So what exactly is markup? Markup is the method by which you tell the browser what the content you are entering is, so that the browser knows how to display it to the user. This markup is usually written as HTML.

    So, if for example you want to tell the browser that something is a heading you would mark it up like this:

    <h1>This is a heading</h1>

    or a paragraph would be marked up like this:

    <p>This is a paragraph of text</p>

    Of course, one of the main attractions of most content management systems is that you don’t have to know how to write HTML. Instead the content management system will add the code for you.

    Historically content management systems didn’t even try to understand what any individual piece of content was. Instead they let you as the content management user, style the content to look however you wanted. So instead of telling the system that this is a heading you simply made it look big and bold so users of the site would know.

    Although this sounds like a good approach in principle, it actually opens up a whole load of problems that are too extensive to cover here.

    More modern content management systems, such as the ones deployed by Headscape, ask the user to explain what each piece of content is so that the system can add the proper HTML code.

    The way the content management user does this is normally through a drop down menu of styles much like you find in Microsoft word. You simply select a block of text and choose the style which best describes that text.

    Marking up content in this way brings a whole host of advantages including (but not limited to):

    • The ability to redesign how an individual style looks universally across the entire site without editing each page.
    • The ability to change the appearance of styles based on what device is accessing the content (for example a mobile device style).
    • The ability for screen readers and other assistive technologies to understand the site.

    In short, a well marked up piece of content will be available to a much larger audience and is easier to change and adapt.

    Text alternatives

    Well marked up content is not the only way to improve the accessibility of your site. Another is to provide text alternatives for elements that some users will not be able to access.

    The most common example of this is with the inclusion of images into your pages.

    There are a number of reasons why a user may not be able to see the images on a page. These could range from viewing the page via a mobile device to the user suffering from some form of visual impairment. However, whatever the reason the solution is the same; add alternative text that describes the image.

    Alternative text is only visible to users who cannot see the image and so does not impact the design in anyway. The method of adding alternative text will vary between content management systems but in most cases (including on the Headscape system) you will be asked to add some text when you try and insert an image. A good system will go as far as requiring alternative text before approving an image for insertion.

    A common mistake that is made with alternative text is to use it as a caption for the image rather than a description of the image. The difference is subtle but important. An image of Marcus Lillington our sales director might read ‘Marcus Lillington is more than happy to speak to you about your requirements’. This would be a caption rather than alternative text. Alternative text should describe the image and nothing more. So in the case of our example it should read simply; ‘Photograph of Marcus Lillington – sales director’.

    Finally it is worth saying that the principle of alternative text does not apply just to images. It should apply to any screen element that can only be understood visually. That includes Flash, video, audio or other plugin.

    Meaningful links

    Another common accessibility mistake is with link text. When a content management user creates a link between pages it is not uncommon to see links with phrases like ‘click here’ or ‘read more’. This presents a problem for two reasons:

    Firstly, users who access the web using screen readers often have all links on a page read back as a list in order to save listening to every piece of text when all they want to do is find the next link. A link like ‘click here’ means nothing when read out of context.

    Secondly, many users will scan a page looking specifically at the links. They don’t read the text before or after the link so again they see it out of context. The result is that, like screen reader users, terms like ‘read more’ mean nothing.

    This problem is easily avoided by ensuring that all links make sense out of context. So instead of linking the words ‘click here’ in the sentence ‘click here for more news’ you simply link to the phase ‘more news’ or ‘news archive’.

    Acronyms and abbreviations

    Earlier we talked about how where possible jargon, acronyms and abbreviations should be avoided. However there are occasions where that is not possible.

    In such situations your choices are very much dictated by the functionality provided by the CMS you are using. Unfortunately, many content management systems are not particularly helpful in this regard and you maybe limited to typing out a description in brackets each time.

    However, more modern content management systems such as that provided by Headscape, allow you to select an abbreviation style. You can then enter the full description and this becomes available to the user without destroying the flow of your text.

    This is achieved in a variety of ways but the most common is using a dotted underline. If a piece of text has been marked up as an acronym or abbreviation it will appear to the end user as text with a dotted underline. When the user moves her cursor over the text the cursor changes to a help symbol and displays the full description as a tooltip.

    This provides a full description to users encountering a piece of jargon for the first time, without getting in the way of those who already know what it means.

    Using tables correctly

    Web design has changed a lot over the last few years and so have content management systems. One of the most significant changes has been a move away from table-based layout.

    Table-based layout is a technique that uses tables to position content on a page. However this is an abuse of the table feature in HTML and can cause significant accessibility problems especially for users running on older PCs or using mobile devices.

    We therefore strongly recommend that using tables for layout is avoided at all costs. Instead clearly markup the content using the descriptive styles provided. The system will do the formatting and positioning.

    That said there is still a place for tables. Tables were originally intended for tabular data (data made up of columns and rows, like that found in a spreadsheet). If you have information like this you wish to include on a page, then this is when you should use a table.

    Working with imagery

    Although we have already spoken about imagery in the context of alternative text it is worth noting that there are other accessibility issues relating to imagery you should be aware of:

    Animation

    Animation can be a problem area if not handled correctly, so generally speaking it is better to avoid the use of animated imagery unless it helps explain the content in someway.

    The main reason that animation can be problematic is because certain forms of cognitive disability can be made worse by flashing animation. It can prove distracting and make it harder to process the content being read.

    If animation is to be used we recommend:

    • That the user is given the ability to disable the animation
    • That the animation is not too rapid so that it proves less distracting
    Colour

    Finally, it is worth noting that a considerable proportion of your users will suffer from some form of colour blindness. For example almost 1 in 10 men are colour blind. In addition it is possible that other users will be accessing your site through black and white monitors on mobile devices. It is therefore important to ensure that any imagery you use is not reliant on colour to communicate information and that there is sufficient contrast between foreground and background colours.

    These two issues are addressed in the W3C guidelines on accessibility:

    2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.

    2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

    Further information

    Hopefully this document has been useful in outlining some of the basics of writing content for a website. However, we have obviously only been able to scratch the surface.

    If you would like further information, please do not hesitate to contact Paul Boag (the author of this document) using [email protected].