Boagworld

News and events | Daniel Burka talks about Digg | Competitive analysis

Hello? Is anybody there? I am so lonely, nobody to talk to, nobody to rant at, nobody to take the piss of! Your listening to boagworld.com, the podcast for all those involved in designing, developing and running websites on a daily basis. My name is Paul Boag and this week, I am sad and alone as Marcus is away on Holiday (or should I say vacation?).

I have to say it is not the same without him. Of course on the upside in many ways its a lot better. Less waffle, no interruptions, no skype problems and you get to hear my undiluted genius. So thats okay then :)

Because we don’t have Marcus around this week, todays show will be a little different. For a start Marcus wont be saying much, which should make the show shorter. However, in his place we have an extended interview with Daniel Burka the creative director at the social news website Digg. We cover loads of stuff from the difference in designing for social networking sites to working with AJAX and designing for the iPhone.

I will also be doing my segment as normal. This week I will be providing a quick and dirty introduction to competitive analysis. We will be looking at what you can learn from your competitions websites and how you go about extracting the maximum amount of information.

But before we can get into all that good stuff we first need to look at what has been happening in the world of web design over the last week.

News and events

Eric Meyer tries to prevent history repeating itself

First up in the news segment of the show today is a passionate call to action by Eric Meyer. Like myself, Eric has been working in the web for a very long time and is all too familiar with the problems of the past. He is a veteran of the browser wars (how dramatic does that sound!) and remembers the many problems that period caused.

During that time many web designers simply gave up trying to support multiple browsers and instead displayed the now famous message…

“Your browser is not compatible and must be upgraded”

It is therefore particularly disturbing when we thought those days are over to see the return of a similar message. As Eric points out in his post, those types of messages are returning in the form of…

“This site is for iPhone users only.”

As Eric says: Stop it! Stop it right now. He is absolutely right. There is no reason whatsoever for shutting out users from viewing iPhone optimized pages. Sure they might not look as good on a non iphone browser but other than that they should work fine on a compliant browser. To be honest, even if they don’t, that is still no reason to block non iphone users. If I choose to look at an iphone site on my Windows mobile device or even on my desktop browser, I am not going to expect it to look perfect. However, I could have all kinds of reasons for wanting to do it from wanting to check out the functionality to using an alternative mobile browser that is just as capable of displaying the content.

In Short, Eric argues (and I whole heartedly agree) that the “best viewed in…” approach to web design is a fools errand. Whether it is the iphone or something else, make sure you avoid that road at all costs.

6 Keys to Understanding Modern CSS-based Layouts

Talking about best practice, Jonathan Snook has posted a helpful article for those of you still struggling to move across to modern CSS-based layout.

As Jonathan says in his post…

Much of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.

Jonathan addresses this challenge by talking about 6 key principles that will help you get over this hump. He talks about; the box model, floating columns, sizing with ems, image replacement, floated navigation and sprites.

Its an interesting list although I am not entirely sure I would include the same items. For example there is no mention of HasLayout or IE conditional comments. However, Jonathan does say it is just his take on things and encourages people to add suggestions in the comments so they are definitely worth reading too.

How to mix fonts

So you might be listening to this feeling smug about your CSS skills but how are you with typography? Working with type is a challenging area and one that is very easy to get wrong. That is especially true when trying to combine multiple fonts together in an effective way.

Fortunately, David who listens to the show, has sent me a link to a cheat sheet on mixing typefaces. Not only does it provide specific examples of typefaces that work well together, it also gives you some basic information on typography.

I am a great fan of cheat sheets and have a number pinned to my wall including my much loved microformats cheat sheet. So, if you are looking for some advice on typography add this to your collection.

Making money through forums

My final news story for this week’s show comes off of the back of a story knocking around here in the UK. A number of large companies have pulled their advertising off of Facebook following the discovery that those ads were appearing on the profile of the BNP (a pseudo- fascist political party in the UK). These companies were unhappy that their brands being associated with the organisation.

This Facebook story is indicative of a wider problem that advertisers seem to be having with social networking sites and forums in particular. So the question then arises, can you make money from a social networking site?

For most of us this is not a question we have to deal with. Most of us don’t run social networking websites. However, many of us do run forums and we are looking to make a bit of extra cash from them.

If that is you then you might want to check out “Can forums still make money?” on sitepoint. This post suggests a load of ways you can improve your return on your forum and make some cash to cover hosting costs. The post is very realistic suggesting that the vast majority of us are not going to get rich from our forums. However, it might help pay for your cleaner (which is what I spend my Adsense revenue on!) and so it is worthy of your attention.

As a slight aside before I wrap up the news segment of today’s show, the article also links to some useful tips from Google about maximizing your return from Google Adsense, so you might want to check that out too.

Talking of social networking websites, that brings me on nicely to my interview with Daniel Burka from Digg…

Daniel Burka talks about Digg

Paul: Okay. So joining me today is Daniel Burka the lead designer/creative director/God of all things user interface at Digg.com. Is that a fair way to describe you Daniel?

Daniel: That was a very polite introduction. Thank you very much.

Paul: Well, it is always good to butter up the guests at the beginning…

Daniel: [laughs]

Paul: I find it goes down better that way. [laughs] So Daniel, I thought that it would be great to get you on the show, simply because you seemed to have worked so extensively with web projects centered very much on social participation and web applications, you know, and various other Web 2.0 buzzwords. Obviously Digg.com is a good example of that. And a lot of listeners of this show are still working on content heavy brochure-ware type sites. But, they seem to be really interested in more interactive elements to their site. And so we thought, let’s get an expert on the show that seems to specialize in this area. So, here is my first question Daniel. What do you see as being the main differences between designing and social networking sites, compared to more traditional content heavy sites that I am sure you have worked on in previous lives, so to speak?

Daniel: Oh yeah, I mean absolutely. I worked on those kinds of sites in the past. The big difference with something like Digg is that all of the content on the site, pretty much, is provided by users and so we're building conduits as frequently as we can where people can provide their input, provide content you know foster discussion, these kinds of things so I guess wherever possible we're not only designing the technically areas that they can do it but focusing the design on encouraging them to participate.

Paul: So how to you do that? How do you encourage someone to participate in using kind of design tools and design approaches?

Daniel: Right. I guess the big thing is to make it obvious that other users have provided content to the site. So, making it clear that the Digg count went up because other people you know dug the story. You know, showing which users submitted certain things or which user made a comment. You know that indicates, Oh okay. Other people, like me, have participated and that might be something I might be able to do too.

Paul: So how did you deal with the kind of early days before Digg had really taken off? Where perhaps you had less content than you do now and you kind of want to give the impression that there is loads going on, when perhaps here isn't?

Daniel: Right. I guess by the time I got involved in Digg which is about 4-5 months after it had started. So Kevin and Owen originally developed the site.

Paul: Oh okay

Daniel: And then they hired the company that I work with in Canada. They hired us to come in and basically do a design review and redesign of the site and that was the primary focus of the redesign was to look and say, Okay, what is this site about? And what the site is about providing input and so the original design which was more definitely designed from an engineer's perspective. It had all of that content, it had all of the facts and the bits and the place to Digg something, but it wasn't very clear at all what you should do or why you should do it.

Paul: Hmmm.

