Laatste update: 09.12.2017 | Richtlijnen van Dirk Fuhlhage

Voor wie zijn deze richtlijnen?

In deze richtlijnen om een website maken vind je alles over het ontwerp en de bouw van jouw eigen homepage. De richtlijnen zijn geschikt voor beginners, maar ook voor gevorderden, die reeds een eigen homepage hebben en zeker willen zijn of ze hun site goed ingericht hebben. De tips die je hier leest, zijn bruikbaar zowel voor een site die al operationeel is als voor een nieuwe persoonlijke homepage.
Aan het einde van deze richtlijnen zal je de basis begrijpen om zelfstandig een goed gestructureerde homepage te creëren, zonder dat je daarvoor dikke boeken over programmeertalen dient te hebben gelezen.

  • Je hebt geen enkele ervaring nodig.

Als je snel, voordelig en zonder flessenhals (zoals bijvoorbeeld een agentschap) je eigen homepage wil creëren, dan is dit het juiste startpunt voor jou. Laat het realiseren van jouw homepage gerust aan ons over. De inhoud van deze richtlijnen zijn onderverdeeld in de volgende hoofdstukken, die je met een klik op de knop direct kan openen en lezen:

Inhoud

1) Basis en planning:

1.1) Het doel van je homepage definiëren

1.2) Structuur en opbouw

1.3) De inhoud opbouwen en verzamelen

2) Technische realisatie:

2.1) Welke homepage hulpmiddelen zijn voor jou het best geschikt?

2.2) Keuze van het domein

2.3) Inrichting van je homepage

Voor de snelste starters

Voor iedereen die haast heeft en niet de volledige richtlijnen wil doorlezen, hebben we aan het begin van elke rubriek een korte samenvatting van de inhoud gezet. Zo heb je snel een overzicht zonder dat je alles in detail hoeft te lezen. We raden niettemin aan om op een later tijdstip de volledige richtlijnen te lezen zodat je de nodige achtergrondkennis bezit over hoe een homepage gecreëerd wordt.

1) Basis en Planning

1.1) Het doel van je homepage definiëren

Voor de snelste starters: Leg vast wat je met je homepage wil bereiken en schrijf 1 tot 5 doelen op.

Waarom wil je een homepage creëren? Daarvoor kunnen er vele redenen zijn en voordat je aan het werk gaat, zou je toch even over de doelen moeten nadenken. Je kan de doelen onderverdelen in een hoofddoel dat je nog tamelijk vaag mag formuleren en enkele meer precieze onderdoelen. Het hoofddoel van een homepage kan over diverse onderdoelen verdeeld worden, die als leidraad voor het creëren van de homepage kunnen en moeten dienen. Het volgende voorbeeld zal dit duidelijker maken:

Hoofddoel: Dient jouw persoonlijke homepage om jouw huisdier voor te stellen of wil je als zelfstandige nieuwe klanten winnen voor jouw product? Andere hoofddoelen kunnen zijn: het creëren van een homepage om jouw vereniging voor te stellen, een online winkeltje om producten die jij maakt te verkopen, een reisblog, enz. Leg eerst en vooral het hoofddoel voor je homepage vast en leg tegelijkertijd vast wat voor soort van homepage het dient te worden. Verdeel het hoofddoel onder in zoveel onderdoelen je maar wil. Deze dien je bij het creëren steeds te checken om ervoor te zorgen dat alles voldoende aandacht krijgt en zijn doel bereikt.

Onderdoel: Laten we als voorbeeld de homepage van een firma nemen, omdat daarbij vaak een grote fout gemaakt wordt. Een firma wil zich op het internet natuurlijk van haar beste kant tonen en als het enigszins kan internetklanten winnen die naar bepaalde producten of diensten zoeken.

