Building Responsive Websites with Drupal
40 likes16,508 views
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
![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](https://image.slidesharecdn.com/responsive-design-webinar-may7-120509163151-phpapp01/85/Building-Responsive-Websites-with-Drupal-22-320.jpg)
![INTERNET EXPLORER
Versions 6-8 don’t support media queries
In your .info file:
stylesheets-conditional[lt IE 9][all][] = ie-960.css](https://image.slidesharecdn.com/responsive-design-webinar-may7-120509163151-phpapp01/85/Building-Responsive-Websites-with-Drupal-25-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Building Responsive Websites with Drupal (20)
Ad
More from Suzanne Dergacheva (20)
Ad
Recently uploaded (20)
Building Responsive Websites with Drupal
- 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
- 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
- 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
- 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
- 61. FORMS
- 62. Form elements are too wide
- 63. input, select { max-width: 100%; }
- 65. TABLES
- 66. Avoid using tables for grids
- 68. TABULAR DATA
- 69. Tabular Data
- 70. Tabular Data
- 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
- 84. foodsense.is
- 85. foodsense.is
- 86. IFRAMES
- 87. iframe { max-width: 100%; }
- 89. css-tricks.com
- 90. css-tricks.com
- 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
- 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!