Tag Archives: Print

Show 89: 404

Posted in Classic shows on by Paul Boag

On this week’s show: Paul talks about creating the perfect 404 page, Marcus covers some of the basics of rich media and Aral Balkan makes working with databases and APIs a whole lot easier in flash.

Download this show.

Launch our podcast player

Before we dive into today’s show I have a small request from you our loyal fans *cough*. As you may have noticed the show notes we produce for this podcast are a lot more comprehensive than once they were. They are almost a complete transcript, which is important to us because we want the show to be as accessible as possible. I have been contacted by a number of deaf users who are frustrated because they cannot access the show and to be honest I sympathize. We have done our best to produce a complete script but we are getting hung up on the expert section. I just do not have the time to go through and reproduce everything say. An alternative would be to use a service like Casting Words but to be frank I am not confident on the quality we would get back. I was therefore wondering if any of you would like to volunteer? I know a number of people have offered to transcribe in the past but quickly became overwhelmed with the amount of work involved. However, transcribing just this section of the show (typically about 10 minutes) shouldn’t be too bad. Hopefully if we can put a rota together it should be too big a job and best of all you would get to listen to the expert sections in advance :)

So, if you can spare the time drop me a line.

News and events

Writing for the web

First up this week is the fact that the latest issue of A List Apart is entirely dedicated to the subject of writing for the web. There are two great articles both of which are definitely worth reading. The first post takes the idea of personas and suggests that your website too should have a persona. What tone of voice should your website have? What character should it project? The second article (and my personal favorite of the two) is a passionate defense of good writing on the web. It fights hard against the attitude that web copy should be kept to a minimum arguing instead that if the content is web written it draws the user in and engages with them in the same way good design can.

Both articles are excellent and has made me reconsider the importance of good copy. It is an area I am constantly frustrated by and just wish I could get my clients to pay for a copywriter to really bring their sites alive.

Microformats in Google Maps

Next up is a really exciting announcement by Google. It would appear that Google Maps now supports Microformats. I can hear your cries of disappointment… thats not that exciting! Well, I think it is. This is a huge boost for the Microformats community and puts literally millions more hcards out there. Not only will this raise the awareness of Microformats but I also think it will lead to some interesting mashups using the massive database of businesses that are displayed on Google Maps.

If you are yet to play with Microformats or haven’t gotten around to adding them to your website then now is the time. They are quick and easy to implement and oh so very cool ;)

There has been a lot written about Microformats but it is nice to see big players picking it up and running with it. Good stuff.

Corporate Web Standards

What you don’t see a lot written about anymore is web standards. Its almost as if all of the arguments have been made. However, I did come across an article this week that convinced me there was more to cover. It was a discussion about implementing web standards in a large corporate environment where you are weighed down under legacy pages and internal politics.

It was a refreshing article because it was so pragmatic. Much of what you read about standards is bordering on fanatical. This article was much more down to earth accepting that you cannot implement the perfect solution especially within a large corporate environment. It talked about little steps and something being better than nothing.

If you work in a large organisation then this is definitely worth reading. You will find it very encouraging.

Web Design advice

Last up is a couple of websites I have stumbled across this last week. Both of them are provide general web design advice and I have to say both look very impressive. The first was sent to me by Charles Russell who recommended it as an alternative to “The Principles of Beautiful Web Design“. I am not sure it is an alternative personally but it is certainly an interesting website. It is called Web Design from Scratch and does exactly what it says on the tin. It literally covers every aspect of web design providing basic advice and then referring you on elsewhere. Ideal for the beginners.

The other site I wanted to mention is the Web Designers Wall which I believe has only just launched. It seems to be filled with all kinds of nice goodies including tutorials, code snippets, commentary, inspiration and more. What is more the site design is beautiful. I have a feeling that this site is only going to improve with age.

Marcus’ bit: Rich media

Multimedia doesn’t really mean that much anymore I think. It used to refer to CD-Rom type content but now I think it refers to any web content that isn’t just plain old text and images.

I have been pricing up some new/interesting/dynamic content for one of our clients and it struck me that I haven’t discussed this sort of thing here before. I guess there isn’t a great deal of point to this other than ‘have you thought of doing…’, so here goes…

Animated shortcut banners

These seem to be all the rage at the moment. Usually quite a large portion of the homepage is dedicated to a rolling carousel of messages or adverts for content deeper in a site. There will usually be 3 or 4 different ads that flow from one to another. Manual controls are also available to go straight to a particular shortcut or pause on an ad.

There’s a good example at Wildfowl and Wetlands Trust.

Video

I don’t really mean just plain video; I’m referring to a piece we did for the Surrey Hills AONB that incorporated:

  • Still shots
  • Video footage
  • Voiceover

All of which were pulled together to create a tourism video that can be downloaded at Surrey Hills.

The voiceover, incidentally, was done by Surrey Hills patron and famous british actress, Penelope Keith. Going to her rather grand house to record the session was a great experience.

Voiceover

Which brings me nicely on the subject of voiceover. I have two rules relating to voiceover recording:

ALWAYS use a professional actor. The girl in the office with the ‘nice’ voice will sound rubbish, so will the ‘posh’ guy in accounts (we know, we’ve done it!). Voiceover actors aren’t that expensive and, because they’re professional they’re quick. I have used Voicebookers in the past and they have been superb.

Less important but… use a proper voiceover recording studio. I have used studios in London that are really very reasonable and the quality is superb. Though of course this isn’t always possible as with Penelope Keith (recorded my laptop).

Panoramic imagery

We have done a few external 360 degree images, again for Surrey Hills and some for National Trails. We haven’t used dedicated equipment that take full spherical shots basically because you end up with an unnecessary amount of sky. I have simply used a decent camera and tripod and done two full sweeps of portrait images (roughly one just below the horizon, the other just above), moving the camera about 10 degrees each time.

The ‘fun’ part with these images is that they are usually taken from high vantage points so expect to have to do a lot of climbing to out of the way places!

There is a compromise to be made with panoramics. The best time to take a good landscape photo is early in the morning or just before sunset. However, for a panoramic that doesn’t work because you will have the sun in view for a large chunk of the image. This is one of the reasons why panoramic images can often look a little ‘flat’.

Dynamic screensaver

This is quite a cool idea where the standard screensaver idea (pretty pictures rolling from one to the next) is enhanced to allow the client to update information to it. Basically, when the screensaver fires up (as long as it connected to the internet) it checks with the client’s site to see if any changes have been made and automatically updates if there has. This is really handy for news stories but could be used for anything.

Mapping

I think I have discussed mapping previously because it is something Headscape has done a lot of in the past. Up until recently we tended to develop maps using Flash where points of interest are dynamically generated using grid references. We also added features such as layering of different categories.

However, recently we have developed a site for River Thames that utilises Google Maps. The site’s main purpose is to promote the River and encourage people to visit. Again, we have used Google Maps to show points of interest such as places to eat, places to stay etc that are controllable in layers. Using GM is very cool though because the points shown alter when the maps are dragged and/or zoomed (apparently lots of brain power went into making this work!).

Finally, we also created a trip planner or itinerary builder that gives site users the opportunity to list all the places they want to visit (inc. contact details, address, directions etc) and print this off in a print friendly design or email to a friend.

Paul’s corner: Handling missing pages

I noticed this last week that I have been getting a lot of traffic from the Smashing Magazine and so I went to check out where it was coming from. Turns out it was an article on 404 error pages and they had used my error page as an example. The article also referenced another site called the 404 Research Lab that provides lots of good information on setting up custom error pages. All of this reminded me I wrote a blog post ages ago about handling missing pages and yet for some reason i have never spoken about it on the show before. Seems strange because it is a subject we all need to deal with. So, I thought it was time I covered the subject properly using my old blog post as the basis.

Review: Aral Balkan on SWX

Paul Boag: OK, so joining me today is Aral Balkan. Hello! How are you?

Aral Balkan: I’m fine, Paul. How are you doing?

Paul: Not too bad. I feel like I’m speaking to you quite a lot recently, one way or the other.

Aral: [laughs] I know, but it’s fun, huh?

Paul: So I was explaining to everybody earlier in the show how we got you into Headscape to give us a little bit of training and kind of bring us up to speed with what was going on with Flash.

Aral: Yeah, that was a lot of fun, too.

Paul: You had a good day, did you? It wasn’t too painful then.

Aral: Yeah. Me and my bunny had a good day. [laughs]

Paul: Yeah, that was deeply disturbing, on so many levels.

Aral: [laughs]

Paul: But I think we’ll just leave it at that. We won’t tell people any more details on that. We’ll just leave them worrying about it. [laughs]

Aral: OK, let’s do that. [laughs]

Paul: So, as part of that day, you mentioned SWX, which is something that you’ve been involved in developing. And it sounded so cool and kind of dragged my attention back when there were points where I was thinking that this is beginning to get a bit out of depth to me.

Aral: [laughs]

Paul: There were techie people in the room that understood what was going on.

Aral: Yeah.

Paul: But then you started talking about SWX, and I started to think, “Ooh, that sounds cool” so I thought I’d get you on the show and ask you a little bit about it.

Aral: That’s great. That’s great, because SWX is what I’m most excited about these days.

Paul: Good stuff. So, do you want to kick us off by telling us a little bit about what SWX is?

Aral: Well, SWX is a couple of things. SWX itself is a new data format for Flash. It’s actually the native data format for Flash, which is kind of weird, because Flash has been around for a while, so why hasn’t it had a native data format until this point? I don’t know. Nobody else did it, so at the end; I was like, “OK. Well, I guess I have to bite the bullet here.”

And when I say native data format, if you’re not very fluent with Flash, think about JSON, or what JSON is for JavaScript. But it’s actually a step beyond that, because, with JSON, you still either have to parse it, or in JavaScript you have to evaluate it, before you can use it. So there’s another step before you can use it, after the data’s loaded.

In SWX, there isn’t. It uses SWF files, which are native Flash files, to store data, so it makes it very easy to work with.

Paul: What’s the kind of target audience for this? Who do you see as using it?

Aral: There are a couple. So, anyone right now who’s working with Flash basically can use this to build mash-ups, to build data-driven Flash applications. And also, mobile developers who are developing with Flash Lite can use SWX to develop mobile Flash applications.

And in fact, that’s where it’s currently, I think, most useful, because with SWX RPC–which is the remote procedure call, the gateway for it–you can make remote procedure calls, so call back-end services and methods, through SWX. And it’s the only RPC solution, really, because Flash Remoting doesn’t work on Flash mobile, on Flash Lite, so it’s the only RPC solution for mobile right now.

Paul: I think what kind of struck me about it was the fact that there are a lot of people out there that maybe have been doing some superficial stuff with Flash…

Aral: Yeah.

Paul: And have been doing some ActionScript and things like that.

Aral: Right.

Paul: But when it gets to things like making data calls, it all seems to get horribly complicated, all of a sudden.

Aral: It does. It gets very hairy, and I don’t know why. I think part of it is because the back-end, the server side, of applications has traditionally been the realm of traditional programmers: the brainiacs, the people who are very comfortable talking in code, thinking in code.

And they’re not always the best people, I find, to simplify concepts, because they’re so intelligent, they can understand all of this, or they have such a focus on this that they don’t mind spending hours trying to set something up. Sometimes, they’re not always the best people to create simpler systems for mere mortals like the rest of us.

Paul: [laughs]

Aral: So that was my main motivation behind it, because I think Flash is great for building mash-ups and data-driven applications. But we don’t get as much experimentation in Flash with that, and I think it’s because it’s too hard. The barrier of entry is too high. You have to jump through so many hoops to get even something basic working, whereas it should just be, off the bat, you should be able to get started with things. And that’s been my focus with SWX.

So, for example, on the Mac, there’s a bundle that you can download that gives you everything you need to start using SWX, with a one-click installer, a disk image.

Paul: Cool.

Aral: My focus, really, with SWX is on simplicity. And when I say simplicity, I mean for the whole process, from the moment you go on the website and download SWX, to the moment you can get up and running. I’m trying to make that whole process as easy as possible, basically.

Paul: From what you showed me when you came into Headscape…

Aral: Yeah.

Paul: Basically, within a few minutes, you can kind of download this bundle onto my Mac. I can run an install file, which sets everything up for me.

Aral: Yeah.

Paul: And you’ve even set up…

Aral: Well, you basically get a development server for free.

Paul: Yeah.

Aral: It uses the MAMP Bundle, which is a great bundle that has Apache, PHP, MySQL. So if you’ve ever been afraid to work with these things, that’s also a way to get started, because there they are on your machine, running, without any configuration or anything on your part.

Paul: And you have also included some kind of interfaces to common APIs, things like Flickr and Twitter and stuff.

Aral: Yes, and in fact, if you remember the installation process and everything that you were talking about, you don’t even have to download and install SWX to start working with the pre-existing APIs that come with it, because I host an instance of the SWX gateway on swxformat.org. It’s the public SWX gateway that you can just hit directly from your Flash applications.

Paul: Ah!

Aral: So if you don’t want to mess with the back-end, but say you want to build a mash-up that uses Flickr or Twitter, currently two of the main APIs that I have on there, you don’t even have to download SWX. You can just open up Flash, write four or five lines of code, and get, for example, the list of your latest photos from Flickr.

Paul: Cool.

Aral: Or your friends’ photos. With nothing else. So you don’t even have to download anything to start working with SWX, because it is native. What you’re getting from the back-end, from that SWX gateway, is a SWF, and Flash knows how to deal with that, and the data in there is a native Flash object and ready for you to use the moment it loads.

Paul: So, how does somebody get started on this? Where do they go? What do they have to do? Especially, you made it sound very simple for the Mac. Is it horribly complicated if you’re a Windows user?

Aral: Oh, not at all, not at all. Like I said, regardless or what platform you’re on, unless you want to build your own server-side services, if you want to use the APIs that it comes with, you don’t even have to download it, actually.

Paul: Oh, OK.

Aral: In fact, just last week, I got moo cards printed. And these little moo cards have all the code you need on the back of them, because there’s only about four lines of text you can put on the back.

Paul: [laughs]

Aral: But they have all the code you need to get the latest public timeline updates from Twitter. So it’s actually, seriously, four lines of code, and it fits on a moo card.

Paul: Wow!

Aral: So, to get started, you don’t have to do anything, really, apart from open up Flash, write four lines of code, and see it run and get the feeling that, “Wow, maybe I can build data-driven applications in Flash, too, because this is simple.”

The next step would be to download SWX onto your own machine. If you have a development server already, if you have a web server with PHP, then you just download the ZIP file, unzip it into your web root, and hit that location in the browser, and the start page comes up and guides you through the rest of it.

Paul: Cool.

Aral: If you’re on a Mac, get the MAMP Bundle, and that’ll get you started even faster. But, like I said, you don’t even need to download anything to start playing with it.

Paul: So these four lines of code to get you going…

Aral: Yeah.

Paul: If they don’t have one of your precious mood cards, where can they go to learn those kind of basics?

Aral: Well, on swxformat.org, there is a screencast right now. It runs you through the MAMP Bundle, but the concepts are exactly the same for all of the rest.

Paul: OK.

Aral: Although, I am going to record a few more screencasts. I’ve started putting them up on Viddler, which is actually really cool. I don’t know if you’re used it.

Paul: Yeah, I have.

Aral: But it’s really great for screencasts, because it keeps the original resolution of your movie. So I’m going to record quite a few more and put them up there, including one that will just get you started, like the moo card does.

Paul: Cool.

Aral: So, look on swxformat.org. And also, look on my blog, because I blog about SWX quite often there: it is aralbalkan.com.

Paul: So as I understand it, at the moment, this is all built on PHP and MySQL. Is that going to change? Are we going to see other platforms supporting this, too?

Aral: Well, basically, the SWX format itself is a data format, so it’s platform-agnostic, in terms of the back-end, etcetera. So if you have a SWX SWF, you’ll be able to load that. Even if it’s offline, if you have if on your hard drive, you’ll be able to load it into Flash and get the data off of it.

Paul: Excellent.

Aral: And then there’s SWX RPC, which is an implementation of a gateway, basically, or an endpoint, that serves SWX SWFs. And the current implementation of that is only in PHP.

Paul: Right.

Aral: So, it will be ported later on. It’s currently in beta. And once we get closer to the release date and certain things are standardized, I’m going to be concentrating on orchestrating the ports. There’s a lot of interest from quite a few people to port it to Ruby, to J2EE, to.NET.

Paul: Excellent.

Aral: And my focus right now is on getting SWX to a level where it’s somewhat of a standard–not like an Internet standard, but at least, within itself, we know what we’re talking about when we say a SWX SWF so that, if it’s being generated from Ruby, it’s the same thing…

Paul: Yeah.

Aral: So there’s no fragmentation. That’s my focus right now. In fact, I’m writing my first RFC…

Paul: [laughs]

Aral: For the SWX formats, just so things are a bit more standardized, before we go porting it to every possible technology.

Paul: Excellent! That just sounds really exciting…

Aral: I’m really excited about it!

Paul: Yeah, I bet you are.

Aral: This has gotten me excited and working with technology again, at a level that I hadn’t been in the past. It’s fun. Because this stuff, the data exchange between tiers, it’s really not rocket science, and it shouldn’t be rocket science. We’re just moving stuff from one place to another. And my philosophy is: make that as simple as possible for people so they can concentrate on the really fun bits…

Paul: Yeah.

Aral: Building the user interface, building a great user experience. Because those are the hardest bits, really, conceptually, and they’re also the most fun.

Paul: Yeah. That’s great stuff, and I wish you all the best with it in the future. And thanks for coming on the show and telling us a little bit about it.

Aral: Thanks so much, Paul, for having me. It was a lot of fun.

Paul: Yeah. OK. Good to talk to you, and we’ll speak to you again soon.

Aral: OK, take care of yourself.

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.

Book Deal

Posted in News on by Paul Boag

I have taken the plunge and finally agreed to write a book. It was a difficult decision and (as is my tendency) I have chosen an unusual route.

