Cairns Web Developer

Similar Posts:

• atMedia: WCAG 2.0
• d.construct: Full of questions
• Successful communication
• 10 harsh truths about corporate websites
• The plight of the in-house designer

The downside of the digital revolution is isolation. The web allows us to do alone what would have previously taken a team of people. It also frees us from the constraints of geography letting us work from home. However, although these can appear to be benefits they also leave us isolated in our endeavours.

The dangers of isolation

Over time working in isolation (even if you work as part of a greater team) can prove harmful to your mental health, business and website.

In fact even if there are other people working on the project, if they are junior to you then you can still feel isolated.

lifeandlove, Shutterstock

If you don’t find a peer with whom you can share ideas and discuss your business/project you face a number of dangerous…

• Becoming creatively dry – Creativity is born out of interaction. It is hard to be consistently creative on your own. The best ideas come from people brainstorming together and one great idea leading to another. Without somebody with whom you can bounce ideas around with, your business or project will lack a creative spark.
• Loss of confidence – Overtime we can begin to lose confidence in our abilities or our project/business. This especially true when we make mistakes and things go wrong. Without somebody to encourage and reassure us we can begin to second guess our decisions.
• Being over confident – While some suffer from a lack of confidence others are overconfident and need to be challenged and questioned. This is a trait I suffer from and would happily dive headlong into disaster if it was not for my fellow directors at Headscape constantly questioning my ideas. Without people like this it would be easy to push your project or business in entirely the wrong direction.
• Reaching the limits of your knowledge – We can’t all be experts at everything and yet both running a website and running a business require a broad range of skills. When working in isolation it is easy to reach the limits of your expertise and flounder when trying to tackle problems outside of your comfort zone.
• Having a blinkered perspective – Another problem with working alone is that you only have a single perspective of the work you do. By adding another set of eyes to the problem you are given a broader vision and may approach the challenges involved from a different angle.
• Feeling overwhelmed – Running a business or even a business critical website can feel like a weight. You can often be required to make some big decisions especially in terms of hiring and expenditure. Making these decisions alone is a big responsibility and can be extremely scary. Having somebody to share that with makes an enormous difference.

So can you associate with any of those? If not I suggest you read the over confident one again! I don’t believe there is a single website owner or entrepreneur who couldn’t do with an outside perspective.

The question is, how can you find somebody?

Getting an outside perspective

The most obvious solution to that question is to partner with somebody from the outset. Whether working with somebody on your website or forming a business with somebody else, partnerships can be very beneficial. That is what I did with Headscape and have never regretted it for a minute. I would be lost without my two co-founders Chris and Marcus.

Palto, Shutterstock

That said I know that not everybody’s experiences have been so rosy. Also by the time you are reading this the opportunity for this kind of partnership has already passed.

What then can you do? What other options are available for those seeking an outside perspective and somebody to bounce ideas around with?

Here are some options…

• A sleeping partner – This is the approach we have taken at Headscape. We have a non executive director called Brian who works with a number of companies and keeps us on our toes. He has a radically different view on business and constantly challenges us. In return he has a small stake in the business. He is worth every penny.
• Paid consultant – If you don’t fancy having somebody else that entrenched in your business why not consider an external consultant who you speak to on an ongoing basis. Admittedly these kinds of consultants can be pricey but they do bring an outside perspective to the table.
• Find a mentor – Another option is to approach a web designer or website owner you admire and ask them to mentor you. Obviously these people may well be busy with their own businesses or websites but if you are willing to pay for their time you can get some valuable advice. This is exactly the service I offer through the Headscape consultancy clinics. Most of the time you only need an hour once a month to keep you on the right track.
• Find a ‘buddy’ – A cheaper option would be to find a buddy, somebody else in a similar situation to you. The two of you can agree to talk regularly and share the challenges you face as a business or website owner. You can discuss different approaches and ideas together providing you with somebody to bounce ideas around with. In fact I recently posted about this idea on the Get Signoff blog and people have posted their interest the comments. If you are interested too why not contact one of them or add your name to the list.
• Join a community – The final option is not to look for a single consultant, mentor or buddy but to find a supportive online community instead. There are loads of these around but be sure it is not too big. You want people to know you and to remember your particular circumstances. Personally I would say the Boagworld Forum is the perfect size but then I am probably bias.

However you choose to do it is entirely up to you. The point is that if you want to really see the potential of your website or business you need the help and encouragement of others.

Humans by their nature are best in social groups and you are no exception. We are not meant to do it alone!

Similar Posts:

• Hold stakeholder interviews now or pay later
• Google Web Alerts
• 10 ways to get more involved with Boagworld
• Home working and departing friends
• Quality or quickly?

Download this show.

Launch our podcast player

Web Design News

This week: The Boagworld Podcast goes off air, how to design better and faster, using stories in your design ideas and how to think from a users perspective.

Read the web design news

CSS Trickster Chris Coyier

Chris Coyer is best know for his work on CSS-Tricks a ever growing web design community. However, as you will discover in this interview it isn’t just limited to CSS.

Read ‘CSS Trickster Chris Coyier’

What am I meant to listen to now?

Although the Boagworld podcast will return with a new format in 6 months, the question still remains – what are you mean’t to listen to now?

Read ‘What am I meant to listen to now?’

Similar Posts:

• After 200 episodes is it time to change Boagworld?
• 202. Rocket Surgery Made Easy
• CSS Trickster Chris Coyier
• What is podcasting?
• ClickTale launches real time monitoring

Subscribe to Boagworld Bitesize

As you will have gathered we are taking a break from the Boagworld Podcast after 5 years of recording.

You guys have been so incredibly supportive about this decision. Many of you have expressed your sadness about the show ending, but equally understandd our desire to do something new.

However, Mike from New Zealand asked a very pertinent question…

What am I meant to listen to now?

Somehow this seemed a fitting question for the last listener segment of the show. So here is my answer…

We will still be putting out audio

Although we will not be publishing a regular show over the next few months, we will still be releasing the occasional piece of audio. In particular I am intending to produce the odd interview and release audio from some of my presentations.

Because these will not be ‘full shows’ I won’t be releasing them as part of the main boagworld podcast feed. Instead they will appear on the Bitesize feed, so if you aren’t already subscribed then now would be a good time.

Subscribe to Boagworld Bitesize

or subscribe via iTunes.

Also don’t forget the daily Audioboo’s I record where I give short audio tips on running a successful website.

Other web design podcasts

Obviously nothing is going to match the professionalism, entertainment and pure polish of the Boagworld podcast but there are actually quite a few web design shows out there.

In fact there are so many now that I cannot mention them all. We have come along way over the past 5 years. There was none when I started Boagworld.

Although I cannot mention them all I will highlight the ones I personally listen to…

The Big Web Show

This relatively new show is fronted by Jeffrey Zeldman and is shaping up to the a good one. Most episodes run to about 50 minutes and consist of an informal discussion with various ‘web celebs’.

Think Vitamin Radio

Produced by the guys at Carsonified this show feels more like a glimpse behind the scenes of their business. Hosted by Ryan Carson, Keir Whitaker and Mike Kus it focuses mainly on web design news and lasts about 30 minutes.

Sitepoint

Recorded by various people from the Sitepoint.com community this show is essentially a round table discussion of web related topics and news. Shows tend to run at about one hour long and probably are the closest in style to Boagworld.

Spoolcast

Spoolcast is produced by Brian Christiansen and Jared Spool. This long running show focuses largely on usability and primarily seems to feature excerpts from various events run by User Interface Engineering. Because the show mainly consists of presentations most run for about 30-40 minutes.

There are also loads of video podcasts which are worth mentioning. However, video cannot replace audio when it comes to commuting, walking the dog or going to the gym. Bearing in mind we are looking to replace boagworld I will leave the video shows for another time.

But if we are looking for audio education we do not need to limit ourselves to podcasts.

Audiobooks

I have become a massive fan of audiobooks. Rarely do I have time to sit and read a book, but there are always opportunities to listen to one. Whether mowing the lawn, driving to work or even doing the ironing, audiobooks are a great way of making mundane tasks more interesting and educational.

Although there are not many web design related audiobooks, there are some related titles which will help broaden your knowledge. What follows are a random selection of my personal favourites…

Made to Stick

Why do some ideas thrive while others die? And how do we improve the chances of worthy ideas? In Made to Stick, accomplished educators and idea collectors Chip and Dan Heath tackle head-on these vexing questions.

A perfect book for website owners and web designers who are striving to make their websites more engaging and to communicate better with users.

Crush it!

Do you have a hobby you wish you could indulge in all day? An obsession that keeps you up at night? Now is the perfect time to take that passion and make a living doing what you love. In Crush It! Gary Vaynerchuk shows you how to use the power of the Internet to turn your real interests into real businesses.

