Your SlideShare is downloading. ×
0
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

243

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
243
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
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

×