Hoi allegrow!
Grrr, hier wordt ik niet blij van... Kan IE6 niet gewoon verdwijnen ;-)
Dat zou wel zo makkelijk zijn!
Maar ... vroeger maakten we toch ook websites voor IE6 (die al zo'n ontzettende vooruitgang was
na IE5 en IE5.5, die we ook tevreden moesten stellen)?
Daarom maar eens naar zolder gegaan en in een stoffig kastje mijn gereedschapskistje met IE-hacks opgediept, samen met een floppy met IE-only hulpbestandjes en een beduimeld aantekenboekje met het etiket "De getemde feeks".
Die drie heb ik samen met de allegrow-homepage opgesloten in een kamertje. "Zo," zei ik: "en jullie komen er niet eerder uit dan als...":
- er een pagina is die werkt in alle browsers,
- die géén aparte stylesheets heeft voor de IE-varianten,
- die hoogstens een paar regeltjes in de html heeft staan ter correctie van IE('s),
- die kleine scriptjes mag gebruiken voor de show in IE6,
- waarbij de bezoeker in de browser de lettergrootte straffeloos naar behoefte kan aanpassen,
- die voor de vaste pagina-onderdelen zo min mogelijk zo klein mogelijke images heeft,
- en die voldoet aan de Quickscan van het Kwaliteitsmodel Webrichtlijnen (die de html-validator en css-validator omvat, maar daarnaast strengere standaarden aanhangt en extra aspecten van toegankelijkheid en gebruiksvriendelijkheid in rekening brengt).
Ziezo, daar was ik mooi van af!
Je begrijpt, het was af en toe een tumult van heb-ik-jou-daar, als ik langs het kamertje liep.
"Nee, nooit naar rechts floaten met een margin-right, anders moeten er weer hacks aan te pas komen!" - "Ja, maar die margin is nodig ..." - "Dan gebruik je maar een padding!" - "Ja, maar die padding veroorzaakt ..." - "Niet jamaren, dan zet je er gewoon een fake border in met de padding-kleur." - "Shoot, wat nu met die rottige absolute positie dan?" - "Gewoon samen met een float gebruiken, en de volgende div omhoogtrekken!". "Nee! Voor die grijze png in IE6 moet je de layout niet gaan veranderen, daar heb ik wel een fix voor." - "Help, het Suckerfish-javascript doet het toch niet, geloof ik!" - "Oetel, je vergeet ook...!" - Enz. enz.
Maar ze kwamen op een gegeven moment toch naar buiten:
Ik gelijk testen:
- Werkt bij mij in IE6, IE7, Firefox3.5, Opera 9.21, Chrome en Safari. Recentere browsers zullen het dan zeker aan moeten kunnen. Browsershots is ook tevreden over IE8.
- Lettergrootte-bestendig. Ook IE-bezoekers kunnen nu hun gewenste lettergrootte instellen.
- Eén css-sprite voor de vaste pagina-bg-afbeeldingen (ronde hoekjes voor de top toegevoegd): van 4kB totaal. Was: 7 images, in totaal 20.5kB.
- Andere afbeeldingen geoptimaliseerd: bestandsgrootte sterk afgenomen met behoud van kwaliteit.
- Pagina is all-in nu 69kB i.p.v. 154kB, dus twee keer zo snel.
- Quickscan is vrolijk 47/47 (was: 37/47).
- In de html maar een paar regeltjes extra voor de boosdoener:
HTML:
<!--[if lte IE 6]>
<script type="text/javascript" src="scripts/allegrow-sfHover.js"></script>
<style type="text/css">
#logo img { behavior: url("scripts/pngbehavior.htc"); }
</style>
<![endif]-->
Toelichting menu
- Om onder de Home-kop submenu's te hebben, is erg ongebruikelijk. Wie bv. via het logo naar de homepage gaat, zie die submenu's nooit. - "Visie en Missie" ondergebracht bij item "Over mij", en "Informatie" ondergebracht bij "Werkwijze" (en "Richtlijnen" genoemd, omdat "Informatie" zo'n algemeen begrip is, dat je je er niets bij kunt voorstellen: alles is informatie!).
- Ook ongebruikelijk is, om het hoofdmenu-item óók klikbaar te hebben (naar een andere pagina als die in het submenu'tje eronder zitten). De meeste mensen verwachten dat het hoofdmenu-item alleen maar een hover-knop is om de submenu's te kunnen zien. Bij "Coaching" zie je drie soorten coaching in de submenu's, dus dan denkt men: daar kan ik uit kiezen - en komt niet op het idee dat onder "Coaching" zelf ook nog een pagina verstopt zit. Daarom de pagina's van de hoofdmenu-items ook in de submenu's opgenomen. Wie met een verdwaalde klik toch op het hoofdmenu klikt, komt op dezelfde pagina uit als de eerste van het submenu: altijd prijs!
- Bij een "current"-onderstreping gebruiken voor de actuele pagina krijgen de submenu-pagina's dezelfde "current", wat verwarring kan veroorzaken. Beter lijkt om de "current" aanduiding te laten vervallen (of misschien alleen bij Home).
- Voor IE6 (en oudere oudjes) is het allegrow-sfHover.js javascript toegevoegd. Daarmee klapt IE6 ook uit.
Toelichting afbeeldingen
- De 5 images voor de ronde hoekjes zijn niet nodig. Met iets andere css kan je volstaan met één klein image, waar alle hoekjes in zitten. De combi-afbeelding (een zg. "css-sprite") gaat er in als achtergrond-afbeelding, en dan kan je met de background-position het benodigde stukje op zijn plaats schuiven. Zie ook dit artikeltje en deze voorbeelden.
- In één moeite door zijn ook de header- en footer-background en de pagina-topCorners in de sprite opgenomen, die er nu zo uit kan komen te zien.
- Optimaliseren images: het logo is teruggebracht tot 7.5kB (hier; was: 12kB), de twitter en de linkedin kunnen 256-kleuren gifjes worden. De bridge van 111kB (!) kan gerust terug naar deze 35kB png.
- Prettig hulpmiddel om images te laten slinken: YSlow, een add-on voor Firefox. Daar zit een tooltje Smush in, dat online de kleinst mogelijke afbeeldingen voor je maakt!
- Voor de grijze vertoning van transparante png-afbeeldingen door IE6 bestaat de zg. png-fix. Dat is het bestandje pngbehavior.htc dat toegevoegd moet worden. Als hulpje is een transparant gif'je van 1*1px nodig: blank.gif, dat in de directory van de pagina moet komen te staan. Daarmee is IE6 zo doorzichtig als een openstaande glazen schuifdeur.
Toelichting css
Die staat her & der in het stylesheet zelf.
O ja, het lukte niet zo vlug om de twitter en linkedin knopjes een gefixeerde positie te geven. Waarschijnlijk kan het opgelost worden door er nog ergens een wrapper-div bij te plaatsen, maar dat maakt de html onoverzichtelijker, en de gefixeerde knopjes zijn naar mijn smaak ook niet zo nodig. Niemand zal dat missen, lijkt me. Trouwens, IE6 kan niet met fixed omgaan: daar zou een hack voor nodig zijn.
Op een aantal punten had het misschien eenvoudiger gekund, met minder ID's.
Bijvoorbeeld:
HTML:
<div id="top-container">
<p id="skip">Sla menu over en ga <a href="#header">direct naar inhoud</a>.</p>
<ul id="menu">
<li> ... enz.
... kan net zo goed zijn:
HTML:
<div id="top-container">
<p>Sla menu over en ga <a href="#header">direct naar inhoud</a>.</p>
<ul>
<li> ... enz.
... want er zit maar één <p> en maar één <ul> in deze container. *)
De css voor de <ul> wordt dan:
Code:
#top-container ul { ... }
i.p.v.
#menu { ... }
Vooral met die submenu's is het echter wel zo praktisch om een kort toegespitst ID te hebben. Bijvoorbeeld:
Code:
#menu ul li {
position: relative;
float: none;
color: #336699;
... enz.
}
... komt nu in plaats van:
Code:
#top-container ul ul li {
position: relative;
float: none;
color: #336699;
... enz.
}
Want met de laatste moet ik vreselijk ulletjes tellen om te zien waar ik nou eigenlijk zit.
*)
Met vriendelijke groet,
CSShunter
__________
*) Die "skip"-link is bedoeld voor mensen met voorleesbrowser (doe hoeven dan niet op elke pagina opnieuw het menu aan te horen). Op scherm is deze bladwijzer niet te zien,
wel in een pure tekstbrowser (waarin de css uit staat).
**) Tegenover steile semantici kan je je altijd verdedigen met het pragmatisch argument: "de css wordt er wel een stuk korter door, en dat scheelt in paginasnelheid".
