Web Design News 30/03/10

This week: Does the fold matter after all, 5 quick ways to improve your sites usability, how to blog when you’re not a writer and ensure your projects run smoothly.

Does the fold matter after all?

It is with much fear and trepidation that I include this story. Many website owners are obsessed with this mythical element called the fold (the point at which users start to scroll). As a result they often insist that content is crammed as near to the top of a page as possible.

Of course in reality there is no such thing as the fold. The point where scrolling begins varies massively depending on browser, screen resolution and plugins installed. Also, if you insist that too much content is above the fold, it will do more harm than good.

That is why generally speaking I have encouraged clients to ignore the fold. However, although users do scroll and so in a sense the fold is redundant, we do know they give more attention to content higher on the page.

Jakob Nielsen reinforced this fact in a recent post entitled Scrolling and Attention. He writes…

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

Eye Tracking image from Nielen's post

So in truth we should be looking to allocate important information as high on the page as possible. However, that does not mean cramming all information above the fold. Instead we should follow Nielsen’s advice…

The material that’s the most important for the users’ goals or your business goals should be above the fold.

This doesn’t mean the rest of your content will be ignored. As Nielsen goes on to say…

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Essentially the content above the fold has to draw the user in and encourage them to scroll.

5 quick and easy ways to improve your sites usability

So recently we had Steve Krug on the show talking about how we should all be user testing our websites more.

This is something that we all know but often fail to do. Part of the problem is that we are simply not in the habit of thinking about usability enough.

Well this week I stumbled across a post that shares 5 quick and easy ways of improving your website’s usability, while getting in the habit of thinking about usability.

All 5 suggestions are excellent. However, the one I particularly wanted to mention was a service called the 5 Second Test. As the post explains…

It allows you to create two different user tests by uploading a screenshot of your webpage. The first test is a memory test: users get 5 seconds to have a look at your screenshot and need to describe afterwards what they remembered. In the second test, the user can click on the screenshot for a period of 5 seconds and can give a descriptive text on each point.

The results are shown in a handy heatmap-like overview which can be downloaded for further analyses. It is free and you can share these tests with your twitter friends.

http://fivesecondtest.com/

What is so great about this service is that it provides an excellent way to establish if your design has the right visual hierarchy. Do users spot key elements and do they understand what those elements do?

Blogging when you’re not a writer

I have written a fair amount about the challenges of blogging (1)(2). However a recent article on pro blogger has identified another reason why so few corporate blogs succeeded… people are afraid of writing.

notepad

Image Source

Running a corporate blog can be an excellent way of increasing search engine visibility, attracting new customers and engaging existing users. However, many are put off because they feel they cannot write.

This post provides some excellent advice about on to start writing, and even how to blog without writing at all!

The author talks about how to structure posts, how to proof them and also looks at the use of imagery and video. It really is an encouraging place to start if you feel intimidated by blogging but want to try.

There is also some great additional advice in the comments too, so make sure you check them out as well.

Ensure your projects run smoothly

Simon Collison has written a superb series of posts on ensuring projects run smoothly.

There are nine posts in total covering…

  • Goal directed design
  • Collaboration
  • Audience
  • Methodologies
  • Roadmaps
  • Creativity
  • Conventions
  • Prototyping
  • Narrative

I have to confess I have yet to read all nine, but what I have read is absolutely spot on. I cannot recommend them highly enough.

My favourite so far has been the post on collaboration with your client. This is essentially what I was talking about this year at SXSW. He obviously takes a very similar approach. He writes…

I wholly believe that our processes should be inclusive, and that all members of a team can influence all aspects of the design and build of a product.

One of my most stringent rules as a creative director is that anyone, anywhere in the team can feel free to add value. They all have brains and common sense. Anyone, at any stage can contribute an idea, pose a question, throw a spanner in the works.

Amen to that. Best of all, he goes on to say he considers the client apart of that team…

I believe that the client team has an incredible amount to contribute. It’s easy to dismiss those new to the web who may be commissioning the project as “clueless technophobes”…

The danger is to dismiss the insight they can give you with regard to the organisation itself. The client can educate us about their sector, area, community or their place within it. Our job is to listen, discuss, and interpret this knowledge for a web audience.

client, designer and developer working together

I really could just quote from these posts all day, they are that good.

I know nine posts feels like a lot of information to read. However, I cannot recommend this series strongly enough. He should be packaging these as an ebook and selling it for an outrageous price.

199. Time to generalise

This week on Boagworld: The changing role of web designers, Colin Firth on content and Becky Jones talks about the changes at Google.

Play

Download this show.

Launch our podcast player

Having trouble listening to 199?

Housekeeping

Next week is our 200th show! Hard to believe isn’t it.

To celebrate this momentous achievement we are going to do a 12 hour live podcast marathon.

The show starts at 10AM on Friday the 12th February and finishes at 10PM that evening (times are UK based). We have too many guests to mention, but lets just say you will not be disappointed!

To listen to the live show go to boagworld.com/live/.

Obviously we will not be recording the whole show but hopefully will release edited highlights over the coming weeks.

Back to top

News

SVG is back?

There are a lot of articles this week about SVG. A List apart describes SVG as…

Scalable Vector Graphics (SVG) consist of circles, rectangles, and paths created in XML and combined into drawings on web pages. You can apply solid colors, gradients, and a sophisticated number of filters to SVG—although not all browsers implement all filter types. You can incorporate text, as well as images, and you can copy and clone your SVG as much as you want. Mostly, we use SVG for graphics programs, charts, illustrations, or animations.

In principle SVG has always sounded like an exciting tool. However it became a casualty of the browser wars, where support was patchy at best.

It also was somewhat surpassed by Adobe Flash, that became the standard for vector based graphics.

However, browser support has significantly improved and so we are seeing more interest in the technology again. This week alone there are articles on both A List Apart and Sitepoint.

Although it is interesting to read what SVG can do, I have to confess I do not understand the continued interest in this technology. I admit I am no expert on the subject, but it strikes me be that SVG is somewhat pointless for three reasons…

  • It’s still not supported natively in Internet Explorer. Although there are ways of overcoming this, it is a significant barrier to adoption.
  • The near universal adoption of flash makes this a far more obvious choice. Also, now that Adobe have opened up the platform many of the old arguments against flash are less relevant.
  • All modern browsers now support page zoom and so there is less need for a technology whose primary benefit is its ability to scale.

Perhaps I am missing the point and if so please correct me in the comments. However, the only ray of hope I see for SVG is Apples stubborn refusal to add flash support to devices like the iPod Touch, iPhone and iPad.

The best products sell themselves

When I saw the title of Andy Budd’s latest post ‘The Best Products Sell Themselves‘ I was ready to disagree with him.

I thought Andy was going to claim that if you have a great product you do not have to promote it. I thought he was going to argue that in the age of social networking, word of mouth recommendation was enough.

Instead I read a passionate article about providing a delightful experience that inspired and challenged me…

To sell products in a networked world, you need to differentiate yourself by more than just brand attributes and a check-list of features. You need to create remarkable products that rise above the competition and get noticed. Products that your users will rate, recommend and tweet about. In fact, what you need to create isn’t a product at all, but an experience.

He goes on to write…

Mediocrity just doesn’t cut it anymore. Instead, we need to create products that sell themselves. Does this mean that marketing no longer has a place in the networked society? Far from it. Marketers often understand customer needs and pain points better than anybody. In fact, this can sometimes be the cause of frustration in itself. I know plenty of people (myself included) who’ve been wooed by the notion of integrated phone, TV and Internet services only to find yourself dealing with completely separate business units and billing systems. The marketers were ahead of the curve. It’s the product that was lagging behind.

The idea of delighting your users by going above and beyond expectations is something that has been very much on my mind at the moment. It is something I am keen to introduce more into the work we produce at Headscape. Andy’s article could therefore not have been more timely.

I am reading a book at the moment called Made to Stick. In this book it gives the example of a departmental store that prides itself on delighting its customers. They give two examples in the book. The first was a member of staff who ironed the shirt for a customer going to a business meeting. The second was of clerk who gift wrapped items bought from a competitors store.

This is the kind of exceptional service website owners should be incorporating into their websites, and web designers should be providing their clients.

The principle of proximity in web design

I seem to be featuring a lot of posts on the basics of design recently. I think this is for several reasons…

  • Everybody involved in the web has to do some elements of design.
  • There are a lot of people listening to the show who are just starting out.
  • The website owners listening need to understand design principles if they are to work with a designer.

This week’s contribution to the cause is ‘The Principles of Proximity in Web Design.’ It is essentially a post on layout. It takes principles that have existed for a long time in print and applies them to the web.

It is a solid introduction to layout and tackles issues such as:

  • Whitespace
  • Visually grouping elements
  • Creating visual hierarchy
  • Improving scanability
  • The use of grids
  • Leading the user

The article concludes by summing up the benefits of understanding these principles…

Proper visual hierarchy by way of proximity helps users delve deeper into your website without worrying about where they’ve been or where they’re going.

They’ll always feel comfortable, and they’ll get to the most important sections of your website quickly and efficiently.

A worthwhile read for anybody new to design and a useful reminder to those of us who are old hands.

Google is changing and it will affect your website

Have to noticed that Google has been changing a lot recently? Probably not. You may have noticed the fade effect on the homepage. However, there are many more subtle and yet significant changes going on.

In an article for boagworld Becky Jones outlines some of these changes and how they may affect your website.

Changes include the introduction of…

  • Real time results
  • Breadcrumbs
  • Personalised search (even when not logged in)
  • Regions
  • Search features in the search bar
  • Anchor links in search results

What is significant about the list above is that they each have an influence on your rankings.

These changes really are turning the world of SEO upside down and having an influence on how websites are built.

However, what interests me the most is the new prominence of real time results. With posts from Twitter being placed at the top of listings, this makes social media a crucial component of search engine optimisation.

If you care about your website’s ranking (which we all do) then this is a must read.

Back to top

Feature: Website owners need more than web designers

Why is it many website owners are changing their web designer even when he or she has built them a great looking, usable website? What more are they looking for?

Read ‘Website owners need more than web designers’

Back to top

Colin James Firth: Content is King

If ‘content is king’ then the designer is like the King’s tailor – there to make the King look fabulous without taking any of the limelight for themselves.

Read ‘Content is king’

Back to top

171. Access

On this week’s show: Ryan and Paul talk to Robin Christopherson from Abilitynet about web accessibility and Dave shares Headscape’s experiences of moving to Google Apps.

Play

Download this show.

Launch our podcast player

News

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!
I found two quotes particularly telling…
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.
I am extremely skeptical about the benefits of viral marketing and believe that unless you are willing to put in a lot of hard work it rarely proves successful. The perception that viral marketing is some kind of magic bullet simply isn’t true.

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

Interview: Robin Christopherson on Accessibility

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

Review: Migrating to Google Apps

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

10 tips for efficient design

Being a good designer is not always enough to survive hard economic times. You need to be efficient too.

I don’t want this to be another ‘recession’ post. Sure, being more efficient in the way we work as web designers, makes us more competitive and keeps us employed. However, that is not the only reason we should endeavour to ‘work smarter’.

Working as efficiently as possible brings other benefits too…

  • More time – The faster you can turn around work, the more time you have for personal projects, family and friends. I don’t know about you but this is a major motivator for me.
  • Better promotion prospects – It takes more than good design skills to be promoted. You need to demonstrate that you are proactive and efficient in the way you work. Management will value you more if you generate a higher return.
  • Increased profit – If you are a freelancer it is all about maximising profit. The smarter you work, the more money you earn. It’s that simple.

So how can you be more efficient and begin to work smarter? Here are 10 tips that will get you started.

1. Use snippets

Coda Clips Palette

Let’s start with the obvious technical stuff. First make sure you have a library of code snippets that can be easily reused. These could include Eric Meyers CSS Reset or your own code for dealing with common HTML content such as news listings or pagination.

These libraries of snippets provide two benefits. First, they save a lot of typing. However more importantly, they ensure consistency across projects. Because you are using the same code for each project, all of the IDs, classes and structure remain consistent. This will save a lot of time when trying to remember why you built something in a certain way or how it works.

2. Use a Javascript library

