Natúúrlijk is de inhoud belangrijk. Maar als niemand de inhoud leest en bijvoorbeeld niet de gewenste acties onderneemt die je met deze pagina wilt bereiken, dan mis je je doel. Een goede opmaak van je pagina helpt je om je doelen te realiseren. Het uiterlijk van een pagina is namelijk erg belangrijk voor de functionaliteit; hoe je website, portal of intranet functioneert. Zoals Steve Jobs ooit zei: "Design is not just what it looks like and feels like. Design is how it works."
AFAS is uiteraard zelf een zeer intensieve gebruiker als het gaat om het gebruik van InSite en OutSite. Onze volledige website, klantportal en intranet zijn opgebouwd met OutSite en InSite. Door de jaren heen hebben we veel geleerd, en die kennis delen we graag met je!
De meeste belangrijke (statische) pagina's van je OutSite of InSite, zoals je startpagina of landingspagina's, zijn portalpagina's. In dit artikel delen we vanuit enkele tips om je portalpagina op te bouwen en vorm te geven.
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.
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. Dit kan je doen in 3 stappen:
Voorbeeld 1: jaarverslag AFAS
Links: het uitgetekende ontwerp. Rechts: de uiteindelijke realisatie.
Voorbeeld 2: eerste wireframe Succesbeheer
De eerste wireframe voor de homepagina van Succesbeheer, gebouwd in Realtimeboard.
Moet je een pagina bouwen waar een andere afdeling voor verantwoordelijk is? Dan is het verstandig om samen met je collega de inhoud van de pagina uit te denken. Wanneer je gelijk begint met bouwen, moet je mogelijk nog de nodige correcties doorvoeren. Je maakt al keuzes voor opmaak en teksten. Zonde om dit achteraf te moeten aanpassen, toch?
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 is belangrijk om dus eerst je structuur neer te zetten waar je vervolgens je inhoud aan kan toevoegen. Je vindt hieronder een drietal screenshots waar je het verschil van secties, indeling en inhoud goed kan zien. Wil je links een tekst en rechts een plaatje? Dan moet je dat eerst mogelijk maken via secties.
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 een pagina. Wat vind jij prettiger: de variant met of zonder marges?
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.
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). Wij raden je sowieso aan om je website regelmatig te controleren op de mobiele weergave. Ook jij doet ongetwijfeld veel via je mobiel op het web. Jouw websitebezoeker doet dat dus ook.
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 tevoren te bedenken!
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.
De eerste winst die je kan pakken is de resolutie verkleinen. Heb je bijvoorbeeld een blok van 300px? Gebruik dan geen afbeelding van 1.000px breed die verkleind wordt naar 300px. Een afbeelding van 300px is aanzienlijk kleiner.
JPG en PNG zijn veelgebruikte bestandsextensies op het web. Maar wat is het verschil en wanneer gebruik je de één en wanneer de ander?
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.
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
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, maar niet als 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.
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.
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.
Bekijk de video en ontdek hoe je met achtergrondafbeeldingen te werk gaat.
PS: zet je geluid aan.
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.
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.
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.
Een functie die bij weinig mensen bekend is, maar wel een leuke functionaliteit.
Wanneer je een opsomming maakt kun je het opsommingsteken een andere lay-out meegeven. Klik met je rechtermuisknop op een opsomming en ontdek het zelf.
Heb je niet genoeg aan de afbeeldingen die AFAS standaard meelevert? Vervang deze afbeeldingen dan zelf onder afbeeldingen in je thema. Zo heb je volledige vrijheid bij het maken van je opsomming!