Differences

This shows you the differences between two versions of the page.

--- dvgem:handleiding:informatie_voor_beheerders:dvgem_theme_uitleg_voor_designers [2020/07/29 23:38] – [Relatieve font-sizes] bernard
+++ dvgem:handleiding:informatie_voor_beheerders:dvgem_theme_uitleg_voor_designers [2024/01/17 15:05] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
+//Overgezet naar https://community.drupalvoorgemeenten.nl/t/informatie-voor-designers/239 //
 <WRAP center round info 60%>DvG is altijd in ontwikkeling, we zullen deze pagina altijd zo snel mogelijk bijwerken.</WRAP>
 ====== Informatie voor designers ======
 ===== Inleiding =====
+Bekijk de [[https://prod.dvgemdemo.hosted-temp.com/|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.
@@ Line 172: / Line 177: @@
 ==== Minimale grootte ====
-Aangeraden is om **niet** een font-size kleiner dan **16px** te gebruiken, omdat dit de leesbaarheid voor bijvoorbeeld ouderen, moeilijker maakt.
+Aangeraden is om **niet** een font-size kleiner dan **16px** te gebruiken, omdat dit de leesbaarheid voor bijvoorbeeld ouderen moeilijker maakt.
 ==== Dynamic scaling ====
@@ Line 180: / Line 185: @@
 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.
-==== tekst vergroten/verkleinen knop (niet doen) ====
+==== Tekst vergroten/verkleinen knop (niet doen) ====
 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.
@@ Line 187: / Line 192: @@
 [[https://caniuse.com/#feat=variable-fonts|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).
+===== Iconen (SVG) =====
+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.
+===== Content =====
+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.
+==== Vaste blokken ====
+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:
+{{:dvgem:handleiding:informatie_voor_beheerders:dvgemdemo.test.d.ezcompany.nl_node_add_plan_desktop_.png?direct&200|}}
+==== Flexibele blokken ====
+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:
+{{:dvgem:handleiding:informatie_voor_beheerders:task_create_paragraphs.gif?direct&600|}}
+==== Content "paragrafen" ====
+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:
+{{ :dvgem:handleiding:informatie_voor_beheerders:task-alle-paragraven-ingevuld.png?direct&200 |}}
+En zo ziet dat er aan de voorkant uit:
+{{ :dvgem:handleiding:informatie_voor_beheerders:task-voorkant-ingevuld.png?direct&200 |}}
+@todo nog duidelijke plaatjes maken met omlijningen van de paragrafen aan de voorkant.
+==== Frontpage ====
+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.
+{{ :dvgem:handleiding:informatie_voor_beheerders:frontpage.png?direct&200 |}}
+==== Uitgelichte menu items ====
+Zoals je ziet kunnen ze dus op vervolgpagina's ook de uitgelichte blokken aanzetten, dit is niet speciaal voor de frontpage.
+{{ :dvgem:handleiding:informatie_voor_beheerders:pagina-uitgelichte-blokken.png?direct&200 |}}
+==== Overzichten ====
+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.
+{{ :dvgem:handleiding:informatie_voor_beheerders:overzicht_nieuws_blokken.png?direct&200 |}}
 ===== Internet Explorer 11 =====
@@ Line 197: / Line 273: @@
 ===== Handige Resources =====
-  * [[https://www.w3.org/WAI/standards-guidelines/wcag/docs/]] Officiële documentatie toegankelijkheidsrichtlijnen.
+  * [[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.
 ===== Voorbeelden =====