Dustin Diaz on Javascript and coding at Twitter

Posted in Development on May 12, 2010 by Paul Boag

Dustin Diaz talks about the shortcomings of jQuery, explains how object orientated coding can help your javascript and discusses testing your code.

Paul Boag:
So I’m being joined by a very jet lagged Dustin Diaz. Hello Dustin how are you feeling mate.

Dustin Diaz:
Um still waking up.

dustin diaz

Paul B:
Just give your presentation at Future of Web Apps and immediately you were grabbed for an interview then immediately after that grabbed for another interview. So if you’re totally incoherent we will completely understand.

Dustin:
Yeah. No problem. That’s the way I roll just being incoherent all the time. I’m surprised anyone makes any sense out of what I’m talking about.

Paul B:
Well obviously some people do. So just, though you have been on the show before. Right in the early days.

Dustin:
Yeah it was episode 15 or 16 or something like that.

Paul B:
Unbelievable. That’s a long time ago. Yeah. So you were working at Yahoo! then.

Dustin:
Yes. 2006.

Paul B:
Yeah that’d be about right.

Dustin:
And then after that I spent about two years at Google from adwords to gmail and now I’m at Twitter for the last 5 months.

Paul B:
Okay. So how’s life going at Twitter? Are you enjoying it?

Dustin:
Oh Twitter is awesome. Twitter is such a great place to work. You can make such a huge difference. The team is pretty small. We have about 3 frontend engineers so we’re all highly worked but in a really good way. And you can actually ship out code.

Paul B:
Which is satisfying.

Dustin:
I’ve literally had both ends of the spectrum. From Yahoo! which is a very top down oriented place. When it comes down to it no one can make a decision. The top makes it for you. So you can ship something that way. It’s not always fun when you’re the developer. But going from there to Google. Google is like a huge like giant breath of fresh air. However the only problem with that is the opposite. It’s very bottom up. So it was sort of overly democratic where I was happy to get a voice in but everyone had a voice and you had to like join your voice in with your co-worker and with everyone else that’s trying to get the same goal. But everyone is thinking something different. So Twitter, it’s just, everyone just ships stuff. It’s a very magical place. Although it’s a little chaotic sometimes!

Paul B:
Stuff gets done.

Dustin:
Yeah stuff gets done. Piles and piles of jQuery.

Paul B:
So the plan for this interview, just so you know, is gonna start with me asking dumb questions as the non-developer in the room. Then we’ve also got Paul joining us. Hello Paul

Stanton:
Hello.

Paul B:
He’s going to ask the clever questions. So no pressure there Paul.

Stanton:
Oh I don’t know about that. I’ve just been dragged in because I’ve written a couple of lines of jQuery before.

Paul B:
You’re techie.

Stanton:
Well okay I’ll take that.

Paul B:
Let’s start with some fundamentals. There are a lot of people out there like me, alright. I’m a designer and I’m using jQuery to do the basic stuff that I do for most of my client sites and maybe freelancers listening that are doing relatively small scale sites. Now, brilliant talk. Really enjoyed it but you did compare jQuery to cocaine. I was picking up this general theme that you’re not a great fan of jQuery. What have you got against jQuery?

cocaine

Dmitriy Aseev, Shutterstock

Dustin:
There’s nothing against it. As far as I’m concerned, and the rest of the world they won. So now it’s all about fixing it and I don’t think it’s a matter of fixing jQuery I wouldn’t change anything about it because it has one goal in mind and it does it really really well. It allows you to get stuff and it allows you to do stuff with it. Pick out some elements attach and event to it and they do stuff. It flys across the page. It can make an AJAX request, toggle a class name. Change the colour of something. Set some HTML. It’s a utility to help you get basic jobs done. But it shouldn’t be the way you author code. Although any other way with jQuery would look weird. It’s kinda this paradox of like do I use it or not? It’s like staring at a pile of cocaine. It looks pretty good. I wanna do it. Just for the record…

Paul B:
You’re digging a hole here Dustin (laughing).

Dustin:
I just wanna I’ve never done crack cocaine or any kinda, I don’t even know what types there are…

Paul B:
What was it you said? Yeah “One line of it and you’re hooked” it the premis of comparing it to cocaine. That was my experience with it. I thought wow this is like CSS I can do this.

Dustin:
Yeah it is like CSS. You select something…it has a selector engine. So I think the most important bits of it is basically any other new framework beyond this or any other new library or utility must have a selector engine in it if you want to get stuff done. Because it’s just a pain in the ass to use typical DOM methods to get elements by tag name and get element by ID. Luckily enough jQuery open sourced it’s selector and contributed it to the DOJO foundation. It’s called Sizzle if you didn’t know that.

Paul B:
No I didn’t.

Dustin:
It’s not owned by DOJO but it did contribute to it. I’m pretty sure it’s under MIT license. I’m not really sure how DOJO and John Resig’s, how they worked out license, but check that out because you can get stuff with it.

Paul B:
Where do you…I mean you use jQuery at Twitter so where does it fall down for you? Obviously there is some frustration there and I’m not entirely clear where.

Dustin:
Well when I first joined Twitter my initial thoughts were to get rid of it because it was promoting a lot of bad script. You have to share this code with everyone. You write it. Everyone writes it. It’s kind of a mess. There was no organization to it really. It’s not an organization thing and when we say framework I literally think of something that frames the way you work and it’s not good at that. And that’s why I recommended either if you’re gonna use jQuery use Dan Web’s Low Pro which has a proper class based system. You can inherit things. You can have classes. You can do sub-classes and you can test the code a lot easier rather than using jQuery’s plugin architecture. Which is not entirely broken but if you’re going to have a whole web app. See it’s the difference between having a web app and just doing your blog or just doing like basic things to, I don’t know, just building a web page. Just toggle this toggle that. It’s not a big deal.

danwebb.net

Paul B:
So it depends on the scale to which you’re using it is what I’m picking up here. If you’re building something that’s a complicated javascript driven web app then it’s going to create problems for you. But if using on you blog or whatever then it’s probably the right choice.

Dustin:
Yeah. If you have more javascript on your page than actual HTML.

Paul B:
Right you’ve gotta expect a lot there with jQuery. Yeah that makes sense, that makes sense. The other area that I was interested in, just to clear up, this is really designer ignorance here but I figure there are other ignorant designers listening to this as well. There are a few words that are thrown around…Don’t shake your head Ryan. Ryan’s been doing the sound and he’s shaking his head in disgust at me. There’s a few terms that are thrown around a lot that are never properly explained as to how it makes a difference. One of them is this thing about object oriented javascript. That people talk about a lot. As a designer that has to do a bit of javascript, right, which is like a developer doing a bit of design, it’s an abomination to all creatures…I’ve never got my head around object oriented coding. What are the advantages of it? Why should I be doing it? Why should I care?

Dustin:
So you’re asking more of a software design question.

Paul B:
No I’m asking it in terms of javascript.

Dustin:
Object-oriented programming builds into a language and javascript is one of them. The reason why I keep mentioning that it is one is because it’s been highly disregarded and people say it’s not one. Which is really weird because it is. It’s been put down that it’s not a real language, you know, if you want to do real development it has to have strong types. It has to have a proper grammar based, class based system. Where you actually say the word class. Javascript is flexible enough where you can literally call a function or you can say new function and it becomes this whole instance of this what people call classes. So as a designer, the reason why I think Object-oriented programming is possibly important is because designers care about sort of organization I suppose. You organize a site. You want to organize your code to. You organize your CSS. There’s no why you should just not pay attention to your javascript. Like I said it depends on the scale of it. Some designers, they don’t have to care right? They have other engineers that do it for them. But if they’re going to write it and they want to make it organizable object-oriented programming is this way of programming and since we’re specifically talking about javascript. I keep liking to mention…what is it…Dan Webb’s Lowpro because it uses the basic things of jQuery like grabbing a collection of stuff. You can attach these what he calls behaviour classes to them. So you have a class and it has all these methods, it has the properties. Classical object-oriented style is like you have an object and it has these methods on it. These methods do things. They’re like behaviours. Like a car can roll. Or a man can walk type. The properties are like arms, legs, things like that. That’s like a stupid computer science 101 thing that you read in a book.

Paul B:
That’s the kind of level that I’m at.

Dustin:
So it’s a different approach though, where you still, it’s still sort of behaviour driven so when you mouse over something it toggles it and you have like onmenuhover or something like that. This is a whole class thing. So that is the object right. You can unit test it. You can add more behaviours to it by sub-classing it. This is sort of an engineers dream of, not a dream, but just preferred method of development. You can get a jQuery object and it has this chained method on it called ‘attach’ and you just pass in that behaviour class. You can unit test all those classes separately. You can manage them somewhere else. You avoid memory leaks. I just generally prefer that style.

Paul B:
Yeah I understand that. Paul is there some questions you want to ask?

Stanton:
Sure, following on from what you’ve just been talking about…you kind of touched on the fact that jQuery can be difficult to Unit Test. What are your experiences at Twitter?

Dustin:
Well currently right now we’ve been using Selenium and our Selenium tests have grown pretty large. It’s almost, it’s getting to the point where it’s becoming a problem. Where, if at any point you want to actually get something deployed and we still deploy pretty often, like pretty much everyday minus Friday. Friday is not a good day to…

Selenium website

Paul B:
No, everybody knows that. Don’t screw up your site just before you go home for the weekend.

Dustin:
It takes a while to run all your tests. It gets punted, if you have a branch right, Twitter is also a Git house, a Github I suppose. You know, you run all your tests and if even one passes (meant fails) they’re not going to push it so all your code must be tested if you’re going to get anything out. Just make sure they pass. Selenium though is increasingly taking longer and longer and longer. I’m not sure if there is one single best way to test javascript. Selenium has a style where it literally opens up a webpage and it literally clicks on something for you and it makes sure something appears, things like that. There’s a lot of stuff that can also live in a unit test where it just just tests like the logic of it. If you’re logic is directly bound to a view which is jQuery’s style, it’s like stuff stuff dot click do anonymous function, you can’t really test that anonymous function cause it’s anonymous so you can’t like run it against a test.

Stanton:
So the tests need to know what’s happening on the page and in the DOM really to know what actions to trigger right, I need this to be here instead of just testing through logic. So it seems to be kind of a balance there. What you want is rapid application development or unit testing. How do you balance that trade off?

Dustin:
It’s so hard. I mean I don’t know what the best is. I can see a point where…its gotten us where we are now and its kind of a good thing. There’s been times where you just need to ship code out the door and there’s no doubt twitter needs to get stuff out the door people look at it. People like it. They complain. You need to change it fast. If any company gets instant feedback it’s twitter itself cause we’re on the site. You know what people are saying within seconds. So it’s like “I don’t like this new design” or “This button’s retarded” or I don’t know. So you need to be able to go change those things but as we grow and we’re trying to become a more fully scaled more of an app. If you look at Gmail they’re kind of like the, they’re basically a really good example of a large scale web app that’s completely javascript driven and they have a crazy amount of abstraction. Everything there is so stupidly abstract I hardly knew what half the code was sometimes. I’m just like, just reading this and it hurt my brain. It’s very Java-ish style. I won’t speak much more on Google’s behalf but they are doing some pretty awesome stuff.

Paul B:
Any other questions Paul?

Stanton:
I don’t think so.

Paul B:
Okay. Sorry, that’s quite an interesting thing you mentioned about if anybody gets loads of feedback it’s twitter. How do you manage that kind of stuff? I mean I know this isn’t directly your job. You’re not deciding on what features are rolled out and what’s not but how quickly do you respond? What’s the decision making process? If a load of people say, I don’t know replies suck for example. How do you decide to respond to that?

Dustin:
So we have, basically Biz is an awesome guy and he handles this communication stuff really well. Everyone pays attention but someone needs to speak on behalf of twitter. Like we have a twitter twitter account. We also have a blog right. That allows us to post more than 140 characters cause that’s important sometimes. You need to communicate an important business message, so we use the blog for that. For example with @replies there was even internal debate whether or not this was a good thing, so it’s…. Some decisions are just made and we push it out there. I’m more of the style that we push the really shitty version of something. Let people complain or let people love it and run on feedback with that. I think most of the other folks at twitter are similar. But we also have that other inside of us that is, like a lot of us came from Google and other big companies. So you want to like withhold certain things, like let’s get it right or…this doesn’t mean ship crap all the time.

Paul B:
No. There’s a line there.

Dustin:
Yeah there is a line. I’ve been at other companies like that that just shipped crap all the time but iterate on crap. It works, I guess, but…

Paul B:
I guess it depends to some degree how established you are. The danger if you’re a new start-up and you launch something that’s not really really good that people take one look at it and they disappear and they never come back again. So there’s a need there to have a higher quality, but once you’ve got an established base then maybe you can experiment a little bit.

Dustin:
I think the example with Apple is they’re really the other end of the spectrum. They’re not allowed to ship anything that’s bad. It must be perfect flawless and shiny and they know that. They have a guy that decides that.

Paul B:
A shiny guy.

Dustin:
A shiny guy.

Paul B:
With the shiny approval stamp.

Dustin:
With a new heart and a new liver.

Paul B:
Okay Dustin you look like you’re really flagging mate and you’ve done remarkable well to talk coherently for this length of time. Thank you for coming on the show again. It’s so good to have you back. It feels like we’re going back to the beginning.

Dustin:
That’s awesome.

Paul B:
Thank you very much.

Dustin:
Thanks.

Thanks goes to Curtis McHale for transcribing this interview.

Web Design News 20/04/10

Posted in News on April 20, 2010 by Paul Boag

This week: The dying art of design, the disappearance of flash, tasks not goals, twitters developer tools and google rank by speed.

The dying art of design

There is a great but challenging article on smashing magazine this week for all you designers.

Entitled “The Dying Art of Design” it challenges us as designers to stop focusing on tool and techniques but instead focus on creativity and originality.

The author writes…

The diet of a typical designer is low in in-depth content and high in inspirational lists, tutorials and freebies. A review of blogs and our poll of design professionals shows a clear trend in the informational diet of creatives. They consume a lot but bypass a deeper understanding of design. In-depth articles and case studies are the least-read articles. Over 75% of the articles that designers read are either design tutorials or inspirational lists.

This has certainly been my experience on Boagworld too. My most popular posts have been those light on content and heavy on inspiration.

He concludes my writing:

While modern design tools and resources certainly make our many tasks easier, they don’t always improve our work. Tools and shortcuts are temporary. Great design is timeless. The best tool available is sitting in our heads; we just need to upgrade it once in a while.

Chris Bence, Shutterstock

Twitter introduces tools for developers

At this weeks official Twitter conference (Chirp), Twitter announced a new raft of development tools that can be found at dev.twitter.com.

These tools make it easier than ever to integrate twitter into your application or website. In fact it opens up the ability to integrate in ways never before possible.

For the majority of us the most exciting part in @Anywhere that allows you to integrate Twitter seamlessly into your site with just a few lines of Javascript.

New features include…

If you make heavy use of Twitter to support your website then this definitely worth checking out.

The gradual disappearance of flash

I have developed a reputation for being anti-flash. However, when you read the beginning of “The Gradual Disappearance of Flash” you will consider me a friend of flash developers everywhere!

The author begins:

Given the widespread adoption and advancements of modern browsers and JavaScript libraries, using Flash makes little sense.

He then goes on to deconstruct just flash is no-longer necessary including…

The improvements in standards
The iPhone and iPad lack of support
The proprietary nature of flash
Progressive enhancement
Support for video in HTML
And more

Fortunately before he is burned alive by the Flash community he does begin to tone things down focusing on the strengths of flash. However, you can tell his heart is not in it.

Despite the bias of the article I do feel he has a point. There are fewer and fewer reasons to use flash and no excuse for building entire flash websites.

He could be right, perhaps we are seeing the beginning of the end for Flash.

Old school marketing techniques don’t work online

Talking of uncontrolled rants Gerry McGovern is on good form this week. In his post “Web customers care about tasks, not goals” he shares his experiences of trying to hire a cleaner online…

I was at a house cleaner website and this lady was smiling out at me with her hands behind her head. Hello. I need a cleaner. She’s not going to do much cleaning for me if she has her hands behind her head. And she’s saying to me: “Book a cleaner and get time for you.”

That was a big breakthrough for me. For years we’ve had a cleaner and I never really understood why. But this website educated me. It’s all about time. And then this hands-behind-her-head-big-grinning-lady asks me: “Are you looking for a cleaner?” Well, duh. Actually, no. I’m looking for a set of golf clubs, but for some wholly unfathomable reason I typed the following text into Google: “house cleaner”.

bikeriderlondon, Shutterstock

His point here is that marketeers are applying principles of offline marketing to the web. For example conventional wisdom says that you need to sell the benefits (e.g. book a cleaner and get time for you) to the consumer. However, that doesn’t take into account that web users have already recognised and acted on their need by searching. What we need to do is facilitate the fulfilment of that need, rather than create the need in the first place.

Gerry sums this up at the end when he writes…

The cleaning websites I went to told me truly useless things I already knew but didn’t tell me the things I really wanted to know: hourly rates, whether they worked in my area, whether they cleaned on weekends.

I think a lot of us still need to learn these lessons.

Google ranking now affected by site speed

