Kari Selovuon ajatuksia Mobile First ja Responsive webdesign tilasta ja tulevaisuudesta.

1. Mobile First
MOBILE FIRST JA RESPONSIVE WEBDESIGN VUONNA
2014
TIIVISTELMÄ LUENNOSTA 28.10.2013

2. Yleiskatsaus tulevaan
Vuoden 2014 trendit ja suunnat:
◦
◦
◦
◦
◦
Responsive Design ‘ainoa’ websivujen toteutustekniikka
Responsive Design käsitteenä laajempi kuin visuaalinen suunnittelu
Mobiilikäyttö kasvaa entisestään
Suorituskyvyn ja nopeuden merkitys korostuu
Laitteiden natiivien ominaisuuksien hyödyntäminen
◦ Syötetavat, input tyypit
◦ Web-applikaatiot yleistyvät
◦ Hybridi-applikaatiot natiivitekniikoiden ohi

3. Responsive Design nyt
Responsive Design = Designing for Resources
Resources käsitteenä
◦
◦
◦
◦
Näytön koko
Verkon ja yhteyden tyyppi
http -pyyntöjen määrä (yhteyden optimointi)
Kuvien ja sisällön ehdollinen lataus (Conditional Loading)
Käytettävyyden korostaminen

4. Mobile First
Mobile First on menetelmä ja lähestymistapa – ei ratkaisu tai teknologia
◦ Mobile First on olennaisen etsimistä!
◦ Suunnittelemalla rajallisiin resursseihin löydetään sisällön ja käytön ’ydin’
◦ Helpottaa desktop -version suunnittelua
◦ Helpompi lisätä kuin karsia
On sisällön ja toiminnallisuuden suunnittelua

5. Progressive Enhancement
the journey from simplicity to complexity
Tapa, jolla Mobile First ajattelu viedään toteutukseen
◦ “Progressive Enhancement is the principle of starting with a rock-solid foundation and then
adding enhancements to it if you know certain visiting user-agents can handle the improved
experience.”
Perustuu ‘kerroksittaiseen’ kehittämiseen
◦ Layer 1 - puhdas semanttinen HTML (näkyy alimman tason selaimille)
◦ Layer 2 - CSS tyylittely (visuaalinen muotoilu)
◦ Layer 3 - JavaScript (parannettu toiminnallisuus)

6. Progressive Enhancement
Tavoitteena toteutus, jossa sisältö on käytettävissä vähäisimmillä ominaisuuksilla
◦ Peruspuhelin, hitaat yhteydet…
◦ Nopeasti latautuva kevyt html-sisältö
CSS tyyleillä parannetaan käyttökokemusta vain jos laite tukee niitä
◦ Tyylitiedostojen lataus ja visuaaliset efektit vain tuettuihin laitteisiin
◦ Tunnistamisen ongelmat
JavaScript toteutus tuomaan toiminnallisuutta vain edistyneimpiin laitteisiin
◦ Viivästetty lataus
◦ Oikea suoritusjärjestys

7. Mobiili web – Key Points
Mobiilikäyttö kasvussa – kuulostaa kliseeltä mutta on totta
Käyttötavat muuttuvat – sovellusten ja toteutusten on muututtava vastaavasti
Käyttäjät oppineet vaatimaan sovelluksilta oikeaa toteutusta
Ennen rajoite, nyt mahdollisuus
◦ Pieni näyttö
◦ Hidas verkko
◦ Syötteen vaikeus
-> responsiivinen suunnittelu, Mobile First ajattelu
-> fiksu toteutus, tehostaa myös nopean verkon toimintaa
-> laitteiden uudet ominaisuudet, parempi käyttökokemus

8. Responsive Design
Sama sisältö kaikille laitteesta riippumatta
◦ Verkkosivut ja muut sähköiset julkaisut
Oikein toteutettuna toimii automaattisesti
◦ Erillistä laitetunnistusta ei tarvita
◦ Käytössä olevan näyttöalueen koko ja muoto määräävät esitystavan
Erillisen mobiilisivuston tarve ei useinkaan perusteltua
Valinta mobiilioptimoidun sivuston ja responsiivisen sivuston välillä on tehtävä
tapauskohtaisesti
◦ Molemmilla on hyvät puolensa
◦ Kustannuskysymys?
Ei ole sovellusratkaisu vaan selaimessa näytettävän sivuston ominaisuus

