192. Next Generation

On this week’s show: We have interviews with two great upcoming web designers (Jamie Rumblelow and James Proud) as well as a new segment called Elevator Pitch.

Play

Download this show.

Launch our podcast player

Housekeeping

The Website Owners Manual is finally out this friday! To celebrate its launch, I will be running free public Consultancy Clinics on the 20th November starting at 3PM (UK time). If you would like free advice about your website or would just like to hear the advice given to others, then join the conversation via the Boagworld blog.

Back to top

News

Mockingbird

A big part of most webs projects is wireframing. A wireframe is a communication tool, a design tool and a specification tool. Without it, there can be misunderstanding and miscommunication.

I have written about wireframing before. In that post I outlined the benefits of wireframing, but I also recommended tools including something called Balsamiq.

Balsamiq is a cross platform application that allows you to quickly put together wireframes that can later be easily edited.

Although Balsamiq is a great application it does suffer from one major flaw (beyond comic sans being its default font!). Balsamiq is great for creating wireframes but is not good for sharing them.

Balsamiq saves files in its own propitiatory format and although it will allow the export of images, this does not work well for interlinked pages.

There is a plugin called Napkee that allows you to export Balsamiq as HTML and CSS. However, this is clumsy at best and still needs to be hosted somewhere.

Mockingbird

Enter Mockingbird. Mockingbird has obviously been closely modelled on Balsamiq and yet has the advantage of being an online application. It can do pretty much everything that Balsamiq can, but also allows you to share wireframes with others. You can even embed them on your own website, so others do not know you are using a third party tool.

So whether you are a web designer producing wireframes for your clients or a website owner building them for your own site, I would recommend giving mockingbird a try. Best of all its free, so there is no reason not to.

More on redesigning

Two weeks ago we featured a Web Designers Depot post entitled “Preparing and planning for a redesign.” It was a good post that focused on what clients need to do as part of a website revamp.

This week a post entitled “Redesign: When To Relaunch The Site and Best Practices” tackles a similar topic. However, what makes this one different is that it is focuses on web designers redesigning their own websites.

It is an interesting topic that certainly comes with its own unique challenges. As the author says:

How can we work on designing our clients’ websites successfully every day and then perpetually neglect our own?

The post goes on to answer this question as well as suggest ways we can avoid our own websites becoming neglected. Subjects she tackles includes:

  • Why we struggle to redesign our sites
  • Whether we should be redesigning at all
  • Finding the time to redesign
  • Planning a redesign
  • Updating your brand
  • Wireframing
  • Design
  • Development and testing

The advice is great and although this post is aimed at web designers redesigning their own sites, it has lots of good advice that applies to any website owners. Certainly worth checking out.

Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode

It’s frustrating but testing your websites is an important part of our job. To make matters worse, it is much harder to test in multiple versions of Internet Explorer than it should be.

The problem as I am sure you know, is that it is impossible to install IE6, 7, and 8 side by side under the same operating system.

One solution to the problem is IETester. This truly remarkable piece of software allows you to easily switch between different versions of IE and even provides a load of development tools similar to Firebug.

Although there is no doubt that this is an impressive application, it is not perfect. No matter how good an emulator is, it is still not the same as using the real thing. As a result I am only willing to use this for ‘in development testing’. Before launch, I would still want to test in an actual build.

In the past this would have involved running multiple operating system using Virtual Machine software such as VMware or VirtualBox. However with the arrival of Windows 7 we now have another choice.

According to a post on Sitepoint this week it is now possible to ‘Run IE6, IE7, and IE8 on the Same Machine Using Windows 7 XP Mode.’ The post explains that this miracle is possible thanks to Microsoft Virtual PC.

Virtual PC is Microsoft’s alternative to VMware and VirtualBox. It’s available as a free download for most versions of Windows. As a standalone product, it’s functional but offers fewer facilities than the competition. However, XP Mode is Virtual PC’s killer feature. It provides:

  • a fully licensed, stripped-down, virtual copy of Windows XP SP3.
  • a clever facility which integrates the guest Windows XP OS with your Windows 7 host. In effect, you can run XP applications as if they were native Windows 7 programs. Although the XP application is isolated, it can still access the host’s files and systems.

The tutorial then goes on to explain how this technology will allow you to run the three versions of IE side by side.

Whatever our role, we should all be testing websites. As a result this is an absolute must read.

How to create clear web navigation menus

Last week I found myself in the unusual position of disagreeing with Gerry McGovern. Fortunately that has quickly changed with his latest post entitled ‘How to create clear web navigation menus.’

Gerry presents four ways you can improve your navigation in his own tongue-in-cheek style:

Stick with conventions

Every year a phone directory is delivered to my home and every year it’s the same. Have they no imagination in those phone companies? I mean, come on, hasn’t A-Z been done to death at this stage? Why don’t they try Z-A for a change?

Avoid audience based navigation

We once dealt with a department of agriculture who had the following menus: Farmers, Producers, Exporters, Researchers. What if you were a farmer who was also a producer, who exported most of your produce, and who right now wanted to do some soil analysis research? Where should you click?

Be consistent

Have a consistent place for your navigation. If you use the left column, keep it there. Don’t start shifting the navigation into the center or right columns as you go deeper into the site.

Avoid quick links

“Come, little links, gather round,” said the designer to the links. And the little links gathered round, all happy and expectant.

“Well, the good news is that we think you’re very special links and because you’re so special we’re going to call you Quick Links,” said the designer.

“Quick Links!” they shouted in unison. Then a silence fell and a little voice was heard to say:
“Master designer, does that mean the other links are Slow Links?”

I am being to wonder if Gerry is loosing the plot ;-)

Back to top

Interview: The next generation

This week we are doing something a little different for our interview segment of the show. We have two great interviews with two up and coming stars of the web design scene. There is some real talent emerging and we are keen to showcase their work and passion here on the show.

Jamie Rumbelow

Paul: So, yet another interview from Future of Web Apps and this time we are talking to Jamie Rumbelow. Good to have you on the show Jamie.

Jamie: It’s great to be here, it’s unexpected and …..

Paul: … and cool

Jamie: … and very cool. It’s very cool to be here on Boagworld

Paul

Anna: Hello Anna

Paul: There we go, good. Anna likes this, so much I know. Um, yeah, so we thought we’d get you in. Um, I know nothing about you. We’ve talked a bit on Twitter

Jamie: We have

Paul: But that’s about it, so tell me a bit about yourself, your background, a bit of what you’re doing and that kinda thing

Jamie: Right well, um, well my name’s Jamie

Paul: Ok

Jamie: Jamie Rumbelow and I’m fourteen so I’m still…

Paul: Excuse me! You’re fourteen!

Jamie: Fourteen

Paul: Ok, I just wanna establish that, that’s fine

Jamie: So, I’m, I’m, I’m kind of a developer, um but not quite cos I’ve still got stuff to do…

Paul: Yeah

Jamie: Like school and…

Paul: (laughs) just GCSEs and stuff like that, yeah

Jamie: You know, um, yeah I’m trying to get my name out into the scene. I’ve been actually started to do talking, I’ve been kinda launching a ‘speaking’ career

Paul: Yeah

Jamie: So I’m hoping to follow in the footsteps of the great Paul Boag

Paul: Oh well, you know

Jamie: Um…

Paul: Don’t laugh Anna. Show respect

Jamie: Well yeah, I spoke at Tomorrow’s Web which was a conference run by a guy called Grant Bell and it was all about young people in technology

Paul: Yeah

Jamie: And Anna spoke at it too and um it was, it was really good a day, wasn’t it?

Anna: Hmmm, yeah it was really good

Jamie: So yeah, really enjoyed that, um…

Paul: Ok. So, I mean…..you’re fourteen and you’re trying to get your name known in the scene. Um, that’s quite ambitious to start that at fourteen. Why? Why, why are you so desperate to kinda get in there now?

Jamie: Well, I’ve always been quite enthusiastic and quite…..driven, um, and I really want to, you know, come out of school, come out with…….education (laughs)

Paul: Yeah that would be good

Jamie: Yeah but actually having made a name for myself and already have people knowing about me, interested in stuff I do, so that eventually, when I do actually launch as a full time career I’ll already have good grounding to work on. But it’s not just that, I want to meet cool people and I wanna do stuff like this, cos I…..you know, meeting loads of amazing, great people it’s a really really good benefit.

Paul: So, I mean, you know do you find with the…you know….as you wanna do loads of speaking stuff, you’ve set up and run your own event as well

Jamie: Yeah

Paul: So, tell us a little a bit about that actually before I go on to the next thing

Jamie: Oh well, it’s called Cambridge Geek Day, um, I had the idea …last year, in December and my mum said ‘It’s the most expensive, time consuming thing you could possibly do, why are you doing it?’ And she actually forbidded me from doing it.

Paul: (laughs) So that went well didn’t it! (laughs again)

Jamie: Yeah, so anyway, I, I hid it from behind her back, um, for ages…..and you lying to your mum, it’s really…..

Paul: That’s not good. Kids don’t lie to your parents

Jamie: Yeah exactly. But I knew….I knew that I could pull it off. Anyway I got sponsorship

Paul: Really, you managed to get sponsorship?

Jamie: Yeah. I got sponsorship from loads of really really good sponsors. I got loads of great speakers lined up and……anyway it’s all steaming ahead right now. So I… my… I woke up to 300 T-shirts being delivered to my door and my mum had no idea about it. So I just told her that I got sponsorship and she was very fine with it

Paul: Your mum is very cool, I have to say. That is impressive after she banned you

Jamie: But yeah, I think she was just worried about me cos, you know, I’ve got more important things to do.

Paul: Yeah

Jamie: So yeah (laughs) back to the point. Um, yeah so it’s a conference for developers, it’s about developery topics

Paul: Right

Jamie: And that’s kind of…because that’s what I know about, that’s what I do, I’d rather run a developer conference than a design conference, purely because…….

Paul: Yeah. And it’s the same…..specifically young people or…

Jamie: No, no, there aren’t enough young people in Cambridge

Paul: In the Cambridge area

Jamie: So, I did an internship with a company called Broader Sheet. Have you heard about them?

Paul: No I haven’t actually

Jamie: Well they’re making an intelligent news aggregator, um but they’re a small start up and they work from the Red Gate offices, have you heard of them?

Paul: Yes

Jamie: Um, so I was in the Red Gate offices and Red Gate do a start up incubator where they have loads of start-ups working within the offices and getting the food and that sort of thing. Um, and I met loads of really really cool people, really passionate, intelligent people, in Cambridge, doing start-ups stuff and being…..you know, so I thought it would be a really great opportunity to kinda capitalise on that amount of people and it’s a bit of a faff to come to London and go to Brighton and you know all the places where the conferences are held. So I thought I’d run my own one

Paul: Yeah, good for you…totally. So when’s that happening?

Jamie: November the 21st

Paul: Ok, so not long then

Jamie: No, not long at all, we haven’t started selling tickets yet but depending when this is out, if it ever is (laughs)

Paul: It will be out don’t worry

Jamie: We’ll probably be selling tickets by then. Tickets are gonna be £60

Paul: Ok

Jamie: But with that you get coffee when you’re….and biscuits and tea and stuff when you arrive and during all the breaks and you also get a two course meal for lunch. Um, and we’ve got an after party and it’s gonna be well put together and I’m making sure it’s high quality

Paul: See, I mean, that…. you gotta say is really impressive because so often I’m like, encouraging you know people to start up local groups and to get meeting up and if there’s nothing in your area then just to do something. And people always come back with ‘Oh I don’t know if I could do that’. And you think, no disrespect, but if a fourteen year old could that then you know then these guys who are web professionals should be able to do it. So, I think you’re a…..you’re actually incredibly inspiring from that point of view.

Jamie: Well, I’m honoured, thank you

Paul: (laughs) So, I mean what’s the plan? You’re gonna do your GCSEs. Are gonna go through the normal career path of GCSEs, A Levels, University? Or what, you know….have you got any thoughts on that?

Jamie: Well, I wanna do A Levels, purely because……it’s shows a certain level of intelligence, you know to have A Levels and they’re good qualifications. Um, but I’m not quite sure about Uni. Now a lot of people who are young and have already got a bit of a head start in the tech scene didn’t go to Uni, Anna included

Paul: Yeah, Anna for example, yeah

Jamie: So, I don’t know whether it would be so much benefit….educationally. As far as life skills go, maybe it would be good, so you know, be able to grow up a bit and live by yourself and that sort of thing. But I think I’d still be able to cope with that so…….my family want me to go to Uni but I don’t particularly want to

Paul: Well, you know you don’t have to make that decision yet which is helpful

Jamie: No, plenty of time

Paul: So I mean…….Ok let’s get your perspective on the web scene as it stands at the moment because you know there’s a lot of old crusty people like me that are, you know, saying what the next big thing is and what we think is important and all of the rest of it but I’m quite interested in your perspective you know…you’re gonna be…so…..let’s say you…….let’s say you went to University, so you’ve got two years of A Levels, well you’re fourteen at the moment so it’s two years until your GCSEs isn’t it

Jamie: I’m doing….I’m starting my GCSEs this year, I’m in Year 10

Paul: Right, so that is one or two years……one…two until those are taken? Let’s say two. Then another two years A Level, right? Let’s say you didn’t go to University, cos otherwise we’re getting too far ahead. So, let’s say four years time, what do you think you’re going to be doing when you come out and start work? What do you think is gonna be different?

Jamie: Well, I think the….I think the Web’s being opened up a lot more in terms of actually a platform rather than just a resource. So, I spoke about this at Tomorrow’s Web and it was talking about how the….that actually from the very beginnings of the Web it was always documents, it was always……you know just information linking to one another. No we’re starting to see things popping out from that like the Web 2.0 movement, and Google Wave, which is really cool

Paul: Don’t tell me you’ve got…….

Jamie: I’ve got a…..do you want an invite?

Paul: Yes, I flippin’ do

Jamie: Ok, I’ll send you an invite

Paul: Thank you. How come he gets a copy of Google Wave before me?! How did you manage to swing that?

Jamie: Oh, I was in the Developer Preview and…..

Paul: Ah, that’s just mean…..

Jamie: Oh and I know Bob from Huddle, he’s CTO at Huddle ….I think

Paul: God, he’s fourteen and he’s better connected than I am. That’s really irritating

Jamie: I’ll send you an invite

Paul: No more. No more of these young talented people. We’re not interviewing anymore young, talented people on the show. It’s just depressing. Anyway, sorry you were saying…..cool stuff

Jamie: So, yeah Google Wave is really cool and I don’t think it’s the end all solution to communication on the Web, definitely not. And it’s…..the Developer Preview especially was mediocre in terms of implementation, how it was written, it was buggy, the user interface was terrible, etc. Um but I can see the ideas behind it and the way it’s going forward and I really think that within a few years if we…..I think we really need to re-think how we talk and how we use the Web to communicate. Cos as I said it’s very kinda…..almost linear conversation, it’s been….you know we’ve always had bulletin boards or blogs with comments that you know…emails, all these communication platforms that we have on the Web aren’t particularly…….well they’re not particularly suited to the Web

Paul: Mmmm, and even if you ….email is like the kinda equivalent of the page-based stuff is just sending letters backwards and forwards isn’t it?

Jamie: Exactly. It’s like faxing

Paul: Instead of things like APIs and stuff like that you know you’re passing data backwards and forwards which in much more inline with Google Wave and passing….you know….chunks….packets of data of information backwards and forwards, so….

Jamie: But APIs really excite me

Paul: Oh do they?

Jamie: Yeah A) from a techie point of view cos I you know…um and also cos you can do so much with so little code, so little time and you can actually make some really cool stuff. This guy called Chris Harlman

Paul: Yeah I know Christian

Jamie: Yeah, he’s good fun

Paul: Yeah he is

Jamie: Um, he’s the …..he’s the Developer Evangelist for Yahoo I think

Paul: Yes, that correct, something like that

Jamie: And he’s been preaching YQL a lot and YQL is this um….SQL-like which is the query language that communicates databases. But YQL is like that but for the Web so you can query APIs effectively and then it all goes to Yahoo, Yahoo caches it, it will go to Yahoo servers, all that sort of thing but it’s all actually really really well thought out and well put together and his blog is all powered by YQL. So, it’s got all his presentations, all the books he’s written, all of the events he’s going to… from up coming, he’s photos from Flickr, he’s tweets from Twitter, all of his social presence is all combined into this one through a couple of YQL codes and I think it’s really cool that now we can do that. I think that we just need to start thinking about how we can use that data in different ways and just expanding that more and making that even…..

