mobiiliaamiainen 8.11.2012: teuvo väisänen, responsive design
TRANSCRIPT
![Page 1: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/1.jpg)
Responsive Design
![Page 2: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/2.jpg)
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
![Page 3: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/3.jpg)
Millainen sinä olet?
Sekakäyttäjä?
7.11.2012
3
![Page 4: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/4.jpg)
Mobiili ohitti jo PC:n v. 2011
Mobiili
488 miljoonaa toimitettua laitetta
PC
411 miljoonaa toimitettua laitetta
7.11.2012
4
![Page 5: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/5.jpg)
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
![Page 6: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/6.jpg)
Laitekirjo on valtava
19.8.2010 Copyright © Tieturi
6
![Page 7: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/7.jpg)
Onko sivustosi vain desktopille?
7.11.2012
7
![Page 8: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/8.jpg)
www.tieturi.fi
Resoluutio ja sisältö
7.11.2012
8
![Page 9: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/9.jpg)
Mobiili resoluutiot Suomessa
7.11.2012
9
![Page 10: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/10.jpg)
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
![Page 11: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/11.jpg)
Mobile First!
7.11.2012
11
![Page 12: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/12.jpg)
www.tieturi.fi
Mikä sisällössä on tärkeää?
7.11.2012
12
![Page 13: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/13.jpg)
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
![Page 14: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/14.jpg)
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
![Page 15: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/15.jpg)
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
![Page 16: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/16.jpg)
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
![Page 17: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/17.jpg)
RESS -tekniikoita
• Adaptive Images http://adaptive-images.com/
• Responsive Images https://github.com/filamentgroup/Responsive-Images
14.9.2011 Copyright © Tieturi
17
![Page 18: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/18.jpg)
Aihepiirin kursseja Tieturilla
• HTML ja CSS – käyttöliittymän taittaminen - 2pv
• Web-sivusto mobiililaitteille – 1pv
7.11.2012
18
![Page 19: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/19.jpg)
Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos!
7.11.2012
19
![Page 20: Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design](https://reader036.vdocuments.pub/reader036/viewer/2022081404/55922a4c1a28ab55338b45a7/html5/thumbnails/20.jpg)
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