While CSS2 and CSS2.1 introduced some ambitious elements, it’s CSS3 that’s becoming a real design powerhouse. I have to give credit to 24Ways and Handcrafted CSS to give me compelling examples of applying CSS3 design to prototyping.
Neato tools
In case you haven’t been following, many of the visual tricks we use in web design can now (or soon) be done using styles instead of complex image trickery and awkward markup gymnastics. Some highlights:
- Border-radius for making rounded corners on boxes
- Text-shadow and box-shadow for, well, you could probably guess
- RGBA for defining RGB (red, green, blue) values, plus alpha for opacity levels.
- Embedding fonts using @font-face.
Using them to make great mock-ups
Just like many designers (as evidenced in Megan’s informal poll in the above article), I mock up web page designs in a graphics program first (though I use Fireworks myself, because frankly, Photoshop scares me a little), slicing and dicing the graphics to fit them into the final design once it’s been approved. I’ll even go as far as convert it to an image to embed in a web page to give the client a concept of how it’ll look in the browser. But this process has its well-documented shortcomings.
By using the process outlined in Megan’s article, you can provide a more complete, descriptive, flexible concept of the client’s site. But that’s not even the best part: once you and the client have settled on the final design, you may suddenly discover that you’ve already finished most of the web site! Check it out: you’ve plunked all the content into a semantic CSS-based layout. You may have even put something together in Photoshop (or Fireworks) for your own benefit. All that’s left is working the final graphics into the layout, adjusting the CSS to be more widely compatible, and whatever associated mopping up you find yourself doing at the end of a great project.
Prototyping using CSS like this can inject some actual joy in the development process, because you can actually code and build web pages first, rather than fumbling with design. If you’re an html guy first and foremost, like I am, the whole procedure feels more natural and sensible.
It’s just too bad we can’t keep all that great CSS we just wrote
After selling your design using that CSS-based prototype, you’d probably be tempted to leave everything in the design as-is. After all, it’s a functional web page, isn’t it? Unfortunately, once you view the site in Firefox version 2.5 or earlier, or Internet Explorer version anything, Your enlightened design falls flat. On one hand, it probably degrades quite gracefully, and the site still looks pretty in browsers that don’t yet support these newer CSS elements. On the other hand, if you’ve sold the client on your pretty rounded corners for the boxes, and lovely translucent gradient effects or whatnot, you will have to replicate those in your graphics program to take back to your design.
This is the part that probably feels a little backwards; to me it even reads backwards. It’s time to slice & dice the graphical mockup into its needed image elements and write up CSS2 (or older) statements to replace the not-yet-compatible ones. It’s like antiquing for websites.
But wait! You’re not going to just toss all those CSS3 elements, are you? Just sequester them into a separate stylesheet (or if you don’t mind your CSS coming up invalid in W3C validators, leave them in the stylesheet proper) and the browsers that don’t understand them just won’t pay attention to them. So while you’ve been building this flexible prototype, you’ve also been future proofing the web site, not to mention future-proofing your own skill set. By getting your hands dirty with CSS3 now, you’ll be a grizzled veteran by the time it becomes standard.
And you wonder why it’s one of the best prototyping tools ever?
It’s not for everyone… or every project
Prototyping a website like this requires the right kind of rapport with the client. The client must not only be aware of the fact that they’re only going to be able to view the concept in something like Safari or Firefox 3.5, they need to be completely cool with it. This slick and savvy approach to design mock-ups can quickly run afoul if the design has to pass over several sets of eyes, and those other sets don’t get the message about needing to view the site in specific browsers. If you expect to spend as much time justifying your method as you will be employing it, then you’ll be forced to keep the tried-and-true prototyping method in your stable.
All the same, it’s worth the effort to give these new practices a shot, whether it be with that super-cool, progressive thinker of a client, or just one of your own pet projects. Master the techniques now, and force everyone else to play catch-up later.