10 Tools to Improve Your Site’s Usability on a Low Budget

As we have said many times before on this show testing the usability of your site is one of the smartest things you can do. Usability involves making a website’s interface easier to use and simpler to understand, so that the user’s experience is as intuitive as possible.

However, many website owners do not carry out user testing because they perceive it as expensive and time consuming. When they think of user testing they imagine usability labs with two way mirrors, video cameras and expert facilitators.

Of course if you have listened to this show for any length of time, you will know it does not need to be that way. In a post entitled 10 Tools to Improve Your Site’s Usability on a Low Budget the Web Designers Depot outlines some of the ways you can keep costs and effort to a minimum.

The list of tools includes Silverback, Clicktales and Google Website Optimizer, all of which we have mentioned on the show before. However, it also includes several I have never heard of including: Chalkmark, Userfly and Feedback Army.

For the complete list and a review of each tool see the article.

Outlook 2010 and HTML email

The big story of the week is the campaign to fix Outlook 2010. This has come about because Microsoft plan to continue using the Word rendering engine to display HTML emails in the next version of Outlook.

It’s outrageous that the CSS standard created in 1996 is not properly supported in Outlook 2010.

It’s difficult to believe that in 2009, after diligently improving standards support in IE7 and now IE8, Microsoft would force email designers to use nonsemantic table layout techniques that fractured the web, squandered bandwidth, and made a joke of accessibility back in the 1990s.

Unfortunately it is looking unlikely that Microsoft are going to change their minds. In response to the outcry Microsoft released a statement saying…

We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around, with rich tools that our Word customers have enjoyed for over 25 years.

However, the most amusing line in their statement reads…

Word has always done a great job of displaying the HTML which is commonly found in e-mails around the world.

I try and to objective when I share the news on this show but honestly, what a joke! For me Ben Ward sums up my response to this statement from Microsoft when he writes…

I’ve tried to write different responses to this sentence. Different witty re-workings run through my head, and some of them are quite good. Yet, every time I touch the keys, all I can write is “F*** you”.

Visual decision making

I have a strange job. It is a mixture of sales, marketing and user experience design. I often find it hard to reconcile what appears to be on the surface very different roles. However, I have come to understand that there is a common thread that runs through all three… psychology.

Whether I am designing a user interface or pitching to a potential client, I am essentially doing the same thing. I am trying to anticipate the persons needs and nudge them in a certain direction.

Understanding the way the human mind works is invaluable when running or designing a successful website. Whether it is understanding how users make judgments about your site or how to influence their decision making, psychology is an important component.

In this issue of A List Apart, a post entitled ‘Visual Decision Making’ delves into the mind of users. In particular it focuses on a users ability to draw conclusions about a site in less than 1/2oth of a second. It is also a rebuttal of Jakob Nielsen’s assertion that graphics have little influence on users.

The author presents a well constructed argument that draws upon a number of excellent sources including Malcolm Gladwell’s book Blink. I would therefore strongly recommend reading this article if you are involved in user experience design or just wish to better understand your users.

An introduction to RDFa

Back in show 166 I mentioned that Google was starting to include Microformats and RDFa in their search results. This provides users with richer results that include reviews, contact details, and more. For website owners it provides the ability to stand out in the search results and the opportunity to give users additional information that may encourage them to click through.

Although Google is only displaying this extra information for a small number of sites, this will change and so we need to be ready. Now is the time to start integrating Microformats and RDFa into your site.

We have talked a lot about Microformats before, but have yet to touch on RDFa. I have to confess this is mainly because of my own ignorance on the subject.

Fortunately another post on A List Apart has come to my aid. ‘An introduction to RDFa‘ explains what RDFa is and gives examples of how it can be used on your site. At the most basic level (and I mean basic) RDFa is a framework of meta data created by the W3C. Much like Microformats, the aim is to allow computers to better understand c0ntent that has been written with humans and not machines in mind.

Like Microformats, the implementation of RDFa seems very straightforward. There is nothing stoping you from getting started. What is more, this looks like the first of a series of posts on A List Apart that will take you step by step through the process.

Back to top

This week we explore how quick, hand drawn wireframes can provide substantial benefits that save time and money.

Read the 7 wonders of wireframes

Back to top

Hi, I’m Anna, and I’m going to tell you a bit about a new micro CMS I’ve been trying out called Perch by edgeofmyseat.com

If you’re looking for a powerful CMS with lots of features that writes your blog posts, walks your dog and does the dishes for you, this probably isn’t for you.  But if you ever build static sites where it’s hardly worth plugging a CMS into at all, but you still want to give the client the option to edit the content themselves, or maybe you’re a designer who just wants to design sites and not get dragged into CMS code hell, this could be the perfect solution.

Perch is very adaptable, and it’s easy to plug it into an existing site.  I did just this, and it took me about an hour altogether, and that was the first time I ever used the system.

Ideally, you shouldn’t have to build a site around a particular CMS. You should be able to build a site, then plug in the CMS, and only let the client edit the copy, not the layout.  You don’t want it to mess with your code, and you want the back-end to be compatible with even the most technologically challenged of your clients.  Perch does all of the above.

It installs onto the web server you host the site on, rather than storing it on Perch’s website, so if the Perch website goes down, your user can still update their site.  Before Perch came out I was using CushyCMS which works in a similar way. Their site went down, and I suddenly got an influx of emails from clients who couldn’t edit their sites. Perch’s approach is also more secure than trusting another company with your FTP details.

Installing Perch is really straightforward.  You download the setup file from the website, unzip it and drop it into your home directory. Then you navigate to the setup page,  complete a form with your MySQL database settings, copy the code it generates, and paste it into a configuration file.  Then you integrate the CMS into your site by adding a PHP include tag to the top of each page and php tags in the page where the editable content will be.  When you log into Perch, it will have recognised these tags and set up the editable interface for the content.

Within a page, you can have more than one editable region.  You set a template for each region that you can define yourself.  You may just have a block of text that you want the client to be able to change.  Just use the “text” template.  You can even allow multiple items in a region, so if for example you had a news page, you could let the user add news items rather than edit a whole body of text.

The back end is very clean, simple and also brandable, so you can add your logo, and change the colours to personalise the interface.

There’s some handy documentation that’s been updated a lot since I first tried it out, and you can also contact the developers with any questions.

The price is a £35 one off payment per domain, which I think is a really sensible payment option, especially for freelancers who don’t maintain long term relationships with their clients.

There’s also a server compatibility test you can download to check the CMS is compatible, and I’d recommend you try out their live demo first at grabaperch.com to see if it’s right for you.

Back to top

Page zooming vs. text scaling

In show 169 we featured Cameron Moll’s article “Coding like its 1999“. In this post Cameron explained his decision to move from ems based sizing to pixels. He justifies this decision by citing the fact that all modern browsers have moved from text resizing to page zooming, as their primary resize tool.

Cameron’s position has caused some controversy in the web design community, with passionate responses from leading figures like Drew McLellan and Roger Johansson. Cameron’s original post also attracted some heated debate in the comments.

So why do so many object to this move away from text scaling and fluid design? Most of the arguments are the same as those that have been around for years. Fluid design…

• Adapts to varying amounts of content and different languages.
• Makes better use of screen real estate.
• Puts the user in control
• Prevents horizontal scrolling
• Adapts to alternative devices (such as mobile)

However, Molls critics also point out that page zooming is not support by IE6.

Cameron has responded to the criticisms in “The debate over page zooming vs. text scaling.” He argues against the principle of “one site fits all,” which underpins fluid design.

In my opinion this is a question lacking a black and white answer. Although generally I share Cameron’s view, we still occasionally build fluid or ems based sites depending on the project requirements and target audience. There are good arguments on both sides and neither approach should be dismissed.

10 web design rules you can break

What the discussion over page zooming shows us is that nothing is absolute. As human beings we like black and white rules, but actually those rarely exist. The web is full of articles about web design that layout rules for design, usability, accessibility and every other aspect of running and building websites. However, in truth no such hard and fast rules can exist.

Sure, there is best practice. There are principles of design, development and management we should use whenever appropriate. However, these should not be followed blindly. Sometimes meeting business objectives or users needs involves breaking these rules and doing something different.

This week the Web Designers Depot has released “10 Web Design Rules That You Can Break“. This post looks at some of these supposed rules and shows examples of sites that have successfully ignored them. The rules they have challenged include…

• Do Not Display the Horizontal Scroll Bar
• Use a Minimal Number of Font Faces
• Do Not Use Too Many Colors
• Make Your Site’s Goal Obvious
• Navigation Should Be Easy To Figure Out
• Stick to Web-Safe Fonts
• Don’t Have a Splash/Landing Page

In fact all of these ‘rules’ are actually very good advice. However, they should not be followed blindly. That is why I love this post so much. It highlights best practice, while at the same time inspiring people to challenge ‘the rules’ occasionally.

Grass roots viral marketing for ordinary people

While we are on the subject of challenging preconceptions I would like to draw your attention to a post on Sitepoint entitled “Create a Buzz: Grassroots Viral Marketing For Regular People.”

I am constantly amazed at how many website owners (and even web professionals) believe that viral marketing and social media are the easy answer to their marketing needs. As the article points out viral marketing is far from easy and if you don’t have a massive twitter/facebook following it is even harder.

Although the article is essentially a guide on how to be successful in viral marketing, it does not sugar coat the realities. It points out a number of harsh truths…

• You need a product or service that people actually care about.
• You need to reach a major influencer to have any hope.
• Don’t just rely on a single outlet (such as YouTube) to get your message out. You need lots of avenues of attack.
• A lot of it is just down to luck!

If your message doesn’t offer people something they need, something they want, or an opportunity to support something they believe in, you may need to rethink a viral campaign.

The truth about viral marketing is that many times it comes down to being in the right place at the right time.

Information as a task

In order to prove I am not the only skeptical, cynical and despondent person on the web this week, I would like to refer you to a post by Gerry McGovern entitled “Information as a task“.

This barely disguised rant about working on large pubic sector and corporate websites, resonates with my own experiences. The heart of the article is a call to website owners to stop putting up content  unless it helps users fulfill a specific goal. Its a simple message but one often ignored.

Website owners too often start the process of deciding on content by asking “what do we want to say?” rather than “what do users want to know?” Gerry writes…

Many organizations have a strange attitude towards information. Its creation is nearly always disassociated from its use. Information is rarely seen as useful or purposeful. It’s just there because people need it. It doesn’t help you do things. It’s simply there for you to read just in case you need some information.

He goes on to write…

Organizations have a fabulous capacity to produce massive quantities of low grade, aimless, pointless information. Much of the information that should have a point is useless because it is not useable. People don’t understand it. They can’t act on it. It doesn’t result in someone completing a task.

I couldn’t agree more. Before any content is added to a website the author should always ask “what task does this help users complete?” and “is this task actually one real users will be trying to do?”

Back to top

Ryan: Now here with Robin Christopherson from AbilityNet. Good Afternoon! How are you?

Robin: Yes, really good thanks, yeah!

Ryan: Fantastic! So for anyone who doesn’t know you or know what you do, could you explain that to us please?

Robin: Thank you very much. I am head of accessibility at AbilityNet and my team basically deliver consultancy and free advice and information on Web and software accessibility. And AbilityNet for people that don’t know are a charity and we do accessibility services but also assessments of disabled people in the home or in the workplace or in education and making sure they’ve got the right kit to access a computer and the Internet, etc. most effectively. And we’ve got now 800 advice information number, etc. so all things technology and all areas of disability. That’s who AbilityNet are.

Ryan: Fantastic. And you’ve just given a talk on “Designing for All in a Web 2.0 World” which was quite an eye-opening presentation I think for a lot of people who may not have seen or used a screen reader before. What was quite amusing was when you first started using it the rate at which your screen reader started speaking the content of the BBC home page, I don’t think any of us could understand it.

