Simpele tips voor een functioneel en mooi blogdesign

tips-mooi-functioneel-design

Een aantal jaar geleden ben ik begonnen met het ontwerpen van blogdesigns voor WordPress en na een aantal designs kreeg ik steeds meer de vraag of ik dit ook voor andere bloggers kon doen. Zo gezegd, zo gedaan. Ik doe dit nu een tijdje met veel plezier en met ieder project leer ik weet een iets bij. Door de jaren heen heb ik geleerd wat werkt, wat niet en wat je dus eigenlijk beter kan verbeteren.

Iedere maand organiseer ik dan ook een Fix-It Saturday waar je terecht kan voor persoonlijk blogadvies. Er zijn nu vijf edities achter de rug en ik vind het echt super leuk om te doen en zal dit dan ook zeker blijven doen, maar regelmatig zie ik dezelfde ‘foutjes’ terugkomen dat een overzicht mij wel handig leek.

Dit is natuurlijk mijn persoonlijke mening en misschien kijk jij er heel anders tegenaan en dat mag! Je hoeft mijn tips niet op te volgen maar misschien zet het je aan het denken en hopelijk heb je er alsnog wat aan.

Ik weet dat het artikel lang is en vooral in vergelijking met de 2.0 trend die nu gaande is bij diverse bloggers. Ik heb nu eenmaal veel te delen over dit onderwerp en kon eigenlijk nog wel even doorgaan… Opsplitsen ben ik zelf geen fan van, ik wil liever alles bij elkaar in een artikel hebben en daarom heb ik ook bij ieder puntje een korte checklist geschreven mocht je dus niet alles willen lezen. En dan gaan we nu naar de tips!

Zorg ervoor dat alles werkt

Klinkt heel voor de hand liggend maar regelmatig kom ik op blogs waarbij je gebroken afbeeldingen ziet, linkjes die niet goed doorverwijzen, pagina’s die kloppen, teksten die overlopen, grote witruimtes die het hele design teniet doen… Het ziet er onprofessioneel uit omdat het lijkt alsof je zelf even geen controle doet om te kijken of jouw design helemaal klopt en daarnaast is het vervelend voor je bezoekers omdat hun gebruikerservaring niet optimaal is.

Bekijk je blog dan ook regelmatig als een bezoeker en loop alles een keertje na. Verwijzen de links goed door, krijg je geen foutmeldingen, werken alle afbeeldingen? Wat valt je als eerste op als je jouw blog bezoekt? Wat klopt er niet en wat mis je?

Iets wat ik vrij vervelend vind is dat een logo niet doorverwijst naar de homepagina. Bezoekers zijn geneigd eerder op het logo te klikken dan te zoeken naar de “home” link in de navigatie. Ik ga standaard naar het logo toe om terug naar de homepagina te gaan, werkt dit niet dan ben ik zelf al eerder geneigd om weg te klikken dan eerst nog te gaan zoeken naar de homepagina link.

Ook zie ik weleens een poll, enquête of vragenlijst staan die ik dan wil invullen maar dat het formulier niet werkt/goed doorverwijst. Probeer formulieren en polls altijd te testen voordat je deze online zet zodat je 100% zeker weet dat alles werkt en dus ook geen ingevulde lijsten misloopt die niet verzonden konden worden.

Is jouw website responsive? Bekijk je blog dan eens op een smartphone en/of tablet en beoordeel of alles daar naar behoren werkt. Heb je geen smartphone of tablet? Je kan via Am I Responsive ook heel makkelijk zien hoe jouw blog er op diverse apparaten eruit ziet. Nog geen mobiel thema? Neem dan contact op met een webdesigner die dit voor jou kan regelen. De WP-Touch plugin ben ik echt geen fan van. Tuurlijk is het een hele makkelijke optie om een mobiel thema te creëren, maar je verliest volledig de identiteit en huisstijl van je blog. Iets waar je juist nu, doordat er zoveel blogs zijn, aandacht aan zou moeten besteden om je te onderscheiden.

