The introduction of CSS3 and HTML5 brings with it a host of new capabilities. With most modern browsers supporting CSS3 and HTML5, implementing them into your designs is becoming easier. Understanding what is now possible with these new standards can help you create better designs more efficiently and effectively than ever before.

Stephanie Sullivan Rewis and Greg Rewis will be presenting a full day workshop at the User Interface 16 Conference November 7-9 in Boston. They’ll dive into what the introduction of HTML5 and CSS3 means for designers and developers, and what you can accomplish today by putting it into practice.

Here’s an excerpt from the podcast.

“…We’re talking about these capabilities like the drop shadow or the text shadow that up until now have required a designer to go into Photoshop, do it all, export that as a JPG or a transparent PNG or, God forbid, a transparent GIF then hand it off to a developer to implement into the design.

While that’s worked for us perfectly for 15-16 years of web development, the issue is if we all lived in the perfect world where the client said this is what I want. I want it in this size, this is the wording, I will never change it, I promise to never change my mind. Then we wouldn’t even be having this discussion. But as every designer knows, that’s a utopia we’re never going to achieve because clients always change their mind. They always want to tweak

On the viewer’s side, this is an image with no SEO benefit since there’s no selectable text. So if we can create this image using CSS and HTML, then we have it appear correctly and still get SEO benefit from it since it is text.

Not only can we make a change by simply going into a text editor and correcting the spelling, but we also can go into that same text editor and make a few changes to the CSS and completely change or update the look of the design as it’s presented in the browser…”

Tune into the podcast to hear Stephanie and Greg address these points:

• What can designers take advantage of today with these new CSS3/HTML5 standards?
• How have CSS3 media queries changed designing for multiple platforms?
• How does a tool like Modernizr work?
• How do CSS3 and HTML5 help with Accessibility?
• What do designers need to know so their design gets coded as intended?

Do you have experience with CSS3 and HTML5? Share your thoughts in our comments section.

Recorded: July, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]

Full Transcript.

Jared Spool: Welcome everyone to another episode of the SpoolCast. I have with me today Stephanie Sullivan Rewis and Greg Rewis who are going to be delivering a fabulous workshop at the User Interface 16 conference in Boston.

They’re going to be delivering the workshop on Everything a Designer Needs to Know About CSS3 and HTML5. Hey there Greg and Stephanie. How are you doing today?

Stephanie Sullivan Rewis: Good. Hey Jared.

Greg Rewis: Doing great, Jared.

Jared: So I’m really excited about this workshop and I really wanted you guys on the program this year because what I’m seeing, and you can tell me if you’re seeing the same thing, is that the new changes that are coming down with HTML5 and CSS3, the browsers are finally getting to a point where they’re adopting these things.

So you can actually do much of it, though not all of what’s in the specifications, and because of that there’s all this new power and capabilities and there are all these things that you used to be able to do that you can’t do anymore.

All these things have changed and I think it really behooves a good designer to understand what this is all about so they can talk intelligently with the developers they work with and understand the capabilities and design for them. Is that what you guys are seeing too?

Greg: Absolutely. I think that there’s a lot changing and I think, even more importantly, there’s a lot of confusion out there about what’s changing, you know, what can we do, what can’t we do.

Sort of exactly as you pointed out that we hear a lot in terms of the buzz of HTML5 but then when you dive into it you then you start running into the, “oh, but you can’t do that yet, oh you can’t do that yet, or yes you can do that but only on a Thursday wearing a red shirt.”

You know? So I think that’s probably one of the biggest challenges for designers is trying to cut through the marketing of HTML5, if you will, and actually start seeing both the forest for the trees and the trees within the forest I think, to use some really weird hobbled together analogy.

Steph’s looking at me right now going what? Forest with trees?

Stephanie: No, I got it. I got it. I think, like Greg is saying, you know, HTMl5 does not include CSS3 but the marketing for the new Web 2.0 HTML5 certainly makes you believe everything is under the HTML5 umbrella.

And of course we’ll be talking about all that but CSS3 is a completely different specification and is probably more interesting to designers even than HTML5 itself.

CSS3 is going to give us, or is already giving us, amazing new capabilities for more flexible design, more succinct, light weight design which is always better for SEO and accessibility and things like that.

Greg: And rounded corners.

Stephanie: And drop shadows for everything.

Jared: Oh good. I can put my drop shadow cream away. I store it in my medicine cabinet right next to the make your logo bigger cream.

So along with drop shadows and rounded corners help me understand. So what are some of the things designers could take advantage of today because the browsers are supporting them that come with these new standards?

Greg: I think there you go. Rounded corners. Jared, I mean, once we have rounded corners the world is a utopia, right?

Jared: It absolutely is. It is. I think the whole reason the debt ceiling is having problems is because every chart that they show us has square corners.

Greg: That’s true.

Stephanie: Oh my gosh. We could solve so much.

Jared: Exactly.

Greg: There is certainly, obviously, rounded corners, drop shadows, the text shadow. Those things are obviously going to add in some interesting capabilities, if you will, for designers.

And you know, I’m sure a designer might even, at this moment, be thinking well wait a second, I can do that today. I go into Photoshop, I make a box, and I put a rounded corner on it or I write some text and I put a drop shadow on it.

Sure you do but that’s exactly the problem. You’re in Photoshop and you’re not in a browser. One of the truly, sort of, exciting things for these new CSS3 capabilities is the idea of tearing down the need for images themselves. Now, before the designers go running for the door going oh my God we’re going to have a web without pictures.

That’s not what we’re talking about. We’re talking about these capabilities like the drop shadow or like the text shadow that up until now have required a designer to go into Photoshop, do it all, export that as a JPG or a transparent PNG or, God forbid, a transparent GIF and hand it off to a developer to implement into the design.

While that’s worked for us perfectly for going on 15 years of web development or 16 years, whatever it’s been, the issue is, as any designer out there can relate to, if we all lived in the perfect world where the client said this is what I want. I want it in this size, this is the wording, I will never change it. I promise to never change my mind. Then we wouldn’t even be having this discussion but as every designer knows that’s a utopia we’re never going to achieve because clients always change their mind, always want to tweak.

And in that work load that we’ve had established for these last 15 years that means the designer has to get involved again, even if it’s just, “oh my God I misspelled the boss’s name in the graphic.”

The designer has to go back in, go through the Photoshop, Fireworks, whatever, Illustrator reader, whatever program they’re using, workflow, to re-output that image. Then on the flipside you go OK that’s great. I have time to do that.

I want to do that. On the other side, on the viewer’s side, this is an image. This is not selectable text, for example.

That means I’m not getting any SEO benefit out of the text that’s baked into the pixels of that image. So if we can do things in pure HTML, in the markup of the page, and CSS to give us that creative expression of the drop shadow or whatever it happens to be then we’re benefiting on two sides.

Not only can we make a change by simply going into a text editor and correcting the spelling but we also can go into that same text editor and make a few changes to the CSS and completely change or update the look of the design as it’s presented in the browser.

Stephanie: Right. They may want a green background instead of a blue one or a green gradient. We can do real gradients now with CSS3. Or they decide they want a different font style. We can do real fonts on the web now. Actual web fonts, not the boring Georgia and Verdana and Arial and the things we’re so sick of at this point.

Greg: I’m not sick of Arial. I love Arial.

Stephanie: Yeah, The Little Mermaid. We can actually use real fonts that have licensing that allows us to use them on the web and we’ll talk about that a little more. And change everything from the gradient, the amount of rounding on the corners, or drop shadows, or background colors and fonts all without ever entering a text editor again and that’s a lot of power.

Because everybody knows, like Greg said, clients invariably or bosses invariably change their mind. We’ve also got some amazing things we can do with opacity and RGBA.

Greg: And we can even combine it all by laying it all on top of each other by using multiple backgrounds and things like that that’s really, really exciting as well.

Stephanie: Lots of changes in the backgrounds and borders module. We can do border images. Then, if you really want to get crazy, you can start rotating things and making them move and animating them all with CSS.

Greg: And you should.

Stephanie: No, now I like to say just because you can doesn’t mean you should.

Greg: But I do.

Stephanie: However, Greg likes to do those things.

Jared: Greg has always been a sort of MySpace kind of guy.

Stephanie: Yeah. There will be gratuitous movement when Greg does his portion of the session.

Greg: Every attendee will go out with the knowledge of which one of us actually has a design sense and the answer is not the male part of this partnership.

Jared: So it feels to me like there’s really a lot of really important things in terms of these standards but there are also just a lot of capabilities. You know, some of the stuff that I’ve seen people doing with like drop shadows it takes me a second to look at that and say “Oh wow that’s a really cool effect.”

I’ve seen really neat sort of 3D effects and stuff that was all done by just changing a couple of simple attributes.

