SlideShare a Scribd company logo
1 of 11
Responsive Web Design
Responsiivisten näyttöjen suunnittelusta



                                                       Kari Selovuo
                                           konsultti, 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

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

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


• 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
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!

More Related Content

More from Sovelto

More from Sovelto (20)

Ajankohtaista tutkimustietoa
Ajankohtaista tutkimustietoaAjankohtaista tutkimustietoa
Ajankohtaista tutkimustietoa
 
Yhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukenaYhteisöllinen tuottavuus liiketoiminnan tukena
Yhteisöllinen tuottavuus liiketoiminnan tukena
 
Hyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuusHyvinvointi ja tuottavuus
Hyvinvointi ja tuottavuus
 
Tietotyön uusi kulttuuri
Tietotyön uusi kulttuuriTietotyön uusi kulttuuri
Tietotyön uusi kulttuuri
 
Intune ja Azure RMS
Intune ja Azure RMSIntune ja Azure RMS
Intune ja Azure RMS
 
Azure Active Directory
Azure Active DirectoryAzure Active Directory
Azure Active Directory
 
3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä3D-tulostaminen ja sen hyödyt käytännössä
3D-tulostaminen ja sen hyödyt käytännössä
 
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen ​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
​Tervetuloa tutustumaan tehokkaampaan tuotekehitykseen
 
Seminaarin avaussanat
Seminaarin avaussanatSeminaarin avaussanat
Seminaarin avaussanat
 
Esimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, TilannejohtaminenEsimiehen työ on palvelua, Tilannejohtaminen
Esimiehen työ on palvelua, Tilannejohtaminen
 
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 Miten yritysarkkitehtuurilla kehitetään strategista johtamista Miten yritysarkkitehtuurilla kehitetään strategista johtamista
Miten yritysarkkitehtuurilla kehitetään strategista johtamista
 
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
Miten yritysarkkitehtuurilla parannetaan strategista johtamista?
 
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
Case Kouvolan kaupunki: Millaisia haasteita olemme kohdanneet kokonaisarkkite...
 
Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?Mitä tapahtuu, jos mitään ei tehdä?
Mitä tapahtuu, jos mitään ei tehdä?
 
Päivän avaus
Päivän avaus Päivän avaus
Päivän avaus
 
Työntekijän rooli asiakaskokemuksen syntymisessä
Työntekijän rooli asiakaskokemuksen syntymisessäTyöntekijän rooli asiakaskokemuksen syntymisessä
Työntekijän rooli asiakaskokemuksen syntymisessä
 
Tervetuloa asiakkaan aikakaudelle
Tervetuloa asiakkaan aikakaudelleTervetuloa asiakkaan aikakaudelle
Tervetuloa asiakkaan aikakaudelle
 
IT-palveluhallinnan haasteita
IT-palveluhallinnan haasteitaIT-palveluhallinnan haasteita
IT-palveluhallinnan haasteita
 
Microsoft System Center Service Manager 2012 R2 palvelunhallinnan välineenä
Microsoft System Center Service Manager 2012 R2 palvelunhallinnan välineenäMicrosoft System Center Service Manager 2012 R2 palvelunhallinnan välineenä
Microsoft System Center Service Manager 2012 R2 palvelunhallinnan välineenä
 
Yhteisöviestintä tuli työpaikoille
Yhteisöviestintä tuli työpaikoilleYhteisöviestintä tuli työpaikoille
Yhteisöviestintä tuli työpaikoille
 

Responsive web design best practises lyhyt

  • 1. Responsive Web Design Responsiivisten näyttöjen suunnittelusta Kari Selovuo konsultti, webtekniikat | Sovelto
  • 2. 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 Responsive toteutus on Sisällön optimaalista esittämistä eri kokoisilla näytöillä Responsive suunnittelu on Käyttäjän ja tarpeiden ymmärtämistä käyttötilanteen mukaan sekä sen kautta optimaalisen esitystavan suunnittelua • 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
  • 3. 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
  • 4. 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/
  • 5. 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
  • 6. 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
  • 7. 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?
  • 9. 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
  • 10. 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 • …
  • 11. Lisätietoja • kari.selovuo@sovelto.fi • juha.laamanen@sovelto.fi • Responsive Web Design -parhaat käytännöt valmennus • KIITOS!