Daniel: And so, you-know probably the most interesting thing I have ever done on Digg was to take the Digg count, to make it really big and stick it on the left and stick a really explicit Digg It button under it. So, I mean that's clearing indicating X number of people already participated.

Paul: Yeah.

Daniel: And if you want to participate hit the big button.

Paul: Yeah. The kind of putting right in front of peoples face where they can't possibly miss it, so to speak.

Daniel: Right. I mean that is the entire purpose of the website is to, you know, say you like something.

Paul: So what other kind of things did you implement in those early days when you came in and started redesigning the site?

Daniel: The original focus, I actually thought this was a kind of interesting approach to take. Steven and I were looking at the site and trying to determine that. It already, in some ways, had a fairly large scope to the website. So we were trying to determine where do we get started. Often that is redesign the look of the site or redesign the home page. We looked at it and what is the most important thing here and the story format, I think, was probably the most important thing about Digg. And so we looked at each individual story in the list. There is a whole row of them on the homepage. We got about 15 on there now. And kind of a singled one of those and dissected it and said, What is important about a story? Why did the user submit it? Why is another person going to be interested in it? How do I encourage them to participate into that story? And so, that story format counts for a few different iterations since we started.

Paul: Hmmm.

Daniel: I think that being the primary focus of ours.

Paul: I mean what about the kind of more rich elements that you started to introduce? Where there is a lot less page refreshes that perhaps there once was and you kind of changed the way the people interacted with the site by introducing AJAX and things like that. I mean was that a big shift? What kind of thinking went into that process?

Daniel: Absolutely. I mean that is critical to Digg's success. Owen and Kevin had already started playing around with AJAX and this was before anybody like Jesse James Garrett that coined the phrase, AJAX. So, we were still calling it Asynchronous Javascript and XML request. Thank God someone has shortened that. And the fact that you are requiring mass participation to make something interesting would be entirely stymied if we had forced a page reload every single time a person wanted to participate.

Paul: Ummm.

Daniel: So we are using that all over the place. The Digg It button is the one real obvious place. And then you know especially in the comment system. There are various other areas where we're basically allowing you to have a really low-threshold of participation. No long page loads. Immediate reaction that what I did I got a reaction back from that, so I get that positive feeling.

Paul: So how does that kind of process work within Digg? I mean are you actually involved in coding the AJAX elements or do you just do the user interface? How do those kinds of accountabilities split up?

Daniel: Right. I guess we've got a really good balance I think between the development and the UI design. We are really tightly integrated with the different teams. And we are getting big enough now that we can actually speak about them as teams. So generally the flow at Digg starts with it's great we have a really design focused process here that Kevin will come up with an idea and then he and I will bounce the idea back and forth usually and figure out what the pros and cons are and then kind of rough out the design aspect. And then, basically take it from the conceptual stage code it statically and then work with the developers in terms of coding the functionality into it. So I don't do a lot of PHP or very much Javascript, but I provide with them XHTML and CSS and obviously the images and work with them implementing the basic flows.

Paul: I think a lot of the impression I get is a lot of organizations is still struggling to work out whose responsibility is the AJAX elements. It's kind of client side stuff that is very user-interface oriented. So should it be a designer job or is it kind of so intrinsic in the kind of connecting to the database and pulling out the content and that kind of thing which is actually a developer's job? It's quite interesting to hear how different people do it.

Daniel: Right. We probably fall into the developer's side of things. You know, it is submitting content to the database which is not horribly different than a normal form submitting to the database.

Paul: Yeah.

Daniel: So that is probably how we line it up.

Paul: Yeah. You guys seem to be doing some interesting things at the moment. One of the things that I imagine is particularly challenging is that you got a tech-savvy audience which is where Digg started. But you're constantly at the moment in this process of broadening that audience out to be more of a mainstream audience. And I'm just interested from a kind of design point of view, and user-interface point of view, what challenges that has presented you as far as shifting that audience. You know kind of in-mid process if you want. Most websites have a fairly good idea of who their target audience is upfront. But you are having to adapt that as the site evolves and I imagine that must be tricky at times.

Daniel: Oh, absolutely. I mean we started off as you said as very a tech-heavy site at about this time last year. I guess just over a year ago we broadened out very explicitly by introducing other content areas to the website. As we grow, and as a less tech-savvy audience comes in, there definitely is a real dichotomy between the perceived power-user who understands the very complex form type systems versus people who barely used a comment system on a weblog. On different areas of the site that level of experience I guess really comes to the fore. Although, I think I really take inspiration from the FireFox Project in that regard – particularly in Van Gudgers response. He is one of lead engineers on the FireFox Project. One of his best qualities being saying No! during the FireFox development and a lot of power-users perceive that they want all of these options at their finger tips. They want a hundred different options, if there are a hundred possibilities. Where as, in reality, having a simple system actually works better for both the power-user and the relative novice. I think the correlation between what happened with the Mozilla Suite, which was the previous iteration before FireFox which had a lot of different features and a lot of different buttons and customizability, versus FireFox which is really the torn-down simple browser. Which really ended up serving both audiences better.

Paul: So have you had the kind of guts to take functionality away or are you more kind of hiding it away so that it is still accessible to the power-user wants to go and get it?

Daniel: Well that is definitely the balance that we try and make. I think hiding the functionality is actually I was just reading a book a friend lent me. John Maeda’s book The Laws of Simplicity and he covers this subject. I think that it is really interesting that you can hide functionality as long as it doesn't feel intimidating and as long as you are not obscuring the functionality. I think you can actually, quite successfully, create a simple site by tucking functionally under the right areas, I guess.

Paul: That struck me. This whole idea of dealing with different types of audiences is a very challenging area. You have been at Digg for a while now, what has been the most challenging aspect from your point of view?

Daniel: Well, I think managing user feedback is definitely one of the big points of working at Digg. It is very intimidating working on a site where, every time you want something new, you have about 2 million people seeing it the next day and giving you their feedback on it. It is fantastic! It is really inspiring and exciting – and at the same time horribly intimidating. It is hard not to get frozen-up when you are about to launch something in two days and you kind of have to brace for the criticism because you know that people are going to be critical. And I mean that in the positive sense. They are going to critique what you have done. And so, being able to basically listen to a wide range of opinions and make sure that you are listening to everyone. But, you don't necessarily do what everyone says because there are obviously people with conflicting opinions and there are people who have very specific interests that may or may not be reflected by other people. I think managing those expectations that people want to know that you are listening to them and they want to see their suggestions reflected in what you are doing. Balancing those types of expectations is a really challenging part of the job.

Paul: So how do you go about that? How do go about deciding which suggestions you are going to implement and which you are not? Do you have some kind of process for that?

Daniel: I'm not sure if it is horribly formalized. I think the first and really important thing that we've learned at Digg, and I have learned on other projects being worked on, is taking a really deep breath. People will immediately ask for feedback on something, the minute you launch it

Paul: Yeah.

Daniel: They will ask for change. So don't make a change for the first week, unless they point out obviously drastic problems that you didn't anticipate. Take a deep breath. Let people give their feedback. Let them get some experience with the change because people are adverse to change generally. Their first reaction is going to be, Well I was familiar with it the other way, now it is different and I don't feel comfortable with that. And so, you will get a lot of feedback in that regard. And then carefully go through and filter and look for themes of feedback from different people. Try to determine why they were giving that feedback. And then iterate from there. I think that iterative process is so important.

