Afgelopen donderdag gaf Dave Shea (initiatiefnemer van de css Zen Garden) voor een man of vijftig een workshop in Londen onder de noemer Building Beautiful Web Sites with CSS. De workshop (die overigens meer weg had van een presentatie van acht uur) was onderverdeeld in vier brokken:

Inleiding en tools

Dave begon met een ultrakorte inleiding over CSS. Gesneden koek voor de ervaren CSS’er en te beknopt voor de nieuwkomer. Vervolgens gaf hij aan welke tools er voor de CSS’er beschikbaar zijn, hoewel iedere ontwikkelaar natuurlijk allang zijn voorkeurstools heeft. Opvallend was wel dat de producten waar Dave het enthousiast van werd, alleen beschikbaar zijn voor de Mac…

CSS Workflow

Dit onderdeel Рover de workflow van CSS - leek mij vooraf het interessants, omdat je zeker bij grote CMS-projecten met een gedegen organisatie van de CSS moet komen om je stylesheets onderhoudbaar te maken. Helaas kwam Dave ook bij dit onderdeel met niet meer dan wat algemeenheden en een handvol aardige tips. Dat je je CSS niet in ̩̩n grote file van 3000 regels wilt beheren en dat je het stylen van de standaardelementen in een aparte stylesheet kunt doen, zijn nu niet bepaald baanbrekende wetenswaardigheden. Wel een handige tip was de undohtml.css, de generieke stylesheet van Tantek die alle default styles van de browser uitzet. In de discussie over CSS-hacks neigt Dave naar het gebruik van conditional comments boven het gebruik van CSS-hacks. Dave Shea zal zijn verhaal over Workflow trouwens ook als presentatie geven op @media 2006.

CSS Design: Building Blocks

Dit onderdeel ging wat meer in op de praktijk. Dave toonde hoe je een visueel ontwerp op kunt breken in semantische brokken die ieder op zich weer onderverdeeld kunnen worden in kleinere deeltjes (bijvoorbeeld een DIV “header” die een UL met navigatie bevat). Hij liet wat interessante voorbeelden zien van fluid lay-outs, zoals de met JavaScript ondersteunde website van Rosenfeld die bij resizen verschillende stylesheets laadt (testen op hoge resolutie!). Opvallend vond ik ook dat Shea veelvuldig gebruik maakt van een combinatie van absolute en relatief gepositioneerde DIV’s, waar ik de voorkeur geef aan puur relatieve sites. Ik zal die techniek nog eens tegen het licht houden.

Web Typography

In zijn laatste onderdeel stond de vormgever Shea uitvoerig stil bij typografie op het web. Hij liet een aantal nieuwe fonts zien die in Windows Vista zitten, behandelde een methode van fontscaling en toonde zich zeer gecharmeerd van sIFR.

Aan het einde van de workshop wilde Dave hands-on laten zien hoe hij een Photoshopplaat “live” omzette in een HTML met CSS pagina. Hoewel hij het voorbeeld zelf gemaakt had, stuitte hij af en toe op onverwachte floating probleempjes, zodat het voorbeeld afgeraffeld werd en we na een korte Q&A in The White Horse het glas konden heffen op de mooie combinatie van HTML met CSS!

Dit bericht was geplaatst door Tom op Tuesday 24 January 2006 om 21:14 uur en is gearchiveerd onder evenementen, webstandaarden. Je kan de reacties hierop volgen via de RSS 2.0 feed. Je kan een bericht achterlaten, maar pingen en trackback is niet mogelijk.