Paul: So that’s the kinda stuff you’d like to get into when you’re actually…in the…

Jamie: Yeah, maybe

Paul: Maybe?

Jamie: If I don’t…if my ambitions of being a rockstar don’t….you know…….turn out, yeah

Paul: Yeah, don’t pan out. I think you’re going down the wrong route for that, I have to say. You’re mixing with the wrong crowd if you wanna be a rockstar.

Ok well, it’s really good to talk to you Jamie and it’s good see the future of Web Design is safe, that there are people like you out there and that you’re getting stuck in now. I hope it’s a real encouragement to…..cos I know a lot of students listen to this and so it’s really good to hear that there are other young people out there getting stuck in. So, thank you very much

Jamie: Thank you

Thanks goes to Debbie-Jayne Reyes for transcribing this interview.

Also one quick note about the geek event Jamie was organising. Unfortunately this has had to be delayed. However, if you follow Jamie on his blog then you can find out when it is rescheduled.

James Proud

Paul: Ok, so joining me is James Proud from GigLocator. Good to have you on the show James.

James: Thank you for having me.

Paul: Now basically I’m doing this interview because Anna told me that you’re really cool and you talk some great stuff and I needed to get you on the show, so Anna is here too. Come on say “Hello”.

Anna: Hello.

Paul: And she’s now going to ask all the questions. Go Anna.

Anna: Oooh.

Paul: I’ll break you in. So first of all, tell us about GigLocator.

James: Sure, well GigLocator is a live music site, basically. Its completely worldwide, so whatever country, genre of music, artist and we will hopefully have all their past and upcoming gigs, and you’ll be able to easily find the tickets for the gigs so you don’t have to pay through-the-nose, for example, if you saw a gig on ticketmaster and it was £20, if you come to us you might see was the seetickets gig link and that’s £15. So you can get the cheapest tickets always up to date and you don’t have to miss out on gigs and its just making it a lot easier to go to music you love without have to trawl through all the ticket sites etc.

Paul: And you said you created this yourself and with one other guy?

James: I have got a co-founder. He’s mainly dealt with all negotiations with the ticket providers, I’ve done the design front-end and back-end stuff.

Paul: The immediate thing that springs to mind is: flipping heck that’s a big lo’ job to undertake! You’re looking at being worldwide here and you’ve had to arrange and negotiate with all the ticket providers.

James: Yeah, it’s been quite hard, he’s been dealing with people in the Czech Republic and GermansÉ Yeah it’s quite hard, but we’ve managed to get a lot of good data.

Paul: Ok, so you’ve got some good data, but all of these ticket people all round the world have all got their different systems, how the hell do you build something like that?

James: Three months of building a system that can normalise all of the different types of data. So whenever we get a new feed in, for example, you have a really decent feed that has all the artist names and the address of venue, then you find another feed that doesn’t have the artists name, it’ll just have ‘the artist name – Live Tour’. So all you’ve got to work with is ‘Madonna’s Live Tour’. So you’ve got to build a system that can decipher that its actually Madonna performing though you only have that title. They might only give you the name of the venue, so we’ve got to deal with finding all these things and putting them all together, but things are going quite well and we managed to sort it out.

Paul: That’s pretty impressive. So is this venture capital funded or is it being boot-strapped, how are you going about building it?

James: We are boot-strapping at the moment. We didn’t want to go down the route of getting seed funding early on because I could build it without the funding so we’ve just basically knuckled down and lived without money for a bit, but we’re going very well at the moment.

Paul: That’s quite a scary thing to do, did you work somewhere previously?

James: I was doing my A-Levels and doing some freelance work on the side, so I used to work with my co-founder for Coca-Cola music, Universal music doing freelance work there and that got us into the live music space. Then 6 or 7 months ago I said ‘I’m not doing freelance work anymore and I’m just going to focus on this’. So i’ve not earned any money for our consultancy and he’s just done small jobs on the side to pay for server costs, and it’s going fine.

Paul: That’s a really brave decision to make. So how old are you?

James: I was 18 a month ago.

Paul: Ok, so you’ve come out of A-Levels straight into this. That in itself is a big thing to do. You have the thing: ‘Do I go off to university? What about my career path?’ Why have you gone down this route?

James: I’ve taken a gap year out, so at the end if this goes tits-up I could go to univ, but the rate that things are going now I hopefully won’t. I’ve never really wanted to work for anyone else at all and I saw this as a chance at an idea and I was getting some great feedback so I thought let’s just do this and focus my time on it.

Paul: Its really interesting, this is what ScrunchUp is all about, which is now online and up and running. Little cheer from Ryan in the background there. This is something you struggled with as well Anna, what you’re doing: you did freelance for a bit, now maybe you’re looking for a permanent position. Do you ever regret not going to university?

Anna: Of course I do, all my friends are at uni, they’re all having fun, they’ve got it quite easy. Sometimes I feel like I’m not ready for this. I don’t regret not going because I just think working is better for me, but I do sometimes wonder: ‘What would it have been like?’ So either way I would’ve regretted my decision.

Paul: You’re just someone that’s ‘glass half empty’ kind of person. The green isÉ ‘The green is always grasser on the other side’? The grass is always greenerÉ

Anna: One things I wanted to ask you James, has your age got in the way of what you do or has it helped you?

James: When I was first developing, it got in the way because I couldn’t spend my whole waking life doing it so I’d have to go to college. So now that it’s finished its no longer a factor. It’s helped in a way, I always tried when doing work before launching before I had to show my face I never really promoted my age I just didn’t think it was important. But it’s helped me the fact that people are amazed that you’ve done this at this age, but I’ve done coding since I was 9 and I was paid at 12.

Paul: You got paid? Hang on, you got paid to code when you were 12 years old?

James: Yes.

Paul: I fell really old! When I was 12 they didn’t have blooming computers! So what’s next then? Is this actually launched and up and running?

James: Yes it’s been up and running for about 7 weeks, the reception, the things that have happened are amazing, it’s phenomenal.

Paul: Give me some examples.

James: Im now getting paid to speak at places. I was on the TV.

Paul: You were on the TV? Tell us about that, being on the TV’s cool.

James: A couple of days ago Channel 4 were looking for someone that runs a website but also has experience with Google Wave and I did a small piece on the news about Google Wave and how it affects me as a web developer and a site owner.

Paul: Ok, let’s go off on a complete tangent because I haven’t played with Google Wave. What’s it like? Is it as good as everybody says it is?

James: It’s quite good, but at the moment it’s lacking features. But Google’s made it so open that people can make features. So today they released it to 100,000 people. So hopefully with all of the developers that are now on it some amazing things will happen, give it a month or so and it should be quite a good platform.

Paul: That’s the big hurdle, you can build a great app, but if no one has heard of it then you fall down. Especially when you’ve spent so much time negotiating all these deals and developing it. So how are you – you’re boot-strapping it still, you haven’t got a lot of money behind you – how are you building a bit of momentum behind this?

James: We were at FOWA today, I was invited to come down. I got a free ticket. So I’m doing a bit of work with Sun, promoting it that way. But we’ve not actually gone full steam ahead with our PR or press because we are waiting to develop a few exciting new features that we think a lot of people will be interested in. So we’ve built a solid platform that does what it does: gigs, tickets etc making sure that’s perfect. But now we’re building on some extra things onto that so later in the month we’ll release those and alongside that we’ll start doing press.

Paul: So how are you intending to do it, or is it mainly your colleague that’s doing that?

James: The press stuff? Well because I’ve been doing all the speaking and I’ve been around London and all the events, I’ve built up a good relationship with quite a lot of people. So we are going to be targeting some music related stuff, just try and get it out there. Whatever that it takes. I’ll do anything. Take one for the team.

Paul: That’s a good entrepreneurial spirit. I like that very much. Have you got any more questions?

Anna: Yeah, so where do you see yourself in the next 5 years?

James: I’d like to say a year or so after I’ve had my exit. Either this is doing tremendously well still, or its had the exit. But hopefully I’ll still be working for myself working on fun things whatever it may be.

Paul: So that’s the plan, to go for an exit point where you sell the app and move onto the next thing?

James: Yeah, I think everyone is looking for their big exit. It’s either an exit or an IPO. If you’re money orientated. Work for the love of it. No I love it, its a great thing, it’s my life.

Paul: You could build a lifestyle business, for example, the business I run is a lifestyle business. We run the company so that it gives us a good standard of living and we’ll run it forever like that. Im not criticising, but looking for an exit is a different way of doing things. Well that was really interesting, i think its great to talk to people that are actually out there building these web apps but not with massive budgets and not ‘in the Valley’ and all the stereotypical stuff, you’re boot-strapping it, there’s just a couple of you guys doing it and it’s still possible.

James: It’s not about having a mass of money, it’s about losing control of your company. Why would you want to be a minority shareholder in a company, it’s your baby. I personally wouldn’t be motivated to work if it wasn’t mine still.

Paul: Of course. Thank you for your time and we’ll get you back on in the future.

Thanks goes to Simon Hamp for transcribing this interview.

Back to top

Elevator Pitch: A/B tests.com

We are introducing a new segment to the show this week. It is called Elevator Pitch and is produced by our very own Paul Stanton. The idea is that Paul interviews companies who have a product that might be of interest to you guys. They give a quick elevator pitch and Paul asks them some questions.

We start the series with ABtests.com.

Stanton: OK so today I am here with Joshua Porter, Hello Joshua

Joshua: Hi Paul;

Stanton: How are you doing?

Joshua:I am doing good, what time is it there?

Stanton: It is about 10:30 in the morning.

Joshua: Ok it is still dark here so

Stanton:(laughs) So where abuts are you based

Joshua: I am north of Boston in a small sea coast town called Newburyport, Massachusetts

Stanton: Ok so is it night time there? I can never figure out the timezone differences.

Joshua: yes it is still dark, nobody is up so this is usually when I get most of my work done actually

Stanton: Nice and quiet I guess

Joshua: Yes absolutely

Stanton: So we have got you on today to talk about a website you are involved with called abtests.com, so give us the elevator pitch, what it is and why you made it.

Joshua: Sure, so yes its abtest.com and it is a really simple site the idea is that we upload and allow other people to upload the results of A,B tests. For those not familiar with A,B testing it is really pretty simple if or while you are designing a web page or screen in a web application you might design two separate instances of that page and then test to see which one works better. So you split up your traffic your audience coming to the page into two and 50% of the people see design A and 50% of the people will see design B and then you measure to see which audience converted better against some goal you have set up. For example say you have a sign up in a web application and you have a sign up page and you want to test two different variations to see which one works better, that is essentially the gist of A,B tests. The reason why we created the site was for people to share their tests with others so the way it started was I had been doing a bunch of testing and I had seen some people online writing up some of their tests and what I found was that I always found the results really fascinating. So for example we have some write ups on the site now where people have provided two screenshots of design A and design B and the only thing different is simply the placement of the call to action button, the primary sign up button and after doing testing it turns out that sometimes the placement actually matters, if you place the button in a place on the page then you actually get more people clicking on it. So these sort of things fascinated me and I had seen a few of them written up in blog posts and things online but I wanted a lot more of them and the designers that I have talked to really liked that concept as well so we created the site. I created it with a couple of guys from a start up called performable that I am involved in as well. You know we are kind of seeing where it goes at this point. We have had a lot of interest in it and we have found some interesting issues around it such as for example some people will never upload the results of their test because they want to keep them secret but others see it as a great way to promote their startup or something like that.

Stanton: Right so you are not actually providing the mechanism for people to do A,B tests this is simply for people that have had results and want to publish them and share them with other people, that right?

Joshua: Right now yeah, we do have quite a few things in the works but we will not be providing like a piece of software that allows you to do A,B testing. We might provide some other software that does things in and around testing, ermm but there are plenty of tools out there one of the tools the most popular one is google website optimiser which is a free tool which allows you too do A,B Testing and one of the folks who is promoting abtest.com with us is kissmetrics they have some tools in that space too. So we are not going to compete with them in any way.

Stanton: OK so how long has the site been running for now?

Joshua: The site has been running for about a month now I think

Stanton: OK and roughly how many tests are up there now

Joshua: We have er gee I don’t know what the number is 12 or 15. I haven’t actually been spending as much time as I wanted to on the site because I am actually working on a startup and building some other software. But we are .. the big challenge again is kind of getting people comfortable with the notion of sharing their tests. That is kind of the big challenge now so we are working on that.

Stanton: Sure, it is quite amazing to look through the stuff that people have put on there and you see the screenshots side by side and you have to look closely on them to see what has changed because it shows how just the tiniest change in either the text or the placement or the colouring in some cases can lead to quite big percentage improvements on calls to action so I think it will be really useful for people to come and have a look through and hopefully share their own tests as well.

Joshua: Yeah, one of the big findings that we are seeing is that testing like this or viewing the results of these tests really changes peoples perceptions of design, I mean it is kind of a pretty big insight to some people to see that OK you know the colour of a button does change things, the call to action copy can have a dramatic effect so what I hope kind of for the site and the test results is that teams can take them back and start talking about real design issues and hopefully push to the background things like politics and emotional debates and “this is what I think” and so this is what we are going to try type of arguments and say you know what testing really does work. lets really start testing things. I think at some point teams will start focusing more on really important things, like their users, the words that matter to their users, the things that motivate their users and really kind of return to the basics of design.

Stanton: Great so you have kind of given us a couple of hints to where the site may go in the future, have you any other plans

Joshua: SO two things I am working on right now. One is to really fill out the site with information how to test. as I mentioned we are not planning on providing a tool to test, but people want to know what A,B testing is. They want to know how to do it and they want to see examples of what other people have tested so they can get a idea of what they should test. That has been one of the biggest surprises that people do not know what to test so people you know have the question shall we test another colour?, should we test different copy or different button styles? whatever. So that has been a big thing so we are going to round out the site with a bunch of information, content basically around where to test and some of the interesting topics. So for example actually I am working on some copy now that is what A,A testing is, a version of A.B testing but is a version of testing where you test the same thing twice so 50% of people, you basically segment your audience into two parts and the two parts seem the same thing and that might sound like a ridiculous idea because you are testing the same thing twice but it is actually valuable thing to do early on when you are getting into testing because it tells you how much noise is in your system. So if you run design A versus design A itself and you have some difference there, so one has slightly higher conversion than the other and of course all of the numbers you get from testing are fuzzy to a certain extent the question is how much, so if you have some variance there and you know there is noise in your testing setup and you know that is your margin of error. So after you do A,A testing then when you move on to A,B testing you can say the margin of error is about 1% so then in that case if B outperforms A by 1% you know it is not really, it may not be a significant result because there is that much noise in your system to begin with. Anyway tat is just one example of some of the content stuff we are going to fill the site out with going forward.

Stanton: So sounds really good. A,A testing is something I have never heard of before so that is quite interesting and I will guess you will become quite a good resource for all this testing, for people to go to.

Joshua: yes I hope so.

Stanton: So where can people find out more information.

Joshua: So they can go to www.abtests.com check it out we are actually going to push some changes up soon that allow you to view tests and view related tests so hopefully it will be easier even than it is now.

Stanton: Good stuff, well thank you for that

Joshua: Thank you Paul

Stanton: We will hopefully check back with you in the future to see how things are going.

Joshua: Great sounds good.

Thanks goes to Shaun Hare for transcribing this segment.

Back to top

176. Youth

On this week’s show: Ryan and Stanton are joined by Sarah Parmenter to answer Justin’s question about what he needs to learn to become a web designer.

Play

Download this show

Launch our podcast player

News

BBC releases Glow – A new Javascript library

At the end of last month, the BBC launched an open source version of their Glow, their own javascript library and a recent Sitepoint article gives a good rundown of what this new contender offers against other popular frameworks such as jQuery and YUI. The big question most people immediately asked is “Why did they bother?” with the increasing maturity and adoption of libraries like jQuery and YUI why did the BBC choose to ‘roll their own’?
The BBC is one of the largest, most popular sites on the whole interwebs with 13.2 million people visiting the site’s more than two million pages each day11. The BBC website takes their cross-browser support and accessibility factors extremely seriously and one of the main reasons that they decided to write and maintain their own library. One of the things I like is that rather than asking the question “Why open source Glow?” they asked “Why not open source Glow”, to which they had no reason why not, and as a British citizen, my TV licence fee has paid for Glow so I’m glad the BBC are opening it up to the community. And I really don’t think there’s any harm in having another library on the scene, especially when it’s as well thought out and documented as Glow.

  1. http://en.wikipedia.org/wiki/BBC#cite_note-91

