Menu

Beta — We’re reformatting our articles to work with the new site, but this is one hasn’t been done yet; it may contain formatting issues. No need to report this. We’re working on it.

CSS3 – Tools and Mobile Implementation

by Dan Rubin
on September 6, 2011

[Editor’s Note: 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.

Want to Learn More on CSS3?

Dan is a highly accomplished user interface designer and usability consultant.
If you missed his virtual seminar, you can still access it.

And if you’re looking for more tips and tricks with CSS3, check out
Stephanie (Sullivan) Rewis’s 90-minute virtual seminar on how to implement
many of the new CSS3 features. You won’t just hear about the benefits, you’ll learn the coding behind it.

Share Your Thoughts With Us

How are you using CSS3 in your mobile designs? What resources and tools do you use that are worth sharing? Share your
thoughts at the Brain Sparks blog.