Minimale online huisstijl
Minimale vormgevingseisen voor provinciale websites.
Minimale vormgevingseisen voor provinciale websites:
Basis
Beschrijving van de huisstijl voor basiselementen
Kwaliteits-eisen provinciale huisstijl
- Voldoen aan door 'Digitale Toegankelijkheid' (EN 301 549 met daarin opgenomen WCAG 2.1).
- Meetbaar
- Responsive
- Veilig
- Vindbaar
Kleurgebruik
De vaste online huisstijl kleuren van provincie Brabant zijn rood (#DD0000) en donkergrijs (#666666) gecombineerd met wit (#FFFFFF) en een scala aan grijstinten.
Webrichtlijn contrast
De gebruikte kleur rood in de content wijkt iets af van de huisstijl kleur om te kunnen voldoen aan de overheidsrichtlijnen voor contrast en
leesbaarheid.
Huisstijl kleuren
Voorbeelden van gebruik van de vaste rode kleur:
Grijstinten
Scale van grijstinten als achtergrond voor tekst
Steun kleuren
Binnen provinciale websites zijn ook steunkleuren te gebruiken ter versterking van een specifieke uitstraling.
Kleurverlopen
Gerelateerdeerd informatie - 'knoppen' - aan de rechterzijde is vormgegeven met een licht kleurverloop
Typografie
Het lettertype binnen de site is 'Arial' en de weergave van normale tekst is in 12 px met een interlinie van 18 px.
Webrichtlijn typografie
Tekst is schaalbaar.
Koppen (headings)
Door gebruik van de juiste heading-elementen in een pagina is de structuur eenvoudiger uit de pagina af te leiden.'
Bezoekers krijgen met een eenvoudige zoekopdracht naar de headings op een pagina een snel overzicht van de inhoud. Dit ijkpunt zorgt voor een drempelvrij en seo-vriendelijk gebruik van de headings elementen. Met bepaalde hulpsoftware kan de bezoeker via de headings-koppen door een pagina lopen en bepalen welke informatie relevant is. Alle headings-elementen zijn vertegenwoordigt.
Voorbeelden
Titel van de webpagina
Subtitel van panel of een paragraaf op een webpagina
Subtitels in overzichtslijst
H1. Futura, 22 px, #DD0000, Bold
H2. Futura, 20 px, #DD0000, Bold
H3. Futura, 18 px, #333333, Bold
H4. Futura, 16 px, #333333, Bold
H5. Futura, 14 px, #333333, Bold
H2. Futura, 12 px, #333333, Bold
Body tekst
Het lettertype van de normale tekst is 'Arial' in 12 px met een interlinie van 18 px.
De standaard waarde voor "medium-text" font-weergave in elke moderne browser is 16px. En de
eerste stap om deze waarde te verlagen voor de hele website is door de body-tag te voorzien van
een font-size van 12 / 16 = 0.75 em. De standaard grootte verandert hiermee in 12px.
Er zijn 2 soorten paragraaf-titels:
- Artikel-paragraaf-titel op een zogenaamde detailpagina
- Onderwerp-paragraaf-titel op een zogenaamde onderwerppagina
Voorbeeld artikel-paragraaf-titel(detailpagina)
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Voorbeeld onderwerp-paragraaf-titel (onderwerppagina)
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non
metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
elit. Donec ullamcorper nulla non metus auctor fringilla.
Body tekst intro
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Lijsten
Codeer lijststructuur en lijstelementen met HTML-lijstelementen dl, ul en ol. Hierdoor zijn lijsten en lijstelementen inzichtelijker voor de lezer.
NOOT: gebruik deze alleen voor het maken van lijsten en niet voor formatteringseffecten, zoals inspringen.
Binnen brabant.nl en Brain zijn 2 type buttons beschikbaar. namelijk:
btn--default
voor normaal (default) gebruik
btn--dark
voor formulieren, omdat deze een achtergrond kleur hebben.
De buttons hebben allemaal dezelfde hoogte en de inhoud bepaald de breedte van de button.
door 'Digitale Toegankelijkheid' (EN 301 549 met daarin opgenomen WCAG 2.1).: 2 buttons
Niet alle onderdelen van een formulier krijgen een naam via expliciete associatie van een label of een title attribuut.
- het value-attribuut geeft een naam aan Submit, Reset en Button (input type="button") knoppen
- het alt attribuut geeft een naam aan image buttons
- bij button elementen wordt de naam tussen de
<button>
tags geboden.
Het is beter om geen reset knop te gebruiken bij een formulier. Het per ongeluk activeren van een reset knop kan namelijk als consequentie hebben dat de gebruiker al haar ingevulde gegevens verliest.
Gebruik de beschikbare classes om een button stijlen.
Gebruik de .btn
op <a>
, <button>
, or <input>
elementen.
Layout
Beschrijft de visuele plaatsing van pagina-elementen in het browservenster.
Vaste navigatie balk - positie boven header
Deze navigatie-mogelijk biedt extra vaste navigatie functies voor de gehele website en is optioneel
De marges links en rechts bedragen 8 px en er zijn maximaal 4 navigatie-elementen aan de linkerzijde en aan de rechterzijde. Deze elementen zijn visuel gescheiden met een horizontaal scheidingsteken. De mouse-over heeft een underscore in dezelfde kleur als de gebruikte typografie met een achtgrondkleur(#5d5d5d).
Webrichtlijn: toon een tooltip met extra informatie over wat de link onder het navigatie-element doet
En er zijn verschillende headermogelijkheden: Standaard, Webapplicatie en Webapllicatie Breed.
De header bestaat uit de volgende vaste onderdelen:
- Logo van Provincie Brabant
- Site naam
Logo en sitenaam
Een Header bestaat uit de vaste elementen "Logo" en "Site naam"
- Logo = het provinciale balkje. De positie van het logo is altijd horizontaal in de linker bovenhoek met een afstand tussen het balkje en de bovenzijde die gelijk is aan de hoogte van het balkje = 25px.
- Site naam = Toont naam van de betrokken provinciale websites of webapplicatie. De positie is rechts uitgelijnd van het logo
Webrichtlijn (klikbare) afbeelding
- Afbeelding: Het provinciale LOGO is een informatieve afbeelding en toont een ALT-tag, alt='Provincie Noord-Brabant'
- Klikbaar: biedt een klikpad terug naar de homepage door er op te klikken en heeft een TOOLTIP, title= 'naar home'
De footer sluit de onderzijde van de pagina af en toont altijd dezelfde elementen: Copyrigh
De restruimte tussen de footer en de onderzijde van het browservenster is 88 px. De footer sluit af met een grijze lijn (#BEBEBE).