Webontwerp

Liquid design

Ik kan lang niet in alle omstandigheden bepalen hoe mijn pagina's bij iemand op het scherm verschijnen (als dat al het geval was en ze niet werden voorgelezen). Meer en meer werd ik aangestoken door de filosofie van Liquid Design.

Met Liquid Design bereik je, dat het ontwerp in moderne, grafische browsers beeldvullend wordt weergegeven, onafhankelijk van de grootte van het venster. Er zijn geen grote lege ruimtes zichtbaar omdat een pagina te smal is en er verschijnen geen horizontale schuifbalken, omdat een deel van de pagina buiten het venster valt. Het venster van de browser wordt dus optimaal benut.
De pagina's zullen zich zonder meer aanpassen aan verschillende omstandigheden, zoals variaties in vensterbreedte en lettergrootte.

Vensterbreedte

Ik stoor me altijd mateloos aan pagina's die of veel breder zijn dan mijn standaard breedte voor mijn browservenster (horizontale scrollbar) of veel smaller, waardoor er grote lappen van mijn venster onbenut blijven en in onnodig naar beneden moet scrollen.

Bij Liquid Design doet bijvoorbeeld de afmeting van het browservenster opeens niet meer terzake. Binnen redelijke limieten zal een pagina er altijd goed uitzien, althans, de suggestie voor opmaak van de auteur volgen.
Als je je browservenster waar je deze pagina in ziet, significant verkleint of belangrijk vergroot blijft de inhoud binnen bepaalde limieten nog steeds goed gepresenteerd worden. Dat is een teken, dat een pagina een Liquid Design heeft. De breedte waarop de tekst wordt getoond, past zich automatisch aan het browservenster aan en tekst vloeit zonder probleem van de ene regel naar de andere.

Dat wilde ik ook.

Liquid Design, ontdekte ik, wordt bereikt door voor het blok waarin de hoofdmoot van de inhoud, de echte content, dus bijvoorbeeld de tekst van deze pagina, zoals je die nu leest, geen vaste breedte op te geven. In geen geval.
Dus niet door de tekst in een apart frame in een frameset te stoppen en dat frame dan een bepaalde breedte mee te geven. Niet door de tekst in een <div> met vastgestelde breedte te plaatsen.

Ik stelde de gewenste marges op mijn pagina's in voor links en rechts (en boven en onder) en liet de tekstbreedte verder voor wat die was. Iedere <p> en iedere <div> die in de normale flow van de pagina zit, neemt die marges aan.

Zie ook het voorbeeld van de pagina over het verticaal en horizontaal centreren van de content. Een pagina zonder frames, volledig schaalbaar.

Lettergrootte

Een ander, heel belangrijk aspect van Liquid Design is het denken in formaten als relatief ten opzichte van elkaar. Bij werken in Word, waarmee je documenten maakt voor op papier, bepaal je marges, afstanden, lettergrootte en dergelijke met een vaste maat. Je gebruikt inches, centimeters of pixels en punten.
Voor een Liquid Design moet je af van denken aan afdrukken op papier. Papiergebruik rechtvaardigt gebruiken van zeer exacte, vaststaande afmetingen. Gebruik van een beeldscherm als medium sluit dat juist uit.

Dit moet je doortrekken naar alle afmetingen die je in webontwerpwebdesign design internetontwerp internetdesign tegenkomt. Dus een lettergrootte geef je op in percentages of in em. Een stukje uit mijn style sheet ter illustratie:

h1   {
   font-size:160%;   }

h2   {
   font-size:140%;   }

h3   {
   font-size:115%;   }

In dit deel van mijn style sheet bepaal ik voor de kopjes van mijn teksten onder meer hoe groot de tekst moet worden weergegeven. Die grootte hangt af van de grootte die ik heb opgegeven voor het standaard lettertype voor het gehele document.
Door de grootte van de letters op deze manier te bepalen, kan mijn bezoeker met een eenvoudig [Ctrl]+[Mousescroll] (of equivalent daarvoor in andere browsers dan IE) de tekst vergroten of verkleinen naar wens.

Ook dat is Liquid Design. Deze praktijk hoort naar mijn mening bij goed webontwerp. Flexibele, Liquid pagina's betekenen dat een bezoeker heel eenvoudig het venster en lettergrootte heeft aangepast aan eigen wensen. Ook als de bezoeker een eigen lettertype en of grootte heeft ingesteld, zullen mijn pagina's zich vlekkeloos vloeiend aan hun wensen aanpassen.

In mijn artikel Pennenstrijd van december 2004 ga ik uitgebreid in op vele aspecten van lettertypes. De moeite waard om te lezen als achtergrondinformatie bij dit onderwerp.

Uitzonderingen op Liquid Design