Because Gary narrates this audiobook himself, it bristles with energy and enthusiasm. If you want a crash course in how to make the web work as a marketing and business tool then this is a great place to start.

Nudge

Thaler and Sunstein show that by knowing how people think, we can design choice environments that make it easier for people to choose what is best for themselves, their families, and their society.

This superb book is so applicable to us as web designers. It shows us how to guide users through a website by nudging them in the right direction. I have learnt so much from this book and it has changed the way I design and run websites.

The Tipping Point

Like the best social dynamics professor you never had, Malcolm Gladwell deconstructs a wide range of phenomena (from the reduction of crime in New York to the rise of Sesame Street) to deliver a fascinating understanding of how “social epidemics” spread.

All of Malcolm Gladwell’s books are well worth a read but the Tipping Point is the most appropriate to us as website owners and designers. If you are looking to build brand online or spread the word about a project you are working on, then The Tipping Point is a ‘must read’.

Conferences

Finally I wanted to mention conference talks. The majority of web design conferences now release audio versions of their presentations.

Although this is an amazing educational resources for any web designer or website owner, it does come with two inherent problems…

• It can often be hard to find out who is releasing what. This means it is easy to miss incredibly valuable and free content.
• A lot of these conferences stagger the release of their talks and fail to provide an RSS feed you can subscribe to in itunes or your podcatcher of choice.

Fortunately Jeremy Keith has solved these problems with his amazing Huffduffer app.

Huffduffer provides a bookmarklet that can be used on any page with an audio file. The bookmarklet grabs the audio and add it to your own custom RSS feed.

You can subscribe to this RSS feed in iTunes and hey presto you have your own custom podcast made up of any random audio you find on the web.

However even better is the fact that HuffDuffer recommends content. It shows the most popular content and content from those who share a similar interest. It truly is a superb application and perfect for tracking down and listening to conference material.

But don’t forget us

Of course, all of this is only a stop gap measure! We will be back with something new and exciting very soon. We just want to experiment with some ideas before we do.

Similar Posts:

• 10 ways to get more involved with Boagworld
• boagworld.com web feeds
• 200. A taste of the show
• What is podcasting?
• After 200 episodes is it time to change Boagworld?

Subscribe to Boagworld Bitesize

Paul: Joining me today is Chris Coyier. Good to have you on the show, Chris.

Chris: It’s good to be here. Long time listener, first time caller, as it were.

Paul: And vice versa. I’ve really enjoyed the stuff you put out, and it helps me pretend that I’m still a web designer when I’m not, really.

Chris: Thanks.

Paul: I think that’s a compliment. I’m not quite sure. You do some really cool stuff. But just in case people haven’t heard about you, tell us a little bit about yourself, your background, and the kind of stuff you’re up to.

Chris: Sure, my 2-second background is that I started out in print design after college, and then realized the web is where it’s at and what I wanted to get into. I ended up convincing a small design company to hire me. It was trial by fire, super-quick, better learn the web. About that same time, I’m like, I’m learning so much, maybe I’ll write it down and blog about it. That was the birth of CSS-Tricks. If anybody knows me, it’s generally because of that. It ended up over the years becoming more popular than my wildest dreams, as it were.

Paul: It’s amazingly popular, isn’t it? You have a huge following on Twitter, and you’ve got some brilliant content there. How did that come about? Just because you were trying to record what you were learning?

Chris: That’s how it started. What it evolved into… Well, maybe it’s not too far away from where it started. If there’s some web anything that’s particularly interesting to me at the time, I write about it. If I don’t have time to write about it, I make a list. Quite literally make a list, and then go back and write about it later. So, it’s very personal to me. It’s not really a group blog, it’s just my blog.

Paul: In some ways, it’s very similar to Boagworld, because that’s how we started…

Chris: Very similar.

Paul: It’s primarily me. Increasingly, there’s other people involved with it, but you have a forum, you have articles, you have screencasts. You’ve got some really cool stuff on there. You give away loads of freebie stuff, you’ve got snippets and things going on. It’s a real wealth of activity.

Chris: Yeah, I call it a web design community up top, because it incorporates forums. I’m proud of the comment threads that happen, because they’re usually above and beyond the intelligence level I find in other random blogs. I’m not naming any names. I don’t really care, but I have some smart people that write comments here. That’s fabulous.

Paul: It’s disturbing when your commenters are smarter than you are. That always upsets me.

Chris: (laughs) I like that part.

Paul: Okay, I just don’t like to be the thickey in the class. Sometimes you just need to accept it. The other thing that really strikes me about CSS-Tricks is that it’s not just about CSS, is it?

Chris: Oh, no. It’s quite unfortunately named, isn’t it? It’s been a long time, and I don’t know, maybe the right thing to do would be to start adjusting its branding. But then, it’s just throwing away so much branding work to rename a site like that. I just decided to not care. I make it clear that this is about the web, not about CSS. CSS is still my favorite language, but I don’t write exclusively about CSS. Once in a while, I get somebody who’s just… Just last week, I got a guy who was really quite mad at me for writing about things other than CSS. It was a JQuery article.

Paul: Well, that’s as good as CSS, pretty much, isn’t it? It couldn’t be much more like it.

Chris: It’s got selectors!

Paul: Exactly, that’s got to count, I think. So, how long has CSS-Tricks been going now?

Chris: I guess it’s third birthday would be the Fourth of July of this year. So it was 2007 when it started. Three years, which is not a long time compared to some of the other folks in the industry. Even you, probably, I’m sure.

Paul: Yeah. We’ve been going for a lot longer. It just shows how incredibly popular the site is. It’s grown so quickly in such a short length of time. That’s brilliant. So, after saying that CSS-Tricks isn’t all about CSS, I want to talk about CSS, if that’s alright.

Chris: (laughs) Yeah, absolutely. It’s my favorite.

Paul: Obviously, there’s been loads of talk at the moment about CSS3, and I’m really interested… You’re obviously a guy that really keeps up-to-date on what’s going on at the moment. What is it that excites you the most about the CSS3 specification, if you can get excited about specification?

Chris: Oh, you can!

Paul: Oh, okay! Perhaps you’ve got to be a certain type of person.

Chris: (laughs) A nerd? Is that what you’re saying?

Paul: I’m not making any comments at all. So what is it that excites you, then?

Chris: Oh, I guess the whole bucket. The big conversation is "Can I start using it now?" That’s the classic thing. And of course, the classic answer to that is "Yes, absolutely. Progressive enhancement and all that…" That should be echoed here, as long as we’re talking about it.

Paul: Absolutely.

Chris: Everybody is absolutely dead-on about that. And the quintessential example is that the corners are rounded in Webkit, but they’re square in IE. And who cares? That’s a really good example. There are all these things we can do to improve the look of our websites in that way.

Paul: It’s really funny, because I’m working on a site at the moment, and I’ve literally just today been explaining that to a client, that your rounded corners and drop-shadows aren’t going to appear in IE. And actually, they quite like that, because…

Chris: Do they?

Paul: Yes! The reason they like it is that they perceive the IE audience as being much more conservative and wanting something much simpler in this particular case. So they like the fact that you can give something a little bit more to those who have fancier browsers and keep it nice and simple for those who are still using IE. I think it’s quite an interesting perspective on it, really.

Chris: That’s pretty amazing for a client. You probably have spectacularly good clients.

Paul: He is a very good client, a very knowledgeable client. I like those.

Chris: Good. I’m interested in how you approached it. How did you sell it to this guy? Was it your amazingly good personality that pushed him that way?

Paul: (laughs) Yes, it’s my wonderful personality! That’s one of the advantages of blogging quite a lot. A lot of clients follow my blog, so they’ve learned about this stuff over time. They’ve wrapped their heads around progressive enhancement because of various articles, and so there wasn’t alot of selling to do. Basically, I showed him what it looks like in Safari and got all excited about that. Then I showed him that in IE, it’s going to look a bit simpler. In fact, I think I said it to him first, and he said "Oh, I need to see that." Then I showed him, and because it still looked neat and tidy and looked really nice still, he was fine with it. I only use CSS3 for those little extras, rather than the main stuff.

Chris: Well, there’s very little of it that isn’t just little extras, so that’s what’s kind of cool. When you talk CSS3, generally, it’s just extras. Animations and corners and transitions and all that.

Paul: Have you been doing much with the animations and transitions? I’ve done the corners and the drop-shadowey stuff and that kind of thing, but I haven’t done much with that kind of stuff, animations and transitions.

Chris: Just in that, I think I get it now. But not really, especially on a live site. No, I haven’t rolled anything out for a client. I’ve done enough that I’ve got this figured out. I can do a little nudge, and I can replicate some JQuery or JavaScript library-type of animations with it. But a couple of weeks ago, Andy Clark posted a link on Flickr of an example of what he’s going to be using for his new book that was killer. You resize the browser window, and it would 3D animate this cover of a book. It’s very hard for me to describe with words here, but I was jaw-dropped. I thought it’s about time for me to start looking into this.

