Web Design News 25/05/10

This week: Things I discovered at Future of web design, google open source web fonts, using flash to fill in the gaps and choosing the right image.

Future of web design

I don’t normally write about the conferences I attend. However, I did want to share a little bit about this years FOWD.

The Carsonified conferences are normally good but this year was exceptional. The speakers were brilliant, the venue was stunning and they even fed us at lunch!

However, that is not why I want to write about it here. My reason for mentioning it is because we was told about four websites that maybe of interest to you.

  • Think Vitamin Membership – Announced at FOWD and launching next month, Think Vitamin membership is a direct competitor to Lynda.com. At less than $1 a day membership you get access to a growing library of web tutorials, 4 online conferences a year, live Q&A sessions with leading figures in the web community and discounted ticket prices to Carsonified events.
  • Text Captcha – One of the speakers at FOWD was Robin Christopherson who among other things talked about the accessibility problems of Captcha. As an alternative he suggested Text Captcha which requires the user to complete a simple logic question before submitting information to your site. What is so nice about Text Captcha is that it has an API you can use to integrate thousands of possible questions into your site.
  • Fire Query – Another great tool came from Remy Sharp. It is an addon to Firebug called Fire Query. Fire Query is a tool designed to help develop in jQuery. It has some great features and if you work with jQuery it is definitely worth checking out.
  • CSS generator – The final tool was recommended by Dan Cederholm and is invaluable if you want to start using some of the more advanced CSS properties. Essentially it provides a GUI that generates code for CSS gradients, shadows and transforms.

http://westciv.com/tools/gradients/

Google open source web fonts

Without a doubt the biggest story of the week is the fact Google has teamed up with Typekit to launch the Google Font API.

The arrival of Google in an already crowded marketplace including the likes of Typekit, Fontdeck and Fonts.com is another boost for web fonts.

What makes Google’s approach unique is that they are focusing on open source fonts. This means the service is entirely free and does not have to rely on Javascript. You just link to the font and away you go as you can see from the example below…

Embedding fonts is easy!

Although their font directory currently only consists of 18 fonts I am sure this will grow quickly. Also with Google’s reputation for speed and robustness some of the concerns over relying on a third party service are reduced.

Web fonts are still far from perfect with issues over download size and anti-aliasing. However, the more companies we see enter this space the faster we will see the service mature. Its good to see Google adding their weight to web typography.

Choosing imagery

Choosing the right imagery for a website can be a significant challenge for web designers. It is even harder for website owners who do not have design training. However, both groups select imagery for websites on a regular basis and their decisions have a significant affect on how users perceive the site.

Image of a website missing a key image

Fortunately the Web Designer Depot is here to help with a post entitled “Avoid Perfect Photo Syndrome.”

The aim of the post is to help us overcome the problem of finding that perfect image. According to the post this problem is two fold…

a lack of ideas and a glut of art

First it helps you overcome a lack of ideas by focusing you on what it is you wish to communicate. It then refines this through experimentation and work association. Finally it encourages us to be original by doing something unexpected and think beyond our first impressions.

When dealing with the glut of imagery available online it focuses on narrowing the field by looking at shape, colour, tone and focus.

For website owners this post is a great introduction to the design principles behind image selection. For web designers it is more of an encouragement to experiment and try rather than endless searching for the perfect image. The post ends with these wise words…

Choosing images doesn’t always have to be hard. Trouble usually comes when you hunt for that one “perfect” image.

Lacking images is akin to having writer’s block. Sometimes the cure is to stop worrying and start experimenting.

Flash, filling in the gaps

I want to finish today by mentioning a great post by Jonathan Snook about the changing role of Flash.

This post is focused purely at the web design community so if you are a website owner you can probably skip this one.

However, if you are a designer or developer I would certainly recommend it. It is possible the most balanced, down to earth and pragmatic assessment of the role of Flash I have read.

It begins with a history lesson, explaining why Flash was needed in the first place. Jonathan explains that Flash exists to fill the gaps that HTML, CSS and Javascript could not…

Between then and now they’ve managed to offer useful features such as cross-domain requests, local storage, binary sockets, multi-file uploads, and shared objects. On the animation front, there are 3D effects, inverse kinetics, and pixel bending. On the streaming side, there is support for multiple codecs, full-screen playback, and dynamic streaming. Flash also allows for screen, audio, and webcam capturing, as well as peer-to-peer connections.

He then points out that developments in the W3C technologies and improved browser support has started to make some of these jobs redundant. However as he points out…

HTML5 just doesn’t have the same breadth of features as Flash. That’s not to say browsers won’t get there someday. It’s just not there, yet.

The thrust of his argument is really summed up in the last two paragraphs…

As web developers, we should choose the best tools and technology for the job. To do otherwise—out of ignorance or some duty to “web standards”—is a disservice to the clients and customers we serve.

Right now, HTML5 is slowly becoming a viable alternative to Flash for a greater variety of situations. However, Flash will continue to fill in the gaps for years to come because it continues to solve problems that web developers have and that can’t be solved with any other client-side technology.

Its hard to argue with that. I am however glad that I need to turn to Flash less and less.

Web Design News 09 /03/10

This week: Giving and receiving design feedback, are you bored of your sites design, CSS typography and helping users when they are too busy to read.

Helping users when they are too busy to read

As is pointed out this week on 52weeksofux the days of reading help manuals are over. In a world of twitter, facebook, mobile phones and email we just don’t have the opportunity to spend long lengths of time learning a new system or website.

As the post suggests…

We don’t have two hours to read a help manual. We probably don’t even have 20 minutes. Instead, we learn a bit here and a slice there, all adding up to real learning but not in contiguous time.

In short we learn as we go along.

This should have a considerable impact on how we design our websites. We can no longer except users to consult a help section or contact you for advice when they cannot use your website. According to 52weeksofux we need to change our approach:

In its place is embedded support: directions, tips, cues, and other signposts that can nudge us back on track. One example of this type of inline hand-holding is microcopy: the small, useful copy that helps answer contextual questions and defray concerns.

An example of Microcopy

So what about your site? Do you provide enough support to help users learn about your site as they go? Are your error messages and instructional text clear and descriptive? Perhaps it is time to revisit your website copy.

Critiquing design

One of the most controversial areas of the web design process is design sign off. Everybody (including clients) has strong opinions about what they like or dislike. Designers on the other hand are often overly sensitive about their work and so this can lead to a lot of friction.

Being able to give and receive criticism as well as discuss design in a constructive manner is a skill both designers and website owners require.

Fortunately an article on Smashing Magazine called “Web Design Criticism: A How-To” guides us through the process.

The article explores the subject of design critiques before suggesting 8 pieces of advice on how best to give feedback. It’s a valuable article and well worth reading.

In my opinion design critiques are extremely important, especially in teams of designers. It is always good to have another designer looking at your work and provide feedback. As a designer it is easy to become too close to your project. A fresh perspective is always valuable.

If you are a freelancer and don’t have anybody to discuss your designs with why not try the website critique section of the boagworld forum.

design critique

Image source

Are old designs boring users?

Talking of design, I am constantly amazed how many websites still go through regular redesigns that involve major overhauls of the look and feel.

I can understand designers desire to do something new and fresh. However, even website owners seem to want something new.

The problem is that although you might get a kick out of doing a major overhaul of your sites look and feel, users often do not respond so well.

In Gerry McGovern’s latest post he points to Facebook as an example of what can happen when you redesign:

“After a redesign in March, a Facebook poll revealed that 94 percent of users didn’t like the changes,” Caitlin McDevitt wrote for Slate in February 2010. “When Facebook introduced its News Feed in 2006, students organized to protest against it.”

In fact most users like familiarity and dislike change. This is because users do not want to be excited by a new design, they just want to get things done. Gerry goes on to say…

The vast majority of them are at your website to get something done as quickly as possible. The only people who are likely to complain about your website design are website designers. Craigslist is constantly being told that its site is boring. “But the people I hear it from,” Craigslist CEO Jim Buckmaster told Wired in 2009, “are invariably working for firms that want the job of redoing the site.”

Sites should evolve over time rather than go through sporadic redesign.

Does this mean our websites should never change. Absolutely not. However, we need to examine our motives for change and when we do change it should be an evolution not a revolution.

CSS typography

There has been a lot of excitement recently about services such as Typekit and Fontdeck that allow designers the ability to use custom fonts on their websites.

However, custom fonts are only the beginning of what can be done with typography using CSS. Unfortunately it can be hard to keep up with all the latest innovations so it is good to see a post by Yaili about CSS typography.

The post on Smashing Magazine is a comprehensive overview of everything you can do with type using CSS. This includes:

  • White space
  • Word wrap
  • Word and letter spacing
  • Indentation and hanging punctuation
  • Web fonts
  • Text shadow
  • And some new emerging text decoration

For a beautiful web site

With all of these tools at our disposal it is looking like the days of Cufon, Flash replacement or image replacement are numbered.

191. Ecommerce Lies

On this week’s show: Marcus explains how podcasting and blogging can support your business and Paul exposes the top ecommerce lies.

Play

Download this show.

Launch our podcast player

Housekeeping

If you are considering going to Future of Web Design New York on the 17th November then you will be pleased to hear that we have managed to get you a 15% discount.

I went last year and can honestly say it was the best conference I have ever intended (although the hype around the election might have helped!).

To claim your discount just enter the code ‘boag15′ at checkout.

Back to top

News

Does aesthetics need to be compromised for the sake of usability?

As you will know if you have followed me for any length of time, I have great respect for usability expert Gerry McGovern. We work on similar projects and share a similar view of the web.

However, this week I parted company with Mr McGovern over his most recent post “Why web links are calls to action.”

In it he wrote:

It’s hard to read what Dustin writes on this black background; gave me a bit of a headache actually. But that’s okay. I had a great overall experience of the page because its black background communicated an important emotional, aesthetic thing to me.

Seriously, it’s a bit of a pity Dustin makes it so hard to read his stuff because what he has to say is quite interesting.

Later he went on to attack designers for their dislike of underlines.

Isn’t it amazing how many designers hate underline? They think it’s ugly, that it takes away from the look of the page.

Finally he reached the crux of his argument:

Have you read any grey books recently? I mean, have you read any books that use grey text or that have black backgrounds? Or, for that matter, have you read any print newspapers or magazines that use grey text? It’s well documented that it’s harder to read on a screen than in print. So why do designers deliberately create webpages that make reading even harder? Simple, really. Many web designers are more concerned with how the page looks than how it reads and functions.

In essence Gerry seems to be arguing that aesthetics should always take second place to usability. I disagree with this. It depends on the type of site. On some sites it is important to communicate more than information. Some websites are about conveying emotion and feeling too.

As for particularly targeting black backgrounds and underlined links, this is entirely unjustified.

Black backgrounds can (if done right) actually aid usability. Contrast is the issue here, not the colour of the background. As long as there is sufficient contrast a black background can actually reduce eye strain caused by white light, aiding on screen reading.

An example of a black background website with high contrast text

As for underlined links, I again disagree. Although I think it is important to underline links I tend to use border-bottom rather than text-decoration:underline. The problem with the latter is that the line intersects descenders making words hard to read, especially for those with cognitive disabilities. Not using underlines in their traditional sense actually aids readability.

An example of descenders intersecting underlines

The idea that most designers do not care about usability is incorrect. We care passionately. However, we do not always solve these problems in the way that usability consultants would prefer. Instead we try to balance aesthetic considerations with usability. We care both for how the page looks and how it functions.

So what do you think? Do you believe that designers care more about aesthetics than usability? Post your thoughts in the comments.

Explaining user experience design

Let’s face it, we all dress our jobs up in fancy terminology to justify our existence. That is fine until those paying us no longer understand what we are talking about.

Okay, so I am exaggerating to make a point. Sometimes we use our own terminology because we need short hand to explain complex ideas. However whatever the reason, it can get in the way when communicating with clients.

That is where the latest A List Apart post comes in. Entitled ‘Can you say that in english: Explaining UX research to clients‘ it does exactly what it says on the tin.

I want to recommend you read this article for three reasons:

  • If you are a somebody who needs to deal with UX people, this post proves an excellent introduction into what services they provide and the terminology they use.
  • If you are a UX person the post provides valuable advice on how to better communicate with clients.
  • If you have just started doing UX work this article may introduce you to more techniques. For example: have you previously heard of Contextual Inquires or Diary studies?

If you are looking for a great introduction to user experience design written in plain english, this is not a bad place to start.

The importance of typography

Typography is playing an increasingly important role on the web. Browser manufacturers now almost universally support font-face and there are a number of organisations such as Typekit and Fontdeck who have overcome the legal challenges surrounding the use of type online.

Unfortunately few fully understand the power of typography. Even web designers have become so used to working with a limited number of fonts that they have forgotten how evocative a great font can be.

There are loads of great resources about type on the web. Howeve, if you are looking for a post to get you started and demonstrate the power of type, I would recommend Jennifer Farley’s post on Sitepoint.

This isn’t a post that teaches you how font-face works. It isn’t even a post that explains how to create great typography. Instead it aims to excite you about the potential and power of great typography.

If you are a designer who rarely considers typography in any depth, then I highly recommend this post. If you are a website owner or developer who doesn’t ‘get’ all the fuss surrounding web typography, then I would also recommend you check this post out.

Website maintenance tips

Our final news story for today is an eclectic post from Smashing Magazine looking at website maintenance tips and tools.

It is a useful post because most of us are better at building websites than we are at maintaining them. After all, it is much more exciting to build a new feature than it is to carry out maintenance.

The article includes:

  • Advice on keeping content clean
  • Tools and advice on repairing your site
  • Information on browser compatibility testing
  • Help creating clean HTML, CSS, and Javascript
  • Guidance on ensuring accessibility
  • A look at HTML5 and CSS3
  • How to optimise your site for speed
  • Advice on commenting code
  • An introduction to SEO enhancements
  • Information on stats and analytics
  • How to incorporate user feedback

As I said – a somewhat eclectic mix. However, it is certainly worth a read if you are responsible for maintaining a large website over time.

Back to top

Feature: The Biggest Ecommerce Lies and How to Avoid Theme

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

Read the biggest ecommerce lies and how to avoid them

Back to top

Listeners feedback: Does blogging/podcasting win you any work?

Got the following question from Dave Smith:

Basically I’m interested in whether your Podcast and Blog generate any enquiries that result in paid work/projects for Headscape?

Recently we created FindMeByIP.com and it generated what is – for us anyway – a considerable amount of traffic for the Blog on our website. However, despite the tens-of-thousands of hits generated, we’ve only received 1 enquiry regarding new work. ONE!

What I want to know is whether you’ve devised any strategies for converting Blog/Podcast traffic into paid work projects for Headscape.

If not then how can you justify the obviously considerable amount of time and effort you put into your Podcast and Blog? What provides return on investment?

I’d look forward to any ideas/thoughts/suggestions that you might have.

The simple answer as to whether the podcast and blog generate any enquiries that result in paid work is yes. Blogging and podcasting have become the principle method that we use to market Headscape. We wouldn’t do it to the level that we do if it wasn’t a successful method of winning work.

Patience

I happened to notice recently that the first ever podcast went out in 2005 with Paul creating written articles prior to that. It took at least a couple of years before we started to notice that the majority of new prospects were discovering us through the blog and podcast.

There’s a couple of important points to note here:

  • The majority of Headscape’s work comes from existing clients and referrals. It did then and still does now. I don’t think the blogging/podcast model alone would have been able to support us in the early days when our client list was a lot shorter.
  • We’re not ‘scientific’ about ROI. In other words, we don’t get hung up about effort spent on marketing versus the amount of revenue coming in from it. It’s either working (or improving) or it’s not. If it’s not then we’ll try something else. Personally, I don’t think it’s a numbers game. For example, what if that one enquiry that Dave mentioned was from a huge client?

Perception

Even though we have always been completely ‘up front’ about the benefits that the podcast brings to Headscape, Paul didn’t start it with commerciality in mind.
Paul is a born blogger. He is a person that needs no encouragement to experiment with stuff and then share his thoughts with all and sundry. The fact that it has benefited our business is great and led the rest of us to encourage him to do more and more.

I’m not suggesting for a minute that Dave (and his colleagues’) blog is in any way forced but, and here’s the clincher, it sits on the company website. There is an instant connection between the blog and the company that may – probably sub-consciously – deter readers because they feel they are being sold at.

We used to write articles for the Headscape site and we’d send out regular email newsletters alerting subscribers to new articles. This was not successful, I believe, for the reasons highlighted above.
Boagworld started as Paul’s personal blog. And, I’m guessing, for the vast majority of readers and listeners it still is very much Paul’s site. They put up with the odd reference to Headscape but basically they’re not interested and never will be.

Influence

Though we have had a few website owners follow the show and hire us directly, the majority of the work that we win via the podcast is through listeners influencing their bosses. It took us a while to realise this.

When Boagworld started we felt it was important to focus the show (and blog) on website owners and not designers and developers. And though this focus remains important and provides a differentiator to other ‘tech’ blogs and podcasts, we now understand that both audiences are important to us.

Entertainment?

Mentioning differentiators, I think the fact that we do a podcast (not just a blog) is significant as well. It gives our audience a chance to get to know us far more than through articles alone. I have mentioned before that I think one of the biggest questions a potential client has before hiring an agency is ‘can I work with these people?’ I think the same applies for an in-house designer or developer who wants to make a recommendation to a boss. They need to feel that they can completely trust the team they are recommending and I think that’s more likely if their connection with you is via a (long running) podcast.

