Meeloper of vasthoudend, fluid of fixed

fixed width screenshots in a compilationDit artikel is al lange tijd te lezen als onderdeel van het help.sympal.nl ontwerpkeuze handboek. Het ligt daar echter een beetje weg te stoffen, vandaar dat ik besloot een grote opruiming te houden en wat artikelen naar mijn blog te verhuizen. Vandaag over Fluid versus Fixed.Fluid betekend dat je layout mee-schaalt met de grootte van het venster waarin hij weergegeven wordt. We spreken hierin eigenlijk alleen over de breedte. Op een heel klein scherm (of venster), zal de site heel smal weergegeven worden, op een groot scherm (bijvoorbeeld een breed venster) wordt de site heel breed weergeven.

Fixed betekent, dat onafhankelijk van de grootte van het scherm van de gebruiker, de site een vooraf ingestelde breedte heeft. Soms neemt zij dus maar een klein deel van het scherm in beslag (op een groot scherm) en soms loopt zij in de breedte van het scherm af (op een klein scherm).

De voor en nadelen zijn eenvoudig in een lijst op te nemen:- Voordelen fluid

  • de ruimte wordt optimaal gebruikt. Gebruikers met grote schermen kunnen hun scherm ook goed gebruiken.
  • geen "horizontaal scrollen". Op kleine schermen wordt nog steeds alles weergegeven.
  • Voordelen fixed
  • in het design is er maximale controle over hoe zaken er komen uit te zien.
  • elementen die fixed moeten zijn (zoals afbeeldingen die nooit mee kunnen schalen) komen altijd goed tot hun recht.
  • het designen is aanzienlijk makkelijker (de reden ook dat veel ontwerp-bureaus u ook fixed zullen voorstellen!).
  • Nadelen fluid
  • heel grote schermen, of heel kleine schermen kunnen het design "verpesten" omdat elementen bijvoorbeeld onder elkaar willen gaan staan (op een klein scherm is er gewoon geen ruimte om alles langs elkaar te laten staan)
  • het designen is moeilijker omdat rekening moet worden gehouden met allerlei schermgroottes en verhoudingen.
  • Nadelen fixed
  • Op grote schermen is de tekst meestal onleesbaar (zij staat immers op een vastte grootte).
  • Op kleine schermen kan de tekst overkomen als "koeien-letters". Zelfde reden als hierboven.
  • Op kleine schermen kunnen er dingen buiten het zichtbare venster zitten. Als er bijvoorbeeld advertenties rechts staan, kan het zijn dat een aanzienlijk deel van de gebruikers deze niet ziet zonder horizontaal te scrollen (iets wat uit onderzoek blijkt, dat haast niemand doet). Of nog erger: het einde van elke zin staat net buiten beeld!
  • Op grote schermen is er heel veel ongebruikte ruimte over. Als de gebruiker tevens ziet dat de lettertjes haast niet te lezen zijn, kan dit heel irriterend zijn.

Het is al een tijd niet meer makkelijk te zeggen welke soorten schermen mensen “het meeste” hebben. Flatscreens en de grote populariteit van goedkopere PC systemen (standaard met kleine schermen) hebben tot gevolg dat er nauwelijks “een meerderheid” is.Heel in het kort is het volgende te stellen: Als functionaliteit, gebruiksvriendelijkheid en inhoud van de site belangrijkste is, is fluid de betere optie. Als echter het ontwerp een dusdanig belangrijke factor is, kan het beste worden gekozen voor fixed.De volkskrant te klein
De volkskrant te groot

De volkskrant gebruikt een soort fixed width, wat ertoe leidt dat op sommige schermen veel ruimte ongebruikt is terwijl op andere schermen inhoud van het scherm afloopt.

Dit artikel verscheen op bler.webschuur.com. En is overgezet naar dit blog

in design14 css17 ontwerp1

Over de auteur: Bèr Kessels is een ervaren webdeveloper met een grote passie voor techniek en Open Source. Een gouden combinatie om de techniek goed en efficiënt toe te passen. Volg @berkes op Mastodon. Of lees meer over Bèr.