Paul: It sounds really good. It’s interesting, isn’t it? If you’re going to be nerdy, as we said earlier, how much of this stuff actually should be in JavaScript rather than CSS? Is it not more behavior stuff than design? I don’t know.

Chris: I don’t think so at all. I think it’s design. When I think of JavaScript and behavior, I think of events, like clicks and double-clicks and stuff like that. That’s JavaScript territory. But if it’s something like rotating something, which is CSS3, that’s very much design to me, not behavior. There’s probably arguments either way, but I really feel like the transitions and the transforms are very much CSS territory. If we could keep that to CSS, that would be ideal.

Paul: I can see that. If you take that logic, then things like :hover in CSS properly should be in JavaScript instead. (laughs)

Chris: Yeah, that’s funny. That’s the one event you get in CSS. Maybe it should be. Oh god, I can’t imagine the outcry if CSS4 removes :hover.

Paul: It does make me a bit twitchy, this kind of animation. I’ve got images of flaming, rotating logos coming back into fashion.

Chris: (laughs) Yeah, certainly, especially because you can do things with transition and transform, like literally make an animation that repeats. You could quite literally make a flaming, infinitely rotating logo.

Paul: Like all these things, it’s what you do with it, more than actually…

Chris: Absolutely. Have you heard arguments from people that say, regarding fonts, (we could do ten podcasts just about that) "now we can use any web font!" And people arguing against that. And "can you imagine the terrible things designers are going to do with that?" That’s not an argument. Removing and imposing restrictions because it might be misused? It’s unacceptable.

Paul: I look back to the early days of desktop publishing when it came along, and it is true that when you first gave the ability to do desktop publishing to anybody and everybody, for a long time, the quality was appalling. There are still appalling examples out there, but it’s equally enabled designers to do incredible things. It’s just the same, isn’t it?

Chris: It really is just the same. All of a sudden, Photoshop has bevel and emboss, so now everything is beveled. It’s the same thing, sure. Same argument. We’ll probably have it again in a few years.

Paul: Yes. With these transitions, you mentioned you can do rotation. What other stuff can you do?

Chris: I guess there’s rotation and sizing, or scaling, I guess you would call it. Gosh, what else is there? I wish I had the specs sitting in front of me.

Paul: That’s always the way, isn’t it? I’ve asked you a question and you haven’t got the answer too instantly.

Chris: (laughs)

Paul: And you call yourself an expert, Chris? (laughs)

Chris: (laughs) No, I wouldn’t on this particular thing. You can declare a color, and then another color, and transform between those two colors. It does an incredibly good job at it too, you know? So, anything that you can think of that you would use the animate function in JQuery to do… You can animate the padding on this element from five pixels to ten pixels, and you can do this in CSS too now. Just declare the regular state as having a padding of five pixels, and the :hover state as having a padding of ten pixels. On the regular state, give it that CSS property of transition, and you can tell it to do a transition on the padding property. And it will do it. I think there’s some CSS properties that it works for, and some that it doesn’t. But quite a few that it does- margin, padding, color, size, scale, rotation.

Paul: That’s really exciting, some of the potential for that. It does always leave you this vague feeling that now I need to wrap my head around what I can do with that that isn’t gimmicky that’s actually cool to do.

Chris: Exactly.

Paul: What’s the kind of support for it, do you know?

Chris: That’s a good question. When I originally started thinking of these… Well, they’re all prefaced by these browser prefixes, so if you want to use it, it’s -webkit-transition and -webkit-transform. Mozilla has them too.

Paul: Oh that’s good.

Chris: They were out, and we were using them as examples when Firefox 3.5 was around, and I think 3.6 is out now, and it works better, so…

Paul: Really?

Chris: Firefox 3.6 brought along a lot of that stuff with it. I think there’s some stuff… I mean, Webkit is absolutely leading the pack. That’s no question. If you want to be playing around with this stuff, it’s all about Chrome and Safari.

Paul: That’s good stuff. That’s interesting if basically you’ve started to use things like rounded corners and drop-shadows, there’s no reason why you can’t be playing around with transitions too, which is good. Excellent. Let’s talk a little bit about how it’s very easy to get caught up in CSS3 and all the cool, new things that you can do. One of the things that really struck me from looking through your own site, CSS-Tricks, was how much you can actually do that’s really done with CSS2 and the kinds of things that are available to us right now, pretty much universally across most browsers. Is there stuff that particularly jumps out at you where you’ve seen sites and think they’re really using CSS in an original way there?

Chris: Yeah. The things I write about, the things that interest me the most, and probably to a wider audience, isn’t just the technology of CSS necessarily, because CSS is a pretty simple language, really. It’s nothing compared to pretty much any other web language you can write in. HTML is also very simple. It’s just a descriptive language, and when you compare that to something like PHP, it just blows my mind. It’s much more complicated. It’s more interesting what people do design-wise, and then get it done with CSS.

Paul: Yes, absolutely.

Chris: And that will never get old. That’s why blogging about web design and tutorial sites like mine really just has an unlimited amount of content that can be written. "Look at this cool site. This is what they did with CSS to make it happen." And that’s just ubiquitously interesting, I think.

Paul: Yes. That’s the thing that attracted me as I was looking through the site. The times where you’ve found something really cool, and then you’ve taken it apart and told us how it was done. I remember seeing one which was… I can’t remember the site. It’s a well-known site where you scroll down and there are robots in the background that change into zombies when you get to the bottom.

Chris: Oh yeah, that was so awesome. It’s that e-commerce site where they have all kinds of awesome stuff to buy.

Paul: I can’t remember.

Chris: Think Geek.

Paul: Think Geek! That was it. It’s such a nice effect, so well thought through. And like you say in your screencast where you talk through it, it’s not that difficult to do. It’s having the imagination to think of the things you can do.

Chris: It’s the idea.

Paul: Are there any other examples like that where you’ve thought "I love that. I wish I had thought of that?"

Chris: Oh sure. When you talk about dissecting someone else’s idea and presenting it, one time I did that was on the date display technique from learningjquery.com. Karl Swedberg. It’s really neat. The way the date looks is really nice on that site. The text is rotated ninety degrees. It’s clearly using a font that isn’t available. I wonder how they did that? It turns out that how they did it was using a single image, using a CSS sprite, which is a technique that’s been around forever and ever. What a simple technique, easily doable with just CSS2. And the idea of a sprite, if there are people listening who don’t know what it is, it’s a single graphic that has lots of little graphics within it. In the case of this date sprite, there was a number for one through thirty-one; and there was January through December; and there was one through twelve for the months. When it needs to display a date, it would show three little boxes on the website, and only show the little region of that large CSS sprite that had those months. So, dynamically, they could still output a date, but it had some programming stuff in the background that showed you just the little bits that you needed to display the date in that cool way. What a simple technique, and what a really cool end result.

Paul: Yes, brilliant. I’ve literally just found the blog post you’ve written about it. Yeah, you would presume that’s using some kind of rotate thing in CSS3, but it’s such a simple little way of doing it. Brilliant. Love it.

Chris: So, the day after that was published, Jonathan Snook wrote a follow-up article that showed exactly that. Yeah, that’s cool, but you can do that in CSS3. It’s a good example of where progressive enhancement can step in.

Paul: Absolutely. The other thing that I wanted to touch on is the fact that in CSS-Tricks, you talk a lot about JQuery as well. I take you’re a massive fan of JQuery.

Chris: Yes, that’s really all it is. When I was first learning JavaScript, I ended up getting a book on JQuery. I had heard a lot about it and heard that a lot of other designers liked it. I read Karl Swedberg’s book, Learning JQuery, pretty much on a plane. I was glued to it. I thought, "This is so cool, it uses CSS selectors." I just started writing and creating my own examples, so it was a pretty organic process of learning. I’m a front-end guy. I’m not much of a programmer, necessarily. Now that I’ve learned JQuery, it’s a little hard for me to… I don’t know much MooTools. I can’t write Prototype. I stick with what I know, so as it turns out, I just got back a few weeks ago from the JQuery conference. I got to meet some of the creators of JQuery and the guys on that team. It was just amazing.

Paul: You’ve just described yourself, you’re a front-end guy. Did you find JQuery easy to pick up?

Chris: Yes, that’s the real strength of it. That for one. I said this in talks before, it’s like choosing the guitar, because if you do a Google search for guitar chords on a certain song, you’ll get a million hits. But if you look up "banjo tab," you’ll get a lot fewer hits. It’s like that with JQuery and JQuery libraries. There’s just so much more out there for JQuery. The community is bigger. It’s easier to find support for it. It’s easier to find beginner tutorials for it. It’s a good choice that way. Also, maybe I’m a little biased, maybe not the best guy to ask about this thing, but it may be the best one, too. The brains behind it. And the continuing development is so strong that I have a good feeling that it’s the best one.

