BUILDING RESPONSIVE    DRUPAL SITES
Drupal Consulting, Development, and Training      evolvingweb.ca | 514-844-4930                Suzanne Kennedy, Co-founder...
• Mobile   First• Responsive       Design• Building   a Responsive Drupal Theme• Designing   Responsive Elements• Tools   ...
WHAT IS MOBILE FIRST?• Design       your website for the mobile experience (phones, tablets, and everything in between)• A...
WHAT IS RESPONSIVE    DESIGN?
RESPONSIVE DESIGN• Create       a single site and design framework that adapts to any browser size• Tweak the design at di...
http://mattkersley.com/responsive/
RESPONSIVE DESIGN               PROCESS1. Create a Flexible Width website2. Set limits for large screens if needed3. Figur...
WHAT WORKS ON MOBILE?• Make   links big enough to touch• Show   the most important information• Show   only the most impor...
DESIGN APPROACHES• Prototype   rather than make mockups• No   pixel-perfect design• Allow   the design for mobile to impac...
HOW TO BUILD ARESPONSIVE DRUPAL THEME?
MEDIA QUERIES
MEDIA QUERY COMPONENTS• Media Type   (i.e. screen or print)• Media   Feature (i.e. max-width, min-width)
TARGETING LARGE SCREENS              Use the min-width media feature<link rel="stylesheet" type="text/css"media="screen an...
TARGETING SMALL SCREENS              Use the max-width media feature<link rel="stylesheet" type="text/css"media="screen an...
DEVICE ORIENTATIONorientation: landscape   orientation: portrait
OTHER MEDIA FEATURES• min-device-width• max-device-width• resolution• color• aspect-ratio 
IN YOUR DRUPAL THEMEInline in your CSS files:@media screen and (min-width: 960px) {         left-column {              floa...
IN YOUR DRUPAL THEMEIn your .info file:stylesheets[screen and (min-width: 960px)][] = css/screen-min-960.cssstylesheets[scr...
BROWSER ISSUES
ANDROID DEVICESYou need to set the viewport meta tag to make media          queries work on android devices.<?php   $meta_...
INTERNET EXPLORER                 Versions 6-8 don’t support media queriesIn your .info file:stylesheets-conditional[lt IE ...
DESIGNING RESPONSIVE      WEBSITES
LAYOUT
http://www.lukew.com/ff/entry.asp?1514
evolvingweb.ca
owltastic.com
palentir.net
palentir.net
foodsense.is
workatplay.com
workatplay.com
barackobama.com
HORIZONTAL MENUS
VERTICAL MENUS
smashingmagazine.com
workatplay.com
IMAGES
img {        max-width: 100%;}
ADAPTIVE IMAGE MODULEAdd an ‘Adaptive effect’ to your image styles to  resize images based on device detection       drupa...
ADVERTISING!
bostonglobe.com
smashingmagazine.com
smashingmagazine.com
FORMS
Form elements are too wide
input,select {  max-width: 100%;}
jquerymobile.comdrupal.org/project/jquerymobile
TABLES
Avoid usingtables for grids
TABULAR DATA
Tabular Data
Tabular Data
denver2012.drupal.org
OTHER IDEAS• Use   Google Charts to show a pie chart instead of a table• Provide   a CSV download of the data
PANELS
palentir.net
palentir.net
CSS TO ADJUST PANEL
SEARCH
drupalsun.com
drupalsun.com
drupalsun.com
BANNERS
happycoghosting.com
happycoghosting.com
foodsense.is
foodsense.is
IFRAMES
iframe {  max-width: 100%;}
DECORATIVE ELEMENTS
css-tricks.com
css-tricks.com
CRAFTING YOUR CSS
CSS 3: FONT-FACE@font-face {    font-family: Futura;    src: url("../fonts/Futura-Book.otf");  }h2 {       font-family: Fu...
CSS3: BORDER-RADIUS         www.css3.info  #example {    -moz-border-radius: 15px;    border-radius: 15px;  }
OTHER CSS ADVICE• Avoid absolute positioning• Avoid setting absolute heights and widths 
TOOLS AND RESOURCES
DRUPAL THEMES & MODULES
RESPONSIVE THEMES• Omega Theme• Adaptive Theme• Square    Grid• Twitter   Bootstrap• Others...
DRUPAL MODULEShttp://drupal.org/project/adaptive_image http://drupal.org/project/touch_icons http://drupal.org/project/jqu...
ARTICLES• Evolving Web: http://evolvingweb.ca/story/responsive-theming- how-apply-responsive-design-techniques-drupal-them...
OTHER RESOURCES• Media      Features: http://www.w3.org/TR/css3-mediaqueries/ #media1• Drupal    Base Themes: http://group...
VIDEOS FROM DRUPALCON•   Mobile First: http://denver2012.drupal.org/keynote/luke-wroblewski•   Responsive Theming + Omega ...
CHALLENGES
canada.gc.ca
TRAINING PROGRAMWe offer public and private Drupal training sessions.              evolvingweb.ca/training
THANK YOU!
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Building Responsive Websites with Drupal
Upcoming SlideShare
Loading in...5
×

Building Responsive Websites with Drupal

19,383

Published on

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

Published in: Technology, Design
5 Comments
38 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,383
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
5
Likes
38
Embeds 0
No embeds

No notes for slide

Building Responsive Websites with Drupal

  1. 1. BUILDING RESPONSIVE DRUPAL SITES
  2. 2. Drupal Consulting, Development, and Training evolvingweb.ca | 514-844-4930 Suzanne Kennedy, Co-founder @suzanne_kennedy
  3. 3. • Mobile First• Responsive Design• Building a Responsive Drupal Theme• Designing Responsive Elements• Tools & Resources• Outstanding Challenges
  4. 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. 5. WHAT IS RESPONSIVE DESIGN?
  6. 6. 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
  7. 7. http://mattkersley.com/responsive/
  8. 8. RESPONSIVE DESIGN PROCESS1. Create a Flexible Width website2. Set limits for large screens if needed3. Figure out how content fits best at different widths4. Add breakpoints to accommodate different widths5. Deal with tricky elements like tables, grids, images, iframes, etc.
  9. 9. 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
  10. 10. DESIGN APPROACHES• Prototype rather than make mockups• No pixel-perfect design• Allow the design for mobile to impact the design for desktop
  11. 11. HOW TO BUILD ARESPONSIVE DRUPAL THEME?
  12. 12. MEDIA QUERIES
  13. 13. MEDIA QUERY COMPONENTS• Media Type (i.e. screen or print)• Media Feature (i.e. max-width, min-width)
  14. 14. 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%; }}
  15. 15. 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; }}
  16. 16. DEVICE ORIENTATIONorientation: landscape orientation: portrait
  17. 17. OTHER MEDIA FEATURES• min-device-width• max-device-width• resolution• color• aspect-ratio 
  18. 18. IN YOUR DRUPAL THEMEInline in your CSS files:@media screen and (min-width: 960px) { left-column { float: left; width: 60%; }}
  19. 19. IN YOUR DRUPAL THEMEIn your .info file:stylesheets[screen and (min-width: 960px)][] = css/screen-min-960.cssstylesheets[screen and (max-width: 480px)][] = css/screen-max-480.cssstylesheets[screen and (max-width: 240px)][] = css/screen-max-240.cssstylesheets[screen and (min-width: 480px) and (max-width:760px)][] = css/screen-480-760.css
  20. 20. BROWSER ISSUES
  21. 21. ANDROID DEVICESYou 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);?>
  22. 22. INTERNET EXPLORER Versions 6-8 don’t support media queriesIn your .info file:stylesheets-conditional[lt IE 9][all][] = ie-960.css
  23. 23. DESIGNING RESPONSIVE WEBSITES
  24. 24. LAYOUT
  25. 25. http://www.lukew.com/ff/entry.asp?1514
  26. 26. evolvingweb.ca
  27. 27. owltastic.com
  28. 28. palentir.net
  29. 29. palentir.net
  30. 30. foodsense.is
  31. 31. workatplay.com
  32. 32. workatplay.com
  33. 33. barackobama.com
  34. 34. HORIZONTAL MENUS
  35. 35. VERTICAL MENUS
  36. 36. smashingmagazine.com
  37. 37. workatplay.com
  38. 38. IMAGES
  39. 39. img { max-width: 100%;}
  40. 40. ADAPTIVE IMAGE MODULEAdd an ‘Adaptive effect’ to your image styles to resize images based on device detection drupal.org/project/adaptive_image
  41. 41. ADVERTISING!
  42. 42. bostonglobe.com
  43. 43. smashingmagazine.com
  44. 44. smashingmagazine.com
  45. 45. FORMS
  46. 46. Form elements are too wide
  47. 47. input,select {  max-width: 100%;}
  48. 48. jquerymobile.comdrupal.org/project/jquerymobile
  49. 49. TABLES
  50. 50. Avoid usingtables for grids
  51. 51. TABULAR DATA
  52. 52. Tabular Data
  53. 53. Tabular Data
  54. 54. denver2012.drupal.org
  55. 55. OTHER IDEAS• Use Google Charts to show a pie chart instead of a table• Provide a CSV download of the data
  56. 56. PANELS
  57. 57. palentir.net
  58. 58. palentir.net
  59. 59. CSS TO ADJUST PANEL
  60. 60. SEARCH
  61. 61. drupalsun.com
  62. 62. drupalsun.com
  63. 63. drupalsun.com
  64. 64. BANNERS
  65. 65. happycoghosting.com
  66. 66. happycoghosting.com
  67. 67. foodsense.is
  68. 68. foodsense.is
  69. 69. IFRAMES
  70. 70. iframe {  max-width: 100%;}
  71. 71. DECORATIVE ELEMENTS
  72. 72. css-tricks.com
  73. 73. css-tricks.com
  74. 74. CRAFTING YOUR CSS
  75. 75. CSS 3: FONT-FACE@font-face { font-family: Futura; src: url("../fonts/Futura-Book.otf"); }h2 { font-family: Futura;}
  76. 76. CSS3: BORDER-RADIUS www.css3.info #example { -moz-border-radius: 15px; border-radius: 15px; }
  77. 77. OTHER CSS ADVICE• Avoid absolute positioning• Avoid setting absolute heights and widths 
  78. 78. TOOLS AND RESOURCES
  79. 79. DRUPAL THEMES & MODULES
  80. 80. RESPONSIVE THEMES• Omega Theme• Adaptive Theme• Square Grid• Twitter Bootstrap• Others...
  81. 81. DRUPAL MODULEShttp://drupal.org/project/adaptive_image http://drupal.org/project/touch_icons http://drupal.org/project/jquerymobile http://drupal.org/project/mobile_tools
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. CHALLENGES
  86. 86. canada.gc.ca
  87. 87. TRAINING PROGRAMWe offer public and private Drupal training sessions. evolvingweb.ca/training
  88. 88. THANK YOU!

×