We have known it was coming for a while but finally it has happened: Google now partially ranks your website on speed.

However, no need to panic yet. According to Sitepoint…

[Google says] “while site speed is a new signal, it doesn’t carry as much weight as the relevance of a page” and at the moment, “fewer than 1% of search queries are affected by the site speed signal”.

Of course as they go on to point out 1% of all Google searches would still be a huge number of sites.

kropic1, Shutterstock

Sitepoint goes on to share a number of ways you can improve the speed of your site many of which I mention in my own post ‘5 ways to give your site a speed boost in less than 30 minutes‘.

Looks like performance is going to be the next big thing.

Building better forms with Steve Marshall

Posted in Development on March 4, 2010 by Paul Boag

Steve Marshall from Yahoo! draws on his many years of experience to share with us best practice in form design.

Paul: Joining me today is Steve Marshall who is here to talk about form design. Hello Steve.

Steve: Hey Paul.

Paul: Good to have you on the show, thanks for agreeing to do this. I think a good place for us to start is a little bit of an introduction about who you are and I guess why form design? Why we’re discussing that with you? So a little bit about those two things would be great.

Steve: OK, so I guess I’ve been working on the web for about ten years or so now, for the last three of them working at Yahoo. And a lot of what I’ve been doing at Yahoo has been on fairly high-profile sites that no-one would really think of, if that makes sense. You know the kind of unsung heroes of the web, that serve hundreds of thousands of page requests a day that no-one really thinks of as interesting websites in our community. Things like Yahoo TV, Yahoo Music, Games, video games – these sorts of things. And I guess really the reason I wanted to talk to you guys about this was it’s kind of a subject that’s very close to my heart because a lot of basic interactions on the web that can be made brilliant for everyone, if only people put a little thought into it – things like: search forms. A classic example for me is on google.com and even on Yahoo Search you have a search box and then you have channels, if you like, for that search so you can say “I would like to search the entire web,” “I would like to search for images,” “I would like to search for video,” these sorts of things. Typically they’re done with links. Now, if a screen reader user, for example, say goes to use that form they can fill out their search keywords, but they will never ever get to those links because in forms mode they don’t get presented with the links in the form. And so you know a little bit of thought about what actually the use case for this form is means you can maybe think about using the right elements for the right purpose.

Photograph of Steve Marshall

Paul: OK, fair enough. That makes a lot of sense. Well, you could come back with the question: “Why does that matter? Why is form design particularly important? Why is it worth us discussing?” How would you respond to that?

Steve: I guess there are a couple of things really. For one it’s essentially using the tools of HTML, CSS, Javascript the way they were intended to be used – using the right pieces of HTML for the correct use. Rather than grouping things in a semantic context, you wouldn’t group list items (<li>) with a paragraph (<p>), you’d group them with an unordered list (<ul>). And it’s just a case of doing the same with forms. Furthermore, though, it allows you to enhance accessibility and enhance usability in general, it means that your forms just work better for all the users of your site, whether they be using full on Javascript-enhanced CSS or if they’re on a really, really old crappy mobile phone that can only just about show HTML forms.

Paul: Yeah. I think as well there’s the aspect to it that forms are a fundamental user interaction on the web.

Steve: Exactly. Particularly given that we’re getting into web applications these days. A really good example of bad use of the web is Google Mail. When they first brought Google Mail out it was all Javascript and all really badly built. And because they did it this way and didn’t want to lose any functionality, they tacked on a basic HTML view. Now if they’d made the page properly and designed it with correct use of forms, correct use of semantics, all this sort of thing, then they could have just progressively enhanced until they got to the point where the main interface is and, for those user agents that couldn’t support all of the funky multi-selection and blah-blah-blah-blah-blah, they could’ve just… they would’ve just not gotten that because they couldn’t support it. And it would mean that they would have one interface to maintain rather than the, and I’m just looking at my Gmail account now, rather than the at least three that they have.

Paul: I mean, the thing is that so often forms are used, you know on an eCommerce site a form is used to make the purchase, you know it’s the call to action. On another site it’s used to signup to a newsletter, it’s kind of really fundamental stuff and don’t often get enough attention really.

Steve: Exactly. There’s a lot of talk about the ‘read-write web’ and the form is the ‘write’ part. The form is essentially the only tool – Flash aside – it’s the only tool that we have in the core HTML, CSS, Javascript bucket that we can use for all users of the web to allow them to contribute back to our sites or allow them to interact with us. So it is very important, but it very often gets really heavily overlooked.

Paul: So let’s talk about some potential ways to make your forms more user-friendly. What kind of advice would you have in regards to that?

Steve: It’s really about going back to basics; stopping for a moment and… you know it’s great to have really flashy ideas for the brilliant, wonderful things you can do with Javascript, but thinking about how your form would be interacted with if you just were using HTML. And a lot of people say “I test my site with just HTML; no CSS and Javascript.” But quite often that goes out the window when they’re talking about forms. A superb example of this is the work that Brad Wright did on Yahoo Answers with their workflow for adding a question to Yahoo Answers. Now there are hundreds of nested categories on Yahoo Answers that you can add your question to and in the Javscript-y workflow, as with quite a lot of sites, you select from the first drop-down and then another drop-down appears with a whole bunch of other categories in it, you know subcategory type things. Now what Brad could’ve done, like most websites, is just present one initial drop-down with all of the initial choices and then another drop-down with every subcategory from every choice, or presented one big drop-down with every subcategory listed with its major category or something like that. And that would’ve worked. It would’ve allowed people to select the right category, but it would’ve meant that you would have to scroll through a couple-hundred different categories to put your question into. What Brad did instead is use nested fieldsets and radio buttons so that you can select your top-level category with one group of radio buttons and then that is essentially the header for a fieldset, if memory serves, and that fieldset then contains the radio buttons for the subcategories of that category.

Paul: Wow.

Steve: It’s not elegant; you do get a really, really big form, but it makes sense and it provides the same level of information and the same flow that you would get with the progressive drop-downs. It’s things like that, just putting that little bit of extra thought in, thinking about how this might work with HTML. To go back to the search example I used earlier I have to – you know full disclosure here, this is something that I did myself about two or three years ago when I first started working for Yahoo and it’s something that various people trumpet as brilliant and I’m very proud of it.

Paul: Very modestly so.

Steve: No, but I feel like it’s an example that gets abused, but it’s a good example. Essentially, everyone as I was saying uses hyperlinks to create the channels for their search. Of course, if you don’t have Javascript, you type your search keywords into the box, you click on the ‘images’ link, for example’s sakes search for images about let’s say ‘Britney Spears,’ and what happens is you get redirected to the Image Search homepage with no keywords. Which will be really frustrating. The way I fixed that, if you will, is – rather than using links, which as I said won’t be presented to screen readers and will lose your keywords, as just two problems with it – I changed them for radio buttons and styled them to make them look like links. It’s a really, really simple change and it just changes the interaction ever so slightly so that people without Javascript, people using alternative browser modes, all these different things, can use that interaction and can benefit from it.

Paul: It’s interesting that you mention that search example. What other kind of accessibility problems are you seeing coming up when people are creating forms?

Steve: I guess most of the problems are around people not thinking about the way that their form would be interacted with in alternative browsers, and the classic example is the screen reader. But things like screen magnification: people may not necessarily group the form fields together or may put the errors away from the form fields to which they’re related and so if you’ve got someone with screen magnification or tunnel vision who doesn’t get quite such a broad view of the page – they only get maybe the couple-hundred pixels that they’ve got magnified – they don’t necessarily have the context of the error message right next to the form and so they don’t get to see that error message and will get frustrated by that.

Paul: To be honest I think that even applies with normal-vision users as well, that if you have an error message at the top of the form and you’ve scrolled down to the bottom, you need to put the error messages where you’re interacting; where the error’s occurring really.

Steve: Yeah exactly. And almost all of this stuff, with a couple of exceptions, it makes life easier for your regular users as well. It just… if it doesn’t improve life for everyone, it improves life generally for a significant enough portion of your user-base that it’s worth paying attention to, I think.

Paul: What about Javascript? You’ve mentioned Javascript a couple of times and although I would entirely agree that you need to use Javascript to progressively enhance a basic HTML version, there are some cool things and some useful things you can do with Javascript when it comes it forms and I was just interested in your opinion about what examples of good Javascript use have you seen with forms?

Steve: The absolute best one, well in fact two, that I’ve seen are on the Yahoo Finance site. One of which is the currency converter. It’s a really simple thing to do a currency converter, or so you would think. But the work that’s been put into the currency converter on Finance is so superb. They do things like: you type into the text box to specify which country or currency you want to convert from and as you type it will intelligently search through lists of countries giving you their currencies if you don’t know the currency for them. Currency codes if you search for currency codes. The full name of the currency and a whole bunch of other stuff. It’s just really smoothly designed. But if you don’t have Javascript, it still gives you a very good base interaction. The other example on Finance is, you have the ability to change the layout of the ‘Top Stories’ page. Changing layouts is something that a lot of people do on a lot of different sites, typically CMS type things. What they’ve done on the Finance site is made this thing work with Javascript, but it’s actually been built so that for screen readers and for various other users it works flawlessly; you don’t necessarily have to be able to see the form to be able to move the items up or down in the list. And quite a lot of people would say: “OK, well you should be able to drag and drop the items.” Well, that’s great, but what about the people who can’t use a mouse, for example… and things like that have been considered.

Paul: Do you think that there is a case where, although something works at a basic level without Javascript enabled, that it’s not always necessary to provide exactly the same functionality?

Steve: Oh, completely. That’s the interesting thing about the likes of the currency converter and the Finance layout changer: it’s the fact that the functionality is not presented identically, but it still gives you the core functionality, particularly with the currency converter – it still gives you the core functionality you want to be able to convert from one currency to another – it’s just that with the Javascript version it gives you much more entry into it, so you can do things like say “I’m going to Guatemala, I don’t know what the currency is, but give me the Guatemalan currency exchange with the Pound.” You don’t have to know that, whereas, with the non-Javascript version if memory serves, you would have to know which currencies you want. It gives you the option to search for them, but to use the interface you would have to know those currency codes. So yeah, using Javascript to provide a different, but enhanced interaction is perfectly fine so long as you can achieve the same results. And that’s the key thing, it’s thinking about what the problem is and what the best way to solve that problem is in the situation you’re in, whether that be plain old HTML or whether that be fully WYSIWYG, Javascript crazy nonsense.

Paul: Heh, “crazy nonsense,” is that a technical term?

Steve: Yes, that’s a very technical term.

Paul: OK, for some of the people out there that maybe are not the Yahoo’s of this world, they’re not the Google’s of this world, that are just basically creating fairly basic sites, what’s the fundamental advice that you would want to give people about form design? What are the things that they should be considering at the most basic level?

Steve: OK, I guess the big thing is, as I’ve said a couple of times, think about what your HTML is doing. By all means think about how you would like it to work with Javascript, but before you start implementing, think about how this should work without Javascript and without CSS. It’s also worth paying attention to accessibility experts in the world because that may impact the way you create copy for your form, for example. One of my absolute favourite pieces of advice is one that Ann McMeekin gave at a talk she did for the Web Standards Group where she told everyone there that apparently screen readers in certain configurations will read out the legend of a fieldset before each and every field, before each and every input within that field. So for example if you have a field whose label is ‘The Web’ and the legend of the fieldset that it’s in is ‘Search’ that’ll be read out as ‘Search The Web’. Try to use these sorts of thing to your advantage, but at the same time at least be aware of them so you’re not flying in the face of your users essentially and making their experience worse. Yeah it is really all about just thinking about what is the lowest barrier to entry, what is the core functionality that you’re working with.

Paul: You mentioned earlier ‘form mode’ for screen reader users. Can you explain that a little bit more? Because I don’t think… I confess I only relatively recently found out about this ‘form mode’ and I don’t think a lot of users realise the consequences of that. Can you explain how that works?

Steve: OK, so – full disclosure, I’m not an accessibility guru, this is all information I’ve picked up from having conversations with our accessibility gurus here. Essentially, screen readers are modal. Because the users of screen readers can’t see the web page, the screen reader presents them with various different interfaces onto the page and you can read through the page as a normal user would in HTML, reading through element by element, paragraph by paragraph. And that’s fine. But when you want to interact, you obviously need different types of controls and so screen readers provide what’s known as ‘forms mode’ and this is a special mode for editing input and working with forms where the screen reader will only present, as I understand it, form fields, labels and titles of fieldsets. So links, paragraphs of text, these sorts of things won’t be presented when you’re in ‘forms mode’.

Paul: That has real serious consequences doesn’t it?

Steve: Exactly, that has massive implications. So quite often people will provide explanatory text after a form field that’s not entirely clear or whose label is not entirely clear, saying ‘You need to fill out this field in this format’. Date fields are a classic example. They will put a paragraph underneath saying ‘Must be in the format ddmmyyyy’ and the screen reader user will never get that because it’s being presented to them in a paragraph (<p>). If the person building that form just took a couple of minutes to rethink the way they were putting the label together and put the label with ‘Date’ and then a <span> around ‘Must be in form whatever’ inside of the label and then styled it however they wanted, the screen reader user would get that and they would get all the advantages of knowing what format it should be in.

Paul: It strikes me it’s all about actually using the form tags that are available to us to the full degree. So many of us don’t use things like groups and legends and all of those kinds of things.

Steve: Yeah precisely. The interesting thing is that these things that aren’t really used are actually really, really beneficial. So for example fieldsets – again, as I understand it, I may be slightly misquoting here – fieldsets allow screen reader users to more easily jump between sections of a form. So if for example you have optional pieces of your form and they’re grouped in a fieldset which says ‘Further Details (optional)’ as the legend of that fieldset and they don’t want to fill out those further details, they can just jump over it to the next fieldset.

Paul: Which, yeah, is amazingly valuable. I mean as soon as you listen to a screen reader and hear how laborious it is, being able to skip over content is really important.

Steve: For those of us who are lucky enough to be fully visually capable and fully able to use motor skills – because of course this, whilst I think about it, this doesn’t just apply to screen reader users, this applies to people who have potentially fine motor skill issues so they have to navigate with a keyboard.

Paul: Which then you get into things like ‘tabindex’ and stuff like that.

Steve: Exactly, exactly. Which you know is a whole other holy war that I dread to get into for fear of upsetting someone. Yeah, these sorts of things again can help with that, and thinking about those sorts of things just makes everyones life easier. Because I mean, for example, I don’t always use the mouse, I will quite often use the keyboard. And I’m perfectly able with my hands and perfectly able to see, but I will quite often ‘tab’ through a form simply because my fingers are already on the keyboard and it saves me moving my fingers a couple of inches… because I’m lazy.

Paul: (CHUCKLES) So you’ve kind of mentioned a couple of people in this that you’ve learned various things from. If people want to learn more about form accessibility and form design and that kind of thing, where would you refer them to? Who do you really respect in this kind of field and you know that they should be following?

Steve: Oh, wow. I guess the people who, in terms of pure accessibility, I would say definitely Mike Davies who goes by Isafarro or Isolani exchangedly, Ben Hawkes-Lewis who I don’t think has a blog, or if he does, doesn’t blog enough. Dirk Ginader who is weboutput.de. Those three guys particularly, Ann McMeekin who guys by the name of pixeldiva. All of those guys are absolutely invaluable resources in terms of HTML, CSS, accessibility type stuff. Other than that I have to admit I don’t really know because this stuff is stuff that people don’t talk about enough.

Paul: Yeah, yeah totally.

Steve: So it’s very much a case of scratch what you can find from what’s left on the web, if you like.

Paul: Yeah. OK Steve thank you for that, that was very helpful. It’s good to kind of dig under the surface a bit. So thanks for coming on the show and hopefully we have you on again soon.

Steve: My pleasure. No problem. Yeah, hope so. Thanks a lot Paul.

Paul: Bye bye.

Thanks goes to Simon Hamp for transcribing this interview.

198. jQuery goodness

Posted in Classic shows on January 29, 2010 by Paul Boag

This week on Boagworld: Dave interviews Remy Sharp creator of jQuery for Designers and Matt Bee dares to review the Website Owners Manual.

Podcast: Download (Duration: 1:01:06 — 42.0MB)

Download this show

Launch our podcast player

News

Quick tips for better design

We all need design tips whether we are a designer, developer or website owner. No matter what our job, we all have to present things and could do with advise on how to do so better.

Enter “Make your design pop” a great little guide to small changes that make a big difference.

The post consists of 8 tips that will allow you to quickly improve pretty much any design. My favourite tips are:

Layout on a grid
Defy image boundaries
Add whitespace

However, the whole list is worth a read.

One other thing they could have included is ‘add some depth.’ Fortunately there is another blog post that deals with this ‘Six fundamental ways to add depth to your design.’ One thing I particularly liked in this post was there advice on shadows. Apparently subtlety is the key. Although I may struggle with this in life, I would have to agree that with design shadows at least, it is true.

Examples of different levels of shadowing

How web designers frustrate clients

I am in the middle of writing a post about how frustrated web designers get with our clients and how to overcome the problem.

I was therefore interested to see a post that looks at what frustrates clients about web designers.

According to this post the 5 most frustrating comments a designer can make are:

