A case study in responsive design

Posted in Development on October 31, 2011 by Dan Sheerman

Dan Sheerman has been working away to implement the responsive design for Boagworld. With the job complete he shares a few lessons learnt.

Over the last couple of days, I’ve had the task of taking the Boagworld site and implementing all its responsive goodness. We went live quietly, so you will now be able to resize this very post as you’re reading it.

All done?

Can I have your attention back now you’ve had a good play, and poked holes at things that look dodgy in my stylesheets?

Okay, so Paul’s asked me to write a post outlining how I went about it, and some of the things I noticed along the way that might help if you’re attempting responsive front-end work for the first time, or just want some general tips, so here goes.

I don’t really like people telling me how to ‘best’ do things, so I’m going to try not to do that. Instead I will offer some general observations I had along the way and some ‘common sense’.

What are media queries?

Firstly, media queries. If you’re not already familiar with them, here’s a basic outline. What you’re looking at with media queries are essentially a form of conditional comments, just like the ones you’re used to using to crowbar IE into the shape. The difference is that with responsive/adaptive design, you’re targeting devices’ and browsers’ widths (and heights), as opposed to a specific browser version. The first thing you’ll notice about the media queries on Boagworld, is that there’s several stylesheets for different device widths. Unfortunately, they’re in the ‘wrong order’. There’s a reason for that.

Why build from mobile up?

When building for mobile devices, ‘common sense’ would dictate that we serve the least amount of data to those devices likely to view content on slower connections, or potentially less capable of dealing with lots and lots of (unnecessary) gumph.

In an ideal world, if we were browsing on a generic mobile device with a screen width of 480px and a slow EDGE connection, we’d want to be loading in just the styles necessary for the mobile layout.

We build the styles from mobile up starting with essential content. We then progressively call in more rules for more complex layouts that are utilised by devices with the ability and bandwidth to use them. Although it is not a hard and fast rule, devices with a smaller screen size are normally also slower at rendering web pages because of bandwidth and processor power.

Paul did it wrong. Don’t copy him!

With the Boagworld site, I already had the set of stylesheets that handled base styles, typography and branding along with the ‘desktop’ layout in percentages from Paul.

Without rebuilding the stylesheets that were already there, I’ve done the most horrible thing imaginable, and added all individual stylesheets in the ‘wrong order’.

As a result if you’re browsing on a generic mobile device with a screen width of 480px over a slow EDGE connection, you’re being served:

the full site stylesheet,
a few tweaks for generic big tablets in landscape,
a few tweaks for generic big tablets in portrait and generic small tablets in landscape,
a few tweaks for generic small tablets in portrait and generic smartphones,
and a few tweaks for generic mobile devices.

So sorry about that. I’m aware that it’s not the perfect way to do it, and I’ll certainly rejiggle the stylesheets to work properly (read: assign styles to selectors in the reverse order) at a time when I’ve got less shouting at Magento to do.

In terms of file size served, it’s actually not too bad, the most you’ll load in is an extra 9KB or so on top of around 15K (both quoted without compression) for all the desktop site’s styles.

There are a lot of individual stylesheets for the time being just for clarity and ease of development.

When everything gets rejiggled, I’ll be considering whether it’s more efficient to have larger stylesheets and fewer server calls, or smaller stylesheets only served when needed. I suspect with the filesizes, the difference will be negligible, but something that’s definitely worth considering.

Plan from the start, but don’t despair if you haven’t.

It’s always important to consider future implementation of responsive design when marking up any site. However, even when working with a fixed-width full site that has been coded with percentages, you can achieve some fairly comprehensive responsive techniques (as is seen from Boagworld).

When the content begins to look cluttered as the viewport is reduced, you can add break points that hide unnecessary or/and restyle elements. For example you can change display:inline-block to display:block so pushing columns below each other.

I did experience a weird bug when resizing with columns that were display:table-cell. So you may want to watch out for that one and use display:block instead.

Dealing with navigation.

We have two sets of navigation. One is more suitable for smaller screen sizes while the other is a ‘desktop’ version. Once this duplicated menu is added to the HTML it is simply a matter of showing or hiding them based on screen width.

It would be possible to simply restyle a single navigation bar but in our cause we wanted some elements (like subscription) to function a little differently so it was preferable to have two sets of HTML.

Dealing with content.

In terms of content, we’ve tried to keep it accessible at all resolutions. However, I did decide to hide the ‘fadey’ sidebar once the screen width drops down to tablet view. This is partly because the hover action required to ‘re-activate’ it, and partly to prioritise content readability.

Testing and browser quirks.

One thing you may notice if using Opera Mini is that the mobile menu drop-downs appear to post back to the server.

I had a hell of a time tweaking the JS to event.preventDefault() on those anchors. If anyone knows a solution, I’m sure you’ll let me know in the comments.

You’ll also, I’m sure, be thrilled to know I’ve tested it in Opera, and other browsers like Konqueror and Netscape to ensure graceful degradation for things like funky gradients – N.B. I haven’t actually tested it in Konqueror or Netscape… Or Android yet, actually.

Windows MobilePhones will, for their decision to make their mobile browser IE7 based, get Paul’s (really pretty) basic stylesheet. And as IE8 and below whistle loudly while strolling past media queries, that probably won’t change anytime soon.

And that’s about it. I’m sure we can rely on feedback to be left in the comments.

You may now resume dragging the corners of your browser about the screen like a crazy person.

CSS Trickster Chris Coyier

Posted in Development, Mobile on June 23, 2010 by Paul Boag

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.

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.

Chris Coyier

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.

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

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

Web Design News 15/06/10

Posted in News on June 15, 2010 by Paul Boag

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

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.

example of microcopy from Joshua's article

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.

A tool for creating advanced CSS3 effects

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.

Web Design News 25/05/10

Posted in News on May 25, 2010 by Paul Boag

This week: Things I discovered at Future of web design, google open source web fonts, using flash to fill in the gaps and choosing the right image.

Future of web design

I don’t normally write about the conferences I attend. However, I did want to share a little bit about this years FOWD.

The Carsonified conferences are normally good but this year was exceptional. The speakers were brilliant, the venue was stunning and they even fed us at lunch!

However, that is not why I want to write about it here. My reason for mentioning it is because we was told about four websites that maybe of interest to you.

Think Vitamin Membership – Announced at FOWD and launching next month, Think Vitamin membership is a direct competitor to Lynda.com. At less than $1 a day membership you get access to a growing library of web tutorials, 4 online conferences a year, live Q&A sessions with leading figures in the web community and discounted ticket prices to Carsonified events.
Text Captcha – One of the speakers at FOWD was Robin Christopherson who among other things talked about the accessibility problems of Captcha. As an alternative he suggested Text Captcha which requires the user to complete a simple logic question before submitting information to your site. What is so nice about Text Captcha is that it has an API you can use to integrate thousands of possible questions into your site.
Fire Query – Another great tool came from Remy Sharp. It is an addon to Firebug called Fire Query. Fire Query is a tool designed to help develop in jQuery. It has some great features and if you work with jQuery it is definitely worth checking out.
CSS generator – The final tool was recommended by Dan Cederholm and is invaluable if you want to start using some of the more advanced CSS properties. Essentially it provides a GUI that generates code for CSS gradients, shadows and transforms.

Google open source web fonts

Without a doubt the biggest story of the week is the fact Google has teamed up with Typekit to launch the Google Font API.

The arrival of Google in an already crowded marketplace including the likes of Typekit, Fontdeck and Fonts.com is another boost for web fonts.

What makes Google’s approach unique is that they are focusing on open source fonts. This means the service is entirely free and does not have to rely on Javascript. You just link to the font and away you go as you can see from the example below…

Embedding fonts is easy!

Although their font directory currently only consists of 18 fonts I am sure this will grow quickly. Also with Google’s reputation for speed and robustness some of the concerns over relying on a third party service are reduced.

Web fonts are still far from perfect with issues over download size and anti-aliasing. However, the more companies we see enter this space the faster we will see the service mature. Its good to see Google adding their weight to web typography.

Choosing imagery

Choosing the right imagery for a website can be a significant challenge for web designers. It is even harder for website owners who do not have design training. However, both groups select imagery for websites on a regular basis and their decisions have a significant affect on how users perceive the site.

Image of a website missing a key image

Fortunately the Web Designer Depot is here to help with a post entitled “Avoid Perfect Photo Syndrome.”

The aim of the post is to help us overcome the problem of finding that perfect image. According to the post this problem is two fold…

a lack of ideas and a glut of art

First it helps you overcome a lack of ideas by focusing you on what it is you wish to communicate. It then refines this through experimentation and work association. Finally it encourages us to be original by doing something unexpected and think beyond our first impressions.

When dealing with the glut of imagery available online it focuses on narrowing the field by looking at shape, colour, tone and focus.

For website owners this post is a great introduction to the design principles behind image selection. For web designers it is more of an encouragement to experiment and try rather than endless searching for the perfect image. The post ends with these wise words…

Choosing images doesn’t always have to be hard. Trouble usually comes when you hunt for that one “perfect” image.

Lacking images is akin to having writer’s block. Sometimes the cure is to stop worrying and start experimenting.

Flash, filling in the gaps

I want to finish today by mentioning a great post by Jonathan Snook about the changing role of Flash.

This post is focused purely at the web design community so if you are a website owner you can probably skip this one.

However, if you are a designer or developer I would certainly recommend it. It is possible the most balanced, down to earth and pragmatic assessment of the role of Flash I have read.

It begins with a history lesson, explaining why Flash was needed in the first place. Jonathan explains that Flash exists to fill the gaps that HTML, CSS and Javascript could not…

Between then and now they’ve managed to offer useful features such as cross-domain requests, local storage, binary sockets, multi-file uploads, and shared objects. On the animation front, there are 3D effects, inverse kinetics, and pixel bending. On the streaming side, there is support for multiple codecs, full-screen playback, and dynamic streaming. Flash also allows for screen, audio, and webcam capturing, as well as peer-to-peer connections.

He then points out that developments in the W3C technologies and improved browser support has started to make some of these jobs redundant. However as he points out…

HTML5 just doesn’t have the same breadth of features as Flash. That’s not to say browsers won’t get there someday. It’s just not there, yet.

The thrust of his argument is really summed up in the last two paragraphs…

As web developers, we should choose the best tools and technology for the job. To do otherwise—out of ignorance or some duty to “web standards”—is a disservice to the clients and customers we serve.

Right now, HTML5 is slowly becoming a viable alternative to Flash for a greater variety of situations. However, Flash will continue to fill in the gaps for years to come because it continues to solve problems that web developers have and that can’t be solved with any other client-side technology.

Its hard to argue with that. I am however glad that I need to turn to Flash less and less.

Web Design News 27/04/10

Posted in News on April 27, 2010 by Paul Boag

This week: Is the homepage dying? Everything you need to know about HTML5 and CSS3. Solve problems rather than add features. And why you shouldn’t be tied to a process.

Everything you wanted to know about HTML 5 and CSS3

There has been so much talk about HTML5 and CSS3 that you could be forgiven for zoning out.

If you are like me, you know it sounds cool. However you are having trouble keeping up with what exactly it all does and if you can use it now.

Fortunately there are a couple of resources that will help bring clarity to the situation.

The first is a presentation that covers advances in Javascript, HTML and CSS. What makes this presentation unique is that it demonstrates these upcoming technologies as well as explain them.

Presuming you are using a good browser (the author recommends Chrome) you will get to see everything from native video to CSS gradients in action. It also comes with code that you can just copy and paste to get started.

The second resource is a compatibility table that shows browser support for HTML5, CSS3, SVG and other upcoming web technologies.

Sample table from the compatibility application

You can configure the table to only show the technology you are interested in (e.g. CSS3). However the nicest thing is that it provides a judgement about whether you can start using that technology today. It also explains why it has made that judgement and what browser is limiting its adoption.

Both resources are worth a look if you want to start adopting these emerging technologies.

The decline of the homepage?

Gerry McGovern returns this week with another controversial post. This time he is claiming the decline of the homepage.

He begins by quoting some figures on the decline in homepage usage:

In 2003, 39 percent of the page views for a large research website were for the homepage. By 2009, it was down to 19 percent.

Another technology website had roughly 10 percent of page views for the homepage in 2008, and by 2010 it was down to 5 percent. One of the largest websites in the world had 25 percent of visitors come to the homepage in 2005, but in 2010 only has 10 percent.

I have no reason to doubt these figures. However, I am not sure they reflect all websites. That said, I do think the principle stands. As Gerry points out…

Years ago people might have thought about getting to the homepage and then figuring out where to go on the site. Now they will use search or external links to get closer to the place they really want to get to. So, for example, people are becoming less likely to simply type “Toyota” into a search and more likely to type “Toyota recall”.

google search

Does that mean the homepage is no longer important? Not at all. It is still an essential navigational tool which users rely on to orientate themselves on a site.

What this post does demonstrate is that political battles over homepage real estate is pointless. The homepage is no longer as critical as it was.

While on the subject of homepage design, I also wanted to quickly mention ‘How To Develop A Homepage Layout That Sells‘. Although not the best article on the subject it does tackle one aspect well. That is the need to prioritise around objectives, rather than allowing features to continually accrue on the homepage.

The process police

I share a lot of techniques, methodologies and processes on Boagworld. From advice on wireframing to top tips for creating an effective call to action. These posts help us to learn and provides structure within which to work.

However it is important that these kinds of posts (whether on boagworld or elsewhere) are seen as guidelines or advice, not as laws that need to be obeyed.

This is something that is covered in ‘The Process Police‘ a 52weeksofux post.

Image of riot policeman

Ryan Rodrick Beiler, Shutterstock

In this post Joshua refers to people he calls process police. These are people who cling to processes as a kind of mantra for improving their websites…

Process is their crutch. The Process Police believe that if they follow the process to the letter, then they’ll be more successful than if they don’t. They use process as a benchmark for success.

However, in reality the world doesn’t work like that…

No process guarantees success. If there were a process that guaranteed happy users everyone would be using it. But design doesn’t work like that: it’s iterative, responsive, ever-changing. You have to react as much as plan. You have to change your process on the fly to react to the marketplace.

Just remember the next time you read an over confident author talking about the ultimate way to produce a persona, that there is no such thing as a perfect way. Take from the article what works for your site and your users, then leave the rest.

Solve problems rather than add features

Let’s face it we all enjoy something new. Designers like the latest design trends, developers want to play with new technology. Even website owners always have endless ideas for new features.

Unfortunately our enthusiasm for the new can get the better of us sometimes and we focus on that rather than meeting the needs of users.

An article entitled “Does your website add features or solve problems?” addresses this attraction towards the new by encouraging us to focus on solving problems rather than adding new features.

iphone

The author sums the problem up perfectly…

This eagerness manifests itself as a superfluous new feature, an implementation that is stimulated by a common misconception that adding more features is a market advantage. This couldn’t be further from the truth.

In reality the solution to users problems often lies in taking stuff away rather than adding it.

