Kuinka rakensimme MSN UK: n reagoivan olympialaisten sivuston

Kolme kuukautta sitten, Kuvernöörin tekniikka oli tehtävänä MSN UK luoda reagoiva älypuhelin- ja tablet-sivusto Lontoon 2012 olympialaisille. Kirjoitimme tämän artikkelin jakamaan kohtaamamme haasteet ja dokumentoimaan menetelmät, joita käytimme sivuston luomiseen. Mutta ensin käydään läpi projektin kuvaus. Voit tarkastella itse sivustoa osoitteessa http://london.msn.co.uk .

1. Lyhyt

Saimme seuraavan tiedotteen MSN UK: lta:

Luoda reagoiva verkkosivusto vuoden 2012 olympialaisille, jotta käyttäjät voivat käyttää MSN: n olympiasisältöä mobiili- ja tablet-laitteilla. Sivuston yleinen ulkoasu noudattaa Microsoft Metro -suunnittelukieliä; Tähän sisältyy typografian käyttö, standardoidun marginaalisarjan käyttö ruudukkojärjestelmässä ja sisältöohjattu navigointi. Koska sivusto on tarkoitettu pääasiassa matkapuhelinyhteyteen, suorituskyky on tärkeä näkökohta.



2. Reagoivan sivuston suunnittelu

Ensimmäisenä tehtävänä oli tyytyä verkkosivuston yleiseen suunnitteluun. Metro-suunnittelutyyli Microsoftin tällä hetkellä käyttämä malli soveltuu hyvin hienosti ruudukkopohjaiseen ulkoasuun, joten omaksumme tämän lähestymistavan nopeasti pääsivulle.

Kun perustyylimme oli laadittu, aloimme hahmotella erilaisia ​​asetteluja, joita käytämme. Meillä oli mielessä neljä pääkatkaisupaikkaa ja asettelua valittaessa laitteita:

  • Älypuhelimet pystyssä: enintään 440 kuvapistettä leveä, 1 sarake
  • Älypuhelimet maisemassa: enintään 580 kuvapistettä leveä, 2 saraketta (käyttäen neliöitä ja suorakulmioita)
  • Tabletti pystyssä: jopa 768 kuvapistettä leveä, 3 saraketta (vain neliöt)
  • Tabletti vaakasuunnassa / työpöydällä: 1024 kuvapistettä leveä, 3 saraketta (neliöt ja suorakulmiot)

Tietäen, että älypuhelinten ja tablettien resoluutioille ei ole vakiokokoa, testasimme joukon laitteita varmistaaksemme, että kukin asettelu näytti hyvältä kullakin rikkoutumispisteellä.

Sivusto on jaettu kahdeksaan eri osioon, jotka kaikki ovat saatavilla kotisivulta:



  • Uutiset
  • Kohokohdat
  • Blogi
  • Multimedia (valokuva- ja videogalleriat)
  • Tapahtumaopas
  • Tapahtumaopas
  • Urheilijan opas
  • Live-tiedotustiedot Scheduleo-tulokset -mitali tableo-live-blogi

Tarvitsimme nämä osat aina täyttämään kaikki käytettävissä olevat leveydet (enimmäisleveys 1024 kuvapistettä) yhden, kahden tai kolmen sarakkeen kokoonpanossa, kuten alla olevassa kuvassa näkyy.

Sivuston vaihtoehtoiset asettelut, kun niitä tarkastellaan eri laitteilla

miten perspektiiviruudukkoa käytetään kuvittajana
Sivuston vaihtoehtoiset asettelut, kun niitä tarkastellaan eri laitteilla

Nämä osiot on joko asetettu neliöiksi tai suorakulmioiksi, riippuen näkymän koosta. Valitsimme ensimmäisen ja viimeisen lohkon, jotka ulottuvat neliöistä suorakulmioihin, jotta sivutasapaino olisi suurempi. Eri lohkot säilyttävät aina 10 kuvapisteen kourutilan niiden välillä riippumatta siitä, kuinka ne laajenevat täyttämään selaimen näkymän. Eri lohkot päätettiin värikoodata navigoinnin ja tunnistamisen helpottamiseksi.