Stanton: I had no idea what it was saying at all.

Robin: You actually would tune in relatively quickly because when I’m working on the computer at home sometimes I don’t have it on earphones so it’s just kind of coming out through the speakers in the office and my wife just having walked past a few times now can get it so I think you probably kind of tune in. Maybe it’s a bit like the black faces and the white candlestick, you know you suddenly kind of see the other one and you kind of click. Yeah, when you’re reliant on speech output you don’t want to be sitting there twiddling your thumbs after having left the synthesizer at the default speed that you get when you install it out of the box. So you want to crank it up and not have to be waiting for it to finish what it’s saying.

Ryan: So you kind of highlight some of the issues from quite a site impairment point of view but there’s also a lot of other considerations that people designing websites should be looking into. You mentioned dyslexia or cognitive impairment. How do those type of conditions affect the way people use websites?

Robin: I think that vision impairment is probably the category of impairment that is the most difficult to cater for and someone like myself who’s got no useful vision, screen reader users are probably the hardest customers of all. A lot of the standards like ARIA for example, Accessible Rich Internet Applications, most of the guidance is around helping people who are screen reader users for example. But that’s not to say that there aren’t all the other impairment categories. Motor impairment people that have difficulties using a pointing device, a mouse or they’re keyboard only users or they’re voice-recognition users. People with a cognitive difficulty or dyslexia or with a literacy difficulty or for whom English isn’t their first language, all of these categories of impairment and obviously hearing impairment as well, have issues to do with accessing the Internet and software applications as well and the most notable ones tend to be those related to people like myself who can’t see: alternative text on images, not being able to access inaccessible Flash content and that kind of thing or Web 2.0 applications because of the inaccessibility of the JavaScript. But there is a significant impact on all those other groups. The speaker before me, Mark, was talking about typography and the choice of type, the font style is so important for people with a vision impairment, people with dyslexia, people with cognitive difficulty, etc. so Times New Roman may look absolutely gorgeous on the screen and on the page, but from an accessibility point of view, it isn’t necessarily the right choice to make for the body font. Maybe it’s fine for headings to give a certain style and because it’s a bigger font it’s going to be more legible than if you had to read a whole website, ten or eight point using Times New Roman. I wish I’d had three hours instead of half an hour to kind of go through the headline issues, right across all the different impairment categories. I had half an hour so I concentrated largely on the high profile issues to do with screen reader users and in particular Web 2.0 application type scenarios where the new guidelines like ARIA for example can make a significant impact.

Ryan: OK. What should we as, I suppose now that you mentioned typography being extremely important, what should we as designers and developers be doing to improve accessibility and day to day. I know it’s a very loaded question and there’s lots and lots of things we should be doing but as kind of a minimum we should just do all the time, every time we build a website, minimum we should be doing and then before we take the next step to really drive it home. What’s the minimum things we should be incorporating?

Robin: Um, there are some low hanging fruit. You know, there are some things that you could look at any site, any existing site and clean up: alt tags on images, and a decent heading structure, and make sure that the text resizes, that sort of thing that shouldn’t be too difficult to implement. On anything new that you’re building you really do need to get scripts with the WCAG, the Web Content Accessibility Guidelines, and the new version has come out last December to update those significantly, WCAG 2.0, and those are applicable to all the new technologies that are coming out, etc. and there’s really no shortcut to really kind of internalizing, digesting those and just letting them inform your every day practices in what you do, you know. They impact on everything from the wireframe right through to UAT and go live and also post go live maintenance and that sort of thing so you really just need to make sure you’re one of the web designers that have got with the program and you’re not doing the old bad habits of fixing everything to make it pixel perfect and doing lots of hacks to make it look OK in different browsers and that sort of thing. Luckily we’re in a much more standards compliant world now than we ever have been so you can really adhere to standards and only have to do minimal tweaks to make sure that things look relatively OK right across all the range of browsers and we’re asking that you go further still and you consider handheld devices and you consider Web TV as well as people with different impairments and that’s really going to significantly increase the customer base that you are going to be enabling to access your content and if it’s any kind of website with a business model with a revenue stream, right through to a site that’s an e-commerce site, you absolutely can’t afford to ignore accessibility in such a tough and competitive online environment.

Ryan: Yeah, especially with there was that Legal & General case which you mentioned earlier. They redesigned their website to be more accessible and had some quite good results with that, didn’t they?

Robin: Yeah, I mean this is an ancient example now. We helped the Legal & General in 2005. We did disabled user testing on the accessible relaunch and yeah, I mentioned that one in the Q&A at the end because most people will have heard of that one if any and they had staggering ROI. They had a saving of 200K per annum on site maintenance. They had an increase in online sales almost instantaneously after the relaunch of 90% and that kind of indicates that there was an audience out there that was knocking on the door before but couldn’t get through because of lack of platform compliance or lack of accessibility with the range of assistive technologies that people were using. Other people couldn’t tweak the browser to make the text size larger or impose their own color preferences. So there was an audience out there waiting and as soon as the site was relaunched and had opened the door to all those people, there was a step change in revenue. So, but there have been lots of cases since as well as cases that have shown the danger of ignoring legislation. You know, the Target case in The States where they thought it would be cheaper to be fined than to retrofit their site but when it came to it in the end they lost obviously, because they were in the wrong, and they were fined and they were also told to retrofit so they made the bad decision there and had loads of really bad PR as well. That sort of thing is going on over here but it doesn’t actually reach the court, they are settling out of court and part of that settlement is anonymity, a requirement for anonymity so we don’t have headlines over here, but there is litigation going on. So, there are the carrots and the sticks and all of those things have got to be an overwhelming case for getting with the program and becoming one of those Web developers who are able to build accessible websites which are being stipulated so often in tenders these days. You can’t work with the public sector without being able to create accessible sites and accessible functionality.

Ryan: Yeah, I work in the public sector myself as a full time developer so our baseline is it’s got to be AA compliant with WCAG2, have got to comply to the SENDA, the Special Educational Needs and Disability Act. Not so much the PAS 78 guidelines but I believe those are becoming the British standard, or are rumored to be.

Robin: Yeah, I mean it’s dragging on a bit, but it is going be sometime this year. I think probably Q3 this year and it’s going be a BSI full standard, BS 8878 and Julian and the panel including John Gooday from AbilityNet are on that again authoring panel. I think that one thing that is essential, is really important in assuring real life accessibility is testing. So, any web designer, any organization that have internal guidelines, style guides, etc. should have accessibility built in from a checkpoint or a good practices level but you also need to have a range of testing tools, whether it be the accessibility toolbar or some sort of accessibility checker. We can’t all afford an enterprise accessibility checking tool, but if you can they can be extremely useful from a monitoring point of view and ideally you’d have end users involved. So within your organization, if you’re a large organization or otherwise go externally to an organization like AbilityNet to get some end users looking at your content and making sure that it’s not only accessible to the guidelines but it’s also accessible in reality. We did some lab testing for a site that was strict AA about four months ago and 90% of the tasks weren’t completed by the testers because the AI was all over the place, the usability. None of the guidelines had been contravened but it was an extremely inaccessible site for people for a number of reasons. It’s an acknowledged fact that there are a lot of issues outside WCAG that you can’t really document that are specific to a site and the general layout and presentation of that site and the architecture, etc.

Ryan: Sure. So you mentioned testing there. Is there anything say that any of our freelance listeners that may not be able to afford a specific software, any quick and cheap kind of guerilla usability testing, that kind of stuff they can test for accessibility as well?

Robin: Ideally you’d get hold of a screen reader and become familiar with the basic level of functionality of that screen reader and just check with that. There are a number of browsing tools that can render the page similar to how a screen reader would read it out to you etc. but they’re not that useful when it comes to checking for compatibility, you know, if you’ve got a lot of JavaScript, how’s the screen reader going to handle those, etc.? There’s no easy answer to that apart from becoming familiar with the guidelines, using JavaScript from accessible JavaScript libraries where somebody has already done the work for you, and become familiar with a number of access technologies that you can use to double check some of the functionality and the content perhaps on a kind of sampling basis and you’ll begin to realize then which things are going to be problematic and that will inform your design from that point on. In Vista, voice recognition comes as standard and Windows 7 has got a full screen magnifier when that comes out so you won’t need to be purchasing a lot of different assistive technologies to be able to test with a number of them to inform your design process.

Ryan: In your presentation you talked about CAPTCHA still being a huge problem for accessibility and some visually impaired users can’t even register on a site. I also noticed that there was a kind of hidden extra link if you’re using a screen reader that nobody else really sees but you pick up on that once you go through with a screen reader. Are there any other kinds of sign posts that we should be putting into our sites like “Skip to Content” and things like that, that make it beneficial to visually impaired people or visually impaired users or people using screen readers?

Robin: I mean there will be a lot of other people as well, keyboard only users, when they gain the keyboard focus a lot of skip links become visible. People using Web TV, set top boxes often don’t fully support styles and a lot of those things become visible and they are in effect keyboard users. You can go over the top on skip links for example I’ve seen ones where there were like eight skip links and basically that’s a nav in itself, so you really need one at the top that says “Skip these skip links” or something so that is, you can kind of go overboard but yeah there are lots of little tweaks that you can do that make getting around a page, getting around sections of the page that are going to be hugely beneficial, but just doing something as simple as putting headings in, using the landmarks that ARIA offers to identify key, the top of key sections of the page are going to be hugely useful, not just for blind users for example but they are meant for a range of other user categories as well that would benefit from them.

Ryan: Could you talk a little bit about ARIA and how that’s beneficial for accessibility?

Robin: It’s relatively early days really and the support for it is pretty minimal at the moment. You have to have the very latest version of only a number of screen readers and the very latest version of Firefox, IE8 isn’t quite so good at having fully implemented ARIA support. ARIA stands for Accessible Rich Internet Applications and it’s basically the answer to the fact that WCAG, even WCAG2 hasn’t got a huge amount in there from a developing point of view. It’s more of a “Now let’s check the thing you’ve already done” point of view. But also didn’t define a standard for browser developers and AT developers, Assistive Technology developers, to interface and like an API almost and so ARIA has a number of things. Being able to define controls and their role and their status that you could never have done before in a browser. Slider controls in a media player for example a bit like in media player, Windows Media Player, but online in a, just as an embedded control in a page, that has never been possible to be made accessible before. Popup menus and that sort of thing before would have been done in styles or DHTML and that would be very problematic but with the new ARIA way of implementing them as long as you’ve got the right browser and the right AT then that is just like doing it in a desktop environment.

Ryan: One of the tips that you demonstrated on stage was for mobile devices. For the primary navigation one of the internal wars that’s always waged with me is “Should you put the navigation at the top or the bottom of the mobile page?” so that the mobile phone reads it from top to bottom every time the page loads and you showed that this site had the primary navigation in a dropdown menu.

Robin: Yeah, that’s how they chose to implement that as a dropdown and that is very cute implementation. That’s a good choice I think because you’ve got the nav there but it’s literally just one item or two items with the select button. Obviously it would be problematic if it was just a dropdown that was auto-fired for people that just arrowed down it without doing alt down arrow because that’s very a inaccessible implementation of a dropdown box but you’ve just got two items which you have to get over. If you had the nav at the bottom and you wanted to use the nav, then you’d have to get to the bottom and in some browsers there isn’t a quick way of doing that. On my mobile phone, the browser that comes with the Symbian operating system, WebKit I think, the screen reading software talks that I’ve got on my phone. I can literally just arrow left and right or up and down through items on a page, just like tab and shift-tab, that’s all I’ve got. So there’s no way of getting down to the bottom of a page to get to the nav so I would probably on balance having it at the top that in it is two items to get past. If you don’t want to interact with the nav it’s quite an elegant solution really.

