Website layout: Frames, tabellen of CSS?

Een van de belangrijke dingen bij het maken van uw website is een goede layout. De layout moet de bezoekers aanspreken, maar moet ook goed te onderhouden zijn. Er zijn in de loop der tijd verschillende methodes ontwikkeld voor het opzetten van een goede layout: frames, tabellen of Cascading Style Sheets (CSS). Deze zijn ook allemaal nog steeds toepasbaar. In dit artikel worden de verschillende technieken kort toegelicht met hun belangrijkste voor- en nadelen.

Website layout

Wat de beste layout is voor uw website is vooral afhankelijk van het doel achter de website. Toch zijn er wel een aantal regels te vinden die voor bijna alle websites gelden. Zo is het vaak handig als alle pagina's binnen een website dezelfde 'look en feel' hebben. Dit betekent niet dat de layout exact hetzelfde moeten zijn, maar bepaalde elementen moeten er toch wel hetzelfde uitzien. Bijvoorbeeld de gebruikte lettertypes, de kleuren schema's, achtergronden. Op deze manier is het voor de bezoeker duidelijk dat hij zich nog steeds op dezelfde site bevindt. Daarnaast zijn er ook vaak elementen van de layout die op iedere pagina van de website terugkomen. Zoals de titel balk, menustructuren, navigatie balken etc. Ook dit draagt bij aan een goede herkenbaarheid van uw webpagina's. Bij het opzetten van de website is het belangrijk om hier al goed over na te denken. Vervolgens is het zaak om de website te bouwen zodat de pagina's allemaal gebouwd worden volgens dezelfde opmaak regels, en dat ook de verschillende elementen van uw pagina goed gepositioneerd zijn ten opzichte van elkaar. Om dit makkelijk voor elkaar te krijgen zijn er verschillende technieken voorhanden die te gebruiken zijn tijdens het opzetten van de layout voor uw website. Hieronder worden deze allen toegelicht. Het gaat hier puur om de technieken op zich. In dit artikel wordt geen verdere toelichting gegeven over het maken van een goed ontwerp van een website.

Frames

Dit is de oudste techniek voor de opmaak van een site. Als er een Nederlandse vertaling voor 'Frame' gegeven zou moeten worden, zou deelpagina het meest in de buurt komen. Daar is deze techniek, die onderdeel uitmaakt van de HTML standaard, dan ook op gebaseerd.

De hele website bestaat eigenlijk maar uit 1 pagina, die wordt onderverdeeld in een aantal deelpagina's, elk met hun eigen adres (URL) en inhoud.Hierbij is het mogelijk om een link vanuit 1 frame te openen in een ander frame. Dit maakt het makkelijk om als de pagina onderverdeeld is in verscheidene frames, een aantal frames (bijvoorbeeld een titel blok, of de menustructuur) hetzelfde te houden en de inhoud in een andere frame te veranderen. Dit leidt tot het grootste voordeel van het gebruik van frames: door deze modulaire opbouw hoeft bijvoorbeeld het menu maar 1 keer in een frame gezet te worden en bij keuzes uit het menu wordt een ander frame bijgewerkt. Dit leidt ertoe dat aanpassingen aan de menustructuur van de site, maar eenmaal in het menu-frame aangebracht hoeven te worden, en niet dat het menu op alle pagina's aangepast moet worden. Frames zijn dus vriendelijk voor het onderhoud van een site.

Toch zitten er ook een aantal grote nadelen aan het gebruik van frames. Ten eerste is er de ontoegankelijkheid van sites met frames voor zoekmachines. Dit uit zich in 2 problemen. Ten eerste kunnen zoekmachines vaak niet alle HTML files vinden die in de verschillende frames getoond kunnen worden. Hierdoor zal de site vaak lagen in de zoekmachine resultaten terecht komen dan wenselijk is. Daarnaast zal het vaak gebeuren dat als de pagina al in de zoekresultaten terecht komt, er een link in staat niet naar de hoofdsite, maar naar 1 van de frames. Dan zal bij het volgen van de link vanuit de zoekmachine alleen dat ene frame als pagina worden getoond. Dan zou het zo maar kunnen zijn dat de bezoeker alleen die pagina ziet, en alle bijbehorende functionaliteit, zoals het menu, mist. Een ander nadeel is ook dat het gebruik van frames niet goed samenwerkt met het bewaren van favorieten. Alleen de hoofdpagina kan namelijk als favoriet worden opgeslagen. Dit kan ertoe leiden dat als een bezoeker uiteindelijk op je site de informatie heeft gelokaliseerd op een van de frames, deze niet rechtstreeks als link kan worden opgeslagen. Het is alleen mogelijk om de link naar de hoofdpagina op te slaan en dan weer opnieuw naar het juiste frame te navigeren. Het behoeft waarschijnlijk geen toelichting dat dit niet echt gebruikers vriendelijk is.

Deze nadelen worden vaak als zodanig groot ervaren dat deze methode enigszins uit de mode is geraakt. Toch zou het voor het bijhouden van bijvoorbeeld een verenigingssite, waar je informatie deelt met een beperkte groep mensen die toch meestal direct naar de site toe gaan, in plaats van via een zoekmachine te moeten zoeken, wel een goede oplossing kunnen zijn. Het is in ieder geval redelijk makkelijk in het onderhoud.

Tabellen

