Responsive web design

628 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
628
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. Responsiveweb design Aleksej Leonov, AACIMP 2012
  2. 2. 5 years agoslow & expensive mobile internet shitty mobile devices with shitty mobile browsers 4 4 web-surfing was a pain
  3. 3. 5 years ago...big painI like to read feed offriend’s posts from mobile.I even create servicefriends2rss.com to convertLiveJournal friends feed to RSSstream.
  4. 4. 5 years agoAdaptation for mobile device — hard & expensive
  5. 5. 5 years ago
  6. 6. 5 years agoyou have to support 3 completely different versions of site
  7. 7. 5 years ago nobody used mobile devices for somethingother then check email or read news
  8. 8. 5 years agonobody buy stuff from e-commercestore from mobile devicenobody use web services frommobile phone...
  9. 9. 5 years agoBest strategy forweb-developers?
  10. 10. years passed...Better devices mid 2008 Q1 2010 (3G)Faster and cheap mobile internet
  11. 11. Global mobile traffic as % of total internet traffic15% 12% 8%10% 4%5% 1%0% 2009.01 2010.01 2011.01 2012.01 now source: KPCB Internet Trends 2012 & StatCounter Global stats
  12. 12. 2009.01 0%Now 12%3 years > 50%
  13. 13. Bad news — you can’t ignore more than 10% of users.Good news — they have good devices and browsers.
  14. 14. ~ 980px
  15. 15. — Not good.
  16. 16. May 25, 2010— World has changed
  17. 17. One page for all mobile devices
  18. 18. How it works?Fluid grids — old and well-knownMedia queries — new from CSS3
  19. 19. .content .main { float: left; width: 82.938%; /* 700px / 844px = 0.82938 */}.content .info { float: right; width: 14.692%; /* 124px / 844px = 0.14692 */}
  20. 20. CSS 2.1 media types <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css"media="print" />
  21. 21. CSS 3 media queries <link rel="stylesheet" type="text/css"   media="screen and (max-device-width: 480px)"   href="shetland.css" /> <link rel="stylesheet" type="text/css"   media="screen and (max-device-width: 480px) and (resolution: 163dpi)"   href="shetland.css" /> @media screen and (max-device-width: 480px) { .column { display: none; } }
  22. 22. {CSS 3 media queries width height device-width device-height orientation aspect-ratio We can check device-aspect-ratio color color-index monochrome resolution scan grid
  23. 23. CSS 3 media queries @media screen and (max-device-width: 480px) and (device-aspect-ratio: 16/9) and (orientation:landscape) { .column { float: none; } }
  24. 24. CSS 3 media queriesSupported by all current version of browsers.
  25. 25. CSS 3 media queries What’s about IE7/IE8? — there is no problem, really. Can we use this right now? — Yes.
  26. 26. Except old shitty phones4 4
  27. 27. http://twitter.github.com/bootstrap/
  28. 28. http://twitter.github.com/bootstrap/
  29. 29. responsinator.com
  30. 30. Linkshttp://www.alistapart.com/articles/responsive-web-designhttp://twitter.github.com/bootstraphttp://responsinator.comExampleshttp://mediaqueri.eshttp://foodsense.ishttp://smashingmagazine.comhttp://createdm.com
  31. 31. Thanks!Aleksej Leonov aleksejleonov.com mail@aleksejleonov.com

×