Tableless CSS website

Tabelloos ontwerp

Heeft u zich wel eens afgevraagd hoe uw website presteert in de zoekmachines?
Als uw website weinig bezoekers trekt dan is meestal een slechte positie in de zoekmachines hiervan de oorzaak. Maar waarom beoordeelt de zoekmachine uw website dan niet goed?
Naast tal van redenen, zoals verkeerde tekstbalans en te weinig inbound links (links die naar uw website wijzen), kan dit zeker ook komen door verouderd design.

Vroeger waren websites vaak saai. Tekst en opsommingen van gegevens op een eenkleurige achtergrond. Door het gebruik van tabellen met daarin cellen kon deze inhoud in lijn worden gehouden.
Bij gebrek aan betere middelen werden de tabellen en cellen ook steeds vaker gebruikt voor het design. Het gevolg was dat de broncode met de voor de zoekmachines belangrijke teksten steeds meer verstopt raakten met design codering. Met de ontwikkeling van Cascading Style Sheets ofwel CSS kwam hieraan een einde. Door het design en de layout met CSS te regelen kan de bijbehorende codering buiten de paginacodering worden gebracht. Dit zorgt voor een efficientere codering van de pagina met de HTML en teksten.

Kijkt u eens naar de broncode van uw website.
Nooit gedaan? Klik dan in uw browser met uw rechter muistoets in de website en kies 'view source' of 'paginabron bekijken' naar gelang de browser en de taal.
Wat u nu ziet is de html-codering die is gemaakt voor het vertonen van de webpagina door uw browser. U kunt nu met een beetje zoekwerk concluderen of u een website heeft van de oude of de nieuwe generatie.

Oude HTML techniek met of zonder CSS:

U ziet tags als <tr> en <td>
De webpagina is opgebouwd door middel van tabellen en cellen. Deze worden door de browser gezien als entiteit en daarom per cel op volgorde gevuld. Dit veroorzaakt vertraging in de pagina-opbouwsnelheid in de browser.

U ziet tags als <frameset> of <frame>
Het betreft hier een frameset. M.a.w. de pagina die u ziet is eigenlijk opgebouwd uit meerdere pagina´s. Deze techniek is omwille van interne linking, tekstplaatsing en extra niveau's, niet aan te raden.

Tableless CSS pagina´s van de nieuwe generatie

Indien in de broncodering de <tr> en <td> tags ontbreken, maar wel tags staan als <p id> en <p class> dan betreft het hier waarschijnlijk een tabelloze webpagina. De codering heeft alleen betrekking op de semantiek. Het design en de layout van de pagina wordt daarentegen in een extern CSS bestand geregeld.

De scheiding van semantiek en design heeft veel voordelen, zeker ook in het kader van de website optimalisatie.

Is uw website van de oude generatie, vraag uw webmaster of designer dan naar de mogelijkheden van tableless CSS.

Publicatie: 19 December 2005 - rev.: 10-4-2009

Vragen over website- en applicatie ontwerp en ontwikkeling?

Partners van Dact BV: sEVen Software

Privacybeleid