» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #38

De nieuwe jas - Over het redesignen van je website

Als ik over het internet surf kom ik regelmatig een kreet van opluchting en trots tegen als iemand zijn site in een nieuw jasje gestoken heeft. Waar komt dat toch vandaan? Waarom is het (schijnbaar) zo’n hels karwei om een site te redesignen?

Iedereen die ooit een bestaande site een nieuwe lay-out heeft gegeven kent het gevoel van onmacht: hoe moet ik hier nu iets van maken? Het zal een geruststelling zijn dat dit gevoel blijft, hoe goed je het ook eerder aangepakt hebt. Je hebt namelijk een eerdere versie gemaakt met de kennis en mogelijkheden van dat moment. Internet is een zeer veranderlijk medium. Ieder jaar leren browsers nieuwe trucjes, ieder jaar leer je zelf nieuwe trucjes. Ieder jaar word je beter en beter. En dus moet je steeds opnieuw weer nadenken hoe nu weer te werk te gaan.

Tabellen: Hopeloos of toch niet?

Bij het merendeel van de sites op het internet is de content in een tabel geplakt. Dat maakt een redesign een stuk moeilijker, een tabel is namelijk zo flexibel als een loden deur. Je kunt er helemaal niets mee. Of toch wel?

Stel, je hebt je site met behulp van tabellen opgemaakt en je hebt niet of nauwelijks gebruik gemaakt van stylesheets. Alle opmaak heb je dus hard gecodeerd in de HTML van de pagina en de tabel. De enige manier om je site aan te passen is dan gebruik van de ‘zoek & vervang’ optie in bijvoorbeeld een HTML-editor als Dreamweaver. De wijzigingen die je op deze manier kunt doorvoeren zijn over het algemeen minimaal. Meestal zul je in zo’n situatie ervoor keizen om een hele nieuwe site te bouwen, met alle gevolgen van dien.

Het wordt al iets gemakkelijker als je de opmaak van de tabel in een stylesheet gezet hebt. Je kunt nu sneller iets aanpassen. Denk hierbij aan lettertype, achtergrondkleur, achtergrondafbeelding, breedte van de tabel enzovoort. Maar je blijft beperkt in je mogelijkheden. Het is bijna bijna onmogelijk om de plaats van een item te veranderen.

Als je dan toch gebruik wilt maken van tabellen, dan kun je beter een template aanmaken in Dreamweaver. Een template is een soort mal waarin je alle opmaak zet. Die beveilig je, waarna je één of twee zones aangeeft waar de content van de site in kan komen te staan. Als je wijzigingen aanbrengt in deze template, dan zal DreamWeaver je vragen of deze veranderingen over de hele site doorgevoerd moeten worden. Maar dit gebeurt natuurlijk alleen maar in de pagina's die je gebaseerd hebt op deze template. Dreamweaver houdt dat bij.

Indien je maar één onderdeel van je pagina regelmatig moet wijzigen (zoals het navigatie menu), dan kun je het beste een Library Item maken in Dreamweaver. Dit werkt ongeveer hetzelfde als een Template, maar in plaats van de hele pagina wordt hierbij slechts één bepaald onderdeel van de pagina aangepast.

Het valt mij op hoe weinig gebruik gemaakt wordt van Templates en Library Items in hedendaags webdesign. Terwijl het een erg sterke tool is. Onbekend maakt wellicht onbemind? Met deze tutorial (pdf - 142kB) kun je snel aan de slag.

Cascading Style Sheets, seperate content from lay-out

Webgoeroes kwijlen bij het bovenstaande kopje. Toverwoorden! Pure magie! Alles kan! Nou nee, helaas niet alles, wel veel. Flexibiliteit is hierbij het toverwoord.

Als je een pagina opmaakt in een tabel, dan bepaal je eerst de plaats waar iets moet komen te staan. Daarna plak je de content op die plaats. Als je een pagina opmaakt met CSS, dan maak je je later pas druk waar alles komt te staan. Eerst zet je de gegevens in een zogenaamde ‘container’ (omgeven door div-tags). Vervolgens maak je een stylesheet aan waarin je bepaalt waar de container moet komen te staan en hoe die er uiteindelijk uit moet zien. Het gebruik van CSS voor de opmaak is niet nieuw. Het goed omgaan met CSS door browsers heeft echter een tijdje op zich laten wachten.

