126. Scaling

Posted in Classic shows on July 14, 2008 by Paul Boag

In this weeks show we learn lessons from the botched iPhone launch here in the UK. We chat to Jeff Veen about the designer / developer relationship and Marcus talks about adding jingles to your website.

Download this show.

Launch our podcast player

Watch the behind the scenes video (Part 1)

Watch the behind the scenes video (Part 2)

News and Events

The Mobile Internet has reached critical mass

This week saw the release of a new report by Nielsen Mobile entitled “The Worldwide State of the Mobile Web“.

The gist of the report suggests that the mobile web is considerably more popular than many of us would believe. 15.6 percent of mobile subscribers in the US and 12.9 percent in the UK, use the mobile web regularly. In the US this equates to 40 million users. A substantial number.

Interestingly the most common device used for accessing the mobile web is not a smartphone but rather the Motorola RAZR. This reenforces the answer I gave Wayne in last weeks show. I said we cannot design exclusively for devices such as the iPhone.

With people like the VP of Google stating that the future of the internet lies with mobile users, there can now be little doubt as to the direction things are moving. This is especially true now that we are seeing unlimited data plans.

Web Standards Curriculum

A regular complaint I hear from students is that they are concerned about the out of date techniques they are taught at school or college. With many institutions still teaching table based design it is a legitimate concern.

Fortunately they are not alone in this concern. Opera and Yahoo! have teamed up to produce a web standards curriculum. This curriculum teaches best practice in web design and is broken down into modules that can be taught either by themselves or part of existing lesson plans.

If you are a student or educator definitely check this out. Hopefully you can get it adopted at your institution. Even if you cannot, there is nothing to stop you working through the course yourself.

Working with designers

Although our next post reads slightly like a rant (I should know what a rant sounds like!) it nevertheless communicates some excellent advice.

It is a post aimed at clients and provides 12 tips for working with designers. Advice includes leaving preconceived notions at the door, be specific in your requirements and design for your customers and not yourself.

There is no doubt that many clients serious misunderstand the role of the designer. However if I was a client reading this, I might find the tone hard to swallow. Despite that I would encourage those of you who work with designers to read this article. My favourite quote is…

Just as writers are not just people who can type, designers are not just people who can use graphics programs.

Web form design patterns

Our final post this week is a survey Smashing Magazine have done on 100 popular sign up form. The idea of the survey is to give you a better understanding of what makes an effective sign up form.

Of course, just because other sites do things in a certain way, does not make that the best approach. You should never blindly follow the crowd. Nevertheless this is a fascinating read.

The post is split into two parts and contains information such as…

How the link to the sign-up form is titled
The placement of sign-up links
Whether the sign-up form is a single or multiple pages
How labels are aligned
How many fields are mandatory
What help and tooltips are provided
How validation is managed
How error messages are designed
Is it necessary to confirm the email address
Is it necessary to confirm the password

The list goes on.

If you are looking to justify design decisions you have made or need some help designing the perfect signup form, this is a great place to start.

Just a quick reminder that the news we feature on the show is only a fraction of what myself and Paul Stanton post on the website. To get a more comprehensive view on what is happening in the world of web design, make sure you subscribe to our news RSS feed.

Feature: Lessons to be learnt from O2

I am not sure whether you noticed but this last week saw the launch of the iPhone 3G. It would certainly have been hard to miss it.

I don’t want to add anymore to the endless discussion surrounding this launch. However, I would like to focus on a side issue. I want to look at how O2s website handled this momentous event and what we can learn from their mistakes.

Interview: Jeff Veen on working with developers

Paul: So I’m very excited to have Jeff Veen joining me today on the show. Good to talk to you Jeff!

Jeff: Oh, it’s absolutely my pleasure. Thanks for having me!

Paul: Well it’s really good to get you on the show. I’ve wanted you on for ages, but I haven’t had the guts to kind of approach you so I sent Ryan to talk to you instead. I feel vaguely like, you know, you get at school discos where you fancy a girl and you send your best friend over ’cause you don’t have the guts to do it yourself. Or is that just me?

Jeff: Well I’ll tell you, I’m happy to have this dance Paul. It’s great.

Paul: Right, well for those that don’t know you Jeff and don’t know your background can you just tell us a little bit about yourself and how you ended up in a situation where you ended up working for Google. You know, how did that come about happening? ‘Cause that’s what we’re going to talk about a little bit today is your experiences of being at Google.

Jeff: Well, I tell you I’d been working with developers, as kind of more on the design side for quite a long time. Do you remember hotwired.com from Wired Magazine?

Paul: Oh yes, definitely.

Jeff: Way back when, right? Like we launched that back in 1994 and that’s really when I got started on the web, was coming over to Wired, working on their online properties like Hotwired, Webmonkey, and HotBot search engine, you know stuff like that. So I was with them for quite a while, they went through an acquisition and brought us over to Lycos, that big search engine. And then from there I started a company called Adaptive Path. Adaptive Path is a user experience consulting group in San Francisco. It was seven of us, we were all friends from the industry. We really focused on research, design, information architecture, usability, stuff like that. And I did that for a number of years with them and then finally convinced my partners that doing a product would be something interesting for us to try. We had done consulting. We had done some events. So we were kind of looking for the next thing to try. So I put together a small team of developers and some other designers and we made a product called Measure Map. That was a web analytics tool aimed specifically at bloggers. And just as we were about to launch it, we had done a bunch of work on it, Google gave us a call and said, “We love what you’re doing. We want you to come over and bring that to Google.” So we went through an acquisition there and that’s really how I got to Google.

Paul: Ahh, I see. ‘Cause I remember very vividly Measure Map coming along and getting very excited about it and then it kind of disappeared.

Jeff: A little bit, yeah.

Paul: Yeah, ’cause you got swallowed into Google.

Jeff: Well Google was very clear that they had a lot of respect for the work that we had done around designing Measure Map and wanted us to apply that expertise to their big Google Analytics product which had recently, sort of. They had acquired a company called Urchin, which had kind of an enterprise analytics package and they had made it free, and that had brought it to a whole new audience that really, sort of, didn’t quite understand how analytics worked. So we brought some of the best practices of design into Google and redesigned Google Analytics to make it sort of, kind of maintain all the power that it had, but make it much more accessible to a broader audience. So that’s really what we spent our time doing at Google.

Paul: OK, so we saw Google Analytics and those changes that you made to Google Analytics appear a few months back, and you know, were very impressive. But I’m quite interested in what happened. How did that come about, and how did that process work? So you arrive at Google, you walk through the door of Google. Now, one presumes that there was an existing Analytics team already working. Is that right?

Jeff: Yeah, that’s right. There was probably about twenty developers or so that were working on the Analytics application. Almost entirely all, sort of back-end engineers. As you can imagine, something of that size and scope, it’s a pretty impressive technical feat. The amount of data that they’re tracking every day, really just continues to blow my mind how much scale they have over there. So there was really, really talented engineers that had been working with the product for quite some time. That product had been around for a number of years. I think they were in version six of the product. But, to their credit, the Director of Engineering, a guy named Paul Moret, really knew that he had to change that application for this new audience that he had, sort of had started to grow by being at Google. So he was really behind the idea of completely rethinking. “Like lets,” he said, “Let’s start from scratch. Right, we have a lot of users. We have a really powerful product that I want to completely rethink how this happens.” And so, yeah, we really just rolled up our sleeves and sat down with him and his team and really sort of became one team. Got in there and made a lot of change. One of the things I think that really helped us be successful there was that we had a pretty robust methodology for user research that really resonated with a lot of the engineers that we were working with. It was really sort of. It was like I said, pretty mature, had a lot of data behind it so we could really show a lot of the work and helped us really get over a lot of the perceived subjectivity of design. So, you know, you can imagine this team comes in. We are a bunch of relatively technical designers, but still designers. And we sit down with these very, very technical engineers and we kind of showed them a process of how we were going to talk to a lot of the existing audience, a lot of the new segments of the audience, take everything that they told us and kind of boil it down into a lot of actionable next steps. And a way of prioritizing what features and changes we wanted to make. And so rather than us kind of going off, doing a bunch of design work and presenting it to them, we really involved everybody, or as many people as we could, in the process of how to change that application at its very basic level. So I think the results of doing all of that with the technical team was that we built a lot of trust between us. So that we could take some of their fundamental assumptions and really question those, but include them in that process so that there was a lot of give and take.

Paul: I mean yeah, because your initial reaction when you look at a company like Google, that it is a very developer-centric company. So I was kind of half-expecting you to say that you encountered quite a lot of resistance to the kind of design changes that you were introducing, but from the sounds of it, because your methodology is quite scientific, for want of a better word, you know it’s very logical, etcetera that it sounds like it went down quite well.

Jeff: Yeah, it did. It feels like we’re using the scientific method: doing testing and research and analysis and things like that. Ultimately though, so much of design is really, really hard to measure. Especially when it comes to matters of taste and perception and things like that. I mean, we can measure click-throughs and we can measure conversion rates and things like that, but ultimately the changes had to come from just being good designers. So having this relatively, kind of quantitative analysis that we did just allowed us to sort of speak on the same terms with the engineers. Have them trust us, and then let us make the changes we felt in our gut we should be making. So a lot of times I’ll be working with somebody who is very technical and they want to say, “Well if you make that change, can you show us some data that’ll prove that that’s the right change to make?” And almost never can I do that. Right, like we can do little tests and we can do some A/B testing and multivariate testing and stuff like that. And that’s good for little incremental changes but when you’re fundamentally changing an application it’s almost impossible to measure the accuracy of the decisions that you’re making. And that can be hard for somebody who really is a very analytical thinker, very quantitative in the decisions that they make, to sometimes kind of let go and say “No. You’ve go
t to trust us. It’s just going to be better.”

Paul: So were there other techniques that you used beyond providing data to kind of bridge that gap between the way that maybe designers see the world and that of developers?

Jeff: Well I’ll tell you another thing that I really believe in, is prototyping rather than just drawing mockups. One of the benefits I had going into Google is that I had a remarkable team at Measure Map that were quite technical. A very good front-end developer who could do lots of JavaScript, AJAX, CSS markup kind of work. A talented Ruby developer, and then a guy who was great with Flash and ActionScript. So bringing this team together, all of them good designers, but all of them with very technical backgrounds, we could come in and very quickly start to realize what a redesign might look like. Also the thing that really helped us was that Analytics internally had a very well-developed API. So we could say “All right, show us how this API works, then we’re going to immediately start experimenting on top of it using real data. We can bring users in for usability tests and they can see their data in our prototype in a matter of weeks, rather than months and months of development.” So having that separation between design, front-end and back-end, through a robust API allowed us to prototype so quickly that they could immediately say, “Wow! Look at all the work this team is doing!” Rather than us standing in front of the projector pointing at Photoshop comps or something and saying “Imagine what it would be like to click here.” We just had a thing working that people could log into anytime.

Paul: Yeah, I can really understand how that would make an enormous difference. So I’m presuming that you talk about your little team of people that went in there and started doing prototyping and stuff like that, but obviously you’re going to want to engage more with the developers that are there. I mean, the traditional danger has always been that as a developer and a designer you work independently. The designer does his thing. He hands it over the partition to the developer. The developer goes away and does his thing. Now I presume you wanted to avoid that. So how did you establish that working relationship? How did you end up working closely together?

Jeff: I have almost no interest in that sort of “waterfall method” where somebody goes off and does research, hands it off to designers, designers then do some of their magic, hand it off to developers. I’ve never been successful at doing that, primarily I think because I learn so much from the process of building things. So again, it was just, really one of the first things we did was invest a lot in getting the teams to trust one another. And that meant really just spending time with each other. So that meant almost every day just scheduling some time in the conference room for us all to kick around ideas, to look at some of the existing work that they were doing, some of their future plans and just spending a tremendous amount of time with them. We also just had our desks right next to the development team. We were embedded, we were just right there. So we felt like part of the team. We’d all go eat lunch together. I mean simple things like that just make the development process so much more, so much easier because there’s real people working with each other rather than faceless “other people” handing specs over. So putting a lot of time in: absolutely crucial to success in a process like that.

Paul: So obviously you got to work with a great group of people over at Google. Some of the most talented developers in the world I guess. So I’m really interested to know, what was it you learned from them? You spent all this time with them, what was the kind of thing that you took away as a front-end interface designer what did you learn from this amazing group of developers?

Jeff: Well, a couple of things really. I think the thing that struck us the most when we first got there was just the enormous scale of everything. Like Google, as you can imagine, Google has lots and lots of users, but they have a tremendous diversity of users too, literally from around the world. A statistic that we throw out all the time is that seventy percent of Google’s traffic comes from outside the United States. So the audience that we were used to designing for is really the small minority of people, and in fact the rest of the world is where all of the products are being used. So we had to think about that diversity of audience even in the design decisions that we were making every day in that everything that we were designing was going to be translated in up to forty different languages. So that was probably the first thing that really brought our attention. The second thing was the unbelievably high standards that Google had for their products. Like you said, I totally agree, they’re some of the best engineers in the world. They have coding standards. They have testing standards, QA standards that were absolutely remarkable. I just learned so much about how every little detail fits into place to make a product that’s as robust and as really scalable and useable by a global audience that Google has. It was really like I got a crash course in some of the best computer science education I could possibly ever ask for.

Paul: Very cool indeed. So for the designers that are listening to this now, the front-end people that maybe are working with developers day in and day out and secretly behind their backs are having a bit of moan about those developers, they’re finding them quite tricky to work with, what advice would you give them about interacting and working with developers?

Jeff: Well, like I said, you’ve got to spend time in the trenches with them. That I think is just the most obvious thing that I can recommend doing. For both sides. It was hard for me to trust a lot of developers, like “Oh, you’re only concerned about your servers, you don’t care about users at all.” Which of course is completely false, but that’s an inherent bias that I would have. So again, spending that time: incredibly important. I think one of the things that I try to educate the most while I was there was that the level of detail, the care, everything that goes into the coding standards that engineers have, we have that same standard for the interfaces that we build. So I think sometimes, and I hate to generalize across developers, because I’ve worked just the entire spectrum of developers. One of the themes that I hear from time to time is that design is something that kind of happens at the end. Like “We do all the hard engineering. We get all of these systems in place and write all of this code and then we need some designers to come on and put the interface on so that we can actually launch this thing.” That I think cheapens a lot of the work that we do, and it’s a little bit demeaning for the discipline of design, of user experience. So I think we have biases on both sides and that frankly understanding more about what goes into the process both from a front-end and a back-
end point of view is kind of what brings us all together.

Paul: So if you could communicate one thing to the developers, one lesson, the question the other way around I guess. I guess in some ways it’s the same answer, isn’t it? It’s kind of stick with one another.

Jeff: Yeah, a little bit. Also there’s some really simple techniques that I’ve used, for example: even before we started we’d schedule a usability test with the existing product and get the engineers into the room behind that one way mirror and we would just watch. And we would watch people flail around with the interface and struggle and get frustrated and push the keyboard away. I mean that’s just golden. People see that and they’re just like, “Oh man, we’ve got some work to do.” So making it as clear as possible, what our users are trying to do, how we can all collaborate together to help them: incredibly, incredibly important. That said, it wasn’t, you know when I did consulting at Adaptive Path I was inside lots of companies. I worked with some of the biggest companies in America and saw inside of them and, to be honest, Google is truly a user-centered company. I was just so impressed with that. Broadening that idea of user-centered technology development is something that we worked on. Making it more of a balance between front-end and back-end is more some of the things we worked on. But ultimately I think Google really understands that putting users first is the way to be successful. Just look at the search results page with it’s very simple but incredibly effective advertising techniques, and you know, Google never had a front page that was full of the sort of portal design stuff that Yahoo! and other companies have done. So really, it was very fertile ground for the kind of work we wanted to do when we got there.

Paul: Very interesting. I’ve just thought of one other question that I get asked a lot from people looking to get into web design: they say, “So what am I better off doing, you know, where’s the best place to work? Is it in the large company? Or is it doing something in a small company by yourself?” Now you’ve obviously done both of those and there is no definitive answer, but what would you see as the pros and cons of a large company in comparison to working somewhere smaller like Adaptive Path?

Jeff: You’re right, in my career I’ve got swung back and forth between big and small. There are definitely benefits and drawbacks to both of them. In the bigger companies I think just inherently things move slower. Now, I mean Google is renowned for it’s “bottom-up culture” and good ideas are always emerging from people taking their twenty percent time. None of that is a myth. That all really happens. But at the same time, like I said, when millions of users, or hundreds of millions for some of the products. You just have to take a lot more steps, and what that does is it increases the distance between the idea that a designer or developer has, and a user actually seeing that idea. And one of the things that I love about this sort of entrepreneurial startup environment is that you can think of something, you can try it out, you can get it in front of your users. You can do that in an afternoon. And you can’t do that with a product like Gmail or Adwords or something like that because there’s so much inherent infrastructure and risk, things like that. I think it’s incredibly worthwhile for people to have both experiences, and frankly see what they like best. One of the things I really have learned in my career is that there are people that like to start things, and that there are people that like to run things. And there is no inherent judgment between the two, but once you understand “Ooh, I love having a big system and having that system run perfectly, and putting all the things in place to keep that, you know.” And that’s fantastic. I’ve learned, in my career, that I’m kind of on the other side. I love starting with nothing and building up something, and at some point I need to hand it off to somebody who is much better at running and maintaining, right. So those are the kind of things you learn by doing a lot of very different projects and product development and stuff like that as your career kind of goes on, I think.

Paul: So you’ve left Google now? So what’s the next step? What are you up to at the moment? Let’s finish on a looking forward note. Where are you going? What are you doing?

Jeff: I was at Google for just over two years and left about six weeks ago, and to be honest I’m spending a lot of time right now cycling and trying to sleep late, and things like that. I tell you it’s a tremendous luxury and I’m not taking it for granted at all. The immediate next thing is that I’m organizing a little conference with my colleague Bryan Mason, who I have worked with at Adaptive Path. He and I are doing a conference in San Francisco in August about starting companies. Yeah, as I was leaving Google I was thinking, “Well, what should I do next? What would be interesting?” So I talked to a bunch of my friends who have been entrepreneurs, or who are now investors and I just asked them, “Tell me your story. How did you get to where you are?” And I found those stories so interesting that I thought, “Man, we’ve got to share this. This is great.” And I thought, “Well, I could do a podcast or something like that.” But then I thought, “I love getting people together and having sort of a community feel.” So we thought: we’ll get one day, San Francisco in August. We’ll get everybody together and we’ll just have these conversations. So I’m really looking forward to it. It’s called “The Start Conference” and you can find it at thestartconference.com. That’s what we’re doing now.

Paul: Excellent stuff. Thank you so much Jeffrey for coming onto the show and talking about that. The issue of designers and developers working together is something that’s really important and I think there’s a lot of work still to be done, and it’s good to see that there are people out there that have got it right and are going in the right direction.

Jeff: I appreciate that Paul.

Paul: Thanks for your time.

Jeff: Thank you.

Thanks to Todd Dietrich for transcribing this interview.

Listeners feedback:

Adding a jingle to your site

Chris writes: A client of mine wants to incorporate 4 second jingles at various points on their website, triggered on page load, to reinforce their servicing brand. My first reaction is that this could get annoying but was curious as to your thoughts on the use of audio on the web.

I don’t think that there is any set ‘rule’ here but basically I would agree 100% that you shouldn’t do it because it will annoy the hell out of the site’s users.

There is an argument that audio branding can be included if th
e user only has to hear it once. However, I would dispute this as well for the following reasons:

It may well still annoy (and therefore have a negative effect upon) the site’s users
Users aren’t expecting it and it could embarrass them in an office environment
Quite a lot of users will have the sound off. Therefore, if you decide that the audio is only an ‘add on’ for the brand then you may as well conclude that it’s not necessary at all.

I have talked about audio on website before and reached the conclusion that, even though technology and bandwidth makes it more doable, it’s the wrong medium for audio. I think I likened it to having a soundtrack while you’re reading a book – it’s just wrong!

Of course, there are no doubt exceptions to this rule – really well thought out and produced audio indicators on a web app for example – but, generally speaking, audio branding on a website will have a negative effect. If your client is insistent, try and persuade him to include a video download on the site where audio will certainly work.

Fixed or bespoke pricing

Jon writes: We are a small web design and development company (4 people) and have tended to concentrate on higher value bespoke work. We are probably about to merge with another slightly larger company in a neighbouring town. This other company have traditionally aimed at a somewhat lower value market.

My question is about pricing. The other company operate to a very structured price list (£x for a 5 page brochure site, £Y for a basic ecommerce site, £Z for an ecommerce site with knobs on etc). We have always priced each project individually using a mixture of time costing, guesswork, and a “how much can we get away with” approach.

Do you think that a merged company approaching a wider market and value range would be better to adopt one approach or the other, or continue to do both? Would the existence of one approach damage the ability to operate effectively at the other end of the scale?

I guess the big question here is – are you going to remain as two different entities with some shared resources, or are you going to merge more fully and share work between the team no matter where it is sourced from (i.e. will one of their designers work on a future project from one of your existing clients)? If it is the former (which I suspect it isn’t) then I would keep the two pricing models the same as they are. I wouldn’t try and hide the fact that the two companies have ‘merged’ though, just explain that there are two teams delivering different services.

However, if the two companies are merging more fully, then I think this is actually fairly fundamental stuff. It’s almost like you’re all starting again and need to write a business plan. I think you would be opening yourself up for much criticism if you tried to operate both pricing plans.

I suppose other questions to you would be:

Which pricing plan is most effective (who is making the most profit)?
What does each company’s order book look like? I.e. have you just signed a massive contract at your higher rates?

This is interesting stuff and I’d like to know how it works out. I suppose the biggest unknown for me (that may well answer all of my other questions) is that I don’t know the reason for the merger in the first place.

125. Copy

Posted in Classic shows on July 9, 2008 by Paul Boag

In this weeks show we discuss how to give personality to your site copy and we talk with Elliot Jay Stocks about going freelance.

