Alt om alt til alle skærmstørrelser
På store corporate websites er det vanskeligt at pakke alt indholdet sammen og skabe en god brugeroplevelse hele vejen fra en 17-tommer desktop-skærm til den mindste mobiltelefon. Responsivt webdesign er udråbt til løsningen på det problem. Men det er ikke noget quick fix.
af Mark Thomsen
.jpg)
Danske virksomheder og organisationer står stadig noget tøvende over for det mobile internet. Et kig på listen over nogle af Danmarks største virksomhed viser, at kun et fåtal har valgt at optimere deres websites til mobile platforme som tablets og smartphones.
|
Eksempler på danske responsive sites
|
2012 er ellers blevet udnævnt til smartphonens år i Danmark. Prognosen er, at knap 6 ud af 10 danskere har en iPhone eller Android i lommen, inden året er omme. En stigning på over 70 procent fra året før.
Så umiddelbart giver det god mening at optimere sit website til mobile platforme. Trafikken vil i stigende grad være mobil, og et mobil-optimeret website vil langt bedre kunne understøtte den brugeroplevelse, som kunden skal have i mødet med virksomheden digitalt.
Når virksomhederne alligevel tøver, kan det skyldes, at traditionelle websites sagtens kan vises i de mobilbrowsere, der findes i smartphones. Designet ligner ganske vist en uldtrøje, der er havnet i kogevask. Alt er krympet og småt, men man kan vænne sig til det ved konstant at trække i det og zoome op og ned.
.jpg)
Design til alle skærmstørrelser
Meget tyder dog på, at der bliver tale om en ketchupeffekt. Efterhånden som den mobile trafik stiger, vil virksomhederne også pludselig optimere deres websites til mobile enheder.
Responsivt webdesign er en af de veje, man kan gå. Fordelen ved et responsivt website er, at det automatisk tilpasses de skærmstørrelser, som brugerne benytter. Når brugeren skifter fra laptop til tablet eller mobiltelefon, registreres brugerens skærmstørrelse og –opløsning, så designet optimeres til den plads, der er til rådighed på skærmen.
Når man udvikler responsive design, fastlægger man allerede i designfasen, hvad der skal ske med designet og indholdet i de forskellige skift (også kaldet breakes) fra fx laptop, til tablet bred- og højformat og tilsvarende bred og højformater i mobiltelefonen. Hvert eneste element på websitet – billeder, tekst, tabeller og grafik mv. – skal designes og implementeres på en måde, så det kan skalere op og ned.
Tag fx jyskebank.dk eller ase.dk og træk i skærmvinduet, så det bliver mindre. De to websites er gode eksempler på responsive sites, der automatisk skalerer og tilpasser sig den plads, der er til rådighed.
Fordelen er naturligvis er, at der kun én webløsning at holde styr på. Så slipper webredaktøren for at vedligeholde og opdatere sit website i flere forskellige formater. Indholdet er det samme – uanset om du tilgår websitet på en tablet, en mobiltelefon eller en klassisk desktop.
Langt mellem de gode eksempler
Det er ikke fordi det vrimler med gode danske eksempler på godt responsivt webdesign. For det første er der ganske enkelt ikke lavet så mange af dem sammenlignet med dedikerede mobilsites, der er udviklet til en specifik enhed (typisk mobiltelefonen) med en samling af det mest læste indhold fra hovedsitet.
For det andet er det ikke helt enkelt at udvikle gode responsive design. Hvis alt indholdet i et website skal skalere op og ned i de forskellige formater er det kritisk vigtigt at have styr på alt sit indhold og ikke mindst strukturen i det.
Mange af de eksempler, der findes på responsivt webdesign, er enten blogs, portfoliosites, små virksomhedssites og nyhedssites – dvs. websites med en relativt overskuelig og flad struktur.
Introduktion til Boston Globes nye design. Her kan du læse en fin gennemgang af deres erfaringer og visioner med responsivt design.
Boston Globe er et responsivt og kolossalt stort website, men strukturen er relativt enkel i form af nyhedsartikler ordnet i sektioner som Business, Sports, Opinion og Lifestyle. Der er meget indhold, men strukturen er flad, og den egner sig derfor til at blive skaleret ned i mobilvisninger, hvor der primært er behov for at navigere frem og tilbage mellem oversigtssider og de enkelte nyheder.
I store corporate websites med dyb hierarki i navigationen er det meget mere vanskeligt at pakke alt indholdet sammen og skabe en god brugeroplevelse hele vejen fra en 17-tommer desktopskærm til den mindste mobilversion i højformat.
Hvis der er mange niveauer i navigationen, som fx på Gentofte.dk, sker der meget let det, at navigationen tager al den værdifulde plads øverst på siderne i de mobile visninger af det responsive design. Navigationen fylder det hele, og det er svært at gennemskue, at der sker noget længere ned på mobilsiden, når man klikker på et af menupunkterne.
Back to basics
En klar indholdsstrategi er afgørende, når du designer responsivt. Her er ase.dk et godt eksempel. Inden akassen ASE lancerede deres nye responsive website tilbage i maj 2012, havde de et traditionelt hierarkisk website med mange niveauer og en stor mængde indhold.
ASEs designproces startede med, at alt det eksisterende indhold blev lagt om i en helt ny struktur. Det, der tidligere bare var en stor mængde sider i et CMS, blev pillet fra hinanden og skrevet om i forskellige nye tekstformater bestående af oversigtssider, guides, spørgsmål og svar, om-os-sider, cases og nyheder. Nu var en side ikke bare en side, men en bestemt sidetype med et relativt fast tekstformat, et veldefineret formål og klare kvalitetskriterier.
Indholdet blev ordnet i tre målgruppeindgange med en simpel venstre-navigation i ét niveau. Resten af navigationen er content-navigation, der egner sig perfekt til visninger i mobiltelefonen. Og det var tænkt med fra starten.
Udviklingen af godt responsivt design handler således først og fremmest om at få styr på sit indhold og sin struktur. Det handler også om skærmopløsninger, browseroptimering og media queries, men vi bør ikke fortabe os i teknikaliteter. Design til mobile platforme er back to basics: Mobile first er content first. Organisering, formidling og forankring af indhold er vigtigere end nogensinde før.
|
Corporate website
|
Mobilt website
|
|
Nej
|
|
|
Nej
|
|
|
Nej, modersite er kodet i Flash og bliver ikke vist på iPhone/iPad
|
|
|
Dansk Supermarked – eksempelvis bilka.dk
|
Ja
|
|
Nej
|
|
|
Ja
|
|
|
Nej, begrænset visning af modersite på iPhone/iPad (uden topfelt)
|
|
|
Nej, begrænset visning af modersite på iPhone/iPad (uden topfelt)
|
|
|
Ja
|
|
|
Coop – eksempelvis kvickly.dk
|
Nej, men særlig landingpage, der henviser til at downloade apps til tilbudsavis mm.
|
__
Vil du lære mere om responsivt webdesign og komme på forkant med webudviklingen? Så tag med på et af Kforums kurser eller meld dig til vores erfa-gruppe for webansvarlige. Læs mere her:
---
Læs meget mere om den tekniske side af responsive design i denne grundige artikel:
Se samlingen af 50 gode værktøjer til responsivt design her:
Læs en god diskussion af problemerne i forbindelse med responsivt design
