Workshops For Web People

Refreshments

Introduction

• A look at ground-breaking sites that have helped develop CSS design
• Explaining progressive enhancement
• Learning the progressive enhancement approach across technologies
• Exploring the development of progressive enhancement on the CSS Zen Garden

What is transcendent CSS?

• Explaining the five principles of transcendent CSS
• Learning what makes transcendent CSS possible now
• Explaining Yahoo’s Graded Browser Support
• Learning how to explain the approach to clients, managers and others

Refreshments

Content out mark up

A dynamic demonstration of the content-out approach to mark-up that demonstrates the real meaning behind XHTML elements and how to derive precise meaning from almost everything you see. This section will revolutionise the way that you think about mark-up and will enable you to write the most optimised mark-up possible, ready for styling with CSS.

• Learning why content-out mark-up is important to design flexibility and accessibility
• Explaining practical ways to break with old-fashioned ways of thinking
• Describing ways to practice content-out mark-up while away from a computer
• Working with content-out mark-up on a series of practical examples
• Adding precise meaning to mark-up using Microformats

Modern CSS selectors

Introducing modern CSS2.1 selectors, how and when they are useful and how best to utilise them in your everyday work. Using a highly practical, visual rather than technical approach to demonstrate these powerful CSS selectors.

• Attribute selectors
• Attribute sub-string selectors
• Adjacent selectors
• Child selectors
• Pseudo-classes and pseudo-elements

Lunch and Refreshments

Inspiration

• Creating inspired design with CSS
• Creating a series of web page layouts and interface elements inspired by a range of sources
• Putting the selectors learned to use in combination with CSS floats and positioning techniques

Working with CSS

• Creating column layouts and interface elements using floats
• Using relative positioning for creating out-of-the-box interface designs
• Working with absolute positioning
• Layering with z-index and alpha-transparent PNG images for depth and dimension
• Combining floats and positioning

Refreshments

Simple steps to better web typography using CSS

Good typographic design for the web has been given little attention, partly due to the limited number of system fonts that can reliably be used. But working with a few simple steps can improve web typography using CSS.

• Describing how typefaces tell stories and set the tone in a design
• Composing to a vertical typographic rhythm
• Working with baseline grids
• Creating vertical rhythm with CSS font sizing and line-height
• Introducing the new concept of ‘incremental leading’
• Creating typographic design with optical grey
• Combining serif and sans serif fonts

Introducing CSS3

CSS3 promises to revolutionise the way that visual designers and developers work with CSS. Examining practical applications for some of the most exciting facets of CSS3, including backgrounds and borders, grid-based layout tools plus CSS3 media queries that demonstrate how different designs can be implemented across different browsers and platforms including mobile devices, a topic rarely discussed to date.

• Introducing CSS3 modules
• Reminding of the CSS3 selectors module
• Backgrounds and borders module
• Multi-column layout module
• Advanced Layout Module
• Media Queries Module

Questions and answers

Join us for a drink after the workshop at The Quarter Restaurant and Bar