SEO Webontwerp.nl; uw gids voor correct web designHet basisontwerp van een website

 

 



 

Het basis ontwerp van een website

 

Waar u aan moet denken voordat u een website gaat (laat) ontwerpen.

  • webontwerpMaak een goed plan over wat u wilt doen met uw website.

    bijvoorbeeld:

    • verkoopt u een product of dienst

    • publiceert u informatie

    • Is het een presentatie van uw onderneming of instelling

    • ...

  • 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:

    • Deze pagina gaat over website ontwerp, de pagina heet dus ook websiteontwerp.htm  (is opgeslagen als) maar website-ontwerp.htm  kan ook.

  • 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):

  1. Bepaal de look & feel van uw website, anders gezegd, de huisstijl van uw website. Verwerk uw opmaak in een stylesheet, zoals:

    1. H1, H2 en H3 stijlen

    2. Het standaard lettertype

    3. Alle mogelijke voorkomende lettergroottes en kleuren

    4. DIV stijlen zoals de hoofdgebieden van onze website (header, navigatieblok, contentblok, footer). Zie ook gebruik van CSS stylsheets
       

  2. 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.

    voorbeeld: website ontwerp
    Note: De gehele opmaak van deze website is gedefinieerd in stylsesheets. U zult geen enkele table vinden binnen onze website.
     

  3. 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

  4. 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

  5. Test uw website

  6. 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.

 

 

 

 

Home | Wij zijn wij | Web design advies | SEO Advies | Tips en Publicaties | Gratis SEO tools | Gratis downloads | Video tutorials | Web Terminologie | Web disciplines
Portfolio  |  Contact | Sitemap  |  Privacy Policy  |   © Copyright www.seowebontwerp.nl 2009NL