Voordat je een lay-out praktisch implementeert, zijn er een paar essentiële zaken om te verduidelijken. Allereerst moet je beslissen over het type lay-out. In principe zijn er hier drie mogelijkheden.
• Vast
• Flexibel
• Elastisch
CSS maakt lay-outs mogelijk met vaste of flexibele afmetingen. Bij vaste lay-outs wordt doorgaans met pixels gewerkt. Flexibele lay-outs zijn daarentegen gebaseerd op procentuele waarden. Beide lay-outvarianten hebben zeker hun voor- en nadelen.
Vaste lay-outs worden meestal gebruikt wanneer afbeeldingen de lay-out bepalen. (Hoewel er hier ook uitzonderingen zijn door het gebruik van CSS-achtergrondafbeeldingen). Als het aankomt op een pixel-nauwkeurige positionering van elementen, wordt meestal ook gekozen voor vaste positionering. Bij dit type lay-out wordt meestal op zijn minst de breedte van de lay-out in een vast aantal pixels vastgelegd. Deze breedte richt zich meestal op specifieke schermresoluties.
Flexibele lay-outs zien er anders uit. Hier wordt geen vaste breedte opgegeven. De lay-out past zich hierbij aan de breedte van het browservenster aan.
Bij dergelijke lay-outs wordt de breedte bijvoorbeeld in procenten opgegeven. Als een gebruiker de grootte van het browservenster aanpast, past ook de grootte van de lay-out zich aan.
Door moderne CSS-eigenschappen bestaat er tegenwoordig nog een andere lay-outvariant, namelijk de zogenaamde responsieve lay-out. Hier past de lay-out zich aan, zodat deze er bijvoorbeeld op een smartphone volledig anders uitziet dan op een desktopcomputer. Hier op PSD-Tutorials.de is bijvoorbeeld met zo'n lay-out gewerkt. Als je de pagina op een desktop bekijkt met een "normale" browsergrootte, zie je het volgende beeld.
Als je het venster echter bij elkaar schuift, verandert daadwerkelijk de indeling van de elementen op de website.
De inspanning voor het maken van een responsieve lay-out is relatief hoog. Uiteindelijk moet de schermgrootte van de bezoeker worden bepaald en moet vervolgens een geschikte lay-out worden gepresenteerd. En deze geschikte lay-out moet daadwerkelijk worden ontwikkeld voor verschillende schermformaten. Een bezoeker die jouw website bekijkt op een groot scherm, krijgt bijvoorbeeld een lay-out met drie kolommen te zien. Als een andere bezoeker jouw website bekijkt op een smartphone, zal deze een enkelkoloms lay-out zien.
Voor- en nadelen van de varianten
Voordat je een lay-out implementeert, moet je overwegen welk van de genoemde lay-outvormen je wilt gebruiken. Ik wil je kort laten zien welke voor- en nadelen vaste lay-outs hebben.
• Ontwerp-sjablonen kunnen hier waarschijnlijk het gemakkelijkst worden geïmplementeerd.
• Als je je richt op standaardresoluties, zijn er nauwelijks problemen met de weergave van de website.
• De lay-outs zijn gemakkelijk te begrijpen en te communiceren. (Dit voordeel is natuurlijk handig wanneer je als webontwikkelaar een lay-out aan een klant wilt uitleggen).
Vaste lay-outs hebben echter ook nadelen.
• Vanwege de vaste afmetingen zijn ze inflexibel en passen ze zich bijvoorbeeld niet aan zeer kleine of grote schermen aan. Vaak wordt er veel ruimte verspild.
• Ze hebben beperkingen op het gebied van toegankelijkheid.
Ook flexibele lay-outs hebben sterke en zwakke punten. Laten we beginnen met de voordelen.
• De lay-outs passen zich automatisch aan de venstergrootte van de browser aan.
• Bezoekers kunnen dus aanzienlijke invloed hebben op de weergave van de website.
Maar er zijn ook nadelen.
• Als ontwikkelaar is het moeilijk om de resultaten te controleren. Lay-outvoorschriften kunnen dus slechts beperkt worden geïmplementeerd.
• De inhoud van de pagina moet uitgebreid worden aangepast.
• Bij grote schermen kan de weergave van korte tekst 'onaangenaam' zijn, omdat deze vaak maar op één regel staat. (CSS biedt echter geschikte eigenschappen zoals min-width hiervoor).
Nog een lay-outvorm vormt een tussenweg tussen vaste en flexibele lay-outs. Dit zijn de zogenaamde elastische lay-outs. Hun belangrijkste kenmerk is de maateenheid em. (Tegenwoordig wint ook steeds meer rem aan populariteit. In tegenstelling tot em, is rem gebaseerd op het root-element, niet zoals em op het bovenliggende element).
Bij deze lay-outs zijn de breedte en hoogte flexibel. Het ontwerp van de pagina schaalt evenredig met de grootte van het browservenster. Deze vorm van vormgeving is aan de ene kant zeker de meest complexe als het gaat om praktische implementatie. Dit ligt eenvoudigweg daaraan dat men van tevoren precies moet weten hoe de elementen zich gedragen bij een veranderend browservenster. Elastische lay-outs worden vooral gebruikt voor websites waar veel foto's en video's worden aangeboden.
De voordelen van elastische lay-outs:
• De beschikbare ruimte wordt optimaal benut.
• De inhoud wordt proportioneel altijd zo groot mogelijk weergegeven.
Maar natuurlijk hebben elastische lay-outs ook hun nadelen.
• Het ontwerpen van deze lay-outs is zeer complex.
• Ook de implementatie is allesbehalve eenvoudig.
De keuze
Je moet dus beslissen welke van de genoemde varianten je wilt gebruiken. Als je nog helemaal aan het begin staat van je HTML/CSS-ontwikkeling, raad ik je aan om in eerste instantie te werken met een vaste lay-out. Als je al gevorderde kennis hebt op het gebied van webontwikkeling, zou je echter direct moeten werken met responsieve lay-outs. Hiermee zit je goed, ongeacht met welk apparaat jouw website uiteindelijk wordt bekeken.