Maar wat moet de bezoeker van een internetsite doen? Alleen maar informatie lezen en dan snel alles weer vergeten? Natuurlijk niet! Het is de bedoeling dat de bezoeker van de homepage de firma contacteert. Het maakt niet uit of dat contact telefonisch plaatsvindt, per e-mail of door het invullen van een “aanvraag voor informatie” formulier. Maak het jouw bezoeker gemakkelijk en probeer hem te overtuigen met jou in contact te treden. Bouw bijvoorbeeld een button in: “Kom nu meer te weten over product XY”. Hieruit kan je alvast het eerste onderdoel van je website afleiden: de bezoeker moet contact met jou opnemen. In het volgende punt zullen we alle doelen in de structuur van de nieuwe homepage overzetten.

Doelgroep: Wie wil je met jouw homepage aanspreken? Ook dat is een belangrijke vraag. Wil je je richten aan jonge mensen, spreek ze dan aan met “je” of “jij”. Ben je niet zeker van je publiek, gebruik dan een beleefdheidsvorm “u”. Andere criteria voor het vastleggen van je doelgroep kunnen zijn: is je doelgroep visueel ingesteld (vb. designers of fotografen) of gaat het er bij jouw doelgroep vooral om gedetailleerde tekstuele informatie te vinden (vb. wetenschappers)? Het is belangrijk dat je weet wie jouw site in de toekomst zal lezen zodat je de juiste toon zal aanslaan en een goede opbouw van je site zal verkrijgen.

Tip: Bied je bezoekers op een deel van je site enkel een optie om te handelen aan, een zogenaamde “call to action”. Te veel opties maken je bezoeker onzeker en leiden ertoe dat hij bang wordt om een foute optie te kiezen. Dan zal hij liever helemaal niets kiezen en naar een andere site overstappen. Zo verdwijnt jouw potentiële klant naar de eeuwige jachtvelden van het internet en zal hij waarschijnlijk jouw concurrent contacteren.

1.2) Structuur en Opbouw

Voor de snelste starters: Leg aan de hand van de vastgelegde doelen de inhoud vast die op je homepage moet geïntegreerd worden. Zo zal je jouw doelen bereiken.

Voordat je met de opbouw van de structuur begint, neem een blad papier en een potlood om een eerste ruw ontwerp van de structuur te schetsen. Op bijna elke homepage zijn er bepaalde structuurkenmerken terug te vinden. Die mogen op jouw homepage niet ontbreken:

  • Startpagina: De startpagina is de inkompoort naar jouw homepage. Begroet hier je bezoeker en geef een bondige uitleg waarover jouw homepage handelt. Je zal de aandacht van de internetgebruiker meestal maar heel kort kunnen vasthouden, dus maak in een oogopslag duidelijk wat hij kan verwachten van je homepage. Spreek je gebruiker direct aan.
  • Navigatie: Om hun weg te vinden op je site verwachten de gebruikers een goede navigatie. Daarbij is het een kwestie van smaak of deze bovenaan je homepage komt, of aan de zijkant.
  • Colofon: In Nederland en België is het colofon niet wettelijk verplicht, maar het kan geen kwaad het toch te vermelden.

Aan de hand van de doelen die je in stap 1 hebt gedefinieerd, kunnen je nu stukje voor stukje de opbouw van je toekomstige homepage definiëren. Hoe die er kan uitzien, ontdek je in de volgende 3 voorbeelden, want deze zijn alle drie van het hoofddoel voor een homepage afgeleid:
„Professionele Presentatie van mijn firma in het internet“

Voorbeeld onderdoel 1: „Klanten moeten door middel van mijn homepage met mij in contact treden“

Pfeil nach unten

Structuurafleiding uit onderdoel 1: Zelfstandige contactpagina op de subpagina aanbieden met contactformulier en contactmogelijkheden (vb. contact button of telefoonnummer).

Voorbeeld onderdoel 2: „Aantrekkelijke presentatie van mijn producten“

Pfeil nach unten Structuurafleiding uit Onderdoel 2: Zelfstandige productpagina’s met productfoto’s en gedetailleerde informatie/specificaties, of zelfs de integratie van jouw eigen online winkeltje waar de producten gekocht kunnen worden.

Als er meerdere productgroepen zijn dan dienen deze op een zinvolle manier op een hoger niveau samengevat te worden. Daaronder komen dan de eigenlijke producten. Voorbeeld voor de structuur van dergelijke product-categorisering:

