Responsive Web Design& the state of the Web   porcupine.gr   @yiannis_k
“Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and...
“The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.“- Kayla ...
As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, ima...
Why?
Because this world is changing. Rapidly.http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/thomashawk/76170826/
http://www.flickr.com/photos/thomashawk/76170826/
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/nasamarshall/5404263213/
http://www.flickr.com/photos/emeryjl/520109861/
http://www.flickr.com/photos/emeryjl/520109861/
http://www.flickr.com/photos/jonathanharford/5217423633/
http://www.flickr.com/photos/jonathanharford/5217423633/
(Not so) boring numbers
August 2011                                                  72.2 million Americans                                       ...
May 201279% of US smartphoneand tablet owners haveused their mobiledevices for shopping-related activities.Luke Wroblewski...
May 2011iPad users spend 30% of their time on thedevice in front of television.Smartphone users spend 20% of their time on...
What are you gonna do about it? *
What are you gonna do about it? *         * Romeo & Juliet - Dire Straits
Create the best experience for your  audience no matter the device
WTF. RWD, FTW!
WTF. RWD, FTW! What the Frak. Responsive Web Design, For The Win!
Hicksdesign
Andersson-Wise Architects
Forefathers Group
Food Sense
Food Sense
Food Sense
HTML
HTMLQuick ’n’ dirty
HTML<link rel="stylesheet" type="text/css"  media="screen and (max-width: 480px)"  href="mobile.css" />              Quick...
HTML
HTMLLet’s tide things up
HTML<meta name="viewport" content="width=device-width; initial-scale=1.0"><link rel="stylesheet" type="text/css" href="glo...
CSS/*320px =iPhone portrait */@media only screen and (max-width: 320px){...}/*480px =iPhone landscape */@media only screen...
Flexible Multimedia
Flexible Multimedia  img, object {       max-width: 100%;  }
Flexible Multimedia  img, object {       max-width: 100%;  }       FitVid.js
Flexible Grid
Flexible Grid Golden Grid System
Browser Support
Browser Support
(Far from) Browser Support
(Far from) Browser Support7                                8
(Far from) Browser Support7                                8             Kill these agents
Approaches & Techniques
Responsive   vs. Adaptive   vs.  Mobile   vs.whatevah
Mobile first!
The art of hiding
The designer and thefront end developermust be one person:        you
“Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two site...
“Good mobile user experience requires a different design than what’s needed to satisfy desktop users. Two designs, two site...
“Good mobile user          Separate mobile websites? experience requires a different design than what’s needed to satisfy d...
“Responsive design mightwork for uncomplicated,one-off websites, he said,but for applications ornetworks, responsivedesign ...
“Responsive design mightwork for uncomplicated,one-off websites, he said,but for applications ornetworks, responsivedesign ...
“Responsive design might                        When is-no-good?work for uncomplicated,one-off websites, he said,but for ap...
Evaluation
All you needis your good old      CSS
http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
One step closer to Utopia*                                                                                           * Whe...
http://www.flickr.com/photos/lenscrack/5165225746/
One place to focus and                                                           updatehttp://www.flickr.com/photos/lenscra...
No separate websites,no duplicate content
http://www.flickr.com/photos/jfisher/3769846083/
Still fresh.                                                 Things are a changin*                                        ...
http://www.flickr.com/photos/lwr/5044331262/
Think twice!http://www.flickr.com/photos/lwr/5044331262/
Tools & Resources
Testing
Testing  Aptus
TestingScreenqueri.esResponsive.is Gallery Media Queries
Grids & Boilerplates       Golden Grid System     Responsive Grid System          320 and UpJavaScript & Multimedia       ...
Articles    Tips and best practices to develop responsive websites                   Responsive CSS that scales        Pre...
Wait, there’s more!
Wait, there’s more!   Thank you!
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
Upcoming SlideShare
Loading in …5
×

Responsive Web Design & the state of the Web

1,452 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,452
On SlideShare
0
From Embeds
0
Number of Embeds
5
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!

×