I have been considering the possibility of writing a book for some time now after numerous conversations with various publishers, but to be frank I have always been hesitant about the undertaking.

I am under no illusions that writing a book is a lot of work. My father is an author, and I have spoken to many other web designers who have written books. Everyone has warned me that this will suck up a lot of my time and can be a demoralizing process.

However, lets be honest, writing a book is kind of cool. Sure, I can blog and yes I have a podcast which seems to be popular, but nothing beats seeing your name in print. Like so many before I have been suckered by the “glamour” of it all.

I have to admit I find the prospect terrifying. When I look at my peers who have written books I feel way out of my league, but it has been my choice of publisher that has encouraged me to take the leap.

Most web design books are either published by Sitepoint, O’Reilly, New Rider or Friends of Ed but I have chosen to go with a smaller publishing house called Manning Publications. My decision to do that is because they have a much more open and collaborative approach to publishing than I have seen elsewhere. They expose the entire book to the public before it is sent to press, make extracts available on a regular basis and encourage authors to blog about the process of writing a book.

My intention is to be as open about the process of writing as possible. I want to show you chapters at various stages, as well as encourage you to feedback your thoughts and additions. My hope is that the boagworld community can be real contributor to the book, so that it is becomes more than my thoughts alone, but the collective knowledge of the community.

Speaking of openness I suppose I should tell you what the book is about! Basically, it is very much inline with the mission of this website…

This site/podcast exists to help you poor sods who have been lumbered with the job of managing the company’s website. This responsibility is on top of your normal work and has been given to you despite the fact that you know little or nothing about the internet and building websites. It is for you that boagworld.com exists.

The book will be aimed at website owners and tell them what they need to know in order to run a successful website.

If you are a web designer, hold back your cries of anguish, because this book will have lots in it for you too. It will help you better handle your working relationship with clients. It will show you how to communicate with them and hopefully deal with the more complex parts of the process such as sign off of design.

Obviously it is still early stages at this point but expect a lot more from me on this subject in the future.

Taking a brand online

Posted in Design on by Paul Boag

“and here is our style guide”… thump! A huge tome lands on the desk in front of you. When it is written entirely for print, how do you begin to turn it into something that will work on the web?

Of course not all style guides are “huge tomes”. Some are nothing more than a logo and some colours. However, with only a few rare exceptions, they all tend to be written with print in mind. Sizes are set in millimeters and not pixels, logos don’t display well at 72 dpi and colours often just don’t work well on screen.

Many designers feel that style guides limit their creativity, but I would argue that actually you have to be extremely creative to get some guides to work for the web! Below are 4 areas that can be particularly challenging and a few pointers about how I deal with each of them.

Typography

Style guides often set fonts and rarely are those fonts as universal as those found on the web. Generally speaking there is not much you can do about it except explain the limitations to the client. Normally speaking the client will accept the inevitable.

However, once in a blue moon you come across a client who starts insisting. He talks about having headings as images so you can set the font.

Although it is possible to work around the limitations of web fonts using techniques such as sIFR you also need to consider legibility.

The trouble is that often the fonts selected in style guides are picked because they look good in print. However, not all fonts that look good at print resolution, work when reduced to the screen. They often pixelate and become difficult to read especially at smaller sizes.

If you do use corporate fonts make sure they are used at a reasonable size in order to maintain legibility.

Layout

Layout can be another tricky area that is often included in a style guide. The guide might suggest a 3 column layout or stipulate the position of the logo. Although where possible it is good to stick with these recommendations, you should not do so when they conflict with web conventions.

For example I recently worked on a project where the style guide specified the logo should be positioned top right. Unfortunately it has become a convention on the web to display the logo top left and the search top right. Both myself and the client agreed that conforming to this web convention was more important that sticking rigidly to the guidelines.This decision was made easier by the fact that we had stuck very closely to the guidelines in other areas.

Another thing to be wary of in regards to layout is that guidelines often have a bias towards A4 portrait style layout. It also works on the assumption that you have pixel perfect control over positioning. Neither of these assumptions are correct when it comes to the web.

In short I think guidelines about layout need to be taken with a huge pinch of salt. It is extremely hard to replicate them faithfully on the web and as long as other areas of branding are better represented then their absence will not damage the brand online.

Logos

Unfortunately, where you maybe able to get away with changes to layout, you rarely can when it comes to the logo. This can prove an incredible challenge when the logo wasn’t produced with the web in mind. A poorly designed logo can often become illegible when reduced down in size.

Although I sympathize with designers who have to deal with “bad” logos, I would argue that a logo is so central to an overall brand identity (which extends way beyond the web) that changing it is out of the question.

However, although you cannot “change” the logo as such, minor tweaks to correct poor web rendering is possible. I have been known to tweak font size, weighting and spacing in order to aid legibility at smaller sizes. I have also been known to make minor changes to colour which brings us nicely onto…

Colour

Gone are the days when we worried about the web safe palette. However, that does not mean we can now apply colour guidelines without a second thought. There are still 2 major considerations to take into account when working with colour guidelines.

The first is the differences you see in how colour is displayed. I have spoken about colour display numerous times before so I wont repeat myself here. However, the fact that colour can often appear either lighter or darker on some monitors does mean that certain colours that look great in print (where its displayed is carefully controlled) will look terrible to some users.

The only solution to this problem is to manually adjust colours so that they sit nearer the middle of the brightness range. Light colours are made darker and darker colours lighter.

Another aspect of colour I have talked about before is colour bleed. This is explained brilliantly in a 24 ways article by Jason Santa Maria. In essence it means the smaller the text the more the colour of that text is influenced by its surrounding colour. Text on a white background becomes lighter and text on a black background becomes darker.

Again in order to counteract this problem it maybe necessary to manually adjust the brightness of a colour when used on smaller text. You cannot rely solely on the pantone numbers supplied in the style guide.

In conclusion

The key to successfully bring a brand online is to pick and choose your battles. Keep in mind the ultimate aim, which is to associate the website with other marketing collateral in the minds of the target audience. Making this association does not require compliance with every aspect of a style guide. If you comply closely in some areas, this can give you more flexibility in another area without significantly damaging the brand.

My journey with books

Posted in Reviews on by Paul Boag

For me that is the key. Whether I am reading a work book, a novel or a christian book, I always look for something that will inspire and spark my imagination..

Its funny how I have begun to see patterns emerge in the types of emails I receive. One of the most common is an interest in what I read. I am not sure whether people mean just in terms of web design or generally speaking, but I thought I would share my somewhat erratic relationship with the written word.

I used to hate reading. As a child I had serious reading difficulties and to this day I am a painfully slow reader. I occasionally listen to audiobooks but somehow that doesn’t compete with the pleasure of turning a page.

I have a very mixed feeling about printed books. On one hand I hate them because you cannot search them or copy and paste particularly inspiring segments, but on the other hand nothing beats sitting in bed late at night winding down with a decent book.

In answer to the constant trickle of emails about my reading habits, I read four types of books…

  • Web design related books
  • Work related inspiration
  • Novels
  • Christian Books

Web design related

I have posted before my recommendations on web design related books, but if I had to pick a single title I would go with Steve Krug’s “Don’t Make Me Think!: A Common Sense Approach to Web Usability”. User centric design should be the core of all websites whether they are developed in tables, css or even flash. Its a great book, written in plain english that really engages with the reader.

Work related inspiration

These books are not exactly web design related but have an effect on how I work day to day. Again, were I to make a single choice in this category it would be “Getting Things Done: The Art of Stress-free Productivity” by David Allen. I have spoken about this enough in the past, so I won’t bother repeating the impact this has had on the way I work.

Novels

I have to confess that most of the novels I read are trash. They are how I wind down. Most of them are scifi/fantasy related, such as “Wintersmith” by Terry Pratchett. However, other genres do occasionally creep in. One of my favourite authors is Douglas Coupland, a superb writer who has written some amazingly insightful observations about Generation X. His titles include “Microserfs”, “JPod” and my all time favourite “Life After God”. Coupland has always had a disturbing ability to describe my life, from the wall of coke cans in Microserfs to this amazingly powerful quote from Life After God…

My secret is that I need God – that I am sick and can no longer make it alone. I need God to help me give, because I no longer seem to be capable of giving; to help me be kind , as I no longer seem capable of kindness; to help me love, as I seem beyond being able to love.

which brings us nicely on to…

Christian books

If you read this blog regularly you will have gathered by now that I am a Christian. However, outside of the Bible, I never used to read Christian books. Nevertheless, recently that habit has changed following somebody giving me the very powerful and provocative book “What’s So Amazing About Grace?” by Philip Yancey. This book is a no holds bar commentary on the failure of the church especially within the US (although most of his points apply in the UK too). This book not only made me seriously reconsider how I express my faith but also has spurred me on to search out other Christian titles.

Currently I am reading “Mere Christianity” by C.S. Lewis. Until I read this book I don’t think I fully grasped what an astounding thinker Lewis really was. This book is without a doubt the best defense of the Christian faith I have yet encountered.