The non-virtual world of freelancing

At the risk of this news section becoming a bit of a Sitepoint fest, I’m afraid I’m going to have to mention 2 more articles by Alyssa Gregory on Sitepoint which aim to encourage you into getting out into the real world and meeting people. The first article discusses in-person meetings and encourages you to meet prospective clients in person rather than conducting all of your communication by phone and email. Alyssa reinforces the need to prepare properly for any face-to-face meetings, making sure that your contact leaves the meeting with the best possible impression and give you a good chance of landing the gig, or whatever you’re meeting is for.
The follow-up article is about face-to-face networking and tries to get you away from your desk to meet people in the real world and make contacts in person, rather than just on Twitter or LinkedIn. Now I’m a big fan of socialising with fellow geeks in the real world and make time to attend my local events such as GeekUp, OpenCoffee and BarCamp and also try and attend as many conferences as I can over the year like Future of Web Design, Future of Web Apps, @Media and dConstruct. The big draw for me – especially at conferences – isn’t always the speakers up on stage, but the opportunity to ‘work the lobby’ and chat to anyone and everyone who I possibly can. I know Ryan [Taylor] is as much of a social whore as I am, and indeed we first met Sarah [Parmenter] while hanging out at FOWA:London while talks went on elsewhere. So if you don’t already, I’d recommend getting out there and meeting people with similar interests, there should be a local event near you!

Hey IT! Get rid of IE6

So I know we’ve covered various efforts to encourage stalwart IT departments to upgrade their systems from IE6, but I just had to mention this one as it’s quite amusing. hey-it.com is encouraging people to adopt guerrilla tactics and plaster their offices with an amusing array of posters which provide messages to their IT technicians.
Some of the messages include “Hey IT! The internet thinks we are idiots”, “Hey IT! We wanna party like it’s 2009”, “Hey IT! Which browser are you using”, and my personal favourite “Hey IT! Even Bill Gates has upgraded!”
So I like this effort and I hope it empowers those people working with a locked down system to point out their dissatisfaction at using IE6

Back to top

Feature: Young Designer

Hi boagworld, my name is Justin Vajko and I’m current studying graphic design with an emphasis in web design. I have a year left so I’d like to focus more on my programming skills like javascript and CSS which at this point I think are pretty weak, but before I do that I’d like to know if this is truly that important compared to other things I could be focussing on like maybe Flash or perhaps maybe perfecting my Photoshop skills, I guess I’m just wondering what in your opinion are the most important qualities and abilities a young web designer should have?

Transcript coming soon…

Back to top

175. Collaboration

On this weeks show: Ryan and Stanton take the helm, we interview Simon Collison on client collaboration and answer your questions about improving your design skills

Play

Download this show

Launch our podcast player

News

How to design a portfolio site

First up is a two part video series on Carsonified.com called “How to design a portfolio site” in which Elliot Jay Stocks shares his advice and experience. If you’re a freelancer, you know how important your portfolio is to your business and these 2 30 minute screencasts are filled with useful information such as:

  • The three key concepts that make a portfolio site
  • How to build great case studies to reinforce your expertise
  • The ultimate portfolio checklist
  • How to use narrative theory to strengthen your portfolio
  • How to take your design from Photoshop to HTML and CSS
  • How to integrate your design into a CMS like WordPress
  • Lots, lots more.

I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!

I’m also going to give a slight plug here to my co-host Ryan, as he’s just published a video interview with Elliot on his site havocinspired.co.uk where he asks Elliot about his career and how he got where he is today. Both definitely recommended viewing!

A/B testing and microcopy

Paul talked about microcopy last week and another article passed my way which further highlights just how powerful microcopy can be and how A/B testing can help to improve your calls to action. Dustin Curtis performed an experiment over the past few months where he tested a specific call to action on his website which prompted people to follow him on twitter and measured the number of clickthroughs various versions generated.

He started with the statement “I’m on Twitter.” Which led to a 4.7% clickthrough rate, then switched to a command “Follow me on twitter.” which resulted in an increase of 55%. He then went on to try a stronger personal command “You should follow me on twitter.” which increased even more and finally added a literal callout “You should follow me on twitter here”.
Overall, the clickthroughs increased by 173% showing just how much of an impact microcopy and A/B testing can have on your site and it might be something you want to look into.

Did Digg and YouTube just spell the end of the Internet Explorer 6?

Sometimes I sit back and wonder what life would be like without IE6 and the whole world is sunny, I sit in a lush meadow with my laptop, coding away without a care in the world… If only.
Every so often someone sets their sights on IE6 and declares war, most of the time we scoff, knowing IE6 has too many troops to be defeated, but two new armies have stepped into the ring, and they’re big armies at that. Digg.com and YouTube have both recently announced that they will be taking sides against IE6 sometime soon. This was highlighted in a blog by Chris Heillman.

A post on the Digg Blog shows that they’ve been researching the situation for quite some time, monitoring the reduction in IE6 use and weighing the number of visitors using the browser to the costs associated with developing specifically for it.

Admittedly, the audience of Digg might be slightly biased towards a more tech-savvy crowd, so these results might need to be taken with a potential overdose of salt, but it’s encouraging to see a fairly large outfit taking the time to research the situation and I’m sure that they’re not going to shut off support completely, but concentrate their bells & whistles on the newer, more capable browsers leaving just the content accessible for IE6.

YouTube have already started showing a message to IE6 users saying that they will be ‘phasing out support for their browser soon’ and recommending the user to upgrade. Chris points out this might not be as impressive as it first seems as 70% of YouTube’s traffic is from embedded media.

He also points out that both Digg and YouTube are social web sites, which are normally blocked by the kind of organisation which forces their users to use IE6, so the true impact of this news remains to be seen.

Back to top

Interview: Simon Collison on client collaboration

Ryan: OK, joining me today is Simon Collison. Hello, Simon.

Simon: Hello, nice to be here.

Ryan: And we’re here at the Future of Web Apps tour in Leeds, and you’ve just done a talk this afternoon, it was a very good talk, I really enjoyed it.

Simon: Smashing, thanks for that.

Ryan: And we thought it would be really good for our listeners to just cover a few of the things you talked about in that talk. Now your company, remind me your company name.

Simon: Er yep, Erskine Design. Or Erskine if you’re looking to impress, I think. Not quite sure where to stand on that.

Ryan: Where did that name come from?

Simon: It is, I think the origin of it means ‘upon the knife’, which is quite interesting. So, obviously, it’s a place in Scotland, it’s also an old saying and if you tweak it or someway, in this day and age, it means upon the knife, which we quite like for a design and development agency. We often feel as if we’re on the knife. So, it works quite well.

Ryan: Cool. And you started off your talk by telling about your biggest disaster, which I thought was quite interesting, but you were quite open about it and that was the Vanilla Pages.

Simon: That’s right.

Ryan: Just for the benefit of us listeners, would you like to tell us what the Vanilla Pages was, is…

Simon: Sure, definitely past tense, um yes. The Vanilla Pages was an idea that was brought to us and we worked on that for a client team, so it’s very important to stress that; it’s not our disaster, as such; we may have facilitated it. Basically, the Vanilla Pages was an idea for a web app that fitted a perceived niche in the fine food and drink arena. THe idea for the Vanilla Pages was that is was a 24 hours a day, 365 days a year tradeshow. Suppliers, wholesalers, buyers kind of creating links and making connections and finding new sales opportunities. On the face of it, we thought this was a good idea. Also, Erskine had only just begun, so we were looking for new and interesting clients and we met with the client we thought they had some good ideas and we spent some time discussing what the process would be. Now, obviously this was 2 or 3 years ago and our process is very different now – very well honed – but at the same time we had enough experience as a team then, we were kind of discussing the need to understand the audience, really get to the bottom of this niche and find out: “What do people really want, will they use ‘X’, will they want to do ‘Y’ abd so on”. And initially, it was like “Yeah, this sounds great” and we signed everything and we began work and instantly we found that our suggestions were being thrown out. There was very little room for us to use our experience to make suggestions and say: “have you thought about this?”, “why don’t wet a focus group together, why don’l;t we ask some retailers some questions” and so on. And as I showed in the presentation today, we then started to receive incredibly detailed and colourful Excel documents, pretty much telling us everything we needed to do, every nuance of the user experience was being dictated. Now, we’re not fools, we stood up for ourselves and we illustrated many warnings but it didn’t really happen and we continued the project and we launched it. It received quite a lot of advertising and it failed. And so, yeah, today I introduced the presentation with a video that was created for it and then proceeded to rip that video apart.

Ryan: Which was quite amusing.

Simon: And used that as a basis for everything else.

Ryan: I know that Ryan Carson’s been recording the talks, I’m sure that will appear on there.

Simon: Excellent. I’m sure this will come back to haunt me. I’m expecting an email from that client in the next few weeks.

Ryan: But you telling us about that site set up the entire theme for your talk, which was collaboration and the process of collaboration with your users and you came up with some, a list of points, a process that you kind of went through which; the first one was collaborate and then research and then… Can you just take us through that process?

Simon: Yeah, sure. I mean, to address the point of collaboration, I think, a point I made today was that it’s a collaboration across all kind of boundaries, so on one hand it’s the design and development team itself. So, to quickly summarise that, and this will be old news to many listeners, but essentially, the designer can talk to the developer; the project manager or, heaven forbid, account manager knows as much as the designers, the developers and so on; everybody is aware of every aspect of the project, or as much as possible. This gets away from that production line approach and allows the developer (to use labels here) to dictate, or suggest ideas, to the designer, and so on, because he or she is armed with enough information and understanding, through the process, to feel that they can contribute, that they’re not going: “I don’t know if this is relevant, but…” why not make the suggestion? So, a lot of collaboration within the office, if you like, if it’s an app for a client, then obviously look to collaborate with them as much as possible, so it’s not just a one-way process, so as many opportunities for focus groups, workshops, talking to stakeholders, investors, whatever that might be, and key to that, the intended audience, which was the main point today, as well, to collaborate with them from the earliest stage as best possible. In terms of the process, yes, collaborate at the top, it’s more of a reminder, through the process. So, we looked at things like research, prototyping, testing, rinsing and repeating that process really. If there’s an agile approach to what’s happening, then you know, there may well be a product launch, then loop back and go through the thing again. Yeah, and to summarise there again, it’s, we were talking about whether it’s waterfall, agile or a fast sprint. We wouldn’ make that decision until we’d spoken to the audience and we’ beginning to get an idea of what they might need, or how best to pitch this website or application.

Ryan: Which, I find quite interesting, because I seem to get the impression that, as a company, you don’t have a set process, so you basically, you know, a new client comes in and you’ll look at the audience and then you pick whether you’re going to through an agile process, or a waterfall process, whereas, you know, we hear a lot about, you know: “you must use agile, agile, agile, agile” or, you know: “waterfall’s best, waterfall’s best” and you seem to, you referred to it actually as: ‘Organic Collaborative Process’

Simon: Yeah, absolutely. I mean, it is very difficult to, in most situations where there’s a client involved, you need to respond to an RFP, or some kind of brief, you need to reach an agreement over what’s going to be done before they’ll say yes, we’ll give you ‘X’ amount of pounds and we’ll build this together hopefully. It’s very difficult to say “take a leap of faith with us, we will put some of the pieces together, shortly into the process, we need to find out more first, and get under the skin of what you want, what you’re intended audience might want.” So, that’s quite tricky, some of the greatest things we’ve worked on have been based in that leap of faith and we’re taking one as well, working with a client sometimes, you know. We’ve learned that it doesn’t always work out as it might look and they take a leap of faith with us. I guess a lot of it is, kind of, proving through previous work and illustrating how that process worked. So, it sounds a little trite and I never want anything to sound arrogant but a level of education, I think, commissioning for the web is difficult for a lot of people. If we can help them understand what they need to do and how we meet in the middle and how we collaborate then, you know, we’ll do everything we can, because that’s a great foundation for the project.

Ryan: Maybe slightly off the topic of collaboration, but do you price differently for different processes, so whereas agile’s much more extensive than just a waterfall method. Would you look at the project, pick which process you want to use, and would you price accordingly, depending on how thorough the process is, or do you look at a project and, you know, just price it the same across the board.

Simon: Yeah, that’s a killer question. It’s the… First of all, we try and be as flexible as possible and again that comes back to that leap of faith situation. There may be a ballpark figure involved early on. The ideal situation is that, if it’s a pitch, for example, we would kind of get the go ahead, if we’ve been fortunate, without having to be too specific. Hopefully, the illustration of our process and what we’ve done previously, and what we’re aiming to do can be enough. That is difficult. If the approach is going to be typically agile, it’s obviously a very different beast to a waterfall process, where you can pretty clearly define, you know, we’ll do A, B, C, D, we’ll end at Z – job done. With agile, who knows, because exactly how many kind of releases might there be? What’s going to be involved after the initial launch? So, very difficult. As a team, we democratically discuss everything, everybody is involved, and again collaborates on how we approach a potential job. Like a lot of people, and I’m sure there’ll be plenty of people listening who’ll empathise with this, we’ve burned many times, so we are extremely careful about it now. So, no set answer. We work with whatever flexibility we’re given.

Ryan: OK. Moving slightly on. You talked about logovisual thinking and these weird disk things

Simon: Yeah

Ryan: Which you looked to have lots of fun with, you put pictures up and everything and you want to just tell us s little bit about that?

Simon: Yeah, sure. The product itself is, yeah, LogoVisual Thinking, I couldn’t even begin to tell you why it’s called that.

Ryan: It’s the ‘logo’ bit, I can get ‘visual thinking’, it’ the logo bit.

Simon: Yeah, I’ve no idea. Maybe Mr Logo invented it, I’m not sure. That would be a great name. The URL, I’m pretty sure is logivisual.com, in fact, it is and they produce loads of products. I’m not affiliated with them in any way, I should make that clear, but I do wax lyrical about this stuff. Essentially, they are magnetic hexagons, but they also do all kinds of shapes and different tools and I think they’re really, they’re used a lot in business. You can just imagine the dry management meeting: “come on everyone, we’re going to imagineer for the next half an hour” and they’ll break these things out. It’s possibly easiest for people to think along the lines of Post-It notes, or using something like that. A classic example where we would use them is we would get a stakeholder or workshop team together and a few of us and we find that there are people in the room who are contributing a little less, you’ll have, you know, Johnny Smartpants who knows everything about Web 2.0 and he’s throwing all these ideas in, and there are some other people and you think “I wonder what they’ve got to contribute”, so give them a pen and a pile of magnetic hexagons and then give them a, let’s say, for simplicity sake, “list all the kinds of user you can foresee using this product or website” Go into detail, rather than say ‘government’, talk about specific roles, you know, what kind of people within a government department might use this thing and why. They all go away and, because there’s no pressure, the write whatever they want. We bring that together and then we’ll look at grouping these items in a particular way. The example I used today was audience grouping. We prefer to work with a broader brushstroke than the typical user persona, so you’ve got Johnny or Mary who, you know, Johnny does this, Mary does that, she knows about this but not that etc. Sometime we, and⁄or the client, forget exactly what Johnny’s supposed to be, we have to go check so with these tools, we’ll take everything that people have contributed and we’ll group them into 4 or 5, maybe, audience groups. We’ll then label those groups and then they will be in our minds throughout the process. So, for example, we’ll have a hierarchy, it might be that it’s a government site, it might be there’s a certain kind of user is ‘Hierarchy1’, a certain kind of group is ‘Hierarchy2’ and so on. And the outcome will be, we will do some lo-fi diagrams and look at where typically would somebody from this audience group arrive; what might might they do while they’re there; and, vitally, what action might they take, what might be there outcome, what do we want them to do. So we use these LogoVisual tools for things like that. Essentially we just have them around as whiteboards and they’ll be around for a project, we’ll move them around on the boards, because they’re hexagons you can group them beautifully and, yeah, I mean, have a look at logovisual.com, there’s some good ideas on there of how people are using it.

