Episode 125 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews a front end expert in Jonathan Snook (@snookca) who works for Yahoo and co-wrote The Art and Science of CSS for SitePoint too.
Listen in Your Browser
Play this episode directly in your browser — just click the orange “play” button below:
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
- SitePoint Podcast #125: Taming the Stylesheet with Jonathan Snook (MP3, 27:41, 26.6MB)
Subscribe to the Podcast
The SitePoint Podcast is on iTunes! Add the SitePoint Podcast to your iTunes player. Or, if you don’t use iTunes, you can subscribe to the feed directly.
Episode Summary
Jonathan takes us through his recent work for Yahoo on their Web apps like their Mail service and Flickr, and the benefits of using CSS3. He also talks about his recent communication with the W3C Working Group on ideas and changes happening in the CSS3 spec.
Louis also asks Jonathan about his work on SMACSS, a workflow for CSS for everyone working with CSS.
Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/125.
Interview Transcript
Louis: Hello and welcome to another episode of the SitePoint Podcast. With me on the show this week we have a veteran of the Web Design industry, Jonathan Snook; hi, Jonathan.
Jonathan: Hello, thanks for having me.
Louis: Hey, it’s great to have you. You’ve been involved in the Web for a long time and somehow you’ve managed to never come on the podcast, but you’ve written for SitePoint before, you’ve got a couple articles on the site and you were co-author of The Art and Science of CSS.
Jonathan: That is correct. I’ve always enjoyed working for SitePoint, it’s been fun.
Louis: Cool. And so, yeah, as it happens Kev (Kevin Yank) was back in Canada on vacation just a couple of weeks ago and you guys met up and he just sort of suggested to me why don’t we get Jonathan on the show and I thought that’s a great idea.
Jonathan: Yeah, very nice; it’s always nice to see Kevin, he’s been up a couple times so it’s nice to be able to touch base with him and see him around these parts.
Louis: Absolutely. I’ve been familiar with your work for some time, I’ve been using that little color contrast checker tool that you put on your website pretty much every time I get tempted to try and use CCC on white, I always have this thing to reign me back in and say wait that’s probably not such a good idea.
Jonathan: That’s awesome.
Louis: So what have you been up to these days?
Jonathan: Keeping pretty busy. I’m currently working at Yahoo on the Apps Division which includes products like Mail, Messenger, Flickr, Calendar; we’ve got a whole slew of products under there. And working on the prototype team which means that I work with the designers to actually build front end prototypes, test the interactions, things like that, and then work with the engineers to actually get that stuff integrated and make sure that what they’re implementing matches the design vision.
Louis: Alright. And is that all front end work or do you do some backend as well?
Jonathan: There’s a little bit of backend, mostly with how we deal with our prototype engine, but it’s predominantly all front end work, HTML, CSS and JavaScript.
Louis: Alright. So how are you finding the work?
Jonathan: It’s been a lot of fun actually, it’s been a huge — just a fantastic experience. The amount of learning that can happen when you’re working in that kind of scale, I mean we have within mail alone over 300 million users, you know we’re the biggest webmail product out there, we’re dealing with 40 different languages, we’re dealing with bi-directional interfaces, we’re dealing with beaming, there are just so many different components involved in trying to make everything work smoothly to think about performance and it’s just been a fantastic learning experience.
Louis: I can imagine that’s pretty crazy. So I’ve got a couple of things I wanted to talk to you about on the show this week. One of the things is I had Paul Boag on the show a couple of months ago, and he’s working currently on a redesign of his website and we were talking about all the different things he was going to try and use, new technologies and this and that in his redesign, and one of the things he brought up was the rem based text sizing and he sort of said — he gave a shout out to you for pointing him in that direction in an article on your blog. So maybe we could talk a bit about that, it’s interesting because it’s one of these features that sort of appeared in a lot of browsers very quickly, so support has gotten pretty good pretty fast; it’s part of CSS3 but maybe not as shiny a feature as some of the other stuff like border radius or box shadow that people get excited about. So maybe it hasn’t gotten as much press as some of the sexier features in CSS3, but it is something that’s very useful.
Jonathan: It is, it’s something that caught my eye when IE9 was in beta, I had seen it in the future list and I was just really curious, what is it, how does it work, so once it came out of beta and just seeing what other browsers also supported it, and I was really surprised to see that it had pretty good cross browser support.
Louis: Right. The idea is that — so just to recap a little bit for anyone who hasn’t read your article, and if they haven’t they should go to Snook.ca and check that out, but the idea is that you take something that works like an em rather than pixel, so it’s an elastic text size, but it doesn’t have that flow-on effect that ems have. So, everyone will be familiar when you’ve got an em size on your body that’s say .8 ems and then you set on an unordered list, for example, a font size of .6 ems, will those two cascade, so you wind up with a size .6 multiplied by .8 instead of just having the .6 of a master value, and that’s exactly what rems give you is this kind of master value that then everything descends from that rather than descending from the parent element.
Jonathan: Yeah, I think em based layouts the biggest frustration has been dealing with that cascade, dealing with the fact that you’ve got these multiple levels, and your example of lists is a perfect example of that and has been I think a point of frustration, I think a lot of people have fallen back to the pixel based layouts because of that, whereas rem is kind of really nice in that sense in that we can specify a value and have it relative to the root which is really what a rem is, it’s a root em based format, so that you can specify your base font size and then have everything based off that. It doesn’t have to be just font size as well, you can certainly use it for page measurements, images or divs or anything else with regards to layout you could also use for rem.
Louis: So how is support at the moment? At the time you wrote that piece it was in IE9, so that’s good, and is it in all of the other browsers?
Jonathan: We see it in WebKit, Mozilla, so we’ve got Safari, we’ve got Chrome, we’ve got Firefox and we have IE9 which is pretty good, off the top of my head I don’t believe Opera supports it yet. The funny thing is I haven’t written about it, it’s not actually something that I have integrated into my workflow, it was something that I had wanted to point out for a lot of people who might be interested in what this new feature was, but I’ve actually been using pixel based layouts for a long time, I’ve been very comfortable with that. I think one of the complaints that people have often had with pixel based layouts has been IE7 and 8 have not had, well, and certainly before, IE6, IE5, IE5.5, does not allow text resizing. But when IE7 and IE8 supported page zoom I really felt that that gave users the functionality that they needed, so if they’re viewing a page where the font size is just too small what tools do they have available to them to be able to read stuff at a larger font size, and I felt that user do have the features available to them with pixel based layouts across all browsers, that it wasn’t really a huge concern, and as a result of that I felt very comfortable in recommending going with a pixel based layout. I certainly don’t begrudge anybody that want to go that extra step and support users who just want to bump font size in those particular browsers, but I would feel that that market is fairly small and I’m okay sticking with pixel based layouts.
Louis: Yeah. I’ve always sort of been of that opinion, at least since browsers have had full page zooming, that the issue of resizing font size is less critical than it used to be, because it used to be a serious concern; if you were doing your text size in pixels it was actually causing a real problem. But I have had people when I’ve made that argument come back and say that’s not enough, people really need to be able to adjust the font size separately and that’s what they expect to happen when they go in the browser and they say set the default font size to large, for example, and then every website they load will have a larger font size.
Jonathan: You know, I can understand that argument with the exception that if you looked at the marketplace, if you took let’s say the top 100 web pages, the top 1,000 web pages, how many sites are actually developed using a flexible font size such as an em based unit. And I would say that number is fairly small, I would say the number of users that would expect that to happen would actually probably be pretty small.
Louis: Yeah, that’s a really good point, if people are not — if people have tried it and it hasn’t worked before they’re not going to try it again on your website.
Jonathan: (Laughs) exactly. And I think there’s a lot of areas in web development that I think time and energy should really be spent on that I think have a much larger impact than the number of users in IE 6, 7 and 8 who are looking to bump up just their font size.
Louis: Another thing, though, is with the advent of responsive web design techniques we’ve seen a lot of flexibility added to pixel based layouts that wasn’t there before, so before if you did a pixel based layout you could be stuck at a given pixel width, of course the response to that would more be a fluid thing than an em based thing, but now it’s a lot easier to make something that’s pretty fluid despite being set in pixels.
Jonathan: Yeah, absolutely, I mean we definitely have a lot more tools at our disposal, and media queries and responsive web design definitely give us a lot more tools to play with.
Louis: Right. Another thing you wrote about recently, I just happened to catch this on your blog this morning as I was just scanning it before the show, you wrote a bit of a proposal for a slight change in the way CSS3 animations work.
Jonathan: Yeah, it’s something that I’ve had a bit of a frustration with just wanting to take advantage of some of these features, and so had thought of these things and actually jumped on the W3C mailing list and was actually really surprised some of the stuff has already been discussed and agreed upon but just hasn’t shown up in the spec, and then for the other points it was stuff that they felt, yes, was actually a good idea, so I’m definitely looking forward to the next draft of the CSS3 animations to see if they can get those features in there because I think that would be awesome.
Louis: So what kind of stuff are we talking about?
Jonathan: So one of the things was that the current spec right now, and how the browsers certainly behave right now, is that when you specify keyframes that you have transitionable properties and non-transitionable property. So a transitionable property would be something like maybe top where you want something to transition between 0 and 100 pixels or maybe your opacity is going to go from 0 to 1, but non-transitionable properties like display block, for example, and you want to transition that to display none, there’s no way to transition it simply on or off. And the spec right now says that those properties should be ignored, and that actually makes some things a little bit difficult when you’re trying to create a fallback, so if you imagine, okay you know what, I have a browser that does not support CSS animations, what should happen in that case? And you might say, okay, I want this dialogue, for example, to go from display none to display block but for browsers that support the animation. The problem is that because of that instant on and off what we end up running into is a case where the animation will actually not work in certain directions, so if you’re going from display none to display block that will work okay because the display block comes on instantly and then we can actually animate that. But going in the opposite direction you go from display block to display none and the display none is applied and then the element is hidden so that the animation doesn’t actually occur. So the recommendation I had made was for the non-transitionable properties to actually be recognized, they just certainly wouldn’t be transitioned. So if you think a 0% if you had something set a display block it would still be visible, and 100% you may still say 100% display block and then it would actually be visible for the entire animation; once the animation is completed it would then default back to the style that you had as your fallback, in this case it would be display none, and your element would be hidden, so this would allow that kind of safe fallback but still allow the animations to occur like I think users would expect.
Louis: Right. And you were saying this is something that seems to be in consideration for the next version of the spec?
Jonathan: Yeah, Dean Jackson was one of the spec writers, he was on the mailing list and had said that, yes, that should hopefully be in the next draft, so I’m looking forward to that.
Louis: That sounds really good. Cool. So talk to me a bit about all these sort of CSS3 stuff, is that something you’ve had the opportunity to use in your job at Yahoo or is that still trying to be pretty conservative because of the needs for browser support?
Jonathan: Now, when we were working on the Yahoo Mail redesign, which we had worked on over the course of the last year and a half, it was actually one of those things that we really wanted to tackle and take advantage of. We knew that we could see some really large performance enhancements by going that route, and we had to sort of come to that conclusion that, you know what, the experience isn’t going to be pixel perfect in every single browser, but the functionality, you know the features that users want and need and that will actually use, will be consistent. And so in Internet Explorer, okay, they won’t get the rounded corners but everybody else will, but we were able to take advantage of certain features that IE had such as filters for gradients, so at least IE users still got gradients, whereas Firefox 3.5 users didn’t get gradients, but all the functionality was still there, the user experience was still consistent, and that was the important part for us. And as a result of doing that we had some huge performance gains, we really were able to reduce the amount of HTML we were sending over the pipe, we were able to reduce the amount of CSS that we were putting over the pipe, and as a result of that we managed to speed up our load time by twice as fast, we’ve reduced our initial payload I believe the number was like 35%; we saw some huge gains by going that route, and it’s just been a fantastic experience to see that come to fruition.
Louis: That’s really excellent. I think that’s something that maybe doesn’t get emphasized enough when people are talking about this stuff, you know people say oh it’s cool, you don’t have to do as much work anymore, and that’s really selling it necessarily to clients, we don’t have to do as much work to do rounded corners, but the bigger point here is that all those little images and all that extra markup and all that adds up to a significant performance hit, and if you can do it I mean a faster way that degrades nicely then there’s no reason not to.
Jonathan: That’s it exactly. And we’re really trying to take advantage of this stuff as much as we can, even a lot of the work we’re doing now, you know, where can we some benefits; we always have performance to keep in mind and with a company the size of Yahoo I think it’s a very good use case as well. I had spoken at a conference, Future Web Design, and it was interesting to hear from the attendees afterwards who were really impressed, like they work for large companies and there’s only so much credibility or credence that they might give to smaller freelancers because they may not necessarily understand the business of being a big business, and to hear a company like Yahoo actually stand behind it and stand behind as wholeheartedly as we have I think has given it a lot of credibility.
Louis: Yeah, absolutely. Another thing I wanted to talk to you about is you’ve got some workshops coming up.
Jonathan: Yeah, so me and a group of guys, myself, Steve Smith, Dan Ruben and Brian Veloso, we had actually started this little sort of co-op probably about four or five years ago now called Sidebar Creative, and we had actually started off just doing personal projects, putting together some fun sites and applications, and then a couple years ago we had decided to put on a series of workshops called Sidebar Workshops, and we had put on a couple, as it turns out our major strength is not event management (laughter). As much as we love talking about it and teaching it was just really hard to plan those events, so we actually partnered up with UIE who has been doing all of the event management for us this year, and we actually managed to put on three events, we’ve done two so far and we have one more coming up in L.A. actually just next week, next Tuesday.
Louis: Alright, what’s the focus of these events?
Jonathan: So the focus is on front end design and development. We take an example project and we go through from the design phase working with Photoshop, working with Fireworks, giving off a number of tips and shortcuts and just how can we improve our workflow when it comes to the design phase, and then we transition through to the HTML, how are we actually going to build this out into the CSS, taking a look at a lot of the CSS3 features, all the tools that we can use and take advantage of as we build our sites, and then dive into JavaScript a little bit, you know JavaScript’s a very deep topic, but we do want to touch on it a little bit and sort of talk about the user experience and how we can integrate this stuff in a way that makes sense.
Louis: Right, that sounds really good. So where were the two previous ones that you did?
Jonathan: So the two previous ones we did one in Philadelphia and one in Austin, both were fantastic events, they went really well, so I’m definitely looking forward to the L.A. event coming up.
Louis: That’s awesome; it’s a good team you’ve got as well. I saw Dan Ruben give a talk at Web Directions South just this last year, and he’s really a fantastic speaker and I can imagine as an educator in a workshop setting he must be pretty good as well.
Jonathan: Absolutely. And, yeah, he loves to talk (laughter). But he’s passionate about what he does, and he’s got a lot of experience behind him and I mean Steve Smith has built a number of products and actually used to do teaching at Notre Dame, so he has a sort of teaching background as well which really comes through, and not to forget Brian has put together a lot of great projects and who actually works now at GitHub, so it’s great to have all that talent in one place, and even the people that come to attend I’ve been really impressed with the people that have been coming out. The skill level of people coming in can be almost a little intimidating, so I’m always impressed to see them walk out and say you know what, yeah, I definitely picked up some great stuff here, and that’s the best part.
Louis: That’s good. And is the L.A. event on Tuesday sold out or are there spots left if someone’s listening to this at the last minute and says I’m going to check a sickie on Tuesday and come to this workshop?
Jonathan: Yeah, I mean you’ve got a couple days left, definitely signup, we have at this point I think just a handful of seats left, so if you can get in now is the time to do it.
Louis: Alright. Are any of the materials from the workshop, does any of that wind up online; is there stuff that’s available for people?
Jonathan: We do provide a number of resources afterwards, there’s obviously a lot that we cover over the course of the day, we have work files and demo files that we work with throughout the day that are provided to attendees as well as a list of resources that people can take advantage of.
Louis: Awesome. You were talking a little bit about optimizing workflow in there and various steps of the process from initially Photoshop and then your markup and then your CSS. You have this sort of ongoing back-burner project about sort of CSS workflow and organization that we might want to talk about a little bit. We were talking just before the show and I was asking you if there was anything you wanted to talk about and you said, “Ah, there’s some stuff that’s probably not quite ready to talk about,” and then I brought this thing up and you said, “Yeah, that’s the one,” (laughter) so I figure we’ll talk about it anyway. So it’s called SMACSS, do you want to tell us what that is?
Jonathan: Yeah, S-M-A-C-S-S is a scalable and modular architecture for CSS, and sort of the impetus for this is actually coming from all the experience that I had not only in all the work that I’ve done before Yahoo, but also I think especially the work from Yahoo is just realizing when you’re working on a large scale how do we approach our code, and I think there have been a few people that have talked a little bit about it, I know Nicole Sullivan has been doing a lot of talk about her framework, Object Oriented CSS, and really talking about some of those approaches. So what I’ve been trying to do with SMACSS is really kind of analyze the entire process, it’s not meant to be a framework that people can plug and play into their projects, but rather be a guideline to understanding how they build things, that you can pick and choose whatever frameworks you want, but to understand how you’re building stuff. I’ve really been trying to understand what’s the best way to approach things, what will work well for large sites, what will work well for small sites, and it’s one of those interesting things to realize that some of the stuff that I’ve run into you can really get away with on a small site, you can get away with it because small sites aren’t complex, there’s not a whole lot to them, and they don’t really change as often necessarily as larger sites. I mean working on a project like Yahoo Mail there’s a lot of components involved in designing something like that, and there’s a lot of modularization that you need to do to make sure that your performance is up there.
Louis: Yeah, CSS is always that kind of tricky one, right, when you’re working with code and especially for switching back and forth. In my day-to-day work I work with PHP and Ruby, and then whenever I have to go in and edit the CSS files I get complete brain — it’s a jarring experience when you open up the CSS file and like oh, wait, what? There’s no rhyme or reason to the way it’s organized really, and it’s always hard for even people who work in it full time to keep everything kind of separate and organized.
Jonathan: Yeah, I think there’s this assumption that people have, it’s like CSS is easy, right, like how hard can it be, you want to kind of keep some general rules, you don’t want really complex selectors, you want to make sure your specificity doesn’t get out of control, but there hasn’t really been I think an overarching philosophy, and that’s really what I’ve been trying to document.
Louis: Alright. So what’s the status of that project or where can people find out more?
Jonathan: Definitely check out SMACSS.com, I’ve got a signup form for a newsletter right now which basically means I’m going to email it once things get pretty close to launching. I have the — things have been kind of moving along at a pretty steady pace, I’ve got a lot of the outline written and a lot of the sections filled out, but I feel like I need a lot more examples. I want stuff that when people go in that they understand how clear and concise this is so that there’s not really going to be any doubt in how well this might work on a project. As well, because I have this framework in mind, this sort of holistic approach now that I’ve been actually trying to use more regularly and just make sure that what I’m saying is proven and can really be applied well. I think oftentimes we see frameworks and it’s often easy to dismiss them because they’re for such a small use case and great for that use case but that use case isn’t everybody’s use case, and what I really want is to have something that’s a little bit more general, that’s a little more applicable I think to everybody who’s building projects these days, so I really want to make sure I get this right.
Louis: Right, really looking forward to seeing what comes out of there, anything that can help us tame our style sheets is going to be much appreciated I think.
Jonathan: Good.
Louis: Was there anything else you wanted to let people know anything else you’ve got coming up, are you doing more public speaking?
Jonathan: I definitely have a fair amount of public speaking coming up. I had kind of taken a little bit quiet just because with the workshops I hadn’t really done much in a couple months, but this fall I’m going to be speaking at Adobe Max in L.A., and there’s actually a new conference starting up in Chile, Santiago, called StarTech which looks pretty good.
Louis: What’s the focus of that?
Jonathan: StarTech is a front end conference so we’re talking about HTML, CSS, JavaScript, so it should be a good time.
Louis: Sounds like a lot of fun if anyone can make it out to Chile for a weekend why not, right, what’s stopping you.
Jonathan: Absolutely, it’s definitely going to be worth it (laughter).
Louis: Awesome. Thanks so much for coming on the show taking the time to talk about all this stuff. If people want to find you on the Interwebs where should they go?
Jonathan: Well, they can definitely go to Snook.ca which is my blog where I like to share tips, tricks and bookmarks in web development, but they can also find me on Twitter @snookca.
Louis: Alright, that’s easy enough, and thanks so much for coming on the show.
Jonathan: Thank you very much.
Louis: Alright, have a good one, bye.
Jonathan: Bye.
Louis: And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to Sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s SitePoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau, thanks for listening and bye for now.
Hi there, I just wanted to drop in a quick note to mention that the SitePoint Podcast is honored again this year with a nomination in .net Magazine Awards. I wanted to take the time to thank all of our listeners for tuning in throughout the year and making this possible, and I also want to shamelessly beg you to vote for us, just head to thenetawards.com to cast your vote for the show as well as all your favorites in a bunch of other categories like Mobile App of the Year, Developer of the Year and Redesign of the Year. Thanks for your votes!
Theme music by Mike Mella.
Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.
Comments