Differences

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

--- dvgem:handleiding:informatie_voor_beheerders:dvgem_theme_uitleg_voor_designers [2020/07/30 08:48] – 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://dvgemdemo.prod.hosted-temp.com/|demo omgeving]].
+Bekijk de [[https://prod.dvgemdemo.hosted-temp.com/|demo omgeving]].
@@ Line 183: / 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 190: / 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 =====
@@ Line 246: / 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.
+{{ :dvgem:handleiding:informatie_voor_beheerders:overzicht_nieuws_blokken.png?direct&200 |}}
 ===== Internet Explorer 11 =====
@@ Line 259: / Line 276: @@
   * [[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://paletton.com/#uid=13t0u0kgKmJ2rP+9juoncgtzL7t]] | Online kleurschema generator
   * [[https://webaim.org/resources/contrastchecker/]] | Online contrast checker
   * [[https://contrastchecker.com/]] | Online contrast checker alternatief