Ryan: And you talked about having a project space in your office, didn’t you, which you brought this picture of a, really impressive actually, all these things stuck to your walls and everything.

Simon: Yeah, it was. Well, that particular example was from the Erskine.com redesign, so we really did go hell-for-leather on that one. Yeah, we’re fortunate to have quite a large office space I’m not bragging there because it’s got no heating, single-glazing windows, it’s freezing, it hasn’t got enough plug sockets, it’s kind of rubbish, but we love it, and it’s a creative space.

Ryan: It’yours.

Simon: It is ours, which is wonderful, although we share with an idiosyncratic, little illustrator called John Burgerman, who’s gradually spreading himself through the office, but we love him. So, yeah, we set aside an area of the office, if there’s a spare computer, we’ll stick a computer in the middle, so we can access online information, but really it’s offline scrapbooking, so you know, we print out typefaces, we rip this out of magazines, classic stuff, as we produce wireframes, or any kind of, you know, back of a cigarette packet sketches, whatever they might be, or source material from a client, maybe, we just throw it all in this space. It acts as a constant reminder, so if you’re scrapbooking in a flickr pool, or, what is it, LittleSnapper, or something like that, that’s fine, but it can e difficult to share and it’s a bit out of sight, out of mind. With the project space it’s just there, and you can keep adding to it, and if you’re stuck for inspiration, 2 or 3 of us might, rather than just discuss this idea over Skype or, as you do when you’re in the same room, sad as that is, or sort of face to face at our desks, we’ll wander over to the project space, where we’re kind of surrounded by the project, and delve in and add to it, tear things up, I don’t know. It works for us; if you’re a remote team, and you’ve got people in different locations, it’s maybe not so good, but it’s a nice idea, and I think people like Clearleft and Mark Boulton, people like that, I’ve spoken to them and I know they do a similar thing. It’s just a, it’s a tip, but it doesn’t work for everybody.

Ryan: You talked about community and you had to rush through that a little bit, because your talk was overrunning, could you talk to us a little bit about that. Again you had bullet points of trust, and brevity and things like that. Could you just take us through what you were covering there.

Simon: Yeah, sure. Yeah, half an hour’s never enough really.

Ryan: It flies by, doesn’t it.

Simon: Especially when you waffle, like I do. Terrible – you should see me after a few pints, actually no, that’s a bad idea. Yeah, basically we have, they’re our kind of, what would you call them, they’re like little waymarkers or points to observe throughout the process, so through that early collaboration with the audience or the client, we’ll define some key aims and objectives, but they’re usually project specific, but I certainly believe that there are a number of conventions, if you like, or almost courtesy items to be aware of, when you’re looking to create a community around a website, so you mentioned trust, that’s something I really think is important, especially where you’re asking people to submit their own information, share information and kind of confide in the site, in a way, so it’s very important that the user feels safe, secure, this isn’t just a fly-by-night website. I don’t know why there aren’t more Web 2 applications that essentially fish, you know, imagine if flickr ended up being, you know, all that stuff and that was all going to be used in a way we didn’t understand. You need to build that trust. So we’ll look for certain devices, we might fall out with a client over their choice of a URL, because if they’re a business to business organisation, you don’t want something jokey. Also, who’s behind the site, are there humans behind it and how can we bring them into it, can we get them to write dome kind of introduction, can we make them visible, can we make them contactable? So, little things like that. And then other items on the list were classics such as, you know, brevity with content, making things easy to find, I’m sure that’s relevant, regardless of the subject matter, and so on.

Ryan: OK. You also mentioned having a features roadmap during the process of developing your site, do you want to explain why that’s benefit?

Simon: Yeah, I rushed through that as well, didn’t I? Basically, we often find that, if the first meeting with a client or, you know, if we’re building something for ourselves, grandiose ideas, you want to kind of do everything and I think it’s very important to bring simplicity into whatever you do it’s a bit of an obvious thing to say when it comes to responsible design, but at the same time, you know, 37 Signals and other companies have talked about this stuff for years and I think many of us have learned from it. Essentially it’s what are we going to do; when are we going to do it, sometimes it falls in very smartly with the agile process; what do we know about the audience, in terms of what we can throw at them and when. So, we obviously favour starting small. I was talking to somebody after the presentation about low expectations, take that the wrong way and it sounds quite negative, but I think, you know, it’s just putting the bar somewhere where you can reach it. I think it’s a very negative thing if you launch a site with all the bells and whistles in the world and then end up retracting too much after launch. I think it’s natural that some things will change and some things may be removed, but if you kind of visibly change your whole plan, because you haven’t thought it through, I don’t think that’s very healthy. So yeah, it’s defining a roadmap, as we call it, and probably others do as well, where we essentially outline what we’ll do, when and try to stick to that, but ensure it’s malleable, so as we learn more, we can rethink it, think let’s wait on that and the way we reflect that with the client, as well, in a more tangible way, is we try to get rid of all the sort of, the Basecamp noise and whatever other channels are in operation, reduce a project down to it’s deliverables, so we will have, I guess establishing a, if it’s not too pretentious to say a narrative to the project, so there’s point A, and there’s lots of things to click, on be they kind of sitemaps or research findings, through to batches of wireframes or comps or prototypes and whatever. We find that, in tandem with that roadmap thinking, kind of illustrates what we’re trying to achieve and when, and I think it can be reasonably easy for a client to buy into that, so it’s a case of OK, so, I guess it’s what you say and then backing it up, so proof as you go along. So that leap of faith is, kind of like, yeah, you were right. So, that seems to work quite well for us.

Ryan: Great, and you got everybody excited right at the end of your talk by showing them your ‘Ultimate Package’ [Laughs]

Simon: Yes, ladies

Ryan: That must sound very odd coming over a podcast

Simon: I’m sure it does, yes my ultimate package. OK. It would be really unfair of me to take credit for this, I do like the idea of conventions in web design and development, whether it’s navigation and using the word ‘About’, ‘Contact’. I think there’s plenty of other areas to create and do exciting things. Personally as a web user, I like certain constants. So, those kind of conventions I love. In terms of actually building websites, we use a lot of them in our development process. So, for example, when we start a project, we actually start building it, whether it’s a prototype or even if we’re just experimenting, we have a folder that we iterate, we’re on version 1.9 of our Ultimate Package at the moment, and we just drag it onto, we just FTP it.

Ryan: Like a template?

Simon: Yeah, basically. Responsibility for this goes to whole Erskine team, but specifically Greg Wood, our lead designer who is, kind of, the custodian of this thing so he’s very passionate about it. It’ll be up to Greg whether I’m able to share some or all of it with you all eventually, I don’t know, and I’m sure other people have their own versions. So, for example, you will have, in the Ultimate Package, some JavaScript files, the latest jQuery, some stuff to control certain functions and some JavaScript to help with IE6, PNG transparency, whatever it might be, and then a cascade of CSS files, so our main screen.css, with some basics in there, reset.css, our own version of Eric Meyers Reset CSS, and things like a scratch file, so if one of the, one of my colleagues wants to do some work in the CSS, they do it in their own file which cascades in, so, you know, Greg or somebody can approve it or ditch it, withough it really having any great affect…

Ryan: I like that. That’s a good idea.

Simon: on the main stylesheet, if you like, again that’s something that Greg’s introduced and we all find that really useful.

Ryan: Yes, that’s a good idea, I really like that.

Simon: And there’s a few other bits and pieces in there as well. The beauty of it is, if you start working, you want to start working fast, the external JavaScript, CSS and so on, is already linked up, so you can throw a function in very quickly, without thinking: “oh, I must, why is it not working? Oh, I’ve not called it in the <head> of the document” No, it’s all kind of there. You remove stuff as you go along, but it’s there. And there are things that help us with ExpressionEngine builds and a few rules in there as well, so that we’re all on the same page, if you like. If I’ve not worked on a project at all, the person who might have led it is on holiday, the client calls and they’re in a panic, I go into the code and I start looking for certain conventions: I know there will be a ‘Contents’ at the top of the main stylesheet, I can “Ah, 10.1, scroll down, find the flag for that” So, it works really well.

Ryan: And if we’re very, very lucky, we might get a chance to get a sneak peak at it?

Simon: I’ll have to speak to Greg. I’m really, I love the spirit of sharing.

Ryan: [Laughs] Greg’s baby.

Simon: Yeah, I don’t know if I owe him any more beer, but I’m sure that will be involved.

Ryan: It’s a good idea for people to think about and if they’re going to build their own anyway, I like the idea of a scratch file.

Simon: Yeah, just use your own, you know, your own conventions, if you like. I love the spirit of sharing in this community, especially we saw it through web standards, and everything else. I’ve really benefited from people sharing this kind of stuff, so, you know, hopefully we will. I’ll keep you posted.

Ryan: If not, there’s some ideas.

Simon: Yeah, I’ve already been asked today to write about how we go about producing it, so even if we don’t share the actual ‘Ultimate Package’.

Ryan: So, keep an eye on your blog or Twitter feed and that should be it?

Simon: Yeah, either myself or Greg will probably put something together at some point about that.

Ryan: Fantastic. OK, Simon, well thank you very much for taking the time.

Simon: It’s been a pleasure to be on boagworld.

Ryan: Thank you very much.

Thanks goes to Simon Douglas for transcribing this interview.

Back to top

Listeners section: Improving your design skills

David Smith

I’ve a question for you regarding how to improve my design skills in order to further my career.

I’ve been working professionally in the web industry for just over a year now. My current role involves web page design, web page development (XHTML & CSS) and some work with server side code.

Of these three aspects of my job I much prefer designing. Having listened to the feature of “Surviving the Recession” and hearing you telling us to specialise I feel that I would like to become primarily a web designer. However, I have no formal graphic design qualifications (my degree was in Music and History!), and although I have produced numerous successful websites for clients I don’t feel my skills are developed enough to compete with true pros like yourself!

Could you or any of your team/contacts offer me and others like me some advice on what I could do to improve my web design skills? I have considered courses but can’t seem to find any that fit my requirements.

I’d really appreciate it if you could take time to answer this question as I’m a big fan of the show and it would really help me to further my career.

Good question and I have to admit it’s something I often think about myself. I think a lot of it boils down to how you personally approach learning and seen as everyone is different this is probably going to turn out as quite an ambiguous answer, so I’ll go through some of the steps I use and have used in the past.

Learn how to use your graphics program, properly!

Personally I’m a big Photoshop fan, some people prefer Fireworks or various other graphics programs, it doesn’t really matter the principle is still the same, learn how to use them properly!

I’ve found that it can often be easy to think of a design in your head but converting that idea into Photoshop can be difficult if you don’t have a solid understanding of how to use the software. Equally so you can often find that your ideas are limited to your understanding of the software you’re using and as a result your work suffers.

Read books

And when I say read books I don’t mean for you to burn your brain out reading the Photoshop Bible from cover to cover (worst book I’ve seen for photoshop by-the-way, black and white images in the a graphics software book???), I’m talking about a good reference book. Pick a tool to learn an read that section.

I can personally recommend Ben Willmore’s Photoshop CS3 Studio Techniques (there is a CS4 version of the book but I’ve not read that one), which is about half the size of the Photoshop Bible, packed with tons of example images (in colour) and the explanations are concise but informative.

Watch examples

Video tutorials are cropping up everywhere these days and I love them, what better way to learn how to use graphics software than to be shown.

Lynda.com is a great place to have a look at as well. Short bite-size videos 3-5 mins on average that show you how to use the software through examples. It is a subscription service but you aren’t tied in for any length of time so you could simply pay for a month and watch as much as you like.

Challenge yourself

Its difficult to improve your skills without have a goal or objective, sitting down and saying “Right I’m going to improve my design skills” rarely works, you need to challenge yourself however you also need to be realistic. I’m not saying you should take on a huge blue-chip client and attempt to turn around a top class design as a challenge. Start small, push yourself and build upon your skills gradually.

Experiment

If you’re inspired by a piece of design work then try and figure out how it’s done, dissect it, try and learn how to achieve a similar effect, but obviously don’t rip it off!

You’ll find that the more you practice achieving various effects the more comfortable you’ll feel about taking on more adventurous projects which in turn will contribute to improving your skills.

Courses

Course are a tricky one because you have no idea how beneficial they’re going to be until you’ve paid your money and sat through a few lessons.

I went on a 10 weeks, intermediate to advanced Photoshop course a good while back and in all honestly I didn’t learn anything that I hadn’t already picked up from elsewhere.

Perhaps there are better courses out there? If you’ve had a good experience leave a comment in the show notes.

On the other hand you typically get a certificate or something to show for you effort which can go on your CV.

Conclusion

As I say everybody learns in different ways but the most important think to remember when developing new skills to just do it, learn and apply, take on projects that allow you to push yourself push yourself, do something different and try something new. You may be surprised with the results.

Back to top

161. In or Out

On this week’s show: Paul announces Micro-Boagworld, we discuss the pros and cons of outsourcing web work and see what recommendation the Boagworld forum has to offer.

Play

Download this show.

Launch our podcast player

Housekeeping

For a while I have been toying with the idea of doing a Micro-podcast that works in a similar way to Twitter but with audio. It would provide the opportunity to share hits, tricks and reviews too short for the main show. My problem was that I needed an application which made this as easy as posting a tweet. Anything more and it would prove too demanding.

Fortunately a new iPhone application has launched that does exactly that. Called AudioBoo it allows you to record 3 minute audio snippets that then get posted to a website, twitter, facebook and a podcast feed.

I am therefore pleased to announce Micro-Boagworld…

View Micro-Boagworld posts here

Subscribe to the RSS feed here

Boagworld AudioBoo Homepage

Back to top

News

Pricing and projects

Alyssa Gregory has written two good posts this week both relating to the pricing of web projects.

The first post tackles the notoriously difficult subject of How To Estimate Time For A Project. After all, time is money.

Estimating how long a project will take is tricky and although this post doesn’t provide any magic formulas it does provide good solid advice.

As well as considering the obvious deliverables Alyssa also recommends time for project management, reviewing work, debugging and client turn around. Finally, she recommends adding a buffer for the unexpected.

Of course, she doesn’t discuss how all of this time translates into your final price. How much you charge is a matter of conjecture. However, in a second post she does explore a related subject – How To Raise Your Rates.

In this post, she handles the sensitive subject of how to tell a client that you will be raising your rates for future projects. She suggests five techniques you should employ…

  • Give Notice
  • Set a schedule (make increases annual for example)
  • Make it fair (keep the increments small and manageable by the client)
  • Send it in writing
  • Balance it out (Balance your increase with an incentive – e.g. a special, a one-time discount)

Its all good advice and important too. As your skills and experience increase, you will need to ensure your rates reflect that. Knowing how to hand those rate increases is vital if you want to keep your clients happy.

IE8 and IE6

Microsoft have announced that IE8 will be released via the Windows Automatic Update starting on the third week of April.

The final version of the browser has been available since March and yet adoption has been sluggish. Hopefully Automatic update will change this trend significantly. However, it does not guarantee universal adoption. Although the update will be marked as important users will not be forced to upgrade. In fact Microsoft has released a blocker toolkit so corporate users can avoid the update entirely.

Worst of all, it is likely that the update will impact the numbers using IE7 more than IE6. IE6 users tend to be hold outs and are unlikely to upgrade now when they did not upgrade to IE7.

The only hope is that many IT departments have a policy of running a version behind the current release. If that is the case, the arrival of IE8 may encourage some of them to adopt IE7.

The entire web design community is keen to reduce its level of support for IE6 and hopefully this update will allow that. In fact, another post this week entitled – 10 Cool Things We’ll Be Able To Do Once IE6 Is Dead – points out just what a wonderful world it would be.

Once IE6 is gone we will be able to…

  • Use child selectors
  • Make full use of 24-bit PNGs
  • Use attribute selectors
  • Use a wider range of display properties
  • Use min-width and max-width
  • Throw away 90% of CSS hacks (and 90% of the reasons for needing them!)
  • Add abbreviations that everyone can see
  • Trust z-index again
  • Save time and money
  • Enjoy ourselves again!

Simple and impressive design techniques

Last week I was doing a consultancy clinic with a developer who wanted advice on designing his website. He was a great coder but did not have much experience designing.

Although I recommended The Principles of Beautiful Web Design by Jason Beaird it would have been great to point him at the latest Smashing Magazine post – 10 Simple and Impressive Design Techniques.