I can’t do that
That’s going to be expensive
Sorry for the delay but I’m working on other projects
I know you asked for X, but I thought it would be better to do Y
What was that?

Although I am not sure I agree with every point raised in this post, the underlying message is spot on – as web designers we need to learn to communicate better.

As I said in my dubiously entitled post ‘hiring a web designer is like getting married‘ communication is essential:

Too many web projects fail because their is a lack of communication. You want an agency that is always on the end of the phone, quick to respond to emails and constantly giving you feedback on the project.

Both sides can learn from this lesson.

Should we be designing in the browser?

Outside of the IE6 controversy (which I am fed up of talking about) probably the biggest discussion point is whether we should be designing in the browser.

Andy Clarke has been pushing hard for this approach and puts forward a good argument. However, others are concerned it could damage creativity.

It is something we have debated extensively in Headscape. Our answer? – It depends.

It’s not an either or decision. In my opinion (and that of the others at Headscape) you need to pick the right approach on a per project basis.

If a client is switched on or the project requires a greater degree of creativity then design in a package like photoshop maybe the way to go.

On the other hand if the website is more utilitarian and the client has trouble with things like liquid layout or progressive enhancement, then building in the browser may be better.

That said, if you are going to build in the browser you might want to read 12 killer tips for designing in the browser.

The article tackles font embedding, rounded corners, shadows, colour opacity and much more. Of course these are techniques useful to you whether you design in the browser or not. However, the article emphasises their importance in that context and even provides a summary argument for browser based design at the beginning.

Remote user testing: Good or evil?

Have you noticed how many remote user testing services have started to appear? Essentially these services allow you to video users interacting with your website and completing tasks you set.

I have to confess that until recently I rejected the idea out of hand. It simply could not compare with face to face user testing where you could ask questions and respond to users actions.

However, after reading ‘Unmoderated, Remote Usability Testing: Good or Evil?’ I have modified my view.

I still believe that remote testing cannot replace face to face testing. However, I do now see it as complementary.

The article lays out a lot of good reasons for considering remote testing. However, the two that convinced me are:

It’s quantitative testing – Typically people only test between 5-8 users face to face. Although we know this is enough to find most problems, sometimes others need convincing. Remote testing allows you to test considerably more users and build up a statistical perspective.
Potentially it can be more realistic – Some remote testing services allow you to intercept real users who are completing real tasks on your site and ask them if they are willing partake in remote testing. This means that unlike traditional testing they are considerably more motivated because they are completing their own tasks. They are also doing so in their natural environment and on their own PC.

If like me you have dismissed remote testing out of hand, or if you have not encountered it before, definitely take the time to read this post. They also have an excellent list of remote testing services.

Remy Sharp talks about jQuery

Remy Sharp is the creator of jQuery for Designers, a superb collection of screencasts and tutorials for adding jquery to your website.

Listen to the Remy Sharp interview

Review: The Website Owners Manual

The website owners manual by Paul Boag, published by Manning Publications

The website owners manual by Paul Boag is targeted to help those who own, run or manage web sites make them more successful. A quiet and humble man Paul has attempted to deliver all the lessons learned through more than 10 years of experience, at all stages of a site lifecycle, into a single resource. The result is a book that will help those responsible for websites be as successful as they can.

Covering topics ranging from selecting the right web agency all the way through to planning for the future, not all content might be appropriate for all website owners, but if the desired audience pick up this book, I don’t think there a single reader that will not learn something and become more successful in their role because of this book.

The book contains succinct well considered advice, which will not overwhelm any reader. I thought there might not be quite enough in depth information, or further resources, provided some sections to really make a difference, like reviewing site analytics. The book could have also better proofed, but this is a matter for the publishers. Not to mention one of the images depicting a developer in a tie.

The website owners manual is divided into standalone chapters that each covers a different stage or process involved in running a website. The 12 chapters cover:

The secret to a successful website
Stress free planning
The perfect team
Differences over design
Creating killer content
User centric design
Ensuring access for all
Taking control
Decoding technobable
Engaging visitors
And finally, Planning for the future

Although not all chapters will be relevant to all website owners, and any experienced website owner will probably have a lot of the advice and recommendations in place, there is still an awful lot to either learn, or be reminded of while running your website.

The topics covered in the book do a good job of providing a feel for the requirements of each stage in the web site process. Some really useful content includes stress free planning, the perfect team, decoding technobabble and becoming number 1 on google.

firstly, Stress free planning, where in the “picture your users” section, Paul explains how you can research properly, prioritize your users and use fictional personas to better understand and relate to your target audience.

The Perfect team does an excellent job of explaining why a brief is so vital, even for small changes. Including an annotated example brief for fictional client “The Joke Factory” to explain why each part of a brief is so important.

Selecting the right people to work on your website might be the most important (and expensive) decision you make in the whole life of your website so it was good to see the steps Assessing proposals, interviewing the short list and evaluating agencies (especially with advice on talking to references).

Decoding technobabble is a problem for all us developers, so despite Paul claiming web developers are going to hate this chapter, I know my clients won’t hate me reading it. Not using simple terms to explain how a website works and introducing concepts like hosting is something I know I frustrate people I work with, but not for much longer.

Whilst reading the becoming number 1 on google section in the chapter driving traffic I was very pleased to read Paul explains about Black hat search marketing methods and why site owners should steer well clear of these underhand techniques.

In Planning for the future, I can take a lot from concepts such as Microformats, APIs and alternative devices concisely explained direct to my clients.

I really think this book is a must for any person responsible for a website, due to the wide range of topics covered. Although as I said, not all chapters will be relevant to all website owners, there will be more than enough for the book to be a real valuable resource. I like to think of it as a fully fledged consultant sitting on my bookshelf.

There were real moments of enlightenment about how I can help clients really grasp the requirements behind an effective site. I hope this will dramatically improve my client communication using Paul’s thorough but clear explanations of the concepts required for a successful website.

So that’s what I thought about the website owners manual, but its only the tip of the iceberg, and each person that reads the book will take learn something different, so I urge you to buy it and see what it can do for you.

By Matt Bee

Remy Sharp talks jQuery

Posted in Mobile on January 28, 2010 by Paul Boag

Remy Sharp is the creator of jQuery for Designers, a superb collection of screencasts and tutorials for adding jquery to your website.

Dave: Okay, with me here is Remy Sharp who is a jQuery expert. OS, Remy, you work for yourself – what sort of stuff do you do?

Remy: I work on a mix of things, I work on some client projects – if a client comes to me with an interesting idea, I’ll work for them for their project. I tend to work as a consultant, a hired hand to their project rather than delivering the whole project to a client – my client will have their own client, so they work through me.

Dave: Okay right, so you’re there to provide input and to keep things going, keep the skill level quite up, and to keep…

Remy: Yeah, I’m basically… I tend to try and be a hired expert in kind of front end but I do everything anyway so I get to cherry pick the work and I get my fingers stuck in all kinds of pies.

Dave: Cool. And how long have you been involved with jQuery for?

Remy: Since June 2006 when I posted pretty much my first article on the web and it was a JavaScript tutorial and I realised there was Prototype and script.aculo.us for effects and I discovered jQuery and, because I’m a bit of a lazy developer I prefer to kind of spend my time doing stuff rather than doing the donkey work. jQuery allowed me to skip all the difficult stuff and when I finished the article, I took that and just converted it to jQuery and it was 20 lines down to 2, and that was my first article.

Dave: That’s really cool because one of the things I like about jQuery is the fact that it allows us to do all the same things but doesn’t tell you how to do THE CODING WRONG OR RIGHT but just gives you the tools to not have to worry too much about the cross-browser stuff. What is that you think makes jQuery so popular, because as you can see from the graph I showed you earlier – 35% share across the JavaScript CATEGORIES.

Remy: Yeah, for me the reason it’s successful is the community behind it. I mean, it came at the right time and the CSS Expressions inside of jQuery make it very accessible. But it’s the community, the help, create all the documentation, create blogs and talk about it and actually implement it. The Evangelist team, they weren’t made to be evangelists – they’ve taken people who were blogging about it, and being passionate about teaching other people how quickly they can get up to speed with JavaScript using jQuery, upspeeding in creating effects and AJAX and so on, using jQuery. They then have been pulled in to be evangelists. But I’m absolutely convinced it’s all down to the community that have helped build us up and also about the IRC channel, it’s really heavily subscribed, something like 300, 400 people on there everyday, and there’s newbies and intermediates and advanced people going on there, asking questions. And there’s guys and girls wanting to answer questions just for the challenge of being able to solve these things. I think it’s a friendly community as well – I’ve been on some IRC channels where if the question is too easy for them, they’ll tell you to bugger off. They’re just rude to you and I don’t get that in the jQuery community at all, I haven’t seen that very much.

Dave: I guess it’s partly due to JQuery being a product people tend to get excited about. People tend to naturally think ‘this is incredible’ and they want to share it with friends and when they get someone who doesn’t know about it, I guess they want to, rather than push them away, encourage them and bring them along and teach them everything they know. That’s going to help a lot.

Remy: The other thing for me is the CSS Expressions, the actual CSS part of it. I run jQuery for designers because I think that web designers like the front end people who just know CSS and know how to cut a mock into HTML but haven’t really touched JavaScript, they can take a CSS Expression and go ‘oh yeah, I understand if I can style it using this CSS, I can do something like add a class or add a click event using that CSS as well’. And people instantly get that. Once they understand they can use CSS to get into that particular area of the DOM and just manipulate it a little bit, they get it. I think the kind of ‘click’, the eureka moment is really, really early on with JQuery. JavaScript takes a little bit longer to understand how to navigate down to that specific point and some of the other libraries, they do more things… like Prototype is very good for extending the JavaScript language whereas jQuery is very much find something and do something to it.

Dave: Find something and do something to it is like a mantra people hold on to – I guess it’s quite a powerful way to think about it because it just makes sense to people. I think one of the areas I’ve noticed particularly with designers is they see the CSS Selectors and think it’s brilliant but WITH SUPPORT you’ve got to get across that message that it’s not a CSS engine you’re thinking about, it’s the JavaScript engine. How’s that work? What’s going on there?

Remy: In terms of the support?

Dave: Yes, because what they see is not CSS, it’s not CSS that’s going on is it?

Remy: No, underneath jQuery is an engine called Sizzle which is by John Resig and it’s completely stand alone piece of software that can be ported to any library if you want to, or write your own. What that’s doing is deconstructing that CSS selector and finding the right DOM nodes but is also detecting native functionality inside the browser. Safari 4 for instance has Query Selector and Query Selector All which are methods on the DOM that you can pass the CSS selector in and the browser will natively go and grab that content and give it back to you. So, inside of Sizzle, it detects that functionality and doesn’t bother with all the code that does all the searching inside of Sizzle. It just says ‘I will defer to the native functionality’. With IE 6, it’ll say ‘right, there’s no Sizzle here, I’m going to deconstruct this CSS selector and search through the DOM nodes and try and do it in the most optimised way’. I know there have been lots of speed tests as each library releases each selector engine they all go through this Slick Speed thing. Sizzle is currently running the lead with that and it’s the latest, one of the last releases of selector engines. One my pet things is to try and think about how you’re writing a CSS selector, it should be treated like CSS but CSS is native to the browser so in IE6 if you do .header it’s quick because it’s native but in IE6 and JavaScript selectors it means ‘search every single DOM node for this class’. It’s looking at every DOM node – if your DOMs very big, like 2000 elements, you can narrow that down by just doing div.header. So, it’s still down to the browsers a

nd browser support but Sizzle will even the playing field and you won’t have to worry about the support but the browser is going to be faster, depending on how new it is.

Dave: So there’s two real benefits here. First, you don’t have to worry about ??? anything in the jQuery documentation, any kind of selector that you can imagine will happen across all browsers but it will be faster in a faster browser. So there’s a two-fold benefit there, you don’t have to worry about older browsers like IE6 but you can get all the performance benefits of say IE8.

Remy: Yeah, I mean for a small application or a even a medium size application you’re not going to notice the difference of speed of selection in IE6 compared to Safari. It’s unlikely you’re going to be able to spot that. If you’ve got a client web site or a portfolio website, you’re not going to see that difference, but if you’re working on a very complicated website that has a huge amount of JavaScript behind the scenes, you’re trying to save milliseconds all the time. You think about optimising, just as you would cache variables, you’d optimise all the code as well as your CSS selectors but from a developer’s point of view working on an average range of portfolio work, project work, the selectors are going to be quick and they won’t need to worry about that kind of performance difference. But jQuery, yeah like I said, completely evens out the playing field for that kind of thing.

Dave: Cool. So, one of the things that we tend to find is that you get a project and you use one tiny bit of jQuery, so you’re writing a nice hacky bit of jQuery that does a nice sort of thing – something slides up and down. Then over the course of six months suddenly you get a huge amount of things sliding down, across and up and all over the place, and you go back to it and you think ‘if only I’d thought about organising all this stuff earlier…’. What kind of tips can you give for making sure you write code, because obviously jQuery is quite concise but you can easily end up with a mess. Are they any ways you can help overcome this?

Remy: Yeah, I mean, it comes down to planning, for one, but some of things I would do is… Paul Irish blogged about a pretty straightforward technique – what you do is look for an ID on the Body element and use that as your READY function. You have one start up file and it’s an object that has the ID of the Body as its key and it has a function associated with that. So if you’re on the landing page, the home page, it’ll run a certain kind of start up block of code and if you’re on maybe the search page it’ll only execute a different set of code on start up.

Dave: Oh, so you get a different set of jQuery functions happening depending on what page you’re on and what stuff needs to happen. That’s quite clever.

Remy: And I would take all my plugins and separate them out into separate files where I know they’re going to be reused either across the web site or other projects. But personally, I would also, for production, release that all into one file so it would be unified anyway, but during development, certainly plugins would be separated in separate files or maybe one file that would contain my plugins. I would have boot up code, start up code, in one separate file with the key value pair for a kind of ‘home page runs this code, search page runs this code, article page runs this code…’ and so on. And one of the other things I’ve had people ask me about is having a lot of markup inside of your jQuery which is something… the chap I was speaking to was saying, we’re trying to separate content from code and I see this process happening where they know they want to dynamically create something on the page where it slides out and something happens. So it’s like shifting markup into JavaScript. I mean, you can immediately see the problems with that because your markup changes five years down the line or even six months down the line and you’ve forgotten about this piece of JavaScript that contains markup. You can use templating systems to get around that kind of thing. You can inject it using AJAX hits or you can have it embedded on the web page already and reveal it as you’re going along. But you need to think about how it’s tucked away. Those are the kinds of things I try and use when I’m building a project.

Dave: Well that sounds like pretty good advice. On the subject of plug-ins. I mean, the idea of creating a plug-in probably seems daunting if someone has come from a design background and they’re you’re just getting their hands dirty with jQuery and they’re quite comfortable with taking and finding something and doing something with it if you know your selectors and you know a few of your actions. At what point should you start thinking ‘this could be a plug-in, I should be doing something that’s reusable’? How would you make that decision?

Remy: The most obvious one for me is if you’re working on two different websites where you’re copying and pasting the code. That’s the first point at which you should say this should be a plug-in here. But typically you’re working within one project and you’re finding you’re re-using a bit of code all the time. My rule of thumb is if my code that’s a candidate for a plug-in, if it doesn’t need to know exactly how it’s marked up and exactly how the action should happen and how it should be styled, then that would be a plug-in. For instance, if I have a link that always reveals a particular type of content, like a Terms and Conditions link would maybe make the content slide down and I have another link somewhere else and it’s making some other content show – having a reveal link is a fairly common pattern for instance. So I would have a plug-in called ‘Reveal’ which would say ‘look at the link I’ve just clicked on, take the hash off the URL, go find that hash in the document somewhere and animate it into the page using the passed in effect’. So I could now do ‘search through all the anchors with the class Reveal on it and here’s… so I do .reveal open brackets slide down. Or maybe I could have that as part of a class or a metadata on the actual link itself so it could read that piece of metadata out in my plug-in to reveal this ID on the page somewhere. So it’s really, it’s when you start repeating code, that’s the rule of thumb. If you repeat code a lot it’s probably going to be a good plug-in. If you’ve got a friend who you think would use it, that’s a plug-in as well. Developers should probably talk to each other more than they do already (laugh from Dave), and that will give you an idea of these kinds of things.

Dave: Yeah, definitely we do see certain common functions that you do tend to re-use quite a lot. I guess, as you briefly mentioned there, it comes to a point when you want to make a nice re-usable function. How do you translate it into something very specific that can be re-used, what’s the secret there?

Remy: It’s looking, it’s trying to be able to foresee not all of the possible uses for this piece of code, but the common uses for this code. I’ve been in enough projects where you’re told to make something so generic and so flexible that it en

ds up being so generic a piece of software that nobody knows how to use it anymore because they don’t know what all the arguments are. But, when I’m looking at a piece of code and thinking this looks like a good candidate for a plug-in I try and think about how else it will be used, like for instance, when I’m sliding down like in that previous example, what if slide down isn’t the only animation effect I want. What if I want to be able to pass in the duration of the effect, maybe an ease in as well? So, if I think about those kinds of aspects of the design of my little piece of code, that’ll help me actually write the piece of code, because I strip out the things that are specific to this particular effect or this particular interaction. I’ll strip those away and also I’ll try and think about, if I have specific selectors inside my function that are targeting specific areas in the DOM, how do I make that more generic? Can I have some passed in or should I be creating those DOM nodes on the fly? That kind of thing. You have to make a judgement as to how far you’re going to re-use it basically and I’d strongly recommend don’t try to make a plug-in that can be re-used for everything because (laugh from Dave) it’ll end up in the bin.