Ultimate favourite

Its strange though, because where I to pick a single book out of everything I have read as a personal favourite, it would be none of the above. Instead it would be Tolkien’s “The Lord of the Rings”, not because it is the best written or most powerful book I have ever encountered but simply because it was the first book I ever read for pleasure.

Before Lord of the Rings I only read when forced at school. I hated books and found them nothing but boring. It was a school teacher friend of my parents that realized I needed a book to capture my imagination, something that would make me read for pleasure and not out of obligation. Even though I read at a snails pace and struggled to read more than a few pages at a time, she decided to give me a massive tome of a book, simply because she knew it would light my imagination. I will always be grateful to her for that realization on her part.

For me that is the key. Whether I am reading a work book, a novel or a christian book, I always look for something that will inspire and spark my imagination.

It is strange that I have gone from hating books to the point now where it is looking very likely I will end up writing one. Hopefully I will be able to spark the imagination of my readers in the same way that the authors above have done for me.

Excited about client work

Posted in News on by Paul Boag

I don’t talk much about the client work we produce at Headscape, but I am really excited about our latest site and so wanted to share a few thoughts about it with you.

We won the work at least partly due to the boagworld podcast, which in itself is an encouraging start. It proves that guerilla marketing really works and also, clients we win via the podcast tend to be more switch on to the web and our way of working.

The job was to redesign the Visit Thames website from the ground up. New content management system, IA, content, design… everything. It was a big job and a very tight timescale. In fact the deadline was so tight that we initially turns the project down. This is something that we have often talked about doing on the podcast but is hard to do in real life. However, our strategy of not committing ourselves to the impossible proved correct and the client agreed to move the deadline back just enough to get us onboard.
Despite the new deadline this has always been a very tight project and there is still a lot still to do on the site. However, the initial version is a massive improvement on the old site and I wanted to tell you about a few of the cool things we have done.

AJAX goodness

One thing I like about this site is that it uses AJAX and JavaScript but doesn’t rely too heavily on it. The client side code enhances the user experience rather than being an integral part. You can give feedback or send to a friend without leaving the page you were visiting. You can add items to your itinerary without reloading. You can get ideas for trips without jumping from page to page. In short the site implements the principles of progressive enhancement and HIJAX.

Kick ass content management

There are also loads of content management facilities that unfortunately we cannot show you. We have made significant modifications to our in-house content management code base allowing site administrators to do all kinds of cool stuff. Functionality includes:

  • Permission and workflows
  • Geocoding points of interest using Google Maps (like Google My Map)
  • Building up pages from a huge number of modular elements
  • Building and managing your own forms
  • Comprehensive reports on all site forms
  • Personalized dashboard
  • Powerful image library allowing basic image editing
  • The ability to create your own domain shortcuts to specific pages
  • Content expiry alerts

The list goes on and on. All of this is built on .net, which may not be the trendiest language in the world but certainly proved hugely powerful and flexible for our requirements. Another nice technical aspect is the fact that the majority of data is stored as XML rather than in a rigid database table. This allows huge flexibility in the management and organization of data.

Google Maps on steroids

One of the primary functions of the new site was the ability for users to find points of interest, which they may wish to visit when spending a day on the Thames. In total the client had 15000 points of interest that he wanted to give users access to. Not only did the user need to know basic information on these points, he also needed to know geographically where they were. The obvious conclusion was to plot them on Google maps.

Of course the biggest problem with Google maps is that it isn’t very accessible. We therefore also wanted to show the points as a list in addition to plotting them on a map. Our other concern was that it became obvious very quickly that even plotting a fraction of 15000 points was going to create serious performance problems.

Using a big blob of AJAX goodness we managed to overcome both of these problems. Basically, each time the map loads we grab the boundaries of the map and call back to the server, only loading in points that appear within those boundaries. Every time you drag the map it calls back and gets a new set of points. Users that don’t have JavaScript enabled can still use a traditional search option to return points based on postcode or place name. Try it for yourself and see what I mean.

Now, the system isn’t perfect. There is a delay each time you drag (although to be honest most of the time is spent calling back to Google) and we have had to limit the zoom level to stop too many points being called back. However, we are working on ways to improve this and it is still a pretty unique solution.

Task focused functionality

Right from the outset we wanted to focus on the primary goal of most visitors to the site, which was to discover places to visit. If you are spending a long weekend on the Thames for example you might want to find:

  • Somewhere to stay
  • Places to visit
  • Some nice places to eat out

It quickly became apparent that what users needed to do was build an itinerary of points of interest. What is more they needed to print those out in a nicely formatted way including a map to show where those points are.

By concentrating on this primary objective the site has a nicely focused feel, making it much easier to use.

Microformats to boot

Okay, so the code isn’t the cleanest we have ever produced but making the design fluid and scalable with font resizing proved tricky in places. However, all of the points of interest are marked up as Microformats which will allow us to do some cool stuff in future such as downloading them as vcards or integrating them with other systems.

The future

Of course like any site that you produce, all we can see are the bugs and problems. However, I am excited about this site because it has some really cool features and we have a client who is planning for the future. We have some great new things coming soon, which should improve the user experience even further. Oh yes, and it has Poirot sharing his passion for the Thames. Nice.

Show 71: macBoag

Posted in Classic shows on by Paul Boag

On this week’s show Paul talks about user login and registration, Patrick Haney shares his opinions on good design and Marcus covers picking the right web design agency.

Play

Podcast: Download (30.5MB)

Download this show.

To subscribe directly within itunes click here

News and events

The world of web design seems to be bristling with news this week. Nevertheless I have managed to pick a mere five stories worthy of sharing with you:

The WASP Street Teams

The importance of web standards is a message that has now largely reached the majority of professional web designers. If you read blogs, attend conferences or indeed listen to podcasts then you probably know and work with standards. However WASP recognises that there are still a lot of web designers who are not so aware. They are therefore setting up Street Teams, which are local groups who share the “good news” of standards with their local community of designers.

Admittedly there is little in the way of details at the moment, but in principle this sounds like an interesting concept.

Elitism within web design

The Brit Pack has come under attack since SXSW for being an elitist group. Similar bizarre claims are often levelled at conference speakers, however this is the first time it has been directed at a group like the Brit Pack. Exactly why they are considered elitist is beyond me but it does raise an interesting question about what role more prominent members of the web design community should be playing.

Why semantic URLs matter

Robert Nyman has published a nice little post on the value of semantic URLs. In other words why:

domainName.com/page/foo.html

is better than:

domainName.com/page.html?query=foo

He talks about usability and search engine optimisation as well as looking at the development benefits it provides. If you aren’t already using semantic URLs then this post is definitely worth reading.

Buying and selling websites

There is an interesting article this week on Sitepoint. It looks at the idea of buying up failing websites, revamping them and then selling them on. This is definitely worth reading if you are a web design company like us looking for alternative incoming streams beyond pure development projects.

The future of Open ID

I was gutted to miss the Future of Web Apps conference in London. I was therefore understandably excited to see that the podcasts are already online. I was even more excited to see that Simon Willson had taken the time to match up his slides with the podcast to create a screencast on Open ID. Open ID is an area I see huge potential in and can’t wait to see how it develops in the future.

Client corner: Selecting an agency

We have an interesting discussion this week about the pros and cons of different types of agencies. For example should you look for a small specialist agency that focuses on one area of web design or turn too a massive ad agency that handles everything from web design to print and TV. Specialist agencies offer more experience and expertise in their particular field but often require more management, as you need to work with multiple agencies to get the different elements of a project done. Conversely, larger agencies tend to be slower moving and so lack the cutting edge experience in specific areas but allow you to get everything done “under one roof”.  

Ask an expert: Patrick Haney on what makes good design

Patrick Haney is a designer for Harvard University but is probably best known for his flickr photoset. It started as a personal project to keep track of websites that inspired him. He would see a site he liked, grab a screenshot and add it to flickr. However over time more and more people subscribed to the feed until today Patrick is known for his good eye for design. He therefore seemed the logical person to ask: “what makes great design?”

Agony uncle: user Login

Creating a secure area on a website can be a tricky business. Not only are there technical challenges but also usability issues as well. How do you handle usernames and passwords, what if the user loses their password and how do you streamline the registration process? In this week’s agony uncle section we look at setting up a secure area, the technology and the downsides of locking content behind a password. 

Review: Moving to the mac

So while I was away in the states I bought a macbook. I know, I have been rude about macs in the past but the exchange rate was so good and it just sat there looking all black and sexy. Since returning to the UK I have been undergoing the process of moving across. This has proved an interesting experience and so I thought I would share some of it on the show. I cover things like:

  • Apples attention to detail in their hardware
  • The intuitive interface of OSX
  • Why good user interface design is about leaving stuff out
  • Why I am missing Office 2007 (Entourage sucks!)
  • The rose tinted glasses of most mac users
  • Why I believe that Vista is a viable alternative for some users.

Show 66: Beyond HTML

Posted in Classic shows on by Paul Boag

We have a bit of an audio and video theme to this week’s show with Ian Forrester talking about online video and Paul sharing some advice on creating a podcast. Marcus also continues his series on client contracts by looking at “the statement of work”.

