HTML5 and CSS3 with Inayaili de León

More from show 200: Inayaili de León tells us that we can be using HTML5 and CSS3 right now.

Paul: Best talk of the day! Yeah, you can come and join us – you can throw out Drew. It’s really good to have Inayaili on the show. She is one of those quiet yet very significant figures within the web design community, that is there in the background doing some absolutely great stuff. I think she has been writing some stuff for 24 ways recently, which was very good, really enjoyed that, and has got some other great stuff going on, so we welcome to the show Inayaili.

Hello Inayaili.

Inayaili: Hello.

Paul: It’s really good to have you on. Thank you for coming all the way to the … I was going to say studio.

[lots of laughing]

Inayaili de Le%C3%B3n

Image Source

Paul: [exaggerated voice] “Thanks for coming into the studio today”. So, we are going to have a bit of a chat about CSS3?

Inayaili: Yeah.

Paul: I thought I better check that. Ryan? Is that alright for you? CSS3? Yeah, it meets Ryan’s approval as well, so that’s really good. OK, we have kind of been building to this all day really, we have kind of mentioned CSS3 a couple of times.

Inayaili: I don’t know if you have noticed but I think we are halfway, euh…

Marcus: We are, this is halfway

Inayaili: … through the …

Paul: Of for fuck sake.

Marcus: We only have got six hours to go.

Paul: Ooh, whoa.

Marcus: I can’t work out, my recording thing I am doing here, says I recorded seven hours of audio. How can that possible be? Oh, it starts on 1, that’s why.

Paul: Because the whole space time continuum is [???]

Marcus: I answered my question. It starts on one hour.

Paul: I have got far too many windows open here, let me close some.

Marcus: Yes, we are halfway – jipee!

Paul: Wow, that’s worth celebrating. I am getting really cold in here as well.

Marcus: Shut the door.

Paul: Shut the door. Is that alright for a minute. Is everybody else getting a bit nippy? Good stuff. Right. Halfway joke by Marcus. That’s a good idea, as we got a few minutes.

Ryan: What’s that good one, you had …

Paul: Go on Marcus, go on my son. Will you hang a minute, I …

Marcus: Someone actually send me an email with a joke, but I can’t remember if it was any good or not.

Eum, am I allowed to tell a blond joke?

Paul: After I have just been telling everyone off in the chat room, for commenting on people’s personalities and personal appearances, and stuff like that, and then YOU want to tell a blond joke.

Marcus: Eh, eh, peoples … do you want to be more detailed about that at all, Paul?

Paul: No.

Marcus: No? Ok. Euhm, …

Ryan: Why would you [tails of into a giggle]

Paul: Strange Marcus, I don’t understand it. I have only been working with him seven years.

Marcus: No, I don’t want to tell that joke, it’s rubbish.

Paul: Goh, blooming heck, take your time mate. We’ll just sit here.

Marcus: Here we go.

[Cow jingle kicks in]

Paul: Oh, for crying out loud. That, that has to go! That was the thing that was endlessly looping.

[Jingle stops]

Marcus: Yes.

Paul: [reads from the chat room comments] “Paul has an actual egg for a head.”

Ryan: Excuse me, what is your conversation about?

Marcus: An actual head. There is a joke.

Ryan: We can’t keep people from following.

Paul: Yeah, I understand that. Can we kick that person? Actually there are a few people being a bit dumb.

Marcus: I can do a Christmas joke.

Paul: Yeah do … Nooo!

[background laughing]
[...]

Marcus: Blame them!

[giggling]

Marcus: Two men, two snowmen standing in a field.

Paul: Yes.

Marcus: One says to the other: “Do you smell carrots?”

Ryan: Carrots for noses.

Marcus: That’s actually quite a good joke. I know it’s kind of traditional not to have any reaction, but that is not a bad joke.

Carry on.

Paul: Is that it? Can we move on now? Let’s talk about CSS3.

Marcus: Oh no, I am just going to interrupt.

Paul: Let’s talk about …

Marcus: That’s a good set of interruptions.

Paul: You’re not going to interrupt Inayaili, because she is far too nice.

Marcus: No, I am going to interrupt you.

Paul: You can’t do that, it would be like …

Ryan: She came all this way.

Paul: It would be like, I was going to say kicking a puppy, but people get upset about that.

Inayaili: And I brought cupcakes.

Marcus: Yes, exactly.

Paul: And you brought cupcakes. Yeah. That’s made up for the fact that Relly couldn’t be here. In fact we ought to have the cupcakes brought in. I feel they should be coming in.

Right. Let’s talk about CSS3 and get to grips with some of it. Can we start really basic for people, because not everybody has the time to kind of look at CSS specs and read all the articles on it. So give us a really good idea of what kind of things does CSS3 allow you to do.

Inayaili: Well, I think the main thing it allows you to do is to have a cleaner mark-up. So when you are creating your HTML you can have a much more semantic, with less classes, with less id’s, markup. And it allows you to target some elements without adding a class.

Paul: Right. So we are talking about the improved selectors there. Things like the nth child.

Inayaili: Yeah. And then of course there are the other, more visual things: like adding text shadows, and border radius and box shadows and stuff, much more easily.

Paul: Sure. OK. So why, you obviously started talking a lot about CSS3. Why have you got excited about it? Presuming you are.

Inayaili: Yeah. Exactly because of that. I can just create the most, cleaner markup possible, without having to create lots of divs, and lots of spans, and all that mess we used to do before, and so much more flexible. You don’t have to have Javascript to do some things, and especially because I don’t really do Javascript. So I like to do things in CSS – if I can.

Paul: There is an argument, isn’t there, you brought Javascript up there, that some of the things you can do with CSS3, actually begins to kind of stray on the territory of being behaviour, rather than design. You could argue things like hover state is already an example of something that is actually behaviour. So should we be doing those kind of things in Javascript, really? If we are going to be all semantic and all kind of correct about it. HTML is your content, CSS is your design, behaviour is your Javascript. Should actually these things be done in Javascript or is that just a bit [tails off]

Inayaili: I think that, euh, I am going to give the easy answer: It depends.

[Laughter in the room]

Inayaili: But, euh, it really does depend. If it is something, just a nicety, something that is going to be a little detail on the website, it’s not really crucial to be visible by everyone, and it can be easily done in CSS, much easier than with Javascript, then why not?

Paul: Yeah, absolutely. I think it is about pragmatism, isn’t it.

Inayaili: Yeah, exactly.

Paul: You do what the right thing is in any particular circumstance. I mean the other, I guess argument, against doing lots of CSS3 at this stage is one of browser support. Talk us through a little bit where things are with browser support, you know, what supports what and you know what can you start to do. You probably don’t know it all of the top of your head – that’s a really unfair question. But what is, you can be general, fudge it, make it sound like you know what you are talking about [laughs].

That’s what I do.

[Laughter in the room]

Paul: You don’t remember exactly what every single CSS is supported by what version of a browser – or is that just me who doesn’t know stuff like that.

Inayaili: Yeah.

Paul: OK. I’ll shut up at this point. Now then, would you like to answer that question and dig me out of the hole, thank you.

Inayaili: Yeah, well, it’s very hard because Internet Explorer, until 8, still doesn’t support CSS3, CSS3 selectors, so it is quite hard knowing that the most used browser from 6 to 8 doesn’t really support that. So you have to be careful in a way, you have to look at your stats, you have to see what your users are browsing the web with. But I think that most things are supported by Firefox, Safari, Opera and then CSS3 is not supported by IE.

Paul: OK. So how then do you justify doing work with CSS3, when there is so much dogginess surrounding the support, and it is so patchy, and things like that.

Inayaili: Well, in terms … One thing that I really like using with CSS3 is the advanced selectors. They just make your life really, really easy. Like if you are styling text, adding margins to paragraphs, and headings, and stuff like that, you can do it much more quickly with CSS advanced selectors. And if some browser doesn’t have a specific margin or a specific padding it is not going to break the layout. You have to be careful that way. There is also some nice Javascript plugins they have been made recently to support the CSS3 selectors for IE. That is really, really helpful. And I also usually use a tool that is called Modernizr, to [tails off]

Modernizr

Paul: Yeah, we mentioned that earlier.

Inayaili: So, you can kind of, euhm, it’s not having doubled the work, it’s not having to do the CSS for one browser, and then for another browser, with Modernizr you can kind of adapt your design based on which CSS properties the browser supports or not.

Paul: Sure. I mean, you wrote, I just had it on the screen. You wrote an article. This is just a little bit a move away from CSS3, but it does kind of all relate. You wrote an article for 24 ways, euhm, about having a field day with HTML forms. Which I thought was really interesting about some of the new stuff that can be done with HTML5 as well, and kind of combining that with CSS3.

24 ways

Inayaili: Yeah.

Paul: Do you want to talk through some of that kind of stuff? That was a really interesting article and not everybody has probably seen it.

Inayaili: Euh, about what I talked on the article?

Paul: Yeah. You can’t remember, can you?

[Laughter in the room]

Paul: I wouldn’t be able to, and I can’t even remember what I wrote about this [year?] It’s nothing like throwing a curve ball in, isn’t there?

Marcus: I’ll save you for a minute, because I just love, a tweet from Matthew Panel [spelling?] here, which is: “Jeezes, is this Boagworld stuff still going on? Damn A-listers wasting my bandwith.”

[Lots of laughter]

Paul: Get him on the show. Tweet him back and say “Come on”.

Marcus: Yeah, ok.

Ryan: We can get him on Skype.

Paul: If we can get him on Skype, get him on.

Ryan: Get him to ring Boagworld.

Marcus: He is complaining about the lack of John Oxton on here.

Paul: Ooh, why didn’t we get John Oxton on?

Marcus: Because I can’t think of everything.

Paul: But I rely on you to think of everything. See, I just think it is quite interesting. I have got to say, I have got to be honest with you, that I haven’t, that I haven’t looked massively into HTML5, and CSS3 yet, I kind of know what they do in principle. I have had a little play around with them, but I have not actively used them yet, because I keep feeling it’s not quite there, it’s not quite time. But I think to some degree…

Inayaili: I disagree.

Paul: Yeah. I know you do, and that’s what I am interested in, because I think somehow, I am falling into something I know is wrong, and I know a lot of other web designers feel, they look at something like CSS3 and they go: “Oh, browsers don’t support CSS3″. Like it’s a blanket statement – if that makes sense. You know, that CSS3 has been taken as a whole, you know where some bits of it do have support – which I guess would be your argument, would it?

Inayaili: Yeah. I think people just dismiss it by principle and don’t bother looking at what could be done. They shouldn’t be doing that really. You should definitely …

Paul: I feel told of.

[Inayaili giggles]

Paul: Yeah, but, I mean there are some things that are … It is true it is not a thing set in stone, like box shadow has just been dropped from the spec, so … Has it really?

Inayaili: Yes.

Paul: But I like box shadow.

Inayaili: Yeah, I know, lots of people did. But the specs were just too complicated. There was no consent as to how it was supposed to work, so they just decided to drop it for now. For now.

Paul: For now? But that is a classic example of something. You see that just makes me worried. Because I would have used box shadow.

Inayaili: Yeah, but if you had actually read the specs, you could actually see.

[Consternation and laughter in the studio]

Paul: I feel under attack here.

Inayaili: You could feel that vibe that this isn’t really working right, that well.

Paul: Right.

Inayaili: There were lots of red notes saying: “Is this really right?”, “Maybe we should forget about this for a while”.

And even in other things like: I was just reading the text spec on my way here, and if you go to the spec it says: “we are considering removing multiple text-shadows”. So a text will only be able to have one shadow, and if you actually follow the development… I mean you don’t actually have to read the specs. One very good thing that I actually think people should have to do is at least subscribe to the decisions that are made for the CSS. It is something like every two weeks or something? It’s like a five line post. That only tells you ok, CSS box-shadow has been dropped, and it’s something that will be useful. And if you are interested it is something that you should …

Paul: Because that’s the big thing. You have actually answered that. I was going to come back with an aggressive response, but you have answered that. Which is I think is, the average web designer feels like they are sinking under todays work. They try and keep on top of what is relevant right now, just to keep up, you know it feels like a race web design, you know, trying to keep up all the time. And then you’re turning around and say now we have to read W3C specs. I am not Jeremy Keith, I prefer to put a bullet through my head. You know? And here you are saying that there is actually a nice little summary you can subscribe to. Where can you get hold of that?

Inayaili: If you search for, I think it’s like CSS3 workgroup, or something like that.

Paul: CSS3 working group [typing]. See what we get back. We have got 12 hours to waste so… [laughs]

[reads search engine results]CSS current work.

Ryan: This is the future Paul, it is not a waste.

[Laughter]

Paul: So here we go. Here is the …

Inayaili: There is probably a blog link under navigation.

Paul: “blog“, yeah, I got it.

Inayaili: So, that’s the short summary.

Paul: Oh, that’s the summary? So you can just subscribe to that blog? And you get a nice little summary.

Inayaili: It’s not like you are going to get a five posts a day, it’s very random, I think.

Paul: Now, I have got to say, this is not the most friendly document in the world. I have just read the first line.

Inayaili: You don’t have to …