Dave: Alright, cool. So what’s the future for jQuery? It seems to be growing massively. I mean, a couple of years ago no one would have heard it and now you can’t move without seeing the guides and the tutorials on the internet, and every one seems to be talking about it. Where’s it going, what’s the next stage?

Remy: Well, the next stage are … the mobile version of jQuery which I assume is going to be released around the same time as 1.4. I don’t really know, I mean it’s ending up on a lot of websites, I mean the EDM that Google offer – I’m not sure if everyone knows about that, I met someone today who didn’t know about it – Google have a CDN for all the large JavaScript libraries so it means that, for instance, Stack overflow has the Google-hosted version of jQuery and it means that if you had it on your website and you use the same link, it’ll already be hot cached inside of the browser so it will load faster. So I was being asked whether or not browsers should be preloading jQuery into the browser – you can just kind of enable it and start using it. At the moment we have Google CDN which is kind of close to actually having that. In terms of the far future, I think the adoption is going to carry on, they’re going to keep growing the community. There’s four conferences for jQuery next year, one in London, Boston and San Francisco and then an online conference where people can actually do live Q&A. Just keep telling people about it (laugh from Dave) and sharing how easy it is. I mean there’s always beginners to every single industry so if we show them what the options are…

Dave: I was having a look into the jQTouch plug-in for jQuery which seems to be heavily optimised for iPhone or mobile Safari browsers. What’s all that about, what’s going on there?

Remy: As in the optimisation?

Dave: As far as I can tell, it’s doing more than just animating. It seems to be using this built-in to…

Remy: Yeah, so what jQTouch is doing is – because Safari 4 and particularly the iPhone WebKit have native animations built in, they have CSS animations basically. So what jQTouch is doing is converting your request for animation, in fact it’s not… I wrote that (laugh from Dave)… I’m working on a project that is using jQTouch and I’ve been hacking the bits of it to do what I wanted to do so there’s a bit of crossover there… It’s translating, basically saying ‘we want to animate left to right’ so it’s writing in the CSS expressions, giving the DOM node the CSS properties to actually trigger the animation to go.

Dave: Right.

Remy: So, it’ll prep it with ‘WebKit transition should be this’, it needs to translate to nought pixels to 320 or whatever it is and then it will actually apply it. WebKit actually also has a WebKit transition end that you can bind on to say the transition is now finished, trigger this call back and maybe you can do your piece of AJAX or whatever you do. But it’s using native CSS animations and applying them bit by bit against the DOM nodes.

Dave: So you get to use all the built in animations to make it really smooth and cool and you’re still using jQuery.

Remy: Yep. Yeah. What I’ve been doing on recent projects that I hope to kind of open source as well is create a plug-in that sits in between the two, that says ‘is there native WebKit animations and if there is take whatever animation data you gave me, if you want me to animate left or the opacity, use the native ones, if it’s not then use jQuery’s built-in animation functions’. So it can be smoother and faster and easier on a browser if it’s native than if it were actually run through JavaScript. That’s what I really want to see, I’d like to see jQTouch move in that direction and create a library that isn’t specifically for iPhones but a library for any kind of mobile device and you can still use it and it’s not dependant on WebKit transitions and I suspect it will end up going that way, the same as HTML 5. I’m kind of digressing a little bit but the Web forms 2.0, all the kind of built-in validation into the forms and the input types – I’d like to see a jQuery library, in fact the jQuery Validation library, detect that functionality and if it’s there let it just happen and if it’s not, plug it. So we can start making use of native functionality inside browsers when it’s available.

Dave: …it’ll just then happen…

Remy: Yeah, I mean, there’s’ still discussion as to whether or not the way the validation is happening inside the browser is absolutely correct and whether it should be mirrored or not but that’s what I ‘m kind of excited to see. Plugging native functionality if it’s not there and using native functionality if it is there and just making it easier for the user to get there.

Dave: It sounds really exciting. And I gather you’ve got a conference coming up next month?

Remy: Yes, I’m running a conference for JavaScript developers, not focussed on libraries such as jQuery and so on but getting underneath the skin of JavaScript and how it all works. Conference called ‘Full Frontal’. It’s in Brighton on 20th November and it’s being held in the world’s first or UK’s first purpose-built cinema, its a hundred years old this year. We have speakers from Yahoo!, well not specifically from Yahoo But I cherry picked all the speakers before I even announced the conference, Christian Heilmann, Simon Willison, PPK (Peter-Paul Koch). Talks on accessible JavaScript, JavaScript in mobile devices, in HTML 5, mashups … the dictionary definition of Full Frontal is ‘nothing held back or concealed’ so the idea is really getting

to the guts of JavaScript. After @media AJAX finished last year I really wanted to see a JavaScript conference in the UK.

Dave: I guess for people who want to do more than just use the tools but really understand what’s going on, how they can make full use of it and get deeper into it.

Remy: Yep, I mean I see the JavaScript community as two sets of people. People who use CSS and understand that, and don’t particularly want to understand JavaScript and what’s happening inside of jQuery and the other group of people who know JavaScript well and are using jQuery to just kind of skip the donkey work. My conference is for beginners, intermediates – advanced people are going to know this stuff as well they’re going to get to learn a few edge technologies but Full Frontal is aimed at people who want to understand JavaScript and see what we can do with it. It’s a great language, it’s in every single browser, across the world all over the place so I think it’s worth looking at basically.

Dave: Cool. Very exciting. Right, well thanks very much, it’s been a pleasure.

Remy: You’re welcome. Cheers.

Thanks goes to Wendy Phillips 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.

Lessons to be learnt from the new Google homepage

Posted in Design on January 6, 2010 by Paul Boag

Have you noticed the new Google homepage? It is now the simplest it has ever been. I believe there is a lot we can learn not only from this simplicity but also to how Google has achieved it.

There is a lot of debate about the new Google homepage with its fading of secondary content. It amazes me that some web designers see it as a mistake. Personally it perfectly sums up my attitude towards simplicity in web design, and I would like to see more website owners have the confidence to follow suit.

However, as Leesy points out in the Boagworld forum, it is not just the simplicity of the google homepage that is exciting. It is also the way they have achieved that simplicity. It is their attention to detail.

193. Get more from Google Analytics

Posted in Classic shows on November 27, 2009 by Paul Boag

On this week’s show: Paul and Marcus are joined by Matt Curry who shares some advanced Google Analytics techniques. We have a review of Fancy Form Design by Jina Bolton and Paul goes on endlessly about the Website Owners Manual.

Podcast: Download (28.5MB)

Download this show.

Launch our podcast player

Housekeeping

How can I not mention the launch of my book the Website Owners Manual? You are going to be sick of hearing about this, but console yourself with the fact that I have a very short attention span and will soon get bored of it. Please take a few minutes to learn more about this book at boagworld.com/websiteownersmanual. I would especially encourage those of you who are web designers to check it out. This book contains all the information your clients ‘need to know’. It was written specifically to be given away to clients, so helping your projects run smoother. I even managed to pursued my publisher to give significant discounts to those buying more than 5 copies. However, as an extra bonus for boagworld listeners you can also get an additional 40% off of any website owners manual purchase (including the multi-buy packs) if you use the code ‘boagworld’ at checkout.

News

Design interactive prototypes – Fast!

With websites and web applications becoming increasingly complex it is often hard to visualise them before build. Photoshops comps fail miserably and static wireframes are little better. The only way of truly communicating how a site is going to work is to build an interactive prototype. Unfortunately building prototypes can be time consuming and expensive. Although clients need to understand how their site will work, they are rarely willing to pay for a prototype. One solution is IxEdit, an ‘interaction design tool.’ This tool has to be seen to be believed, but essentially allows designers to build jQuery driven prototypes without writing a single line of code.

With IxEdit you can build everything from the automatic insertion of HTML to accordion effects. In fact you seem to be able to build most of the elements and effects supported by jQuery. Of course the quality of code is not going to be as good as something written by hand. That is why the product is billed as ideal for prototyping. However, for better or worse, I am sure a lot of web designers will use this tool for live sites too.

Making passwords more usable?

On the subject of Javascript and interaction, there is some interesting work being done with password masking. In show 173 I talked about some of the problems surrounding password masking. Essentially, although hiding passwords increases security it also creates a usability challenge. Jakob Nielsen wrote:

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. [It] costs you business due to login failures. Password masking has become common for no reasons other than (a) it’s easy to do, and (b) it was the default in the Web’s early days.

There have been a few solutions doing the rounds. The simplest of which is to add a checkbox allowing users to keep their password entry hidden. However another popular approach is the one adopted by the iPhone. Instead of revealing the entire password it shows only the last letter entered. These two approaches have now been combined and made simple to implement using a sprinkling of jQuery. Delayed Password Masking couldn’t be easier to setup and helps go someway to improving usability.

How to be more transparent

In my post “The 10 Harsh Truths About Corporate Blogging” I wrote:

People don’t like interacting with organisations, corporations or machines. People like conversing with people. People don’t like, trust or want to work with corporations. We associated those feelings with individuals, not companies.

In other words, if you want to make a connection with your users you need to be open, transparent and show the people within your organisation. However, knowing this and doing it, are two different things. That is where a recent UX Booth post comes in. The title of the post is “Transparency: Benefits and Best Practice.” Personally, I think this is a misleading title. It doesn’t really explain in any depth why transparency is important and fails to provide much in the way of ‘best practice’ (I can see I will have to write something on this subject). What the post does do well is give you some cracking examples of sites that communicate the personalities and people behind their organisations. It certainly has inspired me to look again at the Headscape website, and I hope it will inspire you to become more open as an organisation.

In other news – Google and Microsoft talk about stuff

Normally I like to keep the content of this section of the show focused on the here and now. I see little point in reporting what might affect you ‘one day’ in the future. That said, there are two stories that have come out this week, which I simply couldn’t ignore despite the fact neither will have an impact on you today.

Google to add site speed to search algorithm

This week when talking about the importance of website speed Matt Cutts from Google said:

Historically, we haven’t had to use it in our search rankings, but a lot of people within Google think that the Web should be fast. It should be a good experience, and so it’s sort of fair to say that if you’re a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don’t want that as much.

If Google follow through on this thinking the consequences could be massive. In particular this could further undermine the already shaky rankings of flash heavy websites. It could also provide a real advantage to those with the financial resources to throw more server and bandwidth capabilities at slow websites. That said, on the upside it would refocus website owners on the importance of performance and help to speed up the web for everybody. It will also encourage better coding practices maybe push legacy tables based websites down the rankings. Of course all of this could be redundant. We have no way of knowing whether Google will implement this change, and even if they do, how great a priority they will place on speed.

Microsoft talks about IE9

The other news that might shape the future of the web comes from Microsoft. With Windows 7 complete it would seem they are turning their attention to Internet Explorer 9. Apparently the new browser is only in very early stages of development. However, Microsoft are making it clear what their priorities for the browser are. These include:

A desire to provide better HTML5 support
Significant speed increases for Javascript
Improved CSS support
Better use of hardware acceleration

All music to my ears. However, I was sad to read that according to Mashable they have only been working on the new browser for 3 weeks!

Interview: Matt Curry on Getting more from Google Analytics

Transcription to follow shortly.

In the meantime follow Matt on Twitter.

Listeners book review: Fancy Form Design by Jina Bolton

What is it?

This book, in Jina’s own words, is aimed at anyone who’s involved with any part of the creation of an online form. Split into 5 sections, it covers the Planning, Designing, Structure, Styling and Enhancing of forms used on the internet Written in a format that is more about advising and guiding rather than teaching, this book will appeal to people who are used to the Sitepoint way of writing, and want to really understand the thinking behind creating a successful web form. It’s not one of those “learn in 24 hour” type books, but is more written as if you’re at a workshop run by Jina. This is not a hardcore reference manual that covers absolutely every permeation of a web form, but will have you more confident and eager to apply what you learn to forms you build from now on.

No bloat

With this book, Jina has tackled a subject that frustrates many a web designer. Forms are often too time consuming, too technical, or too stubborn to spend time getting right. Resources on the internet fall usually into 2 categories, not enough info, or too bloated and confusing. What Jina has managed to do is get straight to the point, without the bloat.

A form is just a form. Isn’t it?

Straight from the 1st chapter Jina had me thinking differently about forms. Before reading this book, I would not have said things like sliders, colour pickers, or drag and drop items are elements of form design, but when you look at where they are used, it’s obvious they are. I’m already more excited about forms than I was before. And I think that’s what this book does really well. It takes the process of form creation, and says “yeah, I know, a form is a form. But look, you can do this with it…”. Jina shows you how a form is very much like a website design. You need to think about typography used, colours & imagery, how the form is going to be structured and how it will affect how it used.

Good practices make perfect

Throughout the book, Jina runs through some processes for creating perfect forms. It starts with how to research and find inspiration. Many people who have built forms in the past would probably not have used the processes talked about in the book. It’s an eye-opener to best practice, and to how investing time in tried and tested techniques at the beginning will save you time further down the line. Many of the practices Jina talks about are transferable techniques, that can be adapted and implemented on web design, brochure design, database design etc. What I really liked is the way the book doesn’t force you to follow the practices, but is more like a friend giving you some tips.

Get your hands dirty

Although I mentioned this book isn’t a “teach yourself in 24 hours” jobby, it is by no means a pure reference book. You can follow along with Jina, and get your hands dirty with some HTML markup and CSS. JavaScript is kept to a minimum by using jQuery, and again has example code you can work along to.

In a nutshell

Fancy Form Design is probably the best title for this book. It explains how to design forms that look fancy. Jina does not pretend this book will make you a master of AJAX form submission techniques, nor an expert in JavaScript server-side form validation. It breaks down the components of creating a form, the content of that form, how to jazz it up with some clever styling tricks and jQuery magic, and makes you think about forms more as an important part of your design rather than a stone in your shoe. To me, this book does exactly what it says on the tin. Buy Fancy Form Design from Amazon

Make your website go viral

Posted in Design on October 28, 2009 by Paul Boag

Sometimes even a small design technique is enough to make your website go viral.

Recently I keep hearing about this Firefox Plugin. Not because it is an amazing plugin. The reason everybody is talking about it is because the website for the plugin uses some gorgeous CSS and Javascript.

This demonstrates perfectly the point I was making in ‘3 Ways To Make Your Site Stand Out From The Crowd.’

View the Firefox Plugin

Read 3 Ways To Make Your Site Stand Out From The Crowd

5 ways to give your site a speed boost in less than 30 minutes.

Posted in Development on October 20, 2009 by Paul Boag

In the age of broadband it is to think download speed does not matter. However, nothing could be further from the truth. I share 5 ways to add some zip to your site.

In this age of broadband, users are unlikely to leave your site for being too slow. However, if you want to create a feeling of satisfaction and a pleasant user experience you need to keep download times to a minimum.

In a recent interview usability expert Jacob Nielsen wrote:

One of the main guidelines is to show the next state (e.g., the next page) with one second of the user’s action (e.g., click) in order for users to experience the feeling of a freely-flowing interaction, as opposed to a sensation of delays.

The problem is that speed optimisation can often sound intimidating. Very clever people with very large beards throw around phrases like gzip, compression and caching. However, it doesn’t need to be complicated.

I have just tweaked Boagworld to make it slightly more responsive (yes I know it is not perfect) and I needed little technical knowledge and it took less than 30 minutes. Here is how:

1. Install YSlow for Firebug

Firebug is a Firefox plugin that is essential for any web designer. YSlow is a plugin to this plugin (confusing I know!) that allows you to carry out all kinds of speed tests on your site.

Screen capture of YSlow

YSlow will grade the performance of your site, provide advice on how to improve things and even suggest some tools which might help.

2. If you are using WordPress install Super Cache

If like me you use WordPress as your content management system then be sure to install the Super Cache plugin.

This plugin generates static html files from your dynamic WordPress blog. After the first visitor views a page on your blog, an HTML copy is created and served to all future visitors. This means that the server does not have to continually recreate pages. This will significantly speed up your site especially when you are receiving a lot of simultaneous users.

3. Compress your images

Images are a significant proportion of most webpages download. However, Photoshop does not always do a very good job at compressing images. Sure, there are other tools out there but most of us do not have the time or inclination to use them.

In addition, if we are trying to speed up an existing site we are unlikely to download and recompress an entire website worth of images.

Fortunately, Smushit comes to the rescue with an online image compressor. Best of all it integrates with YSlow to find all the images on a particular webpage and provide a report of the savings it could make.

Yahoo! Smush.it

Once it has run, all you have to do is download the recompressed images and upload them to your webserver. It even saves the directory structure!

4. Compress your Javascript

Increasingly websites are using more and more Javascript. These files can become very large, especially when using Javascript libraries and plugins. Fortunately it is possible to significantly reduce javascript files by removing formatting and comments.