Podcast: Download (30.4MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and Events

The clever chaps at Carsonified

If you happen to follow any of the guys at Carsonified on twitter, you cannot help but know they are working on a not-so-secret project called Matt.

It is an interesting idea that they have done once before. They stop all normal work for a week and blitz a small self contained project using an Agile style approach.

The final result is not what counts. It is the exercise itself that I find interesting. By doing this periodically they…

Create a lot of buzz which reflects well on their company
Build a great sense of camaraderie
Get to try out new technologies and techniques
Break the routine of everyday work
Push people’s comfort zones and help develop new skills

It’s a great plan and one more of us should adopt. It is certainly something I would like to do in Headscape. Of course it is more tricky when you have clients with deadlines however the principle still applies. You may find it hard to do this for a week, but maybe a single day is possible.

Adobe make flash searchable

The big news of the week is an announcement by Adobe that they have been working with both Google and Yahoo! to improve the indexing of flash. This is no real surprises as the SEO of flash has been a major headache for the technology. The surprising bit is that they have succeeded, at least in the case of Google.

Apparently Adobe have created a special flash player for the search engines that acts as a virtual user. This user trawls through each swf converting the content into something search engines can understand.

Apparently Google is in the process of rolling out the technology. Unfortunately Yahoo! apparently have "some work to do." Nevertheless this is a promising step forward.

Of course until Adobe make it easy for the average blogger or website owner to deep link within a flash file, the 73 million flash sites are not likely to be highly ranked.

Colour blindness on the web

My final story for the day is a post on colour blindness by Richard Rutter. To call this news is a huge stretch as the article was published in 2005. However, I have only just found it so it is news to me!

I have to say I love this post. At the very beginning Rich tells us he is colour blind and so I braced myself for feelings of guilt and inadequacy as he tells me my sites are inaccessible. Instead I got this…

The thing is, colour blindness on the Web isnÕt a big deal. You do have to bear it mind (as I will show later on), but there is no need to let it dominate any design decision.

What a breath of fresh air. He then goes on to give some very simple advice that anybody can follow…

Do not rely on colour alone to convey information (such as on Jeff Veen’s blog)
Do not write instructions such as "click the green button"

He goes on to dispel some misconceptions and provides good examples of where things can become a problem.

If you worry about the large number of colour blind users out there (and you should do), then give this post a read.

Feature: Copy with Personality

Too much of the copy I read on websites is bland and uninspiring. Its time to add some personality. We look at this in this weeks feature.

Interview: Elliot Jay Stocks on Going Freelance

Paul Boag: So joining me today is Elliot Jay Stocks previously from Cansonified now a freelance web designer, in the depths of Norway I hear earlier.

Elliot Jay Stocks: Yes. That’s all the hype depending on how you look at it.

Paul: Well it’s really good to have you on the show.

Elliot: Thank you for having me.

Paul: Normally when we get people on the show it’s to talk about some specific area of expertise or something like that. Although I know you have many, many areas of expertise I wanted to get you on the show just because of the really interesting thing that you’ve chosen to do. The fact that you’ve left a fairly well known company that had a really good reputation. That you’ve decided to go freelance. And you’ve decided, at least for a short length of time to work from Norway, as a bit of an adventure. Is that the right way to put it?

Elliot: Yeah I guess so. I don’t like to do anything by halves. I like to do everything at once. So we gave up our flat my girlfriend went off travelling to the far east. I moved to Norway and at the same time decided to start up my own business. So quite a few life changing things at once.

Paul: Cool. I mean that’s really exciting and I guess that’s the power of freelancing, that you’ve got the freedom to work from wherever you want.

Elliot: Yeah and the power of the web in general. You know whenever anybody says "How can you do that?" I say I’ve got my laptop and as long as I’ve got an internet connection then it’s all good. Although having said that my internet connection here is really dodgy.

Paul: Which is why I’m calling you on an ordinary phone line.

Elliot: Right. Where I’m staying unfortunately there is something wrong with the router where it doesn’t allow ftp or any way to send email out. So there’s no upstream traffic. Which isn’t that great when you’re a web designer. So my new office, as it were, is one of the local coffee shops.

Paul: In order to get ’round the problem. So we’ve got loads of people listening to this show that either are web designer’s in an agency of some description or in house designers somewhere or alternatively people maybe not working in web design at all at the moment but want to. So we get lots of questions about freelancing and I thought okay let’s get somebody on the show that’s literally just gone through this process. And kind of ask you a few questions about you’re experiences a
nd how its gone. I guess the biggest one and the one that we probably should start with is overcoming that kind of fear factor of giving up a regular income. How did you kind of convince yourself that this was a good idea?

Elliot: I’d been thinking about going freelance for a while. Not to swat at Carsonified, but sort of the entire time I’ve been working at a web designer. I started off doing freelance things in University. So like doing site for things like friends bands and things like that. I mean I carried on doing that as soon as I started working in the industry and have carried on the last 4 years or so doing bits and bobs, evenings and weekends. Although I’ve only just started doing it fulltime I’ve got quite a bit of experience doing it on a part-time basis which obviously is a little less scary, when you’re making. I think the other thing as well at Carsonified most days of the week I actually worked from home, in London, so that was a really good testing ground to see if I had the self discipline to work by myself all day and stay motivated and stuff like that. So because of that it was slightly less scary making the actual jump.

Paul: So would you recommend that to somebody who is considering going freelance? To kind of build up some work on the side and also if possible to negotiate some home working to see how you get on with it?

Elliot: Yeah definitely. It’s something that’s not suited to everybody. Obviously there’s the appeal, everybody thinks WOW I’d love to work from home, loads of freedom fantastic. But, people I have spoken to have said I find it very very hard to get motivated when I’m at home. It’s easy to get distracted. The other thing as well is it can often be quite lonely. Jonathan Snook recently wrote a post about this on his site. He was disussing these ways of battling freelance loneliness. You know going to the local coffee shop for instance. Which is another thing to bear in mind when you’re doing it. There’s the option of working entirely by yourself. Working in the public, like the coffee shop. Working in a shared working environment. I’m still undecided really. I get on fine working by myself, but when I get back to the UK we’re not sure exactly where we’re gonna go. Depending on where we do go I may look into some kind of co-working space or whatever. There’s a possibility that we might go Oxford way, if so I may shack up with the old Rissington chaps, which would be lovely.

Paul: That would be superb.

Elliot: Yeah.

Paul: Well obviously no it wouldn’t because they’re nothing but rude and obnoxious to me so I’m in no way supporting that decision.

Elliot: And they’re a rival podcast.

Paul: Well it’s not so much the rival podcast it’s the fact that they’re just so jealous and envious of my huge success (Paul laugh maniacally).

Elliot: Well I hear you’re the one who gets noticed on the tube anyway.

Paul: Well yes this is true. Okay moving back to the interview and on with the questions. Cashflow is obviously something that always scares people. Not just when making the leap into freelance. How do you actually fund it starting off? You know in those first few weeks. How did you go about that? What was your solution to the problem?

Elliot: I’m not sure that my solution is the best one. People always say to make sure you have some money in the bank. You know enough to see you over for 2 or 3 months so that if it’s very slow starting off, if you’re not getting a lot of work in or if you are getting work in but clients are slow paying you’ve got a sort of fall back plan. I made sure I had a bit of money in the bank so that if it all went horrible wrong I’d still be able to survive. Luckily at the same time because we moved out of our flat and I am now living in Norway temporarily. Although Norway is horrendously expensive to anyone but Norwegians it’s actually cheaper working out here living here at the moment because of the reduced rent compared to what I was paying in London. So that was one factor that made it a little bit easier. The other thing is that I alread had a lot of work already booked in before going freelance. I think more than anything that’s the important thing when people make that jump, is having the work there. So rather than jumping and saying okay I work for myself now I better go get some work. To already have as much lined up as possible. Fortunately I am in a position where I had loads of stuff booked up a couple of months in advance. That was a good safety net. Obviously clients can be slow to pay so I always ask for 25% deposit before I start. That’s 25% based on the estimated amount of the project. But it’s a nice little safety net to have in there. It means you have a little bit of cash and if they decide that they want to be horrible at the end and not pay you’ve got a little bit of something to fall back on.

Paul: Sure. I mean it’s interesting that you said that you were fortunate enough to get some work lined up before you began. I mean the obvious question is how did you achieve that. You must have been marketing or been selling yourself in some way in order to attract that work.

Elliot: Selling myself. (laughs at Paul’s implied dirty joke)

Paul: Selling yourself in the nicest way.

Elliot: Yeah to some degree. I’ve been very very fortunate and I haven’t had to look for any work yet. So far people have got in contact with me so I haven’t had to go out there and kind of beg for clients or anything. Obviously Carsonified was quite high profile stuff. Prior to that when I worked in the music industry luckily I got work with some very high profile artists and bands so because of that and because I had those things in my portfolio that was part of the marketing. People see these kind of bigger bands in your portfolio. It definitly makes it easier because regardless of the work I think it kind of impresses people if they see a name that they recognize. In terms of marketing I guess this time last year, or I guess just over a year ago, the recent version of my site and things kind of took off from there really. I’ve put that on a load of CSS galleries which obviously helps because they get so much traffic. I think still sites like CSS Beauty and Web Designer Wall they’re still some of my biggest refers even now. So I think getting you’re site on there, getting people to look at it there that often has a snowball effect of having the other galleries picking it up and other sites and
things like that. So that obviously helps. In terms of the work for the next few months, I’m actually launching a new version of my site which will probably launch in a month or two’s time. And I’m gonna do the same things again. Put it on lots of gallery sites. Tell people about it. I think having a new site with an emphasis more on the work more than just being a blog that will hopefully help as well in the continuing marketing. Luckily enough, doing things like this even lets people hear about you some more and I guess the thing with marketing it’s just to get your name out there in which ever way you can. To get people hearing about your stuff.

Paul: So would you recommend, if someone’s talking about going freelance, say a new graduate that has just come out of university. Would you actually encourage them to try working for an agency where they can perhaps build up a portfolio of bigger clients before they go freelance? Or is there really no reason why they shouldn’t go freelance straight away.

Elliot: No. I would definitely encourage working for an agency or as an in house designer for some kind of company before hand. When I left university my flat mate and I were condsidering starting up a business and I was thinking about this this morning actually. If we’d have done that and we could have done it I guess and maybe done okay out of it but the first thing is. I don’t think I would have then got access to the kind of high profile clients that I have got through my previous work experience so in that sense I probably would have still be struggling now to market myself and convince people I can work with big brands. The main thing that I, you know the wealth of experience that working in an agency will give you is definitely something not to be under estimated. Dealing with clients. Dealing with rediculous deadlines. Obviously these are things that your pick up being freelance as well but being inside an agency and working with other people and getting a feel for the industry that you are in, the working environment. The requirements. Things like that. All of that stuff. I am very grateful that I decided not to start my own business that early on and actually went to a real job as it were. So I would definitely recommend that people do it, that graduates do that. As well I thinks it’s just you learn a lot about who you are as a designer and where your strengths are. I mean when I was at Young life I was completely Flash. 100%. I barely new HTML at all when I started there because I was so interested in Flash. Obviously now that has completely changed. Now its much more, well completely standards based. That’s sort of where I specialize in now. If I hadn’t gone through that process I may not have realized that.

Paul: Okay so we’ve done the kind of exciting stuff of kind of talking about setting up, or deciding to take the leap and go freelance. We talked where the work comes from. What about all the boring stuff? What was your experience of the admin of going freelance? Setting up all the kind of legal requirements. What did you do there? You kind of muddle your way through that yourself? Did you get any help? How did you approach it? What were the big problems?

Elliot: A bit of muddling through. A bit of asking around. There’s still some things that I have yet to do. For instance I haven’t yet got a business bank account. Which I’m waiting till I get back to the UK. Mainly because I was setting this up at the time of moving, leaving the country. It was very very complicated. As I’m not getting paid immediately for some of the projects I am doing its fine to wait till July and set it all up then. You know what a nightmare UK banks can be anyway. So still waiting about that. One of the first things I did was get an accountant. I was quite nervous about this because one of the things that really dawned on me was how do you…First of all how do you find an accountant and then once you’ve found one how do you say "Ah they’re good.": You know, if you’re choosing a designer you can look at there work and it’s very easy to see what their like. What their styles like. What they’ve done. This kind of thing. With an accountant I think it’s really hard. You can only seem to go mainly on recommendations from friends and colleagues. Luckily I’ve had some dealings before with Nick who is Carsonified’s accountant and really nice guy and I figured well I’ll get a consult with him and if he fancies doing accounting for myself. I had a quick meeting with him. He was very friendly. I got to ask him all sorts of mundane tax questions which he answered for me. That was one of the first things I got sorted. So that was a big weight off my mind. To have someone who could look after all that stuff. Everybody has always said to me, in fact I think you may have said to me yourself, a good accountant will always pay for themselves and then some. In the time they save you. In the expertise. When the taxes come and all this kind of thing. So everybody recommended to me that I get an accountant from the first thigns and I guess that I would even in these early days say the same thing to anyone else thinking about that. In terms of paper work and stuff like that, one of the things I really really underestimated, although luckily I found out the truth in the first week, is how long it would take to manage my calendar. I just thought yeah I’ll book things and it will be fine. What I didn’t realize was that when projects need to shift round or you had to allocate couple of extra days for this. This had to move. The scheduling was actually, not a nightmare, but something you really have to make time for. The tricky thing is at the end of that you have nothing to show. There’s no realy paperwork to go with it. It’s an output as such. It’s easy to leave it off for, to neglect it. But obviously it’s something that needs to happen. In terms of paper work I made sure I designed myself a nice little invoice template so at least doing paper work isn’t as mundane as it has to be. Caus I got some nice little pretty pictures on my invoices. Doing that kind of stuff and obviously kind of chasing people to pay the money. Although actually so far everyone’s been very good. I haven’t got anything to complain about.

Paul: It’s interesting isn’t it. That when you kind of sit down and think about going freelance and whatever else you do the calculations if I charged this per hour and you know I work 40 hours per week WOW I’m gonna be so rich. But very quickly you realize that well actually half of my time is probably taken up with non-paid work like managing your calendar, project management, invoicing. Dealing with the accountant and all of the that kind of stuff. It’s easy to forget that side of things. What about the business plan? Did you put any kind of business plan together or did you just go oh sod it I’m just going to do it?

Elliot: I said oh sod it I’m gonna do it. For the kind of stuff that I’m doing I didn’t see the point in doing a business plan. Because I know exactly what I’m doing which is providing a design service to clients on a project by project basis. I don’t have any plans to grow the company as it were. This may change over time of course but at the moment I have not interest in turning it into an agency and employing other people. Obviously there are some financial benefits to doing that. A lot of people will tell you it’s the best thing to do and you gradually get less involved with the day to day stuff and are just running the company but to be honest at least w
here I am now I wouldn’t be happy doing that. Because I actually love doing the day to day, the hands on design work and if I wasn’t doing that I wouldn’t be happy and that’s the reason I’m doing this anyway. So at the moment there’s no, it’s not like I’m a start up and I have a product and I need to predict sales and growth in that way. I think just being a designer we’ve got it a bit easier. So maybe I’m going about it the wrong way. Maybe I’m being unprofessional but this if fine for me.

Paul: No I have to say I would agree. You know it’s not like you’ve got big costs going out. You don’t have offices that have to be paid for on a monthly basis. You don’t have staff that you have to worry about. And pensions for those staff. You know there’s no major complexity to it that kind of demands a business plan. I mean ultimately you just need to know that you are earning enough each month to pay your accountant and feed yourself.

Elliot: That’s right yeah exactly. I think as long as you can go into freelance work and aim to earn at least as much as you were earning in your day job then I don’t think you’re going to run into too much trouble. As you say it’s probably safe to assume that half of your week you’re not actually going to be getting paid for because technically you wont be doing paid work like you say you’ll be doing the invoicing, chasing up things like this. So if you say you’re only working 2.5 days a week I think it’s a fairly safe bet to go on. If you can say that in those 2.5 days you’re going to earn at least as much as you were earning in a week when you were in fulltime employment then you’re not going to go too far wrong. Obviously a lot of what we aim to do and what is happening with me luckily at the moment is earning more than what I was earning in fulltime employment. So in that respect it’s yeah it’s good and I don’t think there too much to worry about there. As I said before luckily we as web designers have very very few overheads. Like you say if you’re renting an office that’s one thing and obviously there’s the accountant but actually accountants are very very reasonably priced anyway and I’m paying it all in a lump sum just to get it out there and get it done. Luckily there isn’t too much that we have to spend much money on.

Paul: Okay last question and to wrap up with. How far in, sorry when did you set up again? I’m trying to think how long you’ve been doing this now?

Elliot: Doing it fulltime has been since around the 20th of April.

Paul: So it’s still very early days. You’re just over a month in. So so far pros and cons of being you’re own boss? What things have you liked? What things have you not liked?

Elliot: The main pro and so far they’re living up to what I expected the pros and cons to be. Some of the main pros are the freedom of being you’re own boss. Obviously to an extent you’re clients are your bosses but just having the freedom to decide when you think this deadline should be. Doing the work when you like to where you would like to is a really great thing. When somebody comes to you to estimate a project being able to be generous enough with the hours to know that you can really spend a decent amount of time on the project. Not to a degree where you’re kind of taking the mickey as it were. But knowing that you can really give some really good time to a project instead of it being rushed. Also picking and choosing the clients. If you have got a fairly steady amount of work coming in and you can afford to say no to some things then that’s great cause it means that you can just work on a project that you personally find interesting. As I said before the financial benefits are working out well so far. That is a game when anyone goes freelance as well as freedom there is the monetary benefite as well. I can’t express enough this sense of freedom. Just having a chat with you this morning and then toodling off into town later this morning to go and do some work from a coffee shop and I’ll probably work a bit later this evening because we’ve had this chat this morning but you know having the freedom to do that and not having to worry about needing to stick to normal working hours and things like that. Not that employers aren’t flexible to these things but knowing that you’re the only person you have to please that does make a massive difference.

Paul: So what about cons? Those were all pros.

Elliot: They are aren’t they.

Paul: You’re still in the honeymoon period aren’t you?

Elliot: Yeah I agree. Give me a year and I’ll be all disheveled and angry. The only con I’ll say is that it can be a bit lonely sometimes. I mean I guess it’s hard to judge cause I’m in a foreign country where I only know a few people anyway. There way a while where I was working from my room here when the connection was a bit more reliable and that was great but I found I’m actually much happier being around more people now. Seeing more people during the day. I think I’m fairly well self disciplined like I said before cause I’ve had the experience of working from home before for quite a while but even so I found that I sometimes get a little bit distracted when I’m at home. You know go for a little wander. When you’re sitting down maybe in a coffee shop in public it’s more like this working environment, you can focus a bit more. I think even if you work from home most of the time maybe spend one day a week heading out and working in a public space just to see how it compares. I definitely find my concentration is a little bit better when I’m in somewhere like that.

Paul: That’s really interesting because that’s something I’ve never tried doing. You know I work from home the vast majority of my week and I’ve never kind of gone and sat in a coffee shop. Mainly because I don’t drink coffee but also because, I don’t know its just never occured to me. I will go and try it today. There we go. We’ve got a little coffee shop around the corner I really like so I will go and sit in there and do some work for a while.

Elliot: Of course as soon as you get there there will be really loud music and you won’t be able to concentrate.

Paul: Probably. So Elliot you’ve definitely taught me something. I like that idea. What has that never occurred to me? Never even thought about doing that.

Elliot: Of course I have only been doing it for a month so I could be completely and absolutely wrong.

Paul: Yeah it could be a nightmare couldn’t it. But that’s why I wanted to get you on really. I wanted to get you on at the early outset of you doing this just to kind of give that unique perspective of somebody who’s just gone through the process. The stuff that you’ve covered has been great. I really apre
ciate the time that you’ve taken to come on. We’ll get you back on again in the future when you’re a year down the line and see how you feel then.

Elliot: Yes that would be a good test.

Paul: It would be.

Elliot: Something to aim towards perhaps?

Paul: Yeah. So you’ve got to stay as a freelancer for at least a year otherwise it would be very inconvenient. Alright good to have you on the show Elliot and we will talk to you again soon.

Thanks to Curtis McHale for transcribing this interview.

Listeners feedback:

Wayne Henderson from Southern California has sent in an audio file for this week’s show consisting of two separate but equally good questions.

Hello Paul, Hello Marcus this is Wayne from Wayne Henderson voiceovers and as you can tell from my voice I’m obviously from Bristol, no wait actually Southern California and I have two question I would love to hear your comments and thoughts on. One, with the iPhone really taking off, gaining in popularity and other smart phones basically copying the iPhone, do you think it’s still even necessary to have the .mobi and designing for .mobi and my other question that I’d love to hear your thoughts on is kind of on the fringe of web design, I was wondering with WordPress being so popular, how do you feel about someone maybe being a WordPress design and installation expert? Taking the themes, customising them tweaking some things, changing some code and then kind of really helping other people to implement WordPress into their websites? Let me know what you think about that? Thanks guys.

Let me address each in turn.

The .mobi domain name

There are two issues here which I would like to cover separately. First, let me look at this issue of whether we need to be designing for mobile devices at all. My answer is a categoric yes. No matter how great mobile browsers become, it is always going to be a different experience to surfing the web on a computer. Let me give you just three differences…

Size – Mobile devices have smaller screens than a PC. No matter how clever the mobile browser is a considerable amount of zooming and panning will be required to view a conventional website.

Controls – Not all mobile devices come with a QWERTY keyboard and none come with a traditional mouse. This can create problems on some sites, especially those with mouse over effects.

Context – Probably the biggest reason for creating a mobile version of a site is context. Mobile devices are not used sitting at a desk. They are normally used on the go. This affects the type of information being requested as well as the level of concentration being given to the task. When it comes to the mobile web context is king.

It is also worth mentioning that we are a long way from everybody having a smart phone. The majority of phones still provide a terrible web experience.

It is harder to give a definitive answer about the .mobi domain. Unless your website is primarily mobile focused I think it is probably unnecessary. Most sites seem to use a sub domain rather than a seperate extension. For example twitter uses:

http://m.twitter.com rather than http://twitter.mobi.

I have even found myself guessing this format. I certainly never think of typing .mobi. Also on a purely financial note, you have to pay for .mobi while a sub domain is free.

That said, I don’t have anything against .mobi. It is certainly a valid choice.

Becoming a WordPress specialist

Wayne’s second question was about becoming a WordPress specialist. It is good idea for a couple of reasons.

First, as he point out, WordPress is hugely popular and there is certainly a market out there. It is also a well established product that has been around for a while and isn’t about to disappear. Having a clearly defined market is always a good strategy.

Second, I am a great believer in specialising. With so many web designers out there you need to do something in order to stand out from the crowd. Specialising in WordPress is a good step in the right direction.

However, I would argue that you could specialise further. You may choose to specialise in setting up WordPress for a particular sector or by using it in a particular way.

Although this approach feels counter intuitive as you are narrowing the number of people who can hire you, it actually makes good business sense. By specialising you become the best in your limited field and so people are more likely to select you over your competitors.

124. HTML 5

Posted in Classic shows on July 2, 2008 by Paul Boag

In this weeks show we explore how to create better online surveys and Lachlan Hunt joins us to discuss HTML5

Download this show.

Launch our podcast player

Watch the behind the scenes video (Part 1)

Watch the behind the scenes video (Part 2)

News and events

Removing Microformats

The story that has generated the most email this week is the BBC announcement that they will be dropping the hCalendar Microformat. This decisions comes because of long standing accessibility concerns over the machine readable content within that particular Microformat. The problem is that code meant to be used programatically is potentially read out to screen reader users and displayed as meaningless tooltips to sighted users.

The decision of the BBC to adopt Microformats was a huge boost to the movement. Equally the rejection the hCalendar is a blow. However, it is important not to get this out of proportion. Remember, they are only rejecting a single Microformat not the whole approach.

The other thing to consider is that the BBC is a public service organisation with an incredibly high obligation to ensure maximum accessibility. In many ways they are in a unique position. Although it maybe appropriate for your organisation to pull hCalendars too, it should not be based on the decision of the BBC.

My advice is as follows. If you already have hCalendar information on your site I would probably leave it (dependant on your exact circumstances). The Microformat community is working on a solution and I would implement that rather than removing hCalendar entirely. If however, you are not yet using hCalendar then I suggest you hold off until an updated specification is released.

Becoming employable

In the past we have spoken about becoming a professional web designer. I know that many people who listen to this show or read the blog are students. You are concerned that the skills you are being taught are out of date and will not improve your employment prospects. How then do you become a more employable web designer? What skills do you actually require?

Andy Rutledge tackles this subject in his post "the employable web designer". Without a doubt it is the best post I have read on the subject of web design career development. I highly recommend you read it.

The thing that impresses me is that it looks beyond the obvious design and technical skills required to be a web designer. It also tackles the business and communication skills too. He really drives home quite how wide an understand a good web designer has to have.

My only criticism is that it could feel demoralising. You may read the list and think it is an unachievable aim. However, I don’t think that is the case. What Andy outlines is the optimal requirement of a web designer, rather than what is needed to get your first step on the ladder. I certainly did not have all of the attributes listed when I started.

All we need now is a second post telling us how to gain the skills he lists.

Better CSS font stacks

David (a boagworld listener) sent in the next story. It covers a subject that I am currently still grappling with. It is a post about CSS font stacks.

If you code in CSS you already know about font stacks. It is where you specify the fonts you wish to use. You can say for instance; use Helvetica and if that isn’t available use Arial. If that fails use a generic san-serif font.

For many of us that is as far as our thinking goes. The majority of us use very basic font stacks that are uninspiring to the point of being insipid.

I love this post because it lays out a very clear methodology for improving your font stacks. It also goes on to provide an impressive selection of font stacks organised into heading and body fonts, allowing you to instantly improve your site

If your site is looking tired and boring, but you don’t have the time to redesign, consider adding a new font stack. Such a simple change could make a real difference.

Do flexible layouts still matter?

Our last story of the day is a post from Smashing Magazine entitled Flexible Layouts: Challenge For The Future. To be honest I was ensure whether to include this post or not. On one hand it covers an issue many people have been asking me about. On the other, its arguments seem stretched and the whole thing ends with an advert for a CSS framework.

The article tackles zooming and fluid design. The new generation of web browsers – Firefox 3, Opera 9.5 and Internet Explorer 7 – provide full screen zooming. This gives users has the ability to enlarge the whole interface, not just text. Some are arguing that this is the end of fluid layout because zooming tackles many of the accessibility concerns associated with fixed width sites. However, this article strongly disagrees.

The author argues that flexible designs are better for mobile devices, that pixels are becoming less important and that the user shouldn’t be required to customise a site to their needs (it should be done automatically). Although his arguments are weak at times and he uses some fairly dodgy comparisons I do generally agree with him. I see no reason to think fluid design will go away anytime soon.

That said, I am in no doubt that page zoom does reduce the number of occasions fluid sites are necessary. Ultimately there is no right or wrong answer. It is entirely based on the situation. For example Boagworld, Headscape and The Website Owners Manual all use fixed designs. However, many of my client websites do not. That decision is based on numerous factors such as device, user base and business priorities.

Feature: Creating a Better Survey

The web allows us to interact with our customers more than any other medium. One of the tools in our arsenal is the online survey. However, these are often badly implemented. In this weeks feature we find out how we make your surveys more effective?

Interview: Lachlan Hunt on HTML 5

Paul: Joining me today is Lachlan Hunt; It’s good to have you on the show

Lachlan: Thank You Very much

Paul: It’s great to have you here I really appreciate you taking the time to join us, now the reason that we asked Lachlan on the show is because he posted a brilliant article on the A List Apart site about the subject of HTML 5 and I have been keen to look at this subject for a while partly because of my own ignorance to be honest, um, so lets kinda kick off by if you could perhaps tell us a little bit about where HTML 5 is at the moment I know that kinda getting a language to a release like this finalized is a massive process so can you tell us where we are at in that process.

Lachlan: OK, it’s, um, a really an ongoing process with browsers implementing different parts of it progressively so it’s not, you know, going to be all implemented at once and ready to go in one, er the next few browser implementations. We have some features implemented already and shipping in browsers other features which are being worked on at the moment and other are planned for, but still a few years of yet. But it is gradually getting there. We are trying to focus on what authors really need, instead of trying to do it all at once

Paul:Ahh, okay so that a slightly different approach that we have seen in the past, the idea of an incremental roll out. So how does that work from the W3C’s point of view are they doing modular releases is that how it works

Lachlan: Um, at the moment no, but the way the spec is structured each part of the spec, what I am trying to indicate is the stability of each section of the spec as we go along. SO thing like the Canvas API which has been in browsers for a few years now, it should be getting to IE very soon. That section is pretty stable, Other things for example "data grid" or a lot of the web forms are not widely implemented.

Paul: OK so that quite an interesting approach to the problem I guess from what you were saying earlier to me there is a community base element people can get involved and contribute. How is that all working then?

Lachlan: Well we’ve got a REALLY REALLY open mailing list on whatwg.org anyone can subscribe at the moment there wa about 800 subscribers on that list anyone is free to subscribe and post feedback about the spec if they want to, but that’s not for everyone obviously because it’s quite a high volume mailing list and not everyone can keep up with that. We have also got an open blog on http://blog.whatwg.org/ where absolute anyone who wants to can write an article submit it and have it published. Anything to do with what the WHATWG are about, HTML5 and anything related to it at all. It’s also a good way to let the community know what’s going on by publishing articles also to find out what people think because they keep posting comments on there as well. We have also got an open forum which is at http://forums.whatwg.org/ again anyone can subscribe to that, am sue you know how a forum works

Paul: So there are lots of different ways to be involved, I have to confess things like that can feel quite intimidating to get involved in. You’re kinda worried about putting your foot in it, and saying something really dumb, is there kind of Opportunities to lurk and are people fairly friendly over there? I guess you are going to say yes aren’t you

Lachlan: Yeah everyone is friendly over there,they are nice sort of area to go to aim at web developers and people who aren’t quite as technical with the spec areas and stuff. You can ask any question you want and just learn whatever you want as well. Their is also the w3c side of it as well. Which is strictly related but is more focused on the actual technical side and issues so yeah. The What WG and the W3C are both publishing exactly the same spec and they both work on it together and feedback can be sent to either place, it will all be taken into account

Paul: Oooh, that’s useful. So looking at kinda the state of affairs at the moment with HTML 5, reading through your article there was some things in there that really sounded quite exciting, there was this thing about structure and some kind of additional elements that could be used, which provide a little bit more structure, headers and footers and things like that can you tell us a little about that, and maybe explain a bit of what those do.

Lachlan: Well at the beginning of the work back in 2004 / 2005 we basically took a look at what a lot of site where doing and we noticed that they were all using a similar structure. All the blog’s were using headers and footer and generally things like column layouts to show articles and stuff like that. So we wanted some semantic elements to come and cover each of those features that people actually used, solving the real problems that they were actually focusing on. instead of having to do "Div" elements for everything, which is what people do we give them an actual element and that also has a side effect of increasing accessibility because an element with specific semantics can be hooked into the accessibility API’s and help someone with assistive technology navigate the document a bit easier.

Paul: Okay, because I mean reaction just glancing at it quickly and not thinking about it was what’s wrong with the div with an ID Equals footer, or an ID equal header or whatever but like you say, as you think about it more it become obvious that if those are considered distant elements, one person might call it a footer another might call it "the bottom" or whatever else if they have consistent semantic names then you know you can have screen readers and stuff jumping to the footer or avoiding / not reading the footer depending on what is set in their preferences, is that what you are thinking?

Lachlan: Yeah that sort of it, it’s also helping the authoring side too, as there are lots of Div elements in source code which makes it easier to read if you have got elements with different names

Paul: yeah very much so, I spend half my life trying to which closing Div relates to which elements, that very exciting. Obviously the other big area you talk about in your A List Apart article is the audio visual elements and there is a lot that’s happening in there. It’s always had the vague feeling that HTML has never had any kind of, erm, erm, the audio visual elements have always been and after thought, what happing in HTML 5 in regards to that?

Lachlan: Well we have added the video and audio elements to the spec to try and allow video to be added directly to HTML, at the moment we have sites like youtube revel and all the other video site out there using flash to embed video and using the flash to give customized controls and stuff to the user, it’s really awkward, depending on proprietor technology, so we want to open that up a bit give a very very easy to use Javascript API to hook into and promote custom controls and all sorts of cool stuff with videos and of course audio as well. We have got experimental implementations of that in opera and in webkit. I have heard mozilla is considering implementing it as as it is now I am not sure of the status of their implementation. However the one big problem with video and audio at the moment is with Codecs, there are a whole load of software patent issues going around and we are not quite sure what codec we are going to standardize upon or if we are going o be able to get common codec support among the browsers, That’s an open issue but I am no lawyer to I cannot really go into that, so the ultimate aim is that you will be able to embed your movie file, your avid file or whatever directly into the HTML without the need to kinda pump it through something like flash

Paul: cool

Lachlan: that make it a whole lot easier to the authors hopefully

Paul: Yeah, you kind of, to some extent got to ask the question why do we need that when we have got a solution like flash

Lachlan: Well because Flash is a proprietary technology it’s managed only buy Adobe , they control it, they control the changes and what does and what does not go into future versions of it, however the thing with HTML is that it is an open standard platform which can be implemented by anyone and maintain interoperability between those venders.

Paul: It’s intrusting isn’t it that adobe has just announced they are opening up the flash format, do you wonder if that’s a reaction to some of the stuff you have been doing to kind of force their hand if they want to stay ahead o the game and dominant they need to be open

Lachlan: Yeah I don’t know how that going to work though, it depends, if they open the format up and actually make it an open development process where anyone can contribute to the future version and features which go into it or whether they just write the specs and tell other people to implement based on what they write, so I don’t know much about that. It will be interesting to see how it goes.

Paul: Very interesting, Now the next thing you cover in the A List Apart article is something which you titled "Document Representation" now I have to confess this confused me, so do you want to explain a little about what you meant by document representation. What you were getting at there.

Lachlan: Yeah, well in the past we have had HTM, and XHTML with two separate specs, HTML 4.1 which a lot of people use and XHTML 1.0 which a whole lot of other people use one of them is based on XML and is really really strict syntax that requires well formedness and is supposed to when you serve it correctly, if you make a well formedness error the browser is suppose to stop processing and throw and error message saying "Sorry I cannot handle this" where as HTML is more sorta loose and convenient in its error handling, it’s the traditional inspired by SGML, although really only syntactically similar these day but the error handling is a bit more lenient and you can get away with making a lot more errors. So instead of having two distinct language which you can use we have combined them into a single language which share the same elements and attributes and everything and as much a possible and when the browser reads those file it produces and internal representation called the DOM, a lot of javascript user will be familiar with the DOM as they work with that with their scripts to modify the document through the DOM. That’s an internal representation which is mapped, the DOM which is sort of mapped to by the syntax’s, the HTML and the XHTML syntax’s so it give the authors a choice of which syntax they want to use

Paul: So why do we need that choice what is the key difference, I mean you talk about HTML being more lenient are there other reason for choosing one over the other.

Lachlan: erm, well I don’t really know. However a lot of authors do prefer the strict syntax of XHTML like to make sure they quote the attributes and encode all their ampersands properly. They like to know they have done everything perfectly as with HTML a lot of people do make mistakes inadvertently and don’t want end users to see big error messages, so it’s a bit more user friendly if some little small error slips though their CMS and causes problems.

Paul: So it’s basically come down to personal preference then

Lachlan: yeah

Paul: Okay, that’s fair enough, so both, we are going to see equal support for both of them in browser manufacturers are we

Lachlan: Well that’s the hope we have said that we have got good support in most browsers, it’s just IE which is lagging behind

Paul: (Sarcasm) Oh that’s a suprise (Laughs) Okay are there ant other things in HTML 5 that might be of interest to those listening to the show which we should be paying attention to?

Lachlan: erm, well, as I said before we got canvas implemented in most browsers

Paul: So tell us, what’s canvas

Lachlan: It’s a 2D drawing API that you can use javascript to draw dynamic image with. People have used it to implement things like graphs that are built using tables of data which are on the page. People have also gone and done 3D games with it which is really cool

Paul: Wow, that incredible. I mean that sounds very similar to SVG is it a different thing.

Lachlan: It is different SVG is entirely done with XML, you modify that with script via the DOM by changing elements and attributes and stuff or with CSS. Canvas is an immediate mode graphics API where it is more like a bitmap sort of thing where as SVG is vector graphics, and canvas is bit map. They can both do images, the same sort of images, if you like but we have both vector images and bitmap images, so they both can serve different purposes.

Paul: Right, I see. Okay that’s good, so okay the big question, kind of the final question everyone is going to have is when can they start doing some of the cool stuff. Now you said right at the beginning this is going to be modular support based thing so we are going to be able to see some of these elements before others. You know some parts before other, so what can we do now, what are we going to be able to do soon give us an idea of where things are at.

Lachlan: erm, okay let’s see I think what’s being implemented at the moment. Cross document messaging is being implemented at the moment, that’s an API that lets you send message between documents with javascript without worrying about cross domain security issues,

Paul: Oooo…. that’s good.

Lachlan: Yeah it’s a really, really handy API that been implemented in opera for a while and I heard mozilla is implementing it soonish and should be in firefox 3 thought I am not entirely sure about that. That should be very very soon, erm, what else have we got, we got…. hmmm, this is tough

Paul: Sorry put you on the spot there (laughs) is that last one supported in webkit?

Lachlan: erm, I am not sure I would have to double cheek that

Paul: Okay that’s fair enough

Lachlan: yeah,

Paul: Okay so any other elements? Things like the structural changes are any of those being supported yet?

Lachlan: Not quite yet, erm as far as I know support for those requires changed to the phaser, and to implment the new pharsing algorithm in HTML 5, as far as I know browsers are not yet focusing on doing that because..

Paul: Okay that’s a shame, because that one I liked the sound of, what about the audio and the visual stuff?

Lachlan: We have experimental implementations in opera which supports OGG video, though it’s not really in a public build version yet, there is a experimental version which was released last year sometime. And webkit also has support in their nightly builds, which supports mpeg 4 unfortunate they don’t support the same codec but you can experiment with them.

Paul: (laughs) That would be far to easy

Lachlan: yes I know

Paul: So it’s all progressing slowly but, erm you know obviously the one name which has been very absent in the list you keep mentioning is Internet Explorer, so I expect we can probably see some slower movement there. We are talking you know in the years before this all becomes mainstream and we can actually start using it. Is that a fair comment to make?

Lachlan: Yes it will be several years before the entire spec is finished, we are hoping that it can get finished sooner rather than later but realistically it’s going to be quite a while yet, But it is important to know people will be able to use theses features before the spec is finished; so it depends on when browsers start supporting features authors can go ahead and use it.

Paul: That’s great and real exciting that you can start to do that sort of stuff. you know that we don’t need to wait for it all to be set in stone before moving forward. And it’s always exciting as well to see the future, know what coming up and be aware of everything. so is there somewhere people can go a websites address and keep an eye on what is currently supported by browsers.

Lachlan: Not at the moment but that’s something worth looking into, I think there is a wiki on the Working Group site, it does have some implementations listed but I am not sure how up to date. But it’s something I think we should look into

Paul: Yeah it would be great to have some kind of single page which says what features are supported by each browser that you could check back every few months see what’s going, there you go there is my contribution to the working group (laughs). Alright it was really good to speak to you and thank you so much for your time, What we will do is to get you back in further down the line and have a check to see where we have currently got to in the development of HTML 5, Thank you so much for your time.

Thanks to Jamie Knight for transcribing this interview.

Listeners feedback:

Staying healthy on the web

Evan writes: My question to you is not entirely related to design, development or management but rather about health in the web industry. This is very important but we often seem to forget about it. We spend hours upon hours at our desks but are unaware of the damage this could be having on our health. Eyeballs almost touching the screen, typing without a break, sitting incorrectly – just a few examples. So, what do you do to maintain good health while working?

I am possibly the worst person in the world to answer this question. I consistently abuse my body while at work. In fact a physiotherapist friend said I had the worse posture in front of a computer she had ever encountered.

However, there is possibly something to learn from my terrible example. Let’s look at what I do and compare that to best practice.

I sit with my leg tucked up under me – Posture while working is important. Both feet should be flat on the floor, rest your wrists on the desktop in front of your keyboard and make sure your monitor is at eye level (in other words avoid laptop screens).
I stoically refuse to use anything other than my preferred mouse and keyboard – Using the same keyboard and mouse in the same position day after day can cause damage. Try using a variety of different hardware and positions. Push your mouse and keyboard nearer or further from you to change the position of your arms.
I believe that an individual pixel should fill my field of view - Leaning too close to your monitor is a particular weakness of designers who want to position that pixel ‘just so’. This not only damages your eyes but also your back. When you learn forward your neck and back support the weight of your head. When sat upright, the head is supported by a straight spine and therefore your chair bears the weight.

On the upside I do take regular breaks. I would like to claim this is because of my health. However, I think it has more to do with my short attention span. I get easily distracted and wander off to do something more interesting.

From Photoshop to HTML

I see a lot of PSD 2 HTML services on the internet but never tried any out. It seems to be an great option for an designer for making an quick website, to edit later myself.

What is the opinion of you guys? Love to hear you discuss this topic in one the next podcasts.

An long time listener from Holland.

I have to confess to being a snob over these services. Until recently I have always doubted the quality of the code but after seeing some recent examples I have begun to change my mind.

We are even considering giving them a try at Headscape, just to see what happens. Certainly from an economic point of view they make sense especially if you have more work than you can handle. That said, I do have three concerns.

First, results may vary. Without a personal recommendation it could be hard to find a provider who can produce the quality you require. Anybody can convert a photoshop document into HTML. However, it is much harder to do so using techniques like microformats, semantic markup and accessibility. Also, just because the quality was good once, does not mean it will be so again. As the good providers get busy it can lead to a decline in quality.

Second, people code in different ways. Unless careful attention is given to commenting, it is hard to pick up somebody elses markup. This is fine for relatively static sites where only small changes are required. However for projects where change happens regularly as the site evolves, it is more important that the markup is tailored to your style of coding.

My final concern is that this could lead to designers not learning HTML. As I have said before on the show, I believe all designers should be able to code themselves. You need to understand how the web works and markup is apart of that. Also, if you cannot code how can you judge the quality of the markup you receive?

123. Plight

Posted in Classic shows on June 25, 2008 by Paul Boag

In this weeks show we review Textmate and the Top 5 Tips for Web Designers and we discuss the plight of in-house designers.

Podcast: Download (30.4MB)

Download this show.

Launch our podcast player

A quick request. We are really in need of some more transcribers to help with the interviews we do. The team we have are doing an amazing job but it would be great to spread the load.

If you feel you could help once in a while please drop an email to Ryan our producer and he will add you to the list.

News and events

SPAM meltdown

It is always with fear and trepidation that I mention HTML email. It inevitably leads to a torrent of comments ‘educating’ me about the evils of HTML in email, and that we should only use plain text.

Although personally I wish HTML email was never invented and try to limit its use, I do accept it is here to stay. Despite its many drawbacks it is statistically more effective than plain text from a marketing perspective.

You will be hard pushed to pursued a client to forgo HTML. Inevitably we will have to produce HTML templates occassionally. Of course, being conscientious, when we do produce HTML emails we want to ensure they look great and are well coded. This leads me to a couple of stories worth mentioning.

The first is that Patrick McNeil (of Design Meltdown fame) has launched a new site called Spam Meltdown. The site showcases examples of great email design in much the same way as Design Meltdown does with websites. Patrick has done an amazing job on this site and he has my sympathy because he is subscribed to over 1000 mailing lists! The designs he showcases are organised by style, colour, industry and topic. As with design meltdown this categorisation approach works really well. You can quickly find inspiration by looking at categories that are relevant to your project.

The second news item worth mentioning is that Campaign Monitor have updated their chart for CSS support in email clients. Campaign Monitor is a service which allows you to send HTML newsletters, but they do a lot more than just take your money. They are actively involved in improving standards support among email clients through the email standards project. Next time you are trying to produce an HTML email template check out their CSS support grid as it will clearly show you whether a particular CSS property is supported.

Form Analytics

While I am on the subject of cool services like Campaign Monitor, I also want to mention Clicktale. Clicktale is a service that allows you to track users as they move about your site and even anonymously record their actions. The last time I mentioned them this disturbed many people who saw it as an invasion of privacy. However, I see it as a valuable tool for learning about user interaction and improve site usability.

If you share my view, then you maybe interested in a new service they are starting to offer. You can now not only track users as they click around your website, you can also watch how they interact with forms.

In addition to video recording, the new form analytics service also provides three invaluable reports…

The time report – This shows how long users spent completing each field.
The blank report – This provides information on fields that have been left blank on submission.
The refill report – Which highlight fields that have been completed incorrectly.

If you run a site that requires users to complete long or complex forms then you will see the benefit of this service. On a high trafficked ecommerce site this would be invaluable, substantially reducing the number of users dropping out at checkout.

Art direction hits the blog

This week has seen the launch of Jason Santa Maria’s new personal website. For those of you who do not know, Jason is the creative director at Happy Cog (Zeldman’s company).

Normally, I would not mention the launch of a new personal website. However, Jason has done something very interesting. His new design is well executed but plain. It certainly is not as inspiring as his other work. The reason for this simple approach is that it is a framework upon which he will build.

The idea is that each of his blog posts will have a custom design to accompany it. The design will therefore reflect the content. In effect he is bring art direction to his blog. This is a bold experiment and something that Zeldman has written about before.

Although I am fully behind the idea of bringing content and design closer together, I do have some reservations. First, there is a possibility that the constantly changing design could make navigation around the site confusing. Fortunately from what I have seen so far that will not be the case. Jason has been careful to ensure key navigational elements remain in a consistent location and have similar styling wherever you are in the site. However, if other designers were to adopt this approach would they be so careful?

My second concern is a purely practical one. If each article not only needs writing but also designing, will that reduce the amount Jason posts? In other words is a blog really the right place for this type of art direction?

However, despite these reservations I am really pleased Jason is trying this approach. A personal website should be the place to experiment and try new things. Too many blogs (including my own) are cookie cutter solutions with some pretty graphics slapped on top. Its superb to see somebody doing something different.

Prototyping

My final news story of the week returns to a subject we have touched on recently. How do you wireframe a modern web application with its high level of interaction? In show 120 I mentioned that one approach might be to utilise flash. Today I want to point you at an article on the List Apart website, which suggests that building prototypes maybe better than struggling with wireframes.

When I first saw this article I was hesitant. After all I can barely pursued my clients to pay for wireframes let alone a full blown prototype. However, the more I considered what was being suggest, the better the idea seemed.

The majority of time spent getting an application working is spent on bug fixing, browser support and non-core functionality. The rough ‘outline’ of an application can come together very quickly. What is more, unlike wireframing, a prototype can be used as the basis for the final build. It does not get thrown away like a wireframe.

The article also points out that prototypes are better for demonstrating difficult concepts to clients. They encourage earlier collaboration between designer and developer, and provide something substantially better to user test against.

With almost every new website having some form of web application, we all need to consider how to better conceptualise their operation.

Feature: The plight of the in-house designer

The more organisations I work with the more sympathy I have for in-house designers and developers. It is a role that can be thankless and isolating. How then can their lives be made that much easier? We discuss this in this weeks feature.

Reviews: Textmate and Top 5 Tips for Web Designers

We have two reviews this week by our lucky competition winners Teifion Jordan and John McFarlane. Teifion and John will be going to this year’s dConstruct in Brighton.

dConstruct is the affordable one day conference for people designing and building the latest generation of social web applications. Tickets cost £125 inc VAT and went on sale yesterday so be sure to check it out.

Textmate by Teifion Jordan

Hi, I am Teifion Jordan, I am reviewing a program created by someone far smarter than me. I am going to be looking at Textmate. Textmate is a Mac only application though there is a similar editor called eText Editor for Windows.

First impressions of Textmate are that it’s pretty sparse, it looks like any other editor. I throw it a PHP file and it colours the text in, just like any other editor would. The colour scheme can be changed, both text and background colours can be altered, which is quite a neat touch. I can even make parts bold, italic and underlined which is a neat touch. It requires knowledge of Regular expressions but I can actually add in more rules for what to colour in! I used this to make variables used as array indexes appear differently, something I have wanted to do for some time. Not since I was a toddler, but definitely some time.

But enough moaning about how the program itself is both smarter and better looking than me, I wanted to try some code. I found that if I typed "foreach" in a PHP block and hit tab, I was presented with an entire foreach loop. Closer inspection revealed that there were dozens of snippets and commands for PHP and dozens more for each of the many languages and some things that were not languages. With 5 minutes of effort I had setup Textmate to post my blog posts for me, I am now one step closer to not having to put any effort at all into blogging.

It is possible to create your own snippets and not at all hard either. I now have one to tell me that I am beautiful and another to create a PostgreSQL query. I can also write new commands, I can write them in command line script, Python, Ruby and PHP to name a few. All of the commands are completely open sources, so you can see what’s already been done, and sort of plagiarise that sort of work for your own means. Except plagiarism is bad so don’t ever do it.

I can edit columns, I can write new snippets, commands and even entire languages, I can Regex, I can manage projects with a hierarchal file structure. It’s like before I was walking but now I’m on a push bike. I can’t make use of the ability to run down pedestrians until I learn how to do balance and pedal. Okay, the running down pedestrians was a bad example but anybody that is still listening and not calling the police must have understood it so I’ll continue. There’s nothing I can’t do in Textmate, I just need to look at the extensive online manual to learn it. And there I think is it’s biggest failing.

Textmate is a really lovely program to use but it’s so complicated. Coda, as a contrast, is a more intuitive application but it is to Textmate as a spade is to a chainsaw, that is, meant for a different problem and with fewer moving parts but also with the ability to digs holes? I’m sorry, my mind wandered. What I meant to say is that Textmate is great for dealing with code but not so much the design which is what apps such as Coda excel at. I’ve now been using Textmate for 10 months and I still think there is potential to unlock, though, that might be because I’m a thickie.

I suppose I should wrap this up by saying that I would heartily recommend anybody thinking about writing lots of code to give TextMate a good look. It takes a lot of time to get a lot out of it, but there really is a lot to get out of it.

Thank you very much for listening, I hope this was at least semi-informative

Top 5 Tips for Web Designers by John McFarlane

Hi, I’m John McFarlane and this is the first ever review brought to you live from my living room. Today I’m reviewing a post that has been submitted on the boagworld.com forum. The title is "Top 5 Tips for Web Designers". I’ve been reading through the replies and I’ve put together my top 5 top tips.

In at number 5 submitted by richquick, allow time and money for personal development, read blogs, buy books, attend conferences, experiment and learn new techniques and technologies.

In at number 4 posted by Jayphen, surround yourself with designers, whether they’re colleagues, real world contacts, online contacts, forums, podcasts. The more you talk about design the more you learn and I’d like to add to that e-mail designers for advice and let them know your experiences.

In at number 3 posted by some guy called Paul Boag, develop with the latest best practices, ensure you separate content, design and behaviour. Make sure everything you build uses progressive enhancements.

In at number 2 another one by Paul Boag, it’s an obvious one but one that can’t be put across more clearly, know HTML, CSS and javaScript inside out, you need to know the core technologies that underpin the web back to front. I’d like to add to this point, the basics of HTML and CSS are easily learnt but don’t be fooled into thinking that you know enough, you really need to know these subjects to an advanced level. This will benefit you when your implemented the latest best practices.

And that brings me on to my number 1 tip and that is love your job, I think if you love this industry and have a passion for web design, I think those qualities will guide you to achieve your goals. So enjoy your development and don’t rush yourself too much. Take the time to develop the right way, build contacts and friends and embrace the industry as a whole.

That about raps up this weeks review. I hope you’ve enjoyed the very first show live from my living room. Thank you and goodbye.

Listeners feedback:

Newspaper columns on the web

Adrian writes: Hey guys, long time listener from the states. I’ve been working on a new personal site lately and I’ve become fixated on the idea of using newspaper style columns. Since you two seem to know a thing or two usability, I’d figure I’d ask for your thoughts.

It seems like most people view them as a print concept that doesn’t translate well online but seeing as most screens these days are widescreen and vertical space is taken up by menu bars, docks and browser extensions, going horizontal strikes me as a logical solution.

I appreciate the logic. It is true that more computers than ever have widescreens and that vertical space is at a greater premium than horizontal. However, I would think very carefully before employing newspaper style columns. As I see it there are two concerns:

The usability concern

As you point out, people reference usability concerns as the primary reason against newspaper columns. In a newspaper, copy runs across several columns with the eye darting from the bottom of one column to the top of the next. This is acceptable because the user can view the entire newspaper in a single glance. There is no such thing as a scroll bar.

On the web it is different. You are unable to predict the height available in a browser window and so users will almost certainly have to scroll. This means the user will scroll down one column as they read and then have to scroll back to the top to start the next column. This is far from a pleasurable reading experience.

It is also important to consider width as well as height. As you say newspaper style columns works well on high resolution, widescreen monitors. On anything less the story becomes unreadable with narrow columns and short line lengths. The alternative is to allow both horizontal and vertical scrolling. But as I am sure you, know this is the ultimate usability error and should be avoided at all costs.

The technical concern

There are also technical considerations to take into account. How will a story be split over multiple columns? Currently this cannot be done in CSS, although this may appear in CSS3.

One option would be to manually layout each block of text. However, this isn’t going to be practical with anything other than the most static of sites.

The only option is to use some server side code. However, even this is not without its problems. Consideration needs to be given to inline elements such as images or quotations. What happens if they appear at the end of one column? Does a quote get split? Will the design accommodate larger images? What happens when text is scaled?

Although all of these technical problems can be overcome, you are forced to ask whether it worth the effort. This is especially true considering the serious usability concerns.

Estimating dev/creative work

Kirk Henry asks: I’m not sure if this should be listed as a question or not but her goes. I’m a Creative Director for a dev shop with some very large fortune 500 companies and a problem I always seem to come across is difficulty in the estimating process. We use excel documents, have some standard hours for comps but have to do custom estimation for multi media projects etc… my estimates are always pretty decent but I want to know what you guys use or what software you would recommend. I have been listening on itunes from the start and love the show.

Ok, this is probably the most important subject that we (and I mean the web community) don’t talk about. Why? I think, because it’s difficult to pin down a method of reliably estimating a project and, more so, we’re all guilty if underestimating time and again… these are my thoughts:

The first thing to ask yourself is ‘how serious is this project?’ I have a sixth sense for requests for quotes that fit into the following brackets:

‘We have this idea but have no idea how much it will cost and we want you to do all the research work involved in scoping it. Of course we won’t pay for the research and there’s no way we’ll pay sensible money for the work once we know what it is’
‘We have a supplier that we want to work with but my boss says I need a couple of other quotes’
‘Us guys in sales and marketing have been doing some blue sky thinking and want a quote to redevelop Google….’

You get the idea – timewasters. You need to deal with these requests quickly – this is how I do it. Have a chat with whichever department(s) would do this work if it ever materialised – get them to give you wide ballpark figures. Add in PM and contingency and send them an email. 99 out of a 100 won’t even bother getting back to you. Some will, but they’re usually trying to get free scoping (‘can you give me a bit more detail on how you reached those figures’).

Anyway, I’ve ranted long enough timewasters, back to Kirk’s question.

First question – do you know the budget? If yes, then you are looking to fit a scope into a set amount of effort. Can you do it? Will the ‘client’ be happy with the scope that fits their budget? Do they understand what that scope is (especially if you have reduced it to fit their budget)? DO NOT get creative with your effort allocations just to fit within the budget. Either ask for more (up front) or walk away.

If you don’t know the budget then you are looking to scope a project from scratch. If it’s a really big project then ideally you should be being paid to scope it as we’re looking at business analysis and consultancy here.

Break down the project into rough task areas. It’s likely that you’ll have done other projects that include similar tasks so you’ll know efforts on these (though ask yourself if you got it right last time). For the ‘new’ tasks, break it down further and you will probably find other smaller tasks that you have done before. For the really new stuff then you need to talk to an expert (designer/developer/IA) and get them to think the task through. They will provide you with an informed guess. That’s right – guess. Because people are guessing it is really important to overestimate fixed price projects. This is the cost to the client of having a fixed price.

Don’t forget to charge for meetings (if 3 people are attending then charge for 3 people!). Project management is notoriously undercharged. We have a rule of thumb of 15 – 20% (and that’s probably light).

The golden rule of estimating is don’t be tempted to lower your probably already too low price just to win the work. Be prepared to walk away.

As far as tools to help with estimating go, MS Project is great at separating tasks, linking resources to tasks and giving you a good idea of how long things will take. But, I tend to find that it is over the top at the quote stage and tend to stick with Excel.

122. Screencasting

Posted in Classic shows on June 18, 2008 by Paul Boag

In this weeks show we have Ian Lloyd discussing Sitepoints HTML reference and we take a look at creating screencasts.

Podcast: Download (28.7MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Typography everywhere

This week has seen a plethora of posts about typography. There is an article about changes being made to typography in Firefox 3, a post dedicated to working with paragraphs and some future developments in CSS 3 fonts. Combined with the growing support for embeddable fonts, it would appear that web typography has a rosy future.

Although all of these posts are interesting, I feel we are not making use of the typographic tools we have already. I have learnt a huge amount by reading what people like Richard Rutter and Jon Hicks have to say on the subject. For example how many of you…

Ever change the default kerning
Really get specific in your cascade of fonts
Consider vertical alignment
Think about the relative sizing of our various typographic elements

The list could go on.

Many web designers choose to ignore web typography because it is so restricted. However, this will soon change. We need to learn to walk with the basic tools currently available before we run with what is to come.

Accessibility cheat sheet

Our next story follows on nicely from last week’s feature in which we addressed accessibility quick fixes.

Aaron Baker has written an accessibility checklist aimed at designers and developers who know little about web accessibility. The idea is that by simply referring to the list during development they will be able to avoid the major accessibility issues.

Aaron is the first to admit this isn’t an ideal solution. He also accepts the checklist fails to cover everything. However, in my opinion he has done a damn good job at making the accessibility guidelines… accessible!

What I like most is that he also provides a PDF version that prints out as a single page. Instead of having to wade through pages of W3C guidelines you can print out a single page and pin it to the wall. Ideal for those starting down the road of accessibility.

Does this mean we can ignore WCAG? Absolutely not. However, this is certainly an easier starting point for those who are intimidated by the subject of web accessibility.

Advice on wireframes

We are having an interesting discussion within Headscape at the moment. Where does the job of an information architect (IA) end and that of a designer begin? When it comes to wireframing in particular, the line is blurred. A wireframe is often produced by the IA but can strongly define the layout and design. This reduces the designer to skinning a site, which is a real waste of their skills.

I was therefore excited to read the first in what will be a series of posts on wireframing. The author identifies exactly the problem we have been struggling with and talks about page description documents. These documents differ from traditional wireframes because they do not endeavour to establish a layout. Instead this is left to the designer. A page description document focuses on identifying and prioritising content. It is then down to the designer to represent this on the site.

It is an interesting approach and one that I think has a lot of merit. However, I am equally excited to see the other posts in this series, where the author promises to show us example wireframes and provide more details on his approach.

Top five tips for new web designers

The final news story of today is an unusual choice as it comes from our own forum. Our forum is always full of great threads, but one in particular caught my eye this week because it covered the most common question I get asked; ‘what advice do you have for a new web designer?’.

It is not a long thread (yet!) and so is easy enough to follow. However, each poster has provided some excellent advice in the form of their top 5 tips.

The tips include…

Advice on business
Techniques for improving your skills
Areas to focus on
Books and sites to read
What to learn first
How to increase your profile

Without exception they are all gold dust and if you are new to design then definitely give them a read.

Equally if you have been a web designer for a few years take a moment to post your own contribution. I think you will probably learn something at the same time.

Feature: Creating Screencasts

Video is becoming an intrinsic part of the web and not just dumb ass videos on YouTube. Video can be used to show off products and provide online presentations. But how do you create a high quality screencast on a budget? We look at this issue in this weeks feature.

Interview: Ian Lloyd on Sitepoint HTML Reference

Paul: OK. So joining me today is Ian Lloyd. Hello Ian.

Ian: Hello Paul!

Paul: Have we had you on Boagworld before or is it just .Net?

Ian: Erm… Actually never in real life person. I did the video thing for you before, the screencast.

Paul: Yeah. That’s it. I knew there was something.

Ian: I’ve heard my dulcet tones before.

Paul: Yeah but not on a live, real, happening interview type basis.

Ian: Is this happening? What as in cool, hip and happening? Wow.

Paul: This is happening right now! So there we go. That’s exciting. So the reason I have Ian on the show today is that he had just undertaken and completed a mammoth project no less, in the form of a HTML reference guide that is now available via SitePoint. Now we’ve talked before on the show about the CSS reference guide but the HTML one is a new project that is beta at the moment. Why have you showed a beta tag on it? Come on, put your money where your mouth is. Commit to a real live version!

Ian:Well that’s not really my shout in fairness but I think the reason they do it is that with all the will of the world and all the technical editing that goes on and all the rest of it, invariably there’s going to be things that will crop up.

Paul: I was always under the impression that you were infallible Ian.

Ian:Well I would to keep that myth going but it’s obviously completely untrue. But no, I think it’s sensible. From what I can gather they did this with the CSS reference and they told me that they did get some good feedback as a result of doing this. So it gives them an opportunity to capture anything that has so far evaded various editing stages. There are little things that you can easily, easily miss. So it makes sense. Put it in front of a whole bunch of pedants and you will find that things will be revealed that you weren’t aware of.

Paul:Yes certainly. So tell us a little bit about how the project came about. How did you end up working on this from SitePoint and how you get involved?

Ian:Right… Well it’s actually quite a long story that I’ll try and shorten down. Basically I’ve got a bit of history with SitePoint. It goes back to probably 2001/2002, something like that where I was writing articles for them. I had written a few and they had been scored quite highly. At the end of 2003, I took a year out of work.

Paul: Ah I didn’t know… Yes I did know that.

Ian:While I was travelling around the world I made it my business to try and call in on people that I knew from the web. You know, you’ve part of the world so I’ll pop in and say hello. That’s what I did with the SitePoint guys. I was in Melbourne for a while so I thought I’d pop in and say hello. So we did lunch and I was having a chat with one of the guys there who was saying “Oh, have you ever thought of writing an accessibility book?” and I was like “Oh, I don’t know. I don’t know if I’ve got a book in me. It seems like a lot of work.” But not long after that I was asked if I’d like to do some tech editing and I thought “Yeah OK, I’ll do that” and I actually did it while I was still travelling around Australia in the van. So that was actually quite easy to do, wasn’t too bad at all. And then what happened is that when I got back to the UK I was asked “Do you want to write a book?” and this is the beginners book you have reviewed in the past on the show. So it’s kind of been an escalation from there really. So there was that book and I did a couple of bits and pieces for APress and then not so long ago I got the call back from SitePoint saying “Do you want to do this HTML reference?”. At the time I thought “I don’t know. I’m not sure. Does the world need another HTML reference?”. But I kind of thought that when I did the first book, and that’s done pretty well and I’ve had some really good feedback, so I though “Well, let’s think about this. Maybe it’s worth doing”. In my mind I convinced myself that this wouldn’t be a difficult thing to write…

Paul: *Laughs knowingly*

Ian:See you think you know HTML. You think you know it because you use it everyday and I though “Well how difficult can it be?” compared to say the Javascript reference they were writing. There’s a million and one ways you can approach something with Javascript where as with HTML there’s a finite number of elements or tags, whichever you prefer to use, that you can use in any given scenario so you think it’s pretty straight forward isn’t it. That’s what I thought anyway and I was also thinking in terms of browser compatibility the bigger problems come from the CSS you put over the top. That’s where you get all the quirks happening. So I thought to my mind, “Yeah this isn’t going to be too difficult a job”. But I think I underestimated it.

Paul:Is that not always the way when it comes to any kind of project like this that it always ends up being loads bigger than you thought it was going to be.

Ian:I think it actually surprised me how much more work there was involved. I don’t know if you did that little test a little while ago that was one of those things everyone was sending around, how many HTML elements can you do in 2 minutes or something. Everyone was having a go at it. You think you know quite a lot but then you realise there’s so many more you didn’t know and there was so many that I vaguely remember and but probably would never use. That was the funny thing, writing about these elements where I think “Well, that’s that one done. Never going to use and nobody’s every going to read it either but it’s got to be covered.

Paul:So with the CSS reference guide that they produced they have now turned it into a book. Are they intending to do the same with this? Is that the plan?

Ian:Absolutely. And that was the other strange thing I thought “This is kind of a strange business model. They are going to put it on-line for free but also gonna do a book. Will people actually buy a book?” But I’m sure they don’t do these things without doing the research first. I’m pretty sure they’ve got a good idea on what they’re doing with this. I never went into it thinking I’m going to make millions out of this because it’s never going to happen. Anyone who’s written a book, yourself included…

Paul:I’m still witting so I’m still in that naive state of thinking “Yeah, it’s going to sell hundreds of thousands of copies and millions of copies and I’m going to be rich”. So don’t shatter it.

Ian: Sorry Paul.

Paul: Just say how much money I’m going to make.

Ian: Oh yeah, you’re going to be rolling on a bed of money. You’re not going to know what to do with the stuff.

Paul: Excellent. Wonderful. Great. I’m looking forward to that. *laughs* So basically it’s gonna turn into a book before too long.

Ian: Ah yes.

Paul:You mention that there were some things in there that you thought “I’ve written this but I’m never going to use this and probably no one else is as well”. I noticed there were a couple of sections in there dedicated to depreciated HTML tags and stuff that people actually shouldn’t use. That’s a bit of an unusual decision isn’t it – to put in stuff people that people actually shouldn’t be using. Why take that route?

Ian:Well the thing is because it’s a reference you have to include everything. So everything that is in the W3C approved recommendation, everything in there is included. Even if it’s as much use as a chocolate teapot it has to go in there. And that includes the deprecated tags but there’s also things that are included such as blink or bgsound or marquee that were never actually defined in any standard but because they have almost universal support, not all of them have the same level of support, but basically there’s a lot of elements out there that were never defined in the standard but are well supported. So the decision is this has to go in there, we can’t deny it’s existence. It may not be something that anyone would want to use but as it’s a reference book we should include it. There were some that we didn’t include that I can’t remember off the top of my head what they would be. Things that were perhaps defined in Netscape 4 and just are not supported in anything and given that Netscape 4 is dead and gone a long time ago, there were some things that didn’t make it in. But the reason for having a second index that said “Here are some elements that you shouldn’t use or should avoid or these are deprecated ones” was really a case of saying that we’ve got this index of all these things and I don’t want anyone to think that because it’s in the index that it’s necessarily approved. So I wanted to kind of pull them out and say “It’s in the reference but actually we don’t really you to use those.”

Paul:Which are the worse culprits? Which are the ones you think that people are using a lot and they really, really shouldn’t be? Your chance now to lecture people and preach to them about their bad HTML.

Ian:Well strangely enough I don’t actually see a lot of them used now. I think probably the most common is people using the bold and italics, the <b> and the <i> tags, when really they should be using strong and em. Then again the b and i tags do have their place but they are usually misused. Thankfully the kind if things that I wouldn’t want people to use, you don’t tend to see much nowadays anyway like the blink, marquee or bgsound that was always a pet hate of mine. You’d visit a site and then suddenly you’d get some Indonesian Gamelan music blaring through that was set in a bgsound. I was kind of thinking it’s good that this is gone but if you go to any page on MySpace and they’re replaced it with something that has got sound in Flash. So yeah, that may have gone but they have replaced it with something equally annoying.

Paul:Now there’s a little question there. You say that bold and italic have got that place. How is it supposed to be used? Educate me as to the proper use of those two.

Ian:Well if you what you are actually marking up something that describes something typographical. So if you are putting the b tag around something because you are describing it as bold. So it’s that kind of context. I use in the examples on the reference it’s like I’m describing a sign of something like that. So there are reasons when you use it but generally speaking when people are using it is when you want emphasis or strong emphasis. In most cases what I would end up using would be strong and em because that is what I’m normally trying to do, emphasis.

Paul:What other kind of bad practice have you been seeing? What are the things, not just with specific tags but general bad practice, that are your pet peeves when it comes to HTML? What things are people doing a lot that just piss you off?

Ian:Like I said earlier, because of the kind of sites that I tend to look at I don’t actually stumble across too many coding sins because that’s kind of the circles I’m in I suppose. The funniest thing is when you see your own mark-up from years ago and I’ve just had to do this for something at work where I’ve taken on a reworking of something written 10 years ago and I’m like “Oh my God. This is awful”. It had been duplicated 5 times instead of one file with the logic inside that one file. So it was like “Hang on. I have to do this five times over?”. But it was nice to go back and see something that was old and table layout and all the rest of it and give it a good clean up in the process. So yeah, it’s funny when you look at your own mark-up and think “I’ve moved on”.

Paul:Even when you just look at what you learned from when you started doing standards to when you’re doing it now. I look back on the early standards work I did and it’s all div-tastic. There’s just divs everywhere.

Ian: Oh yeah. But there’s no meaning to the document as such.

Paul: Yeah. No meaning whatsoever. It used CSS so it must be alright *laughs* Which obviously doesn’t quite work does it in reality but there you go.

Ian:I guess the kind of thing that I really see a lot is just general sloppiness. People not closing tags when they’ve said they are using XHTML or unsymmetrical opening and closing. Those kind of things. Probably the first thing is missing alt attributes for images which is such an easy thing to put right but I see it so often. I guess probably the worse offences come from the kind of people who probably have never looked at a reference and may never look at a reference so I don’t know that this would solve the problems. And by that what I mean is people who would never actually get their hands dirty in the code. They’ll be using things like Frontpage, Word. You know – save as HTML in Word. You just want to beat them over the head with a large reference book. I don’t know if those kind of people are beyond hope. Maybe we we’ll be there at one point who knows. Maybe they are not beyond saving.

Paul: Nobody is beyond hope.

Ian:Funnily enough, I was saying about the Frontpage thing. It’s quite shocking I was looking at the program for a local college evening course and out of curiosity I flicked through to the computing section to see if they were doing any web design courses and
yay, there were. How To Build A Website and it was a seven week course, how to build a website using Frontpage. And it was like head slap, what are they doing?

Paul: Ah. That’s amazing that people are still doing that.

Ian: Shocking. So yeah. It’s not going to go away in the short term still.

Paul:When you were going through this reference, putting it together, was there a tag that you came across that you thought “Why don’t I use this more often? That’s an underused tag.” For example, I’ve just suddenly started using definition lists more.

Ian: Paul, you’ve taken the words right out of my mouth. That’s exactly what I was going to say.

Paul: There you go then.

Ian:That’s exactly one of those things that I don’t tend to use an awful lot myself but there are certainly uses for it. When we did this quiz thing that we were talking about earlier, I did with some people at first. So few of them had actually heard of definition lists. It was like “What is this markup of which you speak? What is this dl? What is this dd?” They had never heard of it and it surprises me but, I don’t know, maybe it shouldn’t be a surprise. You see list items used absolutely everywhere but it seems to be a bit of mystery to people. So that would be one that people could use more often and I’d certainly like to see people use them more often.

Paul:Umm. I’ve found it really useful. It’s surprisingly how many of the things, for example a news story where you have a title and then the description underneath the news story. There’s loads of examples like that where there are these paired matchings that suit a definition list so well. It’s a cool tag, if a HTML tag is capable of being cool which is probably doubtful.

Ian:There are some others as well which I would certainly like to see people use more often and they’re not ones that I don’t use, I use them all the time. Things like the accessibility specific type ones like for forms: label, fieldset and legend. I’d like to see them used more often. To some people this is something that they still don’t get. Of course in general, using the proper semantic markup. As you’ve already mentioned sites that are div-tastic. Stick a couple of headings in there and some unordered lists and already you’re starting to give your document more structure.

Paul:So talking about semantics and all that stuff, I noticed that you have a section dedicated to Microformats. Microformats aren’t really part of the W3C specification so why did you decide to include them?

Ian:Because it’s really cool. Yeah, it’s really cool stuff Paul. No, the reason really is because in the process of drawing up the table of contents, looking at all the elements we needed to cover, it became clear that there are certain things that HTML can’t do. Obviously this is not a revelation otherwise Microformats wouldn’t have come about anyway. But it felt right to put it in because essentially although Microformats are still developing they do go through a rigid process of being documented, discuss, ratified and all the kind of thing. So while it isn’t W3C recommendation it feels like it’s controlled. Also it doesn’t really do any harm. You can add this in over the top of HTML. You’re still using plain old HTML but adding that extra richness in without necessarily doing any harm. So it felt like something safe to put in. I guess the only problem with putting something like this in, at least for the printed version of the book, is that as they are developing it can get out of date. At least with the on-line version as things get added and they are adopted, that can easily be added in. It felt like a useful thing to do.

Paul:And it’s good to give Microformats higher profile because I think there are still a lot of people that are unaware of them. So it’s good.

Ian:I was gonna say it is by no means a complete Microformats reference. It really is still a fairly entry level introduction. I mean there are books out there specifically for Microformats. If someone really wants to learn more they’d do better to pick up a book or go to Microformats.org to learn more. Hopefully it would give some exposure to it that perhaps wouldn’t otherwise. And the other good thing about it is because the reference on SitePoint is very, very searchable hopefully by the time that Google’s indexed it you will find people that stumble across that wouldn’t have done otherwise and just from doing a search from inside the site itself. There’s a chance that people might learn about Microformats when they might not have otherwise of done. But we’ll see.

Paul:Bearing in mind that a lot of people listening to this podcast are web designers and you know, they are sitting there going “Well I know HTML”, like we were saying at the beginning that you have this perception that is something you know back to front. So just to finish up with is there a kind of one area that you really want to challenge people over or one piece of good practice that you’d like to push people on where they’re not as hot as they should be.

Ian:Hmmm… That’s a tricky one. I’m obviously aware that the audience of the podcast know a fair amount already. I guess you do have some people that are relative beginners so I’m not entirely sure the advice is appropriate for the audience. But the kind of advice that I would always give is that, and maybe I’m teaching people to suck eggs here, but really it’s so much more useful if you can learn from the ground up. You know, learn the code using really simple tools. I use Dreamweaver a lot, an awful lot, but that’s because I know how Dreamweaver is going to handle the markup. I know if there any little forbals, what it’s gonna do. So it’s very quick for me to use that without causing any real damage. But I wouldn’t really recommend that to a beginner. I’d say learn the basics. Walk before you run. Obviously things like I mentioned earlier – Word and Frontpage. Never, ever dream of using anything like that because they just do an awful, shocking job of it. In essence, HTML is not difficult to get to grips with. What I tend to find is a problem is what you then layer over the top of it. It’s the browser incompatibilities with CSS and obviously with Javascript it can be as simple or as complex as you like. HTML is not massively difficult to learn but it’s still useful to learn from the ground u
p and not let a tool do it for you. I think that’ll be my advice.

Paul:On one hand it’s not difficult to learn but on the other hand I think it’s quite difficult to master, if that makes sense. It takes quite a long time…

Ian:You’re talking about the pedantic kind of… When you start to argue about the fine details about which element is appropriate for this usage and you can get into some debates over some things, yeah.

Paul:I liked the way you referred to it as pedantic. Do you think we’ve gone a little bit overboard with our obsession with HTML and marking up everything correctly?

Ian:I don’t know. I think it’s a good thing that people discuss and try and squeeze the most out of it. But there are some grey areas and you do sometimes think it is a bit limited, hence things like Microformats adding the richness on top of it. But I don’t know. It’s usually good natured, put it that way.

Paul:Oh OK. I thought I was going to get you to say something really controversial that would get you flamed but I didn’t quite manage to…

Ian: What luck “HTML SUCKS!”?

Paul: Yeah like “Just use Frontpage. It’ll be fine man.”

Ian: Yeah something like that.

Paul:OK. Thank you so much for coming on the show and where can people check this out if they want to try out this reference for themselves?

Ian: The HTML reference is at http://reference.sitepoint.com/html and if you want the CSS reference, replace /HTML with /CSS. And I understand that the Javascript reference written by James Edwards aka BrotherCake is still ongoing. So at some part there will be a third part to this reference. So we’ll have all three layers.

Paul:And I have to say I’ve been impressed with what I’ve seen so far. I’ve actually been using the HTML reference believe it or not. In fact I used it yesterday to check something. I can highly recommend it. Much better than that crappy old W3Schools so you can ignore that from now on and use that instead. OK, thanks very much Ian. That was really good and I look forward to seeing you soon.

Ian: OK. Thank you very much Paul.

Thanks to Lee Theobald for transcribing this interview.

Listeners feedback:

Can you trust developers?

JW writes: I have been on the buying side of both fixed and hourly projects with lackluster results lately. The process can be quite frustrating for me with some of the following bubbling to the top:

Inaccurate estimates both in cost and time

A lack of commitment to carry out all agreed items within a scope when it takes longer to accomplish than originally planned.

The need to ask for more money when the scope doesn’t change.

Which leaves me asking “How much is the developers “word” worth?”

JW’s email goes on to talk about the differences between fixed price and time and material work. I believe that this is where the heart of the problem lies.

I know many within the web design industry will disagree with me but I advise in my upcoming book to only work with developers willing to agree to a fix price contract.

There are always exceptions, such as when you have found a developer you know and trust. In such circumstances I suggest the complete opposite. However, generally speaking I don’t believe it should be the client who takes the risk for projects overrunning. Obviously, if the scope is changed by the client then additional work should be priced and agreed (once again on a fixed price contract).

Make sure the scope is clearly defined up front even if it delays the project starting. The tendency is to jump right into development work as soon as possible, especially when deadlines are tight. However, this could cause problems later.

Unfortunately, occasionally you will encounter a developer who agrees to fixed price project only to move the goal posts part way through the project. By this stage it is difficult to walk away. How then do you avoid ending up with this kind of developer?

There are two approaches that work well. First, before engaging a new developer ask to speak with a selection of their existing clients. If possible, contact clients independently of the developer. That way you won’t just get fed a tame client who is bound to say nice things.

Second, for larger projects consider separating off some of the initial work into a smaller self contained project. That way you can ‘try the agency out’ before committing to a larger project with a greater degree of risk.

In answer to the original question, I am sad to say you cannot trust a developers word. You have to put safe guards in place and mitigate the risk.

The life cycle of a website

Richard asks: What is the life cycle of the websites we develop as web designers? Do you see it as a short term year / year and a half, or a longer term two / three years? What kind of time period should we expect to wait before being contacted by a client about a potential redesign?

I would like to challenge two presumptions you make in your question. First, you are presuming sites should be redesigned periodically. Second, you suggest that the client has to come to you. In my opinion, neither are ideal scenarios.

I have written before about how, ideally websites should evolve rather than going through a continual cycle of redesign. I do however accept that this decision lies with the client and not yourself. Nevertheless I would encourage you to work hard at persuading the client of the benefits this approach brings. This serves both your interests as a web designer and those of your client. Throwing out all previous work on a site every couple of years is lunacy and totally unnecessary.

I also have to say that you are doing your clients a disservice by simply waiting for them to contact you. It is your role to continually suggest ideas on how their site could be improved based on emerging innovations.

We offer our clients the opportunity to regularly meet with us (free of charge) to discuss their site and where they should go next. This encourages them to think in terms of evolving their sites. It also ensures the sites do not stagnate and die.

Not that this approach is completely altruistic. By speaking with our
clients regularly we ensure they don’t forget us and increase the likelihood of repeat business.

Do we always take this approach? No. Some clients don’t want us continually pestering them. Some simply cannot afford to move their site forward. In this case we take a more passive role, encouraging them to read this blog or just ‘keep in touch’. However, this is the exception not the rule.

So to answer the original question; I would argue that the life cycle of a website should ideally be indefinite, as it evolves and changes overtime. This happens through a partnership between agency and client.

Creating screencasts

Posted in Development on June 12, 2008 by Paul Boag

I seem to be creating a lot of screencasts lately. Whether it is recording a keynote presentation or demonstrating some web work, it is a useful way of communicating information.

Here are a few tips that I have picked up along the way.

Add talking head video

Most screencasts are either a powerpoint style presentation or video of your desktop. However, if you want more impact and to better engage with your users, add yourself talking to camera. This really grabs attention.

Image of a presentation I recorded using myself speaking to camera

Have a clean background

If you are recording yourself in-front of a busy background it looks unprofessional. Think carefully about what is behind you. If in doubt record against a plain wall. Also, remove all unnecessary icons from your desktop and make sure your wallpaper is simple and appropriate.

If it’s important, script it

If you are demonstrating an idea to a work colleague then by all means record it spontaneously. However, if it is something more important, write a script that you read. It is surprisingly hard to record live to camera and a script helps a lot.

Try an online teleprompter to prevent your eyes continually flicking down to read your script. I have the following setup to ensure my eye line is as close to the camera as possible.

Photograph of recording setup

Use decent equipment

Do not rely on your laptops inbuilt mic and webcam. The quality will suffer. Instead, I plug in my camcorder via firewire and record from that. Audio I capture through a Samson C01U mic.

Check out screenflow

By far the best screen recorder I have found is Screenflow for the mac. It is amazingly easy to use and can capture full screen video. If you are a Windows user then take a look at Camtasia. Unfortunately it is considerably more expensive and not as good but it is the best I have found for Windows.

A Screenshot of Screenflow

Normal presentation techniques apply

As with any presentation it is important to be enthusiastic, clear spoken and engaging. Avoid becoming monotone as you speak and make sure you don’t sound as if you are reading.

Choose your player wisely

Think about how you are going to add the video to your website. Not all online video services are equal. Personally I like Vimeo. It places few limitations on file size or length. That said, all of these services compress the hell out of your video. If the quality is poor I suggest hosting the file yourself and using the JW FLV Media Player. Despite the name can play a variety of video formats.

That is what I have learnt so far. Do you have any additional tips you could share? I would love to hear your thoughts.

121. Coda

Posted in Classic shows on June 11, 2008 by Paul Boag

In this weeks show we discuss 5 quick fixes to accessibility, and we review the mac code editor Coda.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Skipping Photoshop

The biggest news this week is a post from 37Signals entitled ‘Why we skip Photoshop‘. The article outlines some excellent reasons why they choose to bypass designing in Photoshop, instead going straight from sketches to HTML/CSS. Reasons include…

Mock-ups are not interactive
Photoshop draws you into the details too early
Text on Photoshop is not like text on the web
Photoshop is not productive
Photoshop does not aid collaboration
Photoshop is too complex

They are all valid points. However, although I accept this is right for 37Signals, it is not right for Headscape. Our view is echoed completely by the response of Jeff Croft at Blue Favor. He argued…

37Signals are working with an established visual aesthetic
That 37Signals aesthetic is simple and so is better suited to pure HTML/CSS
That 37Signals do not work with clients
That working in HTML/CSS can lead to constrained design.

That said, the post has made me consider experimenting occasionally with the approach. For me that made it worth reading.

It is a great discussion and I am really glad Jason at 37Signals brought it up. It has certainly created a lively debate including posts from Jon Hicks and Mark Boulton.

Web Designers should do their own HTML/CSS

But we haven’t finished with 37Signals yet. They have posted a second blog entry this week entitled ‘Web designers should do their own HTML/CSS‘. The title is fairly self explanatory and they put forward a good argument as to why designers should never produce a design and then simply hand it off to ‘code monkeys’ who make it work.

At the end of the article they write…

We simply don’t consider designers who don’t get their hands dirty with the materials relevant to the kind of work we do.

If you’re a designer working with the web who still doesn’t do your own implementation, I strongly recommend that you pick up the skills to do so.

Whether you agree with 37Signals or not, the message is clear: You will struggle to get a job if you do not know how to code pages as well as design them.

We would certainly never hire somebody unless they know HTML/CSS just as well as they know Photoshop. The nature of the web means that an understanding of the medium is crucial to creating a great user experience.

Beyond CAPTCHA

I hate SPAM. I hate it with a passion. I particularly hate comment/forum SPAM because it not only inconveniences me but also affects my users.

One common approach to the problem is CAPTCHA. CAPTCHA presents the users with a distorted word(s) that they have to type in before they can comment.

Although in principle CAPTCHA sounds great it does have a number of weaknesses…

It creates accessibility problems
It are hard for normal users to complete
It can be beaten by spammers
It make SPAM the users problem

In short, CAPTCHA doesn’t work. So what is the alternative? Well, that is what James Edward (AKA Brothercake) explores in a post on Sitepoint entitled ‘Beyond CAPTCHA‘.

He looks at server side solutions, services like Akismet and honeytrap approaches. He also looks at OpenID and other forms of authentication.

The conclusion is that there is no perfect solution. However, he argues we need to stop making this the problem of users and take on the responsibility ourselves.

I can certainly see his position and generally speaking I agree. However, when you are faced with limited time and budget it can be necessary to cut corners. Personally, I cannot stand CAPTCHA and I regularly fail to complete them first time. However, I have no problem completing a basic question such as found on the boagworld website.

Read the article and make up your own mind. At the very least it will offer you some alternatives to CAPTCHA that can be implemented quickly and easily.

Website Owner’s Manual

Our last news story is a little bit of news about the book I have been working on. For a start it has a title; ‘The website owners manual‘. However, the big news is that you can start reading it and contributing to the final version.

Feature: Quick Fix Accessibility

Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your sites accessibility. We discuss these in this weeks feature

Review: Coda

Find out why I am seriously considering abandoning the code editor I have been using for over a decade in favour of Coda for the mac in this weeks review.

Listeners feedback:

Team working environment

Gareth writes: I have been “promoted” from a support desk position for an Oracle based financial system to the company’s single web designer. We are not by trade a dedicated web design firm and as such i am having to develop procedures and polices by myself. I have been reasonably successful in this thanks in large part to your podcast, which has in turn led me to blogs and websites such as A List Apart, Sitepoint, Headscape (obvious one that) and many more that have also helped me.

Due to the sheer volume of work that is coming in this year we have found ourselves needing to recruit an additional web designer. At the moment i have all of my work saved on my laptop and all my tasks and appointnments stored in my Outlook.

What tips can you give me in relation to creating a centralised working environment that can be used by both myself and this new person as well managing our work loads. What do Headscape do? I should probably point out that we will be office based in the sane room rather than working from home.

Why is it that Ryan our producer, keeps picking questions he knows I am not an expert on. I am a front end interface guy. What do I know about this kind of thing! Also we primarily work remotely so have a different setup anyway.

That said, I am willing to give anything a go and ignorance has never stopped me before.

Okay, if you are sitting in the same office communication is not going to be the primary problem.
However, you still may want to take a look at Basecamp. Its a great way of organising team working.

The main problems will come in the form of file sharing, backup and overwriting each others work. One thing you might want to consider is a version control system like Subversion. At Headscape we use something called Source Anywhere however this is just personal preference. These systems allow you to…

check out files, preventing others from overwriting them,
rollback to previous versions of a file,
branch files, allowing multiple versions of the same file.

However, for some this might be an over the top solution. The biggest danger is overwriting files. There are a number of code editors which prevent this including Dreamweaver and Coda. This just leaves the problem of shared storage and backup. You could solve these problems separately. However, personally I like the look of Drobo. Its not that cheap ($499 plus the drives) but it provides an incredibly expandable solution that minimises the problem of data loss.

No doubt my ignorance is showing in this question so if you have better advice please post it on the show notes.

Internal Search

Stephanie writes: I have a question regarding internal site search. I am wondering what types of solutions there might be for enabling a site search when one does not have a development team to turn to. All I can come up with is Google custom search and it has some drawbacks (ad serving in the free edition and blog posts do not get indexed right away).

Love the new site!

So you want to add search to your site eh? If you’re using a popular engine such as MovableType, then there will be a built in search, so let’s assume you’re not. If you’ve just built your site using HTML, or aren’t happy with the results of your CMS’s out-of-the-box search, you still have options.

If PHP is your game, you can install a spider on your server, such as Sphider. This will index your site and provide a very customisable solution, that doesn’t send queries off to a third party server. If you’re looking after a large site, with huge numbers of pages and documents to index, you might consider a program called SearchBlox. SearchBlox is expensive, but powerful. It runs as a java based web app on your server, with many fine tuning features that will keep even the most fastidious of clients happy.

If it’s a free, third party service you’re after then you might consider Atomz or Google. Atomz is easy to setup, free and customisable but does include text based ads, similar to Google. The indexing schedule is regular, but only weekly. Google is an established name in search, but also has the downside of irregular indexing and ad supported results. It is of course possible to spend a little extra money to remove these, with Google Site Search

There is however an interesting alternative service called JRank. JRank don’t stuff adverts into the results, they only require that you provide a link to their website on the page that you set as the index for crawling. They also have a REST API, so without much work you can integrate the results in your website, as the PHP code below demonstrates:

<?php $jrank = file_get_contents('http://www.jrank.org/api/search/v2.xml?key=[API key]&q=[query]'); $xml = new SimpleXMLElement($jrank); $result = $xml->xpath('//entries/entry'); while(list( , $node) = each($result)) { echo '<h3>' . $node->title . '</h3>'; echo '<p>' . $node->content . '</p>'; echo '<a href=”' . $node->url . '”>' . $node->url . '</a>'; } ?>

An interesting point in the question was that Google doesn’t index blog posts right away. In my experience, search is used to find old articles or those that can’t easily be found by tags or menus. Newer articles should be easy to find from the home-page of the site, particularly if it is a blog site. If powerful search is required, then you’re going have to put up with the ads, or fork out for a bespoke solution.

Quick fix accessibility

Posted in Accessibility on June 9, 2008 by Paul Boag

Complying with accessibility guidelines can seem like a massive undertaking. However, addressing 5 simple problems can make a huge difference to your sites accessibility.

The Pareto principle (also known as the 80/20 rule) states that, for many events, 80% of the effects come from 20% of the causes. This is true for accessibility where a small number of issues cause the vast majority of problems. But what are these issues? That is a subjective question, but here are my top 5:

Poorly described images

By now you probably all know that images should have associated alt attributes, which describe them to visually impaired users and search engines. However, a related problem is the content of these alt attributes.

Many people have realized the benefit of alt attributes for search engine placement and so stuff them with keywords making them far too long.

All content images should have an alt attribute that clearly describes what is being shown in a concise manner.

Badly labelled links

It is not just images that are labelled badly. There are also problems with links. The text contained within a link should describe that link without context. This is because screen readers have the ability to read all links on a page as a single list. Users can then quickly navigate without listening to the entire page. However this is problematic because a link entitled ‘click here’ does not explain where it leads. A better link would read ‘click here for latest news’ or simply ‘latest news’. Where a longer description is required a title attribute can be added.

Descriptive links also help sighted users to quickly scan for the next page to visit.

No alternatives to media

It is not just images that need describing. When using video, audio or any form of media that requires a plugin (that some users may not have) it is necessary to provide an alternative version. This alternative should either be in the form of a transcript (in the case of audio) or captions (in the case of video or other media where visuals and audio are synced).

At first glance this seems a massive undertaking. However, there are a number of services like castingwords.com who provide transcription at a very reasonable rate. There are also tools like overstream.net, that help create captions.

Reliance on Javascript

Javascript is a programming language that can be used to achieve many of the interactions we see on websites. From popup windows to services like Google Maps, Javascript is amazingly flexible and heavily used.

Javascript is not inaccessible. In fact it was created by the W3C and sits alongside HTML (which provides the content) and CSS (which provides the design) as the language which provides behavior. The problem is not the technology but the implementation.

Not everybody has access to Javascript. Search engines in particular tend to ignore it. It is important that all content is accessible even when Javascript is turned off. The most common problem is using javascript to create navigation and other links. If Javascript is not available it is impossible to follow those links to the content beneath. Equally when Javascript is used to add content, this becomes inaccessible if Javascript is disabled.

The simple rule is to never rely solely on Javascript as a method of accessing content.

User controlled text

The final accessibility mistake I see regularly is text that cannot be resized. By default all major browsers allow users to set the size of text on a webpage. This is needed because website owners cannot predict users visual requirements. Most people with visual problems need to be able to increase font sizes. However, there are some visual impairments that require smaller text to fit within a limited field of view.

Although browsers provide this functionality by default, many web designers disable it. To be brutally honest there is no good reason for this beyond laziness. By fixing the font size the designer reduces the burden of testing but it provide no other tangible benefit. In short, ensure the fonts on your web site are scalable.

By addressing these five problems you will dramatically improve the accessibility of your website. None of these issues are particularly hard to overcome and the financial investment is minimal. However, by doing so you will increase the amount of traffic to your site and the number of visitors able to successfully navigate it.

119. Fluid Elastic

Posted in Classic shows on May 28, 2008 by Paul Boag

On this week’s show Ed Merritt joins us to discuss fluid, elastic layouts and we take a look at PHP Designer, a feature rich code editor.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Harness the power of "frilly bits"

I love watching design trends come and go on the web which maybe why I love Patrick McNeil’s Design Meltdown so much. One trend that has caught my eye is the move away from the Web 2.0. look to something more ornate.

This style makes use of what can only be called "frilly bits". You know the kind of things, those swirls and ornaments buried in typeface sets but rarely used. They have been around for years, used by blacksmiths and typesetters alike. They turn up on everything from wedding invitations to architecture, and now it would appear, the web.

One of the first sites I saw them was Cameron Molls blog. He is an amazing designer with a very ornate and delicate style (about as far away from my own as possible).

Recently one of Cameron’s readers asked him where he sourced such beautiful ornaments and he has been kind enough to share 25 different sources of similar frippery.

Unfortunately, simply knowing Cameron’s sources will not grant us the ability to design as well as him. However, it is an extremely useful list and definitely worth perusing at your leisure.

The cure for content-delay syndrome

Returning from the world of creativity to the realities of project management, our next post tackles the frustrating subject of clients failing to deliver content on time.

Entitled the cure for content-delay syndrome this article addresses once again the subject of copy-writing.

We have talked about the need for a copywriter many times before. I have encouraged you of the need to engage a professional to craft your sites copy, while at the same time struggling to convince my own clients of the need.

The problem is that ultimately many clients believe they can write their own copy. After all they are experts in their field and know their own audience. Some argue that it takes as long to brief somebody as to do it themselves. When budgets are tight, these sound like convincing arguments and are hard to dispute.

This post suggests that the answer in not to promote the use of a copywriter but an editor. An editor refines the clients text rather than writes it from scratch. This is considerably cheaper but still brings improvements in continuity, accessibility, usability and SEO. What is more, the client no longer needs to worry about the quality of his writing. Instead he can concentrate on "bashing it out" and let the editor improve its readability later.

Its a persuasive argument and gives me hope that I might soon be able to encourage my clients to engage a professional to work on their copy.

The roles of a web entrepreneur

From the role of an editor to the many roles of a buddying web entrepreneur.

We haven’t spoken much about developing web applications on the show (this is definitely something we should try to do soon). Traditionally web design has been a service industry and for the vast majority that is still the case. However, a growing number are looking to add a product line to their offering or make the switch entirely. Certainly this is something we are doing with getsignoff.com

But what does it take to be a web entrepreneur and build web applications? Well, unless you have a lot of venture capital it requires you to wear a lot of hats as explained in this post on Think Vitamin.

From marketeer to customer service representative, you are required to fulfil many more roles than you are used to. Its a challenging undertaking but the benefits are substantial. Get it right and you have a regular income without the overheads associated with a service based business.

Intranets revisited

Another subject that we have neglected on the show is intranets. They continue to grow in importance and yet have fundamental unresolved problems.

In two great posts Gerry McGovern exposes these flaws including the tendency for intranets to become dumping grounds for information and their lack of decent search.

Both posts in their own way focus on the fact that intranets should be about "getting things done". They should provide tangible productivity benefits but often fail to do so. Each post identifies a reason for this being the case.

The first points to the way intranets are perceived. Many see them as an information repository. This appears to be a fancy way of saying "where information goes to die". Viewing an intranet in this way, McGovern argues, is to miss the point. We should only be distributing information if it aids productivity or encourages collaboration.

The second post argues that intranets fail to aid productivity because information is just downright hard to find. In particular Gerry targets search but he also argues there is a wider problem of find-ability. Why is it he asks, that even in the largest of organisations nobody is dedicated to ensuring employees can quickly access the information they need to do their jobs?

If you have an intranet or are involved in developing them, then these are an excellent read.

Feature: Fluid Elastic Design

When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages and in this weeks feature we have Ed Merritt with us to disuss them.

Review: PHP Designer 2008

This week’s review is on PHP Designer 2008 has actually been submitted by Simon Jones of Zako Media. He writes…

As a web business, I needed stable coding platform or IDE which would allow me to be as productive as possible. Money was no object so I researched everything available from open-source packages to expensive commericial software. I discovered phpDesigner from www.mpsoftware.dk and was blown away. It’s much quicker than Zend and has most of the same features. phpDesigner has all the usual code highlighting and auto-completion for PHP, CSS, HTML, Perl, XML, Javascript, along with easy buttons to tidy this code on the fly. We all know how hard it is to keep code tidy… now we don’t have to. phpDesigner also allows you to arrange files by project without disrupting the standard windows folder system. If you ever want to transfer away from this software, you don’t need to worry about compatibility.

The smaller features I find most useful are: bracket matching, code explorer (to jump to functions, variables and arrays), code snippet library to store your most commonly used functions from project to project. Tooltip syntax reminders for PHP and rightclick to view PHP.net help page for that function. Finally it validates your syntax on the fly, without affecting performance… all other editors stalled, slowed and chugged away as they scanned the whole file every time a character was added. phpDesigner offers the same ability with very little processor time, as soon as you’ve finished a line, it hilights unobtrusively to show missing semi-colons, brackets etc. A more detailed error message can be accessed. This saves valuable Alt-Tab, Control-F5 time. (or for apple users, switch task and refresh browser) as you know the code is error free before you start.

The software offers links to internal ‘browsers’ for phpmyadmin and php help, has an inbuilt ftp client or allows you to call an external one like filezilla. It helps integrate nicely with Smarty templates and works with phpDocumentor for instant php documentation.

On the longer term projects, it has built in bug tracking information, project and global todo lists.

One of the most important and major strengths with this software is it’s stability. It has a few issues sometimes closing down if it’s travelled through a laptop’s standby mode, but otherwise it has never crashed or lost data in the years I’ve been using it. mpsoftware is obviously passionate about this product as updates are available very regularly offering additional functionality and fixing minor bugs.

This is by no means the full feature list, but more information can be found at www.mpsoftware.dk where they have a free cut down non-commercial version and sell the full version. Compare to other available software and it sounds expensive, but mpsoftware.dk is charging a ridiculously low €39 for a single license with further discounts for groups of 10.

Thanks to Simon for that review.

Listeners feedback:

Can you set up a web design company in the evenings

John Bullock asks: Hello boagworld team, my name’s John and I’ve got a question for you. Basically I’m starting up my own web design company and I’m in what I think is an unusual situation of trying to do it along side my 9 to 5 job which has absolutely nothing to do with computers, it’s actually an engineering job so I actually have no chance at all to work with computers in my normal job. Now I know trying to set up a company alongside your 9 to 5, while obviously tiring, is a very sensible and safe way to do it, is it actually possible? Do you think it’s a realistic way of setting up a company or do you think I would have been better going with the freelance option? It’s great to have the show back after what seemed like a decade and keep up the good work.

Yes it is definitely possible. In fact it is the way the vast majority of freelancers begin. That is not to say it is easy. However, it is the most sensible approach. If you don’t your options are fairly limited…

Wait to be made redundant and hope you get a payoff
Live off the kindness of friends and family (a guaranteed way of losing friends)
Borrow money from the bank

Personally, I am very much against borrowing money. It substantially increases the risk. If you setup loan free then you can get another job if things go wrong. With a loan you are left in debt and struggling to pay the rent.

Build up a freelance business on the side and save the money to pay for the first few months. Also if you are able, land some regular customers. This will give you an existing client base to bring in much needed cash. At the very least you will have a portfolio of client work to show off.

We were fortunate. The web design company we worked for folded. Although we didn’t get any redundancy payment we were able to take several of the clients with us. These not only provided valuable income in the first few months but also allowed us to attract other clients.

Domain names

Robert Prior asks: Hello Paul and Marcus, my name is Robert Prior and I am from Waco Texas, i’m currently a beginner web designer but in the future I would like to set up a small web design agency here where I live and my question is, when you’re trying to get the URL for your company name, how important is it to get different extensions like .net, .info, .tv are those important at all? Or do you just need to get the one main one like the .com name? Really enjoy the show, appreciate all the hard work you guys put into it and looking forward to future episodes. Thank you.

In my opinion your domain name is incredibly important. You should definitely try to get the domain extension for your country and .com as well. We have never managed to get headscape.com but as the vast majority of our business is in the United Kingdom headscape.co.uk has been adequate.

However a good domain is about a lot more than the extension. Personally I am not a fan of these new web 2.0. urls (flickr, del.icio.us, digg). They are hard to spell and hard to remember. In my opinion a good url should be a well known word (or words) even if not directly associated with your product. Headscape for example sounds more like a hair dressers than a web design agency, but at least it is memorable and easy to spell.

Another common mistake is to go for a domain name with hyphens. This never works well as it is hard to tell somebody. For example "headscape dot co dot uk" is much easier then "head hyphen scape dot co dot uk". Also users often later forget that it contained a hyphen.

The ideal domain is also descriptive of the site. For example we were blown away to discover getsignoff.com was available. It describes exactly what we do and is memorable too. That said more recent studies suggest that a brand name (Amazon.com) is more valuable than a generic name (books.com), so if you are forced to choose pick the former.

Finally, be careful to avoid words with multiple spellings especially if working internationally. For example don’t choice a domain like colorTheory.com because it could equally be spelt colourTheory.com.

Many claim that there are no good domain names left. Although it is harder these days getsignoff proves they are still out there. With a bit of lateral thinking (or using one of the domain suggestion tools) they can be found. There is no reason to start randomly start dropping vowels.

118. Geo

Posted in Classic shows on May 20, 2008 by Paul Boag

On this weeks show we look at geocoding, Tom Coates talks about Fire Eagle and find out how we achieved the tabbed menu effect on the Headscape website.

Download this show.

Launch our podcast player

News and events

New tools for web designers on the way

A few months ago the guys over at clear:left put up a holding page for an application called Silverback. Exactly what Silverback was became a topic of much discussion and a considerable amount of buzz.

This week Andy Budd has finally revealed exactly what Silverback is on his blog. He describes as…

An OSX application to help people run their own low-cost Guerrilla usability tests. It captures screen activity, records audio and video from your built in iSight, and then composites it into a handy Quicktime movie for later use.

I have been fortunate enough to play with an early beta and I have to say it’s a great idea. It has the edge on other "screen capture” programs because it is designed specifically with usability testing in mind. For example, you don’t need to export the movies as soon as they are recorded. You can save them until you have finished a day of testing when more time is available.

If you ever do user testing get yourself over to the Silverback site and signup for the beta.

It would of course be remiss of me not to mention GetSignOff.com as we are on the subject of tools for web designers. Like clear:left Headscape have been developing an application and this week we provided our first walkthrough showing exactly what it does.

In essence GetSignOff is a web application that allows you to present designs to clients in a more professional manner, manage the feedback you receive from them and organise the multiple iterations of each design.

To really get a sense of what it does you need to view the screencast so be sure to check it out.

Effective online delivery of video

There can be no doubt in anybodies mind that online video is huge. It has taken a long time to arrive but with broadband so widespread it is now a reality. Increasingly users are expecting video content from websites and it is up to us as web designers and owners to deliver.

Delivery is fairly straightforward when you can use sites like YouTube or Vimeo. However, that is not always possible. Constraints on size and quality can make these services unsuitable. Not to mention their over demanding terms of use. So what do you do if you are forced to host and deliver video yourself?

My advise is to read an excellent article on the Digital Web Magazine that looks at the various approaches for delivering video over the internet. It explains concepts like progressive download, RTMP streaming and HTTP streaming. It is a superb source of information for anybody who has to host and deliver their own video content.

Some Javascript slight of hand

Our next story is some slight of hand by Robert Nyman.

I find myself increasingly using Javascript to show and hide content. However, being a well behaved standards designer I have to be careful how I build pages. I avoid hiding content with CSS because if I do and Javascript is disabled, users have no way to show the content again. Instead I use Javascript to hide the content so that if it is disabled the hidden elements will show by default.

The downside is that you can get flashes of content because Javascript has to wait for the page to fully load before it can hide content.

Fortunately Robert has come up with a nifty little workaround where he uses Javascript to load a CSS file, which in turn hides the content. This happens before the body has been loaded avoiding the flash of content.

If like me you occasionally suffer from content appearing when it should not, then bookmark this approach for later use.

Overcoming creative block

Our final news story today is a post on overcoming creative block. Creative block is something we all suffer from whether our job is perceived as being a creative one or not. Every job requires some degree of creativity and we all know what it feels like to stare blankly at a computer monitor unsure of where to begin.

This post provides a list of excellent tips on how to overcome brain freeze from going for a walk to throwing away the piece you like most. It really is a superb read. Another one to bookmark for the next time your creative juices fail to flow.

Surprisingly he has missed my number one technique, sitting on the toilet… or is that just me?

Feature: Location Aware

The web is full of exciting innovations at the moment. However, it is geocoding that personally excites me the most. In this weeks feature I explain what it is and why I believe it offers so much potential.

Interview: Tom Coates on Fire Eagle

Paul: Ok, so joining me today is Tom Coates from Yahoo. Good to have you hear Tom

Tom: Nice to be here

Paul: So I’ve just been hearing from Tom that he’s got a massive line up of interviews to do for a product that he’s been involved with called Fire Eagle. So he’s talking to the Guardian, the BBC and lots of important people, but thank you for sparing a few minutes to talk to us too. We’re very honoured.

Tom: No problem at all.

Paul: So, lets kick off for those who haven’t come across Fire Eagle before. I think you talked about it at dConstruct last year.

Tom: Yes

Paul: That was when I first heard about it, perhaps you could tell our listeners a little bit more about what it is, and what it does.

Tom: So Fire Eagle is a service that helps you share information about your location, online. So that’s both for people, and more importantly for different sites and services. The other side of it is that it sort of fixes a problem with the development community for the use of applications that use your location. In that it makes that process much easier. So in principal, it means that from a user’s perspective, you can capture information about your location and use it in lots of different places. And from a website owners perspective you can start to think about how your service can respond to someone in the world without having to do a lot of donkey work.

Paul: So it’s not primarily, in itself, like another web application like Twitter where you’ve got to sign up for and take part in it? I
t’s more of a API framework type of thing.

Tom: Well, when you think about it, it is both, because if you think about it as a place to sort of store information about your location. We give you the tools to go in and update that information, decide who to share it with, and manage that information. So in some ways it’s like your location preference page, which helps you control that information. So yes you do sign up for it, it uses a Yahoo ID, the same one you use for Upcoming and Flickr, but really, once you’ve started capturing your location or sharing it with particular services, you don’t really need to come back. We’re not trying to build a sexy fun service for day-to-day use, but we’re trying to make something that makes it easier for you to build, and other people to use, services.

Paul: OK, so how exactly does the service work Tom. I’ve seen other location based stuff where you have to do horrible things like enter grid references or terrible stuff like that. How do you use Fire Eagle?

Tom: What you do with the site, is you go to the site, and you log in with your Yahoo Id and you do a simple terms of service thing, which asks how often you want to be reminded that you’re sharing your location. From that moment on you’re up and running. The simplest thing to do, is go to a web page called where am I, and you can type in your address and, we will work out where you are in the world, and we’ll plonk it on a map. Now that in itself isn’t terribly interesting. So the interesting thing about it, is that we’ve opened up the API’s so that anyone in the world can build something that could update your location, and anyone in the world could build something that could use your location. So we have an application gallery, and you could go along to that, and on that at the moment there are services like Navizon, which work out where your location is by nearby wifi signals. Or Loki which is from SkyHook the same people who power the iPhone location thing, and Dopler and all kinds of stuff. You can tell those services that you’re OK sharing that information with Fire Eagle. So I have an application on my phone at the moment from Navizon that works out where I am every 10 minutes and tells Fire Eagle where I am. So that location just sits in Fire Eagle and then I can decide to share it with people. So as an example a plug-in for movable type that Ben Trott has built and that means that you can put on your blog, a little map of where you are right now which is quite fun. What we do is, to help maintain your privacy, you choose which services you’re comfortable with sharing your location with, or get an update from. You can say to what level of granualarity you’re comfortable sharing with it. So you can say, just share my city, or my state (if you’re in America) or your neighborhood or your exact point. Then you can hide information at any time, or delete all information in the system.

Paul: Oh, OK.

Tom: So basically it means that you would go and find one really good way to get where you are, or lots of little ones all around the place that compliment each other, and sort it out into the middle of this little repository of data, that you can then say, yes I’d like to use this on Flickr, or on Facebook, or on moveable type, or wherever.

Paul: So the way you’re describing it is that there are multiple entry points into it, where you type in your exact location, weather it’s your mobile phone updating it?

Tom: Yes

Paul: You know I even noticed from looking at the site that you can now Twitter your location in.

Tom: Yes

Paul: And that there are multiple output points, where it’s going to Movable Type, or to wherever else.

Tom: Yes

Paul: So what type of things are we going to see with this. What are you expecting people to develop? Is there any cool stuff at the moment that you can tell us about?

Tom: Yeah, well there are a fair number of cool things that have already come out, which is kind of interesting. I mean one of the things on the engineering side – so there is a bit of a problem with location based services, and everyone’s been talking about it for a very long time, you know they have all these kinds of things that you couldn’t find friends more easily, or find out things about your neighbourhood or whatever. And the problem is, and has always been, that it’s quite hard because what you have to do is, every time you want to use an application like that, you have to install another application on your phone, or go through another extended rigmarole about how to do it. So our plan is that we take that away, so what you basically do is you find any piece of software that gets your location usefully, and you install it, and it updates Fire Eagle. So from that moment on any application in the world that is Fire Eagle enabled can go and get that. So any website in the world could respond to where you are, without ever having to build the thing that works out where you are. So some examples – Navizon as I said is this lovely little application that runs on most mobile phones, captures your location. There is a thing called Fire Bot, which is a Twitter Bot, and on that one you can do a Twitter direct message, with a text string of where you are. So you can say I’m in San Francisco, or I’m in London, or I’m in.. as I am now, at Yahoo’s offices at 125 Shaftesbury Avenue. And you can type that in and you can then share that with all the applications you’re comfortable with. We’ve also taken Cell ID information, so if you have a mobile phone, many of those on a technological side expose the Cell ID. So that’s the tower, or mobile phone mast kind of thing. Quite a lot of people are doing interesting mappings based on that. That in particular is at a very early stage so we don’t actually get much good information from that, but, you know we do take in all different types of data. You could have a GPS log coming from a mobile phone, or anything that could get long/lat coordinates, or anything that could get text string of the place you’re in. On the other side, is the things that could use it, which is where the fun starts. There are all kinds of things that people have built. And more coming. So there is a service that Leonard Lin, the founder of Upcoming made for us, called FireBall, and FireBall was particularly useful in San Francisco in the last couple of weeks because of the Web 2.0 Expo that was out there.

Paul: Oh yeah.

Tom: And the idea with that was you could either send a Twitter message of where your location was, or if you were getting it from FireEagle, it would automatically use that. And at any point you could say "Where are my friends” and it would go to Twitter, find out all your Twitter friends and plonk them on
a map for you. And you could do that on the iPhone as well because it would send you a file that could then be opened by the Google maps thing. So you could literally call your little maps thing on the iPhone and it would say "Here’s where all your friends are”, which is really lovely, and really nice, because it’s all about your friends there.

We’re building a Facebook App, this is no particular secret, we’ve talked about this before, and its going to be one that means you can decide to share your location on Facebook with your friends, which is going to be quite fun. A guy called Simon Willison who I used to work with, who has built a thing called WikiNear. There are over a million geo-coded articles in Wikipedia, which basically means someone has put in the longitude and latitude of where the thing talked about in the article is. So Simon’s thing is a little web page for your mobile phone, and you bring it up and it says "Here are the 5 nearest interesting things to you”.

Paul: Cool!

Tom: Which is pretty fun, so you can wander around London and here’s the British Museum and you can click on that to go to the media wiki page to talk about that.

Um, there are other things like that, I mean LightPole is a little company that we’ve been working with. They’re doing things like local services around you, which again is mobile phone focused. A company called Outside.In, they do things like try to work out where all the blog posts and news stories are about, and they can bring that information to you if they know where you are – and they are going to get some of that information from FireEagle – which is really cool. So as I said we’ve got this Moveable Type thing. So there are all kinds of stuff that is going on at the moment. We build these wonderful little widgets, which I really like, they are for OS 10, and one of them is a little updater. You can type in your location, press a little button and it will update it to FireEagle. One of them tells you the weather where you are right now. So if you travel a lot, it will give you the weather forecast of where you are. And one of them shows you nearby flickr photos, so it just goes and gets those geocoded photos from Flickr and gives you every day a little photo montage of all the cool things that are going on around you. So lots of interesting new uses really.

Paul: It’s interesting you mentioned Flickr. I mean you can imagine the reverse of what you just described with Flickr, so if your location is been taken each time, it would know the location where you took that picture and geo-code that picture on Flickr. Is that the kind of thing that you’re planning to do?

Tom: I mean there are a lot of really interesting uses based around geo tagging. So whenever I write a blog post, it would be really awesome if my Moveable Type blogger could go and look up on FireEagle where I was, and say "This article was entered here”. So you could say "What do you think about Gordon Brown in Edinburgh” as apposed to "What do you think about Gordon Brown in London” or "Wales”, and that would be really fun as a good way of slicing through this enormous amount of blog posts that are out there.

Twitter messages as well, that would be lovely – it would be really great if every time you wrote a Twitter message they went and grabbed your location, and you could say, well I want to explore the public conversations going on in my neighborhood right now. That would be lovely. Um, and with Flickr as well, when you click on a photo on your phone, uploading it immediately. If you havn’t got the location on that device, being able to get it from FireEagle would be really useful. And you know obviously whatever amount of information they can get, so perhaps FireEagle only knows you’re in London, that’s still useful – you know you can still help people find photos just because they are in London. Or if they are at an exact point that’s also good. The only thing about Flickr is that often people take photos and upload them later. And at the moment because we want to make sure that we’ve thought about all the implications, and we don’t want to weird any one out, we’re making sure that we don’t keep any ones history.

Paul: Oh Ok

Tom: So it’s literally just your current location we look after for you.

Paul: Ah, that’s good.

Tom: Yeah we’ve talked to a lot of people about this, and we have been very careful about the privacy and control. These are the two watch words of the project. We are incredibly conservative, we don’t want to worry’s any one out. So at any time you can press a button to hide your information. Information will still come into FireEagle, but it won’t go out. Or you can delete all your information on FireEagle at one time, so we won’t keep any records at all if you do that. At the moment we don’t keep any location history at all – any tracking, or location history there. And we even by default will send you an email once a month saying "Are you still OK sharing”, and if you don’t reply to the email, or you don’t click on the link in the email, then we’ll stop immediately. It’s just so there is no risk of you doing anything, you know, accidently, exposing it in ways you’re not comfortable with.

Paul: I mean when I first heard you talk about this it struck me as hugely exciting, that location based information is an area that I’m massively excited about. And I think there is so much potential to add a new level of context, you know, on the data that we see on the web. Something that has been very much lacking since the beginning. And there is so much potential here, for pretty much anyone listening to this show, whether you’re a design or a web site owner.

Tom: Yeah

Paul: So where would people start to find out more information about this. Where’s the good place to begin?

Tom: OK, so one of the parts of the project that took surprisingly the most time, was actually making sure that the documentation was really good. At the moment it’s an invitation only service, so we have a few thousand people using it and testing it at the moment. We’re opening it up to more invitations pretty regularly. It’s only been out in the wild about 6 weeks. So if you’re interested in using FireEagle, just go to the website, put your email address in the box, and over the next few weeks we’ll be sending out more invitations.

Paul: And what’s the website address?

Tom: Oh, it’s FireEagle.com

Paul: OK

Tom: So that should be nice and easy to find. On that site, if you can get an invitation, and if anyone spots us around the
place, ask us, because we have little cards we can give out. There is extensive documentation on how it works, that really falls into two big chunks. Partly it’s this use of this new standard called OAuth. Which is a really good way, meaning sites can talk to each other on behalf of users, and you can set your preferences around that. So getting your head around OAuth is really useful because so many services – I think Google and Yahoo have both announced that there is going to be support for OAuth as a standard now. So that’s really great, we’re all really happy about that. And the other side, is the FireEagle APIs themselves, which are very simple, sort of three main ones. 1. Where is the user. Again, all of this only happens if the user has given explicit permission for this service to see it.

Paul: Sure

Tom: One is update the location of the user, and one is ambiguous query, so such as, you say you’re in London, which is great, but there are hundreds of London’s in the world. So there is one service where it says "which London” and you can say "this one”. So they are the three core queries , it is very very simple. We have another couple of ones, for particular web services, to bring back users of my application within that particular area, like SOHO or London.

Paul: Yep

Tom: Another one, bring back the hundred who have updated their location most recently. So just think, just to make it easier for developers to build useful services.

Paul: Cool, that just sounds really exciting, and I can’t wait to see some of the stuff that is developed in the future. Tom, thanks so much for coming on the show.

Tom: No problem, I hope that was useful

Paul: That was incredibly useful, and I’m sure there will be a lot of people hounding you for invites, well there probably already are thousands of people hounding you for invites. Have you got any idea when it’s going to go "Full Open”?

Tom: Yes, I do have an idea when it’s going to go full open.

Paul: But you’re not going to tell me.

Tom: Well its within the next couple of months. We want to make sure we’ve had conversations with some really interesting people, so that we have some really cool stuff to show off at the same time. So you’ll just have to wait and see on that line I’m afraid.

Paul: Oh, so that’s really exciting and thank you again for coming on the show.

Tom: No problems. Cool.

Thanks to Nathan O’Hanlon for transcribing this interview.

Give Away: Fire Eagle Invites

So as we mentioned in the interview, Fire Eagle is currently in beta, but if you can’t wait for the full release and want to get playing with it right away your in luck. We have around 20 invites available for boagworld listeners. To claim one, e-mail [email protected] with the subject heading of "Fire Eagle Invite" and Ryan will send you your code, while stocks last…

All tickets have now been claimed!

Listeners feedback:

Tabbed menus?

David Bridle writes: How did you get the tabbed menu to work in the headscape website?

When writing the answer to this question, it turning into quite a lengthy explanation. So I wrote a blog dedicated to it, which can be found here.

117. Friendly

Posted in Classic shows on May 14, 2008 by Paul Boag

On this week’s show, we review woopra, a google analytics alternative and we explore why friendly urls are so important and what tools are out there to help you set them up.

Podcast: Download (22.4MB)

Download this show.

Launch our podcast player

Information

Fuel Conference

Fuel is a one-day conference for entrepreneurs and marketers who want to make their companies, services and products truly remarkable. The conference is on the 13th June 2008 and tickets cost £195 inc VAT however for lucky boagworld listeners if you enter the promo code boagworld at the checkout you will get a £25 discount!

News and events

The devil is in the detail

We kick off the news with three stories that focus on the detail of web design. So much is said about design, usability, accessibility and other broad subjects. However, less is written about the small things. It is here that a good site becomes an excellent site.

The first is a post on the list apart website entitled Zebra Striping: Does it really help?⁽¹⁾. Zebra striping refers to alternating colours on a table of data. It is a small thing, but a lot of us do it thinking it helps the readability of the data. But does it really? This post takes that theory and puts it to the test. The results are inconclusive but it is an interesting read anyway.

The second story is about a new book released on the topic of web forms. It’s called Web Form Design⁽²⁾ and as the title suggests looks at the much under-represented subject of creating a great looking, usable form.

As I have said before forms make or break some of the most crucial elements of a website: checkout, registration, data input, and any task requiring information entry. This looks like an excellent read and I highly recommend you check it out. I will be.

The final post that focuses on the detail of design is looks at pagination⁽³⁾. It is a tutorial that explains how to code pagination semantically. It then demonstrates how you can use CSS to recreate the appearance of pagination on sites like digg or flickr. It is an easy read and ideal for beginners.

Review crazy

The next theme of the week is reviews. In particular Smashing Magazine have gone review crazy in two excellent (if somewhat excessive) posts.

The first reviews 35 useful code editors⁽⁴⁾. Of course, we can write our code with a text editor but that wouldn’t make for a very interesting post! Also we like those advanced features like auto complete, formatting and debugging tools.

If like me you have been using the same coding tool for years, this article is worth a read. Things have certainly moved on and there is no shortage of choice out there. It might be time to change.

The second review from Smashing Magazine only manages 25 applications. This time it is WYSIWYG editors⁽⁵⁾. I guess this compliments the previous post very well. However, generally speaking I would warn against producing sites using WYSIWYG editors. That said they do have their place. They are useful to give to clients who want to maintain their own sites. They are also good for posting to blogs or other sites where the styling is already set.

It has to be said that I personally code in Dreamweaver, which has a WYSIWYG component. I have been known to use it to find a particular part of the code I want to edit.

A balanced look at flash

Our final news item of the day is a post by Veerle on her blog entitled Does Flash irks me?⁽⁶⁾. It is an excellent opinion piece that clearly lays out her feelings about flash. She explains how she decides whether to use it and dispels some of the misconceptions about the technology.

Her post is very timely coming as it does a week after flash goes open source. It is balanced and her attitude very much mirrors my own (therefore it must be right!). If you view flash as the ultimate evil or alternatively refuse to code in anything else, read this post. It will provide a healthy dose of realism.

Feature: Friendly web addresses

When redesigning boagworld considerable time was spent formatting the sites’ web addresses. Find out why so much time was taken and an introduction to the tools I used in this weeks feature

Review: woopra

When it comes to website statistics Google Analytics dominates most of our thinking. However, there are some impressive alternatives. One I would like to introduce to you is woopra. I give my thoughts to woopra in this weeks review

Listeners feedback:

Creating consistant colors

Anna Joe Writes: I know that the colour of a website will look a little different on every monitor, but is there a profile setting that you use as an ‘average’ setting?

Since I work on Mac with a Mac monitor, I’m afraid most people will see something radically different than me. I have read that Mac defaults are brighter than Windows. I’m using a lot of dark colours, so I am concerned about the site appearing too dark on the majority of computers.

I have a list of colour settings provided on my computer… only one seems to have a Windows-related profile. It’s called ‘Nikon WinMonitor 4.0.0.3000′

Do you have any suggestions regarding this issue?"

I have to confess Anna, this was a subject I knew nothing about before your question. The way that I got around the problem was to look at any design I produced on as many different monitors as possible. To be honest, even after my research I would advise this as the best approach.

View your site on a TFT and an old CRT monitor. Also check on laptops and under different operating systems.

However, based on a bit of reading it would appear that the problem is to do with Gamma settings. Macs by default have gamma correction built in while PCs do not. This causes images (especially photographic images) which look good on a Macintosh monitor to appear too dark on a PC.

Fortunately there is a tool that allows us Mac users to experience the horror of the PC world. It’s called gamma toogle⁽⁷⁾ and can be downloaded for free.

If you don’t have access to multiple machines for testing this would be the next best thing.

Setting up an ecommerce site

Paul East Writes: My girlfriend has come up with an sales idea that would require a simple store front application with the ability to take credit and debit card payments online.

Have you any advice on where to start or any recommendations on store front applications?

We’d like to try and keep start up costs low (we’d like to avoid paying a web designer, sorry!) and avoid eBay type stores if possible for that more professional look.

We’ve done a little investigation on merchant accounts but could do with a good steer on the rest!

Again this is not a subject I k
now a huge amount about. Most of the ecommerce sites I work on are considerably larger. However, hopefully I will be able to point you in the right direction.

First, for the best advice when it comes to setting up ecommerce sites big or small I would highly recommend the ebiz video podcast⁽⁸⁾. These guys really know their stuff and in fact we had them on show 55 to talk about ecommerce basics.

Second, in the past I have come across two simple shopping cart systems that impressed me. The first is FatFreeCart⁽⁹⁾. This simple system can be integrated easily into an existing site. If you are only selling one or two items this is perfect. The alternative is shopify¹⁰. This is a little more sophisticated but incredibly simple to setup and run.

Neither of the questions today are subjects I know much about and I am guessing there are people groaning at my advice. If that is the case, get in touch and we will put you on the show.

116. Back

Posted in Classic shows on May 7, 2008 by Paul Boag

Returning with a new site. Jeff Croft talks about his view on web standards and we discover why the personal website is dead.

Podcast: Download (28.3MB)

Download this show.

Launch our podcast player

News and events

Creating grid layouts

Last month I attended the Future of Web Design conference. The speakers were exceptional, however my favorite was a presentation by Jon Hicks on his web development process. The guys at Carsonified are slowly releasing the videos so it wonʼt be long before you get to watch it yourself.

I find it interesting to see how people work and it is amazing how many new techniques you learn. One thing Jon shared was a Javascript library called GridLayouts that overlays a grid systems on top of your pages. This is useful when creating layouts directly in CSS because you can align elements to the grid.

I have since discovered there is a firefox extension called GridFox that does the same thing.

Flash goes open source

Of course, you might be wasting your time designing with CSS. According to Aral Balkan flash is soon going to be everywhere and is the platform we should now be developing on.

The reason for Aralʼs excitement is an announcement by Adobe that Flash is going open source. Not only will the swf format be open source, they are also relaxing the licensing on the flash player.

All of this is good for the flash platform. Although it is never going to replace HTML, it does undermine one of the main arguments used by its detractors.

Accessibility and AJAX

While Flash gets a shot in the arm its main competitor AJAX is under attack. Brothercake has written a passionate article for Operaʼs development site pleading with us to stop using AJAX.

His argument is that AJAX is immature and unnecessary in the majority of cases. He believes that the accessibility cost of using AJAX outweighs it benefits (many of which are oversold).

I cannot say I agree with everything he has written, but the article does make you pause and consider whether your implementation of AJAX has been entirely necessary. Coming within days of the WCAG 2.0 candidate release, I think this article puts accessibility firmly back on the agenda. It will be interesting to see what affect WCAG 2.0. has on the growth of AJAX and web 2.0.

Developing effective forum leadership

Our final news story is anything but web 2.0. because it focuses on the oldest of community tools, the forum. It is an article by Patrick O’Keefe entitled Develop Effective Forum Leadership.

The article is aimed at those website owners who run larger communities and need to provide guidance to their community leaders. I have worked with so many large organisations who have tried and failed to effectively run communities. Their failure is often down to bad decisions concerning moderation and management.

This article helps to address those issues providing solid advice. If you are a community manager or have clients who run (or want to run) a forum then this is a must read.

Feature: The personal website is dead

This week Zeldman mourned the decline of the personal site. Several responded rebutting the claim. In this weeks feature I explain why I agree with Zeldman but just don’t care.

Interview: Jeff Croft Talks About His View On Web Standards

Paul: OK. Joining me today is Jeff Croft, who no doubt you have heard of. Good to have you on the show Jeff

Jeff: Great to be here Paul, thanks for having me.

Paul: So you work for Blue Flavour, and I have to confess the reason why I wanted you on the show is because you do tend to court a little bit of controversy, shall we say, is that a fair comment?

Jeff: I suppose that’s a fair comment. I don’t necessarily do it on purpose, but it does seem to keep happening!

Paul: Well you say you don’t do it on purpose, but I’ve looked through your blog, and you have some excellent articles on there that are really good and really quite excited me. Not necessarily because I agreed with every word

Jeff: Sure

Paul: But what I like about what you do, Jeff, is that you challenge kind of the standards, you know, you challenge the standard thinking and you kind of come at things from a different angle. So…

Jeff: Right

Paul: As a result of this, you seem to have antagonised a few people, especially in the standards community. Why is that? What have you done and why…why do people find you so annoying, Jeff?

Jeff: Well I was going to ask you that same thing Paul!

Paul: Ha ha ha

Jeff: No, seriously, it’s a good question. Like I said, I won’t ever set out to antagonise anyone. I think sometimes, you know, people take opposing viewpoints on these industry matters, a little personally, that’s, you know, my opinion. I know I write in kind of a pointed way that sometimes is blunt and I tend to be the type of person who doesn’t always have a filter when maybe I should. But, you know, I love everyone in this community, everyone I’ve ever met in this community’s been awesome so I’m not…it certainly isn’t ever personal, but I think, dealing specifically with web standards, it sort of feels a lot like religion to me. Like I sort of see myself as a Protestant of sorts, like I…you know I came up as a firm believer in the dogma of web standards, but more recently I’ve sort of split off from the Church on a few key points, but in the end, I mean Catholics and Protestants are both Christians, right? And we read the same Bible which is, I suppose, designing with web standards, and so you know, just there’s….I usually sort people there’s probably 5% of stuff that I differ on than kind of the purist viewpoints. So I’d see it as a purist versus pragmatist sort of thing
and I like to write about it and I like to write in a kind of a blunt way that I guess sometimes rubs people the wrong way.

Paul: So you’d like to call yourself a pragmatist. Tell us a little bit about where you, you know, what areas you think that other people are being too purist over when it comes to web standards. What are the areas that get under your skin?

Jeff: Well the main thing is just that I don’t really consider…I never think of web standards as the end goal. I think of web standards as a means to the end, and so, you know, when I’m building a website my priorities are, you know, to serve the needs of the client and to create a great user experience, more than my priorities are to validate or to, you know, use all the right ….most semantic elements all the time. I mean I do try to do that, but it’s…those are just in support of the greater goals that I have and I think…sometimes I feel like peoples’ priorities get a little out of whack there, and that’s kind of the purist mentality that I’m talking about.

Paul: I mean the trouble is with writing posts like this, and this is something I get accused of as well, that when you say something like, well web standards, you know, are not the goal, they’re merely a means to an end and all the rest of it

Jeff: Right

Paul: Aren’t you actually encouraging lazy coding?

Jeff: Well I don’t think so. I can see how it seems that way. I mean I definitely do believe that everyone should be writing valid markup and CSS and I just encourage people to remember that web standards are simply tools to advocate, you know, to help achieve the end goal, and you know, if you’re…I don’t know, I guess it’s kind of hard to explain, but if, like…let me use an example. If you’re building a house, I don’t think anybody would have their goal be…I need to use a hammer, and nails and bolts when I’m building this house. I don’t think that would be anybody’s end goal. Their goal would probably be like, I’m going to build a house that is structurally sound and has spaces that serve the needs of the residents and it’s comfortable and it’s aesthetically pleasing. They’d probably have goals like that. And you know, they probably would use a hammer, nails and bolts, but I don’t think they’d probably get so bent out of shape about, well in this house I used, you know, 3½ inch long nails instead of 3 inch nails, but those are the kind of like sort of semantic and pedantic debates that we get into in the industry a lot that irritate me a little bit because I feel like sometimes people just don’t pay attention to, you know, somebody can redesign a site that can be beautiful and amazing, and they make a blog post about it, and they say, you know, this is a new project I’ve done and it’s got all this new innovative stuff and the comments on it are, well you didn’t encode your ampersands and you know, you used too many divs and just to me I’m just like, man you totally missed the point, you totally missed all the great stuff that is there about my site.

Paul: But I mean using your house example that you just gave

Jeff: Right

Paul: I mean, within, you know, construction there are standards. There are, you know, rules that have to be followed and it may be the case that the person that’s getting their house built for them doesn’t…don’t particularly care about those things, you know, they care about the aesthetics, they care about the living space, they care about that kind of stuff, but somebody has to care about, you know, the fact that it’s built to Fire Regulations and things like that. Is that not our job as a Designer to worry about things like that?

Jeff: I think it’s completely our job, I just think that it is our job to …to do those things and to create great user experiences and have beautiful designs and…and it’s mostly just a priorities thing, like it’s just…I think all those things are important. Validating and creating, you know, writing semantic mark-up, all these things are important to me, they’re just… they’re just tools that I use to reach greater goals is all….and I think some people in our industry have turned that around to where they are more interested in writing valid code than they are in creating great experiences.

Paul: Mmm. So do you actually think that there are situations where the, you know, these different objectives come into conflict, because you know, I can’t say that in my experience there have been many situations where you know, I’ve gone, you know, oh I can’t do that because it’ll make the code invalid or whatever, you know, where…or where, you know, I’ve had to over-rule a client because I feel that it would compromise, the, you know, the semantics of the website. They don’t often seem to come into conflict, but I mean do you disagree?

Jeff: No,….no I agree, they’re very rarely in conflict if ever. It’s…you know, it’s more what irritates me and what I have talked about is more it has to do with the discussion and the kind of….community, you know, within the web standards community it’s not something that really affects client work too much or anything like that, it’s just I want to talk about some other stuff; I want to talk about design and I want to talk about users and I want to talk about community and networking and bringing people together and sometimes I feel like those conversations can’t be had because they’re…because as soon as somebody starts to talk about something a little bit more abstract and conceptual, people derail the conversation by saying, again, like your ampersands are unencoded, or you know, why did you use all these divs when you could’ve, you know, been more semantic, or you know, whatever. So….it’s more about the conversation…yes

Paul: I’ve got to say, I can associate with your point of view, I mean at the moment I’m re-building the Headscape website, our corporate website, and you know, although obviously I should primarily be thinking about the client all the time and potential customers that are coming along to the site, after all, that’s the target audience, but you can’t help but almost be a little bit afraid, you know, that …oh is this code of good enough standard, are people going to criticise this, that and the other, and really you shouldn’t have to live your life in fear of what your peers will say.

Jeff: Exactly, that’s exactly wha
t I think.

Paul: But I mean from the point of view of…we were talking about lazy coding weren’t we, and about, you know, does this encourage lazy coding. You guys have taken an interesting position at Blue Flavour, and I have to say this…this is something I think I probably disagree with, which is that you guys use Blueprint, which is the CSS library, actually in a production environment. That’s interesting that you take that point of view. Explain a little bit about how you came to that…that point, you know that position.

Jeff: Well…well first of all I was sort of involved in the creation of Blueprint. It was…I was accidentally involved; I didn’t mean to be, but at my previous job I had…I had created a sort of CSS framework for us to use internally, it was a media company, a newspaper company and we had several different newspaper sites. They were all similar and we had a team of designers and we wanted to just sort of standardise on some….some class names and just some ways of coding things across our sites and across our team, so that you know, we would all kind of be on the same page, and I wrote an article on a A List Apart about that process and somebody found…somebody went and found that code and wrote me an e-mail asking if they could use it, and I said sure, I can’t support it, but if you want to use it, go ahead, and thinking that they were probably going to use it on their personal site or whatever, and it turns out what they’re actually going to do is build Blueprint. So that’s kind of how the whole thing happened and…so that’s how I got involved in it and I gotta say before I go any further that since then, Blueprint is very different from what I wrote and there’s been a lot of changes, and a lot of them are good but a lot of them I don’t like too, so I don’t….at this point in time I’m not as sold on Blueprint as I was three or four months ago just because of some of the changes they’ve made. But I think the reason, I mean the justification to me for using Blueprint or any CSS framework like that is the same justification that you would have for any Open Source project. It’s really good CSS written by smart people that has been tested by the masses, it’s constantly being updated, having bug fixes applied, and you know I believe that most of the time the Open Source community is going to be able to write better code than you or me or any one individual person, so to me that’s the justification, it’s the same reason I would use Apache or Django or Rails or Linux or anything Open Source because it’s just been proven time and time again that….that Open Source methodology works for having good code.

Paul: I mean, I have to say, I had a look at it and played with it for a bit, and I’ve got to say that for some stuff it was very impressive, you know, if you’re putting together wireframes or, you know, doing initial production work then I can see a value in it, but I think what concerned me was some of the limitations surrounded the fact that, you know, it’s designed primarily for a fixed based site, but also…sorry, is that…am I wrong?

Jeff: No, no, you’re absolutely right, although I think adding liquid is on their ‘to do’ list, but yes,

Paul: OK. And then…I mean the other thing was that, you know, I’m trying to avoid using the word ‘semantic’ in order not to get in trouble with you, but I mean the thing that did strike me with it is that there were a lot of class names that you were having to put in, you know, which is fine, you know, I can accept that, you know, it’s not the end of the world if you do that, but you know, if it’s a site that’s going to be around over the long term, I just felt it was a little bit of a second-rate solution for probably the type of clients I do. Now I can understand that if you’re doing, you know, a lower…you know, lower end work, smaller websites, with less of a budget and you need to turn things around quickly then this is better than not using standards at all, but it just felt a little bit of a lightweight solution. Am I being unfair to it?

Jeff: Nope, I don’t think you’re being unfair at all. I think you’re absolutely right and I think, you know, I mean at Blue Flavour, we have used Blueprint before, we don’t use it all the time, and it is…we do tend to use it in those situations where we have a very tight timeframe or a very tight budget, and just need to get things done and get them out the door as quickly as possible. Because like you said, I mean we think it’s a good solution that is better than not using web standards at all, but it’s…it’s never going to be as good as hand-crafting every line of code for, you know, for the particular project. We recognise that, but it’s, you know, sometimes in the real world, when we have deadlines and clients and budgets, sometimes just getting things done on, you know, an efficient way trumps being absolutely perfect every time which is again that pragmatist versus purist sort of view.

Paul: I mean it felt like a bigger compromise, and maybe…I’m using some other, you know, frameworks and libraries, you know, I just jQuery for example in JavaScript, and this felt more of a compromise, more of interfering with the kind of underlying content of the site, and that’s what I was probably slightly uncomfortable with, was the idea that, you know, the content would be in some ways compromised if the site was going to be around a long time, you know, if it was a shorter term project that maybe wasn’t around as long, then the fact that the content is somewhat compromised maybe is not as big a deal.

Jeff: Yeah, well I think, you know, when you were saying that I was thinking, you know, like you use jQuery, so do I. I think there’s a certain…like…those of us who are not great JavaScript people will lean on these frameworks, whereas I bet JavaScript gurus sometimes have the same feelings like about…it being a compromise when using one of those libraries, you know, and there’s probably people in the Ruby community that say, ‘oh, I’m not going to use Rails, it’s a compromise’, because they really know the ins and outs of Ruby or they really know the ins and outs of JavaScript and we really know the ins and outs of HTML CSS so yeah, I wonder if it’s always …these kind of libraries are always going to be a little more popular with people who are…who are like have to use CSS but it’s not really their primary area of expertise.

Paul: So what you’re implying is that I’m a snob?

Jeff: Sort of!

Paul: Ha ha ha…..that’s fair enough, that’s OK. I don’t mind being a snob! So I’ve….so moving on from that then a little bit

Jeff: OK

Paul: Now I’ve read some stuff that you’ve written before critical of validators and you know, some of these automated validators that are out there. Maybe tell us a little bit about why you’re critical of them, why you feel so anti towards them?

Jeff: Well it’s not so much that I’m opposed to the validators, I mean on the contrary actually I use validators almost every single day. What I’m critical of is the way people use them sometimes. I think that, you know, validators are there for…as a tool to help you de-bug during the development process, you know, you have some problem on your page and why isn’t it working? When you validate you find the error and then that helps you move along to solving it. But what irritates me is the use of validators as sort of in unprovoked attacks on other peoples’ code, you know, where again, it’s kind of that same…that same mentality of somebody launches their new site and the first thing somebody does is view source and validate it, so that they can then make a comment that says, you know, this is crap, and that is…that is really irritating. I feel like there’s almost never any reason to validate someone else’s code, I mean unless they’ve asked you to, I can’t understand why….it’s just that mentality of the first thing you do when you get to a site is view source is a little baffling to me, because I’m…I’m more interested in the design and the functionality and what are they doing here that’s new and interesting.

Paul: I guess…but that depends…surely that depends on your priorities, I mean…you know, I find it quite interesting to look at other people’s code and how they’ve built the site. It doesn’t necessarily mean I’m going to validate it.

Jeff: Right, and….no and I mean that’s fine, I do that at times as well and that’s certainly how I learned a lot of what I know, but I don’t do it with the intention of then picking apart every single error they made publicly, which is really the thing that bothers me.

Paul: I have to say the other thing that concerns me a little bit about this is I’m starting to see more clients going and viewing source and validating websites and you know, it’s quite difficult, because I mean obviously like yourselves, we kind of sell ourselves on, you know, being standard based designers and produce good quality code and all the rest of it; it’s part of our sales package. And you know, when a client goes along and validates one of our client sites and it’s invalid, you know, you feel like you have to defend yourself in some way, but, you know, there are good reasons why a site won’t validate sometimes, and…and certainly once a client starts using a content management system you can pretty much kiss goodbye to it can’t you really?

Jeff: In many of them, yeah.

Paul: OK. That’s…it’s interesting to hear a little bit about the way that you operate and the kind of priorities that you have at Blue Flavour. In some of the posts that you’ve put up, I mean you were kind enough to send through a big bunch of your more controversial posts to me which was good. And I was reading through some of them, really enjoying them by the way, but there seemed to be this kind of under-lying current that maybe standards and even the W3C to some extent, a kind of stifling innovation. Where does this kind of feeling come from, you know, is that something you really, really believe and what makes you believe it?

Jeff: I would say again it’s not so much that I think that the W3C themselves or the standards themselves are stifling innovation; it’s the culture of compliance that is around those standards and around the web standards community to where people are so obsessed with being valid and being compliant all the time that they…you know, they tend to…I think it even extends past actually writing mark-up or writing CSS to where people just keep doing things the same way that everybody else is doing them or the way that Jeffrey Zeldman told them is the way to do things, or whatever, and it just kind of….they just keep doing things the same way and not innovating as much as I would like to see. Now I say that, and I…but I know I probably do the same thing myself, like I don’t…I’m not always incredibly innovative either, so…so it’s kind of, you know, it’s a balance there. But I think….I think also, I mean…and this might be a little bit of difference in my viewpoint too, is when I really thing of web standards, the web standards movement, I think about the browsers. I think the…gold web standards movement was to get the browsers all rendering standards correctly and supporting standards, which for the most part has been done, I mean granted there are still little problems here and there, and IE isn’t totally there, but at least we know that they’re on board now. I don’t think of web standards movement so much as being a thing where we’re getting the developers all on board. I mean I guess that’s part of it too, but when I think about the web standards movement when I was, you know, when I was first involved in it four or five years ago or however long it was, to me it was all about the browsers, and so, you know, today I think there’s a sort of chicken and egg problem where…browser makers could be innovating and doing cool new things and the one that consistently has done cool new things is Webkit in Safari, I mean they’re adding the CSS3 properties and they’re adding, you know, they’re coming up with properties of their own and adding them and they’re…and they’re doing it, I mean today we have this name spacing, right, where they can say, you know, it’s going to be hyphen webkit hyphen border radius or whatever, so they can keep it out of the, you know, it’s got its own name spaces, kept out of the global area so it doesn’t conflict with anything else, and I would just like to see a lot more of that kind of innovation from browser makers where they’re trying these new things, they’re throwing them in, they’re letting developers play with them, and like I said, it’s kind of a chicken and egg thing I think where the browser makers would like to do this maybe, but they’re afraid of the backlash from the standards community. If they’re adding new properties that aren’t part of a spec, you know, the standards community is…has proven that it’s going to backlash against them and it’s going to say, ‘why did you add this, this isn’t in the spec’, and so then they don’t do things, but the developers and designers also would like to try new things but…so it’s kind of a chicken and egg thing there a little bit I think. So that’s the…that’s the main …the main plan I have on that, and the, you know, like there are examples, like X….sorry, XML HTTP request or Ajax, you know, was a pr
oprietary IE property that they just put in, and eventually got standardised, and that’s kind of the way that I would like to see it go more is where the browser makers are doing new things and then we’re trying to standardise them, which is the opposite I know if, you know, some really respectable people and friends of mine like Jina Bolton and Andy Clarke which see that it should go the other way, which is that specs are written and then browser makers standardise on them, so…

Paul: Yeah…I must admit, listening to you talk kind of fills me with a certain level of dread, to be honest, when you talk about browser manufacturers. You know, I studied…I studied designing websites back in ’95, and you know, and so I lived through this whole period of time where you have browser manufacturers, you know, introducing all kinds of bizarre tags and it was absolute chaos, you know, and you didn’t know what was happening on what browsers. What’s to stop that happening again, beyond the standards community growling in the corner aggressively?

Jeff: Yeah, well I mean that…I mean I was there for that too. I studied also in ’95 and yeah, it was pure chaos. But I think, you know, I mean first of all I think the standards community has made a lot of inroads to where these, you know, I don’t think it would be complete chaos simply because we understand the value of standards now. And there are some…there are some mechanisms in place like the name spacing I’m talking about, where they can do these things and keep them from conflicting with other…so when …when WebKit decides they’re going to add border radius property, they can do it under dash webkit dash border radius, so that if anybody is actually using the real border radius without a, you know, prefix, you know, there’s no conflict, so I think, you know I just feel like there’s some mechanisms in place that would keep it from being so chaotic and the value of standards we’ve learned through the web standards movement, you know, and the browser makers are now on board with the idea of inter-operability, I think would keep it from being so chaotic, but I guess I don’t know for sure. It is…it’s definitely…there’s definitely a balance there because I definitely feel like the browsers have not been doing as many new things as they did back in those days, but those new things did cause problems too, so it’s, you know, but as a Designer I sometimes get bored, I’m like, I’ve played with all that stuff; I’ve played with all the tools we have and I want to try something different, you know, I want something that will…I want advanced grid positioning and, you know, I want to be able to draw shapes and, you know, it’s not out there.

Paul: I mean that is the only trouble I guess with…you know, you were talking about innovation and we need to be innovating more as Designers as well as browser manufacturers. The trouble with innovation to some degree is that you’re always in danger of undermining users’ expectations. I mean this is something you hear someone like Nielsen go on about loads. How…where do you feel the balance is between kind of doing cool new stuff and…you know, not undermining users’ needs or expectations?

Jeff: Well you’ll probably remember from back in the late ‘90s and that sort of thing that there was….and another sort of interest of mine is the sort of demise of the personal website, but back in those days, there was just so many experimental kind of crazy out there personal projects that were happening, and I think that that is a great place to try those things, because they’re not…they’re not real users accessing them; people that are using them are, you know, expecting that, I mean that sort of thing’s a great place to try new things, is on personal projects. Now again, with the culture of compliance that we have, I don’t know how that would fly today. Like if somebody made some crazy experimental site, I think there’s a certain fear of doing that because of backlash again from the web standards community, like you know, it’s a thing where people aren’t seeing the…the meaning, you know, it’s…I’m putting this out there because I’m trying to do something new and difference and …and it’s almost not allowed by the web standards community. Well, you can’t do that, because it doesn’t validate, or you know, whatever. And again, like I said, that’s not always specifically about validation and mark-up. It goes onto the…to that …into usability and into layout and design where people say, don’t change that because it’s messing with users’ expectations, but I think there are places where you can try those things and personal projects to me are the big place where you can try that.

Paul: You’ve got a good point about personal website. It’s like everybody now …have…you know, it’s all about blogs isn’t it, it’s all about….there’s almost this kind of citizen journalism thing where, you know, we’re all actually trying to create a little audience for ourselves and so therefore we don’t want to do anything too dangerous with our…with our personal sites. I remember my….my first personal site was absolutely chaotic, you know, it had no proper navigation whatsoever, but it was fun, it was a place I could experiment, so yeah…

Jeff: Yeah, that’s a real kind of…pet annoyance of mine is that …the loss of that, and I do think, you know, it’s because everything’s a blog, and I love blogs, and you know I have a blog, but I still wish that there was just a little bit more of that crazy experimentation that we had going on back then.

Paul: Mmm. I mean it’s a good point as well. A question I often get asked by people is, you know, how do I promote myself online. They say, I don’t want to…I don’t want to run a blog because I don’t want to write. Well you know, a personal project in a way you’re trying out different things like a sandbox you can play in. It’s a good way of promoting yourself and showing what you’re capable of, and that you do innovate without having to write reams of stuff, because let’s face it, not all of us are big writers, so….yeah

Jeff: Right.

Paul: Good to have your perspective on things. It’s really nice to have a kind of new perspective and you know, a different point of view, so great to have you on the show, and no doubt we will get you back in again in the future. Good to talk to you.

Jeff: Great. Thanks so much for having me.

Thanks to Anna Debenham for transcribing this interview.

Listeners feedback:

Getting a site
off the ground

Shaun writes: Following the headscape redesign and promised boagworld redesign what tips can you give to getting a personal/own site off the drawing board/local machine and actually published.

The problem with internal projects is they lack motivation. They are never as important as client work because they donʼt directly generate income. The answer is to increase their perceived importance. I use a number of techniques:

Document the benefits to your business or personal profile.
Produce a statement of work just as you would an external client.
Price the project so that you can set it against your targets as a marketing cost.
Set a deadline and preferably announce that publicly so you are forced to meet it.
Block out time for the project rather than attempting to “fit it around” client work.

Ultimately it comes down to determination. However, knowing the value of the project and treating it as any other project really helps.

Testing

Erich writes: Thanks so much for the show, all the work you guys put in really shows. It is great learning about aspects of the business that I donʼt get to deal with much.

I was just wondering if you guys had any kind of a testing station at Headscape. We are looking at putting something like that together at my work. Somewhere you can just go sit at and run through all the browsers, maybe even some with different versions of flash and such. Do you guys run anything like that?

Because our designers are based remotely it is not easy to have a central testing suite. We did try that at one stage but it did not work. Connecting remotely wasnʼt as smooth as it should have been and we found multiple designers often wanted access at the same time.

Currently, each designer runs a number of virtual PCs on their individual machines. Most have two versions of XP one running IE7 and one with IE6. We also run multiple version of Firefox and Opera. Most of our designers also own macs allowing them to test Safari. Those that donʼt connect to a mac in the office.

To be honest our testing environment is not the most sophisticated. Most clients do not want to pay for testing against minority browsers and when they do we setup something specific for their needs usefully using a virtual machine. If you are interested in setting up your own Virtual Machines then I recommend VMWare Fusion⁽⁷⁾ for the mac and Virtual PC⁽⁸⁾ under windows.

Behind the Boagworld

Posted in News on February 28, 2008 by Paul Boag

As promised here is the video we shot a couple of weeks ago talking about the making of boagworld.

A special apology to Mr Hicks for the poor way this video introduces the new Headscape logo to the world. I am sure we should have done some big professional launch instead but we are just not that organised.

113. Hiring

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

On show 113: Christian Heilmann on common Javascript mistakes. Marcus talks about hiring new staff and Paul shares his journey into screencasting.

Podcast: Download (29.9MB)

Download this show.

Launch our podcast player

News and events | Hiring new staff | Christian Heilmann on common Javascript mistakes | Listener emails

A quick request. We are really in need of some more transcribers to help with the interviews we do every week. The team we have are doing an amazing job but it would be great to spread the load.

If you feel you could help once in a while please drop me an email and I will add you to the list.

News and events

Highly extensible CSS

A while back Cameron Moll released a tantalising screencast of a seminar he was running on Highly extensible CSS. Website today need to be ultra-flexible, dealing with changing content, multiple devices, and user customisation. Cameron’s presentation aimed to teach designers and developers how to build interfaces capable of adapting to the unforeseen.

Unfortunately, I didn’t get the opportunity to attend. I was therefore excited to discover that Cameron is about to cover the same subject in a series of four posts on his website, all for free!

So far he has only posted the introduction. However I am really looking forward to the whole series. For now just check out the screencast and see if it excites you as much as it did me…

Video tools

Talking of screen casts I have actually been working on several myself at the moment. We are in the process of redeveloping the Headscape website and have decided to include a couple of demonstrations and presentations.

This means I have been in research mode and I thought I would share what I have found. Firstly, I have discovered a great screencasting tool called Screen Flow. This Leopard only software stands head and shoulders above anything else I have tried on either Windows or the Mac. It is amazingly easy to record and edit your screencast and has some great built in effects. My favourite feature is that it will capture from both a web cam and the screen at the same time. This allows you to cut between video and the screen or even overlay a video feed on top of the cast.

Once I had recorded my video I started to look for somewhere to host it. Although I would be foolish not to put it on Youtube where it will get the most exposure, I didn’t want to use Youtube when embedding on my site. The quality on YouTube is poor and you are limited over length and size. With this in mind I looked at a number of competitors. The winner for me turned out to be Vimeo. The quality is superb, they are much more flexible over length and time, but most of all they provide links to the original file and allow you to customise the interface.

So, if you are looking to create a screencast I highly recommend Screen Flow and Vimeo. Also, if you are looking for tips on how to make an engaging video then check out Ryan Caron’s tips over at Carsonified.

Microformat boost

The last thing I want to mention in this week’s news segment is the growing interest we are seeing in Microformats recently.

For a start Firefox 3 is going to have built in support for Microformats, which will be hugely significant in itself. However the guys over at Yahoo! are doing some interesting stuff in the area too. Yahoo! Micro Search is a new way of viewing search results that include all kinds of metadata including microformats. According to David Peterson at Sitepoint this could allow Yahoo to really challenge Google.

I am not sure whether that is true or not, but I do know it is a great time to start using Microformats. If you want to get started then check out Microformats.org or for you more advanced users have a look at this interesting demo of compound Microformats.

Feature: Hiring new staff

Marcus shares his thoughts about taking on web design staff for the first time.

Expert interview: Christian Heilmann on common Javascript mistakes

Paul: As I said at the beginning of the show, joining me today is Christian Heilmann. Hello Christian, how are you?

Christian: Hello Paul. Why it’s quite fun cause it’s Valentines day & I’m stuck with you as a date.

Paul: Well I’m sorry that you had to ah to endure me on Valentines Day but I’m sure you’ll survive. And um yeah… so basically, the reason that we’ve got you on the show today is we want to talk a little bit, a little bit about javascript. Now we’ve talked a lot of times about javascript before and it’s not a new subject, but I kind-of um… felt it would be worth touching on the kind-of common mistakes that we’re seeing a lot in the world of javascript at the moment. I think um… you know obviously javascript is very in and there’s load of cool stuff being done with it but not always in the wisest ways. Um… and then on top of that, so there’s this kind-of group of people that are doing quite advanced stuff with javascript with maybe not considering all the ramifications of what they’re doing. And there’s another kind-of group of people which are people like myself that go ‘Ewww… look at that, that’s cool I want to start doing things like that.’ And so you know a little, a little knowledge is dangerous as they say, and you know we’ve picked up books like Jeremy Keith’s scripting book and read that and now we think that we can, we can build javascript applications and are kind-of hacking things together. So I thought lets spend a few minutes looking at those, those kinds of issues. So um um… maybe probably a good place to start off if you don’t mind Christian is what advice you’d give to somebody starting to learn javascript so that, so that they kind of avoid some of these mistakes you know from the get go. What good principals, good foundations should they be working on?

Christian: Um… the main foundation is that javascript is a language in its own rights. It’s uh uh… you can not take any other knowledge and try to apply it on to javascript and this is where the two angles actually come where people that come from a higher programming language background trying to find the same principals that apply there inside javascript

Paul: Um hum…

Christian: Or people that come from CSS design background, basically think that it’s as easy as applying a CSS selector to an element that everything will be matched magically…

Paul: Yeah…

Christian: … and not realizing that there is an impact on speed and an impact on how the browser actually finds these things and what kind of mistakes the browser does. The main thing to remember about javascript is ah… there are many different ways of javascript, there are many different environments where it’s applied. So there is lots of really clever things being done right now with javascript, even on the service side and inside frameworks and inside API’s. But there’s also, in the end you would run it in a browser sooner or later. And if that’s where you are going to work the best advice is actually to not trust javascript ever and to actually um… enhance with it but not really rely on it.

Paul: Um hum…

Christian: So if there is a window print link, then this link should be generated with javascript and not just be an ‘href’ javascript window print because if somebody doesn’t have javascript or for some reason javascript’s broke, or the engine doesn’t work in your environment then you click the button and nothing happens. And there’s nothing worse than uh promising an end user something that you don’t deliver in the end.

Paul: Yeah.

Christian: The other thing is that uh… when you start from javascript, one of the first things to remember is that you should always learn the if statements and learn that they’re your best friend. Like never do: ‘apply something’ BUT IF ‘something’ THEN ‘apply something’. So if you…

Paul: Umm…

Christian: Try to access a heading with an ID for example, and then you don’t just do: HEADING ID ‘something’ = ‘something’… cause it might not be there.

Paul: Yeah.

Christian: So basically test for it, before you apply it. When you follow this principle through with all of your programming, this kind of defensive programming, then you will (we will) definitely write good javascript in any programming language really. Over the years when you get more and more experience you just learn more and more ways how the technology that you use fails…

Paul: Mmm…

Christian: …rather than actually succeeds. So you learn how to avoid the biggest pitfalls.

Paul: I mean, you always hear this thing don’t you about um… that not all browsers support javascript or that not all users have javascript turned on. I mean how real a problem is that? Is that being overly cautious to worry too much about that kind of thing or is it a real problem? Are there actually a lot of users out there that… that don’t have javascript for one reason or another?

Christian: It’s impossible to say. Its statistics and it’s a bit like flash. When you when you look at flash statistics and you hear like a 99% have it enabled on the Adobe side, then you’re like ‘Oh yeah really.’ because these are the only stats that you find…

Paul: Um hum…

Christian: …the company that delivers that is a bit like… yeah, I think that the Microsoft help pages with have a lot of hits from people with Windows.

Paul: Yeah.

Christian: So um… it’s not really a problem I don’t see the problem at all. I see the problem of people… uh, architecting and designing applications around the premise that javascript will be there, and everything will be happy and work.

Paul: Mmm hmm…

Christian: If you write your applications like javascript does not need to be there, but is nice when it’s there and actually makes it a lot smoother, then you don’t have a problem…

Paul: Mmm…

Christian: I don’t buy this whole argument of like… oh AJAX is so cool because we don’t’ have much traffic on our servers any longer. It’s like yeah, but you never know the environment that javascript is run in. It could…

Paul: Mmm…

Christian: …my mobile phone, it could be it could be an iPhone, it could be it could be an old browser. I just bought myself this eeePC that doesn’t have much memory. It’s uh… you can never expect the end user to actually cater their hardware to your needs…

Paul: Mmm…

Christian: So it’s pretty… it’s pretty unsafe to actually rely on it. So even if the statistics are ridiculously low, it doesn’t really matter because you don’t want to deliver a bad practice and deliver a bad experience to users.

Paul: Mmm…

Christian: And then there’s, of course, the SEO problems as well. If you have a navigation that’s dependent on javascript and doesn’t show anything – or you make elements clickable that shouldn’t be clickable, then you won’t have search engine spiders following these links and your sites won’t be indexed.

Paul: Mmm…

Christian: Same with accessibility. When you make something clickable that is not clickable by default, like a ‘span’ or a ‘div’ or whatever, then you can not expect a user agent actually to allow people with assistive technology or people that use a keyboard to use the same application because browsers are just not clever enough for that.

Paul: Mmm. So what about people, um… starting out as absolute beginners – what are the most common mistakes you’re seeing them make when they start out doing javascript?

Christian: A lot is copy and pasting and hoping that nothing breaks…

Paul: (Laughs)

Christian: …and ah… also um… a lot of it is skimming tutorials. A good tutorial writer will tell you a lot in the paragraphs between the code examples.

Paul: Mmm.

Christian: And um… just going through the code examples and trying to figure out what’s going there yourself and copy and pasting it does not really make you a good developer. This information was put there for a reason and actually explains you the smaller bits that you need to know about the language. ‘Cause most of the javascript errors that actually happen in the real world is not because you did a coding mistake, but because you made an application mistake that you expected a browser to do something. Or you expected an application to give you the right information back, where as you didn’t test for it. So um… I think trusting tutorials and uh… just copy and pasting code without actually knowing what it does is a very dangerous thing.

Paul: Mmm… Would you apply that same principal to frameworks? You know and not under… if you don’t understand what a framework is doing then it is probably best to avoid it.

Christian: Well it’s a matter of what it does. I mean uh… the last few years in web development have become a lot more transparent than before and that’s… Firebug is actually to blame for that.

Paul: Mmm…

Christian: It’s great because you can look at code that is generated by javascript or a backend application and you always know, you can always analyze the whole document ñ what’s doing on there if you know your Firebug. That’s another thing that I would actually tell any developer that would start with javascript to get his head around it’s like java… uh… Firebug is a great great way to learn from other people’s mistakes and also to monitor what’s going on in your scripts all the time. When it comes to library’s, that’s a bit of a different story because um… I had a bit of foot in mouth moment there when I proclaimed in the past that most library’s are bloated and unnecessary and um… now I am part of a library…

Paul: (Laughs)

Christian: …and uh I’m also I also talked to media AJAX to a lot of library developers and I realized that all the libraries do the same thing. All of them actually make the pain and the uncertainty that is browsers out there bearable for you.

Paul: Mmm.

Christian: So um… if you don’t understand what the source code of jQuery is, or the source code of the YUI is that does not mean that you shouldn’t use it.

Paul: Okay.

Christian: Other people have had that problem before you and loads and loads of people find bugs and submit bugs and help these libraries get better. So now a days if you are a new javascript developer I would basically say that you have learn the syntax, you have to learn the standards like what does DOM scripting mean, how does event handling work – but by all means if you go into a production please please use a library.

Paul: Oh okay.

Christian: Because that one take the cruft of all the fixing and uh… hacking that you have to do to make something work away from you.

Paul: Mmm.

Christian: It’s a matter of what you do. I mean if you’re doing a high traffic Twitter clone, or whatever, that runs an error application then you might have to these fixes – but you’re not necessarily going to do that as a new beginner.

Paul: Okay yeah… that that’s a very different opinion than I’ve heard in the past and it’s quite interesting to hear the other side of the argument. It’s good. So what about… what about dangerous people like me? So you know… where I knew nothing about javascript but I decided: ‘Yeah, I really need to learn this’. So I got a couple of books, I’ve read a couple of books and I’m kind of up and running but I’m not… you know I’m not a developer. I’m not somebody that’s an expert. You know… what other kind of common screwups you’ve seen people like me make?

Christian: Um… It’s tricky to say. It’s like most of the time, what these kind of people do is also try to solve problems that other technologies have with javascript.

Paul: Mmm…

Christian: Which is sometimes cool, but sometimes it’s also thinking about there’s a reason why that doesn’t work. So um… I mean the classic is… the classic is like rounded corners and things like that. There are loads of javascript rounded corner solutions which on the outskirt look like they are really clean solutions. This is also might be to put a class on a ‘div’ and to put a bit of javascript in and then everything has rounded corners and there’s no harm done.

Paul: Mmm.

Christian: That the javascript needs to inject a lot of HTML and probably is slow doing so. It’s the other side of the story it’s uh… I think people like you, that are just enthusiastic about it and basically want do it are not necessarily savvy of the implications that it has.

Paul: Yeah.

Christian: So the uh… the information that we need there is that we need a lot more tutorials on um… how javascript impacts performance. And we are starting with that already in the development network and other people are doing that as well, but there are lots of mistakes being done as well there. The other problem that I see with people that have just started with javascript, is they apply… they find one solution, they find one library then they become the biggest fan of that library then everything else is rubbish.

Paul: (Laughs)

Christian: And uh… that is a very dangerous attitude as well because you will not be, you will in your career work for different clients that will use different libraries as well. So you shouldn’t make yourself dependent on only one but understand what the benefits of each of them are and where you should apply them.

Paul: Um huh.

Christian: And how they actually make your life easier, or how they make your life less easy, than another competing product. So the implications there is that a lot of people use these newer libraries, or newer ways of using javascript, to actually make javascript behave like their favorite language or their favorite technology. That’s why people went nuts with every javascript library came up with the CSS selectors.

Paul: Yeah.

Christian: And that’s great because now I can go fifty levels deep in my CSS selector and the javascript finds what’s in there. While this is already an indicator that your HTML is not necessarily good structure

Paul: (Laughs)

Christian: …and it also means that if you change your HTML in the future you also have to change that path, or if you don’t change that path then your javascript will break.

Paul: Yeah.

Christian: And a lot of libraries break silently as well. So instead of just getting the error in your face that you’ve basically screwed up, you will not know what’s going on and will wonder what’s going on.

Paul: Mmm.

Christian: And when that happens that’s normally when people, like you, fire up emails to the library developers and tell them that their product is rubbish.

Paul: (Laughs) Yeah… I can’t disagree with that. That’s the kind of thing that I’d do probably. Um… what about, I’ll tell you the one thing that I’ve come across is that… I’m kind of competent enough to write functions to do a lot of the things that I need to do. Nothing really complicated, I couldn’t build anything too sophisticated, but you know enough to get me by. But then as I’m kind of looking at other people and what they’re doing um… a lot of them are using object orientated type techniques in the code that they are writing. There’s me hacking away with little functions and there seems to be some transition across object orientated approach when you kinda hit a certain level… you know why, what’s the benefits of that? Why do people take that kind of approach?

Christian: (Laughs) Um… It’s been very beneficial in other languages, and other environments, especially when the environment is rather sophisticated.

Paul: Mmm.

Christian: Then ah… you seen for example action script. Action script has been as much as a hacky javascript. Yeah, look what I can do if I do it this way language and now with the Flex frameworks, and Adobe opening up more and more to the java world, um… it’s getting more and more into structured ways. And the structured ways are hard to understand for somebody who is not from that background.

Paul: Mmm.

Christian: And I can safely say that, I’m not myself. So I um… I have a lot of problems with like properly, or massive structures, and frameworks. But when you see people do proper action script, for example, or do Rhino applications for the server in javascript, or some of the things that are happening with javascript 2… that there is a reason for that and the reason for that is the scalability is just so much bigger.

Paul: Right.

Christian: It’s uh… basically you can extend an object and I can reuse a class and I don’t have to worry about that. It’s like I start building these little small components, all of them in themselves tested and unit tested, and I know they work. And then I can build a bigger application from them.

Paul: Mmm.

Christian: Basically without really needing to know to test these things ever again.

Paul: Yeah.

Christian: That’s how things like PEAR and PHP and Perl libraries work as well. It’s people extending these kind of already existing bits, and bobs, rather than starting from scratch every time.

Paul: Mmm hum.

Christian: Most of the time for the little web development things that we do like the AJAX form or the Constentina navigation that’s not necessarily needed, but when you write a library for example, and it grows, like YUI is growing or like jQuery is growing as well… then you need to adhere to these standards ’cause otherwise everyone will just submit their own code in forms that are just terrible.

Paul: Yeah.

Christian: And there’s not much magic to it. I mean I get annoyed when I see javascript guys going on stage and saying like: ‘Well guys, this is a function and when it’s an object it’s a method and…’ and why should I know this? Well you should know this because you need to communicate with other developers as well sooner or later.

Paul: Umm hmm.

Christian: And these people speak that lingo and rather than you having to explain yourself for 15 minutes you could communicate in 3 minutes.

Paul: Mmm.

Christian: And that gives you more time for lunch break.

Paul: (Laughs) …or drinking…

Christian: So the worlds of hard core programming and javascript are actually getting closer and closer and seeing some of the things that browser vendors come out with and some of the other software that builds on web technologies that is being built at the moment, I don’t think that we can actually rely on our being the cool cookie web developer anymore.

Paul: Mmm.

Christian: It’s a bit like we have to have broaden our horizons the same way that backend people have to broaden their horizons when it comes to using javascript, but you can only make someone understand your problems when you understand how they tick.

Paul: Mmm.

Christian: Otherwise you start preaching to the choir.

Paul: Yeah. Okay here’s the last question to wrap up with. I’m going to open it up and let you rant uncontrollably. What are the worst mistakes that you’re seeing at the moment made with javascript, just generally.

Christian: Uh. The worst mistakes that I see are that people write little scripts for tasks over and over again.

Paul: Okay.

Christian: The same task and I see them actually tying the interface a lot to the javascript. So…

Paul: What do you mean by that?

Christian: Instead of making a javascript that actually creates the things it needs, there will be HTML that is just not necessary where the is not javascript available.

Paul: Okay yeah.

Christian: So instead of starting with the proper HTML and CSS structure, you basically have this whole gumph of HTML because there’s the javascript to clean it up anyways.

Paul: Yeah.

Christian: So um… basically the main tip is you will never ever be able to replace a proper HTML structure. It doesn’t matter where technology is going because technology will go away from that sooner or later, but at least a human could actually go there and see that there is a structure.

Paul: Mmm hum.

Christian: And that there’s a way to convert this to something better in a second step. If you’ve created a lot of spaghetti code with like HTML and javascript mixed in and lots of little scripts in there, then you will never be able to convert that to something better in the future and this is what we’ve been running in circles for years and years. We’ve never been improving things, we’ve just been fixing things and adding little bits, and bobs, to it.

Paul: (Laughs)

Christian: The other thing that I keeps seeing is well the fan boy thing, about javascript libraries and of the academic way of some people measuring javascript. You have all these like, I mean there’s people that spend like weeks finding different javascript includes and script libraries and measuring how fast they are on their computer…

Paul: (Laughs)

Christian: …generating twelve thousand objects and trying to put them on dominoes. Show me the application that needs that done, then your comparison actually makes sense.

Paul: Yeah.

Christian: It’s the same as CSS. You have like ’10 Most CSS Tricks That You Never Knew’ or ’10 Most Beautiful Naviagations’. It’s like list blog posts digging their way through the internet.

Paul: (Laughs)

Christian: And it’s the same way there right now, like I can appear immensely cleaver if I just put loads and loads of effort comparing things to each other. Instead of saying ‘this’ means use ‘that one for this one’ and ‘use that one for this one’ cause the benefits of that one library is ‘this’ and the benefits of the other library are ‘that’.

Paul: Yeah.

Christian: It normally is like, ‘Oh yeah… that library won.’ or ‘All of the others are bad’.

Paul: Yeah.

Christian: And that’s never the case.

Paul: Hmmm.

Christian: We have to get away from this putting things together randomly and making up an application, to a proper web application design and I’m going to be in New York at the end of the month, no actually beginning of next month at AJAX Worlds and my talk there will be about how to do javascript design and javascript architecture of big applications.

Paul: Mmm hmm.

Christian: That’s going to be quite interesting feedback from the audience I’m quite sure about this, but it’s a matter that we grow up, we actually have to grow up as web developers and take our stuff serious and actually make sure that we don’t build for ourselves – but we build for the guy that comes after us cause that will always happen as well.

Paul: Yeah… and that’s really good advice.

Christian: If you think like that, then you will never write bad code and sometimes people just have to suffer that themselves before they start doing it.

Paul: Mmm.

Christian: It’s always clever to think of yourself as the javascript god that can do things better anyways, but some times it’s good to leave your superhero skills in the corner and just do something that works and that’s understandable and spend some time documenting for the next guy that has to take it over from you.

Paul: And I think that applies to everybody you know people, even people doing HTML or CSS or server side stuff thinking about the next person is, yeah, hugely important.

Christian: Yeah.

Paul: Thank you so much Christian. That was very useful and I really appreciate you taking the time to come on the show on Valentine’s of all days. Good to talk to you Christian and we’ll speak soon.

Christian: See you soon. Bye.

Listeners email:

Rolling out new features

Our first listener comment is from Alex who has come up with a clever little approach for educating existing users about new features…

I just listened to show 112, where you mentioned Christian Heilmann’s javascript walkthroughs. These walkthroughs reminded me that I wanted to do something similar for our website, except I wasn’t able to squeeze it in before the deadline.

My workplace decided on a total revamp of their website, and the final design had some substantial visual and navigational changes. Among other changes, disparate logins had been consolidated into one login button. Of course, now we had the problem of habitual users; because the website hadn’t changed for several years, how do we now try to avoid several hundred support calls asking where the logins have gone?

Well, the obvious solution is to not make such drastic changes. Going for evolution, not revolution and whatnot. Failing that, is something like Christian’s walkthrough popups. However, these would still show up for new users, for whom this information would prove totally useless.

Here’s the solution I had planned:

A couple weeks before the new site or feature launch, we use javascript to set a cookie. This accomplishes two things: 1) we target people who have javascript, so we know the popups will work for them, and 2) we’ll know they were at this page *before* we changed the design or added a feature. Now, once we launch, we check for that cookie using PHP (or other server-side scripting). Why do this on the server side? Well, it lets us avoid even inserting the popup code for people who don’t have the cookie. If the cookie exists, we can then delete the cookie (so they don’t see the walkthrough again), and then insert the walkthrough divs and javascript.