The post looks at the benefits of simplifying your website before suggesting some ways you can ‘be a problem solver and not a feature inflator’.

Its a great little post that focuses the mind back on what matters and curbs our enthusiasm for the new.

HTML5 and CSS3 with Inayaili de León

Posted in Development on April 6, 2010 by Paul Boag

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

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

Hello Inayaili.

Inayaili: Hello.

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

[lots of laughing]

Inayaili de Le%C3%B3n

Image Source

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

Inayaili: Yeah.

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

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

Marcus: We are, this is halfway

Inayaili: … through the …

Paul: Of for fuck sake.

Marcus: We only have got six hours to go.

Paul: Ooh, whoa.

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

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

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

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

Marcus: Yes, we are halfway – jipee!

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

Marcus: Shut the door.

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

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

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

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

Eum, am I allowed to tell a blond joke?

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

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

Paul: No.

Marcus: No? Ok. Euhm, …

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

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

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

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

Marcus: Here we go.

[Cow jingle kicks in]

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

[Jingle stops]

Marcus: Yes.

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

Ryan: Excuse me, what is your conversation about?

Marcus: An actual head. There is a joke.

Ryan: We can’t keep people from following.

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

Marcus: I can do a Christmas joke.

Paul: Yeah do … Nooo!

[background laughing]
[...]

Marcus: Blame them!

[giggling]

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

Paul: Yes.

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

Ryan: Carrots for noses.

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

Carry on.

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

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

Paul: Let’s talk about …

Marcus: That’s a good set of interruptions.

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

Marcus: No, I am going to interrupt you.

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

Ryan: She came all this way.

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

Inayaili: And I brought cupcakes.

Marcus: Yes, exactly.

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

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

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

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

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

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

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

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

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

[Laughter in the room]

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

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

Inayaili: Yeah, exactly.

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

That’s what I do.

[Laughter in the room]

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

Inayaili: Yeah.

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

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

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

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

Paul: Yeah, we mentioned that earlier.

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

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

Inayaili: Yeah.

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

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

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

[Laughter in the room]

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

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

[Lots of laughter]

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

Marcus: Yeah, ok.

Ryan: We can get him on Skype.

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

Ryan: Get him to ring Boagworld.

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

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

Marcus: Because I can’t think of everything.

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

Inayaili: I disagree.

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

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

Paul: I feel told of.

[Inayaili giggles]

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

Inayaili: Yes.

Paul: But I like box shadow.

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

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

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

[Consternation and laughter in the studio]

Paul: I feel under attack here.

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

Paul: Right.

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

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

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

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

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

[reads search engine results]CSS current work.

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

[Laughter]

Paul: So here we go. Here is the …

Inayaili: There is probably a blog link under navigation.

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

Inayaili: So, that’s the short summary.

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

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

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

Inayaili: You don’t have to …

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

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

Paul: Oh, OK.

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

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

Inayaili: Yes, exactly.

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

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

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

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

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

Paul: You have got to vote, otherwise, …

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

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

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

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

Paul: But he is!

[Laughing]

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

Marcus: Nobody is Jeremy Keith.

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

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

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

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

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

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

Inayaili: No.

Paul: OK.

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

Paul: Right.

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

Paul: Oh.

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

Paul: That’s brilliant.

Inayaili: You can contribute.

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

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

Paul: Yeah.

Inayaili: Yeah.

[Laughter]

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

Inayaili: Yeah.

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

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

Paul: Right.

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

Paul: Oh, that’s good.

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

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

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

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

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

Paul: Yeah.

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

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

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

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

Inayaili: Yeah.

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

Paul: Ahaaa!

Inayaili: Yeah.

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

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

Paul: Alternate.

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

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

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

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

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

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

Paul: You are not living the dream.

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

Paul: Yeah.

Rachel: It’s completely a presentational thing.

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

Inayaili: Good.

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

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

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

Inayaili: Yeah, it’s fine.

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

Inayaili: Yeah, I am.

Paul: Excellent stuff. Brilliant.

Thanks goes to Joke de Winter for transcribing this interview.

Zeldman and Ethan Marcotte on the future of the web

Posted in Design, Mobile on March 31, 2010 by Paul Boag

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

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

Jeffrey: Thanks, Paul.

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

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

dwws website

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

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

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

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

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

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

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

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

Jeffrey Zeldman presents

Image Source

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

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

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

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

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

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

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

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

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

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

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

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

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

Ethan: Yeah.

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

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

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

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

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

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

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

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

Paul: Ah, well, fair enough.

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

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

Jeffrey: It’s a good question.

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

Paul: Now out of quilt.

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

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

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

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

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

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

Paul: I never know how to say that either…

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

Paul: Ethan, is that your experience as well?

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

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

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

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

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

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

Paul: Yeah, absolutely.

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

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

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

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

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

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

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

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

Thanks goes to Dennis Deacon for transcribing this interview.

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

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

Web Design News 09 /03/10

Posted in News on March 9, 2010 by Paul Boag

This week: Giving and receiving design feedback, are you bored of your sites design, CSS typography and helping users when they are too busy to read.

Helping users when they are too busy to read

As is pointed out this week on 52weeksofux the days of reading help manuals are over. In a world of twitter, facebook, mobile phones and email we just don’t have the opportunity to spend long lengths of time learning a new system or website.

As the post suggests…

We don’t have two hours to read a help manual. We probably don’t even have 20 minutes. Instead, we learn a bit here and a slice there, all adding up to real learning but not in contiguous time.

In short we learn as we go along.

This should have a considerable impact on how we design our websites. We can no longer except users to consult a help section or contact you for advice when they cannot use your website. According to 52weeksofux we need to change our approach:

In its place is embedded support: directions, tips, cues, and other signposts that can nudge us back on track. One example of this type of inline hand-holding is microcopy: the small, useful copy that helps answer contextual questions and defray concerns.

So what about your site? Do you provide enough support to help users learn about your site as they go? Are your error messages and instructional text clear and descriptive? Perhaps it is time to revisit your website copy.

Critiquing design

One of the most controversial areas of the web design process is design sign off. Everybody (including clients) has strong opinions about what they like or dislike. Designers on the other hand are often overly sensitive about their work and so this can lead to a lot of friction.

Being able to give and receive criticism as well as discuss design in a constructive manner is a skill both designers and website owners require.

Fortunately an article on Smashing Magazine called “Web Design Criticism: A How-To” guides us through the process.

The article explores the subject of design critiques before suggesting 8 pieces of advice on how best to give feedback. It’s a valuable article and well worth reading.

In my opinion design critiques are extremely important, especially in teams of designers. It is always good to have another designer looking at your work and provide feedback. As a designer it is easy to become too close to your project. A fresh perspective is always valuable.

If you are a freelancer and don’t have anybody to discuss your designs with why not try the website critique section of the boagworld forum.

design critique

Image source

Are old designs boring users?

Talking of design, I am constantly amazed how many websites still go through regular redesigns that involve major overhauls of the look and feel.

I can understand designers desire to do something new and fresh. However, even website owners seem to want something new.

The problem is that although you might get a kick out of doing a major overhaul of your sites look and feel, users often do not respond so well.

In Gerry McGovern’s latest post he points to Facebook as an example of what can happen when you redesign:

“After a redesign in March, a Facebook poll revealed that 94 percent of users didn’t like the changes,” Caitlin McDevitt wrote for Slate in February 2010. “When Facebook introduced its News Feed in 2006, students organized to protest against it.”

In fact most users like familiarity and dislike change. This is because users do not want to be excited by a new design, they just want to get things done. Gerry goes on to say…

The vast majority of them are at your website to get something done as quickly as possible. The only people who are likely to complain about your website design are website designers. Craigslist is constantly being told that its site is boring. “But the people I hear it from,” Craigslist CEO Jim Buckmaster told Wired in 2009, “are invariably working for firms that want the job of redoing the site.”

Sites should evolve over time rather than go through sporadic redesign.

Does this mean our websites should never change. Absolutely not. However, we need to examine our motives for change and when we do change it should be an evolution not a revolution.

CSS typography

There has been a lot of excitement recently about services such as Typekit and Fontdeck that allow designers the ability to use custom fonts on their websites.

However, custom fonts are only the beginning of what can be done with typography using CSS. Unfortunately it can be hard to keep up with all the latest innovations so it is good to see a post by Yaili about CSS typography.

The post on Smashing Magazine is a comprehensive overview of everything you can do with type using CSS. This includes:

White space
Word wrap
Word and letter spacing
Indentation and hanging punctuation
Web fonts
Text shadow
And some new emerging text decoration

For a beautiful web site

With all of these tools at our disposal it is looking like the days of Cufon, Flash replacement or image replacement are numbered.

Web Design News 02/03/10

Posted in News on March 2, 2010 by Paul Boag

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

The search for inspiration

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

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

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

Board games
Food
Fashion

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

Using CSS 3 right now

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

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

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

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

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

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

Example of a CSS only menu

Europe set to have a broader range of browsers

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

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

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

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

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

The system can download and install any number of browsers.

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

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

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

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

Oh happy day!

Browser Choice Screen

Ecommerce development tips

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

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

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

24 ecommerce tips

One part that jumped out at me in particular was:

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

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

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

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

Certainly food for thought.

Review: CSS Mastery 2nd Edition

Posted in Reviews on January 20, 2010 by Paul Boag

Hi, my name is Yaili and I’ll be reviewing the Second Edition of CSS Mastery, by Andy Budd.

First. Who is the book for?

The book states that it’s for “anybody with a basic knowledge of HTML and CSS” and experts. I’d say it’s more for the first case, but I’ll expand on that later.

There are lots of useful tips and tricks, that I’m sure you’ll use over and over, explained in a solid and easy to understand way. The fact that the examples can be seen online and that there are files that can be downloaded is great.

CSS Mastery 2nd Edition Book Cover

Second. It’s a second edition.

When I read the first edition, I was just starting to work with CSS, and CSS was still a bit of a mystery to me. I remember reading some things that I thought to be pure magic and that seemed very complicated, but now I realise they are used by any good CSS coder. So, at the time, the book opened my eyes to those techniques and to the possibilities of what could be done with CSS.

Content.

The book covers subjects from the beginning to a more advanced level.

It starts with the importance of semantic HTML, how to set good foundations. It takes a very brief look into microformats and HTML5 as well.

Then it moves onto selectors, with some more advanced and CSS3 ones — but it doesn’t go very deep into that area to be honest.

It explains the box model, which is rather important, very well. Liquid and elastic layouts.

Some more advanced techniques, like sliding doors and even multiple backgrounds, which is quite refreshing. Opacity and rgba colours.

There are some clever uses for the :target pseudo-class and attribute selectors. Some webkit proprietary code like gradients and reflections.

It also explains how to style lists and navigation. I would have liked to see a larger section for definition lists, because there’s only a small section and it sounds a bit negative (or even dismissive) and I don’t think it makes them justice.

There are some negative comments on CSS frameworks. Which I frankly agree with.

A good introduction to the IE layout issue. Some common browser bugs and how to fix them. And how to work with graded browser support.

Then on the examples, at certain points they can be a little repetitive, but there’s an interesting discussion about website widths, a brief example of using jQuery, which is rather nice.

Conclusion.

In conclusion, as someone who had already read the book, reading it again was good, as there are always things that you forget or that you weren’t aware of, even though my experience now is completely different, and I can be a little more critical about it.

If I could change something in the book, I think I’d change the naming of CSS3 — in the specs it’s always mentioned with no spaces, and in the book it has a space between the second “S” and the number “3″. I know it sounds nitpicky, but it’s rather annoying for me, for some reason…

Also, there are some mentions to browsers that are already dated, even though the book is fairly recent (like “Safari 4 beta”, which is already out of Beta). But that’s just something that happens in our industry — things move too quickly. I’m just being nitpicky again.

So, have I learned anything from this second edition? I did learn a few things, but not much. I already use or know most of the techniques. But would someone starting to work with CSS learn anything from the book? Definitely yes. I used to always recommend the first edition whenever someone asked me for book recommendations, and I will keep recommending it with the second edition. It’s a must-have.

190. Become a branding Ninja

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

On this week’s show: Ryan and Stanton interview Alex Hunter about managing your brand. Meanwhile Paul and Marcus look at how to speed up your website.

Podcast: Download (28.6MB)

Download this show.

Launch our podcast player

News

Offline inspiration

It has been a while since we have featured a Smashing Magazine post on the show so thought it was about time.

Shocking though this will be, it is not a top 10 list. Instead it is an excellent post on finding inspiration offline.

The post argues that using online sources such as CSS galleries for inspiration is not enough. As designers we need to be taking a walk, visiting a museum or spending time sketching. We need to consider these an essential part of our job description.

The post examines eight areas of inspiration:

Nature
Museums
Sketching
Hobbies
Music
Photography
Traditional art
Our own imaginations

It then discusses what can be found in these areas of inspiration. In particular the post looks at:

Texture
Color
Shapes
Changing our perspective
Discovering themes

The problem is that we don’t feel like visiting a museum is work and even if we do our bosses certainly do not! However, this is eloquently addressed to:

The trick is to consider alternative inspiration an an essential part of the job. While it feels more like play than work at first, finding true inspiration should mean more than browsing through the same material over and over. And we should know that in a creative industry, having fun is okay; it doesn’t mean we’re being unproductive.

Girl looking at Museum exhbit

Image source

Some of the best design work I ever did came from offline sources. I just wish I prioritised this kind of research more.

All you need to know about CSS3

Mr Stanton discovered a great new site this week – CSS3.info. With CSS 2.1. becoming increasingly supported and integrated into our work, it is time to look ahead at what CSS 3 has in store.

CSS3 has got some really interesting new features that are already supported in some browsers. From advanced selectors such as attribute selection through to multiple column layouts, there is a host of goodies we can start to play with.

What is more, by using graded browser support we don’t need to worry too much about IE’s lack of support.

CSS3.info is a great starting point if you want to begin using some of these advanced CSS features. It provides examples of each new feature and tells you what browsers support it. It also provides a selector check so you can see what advanced selectors work in different browsers. Finally, it also provides up-to-date information on how the new specification is progressing.

I really would encourage you to take a look at CSS3. Its got some really exciting features that you can start using now.

Preparing and planning for a redesign

Although I am generally against the principle of redesigning sites from the ground up, there is no doubt that every site needs a refresh once in a while.

Knowing when and how to go about redesigning your website can be a tricky process. Fortunately Web Designers Depot has a post that might help. Entitled “Preparing and planning for a redesign” it provides some valuable advice for any website owners thinking of redesigning.

The Firefox website before and after its redesign

The post starts by looking at how you know it is time to redesign. Contributing factors include:

Out of date technologies and techniques
The age of a design
The lack of a CMS
Search engine ranking problems
Under performance
Your competition

It then goes on to look at what needs to be done in preparation for a redesign. This includes:

Identifying what works
Being clear on what doesn’t
Looking at what can be removed, combined or added
Knowing what motivates your users
Whether a complete redesign is even necessary

