Tag Archives: developers

Show 87: Trends

Posted in Classic shows on by Paul Boag

On this week’s show: Paul discusses about emerging design trends, Marcus talks about supporting existing websites and Ben Werdmuller introduces us to the open source community tool Elgg.

Play

Podcast: Download (23.2MB)

Download this show.

Launch our podcast player

Eric Meyer: Competition

Before we dive into the show, I wanted to mention a two day workshop Eric Meyer is going to be running in London on the 13th and 14th August. For those of you who do not know Eric, he is one of the world’s leading experts on CSS and XHTML. He has written numerous books as well as speaking internationally on the subject. This is no ordinary CSS training course and if you can you should consider attending

Although this workshop is not cheap at £695 it will tell you everything you need to know in order to build top-quality CSS and XHTML websites. Eric is an incredibly knowledgeable guy and it is definitely worth hassling your boss for the registration fee.

Of course, not all of us have a boss we can hassle. So for those of you with less disposable income we have a free ticket to give away. All you have to do is answer the following questions:

“In which episode of the boagworld podcast did I first mention the subject of web standards?”

To enter simply email me your answer, including the word “Meyer” in the subject line.

Good luck and we will announce the winner in next week’s show (so entries need to be in by 30th).

News and events

Conflicting absolute positions

I discovered an interesting thing about absolutely positioned elements this week. I was reading an article called conflicting absolute positions on the List Apart website and it mentioned that all modern browsers now seem to support 4 cornered positioning. In other words you can set the top, bottom, left and right corners of an absolute positioned element and it will dynamically work out the height and width.

This struck me as an amazingly useful tool that allows for all kinds of possibilities. Most useful, as the article points out, is that you can start doing some interesting combinations of fixed and fluid width elements.

The downside is that unsurprisingly this is not supported in IE 5 and 6. However, the article does suggest interesting workarounds for some specific scenarios. If you have a few minutes check out this article as it is well worth the time.

Quikmaps

We have talked before on the show about various websites that make the process of adding google maps to your site less painful. However, this week I came across another one that I particularly like. It is called Quikmaps and it has a wonderfully clean and easy to use interface.

You can quickly add new points of interest and even draw lines showing routes. You can also select from a massive range of icons and add your own marker info just by clicking on a point.

Finally they make it incredibly simple to add the map to your site. You can enable or disable a range of features (including map controls and draggability) and add it to your site by copying and pasting a tiny fragment of code. However, the nicest thing from my perspective is you can do all of this without registering for the site.

The best websites are useful and ugly

I have to say I am a little disappointed with the latest post by Gerry McGovern. Gerry is a usability expert who’s posts I read on a regular basis. The vast majority are superb but his latest post is reminiscent of the kind of thing written by Jakob Nielsen. In this post he argues that the most usable sites are often the ugliest. In my opinion this is an incredibly blinkered view. Although he points out a number of recent design trends which damage usability that does not mean a website has to be ugly. I have said it before and I will say it again, website can be both attractive to look at and easy to use.

What is more, this post smacked of the attitude that usability is all important. I do not believe this to be entirely true. Usability has to be balanced with numerous other considerations including brand identity and design aesthetics.

Its a shame because in other posts Gerry talks a lot of sense. It would appear that I am left with Steve Krug to champion both usability and design working together.

Survive the digg effect with Amazon Web Services

I seem to be hearing a lot about the Amazon web services at the moment. I have just returned from the Institutional Web Managers Workshop where I was speaking. While there I met Jeff Barr from Amazon who was talking about the different web services they offer. On my return I came across a post on the Think Vitamin website covering exactly the same subject and I have to say I have been impressed.

Amazon offer a growing number of web services aimed at developers. However, the two which have impressed me the most are the simple storage system and the Elastic Compute Cloud. Basically the first is a superb way of managing the growing bandwidth and storage demands of your site while the second allows you to dynamically increase the power of your server environment to respond to peaks in demand.

There are literally endless applications of these technologies and I don’t have the time here to cover the subject in depth. However, if you are developing an online application or if you are likely to suffer from spikes in traffic (such as can be caused by sites like digg) then you will want to explore this more.

Marcus’ bit: Providing the right support

A lot of web design agencies have made themselves, and by association, the rest of us, unpopular by enforcing unnecessary and, quite often, unfair support agreements on their clients. The ‘classic’ support model is 15% of the value of the contract over 3 years. This has somehow evolved from enterprise software solution installations where onsite support is required covering daily usage by thousands of employees. Very few websites need this level of support.

At Headscape we have always taken the approach that support, like the job, is unique to that client. That is, we aim to provide the most appropriate support for that client.

However, what does that actually mean? This article covers the various options we offer our clients and the thinking behind them.

Ad hoc support

This is simply work carried out on an existing site on a job-by-job basis. Other than not having to pay for anything until it is needed, there is generally no bonus to the client with this method in that standard rates are charged and work slotted into the schedule when it can be done.

However, I think it is still important to sign a support agreement stating the terms of the agreement and particularly the process involved for booking work. Usually some sort of email booking process is simplest and avoids writing contracts for every little piece of work.

Minimum monthly allocation

On this basis we schedule in a guaranteed minimum level of work (e.g. 0.5 person-day) every month for at least six months.  Because we can plan around that minimum allocation, we can offer a discount on our standard rate. 

The agreement for this type of work needs to cover a variety of points:

  • Again, the ordering process
  • Term for the agreement and when it starts
  • Invoicing – usually this would be monthly in arrears with any work over and above the fixed amount invoiced the following month.
  • Reporting

With this type of agreement, any unused time is usually not carried over into subsequent months or agreements.

High priority work

This is a fairly tricky area to sort out because you have the issue of ‘bumping’ existing scheduled work if high priority work comes in. This is not a problem in slack times but can be if everyone is busy. There is no magic answer other than saying that emergencies do happen and things needing attention quickly is part of any service business’ week to week existence. Bearing that in mind, it is good practice to have an agreement in place that documents how things will be dealt with.

If a client requires the additional assurance of an ongoing support contract with defined levels of response, we offer an annual pre-purchased package of support credits that can be called upon as and when required.  One credit equals one hour’s work in value.

Depending on the urgency of the required response, support credits purchase a different period of Headscape’s time. For example, low priority work is charged at 1 hour = 1 credit, whereas high priority work is charged at 1 hour = 2 credits.

To summarise, the golden rule is to agree on whatever terms suit the client best then put it all in writing.

Paul’s corner: Emerging design trends

I received this question from John in Dublin:

I am a designer working on a new clients website. He says he wants the website to feel very contemporary and web 2.0. like. However, my concern is that if I design something that feels like a web 2.0 site, it will be out of date by the time it goes live. It feels like web 2.0. design is on its way out. What do you think the next big design movement will be?

Although this is obviously an impossible question, it hasn’t stopped me from trying to answer it in my latest post on emerging design trends.

Review: Elgg

I have received a number of emails from various people over the last few months mentioning something called Elgg. None of the emails gave a lot of detail but said I should talk to a guy called Ben Werdmuller. After googling Elgg I discovered it is an open source social platform that appeared to be community based in nature. However, my lazy gene kicked in and instead of reading through an entire website I decided to get Ben on the show to tell me more.

If you are considering building a community based website, you should definitely listen to this interview.

Show 86: Boagworld Book

Posted in Classic shows on by Paul Boag

On this week’s show: Paul talks about taking a brand online, Marcus gives some advice about reviewing your information architecture and Ian Lloyd introduces us to the challenges of designing for screen readers.

Play

Podcast: Download (44.6MB)

Download this show.

Launch our podcast player

Paul’s personal news

Just a bit of personal news before I get into the industry related stories. I want to let everybody know I have signed a contract to write a book. The book is going to be primarily for website owners rather than web designers, however to be honest I think it could appeal equally to both. I intend to look at what “client’s need to know about building and running a website” so hopefully it should show by example how best to communicate and work with clients.

The most exciting thing about this book from my point of view, is the fact that I want to write it as a collaborative process with you the boagworld community. I am going to release chapters for you to see in advance of publication and also blog on various aspects of what I am writing. I really want to encourage you to share your thoughts and make suggestions as we go along through comments and the forum. I have already set up a forum thread dedicated to book ideas as well as an initial blog post on the book.

Obviously writing a book is a really slow process, but hopefully it is something that we can all get excited about.

News and events

Building for the iphone

Unsurprisingly there is a lot of information appearing relating to building web applications for the iphone. There is an iphone gallery consisting of hundreds of screenshots of the iphone. This is great if you want to mirror the look and feel of the iphone as closely as possible. There is also the iphone developers guide from Apple which provides loads of great advice. Finally there is iphoney, a piece of software that replicates some of the iphone’s web browsing functionality and lets you see what your application will finally look like.

Of course whether it is worth developing for the iphone at this stage is another matter. I guess if you are trying to reach the tech-savy audience who are iphone owners then maybe. Otherwise it might be better to wait until the iphone becomes more mainstream or other phones start offering the same level of web experience.

@media podcast

I was gutted to miss @media this year. Well, I say gutted, I was actually on a really pleasant family holiday, so I cant complain. However, I did miss a great line up of speakers talking about some amazing subjects. I was particularly depressed to have missed Jesse James Garrett’s keynote on “Beyond AJAX” and “Diabolical Design: The Devil is in the Details” by Jason Santa Maria.

Fortunately the recordings of the @media sessions are beginning to filter out for me to download and listen to. However, note that I don’t call them a podcast. There is no feed that I can find which is extremely frustrating.

Setting that little moan aside, it is great to be able to listen to these speakers even though I did not attend the conference and I would strongly encourage you to download and listen to a few yourselves.

Common mistakes in web copy

Although we would prefer to avoid it, the reality is that as web designers we write far more copy than we would like to admit. As for those of us who are website owners, a substantial part of our responsibility is writing good web copy.

We have talked on the show before about writing good copy but our focus has mainly been on style rather than technical detail. This week, I came across a post about common grammatical mistakes. However what I liked about this post is that it wasn’t focusing on the silly details of grammar that don’t really apply particularly well to the conversational tone of the web. Instead it looked at errors such as when to use “me, myself or I” and the difference between “i.e. and e.g”.

If you ever have to write copy then spend a few minutes to check it out. It only covers the worse offenders so doesn’t take long to read.

A department dedicated to the web

Jeffrey Zeldman has written a post entitled “let there be web divisions“. If you are responsible for deciding who should manage your corporate website then you simply must read this. If you are a mere foot solider then it might not be as relevant but it is still a good read.

Basically Jeffrey proposes that a company website should not sit under IT or marketing (as is traditional) but should be a division in its own right. I am not going to repeat all of Zeldman’s logic, but I have to say I wholeheartedly agree with it.

Websites are simply too multi disciplined to sit comfortably under either department and too important to be caught in an endless tug-of-war.

Paul’s corner: Taking a brand online

About a week ago, I had to give a presentation to a board of directors ,explaining the process we went through to develop a new design for their website. A large proportion of that presentation focused on the issue of brand identity. This organisation had a very well developed style guide and we spent a lot of time and effort getting that guide to work online. My presentation talked about the various steps involved and it occurred to me this might make an interesting podcast section.