Even though I didn’t get a chance to implement it, maybe this will help other people prepare for site overhauls.

What a great idea Alex. Existing users rarely like sudden changes to the sites they use regularly and often need a lot of help making the transition. This is an excellent way of doing that without confusing new users with unnecessary information.

Content management and CSS

Our second listener contribution is a question from Adrian…

Thank you very much for the show – it has been so helpful!

I have been given the job of creating an Intranet site for a small business. After listening to your shows I would love to create this website using webstandards and have been learning CSS. As well as this it is important that the users of the site can modify the content via a CMS.

So my questions are; can both of these things be satisfied? Also is it possible to design the website using webstandards and then “plug” a CMS into the already created website?

It is definitely possible for content providers to update content built using CSS. In fact it is easier, and allows the designer to maintain more control over the design. Traditionally content providers had to make all kinds of design decisions when adding content. If they needed to add a heading they had to decide what that heading looked like. If they wanted to make a piece of content stand out, they would pick a colour and font size to make that happen.

However, when a site has been built with standards the content provider doesn’t need to worry about what content will look like. They simply say this is a heading by defining it as an H1 and the CSS will decide how to style this. Equally to make something stand out they mark it as strong and the style sheet does the rest. Simple.

The only problem is that some content management systems do not have WYSIWYG editors capable of supporting this approach. They are still focused on giving the content provider design control. Fortunately there are editors out there that do think in this way. A good example is xstandard although there are others. These can just be dropped into your CMS.

