1. Responsive Design

2. 2
Teuvo Väisänen
• Web-asiantuntija, kouluttaja • Web Standards
• HTML / XHTML / HTML5
• Tieturilla v. 1998 lähtien • XML
• CSS
• JavaScript
• Certifications
• MMCP
• CIW Professional • Plus
• MCDST • UI/UX, Accessibility, Usability,
SEO, SEM, Web Analytics,
Social Media, Multimedia,
• Tieturi: http://www.tieturi.fi Adobe Creative Suite Programs,
teuvo.vaisanen@tieturi.fi CMS systems, Mobile Web
• Private: http://teuvovaisanen.fi
http://twitter.com/stedi
teuvo.vaisanen@gmail.com
10.5.2010 Copyright © Tieturi

3. 3
Millainen sinä olet?
Sekakäyttäjä?
7.11.2012

4. 4
Mobiili ohitti jo PC:n v. 2011
Mobiili PC
488 411
miljoonaa miljoonaa
toimitettua toimitettua
laitetta laitetta
7.11.2012

5. 5
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

6. 6
Laitekirjo on valtava
19.8.2010 Copyright © Tieturi

7. 7
Onko sivustosi vain desktopille?
7.11.2012

8. 8
Resoluutio ja sisältö
7.11.2012 www.tieturi.fi

9. 9
Mobiili resoluutiot Suomessa
7.11.2012

10. 10
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

11. 11
Mobile First!
7.11.2012

12. 12
Mikä sisällössä on tärkeää?
7.11.2012 www.tieturi.fi

13. 13
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

14. 14
CSS 3 Media Features
• width • aspect-ratio
• height • device-aspect-ratio
• device-width • color
• device-height • color-index
• orientation • monochrome
• resolution
• scan
• grid
14.9.2011 Copyright © Tieturi

15. 15
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

16. 16
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

17. 17
RESS -tekniikoita
• Adaptive Images
http://adaptive-images.com/
• Responsive Images
https://github.com/filamentgroup/Responsive-Images
14.9.2011 Copyright © Tieturi

18. 18
Aihepiirin kursseja Tieturilla
• HTML ja CSS – käyttöliittymän
taittaminen - 2pv
• Web-sivusto mobiililaitteille – 1pv
7.11.2012

19. 19
Kiitos!
Kiitos!
Kiitos!
Kiitos!
Kiitos!
Kiitos!
Kiitos!
Kiitos!
Kiitos!
Kiitos!
7.11.2012

20. 20
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