Het basis ontwerp van een website
Waar u aan moet denken voordat u een website gaat (laat) ontwerpen.
-
Maak een goed plan over wat u wilt doen met uw
website.
bijvoorbeeld:
-
Bepaal wie uw doelgroep is.
-
Leer van uw concurrenten, bekijk kritisch hun
websites en leer van de goede dingen (hun succes) en vermijd de
verkeerde dingen, maak notities.
-
Maak uw website uniek in vergelijking met uw
concurrenten. Verzin iets anders dan uw concurrenten om uw doelgroep
aan te trekken. Onderscheidt uzelf van uw concurrentie.
-
Verzin een alles omvattend sleutelwoordrijke titel en een sleutelwoordrijke
omschrijving voor uw
website. Dit dient u per pagina twee keer te doen, één keer voor de
metatags en één keer voor de 'normale' webpagina (de pagina die uw
bezoekers zien). Lees meer over metatags.
-
Definieer een lijst van sleutelwoord combinaties
die relevant zijn voor uw onderneming of instelling. In dit geval de
onderwerpen of producten die voorkomen op uw website. Maak gebruik van 1- 2- en 3
woorden combinaties. U dient voor iedere aparte pagina een eigen
sleutelwoorden reeks te definiëren.
TIP:
gebruik de
gratis keyword tool van Google om ideeën op te doen voor
sleutelwoorden. Wanneer u deze tool gebruikt, selecteer dan eerst de
Nederlandse taal en Nederland als doel land.
-
Ontwerp een passend design voor uw website, maak
gebruik van vaste huisstijl uitgangspunten en wijk daar niet van af.
TIP: Bekijk deze
beroemde website met website templates eens en blader door de
honderden webontwerp ideeën.
Of gebruik onderstaande zoekfunctie om per categorie door website
templates te bladeren.
-
Gebruik H1, H2 en H3 tags in uw content.
-
Maak gebruik van opsommingen (dit is voor de
gebruiker helder te lezen)
-
Gebruik een stylesheet voor de opmaak van uw
content.
Zie gebruik van CSS
-
Gebruik geen frames (zie
terminologie)
-
gebruik sleutelwoorden in de pagina bestandsnamen.
Voorbeeld:
-
Gebruik Google om te kijken welke sites er komen
als u uw gedefinieerde sleutelwoorden gebruikt. Bestudeer de
websites die op de eerste drie pagina's voorkomen en probeer uw website
beter te maken.
let wel: deze sites zijn reeds geïndexeerd en hebben dus een
voorspong op uw (nog te ontwerpen) website. Maar als u wilt kunt u
deze websites qua positie verslaan.
-
Schrijf uw tekst op natuurlijke, informatieve en
relevante wijze en in makkelijk te begrijpen Nederlands (ken het
niveau van uw doelgroep). Integreer
uw gedefinieerde sleutelwoorden op natuurlijke wijze in uw content.
gebruik deze niet overvloedig, dit kan weer nadelig werken en
onnatuurlijk voor de gebruiker overkomen. Maak gebruik van
opsommingen en sub headers. Dit leest makkelijker.
-
Gebruik sleutelwoorden in uw interne en externe
links (dit noemen we anchor tekst, zie
terminologie.):
Voorbeeld: gebruik niet:
klik hier maar beter is:
Lees meer
over metatags
-
Ontwerp een Sitemap. Dit is de pagina waarin,
door u gekozen volgorde, een overzicht staat van alle pagina's,
subpagina's, onderwerpen en subonderwerpen inclusief een korte
beschrijving. Deze pagina bestaat alleen uit normale tekst (geen graphics dus).
-
Gebruik niet te veel graphics (plaatjes,
foto's). Zoek machine Robots kunnen niets doen met graphics. Gebruikt uw gematigd graphics, dan dient u altijd de Alt-Attribute (zie
terminologie) te gebruiken die een
korte beschrijving weergeeft van die graphic. Daarnaast wordt de
laadtijd van uw pagina aanzienlijk vertraagd wanneer er veel gebruik
wordt gemaakt van graphics.
-
Gebruik een gemakkelijk toegankelijke
en intuïtieve navigatiestructuur. Plaats deze links (of boven) de pagina, maar ook
onder de pagina (zie deze website). Zorg ervoor dat deze navigatie
op iedere pagina voorkomt, zodat de bezoeker niet kan
verdwalen, want dan raakt u uw bezoeker al snel kwijt. Gebruik geen
Javascript/applets voor navigatie, hoewel deze er soms 'leuk'
uitzien, kan een SE robot deze niet zien.
-
Gebruik geen zware flashanimaties. Deze zullen
het laden van uw pagina vertragen met als risico dat de uw bezoeker
uw site vroegtijdig verlaat. Ook flashanimaties kunnen moeilijk
herkend worden door SE robots.
-
Tenslotte:
Voordat u uw website aan de zoekmachines gaat aanbieden,
test uw
website dan nauwkeurig. Er mogen geen dode links in voorkomen, geen
spel- of grammatica fouten. Het beste is om uw website eerst door een
aantal anderen te laten testen.
Gebruik een eigen huisstijl (look & feel), bepaal lettertype,
lettergrootte, de indeling van een webpagina en de kleuren die u
wilt gebruiken. Maak geen gebruik van meer dan 3 kleuren. Zorg dat
de normale leesbare tekst altijd donker is op een lichte
achtergrond. Het beste is gewoon zwart/lichtzwart op wit. Uiteraard
mag u gebruik maken van kleuraccenten voor bijvoorbeeld headers of
andere vormen van accenten.
Maak van bovenstaande een aktielijst
Bijvoorbeeld (in grote lijnen):
-
Bepaal de look & feel van uw website, anders
gezegd, de huisstijl van uw website. Verwerk uw opmaak in een stylesheet, zoals:
-
H1, H2 en H3 stijlen
-
Het standaard lettertype
-
Alle mogelijke voorkomende lettergroottes en
kleuren
-
DIV stijlen zoals de hoofdgebieden van
onze website (header, navigatieblok, contentblok, footer). Zie ook
gebruik van CSS stylsheets
-
Schets uw webontwerp (de indeling van een
webpagina) en sla deze op (zonder tekst) als een soort standaard
pagina template. Maak gebruik van DIV-tags (zie
CSS hoofdstuk) om de diverse secties van
uw websitesite te bepalen.