Finally, it is certainly possible to plug standards based code into a CMS. Infact, it is actually easier because the style and content have been separated. A content management system is (as it name suggests) primarily concerned with content. It doesn’t care about how that content is styled. Nothing makes integration easier than nice clean meaningful markup, unencumbered by formatting.

111. Utopia

Posted in Classic shows on February 14, 2008 by Paul Boag

On show 111: Designer and developer work together in utopian harmony. Two great listener reviews and Aral Balkan announces the biggest online web design conference ever.

Podcast: Download (31.2MB)

Download this show.

Launch our podcast player

News and events | Designers and developers in perfect harmony | Aral on Singularity | Listener emails

News and events

Fixing your product pages

I want to kick off this week’s news with an article on Think Vitamin which I missed when it originally come out back in November. It is a post by Amy Hoy providing some basic advice on user experience design, focusing in particular on product pages.

Amy starts by giving some basic tips. These include…

Be nice to your users and customers (and potential customers).
Design as if your main goal is to inform and educate.
Be honest and forthcoming.
Help your users and customers to do what they want, not what you want them to do.
Be consistent with your message and quality of service (and I’m including software design here, folks).
Scientific, measurable “usability” doesn’t necessarily make for a good experience.
Good design makes people feel good.

She then moves on to look at specific examples. She compares the product download pages of Opera and Firefox. This is a fascinating insight into what can go wrong with user experience design.

