På vei mot nye Vox Publica

Det er snart gått tre år siden for­rige redesign av Vox Pub­li­ca. Dette designet er funksjonelt og over­sik­tlig og har tjent oss godt i denne peri­o­den, men nettver­de­nen endr­er seg hur­tig. Det enkleste eksem­plet er selvsagt den raske vek­sten i bruken av smart­tele­fon­er og lese­brett. For to år siden benyt­tet 1 pros­ent av våre brukere en mobil enhet, nå er det 8 pros­ent. Ande­len vil helt sikkert fort­sette å stige. Både for­di bruken av slike mask­in­er generelt øker i sam­fun­net, og spe­sielt for­di neste ver­sjon av nettma­gasinet vil være tilpas­set mobile enheter. 

Nye Vox Pub­li­ca vil nem­lig bli laget etter prin­sip­pene for respon­sivt web­de­sign. Dette betyr at designet av nettma­gasinet automa­tisk vil tilpasse seg skjermstør­relsen på enheten bruk­eren benytter. 

Leser­sta­tis­tikken vår vis­er at bruk­erne benyt­ter svært mange ulike skjermstør­relser. Leser du oss i et stort skjer­mvin­du (1000 pixler bredt eller mer), vil mag­a­sinet vis­es i mak­si­mal bred­de og med alle visuelle ele­menter (for eksem­pel vil sidene ha to eller tre kolon­ner med innhold). Bruk­er du en smart­tele­fon, ser du en ver­sjon med bare én kolonne, der de øvrige ele­mentene fly­ttes ned under den pri­or­iterte kolon­nen. Slik skal også mobil­brukere få en ful­lverdig opplevelse av mag­a­sinet, ikke en ned­strip­pet spe­sialver­sjon for mobil slik det lenge har vært van­lig å ser­vere leserne. 

Et norsk eksem­pel på respon­sivt web­de­sign er nettma­gasinet Ener­gi og Kli­ma*. I likhet med Vox Pub­li­ca er det laget med Word­Press. Få net­tavis­er har i dag et respon­sivt design, men et unntak er Boston Globe, som har fått mye pos­i­tive tilbakemeldinger på arbei­det de har gjort.

I det nye designet ønsker vi å gå mot et åpnere, enda mer mag­a­si­nak­tig preg (til høyre ser du et utkast til artikkel­side). Kon­septet med for­side­plakat som illus­trasjon til hov­edar­tik­ler vil bli et veldig tydelig ele­ment. Blant tin­gene vi vil endre, er de mange bok­sene og rammene i dagens lay­out. Vi vil heller bruke tynne lin­jer for å skille innhold­se­le­menter fra hverandre.

Målet er å mod­ernisere Vox Pub­li­ca på en slik måte at det blir mer fris­tende å bruke mag­a­sinet, sam­tidig som det ser­iøse preget beholdes.

Litt om pro­gram­mer­ing (mer kom­mer i senere inn­legg): I design­pros­essen utformer vi html-kode i hen­hold til prin­sip­pene i HTML5, blant annet i form av en mer seman­tisk “markup”. Seman­tisk markup er vik­tig både i dag og med tanke på fremti­den. Per i dag er det vik­tig å ha en god struk­tur på kildeko­den, samt at web­sider også kan tolkes av ulike bruk­er­til­passede skjer­mer, som for eksem­pel skjermle­sere. I fremti­den vil seman­tikken i web­sider bli vik­tig med tanke på enda mer kraft­fulle søkemotorer.

CSS(3) gir oss muligheten til å utføre “media queries”. Media queries “snif­fer” ikke type net­tle­sere, som tidligere løs­ninger har forsøkt å gjøre med ulike resul­tater, men server­er en respon­siv web­side på bak­grunn av fak­tisk skjermstør­relse klien­ten har. I til­legg har vi val­gt å bruke en ikke-innebygd font. For å løse dette prob­lemet, benyt­ter vi åpne fonter og tjen­er dem ved hjelp av CSS3 via @font-face ‑attrib­ut­ten.

Et des­ig­nar­beid innebær­er mange valg, og vi prøver å være åpne for nye impulser. Et eksem­pel er de nevnte fontene, som blir tema for et senere inn­legg på denne bloggen.

Teamet som job­ber med design­pros­jek­tet er webans­varlig Erlend Andresen, illus­tratør Håvard Legreid og redak­tør Olav A. Øvrebø.

*Ener­gi og Kli­ma er ikke et helt til­feldig val­gt eksem­pel. Det er designet av Daniel Stri­et­zel, hov­ed­man­nen bak dagens Vox Pub­li­ca-design og tidligere webans­varlig her. Og Olav A. Øvre­bø er redak­tør også for Ener­gi og Klima.