Ryan: Are there any major issues with the predominance of touch user interfaces coming through now? I would think that using a mobile phone, the tactile feedback of the buttons is quite important or am I wrong?

Robin: Yeah, I mean we’re concentrating a lot of people who are completely blind but you’ve also got people with vision impairment and people with motor difficulty for whom iPhones are a non starter really so any kind of touch screen interface where it’s the entire interface, it’s not as if it’s an optional extra way of doing it. In Windows for example there’s going to be a lot more touch and multi-touch stuff going on in Windows 7. When apps use that as the only way of doing something, that’s when accessibility is going to become a big issue. There needs to be always an alternative way. Alternative to drag and drop for example of doing things for people with a vision impairment or can’t using a pointing device, etc. So as long as there’s a redundancy there that’s fine, which there isn’t in the iPhone.

Ryan: OK, that’s great. Just to finish up, is there a, do you have a list of things that you see regularly that are counterproductive to accessibility that you can recommend for our designers and developers to just try and stop doing or try and do better, these are kind of like my top five tips, yeah common mistakes type thing?

Robin: Yeah, if you go to AbilityNet.org.uk/webresources then one of the things we’ve got in there is top five tips and top five sins, that’s one of them. And another one is a top ten checklist of things to do. Which implies that if you do them, then um, well if you hadn’t done them like label images properly, then that would be a sin. So follow the check points, those ten and those are ten things you can avoid sinning on. So yeah, there’s a number of resources on there. Other sites that I would definitely recommend to people for getting to grips with accessibility would be WebAIM.org and they go from the very basics right through to really quite advances. Accessify.com is brilliant because they’ve got of information but also a lot of forums as well so you can kind of talk with other guys getting to grips with it. I would point you at the source of the WCAG guidelines but actually they’re kind of not the best place to start but I mean everyone who knows about accessibility knows where that is anyway which is at w3.org/WAI. But yeah, WebAIM, Accessify and our site are good places to go.

Ryan: Fantastic! Well thank you very much for your time!

Robin: Great!

Ryan: It’s been a pleasure talking to you.

Robin: Thanks ever so.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

It’s something we’d been considering for a while, we’d weighed up the pros and cons and finally took the plunge. The key benefits of Google Apps are huge amounts of storage, a quality web interface and considerable cost savings. There’s also the reassurance that Google is actively developing the product with regular updates and improvements that don’t require installing fresh software or waiting for a hosted service to upgrade. If you’re currently using POP to receive emails or are archiving locally, you’re running the risk of losing your history of emails, should a disaster befall your computer. Keeping emails in a centralised service and syncing with IMAP gives you the security of safe storage and the convenience of access from anywhere. This is where large storage allowances come in handy.

Preparing

Setting up an account is easy. Google offers a team version with fewer features than the premium, allowing an admin to create users, email lists and try out the service. This is also great for demoing the service. Google provide a test domain for sending and receiving emails using your regular style company email address (firstname.surname@). Depending on how big your organisation / company is, it’s worth testing out a few accounts across as many email clients as people run. It’ll help knowing off the top of your head where various settings are to save on support time later.

Migrating

One of the key features of the premium account is IMAP email import. This allowed us to pull emails from our current Exchange server straight to Google, server to server. You basically just provide Google with your current email login details and it takes care of everything. You can specify a bunch of email accounts to import at once, and if you have a super-admin login to your email you can grab everyones with one set of credentials. This didn’t work perfectly for us, a few accounts seemed to hang and never complete. If that happens, it’s worth removing emails from the server with large attachments and trying again. If all fails, the alternative method is to setup your Google account in your email client and just drag all your emails from one to the other. Might have to leave it going overnight if you have a big inbox! Once you’re ready all you have to do is point your domain MX record at Google and you’re done.
On top of the usual email setup there are a bunch of settings Google recommends for desktop clients to aid consistency with the web version. These help prevent duplicate folders for drafts, sent and trash cluttering up your interface.

Migrating Calendars and contacts is dead easy, Google provide tools to sync local calendars and contacts can be exported / imported.

Support

The biggest hurdle in a switch like this is gonna be support. Unsurprisingly, some people don’t like change, especially when it concerns services as critical to productivity as email. They’ll need reassurances that emails won’t go missing and everything will be as easy as it was before. There will be a short period where emails could end up going to either your old inbox or your new one, but as long as you check both for a couple of weeks post switch, you’ll be fine. We did see an email or two arriving at our old accounts a week after the switch, this is due to caching of MX records, not to worry though, they’ll propagate eventually.

A different way of working

My favourite features of working with Google Mail are archiving and labels. Labels work in the same way as folders, except an email can have several labels at once. This can cause some confusion when using a desktop client, as emails will appear in multiple folders. When an email is deleted from the inbox or any folder in a desktop client, it isn’t deleted on the server. It may still have other labels and will still exist in All Mail. To delete an email from a desktop client it has to be dragged to the Trash/Bin folder. This is great for keeping a clean inbox with current / unhandled with emails.
Another advantage to having all your emails on Google’s servers is search. However fast your computer is, you can’t match the speed at which Google can search your inbox for that elusive message from last year containing critical info. Instead of using a regular desktop client, you can take advantage of Chrome with Gears for a hybrid web client / desktop app. This allows you to keep the benefits of the desktop such as offline email access combined with the familiar web interface.

Thanks goes to Todd Dietrich for transcribing this interview.

Back to top

Please start from the beginning

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

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

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

Running a card sorting exercise

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

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

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

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

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

The complete Google Analytics power guide

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

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

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

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

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

Estimating time for design projects

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

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

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

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

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

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

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

Back to top

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

Read The Battlefield of Design – Clients vs. Designers

Back to top

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

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

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

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

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

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

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

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

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

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

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

Back to top

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

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?”

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

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

Story telling

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?

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

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

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

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

Good vs Great Design

Cameron Moll is one of the most intelligent and inspirational designers I know. Where some design on an instinctive level finding it hard to describe what makes their designs work, Cameron has carefully deconstructed his work and seems to have a firm grasp of what makes it tick. He understands design. He understands the processes behind design and the rules that make it as much a science as an art.

This deep understanding of design shines through in a free PDF download (Good vs. Great Design) available from his website. The PDF has been produced to accompany his talk at the HOW design conference in Austin Texas and is packed with little insights into good design practice.

The document is only 10 pages long and yet touches on subjects as diverse and grandiose as…

• The nature of great design
• The differences between influence and inspiration
• The need to understand a problem before searching for a solution
• The power of typography
• Definitions of visual hierarchy
• The need for a ‘creative pause’

Eye tracking findings

I have mixed feelings about eye tracking exercises. This is probably partly because I am not particularly knowledgeable on the subject. Although, I am happy to acknowledge that they offer a valuable insight into users behavior and are a useful tool in our usability arsenal, I do have two concerns…

• Running an eye tracking session is expensive. If this leads to a reduction in the number of rounds of traditional user testing or the number of users tested, then I would have serious concerns.
• Although eye tracking provides an insight into where a user is looking, it does not reveal anything about intent or comprehension. For example, if a user only briefly glances at a key screen element this doesn’t necessarily mean they are ignoring it. It could mean that it is well designed and the user quickly processed the information it was attempting to convey.

Ultimately, I would be concerned to see too much weight put on their results. That said, it is interesting to see the results of eye tracking and Eyetrack have released some results from one such exercise that focused on the homepages of news site. Useful nuggets included…

• Dominant headlines most often draw the eye first upon entering the page.
• Smaller type encourages focused viewing behavior.
• Navigation placed at the top of a homepage performed best.
• Shorter paragraphs performed better.
• We also learned that the bigger the image, the more time people took to look at it.
• Our research also shows that clean, clear faces in images attract more eye fixations on homepages.

It’s a good read and although most of the points are common sense, it is nice to have evidence to backup those opinions.

Online reputation management

“Online reputation management” – Sounds ghastly doesn’t it? Sounds like the horrible love child of social media and marketing BS. That said, for better or worse, it is becoming increasingly important to manage how we are perceived online.

As I recently said in an interview at FOWD, our websites are no longer the only place where our brand is discussed. As a result we need to engage with users wherever they are talking about us. The question is, how do we do that successfully?

Whether we are responsible for our organizations brand or just want to know what is being said about us personally, there are various techniques and tools that can help.

This week Sitepoint have brought those tools and techniques together in 3 useful and informative posts…

• Online Reputation Management: The Basics – This post focuses on defining what Online reputation management is and why it is important.

• Online Reputation Management: 16 Free Tools – The post brings together tools for tracking what is being said about you in blogs, on twitter and who is linking to you.

• Online Reputation Management: How to Handle Negative Publicity – This post encourages you to think before responding to negative publicity and shows you how to turn negative comments to your advantage.

Past disasters like Dell Hell are perfect examples of just how important this area is. It is time we all started to think carefully about how we are perceived.

7 Quick CSS Enhancements for Better User Experience

I haven’t seen much written about CSS over the last year or so. It has been as if everything that can be said about CSS, has been said. However, just recently we are beginning to see a few CSS focused blog posts appearing. One example is 7 Quick CSS Enhancements for Better User Experience by David Walsh.

What I love about this post is the ideas suggested can be applied on top of an existing site design. They are just little ‘touches’ that make the site visually more appealing and easier to use. The 7 suggestions are…

• Change the text colour of selected links
• Prevent Firefox scroll bars from jumping
• Give form fields rounded corner
• Control where page break occurs when printing
• Show icons that identify the file type of link destinations
• Change the cursor when it hovers over a submit button or label so it actually looks clickable
• Increase the clickable area of a link  using display:block

Each suggestion comes with an explanation of its benefits and the code required to implement.

Admittedly not all browsers will understand these enhancements. However, because they are not crucial to the functionality that really does not matter. Its a nice example of graded browser support.

Back to top

Paul: Okay, so joining me today is Mike Kus from Carsonified – good to have you on the show.

Mike: Good to be here.

Paul: It’s really nice. So, as the listeners will have gathered by now, we’re doing a whole series of little interviews off the back of ‘The Future of Web Design’ conference, where we can do all our interviews in one go, rather than spreading them out over time.

Marcus: Yay, we like this.

Paul: So Mike has just finished his presentation and there’s some excellent stuff in there, but you were quite kind of, what’s the word… You were quite harsh to the poor web design community and their obsession with details of technological stuff.

Mike: Yeah, maybe yeah.

Paul: You know, all of this “does it really matter whether your code validates”, not that you used that as an example, but I can’t remember what examples you did use, you did have a few didn’t you.

Mike: No, well I mean things like [a lot of debate to un-debate] which I come across and you see lots of times. You know, it’s a question that’s probably never going to get answered. I just come across it all the time still, and it’s like make up your own mind and move on.

Paul: I got the impression that you feel that perhaps as a community we’re a little bit petit, and overly concerned with minutia.

Mike: No, I mean, I love the web community *laughter*, no I do I love it and I love being part of it; it’s great. The funny thing is I started off two years ago doing web stuff, and I really do feel now two years on, that web design… I don’t see many differences to me between web and print now. It’s all the same thing to me, you’re just designing, you know. And I guess because I feel design is so important, I sort of maybe feel a bit left out *laughter* in conversations, because people don’t seem to talk about the design as much. And the reason that talk was called “Forgotten Web Standards”, I mean I know some guy heckled at the end saying about it not really…

Paul: “It’s not really a web standard.”

Mike: No, and I know that. It’s just a cool title I thought – it gets people thinking, and really the part that related to web standards was just because I feel like for a site, good layout and thinking about things from a graphic design point of view contributes to accessibility on a web site.

Paul: Yeah. And also to be honest, I mean what is web standards other than a set of guidelines and criteria. Equally there’s sets of guidelines and criteria about good design; use of colour, you know.