Schoenen -> Sneakers -> Sneakers 1, Sneakers 2, enz.

Schoenen -> Laarzen -> Laarzen 1, Laarzen 2, enz.

Voorbeeld Onderdoel 3: „Ik wil opvallen tegenover mijn concurrentie“

Pfeil nach untenStructuurafleiding uit onderdoel 3: Je homepage moet natuurlijk afgestemd zijn op de branche die je vertegenwoordigt, maar daarenboven moet ze op de een of andere wijze opvallen tegenover die van de concurrentie. Anders krijgt je klant het gevoel dat hij alles al eens gezien heeft. De beste manier om dit te doen is door je homepage persoonlijkheid te geven.

Het internet zelf is niet meer dan een anonieme kamer en vele homepages zijn zo onpersoonlijk dat je je afvraagt of er wel echte mensen achter zitten. Jouw eigen verhaal zal jouw homepage een hart en ziel geven. Vertel waarom je doet wat je doet. Wat is je passie? Maak gebruik van de pagina “Over ons”. Hier kan je alles over jezelf vertellen en er een leuke foto bij zetten, misschien zelfs een foto van jou terwijl je aan het werk bent. Zo wordt jouw homepage en jouw product of dienst realistischer voor de bezoeker. Het ijs is gebroken. De bezoeker zal je contacteren.

Tip: Ga gerust kijken hoe de concurrentie het doet. Blader door een homepage of 10 van jouw onmiddellijke concurrenten en rangschik deze. Zet de homepage die jou het beste bevalt bovenaan en rangschik de rest in afdalende volgorde tot je aan de site komt die jou het minst bevalt.
Wat vind je leuk aan de beste site? Kan je de elementen daarvan in jouw eigen site integreren? Wat vind je niet zo goed. Hoe kan je de slechtste onderdelen verbeteren, of kan je ze eventueel weg laten?

1.3) De inhoud opbouwen en verzamelen

Voor de snelste starters: Leg een uitgebreide verzameling aan van de inhoud die je voor jouw homepage nodig hebt: tekst, foto’s, logo, video’s, enz.

De meeste mensen denken bij de inhoud voor hun eigen homepage uitsluitend aan tekstinhoud. Vanzelfsprekend zijn teksten en ook de tekstopbouw belangrijke bestanddelen bij het creëren van de homepage, maar het is zeker niet de enige inhoud. Ook visuele elementen zoals logo’s, foto’s, grafieken, design-elementen of video’s zijn zeer belangrijk. Dit soort inhoud wordt vaak zo lang verwaarloosd en niet in beschouwing genomen totdat men ze plotseling heel dringend nodig heeft. Om bij het voltooien van je site vertraging te vermijden kan je best zo vroeg mogelijk na het vastleggen van je site-opbouw deze inhoud opbouwen en bijeensprokkelen.

Tip: Geen zorg, je hoeft niet alles op je eentje te doen. Er zijn massa’s online-bronnen die je helpen om de nodige inhoud voor je homepage samen te stellen.

2) Technische Realisatie

2.1) Welke homepage hulpmiddelen zijn voor jou het best geschikt?

Voor de snelste starters: Kies een homepage hulpmiddel dat aan jouw vereisten voldoet en leg een gratis account aan om te testen hoe je met dit product overweg kan.

Nu je de planning en de basis van jouw homepage behandeld hebt, komt het erop aan de theorie in de praktijk om te zetten. Er zijn 1001 manieren om een homepage te creëren. Je kan alles vanaf het prille begin programmeren, maar je kan ook een zogenaamde Content Management Systeem gebruiken. Ook modulaire systemen zijn een mogelijkheid.

Omdat je deze richtlijnen aan het lezen bent, maak ik twee aannames: 1. Homepages creëren is voor jou allemaal nog nieuw en 2. Je wil jouw homepage creëren op een snelle, voordelige en eenvoudige manier.

