Mukautuvat web-sivut Joni Korpi 01/20
Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20
Esitelmän sisältö 1. Vanha kehitystapa 2. Uusi kehitystapa 3. Yhteenveto & parhaat käyttökohteet 4. Resursseja kiinnostuneille 03/20
Vanha tapa Monta erillistä sivustoa 04/20
Zeit Online 05/20
Facebook 06/20
Erilliset sivustot Usein täysin erillinen: HTML, CSS & Javascript Templaattikoodi Paljon työtä Lähinnä raskaille sivuille 07/20
Ongelmia Käyttäjien ohjaus Selainnuuhkiminen Vaatii jatkuvaa ylläpitoa Virhealtista Epäyhtenäisyys 08/20
Uusi tapa Yksi mukautuva sivusto 09/20
Eroja vanhaan Yksi yhtenäinen sivusto Mukautuu selaimen kokoon Ei selainnuuhkimista Ei käyttäjien ohjailua 10/20
CSS3 media queryt Osa CSS3-standardia Ottaa käyttöön tietyn palasen CSS:ää, kun määrätyt ehdot toteutuvat Periaatteessa IF-lauseke Käytetään CSS-tyylien yliajamiseen 11/20
“Jos selaimen leveys on tämä, tee näin.” #sivu {font-size: 16px; color: (min-width: 1280px) { #sivu {font-size: 18px;} } 12/20
“Tämä on mukautuva sivu. Käytä näytön oikeaa leveyttä.” 13/20
Selaintuki Standardi Kaikki paitsi: Internet Explorer 6–8 Vanha Nokia Webkit & Opera Respond.js lisää tuen 14/20
Kaksi tyyppiä Staattinen (static/adaptive) Esim. Information ArchitectsInformation Architects Perinteisempi Venyvä (responsive) Esim. Ethan MarcotteEthan Marcotte Esim. SparkboxSparkbox 15/20
Ongelmia “Kokoteeskentely” Esim. Samsung Galaxy Tab Kehittäjä ei voi tälle mitään Laitevalmistajien ongelma Tiedostokoot ehkä raskaita 3G:lle 16/20
Pohdittavaa Sopiiko sama sisältö kaikille laitteille? Haluaako kännykällä selaaja eri asioita, kuin PC:llä selaaja? Kosketusnäytöt vs. hiiri Erilaiset vaatimukset 17/20
Yhteenveto 18/20
Kertausta Uusi tapa normaaleille sivuille Media queryt: standardeja Korjataan tuki Respond.js:llä Staattinen vs. venyvä Pidetään konteksti mielessä Vanha tapa erikoistapauksissa 19/20
Kiinnostuitko? Googlaa “responsive design” A List Apart – Responsive Web Design ethanmarcotte.com ethanmarcotte.com / 20/20