Play

Podcast: Download (26.9MB)

Download this show

To subscribe directly within itunes click here

News and events

Mobile internet usage increasing

This week the BBC has reported that 15.9 million handsets in the UK accessed the web in December. This is an increase on over a million on the previous month. This further underlines the fact that the mobile web is going to be the big growth area in 2007.

Headscape recruiting

Headscape is expanding yet again. We are currently looking to recruit a .net developer and an experienced css/xhtml coder. If you are interested in either position send an email to [email protected].

Great British Booze Up

If you are attending SXSW this year then come along to the Great British Booze Up. ClearLeft, Boagworld and @Media 2007 are taking over a “British themed pub” (yeah right!) to bring you an evening of traditional British entertainment.

Enhance your page performance

There are two new articles on the Think Vitamin website this week. Unfortunately Chris Heilmann’s Article is far more interesting than my own. He looks at the issue of page performance, outlining some of the common problems and how to address them. He also has an interesting discussion on page performance verses best practice.

Some handy flash tips

Robert Nyman has obviously been struggling with Flash recently as he has posted two very useful tips on dealing with that pesky plugin ;) He shows you how to embed flash without invalidating your code as well as how to place an HTML element on top of a flash movie.

Client corner: The statement of work

This week Marcus takes a look at the statement of work, which is the cornerstone of the contract between client and developer. In particular he focuses on the various stages of the development cycle and what information needs to be covered in the contract. Elements covered include:

  • Kick off meetings – Who will attend, what documentation will be produced?
  • Information Architecture – Will there be expert reviews, stakeholder interviews or card sorting? What documentation will be provided, who will do the recruiting? What about wireframe testing?
  • Design concepts – How many concepts will be produced? How many different pages will be demonstrated? What happens if the client doesn’t like the design?
  •  Template development – What types of pages will need designing and building? What additional style sheets are going to be produced (print, mobile, low vision)? Will the client sign off each template?

Ask the Expert: Ian Forrester on video formats

Ian Forrester from BBC backstage and the Geek Dinners joins us to talk about online video. He talks through the different formats available (quicktime, real player, windows media and flash) as well as the different delivery mechanisms (steaming, download and progressive download).

Producing a podcast

Probably the most common question I get asked is how I go about producing Boagworld. That is why in this week’s show we combine the review and agony uncle sections to talk about the whole area of podcasting.

I share some thoughts on creating the right format as well as reviewing a range of podcasting tools including:

Podcast 42: Choosing the right design

Posted in Classic shows on by Paul Boag

It’s not unusual to be in a position where you have to choose between more than one design for a site. This podcast may help with the question “which design do I pick?”.

Play

Podcast: Download (30.7MB)

In this week’s podcast Paul and Marcus discuss the decision making process involved in settling on a design for your site. Whether you are a designer or web site owner this podcast provides some interesting techniques for choosing the right design.

Download this show.

To subscribe directly within itunes click here

Help us out. Complete our podcast survey

How to approach choosing a design

Your approach to assessing a design is as important as the quality of design itself. Approaching your assessment in the wrong way can quickly lead to the wrong conclusions. Below are a few quick tips on assessing a design:

Avoid personal opinions

Design is very subjective. We all know what we like and yet we very rarely agree on what that is. It is easy to simply assess a design based on your personal preference. However, the chances are you will not be the end user of your site and so the design should cater for a wider audience than just you.

Be careful who you show

Although you don’t want your decision to be based on your personal preference you still need to think twice before you start showing it around. The temptation is to show it to work colleagues to get their feedback however they aren’t your target audience either (unless you are building an intranet). Try and avoid design by committee, have one decision maker that collates feedback from end users rather than co-workers.

View the design in context

It’s important that you assess a design within its context. Never print a design out to make your decision. Access each design on screen and within a web browser. After all, that is how other people will view it.

Check on multiple monitors

A design can look radically different on various monitors due to colour balance and gamma settings. Make sure you look at the designs on as many different screens as possible. A good design needs to be flexible enough to accommodate the different screens your site visitors will be using.

View at different resolutions

A design not only needs to work on different monitors but also at different resolutions. The resolution your PC is running at affects what can be seen on a design before you need to scroll. It is therefore vitally important to ensure key content doesn’t slip below the fold.

Accessing the design

Once you have worked out how you are going to go about assessing the design the next step is to establish the criteria by which you are going to make that assessment. Below are some initial ideas you might wish to use. Each of these areas could go into a lot more depth but I have tried to keep to the main points within each area.

Colour

Colour is a very subjective area, so rather than asking people what they think of a colour, ask them what words they associate with a colour palette. That way if they say a colour conjures up images of "progressiveness" you can compare this with the messages you want the site to convey.

Layout

There are two things to look out for when assessing the layout. Does the design have enough white space and does it have an underlying grid structure. White space allows a design to breath, making content more readable. A grid structure provides some organisation to the design and its absence can leave a design feeling chaotic.

Weighting and flow

Does the design draw the eye to key content and show the user what to look at next? Ensure that the design you choose puts the emphasis on the right elements in the same way a newspaper always makes it clear what the lead story is.

Typography

As with layout there are two key things to look out for when it comes to the text on your site. Firstly, make sure that the text has a decent space between lines. Tightly packed text can be really hard to read and will dramatically reduce dwell time. Secondly make sure that the designer has broken up larger blocks of text with headings, sub headings, bullets etc, as this dramatically improves scanability.

Accessibility

Obviously accessibility is a huge area but within the context of choosing a design there is only one main thing you need to know: Can you read the copy? Is there sufficient contrast between foreground text and the background? Avoid designs that you have to strain to read because ultimately they will drive users away.

Usability

Is it obvious what the user should do next? Do links look like links? Is the main navigation clearly positioned and labelled? Is the user overwhelmed with too many options? In many ways usability is the key criteria I use for judging design. Ultimately users just want to get at information as quickly and easily as possible and the design should not get in the way of that objective.

Branding

To a website owner this is probably the most obvious of the assessment criteria. How well does the design conform to your style guide and tie in with existing print material. A continuity across marketing collateral is vital for establishing a strong brand identity and the web is very much a part of that.

Imagery

The final area of assessment is the choice of imagery. Imagery can make or break a website. Some warning signs to look out for include:

  • Small busy images that are hard to see
  • A lack of consistency across the site with different styles of imagery, all mixed up together
  • Images that grab your attention away from content rather than directing you to it.

The golden rule

If there is a golden rule to choosing the right design it would be communication between client and designer. A client should listen carefully to what a design has to say about their design approach and the designer should be able to clearly communicate their ideas and why they have made the decision to produce a certain design. Too many designers fail to justify their approach and too my clients make up their minds about a design without listening to the logic behind it.

Also in this show

In this week’s show we take a look at a number of web conferences including the @media podcast feed, Refresh Orlando (which Paul will be speaking at) and d.contruct. We also discuss the ethical issues surrounding being "inspired" by another website, as well as a review of the Wiltshire Farm Foods website.

Podcast 39: Mature Flash

Posted in Classic shows on by Paul Boag

This week on the boagworld podcast Paul chats with Aral Balkan, one of the leading figures in the open source flash community.

Play

Podcast: Download (23.7MB)

Download this show.

In our previous podcasts on flash we focused very much on the dangers associated with adding flash to your site. Although this was a necessary discussion it gave a somewhat one sided view of what is a very exciting technology. Therefore we thought it would be a good idea to redress the balance by looking at just how much flash has matured over the last couple of years.

Paul and Aral discuss:

Also in this episode of boagworld Paul and Marcus discuss whether accessibility is holding back the world of web design and how to write a good CV as a freelance web designer.

@media is almost upon us

Posted in News on by Paul Boag

Well I have just received my email from Vivabit giving me all the details about next week’s @media conference and it has finally made me look through the list of sessions. I have to say I feel like a kid in a candy store.

I have been intending to write a post on my hopes and expectations for this years @media conference for the last few weeks. However, it wasn’t until today that I have had a chance to look through the list of speakers and the subjects they will be tackling. And what a list it is!

Last year’s conference was a real turning point for me. I had become weary of web design and lacked inspiration and motivation. Listening to others enthuse really set me on fire again and led to this blog and subsequent podcast. So as you can imagine my expectations for this years conference are unrealistically high. However, the list of sessions did nothing to tame my out of control enthusiasm. It is as if somebody has asked me to list all of the areas I am passionate or concerned about and then made it into a 2 day conference.

Here is the list of sessions that have fuelled the fire of expectation:

Bulletproof Web Design

As somebody that has only recently embraced fluid design (as you can tell from this legacy site) I can’t wait to hear what Dan Cederholm is going to say to help people &#”;let go of pixel precision&#”;. My hope is that Dan can help me deal with some of the frustrating issues that arise from designing with ems and percentages.

The fine art of web design

I have been going through a bit of a stale patch with design for a while now. I feel like I am always having to fight clients to get anything other than the most mundane designs past them. Sometimes it is easier just to churn out the same old mediocre crap when you are faced with a difficult client. However, I am hoping that this session will put some fire back in my belly and make me fight my corner a bit more.

