Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

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).

Leave your comment

Fleeboy

September 9 2009 @ 12:34am #

Excellent work. I am doing something similar with my new company website for the portfolio.
Its great how Webkit are constantly pushing the boundaries of what CSS is capable of.
I take it you are using Modernizr to enhance the progressive browsers experience? Let’s hope Mozilla catch up and get the same experience soon! (Forget IE?)

Andy Clarke

September 9 2009 @ 12:42am #

@Fleeboy: I take it you are using Modernizr to enhance the progressive browsers experience?

— Sure am. I think that Modernizr is incredibly important and it’s central to most of the work that I’m making with CSS these days.

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.