What I particularly like about this article is Amy’s engaging writing style. She is incredibly personable and her writing really drew me in. It is a long time since I have read a post word for word.

Being inspired by newspaper design

I often talk on boagworld about looking beyond the web for inspiration. Too often as designers we look at other websites, when we should be looking to art, architecture and the world around us for inspiration.

Admittedly this can be somewhat of a stretch at times. It’s not always easy to see how a piece of art or kids toy can inspire a website. Many of us don’t even try as a result.

How about starting with an easier comparison? This week I came across a superb post that looks at award winning newspaper design and it really excited me about the possibilities when I finally get around to redesigning boagworld.

I think we have a lot of learn from newspaper designers and in many ways there are a lot of similarities. Both web design and newspaper design rely heavily on white space and grid layout. Both have to deal with large amounts of written content. Both have to copy with constantly changing content. The list goes on.

Take a few moments to read this post, even if you just look at the designs. It will definitely inspire you.

Using browser history to improve the user experience

My final news story of the day is an interesting idea centred around a users browser history. Niall Kennedy has proposed a technique where you could use CSS and Javascript to display content based on what sites a person has previously visited.

Although I am not sure I like the idea of websites snooping through my browser history, it does provide some ways of improving the user experience. If nothing else it can remove some of the clutter from our websites.