Finally, the article concludes by looking at some potential dangers in redesigning. These include dealing with repeat users and avoiding broken links.

Although I don’t agree with everything in this post, it is a useful article if you are considering a redesign. Check it out.

Confusing menus and links: the web’s biggest challenge

I want to conclude with a post that might make you rethink your sites navigation. It is by Gerry McGovern and is entitled “Confusing menus and links: the web’s biggest challenge.”

Gerry applies his task focused approach to information architecture. He argues that too many organisations are more concerned with organising their content into an IA, than meeting the needs of users.

He suggests that to make a truly effective information architecture we need to start thinking like our users, who are focused on the task at hand.

To demonstrate his point he refers to the BBC sports site as a good example:

If you visit the BBC homepage and choose “Sport” you are brought to a page about sport. Just sport. The critical first screen is all about sport. No links to news or weather or business. Just sport. If you click on Football you arrive at a page that’s just about Football. Just Football. Not cricket. Not rugby. Not golf. Just football. If you click on “Premier League” you get to a page dedicated to the Premier League.

This is not web design. It’s web management. It’s about eliminating all choices that are not connected with the customer’s current task, which in the above example might be: Find out the latest news about the Premier League.

BBC Football website

Too often as website owners we clutter our navigation with other content that users “might want” or which we want them to look at. Although there are times when we want to cross link or promote other content, we need to be careful not to distract users from achieving their primary aim. If they become overwhelmed by links and fail to complete their task easily, they will leave.

He ends with a radical suggestion:

Menus and links need to be designed in the context of the task the customer is trying to complete. That means stripping away higher-level options and creating links that point forward based on the task at hand.

Stripping away top level navigation is not always a good idea, but this post should make us sit up and think.

Interview: Alex Hunter discusses developing an online brand

Ryan: OK, joining us today is Alex Hunter and we’ve just listened to you do a talk on… what was the talk title, I’ve forgotten?

Stanton: It was kind of “Managing Your Brand”.

Ryan: “Managing Your … Marketing Your Web App and Future Brands Online” – it was really good talk; really fascinating.

Alex: Thank you.

Ryan: So, would you like to tell us a little bit about yourself Alex?

Alex: Yeah. Sure. I’m an independent, kind of, brand ninja if you will. I’ve worked with some of the biggest brands in the world – on both sides of the pond. I live here in the UK but am originally from California.

Ryan: OK. And your talk was focused around making yourself your brand; putting your reputation on the line, in a way. It was really interesting – do you want to tell us a little bit about that?

Alex: Absolutely, yeah. Brand is one of those things that falls by the wayside, especially when it’s a developer-centred organisation. Developers are creating amazing technologies, incredible platforms but while they’ve been doing that they’ve actually been completely changing the game; they’ve been fundamentally changing the way marketing and branding works. It’s amazing, because they’ve create apps and platforms (i.e. social networking) that allow consumers to connect with brands for the very first time. Before, it was just send a letter out, watch a billboard, very mono-directional. But now we have these tools to connect with brands, and the irony is that the people that created that conversation aren’t responding to the fact that they need to have their brands intact.

Ryan: Right, OK.

Stanton: You gave a couple of examples of companies that you respect and that do this kind of thing really well. Can you give us a run through those?

Alex: Sure. I think Digg has put a lot of time and effort into their brand over their, what is, five-year or six-year existence. They’ve done a lot of little things really, really well and it was nice to hear Kevin Rose allude to them yesterday. Things like their blog – I think they’ve got the best corporate blog in the world because it’s not just the Vice-President of PR doing the blogging. It’s not even just Kevin or Jay (the founder and CEO respectively). It’s the developers, the designers, the DB admins, the receptionists, the community managers i.e. the faces and the names of the people that created and curate the community that we as the “Digg Community” have invested so much time and energy into. We can connect with those people now because it’s a name and a face of a real person. And so what they do whenever they roll out a new piece of technology or a new development, they say “Hey, I’m the guy that did this. Here’s why and here’s how (in excrutiating detail). What do you think?”. And that’s kind of revolutionary.

Stanton: So you would encourage people – especially working in small teams – not to be scared of just talking about what they’re doing and just waiting for “Let’s just wrap it up in a press release” or something and just talk about it naturally and be precious and passionate.

Alex: The being “precious” about it, I think, is a very, very big risk. That transparency is really beautiful because it brings people into the journey – especially when you’re creating something brand new – when it’s just an idea. You’re creating a new product and you’re updating people on it. It’s why reality TV is such a painful hit, I mean. It’s because people are looking into this thing and, Lord knows, the dev cycle is dramatic and painful and “4 o’clock in the morning” caffeine-induced frenzies. But also, it’s like when things go wrong, hold your hands up – be transparent, human. Don’t hide behind a brand name or a product name. And people will engage with that.

Ryan: So, how should people be doing this really? How should people be developing their brand and associating themselves towards the brand and then putting it out there. What techniques should they be using?

Alex: It’s a great question. I think that there’s – especially with Twitter, interestingly – there’s this real blurring of the line between personal brand and corporate brand. A lot of the big names that we know in technology embody their brand; Kevin Rose is Digg, Gary Veynerchuk is Wine Library TV, Tony Hsieh is Zappos – they’re all completely interconnected; there’s no separating them. They’ve invested themselves emotionally in what they do and that shows in the brand. And I think they’re defined by what they want to be. Gary has always been very clear about what his values are, Digg is very clear about what their values are. Apple are very clear about what their values are, and I think, trite as it may sound, going through and identifying your values – and it was really refreshing because as I came off the stage some dude came up to me and say “Hey, thank you. We’ve been labouring over this for years and we finally sat down – or I stopped sitting down with myself and brought the whole team in – and we defined our values” and it’s just gone up exponentially through that. And so I think it’s just define the values, creating an identity out of that and then saying “What are we now and what are we going to be, well, indefinitely really”.

Ryan: So do you think that’s got to be one of the first stages when you release it – you’ve got to be thinking about where you’re going to take it and how you’re going to present it to the world.

Alex: Absolutely

Ryan: That’s vitally important.

Stanton: So you talked about brand consistency and not to be scared of it or precious of it again. You should be willing to put it out there and how other people in your company – just use it and get it out there.

Alex: It’s… consistency is a funny one. People always say “The more people you give the message to the more watered down it becomes and the less consistent the message is”. Big brands are really scared of losing the refinement of their message. Realistically, they’ve been doing it for the last 30 years because the person who answers the phone in the call centre is the first point of contact that a user has with your brand. They are representing your brand. The receptionist is representing your brand. So giving someone an account on Twitter to do the same is no different, it’s just a little bit more of a public stage. But, on the flip side, that’s a good thing because people can see you responding to positive comments and negative comments and reacting and helping people in a very public forum. That’s why things like Get Satisfaction and applications like that – and actually in South Africa there’s a really popular one called Hello Peter which businesses are all into trying to respond and react to. So I think it’s a good thing and people shouldn’t be scared of consistency.

Ryan: Some brands, and we’re talking here quite a bit about people being associated to the brand and being kind of interchangeable. You say Steve Jobs, you say Apple, you always think of the two. For brands like, you mentioned, Diet Coke – being that you were invested into that brand – there’s no person that you can think of associated to that but you see that brand and you’re committed to it. McDonalds, things like that. What differences are there between the two? How do you promote? It’s kind of a logo you’re promoting in a way, isn’t it.

Alex: It’s a really good question. Diet Coke – the Coke/Pepsi thing is a fascinating brand battle and one of the few where it’s really only a two-horse race, especially in the consumer arena. I mean you’ve got Boeing and Airbus but they don’t really have to advertise because, well, I don’t have $100 billion lying around. Coke and Pepsi, I think, play off the fact that they are rivals and you are either one or the other. I think the more you consume of it the more passionate you become about it. So, if you are a regular Diet Coke drinker – like my wife won’t go to restaurants that serve Pepsi, she’ll leave because she can’t stand the taste of it. I’m sure it’s psychological because as Dave Chapelle said in that video, “It’s all the same”. It’s sugared water in a tin can! But they’ve managed to kind of feed off each other to an extent that has developed this rivalry and therefore developed this passion within its user base.

Ryan: I suppose then there’s so many different avenues that you can take to compete and get your brand out there. Is there any more that particularly stand out; having a direct competitor is one way of developing your brand or having a figurehead or any other ways you can go about it?

Alex: Absolutely, absolutely – especially for small – or reasonably small – brands. I think there’s a couple of things that are really important. In kind of extending the reach of the brand and the application with content like blogs – like the Digg example is a great one – but also engagement, both in the physical world and in the digital world. There are a lot of web companies that are getting really good at hosting real world events where users meet up and are rewarded both on a macro-like Digg or a Yelp on a micro level like some companies here in Europe like Qype that I mentioned during my talk that are introducing users to each other and to the people that either administrator or are the, kind of, power users within the community. Kevin Rose mentioned that again yesterday as a really good way; launch parties, regular user meetups, get people talking, get people connected. That really breeds loyalty. It’s astounding what that can do in terms of the competitive.

Ryan: I think Digg is an excellent example because they have so many methods of getting their message out there, don’t they. They’ve got the blog and the meetups and everything else.

Stanton: It’s like that with the bigger companies that come out. They can release different products that might not be wildly different but there’s the kind of umbrella brand that’s so strong that you can pick up that product and you know it’s new and you know the quality of it.

Alex: It’s really interesting. The web has actually fundamentally changed the way brand is perceived because we have these, like, loyalty mechanisms built in. Let’s look at, like, re-branding an acquisition. If my local supermarket gets bought by another supermarket, I don’t care. As long as it’s still there and has food in it – whatever! When Yahoo! bought Flickr they kind of didn’t know what to do with the brand. Do you keep it Flickr or do you make it Yahoo! Photos? And they’ve been kind of to-ing and fro-ing. But you can’t because that loyalty that’s in the Flickr community, that has built it up to where it is, would be PISSED OFF. So now, the compromise that just did recently was “Flickr by Yahoo!”.

Ryan: And people don’t seem to like it!

Alex: Exactly! Can you imagine what would happen if they rebranded it to just Yahoo! Photos? I mean, of course you’d get over it eventually but it’d take a lot longer and you’d lose a lot of customers.

Stanton: That kind of touches on one of the key things I took away from your talk. You said “Look after your users best interests, not yours”.

Alex: Absolutely. It’s hard because you gotta pay the bills. But that reputation will put you head and shoulders above anybody else. The Amazing Tunes example that I used. There are other unsigned artists sites out there, but not that give 70% of the profits back to the user and not that have a DAB radio station that you can get featured on. That’s looking after users. That’s the definition of an ethical web company.

Stanton: So for anyone starting out or building a company or a start-up or something, are there any common mistakes or pitfalls that you see all the time, or that you’d encourage people to watch out for or avoid.

Alex: Absolutely. There’s the ever-present “If you build it, they will come” mentality. If a build a solid app, no matter how ugly it is, people will come. They will not because they’ll never hear about it. And there are competitive apps to almost everything, and if there isn’t one today, there will be one tomorrow, and they will have looked at what you’ve done and they will have started an outreach, they will have started a Twitter account, they will have started a blog, they will have networked it physically and they will have networked it digitally, they will have thought about the presence, the UI. And I think that siloing and kind of compartmentalising and just saying “I’m going to iterate my app” is not going to work. There are exceptions to that rule. TweetDeck – he developed it to solve a personal problem, it just happened to be really well solved, and so it’s kind of growing on its own. But that is the exception to the rule. I think that hiding under a bushel, expecting it to develop on its own, it’s just not going to happen.

Ryan: With regards to cost of developing your brand, it can be the chicken and the egg sometimes. You need to develop an app and get it out there to make some return to put some investment into marketing it. What initial steps can be used to build yourself up before you can plough some money into it and doing it properly.

Alex: It’s kind of interesting. I think, yeah – you’ve got to have a concept obviously and some basic stuff done but I think one of the things that I’ve always found that worked, and it was really interesting to hear someone talk about it yesterday – I’m not sure who it was – but this kind of closed beta invite only concept seems to work really well at generating buzz. And if you just get one or two people saying “What the heck is this?”. You get these precious invites – which really aren’t that precious – Spotify’s a great example; actually Spotify’s a great example on two levels: 1) it was invite only for the longest time and 2) our pals in America couldn’t have it and they wanted it so badly that they were spoofing IP addresses and whatever they had to do to actually be able to use it. That kind of sense of exclusivity is a free way of generating that kind of buzz, if you can just get enough people to talk about it and it’s just an occasional whisper in the air, a Moo Card dropped somewhere with an invite code on it – that will just start to get people excited about it. But you have to make sure the product doesn’t suck on the back of it, because that will also spread pretty quickly as well.

Stanton: A lot of the talks I’ve sat in on today are starting to tie in. Yesterday it was “If you’re going to release something, release it early”. Do one or two things but do them really well, don’t try and do everything at once because you won’t be able to. And then see how things get – see how your users react to it and then build. I guess that’s reacting with the branding people that engage with the brand and then you’re building it and they feel invested.

Alex: That focus is really important as well, and I think that’s why APIs are so important in the early stage because you can get people developing iPhone apps and other integrations without taking your eye off the ball and doing those one or two things really well and going “Oh crap we’ve got to go home and develop the iPhone app”. It’s really interesting the way that it’s evolved – product development.

Ryan: Do you have any predictions of how things are going to change in the future. At the minute we’ve got these big companies that are doing it really well, everyone’s kind of imitating and doing similiar things to try and push their brands as well, and inevitably, things will change again. Any predictions about where things might be going?

Alex: I think it will become even more democratic. I think that the users will become even more powerful because the time to reaction is so fast.

Ryan: Yeah

Alex: But I also think loyalty will get even stronger and if you’re going to develop a competing app to an incumbant you’re going to have to work 10 times harder to get people off of what they’re using. As people start to use even more social currency, more points systems, giving more “value” to a user, it’ll be harder and harder to bring them over. I also think it’s going to be harder for people to acquire web brands, especially the big companies – the Yahoo!s the AOLs of the world to acquire small web brands without alienating those kind of fervently loyal people that are already their user base.

Ryan: You did mention people coming up with all this sort of cutesy names and stuff, mispellings and things like that. The market just seems to be saturated with it. How should people be thinking about deciding on a good brand and what fundamental things should they be thinking about when they’re making those decisions

Alex: I think that’s a great question. It’s less about the name – like you said it’s really easy just to misspell something or drop a consonant; that’s really lazy – you’ve got to look at it much more as a value-driven. What are our values? What is our product like? What is our team made of? Where are we in the world? And then use that to feed in the name to something obviously catchy, obviously when you can get the domain for a reasonable price – those are practical things that you need to take into consideration. But it’s got to be catchy; it’s got to be engaging, it’s got to mean something. And I think people have started to catch onto the whole “if you can make it a verb”. Digg and Google have become verbs (by the fact that they’re just ubiquitous), but I think people are now starting to say (at least, I’ve heard people around London say) “I’m going to Qype that” and it means “I’m going to check what this place is like” in terms of reviewing a restaurant before I go into it or whip out their Qype Radar iPhone app and check it out before they walk into it. So I think that that’s a really interesting revolution.

