Sådan skiftede Børsen.dk til responsive design og halverede svartiderne

Hvorfor vedligeholde en masse forskellige udgaver af websiden, når én version kan bruges til alle formål?

Det er grundtanken bag ’responsive design’, hvor webindholdet i stedet kodes, så det tilpasser sig skærmstørrelsen hos de besøgende.

På Dagbladet Børsen valgte digital chef Thomas Riise Hansen, at borsen.dk skulle laves responsivt, for andelen af de fire millioner besøg om måneden, der kom fra mobiler og tablets, steg og steg. Her fortæller han om projektet.

Hvad gik projektet ud på?

»Vi har indført responsive design på Borsen.dk, så hvis skærmen, der tilgår sitet, er under x pixels bred, bliver indholdet ombrudt, så det passer - fra tre til to kolonner for eksempel. Samtidigt har vi lukket vores mobilsite og de native apps, vi havde. Før havde vi native stand-alone-apps, der kaldte ind til vores systemer og fik nyheder tilbage. Men vi tænkte, at HTML er fremtiden, så nu har vi lavet en wrapper-app. Hvis du henter Børsen Mobil i Apples App Store for eksempel, er det en browser, du får. Du kunne lige så godt have et bogmærke, og det er også meningen. Der er meget lille forskel.«

»Vi gennemgik Borsen.dk fra A til Z og ændrede hver eneste side. Før projektet, tilbage i maj måned, gennemgik vi et redesign, som var mere slankt og stringent, og vores stramme design har været en fordel i denne her proces. Vi har taget alt indhold og gjort tilgængeligt på mobile enheder, uden at si noget fra. Du kan lave en ferieflytning, se aktiekurser, virksomhedssider og så videre.«

»En stor gevinst ved denne operation var vores slankekur af vores website. Vi havde firmaet Digicure med inde over til at synliggøre, hvor man kan sætte ind og reducere datamængden, der skal downloades til brugernes browsere. Vi har reduceret datamængden med 50 procent, og det bliver desktop-versionen jo også hurtigere af. Vores svartider er reduceret med et sekund - fra 1,9 sekunder til 0,9.«

»Det gjorde vi ved at optimere en del billeder - det var den største synder. Vi lagde ekstra kommandoer ind, når et billede bliver lagt op, så al unødig information bliver hevet ud. Vi har også optimeret vores skrifter, og det gav yderligere besparelse i datamængder.

Hvad var målet med projektet?

»Vi vil gerne have, at borsen.dk virker på alle platforme, for 13 procent af besøgene sker nu fra mobile enheder - fra iPad og nedefter i skærmstørrelse. Det er en fordobling på et år. Og i år 2014 regner man med, at halvdelen af besøgene vil være fra mobile enheder.«

»Samtidigt sparer vi vedligeholdelse af alle de apps og pseudo-apps, vi har haft. Mobilsitet, som var hosted ude i byen, er også lukket. Og vi havde en hel video-proxy-løsning hos en ekstern leverandør, som også er lukket nu. Meget er nu samlet ét sted, så vedligeholdelsen og antallet af platforme er reduceret.«

»I forhold til slankekuren af websitet skete det efter tankegangen Mobile First. Man skal tilpasse sig laveste fællesnævner, altså smartphones og mobile dataforbindelser. Hvis ikke dit site kører der, har du problemer, for så løber kunderne over til nogle andre. Derfor skulle vi slanke vores site.«

Hvad var tidsplan og bemanding på projektet?

»Vi brugte tre uger effektivt på det, og havde en silent launch den 4. oktober, og en officiel launch den 22. oktober. I alt var vi et team på fem mand, samt nogle udviklere ved siden af. Heraf var to udviklere og en projektleder været 100 procent dedikeret til projektet.«

Hvilken teknologi brugte I?

»Det var en teknik i CSS, som hedder Media Queries.«

Hvilke udfordringer eller problemer mødte I undervejs?

»Det sværeste i hele processen var annoncerne, altså bannerannoncer. Vores hovedbannerleverandør er optimeret til at levere til desktop, mens vi også har en decideret mobilbannerleverandør. Så vi har faktisk implementeret to bannerleverandører, som så bliver kaldt, afhængigt af hvordan man ser sitet. Dermed kan annoncesælgere nu også sælge annoncer til bestemte platforme: iPhone, iPad, Android. Men målet er at kunne gøre det til bestemte modeller også, så en annoncør kan vælge kun at få vist annoncer på for eksempel iPhone 5.«

Hvilke gode råd kan du give videre til andre?

»Start med projektnedbrydelse. Altid. Spørg jer selv: Hvad kan vi løbe ind i af forhindringer? I stedet for bare at gå i gang, skal man dække faldgruberne af. Ligesom man dækker ordentligt af, når man skal male. Når man først har gjort det, tager det ikke lang tid at male et rum. Vi vidste på forhånd, at det ville være annoncer, der ville blive den største udfordring, og det blev det også.«

»Står man og overvejer, om man skal gå over til responsive design på sit website, skal man kigge på tallene. Man skal kende sine kunder og se, om behovet er der. Kommer de besøgende fra mobile enheder, eller er det 99 procent fra en pc?«

»Da smartphonen slog igennem, var der rigtig mange, som fik ’jazzhænder’ og bare har råbt og skreget ’vi skal have apps, apps, apps.’ Så der blev lavet en masse uheldige løsninger, som ikke var nødvendige. I nyhedsbranchen handler det om tekst, lister og billeder, og det kan man godt klare uden en native app. Vi har også video ind over, og det har været en mindre udfordring. Men man skal lave en løsning efter hvilken branche, man er i. Hvis man for eksempel er spilproducent, skal man lave en native app.«