Greg: That is one of those areas where you call it out. We’re really on the cutting edge. In terms of, even though I realize that in the specification it does say 3D, I sort of have a beef with them calling it 3D because 3D, for me, is coming out of a 3D program. You know, I’m seeing an Avatar style model and it’s really not that.

It’s more what I like to call “postcards in space”. It’s a two and a half D. I can turn the post card over and see the back side and have something actually on the back side and that is really, really exciting and starting to be embraced by some of the browsers, specifically if you’re in the mobile arena, developing for the IOS or Android platforms.

It’s there. It’s available right now and we can start using that. You’re right, that’s truly amazing when you start thinking about hey wow, that’s not even necessarily a graphic that was exported out of Photoshop but rather is all done live, if you will, rendered by the browser, out of text really.

Stephanie: Greg brings up a good point and that is the point about mobile because many designers are now being pushed to go ahead. And a lot of them, I think, started with print then they get pushed into well now you need to design for the web and now it’s being pushed forward to and let’s add mobile into that or maybe even designing for the TV.

Designing for a lot of different sized screens and experiences. And the interesting thing about mobile is we do have a lot of web kit based browsers there and web kit, in many ways, has some really interesting properties that are web kit only like masking. Masking is you know, a way… it’s just like in Photoshop or Illustrator when you apply a mask and only show a portion of it.

We can do that in web kit browsers now. And mobile, you know, Android and IOS, having so many web kit based browsers, that’s a real bandwidth saver and technique that we can use, or designers can use, right now for those devices.

So there’s a lot of really interesting advanced features in the mobile space that we can actually use today.

Greg: I think if you were to sort of be coming at it in a newbie today I’d almost say it’d be more exciting to head in that direction than on the desktop browser because of the excitement going on in the mobile space.

The best news of it all is we can actually design, one of the other great new capabilities of CSS3 is something called a media query that allows us actually to design for both at the same time and have a responsive response, if you will, to the device that the page is being rendered on or shown on so we can move from the desktop through the tablet space down to the mobile phone in your pocket space all with the same content being adapted through the CSS.

That makes it even more exciting, I think.

Jared: So let me understand the media query thing. So previously, before HTMl5 and CSS3 and many of the servers, you had to do some sort of device detect and then you’d send your phone pages, off your small screens, off to an M dot page which would then have a completely different design and then if you made changes on the site you had to change them in both places simultaneously. But now…

Greg: You were basically maintaining two different versions of the same site.

Jared: Right, right, which had all the implications of that. But now with these media queries I can actually tailor CSS to the different devices.

So I only have one design. It’s semantically marked up and then the CSS decides well if I’m looking at this on this device then I show it this way and if I look at it on this other device I show it that way.

Stephanie: Right. And for the most part that is a good way for many sites to handle.

It’s not to say there won’t be any M dots. There are times where it’s still appropriate to have a completely mobile site but many sites would benefit from the one web approach which I like a lot, the put your content up and then show it in different ways to devices with different capabilities and sizes and resolutions.

Greg: In our session we’ll actually be talking about that because one of the topics that we’ll cover is exactly that, is how do you approach designing for the different style screens and Steph will begin a very, very long explanation about her love affair with something called Modernizr.

Jared: Talk to me about Modernizr because people keep talking about this and I don’t know what it is.

Stephanie: I adore Modernizr.

Greg: See? I told you.

Stephanie: Everything that I’m building right now… Because I am a front end developer and everything I am building right now uses HTML5 or CSS3 to some extent or another depending on, clearly, the client’s browser specs and such. It depends on how far I can take it but I’ve got a couple that are just full bore.

But either way I use Modernizr. I’m very against browser sniffing which means using JavaScript to try to figure out using the UI string or whatever, you know, what browser is this and what should I serve it?

The problem with that is people don’t keep it up and so new browsers are literally coming out every week and sometimes what happens is they’ve got something that your browser sniffing string doesn’t understand and so it kicks the user back to some old, crappy version of the site, if you will, and not the most modern, capable version.

So there are a lot of reasons I don’t like sniffing but hat’s one of the main ones. Modernizr is a JavaScript library. It’s very small. The reason I love it is it checks for the capabilities. It doesn’t sniff for you know, “what user agent is this?” It says, “what is this user agent capable of?” And it’s very simple to use.

It requires a simple class on the HTML element and then you include the JavaScript. What it does is when the user surfs to your site they hit the site, Modernizr tests their browser very quickly and gives you back a whole string of classes on your HTML element.

That will tell you, it’ll say like multiple backgrounds, no CSS transform, and just goes through all the HTML5 and CSS3 new properties and capabilities and gives you feedback on what you can and can’t serve to this browser.

Then you can choose to either progressively enhance and serve something different. Say a browser doesn’t do border image. OK, great. Now I know that. Well then I’m going to write a class using no border image as the first piece of that selector to feed it a plain border image, something more simple.

But the more modern browser that does border image now gets the beautiful experience that is enhanced and then you can also find through JavaScript or serve through JavaScript different scripts to, what I like to call, regressively enhance meaning OK maybe it doesn’t matter if this older browser gets rounded borders and we’re going to leave that one square but it does matter that they can’t do local storage.

So I need to serve a JavaScript that’s going to store that in cookies or something like that.

Then I can store a script loader that says oh there’s no local storage available therefore I’m going to serve this JavaScript only to the older browser. It just gives you a super, fine tuning ability to not throw all the scripts and things you need for your site onto modern browsers that don’t need them.

So the better the browser the better their experience and older browsers can have an enhanced experience with JavaScript or extra CSS or whatever you need to do. I absolutely love it. It’s super powerful.

Greg: Told you.

Jared: This sounds really cool. Now, can this also help me with making sure that the stuff I’m producing is as accessible as it can be?

Stephanie: Yes. It definitely can help with that in that part of accessibility is making sure that everyone can see it. You don’t want to do a CSS3 technique that causes your people not to be able to see things.

Let’s say you have a gradient and some text on it or you’re using a technique that without the technique the text may not be very visible on the background.

If you know that technique is not possible you can feed that browser a nice, high contrast background where something might be missing for them, say a lovely subtle gradient.

Greg: The idea we talked about earlier with a text shadow. Very often you’ll use a text shadow to pull the text out of the background to give it that stand out readability, if you will and if my browser doesn’t have that text shadow capability the text falls into the background and becomes less readable.

So that, you know, that would be one of those situations where I would want to use Modernizr to perhaps swap out that background or in some way…

Stephanie: Change the color of the text.

Greg: Yeah, change the color of the text or whatever that might be to pull that out. So very definitely just from those visual style of techniques but speaking just from just general accessibility that’s one of the other exciting things that it doesn’t get a lot of play, if you will.

It’s not the sexiest of topics to talk about when we do talk about accessibility but it is a very important thing to consider throughout the designs.

As a designer who is approaching a project how do I need to be thinking in order to provide a design that can become accessible in terms of when it becomes code, if you will.

Stephanie: And accessible doesn’t mean… You know, a lot of people think about it as “Oh that means my page works for non-sighted viewers, for blind viewers.” That is not the only thing accessible means. Accessible also means the person with carpal tunnel that needs to tab through your page is able to access all the content and links or the person with low vision, hi that might be me.

Once you’re over 40 let’s face it. We all get lower vision as time goes on. If text size increases, and I’m a big stickler for this, if text sizes are increased by the user you need to make sure your design doesn’t fall apart.

I had a site that I showed in a talk I did yesterday that I built for somebody last month. Really cute design, very whimsical, very beautiful, well designed, very graphical.

And on the home page of her site her navigation, which was real fonts using font face, is all on these little, like, garden vegetable bins that look like they’re sitting on a little…

Greg: Little signs that you see in the gardens.

Stephanie: Yeah, little signs and there’s a bin of corn ad a bin of tomatoes and they have little signs and that happens to be her navigation.

Well, what happens when the person surfs into your site with say 32 pixel base font instead of 16 pixel base font, which is the default, that means they now have giant text on your site and all the cute stuff on the vegetable bins is now blown out all over the page because the vegetable bins are still sitting there.

Well, the beauty of some of our new CSS3 techniques are we have something new called background size and I was actually able to make that page fit the text no matter what size that user is surfing with on their text using a background sizing technique that makes the whole page basically zoom to the size of the text just like a browser would do.

If you hit to increase the text size many browsers will now zoom but if somebody comes into your site with larger text already they don’t zoom and so there are some very simple CSS3 techniques that if you think about it will make your site work and be more flexible and more accessible to all users.

Greg: I think that’s one of the really exciting things right now, Jared, is that you know, because this is all so new you tend to look at a technique or at a specification and you go, “oh, OK, well that’s how we’re going to use this.”

