A Snapshot on What Designers Should Know about HTML5 and CSS3

Thanks to Marco Dini for the Italian translation to this article. This article is an excerpt from an interview that Jared Spool had with Stephanie (Sullivan) Rewis and Greg Rewis. You can hear the full interview on their podcast or read their transcript.

Jared Spool: Tell me if you’re seeing the same thing. Browsers are finally getting to a point of adopting the new HTML5 and CSS3 changes. Now 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.

I think it really behooves a good designer to understand what this is all about so they can talk intelligently with their developers and understand their capabilities. Do you agree?

Greg Rewis: Absolutely. There’s a lot changing. But, even more importantly, there’s a lot of confusion on what’s changing. What’s possible, and what’s not.

We hear a lot in terms of the buzz of HTML5, but then when you dive into it, you start running into, “oh, but you can’t do this yet, oh you can’t do that yet.

I think that’s probably one of the biggest challenges for designers, trying to cut through the marketing of HTML5, if you will, and actually start seeing the forest for the trees to use a weird hobbled together analogy.

Stephanie Rewis: 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.

CSS3 is a completely different specification and is probably more interesting to designers than HTML5 itself.

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

Rounded Corners, SEOs, and Gradients

Jared: So what are some of the new standards that browsers support that designers can take advantage today?

Greg: Rounded corners. Jared, I mean, once we have rounded corners it’s utopia, right?

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

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

Jared: Exactly.

Greg: Rounded corners, drop shadows, the text shadow, these things are going to add in some interesting capabilities for designers.

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

But that’s exactly the problem. You’re in Photoshop and you’re not in a browser. One of the exciting things for these new CSS3 capabilities is the idea of tearing down the need for images themselves. We don’t mean a Web with no pictures or graphics.

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.

That’s worked well for a very long time, but has its constraints. Every time the client wanted a change—new size, color, wording, the designer had to get involved again.

The designer has to go back in, go through an image editor and re-output that image. As you know that takes time.

On the other side, on the viewer’s side, this is an image. This is not selectable text. 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 we’re also benefiting to have text that SEOs pick-up.

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 gradient now. We can do real gradients now with CSS3. We can do real fonts on the web now. Actual web fonts, not the boring Georgia and Verdana and Arial.

We can actually use real fonts that have licensing that allows us to use them on the web. 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 an image editor again and that’s a lot of power.

Media Query

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

The best news of it all is on the great new capabilities of CSS3—media query. Media query allows us to actually design for mobile and desktop browsers at the same time and have a responsive response, if you will, to the device that the page is being rendered on. This means we can move from the desktop through the tablet space down to the mobile phone all with the same content being adapted through the CSS.

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

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

Jared: 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. Put your content up and then show it in different ways to devices with different capabilities and sizes and resolutions.

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

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.

I am a front-end developer and almost 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.

Regardless of how much I’m designing in HTML5 and CSS3, I use Modernizr. I’m against browser sniffing which means using JavaScript to try to figure out what the browser is and what should I serve it?

The problem with that is people don’t keep it up and so many new browsers are literally coming out every week. Sometimes 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 and not the most modern, capable version.

So there are a lot of reasons I don’t like sniffing. 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, “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. Here’s how it works. When the user surfs to your site they hit the site, Modernizr tests their browser very quickly and gives back a whole string of classes on your HTML element.

That will tell you things 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 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 similar.

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.

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 it 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 that if renders incorrectly 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.

Accessible means more than having my page work for non-sighted viewers. Accessible also means the person with carpal tunnel that needs to tab through your page is able to access all the content and links including people with low vision.

We all get lower vision as time goes on. If text size increases by the user, you need to make sure your design doesn’t fall apart. I’m a big stickler on this.

Jared: Cool. Well, this has been really fun. I’m really looking forward to the workshop on November 9 and Stephanie’s upcoming virtual seminar on September 15.

Thanks for all your valuable insights.

Hear the full interview or read the transcript.