Stanton: You’ve got to work hard to get to that place, don’t you?

Alex: You really do.

Stanton: Then it appears in the dictionary!

Alex: That’s when you know it’s all over. You’ve won!

Ryan: OK, well, thank you very much for your time. I really enjoyed your talk and I think listeners will find that really useful. Thank you so much.

Thanks goes to Sam Kirkpatrick for transcribing this interview

Listeners feedback: Give yourself a speed boost!

Normally the listener section of the show focuses on me answering listener questions. However, this week on twitter and the forum it has been the other way around.

You may have noticed that boagworld has been running slow for sometime. Well, I finally decided it was time to fix the problem. However, my knowledge on the subject was fairly limited. That was why I turned to the Boagworld community and boy did they help!

I thought it was only fair that I share the top 5 things I learn from them.

Read 5 Ways To Give Your Site A Speed Boost In Less Than 30 Minutes.

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.

186. Mobile Web

Posted in Classic shows on October 7, 2009 by Paul Boag

On this week’s show: Brian Suda talks about the mobile web and Marcus suggests ways of responding to email inquires.

Podcast: Download (33.8MB)

Download this show.

Launch our podcast player

Win Pitches, Charm Clients and Get Signoff

Being a great designer or developer is only half the battle. You also need to be able to promote and sell your services. Unfortunately many web designers and freelancers struggle to engage with clients.

The problem appears to be so big and I get so many questions on the subject that I have teamed up with the guys at Carsonified to run a full days workshop on the subject.

It takes place on the 23rd of October in London. If you book soon the price is £375 although if you quote the code CWPB_09 you can get an additional 15% off.

Book Your Place Now!

News

Sign up, Log in

Everybody hates signing up for new services. We also hate having to log in especially when we have ticked that little ‘remember me’ checkbox (or at least we think we did).

There is so much that can go wrong with sign up and log in, from lost passwords to mistyping. It is therefore vital that the usability of these forms is as good as possible.

This week I have come across two posts that might help.

The first is a post by Jeremy Keith in which he challenges two current practices for sign up and log in forms. The first is the practice of requiring users to enter an email address or password twice. The second is the default on ‘remember me’ buttons, which generally seems to be unchecked.

The second post I wanted to mention is a brief review by Techcrunch of the new Facebook Connect Wizard.

In case you haven’t come across the Facebook Connect Wizard, it is an easy way for anybody to add Facebook Connect to their website even if you have no coding knowledge. The wizard seems to consist of three simple steps that take a matter of minutes. Once complete users can log in to your site using Facebook. One less username and password for people to remember.

Search results design

Smashing Magazine has released a post that looks at how a large cross section of websites deal with search design. This follows on well from the recent A List Apart edition that dealt with search and we mentioned on last weeks show.

The Smashing Magazine post analysis’s the search design for a whole range of sites from Google to Walmart, and draws some interesting conclusions. These include some great advice such as:

Visited links should be indicated
Where possible, results pages should have RSS feeds or “subscribe” options
To monitor future improvements, request feedback from users after searches are conducted
If results span different sections of the site, indicate this by sub-headings or other dividers
Should allow re-sorting or filtering of results

Of course, just because a lot of websites have a certain approach to search, does not mean it is best practice. I have often seen bad practice copied from one site to another. That said, the list of recommendations seem solid. To read the complete list of suggestions check out the post on their site.

Is Windows 7 about to make our lives easier?

I was reading a post on Sitepoint this week entitled ‘Why Windows 7 Will Revolutionize Your Browser Testing‘ and it has started me thinking.

The part of the post that particularly caught my eye was XP Mode. This allows users to run IE6 for specific web applications under Windows 7. However, their default browser will still be IE8.

This will change everything. As I have said numerous times before, the reason IE6 survives is because of legacy systems within large corporates. In a single move this will overcome the problem. If they can use IE6 for these systems and IE8 for everything else then life is rosy.

There is a lot of positive buzz around Windows 7, and I know many large organisations who skipped Vista entirely are now serious considering upgrading. If that is the case we should see the number of instances of people running IE6 fall through the floor over the next year.

Finally we can move on!

CSS: From beginners to advanced

With the increasing buzz around CSS3 it appears CSS is having a renaissance. There are a growing number of articles which focus on emerging CSS support and browser manufacturers are falling over themselves to add new features.

This week Firefox 3.6 Alpha has been released adding support for a number of interesting new CSS features.

Sitepoint’s post ‘CSS3: To Infinity and Beyond‘ catalogues some of these additions and looks at how wide browser support for these now are.

The list of new features include:

Background resizing
Multiple background images
CSS gradients

Of course, unsurprisingly IE support is scares. However, with the proper application of graded browser support this should not be a major issue.

If you are starting out with CSS all of this talk of CSS3 may seem overwhelming. However, there is still some great advice being posted for you guys too.

One post you might want to check out is ‘30 CSS best practices for beginners‘. As the name suggests this should get you up and running fairly quickly and ensure you are building sites in the right way.

However, one word of warning. A few of these best practices are not so much… best practice. In fact some of the advice is down right bad! But do not let that put you off of reading the post. The editor has actually responded to the bad advice explaining why he believes it to be wrong. As long as you read his comments too you will be fine.

Interview: Brian Suda talks mobile

Paul: so joining me on the show today is Brian Suda. who is on to talk about mobile web, good to have you on Brian.

Brian: Thank you very much.

Paul: Thank you so much for coming on, I think a good place to start would be if you tell the listeners a little about yourself and why the mobile web, and why we are talking to you about that in particular.

Brian: My background is originally in programming and software systems. I did my undergrad in massuri US, from there i moved on to the uk and Scotland, where I studied more about infomatics. So im really interestedin the background aspects, all the technical issues. But alot of the things iv developed when i started working on sites is more the front end and the usability, the way people think about mobile. Recently I’ve been working on lots of little mobile sites here and there as a freelancer all these new kind of mobile. Its getting much bigger and i think now is about the time the customer should be looking into it and the right time for them put their feet into the water or take what they have and maybe take it to the next step.

Paul: hmmmm, i mean one thing that’s knocking around a lot that people talk about when it comes to the web is the one site fits all mentality. Which raises the question of do we need to be doing things specifically for mobile devices or if we build out websites right can we avoid the whole problem.

Brian: It’s a very interesting question. Because the W3C does push this concept of the one web and there are definite pros and cons to it. The definite pro is maintenance costs, if your only dealing with one website you don’t have to worry about updating and keeping things in sync with data and things on a constant basis. But at the same time there are certainly different aspect to the way people use the site. One of the things that we really try to do is keep the one web in mind and really that means all the same information is available. It doesn’t have too look exactly the same or being the exact same format, it just needs to be available to the end customer.
So one of the things we’ve been stressing is that we don’t like the words “mobile web”, were trying to find a better term for that. Mainly because “mobile web” infers that your using a mobile phone or some sort of mobile device but thats not necessarily the case i mean the way we picture the mobile web is its about mobility. I think they’ve got mobile as a noun and it should be mobile as a verb. You are moving, your mobile. So really the same kind of site doesn’t always work. A good example of this is if you have a fancy iphone or ipod touch and your at home sitting on the couch you have no quarms about viewing the full bbc website. Your on wifi nice fast connection no big deal. But if your out on the move, want to catch the tube, or your late for the bus you want the mobile version of the site. Because you want it quick, you might be on GPRS or edge, you don’t have the time or the energy to download the full bbc website. So its not really about the device, its more about the situation.

Paul: Thats quite interesting that you raise, obviously the iphone is going to come up in the conversation when we talk about the mobile web as does android and the various other new operating systems that are emerging. The one kind of trait all these have is they have this rich browser experience, you know quite powerful browsers and again the other question i guess people are saying is the idea of designing for mobile devices going to disappear because the browsers are so capable. But i guess this issue of environment and situation applies whether or not the browser is sophisticated.

Brian: theres also going to be situations where even if you have a very robust browser, form input is always going to be a pain. So even though you may basically have safari replicated for the iphone it maybe easier to just have a phone number. I mean you have a device in your hand designed for making phone calls, thats what it’s number one purpose is. To force someone to fill out a form can just become a ridiculous pain, it disappears into the web somewhere and maybe someone will answer in 48 hours, but you maybe sat in an airport having lost your luggage. You know you want to talk to a real person immediately, not fill out a form. So i think there is always going to be situations where the medium or the situation is going to define what you want to do.

Paul: i guess also you were mentioning there about whatever mobile device your going to be using its difficult to fill out a form. I mean that brings up the whole issue of the user interface, that mobile devices are very different in terms of it’s not a mouse and a keyboard theres lots of different interfaces and i’m guessing thats problematic as well.

Brian: certainly, i mean navigating either between tab, the opera browser will do it one way where the down button will scroll through the page through the links, where the iphone everything is done with your fingers. So yeh its going to be different interfaces means different ways of doing things. Some flyout menus when you do on hover just don’t work on some devices. And i guess that comes back to basic web 101 accessibility and progressive enhancement. You know, make sure it works without javascript, without a mouse, just a keyboard and then start layering the information on top of that.

Paul: does that mean that there is going to need to be a lot of device sniffing to identify your on an iphone there for you have a touch interface, your using an older mobile device there for your using a keyboard or whatever else. Or is there another way of doing that?

Brian: unfortunately yeh, browser sniffing is one of those things that everyone says you shouldn’t do and it technically usually its done in a bad way i mean we all experience browser sniffing when we go to out banking website and the website says “sorry you must have firefox2 or higher” and you know you’ve got version 3, you scratch your head and figure they can’t do the math. Its usually because they browser sniff and then restrict what you can do. Where you should do it the other way around and say heres a working website, we are going to try and determine what browser you have and then layer extra functionality on top of it. And again this is one of those things you can skim the surface or you can spend working on it and tweaking your site, and its going to really depend on your audience. So with someone like the bbc who might have loads and loads of resources might want to go through and wrap loads of if statements around all different parts of their website. But then it becomes a trade of between maintenance and usability vs how much of a good experience your customers get.

Paul: I mean you eluded earlier to this issue of context, the environment and surroundings that people are in and i heard Cameron mold* SP speak on a similar subject. I’m just interested in your take on that an you know what kind of elements come into it. I know we’ve talked about user interface but what other element of context are important to consider.

Brian: can you give an example?

Paul: well, the one that springs to mind i guess is environment. You talked about being at the bus stop is an issue, there are other things like that.

Brian: sure, Google a few years aog did some really deep research into all of their properties Gmail, docs and everything like that and they realised that their mobile user base fell into 1 of 3 categories. There was a sort of “bored now” – people saying ok i’m waiting for coffee, i’m waiting for a friend i’ve got 10 minutes to kill I want to go do something, just to keep me occupied. And youtube does a good job of this, they say “we know you just want to waste some time so heres the top 10 most interesting videos”. So its not so much browsing and searching its just keep me occupied. Another category is the “urgent now” – so theres been an accident outside or the powers been cut. Thats good example of because if your power is cut your internet connection and regular computer might also be down, but you want the phone number of the electric company to report the outage or see how long this is going to take, maybe the only way to do this is through the mobile interface. This si one of thing you want to bubble up, if your the clientele your expecting this kind of information your wanting to bubble this information upto the top. We did some work for some airlines and we realised this is one of the categories “have i missed my flight” don’t burry this information 5 levels deep. The last category is “repetitive now” people who want to check their stock, the weather and they are done. They’re not here to browse necessarily or spend 30 minutes looking at the website, they are looking for one key piece of information and they are done. So depending that your customer base is these will kind of lead or guide your design decisions and usability and how you layout your website.

Paul: thats really interesting in terms of the different kind of content that you bubble up depending on the kind of device your on and the situation your in. I mean i guess that leads on to a more question in that there are a lot of website owners that are listening to the show, you said at the beginning that people need to be thinking about the mobile web, how do you go about deciding whether your content and what you provide as a website owner is relevant for a mobile device or ifits not. And then what out of your content is worth taking across to the mobile site, and whats not relevant.

Brian: sure, you can probably ask that same question of a regular website. The guy on the corner who is a corner, does he need a website and does he even need a mobile website. Maybe he needs a mobile website more than he needs a real website. Again its so easy to get started in the mobile area because you don’t need to learn anything new, you can do it with all the existing html and web standards now that you already have. Its just a matter a repurposing it or thinking in the context of a mobile device. A lot of that is just realising screen width, bandwidth information you can cram on a page, there is a few things to learn, but its not that difficult to get you feet wet and i would argue that its best to get started on the cheap and easy and see if it works. Try early and fail fast. From there you will kind of learn what your customers want, one of the things we kind of keep in mind is we don’t like the term mobile website so what we’ve tried to come up with a new term. We tried to think of sugar free or fat free. So we kind of framed the situation as the traditional desktop website we call that either full flavour or full fat, and then what people call the mobile web we call the sugar free or fat free. People understand fat free and full fat, everyone understands those concepts. So because its about the situation we might say ok im at my desk and im getting a million phone calls about x y z. sometimes its easier for me to look at the mobile website on the desktop computer because there is no ads and there no company history or anything. It’s just the raw information i need. So if you start think about it in the terms of fat free of full fat its other side consequence is if you are developing a mobile site and you boss may say we need this this and this. Your like ok its mobile site we can just add another navigation item, but if you start talking about things in terms of fat free when your boss comes to you and says we need this, you can say well is you site still fat free if we are adding more and more navigation links? And its a way to argue against feature creep.
P. yeh, that sounds very sensible. You said something very interesting there, you said its very easy to get started on the mobile web. And i can’t remember where i heard this, it may have been from you but someone once said something like as web designers you get really annoyed when a print agency turns around and says we can do the web as well. And yet web designer oh yeh we can deliver the mobile web. So i’m just interested in your perspective as to whether web designer should even be trying to do this kind of development or whether its really down to a new breed of mobile web specialists because there are different element involved in it. So is its something web designers should be doing and should websites owners be looking to them to do it, or should they be looking elsewhere?

Brian: thats very good question. I like the analogy of print design, because there will be loads of people who’ve bought a computer and get on indesign and all of a sudden think they are a print house. I think form a technical point of view there is nothing greatly different between a mobile and normal website. Its the same html, same knowledge, same standards and code. The bigger difference is the usability and the way people use the device, how you lay it out. You can probably make the same argument between web designers doing websites, like business card websites and web apps. There is still a lot of design element and design ideologies that transfer between both of them. Maybe in another year or two there will be a bigger niche for someone who specialises in mobile websites and usability. It’s one of these things people are hammering on the door mobile is the next best thing, for 5 or 6 years now and it’s always next year. Maybe it will be the same with specialist, but maybe again it’s a chicken and the egg and we need specialists before we get mobile websites. It’s a good question i don’t know.