I have also put together a blog post on the subject of “taking a brand online” and it is this that I cover on the show.

Marcus’ bit: Information architecture review

I am currently in the process of carrying out an information architecture review for a new Headscape client. I have done a fair amount of IA work over the years but I have found myself particularly enjoying this one so I thought I’d waffle on about what I’ve been doing.

We have covered the various aspects of IA work in previous podcasts – Expert Review, Stakeholder Interviews, Card Sorting and Wire Frame testing. This section is looking at the first of these, expert review, in a bit more detail.

I think it’s worth explaining what I mean by Expert Review. When we carry out an Expert Review we are effectively analysing a client’s existing site content, site structure and naming conventions with a view to creating a new IA based on our experience of using and developing websites. This is a collaborative process with the client – it has to be; we can make logical, usability based decisions but cannot claim to be experts in the client’s particular field.

First things first

I make sure that I have a good grasp of a number of things prior to carrying out an IA review. At the kick off meeting make sure the following are covered:

  • Target audience – this is crucial for the development of the IA. It may be that the existing site caters for one group well but another poorly.
  • Site aims – is there a stepped process that the client wants their users to go through.
  • Design – things like horizontal over vertical navigation can affect the IA.
  • Homepage requirements – find out what the killer apps and content are as these will need to be linked to from the homepage.
  • Finally, have a general discussion about content and site structure. See what the client thinks is important and what’s not.

Map out the existing site

The first thing I do is map out the existing site’s IA. This is a fairly slow and laborious task but it is the best way to not only learn about a site’s content and structure but also to understand what they do and what they offer.

Be logical, captain

Usually, the goal of this type of exercise is to streamline content into groups and name those groups so that users will understand what’s inside them.

Site’s that have grown organically over a period of time tend to spread content all over the place. It is usually fairly easy, though time consuming, to group content together. There are various methods for doing this; I tend to print out the existing site IA (that I usually create in Excel unless it’s a particularly small site, then I might use Visio) and scribble all over the printout until I’m getting somewhere. Some people like to use cloud/cluster diagrams (either on paper or using software) or there is always the age old method of creating ‘cards’ where each page name is written onto a scrap of paper. This is a bit like doing card sorting on your own where you group the cards into piles and give names to each pile.

Naming

We come from the ‘it does exactly what it says on the tin’ school of page/section naming. Marketing departments often don’t! A good example of this is the trend to verbs as section names over nouns. I remember one client wanting to call a site section ‘Enjoy’ when the section covered ‘Leisure Activities’. No prizes for guessing what we recommended!

Labels should be as descriptive as possible. Sometimes this can be difficult when:

  • there isn’t much space, for example, ‘How to register for our newsletter’ won’t fit on the average button, even ‘Newsletter Registration’ would probably be too much for a top level, so I would go for just ‘Newsletter’. It’s fairly obvious that the content underneath will relate to the organisation’s newsletter and should logically include registration, whereas ‘Register’ leaves the user asking ‘register for what?’
  • Sometimes sites are so big that main sections can include too much differing content to be labelled descriptively. In this case, I would recommend either shortcuts on the homepage replicating the main sections that include descriptive words or create drop down navigation that displays the lower level links.

Section ordering

This should follow some sort of desired path through the site. For example, the client may want users to get a bit of background, followed by an understanding of what the organisation offers, followed by some examples of previous work with a view to finally making contact. This would translate to:

About Us | Services | Case Studies | Contact Us

Conventions

Users don’t want to have to think (that sounds familiar!); they want to look and understand straight away. Following conventions helps with this process. For example, many sites include an About Us section as the first main section. This usually includes some history, annual reports, job vacancies and contact details. Users looking for this type of information don’t want to have guess that this information might be under, for example, ‘Company Background’ which is located at the far right of a horizontal navigation.

Collaborate – to a point

When you have created your first draft it then needs to be reviewed by the client, discussed and iterated until everyone is happy. Take on board any changes that are based on your lack of understanding of what the client does but be prepared to stand your ground on issues relating to web conventions and usability – after all, they’re paying for your expertise.

Ask an expert: Ian Lloyd on screen readers

On this week’s show we have Ian Lloyd giving us an introduction to the world of screen readers. I vividly remember the first time I heard a screen reader being used. I was gob-smacked by how painful an experience it was and I am still amazed that anybody manages to use them effectively.

It struck me that many of you listening to this show might not have heard a screen reader before. Hearing what blind people have to work with really makes you take their needs seriously and so I thought I would get Ian on the show to give you a taster.

In his segment, Ian takes us through some classic problems that screen reader users experience. Unfortunately to best understand what is going on in some of the examples you need to see what he is doing. In order to get around this problem Ian has made a screencast to accompany the audio. There was too much detail to make it available online or via your video pod but you can download the screen reader .mov file here.

What follows is a transcript of Ian’s section of the show…

Hello Paul, Hello Marcus and hello to listeners of Boagworld. This is the ‘Ask the Expert’ section and today I’m going to be talking about screen readers.

Now, I don’t actually qualify [meant to say classify!] myself as an expert screen reader user simply because I don;t use one on a day-to-day basis, because I’m not forced to; I do have good vision. As such, the way that I would use a screen reader would be different from someone who has to use it on a day-to-day basis. That said, I still think it’s useful to demonstrate to people what a screen reader sounds like. And the reason for this is that as far as I am aware on your podcast although you’ve talked about accessibility a lot and mentioned screen readers I don’t believe we’ve ever had a demonstration of what they actually are like for people when pages are built incorrectly.

So, today I’m going to be showing a few problems using a screen reader. I’m also going to be doing this as a video, so this is a screencast. I understand that at the end of this you will be providing a URL for listeners so that they can access this and view what’s happening on screen. Because of course it’s all well and good to listen to this stuff but to get the full context it would be good to actually see the video as well. I will try my best to describe what’s happening on screen throughout this podcast though.

Now the first example we’re going to look at is Amazon dot com. And somewhat cheekily I’ve brought up the page for my own book on Amazon. And, er, just having a look around at what I can find on the screen and there are some issues there. So, let’s have a look at this.

[Screen reader reads out page graphic correctly 'Build your own website the right way using HTML and CSS, Link graphic']

Oh, so that’s not too bad. I’ve just found an image there and it’s announced it correctly because it’s found a suitable alt attribute but underneath there are a couple of thumbnail images which, if I want to access those, it gives me a whole different … well, hear for yourself:

[Screen reader announces: 'See larger image, Link' then moves to next link, the thumbnail image and reads an unintelligible string of characters - numbers letters and underscores - out to the listener].

Mmm, doesn’t make an awful lot of sense does it? Let’s try the next image:

[Screen reader reads out more unintelligible characters and takes almost 8 seconds to read it out]

So, what’s happening there? Well, it’s quite simple: there’s no alt attribute defined for that image and so JAWS tries to fill in the gap and, er … oh I didn’t mention earlier that JAWS is the name of the screen reader that I’m using. So it tries to fill in the gaps because it doesn’t have an alt attribute it uses the file name instead and the filename, as is often the case on Amazon, is a right load of old gobbledegook! So it doesn’t give it any useful information about that image.

Here’s another example of the same thing.

[Screen reader reads out an image gallery as 'thumbs slash zero, thumbs slash one, thumbs slash two' etc]

So this is actually a photo gallery, erm, with a bunch of thumbnail images hence it’s reading ‘thumbs’ because that’s the folder where the thumbnail [image] is actually in and it’s reading them sequentially as well. It doesn’t sound quite as painful as the Amazon example but it still doesn’t tell you any useful information about the images on the page.

[Screen reader announces more examples from the same page]

So let’s listen to a slightly improved version of that:

[Screen reader announces the same images but with appropriate alt attributes, e.g. 'The Mystery Machine, driven by Scooby' for a photo of a camper van that is painted like the Mystery Machine from the cartoon Scooby Doo]

If we were to look at that on the video I’m showing that page with the style sheet disabled and the alt attributes displaying inline next to the image. As you could hear in the second example it was far more usable – you could actually understand what the image was about (as long as you understood some of the VW terminology used in there), whereas in the first example none of the images actually had alt attributes so it was just trying to read out the location of the file.

So let’s look at another example.

[Screen reader announces content of new page 'Page has no links' and then starts reading subsequent page content before I stop it]

What I’m looking at on screen is a page that seems to have a page full of links. But if you were listening carefully to the beginning of that, the screen reader thought otherwise. I’ll just try to find that again for you.

[I scrub back in the video clip to find the part where the screen reader says no links]

According to the screen reader the page doesn’t have any links. And the reason it thinks that is, well, there *aren’t* any links. What’s actually happening … is … we have a whole bunch of text on the page that is styled using CSS and the behaviour for the link is added using JavaScript. So, we have a <span> element that has an onclick event, location.href=’somewhere.html’ and that’s [the span] wrapped around the text that says ‘This is a link – click me’. Um, but of course it’s not a link. The screen reader can’t find it because it’s not an <a href="">, it’s something else that’s been styled to look like a link and behave like a link. But it’s not. Thankfull that’s not too common but you have to just be aware that what may look great on screen for you may not be any use to someone using a screen reader. You have to use the right markup for the job.

So, you could have a page that’s full of links that say ‘click here’ but of course that’s another problem all in itself. Let’s have a listen to that:

[Screen reader reads 'Click here to view' repeatedly as I tab through the links on the page]

Yes, so … the problem there is that it doesn’t give you any information at all. And this is actually still quite common. In fact just yesterday I was looking at Facebook dot com (for my sins) and, er, I was quite shocked to find that they were using a lot of this where the link phrase was ‘click here’ as opposed to the phrase that you would really want to have, so for example instead of saying ‘click here for more information’ and having ‘click here’ as the link phrase you would have ‘for more information about our products’. That would be the link phrase. Erm, but if you just use ‘click here’ and you’ve got a whole page of links that reads ‘click here’ this is what you get:

[Screen reader once again reads 'Click here to view' repeatedly as I tab through the links on the page]

Basically, completely unusable.

Now the next example I have is of a form, and in this example, er, the form has been laid out using a table. Thankfully, these days, tables are being used less for layout and people are using CSS for page layouts. However, for forms it’s still not uncommon to see someone put a table in there. And, er …

[screen reader interrupts as page loads]

OK, so in this example what I’m looking at on screen is what appears to be, um, well … four text inputs, and then there is a radio button and it’s basically asking for some personal information, first name, surname, your age, place of birth and then a question ‘Do you have a nut alergy’, the answers being ‘no’, ‘yes’ or ‘don’t know’. So let’s see what the screen reader makes of this.

[screen reader says 'table with two columns and four rows'. I tab to the first input and it reads 'surname/family name - edit']

Already we’re hitting a problem. Because the first field that I tab to I can see on screen is *actually* [the one for the] the first name . But the screen reader believed that to be the surname.

So I’ve now tabbed to the second field which is the surname and it didn’t announce anything. So let’s tab to the next field:

[screen reader announces field as 'town/city - edit']

Again it’s getting it wrong. I’ve actually tabbed to the field that says ‘Age next birthday’

