Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors. This webinar will discuss how you can apply responsive design techniques to a Drupal website and will include the following topics: * Steps to building a responsive Drupal 7 theme * Challenges when designing a responsive layout * Drupal elements that are particularly challenging to adapt * CSS techniques for responsive design * Responsive Drupal base themes

1. BUILDING RESPONSIVE
DRUPAL SITES

2. Drupal Consulting, Development, and Training
evolvingweb.ca | 514-844-4930
Suzanne Kennedy, Co-founder
@suzanne_kennedy

3. • Mobile First
• Responsive Design
• Building a Responsive Drupal Theme
• Designing Responsive Elements
• Tools & Resources
• Outstanding Challenges

4. WHAT IS MOBILE FIRST?
• Design
your website for the mobile experience
(phones, tablets, and everything in between)
• Allow the mobile experience to impact the
overall design

5. WHAT IS RESPONSIVE
DESIGN?

7. RESPONSIVE DESIGN
• Create
a single site and design framework that adapts to any
browser size
• Tweak the design at different browser sizes to improve the
experience
• Usually easier than building separate experiences for different
devices

8. http://mattkersley.com/responsive/

9. RESPONSIVE DESIGN
PROCESS
1. Create a Flexible Width website
2. Set limits for large screens if needed
3. Figure out how content fits best at different widths
4. Add breakpoints to accommodate different widths
5. Deal with tricky elements like tables, grids, images, iframes,
etc.

12. WHAT WORKS ON MOBILE?
• Make links big enough to touch
• Show the most important information
• Show only the most important information
• Make the menu easily accessible

13. DESIGN APPROACHES
• Prototype rather than make mockups
• No pixel-perfect design
• Allow the design for mobile to impact the design for desktop

14. HOW TO BUILD A
RESPONSIVE DRUPAL THEME?

15. MEDIA QUERIES

16. MEDIA QUERY COMPONENTS
• Media Type (i.e. screen or print)
• Media Feature (i.e. max-width, min-width)

17. TARGETING LARGE SCREENS
Use the min-width media feature
<link rel="stylesheet" type="text/css"
media="screen and (min-width: 960px)" href="/style.css" />
@media screen and (min-width: 960px) {
left-column {
float: left;
width: 60%;
}
}

18. TARGETING SMALL SCREENS
Use the max-width media feature
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 480px)" href="/style.css" />
@media screen and (min-width: 480px) {
.panels-pane {
float: none;
}
}

19. DEVICE ORIENTATION
orientation: landscape orientation: portrait

20. OTHER MEDIA FEATURES
• min-device-width
• max-device-width
• resolution
• color
• aspect-ratio

21. IN YOUR DRUPAL THEME
Inline in your CSS files:
@media screen and (min-width: 960px) {
left-column {
float: left;
width: 60%;
}
}

22. IN YOUR DRUPAL THEME
In your .info file:
stylesheets[screen and (min-width: 960px)][] = css/screen-
min-960.css
stylesheets[screen and (max-width: 480px)][] = css/screen-
max-480.css
stylesheets[screen and (max-width: 240px)][] = css/screen-
max-240.css
stylesheets[screen and (min-width: 480px) and (max-width:
760px)][] = css/screen-480-760.css

23. BROWSER ISSUES

24. ANDROID DEVICES
You need to set the viewport meta tag to make media
queries work on android devices.
<?php
$meta_viewport = array(
'#type' => 'html_tag',
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width'
)
);
drupal_add_html_head($meta_viewport, 'viewport');
?>

25. INTERNET EXPLORER
Versions 6-8 don’t support media queries
In your .info file:
stylesheets-conditional[lt IE 9][all][] = ie-960.css

26. DESIGNING RESPONSIVE
WEBSITES

27. LAYOUT

28. http://www.lukew.com/ff/entry.asp?1514

29. evolvingweb.ca

30. owltastic.com

31. palentir.net