Nämä kohdat johtavat kullekin sisältöalueelle omien sivujen listalle. Kolme parasta - Viimeisimmät uutiset, kohokohdat ja blogi - sisältävät diaesityksiä, jotka näyttävät jopa viisi tarinaa peräkkäin.

Multimedia-osiossa on ainutlaatuinen käyttäytyminen: se on aina täysleveä, joten kun se kasvaa, se näyttää enemmän sisältöä. Kaikki sisältö, joka ei ole näkyvissä, voidaan nähdä vierittämällä / pyyhkäisemällä ruutua.

Sivun yläosassa oleva reaaliaikainen tietovalikko romahtaa perinteisestä valikosta avattavaan valikkoon, kun selaimen leveys pienenee. Tämä antaa käyttäjille mahdollisuuden käyttää hyödyllisiä tietoja, kuten mitalitaulukkoa tai aikataulua, helposti millä tahansa sivuston sivulla.

Sivun alatunnisteessa on joitain pikalinkkejä sivuston eri osioihin ja tapahtumakohtaiset uutiset, jotka vievät käyttäjän valitulle urheilulajille omalle listalle.

3. Ruudukkojärjestelmän koodaus

Saatuamme yleisen suunnittelun ja asettelun valmiiksi, siirrymme sivuston koodaukseen. Ensimmäinen osa, jonka halusimme koodata, oli kotisivulla käytetty perusverkkojärjestelmä, jota käytettäisiin uudelleen myös joissakin muissa sivuston osissa.

Oli järkevää käyttää prosenttiosuuksia lohkojen leveyksien asettamiseen kahdesta syystä: reagoivan suunnittelun edellyttämän nestemäisen asettelun saavuttamiseksi ja lohkojen viemän helpon selvittämisen helpottamiseksi. Meillä oli kuitenkin ongelma kiinteän 10 kuvapisteen etäisyyden asettamisessa lohkojen välillä, koska saimme käärimis- ja välitysongelmia yrittäessämme sekoittaa kiinteitä välejä prosentteihin.

Ratkaisuna oli, että ulompi div asetettiin arvoon ylivuoto piilotettu , ja tässä sisäinen div kanssa a marginaali vasemmalle 10 pikseliä ja marginaalin yläosa 10 kuvapistettä. Tämä tarkoittaa, että jokaisen lohkon vasemmalle puolelle ja yläosaan ilmestyy 10 kuvapisteen kouru, mutta voimme silti asettaa ulomman div: n prosenttiosuuksiksi (esimerkiksi 50%, 25%, 25% suorakulmion ja kahden neliön luomiseksi ).

Prosentteja käytetään ulommassa divissa suorakulmion ja kahden neliön luomiseen oikeanpuoleisen asettelun ylimmälle riville

Prosentteja käytetään ulommassa divissa suorakulmion ja kahden neliön luomiseen oikeanpuoleisen asettelun ylimmälle riville

Koko sivu on kääreosastossa, joka on myös asetettu arvoon ylivuoto piilotettu ja sillä on marginaali-oikea 10 kuvapistettä luodaksesi kourun sivun oikeaan reunaan. Kun kutistat ja laajennat selainikkunaa, näet kuinka lohkot venyvät ja napsahtavat täyttämään tilan säilyttäen samalla 10 kuvapisteen kourun.

macbook pro kirkas kotelo 13 tuumaa

4. Rakenna ylävalikko reaaliaikaista tietoa varten

Olimme aiemmin löytäneet a opetusohjelma Web Designer Wallilla, jonka tiesimme toimivan täydellisesti tällä sivustolla. Pidimme siitä, miten se loi valikon, joka romahti alas pudotusvalikkoon pienemmillä näyttökokoilla, vaikka kun enemmän leveyttä on käytettävissä, siitä tulee koko valikko. Muutimme osan CSS: stä siten, että valikko täytti selaimen koko leveyden 10 kuvapisteen kouruilla ja että kun tilaa on käytettävissä, valikkokohteisiin liittyvät kuvakkeet tulevat näkyviin. Muutimme myös hieman käyttäytymistä siten, että pienimmässä koossa on erillinen kuvake, joka palaa kotisivulle.