Paul: [Reads from the document] “CSS WG has no problem with depreciated DOM active”.

Inayaili: No, you don’t have to understand everything. I don’t understand everything.

Paul: Oh, OK.

Inayaili: But some things are relevant and occasionally there are some relevant things, like OK, box-shadow, which has been dropped. And you would have…

Paul: And I would have gone into a panic. An run like: “[Shrieks] I have been using that!”

Inayaili: Yes, exactly.

Paul: So what, I mean that is a big issue. You know. If I kind have gone to a client and designed them a site and I had used box shadow. Sorry, I am being quite pushy over this, but you have been to me, so … And then suddenly that has been removed from the spec and is removed from support in the browser. That site is going to break. And they are going to come back to me, quite justifiably, and say “Why did you use an unsupported, unset in stone piece of technology?”

Inayaili: Euh, well, in that case the site wouldn’t break without box-shadow.

Paul: Yeah, the box-shadows would just disappear.

Inayaili: You just wouldn’t have the shadows. So you have to be careful that way.

Marcus: There is also the argument that if you don’t pay attention to what is happening on the W3C and you don’t contribute to the talks and discussions, then you can’t complain about specification, because you have shown no interest in it, and you have not contributed to any of this.

Paul: You have got to vote, otherwise, …

Marcus: If you are not going to be involved with it, and you are not going to talk about it, then you can’t complain about it.

Inayaili: One thing that is also important to understand, and I was just talking to Jeremy Keith outside, and he agrees, is that you don’t have to use the CSS3 to contribute. It’s very useful if you just go there, if you just try a few things, you don’t have to read the whole thing. That’s quite boring. But if you do your own things, try a few experiments, see how stuff could be used in real life, and then you send them your examples, or you send them your comments with an explanation on why you think something won’t work or something won’t be useful. And that is something the W3C are always looking for, like real examples to base the specs on.

Paul: Yeah, I mean it is difficult, isn’t it? Because, you know, OK, I just keep coming back to this. An everyday designer like, you know, I don’t know, Ed sitting through next door, doing his work in the other room right know.

Marcus: Will he be offended at that? Everyday he designs.

Paul: But he is!

[Laughing]

Paul: Alright, but he is not, he is NOT Jeremy Keith. Do you know what I mean?

Marcus: Nobody is Jeremy Keith.

Paul: He doesn’t, he can’t think conceptually. So what I am saying is that only a certain group of people is getting to really play around with this technology, and really… you know there is people like Andy Clarke, people like Jeremy Keith, that got the time, because of where they are in their careers …

Marcus: They are not being [..] by bullying project managers.

Inayaili: I don’t think it is because they have the time. I think it is because they are really, really interested in what they do.

Ryan: Yeah, outside of work it’s not. It’s not just a work thing, they do it in their own time.

Inayaili: I think if you really, really – I don’t like using this word, but passionate – about what you do, you will have an interest outside of 9 to 5.

Paul: Oh, absolutely, I do agree with that. I do agree with that. I also, there is a question if, you know, do you have to be, I am trying to think of the term, do you have to carry a certain reputation before anybody takes a blind bit of notice of you. You know, if I …

Inayaili: No.

Paul: OK.

Inayaili: The other day I was writing a very short post for my blog about the use of multiple columns in text and I was just doing some very basic examples just to try, just to make sure the example was working, and I was trying in Safari and Firefox and I noticed that one thing, it just wasn’t doing what the spec was telling it should be doing. And I thought: “Oh, maybe I just should report it to both Safari and webkit and Mozilla”.

Paul: Right.

Inayaili: And I just did a quick comment on the bug report website and it was actually like five minutes later it was actually introduced as a bug in Firefox.

Paul: Oh.

Inayaili: So, it doesn’t matter who you are.

Paul: That’s brilliant.

Inayaili: You can contribute.

Paul: So in your experience it’s been a very open process.

Marcus: It’s just about being bothered basically. Isn’t it?

Paul: Yeah.

Inayaili: Yeah.

[Laughter]

Paul: You see. But perhaps, it is just me or not, or a lot of other people, but you just presume you are not really going to get anywhere. You know, that you are just another voice in the crowd.

Inayaili: Yeah.

Paul: Perhaps I am being naive. You have been involved a little bit in this kind of process as well, aren’t you? Rachel? What has your experience been of dealing with these working groups and talking to them, and that kind of stuff.

Rachel: Certainly in the past with web standards project things. I suppose my experience is always been fairly positive. In that I think that generally, groups are just interested in what you have to say.

Paul: Right.

Rachel: You know, I don’t think there is any kind of wall up that says: “No, we only listen to people with this kind of reputation”, or whatever, but you know, …

Paul: Oh, that’s good.

Rachel: I think, it’s … you just have to get out there and start talking about stuff you care about really.

Paul: Right. I think that’s brilliant. You changed my view over that. I made perhaps assumptions that were false in that situation.

Inayaili: And for that example I just gave you, I didn’t have to read the whole spec, just to do my bit, I was just literally reading a very small proportion of the spec, just to write that quick blog post. And I came across a bug.

Paul: So is there any other kind of, moving on from that a little bit, is there anything else you get really excited about CSS3. There are people out there, that are like me, and maybe haven’t done their homework as well as they should be. What do you want to let them know about, that will make them go out there and get them stuck into this, and having a look.

Inayaili: I started to be really excited when I started to understand how CSS3 makes my life easier.

Paul: Yeah.

Inayaili: And, makes clients have to pay less, because you are spending less time dealing with some things that would take a long time, to work cross browser.

Paul: Can you give me a really good solid example of that. You know, what could I do with CSS3, that would make my life simpler.

Inayaili: Well, I am just looking at the example of the 24 ways post. And it just makes your life simpler coding forms in a big way. You can target different types of input and different labels, very easy.

Paul: So, this is using those advanced selectors, you were talking about.

Inayaili: Yeah.

Rachel: And I think another thing that I have certainly found, but I wrote on 24 ways about that as well, is in situations where you don’t have control over the markup. And that happens quite a lot.

Paul: Ahaaa!

Inayaili: Yeah.

Rachel: It’s that, if you are dealing with some CMS for instance, that spits out a load of markup, and you want to put rounded corners on something, or you might want to inject markup into that. But you can still target that CSS3, and have the effect.

Inayaili: Imagine you have a table, a data table, and you want the rows to have different colours.

Paul: Alternate.

Inayaili: Like you want red, blue and green. Red, blue and green. Red, blue and green. You can do that with CSS in like literally 30 seconds.

Paul: Rather than having to put a class on each one.

Inayaili: Yeah, and if you are really worried about “Oh it won’t show up on IE”. You can use one line of jQuery, or a little Javascript plugin and it will work, if you really … It’s not something that is going to affect massively the look of your website. It is just a background colour in a few rows. But it’s just instead of building this very complex Javascript thing, you can do it in CSS like that.

Paul: I mean, that I really, really get. We got a client at the moment where that is a perfect example. They got a website of something like 33,000 pages, it’s a big institutional website. And, you know, we are redesigning their site, and it’s all in a content management system, and all that content has been put in, you know, by various content providers. And we now got to go in, and that content has got to remain the same, but we have to redesign the site around it. So the HTML is staying the same. So it’s a really good example where maybe some of these advanced selectors will be really beneficial. And after all isn’t that what we said about HTML?

The Zen Garden right back in the early days. “You can change the whole look of your site without changing the HTML”, but really, we were fibbing a bit, weren’t we, until relatively recently. You would have to put bits in it.

Inayaili: If you have to go to the table and actually add a class in it for each row, you are doing it wrong. Well you are not doing it wrong, but you are over complicating.

Paul: You are not living the dream.

Rachel: And it is presentational as well. When you are sticking that kind of markup in, in your document it’s actually you are doing it, because you want something, it’s a presentational thing, you want to make striped tables. You shouldn’t have to stick something in your markup to make striped tables.

Paul: Yeah.

Rachel: It’s completely a presentational thing.

Paul: Yeah, completely. Ok, that, you have got me. You have convinced me.

Inayaili: Good.

Paul: You have got me on board. And actually, the bit that gets me most is that it takes us one step closer to that real ability to separate content and style. And THAT I am entirely behind. Especially for some of the, you know, the big clients that we deal with, there websites are too big to be changing huge amounts of content, so that is brilliant. And even for smaller websites, that’s obviously still very very relevant stuff.

Inayaili: But even for a smaller thing. Imagine you have a list of items and you have a margin for every item in it, and you don’t want the last one to have a margin, because it doesn’t need a margin and if it does have a margin in IE6 it is fine, but you can remove that with CSS from all the other browsers.

Paul: The other idea that always gets me, is that when you have a menu item, and you divide the menu item with a border-bottom. I bet you don’t want it on the last one, you can remove it. If it’s there it’s not the end of the world.

Inayaili: Yeah, it’s fine.

Paul: Exactly. Yeah, brilliant. Brilliant stuff. Thank you SO much for coming in and chat about that. Much appreciated and you are hanging around for a bit, aren’t you?

Inayaili: Yeah, I am.

Paul: Excellent stuff. Brilliant.

yaili website

Thanks goes to Joke de Winter for transcribing this interview.

Zeldman and Ethan Marcotte on the future of the web

Jeffrey Zeldman and Ethan Marcotte talk about the third edition of Designing with Web Standards as well as discuss the future of the web.

Paul: So, joining me today is Jeffrey Zeldman and Ethan Marcotte from Happy Cog, and they’ve recently released the third edition of “Designing with Web Standards,” which is basically the bible of the web standards community. It’s good to have you both on the show.

Jeffrey: Thanks, Paul.

Ethan: Thanks Paul, it’s great to be here.

Paul: So the first question has to be, we’ll talk about the book in a little bit, then we’ll get on with some more general issues, but starting with the book, Jeffrey, other than the fact that Ethan is obviously a genius in everything that he does, why did you decide to go for a co-author this time around?

dwws website

Jeffrey: So I wrote the first two editions by myself. I was half way through the book and said I need Ethan as a co-author. I didn’t say I needed a co-author, I need Ethan. There were a couple of reasons. I think the principle reason was, I’m now a captain of industry, right? I spend a lot of time flying around, and walking around, and in cabs talking to clients, giving presentations, writing stuff, it’s all great. But I’m not at the front edge writing code anymore. I wrote the first edition of “Designing with Web Standards,” I was doing experimental CSS design work nobody else was doing. And I was like, This is pretty. Well, actually, Eric Meyer was doing more than, well, there were people doing it, but I was one of the first people doing it, and I was going “Look, this is amazing, and it really works!” And for the third edition, I wanted someone really brilliant, really wonderful who is doing that same work, who’s at the forefront now and who is making CSS, jump through it’s own sphincter and all that stuff, so he was the guy. Ethan has a wonderful, funny writing style that I’ve got to say, this’ll sound, it reminds me of mine, and it sounds arrogant, I’m not saying “He’s wonderful like me!” His writing style and mine flowed together so naturally that it’s hard for me looking back, “Did I right that, or he?” I think it was perfect.

Paul: Brilliant. So what encouraged you to write a third edition then? You know is two not enough?

Jeffrey: Well actually, if we still had IE6 as the principle browser that everyone was using, if XHTML 2.0 was still going strong as an experiment that nobody was going to use, there was no [what] working group, there was no CSS3 in the wings, there was no HTML 5 in the wings, we could have waited longer. But, it so happened that during the writing of the second edition, and shortly after the standards community was very upset. It seemed like it was divided between people who thought now we have a stable base of tools and we know what to do, let’s just keep refining our best practices. Another group said that’s all well and good, but we need new tools, we’re very limited in what we can do, in terms of layout. The semantics of HTML are very limited. Well now, all of a sudden, in the last year and a half, HTML5 comes bursting out, like ready to be used and supported in browsers. There are elements of CSS3 that are in browsers. People are all over, not just standards people, people all over, including Microsoft are saying “Help us get rid of IE6.” We have An Event Apart speaker coming from Microsoft, who’s going to spend half an hour, asking our audience to help him get their clients off IE6. So, there’s so much going on after basically eight years in a nursing home. Years of dull, bad, nothing happening, except that everyone got up to speed and pretty much anyone who wasn’t aware of web standards and wanted to be, had those eight years to read the books, make the mistakes, and everybody knew the tricks and all that and now all of a sudden its an all new game. And I think also the fact that people I respected kept saying we’re in so much trouble, we’re going to lose semantics, HTML5 is a disaster, XHTML is dead, that means that people who use XHTML are fools, we’re losing the W3C, the W3C is stifling innovation, and there was so much opinion that was so wild, I thought “Okay, what do I think about this?” and a few blog posts that I had written in response didn’t seem like they were solving anything, it didn’t seem like I could go “Here’s what I think…” that it was over. There’s a lot of ferment, a lot of people who are confused, upset, so let’s figure out what’s going on and see if we can provide some wisdom.

Paul: Ethan, from your perspective, what is it about the third edition that really excites you? What in there is really grasping you, what was your excitement as yuo wrote it?