Checklist

  • Browser-check: werkt alles naar behoren in diverse browsers?
  • Logo: Linkt het logo naar de homepagina?
  • 404-fouten: Heb je een aparte 404 pagina? Mocht er iets fout gaan dan wordt een bezoeker doorverwezen naar een 404-pagina.
  • Formulieren: Belanden de mailtjes niet in je spambox? Krijgt de bezoeker geen foutmelding bij het invullen?
  • Afbeeldingen: Heb je geen gebroken afbeeldingen?
  • Links: Verwijzen ze goed door? Open je externe links in een nieuwe pagina? Verwijder links naar pagina’s en websites die niet meer bestaan.
  • Design: Verwijder storende elementen, leg de focus op je artikelen en maak gebruik van genoeg witruimtes zodat het design in balans oogt.
  • Responsive design: Werkt jouw website of blog op diverse mobiele apparaten?

Navigatie

Laatst deed ik mijn standaard blogrondje en af en toe lees ik dan de comments waardoor ik regelmatig nieuwe blogs ontdekt. Ik kwam uiteindelijk op een blog terecht waarbij ik werkelijk een paar minuten moest zoeken eer dat ik de navigatie gevonden had. Deze stond namelijk verstopt in de zijbalk tussen een hele hoop widgets. Als bezoekers moeten zoeken naar meer informatie dan haken ze al snel af, zorg er dan ook voor dat de elementen die aandacht verdienen en waardoor je bezoekers langer vast kan houden, op een prominente plek staan.

Voor een optimale browser-ervaring is de plaatsing van je navigatie daarom erg belangrijk. Verstop deze niet maar zorg dat deze juist opvalt en plaatst hem het liefste bovenaan de pagina, dus boven of nét onder het logo. Dit is een logische plek wat vaak de aandacht trek van een bezoeker, dus de navigatie is daarmee snel gevonden. Zo heb je de kans dat als bezoekers je artikelen interessant vinden, ze nog even blijven hangen en de overige pagina’s gaan bekijken. En als ze meer informatie over de blogger kunnen vinden kan het maar zo zijn dat je er een volger bij hebt!

Checklist

  • Is de navigatie goed vindbaar?
  • Werken alle links in de navigatie?
  • Heb je de belangrijkste onderwerpen uitgelicht in je navigatie? Je hoeft niet alle categorieën toe te voegen, een selectie ervan mag ook. Teveel links in je navigatie kan ook averechts werken.
  • Mocht je een responsive design hebben, past de navigatie zich automatisch aan het formaat van het mobiele apparaat wat gebruikt wordt?

Maak het bezoekers makkelijk om je te kunnen volgen

Om je blog te laten groeien zal je social media moeten inzetten. Zonder social media is het heel lastig om een goed en groot bereik te creëren. Bezoekers willen graag een band krijgen met een blogger en dat krijg je door de blogger te volgen op diverse social media kanalen. Maak je social media linkjes aantrekkelijk en plaats zo op een goed zichtbare plek, bij voorkeur in de navigatie of zijbalk.

Hoe meer kanalen om te volgen, hoe beter! Iedere bezoeker heeft namelijk een voorkeur voor een bepaald kanaal, zo ben ik eigenlijk helemaal niet zo’n fan van Bloglovin maar volg ik de meeste bezoekers gewoon simpelweg via een RSS feed. En zo zijn er ook bezoekers die geen fan zijn van Twitter en de voorkeur geven aan Instagram. Wanneer je blogger bent wil je natuurlijk in contact komen met zoveel mogelijk bezoekers dus het is belangrijk om genoeg opties aan te bieden. Een RSS feed zit standaard op iedere website dus bied deze ook aan. Hetzelfde geld voor de mogelijkheid om te volgen per mail. Een Facebook pagina heeft tegenwoordig ook bijna iedereen en ook Twitter accounts zijn er in overvloed. Ik vind dat dit eigenlijk de noodzakelijke kanalen zijn die je standaard moet aanbieden, vooral omdat Facebook en Twitter ook nog eens de mogelijkheid aanbieden om je artikelen erop te delen.

