Minisite til Børnerådets årsberetning

 

 

ILLUMI har leveret løsningen til Børnerådets årsberetning 2015/2016

Løsningen er egentligt bare en enkel webside med en række tekstafsnit. Men bagved har vi gjort brug af nogle nye teknikker, som har gjort projektet sjovt og udfordrende. Løsningen er naturligvis responsive og fungerer derfor også på telefoner og tablets.

 

 undefined

 

Smarte spalter 

Det mest synlige aspekt for læseren er den udbredte brug af spalter. Her har vi brugt css multi-columns, som gør det muligt med få linier stylesheet at lave en enkelt tekstkolonne om til flere spalter. Pointen ved css columns er, at de selv ombryder teksten ved at lade teksten "flyde" fra spalte til spalte således at spalterne bliver lige høje.

Resultatet er indhold som er langt mere læsevenligt og overskueligt samt attraktivt at se på.

 

undefined

 

Tag udgangspunkt i skærmens bredde fremfor pixels/rem

Vi brugte også "viewport widths"(vw) som er en enhed til angivelse af størrelser i stylesheets med. I stedet for at bruge pixels eller em/rem, som alle skal håndteres separat for hver gruppe af skærmstørrelser, så tager viewpoint width udgangspunkt i skærmens bredde. Man kan derved opnå den effekt, at en skriftstørrelse gradvist nedjusterer sig efter hvor lille en skærm den vises på.

 

Ny måde at vise Youtube klip på

Børnerådet har i udbredt grad ønsket at tilføre liv og aktualitet ved hjælp af Youtube videoklip i årsberetningen. Disse videoklip har vi håndteret responsivt således, at de tilpasser sig skærmens og spaltens bredde. Endvidere har vi benyttet Youtube's thumbnail generator som selv genererer et thumbnail billede ud fra et givent videoklip. Det betyder at hvis videoklippet senere ændres, så vil thumbnail billedet automatisk tilpasse sig. Vi undgår herved at bruge Youtube's normale "embed" funktion som ville have resulteret i en meget langsom side. 

 

Det populære svg format

Endeligt skal det nævnes, at alle ikoner er lavet med svg formatet. Svg er et tiltagende populært format til ikoner og illustrationer på nettet. Formatet har den fordel at det er xml baseret hvilket gør det muligt at manipulere elementet v.h.a. stylesheets og javascripts. Den største fordel ved svg formatet er dog, at det bruger kurver i stedet for pixels til at skabe grafik hvilket betyder, at det altid vil fremstå knivskarpt især på moderne retina skærme.

 

Resultatet af processen er en årsberetning som er tilgængelig på alle moderne platforme og enheder som er enkel og attraktiv at læse. 

 undefined