Mike: Well that’s it, yeah. To be honest it was really more just a good title, and I didn’t expect people to start analysing.

Paul: But they will!

Mike: Yeah I know, yeah; I should have known.

Paul: But I think you raised an interesting point, or a good point which is that we can get so hung up in the logistics of how web sites are built that we’re not always giving the attention to the design aspects of it. And even more specific than that, it’s the whole discussion about, you know, we spend a lot of time talking about usability and accessibility, but aesthetics do matter. We almost have this attitude in some ways that aesthetics are just skinning it afterwards.

Mike: Yeah, yeah I know, I agree. I think aesthetics do, well to me they matter. You know my opinion is just my opinion and other people have different opinions, and on a day like today you’re going to get people talking about the code side of things, and I just feel that I know what I know best, and it’s what I can bring to it, it’s what I can bring to the table, and people can take away from it what they like. Someone’s got to do it haven’t they.

Paul: It’s quite interesting, in your mind you don’t make a differentiation between the print stuff you do and the online stuff you do. Surely there are differences Mike.

Mike: Of course there are differences, yeah. But the processes I go through as a designer are the same.

Paul: Right.

Mike: I’ve noticed that much more; I guess of course there are differences. I mean for a start you’ve got to think about things differently in web design because you’ve got to make sure that people understand where you’ve got to go to click things; how you’re going to navigate your way through the site. But once you sort of know that, it’s sort of… Once you’ve built a load of sites and you know that, that’s just something that comes naturally to think about.That’s a different part, that part where you just get used to doing it, then ,he essence of the process is the same. Designing something for a web site, I find there are the same pitfalls and hurdles designing for print as for web. And the funny thing is, and I really feel now as well, that the coding side… I’m not the best coder in the world, and probably not the worst, but I’ve learnt loads in this past year, and I’m writing much cleaner code now than I was a year ago. I enjoy that too, and I know it’s important.

Paul: Yeah. But like you say there are lots of people discussing that, and not as many discussing the design side of things.

Mike: Yeah, and I totally read up on stuff about code; I know it’s important. I guess for me, sometimes I’d want to go in line and get involved in discussions about design, and I know you get Photoshop tips and tutorials don’t you, but that’s not really design.

Paul: Yeah. But a lot of that’s about using the tools of design rather than the principles of design.

Mike: Exactly, it’s all tools yeah. I’m interested in the principles and the ideas and imagination part, you know.

Paul: You talked in your presentation about design aiding the experience, you know; experience based design. I was just interested to hear you talk a little more around that, about how you feel that design can… In what ways can design affect the experience that a user has and what do you mean by the ‘the experience of a user’?

Mike: Well I guess I mean when I go to a web site, and for a start, at least if we’re just talking from an aesthetic point of view, if I return to, and again this is something that appeals to me, if I go to a web site and it gob smacks because it looks so beautiful, that in one foul swoop is my experience of it, you know? But I think there are other things more technical, and when I say technical I don’t mean in a code way, but in a technical graphic design way, you can enhance people’s experience just by… I like the idea of merging more, like you said, things I learnt at college about graphic design and where to make people look in a page, and how to highlight. Combining the technical bits of graphic design, what to highlight and what to push back, how to take people’s eyes in to the bits you want them to read, and then the slightly less important stuff, pushed back a bit, and combining that with an aesthetic. So if you’ve got a great aesthetic and you’ve really thought about where people are looking on your page, and how they’re going to follow through you’re site, to me those things combined is what I mean by designing for experience; a good experience. Because you could obviously design for a bad experience!

Paul: Well obviously, yeah, that’s easier! Another thing that interests me about your work in particular, and really people need to go and look at examples of stuff that you’ve done to grasp this, but you have a very distinct and obvious style; I think you do anyway. So I can look at the stuff you’ve done for Carsonified, and then even the stuff you’ve done here for Microsoft and there’s obviously a consistent theme to that. Do you think that having a very strong style creates problems sometimes when you’re trying to reach different audiences, and you’ve got to battle with your own style, do you find that a problem?

Mike: Well, this is something I find really interesting because growing up as a graphic designer and stuff, I was always someone who basically… For a start if you’re working for clients and you’re an agency, and you’re getting different jobs, you’ve obviously got to be able to create something completely different one day to the next, potentially. And the funny thing is I actually carried that through into my personal work, and I was like “I can’t do something like this because I’ve done something that looks a bit like that before.” But then you know how you can get famous illustrators who basically churn out the same stuff all the time and they get seriously famous, and one company gets them to do something, and another company…

Paul: They come to that person because of that style.

Mike: Exactly, and I think the only reason my stuff you’re seeing… if you looked at the Orchestrate site, that’s me turning my hand to something through a brief.

Paul: Yeah that’s true actually, yeah, because that has got a very different style.

Mike: I’m just answering the brief there, you know, so it is something I can do.

Paul: Sorry, I didn’t mean to imply you couldn’t, it’s a constant discussion isn’t it.

Mike: I don’t think you implied that *laughter* But it’s interesting, and the only reason I do bring my style into the projects you see that overlap each other is because I’ve had the freedom to do so.

Paul: Yeah, and I guess to some degree, the style that I’m exposed to is the style that’s aimed at people like me.

Mike: Yeah.

Paul: So the fact that you did the Microsoft stand here at ‘The Future of Web Design’, well actually it’s good that it’s got the same style as the other stuff that’s going on because it’s a style aimed at web designers and people like me.

Mike: Yeah, and another thing about doing stuff that’s similar, is you do get to get known for a certain thing, which in some ways I think “is that good or bad?” I don’t know, but I think I’m keen to make sure people know I can do different stuff. But at the same time I’m happy to be known for a certain style, because I think it’s sort of like an identity you get. And so I’d like to keep a balance there, but I definitely don’t mind being known for something that’s got a feel about it.

Paul: Yeah. I mean equally after saying that, which kind of brings me on to the next topic I want to talk about, is that the style that I typically associate you with is quite illustrative, you know, you’ve got this certain way of doing things. And then your set of slides for this week weren’t at all like that, they were very typographic, and you did talk a little bit about typography. We interviewed Mark Bolton on the subject of typography as well. I’m interested in your take on typography because you seem to use letter forms almost as design tools rather than necessarily as standard typography if that makes sense.

Mike: Yeah, well that’s interesting because when I did those slides, the reason they look like that is because I basically took a theme and I got interested with that, what’s his name… I can’t remember, a Swiss graphic designer, very famous I can’t remember his name now, it’s escaped from me, but it’s sort of Swiss modern graphic design, and I was looking at Swiss modern graphic design and some Russian constructivism stuff on Flickr, you know. And because when I was at college, that sort of graphic design, I was brought up on that; it was the first thing I was interested in, and because it was a graphic design themed talk, I used that as the style. And it just so happened that throughout it, the experiment with type and shapes and stuff was something that just happened in making those slides, and I suddenly realised I was getting something out of using type in a graphical way, it’s not just about the words, I mean a slide I like – my own stuff I love! *laughter* – that one that says (and I loved doing that slide and I think it looked great) was the one that said “buck trends and break conventions”, and conventions was all mashed up in different ways. There’s something beautiful about type though isn’t there, like huge letters, and I wish I could have seen those slides, because that screen was so big.

Paul: It looked spectacular, yeah.

Mike: There was a huge, massive letter N, you know. I guess now it excites me, type; I think it can be the basis for great design, not just in a traditional typography way, but actually great graphic design. I guess I think the whole type debate as in “where are we going to get all the fonts from”, or “what’s going to be the standard way of using them” – for some reason I don’t feel restricted by the web font thing.

Paul: No, it’s interesting. Mark was saying exactly the same thing as well.

Mike: It’s not something that bothers me, and I’m quite happy.

Paul: I mean a lot of the ways, certainly the ways you used them in the slides, we’re talking about using type as a graphic element in those cases, rather than necessarily to convey large amounts of copy; it’s a subtlety different thing going on there.

Mike: Yeah, yeah.

Paul: I was also quite interested when you talked in your presentation about a logo design that you did, and about how you were being stopped at every turn by the client effectively because they were saying “no, no, we don’t want to be associated with that etc.” So you then added in a strap line into that which you then built the logo around the strap line rather than the brand itself. Now, that was quite interesting because that gets into the realms of relationship between copy and design, and how the two things work together. And in that case, you came up with the strap line did you?

Mike: Yeah, I’m quite into… I mean, I don’t want to say it myself, but Ryan for example seems to think I’m quite good at copy – which is nice of him to say. It’s a way I work quite a lot, I’ve done loads and loads of logo / branding stuff in the past, and I did something, for example, for the Body Shop once. Basically I could do anything, and it was about raising money for a school in Kosovo to get it built, and they just wanted a poster. I just thought of a strap line anyway, because I could do anything I wanted. It was “building a future”, and that was all it was, and it had all these huge letters. Well it had “building a future” and the letters were all piled up and leaning against each other. I guess often the first thing I think of is copy whenever I’m designing something, especially if I’ve got a new site to design, I’m like well what are the words, what’s going on, what’s it about, is there a strap line, do you need one – you know – what’s written in the first paragraphs in the home page, is there something in there I can use to spark the idea for the design. I think copy in that respect has got a massive relationship to design. It’s rubbish trying to work with Latin text.

Paul: Yeah I know, lipsum, yeah.

Mike: It’s alright for that filling in a paragraph or something, but it’s nice to have that proper copy to hook your design on to it; it can be really helpful.

Paul: The thing that you intrigued me with is that you were going through things like layout, colour, typography, then you hit imagery, and you said there’s a whole presentation there. I want to know what the presentation is, I want to know what is it that you know, obviously there’s a lot of depth there that you couldn’t cover, and I’m just interested in that.

Mike: I think what it was, you’ve talked about my illustrative stuff already, so say you use that for the sake of argument right now because you could apply this to photography as well, I guess to me a site doesn’t have to be like you put it together; I don’t know, I’m going to put a picture here or an illustration there… It can evolve round an illustration from the very beginning. I know it’s a pretty one off site, but the Twiggy site for example, which is just a bit of fun, really quick, but that was just literally me, do what the hell I want, just have fun, and it wasn’t the most practical site design maybe, but you know that just literally was an image that built up and changed, and it was the basis for that site design. It wasn’t just in the site it was the site, and it had the huge letters in the background. I only had a short slot, and if I had more time I would have gone into why I felt it can be the basis for your site, not just something you add to it. Your site can grow from your photographs and illustrations rather than putting them into your site.

Paul: That’s a nice way of thinking about it, yeah. Because I do tend to start with the grid structure and the layout, and all that kind of thing, and then slot imagery in which I can see what you’re saying, you can miss a trick there if you’re not careful.

Mike: Yeah it’s funny I’m changing the way I work lately, and I was talking to Keir about this. I’m starting to think about stuff like you remember when Andy Clarke said he works from the inside out, and I’m starting to do that design wise.

Paul: Right, okay. You mean start with the detail or something?

Mike: Well start with something on the middle of the page. I just open a Photoshop document to start, and I know at one point in the page I’ll have like this… For example, I’m working on something at the moment, it’s got the planet Earth, and all I’ve got on the page is the Earth, I’ve got some bits coming off of it, and then I’m going to add this descriptive paragraph, and I haven’t got anything else on the page at this point, I’m just building it out.

Paul: Wow, that’s quite interesting.

Mike: Rather than thinking “ohhh”, and worrying about things like navigation afterwards, because it’s so easy to just go “no, nav-i-gat-ion”, and then I think no wait a minute what have I done, it’s literally just this autopilot.

Paul: Yeah, and to be honest that’s almost why, in the end, I moved on from design in my career, because I felt I was beginning to do exactly that, go on autopilot. So there is this need to find ways to refresh the way you’re working and stuff like that.

