Front-end: de verbindende factor

16 September 2016
Geschreven door:

Het is de taak van een front-end developer om het ontwerp te vertalen naar code waarbij voornamelijk gebruik wordt gemaakt van HTML, CSS en Javascript. Simpel gezegd is een front-end developer de verbindende factor tussen design en techniek. Het is belangrijk dat hij of zij al bij de start van het project betrokken is, al is het wat meer op de achtergrond.

In het proces van concept/design is het belangrijk om de technische mogelijkheden en beperkingen in kaart te brengen zodat je in een later stadium van het project niet in de problemen komt. Aan de ene kant willen designers graag ‘out of the box’ kunnen werken en wordt daarbij niet altijd in technische beperkingen gedacht. Dat is heel begrijpelijk want creativiteit wil je het liefst niet beperken. Aan de andere kant heb je nu eenmaal te maken met verschillende websites waarvoor verschillende technieken ingezet worden.

Door goed te kijken naar het doel van een website kun je vaststellen welke techniek er ingezet moet worden. Een eenvoudige website bestaande uit een paar pagina’s, welke dient als visitekaartje, maakt gebruik van andere technieken dan een Magento webshop met checkout systeem. Het is dus belangrijk om vooraf al helder te hebben welke technieken we (kunnen) gebruiken en waar we rekening mee moeten houden bij de ontwikkeling van een website.

Laten we eens gaan kijken naar enkele aspecten waar we rekening mee moeten houden om vanuit een design tot een website te komen.

Webshop of informatieve website?

Wanneer er een webshop ontwikkeld moet worden staat er een groot deel van de te gebruiken technieken vast. Een e-commerce platform als Magento, WooCommerce of Shopify is speciaal ontwikkeld voor de beste gebruikerservaring. Hierbij zijn voor gedefinieerde componenten en pagina structuren en vaststaande functionaliteiten opgezet voor het juist afhandelen van een order. Dit legt dus wel wat beperkingen op het ‘out of the box’ gaan van een designer.

Een informatieve website is vaak ‘eenvoudiger’ van opzet. In de meeste gevallen wordt er gebruik gemaakt van een CMS, wat staat voor content managementsysteem. Dit maakt het mogelijk om de content van een website te beheren. Elk CMS is weer anders en evenals de keuze voor een e-commerce platform, zorgt ook de keuze voor een CMS voor enkele beperkingen. Elk CMS is daarin verschillend, maar over het algemeen zijn de mogelijkheden vaak ruimer dan bij een webshop.

Grid-systeem

Bij de start van het design proces is het belangrijk om al rekening te houden met het gebruik van een Grid systeem. Dit is een raster van verticale lijnen en vormt een hulpmiddel voor een webdesigner om elementen beter uit te lijnen. 

Door alle basiselementen een ‘plek’ te geven zorgt dit voor meer consistentie in het ontwerp en uiteindelijk meer structuur en rust in de website. Door hier al in het design proces rekening mee te houden, zullen design en front-end beter bij elkaar aansluiten en zal het de ontwikkeling van de website makkelijker maken.

Front-end frameworks

Om niet helemaal ‘from scratch’ te hoeven werken, maken we gebruik van een Front-end framework zoals bijvoorbeeld Bootstrap of Foundation. Het framework bestaat uit componenten waarmee je een pagina kunt opbouwen en een structuur neer kunt zetten. De meeste frameworks bevatten ook een Grid-systeem, waardoor je makkelijker en sneller een goede basis hebt staan om vanuit verder te werken.

Responsive design

Tegenwoordig worden de meeste websites ook geschikt gemaakt voor mobile devices. Dit betekent dat een website op bijvoorbeeld een mobiel of tablet ook goed moet functioneren. Het geschikt maken van een website voor mobile devices kan op verschillende manieren: door middel van responsive- of adaptive design. Het komt erop neer dat een website zo wordt opgebouwd dat alle content zoals afbeeldingen, teksten, formulieren etc. automatisch wordt geschaald op basis van de breedte van de diverse schermformaten. Het is dus niet altijd nodig om een aparte website te ontwikkelen voor mobiel of tablet. 

Componenten / structuur bepalen

Nadat een design is goedgekeurd door de klant gaat de front-end developer ermee aan de slag. Als eerste wordt er gekeken hoe het design is opgebouwd en uit welke componenten deze bestaat. Het design wordt als het ware in brokjes opgeknipt tot losstaande componenten. Ook wordt de pagina structuur bepaald. Al deze elementen worden door middel van HTML elementen opgebouwd. 

Een component kan bijvoorbeeld een header, navigatie, article, sidebar, footer etc. zijn. Door deze componenten in een pagina structuur te plaatsen, bouwen we een pagina op in overeenstemming met het goedgekeurde design.

Styling toepassen

Wanneer de structuur van de pagina en de componenten bepaald is kunnen we aan de slag met de styling. Door middel van CSS bepalen we hoe een element getoond moet worden en welke eigenschappen deze moet hebben zoals kleur, hoogte, breedte, font grootte etc. Ook kunnen er elementen zoals een button, header of kleine animaties worden toegevoegd om het design als het ware tot leven te brengen en gebruiksvriendelijker te maken.

Testen

Om ervoor te zorgen dat een website ook op mobile devices goed functioneert, is het van belang deze goed te testen. Er zijn namelijk diverse browsers waar je rekening mee moet houden. Het testen kan door zowel fysieke apparaten te gebruiken als online tools, waarbij de eerste wel het meest betrouwbaar is. Het testen van een website kan heel ver gaan: van het testen of de content goed getoond wordt op diverse devices tot het testen van laadtijd van de website.

Conclusie

Als front-end developer sta je midden tussen design en techniek waarbij je zowel rekening moet houden met design- als de technische mogelijkheden en beperkingen. Er komt meer bij kijken dan je zo op het eerste moment denkt. Juist daarom is het belangrijk om al bij de start van een project betrokken te zijn. Door rekening te houden met de genoemde aspecten zal dit de ontwikkeling van je website ten goede komen.

Dit artikel is onderdeel van een reeks artikelen die het proces van het realiseren van een website in kaart brengen. Hiervoor kon je al lezen wat de weg is van concept naar vormgeving. Hierna volgt een artikel over de technische realisatie en oplevering van een website. 

Ook interessant
Alle items

Wij zijn Dunique