Ethan: I was a technical editor on the second edition, and started off as a technical editor on the third edition. Just comparing the two books, there’s a remarkable difference between the third and the two prior. I think the biggest one is that, Jeffrey I think you would probably agree, that this edition is significantly more hands on than the first two were. Designing with Web Standards is fundamentally and definitively a conversation starter, for someone who is interested in standards-based web design. And it introduces a whole host of topics pretty authoratively but not exhaustively. I think the first two editions definitely still had to make all the philosophical arguments of, this is why we need to move past table-based layouts, this is why this new techniques really make a lot of sense for the web. Now we are in the position where there are still a lot of people out there that are still acclimating themselves to web standards, but at the same time we do need to start getting more of our feet wet. So the layout chapter has been significantly re-written to actually introduce people to the concept of not only the box model but the float model and some of the drawbacks with some of the different techniques that are out there. The last chapter of the book actually is a pretty comprehensive look at how these three tiers of the standards “cake” or the trifle if we’re playing Andy Clarke for a moment, actually snap together, pretty robust calendar, using just a straight HTML data table. I think there’s a lot of really great stuff in there, I think even the philosophical stuff is still fresh and new to me as a reader, but the hands on stuff is what I’m most excited about.

Jeffrey: I agree. I think we freshened it. Basically, nothing was sacred and anything could come out. In the second edition, that was not the case. The second edition had to keep making some of the same points and had to stick to some of the same examples. In this edition, we threw out many of the examples and language. There were all kinds of regressions in the first and second editions that were interesting, maybe important in some ways, but they didn’t seem as important now to what people are doing. There’s an emphasis in the book in just what do you say to your client or boss who says you can’t do accessibility. What do you say to the person who says we can’t afford user testing or we have to support IE6. Of course they do; they have to support it, but what does that mean? What does that mean in 2010? So there’s still a lot of philosophical stuff upfront but it is short. Unlike what I’m doing in this interview, I wrote short. If I had seven paragraphs to explain something in the previous edition, it was like let’s do it in one. So I think it has a leanness to it.

Paul: Yeah, it sounds like for the vast majority of people who already own one of the previous editions, this feels like a real leap forward that is worth paying the extra money for because of the new state of things at the moment. So yeah, sounds really good.

Okay, I’m quite interested in the way that you described a minute ago Jeffrey the place that we’re at the moment, because there are a lot of people that would say, well, isn’t the work of the Standards movement done, haven’t we kind of seen that adoption that we were looking for both in terms of the design and development community, but also in terms of browser support, is there really still work to do? But from what I’m hearing from you so far, you see there as being a big transition point. Is that right?

Jeffrey Zeldman presents

Image Source

Jeffrey: Yeah, I think there’s work to do on two levels. I want to hear what Ethan thinks too. From my perspective, even if none of the changes I mentioned were happening; even if there was no HTML5, no CSS3, no ending of XHTML, etcetera, etcetera, there would still be a phenomenal amount to do in education, because most of the schools that are teaching web design, aren’t doing it right at all. They’re not teaching interaction design, they’re not teaching usability, they’re not teaching content strategy, and they’re certainly not teaching web standards. They’re looking at it as some kind of brain damaged, sub-species of graphic design. They’re telling them “well, you know how to use Illustrator, learn how to use Flash.” I was talking to a man yesterday, very qualified guy, who was up for an academic position at an university in his area. And he didn’t get it; they literally laughed at him. Again, these are professors, people who knew nothing about web design, they laughed at him. But it’s all Flash, we don’t understand, just learn Flash. What is it you’re trying to teach? We don’t get it. So if people could just take the first edition of this book, and some Eric Meyer books, and some Andy Clarke books, and Dan Cederholm, and just spend old ones, and just redo the way web design is taught in the academic community. So there’s that thing. Then, did I say two, there’s three. When I’ve been writing about, at Zeldman.com, when I’ve been writing about what’s going on with the iPad, why did they leave out Flash, is there any upside to that, or talking about IE9 preview, I get a fair amount of, I wouldn’t call it hate mail, cause that’s too strong, but I get a fair amount of people, very strong push back, who either think that Microsoft’s browser is really the platform that everyone uses, so standards should be adopted to it, not the other way around. I still hear that a lot. And I still hear, the way you guys are torturing web fonts and everything like that, just use Flash. So there’s a lot to do there. And then the third thing is for the people that get it and who are on board, as you said, it’s a transition point or an inflection point because the way we use standards is changing. Or rather, the baseline best practice that we have which will last forever and they’re fine, we can now do more with less. We can now use lighter CSS to do some of the things, and lighter markup to do some of the things that required, like now, in the past, I wouldn’t have done rounded corners just because of the ridiculous amounts of silly markup I had to use to do it. Little pieces of images, and using it now, especially with IE9 onboard, also supporting CSS3 rounded corners, put in the rounded corners and eventually, everyone will see them; even though not everyone will see them this year. I also think the whole war about whether it’s ever okay to use pixels as size elements for type takes on a new dimension when text zoom is pretty much dead and page zoom is pretty much the way. Ethan and I disagreed on that and actually, we were going to do an author vs. author thing with our arms crossed, but we just didn’t get it together in time.

Paul: So I want to pick up on that. It’s always good to find a point of disagreement. Who takes what position over this? What’s your position, Ethan?

Ethan: I take the right one. I’ve always been a strong believer in designing to the user’s preferences. Obviously, at some point, design is about setting parameters for the experience. When it comes to font sizing, I’ve always been a firm believer in shying away from pixels, just because of the prevalence of IE6 in the marketplace. That’s really it. Working with large financial institutions or government institutions where that is such an entrenched install, you know, but at the same time, you have to balance that with the accessibility needs of, well, we have some low vision users, or differently abeled users that would actually like to bump up the contrast on this a little bit. I’ve found working with Ems, especially with a lot of Rich Rutter’s excellent work. He wrote a great article for ALA a couple years back that was my go to article on that for a long time.

Jeffrey: The 62.5% solution or the one he wrote after that, how to size text on the web?

Ethan: The 62.5% one was a technique that he used on his blog and then he sort of upgraded it for the ALA article and said that actually basing a font size on 100% for the body gave you a much more consistent display. And really, I’ve just found, and I should state at the outset that I am horrible with math, but I’ve always found that it’s fairly easy to do with a little, just using the calculator app on OSX.

Paul: There are also some great web apps now that kind of do all that hard calculation for you as well.

Ethan: Yeah, and actually I use Textmate as my text editor, and they got some built in calculation stuff which is great, not only for sizing text but I also do a lot of work with fluid grids.

Jeffrey: You have to come to my desk, because I use Textmate too, and I don’t have any of those tools. I know they’re built in.

Ethan: Sure, we’ll do a screen share after this.

Paul: I can see another thing come on. We need to do a screencast of all these tools you have, Ethan.

http://unstoppablerobotninja.com

Ethan: It’s great watching other people work. That’s one of those things that you lose in a virtual environment. I love seeing how people set up Photoshop, or set up their text editor, it’s always fun.

Jeffrey: I used to just sit and watch other people work.

Paul: Well, it’s far better than working yourself, I find.

Ethan: Yeah.

Jeffrey: It was work. That’s my job now.

Jeffrey: I wanted to get back to what Ethan said about text sizing, because I agree with everything that Ethan said. We don’t want to cause accessibility problems. A lot of people are stuck with IE6. All that stuff is true. And in those environments where you know you have a lot of users with IE6, then you know that pixel-based text is out of the question. I just want to stand in; I’m all for usability and the user and all that, but I just want to say a word for the designers for a minute. There are limitations in every medium, this is true. What a designer of a book can say, I’m going to have this be 15 point and this be 12 point, and there’s a mathematical relation between them, and it’s very controllable and I know what the user is going to see. And they can control the leading, and the margins, and everything else, so that there’s this beautiful, underlining, horizontal and vertical grid, and the page feels pleasing, it’s pleasing to look at and it’s easy to read. There’s no reason, because I refuse to let pixels be magnified because of a stupid wrong decision that Microsoft made 12 years ago that we have to jump through our own anuses, and still only approximate the results we want to get. I think it’s ludicrous. When there are so many other browsers out there, and when IE itself is transitioning to the same thing. I think that now that’s page zoom is out there, and it’s out there in IE8, it’s out there in IE7, I think it’s okay. There’s only the IE6 user who won’t be able to, and if you’re designing a book site for designers, if we’re designing The Book Apart website, to promote a book that we’re doing for web designers, I think that would be okay to set in pixels. Because in all probability, people are looking at the site in Firefox or Chrome, IE8 or Safari. It’s a question of knowing your audience. I look forward to the day when we can use absolute sizes, the user isn’t limited because the user can still make them bigger or smaller. And artificially, a sort of limited understanding of what CSS meant, that resulted in an arbitrary decision won’t force us to keep doing crazy things and saying “I’ve got this thing that works now, make it 100.1%, and put that on the body. And then the HTML is 100% of the body.” And everyone I work with does these things and it drives me nuts. And I just want to go, you know what, if I need something to be 12 pixels and something else to be 18 pixels, I should be able to do that without hurting anybody. So I think it’s idealism, and remember I’m not just saying well, I’m going to do this because, nyah nyah, I’ve been asking them to change this for 12 years. Can you change this now? Can you change this now? Can you change this now? Like, have you ever seen SpongeBob? SquarePants? Can you change this now? Can you change this now? Can you change this now? That’s me. They finally found a different way to do it. That’s fine. I’m agitating on behalf of the users and designers. Good design is better for users. Right?

Ethan: I will say that, Jeffrey and I have had this sort of scorched earth, back and forth, a couple times now.

Paul: I was going to say, at some point, I’m going to have to stop the two of you, otherwise this could go on forever.

Ethan: Paul, if you could just play marriage counselor today, that would be a huge help. I will say that, it definitely needs to be driven by the constraints of the project. I worked on a fairly large site, New York Mag, which we talk about a little in the book, NYMag.com. It was basically a very large template production job for me. It was very beautifully design, but very encyclopedic module library that they were going to be building. The producers that were going to be inheriting the work wanted to have the flexibility to like, we’re going to nest module A inside of module B. All the typesetting was going to be done in pixels just because, it was going to make the most sense for them. Because, maintaining a stylesheet that was going to handle all of those contingencies was going to be just a nightmare. But that said, I think Jeffrey and I have our respective biases on that front.

Paul: I mean, a lot of these things turn into religious debates really, were you pick a side, but in most cases, the answer is “it depends.” There are always other factors that need considering.

Talking of browser support and IE6 and that kind of thing, Have either of you guys had a chance to root around IE9? What’s your initial impressions so far?

Ethan: That’s a great question. I actually haven’t touched it.

Paul: Ah, well, fair enough.

Jeffrey: Me either. I really happy with everything that I’ve seen, in terms of their improved standards compliance, just in the last few days that they’ve been public. But we’re a Mac shop, you have the virtual PCs and all that. We haven’t started testing in IE9 yet.

Paul: Fair enough. I just thought I’d ask because…

Jeffrey: It’s a good question.

Ethan: I’m installing it right now. Actually no.

Paul: Now out of quilt.

Ethan: We can clean this up in post, right?

Paul: No, no, no, you’re going to be publically shamed. I haven’t looked at it either. I’m sure some clever people have, obviously not us.

Okay, let’s move on to the subject of what’s exciting you the most on the web at the moment. Jeffrey very briefly touched upon web fonts earlier, and it seems to be something that you’re writing a lot about. Is that where your real passion is now, or is there something else that’s grabbing you?

Jeffrey: I’m passionate about the idea of it. And I would love it to work well and easily just with @fontface. I’m thrilled for Typekit, which is a great tool. I’ve tried three tools now, out of which Typekit is the furthest along, and it’s definitely driving adoption, getting people really excited, it really just works. It’s all great stuff. But for the same reason that I want IE to let me size up something in pixels and let it get bigger or smaller, or whether the user needs to do that or not, I think I have issues with the fact that were so close and yet so far. That fonts are looking bad on the screen and all the issues that we have to overcome.

Happy Cog Studios

Paul: So what is your approach at Happy Cog when it comes to web fonts? Are you tending to steer away from them or what’s the situation?

Jeffrey: Ethan, with the projects that you are doing, we’re doing different things. It all depends. There’s some pages where we’re still using sFir and Cufon…

Paul: I never know how to say that either…

Jeffrey: We’ve used some @fontface and we’ve used some Typekit, which is @fontface with lots of support. It depends. We’re not delving into it deeply yet. We’re setting headlines more than body text at Happy Cog, so that gives us lots more flexibility. The body textóthe problem is the type, and the type outside of our favorite browsers. When we look at the stuff in our favorite browsers, we want to weep with joy. But when we look at it in Windows, and some older browsers, and some older platforms, the thing with Windows, it’s a many headed beast. The other issue is that Roget Black, a studio mate here in New York City, described it as there’s this health living guy, but he’s dragging these corpses behind him. Here’s IE9, and you’re like “wow, that’s great.” Then here’s IE8 and it’s looking pretty good, but you got all these old versions of Windows, and all these old versions of Clear Type or no Clear Type at all, and these old versions of IE, and Microsoft has to keep supporting them for like another 5 years. So the handsome salesman is walking along with all these corpses tied to his back and it makes it hard, it doesn’t make it seem like a stable platform yet for type.