This post has some easy to implement techniques that are ideal for developers trying to improve their design skills. Techniques include…

  • Adding Contrast
  • Using Gradients
  • A Better Use of Colour
  • Improved Letter Spacing
  • Changing Case
  • Use of Anti-Aliasing
  • Adding Imperfections
  • Implementing blurring
  • Careful Alignment
  • Trimming the Fat

Read the whole articles for more details and great examples of these techniques in action.

Influencing user behaviour

A big part of good design is guiding the user to complete the actions you want. Influencing user behaviour can be achieved through a variety of techniques. However, it can often be hard to know where to begin.

One resource that might help you influence user behaviour is The Design with Intent Toolkit. This is essentially a printable ‘cheat sheet’ that suggests a variety of techniques you can apply to your projects.

The techniques do not just apply to web design but all aspects of design. Consequently not all of the techniques will apply. However a lot do, ranging from the use of metaphors to setting up good default options.

Some of the techniques contained in this cheat sheet are also beautifully demonstrated in another post I wanted to mention. Entitled 12 Excellent Examples of "Lazy Registration" it addresses the problem of user signup.

Essentially it is a post that showcases methods for getting around the problem of user registration. As the post itself says…

Signup forms have long irked the casual visitor. During the process of discovery, nobody wants to stop and fill out details before they can "unlock" the rest of the site’s potential.

It has certainly been my experience that signup forms are a barrier and so it is interesting to see how different web applications have overcome the problem.

Back to top

Feature: When to outsource web work

Your in charge of your organisations website. It has become moderately successful and now you have a decision. Do you hire a full time web designer or outsource to a web design agency?

Read the full article

Back to top

Listeners feedback:

In this week’s listener feedback section we look at a series of recommendations from the Boagworld forum…

A good introduction to Javascript

Jake writes: I’m curious as to whether or not anyone on the forum has strong opinions on a good introductory javascript book? And by introductory I mean something that’s more about initial learning steps such as syntax, etc. and then talks about best practices.

Doug answers: You might want to look at one of the books out for coding in jQuery, if you’re planning on going in that direction anyway. As for how to learn javascript I usually push people towards Lynda.com.

Matt also replies: Awesome book – DOM Scripting – I’d start with this before jQuery as I think you need some javascript knowledge to use jQuery to its fullest.

A good but free survey tool

Simon asks: I want to create some simple(ish) survey’s to get clients to fill out after a training session. I know of some paid for solutions, but does anyone have any suggestions for any free tools?

Laura replies: For something short, I’d use the survey function on PollDaddy. You can get up to 100 responses, and I think ten questions. Ten isn’t many, but you can do conditional branching for free, which is rare, and good.

I’ve also used SurveyMonkey before, it’s clean and simple.

A review of Clicktales

Peter shares his experiences of Clicktales…

On the recommendation of Paul, I tired out ClickTales.com; and I have to say the results have been interesting (sad, in my personal case) to say the least.

For those of you not in "the know", or missed episode 141, ClickTales is an app that lets you record and review the actions of your website’s visitors. And I’d agree with Paul: inexpensive, revealing, but limited in essence because you can witness what a user goes through.

In my case it was most effective because my results have been telling me that I should redesign my website’s structure completely… so I decided I should start from scratch all together and redesign. :)

Web Design for ROI

Bill reviews Web Design for ROI by Lance Loveday & Sandra Niehaus…

Each year I find one or two books that really stand out. This book, Web Design for ROI, changed the way I look at current eCommerce projects and helped me identify better strategies for building web sites.

Rich adds: I agree this is an excellent book.

Not too much new for a seasoned pro like myself, but I did still learn a fair bit and I’d recommend it to anyone with an interest in websites that make money.

Pro Paypal e-commerce

Finally, Ian shares an extensive review of the book ‘Pro Paypal e-commerce‘. Ian writes a very thorough review but here are a couple of highlights.

I thought this was a great read. It’s not often you finish a book and feel confident you have all the information you’re going to need to complete your project. The book isn’t just technical but also has lots of useful nuggets on business practices and background on payment systems in general for those that are unfamiliar with them at this level.

I feel confident in recommending this book to anyone who is involved with developing E-commerce systems or is going to be in the future. The author Damon Williams has a very readable style that is mercifully faux-humour free but never dull and explains everything clearly and concisely and despite its relatively low page count at 260 pages or so, still manages to cover a lot of ground without ever feeling as if it’s being too terse.

For more reviews about everything from web design books to software visit the Boagworld forum. We are also going to do some cool new stuff on the forum over the coming weeks. Keep an eye on it. We have already added a Jobs category for those of you who are looking to hire a web designer, so be sure to check that out.

Back to top

 

158. Home

On this week’s show: We share the highlights of SXSW, discuss home working, and interview Rob Borley about project management.

Play

Download this show.

Launch our podcast player

Housekeeping

Headscape still recruiting!

Headscape is still recruiting. We are looking for an enthusiastic, talented developer to join our team, working from of our offices in Hampshire. For more information see the job advertisement on Boagworld.

Back to top

News and events

The best of SXSW

Well, SXSW is over and I am back in the UK. But what happened at the conference? What was the big news this year?

That is actually a hard question to answer. There is so much at SXSW that it is almost impossible to get a sense of everything that is going on. Even if you could attend every panel that isn’t always where the real action takes place.

The real conference often happens at the parties and in the corridors. In fact, more than one spontaneous panel was started via Twitter, thanks to official panels being full.

Panels this year ranged from the downright dull to all out flame wars! One that I unfortunately missed was "Is Spec Work Evil!". However, Marcus attended and tells me it was particularly fiery. Personally, I am very much against speculative work as I have said before. However, not everybody would agree and the panel seemed to reflect this diverse opinion.

One panel I did make was Paul Annett’s amazingly inspirational talk on Easter Eggs and design twists. The talk focused on the little things you can add to your site to make users go ‘oooo that’s clever’.

Too often I neglect such ‘bells and whistles’ in favour of usability and accessibility. Paul demonstrated how these different priorities can sit side by side without compromising each other. He showed some great examples including the hidden arrow in the FedEx logo and the vines on the Silverback website.

fedex logo

The final panel I want to mention is ‘Being a UX Team of One‘ by Leah Burley of Adaptive Path. To be honest the title of this one was a little misleading (at least from my perspective).

What I took away from this session was that design should not be a solitary activity, solely reliant on the creative inspiration of one individual. Leah seemed to be arguing for a more collaborative approach especially at the wireframe stage. She proposed that all of those involved in the project should sit down together and hammer out the wireframe designs.

This addressed two separate problems we have been having at Headscape

  • The developers concerns at not being involved early enough in the process.
  • The question of who should do wireframing – the designer or the IA person.

Best of all Leah’s presentation was very pragmatic. She provided lots of practical approaches that encourage idea generation and collaboration. I highly recommend listening to the podcast of this when it is released.

Browser testing and IE6

In other news, there seems to have been a lot written about browsers this past week. Three stories in particular caught my eye…

  • .net Magazine seems to have hopped on the ‘dump IE6′ bandwagon – My opinion is the same as that of Jeremy Keith as expressed in last weeks show. It is not a matter of dropping IE6. We should instead being deciding whether we wish to offer it the same level of support as modern browsers. I am entirely in favour of providing IE6 with a basic stylesheet that avoids its shortcomings. However, I dislike the idea of dropping it entirely.
  • Microsoft has released SuperPreview this week that allows Windows users to test different versions of IE simultaneously. I have to say this looks like an impressive tool. It allows you to view IE6 and IE7 side by side. It also has many other tools that may also be useful. Support for IE8 and other browsers will follow and although it is currently in beta, I think it will quickly become an indispensable tool for Windows based web designers. Just a shame there is no mac support!
  • Finally, Sitepoint have written a brief outline of how to create the perfect browser testing suite. Ideally for those starting out it lists various online browser simulators, virtual machines and desktop browser emulators.

Browser testing continues to be a pain in the neck and I for one would be willing to pay for a decent way of streamlining this whole process. This is especially true now that IE8 has been officially released and we have another browser to add into the mix.

Screenshot of Superpreview

A simplicity case study

A few weeks ago I wrote about the importance of simplifying your website. Well, this week Gerry McGovern has written the perfect case study to support the argument I was putting forward.

Removing poor quality content increases customer satisfaction‘ talks about how the Microsoft website consists of a staggering 10 millions pages. Of those pages 3 million have never been viewed!

The post goes on to explain how the Microsoft Office team took a different approach with their site by removing irrelevant pages. According to McGovern…

By weeding the garden, the top task pages became easier to find. But just as importantly it became harder to find a minor task page when you were looking for a top task page.

In short, removing pages reduced noise. Disturbing though it sounds, I think we could all learn something from Microsoft’s example.

An introduction to Microformats

My final post today comes from Richard Rutter’s blog. It is basically an introduction to Microformats aimed at the non-geek. He wrote the post because he recently found himself trying to explain microformats to a client and could not think of a good post that covered the subject from their perspective.

Personally, I am not sure it is necessary to tell a client you are implementing Microformats. The cost of adding them is so small and the benefits so hard to explain, that you maybe better off just doing it.

That said, this is an excellent post and if you are struggling to understand the point of Microformats, this is certainly worth reading.

Back to top

Interview: Rob Borley on Project Management

Paul: So, joining me today is Mr. Rob Borley. Hello Rob.

Rob: Hi Paul, how are you doing?

Paul: Very well indeed. Good to have you on the show. It’s been a little while.

Rob: It has, It has. It’s weird hearing the show above you, um rather than being below.

Paul: Oh yes, because you sit upstairs, don’t you?

Rob: Indeed.

Paul: Do you actually hear it?

Rob: I do. It’s like have a little base bin ?

Paul: Awh. So, um, we have kind of been thinking for a little while that we need to get someone on the show to talk about project management. And the idea was we’d get some high profile web design project manager to come in and talk about web design project management. Then I realised, um, that I can’t actually think of any. You know, I really don’t know of any kind of web design project managers out there, other than obviously the people that work at Headscape.

Rob: Well, maybe there’s a gap in the market.

Paul: I think there is a gap in the market.

Rob: (unintelligible) celebrity project manager.

Paul: Well I think that’s somewhat of an oxymoron, but setting that aside, lets shift around a bit, yeah, so, um, so we thought, lets get you on the show. Um, now, you’re quite and interesting case because you started of as a techie.

Rob: Yes.

Paul: And you became a project manager.

Rob: Yes.

Paul: And, so, um, let’s start by talking about the role of project manager. How would you describe your core role? What is it that you do? I should know this I guess.

Rob: Well, you mean other than manage projects.

Paul: Ok, you just have to make a joke out of it. But you know what I’m getting at.

Rob: Yeah yeah. I mean, I guess, um, the main thing that we do is shovel shit, really. We deal with crap. You know, the main thing project manager would do is a filter between clients and the production team for the project. I mean, there are a couple of stages I guess. So you’ve got the planning part of the job, which is essentially working out what it is you need to do, um, making sure you got the results to do it, plotting a nice time line so they can all fit as far as having deadline. And then you’ve got the people said, because really project management is a people job. You need to know how to get the most out of all the people that are in your project team, um including the client. You need to include the client in your thinking, always. Yah, that’s essentially what we do.

Paul: Yah. It’s a people person thing. I always thought you were so charasmatic. Ok, so, I mean, I guess the question is, if you look at the kind of, if you look at Headscape, and the way that we’re organised, we’ve got four developers, four designers, and three project managers. I mean, that’s a lot of project managers. And, you know the question is, why, why have project mangers at all? Why couldn’t the designers and the developers do the job? Why couldn’t it be spread across multiple people? Justify you exsistance, Rob.

Rob: Yeah, this question kind of makes me nervous here. I feel like I’m re-interviewing for my own job. Not that I interviewed in the first place, but, I guess in one sense, if you were in a small project environment, you could almost get away with one person. If, you know, its a one person job, you could get away with them managing themselves for a limited amount of time. Um, but, as soon as you get beyond jobs which are more than one person, um, and go on for an extended period of time, you start needing to provide some glue to stick things together. You need someone whose got an overview of everything that’s going on. You know, the developers have got a very developer mindset about the way things happen. Designers are the same way, they know about the design stuff. Um, but actually translating what the client wants and feeding that into both areas and bring them together is what’s missing, if you don’t have a project manager.

Paul: So, to some degree, project management becomes necessary with scale. The bigger the projects, and the more complex the projects, then the more a need for a dedicated project manager.

Rob: Yeah, definitely. I mean, I guess the real role of a project manager in these situations is the facilitator. You’ve got all of these tools which are basically your resources, your developers, your designers, um, and you need to be able to enable them to work effectively together to produce what the end product is going to be.

Paul: So here’s a question that I didn’t pre-give you, in advance, which is always the best type. Why, why, why become a project manager? What made you – because you were heading up our technical development team, you were, you know, you were doing very well. Why did you feel the need to get involved in what you call shit shoveling?

Rob: Well, I think my main motivation was, Headscape was growing, and we started employing all of these younger, more dynamic, much more talented, better looking developers, that were basically going to show me up. So I figured that before I got shown in true light that I was going to need to move somewhere else. Um, no, well that’s partly true. Really, I think, its the people’s aspect that I’m really interested in. A good project manager is someone who is able to understand how his resources or how her resources work and how your clients work, and joining the two together. Um, while I quite like writing code really, I’m not passionate about it. So that side of it, you know, I reached as far as I wanted to go, and I really enjoy the people thing.

Paul: Ok. So what other, I mean, what other kind of characteristics do you think make a good project manager, obviously the people skills you talked about, what other, I mean if there are other people out there going well actually I’m not that passionate about coding, or I’m not that passionate about design, but I am passionate about the web, I do like the web design process, perhaps project management is the way I ought to be going. You know, what skills, what characteristics do they need, what personality traits do they need?

Rob: I think well, you need to be able to plan. Um, you know, planning is very very important. If you plan well, then your project will usually go well.

Paul: I like the cornification in that.

Rob: You have to be able to predict the future is helpful.

Paul: Yes.

Rob: A major part of what we de in the planning stages is assessing risk. You know, so, we’ve got what we’re starting with, we’ve got what we want to achieve, and we’ve got a time scale, now we need to work out what things might appear that are unforeseen, which are going to affect us reaching the time scale. So being able to foresee the future is helpful. Um, and so planning, being quite analytical and thorough. The logical background I have from being a programmer, a developer, is really helpful because you have to approach project management in a very analytical way, to make sure you don’t miss things. So there’s that side of it. And then there’s communication skills. You not only need to be able to communicate with a client affectively so they show that you understand what they want, um, and they understand where you are with the project, and they’re happy because a happy client makes everyone happy. But you also then need to communicate that with the various personalities in your team. You know, whether thats the developers locked up in a dark room with no social skills, or the crazy charismatic designers who…

Paul: You’ve just gone with stereotypes that so don’t apply. If I look at our team, no offense to our designers, they’re the ones that sit in the darkened room with their nose right pressed against the screen. And the developers are the ones that are crazy and never do any work.

Rob: (unintelligible) something about reading personalities. No, but you see my point. You’ve got these almost extremes, especially in the web, I guess, in the web world, you’ve got these extremes of personailities which somehow you need to be able to communicate with and put it all together and so, yeah, that’s an important skill. I think the third area, is to be quite relaxed about life. Because things will go wrong and do go wrong, it doesn’t matter how well you plan and how good you are at predicting the future. Stuff will appear that is completely unforeseen and will completely throw (unintelligible). And everyone gets really upset and people will shout at you and it goes a bit nuts. Um, and if you go nuts as well, you project team falls apart, because they look at you as the calm rudder in the storms of life. I can feel my other project manager buddies laughing at me, um, but if you’re calm and you can not get stressed at that but actually see, try and find a clear path through a very stressful situation, then really helps.

Paul: I would so be the worst project manager in the world. I’ve got the attention span of a newt, I’ve got no organisational abilities and I get stressed at everything. So overall, I think I’d fail.

Rob: Yeah, stick to web celeb.

Paul: Yes, I’ll come up with some other title that sounds good. Um, ok, so you talked about this really is, I can honestly say, a foreign area to me. Right? You talk about planning a project upfront. I’m not a planning person. Right? And there seems to be so many variables involved in a project and so much as you say, that can potentially go wrong. How do you plan it? I mean, you know, the kind of thing that you always talk about, when you talk about project management is endless gantt charts that seem to be outdated in about 5 minutes, sort of kicking a project off. How to you effectively plan a project?

