Bekijk de demo omgeving.

Het designen van een gemeente website is net wat strenger dan bij de meeste andere websites. Toegankelijkheid staat voorop, als je je hieraan houd, krijg je gebruiksvriendelijkheid er bijna altijd gratis bij, en zoekmachines waarderen je dan ook hoger/beter.

Simpele trucjes om in je achterhoofd te houden:

• Is dit op een smartphone in fel daglicht goed te lezen.
• Heb je goede ogen: kijk naar de website door je wimpers (ogen dichtknijpen).
• Heb je (niet al te slechte) ogen: Zet je bril af.
• Zou dit duidelijk (genoeg) te gebruiken zijn op een (oude) beamer in een met daglicht verlichte kamer.

Mensen kunnen “slechte” of oude apparatuur bezitten, en daar zou de website ook goed om moeten werken.

Het DvG thema bestaat uit 2 gedeeltes:

Veruit de meest voorkomende fout zijn contrast verschillen. Een zogenaamde “contrast knop” is niet (@todo link uitleg) de correcte oplossing. Gemeenten sites moeten zich wettelijk minimaal houden aan de zogenaamde AA conformance. AAA is geen vereiste, dit zou kleurgebruik ook zwaar beperken, maar is altijd 'beter'.

Het is aangeraden om minimaal of precies de volgende kleuren beschikbaar te hebben, om optimaal van alle huidige en toekomstige functionaliteit gebruik te kunnen maken.

• Primaire kleur - De hoofdkleur van de site.
• Secundaire kleur - Vaak kleine afwijking van de primaire kleur.
• Tertiaire kleur - Vaak grotere afwijking van primair, voor wat meer contrast.
• Accent kleur - de “poppende” kleur, voor onder andere Call to action knoppen.

Daarnaast zijn van elk van de kleuren types de volgende afwijkingen:

• 3 lichtere tinten
• 3 donkerdere tinten
• 1 transparante tint

We heb Paletton.com gebruikt om kleurcodes te vinden (de link heeft de primaire kleur van het basis thema ingevuld).

Een voorbeeld van hoe dit er in de code uit ziet (aangepast voor leesbaarheid):

$primary+3:   hsl(200, 19%, 90%);
$primary+2:   hsl(201, 18%, 82%);
$primary+1:   hsl(201, 21%, 70%); // Lichtere afwijkingen. Contrastrijk genoeg voor zwarte tekst (zie darkmode).
$primary=0:   hsl(201, 33%, 34%); // Leading kleur. Contrastrijk genoeg voor witte tekst (zie darkmode).
$primary-1:   hsl(201, 44%, 26%); // Donkerdere afwijking. Contrastrijk genoeg voor witte tekst (zie darkmode).
$primary-2:   hsl(201, 62%, 17%);
$primary-3:   hsl(202, 90%, 10%);

$primary=0-a: hsla(201, 33%, 34%, .75); // transparantie.

Als deze kleuren niet aangeleverd worden, valt het thema standaard terug op de standaardwaarden uit het Basis Thema. Ook hier gelden dezelfde kleurafwijking regels als bij de primaire kleuren.

Let op dat kleuren ook betekenis hebben voor toegankelijkheid. Rood voor een “succes” kleur en groen voor een “foutmelding” is niet intuïtief en kan verwarrend werken voor gebruikers. Wel kan je de kleuren afstemmen op de hoofdkleuren.

