Advanced CSS Styling workshop example
I’m busy working on the slide deck and example site files for our Advanced CSS Styling workshops in Birmingham, Newcastle (and Tokyo). I’m really excited about this new workshop format and wanted to share one of the example site pages.
For this series of workshops, I'm designing a simple game — an online version of something we have played on long car journeys for years. The game is pretty straightforward, guess what a celebrity died of (they're are only ever four options when you're famous). I can't describe how pleased I am that the incomparable Greg Wood has agreed to illustrate the site.
Advanced CSS Styling
The Advanced CSS Styling workshops focus on how to use the very latest, progressive CSS now, not just on personal projects but on everyday commercial ones too. This is made possible by understanding that browsers will possibly never implement the same CSS at the same time (after all, that's how CSS3 is designed to work). Instead of hacking around browser differences, I will demonstrate how to design around them (that's your job too, right?)
In the latter part of the day, after covering new ways of working with colour, type, images and more, I will be showing how to use CSS transforms and transitions to enhance a page without detriment to browsers that haven't (yet) supported them.
What did for?
This video shows the example shopping page in (first) Safari 4, then (at 35 seconds) Firefox 3.6a. You might first think that these new CSS properties are only useful for a smaller audience of Mac users, but with the army of Webkit-based browsers growing all the time, I'm convinced you'll be seeing a lot more of them over the next year and beyond.
I've constructed the interface from nothing more than an unordered list, each item containing an image, heading and paragraph. I'll write a detailed tutorial another day, but for now it's back to my slides and I hope to see you on one of the day(s).