Rob: Um, well, we do use a gantt. We always start a project with a gantt. And, um because it seems like thats what project managers are supposed to do, so we justify the time with a gantt. Um, but you do need, um, I think assessing risk is something that is vital in successful project management. Its something that we’ve been doing at Headscape, um, increasingly more over the last year or so otherwise this need to actually spend time highlighting what could actually go wrong here. So, you look at, I’m not going to be able to think of any examples now, but a particular, let’s say you building a shop or something. So potential things which could delay that project would be: the client not getting around to telling you what the products are on the shelf and content population is a big risk on meeting a project deadline, because it is out of your control. So, its like, I need the content by this date, and he needs to put the content in by X date. If the client doesn’t do it, there’s nothing you can do about it.

Paul: I’m guessing integration must always be a big risk. Integrating with third party applications.

Rob: Exactly, so if you’ve got some sort of third party database or a web service you’ve got to pull in, something that you’ve done a bit before, but you don’t know anything about, that’s a risk. Because you can guesstimate what’s going to happen, but its unforeseen. And so, the trick is basically, to find all the tasks that have these risks and then multiply (unintelligible) an hour by some random number. And then make the rest up as you go along.

Paul: So what about once the project gets going, how, what techniques and tools maybe do you use for monitoring and controlling the process and trying to keep on top of everything.

Rob: Yeah, I mean, there are lots of tools out there, obviously, lots of funky web-based ones, um, there is no substitute for talking to you team. Um, trying to (unintelligible) email or basecamp or something is impossibly without talking to you team. So, communicate. It’s a big part of what we do. You have to talk to the people doing the work, you have to talk to the clients, um you have to keep the lines of communication open. Um, but as far as actually keeping track of what’s going on, we do use basecamp, um which is great for managing lists, basically, you manage lists. So from our gantt shell, we’ll break it up into a series of tasks if you like, wide areas, um, and then, (unintelligible) ask people to add comments to them and take them off and then we’ve got kind of an overview of where our project is. Um, and hopefully from there, and when we’ve got the gant shell, we’ve got some dates, some milestones and reminders like you should have done this by then, um and so, you use that to kind of keep track of where you are.

Paul: Cool. What about, so that’s kind of dealing with the internal side of things. What about when it comes to the client, I mean, you talked about, you said earlier, a happy client makes everybody happy kind of thing. So what makes a client happy? What are the things that really, or perhaps turn it around the other way, what are the things that really piss of a client and where can it really go wrong?

Rob: This is really where the people side of it really comes in because every client is different. Some clients want you to talk to them for five hours a day, hold their hand, you know, spoon feed them, and some clients just want to know when it’s finished. So initially, when you’re kind of trying to assess your project team, if you like, your resources and what you’ve got, assessing the personality of your client early on, will really put you in a good place. Um, but, I guess, general principles, if you’re honest, it helps. Um, so, be realistic about what you’re telling your client is going to happen. Don’t promise the Earth by yesterday. Because then you won’t deliver and then they’ll get upset. If there’s going to be a problem, if things have slipped for some unknown reason, then tell them as soon as you know. Tell them as quickly as you possibly can. Um, manage their expectations is kind of the phrase that we use a lot. You gotta manage you clients expectations so that they’re not expecting something that you can’t deliver. And um, and then that limits the amount of upsetness that they get.

Paul: Slippage is a big one, isn’t it? This kinda whole area of things like, you know problems you kinda face, things, like slippage, scope creep, non-delivery, I mean, how do you have any kind of broad techniques for dealing with these kinds of things, or is it just kinda communications thing again.

Rob: It’s mainly I think a communication thing again. Um, part of the planning stage is trying to asses these risks and so you try and build in contingency to cope with those, and if you’re building enough contingency, you deliver the project early and that makes everyone really happy, even if its a long project, you deliver it early, you’ve exceeded their expectation also. Um, so I think, if somethings going to slip, I think you should say you’ve got to be honest. Sometimes things are just out of your control, so you’re two weeks before the end of a project, you in the middle of snagging, your lead developer goes down with appendicitis. There’s nothing you can do about that, and so you just need to communicate with the client and hope they take it well.

Paul: So wishing everything works out, I’m loving that approach. Ok, so, um, let’s finish of with a piece of generic advice. Either people starting out in project management or those that have had project management foisted upon them. You know, whats the kind of one piece of advice that you would leave for people?

Rob: Get to know your team. I think that’s the main thing I would say. Um, its kind of like, when you drive you car, you’re environment is a very organic, dynamic thing, you know what it really what’s going to happen and the only thing you’ve got to get you through it is that you understand you car. You know almost instinctively how it works, how to drive it it, if you get to that situation with your team, then whatever the project throws at you, you kind of, you can deal with it. If you understand how you client is going to react to a certain situtation, you can intincfully deal with it. And it keeps the stress levels low. You need to find ways of managing your stress levels.

Paul: There you go, that’s great advice. Thank you vert much for that, it was wonderful. I really appreciate you coming on the show.

Rob: My pleasure.

Thanks goes to Meredith Marsh for transcibing this interview.

Back to top

Feature: Home Working

I was recently contacted by a friend of mine Marieke Guy about writing a guest post for her blog on remote working.

I have been working at home for over 7 years now and am a great believer in the benefits. However when I actually sat down to write the post, I realised just how long it has taken me to find the right way of working.

As a large number of people who listen to this podcast work from home, I thought I would share my experiences to date and my hopes of where remote working will take me in the future.

The reality of home working

Back to top

157. SXSW09

On this week’s show: Andy Budd, Daniel Burka, Jeremy Keith and Joe Stump answer listener questions in a live Boagworld special from the floor of SXSW.

Play

Download this show.

Launch our podcast player

Each year the brightest minds in the web design industry assemble in Austin Texas at SXSW. Never ones to miss a chance to hang out with the cool kids, both myself and Marcus have also attended for the last coupe of years.

The panel at Boagworld Live

This year we thought we would record a live podcast while at the event. We begged a room from the lovely people at SXSW and bullied some web celebs into coming onto the show to answer questions.

For an hour our 4 guests answered all kinds of questions sent in by email, submitted via chat and from the audience that attended.

The guests included…

Questions ranged from ‘if you were a web app which web app would you be’ to ‘when can we drop support for IE6′. The debate was lively with lots of good humour and differences of opinion. With over 60 people there the atmosphere was great. Thanks so much to everybody who attended.

With 4 guests as well as myself and Marcus, we felt it was too much to ask of our transcribers to do the whole show. I therefore hope you understand the lack of transcript. If we can we will add one at a later date.

Thanks to Zeke Franco for the photograph

What's with the attitude?

We face many challenges as designers and developers – IE6, the fast pace or change, meeting the needs of disabled users. However, I am coming to believe that our biggest challenge is our own attitude.

This post started off as a bit of fun. It was going to be another spoof, this time in the form of a top 10 list of harsh truths. However, as I began writing I found myself actually believing many of the points. In the end I was forced to scrap that draft and start from scratch.

I am worried about how people see us as web designers. More than that, I am worried how we behave as web designers, both with our clients and towards one another.

Let me explain what I mean, starting with the more obvious and damaging area – our attitude towards clients.

Our attitude towards clients

I speak to a lot of web designers and in all of those conversations I rarely hear a positive word said about the people who keep us employed.

The overwhelming attitude towards clients is one of disdain. Oh, we hide our feelings reasonably well when dealing with them face to face. However, behind their backs we are often critical and derisive.

We see clients as stupid, awkward, or intent on derailing the project. In short we see them as the enemy.

We have to change this attitude. Not only is it damaging to the relationship, it is also untrue. Just because somebody doesn’t understand the web, does not make them an idiot. Without a doubt they will be far more knowledgeable than you in many, many areas.

You cannot have it both ways. On one hand we set ourselves up as experts who should be listened to. On the other, we are surprised that the client doesn’t instinctively know, understand and except everything we suggest. If they could, we would not be the expert!

We need to recognise the critical role the client brings to the web design process and stop trying to exclude them for fear they might bring something different to the table we might not like.

Stop treating your clients like children and start treating them as peers. That means listening to their contributions even when it does not sit comfortably with your own views. This involves us losing our sense of moral superiority.

You do not have the moral high ground

I do not hide the fact that I am an evangelical christian. That means associating myself with some people who have an enormous sense of smug satisfaction and moral superiority. Some of these people really think they are ‘Gods gift,’ literally! However, they pale in comparison to the moral and intellectual snobbery I encounter in the web design community.

I am fed up with web designers who judge others (and their own clients) with such passion and vigour it borders on the fanatical.

We are not poets, artists or preachers. We do not have the luxury of free thinking theory. We should be pragmatists that work in the real world and solve real world problems.

The problem is that most of our high minded ideals are nothing more than ego. It is about exalting ourselves at the expense of others. Let me give you a few examples of what I mean…

Why doesn’t your site validate?

I can’t believe they code in .net

He is always asking people to retweet his posts.

Oh, they are just link baiting

Comments like that are just about pulling others down. Validation isn’t everything and how can you judge somebody’s decision to code in a certain language without any background information? Hell, what does it matter to you anyway? As for link baiting and retweeting – what is wrong with wanting to drive traffic? There seems to be an attitude that desiring your site to be popular and working towards that end, is in someway wrong! Admittedly new traffic is not the whole story but it is a part of it.

Promoting your sites or services is not desperate or needy. It is good business. If all you offer clients is moral superiority and a well built site, then you are only offering them half a service.

I am not saying there are no lines. I do not condone black hat SEO techniques and I hate SPAM as much as the next person. However, I think we need to drop the attitude and consider the broader picture. We need to consider the business behind the site.

Stop trying to be intellectually superior

Unfortunately we do not just like to feel morally superior, we also like to feel intellectually superior.

We dress our profession up in impenetrable jargon and give ourselves fancy job titles. In many ways we are like teenagers trying to appear more grown up by smoking and drinking.

I guess this is not surprising. Our industry is barely in its teens. We are trying to find our identity and justify our existence. However, in the process we are in danger of becoming elitist and inaccessible to outsiders.

Take for example the recent rash of Top 10 posts. It is something I have started doing myself and have received a massive amount of criticism for it. I have been accused of dumbing down, catering for the lowest common denominator and being desperate for traffic.

Indeed top 10 posts do drive more traffic. That is because people like them. They like them because they are accessible. They are easy to scan and easy to assimilate. In what way is that bad?

Those who criticise do so because they feel that in some way these posts cheapen the industry or devalue what we do. I get the same criticism about my podcast. We joke on the show and have fun. We make the information accessible. Therefore we must be devaluing it.

In my opinion this is a view driven by insecurity. By wrapping up what you say in long words and impenetrable jargon you can hide the truth. You can sound better than you really are.

Unfortunately this just isn’t true. By making it impenetrable you are actually hiding its worth. By explaining what you know in a clear and accessible way you demonstrate its real value.

The desire for exclusivity

All of this is driven by a desire to the ‘cool kid’. Perhaps it is a hang over from our school days when geeks were far from popular. We try to impress and dominate, when we should be empathising and working together.

Another manifestation of this cool kid mentality is our rejection of anything mainstream. As soon as something becomes popular we drop it like a stone. Now our clients are talking about twitter, we accuse them of ruining it and start looking for the next thing. We want to be exclusive, special, different.

The trouble is the mainstream pays the bills. We need to break out of our exclusive little bubble and try to associate more closely with that mainstream. We need to understand what the general populace are embracing and go with that, even if it means still supporting IE6.

Conclusion

This post is aimed as much at myself as anybody else. I catch myself doing many of the things I have written about here.

In many ways the web design community is awesome. There are not many industries where direct competitors talk to one another so openly and freely. However in doing so we have become somewhat insular and very intense. I think sometimes we are under the impression that we are shaping the future and that every choice we make is of crucial importance.

At the end of the day we are just building websites. We need to get some perspective.

Thus ends the rant :p

A demonstration of graded browser support

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

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

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

Starting with the basics – HTML

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

Consultancy Clinic site viewed in Lynx

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

The pretenders

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

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

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

Consultancy Clinic Website viewed in IE 5

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

Dealing with IE6 and above

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

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

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

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

Consultancy Clinic website in IE 7

A watermark image is highlighted in this screenshot

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

The bells and whistles

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

Consultancy Clinic Website in Firefox

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

Consultancy Clinic website in Safari

Conclusions

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

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

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

150. User Manipulation

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

Download this show.

Launch our podcast player

News and events

The $300 Million Button

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

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

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

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

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

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

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

Read the ‘$300 million button’

The UK government and graded browser support

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

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

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

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

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

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

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

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

BBC Graded Browser Support Table

Read the UK government guidance on browser testing

50 Illustrator tutorials

List of Illustrator tutorials

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

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

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

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

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

Read 50 illustrator tutorials every designer should see

A new approach to PNG Support

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

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

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

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

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

Download DD_belatedPNG now.

Back to top

Interview: Liz Danzico on User Research

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

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

Paul: Okay.

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

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

Liz: Well I wouldn’t go that far.

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

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

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

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

Paul: Uh huh.

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

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

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

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

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

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

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

Paul: Yeah, that’s good.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Liz: My pleasure.

Thanks goes to Jason Rhodes for transcribing this interview.

Back to top

Listeners feedback:

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

Back to top

Snape and Keith, separated at birth?

145. Baby Jack

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

Download this show.

Launch our podcast player

Watch the behind the scenes video

Housekeeping

Two pieces of housekeeping before we begin:

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

News and events

Google goes social

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

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

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

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

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

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

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

In browser web development tools

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

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

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

Other tools featured include:

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

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

From tables to CSS and back again

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

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

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

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

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

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

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

Advice for long term success

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

From reading the article I took away three lessons…

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

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

Back to top

Feature: Successful communication

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

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

Back to top

Listeners feedback:

Sign-off and payment

We have this question from an anonymous listener:

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

Ok, so picking this apart from the top:

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

Contracts should be made up of two parts:

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

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

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

Ok, more detail… the contractor wants final payment:

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

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

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

Back to top

 

143. Partnership

On this week’s show Paul and Marcus discuss how to promote your web application, ways to improve the client/designer relationship and tools for managing your font library.

Download this show.

Launch our podcast player

Watch the behind the scenes video

News and events

Obama top technology promises

One of the most exciting things about being at this years FoWD conference in New York was that I got to witness the election of the next U.S. president.

Whatever your political persuasions it was a landmark election. Not only will Obama be the first African American president he is also probably the most technically aware.

Obama campaigned aggressively online, from a dedicated YouTube channel to Obama pages on Facebook and MySpace as well as Twitter feeds. He even had his own iPhone application.

So what can we expect from this tech-savvy President? How will he shape the future of U.S. online presence and possibly that of the entire web? An article on tgdaily entitled ‘Barack Obama’s Top technology promises‘ gives us a roundup of various technological promises from Obama’s speeches. These include:

  • A commitment to Net Neutrality
  • A desire to expand broadband penetration in the U.S.
  • A review of the current wireless spectrum usage
  • Tougher legislation around online security.

Of course, promises made on the campaign trail are one thing. We shall see what the reality turns out to be.

Could Microsoft consider adopting Webkit?

Talking of things that may never be, a young (and very brave) developer at Microsoft recently asked Steve Ballmer:

Why is IE still relevant and why is it worth spending money on rendering engines when there are open source ones available that can respond to changes in Web standards faster?

Ballmer’s response was surprising to say the least:

There will still be a lot of proprietary innovation in the browser itself so we may need to have a rendering service. Open source is interesting. Apple has embraced Webkit and we may look at that, but we will continue to build extensions for IE 8.

Although some have seen this as a sign that Microsoft may adopt Webkit, personally I am sceptical. Were Microsoft to completely change its rendering engine it would inevitably break large numbers of sites and cause outrage among many of their large corporate clients.

The backlash when moving from IE6 to IE7 was massive. Moving to Webkit would conflict with Microsoft’s mantra of ‘not breaking the web’.

That said, we can dream. Without a doubt the real innovation and competitive advantage among browsers is in features, not rendering engines. This would in many ways be a smart move allowing Microsoft to concentrate on differentiation through ‘extensions’ and functionality, rather than wasting time on getting pages to display correctly.

WCAG 2.0 resources

Something that is definitely going to happen very soon is the release of WCAG 2.0.

