CSS3 – Tools and Mobile Implementation

This article is based on an excerpt from the podcast that Adam and Dan recorded after his virtual seminar, CSS3 for Everyone. You can hear the full podcast or read the transcript on the web site.

Designing Mobile with CSS3

UIE—Adam Churchill: Many folks are wondering, can you use CSS3 when designing for mobile? Specifically what should you be aware of concerning what we’ll call the big three, the iPhone, the iPad, and the Android.

Dan Rubin: A fantastic question.

Mobile is really exciting these days. Mobile isn’t new, but the capabilities that these devices have are new. The fact that they are actually connected to the Internet, not some mobile-only subset of the Internet like we’ve had with feature phones, is significant.

Since the iPhone, we’ve seen people using their mobile devices frequently, in some cases much more than using the desktop. It makes sense to be focusing on designing, not just for the small screen, which is only one aspect of it, but also for the mobile context.

We could easily do a whole hour’s podcast on just designing for mobile, but focusing on the CSS3 in particular, there are a couple of things that can be used very effectively. They’re in two different categories.

The simple answer is yes, we can use CSS3 when designing for mobile. The answer, as always, is which browsers, which devices are you targeting and what are their browsers capable of? As long as what you’re building is following this pattern of progressive enhancement where the core functionality is always there, enhancing it through CSS and JavaScript can make it easier and better. But if you add the CSS and Javascript and things happen to not work for whatever reason, the core elements of your interaction should still work.

As long as that core functionality is there, you can start to flex your muscles a little bit with CSS3. So a lot of these visual elements, as well as the structural elements for positioning and targeting elements with specific selectors, we can do that with most of the current mobile browsers. The popular ones. And by popular, I mean looking at iOS in general—iPhones iPads, and iPod Touch. And we’ve got Android devices, both the tablets and the phones.

Android and iOS both use variations of WebKit, the browser engine that also runs Safari and Chrome on the desktop. So because of that, they kind of all share this common rendering engine and we can pretty much anticipate broad support for CSS3 in those browsers.

Beyond that, though, we also have new devices coming out from RIM under the Blackberry label. Their new devices are actually also using WebKit as the engine for the browser. So that broadens that market, as well. Opera is used on a lot of mobile devices and has been for a while. And Opera Mobile actually supports a ton of CSS in all sorts of ways.

It will depend on your device a little bit more, because they have a lot of different versions of their mobile browser, but again, there is a ton of support there.

And even Windows Phone 7, it’s getting better and better. I think this fall the browser in the Windows Phone 7 devices are supposed to get a major update and essentially have the same core engine as IE9. It’s not perfect, but nothing’s perfect.

We’ll have all of these new devices that will be flooding the market, especially next year that will be from Nokia and running Windows Phone 7. And they’re all going to be CSS3 compatible.

And again, for the devices that don’t support that stuff, if you’re using the visual selectors that aren’t supported, like multiple backgrounds, border radius, gradients, RGBA, or box shadows, they’ll just disappear.

It’s important that you’re designing your CSS based on the kind of progressive layering of design elements; so basic design elements, then the fancier design elements that may or may not be there all the time. Doing it this way, you’re not going to break anyone’s experience.

We’re in a fantastic time now. I’d be remiss if I forgot HP and what was the Palm OS, or I think it still is the Palm OS that’s powering Palm phones and also the HP Touchpad. That’s also WebKit based. That entire operating system pretty much runs on a variation of WebKit.

So really, really broad support everywhere on the new devices. And the older devices, as long as you’re writing good HTML and clean CSS, what can be supported will be. And you know, someone might not get the prettiest experience, but they’re still going to get a functional experience. That’s what most people will care about if they’re using an older phone anyway. If it works at all, it’s probably a really big positive for someone using an older feature phone.

Back to the other thing that I mentioned earlier, that there are two kinds of categories. One is CSS3 and what we can do with the visual and structural elements. Then there’s this other side that has been really popular in the last year and you probably heard of—responsive web design. We won’t dive into it, I encourage you to read about it first. Start with Ethan Marcotte’s fantastic A List Apart article that started the whole craze.

Then dig into the concepts he covers there like fluid images and fluid grids and that will lead you directly to CSS media queries. Which is this other part of CSS3 that’s fantastic for not just mobile, but basically allowing you to adapt your design to respond to its viewing context. Whether that’s a small screen, a large screen, a medium screen, a portrait or landscape tablet. Whatever it happens to be.

And it’s a capability that we should have had on the web 10 or 15 years ago. It makes so much sense to how you build sites once you dig into it and I highly recommend spending your next weekend or available long evening with a glass of wine and a couple of these articles and really absorbing what it means to the future of how you will design and build for the web. It’s really fantastic and exciting stuff.

CSS Tools

Adam: What tools and resources can you share with our readers?

Dan: Look at Modernizr and Selectivizr. These are two free available toolkits. Modernizr allows you to easily feature detect for any feature in a browser or a device. I could spend an hour talking about just Modernizr.

With Modernizr, you’ll realize pretty quickly why it’s an amazing tool and should be included by default in pretty much every project you build. Modernizr, because it feature detects, allows you to build use cases based on the results of those tests. Often you can design around some feature being there or not. So a browser supporting RGBA versus a browser that doesn’t support RGBA, you can do all of that in your style sheet as long as you have Modernizr loading.

Selectivzr, pretty much runs in the background automatically, when IE6 through 8 solely targets Internet Explorer, and doesn’t load for other browsers. It will essentially make all of the structural CSS, so all of the ways of targeting elements using these new selectors, the Nth selectors, the attribute selectors, first and last of type, stuff like that. It will allow you to work in IE6 through 8 without you having to do anything. Between those two tools, those libraries just take care of most of the problems you might run into using CSS3 right now. So it pretty much gets rid of the reason to not use it.

As far as tools to make generating and writing your CSS easier, there are tons, but here are two that I love. Border-radius.com allows you to enter your border radius either for all four corners of a box or different settings for each corner and it just outputs it and you copy and paste it into your CSS. There is no shame in using that.

Another fantastic one is a gradient editor by colorzilla.com. It’s a brilliant tool to help you create CSS gradients which are admittedly a pain in the butt to create manually and remember the syntax.

Syntax actually differs from browser to browser with certain versions. So if you want to use CSS gradients right now, use that generator.

One to just look at is css3.me. If you just spend a little bit of time on Google searching for CSS3 generators, you’ll find an amazing long list of them. I encourage you to find the tools that make it easier for you to adopt this stuff now that take the tedium out of writing the extra lines that you need in order to be compatible with all the different browsers and different browser engine versions and variations. There’s no reason to not copy and paste if that allows you to do it on your site tomorrow.