Building Responsive Websites and Apps with Drupal Dallas Drupal Days 20112011.07.09 - Dallas Drupal Dayshttp://dallasdrupa...
What is Responsive?‣   Responsive layouts are the original design on the    web: http://naked.dustindiaz.com/‣   As screen...
What is Responsive? ‣   Now we deal with these:Credits: Aaron Stanush
What is Responsive? ‣   Now we deal with these:Credits: Aaron Stanush
What is Responsive? ‣   Not to mention these:Credits: http://j.mp/rethink-mobile
So many browsersCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
So many browsers ‣   Do you really have time to test for and cater to:Credits: http://en.wikipedia.org/wiki/Mobile_operati...
So many browsers ‣   Do you really have time to test for and cater to:       ‣   Chrome, Firefox, Safari, Opera, Internet ...
So many browsers ‣   Do you really have time to test for and cater to:       ‣   Chrome, Firefox, Safari, Opera, Internet ...
Forget about...
Forget about...‣   User-agent detection + Separate mobile theme
Forget about...‣   User-agent detection + Separate mobile theme‣   Separate subdomain / path + redirection
Forget about...‣   User-agent detection + Separate mobile theme‣   Separate subdomain / path + redirection‣   External ser...
Forget about...‣   User-agent detection + Separate mobile theme‣   Separate subdomain / path + redirection‣   External ser...
Go Responsive
Go Responsive‣   Use the front-end the way it wants to be used —    as a versatile presentation layer
Go Responsive‣   Use the front-end the way it wants to be used —    as a versatile presentation layer‣   The layout of a w...
Go Responsive‣   Use the front-end the way it wants to be used —    as a versatile presentation layer‣   The layout of a w...
ExampleCredits: http://mediaqueri.es
ExampleCredits: http://mediaqueri.es
CSS Media Queries<plug> or check out http://fourkitchens.com </plug>
CSS Media Queries ‣   The spec:        http://www.w3.org/TR/css3-mediaqueries/<plug> or check out http://fourkitchens.com ...
CSS Media Queries ‣   The spec:        http://www.w3.org/TR/css3-mediaqueries/ ‣   The buzz:         http://www.alistapart...
CSS Media Queries ‣   The spec:        http://www.w3.org/TR/css3-mediaqueries/ ‣   The buzz:         http://www.alistapart...
Basic Example<link rel=”stylesheet” href=”this.css”>
Basic Example<link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”>
Basic Example <link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”> /* This CSS will always apply - global st...
Basic Example <link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”> /* This CSS will always apply - global st...
cool, but...
cool, but...‣   IE 8 and below do not recognize media queries    (weep not, more on this later)
cool, but...‣   IE 8 and below do not recognize media queries    (weep not, more on this later)‣   Don’t just pop open you...
cool, but...‣   IE 8 and below do not recognize media queries    (weep not, more on this later)‣   Don’t just pop open you...
cool, but...‣   IE 8 and below do not recognize media queries    (weep not, more on this later)‣   Don’t just pop open you...
Mobile First Approachhttp://j.mp/rethink-mobile
Mobile First Approach ‣   aka Progressive Enhancementhttp://j.mp/rethink-mobile
Mobile First Approach ‣   aka Progressive Enhancement ‣   Read, re-read, and bookmark (game changer)     http://www.slides...
Mobile First Approach ‣   aka Progressive Enhancement ‣   Read, re-read, and bookmark (game changer)     http://www.slides...
Progressive CSShttp://j.mp/rethink-mobile
Progressive CSS ‣   No media query support is a media queryhttp://j.mp/rethink-mobile
Progressive CSS ‣   No media query support is a media query ‣   Target the least capable browser firsthttp://j.mp/rethink-m...
Progressive CSS ‣   No media query support is a media query ‣   Target the least capable browser first ‣   Query for more f...
Progressive CSS ‣   No media query support is a media query ‣   Target the least capable browser first ‣   Query for more f...
Feature Detectionhttp://www.modernizr.com/
Feature Detection‣   Not just limited to screen sizehttp://www.modernizr.com/
Feature Detection‣   Not just limited to screen size‣   Modernizr tests for the specific features you needhttp://www.modern...
Feature Detection‣   Not just limited to screen size‣   Modernizr tests for the specific features you need‣   More reliable...
Feature Detection‣   Not just limited to screen size‣   Modernizr tests for the specific features you need‣   More reliable...
Drupal Modules
Drupal Modules‣   Semantic Views: http://drupal.org/project/semanticviews    Allows you to clean up your Views output sans...
Drupal Modules‣   Semantic Views: http://drupal.org/project/semanticviews    Allows you to clean up your Views output sans...
Drupal Themes‣   Sadly, this is lacking at the moment.‣   We haven’t yet found solid patterns that can be    encapsulated ...
Useful Libraries
Useful Libraries‣   Respond.js - For I       ncapabl   E browsers    https://github.com/scottjehl/Respond
Useful Libraries‣   Respond.js - For I       ncapabl   E browsers    https://github.com/scottjehl/Respond‣   Responsive-Im...
Useful Libraries‣   Respond.js - For I       ncapabl   E browsers    https://github.com/scottjehl/Respond‣   Responsive-Im...
Front-end Performancehttp://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
Front-end Performance‣   Up to 97% of perceived mobile response time    depends on the front-end... reallyhttp://www.webpe...
Front-end Performance‣   Up to 97% of perceived mobile response time    depends on the front-end... really‣   Your super-s...
Front-end Performance
Front-end Performance‣   Cache HTML, internal and external if possible
Front-end Performance‣   Cache HTML, internal and external if possible‣   Optimize CSS/JS
Front-end Performance‣   Cache HTML, internal and external if possible‣   Optimize CSS/JS‣   Move $scripts to the bottom o...
Front-end Performance‣   Cache HTML, internal and external if possible‣   Optimize CSS/JS‣   Move $scripts to the bottom o...
Check your Work
Check your Work
Check your Work‣   YSlow    http://developer.yahoo.com/yslow/
Check your Work‣   YSlow    http://developer.yahoo.com/yslow/‣   Page Speed    http://code.google.com/speed/page-speed/doc...
Thank You! chris@fourkitchens.com twitter.com/rupl http://drupal.org/user/4119992011.07.09 - Dallas Drupal Dayshttp://dall...
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed an...
Upcoming SlideShare
Loading in...5
×

Building Responsive Websites in Drupal

3,732

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
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,732
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
8
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
  • Transcript of "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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×