Responsive Web Design

Responsiivisten näyttöjen suunnittelusta

Kari Selovuokonsultti, webtekniikat | Sovelto

Aluksi: Mitä responsiivisuus on?

• Responsiivisuus on helposti ymmärretty vain eri kokoisten näyttöjen tueksi

• Eri kokoisten näyttöjen tukeminen on liian rajoittunut näkemys aiheesta

• Eri kokoiset näytöt voivat olla vain viite siitä miten ja missä käyttäjä sivua lukee ja millaiset tarpeet käyttäjällä on

• Suurin haaste on tarjota sisältö oikealla tavalla käyttäjän näkökulmasta laitteesta riippumatta

Responsive toteutus on Sisällön optimaalista esittämistä eri kokoisilla näytöillä

Responsive suunnittelu onKäyttäjän ja tarpeiden ymmärtämistä käyttötilanteen mukaan sekä sen kautta optimaalisen esitystavan suunnittelua

Boston Globe & Ethan Marcotti

• Responsive Web Design:sta puhuttaessa ei saisi jättää mainitsematta idean isää – Bostonilainen web designer Ethan Marcotti

• Referenssitoteutus www.bostonglobe.com

Boston Globe & Ethan Marcotti

• Responsive Web Design idean isänä voidaan pitää Ethan Marcottia• Käsitteen lanseeraus ja idean esittely julkisuudessa

http://www.alistapart.com/articles/responsive-web-design/

Nykyisen tavan syyt ja seuraukset

• Suunnittelu, työtavat, toteutukset perustuvat printtiin!• Printillä on fyysiset mitat – rajoitteet, Webissä ne on vain itse asetettuja

rajoitteita• Designerit ovat tuoneet nämä rajoitteet keinotekoisesti webiin• Seurauksena kiinteämittaiset sivut

• Mediana web ei sisällä fyysisiä mittoja• Ajattelu laitettava uusiksi• Suunnittelu• Työtavat, prosessit, työnkulut• Toteutus• Käyttötilanteet• Laiteriippumattomuus

Miksi responsiivista toteutusta tarvitaan?

• Tekniikka on vihdoin valmis ihmisten käyttää sisältöä missä ja milloin tahansa

• Päätelaitekirjo kasvanut merkittävästi viime vuosina• Sivulatausten määrä kämmenlaitteista merkittävä, pian valtaosa• Ihmisten käyttötapa ja odotukset ovat muuttuneet

• Sisällöntuottajan kannalta helpoin ratkaisu tarjota vain yhtä sisältöä, joka automaattisesti sopeutuu kaikille teknisille laitteille, joilla sitä voidaan katsella.• Ei erikseen ylläpidettäviä mobiilisivuja

Vaihtoehto: mobiilioptimoidut sivustot

• Responsive vs. Mobile• Tarve ratkaisee: Kumpikaan ratkaisu ei ole itsestään selvä voittaja• Mobiilioptimoidulla sivulla voi olla mahdollista tarjota responsiivista

toteutusta parempi käyttökokemus• Huom! ”Voi olla”• Kulloinkin oikea ratkaisu valittava tapauskohtaisesti

• Tarjoa käyttäjälle aina mahdollisuus käyttää myös ”web-versiota” • Aidossa mobiilisivustossa voidaan toteutusta optimoida paremmin

laitetasoisesti• Laitetason profilointi – ylläpito?

Mobile vs. WWW

Entäs jos ei tehtäisi mitään…

• Joissain tapauksissa perinteinen www-sivu ajaa asiansa myös mobiililaitteilla tarkasteltuna

• Sisältö ja sivuston käyttö ratkaisee• Modernit päätelaitteet osaavat skaalata sivuja erittäin hyvin• Mobiiliselain ”renderöi” sivun alun perin laitteen näyttöä suuremmaksi ja sen

jälkeen skaalaa sen pikselitasolla näyttöön sopivaksi• Mahdollistaa sivuston zoomaamisen helposti ja tehokkaasti

Mikä oikeastaan on mobiilia?

• Käyttäjät ovat mobiileja, ei laitteet• Responsive Designin haaste on liikkuvien käyttäjien tarpeiden

palveleminen • Ihmiset liikkuvat paikasta toiseen ja käyttävät verkon sisältöä eri

tilanteissa• Tarve voi olla tarkemmin spesifiointu kuin yleisessä ”surffauksessa”

desktop laitteella• Toisaalta mobiililaitteita käytetään suuressa määrin kodin rauhassa,

omassa verkossa, omalla sohvalla löhöillen… • Tabletit ovat tuoneet esiin aivan uuden tavan käyttää nettiä• Flipboard• Facebook• Twitter• …

Lisätietoja

• kari.selovuo@sovelto.fi• juha.laamanen@sovelto.fi

• Responsive Web Design -parhaat käytännöt valmennus

• KIITOS!