Responsive Design
2       Teuvo Väisänen       • Web-asiantuntija, kouluttaja                  • Web Standards                              ...
3       Millainen sinä olet?       Sekakäyttäjä?7.11.2012
4       Mobiili ohitti jo PC:n v. 2011       Mobiili                 PC       488                     411       miljoonaa ...
5       Kasvu on kovaa       ” Ciscos VNI Forecast Projects the Internet Will Be       Four Times as Large in Four Years” ...
6       Laitekirjo on valtava19.8.2010                  Copyright © Tieturi
7       Onko sivustosi vain desktopille?7.11.2012
8       Resoluutio ja sisältö7.11.2012                      www.tieturi.fi
9       Mobiili resoluutiot Suomessa7.11.2012
10       Responsive Web Design       ” Responsive web design is an approach to web design in       which a site is crafted...
11       Mobile First!7.11.2012
12       Mikä sisällössä on tärkeää?7.11.2012                            www.tieturi.fi
13       CSS 3 Media Queries       • CSS 2.1            • Mahdollistaa mediatyyppien käytön,              vanhastaan tuttu...
14       CSS 3 Media Features       •    width                        •    aspect-ratio       •    height                 ...
15       Koodiesimerkkejä       • Monitorin resoluutio / leveys 400-700px            @media screen and (min-width: 400px) ...
16       Haasteena media - kuvat       • CSS 3 Media Queries ei vielä tällä hetkellä vastaa         haasteeseen tarjota er...
17       RESS -tekniikoita       • Adaptive Images         http://adaptive-images.com/       • Responsive Images         h...
18       Aihepiirin kursseja Tieturilla       • HTML ja CSS – käyttöliittymän         taittaminen - 2pv       • Web-sivust...
19       Kiitos!       Kiitos!       Kiitos!       Kiitos!       Kiitos!       Kiitos!       Kiitos!       Kiitos!       K...
20       Linkit       • http://newsroom.cisco.com/press-release-         content?type=webcontent&articleId=888280       • ...
Upcoming SlideShare
Loading in...5
×

Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design

272
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
272
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design

  1. 1. Responsive Design
  2. 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.com10.5.2010 Copyright © Tieturi
  3. 3. 3 Millainen sinä olet? Sekakäyttäjä?7.11.2012
  4. 4. 4 Mobiili ohitti jo PC:n v. 2011 Mobiili PC 488 411 miljoonaa miljoonaa toimitettua toimitettua laitetta laitetta7.11.2012
  5. 5. 5 Kasvu on kovaa ” Ciscos 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. 6 Laitekirjo on valtava19.8.2010 Copyright © Tieturi
  7. 7. 7 Onko sivustosi vain desktopille?7.11.2012
  8. 8. 8 Resoluutio ja sisältö7.11.2012 www.tieturi.fi
  9. 9. 9 Mobiili resoluutiot Suomessa7.11.2012
  10. 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 Wikipedia7.11.2012
  11. 11. 11 Mobile First!7.11.2012
  12. 12. 12 Mikä sisällössä on tärkeää?7.11.2012 www.tieturi.fi
  13. 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. 14 CSS 3 Media Features • width • aspect-ratio • height • device-aspect-ratio • device-width • color • device-height • color-index • orientation • monochrome • resolution • scan • grid14.9.2011 Copyright © Tieturi
  15. 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. 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 tarjolla14.9.2011 Copyright © Tieturi
  17. 17. 17 RESS -tekniikoita • Adaptive Images http://adaptive-images.com/ • Responsive Images https://github.com/filamentgroup/Responsive-Images14.9.2011 Copyright © Tieturi
  18. 18. 18 Aihepiirin kursseja Tieturilla • HTML ja CSS – käyttöliittymän taittaminen - 2pv • Web-sivusto mobiililaitteille – 1pv7.11.2012
  19. 19. 19 Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos! Kiitos!7.11.2012
  20. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×