Mike: The funny thing is, it’s natural progression as well. It’s not a choice I’ve made, I just found myself doing this.

Paul: That’s good, that’s really good. You talk a lot about “I had a lot of freedom on this project; I could do what I wanted.” You said that several times in this interview. Do you like that, or do you like having constraints? Because a lot of people that are listening to this are going, “well it’s all well and good for him because he’s working on internal projects and he doesn’t have clients”, and that kind of thing, although you are doing client work now. So there we go, there’s a nice comparison between the client work you’re doing and the internal stuff. Where does your heart lie?

Mike: Yeah, I don’t know actually. Sometimes I hate having no restrictions. Sometimes, no restrictions is the worst thing in the whole world, I hate it. Sometimes it can be terrible, sometimes it’s great. Because if you’ve got no restrictions at all sometimes it’s so hard; that Microsoft thing, I was like “what the hell am I going to do, I haven’t got a clue”. For a start, I’ve never designed a stand before, let alone just an idea. I spent three days getting to that, just getting to the beginning of that idea. I literally produced nothing for three days. The fourth day I was like, “I think I’ve got something”, and that was hard because it had no restrictions because the whole point they came to us was because they wanted to do something different. So the pressure was on to think of something really different, and it’s hard when you can start anywhere. Sometimes it’s really nice to have restrictions, like that Orchestrate site was nice; I got back after Christmas, and John Hicks has put together roughly what had to look like.

Paul: Right. You had to carry on with his style.

Mike: Yeah sort of. I mean it did progress from that, but it had a logo and a colour scheme and a nice, tidy, neat… you know I just had to follow it through and it was nice, I enjoyed doing it. It was a nice break from “you can do anything”, which is actually harder I think.

Paul: Right, that’s interesting.

Mike: Much harder actually. I used to do music quite a lot, and in a way what was always helpful was restricting our instruments completely, and not having much to work with. Because it sort of sets you on a path at least, where as when you’re starting out and you can go any which way you want…

Paul: Yeah, it’s too open.

Marcus: It’s the starting part that’s the hard bit; it’s that initial creative spark. If somebody said “this is my idea, I want you to build me something,” then it’s like great I can do that. But, what’s better about when you’ve got, because I do a quite a lot of music as well (or did), it’s when you get something going and it’s good, that’s more satisfying than working on someone else’s work, but if it’s one of those days when it’s just not coming then, you know…

Paul: Which brings us on to what I wanted to wrap up with, which was you mentioned this slide about bucking trends and breaking trends and that kind of thing, and you advised against CSS galleries, you advised against Smashing Magazine’s trends for the last year, which people turn to for inspiration because they struggle to know where to begin. So if you’re advising against those things, which by the way I think is an excellent piece of advice, we asked Jim Coodle this as well, where does your inspiration come from? Where do you turn to if you don’t turn to that kind of thing?

Mike: I guess I do advise that, but I don’t like to sound like I’m telling people what to do *laughter*

Paul: Well if you stand on a stage…

Mike: I guess, yeah. But the funny thing is, I’ll be in a book shop… A year ago, for example, I was in a book shop and I picked up Jamie Oliver’s book, it was made of a nice sacky cover, don’t know if you’ve seen it, it’s got white and blue in it, it was beautiful. The graphic design and the layout was lovely, and I was like “oh I’ll buy that”, not for cooking, just because it looked nice, and I was like “I’m going to design a web site like that”. And someone on Twitter just said something about how they’d just discussed Mike Kus’s talk over lunch and how much of an idiot I am, and something about imagine your web site in print, which is what I said at the end.

Paul: Which I thought was brilliant, but he had problems with that did he?

Mike: Yeah, well he said it’s absolutely useless, different mediums, why would you do that.

Paul: It’s to take it out of context, and give yourself a chance to look at it from a completely different angle. It would be the same as projecting it huge on a wall or sketching it out in chalk, or whatever.

Mike: Well that’s it, exactly. It’s like what you said a minute ago about it’s so easy to go into autopilot with these things, and I think sometimes you need something to jolt your brain into looking at it a little bit differently. Because to me there are a lot of things on the web… Just imagine if you get a web site like your average one – it’s got the gradients all over it and everything, you put it on a magazine page; it would look weird. You have to ask yourself, why are you doing that. I know it’s a different medium, and I think we can all be clever enough to realise that, and there’s obviously bits I’m not going to say it’s got to be like a magazine, but I think it’s worth asking yourself those questions.

Paul: In the same way as in the talk, which I thought was really nice, was you had these amazing set of slides that had a very distinct look, and that was being projected massive on a wall, and yet you transposed that into a poster you gave away to people. So you were crossing those mediums and using inspiration from both which I thought was excellent; it was good. It went well didn’t it?

Mike: It was good, yeah I was pleased.

Paul: Excellent. Well thank you so much for your time Mike, that was really useful, and I think it will be very helpful for people. Especially freelancers that are stuck by themselves, and stuck in their own routine of working. It’s nice to hear how other people work, so thanks.

Mike: Cool. Cheers, thanks a lot.

Thanks goes to Gareth James for transcribing this interview.

Back to top

APIs, source control and Ryan Carson

On show 164 Ryan Carson shared some more advice on running and building web applications as part of his ongoing series for Boagworld. Although Ryan’s advice is excellent, Boagworld listener Glen Bennett wanted to offer an alternative perspective over a couple of Ryan’s suggestions.

Hi Paul and Marcus, this is Glen Bennett from small business hosting. I was excited when you had Ryan Carson on the show talking about web application building, finally someone on the show who knew what they were talking about, however he cave out some information that was a bit misleading and I wanted to clear it up for your listeners, first of all he talked about spreedly.com and indicated that their fee is an alternative to the standard processing fees, in actuality it’s a fee that’s in addition to all the standard processing fees, there service sits in front of the processing gateway and therefore it’s an additional fee and there fee is not insignificant, in addition to that you would have to build an interface to their product. So there is some building cost at your end. I agree that building a processing engine is pretty substantial and something that you want to get help with if you possibly can there are packages out there anywhere from a few hundred dollars to a few thousand dollars that are actually pre-written source code that you put into you payment package, you have to do that pretty early in the process so that you can make sure that your user registration matches up with the processing system.

The second thing he talked about which is a source code repository, which is GIT hub, fantastic product and I recommend it highly, I think all developers should go and look at it, however the free service is primarily for a public repository so I don’t think he would have wanted to put DropSend source code into a public repository so their free service is not something that you’d probably want to use for your web application unless it’s an open source web application and there is a small fee for GIT hub but a lot of hosting packages come with SVN included for free so you might want to look into that, you can use GIT locally on your local system and then SVN them up to your free repository on the internet so you have a remote repository that’s free during development time. So there’s a couple of tips, a couple of corrections for web developers, I hope that helps and I want to thank Ryan Carson for the additional information that he had in his tips, I found it all very useful. Thank you very much.

Blog writing inspiration

Recently we received an email from Jon. He wrote:

I was wondering how do you find inspiration for your articles? How do you expand upon your initial idea and is there a process you go through when writing an article? How long do you spend writing an article? And lastly what do you think is the hallmark of a good article?

These are all good questions. The majority of blogs  have long since been abandoned by their authors. The owner either struggle to think of new content or finds running a blog more time consuming than anticipated.

I don’t claim to have all the answer when it comes to successful blogging. However I can share with you a few principles I work by…

• Limit your time – I work best when I have a deadline. If I have too much time I over think things and pick at the details. This makes blogging  high maintenance and hard to keep up. Unless the content of a blog post is going to be used elsewhere (see Recycle below) I will never spend more than a couple of hours writing something. To me a blog is about sharing ideas, not writing a perfect piece of copy. I know I am not the best writer in the world and so make up for this by sharing ideas on a regular basis. In order to do that, I limit the time available for each post.
• Keep an ideas list - Ideas for blog posts occur to me all the time and I have trained myself to constantly ask ‘would what I am doing make a good blog post?’ However, you can guarantee my mind will go blank the moment I sit down to write one. That is why it is important for me to keep a list of ideas. Whether you add them to a notebook or keep a list in Wordpress, you need to make it as quick and easy to add ideas as possible. Also, when I add an idea, I try to flesh it out a little. Instead of just adding a title I also include a rough synopsis of what I want to cover.
• Create an outline – Before I begin writing, I always create an outline of what I want to cover. I usually do this using Omni Outliner where I jot down random thoughts on the subject. I then sort those ideas into a logical structure. Once the structure is in place, writing the final post is much easier. This is because I know where I am going. It also ensures I lead the reader through a story, rather than throwing random thoughts at them.
• Write first, edit later – Its easy to get caught up in spelling, grammar and structure to the detriment of flow. I tend to write posts in one go. I don’t re-read what I have written until the whole thing is finished. Stopping to check what I have written breaks my focus and leads to disjointed articles that take longer to write. Better to write the whole thing and then re-read the post afterward editing it then.
• Write for your audience – Before I begin a blog post I always ask myself whether this will be of interest to my audience. Sometimes I indulge myself with personal posts, but most of the time I work hard to stay on topic and only write content that is focused on meeting my readers needs. This applies not just to the subjects chosen. It also to the style of writing and terminology used. For example, I try to avoid too much technical jargon because it may not be accessible to website owners. However, I don’t always succeed!
• Write for scanability – There is a vocal minority in the blogging community who frown upon image heavy, list based, blog posts. However, I think there is a lot to be learnt from them. People who subscribe to my blog read a lot of other blogs too. With so much information to keep abreast of they rarely have time to read everything I write. I therefore write in a way that lets them get the ‘gist’ of a post without reading every word. Lists are one way to do this, as is the use of imagery. However, I also use headings and front loading too. Wherever possible make content easy to skim read. If you do not, users are likely to skip it entirely.
• Ask for suggestions - I have found the best way to come up with ideas for my blog is to ask my readers. I actively encourage people to email me with questions, reviews or comments and these inspire ideas for posts. In fact the very question I am answering here would make a great blog post. Hmmm… perhaps I should stop before I waste the opportunity :-)
• Ask your readers opinion – As well as asking for suggestions also ask for feedback. A good blog post does not have to be you sharing your words of wisdom with the world. It can also be asking a question and encouraging feedback. Some of the best content on blogs  can be found in the comments, rather than the actual posts. Try to write posts that encourage a dialogue rather than a monologue. Also if you do manage to spark a passionate discussion, followup with a second post that summarizes the views expressed.
• Recycle – Finally, I am a great believer in recycling ideas. For example the answer to this question will appear on my blog, on the podcast and also will make a great Audioboo tip. Many of my best blog posts have either come out of a presentation I gave or a chapter from my book.

This is not a definitive set of guidelines and every blogger will work differently. However, this approach has helped me to continue blogging for over 4 years. I will leave it to you to judge whether the quality has remained high ;-)

Back to top

Good news everybody! Boagworld now has a Facebook page. I know, its exciting isn’t it. Contain your enthusiasm, you are making a scene.

Seriously though, I wanted to let you all know because I am aware I spend most of my life refusing friends requests on Facebook. I made a decision early on to keep Facebook for personal friends rather than a promotional tool for Boagworld. I always hate refusing people and should have setup a page or group ages ago. Somehow I never got around to it.

Anyway, the Boagworld Facebook page now exists so make sure you take a minute to join it.

Back to top

What is more important – driving traffic to your site or encouraging as many people as possible to see your content? Believe it or not, they are not one in the same thing. In this week’s feature Paul looks at 10 ways you can make sure your content is seen by as many people as possible.

Read ‘10 ways to put content in front of more people’

Back to top

This week I would like to recommend The Long Tail by Chris Anderson on Audible.com. The Long Tail is a superb book that I would recommend to anybody running a website especially if it is an ecommerce site. The book examines how the web has changed the value of information and commodities. It looks at the huge opportunities available to reach ever more niche markets and make money from the long tail.