[tab to the next field, screen reader announces 'tab - edit']

And *now* I’m in the ‘town/city of birth’ field and it hasn’t told me anything.

[screen reader announces 'yes - radio button', then 'don't know', reading the radio button choices]

This is all a bit confusing here. OK, so it’s asking me the question ‘Do I have a nut allergy?’.

[I tab to the next field, screen reader announces 'Yes - radio button - unchecked']

OK, so … that thinks I’m at the yes radio button but I’m looking at it on screen and it says ‘no’. So, what’s going on here? Now this is going to be a difficult one to explain on the podcast; this is one of the sections where you really need to see the video. But what’s actually happening here is we’ve got a table to lay out the page and the text sits above the text input, so for example where we’re asking for first name, the text that says first name is in the first column and the input that relates to that is in a column underneath, sorry, I mean a table cell underneath it in the next table row. Now the reason this is causing a problem is because if you were to actually linearize that table, in other words look at it in the order of the source code you get a very different view of it. And this is what happens with the screen reader. So if I were to look at this form and read it out in a linear fashion, it goes like this:

First Name [text]
Surname [text]
Form input for First name
Form input for Surname
Age [text]
Town/City of birth [text]
Form input for Age
Form input for Town/City of birth

And so on. The problem is that the screen reader expects the text for that input to appear before that input, and because of the way this has been laid out it really really gets things confused. As I said, this is quite a difficult one to explain on the podcast but if you look at the video clip you’ll see why this is causing a problem.

[screen reader blurts a few things out as I try to manipulate it ... poorly]

Sorry about that, that didn’t add anything useful at all. Hopefully Paul can edit that out!

OK, so …. the big problem here is that you may be asking a question as we have here that says ‘Do you have a nut allergy?’ and the answers are ‘no’, ‘yes’ and ‘don’t know’. But if you do put the form elements in the wrong order you’re gonna have a problem. And the reason is obviously that with a nut allergy that could be a life or death situation. You could be filling out a form as a blind user and you select what you think is the ‘yes’ radio button but because the form has been poorly laid out and doesn’t have <label> elements that are actually helping to enforce the accessibility you may actually have been selecting the no checkbox [meant to say radio] and it really could be a life or death situation. It may *not* be as bad as that – it could end up with you booking the wrong hotel location or date. So you have to be very careful with the form layout.

OK, one final example. Now everyone’s talking about AJAX, it;s the buzzword of the moment. Unfortunately it’s also not very good for screen reader users. And the reason for this is that, er, anything that is updated on the page after page load is very very problematic to pass on to the screen readers. now the example I’m going to give here is a fairly simple one, and it’s the Google Suggest page. What Google Suggest does is let you type in your search phrase and as you type it’s calling back to the server, finding suggestions for you which it then populates in a list underneath the search input. So let’s have a listen to that.

[screen reader announces: 'google search - edit, type and text' then reads each letter of search term 'this is a test' as I type]

So I’ve just typed ‘this is a test’ and on screen underneath that is a whole bunch of suggestions that it has found. But if I try and actually access any of those using the keyboard:

[screen reader announces 'Google search - edit, Google search - edit, Google search - edit, Google search - edit' with each keypress on the down arrow]

It’s actually doing nothing. On screen I can actually see that it’s going up and down the options but the screen reader, it’s getting nothing back at all, nothing useful at all.

[more screen reader confusion]

Well thankfully with Google Suggest this is something tat you can opt out of – you don’t have to use Google Suggest, it’s not enforced on you. But it’s a very simple example and it just goes to show that a very simple technique like this can be, basically, completely unusable for someone using a screen reader.

So, that was just a few examples. Hopefully you’ve had an indication of how a poorly built website or web page can affect a user. the bottom line is, keep listening to the podcast, keep doing things right, keep using good markup and, if you can, test your own web pages or web sites using a demo version of JAWS. It really does pay dividends to find out how this works – or doesn’t work. So, thank you very much, I hope this has been useful, and I look forward to the next podcast, Paul. Thanks guys.

No show next week

Unfortunately there will be no show next week as I am away speaking at the Institutional Web Management Workshop. However we will be back the week of the 23rd July.

Show 85: Bulletproof

Posted in Classic shows on by Paul Boag

On this week’s show: Paul provides some design advice for developers, Marcus provides so post launch pointers and we review Jeremy Keith’s Bulletproof AJAX book.

Play

Podcast: Download (20.3MB)

Download this show.

Launch our podcast player

News and events

Unfolding the fold

The first news story today is actually not news at all. Well, its news to me (because I wasn’t previously aware of it) but the actual post was made back in December of last year.

The post relates to that most irritating of subjects; “the fold”. I have spoken about the fold many times before. The mythical point at which people have to start to scroll. I say mythical because this point changes depending on your screen resolution, browser type and toolbars.

The reason it is so annoying is because clients are obsessed with it. They are convinced that users don’t scroll (a perception rooted in the early 90s) and no amount of persuasion seems to change their minds.

However, hopefully the post I found this week will help. “Unfolding the Fold” is a post on the ClickTale blog that provides some hard stats about the fold and scrolling in general. It demonstrates that the vast majority of people scroll, with almost all of them scrolling right to the bottom of the page. Their conclusion is that there really is no reason to squeeze all of your content above the fold.

d.construct tickets on sale 10th July

If you are in the UK on the 7th September you should be sure to come to d.construct. d.construct is in my opinion one of the best web design conferences around. The reason I like it so much is that it works hard to maintain a grass root feel that is accessible to anybody.

For a start the price ticket is very accessible at £85 + VAT. Secondly, the whole thing happens on a single day so there is no need for expensive hotel bills if that is a problem. Finally, they have a great mix of speakers with many of the big names you would expect but also a lot of less well known people in order to “shake up the scene”.

The reason I mention it now is because the tickets are going on sale next tuesday (the 10th). Historically they sell out incredibly fast. Although this year they do have a larger venue and so that should help somewhat.

I really want to encourage you to attend this event if at all possible. I will definitely be there and it would be great for us all to meet up.

Fonts licensed for web apps

Talking of d.construct, Richard Rutter (one of the organizers of the event) has posted an interesting blog entry on “font licensing“. Admittedly font licensing, doesn’t sound very exciting but potentially it could be. Richard has spotted a press release from a prominent font provider. This press release talks about a new type of license…

Ascender Corporation announced a new licensing program for font software implementations with server-based applications.

Richard goes on to suggest this might be another move towards browsers supporting downloadable fonts. This would allow us to use whatever font we wished on a website rather than being limited to what the user has on his or her desktop.

Richard does warn that this might just be in reference to Silverlight, because Ascender does work very closely with Microsoft. However, personally within the context of Opera’s move towards downloadable fonts, I am hopefully this might be something more.

A new way to visualize your desktop

Finally today, I wanted to mention a technology called Bumptop. I recently watched a demonstration of the system and was blown away. Basically, Bumptop is a new way to work with files that mirrors much more closing the experience of interacting with your desk in the physical universe. You can stack files, throw them around and even crumple them up in a 3D environment.

When I first watched this demo it felt like a novelty, but the more I thought about it the more potential I saw to organize content in a more dynamic and flexible way.

What I like most about this interface is that it is not trying to teach us a new method of interaction. Instead it is trying to replicate something we are already familiar with. The idea of using metaphors we already understand is a staple of interface design and is what makes things like tabs, desktops and folders so successful.

I think as web designers we could learn from technologies like this. We should be looking to build on established conventions people understand rather than always seeking to do the next big thing or be innovative in someway. Bumptop is innovative but it does so in a way that is instantly accessible to everybody.

Paul’s corner: Design advice for developers

I received this great question from Simon that I thought worth addressing on the show…

I hear lots of questions about the technical and business side of Web design, but what I don’t hear is how do the already technical amongst us become better designers – maybe being a visual thing this just won’t work on an audio podcast, but at least you could give us your top 5 ways to grow artistically.

As has become tradition, I decided to blog on the subject a few days ago but unsurprisingly failed to stick to “5 ways to grow artistically”. Instead I managed to produce a long and rambling essay on “when designers design” which I bore you all with on the show.

Marcus’ bit: Post launch Protocol

Everyone, client and agency, seems to understand the principle of not letting a site stagnate. Content should be regularly updated and, ….and what?

We see a lot of client demands for content management systems that are then often not used for lengthy periods of time. Therefore I thought it could be useful to look at what options there are to a site manager after that big day when the site goes live.

Of course, not everything here will apply to everyone but hopefully some of it will.

News and events

Stories, articles, seminars, fun days, whatever. These are your opportunity to create new content very regularly.

Clients are invariably perfectly happy with their site when it goes live. This is understandable, they have more often than not spent months working on it, tinkering with this, fretting with that and a) they need to spend some time on other aspects of their job (that have been neglected) and b) the site really has never been more up to date!

But what often happens is that a couple of months down the line they realise that new content needs creating but they can’t remember any of the CMS training. The 50 page accompanying manual is too scary so things get left. This happens until we are asked to add the new content because we’re too busy and it’s urgent and often, later on, further CMS training is booked.

News and events provide a steady stream of new content that helps keep the site fresh but also the CMS skills of those looking after the site.

Shortcuts

Updating shortcuts to key content is again a simple way of refreshing a site’s content without putting that much effort in.

Homepage shortcuts tend to link to:

  • Latest news
  • Latest events
  • Repeated main navigation
  • Products
  • Special offers
  • Facilities e.g. login, subscribe etc
  • Important ‘deep’ content
  • Popular topics

I guess the point I’m making here is a lot of these shortcuts can simply be rotated giving a feeling of change on the site. For example, changing a link to a main section on a weekly basis is a simple task and one that does not require the writing of any new content.

Utilising usage stats may be a good way of seeing which areas of the site need further promotion. In fact, use everything at your disposal, stats packages, CMS, content suppliers, agency support contract, internal marketing team etc so that you are as informed as possible.

Imagery

Don’t just update copy. Adding new banner imagery can really rejuvenate a tired looking design. Always look to include appropriate imagery with news articles, events etc.

Communicate

Keep your eyes open to what’s happening within your company/organisation. There may be a new project/department/member of staff etc that might be outside your sphere, that would really add value to the website.

Make yourself (and your role) known to everyone. Send out questionnaires or surveys asking people what they want to see on the site or if they have any pertinent content.

Think big

Finally, don’t lose sight of the main purpose of the site while dealing with the smaller things. It may be that the main purpose of your site is to promote your brand so updating the look and feel of the site regularly may be a lot more important than updated content. In fact, continually evolving the design of a site over time is probably far more cost effective (not to mention the effect it has on keeping the site fresh) than ‘big bang’ redesigns every 3 years or so.

Alternatively, sales leads may be the site’s primary function. In which case, keep in touch with sales and experiment with ways to boost leads.

The other really big area that site owners need to look at is site promotion. This warrants a post of its own so I’ll look at that another time.

Review: Jeremy Keith’s Bulletproof AJAX

I have decided not to do “ask the expert” this week, so we can have a review instead. Unfortunately we don’t have the time to do both segments every week so I have to mix and match from time to time.

