Artikelen
Een woord vooraf
Dit is een door mij naar het Nederlands vertaalde versie van het artikel 'Throwing Tables Out the Window' door Douglas Bowman. Lees het originele artikel hier. Dit artikel is vertaald in de ikvorm, hierbij refereer ik aan de schrijver, Douglas Bowman.
- Nick Verstappen
Tabellen uit het raam gooien.
Kijk mam, geen tabellen!
Degenen die dit jaar bij Digital Design World in Seattle waren, zagen mijn (Douglas Bowman) presentatie getiteld 'Geen tabellen meer, maar CSS technieken' ('No More Tables, CSS Layout Techniques'). In die sessie hebben we het correcte gebruik van tabellen bekeken, en een paar aanwijzingen om ze op te maken in CSS. Daarna gingen we over naar tabelloze layout, en hebben voorbeelden besproken en een samenvatting van de twee basisbenaderingen (positioneren en floats).
Halverwege de presentatie veranderde ik van versnelling en kondigde aan dat we een echt voorbeeld zouden converteren van tabellen en spacer gifs naar pure CSS layout. Ik had ook een fictief voorbeeld kunnen hanteren in de presentatie. Maar dat idee zou te makkelijk uitgedacht zijn. Als ik mijn eigen voorbeeld had gecreëerd, zou het mooi en keurig zijn geweest. Alles zou er precies uitzien zoals ik het wilde, en zonder probleempunten die ik zelf al weet te vermijden.
Fictief was niet goed genoeg. Ik wilde een echte uitdaging. Dus ik koos voor de site van een klein, dichtbij-het-Seatlle-gebied-liggend bedrijf waarvan ik dacht dat enkele toeschouwers van de presentatie het wel zouden kennen:
Ok, misschien iets meer dan een paar toeschouwers waren bekend met dit niet-zo-kleine bedrijf. Veel gebruikers arriveren dagelijks op de homepage van Microsoft. Microsoft's letterlijke homepage mag dan wel niet zo bekend zijn en zoveel gebruikt worden als zoekgiganten Google en Yahoo! Maar microsoft.com krijgt in het algemeen veel bezoekers, en de groep mensen die elke dag door het domein surft loopt waarschijnlijk wel in de miljoenen.
Een schande dat de Microsoft site niet zo geoptimaliseerd is als het zou moeten zijn. Ze hebben de duik nog niet genomen. Gebruikers downloaden onnodig grote pagina's, en servers gebruiken extra bandbreedte om bij te blijven. Met 40 KB is de HTML voor Microsoft's homepage niet bepaald een opgezwollen beestje. Maar het is geladen met ontoegankelijke, klungelige, tabelgebaseerde markup gevuld met hun eigen attributen en wat onhandige JavaScript. Let op dat ik het er nog niet over heb gehad of het valide markup was of niet. Ondanks het gebruik van de smaak van XHTML, ontbreekt de doctype op de Microsoft pagina.
Waarom Microsoft?
Is dit niet weer gewoon om Microsoft te bekritiseren?
Heel kort: nee.
Ik heb niet voor Microsoft gekozen om ze te bekritiseren, of om wat schoten te lossen op een makkelijk doel, een bedrijf die veel mensen in onze industrie graag haten. (Ik twijfel wel aan enkele beslissingen die ze hebben gemaakt, maar daarop heb ik ze niet beoordeeld.)
Ik geef toe dat ik met opzet koos en doelde op een belangrijk bedrijf. Het zit in mijn natuur om achter het hoogste vuurwapen aan te gaan. Maar het is ook een voorbeeld waar iedereen bekend mee is. Microsoft was (en is) een perfecte kandidaat voor een CSS opknapbeurt waarna die zich aanpast aan de standaarden.
Hier zijn de redenen waarom dat zo is:
Reden #1
Om het inefficiënte gebruik van een overvloed aan tabellen en spacer gifs om de pagina op te maken. Pagina's zijn meer gebonden aan een bepaalde layout als de inhoud opgemaakt is met tabellen, en zijn daardoor vaak minder toegankelijk. Microsoft is niet de enige hierbij. Een overweldigende meerderheid van websites op het internet gebruiken nog steeds tabellen voor layout en andere visuele doeleinden. Ik koos voor Microsoft omdat het kon dienen als een bekend voorbeeld (en eventueel een model) dat in verband staat met een probleem waar veel website nog gehoor aan moeten geven.
Reden #2
Omdat de basis van de Microsoft website een model is dat door duizenden websites wordt gebruikt: header + 3 kolommen + footer. Iets specifieker: een header die de gehele breedte van de top van de pagina beslaat, een linkerkolom met vooral navigatie, een hoofdkolom voor inhoud, een rechterkolom voor extra spul, en een footer onder de drie kolommen die ook de gehele breedte van de pagina beslaat. In plaats van deze 3-koloms layout gebruiken veel sites een 2-koloms variant met dezelfde basis en een zijbalk rechts of links van de hoofdkolom:
Reden #3
Omdat Microsoft's homepage CSS gebruikt voor net iets mee dan FAC (fonts en color). Ik zou graag zien dat een bedrijf dat eigenlijk het concept van stylesheets in een toepassingsomgeving uitgevonden heeft meer naar CSS gaat neigen dan ouderwetse methodes.
Reden #4
Omdat Microsoft op dit moment verschillende homepages heeft die weer worden gegeven afhankelijk van welke browser de gebruiker heeft. Een versie voor Internet Explorer for Windows (v5.5 en hoger), en een andere, ietwat versimpelde versie voor alle andere browsers (inclusief IE/Mac) die wat afbeeldingen en alle productlogo's weglaat. De non-IE/Win versie laat wat van de functionaliteit (bijv. bewegende menu's) weg, en geeft pagina-elementen met andere technieken weer. Als je IE/Win 5.5 (of hoger) plus een andere browser hebt, kun je dit zelf zien. Zo niet, dan is hier een screenshot van de twee versies, met de verschillen rood omcirkeld:
De non-IE/Win versie is duidelijk eenvoudiger dan de volledige versie die de gebruiker met IE/Win voorgeschoteld krijgt. We weten allemaal dat dit niet zo hoeft te zijn. Als je je afvraagt, het is niet alleen slordige code die in sommige browsers werkt en in andere niet. Microsoft doet opzettelijk een JavaScript browserdetectie, en stuurt de browser naar een ander bestand als hij IE5.5 of hoger is. In plaats daarvan zou Microsoft slechts één versie moeten hanteren die in alle browsers werkt.
Microsoft laat de non-IE/Win gebruikers tenminste nog een pagina zien. Sommige ontwikkelaars gaan niet eens zo ver. De veelgebruikte reden waarom geen rekening wordt gehouden met andere browsers is dat MSIE/Win DE browser is die de MEERDERHEID van de mensen gebruikt, en dat het TE LANG DUURT om een versie te ontwikkelen die correct weergegeven wordt in andere browsers. Anderen klagen dat het TE DUUR is om een versie te maken voor andere browsers dan IE/Win. De duurt te lang en de is te duur redenen zijn beiden onjuist.
Veel ontwikkelaars geloven in deze redenen omdat ze beginnen met ontwikkelen voor IE, en hun website checken in IE. Dan bekijken ze de website in een andere browser en raken ze gefrustreerd als ze allerlei zogenaamde 'bugs' zien die ze denken te moeten repareren.
IE interpreteert CSS een stuk losser dan andere browsers die herhaaldelijk versies op de markt hebben gebracht de afgelopen jaren (Mozilla, Firefox, Safari, Opera.. ). Starten met IE betekent minder problemen die in het begin worden ontdekt met het ontwikkelen van werk. Ontwikkelen voor IE in eerste instantie, en dan proberen om je website gereed te maken voor andere browsers zal tijd en kosten verhogen op lange termijn. Maar er is een betere manier om ontwikkeling van websites te benaderen die sneller is en minder kostbaar.
Begin met de striktere, meer inschikkelijke browsers die (meestal) dingen weergeven zoals ze weergegeven moeten worden. Maak daarin alles zoals het moet. Neem dan een stap terug en maak wat 'patches' voor IE. Het ontwikkelen gaat veel sneller zo. Het kan wat tegenstrijdig zijn om in eerste instantie de browser die de meeste bezoekers hanteren te negeren. Maar het proces is veel vloeiender en efficiënter als je niet gewend raakt - of afhankelijk bent van - IE's relaxte gedrag. Begin met IE, en je begint wellicht met slechte code die veel moeilijker te repareren is dan voor andere, striktere browsers.
Als we op deze manier werken, hebben we nog steeds de IE Factor die we moeten bestrijden. Hoewel, als we meer ervaring krijgen met de foute manier waarop IE met CSS omgaat, zal de IE Factor kleiner worden. Er is hoop.
Alleen de feiten, graag
In het tweede gedeelte van de presentatie zijn we stap voor stap het proces doorlopen om Microsoft's tabelgebaseerde, spacer-gif-beladen pagina te converteren naar een meer toegankelijke, puur door CSS opgemaakte versie die in alle browsers correct weergegeven wordt. Dit is niets nieuws. Anderen hebben microsoft.com al eerder herschreven. Veel frequente lezers van Stopdesign maken als sinds jaar en dag tabelloze ontwerpen. Maar we zien de rest nog niet in het water springen, ondanks dat het water inmiddels door en door getest is. Vandaar de presentatie bij Digital Design World en artikel als vervolg daarvan.
Toen we verder gingen met de presentatie, hakten we elk deel van het proces in handelbare stukjes. Ik lichtte de belangrijkere stappen in het proces toe, inclusief het dumpen van tabellen, conversie naar meer semantische markup, en de CSS technieken die gebruikt worden om elk deel van de Microsoft homepage trouw te reproduceren.
Tijdens de presentatie hebben we veel diagrammen, screenshots en pictogrammen bekeken die helpen bij het begrijpen van de technieken die gebruikt worden om elk deel weer te geven. Ik had de code ook als aparte, 'voorgebakken' bestanden opgeslagen zodat ik ernaar kon verwijzen in elk stadium van het proces.
Eén van de redenen voor het schrijven van dit vervolgartikel is het publiceren van de uiteindelijke resultaten van de Microsoft.com herschrijving. Je kunt er niet omheen:
| Huidig (IE/Win) |
Huidig (andere) |
Herziene versie | |
|---|---|---|---|
| Tabellen | 40 | 36 | 0 |
| Spacer gifs | 35 | 76 | 0 |
| <img> tags | 43 | 122 | 6 |
| CSS achtergronden | 1 | 1 | 11 |
| Browsers ondersteund | 2 | meeste moderne | meeste moderne |
| HTML bestandsgrootte | 40 KB | 39 KB | 15 KB |
| Vermindering in grootte | - | 3% | 62% |
Verder gaan
Deze getallen worden zelfs nog interessanter als we schattingen en projecties doen op de manier van Meyer/Davidson ESPN. Volgens een openbare Microsoftpagina getiteld 'Inside Microsoft' verklaren Microsoft's gepubliceerde bezoekersstatistieken dat microsoft.com 1.2 miljard pageviews kreeg in de maand mei 2004. In deze presentatie liet ik zien hoe men de markup van een pagina met 62% (of 25 KB) kan verminderen. Ik schatte ook in dat er ongeveer 25 KB per pagina bespaard kon worden als Microsoft ook op de rest van hun website te koppig was om CSS toe te passen. Als we dat vermenigvuldigen met een gemiddelde van 38,7 miljoen pageviews per dag, komen we met die 25 KB op ongeveer 924 GB in bandbreedtebesparing per dag, ofwel 329 terabytes per jaar.
Deze nummers zouden op zich genoeg moeten zijn om een paar mensen aan het denken te zetten.
Dan komt het feit er nog bij dat de herschrijving slechts één versie is, die Microsoft's meer 'geavanceerde' ontwerp ondersteund, (zoals we momenteel zien in IE/Win) en dit in veel meer moderne browsers.
Bedrijven zoals Microsoft kunnen al dan niet slechts één versie van hun homepage handhaven die in meerdere browsers werkt, sneller laadt, meer toegankelijk is voor alle soorten gebruikers, toepassingen en apparaten. Hoe dan ook, ik dacht dat het de moeite waard was om men te wijzen op het feit dat het nu goed mogelijk is om te demonstreren en te doorlopen hoe zij - of elk ander bedrijf - een superkrachtige versie zouden kunnen maken die minder markup gebruikt, in meerdere browsers werkt, en toegankelijkheid verhoogt. Dit alles gedemonstreerd in een tijdsbestek van één of twee uur.
Bijkomende punten en uitleg
- Als je nieuwsgierig bent: de CSS is slechts van 3 KB en 5 KB (respectievelijk IE/Win en non-IE/Win versies) naar 8 KB vergroot voor de herschrijving.
- De bewegende menu's voor twee opties zoals die in de IE/Win versie in de linker navigatiebalk te zien zijn, kunnen ook gereproduceerd worden. Dit alles met pure CSS en eenvoudige, betekenisvolle, toegankelijke markup. De herschrijving gebruikt de
:hoverpseudo-class om een geneste unordered list in- of uit te schakelen wanneer men de muis over de parent list item beweegt. Eén overweging: IE ondersteunt geen:hoverop list items, dus de JavaScript methode die Microsoft al toepast zou nog steeds nodig zijn om bewegende menu's te ondersteunen in die browser. Of iets als Suckerfish Dropdowns zou gebruikt kunnen worden om de zelfde betekenisvolle geneste lijst markup te behouden die de herschreven versie gebruikt. - De flinke vergroting in aantal image tags voor Microsoft's huidige non-IE/Win versie te wijten aan heftiger gebruik van spacer gifs. De non-IE/Win versie roept ook elke bullet image individueel aan, in plaats van slechts één CSS declaratie, zoals de IE/Win en herschreven versies dat doen.
- Alle JavaScript die gevonden was in Microsoft's markup, werd verwijderd. Net zoals honderden eigen attributen in anchor elementen die schijnbaar werden/worden gebruikt voor click-tracking doeleinden. Microsoft zal wellicht wat van deze laag terug willen voegen - maar hopelijk door een valide manier van doen.
- Zoals hierboven genoemd, is de bedoeling van dit artikel om de potentiële resultaten en voordelen van het gebruik van CSS, en van eenvoudigere, betekenisvollere markup te publiceren. Het gebruikt Microsoft meer als een bekend voorbeeld. In dit artikel is bewust niet gelinkt naar de uiteindelijke heschreven code. Ik begrijp dat veel mensen zouden kunnen leren van het werk dat gedaan is voor deze presentatie, zonder de presentatie te zien, door de veranderingen van HTML en CSS te bestuderen. Hoe dan ook, ik wil niet iemand's rol bij Microsoft relativeren door openlijk veranderingen aan hun broncode te publiceren voordat ik ze direct aan Microsoft heb gepresenteerd en de veranderingen en technieken met de juiste teamleden heb besproken, als zij dit ooit wensen te doen.
Heeft u vragen en/of opmerkingen over de vertaling van dit artikel, neem dan contact met mij op via de contactpagina. Als u contact op wilt nemen met de schrijver van dit artikel, bezoek dan de website van Douglas Bowman.
If you have any questions or remarks about the translation of this article, please refer to the contact page. If you want to contact the writer of the article, visit Douglas Bowman's website.