Paul: Ethan, is that your experience as well?

Ethan: It is. I mean we’ve done a limited @fontface and that is purely because we really let the design drive the requirements. So many foundries have pretty explicit constraints on what you are able to do with their typefaces. Cufon is just right out in a lot of cases. sFir is actually banned on a couple that I know of. Hoefler & Frere-Jones, who do beautiful work, explicitly allow sFir, but any other conversion of their typefaces is right out. We try to have a lot of discussions upfront with a client when we’re reviewing designs saying that if they’re especially wedded to a particular typeface, here are our options for that. And then we just try to talk to them about what kind of maintenance are they interested in having. I think for most of the headline stuff we do, we’re still pretty comfortable working with sFir. It really just depends on the project, and what the clients is willing to take on.

Jeffrey: I will say if you’re going to go with body type, Typekit seems like a very good solution right now, because the fonts are going to keep changing. If you’re trying to brand your body text, by using a font other than Times or Arial or Georgia, in all probability, the type shop that designed it today is going to change the hinting on it or even redesign the font several times over the next few years as the landscape keeps changing. If you go with Typekit, they’ll just make sure that they’ll swap in the new version, they’ll make sure it happens. Some of the font vendors are saying the same thing; that they’ll do that as well. Like I know that Font Bureau is going to host their own fonts. You can buy them, put it on your own server, and link to it with @fontface and your done. Or you can buy it and let them host it for some kind of fee they’re still working out I think. They will swap in new versions as they rehint them.

Paul: So it sounds like you both have some concerns when it comes to web fonts, which is understandable. So what is it then that fires you up these days? What gets you passionate still about the web and what do you see emerging that still excites you?

Ethan: A lot of the stuff that we cover in the third edition is where my head has been at recently, with CSS3. Dan Cederholm talks about this, like a period of great revisiting. We’re looking at the techniques that we have sort of gotten used to using for the past few years and trying to apply these new technologies to them in kind of exciting ways. So that’s one thing. The other thing; a lot of our projects at Happy Cog have been device agnostic. We’ve started having a lot of clients that are asking not just for a rich desktop experience when you’re browsing their sites, but also with the advent of the iPhone and Apple’s got another little toy coming out shortly I hear…

Paul: Apparently, I haven’t heard much about it.

Ethan: I’ll have to check the rumor blogs on the Internet. There’s been a lot more opportunities for just thinking outside the very strict design parameters that we usually work with. Then just thinking about not just designing for any particular device but a particular context. Because even if you are on a mobile phone, if you’re viewing something on a subway in the morning versus in the middle of the office at 10:30, your environment sort of dictates how you want to interface with a particular piece of content. That’s really what’s been firing me up as a long term proponent of flexible designs, letting the user dictate the experience. I sort of see that as the next step, thinking beyond the desktop.

Paul: Yeah, absolutely.

Jeffrey: It really takes John Allsopp’s A Dao of Web Design to a whole new level. It is what it was all about to begin with. I totally agree with that. I’m also really excited about, in terms of client services, about the more holistic way we’re approaching work today, and the fact that so many clients accept it. In the old days, a client might come and say “I need you to skin this” and you’d say, “Well, who are your users, what are you doing it for, can I see the content, and have you thought about this” and they really didn’t want a strategic partner. They wanted someone who knew HTML and CSS and JavaScript and could design. A competent designer who knew JavaScript and HTML. There’s still clients like that and there’s nothing wrong with that. But what is exciting to me; so we will be talking to the US Holocast Museum in Washington, D.C. and it’s a whole, complete, strategic thinking about “What is the museum experience, is it appropriate to recreate that for the website and if so, how would you do it.” Not in some corny way, like we did back in the 90′s, like “we’re doing a virtual fly through.” But actually what is the emotional experience, what is the educational experience, and then beyond that, how do people use the website differently, who’s coming there, the whole emphasis on user experience and content strategy long before we get to the design phase. It’s really exciting to me as a creative person. I feel like we’re more and more strategic partner to our clients. which I’ve always loved and wanted to be. My very first web design job we got over a competitor was for Batman Forever. The competitor was talking about Batman was going to fly in, this was 1995. Batman was going to fly down a rope, like a Pearl script was going to … and then Batman was going to say “Hi, I’m Batman, blah blah blah, and I just blurted out, “Batman doesn’t talk.” And the client looked at me and I knew we had the job. Because I could think strategically and I could think about the character. I’m not bragging, I’m not really smart. Anyone who actually loves that character and knows the Batman lore knows the Dark Knight doesn’t talk. He just this mysterious presence; he just has to be there, in the background, being cool. I think now, finally, we’re very much partners in that way and I really like that very much. It seems right now there’s so much going on in terms of shared understanding of shared technologies with APIs and shared understanding of how users do things and what they want to do, I really see this sort of confluence happening where things that we think of as games and little kool iPhone apps and so on and things we think of as real, Gowalla, and things we think of as serious tools, like Google Maps; I see this all coming together. I think the whole mashup culture that was sort of trippy and fun a couple of years ago, I think it’s going to produce an approximation of ubiquitous computing on our desktops, on our phones, and everywhere else. I think it’s coming really soon. I think everyone feels that. The fact that we’re talking about putting real fonts on the web is just another part of that, in a way. It’s like how can we create these fully branded experiences and have them interact with each other in a seamless way that just works. It seems like that’s what is happening now and that excites me. And it’s all built on standards. It’s all built on HTML, CSS and JavaScript.

Paul: There’s one last question, we really ought to be wrapping up before very long. As you look now at the web design community that has emerged over the last few years, what do you feel is the biggest lesson that we still have to learn as a community is?

Jeffrey: I would say to respect each other. Respect each other’s choices, respect the client’s wisdom, the user’s wisdom, not to think that we’re the expert.

Paul: I do feel that sometimes we’re impetuous teenagers trying to stamp our authority on the world and say how important we are and how we should be listened to. We possibly need to grow up and relax into our role and not feel the need to prove ourselves constantly by saying we’re right and everyone else is wrong.

Jeffrey: That’s how you get the respect. You get respect by being the grownup in the room.

Paul: Ethan, what about you. What do you think is the big lesson that we’ve got to learn is?

Ethan: I think it’s a corollary to that the first response isn’t necessarily always the right one. I know Jeffrey has been writing a couple of fire inducing blog entries lately, which has been interesting to watch. Obviously, when you’re presented with a crisis of the web, he talked earlier about how the W3C was going to go up in flames a year and a half ago, XHTML2 was dead and we were all going to be working on FrontPage in three weeks. There’s a kneejerk reaction to sort of panic and sort of get your opinion out there. And I do think that a little more research and a little more information can usually yield better results. I think standing back from the crisis for a moment and asking some smart questions can be good sometimes.

Paul: Thank you so much guys. It’s really interesting to hear your perspective on things and get you on the show. All the best of luck with Designing with Web Standards, Third Edition. I’ve no doubt that it’s already broken all records. I hope it continues to do so. Thanks for coming on.

Thanks goes to Dennis Deacon for transcribing this interview.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.

Web Design News 02/03/10

This week: the search for inspiration, using CSS3, ecommerce tips and why the browser landscape in Europe is about to change.

The search for inspiration

I am always encouraging those of you who listen to this show to be more adventurous in your designs. With website owners tending to be conservative and designers jumping on the latest design trend, website quickly all look the same.

Design Instruct has an article this week outlining some ways that you can find inspiration. Other than a recommendation to ‘look to the history of design’ for inspiration, none of the suggestions are that original. Most we have discussed before on the show.

However, there is a second post this week from Smashing Magazine, which is truly inspired. Entitled ‘Find inspiration in uncommon sources‘ it lists some great ideas that you should take a look at. My favourites sources of inspiration were:

  • Board games
  • Food
  • Fashion

These are certainly not areas I have considered looking at before. Infact shortly after reading the Smashing Magazine post I stumbled across this amazing post about food design which I highly recommend. It will certainly inspire.

Art made from Toast

Using CSS 3 right now

We talked a lot about HTML5 and CSS3 on the 200th episode of Boagworld. Hopefully this has left you keen to get stuck in, especially as these technologies can be used now and not at some future date when they are universally supported.

If that is the case then here are two great articles on CSS3 you should check out.

I would recommend starting with ‘You can use CSS right now’ as it focuses on basic stuff like rounded corners, drop shadows and alpha transparency.

Once you have your head around that, turn your attention to the mind blowing possibilities in the second post. Some of the stuff they cover includes:

  • CSS only content sliders
  • CSS only dropdown menus
  • Image free speech bubbles
  • 3D ribbon effects
  • Awesome buttons
  • Letterpress type

Of course these techniques are not universally supported, but as they are enhancements to a site rather than crucial to its operation, that is fine. This is progressive enhancement at its best.

Example of a CSS only menu

Europe set to have a broader range of browsers

We have known it was coming for a while but it looks like the moment is finally here (in Europe at least) – Microsoft now has to offer a range of browsers on its Windows operating system, not just Internet Explorer.

According to Sitepoint this will happen any day now through automatic update and is going to affect every user with IE as their default browser. Sitepoint writes…

The Browser Choice screen will be offered in Windows XP, Vista and 7 to users who have IE set as their default browser. It will be installed through the standard automatic update system.

Following installation, a new “Browser Choice” icon will appear on the desktop and the IE icon will be unpinned from the Windows 7 taskbar. An introduction screen will appear which explains what a browser is.

The user can opt to select later or proceed to the browser choice screen. The five most popular browsers are shown in random order — IE, Firefox, Chrome, Safari and Opera. A further 7 randomly-ordered browsers are available if the user moves the horizontal scroll bar.

The system can download and install any number of browsers.

This will have a massive impact on the European browser landscape. My bet is that the big winner will be Google. Many users will play it safe and stick with the blue E that they know. However, a lot will be tempted by Google because it is a brand they know and use regularly. Expect their market share to jump.

However, I have left the best bit until last – According to Sitepoint:

IE6 and IE7 users will be prompted to upgrade to IE8!

This means whether users upgrade to IE8 or opt for a different browsers we are going to see a dramatic improvement in standards compliance here in Europe.

Oh happy day!

Browser Choice Screen

Ecommerce development tips

I am very conscious that I don’t cover a lot of news for developers on this show. That is mainly because I don’t understand much of what you guys do. However, an article this week caught my eye and I thought I would share it with you.

24 Ecommerce Development Tips appears to be a comprehensive list of technical things to consider when developing an ecommerce site.

The article covers everything from database configuration to handling the complexity of discounts.

24 ecommerce tips

One part that jumped out at me in particular was:

AJAX is fine for checkout, not for product browsing. Don’t load products or product previews in DHTML windows or an AJAX widget. Search engines won’t be able to find them. Which means you won’t sell anything. Which means you’ll go from full time to part time to contract to unemployed.

The reason this grabbed my attention was because it reminded me of my own post on Javascript and ecommerce.

If you happen to be considering building an ecommerce website anytime soon, I highly recommend you read it.

We recently discovered that very few of the big name ecommerce software packages run without the use of Javascript. If that includes your website then you may well be turning away 1 in 20 of your potential customers.

Certainly food for thought.

Super charge your browsing

As web designers and website owners we spend a lot of time working within the web. Discover how you can streamline your browsing experience with launchbar and quix.

Apologises for the rather unprofessional video (with the wife wandering around in the background). However, as this is not strictly about web design and so therefore not strictly a boagworld official post, I thought I could get away with it!

Install the Quix bookmarklet now

Download a demo of Launchbar

164. Case Study

On this week’s show: Paul shares his experiences of working on the Wiltshire Farm Foods website, we examine the role of Twitter and Ryan Carson shares some more advice on building web applications.

Play

Download this show.

Launch our podcast player

Housekeeping

Write for Boagworld

I am constantly amazed by the intelligence of those who listen to this show. The talent and knowledge of the Boagworld community is truly staggering. If you don’t believe me spend a bit of time in the boagworld forum.

I am therefore looking to get more people involved in publishing to the Boagworld website. If you have an idea for a post that you think others will be interested in, write an outline and post it to this thread. If the idea is appropriate I will get in touch and arrange for your post to be published.

Obviously, the post will be fully credited to you and will link to your site. Hopefully that will make it a worthwhile marketing opportunity!

Back to top

News

The importance of sketchbooks

Talk to any designer and they will tell you about the importance of keeping a sketchbook. Ask that same designer whether they actually do it and the answer will probably be no.

The most common reason for not doing so is a belief that you need to be able to draw to have a sketchbook. Believe it or not most designers cannot draw. According to Jason Santa Maria’s latest post “Pretty Sketchy” that is not the case.

He argues that…

Sketchbook’s are not about being a good artist, they’re about being a good thinker.

I have to agree. However, sketchbooks have always filled me with some trepidation. Although I know they don’t need to be a work of art, I still want them to be.

That said, this post has inspired me to start keeping a sketchbook again. I know I am no longer what you would consider a designer, but Jason has made me realise that having an easily accessible place to keep ideas is worthwhile, whatever your role.

I encourage you to read Jason’s post and do the same.

Supporting old browsers