Our ‘style’, though it has its detractors (!), has kept people listening for nearly 200 shows. I guess what I am saying is that though of course high quality, relevant and up to date content is paramount to a successful podcast or blog, making it entertaining is also imperative. There are those that would completely disagree with my previous sentence – they don’t listen to Boagworld…

Conclusion

In conclusion, I think that the most important element to a successful blog or podcast is that it’s not being done simply as a vehicle to try and win work (or sell products etc). It has to be something you would do anyway. Of course, seeing positive results from a blog (as we have) will encourage more time being dedicated to it, but it shouldn’t be the reason to start in the first place.

Paul has talked in the past about one of the keys to blogging being consistency and regular posting. If you see blogging as a chore then chances are you won’t produce consistent or regular work.
In Dave’s case, along with considering moving the blog away from the company site, I think patience is the key as it appears they haven’t been doing it long.

Back to top

Image Credit: MarS

181. Interview or death

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

Play

Download this show.

Launch our podcast player

Housekeeping: .net awards

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

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

Back to top

News

The 7 deadly sins of blogging

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

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

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

UX Design – Myths and consistency

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

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

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

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

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

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

Typography – Stats, facts and sizing

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

Typographic Design Patterns and Best Practices

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

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

CSS Font-Sizing: a Definitive Guide

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

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

Typedia

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

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

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

Volume does not equal success

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

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

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

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

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

Back to top

Feature: Hold stakeholder interviews now or pay later

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

Read ‘Hold stakeholder interviews now or pay later’

Back to top

Listeners feedback:

Specialise in being a generalist

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

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

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

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

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

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

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

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

Sites like Digg are not worth your time

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

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

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

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

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

Back to top

177. Back in business

On this week’s show: Paul and Marcus talk to Brett Welch about the business of web design, and Paul chats with Ryan Taylor about creating a buzz.

Play

Download this show.

Launch our podcast player

Twitter post: Decided I like the boagworld podcast much more when @stanton and @ryanhavoc host it. Odd.

Oh right, I see! I’ll get my coat!

Back to top

News

The web font showdown

There has been a lot of exciting developments in the world of embeddable web fonts. It doesn’t look like it will be long before having custom fonts on our websites will be a reality.

We already have the likes of Cufon, which appears to be a huge improvement over the flash based sIFR technique. We also have Jeff Veen’s Typekit coming soon. This promises to give us access to a large number of fonts using nothing more than CSS font-face and some Javascript.

However, this week has also seen clearleft’s announcement of Font Deck, a direct competitor to Typekit. The rumour is that it will differ from Typekit because it will not rely on Javascript. Exactly how this will work is currently unclear. There is also a possibility it will use the same kind of caching approach Google Code offer for Javascript libraries. If it does this will significantly improve the perceived download speeds of fonts.

Although Font Deck is arriving a little late to the party, ultimately it will come down to who has the best selection of fonts. Until we know that there will be no clear winner.

That said, judging by an article on Think Vitamin, Typekit looks pretty impressive. The article demonstrates how Typekit will work and I have to say it looks very straightforward. Unsurprisingly for an application developed by Jeff Veen, it is incredibly well designed. However, it is not perfect. The demo page associated with the post shows a significant delay as custom fonts are loaded. Until that is complete the user sees a web safe font. Unless they seriously ramp up their server capability this delay could get even bigger as the popularity of their service increases. This might possibly be the opportunity that Font Deck needs to leapfrog their competition.

Moving design forward

Web design has come a long way from the grey backgrounds and blue and purple links of just a few short years ago. But where do we go from here? That is the topic tackled by Jennifer Farley in “Art Direction: Taking Web Design To The Next Level.”

As you will guess from the title, Jennifer’s answer is Art Direction. Art Direction is (among other things) the process of bringing together design and content. This is something sadly lacking in modern web design. Most websites are designed with little understanding of what content they will finally contain. Design is built around a series of templates integrated into a content management system. There is little customisation of the design to work with the content of each page.

Jennifer shares some examples of sites that endeavour to move beyond the template mentality and introduce real art direction. They are definitely worth looking at as they will inspire you to move beyond template design.

Jennifer’s article is not the only post that encourages a change in our approach to design. The other is a post from 37 Signals entitled “Stop following directions and start designing.” This post encourages designers to view feedback from the client as suggestions rather than solutions. The author writes…

When you’re getting direction from a client, manager, art director, etc., it is easy to fall into the mode of just following instructions. You get so caught up in getting it right that you forget to keep thinking about the problem.

Of course it is totally understandable to take the ideas of those that pay our bills as gospel. But we should also be reminded that those same people hired us for our expertise.

That is easy to say when you work for a company that does not have clients! That said, it is good advice and worth taking on board.

Being persuasive

My favourite post of the week is “50 Scientifically Proven Ways to Be Persuasive.” Although not strictly to do with web design it provides a lot of advice that can be applied when trying to nudge users in a certain direction.

For example one of the techniques suggests personalising the herd effect. The herd effect is used regularly on websites as a way of nudging users to complete a particular call to action. For example it is not uncommon to see ‘popular products’ on ecommerce sites or ‘average donation values’ on charity sites. This is because we tend to be led by the crowd. If somebody else did something then we will too.

However, the post suggests taking this step one step further  by personalising the message. It cites an example from a hotel change…

The hotel sign in the bathroom informed the guests that many prior guests chose to be environmentally friendly by recycling their towels. However, when the message mentioned that majority of the guests who stayed in this specific room chose to be more environmentally conscious and reused their towels, towel recycling jumped 33%, even though the message was largely the same.

So instead of refering to popular products you would say “other users who bought this product also bought this”. This is a approach also used regularly by ecommerce sites like Amazon.

This is just one example from a massive list included in this post. It really has a wealth of knowledge that is applicable to almost all aspects of web design from information architecture to copywriting.

Continued confusion over HTML 5 and XHTML 2

The last few weeks have been full of discussion about HTML 5 and the demise of XHML 2. There seems to be a lot of division and confusion over what designers and developers should be doing. Should we be abandoning XHTML 1.0. and moving to HTML 4? Should we try and adopt HTML 5 even though it is in draft? Its all very confusing and I have to admit I’ve felt unsure myself.

Fortunately there are some very clever chappies giving out excellent advice. Jeremy Keith has written an excellent post on the subject, as has Bruce Lawson. Drew McLellan has also contributed some interesting points to the discussion.

The problem is that it is all pretty turgid stuff and a bit of pain to wade through. The good news is that you don’t have to. Brad Colbow has saved us from this pain by turning the whole discussion into a very easy to follow (and bueatifully designed) comic strip.

Extract from the comic strip

SO, if you want to know whether you should be closing your tags and whether you can start supporting HTML 5 now, then pop over to smashing magazine and take a look.

I won’t ruin the end, but I will say you won’t need to change the way you code.

Back to top

Interview: Brett Welch on the business of web desgin

Paul Boag: So joining me on the show is Brett Welch. Good to have you on the show.

Brett Welch: It`s good to be here.

Paul: Thank you for agreeing to do this on very short notice. Because I didn`t notice your talk. We`re still at Future of Web Design. I`m still interviewing people here. You’re going to get bored of me saying that cause I’m doing loads of them. I didn’t notice your talk on the line up so I almost missed you entirely and I didn’t hear you either. So I haven’t heard what you said. But I’ve had lots of people come up to me saying you are interviewing Brett right? He’s really good. So you obviously went down very well. Which is a good thing.

Brett: That’s a good thing yeah.

Paul: Because I missed it what did you talk about?

Brett: Okay. I talked about how designers can go beyond pushing pixels and start to create more effective website for their clients. So I talked about the business end of web design. Which you know a lot of the time gets ignored at conferences like this.

Paul: Sure does.

Brett: And I think it’s really important. Cause that’s where the money flows into their pockets. So when it comes to actually getting the client on board and that process. That’s a really important part that I thought needed talking about. I talked about how designers can do that and I used and acronym called BUSTA and I put a bit picture of Busta Rhymes up there because if you’re into rap and hip hop you’ll know the guy. Not that he’s had any hits recently. As far as I know. BUSTA stands for talk Business. Understand why they want to go online. Talk stragety. Talk business targets and set an Action plan.

Paul: Okay.

Brett: So there’s the B-U-S-T-A. Or in one sentence you can say. Businesses Understand Strategy Tactics and Action. So all together it sorta works as sort of a nice little coat hanger for your thinking. And the idea really is to start off by talking about a clients business. What do you do? How long have you been doing it? How do you sell what you sell? Sort of getting into the business owner’s mind a bit. I think that’s something that you need to do to set the tone of what you are going to talk about. It’s not about a pretty website. It’s about having something that actually is effective for the business owner. The next thing is really understanding what they are trying to achieve. That’s important because you may need to dial up their expectations or dial down their expectations.

Paul: Okay.

Brett: Sometimes people if they’ve read a few blogs. They’re thinking that they’re an expert. They’re thinking that they can take it to the next level really easily. Sometimes you need to slow that down a bit and say hold on. You’re not going to be Amazon overnight. You need to take it slow. Other guys are going to be a bit timid. I don’t really know much about bespoke stuff. That’s where you need to hold their hand a bit. Guide them to understanding how exicted they should be. So the next part is strategy. I made a big point about the fact that strategy is not dirty word. It’s really just about connecting the dots between their website and their business. It’s about understanding how you can achieve the goals you want to achieve. Through their website. The main thing about stragety is really helping them understand what they can achieve. and showing them how they can achieve it with concrete targets. That’s what where T comes in. T is your targets. There I think you need to set 3 to 5 concrete targets business targets that actually relate to things like revenues and customer leads. Things like, not traffic. I actually made a point of saying not traffic. Traffice doesn’t mean anything until you understand what your conversions are like. It’s great to say 1000 people came to my website. If you’re not actually getting leads out of that. That are captured in some sort of database or if you’re not making money out of the sales. It’s an empty number. Then finally was action. So you need to set some short, medium and long term goals. A plan. The tools. The what and the how really. How are you going to get there? I think that was a rough overview of what sort of B-U-S-T-A is all about.

Paul: Okay. So what are the benefits of using this kind of approach. As a freelancer say. Why do I need to worry about this kind of stuff?

Brett: I think that even the process, if you look at it from the other point of view, from the business owner’s point of view, it’s still an important one to go through. A lot of people don’t realize that you probably need a marketing plan for your website. Because how else are you going to get people to view it? It’s just like opening a bit store. You need to put in the same amount of effort and ongoing effort to get a result. So I think the why is really more effective websites. If you think about what you’re doing in a business oriented way what’s going to come out the other end is going to be a much more refined and polished representation of what you want to achieve. It’s going to work better for you. I think you get from a freelance point of view you get less arguements from clients. They say I don’t like that blue and you can say well that blue will get you better conversions.

Paul: Right so you’re going back to the stuff you established.

Brett: Exactly. You established already so you can link it back. Obviously you need to have a valid point. You can’t just make things up.

Paul: Well you can try.

Brett: You can try. The real key thing is you can close arguements off by, the silly ones anyway, saying ‘hey look this is better for these reasons.’ Trust me.

Paul: The way we often talk about it is it moves aways from personal opinion of like I don’t like this colour to well this colour comes out of this set of things that we agreed up front.

Brett: Exactly. It’s drawn from this business goal. Then the other ones are you get repeat business because you’ve set that action plan. You’ve got long term and medium term goals that they’re going to link back to you. So once your first sections done and they sort of say ‘This is working well.’ Then they go who’s the next person to talk to? Obviously the same person cause you’ve had them actually plan.

Paul: It’s interesting we went up to a pitch on Tuesday and it was for a small little job, a design job, and we went through this pitch and we outlined what we do. We got to a point in the pitch where we said ‘But if this is as far as you’re going to go don’t hire us.’ If you’re only looking in short term views of this immediate project then we’re not the right people for you. But here’s where we think you should be going over the long term. And I think ultimately that’s really beneficial. It means that your going to get that long term business that you’re talking about.

Brett: Absolutely. People want to know what’s next. I think being able to answer that question ‘What’s next?’ is really a key to making them come back to you when it’s time to implement what’s next.

Paul: How far do you think you can go on that line? We do a lot of work with public sector clients I remembe sitting in one meeting when they wanted to establish a 5 year plan for the website. Which to me seemed unrealistically far ahead. How far do you go with things like that?

Brett: If you can imagine 5 years ahead I think congratulations. I think that’s great. The main thing is not so much how far you can think ahead. I think it’s really the exercise of thinking ahead that is most valuable. Whether it’s a 6 month or 12 month or a 2 year or a 5 year plan. However far you can get that’s great cause you probably have a fantastic imagination. Right now Twitter is big in 5 years who knows what it’s going to be?

Paul: Exactly.

Brett: You can work those into your plan. It’s great to sort of skecth something rough out for as far as you can think ahead. I think it’s the exercise that makes the, it’s the process that makes it more effective and more polished. The outcome just becomes more effective in the wash.

Paul: What you don’t cover in that B-U-S-T-A analogy is, you don’t talk about user testing and user feedback as a tool to convince clients to do a particular thing. I’m guessing that’s part of your process as well.

Brett: Well I think that’s really important. It’s not specifically part of B-U-S-T-A cause usability…

Paul: Yeah it would ruin the whole…

Brett: I think that when you talk about two things Targets well three things Strategy Targets and Action. Those last two, if you’re going to achieve the targets you want to achieve then that’s where you need to, and the action plan, doing that testing and doing that side of things is a really important part of making sure you can achieve those goals. I’m a big fan of usability testing and I read your article on ThinkVitamin. What was it?

Paul: I don’t remember. I write so many of them I get confused.

Brett: It was like cheap usability…

Paul: Oh yes I remember that.

Brett: That was like fantastic and I like tweeted it. It’s the sort of thing that I’ve definitely fit in and the actions and the targets. Because targets are about conversions and actions are about how are you going to get those conversions. I think usability is really a big part in working out those conversions. It’s like supermarkets. They have the aisles and they put the products in the right places because they want the kid to scream about the cholocate at the last minute. It’s all well thought out and on a different level it is usability. It’s arranging things in a way so the client behaves in a way, or the customer behaves the way you want them to behave. So I think it’s an essential part of the process. I didn’t fit in talking about it.

Paul: You can only fit so much in.

Brett: That’s for sure.

Paul: It was very impressive that you did it in only 10 minutes. Obviously there are real benefits to using this approach in regards to convincing clients of stuff as we’ve already said. You know you can say well we’ve gone with this colour because of these reasons etcetra. Do you think there is also a value from a sales point of view in terms of up selling yourself and giving yourself more credibility and value?

Brett: Absolutely. That was final point that I didn’t manage to get to about why you’d follow a process like this. It’s simply higher profits. What I’m saying is nothing particularly new or ground breaking. It’s really just a simple process that helps you get your head around these things. So that you’re able to more effectively how valuable what you do is and basically end up with a more effective result which sort of is a feedback. If you do something, if you sound like you do something well you do something well. Then it sort of feeds back and they’ll tell their friends and it’s sort of a marketing for yourself. So I think that having that process really is just about being able to up sell and justify. The problem that we’ve got right now and I talked about this briefly in the talk as well, is that design is becoming a comodity. People view design as a comodity. That’s a real shame. It is about up selling. It’s about selling yourself, the value you have and effectively communicating what you do. In a way that puts you in the right light so that people are willing to pay the money for it.

Marcus: It also makes you seem like more of the expert.

Brett: That’s exactly it.

Marcus: We actually tell people who say we’re not doing this obviously we feel this is the right thing for your business to take this kind of consultative approach but it benefits us as well. We tell people upfront it’s a benefit to us as well. And they’re like oh okay I see this is helping everybody.

Brett: Yeah that’s right. I think there is two things, one of the key questions we have right now that every freelancer has to ask themselves is are you worth it? Are you worth your cost? I think the two things that are worth it are strategy. Being strategic and being an expert because experts know things that you don’t. If you can get both of those things into your pitch then whatever you do you’ve already put yourself on a different platter. I think that’s where you really, and we tell this to our designers, we have a large community of resellers for GoodBarry and we tell them all the time, we have training sessions, we always talk about making sure you really lay out what they want to do, how they want to do it, and link it back to their business so that they can really put themselves at that expert level and justify the price.

Paul: I think there is also an issue here of the fact that clients like to be reassured. That when you’re buying from somebody you want to be reassured that this person knows what they are doing.

Brett: It’s about trust.

Paul: Having a methodology and an approach that you work through and has all of the different things that you just outlined. I think gives you, it gives clients that reassuring feeling that these guys know what they are doing. They’ve got an approach and they always use this approach and are comfortable with that.

Brett: I think that it’s not just about the followig the process by wrote necissarily. It’s about, or each design or freelance person or agency has their own specialties. I think at a broad level you can follow it. But there are some parts where you may dig deeaper because that’s your real expertise area. These processes are meant to be used and bent. Adapted to whatever your situation is.

Paul: So where do you think the time is to start talking about these processes? Is it once the client as signed on the dotted line? You take them through or do you encourage people to be talking about this even at the pitch stage.

Brett: I think at the pitch stage. When you’re pitching you need to demonstrate, not necissarily tell them the name of your process what your following, the methodology. But start to go through the process and say look I want to talk about your business so lets do that. Then I want to understand why your going online. Then I want to talk with you about strategies we can use, and targets that work for you. Then we’re going to talk about how we’re going to achieve this. Just by setting out that roadmap I think you’re already putting yourself miles ahead of everybody else who’s gone right to what sort of colours do you like? I think right in the pitch stage. You don’t want to go into too much detail. I think you have to strike a balance between showing them that you know this stuff really well and that you can really help them achieve these things but also leaving enough behind the fence so that there is something they’re actually going to pay for. That’s the trick is that balance. I would always fall more on the side of making friends with the client and sort of making them understand the process and how great they can be. How effective they can be. Rather than holding too much back.

