DvGwiki

User Tools

Site Tools

Trace:
dvgem:handleiding:informatie_voor_beheerders:dvgem_theme_uitleg_voor_designers

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
dvgem:handleiding:informatie_voor_beheerders:dvgem_theme_uitleg_voor_designers [2020/07/30 08:26] – bernarddvgem: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> <WRAP center round info 60%>DvG is altijd in ontwikkeling, we zullen deze pagina altijd zo snel mogelijk bijwerken.</WRAP>
 ====== Informatie voor designers ====== ====== Informatie voor designers ======
  
 ===== Inleiding ===== ===== 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. 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 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. 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. 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). [[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 ===== ===== Content =====
Line 243: Line 262:
 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 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 ===== ===== Internet Explorer 11 =====
Line 253: Line 273:
  
 ===== Handige Resources ===== ===== 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 ===== ===== Voorbeelden =====
dvgem/handleiding/informatie_voor_beheerders/dvgem_theme_uitleg_voor_designers.1596097617.txt.gz · Last modified: 2024/01/17 15:05 (external edit)