Paul: Yes, and it looks like it’s got a dedicated team really working to develop it long-term. It doesn’t look like it’s going away anytime soon. And from a designer’s point of view, it’s such a pleasure to work with. Because as we said earlier, it’s like using CSS. It’s beautiful.

Chris: It reads like the English language. Target a div with a class of thing and hide it. If you’ve never seen JavaScript in your life, but you did have a little bit of CSS knowledge, you could read that sentence and see that clearly they’re hiding that div. There’s no doubt about it.

Paul: It’s great as well for picking up on other people’s code. If you work as a team, which obviously we do at Headscape, so that works well.

Chris: You guys use it at Headscape?

Paul: Oh yes. We use it all the time. It’s quick as well, is the other thing I love about it. You can turn stuff around so quickly with it, in comparison to writing JavaScript from the ground up. There’s very little reason not to. I do think it’s good to have an understanding of, a good grasp on JavaScript before you start relying on something like JQuery, but you know…

Chris: That’s a whole conversation to itself.

Paul: That would start a good, old argument. We had Dustin Diaz on the podcast recently, who is now working at Twitter, and he…

Chris: Oh really? Is he?

Paul: Yes, and he was brewing JQuery, but I think mainly, simply because of the size and scale they’ve reached, it’s not a problem I think most of us will ever have.

Chris: Really? Is that one released yet? I guess…

Paul: It will be by the time this one goes out. It’s going out next week, as of the time we’re recording this. It’s very confusing, isn’t it?

Chris: I look forward to it. It’s very rare that you hear someone on any other side of JQuery other than gushing…

Paul: He’s not… He’s very pragmatic about it, I think he quite likes JQuery, and he’s not criticizing it. He’s just saying that it’s reached its limitations for them, which is entirely understandable, I guess.

Chris: Absolutely.

Paul: Talking of controversial subjects, I want to pick your brain over this subject of Flash versus CSS and HTML. Increasingly, there are people saying that you don’t really need Flash much these days. CSS and HTML can do most of the stuff you want to do, especially now with HTML5, native video support and that kind of thing. What’s your take on Flash? As a front-end designer, is it technology you use very much? Do you think it’s going away? What’s your opinion?

Chris: It’s just another huge bag of monkeys.

Paul: (laughs) That’s why I brought it up!

Chris: I think there’s big ad agencies out there… My roommate works at an ad agency, and Sprint is one of their clients. A huge, huge client here in the States to have. They have a whole team of Flash developers. They’re really good at Flash. They make Flash-based sites, and it’s not unusual. There are a lot of people out there who are really good at Flash, that’s what their training was in, and they’re going to keep writing Flash. It has such a huge… It’s on something like 98% of browsers. It’s going to be around for a long time. However, with all this controversy and stuff happening right now and how it’s not available on the iPad or iPhone… According to Steve Jobs’ comments, it’s not going to be any time soon. If you’re brand new or going to school or maybe just learning on the side, development, specifically mobile device development, are you going to pick Flash today? Probably not. That’s my opinion on it. As they get older and better and start entering the workforce, they’re not going to be using Flash. They’re going to be using these new technologies, hence the long death of Flash.

Paul: So you do think there will be a long death of it. You don’t think that this is a blip we’re seeing at the moment?

Chris: No, I think long, as in long, long. Five years. Ten years. I agree, though. I’m on the anti-Flash side, to be clear. I guess I didn’t sound pro-Flash, but…

Paul: If you run a website called CSS-Tricks, we’re going to presume that you’re not very excited about Flash.

Chris: And one of the reasons is that I just don’t know it, so I don’t write about it.

Paul: Did you ever know it? Was it a technology you used to use back in the day?

Chris: I did. In college, actually, it’s almost all we did. Pretty much when I got my degree, which is a Bachelor of Arts in Multimedia Communications, that’s all we did. We used Macromedia Flash, it was at the time, and we also used Director, which is like Flash, also frame-based. But I was never particularly good at it. You get your degree in it, and you made three sites that were for fake clients and ultimately garbage. It’s not like I ever really embraced the Flash thing.

Paul: It’s a sad reflection that when I was at university, they didn’t have multimedia courses, because there was no such thing as multimedia. (laughs)

Chris: (laughs) What about Headscape? Do you guys touch it in any way?

Paul: Yes, we do use it occasionally, mainly for video-related stuff. We’ve used it for some mapping stuff in the past, which is quite specific kinds of things that don’t work well with Google maps or the clients have specific requirements that are outside of using Google’s license. But no, we don’t use it heavily. We’ve got one guy who knows his way around it pretty well. We keep him with it, is the best way of putting it. I, on the other hand, haven’t got a flipping clue. I gave up at ActionScript 1, as soon as you could stop dragging things around, I lost interest.

Chris: Absolutely. And I feel like the tools available for Flash are still way, way stronger, to sit there and make a frame-based animation of stuff flying around is something cool. At least I don’t know about them yet, a program on your computer you can fire up and create something like that and have the output be HTML5 and JavaScript with canvas. I just don’t think those tools are around yet.

Paul: No. So, just to wrap this up as we come to the end, I’m quite interested in you, really, and your career and CSS-Tricks. How do you see that? You said it started off as very much a way of documenting your thoughts, but obviously it’s grown to be a lot more than that. Is it a personal brand tool for you? Is it a winning-work tool? How do you use it? You must sink a huge number of hours into it.

Chris: Yes, it’s maybe less than you might think. I get emails from people saying "how do you possibly manage your time and do all the stuff that you do?" I don’t have any crazy "I use Getting Things Done." I don’t have any super secrets to it. I just work on stuff. And once the site is designed, I fire up WordPress. It’s a WordPress site, of course, and I type a little article, hit publish, and it’s not an all-consuming, ten hours a day thing. I probably do spend a couple of hours, because there are things that need to be done, like approving comments and keeping spam off the forums and stuff like that. But it’s not all-consuming. I keep a full-time job. I’m leaving this job now, so the past three years, like I said, the place where I started. I started CSS-Tricks while I was starting this new job. I’ve been there for a long time. It’s been a great job, but since CSS-Tricks has done well, and since I put out a book about WordPress and that did pretty well, I’ve just been blessed in that way of having projects I’ve done go well. I think I’m going to move on from this job and do my own thing for a little while and let CSS-Tricks support me. That was my plan, to maybe at least take the summer off and bum around. I was looking forward to that. I was approached by Wufoo.com. I told you a little about it before we started here. I might mention that. I’ve been a huge fan of Wufoo. If people don’t know it, it’s an online form-builder, making forms, from simple to extremely complicated and what would take a long time to code. I’ve been a big fan of them for a long time, and anybody who comes to me saying "I’m trying to use a form and need help," I just say to use Wufoo, please. It’s saved me an unbelievable amount of time. I think they were aware that I had become an evangelist for them, in a way, and I got to know them after meeting them at a few conferences. They offered me a job, and I accepted it. I’ll be starting at Wufoo, so that’s going to be a big change in my career that I’m very much looking forward to.

Paul: That’s really interesting. You basically tried to go to a kind of freelance or use CSS-Tricks more as a money-earner for you, and you got snatched up before you had the chance to get going in it.

Chris: Yep, that’s how it was. I was all prepared to say no to jobs. I was going to publicly say that I’m going on my own. I’m not a fan of freelance. I’m not built for that.

Paul: That’s interesting. Why not?

Chris: I find it very stressful, to be honest. I find dealing directly with clients, the emails at all hours, the responsibility of billing and all that stuff to be more than my little head can handle. It’s much easier writing a little article and hitting publish and making no promises.

Paul: The plan was to make money off the back of CSS-Tricks, then.

Chris: And maybe to do another book in my spare time.

Paul: That makes sense. Well, it will be interesting to see what happens then. Wufoo.

Chris: Yeah, I don’t know yet. We’ve talked a little bit. I don’t start until June 8th, but I couldn’t be more excited. They’re such great guys, and the job seems so great.

Paul: Excellent! Well it’s really good to talk to you, Chris! We haven’t had a chance to catch up in the past, and I was keen to get you on the show. Obviously, you’re producing some excellent work out there and sharing stuff that’s really useful to people. I wanted a chance to introduce you to the Boagworld audience. They can go and check out what you’re doing.

Chris: I couldn’t be more honored to be on the show. Like I said, we’ve been fans of each other, I guess, for a while.

Paul: Mutual appreciation. That’s always the way to go.

Chris: Thanks for having me.

Paul: Check out Chris at css-tricks.com, and hopefully we will get you back on the show in the future, Chris, maybe about something more specific next time around. Thanks for coming on!