There are a number of tools that will do this for you:

YSlow, which has this functionality built in.
Minifyme, which is an AIR application that runs locally.
Online minimizers, which allow you to copy and paste Javascript.
A number of coding applications that also have this functionality built in.

Whatever approach you take, make sure you keep an uncompressed version of the file because it is very hard to read and edit minimized Javascript.

5. Compress your CSS

Finally, as well as compressing your Javascript you can also do the same with CSS. Minifyme not only compresses Javascript, but also does then same for CSS. However, I tend to use CSS Compressor because it provides me with more control over the level of compression.

These CSS compressors remove spaces, line breaks and comments in order to make the file as small as possible.

As with Javascript remember to keep an uncompressed version. That, or reduced the level to which you compress the files.

What else?

What I like about the approaches above is that they require no server side configuration or technical knowledge. They are fast, powerful and easy. There is no reason not to follow this advice.

However, there is a lot more that can be done. Perhaps you would be willing to share some of your speed optimisation tricks in the comments below.

Creating a Draggable Sitemap with JQuery

Posted in Development on September 1, 2009 by Dave McDermid

A couple of weeks ago I was tasked with building a drag-and-drop sortable sitemap for our in-house content management system. After a number of failed attempts, here’s how we ended up solving the problem.

There are a handful of javascript libraries and plugins available that attempt this task, but none of them worked flawlessly with our HTML. The real issue here is that javascript alone cannot produce a slick solution, the HTML and CSS need to be carefully constructed to ensure that the experience is seamless and pleasant.

The HTML.

Our HTML consists of nested unordered lists, with each list item containing a definition list for the title, page type, publish status, and action links for editing or deleting the page. The feature for expanding and collapsing child pages already existed, making things extra fun.

[html]
<ul id=”sitemap”>
<li>
<dl>
<dt><a href=”#”>expand/collapse</a> <a href=”#”>Page Title</a></dt>
<dd>Text Page</dd>
<dd>Published</dd>
<dd><a href=”#”>delete</a></dd>
</dl>
<ul><!–child pages–></ul>
</li>
</ul>
[/html]

The requirements.

The behaviour had to intuitive for the user, they need to be able to reorder pages and move entire sections to new parents. It had to be clear to the user where a page would end up when they dropped it (ie. between pages or as a child page).

Simplifying the task.

When one page is dropped over another page, there are three possible outcomes. The page can end up before, after or as a child. This gets particularly tricky at the boundary point between the last child of a sub list and the following sibling. If the resulting location of where a page ends up is the difference of a couple of pixels, the user could become frustrated. We decided to simplfy the problem so that a page could be dropped only before items or as children of items. The only limitation here is that you couldn’t easily drop an item as the last child of a list, but this is only a minor issue as moving the last child up would achieve the same result. You can also drop an item on the parent to cause it to become the last child, but this isn’t so obvious really.

This means for each item on our list we now need to identify two areas where the user can drop the page, on the page to be a child, and above the page to be a sibling.

The javascript.

The great thing about jQuery / jQuery UI is how it lets me write the code I want to write, and takes care of cross-browser behaviours and gaps in DOM manipulation. Anyone who has attempted at creating drag and drop functionality for a website will be well aware of the headaches involved in getting everything to work smoothly across browsers. jQuery UI seems to handle this brilliantly.

The first thing I want to do is create a div inside the list item to act as a dropzone for placing items as siblings.

    $('#sitemap li').prepend('<div class="dropzone"></div>');

piece of cake.

To allow an item to be dragged, we simply call the draggable() function on the items that can be dragged.

$('#sitemap li').draggable({
    handle: ' > dl',
    opacity: .8,
    addClasses: false,
    helper: 'clone',
    zIndex: 100
});

As we are dealing with nested lists, it is important that only the definition list inside our list item acts as a handle, otherwise our old friend Internet Explorer can get a little confused over who’s meant to be moving and who should be staying where they are. By specifying ‘clone’ we create a duplicate list item that follows the mouse, while the original item waits patiently for us to decide where it should belong. An opacity of 0.8 and a high zIndex keeps the clone on top of everyone else and slightly opaque. It’s the little touches that really count.

The magic.

$('#sitemap dl, #sitemap .dropzone').droppable({
    accept: '#sitemap li',
    tolerance: 'pointer',
    drop: function(e, ui) {
        var li = $(this).parent();
        var child = !$(this).hasClass('dropzone');
        //If this is our first child, we'll need a ul to drop into.
        if (child && li.children('ul').length == 0) {
            li.append('<ul/>');
        }
        //ui.draggable is our reference to the item that's been dragged.
        if (child) {
            li.children('ul').append(ui.draggable);
        }
        else {
            li.before(ui.draggable);
        }
        //reset our background colours.
        li.find('dl,.dropzone').css({ backgroundColor: '', borderColor: '' });
    },
    over: function() {
        $(this).filter('dl').css({ backgroundColor: '#ccc' });
        $(this).filter('.dropzone').css({ borderColor: '#aaa' });
    },
    out: function() {
        $(this).filter('dl').css({ backgroundColor: '' });
        $(this).filter('.dropzone').css({ borderColor: '' });
    }
});

Ok. That’s a fair chunk of code, let’s break it down.
We only want to accept sitemap list items, we don’t care about other items they care to drop here.
The tolerance specifys the drop item to be the element under mouse pointer, we’re expecting the user to place their mouse where the item should end up.
When the drop happens, this is how we decide what to do:
We set the variable ‘li’ to be the parent of the dropzone (as both the definition list and the dropzone div are children of the list item). This is just for convenience.
When the user drops the page, we need to decide what they landed on, if it has a class ‘dropzone’ then we are placing the dropped item before us. Otherwise we are placing this as a child.
As the item is being dragged around, it is imperitive to give an indication as to where it will end up. We can do this by conditionally applying a background colour to whichever item we are hovering over. For the ‘dropzone’, we instead apply a border colour, as we want it to display as a solid line between the two items.

At this point we can also fire off our update in an ajax post to the server, in order to commit the change.

The CSS.

The secret to the interface working really well is CSS. By making sure we have the right paddings and heights in the right places we give the user enough space to comfortably drop items. If we keep the space around the definition list tight, and apply a 4px border plus 6px height to the ‘dropzone’ div, we give the user 10 pixels of droppable area. This is plenty to guarantee the user will be comfortable. The 4px border gives us a strong, clear indication that the item will be dropped as a sibling.

Extra spice

In the demo you’ll notice the addition of an undo stack. This is a great fall back for when a user moves a page to the wrong place but forgets where it came from. This will be covered in a separate tutorial.

Demo: http://boagworld.com/demos/sitemap

For more info, checkout the jQuery UI docs: http://jqueryui.com/demos/

176. Youth

Posted in Classic shows on July 29, 2009 by Paul Boag

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

Podcast: Download (29.9MB)

Download this show

Launch our podcast player

News

BBC releases Glow – A new Javascript library

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

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

The non-virtual world of freelancing

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

Hey IT! Get rid of IE6

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

Feature: Young Designer

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

Transcript coming soon…

162. Social Media (Yuck!)

Posted in Classic shows on April 21, 2009 by Paul Boag

On this week’s show: Paul interviews Mel Kirk about using social media for marketing. Marcus, explains why you need a thick skin as a web designer and we give you the chance to interview Elliot Jay Stocks.

Podcast: Download (35.1MB)

Download this show.

Launch our podcast player

Housekeeping

In last week’s show I promised exciting things to come in the boagworld forum, and this week we begin to deliver on that promise.

Listening to the interviews with top web designers on this podcast is interesting, but wouldn’t it be even better if you could be the one asking the questions? What would you ask one of Britain’s most talented young web designers? Would you ask him about Photoshop techniques or about what makes his career a success? Well, now you have the chance.

Elliot Jay Stocks used to be the Senior Designer at Carsonified before going freelance. His clients now include WordPress, Blue Flavor and FreeAgent Central. He produces some truly stunning work and is considered one of the best web designers around.

He has kindly agreed to take questions from the boagworld community over the coming week. So starting on Wednesday 22nd April you can visit the Boagworld forum and ask him whatever you want. This is an amazing opportunity to really understand the working practices of another designer and discover the secret of his success. It is a rare opportunity to see how somebody else approaches the challenges of building an effective website.

Ask Elliot a question now.

News

Website management: you can’t automate everything

Sometimes I think I have experienced some kind of mind meld with Gerry McGovern. I continually find myself nodding furiously when I read his stuff. This is certainly true of his post recent post “Website management: you can’t automate everything“.

Gerry is writing about something I have mentioned on this show many times before – content management systems are not enough to solve your content problems. Gerry writes…

The school of content management brought us such developments as portals, customization, personalization, and distributed publishing. These management-free, technology-driven solutions have led to public websites and intranets teeming with poor quality, badly organized, out-of-date content.

What do you get when you personalize crap content? Personalized crap content. What do you get when you distribute publishing rights to people who canâ€™t write, donâ€™t care about what they write, think metadata is a country bordering Outer Mongolia, and will never, ever review or remove what they publish? You get the website you deserve.

He goes on to say…

Technology is important, even critical, but we still need quality people to manage websites if we want those websites to deliver value to the organization.

Amen to that!

IE6 Update: Pure evil!

While Gerry McGovern rants about content management, I want to do the same about a terrible website from people that should know better.

IE6Update has good intentions but its approach is at best misguided and at worse evil and manipulative.

The aim of IE6Update is to encourage IE6 users to update to a modern browser. I think we can all agree with that objective. IE6 lacks the functionality of modern browsers and its rendering engine struggles to handle modern websites. What is more, its a pain in the ass for developers.

That said, the end does not justify the means. IE6Update provides a Javascript ‘snippet’ that can be added to any website. This code displays a notice to IE6 users telling them that their browser is out of date and they should upgrade. So far so good. I consider that an acceptable thing to do presuming IE6 users can still access your content.

My problem lies in the way they do this. Instead of displaying a styled message consistent with the rest of the site, they choose to disguise the message as an official IE notification bar. This tricks the user into believing they are being asked to perform the upgrade by Microsoft.

This is the kind of approach you normally associate with malware or dodgy advertising. It is not the kind of thing you expect to come out of the web design community.

I spend half my life trying to explain to clients why they should treat users with respect. Something like this undermines that work by legitimising deception. If you want to tell IE6 users to upgrade then that is fine. However explain the benefits of upgrading, don’t trick them into doing it!

Where Have All the Flexible Designs Gone?

Craig Buckler asks an interesting question over at Sitepoint – Where Have All the Flexible Designs Gone?

Flexible sites are those which adapt to fill the whole browser window no matter how it is resized. As Craig points out, traditionally these have been considered good practice because they work at any resolution and the user is put in control of sizing.

However as Craig goes on to say, there has been a decline in flexible sites recently, with an increasing number of designers adopting a fixed width approach. Craig cites a number of reasons for this including…

Their consistency with design mock-ups
The pixel perfect control they provide
The additional cost of building flexible sites

Although these are valid reasons for fixed width design, they are nothing new. Flexible sites have been around for years. Why then are they dying out now?

There are two reasons why I generally no longer recommend flexible sites to clients…

Support for page zooming – All modern browsers now support page zooming. This removes the needs for sites to accommodate increased text sizes. If the user wants the site to fill the screen they simply zoom in. What is more a flexible site can cause horizontal scrolling when zoomed so creating a usability problem. This is especially in IE7.

Graded browser support – Because I deliver different experiences to different browsers using different stylesheets it is no longer necessary to have a “one design suits all mentality.” I can deliver one stylesheet to capable browsers and another to small screen devices.

Although there are still reasons to use Flexible design, the argument is no longer as convincing as once it was. The return on investment often no longer justifies it.

Help your site convert

Smashing Magazine have released two posts that provide excellent advice on encouraging users to complete a call to action.

The first, imaginatively titled Design To Sell: 8 Useful Tips To Help Your Website Convert, covers subjects such as…

Subliminal Suggestion
Preventing Choice Paralysis
Try before you buy
The Gutenberg rule

The followup post 7 More Useful Tips To Help Your Site Convert goes on to cover…

A/B Testing
Scannable Feature Lists
Streamline The Sign-Up Process

Both articles offer lots more tips than those listed here, providing explanations and examples for each.

It is easy to believe only ecommerce sites need to convert. However, that is not true. All sites need some form of call to action, so these two posts should be required reading for all website owners and designers.

Interview: Mel Kirk social media for marketing

Paul: So I’m very excited today to have joining me, Mel Kirk. Hello Mel, how are you?

Mel: I’m very good thank you. How are you?

Paul: Very good. It’s good to have you on the show. Feels like I’ve had so much to do with you and yet we never had you on the show and that is a sin and I am truly sorry.

Mel: No problem. We have known each other for years now I think so…

Paul: We have, haven’t we. Let’s start with a little bit of an introduction for those people out there who maybe don’t know you as well as myself. Can you tell me a little bit about your background and where you come from and what kind of stuff you’re involved with, that kind of thing?

Mel: Yeah, absolutely. So I moved into web space about four or five years ago when I started work at Carsonified, which was Carson Systems at the time and what was arranging their events, Future of Web Apps and Future of Web Design. And from there I heavily became involved in promoting the apps that they were building and then eventually moved on to communities manager before I finally left, which was about eighteen months ago. And then after that joined Aardman Animations, Wallace and Gromit…

Paul: Aah, yes

Mel: Everyone recognizes it when you say Wallace and Gromit and my main project there was to work on a video platform called Formations. Which was a joint venture with Channel 4 which was in effect, it’s like a YouTube for animation…

Paul: OK

Mel: …which was brand new when I joined so my work was really around building a community around the new site there and getting that to launch, which we did. And then most recently I joined WhiteLabelDating.com as marketing manager of, so I see some very interesting sites.

Paul: Yes, that’s an interesting career move. I didn’t know about the last one. That’s fascinating. Ooh, we’ll have to come onto that one later.

Mel: Absolutely. Um so yeah, now I’m kind of responsible for researching our target audiences and their behaviors and reviewing user perspectives and brand building, all of that kind of stuff.

Paul: So is it fair to say you describe yourself as a marketeer?

Mel: Absolutely, yeah.

Paul: So, that’s good because we haven’t had a marketeer on the show before and I’ve gotta say I think that there area lot of web designers out there that are a little bit snobbish when it comes to marketing and so I think it’s a good subject for us to cover on the show and talk about, a little bit about online marketing and how to approach that kind of thing, so it’s good to have you here.

Mel: Thank you.

Paul: Right, where to begin. Um, OK let’s start at the beginning. Let’s say that somebody has got a really good product or company that they’re very proud of, they’re very excited about but they need to generate some kind of awareness online of who they are or what they do. Where do they start? Where do they begin that process?

Mel: I think for me the main thing before you implement any kind of strategy is research. So knowing your market inside out. Taking the time to work out how those people communicate and where are those discussions taking place. And then becoming a part of that conversation but doing it genuinely with something to offer. So don’t be afraid to say that you’re bringing something new to the table and that you’re obviously there to promote what you have to offer but in return being able to go into forums for example and answer questions for people, to be seen to have an opinion on current topics so that gradually you build yourself up to be seen as an expert in your field so that people have confidence in the service that you’re offering or the product that you’re trying to sell to them.

Paul: Sure. So it’s about establishing yourself as an expert more than it is pimping your product or service.

Mel: Absolutely, and I think nowadays people are used to being marketed to so they turn off as soon as you start to kind of start to heavily sell a product to them so you have to really be going there with a genuine interest and wanting to help those people in some way and they’ll be receptive to that.

Paul: Now you talk there about researching and going and finding out where people congregate and where they are online. How do you go about doing that process? You know, what’s involved in researching?

Mel: So, first of all you need to know kind of who you’re targeting your product at so know your product inside out before you go out there to start to try to find where those people are. Then once you know the kind of topics they’re likely to be discussing or the types of people that you’re after, looking for groups. User groups, Google is fantastic resource that should be used fully. I know it’s so simple, but so many people don’t spend enough time fully researching on Google kind of the different sites that are available or the different social networks that they can join so the first thing that I do, I know that everybody kind of mentions it now but having a look on Facebook, seeing what kind of groups are out there, checking LinkedIn, seeing what activities are taking place already. Setting up Google Alerts, using TweetDeck with alerts on there so that you’re currently being updated with the conversation as it’s taking place and then you’re kind of in a position to join that and to have something that you feel will be valuable that you can contribute to that.

Paul: So those alerts and things that you’re setting up aren’t necessarily alerts
directly related to your own brand or your own products but alerts to what things that your target audience might be interested in?

Mel: Yes, so for me I would set up alerts that were dating specific so that I know the current issues that are going on. I then may set up alerts thinking “OK, well our target audience is 18 to 35. Generally, what’s of interest to these people?” And setting up alerts, it can be completely abstract, searches out there. For example, if you’re targeting guys, I know it’s stereotypical I guess, but um, new beer brands, new video games. Things that you know that they’re likely to have an interest in that you can start to build some commonality there.

Paul: So you’re not even, in that situation you’re not necessarily, I’m guessing with dating you go after guys quite heavily. They’re a big audience to you so you wouldn’t necessarily go after alerts for dating related stuff, it could necessarily be kind of alerts for anything your target audience are interested in, just so you can work out where they are I’m guessing.

