Responsive Drupal:Beyond the Media QueryBADCamp 2011Chris RuppelBADCamp 2011 - http://j.mp/badcamp-responsive
What’s the Problem? ‣ Original           web pages were all responsive ‣ As screens got bigger, we got pickier about   the...
What’s the Problem? ‣   Now we deal with these:Credits: Aaron Stanush
‣   Not to mention these:Credits: http://j.mp/rethink-mobile
So many browsers ‣   Do you really have time to test for and cater to:       ‣   Chrome, Firefox, Safari, Opera, Internet ...
Forget about...‣   User-agent detection + Separate mobile theme‣   Separate subdomain / path + redirection‣   External ser...
Go Responsive‣ Ask   every device what it needs‣ Ask   every device what it can do‣ Avoid   server-side solutions hacks
CSS Media Queries ‣ The        spec   w3.org/TR/css3-mediaqueries ‣ The        buzz   j.mp/ala-rwd ‣ The        hotness   ...
Basic Example<link rel=”stylesheet” href=”this.css” media=”all”>
Basic Example<link rel=”stylesheet” href=”this.css” media=”all and (min-width: 960px)”>
Basic Example <link rel=”stylesheet” href=”this.css”  media=”all and (min-width: 960px)”> /* This CSS will always apply - ...
Basic Example <link rel=”stylesheet” href=”this.css”  media=”all and (min-width: 960px)”> /* This CSS will always apply - ...
cool, but...‣ IE   8 and below do not recognize media queries (weep not, more on this later)‣ Don’tjust pop open your exis...
Mobile First‣ aka   Progressive Enhancement‣   Read, re-read, and bookmark (game changer)    j.mp/rethink-mobile
j.mp/rethink-mobile
Progressive CSS ‣ No      media query is a media query ‣ Target             the least capable browser first ‣ Add        fu...
Feature Detectionyour new religion
Feature Detection ‣ Not       just limited to screen size ‣ Test        for specific features ‣ More          robust than u...
Feature Detection‣ Stop    relying on nosey servers‣ Start   relying on honest browsers
Helper Modules‣   Responsive Images    drupal.org/project/responsive_images‣   Force module CSS into mobile-first approach ...
Script Loaders‣ Modernizr:      drupal.org/project/modernizr‣   Feature detection and asset loading‣ LABjs:    drupal.org/...
Drupal Themes ‣ AdaptiveTheme   drupal.org/project/adaptivetheme ‣ Omega   drupal.org/project/omega ‣ Zen   drupal.org/pro...
Polyfills‣ Respond.js   - For IncapablE browsers github.com/scottjehl/Respond‣ Adapt.js   - JS alternative to MQs github.co...
Responsive Media‣ Responsive    videos via jQuery fitvidsjs.com‣ Responsive    slideshows marktyrrell.com/labs/blueberry
Front-end Performance‣ Up  to 97% of perceived mobile   response time depends on front-end‣ Your  super-stack cannot fix sl...
Front-end Performance‣ CacheHTML, internal and external if possible‣ Optimize   CSS/JS, reduce number of requests
Front-end Performance ‣ Print   JS last in your templates ‣ Experiment  with responsive images,   data URIs, and/or sprite...
Check your work‣   http://stevesouders.com/mobileperf/    Super-awesome tools for testing on mobile devices.    Ranges fro...
Always remember... ‣   There is no single best practice. ‣   We’re not sure what’s next.Credits: http://futurefriend.ly
Thank You!chris@fourkitchens.comtwitter.com/rupldrupal.org/user/411999BADCamp 2011 - http://j.mp/badcamp-responsive
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed an...
Responsive Drupal: Beyond the Media Query
Upcoming SlideShare
Loading in …5
×

Responsive Drupal: Beyond the Media Query

8,585 views
8,379 views

Published on

My presentation slides from BADCamp 2011. An in-depth discussion about responsive website development, including a brief history of mobile-first responsive design, how you can get started in Drupal, and how you can improve an existing responsive website to make it as performant and fast as possible.

Download PDF of slides here: http://fourkitchens.com/presentations

Published in: Technology
4 Comments
19 Likes
Statistics
Notes
  • I really enjoyed this slide-reading
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @bdornbush You can download a PDF of the slides here: http://fourkitchens.com/presentations
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for the slides. I attended the presentation and found it very useful. I tried to download the slides but discovered they were in .key format from your Mac, and I have a Windows PC. Can you upload a .pdf version?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thank you!

    I need this ammo for my discussions right now... .Great work Chris... you took Fubhy's presentation and stepped it up. Sorry about your computer not working..
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,585
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
118
Comments
4
Likes
19
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
  • Responsive Drupal: Beyond the Media Query

    1. 1. Responsive Drupal:Beyond the Media QueryBADCamp 2011Chris RuppelBADCamp 2011 - http://j.mp/badcamp-responsive
    2. 2. What’s the Problem? ‣ Original web pages were all responsive ‣ As screens got bigger, we got pickier about the look of a site... ‣On the desktop monitorThe oldest responsive site: http://j.mp/og-responsive
    3. 3. What’s the Problem? ‣ Now we deal with these:Credits: Aaron Stanush
    4. 4. ‣ Not to mention these:Credits: http://j.mp/rethink-mobile
    5. 5. 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
    6. 6. 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 :)
    7. 7. Go Responsive‣ Ask every device what it needs‣ Ask every device what it can do‣ Avoid server-side solutions hacks
    8. 8. CSS Media Queries ‣ The spec w3.org/TR/css3-mediaqueries ‣ The buzz j.mp/ala-rwd ‣ The hotness mediaqueri.es<plug> or check out fourkitchens.com </plug>
    9. 9. Basic Example<link rel=”stylesheet” href=”this.css” media=”all”>
    10. 10. Basic Example<link rel=”stylesheet” href=”this.css” media=”all and (min-width: 960px)”>
    11. 11. Basic Example <link rel=”stylesheet” href=”this.css” media=”all and (min-width: 960px)”> /* This CSS will always apply - global styles */ body {padding: 10px; } #container {width: 100%; margin: 0; }Use care when mixing these two syntaxes!
    12. 12. Basic Example <link rel=”stylesheet” href=”this.css” media=”all and (min-width: 960px)”> /* This CSS will always apply - global styles */ body {padding: 10px; } #container {width: 100%; margin: 0; } /* 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; } }Use care when mixing these two syntaxes!
    13. 13. cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’tjust pop open your existing stylesheets and wrap them in queries
    14. 14. Mobile First‣ aka Progressive Enhancement‣ Read, re-read, and bookmark (game changer) j.mp/rethink-mobile
    15. 15. j.mp/rethink-mobile
    16. 16. Progressive CSS ‣ No media query is a media query ‣ Target the least capable browser first ‣ Add functionality from there ‣ More robust than “graceful degradation”j.mp/rethink-mobile
    17. 17. Feature Detectionyour new religion
    18. 18. Feature Detection ‣ Not just limited to screen size ‣ Test for specific features ‣ More robust than user-agent detectionLearn more: modernizr.com
    19. 19. Feature Detection‣ Stop relying on nosey servers‣ Start relying on honest browsers
    20. 20. Helper Modules‣ Responsive Images drupal.org/project/responsive_images‣ Force module CSS into mobile-first approach drupal.org/project/responder
    21. 21. Script Loaders‣ Modernizr: drupal.org/project/modernizr‣ Feature detection and asset loading‣ LABjs: drupal.org/project/labjs‣ Use an asynchronous loader for your JS
    22. 22. Drupal Themes ‣ AdaptiveTheme drupal.org/project/adaptivetheme ‣ Omega drupal.org/project/omega ‣ Zen drupal.org/project/zenhttp://groups.drupal.org/node/175234
    23. 23. Polyfills‣ Respond.js - For IncapablE browsers github.com/scottjehl/Respond‣ Adapt.js - JS alternative to MQs github.com/nathansmith/adapt
    24. 24. Responsive Media‣ Responsive videos via jQuery fitvidsjs.com‣ Responsive slideshows marktyrrell.com/labs/blueberry
    25. 25. Front-end Performance‣ Up to 97% of perceived mobile response time depends on front-end‣ Your super-stack cannot fix slow requests.http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
    26. 26. Front-end Performance‣ CacheHTML, internal and external if possible‣ Optimize CSS/JS, reduce number of requests
    27. 27. Front-end Performance ‣ Print JS last in your templates ‣ Experiment with responsive images, data URIs, and/or spritesCredits
    28. 28. Check your work‣ http://stevesouders.com/mobileperf/ Super-awesome tools for testing on mobile devices. Ranges from quick test to intense debugging‣ http://jdrop.org Easily collect mobile performance data and analyze on your desktop‣ http://blaze.io/mobile Test regional bandwidth, provides waterfalls and screenshots
    29. 29. Always remember... ‣ There is no single best practice. ‣ We’re not sure what’s next.Credits: http://futurefriend.ly
    30. 30. Thank You!chris@fourkitchens.comtwitter.com/rupldrupal.org/user/411999BADCamp 2011 - http://j.mp/badcamp-responsive
    31. 31. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2011 Four Kitchens, LLC.

    ×