Fine Typography On the Web

Dave Shea’s presentation on typography looks intriguing if nothing else and I cannot wait to hear what he has to say about the state of online typography. Can we really be moving away from Verdana and Arial? Is there really a magic solution I am unaware of?

Mobile Web Design

I am interested to hear what Cameron Moll has to say on the subject of designing for mobile devices, as I have heard so many conflicting messages from &#”;just remove the stylesheet&#”; to &#”;mobile design is to web design what web design is to print&#”;.  It’s an area that I keep meaning to investigate in more depth because I believe clients will soon by requesting this from us as a matter of course.

The New Accessibility Guidelines: WCAG 2.0

Now this is a panel with a lot of potential!  Following Joe Clarks article on the subject I am hoping for a hugely constructive debate… that or a good old moan. I am open to either!

Don’t forget to say hello

To be honest I could have listed pretty much every sessions . How all of this is going to be crammed into two days is beyond me.

Anyway if you are going make sure you come up and introduce yourself. I will also be at the pre-event bash on Wednesday night so it would be great to see you.

Podcast 36: Developing your site structure

Posted in Classic shows on by Paul Boag

In this week’s show, Paul gets depressed about the state of online accessibility, we debate the virtues of user testing design and discuss the basics of creating a good structure for your site.

Download this show.

Check out Paul’s book recommendations

Developing your site structure

Organising the content of your site into a logical, user friendly structure is fundamental to its success. In this week’s show Paul and Marcus look at how to go about this process and some of the pitfalls you should avoid.

There is nothing particularly high tech about creating a good information architecture. The best place to start is by making a list of all of the content your site needs to cover. Print out each item on a separate piece of paper and start organising them together into logical groupings. It really is as simple as that.

Of course, even better than you organising the content into logical sections, is getting your users to do it for you. That is where card sorting comes in. In the podcast we discuss card sorting in more depth but most of what is cover can be found in the boagworld article on card sorting.

The conversation moves on to discuss the common mistakes made by those creating a site structure. Most of the points discussed are covered by Louis Rosenfeld’s excellent article: "Seven Pitfalls to Avoid in Information Architecture" so we recommend you take the time to read it.

Question time: Can you user test design?

In last week’s show Andy Budd and Paul took slightly different positions over whether it is possible to user test design work. In this week’s show Paul explains how he believes user testing can be beneficial to the design process, allowing for the resolution of design differences and enabling the testing of emotional responses to design.

Techno-buster: Different server side languages

The vast majority of the clever functionality we see on websites today is created through the use of "sever side languages". These programming languages allow a variety of functionality from content management systems to ecommerce sites. However with so many different languages out there it can all seem incredibly confusing. In this podcast Paul and Marcus explains how the average website owner shouldn’t have to make decisions about programming languages, but rather this is the responsibility of the developer. Different languages have different pros and cons, however in most cases it is down to personal preference. However, make sure that your website server supports your chosen language before development begins.

The state of web accessibility

Following Joe Clark’s hard sitting article about the WCAG 2.0 on the List Apart website, there has been much debate about the state of web accessibility. Paul and Marcus share some of their concerns and comment on the Web Standards Project response to Joe’s article.

Podcast 31: Working with style guides

Posted in Classic shows on by Paul Boag

Taking a corporate identity and making it work online can be a challenging process. This week Paul and Marcus look at how to take a style guide and make it work on the web.

Download this show.

The majority of larger organisations have some kind of style guide. Normally this was put together by the print design agency that created their brand identity. Unsurprisingly therefore, it refers heavily to the use of that identity in printed material with often only a passing reference to the web.

It is not unusual for style guides of this type to be full of references that are either not relevant online or which cannot be adhered to for technical reasons. References to Pantone colours or centimetres have to be reinterpreted for the web as does the choice of fonts and size/positioning of the logo.

This podcast discusses the various problems that can occur when working with print style guides and looks at possible solutions. It also stresses the need for flexibility and compromise between client and designer.

Question time

This week’s show is also packed with listener questions. Paul and Marcus discuss questions relating to:

  • The use of images for headings
  • Whether clients care about web standards
  • The use of interactive site features like forums
  • Setting up an online business

Techno-buster: PNG

The techno-buster this week looks at the PNG image format. Paul and Marcus compare PNG with JPEG and GIF, discuss its advantages and disadvantages as well as looking at some solutions for poor browser support.

Web resource review: Bite sized standards

This week’s web resource review looks at a new site to emerge called Bite Sized standards. This site is aimed at busy designers and developers who struggle to keep up with all of the latest web standards techniques. It collects together all of the latest approaches, strips out the discussion and provides the raw code in a nice digestible form.

We’ve been immortalised!

Finally we wanted to let everybody know that some enterprising group has turned the boagworld podcast into a range of merchandise. Although the design needs some improvements and they didn’t consult us first, the boost to our egos is enough for us to let them off! Check them out and buy one if you are brave enough to face the ridicule!

Podcast 29: The great flash debate

Posted in Classic shows on by Paul Boag

Flash is one of those web technologies that always generate a lot of debate. In this episode of boagworld.com Marcus and Paul go head to head arguing the pros and cons of this controversial plug-in.

Play

Podcast: Download (21.1MB)

Download this show.

Marcus and I have never really agreed when it comes to flash. Marcus is easily seduced by anything that animates or "shows off" in someway. I on the other hand take a much more balanced view, believing that flash is the spawn of the devil adding nothing to the web but accessibility and usability problems (hell its my blog, I can be completely bias if I want!). So with that in mind we decide to fight it out in the great flash debate:

The case in favour of flash

To be frank Marcus’ argument was appallingly weak and I can barely bring myself to repeat it in these notes. However, in the interests of fairness here is the crux of his argument.

  • Macromedia claim that Flash is available on well over 90% of the world’s computers.
  • That unlike HTML, CSS and even to some degree JavaScript, Flash renders fairly consistently across all browsers. This makes it a dependable and consistent development environment.
  • There are something’s that Flash just does better or that are simply impossible using other technologies.
  • That flash is the ultimate attention grabber with flash sites being far more visually engaging than HTML sites.
  • Flash advertising has a 5 times higher click through rate than HTML adverts. This demonstrates that people respond to it better.
  • With the number of people on broadband continuing to rise there is an ever greater demand for rich media content which utilises the increased bandwidth.

The case against flash

Although I was forced to grudgingly agree with some of Marcus’ points I wasn’t willing to give up without a fight. My valiant response went something like this:

  • Despite Macromedia’s outrageous claims about availability, ultimately Flash is a plug-in and so not everybody has it.
  • Search engines find it hard to spider flash files and so can have an adverse effect on your sites ranking.
  • Flash encourages poor practices including (but not limited to):
    • Mystery meat navigation
    • Annoying animation and sound
    • The "its art damn it" argument against making the things usable
    • A failure to test across different operating systems and browsers
    • As well as being hard to spider for search engines, flash also creates all kinds of accessibility problems for speech browsers.
    • By default flash breaks the back button in your browser
    • By default flash breaks bookmarking of specific parts of your flash application.
    • It is a closed format (no view source) preventing the cross fertilisation of techniques and ideas.
    • It doesn’t print well using the default browser print functionality.
    • Flash is often bandwidth intensive so penalising dial up users.
    • A lot of corporate environments actively block flash.
    • Flash is also often reliant on JavaScript creating even more accessibility problems.

I could have gone on. For example I could have mentioned IE’s latest problems supporting flash. But I guess I had made my point :)

The happy middle ground

Although we had a lot of fun arguing our corners, the reality is far less black and white. Like all technologies Flash can be used for good or evil. It is how you use it that matters not the technology itself. Flash is great for complex applications like mapping or horrendously long forms. It’s incredible at communicating complex ideas through audio, video or animation but even in these situations it can be used badly. Unless you know exactly the audience and user platform (like for some corporate intranets) you should always offer a more accessible alternative. You should avoid making entire sites in flash and using it too heavily for navigation which can not only cause accessibility problems but also search engine ranking issues.

Have your say

So what do you think? If you had your way would you ban flash from the web. Or do you believe that flash is the next natural evolution and we can all throw our HTML books away. Let’s see if we can’t start a flame war in the comments ;)

Podcast 23: Defining your project

Posted in Classic shows on by Paul Boag

This week on boagworld.com Paul and Marcus discuss the need to define clearly the scope of your web project before rushing into the build.

Play

Podcast: Download (18.8MB)

Download this show.

TechnoBuster: Semantic code

Semantic code is a term that is thrown around a lot at the moment, but what is it and why should you care? I try to explain to Marcus in very small words what it’s all about!

Check out our article on this subject

Main feature: Scoping your web project

Carefully planning your website before you start to build might not sound like the most exciting theme for a podcast but it is fundamental to a successful website project. I know from bitter experience that not doing so can lead to a world of pain for both the developer and the client. In this weeks show we share loads of tips that we have learnt over the years. Here are just a few of them:

Take the long view

