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 webrichtlijnen, versie 2
  • 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:

rood

#d00000

zwart 60%

#666666

wit

#FFFFFF

Grijstinten

Scale van grijstinten als achtergrond voor tekst

zwart 86%

#232323

zwart 80%

#333333

zwart 60%

#666666

zwart 52%

#7a7a7a

zwart 40%

#999999

zwart 25%

#BEBEBE

zwart 20%

#CCCCCC

zwart 15%

#DFDFDF

Steun kleuren

Binnen provinciale websites zijn ook steunkleuren te gebruiken ter versterking van een specifieke uitstraling.

licht oranje

#F7A600

donker oranje

#EC6707

bordeaux rood

#941D42

paars

#5C2483

donker blauw

#24195D

licht blauw

#009AD8

turquoise

#009BA4

donker turquoise

#006E79

donker groen

#006B2D

licht groen

#13A538

lime

#AFCA0B

geel

#FFE500

Kleurverlopen

Gerelateerdeerd informatie - 'knoppen' - aan de rechterzijde is vormgegeven met een licht kleurverloop

#F8F8F8

#EEEEEE

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:

  1. Artikel-paragraaf-titel op een zogenaamde detailpagina
  2. 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.

Buttons

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.

Webrichtlijnen 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.

Button classes

Gebruik de beschikbare classes om een button stijlen.

Button tags

Gebruik de .btn op <a>, <button>, or <input> elementen.

Link

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 homepage'

De footer sluit de onderzijde van de pagina af en toont altijd dezelfde elementen: Copyright, Colofon, Proclaimer en Cookies

De restruimte tussen de footer en de onderzijde van het browservenster is 88 px. De footer sluit af met een grijze lijn (#BEBEBE).

Hoofdmenu - met zoekveld

Het hoofdmenu biedt toegang tot onderliggende paginas en toont een zoek-knop

De marge tussen de linkerkant en het hoofdmenu bedraagt 10 px en de marges tussen de menu items zijn overal 16 px. De mouse-over heeft een grijze kleur (#999999) en de actieve tab een lichtgrijze kleur (#EAEAEA). De posite van het zoekveld is altijd rechts in het hoofdmenu. En om het onderliggende kruimelpad visueel te kunnen onderscheiden heeft het kruimelpad een afwijkende lichtgrijze kleur (#f7f7f7).