SlideShare a Scribd company logo
1 of 11
Download to read offline
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

Viewers also liked

Elektronika analog 1_ch2_penyetabil
Elektronika analog 1_ch2_penyetabilElektronika analog 1_ch2_penyetabil
Elektronika analog 1_ch2_penyetabilYgrex Thebygdanns
 
INWESTPROJEKT Grudziądz
INWESTPROJEKT GrudziądzINWESTPROJEKT Grudziądz
INWESTPROJEKT GrudziądzsalonyVi
 
แก้มลิง
แก้มลิงแก้มลิง
แก้มลิงsweetynuizy
 
Moodle 2012 martin gv
Moodle 2012 martin gvMoodle 2012 martin gv
Moodle 2012 martin gvMARTINGVALLE
 
Capacitación para Autoridades de Mesas
Capacitación para Autoridades de MesasCapacitación para Autoridades de Mesas
Capacitación para Autoridades de Mesasrnconfalonieri
 
Catalogo pvp 12 13 baja
Catalogo pvp 12 13 bajaCatalogo pvp 12 13 baja
Catalogo pvp 12 13 bajaWonkandy
 
EndNote X4: Outras funcionalidades - find full text, anexar ficheiros
EndNote X4: Outras funcionalidades - find full text, anexar ficheirosEndNote X4: Outras funcionalidades - find full text, anexar ficheiros
EndNote X4: Outras funcionalidades - find full text, anexar ficheirosBibliotecas da Universidade de Aveiro
 
Reunião Pública 1T12
Reunião Pública 1T12Reunião Pública 1T12
Reunião Pública 1T12Profarma
 
Euskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdf
Euskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdfEuskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdf
Euskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdfAlberto Alberdi Larizgoitia
 
Balanço do primeiro mês de inscrições no Programa Mais Médicos
Balanço do primeiro mês de inscrições no Programa Mais MédicosBalanço do primeiro mês de inscrições no Programa Mais Médicos
Balanço do primeiro mês de inscrições no Programa Mais MédicosPalácio do Planalto
 
Bai tap lon co hoc ket cau 1 (duong thanh hung)
Bai tap lon co hoc ket cau 1 (duong thanh hung)Bai tap lon co hoc ket cau 1 (duong thanh hung)
Bai tap lon co hoc ket cau 1 (duong thanh hung)Hưng Hưng
 
Relatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do Milênio
Relatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do MilênioRelatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do Milênio
Relatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do MilênioPalácio do Planalto
 
Discurso de posse do ministro Nelson Barbosa
Discurso de posse do ministro Nelson BarbosaDiscurso de posse do ministro Nelson Barbosa
Discurso de posse do ministro Nelson BarbosaPalácio do Planalto
 

Viewers also liked (20)

Śniadanie Daje Moc
Śniadanie Daje MocŚniadanie Daje Moc
Śniadanie Daje Moc
 
La Tierra
La TierraLa Tierra
La Tierra
 
Elektronika analog 1_ch2_penyetabil
Elektronika analog 1_ch2_penyetabilElektronika analog 1_ch2_penyetabil
Elektronika analog 1_ch2_penyetabil
 
Erp
ErpErp
Erp
 
INWESTPROJEKT Grudziądz
INWESTPROJEKT GrudziądzINWESTPROJEKT Grudziądz
INWESTPROJEKT Grudziądz
 
แก้มลิง
แก้มลิงแก้มลิง
แก้มลิง
 
Moodle 2012 martin gv
Moodle 2012 martin gvMoodle 2012 martin gv
Moodle 2012 martin gv
 
Residencias profesionales 2010 2011
Residencias profesionales 2010 2011Residencias profesionales 2010 2011
Residencias profesionales 2010 2011
 
Presentation 1 34
Presentation 1 34Presentation 1 34
Presentation 1 34
 
Capacitación para Autoridades de Mesas
Capacitación para Autoridades de MesasCapacitación para Autoridades de Mesas
Capacitación para Autoridades de Mesas
 
041 de hervorming
041 de hervorming041 de hervorming
041 de hervorming
 
