De technieken om een website te bouwen en vorm te geven staan niet stil en steeds betere technieken komen binnen handbereik. Technieken waar zowel websitebouwers als klanten en eindgebruikers van kunnen profiteren. Eén van de meest interessante nieuwkomers op dit gebied is CSS3. Mijn collega Michèle heeft op deze blog al eens een introductie gegeven over CSS3. In dit artikel wil ik ingaan op handige strategieën om CSS3 in te kunnen zetten op webprojecten.
Er is al veel veranderd in de manier waarop websites gebouwd worden. Om dit nader toe te lichten moeten we even terug naar vroeger.
Vroeger
Vroeger (voor de intrede van de webstandaarden) werd een pagina vaak met tabellen vormgegeven en liepen de inhoud en de presentatie volledig door elkaar. Dat betekende dat de HTML vol stond met informatie die puur betrekking had op de vormgeving, zoals de kleuren, lettertypes etc. Elke pagina stond in een afzonderlijk html-bestand en als een algemene aanpassing nodig was (bijvoorbeeld alle rode tekst veranderen in groene tekst) dan moest dit handmatig in elk html-bestand worden aangepast. Ook waren er nogal wat verschillen tussen de verschillende browsers. Er was in onze bedrijfstak behoefte aan een eenduidige manier om websites vorm te geven.
Heden
Deze wens werd vervuld met de opkomst van de webstandaarden. In het kort staat in de webstandaarden vastgelegd dat de inhoud en presentatie gescheiden is.
Deze wens (naar een eenduidige manier om websites vorm te geven) werd vervuld met de opkomst van de webstandaarden.
Concreet wil dat zeggen dat er in de HTML niet allemaal layout elementen staan, maar alleen de inhoud. De layout wordt bepaald in een cascading style sheet (CSS). Deze werkwijze is snel mainstream geworden en heeft veel voordelen:
- Dezelfde inhoud kan op verschillende manieren worden vormgegeven (voor scherm, print of mobiel device).
- Veranderingen kunnen snel worden doorgevoerd. Als nu alle rode tekst groen gemaakt moet worden hoeft dat alleen maar in 1 stylesheet te worden aangepast. Dit scheelt veel tijd en maakt het onderhoud een stuk eenvoudiger en minder kostbaar.
- De broncode is veel beter te indexeren voor zoekmachines.
- Pagina’s laden in de regel sneller.
Hoewel deze werkwijze veel voordelen heeft ten opzichte van het tijdperk ervoor brengt het ook nadelen met zich mee. Ten opzichte van de oude werkwijze, waarin layouts vaak met behulp van HTML tabellen werden vormgegeven, is het werken met CSS lastiger, met name voor beginners. Er is in ieder geval een hogere leercurve om aan de slag te kunnen met CSS. Hierdoor is vormgeving op het web wel op een hoger niveau terechtgekomen en behoorlijk geprofessionaliseerd.
Complexe layouts zijn mogelijk met CSS, maar zijn vaak ingewikkeld en bewerkelijk om te bouwen. Er zijn allerlei technieken om bijvoorbeeld aparte lettertypes in een website te tonen of een box met ronde hoeken te tonen, maar dit zijn geen standaard elementen van CSS. Zaken zoals transparancy (doorzichtige pagina elementen), schaduwen en andere geavanceerde layouts vereisen het uploaden van afbeeldingen die door middel van CSS zo worden gepositioneerd dat ze het gewenste effect tonen.
Toekomst
De toekomst is al een beetje begonnen, want er is een nieuwe versie van CSS beschikbaar: CSS3. Met CSS3 kan je heel veel fantastische dingen doen die met CSS2 veel moeite kosten. Om er maar een paar te noemen:
- ronde hoeken
- ingebedde lettertypen
- tekstschaduw
- transparency
- kleurprofielen
- tekst in kolommen
- kleurverloop
- en nog veel meer…
Dit zijn allemaal standaard elementen geworden van CSS3 en dat betekent dat complexe layouts minder complex worden omdat veel zaken waarvoor allerlei trucks nodig waren nu standaard ondersteund worden.
De toekomst is al een beetje begonnen, want er is een nieuwe versie van CSS beschikbaar: CSS3.
Er is wel een nadeel: CSS3 wordt nog niet door alle browsers ondersteund en de browsers die het wel ondersteunen doen dat soms gedeeltelijk. Kortom, deze prachtige nieuwe technieken zijn maar gedeeltijk toepasbaar. Dat betekent keuzes maken en dat is waar de term progressive enhancement een rol speelt.
Progressive wat…?
Progressive enhancement is het best uit te leggen met een voorbeeld. Stel er moet een nieuwe website gebouwd worden. Voor de vormgeving zijn er de volgende opties:
- Ondersteun alle browsers met dezelfde pixel precisie, oftewel, de website ziet er identiek uit in alle browsers. Dit is de duurste oplossing, want er is meer tijd nodig om de layouts voor de verschillende verouderde browsers (met name Internet Explorer 6 en 7) werkend te krijgen.
- Ondersteun alle browsers gedeeltelijk. Zorg eerst dat een website er in de nieuwste browsers goed uitzien en vervolgens dat het er in oudere browsers redelijk uitziet en werkt.
- Ondersteun alleen nieuwe browsers en vergeet de oude. Dit betekent dat alles er pico bello uitziet in de nieuwste browsers, maar dat een website het mogelijk helemaal niet kan doen in een verouderde browser.
Van deze drie strategieën komt de tweede het dichts bij progressive enhancement. Er kan gebruik gemaakt worden van de nieuwste (tijdbesparende) technieken, die alleen niet in iedere browser zichtbaar zijn. Concreet betekent dat bijvoorbeeld dat een pagina element in Safari of Chrome ronde hoeken heeft en in Internet Explorer vierkante hoeken. Of dat de tekst in de ene browser net iets mooier is dan in de andere. De functionaliteit van de website is in tact, alleen de vormgeving is minder gepolijst.
Op zichzelf is deze methode niet gek. Stel dat je een oude televisie hebt met een beeldbuis. Je kan dan niet verwachten dat je daar op HD kwaliteit films kan afspelen of dat er een usb poort beschikbaar is om randapparatuur aan te sluiten. In die zin hebben oude browsers hun beperkingen en zijn er gratis nieuwe browsers beschikbaar. Alleen sommige grote bedrijven hebben een IT policy waarbij gebruikers niet vrij zijn een alternatieve browser te installeren. Voor deze groep geldt dat er geen keuze is. Voor alle andere gebruikers geldt dat er voldoende vrijheid is om te upgraden. En als je dat niet doet kies je er in feite voor om met een mindere user experience genoegen te nemen.
Stel dat je een oude televisie hebt met een beeldbuis. Je kan dan niet verwachten dat je daar op HD kwaliteit films kan afspelen of dat er een usb poort beschikbaar is om randapparatuur aan te sluiten. In die zin hebben oude browsers hun beperkingen en zijn er gratis nieuwe browsers beschikbaar.
Voor de industrie in het algemeen geldt dat deze werkwijze een eenvoudiger ontwikkelproces kan betekenen en dat vertaalt zich weer in lagere kosten voor de klant. Verder bevordert het de vooruitgang. We rijden tegenwoordig tenslotte ook in hybride auto’s met airbags, airconditioning en driepuntgordels in plaats van een Ford Cortina met alleen een gordel om de middel, een hoog brandstof verbruik en beslagen ramen. Als er voordeel te halen is uit het gebruik van nieuwe browsers zal zich dat hopelijk vertalen in een afname van verouderde browsers. Het lijkt mij een situatie waarin iedereen wint: de webdesigner kan met nieuwe technieken iets moois maken, de klant betaald minder ontwikkelkosten door de tijdsbesparing en de website bezoeker krijgt mooi opgemaakte pagina’s te zien.
Wil je meer weten? Neem dan gerust contact met mij op.