Stephanie Sullivan Rewis and Greg Rewis – What Designers Need to Know About HTML5 and CSS3

Sean Carmichael

August 12th, 2011

Play

[ Transcript Available ]

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:

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

Recorded: July, 2011
[ Subscribe to our podcast via Use iTunes to subscribe to UIE's RSS feed. ←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.

One Response to “Stephanie Sullivan Rewis and Greg Rewis – What Designers Need to Know About HTML5 and CSS3”

  1. Char Easter Says:

    Thanks for this podcast. I added a mention on my site, http://runchica.com/blog/?p=2043. Here’s an excerpt:
    Beyond the technical tips, I find the husband and wife team, Stephanie (Sullivan) Rewis and Greg Rewis an inspiration because they love what they do, and remind me how powerful that is to my career and to the people around me. Yes, they are super heroes out saving the world with clean and smart front-end programming. They know the code, and that is loving what you do. That is what generates the enthusiasm and curiosity to rise above the chaos, client changes, new learning experiences and complexity of our roles, to go beyond survive and to thrive.

Add a Comment