mobiiliaamiainen 8.11.2012: teuvo väisänen, responsive design
TRANSCRIPT
Responsive Design
Teuvo Väisänen
• Web-asiantuntija, kouluttaja
• Tieturilla v. 1998 lähtien
• Certifications • MMCP • CIW Professional • MCDST
• Tieturi: http://www.tieturi.fi
• Private: http://teuvovaisanen.fi http://twitter.com/stedi [email protected]
• Web Standards • HTML / XHTML / HTML5 • XML • CSS • JavaScript
• Plus
• UI/UX, Accessibility, Usability, SEO, SEM, Web Analytics, Social Media, Multimedia, Adobe Creative Suite Programs, CMS systems, Mobile Web
10.5.2010 Copyright © Tieturi
2
Millainen sinä olet?
Sekakäyttäjä?
7.11.2012
3
Mobiili ohitti jo PC:n v. 2011
Mobiili
488 miljoonaa toimitettua laitetta
PC
411 miljoonaa toimitettua laitetta
7.11.2012
4
Kasvu on kovaa
” Cisco's VNI Forecast Projects the Internet Will Be Four Times as Large in Four Years”
“Global mobile Internet data traffic is forecast to increase 18 times from 2011 to 2016, to 10.8 exabytes per month (or 130 exabytes annually).”
7.11.2012
5
Laitekirjo on valtava
19.8.2010 Copyright © Tieturi
6
Onko sivustosi vain desktopille?
7.11.2012
7
www.tieturi.fi
Resoluutio ja sisältö
7.11.2012
8
Mobiili resoluutiot Suomessa
7.11.2012
9
Responsive Web Design
” Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from desktop computer monitors to mobile phones)” via Wikipedia
7.11.2012
10
Mobile First!
7.11.2012
11
www.tieturi.fi
Mikä sisällössä on tärkeää?
7.11.2012
12
CSS 3 Media Queries
• CSS 2.1 • Mahdollistaa mediatyyppien käytön,
vanhastaan tuttua screen / print –versiot web-sivuista • Valitettavasti mediatyyppi mobile oli kehnosti tuettu
• CSS 3 • CSS 3 Media Queries mahdollistaa eri ominaisuuksien haistelun • Hyvin tuettu nykyselaimissa • http://www.w3.org/TR/css3-mediaqueries/
7.11.2012
13
CSS 3 Media Features
• width • height • device-width • device-height • orientation
• aspect-ratio • device-aspect-ratio • color • color-index • monochrome • resolution • scan • grid
14.9.2011 Copyright © Tieturi
14
Koodiesimerkkejä • Monitorin resoluutio / leveys 400-700px
@media screen and (min-width: 400px) and (max-width: 700px) { … } sama toisin <link rel="stylesheet" media=”screen and (min-width: 400px) and (max-width:700px)" href="http://…" />
• Printteri ja A4 paperi <link rel="stylesheet" media="print and (max-width: 21cm)" href="http://…" />
14.9.2011 Copyright © Tieturi
15
Haasteena media - kuvat
• CSS 3 Media Queries ei vielä tällä hetkellä vastaa haasteeseen tarjota eri kuvia eri laitteille
• Valitettavasti kaikki media latautuu myös mobiililaitteeseen, vaikka käyttäisi CSS 3 Media Queries -haistelutekniikkaa
• Jotain ongelman ratkaisuksi on syntaksiin kehitteillä, mutta vielä ei mitään virallista ole tarjolla
14.9.2011 Copyright © Tieturi
16
RESS -tekniikoita
• Adaptive Images http://adaptive-images.com/
• Responsive Images https://github.com/filamentgroup/Responsive-Images
14.9.2011 Copyright © Tieturi
17
Aihepiirin kursseja Tieturilla
• HTML ja CSS – käyttöliittymän taittaminen - 2pv
• Web-sivusto mobiililaitteille – 1pv
7.11.2012
18
Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos!
7.11.2012
19
Linkit
• http://newsroom.cisco.com/press-release-content?type=webcontent&articleId=888280
• http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011
• http://www.lukew.com
• http://mediaqueri.es
• http://www.tieturi.fi ;)
7.11.2012
20