Jonathan Snook has written an interesting post about support for old browsers this week. He begins the post by establishing the importance of supporting older browsers. He writes…

When it comes to market support, I’ve often looked at it as one big pie. You may say that Opera is too small to really care about. It’s only 2%. You don’t care about Firefox 2 users. It’s only 2%. You may not care about accessibility issues. It’s only 2%. Soon enough, you’ve whittled down your potential market to 90% of what it could have been.

This is certainly a slippery slope and one that I personally take very seriously, hence my posts on Graded Browser Support.

However, as Jonathan goes on to point out, graded browser support is not without its problems. Although it is relatively easy to provide alternative basic styling to IE6 and below (thanks to conditional comments), it is much harder with earlier versions of Firefox, Opera and Safari.

Personally, I am not happy to resort to browser sniffing and I am not sure this is a massive issue. Based on stats from sites we are involved in, most users of minority browsers (Safari, Firefox and Opera) upgrade to the latest version.

In the end you can only test on so many browsers.

Approaching content on the web differently

The two articles that have most excited me this week both relate to website copy.

As we have said many times before on this show, all too often website owners are willing to invest considerable time and money in getting design right, but largely ignore their content. If you are willing to pay a designer to work on your site, you should also be willing to invest in a content strategist.

Tiffani Jones from Blue Flavour outlines the role of a content strategist in here post “Learning About Content Strategy“. When describing this emerging discipline she writes…

We kind of know that it lives somewhere between web writing, web editing, information architecture, SEO stuff, web analytics, and production.

She goes on to demonstrate that websites need somebody capable of writing good copy but also understanding SEO, wireframing, marketing and much more.

Of course, many people think they can write good copy themselves. They may infact be able to do so. However as Gerry McGovern points out in our second post about copy, good web copy writing is different from traditional writing.

Gerry argues that some of the rules of traditional writing do not apply to the web. He compares writing online copy to giving an elevator pitch…

Your customer has walked into the elevator, the doors have closed, they turn to you and say: “Convince me before the next stop to buy your product.” Design your website from the ‘I badly need to go to the toilet’ perspective. Your customer needs to act and act quickly. That’s the Web.

Setting aside the dubious toilet analogy, this is an excellent post that really makes you think about whether your copy is meeting users needs or massaging your own ego.

Improve usability through help elements

Smashing Magazine have released a helpful article on help this week.

It looks at the context sensitive help that is becoming increasingly prominent in web applications, ecommerce systems and forms. It outlines the obvious usability benefits and gives loads of examples of how context sensitive help can be implemented.

There are no major revelations in this post but it is useful to see how others have tackled this issue and to be reminded just how important help is.

It is too easy to address help as an after thought and so not properly integrate it into the design. As designers it is often not until a developer asks about error handling that we begin to start thinking about help messaging. We need to ensure it is apart of our design process and that the wording of these messages as well as their design is carefully considered.

Audible recommendation

Download a free audiobook today

This week I would like to recommend Nudge on Audible.com, a book about influencing the decisions people make. Although not directly about web design it has had a profound influence on how I build sites. If you want to influence the behaviour of users then I would highly recommend this book.

Best of all if you sign up with Audible you can get this book totally free. Simply go to www.audiblepodcast.com/boagworld and claim your free credit.

If you want to listen to it, Audible has it! With over 60,000 titles and virtually every genre, you’ll find what you’re looking for. Get a free audiobook and 14-day trial today by signing up at www.audiblepodcast.com/boagworld.

Back to top

Feature: Case Study: Wiltshire Farm Foods

One of the biggest challenges of running a successful website is balancing the needs of users with those of the business. This is especially true when an existing business model conflicts with user needs.

Read the full article

Back to top

Ryan Carson: Advice on building web apps part 2

Ryan Carson:Hey Everybody, this is Ryan Carson one of the founders of Carsonified.com today we are doing are second instalment of five minute Web App tips for Boagworld. So let’s get started, the first thing I’d say is do not build your billing system from scratch. Now, if you have a Web App that does recurring billing, so you are charging someone’s credit card every month there is quite a bit of code to write for that. When we built dropsend.com there was at least 1200 lines of php code in order to do that, and it’s a very difficult problem to solve. You have to do things like charge someone’s card if their card has been cancelled, send notifications, try to bill them again and in seven days bill them again, another seven days keep track of invoices, cancel them if they cancel their account. It is just a real headache and there is a lot of stuff that can go wrong with that. So, I would say you should outsource something like that to spreedly.com. Basically it’s an API web service that does recurring billing for you, so give it a try. I don’t work for them; I’m not being paid to say that, I just think it’s a good idea. And y’know if you ever decide to switch out of Spreedly the nice thing is that you’ll make a series of API calls out to the service and all that you’ve got to do is bill those services internally if you decide to do so later. So it’s definitely important not to waste time doing that from the beginning. Also, some people may say “Well, what about the fact they are going to take a part of your revenue?”. Well, the truth is, your bank is going to take that cut anyway, so you might as well have Spreely take that cut, there really is no loss there.

The second tip I’d like to talk about today is that you should plan on doing AB testing from the very beginning. When you do all of your site designs, especially your Home Page and your Sign Up/Payment Page, those really need to be tested with AB testing from the very beginning. Have a series of phrases or different graphics you plan on switching back and forth and make sure you measure which ones are working and increasing your paid sign ups. There is a great post on “Signal Vs Noise” about that, if you go to bit.ly/ab-test they talk about their pricing page and how they made some basic changes and they saw huge increases, 30% in sales for instance, it’s really important. On the subject of AB pricing I spoke to Jason Fried over coffee at the Future of Web Apps in Miami. I said “Can you tell me anymore about what you learned during AB testing?” and he told something really fascinating which was, When they changed the words ‘Free Trial’ (or Sign Up for free) on their Home Page to ‘See plans and pricing’, they saw an increase of 200%, so that was a real shocker. What he said was happening was that, people were afraid of signing up. Y’know they thought if they clicked on the ‘Free Sign Up’ button, then somehow they would automatically get an account that they could not get out of. Whereas if you say “Hey, Check out plans and pricing”, y’know no commitment, people are much more willing to click through and then probably
sign-up. So that was really interesting.

Okay, another tip for you is, I would suggest creating a new company for your Web App. The temptation would be to launch it as a service of your current company. So for us, when we launched Dropsend.com it was owned by Carsonified. But when we sold Dropsend it was really hard to extract out that company from Carsonified. So if we had started Dropsend Ltd. or Dropsend LLC it would have been a lot easier to do that. So I would just set up a fresh company from the beginning, it can be owned 100% by your current company which will make selling it, if you ever sell, a lot easier.

The final tip I’d like to talk about today is source control and I would highly recommend you use http://github.com it’s free, it’s a wonderful way to keep track of your repository for code and I’d highly recommend it. So, that’s it, thanks for your time today, and thanks for listening. Goodbye

Thanks goes to Ben Hardcastle for transcribing this portion of the show.

Back to top

Listeners Questions

Twitter

This week I received two excellent and related questions about the use of Twitter as a marketing tool. The first comes from Teifion who asks…

My question concerns morality and twitter, an odd combination I know. I have several bots on twitter, all day long they download RSS feeds and then tweet links to new articles. A good example would be @design_agg which reads design websites such as Boagworld, it then tweets the relevant links to the post and the post title. There are other bots like them, for example I know that @stanton maintains the @boaglinks bot.

Of course, none of these bots create content, they simply link to it. The question is, is this wrong professionally and is it wrong on a social level? For a list of the bots, just look at who @design_agg follows.

The second questions refers to another automated Twitter account…

Hello Mr Paul Boag, this is Jimmy Nightly from the Swedish online auction site jiiro.com. I’ve recently been following Amazon on Twitter and they’re using several feeds to draw traffic to current campaigns. Their feed Amazon Deals has only 8000 followers and to me it just doesn’t seem that much compaired to how big Amazon really is over here. My point is, if they only have 8000 followers do you then think Twitter is a marketing tool for the future?

Both questions revolve around the subject of automated twitter accounts. These are accounts where the posts are automatically generated rather than the thoughts of a particular individual. Our first question is concerned with their morality and the second is concerned with their effectiveness. Both valid concerns.

Let’s take each issue in turn…

The morality of automated twitter accounts