Paul: One of the things that I think everyone has noticed recently about Digg, is that you released this iPhone interface. Everybody is going on about the iPhone endlessly and I am hugely jealous that we don't have it over here in the UK. And so, I am obviously bitter and twisted about it.

Daniel: [laughs]

Paul: But, putting that aside there is this plethora of iPhone applications coming out and Digg is one of the people who have done it. Were you involved in that putting it together?

Daniel: Yeah, absolutely. Joe, who is one of our developers, kind of came over and he was talking about it and was thinking it would be a great idea. And we both kind of got excited and pumped the whole thing out over our weekends.

Paul: Ahhh.

Daniel: Big props to Joe Hewett, who is not the Joe who works here, but Joe Hewett has made this great framework basically to start developing for iPhone applications in Safari.

Paul: Ahhh.

Daniel: He actually released a prototype of it on Friday afternoon. I think? And we started off from there and started developing. That is what does the sliding effects in our interface.

Paul: Okay.

Daniel: And we kind of took what he had done and I think we launched on a Tuesday the next week and on Wednesday Joe had already refined it and made into a kind of framework more people could use. So it was very useful to us.

Paul: So how do you feel about that, because that is a very different interface to be developing? It is much more controlled. You know the browser you are aimed at. You know the screen size. Was it a pleasant experience?

Daniel: Oh, absolutely. It was really really fun. I mean, there were a few things that were really fun about it. One, you are absolutely in that controlled environment. I mean people aren't resizing there fonts. You have a controlled number of fonts. You know the resolution. You can accommodate for when you flip the screen and it goes to wide-mode. And plus you are working with a rendering engine that doesn't suck.

Paul: [laughs]

Daniel: So it is really fun. [laughs] I mean you can even use advanced Webkit only type rounded corners and all kinds of fun stuff like that so, that part of it is really liberating. I can just imagine if all web design was like that. You know if all browsers were actually as standards compliant as they think they are. So that was fun. But, I think the most interesting thing is that you're working with an input device that is this big-fat-honking finger. And so, everything you do you have to be thinking about that. I think it will be interesting to see who succeeds at developing applications like that. But, you really have to think about pairing things down.

Paul: Yeah.

Daniel: When you are clicking with a finger there is no way you can have four or five buttons in a row and expect the person to be able to pick one out when they are sitting on a bouncing bus, with this phone in their hand. And so, buttons have to be really big. The Digg button on the source pages for instance is about two and a half times bigger than one on the normal site. And the links, we considered two different links. One to go to the source and one to go to what we call the Permalink page, the story page, of that particular item. But you know, even having just two buttons per story was much too difficult on the iPhone so we just have one you just can't miss which is a big finger button and it slides over and you get the story.

Paul: Yeah. Do you think you will be doing kind of more with Digg where you are kind of delivering the content, through other various mechanisms; such as the iPhone? I mean, could you imagine doing stuff with desktop applications like using AIR or anything else? Is that an area that you think you would get into?

Daniel: I think the really exciting thing is that we are finally getting a proper API out there. And so, I guess we launched the API maybe two or three months ago. Maybe longer than that, I forget, but I think it will be really interesting to see you know if a desktop experience of dig is really valuable somebody is going to pick up that project and go with it.

Paul: Sure.

Daniel: And they'll develop it on the API. So, I'm not sure if explicitly if a desktop application will be great, but I could see it having certain benefits and maybe toying around with the idea ñ for sure.

Paul: Is there something personally you are interested in as a web designer doing, you know, it's a different medium again isn't it? You're going from a browser based environment to a desktop environment. Is that something that interests you personally?

Daniel: Oh, absolutely. I think it is interesting that those lines are really blurring. I mean, AIRs is that first salvo, in that regard, you really are to a large degree developing a web application. You can develop it in HTML and CSS with basically the same skills it takes to make an iPhone application, or a basic website, you can build an AIR app. That is pretty exciting. I think that once that platform matures, it could open up a whole range of things.

Paul: From a personal perspective, what is the area of your job that you most enjoy?

Daniel: I really enjoy trying to make things easy for people. Sometimes is really irks me if Kevin describes my job as making things pretty.

Paul: [laughs]

Daniel: I think it is such a minor part of design. You know it is an interesting one. But I think sitting down trying to determine, when you are looking at a fairly complex system you are trying to build, and trying to figure out how to not be complex. What to takeaway, how to design something so that it feels simple by putting the really important things upfront. And throwing it by some users and watching them how they do it. I think it is really exciting to see somebody participate in something that is under the hood really complex, but which they have fun and they feel that they are participating. And they do not put a lot of thought into what they are doing, they are trying to achieve what they came to do.

Paul: What about the fact that you kind of have been working on Digg for a prolonged period of time and it is that one site you have been working on continually? I guess because I work for a web design agency where I have a series of clients back-to-back and I am doing different things the whole time. Sometimes it strikes me that we're working on a project for a prolonged time is both a blessing and a curse. I just kind of wondered, what you think? Do you really enjoy being able to spend time digging into that one area?

Daniel: That is a very interesting point, because I also come from the web design company background where I basically would do a different project every month. And until December I was still fairly heavily involved in the day-to-day affairs of my previous company, so it has been a reasonably new experience for me

Paul: Oh I didn't know that.

Daniel: To be working solely on one site, with Pounce on the side. [laughs]

Paul: Yeah. [laughs]

Daniel: Another site I have been working on. So this is really very interesting. Absolutely, there are so many things fantastic about it. It is really fun to be able to go into great detail and have the time to go back into something you designed previously, and to alter it. It is not necessarily that you made a mistake, but a month later you suddenly realize that a big improvement to that would be if I did X. And so you actually have the opportunity to go back and do those kinds of things. Where as I am sure, if you were working with a client, it has happened before that you know six months later you see something you say it is obvious to me now but it is kind of out of your control. The contract is over. You know

Paul: Yeah

Daniel: They're working with a different firm. There are all kinds of things like that. And so, working on something as big as Digg it is really fun too. Within Digg there are lots of different projects. There are different pages. There are new things we are working on. And so you kind of I guess segment them into kind of different projects you can go around in a circle and come back to later on.

Paul: Do you ever envision a day where you throw out the existing user interface and apply a new one? Or do you think it will always be a kind of evolving iterative process?

Daniel: Oh, I think an iterative process for sure.

Paul: Yeah.

Daniel: I don't want to second guess what is possible in the future. We may have some brilliant idea or new technology that blows our minds. But, I think there is no reason to throw out something that is working pretty well. I think there is a kind a rush sometimes to you know, to start from scratch that real desire to start from scratch sometimes. But something like Digg, I mean it has changed fairly significantly over the last two years, but I don't know if too many people notice

Paul: Yeah.

Daniel: Other than a few big pushes we made, that things had changed much. I think that is really healthy that people become familiar with systems. They learn how to interact with them. And to really shake them up, you really better have a damn good reason to do it.

Paul: Yeah. Okay so last question then before we finish up. Is there any stuff that you are working on with Digg that you are allowed to talk about [laughs] because obviously there are things you are not allowed to talk about.