WCAG 2.0. has now become a proposed recommendation. This means it is not only technically complete but has been successfully implemented on a large variety of sites. In short, it has been proved to work.

According to the Web Standards group this means it could therefore be released before Christmas.

This is hugely significant and very exciting from an accessibility point of view. WCAG 2.0. has come a long way from its controversial beginnings and is now a very good set of guidelines.

Now is the time to start building compliant sites and the Web Standards Group has provided some useful resources for implementing WCAG 2.0.

Prototyping with XHTML

Our final story is a post on the Boxes and Arrows website encouraging us to ‘Prototyping with XHTML‘.

The article lays out an approach to wireframing and prototyping, which is based entirely around the use of XHTML. Starting with the XHTML itself, you build up the structure and elements within your site. You then add CSS and Javascript to further refine the concept.

It is an approach with a lot of merit. Unlike other methods, the prototype is not thrown away but becomes apart of the final deliverable. It is also an approach particularly suited to multiple iterations, allowing you to refine the design over time.

In a world of web applications it is becoming increasingly important to demonstrate user interactions in a way static comps cannot. However, although this approach is appealing I do not believe it replaces the Photoshop mockup. Client’s like to see ‘finished’ looking designs. That said, it is another useful tool in your arsenal and you should be sure to read this post.

Back to top

Feature: A Partnership of Cooperation

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

Back to top

Listeners feedback:

Marketing a web application

Nick Charlton writes: Long time listener, haven’t asked a question before though..

Apart from your blog, the podcast and twitter, how else have you marketed GetSignOff?

To be honest, I have done very little marketing yet. However, I know that has got to change. The problem is that I am not a trained marketeer and so don’t really know what I am doing. That said I do have a rough plan:

  • Free pro accounts – While in beta we gave away numerous pro accounts to ‘web celebs’. However, to be honest it was a waste of time. These guys were either too busy to review it or just didn’t feel it was worth writing about. This time I intend to give free accounts to those who blog about the application. Not entirely sure how I am going to do this yet but I think it might generate some buzz.
  • Offering discounts – Discounts are an effective way of spreading word of mouth. Again I am not entirely sure if or when we will do this, but offering the occasional discount should encourage people to tell their friends.
  • Targeting appropriate publications – I am in the process of writing a number of articles either directly or indirectly related to GetSignOff. I have also asked some sites to review the application. I have approached sites like Digital Web, Think Vitamin and printed publications such as .net. Having a product aimed at people like myself makes identifying appropriate publications easy.
  • Producing supporting video content – I have already produced the ‘Getting design sign off‘ presentation but also intend to make some shorter tutorials for YouTube. These will contain valuable content in their own right, but will also promote GSO.
  • Utilising CSS galleries – Because my audience are web designers we have submitted GSO to several CSS galleries. We know that many web designers use these sites and so this gives our application a lot of exposure.
  • Use speaking opportunities – Speaking opportunities have been a great opportunity for promoting GSO and I have started tailoring my speaking slots around the subject of sign off.

In time we may consider advertising through things like Google Adwords or the Deck. However, until we are confident in the return on investment we are not willing to invest more money in anything other than development.

Font management

Aurel writes: I would realy like to know how designers deal with fonts? From personal experience, I have alot of fonts and it takes me time to find or manage them. So I was wondering if you know of any way to group the fonts, e.g. when you go through the drop menu of fonts in photoshop, they apear in groups (or something along those lines).

The solution I use was recommended on the Rissington Podcast (oh the shame of admitting that.)

It is a piece of software called FontExplorer X which is available for both the mac and PC. It has some superb features if you are serious about fonts. These include:

  • Organising your fonts – Organise using a library, folders, tags and even smart sets. You can directly access all typefaces from a certain foundry or all fonts tagged with a certain keyword? You can even view all italic fonts.
  • Auto activation – FontExplorer allows you to decide which fonts are available in which applications. This is ideal if you want to avoid scrolling through large numbers of fonts in applications like Photoshop.
  • Font information – FontExplorer gives you a clear customisable preview of your fonts as well as detailed information on the character set and usage restrictions.

The application also has an in built store that allows you to buy additional fonts within the same intuitive interface. I am guessing this is how they manage to offer the whole application absolutely free.

Back to top

141. Feedback

In this week’s show, Paul Annett joins us to discuss how he pushes the boundaries of CSS and we look at how to improve your website through user feedback.

Download this show.

Launch our podcast player

News and events

Working from home

I suspect the vast majority of people listening to this podcast spend at least some of their time working from home. In today’s world, doing the type of work we do, there is no reason not to.

However, home working is not the utopia some believe. It has its own challenges and problems. For me it is a constant sense of guilt that I am not pulling my weight in the business. For others it is a lack of motivation or fighting the distraction of housework and family.

With some many of us struggling with the relatively new environment of home working it is great to see people sharing their experiences in a new A List Apart article (Working from home: Readers respond).

This article has some great advice and although it contradicts itself in parts (different people deal with home working in different ways) it is full of ideas that I either already implement or will be soon.

While I am talking about A List Apart I want to quickly mention "Progressive Enhancement with CSS". This is a follow up article to "Understanding Progressive Enhancement" an article we mentioned in an earlier show. It is a great article that explains one possible technique for ensuring your CSS squeezes the best out of as many browsers as possible. If you have a chance, give it a read.

Everything you know about CSS is wrong

Talking about CSS, yet another book on the subject has been released this week. However, this one is different. Written by Rachel Andrews and Kevin Yank, "Everything You Know About CSS Is Wrong" is aimed at web designers who already know CSS well. The emphasis is on emerging techniques and future CSS support.

I haven’t read this book yet (although I do have it on order), but it looks very exciting. It has been a while since I have got to experiment with CSS and so this will hopefully point me in the right direction.

It tackles subjects like Internet Explorer 8, CSS tables and CSS3. These are all topical subjects and so the book appears to have a lot of potential.

I will review the book once I have read it and we intend to get Kevin on the show to talk about some of the techniques.

Reduce your business costs with free stuff

With the economy in tatters and a general sense of impending doom, we are beginning to see posts on how to cut cost and tighten belts. One such article is "Reduce Your Business Costs With Free Stuff" on the Think Vitamin website.

The article is a mixture of ideas on how to save money in your business. Some will save you thousands and apply only to larger companies, while others save only a few pounds a month. However whatever type of business you run, from a humble part time freelancer to a multi-national design agency, there is something in here for you.

Ideas include:

  • Cutting costs on your phone system without reverting to VoIP
  • Subletting office space
  • Open source versions of basecamp, Microsoft office, campfire and much more
  • Moving email and hosting in house

Although I think some of the suggestions are somewhat short term (Managing email internally would quickly become an expensive headache) I generally agree with most of what is suggested.

If you are beginning to feel the squeeze then this one is worth the read.

HTML Email: What mail clients are people using?

Finally this week there has been an interesting evolution in our understanding of HTML email clients. This has been nicely summarised by Alex Walker on the Sitepoint blog. He writes:

There are lots of reasons for hating HTML Email, but perhaps no#1 on most people’s hit list is having to produce HTML Email to deliver to potentially hundreds of different mail clients and configurations.

Now, clearly it’s completely impractical to test your work on hundreds of mail rigs, but the question is, where do you draw the line? Generic browser usage statistics are reasonably common, but mail clients stats?

In the past you could confidently make up whatever numbers you liked on those question without fear of being caught out. But that may be changing.

Litmus, who produce an excellent web-based browser and email testing suite are now publishing email client usage statistics from their new Fingerprint email analysis system. It makes very interesting reading.

Alex goes on to summarise the key findings which include:

  • 60% of people use web based clients
  • Just over 80% of the HTML email market is dominated by Outlook, Hotmail and Yahoo!
  • Business still generally stick with Outlook although they seem reluctant to upgrade to 2007

Interesting stuff.

Back to top

Interview: Paul Annett on Pushing the Boundaries of CSS

Paul Boag: Joining me today is Paul Annett from clear:left, good to have you on the show Paul.

Paul Annett: Thank you very much. Nice of you to have me here.

Paul Boag: So Paul is, with a few others from his company, the people who really make clear:left happen, rather than Andy and Jeremy and Rich, which we know, well Richard does work, but Andy and Jeremy certainly don’t do anything do they?

Paul Annett: Well, you know, they fly around the world a bit you know?

Paul Boag: Yeah that counts. I guess..

Paul Annett: No, we all chip in, obviously. Everyone does their fair share, so we say.

Paul Boag: Very diplomatic of you. I feel like I can insult them over this as I do the equivalent of no work in my role as well.

Paul Annett: I was going to say… Well there’s eight of us at clear:left, yeah we all just chip in. We’re all caught making the tea, that sort of stuff.

Paul Boag: Cool. Well tell us about your role. What is it you do at clear:left?

Paul Annett: Well, I’m a user experience designer. So that means, well it’s more than just making a web site look pretty, which were are accused of sometimes in the trade; to make sure that the sites are easy to use, as well as a pleasure to use really. That’s something that’s often overlooked with some web site design companies, obviously none of your audience.

Paul Boag: Obviously not.

Paul Annett: It’s a vital ingredient in the mix really. My job does overlap with some of the other guys in the office. Basically, we all know each other’s jobs fairly well so we chip in and share some responsibilities. My main focus is UX design. We’ve also got the others guys doing information architecture, they tend to start the project off with handing over wire frames or prototypes to me. Then once I’ve finished my bit I then hand over the designs to our front end developers who then code up the HTML and CSS. As I say we do overlap a bit more than that but that’s basically how it works.

Paul Boag: I’m quite interested in how that works. You are saying you don’t do too much HTML and CSS, or how does it work.

Paul Annett: I don’t do a lot right now, I used to when I was freelance before joining clear:left. I used to do pretty much everything on a project. I don’t do a lot now; I don’t really have time to. The occasions when I do get time to are when we are working on our own projects. I especially seem to have had a bunch of project holding pages or client holding pages in the past where Natalie and Jeremy who do the front end are busy doing other projects and we need to just get something up there while the design is being made. So I will code up that kind of thing. I don’t really get to work on a lot of the big life projects, but then I’m no where near as proficient as Natalie and Jeremy are at those kind of things. I think they would have a fit if they considered my code going live.

Paul Boag: See that’s quite interesting, isn’t it? You’ve begun to build a bit of a reputation as somebody that does-I don’t know-CSS embellishments for want of a better word on some of your designs. You know the kind of thing that other web designers go oh. The most kind of well known example would be the Silverback holding page where you have the clever resizing background How did that come about? Where did that idea come from?

Paul Annett: It comes from… it’s fortune, really, that I happened to be building that page because it was one of the holding pages. I always look for something unusual to do, or something that’s going to catch someone’s eye, that kind of thing. That particular technique was quite appropriate because the site has quite a niche audience, in terms of web designers. People who wouldn’t necessarily pick up on the subtleties and things that I like that are in there, they’re like hidden gems, wouldn’t care. Web designers seem to catch on to that, it’s something they haven’t seen before. The particular technique itself was just a happy accident, really, because I virtually designed the site, it’s a very simple little holding page with the gorilla icon, designed by Arch Nemesis podcaster, John Hicks.

Paul Boag: Well he designed our logo as well so he can’t be that arch nemesis

Paul Annett: That was fantastic drawing on it’s own. But then when I put the vines there, I was just thinking finally give it some kind of depth. I was fiddling around with some of the CSS, and because I don’t know, this is a benefit, because I don’t know CSS like the back of my hand. I do sort of dip in and out. I might make mistakes. Those mistakes might accidentally do something that makes me go oh hang on maybe I can actually use that for something, which is what happened in this case. I happened to position the only layer of vines that I had a percentage off the screen. It moved in relation to the grid. That got me thinking, well maybe I can do this with multiple layers of vines. I didn’t think much of it at the time, but I happened to mention that I had launched the holding page on twitter and a few people.

Paul Boag: All hell broke loose.

Paul Annett: Yeah the few people that follow me thought oh that’s nice and they twittered it, and other people twittered it. Before we knew it, a day later, we had 25,000 views on the web site and we were thinking wow we’ve hit something here. 50% of those people signed up for more information about our product, which it didn’t even exist yet, and the web site didn’t even say what it’s about. So they were just intrigued to find out more based on the what they had seen.

Paul Boag: So that caught you very much by surprise then?

Paul Annett: Oh yeah We were kind of overwhelmed. If it had been, in an anyway, some kind of planned INAUDIBLE machine, then we would have waited until we had actually started building the app probably. We had over 10,000 people signed up for something we were thinking we’ve really got to pull something out of the bag here. Hopefully we did.

Paul Boag: Well you do have very good feedback on it. That really demonstrates well the power of design, that even something that, let’s be honest, is maybe, gimmicky is not the right word but you know, isn’t fundamental to the functionality of the site, yet had a huge marketing impact. So it was very worthwhile.

Paul Annett: Exactly. These things, they are gimmicky. They’re things that people come back to and play with and just want to fiddle around and look at it again. They don’t mean anything. The idea is that they entertain me and maybe some other web designers. It just happened that it entertained 25,000 web designers.

Paul Boag: Is this something that you do regularly? Do you sneak things like this in a lot?

Paul Annett: It is something that I like to do, as I said, to entertainment myself. But I do now look for places where I can sneak these things in. I think I’ve always done it really. I always strive to do something unusual. Back in the days of my freelance site, which is nice-design.co.uk, which is still there but not updated since IE8 so if you are using IE8 it will break. Even then, that was one of the first sites where the header and the sidebar were fixed and it was only the content that scrolled. It’s an unusual thing to see, other than the framesets, obviously, back in the day. I always try to sneak these things in. And when I’ve been working here at clear:left, last year’s de-construct site where we snuck in an Easter egg. There’s a style switch on it, I don’t know if you saw it, but when the site launched it was like a wire frame and along the top there a time line which said the progress of the site as it was being built. It was played as if it was being built live as the event got nearer. The time line at the top was actually a style sheet switcher and we deliberately hid the mouse cursor and made it not look like a bunch of links so that if people found it by chance then they would be pleasantly delighted at the surprise of these extra designs on the site that they’d found. Actually we had a few people email us and say terrible usability, they don’t look like links and the mouse cursor doesn’t look like a hand when you move over them. They kind of missed the point, it wasn’t supposed to look like a link, it was supposed to be a hidden little gem for people to find. That got good feedback as well.

Paul Boag: It’s that creating a sense of satisfaction from a user that they found something special or you know, it’s that little bit of wow factor.

Paul Annett: Yeah. When people are then able to say their friends oh go on look at this, then they feel like part of an exclusive little club of people that are in the know. Definitely.

Paul Boag: You talked a lot of the Silverback example of how basically that came about because you were fiddling with CSS and then something didn’t behave as you expected it to and you saw some potential in there. So that was very much a technology driven way of coming to it. Is it always like that or are sometimes these things planned in from the start. I guess in others words, do you have the ideas and implement them or how does it happen?

Paul Annett: It really varies. Sometimes it’s design driven, like with the de-construct site last year, that was design driven and we wanted to have something which resembled the process that building a web site out there. The silverback one was kind of technology driven but also slightly design driven because I wanted to give it that depth. To take that one step further, I’ve used the same technique on the UX London site. UX London is another conference were running next year in June, uxlondon.com. The technique that I used on silverback is reimplemented there. There’s no three dimensional movement or anything like that, but as you resize the window, the logo changes color. That’s just done by having a transparent window through the logo in the shape of the U and the X, so as you resize the window, the background color behind the whole page slides sideways and changes the color of the logo. This kind of this could be done with Flash, it could be done with Java Script, but I don’t know Flash, and I don’t know Java Script, so it is me trying to find my own little work around and quirky way of doing things really.

Paul Boag: I guess the thing that you know when you start thinking about these things is browser support. Some of these things you are doing are kind of either very advanced CSS or very hackerish CSS so either way you come up with browser support issues. Do you worry about that or is it just that they’re extras and it doesn’t really matter.

