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.

1. Building Responsive
Websites and Apps
with Drupal
Dallas Drupal Days 2011
2011.07.09 - Dallas Drupal Days
http://dallasdrupal.org/sessions/building-responsive-websites-and-apps-
drupal

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. What is Responsive?
‣ Now we deal with these:
Credits: Aaron Stanush

4. What is Responsive?
‣ Now we deal with these:
Credits: Aaron Stanush

5. What is Responsive?
‣ Not to mention these:
Credits: http://j.mp/rethink-mobile

6. So many browsers
Credits: http://en.wikipedia.org/wiki/Mobile_operating_system

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. 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
Credits: http://en.wikipedia.org/wiki/Mobile_operating_system

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
‣ ...boo
Credits: http://en.wikipedia.org/wiki/Mobile_operating_system

10. Forget about...

11. Forget about...
‣ User-agent detection + Separate mobile theme

12. Forget about...
‣ User-agent detection + Separate mobile theme
‣ Separate subdomain / path + redirection

13. Forget about...
‣ User-agent detection + Separate mobile theme
‣ Separate subdomain / path + redirection
‣ External services

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. Go Responsive

16. Go Responsive
‣ Use the front-end the way it wants to be used —
as a versatile presentation layer

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. 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. Example
Credits: http://mediaqueri.es

20. Example
Credits: http://mediaqueri.es

21. CSS Media Queries
<plug> or check out http://fourkitchens.com </
plug>

22. CSS Media Queries
‣ The spec: http://www.w3.org/TR/css3-mediaqueries/
<plug> or check out http://fourkitchens.com </
plug>

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. 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. Basic Example
<link rel=”stylesheet” href=”this.css”>

26. Basic Example
<link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”>

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. 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. cool, but...

30. cool, but...
‣ IE 8 and below do not recognize media queries
(weep not, more on this later)

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. 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. 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. Mobile First Approach
http://j.mp/rethink-mobile

35. Mobile First Approach
‣ aka Progressive Enhancement
http://j.mp/rethink-mobile

36. Mobile First Approach
‣ aka Progressive Enhancement
‣ Read, re-read, and bookmark (game changer)
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://j.mp/rethink-mobile

37. Mobile First Approach
‣ aka Progressive Enhancement
‣ Read, re-read, and bookmark (game changer)
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
http://j.mp/rethink-mobile

38. Progressive CSS
http://j.mp/rethink-mobile

39. Progressive CSS
‣ No media query support is a media query
http://j.mp/rethink-mobile

40. Progressive CSS
‣ No media query support is a media query
‣ Target the least capable browser first
http://j.mp/rethink-mobile

41. Progressive CSS
‣ No media query support is a media query
‣ Target the least capable browser first
‣ Query for more functional browsers
http://j.mp/rethink-mobile

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 version
http://j.mp/rethink-mobile

43. Feature Detection
http://www.modernizr.com/

44. Feature Detection
‣ Not just limited to screen size
http://www.modernizr.com/

45. Feature Detection
‣ Not just limited to screen size
‣ Modernizr tests for the specific features you need
http://www.modernizr.com/

46. Feature Detection
‣ Not just limited to screen size
‣ Modernizr tests for the specific features you need
‣ More reliable than user-agent detection
http://www.modernizr.com/

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. Drupal Modules

49. Drupal Modules
‣ Semantic Views: http://drupal.org/project/semanticviews
Allows you to clean up your Views output sans templates

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. 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. Useful Libraries

53. Useful Libraries
‣ Respond.js - For I ncapabl E browsers
https://github.com/scottjehl/Respond

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. 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. Front-end Performance
http://www.webperformancetoday.com/2011/04/20/
desktop-vs-mobile-web-page-load-speed/

57. Front-end Performance
‣ Up to 97% of perceived mobile response time
depends on the front-end... really
http://www.webperformancetoday.com/2011/04/20/
desktop-vs-mobile-web-page-load-speed/

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. Front-end Performance

60. Front-end Performance
‣ Cache HTML, internal and external if possible

61. Front-end Performance
‣ Cache HTML, internal and external if possible
‣ Optimize CSS/JS

62. Front-end Performance
‣ Cache HTML, internal and external if possible
‣ Optimize CSS/JS
‣ Move $scripts to the bottom of your templates

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. Check your Work

65. Check your Work

66. Check your Work
‣ YSlow
http://developer.yahoo.com/yslow/

67. Check your Work
‣ YSlow
http://developer.yahoo.com/yslow/
‣ Page Speed
http://code.google.com/speed/page-speed/docs/extension.html

68. Thank You!
chris@fourkitchens.com
twitter.com/rupl
http://drupal.org/user/411999
2011.07.09 - Dallas Drupal Days
http://dallasdrupal.org/sessions/building-responsive-websites-and-apps-drupal

69. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-
ShareAlike 3.0 licensed and copyright 2011 Four Kitchens, LLC.