• Info kleur - B.v. info blokken in de tekst.
• Positieve/succes kleur - B.v. geslaagde meldingen bij formulieren.
• Waarschuwings kleur - B.v. voor bepaalde waarschuwingen, of crisis banners.
• Fout kleur - B.v. voor foutmeldingen en crisis banners.
• Markeer kleur - B.v. gemarkeerde teksten in zoekresultaten.
• Standaard link kleur - Een herkenbare link kleur in lopende teksten (kan mogelijk de primaire kleur zijn).
• Grijs kleur - Grijstinten, b.v. voor achtergrond vlakken en randen.
• Zwart kleur - Standaard niet 'compleet' zwart, om speling te hebben naar 'compleet zwart' (code #000).
• Wit kleur - Standaard niet 'compleet' wit, om speling te hebben naar 'compleet wit' (code #fff).

Zie het complete overzicht van Kleurencodes zoals deze in de code staat (anchor link).

DvG is in constante ontwikkeling, gemeenten hebben allemaal unieke wensen. Niet al deze variaties worden op het moment door elke gemeente gebruikt, maar een uniforme onderliggende structuur zorgt ervoor dat we betrouwbaar updates kunnen doorvoeren, en weten wat we standaard beschikbaar hebben. Dit helpt ook met “prototyping” en overleg met gemeenten. je kan in de browser gelijk laten zien hoe een andere kleurvariatie eruit ziet zonder de kleuren te hoeven verzinnen die passen bij hun design.

Ook helpt dit bij het betrouwbaar bouwen van de o.a. nog te ontwikkelen dark mode wat al een standaard is browsers. Sommige browsers forceren hun eigen dark mode als de gebruiker het aanzet op zijn apparaat. Als je hier niet in voorziet, kan het de site lelijk, of soms zelfs onleesbaar en onbruikbaar maken. Hier hebben wij geen controle over.

Het belangrijkste waar je op moet letten zijn achtergrondkleuren met tekst eroverheen, je hebt hier simpele online tools voor waarmee je dit makkelijk kan checken:

• https://webaim.org/resources/contrastchecker/
• https://contrastchecker.com/

Je bent vrij om elk webfont te kiezen, maar liever een van de moderne standaard. Een goede bron hiervoor is Google fonts van het variabele type, de moderne web standaard (staat aan als je de link volgt). meer uitleg over variabele fonts.

Standaard zit in het DvG Basis Thema het font Source Sans Pro van Adobe waarvan het variable font onderdeel is, met het “open-source” licentie: SIL Open Font License 1.1

Deze ondersteund:

• Italic (schuingedrukt) of normal
• elke waarde van Font-weight (font-dikte) tussen 200 en 900. dus zelfs een waarde als 567 (wat in de vorige link nog niet wordt aangegeven).

Font groottes zijn berekend met https://type-scale.com. Regelafstanden zijn berekend met https://grtcalculator.com.

Alle fonts worden met EM's geschreven, zodat ze automatisch meeschalen vanaf de standaard grootte. Alleen de standaard tekst is REM dit is een relatieve waarde die een percentage is van de browser default size: 16px (aanpasbaar door gebruikers in hun browser instellingen).

Klein    : 0.88889 EM // Uitleg teksten, helpteksten.
Standaard: 1.3125 REM // Lopende teksten, de standaard grootte.
groot    : 1.09524 EM // Uitgelichte teksten, zoals de intro van een pagina.
Heading 1: 2.027   EM // Enkele Koptekst overschreven voor pagina titel.
Heading 2: 1.802   EM // Kopteksten door het systeem geleverd en editors.
Heading 3: 1.602   EM // Kopteksten door het systeem geleverd en editors.
Heading 4: 1.424   EM // Kopteksten voor editors.
Heading 5: 1.266   EM // Kopteksten voor editors.
Heading 6: 1.125   EM // Wordt (nog) niet gebruikt.

Hieronder, de bovenstaande relatieve waardes uitgedrukt in pixels voor de kleinste en grootste schermgroottes. Daartussen wordt dynamisch geschaald.

Dit is de ondergrens van de dynamische font schaling.

Klein    : 16     px
Standaard: 18     px
groot    : 21     px
Heading 1: 36.486 px // overschreven voor pagina titel wegens design: 36px.
Heading 2: 32.436 px
Heading 3: 28.836 px
Heading 4: 25.632 px
Heading 5: 22.788 px
Heading 6: 20.25  px  

Dit is de bovengrens van de dynamische font schaling.

Klein    : 18.3  px
Standaard: 21    px
groot    : 23    px
Heading 1: 40.55 px // overschreven voor pagina titel wegens design: 62px.
Heading 2: 36.04 px
Heading 3: 32.04 px
Heading 4: 28.48 px
Heading 5: 25.31 px
Heading 6: 22.50 px

Aangeraden is om niet een font-size kleiner dan 16px te gebruiken, omdat dit de leesbaarheid voor bijvoorbeeld ouderen moeilijker maakt.

Standaard wordt er gebruik gemaakt van dynamische schaling waardoor de tekst vloeiend kleiner/groter wordt naargelang van schermformaat, met een onder en bovengrens. Er zijn dus geen verspringingen (niet prettig bij resizen van windows).

Ook hier geld, de gebruiker heeft uiteindelijk de controle in zijn browser hoe groot tekst getoond wordt voor hem. Door middel van browser instellingen, kunnen zij standaard groottes aanpassen, of een minimale grootte forceren. Wij voorzien dat de rest van de site zich hier goed op aanpast.

Net zoals de “contrast knop”, is de “maak tekst groter/kleiner” knop geen oplossing, als je tekst te klein is om door het grootste deel van je gebruikers goed te kunnen lezen, is hij niet van zichzelf toegankelijk, en forceer je gebruikers extra stappen te ondernemen. Daarbij zit in elke browser tegenwoordig goede zoom functionaliteit, die de knoppen overbodig maakt.

Variable Fonts zijn de moderne standaard voor fonts. In een notendop, hebben we nu maar 1 of 2 bestanden nodig die alle font-weights ondersteunen zonder dat dit de laadtijd van de negatief pagina beïnvloed (belangrijk voor trage mobiele connecties, buitengebieden). Daarbij heb je als designer ook meer flexibiliteit in “zwaarte” van het font.

Browser die dit niet ondersteunen vallen terug op de oudere font types, Waarbij de “font-weight” waarde 450 wordt afgerond naar 500, en 449 naar 400 (@todo dubbelchecken over afronding).

We maken gebruik van SVG iconen, en zullen geen Icon Fonts implementeren. Icon Fonts hebben diverse accessibility problemen (simpel voorbeeld is dat gebruikers custom fonts kunnen uitschakelen). Icon Fonts waren vroeger vooral handig omdat IE8 geen SVG's ondersteunde.

Iconen uit een icon font kunnen wel omgezet worden naar een SVG, dus als designer kan je ze wel gebruiken.

SVG's zijn de moderne best practice en bieden daarbij ook veel meer mogelijkheden. De kleuren van de iconen worden in DvG op dit moment bepaald door de CSS (net zoals bij icon fonts). Multi-color SVG iconen is daarom iets meer werk omdat we dan de specifieke gedeeltes van het icoon moeten “targetten” ipv simpelweg het hele icoon kunnen kleuren.

Nog wat andere voordelen zijn ARIA tags support, animaties en verschillende groottes in 1 icoon.

De gemeente heeft zelf uiteindelijk de macht hoe content en waar bepaalde content wordt geplaatst. Voor bepaalde zaken bepalen wij wel de volgorde, om toegankelijkheid te waarborgen, en om het ook makkelijker te maken voor gemeenten om dingen niet fout te doen.

Hier een voorbeeld van een “Plan” pagina, deze bevat de meeste “vaste” velden (in het main tabje). Zaken als titels, datums, etc, bepalen we vanuit het basis/sub theme, en zijn niet door editors zelf in volgorde aan te passen:

Daarnaast hebben ze in het “content” tabje wel meer vrijheden. De knoppen die je hier zit (die worden “paragraven” genoemd, maar dat kan wel eens verwarrende naamgeving zijn) zijn de stukken content die editors zelf kunnen plaatsen. Onderstaande laat dat proces zien bij een taak, die daarin het meest uitgebreid is, klik op het plaatje, is een animated gif:

We proberen overal dezelfde blokken te hergebruiken voor consistentie, dus ik laat het zien hoe dit eruit ziet bij een task, omdat deze alle paragrafen bevat, en er op andere pagina's hetzelfde uitzien.

in 1 overzicht alle paragrafen ingevuld met test content aan de achterkant:

En zo ziet dat er aan de voorkant uit:

@todo nog duidelijke plaatjes maken met omlijningen van de paragrafen aan de voorkant.

De frontpage is van het content-type “pagina”. De enige uitzondering is voorlopig de zoekbalk die we zelf 'hard' plaatsen. Maar bij een update kan de gemeente dit zelf instellen, zodat ze meerdere “landingpages” kunnen instellen.

Zoals je ziet kunnen ze dus op vervolgpagina's ook de uitgelichte blokken aanzetten, dit is niet speciaal voor de frontpage.

Het content-type pagina heeft 1 paragraaf type die andere types niet hebben, en dat is de “overzichten” paragraaf. Hier kunnen ze overzichten plaatsen van Nieuws items, en publicaties (op het moment).

Deze zijn ook beschikbaar in 2 varianten. Een langere lijst weergave, en een kortere “blok” weergave. Maar ook hier hebben ze zelf de keuze om in te stellen hoeveel items er getoond moeten worden.

Deze “browser” loopt heel ver achter. Microsoft zelf noemt het geen browser, maar een compatibiliteitstool: Samenvatting artikel en de Microsft blog zelf.

Tip: Stap over op het vernieuwde Edge welke IE11 heeft ingebakken voor de applicaties waar het echt voor nodig is.

Internet Explorer toont altijd het een aangepaste Basis Thema thema. Een aantal basiszaken zoals kleurgebruik en typografie zal wel aangepast worden. Grote layout veranderingen worden hierin niet meegenomen wegens onderhoudskosten en het mogelijk maken van onderhoudbare aanpassingen in de moderne browsers. (@todo losse wiki maken met tips&tricks).

• https://dvgemdemo.prod.hosted-temp.com/ | Demo omgeving.
• https://www.w3.org/WAI/standards-guidelines/wcag/docs/ | Officiële documentatie toegankelijkheidsrichtlijnen.
• https://www.w3.org/WAI/WCAG21/Understanding/conformance | AA conformance.
• https://paletton.com/#uid=13t0u0kgKmJ2rP+9juoncgtzL7t | Online kleurschema generator
• https://webaim.org/resources/contrastchecker/ | Online contrast checker
• https://contrastchecker.com/ | Online contrast checker alternatief
• https://fonts.google.com/?vfonly=true | Google fonts met variable vinkje aan.
• https://type-scale.com | Font-size generator.
• https://grtcalculator.com | Line-height generator.
• https://github.com/adobe-fonts/source-sans-pro | Source Sans Pro, basis theme variable font.

Onderstaand een copy van de CSS (29-07-2020), hier zie je de basis die beschikbaar is (onaangepast), als je benieuwd bent hoe dat eruit ziet.

// Main color of the site used for most objects.
$c-pri-0:           hsl(201, 33%, 34%); // Leading color.
$c-pri-1:           hsl(200, 19%, 90%);
$c-pri-2:           hsl(201, 18%, 82%);
$c-pri-3:           hsl(201, 21%, 70%);
$c-pri-4:           hsl(201, 44%, 26%);
$c-pri-5:           hsl(201, 62%, 17%);
$c-pri-6:           hsl(202, 90%, 10%);
// With alpha channel.
$c-pri-0-a:         hsla(201, 33%, 34%, .75);
 
// The second color complements the primary color for regions, variations, etc.
$c-sec-0:           hsl(203, 24%, 44%); // Leading color.
$c-sec-1:           hsl(180, 20%, 94%);
$c-sec-2:           hsl(204, 21%, 85%);
$c-sec-3:           hsl(204, 19%, 66%);
$c-sec-4:           hsl(204, 37%, 33%);
$c-sec-5:           hsl(204, 50%, 24%);
$c-sec-6:           hsl(203, 90%, 10%);
// With alpha channel.
$c-sec-0-a:         hsla(203, 24%, 44%, .75);
 
// Third color of the site, to make certain things stand out a bit more.
$c-ter-0:           hsl(153, 100%, 26%); // Leading color.
$c-ter-1:           hsl(154, 48%, 90%);
$c-ter-2:           hsl(153, 46%, 58%);
$c-ter-3:           hsl(153, 79%, 37%);
$c-ter-4:           hsl(153, 100%, 20%);
$c-ter-5:           hsl(152, 100%, 12%);
$c-ter-6:           hsl(152, 100%, 7%);
// With alpha channel.
$c-ter-0-a:         hsla(152, 100%, 26%, .75);
 
// Primary accent color, a distinctive and popping color, the "call to action" color.
$c-accent-pri-0:    hsl(30, 100%, 50%); // Leading color.
$c-accent-pri-1:    hsl(30, 100%, 88%);
$c-accent-pri-2:    hsl(30, 100%, 75%);
$c-accent-pri-3:    hsl(30, 100%, 63%);
$c-accent-pri-4:    hsl(28, 100%, 35%);
$c-accent-pri-5:    hsl(28, 100%, 25%);
$c-accent-pri-6:    hsl(28, 100%, 15%);
// With alpha channel.
$c-accent-pri-0-a:  hsla(30, 100%, 50%, .75);
 
// Info colors for status message, info boxes, etc.
$c-info-0:          hsl(204, 65%, 50%); // Leading color.
$c-info-1:          hsl(204, 65%, 91%);
$c-info-2:          hsl(204, 48%, 56%);
$c-info-3:          hsl(204, 89%, 26%);
$c-info-4:          hsl(204, 94%, 13%);
 
// Succes colors for status message, checkmarks, etc.
$c-positive-0:      hsl(100, 33%, 55%); // Leading color.
$c-positive-1:      hsl(100, 33%, 89%);
$c-positive-2:      hsl(100, 45%, 80%);
$c-positive-3:      hsl(100, 49%, 34%);
$c-positive-4:      hsl(100, 97%, 13%);
 
// Warning colors for status message, user inputs, etc.
$c-warning-0:       hsl(41, 100%, 56%); // Leading color.
$c-warning-1:       hsl(41, 100%, 93%);
$c-warning-2:       hsl(41, 100%, 69%);
$c-warning-3:       hsl(41, 100%, 30%);
$c-warning-4:       hsl(41, 100%, 18%);
 
// Error colors for status message, illegal actions, etc.
$c-negative-0:      hsl(4, 70%, 52%); // Leading color.
$c-negative-1:      hsl(4, 70%, 92%);
$c-negative-2:      hsl(4, 100%, 73%);
$c-negative-3:      hsl(4, 88%, 33%);
$c-negative-4:      hsl(4, 100%, 14%);
 
// Highlighting color for marked text.
$c-highlight-0:      hsl(60, 100%, 50%); // Leading color.
$c-highlight-1:      hsl(60, 100%, 90%);
$c-highlight-2:      hsl(60, 100%, 70%);
$c-highlight-3:      hsl(60, 100%, 40%);
$c-highlight-4:      hsl(60, 100%, 20%);
 
// Keep default link colors separate from theme colors for recognizability.
$c-link-default:     hsl(200, 99%, 31%);
$c-link-hover:       hsl(200, 98%, 21%);
$c-link-active:      hsl(200, 100%, 11%);
$c-link-visited:     hsl(270, 52%, 45%);
 
// Grayscale colors.
$c-black-0-a:       hsla(0, 0%, 0%, .25);
$c-black-0:         hsl(0, 0%, 0%);
$c-black-1:         hsl(0, 0%, 3%); // Near black.
 
$c-white-0-a:       hsla(0, 0%, 100%, .25);
$c-white-0:         hsl(0, 0%, 100%);
$c-white-1:         hsl(0, 0%, 98%); // Near white.
 
$c-gray-0:          hsl(0, 0%, 44%); // AA: Minimal contrast with white bg.
$c-gray-1:          hsl(0, 0%, 90%);
$c-gray-2:          hsl(0, 0%, 81%);
$c-gray-3:          hsl(0, 0%, 65%);
$c-gray-4:          hsl(0, 0%, 34%); // AAA: Minimal contrast with white bg.
$c-gray-5:          hsl(0, 0%, 24%);
$c-gray-6:          hsl(0, 0%, 18%);

Suggesties, verbeteringen of foutjes gezien? Mail — Bernard Skibinski 29/07/2020 18:20