5. Kotisivukarusellien luominen

Seuraava haaste oli päättää, miten sisältölohkojen kuvat täytetään kunkin lohkon sisällä käytettävissä oleva tila. Vaikka ajattelimme kuvalappujen käyttöä, päätimme sitä vastaan, koska taustakuvien käyttö antoi meille paremman hallinnan.

Taustakuvien käyttö tarjoaa hienon hallinnan tapaan, jolla kukin kuva täyttää tilan sisältölohkossa

Taustakuvien käyttö tarjoaa hienon hallinnan tapaan, jolla kukin kuva täyttää tilan sisältölohkossa

Asetamme taustakuvan peite , mikä tarkoittaa, että se muuttaa dynaamisesti kokoa lohkojen kanssa säilyttäen sen kuvasuhteen. Asetimme myös taustakuvat taustan sijainti: keskellä jotta kuvan oikea osa näytetään.

Seuraava askel oli lisätä dynaaminen toiminnallisuus Uutiset, Kohokohdat ja Blogi-osioihin. Halusimme, että diaesitys muuttaisi dioja ajastimessa tai olisi navigoitavissa nuolilla. Etsimällä verkossa löysimme sellaisen diaesityksen melkein mitä halusimme .

Muutettuaan joitain merkintöjä ja CSS: tä sekä muutamia pieniä päivityksiä jQueryyn, se sopi hyvin käyttötarkoitukseemme. Emme halunneet kaikkien kolmen lohkon siirtyvän samaan aikaan, joten niiden välillä on yhden sekunnin viive.

6. Multimedia-liukusäädin

Halusimme, että Multimedia-lohko vie koko käytettävissä olevan leveyden säilyttäen asetetun korkeuden. Sen sisältö olisi nähtävissä vierittämällä tai pyyhkäisemällä mobiililaitteella. Tämä on suhteellisen yksinkertainen prosessi kääreen divin asettamiseksi a: ksi leveys 100%: lla ylivuoto: auto , saadaksesi vierityspalkin näkyviin. Kääreen sisällä on sisempi div, joka kelluu suurella negatiivisella marginaalilla, mikä tarkoittaa, että se menee vain yhtä leveäksi kuin siihen sijoitettu sisältö. Jos olisimme asettaneet kiinteän leveyden, se menisi aina tähän kokoon ja jätä tyhjää tilaa selaamiseen, ellei se ole kokonaan täytetty.

Yksi vieritettävien lohkojen ongelma on, että iOS poistaa inertiapohjaisen natiivirullan. Tämä voidaan kuitenkin korjata iOS 4: lle lisäämällä: -webkit-ylivuoto-vieritys: kosketa . Myöhemmät Android-puhelimet toimivat hyvin ilman tätä, vaikka tällä hetkellä ei ole ratkaisua inertiarullan lisäämiseen Windows Phone 7.5: lle.

Seuraava oli kuvagalleriasivu. Tiesimme, että siellä on oltava lukuisia vaihtoehtoja, joten teimme vähän etsintää ja päätimme tämä ratkaisu .

CSS: n muuttamisen lisäksi teimme vähän koodin muokkaamiseksi. Yksi asia, joka jouduttiin muuttamaan, oli max-korkeus muotokuvista: koska ne täyttivät käytettävissä olevan vaakasuoran tilan, tämä loi erittäin korkeita muotokuvia, joita et voinut nähdä selaamatta alaspäin. Ratkaisu oli käyttää jotakin JavaScriptiä selainikkunan korkeuden löytämiseen, ja aseta sitten muotokuvan korkeus tähän arvoon. Leveys muuttuu kuvasuhteen säilyttämiseksi.

Meille annetussa kuvansyötössä oli joitain erittäin suuria kuvia (enintään 5 Mt), joiden kokoa oli muutettava sujuvamman mobiilikokemuksen saamiseksi. Teimme tämän palvelimen puolella käyttäen Imageresizer-laajennus .

8. Luettelo- ja artikkelisivut

