Building Responsive Websites in Drupal

4,011 views
3,904 views

Published on

This presentation is a bit outdated. Read these slides instead: http://www.slideshare.net/rupl/responsive-drupal-beyond-the-media-query

This is an overview for Drupal themers looking to integrate responsive design into their workflow.

From mobile-first CSS3 media queries to feature detection and performance testing, this presentation will get you started down the path to flexible, responsive layouts look great and adapt to any device, regardless of size or capability.

This was presented at Dallas Drupal Days 2011 by Chris Ruppel.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,011
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
56
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Building Responsive Websites in 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, 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, 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‣ Semantic Views: http://drupal.org/project/semanticviews Allows you to clean up your Views output sans templates
    50. 50. Drupal Modules‣ 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
    51. 51. Drupal Themes‣ Sadly, this is lacking at the moment.‣ We haven’t yet found solid patterns that can be encapsulated into a theme.‣ Look for responsive designs to pop up in distros before there’s a go-to solution in Drupal proper
    52. 52. Useful Libraries
    53. 53. Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond
    54. 54. 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
    55. 55. 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
    56. 56. Front-end Performancehttp://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
    57. 57. 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/
    58. 58. 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/
    59. 59. Front-end Performance
    60. 60. Front-end Performance‣ Cache HTML, internal and external if possible
    61. 61. Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS
    62. 62. Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS‣ Move $scripts to the bottom of your templates
    63. 63. 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
    64. 64. Check your Work
    65. 65. Check your Work
    66. 66. Check your Work‣ YSlow http://developer.yahoo.com/yslow/
    67. 67. Check your Work‣ YSlow http://developer.yahoo.com/yslow/‣ Page Speed http://code.google.com/speed/page-speed/docs/extension.html
    68. 68. 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
    69. 69. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2011 Four Kitchens, LLC.

    ×