Chris: Okay.

Thanks goes to Traci Brigham for transcribing this interview.

Subscribe to Boagworld Bitesize

Similar Posts:

• 216. Thanks for all the fish
• ClickTale launches real time monitoring
• Chris Lea on hosting and customer support
• Podcast 39: Mature Flash
• 213. Getting all emotional

Subscribe to Boagworld Bitesize

Boagworld Podcast takes a break

The biggest news of the week (at least if you are listening to this… maybe) is that this will be the last Boagworld Podcast in its present format.

As I announced this week on the Boagworld blog we are taking a 6 month break from podcasting before returning with a new show and a new format.

To be honest at this stage we are not quite sure what that will be. That is why we wanted to take 6 months off to experiment with new formats and different material.

Between now and the end of the year we will still be putting out just as much content as we are now, but in a variety of different formats as we experiment with where to take Boagworld.

In fact we are starting these experimentations with a niche Webinar that we will be holding on the 21st July. If you work as part on an in-house web team then you maybe interested in joining us for a free interactive session where we talk about battling bureaucracy and ensuring the website gets the attention it deserves. To register your place email me on paul@boagworld.com. Remember to secure a place you need to be a permanent member of a web team in a large(ish) corporate or public sector organisation.

This will no doubt be just the first of more niche content that addresses the different needs of different members of the web community.

ShopArtGallery, Shutterstock

Design Better And Faster With Rapid Prototyping

If you have watched my presentation about Pain Free Design Signoff you will know I am a great believer in working collaboratively with our clients and showing them everything from initial sketches to final comps.

However considering the looks I get from some other web designers when I suggest such a hands on role for the client, I was beginning to wonder if I was alone in this view.

Fortunately an article entitled “Design Better And Faster With Rapid Prototyping” on Smashing Magazine has reassured me otherwise.

When talking about engaging all stakeholders in the design and prototyping process the author writes…

Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.

He goes on to say…

Rapid prototyping helps teams experiment with multiple approaches and ideas, it facilitates discussion through visuals instead of words, it ensures that everyone shares a common understanding, and it reduces risk and avoids missed requirements, leading to a better design faster.

I couldn’t agree more!

The post goes on to look at how best to use prototyping and client interaction in the design process. In particular it looks at the fidelity of your prototypes in terms of design, functionality and content.

He also provides a great list of do’s and don’ts that includes my favourite line in the post…

Do work collaboratively with users, business and IT stakeholders while rapid prototyping. Apart from giving valuable feedback, they also gain a sense of ownership of the final product.

This is a great article and definitely worth reading.

Using Stories for Design Ideas

Prototyping is a great way for discussing possible solutions. However, often there is a need to communicate and discuss the underlying problem first.

Before we can agree that a new feature is required, we first need to agree what problem it is solving. To do that we need to understand what the user wants.

User testing can partly help, however it doesn’t really focus on understanding the users ‘story’ or their motivation.

An article on Johnny Holland Magazine talks about how stories can guide our design process and inform what we do on our websites.

This is a new concept for me and one I am still wrapping my head around. However, as I understand it the idea is to take the problems we believe users are experiencing and weave them into a ‘story.’ This story that not only identifies the problem but also how the user feels and behaves.

Once you have the story it becomes easier to rewrite with a ‘happy ending.’ An ending where your website solves the user’s problem.

It’s a hard concept to explain so I recommend checking out the post. It contains lots of examples of how to turn a basic problem into a story and then how to use that story to generate a solution.

In essence it is an alternative to brainstorming that is ideal for the collaborative approach I have been talking about. This is because everybody is working from the same stories and so understands the problem that needs solving and the proposed solution.

An example of user centric thinking

While on the subject of understanding the users thinking, I want to conclude with an example and how it can solve very real problems.

The problem I want to look at is checkout abandonment. More and more people are abandoning the checkout process when purchasing from an ecommerce site. Of those users a whopping 29% are giving up because they are forced to register. That is second only to hidden charges being applied at checkout.

Sam Aronov, Shutterstock

In order to solve this problem you need to understand how users think. Why do they hate registering so much?

According to econsultancy the reasons are as follows…

• Completing my purchase will take much longer than if I didn’t register.
• I will need to provide lots more personal information.
• I will start getting spammed with offers and promotions.
• The retailer will pass my personal details on to third parties, who will also start spamming me.
• Why do they need me to register? All I want to do is buy this one thing.

After reading that list you can understand the users point of view. The question then arises – why not remove registration entirely? As econsultancy points out, there are a lot of benefits for both the customer and retailer in registering. It’s just that the user cannot see that.

The real genius of the econsultancy post is what it does next. After identifying the feelings of both customer and retailers the post focuses on the crux of the problem…

The ironic thing about the whole ‘encourage customers register’ challenge is that when you break it all down, all new customers should be required to simply complete is one additional field – the create password field.

By understanding the users objections on a granular level you discover quite how small a problem is how obvious the solution.

Instead of asking the user to register up front you move the password creation field to the end of the checkout accompanied by the question “Would you like to save your details for next time?”

Actually I think it could be made even more compelling by asking “Would you like to save time when you next purchase?”

By understanding that while purchasing the user is focused on the buying process rather than registration, it becomes much easier to find the right solution.

This is user centric thinking in action.

Similar Posts:

• 5 common ecommerce mistakes
• Web Design News 17/05/10
• The checkout blues
• Why speculative design is wrong
• ForeUI: Create Skinnable & Interactive Prototype

Download this show.

Launch our podcast player

Web Design News

This week: We look at emerging trends coming from Web Direction @Media including microcopy, HTML5 and CSS3 and inclusive design

Read the web design news

Playful design

While at Web Direction @Media I caught up with Aral Balkan and Christian Crumlish to discuss playful design and whether it is appropriate to add elements of playfulness and humour to any website.

Read ‘Playful design’

Death to design by committee

We all know that design by committee leads to horrendous design and yet committees happen anyway. In this post I ask why, layout the argument against them and look at ways to overcome the problem.

Read ‘Death to design by committee’

Similar Posts:

• Playful design
• Web Design News 15/06/10
• My Sledge Hammer List
• Podcast 39: Mature Flash
• Web Design News 17/05/10

Subscribe to Boagworld Bitesize

“Wow that looks great, let me just show it to a few colleagues before I sign it off.”

At first glance the above statement looks positive. However if you have worked on websites for any length of time you know it is the kiss of death.

Even if there is no formal committee, any web designer and most website owners will tell you that once a design is ’shown around’ only bad things can happen.

olly, Shutterstock

The problem is two fold.

First, design is subjective, what one person thinks is amazing another hates. Unfortunately website owners often feel they need to please everybody.

However, once design becomes a group decision you inevitably end up with a bland design that nobody hates but nobody likes either. It is not so much design by committee as design by compromise.

Second, stakeholders rarely have all the facts to make an informed design decision. They don’t know the projects history or understand the target audience, business objectives and success criteria. Even if they do have these insights they rarely have an understanding of why the designer took the approach she did. Nine times out of ten the person is simply shown the design and asked “what do you think?”

With design by committee so flawed and the results so substandard why does it still happen?

Why design by committee exists

Although to those of us who have experienced design by committee the drawbacks seem obviously, to a first timer it can appear necessary and even appealing.

Some of the common reasons for design by committee include…

• The website owner is not the decision maker - Instead he is a project manager who has to get approval from higher in the organisation. This is a particular problem on larger websites.
• The website owner feels out of his depth – Many website owners have never run a website or made decisions about design. They therefore feel the need to get the advice and opinions of others to reassure themselves about their decision.
• Because design is subjective – The very reason designers argue against design by committee is also a reason for it. If design is subjective how can the website owner be expected to make a design decision alone? Surely they need to consult others to get a wider opinion than their own personal tastes?
• It shares the responsibility - In many organisations there is a culture of blame and ‘arse covering’. This inevitably leads to website owners being reluctant to make decisions alone. They know that if they consult widely then it is harder for them to be blamed when things go wrong.
• It is politically necessary – Many website owners know that committees are bad for the design process. However, they are left with little choice if they want a design to be approved. Without consulting internal stakeholders the design is likely to get blocked on principle, whether or not it is a good design.

corepics, Shutterstock

When you look at design by committee from a certain point of view you can understand why some take this approach. However, there are things that can be done to overcome these arguments, while at the same time combatting the problems design by committee creates.

How to overcome design by committee

Once you understand the reasons behind design by committee there is actually a number of alternative approaches.

Separate the problems

Design feedback normally falls into two categories – aesthetic and structural. If a design is going to be rejected it is because somebody doesn’t ‘like the feel’ or there is an argument over who gets what featured in the navigation or on the homepage.

The danger is that an entire design will be rejected on the basis of a content dispute or because somebody doesn’t like the blue. This is throwing the baby out with the bathwater.