The book I want to review is “Bulletproof Ajax” by Jeremy Keith. I read it almost 6 months ago, but haven’t had an opportunity to talk about it on the show until now.

The book is designed to be the sequel to Jeremy’s previous book “DOM Scripting: Web Design with JavaScript and the Document Object Model” which was written as an introduction to Javascript for designers. Bulletproof AJAX is therefore written in a similar tone with the focus on making AJAX accessible to designers rather than providing the technical detail you would expect from a developers book.

I have to confess I found the book a little frustrating at first. As somebody that had bought and learnt Javascript through Jeremy’s first book, I felt a little annoyed that the first 2 chapters seemed to be dedicated to laying the foundations we had already covered in the first book. I am guessing the idea was that people could buy this book in isolation without first owning DOM Scripting, but in my opinion the amount of detail provided in Chapter 1 and 2 wouldn’t make that possible. For me those first 2 chapters felt like padding to make a short book feel slightly more substantial.

However, that criticism aside the rest of the book was definitely worth the very reasonable price tag. Jeremy has an excellent writing style that is clear and engaging. He seems to explain complex topics in such a manner that you wonder what all the fuss is about. You come away from the book thinking this “AJAX stuff” is easy and wondering what all of the fuss is about. Admittedly he only covers the basics, but it is enough to get you producing the kind of AJAX applications most designers would like to build.

But, Jeremy doesn’t shy away from the more complex underlying issues surrounding AJAX. In particular he talks about accessibility and ensuring your applications work with Javascript disabled. He does this through a technique called HIJAX. I will not endeavor to explain to you the details of it here, except to say it relies on the server doing most of the heavy lifting.

From applying the principles taught in this book I have to say the HIJAX approach works very well. All of the complex stuff is handled by the developers on the server side and I get to focus on how the information is returned to the user. AJAX is a funny area that sits between client side and server side and leaves designers and developers wondering who is responsible for what. Using the HIJAX approach taught in this book, the division is much clearer.

So would I recommend this book? As with DOM Scripting it depends on who you are. If you are a designer who has read Jeremy’s first book and would like to start producing AJAX applications then absolutely. However, if you haven’t read his first book then I suggest you do that first, unless you are already confident in producing unobtrusive javascript.

If you are a developer on the other hand then my recommendation is to steer clear. This book is not meant for you and you will find it frustratingly lightweight.

When developers design

Posted in Design on by Paul Boag

Although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.

First things first, I am not going to be able to teach you good design practice in a single post. That comes with time, training and to some degree, talent :)

However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into.

General comments

Before I plunge head first into specific tips I would like to share some more general comments based on my observations of when developers do design. Hopefully these will help you think of design as more than arranging pixels.

Empathy

In many ways developers work in a world of absolutes. A piece of code either works or it doesn’t. Your world tends to be very literal, very straightforward. Computers are in many ways easy to understand. People on the other hand are a very different matter. We are messing beings full of contradictions and inconsistencies. This is the world of the designer.

Designers are trying to engage with people and to do that they empathize. They try and put themselves in the shoes of the user, to really understand how they think, how they approach a problem.

One of the most common mistakes I see developers make is that they fail to do this. To a lesser or greater extent they perceive the user as being similar to themselves. They make assumptions about the users motivations and abilities. They often misunderstand what the user is trying to achieve.

If I could give only one piece of advice it would be to encourage you to empathize. Really think through what the user is like. Are they in a hurry? Do they have a specific aim? What is their outlook on life? Will they have kids clamoring for their attention while they surf your site?

Really try to get inside their heads. It will definitely help.

Avoid graphical applications

The temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.

Its hard enough to apply the principles of good design without adding learning a new application on top of it.

You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…

Don’t try and be great; be invisible

Don’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate.

Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it.

If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!

Specific advice

Okay, so enough with the airy fairy advice, lets get specific. How do you make your design good enough to be invisible, non-offensive? Well, let me suggest 5 areas that you should pay particular attention to. Obviously I could write reams on each but lets keep this very simply and easy to implement.

Typography

The key to good typography is constraint and consistency.

Avoid using too many typefaces, normally 1 or 2 is enough. Also avoid having too many variations in sizes and weighting. Only use size and weighting to emphasis the hierarchy of the content. The larger and bolder the type, the more important the content.

Also try to be consistent in your application of typography. If something is a certain size and weight on one page ensure it is done the same on another. Although CSS makes this relatively easy, watch out if you are working with ems as you may have inheritance problems.

Finally, don’t just think about the type itself but also line length and line height. Don’t allow lines of text to become too long (between 40 – 60 characters is good) because they are hard to read. Also add some whitespace between lines of text as it will make the page feel more spacious, which brings us nicely onto…

Whitespace

Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.

In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.

The grid system

You often hear people complain that a website looks boxy but in actual fact boxes are good. A good website should have a strong underlying structure of columns and rows. It helps the user identify hierarchy and communicates a sense of order in the site. Although a good designer will break out from the grid he will always have a grid structure still there underneath.

Think about how many columns the site is going to have. Ensure these are applied consistently across the whole site, but don’t be afraid to occasionally span across multiple columns. Also ensure elements are placed consistently in this grid from page to page. Do not move elements around, especially navigational elements like the menu bar and search.

A grid may seem restrictive and not very “creative” but it essential to all design.

Colour

Working with colour is particularly tricky and so I would suggest where possible you avoid making too many colour choices. Your best bet is to turn to an automated colour creator like Kuler. You can either choose from one of the existing palettes or enter a base colour (usually a corporate colour) and it will produce a palette based on that.

Notice that Kuler only includes 5 colours in its palette. This is good practice, resist the temptation to use too many colours. Apart from this site (where I was just being silly), I tend to use a very limited colour palette. One nice little trick however is to use a strong contrasting colour to highlight important content. Because it is a contrasting colour it will make content stand out from the rest of the site.

Imagery

The design work I have seen done by developers tends to shy away from the use of imagery and in someways that is not a bad thing. It is easy to get imagery wrong but I would encourage you to be a little more adventurous. Imagery is a great way to draw the users eye and so can be used to highlight key content.

Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…

  • Avoid animation.
  • Choice images with a strong foreground element.
  • Compress your imagery but not too much!
  • Use faces, people are naturally drawn to them.
  • Avoid clipart illustrations

I am sure there is more I could suggest but those are the ones that immediately spring to mind.

Taking it further

So there you go. Hopefully that has helped a little. Obviously, there is so much more that could be said, but that should have at least started you off. If you do want to take the next step and improve your design skill then check out Jason Beaird’s book “The Principles of Beautiful Web Design”.

Show 83: iphone bollocks

Posted in Classic shows on by Paul Boag

On this week’s show: Paul talks about the importance of undo, Marcus explains the benefits of stakeholder interviews and Struan Robertson highlights some legal deathtraps waiting for us online.

Play

Podcast: Download (19.3MB)

Download this show.

Launch our podcast player

News and events

Safari for Windows

Probably the most talked about story of the last week is the fact that Apple have released Safari for windows. To be honest I am a little surprised just how much has been written about this considering I don’t think the impact is going to be that significant. Will Safari cut into Internet Explorers market share? Probably not. Will it undermine the market share Firefox has developed? Almost certainly.

If safari under windows rendered exactly the same as under OSX then there maybe some benefit to windows based web developers. At the moment it is impossible for them to test on Safari without buying a mac. This has the potential of changing that. However, in all likelihood differences will emerge and if they do then this is just another browser that we have to test against.

We will see.

Applications for the iphone

At the same time Steve Jobs announced Safari for windows he also talked about the iphone. The biggest criticism of the iphone to date has been the fact that it is locked down so third parties cannot develop applications for it. Apparently Apple have been thinking long and hard about the problem and have come up with a solution. They are going to allow developers to build web 2.0 applications that can be accessed by iphone users using the built in Safari browser.

What a load of bollocks. They are telling us something we already knew. As soon as Steve Jobs announced that the iphone carried a full safari browser we knew that web applications would be developed for it. Sure, they are now saying that methods are going to be provided to automatically access iphone features such as dialing and google maps but very little detail was given. As far as I can see Apple is not giving people anything more than they already had.

Jason at 37 Signals is excited about what this means for web apps. He says…

This is the coming out party for web apps. We are very excited about this. These are exciting times.

…and he is right. It is exciting for us web developers. However, I am not convinced the user will see it that way. David Shea mirrored my own reaction at this news when he simply posted a graph showing the astronomical cost of data calls on mobile carriers. Web applications are great for web designers but for users of mobile devices like the iphone they could quickly be prohibitively expensive.

Web Design-isms: 7 Surefire Styles that Work

I found a great article on Think Vitamin this week that talks about design trends on the web. One of the things you learn early on as a designer is that despite your desire to produce something completely original you never will. Everything has been done before and in this article Larissa Meek takes us through 7 styles of design that appear again and again on the web.

The article very much reminded me of design meltdown, an excellent site that showcases different approaches to design. However, what I particularly liked about this post is that the author showed examples of how these styles occur in art as well as online. This is nice because it encourages us as web designers to look beyond the web for inspiration, a subject I have spoken about before.

CSS frameworks

The final story caught my eye because it is an extension of something we have been doing for a while. A while back I talked on the show about the fact that Headscape work with standard XHTML templates. We use these templates as a starting point for development. They allow you to jump start the build process as well as ensure consist naming conventions across the entire design team.

In a new post on the List Apart website Jeff Croft proposes a similar approach for CSS, based on the concept of Frameworks. Jeff argues that certain aspects of CSS development are often repeated across multiple projects. From browser reset styles to creating horizontal menus and standard grid layouts, it seems absurd that we generate these from scratch each time. Jeff proposes that instead we create a series of CSS files that we can be reuse again.

Its a great idea and one definitely worth exploring if you work on lots of similar projects or are part of a large team where you are looking for consistency.

Agony uncle: The importance of undo

A couple of weeks back I received this email from Tom in Texas:

I am a designer currently working on developing a web 2.0 app. The developer is doing some really cool AJAX stuff but unfortunately most of it breaks the back button in the browser. He is arguing that it doesn’t really matter as there are lots of other ways of going back. What is your opinion on the subject?

Once I had recovered from the naivety of the developers comment and finished counting slowly to 10, I started to think through the role of undo. In the end this very simple question from Tom evolved into a blog post on the importance of undo. It is this subject I am looking at in todays show.

Client corner: Stakeholder interviews

Got this question from Dusted.

I’m about to begin a project to help an organization evaluate its current web site and web site management. I’m also going to perform some research and planning to help them start developing a new web site.

The organization is quite complex with a lot of different departments – marketing/events, sales, information/press, youth and more. Each person responsible for each department will be interviewed and I need some advice about what questions to ask them.

Starting off with a few…

  • Describe your department’s needs of the web site.
  • What can be done in a better way?

The results of the interviews will be used when I present my evaluation (and research/planning) to the board.

Any advice, links to articles, books… help of any kind would be deeply appreciated.

We have done quite a lot of stakeholder interviews over the years so this question seemed like one I could help with.

Stakeholder interviews can often be confused with user interviews, as they can often happen during the same process. I tend to differentiate the 2 by calling them internal and external stakeholders. These groups will always require a very different set of questions.