Daniel: Right.

Paul: But the stuff that you are allowed to talk about, what is really exciting you and what are you really enjoying getting into at the moment?

Daniel: Oh, there is a bunch of things. I think I am allowed to talk about that Kevin mentioned the other day that we are working on the images section.

Paul: Cool.

Daniel: So we are going to do right now you can do news and videos. And we are pretty confident we are going to get into images as well. And so we are working on a couple of projects to kind of lay the framework for doing that. So, some people think it is as easy as adding a section

Paul: Yeah.

Daniel: And putting a title on it. But if we want to do that, we want to do it the right way. And lay the ground work first. I am working a couple of things I cannot go into great detail unfortunately there so much secrecy here that we can't

Paul: [laughs]

Daniel: Layout too much of what we are up to. But, I am really excited that we are headed in this direction.

Paul: Yeah. The trouble is that you guys get ripped off so quickly, don't you, that you need to keep things quite.

Daniel: Well. I think it is a combination of problems. One is that we are obviously concerned with people duplicating our features and the other one is that we want to be careful setting expectations. Because if we say we are going to do something, we really want to do it.

Paul: Yeah.

Daniel: And I think people will get disappointed if we say, In two months we are going to launch such-and-such. and you know lot's of stuff happens in two months. And unfortunately if that had to get pushed back, and that two months was a totally random date that I pulled out of my head

Paul: [laughs]

Daniel: [laughs]

Paul: See know, we all believe that it is all going to happen in two months.

Daniel: Shoot! [laughs]

Paul: [laughs]

Daniel: [laughs] People will be disappointed or they will feel like we haven't lived up to their expectations I suppose.

Paul: Yeah. Okay. Well that was really great. Thank you very much for coming on the show Daniel. No doubt we will try and crowbar you again in the future to come and talk to us about Pounce as well. Because that is an exciting project.

Daniel: That would be fun.

Paul: Okay thank you very much for your time and talk to you again soon.

Daniel: Thanks so much for having me.

Paul’s corner: Quick and dirty competitive analysis

Great stuff from Daniel! It was really fun to speak to him even though I managed to offend him after we stopped recording by calling him an American (he is Canadian). Hopefully he will forgive me for the ultimate crime!

Okay, so before I wrap up today’s show lets take a quick look at the subject of competitive analysis. Its actually a segment I have just written for the book I am working on and so I thought I would share what I have covered. The idea is not to make you an expert in the field but simply to allow you to extract as much information as possible from your competitions websites in a quick and easy manner.

As always I have written this up as a blog post entitled “Quick and dirty competitive analysis” so check that out in the show notes if you want to see exactly what I covered.

No show next week

So that is about it for this week’s show. Remember that there will be no show next week as I am going away on holiday too! Yippee! However, if you need your boagworld fix don’t forget you can check out the forum and chat with other people about the poor quality of Marcus’ jokes.

Show 86: Boagworld Book

Posted in Classic shows on July 10, 2007 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.

Podcast: Download (44.6MB)

Paul’s personal news

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

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

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

News and events

Building for the iphone

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

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

@media podcast

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

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

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

Common mistakes in web copy

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

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

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

A department dedicated to the web

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

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

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

Paul’s corner: Taking a brand online

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

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

Marcus’ bit: Information architecture review

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

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

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

First things first

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

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

Map out the existing site

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

Be logical, captain

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

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

Naming

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

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

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

Section ordering

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

About Us | Services | Case Studies | Contact Us

Conventions

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

Collaborate – to a point

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

Ask an expert: Ian Lloyd on screen readers

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Here’s another example of the same thing.

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

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

[Screen reader announces more examples from the same page]

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

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

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

So let’s look at another example.

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

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

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

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

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

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

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

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

Basically, completely unusable.

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

[screen reader interrupts as page loads]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[more screen reader confusion]

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

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

No show next week

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

Show 83: iphone bollocks

Posted in Classic shows on June 19, 2007 by Paul Boag

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

Podcast: Download (19.3MB)

News and events

Safari for Windows

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

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

We will see.

Applications for the iphone

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

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

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

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

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

Web Design-isms: 7 Surefire Styles that Work

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

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

CSS frameworks

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

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

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

Agony uncle: The importance of undo

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

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

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

Client corner: Stakeholder interviews

Got this question from Dusted.

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

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

Starting off with a few…

Describe your department’s needs of the web site.

What can be done in a better way?

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

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

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

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

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

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

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

Politics

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

Education

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

Verification

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

Semi-structured

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

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

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

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

Ask the expert: Struan Robertson on Legal Issues

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

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

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

The importance of Undo

Posted in User experience on June 13, 2007 by Paul Boag

An easily available undo function creates a sense of simplicity because it instills in the user the attitude of “what the heck, I can always undo it”.

Many internet users lack confidence when interacting with the web. It is our job as web designers to try and reassure them and provide a safety net when things go wrong. Providing various methods by which users can undo actions is a useful crutch to the less confident user.

Benefits of undo

Undo functionality seems to be in increasingly short supply on the more recent raft of web 2.0. websites, especially on sites that make heavy use of AJAX. This is a sad day for web design as the ability to undo provides three crucial benefits:

Alleviate apprehension

I have said this many times but it always bears repeating; the majority of people do not like computers. It is so easy for us to forget that, as we live and breath computers everyday. I have to confess that I am more comfortable working with a computer than the real world. After all, how many times have you tried to CTRL Z reality!

However, although we are comfortable with computers the majority of people aren’t. They are intimidating, impersonal and far from intuitive. This is not only true for the PC but also for the web. After all who would design a system where the interface changes when you move between sections (sites).

The ability to undo, go back or escape is a lifeline to many users. It is immensely reassuring to know that you can always undo something if you get it wrong and when that option is not available it can be incredibly disturbing. Take for example the first time you ever bought something online. Do you remember a feeling of apprehension when you realized that the next click would place the order and that there was then no going back.

A way to overcome complexity

I am a huge fan of simplicity, largely because I recently finished reading “The Laws of Simplicity” by J Maeda. In his book he talks about the fact that the ability to undo creates an impression of simplicity even in the most complex applications.

An easily available undo function creates a sense of simplicity because it instills in the user the attitude of “what the heck, I can always undo it”. Once the user has that attitude they perceive things as simpler than they actually are.

A method to build confidence

The “what the heck” attitude is largely about confidence. A confidence in the power of undo to do its magic, is what allows us to play and experiment with an application. Through experimentation and play we learn and with knowledge comes a confidence in our own abilities. That is the power of undo.

Opportunities to provide undo

Now that I have established the importance of undo the next step is to look at what options are available to us as web designers to provide undo to our users. I have come up with four ways this is possible, however the sad reality is that we continually undermine these different methods in the way we code and design.

Back Button

I must have sat through hundreds of usability sessions over the last decade and I do not recall one where the user did not use the back button at some point. The back button is the primary life line used by most people to correct problems and yet in more and more sites it does not work. The problem lies in the use of AJAX and Flash which break the page metaphor on which all browsers are built. The same problem occurred with frames and was one of the major reasons that the use of frames died out.