Paul: I think the other benefit talking about this, I don’t know what your attitude is towards this but, it’s actually quite a good arguement agains speculative design work as well. If you’re in a position where your talking to a client and they’re asking for speculative design you can almost say well in a way this isn’t the time to do it because I haven’t understood your business. We haven’t set targets. We haven’t got a strategy here. So you can take them through the logic of why it’s too early for me to start putting designs in front of you. Is that something you’d agree with?

Brett: Totally. I’m not sure what our official company stance would be. I don’t think we’ve really talked about it. On principle I definitely agree. In our reseller training we teach stuff like that. I would have to say that I, yeah I use 99designs as an example.

Paul: Oh that’s where Ryan’s comment. I heard Ryan’s comment right at the end.

Brett: I said designers if you want to see we broke it down we had millions of designs and millions of dollars put in there and you crunch the numbers and it works out that every design that is gone and done is worth $2.80. That’s lower than minimum wage. You can go work at McDonald’s and do better than that. I think that, yeah I’m not a fan personally of speculative design. I would generally say and what we teach our resellers as part of our training is saying don’t go with that. We want to go in and understand the business. Make sure that you get your head around what they want to do because your work needs to reflect that.

Paul: I realize I haven’t asked you about GoodBarry at all. What do you guys do? I haven’t come across you before.

Brett: We have a platform for running online businesses. When you’re going online these days business owners want to be able to run their website. Email marketing is more and more important. Selling products and hooking into Paypal and things like that is harder than it needs to be. Behind all that, having a CRM database that you can track your customers and save them in a central place when they sumbit a webform or interact with your site however they interact. We’ve got a platform that does all of that.

Paul: Wow!

Brett: Our system does everything that’s in sort of that realm. It’s great for web designers because they’re able to actually create any design and put it on the system. Use all of that functionality without doing any programming. So that’s sort of what we sell. We have a reseller program. That’s why we’re here. We get designers on board to become resellers of our product. Basically they use the product they get comissions. They get a whole bunch of training from us about how to make more money and how to, pratical training. How to be a reseller. We not only take you one as a resller we want you to be able to add value to your clients. And give you some ideas about how you can do that.

Paul: Interesting business model. Well thank you so much for coming on the show. That was really useful.

Brett: That was really fun.

Paul: It’s nice to hear some other people saying the things we rant on about week in and week out.

Marcus: That’s what we rant on about all the time.

Brett: Yeah I saw your talk at FOWD in New York.

Paul: Educating Clients to Say Yes.

Brett: It really struck a chord. It’s like this is what I am talking about. I think we’re definitly on the same page.

Paul: Excellent.

Thanks goes to Curtis McHale for transcribing this interview.

Back to top

Listeners feedback: Creating a buzz

Paul: So we’re going to do something a little bit different for the listener feedback section today and it’s come about because I was chatting with Ryan Taylor via IM and he asked a particular question and I nearly turned round to him and said “Ah, you can pay for one of my consultancy clinics for an answer to that question” but then I thought that might be a bit tight of me of me, so instead I thought, lets talk about that on the show because it’s a really good issue to discuss and its a different way of doing the listener feedback and I think we’ll probably do it with some other people in the future as well. So I have Ryan on the show, hello Ryan.

Ryan: Hello Paul.

Paul: Oh I’m so honoured to meet you, your the guy that does that podcast aren’t you?

Ryan: I am, I’m the one who makes sure it doesn’t sink like a lead weight.

Paul: It’s so exciting, I feel quite in owe of this amazing super start that I have on the show.

Ryan: *laughs*

Paul: Can I have your autograph?

Ryan: Of course, you’ll have to come up here though, I’m not coming down there.

Paul: That’s a bloody long way to go isn’t it? Can’t be bothered with that.

Ryan: Aye, you have us come down there often enough.

Paul: Yes this is true.

Ryan: *laughs*

Paul: But you live up north, it’s dangerous there.

Ryan: It’s not.

Paul: There’s wild animals and thugs and things.

Ryan: It’s all rumour and hearsay.

Paul: I see it on the news all the time.

Ryan: If you weren’t such southern softies you’d be alright.

Paul: And also isn’t there loads of pollution from the factories chucking out toxic gases and stuff.

Ryan: Yeah well you see though, if the ice caps melt and we flood, your going to go first because we’re higher up than you.

Paul: That is true. Yeah but whenever I think about the north I always have this image of a post apocalyptic barren waste land anyway so it’s all swings and roundabouts.

Ryan: That’s Scotland, you’re going too far north.

Paul: *laughs*

Ryan: *laughs*

Paul: Anyway, it’s really good to have you on the show. I actually listened to last weeks show which was sold waffle but very entertaining none the less.

Ryan: Well we try our best.

Paul: *laughs* It was good, I really enjoyed it. I particularly enjoyed the horrendous swearing after the outro music.

Ryan: Oh, Anna’s just so good at all the editing she does, it was constant throughout, I really feel sorry for her.

Paul: She worked hard on that one.

Ryan: I had to ring her up an apologies personally for that one.

Paul: *laughs*

Ryan: *laughs*

Paul: Yen, we were chatting on IM and you asked a question do you want to share what you asked? Or what the issue was?

Ryan: well, erm, as you know I’ve been recording my own series of video interviews called please start from the beginning and you were the first person I interviews.

Paul: ah, it was very boring. Have you started editing them down yet? Or have other people been more concise?

Ryan: they are getting long

Paul: oh shit really.

Ryan: I think Dan Rubin holds the record at 50 minutes

Paul: flip me!

Ryan: well has also been the most interesting interview, has also received the most hits and the most traffic.

Paul: really?

Ryan: yep, everybody likes to hear Mr. Rubin waffle

Paul: I Marcus should be pretty good when you get to do him because of his whole pop-star career.

Ryan: he keeps putting me off you know…everybody I can get hold of his the hardest one to nail down. I’ve been asking him since the weekend in June and I’ve done 10 interviews now and I just can’t nail him down.

Paul: So the basic principal of the show is that you ask people about their past and ask them how they got where they got.

Ryan: Yeh, its nothing technical it’s something a little different in that I want to know what people do now, what their job title is is the first question I ask, Because I think it’s interesting to hear about what peoples different job titles are because there are so many different bearings of the same thing in the industry. So I ask that first and discuss what they do now, and then ask them to go back to the beginning as per the title of the series and take me through their career path. All the experiences they had all the lucky breaks they had, achievements and so far it’s working out really well.

Paul: Cool

Ryan: Yeh, people seem to like talking about themselves.

Paul: yeh, it’s funny that. So as we were chatting, do you want to say what your question was, what was it you were getting at, what was it you wanted from me?

Ryan: the question was how can I kind of advertise the series a bit better, how can I get more people watching it. The uptake so far has been really good, I’ve had some really good feedback and people are kind of linking to it and spreading the word a little on twitter. But for a lonely guy like me with less than 400 followers it’s hard when I tweet and you’ve only got potentially 400 people that will see it. You know the number of people coming to the site is good it’s better than I’ve ever had, but I’d like more people seeing the videos and commenting and just spreading the word. Someone like yourself with 9000 followers it’s very easy for you to spread the word about thing and I was wondering how you built your way up with Boagworld? If I do something similar, starting from the beginning.

Paul: yeh, I think this is a problem most people have they’ve got some particular website or application or service that they are offering and wanting to build up a bit of a buzz. I’m not that high up the food chain if you compare me with Mr Carson or some of the guys over in America who seem to find it very easy to create buzz and excitement about products. But I guess I’ve picked up a few things that have worked for me. I think the first one is struck me is patience, you know you haven’t been doing it that long have you?

Ryan: Well no, not too long. So far we’ve released the 8th video and it’s been steady. The kind of traffic interest has been steady level, it’s not like a huge, it not going up every week. You know we release Monday and obviously get a surge of traffic on a Monday as everyone comes to visit. That tails of towards the end of the week and then the next Monday we get another surge of traffic and I suppose there is going to be more traffic with more interest of people who are more in the public eye. Like Ryan Carson for example. There will be a spike in traffic I would have thought. But everybody just seems to like everybody which is quite interesting. So it seems to be the same every Monday, there seems to be the same amount of traffic coming to watch that video. Despite whom the person is.

Paul: well that to some degree might be down to be how much the person interview is actually pimping what you have done. You’ve got a good model in the sense you’ve got a situation where your interview well known individuals which works really well as a technique because if they do mention it and push it themselves then it’s going to drive traffic to your site and hopefully get people hooked on the other ones. Erm, but ye hi mean that’s only kind of part of the equation actually. To be honest it was a long time before I actually saw much traffic on Boagworld at all. I mean I reckon it was over a year before I got much over the 400 / 600 subscriber numbers. So it was a long long time before anything really happened, you just really need to keep plugging away and releasing regularly and often. You’re on ITunes now aren’t you?

Ryan: yes, I finally got the series on ITunes and the uptake of that has been pretty good as well, you know people jumped on that straight away and that’s slowly increasing which is nice. Yeh searchable on iTunes and please start from the beginning.

Paul: this is sounding like a massive big plug for free start from the beginning; on the other hand it is also useful stuff for other people because other people are on the same kind of position. We’ve given one tip which is produce content which has got expert whom has a big following, because they are going to talk about it which is a good thing. I mean the other thing that I think a big part of it is, is your own reputation aswel. That (erm) it’s easier for me, if I launch something new … I don’t know let me say I started a new podcast or website it will be relatively easy for me to create some buzz around that because I’ve already got 9000 followers on twitter, because I already know other people and friendly with names that will actually promote it themselves, If I ask them too. So your own reputation matters quite a lot as well and your building up quite a good network of people you know, and don’t be afraid to ask those people to pimp it a little bit. This is where your really going to see the pay off from all the conferences and meeting and chatting with people. Because you’ve become a name that people are aware of, so there’s another tip. Take the time to build up your own personal brand and reputation and attend conferences, because people will take more of an interest in you. Take this week clear left have realised font-deck, now because it’s clea

Ryan: left that’s done it they’ve had far more publicity than some other web app that has just been launched, does that kind of make sense?

Ryan: yeh, yeh, absolutely. Erm I suppose it’s a bit like anything, your reputation again takes time doesn’t it. (

Paul: yeh) I have this slight fear of ramming it down some people throats, I want people to come visit the videos and participate without really feeling harassed into doing so. (

Paul: mmmm) So I don’t want to be tweeting all the time about it and things like that. I’ve been looking at some people who retweet and nearly everybody i’ve interviewed tweeted to say there is an interview there. So if and when people see that tweet they tend to click through, it’s for people who maybe miss that tweet. It seems to be that twitter is the main thing that is driving traffic to my site for my series, and I was wondering if there was anything else I could be doing to advertise it and get people to find it naturally?

Paul: That’s the trouble isn’t it with twitter, something will get missed because you’ve just got this stream of stuff. I think there are a few things to say on that before we move on to other things you could do. Erm, I will actually tweet about something multiple times but I will subtly different ways ok. So for example I will initially (say in your case this video) then later in the day I will I maybe quote some of the comments have been made on the video. I will refer back to it a couple of days later, you know i’ve been pleased with the level of traffic or whatever. Just in order to bring it up a few times so that’s one thing that I do. The other thing is pick your times for actually tweeting about it, and that’s where something like using bit.ly like where you can track traffic is really worthwhile. Erm, because that enables you to kind of monitor the different links that your tweeting out, and notice which time of day gets the best level of traffic for you. So for example in my case I know that if I tweet around about between 5 and 8 in the evening UK I will get the most click through on whatever I do. And the reason for that is the people in UK have just finished work and are at home having their T and are checking twitter whilst they are there. They’ve got time to look at stuff, but yet in America that are following me are just waking up and are around now and their traffic is added to it in addition. So thinking about when you twitter is quite important as well.

Ryan: well that’s interesting because i’ve been releasing the episodes around about 11.30 just before lunch so people could watch over lunch if they wanted to.

Paul: yeh but that doesn’t particularly support the American audience and that is a big audience. I mean you’ve been interviewing people in America as well so I think it’s more important for you (

Ryan: mmm). The other thing you might want to do is, the people that speak that you’ve got coming on the show I presume you write to them and email them when their show goes live…or at least you should do (

Ryan: yes I do). Right include in that the embed code, in case they want to put the video on their site, because that then enable them to have some content, it’s easy and quick to put up on their site and will give you more exposure. And it’s on their blog so it’s permanent, rather than twitter which disappear in time, so that maybe a good way of doing it. (How else can I do build buzz) I mean the other part of it is building the community as well. That is at the moment you’ve just got the early days, and you’ve got visitors (

Ryan: yeh) rather than actually a community. For example I now have people that come back to my site whatever I post. So I mean you want to look at building up that community in the comments and the stuff like that. You want to give people the opportunity and making people feel involved in it. So you do that by saying “hey who should I interview?”, or “what questions should I ask them?” erm, encourage people to put comments on the video maybe ask them questions in order to encourage that commenting. That’s always a good thing you can do. And then of course in addition that as well maybe run a competition where you get people to write in and suggest themselves, why you should interview them not just interview web celebs. Interview some ordinary designers as well, people that have been in the industry from the beginning but aren’t necessarily well-known names. So anything to kind of draw the community together, because once people feel like they are involved in you know Boagworld or from the beginning, once they feel like they’ve got an ownership in then they will start to promote it themselves and that’s where word-of-mouth recommendation really comes in because people are really enthusiastic about it.

Ryan: ok that’s a good idea; I have been trying to contact and target people not necessarily big. I know the majority of people i’ve been interviewing are web celebs i’ve been trying to get all different kinds of people and different kinds of profession in the industry. So I’m trying to get a copywriter and a journalist for industry, and all the different people and their takes on the industry and how they ended up getting involved in it. To try and get as much of a diverse catalogue of people as possible. So ye hi like that idea of getting people, because as you say people don’t have to be a web celeb or a big speaker or a speaker or an a-list person to have an interesting story of what they have been doing. So yeh I like that.

Paul: The other aspect to this is looking for influencer’s o those are individuals that have a big network and a lot of influence. Going back to say twitter for example a lot of people go on about you’ve got 9000 follower or 12000 followers or whatever. But actually the number of followers is less important than erm who is following you. And if you can kind of get at and influence (no wrong word) if you can get certain key influencers to mention your product or service or website then they will reach a much bigger audiences o for example you take someone like Jeremy Keith as a good example of this. His number of followers is actually less than mine yet the people that do follow him are in turn big influencers themselves, so he’s as much of a big influencer if that makes sense?

Ryan: yeh, it’s kind of quality over quantity

Paul: yeh, exactly, totally. Erm, what else? (Mumbling) could you do? … I mean the main thing is just a time thing it has to be said, you just have to keep plugging away being regular posting, not giving up on the project because a lot of people do that you know, especially with blogs. They do it for a while and they give up because they aren’t getting the returns they want out of it. And you know maybe try writing for things like smashing magazine or sitepoint or the webdesigners depot and write about career paths that are relevant to that what it is your doing. The guys at smashing magazine are always looking for new articles because they have this beast that needs feeding on a daily basis. I know you’ve tried to write some stuff for .net mag but I have to .net mag isn’t the best place to start because they are monthly publication which means they can be a lot more picky about what they have in. Also they are very reliant on big names, while you don’t care about the name it’s about this particular product. And actually have got less of a reach (fewer subscribers) than something like smashing magazine or webdesigners depot so I would try and go to write for some of them.

Ryan: mmm that’s another interesting idea, the whole idea from this series stemmed from the fog around job titles and you know how people just kind of pick a name for themselves, like yourself web strategist (

Paul: chuckles, yeh) you know it’s so ambiguous all the time and that’s where people starting out in the industry. That’s what it started off as; people don’t know what they want to be because there is no kind of defined roles.

Paul: that’s what we spoke about on last week’s show.

Ryan: absolutely that’s really where this started and that why I started putting this series together so the series is great that it’s self promotion of myself. But it started off from an interest and it still is, and I’m enjoying doing it because it interests me knowing about other people’s career paths and that’s why I like it. I want to interview interesting people that don’t necessarily have to be hugely popular people. So ye hi like that idea about writing about them, I think that will be the natural progression when i’ve got a few more interviews and bit more raw data to work with. An article about career paths will be something in the pipeline.

Paul: I mean the back log of material really important as well (

Ryan: yeah) , because I mean i’ve got people that start from show one that are still working their way through, and obviously that increased the number of hits and visitors, because people are going back episode after episode. The other thing you’ve got to think about which is the big problem that I had which is the one of getting it transcribed so that its good from a search engine point of view as well as an accessibility point of view. But you know that’s a big old challenge doing that until you’ve got a community like I’m fortunate enough to have that are helping out and supporting it, it’s really difficult to do that.

Ryan: absolutely.

Paul: but anyway I think at that point we ought to wrap it up else this will be the longest show ever recorded, but hopefully there was some useful stuff in there for you and other people. Giving you a little hint at how the consultancy clinics work.
I think I may like to do this again so if you have a web project or you want some advice on something whatever it is then write in to [email protected] and once in a while we’ll pick one and do an interview like this. What do you think good idea Ryan?

Ryan: yeh really good idea I think people will find it useful.

Thanks goes to Andy Kinsey for transcript this listeners question.

Back to top

169. Type

On this weeks show: Paul talks about the power of story telling and shares some tips for “getting in the zone” and Mark Boulton joins us to talk about web typography.