In a similar vein to snippets I would highly recommend you adopt a Javascript library. Personally, I am a huge fan of jQuery because it is designed for those familiar with CSS. It is also amazingly easy to learn and very lightweight.

Using a library like jQuery has proved a massive time saver for me. It has allowed me to avoid endlessly battling with browser inconsistencies (at least in Javascript!) and avoid reinventing the wheel.

jQuery Homepage

jQuery (like most Javascript libraries) also supports a large number of plug-ins produced by third parties. These too can be a massive time saver. However, a word of warning – be careful using a plug-in you do not fully understand. The quality of plug-ins varies massively and if you discover a problem with one, you can waste many hours trying to fix it, if you do not understand how it works.

3. Configure your tools properly

Often in our haste to ‘get on with a project’ we fail to take the time to prepare properly. One example is in how our software is configured. We settle for working with tools ‘out of the box’ when some minor modifications could improve our efficiency.

Photoshop is a good example of this. It has all kinds of configuration options from keyboard shortcuts to palette layout. Take a few moments to set these up for your workflow, and you could save hours of unnecessary clicking over the long run.

Photoshop Palettes

Look at whatever tools you use to build websites and consider how their interface can be tweaked to your needs.

4. Have one system for tasks

For fear of reinforcing a stereotype, designers tend not to be the most organised people. Not only do we need to organise the structure of our software tools, we also need to do the same for our projects.

Fortunately, not all of us have to manage entire projects. However, we do all have tasks that need completing. How we organise those tasks can dramatically affect our efficiency.

A common mistake with task management is to have tasks spread across multiple places. Some tasks exist as emails, some in a todo list, still more in a notebook or on your mobile phone. The result is that things get overlooked.

In order to efficiently manage your tasks they need to be gathered into a single central location. For me that is a task organiser called Omnifocus, which syncs between my desktop and iPhone.

Omnifocus Screenshot

Tasks are still collected using multiple methods. However, once a day I transfer them to Omnifocus. If I attend a meeting and take physical notes that include tasks, I put the notebook into my in-tray until I can add the tasks to Omnifocus. If I receive an email with a task, I drag that email into Omnifocus. Ultimately everything ends up in Omnifocus.

By being this regimented about the way I organise tasks, I ensure nothing ever gets missed. I also avoid wasting time trying to track down the details of a task I have lost.

5. Embrace and manage admin

Inbox Zero - The original 43 folders series

Part of the problem we face is that answering email and organising tasks feels like a waste of time. Its not ‘proper work’. This is especially true when the pressure is on and deadlines are tight. We arrive at work in the morning and launch into our projects without checking our task list. The result is that we prioritise the wrong work and miss deadlines.

I begin each day by doing two things. I answer and file all my emails (I always achieve inbox zero). I then review all of my tasks and identify the ones that I wish to complete that day.

However, I don’t stop there. I have designated admin time. Once I am done my morning review I close my tasks and email until lunchtime. I focus solely on work and avoid admin entirely. This prevents email and other admin from interrupting the flow of my production work. It keeps me focused.

6. Distractions must die

TweetDeck

Of course it is not just email that distract us from work. There is instant messaging, Twitter, Facebook, RSS and… lets face it… the entire internet!

Don’t misunderstand me, some distraction is good. I have a very short attention span and so if I work on a single thing for more than about 30-40 minutes I start to ‘zone out’. However, there is a difference between ‘having a break from work’ and ‘getting distracted’.

Every 40 minutes or so I will take a 5 minute break and fire up Tweetdeck or Google reader. What I try to avoid is keeping these applications permanently open (although with twitter I have to confess I often fail).

By leaving an application open that can distract you with notifications (‘You have a new tweet’, ‘You have mail’, etc.), you risk it interrupting your flow of work. These constant micro-interruptions make it hard to ‘get into the zone’.

7. Keep a tidy environment

Distractions extend beyond your PC as well. Your work environment can also have an impact on efficiently.

If you work from home, endeavour to keep your personal and work life separate. Ensure you can close the door on the rest of the house and that the rest of the family know not to interrupt. Also if possible, try to keep your working area separate from the rest of the house. A garage or loft are ideal. I used to work in a small room directly between our lounge and kitchen. It was impossible to focus on anything with the constant noise from the two rooms.

My Desk

Pay attention to your desk as well. Keep it clean and uncluttered. This reduces distractions but also creates a better mental state conducive to work. Ensure your physical files and disks are easy to find. Knowing you took some notes that are in a notebook somewhere does not make them easy to find. This is especially true when your desk is three feet deep under paper work!

Personally I scan what notes and physical paper I can. What I have to keep in physical form, I file in a single filing cabinet organised alphabetically.

8. Avoid multi tasking

There is a myth that multi tasking makes you more efficient – it doesn’t! As designers we like to ‘flit’ from one thing to another. However, ultimately this is damaging to productivity. We need to learn to focus on a single task and follow it through to completion.

As I have already said, I find it hard to focus for any length of time. In order to help me focus I break my tasks down into smaller ones. That way I rarely have to do one thing for too long. Take this post for example. To write the whole thing from beginning to end would take a couple of hours. That is longer than I could focus for. So, in order to stop me getting distracted and jumping onto another task, I break it down. This post was made up of three tasks…

Task List: Create an outline, write initial draft, add imagery and edit

Once I complete one task, I switch to another project for a while. Once I have completed a task on that project I may switch back to this post.

Although this is a kind of multi-tasking, it is more structured and ensures I spend as long as my attention allows on each project. I do not simply drift between projects.

Depending on your character this might be too extremely. You may find it easy to concentrate for extended periods. However, if you struggle to concentrate, do not use multi-tasks as an excuse to be distracted.

9. Don’t do excessive hours

Another widely held myth of productivity is that the longer you work, the more you get done. After all, on face value this makes sense. However, I sincerely believe this is not true, especially if your job relies on you generating ideas and being creative.

Obviously we have to put the hours in, if we want to pay the bills. However, do not allow your boss or clients to force you into excessive hours. The occasional all-nighter is one thing, regular 12 hour days is another.

It is incredibly easy to get burnt out as a web designer. You are expected to continually be creative, as well as keeping up with one of the fasting moving sectors on the planet. Things are continually changing and evolving and it is a struggle to stay current.

Twitter post of somebody saying they are burnt out by work

Working long hours damages your capability to take on board new information and cripples creative thinking. Ensure you limit your hours and book regular holidays. Do not push yourself too hard or you will fail to deliver.

Finally, accept your natural cycle. When you are ‘in the zone’ work every hour God gives you. However, you must also accept that sometimes you need to just stop and rest. Don’t feel guilty about the days when you hardly do anything.

10. Communicate better

I would like to end this post with possibly the best efficiency tip of all – If you want to avoid wasting time, learn to communicate better.

So much of our time is wasted because of miscommunication and misunderstanding. How many times have you had to redo a design because you misunderstood the client or showed them work too late in the process.

Take the time to really engage with the client and understand their requirements. Make sure that you include them in the design process and show them work often and early.

Example Mood board

Finally, use tools such as gallery sites, mood boards and sketches to ensure everybody has the same understanding and is working towards the same goal.

By effectively communicating with clients, you can potentially save days on each project that would have been wasted on reworks and amendments.

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

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

10 ways to Battle Site Bureaucracy

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

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

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

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

1. Educate and inform

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

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

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

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

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

2. Hold stakeholder interviews

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

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

These one-to-one meetings provide two opportunities…

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

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

3. Avoid group committee meetings

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

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

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

4. Target your influencers

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

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

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

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

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

5. Use third party experts

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

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

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

6. Rely on evidence, not opinion

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

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

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

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

7. Focus on the user

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

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

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

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

What do you think?

Instead ask them…

How do you think users will respond to this?

This will keep them focused on the needs of users.

8. Control the feedback

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

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

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

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

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

9. Ask why

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

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