Many clients force agencies to start projects before they are fully prepared, either because they are unwilling to pay for a scoping phase or because they have a tight deadline to meet. This kind of short-term view does nobody any favours. If a project is not properly defined at the outset, it will inevitably lead to slippages and additional expense. A developer needs time to understand the requirements before they begin to build. If they don’t, they will be unprepared when they encounter unforeseen technical issues.

Everybody has to sign off

Having a statement of work that everybody has signed off on is a great way to ensure client, developer and designer are all singing off of the same hymn sheet. It avoids miscommunication and misunderstanding by clearly defining what is going to be delivered.

Do you really need that?

The scoping phase should not only identify what tasks need to be done, it should also take a long hard look at what functionality is being considered. If you are not careful, your statement of work can turn into a wish list of functionality rather than a considered document which factors in return on investment. Ask yourself, if I spend all of this time building a certain piece of functionality, will it pay dividends for my organisation.

Be specific

It is easy to be vague about your scope, but if you do, there is room for confusion. The statement of work should cover everything from how many design iterations there should be, to what browsers the site is going to be tested on. Make sure your list of tasks is as detailed as possible, that way you will avoid any nasty surprises half way through the project.

Phased development

Don’t be afraid to phase a project especially when faced with a tight deadline. If your website has to be live by a certain date, it might be wise to leave out some of the "bells and whistles" until post launch. It is easy to forget that your website should be an evolving animal that can grow over time. After all, saving some of the functionality and rolling it out later gives you a good PR opportunity.

The hidden technology killers

Beware of those little technology issues that are so easy to overlook. For example, pay particular attention to which browsers you are going to support and what accessibility level you will be conforming to. Finally don’t forget to factor in time to deal with those extra style sheets for print, mobile or low vision users.

Web resources: Getting your layout right

This week I picked two sites that help designers develop the perfect layout.

Web Design Practices
A great site that shows you the trends in layout based on an analysis of several hundred websites. This site answers invaluable questions such as; "where does the search box normally appear" and "do most sites use side or top navigation?"

Although slightly out of date and centred largely on ecommerce sites, this is still an excellent resource. However, remember, just because a lot of sites do something a certain way doesn’t make it good practice!

Layout cookbooks
Have you ever had a client who knows what they like when they see it? If so, send them over to the layout cookbook and get them to look through the hundreds of different screen layouts available there. It’s also a great place to get some inspiration when you feel like all your designs are using the same basic layout!

Web Design Podcast (13) – Choosing a web design company

Posted in Classic shows on by Paul Boag

This week we look at the selection process for choosing a web design agency. As a client, how do you pick the right company for you? Conversely, as a web design agency, how do you make yourself attractive to clients?

Play

Podcast: Download (15.1MB)

Download this show.

Okay, I admit it, the last person you want to ask about choosing a web design company is a web designer!

there are many cowboys around that damage the entire profession

He is bound to think you should choose him and that his company is the best. In addition, to be honest, there are many cowboys around that damage the entire profession. I hope that the other entries on this site prove that I am not one of those but I still encourage you to take what I say with a pinch of salt. After all, I am bound to be a little biased.

After saying all of that, here are my recommendations for those seeking a web design company to work on their site.

Are they a full time web design company?

A strange question to start with I know but it is one worth asking. There are a surprising number of students working out of their parents’ back bedroom. If you have a limited budget that might be fine, but if you are talking about a serious web development project these kinds of groups will get out of their depth very quickly.

How many people are in the company?

The size of the company is a good indication of its capabilities but also of its overheads. A large company is often unresponsive and tends to have a higher charge out rate. A one-man band can be much cheaper and keener to please but can sometimes be overwhelmed by larger more complex projects. Look for a company that is of the size that best suits your project.

What is the main revenue of the company?

Some companies offer web sites in addition to their main business. A number of graphic designers and printers have branched out into the web design business. Equally, many technical development houses have moved across into web design. In my opinion, it is better to seek out a company that specialises in web design and are experts in that area.

Do they charge for initial consultancy?

Some companies will try to charge for initial consultancy or avoid engaging in project specifications until the contract is signed and sealed. My advice is to avoid companies like this. A good web design company should be willing to meet with you free of charge to discuss the specifications of your project before drawing up a fully costed proposal.

Can they build what you want?

Make sure that they have the capabilities to deliver what it is that you require. It helps if they have produced something similar, which they can refer you to. Do they have the right resources and technology? Do they offer web hosting and diagnostics for your requirements? What kind of support do they offer?

Are you tied in to them once your site is built?

This is probably the biggest problem faced by website owners. Many web design companies build websites that neither the client nor another web design company can edit. Make sure that you aren’t going to have to go back to the web design company every time you want to make a change on the site. Also, make sure they are using industry standard tools to build the site in the first place. That way if you are unhappy with them you can go to another company for future development work.

What is their portfolio like and can you view the live sites?

You must see some published work. Starting with the design company’s own web site, and some of their clients’. Do you like them? Are they visually appealing? More importantly, are they easy to use. Also check that they are capable of tailoring their designs to fit the client and that they don’t have too strong a house style.

Do they have clients willing to talk to you?

Is their service of a standard that their clients will recommend them? If they are good and competent designers then they should have clients who are prepared to discuss their experiences.

What is their charge out rate?

Don’t be afraid to ask them what they charge per day and what the average value of their projects is. However, watch out, some design agencies will have a low daily rate but will make sure that the project lasts long enough to make a profit! A good web design agency shouldn’t have a problem telling you their rates. After all, it is a waste of everybody’s time if your budget doesn’t fit with their daily rates. However, it is also useful if you give them an indication of what your budget is because they should be able to tailor a project to fit your budget.

What is their approach to project management?

Will they give you a full proposal with timescales and milestones? Do they have dedicated project managers who will look after the running of your project?

How will they build your site?

Do they build with the latest web standards? Do they understand accessibility legislation and your obligation to make your site available to the widest possible audience?

Do they have long-term clients?

Not only does the presence of long term clients demonstrate a high level of customer satisfaction, it also shows an understanding by the web design company of the need to build sites for the long-term. All web sites have to grow and evolve over time and agencies that work with clients over the long-term know how to design a site flexible enough to change with the company’s requirements.

Conclusions

Hopefully some of the above was helpful and not too biased towards Headscape. Just to show my complete impartiality you might want to check out the independent directory of web designers at the UK web design association. This will provide you with a complete list of web designers in the UK and allows you to search by county and by skill.

Web standards explained

Posted in Development on by Paul Boag

Today I have once again been working on the new Headscape site (yes, one day it will be finished I promise). One of things I did was write a brief introduction to web standards and I thought you might want to see what I have written.

For years, web designers have been secretly holding together your site with sticky tape and string. The code that underlay many sites looks like some kind of HTML soup with random nested tables and font tags roaming wild. However, things are changing… there is now a better way to build your web site.

Enter web standards

Web standards are about completely separating content from design. This means that the content on your site is held in the HTML and your design is defined by a special CSS file. This allows the content to be described semantically in the mark-up rather than being cluttered up with design elements.

So this:

<font color="#FF0000" size="6" face="Verdana, Arial, Helvetica, sans-serif"> This is a heading </font>

becomes this:

<h1> This is a heading </h1>

Now isn’t that tidier, at least us geeks think so.

Why should you care?

It is important that your site is built using web standards because it offers you:

  • Better accessibility – Sites built with web standards find it easier to conform to disability legislation
  • Better print facilities – Have a separate print style designed especially for printing. No more badly printed sites! Try printing this page to see what we mean.
  • Backwards compatibility – Web standards ensures that your site will be useable on any browser no matter how old.
  • Delivery to multiple devices – By separating content from design you can deliver your content to a mobile phone or a touch screen kiosk just by changing the design.
  • Increased speed - Web standards produce cleaner code and smaller files. These download quicker increasing the speed of your site.
  • More flexibility - Because design is controlled by a small set of files, it is possible to quickly and easily change the look of your site without a complete rebuild.
  • Improved search engine placement – Search engines do not care about design, they only care about content. By separating the two, it makes it easier for the search engines to understand your site.

Avoid the sticky tape; make sure your web design company builds this way.

Print designers and the web

Posted in Design on by Paul Boag

I often find myself working along side traditional marketing agencies when developing websites. However, today is the first time that I have seen a client’s website suffer because of it.

I like to think Headscape are a talented bunch. Certainly based on the feedback from our clients we do a reasonable job. However, for the first time ever we have come across a client who we seem incapable of pleasing.

Currently we are working on a project where we have produced three separate designs for the client. We have gone through endless iterations and have really tried to take onboard their comments. I can honestly say that the design work we have produced for them is some of the best we have done. However, despite all of that we have failed. We have failed to find something the client likes.

Although we still have a good working relationship with the client, they have decided to get their marketing agency to do the design work for the site. Today I got my first look at what they have produced and frankly, my heart sank.

Print designers failings

Okay, we all know that design is subjective. Just because I visually don’t like the design a lot, doesn’t mean it is actually bad. However, it does suffer from some of the classic problems associated with a print agency producing screen based design. Here are a few of the issues I have spotted:

