Maart 2005

Een bezoeker betrapt me:

Wat zie ik nu? De pagina over Liquid design is zelf niet meer liquid?

ontvangen e-mailbericht d.d. 8 maart 2005

Dat is een bezoeker met een echte browser. Als je met Internet Explorer op mijn pagina's komt, zijn ze nog zo liquid of fluid als wat.
Maar kom je langs met een echte browser, zoals Netscape, Mozilla, FireFox of Opera, of de browsers voor een niet-Windwos OS, zoals draaien op een Mac, dat krijg je te maken met de volgende stijlen:

  html {
    min-width:38em;
    max-width:60em;
    padding:1.5em;;
    margin:0 auto; }

Hiermee geef ik aan dat ik graag zie, dat mijn pagina's binnen bepaalde breedtes, namelijk (minstens of) min-width:38em en (maximaal of) max-width:60em, keurig een liquid of fluid verschijningsvorm hebben, maar dat ik wel grenzen stel aan hoe fluid ze mogen zijn. Is de viewport van de browser van mijn bezoeker breder of smaller dan de grenswaarden die ik heb gesteld, dan past de pagina zich ver niet meer aan. Bij smallere viewports zal er een horizontale scrollbalk verschijnen. Bij bredere viewports zal de pagina zich horizontaal centreren in de viewport, waarbij de loze ruimte links en rechts steeds verder toeneemt naarmate de viewport breder wordt.

Ik moet wel eerlijk toegeven: ik had de min-width op een significant hogere waarde staan, dan de huidige 38em. Anders was het de melder van het zondigen tegen mijn eigen principes misschien niet eens opgevallen.
Overigens: als iemand tegen zijn of haar eigen principes zondigt, maakt dat het principe niet minder waardevol. Het toont slechts dat de mens met principes ook maar mens is .

Een andere aanpassing in mijn pagina's is, dat ik nu ook color coding heb toegevoegd voor styles. Zoals in het bovenstaande voorbeeld met de breedtes voor mijn pagina's. De markup voor die color coding heb ik aangebracht in mijn CSS-pagina. Het ondersteunt de bezoeker (als het goed is) in het eenvoudig herkennen van de selectors, properties en values waarvan de lengths ook nog eens een apart kleurtje krijgen.

Voor de color coding van snippets met Markup had ik al eerder stijlen in mijn stijlblad opgenomen. Die heb ik bijvoorbeeld gebruikt in mijn HTML-pagina.

De kleurenschema's die ik gebruik voor de markup en stijlenvoorbeelden, heb ik niet zelf bedacht. Die heb ik gebaseerd op de color coding van de applicaties die ik veel gebruik.
Mensen die zelf TextPad gebruiken voor het schrijven van markup, zullen het blue, navy en teal meteen herkennen. Voor de combinatie van maroon, blue en purple die ik inzet voor de color coding van voorbeelden van stijlen, herken je als je TopStyle Lite gebruikt.
Beide programma's kan ik je aanbevelen (ze zijn gratis), als je een niet al te complexe site onderhoudt. Mij zijn ze tot goede steun.