But, the really cool part is because it’s so new we haven’t explored all the different ways to use this and a lot of this is just sort of, you know, creative exploration where you suddenly go, “wow. Hey, wait a second. What if?” and “Can I use this?”

Another simple example that I’ve seen Steph use is using a drop shadow to become a border. You go wait, how can a drop shadow be a border? But you know, there’s some really interesting things you can do with that to even overcome some of the limitations of CSS3 because oh yes there are limitations too.

Stephanie: We have no ability to do multiple borders.

Greg: Yeah, exactly. Something as simple as hey we’ve got multiple backgrounds but we don’t have multiple borders but there’s some really neat tricks that we’ll be talking about in our session on how to overcome those limitations and sort of creatively use some of the new capabilities to do that to give the illusion of what you’re trying to achieve even though you actually did it without doing what you thought it were doing, as it were in the case of a multiple border.

I think that’s one of the really exciting things because this is all so new that we’re seeing a lot of experimentation going on and we’re hopefully going to share with the attendees some of the experimentations that we’ve been doing and the successes that we’ve had with those.

Jared: Yeah I mean, it feels to me like the new specifications give us some really interesting building blocks.

I remember when I was a kid I got my first Lego set and it had just square blocks and the occasional curved thing but it didn’t have all those weird shaped unusual pieces that you get in the Lego set today which all of a sudden gives you this capability to build things you couldn’t build before.

Greg: In other words, your Star Wars Death Star was just a cube?

Jared: It was a cube. It looked a lot like my basic fortress and my GI Joe’s bunker house.

Stephanie: Your castle.

Greg: Exactly.

Stephanie: Right. Exactly. One of the beauties is really experimenting with each site that I build. And sometimes Greg, he will be looking over my shoulder or he’ll be helping me.

I always like to get him to do my JavaScript. He’ll be doing something and he’ll go, “hey, what if you did this?” And then I go, “Oooh.” Then I’ll try something new that I never would have thought of before.

So we kind of feed off of each other. What if you could do this? What if you could do that? So it is kind of an exciting time.

Greg: Except her part of feeding is, “Greg, don’t rotate it that much. Don’t make that move.”

Stephanie: Greg, that doesn’t need to go out of its boundaries just because it can. But seriously you know, it is really fun because there is so much that we’re figuring out.

They give us the spec but it’s up to us to put it through its paces and figure out all the cool things we can actually do with it that are super practical and that really give us flexibility in our designs and, like I’ll say over and over, real text which is so great for real search engine spiders and people needing to use assistive technology.

Jared: So one of the things that you and I talked about when you were explaining to me this session was that there are things that designers can do that make the coder’s life easier and there are things they can do that makes the coders life hell. So the person that’s actually taking the design and translating that into what the browser’s going to see.

And you’re going to talk a little bit during your session about what a good designer needs to know in order to make sure that the design they give to the developer is easy enough to code up that it actually gets implemented the way they want it implemented instead of, you know, reinterpreted.

Greg: That section is going to be called “How A Designer Can Increase Their Lifespan” or “How To Shorten It Very Quickly”.

Jared: So what are some of these things that can get us into trouble if we’re not paying attention?

Stephanie: Well, I basically do work for a lot of different agencies so I work with a lot of different designers. I don’t design myself. And many times, or I should say most of the time…

Greg: Well you don’t design anymore.

Stephanie: I did.

Greg: Because you are a tweak-aholic.

Stephanie: I’m a horrible tweak-aholic and so I find it much more cost effective to pay someone to do the design to get what I want rather than try to do it myself. And you know, there are much better designers than I am, and I learned that early on. I work with a lot of different designers, whether I’m hiring them or I’m being hired by the designers.

And usually, that means I’m getting a PSD. Many, many, most designers work in Photoshop even though I wish they would work in Fireworks. And so Photoshop there are different ways that effects can be created using masks or smart objects or what’s the little drop-down? It’s called effects. Greg, I’m looking at Greg because he knows the Photoshop lingo so much better than me.

Anyway, there are ways to add effects to an object in Photoshop. There are ways to keep it more editable, and one of my biggest complaints is that now we can do real gradients on the web, there is a way that a gradient can be created so that it’s still actually a gradient.

I can open it, and I can see what color did this gradient start and end on, and what color are the stops in this gradient, and what percentage of the gradient did this stop get put on?

There are other ways that gradients can be made where they’re just created as an effect and a bit map, and I have to sample, sample, sample the little bits and try to figure out how to recreate this gradient as code.

And these are the days where Greg probably likes to be in a different office than me because I’m just ready to throw things through the window after awhile.

And so, there are ways to make your coder’s life more simple in the way that you create things, and another one is…

Greg: Can I mention something?

Stephanie: I don’t know if I should let you. Keep it kosher.

Greg: I’m thinking consistency.

Stephanie: Ah, yes, there’s one. I just finished or I’m finishing right now the most beautiful design from a very well respected agency that I was very excited to start on for a startup. Because in my mind there was this assumption that this meant we would have grids and well spaced and thoughtout things, and a certain number of colors of grey text, and a certain consistency to the rounded borders that are everywhere and in their color and size and blah, blah, blah.

What happened was not at all. I have like 18 colors of grey text with a variety of sizes. I have 38… No, no, as of yesterday 39 different gradients that I have had to export because none of them are ever quite the same enough to re-use, and my client has an eagle eye and notices if I don’t use the exact gradient that the designer put.

They’re all shades of gray, essentially, except for a couple.

So, consistency, reusability is really good for your design.

Greg: Another thing that we’re talking about when we talk about screens is how to create certain design elements that can grow or shrink based upon the content that’s going to be poured into them because as designers one of the things that very typically happens is the Lorem Ipsum syndrome.

You’re working with dead text, a dead language, if you will. You’re not working with the real content that’s going to be poured into this design.

Stephanie: And you can make sure that it fits just perfectly.

Greg: Right. All those three boxes that sit side by side on the page are all exactly the same height because you use the same three Lorem Ipsum paragraphs to fit into them.

And so, one of these things that we try to get across to designers is you need to begin to think in terms of that flexibility that the web is built upon. That this is not a magazine design, that I can nail everything down, cut it all out with scissors and paste it up because it’s never going to grow.

This is one of the hardest things, I think, for designers to get their head around, and they still go, OK, but I still want three boxes of equal height right here.

Well we’ll tell them, you can have that, but you’re going to have to give us some reusable elements. It might only be three pixels, please give us more, but it might only be three pixels of vertical color that is the same that we then can use to allow to grow and repeat, you know, in order to adjust for that varying content.

It’s these things that we’re going to try to call out and show through some of Steph’s painful experiences. What went wrong in this design, and how might it have been created to have been much more flexible, much easier to implement from a front end developer’s perspective.

Stephanie: And that only helps the designer because I know how I am about my code. When I hand code off for someone to build a site with it…

Greg: It not only helps the designer.

Stephanie: Right. When I hand my code off to the back end team that’s going to implement the CMS or whomever is going to build the actual site from it, that’s my baby.

I mean, I really want that code to keep its integrity and to stay beautiful and to not get cluttered up, and designers feel the same way about their design. They did things they did for a reason, and they want it implemented.

When they see it on the web, they want it to look like their design. There are things they can do to help assure that that is exactly what happens because I don’t blame them at all. I feel the same way.

Jared: Yeah, no, it makes perfect sense to me, this whole idea that when you have those translations that happen because the way that they designed it doesn’t translate nicely into the code language that you have to put it in.

Then, there’s interpretation, and that interpretation is very likely to change the underlying meaning and intention of the design, and that’s just going to break what the designer wanted to do.

It’s funny we’ve been doing work, the new UI16 website’s being designed by Dave Shea, and I’ve been teasing him about… He’s a fabulous designer, but his mind reading skills really suck. He says, yeah, I keep working on it. He says, I try my hardest. I said, yeah, but…

Stephanie: Actually, I saw that yesterday when you tweeted something, and it looks beautiful.

Jared: Yeah, the site has been great to work with, but there are exactly those things. He’ll come back with some stuff, and we’ve been working with a guy named Marc Amos of Boston Design Studio. He’s coding up Dave Shea’s stuff, and Dave does a fabulous job of handing off.

Few people know CSS like Dave does, so you know, the stuff he hands off comes very close, but there is interpretation that happens. When we get the real copy in there, when things shift around, there is all this sort of translation has to happen, and there’s conversation that has to go back and forth. The way you hand it off really makes a huge difference.

Greg: And the problem is earlier in the work flow that the issue, if you will, is created the more it’s going to snowball even down to the point of certain experiences where Steph handed the code off, and then only to find out that the CSM was not even capable of handling the code that she handed off.

And so, it was one of those things had that been clarified early on in the process, completely different approaches could have been taken.