This piece refers to internal stakeholders only; those people that:

  • Will be paying for the project!
  • Are content owners
    • Some won’t know or want to be content owners – “that’s X’s job”
    • Some will consider their content considerably more important than everyone elses – “there should be a tab called ‘Corporate Accountancy’ and a big ad on the homepage”!
  • Will be users e.g. sales

There are a number of good reasons for talking to stakeholders, as follows:

Politics

Most organisations involve some sort of tension between departments/stakeholders/teams/whatever. Giving representatives from each of these groups (make sure you don’t leave anyone out!) provides everyone with a voice. It ensures that everyone has said their piece and it’s down in writing. Ultimately, it gets buy in on the project from all parties thereby creating a better end product.

Education

This applies from both sides. The interviewer is looking to be educated regarding the various points and specialisms that the interviewee has (that’s the point of the interview!). However, the interviewer also has an opportunity to educate a whole raft of internal staff about the web. A good example would be why it’s not a good idea to name site sections after departmental structure. In fact, teaching users to think of their end users early in the interview will probably affect what they have to say.

Verification

Talking to internal stakeholders can often highlight the need to develop certain functionality/facilities/micro-sites/etc that web managers only thought might be useful. Interviews can also be used as a test bed for ideas as well as feedback.

Semi-structured

Following on form the last point, make a point of telling interviewees that they can go off track. The questions are useful as guides but don’t stop writing down what someone is saying if it doesn’t fit with the script.

So, finally on to some good questions to ask&#…;

Questions will, of course, vary depending on the organisation, end user requirements etc, but looking back through a number of scripts, these seem to crop up regularly:

  • What does your department do?
  • What are your ‘processes’?
  • Who is your client and what do they want?
  • How do you think the web can help you deliver?
  • What is your role?
  • What is the biggest pain about your job? What takes the most time?
  • Describe your Internet understanding/usage?
  • Describe your software understanding/usage?
  • Name applications that you are a confident user of.
  • Do you store any information in databases? What?
  • The current website – what’s good and bad about it, what’s bad about it?
  • Are you tasked with providing content for part of the website? If not, do you want to be?

Ask the expert: Struan Robertson on Legal Issues

Today’s guest expert on Boagworld is Struan Robertson a corporate lawyer who specializes in IT law. I first met him on the .net podcast and thought it would be great to get him on the show to give us a small taster of the kinds of legal issues encountered by web professionals. In the show he answers three questions on particular scenarios to give you a taster of the kind of issues that can arise. These include:

  • What are the dangers of working on websites for illegal companies
  • Some of the issues surrounding using images when you aren’t sure about the licensing
  • Storing private data

Although the particular scenarios are quite specific hopefully they communicate some underlying messages and encourage you to take your legal obligations seriously. If you are interested in learning more about the legal issues surrounding web design and IT in general then check out Outlaw.com where Struan provides a lot more advice. Also Struan writes a column in the .net magazine where he covers different legal issues each month.

Show 82: Microsoft drones

Posted in Classic shows on by Paul Boag

This week on Boagworld: Paul talks about managing enquiries, Marcus asks whether you should add links to your website on client sites and Rob Borley talks about ASP .net.

Play

Podcast: Download (25.9MB)

Download this show.

Launch our podcast player

News and events

Staying Creative

I came across a great article this week by Keith Robinson about how to keep being consistently creative. Constantly being creative can be a challenge sometimes, especially when a chunk of your time is spent on less creative activities like coding or consultancy. This article provides some incredibly practical advice about how to keep those creative juices flowing.

The one part that particularly resonated with me was the need for time to play. I am very fortunate at Headscape that Chris and Marcus let me have time to experiment and try new stuff. The result is that I am much more creative than when I used to do production work all the time.

However, this article also offers advice for those of you who don’t have the same luxury. It talks about how to force yourself to engage on even the most dull project as well as the need to pursue your own projects and interact with other creative people.

WCAG Samurai

Over a year ago now Joe Clark published an article on A List Apart entitled “to hell with WCAG 2.0“. Following this slamming attack he went on to create the WCAG Samurai who would develop an alternative to WCAG 2 based on WCAG 1. A year later and we have a working draft of WCAG 2 as well as the recently released WCAG Samurai guidelines.

I have to say the WCAG Samurai Errata is a lot easier to understand than WCAG 2.0 but WCAG 2.0 has come a long way since Joe Clark’s article. Personally, the arrival of the WCAG Samurai guidelines have generated mixed feels in me.

I not an accessibility expert and so am naturally drawn to the Samurai guidelines. They are easy to understand and don’t use confusing or vague language. However, at the same time I have a feeling that yet another set of guidelines is only going to confuse matters.

I guess my hope is that all of the different interpretations on accessibility will make clients realize that accessibility is about more than confirming to a series of checkpoints and encourage them to start thinking in depth about their accessibility policy.

Movable Type 4 (Beta)

Yes I use Movable Type. I know the rest of the world uses WordPress but movable type works for me. I run the boagworld website on movable type and have no intention of changing so don’t bother writing in trying to convince me.

That said, I wanted to point out the recent release of a beta for Movable Type 4. I have to say I haven’t installed it yet but it looks good. Its still in beta and apparently buggy in places but some of the features look impressive.

They have revamped the interface which in my opinion was better than WordPress anyway. They have improved the content management capabilities, finally added a WYSIWYG editor and added support for Open ID.

If you are not already a Word Press drone then check it out.

Mobile web developers guide

This week the dev.mobi website has released a comprehensive guide for mobile web developers.

If you have listened to this podcast for any length of time you will know that I am constantly banging on about the mobile web. Developing websites that work on mobile devices is going to become ever bigger business and although it is a challenging area, I think it will be a huge niche for those willing to embrace it.

Of course, at the moment it is a relatively immature market and finding good information can be tricky. However, this guide looks very good. I can’t claim to have read it all yet but from what I have seen this is a must read if you are looking to explore the area of the mobile web further.

Agony uncle: Promotional links

I was ferreting around in the forum for something to chat about and found this question from Remy:

I was wondering what the opinion was on adding a “Site built by Such and Co.” at the footer of a client web site.





I remember thinking it was normal practice in the late 90s and early 00s, but the more I look around today the less and less I see other web design/developer firms doing it.





I do think it’s a cleaner design if you don’t add a link off to a random (to the user) web site, but I remember hearing on one of the podcasts on boagworld that this is how this had contributed to Headscape’s (page)ranking on Google – i.e. by having well ranked web sites linking back to Headscape.





Just want to see what other people thought before I go and slap a nasty ‘who dunit’ at the bottom of my client’s web site.




This is a fairly old post and there’s a lot of interesting and useful stuff on there. But I thought that chatting things through, and letting people know what Headscape does, could be useful.

It generates business

It really does. Lots of it. I can honestly say that I think our credit (which was, interestingly, on a separate credits page) on the old National Trust site played a major part in whether or not Headscape would have survived its first couple of years.

I try to make sure that I always ask new enquirers how they discovered Headscape. Off the top of my head, I would say that around 1 in 20 say they followed a link from one of the sites we have built. We are currently talking to a prospect that followed the link on one of the university sites we developed.

Don’t expect a link

Whether a link appears is up to the client. Ask them if they mind. If they do, ask if you could have a link on a credits page or possibly just on a single page (e.g. ‘About this site’ if they have one or the contact page).

If they still mind, leave it.

We formalise the arrangement in our terms and conditions, as follows:

The Contractor shall have the right to incorporate, in a readily viewable location, a credit and hypertext link in the Deliverables.

Use useful wording

Useful wording to a search engine that is. For example, ‘Designed by Headscape’ doesn’t really help page ranking at all, whereas ‘Web design by Headscape’ does as it includes the search term ‘web design’.

Beware CMS based sites!

There is always the possibility that doing this could backfire. If a client has control over aspects of a site’s presentation then there is always the possibility that they could make a nasty mess of your excellent work. You have to ask yourself whether a link, in this case, is valuable.

Client corner: Handling enquiries

The idea of the client corner section is that we tackle questions clients have. However, this week I answer a problem I am facing myself; how to handle enquiries better. We get enquiries from the Headscape website and I just don’t think we handle them very well. I always have the feeling some are getting lost and when I go away on holiday they just don’t get answered. After some thought on the subject I think I have come up with some enquiry handling techniques that might help.

Ask the expert: Rob Borley on ASP .net

I often get people asking to know more about the way we work as Headscape. What technologies do we use, what approaches do we take, how do we make business decisions? To be honest I often avoid this questions because I don’t want this podcast to feel too much like a Headscape sales pitch. However, several times I have been asked by people why Headscape works mainly with ASP .net instead of PHP or Ruby on Rails so I thought we might take a look at that decision.

Knowing little about server side coding myself I thought it was best to get Rob Borley (our technical lead) onto the show to talk about the decision we made in going down the .net route.

Its actually a really interesting segment that gives a real insight into how we run our business and how we go about making decisions in regards to technology.

Show 81: Money Matters

Posted in Classic shows on by Paul Boag

This week on Boagworld: Paul gives advice to those who work with content management systems. Marcus finally talks about charge out rates and we talk to Dan Mall and Mark Huot about swfIR.

Download this show.

Launch our podcast player

News and events

37signals in Time Magazine

I notice that 37signals have made it to Time Magazine. This is exciting stuff because it shows the growing awareness in mainstream media of the explosion of web 2.0 businesses. However, the real reason I mention this article is because of what it tells us about how 37signals work. You get to learn about their focus on simplicity, the fact that innovation can happen outside of Silicon valley and their approach to a distributed company.

The one part of the article I personally found particularly interesting is how 37signals’ current suite of products was born out of a need they had to communicate across a distributed company. The idea of building a product that meet a personal need is a good one. It is particularly interesting to me as Headscape has started development of a product which does exactly that. I don’t want to say much more at the moment (as it might never happen), but this article contained a lot of valuable lessons for us.

AJAX tools

I seem to find myself doing more and more ajax and javascript these days. One of the more tricky areas is keeping the user informed about what is going on. I am encountering two specific problems:

  • How to draw the users attention to content that has changed
  • How to inform the user that content is still loading

The latter is fairly straightforward as you simply display a loading graphic. However, I am a lazy sod and can’t be bothered to hand craft a beautiful animated gif. Fortunately this week I came across AJAXload which generates those pretty web 2.0. loading graphics for you. Very nice.

Informing users of changing content is a bit more tricky. I have been aware of the fade to yellow technique for a while but that requires a white background, which my designs don’t ways have. What I didn’t know until I finished Jeremy Keith’s “Bulletproof Ajax” is that there is also a fade to anything technique. This is basically the same as the fade to yellow approach but the background colour doesn’t matter. Simply download the code and away you go :)

Waves of creativity

I stumbled across an article this week talking about the relationship between brain waves and creativity. This explained a lot about my own personal creativity! The gist of the article is that your brain needs to be relaxed in order to be at its most creative. This makes sense for me personally as inevitably I am at my most creative when I am lying in my bed at night.