Het gebruik van tabellen is een andere veelgebruikte manier om pagina's in te delen. Doordat de lijnen tussen de verschillende cellen onderdrukt kunnen worden, maar wel de achtergrond kleur en inhoud per cel bepaald kan worden, is het mogelijk om met tabellen de pagina's onder te verdelen in een aantal verschillende kolommen en blokken, met elk hun eigen opmaak. En dit zonder dat het direct zichtbaar is, dat er een tabel onder zit.
Dit is een eenvoudige techniek die al snel leidt tot een goede layout. En het is al snel toe te passen, zonder een diepgaande kennis van HTML. Het kan zelfs ook goed worden toegepast met een gewone WYSIWYG (What You See Is What You Get) editor. In tegenstelling tot frames wordt hierbij wel iedere pagina van de website helemaal op nieuw opgebouwd. Dit leidt ook meteen tot een van de nadelen van deze methode: ook constante elementen zoals titel en menu moeten op iedere pagina apart onderhouden worden. Zolang ze gelijk blijven is dat geen probleem, maar als je ze een keer wil wijzigen moet dat apart op iedere pagina van de website gebeuren. Dit is nogal wat werk als je website uit veel pagina's bestaat.

Een andere reden waarom deze methode toch enigszins uit zwang raakt is dat het heel veel HTML code kost om deze tabellen van de juiste opmaak te voorzien. Dit maakt het lastig te onderhouden naderhand, maar ook betekent het dat relatief veel tijd kost voor een browser om de webpagina op te bouwen en te tonen. En het lijkt erop alsof het voor zoekmachines steeds belangrijker wordt hoe snel een site laadt, bij de ranking in de zoekresultaten. Vandaar dat de populariteit van deze methode afneemt, en dat er veel mensen aangeven dat tabellen alleen gebruikt zouden moeten worden waar ze voor bedoeld zijn: het weergeven van tabulaire data.

Cascading Style Sheets (CSS)

Cascading Style Sheets of kortweg CSS is de laatste een meest aanbevolen methode voor het vormgeven van uw website. Het is iets lastiger uit te leggen hoe het werkt, maar ik zal het toch proberen. In principe verdeelt u uw webpagina in een aantal vormgevingselementen, allemaal met een eigen 'naam'. In de zogenaamde 'Style sheet' kunt u dan per element aangeven hoe deze eruit moet zien: kleur, lettertype, plaats op de pagina, achtergrond, etc. Dit kan dan vervolgens ook in een apart bestand opgeslagen worden. Dit bestand kan dan ook aan al uw andere pagina's gekoppeld worden, waardoor daar makkelijk dezelfde elementen met dezelfde vormgeving gebruikt kunnen worden. In principe worden op deze manier vormgeving en inhoud van uw site gescheiden. Dit maakt het onderhoud erg makkelijk.

Belangrijk aspect is nog de overerving tussen de elementen die bij deze methode een rol speelt (vandaar ook 'Cascading'). Dit betekent dat als een element binnen een ander element geplaats wordt in principe een aantal eigenschappen van het omringende element worden overgenomen. Tenzij uitdrukkelijk andere waardes aan deze eigenschappen voor het element zijn toegekend.

Wellicht dat het bijgevoegde plaatje het een en ander extra verduidelijkt: de zogenaamde 'Div's' zijn de elementen die de vormgeving van uw site bepalen. Om het allemaal in detail uit te leggen voert een beetje ver voor dit artikel, maar er is genoeg over het werken met CSS te vinden op internet (Bijvoorbeeld: Wikipedia).

CSS is een standaard die is opgezet door de World Wide Web Consortium (W3C) met als doel het standaardiseren van de vormgeving van websites: alle webbrowsers zouden pagina's die volgens deze standaard zijn opgezet op dezelfde manier moeten weergeven. Helaas is dat doel nog niet bereikt, want er zitten nog al wat verschillen in de manieren waarop de verschillende browsers de style sheets interpreteren. Dus dat probleem blijft bestaan.

Deze methode is zeer zoekmachine vriendelijk (net omdat de inhoud duidelijk van de vormgeving is gescheiden) en zorgt ook voor een snel opbouwende website. Ook is het redelijk onderhoudsvriendelijk omdat u dezelfde style sheets aan al uw webpagina's kunt koppelen, zodat u de vormgeving in 1 klap heeft geregeld. Alleen de inhoud moet dan voor iedere pagina apart worden opgezet (ook de repeterende inhoud helaas, dus het is wel iets meer werk dan met frames).

Wat wel als nadeel zou kunnen gelden (vooral voor de beginnende website bouwer), is dat er wel iets meer kennis van HTML en ook CSS nodig is om het goed toe te kunnen passen. Maar mijn eigen ervaring is dat deze kennis heel snel op te bouwen is, en dat er op internet heel veel goede voorbeelden en templates te vinden zijn om u op weg te helpen.

Overzicht

Om af te sluiten nog even een kort overzicht waar de voor- en nadelen van de verschillende opties naast elkaar op een rijtje worden gezet.

Zoals uit de tabel al blijkt zit er uiteindelijk niet zoveel verschil tussen de 3 technieken, als aan alle criteria hetzelfde gewicht zou worden toegekend. Ze hebben allemaal hun eigen sterke en zwakke punten. Maar toch wordt over het algemeen erg veel gewicht toegekend aan de onderhoudbaarheid en de geschiktheid voor zoekmachines. Vandaar dat CSS over het algemeen toch het beste alternatief blijkt. Vooral omdat de zwakkere punten ook opgevangen kunnen worden:

• Onderhoudbaarheid wordt beter door het te combineren met PHP scripts
• Het nadeel van de benodigde kennis verdwijnt vanzelf door er gewoon mee aan de slag te gaan en vooral ook door gebruik te maken van vaak kant en klare oplossingen die al op internet verkrijgbaar zijn.

Maar afhankelijk van het met de site beoogde doel, en je eigen voorkeur, zouden de beide andere technieken nog steeds een goed alternatief kunnen vormen.