Website publiceren

Een website online zetten

Je hebt een site gemaakt in custom code of een sitebuilder zoals Webflow. 🥳 Nu wil je uiteraard dat andere mensen hier naar kunnen surfen.

Hier heb je 2 dingen voor nodig:

• 🌍 Domeinnaam
• 💾 Hosting

Domeinnaam

• Bijvoorbeeld: www.bol.com, www.arteveldehogeschool.be....
• Moet je aankopen bij domeinnaamregistrar of webhostingbedrijf
• Checkt of je domeinnaam nog beschikbaar is
• Extensie kiezen (.be/.com/.net...)
• Je betaalt een jaarlijkse kost om de domeinnaam te behouden

= 🌍 het adres van een website op het internet.

Domeinnaam

Bedrijven waar je domeinnamen kan nakijken en registreren:
combell.com, versio.com, one.com...

Hosting

• Hostingpakket kiezen bij een provider (Combell, TransIP, Webflow...)
• Bij eigen gecodeerde sites uploadt je je code en afbeeldingen naar hun server via FTP of SSH (n.v.t. bij Webflow)
• Je betaalt een jaarlijkse kost om je plekje te huren
• Kost hangt af van grootte website, aantal bezoekers, aantal zware bestanden/foto's...

= 💾  Een plekje huren op een server zodat je website online bezocht kan worden

Samenvatting

🏠 Je website = Een huis dat je hebt gedesigned en gebouwd

🌍 Je domeinnaam = het adres van dat huis

💾 Hosting = de grond waar je het huis op plaatst

Een website online
zetten via Webflow

Webflow maakt het gemakkelijk om je site online te zetten

🌍 Eigen domeinnaam

• Kan je niet aankopen via Webflow, dat moet nog steeds via externe registrar
• Eens aangekocht kan je die wel eenvoudig koppelen aan je Webflow site

💾 Hosting

• Webflow kan jouw website hosten
• Per website kies je een Site Plan met bepaalde kost

Preview vs Publish

👀 Preview
Tijdelijk, enkel zichtbaar voor jou (en via share link)

🌐 Publish

Zichtbaar voor iedereen op het web, via:

💡 Voor je portfoliowebsite kàn je een custom domein kiezen als je zelf een domeinnaam aankoopt en koppelt + je eigen Webflow Workspace gebruikt.

• webflow.io subdomein, vb. project-naam.webflow.io
• custom domein(en) (💸 mits zelf aangekocht & gekoppeld)

Waarom meerdere domeinen?

Vaak wil je eerst iets testen of laten reviewen voordat je het echt live zet voor iedereen.

🧪 Staging environment
= Testversie(s) op een webflow.io subdomein

• Simulatie voor feedback, debugging & (cross browser) testing
• Kan password protected

🚀 Production environment

Dé officiële live versie van je site, op je eigen domeinnaam

Vóór je publiceert

Zorg dat de basisinstellingen goed staan:

Project Settings > Publishing

• webflow.io domain

Vóór je publiceert

Project Settings > General

• Website title: titel in browser & Google
• Favicon: icoontje in tabblad
• Open Graph image: voor sociale media
• ...

Publiceren

• Klik op de "Publish" button in Webflow Designer
• Kies waar je wil publiceren:
  • subdomein en/of
  • custom domein
• Onafhankelijk van content changes in CMS

⚠️ Let op: je overschrijft telkens de vorige versie

= Huidige versie online zetten

Oefening

• Gebruik de "De Zwaarste Lijst" Template om een nieuwe site aan te maken in de ArteveldeUAS Workspace.
• Voeg een favicon toe & pas de domeinnaam aan.
• Zet indexering af via SEO > Indexing
• Publiceer de website

Volledige briefing op Canvas

Optimalisatie

Een stapje terug

• 📱  Responsiveness: Je site bruikbaar maken op verschillende devices

• ⚡️ Performance: Je site snel laten laden

• 🔍  SEO: Je site goed vindbaar maken

• ♿  Toegankelijkheid (a11y): Je site begrijpbaar maken voor iedereen

Voordat je je site publiceert, neem je best eerst de tijd om zaken te optimaliseren. Denk aan:

Een goed geoptimaliseerde site is niet alleen mooier, maar ook gebruiksvriendelijker.

     Lighthouse

• 📱 Best practices: moderne webstandaarden

• ⚡ Performance: laadsnelheid, afbeeldinggrootte, lazy loading

• 🔍 SEO: juiste headings, metadata, alt-teksten

• ♿ Toegankelijkheid (a11y): leesvolgorde, contrast, focus states

= Open source tool die pagina's analyseert en verbeterpunten oplijst

📖 Intro tot Lighthouse

     Lighthouse gebruiken

1. Open site in Google Chrome
2. Dev tools > tab Lighthouse
3. Klik op "Analyze page load"
4. Bekijk de scores en aanbevelingen
5. Optimaliseer je website
6. Herneem de test

​Via Pagespeed
pagespeed.web.dev 

Via Chrome DevTool

💡 Tip: Streef naar een groene score in elke categorie

Oefening

• Analyseer de gepubliceerde site via Lighthouse (Mobile)
• Sla het rapport op als PDF
• Analyseer de verbeterpunten:
  • Waar wordt op gelet?
  • Wat kan jij als designer verbeteren?

Performance

Wat is Performance?

Performance verwijst naar hoe snel en efficiënt een website laadt en reageert

💡 In het Nederlands wordt ook vaak de term "performantie" gebruikt