Let me give you an example of how it could be used. A website could check your browser history to see if you regularly used digg.com. If you did then it could post a “digg it” button. If not it could be hidden away. The same principle could be used to show only a RSS subscribe button for the specific news reader you use, rather than showing them all. The possibilities are endless.

Whether you can see an application for this or not, it is still a very impressive and clever idea. Definitely worth investigating further.

Feature: Designer and developer in perfect harmony

In this week’s feature Marcus is looking at the working relationships between web design teams. He brings together a few Headscape employees to discuss how to ensure a good working relationship between all parties.

These are the roles that we look at and who represents them in Headscape:

Requirements analysis, information architecture development (consultancy) – Marcus
Design, templates – Leigh Howells and Paul
Technical development – Rob Borley
Project management – Charlie Allen

These are the issues we covered…

What are the things that really make a project work well for you?
From the other perspective, what are your pet hates?
Designer and developers – should clients be able to talk to you directly?
Most projects have a habit of their scope creeping. How can that best be avoided?
At Headscape we use a number of different tools to manage projects. How do these tools work?
Particularly with designers and developers, we have set up ‘buddy’ systems. How does this work? Is it effective?
Some projects stall or go on hold for a while. Are you able to just pick up where you left off?

Expert interview: Aral Balkan on Singularity

