In a recent discussion, Nicole Sullivan (@stubbornella), architect at Stubbornella Consulting Group and a speaker at Velocity 2011, talked about the state of CSS — how it’s adapting to mobile, how it’s improving performance, and how some CSS best practices have led to “bloated code and broken websites.”
Our interview follows.
How are CSS best practices evolving?
Nicole Sullivan: New tools are being added to browsers, and the Chrome team is really pushing the limits of what we can do with CSS, but there is still an uphill battle. Some of the best practices are actually bad for the domain.
I recently wrote an article about the best practices and what’s wrong with them. I figured out this year that it wasn’t just that the best practices weren’t ideal — it’s that they were absolutely, every single time, leading to bloated code and broken websites. It was a revelation for me to realize the best practices were often causing issues.
How are architect-level CSS tools improving?
Nicole Sullivan: The preprocessors have gotten much better. They were partially created because people didn’t like the syntax of CSS and wanted a new one, but the preprocessors changed a bunch of things that weren’t necessarily useful to change. In the last year or so, the preprocessors have embraced CSS and have become a testing ground for what can go into browsers. At the same time, the Chrome team is pushing forward on WebKit — it’s a pretty exciting time to be working on this stuff.
Are you encountering browser support issues when building with CSS and HTML5?
Nicole Sullivan: Particularly with CSS3, there’s a ton of variation and levels of support. But what CSS3 gives us are ways of doing visual decorations without actually needing images. Stoyan Stefanov and I wrote Smush.it a few years ago to crush and optimize images because we realized that image weight was one of the big problems on the web. Overall, CSS was sort of the source of the problem because it was bringing in all of this extra media via images.
The cool thing with CSS3 is that now we can eliminate a lot of those images by using the more advanced properties — “border-radius” can give us rounded corners without images; you can get gradients now without images; you can get drop shadows and things like that. The thing is to be flexible enough with design that it’s still going to work if, say, it doesn’t have that gradient. And to realize that for users on an older browser, it’s not worth the weight you’d add to the page to get them that gradient or the rounded corners — they’re much more interested in having a snappy, usable experience than they are in having every visual flourish possible.
Velocity 2011, being held June 14-16 in Santa Clara, Calif., offers the skills and tools you need to master web performance and operations.
How about at the mobile level — what are the major issues you’re facing in that space?
Nicole Sullivan: Media queries are the biggest issue for mobile right now. Designers and developers are excited to be able to query, for example, the size of the screen and to offer different layouts for the iPhone or the iPad. But that means you’re sending your entire layout for a desktop view and a mobile view down to a mobile phone or down to an iPad, which is way more than you want to be sending over the wire. Designers need to put mobile first and then maybe layer on a desktop experience — but then only sending that code to a desktop user. All of this requires more of a server-side solution.
Do developers need to build two different sites to accomplish that?
Nicole Sullivan: It depends. On my little iPhone, there’s not a lot of screen real estate. If I go to a travel website, I don’t want every feature they’ve got cluttering up my iPhone. I want to know what flight I’m on, what my confirmation number is — that kind of thing. It makes sense on the design side to think about why your users are coming to the mobile site and then designing for those needs.
What happens to desktop design is there’s sort of a land grab. Each team tries to grab a little bit of space and add stuff so they’ll get traffic to their part of the site. It creates a disjointed user experience. The great thing about mobile is that people aren’t doing that — there isn’t enough screen real estate to have a land grab yet.
This interview was edited and condensed.
Related: