Lataa esitys
Esittely latautuu. Ole hyvä ja odota
JulkaistuVille-Veikko Lehtonen Muutettu yli 8 vuotta sitten
1
Mukautuvat web-sivut Joni Korpi 01/20
2
Määritelmä Sivu, jonka asettelu – ja mahdollisesti sisältö – muuttuvat laitteen koon mukaan. 02/20
3
Esitelmän sisältö 1. Vanha kehitystapa 2. Uusi kehitystapa 3. Yhteenveto & parhaat käyttökohteet 4. Resursseja kiinnostuneille 03/20
4
Vanha tapa Monta erillistä sivustoa 04/20
5
Zeit Online 05/20
6
Facebook 06/20
7
Erilliset sivustot Usein täysin erillinen: HTML, CSS & Javascript Templaattikoodi Paljon työtä Lähinnä raskaille sivuille 07/20
8
Ongelmia Käyttäjien ohjaus Selainnuuhkiminen Vaatii jatkuvaa ylläpitoa Virhealtista Epäyhtenäisyys 08/20
9
Uusi tapa Yksi mukautuva sivusto 09/20
10
Eroja vanhaan Yksi yhtenäinen sivusto Mukautuu selaimen kokoon Ei selainnuuhkimista Ei käyttäjien ohjailua 10/20
11
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
12
“Jos selaimen leveys on tämä, tee näin.” #sivu {font-size: 16px; color: black;} @media (min-width: 1280px) { #sivu {font-size: 18px;} } 12/20
13
“Tämä on mukautuva sivu. Käytä näytön oikeaa leveyttä.” 13/20
14
Selaintuki Standardi Kaikki paitsi: Internet Explorer 6–8 Vanha Nokia Webkit & Opera Respond.js lisää tuen 14/20
15
Kaksi tyyppiä Staattinen (static/adaptive) Esim. Information ArchitectsInformation Architects Perinteisempi Venyvä (responsive) Esim. Ethan MarcotteEthan Marcotte Esim. SparkboxSparkbox 15/20
16
Ongelmia “Kokoteeskentely” Esim. Samsung Galaxy Tab Kehittäjä ei voi tälle mitään Laitevalmistajien ongelma Tiedostokoot ehkä raskaita 3G:lle 16/20
17
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
18
Yhteenveto 18/20
19
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
20
Kiinnostuitko? Googlaa “responsive design” A List Apart – Responsive Web Design ethanmarcotte.com / @beep ethanmarcotte.com lessframework.com @jonikorpi / me@jonikorpi.comme@jonikorpi.com 20/20
Samankaltaiset esitykset
© 2024 SlidePlayer.fi Inc.
All rights reserved.