Although there are fixes for this problem in both flash and AJAX, they are far from perfect and rarely implemented. Serious attention needs to be given to this problem when developing modern web applications as a failure to do so not only undermine usability but damages user confidence.

Breadcrumbs

There was a time when users didn’t really understand breadcrumbs. However as has been suggested recently by Jakob Nielsen, that is no longer the case.

Although breadcrumbs should never be seen as a replacement for the back button, they do work as a handy alternative for more experienced users. What is more, although they have traditionally been used on page based websites they can also translate well onto web applications.

Favorites

In usability sessions I have also occasionally seen favorites and bookmarks used as an undo tool to go back to a previous page. However as with the back button this functionality is often broken in modern web applications that update sections of pages instead of the entire page. Favorites provide the valuable ability for the user to quickly return to marked “safe points” in their surfing and as a result we should be doing our upmost to ensure that this ability remains.

Home

Almost all websites have a link back to the home page, however not all of them make that link very obvious. A common practice is to make the logo a link back and although in itself this technique is fine, it is not obvious this link exists and so many users are not aware of it.

Having a link back to the home page is a great way of letting the user “start again” but if you are going to provide that functionality it needs to be obvious.

So there you have it; why undo is important and some techniques to undo easier on your website. Hope it helps.

Show 79: Despise the listener

Posted in Classic shows on May 15, 2007 by Paul Boag

A great line up this week with Paul, Marcus and Andy Clarke.

Podcast: Download (21.4MB)

We have a great lineup this week: Paul talks about getting things done in web design and an alternative approach to your reading list. Marcus explains the exciting area of insurance for web designers and we have Andy Clarke on the show to give us an update on CSS 3.

News and events

Google Analytics gets interface upgrade

Like so many who join Google, Jeff Veen has been forced to be somewhat tight lipped about what he has been working on. However in the last week we have finally been able to see the fruits of his labors with the relaunch of a new and improved Google Analytics. You would be forgiven for thinking that a load of new functionality has been added to the service. In fact that is not the case. The only changes have been to the user interface. The difference is that you can now find everything quickly and easily.

If like me you found the old Analytics service confusing and difficult to use then you might want to take a look at the new revised version. It is a definite improvement.

Great new articles on A List Apart

For a while I have been a little disappointed with the articles coming out of A List Apart. Perhaps they were simply too “high brow” for the likes of me but they lacked any practical application. However this issue is different. It has two great articles about handling clients.

The first entitled “Stand and Deliver” provides some superb advice on presenting your designs to a client. The second called “Educate Your Stakeholders!” talks (unsurprisingly) about educating the decision makers in a web project so they make more informed choices.

Both are really superb articles and I would definitely recommend you check them out.

Teaching the traditional web

We are all acutely aware that the web is changing at a rapid rate. At the moment the focus is very much on web applications however we cannot afford to ignore the massive number of page based sites that still need to adapt to the changing way people are interacting online. In a post called Teaching the traditional web, Keith Robinson discusses how we need to alter our approach to page based websites based on deep linking, RSS feeds and mobile access. A very enlightening read.

Baselines and vertical rhythm

Having Richard Rutter on the show a few weeks back made me acutely aware of my shortcomings when it came to web typography. Although I promised myself I would look into the subject in more depth I was a bit vague as to where I should start. Fortunately Richard has given me a starting point with a list of resources on his site that look at the subject of baselines.

I know that many people find web typography an uninspiring subject but good typography can have such a profound impact on how people perceive design that it really is worth your attention.

Client corner: Getting things done in web design

I have just finished reading “Getting Things Done” by David Allen. Not only has it seriously helped me to get control of my workload but its also made me rethink how I approach web design projects with clients. In this week’s client corner I suggest some techniques that designers and clients should use when a new project is starting.

As seems to be the default approach these days I blogged on this earlier in the week so if you want more information on what I said in the show then be sure to check out that post.

Ask the expert: Andy Clarke on CSS 3

Following Andy Budd’s recent criticism of the W3C CSS Working group it seemed appropriate to have Andy Clarke on the show to talk about the progress of CSS 3. Andy is an invited expert on the CSS working group so has the inside track on what is really happening. In the show Andy talks about…

Some of the cool layout features available in CSS 3.
The modular nature of CSS3.
The slow progress made by the group.
And the need for the web design community to contribute in the process.

Agony uncle: Insurance for web designers

We received the following question from Brian last week:

As an avid listener to your podcast – and having spent the day catching up on them while travelling! – I was very interested in a particular segment where your good self and that Lillington chap mentioned your Terms and Conditions and having, ‘…all the right insurances in place…’, with regard to setting up a business.

I’ve recently done some work with a mate – a few hopefully not-too-shabby websites – and although we think we are getting the hang of sorting out contracts now, we have never been able to settle on what to put in our Terms and Conditions. Every time I start to do it I either glaze over or start putting stupid things in due basically to boredom!

As for insurance we never assumed that we would need any for web design. Its not like we’re making nitroglycerine or heart bypass machines… so we assumed the basic rules of common sense prevailed.

To this end, if you have any advice on what insurances might apply or what sort of thing should be covering in T&C’s?

Firstly I’ll cover the terms and conditions issue, much as I don’t want to appear protective over our ts & cs, we have reached the conclusion that by providing them we are in effect providing legal advice.

This is not what we do and it’s not a path we wish to tread!

We suggest speaking to your lawyer or maybe a local chamber of commerce who could provide a standard terms and conditions contract template. I also droned on about the different aspects of terms and conditions in episode 65.

Insurance, however, is another matter. Though, again, I am concerned about making stuff up here (as is often the case!) so the majority of the following content is from Business Link. This is what we currently pay good money for:

Professional Indemnity

If you are in the business of selling your knowledge or skills, you may want to consider taking out professional indemnity insurance.

This protects your business against compensation sought by a client if you have made mistakes or are found to have been negligent in some or all of the services that you provide for them. Professional indemnity insurance will also cover any legal costs.

Public Liability

If members of the public or customers come to your premises or you go to theirs, you should think about taking out public liability insurance. This type of insurance covers any awards of damages given to a member of the public because of an injury or damage to their property caused by you or your business.

Product Liability

In product liability insurance (PLI) terms, a product is any physical item that is sold or given away.

Products must be “fit for purpose”. Under the Consumer Protection Act 1987, you’re legally responsible for any damage or injury that a product you supply may cause. PLI covers you against compensation awarded as a result of damage to property or personal injury caused by your product.

Employers Liability

Employers’ liability compulsory insurance (ELCI) enables businesses to meet the costs of compensation and legal fees for employees who are injured or made ill at work through the fault of the employer.

Key Man Insurance

Key man insurance is designed to cover you for the financial costs of losing key personnel. We still have this for Paul….goodness knows why! ;-)

Review: Looking beyond web design books

This weeks review section isn’t so much a review as a recommendation. At SXSW you are really spoilt for choice as to what to attend. In fact there is so much choice it is overwhelming. After much consideration I decided to take an interesting approach. I decided to mainly attend panels on subjects I knew nothing, or little about. Instead of going to panels on CSS or design I went to sessions on marketing and strategy. The result was an incredibly enjoyable and enlightening week.

