Projekt Status
"Vi bevæger os fra et arkiv-format til en dynamisk, tillidsskabende platform."
24+
Aktivitetssider skal optimeres
WCAG 2.2
Efterlevelse er et lovkrav
Vigtigste Fokusområder
- Gennemsigtighed: Let adgang til årsberetninger og vedtægter for at bygge tillid hos donorer.
- Mobile-First: 91% af danskerne bruger mobilen. Undgå små links gemt i parenteser.
- Kanelstangen: Brug den uformelle tone til at sænke barrieren for kontakt og tilmelding.
Design Manual Quick-Fix
Font: JeanLuc (Overskrifter) / Proxima Nova (Brødtekst)
Størrelse: Minimum 18px for brødtekst
Linjeafstand: 1.6 (Line-height) for luft i teksten
Farvepalette
#EE2D24(Primær Rød)
#F9E6E6(Rosa/Baggrund)
#4A4A4A(Footer Grå)
#FFFFFF(Hvid Tekst)
Checkliste for Aktivitetssider
Husk Fitts's Lov:
Jo større og tættere et element er, jo lettere er det at ramme. Erstat små tekstlinks med store, tydelige knapper.
Nyhedshub & Storytelling
Fra blog til dynamisk sektion
Drop de tørre mødereferater. Brug personlige fortællinger fra frivillige og deltagere til at skabe en emotionel forbindelse.
Nyhedstjekliste
- Fængende overskrift (JeanLuc font)
- Storytelling-vinkel (Menneskeliggør impact)
- Integrer lydfortælling hvis relevant
- SEO Meta-beskrivelse (under 160 tegn)
Lydfortælling (Podcast)
Podcast integration
Organisering af Personer
Bestyrelse
Navn og Titel
Telefon (Aktivt Link)
E-mail (Aktivt Link)
"Skal opbygge legitimitet gennem præsentation af årsberetninger og personlige profiler."
Aktivitetsledere
• Sorteres efter aktivitet for hurtigt overblik
• Direkte kontaktmulighed i hver sektion
• Strømlines for at undgå redundante data
"VIGTIGT: Undgå redundans. Kontaktoplysninger skal være synkrone på tværs af undersider."
WCAG Tilgængelighed
| Kriterium | Handling i Roskilde | Brugerfordel |
|---|---|---|
| Farvekontrast | Hvid tekst på mørkegrå footer (#4A4A4A) | Gør "Cookies" og "De 7 principper" læsbare for svagsynede. |
| Target Size | Knapper skal være min. 24x24 px (ideelt 44x44) | Lettere at ramme knapper på touch-skærme. |
| Semantik | Konsekvent brug af H1 til H6 tags | Hjælper blinde brugere med skærmlæsere at navigere. |
| Billeder | Obligatorisk beskrivende ALT-tekst | Billeder kan "læses" af hjælpemidler. |
POUR: Opfattelig
Anvendelig
Forståelig
Robust