The fact that Boagworld runs an automated twitter account posting web design related links shows that I do not have a problem with their morality. However, I understand that others do. Let’s look at two potential criticisms.

  • They are not in the spirit of Twitter – Some argue that Twitter was not created as a broadcast tool and should not be used in that way. Twitter is about community not news/announcements. Although I do agree with this point to some extent (as you will hear later) I don’t think the argument ultimately stands up. Strictly speaking Twitter was created for people to post ‘what they are doing’. In reality it is rarely used in that way. Twitter has grown to be much more than originally intended and a broadcast mechanism is a part of that.
  • They steal content from others – The second concern is that they are regurgitating content created by others. They are not in themselves creating value. Again I would disagree. Their value comes in the time saved for the reader. Instead of having to manually check sources, they are presented with all they need to know in a convenient form. In my mind it is no different from an RSS feed on Delicious or the news section of this show.
  • In the end, if people do not like these ‘bots’ they can unsubscribe. However, some do find them useful and there is no reason why they should be denied their services.

    Of course, they may provide value to the subscriber, but do they provide value for the owner. Are automated twitter accounts an effective marketing tool?

    The effectiveness of automated twitter accounts

    Jimi’s question calls into doubt the effectiveness of Twitter as a marketing tool, citing the Amazon Twitter account as proof. It is remarkable that Amazon only have 8000 followers on this account but it is worth noting that their Amazon MP3 account has over 300,000.

    However, it is not the specifics of Jimi’s question that I would challenge. It is the entire premise. To me, if Twitter is used well, it can be a lot more than a marketing tool. Companies like Amazon are failing to grasp the full potential of Twitter because they are using it as a broadcast tool, rather than a way to engage with its users.

    Twitter provides a lot more than an opportunity to broadcast your latest deals. Twitter also allows…

    • An opportunity for great customer service
    • A chance to inform your new products and services
    • A way of creating passionate evangelistic users
    • Real engagement with your users

    Unfortunately using Twitter to publish automated ‘feeds’ fails to reap these benefits. It in no way engages with followers. It only broadcasts.

    Only by engaging with their followers will organisations really reap the benefits of Twitter. Companies like Zappos or Omnigroup are leading the way in this by using Twitter to provide support, inform their future products and engaging with their community.

    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

     

    159. Special Guest

    On this week’s show: The northerners are back with special guest host Sarah Parmenter.

    Play

    On this week’s show: The northerners are back with special guest host Sarah Parmenter. We answer your questions on how to quote for projects and whether using off-the-shelf software is wrong and we have a chat with Sarah on her experiences in the industry and the difference between developing for clients and developing for yourself.

    Download this show.

    Launch our podcast player

    News

    Alkaline

    Our first story for is a new product by the guys over at Litmus, you may have come across their Browser and Email testing apps before and they’ve just released a new Mac app called Alkaline, this is a Mac front-end to their online browser testing suite and lets you test your website designs across not only 17 different Windows browsers which they mention on the site, but also all of the Mac and Linux browsers that the online Litmus services test against.

    Alkaline grabs screenshots of your site rendered in all major browsers, the number of which depends on your chosen pricing plan, It’s free to test against IE7 and FF2 and if you need to test across all browsers, it’s available under the standard Litmus pricing plan which offers both individual and team monthly subscriptions, and a handy day-pass if you only do this kind of testing every now & then. Litmus also stores a history of your screenshots so you can see the evolution of your design and also reports your HTML and CSS errors.

    There’s plugins available for Textmate and Coda, and you can preview the sites right inside Coda 1.6’s preview window, however because Alkaline grabs screenshots of your pages it’s not possible to do any live updating of CSS and see the results in all browsers.

    Paul at Litmus also informed me that throughout April, they’re offering full access to the Litmus service for free on Weekends, so on Saturday and Sunday you can test across all the browsers (using Alkaline or the Litmus site) and all the email clients, even if you only have a free account.

    16 design tools for prototyping and wireframing

    It’s no secret that prototyping or wireframing can really help in the overall design process, and there’s now a wide range of tools on the market that aim to help you in this process. A recent Sitepoint article lists 16 of these tools and rates their usefulness.

    The list of tools is good, convering favourites such as Omnigraffle, Axure and Balsamiq to other applications which can be used to wireframe such as Powerpoint or Keynote. If you’ve not looked into these kind of apps before then do check it out, they also lists the price of the apps so you’re sure to find something within your budget.

    10 Lessons every freelancer should learn

    If I remember rightly, I came across this link from one of the people I follow on Twitter and it covers some killer tips on how to be a better freelancer, covering everything from self promotion, organising your workflow, finding time for your own projects, keeping motivated and how to charge appropriately, this is a must-read for anyone considering freelancing, or indeed those already in the freelance world.

    Some great tips come in the way of keeping customers happy and generating repeat business and I’d like to squeeze in a forth link here to another Sitepoint article (sorry) which covers how to upsell additional services to clients as a freelancer you should be looking at maximising the amount of money you can make from each project through added services, whether it’s packaged services such as hosting, logo design or business cards.

    I don’t really freelance but I do manage a couple of small sites I built on a freelance basis, and I get recurring revenue by hosting them on a small reseller account. I’ve also been able to tempt the customers into paying for a years hosting rather than a monthly cost by rounding the amount down to an even figure, which while it’s only a couple of pounds cheaper, always got chosen.

    Back to top

    Interview: Sarah Parmenter on the difference between developing for clients and developing for yourself

    Ryan: OK, so onto our interview section and what we are going to do today is an off-the-cuff interview with you, Sarah, er, so for people who don’t know who you are, er, do you want to introduce yourself.

    Sarah: Sure, my name’s Sarah, I’m based in Leigh On Sea in sunny old Essex and I own a company called ‘You Know Who Design‘ that’s been going for about nearly seven years now, um, and I just do web development and sometimes I dabble in a bit of graphic design. Um, when I started off when I was younger, it was more graphic design than web but now it’s purely web and, er, yeah, it’s what I love doing.

    Ryan: Right, OK, and we think a good topic to have a chat with you about would be the difference between developing for clients and developing for yourself.

    Sarah: Yup

    Ryan: So, er, let’s start off. Do you give yourself time to work on personal projects?

    Sarah: I do, but not as much as other people do; whenever I see on Twitter, there’s a lot of people who have a lot of personal projects on the go and it generally tens to be on a Friday as well (all laugh), you see Twitter on a Friday, generally full of people, um, doing their own stuff but I tend to, if I’m doing something I tend to, maybe, give myself a couple of hours if I’ve got a spare, if I’m waiting for a client to get back to me on something and I can’t proceed with anything. I put client work first, and I don’t know if that’s a good thing or a bad thing, but that’s the thing that pays the bills, so, um, they always come first and if I’ve got a bit of downtime, I’ve always got projects that I want to work on, but possibly haven’t got the amount of time to dedicate to them as I’d like. I think it’s probably the case with everyone.

    Sarah: Yeah, absolutely. You get some time, don’t you, through work?

    Paul: Er, well we did sweet talk our boss into giving us 5% time, which was supposed to be like Google’s 20% time, where they get a whole day to work on personal projects, if it benefits the company.

    Sarah: Really?

    Paul: Yeah, well we got, like an afternoon on a Friday, which is kind of sidelined at the moment.

    Ryan: To spend in the pub (laughs)

    Paul: That’s personal projects, I’m sure. No, it’s kind of sidelined at the moment, we’ve got some major projects on which are taking up all our time with some heavy deadlines, so we’ve had to shuffle that. Hopefully we’ll start to get that back over the summer and work on some cool stuff instead of the business stuff.

    Sarah: I think it’s rea
    lly difficult, because obviously your client stuff does have to come first, and even if you’ve dedicated an afternoon or a couple of hours, if something comes up that morning, or if you’ve got a problem that needs sorting, unfortunately, it’s just the way it is, your client work has got to come first.

    Paul: Yeah, pays the bills.

    Sarah: I mean, a lot of personal projects, a lot of people’s personal projects, do end up very lucrative for them, and you could argue that it’s just as lucrative to just go along with your own personal projects, but I think in general, most people would find that their client work would, er, would have to come first.

    Paul: We’re trying to convince our boss to let us build, er, an iPhone app

    Sarah: Really?

    Paul: and sell it on the app store. He’s not having none of it, because we’ve told him we all need iPhones to test it on, he just won’t buy them for us.

    Ryan: and a mac to develop on

    Paul: a Mac to develop on, yeah. For some reason, he’s not warming to the idea.

    Ryan: he can’t understand the thirty grand, you know, outlay to…

    Paul: We’ll easily make that in a day on the app store (all laugh), I keep telling him this.

    Sarah: the app store!

    Paul: Yeah, the app’s 50p, you know…

    Ryan: Er, completely sidetracked there, erm. What differences do you find, er, between developing for clients and developing for yourself? What major differences do you find?

    Sarah: I find, when I’m doing stuff for myself, I’m actually a lot less decisive on stuff. I sort of, because I’m immersed in, maybe my own branding, or sometimes it’s really good to look at it from an outsider’s point of view. If you’re doing stuff for clients, I think sometimes it’s easier to look at stuff and go ‘well, that needs to go there and that needs to be there to catch someone’s attention’ or you need to move that or make that a different colour, and when it’s your own stuff I think you tend to be either really creative and you don’t really care if you get stuff wrong, or if, do you know what I mean? It’s more, sort of… the boundaries aren’t there, you’re not time-constrained, there’s no brief, you just go off on one, doing whatever you want, whereas with client stuff, there tends to be a bit more, erm, what’s the word, consistency across everything, and I find, personally, when I’m doing my personal stuff, I could sit in front of Photoshop pushing something from the left-hand side of the screen to the right-hand side of the screen for two hours, wondering whether it looks right or not, whereas if it’s a client site, I think ‘right, I have to make a decision on this – where would this go, or where would it be best placed, and you make a decision and you move on, because otherwise the more time you, you take going backwards and forwards is, er, less money that you’re earning, so I think I tend to be more decisive with client work and with my own I tend to be a bit more, erm, easy-going and, er, possibly a bit more creative, in the sense of trying things that I haven’t tried before. Erm, yeah, I think it’s just good to be (pause – all laugh).

    Paul: I think personal projects give you time to play with the stuff that you wouldn’t normally risk putting into a client’s site, things that might take you a week to figure out.

    Sarah: That’s what I, sorry a man just walked past my window in a pair of shorts, as I was answering that question, which completely put me off,

    Ryan: Was it an ugly man, or a good-looking man?

    Sarah: No, he was an old man.

    Ryan: Oh, right. OK

    Sarah: I wondered if he had dementia or something, and he thought it was summer.

    Paul: Was he in just a pair of shorts?

    Sarah: Yeah

    Ryan: A pair of shorts and a smile?

    Sarah: No, and a newspaper.

    Paul: Strategically placed.

    Sarah: It just completely sidetracked my thinking pattern, then.

    Paul: That’s OK.

    Sarah: Oh, sorry.

    Ryan: Where were we? So, which do you prefer, developing for clients, because obviously you’re doing that every day, or do you prefer developing for yourself?

    Sarah: I actually prefer developing for clients, erm. I prefer getting a brief and thinking ‘right, how can I best interpret this brief, and get the objectives that they want, er, they want to get out of this website, how can I do that in the best possible way?’ Whereas, I think that when you do stuff for yourself, you don’t necessarily write down a brief as strict as you’d get when a client is sending through something. So, I, I actually prefer developing for clients, I really like, I don’t, I really like doing all the end, getting to the end product with a client. I think I get more satisfaction out of that than I do when I’ve done it for myself, because I still look at it in a very critical point of view, I still think, ‘oh well, maybe I could make those buttons a slightly different hint of green and it will look better’; whereas, with client stuff I think it’s just all about decision making, I think you tend to make more decisive decisions with client work than you do with your own. You think of your own as an ever-ongoing project that you can forever tweak and make changes to, whereas with client stuff you, once it’s live, it’s pretty much. You might get to update…

    Ryan: Yeah, it’s difficult to come back, isn’t it?

    Sarah: Yeah. Exactly. So I much prefer developing for clients, when they’re nice clients!

    Ryan: Yes, we only like the nice clients.

    Sarah: Yes, we all like nice clients.

    Ryan: But do you think personal development time is important, do you think it’s important to develop your own projects?

    Sarah: Yeah, I do I think it’s important from the sense of being, when I personally do lots of my own stuff, I find that I tend to be a bit more, erm, creative, in the sense of I’ll try stuff that I might think ‘oh, that’ll look awful, I won’t bother doing that for a client site’, but I might try it and actually surprise myself and think ‘oh no, actually, that’s a really good technique to use’ or do something a bit different because you’re not constrained by time when you’re doing stuff for yourself, necessarily. But I think, I do think it’s really important to do your own, your own thing, because I think it’s also a learning curve, you might try out different systems to use, you might decide to learn something, you might decide to use something like, if you’ve never used WordPress, you might decide to go and bolt WordPress onto your site just to see how you get on with it, you might try different apps. I think it’s important, because it frees the mind to use other things that you might not necessarily get to use when you’re in an office environment or, or perhaps even day to day because you don’t have the time to learn it, so I do think it’s important, but I don’t think it’s the, er, the be all and end all of everything.

    Ryan: I think, er, a good tie-in question, not specifically about developing for clients and, er, yourself. Erm, keeping it with blogs and stuff, do you allot yourself a, like, time to read your feeds and, er, things like that, and to keep up with them, because I’ve been so busy in the last two weeks, my feeds have just gone like – you know when Google Reader says ’1000+’ and that’s it, it’s just stopped counting, it’s gone ‘look man, give up on these feeds, you’ve passed a thousand.’

    Paul: You need to declare feed bankruptcy, I think.

    Sarah: I tend to do this really annoying thing, where if someone posts a good link on Twitter, I’ll open it up in a browser window in a tab, and then if someone else posts, I’ll open that in another browser tab, so I’ve got about 100 tabs open in Firefox that I never get round to, to looking at, which slows the whole thing down and end up having to then bookmark them in a little folder called ‘Interesting Links’, that I never get around to reading.

    Ryan: When you look back, they’re four years old and completely out of date.

    Sarah: Yeah.

    Paul: The shocking thing, because I do the research for the, the Boagworld news and push it all through the links, I probably churn through 150-200 feeds a day (Sarah: gasp), which is so many feeds that I haven’t got time to read them, which is shocking; I get so much information, so many good things that I’m pushing out to other people, that I just don’t have time to read them, there’s too much information.

    Sarah: Do you skim-read them?

    Paul: I do, I skim-read, I usually read the first few paragraphs, just to see what the article was about, clip out the interesting bits of text for the previews and then send it on it’s merry way out of Twitter and then I’ve written a function that, every time someone clicks a link on Twitter, it kind of lets me know, tracks back and so I can see, right, which… and I watch it, I’ve got live stats and streaming on one of the spare monitors, so as this link goes out onto Twitter, I can see it being read, so I can actually what’s actually what the people are reading, what’s been interesting that way, instead of me thinking ‘that’s genius, we’ll use that on the show’. It’s actually kind of crowd-sourcing information like this.

    Sarah: Yeah, that’s a better way of doing it, isn’t it? It’s more productive.

    Paul: Yeah, but I do the same, it’s like something I really want to read, I’ll open it in a tab and I’ve got the permatabs thing on Firefox, so I’ll set it so that I can’t delete it until I’ve read through it, but usually it just ends up there for weeks.

    Ryan: I tag them in Delicious, so I’ve got like tutorials and stuff that I think ‘oh, that looks fantastic’ and I’ve got a ‘to try’ thing, which is slowly increasing in number and I never sit down and have a go through the tutorials or anything like that.

    Paul: Yeah, I think the key is to follow a few key, key things and not try and follow too much information, and then just look at what everyone else around you, the people that you respect, in what they’re sending out and try not to get overwhelmed because there’s a lot of information out there.

    Sarah: Dead right, there’s so many, it seems to be a new thing on Twitter to actually post those sort of links, day in, day out, which is really handy because there’s a lot of people who have a lot of good stuff on Twitter.

    Paul: Oh twitter.com/boaglinks is the premier source of all this information, of course.

    Sarah: Of course! (all laugh)

    Ryan: Er, OK, so I think the final question to you, then Sarah, is, erm, what inspires you to pursue your personal projects?

    Sarah: Erm, oh, that’s a difficult one. I kind of get inspired in strange places, when I came back from the Future of Web Design and Future of Web Apps, I kind of get inspired by other people, not necessarily the apps that they’re producing, or work that other people are producing, but I sort of feed off other people’s energy, strangely. If other people come away from something really, erm, excited about something, I tend to think ‘oh, yeah, that sounds like a good, like when Adobe Air came out, that was a kind of a buzz around that for a while and it got me thinking ‘um, what can you develop with that that would, you know, might be interesting to other people or that other, that other web designers might want to use?’ but that’s kind of what happened with my own app, Olive, it’s kind of on the backburner at the moment, but there was a problem that came up at work and it was coming up time and time again and I thought ‘there must be something out there that actually addresses this issue of, of erm, client management, so went around, couldn’t find anything and then ended up building it, and it was actually built more for me, rather than other people and when I sent it out to a few people, they really liked, and got into using it and, erm, it’s just kind of handy if you build something that’s, that’s great for you, but equally other people find interesting as well. It’s, erm, it’s a win-win, really. I mean, I use it all the time, and there’s other people who do as well, bu
    t at the moment it’s, er, needs a lot of updating, because I’ve been so busy with client stuff, but maybe I should have put that first, but clients pay the bills unfortunately.

    Ryan: Absolutely, absolutely. I think I, erm, I think I overthink things, so I think to myself ‘oh, I’d love, love for this to exist’ and then I think to myself ‘I could spend the next three years developing that’ and, and someone would do it better than me, you know and just finding time as well.

    Paul: Yeah, I think it’s right what Sarah says, you’ve got to scratch your own itch, you’ve got to find something that you would want to use so much that you would spend that amount of time to build it, and then if it’s for you, it doesn’t really matter that much if no one else wants to use it because it does something that you want it to do.

    Sarah: Exactly.

    Paul: And it’s a learning process, you can choose any language. If you want to learn a new language, if you want to learn Django or Python or something, you could build it in that, just to learn that language, erm, and then send it out in the world, see if people use it.

    Sarah: Exactly, that’s kind of what happened. I was learning quite a bit about Ruby at the time, because Olive, Olive’s built on the Ruby on Rails platform and it was so interesting just to get an insight into how different developing with Ruby is compared to PHP. That was just worth it in it’s own right, really because I find that I learn much better with real world examples rather than looking at a load of code. I find that if, if I ever get something like that, I have to take it apart, almost, and then try and work out how to put it all back together so that it works. I think I learn better by doing that and a lot of people do. If you going on to any of the tutorial sites now, there tends to be a lean towards developing an app or something small; I think on the Nettuts at the moment, website – do you guys know that one?

    Ryan: Er, yes.

    Paul: Yes, ah the Nettuts, oh yeah.

    Sarah: Yeah, there’s a, there’s a sway towards actually building like login systems from scratch and things like that on there, where it’s actually showing you the code and then showing you how it works in real world situations which I think is really good, for me, I don’t know about you two, but I personally prefer picking stuff apart (laughs).

    Paul: Yeah, absolutely. I usually start at the very lowest common denominator, like a user access system, and I’m learning CakePHP now which is, kind of a Ruby clone for PHP and instead of using their in-build methods which will do it all for you with build this, just write these classes and it’s like ‘No, it’s like the most basic thing I can do in this language, let me learn how to do it’, and I’ll learn that way.

    Sarah: Yeah, yeah, that’s, I think when, erm, when I looked at using Ruby for, er, for Olive, I didn’t build it, it was built by a guy, a brilliant guy, Adam Cooke, but I was still really interested to know how it would work and how Ruby is different and the first thing I did was built a, erm, a basic recipe, sort of database thing with, it was off of a tutorial site and I think it’s great if it gives you just a little bit of insight into something that you might not have already realised or known about building your own stuff, then I think you have that sort of passion to go forward with it, you have that confidence to then think ‘oh, well I’ve done that tiny thing, maybe I can do something else with it. Whereas, if you’re doing it for clients, you don’t, you wouldn’t really venture into using another programming language that you weren’t comfortable with on a client site, unless you were a bit silly.

    Ryan: Absolutely, absolutely. Paul told me a really funny thing, in between, er, when he told me he was learning CakePHP. He said, I’m trying to remember what it was that you told me, it was ‘if Ruby’s French, CakePHP is French with an English accent’

    Paul: Yeah, its kind of the same, just not quite as elegant.

    Ryan: Yeah, I thought that was fantastic, that was so fantastic, I made it into, I have some rotating quotes on my web-site, and that made it into my quotes, that was fantastic.

    Much thanks goes to Simon Douglas for transcribing this interview so quickly!

    Back to top

    Listeners Questions:

    Is Using Off-The-Shelf Software Wrong?

    Jon Writes:

    I guess my question is about the use of off-the-shelf software. I must admit I feel slightly uncomfortable using it at all. As a decent sized agency of 9 people, with our own very capable developers, I can’t escape the nagging feeling that we are “cheating” slightly by using an off-the-shelf platform at all. Although we adhere strictly to licensing requirements, most of our customers do not know that their stores are powered by what is essentially a ready made system, which we then skin, configure and populate.

    What are your views about off-the-shelf stuff and the pros and cons of using it on client work?

    Thanks and keep up the good work!

    I think the main source of your discomfort is the fact that your clients don’t know you are using off-the-shelf software for their projects, which raises the question why not?

    Your clients have approached you to provide them with a service they cannot perform themselves. Whether that is building a system from scratch or integrating and customizing an third-party system to meet their needs, you are still the expert.

    There are very powerful off-the-shelf e-commerce systems, blog engines and CMS’s that should be thought of as weapons in your arsenal rather than “cheating”. Explaining to your clients why you are going to use a particular system for their project can be hugely beneficial. It shows that you don’t want to waist their time and money re-inventing the wheel.

    Therefore, the pro’s are:

    • It meets there project aims
    • You are experienced with the system
    • It’s supported by a third-party team of developers who are dedicated to that one product and includes a vast community of other users who support each other
    • It can be implemented in a shorter period of time than building from scratch (i.e. cheaper for the client all round)
    • It’s a tried and tested system (You could even give your client a list of other successful companies that are using it)
    • It is also more than likely that a third-party product that has been around for several years is a more reliable and robust system than the one you develop in a couple of months.

    That said there are always inherent risks in using anything third-party, whether it be API’s, frameworks, libraries or software and I have a general rule of thumb that I try to always adhere
    to:

    Don’t implement something you don’t understand!

    If it breaks, it costs you time and money to fix the problem, and that’s once you’ve diagnosed what that problem is. The longer it takes you to fix the higher the risk that your client is going to lose confidence in your ability to deliver.

    So take the time to do some dissecting and learn how to use your tools as fully as you can prior to implementation.

    How do you price and quote different projects?

    Jamie who’s just started up his own web development company is having trouble working out how to price and quote different projects and wonders if we have any tips that we’ve found helpful when quoting for clients?

    One of the hardest things when starting out, and even for established businesses is finding your feet with pricing. I think the biggest lesson I learnt is not to under-quote just to gain the business, even though you are in need of clients. It makes no business sense to work for peanuts, you’re better holding off for a client who respects the work you do and pays honestly for that work rather than being a design machine churning out work just to make ends meet.

    The other important thing I learnt in my first year of business is, clients who barter with your prices are generally bad news. We’ve all heard it, “if you can do this one at x-amount we have plenty of other work in the pipeline we want to use you for” – while this sounds tempting, 9 times out of 10 the promise of the further work never comes off, even if it does they would normally expect further work at the “cheap” price they paid you before, as you accepted it so you must be happy to work for that right? Wrong.

    I always find it helpful to ask the client for a ballpark figure prior to laying out the full proposal, this negates you wasting time putting together the proposal of cost plus terms and conditions only to find the client wants to build ebay on a budget of £300.

    I also find ballpark figures helpful because I find it easier to provide the client with options, even if they have a relatively small budget there is normally still something you can do, even if it is very basic – but it gives you a starting block to explain if their budget was a bigger they could bolt on a CMS system or have a better shopping cart, then explain the benefits of those. You’d be suprised how much the budgets are then increased by.

    It’s all about providing the client with the best solution for their project at the end of the day, and if you think the best solution would be bolting on Expression Engine or the like, you need to give the client the choice to do this and expand their budget if necessary rather than cut them out of the equation because of it, it’s all about educating the client.

    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

    10 tips for efficient design

    Being a good designer is not always enough to survive hard economic times. You need to be efficient too.

    I don’t want this to be another ‘recession’ post. Sure, being more efficient in the way we work as web designers, makes us more competitive and keeps us employed. However, that is not the only reason we should endeavour to ‘work smarter’.

    Working as efficiently as possible brings other benefits too…

    • More time – The faster you can turn around work, the more time you have for personal projects, family and friends. I don’t know about you but this is a major motivator for me.
    • Better promotion prospects – It takes more than good design skills to be promoted. You need to demonstrate that you are proactive and efficient in the way you work. Management will value you more if you generate a higher return.
    • Increased profit – If you are a freelancer it is all about maximising profit. The smarter you work, the more money you earn. It’s that simple.

    So how can you be more efficient and begin to work smarter? Here are 10 tips that will get you started.

    1. Use snippets

    Coda Clips Palette

    Let’s start with the obvious technical stuff. First make sure you have a library of code snippets that can be easily reused. These could include Eric Meyers CSS Reset or your own code for dealing with common HTML content such as news listings or pagination.

    These libraries of snippets provide two benefits. First, they save a lot of typing. However more importantly, they ensure consistency across projects. Because you are using the same code for each project, all of the IDs, classes and structure remain consistent. This will save a lot of time when trying to remember why you built something in a certain way or how it works.

    2. Use a Javascript library

    In a similar vein to snippets I would highly recommend you adopt a Javascript library. Personally, I am a huge fan of jQuery because it is designed for those familiar with CSS. It is also amazingly easy to learn and very lightweight.

    Using a library like jQuery has proved a massive time saver for me. It has allowed me to avoid endlessly battling with browser inconsistencies (at least in Javascript!) and avoid reinventing the wheel.

    jQuery Homepage

    jQuery (like most Javascript libraries) also supports a large number of plug-ins produced by third parties. These too can be a massive time saver. However, a word of warning – be careful using a plug-in you do not fully understand. The quality of plug-ins varies massively and if you discover a problem with one, you can waste many hours trying to fix it, if you do not understand how it works.

    3. Configure your tools properly

    Often in our haste to ‘get on with a project’ we fail to take the time to prepare properly. One example is in how our software is configured. We settle for working with tools ‘out of the box’ when some minor modifications could improve our efficiency.

    Photoshop is a good example of this. It has all kinds of configuration options from keyboard shortcuts to palette layout. Take a few moments to set these up for your workflow, and you could save hours of unnecessary clicking over the long run.

    Photoshop Palettes

    Look at whatever tools you use to build websites and consider how their interface can be tweaked to your needs.

    4. Have one system for tasks

    For fear of reinforcing a stereotype, designers tend not to be the most organised people. Not only do we need to organise the structure of our software tools, we also need to do the same for our projects.

    Fortunately, not all of us have to manage entire projects. However, we do all have tasks that need completing. How we organise those tasks can dramatically affect our efficiency.

    A common mistake with task management is to have tasks spread across multiple places. Some tasks exist as emails, some in a todo list, still more in a notebook or on your mobile phone. The result is that things get overlooked.

    In order to efficiently manage your tasks they need to be gathered into a single central location. For me that is a task organiser called Omnifocus, which syncs between my desktop and iPhone.

    Omnifocus Screenshot

    Tasks are still collected using multiple methods. However, once a day I transfer them to Omnifocus. If I attend a meeting and take physical notes that include tasks, I put the notebook into my in-tray until I can add the tasks to Omnifocus. If I receive an email with a task, I drag that email into Omnifocus. Ultimately everything ends up in Omnifocus.

    By being this regimented about the way I organise tasks, I ensure nothing ever gets missed. I also avoid wasting time trying to track down the details of a task I have lost.

    5. Embrace and manage admin

    Inbox Zero - The original 43 folders series

    Part of the problem we face is that answering email and organising tasks feels like a waste of time. Its not ‘proper work’. This is especially true when the pressure is on and deadlines are tight. We arrive at work in the morning and launch into our projects without checking our task list. The result is that we prioritise the wrong work and miss deadlines.

    I begin each day by doing two things. I answer and file all my emails (I always achieve inbox zero). I then review all of my tasks and identify the ones that I wish to complete that day.

    However, I don’t stop there. I have designated admin time. Once I am done my morning review I close my tasks and email until lunchtime. I focus solely on work and avoid admin entirely. This prevents email and other admin from interrupting the flow of my production work. It keeps me focused.

    6. Distractions must die

    TweetDeck

    Of course it is not just email that distract us from work. There is instant messaging, Twitter, Facebook, RSS and… lets face it… the entire internet!

    Don’t misunderstand me, some distraction is good. I have a very short attention span and so if I work on a single thing for more than about 30-40 minutes I start to ‘zone out’. However, there is a difference between ‘having a break from work’ and ‘getting distracted’.

    Every 40 minutes or so I will take a 5 minute break and fire up Tweetdeck or Google reader. What I try to avoid is keeping these applications permanently open (although with twitter I have to confess I often fail).

    By leaving an application open that can distract you with notifications (‘You have a new tweet’, ‘You have mail’, etc.), you risk it interrupting your flow of work. These constant micro-interruptions make it hard to ‘get into the zone’.

    7. Keep a tidy environment

    Distractions extend beyond your PC as well. Your work environment can also have an impact on efficiently.

    If you work from home, endeavour to keep your personal and work life separate. Ensure you can close the door on the rest of the house and that the rest of the family know not to interrupt. Also if possible, try to keep your working area separate from the rest of the house. A garage or loft are ideal. I used to work in a small room directly between our lounge and kitchen. It was impossible to focus on anything with the constant noise from the two rooms.

    My Desk

    Pay attention to your desk as well. Keep it clean and uncluttered. This reduces distractions but also creates a better mental state conducive to work. Ensure your physical files and disks are easy to find. Knowing you took some notes that are in a notebook somewhere does not make them easy to find. This is especially true when your desk is three feet deep under paper work!

    Personally I scan what notes and physical paper I can. What I have to keep in physical form, I file in a single filing cabinet organised alphabetically.

    8. Avoid multi tasking

    There is a myth that multi tasking makes you more efficient – it doesn’t! As designers we like to ‘flit’ from one thing to another. However, ultimately this is damaging to productivity. We need to learn to focus on a single task and follow it through to completion.

    As I have already said, I find it hard to focus for any length of time. In order to help me focus I break my tasks down into smaller ones. That way I rarely have to do one thing for too long. Take this post for example. To write the whole thing from beginning to end would take a couple of hours. That is longer than I could focus for. So, in order to stop me getting distracted and jumping onto another task, I break it down. This post was made up of three tasks…

    Task List: Create an outline, write initial draft, add imagery and edit

    Once I complete one task, I switch to another project for a while. Once I have completed a task on that project I may switch back to this post.

    Although this is a kind of multi-tasking, it is more structured and ensures I spend as long as my attention allows on each project. I do not simply drift between projects.

    Depending on your character this might be too extremely. You may find it easy to concentrate for extended periods. However, if you struggle to concentrate, do not use multi-tasks as an excuse to be distracted.

    9. Don’t do excessive hours

    Another widely held myth of productivity is that the longer you work, the more you get done. After all, on face value this makes sense. However, I sincerely believe this is not true, especially if your job relies on you generating ideas and being creative.

    Obviously we have to put the hours in, if we want to pay the bills. However, do not allow your boss or clients to force you into excessive hours. The occasional all-nighter is one thing, regular 12 hour days is another.

    It is incredibly easy to get burnt out as a web designer. You are expected to continually be creative, as well as keeping up with one of the fasting moving sectors on the planet. Things are continually changing and evolving and it is a struggle to stay current.

    Twitter post of somebody saying they are burnt out by work

    Working long hours damages your capability to take on board new information and cripples creative thinking. Ensure you limit your hours and book regular holidays. Do not push yourself too hard or you will fail to deliver.

    Finally, accept your natural cycle. When you are ‘in the zone’ work every hour God gives you. However, you must also accept that sometimes you need to just stop and rest. Don’t feel guilty about the days when you hardly do anything.

    10. Communicate better

    I would like to end this post with possibly the best efficiency tip of all – If you want to avoid wasting time, learn to communicate better.

    So much of our time is wasted because of miscommunication and misunderstanding. How many times have you had to redo a design because you misunderstood the client or showed them work too late in the process.

    Take the time to really engage with the client and understand their requirements. Make sure that you include them in the design process and show them work often and early.

    Example Mood board

    Finally, use tools such as gallery sites, mood boards and sketches to ensure everybody has the same understanding and is working towards the same goal.

    By effectively communicating with clients, you can potentially save days on each project that would have been wasted on reworks and amendments.

    If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

    Book a consultancy clinic or contact Rob about a more in-depth review.

    Our First AIR App

    With Adobe AIR now up to 100 million downloads, being utilised by big name players such as the BBC and increasingly invading our desktop Headscape decided to give it a go.

    This is a guest post by two of the Headscape developers – Craig Rowe and Dave McDermid

    Setting up

    Adobe Air is Flash + WebKit + SQL Lite on the desktop. As a Flash developer you can dive right in and use the Air extension for Flash to publish your beautifully crafted swfs and AS code into an installable cross platform desktop app. However, the flash projector has been around for a while doing similar things and we wanted to put our hard earned web development skills to productive use. So we went the HTML/Javascript route.

    The SDK is free for download but Aptana provides a rather neat eclipse based IDE in which to work. Handily the new project wizard allows you to import a multitude of Javascript libraries making it incredibly easy to get a new project up and running with your preferred initial setup (we went for jQuery).

    The Problem

    To make the exercise worth while we needed a real world problem to solve. Trivial examples usually do very little other than increase your ability to copy/paste example code and do your best fireworks night ‘ooo’ ‘ahh’ impression at it. Instead, we chose to add to our server admin experience…

    As loving, caring web developers we actively monitor all our servers, and most of our live websites. For a while this was a DOS script, this was then migrated to a Bash script on a Cron job. It worked great, but required a computer science degree to maintain. So here was our problem: we needed a pretty, maintainable and reliable app to monitor websites. All it had to do was let us know when one disappears or throws a nasty error.

    Download and try our site watcher AIR application

    The Journey

    Step 1: The wireframe

    Paper Wireframe

    A new Adobe AIR project in Aptana comes with an html file named after your application which acts as your main program window. Creating a basic layout with a few buttons, titles etc can be done in a snap. The html, css and javascript are dealt with in exactly the same way as if intended to be deployed as a website (with no browser compatibility worries as we are only targeting the Adobe AIR WebKit rendering engine).

    Step 2: The magic

    The wireframe identified the main viewer as comprising of an unordered list of sites, each with their current status and edit/check/remove links. This list needed to be persisted, but editable by the user.

    If this was a website we may be looking to server side scripting and a database of some nature. However, we had only jQuery and the air libraries. Although SQL Lite was an option we decided it was an over complication for what is a relatively simple, first AIR app. So, knowing that we could use jQuery to manipulate a DOM and the air libraries to save and open local files we opted for XML as a data source.

    <?xml version="1.0" encoding="utf-8"?>
    <sites>
    <site address="http://www.headscape.co.uk/" status="200" frequency="30">
    Headscape&#146;s website
    </site>
    ...
    </sites>
    

    Looking back into our application html file we can see that we are given a readLocalfile() function that returns the string contents. This can then be passed into a jQuery object and manipulated in the usual way.

    [The canny among you will notice that this readLocalfile() function is merely a few calls to the flash filesystem classes (using the AIR aliases). In fact at some points I directly call the flash library rather than using the AIR alias. There’s no functional difference, I’m just used to the flash namespaces]

    With this ability added to the jquery ajax capabilities the application flow could be easily envisaged as follows:

    • On DOM Ready read the local xml file
    • For each site element in the xml create an LI element with the appropriate display and action elements
    • Fire off a jquery ajax call for each site
    • Use the response code to formulate a class for the LI to change its display
    • Fire off any notifications if the response code has changed i.e. e-mail, notification window, twitter post
    • Set a timeout before checking again
    • On window close parse the unordered list back into xml and write it to the persistent file

    The Stumbling Blocks

    Viewing the source of an installed AIR app can be done by nipping into program files (or Applications for the MACs amongst us) and looking in the application name directory. Here you will see the html, css and javascript files that make up the app (so we can continue to learn from others deployments just as we would with a website).

    A brief look at the sitewatcher source and the flow described above becomes immediately clear. ‘Sitewatcher.html’ is our main form and it includes script.js as the main driver of the application with the #sites ul as the main containing element. The rest is GUI. ‘PopulateUIfromXML()’ directly completes steps 1-2 and fires off the 3-6 process via ‘CheckSite()’. However dispersed within this are the unusual non-front end website development bits, so we’ll look at those now:

    Acting as a System Tray App

    Many AIR apps, particularly those to do with notification (twitter, yammer etc) seem to want to run as system tray applications, we were no different.

    The process of doing so is relatively easy, and encapsulated in the appropriately named SetUpSysTray() function of script.js. Essentially what we need to achieve is an override of the minimise behaviour, the setting of an appropriate icon and the associated window toggling behaviour.

    Window.nativeWindow gives us access to the OS window holding our html window, and we can listen to events on it in much the same way. ‘nwMinimized’ is set to fire on display state changing and, if being minimized, instead docks (hides) the window and prevents the default behaviour.

    if(air.NativeApplication.supportsSystemTrayIcon)
    window.nativeWindow.addEventListener(runtime.flash.events.NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGING, nwMinimized);
    function nwMinimized(nativeWindowDisplayStateEvent) {
    if(nativeWindowDisplayStateEvent.afterDisplayState == runtime.flash.display.NativeWindowDisplayState.MINIMIZED) {
    nativeWindowDisplayStateEvent.preventDefault();
    Dock();
    }
    }
    function Dock() {
    window.nativeWindow.visible = !window.nativeWindow.visible;
    }
    

    This works fine but on its own will actually just hide the window from view/the taskbar leading the user to have to use task manager to close it. To ensure that an icon for your application sits in the system tray we need to set an icon for the nativeApplication (the mere presence of which will cause windows to display the app in the systray).

    Back to SetUpSysTray() and we’re using a content loader to load the icon graphic into memory, with an iconLoadComplete handler waiting to do the work:

    var iconLoader = new runtime.flash.display.Loader();
    iconLoader.contentLoaderInfo.addEventListener(air.Event.COMPLETE, iconLoadComplete);
    iconLoader.load(new air.URLRequest("../icons/AIRApp_16.png"));
    function iconLoadComplete(event){
    if(air.NativeApplication.supportsSystemTrayIcon){
    air.NativeApplication.nativeApplication.icon.bitmaps = new Array(event.target.content.bitmapData);
    air.NativeApplication.nativeApplication.icon.tooltip = "SiteWatcher";
    air.NativeApplication.nativeApplication.icon.menu = new air.NativeMenu();
    // Create Menu Items
    var openCommand = new air.NativeMenuItem("Toggle");
    openCommand.addEventListener(air.Event.SELECT,function(event){
    Dock();
    });
    var sep = new air.NativeMenuItem("", true);
    var exitCommand = new air.NativeMenuItem("Exit");
    exitCommand.addEventListener(air.Event.SELECT,function(event){
    air.NativeApplication.nativeApplication.exit();
    });
    // Add Items to menu
    air.NativeApplication.nativeApplication.icon.menu.addItem(openCommand);
    air.NativeApplication.nativeApplication.icon.menu.addItem(sep);
    air.NativeApplication.nativeApplication.icon.menu.addItem(exitCommand);
    }
    }

    We simply set the native application icon to be the bitmap data before finalising the sys tray setup by creating a menu to appear on click.

    Note for MACs: The minimised event listener is not applied if the system does not support system tray icons. This is to avoid confusion on MACs where a minimise goes to the MAC dock anyway.

    Notification Windows

    So the app can now run in the system tray and use jQuery to check the sites listed in an XML file at regular intervals. However we need a process of notification. The App could be running on an actively used machine in which case we want messenger style pop-ups. Or it could be running on a separate machine/server from where we want it to send e-mail/other notifications.

    In the case of window notifications we took a short cut and used some example code from Adobe Developer Center. This is encapsulated within the DisplayManager.js and Message.js files. Display Manager acts as a queue, dequeuing and displaying on a timed basis if the user is present. This is an important requirement as you do not want a user missing a notification prompt merely because they were away from their desk for a while. It can be easily achieved via the USER_IDLE and USER_PRESENT air events – in this case stopping and starting the poller.

    ‘CheckSite()’ simply queues message HTML when the response code received is different from the previously stored code. When the queue poller is running (the user is present) the message is dequeued and displayed via Message.js.

    At this point it is worth remembering that notification windows are no different to any other native window. It’s just a name we’re giving to the way we are using native windows. They therefore have their own events, contents, position etc and this can be seen by the Message.js code where a new chromeless, transparent native window is created and its contents loaded from the message.html template.

    The display process is then as follows:

    • Message.js stores the message content in a variable on the new window
    • MessageScripts.js, then running once the message.html dom is ready, sets a listener on the HTML_BOUNDS_CHANGE event before setting the message variable content as the body – ultimately firing the bounds change event
    • This event is handled by setting the native window height to match before firing the layoutComplete event
    • On hearing this Message.js makes the window visible, finds an appropriate resting position (in relation to any other messages) and animates it in.
    E-mailing

    A key feature of any site watcher is to let us know when something bad happens. The combination of emails and an email-to-text service allows us to be notified the minute we spot trouble. This was easy enough in the bash script, using sendmail on the Mac. Not so straight forward for an AIR app. We can’t run sys commands and there is no built-in SMTP server. The solution is to use sockets in AIR. A little hardcore, but it keeps the solution nice and tight.

    Anyone who’s sent an email with telnet will know that the principle of SMTP is, as the acronym suggests, simple. Adobe gives us plenty of clues for opening sockets and listening for messages. All we had to do was make sure we sent the right info. There are some restrictions in opening sockets from scripts outside the application sandbox, but for our purposes it worked a treat. With a little trial and error we were firing off emails left right and centre.

    The icing on the cake was adding twitter support. With a one-line AJAX call in JQuery and a little config it was a no-brainer. This allows us to keep an online audit in the form of a private tweet stream. For people who check twitter more frequently than their email, it’s handy for notifications. If Twitter let us UK folk receive updates via SMS again then we can ditch email-to-text in favour of Twitter.

    Step 3: The makeover

    One of the nice benefits to working in the web-kit world is being able to use some CSS3 styling such as rounded corners. So we went to town. The more design that is CSS based and the less that is image based the better.

    JQuery UI allowed us to make the entire list sortable in a sweep of the mouse, and the prefs popup tabbed in a blink (suddenly there was heaps to customise!).

    The End

    Hopefully this post has given you an understanding of how quick and easy it really is to make a useful AIR application. We’ve shown how you can implement a system tray application that utilises notification popup windows and sends e-mails as well as uses local files as a data store. This is not intended as a best practice discussion. It was our first AIR app and developed in a very small amount of time as a proof of concept and so that we could share our experiences with you. We welcome any feedback.

    Download and try our site watcher AIR application

    Increase your website ROI

    Are you a website owner? Do you use a web designer to build your site? Would you like to save money and increase the number of people who can access your site? Let me tell you how.

    The secret is to stop insisting that your website looks identical in all browsers. There is a better way…

    The better way

    Discover more about how this works in practice…

    Read Effective Browser Support

    Read A Demonstration of Graded Browser Support

    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?