Mel: Absolutely. I mean if you look at the dating industry as an example. If we’re targeting guys, we may know that guys in that age have certain interests whether that’s gaming or socializing with friends that may not consider going on a dating site but if you’re already talking to them and raising your own brand awareness then when they get to the point they’re considering a dating site, you’ve already built that brand with them and they recognize you as a name so.

Paul: Sure. I think the thing that often strikes me that both clients and web designers maybe aren’t involved in in marketing is that they often underestimate how long all this stuff takes. To build that relationship and that brand takes a considerable time. It doesn’t kind of happen overnight and often people seem to expect instant results which surprises me. I saw one other thing as a use of Twitter that kind of grabbed my attention and I wondered if you did the same thing was that he would create alerts on questions, whether it be whatever, so that when somebody asks a question, you can go in and respond. Is that the kind of thing you do as well?

Mel: Absolutely. It’s not just about going in and leeching off the community. It’s about going out there to give them the answers to their questions so that you are actually providing a service and some value to them rather than just spamming them and I think that really is the difference. It’s about wanting what’s best for your users rather than just trying to sell your service.

Paul: Yeah. I’m guessing that people can kind of see through anything that’s more direct these days and are uncomfortable with it.

Mel: Well there’s so much of it, unfortunately.

Paul: Yeah, there is. Let’s talk about techniques then, or techniques and tools. You’ve already talked about TweetDeck, you talked about Twitter, you know you mentioned alerts, Google Alerts and that kind of thing. What other kind of tools do you use for reaching people that you, your target audience? What other tools are available to you?

Mel: Um, so for us a big thing is the blog. Being able to have an open conversation with our community. Whether that’s with partners that are using us or the end members that are signing up to the sites. I think for me one of the biggest things with the blog was probably with Formations when we didn’t actually have a product, but we already had people waiting to use it by the time we launched it. And that was purely by going out there saying, “We’re going out as a new venture. We totally want your opinion. We want to know what it is that you are looking for from our service.” And then when you finally go out there and you roll out your new service or your product and you’ve built in their feedback then all of a sudden you give them a sense of ownership and they become your brand advocate so I can’t talk highly enough about the blogs but that’s assuming you actually listen to the feedback. Having a blog and just having it be one way would never work.

Paul: I mean it’s interesting there that you talked about having an open conversation through your blogs…

Mel: Yeah

Paul: …and using the feedback that you receive. How do you go about that? How do you stimulate conversation? I mean I’ve had clients that have set up a blog and they’ve written a lot of article and never a comment will appear, you know. What kind of ways do you use for stimulating that conversation?

Mel: OK, I probably shouldn’t say this. Oh, no, it’s all gonna go down hill, but poking friends, I know it sounds bad. Poking friends to try to get them to spread the word for you. You never know what contacts those people will have. You will have built up a network of people yourself and it’s about not being afraid to ask those people for help. Everybody needs help at some point so asking them to spread a link if they can. But then also when you’re going out there and you’re talking to people that you think are going to have some interest in your blog don’t be afraid to go into conversation, add something and drop your link there, but that’s not going in and purely just linking, like link baiting at all. Have something valuable to say, but don’t be afraid to link that to your own site.

Paul: But what if you’ve kind of got people that are coming to your blog but they’re not engaging, they’re not posting comments? So you’ve got an audience but they’re a very passive audience. Is there stuff you can do to encourage them to participate more?

Mel: Very much. I think the way that the blog is used can be critical on how many comments and how interactive that then becomes. I think Gary Vaynerchuk does a fantastic job on his blog where at the end of each video he tells you to comment. It’s very very easy to see as soon as you hit his page, what you need to do to leave a comment or to contact him on Twitter. The call to action there is very very clear. And similarly the videos that I do at Random Mel, the first and last thing I do is to put the URL at the start and end of the video and then if I want someone’s comments on something specifically then I make sure that I tell them what to do. You can’t just assume that your users are going to know, or want to comment, so you have to really prompt that from them.

Paul: Yeah, I mean I’ve seen that a lot in blog posts where the blog post has been written as this diatribe of “I’m the expert. I know what I’m talking about. Here’s the stuff,” and you’ve got nowhere to go as far as responding to it. It’s almost like the person doesn’t want a response. They’re certainly not asking for feedback, or they’re not asking any kind of question you can respond to.< /p>

Mel: Absolutely, and at the end of the day it doesn’t matter how senior you may be within your industry or how much you know. There’s always something that you can be learning from these people. And being able to get feedback from those, that’s information and data that these huge organizations that aren’t up to speed with social media yet would pay thousands of pounds for. So it’s a real advantage if you use it properly.

Paul: I mean there’s a kind of follow on issue here that you’ve kind of built some excitement around whatever your product or service is, you may have done enough work to get in the position that you’re currently in of actually having a group of passionate people there waiting for your product to launch, and creating that initial buzz is easy, or easier but it’s maintaining that buzz over a long period of time and maintaining that engagement with users so I’m interested in how you go about keeping that relationship going over the longer term. What kinds of things do you do there?

Mel: So one of the main things here I think is having content available to them. Having something new so they have an incentive to come back. You can’t just expect to launch and for that high wave to be maintained. But I also think that it’s worthwhile bearing in mind that you should be there just to facilitate the conversation between them. If it’s some kind of website that you have, for example, for people to communicate with one another. It’s not necessarily for them to communicate with you, but you’re helping them to achieve whatever it is that they want to get out of your service.

Paul: Yeah.

Mel: So continually trying to update your service to make it the best that it can possibly be and to actually have a look back and to not be afraid to change it if you can see that users are using the service in a slightly different way than you thought they were going to. Not being afraid to go, “OK, well it’s not quite what we had planned, but let’s go along that route.” Just as flickr was born I guess.

Paul: Yeah.

Mel: So being able to change that and giving the users a sense of ownership. I can’t stress how important that is. Because they become your advocates and no matter how well you communicate with these people, you’re always going to be the person that is promoting a product or service, whereas your users are doing it because they genuinely believe in you.

Paul: There’s a kind of interesting potential problem in that, that if you as a marketing person is the person that is engaging with the community and if the community is feeding back ideas about the product and service and you’re wanting to take those on board, there’s gotta be a very good relationship between marketing and the people actually developing the product or service. How has that worked in the past? Have you found that people have been very receptive to that?

Mel: Um, so we’ve had something very very similar here at White Label where we are now positioned with the development team, because as far as I see it, marketing and development very much fit as one. And marketing now own all of the projects that we’re doing so that we were able to take our users needs to drive that forward and to prioritize that. Development is incredibly important, but it really does have to be the users’ needs that drive forward what’s most important to them. And so we have regular updates with the development teams but like I say we very much take responsibility for new features and functionality which is added there.

Paul: That’s very interesting. There’ll be a lot of people that’s listening to this podcast that are probably deeply uncomfortable with the idea of new features being driven out of marketing.

Mel: Yeah.

Paul: Why do you think it should be marketing where that’s based rather than the development team?

Mel: I say marketing simply because in terms of my role I very much kind of look at the usability of the site…

Paul: OK

Mel: …so trying to increase user experience so maybe that’s kind of somewhere in between I guess, rather than traditional marketing. But if I can see conversations that are taking place and I can see how users are kind of functioning on the site and how we might want to implement changes then it’s kind of easier to get buy in from the development team when I can go to them with hard evidence as to what it is our users actually want.

Paul: I mean that’s quite a quantum shift in the way that marketing operates. Do you get a sense that marketing as a discipline is changing quite radically and if so, in what kind of ways?

Mel: Absolutely. I guess when you introduced me as a marketeer I cringed slightly because I did marketing years back when I worked in a bank and things were very very different back then. But I would say that marketing now has very much come along the lines that it is grass roots and that’s what I feel comfortable with. It’s not necessarily acting as a marketing function but it’s about being a user advocate and working out what can we possibly do to make their lives as easy as possible and to delight them? So not just give them the service that they’re expecting but that little bit extra as well. And I think that’s where marketing comes in now because then as soon as they’re happy, there are so many tools out there for those tools to vocalize whether they’re happy with the service or not, they do the rest of the work for you.

Paul: So do you find that largely it’s about creating a passionate, enthusiastic community that then does peer to peer word of mouth marketing rather than sinking large amounts of money into banner advertising or whatever else?

Mel: Totally and we find that it’s sustainable whereas if you pay for PPC and as soon as you stop that you’ll tend find that traffic to the site will stop as well. Whereas if you’ve got an active community out there that are truly engaged with what you have to offer then that’s going to be sustainable in the long run.

Paul: Of course the downside to that is that you’re not in control of the message in the same way as you would be with traditional marketing and that you are very dependent on the good will of your community for that to succeed. So the question then arises, what do you do when things go tits up? What do you when things go wrong and there’s negative publicity and people are bitching and moaning online? How do you manage that ki
nd of situation?

Mel: I think from my point of view it would be to not be scared to hold your hands up and to admit when you’ve made a mistake. If you can be totally transparent in what you’re doing and you can explain why something hasn’t gone quite right. If you look at Facebook and how they took a step back not that long ago I think that was quite a brave move for them, but then you become an approachable company that people realize it’s humans behind the brand and as soon as you have that they become a lot more forgiving. Obviously there are going to be some people out there that bitch about you no matter what and unfortunately they are going to exist but all that you can do is kind of educate them as well as you can so they’re portraying the right message for you and then if it is as case that you’ve done something that your community don’t agree with, holding your hands up and not being afraid to change that to their demand.

Paul: I mean it’s interesting there that you talk about exposing the humans behind the brand, that increasingly seems to be the philosophy of a lot of companies, to encourage their employees to blog and to twitter and to do all of these kinds of things. But I think in a lot of other companies there’s quite a high level of fear again about losing control of the message and that traditionally that’s something that marketing want to do and the idea of opening it up to everybody within the company seems quite horrendous. How would you reassure people that are having those kinds of doubts?

Mel: I think if there’s a small-scale project that you can start that on to prove that the fear is often a lot worse than the actual reality behind it then that’s always a good way to begin. I would say that enabling your staff to have a voice is always a great way if they’re able to blog or to tweet. That’s not to say that you don’t go out there and say, “OK. If you’re going to be associated with the company, you need to be careful,” for their own rights as well as ours. You still have to be sensible with what you’re doing out there, but at the end of the day people buy from people they don’t buy from big companies. And the most successful companies out there are the ones where their employees truly believe in the products and they kind of do a lot of the work for you rather than just marketing function.

Paul: Very interesting. I mean to some degree mind these days, increasingly all of us online are having to be marketeers to some extent. We’re all managing our own personal brands and our own personal identities and who we are and how we’re perceived online. I’m quite interested in your perspective of that, because I know that you have been amazingly honest and open online and that that’s come back to bite you on some occasions. So what kinds of hints and tips would you give to people that are trying to manage their online identity? I hate that phrase, that sounds awful, but you know what I mean. You know what I mean.

Mel: Yeah. So, I think my biggest word of advice would be to be yourself. I think at the end of the day, if you can go to bed at night and you can sleep knowing that you’ve been true to yourself and you haven’t gone out there and tried to scam anyone or anything like that then I think that’s the biggest hurdle. There will always be some people that will question or criticize whatever moves you make but that’s a sign that they’re actually paying attention so although that may not be positive, it’s kind of the old PR way I guess, that any publicity is better than no publicity. And I guess for me, work with companies that fit your ethos. So, I’ve been approached by companies before where I’ve felt really kind of uncomfortable around the product that they’re offering. I don’t feel that I could sell it whole heartedly. I know that that will reflect personally on me so I will only associate myself with products and services that I truly believe in. I think that then kind of maintains people’s perspective of you I guess. But yeah, being honest is the main thing I think.

Paul: What about in regards to how open you are? I mean we’ve talked a lot about open and transparency. Is there a line do you think? Is there a point where you should just shut your mouth and not speak, so to speak?

Mel: I think that there is, and I think that that varies for each individual and it really depends on how comfortable you feel online. Some people are quite happy putting everything out there, and so that’s absolutely fine for them, that works. I’m probably among one of those. Exhibitionist, if you will. And then there are other people, they don’t want everybody to see what’s going on on Facebook. They don’t want everyone to know what’s going on in their personal lives. And that’s absolutely fine too. So you have to do whatever fits with you best. I mean, for me personally, I’m very very out there in the space and that’s just because that’s the way that I choose to lead my life. That said, you generally, apart from me on Twitter saying that boys smell, won’t find me talking about relationships or stuff that’s hugely personal to me. It will be about my lifestyle, it will be about my work, but it won’t be incredibly personal stuff. That’s my line, so. What’s your line?

Paul: I don’t know what my line is. I knew you were going to say that. That’s just because I’ve just posted on Twitter that I’m chronically depressed and don’t want to work anymore. So you’re picking me up on that. No, I think for me, I tend to say everything slightly tongue in cheek, but then there will always be a kind of element of truth in it. So I perhaps am more personal than I think I am online, but I just dress it up in humor to kind of cover it up so, I mean that comment, for example. Yeah, I’m a bit pissed off today and I’m not really in the mood for working, so I’ll exaggerate it and make a joke out of it and make a bit of fun out of it. Sometimes that can be really dangerous. Humor does not translate very well, especially into text format. So yeah, it’s difficult isn’t it? It’s kind of, you have to feel it out and work it out for yourselves I guess. Anyway this is supposed to be me interviewing you, you’re not allowed to ask questions to me.

Mel: I’m sorry.

Paul: You’re breaking the rules Mel. OK, one last question to wrap up with. Which is that, let’s face it, social media has become a little bit of a dirty word at the moment.

Mel: I hate that now.

Paul: I know, it’s horrible, horrible, horrible. And there’s so many people out there that are kind of piggy-backing off of the back of it and I’m fed up. If I have one more person decide to follow me on Twitter that’s got the words “social media” in their title I’m gonna scream, but underlying all of that, actually there is something of value there and it’s this whole, you know, what we’ve been talking about really, this whole kind of community driven aspect to marketing and to our product development and all of that good stuff. But, here’s your chance to rant Mel. Give us some of the things that really anno
y you about social media. Some myths maybe that surround social media that need dispelling.

Mel: Oh my goodness, and this is to wrap up?

Paul: Yeah. Something light and breezy to end with.

Mel: OK. So, for me, everybody saying that social media is really really easy would be my biggest thing. It’s easy enough to do, if you know what you’re doing, but not everyone can do it. Some people know how to communicate with communities, other people don’t. And it’s kind of about knowing your strengths so, for example, some people may be hugely technical, but when it comes to knowing how to market themselves they aren’t always that forthcoming. And so it really does depend on the person that you’ve got doing your social media for you I guess. My next big one would be that giving away ideas and content shouldn’t be free, that you should be charging for that in some way. I know there are plenty of people out there that say that. But if you’re going to be seen as an expert, you have to prove yourself. You can’t walk into a space and kind of stamp your feet and say, “OK, look. Pay me as a social media expert because I know so much.” You have to provide something to people, show that you know what you’re doing and be prepared to do a lot of work for free in the meanwhile and then gradually those paid projects will come along. Next one would probably be viral campaigns. Easy. They’re very hit and miss. Everyone now thinks they can upload a video to YouTube and now hit the big time and it’s really not the case. It really does depend on the audience and how they react to each piece that’s put out there. And then I guess my last one, and it’s my last one, I promise, will be that there’s now way of tracking the effectiveness of a social media campaign. I just don’t believe that at all. I think that no matter what you’re working on you should always set yourself targets. Now whether that’s a number of comments that you want to appear on a blog post or a number of members that you want to sign up, search engine optimization. There are so many things that you can track, but everyone still believes it’s slightly fluffy, and are nice to have and I couldn’t disagree with that more. So…

Paul: I like that one. That’s a really good one. I totally support you in that, that I think that making things measurable, even if you don’t meet those targets, I think having targets and aiming towards them is vitally important.

Mel: Absolutely. And anybody who comes in and says that they can do social media for you without those, I wouldn’t trust in a million years.

Paul: Excellent Mel! That was really interesting! It’s really good for us to kind of branch out and look at these things. You know the Web is becoming so much more than just putting up websites and we need to be talking about this kind of stuff more so it’s great to have you on the show. Thank you for your time.

Mel: Thank you for inviting me.

Paul: We’ll have you back again soon, no doubt. Goodbye!

Mel: Thank you.

Much thanks goes to Todd Dietrich for transcribing this interview

Listeners feedback:

In this week’s listeners section, Marcus answers a question about handling criticism from clients and we hear from Japh about Internet Explorers future.

The need for having a thick skin

This question in from Bill:

Currently my working life seems to be one long string of criticism and rejection. I try to get involved in debate as guys like you recommend I should, but my ‘real-world’ take on things usually gets shot down.

Trying to win work is even worse. I try to make sure that I don’t give too much away to potential clients up front and I try to discuss sensible budgets with them, but their expectation is that I will redesign their homepage for nothing to ‘see if I’m good enough’ and any budget request is met with ‘you tell me’.

Even though Paul and I pretend to be big and tough, nothing-can-touch-us types, the truth is rather different. My constant need for adoration and Paul’s megalomania mean that we both take criticism very hard. Ok, I’m joking, but there is a grain of truth in there.

No-one likes criticism or rejection, so what’s the best way to soften any blows?

All of the people

If you decide to lay your soul bare in a blog or regularly provide advice in a forum or through articles, then chances are someone will disagree with you. Quite often they’ll be rude and destructive in their criticism as well.

Try and take any positive criticism as an addition to any debate and get wholeheartedly involved. But, be prepared to accept that, sometimes, you might just actually be wrong.

To those people who are intent on using you as a punch-bag – ignore them. Getting into any kind of argument will almost certainly end up with you looking and feeling worse. You will tend to find that you have a lot of allies in situations like these – let them fight on your behalf.

So, accept it, you cannot please all of the people all of the time.

Go for it

All that said, you should still get involved in debate, post questions and views and comment as much as you can. You will get yourself known and even if that’s as the ‘real world’ guy then so be it.v

I’m guessing that the work you are trying to win is fairly low-end. Getting involved in discussion is a very effective way of promoting yourself. It shows that you are keen and (hopefully) that you know what you are talking about. This should start to attract a better calibre of client.

However, this does not happen overnight, so be patient.

You’re worth it

Trust you’re ‘gut’ when dealing with potential clients. Quite often people are genuine when they say that they have no idea of budget. This doesn’t automatically mean that they are a waste of time; just that they need educating in your processes.

However, if someone is trying to manipulate you into doing work for free – and that doesn’t necessarily mean doing unpaid mock-ups, it can just as easily mean scoping out an idea (why should you not be paid for being creative?) – then walk away. You will regret it if you don’t.

Walk away.

Talk money

I’ve said this before so apologies for the repetition but I think it’s important.

Ask people, up front, what their budget is. Explain that you need to know it to respond with the most appropriate solution for them. You may only be able to squeeze in a quick 2 or 3 page flat site within their budget or you may be able to offer a huge variety of functionality and testing.

If you don’t get anywhere by asking (and, as I mentioned previously, they really may not have a clue) then create a 2 or 3 paragraph solution with associated tasks (a mini proposal if you like) and email that to them with an associated ballpark price.

This will either stimulate discussion or get you dismissed out of hand. Both outcomes are good news.

Stick to your guns

We decided, quite a while back, and for very good reason, that we would not do any unpaid mock-up design work. In some cases this
has been seen as a positive thing (once it has been explained) but with other potential projects I’m sure it has adversely affected our chances of winning the work. However, we should stick to what we believe is right. Chopping and changing presents a negative image to both potential clients and our staff.

If you do decide to present initial mock-up ideas don’t be tempted into iterating them further. Any client who asks for is again asking for free work and is most definitely to be avoided.

Stay calm!

Sometimes the people we have to deal with are mouth-open-wide-unbelievable in their arrogance, rudeness, pickiness, narrow-mindedness, impatience etc etc…

Sometimes we are manipulated into doing work for free.

Sometimes we are strung along through a pitch process when we have no chance of winning it.

This can be a little irksome and, at times, we may feel that an adversarial approach is the right one! It isn’t. It can only damage your reputation.

Even if you don’t see eye-to-eye with someone it doesn’t mean that they will never hire you or recommend you to someone else.

So, in essence, work on your patience, cherish your good clients and keep your skin thick.

IE6 and IE8

Finally, Japh has posted an Audioboo on last week’s discussion about the future of Internet Explorer.

Hi. So, there’s been a lot of talk lately about the IE8 being moved to an important update hopefully to prompt people to upgrade form IE7 or whatever previous version to IE8. So, I just wanted to put in my two cents and specifically I guess this is a response to Paul Boag’s recent audio review about this topic. I agree with Paul that IE8 being an important update won’t kill IE6, mostly due to corporations. As IE7 was made a high security update quite some time ago and a lot of users upgraded before then and since then from IE6 to 7. I think those users will proceed as they have been and upgrade to IE8 like the good little lemmings that they are. And it will be the corporates that are stuck back in IE6. Mostly, I think, this has to do with maintenance periods and things like that and the various support deals that corporations have with Microsoft. But there is some good news there as well in as much as Windows XP’s life span is being reduced. Microsoft’s reducing support on that to be the extended support instead of their main line support which basically means you only get security fixes and that’s all. So, for corporations, even though they’ve paid up and so they get it little bit longer than everybody else it’s kind of a bit of a kick in the pants for them and telling them they need to move into high gear and start upgrading their standard operating environments to include the latest operating system which will include hopefully the latest browser – IE7 at least if not IE8. And I think that’s probably going to start happening early to mid next year. So, it’s not too far off before we would have , you know, hopefully, complete death of IE6. That’s my two cents.

If you are an iPhone user then why not submit a question via AudioBoo yourself? Go to Audioboo.fm for more information. Once you have recorded your boo tag it with “for boagworld”. No iPhone? No problem. You can also submit comments by skyping “boagworldshow” or emailing us an MP3 file.

161. In or Out

Posted in Classic shows on April 14, 2009 by Paul Boag

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.

Podcast: Download (20.2MB)

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

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.

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

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.

155. Attitude

Posted in Classic shows on March 4, 2009 by Paul Boag

On this week’s show: Paul asks if web designers have a bad attitude. Marcus talks about contracts and we take a look at working with browsers.

Podcast: Download (27.6MB)

Download this show.

Launch our podcast player

Housekeeping

I have a couple of pieces of Headscape news I would like to quickly mention.

First, Headscape has some office space we are looking to rent out. If you are looking for a small office in the Hampshire area and like the idea of working alongside us, then check out our video tour of the Barn.
Second, Headscape is also 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.

Finally, just a quick reminder to sign up to attend the live recording of Boagworld at SXSW. We would love to see you there.

News and events

For much more web design news follow boagLinks on twitter or signup for our RSS feed.

Atlas wows FOWA

FOWA Miami has been in full swing over the last week. The line up of speakers was impressive as always. However, judging by Twitter one session stole the show. That was the guys from 280 North showing off a new product called Atlas.

Atlas is built on Cappuccino, an open source framework that makes it easy to build desktop-like applications that run in a web browser.

280 North have already demonstrated the power of Cappuccino with the release of 280 Slides, a browser based version of Keynote.

However, Atlas takes things to a whole new level. In essence it provides a GUI environment within your browser to build powerful desktop like applications. It allows you to build Cappuccino applications without writing code.

When you first watch their video demonstration it really blows your mind. I in no way want to take away from what they have achieved. However, after I got over the initial impact, I realised I had seen this before – It looks very much like Adobe Flex.

Now anybody who listens to my show knows I am not a huge fan of flash. However, I have to wonder if Flash is not better tool for building complex web applications. I can see no real advantage to building it in Cappuccino. In fact as Drew points out in ‘The cost of accessibility‘, Atlas throws up all kinds of accessibility considerations, even if you ignore the fact it is built on Javascript.

Watch the video of Atlas in action, read Drew’s post and then compare it to Flex. Once you are done, post your thoughts in the comments. I would love to hear what others think.

Safari 4 is out in beta

So while we still patiently wait for the arrival of IE8, Apple have gone ahead and released its first beta of Safari 4.

Available for both the PC and Mac, Safari 4 has some impressive UI improvements and a considerable bump in performance. Apple claim that their new browser is 30 times faster than Internet Explorer 7 and more than three times faster than Firefox 3.

When it comes to UI and features Safari 4 ‘borrows’ heavily from Firefox and Chrome. New enhancements include…

Top Sites, an attractive display of frequently visited pages
Full History Search, where users search through titles, web addresses and the complete text of recently viewed pages
Cover Flow for history and bookmarks.
Tabs have been moved above the menu bar in a direct rip off of Chrome.
Smart Address Field, that automatically completes web addresses
Smart Search Field, using Google Suggest
Full Page Zoom

For us web designers, Safari 4 brings 3 key benefits…

It is substantially faster especially for Javascript heavy websites
It is the first browser to pass ACID3 so its standards support should be excellent
It has built in web developers tools, which are essentially a rip off of Firebug.

Generally the browser has been well received, although I note that Andy Clarke has expressed some concerns about the UI, especially in regards to tabs. He wrote…

Tabs in a real-world filing cabinet don’t change size according to how many files you have. Don’t mess with the metaphor.

I can see where he is coming from and have to agree. However, most of Andy’s comments are minor niggles and overall this is an impressive improvement. For more personally, safari now stands head and shoulders above other browsers.

Cross browser testing

Although the arrival of Safari 4 is exciting, it does bring yet another browser to test on. Increasingly browser testing is becoming unbearable.

To make matters worse it is not always easy to run these browsers side by side. IE is famous for being terrible in this regards. However, it is not alone. Even running Safari 3 and 4 together takes some hacking. Fortunately a post this week entitled: ‘How to run Safari 4 beta and Safari 3 on the same mac’ explained how.

There are also a growing number of services that aid in the process of browser testing. As with everything on the web, the problem is finding them. Luckily a website called the Freelance Folder has brought 7 testing tools together in a handy list.

Some of the services are free, others are paid. Some provide screenshots while others allow you to navigate your site. All allow testing in most versions of modern browsers.

The list includes…

Read the whole post for reviews of each service listed above.

jQuery browser fixes

Unfortunately no amount of testing is going to make up for the shortcomings in browsers. Whether it is a lack of border-radius support in IE or Firefox failure to render text-shadows, every browser has its limitations. In fact there are quite a few things that it would be nice if any browser did.

Fortunately Javascript can help overcome some browser limitations and even enhance them where they all fall short.

Of course, the downside is that plugging these holes is a lot of work. That is unless somebody has already done it for you. That is why I was so excited when Stanton pointed out ‘15 jQuery Plugins to Fix and Beautify Browser Issues‘.

This post lists 15 jQuery plugins that provide some incredibly useful browser enhancements such as…

Rounded corners for IE
Get browsers to display columns of equal height
Cross browser text shadow
Fixed position footers
Preloading images
Fixing IE overflow problem
Increase the size of click targets
Vertically Center An Element

A word of warning – Using third party plugins is fine if they are coded well. However, use too many and they may conflict causing problems. Use with caution and with a light touch!

Feature: 7 Harsh Truths about running online communities

In ’10 harsh truths about corporate websites’ I highlighted some of the problems I perceive in how companies run their websites. However, many organisations are not content to simply run a website, they want to run an online community too. Read More

Listeners feedback:

Contracts and legal stuff

I went to have a look on the forum for a good question and found this posted by Dave:

I am in the process of sorting out contracts and legal stuff. I came across this article – http://24ways.org/2008/contract-killer – from 24 ways and Andy Clarke and I think it is a fantastic example of a contract which is well written and doesn’t sound too stiff (if you know what I mean). Does anyone else have any examples or tips when writing a contract.

Why have a contract in the first place?

Bearing in mind I have never actually had to refer to one of the hundreds of contracts Headscape has produced in the past seven years, this is a fair question.

The main reason is that it focuses both parties’ minds on the job and what is required to make that job happen. It’s a kind of comfort blanket too knowing that if anything does go wrong, there’s a bunch of stuff in place to help resolve it.

How do we do it?

We split all of our contracts into two separate documents: a ‘Statement of Work’ and ‘Terms and Conditions’.

The Statement of Work is simply a description of the project written in ‘standard’ English. Roughly speaking, it’s a more solid version of the original proposal replacing, for example, ‘We could design X’ with ‘Headscape will design X’. It covers tasks, responsibilities, testing, technologies, project management, timescales, pricing, payment milestones etc. Basically, it is a detailed outline of the project that could be compared to the ‘Schedule’ of some contracts.

We have a standard set of terms and conditions that ideally (from our point of view) just simply refer to the statement of work in question therefore binding our terms and conditions to that particular project.

Our terms and conditions are written using fairly legalistic terms. Though this can sometimes mean that our clients, who may not be versed in legalese, have to take advice on what we’re proposing, I can’t remember a single complaint. I guess what I’m saying is that this appears to be the norm and taking legal advice on any contract, written in plain English or legalese, has got to be a good idea.

I agree that legalese can by irritating. Although I can understand a fair amount of it, it has taken a long time for me to learn even the small amount that I do know.

I once had a lawyer tell me that, when he was attending a class at law school on the subject, the teacher said that legalese existed only to allow lawyers to charge the rates that they do. I think his tongue was in his cheek, but on reflection, this actually makes sense if you view legalese as a kind of legal code that takes years of study to master.

I’m not sure. I guess my only concern in producing a contract using layman’s terms is if it is dismissed in the event of a dispute.

Our terms and conditions include the following:

The date of the contract
Who the contract is between (actual legal entities)
Definition of terms
Obligations
Deliverables
Payment
IPR (who owns what, what they can do with it, and when)
Confidentiality
Liability (often the biggest sticking point)
Default
Termination
Communication
Governing Law (which country’s law applies)
Signatures of the parties (most important!)

It’s not a fight – be prepared to negotiate

It is quite rare that our terms and conditions come back with no amendments. We believe that responsibilities and liability are evenly balanced but often a client’s lawyer will disagree. A cynical person might say that they are looking for issues to justify their fee, but it is possible that a particular point may not be right for some clients.

For example, we include the line “The Contractor shall have the right to incorporate, in a readily viewable location, a credit and hypertext link in the Deliverables.” In other words we can have a ‘Web design by Headscape’ link on the site. Some clients object to this and, if so, don’t make a big deal out of it. Just go with it.

However, there are times when you will think certain amendments or additions to the contract are unfair. Be prepared to stick to your guns but make sure you explain why. If you’re in any doubt, take legal advice.

Some organisations will flatly refuse to sign our terms and conditions and insist that we use theirs. From our point of view this is not ideal because these terms and conditions are usually created for contractors that have absolutely nothing to do with web design. They often talk the physical delivery of deliverables and the like but, experience has suggested to me that these contracts, generally speaking, are all very similar. The only thing that we insist upon in these cases is that the statement of work is referenced in the client’s terms and conditions.

Make sure the damn thing is signed!

Bearing in mind the effort that is put into creating these documents, always make sure that they are signed. This sounds obvious but I have had the odd clients over the years that, to avoid their internal legal team, has given the ok on the documentation but always found an excuse not to sign it.

It’s easy to say ‘well, we’re getting paid’ in these situations but, if things go wrong, you will
not have a leg to stand on.

So, in summary, contracts are good for everyone and worth investing effort in them and make sure you take legal advice if you’re not sure what you’re a client is asking you to agree to.

10 tips for efficient design

Posted in Design, Mobile on February 19, 2009 by Paul Boag

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

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 (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.

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.

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

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

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.

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…

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.

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.

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.

153. Harsh

Posted in Classic shows on February 18, 2009 by Paul Boag

On this week’s show: 10 harsh truths about your corporate website, Ryan reviews FreeAgent and Paul highlights the differences between print and the web.

Podcast: Download (20.3MB)

Download this show.

Launch our podcast player

Watch the behind the scenes video

Housekeeping

Consultancy Clinic

I wanted to followup on the consultancy clinic idea I mentioned a few episodes ago.

As you may remember I was toying with the idea of doing one-to-one chargeable skype calls for those who want my advice. I get so many people asking for help that I am unable to answer them all. After all, I have to work for a living!

A consultancy clinic would allow me to help people with their web strategy, while at the same time keeping the Headscape directors happy! Instead of having to commission a full blown consultancy project, you can just have a chat with me on a pay-as-you-go basis.

Anyway, the reason I bring it up again is because I have decided to go for the idea. I have launched a consultancy clinic website, where you can get more information and book an appointment.

However as well as wanting to pimp the service, I also wanted to mention the site itself. I decided to use this as a test case for the graded browser support I wrote about recently. I have therefore written a blog post outlining the approach I used on this site and how it worked in practice.

Even if you are not interested in the consultancy clinic, you maybe interested in how the site was built.

FreeAgent Discount

The guys over at FreeAgent are offering a 25% discount to all boagworld listeners until the end of Febuary. Just enter the code newfac when subscribing and the discount will apply for 6 months. Find a review of FreeAgent later in the show.

News and events

Feature fatigue

This week Gerry McGovern writes about what he calls the ‘Hidden power of content‘. In fact it is mainly a commentary on a Time Magazine column about buying habits.

You maybe wondering why I mention it here? Well for two reasons.

First, it is an interesting post for those of you who run ecommerce sites. It talks about how your product copy needs to focus on more than features, if you want to encourage long term satisfaction in your customers.

Second, he writes about the idea of feature fatigue. This is very relevant to all website owners and something I touched on recently in my post ‘5 options when website budgets get slashed‘.

We love to add more and more features to our websites, but that is not always the right decision. Users have become overwhelmed with features and are looking instead for simplicity and ease of use.

Read the post for yourself and ask how it applies to your site.

Striking font stacks

I am increasingly excited by typography on the web. Not because of the possibility of font embedding or techniques like sIFR. No, what really excites me is the work being done right now using font stacks.

The beauty of font stacks is that even if a user doesn’t have your preferred font, it can still display an alternative.

A lot of designers have been working hard to help us squeeze the most from the fonts installed on our machines. Huge amounts of research has been done on common fonts, as well as the best stack combinations. The trouble is this information is spread all over the web.

However, this week Paul discovered an excellent post that brings all of this research and best practice together. ‘Striking web sites with font stacks that inspire‘ is a great post that not only lists the latest thinking on font stacks, it also provides some incredibly inspiring examples of them in use.

If you are looking to become a great designer then understanding font stacks is essential. This post is an excellent place to start.

Tips for improving your HTML and content

Our final featured post this week is ‘5 Top Tips to Beautify Your HTML and Enrich Your Content‘ by Mike Brown over at Sitepoint.

HTML is a deceptive language. On the surface it is amazingly simple and anybody can be writing HTML in a few minutes. However, the longer you work with it the more you discover the variety of ways in which it can be implemented – some good, some bad.

This post shares some very basic best practice for working with HTML. Advice includes:

Using short URLs
Being consistent in your markup
Minimize uses of class and id attributes
Add title attributes and other metadata to enrich content
Use comments and whitespace to help readability and ease maintenance

All basic stuff but ideal for beginners and a useful reminder when the rest of us get sloppy.

Feature: 10 Harsh Truths About Corporate Websites

We all make mistakes running our websites. However the nature of those mistakes varies depending on the size of your website. As your site and organisation grow, the mistakes begin to change. This post addresses common mistakes in larger organisations. Read More

Listeners feedback:

Review: FreeAgent

Way back in show 131, Stanton and myself answered a listeners question about project management and invoicing applications, and I mentioned FreeAgent in my line up of apps that I thought you listeners would be interested in.

I’m now going to discuss the app in more detail, as I’ve been really getting into it and using it to it’s full potential.

FreeAgent is a fully featured online accounting tool wrapped in a sleek, comprehensive and easy to use interface. It’s aimed at Sole Traders, Partnerships and Limited Companys, they offer a free 30 day trial to get you started and after that there’s a price plan ranging from £15 – £25 a month at the time of recording this review.

I’m a simple code monkey and the thought of managing my taxes and invoices sends shivers down my spine. So I love that FreeAgent just takes me by the hand and guides me through the whole process.

Accounting is project based, which doesn’t suite everyone, but that really depends on your personal preference.

You simply start off by creating a client, then you assign a project to that client, you add timeslips to the project and using your hourly rate FreeAgent tells you what you’ve earned and what you owe the tax man and the whole thing is pretty much that simple.

As I’ve said it’s fully featured, you can create invoices, manage expenses and mileage, upload and analyze your bank statements, create a login for your accountant, view real time profit and loss reports the list goes on and the guys are constant adding new stuff.

Even if you decide you don’t like using FreeAgent after you’ve signed up you have the option to export your data at any time and try something else, so there’s no fear of loosing anything.

This week sees the launch of a redesign to freeagentcentral.com and the FreeAgent app itself and I’ve been one of th
e luck ones to get a sneak peek behind the scenes and I can tell you that the guys have been putting a lot of effort into improving the general interface based on user feedback. They’ve refreshed the colour scheme to make things easier on the eye for long term use and restructured some of the navigation to make moving from projects, time tracking and invoicing much more intuitive.

In my opinion it’s definitely worth a look so if you want to know more about FreeAgent head over to freeagentcentral.com, watch the 2 minutes video introduction and take the tour. They’ve even got a number of demo’s so you can go in and play with the app before you sign up. Even more incentive to have a look would be the 25% discount the guys are offering to all boagworld listeners, just enter the code ‘newfac‘ when signing up for a free trial and the discount will last for 6 months once you subscribe.

The difference between print and web

Jake Knight asks a brilliant question, that I am amazed we have yet to address on the show.

Jake Knight: What are 5 things you would want any print graphic designer to know first and foremost about designing for the web?

So it is a top 5 list you want? You have been reading too much Smashing Magazine! Okay here goes – The top 5 things every print designer needs to know about the web…

Let go of pixel control – One of the hardest things for print designers (and marketeers for that matter) to accept that you do not have pixel perfect control on the web. Different browsers, resolutions, monitors, operating systems and video cards all alter the way your site is displayed. Add to this the users ability to change font sizes, colours and browser dimensions, and it becomes impossible to have the control you get in print.

Don’t be afraid of the code – Many print designers shy away from coding HTML. They rely instead on a ‘techie’ to handle this side of things. That is a mistake. To really get to grips with the web you need to understand how it works. HTML/CCS/Javascript all shape and influence design (for better or worse). Also, it really isn’t that hard. HTML in particular is a very simple language.

Web Typography is not so bad – Okay so you haven’t got the freedom of print, but typography on the web can be just as creative. By using font stacks, line spacing, and kerning you can create truly gorgeous typography. Also when you just have to have a particular font, there are techniques such as image replacement and sIFR. If you are a typography bluff and want to discover what is possible, check out Richard Rutter’s blog.

It is an interactive environment – One of the most common mistakes of print designers is to focus on aesthetics and forget usability. The web is interactive and web design has more in common with signage design than brochure design. Your job is to help users complete tasks, not just to produce attractive design.

Your skills are transferable – Everybody goes on so much about the differences between print and the web. It is easy to get demoralised and conclude you could never make the switch. However, in reality most of your skills are transferable. Layout, colour theory, typography and composition are just some of things that are universal no matter what the medium.

So there you go Jake, 5 nuggets of advice for anybody considering moving into the web from print.

Our First AIR App

Posted in Development on February 13, 2009 by Paul Boag

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

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

151. Budget

Posted in Classic shows on February 4, 2009 by Paul Boag

On this week’s show: Paul shares 5 tips for when your website budget gets slashed. We have a review of Dropbox and discuss ways to improve the typography on your site.

Download this show.

Launch our podcast player

Housekeeping

Two pieces of housekeeping this week.

WCAG2 Video

A couple of weeks ago I did an internal presentation to the guys at Headscape about WCAG2. The idea was to bring them up to speed on the new accessibility guidelines and also to put accessibility back at the centre of our processes.

At the last minute I made the decision to record the session and put the video online. Although the audio is awful (hence not using it in the show) it maybe useful if you have not read up on WCAG2 yet. There is also a transcript if the audio becomes too much.

You can watch my Introduction to WCAG2 here.

Win a copy of ‘A Practical Guide to Designing for the Web’

Mark Boulton has just released a book that covers the underlying principles of all good design. Whether it be online or in print, good design is governed by certain best practices. This book introduces the reader to these principles, including subjects such as…

How to start the design process
Research and ideas
An introduction to typography
The basics of colour theory
The rules of good layout

The book is unsurprisingly beautifully designed. However it is also well written and engaging. I can highly recommend it.

You could go and purchase a copy right now for only £12 (and I would encourage you to do so). Alternatively you could win one of three free copies by entering our twitter competition.

For your chance to win a copy of this inspiring book, twitter your top design tip using the hash tag #designTip. For example your tip might be…

#designTip – If you wish to draw attention to a design element surround it with whitespace.

The closing date for this competition is Friday 27th February, so get your tips in before then.

The winners will be chosen by Mark and we will direct message them shortly after the 27th. To ensure we can do so please subscribe to the Boagworld Twitter feed.

The winners will also be announced over twitter and on the boagworld podcast.

See the excellent tips that have already been submitted here

News and events

IE8 Cometh!

The big news this week is that IE8 has taken one step closer to being officially released by announcing their first release candidate.

According to the IE blog:

The IE8 product is effectively complete and done. Our next step, after listening to feedback from the final testing feedback from the community, is releasing the final product.

Although they do not provide a release date it is fair to say that it will not be long now.

Whenever I talk about IE8 people immediately ask if they can stop supporting IE6. My recent article on graded browser support should make my opinion on that clear.

However, the more important question is are you ready for IE8? Do you know what CSS properties it supports and have you tested your websites in it?

Microsoft provide a handy table of CSS selectors and properties that IE8 and indeed all other versions of IE support.

Once you have looked at that check out the IE8 readiness guide for developers. This has loads of information about IE8 support for CSS, Javascript and various proprietary features.

It also has a small piece of code you can fall back on if you are experiencing serious rendering issues on existing websites. By inserting this code into the head of your HTML document it forces IE8 to render in the same way as IE7. I am sure this will be a useful stop gap measure for website owners unwilling to pay for updates to their sites.

15 Tips for Freelancers Starting Their Own Business

Next up some great advice for web design freelancers. Think Vitamin have published a post entitled ‘15 Tips for Freelancers Starting Their Own Business‘.

In actual fact the advice applies to all freelancers, not just those starting out.

It is a fairly arbitrary list, but it has some good stuff in there. Just a few of what has been included are…

Move Out of Your Back Bedroom
Don’t be Afraid to Pass
Work on your Sales Technique
Learn About Personality Types
Maintain a Verbal/Email Relationship

If you are a freelancer looking for advice I can also highly recommend FreelanceSwitch.com, which is an entire site dedicated entirely to helping freelancers. Check it out.

Facts and Figures

This last week seems to have been a week of facts and figures.

The first figure that caught my eye was that Adobe AIR has been installed 100 million times. That is an impressive figure, even if it is being overstated as some believe.

Moving web applications to the desktop is an area I find particularly exciting. I am not sure it is always necessary. However, platforms like AIR make it scaringly easy, as we discovered when we did a proof of concept recently at Headscape.

The same announcement from Adobe also stated that Flash 10 has a 55% market penetration on Internet connected computers and they expect that number to rise to 80% by Q2 2009. This is an improvement on the adoption speeds of previous versions.

Other facts and figures to appear this week came from the "state of the web" survey carried out by Web Directions South. This is a survey of professional web designers and developers. Some interesting figures pulled out of the survey by Roger Johansson included:

The number of Mac and Windows users are almost equal â€“ both are used by 46.8 % of respondents
As many as 4.7 % use some version of Internet Explorer as their primary browser
Only 29.5 % test their sites in IE 8
Many more use XHTML than HTML
Over 10 % still use tables for layout
Almost 70 % still use presentational markup
Only 69 % create print stylesheets

Not sure these figures are particularly useful, but interesting none the less :)

Sprite Optimization

Finally today, I
would like to draw your attention to an interesting post by Dave Shea on ‘Sprite Optimisation‘.

Let me briefly explain what CSS sprites are in case you are not aware. Let’s say you have a button with three states – unvisited, visited and hover. Instead of having one image for each state of button you can use a single image containing all three states. You then use CSS to position the image in such a way that it only shows the current state.

In fact Dave Shea wrote an excellent article on ‘CSS sprites‘ back in 2004.

Dave’s new post demonstrates that this technique is now being taken to the extreme with sites like Amazon, Google and Apple cramming large numbers of sprites into a single image.

Whether this is entirely necessary for the types of sites most of us are involved in is debatable. The technique also has some drawbacks on devices such as the iPhone, where performance can be effected.

That said, it is a way of substantially reducing the number of calls to the server so causing pages to load faster.

If you are suffering from performance problems or have a project that requires lightning download then check out Dave’s post and also a CSS sprite implementation guide he refers to.

Feature: 5 options when website budgets get slashed

Your site is in desperate need of a redesign, content is out of date and the technology is archaic. Unfortunately times are tight and your budget has been cut. What do you do? Read More

Listeners feedback:

I am very conscious that I have not been encouraging listener contributions and that is slack of me. This is a part of the show I really want to grow. As I have said before, Boagworld is about the community, not just my personal opinion.

With that in mind you can contribute in three ways…

Email – I cannot always respond personally but I read everyone.
Phone – You can either Skype ‘boagworldshow’ or call 020 8133 5122 and leave a message.
Forum – I often take questions from the forum, so make sure you join that too and get involved.

Talking of the forum, both of this week’s listener contributions come from there.

Listener Review of DropBox

From time to time we do listener reviews on the show and there is a section of the forum dedicated to reviews.

This week I have selected a review from the forum by Dave Redfern. He reviews DropBox, which although not strictly a web design tool will be useful to all.

Dave writes:

I came across dropbox last month thanks to the good people over at the mac roundtable podcast. Because i work on several computers from windows and mac machines in the same house, windows machines at work and at uni i am paranoid about making sure my files follow me around.

The basic concept of getdropbox.com is you install the software on each computer you have, then any files you wish to keep synced between them all you drop in this folder. If it is a public machine you can still access your files from their website although it is a little more clunky. You don’t need to set it to upload changes at a certain time or activate it, the software will automatically sync the folders whenever anything is changed.

A nice feature is within the dropbox folder there is a public folder and anything put in here can be accessed by anyone via a website link. the get the link all you need to do is right click on the file and select ‘copy link address’ and then paste it where ever you need. it is great for sending things to friends or showing clients screenshots of mock ups.

Preferences are very limited to limiting the bandwidth used at anyone time and changing the foler (although when i tried this feature i kept crashing my finder!) but simple is good sometimes.

It is free to sign up and you get 2gb of webspace free. you can upgrade to 50gb for $10/month or $100 for the year which seems reasonable.

the software is available for mac, windows and linux so perfect for anyone.

I will give it 3.5/5 at the moment. there is still some work to do on the software but a great start and very promising.

Personally I think 3.5/5 is a bit harsh but I know what he means. I love dropbox and have just paid for the 50gb account, but the web interface could do with some improvement. Also a native iPhone application would be nice.

That said we use it loads at Headscape to share files privately. It is perfect for that and online backup (including versioning) and I would highly recommend it to everyone.

Font Embedding on the Web

There is an interesting thread on the forum about font embedding that I also wanted to mention. Started by Dven he writes:

It’s a pretty popular subject but wanted to raise this to hear what your thoughts are on it all.

Basically a designer in our office found this link: http://www.fontburner.com. Thought that it be a good idea to maybe use in the near future. Now personally, I’m against embedding non-standard web fonts in this way.

The designer’s reaction. "its pretty much the way the design on web is going – limitations in type have always been a problem – not anymore. Its not the best solution, but pretty soon there will be a better one."

Be good to hear your thoughts?

After checking out Font Burner I discovered that it was a quick and easy way of adding sIFR to your site. We have talked about sIFR before on the show. It is a technique that uses flash to replace HTML text with your desired font.

I was pretty impressed by FontBurner but as Laura said…

It’s not the most semantic way to embed different fonts, as it requires <div class="font-name">text</div> if you want to change anything but <h1>.

Later in the thread Dvan went on to say…

These types of solutions are always prone to not working somewhere along the line. Guess I am kind of a very semantic guy and prefer to do things the ‘standard’ way.

Personally I do not feel that strongly. I think techniques like these are sometimes necessary to overcome browser limitations. That said, I do share his concern about these things not always being very reliable.

I actually rarely use sIFR. My preference is to make better use of font-stacks. These can be very powerful if used well. It is basically another variation on progressive enhancement. If the user has the nice font they get it, but if they don’t they get a substitute.

The reason most designers resort to sIFR is because the client insists on a
particular font. I would prefer to educate the client than resort to sIFR. By educating them over this issue you are laying the ground work for conversations about graded browser support and various other progressive enhancement issues.

On the subject of web typography, let me leaving you with a smashing magazine post that has come out this week – 50 Useful Design Tools for Beautiful Web Typography.

Win a copy of 'A Practical Guide to Designing for the Web'

Posted in Design on February 2, 2009 by Paul Boag

Everybody involved in the web design process needs an understanding of design fundamentals. That is why everybody should read “A Practical Guide to Designing for the Web”.

Maybe you are a website owner who has to sign off on a design comp. Maybe you are a developer who has to implement the design produced by somebody else. You might even be responsible for a sites design without having any formal design training. Whatever the case, you should probably read Mark Boulton’s new book.

This PDF book covers the underlying principles of all good design. Whether it be online or in print, good design is governed by certain best practices. This book introduces the reader to these principles, including subjects such as…

How to start the design process
Research and ideas
An introduction to typography
The basics of colour theory
The rules of good layout

The book is unsurprisingly beautifully designed. However it is also well written and engaging. I can highly recommend it.

Win a free copy

You could go and purchase a copy right now for only £12 (and I would encourage you to do so). Alternatively you could win one of three free copies by entering our twitter competition.

For your chance to win a copy of this inspiring book, twitter your top design tip using the hash tag #designTip. For example your tip might be…

#designTip – If you wish to draw attention to a design element surround it with whitespace.

The closing date for this competition is Friday 27th February, so get your tips in before then.

The winners will be chosen by Mark and we will direct message them shortly after the 27th. To ensure we can do so please subscribe to the Boagworld Twitter feed.

The winners will also be announced over twitter and on the boagworld podcast.

Current entries

Below you can view the current Design Tips that users have submitted.

150. User Manipulation

Posted in Classic shows on January 28, 2009 by Paul Boag

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

Download this show.

Launch our podcast player

News and events

The $300 Million Button

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

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

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

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

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

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

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

Read the ‘$300 million button’

The UK government and graded browser support

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

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

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

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

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

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

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

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

Read the UK government guidance on browser testing

50 Illustrator tutorials

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

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

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

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

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

Read 50 illustrator tutorials every designer should see

A new approach to PNG Support

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

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

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

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

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

Download DD_belatedPNG now.

Interview: Liz Danzico on User Research

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

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

Paul: Okay.

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

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

Liz: Well I wouldn’t go that far.

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

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

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

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

Paul: Uh huh.

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

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

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

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

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

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

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

Paul: Yeah, that’s good.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Liz: My pleasure.

Thanks goes to Jason Rhodes for transcribing this interview.

Listeners feedback:

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

Snape and Keith, separated at birth?