On my return to the UK I decided to take a similar approach in my reading. Prior to this the majority of books I read where either on CSS or Javascript. However I am now trying to broaden out the range of books I read to encompass other subjects like productivity, business process, and even some sociology. As with SXSW it has been an incredibly rewarding experience and something I would encourage others to do. I have been amazed at just how much of what I have read has related in someway to my job and I believe it has genuinely improved the quality of my work.

I would really encourage others to try the same thing and would like to suggest three books to break you in gradually. Although none of these books are directly to do with web design they all include valuable lessons that you can apply to your work on a daily basis…

Show 76: Clients and Agency

Posted in Classic shows on April 24, 2007 by Paul Boag

Marcus talks about setting up a web design company while Paul talks about the role of the client and Derek Featherstone talks about making your web application accessible.

Podcast: Download (27.5MB)

News and events

Eric Meyer’s reset style

I have talked before about the idea of having a CSS file that removes all of the browsers styling in order to allow you to work from a clean slate across multiple browsers. Well, over this last week Eric Meyer has picked up on the idea and has been collaboratively developing a reset CSS file via his blog. If you do a lot of CSS work, this is definitely worth getting your hands on.

Microsoft Silverlight

Microsoft are gunning after Adobe on all fronts at the moment including a flash competitor called Silverlight. Like flash, Silverlight offers animation, interactivity and cross browser compatibility (although I don’t seem to be able to get it working on a mac). However, their real focus is on video where they trump Flash by offering high definition quality. It also appears to offer more “standards friendly” methods of inserting and manipulating movies, however as I said I have been unable to test this so far.

The biggest hurdle Microsoft faces will be take up. At the moment Flash dominates partly because in many cases it is installed almost invisibly in the background. In contrast, at the moment, Silverlight is a separate installation that takes place outside of the browser. No doubt this will change in the future.

35 Designers, 5 questions

Smashing magazine are certainly on a role at the moment, publishing a range of superb web design articles. One of the most recent is a post where they asked 35 designers (of which I was one) 5 questions about their approach to web design. The resulting article is a fascinating read and gives you a real insight into how other web designers work. The questions included:

1 aspect of design you give the highest priority to.
1 most useful CSS-technique you use very often.
1 font you use in your projects very often.
1 design-related book you highly recommend to read.
1 design magazine you read on a daily/weekly basis (online or offline).

CSS tools

Another Smashing magazine post. This one lists some very useful CSS tools including form builders, list makers, CSS layout templates and much more. If you are starting out in standards based coding some of the tools here will produce you some brilliant examples of clean code.

Client corner: The role of the client

Myself and Marcus swap roles this week and I take a look at our client corner issue; the role of the client. There is a lot written about the role of web designers but very little written about what part website owners play in the evolution of their sites. It is an area I have been thinking a lot about recently and I wanted to share a few thoughts with you. It is a subject that I have recently blogged on so if you want more information on what I consider the role of the client to be then I suggest you check that out.

Ask the expert: Derek Featherstone on ARIA

We are lucky enough to have accessibility expert Derek Featherstone on this week’s show talking about making web applications accessible. He talks about how HTML is not designed to support web applications and that the methods used to make it work are often little more than hacks. He then introduces a new standard from the W3C called ARIA and explains how this will assist in making web applications more accessible. If you want to know more about what ARIA is and how it can make your applications more accessible then Derek recommends a recent article on the List Apart website.

Agony Uncle: Setting up a web design company

Marcus takes on the lofty role of Agony Uncle this week responding to a question on the forum about setting up a web design company. The question, from Stanton, starts with him setting the scene of someone wanting to break out on their own but worrying about how they will cope without that guaranteed income.

Marcus gets all nostalgic about the early days of Headscape and then provides advice about starting up. He covers all the boring bits about incorporation, insurance, funding and documentation. He then talks about getting business in and not forgetting that someone has to be the salesman!

Show 68: Tagtastic

Posted in Classic shows on February 27, 2007 by Paul Boag

This weeks show includes hints on email campaigns, writing Web design contracts and site navigation approaches.

Podcast: Download (23.1MB)

On this week’s show; Matthew Patterson from Campaign monitor shares some handy hints on sending an email campaign, Marcus finishes his series on web design contracts and Paul looks at some interesting alternative approaches to site navigation.

News and events

Diversity in web design

This week the web design blogosphere has been dominated by discussions about the lack of women speakers at conferences. Jeffrey Zeldman, Eric Meyer, Jeremy Keith, Tantek… the list goes on and on. Frankly, I find the debate less than helpful. It is interesting to note that all of the women I have seen post on the subject have seemed very defensive almost as if they are under attack for not speaking more!

More on Open ID

Open ID continues to build momentum with both AOL and Digg.com saying they will support the standard. Dan Webb also provides a guide on how to support Open ID in your web applications.

Validation: why it matters

Ethan Marcotte has just published an interesting article on the List Apart website looking at the business benefits of validation and why it continues to polarise the web community.

The sorry state of web accessibility

The subject of web accessibility receives another body blow this week with Mike Davies posting a damning criticism. What is probably most disturbing is that I am yet to find a post disagreeing with him.

Client Corner: The statement of work (final chapter!)

This week sees the end of Marcus’ series on the statement of work (I know, it is distressing for us all!). In this final segment he takes a look a:

Milestones and timescales
Project management
Testing
Deliverables
Pricing

Ask an expert: Matthew Patterson on email campaigns

Matthew Patterson works for campaign monitor one of the best email management sites about. Their site is stuffed with great advice for those thinking of running an email campaign and so it seemed only natural to get him on the show and get his thoughts on how best to run a successful campaign.

Non hierarchical navigation

Headscape was recently approach by a potential client who had literally hundreds of thousands of web pages which were almost impossible to organise into a traditional information architecture. They wanted us to suggest some alternatives and so I thought this sounded like a great issue to cover on the show.

Instead of trying to stuff everything we covered in those show notes, I have instead posted a separate article on non hierarchical navigation which includes everything I said and the links I mentioned. Hope you find it useful.

Show 64: Hosting

Posted in Classic shows on January 22, 2007 by Paul Boag

This week on Boagworld we explain all you need to know about hosting , look at how to interpret other people’s CSS and review an excellent HTML email testing tool. Oh yes… and Marcus drones on about client stuff.

Podcast: Download (22.3MB)

News and events

Heuristic Testing

This week seems to be the week of Heuristic usability testing. Andy Budd kicked us off with a post on how Jakob Nielsen’s classic article on heuristic testing needs updating to take into account the new generation of web applications. Lisa Herrod then followed up with an excellent article on the sitepoint website looking at how heuristic testing can be used by web development teams.

The Future of Web Design

I know that a lot of people cannot afford the time or money to go to web conferences but I thought the Future of Web Design one day conference was worth a mention as it is only £59. It has a great line up of speakers including people from 37Signals, Flickr and Adaptive Path.

Tips for better design review process

You maybe the best designer in the world but if you cannot “sell” your designs to the client then more often than not they will be rejected. Many designers hate the design sign off process and are often frustrated with the final result. Keith Robinson has written a superb article that will help you better manage the successful sign off of your designs.

Seven Accessibility Mistakes

A while back Chris Heilmann wrote two articles on typical accessibility mistakes that people should avoid at all costs. I am sure that they were great articles but I never got around to reading them. Fortunately Roger Johansson has taken the time to summarise them in a nice easy to digest format.

