Een Webflow website vullen met teksten en afbeeldingen; belangrijke tips en richtlijnen

Jouw website begint vorm te krijgen en nu kan jij eindelijk zelf aan de slag! De website moet gevuld worden met je eigen teksten en afbeeldingen. Dat klinkt simpel, maar schrijven voor het web is een vak apart. Daarnaast moeten afbeeldingen aan bepaalde eisen voldoen, zodat ze op de juiste manier schalen en de website niet vertragen.

In dit blog geven we je graag tips en advies over het vullen van jouw Webflow website op het gebied van:

1. Het toevoegen van afbeeldingen
2. Schrijven voor het web
3. Denken vanuit de doelgroep
   

Uiteraard rekening houdend met optimalisaties ten gunstige van de vindbaarheid in Google.

1. Het toevoegen van afbeeldingen

Afbeeldingen zijn een belangrijk onderdeel van je Webflow website. Het geeft de website karakter en draagt direct bij aan het uitstralen van de juiste sfeer. Het is daarom van groot belang dat de afbeeldingen op de juiste manier worden toegevoegd. Om de afbeeldingen volledig tot hun recht te laten komen, zijn de volgende richtlijnen belangrijk:

Afbeeldingen verkleinen

Afbeeldingen zijn over het algemeen grote bestanden die je website flink vertragen. Gelukkig zijn er tegenwoordig meerdere manieren om een afbeelding te verkleinen, zonder in te leveren op kwaliteit. Je moet alleen wel even weten hoe:

Stap 1. Maak de afbeeldingen op het juiste formaat

Eerlijk gezegd, dit is altijd het lastigste punt. Ieder design is namelijk uniek en vraagt wellicht om specifieke afmetingen, maar over het algemeen mag je de volgende vuistregels aanhouden:

• Header-afbeeldingen (dit is vaak de eerste afbeelding op een pagina): 2000 px breed
• Overzichtsafbeeldingen (kleinere afbeeldingen op een overzichtspagina): 800 px breed
• Afbeeldingen in een rich-text blok (bijvoorbeeld een blog): 1200 px breed

Een handige tool om één of meerdere afbeeldingen op het juiste formaat te krijgen is BulkResizePhotos. Upload de afbeelding(en) in de gratis tool en voer vervolgens de betreffende breedte in en zet de beeldkwaliteit op 100% (staat standaard op 80%). Waarom op 100%, we waren toch bezig met afbeeldingen verkleinen? Dat leggen we in de volgende stap uit! Jouw geschaalde afbeeldingen worden automatisch en gratis gedownload!

Stap 2. Comprimeren

De afbeeldingen zijn nu in het juiste formaat, maar nog steeds te groot (vanwege de 100% instelling). Gebruik daarom nu TinyJPG om de afbeeldingen te comprimeren zonder kwaliteitsverlies. TinyJPG zorgt er namelijk voor dat alleen onnodige data uit de afbeelding wordt gehaald. Daardoor blijft de kwaliteit gewaarborgd, terwijl het bestand tot wel 80% kleiner is! En dat zorgt weer voor een snellere en gebruiksvriendelijkere website!

Het verkleinen van afbeeldingen is best even een klusje, maar komt de prestaties van je Webflow website zeer ten goede! 

Pro tip: Wanneer je vanaf je iPhone een afbeelding naar je MacBook stuurt dan wordt deze geëxporteerd in een .heic format. Via snelle taken > converteer afbeelding kan je de afbeelding gemakkelijk omzetten tot het gewenste .jpg formaat.

De juiste afbeelding selecteren

Bekijk altijd kritisch of de beoogde foto in het frame past van je afbeelding. Soms leent een lay-out zich vooral voor een staande óf liggende foto. Wil je toch graag een staande foto gebruiken? Bekijk dan of je een deel van de hoogte af kunt snijden.

Pro tip: Heb je voornamelijk mobiele gebruikers? Zorg dan dat je afbeeldingen altijd op volledige breedte staan. In de Webflow editor lijkt dit wellicht veel ruimte, maar je zult zien dat dit op de live-omgeving prima uit de verf komt. Gebruik daarnaast bij voorkeur liggende foto’s om het scrollen te verminderen en de leesbaarheid te verhogen.

Afbeeldingen optimaliseren voor Google