Paul Annett: Well fortunately because the audience for the sites that we’ve done in this sort of extreme way are web designers so you know they are going to be using the latest browsers. They’re going to be using firefox and they’re not going to be using IE6. We wouldn’t go to that sort of an extreme on a client web site and everything that we do, everything that leaves our doors is valid CSS, valid HTML. It wouldn’t be allowed not to be if you know what I mean. We’re very standards aware as a company, but I do like to kind of push the boundaries on things a little bit and see what I can get away with. Not in anyway inaccessible, but just not very conventional and if it doesn’t work in IE6 and doesn’t work in other browsers then as long as we implement something that looks the same but without the effects then that’s fine. The silverback site, if you look at it in IE6 is just a gorilla in front of some vines, no movement, nothing lost. Nobody coming to that site will be like there’s something missing here, but they just won’t get that extra little embellishment.

Paul Boag: It’s that graceful degradation.

Paul Annett: Progressive enhancement really. Most people that do have the technology get the extra stuff. This isn’t a company policy, but personally I’m usually in the favor of, I’ve seen quite a couple of sites recently that had a browser upgrade nag bar where if you’ve got IE6 then it says hey just upgrade your damn browser, you’re missing out on stuff. We’d never do that, we wouldn’t put that on a client site here, but I might put that on my own site. I haven’t, but I might.

Paul Boag: Sounds like a good idea to me. What’s the kind of process you go through in getting these extras added in? Are they kind of planned in from day one. When you, say for example, did the UX London web site, did you have it in your head right from the beginning that you wanted to do this with the logo, or something occurred to you further down the design process? When did it happen, is it in the design stage, the build stage?

Paul Annett: With that particular one, that was something that I tried out on a previous site. It didn’t really work 100% and we thought we’ll do something else with the site. But I had it in the back of my mind that I wanted to do it from the start on that project. But in general, again it varies really. If, sorry to be so vague and unspecific.

Paul Boag: No no, that’s the nature of design isn’t it?

Paul Annett: One thing I do advocate is that with all our client’s stuff, as well as our own stuff, I always present mock ups in a browser. I never send out a JPEG of mock ups to clients because for start, they are going to view it at the wrong size, they are going to look at it in preview or some kind of windows equivalent, image viewer, and it’s going to be resized to fit their screen, so they’re not going to see it in the context of the web site anyway. Not only that, but it also gives you the opportunity to actually build part of the site so you might have the header as a flat JPEG and the footer as a flat JPEG and the left hand side as a flat JPEG but the right hand side, where you want some kind of interactivity, you could spend a little bit of time building that so that it kind of explains to the client that this is what I want to happen here, roughly. Obviously it wouldn’t be the final thing because you don’t want to invest that much time up front, to give them that little bit of insight. That’s what I do when I am building holding pages or whenever I do get the opportunity to do something like that in house here is that I’ll code up some bits I think is the unique, gimmicky bit of it, and all the rest will just be a flat JPEG. It’s just to sell the idea internally, if you like, and to have everyone gather around my Mac here and ridicule me and laugh at you.

Paul Boag: It makes sense that more and more web design that we are doing these days has got so many interactive elements with use of Java Script and various other things, that a static JPEG doesn’t always cut it anymore does it?

Paul Annett: No, exactly. Another thing we do to combat that here at clear:left is that we often build prototypes of a site, instead of having like a paper wire frame which we often do as well but if there are interactions that need to be explained to the client we’ll build a flat wire frame of it in HTML just using framework and Java Script libraries and simulate the AJAX side of things just with hard coded Java Scripts. It’s also not production quality code, but the prototype wire frame and the flat JPEG combined will give the client a better idea of exactly how the finished site will be.

Paul Boag: Sounds good. We’ve talked a couple of time about is this gimmicky, is this not you know… I’m quite interested as where you feel the line is drawn between good design here and tipping into that naff gimmick area. Do you know what I mean?

Paul Annett: Yeah. There are a couple of things that haven’t seen the lights of day yet, which maybe they will one day. I guess it depends on how much time it’s going to take and how much value it gives us at the end of the day. Using a similar kind of thing with positioning elements we’ve got these great big letters in the clear:left office and we regularly rearrange the letters that spell clear:left to spell different words on the shelf at the office. To simulate this online I’ve built a little page which has got the word clear:left across the page when it’s at full screen at 1024 pixels wide and as you resize the window all the letters swap places because they’re all positioned at different places at different percentages off the screen, blank bits of image and all this complicated CSS positioning going on. When you reach 800 pixels wide it says elf:cartel. So it doesn’t have any fundamental reason or… it doesn’t do anything, it’s pointless, so it’s not going to be anywhere probably. But that is too, possibly gimmicky. There are some ideas which are not necessarily web based which are gimmicky but do work like when we were planning this year’s de-construct and INAUDIBLE wants to get some silverback promotion in there. I talked to him why don’t we just have a gorilla one day running around dishing out silverback branded bananas. Everyone laughed and thought it would be stupid, and then we did it. And then it was really successful and everyone loved it. Yeah, it was a bit of a gimmick but again it kind of fitted with the brand so it worked.

Paul Boag: It’s a fine line isn’t it, you walk in things like that? Because you know you could have been absolutely ridiculed for something like that. How do you know what is going to go down well and what’s not? I guess you don’t.

Paul Annett: Yeah, luck. I was ridiculed for that here in the office but we went with it and it seemed to work. It was great fun.

Paul Boag: I’ve seen pictures. It looked entertaining if nothing else. Going back to the online stuff, even if you develop something like that, it never sees the light of day, you never know that technique may come in use in a future web site that you develop and it might be appropriate.

Paul Annett: Yeah there’s always like a library of that stuff that we’ve kind of half developed and ideas that we’ve got, notes, that kind of thing. It might well see the light of day in the future

Paul Boag: Let finish off with just a kind of general advice that you like to give designers out there that they look at some of the cool little things that you do and they think I’d really like to do that but I don’t want to just go out and copy him because there’s nothing imaginative in that. I want to kind of get into that mentality of looking for opportunities to do this kind of thing. What advice can you give them? How can you start them off?

Paul Annett: There’s loads of stuff that’s come out as a result of the silverback hype, if you like. There was an article that I did on ThinkVitamincom which kind of explains how to achieve that technique. People have taken that and done all sorts of other things with it. I’ve seen someone creating moving 3d images and that style of a zoetrope(?) toy thing, which uses the same kind of principles but applied in a different way. So by all means, the best advice in all cases of web design is to look at the code, see how someone else has done something and see how you can adapt that to your own stuff. One thing that I really rely a lot on is, especially in these hidden Easter eggie things, is alpha transparency and thinking of how you can create a window through the front layer of a web site so you could have, instead of having a white background on the web site, put a white foreground layer with a window through it, shaped in the shape of whatever, and see how you can make that interact with the background layer so as you perhaps scroll down the page something becomes visible through this previously invisible transparent window. There’s a site called webleeddesign which does this brilliantly. That’s my ultimate, I would have loved to have made something like that, it’s really good. Only that one page, but it’s really nice with that alpha transparency in the front there. Think about what you can do with resizing the text on a browser so-we redesigning the clear:left site at the moment, hopefully it will be online soon-now I’m giving up an Easter egg that’s coming up on it.

Paul Boag: No one listens to this podcast so it’s fine.

Paul Annett: There are certain things hidden on certain pages and if you bump the text size up a couple of points then those things would become visible because of course you can control the position of things based on ems. As you resize things, your font size gets bigger, it perhaps moves in relation to the other things and things begin to peak out from behind something that was previously in front of it. I play around with that kind of thing a lot. That’s the advice I’d give you in terms of this particular way of doing things.

Paul Boag: That’s some great advice there, there’s lots of possibility. I like what your saying that it only takes a small number of techniques, you talked about transparency there, you talked about the background stuff, and you talked about the font resizing, but the possibilities of just those three things are endless really. You could do all kinds of things with them.

Paul Annett: Exactly, combine them in different ways. Again someone take this and do something with it, but imagine a line going diagonally across the screen but in font of that you’ve got a completely white page and across that white page is a very narrow slot of transparency, so if your line starts at the top right hand corner all you see is a dot in the top right hand corner but as soon as you start scrolling down the screen, that dot moves to the left because it’s visible through that hole. That’s a very basic example of how you could use windows of alpha transparency interacting with the background to do something which moves horizontally as you scroll vertically. I haven’t done anything with that yet as I haven’t thought of anything good to do with it but maybe someone can.

Paul Boag: That’s absolutely brilliant Paul, there’s some really good advice in there and thank you for taking the time to come on the show. I hope we can get you back on before too long.

Paul Annett: Thanks. Thanks very much for having me.

Thanks goes to Troy Oltmanns for transcribing this interview.

Back to top

Feature: Improving your site with user feedback

Users can be invaluable when deciding how to move a website forward. We should always listen to what they say. However, sometimes that is easier said than done. Read more here.

Back to top

Fixed Footers without JavaScript

Ed Merritt (one of our very awfully clever designers at Headscape) has come up with a innovative little CSS technique I have encouraged him to share with you.

A client recently asked me if it was possible to have a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough.

This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

Firstly, here’s a demonstration.

The HTML

<div id="container"> <div id="content"></div> <div id="footer"></div> </div> 

The CSS

*, body {margin: 0; padding: 0;} #container {display: block; position: absolute; min-height: 100%;} #content {display: block; margin-bottom: 3em;} #footer {position: absolute; display: block; bottom: 0; height: 3em } 

IE6 Stylesheet

body, #container {height: 100%;}

this should be referenced using a conditional comment:

<!--[if lt IE 7]> <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen"   /> <![endif]-->

How it works

As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

  • #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
  • #footer is positioned absolutely at the bottom of #container
  • #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

Known Issues

The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

For example, if your mark-up was:

<div id="extraContainer"> <div id="container"> <div id="content"></div> <div id="footer"></div> </div> </div>

In your IE specific CSS you’d need to specify:

body, #extraContainer, #container {height: 100%;}

Conclusion

This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time. Please let me know if you find any problems with it.

129. Conferences

This week’s show sees the return of Ryan and Stanton, holding the fort while Paul and Marcus sun themselves on holiday. .

We’ll be talking about taking your first steps into the world of conferences and answering your questions about font smoothing and browser emulators

Download this show.

Launch our podcast player

News and events

Release of Firefox 3.1 Alpha

Last Wednesday saw a new developer release from the Firefox team. Firefox 3.1 Alpha, or “Shiretoko” is now available for download. Shiretoko is built on a pre-release version of the Gecko 1.9.1 platform and introduces several new features for you to play with.

  • Web standards improvements in the Gecko layout engine
    • They don’t actually say what improvements, so I guess we’ll have to trust them with this one but from what i can gather, they’ve added a lot more CSS3 selectors like :nth-child, the CSS3 “word-wrap” property, CSS3 columns, text-shadow, box-shadow, border-image and more.
  • Text APIfor the <canvas> element.
    • This is a quite detailed API for drawing vector text within the canvas element, and is sure to set the hearts ot typophiles beating just a little bit faster.
  • Support for using border images.
    • The design community has been screaming for this for as long as I can remember, the ability to specify images as borders. The whole rounded-corner craze might be slightly out-of-style now, but I’m sure we’ll see some innovation with this feature very soon.
  • Support for JavaScript query selectors.
    • Now I’m not completely down with the javaScript kids, so I apologise if i don’t get this quite right. But the query selectors seem to be a way to target specific selectors instead of having to filter a result set provided by the getElementsByTagName() call, you can now do the filtering before you execute the query.
  • Several improvements to the Smart Location Bar.
    • When you start typing a URL, Firefox starts giving you options to choose from, you can now filter those results while you’re typing.
  • A new tab switching behaviour.
    • Pressing Ctrl+Tab now gives you a filmstrip style overlay which lets you quickly navigate to your open tabs, and mimics the similar feature in most operating systems nowadays.

The alpha is available from the Mozilla Developer Center.

A List Aparts’ 2008 Survey

It’s that time of year again, the A List Apart team have unleashed their 2008 survey “for the people who make websites”. The survey gathers a massive amount of information, with around 33,000 people taking part last year and covers a wide range of questions covering all aspects of our beloved industry.

The survey covers everything from Age, Gender and Geography to Education, Employment, Vacation (holidays to the rest of us) and those oh-so-important salary details, how many hours worked and your methods of staying upto date with what’s happening in the industry. The data gathered is compiled into a comprehensive, yet easy to read report, and they also provide the raw (anonymous) data so you can do your own number crunching if you so wish.

You can also have a look at the 2007 survey results if you wish, and Paul and Marcus will no doubt be covering the results of this years survey when they’re published. So this is a call to arms really, help improve this survey by taking part at Alistapart.com. We took part, so should you!

The Future of Web Font Embedding

The last news item is a blog post by Richard Rutter on the future of web font embedding. With both Safari and Firefox supporting web fonts in their 3.1 releases, and development releases of Opera, it could be time to start playing with web fonts.

Richard starts by defining web fonts as using the @font-face rule to point to regular TrueType or OpenType font files on a web server, this is to clear up any confusion with Internet Explorer’s proprietary web font support with uses EOT font file, which is also a way to wrap the fonts in DRM, which i think might severely hamper any efforts to bring web fonts into the mainstream.

The font foundries and type designers seem to view web fonts as the death of their industry, insisting that their revenue streams will be destroyed by piracy and free font embedding, rather than seeing this as an opportunity to really boost their industry.

There’s nothing to say that the @font-face rule has to point to a locally hosted font file, The opportunity exists for the font providers to host the fonts themselves, and charge for their useage. This saves us, as designers, from having to install fonts on the machines we design on, and will undoubtedly allow us to choose from a much larger selection of fonts which can be switched quickly and easily.

Back to top

Feature: A Year on the Conference Circuit

This week’s feature has stemmed from a listener who asked “which conference would I suggest for a first timer”? And “how difficult is it if you don’t actually know anyone there”? Having attended a couple of the big conferences this year I thought it would be useful to share my experiences.

Back to top

Listeners feedback:

Font Smoothing

Steve Writes: I have been listening to your podcast. I really like it.

I jusr want to ask a question. On mac, the fonts seem to be all thicker than windows. What setting are u using? I’ve been using best for lcd. Today I changed to automatic, and the fonts were much thinner. It looks more alike with windows fonts.

Do you think this is a big problem for mac users? Since the fonts will look different. Which setting do you think is the best for web designer on macs?

The difference of Mac fonts compared to their Windows counterparts originates from Apple’s legacy in desktop publishing and graphic design, the fonts are rendered in a way which would give a closer approximation to how they would look when printed.

Mac’s use a specific font wrapper called dfont, this contains extra information to preserve certain features like font outlines and hinting which can then be rendered more accurately on-screen meaning that in general, fonts look better on a Mac, whichever smoothing method you choose.

If you’re a designer, I’d heavily recommend testing your design in as many different browsers as possible, but also on different operating systems as well. I work primarily on Windows Vista (don’t shoot me) and have a dualscreen setup, my second screen can be flipped over to my Mac where I can test in Safari, Firefox and Opera on Mac, I also run a Ubuntu system to test in. Rather than running a standalone IE6 build on vista, I run a full XP virtual machine with IE6 running natively as I just don’t trust the standalone builds.

One of the main things you’ll have to accept is that your design might not look identical on any combination of browser or operating system, and because you’re probably designing websites to be viewed by other people, I’d recommend keeping your font smoothing to the default setting of “automatic” which is most likely going to be the case for your target audience.

Browser Emulators

Andy Asks: Hey guys. Been listening (on and off) for a while now and love the show.

I was wondering if there is such a thing as a browser emulator, software that allows you to see your site as it would appear on IE, Firefox, Safari, Opera, etc. If there is one, is it total crap and not really work.

The answer to your question is yes, there are several websites that can provide you with this type of service.

One of the more popular sites is Litmus which is an online emulator that validates your HTML and CSS as well as presenting you with a screenshot of your website loaded in up to 23 different browsers across various operating systems. It can also provide you with a report of any compatibility issues it has come across. However there is a fee to get any real use out of this service.

What Litmus does it actually does very well; however there are a couple of major draw backs I’ve found:

  • You can’t have an interactive experience – Not all issues can be seen from a screenshot and more often than not you need to just take your mouse and navigate around the site to find problems.
  • You can’t test javaScript – You can’t see javaScript animations from a screenshot.

As Paul said in the previous question, there’s no substitution for the real thing, which is having multiple setups with multiple browsers installed. However that’s not always a viable option especially for freelancers working from home who don’t have the budget (and space…) to have several machines and licenses for operating systems needed for testing, in which case sites like Litmus are invaluable.

My advice is if you can test on the real thing, do, if you can’t then take a look at Litmus.

Back to top