Play

Download this show.

Launch our podcast player

Housekeeping: Jobs and Projects

Whether you are looking for a freelancer to build your latest web project or a permanent addition to your web team, the Boagworld forum is now the place to go.

We have added a new jobs category which lists web design projects and jobs free of charge. So, whether you are looking to post a job or pick up some work you should take a few minutes to check it out. Right now there are jobs for…

  • A web project manager
  • A joomla expert
  • ASP.net developers
  • PHP developers
  • And much more.

Back to top

News

Coding like its 1999

This week Cameron Moll has posted “Coding like it’s 1999“. The reason for this witty title is his decision to return to using HTML 4 and pixel font sizes, both of which were best practice in 1999.

The post is essentially a justification for these two decisions and he puts forward a very convincing argument for both. He credits his decision to move back to HTML 4 to Dave Shea who recently wrote a compelling argument to drop XHTML. Dave writes…

Six years ago, many of us thought XHTML would be the future of the web and we’d be living in an XML world by now. But in the intervening time it’s become fairly apparent to myself and others that XHTML2 really isn’t going anywhere, at least not in the realm that we care about…. I’m not ready to start working through the contortions needed to make my sites work with an HTML5 DOCTYPE yet, which leaves me with the most recent implemented version of the language…. [U]ntil I get a better sense that HTML5 has arrived, 4.01 will do me just fine for the next four or five years.

As for the decision to move back to pixel based typography, Cameron writes…

However, recent versions of every major browser — Safari, Firefox, Google Chrome, Opera, and yes, Internet Explorer — now default to page zooming instead of text scaling… What does all this mean? It means px can again be considered a viable value for font-size. It means the difference between setting text with absolute units or setting text with relative units is negligible for users. For you and me, however, the the difference is substantial. The burden of calculating relative units throughout a CSS document is replaced by the convenience of absolute units — 14px is 14px anywhere in the document, independent of parent elements whose font-size may differ.

Although at Headscape we still work with XHTML, we have moved back to pixel base typography and I suspect will do the same with HTML. I do not think it will be long before most web designers follow suit.

The power of words

Problogger has published a post that demonstrates the importance of our words. It shows how the words we pick can have a real effect on how users act. Word your copy carefully and you could substantially increase conversion.

Interestingly the post does not demonstrate this through example of good website copy. Instead it looks at the language used by successful waiters. The article takes three phrases often used by waiters and explains why they are so powerful. The phrases are…

  • “Our chef recommends”
  • “Everyone else has ordered… and they love it”
  • “So gentlemen, is everything delicious?”
From these three phrases he raises the following points…
  • Invoking the power of a higher authority will influence decisions - For example using a testimonial from an influential figure.
  • People believe in safety in numbers - “If others like something then surely I will too”. For example highlight your most popular products or articles.
  • Positive wording generates a positive feeling – For example “Thanks for subscribing to my email feed! I hope you find every post as exciting as the one that made you subscribe”.

It is an excellent article and there is a lot more detail than I have covered here – make sure you check it out.

10 tips for creating a more usable web

The Web Designers Depot has published “10 Tips to Create a More Usable Web“. Its not exactly the most original post and we have seen similar posts from Smashing Magazine in the past. That said, it is still a worth while read.

The problem is that it is so easy to forget best practice when it comes to web design. There is just so much to take into account as we design a website that we can easily overlook things. Articles like this may not necessarily teach us anything new, but they do bring to the fore best practice that may have been pushed out by more recent issues such as WCAG 2 or web typography. We can never be reminded enough of the principles of usability.

This particular list includes…

  • Creating active navigation
  • Clickable labels & buttons
  • Linking your logo
  • Increasing the hit area on a link
  • Adding focus to form fields
  • Providing a useful 404 page
  • Using language to create a casual environment
  • Applying line height for readability
  • Utilizing white space to group elements
  • Being accessible

As with all good list posts, each point is accompanied by a brief explanation and some nice examples. Check it out.

Four quick tools

I conclude today with a quick round up of various tools that have been released this week. Its a bit of an eclectic mix but they are all worthy of note…

  • Google Page Speed – Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.
  • EntityCode – HTML entities are HTML code that is used to display special characters such as the £ sign. However, remembering them all can be tricky. EntityCode is a useful reference that lists some of the most commonly used HTML entities in a very swish AJAX driven format.
  • Google Web Elements – Google Web Elements allow you to easily add your favorite Google products onto your own website. Widgets include calendar, conversations, custom search, maps, news, presentations, spreadsheets and Youtube news. All of these widgets existed previously but have now been brought together on a single site.
  • Adobe BrowserLab – Adobe BrowserLab is a browser compatibility service that provides designers screenshots of their pages on leading browsers. There has been a lot of excitement around this one, but I was not overly impressed. Sure the interface is nice and Adobe are a big name. However, the service only offers screengrabs (not interactive sites) and only for a limited number of browsers. In my opinion there are better services out there such as Litmus’ Alkaline.

Back to top

Interview: Mark Boulton on web typography

Paul: So, the next in our series of interviews from the Future of Web Design is with Mark Boulton. Hello, Mark.

Mark: Hello there.

Paul: So… we interviewed you on boagworld, didn’t we, about… quite a while ago.

Mark: It was a while now, January?

Paul: Yeah

Mark: Something like that.

Paul: Something like that, yeah.

Marcus: What, that long ago?

Paul: Well, in internet terms, that’s forever.

Mark: That’s forty years ago.

Paul: So, at the time, you were just embarking on this odyssey of doing a redesign with Drupal, or you were part-way through it. And we were talking about this very unusual approach of ‘Hey’, you know, we normally discourage people, don’t we, from doing any kind of, don’t show your design to a group and you were showing it to thousands of people.

Mark: Yes, yes.

Paul: And you talked about how great it was going to be and there was this slight fear and trepidation in your voice at various times. How’s it gone?

Mark: It’s gone really well.

Paul: Has it?

Mark: It has. It’s gone really well. It’s been terrifying on a daily basis. Posting comments for… you know, registered users on drupal.org are about 400-500 thousand.

Paul: Right.

Mark: A fairly active, passionate community; a lost of these people have invested time, money and have businesses riding on Drupal. So, however, the vast majority are really in favour of what we’re doing.

Paul: So what, how did it work in practice? You know, were you uploading designs to a blog and just saying: ‘Hey, have your say’ or was it more structured than that?

Mark: It was more structured than that; it wasn’t initially, I mean we’ve learned some painful lessons along the way. But it was a very distributed approach, so we’d have a Twitter group, we have, sorry a Twitter account, we’d have a flickr group, YouTube groups, our own blogs – mine and Leisa Reichelt’s.

Paul: Right.

Mark: We’d have drupal.org, which is the main kind of Drupal page, but we’d also have groups.drupal.org where you can create your own little groups and we’d have a group there.

Paul: OK.

Mark: The view is that, so if we just posted things to Drupal, if we just spoke to the Drupal audience, we’d get a very slanted feedback on what we were doing.

Paul: Of course.

Mark: So, the idea was that we would touch on all sectors of the, kind of all bits of the audience. And then we’d, we were working weekly iterations on a 12-week schedule.

Paul: Right.

Mark: Which was killer.

Paul: Yeah.

Mark: We would not do that again and we would release material, whatever that would be; mostly it was HTML prototypes, fairly lo-fi, and we’d release them on a Thursday and then we’d sit on our hands

Paul: And watch.

Mark: And watch, yeah, with trepidation.

Marcus: Dealing with hundreds of thousands of comments.

Paul: How did you deal with that?

Mark: Yeah, we, we…

Marcus: Ignore them!

Mark: At first, I mean, there’d be the odd occasion where you’d get flamed and things could get personal and nasty and the&helllip; of course, the natural, human reaction would be to get in there and defend yourself and, but we, after a couple of times of trying that, which didn’t work, we didn’t, we really had to walk away from the computer and…

Paul: Yeah, I think that…s a good lesson for anybody running a community or interacting with people.

Mark: Absolutely, I mean the first lot, you know, if you post something up to a community, your first day’s worth of comments are setting the scene and then the following days from that trends will start to emerge &endash; repeated themes &endash; and that’s what we were watching for. So, we’d spend maybe four days, through till the Monday, just watching, you know, over the weekend, which was quite nice because we could do other&emdash;have a life…

Paul: Which is always good.

Mark: Yeah. And then we’d go back over the comments on the Monday and try and establish some themes that we agreed with and we put forward into the next iteration.

Paul: Right.

Mark: But it’s probably worth saying at this point that it was not a design by demo… it was not a, kind of, a democratic process.

Paul: No.

Mark: Because you just end up with mediocrity, I mean, kind of a little bit of a dissing WordPress here, but what WordPress are doing with the voting.

Paul: Right.

Mark: That’s not really our approach. Our approach was… we had a clear design vision.

Paul: Right.

Mark: And we pretty much stuck to that, but it was the way that you presented the material and gathered the feedback, that’s kind of steering that vision.

Paul: Yeah, so did you learn lessons about presenting the material and how to do that?

Mark: Yeah, we’re still doing that, we’re still on a kind of weekly basis.

Paul: Because that’s always the big thing isn’t it? You know, you can’t just take a design, show it to people and say: “What do you think?”

Mark: No, just go: “Here you go” No, which we did early on and it was a disaster.

Paul: Yeah, I can imagine.

Mark: Yeah, it was. It was like: “What do you think of this? I’ve got some ideas for the logotype.” “It’s rubbish!” You know, hundreds of comments.

Marcus: And they all start arguing with each other, no doubt?

Mark: Yeah, and it was… so, you have to put something in place to ask for specific feedback; that’s where we got to. So, it was, if you’re posting up an iteration which involved heave change to the masthead design, we’d steer it like: “What are your thoughts on the navigation? You know, do you think this works, do you think that works?” And wherever possible, we’d validate our design direction with testing and research anyway.

Paul: OK.

Mark: But, recently we’ve been starting doing videos.

Paul: Right. Which is quicker, I’m guessing.

Mark: Kind of, a little, er… yeah, it is. It’s been good.

Paul: I guess, I mean, the videos, did you, so you’re talking over the top of the videos and…

Mark: No, no. I mean, it’s literally we’d… so, I’d come up to London and I’d work with Leisa in the British Museum, or whatever, and after a morning, we’d have a Flip and I’d just video the two of us talking about stuff.

Paul: See, I think that’s really good, because it makes people think twice before criticising, because there are real people behind them.

Mark: They see you as a real person. Absolutely.

Paul: So, there’s probably a benefit to that.

Mark: I think there is, I think… a lot of people hated it. And a lot of people hate the…

Paul: Yeah, but a lot of people hate everything.

Mark: Yeah [All laugh] A lot of people hated the distributed approach because they couldn’t keep track of everything, but i’s not…

Paul: Which I can kind of understand.

Mark: It’s not really their job to keep track of it, they can if they want, they know where everything is and, sorry if it’s difficult, but that’s the way it is. So, this time around we set up a bunch of Yahoo pipes, and things like that to aggregate everything from all over the place and just pop it in a WordPress blog.

Paul: Right.

Mark: That’s the approach that we’re doing for redesigning the back-end, and that’s working pretty well, because people have a framework in which to feedback, they’re not going hunting for everything all over the place.

Paul: I’m guessing that people are even more opinionated about the back-end than the front-end?

Mark: Oh, massively! A lot of people don’t really care about the drupal.org website, I mean it’s looked terrible for years and it’s not done them any harm, so a lot of people are saying like: “Well, why bother?” But Drupal’s almost, kind of, on a tipping point, I think; there’s a lot of big commercial companies using it and it’s important, but the back-end is been developed by developers for developers.

Paul: Ooh, painful.

Mark: Yeah, so to go in there and say that the user experience is broken, which is what we have said, has been interesting.

Paul: Right.

Marcus: Because they know it backwards, I guess.

Mark: Well, they know it backwards and they’re comfortable with it. THe thing with the Drupal, as a system is that you download it and you install it and then you hit this brick wall really hard and then you have to spend six months of a pretty steep learning curve to even get a rudimentary site online. And that’s, we’re trying to flatten the curve. But a lot of developers don’t really understand the need for it.

Paul: That’s developers for you!

Mark: That’s fine. [All laugh] I’m fine with that.

Paul: So, I mean, this is quite an unusual approach that you’ve taken here and it makes a lot of sense because, you know, Open Source software, it has to be an open and collaborative process and all the rest of it. Do you, would you ever do this again and if so, would you only do it with Open Source stuff, or do you think there’s a value in doing it with non-Open Source stuff?

Mark: I think there’s a value doing this with communities, where communities have a vested interest, either financially or with time spent in the community to take that community on board and redesign it for them; I think it’s pretty disrespectful. So, I think it would work for communities, you know, the social side of the web is ever increasing and I think this approach would work for the majority of that, but it takes a certain type of thick-skinned designer to take it on the chin, because it goes completely contrary to the way that designers are schooled and the way that we practice our craft every day, is that we’re the problem solvers with the years of experience and we’re the experts and here’s our solution, it doesn’t work in this sense.

Marcus: Can I ask a sales-y question?

Mark: Yeah.

Marcus: Because I don’t know how you won this work. Was that the differentiation that gave you the… this is what we’re proposing to do?

Mark: Er, yeah, I believe so, yeah. It was the kind of the loose, almost by the seat of our pants agile approach and the fact that we were not ingrained in a process and we were quite happy and willing to break it apart and completely.

Marcus: Because it’s going to take a long time, isn’t, and most clients want it, you know, can you do it in a week?

Mark: Oh yeah, the drupal.org redesign isn’t due to go live for another few months and our involvement was four months.

Marcus: Sure.

Paul: Right.

Mark: So, yeah, it takes a long time, it’s a lot of effort but, from a sales point of view, we’ve now taken on more of a, so we use to work pretty strict waterfall, like a lot of agencies did, and now we don’t, we work, I wouldn’t say we were agile because agile can be as restrictive as waterfall, just a different name. But we work a very iterative design process now and are finding that our clients are loving it because they’re getting involved right away, there’s no time wasting on functional specifications and weeks and weeks and weeks of scoping; it’s getting in and solving the problem, and from a financial and a business point of view, it’s a very scalable model, so you have x number of days at a certain price on a sprint and you can expand and contract that process according to scope and budget. It does require quite a leap of faith by the client, to say: “what, you mean you’re not giving me a fixed price?”

Paul: Yeah, that’s the hard sell.

Mark: I’m like: “No” And that is hard but I’ve found that a lot of clients you sit down and you talk them through it; they can see the advantages.

Paul: Because we’re not at that point, are we?

Marcus: Er, not with new clients. Old, you know, existing clients will accept it because they trust you, but it’s always this… I mean, I don’t know, would I… say, if I owned a business and I was going to hire someone I didn’t know, even if I could see that they’d done a lot of good work etc. etc. it would be like: “Ooh, I don’t know if I could do that” You know.

Paul: Difficult.

Mark: So, a lot, so, in those instances and there have been a few, then phasing comes into it, you know and let’s see how a few sprints go and if you like how it’s going at this price, let’s expand it out and…

Paul: Yeah.

Marcus: Interesting stuff.

Mark: So, yeah, it’s interesting.

Paul: So, you like to do things different, don’t you [all laugh] you know.

Mark: Wherever possible.

Paul: Yeah, and talking of which, you’ve just given an interesting talk about web typography that’s got a bit of a different slant on the whole subject of web typography. Talk us through a little bit, you know, give us a potted version of your talk.

Mark: A potted version is 20-25 minutes. So, this week there’s been a lot of discussion online, based on Comic Sans.

Paul: Right.

Marcus: Right.

Mark: Comic Sans is evil, apparently.

Paul: Yes.

Mark: I don’t think it is evil.

Paul: OK.

Mark: I think it’s the victim of being used in the wrong context for years and years. And I think that, so there’s also been a lot of talk about font embedding, you know people are crying out for it, it’s why sIFR exists, and all of that. The technicalities of how it’s going to work with browsers and manufacturers and the font foundries aside, is it actually a good idea?

Paul: OK. [all laugh]

Mark: And I mean that from the point that the majority, the vast majority of typefaces have been designed for a particular reason and they are primarily designed for print usage first and screen usage doesn’t get a look in beyond the preview of the screen font. Now, Georgia and Verdana and a bunch of the Microsoft ‘c’ fonts have been designed the other way around. They’ve been designed for screen first and print second. Now, we’re constrained by those typefaces and that’s actually a good thing.

Paul: Because it makes sure you’re using typefaces designed for the purpose.

Mark: It makes sure you’re using the right tool for the job. Font embeddign could be opening the floodgates to a whole world of pain, I think, in terms of type, and it’s not the designers that will be at fault, it will be, you know, the people who are going to suffer are the users of the sites.

Paul: So, is there a… I mean, surely that shouldn’t preclude font embedding, but perhaps there is an opportunity here, I don’t know, to limit font embedding to fonts that are enabled for the web, and open up a whole new business.

Mark: Could be, exactly, could be. I haven’t really thought beyond my twitchiness of this being a good idea. I haven’t really, I would like to think: “I don’t think this is good” but, I think the crux of my point is moving beyond font embedding, is to actually, the reason why fonts in other tools, which has led to the usage of Comic Sans is because the tools that people can use don’t allow them to make good design decisions.

Paul: Right. While some constraints do.

Mark: So, with some constraints and some steering, can help, so why not as designers, why don’t we get our heads together and think about how we can, kind of, scaffold that experience for people. How can we make, because every one’s a designer now.

Paul: Yes, for better or worse.

Marcus: Even me.