Checklist

  • Maak je gebruik van social media? Bied dan de mogelijkheid aan om jou te volgen op deze kanalen.
  • Gebruik social media om je artikelen te promoten en jouw bereik zo te vergroten.
  • Zorg ervoor dat de social media links goed opvallen. Plaats ze op één plek en niet verspreid over het hele design.
  • Werken alle links? Verwijzen ze goed door? Krijg je geen foutmeldingen?

Leesbaarheid

Hoi, ik ben Naomi en ik ben lettertype verslaafd. Ik weet het dus maar al te goed hoe leuk lettertypes wel niet zijn maar hou het op je website gewoon lekker leesbaar. Kies voor een simpel serif of sans-serif lettertype en vermijd eigenlijk bijna alle handwritten/display lettertypes. Waarom? Omdat ze vrijwel nooit goed leesbaar zijn en vooral niet in alle browsers. Misschien dat alles netjes oogt in Chrome, maar kijk dan eens in Firefox of Safari. Iedere browser leest een lettertype anders, dus een browser-check is vrijwel altijd aan te raden mocht je van lettertype gaan veranderen.

Qua kleurgebruik kan je beter hoge contrastkleuren gebruiken. Ik zie regelmatig dat bloggers kiezen voor een kleuren zoals lichtgrijs, babyblauw, lichtroze op een witte achtergrond en dat is vaak erg lastig om te lezen. Zorg ervoor dat je een hoog contrast hebt tussen je achtergrond en je tekst. Heb je een witte achtergrond? Kies dan voor een zwarte tekstkleur.

Ook de grootte van de tekst kan een hoop verschil uitmaken. Tekst die 10px groot is, kan je bijna niet meer lezen op een scherm van 1920px. Kies gemiddeld voor een grootte tussen de 14-16px voor de body tekst, dit is namelijk goed leesbaar in alle resoluties.

Checklist

  • Is het lettertype wat je gebruikt goed leesbaar? Doe een browser-check en beoordeel of het lettertype ook in andere browsers goed leesbaar is.
  • Is het lettertype niet te klein?
  • Zijn de kleuren die je gebruikt hoog in contrast zodat de tekst goed leesbaar is met de kleurachtergrond die je gebruikt?
  • Maak gebruik van hooguit twee verschillende lettertypes die elkaar complimenteren. Gebruik een lettertype voor de kopjes en een ander lettertype voor de body tekst. Geef de voorkeur aan serif en sans-serif lettertypes.
  • Lees ook: Versterk je merkidentiteit door gebruik van het juiste lettertype.

Let op de laadtijd van je blog

Negen van de tien keer zijn afbeeldingen de boosdoener voor het traag laden van een website. Regelmatig zie ik afbeeldingen voorbij komen die zelfs met mijn razendsnelle internetverbinding, moeite hebben om volledig te laden. Als ik dan even de afbeeldingsinfo bekijk dan weet ik het al. Ik zie een foto van gemiddeld 3mb en een afmeting van 3000px breed! Je foto wordt wel geladen maar nooit weergegeven in dat formaat omdat ze in hetzelfde vak staan als je tekst en hieraan is vaak een maximale breedte aan gegeven. En die breedte is geen 3000px omdat er vrijwel geen beeldschermen zijn die dat kunnen weergeven. Dus het zonde van je schrijfruimte, bandbreedte maar ook voor de bezoeker want als zij moeten wachten op een website die langzaam geladen wordt, dan haken ze veel sneller af.

Werk aan het optimaliseren van je afbeeldingen om de laadtijd te verbeteren. Je bezoekers blij, je host blij en jij uiteindelijk ook want je hoeft geen groter hostingpakket te nemen.

