In deze blogpost behandelen we alle aspecten die komen kijken bij het realiseren van een website; van het begin tot het eindproduct.

Inhoudsopgave

Ontwerpen

Voordat er een begin gemaakt kan worden aan het bouwen van de website moeten er eerst een aantal verschillende ontwerpen gemaakt worden. Deze zijn als volgt:

  • Functioneel ontwerp
  • Grafisch ontwerp
  • Technisch ontwerp

Met behulp van deze ontwerpen kan de applicatie worden gebouwd zoals de klant dat wilt. 

Functioneel ontwerp

Het functioneel ontwerp is één van de eerste fases in een ontwikkeltraject. Tijdens het opstellen van het functioneel ontwerp wordt besproken welke functionaliteiten de website dient te bevatten. Het functioneel ontwerp wordt  als een blauwdruk gebruikt tijdens het opstellen van een grafisch ontwerp. Ook tijdens het ontwikkelen van de website is het functioneel ontwerp een belangrijk referentiepunt voor zowel de opdrachtgever als de ontwikkelaars.

Grafisch ontwerp

Het grafisch ontwerp van de website bepaalt de uiteindelijke look-and-feel. Het is hierbij belangrijk dat de vormgeving van de website aansluit op de huisstijl van de opdrachtgever. Door het inzetten van juiste contrasterende kleuren kunnen bepaalde elementen meer of minder aandacht krijgen. Door het functioneel ontwerp te gebruiken kunnen de functionaliteiten grafisch worden ontworpen. 

Technisch ontwerp

Het technisch ontwerp beschrijft hoe de website werkt en welke techniek er wordt gebruikt. In een technisch ontwerp worden de volgende onderdelen beschreven:

Architectuur van de applicatie
Met welke software wordt de website gebouwd en wat zijn de vereisten van de server waar de website op moet gaan draaien.

Database modellen
De database modellen beschrijven welke data en op welke manier de data wordt opgeslagen. Ook worden hier de relaties beschreven die de verschillende tabellen (mogelijk) met elkaar hebben.

Externe koppelingen
Zijn er externe koppelingen? Denk hier aan aan een Customer Relationship Management systeem (CRM) of een koppeling met een ander systeem met behulp van een Application Programming Interface (API). 

Na het opstellen van deze ontwerpen kan er worden gestart met het bouwen van de applicatie.

The technology you use impresses no one. The experience you create with it is everything.

Sean Gerety

Applicatie

Als alle ontwerpen goedgekeurd zijn, kan er begonnen worden met het bouwen van de applicatie. Er zijn verschillende aspecten die naar voren komen tijdens het bouwen van een website:

  • het Content Management Systeem (CMS),
  • de front-end en; 
  • eventuele API's of koppelingen met API's van derden. 

CMS

Een Content Management Systeem is een systeem welke het mogelijk maakt dat mensen de inhoud van de website kunnen beheren. Deze inhoud kan onder andere bestaan uit pagina's, teksten, afbeeldingen, video’s, kaarten, blogberichten etc. Zelf gebruiken we OctoberCMS of Statamic als CMS. Deze systemen zijn zeer uitbreidbaar en gebruiksvriendelijk. Zo kunnen we door middel van plug-ins nieuwe functionaliteiten toevoegen. 

Front-end

Uiteraard moet er niet alleen content opgevoerd kunnen worden. De content moet ook getoond worden aan bezoekers van de website. De front-end is de koppeling tussen het design en de programmatuur. Het design wordt dus omgezet naar een daadwerkelijke website. Hierbij is het belangrijk dat er rekening wordt gehouden met alle functionaliteiten die beschreven staan in het functioneel ontwerp. 

API

Een API (Application Programming Interface) zorgt er voor dat programma's, systemen of websites met elkaar kunnen communiceren. 

Eigen API

Het kan mogelijk zijn dat er een eigen API gebouwd moet worden wanneer externe systemen data met de website dienen uit te wisselen. Een goed voorbeeld hiervan is wanneer er ook een mobiele applicatie ontwikkeld dient te worden, die ook data uit de website moet halen. 

API's van derden

Soms is het gewenst om bepaalde data uit een extern systeem te halen, bijvoorbeeld boekingen uit een reserveringssysteem of de laatste afbeeldingen (posts) van Instagram. In dat geval moet er een programma of een stuk code worden geschreven wat kan communiceren met het systeem van de andere partij. 

Let's go invent tomorrow instead of worrying about what happened yesterday

Steve Jobs

Hosting

Het woord 'hosting' is afgeleid van het Engelse 'host', wat 'gastheer' betekent. Hosting is het huisvesten van een website. Een goede host is van groot belang aangezien het op een aantal verschillende manieren impact heeft op jouw website. 

Snelheid
De snelheid van de host bepaalt onder andere hoe snel je website geladen kan worden. Hoe langzamer de host, hoe langzamer je website laadt. 

Uptime
De uptime van de host bepaalt een zekere garantie van hoe lang je website beschikbaar is. Zelfs met 99% uptime (wat best goed lijkt) kan je website nog steeds 3,5 dagen per jaar niet beschikbaar zijn.

Opslag
Ook is het belangrijk dat je genoeg opslag beschikbaar krijgt. Je wilt immers zonder zorgen e-mails kunnen ontvangen, afbeeldingen plaatsen op je website en content plaatsen.

Het is dus van belang dat je een goede plek hebt waar je je website kan hosten.

Domeinnaam

