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

It-udfordringen: Én webside, der tilpasser sig de besøgendes skærmstørrelse, har nu afløst flere forskellige dedikerede sites hos Børsen. Samtidigt fik indholdet en slankekur, som også hjalp gevaldigt på 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.

Sådan ser Borsen.dk ud i to kolonners bredde. Siden tilpasser løbende indholdet, hvis man på en desktop gør browservinduet mindre og mindre.
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.«

Kommentarer (10)

Jonas Nyrup

Det afhænger af hvad der skal vises, om hele bredden på brede skærmen kan anvendes. Hvis linjerne bliver for brede, nedsættes læsehastigheden.

Google Calendar med uge- eller månedsvisning passer fint til min 27" 2560x1440 skærm, da indholdet er delt op i afgrænsede grupper.

Jeg har oplevet sider hvor blev nødt til at resize browservinduet for at kunne læse teksten.

Sammenlign selv denne artikel hos børsen i orginal version og en "bredformatsversion"
http://borsen.dk/nyheder/investor/artikel/1/245412/der_er_daekket_op_til...
http://i.imgur.com/nchwh.jpg

Jeg foretrækker selv den smalle version.

Peter Müller

Det sjove er at når man sidder på en skærm med 2000 px i bredden og prøver at lave en hjemmeside som fylder hele bredden ud med indhold, så bliver det hele komplet uoverskueligt og ulæseligt.

Læsbarhed har høj prioritet, så at fylde mere indhold ind på den samme plads er langt fra altid en fordel.

Skfitet til mobile first taler sit tydelige sprog om at simplere er bedre, hvilket også inkluderer at reducere visuel larm.

Kasper Grubbe

Hvorfor går denne linje igen 9 gange efter hinanden?

<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>  
<script>MJS = MJS || {}; MJS.scriptExecuteOnAppend = true; </script>

Ellers kan jeg godt lide løsningen med mobil/desktop reklameleverandørene.

Carsten Hahn

...hører vel så også at de samtidig halverede en stor del af artiklerne således at ikke betalende kun ser de første 10-12 linier af artiklen. Ydermere forsvandt muligheden for at deltage i debatten derinde hvis man ikke er betalende.
Jeg siger ikke at "det er for dåååårligt" at man ikke se se artikler og deltage i debat længere... jeg vil bare tro at den ændring har gjort at artiklerne serveres en del hurtigere nu. Det er noget hurtigere at levere 10 liniers tekst uden kommentarer end det er at levere 80 liniers tekst med 8-10 tilhørende kommentarer.

Kenneth Lylloff

Ja, det kan du jo mene Jens. Men de fleste af de web-applikationer og hjemmesider jeg bruger til hverdag udnytter faktisk skærmen relativt godt. Og det giver sjældent mening for mig at have små browser sessioner åbne. Jeg undrer mig blot over at specielt aviser/tidsskrifter er så piv-ringe til for det første at udnytte skærmen (hvis jeg vælger at køre fuldskærm) og for det andet at være mere intelligente web-apps. De fleste er bare 'døde' lister af tekst og billeder. De virker på mig som 'bare en avis med strøm på'. Internettet som medie burde kunne bruges betydeligt bedre og udnytte at mennesket faktisk ikke tænker lineært.
Men derudover, er jeg da enig i at 'less-is-more'. Og bare at brede de eksisterende avishjemmesider ud til fuld skærmbrede ville være en katastrofe (jvf. eksemplerne fra Jonas Nyrup). Men det er jo netop heller ikke det jeg forventer. Jeg forventer en bedre horisontal udnyttelse, frem for endeløse sider hvor mit musehjul bliver slidt :-)

Lasse Lindgård

Jeg er pænt imponeret over det. Det er min Chrome browser også.
Hvis jeg resizer horisontalt 20-30 gange, så går Chrome på røven :-P

  • og i firefox siger den at den henter fonten hver gang man resizer?
Søren Søgaard

Fedt at se at der kommer flere af de større sites på, som forsøger sig med Responsivt Web Design. Web + Mobil ser fint ud selvom der kan være flere holdninger til diverse ting. Dog ser tablet versionen dog ud til at være den der arbejdet mindst med så måske er udviklingen startet ovenfra og ikke mobile first. Tingene på en tablet står nogle gange og "skriger" lidt til hinanden ;-)

Log ind eller opret en konto for at skrive kommentarer

JobfinderJob i it-branchen

TDC skifter koncernchef efter faldende mobilomsætning

Jesper Stein Sandal Mobil og tele 14. aug 2015

Nyeste job

KurserStyrk dine evner med et kursus

CERT 70-489 : Developing Microsoft SharePoint Server 2013 Advanced Solutions

Hvornår: 2015-11-27 Hvor: Storkøbenhavn Pris: kr. 4950.00

CERT 70-461 Querying Microsoft SQL Server 2014

Hvornår: 2015-12-10 Hvor: Østjylland Pris: kr. 4950.00

Projektleder med gennemslagskraft

Hvornår: 2015-09-22 Hvor: Storkøbenhavn Pris: kr. 11400.00

Latin (deltid)

Hvornår: Hvor: Efter aftale Pris: kr. Efter aftale

Project kursus grundlæggende

Hvornår: 2015-09-14 Hvor: Storkøbenhavn Pris: kr. 5900.00