Hoe je een goede portalpagina bouwt voor je InSite of OutSite (3)

Deel 3: 5 tips van de marketingafdeling van AFAS

In deel 1 en 2 van ‘Hoe je een goede portalpagina bouwt voor je InSite of OutSite’ heb je al 10 tips kunnen lezen om een goede portalpagina op te bouwen. Van het uitdenken van de informatie op je pagina tot het gebruik van afbeeldingen. Dit artikel gaat hier verder op door met weer 5 nieuwe tips!

Tip 1: Durf jij een groter lopend lettertype aan?

Je lopende lettertype is het lettertype dat in documenten, nieuwsberichten en andere standaard teksten terugkomt.

Vroeger was een lopend lettertype van 10, 12 px heel normaal. Alleen is dit de laatste jaren flink veranderd. Dat komt zeker niet door de vergrijzing. Beeldschermen worden groter, maar ook vooral de schermresolutie wordt groter. Vaak is de afstand van de persoon tot het scherm dan niet meer in verhouding bij een klein lettertype. Nu de 4k beeldresolutie in opkomst is, zal deze trend zich alleen nog maar voortzetten. 

Scrollen wordt daarentegen ook steeds minder erg. Door de opkomst van internetten op je smartphone of tablet is men dit in zekere zin al gewend. Sterker nog, al je informatie op één klein stukje zetten is juist heel vervelend. Is de grootte van je lettertype nog kleiner dan 14px? Dan moet je toch eens sterk overwegen er wat aan te doen.

Wat moet het dan wel zijn?

Er spelen altijd meerdere factoren mee. Doe je dit bijvoorbeeld voor InSite of OutSite? Maar vooral, welke tekst maak je groter? Er zit natuurlijk een groot verschil tussen koppen en je lopende lettertype. Het lopende lettertype is het grootste deel van je website, dus deze wil je ook niet overdrijven. Toch durven wij wel te stellen dat 15px het minimale is om te gebruiken. Diverse blogsites gaan tegenwoordig zelfs voor een lopend lettertype van 20px of meer.

Ga gewoon testen!

Ik beloof je, de eerste keer is het heel eng om je lettertype te vergroten. Gelukkig kan je dit in het thema testen zonder dat iemand er last van heeft. En het mooiste is nog: het kost je nog geen 5 minuten.

Maak een screenshot van hoe je site er na de aanpassing uitziet en houd deze naast je huidige site. Laat het ook vooral even aan anderen zien. Ik weet zeker dat je voor een groter lettertype zult kiezen!

Tip 2: Zorg voor een goede regelhoogte

Ga je de grootte van het lettertype aanpassen? Dan mag je de regelhoogte absoluut niet vergeten om ook aan te passen. Er moet een goede balans zitten tussen de grootte van je lettertype en de regelhoogte daartussen.

Je regelhoogte is minimaal 1,5 keer je lettergrootte. Dat is makkelijk te onthouden. Kom je op een kommagetal uit? Rond vooral naar boven af. Als je echt naar grotere lettergroottes gaat kijken (boven de 20px), dan zal deze verhouding lager uit kunnen pakken. Nogmaals: test het en oordeel zelf!

Tip 3: Kies het juiste lettertype

Als je dan toch bezig bent met je teksten beter leesbaar maken, dan kan je ook nadenken over het lettertype dat je nu gebruikt. Bij veel organisaties is deze in de huisstijl vastgelegd. Hanteer je deze? Dan kan je alvast naar de volgende tip gaan.

Ga je voor mooi of leesbaar?

Stel: je werkt bij een museum. Het museum gaat over het oude Egypte. Het museum is helemaal in deze sferen ingericht. Zelfs het lettertype wat je nu gebruikt is gebaseerd op die tijd. Dan hoop ik dat je deze niet als lopend lettertype ingesteld hebt. In de koppen kan je deze prima gebruiken. Een grote kans dat dit ook niet het geval is bij jou, anders is er werk aan de winkel.

Het lopende lettertype moet zo goed mogelijk leesbaar zijn. Anders heb je een grote kans dat mensen jou teksten niet (goed) lezen.

Er zijn heel wat lettertypes standaard beschikbaar in InSite & OutSite. Wij zouden één van onderstaande lettertypes aanraden:

  • Arial
  • Noto Sans
  • Nunito
  • Open Sans
  • Roboto
  • Source Sans Pro

Tip 4: Zorg dat iemand scannend kan lezen

Hoe kijk jij zelf naar een website? Ik betwijfel of je elke letter zal lezen. Grote kans dat je in deze blog ook al wat teksten overgeslagen hebt. Dat is ook helemaal niet erg, want de meeste websitebouwers haken daar slim op in. De onderwerpen waar jij meer over wil lezen pak je er snel uit doordat er een kop boven staat die je aandacht trekt. Dat is dus precies hetgeen waar jij ook op moet inhaken.

Een voorbeeld uit eigen kweek

Neem onderstaand voorbeeld van onze pagina over CRM op AFAS.nl. Wij verwachten zelf niet dat men hier alles gaat lezen. Als je even scannend wil lezen zal je de grote kop lezen, ‘CRM en Dossiers’, ‘CRM en de Portal’ en de vinkjes bekijken. Spreekt het je aan? Dan zal je ook de rest lezen. Spreekt het je niet aan? Dan scroll je snel verder. We willen je namelijk de informatie laten vinden die je zoekt. En dat moet niet teveel moeite kosten. Dit kan wanneer je scannend kunt lezen. Hier kan jij dus ook op inhaken.

Voorbeeld website AFAS
Mensen houden van opsommingen
  • Opsommingen vallen op
  • Een opsomming is vaak heel concreet
  • Jij wist natuurlijk al dat je een opsommingsteken ook kan stijlen, zoals besproken in deel 1

Tip 5: Werken met meerdere achtergronden

In deel 1 vertelde ik je al hoe je kan werken met volledige breedte. Sinds Profit 5 zijn daar nieuwe mogelijkheden bij gekomen. Je kunt nu op een mooiere manier met meerdere achtergronden werken.

Let op: je moet in de eigenschappen eerst het vinkje ‘volledige breedte toepassen’ aanvinken voordat je onderstaand voorbeeld kunt naspelen.

De achtergrond die op het eerste blok staat in je sectierij gaat over de hele breedte. Alle achtergronden die je daarna toevoegt blijven binnen de ruimte die jouw inhoudsblok ter beschikking heeft. Dit klinkt misschien nog wat vaag, maar kijk daarom goed naar onderstaande animatie.

Werken met volledige breedte

Je ziet één sectierij met daarin drie secties. In de middelste sectie zijn 3 inhoudsblokken toegevoegd. Het bovenste inhoudsblok heeft een vaste hoogte van 75px en bevat de achtergrondfoto die over de hele breedte gaat. Het tweede inhoudsblok heeft een achtergrondafbeelding van een wit blokje met een doorzichtigheid van 10%. Deze afbeelding blijft binnen het inhoudsblok, omdat alleen de eerste achtergrondafbeelding over de hele breedte gaat. De opbouw van dit blok is in onderstaande afbeelding nader toegelicht.

Zo werkt het

Of bekijk onderstaande video.


Meer weten?

Tot zover deel 3 van de reeks ‘Hoe je een goede portalpagina bouwt voor je InSite of OutSite’. Kijk ook zeker naar deel 1 en deel 2 van deze blogreeks!

Tijdens de Dag van de AFAS beheerder hebben mijn collega Rik ten Wolde en ik een groot aantal van deze tips ook mogen presenteren. Zijn de tips dus nog niet helemaal duidelijk? Kan dan zeker onderstaande video even terug!