Website publiceren

Een website online zetten

Je hebt een site gemaakt in een sitebuilder zoals Framer. 🥳
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 Framer)
• 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 Framer

Framer maakt het gemakkelijk om je site online te zetten

🌍 Eigen domeinnaam

• Aanvragen via Framer of aankopen bij een via externe registrar
• Eens aangekocht kan je die wel eenvoudig koppelen aan je Webflow site

💾 Hosting

• Webflow kan jouw website hosten
• Hiervoor moet je wel een betalend plan hebben (of student discount)

Preview vs Publish

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

Publish

Zichtbaar voor iedereen op het web, via:

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

Een website online
zetten via Framer

Met de publish button zet je je site simepelweg online

• Framer genereert hierbij automatisch een domeinnaam
• = base domain: een plek om je site online te testen
• Klik op domeinnaam om naar je live site te gaan

Domeinnaam koppelen

Er zijn drie opties om je eigen domeinnaam te koppelen aan je site, deze vind je terug in de site settings

• Gratis domeinnaam met framer extentie
• Eigen dommeinnaam als je abonnement neemt (student discount)
• Eigen aangekochte domeinnaam (van een registrar) koppelen

Domeinnaam koppelen

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 base domain

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

🚀 Production environment

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

⚠️ Apart stagen kan enkel met betalend plan, bij een gratis plan word je website automatisch gepubliceerd op je base- én eigen domain

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

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.

Hoe kan je optimaliseren?

• 📱 Responsiveness: Elke schermgrootte uitgebreid testen

• ⚡ Performance: laadsnelheid, afbeeldinggroottes aanpassen, lazy loading...

• 🔍 SEO: juiste headings (hiërarchie), metadata, alt-teksten...

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

Optimaliseren kan je op heel wat manieren, denk aan...

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 animaties of scripts (zeker op mobiel!)

🧱 Onnodig complexe layout-structuur

Afbeeldingen optimaliseren

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

• Framer zet afbeeldingen automatisch om naar WebP of AVIF
• Zet resolution altijd op auto zodat de size aangepast wordt per schermgrootte

Externe tools

• Shortpixel
• TinyPNG
• Optimole
• Adobe Photoshop

Het is altijd een goed idee om ook buiten Framer 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

• Je verliest geen tijd in het begin door de site "volledig" in te laden
• Framer past Lazy Loading automatisch toe

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

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

• Alt-teksten voor beelden

• Goede URL's (optioneel bij eigen domein)

• Title & description in site settings

Correcte heading structuur

Let bij het aanmaken van je text styles op de juiste hiërarchische structuur

• Belangrijk voor SEO

Onderscheid maken tussen hoofdzaak en bijzaak

• Belangrijk voor toegankelijkheid

bv. Screenreaders kunnen content beter voorlezen

Correcte heading structuur

Alt texten invullen

Een alt text is een korte omschrijving die je meegeeft aan de afbeeldingen op je website  

• Belangrijk voor SEO

Word gebruikt voor zoekmachines (bv. Google Images)

• Belangrijk voor toegankelijkheid

bv. Screenreaders kunnen images "voorlezen"

Alt texten invullen

Framer genereert vaak automatisch een tekst, kijk deze altijd na en pas bij waar nodig

Algemene SEO instellen

Veel SEO instellingen kan je doen via
de Page settings         van je website

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

Site settings

Algemene SEO instellen

Language
De taal van je website aanduiden helpt screenreaders, vertaalsoftware en zoekmachines

Site settings

Algemene SEO instellen

SEO instellen in Webflow

Description
Korte beschrijving van je pagina

Site settings / Page settings

• Liefst 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

Site settings

Favicon

Het kleine icoontje dat je bovenaan het tabblad en in zoekmachines ziet

Go-live

Go-live checklist 🚀

✅ Is je titel ingevuld?
✅ Heb je een taal ingesteld?
✅ Heb je per pagina een description toegevoegd?
✅ Heb je een favicon toegevoegd?
✅ Is er een logische headingvolgorde?
✅ Zijn alle afbeeldingen geoptimaliseerd?
✅ Heb je alt-teksten toegevoegd bij alle afbeeldingen?
✅ Zijn alle links werkend?
✅ Werkt de site goed op mobiel?

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.