Scripting

In deze fase richten we ons op het optimaliseren van de gebruikerservaring op de website door middel van animaties en interactieve elementen. We gebruiken de statische designs als uitgangspunt en werken ze verder uit tot een levendige, interactieve versie.

Eerste van drie fases van de ontwikkeling

In deze fase wordt extra aandacht besteed aan de navigatie en de mobiele versie van de website. Voordat we verder gaan met de technische ontwikkeling van de website, willen we ervoor zorgen dat de omgezetten designs naar tevredenheid van de klant zijn. Scripting is de eerste stap in de drie fases van de ontwikkeling van jouw project. Dit is de eerste keer dat er echt code geschreven wordt. 

Responsive & adaptive webdesign

Mobile first is een belangrijk leidraad om te volgen. De mobiele versie van de scripting wordt in deze fase volledig uitgewerkt.

Responsive web design is een techniek waarbij een website wordt ontwikkeld zodat deze zich automatisch aanpast aan de grootte van het scherm waarop de website wordt bekeken. 

Adaptive web design gaat verder en is gericht op een specifiekere aanpassing aan het beeldscherm en de gebruiker, door bijvoorbeeld de navigatie, de inhoud en de interactie aan te passen aan de grootte van het scherm.

Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and develop websites.
Jacob Lett

Toevoegen van animaties

Scripting is veel meer dan enkel maar een statisch design omzetten naar HTML. Deze fase brengt je website voor het eerst écht tot leven.

Door het toevoegen van animaties, mouse-over effecten en speciale navigaties krijgt je design extra cachet. 

Belangrijk om weten is dat de toegepaste animaties ook nog naar de klant wordt doorgestuurd ter goedkeuring. Als er nog effecten of animaties (licht) bijgewerkt moeten worden, dan kan dat.

Performantie

We zijn allemaal gebeten om de website uiteindelijk zo snel & licht mogelijk te maken, en dat begint in deze fase. Een performante website is een website die snel laadt en efficiënt werkt. Dit is belangrijk omdat een snelle website beter scoort in zoekmachines, bezoekers langer op de website blijven en er minder snel afhaken, en een betere gebruikerservaring biedt. Een website met een lage prestatie kan leiden tot hogere bounce rates, lagere conversies en een slechte reputatie voor de organisatie.

Daarnaast kunnen langzame websites ook een negatieve invloed hebben op de mobiele gebruikerservaring, omdat mobiele gebruikers vaak op onbetrouwbare internetverbindingen zijn aangewezen. Een performante website is dus van groot belang voor de gebruikerservaring, de zoekmachineoptimalisatie en de zakelijke prestaties van een organisatie.

Talk is cheap. Show me the code.
Linus Torvalds
Programmeur - maker van Linux
  • Wat is scripting/slicing?

    Scripting is het proces waarbij code geschreven wordt om een design om te zetten. HTML slicing of scripting is dus een techniek waarbij een ontwerp (bij ons meestal vanuit een Adobe XD ontwerp) wordt opgedeeld in verschillende lagen, die vervolgens worden omgezet in HTML en CSS. Hiermee kan de ontwerp worden gebruikt als basis voor de ontwikkeling van een website. Door de ontwerp in lagen op te delen, kan een webdeveloper gemakkelijker bepaalde elementen aanpassen en aanpassen aan de eisen van de website. Het is een manier om een design om te zetten in werkbare code die een website kan weergeven.

  • Wat is HTML?

    De HTML-taal is ontworpen om inhoud te structureren, niet alleen om een design te creëren. Wanneer we de juiste tags gebruiken voor onze inhoud, kan de browser de inhoud beter begrijpen en de zoekmachine kan de inhoud beter analyseren. Dit is waar semantische HTML om draait. Semantische HTML slicing is ook belangrijk voor toegankelijkheid. Wanneer we de juiste tags gebruiken, kan een schermlezer de inhoud beter interpreteren en voorlezen aan gebruikers met een visuele beperking.

  • Wat is semantische html code?

    Semantische HTML-code is een manier om de inhoud van een website te organiseren en te structureren door gebruik te maken van de juiste HTML-elementen. Dit betekent dat de code gebruik maakt van tags zoals header, nav, main, article en section om de inhoud te categoriseren in logische groepen. Hierdoor wordt de inhoud beter toegankelijk voor zoekmachines en screen readers, en kan de inhoud ook eenvoudiger gestyled worden met CSS. Dit zorgt voor een betere gebruikerservaring (UX) voor de gebruiker.

  • Wat betekent 'mobile first'?

    "Mobile first" is een benadering voor webdesign en ontwikkeling waarbij de prioriteit wordt gegeven aan het creëren van een optimale gebruikerservaring voor mobiele apparaten, zoals smartphones en tablets. Dit betekent dat bij het ontwerpen van een website of applicatie, de focus wordt gelegd op de specifieke eigenschappen en beperkingen van mobiele apparaten, zoals kleinere schermen en beperktere computatiekracht.

    De mobile-first benadering is een reactie op de groeiende populariteit van het gebruik van mobiele apparaten om websites te bezoeken. Volgens sommige studies, wordt meer dan de helft van het verkeer van een website afkomstig van mobiele apparaten. 

    Samengevat, "mobile first" is een benadering voor ontwerp en ontwikkeling waarbij de focus ligt op het maken van een optimale gebruikerservaring voor mobiele apparaten, en waarbij rekening wordt gehouden met de specifieke eigenschappen en beperkingen van deze apparaten.

  • Wat is responsive web design?

    Responsive web design is een techniek waarbij een website wordt ontworpen en ontwikkeld zodat deze zich automatisch aanpast aan de grootte van het scherm waarop de website wordt bekeken. Dit betekent dat de lay-out, de afbeeldingen en de tekst van een website zich aanpassen aan de resolutie en de grootte van het scherm van een gebruiker, zodat de website er op elk apparaat helder en gebruiksvriendelijk uitziet. Responsive web design helpt om de gebruikerservaring op elk apparaat te optimaliseren en zorgt ervoor dat een website op elk apparaat toegankelijk is, ongeacht of het nu een desktopcomputer, een tablet of een smartphone is.

  • Wat is adaptive web design?

    Adaptive web design is een methodologie voor het ontwerpen van websites die zich automatisch aanpast aan de grootte en resolutie van het scherm waarop ze worden weergegeven. In plaats van een enkele layout te ontwerpen die op alle schermformaten wordt weergegeven, worden er verschillende layouts ontworpen voor verschillende formaten. Dit is in tegenstelling tot responsive web design, waarbij een enkele layout op elk schermformaat wordt aangepast. Adaptive webdesign is gericht op een specifiekere aanpassing aan het beeldscherm en de gebruiker, door bijvoorbeeld de navigatie, de inhoud en de interactie aan te passen aan de grootte van het scherm.

Next up: back-end fase