Op basis van deze aannames biedt zich het modulaire systeem aan, want dit is het eenvoudigste systeem (geen programmeerkennis of dure agentschappen vereist). Het is ook het snelste (binnen het half uur kan de eerste versie van je nieuwe homepage online staan) en het voordeligste (alles wat je voor jouw homepage nodig hebt voor slechts een paar euro per maand.)

Alle onderdelen van een modulair homepage-systeem komen van dezelfde aanbieder. Deze zorgt voor het domein, de opslagruimte, een editor om je homepage te bewerken en vaak ook nog een passend e-mailadres. Meer bepaald bestaat een modulair homepage-systeem uit de volgende bestanddelen:

  • Klaar voor gebruik sjablonen (templates of thema’s): Bij alle aanbieders heb je de keuze uit een veelvoud van sjablonen die je naar believen kan aanpassen. Dit geldt ook voor de lay-out van je homepage, de inrichting en de grootte van de menu’s, de titels, enz.
  • Homepage-elementen: Hier merk je het duidelijkste dat alles uit modules bestaat, want hier zet je de diverse homepage-elementen zoals teksten, foto’s, formulieren, video’s en veel meer op hun juiste plaats met eenvoudig klikken en slepen (drag and drop). Deze elementen worden dan gevuld met hun specifieke inhoud (teksten, foto’s, enz.)
  • Editor: Het creëren van een homepage met behulp van een editor is niet moeilijker dan het typen van een document in MS-Word. Met een zogenaamde WYSIWYG-Editor („What you see is what you get“) kan je bijvoorbeeld tekstelementen invoeren en het uitzicht bepalen (vb. afmeting, opsomming, uitlijning).

Om je bij de keuze van de juiste hulpmiddelen op weg te helpen, hebben we voor jou de grootste aanbieders van modulaire systemen in Nederland en België uitvoerig getest. Daarbij kwamen we tot de volgende bevindingen:

1JimdoPro

-bestes Gesamtpaket unter den Homepage Baukästen
– einfache und schnelle erste Einrichtung
– intuitive Bedienung
– Preis: kostenlos-15 €/Monat
– automatisch optimiert für mobile Endgeräte
– integrierte Blogfunktion
– umfangreiche Shopfunktion

Kontra
– in unserem Test gab es lediglich kleine Punktabzüge, siehe Jimdo im Test

2Wix LogoVoordelen – goede templates afgestemd op de diverse branches
– flexibele editor en daardoor hoge aanpasbaarheid Nadelen – geen automatische mobiele uitvoering
– Achteraf het design aanpassen verloopt moeilijk
3WeeblyVoordelen
– eenvoudige opzet
– goede keuze van designs
– automatische optimalisatie voor mobiele eindapparaten

Nadelen
– zwakke interne analysemogelijkheden
– Prijs is een minpunt

4webnodeVoordelen
– Goed geschikt voor meertalige homepages- eenvoudige installatie
– meerdere projecten kunnen onder dezelfde account lopen
– Integratie van prijsvergelijkingssites
– geoptimaliseerd voor mobiele eindapparaten

Nadelen
– De aangeboden designs laten jammer genoeg een beetje te wensen over
– een wat verouderde Editor

Voor- en nadelen van homepage modulaire systemen in een oogopslag:

Voordelen van homepage modulaire systemen

  • Eenvoudig: Je krijgt het snel onder de knie.
  • Kosten: Voor €2 tot €30 per maand krijg je alles wat je nodig hebt om je homepage te creëren
  • One Stop oplossing: Alles komt van dezelfde aanbieder, dus heb je ook voor alles dezelfde aanspreekpartner
  • Ondersteuning: Als je vast komt te zitten, kan je rekenen op de ondersteuning van de aanbieder

Nadelen van homepage modulaire systemen

  • Flexibiliteit: Wees je bewust van de beperkingen van het product. Buitenissige sites met ingewikkelde functies laten zich niet noodzakelijk met een modulair systeem omzetten. Voor normale aanwezigheid op het net volstaat een modulair systeem echter ruimschoots.
  • Grote en internationale projecten: Bij grote projecten kan je best vooraf grondig informatie inwinnen over de basis. Test ze ook uitvoerig. Hetzelfde geldt voor meertalige websites. Test ook hier vooraf of de aanbieder van jouw keuze kan wat je nodig hebt.

