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.