Belang van performance

🧑‍💻 ...een betere gebruikerservaring (UX)

📉 ...een lagere bounce rate (gebruikers die niet doorklikken)

🔍 ...betere SEO-score (zie zo meteen)

📱 ...een betere ervaring op mobiel

Een snelle site heeft...

Wat beïnvloed performance?

Je vermijdt best

📷 Te zware of te grote afbeeldingen

👩‍💻 Te veel onnodige of slordige code

💨 Te veel animaties of scripts (zeker op mobiel!)

🧱 Onnodig complexe layout-structuur

Afbeeldingen optimaliseren

• 🧱 Formaat: gebruik moderne formats zoals WebP, SVG, AVIF
  ​Behalve voor OpenGraph images

• 📏 Afmetingen: maak assets niet groter dan nodig
  Exporteer ze correct uit Figma

• ⚖️ Bestandsgrootte: comprimeer afbeeldingen en streef naar minder dan 500 KB per afbeelding

• Gebruik lazy loading in Webflow

Vaak kan je voor een groot deel je website meer performant
maken door afbeeldingen en iconen te optimaliseren.

Assets optimaliseren

In Webflow kan je in 1 klik meerdere afbeeldingen tegelijk converteren naar avif/webp & comprimeren.

💡 Ook voor assets uit het CMS!

Externe tools

• Shortpixel
• TinyPNG
• Optimole
• Adobe Photoshop

Het is altijd een goed idee om ook buiten Webflow met zo performant mogelijke assets aan de slag te gaan.

Gebruik hiervoor tools als:

Lazy Loading

= afbeeldingen worden pas ingeladen wanneer ze in beeld komen

Selecteer een afbeelding > Settings > Type

• Lazy: laadt pas als de afbeelding in beeld komt (meest performant)
• Eager: laadt direct bij het openen van de pagina
• Auto: browser kiest zelf (standaardgedrag)

💡 Gebruik Lazy voor alle niet-direct zichtbare beelden (onder de fold)

Oefening

Optimaliseer de afbeeldingen en vergelijk Lighthouse score.

SEO

Search Engine Optimization

= zorgen dat je site gevonden wordt in zoekmachines

SEO is een onderdeel van digitale marketing, waarbij ook copywriting, ads en linkbuilding een rol spelen.

Search Engine Optimization

Wij focussen op wat jij als designer kan en moet doen, want goed design = goed voor gebruikers én robots:

SEO is niet alleen voor bedrijven of e-commerce, maar ook voor freelancers, sollicitaties, personal branding.

Search Engine Optimization

Zaken die SEO performance o.a. beïnvloeden:

• 🏗️ Structuur
• 📄 Inhoud
• ⌨️ A11y

Basisprincipes voor designers

• Meta title & description

• Alt-teksten voor beelden

• Correcte heading-structuur (H1, H2...)

• Goede URL's (optioneel bij eigen domein)

Inderdaad, eigenlijk niets nieuws voor ons! 🤓

💸 Voor verschillende meer advanced SEO settings (die buiten de scope zijn van deze module) moet je een Site Plan koppelen aan je site in Webflow..

SEO instellen in Webflow

Veel SEO instellingen kan je doen via de Page settings of in je rechtstreeks in de Webflow designer

SEO instellen in Webflow

Title Tag
Verschijnt in Google & browser-tab
bijv. De pagina van Graduaat Digitale Vormgeving

Page settings

SEO instellen in Webflow

Meta Description
Korte beschrijving van je pagina

Page settings

• uniek per pagina

• vat de inhoud kort en helder samen (max. 160 tekens)

• bevat kernwoorden waarop je gevonden wil worden

• lokt doorklikken uit

SEO instellen in Webflow

Page settings

Open Graph image, title, description

De afbeelding en tekst die je ziet als je de website deelt op socials of doorstuurt

SEO instellen in Webflow

• Voeg alt-teksten toe via image settings

• Gebruik max één H1 per pagina en zorg voor logische hiërarchie.

Webflow designer

Oefening

• Vul de nodige site data aan
• Controleer de heading-structuur
• Voeg alt-teksten toe bij belangrijke afbeeldingen
• Republish de site en test opnieuw
  • Via Lighthouse (SEO & a11y tab)
  • Test de outline van je website via een Outline checker
  • Test je Social Media previews via een OG checker
  • Doe een uitgebreide SEO check via een SEO checker

Go-live

Go-live checklist 🚀

✅ Is je site-titel ingevuld?
✅ Heb je een favicon toegevoegd?
✅ Zijn alle links werkend?
✅ Werkt de site goed op mobiel?
✅ Zijn alle afbeeldingen geoptimaliseerd?
✅ Heb je alt-teksten toegevoegd?
✅ Is er een logische headingvolgorde?
✅ Heb je meta-titels en beschrijvingen ingevuld?

En wat na livegang?

• ⚡️Performance, SEO, a11Y: Optimaliseer regelmatig ook later toegevoegde content (die vb. via het CMS werd toegevoegd). 
• 🆎 Testen (vb. A/B-testen): Vergelijk 2 of meer varianten van een pagina om te zien wat beter werkt
• 💅 Personalisatie: Toon aangepaste content aan verschillende doelgroepen

Blijf de site geregeld testen, monitoren, updaten en personaliseren voor optimale gebruikerservaring en prestaties.

💡 Webflow Optimize helpt je testen en personaliseren, rechtstreeks binnen Webflow.