The sad truth is that we spend most of our lives in a more agitated state and so creativity is hard to achieve. This dove tales nicely with my experience of implementing “Getting Things Done: The Art of Stress-free Productivity” (David Allen). Since reading that book I have felt much more relaxed and in control and hence I have been considerably more creative.

Eric Meyer explain why forms controls can’t be styled

A big thanks to Eric Meyer who has been kind enough to look into the incredibly confusing area of form controls and then explained it to the rest of us. Many web designers express a real frustration with the fact that you cannot consistently style form elements. Although personally I think it is generally unwise from a usability perspective to start mucking around with form elements, I have still always wondered why browser developers have chosen to give us so little control. In a recent post Eric goes into extensive detail about why form controls are “weird” but the upshot is that you are simply better off not styling them.

Agony uncle: Web Design rates

Another question from Bob in Iceland:

“Hi guys, I am becoming increasingly bewildered with what I should charge for web design work. I also do a fair amount of copywriting and content research. What should I charge? Should my rates change for different work? I am a one man band.”

Firstly, I should say that there is no real fixed figure for web design related work. It depends very much on a number of factors, such as:

  • Experience e.g. proven capability to deliver
  • Ability to deliver specialist services e.g. usability testing
  • Size
  • Diversity of staff
  • Location
  • Portfolio

However, to use a real example as a baseline, a survey carried out by eConsultancy a couple of years ago showed that English web design agencies employing 10 to 20 people with a turnover of approximately £1M, charged between £500 and £800 per day for most services. I expect this gone up a little since then.

Setting your rates is partly science, partly weighing up what the market will bear for what you offer.

You do need to work out to the best of your ability what your daily break even cost is but in, in theory, your annual figures should be able to tell you that. The biggest drain on any web agency, unless you have marble and gold clad offices in central London, will be your staff. Good creative/technical people don’t come cheap.

Be realistic from a number of different angles:

  • Don’t try and charge a grand a day if you’re straight out of uni with no experience under your belt
  • Don’t expect to have 100% effort allocation – 70% is excellent
  • Price projects as honestly as you can but remember that clients are human beings and really don’t like paying for project manager anywhere near as much as they do technical development

So should you charge different rates for different services. Again… it depends. Some jobs require a lower level of skill as part of the project. For example, recruitment (though an absolute pain) for any type of testing requires basic organisational skills and not,say, years of experience in project management. If you can outsource that work at a lower rate, then charge a lower rate, but if your PM ends up doing it then you have to charge at your PM rate.

For years we charged a flat rate across the board because it was simpler to manage and we felt clients liked it. Over the past couple of years we have done a lot more consultative work that has placed pressure on the timetables of the directors. This has led us to having the following rate categories:

  • Creative director – Paul
  • Consultancy – IA, business analysis, testing etc
  • Standard – design, technical, pm

We charge a fixed uplift (per client dependent on geographic location) for on site work – kick off meetings, testing etc.

Client corner: Advice for CMS users

I have been putting together a document for work that provides some basic advice for people who work with content management systems. It covers things like accessibility and writing for the web so I thought there might be some value in sharing it on the show. For complete notes on everything I cover check out the CMS user blog post.

Ask the expert: Dan Mall and Mark Huot on SWF image replacement

I was fortunate enough to get some time to chat with Dan Mall and Mark Huot the creators of SWF image replacement. We talked about:

  • What exactly swfIR is and how it works
  • What kind of scenarios they imagine it being used in
  • What inspired them to create swfIR in the first place
  • A little bit about the process of applying it to a site
  • What the future holds for swfIR
  • What it is like working at Happy Cog

No show next week

Just a quick note to say there will be no show next week as I am off on holiday to sunny cornwall. However, please continue to send in your suggestions for the show and don’t forget you can always check out the forums if you want your boagworld fix :)

Show 77: A dream?

Posted in Classic shows on by Paul Boag

On this week’s show: Paul talks about how a client’s work is never done, Marcus looks at dealing with scope creep and we review Dreamweaver CS3 (is it really worth upgrading?).

Play

Podcast: Download (20.5MB)

Download this show.

Launch our podcast player

News and events

The web design survey

A List Apart are trying to build up a picture of the web design community by launching their web design survey. In my opinion this is an incredibly valuable project because there is so little statistical data on our profession. We have next to no information on salary levels, job titles, location, type of work done or even educational background. Its a strange situation for what is now a mature industry. Perhaps, as Jeffrey Zeldman suggests, it is largely due to the fact that we work in a hidden profession where the practitioners have meaningless job titles that bear little resemblance to the work we do.

Coding for content

If you listened to the SXSW special we did a while back you may remember me interviewing Garrett Dimon about the recent redesign of his blog. In that interview he talked a lot about his desire to focus on content and that the design should exist only to support that. The results of this effort are truly phenomenal and he has produced one of the most refreshing sites I have seen in ages. It is clean, easy to use and really succeeds in bringing the content to the fore. Well, this week he wrote an article that follows up on previous comments he made about his design approach by talking about how he coded the site. Its a great article and really shows off the fact that an attention to detail and methodical thought process can really generate some amazing results.

Don’t be a hero: Giving up is good

How often have you heard me drone on about return on investment? Well, now you can hear the guys at 37 Signals talk about the same thing but from a slightly different angle. In their post “Don’t be a hero: Giving up is good” they talk about the fact that developers don’t like to be beaten and will continue grappling with a problem long after it ceased to be profitable. The article argues that it is important to know when you cut your loses and drop functionality if it is simply taking too long to implement.

Working with tables and CSS

It’s amazing how many problems you have with tables even after you have moved across to CSS based design. One common problem I see a lot is the data in tables pushing out the tables width which in turn often breaks the design (see an example). Fortunately this week I found a post that seemed to solve the problem. It uses the table-layout property in CSS along with overflow:hidden. Its a useful little technique that is definitely work checking out.

Client corner: A client’s work is never done

In last week’s client corner section I talked about the role of the client and how in many cases it is very poorly defined. This started me thinking in more depth about how clients perceive web projects and how they often fail to grasp the enormity of the undertaking. In this weeks show I explore the ongoing commitment that clients have to make to their websites and look at what exactly they will find themselves doing on a day-to-day basis. As with last week’s client corner, this is a subject I have recently blogged about and so if you want to refresh your memory on what I said in the show check out my blog post on the subject.

Agony uncle: Dealing with scope creep

This week we will be reviewing a question from Bob in Iceland – “How should I deal with clients that keep changing the spec throughout a project?”

I guess the first thing to say is that the spec will change, they always do. Often it is perfectly understandable because people see a new design or piece of functionality and think ‘hey, we could do X or Y as well’.

But… and I have been as guilty of this as anyone… often the scope will creep as the client learns about the web development process as the project goes along. This is avoidable. It can often be seen as pedantic, or possibly even negative, to spell out exactly what a client is getting. For example, design iterations or template styles. Ask yourself when writing the spec – would a layman understand this? If not, then add notes to explain.

So, what to do when the first request outside scope comes in? As with most things, use your brain regarding how to respond!

If it is a 5 minute job then just do it, but make sure that client is aware that it is outside scope so a) you can earn some points with them and b) let them know that you are keeping a tight eye on the scope of the project.

Anything over that, you need to respond in writing (email is fine) stating that the work is outside scope and you estimate it will take X hours to complete… please confirm that you wish us to go ahead with the work. This puts the onus back on the client and makes them think about whether they really do want the work done.

It is good practice to have a change control procedure written into any statement of work. These can sometimes be over the top, demanding contract extensions in writing and the like (which probably is appropriate for a large new piece of work) but usually something like –

As and when issues arise, it is the project manager’s responsibility to raise these with the client and agree any actions to be taken.

If any rescheduling is required, the project manager will be responsible for ensuring that acceptable changes to the schedule are agreed with the client and documented.
The project manager will maintain an issue log and ensure that issues are either closed following discussion with the client or result in an agreed change to the project plan, with associated change documentation including price change where required.

Basically, this is saying ‘use your head’ and make sure you write down whatever is agreed.

Sometimes, however, it is wise to carry out additional work as a gesture of good will. This is usually appropriate if you ‘owe’ the client a ‘favour’ of some sort, for example if you had charged 5 days to produce a design and it took 1 because they signed it off immediately. You don’t necessarily actually owe them anything (assuming a fixed price contract) but they will be aware that you didn’t put in as much effort and probably won’t take a kind view to your charging them for an extra half an hour’s work at the end of the project.

Review: Dreamweaver CS3

I finally got my hands on a copy of Dreamweaver CS3 this week and although I am still taking it all in I thought I would share some of initial thoughts.

I guess the question you want answer is whether it is worth upgrading or not. As normal the answer isn’t black and white. If you are a a strong standards based designer who has worked with things like DOM Scripting or AJAX then this upgrade probably isn’t for you. However if you are still finding your feet with CSS and don’t want to learn Javascript then this upgrade is definitely worth considering.

Obviously Adobe is trying to pursued us that Dreamweaver offers a huge range of reasons to upgrades such as better Photoshop integration and improved browser testing. However, when it comes down to it, I believe it only offers two killer features.

CSS Layout made easy

If you are new to CSS this feature might be useful. It basically allows you to select from a series of CSS layout templates to get you started. Now, this never replaces hand coding it from scratch, however if you are anything like me you find it easier to learn from example and this certainly helps with that.

Spry framework

If you have tried and failed to get your head around DOM Scripting and AJAX then I would suggest you start off by buying “DOM Scripting: Web Design with JavaScript and the Document Object Model” (J. Keith) or “Bulletproof Ajax (Voices That Matter)” (Jeremy Keith). However, if even that fails then you might want to take a look at the Javascript framework now built into Dreamweaver CS3. As with CSS layout I should stress this isn’t as good as hand coding because:

  • you are stuffed if you want to add or amend functionality not offered from within the framework.
  • the code is bloated in places meaning it will make the page take longer to download.

However, that said, the functionality offered in Dreamweaver is very impressive. You can achieve all of the following without touching a line of code:

  • Work with XML datasets (like RSS feeds)
  • Expand and collapse content areas
  • Make accordion menus
  • Validate forms

The code isn’t great but at least from what I have seen it degrades reasonably and isn’t too intrusive.

If you are a confident CSS and DOM Scripting coder then the upgrade offers considerably less. Personally the best thing I saw was the ability to sort my CSS files in a drag and drop approach. Beyond that and copy and paste straight from Photoshop, there really isn’t much to get excited about.

The question is; has Adobe done enough with Dreamweaver CS3 to keep themselves ahead of Microsoft’s Expression Web which reports say is very impressive. Personally the lack of mac support in Expression Web could well be the deciding factor in what otherwise are very equally matched products.

“Adobe Dreamweaver CS3 (PC)” on Amazon

“Microsoft Expression Web (PC)” on Amazon

The role of the website owner

Posted in Web strategy on by Paul Boag

There is a lot written about the role of web designers but very little written about what part website owners play in the evolution of their sites. It is an area I have been thinking a lot about recently and I wanted to share a few thoughts with you.

Many web designers view the client as almost an inconvenience in the web development process but in reality they are absolutely fundamental to a websites success. However unlike the role of designer or developer, the part web site owners play is much harder to define.