32. palentir.net

33. foodsense.is

34. workatplay.com

35. workatplay.com

36. barackobama.com

43. HORIZONTAL MENUS

49. VERTICAL MENUS

50. smashingmagazine.com

51. workatplay.com

52. IMAGES

53. img {
max-width: 100%;
}

56. ADAPTIVE IMAGE MODULE
Add an ‘Adaptive effect’ to your image styles to
resize images based on device detection
drupal.org/project/adaptive_image

57. ADVERTISING!

58. bostonglobe.com

59. smashingmagazine.com

60. smashingmagazine.com

61. FORMS

62. Form elements
are too wide

63. input,
select {
max-width: 100%;
}

64. jquerymobile.com
drupal.org/project/jquerymobile

65. TABLES

66. Avoid using
tables for grids

68. TABULAR DATA

69. Tabular Data

70. Tabular Data

71. denver2012.drupal.org

72. OTHER IDEAS
• Use Google Charts to show a pie chart instead of a table
• Provide a CSV download of the data

73. PANELS

74. palentir.net

75. palentir.net

76. CSS TO ADJUST PANEL

77. SEARCH

78. drupalsun.com

79. drupalsun.com

80. drupalsun.com

81. BANNERS

82. happycoghosting.com

83. happycoghosting.com

84. foodsense.is

85. foodsense.is

86. IFRAMES

87. iframe {
max-width: 100%;
}

88. DECORATIVE ELEMENTS

89. css-tricks.com

90. css-tricks.com

91. CRAFTING YOUR CSS

92. CSS 3: FONT-FACE
@font-face {
font-family: Futura;
src: url("../fonts/Futura-Book.otf");
}
h2 {
font-family: Futura;
}

93. CSS3: BORDER-RADIUS
www.css3.info
#example {
-moz-border-radius: 15px;
border-radius: 15px;
}

94. OTHER CSS ADVICE
• Avoid absolute
positioning
• Avoid setting absolute
heights and widths

95. TOOLS AND RESOURCES

96. DRUPAL THEMES & MODULES

98. RESPONSIVE THEMES
• Omega Theme
• Adaptive Theme
• Square Grid
• Twitter Bootstrap
• Others...

100. DRUPAL MODULES
http://drupal.org/project/adaptive_image
http://drupal.org/project/touch_icons
http://drupal.org/project/jquerymobile
http://drupal.org/project/mobile_tools

101. ARTICLES
• Evolving Web: http://evolvingweb.ca/story/responsive-theming-
how-apply-responsive-design-techniques-drupal-theme
• Responsive Tables: http://css-tricks.com/responsive-data-tables/
•A List Apart: http://www.alistapart.com/articles/responsive-
web-design/
• Responsive Layouts http://www.lukew.com/ff/entry.asp?1514

102. OTHER RESOURCES
• Media
Features: http://www.w3.org/TR/css3-mediaqueries/
#media1
• Drupal Base Themes: http://groups.drupal.org/node/175234
• Testing
your responsive design: http://mattkersley.com/
responsive
•A List Apart Book: http://www.abookapart.com/products/
responsive-web-design

103. VIDEOS FROM DRUPALCON
• Mobile First: http://denver2012.drupal.org/keynote/luke-wroblewski
• Responsive Theming + Omega Theme: http://denver2012.drupal.org/
program/sessions/creating-responsive-and-mobile-first-drupal-themes
• UX Design: http://denver2012.drupal.org/program/sessions/ux-design-
every-screen
• Responsive Techniques: http://denver2012.drupal.org/program/sessions/
rethinking-responsive-building-techniques-drupal
• Responsive Design: http://denver2012.drupal.org/program/sessions/
responsive-web-design-past-present-and-future

104. CHALLENGES

105. canada.gc.ca

107. TRAINING PROGRAM
We offer public and private Drupal training sessions.
evolvingweb.ca/training

108. THANK YOU!