Catalogo pvp 12 13 baja
Catalogo pvp 12 13 bajaCatalogo pvp 12 13 baja
Catalogo pvp 12 13 baja
 
EndNote X4: Outras funcionalidades - find full text, anexar ficheiros
EndNote X4: Outras funcionalidades - find full text, anexar ficheirosEndNote X4: Outras funcionalidades - find full text, anexar ficheiros
EndNote X4: Outras funcionalidades - find full text, anexar ficheiros
 
Reunião Pública 1T12
Reunião Pública 1T12Reunião Pública 1T12
Reunião Pública 1T12
 
configuracao_endnotex5
configuracao_endnotex5configuracao_endnotex5
configuracao_endnotex5
 
Euskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdf
Euskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdfEuskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdf
Euskadi frente a noruega. posibles enseñanzas del modelo nórdico 2013.pdf
 
Balanço do primeiro mês de inscrições no Programa Mais Médicos
Balanço do primeiro mês de inscrições no Programa Mais MédicosBalanço do primeiro mês de inscrições no Programa Mais Médicos
Balanço do primeiro mês de inscrições no Programa Mais Médicos
 
Bai tap lon co hoc ket cau 1 (duong thanh hung)
Bai tap lon co hoc ket cau 1 (duong thanh hung)Bai tap lon co hoc ket cau 1 (duong thanh hung)
Bai tap lon co hoc ket cau 1 (duong thanh hung)
 
Relatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do Milênio
Relatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do MilênioRelatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do Milênio
Relatório Nacional de Acompanhamento dos Objetivos de Desenvolvimento do Milênio
 
Discurso de posse do ministro Nelson Barbosa
Discurso de posse do ministro Nelson BarbosaDiscurso de posse do ministro Nelson Barbosa
Discurso de posse do ministro Nelson Barbosa
 

Similar to Responsive web design best practises lyhyt

Adobe ja HTML5
Adobe ja HTML5Adobe ja HTML5
Adobe ja HTML5Sovelto
 
Web-sisällönhallinta ja mukautuva esitystapa
Web-sisällönhallinta ja mukautuva esitystapaWeb-sisällönhallinta ja mukautuva esitystapa
Web-sisällönhallinta ja mukautuva esitystapaLoihde Advisory
 
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...Arto Paavola
 
Responsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielmaResponsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielmaOuti Kotala
 
Responsiiviset layoutit study
Responsiiviset layoutit studyResponsiiviset layoutit study
Responsiiviset layoutit studyOuti Kotala
 
Responsive Design
Responsive DesignResponsive Design
Responsive Designjmensonen
 
Talent Base: Sisällönhallinta ja responsiivinen esitystapa
Talent Base: Sisällönhallinta ja responsiivinen esitystapaTalent Base: Sisällönhallinta ja responsiivinen esitystapa
Talent Base: Sisällönhallinta ja responsiivinen esitystapaLoihde Advisory
 
Talent Base: Sisällönhallinta ja responsiivinen web design
Talent Base: Sisällönhallinta ja responsiivinen web designTalent Base: Sisällönhallinta ja responsiivinen web design
Talent Base: Sisällönhallinta ja responsiivinen web designLoihde Advisory
 
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive DesignMobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive DesignTieturi Oy
 
Internet sivujen tuottaminen
Internet sivujen tuottaminenInternet sivujen tuottaminen
Internet sivujen tuottaminenwebesko
 
Aamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudella
Aamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudellaAamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudella
Aamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudellaNemein
 
SON & Nemein Aamiaisseminaari 2012 - SON Helsinki
SON & Nemein Aamiaisseminaari 2012 - SON HelsinkiSON & Nemein Aamiaisseminaari 2012 - SON Helsinki
SON & Nemein Aamiaisseminaari 2012 - SON Helsinkidynamo&son
 
Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...
Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...
Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...Menestyvät Järjestöt
 
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin  Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin Jani Kykyri
 