In fact I would argue that the role of web site owner is one of the most multi-facitated jobs within web development and we as designers and developers need to recognise and encourage that role.

Of course to a large extent it is our responsibility as web agencies to lift some of the responsibility from the shoulders of website owners. However I would still suggest that there are a number of areas where the client has to take the lead.

Visionary

A good web design agency should be able to help their clients shape a vision for their organisations website, however it is down to the website owner to “own” that vision and develop it over the long term. The person responsible for a website needs to have a clear picture of what role the site plays within their business and how that role could be expanded over time.

In my mind vision falls into two categories. There is the core vision for the site. In other words, what is the unshakable objective of the site, which doesn’t really change over time. However there is also the site roadmap. This is a vision of how the site is going to develop over the coming months and even in some cases, years. What kind of new functionality maybe added and how is the user base expected to change. Without the website owner having a good handle on these two areas, a site can easily wander off track and loose its sense of purpose and focus.

Advocate

As well as having a clear vision for a site the website owner also needs to be the sites advocate. By that I mean he needs to defend the site against others within the organisation that would seek to undermine its focus. This is especially a problem within larger organisations where people think more on a departmental rather than corporate level. This typically leads to individual departments pushing their agendas on the website and the site becoming the victim of internal politics. It is not unusual to find departments fighting over home page real estate or top level sections in the information architecture.

It is the role of the website owner to make sure the integrity of his or her site is defended and that it does not sink under the weight of internal dispute.

Evangelist

But the job of the website owner is not just defensive. A good website owner should be offensive too, actively promoting the website within his or her organisation. They should enthuse about the potential of the web and actively engage with departments and people within the company, looking for ways that the website can better serve their needs. A website owner needs to be passionate about their site and encouraging others to share that passion.

Content guardian

Probably the most time consuming and demanding of the responsibilities held by the website owner is to oversee the content of the site. Not only is it his or her responsibility to dictate what content appears on the site, but that the content added communicates a consistent message and tone. The website owner needs to encourage and nurture content contributors ensuring that they keep their content up to date and relevant. However the largest workload is in the initial development of a site, when it is down to the client to plan what needs to be communicated on the site and draw together that content from various contributors across the organisation. Time and again I see clients significantly underestimate the amount of work involved here and it is vital that the agency and client agree on content delivery milestones upfront in order to avoid slippage.

Project coordinator

Developing a website involves a lot of people. Designers, developers, usability experts, content contributors, hosting companies… the list goes on. Although in many cases a website owner turns to a web design agency to handle the management of many of these roles it is still inevitable that some management will be required by the client. Website owners often have to get internal sign off on designs, content, budget and many other aspects of the project. As I have already said they also have to manage content contributors and in some cases may have to manage multiple suppliers (design agency, development house, hosting company). In short, even if they outsource the project to an agency it is still going to require some management by the client.

Referee!

The unfortunate truth is that the final role a website owner often has to fulfill is unofficial referee. Web development projects are a series of compromises. Accessibility needs to be traded off against design, design against marketing, marketing against usability and so on. The different contributors to a website have very different perspectives on what is important, so it is down to the website owner to break stalemates and find a middle ground. Ultimately they have to be the decision maker.

The web agencies role

So there you have it, the role of the client. The trouble is that as web designers we often fail to communicate to the client our expectations of what it is we believe they should do. Instead we assume the client will just fulfill their obligations. Because we have worked on so many web design projects we assume the division of responsibilities is obvious. The reality is that they are not and it is down to us to educate the client.

Show 63: More than iPhone

Posted in Classic shows on by Paul Boag

This week on Boagworld, Paul looks at whether it is possible to build HTML emails with CSS, Marcus discusses how to write a good brief and Christian Heilmannwades into the current Javascript library debate.

Play

Podcast: Download (21.2MB)

Download this show.

To subscribe directly within itunes click here

News and events

Seems like there is loads going on in the world of web design this week and we struggled to narrow it down to four items. However, this is our pick of the best:

Getting a job as a developer

Christian Heilmann has written a post on his experiences of hiring developers at Yahoo! He gives some really sound advice to any developers in search of employment. Definitely worth a read if you are considering a change of job.

Talking of changing jobs, if you are a developer considering a career move then you might want to take a look at the developer position currently available within Headscape.

Global free stock imagery

Luke Sanderson (an old friend of mine) has taken the Google Coop and configured it to search all of the free image stock libraries from one place. Saves a bit of trawling around looking for that perfect (free) image.

The future of flash

Now, I don’t know much about flash but I know a man who does and he has just posted his impressions of the Flashforward keynote at MacWorld. He talks about Flash CS3, flash on alternative devices and reveals some fascinating stats on the take-up of Flash 9.

iPhone

Apples announcement of the iPhone seems to have caused a lot of excitement in all quarters not least the web design community. Brian Fling believes it could “revolutionaries the web”. Personally I find myself agreeing more with Cameron Moll who takes a more cautious view.

Agony Uncle: HTML emails built using CSS

This week has seen the discovery that Outlook 2007 uses Word to render its HTML emails rather than IE7. This severely limits what is possible when it comes to HTML emails and standards. It was therefore very topical that this week’s Agony Uncle Question is about using standards with HTML email. We look at what is possible and what is not referencing articles both on the A List Apart website and Campaign Monitor.

Ask the Expert: Javascript Libraries

The debate about the value of Javascript libraries has been raging for a while now but seems to be back with vengeance at the moment. That is why on this week’s show we have Christian Heilmann sharing his thoughts on the question, “Javascript libraries: Friend or Foe?”

Review: Pro CSS Techniques

Pro CSS Techniques is a new book by Ian Lloyd, Jeff Croft and Dan Rubin aimed at experienced CSS developers looking to take their skills on to the next level. Jonathan Snook provides an excellent review on this book that we reference in this week’s show.

Clients corner: Writing a web design brief

Writing an effective brief for web design agencies will not only make the selection process easier but helps to avoid potential miscommunications over requirements further down the line. In this week’s show Marcus looks at the issue of invitations to tender and how to go about writing an effective brief that will help your project run smoothly

Oh yes… don’t forget the boagworld meetup

Podcast 61: Christmas Special

Posted in Classic shows on by Paul Boag

In our Christmas Podcast Special; Skype murders Marcus rendition of Silent Night, Paul shares his list to Santa and they both look at the successes and failures of the web over the last year.

Play

Podcast: Download (24.1MB)

I know what you’re thinking; “not the most riveting subject”. However, don’t let that put you off. Although return on investment might not float your boat, it is still extremely important and you should take the time to listen to this show.

Download this show.

To subscribe directly within itunes click here

So another year is done and boagworld finishes for its Christmas break. We will be back in January but until then you can enjoy this extra special episode of the show.

It’s been a real pleasure working on the show over the last year. We really want to thank you all for listening. We never anticipated that the show would prove such a success and hopefully we can continue to keep it fresh and exciting in the New Year with our new format.

This year’s Christmas special is slightly more structured than last year’s so I figured a few notes on what we covered maybe appropriate. Enjoy!

Special offers to boagworld listeners

A couple of companies that listen to boagworld wanted to give something back to the boagworld community. Although I haven’t purchased from either site yet myself, I thought it was nice they were enthusiastic to share a small token with you all.

Houlton Wines will give you a 10% discount if you quote the coupon code “boagworld” when ordering. Equally Seams will offer 25% off any tshirt if you quote to code “boagworld001” when you checkout with paypal.

News

I tried to give the news a Christmas theme this week by ensuring all the stories had a Christmas slant. Guess which one fails to meet the criteria!

Biggest Tech Mistakes of 2006

Thank you to everybody who nominated a tech mistake of 2006. Below is the shortlist. You will have to listen to the show to hear who Marcus announced as the winner.

Best web applications of 2006

Also in the show we look at the best web sites and applications of the year. Nominations include:

Dear Santa

I thought it might be fun to share some of the gadgets I will be asking Christmas for this year. Of course if you want to buy me any of them I am sure Santa won’t mind!

Finally, we do a quick review of the services offered the Shaw Trust. If you haven’t come across these guys before then definitely check them out. They offer some very interesting web accessibility services which is ideal if you want to test your site with real disabled users.

Thanks for listening, and we will speak to you all in the New Year. Happy Christmas!

Podcast 60: Return on investment

Posted in Classic shows on by Paul Boag

This week on the boagworld podcast we look at why return on investment should be at the heart of our approach to website development.

Play

Podcast: Download (24.3MB)

I know what you’re thinking; “not the most riveting subject”. However, don’t let that put you off. Although return on investment might not float your boat, it is still extremely important and you should take the time to listen to this show.

Download this show.

To subscribe directly within itunes click here

This week’s show is largely based around elements of my keynote at this year’s Refresh conference. We discuss how the web design community fails to engage with its clients on a business level spending too much time talking about code and design. I challenge us as a community to start talking the language of business and focus our intention on return on investment.

In particular we cover:

  • What is return on investment?
  • Defining how ROI will be measured.
  • The short term and long term aspects of ROI.
  • How to maximise your returns.
  • The need to look for the simplest solution with the highest return.

In the news…

We have loads of news in this week’s show including:

Also in the show…

Marcus gets out the guitar (if only briefly), and we talk about how you can contribute to next week’s Christmas special. We look at what unobtrusive Javascript is and give some practical examples. Finally we investigate some of the latest postings on the forum including a debate about presenting designs to clients and a discussion about how developers try and blind clients with technobabble.

Why meetups matter

Posted in Web strategy on by Paul Boag

There is a lot of focus on the negative aspects of web design at the moment such as the debate about the role of accessibility. However, I believe web designers have a lot to be proud of and that other professionals (like website owners) have a lot to learn from them.

I went to my second Geek Dinner on Friday and thoroughly enjoyed myself. It was superb to meet up with other people from my industry and talk about everything from personal blogging to emerging screen reader technologies.

It’s amazing when you think about it. The majority of people in that room are in direct competition with Headscape, and yet we freely discussed techniques and good practice that would normally be kept confidential in order to maintain a competitive edge.

I would argue that there are few professions outside of academia who so freely shares knowledge. What is more, I believe that the phenomenal evolution of the web can be partly attributed to this free exchange of ideas.

Personally I know I have learnt so much from the online and offline discussions I have had with other designers and I hope that in turn people have learnt from me.

If you are a web designer then I would really encourage you to take the time to attend some of these meetups. Unlike conferences, meetups tend to be free or at least very cheap and so there is little excuse not to go. The only problem I can see at the moment is that not much is happening outside London, which is frustrating. However, there is no reason why this is the case. If there isn’t a meetup in your area, organise one. Even if it is only four or five people, it is still a chance to swap war stories and have a drink while you’re at it.

However, what really saddens me is that this current enthusiasm for knowledge exchange seems to be limited to web designers and developers. What we really need to see is website owners sharing ideas in the same way. Although there is always the exception to every rule, it appears that most website owners are more reluctant to give away their competitive advantage. They are happy to attend conferences where they receive information but reluctant to attend meetups where they may be required to give out.

This attitude needs to change. There are important issues web site owners need to discuss. Things like marketing, fulfilment and customer retention (to name but three). From my perspective business strategy lags behind the technology and this is at least partly due to the communities’ hesitancy to share.

