Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Responsive Websites and Apps with Drupal

3,704 views

Published on

Published in: Technology
  • Be the first to comment

Building Responsive Websites and Apps with Drupal

  1. 1. Building Responsive Websites and Apps with Drupal Dallas Drupal Days 20112011.07.09 - Dallas Drupal Dayshttp://dallasdrupal.org/sessions/building-responsive-websites-and-apps-drupal
  2. 2. What is Responsive?‣ Responsive layouts are the original design on the web: http://naked.dustindiaz.com/‣ As screens got bigger, we got pickier about the look of a site on the desktop monitor
  3. 3. What is Responsive? ‣ Now we deal with these:Credits: Aaron Stanush
  4. 4. What is Responsive? ‣ Now we deal with these:Credits: Aaron Stanush
  5. 5. What is Responsive? ‣ Not to mention these:Credits: http://j.mp/rethink-mobile
  6. 6. So many browsersCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
  7. 7. So many browsers ‣ Do you really have time to test for and cater to:Credits: http://en.wikipedia.org/wiki/Mobile_operating_system
  8. 8. So many browsers ‣ Do you really have time to test for and cater to: ‣ Chrome, Firefox, Safari, Opera, Internet Explorer 6-7-8-9-10, Symbian, iPhone, iPad, Android phones, Android tablets, RIM (Blackberry), Windows CE, Windows mobile, Windows Phone 7, Linux, bada, MeeGo, Brew OSCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
  9. 9. So many browsers ‣ Do you really have time to test for and cater to: ‣ Chrome, Firefox, Safari, Opera, Internet Explorer 6-7-8-9-10, Symbian, iPhone, iPad, Android phones, Android tablets, RIM (Blackberry), Windows CE, Windows mobile, Windows Phone 7, Linux, bada, MeeGo, Brew OS ‣ ...booCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
  10. 10. Forget about...
  11. 11. Forget about...‣ User-agent detection + Separate mobile theme
  12. 12. Forget about...‣ User-agent detection + Separate mobile theme‣ Separate subdomain / path + redirection
  13. 13. Forget about...‣ User-agent detection + Separate mobile theme‣ Separate subdomain / path + redirection‣ External services
  14. 14. Forget about...‣ User-agent detection + Separate mobile theme‣ Separate subdomain / path + redirection‣ External services‣ These are alternatives, each with strengths and weaknesses. We don’t care about them today :)
  15. 15. Go Responsive
  16. 16. Go Responsive‣ Use the front-end the way it wants to be used — as a versatile presentation layer
  17. 17. Go Responsive‣ Use the front-end the way it wants to be used — as a versatile presentation layer‣ The layout of a website can shift and adapt to changes in screen size and device capability
  18. 18. Go Responsive‣ Use the front-end the way it wants to be used — as a versatile presentation layer‣ The layout of a website can shift and adapt to changes in screen size and device capability‣ CSS3 Media Queries JavaScript tools that adapt real-time Feature detection
  19. 19. ExampleCredits: http://mediaqueri.es
  20. 20. ExampleCredits: http://mediaqueri.es
  21. 21. CSS Media Queries<plug> or check out http://fourkitchens.com </plug>
  22. 22. CSS Media Queries ‣ The spec: http://www.w3.org/TR/css3-mediaqueries/<plug> or check out http://fourkitchens.com </plug>
  23. 23. CSS Media Queries ‣ The spec: http://www.w3.org/TR/css3-mediaqueries/ ‣ The buzz: http://www.alistapart.com/articles/responsive-web-design/<plug> or check out http://fourkitchens.com </plug>
  24. 24. CSS Media Queries ‣ The spec: http://www.w3.org/TR/css3-mediaqueries/ ‣ The buzz: http://www.alistapart.com/articles/responsive-web-design/ ‣ The hotness: http://mediaqueri.es<plug> or check out http://fourkitchens.com </plug>
  25. 25. Basic Example<link rel=”stylesheet” href=”this.css”>
  26. 26. Basic Example<link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”>
  27. 27. Basic Example <link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”> /* This CSS will always apply - global styles */ body {padding: 10px; } #container {width: 100%; margin: 0; }Do not use these in conjunction!
  28. 28. Basic Example <link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”> /* This CSS will always apply - global styles */ body {padding: 10px; } #container {width: 100%; margin: 0; } /* This CSS will only apply when the window is 960px or greater */ @media screen and (min-width: 960px) { body {padding: 0; } #container {width: 960px; margin: 0 auto; } }Do not use these in conjunction!
  29. 29. cool, but...
  30. 30. cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)
  31. 31. cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’t just pop open your existing stylesheets, wrap them in queries, and call it a day
  32. 32. cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’t just pop open your existing stylesheets, wrap them in queries, and call it a day‣ We need to mentally remove the line between mobile and desktop...
  33. 33. cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’t just pop open your existing stylesheets, wrap them in queries, and call it a day‣ We need to mentally remove the line between mobile and desktop...‣ ...but don’t freak out. They’re just differently sized screens.
  34. 34. Mobile First Approachhttp://j.mp/rethink-mobile
  35. 35. Mobile First Approach ‣ aka Progressive Enhancementhttp://j.mp/rethink-mobile
  36. 36. Mobile First Approach ‣ aka Progressive Enhancement ‣ Read, re-read, and bookmark (game changer) http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuhttp://j.mp/rethink-mobile
  37. 37. Mobile First Approach ‣ aka Progressive Enhancement ‣ Read, re-read, and bookmark (game changer) http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuhttp://j.mp/rethink-mobile
  38. 38. Progressive CSShttp://j.mp/rethink-mobile
  39. 39. Progressive CSS ‣ No media query support is a media queryhttp://j.mp/rethink-mobile
  40. 40. Progressive CSS ‣ No media query support is a media query ‣ Target the least capable browser firsthttp://j.mp/rethink-mobile
  41. 41. Progressive CSS ‣ No media query support is a media query ‣ Target the least capable browser first ‣ Query for more functional browsershttp://j.mp/rethink-mobile
  42. 42. Progressive CSS ‣ No media query support is a media query ‣ Target the least capable browser first ‣ Query for more functional browsers ‣ More compatible than when you start with desktop styles and filter “down” to mobile versionhttp://j.mp/rethink-mobile
  43. 43. Feature Detectionhttp://www.modernizr.com/
  44. 44. Feature Detection‣ Not just limited to screen sizehttp://www.modernizr.com/
  45. 45. Feature Detection‣ Not just limited to screen size‣ Modernizr tests for the specific features you needhttp://www.modernizr.com/
  46. 46. Feature Detection‣ Not just limited to screen size‣ Modernizr tests for the specific features you need‣ More reliable than user-agent detectionhttp://www.modernizr.com/
  47. 47. Feature Detection‣ Not just limited to screen size‣ Modernizr tests for the specific features you need‣ More reliable than user-agent detection‣ Modular and lightweight, pick your tests: http://www.modernizr.com/download/http://www.modernizr.com/
  48. 48. Drupal Modules
  49. 49. Drupal Modules‣ Responsive Images: http://drupal.org/project/responsive_images Mobile-first images
  50. 50. Drupal Modules‣ Responsive Images: http://drupal.org/project/responsive_images Mobile-first images‣ Modernizr: http://drupal.org/project/modernizr Modernizr integration
  51. 51. Drupal Modules‣ Responsive Images: http://drupal.org/project/responsive_images Mobile-first images‣ Modernizr: http://drupal.org/project/modernizr Modernizr integration‣ Semantic Views: http://drupal.org/project/semanticviews Allows you to clean up your Views output sans templates
  52. 52. Drupal Modules‣ Responsive Images: http://drupal.org/project/responsive_images Mobile-first images‣ Modernizr: http://drupal.org/project/modernizr Modernizr integration‣ Semantic Views: http://drupal.org/project/semanticviews Allows you to clean up your Views output sans templates‣ Responder: http://drupal.org/sandbox/rupl/1104416 Force module stylesheets into mobile-first approach
  53. 53. Drupal Themes‣ Omega: http://drupal.org/project/omega‣ Flex: http://drupal.org/sandbox/zachattack/1104458
  54. 54. Useful Libraries
  55. 55. Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond
  56. 56. Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond‣ Responsive-Images - Bandwidth savings for smaller screens https://github.com/filamentgroup/Responsive-Images
  57. 57. Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond‣ Responsive-Images - Bandwidth savings for smaller screens https://github.com/filamentgroup/Responsive-Images‣ Adapt.js - JavaScript alternative to media queries. Built upon 960 Grid System https://github.com/nathansmith/adapt
  58. 58. Front-end Performancehttp://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
  59. 59. Front-end Performance‣ Up to 97% of perceived mobile response time depends on the front-end... reallyhttp://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
  60. 60. Front-end Performance‣ Up to 97% of perceived mobile response time depends on the front-end... really‣ Your super-stack might serve requests quickly, but if you don’t request quickly, it still seems slow.http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
  61. 61. Front-end Performance
  62. 62. Front-end Performance‣ Cache HTML, internal and external if possible
  63. 63. Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS
  64. 64. Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS‣ Move $scripts to the bottom of your templates
  65. 65. Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS‣ Move $scripts to the bottom of your templates‣ Use responsive images, data URIs, and/or sprites
  66. 66. Check your Work
  67. 67. Check your Work
  68. 68. Check your Work‣ YSlow http://developer.yahoo.com/yslow/
  69. 69. Check your Work‣ YSlow http://developer.yahoo.com/yslow/‣ Page Speed http://code.google.com/speed/page-speed/docs/extension.html
  70. 70. Thank You! chris@fourkitchens.com twitter.com/rupl http://drupal.org/user/4119992011.07.09 - Dallas Drupal Dayshttp://dallasdrupal.org/sessions/building-responsive-websites-and-apps-drupal
  71. 71. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2011 Four Kitchens, LLC.

×