Paul: Yes, Anna wants to talk to you about your design for your band website, we won’t dwell on that now, in the middle of an interview.

Mark: Everybody’s a designer and everybody’s, you know, someone who uses Comic Sans because they think it’s fun and quirky is right in doing so, but what they’re not considering is their audience, and the context that it’s used and all of that. So, that’s pretty much the, my talk in 3 minutes.

Paul: The crux of the argument. I mean you did in your talk go on and discuss the role of typography more generally, which I thought was quite interesting as well, share a few of your thoughts about that.

Mark: About how I see typography as a craft and that kind of thing?

Paul: Yeah, and how it fits into the whole process and the relationship between design and content and that kind of thing.

Mark: So, it was split down into 4 really. This talk was quite good, it was quite therapeutic, in a way, because it made me really answer a lot of tough, ask a lot of tough questions of myself as to what do I think typography is, on the web, to me, what is it personally. With that is type as kind of structure, which, you know, is a lot of information architecture, really, that to me that is typography; it is type as language, how typography is married with content and how the, we’re in a world on the web where designers are designing systems for content to go into.

Paul: Yeah, template-based design.

Mark: Exactly, and they’re divorced from the content, you know, divorced from the language, in that sense, typography’s quite hard to do, good typography anyway; then there was, what else was there? Type as process, so the Jesse James Garrett’s levels of user experience, with the idea that typography in that instance is relegated to the surface plane, which is the visual plane, you know, it’s: “make this look nice” typography; to me that isn’t typography.

Paul: So, what is typography?

Mark: Typography goes deeper, typography goes deeper than how something looks, it is how information is structured, it is how information in understood, it is how words and language is conveyed.

Paul: Can you give some examples of that, because that’s quite, you know, it sounds very good, but it’s quite hard to get your head around maybe.

Mark: Yeah, OK, so it’s, what’s that quote: “You cannot not communicate”

Paul: Right.

Mark: No matter what you do, you’re saying something to somebody, so your choice of typeface says something about the words that you’re writing.

Paul: Yes, it does.

Mark: If, as a designer, you don’t know what those words are, how can you communicate the message?

Paul: Yeah, I mean it goes back to Comic Sans.

Mark: To Comic Sans, exactly, and that’s one of the difficulties, there’s been a lot of talk about art direction on the web, and I see that as the biggest barrier to art direction is that designers are divorced from the content.

Paul: I mean, this is almost quite depressing.

Mark: Yes, really I…

Paul: It’s not really happening.

Mark: Sleepless nights!

Paul: It’s not happy idea, because, I mean, fundamentally, that isn’t going to change, we’re not going to get into a situation, you know, because rightly want to be able to change and update and alter content on their own website and that makes a lot of sense, which means even if you have the content up-front, it may change further down the line. I guess maybe the tone doesn’t.

Marcus: I was going to say you’re looking at tone here.

Mark: The tone, you’re looking at branding and you’re looking at designers being involved right at the offset.

Marcus: And I think that is better now than it was even two years ago.

Mark: Oh, it is, yeah, it is, yeah, absolutely.

Marcus: I mean, we are looking now at involving copywriters, we are pulling copywriters, we’re talking to our clients about employing copywriters through us, that’s new.

Paul: And from the start of the process as well.

Mark: Yes, right. So, we’re doing the same, we’re looking at employing content strategists rather than actually writers, more from a branding perspective, because that kind of stuff, you know, doesn’t really change, depending on the words that you, the values of the client are still communicated and it’s aligning, it’s the designer’s job to align the typography, not just the font, but the way the information is structured and working with a copywriter to make sure the typeface matches the tone of voice. and all of that is a package. So, that’s what I mean about the surface plane; typography shouldn’t be relegated to: “choose a typeface and away you go”

Marcus: Yeah, I mean, that’s the big thing isn’t it, that’s for me, what I’ve taken from this is your, is the font, the typeface has to match the message, basically.

Mark: Yeah, absolutely.

Marcus: It has to fit with the branding.

Paul: OK, good stuff. I mean, that’s yeah, you’re doing some really interesting stuff. I love the way you’re pushing, kind of, what is the conceived wisdom in lots of areas, which I don’t suppose you think you’re doing, you just stumble into these things, obviously.

Mark: Yeah, I did. Getting together this talk was one thing, this talk did not pan out the way I thought it would and to question the very notion of font embedding is quite a…

Paul: Because our whole culture really is built around the idea of choice, more choice is better, but actually that’s not always the case.

Mark: Yep, so I mentioned that in my talk.

Paul: Oh, did you?

Mark: About the jam stall, have you seen this?

Paul: Yeah, yeah. That classic, tell that story, that’s a good one.

Mark: So, there’s a couple of psychologists, a few years ago did a study where they had a jam stall and they had 26 varieties of jam and nobody bought any and then they reduced the jam varieties down to six and sales increased by 10 and it’s just the choice.

Paul: You could almost be overwhelmed.

Mark: Well, yeah.

Paul: Even as a designer you can, you can open up Photoshop, look down that font list and go “crap!”

Mark: So, this is where I showed a screengrab of TinyMCE and that, out of the bag, has 82 choices for a user, so WYSIWYG isn’t great in those terms, but there’s something within there which is, as designers and the design community could build on, which is this notion of styles and how you can use the styles to create a cascade, through your typography, through your design, so we’d limit the end-user’s choices, but not in a bad way, constraints are good.

Paul: No, I mean, the way we now work, because we use our own content management system with our own adapted WYSIWYG editor it, we’ve taken a third party’s and messed it around, that basically we only allow, by default, obviosuly sometimes clients disagree, but we only allow them to mark up the content semantically, so they’re not at any stage picking fonts, because that’s the designer’s job, they’re just describing what the content is, whether it’s a heading or a sub-heading or whatever else, which, you know, obviously, you know, ensures that design style goes through, but also makes it much easier to use for the user as well, they’re not having, you know, a plethora of options and buttons to deal with, so…

Mark: But it goes beyond the web, I think, and this is what I was thinking as I was going through this, the reason why Comic Sans is all over the place is because Word makes it easy for you to make those bad design decisions, so it goes beyond that and content management systems in 10-20 year’s time could look nothing like what we’ve got now and if we don’t think very carefully about this notion of choice, then we could be in a real mess.

Paul: Yeah. Well, certainly we’ll be in a real mess anyway.

Mark: But, you know, a lot of people would push back on that and say: “What’s your problem? That’s fine. Mess is fine.” I don’t agree.

Paul: A little bit of mess is alright. No, I see where you’re coming from and, you know, I think there is a lot of value in that. I think I would personally still like to see font embedding, but I wouldn’t object to that being limited. I mean, one of the big problems to font embedding, as I understand it, and I’m not as knowledgeable on it as you, but is a licensing problem. So, if we have a new generation, I just look at the font industry, you know, the people that produce fonts and go: “Look, you’re missing a trick here, you know, you could create a whole new range of fonts, designed for screen, licensed for the web, and there we go.” So, if that’s what we end up with, I mean, that’s great.

Mark: That would be great, you know, if we got the calibre of typefaces like the new Microsoft ‘c’ fonts, and we got, you know, a library of 40 of those to use, 50, that would be awesome. If we ended up with a way of embedding up to, you know, Bitstream’s library’s what 28000 fonts, you can choose what you like, I don’t see that as…

Paul: Not so good.

Mark: Not a good thing.

Paul: I mean, even as somebody, I mean, I went to art college and, you know, obviously I had to study typography as part of that, I still feel overwhelmed. When I, I know some people absolutely love, you know, going to some of these foundries with all these different fonts and they spend hours picking through and it’s like buying shoes for, no I won’t say women because that will be sexist but, you know it’s almost like an addiction. For me, it just overwhelms me.

Mark: Yeah, no, I’m the same, I’m never, and this is one of the great things about the web is the restrictions in the typeface you can use because it makes you think more about typography beyond the font choice.

Paul: Yeah, which is only a tiny part of typography.

Mark: Exactly, and it makes you really push typography, and people are still pushing Georgia and Verdana and there’re still pushing it and they’re still making great looking sites. Font embedding can only confuse all that, unless it’s done in a pretty structured way, but like you say, the licensing is one big hurdle to get over.

Paul: Well, that was probably the most eclectic interview we’ve ever done, covering lot’s of random subjects,but very good, thank you for coming on the show, Mark.

Mark: No, thank you very much for having me.

Thanks goes to Simon Douglas for transcribing this interview.

Back to top

Listeners feedback

Storytelling

Mark from Taunton writes:

I run a rather dull corporate website for a company who builds and sells pre-fabricated timber houses. It is a competitive market and although a lot of users visit hardly anybody contacts us for a quote. To be honest, I have lost any enthusiasm for the site. Can you help!?

I could answer this question by focusing on the importance of repeat traffic on conversion rates. We could look at generating repeat traffic through the use of articles, newsletters and offers. However, we have covered nurturing repeat traffic before. Instead I want to look at the power of story telling as a way to engage with users.

Users considering purchasing high value products and services have a number of generic questions…

  • Can I work with these people?
  • Are they experts at what they produce?
  • Can I trust them?
  • Is the product or service of sufficient quality?
In short any corporate website that sells a product or service should be about the product and the people. One way of focusing on these two things is to tell the story of the product/service. In Mark’s case this would progress through the process of designing, manufacturing and building a pre-fabricated timber house. At each stage you would introduce key people involved in the process – the account manager who deals with the customer, the architect, the project manager, the builder etc. The story could even be the experience of one particular customer and so end with a testimonial from that customer. These people could be interviewed on video or profiled in the copy. Either way it gives the user the chance to see the expertise and personalities behind the business. It builds trust and demonstrates the quality of your product and people.
Finally, the story based approach helps the user imagine themselves going through the process and therefore helps them picture working with your organization.

Getting into the zone

Paul wrote a question aimed at Elliott Jay Stocks in our forum that I would like to respond to as well. Paul wrote…

As a designer, I feel times when I am very creative, others when I know an hour infront of Photoshop will be useless. So, fellow designers how do you make yourself get into the zone. I imagine this is even harder for freelancers, or maybe easier actually, as you can pick and choose hours to work.

Like most people I find it very hard to artificially force myself to be ‘in the zone’. However, I have learn’t over the years that there are some things you can do that increase the chance of it happening. These are…

  • Change your environment – If inspiration is hard to come by I often find that a change of scenery can be a massive stimulus. Go and work in a different room, a local coffee shop or even in the middle of a field. Anything to kick start your creative juices. In my younger days I was even known to work under my desk or on top of a wardrobe.
  • Use a different approach – Another similar approach to changing your environment is to change the way you are tackling the task. If you are trying to design a site in Photoshop move to pen and paper. Try designing just in black and white or reduce your design to simple boxes. Often approaching a problem from a different angle sparks inspiration.
  • Create distractions - Everybody always advices that you remove distractions to ‘get into the zone’. However, personally I find this leaves me staring at a blank page until my eyes bleed. An opposite approach that has worked for me is to actually add distraction. For example I will set an alarm for 10 minutes. After that 10 minutes I force myself to take a 2 minute break. These short spurts of creativity seem to work for me and the breaks are a frustration that make me hungry to get back to work.
  • Take a break – Proper breaks are important too. Sometimes you need to walk away from a problem before the solution comes to you. It has taken me a long time to accept that some of my best work on a problem is done when I am not consciously thinking about it. If I get stuck I find that watching some TV or going for a walk is a very effective way of putting me ‘in the zone’ when I return.
  • Go with the flow – Finally, it is important that when inspiration strikes  you run with it until it has been drained dried. Even if you find yourself in the zone at the end of the business day, do not stop working. Cancel meetings if you need to but make sure you keep going. This is the time when you need to remove distractions and just go with the flow.

Back to top

168. Personality

On this week’s show: Paul explains how to give your site real personality and Dave shares some top tips for writing secure code.

Play

Download this show.

Launch our podcast player

News

Typekit – the messiah of web typography?

There is some big news this week for those website owners and designers keen to use custom fonts on their websites.

For the longest time web designers have been limited to a small subset of fonts that were known to be present on the majority of users PCs. Although CSS font stacks allowed designers to choose less common fonts, because they could specify a safe alternative if that font was unavailable, this did not guarantee the user would see the design as intended. The only way of forcing a particular font was using Flash (via sIFR) or images. However, both of these approaches created potential accessibility problems.

The irony of this situation is that browsers provide a way to embed fonts in your webpage using @font-face. The problem is not technological but legal. Font foundaries are concerned about loosing control over the distribution of their fonts.

This is where Typekit comes in. Typekit is a soon to be released tool from usability expert Jeff Veen. When writing about the service he says…

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.

In short, they provide an easy and legal way to use custom fonts. Of course, there are still some unknowns. We do not know what font foundries have signed up for the service and so have no way to know what fonts will be available (or how many). We also do not know the prices involved. However, presuming you are happy to use Javascript to deliver your custom font then this looks like a very promising solution.

Apple vs Microsoft – A website usability case study

The Web Designer Depot is running an interesting post that compares the usability of Microsoft and Apple’s websites. Let’s be honest, pitting Microsoft against Apple is a little bit of a gimmick. Its actually very hard to compare these two websites. The two companies are aimed at very different markets (as the post itself admits) and are on very different scales. Apple is much more focused as a business than Microsoft and so the Microsoft site is always going to be more complex.

That said, it is extremely interesting to see the two sites deconstructed from a usability point of view and it does identify a number of common usability issues that we can all learn from.

The article focuses on the following areas…

  • Homepage design
  • Flow
  • Navigation
  • Readability
  • Search
  • Aesthetics
  • Consistency

I am sure it will come as no surprise that Apple won hands down. However, I think it is interesting to note that the primary reason for Microsoft’s failure was its size. The larger a site is, the harder it is to maintain consistency, ensure quality and handle navigation. There is a lesson here for all owners of large websites – if you want your site to be usable, make it smaller by simplifying. Apple applies the principles of simplicity to everything from their products to their websites and it results in exceptional usability.

Reinvigorating old blog posts

This week I came across possibly the most ridiculously named idea in the whole of the web – “Sneeze Pages“.

Although the name is stupid the idea is actually a good one. According to Sitepoint a Sneeze page is…

a page that propels people in different directions deep within your blog by highlighting a variety of posts that you’ve previously written.

In other words it is a way of drawing users attention to older blog content buried deep in your archive and therefore increasing the ‘stickiness’ of your website.

As the post on Sitepoint points out, the problem with blogs is that new user rarely get past the last dozen or so posts. The wealth of content in older posts is largely invisible. It therefore makes a lot of sense to create the occasion post which draws attention to this older content.

The Sitepoint article suggests four types of “Sneeze Pages”:

  • Themed Sneeze Pages—these are posts or pages on your blog or site that revolve around a single theme (e.g. The best of Boagworld usability advice)
  • Time-related Sneeze Pages—these pages are based around a defined period of time (e.g. What you might have missed this month)
  • Retro Sneeze Pages—another variation of the time-related sneeze page is to do one that unashamedly shows off a number of posts ffrom a particular point in its history (e.g. The best of 2008)
  • Series Sneeze Pages—this is the technique of writing a series of blog posts exploring a topic over a period of time with lots of interlinked posts. (e.g. My 10 harsh truth posts)

Personally this strikes me as great advice and you can expect to see several such posts from me over the coming weeks and months.

Creating WCAG 2.0. accessible forms

I never get emails asking us to cover accessibility in more depth. Its just not a sexy topic. Designers, developers and website owners know they should care about accessibility and even endeavor to make their sites accessible. However, it doesn’t really excite people.

However, it is an important topic and one I will continue to cover on the show. I would also argue it can be inspiring  too. I will never forget the first time I watched Robin Christopherson from AbilityNet use a screen reader. Its not until you see it in action that you realize the challenges people face.

The same revelation came for me again when reading Accessible Forms using WCAG 2.0. Its not a light read and takes some getting through. However, it has some great insights into exactly how screen readers deal with forms and yet how easy it is to improve the experience if you know what you are doing.

For example did you know that screen reader users have to enter a special “form mode” to complete a form. When in this mode the screen reader will only read form elements. It will ignore any instructional text, unless it is wrapped in a label or other form element. This can easily be a real problem.

There is also advice on…

  • Colors and fonts
  • Mandatory fields
  • Use of Javascript
  • Timeouts
  • Grouping form elements
  • and much more

Personally, I feel this should be required reading for all designers and developers.

Back to top

Feature: How site personas can enhance your sites

If your website was a person, what type of person would it be? It is an interesting question. Take a look at your website for a moment. Look at the design, read some of the copy. Can you picture a single person that represents your site? If the answer is no, then you may benefit from the creation a site persona.

Read How Site Personas Can Enhance Your Website

Back to top

Listeners feedback: Stop hackers hacking your hackey code!

Steve from Aberdeen writes:

You promote the show as being for all those who “design, develop and run websites on a daily basis” but actually don’t cover much for us developers! How about covering some more developer orientated topics such as website security.

Its a fair accusation Steve, which is why I we have Dave on the show this week. He is going to provide a basic introduction to website security.

Security is a complicated monster to tackle, so it helps to think about it in really, really basic terms. Stuff comes in, stuff goes out. We have to assume that anything that comes from the user is dangerous, or tainted, and can’t be trusted in any way what so ever. We don’t even know for sure that the user is who they claim to be. Trust no-one. We also have to be 100% sure that anything we send back to the user is safe, un-tainted, and uncompromising. You don’t want to send dodgy scripts to your users, and neither do you want to send back valuable clues to the inner workings of your code. This is not meant to be an all-encompassing guide to preventing attacks, but instead a set of guidelines to writing applications in secure way.