Paul: So, joining me today is Aral Balkan. Hello Aral.

Aral: Hi, Paul. How are you?

Paul: Not too bad. It’s been a while since we’ve had you on the show.

Aral: It has been a while. I’ve missed it.

Paul: Uhm, so yeah, basically, I’ve been keeping a secret from Marcus. Which is I stoically refused to tell him what Singularity is all about.

Aral (laughing): Was he curious?

Paul: He was.

Marcus: It’s something to do with Star Trek, isn’t it?

Aral: Well I am a big fan, but no.

Paul: So why don’t you tell him what Singularity is all about.

Aral: Well, Singularity is going to be the world’s first large scale online web converence.

Marcus: Okay.

Aral: In a nutshell, that’s what it is.

Paul: So, I mean how does this work from a technology point of view, from an organizational point of view. Tell us a little bit about how it’s going to be organized.

Aral: Uh, sure! Well, basically it’s a web conference, so in terms of topics, it’s very eclectic. We’ve got a really cool group of speakers who have confirmed already, about 24 of them, from all parts of the web really. We have web standards people. We have JavaScript developers. We have artists who work on the web and they’re going to be presenting their sessions online. It’s going to be streamed through a custom interface built in Flash, based on the Flash platform, using technologies like Adobe Connect which used to be called “Breeze”. It allows the real time streaming of audio, video, and also sharing of interactions or objects through the web. Beyond that, we’re also going to have a very local character to it with local hubs where people will be able to gather and watch the audience and interact.

Paul: Oh, ok, so it…

Aral: I mean, watch the conference and interact.

Paul: Right, so people will actually get together as well, because that was one of my questions. One of the best thing about conferences is meeting up with people.

Aral: Definitely! The bit that I don’t like is the travelling. It’s being stuck in coach next to someone who’s, you know, not feeling too well or is kind slumping onto your seat or having the hotel from Hell experience that I’m currently having over here. (Paul laughs)

Aral: Don’t even get me started on that. There was techno music until 2 AM from the bar downstairs.

Paul: Nice!

Aral: Well, it was refreshing in the morning, though, because the shower went from boiling from freezing back to boiling and kept doing that. So, yeah, I think this is going to hopefully take the best parts of what attending a conference means, and maybe leave some of the bits that aren’t as great.

Paul: Are you going to leave it for local groups to set up local meetings or is that something that you can organize centrally?

Aral: I want to see it as decentralized as possible. I am talking to a few venue sponsors, potential venue sponsors. We’re talking with Yahoo at the moment. The BBC, I’m talking with Ian there. There are very interested and very excited about it. But, beyond that, I want it to have a grass-roots character. So, we’re already getting people volunteering for regional areas. I’ve called them Ambassadors. We have an ambassador from Bristol and there are people from Singapore, Mexico, all over, that are very interested in volunteering. So, we’re probably going to have regional volunteers and ambassadors who organize local groups, user groups, to have meetings around Singularity, where attendees can go and join and hopefully take it further, you know, add a local character to it.

Paul: OK, let’s cover some of the basics. How many speakers are you looking at, first of all. Let’s start with that.

Aral: Okay. We’re going to have a little over 100 hundred speakers.

Paul: Wow!

Aral: So, yeah, it is actually a large web conference.

Paul: Yeah.

Aral: And the that its online.

Paul: So when… how long is this going to be over? You know, if you’re going to have 100 speakers…

Aral: It’s three days.

Paul: It’s going to be over three days…

Aral: And it’s multiple track.

Paul: Multiple track, okay. That’s what I was going to ask.

Aral: And I think one of the things, just cut you off there, with uh… it is multiple track, but everything is recorded.

Paul: Oh, Okay.

Aral: So, its presented live and we’ve got some really great ideas for making those presentations a little bit more interactive than you can get in the real world. But, it will also be recorded. So, if you do miss something on the day, you’ll be able to watch it later.

Paul: Cool! How are you going to deal with things like time differences? Are you going to have it going 24 hours? Or, how are you dealing with that?

Aral: Well, initially, I was thinking about having it 24 hours. Just because it sounded really cool.

(All Laugh)

Aral: You know? “Three days! Twenty four hours!! One hundred plus speakers!!!” But then I thought about it. Especially the local meet ups. I want those meet ups to have a BarCamp-like character to them, you know? Where people can stay over. And I didn’t want the conference, the somewhat one-way part of it taking up part of the day.

Paul: Right…

Aral: So, I think it would be nice to have the presentations during the day and then after that, leave time for people at local gatherings to create their own sessions to talk about what they’ve been listening to, to add to it, to localize it for themselves in a matter of speaking.

Paul: Sure.

Aral: You know, to have, to do things to tell you the truth, I have no idea what they’ll come up with, which is great.

Paul: So, when is this scheduled for? What are the dates that people should book for it?

Aral: Well, we finally have dates. We’ve been going back and forth internally before we announced, but it’s the end of October. October 24th through the 26th.

Paul: Okay, that sounds good. And do you know a price yet, or are you still working on that?

Aral: Well, the pricing we’re still working on, but I think we’re going to be very positively surprised by the pricing. We’re actually working to get it even lower than we initially thought we wanted it. And we’re working closely with certain sponsors and we’ll definitely be announcing more about the sponsorship that we have as they become official, but some of our sponsors are interested in keeping the ticket price low as well and supporting us.

Paul: So, how many people are you expecting to attend this conference? Have you got any idea of what you’re aiming for?

Aral: Well, my conservative estimate right now is 10,000.

Paul: WOW!

Aral: And that’s based partly on past experience. We did 2 one-day open source flash conferences using similar technologies, for which we got about a thousand attendees at each one. Those were much smaller. One day, three or four speakers. My conservative estimate is that this will be about ten times the size of that.

Paul: That’s amazing. I mean that will be really cool to, you know, if that comes off. Are you trying to get a range of different speakers? Are you covering any particular areas of web design or are you going as eclectic as you can?

Aral: Well, the tagline that I was going with initially was that Singularity would define web 08. And I’m kind of trying to get people away from using version numbers when talking about the web. We’re getting away from using version numbers when talking about software because you know the moment you slap one on its outdated. So, I think maybe using the year would be easier because you’d at least know that you’re talking about a definite stat of time. So, my initial idea is that it would define Web ’08, and as such, I’m trying to get as eclectic a mix of speakers as possible. And also, I see that there is a lot of overlap with which to send applications for example. There’s a lot of overlap over what people using AJAX are doing and then traditionally web standards people are getting interested in applications as well. So, I want to have a real mix. I also don’t want people on the Flash platform to be excluded, as they sometimes are. But, this is definitely not… that’s not the focus of the conference.

Paul: So, where can people find out more about this? I mean obviously, some people are going to want to be signing up. Obviously, you can’t do that yet, until the price has been set. So, is there any kind of way (

Aral: Of course.) they can express their interested or find out more information or whatever?

Aral: They definitely can. The site is “singlularity08.com”. You can also get to it from “singularityconference.com”. And, basically, we have a blog there and you can express your interest. You can email me directly as well. My email address is “[email protected]”. Or just email my private address at “[email protected]”. Yes, so definitely, if you want to be kept in touch when we do release information, but there is also an RSS feed that you can subscribe to on the site.

Paul: Cool! Well thank you very much for coming on the show.

Aral: Thank you for having me, Paul. And of course you’re speaking.

Paul: Well, yes, of course. That goes without saying (Paul laughs).

Aral: Are you excited? Have you decided what you are speaking about?

Paul: I have not a clue yet, no. (Aral laughs)

Aral: Have I just put you on the spot?

Paul: Yes, totally. Thank you very much. (Aral laughs) And its going to be a weird one. It’s going to be a different way of speaking and so you kind of need to tailor what you’re doing to approach. It will be interesting.

Aral: Exactly. And we’re going have dry runs and we’re going to try out the interface as well.

Paul: Cool.

Aral: And maybe tweak it for different types of presentations. We just have so much potential with what we can do.

Paul: Mmmm. Yeah.

Aral: Because, we can actually control the medium. So, it’s really exciting.

Paul: Excellent! Excellent stuff! Really looking forward to it and we’ll get you back on the show closer to the time to see if we can drum up a bit more support for it. Excellent stuff. Thank you for your time.

Aral: Sounds great, Paul. Thank you so much.

Paul: Alright then.

Listeners email:

An alternative wireframing tool

A few weeks back I talked on the show about wireframing tools. Not long afterwards I received an enthusiastic email from Wen talking about a product called OverSite. He was so passionate about the product that I thought we should get him on the show to talk about it. This is what he had to say…

I’ve been catching up on my episodes of BoagWorld, and I just recently listened to your discussion about wireframing. As a UI designer, I completely understand the importance of mocking up a UI, and testing the mockup, before ever launching Photoshop.or Dreamweaver. So I thought I’d provide a review of a wireframing tool that I use, called OverSite. I haven’t seen many other tools out there like it, so I figured you and your listeners might find it useful.

OverSite is a shareware application that runs on Windows as well as Mac OS X; I use the Mac version myself, but am able to exchange OverSite files back and forth with my PC-using colleagues. OverSite lets you create a full or partial representation of your site structure: all of the sections and pages that make up your site. You can do this in one of two ways. The first way is fairly predictable; you add one section or page at a time by clicking a button, entering a name in a popup dialog, and clicking OK. The second way is fairly clever. You open a window that OverSite calls the Rapid Structure Creator. There, you type out your entire site structure in one text area, putting line breaks between sections and pages, and using indentation to indicate nested levels. Then you just click OK and viola! OverSite generates a tree depicting your entire site structure.

At this point, you can dive into your wireframing. Each page contains its own wireframe canvas. You can place the usual widgets on the canvas: buttons, textfields, checkboxes, images, etc. You can also place basic geometric shapes like circles, rectangles, lines and stars on the canvas. Each component can be individually styled; you can also create global styles that apply to all components, or to components of a specific type. OverSite also lets you create what it calls composites, which are complex elements that are made up of individual widgets.

Let’s say that you have a search form that will appear on a few different pages. You can create a composite representing this form. The composite might contain a few labels and text fields, maybe a checkbox or two, and a couple of buttons. If you want, you can tell OverSite to automatically draw a border around the form elements. Once you’ve created that form composite, you can drop it into your wireframes where ever you want it.

OverSite does lack built-in, complex widget types, such as tables. You can create them out of the widgets that OverSite does provide, but it would be nice for OverSite to create them for you.

While each page has its own wireframe canvas, so does each section. The purpose of a section’s wireframe is to create elements that will appear on all of the pages within that section. For those who have used server-side-includes, it’s kind of like that. As an example, say you had a navigation bar that should go on the top of every page in your Products And Services section. You would create that navigation bar once, in the Products And Services wireframe canvas. Then the nav bar will appear in every page within that section. In addition, OverSite provides tools to modify that nav bar in specific pages, for example, to change the color of a specific link in the nav bar when you’re actually on the page that that link refers to.

Static wireframes are fine, but I prefer being able to test the interaction between screens before I actually build the site out. OverSite lets you link any widget or composite to another page. If you don’t want to do the work yourself, you can also tell OverSite to auto-generate a simple navigation bar. Then, you can use OverSite’s built-in web browser to test out your site’s navigation.

Another useful thing I’ve found is OverSite’s notes. The notes functionality lets you provide details about specific widgets. That way, when you print or export your wireframes, you can include more information to whomever you’re handing them off to.

As an added bonus, OverSite will also create a graphical sitemap based on your website structure. You can tweak the appearance of the sitemap… the operative word being “tweak”. Fonts, colors, spacing, and icon sizes are under your control, but not much more. Here’s where I think the application could do better to allow you to fully customize the sitemap. Still, it’s created automatically for you without your having to lift a finger, so that’s something. Plus, the sitemap can be exported into a number of formats: GIF, JPEG, PNG, PDF, Scalable Vector Graphics, and others.

Once you’ve finished your wireframes and want someone else to be able to play around with them, you can export them as web pages for non-OverSite-using people to click-through. You have two options here: export your stuff as pure HTML, or export them as imagemaps. The trade-off between the two is fairly obvious: pure HTML will provide you web pages that looks more “real world”, but won’t look exactly like your wireframes do, and they’ll look different in different browsers. Imagemaps ensure that you know exactly what your pages will look like, but it’s typically not going to look like a real web site.

As a UI designer, OverSite’s become a pretty indispensable tool in my software arsenol. You can get it at the developer’s website.

A vertical rhythm calculator

In the same show we also had Jason Beaird talking about vertical rhythm (among other things) and this promoted an email from James. He wrote…

Hi I’ve been listening to your podcast for about six months now and really enjoy the mixed style of content and witty banter.

With all the talk of CSS vertical rhythm and em based layouts I thought I would point you in the direction of a vertical rhythm calculator that I built in Flex to help people work out all of those nice em values. My own site has been developed using the same principles with all typography and measurements set in em’s for an elastic layout. I am developing an AIR version that has an integrated browser so that you get visual feedback of your calculations, I remember one of the John’s comment on how useful such a tool would be on the fabulous Rissington podcast.

I have checked it out myself and have to say it is very impressive. What is more he has now created that desktop version. Check it out.

Yahoo Live!

Posted in News on February 11, 2008 by Paul Boag

Yahoo have launched a new live webcam broadcasting service that has some real potential.

Yahoo! Live enables you to quickly and easy start broadcasting live video streams. As you can see from the example below it is also incredibly easy to embed in your site. What is more they provide an API that allows for the creation of more sophisticated web applications. It will be interesting to see what people do with it.

The profit and loss of usability

Posted in User experience on January 31, 2008 by Paul Boag

We have looked a number of times before at user testing but have never really asked why it is important.

The subject of usability seems to generate a dichotomy between what we think and what do as website managers. On the one hand we know that a focus on usability is good. We need only look at companies such as Apple and its iPod to know that usability can have business benefits.

However, when it comes to putting our principles into practice we often shy away. The realities of a production environment make a focus on usability seem impossible. We either feel that timescales are too tight or budgets will not stretch to the extra expense. For one reason or another user testing gets pushed to the bottom of the agenda. It is as if the perceived losses of testing outweigh the potential profit.

But, are these assumptions true? Is user testing time-consuming and expensive?

The perceived losses of user testing

Even if we are fully committed to user centric design we often need to convince others of its benefits. The perception that user testing is time-consuming and expensive, is wide spread and to some extent with good reason.

Traditionally user testing has been a huge undertaking with many organizations still spend millions. For years it took place in expensive usability labs with two way mirrors, computer suites, and video surveillance. Large numbers of test subjects were required to provide statistically relevant data. Also, the selection of these subjects was time-consuming because each would have to conform to a specific demographic profile. Testing was expensive and took considerable time to setup.

This approach was certainly effective but prevented most companies from running sessions. Although a usability consultant, testing in a lab, with demographically selected subjects is nice, it is beyond the budgets and time frames of most organizations.

However, user testing does not need to be like that. In-fact, it can be lightweight and inexpensive. Best of all it is something you can do yourself. It may not be quite as effective, but it is certainly a lot better than no testing at all.

However, even the most lightweight approach to user testing will require some additional time and budget. Do then the benefits outweigh this cost?

The real profit of user testing

The benefits provided by user testing cannot be understated. Even the most lightweight of approaches can have a profound affect on your web presence.

The benefits of user testing include:

Fast issue detection
Increased user satisfaction
Reduced support costs
Increased efficiency

Let us address each of these in turn.

Fast issue detection

If user testing is properly implemented throughout the life cycle of your web project then the chances are you will identify potential problems faster. Regular testing will certainly find usability issues but could also pick up on technical bugs too.

If you can identify these kinds of problems early, they are much easier to fix. The further into the project the more expensive and time-consuming changes will become as more code has to be rewritten.

Increased user satisfaction

It will come as no surprise that an easy to use site increases user satisfaction. However, it is worth pausing for a moment to consider just how important that is.

Users who become frustrated with your site do not simply leave; they never return. That user is probably lost for good no matter how much you improve in site in future. What is more they are unlikely to recommend it and could even actively criticize it.

In the competitive world of the web, repeat visitors and customer recommendations are crucial to success.

Reduced support costs

Perhaps you are in the fortunate position of facing little competition, or your users have no choice but to use your site. Even if that is the case you still cannot afford to ignore usability.

If site visitors finds your site hard to use and yet cannot just walk away they are left with one option; to ask for help. Sites with poor usability will attract large numbers of support calls and complaints.

Usually, it is far more economical to user test than to continually answer the same questions in support calls.

Increased efficiency

Finally, an easy to use site can provide real monetary benefits through efficiency.

This is most easily seen if your own staff use your site. An easy to use web application allows users to complete tasks quicker and as we all know “time is money.”

To a lesser extent, this principle also applies to others using your site. If they can complete tasks quicker then they are more likely to turn to you as an efficient source. They will see a timesaving that will encourage them back.

There is no doubt that user testing can provide a real return on investment. However, these can only be realized if the cost of running test sessions can be kept to a minimum.

109. Rissington?

Posted in Classic shows on January 28, 2008 by Paul Boag

On Show 109. IE8 divides the web design community, Anton Peck talks about imagery, and the Rissington Podcast crew stand in for Marcus.

Download this show.

Launch our podcast player

News and events | Anton Peck on imagery | Listener emails

Unfortunately Marcus is not yet back on active duty but does thank you all for your kind support. However, do not fret. You do not have to endure another show of me waffling on by myself. Stepping into Marcus’ still warm shoes are two giants in the world of web design and podcasting. From the infamous Rissington Podcast we have Jon Hicks and John Oxton.

News and events

Microsoft to automatically roll out IE7

First up I was sent an article by several listeners which seems to indicate Microsoft is intending to do an auto-update of Internet explorer on the 12th February.

When IE7 was initially released Microsoft made the decision to make the upgrade to their latest browser optional. So even though a user had requested automatic updates they would not receive IE7 unless they specifically approved it. This decision not to force users to update frustrated those in the web design community who wanted to wave goodbye to the evils of IE6.

However, it would now appear Microsoft has decided to take the plunge and will be rolling out IE7 as part of the automatic update. Not all users are signed up to receive these updates but those who are will be using IE7 from February 12th (if they are not already).

Expect to see a significant decline in IE6 users to your site very soon. Perhaps it will not be long before IE6 follows IE5.

IE8 divides the standards community

Talking of Microsoft and Internet Explorer, probably the biggest story of the week is Microsoft’s plans for IE8.

IE8 promises to be a huge step forward in standards support and has been significantly rebuilt in order to enable this. However, such dramatic changes in their rendering engine comes at a cost. They fear that by becoming more standards compliant they will break many websites which are not built with standards in mind.

The way they have dealt with this problem is to introduce a small piece of code that you drop into your pages which can be used to specify what version of IE your site is designed to work with. The browser then renders the webpage as if it was that version of the browser. So for example you could specify that a page was designed for IE7 and a person viewing the page in IE8 would see the page as if it was rendered in IE7.

If no browser is specified then it defaults to rendering the page in IE7 that way no matter what changes Microsoft make in future browsers legacy sites are still rendered correctly.

What on the face of it seems like a very sensible plan has caused uproar in the web design community. A List Apart and Eric Meyer seem to be generally supporting the principle while many others including the likes of Jeremy Keith strongly object.

One of the main sticking point seems to be that this approach breaks progressive enhancement. In other words I may choose to implement a piece of functionality on my site knowing that it wont currently work in IE7 but does work in other more compliant browsers such as Firefox. If i don’t add this special code when IE8 comes along it will look at my page see the code is absent and so render it as IE7. That means even if IE8 supports the functionality now it wont use it because it is rendering my site as IE7.

Its a complex issue with good arguments on both sides. In next week’s show Eric Meyer and myself will discuss it in more depth.

HTML 5 is coming

Still on the subject of the future of web design we now turn to HTML 5 which has just been released in draft format. Sitepoint provides a nice little summary of what is in and what’s out. There is also a summary of the differences between HTML 4 and 5 which is very useful as well.

I cannot claim to have read the entire specification yet but I have to say what I have seen contains some exciting stuff. Having HTML tags to define common areas like headers, footers and navigation offers some interesting possibilities and its good to see built in support for video and audio.

The big shame is that practical application of this is still a long way off but its nice to know that there is potential there.

Career advice for web designers

Of course all these upcoming technologies wont matter to you if my predications of a couple of weeks ago come true and we all find ourselves without a job! This week I was pleased to discover I was not the only one with a pessimistic attitude towards the coming year. Robert Scoble has posted a entry entitled “what to do if you are laid off in 2008 recession“, which I thought was a particularly cheery title.

Actually it is a really good post with some excellent advice. What I like most about it is that the advice applies as much to a student trying to break into web design for the first time as it does to a out of work professional.

In fact if you are considering a career change of any kind (or have had one forced upon you) then this is a good read.

Advice includes…

Spend at least 30% of your day job hunting
Start a blog
Share your knowledge with the world
Demonstrate your skills on youtube
Networking
Contact web start ups because they are hiring.
Volunteer
Prioritise friends and family

The list goes on and is definitely worth reading.

Expert interview: Anton Peck on imagery

Paul: So joining me today, as I said at the start of the show, is Anton Peck. How are you Anton?

Anton Peck: I’m doing great Paul. Thank you.

Paul: It’s good to have you on the show.

Anton Peck: I know. It’s about time isn’t it? *laughs*

Paul: It seems like it’s been a while. We haven’t actually had you on BoagWorld before have we?

Anton Peck: No, no. This is the first time.

Paul: But I’ve known you from… Where did we first meet? Was it South By Southwest?

Anton Peck: Yeah. I think we had sorta done virtual communication before then through email, IM or whatever. But we actually first met at South By Southwest last time.

Paul: Cool. So Anton, tell me and the listeners a little bit about yourself. How do you describe yourself? Do you primarily describe yourself as a web designer or an illustrator?

Anton Peck: That’s a tough call. The illustration is more my fancy, my hobby. It’s where my passion lies but the design is what I’ve been doing for a long time. So it’s sort of my trade of skill.

Paul: I see. So you’re kind of torn between two worlds.

Anton Peck: A little bit.

Paul: But fortunately those two worlds do overlap quite a lot which is why we have you on the show today. We thought it would be good to get Anton in really not to just talk about illustration but to talk about imagery on the web generally as that’s kind of his thing really, amongst many others, because you have a growing reputation. You do art-casts don’t you which are like illustration tutorials? Is that a good way to describe them?

Anton Peck: Yeah, that’s probably a good way to describe them. That is the rumor that I do those isn’t it. I don’t do them as often as I should but I do manage to get them out every once in a while.

Paul: And they are excellent. I have to say, I really do enjoy watching them. So let’s talk a little about imagery on websites and the use of imagery on websites. Let’s start off with a really nebulous and broad question that I guess is pretty impossible to answer but I’m going to ask anyway, which is what makes good imagery for a website? How do you go about picking imagery for a website?

Anton Peck: Well there’s a few things and some of them might seem obvious. First of all the images should complement the content of the website so that the substance isn’t too diluted from its original intent. I know that might seem kinda out there and obvious but it’s probably disappointing and surprising that there’s a lot of website owners that would want to put an image on a website because it’s really pretty or cool.

Paul: I guess it’s important to have imagery that relates to the branding or message you are trying to communicate.

Anton Peck: Right because imagery is meant to support the content rather than take away from it. You don’t want to pull everybody’s focus right away to the images but at the same time you want to support what’s already there. The images should have some interesting quality about them which could mean how well they have been cropped or resized. They should be saved at a pretty decent quality if they are JPEG’s or GIF’s. Not over compressed as they can sometimes diminish the personality of the website. When you go to a website and you see that it’s over compressed it really doesn’t look very good.

Paul: So for a relative newbie, an amateur that’s getting into web design, there’s always this question of GIF vs. JPEG. What do you use and when?

Anton Peck: Well for photographic style images that have a lot of… I would say colours but that’s not quite accurate but more photographic style images I would use JPEG’s. Then for images like logos, things that seem very flat and have a limited palette, maybe go with the GIF’s. Although I tend to do that a little bit less now that PNG’s are finding a little bit more broad support among browsers.

Paul: So do you use PNG’s very much?

Anton Peck: Every so often. They compress nicely especially when you use the adaptive palette which is similar to a GIF format but they can actually get a little bit smaller.

Paul: Cool, yeah. That’s been my experience as well.

Anton Peck: It just gets a little tricky when you are trying to do transparency.

Paul: Yes, exactly.

Anton Peck: That’s a whole other discussion.

Paul: Yeah, I don’t think I’m going to open that can of worms today. So any other tips for selecting good imagery?

Anton Peck: Well I would say it’s got to be appropriate and tasteful of course. So that way you can minimise the risk of offending someone or losing possible business. If you might have a certain sense of humour and want to put something on your website, you might have to watch out for how that might appear to someone else.

Paul: And I guess cultural considerations come in there as well. It’s easy to forget that the worldwide web is worldwide.

Anton Peck: Definitely.

Paul: The next big issue that a lot of people face is this whole kind of stock imagery kind of question. You reach a point where your website’s becoming relatively important to your business or you’re a web designer that’s working for certain clients. At what stage do you say that actually stock imagery isn’t the way to go, perhaps I should be getting something specifically commissioned whether that be commissioned illustrations, commission photography or whatever. It’s a difficult line. What’s your opinion on stock imagery? Is it the devil’s spawn or does it have a place? What do you think?

Anton Peck: No, I think it definitely has a place. It offers a great solution for those trying to find a good quality image when they can’t afford a commissioned photograph.

Paul: So what kinds of site do you use for stock imagery?

Anton Peck: I’ve been a fan of Crestock.com lately.

Paul: Ooo! I haven’t heard of that one.

Anton Peck: Yes and actually they have this huge contest going on where you can win a Mac Pro and all kinds of equipment. It’s a Photoshop contest and I happen to be one of the few judges on that particular site.

Paul: Ahh. So what’s this website again?

Anton Peck: It’s Crestock.com.

Paul: OK. I’ll check that out. Sounds good. So does that do both illustration and photography or…

Anton Peck: Yeah. They have a wide range of different material. They have background textures and you can search for pretty much anything there. A lot of it is user supported so if you even feel that you are a good photographer you can submit your work and see if you can even sell it and make a little bit of money off of it.

Paul: Oh cool. So when selecting stock photography, what should you look for? What should you avoid? The trouble with stock photography is a lot of it can look really similar to one another. What advice would you give about selecting stock imagery?

Anton Peck: Well there’s no real secret to it. There’s not a lot of advice either other than just go through a lot of it. Don’t try to find the very first searches you come across as that would be a higher chance it would be used somewhere else. You want to get a unique image, something that’s probably not as commonly found. It’s always a little disconcerting when you come across a new image that you see on 13 different sites like, “Oh that’s the same image used there”.

Paul: Yeah. It becomes obvious that it’s stock imagery.

Anton Peck: Right. So you want to find that unique image.

Paul: Yeah, couldn’t agree more.

Anton Peck: And the only way to find the perfect, unique image is to just go through a lot of it.

Paul: Yes! Which does take time doesn’t it.

Anton Peck: Certainly.

Paul: When it comes to commissioning stuff is there any particular advice you would give there in regards to briefing the photographer or the illustrator? I mean when somebody commissions you to do a piece of work, what kind of information are you after from them?

Anton Peck: Since they would commission me as an illustrator rather than an actual photographer, I’d mainly look at what they are trying to achieve for their website and how they expect it to support what they’ve done. One of the things that I was gong to talk about for commission photography, even though I’m not one, was the benefits for the websites because you can have a one of a kind image that fits exactly what is needed for the page. A photographer can come out to the business and take photos of the staff and location which is obviously something you can’t do with stock photos.

Paul: Yeah, which obviously makes a huge difference. I think often at times people actually want to see that kind of stuff because on the web you’ve got no way of judging what the company behind the website is really like. So to be able to see real imagery of real people and real locations does add some credibility and trustworthiness to a company. It’s not just somebody working out their back bedroom or whatever.

Anton Peck: Exactly what I was thinking, yes.

Paul: OK so you have a budget. How much difference does it make actually commissioning imagery rather than getting stock imagery. Is there really a difference? Is it really worth going out and getting stuff specifically commissioned?

Anton Peck: I would say if you are looking to get high exposure and if you were a big enough business I would definitely say do it.

Paul: So why is that? What difference does it make?

Anton Peck: Well that’s exactly what I mentioned earlier. It’s the one image that you are going to own or the website is going to own and it’s not going to be found anywhere else. Completely unique.

Paul: You do feel that when you go through these thousands and thousands of stock images that “Well, it’s pretty much unique. Who else is going to use it?” but it’s amazing how often images turn up. I’ve got a little program that changes my desktop image on a regular basis and I’ve had this really nice one that I loved and kept for a while which was a cityscape of London that had been made all futuristic and I thought “Wow! What a great image”. And then I’m going on the tube and there’s the same image plastered across the wall. It’s amazing how often they do turn up again.

Anton Peck: Yeah it’s takes away a little bit doesn’t it?

Paul: Yeah definitely. Definitely. You’re an illustrator, let’s get onto the role of illustration. What advances or disadvantages do you think that illustration has over photography. When should you be using photography, when should you be using illustration?

Anton Peck: Illustration’s gonna provide a whole different type of personality to a website that you can never find in a photo. You can create situations, objects, environments that would either be too expensive to reproduce or they just don’t exist in the real world. Things that you just can’t do with a photograph. Again, that’s going to have to be through the interview of the illustrator trying to describe whether the job is appropriate or not. Actually that would be up to the art director trying to commission to decide whether they need an illustrator or a photographer. But custom website illustrations are so unique right now. When you do have a custom illustration it stands out a great deal more than a photograph. I think one of the greatest examples that stands out on the top of my mind would be Andy Clark’s website with Kevin Cornell’s image that he did of that scooterboy, the guy on the scooter.

Paul: Yeah, it looks superb. That’s stuffandnonense.com, if I remember.

Anton Peck: .co.uk

Paul: Oh .co.uk. Well check that out.

Anton Peck: Just try to imagine if Andy would have reproduced that with a photograph. It wouldn’t have the same personality I don’t think. He wouldn’t have been able to pull it off.

Paul: So do you think that photography has less personality generally or is it just the stock photography that has less personality?

Anton Peck: I wouldn’t call it a more or less personality thing as much it would be a different type of personality. It depends on what you’ve going for.

Paul: Do you think there’s some situations where illustration just isn’t appropriate because it would create the wrong kind of personality or is illustration flexible enough to be able to work in most situations?