Paul: ok, fairenough. I mean you talk there about technically its relatively straight forward to get going maybe you could kind of give us some ideas of where to start. There are web designers here that want to kind of explore it from a technical point of view, what are the common mistakes and what do they need to be aware of?

Brian: erm, well there’s a few of them i guess. Depending on the audience, that’s the first slice you need to taste. Who am i developing the site for? Sometimes it maybe internal to a company and sometimes it maybe very high profile and you realise most these people aren’t going to have iphone they will have blackberry or something similar. You need to figure out what your audience will mostly be using. This is just base line. The bbc would have a different set of rules, but this will get you started. Find out what their device is and what they are capable of. Most of the newer devices have a decent web browser, maybe running webkit or some other new browser that can handle html and xhtml. And then you can code up your sites like you do normally. Some older browsers and phones don’t necessarily handle all the css or everything in the same way, and then people argue its like coding for the web cerc 1999. You need to get back to tables etc it’s not pretty. Again it’s all down to how far and how deep you want to go. For things to get start there lots of good resources out there i know dev.opera put a few article up about introducing / getting into the mobile web. Theres lots of stuff on the web as you said Cameron mold *sp. I could send you some links for the show notes.

Paul: yeh that would be really useful people are always keen to take these in and move on with them.

Brian: i think it’s also a bit of stigma that everyone kind of assumes its quite difficult because they here these buzz words like 3G and WAP when in reality a lot of it has past now because the phones of today are capable of rendering html. I think people are just a little gun nshy of where to get started. I think it’s not as mystic of an area as people assume.

Paul: ok so, presuming then that the technology side isn’t too bad, let’s talk about the design side, the layout and the usability that kind of thing. Which is a different environment that we have been used to designing desktop applications. Tell us about some of the common issues and mistakes.

Brian: certainly, the biggest one is probably realising the vast variety of phones and browsers outhere. The physical device itself varies in just screen width and colours and what each is capable of. Where on a desktop it’s probably ranges from 800 to 1600 pixels and we have all these grid designs. Really in the mobile world it breaks down to screen from anywhere such as 88px to 120px all the way to the iphone at 480 in landscape. So how do you design for this, most of the time it ends up being a stack, where you stack them on top of each other, much like the iphone navigation. That at the moment seems to be what is falling into place. It’s probably like the rules of the web in 1999 when you have navigation in your left and then header and body area. As things develop trend and design of how things will flow evolve as well. Design wise things like the iphone handle lots of css just fine, some phones don’t. This kind of forces you to all the little tips and tricks with css where you put in h1 then indent text with negative marging and replace with background image. But it doesn’t always work when you get to mobile, maybe it won’t show background images. Maybe the blackberry doesn’t display images at all due to bandwidth. So there are always little catches here and there, it’s just a matter of testing, its going to come into alot of time on device. People assume testing, you’ve got to buy an iphone.

Paul: I was about to ask that.

Brian: the simplest way is you probably look around the office, maybe now everyone has an iphone. You code it up, you go around everyone and look at everyones phone. You go around and spot any issues. There a few other companies out there who you can buy time. I think device anywhere who will rent time on their server farm, you load a little java app…basically a webcam and you can see the phone in front of you. And you can say no i want to try on this and this phone. It allows you to get a quick grasp of what’s going on. Again nothing is ever going to be pixel perfect but once you realise, ok background images don’t work you have to do it this way. You get into a rhythm after one or two go around of what does and doesn’t work. if your a freelancder or do it for your company, you build up a nice little template and test suite so you know what works and doesn’t. So next time you pull out your template and your pretty much there already.

Paul: you mentioned there about what everybody in the office is going to have an iphone. I’m picking up a kind of trend that everybody within the web design community are excited about the iphone or love the iphone. It’s got a very capable browser that can do a lot and they know there is a good audience there and they are just going building application or websites that are optimise for the iphone. Do you think it’s a mistake, should we be looking to produce web content for a broader range of devices or is it ok just to target one or 2 deivces.

Brian: i would personally say that it’s a bad idea because I’m more of the thought that it should build a baseline set that works everywhere and build on it. That being said google said that 505 or more of its traffic is coming from the iphone so it’s a massive player in the audience that you can’t ignore. If those are your customers and your trying to sell something and you want to give them the best experience possible you may have to spend a bit more time and optimise for the iphone. Again whoever is the main one in the market, the iphone at the moment, the competition is going to build to that spec. So if you optimise for what’s in the lead and the other ones will come along to meet it. Again it’s not a great philosophy, again you at the click here for IE click here for netscape type thing. Best viewed in iphone browser. Which i prefer to avoid but it seems not be the way its going right now.

Paul: i guess you also need to take into account how people are using those phones. For example we know there are phones out there that are more popular than the iphone but iphone users are the ones accessing the web so it’s the number of people using the web using the device rather than number of handsets out there i guess.

Brian: yeh, the most famous kind of quote number against it are nokia 1100 phone little candybar phone, for everyone 1 iphone out there, there are 14 of these nokia phones, but they are the old green screen doing sms and that’s about it. Like you said the iphone isn’t a high percentage of the phones out there but it is a high percentage of those who are using the web.

Paul: its ultimately ROI that if you’ve got limited budget for this your better of concentrating on the device which the users are actually using the web. I guess to some degree that you also know iphone users are relevantly affluent if you’re selling something. If its an ecommerce site then that’s worse considering too i guess.

Brian: very true, very true.

Paul: so just to kind of wrap up here, where should people start where should they go from here. They’ve herad this interview, maybe they are a website owner or designer what should those 2 audiences next step be in investigating the mobile web be?

Brian: from a technical point of the easiest thing to is to make a few mock ups, that’s probably low cost to just get your feet wet. Test it on a phone or two and then show it to a boss or the rest of the team and say hi look, this took me an afternoon, i’ve learnt something new look how great it is. From that you don’t need to make it public, some of the sites we have done in the past have stayed within the company for 6 months maybe a year, sometimes even never launched. Just to kind of get internally the feel of is this we want is this what we want the public face to be. Can we actually release because this it has less features. So t’s not a huge commitment you don’t have to announce it to the world, i guess that’s one view of developer. From a design perspective i guess it’s just how and the usability works, what you can and can’t do. A lot of css doesn’t work, understanding that will give you a leg up when you want to develop a real website. If you developing a traditional website you may use x hours in photoshop and x to cut it up, if you quote the same thing for a mobile website you will probably be well of, a lot of going back and forth. So learning some of this early on is probably going to help you alter on when you want to pick up and quote on a job or you want tp pitch something. Your going to be more realistic and it will certainly take more hours. Some skills will transfer but it will be a bit of learning curve.

Paul: ok thats really great thanks for coming on the show and we will include those links if you send them over. Thanks very much for your time.

Thanks goes to Andy Kinsey for transcribing this interview.

Listeners feedback:

We have been collecting some subject suggestions via Skribit. Some of the suggestions do not justify an entire blog post so we thought we would respond to a couple here.

If you want to submit an idea, use the Skribit widget in the right hand column of this blog.

Responding to email enquiries

When we receive an email asking for a quote how do we follow it up?

Well, the honest answer is… it depends! People get in touch in a number of ways and with varying levels of detail in their enquiry emails. Blunt honesty is usually the best policy so I will say that the first thing I am trying to gauge on any enquiry is whether or not we are a good fit financially with the prospective client and whether or not we can deliver whatever ‘it’ is within the requested timescales.

I have talked about this in the past so won’t dwell on it too long but, I have been bitten too many times not to consider it important. Only a few months back I spent nearly a week putting together a proposal for a prospective client that was dismissed out of hand because it was too expensive. What an utter waste of my time and, please note, a fairly large waste of this particular client’s time too. It takes a fair amount of time to wade through a hundred page document and, if they had provided budget information I would probably have passed thereby leaving the way for another agency who may well have been their first choice. Grrrr…..

Calm… calm…

So, before getting into any serious detail about a project I will ask people about their budget. If they don’t know then I will talk about the kind of prices associated with a particular type of project. If the figures seem to fit reasonably with expectations then I will ask about delivery deadlines (and why they exist). Often deadlines exist because people think they should have one but equally there may be a flagship conference or similar that the ‘site’ must be completed by.If we can reach a rough agreement on budget and timescales then the next thing is usually for us to put together some kind of quote or create a proposal.

For pretty much any job I will ask the client for a brief describing the work. In fact, most enquiries have some sort of brief attached to them (for those who don’t I often direct people to a questionnaire on the Headscape site that asks for the kind of information we need to put together a proposal). But often, briefs are extremely well written and can therefore easily be interpreted into a project. Often they’re not and require a lot of discussion to get to the bottom of what a client is looking for. Usually this will be done via the phone and email but often for larger more complex projects we will want to meet face-to-face prior to creating a proposal. Geography can be a big factor on whether that happens though!

All in all, it’s a balancing act. I have to carefully judge whether something coming is a good fit with us. This usually means being quite direct with a potential client (I’ve learned that beating around the bush doesn’t work!) but, of course, I really don’t want to upset anyone or give an arrogant or aloof impression which is possible if you’re trying to tell someone that they can’t afford you!!

It’s so hard being me. Please send more jokes to cheer me up.

Guide to CSS support in email clients

Posted in News on September 3, 2009 by Paul Boag

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

We’ve put together this guide to save you the time and frustration of figuring it out for yourself. With 23 different email clients tested, we cover all the popular applications across desktop, web and mobile email.

via Guide to CSS support in email clients – Articles & Tips – Campaign Monitor.

Looks like Campaign Monitor have updated their CSS support guide. Very useful it is too.

179. Affordance

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

On this week’s show: Ryan and Stanton are back and we are joined by Mr Marcus Lillington! We talk to Dan Rubin about making your interface invisible and answer your questions about working on multiple projects at the same time.

Podcast: Download (30.8MB)

Download this show

Launch our podcast player

News

RTFM

The first post this week is an article on webdesignernotebook.com from Yaili, in which she has a little rant on the fact that we, web designers, like to complain about how little recognition our profession has, how everyone likes to think they can make a website, and how clients don’t respect our work. But when it comes to actually doing something that could make us a bit closer to any other “official” profession, we’re bored and dismiss it. It’s so much funnier to complain about IE6!

Yaili has made a point of reading through the W3C specifications for CSSS2.1 and 3, HTML 4.01 and HTML 5. While most of us claim to be familiar with the specifications, how many of us – hand on heart – can honestly say they’ve fully read all of them?

The W3C specs are the closest thing we have to a manual and anyone who works in this field should have read them at least once, we don’t have to know them by heart or be able to quote from them, but we should be familiar with what they contain and be able to use them as a reference like any other professional book, as Yaili says, “After all, those specs lay the foundation of what we work on every day, so we should at least have an overall knowledge of them and of what they address.”

I know personally, this post has acted as an encouragement to print off the specs and read them again on the commute.

Structural Tags in HTML5

If you’ve been inspired by Yaili’s encouragement to read the HTML5 spec’s, then the next post might be of interest to you also. The HTML5 specification has added quite a few interesting and useful tags for structuring your markup and will replace many of our typical DIV entries from our code.

Of course this is an audio podcast, so I’m not going to start reading code out for you, but this is a nicely detailed article which explains the new tags such as header, footer, nav, article and aside which you can start using today, and includes a couple of tricks to make current browsers treat them as they should by using the CSS display:block attribute as well as a javascript fix for Internet Explorer.

It’s a nice primer for anyone starting to play with HTML5, so give it a read!

Redesigning your own site

And finally we have an article on A List Apart which touches on those times when you have to deal with your most difficult client. Yourself.

Lea Alcantara discusses her experience and thought process of redesigning her personal site. Your personal site has to demonstrate proficiency in the very latest development and trends in the industry while remaining true to the brand which you may have taken years to establish. Cameron Moll’s mantra of “Good designers redesign, great designers realign” features heavily in this thought process.

The article details Lea’s process from start to finish, explaining certain dead ends – like thinking she could jump right into Photoshop and play – to starting with her branding and letting the design evolve from that. She explains how she consulted with some trusted design friends and urged them to provide objective design analysis instead of personal taste.

While the article is focused on a particular site design I think there’s some good tips in here that we can all take away, or at least keep in mind when we decide to work with our most difficult client.

Interview: Dan Rubin making your interface invisible

Ryan: You did a really good talk this afternoon on “making your interface invisible”.

Dan: Thank You

Ryan: What does that mean then? *Laughter*

Dan: Select all…. delete

Ryan: Hiding the interface from your users

Dan: making you interface invisible, doesn’t mean what it sounds like. Thankfully. It’s about the idea of designing for the experience rather than for the visuals or particular features or anything like that. Making those blend so far into the background that users don’t even notice them. That’s what I mean by making the interfaces invisible.
It’s not a new concept if you do a couple of searches on The Google, you will actually find even A-list apart article back in 2000 covering the same kind of stuff. It just hasn’t seemed to sink in and one of the reasons that I’ve kind of thinking lately is that there just aren’t enough designers and developers talking about it. Usually you here about the concept of it an interface disappearing being talked about user experience (UX folk) designers or usability experts and consultants. A lot of the time designers and developer just don’t listen to people who are the same us, those who don’t do exactly what we do. We do listen to them but we just don’t listen in the same way. So if we only hear the same kind of advice from people who aren’t doing what we are doing it’s easier for us to dismiss it. I think it’s more important for people who do the actual design and do the actual development to be talking about it not just thinking about it, but doing it.

Ryan: You mentioned in your talk your talk was targets at not just people who design interfaces but (I can’t remember how you put it), not just designers who push pixels around who do the actual visual design. I’ve always associated interface design with that.

Dan: The thing that I’ve learned from clients (first of all) and then then I realised it applies to all of us. Is that when people hear the word “design” they think that it’s something visual and it’s not. The concept of design is much more basic, its creative problem solving. I mean it can be called a lot of things, but design isn’t just a purely visual task and you can design thing without any visual element. People who design applications aren’t designing the interface to the application; they are designing the interaction, that’s why we have so many. The answer to that the industry has come up with is to come up with a lot of different terms that your experience designer, that your interaction designer. The reason we have to come up with these terms is that people hear design on its own and they think visual. But that’s a visual designer, a graphic designer an interface designer. If were just talking about the process of design, it’s something that everybody is a part of. Whether you’re a developer, an information architect, an interface designer or you’re an amateur, it really doesn’t matter. Your part of the design process. It’s a much bigger concept, that’s why when talking about the idea of designing for the experience, trying to design the experience itself rather than specific parts of it and making sure those parts blend into the background. People just come away having a wonderful experience. That’s why everybody in the team on a given project has to be a member of the design process, otherwise that won’t happen.

Ryan: In your talk you mentioned mimicking physical interfaces and you were kind of talking about trying translate what we do in the real world into your interfaces and those kind of experiences, it’s that right?

