Achter de schermen van een nieuwe website
Een overzicht van het proces. Wat komt er allemaal bij kijken?
Bij het creëren van een nieuwe website komt er meer kijken dan simpelweg wat code invullen. Vaak horen we de opmerking: "Is het niet gewoon een kwestie van wat code invoeren?" Nou, nee. Een website ontwikkelen vereist samenwerking tussen een designer en een front-end developer, beide met verschillende verantwoordelijkheden.
Laten we eens een kijkje nemen achter (of in!) de schermen en ontdekken wat er allemaal bij komt kijken. Allereerst is het handig om te weten dat de webdesigner en de webdeveloper de werkzaamheden van een website uitvoeren.
Webdesigners richten zich op de vormgeving, waarbij ze de wensen van de opdrachtgever vertalen naar een functionele, overzichtelijke en gebruiksvriendelijke website met een passend ontwerp.
Webdevelopers nemen vervolgens de front-end (het zichtbare gedeelte) en de back-end (de functionaliteit) van de website onder handen. Ze zorgen ervoor dat het webdesign daadwerkelijk wordt gebouwd en functioneert als een werkende website, gebruikmakend van verschillende frameworks en codes.
Stap 1: Kick-off
Het projectteam bepaalt de doelen en strategie voor de website. Technische uitdagingen, de hoeveelheid copy & content, meertaligheid, de inrichting van websiteonderdelen voor toekomstige campagnes, en meer worden besproken. Pas na deze afstemming kan het team volgens de planning aan de slag.
Stap 2: Website structuur
Om de navigatie en content te bepalen, worden een sitemap en/of een wireframe gemaakt. Hiermee kunnen we duidelijk de structuur aangeven bij de klant.
De sitemap gecreëerd met de online tool Coggle, geeft een boomstructuur van alle onderdelen van de website. Je kan het ook zien als een mindmap.
Het wireframe, ontworpen in Figma, is een visuele blauwdruk die het skelet van de website weergeeft. Voor de klant wordt hiermee ook zichtbaar hoe de header er uit komt te zien en waar de CTA (call-to-action) buttons komen te staan.
Stap 3: Website opstarten
Na goedkeuring van het ontwerp gaat de front-end developer aan de slag. Domeinnaam, webserver met database, en Umbraco CMS worden ingesteld. Versiebeheer (GIT), uSkinned en OTAP zorgen voor een georganiseerde ontwikkelingsomgeving.
- Domeinnaam, de URL van jouw website. Voorbeeld: ikwileenwebsite.nl. Soms heb je een mooie naam voor je website in gedachten, maar is deze al bezet. Wij kunnen dit controleren en als een naam nog niet bezet is, schaffen wij deze gelijk voor je aan.
- Umbraco CMS is een Content Management Systeem die wij gebruiken voor het bewerken en beheren van een webpagina. Het is gebruiksvriendelijk en goed beveiligd. In dit CMS kan je eenvoudig je website onderhouden: teksten of foto’s bewerken, structuur aanpassen etc.
- GIT is een versiebeheersysteem. Versiebeheer is het systeem waarin veranderingen in een bestand of groep van bestanden over de tijd wordt bijgehouden, zodat je later specifieke versies kan opvragen.
- uSkinned is een thema framework met componenten die we in combinatie met Umbraco gebruiken. Denk aan blokken voor banners, CTA's, teksten, foto-/videogalerie, etc die vooraf zijn ingesteld. uSkinned is een hulpmiddel voor front-end developers.
- OTAP staat voor Ontwikkeling, Test, Acceptatie en Productie. Zie het als 4 aparte websites. Hier starten we geautomatiseerde opdrachten en processen mee op om de website omgevingen te updaten. De Ontwikkel en Test servers draaien wij intern en zijn niet zichtbaar voor de buitenwereld. De Acceptatie (testomgeving, alleen voor de klant) en Productie (live website, zichtbaar voor iedereen) servers draaien bij een externe hostingprovider. Hebben wij intern wijzigingen doorgevoerd die ter goedkeuring naar jou als klant mogen? Dan zetten we dit klaar op de testomgeving. Door deze OTAP straat hebben we gelijk een intern én extern back-upsysteem en kunnen we bijvoorbeeld een bug oplossen in de ontwikkelserver zonder dat de live website daar last van heeft.
Ben je benieuwd naar wat wij op het gebied van web development voor je kunnen betekenen?
Stap 4: Website bouwen
Via GIT wordt het basis Umbraco CMS opgehaald. Met een op maat gemaakt thema van uSkinned, geprogrammeerd in HTML/CSS en Javascript (voornamelijk in Visual Studio en Visual Studio Code (VS Code), wordt de website opgebouwd. De styleguide wordt geïntegreerd, inclusief huisstijl elementen en alle benodigde componenten volgens het ontwerp.
De front-end developer zorgt ervoor dat de volledige styleguide, ook bekend als de 'kitchen sink', geïntegreerd is in de website. Dit betekent dat alle elementen van de huisstijl zijn verwerkt, zoals kleuren, logo's en lettertypen. Bovendien worden alle benodigde componenten aangemaakt, waaronder headers, banners, CTA's, tekstblokken, en meer. Kortom, alles wat de webdesigner heeft ontworpen en vastgesteld.
Zodra dit gereed is, is het tijd om de pagina-templates op te stellen volgens de specificaties in de sitemap of wireframe. Op dit punt wordt exact gebouwd wat de designer heeft bedacht, en wat de bezoekers van de website binnenkort zullen ervaren. Belangrijk om op te merken: vaak bevatten deze templates nog tijdelijke teksten en afbeeldingen. Dit hangt af van wie verantwoordelijk is voor het plaatsen van de definitieve teksten en afbeeldingen: de klant of ons team.
Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \ Doelen & Strategie \ Technische uitdagingen \ Copy & Content \
Stap 5: CMS cursus
Optioneel kan de klant een CMS cursus volgen voordat de website wordt gevuld. Tijdens de cursus leert de klant hoe het Umbraco CMS werkt, teksten aan te passen, afbeeldingen en video's te plaatsen, pagina's aan te maken, en meer. Wij kunnen dit voor je vullen en bijhouden, maar het is ook een optie dat je dit geheel of gedeeltelijk zelf doet.
Hoe leuk en handig is het om zelf een actieve rol te spelen bij het vullen van je eigen website en vervolgens na de livegang zelf aanpassingen te kunnen blijven maken? Tijdens de cursus gaan we je het volgende leren:
- De werking van Umbraco CMS
- Het aanpassen van teksten
- Het plaatsen van foto’s en video’s
- Het creëren van links
- Het toevoegen van nieuwe pagina's
- Het publiceren van nieuws, projecten en cases
- Het aanpassen van het menu
- Het bewerken/bekijken van contactformulieren
- Het implementeren van diverse componenten
- Een beknopte uitleg over waar je op moet letten met betrekking tot SEO
Lijkt het je interessant om deel te nemen aan deze cursus? Neem dan contact met ons op, wij helpen je graag verder!
Stap 6: Content vullen
De volgende stap omvat het daadwerkelijk voorzien van de website van teksten (copy) en afbeeldingen (content). Dit wordt vaak gedaan door de front-end developer, maar de klant kan dit ook eenvoudig zelf doen in het Umbraco CMS. Het vullen is op zichzelf niet bijzonder complex, maar het wordt vaak onderschat dat dit aspect simpelweg veel tijd vergt (uiteraard afhankelijk van de omvang van de website).
Welke onderdelen van de pagina verdienen altijd een 'dubbele check'?
- Paginanaam/berichttitel
- Titels op de pagina
- Teksten
- Afbeeldingen (indien van toepassing)
- Call-to-action (CTA) blokken zoals bijvoorbeeld: ‘Neem contact op’ of ‘Bel ons’
- Koppelingen tussen pagina’s
- SEO-richtlijnen en zoekwoorden (indien van toepassing)
Stap 7: Livegang
Voor de livegang worden redirects ingesteld, en een grondige controle vindt plaats. 'Redirect' staat voor doorverwijzing en dit is een begrip dat gebruikt wordt om aan te geven dat een webpagina niets anders doet dan doorverwijzen naar een andere pagina. Zoek jij bijvoorbeeld rechtstreeks naar een pagina die inmiddels al verwijdert is dan zal je een ‘error’ krijgen, ténzij er een redirect is ingesteld die er voor zorgt dat een oude URL verwijst naar de vernieuwde pagina.
Daarna wordt de volledige website opnieuw gecontroleerd aan de hand van een checklist. Niet alleen degene die de website heeft gebouwd, maar ook een collega-ontwikkelaar controleert bijvoorbeeld de functionaliteit op diverse apparaten, verschillende resoluties, snelheid, correcte werking van contactformulieren, juiste inhoud, redirects, zoekfuncties, en meer. Zodra alles is goedgekeurd, gaat de website live. Feest!
Na de oplevering houdt het niet op; er is voortdurende hosting, monitoring, en onderhoud om de website in topconditie te houden. Ondersteuning wordt geboden via verschillende abonnementen. Lees hier meer over onze hosting en SLA pakketten. Niet geheel onbelangrijk is dat we hierna natuurlijk ook support bieden, waarvoor we verschillende abonnementen hebben. Kom je een fout tegen of wil je graag iets aangepast hebben? Dan vinden we samen altijd de juiste oplossing.
Wil je ook graag een nieuwe of aangepaste website? Neem contact met ons op!
Contact
We horen graag van je
Arne
Managing director