Logo
  • Forside
  • Kontakt redaktionen
  • Læs PDF-udgaven
  • IT-sikkerhedskultur
  • Grøn IT
  • For få kvinder i IT
  • Sårbare studerende
  • Fremtidens krav
  • Efteruddannelse
  • Løn
  • Løn / overenskomst
  • SAMDATA\HK Podcast
  • Corona forandrer dit arbejdsliv
  • Sociale Kompetencer
  • Big data
  • Digitalisering
  • E-handel
  • Flere temaer
    • Drift
    • Den IT-politiske strategi
    • IT-certificering
    • Nye uddannelser
    • SAMDATA\HK Leder-artikel
    • IT-support
    • Mangel på it-specialister
    • Offentlig it-udvikling
    • Teknologi og Trends
    • Uddannelse
5. maj 2012
Lars Wiedemann
Teknologi og Trends
0

Responsivt webdesign: Få et site der tilpasser sig alt

ForrigeNæste
Dit website skal læses på stadigt flere skærmstørrelser, fra pc til ipad og mobil. Det gør det dyrt og besværligt at levere en god løsning. Responsivt webdesign forsøger at løse den gordiske knude.

Et website er ikke længere bare en side, som bliver vist i et browservindue i noget nær A4-størrelse på en pc solidt placeret på skrivebordet. Mange hiver mindre udstyr op ad lommen eller tasken og går på nettet fra sofaen, busturen eller sågar toilettet.

Hvad de ser på smartphonens eller tablettens mindre skærme, afhænger af, om websitet kan matche andre formater end klassisk desktop.

Hvis sitet er designet responsivt, tilpasser det sig, så du bliver præsenteret for indholdet i en form, som er optimeret til netop din skærmstørrelse og –opløsning. Og indholdet er til at gå til, uanset om du bruger et almindeligt tastatur, en mus eller fingrene.

Hvis ikke, risikerer du at skulle scrolle både op, ned, til højre og venstre og zoome ind og ud for at orientere dig i detaljerne på et site, der mest af alt ligner uldtøj efter kogevask.

Snart er smartphones og tablets hvermandseje

2012 er blevet kaldt smartphonens år i Danmark.


\ DET TILPASSEDE MEDIE
Avisen Boston Globe relancerede i 2011 bostonglobe.com i en responsiv udgave. Nyhedssitet er blevet et udenlandsk skoleeksempel på responsivt design, fordi et omfattende og indholdstungt site formår at tilpasse sig selv komprimerede formater. Sitet udnytter forskelle og fordele i de forskellige brugergrænseflader, fx ved at give ekstra bredde på desktop-visningen og prioritere indgangene til indholdet skarpt i det lille smartphone-format.

Kilder: bostonglobe.com, readwriteweb.com

Prognoserne er, at knap 6 ud af 10 danskere har en iphone eller android-telefon, før året er omme. Ipads og andre tablets er samtidig godt i gang med at vokse sig store på markedet.

Effekten er tydelig. I februar registrerede de fem største nyhedsmedier i Danmark f.eks. 8 mio. unikke besøg og 64 mio. sidevisninger på deres dedikerede mobilsites. Normalt trækker Politiken, TV2, Ekstra Bladet og de andre medier ganske vist også mange besøgende til deres websites. Det gør de sådan set stadig. Men mobiltrafikken er blevet ni-doblet på blot to år.

Det ene øjeblik tilgår vi altså et website fra pc’en, det næste øjeblik fra smartphone eller tablet.

Nye trends kræver fleksibelt indhold

Udviklingen kræver en revolution af den måde vi udvikler på, hvis vi skal sikre en god oplevelse på de mange forskellige skærmtyper:

”Frem for at skræddersy afkoblede designs til hver af det stigende antal enheder med internetadgang, kan vi behandle dem som facetter af den samme bruger-oplevelse”, forklarer ophavsmanden til begrebet responsivt design, design- og softwareudvikleren Ethan Marcotte.

Men han pointerer, at valget af løsning afhænger af business casen og organisationen bag websitet. Det kan fx være en redaktionel udfordring at udvikle indhold, som fungerer lige godt på tværs af platforme.

Flydende overgange eller faste formater

Grundlæggende består valget i fremtidens webudvikling mellem at designe et dedikeret site til hhv. desktop, laptop, smartphone, tablet og kommende generationer af gadgets eller designe et samlet fleksibelt site, som tilpasser visningen til brugerne.


\ FAKTA OM RESPONSIVT WEBSDESIGN
Responsivt webdesign tilpasser sig fx pc’ere, smartphones, tablets og på sigt andre gadgets, som fremtiden byder på.
Typisk bliver den responsive løsning optimeret til tre primære ’breakpoints’: almindelig pc, tablet og smartphone. Design og indhold skalerer og tilpasses flydende mellem de definerede breakpoints for at sikre den bedst mulige brugeroplevelse på tværs af platforme.
Responsive løsninger kan specialudvikles fra bunden eller tage udgangspunkt i eksisterende software, som gør det muligt at komme hurtigt i gang.
Men fleksibiliteten er ikke bare formalia. Det kræver skarp prioritering af funktionalitet og indhold til mobil brug, hvis det skal give mening at udvikle i et responsivt webdesign, understreger brugervenlighedseksperten Jakob Nielsen:

”Blot at bruge responsivt design til at gøre et website tilgængeligt på mobile enheder resulterer i ringe mobile brugeroplevelser”.

Nyhedsmedierne har indtil videre valgt dedikerede mobilsites. Gør du fx browservinduet med politiken.dk meget mindre på din laptop, får du bare vist et hjørne af sitet.

Gør du det samme med jyskebank.dk, får du et resultat, som ligner et mobilsite med store, simple knapper. Log-on til netbank er øverst, dernæst kommer nyheder og i bunden diverse genveje til lån, valuta, bolig og meget mere. Rækkefølgen er et udtryk for, hvad banken gerne vil præsentere dig for.

Indhold til toilettet og kontoret

Jyske Bank er et af de indtil videre få danske eksempler på forsøg med responsivt design. Banken prøver at skabe særligt platformstilpassede indgange til det samme indhold. Indholdet er med andre ord omdrejningspunktet. De mindre formater tager med sine store touch-indbydende knapper på forsiden højde for, at tablets og smartphones som oftest betjenes med fingrene frem for en mus og et traditionelt tastatur.

Udviklingen inden for især smartphones, tablets og responsivt webdesign udfordrer det, den danske internet-entreprenør, Janus Boye kalder ”desktop-mindsettet”: En mental, vanemæssig og organisatorisk barriere i udviklingen af webløsninger, der skal overvindes.

Målet er at lave indhold, som kan læses lige så godt fra toilettet som fra kontoret.


Udvalgte danske responsive sites
\ Jyskebank.dk
\ Kongehuset.dk
\ Greens.dk
\ Tankegang.dk
\ Skivefestival.dk
\ Gentofte.dk
\ Scoutrace.dk
\ Peytz.dk
\ DenDigitaleKant.dk

\ WordPress-sites med standard-tema er bygget responsivt.

designmobilresponsivttablet
Del dette
Forfatteren Lars Wiedemann

Flere artikler

Teknologi der fordamper: Husker du WAP?

16. december 2014

Responsivt webdesign møder praktisk hverdag

5. maj 2012
Foto: Ernst Poulsen

To App Or Not To App

9. marts 2015

Skriv en kommentar Annuller svar

This site uses Akismet to reduce spam. Learn how your comment data is processed.