And so I think, you know, if you really boil it down, in a lot of projects the design is that initial piece. So if we can catch that early on and the designer is creating that integrity early on that is going to, you know, allow itself to be maintained throughout the entire flow process, flow through the tearing it apart, putting it back together in code, and then dumping it into a server or CMS.

If the design integrity is good initially, then it’s going to help avoid all those problems or potential problems downstream.

Stephanie: And one thing that I do when I work with designers and I’m building a site is I look at their beautiful designs and then as I’m breaking an element down to build their component of it, I think, OK, what happens if, let’s say, there’s a name across the top of the little address box.

Well, what happens if that’s a hyphenated really long name, or what happens when this heading wraps to two lines?

I go back to them and I say, what would you expect to happen? What would you expect to see if this happened? Many times their answer is, oh, I didn’t think of that.

Jared: Right.

Stephanie: Well, I hope you could do this because there are so many different ways we can build things. There’s no one true way. So, this is one thing designers need to think about as they’re building their comps is push themselves to put extra text in one box over the other one, put a longer heading somewhere and think through, now what would I like to happen.

The quicker they can transfer that knowledge to the person, the front end developer building, the more solid their design will be in the end because they’re going to have to hand off.

Let’s say they’re building a flexible design, and there’s an image or here’s the one I love. I see this all the time, the pattern of design where you have an image and next to it, and it’s in a box, and next to it in the same box is some text which is the same height as the image. This is a very common design pattern. What happens when there is much more text?

Greg: Or much less.

Stephanie: Right. Much less is a little less of a problem because the image will hold that box open. The bigger problem comes when there’s more text. And now, either the text is going to run out of the box or the text is going to push the box open taller. Now, your image is sitting there looking all cut off hanging in mid-air.

One of the little tricks that designers can do is don’t crop your image the exact size of that box. Give me an image that’s maybe twice the size of the box with the portion that you wish to be shown the height that you show, say, it’s the top portion or it’s the bottom portion.

Maybe, it’s the bottom portion, but you can give me a bunch of sky, you know, extra sky so that if the box grows, the sky shows a little more, or maybe it’s the center of that image, but it can grow on the top and bottom.

I, as a developer, can then situate that image in the box, either centered or the top or the bottom, but there is something more to show so that your design doesn’t break apart. Little tricks like that are super important, especially with imagery for designers to hand us not just cropped exactly what they wish to be seen.

Jared: Right. That makes perfect sense. So, it sounds to me that if I’m a designer and I get my head around how the development process works, what you guys are doing, taking the designs that I’m putting together and translating that, knowing what the capabilities are like CSS3 and HTML5 so that you can take advantage of those capabilities. But also understanding where the design needs to have that sort of flexibility.

Then, that gives me the advantage of making sure my intention is there. It might buy me a little bit more design time because the development time will be cut shorter, and it will just also improve the overall quality of the results, especially in those weird edge conditions.

Stephanie: Right. Absolutely.

Jared: Cool. Well, this has been really fun. I’m really looking forward to the workshop. For those of you who are thinking of coming to Stephanie and Greg’s workshop, it’s going to be November 7th through 9th in Boston at the User Interface 16 Conference.

And you can get more information on that at uiconf.com which is a site that has a lot of great resources on it, and we are very excited about the conference that’s coming up.

This is your first time speaking at the UI16 Conference. We’re really happy that you will be part of it this year.

Greg: You did assure us that Boston will be warm in November, right?

Jared: Oh, it’s going to be awesome. [laughter] You know, this climate change thing has some advantages.

Stephanie: Well, we live in Phoenix, so we’ll be expecting something really lovely.

Jared: Yes, it’s going to be a dry cold. [laughter]

Stephanie: Exactly.

Jared: Oh, November, it’s usually not too bad. Last year we had a bit of rain, but most of the time… The snow doesn’t start until later, so we probably won’t have any snow but you might want to bring your skiing jacket, I’m just thinking.

Stephanie: Excellent.

Greg: I’m glad you didn’t say winter clothes because that just would have been jeans for us.

Jared: That’s probably not it. It’s going to be great to have you. Thank you so much for taking this time to talk to me today about all this.

Stephanie: Thanks for having us, Jared.

Greg: Thank you, Jared.

Jared: I want to thank our audience for listening and, of course, I want to thank them for encouraging our behavior. So, until next time SpoolCast, take care. Thank you.

Blogger Pam Rodriguez has done a tremendous job summarizing the first day’s sessions. You can read them here:

• My talk: Mobilism & UX: Inside the Eye of the Perfect Storm
• Bill Scott’s talk: Designing for Mice and Men
• Josh Clark’s talk: Mobile Apps: Native or Web-Based?
• Noah Iliinsky’s talk: The Steps to Beautiful Visualizations
• Julie Zhuo’s talk: Facebook: Data-Informed vs. Data-Driven Design Decisions

Our own Web App Master, Luke Wroblewski, also has some great summaries:

• My talk: Mobilism & UX: Inside the Eye of the Perfect Storm
• Bill Scott’s talk: Designing for Mice and Men
• Josh Clark’s talk: Mobile Apps: Native or Web-Based?
• Noah Iliinsky’s talk: The Steps to Beautiful Visualizations
• Julie Zhuo’s talk: Facebook: Data-Informed vs. Data-Driven Design Decisions

Thanks to Pam and Luke for taking such great notes.

You can follow along with the second day by following the #UIEWAMT hashtag or the UIE Web App Tour attendee and speaker Twitter list.

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code BLOG.
Seattle · Minneapolis

Subscribe to our podcast via

For years, the mobile web experience was little more than an afterthought as most design teams focused on catering their designs to the desktop. As Luke Wroblewski explains in his session “Why You Should Design for Mobile First” from the User Interface 15 Conference, this is becoming an increasingly backwards way of thinking.

In the past, the constraints of mobile were a hindrance. This made the mobile web was a painful experience. But things have taken a dramatic turn in recent years. As the capabilities of the mobile web continue to progress, it allows for the constraints to now become beneficial in the design process.

The first constraint Luke mentions is screen size. Because the screen size of mobile devices is significantly smaller than on a desktop, you have to remove roughly 80% of what is on the screen. There is simply no room. So you must focus on what’s important and make decisions on what needs to be included. This leaves you with a prioritized list that you can apply in multiple situations.

Luke goes on to talk about the performance speed of mobile devices. If you’re on the go and need to use your device to access the web, you don’t want it to become cumbersome. When you take this into consideration, a focus on speed and performance is a necessity. By consolidating your code and being aware of the size and amount of things that are being transmitted, you can really increase your speed and “get down the number of things you’re throwing over the wire.”

Luke also talks about context as a constraint. In other words, how people are going to engage with their mobile devices. Mobile devices are with us all the time and are constantly in use. When designing for mobile, think about how people use the device all day, wherever they are.

This brings up the idea of simplifying your interface so that a user on the go can complete a task “with literally a thumb.”

Web applications on mobile devices are no longer just ported from their desktop versions. In some ways, they perform even better than their counterparts. As Luke says, designing for mobile first can actually help refine and improve the desktop experience.

The full recording of Luke’s discussion about designing for mobile first is available, along with the seven other Featured Talks, and Jared Spool’s keynote as part of UI15 OnDemand. Also included are all of the handouts and presentation slides from the talks as well as those from all 8 full day workshops. Get more information or place your order for UI15 OnDemand.

Luke is also one of the Masters joining us for the 2011 Web App Masters Tour. We’re coming to Seattle on May 23-24, 2011 and Minneapolis on June 27-28, 2011. For more details on the agenda and other Masters visit UIEtour.com.

Subscribe to our podcast via

Jason Fried

Jason Fried brings a unique viewpoint to any design discussion, one informed by years of success with his company, 37signals. Recently, Jared Spool was able to chat with Jason about 37signals’ current work. If you’re joining us at the UIE Web App Masters Tour in Minneapolis or Philadelphia, Jason will go into even more detail. Among the topics they’ll cover in this podcast include:

• the design and development process behind 37signals ID, their single-sign on feature for their four major web applications which serve more than 3 million customers.
• what they’ve learned about controlling ballooning projects
• their on-going experiment with rotating design and development teams

37signals is known as a organization that does little, if any, testing with users prior to launching a feature. Since UIE advocates user research and usability testing as common components to most design projects, sometimes folks wonder why we’re so interested in the process at 37signals, and why we’re excited to have Jason to speak at our events. We don’t believe there’s only one right way to run a design project, and it’s hard to debate the success Jason and his team have had with their process. In this podcast, Jason discusses their experience with building the 37signals ID, and what role testing played in this project:

…we don’t really do any formal sort of usability testing. I think that usability testing, or bringing outside people in to look at this, it clearly would help in some ways, but… you only kind of really get this when you’re going through the real process.