Avoid this by making sure the stakeholder doesn’t just see the final design. Instead present mood boards and wireframes.

The mood board focuses on aesthetics while the wireframe looks only at the structure and information to be included.

This has two advantages. First, it allows the stakeholders to separate in their minds decisions about aesthetics and content. This prevents entire designs being rejected because of minor issues.

Second, producing mood boards and wireframes is considerably quicker than final designs. This means that even if an element of the design is rejected it does not require major rework.

Divide and conquer

Another tactic for overcoming design by committee is speaking to stakeholders individually rather than in a group. Although this is best done in person, it can also be done over the phone if necessary.

corepics, Shutterstock

Although individual discussions takes more effort the benefits are enormous….

• It prevents design on the fly – When a group of people discuss design they try to reach a consensus. This means that they make design changes in the room and you loose control. By speaking to people individually you prevent this problem.
• It neutralises the ‘alpha male’ characters – In group meetings you will always find somebody who dominates the conversation (not always a man!) They overwhelm quieter members and bounce people into agreeing with their standpoint. By consulting with people individually you avoid them having too great an influence.
• It puts you in control – By speaking to stakeholders individually you are the only person who knows what has been said. This puts you in a powerful position that allows you to pick and choose the feedback you use.

Of course any feedback is bad feedback if the stakeholder doesn’t understand the context of the project.

Ensure opinions are informed

Some stakeholders argue that they do not need background information on a design in order to judge it. They say that users don’t have that background, so why should they? The answer is simple, they are not users.

A stakeholder needs to judge the design from a business perspective as much as that of a user. They need to understand the business objectives, they need to know about corporate guidelines and what the competition is doing. In short they need to understand the context in which the design was created.

However, in many cases the stakeholder is simply given the design and asked “what do you think?”

The obvious solution is to provide the background to each stakeholder before asking for feedback. However if we are avoiding group meetings then presenting to each stakeholder is time consuming and repetitive.

Also even if you do present to each stakeholder there is nothing to stop that person passing the design to others for their feedback without your knowledge or presentation.

One way to avoid this problem is by providing the design as part of a presentation either in powerpoint, PDF or an application like Get Signoff.

Unfortunately people will not always read the copy associated with a design. Therefore an even better approach is to record a video of the design with an audio track explaining your approach. This is hard to ignore and ensures the design will never be seen out of context.

The problem does not just lie in controlling the presentation, it is also important to control the feedback.

Control the feedback

If you ask stakeholders “what do you think?” you are encouraging a personal response. This is actually not the feedback you are seeking.

Ljupco Smokovski, Shutterstock

Instead ask questions that focus the stakeholder on the real issues…

• Does it meet the agreed business objectives?
• Do you feel the target audience will respond favourably to the design?

It is also worth focusing the client on factors that informed the design…

• Is the design inline with your corporate branding?
• Is the design what you expected based on the approved mood board?
• Does the design reflect the agreed visual hierarchy agreed in the wireframes?

Notice that the above questions all require a simple yes or no answer. This prevents the feedback straying into personal opinion. However, it is also a little restrictive so we always ask “if not, why not?” after each question.

Asking “why not” achieves two things. First it forces the stakeholder to better articulate the problem and ensure there is a valid, well reasoned argument behind their statement. Second, it opens a discussion that a simple yes/no answer prevents.

Unfortunately no matter how well presented a design, there will be times when people cannot agree. In such situations testing can break the deadlock.

Turn to testing

Ultimately any amount of stakeholder feedback has a limited use. The stakeholder is not the user and it is the user that the design must appeal to. That is why whenever possible a design should be tested with real users too.

Design testing can be an effective way of breaking deadlocks between stakeholders. By asking users to comment on design you effectively render the personal opinions of stakeholders redundant. Best of all design testing can be done cheaply and easily using services like Ethnio and What Users Do.

Finally it is worth reminding stakeholders that no design decision is set in stone. Often the best way to evaluate design is by putting it live and seeing what happens. Things can always be changed later.

For larger sites (where the stakes are higher) A/B testing should be making many of the design decisions anyway. Ultimately testing is always going to be more effective than the opinions of stakeholders.

Conclusions

It is important to note that at no stage in this post have I tried to exclude stakeholders from the design process. I believe that design is a collaborative process and not something that springs spontaneously from the creative mind of a designer.

What I have tried to communicate is that although the contribution of stakeholders are valuable they have to be informed and shaped into something that is actually of use to the designer. Comments like “I don’t like the green” doesn’t help anyone.

Similar Posts:

• Combating design by committee
• Hold stakeholder interviews now or pay later
• 10 ways to Battle Site Bureaucracy
• Pain free design sign off
• Design Testing

Subscribe to Boagworld Bitesize

Image Source: Davo39

Paul: Actually you’ve got to clap again because we’ve got two guests coming up.

Relly: Yay!

Paul: We’ve got Aral Balkan, come on up Aral.

Marcus: Come on down!

Paul: Come on down. You have to walk along way….oh

Marcus: There are steps.

Relly: He’s got the legs

Paul: Oh wow look that, look at that leap to the stage!

Relly: Wow look at that. That’s enthusiam!

Aral: Where shall I sit?

Paul: You can sit there that’s fine. And we’ve also got Christian Crumlish, come up as well. Come and join us.

Christian: It’s bright here.

Paul: Just relax, relax.

Relly: Tonight’s winner..

Paul: You don’t need to get right on the mic.

Christian: No?

Relly: Do you feel a little like Parkinson now?

Christian: Aaaaaaah

Paul: No. Just relax, relax back and it’s all good.

Marcus: Yeah, just point it slightly towards you.

Relly: Yeah, slightly towards you and it’s good.

Marcus: Ok that’s it, there we go.

Christian: There we go.

Paul: So, we’ve got…So, Aral, later today you’re giving a talk, which is ‘The Art of Emotional Design’.

Aral: Yes.

Paul: Which is a superb talk and I enjoyed very much the last time I heard it. Is it completely re-written for today’s new audience or are you re-using your entire…..

Aral: Entirely within the last two weeks.

Paul: Yeah, yeah I believe you.

Aral: Err, no.

Paul: (laughs). And Christian you’re talking about ‘Designing for Play’.

Christian: I already have done.

Relly: Yeah, that was yesterday.

Paul: Oh was that yesterday?

Christian: Yep you missed it.

Paul: Oh no! I can’t believe that, I thought it was today. I’m gutted now.

Relly: How did it go?

Paul: Did it go well?

Christian: You have to ask…everybody else.

Paul: Did it go well? Was it good?

Relly: How did it go?

Christian: It went well for me.

Paul: Oh thumbs up.

Relly: Yay, thumbs up.

Paul: Whoo, well that’s good. Right. So what I thought we’d do in a few minutes is talk about his idea, cos both of you’re talks are meshed together, you know. They’re not the same talk but they overlap between them. And this idea of ‘Emotional Design’ and ‘Playful Design’ is something that seems to be really reoccurring a lot recently. A couple of weeks ago we had an interview with Steven Anderson on the show, we talked about emotional design. Last week it seemed to come up, there were three articles in one week about emotional design and then we come here again and it’s all about emotional design, playful design, all of that kind of stuff. So, I’m interested in why both of you have chosen that subject. Why that has become your passion. So, let’s start with you Christian. Why ‘Playful Design’?

Christian: Well the umm…I guess the idea grew out of the work I was doing my broadly in the area of social web design. I was curating the Yahoo website design pattern library and we spent some time focusing on the idea of social design patterns to try and generalise the things there were showing up over and over again at many sites, and kind of cataloging them, so that other people can kind of learn from, you know, past experience. And as I got more and more into that I realised that designing for social interaction is quite different from sort of classic UI design. Where if you think about when you say UI, that’s User Interface, it sort of implies a single person operating, kind of a device that gives them their own personal information back. You know they open up their files or they check their mail or they look at their checking…cheque book account or that sort of thing. And that social interaction inherently implies a multiplicity of people. Using the tools, not so much so talk to the computer but to each other through the technology. The technology at best kind of gets out of the way, in fact, which fosters that communication. So when you’re designing…umm……now I would never say that UI design is easy, cos there’s so many ways to do it poorly, and there’s many skills involved in doing it well and yet it’s a fairly well constrained and controlled environment, often, you can say there’s branching choices down the paths that you make but ultimately many users are going to have essentially the same experience. Whereas when you design for a social experience you have to give up much more control, you have to grant that the users…..collaboratively are going to create their own experience. And at best you’ve kind of set up the boundaries, open up a space for them, give them some guidance, you know some helpful things but at some point it’s like inviting people over for a party. You know the party lives and dies by the guests, you know, not by the h’orderves or something like that. So that thinking led to this metaphor of play and ways that we can borrow from the real world and that how you can foster that kind of social interaction. You know, like how it’s been done in the past throughout civilisation and I found the concept of play useful because it cuts across everything from sort of unstructured, child’s play, you know, playground play, what makes things fun to gain play and I think actually the idea of borrowing from game design is not fresh, I mean a lot of people have been talking about that but I wanted to be sort of systematic and say “Well what distinguishes a game from just loose play?” Games have rules, games have goals, games have some of dynamics and how can you borrow those ideas to bring it in to fostering social experiences.

