Workshop Bringing Your Design to Life with CSS3 by Dan Rubin

When: Tuesday October 5, 2010
Where: Felix Meritis, Kremlin room
Costs: € 350,- (€ 275,- for Fronteers members)

Designers rejoice! Web Standards are not just for people who care about accessibility and compatibility across devices and platforms anymore: they are fast becoming the core tools of some of the best sites, apps, and experiences on the web; and with the latest browsers including support for all of CSS2.1, much of CSS3, and increasingly, HTML5, designers can now call these tools our friends.

In this full day of practical examples and exercises, Dan will show you how today’s leading sites are using advanced CSS to move some of the visual heavy-lifting to the browsers. We’ll examine live sites, then take them apart to see how their designers are using CSS to implement visual design, and how they degrade in less-than-modern browsers. We’ll also build and test an example design to see just how easy (and practical) it is to incorporate advanced CSS in your designs, taking you from Photoshop to HTML/CSS so you’ll leave with the experience and confidence of having put these capabilities to use.

What you will learn:

How to design for CSS in your graphics editor
Transferring what you see in Photoshop (or Fireworks) to HTML/CSS
Advanced selectors and browser support
Rounded corners (and how to design for when they aren’t there)
CSS3 Gradients (and an easy way to create them)
Text Shadow and Box Shadow (using them to your advantage)
Bitmaps vs CSS (when to use each and how to choose)
CSS Transitions (and their potential downsides)
CSS Animations (and how they compare with Javascript alternatives)
Browser-specific CSS (aka vendor extensions)
The future of CSS (experiments and anything which lacks browser support)

Who is this workshop for?

Designers who are already familiar with and using web standards (basic HTML/CSS) and are ready to start including more advanced CSS in their projects.

Schedule (subject to change)

8.30am – 9.00am: Registration

9.00am – 10:30am: Introduction

The practical differences between using images vs. CSS to render designs.
Browser support for designer-friendly CSS.
A review of sites that are already using CSS instead of images today.

10:30 – 11:00: Break

11:00am – 12:30am: Design like a developer

Writing clean and efficient markup to make your life easier.
How to visualize the translation of pixels to CSS.
When to use images, and how to decide.
How to think like Webkit, but sympathize with IE.

12:30am – 1:30pm: Lunch

1:30pm – 3:00pm: Let your graphics editor help you

How to apply effects in Photoshop (and Fireworks) and keep them code-friendly.
Designing an example site with CSS in mind.
Why it’s important to experiment when converting the pixels to code.
What this means for browser testing, and how to avoid problems along the way.

3:00pm – 3:30pm: Break

Tea, coffee or a soda

3:30pm – 5:30pm: Learning from the real world

See how designers are using CSS where you might not even realize it.
Using HTML5, CSS and fonts to add icons without images.
Browser tear-down: a ruthless look at how (and if) leading sites degrade gracefully, and what you can learn from them.
Q&A and discussion.

About Dan

Dan Rubin is a published author, teacher and practitioner of user interface design and web standards. When he isn't busy Twittering, his work, writings, and various side projects can be explored in and around the vicinity of Sidebar Creative and his personal site, Superfluous Banter.