The question why is powerful for three reasons…

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

    10. Avoid confrontation

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

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

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

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

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

    Conclusions

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

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

    Our First AIR App

    With Adobe AIR now up to 100 million downloads, being utilised by big name players such as the BBC and increasingly invading our desktop Headscape decided to give it a go.

    This is a guest post by two of the Headscape developers – Craig Rowe and Dave McDermid

    Setting up

    Adobe Air is Flash + WebKit + SQL Lite on the desktop. As a Flash developer you can dive right in and use the Air extension for Flash to publish your beautifully crafted swfs and AS code into an installable cross platform desktop app. However, the flash projector has been around for a while doing similar things and we wanted to put our hard earned web development skills to productive use. So we went the HTML/Javascript route.

    The SDK is free for download but Aptana provides a rather neat eclipse based IDE in which to work. Handily the new project wizard allows you to import a multitude of Javascript libraries making it incredibly easy to get a new project up and running with your preferred initial setup (we went for jQuery).

    The Problem

    To make the exercise worth while we needed a real world problem to solve. Trivial examples usually do very little other than increase your ability to copy/paste example code and do your best fireworks night ‘ooo’ ‘ahh’ impression at it. Instead, we chose to add to our server admin experience…

    As loving, caring web developers we actively monitor all our servers, and most of our live websites. For a while this was a DOS script, this was then migrated to a Bash script on a Cron job. It worked great, but required a computer science degree to maintain. So here was our problem: we needed a pretty, maintainable and reliable app to monitor websites. All it had to do was let us know when one disappears or throws a nasty error.

    Download and try our site watcher AIR application

    The Journey

    Step 1: The wireframe

    Paper Wireframe

    A new Adobe AIR project in Aptana comes with an html file named after your application which acts as your main program window. Creating a basic layout with a few buttons, titles etc can be done in a snap. The html, css and javascript are dealt with in exactly the same way as if intended to be deployed as a website (with no browser compatibility worries as we are only targeting the Adobe AIR WebKit rendering engine).

    Step 2: The magic

    The wireframe identified the main viewer as comprising of an unordered list of sites, each with their current status and edit/check/remove links. This list needed to be persisted, but editable by the user.

    If this was a website we may be looking to server side scripting and a database of some nature. However, we had only jQuery and the air libraries. Although SQL Lite was an option we decided it was an over complication for what is a relatively simple, first AIR app. So, knowing that we could use jQuery to manipulate a DOM and the air libraries to save and open local files we opted for XML as a data source.

    <?xml version="1.0" encoding="utf-8"?>
    <sites>
    <site address="http://www.headscape.co.uk/" status="200" frequency="30">
    Headscape&#146;s website
    </site>
    ...
    </sites>
    

    Looking back into our application html file we can see that we are given a readLocalfile() function that returns the string contents. This can then be passed into a jQuery object and manipulated in the usual way.

    [The canny among you will notice that this readLocalfile() function is merely a few calls to the flash filesystem classes (using the AIR aliases). In fact at some points I directly call the flash library rather than using the AIR alias. There’s no functional difference, I’m just used to the flash namespaces]

    With this ability added to the jquery ajax capabilities the application flow could be easily envisaged as follows:

    • On DOM Ready read the local xml file
    • For each site element in the xml create an LI element with the appropriate display and action elements
    • Fire off a jquery ajax call for each site
    • Use the response code to formulate a class for the LI to change its display
    • Fire off any notifications if the response code has changed i.e. e-mail, notification window, twitter post
    • Set a timeout before checking again
    • On window close parse the unordered list back into xml and write it to the persistent file

    The Stumbling Blocks

    Viewing the source of an installed AIR app can be done by nipping into program files (or Applications for the MACs amongst us) and looking in the application name directory. Here you will see the html, css and javascript files that make up the app (so we can continue to learn from others deployments just as we would with a website).

    A brief look at the sitewatcher source and the flow described above becomes immediately clear. ‘Sitewatcher.html’ is our main form and it includes script.js as the main driver of the application with the #sites ul as the main containing element. The rest is GUI. ‘PopulateUIfromXML()’ directly completes steps 1-2 and fires off the 3-6 process via ‘CheckSite()’. However dispersed within this are the unusual non-front end website development bits, so we’ll look at those now:

    Acting as a System Tray App

    Many AIR apps, particularly those to do with notification (twitter, yammer etc) seem to want to run as system tray applications, we were no different.

    The process of doing so is relatively easy, and encapsulated in the appropriately named SetUpSysTray() function of script.js. Essentially what we need to achieve is an override of the minimise behaviour, the setting of an appropriate icon and the associated window toggling behaviour.

    Window.nativeWindow gives us access to the OS window holding our html window, and we can listen to events on it in much the same way. ‘nwMinimized’ is set to fire on display state changing and, if being minimized, instead docks (hides) the window and prevents the default behaviour.

    if(air.NativeApplication.supportsSystemTrayIcon)
    window.nativeWindow.addEventListener(runtime.flash.events.NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, nwMinimized);
    function nwMinimized(nativeWindowDisplayStateEvent) {
    if(nativeWindowDisplayStateEvent.afterDisplayState == runtime.flash.display.NativeWindowDisplayState.MINIMIZED) {
    nativeWindowDisplayStateEvent.preventDefault();
    Dock();
    }
    }
    function Dock() {
    window.nativeWindow.visible = !window.nativeWindow.visible;
    }
    

    This works fine but on its own will actually just hide the window from view/the taskbar leading the user to have to use task manager to close it. To ensure that an icon for your application sits in the system tray we need to set an icon for the nativeApplication (the mere presence of which will cause windows to display the app in the systray).

    Back to SetUpSysTray() and we’re using a content loader to load the icon graphic into memory, with an iconLoadComplete handler waiting to do the work:

    var iconLoader = new runtime.flash.display.Loader();
    iconLoader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, iconLoadComplete);
    iconLoader.load(new air.URLRequest("../icons/AIRApp_16.png"));
    function iconLoadComplete(event){
    if(air.NativeApplication.supportsSystemTrayIcon){
    air.NativeApplication.nativeApplication.icon.bitmaps = new Array(event.target.content.bitmapData);
    air.NativeApplication.nativeApplication.icon.tooltip = "SiteWatcher";
    air.NativeApplication.nativeApplication.icon.menu = new air.NativeMenu();
    // Create Menu Items
    var openCommand = new air.NativeMenuItem("Toggle");
    openCommand.addEventListener(air.Event.SELECT,function(event){
    Dock();
    });
    var sep = new air.NativeMenuItem("", true);
    var exitCommand = new air.NativeMenuItem("Exit");
    exitCommand.addEventListener(air.Event.SELECT,function(event){
    air.NativeApplication.nativeApplication.exit();
    });
    // Add Items to menu
    air.NativeApplication.nativeApplication.icon.menu.addItem(openCommand);
    air.NativeApplication.nativeApplication.icon.menu.addItem(sep);
    air.NativeApplication.nativeApplication.icon.menu.addItem(exitCommand);
    }
    }

    We simply set the native application icon to be the bitmap data before finalising the sys tray setup by creating a menu to appear on click.

    Note for MACs: The minimised event listener is not applied if the system does not support system tray icons. This is to avoid confusion on MACs where a minimise goes to the MAC dock anyway.

    Notification Windows

    So the app can now run in the system tray and use jQuery to check the sites listed in an XML file at regular intervals. However we need a process of notification. The App could be running on an actively used machine in which case we want messenger style pop-ups. Or it could be running on a separate machine/server from where we want it to send e-mail/other notifications.

    In the case of window notifications we took a short cut and used some example code from Adobe Developer Center. This is encapsulated within the DisplayManager.js and Message.js files. Display Manager acts as a queue, dequeuing and displaying on a timed basis if the user is present. This is an important requirement as you do not want a user missing a notification prompt merely because they were away from their desk for a while. It can be easily achieved via the USER_IDLE and USER_PRESENT air events – in this case stopping and starting the poller.

    ‘CheckSite()’ simply queues message HTML when the response code received is different from the previously stored code. When the queue poller is running (the user is present) the message is dequeued and displayed via Message.js.

    At this point it is worth remembering that notification windows are no different to any other native window. It’s just a name we’re giving to the way we are using native windows. They therefore have their own events, contents, position etc and this can be seen by the Message.js code where a new chromeless, transparent native window is created and its contents loaded from the message.html template.

    The display process is then as follows:

    • Message.js stores the message content in a variable on the new window
    • MessageScripts.js, then running once the message.html dom is ready, sets a listener on the HTML_BOUNDS_CHANGE event before setting the message variable content as the body – ultimately firing the bounds change event
    • This event is handled by setting the native window height to match before firing the layoutComplete event
    • On hearing this Message.js makes the window visible, finds an appropriate resting position (in relation to any other messages) and animates it in.
    E-mailing

    A key feature of any site watcher is to let us know when something bad happens. The combination of emails and an email-to-text service allows us to be notified the minute we spot trouble. This was easy enough in the bash script, using sendmail on the Mac. Not so straight forward for an AIR app. We can’t run sys commands and there is no built-in SMTP server. The solution is to use sockets in AIR. A little hardcore, but it keeps the solution nice and tight.

    Anyone who’s sent an email with telnet will know that the principle of SMTP is, as the acronym suggests, simple. Adobe gives us plenty of clues for opening sockets and listening for messages. All we had to do was make sure we sent the right info. There are some restrictions in opening sockets from scripts outside the application sandbox, but for our purposes it worked a treat. With a little trial and error we were firing off emails left right and centre.

    The icing on the cake was adding twitter support. With a one-line AJAX call in JQuery and a little config it was a no-brainer. This allows us to keep an online audit in the form of a private tweet stream. For people who check twitter more frequently than their email, it’s handy for notifications. If Twitter let us UK folk receive updates via SMS again then we can ditch email-to-text in favour of Twitter.

    Step 3: The makeover

    One of the nice benefits to working in the web-kit world is being able to use some CSS3 styling such as rounded corners. So we went to town. The more design that is CSS based and the less that is image based the better.

    JQuery UI allowed us to make the entire list sortable in a sweep of the mouse, and the prefs popup tabbed in a blink (suddenly there was heaps to customise!).

    The End

    Hopefully this post has given you an understanding of how quick and easy it really is to make a useful AIR application. We’ve shown how you can implement a system tray application that utilises notification popup windows and sends e-mails as well as uses local files as a data store. This is not intended as a best practice discussion. It was our first AIR app and developed in a very small amount of time as a proof of concept and so that we could share our experiences with you. We welcome any feedback.

    Download and try our site watcher AIR application

    A demonstration of graded browser support

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

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

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

    Starting with the basics – HTML

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

    Consultancy Clinic site viewed in Lynx

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

    The pretenders

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

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

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

    Consultancy Clinic Website viewed in IE 5

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

    Dealing with IE6 and above

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

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

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

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

    Consultancy Clinic website in IE 7

    A watermark image is highlighted in this screenshot

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

    The bells and whistles

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

    Consultancy Clinic Website in Firefox

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

    Consultancy Clinic website in Safari

    Conclusions

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

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

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

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

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

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

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

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

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

    Page sample from Marks book

    Win a free copy

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

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

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

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

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

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

    Current entries

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

    5 options when website budgets get slashed

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

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

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

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

    1. Realign rather than redesign

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

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

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

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

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

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

    My facebook profile

    2. Simplify

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

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

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

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

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

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

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

    Apple Homepage

    3. Prioritise and phase development

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

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

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

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

    Digg Technology Homepage

    4. Reuse and recycle

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

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

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

    opensourceCMS screenshot

    5. Move beyond the website

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

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

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

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

    Conclusions

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

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

    150. User Manipulation

    On this week’s show: Liz Danzico talks about user research. Paul explains how to create an effective call to action and we discover how one button cost $300 million in sales

    Download this show.

    Launch our podcast player

    News and events

    The $300 Million Button

    Our first news story is an incredibly tale from usability expert Jared Spool, which really shows the power of usability testing.

    In the post he writes about a client who had a fairly standard checkout process on his website. The process began with a login form:

    The form was simple. The fields were Email Address and Password. The buttons were Login and Register. The link was Forgot Password.

    It is the kind of form I have seen on many ecommerce websites. This feature, which had been designed to help repeat customers, created two distinct problems:

    • New users resented the idea of having to register. One user said: "I’m not here to enter into a relationship. I just want to buy something."
    • Repeat users rarely remembered their username or password. They wasted substantial time guessing, before eventually resorted to creating a new account. In fact after examining the database Jared discovered that 45% of all customers had multiple registrations. Some did go as far as clicking on the forgotten password link but of those only 25% went on to place an order.

    In the end the site was redesigned, allowing the user to continue without registering. Within a year this created a $300 million increase in sales.

    Of course $300 million is a meaningless figure in itself. It is the percentage increase that matters. In this case is was a 45% increase. That is a staggering number and one that really drives home the importance of testing with real users.

    Read the ‘$300 million button’

    The UK government and graded browser support

    A couple of weeks ago I wrote about the importance of graded browser support. In my post I explained how we should not limit our support to the browsers we test and how it is unrealistic to push for identical support across all browsers.

    This is an approach which has been adopted by the likes of Yahoo! and the BBC for some time, but which now also extends to public sector website in the UK.

    According to The Web Standards Project the rules surrounding browser testing on public sector websites have been changed to better reflect best practice in graded browser support.

    Changes include an emphasise on functionality over identical layout across browsers (paragraph 39):

    You should check that the content, functionality and display all work as intended. There may be minor differences in the way that the website is displayed. The intent is not that it should be pixel perfect across browsers, but that a user of a particular browser does not notice anything appears wrong.

    As well as support for progressive enhancement (paragraphs 17-18):

    You should follow a progressive enhancement approach to developing websites to ensure that content is accessible to the widest possible number of browsers.

    This is excellent news and certainly provides a great reference for UK designers and website owners looking to convince others of the importance of graded browser support.

    BBC Graded Browser Support Table

    Read the UK government guidance on browser testing

    50 Illustrator tutorials

    List of Illustrator tutorials

    From development to design now, and a list of 50 tutorials that help you get your head around Adobe Illustrator.

    The list is compiled by UK web designer Chris Spooner. He echoes my own experiences when he writes:

    Adobe Illustrator can be a little tricky to get your head around, particularly after getting used to the workflow as applications such as Photoshop. The difference between layer use and creating and editing shapes can be especially strange at first hand.

    I am a Photoshop man and I have found it very difficult to make the transition to a vector based world, so this list was particularly appealing to me.

    Its a great list that you will definitely want to check out, if like me you have never got to grips with Illustrator before.

    Read 50 illustrator tutorials every designer should see

    A new approach to PNG Support

    Finally today I would like to draw your attention to a new technique that has been developed by Drew Diller for using PNG transparency in IE6.

    Unlike previous techniques this one allows you to use PNGs as background images instead of just as IMG tags. This opens up a world of possibilities and overcomes one of the most annoying limitations of IE6.

    This minor miracle is achieved not by using AlphaImageLoader as has been done in the past, but with VML.

    Implementation seems fairly straightforward and involves adding a Javascript library to your page. Because this is for IE6 only you can embed the code within a conditional comment. This means other browsers will not even download it.

    Although I have yet to use this approach myself, I have high hopes that this will finally solve the IE6/PNG barrier.

    Download DD_belatedPNG now.

    Back to top

    Interview: Liz Danzico on User Research

    Paul: So joining me today for our little interview is Liz Danzico. Liz, why don’t you start off by introducing yourself a little bit. Telling us a bit about yourself and your background.

    Liz: Sure. Um, I am a user experience consultant, I am here in New York City, I have been developing web sites and user experiences online for about 12 years now. Um, I do a lot of work with Happy Cog Studios here in New York, with Jeffrey Zeldman and Jason Santa Maria. Um, I’m also chair of the new MFA interactions design program.

    Paul: Okay.

    Liz: At the School of Visual Arts in New York.

    Paul: Excellent. I mean, so, to say that you’re an expert in user experience would be a slight understatement then, Liz.

    Liz: Well I wouldn’t go that far.

    Paul: You’d be too modest, obviously, to say that. Okay, so we got Liz on the show, I met Liz when I went to Future of Web Design and we got talking. Um, she’s got some fascinating insights into the whole area of user research, and usability generally, so I thought let’s get her on the show and let’s maybe, you know, try and cover things from, from the very basic level, a kind of introduction to this concept of user research. Um, so, perhaps a good place to start, if you’re okay Liz, um, would be, how would you go about defining the area of user research? What would you include, what would you exclude from that?

    Liz: Right. So … user research, even today, we’ve been doing user research on the web since, uh, the very beginning, so it’s a very old concept but it’s still fairly controversial. So the basic concept is it tells you what really happens when real people interact with your product or service. So, there are no real rules about what it includes and what it doesn’t [inaudible]. You can basically speculate about what your users want, or you can find that out, um, you know? And uh, and the, uh, the latter is probably a more useful approach for you to take than speculation. But with either one, thinking about your audience is useful no matter what. And so, so there are no real rules, now um, when you disconnect thinking about your audience from your business objectives, and you start getting, you know, very excited about behaviors that they’re doing that are sort of disconnected from the real mission that you’re trying to sort of accomplish, then it becomes, um, a bit murky, and confusing. But thinking about your audience is, just in general, is an extremely useful approach.

    Paul: Okay. I mean one of the things that, that, um, I’ve heard said before by, particularly cynical clients I have to say, but I’ve heard it said before, you know, ultimately user research, and all of this kind of stuff feels in some ways like, um, just another way for web designers to suck a bit of extra money out of us, you know that fundamentally how, I know my audience already, is the kind of attitude that many web site owners have, so why do you see it as an important part of the process?

    Liz: Well uh, you know, as we’ve been seeing design flaws often translate to lost business opportunities, you know, usability is becoming more important than ever as the number of web sites and products is, you know, increasing more and more every day. So, we design these products and services, and we are at the same time users of them, but there’s no way that we can really tell what are users, um, might want. And the best way to, you know, usability research doesn’t cost a lot of money, so, the best way that you can help your clients kind of understand that you need to do usability research in some way is to let them know that usability research is important and it doesn’t need to, um, suck up a lot of time or money in the, in the process. So there’s a great fantastic book by Steve Krug, called Don’t Make Me Think, which I’m sure you’re probably well aware of.

    Paul: Uh huh.

    Liz: And in one of the chapters towards the end, he has a chapter called "Usability Research on a Shoestring", or it’s probably better titled, which talks of this approach of going out into the hallway and kind of grabbing people, and just sitting them down, and putting them in front of your product or service, and getting some feedback. So getting some feedback from people, no matter who they are, is better than getting none at all. And so, I think starting there with clients, instead of the, you know, $100,000 user research project that’s going to take you across 8 markets, you know, in the United States, the UK, and Asia, then, is going to be a much better approach than kind of intimidating them with the very extensive projects.

    Paul: Mmm, I mean, when it, the kind of one scenario that I’ve come across before, um, is where we’ve come across with clients that say "Well we’ve already done user research, we already know our audience ’cause we’ve got somebody in to do this or that." Is there a difference between user research that’s been done primarily with an offline audience, and those with, you know, when you’re interacting with people online? Is there a difference in the kind of results and information that you’re after, and even the techniques, maybe, that you use?

    Liz: So, they are probably, when they say that they’ve done user research, they’re probably talking about focus groups. I would venture to guess that when they talk about that they’re probably talking about either focus groups or surveys of some kind and those are not, well, I wouldn’t say that they are, those are bad things to do, but those are not the kinds of user research techniques that are going to give them feedback about their product’s usability. Those kinds of techniques are going to give them good information about, um, certain kinds of things but they are not going to give them information about whether or not people can use the product or service that they’re looking at. So, you want to find out exactly what kinds of user research they’ve conducted. If they say the words "focus group" then you know you want to move them towards something that is a one on one kind of interview. Focus groups tend to be conducted with groups of people, as the name might suggest, um, and when groups of people get together to talk about, you know, they put forth a question for these people, and when they, you know, groups of people get together to talk about the question they might influence one another in their answers, they’re typically aren’t talking about an interface, they’re typically talking about ideas, so you’re not getting good feedback, like in a one on one kind of scenario. So you want to sort of guide them to a more individual, one on one kind of experience. Surveys, on the other hand, are good, but they don’t get that kind of personal experience with a moderator, sitting with an individual, kind of looking at an interface in a kind of task-based scenario.

    Paul: Okay, yeah that makes a lot of sense. I mean, let’s then talk about some of the techniques that can be used to better understand individuals, or how those individuals will interact with your product. What different kind of techniques do you use? I mean, there’s the kind of very basic usability session, but do you do, or are there other things above and beyond that, that you do?

    Liz: Right. Well, the sort of big secret is that, there are names and there are certainly techniques, but the big secret is there are really no sort of techniques beyond knowing who your users are, kind of documenting what you’re seeing, and then kind of analyzing/prioritizing the results of what you see. So, you can, I’m gonna tell you a number of techniques that we can go through, but if those basic sort of constructs are there, then you’ve done sort of good user research. Now, that being said, the techniques that you can do are usability testing, usability testing traditionally has taken place in a user lab where a moderator is sitting with an individual looking at a screen, or a product, or a sketch of an interface and going through questions in sort of a task-based way, asking people "Show me how you would search for x" or "Show me how you would check out," or, you know, and seeing, measuring the success or failure of that kind of task. The clients are typically sitting behind a one-way, a one-way glass, or mirror, and observing these kinds of things. People have been not so thrilled about this technique recently, saying that it kind of, um, is not, it doesn’t produce natural reactions from users, but that is one kind of technique. There is, uh, kind of creating personas, and using personas, user personas which are an archetype of your site or product’s users, and getting everyone involved in activities around those personas, whether that be using those personas as your talking through features around, you know, a brainstorming session, and getting people to sort of role-play those personas. That’s another user research method. There are, there’s sort of the ethnography kind of take, where a lot of people have been doing kind of in-home interviews and observations recently. Ethnography, cultural anthropologists and people who have been doing traditional ethnography have been watching closely the design research that we’ve been doing recently, and wondering if we’ve been doing it right and so on, but ethnography, in that sort of observing users in their "natural environment", has been I would say a more successful way recently of watching people use products and services, um, so I would say that those three things, usability testing in a lab, sort of using personas and scenarios, and ethnography or kind of going out into the field and watching users, whether they’re in their homes or their offices, are the three kind of key ways to gather user research with users. The fourth way that I’ll mention, and we can talk about this in a little bit, is not with users directly, but it is certainly user research that’s available more and more now, and that is data on sort of analytics, which you can gather from Google Analytics, Shaun Inman’s Mint, these kinds of things. Watching site data and user behavior through site analytics is another form of user research that gives you, you know, some information, and you can watch these traffic patterns on your site. It doesn’t answer the question "Why?" but it does show you some evidence as to how users are behaving on your site.

    Paul: It’s quite interesting that you bring up eth, ethnography, whoa I can’t even speak today, because, that’s of interest to me, because that’s an area that we’re beginning to explore a little bit more, and have kind of discovered the same thing, that there’s a real value of going into you know, somebody’s home, seeing the environment that they access the internet on, you know, do they have kids under their feet? You know, where they access their PC, can they sit comfortably at it? All those kinds of things. Um, I guess it’s also an advantage you don’t have to hire an expensive usability lab and all of the rest of it. But I have to confess, I’m a little bit new at it, so talk me through maybe some of the things, you know, how does it differ from a usability test that you would do in a usability lab, other than that you’re in a different environment?

    Liz: Well, uh, it depends. It doesn’t have to differ at all — it depends on the goals of the test. I would say that you could construct a test that’s exactly like one that you’d conduct in a lab, it just happens in someone’s home or office, or in a different environment. But as you said, you get the more realistic interruptions, and that kind of thing, and are they going to be able to complete this task given the natural kind of occurrences of their day. And that, depending on what kind of test you are constructing, that’s either going to inform your results or not. If you are doing task-based testing, so I could maybe talk about the different kind of usability testing that you could do.

    Paul: Yeah, that’s good.

    Liz: Yeah so there are different ways that you could conduct a usability test. Um, traditionally there is task-based testing, where you set up pre-written questions, before you get to the test, that are based on the goals of the testing. So, if we were testing a photo site, we would test whether or not users could upload photos, could they task photos, you know, those kinds of things. So we would write those kinds of questions up beforehand, and then ask those questions during the test. Um, that’s one kind of test. You could do that in a lab, and you can do that same test in someone’s home. In a lab there would not be the children screaming, and the phone ringing, and that kind of thing, or, if someone say were uploading a photo, you would never be able to tell if sort of, timing out, would be an issue, or if anything with time or space or motion would be an issue. If those kinds of things are a goal of your test, then you might want to think about doing it in real time, in someone’s home environment. Another type of testing is something that, I’ll say it was first coined by Mark Hurst, who is a user experience consultant at Good Experience, I think he coined it, it’s called "Listening Labs". Listening labs are, I’ll call them experimental, but they’ve probably been going on long before I was aware of them, where people are designing usability tests in real time. So in other words, you go into the test with absolutely nothing written down, and you sit down with users, and based on your initial interview with them, you hear who they are, and after understanding a little bit about how they use photos in general, say, then you kind of write the questions on the fly, and then sort of develop a test around who that person is and their behavior, with your product, or product type.

    Paul: Which I guess, makes people more engaged with the test, because it’s about what they specifically interested in. Is that the idea?

    Liz: Exactly. So it’s a more natural way of doing the test. That’s the idea. That kind of thing you could do either way, and probably is even more rewarding if you’re doing it in someone’s natural environment. And then the third type of test is sort of a web, a web wide kind of test, where you have people just surf the internet, as it were, and uh, and just have them think out loud, and that kind of thing is also, I’ve found, more rewarding and fruitful in someone’s home environment, because they have their bookmarks there, and they have their post-it notes. Whereas you put them in a sort of artificial setting and they don’t have those things around them. So, if you, it kind of just depends on the type of testing that you’re doing. If you’re doing just the first kind I talked about, just task analysis and having people go through that kind of task-based testing, doing it in a traditional usability lab is great, you know, I mean you really do get the answers that you’re looking for, and it just depends on your goals.

    Paul: I mean, it’s interesting, going back to Steve Krug’s book that you mentioned, I mean he talks about, I guess his agenda in that book is to get people to do testing who perhaps aren’t previously, and so, you know, he really downplays the demographic of who it is that you test, and that it’s more important that you test than that you get the right people, you know and all of that kind of thing. Um, but when you’re going into somebody’s home, and interacting with them, I’m guessing it’s more important to get the right demographic? Is that right?

    Liz: Yeah, I mean one of the, um, I think it’s always important to, it’s always important to get the right demographic. Um, but, well I would say that there is a hierarchy of common mistakes around usability testing that kind of has a trickle down effect. You know, the number one mistake is not conducting any research at all, um, and conducting research on the wrong audience is kind of further down the list. So, you know, yeah if you’re doing research on the wrong audience, it’s not going to affect, whether you do it in a lab or you’re doing it at your desk, or at the water cooler, or at home, it’s going to affect your results and your analysis, you know, no matter where it takes place. So, you know, I think that the drawback is you are going to waste more time going out to that person’s time going out to that person’s time, so it’s going to be a drawback for you, but I don’t think that, it doesn’t matter really where it happens, because if you’re testing on the wrong audience, you’re testing on the wrong audience. Um, you’re probably going to get more information out of that experience if you’re in someone’s home, than if you’re not, so if you’re going to test on the wrong audience, do it in someone’s home, because you’re going to, it’s a richer experience, you’re going to get more information out of it than if you’re just testing in a lab.

    Paul: No that makes perfect sense, I kind of see that. No, it’s difficult, isn’t it? Because, uh, obviously finding the right demographic of people, and picking the right people to test on is tricky, you know, it’s a more difficult thing and it can be time consuming. So have you got any advice about that? What really matters here? You know, for example, if you’re designing a web site for an over-60s audience, you know, are you, do you want to concentrate on the age aspect of that? Or the technical literacy aspect of that? You know, is it okay to have somebody younger if they’re not as good with the internet, if your audience is, do you, I’m kind of not wording this very well, but you get the idea — what’s important when you’re trying to match demographics?

    Liz: Um, well, it’s very specific to your clients. Developing a, so, whenever you are trying to match demographics, you want to work with your clients to develop what’s called a screener, and a screener is a, I would say, whether you’re trying to develop a pretty rigorous recruiting demographic with a professional recruiter, to say, recruit 300 people for an extensive study, or whether you’re going to go out into the hallway and grab some people, or whether you’re going to recruit from something called Craigslist, which a lot of people are familiar with, um, which a lot of people do, I would say developing a screener which kind of outlines your demographic is a really good idea.

    Paul: And what kind of things would that include? Sorry I interrupted you.

    Liz: Yeah, what a screener is, it kind of goes through, it’s a questionnaire that outlines a number of questions that you would ask a potential recruit, that says, if this person can answer a particular question we should keep them in or out, so it’s actually a really good exercise to go through that allows you to kind of think through the type of demographic that you would have. So that doesn’t answer your question in any way.

    Paul: It’s very interesting, though. Can you give me an example? Sorry, I’m interested in this screener thing, cause I haven’t come across it before. Can you give me an example of the type of questions? I mean obviously they’re going to be specific to the individual client, all the rest of it, but what kind of questions?

    Liz: Um, what kind of questions? So, let’s see, would this person, so, let’s see, has this person, I mean typical questions could be around financial demographics, age demographics, you know the sort of typical things. But let me think of some more interesting things. So, is this person a full-time student? Has this person been fired from a job in the last 6 months? Has this person participated in usability research in the last 6 months? Those types of things, so if the person answers yes or no, then they’re not a good candidate. But there are other kinds of things you could put into that screener that would be more specific to the project.

    Paul: So could it include something like is this person aware of a certain brand, because you want to associate with that brand?

    Liz: Absolutely, so does this person drink Coca-Cola on a regular basis, yes or no? That kind of thing. But I’ve found that the screener, because the clients that you work with are often kind of speaking in those terms about their audience, the screener is a really good way to kind of help them understand how you’re recruiting audiences, and a good tool to kind of work together with them to narrow down who you want to be in the target audience for your testing, or your research in general. So, that said, how do you develop a good kind of set of participants for a research study for, say, a product for people over 60? Um, what’s most important, you know it depends on, and I know I hate to say that it depends, but you’re going to develop a goal for the testing, right? And the goal might be about usability, the goal might be about navigation, it might be about design, it might be about, it’s going to have, you have to first identify the goal, and depending on what that goal is, then you can identify the audience. So, the audience, you know the goal might have nothing to do with age, although the product has to do with age. So you can kind of strip away, you can pull apart the product from the goal of the testing a bit, and sort of just focus on the goal of the test. That’s why developing goals for user research is so critical, um, because often times you can separate those and therefore develop a better set of participants for that user research.

    Paul: Mmm, that’s really good. I think what we’ve done here, is, a lot of people that listen to this show probably have a basic understanding of user testing. Maybe they’ve done some basic user testing before, or maybe they’ve even written a persona before, but I think what we’ve done, or what you’ve done, is push people a little bit further to kind of consider it in a little bit more detail what they’re doing in order to kind of refine the results that they’re getting back, and that’s really, really great. I mean, if somebody has just kind of done the very basics, you know, they’ve grabbed some people, they’ve done some user testing, maybe in their own office in front of their own PC, and they’ve got a few people in, um maybe they’ve created a couple of personas, what’s the next step for them? What should they be pushing? Is it through this screener? Is that the number one thing they should be doing? Is the goals more important? Is getting a better demographic more important? What’s the kind of next step for them?

    Liz: Mmm, that’s a good question. I think that one of the most, well, doing the research is really key. Analyzing the research and connecting the research to the next iteration of a design is also key. We haven’t talked about that at all.

    Paul: No, we haven’t, we ought to.

    Liz: It’s often a grey area, um, you know there are lots of reports that are produced, you know, diagrams and things, but there’s a lot of kind of intuition that happens between sort of translating the research and putting that research, feeding that research back into the design. There are hunches, leaps of faith, um, you know kind of between that analysis and design. I mean there are clear cut recommendations that one can make, but then there are a lot of more grey areas. So I would say that, I still think, even though I mentioned we’ve been doing this kind of research for at least, you know, more than a decade online, and you know quite a long time offline, I think we still need to get better at the rigor at which we translate those recommendations and findings. So that’s one place I think we need to focus. Um, in terms of the actual research itself, uh, you know, there’s something, I think there are other sorts of techniques. I’m interested in these kinds of emergent, I would say emergent techniques like the listening labs, um, you know where the kinds of things that we’re looking at today with kind of mobile research, where people are, we need to be looking at how people are using our sites not just in the browser on their desktop but, you know, in the browser on their phone, and how their context is changing constantly and how we need to sort of look at that adaptation. So how do we develop tests that are more emergent and can be a bit more flexible, rIght? So I think there’s something interesting about that listening lab, where we kind of understand the person, and then develop the questions around a person and how they use a product, rather than having a pre-written set of questions. So, something that’s more emergent, I think that’s an area that’s interesting to kind of look at. Then, uh, ethnography, really understanding, goes right along with this sort of, emergent, as you said you’ve been getting more excited about ethnography as well, so, thinking more about kind of fine-tuning our approach to people’s own context, whether that be ethnography, going into their homes, their offices, you know, where people are using our products, whether that be on the street, in the hallway, wherever it is, but really understanding how to find people where they’re using our products and test them or do some research around that, I think that’s really exciting and a really interesting opportunity. Um so that, that’s the next step for us, uh, and I think that the way that people are designing tests and doing some usability testing now, is, you know, is good, I don’t think that there’s a big next step that we can all take together, but I think these are three areas that I think as a discipline that we’re going to see people moving forward together in.

    Paul: Excellent. Let’s finish off, then, with a kind of where people should go if, you know, they’ve been excited by this interview, they want to learn a little bit more, um, about user research and user testing. You’ve mentioned Steve Krug’s book. What other resources are out there that people should be looking towards?

    Liz: Well, let’s see. You know, I was thinking about, I was thinking about that and there are physical places that people can go, but they’re all in San Francisco in the United States, so that’s not going to help anyone. There is, you know, A List Apart has a User Science topic that often publishes user research related methods-like articles, there’s always BoxesandArrows.com which publishes user research related topics, um, Adaptive Path, which is a user research consultancy, or at least one aspect of what they do, they have published a number of articles but they also do events. A lot of events are in the United States right now, but they may have international events as well. But they do kind of give away a lot of their content. Um, and then last but not least, there’s a new-ish publisher called Rosenfeld Media, and the books that Rosenfeld Media publishes are about methods in user experience and, one recently in web form design, was about the usability of web form design by Luke Wroblewski (called Web Form Design: Filling in the Blanks).

    Paul: Yeah, I saw that. That looked very good, I have to say.

    Liz: Yeah, so that’s something to keep an eye on as well.

    Paul: Excellent. Thank you so much, Liz, that was absolutely superb. And I will be fascinated to get you back on the show in the future to talk more depth about some of these issues. Thank you very much for your time, Liz.

    Liz: My pleasure.

    Thanks goes to Jason Rhodes for transcribing this interview.

    Back to top

    Listeners feedback:

    Every website should have a call to action, a response you want users to complete. But how do you encourage users to act? How do you create an effective call to action. Read More

    Back to top

    Snape and Keith, separated at birth?

    Video: Introduction to WCAG 2

    I recently gave an internal presentation at Headscape about WCAG 2. A number of people expressed an interest in seeing it so I made a point to record it.

    At the end the presentation I references a stripped down version of the guidelines found here.

    I also refer to a quick reference guide to WCAG 2 that can be found here.

    Apologises

    Apologises for the poor audio quality of this video. Unfortunately the decision to record the presentation was made at the last minute and so we didn’t have a proper mic setup arranged. You can also tell it is not quite as slick as my normal presentations :)

    I would also like to apologise for the lack of transcript of this video. Again, it was not my initial intention to put this video online as this was an internal presentation containing my initial thoughts on WCAG 2. I am still learning a lot about the new guidelines and will publish a more considered article when I have a better understanding of the subject.

    Feedback

    On that subject, I would be interested to hear your feedback on the thoughts I present. Do you agree with my interpretation of the new guidelines? Have I misunderstood anything? Are there other elements I should have addressed? Your thoughts would be appreciated in the comments.

    Update: We now have a transcript!

    Thanks go to Anna Debenham who braved the horrendous audio to transcribe the presentation. If you cannot face the video we do at least now have a written version!

    Paul: Ok, this has worked out a little bit weird because the idea initially with this presentation was that it was really about bringing us up to speed with WCAG2 now that WCAG2 has been released. But I made the mistake of mentioning it online and several people said “ooh, can you record that?” so now it’s a little bit of both, a little bit of a presentation to you guys and a little bit of a presentation that will go on the web.

    Paul: So as you guys probably know, WCAG2 has now been released, and as accessibility is a big part of what we deliver and we talk a lot about accessibility, we need to be up to speed on it and we need to know what we’re doing. Obviously accessibility has become such a part of what we do day in and day out that we don’t necessarily think too much about it, it’s almost an intrinsic part of what we do, but with changes to WCAG2, or with the arrival of WCAG2, there have been differences, changes, things that have altered, so I want to make sure that everybody is up to speed with it. Feel free to butt in with questions, that’s absolutely fine.

    Audience: Will the video be able to see the screen?

    Paul: The video will be able to see the screen. Ok, so, WCAG2. Basically, WCAG1 came out in 1999 which is a good old time ago, in Internet terms that’s like forever, and there was a real need to make some changes and improve WCAG1. Let me just pop back and just explain.

    The Journey to WCAG2

    Paul: So, yeah, like I said, WCAG1 came out in 1999, it quickly dated as technology evolved, and some of the guidelines actually became harmful in a way. So you guys know that for example, we don’t always take note of what they say about Access Keys, we don’t always take note of what they say about “make sure you put text in an empty form field” and things like that. And WCAG1 was very much built with HTML in mind, and obviously the web is a lot broader than that and there are a lot more formats about. But unfortunately development of WCAG2 was very slow, and also fraught with controversy. I mean, famously with Joe Clarke who is an accessibility expert wrote on A List Apart “to hell with WCAG2″ because it basically had become a bit of a joke, because it was very generic; they were trying to write a set of guidelines that really made no effort to mention specific technology because they didn’t want it to date like WCAG1, but the result is it became unreadable and nobody could understand it.

    WCAG2 Reborn

    Paul: But, things did change. Major changes were made to the WCAG2 draft and things did improve dramatically. They really listened to the community, and the language in it now is much clearer. So what I want to do now is talk a little bit through what WCAG2 includes and what it doesn’t, and how we’re then going to go about implementing it and how it affects us.

    Principles

    Paul: Ok, so let’s look at the structure of WCAG2. Basically WCAG2 has 3 tiers to it that you need to know about. Tier number 1 is the idea of Principles. So this is kind of the most generic of the tiers, you know, it’s really kind of aimed at the kind of things you would tell a board of directors that doesn’t really understand anything technical, that doesn’t really understand accessibility at all. And there are 4 principles which are the foundations of web accessibility and these principles I’ll come onto a little bit later.

    Guidelines

    Paul: Underneath each of those principles are Guidelines. So, within each principle there are 3 or 4 guidelines or a number of guidelines that is different for each principle. But there are a total of 12 guidelines, and these are goals that you should be working towards in order to make your content more accessible to users.

    Success Criteria

    Paul: Under each guideline, there are Success Criteria. So now we’ve really hit the nitty-gritty, these are kind of specific, measurable goals that you’ve got to achieve. And this is how you judge whether your site is WCAG2 compliant, if you like. So, this is the really important level if that makes sense, but it’s organised within this hierarchy of guidelines and principles.

    Techniques

    Paul: Now, actually, there is kind of a 4th tier as well which is techniques. So you’re trying to, maybe as designers, you’re trying to conform to the Success Criteria, well there’s a whole load of different ways and different techniques that you can do that and you could read about those, and you could make up your own techniques if you wanted to, but there are some laid down that can help you get going.

    Working with WCAG2

    Paul: So those are the 3 levels that WCAG2 is built around. Now let’s dive into those a little bit. I had to think about how much detail I want to go into in this room. Obviously we don’t want to go into every technique that you could possibly apply and we don’t even want to go into necessarily every success criteria. That’s really for you guys to look through afterwards. What we are going to do is look at those guidelines and those principles, and hopefully help you to understand where WCAG2 stands over stuff.

    Perceivable

    Paul: Ok, so, the first… heh, totally illegible text, isn’t that great. Very accessible!

    Audience: (laughter)

    Paul: So the number 1 principle is Perceivable, and that’s 1 of your 4 principles that you’ve got here. And perceivable is basically talking about “information and user interface components must be presentable to users in ways that they can perceive”

    Audience: (laughter)

    Paul: Unlike that! (points to presentation)

    Audience: (laughter) Is the rest of the presentation like this?

    Paul: Yes.

    Audience: (more laughter)

    Paul: You actually don’t need to read this anyway which is very useful. So, Perceivable is basically about “can you see it?”, that is it as far as the principle is concerned, and the answer is “no you can’t”. But perceivable then breaks down into a series of guidelines. So, let’s have a look at what these guidelines are. So basically, perceivable is broken down into 4 guidelines. And if we talk through each of those it should give you an idea.

    Text Alternatives

    Paul: The first one is text alternatives. So this is stuff we already know. “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” So this really applies to things like video, audio, forms that you create, and interestingly CAPTCHA is particularly mentioned here. And that is a particular accessibility problem that hasn’t been particularly well solved I don’t think.

    Time Based Media

    Paul: The next way that Perceivable works itself out is in time-based media. What we’re talking about here is that you need to provide an alternative for anything that is time-based. So here we’re talking about captions for video, sign-language maybe, media alternatives, but it also applies to live and pre-recorded video. So if you’re streaming stuff, then you need to think about this as well as with stuff that’s pre-recorded. Now, it does take into account the difference between “crap, how are we going to make streaming video accessible?”. If you read into the guidelines it does give some good advice there. So that’s not quite as scary as it first sounds.

    Adaptable

    Paul: Anything that we produce needs to be adaptable. In other words, content can be presented in different ways. For example, a simpler layout maybe for people with cognitive disabilities for example. Really, this boils down to things like using semantic markup, meaningful order in your HTML so that if the CSS is stripped away it still makes sense in the order that it is presented, and not relying on colour and other sensory elements to convey information.

    Distinguishable

    Paul: And then finally it’s got to be distinguishable. So it’s about making it easier for users to see and hear content including separating foreground from background and that kind of stuff. So we’re talking here about contrast, colour, and control over things like audio and video, that kind of stuff. So that’s where we’re at with perceivable.

    Operable

    Paul: Let’s move onto the next principle which is Operable. So, Operable is about user interface components and navigation, and making them easy to use so that somebody can use them whatever disability they may have. So this again breaks down into 4 different guidelines, the most obvious of which is Keyboard Access. So everything that we produce has to be accessible via a keyboard. So, for example, the Flash video that we’re currently creating for the Wiltshire Farm Foods home page needs to be keyboard operated, alright? Which I bet it isn’t at the moment! And to be fair, it’s part of production, I’m sure they’d put that in at the end if I hadn’t reminded them. That existed under WCAG1, so there’s nothing different there. So everything needs to be keyboard accessible.

    Enough Time

    Paul: You also need to provide enough time for people to take in the information that they’re being presented with. So giving the ability to pause, stop and control time based material is really important as well.

    Seizures

    Paul: You’ve got to take into account seizures, some people can have seizures triggered by animation and that kind of thing, so there are various limits that the guidelines lay down about flashing objects and stuff like that.

    Navigable

    Paul: And then finally it’s got to be navigable. So this includes things like skipping content, having descriptive page titles, tab order, links that make sense out of context, lot’s of headings, that kind of stuff. Is this all making sense?

    Audience: Yes, apart from time-based media, I don’t understand that.

    Paul: Time-based media, we’re talking about video and audio. So let’s say you had… one of our podcasts. So, there are certain things we need to ensure. One is that it is operable, in other words, a user can pause the podcast if we get annoying, or they want time to take in the information that we’ve said, but the other thing is that we also need to provide an alternative way of them getting it which is why we provide the show notes that we do and the transcripts and stuff like that.

    Audience: Ok, well that kind of fits under Text Alternatives and giving it control so it’s under Operable… I just don’t get where it is under perceivable, as a perceivable thing, it has to be perceivable?

    Paul: Yeah, basically.

    Audience: Video, audio… all has to be perceivable then?

    Paul: Yes. Some of these principles and certainly some of the guidelines do overlap to some degree. But when you draw down to the Success Criteria level, of how you actually apply these things, then there are more specific techniques. I think what they did is create a load of success criteria, and then kind of chunked them together in meaningful groups, but sometimes they’re not so meaningful. But it is a vast improvement on WCAG1 as far as being able to understand it.

    Understandable

    Paul: Ok, talking of understanding it, our next one is Understandable. So this is the next one of our 4 top-level principles, so everything you produce has to be understandable. So what does that mean? Well that results in 3 guidelines. It has to be Readable, Predictable and has to be able to provide Input Assistance. So how does that work itself out in practice?

    Readable

    Paul: With Readable, we’re talking about making content readable, text content mainly. So this works out in things like setting the language in your HTML, you know, setting what the language is in the header, avoiding using jargon, finally we’ve got a decent reason to go back to clients and say, you know, “you can’t use that kind of language, nobody understands it!”. Also things like abbreviations need to be explained, and also reading level as well, and that’s something I really want to get through to a lot of our clients because a lot of our clients, especially the public sector clients that we have, have this attitude of “well of course, people that look at our site are of post-graduate degree people, and they have excellent reading level”, but that doesn’t take into account things like people that speak English as a 2nd language, who can be very intelligent but not particularly good at reading, also people with Dyslexia can be incredibly intelligent but not particularly good at reading. So reading level is an important aspect of it.

    Predictable

    Paul: For it to be understandable it also needs to be predictable. So with this we’re talking about things like consistent navigation, and no uninitiated changes. And this is a particularly important one in our world of AJAX and JavaScript and all this cool stuff that we’re doing where we can often trigger events without asking the user’s permission first. When I say “asking for permission” I mean they haven’t clicked on link or they’ve not initiated it in any way. Users need to initiate these actions… and no pop-up windows without them clicking first to trigger a pop-up and being aware of what’s going to happen. It’s all about making it understandable and making them aware of what’s going on.

    Input Assistance

    Paul: The last guideline under Understandable is Input Assistance. So this is going into the realms of when we do forms, how do we handle errors, what kind of feedback do we give to the user, what labels – are things clearly marked up as labels, are they descriptive of the fields and the forms and that kind of stuff. We’re also talking about help, what additional help are you provided in terms of tool tip and contextual help and anything else that you care to mention. So that’s Understandable, that’s what that principle is driving at.

    Robust

    Paul: The final principle is Robust. “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.” In other words, what we build has to work on everything.

    Audience: What about AJAX?

    Paul: I think that’s where we get into the realm of progressive enhancement, that it’s fine to use something like AJAX as long as, if the AJAX is taken away, it still operates. Or, you provide an alternative version, the guidelines do actually accept that you can do alternative versions of something. So Gmail is a good example of that, Gmail, it actually doesn’t work if AJAX is turned off but they do provide an HTML only version of it which does the same thing. I’m not a great fan of that because it’s twice as much stuff to maintain, and one version become out of date and all the rest of it. My preferred technique is to build it so it works normally, and then to layer on the JavaScript and AJAX on top of it to provide enhanced functionality, which is what we guys have been doing pretty much all along and we need to continue in doing that.

    Compatibility

    Paul: So that Robust principle actually only comes down to one guideline which is Compatible, so that’s about maximising compatibility with current… listen to the wording of this… Maximise compatibility with current and future user agents, so we also need to be looking forward as well and predicting the future which is always good. But that’s where it comes back to using solid, good code that is’nt reliant on lots of hacks in order to get it to work, and it goes back to the conversation that we’ve been having recently about browser testing, upgraded browser support and that kind of stuff as well. So Compatibility and Robustness is the last principle. The other thing I should have mentioned with Compatibility is this also includes things like validation, making sure that your code validates, and just generally other markup type stuff.

    What, no AAA, AA, A?

    Paul: Ok, another thing that might have occurred to you is AAA, AA, A.. Priority 1, 2 and 3. Priority 1, 2 and 3 are still there, there are still those levels of conformance, but I get a real sense from the tome of this document, and this is just my personal opinion, people watching this video who know a lot more about accessibility might jump all over me on this, but my sense is that they were playing down those 3 levels of conformance. To be honest, I think I’m pretty keen on that. I don’t think those levels of conformance have done a lot of good generally speaking, because I think it’s kind of developed a checkbox mentality amongst some of our clients “We must be AA compliant” or “We must be A compliant” and they’re not actually thinking about the needs of the users, they’re just ticking the boxes so they meet some quota that has been established somewhere. One of the things that’s quite interesting, and I’m not sure if it’s a change from WCAG1 or not, I couldn’t find the reference in WCAG1 but again someone will correct me no doubt, but conformance in WCAG2 seems to be on a page-by-page basis. So you’re no longer in a situation where you want to claim conformance so you’re claiming conformance for an entire site, but you’re rather conforming on a page-by-page basis. And this allows you to basically pick-and-mix the level of conformance you want to reach on any particular page which is much, much more sensible because there are some elements where you might be building a particularly complex application that really isn’t going to manage being AAA compliant, whereas the rest of the site is AAA, and this one page isn’t. So it’s giving you the ability to mix and match. In fact, in the guidelines it says “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content. In other words they’re saying it’s just not possible to be AAA in some situations, so don’t even try.

    Start With Basics

    Paul: So how does this relate to what we do on a day-to-day basis? Well, I think the language we use with our clients pretty much will remain consistent with how it was with WCAG1 which is that we need to start of by encouraging all our clients to start with the absolute basics. A lot of people are put off of accessibility because of the enormity of it, of all the things they’ve got to do. And even to be single A compliant there is quite a lot to do if you’ve got a site that has never been built to be single A compliant before. So I think our attitude has got to be that you work towards this over time, it is an ongoing process, you don’t need to do it all in one big go and that you need to start with the absolute basics, the quick wins, the stuff… you know, it’s the 80/20 rule, 80% of the problems that people are going to encounter from an accessibility point of view is caused by 20% of the accessibility issues if that makes sense. So we can solve a small number of issues but have a big impact on the site. So we’ll start off with some real basic stuff. Things like putting in “alt” and “title” attributes, providing alternatives to media, things like video and audio, being aware of JavaScript and the problems that JavaScript can create if it’s not implemented correctly, providing resizable text so that the user has the ability to either increase or decrease the text size on sites, to build everything to be standards based because that makes it so much easier in future.

    Audience: Aren’t we moving away from resizable text?

    Paul: We’re moving away from the resizable interface where the whole thing scales up and down, but there’s no reason why we can’t keep the text itself rescaleable. The layers should be able to push up and down. It has to be said with resizeable text, it is becoming less of an issue. The reason it’s becoming less of an issue is because browsers now have this zoom functionality built into them. But I don’t think we’re quite there yet to be able to drop resizable text entirely is my current feeling… I’ve got mixed feelings about it. But the obvious aim we’re going for here is to be single A compliant.

    Build Over Time

    Paul: So all of this is about building accessibility over time. Taking the guidelines by themselves is not going to be enough, and taking this checkbox mentality that I talked about earlier is not going to be enough. Once you’ve done these quick fixes, the next step on from that is to start consulting with your community. We need to encourage our clients to start talking to their users and find out what accessibility concerns they have. I also think, which I think we’re quite poor at, that we need to start testing with real users some of the accessibility stuff that we do, and the big problem there is persuading clients to pay for that. It’s really hard to get clients to pay for that kind of testing but I do think that it’s a really useful thing to do, and there are organisations out there that provide people you can get in to do testing, or that you can send sites out and they test with them. So, testing with real disabled users is really worthwhile. I think it’s about identifying major issues and dealing with those first, just pragmatic kind of prioritisation of issues, something you do with usability. With usability you look for the quick wins and the showstoppers and those you deal with first, exactly the same with accessibility. Now, what the major showstoppers are for those navigating the site need to be dealt with. And over time you build towards AA and AAA compliance if you can. But you only do that maybe on some pages. The big concern clients have and the reason they get into this check-box mentality of saying “we’ve got to be double A or we’ve got to conform to the WCAG guidelines” is fear, a fear of litigation. Especially our bigger clients, they’re really worried they’re going to get serious issues. But I think it’s important to stress with clients that litigation doesn’t happen overnight. You don’t suddenly have come through the post a writ saying “you need to come into court about this accessibility issue on your site”. It doesn’t happen like that. What happens in reality is the user complains. And if the user is repeatedly not heard and not listened to, and not responded to and not cared about and rejected, they get angry enough to maybe approach someone like the RNIB who then take it on into litigation for them. That’s the reality of what happens.

    Quick Response

    Paul: So as a result, you can diffuse that by responding to complaints quickly. So as you’re building up over time with the accessibility policy, if someone does complain, you need to write back to them and you need to deal with that issue straight up. Ok, so that’s how the client should be dealing with all this and there’s loads more I could say on this but I don’t want it to go on forever.

    Headscape’s Approach

    Paul: Let’s briefly talk about Headscape and our approach and how we should be approaching the subject of accessibility.

    Establish Approach With Client

    Paul: Well first of all I think everything that we do in our approach should be in conjunction with the client. I don’t think necessarily we talk enough to the client about accessibility. Some clients are just so bamboozled by it that they want us to take control, others want a say in it and what to be reassured that we’re doing something about it. So I think there’s a dialogue that we need to make sure happens. And if a client just wants us to take control of it, that’s great. If they want to be involved in the process, then that’s great to but we need to engage with the client and talk to the client more about it.

    Remain Pragmatic

    Paul: The second thing and I think this is really important is that we need to remain pragmatic in our approach to accessibility. Everything I’ve been talking about before like building up accessibility gradually, about doing the quick wins first and the show stoppers and that kind of stuff, that’s all pragmatic. I don’t want us on one hand to ignore accessibility, and it needs to be an integral part of everything we do, but on the other hand you can become extremist about it. We could spend hours and hours trying to get something to work in every conceivable user agent in the world and we can worry about every type of disability to the point where it becomes like a paralysis that stops us actually doing anything. So there’s a real balance that we need to strike here. And we need to strike that with our clients and working with our clients.

    Have a rationale

    Paul: Now I think it’s worth saying that if we decide not to comply with a guideline for whatever reason, we need to have a rationale for that. So we might not conform even to single A compliance in certain situations, although to be honest I can’t think of any off the top of my head, but if we do decide not to conform, we need a damned good reason why not. In other words, we need to have thought about it. And the other thing about accessibility is that we always think about it at the end of the project. It’s too late by then, we’ve built everything. So it really needs to become an intrinsic part of everything that we do.

    Responsibilities.

    Paul: Let’s talk about the idea of responsibility here and whose responsibility accessibility is within Headscape. Basically I’m going to say, everybody. One of the absolute great things about WCAG2 is because it’s got this 3 tiered approach, it is “accessible” to everybody. It’s understandable by everybody. So therefore it can be everybody’s responsibility to keep an eye on accessibility. And so this is how I think it should split down.

    Sales/Client – Principles

    Paul: Marcus and Chris and the Client should be worried about principles. The Operable, the Perceivable, those basic top-level principles. And you should be looking at anything that goes out from the company and going “well is that really operable?” So you can take a very top-level approach to it. And I think as you talk to clients as well you take this very top-level approach to it. That’s the level you guys should be working at.

    Guidelines – Project Managers

    Paul: Project managers, I think you need to be looking and understanding from the guidelines point of view. So you need to go in and read what those guidelines are, and you need to be sure that you understand them. And as you look at any work that goes out from the company, you need to be thinking “does it conform to those guidelines?” You don’t necessarily care about the nitty-gritty of how those are measured, or the nitty-gritty of how they’re achieved, but has that guideline been met? That’s the level you need to be working at.

    Success Criteria – Designers and Developers

    Paul: Then when it comes to the designers and developers, you need to get right into these guidelines. And you need to understand the success criteria and how to apply the guideline and how to make them work in practice.

    Check Everything

    Paul: So basically, we need to be checking everything that goes out the company for accessibility. And I have to say I’m making the mistake of saying this on camera, but I think we’ve got a bit lax recently when it comes to accessibility. We reached a point where it was becoming quite intuitive to us, and we were doing it quite naturally, and then as a result of that, we stopped checking because it was the natural process of what we were doing, and then bad habits start to seep in again. So WCAG2 is a great opportunity for us to say “ok, we need to start reviewing everything we’re doing as it goes out again”. So I’d really, really encourage you to check everything.

    Needs to be second nature

    Paul: basically we need to get to the point where this is second nature to us, so that we’re doing this intuitively again, but not to the point where we’re no longer checking.

    Audience: Clients often say “what’s the difference? If I just got for single A compliancy, what won’t my site be reaching?”

    Paul: I have to say that I think I would stop talking about double A, triple A and single A compliancy. I don’t think there’s really any value any more in talking about that to the clients.

    Audience: I think there is because having the page by page conformance is a really good thing and that we can now argue that yes, we can now make the majority of your site triple A compliant, but for a page full of videos, we can make it single A compliant.

    Paul: Ok

    Audience: Clients will continue to reference it in briefs. You can’t not talk about it.

    Audience: I think it’s actually quite a strong thing.

    Audience: is it a page by page compliance, or template by template compliance?

    Paul: I think it has to be page by page because the content that goes into the page, into the template, could invalidate it. This is why I think it’s something that should be downplayed. I accept the clients will still talk to us about it, but clients still talk to us about doing speculative design, it doesn’t mean we do it. I think there’s an education thing there whereby we need to move clients away from being obsessed by double A, single A compliance, and to start thinking about accessibility policies. What is there accessibility policy and what is it that they are trying to achieve on their site? Our base mark is going to be single A, it’s always single A, and I think it should continue to be single A.

    Audience: but if you don’t talk to them about it, you could argue that less caring clients would just say “well why would I do anything about it, bottom line?”

    Paul: Yeah, I said you shouldn’t talk about single A, double A, triple A, but that doesn’t mean you can’t talk to them about accessibility and the improvements that accessibility brings because for people that have got that sort of attitude you don’t want to talk about the disabled if they don’t care about the disabled, you talk about search engines, and that’s the best way to sell accessibility, by talking about search engine placement. That’s the reason you want to be accessible for people who have that kind of attitude. For those that care, and are talking about single A, double A and triple A, you need to say to them “well actually, conforming with any level, it’s great that you want to do accessibility, and certainly single A should be an absolute minimum, but we’d encourage you to start working up an accessibility policy and looking at your site as a whole and say could this area do more in your site, your accessibility policy should do real world testing with real users…” all kinds of things.

    Audience: So you think that we should be encouraging large organisations that have accessibility policies themselves that refer to double A, triple A, to try and persuade them to kind of move away from that?

    Paul: No, not necessarily, I wouldn’t go that far. Don’t get me wrong, I’m not saying that they’re a bad thing, I’m saying they’re not the be-all and end-all. And at the moment I feel like the vast majority of clients think they are the be-all and end-all. They’re obsessed with putting that little badge on the bottom of the page. And it’s not about putting badges on the page. The trouble with institutions that have these policies of single A, double A and triple A is that these policies are in place for the institution, not for the user. And that’s my problem with them. That’s why I think we should try to break that mentality with clients. And I accept that sometimes we’re going to lose, and that’s fine. Exactly the same goes when we were talking about browser support. I accept sometimes we’re going to lose that battle as well. But it doesn’t mean we shouldn’t try and fight it.

    Audience: I just wondered why WCAG2 still does it, because yes, you’re right basically, and accessibility requirements should be based on user requirements and not ticking boxes, so why is it still in there?

    Paul: I think it’s in there because… my impression… I hate talking about accessibility on camera! You remember what happened last time in the podcast? It was just a nightmare! I think the reason it’s still in is because some of those success criteria are hard to meet. Some of them are damn difficult. When you start talking about streaming video, you’ve got some difficult challenges there that need to be met. So I think as a result, what the W3C is saying there is that we accept that some of these things are difficult to do. And we accept that you’re not always going to be able to do them, so we’re going to make them triple A. But come on guys, some of this stuff is dead simple and we should be doing it, that’s single A. That’s my impression of the mentality behind it, and that’s a great mentality, but it’s when someone changes that to being guidelines, which is what they are, to being rules, really instilled by Moses and presented to the people. You know it’s not that and I think that’s an important differentiation to make.

    Where to Start

    Paul: I know what you guys are like, especially designers. Ok I’m making sweeping generalisations here. But, if you guys go along to the WCAG website and you look at the WCAG2 guidelines, it’s horrible! It’s intimidating and it’s scary and it goes on for pages. And there’s a lot of text around it.

    Audience: There’s no pictures? (laughter)

    Paul: There’s no pictures! The design isn’t even very good. So what I’ve done is I’ve taken that page, I’ve literally all I’ve done is I’ve stripped out the explanation text in front of it, and the waffle at the end of it, and I’ve left you with just the set of guidelines so it looks like a slightly less intimidating list. Not much but slightly. So that’s up at http://www.headscape.co.uk/WCAG2 so if you go to that, you can get just the actual list of criteria. There’s also, on the WCAG2 website, there’s a thing where you can go and you can say my site uses tables, my site uses video, my site has this and that, and you untick the ones that it doesn’t have and it narrows down the list of success criteria to only show you the ones that you need to care about. So you might want to check that one out as well. Ok, so that’s basically all I have to say, are there any other questions before we wrap up?

    Questions

    Audience: Clients are going to ask us the 1 minute elevator pitch. What’s the difference between WCAG2 and WCAG1? What would you highlight as differences?

    Paul: I think there’s a bigger acceptance of things in the world other than HTML, so things like Flash, PDFs, all that kind of stuff, there’s much more reference to that kind of thing. It’s much better written, much better organised. I think it’s more pragmatic. It’s a little bit more… I think it will last the test of time more. It’s hard to pin down exactly what I mean by that. There is actually a document out that talks about the specific differences between WCAG1 and WCAG2 if you wanted to get into that level of detail. And to be honest, I couldn’t tell you what that is yet because I haven’t looked at it in that much depth myself.

    Audience: I think you and I do need a couple of the more detailed stuff, to get the guidelines, just one or two examples basically. Something that’s new between WCAG1 and WCAG2, and also some of the differences between single A, double A and triple A. The streaming video is an excellent example.

    Paul: Just go along to http://www.headscape.co.uk/WCAG2 and you’ll be able to see those different levels.

    Audience: It seems like, an almost unwritten principle, or unwritten in your list of principles. It’s technology agnostic.

    Paul: WCAG2 started off as so technologically agnostic that it wasn’t understandable.

    Audience: WCAG1, the first line is all about “it must be W3C technologies”.

    Paul: Yeah, it will pretty much accommodate anything. You know, it talks in terms of audio and video. It doesn’t mention Flash for example specifically, at least I don’t think it does, but it refers to those kinds of things. It refers to documents that are not HTML. I’m saying this as much for the video as anything else, I’m still learning about it as well. So I think it’s going to be a learning process for a while for us to really get to grips with this, and truth be told we probably should have started a little sooner than this, but it’s not radically different from WCAG1. This is as much getting us back into the habit of thinking about accessibility as anything else really. Ok?

    Audience: 1 more question. Are they new Keynote animations?

    Paul: Yeah, they are new Keynote animations.

    149. White Hat

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

    Download this show.

    Launch our podcast player

    Housekeeping

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

    Web Design Introductory Training

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

    The two courses are…

    HTML and Web Standards for Beginners – 19th February

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

    Beginners CSS – 20th February

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

    For more information visit edgeofmyseat.com/training/

    Bamboo Juice

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

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

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

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

    Consultancy Competition

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

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

    Back to top

    News and events

    More on jQuery

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

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

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

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

    Getting started with HTML 5

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

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

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

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

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

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

    Web design trends for 2009

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

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

    The trends listed include…

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

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

    Your website can thrive in a recession

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

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

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

    He goes on to say:

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

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

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

    Back to top

    Feature: Becoming Number One On Google

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

    Back to top

    Listeners feedback:

    Customer testimonials – Are they worth it?

    Question from Dave Rupert –

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

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

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

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

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

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

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

    How do you make your site feel safe

    Kevin Dees asks an interesting question on the forum:

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

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

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

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

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

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

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

    However a few things have come to mind…

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

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

     

    145. Baby Jack

    On this week’s show Paul looks at how to communicate better with your users. Marcus examines ways to improve your contracts and Ryan has a baby (not actually on the show).

    Download this show.

    Launch our podcast player

    Watch the behind the scenes video

    Housekeeping

    Two pieces of housekeeping before we begin:

    • First, congratulations to Ryan Taylor our producer and Michelle on the birth of their first child. We want to send our love to them all and welcome Jack Taylor to the world!
    • Second, just a quick note to say we will be holding our live Christmas special on the 8th December at 2.30PM UK time. The show will be an open question and answer time so either send in your questions in advance or come along and join us in the chatroom. We will also be doing a feature on this years top Christmas gifts for geeks. You can vote for your suggestions over at UserVoice.

    News and events

    Google goes social

    The biggest and most controversial story of the week is the addition of SearchWiki to Google search results.

    SearchWiki is a way for you to customize search by re-ranking, deleting, adding, and commenting on search results. You can move the results you like to the top or add a new site. You can also write notes attached to a particular site and remove results that you don’t feel belong. These modifications will be shown to you every time you do the same search in the future.

    However, most controversially you can also share some of these changes with other users. This has led to fears of spamming and negative commenting as users attempt to manipulate the results.

    Personally, this feels like a storm in a tea cup. It is an interesting new feature but I really do not see it catching on in any significant way. Only the most extreme power users will bother using these features and the majority will never see the change.

    For example, even if website owners do attempt to manipulate users by spamming notes or adding negative comments about competitors, the vast majority will never see these notes. Users have to actively choose to view other users notes from a tiny link in the footer.

    I say let stupid website owners spam these comments. It will keep them busy doing something which ultimately will make no difference to the popularity of their site.

    Where this could be useful is when I can identify friends who I trust. Being able to see their notes or reordering of results would be of interest to me. Until then, this is non-starter.

    In browser web development tools

    In last week’s show we listed your top web development applications. Interestingly several of those applications were browser addons such as the web developer toolbar and Firebug.

    This week Smashing Magazine has reviewed 15 in-browser web development tools that offer a variety of debugging and coding features.

    The list ranges from the web known like FireBug to the more obscure like Fangs (for showing how a screen reader might read a page) and ColorZilla (for quickly listing all the colors on a particular web page).

    Other tools featured include:

    • YSlow – a Firefox extension that analyzes a Web page for front-end performance.
    • Fiddler – an Internet Explorer extension that analyzes and profiles a Web page’s HTTP traffic.
    • DebugBar – a debugging extension for the Internet Explorer.
    • Web Accessibility Toolbar – an extension for Internet Explorer and Opera that quickly evaluating and analyzing your Web content’s accessibility.

    If you are regularly coding this list is a must read.

    From tables to CSS and back again

    Kevin Yank, the co-author of Everything You Know About CSS is Wrong has written an excellent article on Think Vitamin telling us it is time to build websites using tables.

    Before you all start sending Kevin hate email I should point out he is referring to CSS tables.

    Let’s face it, the worst thing about CSS is its support for column based layout. Sure, it does a great job at absolute position but floats just make no sense! As Kevin writes…

    You couldn’t come up with a more convoluted way of expressing page layout if you tried!

    Fortunately with the imminent arrival of IE8 all major browsers will soon support CSS tables. This means any group of elements can be made to display like rows and columns within a table. Suddenly designing layout in CSS is as easy as using HTML tables.

    I know what you are thinking… ‘what about IE6 and 7?’ Kevin addresses this in his article. He suggests that because it is so easy to layout using CSS tables we will have the time to design in CSS tables for modern browsers and the fall back on floats for IE6 and 7. He goes on to suggest that perhaps it is worth simplifying your design slightly for these older browsers to further speed up the process. He believes (and I agree) that clients would agree to this if they understood the cost savings.

    Overall, I think this is a very exciting transition and one that will help bring across those hold out ‘table based designers’.

    Advice for long term success

    Our final news story today is some advice from the founder of Amazon. Jeff Bezos has done an interview with the ‘US News and World Report’ on how to run a successful business. The advice he shares is something that applies to all of us whether we are running a website or building a freelance career.

    From reading the article I took away three lessons…

    • Have a long term strategy – Whether in business or running a website, you need to look ahead. Too many of us are thinking about the short term. What feature should we implement next? Where is the next salary is going to come from? Jeff encourages us to look further and work towards long term and visionary objectives.
    • Do not be distracted – Jeff also encourages us not to be put off by others who do not ‘get’ your long term vision. Stick to your guns and keep going. It is easy to have your confidence knocked by the criticisms of others or problems you encounter along the way.
    • Take risks – I am a great believer in taking risks from time to time. A part of this is excepting failure. If you want to double the amount you succeed you must also double the number of times you fail. As Churchill once said Success is the ability to go from one failure to another with no loss of enthusiasm.

    Sure, the interview is not about web design and is written by a guy who can afford to think long term, ignore others and take risks. However, it is still good advice and something we need to take on board both as web designers and website owners.

    Back to top

    Feature: Successful communication

    We put a lot of time and attention into the content on our sites, but what about our other communications? We send out newsletters, post blogs, participate in forums. All of these reflect on our brand and the way we are perceived.

    In this week’s feature Paul examines how to improve our communications with users.

    Back to top

    Listeners feedback:

    Sign-off and payment

    We have this question from an anonymous listener:

    I have a designer’s contract in front of me and I am getting a ‘feeling’. The contract doesn’t discuss much in terms of scope; just really limits risk for the designer. Though I can understand the need, I raise an eyebrow to focusing more on ‘not getting burned’ than ‘providing a good design’ … so here is the big question. The designer wants 50% upfront and 50% on an arbitrary completion date or “prior to file relinquishment, or upload and/or assembly of website on clients web server.” My thought is I am not paying $X for a pdf mock-up … I am paying for a site redesign and would like to see it work live prior to getting signoff. (or payment) Inevitably, there is a trust issue; I believe we have both been burned in past client/ designer relationships and are treating each other cautiously. Is there an industry norm which could help the situation? My perspective is how it will look live, especially considering different browsers, am I off base as a client to see the design work live prior to payment?

    Ok, so picking this apart from the top:

    Firstly, having a contract is a good thing. Full stop. But, you don’t have to blindly agree to whatever is put in front of you. If you don’t like what you’re reading then amend and send it back. This may also mean that you want to get legal advice – I guess that depends on your confidence dealing with the legalese involved in most contract documentation.

    Contracts should be made up of two parts:

    1. the terms and conditions (the legal stuff) that should cover obligations, deliverables, rights, liability etc.
    2. the Schedule that should be a detailed description of the project – tasks, timescales, price, payment terms etc. It should also include detail on what the testing process is, what browsers/operating systems etc.

    Ideally risk should be limited for both parties. A good contract makes expectations clear for both sides and lays out what should happen if something goes wrong.

    Regarding payment terms, it is perfectly normal for a contractor to ask for a percentage of the total cost up front. But, it doesn’t necessarily have to be half up front, half on completion. We often spread invoicing over 4 or 5 different points over a project. This is good for our clients as it is an incentive for us to reach certain milestones along the way. One question I have here is – does this particular designer want payment literally on commencement? We provide 30 days for our clients to pay bills, so even though we may invoice on commencement, we will be a month into the project before we receive payment.

    Ok, more detail… the contractor wants final payment:

    • On an arbitrary completion date – you should not agree to this. Payment by a particular date is not acceptable as the work may not be completed and the delay may not be down to you.
    • Or “prior to file relinquishment” – this is not unheard of. Basically, they are saying ‘you pay us and you’ll get your stuff’. Which is fair enough as long as you (quite rightly point out) have witnessed the site operating correctly in a ‘live’ environment. I’ll come onto this shortly.
    • Or upload and/or assembly of website on clients web server – this is what you want I believe.

    A ‘live’ environment doesn’t necessarily have to mean your web server. We test all our web development work on our own development server prior to making it live and we ask our clients to sign-off on this environment prior to pushing live. We do, however, rarely invoice until the site is live because there are possible issues with the live environment that we may not have envisaged. Particularly, hosting platforms often need to be able to support certain technologies – if they don’t, you have a problem. If the designer is providing the hosting then that is unlikely to be an issue. It also gives them an option of taking your site down if you don’t pay. That way, they can happily make the site live prior to sending you the final invoice. Do they offer hosting?

    So, in conclusion, I would push for the final invoice to be on live and tested release of the website. I would also propose that payment is split into 3 points – on commencement, on design look and feel sign-off and finally, on live and tested release.

    Back to top

     

    A partnership of cooperation

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

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

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

    • Mutual respect
    • A defined relationship
    • A positive attitude

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

    Learn mutual respect

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

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

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

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

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

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

    Define the boundaries of the relationship

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

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

    Clients should be focusing on three things:

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

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

    Build a positive attitude

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

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

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

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

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

    Don't get blacklisted by Google

    There are so many SEO companies and so much advice about how to get ranked highly on Google. How can you tell the good from the bad?

    Jason from Toronto recently wrote to me with a questions about search engine optimisation:

    I am desperate to improve the search engine ranking of my company website but I am confused by the contradictory advice online. We have even considered hiring an SEO company, but aren’t sure who is reputable. The last thing we want is to be blacklisted. Do you have any advice which might help?

    It is true that Google comes down hard on sites who disregard their webmaster guidelines. Probably the highest profile example of this was when they effectively removed car manufacturer BMW from their search results for using doorway pages.

    With many search engine optimisation companies still using these ‘black hat’ techniques, it is important to be able to tell the good from the bad.

    Later we will look at some of the SEO techniques that can get you blacklisted but first lets examine ways to identify a less than reputable SEO company.

    Spotting the black hat operators

    Always be sceptical of any company that contacts you out of the blue. If you are going to hire an SEO company, ideally you should use a personal recommendation.

    Definitely beware of companies who guarantee a particular ranking. If a company promises that you will be ranked number one on Google, ask for more information. It is relatively easy to get a website ranked number one on Google for an obscure term. However it is much harder to get ranked for something that is useful from a marketing perspective.

    Also ask what happens if a company fails to live up to its guarantee? Is there any real value in their promise? The answer is probably not.

    Finally ask the SEO company to clearly explain the techniques they are intending to use. If they are evasive with their answers they should be avoided.

    If you do discover the techniques they are intending to implement, this will enable you to judge whether you are in danger of being blacklisted.

    Know their techniques

    Most search engines provided guidelines about unacceptable SEO techniques. Google in particular provide excellent documentation for website owners looking to improve their rankings. They provide advice on selecting an SEO provider and layout what it considers unacceptable techniques. These include:

    • Hidden text and links – Some SEO companies use hidden keywords and links that provide no value to the user, but are designed to increase search engine rankings. Techniques include adding text that is the same colour as the background, hiding content with CSS, setting the font size to zero or hiding text behind images.
    • Search engine only content – Using techniques such as redirects and cloaking it is possible to show different content to a search engine than to a real user. This approach is often adopted on sites built using Adobe Flash. However, this breaks Google’s terms of service and could led to you being removed.
    • Sending automated submissions to Google – Many website owners and SEO companies use software packages such as Web Position Gold to automatically submit their websites to multiple search engines. Again, this breaks Google’s terms of service and could led to you being removed.
    • Duplicating content – Although Google recognises that some content is duplicated for legitimate reasons (e.g. a separate print version of your site), it frowns on websites that deliberately duplicated in an attempt to manipulate search engine rankings.
    • Doorway pages – These are pages that are created with the sole purpose of ranking well for certain keywords. They often have poor content and exist solely to funnel users into the main site.
    • Keyword stuffing – This refers to the practice of loading a webpage with keywords in an attempt to manipulate a site’s ranking. This can results in a negative user experience, and could harm your site’s ranking.
    • Participating in link schemes – Although your site ranking is partially based on who links to you, link exchange programs are still a bad idea. Exchanging links indiscriminately without considering their relevancy will damage rather than help your ranking.

    Will implementing the above techniques get you removed entirely from Google? Probably not. However, they could damage your ranking over the long term and will almost certainly be a waste of money implementing.

    Should you therefore avoid hiring SEO companies? Not necessarily. There are many reputable companies offering superb advice on how to improve your rankings. It just depends who you go with.