Best of all if you sign up with Audible you can get this book totally free. Simply go to www.audiblepodcast.com/boagworld and claim your free credit.

If you want to listen to it, Audible has it! With over 60,000 titles and virtually every genre, you’ll find what you’re looking for. Get a free audiobook and 14-day trial today by signing up at www.audiblepodcast.com/boagworld.

Back to top

Bubble Timer Review

Hi Paul, hi Marcus and hello to the Boagworld listeners, my name is Emily and I am here to submit a review of a time-tracking application called Bubbletimer.

First of all I have to make a little apology for the sound in the background. I work from home and it turns out I live on quite a noisy street which I have to say I don’t really notice until I try and make a recording and then all sorts of weird sounds in the background, so please excuse the background noise.

So I’m submitting a review of Bubbletimer in response to show number 158 where Paul talks about the reality of home working which is also a blog post on the Boagworld website and it was actually the blog post which really inspired me to want to make a response, in particular a comment by XX who asked about how Paul tracks his time. I immediately wanted to make a response, which I did in the comments but I thought I’d share it here to share this fantastic time-tracking web application that I use. It’s called Bubbletimer and basically what it does is it tracks time in 15 minute increments by activity and then by day and it produces reports for your chosen time period, say a week.

There is a 15 minute time chime reminder which reminds you to track your time and forces you to consider what you’re doing and whether that is what you’re meant to be doing or whether that’s the most productive thing you could be doing.

There is also a mobile web interface which can be quite nice if you’ve got an iPhone, you can be online all the time. There are also multi-user capabilities in that you can share reports with others so if you’re working in a team you can see how much progress everyone else is making.

What it doesn’t do is; it doesn’t convert time to time slips, it doesn’t integrate with an invoicing application and it doesn’t recognise when you’re inactive or when you’ve changed tasks, as I know some time tracking applications can do.

So really it’s for self-employed people, freelancers or those working on fixed-price projects who want to track their progress on that project, or anyone who needs help motivating themselves in getting things done. It’s not for employees because of it not having time-sheets or integrating into a invoicing scheme, I’d say it’s not good if you’re self-employed or a freelancer working on an hourly basis.

What’s great about this application is that you can track your non-billable time and for me that’s been a real lifesaver. I am one half of a small web design partnership and I do lots of accounting, quoting, emailing and lots of tasks that are not specifically billable, or billable tasks that I’ve already quoted a set fee for, so with this I can measure the actual time spent against what I’ve quoted.

Of course you can also use it to track how much time you actually spend on ‘Social Networking’ every day, you know, see how long you actually spend on Twitter or commenting on blog posts. Another example of one of the tasks I’ve been tracking with it is my bookkeeping and it’s really been useful for me to see how much time I’ve spent on that and whether I ought to think about hiring a bookkeeper part-time because I can look at my reports from a week or over a month and see how much time I’ve actually spent doing that.

It’s a really simple, easy-to-use interface, there’s some really nice details in there like the ’scribbles’ when you complete a 15 minute bubble of time are different, so there’s kind of a texture to it there. It’s also growing to accommodate popular feature requests as requested on the Get Satisfaction forum, which is really responsive if you have any problems, or if you have feature requests, I’ve seen new feature be introduced since I’ve been using it.

Now I shouldn’t end without telling you that it isn’t free, there is a cost, but it’s just $20 a year and I think it is well worth it for someone who wants to get things done. As I said my name is Emily and my Twitter name is @gradualist you can find out more about me there, thanks for listening!

Do you have a tool that you swear by? Maybe a web design tool, or just a tool that keeps you organized? If so send us an audio review we can put on the show.

The role of gender in web design

We have received an interesting audio question from Dennis. He asks whether any of our clients have expressed a concern over the gender of our designers. He cites his own experience where a female client said his designs were too ‘practical’ and not ‘fun enough’ because he was a man.

First off, I have to say that your client sounds rather sexist to me! The implication that men cannot design a ‘fun’ site is absurd.

That said, gender does play a part in a designers style. For example, women are much better able to perceive colour than men and so tend to make better use of colour. However, gender is just one of many factors that shapes a designers style. Other factors include:

• Cultural background
• Design schooling
• Personality
• Design leaning (e.g. illustration, typography, photography)

The list could go on. The point is that what we perceive as masculine or feminine design, is not solely produced by the associated gender. There is overlap and a blurring of  lines.

Where I think things get more tricky is when a male designer is asked to design for a female audience (or vice versa). This is more challenging because good design involves empathy with the user. Unsurprisingly it is harder for a man to put himself in the position of a woman. However, it is probably no more difficult than for a young person to visualize the needs of an older user. It is the ability to do this that separates a good designer from an exceptional one. The key is thorough research into the target audience and an ability to steer clear of preconceptions and stereotypes.

Back to top

The power of asking questions

I am spending a lot of time recently advising clients how to ‘engage’ with their users. Engagement seems to be the buzzword of the moment, and to some degree rightly so. Engaging with your users is important for a number of reasons including (but not limited to)…

• It increases loyalty and repeat business
• It encourages users to promote you and your services
• It informs your products and services

Although a lot of people understand the importance of engagement, few know how to do it effectively. As is so often the case website owners turn to technology as the solution. They launch forums, add comments and sign-up for twitter. However, when it comes to engaging with human’s, what you say is considerably more important than the medium through which its said.

Take for example your blog. Just because you have comments enabled, does not mean users will post. As is pointed out on the Pro Blogger website, if you want to encourage comments you need to ask questions.

Pro Blogger provides 10 reasons why questions are good, before going on to share 12 tips for asking them. Some of the suggestions are extremely useful, such as using the answers you receive as the basis for another article. Its a good post and definitely worth reading.

The do’s and don’ts of modern web design

I don’t normally highlight new web design sites, but this one caught my eye. Called “the do’s and don’ts of modern web design” the site is essentially a directory of web design posts. What makes the site different is that each article is boiled down to a single  concise tip that is either assigned to the “do” or “don’t” column.

Posts are also tagged according to their level of complexity (beginner, intermediate or advanced) and users can  view posts by popularity or date.

The user also has the option to read the entire post or simply rate the advice being given.

As a blogger I do have some concerns about this site. The idea of somebody boiling my posts down to a single point is disturbing to say the least! However, as a user there is something very convenient about getting short condensed snippets of information. We are all busy people and too many bloggers take forever to come to the point (myself included).

Uses for hover

The Web Designers Wall has released a post this week entitled “Maximize the Use of Hover“. If you are a designer it is definitely worth reading.

I am a huge fan of using hover in my design work. This is primarily because it makes additional information available without cluttering up the user interface. It keeps things simple and prevents the user becoming overwhelmed.

The post breaks this argument down further and identifies 4 reasons to make greater uses of hover. Their reasons include…

• Using hover to beautify layout
• Using hover to minimize clutter
• Using hover to display additional information

Each point is supported by some great examples of hover in action. The post also ends with some links to useful ‘hover’ tutorials to get you started. One is a CSS only tutorial while the other uses jQuery. Personally, I use jQuery a lot for achieving hover effects simply because it is visually more attractive and also easier to build.

In defense of eye candy

I want to conclude this week’s news with one of the best articles I have read in a long time. ‘In Defense of Eye Candy‘ on A List Apart is a well constructed argument for the importance of aesthetics.

The author (Stephen Anderson) explains how aesthetics affect…

• our understanding of a user interface,
• the level of trust we have in a brand
• our ability to complete a task.

It is a beautifully considered case that delves into the world of cognitive perception and provides some excellent examples of how aesthetics alter our attitudes. One particular favorite is the example of the Sony AIBO and their decision to make the robot look like a puppy. Stephen writes…

Here, you have a robotic device that isn’t perfect. It won’t understand most of what you say. It may or may not follow the commands it does understand. And it doesn’t really do all that much.

If this robot was an adult butler that responded to only half our requests and frequently did something other than what we asked, we’d consider it broken and useless. But as a puppy, we find its behaviors “cute.” Puppies aren’t known for following directions. And when the robot puppy does succeed, we are delighted. “Look, it rolled over!” What a great way to enter the robotics market.

However, ultimately the entire article is summed up in the following quote…

According to a 2002 study, the “appeal of the overall visual design of a site, including layout, typography, font size, and color schemes,” is the number one factor we use to evaluate a website’s credibility.

Back to top

Paul: So, joining me today is Jim Coudal. It’s good to have you on the show.

Jim: Thank you.

Paul: Thank you for coming along. We’re actually sitting here at the Future of Web Design. Jim has just given his keynote presentation, and I’ve also got Marcus here, hello Marcus.

Marcus: Hello Paul. Hello Jim. (Laughs) I’m not normally in on the interviews, that’s why it feels a bit weird.

Paul: Yeah, you’re not used to this bit are you really?

Marcus: No, I’m not used to being at the Future of Web Design doing it either. He does the interviews over the phone usually.

Paul: Yeah, this is weird – face to face. Um, so, brilliant brilliant presentation as always, um, and I wanted to talk to you about some of the different, um, issues relating to creativity, because you seem to talk a lot on that, and obviously at, um, Coudal Partners, isn’t it, Coudal Partners, yeah, you have to deal with this kind of issue all the time and working with creative people and how to encourage creativity and you do some very interesting stuff.

Jim: I mean, first to say, I think part of the structure of Coudal Partners is in response to a, er, earlier career frustrated with creative things, so really Coudal Partners, er, everybody there is artist or writer. So, you know, there is no, you know, we probably without business plan for 13 years, you know, there is no superstructure of account planning or any of that.

Paul: OK.

Jim: That’s possible, I think, because we’re all responsible people, but it’s also possible because we’ve made a concerted effort over the last 5 years to reduce the amount of revenue that comes from clients.

Paul: OK.

Jim: So, erm, we. Our biggest clients now are companies we own.

Paul: Right.

Jim: So, which is a blessing because we can do whatever the hell we want, and a curse because things don’t work out. (laughs). You konw, you’ve still got to make payroll.

Paul: Yeah, totally.

Jim: So, yeah, I think that the, you know, we’re all adults and we’re all responsible people and we all have a variety of interests and I’m reminded of a story. Do you know Cabel Sasser, from Panic, Panic Software in Portland – Transmit, and Coda and all that?

Paul: Oh, yes.

Jim: Well, he posted, at that time, Panic was just Steven and Cabel and he posted a video on his site, because everybody said: “what’s a typical day like at Panic?”

Paul: Yeah

Jim: So, he posted a video on his site, and I think it was like 20 minutes, of 2 guys with headphones on, staring into computer (all laugh), and like about 10 minutes into it, one of them gets up and goes to the washroom and then comes back and puts his headphones back on and stares at his computer.

Paul: Right.

Jim: And so, I watched the whole video and I wrote him right back and I said: “Cabel, it’s amazing, it’s exactly like that here!”(all laugh) Everybody has this idea that, you know, the rock and roll is blaring and, you know, someone’s having a bong in the back, or whatever, but it’s very much a individual efforts in a collective environment.

Paul: Ah, see that’s very interesting, because you’ve got a company full of creative people that are obviously coming up with lots of creative ideas and the question is: “how do you monetize that?”You know, you’re trying to move away from client work and we all understand how client work is a nice neat model and a way of making money, but you know, you guys are coming up with ideas all the time and they’re very broad-ranging. So, how do you decide which ones, you know, you can make money out of?