Overigens is het heel legitiem en nuttig om niet alle onderdelen van een pagina liquid te maken. Zo heb ik een aantal van de onderdelen op mijn pagina's een vaste positie èn een vaste breedte gegeven. Dat geldt dan bijvoorbeeld voor de <div> waarin het menu, links-boven, in is geplaatst.
Uit mijn style sheet:

.menu-container   {
   position:absolute;
   top:163px;
   left:3px;   }

.menu   {
   position:relative;
   width:90px;   }

Ik wil niet dat het menu in mijn pagina's over of onder de inhoudelijk tekst kan schuiven en ik wil ook niet dat het menu een variabele plaats of breedte heeft en mijn pagina's er niet alle hetzelfde uitzien voor één bezoeker. Dat geeft maar een onrustig beeld.
Met de hierboven gegeven definitie voor de class 'menu-container' plaats ik het menu buiten de flow van de pagina en met de absolute breedte van de class 'menu' zorg ik er voor dat deze binnen de door mij voor de pagina gedefinieerde marge blijft.

Printen van documenten van het web

Net toen ik overtuigd begon te raken van het loslaten van een statisch ontwerp en mijn pagina's meer en meer liquid kreeg, ontdekte ik ook, dat het printen van documenten die zijn bedoeld voor weergave op het scherm weer hele andere aandachtspunten vraagt en kent.

Je kan er voor kiezen om de documenten die je op het net plaatst, te laten printen zoals ze er op het scherm (ongeveer) ook uit zien, maar de kans is groot, dat een geprint document er dan heel lelijk uit komt. Bovendien, als je je teksten een kleurtje hebt gegeven, en je bezoeker heeft en gebruikt een kleurenprinter, vreet het printen van jouw pagina's een hoop dure inkt, wellicht volstrekt onnodig.

Om enigszins controle te hebben over het uiterlijk van een geprinte webpagina, heb ik een apart style sheet gebouwd voor printers. Het grootste gedeelte van de opmaak van mijn pagina's laat ik volledig intact. Anders verras ik de bezoeker maar met een uitdraai die hij helemaal niet verwacht.
Wel heb ik alle tekstelementen bijvoorbeeld en enkele grafische elementen, zoals lijnen, de kleur zwart meegegeven. Daarnaast heb ik een op de grootte van het papier afgestemde marge en grootte van lettertypen en dergelijke gedefinieerd. De kleur van afbeeldingen heb ik gelaten voor wat het was. Het lettertype zelf heb ik ook niet veranderd

Een belangrijk element in mijn style sheet voor printers is het kunnen uitsluiten van elementen. Ik heb bepaald dat bijvoorbeeld menu's niet worden geprint door een aparte class daarvoor op te nemen, uitsluitend in mijn style sheet print.css. Zo is een afdruk van een pagina uit mijn site redelijk schoon en blijft hij overzichtelijk.

Voor hetzelfde geld kies je er bewust voor om géen apart style sheet voor printen op te nemen. Je doet daar niets mee verkeerd en als je vind dat je pagina's goed genoeg uit de printer rollen, prima. Dan laat je dit verder voor wat het is.

PDF nuttig gebruiken

Het is altijd denkbaar dat er documenten zijn, waarvan je eist dat ze exact zó geprint kunnen worden, als jij wilt. Binnen mijn site geldt dat voor bijvoorbeeld een brief die een open sollicitatie betreft. Ongeacht van de beschikbaarheid van lettertypes bij mijn bezoeker, zal die brief goed uit de printer rollen -mits de bezoeker het bestand kan lezen- , omdat ik er een PDF-bestand van heb gemaakt.

Dat is het immense voordeel van PDF. Maar er kleven ook nadelen aan het publiceren van PDF-documenten. Allereerst moet de bezoeker wel de beschikking hebben over een toepassing die kan omgaan met het type bestand. Bijvoorbeeld Acrobat Reader. Heel veel mensen hebben die toepassing standaard geïnstalleerd op hun computer, maar niet iedereen. Bij heel belangrijke documenten kan je dan overwegen om de inhoud óok in HTML aan te bieden, zodat dan in ieder geval de inhoud kan worden bekeken.

Een ander nadeel van PDF-bestanden is dat ze in de regel vele malen groter zijn (uitgedrukt in kiloBytes, kB) dan inhoudelijk dezelfde documenten in HTML-format.
Bijvoorbeeld mijn CV. Als PDF-document is die 42kB groot, voor twee A4-tjes, een uittreksel van het eigenlijke, uitgebreide CV. In HTML-format is hetzelfde bestand 21kB groot, maar het bevat wel ruim twee keer zoveel informatie.
De helft kleiner voor twee keer meer content.

Ik heb mezelf aangeleerd om informatie die ik in als PDF-bestand aanbied aan mijn bezoekers, ook aan te bieden als gewoon HTML-document.
Bovendien meld ik bij een PDF-document waar mogelijk wat de omvang van het bestand is, zodat een bezoeker niet onaangenaam verrast kan worden door de grootte ervan.