If you are interested in attending or organising a meetup then I suggest the best place to start is Upcoming.org. This site allows you to quickly and easily find events in your area as well as post your own.

Finally, if you are interested in a boagworld meetup then post a comment below. Also if you could add your location to our frappr map that would be useful too.

The Business of Web Design

Posted in Web strategy on by Paul Boag

I have been thinking a lot about our motivation as web designers (as you do!) and am becoming increasingly concerned that in many cases our motivation in projects is entirely wrong.

I say “our motivation as web designers” but what I really mean is “my motivation”. I guess I have been doing some soul searching and have not been entirely happy with what I have found. However, I suspect that if you look honestly at yourself then you will find that, if you are a web designer, you suffer from a similar problem.

Personal motivation

So what am I talking about? Well, the web is a really exciting place at the moment. There is so much innovation and so many new technologies and techniques emerging. From tagging to AJAX, we are surrounding by cool things we are just itching to try out. We are constantly looking for opportunities to experiment with this stuff and that is no bad thing because it is by experimenting that we learn. If you are anything like me you are a diehard geek and love playing with new technologies and ways of doing things. That is what gets you up in the morning.

Benefiting our users

Of course, our desire to use all these techniques and technologies isn’t entirely selfish. Another motivation for us is the desire to benefit our end users. After all we are “user centric designers” right? Technologies like AJAX create a more pleasant user experience and the “trendy” web 2.0 design style, makes a site easier to navigate and read. The fact that we will look good to our peers and more attractive to prospective clients by using these approaches is a secondary consideration… isn’t it?

Business benefits

There is an added bonus to all these innovations too. In many cases they will benefit the clients business. Benefits such as reduced maintenance costs, increased customer satisfaction, fast development… the list could go on. All of these arguments are incredibly useful when trying to convince a client that they need to let you implement the latest “good practice”.

The underlying problem

So what is my problem? It is not that I have an issue with the three motivating factors outlined above. What I am uncomfortable with is the order. If we are completely honest with ourselves, in many cases the order is the same as that outlined above:

  1. Personal motivation
  2. Benefits to users
  3. Business benefits

We are primarily driven by personal motivations and the desire to “play” with new technologies. The business drivers for implementing a new technique come at the bottom of our list and are really only a useful way of justifying what it is that we want to do anyway.

I would argue that the list should actually be completely inverted. I believe that business benefits and objectives should be our primary concern even above the benefits to users. At the end of the day a website has to meet client objectives. Of course, in the majority of cases these objectives are best met by providing a good user experience, but our motivation should primarily be driven by business demands and not user needs. As for personal motivation, well that should come last of all.

There are too many implementations of AJAX which exist only for personal gratification rather than business need. The same applies for design, standards, accessibility and indeed any other “best practice” you care to mention.

Please don’t misinterpret me. I am not saying any of these things are wrong. They can all be hugely beneficial to most businesses. What I am saying is that each of us as designers or developers has to take a long hard look at why we are recommending various approaches to clients and ensure that our motivation is primarily business focused.

As web designers, many of us somehow perceive ourselves above such torrid pursuits as business objectives. There is a definite climate of moral superiority at the moment as we focus on accessibility and best practice. Although it is good that web design is moving away from the early days when we were the web equivalent of time share salesmen, we need to be careful that our new found enthusiasm for best practice doesn’t divorce us from the realities of business online.

A web design forum for everyone

Posted in News on by Paul Boag

I have been threatening to do it for ages, but finally it has happened: we have launched the boagworld forum. The place where no question is too stupid! ;)

The problem has been that I don’t like a lot of the forums out there. Most of them are unnecessarily complex, have terrible underlying code (being largely table based) and aren’t very easy to customise.

However, relatively recently I came across Vanilla. For fear of being flamed this really is forum 2.0! It has pretty good code, can be customised beyond belief and can be as simple or complex as you want. It also makes nice subtle use of AJAX and yet degrades nicely ensuring it remains accessible. All in all I love it… oh yes and best of all it is open source!

Check out Vanilla for yourself

After saying all of that, I can’t say my implementation of it is that hot. So many of you have been badgering me about this that it has been somewhat rushed. Instead of putting together the CSS from scratch I have bastardised the code that was already there. The result is that it doesn’t scale as well as I would like (in fact it doesn’t scale at all in IE) and it could have really done with some more testing.

Disclaimers aside, I am generally pleased with it. Finally the listeners of the podcast have somewhere to talk about wider issues that don’t directly relate to my posts. My hope is that this can be a place where we encourage one another in good practice both when building and when running websites.

Although I suspect in the early days the forum will be largely dominated by designers and developers, my ultimate hope is that website owners will start to use it to discuss their unique problems too. It seems to me they are sadly lacking a good place to discuss their problems.

Visit the forum now

Oh yes and one more thing… no question is too stupid to ask. This forum is for everybody, beginners and advanced developers alike. Anybody criticising others questions will feel my wrath! ;)

Web standards War – Watch our language

Posted in News on by Paul Boag

The war is over! …… Or is it?

The thing that disturbed me most at this year’s @media conference was the final panel in which it was announced that the “web standards war was won”. I remember saying at the time that this was far from my experience and so was particularly encouraged to read a recent Think Vitamin post.

If we want to seriously increase the take up of standards based design we need to simplify our language and make sure the underlying concepts are accessible to all.

One of my unofficial aims for this podcast and blog has always been to explain the benefits of standards based design. I passionately believe that using CSS for layout, semantic XHTML for content and Javascript for behaviour benefits everybody. Website owners have a site that is easier to update, can adapt to multiple devices and is more search engine friendly. Designers and developers find maintenance a much more pleasurable experience, changes less painful and large builds much quicker.

The idea that web standards were now the norm really shocked me. Certainly, that has not been my experience and I still receive regular emails explaining how my podcast is encouraging people to adopt standards. How could that be the case if everybody is already using them? Here is just one example of an email I have received this week:

I know CSS has been around for quite a few years already – but the whole "web standards" bit is new to a lot of people. My point is basically that you and your podcasts are helping to educate the public and web designers about the importance of web standards in web design.

I think the comment at @media demonstrated an underlying problem. The web design community has fractured. I believe there are two tiers; the “elite” that read the right blogs, attend the right conferences and own the right books. Then there are the rest, those that don’t have the time or money to keep on top of every new trend. So often, the former look down on the latter (something I have written about before) and condemn them for bad practice. However, in many cases they are just struggling to get by and need our encouragement not condemnation. As long as clients are willing to pay for old table based sites, then these designers don’t have the business justification for getting their skills up to speed.

I guess that leads nicely on to the other group that still needs a lot of convincing… the clients. To say the web standards debate has been won among this group is absurd. Most are totally unaware of good practice in development. As long as the site looks okay in their browser then they are happy. We need to continually educate our clients (and prospects) of the need to build, standards based sites.

Spread the word

The think Vitamin article encourages us to spread the word and makes a few suggestions about how we can do that. However, I believe the primary method was missing; we need to change our language. I have been interviewing a number of people recently for the show and have noticed one reoccurring problem; they cannot help but use jargon. In many cases the people I interviewed were unable to get through a conversation without talking about “web standards”, “web 2.0”, “progressive enhancement”, “web services”, “frameworks”… the list could go on. Even though I always explain that my podcast is aimed at a mass audience, they cannot help themselves. We need to learn to stop talking techie! For the majority of web designers out there, these phrases mean nothing. If designers and developers don’t understand them, then how are clients ever going to grasp the concept.

The boagworld.com podcast is often criticised for its lack of technical detail and for “dumming down”. I am often forced to over simplify a concept in order to make it accessible to the audience I am trying to reach. Now although this sometimes makes me less than accurate I believe that this is preferable to using jargon that nobody is going to understand.

If we want to seriously increase the take up of standards based design we need to simplify our language and make sure the underlying concepts are accessible to all.

Podcast 49: d.construct & web services

Posted in Classic shows on by Paul Boag

This week Paul reports from the d.construct 06 web conference and interviews the likes of Jeffrey Veen, Andy Budd, Ian Forrester and Jeremy Keith then endeavours to wade through the jargon to discover the real benefits to your business.

Download this show.

To subscribe directly within itunes click here

The d.construct web conference was awesome. Anytime you get to meet up with other web developers and discuss the future of the web, it is sure to be an inspiring experience. Add to that a great line up of speakers and it is guaranteed to be a memorable day.

I went to the conference knowing very little about web services and with some real concerns about their viability in a real business environment. However, a day spent chatting with other developers and listening to the speakers, not only educated me but also made me very excited about the potential.

I spent most of the day interviewing, however only a fraction are used on the show. Audio quality was a constant battle and background noise a real issue. However, there is loads of great stuff and I have tried to piece it together in such a way that it introduces you to the potential of web services as well as providing you with a sense of the day.

Also in the show…

Also in this week’s show, we review the upcoming book releases from Friends Of ED with Chris Mills (their senior editor). We look at the target.com accessibility case, review a great article by Chris Heilmann and tell you everything you ever wanted to know about designers.

50th episode next week!

Next week’s show going to be entirely based on user submitted questions and comments. To take part simply send your question or comment to [email protected] or submit an audio comment via the odeo website. Remember, your question can be on anything you want, from web design to Marcus’ pop career! We look forward to hearing from you.

Books and Tears of Joy

Posted in Reviews on by Paul Boag

First, let me apologise for the lack of posts recently. However, I do have a couple of good books for you to check out and a post on the IE blog that almost brought tears to my eyes.

As the podcast has grown in popularity, I have found it increasingly hard to strike the balance between my work for Headscape and my passion for boagworld. On one hand, I get to write for various magazines (like .net or Practical Web Design), speak at conferences and contribute to other sites, which is all very exciting. On the other, I could easily become divorced from the day-to-day process of building websites, which would be a real shame. I get concerned about how the more "vocal" and "active" members of the web design community, end talking about design and development more than they actually doing it. That is why for the last few weeks I have been a bit more quiet on boagworld and have been focusing more heavily on client work.

Of course, you don’t care about my personal woes so I will move on to a couple of things that have caught my eye recently.

Books of note

Firstly, I have seen a couple of books you might want to look at. I cannot say I have read either of them personally yet (I am still ploughing my way through "Prioritizing Web Usability" by Jakob Nielsen) but they have both received excellent reviews and I respect the opinions of their respective authors:

Beginning JavaScript with DOM Scripting and Ajax

I really want this one as my DOM Scripting knowledge still has significant room for improvement. Also Chris is an excellent writer and talks a lot of sense.

Web Accessibility: Web Standards and Regulatory Compliance

Sounds dull doesn’t it? However, from what I can gather it is actually a lively read. A number of excellent designers and developers have contributed to this one so it is well worth your attention. If you want to finally nail this accessibility issue once and for all then this is a good place to start.

Tears of joy

On a completely different note, I wanted to draw your attention to a recent post on the IE 7 Blog. This post lists all of the bugs and problems from IE6 that have now been fixed in IE 7. Credit, where credit is due, IE 7 is an excellent browser and I can’t wait until it is officially rolled out.