Note: De gehele opmaak van deze website
is gedefinieerd in stylsesheets. U zult geen enkele table vinden
binnen onze website.
-
Bepaal het aantal pagina's (onderwerpen) wat onder
uw navigatie gaat vallen. zoals minimaal:
-
Home pagina
op de home pagina beschrijft u in een aantal headers en
sub headers waar uw site over
gaat, wat u heeft te bieden aan uw bezoeker, etc. Gebruik hier geen
lange zinnen, maar hou ze beknopt. Een bezoeker die eerst op uw home
pagina komt zal eerst uw site 'scannen'. Daarom is het belangrijk dat
een aantal trefzinnen of trefwoorden, die direct in relatie staan tot
het onderwerp van uw website, zeer opvallen op deze pagina staan.
-
Producten pagina
-
Informatie over uw bedrijf/instelling
-
Contact pagina
-
Sitemap
-
Schrijf de tekst van deze pagina's. Doe dat eerst
gewoon in Word (of iets vergelijkbaar) en vergeet niet de spelcontrole
aan te zetten.
Vervolgens kiest u enkele illustraties (plaatjes, foto's) om de
pagina's wat aantrekkelijker te maken. Lees
ook schrijven van webcontent
-
Test uw website
-
Biedt uw website aan bij zoekmachines,
directories, startpagina aanbieders en marktplaatsen.
Handige tip: gebruik een INCLUDE of IFRAME
(niet te verwarren met een gewone 'frame') voor
herhalende webpagina onderdelen, zoals een navigatieblok (menu) en de
footer die u in deze website herhalend ziet.
In ons voorbeeld (maar ook in deze website) maken
we gebruik van een (verticale) navigatie linksboven elke pagina en een
horizontale navigatie op de bodem van elke pagina.
Op de homepage heb ik daarvoor eenmalig 'echte'
tekst met links gebruikt (dit voor SE's om mijn interne links te
kunnen vinden), op alle overige pagina's maak ik echter gebruik van
een zogenaamde bot="Include". Deze include wordt specifiek voor
FrontPage gebruikt, maar gelukkig wordt deze door alle web browsers
ondersteund.
Via deze INCLUDE roep ik dus een andere HTML pagina
-binnen een bestaande HTML pagina- op
Het grote voordeel is dat wanneer ik een
navigatieoptie toevoeg of aanpas, dan hoef ik dit maar éénmaal te doen
en wel in het IFRAME document. Stel u heeft reeds 20 of 30 webpagina's
en besluit een navigatieoptie (nieuw hoofdstuk) toe te voegen, dan
heeft u aardig wat werk te doen om dit in iedere webpagina aan te
passen. Met gebruik van een IFRAME hoeft u dit slechts één keer te
doen. Tevens scheelt het wederom code (ruimte) op de webpagina.
Er zijn meerder Include oplossingen zoals de
server side includes of de
ASP include
of de
PHP include.