Then I also wanted to take it further into the playing of music and how are instruments designed to be on one level challenging and hard to learn but on the other hand to help you play, to support what you’re doing and to make your mistakes sound good and things like that.

Paul: Hmm, yeah I can see that. And what about your Aral? I mean you started….it’s been a little while now that you’ve been talking about this idea emotional design. Where did you passion for that come from?

Aral: Well, I think mostly from being disenchanted with the experiences that I’ve had with, you know, certain…..whether it’s websites or applications or….I mean I get frustrated very easily when I’m using things. If you think about the amount of your day that you spend interacting with, basically non-human experiences. Whether it’s a vending machine or whether it’s your cellphone. It’s increasing taking up a larger amount of our days. So, if we’re having bad user experiences, it’s not……I mean user, in fact, is almost redundant, you know user experience….it’s affecting our experiences, our life experiences, so I think as someone who creates applications and creates experiences I was very aware of that. And these things frustrate me so I don’t want to create the same frustrating experiences, I want to create the kind experiences that are fun and that kind of lift up your day, that give you a little boost. You know cos seriously what we’re talking about is that stuff that we’re creating affects the welfare of people, you know, we’ve got to move on beyond user experience and thinking about his as experienced design. We’re actually designing experiences that affect how happy people are on a daily basis and I think that’s where we need to move beyond just thinking about usability, which is a base that we need to reach. We need to reach that and until we’ve reached usability, until an app is usable we can’t talk about anything else. But once we’ve reached that I think it’s now time to talk about how we can build things that are delightful, pleasurable and fun, that improve peoples’ days, that improve their lives. That’s why I’m passionate about this.

Paul: Yeah, you really are, I can tell. (laughs)

Aral: At 7am in the morning.

Marcus: If you didn’t have any bad experiences though, there would be nothing to tweet about.

Paul: No. I mean that’s 90 percent of Twitter isn’t it, is moaning about…..

Aral: And moaning is good if you’re not……But if you’re not frustrated at things, if you don’t have issues with things then you won’t change them, you won’t…..you know, and I mean I think designers are unhappy with certain things and want to improve them and change them. Or else why would you, you’d be happy with the status quo and you’ll be like things are okay. And I think some of the best designers are some of the angriest people I know. If that makes sense.

Relly: My husband would desperately come under that.

Christian: (laughs). He’s not an angry man.

Relly: He is when you present him with a bad user experience.

Christian: Exactly but you’ve got to use that and kind of go okay now how can I make this better.

Paul: You know I don’t like to boast but I would say that I think Headscape has produced the most emotional powerful design ever. Marcus do you wanna share….

Marcus: What?!

Paul: No, no, you were the one that discovered it. Do you wanna share your experience about testing for a certain pet charity website? Where you got the best emotion response ever from someone?

Marcus: Well we didn’t…….the very first test was for design testing. She didn’t make it through the test, the whole of the assessment.

Paul: She didn’t make through ten minutes.

Marcus: It wasn’t even that, no, she left in floods of tears.

Paul: So we made someone cry with our design. That’s how good we are.

Aral: What did you do?

Relly: They drew a picture of a flogged puppy I think.

Paul: So basically this was for a pet charity website and the first woman that came in for the design test session…

Christian: Do pets give a lot of money to charity?

Paul: Yes, apparently yeah. …..So we brought the design up on the screen and this woman took one look at it, burst into tears. And it was because the dog on the screen reminded her of her dead pet. So she cried. And that was it.

Marcus: She could not get past it. She tried. And I thought “Is this how it’s going to be for the rest of the day?” It was for the rest of them, it was kind of a good day but I was very concerned.

Aral: For the record that’s not what I talk about emotional design. It’s not how to make users cry.

Marcus: I want to go back to what Christian said about…..cos I’m a musician….about comparing design to musical instruments. Is that what you’re saying there……cos obviously to master a musical instrument takes a lot of time but it’s an incredible pleasurable thing once you’ve mastered it. Are you saying that good design, or potentially good design in certain circumstances is something you need to learn? And that it will be more enjoyable because of it?

Christian: No. It’s a good question and I think I need to be clear about sort of what level I’m applying the metaphor to. What I’m saying is that………also what I’m talking about is the concept of generative interfaces in which users then co-create something. So, often instead of giving people a finished, completed….what you’re giving them is tools that they then can use to express themselves, you know. And, so I’d say I sort of think of it of a spectrum, where the loose, unstructured, easy play is the simplest thing to enter into but maybe something that ultimately doesn’t allow you to fully express yourself. And then the game like structures give people more facility, more structure, more of a context in which to interact with each other and have experiences and then giving people sort of instruments. So the instrument metaphor is for the user more than for the designer. Then there’s the spectrum of are you giving them a toy piano, a ukelele, a very easy to learn, easy to start with instrument that maybe eventually is going to top out not allow them to play Bach or something like that. Or you giving them a harpsichord, or you giving them an electric-guitar with a rig or something like that. And maybe you can give them a scale of tools so that your super users can be, you know, really rocking out, inventing things you never thought of inside the context that you’re building. I’m still toying with this metaphor, wherein I’ve gotten some push back for exactly the reason that instruments……musical instruments are sort of famously ‘hard to learn’. You know there’s that idea that it’s a big hurdle to get over and it’s discouraging for a lot of people, especially if they don’t start as a child. It was partly my own experience playing the ukelele and learning that 1) some instruments are easier than others, so you can sort of give others an ‘on ramp’, a simpler thing to do, that delights them and draws them in further and further and also more generally as I was kind of making friends with my first ukelele, one thing I realised was that the instrument isn’t fighting you all the time. The instrument has been designed, over millennia sometimes, to actually fit a human hand, to tend to sound good if you just stay reasonably within certain boundaries. You know it’s tombed so that accidentals come in sometimes and help you out. And that’s actually one of my key points is to make it so that when a user makes a mistake, it might sometimes have a beneficial effect rather than giving them an error and throwing them out.

Marcus: That’s something that I’ve never thought of before. I really like that analogy. It’s why guitarist complain about playing stuff in E-flat and stuff like that cos your accidentals never work.

Christian: Exactly, and the horn players don’t want everything to be in G or E minor and things like that.

Paul: I’ve no idea what you’re talking about. This is all beyond my head.

Aral do you think that there are times where this is all in danger of becoming gimmicky? Do you know what I mean? That….you know….

Aral: With the show?

Paul: (laughs)

Relly: Oh that happened a long time ago.

Paul: That was ages ago.

Marcus: I was going to say, the whole premise is….

Relly: …..a rolling gimmick.

Paul: You know with the idea of playfulness and emotional design and all this kind of thing. You know I look at some of the great examples and the one that springs to mind is Mail chimp, right? Everyone goes on about Mail chimp being emotional design, things about it that make your smile.

Aral: And Aaron’s amazing.

Relly: That’s true, he is.

Paul: Yes, and absolutely, it’s great but you know……and they should the example of when they pull out the browser window and eventually the monkey’s arm snaps off, which is just so cool. But it’s equally…..it’s borderline gimmicky as well. Do you think there’s a danger of that?

Aral: Yeah, of course there is. I mean you know………you shouldn’t be recreating Clippy in what you’re doing, is the key thing here.

Relly: That’s a rule for life, I think.

Aral: Yeah, exactly. I mean when I build an application I’m quite aware that I’m putting my character and an aspect of myself into it. So, for example I have an app where they are little emotie blobs, these cute little things that look like marshmallows, that you know, kind of guide you along but they’re not Clippy, they’re kind of……..I’m aware that it’s an aspect of my character that’s in there and it’s been designed with that in mind. Um, Clippy….you know, why doesn’t Clippy work then? Clippy’s suppose to be in there and helping you out and something that you can relate to, right but who’s character is it? It’s Microsoft right? It’s Microsoft’s character that is in Clippy. Whenever I look at Clippy, I see Steve Balmer in paperclip form, you know, staring back and me and it’s like ‘Hey how you doing?’

Relly: I think I prefer that actually, Steve Balmer in paperclip form.

Christian: I could go for that. Yeah, I think these things, I think any of these things can become gimmicky if they become formulaic and if it’s just imitation of an idea without necessarily understanding why it was there in the first place. You see that kind of cloning of other people’s ideas all over the web, all the time.