Uutisluettelosivulla jokaisella elementillä on otsikko, alaotsikko, johdanto ja kuva alla olevan kuvan mukaisesti. Pienimmällä näyttökoolla päätimme olla esittämättä introa, koska tila on huippuluokkaa. Suurennettaessa kuva kelluu oikealle ja intro ja alaotsikko ilmestyvät.

Näytön tilan säästämiseksi älypuhelimen muotokuva-asettelussa ei näytetä introja uutisiin

Näytön tilan säästämiseksi älypuhelimen muotokuva-asettelussa ei näytetä introja uutisiin

Tapahtumaopas, Tapahtumaopas ja Tapaa urheilijoita käyttäytyvät hieman eri tavalla:

Sivu

Sivuston Tapaa urheilijoita -osio

Mielestämme perinteinen luettelosivu ei näyttänyt sisältöä eikä ruutupohjaista ulkoasua kuvien avulla, joten käytimme samoja peruskäsitteitä kuin kotisivu. Näytön koosta riippuen kuvien / ruutujen määrä kullakin rivillä muuttuu, kun taas laatat venyvät täyttämään käytettävissä olevan tilan. Tapahtumasivun kuvakkeet eivät laajene, koska ne olisivat pikselöityneet, joten ne sijoitetaan keskelle. sen sijaan laatikot, joihin ne sijoitetaan, laajenevat.

Artikkelisivulla on neljä pääelementtiä: otsikko, alaotsikko, pääteksti ja kuva. Pienimmillä ruuduilla kuva sijoitetaan otsikon ja tekstityksen alle, mutta tekstin yläpuolelle:

Kuvan sijainti suhteessa tekstiin vaihtelee näytön koon mukaan

Kuvan sijainti suhteessa tekstiin vaihtelee näytön koon mukaan

Kun se kasvaa, kuva kelluu oikealle hyödyntämään ylimääräistä tilaa. Suurimmassa koossaan päätekstin sarakkeen leveys on rajoitettu luettavuuden parantamiseksi. Sitten kuva kelluu tässä tyhjässä tilassa näytön oikeassa reunassa.

9. Sivuston koko ja suorituskyky

Sivuston kotisivulla on 665 kt yli 68 pyyntöä; tämä sisältää kaikki kuvat karuselleille ja CSS- ja JS-tiedostot, joita käytetään koko sivustossa.

Kaiken kaikkiaan olemme tyytyväisiä tähän lukuun. Vaikka MSN-sivusto on suurempi kuin jotkut puhtaasti mobiilisivustot, se tarjoaa enemmän kuvia ja dynaamisemman selauskokemuksen, mutta on silti ohuempi kuin jotkut muut reagoivat sivustot.

lelutarina 4 kulissien takana

10. Missä sivusto sopii reagoivaan maailmaan

Reagoivan suunnittelun käytöstä on keskusteltu paljon ja viime aikoina Nielsen vs Clark -keskustelu on lisännyt polttoainetta tähän tuleen.

Rakensimme MSN-sivuston mobiilin ensin -menetelmällä: 90 prosenttia CSS: n tyyleistä koskee yhden sarakkeen asettelua, kun taas muut 10 prosenttia vain muuttavat sisältölohkojen kokoa sen mukaan, kuinka paljon leveyttä tarjotaan laitteen tai näkymän kautta.

Meidän tapauksessamme sivusto on suunniteltu lähinnä mobiililaitteita ajatellen täydentämään olemassa olevaa työpöydän sivusto , mutta käytimme reagoivia tekniikoita hyödyntämään laitteen näkymää täysimääräisesti hyödyntämällä sujuvaa asettelua ja mediakyselyjä sopeutuaksemme käytettävissä olevaan näytön kokoon, joten tulos on edelleen hyvin käyttökelpoinen myös työpöydän verkkosivustona.

Sanat: Matt Clark

Matt Clark on etupään kehittäjä Kuvernöörin tekniikka , Lontoon keskustassa sijaitseva web-kehitystoimisto. Hänen työnsä on kattanut monenlaisia ​​alueita, reagoivasta verkkosuunnittelusta sovelluksen käyttöliittymän kehittämiseen. Kun hän ei koodaa, hän haluaa katsella klassista nyrkkeilyä ja hyödyntää Englannin vaikeasti saavutettavaa aurinkoa.