Als je nu ook nog een beetje logisch nadenkt en eenduidige namen kiest voor de verschillende div’s en classes (volgend jaar moet je ook weer weten wat je bedoelde), dan ben je klaar en heb je een pagina gebouwd waar je een hele tijd mee vooruit kunt.

Maar vergis je niet, een pagina opmaken met CSS is niet gemakkelijk. De verschillende browsers gaan nog steeds heel anders met stylesheets om. Helaas is er nog niet sprake van één algemeen geïmplementeerde standaard. Maar laten we wel wezen, dat hoeft ook helemaal niet. Een pagina hoeft helemaal niet hetzelfde in de verschillende browser uit te zien, als hij er maar goed uit ziet in de verschillende browsers. Een klein verschil dat heel veel uitmaakt.

Hoe ga je dan te werk?

Allereerst bepaal je in grote lijnen de vlakverdeling van de pagina, bijvoorbeeld onderstaand lijstje:

Voor elk van deze elementen maak je vervolgens div’s aan in een stylesheet. Gebruik zoveel mogelijk absolute cijfers om de positie binnen de pagina te bepalen, maar gebruik relatieve getallen om grootte te bepalen. Werk zoveel mogelijk met achtergrond afbeeldingen in plaats van ingevoegde afbeeldingen. Zet zo weinig mogelijk in de definitie van de div. Als je geen font-type hoeft te definiëren doe het dan nu nog niet.

Daarna volgt de opmaak van de content. Dit kun je het beste doen door het gebruik van classes. In een class definieer je dingen als lettertype, letterkleur, lettergrootte, marges, enzovoort. Denk ook hier er aan om classes een eenduidige en begrijpelijke naam te geven, je wilt je code straks nog wel begrijpen. Je hebt nu twee keuzes:

Gebruik bij voorkeur de laatste. Niet alle browsers gaan goed om met een span, het resultaat kan soms onvoorspelbaar zijn. Een class aan een p-tag hangen is iets meer werk, maar je behoudt dan wel de controle.

Het is verleidelijk om een HTML-tag opnieuw op te maken in een CSS. Doe dat niet. Stel dat je een input-tag voor een formulier in de CSS opmaakt, dan geldt deze opmaak voor alle inputs van alle pagina's. Veel beter is het om ook hier een class voor aan te maken en de class dan aan het input-veld te hangen. Je behoudt de controle op deze manier.

Het grootste voordeel van opmaak met CSS is dat je door een paar opmaakcodes te wijzigen in de stylesheet, je eenvoudig de hele site kunt wijzigen.

Een paar valkuilen:

Meer weten over het gebruik van CSS?

Er is op internet enorm veel te vinden over dit onderwerp. Hieronder een kleine selectie:

Samenvattend:

Redesignen is niet gemakkelijk, redesignen is niet altijd leuk. Je hebt te maken met keuzes die je in het verleden gemaakt hebt, die toen logisch waren, maar die je nu beperken. Probeer zoveel mogelijk vooruit te denken. Probeer zoveel mogelijk rekening te houden met een toekomstig redesign. Een opmaak met CSS heeft mijn voorkeur, maar het is niet gemakkelijk. De verschillen in CSS-interpretatie van de diverse browsers maken een nieuwe jas moeilijk en soms ondoorzichtig. Laat je niet ontmoedigen hierdoor, als je het eenmaal door hebt, dan biedt het je wel veel extra.

Auteur

Raoul Dovermann

is webdesigner en heeft zijn eigen bedrijf, elrado.nl. Daarnaast werkt hij aan diverse internetprojecten en is hij docent Dreamweaver aan het VCT in Tongeren.

Redesignen is zijn tweede natuur. Een design van zijn eigen weblog houdt het meestal niet langer dan 1 of 2 maanden uit.

Publicatiedatum: 19 februari 2003

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs