Hoe je een goede portalpagina bouwt voor je InSite of OutSite

Deel 1 - 6 tips van de marketingafdeling bij AFAS om de vorm van je portalpagina’s te stylen en daarmee functioneler te maken!

Een portalpagina in InSite of Outsite biedt je meer mogelijkheden om een pagina op te maken en door de vrije indeling er ook écht iets moois van te maken. Maar waarom is die vorm belangrijk? Gaat het er niet om wat er op de pagina staat? En hoe doe ik dat dan?

Natúúrlijk is de inhoud belangrijk. Maar als niemand deze leest en daardoor bijvoorbeeld niet de actie onderneemt die jij graag wil bereiken met deze pagina, dan schiet je je doel voorbij. Een goede opmaak van je pagina kan je helpen om je doelen te halen. Hoe iets eruit ziet is namelijk erg belangrijk voor de functie van de pagina; hoe je website, portal of intranet wérkt. Of hoe Steve Jobs het ooit uitdrukte: “Design is not just what it looks like and feels like. Design is how it works.”

Uiteraard is AFAS zelf haar meest intensieve gebruiker als het gaat om het gebruik van InSite en OutSite. Zo zijn de volledige website, de klantportal en het intranet opgebouwd met OutSite en Insite. In de jaren dat we hiermee werken, hebben we natuurlijk veel geleerd; kennis die we graag met je delen!

Doorgaans zijn de belangrijkste (statische) pagina’s van je OutSite of Insite, zoals je startpagina of landingspagina’s, portalpagina’s. In dit artikel geven we met een esthetische blik een aantal tips gegeven om portalpagina op te bouwen.


1. Breng structuur aan

Nog voordat je begint met het bouwen van een portalpagina is het van belang dat je nadenkt over de structuur van de pagina. Je wil dat je pagina logisch in elkaar zit en dat deze prettig leesbaar is. Daarnaast wil je de belangrijkste inhoud meestal bovenaan hebben. 

Teken je pagina van te voren uit

Voordat je aan het bouwen van een portalpagina begint is het van belang om deze eerst goed uit te denken in een zogeheten wireframe. Dit doe je door deze bijvoorbeeld op een whiteboard te tekenen of in online wireframe builder te bouwen. Dit kost je doorgaans minder tijd dan wanneer je zomaar wat gaat doen, doordat je de pagina niet meerdere keren hoeft om te bouwen.

Voorbeeld 1: jaarverslag AFAS 2016

Van tekening naar realisatie jaarverslag AFAS 2016

Links: het uitgetekende ontwerp. Rechts: de uiteindelijke realisatie.

Voorbeeld 2: eerste wireframe Succesbeheer

Eerste wireframe Succesbeheer

De eerste wireframe voor de homepagina van Succesbeheer, gebouwd in Realtimeboard.

Het verschil tussen secties, indeling en inhoud

Wanneer je je schets klaar hebt, begin je met bouwen. De structuur die je opgebouwd hebt vertaal je dan door in je portalpagina. Deze structuur verwerk je in secties. Via indeling kun je vervolgens elementen, zoals een titel, tekst met opmaak, weergave of plug-in toevoegen aan je secties. Als laatste kun je via inhoud teksten toevoegen aan je inhoudsblokken.

Het verschil tussen sectie, indeling en inhoud

2. Werk met marges

Veel mensen zijn geneigd om op het web te werken met (te) weinig witruimte. Het werken met marges is essentieel om de inhoud van je pagina goed leesbaar te maken. De kunst is om je inhoud genoeg ‘lucht’ te geven zodat deze goed leesbaar is. Je kunt tussen 2 tekstblokken die onder elkaar staan al snel 25 tot 75px marge toevoegen. Op AFAS.nl hanteren wij bijvoorbeeld 75px marge. De eerste keer is dit wat eng, maar ik verzeker je dat je later niet anders gewend bent. 

Het belang van marges komt duidelijk naar voren wanneer je alle marges weghaalt op de Succesbeheer homepage. Wat vind jij prettiger: de variant met of zonder marges?

Succesbeheer: met of zonder marges
Marge op de sectie of het element zelf?

Je kunt zowel op de sectie als op een element zelf marges toevoegen. Voor je eigen overzicht werkt het prettig als je hier consistent in bent. Voor de werking van de pagina maakt het niet uit.

Let op met mobiel!

In de mobiele weergave worden marges niet overgenomen. Wil je dus per se ruimte toevoegen? Maak dan gebruik van een inhoudsblok met een vaste hoogte (die je eventueel alleen toont op mobiel).

Werken met 'vaste' marges

Een evenwichtig en rustig design werkt mee aan de leesbaarheid. Hierbij helpt het om vaste marges te hanteren. Gebruik bijvoorbeeld voor alle onderdelen standaard 20px marge aan de onder- en bovenkant en 30px marge aan de zijkanten.

Wanneer je 2 of 3 elementen naast elkaar wilt tonen en evenveel marge wil houden maak dan een berekening van de marges, waarbij tussen de blokken de marges links en rechts ‘opknipt’. Ook hier is het belangrijk om dit van te voren te bedenken! 

Werken met marges en meerdere blokken - schets

3. Gebruik van afbeeldingen

Heb je een aantal foto’s doorgestuurd gekregen van een fotograaf en wil je deze publiceren? Houd er dan rekening mee dat deze foto’s invloed hebben op de laadtijd van je pagina. Ook is het zo dat wanneer je met je mobiele abonnement deze pagina laadt het aardig hard zal gaan met je MB's… en nog niet iedereen heeft een unlimited abonnement. Je kunt de bestandsgrootte van een foto simpel controleren door de eigenschappen van het bestand te bekijken. Is een foto groter dan één MB? Dan kan deze sowieso verkleind worden. Hoe? Dat lees je hieronder.

Resolutie

De eerste winst die je kan pakken is de resolutie verkleinen. Heb je bijvoorbeeld een blok van 300pixels? Gebruik dan geen afbeelding van 1000px breed die verkleind wordt naar 300px. Een afbeelding van 300px is aanzienlijk kleiner. Met gratis programma’s zoals Paint.net kun je dit makkelijk aanpassen. Het recent gelanceerde Squoosh (van Google) kan je hier ook bij helpen en is tevens gratis.

JPG of PNG?

JPG en PNG zijn veelgebruikte bestandsextensies op het web. Maar wat is het verschil en wanneer gebruik je de één en wanneer de ander?

JPG gebruik je voornamelijk voor foto’s en afbeeldingen waar veel gradatie in de kleuren zit. De compressie van JPG zorgt er dan voor dat deze afbeeldingen klein kunnen blijven. JPG ondersteunt geen transparantie.

PNG is er vooral voor effen kleurvlakken en afbeeldingen die op een computer zijn gemaakt (zoals iconen en screenshots). De kwaliteit van PNG blijft dan mooier en bovendien kun je met transparantie werken.

Kwaliteit

Ook de kwaliteit van de foto heeft invloed op de bestandsgrootte. Een full HD foto is groter dan een plat vector plaatje. Een handige tool die je kan gebruiken om je afbeeldingen te verkleinen zonder dat de kwaliteit veel achteruit gaat is TinyPNG (voor zowel JPG als PNG te gebruiken).

Op de marketingafdeling bij AFAS streven we er naar om afbeeldingen niet groter te maken dan 500kb voor op www.afas.nl.

Werk je aan SEO?

Als je je pagina ook nog goed vindbaar wilt maken voor de zoekmachines, moet je ook goed omgaan met je afbeeldingen. Je bent nog niet klaar bij het verkleinen van je afbeelding. Het is ook nog zaak om een goede bestandsnaam aan je afbeelding mee te geven en de omschrijving (alt-tekst) te vullen.