…you can bring people in to read a screen or to kind of fake go through the process, but it’s only when you’re hurried and you’ve just logged into Basecamp and you need to check a new to-do list, and all of a sudden you see this screen, for real… that’s the only time you can really evaluate whether or not this is clear or not. And so I think it’s really hard to simulate those situations.

After listening to Jason’s thoughts on testing and process, how do you feel they would work in your organization? Share your thoughts on their process and your experiences in the comments. After listening to the podcast, you won’t want to miss Jason’s presentation, Backstage at 37signals, at our Web App Masters Tour in either Minneapolis or Philadelphia. We look forward to seeing you there!

Want to learn more from Jason? See his session – Backstage at 37signals at the Web App Masters Tour

Subscribe to our podcast via

Bill Scott

If you’re using advanced, or “rich” interactions in your web applications, then it’s likely you have Bill Scott and Theresa Neil’s Designing Web Interfaces on your desk, if not your bedstand. Published in 2009, it is perhaps the definitive tome on rich interactive design patterns for the web. Bill has dedicated a significant portion of his career to dissecting such interactions, creating the Rico JavaScript library, curating the Yahoo! Pattern Library and now overseeing UI engineering at Netflix—one of the first companies you think of when you think of Ajax-y web interfaces.

It’s hard for us to picture talking about web apps without talking about Bill and his research into design patterns. His new book is full of examples where he slows down time to explore each micro-stage of an interaction. Our Jared Spool got together with Bill to discuss his ideas about the nuances of Interesting Moments.

Jared and Bill discussed,

• Bill’s experience of aggregating successful interactions in the Rico JavaScript and Yahoo Patterns Libraries
• How his challenges at work lead to him writing Designing Web Interfaces
• How his interface research lead to better ways to capture interactions for documents and prototypes.
• Dancing Hamsters
• …and more

Bill speaks about both patterns—successful interaction models for common interactions—and anti-patterns. By showing what not to do, anti-patterns often provide insight on the right way to do something.

A good example [of an anti-pattern is from] the old Yahoo Photos site[…] dragging several photos into an album, there’s no indication that the photos actually dropped into the album folder, and there’s no feedback that says, “Oh, there was three, but now there’s six items in the folder.”

The designers had dropped in two extra “idiot boxes”, which is a great anti-pattern. The first idiot box says, “Do you really want me to drop these items into the folder that you so carefully managed to use your mouse dexterity to get to?” Not quite that message, but that’s gist of it.

Then there’s another pop-up that says, “Hey! Guess what? We did what we said we would do. We actually put those items in the folder.” It’s sort of, as Alan Cooper calls it, “stopping the proceedings with idiocy.” The missed moments were just those little, subtle feedbacks that could have been done, instead of the hammer approach, by having those boxes pop up and interrupt the user.

The take away for our work is that this interaction was backwards. It gave no indication that you were doing something successfully while you were doing it, and then penalized your time after completion with dialog boxes to confirm your success: “You did it!” After dismissing the dialog, you were left with an interface that didn’t reflect any of your changes.

By adding clues that the move was happening during the action, and then reflecting the changes with interface cues afterwards, we can make the experience smoother while avoiding “idiot boxes” altogether. (This interaction is detailed in chapter 5, “Overlays” of Designing Web Interfaces)

There are many more pearls of Bill’s wisdom available in the podcast, please tune in!

Don’t miss Bill’s full presentation, “Designing for Interesting Moments“, at our Web App Masters Tour. He’ll be with us in San Diego, Minneapolis, Philadelphia and Seattle.

Let us hear your questions about interesting moments in the comments below…

In part 2, we have new topics to muse over. Are you building out a web 2.0 strategy? Having trouble communicating and documenting the design process? How do you tie the visions of company culture and customer experience together?

We answer these burning questions and others with four more podcasts in the final part of this series. Here I focus on the following experts:

• Steve Mulder and Riccardo LaRosa on Web 2.0 Strategy and Design 
• Dan Brown on Documenting Design
• Brian Kalma on melding Zappos’ company culture with their customer experience
• Robert Hoekman on introducing design frameworks

So lets get started with this week’s podcasts.

Web 2.0 Strategy and Design with Steve Mulder and Riccardo LaRosa

When creating a web 2.0 strategy, you start thinking about what features to build, how to tell if the features are working as expected, and how results change over time. We brought these considersations to two of our favorite people when it comes to Web2.0 Strategy; Steve Mulder and Riccardo LaRosa

In this podcast, Steve and Riccardo focus on these issues and bring some great case study examples from Reebok and HumanaOne to life. We also talk about how starting small and iterating is most successful,but not an easy sell in many situations. You’ll want to listen to how they overcame this challenge and other Web 2.0 adventures they had.

Read more detail on Steve and Riccardo’s interview.

Documenting Design with Dan Brown

In this interview, Dan and I explore the documents that help make large design projects go smoothly. We discuss how these important docs can become living documents (ones that evolve when necessary) and how Dan believes there’s value in seeing them as actual team members. This may sound odd, but Dan nicely clarifies what he means in the podcast.  

During the podcast, we spent some time with two types of documents: concept models and flow charts. These particular documents are intriguing because they don’t cover concrete ideas (which are easier to document), but instead cover the higher-level abstract ideas that often power the site invisibly.

Read more detail on Dan’s interview.  

Company Culture Meets Customer Experience with Brian Kalma

Looking for ways to tie your company culture and customer experience together? Then you definitely want to hear this interview with Brian Kalma of Zappos. I reached out to Brian to find out how Zappos, a company that conducted over a billion dollars in online sales last year, brings together their web site, call center, and social media outreach, to create a unique customer experience.