9. Don’t Shrink - Rethink
Eri kokoiset ja pienet näytöt eivät ole ongelma, ne ovat vain eri kokoisia ja pieniä
näyttöjä!
Todellinen suunnittelun haaste on:
◦
◦
◦
◦
◦
◦
◦
Käyttötilanteen ja käyttäjän tarpeen tunnistaminen
Käyttötavan huomiointi (kosketusnäyttö, näppäimistö, muut syötetavat)
Sisällön priorisointi on suunnittelun perusta
Esitystavan valinta eri kokoisille näytöille
Sama vai eri sisältö (mm. kuvat) eri laitteille
Tiedonsiirtomäärän huomiointi
Sivulatausten ja sisällön lataamisen suunnittelu

10. Responsive Layout – Media Queries
Eri näkymät toteutetaan CSS Media Query säännöillä
Unohda laitteiden näyttöjen pikselimitat
◦ Layout perustuu sisältöön ja sen hyvään esittämiseen
Venytä / kavenna selainikkunaa.
◦ Kun sivu alkaa näyttää kamalalta olet löytänyt media queryn paikan!
@media screen and (min-width: 18em) {
}

11. Kuvat verkkosivuilla
Modernit selaimet skaalaavat kuvia hyvin laadun silti säilyessä hyvänä
Suurten kuvien lataaminen pieniin laitteisiin ei ole järkevää
◦ Raskasta ja hidasta
◦ Saattaa aiheuttaa käyttäjälle maksuja ylimääräisenä tiedonsiirtona
◦ Kuvien valintaan ei valmista ratkaisua http -protokollassa
Korkearesoluutioiset näytöt (Apple retina) tuo uudet haasteet
◦ Laitteen fyysinen koko ei ole enää viite sen pikselimitoista
◦ RWD tekniikat perustuvat pikselimääräiseen mitoitukseen
RESS = Responsive Design & Server Side Components

12. Web sivu ”sovelluksena”
Web sivu / sovellus voidaan asentaa laitteen (iOS) aloitunäkymään
◦ Selainikkunan (frame) piilottaminen mahdollista
◦ <meta name="apple-mobile-web-app-capable" content="yes” >
◦ Asenna sovellus kotivalikkoon
◦ Bookmark – Add to Home screen
◦ Alustoittain voi olla eroja
Käytä responsiivista toteutusta

13. EnhanseJS.js – Ehdollinen lataus
EnhanceJS.js on kevyt skripti, joka toimii ehdollisena ominaisuuksien lataajana
Nopeuttaa sivujen latausta merkittävästi
◦ Ei lataa turhaa sisältöä ellei laite (selain) tue ominaisuutta
http://www.enhance-js.com/
https://github.com/filamentgroup/EnhanceJS

14. EnhanseJS.js – Ehdollinen lataus
Ladataan vain ’pakolliset’ skriptit <head> osiossa
◦ Nekin käyttäen enhancejs skriptiä
◦ Määrittele ominaisuudet ladattavaksi vain jos tiedät laitteen kykenevän niitä käyttämään

15. Yhteenveto
Mobile First on:
◦ Ajatustapa ja prosessi
◦ Kattaa sisällön, ulkoasun, teknisen toteutuksen ja käytettävyyden ongelmat
◦ Ei rajoitu mobiililaitteisiin vaan myös desktop toteutuksiin
Suorituskyky ei ole ominaisuus vaan vaatimus
◦ Ei jälkeenpäin lisättävä ominaisuus
◦ Koko toteutuksen suunnittelun perusta
Lack of Performance is Lack of Planning

16. Kiitos
Kysymyksiä, ajatuksia, toiveita, kommentteja
Corellia Helsinki Oy
◦
◦
◦
◦
◦
◦
Vilhonkatu 5A, 00100 Helsinki
Kari Selovuo, Advisor ACI, ACP
kari@corellia.fi
040 1565 040
http://fi.linkedin.com/in/kariselovuo/
@KariSelovuo