Responsive Web Design & the state of the Web

1,494 views

Published on

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

No Downloads
Views
Total views
1,494
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive Web Design & the state of the Web

  1. 1. Responsive Web Design& the state of the Web porcupine.gr @yiannis_k
  2. 2. “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. “- Kayla Knight on Smashing Magazine
  3. 3. “The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.“- Kayla Knight on Smashing Magazine
  4. 4. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences.- Kayla Knight on Smashing Magazine
  5. 5. Why?
  6. 6. Because this world is changing. Rapidly.http://www.flickr.com/photos/nasamarshall/5404263213/
  7. 7. http://www.flickr.com/photos/thomashawk/76170826/
  8. 8. http://www.flickr.com/photos/thomashawk/76170826/
  9. 9. http://www.flickr.com/photos/nasamarshall/5404263213/
  10. 10. http://www.flickr.com/photos/nasamarshall/5404263213/
  11. 11. http://www.flickr.com/photos/emeryjl/520109861/
  12. 12. http://www.flickr.com/photos/emeryjl/520109861/
  13. 13. http://www.flickr.com/photos/jonathanharford/5217423633/
  14. 14. http://www.flickr.com/photos/jonathanharford/5217423633/
  15. 15. (Not so) boring numbers
  16. 16. August 2011 72.2 million Americans accessed social networking sites or blogs on their mobile device (+37% since 2010) Luke Wroblewskihttp://www.flickr.com/photos/pamhule/5709324762/
  17. 17. May 201279% of US smartphoneand tablet owners haveused their mobiledevices for shopping-related activities.Luke Wroblewskihttp://www.flickr.com/photos/polvero/3422530445/
  18. 18. May 2011iPad users spend 30% of their time on thedevice in front of television.Smartphone users spend 20% of their time onthe device in front of the television.Luke Wroblewski
  19. 19. What are you gonna do about it? *
  20. 20. What are you gonna do about it? * * Romeo & Juliet - Dire Straits
  21. 21. Create the best experience for your audience no matter the device
  22. 22. WTF. RWD, FTW!
  23. 23. WTF. RWD, FTW! What the Frak. Responsive Web Design, For The Win!
  24. 24. Hicksdesign
  25. 25. Andersson-Wise Architects
  26. 26. Forefathers Group
  27. 27. Food Sense
  28. 28. Food Sense
  29. 29. Food Sense
  30. 30. HTML
  31. 31. HTMLQuick ’n’ dirty
  32. 32. HTML<link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" /> Quick ’n’ dirty
  33. 33. HTML
  34. 34. HTMLLet’s tide things up
  35. 35. HTML<meta name="viewport" content="width=device-width; initial-scale=1.0"><link rel="stylesheet" type="text/css" href="global.css" /><link rel="stylesheet" type="text/css" href="media.css" /> Let’s tide things up
  36. 36. CSS/*320px =iPhone portrait */@media only screen and (max-width: 320px){...}/*480px =iPhone landscape */@media only screen and (min-width: 320px) and (max-width: 480px) {...}/*768px =iPad portrait */@media only screen and (min-width: 768px) {...}/*1024px =iPad landscape */@media only screen and (min-width: 768px) and (max-width: 1024px) {...}/*1280px =Medium screens */@media only screen and (min-width: 1025px) and (max-width: 1280px) {}
  37. 37. Flexible Multimedia
  38. 38. Flexible Multimedia img, object { max-width: 100%; }
  39. 39. Flexible Multimedia img, object { max-width: 100%; } FitVid.js
  40. 40. Flexible Grid
  41. 41. Flexible Grid Golden Grid System
  42. 42. Browser Support
  43. 43. Browser Support
  44. 44. (Far from) Browser Support
  45. 45. (Far from) Browser Support7 8
  46. 46. (Far from) Browser Support7 8 Kill these agents
  47. 47. Approaches & Techniques
  48. 48. Responsive vs. Adaptive vs. Mobile vs.whatevah
  49. 49. Mobile first!
  50. 50. The art of hiding
  51. 51. The designer and thefront end developermust be one person: you
  52. 52. “Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.”- Jacob Nielsen
  53. 53. “Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” “You never know better than your users what- Jacob Nielsen content they want.” - Bruce Lawson
  54. 54. “Good mobile user Separate mobile websites? experience requires a different design than what’s needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” “You never know better than your users what- Jacob Nielsen content they want.” - Bruce Lawson
  55. 55. “Responsive design mightwork for uncomplicated,one-off websites, he said,but for applications ornetworks, responsivedesign is actually bad.” Kiran Prasad Director of Engineering Mobile at LinkedIn
  56. 56. “Responsive design mightwork for uncomplicated,one-off websites, he said,but for applications ornetworks, responsivedesign is actually bad.” Kiran Prasad Director of Engineering Mobile at LinkedIn
  57. 57. “Responsive design might When is-no-good?work for uncomplicated,one-off websites, he said,but for applications ornetworks, responsivedesign is actually bad.” Kiran Prasad Director of Engineering Mobile at LinkedIn
  58. 58. Evaluation
  59. 59. All you needis your good old CSS
  60. 60. http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
  61. 61. One step closer to Utopia* * When the project is fairly simple and when compared with a separate mobile websitehttp://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
  62. 62. http://www.flickr.com/photos/lenscrack/5165225746/
  63. 63. One place to focus and updatehttp://www.flickr.com/photos/lenscrack/5165225746/
  64. 64. No separate websites,no duplicate content
  65. 65. http://www.flickr.com/photos/jfisher/3769846083/
  66. 66. Still fresh. Things are a changin* Could be a Bob Dylan’s songhttp://www.flickr.com/photos/jfisher/3769846083/
  67. 67. http://www.flickr.com/photos/lwr/5044331262/
  68. 68. Think twice!http://www.flickr.com/photos/lwr/5044331262/
  69. 69. Tools & Resources
  70. 70. Testing
  71. 71. Testing Aptus
  72. 72. TestingScreenqueri.esResponsive.is Gallery Media Queries
  73. 73. Grids & Boilerplates Golden Grid System Responsive Grid System 320 and UpJavaScript & Multimedia Adapt.js Adaptive Images Responsive Images Fitvid.js FitText
  74. 74. Articles Tips and best practices to develop responsive websites Responsive CSS that scales Preserving vertical rhythm with CSS and jQueryBuild a responsive site in a week: designing responsively (part 1)Build a responsive site in a week: typography and grids (part 2) What’s next Responsive Images and Web Standards at the Turning Point HTML5 adaptive images: end of round one Content Choreography
  75. 75. Wait, there’s more!
  76. 76. Wait, there’s more! Thank you!

×