Minimise

The first rule is this. Minimise areas that accept input from the request, and minimise areas that send response. Sanitisation and validation should be the first thing you perform on data received and the last thing before you return it. Following a sensible architecture such as the Model View Controller approach separates data received by the Controller area and data returned to the View. This will make your life far simpler when you start tackling such issues. This applies to all forms of input (form data, querystrings and cookies) and all forms of output (HTML, redirect, file download).

Validate

A commonly overlooked validation is confirming the data has been intensionally sent from the user. There’s nothing to stop a 3rd party website posting to your website, so it doesn’t matter how secure your login form is, the posted data could be coming from any of the dodgy websites your user has open. An easy solution is to use a random key as part of every posted form, unique to the users session. This way you can easily verify the form has been posted from a tightly controlled page you served to your user. It’s not enough to look at referrer headers, because these are easily faked. ASP.Net web forms, to their credit, do this by default.

Use White-lists over Black-lists. Lets say for example you’re validating a phone number, you don’t specifiy every non-digit character you want to remove, you strip everything that isn’t 0-9. A little too obvious? The same applies to the classic script tag. If you start trying to remove every form of <script> tag, you’ll end up playing catch-up against tricks using <img>, <body> and clever encoding. If allowing any kind of HTML through is necessary, you’d better be damned sure who submitted it and who is going to be able to see it.

Storage

So you’ve received your data, it looks pretty good. Whatcha gonna do with it? If it’s heading towards a database, you can’t be too careful. Escape it, or better yet use parameterised queries. If it’s the file system that your data is ending up, put it somewhere sensible. Ideally, this would be somewhere outside of your webroot, or in a protected folder. Whatever happens, you don’t want anything here directly accessible or executable. Just to be sure.

Responses

OK, so we’re sending a response. Just because the data we received passed our tried-and-tested validations doesn’t mean it’s safe to send back to the user. We HTML encode everything, unless absolutely necessary. If it’s plain text, fairly straight forward. If you’re putting suspect data into an HTML attribute, it might be an idea to verfify the format. If you think you’re outputting an SRC or HREF, check it at least looks like a path. If your response happens to be a redirect, double check nothing funny is going on with the URL. If your response is a (serious) error, make it look friendly, but don’t give away exactly what went wrong. If you want to send them a file, attaching it and manually setting the MIME type is more controlled to simply pointing them at the file.

This is not intended as a set of golden rules, rather a few key points to help you think about the code you write. Most new forms of injection and hackery are just clever ways of attacking poor code. Writing sensible code will keep you one step ahead of such attacks.

Back to top

A demonstration of graded browser support

In my post ‘Effective Browser Support‘ I explained how we should not be looking to make sites identical in all browsers, but rather focusing on usability and accessibility. In this post I demonstrate how that works in practice.

I recently launched a new Headscape service called the Consultancy Clinic. As part of this launch I created a small single page website. Let me use this site to demonstrate how graded browser support can work.

Remember – the idea of graded browser support is to support all browsers so that your site is usable, accessible and at least reasonably attractive. With that in mind lets start with the lowest common denominator.

Starting with the basics – HTML

All web browsers can support HTML. So as a bare minimum I needed to ensure my new website was usable and accessible in raw HTML format. To test this I used the free Lynx Viewer and it returned this…

Consultancy Clinic site viewed in Lynx

So far so good. But what about those browsers who think they understand CSS but don’t render it properly?

The pretenders

Unfortunately when it comes to CSS support things are not black and white. Although some browsers support styling flawlessly, others think they know what they are doing when they do not.

Poor implementation of CSS is the curse of older browsers. Browsers like Netscape 4 and IE 5 offer very limited CSS support and badly implementing what it does provide.

Instead of ignoring these browsers I create a basic CSS file which does some simple formatting. Instead of compromising the design to accommodate the limitations of these browsers, I deliver a simplified version which is usable and accessible.

Consultancy Clinic Website viewed in IE 5

As you can see the design focuses on some simple layout and typography. That way it avoids anything IE 5 may have trouble displaying correctly.

Dealing with IE6 and above

The next step was to create a more sophisticated design for browsers such as IE 6,7 and 8. These browsers understand CSS well but lack some of the more modern enhancements.

It was necessary to hide this enchanced stylesheet from ‘the pretenders’ who would render it badly. To do this I had to use a CSS hack, which was unfortunate. However, older browsers now completely ignore it.

How I did that is outside of the scope of this article. However if you want to know, view the source on the site and look for default.css.

This new design now renders perfectly well in the more modern versions of IE.

Consultancy Clinic website in IE 7

A watermark image is highlighted in this screenshot

There are however, subtle differences between the versions of IE. For example IE6 does not support transparent PNGs and so in IE 6 the watermark on the form does not appear. Although it would have been possible to force IE6 to display this image, it was more sensible to simply not show it. After all the watermark is an embellishment to the design, not a fundamental part of it.

The bells and whistles

Finally I have added some further embellishments to the design for more advanced browsers. For example both Firefox and Safari support border-radius. This allowed me to add curved corners, which are simply ignored by browsers who do not support that style.

Consultancy Clinic Website in Firefox

I was even able to go a step further in Safari because it supports dynamic shadows.

Consultancy Clinic website in Safari

Conclusions

Design enhancements like drop shadows and rounded corners are important, but not to the same degree as usability and accessibility. With finite time and budget, we are better spending our time making sure the site is usable on all browsers rather than getting it looking identical in a few.

With the time I saved not trying to force IE6 to display a rounded corner correctly, I was able to ensure the site looked good in older browsers with a limited understanding of CSS.

Once you accept that your site will not look identical in all browsers, you will be able to build sites faster, cheaper and ensure a broader range of devices can access them. Surely that is worthwhile?

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

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

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

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

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

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

Page sample from Marks book

Win a free copy

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

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

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

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

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

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

Current entries

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

149. White Hat

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.

 

Effective browser support

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

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

What does ‘support’ mean?

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

As Yahoo states in their own browser support documentation:

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

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

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

The problem with pixel perfect design

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

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

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

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

For example, modern browsers support design enhancements such as:

  • rounded corners
  • drop shadows
  • Improved typography

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

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

Testing

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

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

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

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

Conclusion

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

146. Obsessive

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

Play

Download this show.

Launch our podcast player

Housekeeping

Two pieces of housekeeping before we begin:

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

News and events

24 Ways is back

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

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

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

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

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

iPhone designers kit

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

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

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

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

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

5 Ways to Get Usability Testing on the Cheap

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

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

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

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

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

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

Site search options

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

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

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

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

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

Back to top

Interview: Nicholas Felton on ‘Designing Data’

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

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

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

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

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

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

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

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

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

Nicholas: That’s fantastic.

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

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

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

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

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

Nicholas: Yes.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Nicholas: Absolutely.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Paul: Well I found the whole thing incredibly inspiring.

Nicholas: Thank you so much.

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

Nicholas: Thank you Paul. Thank you.

Paul: Good to talk to you.

Nicholas: OK, take care. Bye bye.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Listeners feedback:

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

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

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

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

Back to top

144. Scale

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

Play

Download this show.

Launch our podcast player

News and events

How much should you charge?

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

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

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

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

A plethora of accessibility posts

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

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

A business case for deleting content

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

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

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

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

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

12 principles for keeping your code clean

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

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

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

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

Back to top

Interview: Joe Stump on Building a Scalable Site

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

Joe: Oh, good to be here.

Paul: Have we had you on the show before?

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

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

Joe: Sure

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

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

Paul: OK

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

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

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

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

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

Paul: Wow.

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

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

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

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

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

Paul: Ah, OK

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

Paul: Wow

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

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

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

Paul: Laughs

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

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

Joe: Aha

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

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

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

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

Paul: Wow

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

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

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

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

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

Paul: Laughs

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

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

Joe: Sounds like a plan.

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

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

Paul: Yeah?

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

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

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

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

Joe: It’s not in San Francisco.

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

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

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

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

Paul: Wow.

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

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

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

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

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

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

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

Paul: Oh, yes yes.

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

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

Joe: Laughs.

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

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

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

Joe: Thanks Paul, bye.

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

Back to top

Listeners feedback:

Top web designer applications

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

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

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

Sending out bulk emails

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

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

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

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

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

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

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

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

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

Back to top

A partnership of cooperation

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

I am horrified by some of the stories I hear from clients and web designers about failed web projects. In most cases the problem has been not with the project itself, but with the relationship between client and supplier.

Although we are learning at Headscape, we have discovered three principles that will help both designers and clients work better together. To run a successful web project you need:

  • Mutual respect
  • A defined relationship
  • A positive attitude

By building these characteristics into your relationships there is a much greater chance of success. Let us look at how.

Learn mutual respect

It is disturbing to hear how some web designers refer to their clients. There is an underlying feeling that clients are stupid and just hamper the development process.

In reality clients are normally a key component and extremely knowledgeable. The client usually has a better understanding of their business objectives and target audience. They know what they want to achieve through the website and will have to work with it over the long term.

The client is the sites advocate, evangelist, defender, content provider and more. He is the driving force behind the site and deserves the designers respect.

However respect is a two way street, and clients often undervalue web designers. This is especially true in in-house teams although it also occurs when hiring external agencies.

Clients often reduce the role of the web designer to a pixel pusher. They micro manage designers effectively ignoring the extensive experience the vast majority bring to the table. Everybody has an opinion about design, but good design is not about personal opinion. It is about fundamental rules of layout, typography, colour theory and more. It is the designer who has expertise in these areas, and the client needs to respect this.

This lack of respect is often because both parties misunderstand their respective roles.

Define the boundaries of the relationship

Both designer and client have expectations of their role and that of their opposite. However, these expectations often differ. For example, if a client has not worked on a web project before they are unlikely to be aware of their role. This can lead to the client straying onto the designers territory or failing to fulfil their own obligations in the eyes of the designer.

At the outset of a project define the boundaries of the relationship. The client’s role in particular needs to be clearly defined.

Clients should be focusing on three things:

  • The business objectives – The client understands the business objectives associated with the website. Therefore, they should be constantly asking whether the design fulfils these objectives and if not explaining to the designer where they believe it falls down.
  • The needs of users – A good client should have an insight into the behaviour and character of their target audience. The client should assess designs not based on personal opinion, but within the context of the target audience. They should ask how users will react to a design, not what you think of it personally.
  • Problems and not solutions – Many clients endeavour to find solutions to perceived problems rather than communicating the problem to the designer. For example, a client should not suggest that a design is changed to a specific colour. Instead they should express concern that the target audience may not respond well to a particular colour. The designer can then decide on the best way to resolve the problem. If the client does not communicate the underlying problem, but merely suggests a solution, he is straying onto the designers territory. This prevents the designer from doing his job properly.

Of course, it is not just what you say but the way you say thing.

Build a positive attitude

Interestingly that both designers and clients perceive the other as a barrier. Designers believe that projects would run smoother without the objections of clients. Client perceive designers as negative and constantly undermining their ideas and suggestions.

Personally I rarely say ‘no’ to a client. Saying ‘no’ ends the discussion and leads to confrontation. It also fails to communicate the problem or identify a way forward.

Does this mean I do everything my clients ask? Not at all. Instead I provide them with enough information to realise that their suggestion may not be the wisest decision. In short I say ‘yes we could do that’, but then go on to explain the consequences of their suggestion.

However, you should not stop there. Also ask the question ‘why’. The other party may make a suggestion that seems ridiculous, but they will have had their reasons. You need to know what those reasons are. By understanding them you maybe able to provide an alternative that keeps everybody happy.

Maintaining a good working relationship between client and designer is not an exact science. However these approaches have gone a long way to improving the way we work with clients. Hopefully they can do the same for you.

140. Launch

In this week’s show GetSignOff has finally launched, we talk about how to use web stats to improve your site and we answer your questions about roles with web design and should you help clients with hosting.

Play

Download this show.

Launch our podcast player

News and events

Acid3 receptions and misconceptions and do we have a winner?

The team that develop WebKit, the open source web browser engine that Safari and the new Google Chrome are built on, have just announced that the engine passes the Acid3 test developed by The Web Standard Project (Wasp).

So what is Acid3?

Acid3 runs a series of tests against a given browser and produces a score, the goal being 100/100. This score is generated from how "standards compliant" the browser is. For example whether it supports CSS2.1 styles such as "inline-block" and "pre-wrap", if it supports SVG-Fonts, what DOM features is supports and a whole range of other criteria.

So WebKit passes!

Does this mean we should ditch Firefox, IE and all the other browsers in favour of Safari or Chrome, well no, and that’s what Lars Gunther is talking about in his article over at WaSP.

It’s great that tests like Acid3 exist and that browser developers endeavour to build better browsers because of them. All in all it results in a much better experience for the average user and makes our lives as Web Designers much more hassle free.

6 Things To Like About Dreamweaver CS4

So Dreamweaver CS4 became available this week, 15th October to be exact and Alex Walker over at Site Point has been having a play and has shared with us 6 thinks he likes about the new release. Check out his article for details of each, but a summarised list is:

  • UI/Workflow Improvements
  • The Related Files Toolbar
  • Code Navigator
  • Live View
  • Advanced JavaScript Interpretation
  • Making JavaScript Unobtrusive

From reading the article these improvements over the previous version look really promising. One feature that really caught my eye is "intelligent code completion" for JavaScript and the most popular libraries such as jQuery, MooTools, Prototype etc, the same way it does for HTML!

It would also appear that Adobe are making big improvements to the "Display View" of Dreamweaver, which has historically been the stigma plaguing most "professional" designers who use it. The "Display View" now has integrated code navigation, so you can use it to jump to specific elements within the page and Adobe have also built WebKit into Dreamweavers core so you can run your site through the software to test JavaScript, rendered CSS, server-side code etc.

So will these new features encourage more people to use Dreamweaver?

7 Ingredients of Good Corporate Design

Smashing Magazine has published a great article that discusses 7 ingredients to good corporate design. They break the discussion into two elements:

  • Design as artistic representation, which consists of:
    • Logo
    • Typography
    • Colours
  • Design strategy, consisting of:
    • Brand
    • Quality
    • Community
    • Culture

It’s important to understand that corporate design isn’t simply of a graphical nature but is intrinsically linked with your strategy, the goals that you set and how you implement them and this article is well worth the read.

Back to top

Launch: GetSignOff Goes Public

Monday GetSignOff finally opened to the public. It has been an interesting journey read more here.

Back to top

Feature: Using Web Stats for More

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

Back to top

Listeners feedback:

Salesman seeks designer/developer

Got this audio question from Andrew:

Hi Paul, hello Marcus and hi to all the people who work at the show. I live in Canada so hearing your nice English voices through my headphones is great. My name is Steve and I’ve done some freelance web design for clients in the past, but the part I enjoyed the most was the selling cycle; being able to explain to the client what a standards based website could do for them and then persuade them that investing in such a site would be wise for their business. I bet there’s a lot of designers and developers out there who are absolute Jedis when it comes to coding CSS and HTML but really hate the selling part. And then there are people like me who can really sell well but I wish I could work with people who are amazing at building websites.

My two-pronged question is as follows:

Is there a website or another resource that would allow people like me, who love web design, but are more business/marketing oriented to touch base with people who are in the opposite situation? And I’m thinking more than just a job board here, I guess the best analogy would be something that Marcus might be familiar with – adverts in the back of music magazines that would say something like ‘band seeks drummer’ or ‘talented singer needs people to play instruments’.

My other question: how did you guys do it at Headscape, were you all great at coding and someone had to get pushed out the door and start selling or were there very separate roles from the beginning?

Ok, part one first (I’m original aren’t I)… the ‘band seeks drummer’ analogy is good but I much prefer a dating agency analogy! Cuddly, financially sound salesman WGSOH seeks quiet, intense, practical developer for fulfilling relationship. :-)

As far as I am aware, sadly, this service does not exist. Forums, like the Boagworld forum, have got to be your best bet.

Right, part two. Much as I would love to claim that I used to be great at coding before they kicked me out of the door to do the selling, it would be a blatant lie. When Headscape started, the three of us came from different disciplines – Paul was designer/tech (it’s true!), Chris was project manager and I was salesman. We soon didn’t have enough design/tech resource and started to recruit but the fact that a) Chris was organising and pushing projects along and b) that I was concentrating on bringing in new work meant that we were running things like a larger agency (more efficiently and with less risk) very early on.

I have banged on about how important effective selling is in the past many times so won’t repeat myself here. The only thing I will say is that having totally separate roles is not necessarily a good thing. Even now, we don’t have very separate roles. Chris and Paul are both heavily involved in the sales process and always have been. In my view, it is the responsibility of the company directors to se
ll.

But, added to that, Chris and I also do a lot of consultancy work (requirements analysis, IA work etc), and Paul still does design work. This is important because it keeps our ‘hand’ in. Getting too involved in one role can often lead to a lot of potentially out-of-date talking, and very little ‘doing’.

Do/should you help clients’ with hosting?

Hi all

I’m just about to do a ‘simple’ website for a friend (aka my 1st client) which will try to market something he is looking to rent out. Whilst I’m confident I can do the website, I’m not sure how far I should go with helping/organising his hosting. The client doesn’t know anything about hosting and doesn’t have any hosting space with his broadband provider.

Now I don’t really want to get into organising hosting unless I have to, so I’d just like to know what the ‘norm’ is in this regard? As a web developer/firm do you automatically sort out hosting, do you get the client to do it and then give you the hosting password so you can upload the site? Is it even a good/lucrative idea to get involved in sorting this out as part of the ‘service’? Can people suggest what they do please?

Thanks, Alex