Jim: I mean, the purist answer to that is, the ones you’re most excited about. Erm, and try them all and get ready to bail on the failures, you know. The one question I always get whenever I speak, the first question I really get is: “Jim, what is your most spectacular failure?”people always say, and my answer is always the same is that we’re working on it right now! (all laugh) Its going to be a beauty! Erm, you know, we… Ideas tend to take the path of least resistance and frequently that path is being talked to death. It’s very easy to have a good idea and then sleep on it and then the next day come up with a thousand reasons why you can’t do it. Er, in this day and age, where we have, at Coudal, we have the superstructure, we could pretty much sell anything in a couple of hours. We have built our own e-commerce background for, we own a brand called Jewelboxing, which sells custom DVD and CD packaging systems, we own Fieldnotes, which is a, er, series of memo book, cool memo book, designer’s sort of memo book, and various other things and so we can put an idea into play very quickly, and, erm, and just a little less quickly find out if it’s going to work. The key to the whole thing, though, is that, erm, when we started this idea of creating products and services, erm, as opposed to, erm, doing work for hire, we sort of looked at the things we had, what were our assets and what were, you know, what were the things that we had, and what we had was this site coudal.com which generates a lot of traffic and the site is strange. It is not, it is sort of a daily magazine of web design intellectuals, I guess, for like a better term. And, erm, many people don’t get it at all, but a lot of people do so we figured that those people must be like us, in some way. I mean, it’s, it’s impossible to think that they are people who are unlike us, who are coming to the site and a) understanding it, and b) coming back tomorrow. So, these people must be like us. So, if we make that leap of faith and we develop products that we want, there’s probably a lot of people like us out there and we don’t actually need 5% of the global notebook market to make a lot of money, you know, so, erm, the same goes with our ad network, The DECK ad network, which is tremendously successful because it targets web-designing creative professionals like us, so the idea is, if you’re true… The question is how do you decide which ones you do, and my answer is it’s the ones you’re most excited about. I think that the secret underneath that is, if you make something you’re excited about, somebody else is going to be… Somebody like you will be excited about it as well. So, erm, but not everything has to make money; a few things have to make money, we have mortgages, we have tuitions to pay, for our kids, you know and we’re not getting rich, but, you know, we’re pretty satisfied creatively and we have the freedom to do pretty much whatever we want, so…

Paul: I mean, I think a lot of people that will be listening to this show that may be a creative, um, are kind of creative, um, within an organisation that isn’t creative and you talked about the frustrations you experienced, you know, they’ve got to, kind of, justify to management and all the rest of it, that they need time to play and to experiment and to try new things. I mean, how, have you got any advice for those people about how they tackle that, you know, how they, they kind of demonstrate the need to be creative, if that makes sense.

Jim: This is, I’m going to come off like a smart-arse, but I think that the real advice to somebody who’s truly creative and in that situation is to quit.

Paul: Right, OK.

Jim: I mean, you’re never going to succeed in that environment; you may succeed, but you’re not going to be happy or fulfilled. But outside of that I realise that there is a wide range of things and I… But, I don’t have any advice, because I tried everything I could, within a corporate structure as a creative director of a large ad agency, erm, and it got to the point where we were doing work I wasn’t proud of for people I didn’t like, and, you know, no amount of money can make that feel better; like, you work for a month on a project and, the revisions and the bullshit just steals your soul and by the time you’re done with it, you don’t even want to show it to anybody, like, there’s no amount of money that can make that feel better as a creative. So, so, you know, I think, you know, we all have to make our bargains, but I’ll say one other thing, Paul, is that I know a lot, through this whole, we’ve talked about this moving from work for hire into a more, what Zeldman calls sort of a design entrepreneur, sort of, er, piece. We’ve talked about it a lot in public so we’ve got a lot of feedback and I’ve spoken about it on a number of occasions, so I’ve met a lot of people who are sort of in the same place and there are a lot of people who are in the same place.

Marcus: We are.

Jim: Who are creative firms, what you’re doing for other people. The guys at Threadless are good friends of mine, you know, like all these people who have taken the skills that they used to use on behalf of clients and put them to work, their craft, on behalf of themselves, and every one of them, without exception – I will include you in this and I’ve never even asked you this question. Every single one of them says exactly the same thing about the process and they almost always say it in exactly the same words.

Paul: OK.

Jim: And what they say is: “I should have done this sooner”.

Paul: Yeah, totally.

Jim: So, my unanimity and this response continues with Paul, who agrees with the whole thing, but sometimes you know that first leap is kind of difficult. I would say that if you don’t have kids and you don’t have a mortgage, you better get on it.

Paul: Yeah.

Jim: After you have kids and a mortgage you got to make other decisions but, you know, we did it when we had kids and mortgages.

Marcus: So have we. It was your chat with Brendan Dawes at the 2007 Southby.

Jim: The ‘Short Attention Span Theatre’?

Marcus: Yeah, but you were talking about The Deck and various products and it was kind of, I was sat watching it, not with you, you were in another talk…

Jim: You were in another talk? What the hell!

Paul: I know, it’s disgraceful, I’m ashamed, I’m sorry.

Jim: That was a funny day because that was like Twitter was just new and so like people were twittering that, because Brendan Dawes is such a great speaker, he’s so funny and so they were twittering that: “oh, you got to come and see Coudal and Dawes”, and so we encouraged that so we’re like, so everybody tell people in the other rooms to come over here and we’ll give them a book and so people started doing it and then people started coming in and I’m like: “oh, my God, I feel so bad for the people next door”, you know, so it was really an interesting kind of a…

Paul: Social experiment.

Jim: It’s like live social reviews. Anyway, go ahead.

Marcus: It was great, I mean, basically what it did, Chris and I – another partner and I in our firm – we basically walked out of that speech and said: “we’re doing this wrong”. We were just thankful that clients wanted to work with us at that time and more and more clients were working, but it was kind of like we got this huge team of very creative, very talented people, let’s do something ourselves and ever since that day, I mean, we haven’t been as successful as, as successful in doing that as you have, but I think you put the nail, you hit the nail on the head…

Jim: Well, it takes time, I mean, we didn’t just flip the switch, I mean we went from 75% client work, 25% our own work and then eventually we got to 50%; I remember, I remember that month when I was doing month-end numbers and I saw that on gross revenue we had made more money from our own than we had made from client teams for the first time, I remember that being a significant moment for us as well.

Marcus: Time for a drink.

Jim: So, you know, um, that’s interesting, you know Brendan’s doing the same thing.

Marcus: Yeah, I know, I keep up with him on Twitter, but it was the fact that you said you can do things quickly and we’re always, we get these great ideas and then it’s like that’s going to take 3 months, or that’s going to take 6 months.

Paul: We faff around a lot.

Marcus: And client work gets in the way.

Jim: We share space in Chicago, in a big loft space, with 37 Signals.

Paul: Oh, I didn’t know that.

Jim: And they are, they’re rapid to the, to a fault, where their ideas, if they have a good idea, let’s whack it together and put it out there and then, you know, let’s launch the ship and then we can turn it once it’s moving, but we can’t turn it if it’s still up here in dry-dock, you know, which is an interesting thought, so you know, and it’s… The thing is when we’ve worked for clients, the problem with exclusively client work is that you have to feed the beast, so if you get good at it, you’re screwed (all laugh), because you get more work.

Paul: That’s exactly what we’re finding.

Jim: And then you’ve got a bigger payroll and overheads, so now you’ve got to take more work and eventually you’ve got to take a project that you might not take that…

Marcus: We’re screwed, Paul.

Paul: Yeah, we are, we need to do something.

Marcus: We keep hiring more people.

Paul: This is turning into a therapy session for us.

Marcus: I told you that.

Jim: How do you feel about that, Paul?
(all laugh)

Jim: You know, generally the thing is this, the opposite it true, because the best thing that ever happened to us is that our client business went to hell, through no fault of our own.

Paul: Right.

Jim: Right after September 11th, you know, a couple of clients cut budgets and all of a sudden, nothing will get your attention faster than not having the money in the bank on Wednesday to make payroll on Friday, so…

Paul: Which is often the way with this whole, you know, leave if you’re somewhere where you’re not happy and set up by yourself. Often you need that push.

Marcus: It happened with us, yeah.

Paul: I mean we worked for a dot-com and that went under, so it pushed us into doing something ourselves. I mean that’s interesting, that… When you, when you left the big agency, and you set up by yourself, was it just you or did you set up with other people?

Jim: One other fellow.

Paul: Right.

Jim: And one accountant.

Paul: Because that’s a lot of problem, there are a lot of freelancers out there, that are working in isolation, and that’s quite hard as well, from a creative point of view to, you know.

Jim: Very difficult.

Paul: I mean, where, where do you look for inspiration? You talked in your talk about looking to the past, which I thought was very interesting, but what kind of, where do your ideas come from?

Marcus: That’s a fair question.

Paul: That’s a really unfair question, I’m sorry.

Jim: Erm, I think they come from Dublin, no I don’t know. Let me take the two parts one at a time.

Paul: Yeah, I’m sorry it’s a messy question.

Jim: The first thing about working alone, erm, we are not a distributed company, unlike a lot of companies, we actually, we’ve tried some of it and been unsatisfied with the results. We actually all get together, we all get together in the same space and then don’t talk to each other (all laugh).

Paul: But at least you’re together.

Jim: But there is some advantage in adult conversation, there is advantage in: “hey, how about this?”There is: “can you look at this and see what you think?”or “do you have a headline for that?”You know, there’s some advantage in, sort of, serendipitous conversation, there’s advantage in going to the tavern and having some beer and blue-skying, you know.

Marcus: Boardroom B.

Jim: Yeah, conference room B. Er, conference room D, whatever, whichever conference room it is. So I find it difficult; now, I’m particularly good at working alone as an individual.

Paul: Right.

Jim: But as a firm, maybe we’re not so good at it. So, you know, I need help because I’m like Brendan, I’m a great starter but not such a good finisher.

Paul: Yeah, I’m the same.

Jim: So I need people to sort of clean up after me and make sure things get done. I’m OK with it.

Paul: It’s so nice to hear someone else say that. It’s OK that I’m like that, Marcus.

Marcus: Well, I’m kind of not far from it, to be honest, but Chris and the rest of the guys…

Paul: We’ve got a whole company that exists purely to pick up our rubbish.

Jim: And they just roll their eyes, like: “there’s another idea from those guys, like that’s going to happen”. Well, that’s the thing, we have this thing, maybe I talked about it in the, Brendan talked about this thing: ‘The Book’ – we’ve had this thing for a long time which is this repository of un-, unrequited love, of ideas that we never did. Um, and we’re getting so good at it that we know immediately when an idea is for The Book; it doesn’t stop us from blue-skying about it, say OK, in fact sometimes we say: “here’s one for The Book”. We know immediately that, you know, everybody knows immediately. We have this other, we used to have this thing, we haven’t been doing it lately. We have this other thing is that when we’re brainstorming about something, it helps if, um, you, er, talk about potential taglines and headlines, while you’re brainstorming an idea, but you don’t want to get the conversation caught up in the specifics of the headline or tagline that you’re suggesting. So, we used to have this thing where, if you keep your hand over your head when you are talking, it means: “like this, but not this”. (Paul & Marcus laugh) Try that sometime in one of your creative meetings, seriously. “I want this to be, sort of, you know”, Tim is holding his hand on his head, sort of thing. Erm, collectively ideas come from a variety of different interests, I think, and obsessions. I mean, it wouldn’t be too difficult to go through the archives of all the links we’ve posted at Coudal and figure out that we, you know, you could build a Coudal robot pretty easily that is a Stanley Kubrik freak, who is into Swiss design from the mid-part of the century, who is a James Joyce and a, er, Terence Malik fan, you know; it would be pretty easy to see Bob Dylan, you’d be able to see the sort of influences in some places. And, erm, I think to have a lot of different skillsets together, like Steve in our office is a film, primarily, he writes some copy and does a lot of things, but primarily he’s a shooter and an editor and a creative guy and I don’t do either of those things, you know, and, erm, Brian is a print guy, I mean everybody does everything at Coudal but we have like a bunch of different skills and so i guess that’s it, I don’t know.

