Responsivt webdesign møder praktisk hverdag
Web, tablets og mobiltelefoner. Det siges, at en god fodboldspiller skal kunne spille alle pladser på banen. Betyder det også, at et godt website skal kunne virke på alle enheder?
Som et af Danmarks største netmedier er ekstrabladet.dk repræsenteret på stort set alle enheder, der har en skærm, og det giver os en del udfordringer. Vi er ganske vist til stede på både mobil, ipad og pc, men fordi der er så stor forskel fra web på en computerskærm til web på en mobiltelefon, må vi ofte lave en særlig mobilløsning. Lige nu bruger vi som regel et simpelt link inde i artiklen, så mobilbrugerne kan åbne et nyt vindue.
Det er ikke altid optimalt, men i et redaktionelt miljø er hastighed noget, vi er nødt til at forholde os til. ”Det skal jo også være færdigt.”
Så måske er responsive webdesign noget for os? Hvis vi nu kan knække nøden, så vores produktioner automatisk kan integreres på ekstrabladet.dk’s web-, mobil- og tablet-optimerede -site, og fungere på alle platforme – uden at vi skal sidde og fifle for at få det hele til at spille. Se, det ville være lykken.
Hofmarskallatet fastlagde en webstrategi, som blandt andet betyder et mål om, at kongehuset.dk skal gøres til den foretrukne kanal til seriøs viden om Kongehuset. Det var derfor naturligt at prioritere, at den nye hjemmeside fremstod flot og synlig, uanset om brugere åbner den på en pc, smartphone eller tablet.
Bo Søby Kristensen
Konger og Jyske banker
Et af de websites, der har et sådan er kongehuset.dk. Du kan selv teste det ved at besøge hjemmesiden og gøre dit browservindue bredere og smallere. Se, hvordan siden automatisk tilpasser sig, og vis mig den designer, der ikke bliver slap i underkæben.
Redesignet af hjemmesiden skete i forbindelse med, at kronprinsparret.dk og kongehuset.dk skulle lægges sammen til ét website. Der er altså tale om en ny hjemmeside, kodet fra bunden. Bag designet står design- og kommunikationsvirksomheden Bysted.
Bo Søby Kristensen, der er administrerende direktør og seniorrådgiver hos Bysted, forklarer hvorfor man gik den responsive vej.
”Hofmarskallatet fastlagde en webstrategi, som blandt andet betyder et mål om, at kongehuset.dk skal gøres til den foretrukne kanal til seriøs viden om Kongehuset. Det var derfor naturligt at prioritere, at den nye hjemmeside fremstod flot og synlig, uanset om brugere åbner den på en pc, smartphone eller tablet.”
Han nævner som eksempel, at hvis en bruger for eksempel har set en billedserie med kongefamilien på sin arbejdscomputer, så vil han/hun forvente at kunne gøre det samme på sin smartphone senere samme dag.
20 % dyrere bank site
Et andet sted, hvor de har taget det responsive i brug er på Jyske Banks hjemmeside. Her præsenterede man et redesign af hjemmesiden den 5. december sidste år. En af årsagerne til redesignet var ifølge onlinestrateg Gorm Ruge den stigende trafik fra mobile enheder, som Jyske Bank ikke behøver udvikle og vedligeholde særskilte websites til.
Herved slipper Jyske Bank for, at brugerne oplever amputerede websites, der ikke indeholder al den information, som de søger.
I et interview med Janus Boye fra web- og intranet-community’et J. Boye fortæller User Experience-designer Claus Stadel Petersen og Gorm Ruge om, hvordan de gradvist relancerede jyskebank.dk med det nye design.
De fortæller også, at det tog længere tid og var op til tyve procent dyrere. De synes dog, at det giver god mening i det lange løb, da de sparer penge på webdesign i tiden, der kommer. Petersen og Ruge deler også de tre vigtigste ting, de har lært i forbindelse med redesignet.
1) Der er en mental barriere, et ‘desktop’-mindset, altså vanen ved at designe til computere, der udgør en begrænsning, og som skal ændres.
2) Afsæt masser af tid til test.
3) Husk, at konceptet stadig er nyt – det kan betyde, at der skal kodes mere.
Problemer med NemID
Den næste store udfordring for Jyske Bank er en større digital overhaling af selve netbanken, både for privat- og erhvervskunder. Det bliver ifølge planen rullet ud i oktober i år. Den nye netbank bliver dog ikke i responsivt design, fortæller Gorm Ruge.
Jyske Bank har i forvejen mobilbank-apps til Android, iPhone og iPad – og da NemID heller ikke virker på Apples mobile styresystem, er der ifølge Gorm Ruge “grænser for, hvor stor en lækkerbisken det ville være”. På lang sigt er responsivt webdesign dog en oplagt vej for en allround mobilbaseret webbank, tilføjer han.
Vælg: Responsiv eller adaptiv
På Ekstra Bladet overvejer vi, hvilken af to mulige responsiv-løsninger vi skal vælge: Skal vi gøre A) hjemmesiden 100 procent flydende, altså responsiv – eller B) identificere et vist antal enheder eller skærmstørrelser, og så sørge for at de fungerer optimalt – det kalder man adaptivt design.
For at blive klogere på, hvad der er bedst at vælge, har jeg spurgt Kim Johannesen, der er designchef hos webbureauet Peytz. Han har – for at vise nogle af mulighederne – lavet en responsiv udgave af britiske The Guardians forside. Han er ikke i tvivl om, hvad han vil anbefale.
”Personligt foretrækker jeg den flydende, da vi ikke ved hvad morgendagen bringer,” siger han.
”Hvad nu hvis der kommer et Apple-produkt eller en Amazon Kindle, der har en helt ny størrelse, og enheden sælger som varmt brød fra dag ét – så skal man identificere en ny størrelse og udvikle igen,” lyder forklaringen.
Bysted har udgivet et såkaldt whitepaper, hvor der skelnes mellem netop responsivt og adaptivt webdesign. En af fordelene ved den adaptive løsning er ifølge dokumentet, at det er billigere og mere lige, og det giver stadig en god løsning for nogle brugere. Der kan dog stadig være brugere, der ikke får en optimal oplevelse af websitet.
En af grundene til, at responsivt design er interessant nu, er iPhone og andre smartphones har været med til at gøre teknologien billigere og nettet hurtigere.
Jesper Fagerlund
Langsommere?
Dertil kommer så hastigheden på skærmen. Jesper Fagerlund, der er senior webdesigner og chefrådgiver for digital kommunikation hos Bysted, forklarer, at man samtidig med at selve designet er responsivt også kan sørge for, at den passende størrelse billeder bliver hentet ind. For eksempel er der ingen grund til, at den store udgave af et billede skal vises i et lille design på en mobil.
Han tilføjer samtidig, at man ikke behøver bekymresig for, at detektionen af enhed gør siden langsommere.
”En af grundene til, at responsivt design er interessant nu, er iPhone og andre smartphones har været med til at gøre teknologien billigere og nettet hurtigere,” siger han.
Samarbejde om laveste fællesnævner
I Bysteds whitepaper kan man læse, at det er en god idé at starte med den laveste fællesnævner, altså de mest basale Java-baserede mobilbrowsere som Opera Mini. Herfra kan man arbejde sig op imod den seneste version af desktop-browsere som Google Chrome.
Ved at gøre det på denne måde tvinges man i redesignprocessen til at fokusere på den vigtigste arkitektur og det mest grundlæggende tekst- og billedmateriale.
En anden pointe fra dokumentet er den fordel, det vil være for designeren at arbejde tæt sammen med en frontend-udvikler, hvis der skal laves responsivt design. Ganske enkelt fordi de nuværende layout-programmer endnu ikke er gode nok til at udvikle responsivt layout. Derfor er det en god idé at alliere sig med en, der har koden i fingrene.
Tænk det ind fra starten
Lad os nu lege, at vi siger ”ja tak” til den fuldstændigt flydende model, hvad kræver det så? Er det ”a piece of cake”? Det spurgte jeg også Kim Johannesen om. Han vil ikke stikke blår i øjnene på folk, når det drejer sig om at få gjort hjemmesidedesignet responsivt.
”Det er klart nemmest at implementere, hvis man tænker det ind fra starten og har muligheden for at tage en masse beslutninger inden udviklingsprocessen når for langt,” siger han.
Han tilføjer dog, at det er muligt at gøre en hjemmeside responsiv, hvis den i forvejen er udviklet “på en nogenlunde fornuftig måde og benytter sig af en fornuftig struktur og grid-baseret layout”.
Bo Søby Kristensen fra Bysted er enig i, at det letteste er at tænke responsivt fra starten af processen. Han skyder elegant min drøm om den lette konvertering til responsivt webdesign ned:
”Det er sjældent muligt at en-til-en at konvertere en eksisterende hjemmeside. Ikke så meget pga. koden men fordi IA (informationsarkitektur, red.), UX (‘User Experience’, red.) og design skal ændres, så det er tilpasset de forskellige skærmstørrelser som sitet åbnes på. Herfra er det ny HTML-kode (de såkaldte ‘Media Queries’, red.) som gør, at sitet automatisk åbner de rigtige sidetyper alt efter hvilken platform de åbnes på.”
Annoncer måske ikke klar
Jesper Fagerlund fra Bysted peger også på annoncerne som en udfordring, blandt andet også set i lyset af, at nogle skal betale for hjemmesiden – altså annoncørerne. Læg dertil at annoncøren er vant til statiske målbare placeringer. Vi må forvente det marked bliver udviklet meget den kommende tid, siger han.
Han forklarer, det afhænger af, om leverandøren – i vores tilfælde AdTech – leverer responsive løsninger. Dertil kommer problematikken omkring annonceformaterne; hvordan tager en specifik placering sig ud på mobiltelefoner? Er den der overhovedet, eller er den et af de elementer, der bliver skåret fra, når designet automatisk bliver mindre?
Hans konkrete råd til mig er, at vi hos Ekstra Bladet starter en åben beta, hvor vi bruger noget af det redaktionelle indhold fra ekstrabladet.dk til at lege med responsivt design. Her kan vi gradvist bygge forside, artikelside og så videre op.
Ifølge Fagerlund er det værste, vi kan gøre at hyre en stor udbyder og gå i gang med at gøre ekstrabladet.dk responsivt.
Samtidig har vi andre problemer end manglende responsivt design at bekymre os om, minder han mig om, og berører forsigtigt emnet om fremtiden og, hvor pengene skal komme fra.
Et mareridt
Efter at have talt med en række mennesker omkring webdesign, og delt det med jer læsere, vender jeg tilbage til min chef, der også er designchef for ekstrabladet.dk, Kim Pedersen.
Han udvider problematikken.
”Nu har vi retina-skærme, som har højere opløsning end almindelige pc-skærme, men som har en mindre fysisk brugerflade. Derfor skal der bruges flere former for tekniske forespørgsler.”
Han slutter af med at beskrive nutidens vilkår for webdesign som “et mareridt for kontrol-freaks”:
”Nutidens vilkår for webdesign er ikke kun at tilpasse sig nogle skærmformater og hvilken vej, brugeren vender enheden,” siger han. Det er lige så vigtigt at bruge finde ud af, hvilke behov brugerne har på forskellige tidspunkter af døgnet, alt efter om de bruger mobil, ipad eller pc,” siger Kim Pedersen.
Skriv en kommentar
This site uses Akismet to reduce spam. Learn how your comment data is processed.