2.2) Keuze van het domein

Voor de snelste starters: Houd de naam van het domein kort. Kies een naam die de klant kan typen zonder dat zijn vingers in de knoop geraken. Vanzelfsprekend kies je een domein dat nog beschikbaar is.

Als je jouw firma reeds gestart hebt, kan je heel eenvoudig de naam daarvan overnemen voor jouw homepage. De familie Verbrugge zal voor haar bloemenzaak bijvoorbeeld gaan voor www.bloemen-verbrugge.be. Door het signaalwoord “bloemen” herkennen zoekmachines al dadelijk de relevantie met het thema, zodat de positie bij Google en andere zoekmachines stijgt.

Kies voor het einde de passende extensie. Je hoeft je niet krampachtig vast te houden aan de extensie die met jouw land overeenkomt zoals .be of .nl of als jou het internationale .eu of .com beter bevalt. Een extensie die met goed inzicht gekozen is, wekt vertrouwen bij de bezoekers en kan ook een positief effect hebben op de positie van de zoekmachine. Als je een nieuwe zaak start of je kiest een naam, let dan op de volgende 3 punten:

  1. Kort: hoe korter je domeinnaam, hoe beter.
  2. Lees- en schrijfbaar: Is je domeinnaam begrijpelijk en gemakkelijk te typen?
  3. Internationaliseerbaar: Als je van plan bent om ooit jouw producten ook in het buitenland aan te bieden, kies dan een domeinnaam met internationaal bruikbare woorden.

Gratis domein: De aanbieders van modulaire systemen die we hier voorgesteld hebben, gebruiken voor hun gratis beginnersvarianten een zogenaamd subdomein. De firmanaam van de aanbieder komt dan achteraan het feitelijke domein (bv. www.uw-domein.aanbieder.com).

Als je een professionele homepage wil creëren, dan kies je best een echt domein zonder een extra aanbiedernaam. Dan moet je weliswaar betalen, maar het geeft een meer professionele indruk aan de bezoekers van je homepage. Ook heeft het weer invloed op de resultaten van de zoekmachines. Als je homepage enkel om te testen dient, of voor jouw hobby, dan is er niets op tegen een gratis domein te kiezen.

Tip: Doe een kleine brainstorm en schrijf 5 tot 10 verschillende voor jou passende domeinnamen op. Kijk na of ze beschikbaar zijn (voor België gaat dit via www.dnsbelgium.be en voor Nederland kan je bij www.sidn.nl nakijken).

2.3) Inrichting van de homepage

Voor de snelste starters: Voor dit gedeelte kunnen we jammer genoeg geen samenvatting aanbieden. Nu moet je even aan het werk 😉

Een homepage is in de eerste plaats een visueel medium. Een gebruiker die op een internetpagina terecht komt, beslist onbewust in een fractie van een seconde of hij zich daar goed voelt en of de site betrouwbaar lijkt. Deze eerste en belangrijke indruk wordt voornamelijk bepaald door kleuren, vormen en lay-out. Pas daarna zal de feitelijke inhoud van de site een potentiële klant beïnvloeden.

2.3.1) Basisinstellingen: kleur, vorm en lay-out

Bij de basisinrichting van je nieuwe homepage is het belangrijk om de site een gezicht te verlenen. Als je een commerciële homepage creëert waarvoor je reeds een logo en een specifiek kleurschema hebt ontwikkeld (bv. op visitekaartjes of briefpapier), kies dan deze kleuren voor jouw homepage. Zo herkent de klant je onmiddellijk en dit geeft een professionele indruk.
Als je niet aan specifieke kleuren gebonden bent, kies dan natuurtonen. Schreeuwerige kleuren vallen weliswaar op, maar zullen vaker een bezoeker afschrikken.

Layoutauswahl Jimdo