In de eigenschappen van de afbeelding kun je een omschrijving (alt-tekst) toevoegen


4. Werken met volledige breedte

Achtergronden of achtergrondkleuren kan je laten doorlopen over de hele achtergrond. Je kunt het gebruiken om je portalpagina nog mooier te maken. Standaard heb je de beschikking over een vaste breedte op je website, tenzij je volledige breedte ingesteld hebt in de lay-out. Gelukkig hoef je niet heel je site op volledige breedte te zetten om volledige breedte toe te passen.

Doorgaans is de standaardbreedte 1000 pixels. Ook al staat je site niet op maximale breedte, kun je dit op individuele pagina’s toepassen via de eigenschappen van een pagina. Let er hierbij op dat je ook kiest voor ‘Maximale breedte’ bij Lay-out in de eigenschappen van de pagina.

Secties

Het goed werken met secties wordt extra belangrijk wanneer je met achtergronden gaat werken. De eerste achtergrondkleur of achtergrondafbeelding die je instelt (mits je het vinkje 'volledige breedte' aan hebt staan) gaat over de hele breedte. Let er dus goed op dat je een aparte sectie aanmaakt wanneer je aan de slag gaat met een achtergrond.

Let op met mobiele weergave!

Bij het gebruik van afbeeldingen zal je moeten controleren of dit op mobiel gaat zoals jij het voor ogen had. Zet daarom de 'afbeeldingsgrootte' op 'Volledig overlappen'. Dan zal jouw afbeelding altijd de volledig beschikbare ruimte opvullen. 

Een voorbeeld

Bekijk de video en ontdek hoe je met achtergrondafbeeldingen te werk gaat.

PS: zet je geluid aan.


5. Denk aan je URL

Vanuit Profit heb je de mogelijkheid om een vriendelijke URL te maken. Automatisch wordt eerst de naam van het documentsjabloon en vervolgens de titel die je aan de pagina meegeeft overgenomen in de URL.

Aan de hand van een voorbeeld

De titel van onze sponsorpagina over AFAS Live heeft bijvoorbeeld de titel ‘AFAS Live – Live will never be the same’. Dit resulteerde in de volgende URL: www.afas.nl/portal-bedrijfspagina/afas-live-live-will-never-be-the-same. Nu is dit wel een erg lange URL, dus hebben wij deze met een vriendelijke URL aangepast naar www.afas.nl/sponsoring/afas-live.

Let op bij je OutSite

Verander je de URL van een pagina die al wat langer bestaat? Dan is de kans groot dat deze geïndexeerd is door een zoekmachine. Zorg dan dat je ook een niet-werkende URL doorverwijzing maakt van de oude URL naar de pagina.

Voorbeeld URL doorverwijzing AFAS Live

Je vindt URL-doorverwijzingen onder Algemeen / In & OutSite / Site. Kies de site waar het om gaat en ga naar het tabblad URL-doorverwijzing.


6. En nog één extraatje: opmaak van de opsomming

Voorbeeld opsomming opmaak

Wellicht bij zeer weinig mensen bekend, maar wel een leuke functionaliteit. Wanneer je een opsomming maakt kun je de opsomming een andere lay-out meegeven. Klik met je rechtermuisknop op een opsomming en ontdek het zelf.

Heb je niet genoeg aan de afbeeldingen die we al hebben meegeleverd? Vervang deze afbeeldingen dan zelf bij de afbeeldingen van het thema. Zo heb je volledige vrijheid bij het maken van je opsomming!

Opsommingsteken zelf aanpassen



We hopen dat je wat hebt aan deze tips om de portalpagina's op je InSite of OutSite te verbeteren. Want van mooie dingen worden medewerkers, klanten (en wij als AFAS) blij! 

PS: Deel 2 en deel 3 zijn ook beschikbaar!