SitePoint Podcast #113: HTML5 & CSS3 For the Real World
Episode 113 of The SitePoint Podcast is now available! This week Louis Simoneau (@rssaddict) talks with Alexis Goldstein (@alexisgoldstein) and Estelle Weyl (@aestellevw) about their views on using HTML 5 and CSS3 and the role of these technologies in the future of web design, after the release of their book, written with Louis Lazaris, HTML5 & CSS3 For The Real World.
Download this Episode
You can download this episode as a standalone MP3 file. Here’s the link:
SitePoint Podcast #113: HTML5 & CSS3 For the Real World with Alexis Goldstein and Estelle Weyl(MP3, 37:56, 36.4MB)
Louis: Hello and welcome to another episode of the SitePoint Podcast. This week on the show we’ve got two of the three authors of our recently released book on HTML5 and CSS3, Alexis Goldstein and Estelle Weyl, Louis couldn’t be here today, Louis Lazaris is the other author, but really happy to have both of you on the show so we can talk a little bit about the book, I don’t want to spend the whole time talking about the book and how awesome we think it is, but hopefully we can have a chat about HTML5 and CSS3 and all this cool stuff, so, hi Alexis and Estelle.
Alexis: Hello, good to be here.
Estelle: Thanks for having us.
Louis: It’s a pleasure; it’s good to have you guys on. I’ve been working on another book so I haven’t had a chance to talk with you guys recently, but it was a lot of fun working on that book.
Alexis: Well we missed you very much.
Louis: Aw shucks, thanks, that’s very nice. As an editor I don’t get that very often usually
Alexis: You did a fine job
Louis: The one chasing down deadlines and all that stuff is usually I’m the bogey man, so it’s good to hear that I come across okay sometimes. So I thought we could just start by talking a little bit about HTML5 and CSS3, I figure a lot of our listeners sort of fall into a few different camps, some of the people out there are obviously really excited about this and think these are great new technologies in Web development, and that’s kind of the camp all three of fall into, but there are also people out there who either because they’re just getting started and they don’t really know what’s what, or because they’re still sort of maybe a little reticent about dipping their toes in the water of these new technologies that are sort of untested, so there are people out there probably who haven’t spent a lot of time looking into this, so maybe just talk about why you guys think this is cool and why it was fun for you guys to work on a book about these topics.
Estelle: I think that we’ve been held back by IE6, IE7 and IE8 long enough and what you’ll learn in reading this book or just practicing with HTML5 and CSS3 is there’s absolutely no reason not to use these technologies now. A majority of the browsers support these technologies, all mobile devices except for Windows mobile devices support these technologies, and mobile devices are the way that most of the world is actually going to be accessing the Web over the next few years, it’s changing from desktop computers to actively mobile, so why not start now. And when browsers that don’t support it, which is IE6, IE7 and IE8, there’s shims and polyfills to basically fake support and make it behave like it does support, so there’s no reason not to get started.
Louis: Yep, absolutely. Alexis any thoughts on that?
Louis: Yeah, absolutely. One of the things that came up in a discussion we were having for the podcast a few weeks ago, there was a blog post on Smashing Magazine where the author did kind of a not really scientific but sort of a quick speed test of CSS3 against the same thing, the same site using older CSS techniques, so sprite images for rounded corners and buttons and all that, and came up with not only a faster Web page in terms of download speed in terms of fewer resources, but also a faster development time because you spend a lot less time in Photoshop and back and forth trying to make all these images work. So above and beyond what we tend to think of as the benefits of oh it’s cool for developers and it’s fun to work on, it also does have some tangible benefits like the cross platform compatibility you were just talking about compared to doing native work on mobile platforms, but also just in terms of being able to do this stuff faster and wind up with lighter weight Web pages.
Estelle: It’s a greater way to use HTML5 and CSS3 to prototype. I don’t use Photoshop anymore for designing my websites, I design in a compliant browser and then if I have to I’ll make images later for older browsers, but prototyping websites is so fast now.
Louis: Yeah, absolutely, I do the same now; it just got to the point where everything you need to do from your drop shadows to all your text styling to everything can be done directly in the browser and it goes that much faster because you can just go and edit your code directly and see that reflected, and then once you’re done you’ve already got the code, it’s not like you have to take all this stuff that you’ve done in Photoshop and then spend an equivalent amount of time redoing it all in CSS.
Estelle: Right. And even faster is there’s Dragonfly, Firebug and the Web developer toolbars, you can just change the values right in there and F12, the F12 toolbar in IE9 and 10 where you can just do it on the fly, see what it looks like and then copy and paste your code into your text editor. So it’s really, really fast, you don’t even have to reload your page to make your edits.
Alexis: Well, and I think even on top of the performance improvements that you see by not having to have an image or not having to worry about say a typo in7 an image that you put into a logo that was previously a file is that we can really create this immersive experiences, and I think it was, and I’m of course going to forget the name of the band that did this, but Google put out a really cool music video that was only for the Chrome browser but it used geolocation and it used all these other different HTML5 technologies to kind of do this cool visual effect where you were running through your neighborhood that you grew up in, I want to say it was Arcade Fire but I’m not a hundred percent that’s correct.
Louis: Yeah, I’m pretty sure it was Arcade Fire.
Estelle: I think it was Arcade Fire, yes.
Alexis: So I think we’re going to start to see that more and more, and I think a lot of these technologies really let you personalize, it lets you make it more immersive, more dynamic, and it really sort of takes it almost to the level of cinematic quality I think, whereas before I think things were much more static.
Louis: Yeah, absolutely. At the Web Directions conference last year in Sydney the intro was a video that Cameron Adams had done using WebKit animations, and it really looked, you know, anyone who didn’t know what was going on would have thought this animation was done in Flash or in Final Cut or something, and then at the end he said this is all just running in the browser. So it was amazing…
Alexis: Yeah, and I was just going to say I went to a demo party, Mozilla Labs did a demo party at the hacker space that I belong to which is New York City Resister, and they played this really cool demo that Mozilla put together that was called Flight of the Navigator, and they used WebGL which is still not really supported in all the browsers but it’s something I’m excited about for the future, and you sort of flew in this really cool plane and there were sort of live streaming Twitter updates for anyone that was Tweeting about I think Mozilla Labs, and it was really like watching a 3D animated film that was live and interactive and responding to what people were saying on Twitter, it was really amazing.
Louis: Yeah, that’s amazing. You were talking a little bit earlier about IE9 and 10 and the developer tools, have either of you looked at the IE10 platform previews?
Estelle: IE10 will be supporting gradients, both linear and radial, and I’ve been playing a lot with gradients lately so that was pretty exciting. And the improvement in their toolbar for just in IE9, it’s the same in IE10 but the IE10 is still preview, but the IE9, the tools that are provided are not quite as good as Firebug or the Web developer toolbar, especially the one that Chrome just came out with, but if you haven’t played around in IE because you’ve been annoyed with it or scared of it, give it another shot, it’s worth looking into. And also in IE9 you can render IE8 and IE7 as well so you don’t have to keep going from one browser to the next, you can do it all in the same browser when you’re debugging.
Louis: Was there anything else they’ve announced support for beyond just gradients, some new stuff in IE10, or is it still a little bit early?
Estelle: It was just the stuff I was playing with; I haven’t looked that deeply in yet. I’m sure tons of stuff has been announced, I just haven’t looked into it.
Louis: It’s good to see that back on the move now with all the browsers sort of actually competing to support standards, it’s such a dramatic shift from I guess what we’re all used to from the days of Web development in the late 90’s and early 2000’s.
Estelle: I think we saw this in the late 90’s actually, and for 10 years everything was stagnating, but back, you know, there were the browser wars 10 years ago and those wars made the browsers push forward really, really fast which gave us CSS2 and 2.1, but for the past 10 years not much has happened so it’s really an exciting time.
Louis: Yeah, absolutely. One of the things I wanted to touch on really quickly is a question that came up in I think it was the SitePoint Forums fairly recently, and there were a lot of different answers to it and different takes on it, so I’m curious to see what you both think. Someone was just very, very new to the entire HTML arena, right, they’ve just started learning how to put together the most basic Web page, and they came on to the forums and asked should I be learning HTML5 from the get go or should I start by learning either XHTML1 or HTML4 because those are stable and supported and then maybe move on to learning HTML5 later on once I’ve already mastered this. And my kind of reaction to it, my gut reaction was well no I think you probably should just dive straight into HTML5 and then for the places where something isn’t supported or the places where you need to equivocate a bit then you can step back and look at your options, but I’d say go straight for HTML5, but I wanted to see what you both thought about that.
Alexis: I mean for me I teach both and I think it is important to learn HTML4 and CSS2 just in the basic concepts, what is a selector, how does HTML work with CSS selectors in order to create formatting and effects, and I think if you dive straight into HTML5 and if you looked at the resources available a lot of times there’s not really going to be time spent on those basic fundamental concepts. And maybe that will change but at least for now I think if you knew absolutely nothing and you tried to read the literature that’s out there on HTML5 you might miss some of those core concepts.
Estelle: I mean if you look at the HTML5 books, including the one that we put out, we assume a basic knowledge of HTML4 or XHTML or a combination of the two as well as CSS, you know, the basic idea of selectors. And I don’t think we’re going to be seeing books; you know right now if you see a book that says learn HTML4 and CSS they start from the beginning, they start with this is what a selector is, and the HTML5 and CSS3 books weren’t starting that far back. But I’d say within two years we probably will be seeing books that say learn HTML5 and it’s going to start with this is the HTML tag, this is the head, this is the body, this is a paragraph, this is an H1 through H6, but right now we aren’t seeing that. Now, the only reason that I wouldn’t want to throw someone into learning HTML5 immediately in terms of the elements is because of the lack of CSS support without a shim to make IE6, IE7 and IE8 even know that those elements exist. So starting someone off by having them learn the new elements might be a little bit difficult but I certainly would teach them the new doctype to start with, I wouldn’t bother teaching them the XHTML or the HTML4.01 doctype because they’re never going to learn it anyway.
Alexis: It’s all copy and paste! This is an interesting conversation, though, this is making me think wow obviously there’s a need and there are people who have this confusion and maybe we should get busy adding that information to maybe a new book or a new site.
Louis: Yeah, well I can’t really divulge any information about our book schedule, but the next, I can definitely tell people that the next beginner book that we do, the absolute beginner book that sort of here’s how to build a website if you’ve never opened a text editor before we’re going to at least incorporate some elements of the modern HTML5 thing, so at least for example the doctype and look at some of the new elements without trying to bog people down in all the distinctions of the difference between the two specifications and all of the complexities of it, but we’ll definitely be taking an approach where those things that make sense to use right now we’ll be showing them from the beginning. I guess Estelle’s right, I guess the generation of books hasn’t rolled around, right, those books don’t get updated very frequently because that stuff doesn’t change very much, so it might take a few years before all the beginner materials out there are tailored to the current state of what’s the best practice for a beginner.
Louis: We’ll be waiting a very, very long time for that (laughter).
Estelle: We will be.
Louis: Yeah, it can be a hard progression for beginners. It’s even hard to think back on how it was when we learned it, you know, it all feels like it took about two months but obviously we spent a lot longer than that but it just seems compressed in the rear view mirror.
Estelle: It’s been 11 years and I’m still learning it.
Louis: (Laughs) yep.
Estelle: Especially when I mean I’m a standardista and I really like to see people separating their content from their presentation, from their behavior, so having to stick the behavior in to enable the presentation to work directly into your content layer it makes teaching the basics a little bit more confusing I think.
Louis: I realize we’ve been talking about this for a little while, talking about the shim, and we haven’t really explained what it is we’re talking about, so for the sake of anyone who’s listening who is not familiar with the HTML5 shim do either of you want to take a stab at just running that down in two sentences and saying what we’re talking about and what we’ve been talking about for the last five minutes assuming those people haven’t already stopped listening?
Alexis: And if you’re doing anything with HTML5 chances are you might be using the open source library Modernizr which allows you to detect whether or not the particular browser that the visitor is using supports a given feature, and that library also includes this feature in addition to a whole bunch of other things, so that’s another alternative is if you want to use Modernizr you don’t have to worry about including anything separate, it also comes with Modernizr.
Estelle: So, what Modernizr does is it’s a script that enables the detection of all CSS features and all HTML5 API, so you can basically use a selector’s classes such as, you know, has gradients and things like that, it provides all the information for you so you basically test for all these features once and then you can access all those features throughout and that way you can do a fallback, you can say if modernizer.geolocation then do something with geolocation else then you can provide a fallback. So all the conference talks that I go to nowadays basically everyone’s sticking the Modernizer script into their documents, so I highly recommend doing that if you’re going to use more than two or three features because then that way it has all the detections for you. And that’s, Modernizr, is basically spelled like the word modernizer except for there’s no E at the end.
Louis: In the hallowed Web 2.0 tradition of dropping vowels for no reason.
Estelle: There is a reason that the domain names aren’t available.
Louis: Yeah, right (laughs), I guess that is a good reason. Yeah, Paul Irish was on the show with Kevin a few months ago I think talking about feature detection, and he’s one of the developers of Modernizr. So one of the other things I wanted to do just to have a little bit of fun here, I wanted to try and play devil’s advocate and sort of bring up some of the objections that I tend to hear or that you tend to see on comments on blog posts or in the forums about HTML5 and CSS3 and see if you guys can shoot those down and tell us why those aren’t really valid objections. So obviously the main thing that comes up is that the spec isn’t final, none of this stuff is finalized yet, everything is still sort of in flux, they’re still all draft specifications and even though browsers have begun implementing them they’re still subject to change. So a lot of people say well hold off until it’s final or until it’s really ready to go, what do you say to that?
Estelle: CSS 2.1 is not finalized, it’s in final recommendation finally this year, so we’ve been using CSS2.1 since 1999 I believe, imagine if we had waited until 2011 to start using it. Many of the specifications you know, there are still going to be small tweaks to them but they’re ready, they’re supported in all major browsers, there’s no reason not to use them; if you want to wait until all specs are finalized you can wait until 2022.
Alexis: And I also think that a lot of the things that you might want to use especially in the CSS3 side of things are things that even if the browser doesn’t support it it’s not going to make or break the user experience, so things like rounded corners or text shadow or things like that, and so there’s really no reason in my mind not to use it because the majority of your visitors are going to get the rich experience, and those who don’t are not really going to get an adverse effect, nothing’s going to fall over.
Estelle: And an added note to that, that’s a really good point Alexis, an added note to that is when you are using CSS3 the browser ignores anything it doesn’t understand, so you can always do fallbacks. You start with the basics and then you provide more advanced CSS3 like a background color, if you’re going to do a background image you first need to clear an image for older browsers and then you can declare the gradient, if the browser understands the gradient it will serve the gradient instead of your background image, but if a browser doesn’t understand the gradient it completely ignores it so it doesn’t override it. So the way CSS has been developed it’s really very safe for doing backwards compatibility.
Alexis: And if you want it to be even more safe there’s a nice feature of Modernizr which is basically it appends to the HTML element’s class attribute the name of all features that are supported and then no hyphen the name of the feature, so like no-geolocation, no-CSS columns if it’s not supported, so then you can sort of write this conditional CSS and have conditional selectors that basically say if the feature is supported use this great new CSS3 property, if it’s not, you know, let’s do some alternative stuff.
Estelle: Excellent point.
Louis: Yeah. One of the other things that’s brought up occasionally is that HTML5 has taken a somewhat different tack or different approach to validation to markup conformance than previous versions of the HTML and next HTML specifications and a lot of people seem to be of the opinion that that’s somewhat of a regression, that it’s taking us back to the days of sloppy markup where XHTML strict and HTML strict had very specific rules about how you wrote your tags. So what’s your counter to that; is HTML5 sloppy?
Alexis: I mean I guess you could argue that it’s sloppy, but I think this sort of goes back to the politics of the, and I never know how to say this, but the WHAT Working Group, do you say the What WG, I never know how to say that?
Louis: I don’t know (laughs).
Estelle: I say the What WG but I don’t know if that’s correct or not.
Alexis: Okay, well let’s just call it the What WG. This makes me think of sort of the initial split, and I forget what year it was, but basically the people that went on to form the What Working Group which is essentially Apple and I believe Mozilla, they were sort of not happy with the W3C’s sort of continuing down the road of XHTML and their sort of opinion seemed to me to be that, listen, we have to do what’s best for the most amount of people and we have to do what’s best for the browsers and the thing that are going to make the most people’s pages available and viewable to everyone is to be backwards compatible and also to be somewhat forgiving. And I think at least from my perspective it’s always better to empower more people to build things than to be purists, and I think that yes it would be wonderful if everyone wrote really strict markup and we could teach really strict markup but I think it exists out in the world, it exists off in the Internet, people teaching you the quote/unquote wrong way, and so I think relaxing the standard is only going to empower more people to be able to write more code and make more sites and I think that that’s a good thing, but I’m certainly not a purist so that’s a non-purist’s point of view.
Estelle: Personally I am a purist when it comes to my own code, but I know that people who maintain my code aren’t going to quote the attributes, and the thing with the HTML5 Working Group is that it basically puts the onus on the browser instead of the author, and it defines how if you’re not going to close an LI, if you’re not going to close your tag, how should the browser handle it so at least when people aren’t coding strictly, rather, at least the browsers will all handle it the same way. Before with IE7 and 8 you would close elements and reopen them if you put like a block level element inside an inline element, so your CSS would get rendered twice, if you had a background image on a link, it would put the background image twice because it would break your — it would actually close out and reopen your element, so here HTML5 is providing a standard way for all browsers to handle all of these different quirky ways of marking up your HTML.
Louis: Yeah, absolutely. One of the other things that you often hear in response to sort of the whole HTML5 buzz, because there has been a bit of buzz all things considered, is that it is in a sense a bit of a buzzword, a lot of people see HTML5 and HTML5 has gone from referring specifically to a version of the HTML specification to being this sort of kitchen sink of related technologies to the point where a lot of people don’t even really know what we mean when we say HTML5 anymore. So do you think that any of the excitement about HTML5 is hype, is there something here that maybe we’re more excited about than we should be or is it just that we’re so excited about it that it becomes this all encompassing term and that’s fine?
Estelle: And to answer the basic question, the question that you asked, also in other terms is I think it’s a complete marketing term, you know, you have recruiters nowadays that are saying three years of HTML5 experience.
Estelle: But also if someone says they know HTML5 I don’t expect them to know how to program every single API.
Louis: Right. I don’t expect any human to know how to program every single API (laughter).
Alexis: But it’s sort of like if somebody asks for an iPhone developer and expecting them to know absolutely every single library in IOS it’s not possible, you have to know specifically what you’re trying to do and unfortunately recruiters don’t always know that, but that’s probably a longer and separate conversation.
Louis: (Laughs) yeah, talking about IT recruiting could go on and on.
Louis: That’s pretty good. I’ll run down my contacts and see if I can find anyone that fits that bill.
Estelle: Yeah, John Resnick doesn’t (laughter).
Louis: Alright. Okay, well I guess that covers what I had on the bill to talk about regarding specifically HTML5 and CSS3, and I think we’ve done a good job of managing to not spend 30 minutes talking about how awesome our book is.
Estelle: Our book’s awesome.
Louis: Our book is awesome though so let’s just slip that in there just once for the record. Estelle, you’ve been speaking at some conferences recently and I know you’ve got a pretty busy schedule coming up; did you want to just talk a bit about what you’ve been seeing at the conferences? I know it’s always fun for people who aren’t going to these things to get a feel for what the hot topics are, what are the big talks, who’s been really impressive, what’s the vibe coming out of the conference circuit this year?
Estelle: Well, let me just plug a few conferences. If you are interested in learning CSS3 there’s a two-day CSS3 Summit put on by Environments for Humans called The CSS Summit, and it’s actually an online conference so you don’t have to pay for airfare or a hotel, and that’s going to be in July. And there’s I think 16 speakers, really top of the line, and topics are going to be a lot on animations and gradients and all of the new CSS features, but definitely the cutting edge stuff that you’re seeing heavily used on mobile devices and TV’s and gaming, a little less so stuff that you might not use for your brochure type website for your bank or your corporate site but definitely some cool stuff if you’re into gaming or mobile development. And new and exciting features, a lot of people are talking about mobile and also Cloud Computing because if you think about it for the past 10 years we’ve been accessing the Web from our desktop, but for the past two years you’ve been accessing the Web more and more from your mobile device, from your tablet, from your television, from your video game, from your vehicle console, from your airplane, you know from your airplane seat. So, realizing that people weren’t accessing content from just one location anymore they’re accessing it from various locations, from various different types of devices, so media queries are definitely getting a lot of talk, but also mobile development and Cloud Computing.
Louis: Awesome. What conferences are you speaking at in person coming up if anyone happens to be around and wants to wander up and say hi?
Estelle: Okay, so I will be speaking at the CSS Summit, but you can say hi virtually but not in person, and then also at the O’Reilly Open Source Conference which is in Portland the last week in July, and I’ll be doing two sessions, a three-hour session on HTML5, The Good Enough Parts, and a one-hour session on Web forms, and then I’ll also be speaking at Open Web Camp which is in Palo Alto in mid-July and I’ll be speaking on Web forms as well. And we didn’t really speak during this session on Web forms but Web forms are the bane of everyone’s existence and the new features in CSS in HTML5 are going to make forms maybe not fun but really powerful, still a pain to stylize but definitely no longer a pain to validate. So I’ll be speaking doing full presentations at three conferences: CSS Summit, OSCON and Open Web Camp.
Louis: Busy schedule.
Alexis: Estelle has a very busy summer.
Estelle: They’re all in one week actually.
Alexis: You’re crazy.
Louis: Alexis, you got anything coming up that you want to plug?
Alexis: I don’t know if I need to plug it, but I am going to be at Apple’s Worldwide Developers Conference which sold out I believe in one day, but if anyone wants to come and say hello to me I would love to say hi, that’s probably one of the highlights of my year and last year they had some really, really great stuff on the new Web standards so I’m really interested to see what they’re going to come up with this year. And I will also be at DEF CON, and I don’t know if there’s really anyone in our audience who might be there, but if you’re interested at all in information security and plan to go to DEF CON I should be there as well.
Louis: Awesome. And so before we go do you want to just let the listeners know where they can find you online if they want to keep up with what you’re up to?
Estelle: You can find me on Twitter (@aestellevw, or my blog which is Standardista.com.
Alexis: And for me you can find me on Twitter @alexisgoldstein and my website is Alexisgo.com.
Louis: Awesome. Thanks so much for coming on and talking about this stuff today; it’s been good to have a chat about this stuff outside of sort of rehashing chapters and the usual kind of work stuff.
Estelle: Well thank you for having me it’s been a pleasure.
Alexis: Yeah, thanks, it’s been great and just to give you a plug I was really impressed by the level of sort of technical editing and just the questions we got back from you, it really was a pleasure doing the book, so thanks to you and it was good to talk to you again.
Estelle: And I second everything she just said.
Louis: Ah, thanks so much.
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.