Anton Peck: No I think illustration is not appropriate for everything. I think there’s probably a time and a place where an illustration is not going to do the job of a photograph. The photograph tends to look a little bit more… I was going to say professional but I don’t think that’s the word for it. There’s a sort of business approach… I don’t know. Illustration is very personal. It’s one of a kind. It seems that if you have a corporation maybe an illustration isn’t going to work unless it’s a certain kind of illustration.

Paul: Yeah I kind of know what you mean. There’s something… A photograph has a kind of… trustworthiness isn’t the right word but a realism to it perhaps that lends itself to certain circumstances.

Anton Peck: Definitely. It’s really hard to distinguish between the two. It would really boil down to the specific case that it was going to be used.

Paul: Tell us a little bit about some of the different types of illustration and why you would pick when. Obviously every kind of illustrator has very different styles but are they any kinds of broad categories you would recommend in certain circumstances?

Anton Peck: Well, let me think off the top of my head. It seems like you have a real nice vector, flowery styles with flat colours like Veerle. Her work is fabulous and it’s all Illustrator. Her style is just so unique. Then I think of Kevin Cornell. His style is so organic and painted. Then there’s styles like my own. I tend to learn for more photorealism in some cases. My own personal gallery doesn’t lean that way too much. There’s a few different styles out there and it’s hard to say when it’s going to be used properly.

Paul: Do you think that some styles date more quickly than others? You talked about that flowery style where you see a lot of art deco type shapes being used on the web at the moment. Do you think that illustration goes through more fashion trends than photograph does?

Anton Peck: I would venture to say yes and in a way. However like all fashion trends, it always comes back. Right now the big popular thing is artwork that looks like it’s straight from the 70′s. The muted brown colours and the nice organic curves, swirls and circles, things like that. Those are going over quite well I think.

Paul: It’s interesting isn’t it. I think there some sites that need to be fashion conscious and on the cutting edge of what’s going on and there are others that need to be generic and long lasting. It very depends on what kind of industry you are in as whether you should follow these trends or not I guess.

Anton Peck: Right. Or then if it seems to expire then you can just change it out and get a new one.

Paul: The glory of CSS, the separation of content from design.

Anton Peck: Absolutely.

Paul: OK Anton. Thank you very much for coming on the show. It’s really interesting that we haven’t tackled the discussion of imagery before.

Anton Peck: I did have one real quick public service announce if you’ll let me have another minute.

Paul: Yeah, go for it.

Anton Peck: For your listeners I’m wanted to just bring up that they shouldn’t take images, and I know it’s kind of obvious, take images from fountain sites or Flickr or Google Image search. That’s just bad practice and they are normally just going to get found out and it’s not a very nice thing to do. If they find images on sites that they like, they can contact the owner to obtain permission.

Paul: And it’s surprising. Often the owners are very happy and flexible to accommodate that. If you take the time to contact them they are often very flattered that you asked. Good piece of advice. OK thank you very much Anton and we’ll get you back on the show again in the future. Good to talk to you.

Listeners email:

Textmate reviewed

Teifion shares his thoughts on Textmate for the mac, an incredibly powerful text editor with a sophisticated plug-in architecture.

I have to confess that I have only opened Textmate once and found myself unsure where to begin. I do know however that Teifion and many other web developers rate it extremely highly and use it as their primary development tool. In the show I pick Mr Hicks and Oxton’s collective brains about its benefits and whether I should make the effort to learn it properly.

Javascript or JQuery

The second listener contribution comes from Will who writes…

I was listening to your last one and you said it would be important to learn javascript for 2008. I know bits of javascript but don’t particularly like it and don’t know ajax yet, however, I have been playing with jQuery and find it much simpler. Do you think it’s a good alternative to learning all of javascript and have you used it at all?

Personally I think it is important to learn a language from scratch and that relying too heavily on libraries can cause problems in the long run. Although there is nothing wrong with you learning jQuery I would suggest it should be an addition to learning Javascript rather than a replacement.

If you want to know if Mr Oxton and Hicks disagree with me you will have to listen to the show :)

To leave an audio comment for the show skype “boagworldshow” or call +44 20 8133 5122.

108. Future of

Posted in Classic shows on January 23, 2008 by Paul Boag

On show 108: The differences between work for an agency or being an in-house designer. Hosting bandwidth intensive content and what happens when Paul designs a web design conference.

Podcast: Download (22.7MB)

Download this show.

Launch our podcast player

News and events | Daniel Burka and Leslie Chicoine | Listener emails

Unfortunately Marcus is not on this week’s show. His Father died a few days ago and obviously he has lots of stuff to deal with. Hopefully he will be back next week. However, if you are desperate for your Marcus fix then check him out on Nevermind the Buzzcocks.

News and events

Future of Web Design

Imagine for a moment if you will that an email lands in your inbox asking you to create your perfect web design conference. Who would you invite to speak? Daniel Burka from Digg, Andy Clarke maybe? What about Jon Hicks or Jina Bolton?

Well that is exactly what happened to me when the guys over at Carsonified asked me to chair this years Future of Web Design conference. They asked me who I thought my dream line up would be and together we worked on assembling them. Sure, there were some restrictions, apparently raising the dead caused a problem and hosting the conference on the moon was out of the question. However, overall we did pretty damn well.

So on the 17th and 18th of April in London I get to attend (and contribute to) my dream conference. The line up includes all the people I have already mentioned and more. The only thing missing is you guys. It would be really cool to have a bit of a boagworld meet-up while we are there so get on over and sign up today. It will cost you £145 including VAT or £480 if you want to attend my workshop as well.

However I know some of you are poor students or have tight ass bosses so we are also giving away two free tickets. If you want to win the two tickets email me with FOWD in the subject line with your name and contact details. We will pick a winner in a couple of weeks.

Advancing advanced search

My second story of the day is an excellent post on the Boxes and Arrows website. It tackles the subject of advanced search. Search generally is possibly one of the most neglected aspects of website navigation. This is amazing as it is the primary means of navigation for 50% of those who use websites.

I have seen some stuff written about search results but next to nothing on advanced search. What is more advanced search is not only ignored by writers but also by users. Few choose to use the functionality it provides, only turning to it as a last resort if all else fails.

In this article Stephen Turbek suggests that we need to re-design advanced search from the ground up. Instead of advanced search being a tiny link often overlooked, it should be an integral part of the search results page where complex filtering can be carried out through a graphical interface. Its hard to explain exactly what he is talking about without seeing the examples he gives so definitely check out the post.

If you ever have to work with search then this is a must read.

Starting from a blank canvas

Next up is a blog post from Cameron Moll on how to start a new design. We have spoken before on this show about how hard it is to come up with a design from scratch. Nothing can sap your creativity more than a blank sheet of paper (or empty Photoshop file!).

Cameron gives some good solid advice including sketching rather than diving into Photoshop and also drawing from previous work. However, he also suggests some less well known approaches such as starting with a grid and (most interestingly) working on the core content first. On the latter point he is referring to the fact that we often tackle things like headers and navigation first only coming back to the content at the end. Moll suggests this should be the other way around. This is good advice as it focuses the designer on what the site is really about rather than the interface used to navigate it.

You suck at Photoshop

My last find of the week is a really superb set of tutorials I found on youtube. I am not entirely sure how useful they are but they are definitely entertaining.

Most screencasts maybe informative but are often deadly boring. Not so with “You suck at Photoshop”. These basic Photoshop tutorials have a twist as the person recording the screencasts vents his rage at a cheating wife. Check out the video below and you will see what I mean.

Expert interview: Daniel Burka and Leslie Chicoine

Paul: OK so joining me today is Daniel Burka from digg.com, hello Daniel.

Daniel: Hello Paul.

Paul: Nice to have you on the show again, it’s been a while.

Daniel: Well thanks for having me again.

Paul: We’ve also got Leslie Chicoine joining us as well from satisfaction what’s the url again, remind me.

Leslie: Sure it’s getsatisfaction.com.

Paul: getsatisfaction, that’s the bit I was missing, I should have been prepared and had that on my screen, but there you go I’m badly organised. And of course how can we do an interview without having Marcus here as well, hello Marcus.

Marcus: Hi Paul.

Paul: laughs

Marcus: getsatisfaction.com, you must be able to sell that for millions to a porn agency.

Paul: laughs

Marcus: laughs Sorry, I’m off on one already.

Leslie: I’ve heard those jokes so many times.

Marcus: Yeah, ok, I’m so predictable.

Leslie: laughs

Marcus: I always have to ask people from America were are you and what’s the weather like? I know it’s a really boring English thing to say but it really is horrible over here at the moment.

Leslie: Well we’re in sunny San Francisco, I think the weather about 55 Fahrenheit right now.

Paul: Yeah, that’s so unfair isn’t it? Why do we live here, I just don’t know why we continue to live in Britain in winter.

Daniel: I was just in Canada last week and it was like 20 below freezing so it’s really nice to be back.

Paul: I bet laughs

Marcus: Not that cold here that’s for sure, it’s just wet, it rains all the time in the winter.

Paul: So Daniel, I’m dragging it back to the subject now Marcus if you hadn’t actually noticed while you go off on weird tangents that’s fine. Daniel we’ve had you on the show before and so hopefully our listens will be familiar with your background and if they haven’t heard of digg.com they should be ashamed of themselves. Leslie your new to the boagworld podcast so maybe should kick off with you, and if you could just tell us a little bit about getsatisfaction and a little bit about yourself and your own background if you would.

Leslie: Sure, well let’s start with getsatisfaction, basically I’m trying to re-do what customer service is there’s a lot of depressions happening on line about companies and how companies aren’t getting involved so we’re trying to get companies and customers together in the same space. Talking about products and issues and ideas for the future and yet we’re also trying to make sure it’s a level playing field so that neither side has control of the conversation so we’re acting as an intermediary allowing true conversations that are open to the public and that everyone can see and anybody can get involved in, but we’ve actually got people talking about customer service for companies, the companies aren’t there yet but getsatifcation.com/apple is a very popular section and there’s nobody from apple on the site yet. But there are also sections like the one for google and the one for twitter and we have google employees and twitter employees involved. It’s a very different take on customer service because it’s not just customer service rep it’s people who are programming, people who are designing, people who are in the HR department, all getting involved and having much more direct contact with customers

Paul: So do the companies all have to pay in order to participate in this or is this a free service? How does this work, what’s your business model?

Leslie: Well, all the features we have right now are free; our business model is still being developed, not to say that we don’t have one, we just have a lot of different directions and we want to make sure that whatever direction we take fits them in our philosophies, but we’re hoping that in the future for us, we see the potential in the analytics and the data that we collect. Your on the site are your telling us a lot about the different products and the services that your using and can tell companies to make connections between what products you use and like, and what other products and service you might also be interested in.

Paul: Yeah, of course.

Leslie: We start collecting more information about who you are and why your there in the first place.

Paul: Well I guess the other great thing, if you thinking of building a web app of any description then this is a great mechanism that already exists to handle the customer services enquiries you get without having to build all the functionality that is needed to do that as well so I imagine your attracting a lot of smaller companies as well?

Leslie: Yeah, it’s actually been a really interesting display, we’ve got small web apps, we have larger web apps such as google, digg.

Daniel: Even pounce is on there, I mean when we set up pounce originally and we wanted a way to communicate with our users and we immediately just set up a satisfaction page, signed up and it’s been great for use.

Paul: Yeah.

Leslie: Yeah, that’s all pretty easy, another thing actually too I forgot to mention, what’s truly great about the service is often times there customer service issues that span multiple companies so a great example was a guy who was having trouble getting a refund on an airplane ticket and he wasn’t sure if it was American Airlines or expedia.com so through the site he was able to post the issue to both sides and have them both look at it and communicate together there.

Paul: Personally Leslie what is it you do at satisfaction?

Leslie: Sure, I’m a designer, kind of an open title primarily I do a lot of UI design, I do a fair amount of contact development, I actually design a little bit of the business strategy as well we have developers who actually do the coding but most of what I do is wire framing.

Paul: Oh.

Leslie: My background though is actually game design.

Paul: Really?

Leslie: Really. laughs

Paul: So, that seems an interesting leap to go from game design into kind of a web app like this. Is it a big difference?

Leslie: It’s not really, because so much of what I learned in games design was how you design mechanics that let you create particular types of dynamics so you want people to act a certain way or, well in our case we want people to have a really positive attitude and there’s actually things in the design that makes people happier and make the conversation more open and positive, everything from the wording that we use to how we break down the steps, try and keep it all simple, if you go to the site you’ll notice it’s all very white and clean and light and that again add to that kind of feel and it helps people be more communicative.

Paul: Hmm… Interesting stuff, so the reason we thought we would setup this call today is really so we could talk a bit, well it was a conversation I had pervious with you wasn’t it Daniel about the fact that you come from an agency background and you used to work for a company, what’s the name of the company again?

Daniel: Silver Orange

Paul: Yes, that was it and they were what you would call a normal web design agency and while you were doing that digg was one of your clients is that correct?

Daniel: Yeah, so I helped found Silver Orange there were six of us what started the company back in 99 I think, but yeah we were a pretty typical boutique web job.

Paul: And what interested me about the conversation we were having previously, was the way you kind of when from working at Silver Orange across then to working for digg so you’ve kind of gone from working at an external agency were you had lots of clients and that kind of stuff, to working as an in house designer on a single project and I thought that was quite an interesting discuss and quite an interesting area to cover and you mentioned Leslie to me, and that you’d been having a similar conversation in a coffee shop somewhere with her and we though lets setup a few minutes and have a chat about some of the kind of ramifications of that and I guess the good place to start is, perhaps Daniel that you kick us off, what you see the difference being between working as an in-house designer somewhere and working for an external agency, is there a big difference?

Daniel: Absolutely, I mean it was actually quite interesting, I was back in Canada last week for some awards, kind of a yearly state of the union meeting and I’m still involved with the company a bit, I went back there for that, again this exact same discussion with one of our designers, and he was really jealous that I’m currently re-designing the digg comment system and he thinks it’s really interested that I’ve designed it twice now and I’m coming back again and doing it a third time and that kind of iterative development is something you frequently don’t get to do in the agency environment. That’s one of the real pro’s of working, I think as an in house designer is that you don’t build something and just hand it off you get the chance to build it, received feed back, watch how people use it gage some metrics over time and come back an re-design it and continue to improve something.

Paul: I mean, would you agree with that Leslie? Is that one of the things that attracts you working at satisfaction?

Leslie: Definitely, there’s something about being able to see a project through and then check back on it again and again, but I think that’s one of the things that makes it difficult, you no longer have and perspective, so we’re were talking about, particularly at the coffee shop, when you working at the agency, you come in and what makes you special is your new perspective and when your working at a company, you no longer have that so you need to make sure you can somehow come back fresh to the same project and when you iterating, bringing in new eyes, trying to see what needs to be changed becomes a challenge.

Paul: At one point in the sentence there you said again, and again…

Marcus: laughs

Paul: And I heard Marcus snigger at that, he obviously picked up on that as well. I mean that’s the thing, as somebody who works for an agency I have to confess, I think I would go absolutely crazy working on one website over a long period of time, probably because I’ve got the attention span of a newt, ya know do you ever long for that variety of work to work on?

Daniel: Yeah, absolutely, it’s usually really fun when you’re working for an agency especially clients who give you a lot of leeway and a lot of respect, that you walk through the door and you immediately see 80% of the problems on there site and you say, listen this is what you need to do, this is what you should fix and you get immediate reaction, it’s really fun right?

Paul: agrees

Daniel: You can bring so much change so quickly and somewhere like digg for instance, I mean I only have one or two sections of the site now that I’m looking at were I’m like, ok there’s still huge room for improvement here I know want to kind of tear it down and think of it from scratch and in all the other places there’s kind of refinement, refinement, refinement and it’s way more challenging and that’s what makes it fun but it’s also a bit more tedious, it’s not something fresh.

Marcus: I was gonna ask what the different skills you need, but I think you’ve kind of answered that, maybe being more dog-eared and determined, are there any major different skills between working on multiple projects and working on the same site all the time?

Leslie: Definitely, I think especially when your working at a company verses an agency the projects your working you have to have a better understanding of there application though out the rest of the business so when we’re iterating and we’re working on small details, the changes we make are for business needs or metric things that we’ve gotten so that kind of judgement is not something that I personally had as much experience with when I was working at an agency, and actually the team that works on getsatisfaction was initially a consultancy but it was weird have the whole team have to switch over.

Paul: Oh right.

Leslie: So initially when we were a consultancy the actually people who weren’t really involved with what projects we chose or really even finding out that much about the company, the founders were the one who really had to do that research and now we all have to do that kind of research.

Daniel: I was interesting because I was in a different position at Silver Orange as one of the founders, ya know I did have quite a say on which projects we take especially the UI projects were I was working more solo with a client, ya know, if I didn’t want to take a project we wouldn’t take it, working with clients I kind of got to know there business a lot before I started to get into it, you learn as much as you can, kind of a week or two to get into a project but at somewere like digg or like pownce, it’s a lot more about thinking strategically and thinking much more in the long term because if you pin yourself into a corner it’s literally yourself and you’re the one who’s gonna have to be able to dig yourself out of it later on.

Paul: Do you guys every, digg and getsatisfaction, ever bring in external specialists from time to time?

Leslie: Definitely, we were talking about needing fresh perspective and bringing new people in is always a great way to do that. We occasionally, what we do is we have design sessions and we have guests whom we get their opinions and show them what we’re doing and see if they have new ideas.

Paul: I mean it’s quite interesting that isn’t it because I mean we do a lot of work for a whole variety of different clients and you go to these different companies and they have internal design and development teams and you think why are we actually being brought in here were they’ve got the skills in house but they’re not really utilising what they’ve got and there’s a perception that if you bring in someone from the outside they’ve somehow got more skill than perhaps an in house team, do you feel more or less valued as an in-house employee than you did perhaps externally?

Leslie: laughs You don’t get that same sort of shiny, new feeling as an in-house designer I definitely feel more valued at this point than I did in the consultancy because one of the burdens of getting things right is on my shoulders now. So you really just can’t throw my ideas out the window. But it is actually interesting when people coming into a company, you can see in people’s eyes; they get a little nervous right? That the person coming in is gonna be more valuable than them right?

Paul: Yeah.

Daniel: I’m so excited, I’ve just hired another designer at digg, so there’s three of us now, and he’s awesome and I’m so excited to get someone in here who, a, can code better than me and b, he’s bring an entirely new perspective to the site, so ya know, it’s really nice to have fresh eyes so this is the best of both worlds because a, he’s now an in house designer and b, he’s just joined so he’s like completely fresh too it and I’m gonna capitalise on that as much as I can in the next couple of months before ya know he gets too deep in it a get’s into the aquarium.

Paul: I suppose you haven’t really been doing it that long, being an in-house designer but do you think there’s a point were you have to move no, when you think perhaps you’ve been there too long and been institutionalised into a certain way of thinking?

Daniel: I don’t think so, I mean I know this older guy who used to be the creative designer at apple, and the creative director a Polaroid ya know a bunch of really big companies and he’d been in the same job for a decade I think, but he was able to think incredibly creatively and leverage the people under him too bring the best into projects. I think as long as your able to adapt, I mean you can’t just keep coming through the door and doing the same kind of work all the time, I think your able to adapt to that in-house philosophy, I think you can definitely keep at it.

Leslie: Yeah I don’t have that much experience with that, but I think that’s the way too do it. Even with just the year that I’ve had at satisfaction you find yourself having to play a lot of games or do things to freshen the project or freshen the work.

Daniel: Right. I find too, like at somewhere like digg there’s so many different projects within the whole. It’s not like I’m working on the homepage every single day this year, that’s one very minor part of the site, you break down projects into components, like re-designing the comments is very different to re-designing the user profiles, I see them as very independent projects obviously tied stylistically and ya know from a user interface strand point they’re tied together, but they’re very different challenges which mixes up your job a lot.

Paul: What’s quite interesting with both your experience is that you’ve worked for agencies that worked on these applications your currently full time involved with and you saw that point with digg and satisfaction were you thought, ok, it’s not the right business move to have an external agency now, we need to bring that in house and I’m just kind of quite interested as to what happened in that process and whether you’ve got much of an idea of what that tipping point is, were you go from thinking yeah we can use an external agency for this to a point were we really need to do this in-house?

Leslie: I’ll let Daniel answer that one.

Paul: laughs

Daniel: So for digg it really happened that, originally it was a project Kevin had and was just throwing it around and wanted to see if it would get traction, and when it started to get traction he hired Silver Orange to come in and re-design the interface so it was a lot more usable and the site was gaining momentum gaining momentum and it kind of got to a point were they started thinking ok, this is a serious business, it’s got viability and they decided to start a company around it, in a much more serious and methodical way and that was kind of the point were they decided, ok, one of those positions is gonna be a designer, I’d been coming down, probably once a month down to San Francisco from Toronto and I one point Kevin was like, you should really move here, so he convinced me to move down and even for the first bit it was kind of interesting, I hope a lot of companies can do this kind of thing, it was quite flexible, I was working one week a month on Silver Orange project, so it was good for digg because they didn’t have to pay me as much and at the time there wasn’t enough work for a full time person and that way for me it was a nice period of time because I had the best of both worlds, I’d work on a bunch of client projects one week a month and then long term in house designer three weeks out of the month.

Leslie: It was a totally different situation for getsatisfaction because we had the whole company as a team look for a project to start, so for us it was really letting go of our client work.

Paul: Okay.

Marcus: I bet that’s hard.

Leslie: At satisfaction we let go of most of our development work first and let go of our design work and then turned this completely into satisfaction. But I did have that period like Daniel were I was saying were your working on lots of projects and along side your long term project.

Marcus: I can’t imagine slowly giving up project work; I guess it’s the sales man in me. I find it hard to turn any business away.

Leslie: Yeah, it’s actually very difficult to let people go when they want you and they still need you to do work for them.

Daniel: Silver Orange have actually got an idea for a project and they’re thinking of totally scaling back, and I don’t think, well we’re definitely not gonna drop all client projects but we’re talking about cutting down and a few people on the team, ya know kind of pumping other projects and drawing in other people as they’re required, and I think that’s also an interesting strategy as long as you can be disciplined enough to commit enough time to it.

Leslie: Yeah, I think our team decided up front that there was a stopping point that we would not be disciplined enough and that we would have problem with time being spent on things that were interesting or new instead of the core project.

Paul: I mean we’re looking, ya know we obviously knock around different ideas and web applications, we perceive, are a way of expanding the business rather than necessarily replacing one with the other so well I guess there are lots of different ways of slicing the cake I guess.

Daniel: Yeah, that’s the same philosophy Silver Orange is likely to follow.

Paul: It’s interesting.

Daniel: I mean it’s frustrating when you’re building other peoples projects all the time, you know you’ve got the skills in house to build something awesome, but smart people come up with ideas why should we be building for them when we can do it ourselves. laughs

Paul: Yeah, completely.

Marcus: This is so familiar, we’ve been having, well since day one I guess the simplest example is your own website in an agency, that always gets put to the bottom of the pile and we’ve been thinking about developing different applications for quite a while now but just trying to get people off paid projects and onto that, is, well it’s impossible.

Paul: laughs

Marcus: Well were we’ve got to now is, proper contracts have been written up between two different departs within Headscape if you like so that it is an official project, these set applications we’re working on at the moment.

Paul: When you say it out loud like that Marcus is sounds so pathetic.

Leslie: laughs

Marcus: But it’s true.

Paul: laughs But that’s how we’re getting around the problem. But I’ve got to admire this all or nothing approach or right we’re gonna go for it, but anyway.

Daniel: I think there’s actually something really curious about the bay area, I think it’s really different in attitudes here like ya know, figure out what’s the worst that can happen, ya know and if the worst that can happen means things don’t go so well in 6 months and you can barely pay your rent, if that’s the worst that happens then what ever just go it. And I think that’s why so many projects here get off the ground. I think that’s great. There’s a real sense of optimism here.

Leslie: And a lot of support too, if you’ve got an idea. There’s very few people here who are secretive with there ideas. They’re always talking about all their ideas and sharing and talking about building something rather than trying to hide it.

Daniel: But it’s competitive too. The people here, ya know there’s such a big audience for a lot of these products it’s like why should we quibble over the similarities of our projects lets just find a way that we can do stuff together and throw around ideas and it’s really fun.

Paul: Yeah it’s good. So for a lot of the people that are listening to this show, some of them are students that are coming out of university and are looking for their first movement into the web design world. We’ve got other people that are, what I would call enthusiastic amateurs who are looking to move full time into web design, you’ve got lots of different ways you could go these days if you’ve got web design skills I guess choice number one if you go say go for it I’m gonna build my own web application, choice number two is you could go a join a web agency and work on a variety of third party work and choice number three I guess is to become an in-house designer for a company, whether that be a trendy web 2.0 company or whether it be an in-house designer for I dunno on-line banking or whatever, how do you go about making that decision and what advice would you give people about were to begin? Are you going to damage your career if you start off by working in one place? Should you be doing lots of different types of work, ya know, what’s your advice?

Leslie: I think we both sort of agree that the real thing your looking for is good people, so whichever of those situation gets your around other great designers, other great teams with projects that your excited about, it probably doesn’t matter as much as you might think that it would.

Daniel: Right.

Marcus: It’s a bad question Paul.

Daniel: If I was getting into the industry right now, I wouldn’t want to get into a huge agency were I don’t know what sub-section of that agency I’m going to be in, what team I’m gonna work on, I mean joining a group of less than 15 you can get a good idea of who your actually gonna be working with and that kind of apprenticeship with really brilliant people is easily the best way to advance.

Paul: Yeah, I like that, I like that a lot. I must admit I hadn’t thought of it from that perspective and yes Marcus it was a rubbish question.

Marcus: laughs

Leslie: Well that’s the one that everyone’s asking.

Paul: Well yeah, we get asked that question all the time. My mistake is I should have asked what advice do you have for people starting out in there career, I shouldn’t have constrained you by giving you these different options.

Leslie: I don’t think this is just starting out. This is something your constantly asking yourself, am I in the right spot and I doing the right thing to advance my career, but as for actually starting, once again come back to this all the time, if there are good people around me then I’m in the right spot.

Paul: Yeah.

Leslie: If I’m inspired by the people around me I’m in the right spot.

Paul: I’m gonna have to move Marcus I’m sorry. I work with you…

Daniel: laughs

Leslie: laughs

Paul: laughs He’s used to it, he likes my abuse. laughs

Marcus: I’m also not a designer so.

Paul: No, your not, that’s very true. Although I don’t think I consider myself a designer anymore either.

Marcus: You took the words right out of my mouth Paul. laughs

Paul: I just thought I’d beat you to the punch.

Marcus: You did.

Paul: Okay, thank you guys for coming on the show, that was really, really interesting, you came up with some really good stuff and yeah I’m sure we’ll get some really good stuff back after listening to you. Thank you for coming and we’ll get you on the show again soon.

Marcus: Thank you.

Leslie: Thank you.

Daniel: Thanks a lot Paul.

Listeners email:

The cost of bandwidth

Eric: How do you deal with high bandwidth sites without bankrupting your clients? Is the quality of downloads compromised with these “unlimited bandwidth” sites?

Well Eric I have to confess that I have largely avoided the escalating costs of hosting this podcast thanks to the kind sponsorship of switchpod. However, for those of you who haven’t managed to gain sponsorship or who are looking for solutions for clients then there are numerous options available.

As Eric said in his audio question there is Libsyn which is a well known multimedia hosting provider that has amazingly competitive rates. I am not quite sure why Eric has an issue with them as I have heard very good things about them.

Another option is to host your video or audio with the Internet Archive. This service is free although I hear reports that performance can be an issue.

Of course if you are dealing with video then there are a whole host of possibilities from youtube to viddler. Some services are better than offers so be careful. For example some resize your video or limit the file size and length.

If you are hosting for clients be sure to check the terms and conditions of these sites as some of them preclude their use for this purpose. Also check ownership as you can be signing over the rights to reuse your video to the site owner.

Lastly in response to Eric’s concerns about the download quality of unlimited bandwidth sites, I have to say I have yet to experience any. I can see how this could be a problem when you get to really big numbers but that is not something that has effected me. Sounds to me that Eric might have been talking to companies trying to justify their own inflated prices and limited offers.

Working with audio

Harry: Given that you like to receive questions in audio format, can you, or any other boagers recommend any software that does the job?

We certainly do like receiving audio questions Harry (I notice that yours was an email!) Also now we are doing a listeners email section it is even more important. That is why we have made it even easier. I have signed up for a skypein account which means you can send me a message either by skyping boagworldshow or by calling 020 8133 5122.

However, lets just presume for a moment that you want to record and edit audio for another reason beyond commenting on boagworld. As a web designer or website owner you probably don’t have to do much audio work. As a result you won’t want to shell out a lot of money. I would therefore recommend you check out Audacity. Its a free audio editor for both the mac and PC which is as good as many of the professional packages. It provides all of the basics you need and exports to a number of different formats. Definitely worth trying out.

So now you have no excuse not to send an audio question, comment, or suggestion into the show.

Top Geek Gifts

Posted in Reviews on December 14, 2007 by Paul Boag

So this holiday season (previously known as Christmas), what gifts would you recommend others buy for the geek in their life? Here are my top 10…

These are products I own myself and would happily recommend to others. They are not in order and I have tried to pick things that suit varying budgets.

1. A mac

2007 was the year I moved from a PC to a mac and I have never looked back. Best of all if you have the budget they make great gifts. They look cool, are a pleasure to setup (no swearing on christmas day when something doesn’t work) and if you give him a week he will be insisting that you have one too so he no longer has to provide technical support for windows. Buying a computer can be scary if your not technical yourself so I suggest going along to an apple store. Those guys will be able to help you with selecting the model that best suits the geek in your life.

Prices start at £700 and are available through the Apple Store.

2. An ipod touch

I actually don’t own an ipod touch but I do have an iphone. However, I thought it was unfair to suggest something that has a £35 per month contract associated with it! I love my iphone and can’t imagine anybody not being pleased with an ipod touch. They are sexy, fun to use and definitely a cool toy for christmas day if they haven’t played with one before.

The 16GB version of the ipod touch (which is the one you should buy) costs £269 and is available through the Apple Store.

3. The Jawbone

The Jawbone is a bluetooth headset unlike any other. I have awful hearing and have trouble with mobile phone conversations. The Jawbone however has amazing noise cancelling technology that makes calls crystal clear no matter how noisy the surroundings. Best of all it looks cool and you almost don’t feel ashamed to wear it in public (unlike most headsets). In my opinion the Jawbone is the best headset on the market.

You can buy the Jawbone in pretty much any mobile phone shop and I have seen prices as low at £64.

4. Getting Things Done

Most geeks I know live a life in chaos. Getting Things Done is a superb book that has transformed my life and made me a more organised person. If the geek in your life does not read then buy it as an audio book and pre-install it on his new ipod touch!

You can buy the book for £7.14 on Amazon or for $12.60 as an audio book from Audible.com

5. Moo Cards

Moo Cards are cool little cards similar to mini business cards. You can print 100 cards for £9.99 and each card can have its own unique photo. You can either upload photos or just grab some random photos from his flickr account.

6. A flickr pro account

Talking of flickr why not upgrade him to a pro account this christmas. Flickr is the most awesome photo sharing site around and although it has a free account it is definitely worth upgrading. For just $25 the geek in your life can upload a limitless number of photos.

7. A Tom Tom

My sense of direction sucks and I couldn’t live without my Tom Tom GPS. Chances are the geek in your life doesn’t get out much, but when he does he wanders around looking lost and confused. A cool GPS in your car might encourage him to venture out of the house more. You never know.

They seem to sell Tom Toms pretty much everywhere these days from Halford to Currys. Prices seem to start at the £149 mark. To be honest the lower end models seem perfectly good from what I can tell.

8. A DVR

A DVR is a Digital Video Recorder such as the TiVo in the states or Sky Plus in the UK. These clever little boxes let you record programs to a hard drive, pause live TV and series link an entire season of a show ensuring you never miss it again. Having one of these babies will change the way he watches TV forever.

If you buy Sky Plus online at the moment you can get the box for £49. Of course it does require a sky subscription which starts at £16 per month.

9. A Duct Tape Wallet

Okay admittedly a wallet isn’t the most hi tech gift but Duct Tape Wallets are cool. Basically they are… well… wallets made out of duct tape. I know that sounds strange but they make a great stocking stuffer. Mine has lasted forever, it always generates discussion and its easy to repair (stick more duct tape on it).

I bought mine from Ducti and it cost about £15.

10. A Wii

I know there is world wide shortage of these babies but try to get one. The geek in your life may sneer at it but they are strangely addictive. The novelty will wear off after a while but not before you have had many hours of fun watching your geek actually taking exercise and socialising with others!

Good luck finding one of these. Prices seem to range from about £270 to Millions on Ebay at the moment.

Actually looking back through this list I think I would recommend most of those gifts for pretty much anybody. However, the real question is what would you recommend? Add your suggestions to the comments.