This question came from the Forum and there are already some interesting posts in response. The biggest issue here is:

Can you support this website?

Can you provide support if the site goes down in the middle of the night, on Christmas Day, or even when you’re on your two week break to Spain?

If you decide to sell hosting then you become a middle man between your client and the hosting company. Your client is contracted to you to provide and support hosting, not the hosting company. Of course, you have a relationship with the hosting company where they will provide an agreed level of support but… you are still the person that has to deal with your clients’ issues as and when they arise.

At Headscape we are completely open about this with our clients. We tell them that we only provide support (of any kind) on working days between 9am and 5.30pm. We’re not set up to do anything more than that.

However, we do offer hosting for those clients that feel that the level of support that we offer is enough. We have our own managed platform and we also act as a reseller for a large hosting company.

The solution for those clients that require a superior level of service is simple. The client buys the hosting directly thereby taking you – the agency/freelancer – out of the loop. We specify technologies, discuss the level of support required, amount of bandwidth etc with client – we will also set up the site on the web server – but the client orders and pays for the hosting.

This has worked really well particularly for the larger, busier sites that we have developed.

All that said, if you act as a reseller, and you have enough clients, you can make a decent profit via hosting. However, don’t be fooled into thinking that it doesn’t involve any work keeping all those clients happy and up to date. If you have enough clients to make money out of hosting then it’s very likely that you will have regular hosting issues to deal with and constant renewals to deal with.

My friend and colleague, the long suffering Mr Scott, has many times said that he wished we had never touched hosting simply because it often ends being a constant irritation that gets in the way of project work and rarely pays for itself.

Back to top

134. Chrome

In this weeks show we give you advice on choosing the right hosting company, Teifion and John send us a review of dConstruct and of course we discuss the release of Google Chrome, can it topple IE?

Download this show.

Launch our podcast player

News and events

Managing and choosing fonts

With the new generation of browsers supporting embedded fonts in a consistent way, it is time for us as web designers to start taking typography serious.

One small part of this is how we manage and choose fonts. I confess, I have put little thought into font management. The result is that my choice of font is often not as thought through as it should be. A massive drop-down list in Photoshop does not inspire considered typography.

However, a couple of discovers this week have inspired me to put more thought into the subject.

The first is a review of 25 font management tools. This include both free and paid for software. It also has options for both the Mac, PC and even Linux.

You might ask why we need a font management tool at all. Trust me, if you start installing a lot of fonts on your system you will soon discover why. Large number of fonts become unmanageable and can cause serious performance problems. As a minimum you need an easy way to enable or disable fonts.

The second discovery was an online/AIR font application that displays text of your choice in every font available on your system. This in itself makes font selection much easier. However, this application also enables you to narrow the field by removing unsuitable fonts. It is a great visual way of getting the right typographic look.

jQuery supercharges menu rollovers

Although I am a standards based designer through and through, I have always felt like the nerd in the class. After all it is the Flash kids that get all the girls and attract all the attention with their cool (if somewhat inaccessible) animations and effects.

4 years ago Dave Shea attempted to smarten up our image a little with CSS Sprites. This was a technique for doing CSS based rollovers on menu items. It wasn’t as eye catching as Flash but it was a start and at least I didn’t feel dirty after I used it.

Jump forward to the present and we find a world where the ‘cool divide’ has been reduced thanks to Javascript. Dave therefore felt the need to bring his CSS sprite technique up-to-date on A List Apart, using a sprinkling of Javascript.

Using jQuery Dave takes the plain old CSS sprite menu and gives it an attractive new look. However, at the same time he maintains its accessibility thanks to progressive enhancement.

It is a slightly long winded article (like I can talk!) in places nevertheless it is a nice illustration of what jQuery and CSS are capable of. It is also a technique we can all make use of right now, something A List Apart has been missing sometimes of late.

Can Google Chrome Topple IE?

Without a doubt the biggest story of the week is that Google has launched its own browser called Chrome. At the moment the browser is only available for windows although a mac and linux will follow shortly.

More on my thoughts can be found here

Back to top

Feature: Choosing a Hosting Company

Hosting companies are a dime a dozen. They all offer very similar packages and all seem competitive on price. How then do you choose between them. We discuss this in this weeks feature.

Back to top

Review: dConstruct

Teifion: And the next part of the podcast is sponsored by Ticklefish Design and Searchlight Digital.

John: Hi I’m Marcus Lillington.

Teifion: No I want to be Marcus Lillington. Marcus is the cool one he doesn’t get my name too wrong.

John: No no. You agreed that we would both be Marcus.

Teifion: That’s a fair compromise. No one want’s to be Paul. Anyway right. On with the show. So Marcus what did you generally think of the conference?

John: I thought it was really good actually. Yeah I enjoyed it all. I enjoyed the free coffee.

Teifion: Which you didn’t tell me about till right at the end so I only got one cup.

John: No that’s right.

Teifion: I thought I was a bit unfair.

John: I thought it was sort of obvious there was free coffee. But with regards to the speakers, yeah I enjoyed all of them. Some of the speakers were speaking about things I don’t really you know, I’m not involved with directly but they all put their points across really well. I enjoyed all of them. I think I can take something away from each speaker. What did you think?

Teifion: I quite liked the fact that none of them talked for too long or too little. They were all quite engrossing and though again not directly related to what I do they were all very interesting and I did end up taking something away from it.

John: Yeah and there was humour in there as well.

Teifion: Oh there was Matt and Matt are hilarious.

John: Yeah Matt and Matt get the award for comic.

Teifion: With that subject what was your favorite talk during it?

John: My favorite talk was Tantek on microformats.

Teifion: Okay summarize roughly what he talked about. Except microformats that just kinda basic.

John: Yeah it is really. You know the concept of how microformats are I don’t really know what I’m saying again.

Teifion: Just keep going Paul does.

John: Yeah just how you shouldn’t have to keep reinputting data into all these different sites, all these different social networks that we go on. They should all, you know there should be one sort of central hub which is your sort of central place where you put all your details in and all these other sites that you choose to join up to and put information on. They should all just link up. Microformats again is a new subject to me. I’ve only done a basic vCard and that’s about it. It’s definitely something I’m going to read into.

Teifion: I’ll definitely agree with that summary.

John: Although a little long winded.

Teifion: No not long winded at all. Remember the people who listen to this are used to listening to Paul.

John: Yeah that’s true.

Teifion: Well I’d say that my favorite talk was Jeremy Keith on the system of the world it’s titled. I would have titled it something more like "Why the cloud can be smart and why it can be stupid. Why you think you can predict it and why you really can’t." It was a great intellectual talk and I’m pretty sure that most of it went over my head. Possibly into the head of who ever was sitting behind me. He basically said that you can’t predict what will be the next big thing like Facebook or Twitter but you can create good foundations or nurture something so that it’s more likely to be the next big thing.

John: Yeah that’s a good summary there as well. I mean basically I thought it was just about a black swan.

Teifion: That is true actually. It’s just all about the black swan. You can’t predict it. It’s got a big effect and after it you’ll all go back and say "Hey we knew this was coming.

John: We knew this black swan was going to be born.

Teifion: Yeah that’s how it works isn’t it. Tell you what, what do you think the best moment of the conference was to you?

John: Ah. I mean there’s a lot of moments but the best moment has got to be Teifion, as Marcus calls you, when you went up to Ryan Carson to thank him for the free complimentary tickets to dConstruct.

Teifion: I’d like to point out that yesterday as in the day before the conference I had a 5 hour train journey from South Wales to Brighton. I then went to bed really late and got up really early. I was really tired and confused.

John: Still no excuse. You call yourself a student.

Teifion: No I’m a graduate.

John: Oh okay. There’s a slight difference. But luckily for Teifion I pulled him back at the last moment to save his ???? it wasn’t Carsonified that supplied the tickets it was Clearleft.

Teifion: I knew it was Clearleft that supplied the tickets. I just got confused. Tall guys in hats are very confusing.

John: What about you? What was your favorite moment?

Teifion: I think it was when we actually went up to thank Jeremy for putting the whole event on and for possibly the free tickets. It wasn’t actually Jeremy that we needed to thank aparently. I like the way that you sort of thought how to do it. You went for the wussy catch his eye approach. I just walked up and said "hi thanks for the tickets. Have a business card." I didn’t actually give him a business card.

John: No but that is a funny point. Tef did hand out quite a few business cards. Which is good I mean networking is really good. Apart from the lady who you tried to impose your business card on.

Teifion: I don’t think she heard me.

John: No she just blanked you.

Teifion: It’s possible. It’s happened before. You remember why we went to see Jeremy don’t you. It’s because sadly Marcus your jokes are sadly not up to the calibre that we would like. Granted their not dire, I mean if Paul was in charge of it they would be dire or worse. But I think Marcus’ jokes could do with some improvements. So we went up to Jeremy to ask him for a joke. Do you want to tell the joke.

John: Yeah I would love to tell a joke. Apart from the fact that I actually can’t remember it. But seeing as you already knew it and knew the punch line you can tell it.

Teifion: Okay why did the chicken cross the mobile strip?

John: I don’t know. Why did the chicken cross the mobile strip?

Teifion: To get to the same side. If you don’t know what a mobile strip is Google it.

John: Unfortunately I don’t.

Teifion: That’s a shame. Well I suppose we’re hitting the 6 minute mark which if we were Paul we’d go "Well lets start on the news." or maybe waffle on a bit more. We’re actually going to have to conclude this partly because it’s not our own podcast. So I figured what we could do is we can end it with a question. What do you think of that idea?

John: Good idea.

Teifion: Well what I’m going to do now is I’m going to put you on the spot and I’m going to pause it for 30 seconds and you are going to come up with a question and then you’re going to ask it.

John: Brilliant. Was that the pause?

Teifion: Yes a good long 30 seconds.

John: I thought you were just going to do a pretend pause and then we’d just go right into it.

Teifion: No that would be something that Paul would do. Paul’s not cool.

John: My question to both of you Paul and Marcus is, "Would you advise up and coming web designers or developers to email and get in contact with local agencies with regards to getting some kind of work experience with them? Even if it’s only for like a day or two." So that’s my question.

Teifion: Fair enough. I suppose I could add a sort of additional question. It is "If you put so much effort into your work Paul you presume you put a lot of effort in to your family like. I know you put a lot of effort into youth work. Why is it so hard for you to put just a little tiny bit of effort into learning how to pronounce a name that so many people I know can so easily pronounce? It’s (he didn’t spell it so I don’t know). It’s really not that hard.

John: Teifion

Teifion: See if you knew me for longer you’d be able to pronounce it. Maybe Paul’s just not cool enough.

John: Maybe you should all just call him Ty from now on.

Teifion: That could work. Anyway that’s it.

John: O I’ve got one more point. Stanton.

Teifion: Where is Stanton?

John: Stanton we agree well we met him. He said he wanted to help and come in and say a few words at the end of the podcast but we don’t know where he is. He was last seen

Teifion: chatting up randoms.

John: Yeah that sums it up.

Teifion: I could guess at what he would say I could be completely wrong though.

John: I think we should end it on that note.

Teifion: Bye.

John: Bye.

Thanks goes to Curtis McHale for transcribing this review.

Back to top

128. Details

On this weeks show I’m accompanied by our Producer Ryan and Researcher Stanton. We Interview Dan Rubin on the Details of Design, and answer your questions on managing a bigger team and terms and conditions.

Play

Download this show.

Launch our podcast player

News and events

Silverback Launches

This week has seen the release of Silverback, the highly anticipated app from the guys at Clear:Left. After months of speculations about what Silverback actually was, the “spontaneous, unobtrusive, usability testing software for web designers” is finally available for download.

We’re sure a majority of you know all about Silverback, but for those of you who don’t, Silverback, which is available exclusively for the Mac, is Clear:Left’s answer to convenient usability testing on the go. Utilising the iSight and screen capture facilities of the Mac, user’s experiences can be recorded and reviewed at a later date, taking away the costly and often difficult to setup up approach of using specialist equipment like multiple camcorders which can lead to hours of time spent trawling through video footage.

PatternTap

Whether you’re a designer or developer, there are many occasions where you go on the hunt for inspiration in interface design. Normal CSS Gallery sites give you great examples of full site design, but usually don’t focus on the small details of interface design. The only site i’ve ever been aware of is Christian Watsons “Elements of Design“, which is a great resource showing examples of elements like comment forms, calendars & date pickers, footers, image captions and so on.

There’s a new site I’ve come across this week called PatternTap.com which also wants to collect these design patterns and focus on specific elements of design and to help you to reference, collect and organise them for your own needs.

PatternTap is shaping up to be an absolute goldmine of inspiration, and looks like it will build into a large resource of design element exmples. There’s currently 46 collections, everything from 404 pages, audio players, pagination and search boxes. It let’s you create your own “lightbox” style user sets, so you can keep your favourite examples organised for future reference.

I’ll definitely be adding this to my toolbox of design inspiration links, and recommend you give it a look too.

Google App Engine Update

This week also sees the release of a small update to the Google Apps Engine. The Google Apps Engine allows developers to build applications on Googles own infrastructure. I have to admit that the Google Apps Engine is not something I’ve developed with personally however that doesn’t stop us talking about it so let’s run through the list:

  • Firstly you can now have up to 10 apps on your account as opposed to the previous limit of three 3, the Engine also limits developers to 1000 files per application, so the increase in the number of apps you can now have is a welcome addition.
  • Time windows for Dashboard graphs: Zoom in on the data in your dashboard to get a more accurate picture of whats going on. You can zoom in to see graphs for the last 24, 12, and 6 hour periods.
  • Log files can now be downloaded in plain text.
  • And finally you can send email as the logged in user: If you’re using the users API, you can now send email from the email address of the currently-logged-in user were as before it was only possible from the administrators account.

S3

So some of you may be aware that Amazon’s S3 service suffered from some 6 hours of downtime recently, this echoes the issues of service availability that happened back in February.

For those of you who don’t know, the S3, or “Simple Storage Service” is a scalable and inexpensive data storage infrastructure, which allows you to store and retrieve any amount of data.

So this is a fantastic idea – in theory, it means that if you’re developing a large website or web app and need lots of storage, you don’t have to pay for huge webhosting plans with lots of physical diskspace, you store your assets “in the cloud” as it were, and you’re charged based on how much storage space you, and how much bandwidth you consume.

Lots of large sites rely on the S3 service for their storage needs, Twitter, BaseCamp and SlideShare to name but 3 and the recent downtime has raised the age old issue, “are we putting all our eggs in one basket?” Jonathan Boutelle put it best in a recent blog post, stating “When S3 goes down, the internet goes down”. Aral Balkan also wrote recently urging people to have contingency plans in case events like this happen again, stating that the Open Source Google App Engine SDK could be the answer.

Back to top

Interview: Dan Rubin The Details Of Design

Paul:Joining me today is Dan Rubin who I recently saw at the @media conference. Good to see you or speak to you again Dan should I say?

Dan Rubin:Good to speak to you Paul.

Paul:It was good to meet up with you at @media. It feels like a long time since we met up and it was great to hear you speaking there. That was a first for me.

Dan Rubin:Thanks. It was a privilege to be able to help out Patrick it being very last-minute.

Paul:Oh was it?

Dan Rubin:He sent me an email about two weeks prior saying someone had dropped out and of course I wasn’t going to say no.

Paul: laughs

Dan Rubin:It’s been over 10 years since my last trip to the UK, so it was a great opportunity.

Paul:Cool. Well I have to say considering you only had two weeks to put together the presentation, it was truly phenomenal. It was an excellent presentation and I really enjoyed it. You were talking about ‘design is in the detail’ I guess was the kind of subject you were tackling?

Dan Rubin: I’ve been talking a lot lately about the level of detail, the attention to detail and the design and I’ve done a couple of presentations with Brian Veloso over the last year on that same kind of topic. This was an extension of that injecting some of my own little personal preferences into the talk and got to cover things like typography and some of the simple practical things that you can improve very easily that result in a big improvement and typography, and little tricks in using grids, not on how to make them but how to actually implement them and how they can help workflow and bring things together and make layouts tighter and better without
that much effort and the same thing with digital transformations in photography and a lot of pixel detail that a lot of people don’t notice and its all about the subtle level of design.

Paul:I got this vague feeling that as you were talking you were a little bit appologetic for some of these manushi that kind of individually you sit there and go ‘how is anyone going to notice that?’, but accumulatively they have this effect on the design don’t they?

Dan Rubin:Well that’s the thing. It comes down more to feeling than seeing but its about as a designer what you feel with your eyes more than anything else and how that translates to what users or viewers or readers also feel but since they don’t know it is there, they are likely to never actually see it, but as a designer you’ll know it is there, you can see it, and the trick is to get it to the point of you can still see it but it is not really visible it is just felt.

Paul:A subconscious expression?

Dan Rubin:Yes.

Paul:You covered loads of tips in your presentation and there was some excellent stuff in there but if you had to pick out one that has the biggest impact on a design, which of the many things you talked about would that be?

Dan Rubin:I think what it would be is to really underscore trusting your eyes and it seems a really simple concept and whenever I put that up on the screen you get giggles from the audience. The truth is many of us don’t actually take the time as designers to just step away and look at what we’re working on. It doesn’t matter whether it is for screen or print. The medium is a material at this point and it is just having faith in what you see and what you feel. That’s what being a visual creative is all about. It is trusting what you see. It is the same as being a good musician comes down to trusting what you hear and sometimes we forget that, and we start getting into designing based on the rules or how we think we are supposed to do things or designing on technical limitations alone. When we do that we stop using our eyes.