Brian discusses Zappos’ four-week training program that everyone must go through within the company; how the entire company (over 1300 is part of his design team; and how Twitter and Facebook has empowered their employees to communicate with customers.

Read more detail on Brian’s interview. 

Introducing Interaction Design with Frameworks, with Robert Hoekman

So what are design frameworks anyway? Drawn loosely from the idea of coding frameworks that software developers use to more efficiently build software, design frameworks are an aid to assembling a design.

In this podcast, Robert Hoekman joins us to discuss design frameworks. You can compare frameworks to design patterns, although patterns tend to be smaller, more specific solutions. Frameworks, when built out, can contain design patterns. 

Frameworks help create consistency in interface elements to help solidify the UX. Robert uses frameworks on all his current projects. He starts out with a check list of all the main elements what will help a person accomplish a goal.

Read more detail on Robert’s interview.  

Podcast Library

The Web App Expert podcast interview series is just a small taste of the podcasts we offer. Look for our ongoing podcast show - Userability, where folks like you call in with their UX issues of the day. And we have many other podcasts on a smattering of topics from various experts.

Creating a Great User Experience at Your Organization

Brian Kalma’s podcast is all about creating a great user experience at Zappos. It’s exactly what we’re going to talk about at the UIE Roadshow: Secrets Behind Designing Great User Experiences, except we’ll be focusing on how to create a great user experience at YOUR organization. We’ll be in Seattle, Denver and Washington, DC at the end of June. Explore the program and be sure to use the promotion code SHOW09 when you register for a $75 discount off the individual price.

Enjoy the podcasts.

This week, our long time friend, Molly Holzschlag, joins us to discuss the cutting edge of web standards as they apply to web application development. Molly is the unsinkable author of a metric ton of web development books, is a noted teacher, and an in-demand consultant in the field. There’s likely no one better to ask about web standards than Molly.

There are a number of new standards that have come out recently, HTML 5 being perhaps the most notable for web applications, because it was brought forth with applications in mind. New features, like canvas, are designed to improve dynamic interactions between the presentation layer and the behavior layer, for example, with things like ECMAScript, more commonly known as JavaScript. JavaScript’s usage has really matured and become nearly indispensable as developers have really begun to exploit its full capabilities. JavaScript’s importance to front-end developers continues to grow.

In this podcast, Molly and I discussed the impact these and other advancements are having on web application design and development, along with the tremendous benefits building with standards (or even a subset of them) brings to the lifecycle of a product.

(During the episode, Molly and I touched upon the critical security exploit that effects all versions of Microsoft’s Internet Explorer for Windows. Please be careful out there, folks.)

If you found this podcast interesting, you’ll be happy to know that Molly will conduct a full-day workshop for web application developers on harnessing the power of web standards in their work at our Web App Summit in April 2009. Please join us and take your work to the next level!

We’re curious to see if any of our audience is venturing into the HTML 5 waters, or using other newish standards in their work. Won’t you let us hear your story in the comments?

We love to talk to Steve Mulder (from Molecular) and Riccardo La Rosa (from Isobar) about building out a Web 2.0 strategy and incorporating elements, such as social features and highly-interactive elements to the design.

Steve and Riccardo work with mainstream organizations, which may not be as familiar as, say, a Silicon Valley startup with what the state-of-the-art is for these types of features. In this interview, they told me about the solutions they worked on with Reebok (a sports apparel company) and HumanaOne (a direct-to-consumer health insurance company). We talked about the challenges they faced on these projects and what they needed to do to overcome them.

During the podcast, we discussed how to determine what features to build, how to tell if the features are working as expected, and how results changed over time. We talked about how starting small and iterating is most successful, but not an easy sell in many situations. You’ll want to listen to hear how they overcame this challenge and other Web 2.0 adventures they had.

Enjoy the podcast? Well, you can join Steve and Riccardo for their UIE Web App Summit full-day workshop, Web 2.0 Strategy and Design, and learn how to apply the elements of social media, openness, rich interfaces, and emerging digital interactions to your designs.

I think the 2009 UIE Web App Summit (April 19-22, Newport Beach, CA) has one of the best line ups of speakers we’ve ever had. We’ve spent the past six months hand-crafting this excellent program that’s all about planning, designing, and building web-based applications. We’re very excited about it and you should be too.

In this podcast, Brian and I discuss the Summit program details. You’ll hear about all four days of the conference — the great topics and why we chose this set of experts. You’ll get a great overview of the sessions and see, first hand, why we think it’s so exciting.

We’d love to see you in Newport Beach, CA this April. Listen and let us know what you think.

This week, we have the latest installment of the SpoolCast crew (which we recorded back in December, and then got busy — sorry!).

Almost every company has to struggle with the balance between customer needs and internal business objectives. In this episode the crew examines the recent situation at Facebook. While trying to please both users and build a business model, the fast moving organization has stepped on many toes.

Our panel took a look at this delicate balance and how the future UX team at Facebook might help to resolve this. Facebook makes a fascinating business case from which to extract lessons, and we think you’ll enjoy it, too.

Returning to the crew this week was our foreign UX correspondent based in Hong Kong, Mr. Danial Szuc. Dan is the Principal Usability consultant with Apogee Usability Asia Ltd.

Joining the crew for the first time in this episode were special guests David Armano, VP of Experience Design for Critical Mass and Robert Hoekman, Jr., CEO of Miskeeto. You can learn more about David at DavidArmano.com and you can learn more about Robert at rhjr.net. I think you’ll find their contributions to the panel insightful!

We’re holding the Summit in beautiful Coronado, CA on March 26 – 28, 2008. We’ve got a great line-up of presenters, including Andrew DeVigal, Steve Duenes, Derek Featherstone, Kim Goodwin, Sean Kane, Jeremy Keith, Steve Mulder, Leisa Reichelt, D. Keith Robinson, Bill Scott, Luke Wroblewski, and Indi Young. Jared Spool will also be presenting UIE’s latest research on web app design.

Last year, we were amazed at how well this event was received, and this year is already shaping up to be even better.

It could be because of the full-day workshops covering the most critical topics surrounding web apps for your success, or the 90-minute short talks covering the essentials for designing successful web apps and the best practices for implementing successful web apps. It could be because the caliber of attendees we attract are the best and the brightest. Or it could be because we’re giving everyone who signs up before December 11th a brand new, limited edition Web App Summit 2008 iPod nano.

Of course, I know you want to come to the Summit (and get your own iPod nano). Everything you need to register is at the Summit site. Don’t delay — there might not be seats available.

Over the past few years, the world of web application development has seen the emergence of a new set of approaches such as APIs, RSS, and Folksonomies that have come to be known collectively as Web 2.0. These new approaches allow developers to easily create innovative applications at a rapid pace from common elements found lying around the Web.

The speed and ease at which these new applications were built is what is keeping us very excited about the continued success of the Web 2.0 world. With a little skill and motivation, people can create new applications in almost no time at all. As the skill requirements for building these applications decreases, it opens a whole new world of possibilities for development teams.

With new sites and services popping up, such as Flickr, Del.icio.us, Digg, and Twitter, it’s easy to see how we’ve entered a new era of social networking, and we’ll continue to see the Web evolve as we realize its full potential to create optimal user experiences.

In this week’s UIEtips, we’re reprinting an article I wrote in 2005 where I examine how design teams and individual developers alike can harness the power of APIs, RSS technologies, Folksonomies, and Social Networking to approach hard problems in new and effective ways. I think you’ll really enjoy it.

Read today’s UIEtips article.

Do your applications take advantage of APIs, RSS, Folksonomies, and Social Networking? Does it intrigue you? Scare you? Bore you? I’d really be interested in your thoughts. Join the discussion below about this week’s topic below.

[Want to learn more about Web 2.0? Check out the UIE Virtual Seminar, Web 2.0: The Power Behind the Hype. In this 90-minute presentation, Jared M. Spool will outline how Web 2.0 works, and discuss how APIs, RSS, Folksonomies, and Social Networking can help designers expand and improve the user experience.]

This week Josh and I talk about all the ways we get in trouble. Whether its speaking in public or writing on our blogs, sometimes we kick up a sandstorm unintentionally.

» I attended a conference for the Society of Technical Communication. While I was attending the conference, I blogged that I saw technical writing as an art I see slowly morphing away. Is it telling that the two most popular topics at the annual conference are user experience and interaction design?

» Josh has designers and artists riled up with his blog series on Design is not Art. Both sides are represented in his comments, from designers who think design done right is art, and from designers who think design reveals while art conceals.

» We also discussed the new FaceBook Platform Apps. These are an interesting case study as more sites consider making a public API to expand their offerings. APIs create an ecology where some sites can expand their usefulness, while other shops can extend their services to an existing community instead fighting the uphill battle of creating one from scratch.

We may create more questions than we answer, but never the less it was an interesting discussion. I think you’ll enjoy it.

The answer was interesting: “Yes, your SDK will be Web 2.0 + AJAX”

The only way for third-party apps to run on the iPhone will be through the Safari engine, which is part of the OS X install that powers the iPhone.

Interestingly, the apps can have the iPhone look and feel. Apple showed a custom iPhone application that worked as an LDAP corporate address book, written by one person in less than a month using around 600 lines of code. Such apps can access iPhone resources, give apps the ability to make phone calls, access Google Maps, and so forth.

The second, and somewhat unexpected announcement, is that Apple has expanded their standards-friendly and open-source derived browser to the Windows platform. Version three is available now, in beta, on Apple’s Safari site for both XP and Vista. This has a number of implications:

• Easier testing of web sites for compatibility with Safari, making a Mac an option for the Windows-based developer
• The very standards-friendly WebKit engine can now expand its user base beyond Macs and the iPhone (Safari), Linux (KHTML) and Nokia phones
• Yet another standards-friendly browser for Windows is now available – competition is good.

Mac users also can download the v.3 beta for Mac OS X 10.4.9 (Tiger) but be warned that the install will overwrite your v.2 install. Clearly, Apple believes this beta is stable.

Lastly, you may notice that Apple also completely revamped the look and feel of its well-regarded and highly-trafficked website quietly while Steve had us distracted during the keynote. They’ve simplified the navigation panel at the top, widened the page and redefined the visuals to fall inline with the upcoming Mac and iPhone software.

In the Apple sphere of influence, it was a big day for web developers. And that sphere seems to grow daily.

[ Postscript: If you've found this post interesting, I've written a more speculative commentary on my personal blog, discussing what impact I think Safari will have on the mobile web, check out my post on WWDC '07 ]

Back in January we had planned to have Stewart Butterfield, co-founder of Flickr, speak at our Web App Summit. Sadly, events conspired to force Stewart to Europe at the last moment. In his stead Peter Merholz and I got together to lead an analytical interactive discussion on what makes Flickr such a success in the Web 2.0 space, and as a popular destination in general. What makes it such a draw? It can’t just be AJAX.

» What tools does Flickr use to foster its community?
» Does the service have a personality?
» How is it different from competing sites?
» How does Flickr invite you to discover new tools?
» How does the app leverage its API to increase its values?

Flickr is often mentioned in our individual talks for just a few minutes. It was really interesting to collaborate and dig deeper into the app and explore its many layers of innovation. I hope you enjoy this recording as much as I enjoyed the session.

Sean Kane, showed off some of his behind the scenes work on Netflix.

Jon Wiley showed off some of his and his team’s work behind the scenes on Google Apps. He asks, can you market usability?

Luke Wroblewski of Yahoo! talked about the structures of web content. What do M-16s and AK-47s have to do with Web 2.0? (hint: révolution!) How does usability address the complexity of data on the web?

The three then participated in a round table discussion.

The entire two and a half hour presentation is available to view on Google Video. There’s lots of great stuff here.

Additionally, Luke also did a followup blog interview with moderator Reshma Kumar, VP of WebGuild, in which he expands upon the topics he discussed at the event. This interview will also stand on its own if you don’t have time to watch the video first.

In the interview, Luke touched upon the roles of form and visual organization in usability, addressed design for the mobile web, noted the value of usabilty testing, and more. Check it out.

You can view the first set of 30 here: 30 Great Website Designs (Part1).

You can view the second set of 30 here: 30 Great Website Designs (Part2).

I’d like to hear your thoughts on whether or not you think these web sites are usable as well as visually appealing.

Joshua Porter and I have been spending the last few days going through a lot of the new features, and new ways to visualize old features and we’re coming away impressed.

One particular feature that caught our eye was the funnel navigation reports. The funnel is something we’ve talked about before, we called it The Customer Sieve. Google’s new tool allows you to see the number of people who begin a multi-page process, and see progressively how many people bail out at each step on the journey, and also where they bail out to. Very useful information that you can use to fine tune the journey.

For an inside look at the revision, may I suggest:

» There is a delightful Flash tour video on the Google Analytics site. Section five includes coverage of the funnel navigation demo.

» Find an in depth discussion at Google Analytics Evangelist Avinash Kaushik’s blog, featuring several screenshots and explanations.

In just the past couple of years, we’ve seen more and more designs that allow users to collaborate and share what they’re doing with others. Web sites and applications such as MySpace, Flickr, and Craigslist, are becoming increasingly popular.

One of the underlying reasons for their popularity is because they all focus on Social Design, an area of design that deals with the activities, behaviors, and motivations of people who work and play together through software interfaces. Each of these social applications connect users in new and exciting ways.

In this week’s UIEtips, we’ve republished Joshua Porter’s recent Brain Sparks blog post discussing how organizations can benefit from incorporating social features into their designs. I’ve decided to share the post with all of our UIEtips readers because I think Josh’s commentary on the importance of Social Design is just too important to miss.

As always, please share your thoughts with us. Have you ever wondered why sites such as MySpace and Flickr are so popular? Have you considered incorporating social features into your design? Leave your thoughts and join the discussion below.

Read today’s UIEtips article.

[If you find this article interesting, you'll definitely want to attend the User Interface 12 Conference this November 5-8, where Joshua Porter will present at UIE's Showcase Seminar, Usability 2007: The Latest Perspectives. In this seminar, Josh will share his latest research on Social Design practices.]

Originally recorded at the User Interface 11 Conference, recorded in Cambridge Massachusetts on October 10 2006.

There’s been a lot of talk about Rich Internet Applications (RIA) over the last few years. When the topic was first raised through the release of Flash MX’s change in focus from an interactive animation development studio, to an application development environment, there was an early conversation about trying to define what a rich internet application is. Then as other players tried to enter the field a bit more ferociously, the conversation has turned towards how to make rich internet applications. Not in terms of design, but rather in terms of technology. Little care has been given to the more sensitive topic of what and why.

In this presentation, David Malouf moves beyond the usual story of patterns, code, and tips and tricks, and talk more about aesthetics, experience design, brand, and total environmental context of use. He layers those elements over a discussion around trying to define “richness” in the context of general application design and then try to apply it to a continuum of various types of computer and network based solutions.

David Malouf is a passionate spokesperson for the discipline of Interaction Design. He founded the Interaction Design Association and became its first Vice President, with a keen eye towards evangelizing interaction design in the areas of practice, research, and education.

David is now a Senior User Experience Designer at Symbol Technologies, where he designs a wide array of complex system applications as well as software to run on various types of handheld devices. (At the time of this recording, he was still working at Interlinks, doing similar work.) Over the last 7 years David has designed RIAs ranging from e-commerce sites to enterprise software platforms utilizing a range of technologies including, Java, .NET, Flash, and AJAX.

If you found this presentation interesting, I encourage you to join David live in Monterey, California this January at our UIE Web App Summit. David will co-present, along with Bill Scott from Yahoo, their full-day workshop, Designing Powerful Web Applications using AJAX and RIAs. This workshop was a hit at the UI 11 conference and we expect it to sell out quickly.

(If you’d like to get all of the Brain Sparks Audio Library in iTunes, just paste this link into the Subscribe to Podcast feature.)

In this interview, my colleague Joshua Porter and I talk with David Malouf, Senior User Experience Designer at Symbol Technologies, and Bill Scott, Ajax Evangelist and Design Manager for Yahoo’s recently released Design Pattern Library. We discuss Rich Internet Application development, Ajax, and other important issues surrounding the creation of sophisticated web apps.

David and Bill will be teaching their one-day workshop, Designing Powerful Web Applications with AJAX and RIAs at the upcoming UIE Web App Summit in Monterey, CA in January. Their workshop was a big hit at the UI11 conference and I’m expecting it will sell out at the Summit.

(If you’d like to get all of the Brain Sparks Audio Library in iTunes, just paste this link into the Subscribe to Podcast feature.)

Usually, we’re not like this. We don’t get too excited about the new technologies that are introduced. After all, we never really got excited about mobile computing. Or, ubiquitous technology. Or, speech technology. Or, rich media. Or, tablet computers. None of these things excited us enough to really pay attention. When clients would come to us and say, “What are you thinking about designing for handhelds?”, we’d just say, “That’s not our area of expertise. We haven’t looked at it yet.”

NASA’s a client and they have a saying about the technology they use: “It has to be old enough for the Space Program.” NASA likes proven technology for their spaceships and I guess we’re very similar. We don’t like to look at something until it’s been around and proven to be something more than hype or a fad.

So, why did we get excited about Web 2.0? The thing that excites us the most is what people are doing with it. We’re seeing interesting new applications appearing out of nowhere, all because of this new platform and its capabilities.

I think it makes sense for designers to really understand what Web 2.0 is and what it could mean for them. That’s why in this week’s UIEtips we’re re-printing an article I wrote last year, where I discuss the power of API’s, RSS, Folksonomies, and Social Networking. I hope you enjoy it.

Read today’s UIEtips article.

Have you looked at the Web 2.0 platform yet? Do your applications take advantage of APIs, RSS, Folksonomies, and Social Networking? Does it intrigue you? Scare you? Bore you? I’d really be interested in your thoughts. Leave a comment and join the discussion below.

[If you find this article interesting, I encourage you to join us in Monterey, California this January for our UIE Web App Summit. On Day 3 of the event, we'll explore the important innovations from the Web 2.0 phenomena. We've invited the experts behind these approaches to give you insights into how to integrate them into your design. You don't want to miss out. See the summit website for more details.]

This was a really fun conversation. Some of my favorite bits are:

Kyle Pero’s idea for her dream panel at a conference

I think we need to ask ourselves if we’re growing and improving our service based on what the clients want – or what we think they want – doing a little bit of our own user research I guess. I believe that our clients, and not the industry, should definitely be setting our standards, and I don’t know if we’re doing that. A panel of clients discussing their needs would be quite interesting to me, this is just my opinion. I know every one of us works on different products – some of them offline, some of them online – but basically, the need is the same. Can the products be used easily to accomplish the task? I think if we just take a moment in one of these conferences and just stop listening to each other for a change and start listening to who we are servicing I think it would be pretty interesting and different.

Rashmi Sinha on whether usability studies are scientific or not

Rashmi: But anyone who thinks that this is science, hasn’t done science! I have done science, and this ain’t science, by any stretch of the imagination. I disagree with the whole notion of trying to make it scientific because it isn’t scientific. Second, you have a big problem…

Jared: Making what scientific? The study itself, or the field?

Rashmi: The field is not scientific, and now people have this big notion from experimental psychology, but really it’s not. Experiments have – there’s a way of doing them, and it’s very hard to do that in the field.

Lyle Kantrovich pipes in on why Rolf Molich’s CUE studies are really interesting

Jared: But this brings us back to what Kyle Pero were saying. Because, I think, what is a key element of this is that the client doesn’t realize that they have different results depending on which team comes through. We’re not pitching it that way. Let me put it another way. When Ralph ran CUE-4, he had 17 teams look at, I’m trying to remember, oh it was…

Kyle: Hotel reservations.

Jared: Hotel reservations system, the U Penn system. Not the Penn, but the Hotel Pennsylvania or whatever it was, I don’t remember what the hotel was. But he had people look at this hotel thing that was done by the iHotelier folks, and the 17 teams, approximately half of them, did heuristic evaluations, half of them just happened to work out to do usability tests. They found, across all the teams, they found 61 errors, 61 problems with the design, that the client, the iHotelier people, thought were critical designs, critical problems. Things that they said, these are things we definitely have to fix. But each one of those 61 problems was only reported by one team. So in order to have collected all 61 problems, if the iHotelier people, Jim Whitney and the folks at Webvertising, were to hire a group to do it, they’d have to hire all seventeen teams to get those results.

Lyle: Well, this is why I think those studies are pretty interesting: I think that, by doing these kinds of studies, we will learn what helps us find more problems, what helps us find more critical problems, what we mean by those things. But also, frankly, if you’re iHotelier and you hire only one team, and you find, say, ten critical problems, aren’t you still in a better place? So I don’t think it brings in a question of value or the validity of these studies; but these will help us refine our art, our craft. I don’t think it’s a science: I think what we do is craft; it’s part science and part art. I think it gets better.

Kyle: What the studies really show is that it really does matter whom you hire.

Jared: Exactly.

Rashmi and Nate Bolt discuss more about the scientific nature of our work

Nate: Well I was just thinking about the discussion we were just having and it almost sounded like there was an implicit assumption that if you were a scientist that you follow certain rules and that you should come up with the same results as everyone else. But that would also lead to the idea that all scientists are created equal and we know that that’s not true because scientists like Darwin and Kepler, Galileo, they all had something that no one else had. They had this sort of insight to translate what they were seeing and the math behind it into something new. I would just add to that, before we ultimately kill it, I would just add that all scientists aren’t created equal either and we really can’t get away from the person that’s doing the process in the discussion that we’re having.

Rashmi: Correct. When you teach courses and you do even basic scientific experiments and you have every student in the class replicate that, you do find deviations. They might be deviations around some kind of thing that might form a normal distribution that there’s this one most likely result and then there’s deviations from that. But the method and the way that people carry out the method is different every where. And also in science there’s an explicit concept of the meta kind of research where you look a bunch of the different studies on a topic and you make some logical conclusions. So that once again acknowledges that not every result done addressing the same exact question is going to come up with exactly the same answers.

Josh Porter on the Facebook Controversy

Josh: Well I think Rashmi makes a great point, that this is kind of a new sort of social design issue. The really ironic thing that I just read about this morning was that the actual implementation of the feature itself caused its own downfall. Because as you were looking on your Facebook profile, you could see that all the other people, all the other people in your network, were signing up for the protest petition. So that’s how that petition was signed by like 700,000 people in 24 hours, because the new feature itself propagated it so fast, so I found that really interesting. But one thing that I don’t think any of us have mentioned as well is that the privacy settings of everyone’s information actually stayed the same. So when, if you were seeing information in your news feed, that was information that was already available to you. The only difference is you had to work much less hard to see it. It’s kind of like moving from looking at HTML home pages to going to RSS. There’s just that much less effort in seeing information.

Jared: The MoBuzz TV people, said that this is like people who, somebody who stands naked in their window every morning, who gets upset because someone handed them a photograph of them standing naked in their window.

Read the entire transcript here.

In another aspect of social networking applications, Netflix has the capability to invite “friends” into your experience. When your friend accepts you invitation, you can see how they recommend a movie you might be interested in. This now gives users two perspectives on a film: what the general Netflix user base thinks about a given film and what your specific friends think about it. Like using tagging, looking at the differences in the recommendations tells you something about the film you didn’t know before.

While rarely talked about, the grand-daddies of social networking functionality is, of course, Amazon and eBay. Amazon, with it’s “Customers who bought this book also bought…” functionality changed the way we shop. eBay, with it’s reputation system that allows both buyers and sellers to decide if a transaction is worth the risk, changed the way we interact with what is otherwise complete strangers.

My colleague, Josh Porter, had an interesting take on all this over at his Bokardo blog:

In general, computers and software are taking an increasingly social role for us. Our behavior hasn’t become all that much more social (although it certainly has for some) but we’re learning how to effectively model our social needs in software. Three years ago the social aspects of software was email and chat messaging. Now, it’s forging online identity as profiles and embedded messaging within applications. It’s become always-on, which means that there is no distinction between “offline” and “online” anymore. We are not just modeling messaging, we’re modeling presence as well. This is a big shift…and our language reflects it. I’m “on MySpace” means that we are figuratively and literally on the site.

I quoted Wil Wright recently, and I think he’s (pardon the pun) right on. First thought of as super calculators, computers are now part of the social fabric of our lives. They are becoming integral to how we communicate with our family, friends, and colleagues. They’re still doing calculations of course, but the software that we’ve designed for them is all about human-to-human contact. Social contact. And since we’re social animals in the end, the trend of modeling this in software won’t be reversing any time soon.

I agree. It’s not going away soon. And more importantly, there will be increasing demand for designers who have experience with this. The recent Facebook controversy shows us what happens when we design social networking functionality poorly. And how we design, introduce, and maintain social network systems is unlike any of the other design problems we currently regularly face.

I think a new specialty in design will soon emerge to deal with social networking functionality. Specialists in this discipline will learn from others, develop a working body of knowledge, and apply their knowledge and experience to new problems in different contexts. I’m betting, within five years, we’ll see a conference where more than 200 such specialists gather to share and compare their experiences in this new field.

Deep AJAX

A two-day deep dive into developing real world applications using AJAX

Details at www.gbcacm.org

About the Seminar:

AJAX — more an approach than a technology — is one of the hottest topics for Internet developers. AJAX builds rich interactive applications using standard browser technology, enabling delivery of sophisticated user experiences without the problems of distributing and updating client software.

This seminar is designed for Web developers on a deadline and in trouble — or anticipating being in trouble! — who are developing interactive Web applications that stretch the bounds of the possible.

We are taking some of the leading developers of AJAX Websites and tools — people who have “been there and done that” (and lived to tell about it…) — and giving them the time to delve into the details of what it takes to make the AJAX buzzword into real applications

If you are looking for high level overviews, marketing presentations and academic theory, this isn’t the course for you. On the other hand, if you are “up to your eyeballs in alligators” and want to learn from people who have already drained this swamp, then we’ll see you in October!

Speakers:

• Alex Russell – Project Lead for Dojo Toolkit, President Dojo Foundation
• Adrian Holvaty – Lead Developer, Django Web Framework
• Simon Willison - Yahoo! User Interface technology development team

Presented by Greater Boston Chapter of the ACM
Professional Development Seminars
www.gbcacm.org

Our good friend, Andy Bourland, kindly made the video and put it up on Google Videos for us, but you can watch it here.

Unfortunately, the sound quality isn’t as good as the podcast MP3s, unless you love that talking-through-a-kazoo sound. But it does have the advantage of seeing me and Josh wiggle about as we make the recording and you get to see how incredibly messy my office is.

Listen to Part 2 of the Followup Discussion to Users as Information Architects: Is Tagging Right for Your Site? (30.5 mb)

(You can subscribe to our Podcast feed by copying this link into your aggregator or iTunes: http://www.uie.com/podcast/.)

Have thoughts about this discussion? Leave us a comment here.

However, the survey also told us we didn’t do a good job of answering everyone’s questions. We knew this. As people were listening, they were sending us a ton of questions. Josh and Christine did a good job answering as many as time permitted, but, according to the survey, it wasn’t enough.

So, in the spirit of learning about people’s requirements as we go, Josh and I sat down yesterday and recorded a podcast where we discussed many of the unanswered questions. We’ve broken the recording into two half-hour segments, to make listening a little more digestible.

Among the questions Josh and I discuss:

• What is the difference between a category, a tag, and a keyword?
• How many people participating do you need to bootstrap your tagging process?
• Do tagging systems work for intranets?
• Is a tag cloud a necessary component?

Listen to Part 1 of the Followup Discussion to Users as Information Architects: Is Tagging Right for Your Site? (25.8 mb)

(You can subscribe to our Podcast feed by copying this link into your aggregator or iTunes: http://www.uie.com/podcast/.)

Have thoughts about this discussion? Leave us a comment below.

Design teams frequently need to organize thousands and sometimes millions of pages of content. With so much content, how can these teams go about creating an information architecture that is workable, extensible, and meaningful for the site’s users?

One strategy is tagging. Just ask users to free associate words and phrases with every piece of content you have. Soon you have a site organization that’s completely user-driven, making it easy to find everything in a heartbeat. Tagging lets users decide the categorization of the content on the site. Sounds straightforward, but does it work?

Sites like Del.icio.us and Flickr have pioneered the use of tags, demonstrating their usefulness in several different settings. Even established players, like Amazon and Google, are using them. This style of community tagging, commonly referred to as a Folksonomy, allows a site to create an alternative categorization scheme, created by the users of that site. But, can they be useful in your design?

In this week’s UIEtips, we’ve re-published an article where Josh Porter discusses tagging and folksonomies. We believe folksonomies, while not yet a proven design tool, show great promise in helping design teams manage large amounts of content.

If you find this article interesting, you’ll also want to check out our latest UIE Virtual Seminar on July 27th, Is Tagging Right for Your Site?, Josh will show examples from dozens of web sites and talk about uses of tags in all industries.

Christine Perfetti and Josh Porter will be talking about all things web.