Dan: yeh, well there is this concept that we all know, we all talk about look and feel. That’s a common phrase that’s used a lot. But a more specific concept and term that I recently discovered called “affordance” and it’s been around for ages. It’s not new to people who are cognitive psychologists or who are in product design and it really we do the same thing with interface design. Any that’s designed for the screen, especially if it’s designed to be used like applications are. What we are really doing is designing products and software designers again know about this, but for some reason in the web world we’ve got a lot of people who haven’t come up through the traditional lines of education, which includes a lot of that psychology background. Which is fine as long as we are open to learning this stuff and realising we should know it. It all exists and has been around for ages. It’s basically the principal that allows us to interact with objects and interfaces in the real world, outside of the screen, and understanding that we use the size the shape the texture and constancy of things that we interact with in the real world to know how to interact with them before we touch them. And that’s the concept of affordance. That’s what it’s about those aspects of an elements design and construction or what not, that us to know exactly what to do with it and how we can interact with it. There are a lot of great examples of this in Donald Normans book the design of everyday things, which is a product design book essentials but so many of the principals apply to what we do. Not just interface design but again the design of applications and design of interaction. People are using what we build and that’s no different to people using a product that you’ve designed and engineered. We are designing and engineering what ends up being a total experience, it’s not something we can hold in our hands like a physical product but it’s a virtual product.

Ryan: You mentioned that you shouldn’t have to describe your interfaces; they should be intuitive to use.

Dan: I’m very against instructions in interface design.

Ryan: this leads me catching you taking pictures in the men’s toilets earlier.

Dan: Yes, this could be seen as compromising. But …erm… (Ryan has a little giggle fit) I do that all the time.
What I’ve found once is that now that I’ve started looking outward because I didn’t start as a designer in interface design. I started as a graphic designer and doing print. And so I’m always looking at things in the real world for inspiration. For whatever reason in the past year or so I’ve started actually realising how many direct parallels, 1 to 1 parallels there are in the real world with these interfaces that are all around us, they are just 3 dimensional. We just interact with them physically instead of through the intermediary of the mouse or the track-pad and the keyboard. And really they are not that different and so the examples in the restrooms, they are full of them for some reason whether its public restrooms or private stall in a hotel where something clearly hasn’t been designed to be intuitive and thus it needs printed instruction. It doesn’t mean instructions are bad, there are something’s that are so complex that they can’t be simplified beyond a certain point, so they need some sort of instructional text. But far too often we use instructions as an easy out, where we design something that really should be more intuitive, but instead of going back and redesigning it we put a little help icon next to it (or a little bit of help text when someone hovers over it). Or we will just put up a help page, before someone begins a task, and we expect people to read this stuff. The fact is people notice it’s there, they don’t always necessarily read it but they know it’s there and so it’s adding visual clutter that is probably not necessary. If you redesigned that interaction you could get rid of the need for instruction, you make intuitive there is no need for explanation. I think it’s a good marker in the design process that if you find an element of your interfaces requires instructions then you need to redesign it and keep refining and redesigning it. It may not be a refinement it maybe redesigning it from scratch but if you’re always on the lookout for that, like “Is this intuitive? Does this work without someone explaining how it works?” if you keep on doing that you won’t dig yourself into a hole.

Ryan: sorry I’m just chuckling to myself about your toilet reference. Realising that the last person I interview was Elliot J Stocks and I began that interview with “Hi Elliot the last time I saw you were outside a men’s toilet” (fits of laughter) I’m going to be getting myself a reputation.

Dan: it used to be the water cooler and now apparently it’s the restroom.

Ryan: we have to clear up the reason the men’s toilet reference was because you were taking a picture of a diagram of the showing taps and a description.

Dan: the taps that we are all familiar with now that are motion sensitive that don’t have taps anymore to turn them on and off, you just put your hand under it. And that design is not new it’s been around, I’ve never seen one with instructions because it is intuitive. They haven’t broken this one the one in the restroom here just works but even though I knew how to use it, the fact that I saw that descriptive image and text next to it. And its next to every single sink, it was a distraction. So where I would have been able to just go and put my hands under it, for a split second I was distracted by oh what’s this instruction. It made me think that it was something that I didn’t know how to use and that’s where instructions can be bad as well. Maybe you’ve added it in because you mean well, not because you need the instructions but you think that it will help the user by having them there. That that extra bit of information never hurts and that’s actually the wrong thing to do. It has the opposite effect, it adds clutter. If something is intuitive then you’ve spent the time designing it well that people don’t need instructions, by adding them you are actually making it harder to interact with.

Ryan: its weird (repeated… 3 times?) weird occurrence isn’t it. You also mentioned looking at desktop application design and translating that to the web, I found that really interesting. Can you talk about that a little bit?

Dan: yeh, there is a lot we can learn about interface design from the desktop. We can’t do everything on the web and even with things like adobe air and flex we can’t do everything we can do we can when building desktop applications. The thing is that basic interface conventions have been around a lot longer than any of our interface conventions, that we tend to think of being created on the web. The fact is that they haven’t there are very few things that are web specific. One of the things being the silly little Mickey mouse hand icon that we mouse over a link, that’s one of the main examples that I gave. In the desktop we have a much more precise pointer mouse or the default mouse pointer rather (the arrow) whether you’re on a Mac windows or Linux it doesn’t matter. It’s consistent, it has a very specific point, you know at the very tip of that there is one pixel that we use to interact with whatever we are clicking on. It’s much easier to use and target something accurately. Whereas the Mickey Mouse hand is more vague, there isn’t a single point that is clearly defined in the icon and on top of that it only appear once you’ve already began your interaction with something. Developers and designers we tend to work with the web and applications very differently than most users. We’ll mouse over things because we want to see whatever hover effects there are, we appreciate maybe the idea of discoverability in an interface more than the average user. Whereas a regular user (if I can make such a general statement) will look at an interface and without moving their mouse around, they will decide what they want to interact with before they then go and interact with it. So if the only way of knowing something can be clicked on is mousing over it and seeing that hand icon appear it’s not intuitive. Something can easily be missed and so what I suggest is to take a cue from the desktop and only use that hand icon for what it was originally designed and that’s hypertext links. So if you’ve got a link that you’ve underline in your text on a webpage or in a web app, as long it’s an underlined text link in the body of text use it, leave it as the default. Everywhere else if you use that default mouse pointer it’s much more like using a desktop app and it’s much more precise and it forces you to design something that looks like you can interact with it before the mouse ever gets near it.

Ryan: do you think people are just possibly used to the mouse cursor changing to the pointer, and if you took that away, that could possibly have a detrimental effect rather than a positive effect?

Dan: I don’t think so, I think we are as the creators of the web. But based on the fact that I still see some users trying to double click things on the web for instance, that is a connection that none of us on the web “we don’t do that”, and that in some instances that we should. There are some instances through JavaScript where we can do that, basically if a convention exists we should try and use it because it makes for more intuitive experience. So if we have an interface in a web app that require folders for instance, and that are folders that are more like on the desktop rather than a list in a sidebar, it makes sense that we if it was a desktop app that we double click it. We wouldn’t just do a single click, so let’s make that web app respond with a double click because that’s what people tend to expect. The mouse point, that Mickey Mouse hand isn’t something people expect, because it doesn’t happen until they have already made a decision. Maybe they are used to it appearing but it doesn’t affect their decision making process and because of that if you eliminate it what you will find is people won’t notice it’s gone. You will be designing thing people know they can click on and all they are interested in is mousing toward it and clicking on it. If it looks clickable they won’t expect that cursor to change as much, otherwise people would not be able to switch from using a web browser to using a regular desktop app because that hand never appears. If they were reliant on that they wouldn’t be able to use the web for an hour and then use a regular menu-ed app, they would be confused about how the cursor wasn’t changing but that’s not how people work.

Ryan: I think as well how many times have you seen people where they look at a file structure and expect to be able to right click on a folder and have all the options that you normally have. And just because that’s they are familiar with.

Dan: exactly and that’s what I talk about learning from the desktop, that’s the kind of thing that I’m talking about. The desktop has been around and creating these conventions for a lot longer than the web has. Users have been using desktop apps longer than they have the web, maybe you can find younger users who are coming to the web first and barely using desktop apps, it doesn’t mean they don’t use their operating system, they do. They use their web browser too. Those are the first thing they interact with when they start up the computer. Until we get to the point where (and I hope this point doesn’t come) if we had a device that was only a web device and had no other interface than the web then maybe you could make an n argument for it. But I think that would be a bad thing, I would rather see the web and the desktop come together as far as interface conventions and how we work with them in applications. Rather than being web applications, I would rather see them just being applications and when you use them you don’t think about if you’re using something that’s running in a web browser or that’s communicating with a remote server rather than your hard drive. You’re just using an application to do a task, there shouldn’t be a distinction and I don’t think that users have as much of that distinction that we do as developers. We like to think that there is a huge difference between a web app and a desktop app, but the for users it’s likely they don’t think of it in those terms. This is where I complete this task they don’t think that Gmail a web app it’s not a necessarily a web email app it’s their email. It’s their inbox, that’s how they think of it and we have to understand that’s how users perceive what we do. It’s a very very different way to look it.

Ryan: Especially as the barriers are disappearing, things like adobe air for tweet deck and emailing to outlook and mail. And the walls are just fading away.

Dan: Which is a good thing, as those walls fade away we need to as practitioners on the web we need to take as many cues as possible from the desktop and help make that transition more seamless.

Ryan: you mentioned a few resources in your talk, and I bet you can’t remember them…

Dan: Actually I can. I remember…
Jared (I would remember him anyway) – he has uie.com has excellent resources about all sorts of things about usability and that’s ultimately …that’s what this is all about usability. The article I refer to at the end of the talk of Jared’s was one he published the exact same day that I came up with the description for the idea of this talk that I gave today. So it was an odd moment and it’s about the exact same thing that this talk was. Keeping your interface invisible.

Ryan: and your talk previously

Dan: well yes we have been doing work with Jared, we have been very lucky to do a couple of workshops with him. It’s always fun to share the stage with him; it’s even fun to chat with him over dinner because you always learn something. You always come away with a smile on your face even if all you learned was how to laugh and enjoy his magic tricks with the card deck. It’s always enjoyable, so hes a great resource, his site is great resource. And UIE as a company is great resource if you’re looking for information about user testing, usability it’s the place to go. And the article is very recent so look on his site and you will see it on the list of articles a specific lot about invisible interface design and the experience.
I also reference Steve crouges book don’t make me think, which is awesome, excellent, funny, good, and thin. All the things a book should be. Educational, easy to read and short.

Ryan: plane flights worth it isn’t it

Dan: exactly yes, if you don’t have it you will get it and read it and find yourself going back to it again and again and dog ear it and mark it up like crazy and you share it around and sometimes don’t get it back.
And the other book by Donald Norman, the design of everyday things. It’s really a product design book but it’s useful for anyone who deals with designs that are meant to be used by someone else.

Ryan: have you seen thedieline.com product design website.

Dan: no I haven’t

Ryan: it may have been Elliot J Stocks last time he was on I believe it’s just the thedieline.com And it’s looking at product design. They release a series of particular products like an aerosol can or packaging for a toy and look at all different packaging. It’s really interesting.

Dan: I will have to look it up.

Ryan: it’s a really good site

Dan: I eat that stuff up because the more I look outside of the web the more I find that everything that we are doing, that we feel like we are discovering for the first time has already been done. A lot of it has already been done, especially the basic concepts of product design or we talk about information architecture all the time, but we didn’t invent the term. It’s been around for decades and possibly even decades before the web was around. And it comes from architecture and way finding enviromatnetor graphic design, these are concepts that people have been thinking about for a lot longer than we’ve been thinking about them. Possibly for a lot longer than some of us have been alive. I think it puts what we do into perspective; first of all there is a wealth of information and knowledge out there that’s been proven which can help convince us and our clients. If we are going to someone and we are explaining the idea of information architecture to them and we’re not just explaining it as something new in particular for the web. This thing has been around since before the web was even thought of that making it a whole lot easier to gain credibility with clients. It’s not just information architecture it’s so many of these basic principles of interaction, they are all basic psychological principles of human interaction really.

Ryan: what was that word you’ve been using all day again?

Dan: affordance – look it up its good stuff.

Ryan: ok Dan, well thank you very much for taking the time to interview you.

Dan: thanks for letting me ramble on

Ryan: it’s been a pleasure to see you again

Dan: always. Thank you

Much thanks goes to Andy Kinsey for transcribing this interview.

Listeners Questions

Stories of our failures

Dinu writes:

Looking from afar, established agencies like yours seem to be almost perfect. However, I’m sure you’ve had to deal with missed deadlines, over-booking, etc. I would like to hear about some of these #fail stories (just to get a “you are not alone” feeling for the rest of us), and also to know how you managed to overcome these common pitfalls.
Hope this question gets a chance of being aired.

Thanks and stay awesome….

Transcript coming soon…

Working on multiple projects

Emil Sundberg writes:

Hi, I’m running a small web agency and I just found your podcast. Great show!

We’re a small team, 4 people, doing web development for clients and use Basecamp/Backpack/Highrise/Campfire (yes we’re 37signals addicts) and I think it would be interesting to hear you talk about how you work with your team in the big picture, not an individual project. How do you plan multiple projects with a limited staff? Who’s deciding what’s most important and what should be done next. Do you use and planning tools or an Excel/Whiteboard?

Transcript coming soon…

167. Beyond Technology

Posted in Classic shows on May 26, 2009 by Paul Boag

On this week’s show: Paul shares his inspiration on blog writing and we talk to Mike Kus about our obsession with technology.

Podcast: Download (31.0MB)

Download this show.

Launch our podcast player

News

Good vs Great Design

Cameron Moll is one of the most intelligent and inspirational designers I know. Where some design on an instinctive level finding it hard to describe what makes their designs work, Cameron has carefully deconstructed his work and seems to have a firm grasp of what makes it tick. He understands design. He understands the processes behind design and the rules that make it as much a science as an art.

This deep understanding of design shines through in a free PDF download (Good vs. Great Design) available from his website. The PDF has been produced to accompany his talk at the HOW design conference in Austin Texas and is packed with little insights into good design practice.

The document is only 10 pages long and yet touches on subjects as diverse and grandiose as…

The nature of great design
The differences between influence and inspiration
The need to understand a problem before searching for a solution
The power of typography
Definitions of visual hierarchy
The need for a ‘creative pause’

Obviously, there is only so much Cameron can cover in 10 pages. However, the document is a great starting point for further reading on the subject. Cameron recommends 4 books in particular…

How Designers Think (Bryan Lawson) – A book devoted to the idea that design thinking is a skill, and as such it is something that can be improved.
The Elements of Typographic Style (Robert Bringhurst) – A complete study in typography, from the broadest concepts to the smallest details.
Universal Principles of Design (William Lidwell, Kritina Holden, Jill Butler) – A reference of vocabulary and examples from the disciplines of graphic design and user interface design.
The Design of Everyday Things (Donald A. Norman) – An extensive investigation of the interplay between design and living.