Digitaalinen palvelumuotoilu
Digitaalinen palvelumuotoilu Digitaalinen palvelumuotoilu
Digitaalinen palvelumuotoilu Antti Leino
 
InfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aaltoInfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aaltoJarno Malaprade
 
Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.
Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.
Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.Tuija Riekkinen
 
Verkkosivujen suunnittelu
Verkkosivujen suunnitteluVerkkosivujen suunnittelu
Verkkosivujen suunnitteluKaty Tuupanen
 
Uusi SharePoint 2013 paremman liiketoiminnan mahdollistajana
Uusi SharePoint 2013 paremman liiketoiminnan mahdollistajanaUusi SharePoint 2013 paremman liiketoiminnan mahdollistajana
Uusi SharePoint 2013 paremman liiketoiminnan mahdollistajanaPerttu Monthan
 

Similar to Responsive web design best practises lyhyt (20)

Adobe ja HTML5
Adobe ja HTML5Adobe ja HTML5
Adobe ja HTML5
 
Web-sisällönhallinta ja mukautuva esitystapa
Web-sisällönhallinta ja mukautuva esitystapaWeb-sisällönhallinta ja mukautuva esitystapa
Web-sisällönhallinta ja mukautuva esitystapa
 
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...
Kelan verkkopalvelun responsiivinen suunnittelu ja toteutus, Viestintävirasto...
 
Responsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielmaResponsiiviset layoutit tutkielma
Responsiiviset layoutit tutkielma
 
Responsiiviset layoutit study
Responsiiviset layoutit studyResponsiiviset layoutit study
Responsiiviset layoutit study
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Talent Base: Sisällönhallinta ja responsiivinen esitystapa
Talent Base: Sisällönhallinta ja responsiivinen esitystapaTalent Base: Sisällönhallinta ja responsiivinen esitystapa
Talent Base: Sisällönhallinta ja responsiivinen esitystapa
 
Talent Base: Sisällönhallinta ja responsiivinen web design
Talent Base: Sisällönhallinta ja responsiivinen web designTalent Base: Sisällönhallinta ja responsiivinen web design
Talent Base: Sisällönhallinta ja responsiivinen web design
 
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive DesignMobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
 
Internet sivujen tuottaminen
Internet sivujen tuottaminenInternet sivujen tuottaminen
Internet sivujen tuottaminen
 
Aamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudella
Aamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudellaAamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudella
Aamiaisseminaari 5.4.2012: Suunnittelu ja viestintä mobiiliaikakaudella
 
SON & Nemein Aamiaisseminaari 2012 - SON Helsinki
SON & Nemein Aamiaisseminaari 2012 - SON HelsinkiSON & Nemein Aamiaisseminaari 2012 - SON Helsinki
SON & Nemein Aamiaisseminaari 2012 - SON Helsinki
 
Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...
Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...
Menestyvät järjestöt 2020: Saavutettavuus verkkosivuilla, Avoine Oy, osa Vite...
 
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin  Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
Talentum UX summit 2013: Turbovaihde käyttöliittymä toteutuksiin
 
Digitaalinen palvelumuotoilu
Digitaalinen palvelumuotoilu Digitaalinen palvelumuotoilu
Digitaalinen palvelumuotoilu
 
Verkkosivut vuonna 2014
Verkkosivut vuonna 2014Verkkosivut vuonna 2014
Verkkosivut vuonna 2014
 
InfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aaltoInfoWeb 4 - sisällönhallinnan uusi aalto
InfoWeb 4 - sisällönhallinnan uusi aalto
 
Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.
Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.
Kotisivut kuntoon - missä kannattaa panostaa, missä pihistää.
 
Verkkosivujen suunnittelu
Verkkosivujen suunnitteluVerkkosivujen suunnittelu
Verkkosivujen suunnittelu
 
Uusi SharePoint 2013 paremman liiketoiminnan mahdollistajana
Uusi SharePoint 2013 paremman liiketoiminnan mahdollistajanaUusi SharePoint 2013 paremman liiketoiminnan mahdollistajana
Uusi SharePoint 2013 paremman liiketoiminnan mahdollistajana
 

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!