In de constructie-omgeving van de door jou gekozen homepage zal je een menu-item vinden dat lay-out heet, of iets gelijkaardigs. Hier kan je de visuele basisinstellingen kiezen evenals kleurenpalet, achtergrondkleur of -patroon, lettergrootte, -kleur en -type. Je kan je ook laten inspireren door internetsites die je leuk vindt. Probeer het gerust uit. Je kan de instellingen zo vaak je maar wil aanpassen, verbeteren of optimaliseren.

2.3.2) Wegwijzer: de navigatie

Navigation Jimdo
In het voorgaande punt „1.2) Structuur en opbouw“ heb je al nagedacht over de belangrijkste bestanddelen die jouw homepage dient te bevatten. Nu dien je deze in een gebruiksvriendelijke navigatie te gieten om snel de onderliggende pagina’s te openen.
De navigatie gaat van je startpagina uit; dit is de eerste pagina in jouw navigatie. In het niveau daaronder volgen dan de belangrijkste menupunten, die ook de opbouw van je homepage weerspiegelen. Bijvoorbeeld: „Onze producten“, „Over ons“, „Contact“, en zo verder. Leg de pagina’s op de diverse niveaus aan en schets kort welke inhoud op deze pagina’s dient te verschijnen. Zo ontwikkel je jouw homepage stap voor stap totdat jouw aanwezigheid op het internet compleet is.
Houd de structuur eenvoudig en vergeet vooreerst meerdere niveaus. Denk eraan dat een bezoeker van je homepage niet meer dan 3 klikken zou mogen doen om van de startpagina naar de gewenste inhoud aan te komen..

2.3.3) Waar het om draait op je homepage: inhoud

Het voorbereidende werk voor dit onderdeel heb je reeds gedaan in punt „1.3 De inhoud opbouwen en verzamelen“. Geen zorg, die ganse inhoud hoeft er niet direct in definitieve vorm te staan. Het is alleen belangrijk dat je weet WELKE inhoud je wil tonen. Door het invoegen van elementen op een pagina kan je vastleggen hoe en op welke locatie van je homepage iets dient getoond te worden.

Beelden helpen als ondersteuning van teksten, net zoals in een krantenartikel. Je kan beelden nemen die je zelf gemaakt hebt, of je kan ze kopen bij aanbieders van stockfoto’s. Hier kan je ook licenties verkrijgen om zulke beelden te gebruiken. Pas op als je met Google naar beeldmateriaal en passende patronen zoekt en iets van een andere website kopieert. Je wil je niet aan het eigendomsrecht raken van een licentiehouder van dergelijke beelden. Het zou tot een vermaning kunnen leiden, of zelfs erger.

2.3.4) Wees in orde met de wet: Colofon

Vergeet niet om een colofon op je homepage te zetten. Stel dit document op zodra je homepage openbaar toegankelijk is, want in België en Nederland is een colofon weliswaar niet verplicht maar het kan geen kwaad dat een bezoeker van je website weet wie verantwoordelijk is voor de inhoud en de contactmogelijkheden

Tip: Bij het creëren van een homepage geldt: Minder is meer! Het is verleidelijk om een massa elementen in te bouwen, nog een knipperende pijl hier en een soundclip daar. Maar zoiets wordt voor de bezoeker al snel onoverzichtelijk en zijn aandacht zal snel verslappen. Zorg er gewoon voor dat de essentiële bestanddelen van je homepage er zijn en dat ze eenvoudig voorgesteld worden.

Nawoord: Met deze informatie ben je in staat om je eigen homepage te creëren. Er is geen limiet op de grootte van je site, en deze richtlijnen dienen enkel als startpunt, om een eerste overzicht te krijgen van het onderwerp.
Als er nog een essentieel element ontbreekt, aarzel dan niet en schrijf me een berichtje via het contactformulier onderaan deze pagina. Als de richtlijnen je goed geholpen hebben dan zou ik het leuk vinden dat je deze verder aan anderen aanbeveelt. Alvast bedankt en veel succes met het creëren van je eigen homepage!

Foto bron: © contrastwerkstatt – Fotolia.com, Jimdo