4.2.2014

Miten uudistettiin Aamulehden uudet responsiiviset HTML5-mobiilisivut

Aiemmat Aamulehden mobiilisivut tehtiin vasta kaksi vuotta sitten, mutta jo nyt ne olivat tulleet tiensä päähän. Mobiilikäyttö kasvaa kohisten, keskimäärin sivustolla on 300 yhtäaikaista lukijaa ja 70,000 eri viikkokävijää. Tästä syystä mobiiliin haluttiin panostaa ja tarjota lukijoille modernisoitu käyttäjäkokemus. Suomesta on tullut Windows Phone kansaa. Huikeat 64% m.aamulehti.fi kävijöistä käyttää Windows puhelinta, kakkosena on Android […]
aamulehti-uudistus

Aiemmat Aamulehden mobiilisivut tehtiin vasta kaksi vuotta sitten, mutta jo nyt ne olivat tulleet tiensä päähän. Mobiilikäyttö kasvaa kohisten, keskimäärin sivustolla on 300 yhtäaikaista lukijaa ja 70,000 eri viikkokävijää. Tästä syystä mobiiliin haluttiin panostaa ja tarjota lukijoille modernisoitu käyttäjäkokemus.

Suomesta on tullut Windows Phone kansaa. Huikeat 64% m.aamulehti.fi kävijöistä käyttää Windows puhelinta, kakkosena on Android 17%:lla ja kolmosena iOS 12%:lla. Käytetyin puhelin on edelleen Nokian ensimmäinen Lumia-puhelin, Lumia 800 ja kahdeksan kymmenestä käytetyimmästä laitteesta on Nokian Lumia malleja.

Prosessi alkoi yhteisellä työpajalla asiakkaan kanssa, jossa sovittiin projektin tavoitteet ja määriteltiin työjono (backlog). Uudesta sivustosta haluttiin näyttävät, helposti selailtavat ja visuaalisesti rikkaammat kuin aiemmat sivut. Kuitenkin haluttiin säilyttää nopea latausaika. Aikataulu projektille oli kohtuullisen tiukka, sivut haluttiin liveksi itsenäisyyspäiväksi kun seurataan Tampere-talon juhlia. Lopulta 5.12. tapahtunut liveytys olikin vaiherikasta puuhaa kun toimistomme alueelta katkesi tyystin netti ja samalla yhteys GIT-versionhallintaserveriimme. Lopulta livetys tehtiin kännykän netin yli editoimalla suoraan livesivuja. Ei ehkä niitä parhaita käytäntöjä, mutta sivut saatiin julkaistua ajoissa 🙂 ja tästä iso kiitos tiimille.

Responsiivinen design suoraan selaimessa

Koska laitteita ja erityisesti ruutukokoja on useita ja niitä voi käyttää horisontaalisesti sekä vertikaalisesti, suunniteltiin mobiilisivut responsiivisiksi. Hyvä responsiivinen suunnittelu ei tapahdu Photoshopissa vaan suoraan selaimessa. Kuvankäsittelyohjelma antaa vain yhden kuvan millainen designista tulee. Sen avulla ei voi tietää miten design taittuu eri laitteissa.

 

responsiivinen_mobiili_aamulehti-html5

 

Tämän lisäksi moderni web design pohjautuu entistä enemmän typografiaan ja fonttien käyttöön ja selain on ainoa paikka missä tiimi ja asiakas näkevät oikeasti miltä sivut tulevat näyttämään. Tästä syystä suunnittelija Teemu Into lähti tekemään heti ensimmäisten paperikonseptien jälkeen designia suoraan selaimeen skippaamalla kokonaan Photoshop-vaiheen.

Vaakaorientaatio tehtiin muuten samanlaiseksi kuin pysty, mutta listasivussa kuva asemoidaan vasemmalle ja teksti sen viereen. Muuten pystysuunnassa koko sivun levyiset kuvat olisivat levenneet vaakatasossa niin leveäksi, että selailu olisi muuttunut mahdottomaksi.

Ensimmäisen version valmistuttua käytiin design läpi asiakkaan kanssa ja työpajassa tehtiin muutokset suoraan sivuston protoon. Näin nopeutettiin iteratiivista suunnitteluvaihetta huomattavasti.

Front-end koodaus ja automatisointityökalut

Front-end koodaus on monimutkaistunut laitekirjon ja uusien teknologioiden myötä huomattavasti. Vastauksena koodin laadunvarmistukseen on automatisoida mahdollisimman paljon tehtäviä. Frontista projektissa vastasi Jussi Löf.

Koska sivustolla käytetyin laite on jo vanhentunut Lumia 800 ja sen selain hyvin rajoittunut, päätettiin heti alusta alkaen pitää JavaScript-koodi minimissään. Design-vaiheessa oli käytetty responsiivista Zurb Foundation -kehikkoa. Kehikoilla kuten Foundation ja Twitter Bootsrap on hyvät ja huonot puolensa. Niiden avulla saadaan todella nopeasti responsiivinen design kasaan, mutta koodiin jää yleensä tuhansia riviä turhaa kehikon koodia jota ei tarvita. Koodista karsittiin turhat JavaScriptit pois ja samalla todettiin, ettei haluta käyttää jQueryä, joka aiheuttaa turhia yhteensopivuusongelmia vanhempien laitteiden kanssa. Samalla siivottiin Gruntin uncss toiminnolla käyttämätön CSS pois.

JavaScriptiä käytettiin lopulta vain kuvien käsittelyyn, “scroll-to-top” nappiin ja navigaation lokero-toimintoon. Lokeron saamiseksi toimimaan sulavasti eri Android-laitteilla sekä ylipäänsä Lumia 800:lla veikin sitten itsessään jo yhden työpäivän.

