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‣   Responsive Images: http://drupal.org/project/responsive_images    Mobile-first images
Drupal Modules‣   Responsive Images: http://drupal.org/project/responsive_images    Mobile-first images‣   Modernizr: http:...
Drupal Modules‣   Responsive Images: http://drupal.org/project/responsive_images    Mobile-first images‣   Modernizr: http:...
Drupal Modules‣   Responsive Images: http://drupal.org/project/responsive_images    Mobile-first images‣   Modernizr: http:...
Drupal Themes‣   Omega: http://drupal.org/project/omega‣   Flex: http://drupal.org/sandbox/zachattack/1104458
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 and Apps with Drupal

3,621 views
3,329 views

Published on

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

No Downloads
Views
Total views
3,621
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
64
Comments
0
Likes
11
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
  • \n
  • \n
  • 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.

    ×