Your SlideShare is downloading. ×
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Mobiiliaamiainen 8.11.2012: Teuvo Väisänen, Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

236

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.com10.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 laitetta7.11.2012
  • 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 Laitekirjo on valtava19.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 Suomessa7.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 Wikipedia7.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 • grid14.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 tarjolla14.9.2011 Copyright © Tieturi
  • 17. 17 RESS -tekniikoita • Adaptive Images http://adaptive-images.com/ • Responsive Images https://github.com/filamentgroup/Responsive-Images14.9.2011 Copyright © Tieturi
  • 18. 18 Aihepiirin kursseja Tieturilla • HTML ja CSS – käyttöliittymän taittaminen - 2pv • Web-sivusto mobiililaitteille – 1pv7.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

×