Paul:It’s interesting in the presentation you talk quite a lot about some of the details and the mechanics of design. You were talking about font sizes going incrementally up, your heading and your sub headings and there being a mathematical relationship in their sizes. You talked about being consistent in your margins and padding and how all those things inter-relate. Are we saying that design is something that can be learnt and it is a mathematical thing and it’s a set of rules that you just adhere to? Or is there some sort of underlying artistic thing, some people just know how to do it and it’s not something that can be learnt. What’s your opinion on it because I get mixed feelings from you? On one hand you talk about these rules and on the other hand you talk about stepping back and looking at your design and it feels more kind of arty-farty if that makes sense!

Dan Rubin:What a load of questions and rightfully so! It’s something I’ve written about before years ago and had a bit of back and forth on the topic with Paul Scrivvens of 9 Rules, with him arguing that you don’t need any natural artistic ability because he didn’t think he had any, yet he was clearly doing things that looked good. I was arguing the opposite but when it comes down to it it’s really not something that you can say definitively either way. Just as there are people who naturally seem to be good musicians or good athletes or good at math and programming, there are people who seem to naturally be good at design and any kind of creative endeavours. It is really difficult to tell whether that seeming innate ability has come from something that happened in very early childhood development or if they were born with it. I do think that however difficult it is to put a finger on it, once you get old enough, especially to the point w here probably most of your listeners are doing what your doing for a living already or you are thinking of changing from one thing to another, you’re past that point of subconscious development where you need to put conscious effort into something and you can. I think you can be trained to do most of the things designers do. You can even train yourself to see the way that creatives see. The older you get the harder it becomes to incorporate into the way you view the world. That is a big part of it. That comes down to sometimes the different personalities. How hard is it to put a finger on what makes you ‘you’. I would say as a teacher, and I spend a lot of time teaching high school students over here about music as well, since that’s my other passion, and it’s specifically not just playing music but it’s specifically singing which is one of those things that you can either carry a tune or you can’t. I’ve also seen kids who can’t carry a tune when they start singing learn how they train themselves. They learn the proper muscle memory, and it’s amazing to see what people can actually accomplish when they put their mind to it. If you are listening out there and you want to become a better designer or maybe you’re not a designer and you’re a programmer or a web standards junkie, and I can say that because I am one too, and there isn’t any reason that you can’t become a better designer, or become a designer from scratch if you realy really want to.

Paul:I think that’s really important to say because I think so many people are intimidated from getting involved in design because there’s almost a bit of snobbery. If you’re not artistic, you’re not artistic there’s nothing you can do about that. I personnaly don’t believe that that’s true. Like you say I think there are some people that are naturally inclined that way but I think a lot of the principles that you were talking about in your presentation pretty much anybody can pick up on and do, which is what encouraged me so much hearing you talk.

Dan Rubin:That is one of the reasons why one of the reasons I say one of the most important thing is to trust your eyes and that’s instinctual. These rules, as a good teacher you have to teach these rules. When you start learning any discipline the first things that you are taught are the basics.The basics are things that many people, once they learn enough, don’t conciously think about, but what you find if you deconstruct their work is that they are doing them, they have incorporated into their flow into their process so it’s second nature to them. What we think of as instinct is really just experience.

Paul:Yeah. One of the things you did mention in the presentation that grabbed my attention is you talked a lot about texture and adding more texture to your design and about how that creates a real feel. There seems to be a slight skism, I don’t know if that is the right word, but like 2 different camps in design at the moment. People like yourself, Elliot Jay Stock is another example that does very rich, very textured design. It’s absolutely gorgeous. At the other end of the extreme you’ve got people like 37signals doing this minimalistic functional design. How do you feel those two sides fit togeth
er? Is there a role for one or the other or have they both got their place

Dan Rubin:I really think that both have their place and more than that it’s popular to create divisions. Not just these days, if you look at any industry that spends a lot of its time looking at itself, like we do, you start to find reasons to create little clicks within it or factions or what have you. If you just ignore those splits that happen because we spend way too much time looking at what we do and try to deconstruct it and answer that question of ‘why’. What you find is that it’s all the same thing. When I talk about texture it is important to understand that it doesn’t just mean rough or ??bulap or brick. Texture can also mean smooth and polished and speaking directly about 37signals for instance. I’ve used their apps and I’ve loved them since the first time they came out. If you look at the first versions of Base Camp and Backpack, before their incremental re-design they’ve actually added the little drop shadow over time. If y ou look at it as a designer you see the flaws in the way they’ve done it because it doesn’t look real and it just ends at some edges, it has hard edges, but that’s not the point. The point is they added it because it created a separation, they added it because they felt it needed it. The rest of the interface doesn’t need any other texture because it isn’t supposed to have a feel to it. It’s actually supposed to totally get out of the way and there are different approaches to minimalism. You can use minimalism in subtle detail where you add in things like I was showing in my presentation, or you can use minimalism where you keep taking away and 37signals apps feel right, they always have felt right to me so as far as I’m concerned that means they’ve hit the nail on the head. It shows when you see people trying to recreate the application interface and theat style that 37signals uses and they get stuck in this pattern of adding things, like they feel ‘well, that’s 37siganls l ook so I think we have to add things to make it better, to make it better, and they never work as well because it’s not just about that. So the answer is, and I try to underscore this when I talk to people about this or present about it or even write about it, as much as these things can be presented as rules and definitive this is the way to do something. the fact is you have to do what works best for you and your particular project or circumstance or situation, and you also have to be open to the fact that what works for you right now might change. It might be different next year, next month or next week, and being able to adapt to your situation as a designer specially is really important, because you have to adapt if you’re doing client work, you have to adapt from project to project, because your style might work for one client but you might need to tweek your style to do what’s best for another client. If your working on your own applications, what works for your users now might not work for your users once they become users that have used your app for a year and they’re experts now.

Paul:You talk about tweaking your style. How easy is that, do you think, to do in reality? I mean I’ve got a very strong style in my design, and I really struggle and I look at someone like Cameron Moll’s style and I just love it. I love the light-handed feel, he’s very delicate, beautiful design, and I wish I was more like that, but there is no way I can make myself become like that, or can I? Is there a way of changing your style?

Dan Rubin:I think we’re all naturally mimics. I’m not going to dig into my opinions on human adapability too much. I spend a lot of time thinking about that as far as evaluating how people use things, whether it’s interfaces or products and it’s interesting to start to see those patterns but you can see it on a global scale too. Historically human beings are species very, very adaptable and that happens on macro and micro levels. If you want to adapt your style you can. You look for the inflences you want to model yourself after. This is just how people learn to be designers when they’re starting out, or learn to be artists. When I took my first watercolour and oil painting classes when I was 11 or 12, the way we learnt was to recreate examples that were painted by masters. So learn how to use the brush strokes they use, to learn how to mix colours the way that they use them, to learn how to use the tools the way that they use them becau se you only discover your preferences and your style by mimicing, copying others. You find out what works and you decide what works for you and what doesn’t. So changing how you design and how you see is not necessarily easy, because at a certain point you’re reprogramming muscle memory and from my experience with singing I know how difficult that is to do. Once muscle memory has been built up to the point where you don’t think about it and you just react, it’s very difficult to break that down and re-build it. Difficult does not mean impossible.

Paul:That’s really interesting that you say that because I’ve always very much struggled to design in any other way than I already do, but I obviously need to push myself in this area. Talking of 37signals, I’m sure you have been following their recent post and various reactions to it about skipping Photoshop, and how they move straight into building with HTML and CSS and I just wondered what your opinion was on that.

Dan Rubin:I know I’d get roped into this discussion somehow. There has already been some great responses from people like Jeff Croft and Mark Boulten to the 37signals post on that, and even interestingly enough a follow-up post sourced by 37signals announcing that they were looking for an additional designer for their team that can push them into different directions that they havent been going naturally. That comes back to the whole adaptability and willing us to change and being open to it. In the argument itself I can’t say I always start in Photoshop or Fireworks or some sort of visual tool. I think Jeff said 37signals starts with a visual tool, it’s pencil and paper. I think even if your tool is a marker on a whiteboard to a certain extent everybody tends to start there, even if you don’t start there you start with a picture in your mind. So there’s some level in the process where a visualisation is occuring, if that’s fair to say. When it comes down to it why does the tool that you’re using to visualise really matter? It starts in your head if you’re a primarily visual person you can either realise that vision by programming it and seeing it in the browser or using Photoshop as a tool. All of these are just tools when it comes down to it, they’re not the end result. They’re just part of the process. I’ve done both. I’ve built straight from XHTML and CSS many times and I do tend to find that most visual designers that have weighed in on this conversation also find that in my opinion the result ends up being more simplistic. that’s not necessarily to say bad. It’s just different and you’ll find that the tools that you use as a visual creative influsence the end result because that comes down to constraints. 37signals of course is huge on constraints and you do save time when you’re doing straight HTML and CSS, you skip a lot of the temptation to play around like I know I do with layers and layer setting s and percentages of opacity. I spend a lot of time playing when I’m in Photoshop, I don’t think that’s bad. That’s part of the creative process when using that tool. When I used to paint which I havent done in way too long. I would play with my
palatte, when I was doing oils my palatte and my palatte knife was tool before I got to the canvas, and I would play with mixing my colours ‘and that’s not quite right’ and ‘wait and go over here’ and sometimes you get it onto the canvas and it doesn’t look the way you want it to and have to wait for it to dry and then you paint over it because that’s what you do with that tool. When you’re doing watercolours you don’t have that forgiveness of the tool, you have extra constraints, so you don’t experiment as much putting it on the paper, putting the paint to paper because you know once it’s dried and there you can’t go back. you can’t paint over it. So you adjust your style depending on the tools and the workflow and it’s all good, it ‘s just all different and you have to I think do yourself a favour and experiment to find which works best for you and don’t be afraid if you’re working on a project and you think ‘this doesn’t feel like it needs a lot of subtle gradients and lines and shadows and Photoshop work. I might just be able to build this without using Photoshop at all’. So do it if it feels like that will work best go that route. If you feel the opposite go the other route. If you feel like it should involve a lot more natural media pull out your watercolour pad and paint something and scan it in and incorporate that

Paul:It really down to the right tool for the job thought process.

Dan Rubin:Exactly. The thing that 37signals does really well is stick to their guns. They state their opinion so firmly that people can easily interpret it as law and I think that’s very important. In any industry it’s very important to have people who do that, who can stick to what they believe so strongly and apply it so universally that it creates this set of rules, but it doesn’t mean that they have to be followed or cant be partially followed or bent or broken and you find just as much as 37signals is enfatic about skipping Photoshop. There are other people who would never in a million years go straight to HTML and CSS, doesn’t mean that either camp is right.

Paul:OK. One last question just to wrap this up. We’re running out of time but there’s something I wanted to ask you which is: We’ve been already talking about that there are people that may be want to learn to be better designers, to find their style and to move into this area, perhaps they’ve been a developer background and they’ve been previously put off exploring design because they have been made to feel inadequate. What kind of resources would you encourage people to look for or look at in order to get going I guess?

Dan Rubin:Whether you’re starting from scratch or just trying to improve what you already have it’s important to touch on a couple of specific areas, and those are typography, layout and working with colour. This applies just to design because it’s worked whether you’re designing on the web or designing in print or branding or whatever you’re doing. Typography is kind of my first love with design and if you want to learn about typography you have to go out and buy ‘The Elements of Typographic Style’ by Robert Bringhurst. It’s the bible for typographers. It’s really easy to read too because he’s a well respected Canadian poet as well. He just happens to be an excellent typographer and book designer, so if you are in a rush, you cant get to the book store or Amazon right away Mark Boulton’s series ‘Five Simple Steps To Better Typography’ is a great place to start as well and he references a ton of other good resources. Start there if you a re going to start online but no matter what buy ‘The Elements of Typographic Style’. When it comes to layout there are a lot of things that you can learn about layout but you’ve got to learn about grids, even if you never use them. Do yourself a favour of learning and I’ll reference Mark again, actually I’ll reference Mark in all three of these. He’s got great starter tutorials about this stuff so ‘Five Simple Steps To Designing Grid Systems’ is really a great place to start. Cameron Moll has written about Griding The 960 and read up over on Khoi Vinh’s site about grids. ‘Grids Are Good’ is a great demonstration as well, and if you want to get a physical book to hold ‘Grid Systems In Graphic Design’ is a great, great phyisical book and I think it’s important to as web designers to also reference ‘Print’, because Print is where all these design rules come from and typography rules and colour rules, so learn from these different implem entations and you’ll figure out things that you can do that you didn’t think about, because you haven’t seen them on the web. So ‘Grid Systems In Graphic Design’ is by Josef Müller Brockmann I believe would be the pronounciation, look that up. Colour, and this is something that’s very preferential maybe but read up again Mark Boulton’s ‘Five Simple Steps To Designing With Colour’. He’s great at teaching, he’s great at communicating all these things. Also play around with some of the online tools like Adobe Kuler, is fun. Look at what other people are putting together, look at combinations, again feel is important. Whatever feels right for what you’re trying to do. Another cool tool is Colorjack. You got a couple of ways of mixing colours and it’s really, really cool to look at. Finally on the topic of colour whenever using colours in an interface please be aware of the different types of colourbl indness that exist, and there are lots of tools online. Photoshop CS4 will have some tools built in as well but there are plug-ins that you can get right now for all sorts of tools and online tools as well that allow you to see what you’re designing, or even just a colour palatte. See them through the eyes of someone that has these various colourblindness afflictions and make sure that whatever you do doesn’t render something unuseable to what ends up being a large percentage of the viewing public when it comes down to it.

Paul:WOW !! That’s a good set of resources !! My word.

Dan Rubin:You didn’t think I’d be that prepared did you?

Paul:That’s a superb list. I certainly didn’t know about all those posts from Mark Boulton. there was some great stuff in there – Thank you very much Dan. Just to say that Dan’s talk at @media will be no doubt going live at some point and you’ll be able to download it and listen to it. Definitely do that, it was superb. So check that out. You will be able to go the shownotes for this episode for all those links that will be useful as well. No doubt you won’t be able to remember them all. Dan thanks for coming on the show, it’s very much appreciated and we will get you back on in the future.

Dan Rubin:Thanks very much for having me Paul. It was a pleasure.

Thanks to Sarah Galley for transcribing this interview.

Linkage

You can find Dan Rubins site, Superfluous Banter here.

Typography
Layout
Colour

Back to top

Listeners feedback:

Managing a Bigger Team

Jon asks: We are a company of 4 people – myself (owner, design lead and general business development/project management person), one designer, and 2 developers.

We are hopefully about to merge with a slightly larger company in a neighbouring town who have slightly more staff than we do (7 in all), and who have more of a project management structure – 2 project managers, using the services of 1 designer, 3 developers, and 1 designer/developer. I would end up as owner/MD of the enlarged company.

My question is really about project management? What do you think is the best organizational structure for a company of 11 people? I was feeling pushed on the project management side before this merger came along, and the merger will bring 2 project managers with it. How does Headscape do it for example – I think you have project managers there – do the designers and developers report to project managers, or do the project managers pick from a pool of design and development resource as required? What are your thoughts generally on the whole project management side of things.

A-ha… this is part two to a question I answered a few weeks back relating to pricing work after two companies merge. I wanted more detail at the time and now I have it!

Comparing to Headscape, we have 4 designers, 4 developers, 3 project managers, 2 business development/analysts and 1 lazy good-for-nothing called Paul … seriously though, Paul effectively markets Headscape and I have to say he’s rather good at it (ungrits teeth…)

Following the merger Jon will have a team of 11. As he is new MD, I think it is imperative that he much reduces the design and PM aspects of his role and concentrates on bringing in business as there are quite a few more mouths to feed.

That leaves roughly 3 designers, 5 developers and 2 PMs. Depending on the work you’re doing I think that is ok especially considering Jon can bolster both the design and PM groups if needed.

Regarding the allocation of work, project managers should rule the roost. Full stop.

It is their job to manage resources. Delivering projects effectively and on time means that they must know that they are in charge regarding who does what and when they need to do it by. A certain amount of fitting the right person to the job should be done but generally, the rule should be that the next piece of work goes to the next available person. This would be particularly useful advice in a merged company where it would much easier to keep going back to ‘your’ guys because you trust them.

One thing that has worked really well for us is to set invoicing targets for the project managers. We don’t operate performance related targets but it still really helps to focus minds on hitting milestones at the end of months.

Terms and Conditions

Adam writes: I am developing my own web application. In summary, it’s a site with user submission of content in a social networking format with video uploads. Anyone can register an account.

I of course have to try and write Terms of Service for this and I am getting stuck. I am wondering what Headscape uses, especially for Getsignoff, and whether you found a pre-written terms of service, or had a specialist write one.

What’s your solution to the problem, and what should / should not be included.

I have to confess to conferring with Headscape’s fount of all legalese knowledge on this – our MD Chris Scott. I tried to get him on the show but he’s still a little jittery after the last time all those years ago… anyway, Chris put together the TOS for Getsignoff and these are his thoughts on it:

For Getsignoff I looked at the TOS of other online services like Harvest, Basecamp, Youtube and Flickr. I’m not a legal person, but this gave me enough material to be able to identify the key issues that I thought we needed to cover in our TOS.

I assembled this into a brief for our legal adviser that was part overview of what we wanted to achieve and part draft TOS using adapted clauses from other TOSs.

Our legal adviser pretty much re-wrote what I had given him but this was from a position where he had a good understanding of how we wanted Getsignoff to work.

The bottom line with this sort of thing is that you really need to get a professional legal person to assist.

Back to top