Andere aspecten die de laadtijd van je blog beïnvloeden zijn animaties, muziek, flash en veel advertenties die gebruik maken van javascript. Wanneer een blog gebruik maakt van muziek, haak ik gelijk af. Het is niet alleen vervelend, heeft effect op de laadtijd maar ik word gedwongen om naar iets te luisteren wat ik helemaal niet wil. Wil je toch gebruik maken van muziek, zorg dan voor een stop en play button zodat bezoekers altijd kunnen beslissen om muziek aan of uit te zetten.

Checklist

  • Optimaliseer je afbeeldingen voor gebruik op het web. Hou rekening met een gemiddelde van 100kb-200kb per foto.
  • Foto’s die 3000px breed zijn is nergens voor nodig. Maak ze dan automatisch kleiner door de plugin Imsanity.
  • Wil je weten welk formaat het beste is voor jouw design? Klik met de rechtermuisknop op een foto en kies voor Afbeeldingsinfo bekijken. Je ziet dan dat de foto geschaald is naar een bepaald formaat. De foto hoeft dus niet groter te zijn dan het formaat waarnaar het geschaald is. Wil je rekening houden met een toekomstig blogdesign dat de foto’s groter weergeeft? Ga dan niet te klein zitten met je foto’s. Gemiddeld hou ik mijn afbeeldingen tussen de 800px en 1024px breed. Groter dan 1024px heb je vrijwel niet nodig.
  • Lees ook: 5 tips om de laadtijd van je blog te verlagen.

Hou de aandacht van je bezoekers vast

Ben jij bekend met SEO? Heb je weleens van bounce-rate gehoord? Zo niet, kort gezegd is dat het percentage van bezoekers dat niet verder klikken op je website en dus gelijk jouw blog weer verlaten. Het is de kunst van het bloggen en een goed blogdesign om de aandacht van deze bezoekers langer vast te houden. Dit kan je op verschillende manieren doen, onder andere door het toevoegen van gerelateerde artikelen onder ieder blogartikel (net zoals op mijn blog). Of een widget installeren met daarin een aantal populaire artikelen zodat nieuwe bezoekers die ook kunnen ontdekken. In mijn thema heb ik deze allemaal zelf gecodeerd maar er zijn genoeg plugins hiervoor te vinden die je kan installeren. Zo heeft WordPress zelf een Populaire Post widget en Jetpack de functie om gerelateerde artikelen te laten weergeven.

Checklist

  • Licht populaire artikelen uit in de zijbalk.
  • Maak gebruik van gerelateerde artikelen.
  • Wil je interactie of een discussie in de comments? Stel dan een vraag bij ieder artikel.
  • Reageer op comments van bezoekers en installeer de plugin Comment Reply Notification zodat ze hier melding van krijgen.

Schoon je blogdesign op

Als laatste kan ik je nog 3 tips geven om je blogdesign op te schonen. Denk hierbij aan het verwijderen van onnodige drukte en widgets en maak gebruik van genoeg witruimtes om rust te creëren in je design. Drie simpele oplossingen om ervoor te zorgen dat je blogdesign professionaliteit en rust uitstraalt.

Dat zijn mijn simpele tips om zelf een mooi blogdesign neer te zetten. Natuurlijk gaat dit gepaard met het gebruik van de juiste coderingen maar omdat ik dit niet te technisch wilde maken, kan je met deze tips hopelijk ook goed uit te voeten. Als je zelf nog tips hebt dan hoor ik ze graag!

Geef een reactie

Één reactie

  1. Wat een ontzettend fijn artikel! Ik ben zelf regelmatig bezig met het doorlopen en controleren van mijn blog. Het enige wat ik zelf nog wel graag zou willen, zijn de social media iconen onder elke blogposts. Zou jij misschien weten hoe ik dat kan krijgen? 🙂