Aral: There’s something to be said about authenticity and I think that’s the thing. You’re communicating, the things that we built communicate with people and just like humans can be authentic or not the experiences you’re creating can be authentic or not and I think it’s key to be authentic and crafting these experiences.

Christian: Also I think when you say human, I think that’s an important point. I think part of the trend, Paul, that you sort of……and picking up on that a number of different people seem to be approaching these ideas from similar directions, I think, is in the sense that interfaces in the technology are becoming more human or opening up more spaces, or the need to or they are. But you know, computer science and the history of it has been training human beings to learn codes and to do things in a very rigid way and once you become an expert of that you sort of become protective of that idea. It’s like a guild that you’re in and it gives you an advantage and why make it easier for grandma to do it or something like that But think that…..for instance Chris Fahey has been giving a good talk on how interfaces are becoming more human and having faces and having personalities and having conversational qualities and things like that. Um, which turns out to work much better because our minds have evolved from talking to human beings not from entering codes into teletype machines or something like that. So, I think there is a gimmicky aspect to it that can reduce to that but think the more broad direction that has a lot of power to it is the sense that the computers need to move much closer to the human experience and become warmer and more emotional and that’s actually not something that’s just cute or clever but actually works better.

Paul: Yeah.

Aral: And it’s difficult to do as well because if thing about how difficult it is for human beings to communicate with each other. I mean we know human right? We are humans so we should therefore know humans and yet how often do you miscommunicate? Yet how often do you misread body language? Or what am I actually trying to say? Am I being sarcastic or not? Um, and I talk about his in my presentation as well but if you then remove the human from the equation and then try to script that interaction you get something that’s far more difficult to actually talk to a human being where you’re not involved in the conversation firsthand and to try and script that is very difficult.

Paul: Hmmm. I mean right at the beginning Christian, you were talking about that you’ve come at this from kind of a social angle and that that was how you approached the subject. Do you think that this kind of emotional design or this playful design applies only to social sites or is it actually…could it apply to every site or are there some situations where it shouldn’t apply?

Christian: Um, yeah, I don’t think that it’s limited to when you’re designing for social interaction. Certainly, you can have….. I mean don’t know, for instance, how social mail chimp is except inherently that email is has a social quality but……so I think that playfulness can sort of exist certainly in a ……you know you can put jacks about yourself and things like that and so that certainly exists. You know there probably is a time and a place for it and I sort of say there is a dichotomy between play and work and you know, nobody likes work, have to do it you know, if they didn’t pay me I wouldn’t do it. That’s sort of the quality of work yet the world sort of requires people to take out the garbage and drive the trucks and things like that so we probably can’t create a utopia where everything is playful all the time, maybe you know….going to the funeral home to deal with your parent’s death is not going to be a playful experience on some level and doing your taxes may never be playful and things like that. I think that still you can nibble around the margins probably and take some of the drudgery and some of the dreariness out of it. Sort of like the idea of getting usability……get the horror out of it and then maybe you can make if fun, that’s a higher ambition but certainly context is all, you know, these things are not universal laws that you have to always be thinking about who’s going to use this and in what context? You know, so there’s going to be giant industrial systems that are probably going to remain mechanical and inhumane for quite some time.

Paul: Yeah.

Aral: And if you looked at…..If you saw Simon Willison’s talk yesterday when he was talking about crowd sourcing as well, he showed some examples of how even mundane tasks you know, can be made fun, by making them into a game basically, like identifying a scenic part of town for example made into a hauternaut style experience. They do the same with Wildlife Near You to try and pick the best animal photos that have been submitted. So even mundane tasks can be made fun if you make them into a game and add elements of play.

Christian: Yeah, I think that some if it is just not settling, not accepting that things have to be done in the most dreary way that first occurs to you, again, because maybe it’s easy for the computer to just make form and have them fill it out. You know, why not stretch a little bit and make it easier for the human and a little harder for the computer.

Aral: Yes, I think the way I approach is I basically see user experience or creating good user experiences as worrying about the right thing. The right thing is your users problem, not your problems. To the example I give is that if you’re starting your project and the first thing you think of is what’s my database structure going to be like or is it normalised? You’re working about the wrong thing, you’re worrying about your own problems. Then you’re going to trickle that solution to the user, trickle it down and that doesn’t work. Or trickle it up actually.

Chrisitan: How many times have you said ‘Well why don’t we do it this way?’ And the developer says we can’t, we already made our contextual decision, it’s not possible.

Aral: Exactly. That’s the point ……

Relly: That’s everything that’s in my talk. Hooray, I’ve got it right.

Aral: Awesome. Go see Relly’s talk, she’s talking about that. But that’s the key thing. And the thing is if you worry about the users problem you’re going to be creating more problems for yourself. But that’s okay because our problems don’t matter it’s okay if we have to work harder. For mostly you do.

Relly: Lean back from the mic, lean back from the mic.

Christian: Well we’re getting paid and the user isn’t so…

Aral: Yeah, yeah exactly.

Paul: Well. Do you know, this is a subject I could talk about all day. It’s far more interesting that what we’re going to be covering next but we’re going to stick with my programme. T here’s nothing like selling up the next show.

Thank you so much guys for coming on, I really appreciate it. Give them a round of applause.

Christian: Thanks for having us.

Paul: Feel free to go and join the audience.

Similar Posts:

• Podcast 39: Mature Flash
• Marcus on Nevermind the Buzzcocks
• Off to atMedia
• iPhone design, freelancing, the universe and everything
• 134. Chrome

Subscribe to Boagworld Bitesize

Relly talks about microcopy

The one talk I am most passionate about is Relly Annett Bakers talk on Microcopy. As web designers we constantly moan about the quality of copy produced by our clients and yet make the problem worse by producing poor copy of our own.

The problem is that we think we don’t write copy. However that is simply not true. We are forever writing error messages, instructional text and labels. We are also involved in information architecture where we make decisions about the naming of navigation and page elements. All of this is copy.

Whether you get to hear Relly’s talk at @media or not, it is worth learning about best practice in microcopy. Fortunately there is no shortage of online resources available.

For a start Relly has written extensively on the subject including her 24 Ways post ‘construction of instruction‘.

However this is a subject others are tackling too. Joshua Porter has written a great post entitled ‘Writing Microcopy‘. It is well worth a read and is a brilliant introduction to the topic.

Finally Joshua has also created a Microcopy Flickr Group which showcases great examples of microcopy. If you are looking for some inspiration as you write, this is a great place to start.

Bruce and Rachel talks about HTML5 and CSS3

Unsurprisingly this years @Media will be focusing on HTML5 and CSS3 with a number of great talks including ones from both Rachel Andrew and Bruce Lawson.

Without a doubt these are really hot topics and open up a world of possibilities for us as web designers.

Of course this is also a topic that has been done to death online. However because there is so much material it can be hard to know where to start. That is why being able to see a presentation from the likes of Rachel or Bruce is invaluable.

That said, there is some material out there worth checking out.

When most people think of CSS3 they think of border-radius, gradients and shadows. There are literally hundreds of articles dedicated to this subject. However there are also a couple of tools for those of you who cannot face yet another blog post.

The first is a simple tool for generating border-radius code. Simply type in the values for each corner and it creates the code for Mozilla, Webkit and the W3C spec.

The second tool does a similar job for gradients, box shadow, text shadow and transforms.

However, CSS3 isn’t just about new effects. As Rachel Andrew points out in her 24 Ways article it can also help you create cleaner code.

As for HTML5, I have seen Bruce talk about coding in HTML5 before and it is well worth watching. He demonstrates just how easy it is to start coding HTML5 today even though the spec is not fully supported across all browsers.

Bruce has written extensively on the subject of HTML5 as a quick Google will testify. However I recommend you check out his website html5doctor and a previous presentation he gave that introduces HTML5. Both provide a great starting point.

Inclusive design

The final talk I wanted to highlight is Inclusive Design by Sandi Wassmer.

Inclusive design is not a term I have come across before, which is why this talk interests me. However according to Sandi it brings together Accessibility, Usability, User Centric Design, Progressive Enhancement and User Experience. It recognises that a ‘one size fits all’ approach is not always appropriate and that we need to provide users with more choice in how they interact with our content.

I get the impression Sandi chooses to talk about inclusive design rather than accessibility because accessibility is so strongly associated with the disabled and in particular those who use screen readers.

In fact accessibility is a much broader subject that includes accessibility for all, even those who still use IE6!

Sandi has actually created a very interesting PDF on the subject of inclusive design that is worth downloading. It will certainly get you thinking in a different way about what it means to make your website accessible.

Similar Posts:

• Web Design Podcast (10) – Web Accessibility
• Round up of web copy posts
• The 4 essential web writing tips
• Web Design News 17/05/10
• Web Design News 11/05/10