Paul: Yeah, that’s good.

Jim: I probably didn’t answer anything.

Paul: Well, I think the trouble is with a question is that it’s, you know, to some extent it’s different for every person, you know.

Jim: Different for every day.

Paul: Yeah, that too, yeah. So, you know, that’s understandable.

Marcus: I thought you were going to go off into the into the equation of, I don’t know, maybe you covered that in your talk? The er, what was that…

Jim: The ‘General Theory of Creative Relativity’; we don’t have enough time for that.

Marcus: Let’s move on.

Paul: You could google it if you want to know about that.

Jim: Yes, actually that was the South-by talk for last year, and that, erm, was a pseudo-scientific to sort of come up with an equation to solve all creative problems, erm, and somebody said: “what is the answer?”and then someone from the audience yelled: “42”.

Paul: Well, obviously. It would be, wouldn’t it. Um, let’s just wrap up by talking about layer tennis, because you’re kind of quite well known for layer tennis and, just explain the basic principle for those that maybe haven’t heard about it before.

Jim: Layer tennis started 5/6 years ago as Photoshop tennis and it started in our office where we were, we just swapped a file back and forth continually adding layers and type and images to it and it was sort of a collaborative dance, and, erm, we just had the idea that maybe people like to watch it, so we put it online and invited designers that we know or, even better, designers that we admired but didn’t know, to participate and we had the brilliant, somebody had the idea to do it on Friday afternoons because no work gets done on Friday afternoons anyhow, and so we did it for a couple of years, it was tremendously popular, and then we left it on the back burner and went on to other things and in the meantime we had been working with Adobe on a couple of things and they were looking for an innovative way to promote their CS3, Creative Suite 3, and we said: “well, we have this Photoshop tennis thing, we could sort of restructure this in a way”, one of the big parts of CS3, a big, big step forward for me as a user was, the interoperability of the apps, it was the bringing together the Macromedia applications, as well as original Adobe applications into one place in which you could really move a file back and forth from vector to Photoshop to Flash, whatever. And so we proposed that we re-launch it as layer tennis to, not only that I didn’t want to have someone else’s trademark in my trademark, so we re-launched it as layer tennis and now I think we’re in the tenth week of this second season, we’ve had some tremendously talented designers from all over the world and basically what happens is there are 10 layers, somebody serves by serving up an image or image and type and, or illustration, or Flash animation, whatever it is, and the other designer takes the original source file and revises it in someway, either adds to it or changes and then he sends it back to the original guy and they trade the file back and forth over about 3 hours and each of their volleys gets posted live to the web. In addition, we invite a third person, frequently a blogger, or a writer, or a smart ass, to write play-by-play…

Marcus: That’s the bit I like!

Jim: To write play-by-play commentary. Quite frankly, that’s the hardest job (Paul: Yeah) on any Friday, to write play-by-play commentary; and then everybody watches and twitters about it and votes who they think the winner is and, you know, we’re doing 30-40 thousand people every Friday are tuning in to watch the match live, which is like, if you think of it, that’s a full football stadium, so we’ll have a couple more weeks of the regular season and then we have, we’re going to do some play-offs and hopefully there’ll be layers tennis season 3 next year, so (Paul: excellent) it’s interesting because we’ve tried to get out of the client business, right, and now we’ve got this sponsored web event which is sponsored by AARRGH! Adobe, a client. But, I think the difference is that it’s on our terms and they, it’s through good being in San Francisco, they couldn’t have been greater they’re great supporters of it and they take great ownership in it, so…

Paul: And the other thing about it is that, you know…

Jim: It’s relevant.

Paul: You did it anyway, you know, it was an idea you’d had previously that you then found somebody to help fund it and sponsor it.

Jim: And make it bigger and better, right? And it’s relevant to the product, like, you know, I’m not sure that Budweiser layer tennis would have the same relevance.

Paul: No, of course.

Marcus: Friday afternoon?

Jim: Maybe a little sloppier, but, you know, so, I think, it was just a lucky, you know, I mean, we’re pretty smart about things, but that was, kind of, a lucky break for both of us, I think that Adobe gets a lot of valuable exposure out of it that is not seen as “advertising-y”, you know, layer tennis exists on our site, it’s not on the Adobe site, it is seen as an independent, which it is, very like you said, it existed before the sponsorship and will exist after it and it was seen as an independent thing for the good of creativity on the web that Adobe is a good citizen for sponsoring and, you know, that’s a nice thing, maybe that’s the future, you know, that sort of which is actually…

Paul: Collaborative relationship

Jim: And that’s actually looking to the past as well, because think about the beginnings of television, or at least in the United States, the beginnings of television were a single company which sponsored a single hour drama, they would be the ‘Hallmark Hall of Fame’, where, here we have this lovely drama brought to you by Hallmark and they’re all about emotions and drama’s all about emotions, you know, and then somehow we got to the point now where we have an hour where we have 22 minutes of 30 second commercials, you know what I mean, like, you know, there’s, you know, so…

Marcus: It comes down to the fact that the content’s got to be good and it’s something that people want, and if it is good, then you’re going to get sponsored; it’s like sports, isn’t it? From that point of view.

Jim: It is a sport, I mean, in a way, the layer tennis thing is attractive, I think, because we do compete as designers all the time, like my firm will compete with your firm for a piece of business, but we never compete head-to-head (Paul: No) and never, ever, ever, compete head-to-head in public. So, it’s nerve-wracking, the designers are like: “Oh yeah, I’ll play”and then they get to see the site, “oh my God, 15 minutes”, you know, and the poor writer, like the designer at least volleys and then gets to breathe for 15 minutes while the other guy has the file, whereas the commentator has just got to be funny all the time, you know. I just did, for the first time ever I did commentary myself two weeks ago.

Paul: Ah, that’s why it’s showing up that you’ve got sudden sympathy for it.

Jim: And all the other commentators were writing me, like “ah, now you’ll see, asshole”(Paul & Marcus laugh), but I bailed out, I’m such a terrible typist I did it, I did audio.

Marcus: That’s alright

Jim: Yeah, I just talked about it, you know I got nervous that I wasn’t doing well enough, so I called my friend John Gruber and brought him into the booth, so everybody got mad at me, because I didn’t do it the way I was supposed to.

Paul: You cheated.

Jim: I did, but I have that option.

Paul: Hey, it’s your game.

Jim: Since I’m the commissioner.

Paul: Exactly, yeah.

Jim: The ‘Royal and Ancient Society of Layer Tennis’

Paul: So, what do you think people are getting out of it, you know, as they watch layer tennis? Is it just to waste a Friday afternoon (Jim: Yes) or do you think there’s a… I was going to, I was expecting some profound answer about the value of it.

Jim: No, I mean, I think it’s interesting and I think it’s entertaining and I think people like to see designers they know and with talent compete in a interesting situation, but it’s the almost perfect sport for procrastination.

Paul: Right (laughs)

Jim: Because nothing happens for 15 minutes and then something happens (Paul: Right), so you just leave it open in a tab and you can do your work and then bounce over and see it and, er…

Marcus: Is there not the kind of moment – sorry, Jim to interrupt – of kind of like: “I would never have thought of doing that?” and then you take that away to something you’re working on, so…

Jim: Yeah, we could…

Paul: Yeah, yeah. Let’s pretend, let’s pretend there’s value in it.

Jim: I can see, because you do so much client work, you’re getting good at rationalising things (all laugh).

Marcus: This is why we did this, and this is why it’s going to cost you.

Jim: This is my idea and this is why it’s great – it’s the Python skit about, you know,“I want you to help me sell all of this string that I’ve got left over”, “oh great, string, good for tying everything up, perfect for putting around your backyard”, he goes, the problem is that the string is all cut into 6 inch lengths: “just the right length!”

Paul: Well, that’s great, Jim, thank you very much for that. Where can people find out more about you and about layer tennis and stuff.

Jim: Coudal.com pretty much has links to everything; layertennis.com is where that is and I’ll make a pitch for our products, go to fieldnotesbrand.com and buy some notebooks and add a note that says you heard it on this and we’ll throw something extra in the package.

Paul: Excellent. Good stuff, thank you very much, Jim.

Jim: You’re welcome.

Marcus: Cheers!

Thanks goes to Simon Douglas for transcribing this interview

Back to top

We have this question from Iestyn:

I’ve done a quick search on your site and on Google but can’t seem to find what I’m looking for. I’ve been in the print industry for 9 years now and finally making the jump to web design with a friend of mine. What I’d like to know before getting our first client would be what questions should we ask the client about what his or her requirements are, as the client might take some stuff for granted or wouldn’t have thought of some things? And what questions are we likely to receive off our clients? To be able to have a questionnaire at hand to refer to and to go back to if the client changes his/her mind.

Users

One of the most important areas to consider when first discussing requirements is user focus. Does the client think in this way or are they looking for a site that meets internal expectations for design and content?
Who are the target audiences? ‘Everyone’ is an unacceptable answer. Get the client to prioritise their audiences.

Talk about your expectations of the roles of client and agency. You don’t want them to comment “I don’t like the red” rather you are looking for “I don’t think red will work for our users because…” Stress that it is their responsibility to highlight issues but yours to solve them.

When reviewing information architecture, ensure that content is grouped for users, and not based on internal structures and ensure that labelling is clear and descriptive.
This will underline the importance of the role of the user to the client and hopefully start them thinking in a way that will help you deliver a more usable site with fewer hiccups during the build.

Goals

It’s important to get to the bottom of why a client has a website and what they want it to do for them. What are their business goals and why?

For example, are they looking to increase sales via the site? The goal may simply be ‘we want more sales leads through the website’. But, more leads do not necessarily mean more sales. The quality of the lead is likely to be paramount. The design of the site should not simply encourage more leads, it should help to encourage more high quality leads.

Measurement

When you have a good understanding of the client’s business objectives, it is then a good idea to agree how best to measure them. You are not necessarily putting a personal guarantee next to each of them, but it will help you focus on the priorities for the site.

The good, the bad…

It’s very rare to be asked to build a brand new site these days. Chances are there will be a number of previous versions of the site that you are being asked to redesign. These old sites are goldmines of information.

Ask the client to list what works on their current site and why. It’s possible, for example, something that is popular is distracting users from achieving calls to action associated with the business objectives.

Ask the client what their top three issues are with existing site and ask them to prioritise them. Ask them what the most important content is on the site and ask them to prioritise it.

This information needs to be checked against user requirements and business goals. I’m heading off track here… back to questions.

Other sites

Even though I have said that clients need to focus on what their users want from their site, it is also important to cover competitor sites and sites that they admire. Let’s face it, these people have to live with the site every day – they do need to like it!

When reviewing competitor sites try to focus on areas that differentiate each site/company. Are there any common issues? For example, do all the competitor sites avoid plain English? Is this an issue for the user base (or not)? Could the client make it a differentiator for them?

USP

Make sure that you have a good understanding of why people ‘buy’ from your client? What makes them different?

Also, make sure that you are aware of any strategic goals and possible changes in directions that might be coming up in the future.

Nuts and bolts

General areas that you need to cover on top of all this could be:

• Branding/corporate identity – what, if any, are the constraints?
• Technological constraints
• Assets – such as content and imagery
• Timescales, milestones and project management
• Contracts
• Support

So what about you?

Most client concerns will focus on your reliability. Have you done this type of work before? Was it successful? Did you deliver on time and on budget?

There is a mutual trust issue at the start of any client/contractor relationship. We have found that the most effective method of calming any client fears is to actively encourage them to speak to your existing clients. If you’re really brave, let them look through your portfolio and let them select the client!

I guess this wasn’t really a checklist of questions but I hope it was useful.

Back to top