This document discusses building responsive websites and apps with Drupal. It begins by explaining what responsive design is and how it allows websites to adapt to different screen sizes through CSS media queries and flexible grids. It advocates using a mobile-first approach where the mobile version is the baseline and enhanced for larger screens. Key aspects covered include responsive images, the Modernizr module, feature detection libraries, and front-end performance optimization.

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
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
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
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
‣ ...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
‣ Responsive Images: http://drupal.org/project/responsive_images
Mobile-first images

50. Drupal Modules
‣ Responsive Images: http://drupal.org/project/responsive_images
Mobile-first images
‣ Modernizr: http://drupal.org/project/modernizr
Modernizr integration

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. 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. Drupal Themes
‣ Omega: http://drupal.org/project/omega
‣ Flex: http://drupal.org/sandbox/zachattack/1104458

54. Useful Libraries

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

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

59. 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/

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

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

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

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

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

67. Check your Work

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

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

70. 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

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