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

1. Hoe breed maak ik mijn InSite en OutSite?

Je kunt je InSite en OutSite een vaste breedte meegeven. Binnen deze breedte wordt als je content geplaatst. In hoe breed je dit maakt zit eigenlijk geen goed of fout, maar kunnen we je alleen maar een aantal dingen aanraden. Ook is het goed om te weten dat je je site voor verschillende doelgroepen maakt, met verschillende behoeftes.

Hoe breed maak ik mijn insite of outsite

InSite – aan te raden breedte: 1.500px

Je wilt zo veel mogelijk informatie kunnen tonen op een pagina voor bijvoorbeeld weergaven en facturen, maar je wilt je InSite ook voor iedereen toegankelijk houden. Dan is een breedte rond de 1.500px ideaal, mits je je binnen een kantooromgeving bevindt. De breedte houdt namelijk rekening met de meest gebruikte schermresoluties in een kantooromgeving. Werkt iedereen bij jou op kantoor met een monitor? Dan is de kans zeer groot dat de schermresolutie ingesteld is op Full HD (1920x1080). Ook voor veel voorkomende resoluties zoals 1536x864 en 1680x1050 past een InSite van 1.500px breed prima.

Werken de meeste gebruikers in jouw organisatie niet via een desktop of laptop? Onderzoek dan eens de meest gebruikte schermresolutie in de organisatie. En kijk dan eens goed naar de mobiele versie van je InSite. Is alle belangrijke informatie goed toegankelijk?

OutSite - aan te raden breedte: 1.200 px

Je OutSite heeft hele andere doelstellingen dat je InSite. Hier staan bijvoorbeeld je vacatures op, of dit is de plek waar je in contact komt met nieuwe klanten. Maar belangrijker voor de breedte van de site: het is niet meer te voorspellen met welke schermresolutie mensen je website bezoeken. Daar moet je rekening mee houden in de breedte van je site. Met een breedte van 1.200px kan jij hele mooie websites bouwen, maar houd je uitstekend rekening met vrijwel alle schermresoluties op een desktop.

Voor je OutSite is een goede mobiele versie van je site nóg belangrijker dan voor je InSite. De kans is groot dat je werken-bij site bezocht wordt via de mobiele telefoon. Straalt je OutSite op mobiel uit wat jij voor ogen had?

Goed om te weten: Wanneer iemands schermresolutie onder de 1.025px breed komt, springt InSite & OutSite automatisch over naar de mobiele versie

2. Visueel een status meegeven aan je weergave

Wellicht heb je het al vaker gezien in demo’s van AFAS zelf: een gekleurd lijntje bij een weergave wat iets over de status zegt. Dit kun je eenvoudig zelf vormgeven. Je hebt alleen je creativiteit en een dun lijntje met de juiste kleur nodig!

Voorbeeld: goedgekeurde declaraties

In dit voorbeeld zie je een groen lijntje voor de weergave van goedgekeurde declaraties staan. Handig toch? Maar hoe maak je dit? De truc zit hem in het gebruik van een afbeelding.

Afbeelding maken. Maak een plaatje van 1px (hoog) bij 5px (breed) met de gewenste kleur. In dit voorbeeld heb ik groen lijntje gemaakt (zie voorbeeld).
Achtergrondafbeelding instellen. Stel de afbeelding op je weergave in als achtergrondafbeelding. Hierbij is het belangrijk dat je de achtergrond uitlijning en – herhaling goed instelt. Door deze links uit te lijnen en verticaal te herhalen, maak je een lijntje dat altijd de volledige hoogte benut. Dus of er nu 2 of 5 dossieritems in je weergave staan, geen probleem!

Goed om te weten: maak je gebruik van een achtergrond over de volledige breedte op de pagina? Dan moet je mogelijk eerst een blok met een achtergrondkleur toevoegen. Anders zal je resultaat er anders uit komen te zien. Niet bekend met achtergrondafbeeldingen over de hele breedte? Lees meer.

Marge instellen. Stel een marge links in van minimaal 20px. Zo voorkom je dat het groene lijntje door je tekst heen gaat. Het geeft een mooi effect als je de marge ook boven & onder instelt. Dit zie je ook terugkomen in het voorbeeld.

Liever een gekleurd lijntje boven je weergave? Maak dan een tekstblok aan met een vaste hoogte van 5px en geef deze de gewenste achtergrondkleur.

Om je vast op weg te helpen: groen, oranje, blauw & rood

Download hieronder een groen, oranje, blauw of rood lijntje om direct te gebruiken op jouw InSite of OutSite!

Tip: zoom in zodra je de link opent. De afbeelding is erg klein, dus mogelijk zie je hem niet direct. Door in te zoomen kan je de afbeelding opslaan. Zet deze vervolgens in de mediagalerij van je site. Dan kan je er altijd gebruik van maken.

3. Creatief met weergavesjablonen

Eerder heb je op Succesbeheer de blog ‘Aan de slag met de nieuwe weergavesjablonen’ kunnen lezen. Je kunt weergavesjablonen gebruiken voor bijvoorbeeld nieuwsweergaven of de wie-is-wie, maar er zijn nog diverse andere creatieve toepassingen. Hoe creatief gebruik jij weergavesjablonen? Ook wij hebben er meer ervaring mee opgedaan. We delen graag een aantal voorbeelden met je.

Inschrijven voor een cursus of evenement? Weergavesjabloon!

Maak je (intensief) gebruik van cursusmanagement? Dan is belangrijk dat men zich zo makkelijk mogelijk kan inschrijven. Met een weergavesjabloon kan je deze helemaal in je huisstijl weergeven.

En bijkomend voordeel: je kunt de inschrijfoptie nu op iedere pagina terug laten komen. Je wordt niet beperkt tot het document wat je aanmaakt voor je evenement.

Een directe evenementinschrijving terug laten komen op een portalpagina? Maak dan eerst een evenement of cursus aan zoals je gewend bent. Vervolgens maak je een nieuwe weergave op basis van de overzichtspagina met al je evenementen op sessieniveau. Plaats hier een filter en jouw toffe weergavesjabloon op, en je kunt je direct inschrijven!

In dit voorbeeld van de AFAS Open is gebruik gemaakt van een achtergrondafbeelding, de naam van het evenement, de datum met een icoontje en een afbeelding van een button met inschrijven erop.

Beperkte breedte? Staat het in een weergave? Weergavesjabloon to the rescue!

Wil je bepaalde informatie samenbrengen, maar niet je halve pagina kwijt zijn aan tabellen? Gebruik weergavesjablonen! In SIMPLR brengen we bijvoorbeeld de voor ons belangrijke informatie van de projecten stamkaart overzichtelijk samen met weergavesjablonen.

Inrichting weergavesjabloon

Praktijk weergavesjabloon

Alle tips op een rijtje

In deze blogserie heb je tot nu toe 23 tips langs zien komen om je portalpagina te stylen. Heb je er één gemist? Je vindt hieronder het complete overzicht.