If you are looking to deepen your understanding of design, then this is a great place to start.

Eye tracking findings

I have mixed feelings about eye tracking exercises. This is probably partly because I am not particularly knowledgeable on the subject. Although, I am happy to acknowledge that they offer a valuable insight into users behavior and are a useful tool in our usability arsenal, I do have two concerns…

Running an eye tracking session is expensive. If this leads to a reduction in the number of rounds of traditional user testing or the number of users tested, then I would have serious concerns.
Although eye tracking provides an insight into where a user is looking, it does not reveal anything about intent or comprehension. For example, if a user only briefly glances at a key screen element this doesn’t necessarily mean they are ignoring it. It could mean that it is well designed and the user quickly processed the information it was attempting to convey.

Ultimately, I would be concerned to see too much weight put on their results. That said, it is interesting to see the results of eye tracking and Eyetrack have released some results from one such exercise that focused on the homepages of news site. Useful nuggets included…

Dominant headlines most often draw the eye first upon entering the page.
Smaller type encourages focused viewing behavior.
Navigation placed at the top of a homepage performed best.
Shorter paragraphs performed better.
We also learned that the bigger the image, the more time people took to look at it.
Our research also shows that clean, clear faces in images attract more eye fixations on homepages.

It’s a good read and although most of the points are common sense, it is nice to have evidence to backup those opinions.

Online reputation management

“Online reputation management” – Sounds ghastly doesn’t it? Sounds like the horrible love child of social media and marketing BS. That said, for better or worse, it is becoming increasingly important to manage how we are perceived online.

As I recently said in an interview at FOWD, our websites are no longer the only place where our brand is discussed. As a result we need to engage with users wherever they are talking about us. The question is, how do we do that successfully?

Whether we are responsible for our organizations brand or just want to know what is being said about us personally, there are various techniques and tools that can help.

This week Sitepoint have brought those tools and techniques together in 3 useful and informative posts…

Online Reputation Management: The Basics – This post focuses on defining what Online reputation management is and why it is important.
Online Reputation Management: 16 Free Tools – The post brings together tools for tracking what is being said about you in blogs, on twitter and who is linking to you.
Online Reputation Management: How to Handle Negative Publicity – This post encourages you to think before responding to negative publicity and shows you how to turn negative comments to your advantage.

Past disasters like Dell Hell are perfect examples of just how important this area is. It is time we all started to think carefully about how we are perceived.

7 Quick CSS Enhancements for Better User Experience

I haven’t seen much written about CSS over the last year or so. It has been as if everything that can be said about CSS, has been said. However, just recently we are beginning to see a few CSS focused blog posts appearing. One example is 7 Quick CSS Enhancements for Better User Experience by David Walsh.

What I love about this post is the ideas suggested can be applied on top of an existing site design. They are just little ‘touches’ that make the site visually more appealing and easier to use. The 7 suggestions are…

Change the text colour of selected links
Prevent Firefox scroll bars from jumping
Give form fields rounded corner
Control where page break occurs when printing
Show icons that identify the file type of link destinations
Change the cursor when it hovers over a submit button or label so it actually looks clickable
Increase the clickable area of a link using display:block

Each suggestion comes with an explanation of its benefits and the code required to implement.

Admittedly not all browsers will understand these enhancements. However, because they are not crucial to the functionality that really does not matter. Its a nice example of graded browser support.

Interview: Mike Kus on our obsession with technology

Paul: Okay, so joining me today is Mike Kus from Carsonified – good to have you on the show.

Mike: Good to be here.

Paul: It’s really nice. So, as the listeners will have gathered by now, we’re doing a whole series of little interviews off the back of ‘The Future of Web Design’ conference, where we can do all our interviews in one go, rather than spreading them out over time.

Marcus: Yay, we like this.

Paul: So Mike has just finished his presentation and there’s some excellent stuff in there, but you were quite kind of, what’s the word… You were quite harsh to the poor web design community and their obsession with details of technological stuff.

Mike: Yeah, maybe yeah.

Paul: You know, all of this “does it really matter whether your code validates”, not that you used that as an example, but I can’t remember what examples you did use, you did have a few didn’t you.

Mike: No, well I mean things like [a lot of debate to un-debate] which I come across and you see lots of times. You know, it’s a question that’s probably never going to get answered. I just come across it all the time still, and it’s like make up your own mind and move on.

Paul: I got the impression that you feel that perhaps as a community we’re a little bit petit, and overly concerned with minutia.

Mike: No, I mean, I love the web community *laughter*, no I do I love it and I love being part of it; it’s great. The funny thing is I started off two years ago doing web stuff, and I really do feel now two years on, that web design… I don’t see many differences to me between web and print now. It’s all the same thing to me, you’re just designing, you know. And I guess because I feel design is so important, I sort of maybe feel a bit left out *laughter* in conversations, because people don’t seem to talk about the design as much. And the reason that talk was called “Forgotten Web Standards”, I mean I know some guy heckled at the end saying about it not really…

Paul: “It’s not really a web standard.”

Mike: No, and I know that. It’s just a cool title I thought – it gets people thinking, and really the part that related to web standards was just because I feel like for a site, good layout and thinking about things from a graphic design point of view contributes to accessibility on a web site.

Paul: Yeah. And also to be honest, I mean what is web standards other than a set of guidelines and criteria. Equally there’s sets of guidelines and criteria about good design; use of colour, you know.

Mike: Well that’s it, yeah. To be honest it was really more just a good title, and I didn’t expect people to start analysing.

Paul: But they will!

Mike: Yeah I know, yeah; I should have known.

Paul: But I think you raised an interesting point, or a good point which is that we can get so hung up in the logistics of how web sites are built that we’re not always giving the attention to the design aspects of it. And even more specific than that, it’s the whole discussion about, you know, we spend a lot of time talking about usability and accessibility, but aesthetics do matter. We almost have this attitude in some ways that aesthetics are just skinning it afterwards.

Mike: Yeah, yeah I know, I agree. I think aesthetics do, well to me they matter. You know my opinion is just my opinion and other people have different opinions, and on a day like today you’re going to get people talking about the code side of things, and I just feel that I know what I know best, and it’s what I can bring to it, it’s what I can bring to the table, and people can take away from it what they like. Someone’s got to do it haven’t they.

Paul: It’s quite interesting, in your mind you don’t make a differentiation between the print stuff you do and the online stuff you do. Surely there are differences Mike.

Mike: Of course there are differences, yeah. But the processes I go through as a designer are the same.

Paul: Right.

Mike: I’ve noticed that much more; I guess of course there are differences. I mean for a start you’ve got to think about things differently in web design because you’ve got to make sure that people understand where you’ve got to go to click things; how you’re going to navigate your way through the site. But once you sort of know that, it’s sort of… Once you’ve built a load of sites and you know that, that’s just something that comes naturally to think about.That’s a different part, that part where you just get used to doing it, then ,he essence of the process is the same. Designing something for a web site, I find there are the same pitfalls and hurdles designing for print as for web. And the funny thing is, and I really feel now as well, that the coding side… I’m not the best coder in the world, and probably not the worst, but I’ve learnt loads in this past year, and I’m writing much cleaner code now than I was a year ago. I enjoy that too, and I know it’s important.

Paul: Yeah. But like you say there are lots of people discussing that, and not as many discussing the design side of things.

Mike: Yeah, and I totally read up on stuff about code; I know it’s important. I guess for me, sometimes I’d want to go in line and get involved in discussions about design, and I know you get Photoshop tips and tutorials don’t you, but that’s not really design.

Paul: Yeah. But a lot of that’s about using the tools of design rather than the principles of design.

Mike: Exactly, it’s all tools yeah. I’m interested in the principles and the ideas and imagination part, you know.

Paul: You talked in your presentation about design aiding the experience, you know; experience based design. I was just interested to hear you talk a little more around that, about how you feel that design can… In what ways can design affect the experience that a user has and what do you mean by the ‘the experience of a user’?

Mike: Well I guess I mean when I go to a web site, and for a start, at least if we’re just talking from an aesthetic point of view, if I return to, and again this is something that appeals to me, if I go to a web site and it gob smacks because it looks so beautiful, that in one foul swoop is my experience of it, you know? But I think there are other things more technical, and when I say technical I don’t mean in a code way, but in a technical graphic design way, you can enhance people’s experience just by… I like the idea of merging more, like you said, things I learnt at college about graphic design and where to make people look in a page, and how to highlight. Combining the technical bits of graphic design, what to highlight and what to push back, how to take people’s eyes in to the bits you want them to read, and then the slightly less important stuff, pushed back a bit, and combining that with an aesthetic. So if you’ve got a great aesthetic and you’ve really thought about where people are looking on your page, and how they’re going to follow through you’re site, to me those things combined is what I mean by designing for experience; a good experience. Because you could obviously design for a bad experience!

Paul: Well obviously, yeah, that’s easier! Another thing that interests me about your work in particular, and really people need to go and look at examples of stuff that you’ve done to grasp this, but you have a very distinct and obvious style; I think you do anyway. So I can look at the stuff you’ve done for Carsonified, and then even the stuff you’ve done here for Microsoft and there’s obviously a consistent theme to that. Do you think that having a very strong style creates problems sometimes when you’re trying to reach different audiences, and you’ve got to battle with your own style, do you find that a problem?

Mike: Well, this is something I find really interesting because growing up as a graphic designer and stuff, I was always someone who basically… For a start if you’re working for clients and you’re an agency, and you’re getting different jobs, you’ve obviously got to be able to create something completely different one day to the next, potentially. And the funny thing is I actually carried that through into my personal work, and I was like “I can’t do something like this because I’ve done something that looks a bit like that before.” But then you know how you can get famous illustrators who basically churn out the same stuff all the time and they get seriously famous, and one company gets them to do something, and another company…

Paul: They come to that person because of that style.

Mike: Exactly, and I think the only reason my stuff you’re seeing… if you looked at the Orchestrate site, that’s me turning my hand to something through a brief.

Paul: Yeah that’s true actually, yeah, because that has got a very different style.

Mike: I’m just answering the brief there, you know, so it is something I can do.

Paul: Sorry, I didn’t mean to imply you couldn’t, it’s a constant discussion isn’t it.

Mike: I don’t think you implied that *laughter* But it’s interesting, and the only reason I do bring my style into the projects you see that overlap each other is because I’ve had the freedom to do so.

Paul: Yeah, and I guess to some degree, the style that I’m exposed to is the style that’s aimed at people like me.

Mike: Yeah.

Paul: So the fact that you did the Microsoft stand here at ‘The Future of Web Design’, well actually it’s good that it’s got the same style as the other stuff that’s going on because it’s a style aimed at web designers and people like me.

Mike: Yeah, and another thing about doing stuff that’s similar, is you do get to get known for a certain thing, which in some ways I think “is that good or bad?” I don’t know, but I think I’m keen to make sure people know I can do different stuff. But at the same time I’m happy to be known for a certain style, because I think it’s sort of like an identity you get. And so I’d like to keep a balance there, but I definitely don’t mind being known for something that’s got a feel about it.

Paul: Yeah. I mean equally after saying that, which kind of brings me on to the next topic I want to talk about, is that the style that I typically associate you with is quite illustrative, you know, you’ve got this certain way of doing things. And then your set of slides for this week weren’t at all like that, they were very typographic, and you did talk a little bit about typography. We interviewed Mark Bolton on the subject of typography as well. I’m interested in your take on typography because you seem to use letter forms almost as design tools rather than necessarily as standard typography if that makes sense.

Mike: Yeah, well that’s interesting because when I did those slides, the reason they look like that is because I basically took a theme and I got interested with that, what’s his name… I can’t remember, a Swiss graphic designer, very famous I can’t remember his name now, it’s escaped from me, but it’s sort of Swiss modern graphic design, and I was looking at Swiss modern graphic design and some Russian constructivism stuff on Flickr, you know. And because when I was at college, that sort of graphic design, I was brought up on that; it was the first thing I was interested in, and because it was a graphic design themed talk, I used that as the style. And it just so happened that throughout it, the experiment with type and shapes and stuff was something that just happened in making those slides, and I suddenly realised I was getting something out of using type in a graphical way, it’s not just about the words, I mean a slide I like – my own stuff I love! *laughter* – that one that says (and I loved doing that slide and I think it looked great) was the one that said “buck trends and break conventions”, and conventions was all mashed up in different ways. There’s something beautiful about type though isn’t there, like huge letters, and I wish I could have seen those slides, because that screen was so big.

Paul: It looked spectacular, yeah.

Mike: There was a huge, massive letter N, you know. I guess now it excites me, type; I think it can be the basis for great design, not just in a traditional typography way, but actually great graphic design. I guess I think the whole type debate as in “where are we going to get all the fonts from”, or “what’s going to be the standard way of using them” – for some reason I don’t feel restricted by the web font thing.

Paul: No, it’s interesting. Mark was saying exactly the same thing as well.

Mike: It’s not something that bothers me, and I’m quite happy.

Paul: I mean a lot of the ways, certainly the ways you used them in the slides, we’re talking about using type as a graphic element in those cases, rather than necessarily to convey large amounts of copy; it’s a subtlety different thing going on there.

Mike: Yeah, yeah.

Paul: I was also quite interested when you talked in your presentation about a logo design that you did, and about how you were being stopped at every turn by the client effectively because they were saying “no, no, we don’t want to be associated with that etc.” So you then added in a strap line into that which you then built the logo around the strap line rather than the brand itself. Now, that was quite interesting because that gets into the realms of relationship between copy and design, and how the two things work together. And in that case, you came up with the strap line did you?

Mike: Yeah, I’m quite into… I mean, I don’t want to say it myself, but Ryan for example seems to think I’m quite good at copy – which is nice of him to say. It’s a way I work quite a lot, I’ve done loads and loads of logo / branding stuff in the past, and I did something, for example, for the Body Shop once. Basically I could do anything, and it was about raising money for a school in Kosovo to get it built, and they just wanted a poster. I just thought of a strap line anyway, because I could do anything I wanted. It was “building a future”, and that was all it was, and it had all these huge letters. Well it had “building a future” and the letters were all piled up and leaning against each other. I guess often the first thing I think of is copy whenever I’m designing something, especially if I’ve got a new site to design, I’m like well what are the words, what’s going on, what’s it about, is there a strap line, do you need one – you know – what’s written in the first paragraphs in the home page, is there something in there I can use to spark the idea for the design. I think copy in that respect has got a massive relationship to design. It’s rubbish trying to work with Latin text.

Paul: Yeah I know, lipsum, yeah.

Mike: It’s alright for that filling in a paragraph or something, but it’s nice to have that proper copy to hook your design on to it; it can be really helpful.

Paul: The thing that you intrigued me with is that you were going through things like layout, colour, typography, then you hit imagery, and you said there’s a whole presentation there. I want to know what the presentation is, I want to know what is it that you know, obviously there’s a lot of depth there that you couldn’t cover, and I’m just interested in that.