Heb je de juiste afbeeldingen geselecteerd en het formaat verkleind? Controleer dan of alle afbeeldingen een “alt” tag hebben. Een alt tag staat voor alternatieve tekst en verschijnt wanneer een afbeelding op de website niet kan laden. Het omschrijft dus de afbeelding in één zin. De alt tag  aanpassen in de Webflow editor doe je als volgt: 

Klik op de afbeelding > selecteer het gereedschap icoontje > vul de Alt tag in.

Waarom het toevoegen van een alt tag belangrijk is

Allereerst is de aanwezigheid van een alternatieve tekst zeer belangrijk voor bezoekers met een visuele beperking die gebruik maken van een zogenaamde screenreader. Daarnaast gebruikt Google de “alt tag” om te bekijken of de afbeeldingen relevant zijn aan de tekst. Moeite steken in het toevoegen van dit kleine, beschrijvende stukje tekst loont dus zowel voor de gebruiksvriendelijkheid als vindbaarheid van je website.

Naast dat je website zo optimaal mogelijk moet zijn voor de gebruiker, wil je ook dat deze geoptimaliseerd is voor Google. Een goede vindbaarheid draagt direct bij aan het succes van je bedrijf.

Schrijven voor het web

Het schrijven van informerende en overtuigende teksten op het web is een vak apart. In de onlinewereld hebben mensen weinig tijd én geduld. De boodschap moet kort, bondig en overtuigend zijn.

Schrijven voor het web kan frustrerend zijn. Aan de ene kant wil jij de inhoud van je bedrijf niet te kort doen en daarom voldoende uitleg geven, terwijl je aan de andere kant weet dat de gemiddelde bezoeker een tekst slechts scant en zich niet verdiept.

Scanbare tekst

Wat je ook wilt vertellen, zorg dat je tekst makkelijk en snel te scannen is. Dat is echt het allerbelangrijkste. Op deze manier vergroot je de kans aanzienlijk dat je boodschap goed overkomt bij de bezoeker en draagt de content van je Webflow website direct bij aan het verhogen van conversie.

In je Webflow website kan je slim gebruik maken van de beschikbare elementen, zoals:

• Opsommingen
• Blockquote
• Kopjes
  

Pro tip: Bekijk altijd kritisch of je van een lang stuk tekst een opsomming kunt maken of bijvoorbeeld een blockquote kunt toevoegen. Hiermee verhoog je de kans aanzienlijk dat de boodschap goed overkomt bij je bezoeker.

Denk vanuit de doelgroep

Bij het schrijven van jouw website teksten is het belangrijk om altijd het belang van de doelgroep in je achterhoofd te houden. Lees je tekst nog eens kritisch door en stel jezelf daarbij de vraag: “What’s in it for them?”.

Een veelgemaakte fout is het beginnen van een pagina vanuit het bedrijf. Dit spreekt de doelgroep niet aan, maar vertelt vooral iets over jezelf.

Voorbeelden hiervan zijn:

1. ‍‍Herformuleer "wij zijn dé specialist in vloerkleden" naar "Handgemaakte vloerkleden direct op voorraad"
2. Herformuleer "Ik bied unieke workshops aan" naar "Ben je op zoek naar een uniek uitje? Boek een workshop!"

Dit is makkelijker gezegd dan gedaan. Laat daarom altijd iemand anders de teksten met een kritische blik nalezen. Het liefste een persoon die nog niks van jouw bedrijf weet.

Toevoegen van interne en externe linkjes

Natuurlijk wil je graag dat je doelgroep alle informatie op jouw pagina leest. Het kan daarom als een gevaar voelen om interne en externe linkjes aan de pagina toe te voegen, aangezien je de bezoeker een makkelijke uitweg biedt.

Toch is de kwaliteit van jouw pagina een stuk hoger als je wel interne én externe linkjes toevoegt, omdat:

• De tekst wederom beter te scannen is;
• Je de bezoeker aan de hand meeneemt in de zoektocht naar informatie;
• Je pagina op deze manier meer autoriteit krijgt en daar houdt Google van.

Tot slot

Dit zijn de belangrijkste aspecten voor het op een correcte manier vullen van jouw Webflow website. Houd deze tips in je achterhoofd, maar bedenk ook altijd dat jij degene bent die jouw doelgroep het beste kent. Ga dus ook gerust af op je eigen gevoel qua teksten en zet optimalisatie voor Google op de tweede plek. Want uiteindelijk wil je waarde brengen aan mensen en niet aan robots.