Client corner: Questions for designers

How do you know which is the right web design agency to go with? Proposals are important but what questions do you ask at the presentation? This week Marcus gives website owners the inside track on what to ask prospective web design agencies. Here are some of the main points he covered:

Get a detailed breakdown of rates and pricing.
Understand what happens if things go wrong.
Ask about the contractual arrangements.
Request financial information on the company.
Get detailed information on the work they have done.
Know the team who will be working on your project.
Always ask to speak to existing clients.

Agony Uncle: Understanding other people’s CSS

There is nothing worse than working on a site built by somebody else. This especially true when it comes to the CSS. What styles affect which elements? How do the styles cascade down? What is going to be effected if I make a change to a style? This week in the agony uncle corner we look at some of the tools which can help solve these issues. In particular we take a look at the Firebug Firefox extension and the CSS panel in Dreamweaver.

Ask an expert: Mark Crawley on hosting

One of the things that has been requested for the “ask an expert” section is that we try and get on some new names rather than the normal “web celebs”. With that in mind this week’s guy is an old work colleague of mine; Mark Crawley. He talks about an area we should have covered a long time ago… hosting.

Review: Testing HTML Email

Although many condemn HTML emails as truly evil, the reality is that many of us are occasionally forced by clients into producing them. Setting aside the appalling support for standards, the next biggest headache with working on HTML emails is testing. Fortunately Site Vista, a UK based company has solved the problem by producing a testing suite very similar to Browser cam but for email.

Podcast 61: Christmas Special

Posted in Classic shows on December 11, 2006 by Paul Boag

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

Podcast: Download (24.1MB)

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

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

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

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

Special offers to boagworld listeners

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

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

News

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

Biggest Tech Mistakes of 2006

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

Best web applications of 2006

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

Dear Santa

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

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

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

Podcast 52: Javascript Libraries

Posted in Classic shows on October 2, 2006 by Paul Boag

This week on boagworld.com we talk to Dustin Diaz about Javascript libraries, discuss other web design podcasts, launch our web design forum and help you get started with Microformats.

Podcast: Download (30.1MB)

In the news

Microformats

If you are interested in getting started with Microformats then check out the excellent ebook on Microformats by
Brian Suda
. He has also been kind enough to share a Microformats cheat sheet for free.

Microsoft and the BBC

This week saw an announcement by Microsoft and the BBC that they are exploring ways of developing [the BBCs] digital services. As you can see the announcement is somewhat lacking in details. However, this is potentially a huge development and could lead to some interesting online services.

Searching rich media

This year’s demo conference saw pluggd announce an amazing new feature that allows you to search inside of podcasts. This is symptomatic of a growing movement to ensure that rich media content is searchable. Other players in this space include Veotag and Podzinger.

Questions and comments

This week’s show included two excellent audio questions from listeners.

The first was about the open source forum software I mentioned a few weeks back called Vanilla. This led to a discussion about running online communities, the integration of Vanilla and my hopes for the new boagworld forum.

The second question was about what other podcasts I would recommend. Below are the list of the one’s I mentioned on the show. However, you can find a more comprehensive list of web design podcasts by going here.

Main feature

The main feature today is an interview with
Dustin Diaz
about Javascript libraries. Javascript is becoming increasingly important as web designers produce ever more powerful web applications. But, how do Javascript libraries fit in? Do they enable rapid development or are they simply a crutch for those that can’t be bothered to learn the language?

Review

There are so many great website applications around these days, many of which allow you to add their functionality to your own site through web services and APIs. The problem is that it is hard to discover what exactly is available. This week on boagworld we review three sites that help you do exactly that:

atMedia: Real world application

Posted in Reviews on June 16, 2006 by Paul Boag

Yesterday I posted my thoughts on each session as I went along. Today I have decided not to post on each individual session but rather sum up the overall lessons to be learnt from this year’s show.

I have really enjoyed this year’s conference and have unsurprisingly learnt loads and met some great people. The trick is to now take what I have learnt and apply it to the real world.

This blog and podcast has always been aimed at two specific audiences:

Those that run and manage websites but aren’t web developers
Those that are web developers, but don’t have time to keep up with all the latest trends in this constantly evolving industry

A lot of what is written about web design is full of techno-babble and therefore incomprehensible to anybody who isn’t an ubergeek. The same is often true for web design conferences and atMedia was no exception. Discussions about WCAG 2.0, microformats and the DOM can often seem to have little relevance in the real world simply because they are not clearly explained in real world scenarios.

Bearing all of that in mind I have attempted to summarise the key issues raised from atMedia in such a way that they are relevant to the daily experience of the boagworld audience.

atMedia for website owners…

Pragmatic Accessibility

Probably the most depressing session at the conference was the one that discussed accessibility. I won’t bore you with the details, but sufficed to say the new accessibility guidelines that are currently being developed have some serious issues.

Many website owners have traditionally simply asked their web design agency to "make their site compliant with the accessibility guidelines". All they cared about was ticking the accessibility box so they didn’t get sued.

The lesson from atMedia is that you need to change that thinking. Accessibility needs to be more about finding the right solution for your users, rather than conforming to a generic checklist.

Are you more likely to be sued if you take this approach? No, not if you respond in a timely manner to any accessibility problems that your users identify.

Sites that work together

In the two atMedia conferences I have attended there has been more and more discussion about sharing information across multiple sites and in a variety of different ways. Whether it is turning contacts into downloadable business cards that can be taken into outlook or allowing events you show on your site to be published on other sites. Whatever the situation there are more ways than ever to share information. Not only is this an excellent way of getting your message in front of a larger audience it is also a great way of creating closer integration between websites.

Although this is still an evolving area I would encourage you to start thinking about what information on your site might be worth sharing and possibility some of the ways you would like to share it.

Also it is worth noting that there are a lot of other sites out there that allow you to integrate their content into your site. For example it is now easy to take Google maps and plug them right into your pages. In the closing panel of the conference the idea of sharing content between sites came out as the big area of growth over the next year, so it is definitely worth your attention.

Internet Explorer 7

Probably the most pressing issue for web site owners is the release of IE 7 within the next two or three months. It is vitally important that your site is checked in this new browser as changes to the way it works could mean that your site appears broken. Fortunately this is relatively easy to check by downloading the beta version of IE 7 and simply visiting your site. If you do spot problems, now is the time to contact your web design agency. But don’t worry, the fixes shouldn’t be that difficult or expensive.

More than just web pages

Without a doubt, the biggest shift in thinking between last year’s conference and this one, is in the area of web applications. What that means is that your website can now be more than just a collection of pages, but rather has the potential to behave more like a piece of software on your desktop. How does that apply to your site? Well, that depends. Let’s say that you have an events section. Instead of allowing users to click through a series of pages showing lists of events and then detailed information on an individual event, you can now show it as a calendar very similar to the one found in outlook. The key is that it is no longer necessary to wait while a new page loads but rather that information can appear instantly in the same way it would in a piece of software on your desktop.

Now it is worth saying that it is early days for this kind of technology and you might want to wait for the cost of development to come down. However, it is worth having a long hard look at your site and thinking about where it might be appropriate to add richer interactivity.