Lataa lisää vai pitkä etusivu?

Etusivulle haluttiin paljon juttuja. Ratkaisuksi tapetilla oli Suomen suosituimpien mobiilisivustojenkin käyttämä “lataa lisää” nappi. Nappi auttaa pitämään sivun listauksen alkuun lyhyenä jolloin käyttäjä voi halutessaan ladata lisää juttuja näyttöön. Tässä haasteena on saada lista toimimaan niin, että kun käyttäjä palaa listaan itse artikkelista, niin palataan samaan kohtaan listaa kuin mistä lähdettiin (Suomen isoimmilla mobiilisaiteillakaan tämä ei toimi, toim. huom.)

Päädyimme pitkään etusivuun jossa ladataan heti n. 100 juttua alekkain eri listauksiin. Sivun yläosassa olevilla ankkureilla pääsee kätevästi Luetuimmat- ja Tuoremmat -listauksiin ja koko ajan näkyvillä olevalla ’takaisin ylös’ -napilla pääsee etusivun ylös. Näin käyttäjä voi klikata vaikka 75 juttua ja luettuaan jutun pääsee takaisin -napilla juuri siihen kohtaan listassa missä oli menossa.

Toisaalta 100 jutun kuvien lataaminen vie turhaa kaistaa ja hidastaisi sivustoa, joten latausaikojen nopeuttamiseksi ladataan etusivun juttuihin ensin vain n. 5 kt:n kokoiset kuvat. Kun käyttäjä selaa sivua, ladataan paremman resoluution kuvat vasta kun kuva tulee näytölle. Sivuston Google PageSpeed arvoksi saatiin 90/100 ja latausaika koko etusivulle 931 millisekuntiin.

 

hmlt5-sivun nopeus

 

Tämäkin ominaisuus piti korjata moneen otteeseen Windows -puhelimille.

Niille jotka jaksavat selata koko pitkä etusivun loppuun päätettin lisätä sokeriksi pohjalle Fingerpori sarjakuva.

Back-end integraatiot ja uudet ominaisuudet

Sivuston taustajärjestelmä perustuu Geniem App5 -mobiilialustaan, joka on integroitu Aamulehden käyttämään Doris-sisällönhallintajärjestelmään. Uutta sivustoa varten toteutettiin liitettyjen juttujen käsittely, jotta artikkeleissa voidaan esittää siihen liittyvä jutut. Back-endissä toteutettiin myös cache-ratkaisu, jotta sivut latautuvat nopeasti. Back-end arkkitehtinä projektissa toimi Marko Lenkkeri.

Aiemmassa sivustossa listattiin jutut vain tuoreusjärjestyksessä. Nyt etusivun juttujärjestys haetaan Aamulehden verkon julkaisujärjestelmästä myös mobiiliin. Näin saadaan arvotettua tärkeitä uutisia paremmin. Luetuimmat listaus on puhtaasti mobiilin luetuimmat, eikä ole siis sama kuin täysversiossa.

Työnhallinta, testaus, ja laadunvarmistus

Vaikka projekti oli kohtuullisen pieni, oli siinä mukana useampi henkilö, joten työnhallinta vietiin Jira Agileen. Käytännössä projekti jakaantui kolmeen lyhyeen sprinttiin: konsepti ja design, koodausvaihe ja viimeistelyt ja testaus. Projektin teknisenä liidinä toimi Hannu Kumpula, joka veti projektin kasaan ja vastasi tekniikasta tiimin kanssa.

Testaus päätettiin toteuttaa sekä automaatiotesteillä että oikeilla laitteilla, koska emulattorit eivät anna oikeaa kuvaa sivuston käyttäytymisestä ja käyttäjäkokemuksesta. Testaukseen otettiin laitteita tärkeimmistä alustoista:

Windows Mobile: Lumia 800 ja Lumia 520

iOS: iPhone 5, iPhone 4s, iPhone 4, iPhone 3 ja iPad

Android: LG G2, Samsung Galaxy S ja Samsung Ace

Symbian: Nokia N97

Testityökaluna käytettiin Seleniumiin kirjoitettuja automaatiotestejä, joita ajetaan Browserstack-palvelun kautta eri laitteissa, mitä meidän Device Labista ei löydy. Automaatiotestien hyvä puoli on myös niiden uudelleenkäytettävyys regressiotesteinä kun sivustoa kehitetään myöhemmin eteenpäin. Laadunvarmistuksesta projektissa vastasi Artturi Ala-Kauttu.

Tulokset

Tiukan aikataulun vuoksi muutamat asiat jätettiin toteutettavaksi vielä julkaisun jälkeen, joten pientä viilausta on vielä odotettavissa. Mutta jo nyt on saatu hyvää palautetta.

iPhone 3 (iOS 4.0) käyttäjän kommentti: “Miten tämä on näin nopea”, kun on tottunut vanhan puhelimen selaimen jäätävään hitauteen.

SonyEricsson käyttäjän kommentti: “Hyvä toteutus. Loistavaa että takaisin-napilla pääsee sinne kohtaan pitkässä listassa mistä sitä klikkasi, jää iänikuinen turha rullailu pois.”

Sivusto saatiin lanseerattua ennen itsenäisyyspäivää ja tulokset olivat todella upeat. Lanseerausviikon kävijämäärän kasvu oli lähes 60% 110,000 viikkokävijään. Tulosta siivittivät mielenkiintoinen uutisointi Tampere-talon kiekkovieraista.