Resolution

One of the most common mistakes made by print agencies working on web design is that they take no account of screen resolution. The design proposed by this agency would involve sideward scrolling at 800 by 600. Not a problem you face with a nice printed brochure!

Colour palette

Colours that work well in print just don’t always work on screen. Reading online is bad enough anyway without choosing colours that buzz or just break up at low resolutions.

Accessibility

Accessibility isn’t something that is often considered in print material but is vitally important on the web. Forms without submit buttons, designs that can only be built with JavaScript and form fields that don’t look like form fields are just a few of the mistakes often made by print designers.

Technological constraints

Print designers just don’t have a grasp of the technological constraints on the web. The limited number of fonts, the layout restrictions of content management systems, the quirks of different browsers (in rendering HTML & CSS), the list could go on. Understanding your medium is vital to creating a successful design.

Usability

Probably the biggest failing of print designers who work on websites is their failure to understand how users interact with websites. Print designers often just try and replicate a brochure online. They don’t take into account that users don’t like to read big blocks of text, or hate to scroll. They don’t grasp that web users skim read pages trying to quickly find key content. The result is that you see designs that use multiple columns of text with little to break it up into blocks.

For me using columns of text, such as you would find in a printed publication, is the ultimate print designer’s failing. Not only is it hard to scan but also involves constant scrolling up and down the page.

Our failings

I would love to be able to post the design here and allow you to compare it to the ones we produced but that would be unfair on the client. The problem is that the client is more used to offline printed material than the web and so they are heavily influenced by what the print agency produces. That’s not the clients fault, that is a failing on our part to educate the client about the realities of web design.

So what about you? Have you come across similar problems? Are their other common mistakes I have missed? Add your comments.

New National Trust site: Accessibility failure?

Posted in Accessibility on by Paul Boag

Yesterday I wrote about the imminent arrival of the new National Trust website and my involvement in the last version. Well today, the new site has gone live and I am left feeling somewhat disappointed by the result.

Perhaps I am suffering from a case of sour grapes because I did not design the new version. Perhaps after 18 months of waiting and countless delays in the launch date I had set my expectations too high. Perhaps I was just being naive believing the publicity that promised improved usability and accessibility.

In my last post, I outlined four hopes I had for the new site. These were:

  • A desire to see the navigational shortcomings of the old site dealt with
  • A site that conveyed the awesome architecture and countryside the Trust manage.
  • A site built with the latest in web technology (web standards)
  • Improved accessibility

So let us look at each of these in turn.

Navigation

The problems of the old sites navigation were apparent to anybody. There were reasons why it was done in that way but at the end of the day, they are no excuse. My hope was that the new site would provide a clear navigational approach that would aid users to find their way around what is an enormous site.

Although the navigation is now definitely more flexible I am not actually convinced, it is any clear or easier to use.

It took me some considerable time to work out how the navigation worked at all. From the homepage, it would appear that the top-level sections are listed across the very top of the page. However, after navigating around the site for some time I discovered this was not the case. The top-level navigation is actually represented by the three boxes in the centre of the screen (which btw, appears below the fold at 800×600). The links at the top of the page are shortcuts to content buried deeper in the sites information architecture. Perhaps it is just me but I was totally thrown by the idea of only three top-level sections that appear as images below the fold of most users’ screens.

Once you move beyond the homepage things do not become much clearer. One click beyond the homepage and you arrive at landing pages for each of the main sections. These display the sub navigation at the bottom of the page. Click on one of these options and the sub navigation now leaps to the left hand side of the page. In its defence, this side navigation works very well. It is clear, consistent and highlights the section you are currently in.

Although in many ways, the navigation is a vast improvement on what came before it seems to have lost consistency along the way.

Site look and feel

In my last post, I said how I hoped they would make good use of the huge photographic library the Trust has to portray the amazing architecture and countryside the Trust manage. Now, look and feel is a personal thing, but I do not feel they have captured any sense of the Trusts holdings. The site seems to be more about navigation and interface than message. The homepage does the best job at portraying more and perhaps that is enough.

Web standards

Another less surprising disappointment was the fact content has not been separated from design. Why does this matter I hear you ask? Well without repeating everything that I have written on the subject in the past, probably the biggest drawback is with printing. The demographic the Trust is trying to reach generally find reading on screen a painful process. They tend to like to print content and read it offline. However, because this site uses table based design the printed version often looks messy and in a few occasions cuts off content on the right hand side of the screen.

I guess it is not the end of the world that the site is not built using web standards but they have missed many benefits by letting this opportunity pass them by.

Accessibility

This area is the one that really horrified me! The new site promised improved accessibility, but if anything, it has taken a step back. At the very least, I was hoping the site would pass an accessibility test by an automated check like Bobby, but it fails even that. The previous site produced back in 2000 allowed the user to resize text in the browser, and change the contrast and font size using a style sheet swapper. Five years on and not only does the new site fail even the most basic accessibility test but it also drops the only accessibility feature that existed on the previous version! I am in shock that the site could so badly fail its users many of whom have visual and physical disabilities associated with old age. Yes, it is possible to resize some of the text but much of the navigation now uses imagery that cannot be resized.

Bitter and twisted

Perhaps I am being melodramatic. Perhaps you are better off ignoring my sad rant that betrays my feels of rejection at not being involved in this rebuild. I would be interested to know what other people have to say about the site. Am I completely loosing the plot?

National Trails web site launched

Posted in News on by Paul Boag

Today sees the launch of the Countryside Agency’s flagship website about the network of National Trails. This site is the culmination of month’s worth of work by the team at Headscape and I thought I would share with you a few of the highlights and lowlights of the project.

The brief

It was a challenging brief. Take twelve separate trail web sites and unify them under a common brand while still maintaining some sense of individuality. In addition to this, we had to conform to basic levels of accessibility, integrate a content management system that allowed individual trail officers to manage their own sites and come up with a user-friendly way of accessing a large database of accommodation and services.

Problems of interface

For me personally the number one problem to solve was the inconsistent user experience across these multiple trail sites. Users were faced with inconsistent positioning of navigation, different information architectures and conflicting terminology. The only sensible solution was to standardise the interface across all sites. Not only would this solve the user experience problems it would avoid the overwhelming challenge of having to come up with designs for twelve different sites!

Of course, there were two downsides to this approach:

  • This did not solve the briefs demand for a sense of individually on each site
  • It made it harder for the user to instantly tell which trail they were on

The solution was to give each site its own unique colour scheme. By doing this, you could associate very different feels with each site while also giving the user clear visual clues when they moved between different trails.

Web standards, the cornerstone of this project

Once I had decided upon on the approach it became obvious that a web standards approach would rapidly accelerate the development cycle. By separating content from design, I could create one basic layout and use cascading style sheets to change the colour palette of each site.

Web standards brought other benefits too. By separating design from content, we could easily address the need to conform to single ‘A’ compliancy in regards to accessibility. What is more we could easily supply an alternative printable style that ensured the site only printed certain page elements. I felt this was particularly important, as much of the information on the site would actually be useful to visitors while physically visiting the trail.

Finally, web standards allow us the ability to continually tweak and refine the design through the life cycle of the project and indeed after launch. This enables us to be much more responsive to feedback and work out any user interface bugs that might be spotted along the way.

The lowlights

I have to confess that normally I get to the end of the project like this hating the site because I have just worked with it too long. However, in the case of this site I do not feel that way. Of course that is not to say there aren’t a few things that still annoy me about it.

One of the biggest problems we have yet to overcome (although we are looking into some options) is the WYSIWYG editor we are using in the content management system. We seem unable to find an appropriate editor that produces clean code, which does not invalidate the occasional page. What is more there does not seem to be an editor on the market that forces the user into ensuring any content they add is accessible.

Another annoyance for me is that I have been forced to use some table layout on the homepage. This does not in anyway cause problems it is just a matter of principle on my part.

A crowning glory

Despite the odd annoyance listed above and a few hundred little bits and pieces, I am actually incredibly pleased with how this site has turned out. It truly is a crowning glory for Headscape and easily the best piece of work we have done to date (in my opinion). The size and complexity of the site as much as anything else makes it an incredible achievement. I have particular respect for Charlie Allen the project manager on the site who has dealt with 12 individual clients, and been responsible for the population of over 75000 web pages worth of content.

Another feature I particularly like are the flash maps created by Chris Sanderson one of our team of designers. He has come up with a brilliant way of giving people access to a large database of accommodation and services while also giving them a sense of the route the trail takes. This is an excellent example of how flash should be used rather than for nasty animated introduction with no skip button! Of course, in order to maintain accessibility we also had to provide a way of accessing the same information without flash.

Not that this is the end of our work with the National Trails site. There is always more to be done. The site will need tweaking and maintaining. There is site promotion to consider as well as new functionality to consider. Just because a site goes live does not mean it is ever truly finished.

The clients verdict

I couldn’t finish this entry without including a quote from an email I have just received from the client at National Trails:

I just wanted to give you my personal thanks for all your hard work on this site. I think its fabulous. I’m so proud of it and of the fact that we made the right choice of contractors to do the work!