Mike: I think what it was, you’ve talked about my illustrative stuff already, so say you use that for the sake of argument right now because you could apply this to photography as well, I guess to me a site doesn’t have to be like you put it together; I don’t know, I’m going to put a picture here or an illustration there… It can evolve round an illustration from the very beginning. I know it’s a pretty one off site, but the Twiggy site for example, which is just a bit of fun, really quick, but that was just literally me, do what the hell I want, just have fun, and it wasn’t the most practical site design maybe, but you know that just literally was an image that built up and changed, and it was the basis for that site design. It wasn’t just in the site it was the site, and it had the huge letters in the background. I only had a short slot, and if I had more time I would have gone into why I felt it can be the basis for your site, not just something you add to it. Your site can grow from your photographs and illustrations rather than putting them into your site.

Paul: That’s a nice way of thinking about it, yeah. Because I do tend to start with the grid structure and the layout, and all that kind of thing, and then slot imagery in which I can see what you’re saying, you can miss a trick there if you’re not careful.

Mike: Yeah it’s funny I’m changing the way I work lately, and I was talking to Keir about this. I’m starting to think about stuff like you remember when Andy Clarke said he works from the inside out, and I’m starting to do that design wise.

Paul: Right, okay. You mean start with the detail or something?

Mike: Well start with something on the middle of the page. I just open a Photoshop document to start, and I know at one point in the page I’ll have like this… For example, I’m working on something at the moment, it’s got the planet Earth, and all I’ve got on the page is the Earth, I’ve got some bits coming off of it, and then I’m going to add this descriptive paragraph, and I haven’t got anything else on the page at this point, I’m just building it out.

Paul: Wow, that’s quite interesting.

Mike: Rather than thinking “ohhh”, and worrying about things like navigation afterwards, because it’s so easy to just go “no, nav-i-gat-ion”, and then I think no wait a minute what have I done, it’s literally just this autopilot.

Paul: Yeah, and to be honest that’s almost why, in the end, I moved on from design in my career, because I felt I was beginning to do exactly that, go on autopilot. So there is this need to find ways to refresh the way you’re working and stuff like that.

Mike: The funny thing is, it’s natural progression as well. It’s not a choice I’ve made, I just found myself doing this.

Paul: That’s good, that’s really good. You talk a lot about “I had a lot of freedom on this project; I could do what I wanted.” You said that several times in this interview. Do you like that, or do you like having constraints? Because a lot of people that are listening to this are going, “well it’s all well and good for him because he’s working on internal projects and he doesn’t have clients”, and that kind of thing, although you are doing client work now. So there we go, there’s a nice comparison between the client work you’re doing and the internal stuff. Where does your heart lie?

Mike: Yeah, I don’t know actually. Sometimes I hate having no restrictions. Sometimes, no restrictions is the worst thing in the whole world, I hate it. Sometimes it can be terrible, sometimes it’s great. Because if you’ve got no restrictions at all sometimes it’s so hard; that Microsoft thing, I was like “what the hell am I going to do, I haven’t got a clue”. For a start, I’ve never designed a stand before, let alone just an idea. I spent three days getting to that, just getting to the beginning of that idea. I literally produced nothing for three days. The fourth day I was like, “I think I’ve got something”, and that was hard because it had no restrictions because the whole point they came to us was because they wanted to do something different. So the pressure was on to think of something really different, and it’s hard when you can start anywhere. Sometimes it’s really nice to have restrictions, like that Orchestrate site was nice; I got back after Christmas, and John Hicks has put together roughly what had to look like.

Paul: Right. You had to carry on with his style.

Mike: Yeah sort of. I mean it did progress from that, but it had a logo and a colour scheme and a nice, tidy, neat… you know I just had to follow it through and it was nice, I enjoyed doing it. It was a nice break from “you can do anything”, which is actually harder I think.

Paul: Right, that’s interesting.

Mike: Much harder actually. I used to do music quite a lot, and in a way what was always helpful was restricting our instruments completely, and not having much to work with. Because it sort of sets you on a path at least, where as when you’re starting out and you can go any which way you want…

Paul: Yeah, it’s too open.

Marcus: It’s the starting part that’s the hard bit; it’s that initial creative spark. If somebody said “this is my idea, I want you to build me something,” then it’s like great I can do that. But, what’s better about when you’ve got, because I do a quite a lot of music as well (or did), it’s when you get something going and it’s good, that’s more satisfying than working on someone else’s work, but if it’s one of those days when it’s just not coming then, you know…

Paul: Which brings us on to what I wanted to wrap up with, which was you mentioned this slide about bucking trends and breaking trends and that kind of thing, and you advised against CSS galleries, you advised against Smashing Magazine’s trends for the last year, which people turn to for inspiration because they struggle to know where to begin. So if you’re advising against those things, which by the way I think is an excellent piece of advice, we asked Jim Coodle this as well, where does your inspiration come from? Where do you turn to if you don’t turn to that kind of thing?

Mike: I guess I do advise that, but I don’t like to sound like I’m telling people what to do *laughter*

Paul: Well if you stand on a stage…

Mike: I guess, yeah. But the funny thing is, I’ll be in a book shop… A year ago, for example, I was in a book shop and I picked up Jamie Oliver’s book, it was made of a nice sacky cover, don’t know if you’ve seen it, it’s got white and blue in it, it was beautiful. The graphic design and the layout was lovely, and I was like “oh I’ll buy that”, not for cooking, just because it looked nice, and I was like “I’m going to design a web site like that”. And someone on Twitter just said something about how they’d just discussed Mike Kus’s talk over lunch and how much of an idiot I am, and something about imagine your web site in print, which is what I said at the end.

Paul: Which I thought was brilliant, but he had problems with that did he?

Mike: Yeah, well he said it’s absolutely useless, different mediums, why would you do that.

Paul: It’s to take it out of context, and give yourself a chance to look at it from a completely different angle. It would be the same as projecting it huge on a wall or sketching it out in chalk, or whatever.

Mike: Well that’s it, exactly. It’s like what you said a minute ago about it’s so easy to go into autopilot with these things, and I think sometimes you need something to jolt your brain into looking at it a little bit differently. Because to me there are a lot of things on the web… Just imagine if you get a web site like your average one – it’s got the gradients all over it and everything, you put it on a magazine page; it would look weird. You have to ask yourself, why are you doing that. I know it’s a different medium, and I think we can all be clever enough to realise that, and there’s obviously bits I’m not going to say it’s got to be like a magazine, but I think it’s worth asking yourself those questions.

Paul: In the same way as in the talk, which I thought was really nice, was you had these amazing set of slides that had a very distinct look, and that was being projected massive on a wall, and yet you transposed that into a poster you gave away to people. So you were crossing those mediums and using inspiration from both which I thought was excellent; it was good. It went well didn’t it?

Mike: It was good, yeah I was pleased.

Paul: Excellent. Well thank you so much for your time Mike, that was really useful, and I think it will be very helpful for people. Especially freelancers that are stuck by themselves, and stuck in their own routine of working. It’s nice to hear how other people work, so thanks.

Mike: Cool. Cheers, thanks a lot.

Thanks goes to Gareth James for transcribing this interview.

Listeners feedback:

APIs, source control and Ryan Carson

On show 164 Ryan Carson shared some more advice on running and building web applications as part of his ongoing series for Boagworld. Although Ryan’s advice is excellent, Boagworld listener Glen Bennett wanted to offer an alternative perspective over a couple of Ryan’s suggestions.

Hi Paul and Marcus, this is Glen Bennett from small business hosting. I was excited when you had Ryan Carson on the show talking about web application building, finally someone on the show who knew what they were talking about, however he cave out some information that was a bit misleading and I wanted to clear it up for your listeners, first of all he talked about spreedly.com and indicated that their fee is an alternative to the standard processing fees, in actuality it’s a fee that’s in addition to all the standard processing fees, there service sits in front of the processing gateway and therefore it’s an additional fee and there fee is not insignificant, in addition to that you would have to build an interface to their product. So there is some building cost at your end. I agree that building a processing engine is pretty substantial and something that you want to get help with if you possibly can there are packages out there anywhere from a few hundred dollars to a few thousand dollars that are actually pre-written source code that you put into you payment package, you have to do that pretty early in the process so that you can make sure that your user registration matches up with the processing system.

The second thing he talked about which is a source code repository, which is GIT hub, fantastic product and I recommend it highly, I think all developers should go and look at it, however the free service is primarily for a public repository so I don’t think he would have wanted to put DropSend source code into a public repository so their free service is not something that you’d probably want to use for your web application unless it’s an open source web application and there is a small fee for GIT hub but a lot of hosting packages come with SVN included for free so you might want to look into that, you can use GIT locally on your local system and then SVN them up to your free repository on the internet so you have a remote repository that’s free during development time. So there’s a couple of tips, a couple of corrections for web developers, I hope that helps and I want to thank Ryan Carson for the additional information that he had in his tips, I found it all very useful. Thank you very much.

Blog writing inspiration

Recently we received an email from Jon. He wrote:

I was wondering how do you find inspiration for your articles? How do you expand upon your initial idea and is there a process you go through when writing an article? How long do you spend writing an article? And lastly what do you think is the hallmark of a good article?

These are all good questions. The majority of blogs have long since been abandoned by their authors. The owner either struggle to think of new content or finds running a blog more time consuming than anticipated.

I don’t claim to have all the answer when it comes to successful blogging. However I can share with you a few principles I work by…

Limit your time – I work best when I have a deadline. If I have too much time I over think things and pick at the details. This makes blogging high maintenance and hard to keep up. Unless the content of a blog post is going to be used elsewhere (see Recycle below) I will never spend more than a couple of hours writing something. To me a blog is about sharing ideas, not writing a perfect piece of copy. I know I am not the best writer in the world and so make up for this by sharing ideas on a regular basis. In order to do that, I limit the time available for each post.
Keep an ideas list - Ideas for blog posts occur to me all the time and I have trained myself to constantly ask ‘would what I am doing make a good blog post?’ However, you can guarantee my mind will go blank the moment I sit down to write one. That is why it is important for me to keep a list of ideas. Whether you add them to a notebook or keep a list in WordPress, you need to make it as quick and easy to add ideas as possible. Also, when I add an idea, I try to flesh it out a little. Instead of just adding a title I also include a rough synopsis of what I want to cover.
Create an outline – Before I begin writing, I always create an outline of what I want to cover. I usually do this using Omni Outliner where I jot down random thoughts on the subject. I then sort those ideas into a logical structure. Once the structure is in place, writing the final post is much easier. This is because I know where I am going. It also ensures I lead the reader through a story, rather than throwing random thoughts at them.
Write first, edit later – Its easy to get caught up in spelling, grammar and structure to the detriment of flow. I tend to write posts in one go. I don’t re-read what I have written until the whole thing is finished. Stopping to check what I have written breaks my focus and leads to disjointed articles that take longer to write. Better to write the whole thing and then re-read the post afterward editing it then.
Write for your audience – Before I begin a blog post I always ask myself whether this will be of interest to my audience. Sometimes I indulge myself with personal posts, but most of the time I work hard to stay on topic and only write content that is focused on meeting my readers needs. This applies not just to the subjects chosen. It also to the style of writing and terminology used. For example, I try to avoid too much technical jargon because it may not be accessible to website owners. However, I don’t always succeed!
Write for scanability – There is a vocal minority in the blogging community who frown upon image heavy, list based, blog posts. However, I think there is a lot to be learnt from them. People who subscribe to my blog read a lot of other blogs too. With so much information to keep abreast of they rarely have time to read everything I write. I therefore write in a way that lets them get the ‘gist’ of a post without reading every word. Lists are one way to do this, as is the use of imagery. However, I also use headings and front loading too. Wherever possible make content easy to skim read. If you do not, users are likely to skip it entirely.
Ask for suggestions - I have found the best way to come up with ideas for my blog is to ask my readers. I actively encourage people to email me with questions, reviews or comments and these inspire ideas for posts. In fact the very question I am answering here would make a great blog post. Hmmm… perhaps I should stop before I waste the opportunity :-)
Ask your readers opinion – As well as asking for suggestions also ask for feedback. A good blog post does not have to be you sharing your words of wisdom with the world. It can also be asking a question and encouraging feedback. Some of the best content on blogs can be found in the comments, rather than the actual posts. Try to write posts that encourage a dialogue rather than a monologue. Also if you do manage to spark a passionate discussion, followup with a second post that summarizes the views expressed.
Recycle – Finally, I am a great believer in recycling ideas. For example the answer to this question will appear on my blog, on the podcast and also will make a great Audioboo tip. Many of my best blog posts have either come out of a presentation I gave or a chapter from my book.

This is not a definitive set of guidelines and every blogger will work differently. However, this approach has helped me to continue blogging for over 4 years. I will leave it to you to judge whether the quality has remained high ;-)

Finally, if you are a regular blogger I would love to hear your thoughts on keeping your blog fresh. How do you come up with ideas and ensure the quality of your posts? Let us know by adding a comment below.

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.

159. Special Guest

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

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

Podcast: Download (29.1MB)

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

Download this show.

Launch our podcast player

News

Alkaline

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

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

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

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

16 design tools for prototyping and wireframing

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

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

10 Lessons every freelancer should learn

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

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

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

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

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

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

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

Sarah: Yup

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

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

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

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

Sarah: Really?

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

Ryan: To spend in the pub (laughs)

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

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

Paul: Yeah, pays the bills.

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

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

Sarah: Really?

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

Ryan: and a mac to develop on

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

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

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

Sarah: the app store!

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

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

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

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

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

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

Sarah: No, he was an old man.

Ryan: Oh, right. OK

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

Paul: Was he in just a pair of shorts?

Sarah: Yeah

Ryan: A pair of shorts and a smile?

Sarah: No, and a newspaper.

Paul: Strategically placed.

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

Paul: That’s OK.

Sarah: Oh, sorry.

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

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

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

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

Ryan: Yes, we only like the nice clients.

Sarah: Yes, we all like nice clients.

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

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

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

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

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

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

Sarah: Yeah.

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

Sarah: Do you skim-read them?

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

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

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

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

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

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

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

Sarah: Of course! (all laugh)

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

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

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

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

Sarah: Exactly.

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

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

Ryan: Er, yes.

Paul: Yes, ah the Nettuts, oh yeah.

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

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

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

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

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

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

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

Listeners Questions:

Is Using Off-The-Shelf Software Wrong?

Jon Writes:

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

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

Thanks and keep up the good work!

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

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

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

Therefore, the pro’s are:

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

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

Don’t implement something you don’t understand!

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

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

How do you price and quote different projects?

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

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

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

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

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

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

157. SXSW09

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

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

Podcast: Download (28.0MB)

Download this show.

Launch our podcast player

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

The panel at Boagworld Live

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

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

The guests included…

Daniel Burka – Creative director of Digg.com
Andy Budd – Author of CSS Mastery
Jeremy Keith – Author of DOM Scripting
Joe Stump – Lead Architect at Digg.com

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

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

Thanks to Zeke Franco for the photograph