Een domeinnaam is een unieke naam op het internet. Pluut.nl en  Google.com zijn voorbeelden van domeinnamen. Domeinnamen verwijzen door naar de IP adressen van de webserver. Over het algemeen is het makkelijker om Pluut.nl te onthouden dan om 37.97.167.167 te onthouden. 

Er zijn twee soorten top level domains: "Country code top level domain" en "generic top level domain".

Country code top level domain
De country code top level domains (ccTLD) verwijzen naar landen. Zo verwijst ".nl" bijvoorbeeld naar Nederland, ".de" naar Duitsland en ".dk" naar Denemarken. In deze afbeelding is te zien welke ccTLD bij welk land hoort.

Generic top level domain (gTLD)
De generic top level domains verwijzen niet naar een bepaald land. Bekende voorbeelden zijn ".com", ".org" en ".net". Ook zijn er tegenwoordig specifiekere gTLD's zoals bijvoorbeeld ".blog", ".photography" en ".pizza"

Een overzicht van alle TLD’s, zowel de country code en generieke, vind je op de website van IANA. 

E-mail

De wereld om ons heen wordt steeds mobieler en e-mail is en blijft daarbij belangrijk. Door gebruik te maken van e-mail via je eigen domein (bijvoorbeeld info@domeinnaam.nl) is het makkelijk voor klanten om contact op te nemen. Tevens schept een e-mailadres op de eigen domeinnaam meer vertrouwen dan een bedrijfsmatig account via bijvoorbeedl @gmail.com of hotmail.com.

Wil jij ook e-mailen met je eigen domeinnaam?

Wij helpen jou graag bij het selecteren van het juiste e-mail pakket.

Contact opnemen

SSL certificaat

Een SSL certificaat zorgt ervoor dat het verkeer tussen de host en de eindgebruiker wordt versleuteld. In een vorige blogpost hebben we al uitgelegd wat een SSL-certificaat is en waarom deze belangrijk is. Hier nog even kort de samenvatting van de blogpost:

Beveiliging 
Met behulp van een SSL-certificaat worden de gegevens van en naar de eindgebruiker versleuteld verstuurd.

Vertrouwen
Doordat een bezoeker in de browser kan zien dat er gebruik wordt gemaakt van een SSL-certificaat, zorgt dit voor vertrouwen. Men zal eerder geneigd zijn interactie uit te oefenen waarbij persoonsgegevens dienen te worden uitgewisseld.

SEO
Sinds 2014 neemt Google het toepassen van een SSL-certificaat mee in de indexering van websites. 

Support

Na de oplevering van de website wordt uiteraard ondersteuning gegeven. Zo beantwoorden we vragen en helpen we met de uitleg en het vullen van de applicatie. Dit kan, afhankelijk van het ontwikkeltraject, ook plaatsvinden tijdens het ontwikkeltraject. 

Content

Wanneer de website is opgezet, zal deze gevuld moeten gaan worden met inhoud. Een website is dynamisch en de content dient altijd up-to-date te zijn. Zorg er daarom voor dat je genoeg tijd in je website investeert. Bezoekers die verouderde of onvolledige informatie aantreffen haken sneller af. Het is dus erg belangrijk om correcte content te plaatsen. 

Het is niet alleen belangrijk om inhoudelijk correcte content te hebben. Ook is het van belang een correcte structuur te hanteren. Wanneer gebruik je welke kop (ook wel heading)? Je kan het vergelijken met een boek: Heading 1 is de titel, Heading 2 is een hoofdstuk, Heading 3 is een sub-hoofdstuk. Binnen de hoofdstukken zijn er paragrafen. Het zorgt voor een duidelijke hiërarchie van je pagina. Fijn voor jou èn voor jouw bezoeker. 

<h1>Dit is de titel van de pagina</h1>
<p>hier komt een korte inleiding ...</p>

<h2>Hoofdstuk 1</h2>
<p>Dit is de eerste paragraaf van hoofdstuk 1 ...</p>
<p>Dit is de tweede paragraaf van hoofdstuk 1 ...</p>

<h2>Hoofdstuk 2</h2>
<p>Dit is de eerste paragraaf van hoofdstuk 2 ...</p>

Niet alleen de tekst is belangrijk, ook afbeeldingen hebben een enorme invloed op je website. Zorg daarom voor goede afbeeldingen van hoge kwaliteit. Als de afbeelding te klein is, wordt de afbeelding vaak opgeschaald waardoor de afbeelding er 'pixel-achtig' uit ziet. Hieronder een voorbeeld van twee  afbeeldingen. Één is een van hoge kwaliteit en de ander is te klein en wordt daardoor opgerekt.  

In een eerdere blogpost gaan we dieper in op afbeeldingen en de bijbehorende aspect ratio's. 

Wil je weten wat nodig is om tot een bepaalde dienst of product te komen?

Neem contact op met Wouter Pluut. Hij helpt je graag verder.

Contact opnemen

Conclusie

Het opzetten van een website blijkt in de praktijk altijd veel meer voet in de aarde te hebben dan in eerste instantie wordt gedacht. Zowel qua ontwerp, ontwikkeling, opvoeren van content en de nazorg. 

Echter moet er niet alleen worden gefocust op de technische realisatie. Ook zaken als gebruiksvriendelijkheid, structuur, onderhoudbaarheid en uitbreidbaarheid van de code zijn belangrijk. Er komt dus enorm veel kijken bij het opzetten van een website. Heb je eenmaal een website, zorg dan ook voor voldoende doorontwikkeling. Een website is immers nooit af!