This isn’t the most straightforward of concepts to grasp so if you are left wondering what I am talking about then don’t panic. We will cover this subject in more depth later. However to get you started check out Google maps and then compare it with a site like Mapquest. Notice how on Mapquest everytime you zoom in or out the page reloads, while in Google maps it all happens without the refresh.

Don’t underestimate branding

Although this isn’t a new concept, it was really driven home in one of the sessions: you get what you pay for. It came up in a discussion about design and that great web design takes time. Often web design companies will cut corners on design in order to stay within a clients budget. This is unfortunate as research highlighted at the conference demonstrated that users make their mind up about a site based largely on how it looks. Once those first impressions have been formed it is very hard to overcome them no matter how good your content is.

The lesson to be learned here is that when you are looking at a web design companies proposal take particular note of how much time is dedicated to establishing the look and feel of your site.

Your site on a mobile phone

Without a doubt delivering the web through mobile devices like mobile phones is going to be a big growth area over the coming year. Already there are three times more mobile phones than personal computers, the vast majority of which can access the web. The question is; do you need to worry about this yet as a website owner? Well to some extent that depends. The key thing that came out of this conference is that mobile users want very different content from a user sitting at a PC. The chances are a user isn’t going to want to know about your company history while shopping in the high street. However they might be interested in comparing prices if you run an ecommerce site.

Even if you have content which might be useful to mobile users the current barrier to entry is very high. With so many mobile phones out there and so many different browsing experiences, creating a good mobile website is very difficult.

My advice is simple… wait. Wait for the industry to mature and standards to emerge. Although the mobile web is an exciting area it is early days and now is not the time for the majority of organisations to enter the market.

atMedia for busy web developers…

New accessibility guidelines: Don’t worry YET

So you have just begun to get your head around the WCAG 1.0 guidelines when you hear that the second version is about to be released. Don’t panic, you don’t have to worry about them just yet.

To be honest, it became quickly apparent from the session on these guidelines, that they are in a mess and not yet in a fit state to release. Even the accessibilit
y experts are havin
g trouble understanding them so I really wouldn’t waste your time at this stage.

The emphasis should be on creating the most accessible site you can irrespective of any particular set of "rules". That isn’t an excuse to slack off, but it should be seen as an opportunity to be pragmatic about the approach you take to accessibility.

Time to learn Javascript

If I had one message from last year’s conference it was "now is the time to learn standards". This year the message is "get your hands dirty with Javascript". Javascript is, without a doubt, having a real renaissance and it is a skill you should definitely develop whether you consider yourself a developer or a designer. More and more of your clients are going to be asking for some of the cool functionality that is found on the so called "web 2.0" sites and as these are mainly driven with Javascript you will need to brush up your skills. But beware, make sure the techniques you learn are up to date and that you get your head around concepts like unobtrusive Javascript, graceful degradation and progressive enhancement.

Preparing for Internet Explorer 7

As I am sure you are already aware IE 7 is going to be launched in the next couple of months. What you might not know is the new browser is going to be pushed out through windows update so you can expect this to become the dominant browser very quickly. Obviously this is an excellent opportunity to get some extra work from your clients (unless of course you are an in house designer in which case it is just extra hassle – sorry!).

In order to make the process of testing and fixing sites as painless as possible Microsoft have produce a set of tools for preparing for IE 7. Among them is an expression finder, useful for finding all of those annoying IE specific CSS hacks which may no longer work in IE 7.

Open data

From Google Maps to Microformats, there are more and more ways to share data across multiple sites. This kind of data sharing was seen as the biggest growth area for the coming year, so it is something that is worth learning more about. I couldn’t possibly begin to cover the many opportunities in this post but it is definitely an area to start researching.

One of the simplest places to start is with the subject of Microformats. Microformats are simply a consistent way tagging content across multiple sites. Because data is marked up in a consistent manner it can be identified by other systems and used.

The simplest example is the hCard which allows you to markup your contact information on your website in such a way as to make it readable by other sites and applications.

I know it may all sound very confusing but it’s actually very simple and very powerful. Definitely worth checking out.

Pricing design

One of the sessions at the event focused on what makes design great. It was presented by some of the best designers around and yet their answer was incredibly simple. Great design takes time. You need time to consider and tweak a design. The creative process just can’t be rushed. If you are anything like me, the look and feel of sites that you work on don’t get the priority they deserve. With so many time consuming tasks within an average project, design is often the first to suffer when the budgets are tight or the deadline is looming.

Although it is not easy, the moral of the story is that if we want to make our designs truly exceptional, we need to build more time for design into our projects. If you work out how to do that without sending the budget through the roof then let me know!

Designing for mobiles

Although designing for mobile devices is a huge growth area and you may well find clients interested in mobile sites, proceed with extreme caution. The session here at atMedia confirmed my worst fears about developing for mobile devices. There are approximately 40 different mobile browsers and over 160 different devices. Support for XHTML and CSS is minimal and designing for the mobile web is a very different beast to designing for the PC.

And so it ends

So that’s about it. A great conference. Thanks to all that were involved in presenting and putting on the event. It was incredibly enjoyable and had a great friendly atmosphere. If you missed out on atMedia then don’t panic. The podcasts will be out soon and you can still come to d.construct in September (for a fraction of the price!).

atMedia: Designing the Next Generation of Web Apps

Posted in Development on June 15, 2006 by Paul Boag

I can’t say I was very excited about this session. However Jeffrey Veen is an excellent speaker. He is engaging, really knows his stuff and has a unique perspective that I warmed too.

My problem is that I am a little sick of web 2.0. It’s not that I mind the buzzword or even dislike the concepts behind it. It just isn’t very relevant to the majority of my clients. Most of the organisations I work with are still largely conveying text based information. They haven’t yet reached the point of seriously considering web applications and no amount of pressure on my side is going to change that. As a result I really didn’t expect to be very inspired by this session.

As it turned out, this was probably my most enjoyable session so far. Jeffrey Veen is an excellent speaker and presented a really unique view of how the web is changing. I am not even going to try and explain what he covered. You will just have to wait for the podcast to come out (which apparently will be happening) or download the slides. However what I will say is that he did a section on how front end interface design is changing and showed some real practical examples that really inspired me.

Although he didn’t tell me anything I wasn’t already aware of, he has made me realise that I haven’t yet made the mental shift necessary to really "get" web applications. Until I do, I cannot expect my clients to grasp the concept either.

Let me give you an example of what I mean. He showed a slide that contained some data on rainfall levels in different major American cities at different points of the year. He showed, how as a designer, we would format that data to make it more readable and easier to digest. However, he then took it further by turning that information into a mini application that allowed the user to see those cities plotted on a map and use a slider to see the map at specific times of the year. I would never have considered that approach and although I wasn’t convinced that this was the best way to display the data, it did make me realise that there are a lot more options available than I have been currently considering.

In short Jeffrey’s session has made me reconsider my perspective of web design. Good stuff.

Web Design Podcast (14) – Real World Web 2.0

Posted in Classic shows on November 21, 2005 by Paul Boag

In this episode of the boagworld podcast, Marcus Lillington and I try to take the characteristics of Web 2.0 and apply them to real world websites.

Podcast: Download (34.0MB)