Responsive Design and Drupal Theming
•
6 likes•3,445 views
Rather than designing a site that works for one screen size, or designing separate themes that work for different devices, the goal of responsive design is to build a website that adapts to the width of the user's screen and works for both large and small screens. In this presentation, I cover the basics of making a responsive Drupal 7 theme. I also discuss the challenges of designing a theme that adapts to screen width and some approaches to take during both the design and theming process.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Responsive Design and Drupal Theming
Similar to Responsive Design and Drupal Theming (20)
More from Suzanne Dergacheva
More from Suzanne Dergacheva (20)
Recently uploaded
Recently uploaded (20)
Responsive Design and Drupal Theming
- 1. Responsive Design and Drupal Theming Suzanne Kennedy Co-founder @evolvingweb
- 5. What is Responsive Design?
- 10. Media Query Components • Media Type (i.e. screen or print) • Media Feature (i.e. max-width) <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="/style.css" />
- 13. Other Media Features • height • device-width, device-height • orientation • resolution • color • aspect-ratio
- 14. Browser Issues
- 15. Android Devices
- 18. Responsive Menus
- 19. Menu Wrapping
- 24. Images
- 25. Images that are too wide
- 26. img { max-width: 100%; }
- 29. Other Options • TinySrc Module (http://drupal.org/project/ tinysrc) • Set different image styles using Mobile Tools module (http://drupal.org/project/ mobile_tools)
- 30. Responsive Forms
- 32. Set Max Width input { max-width: 100%; }
- 33. jQuery Mobile
- 34. Tables
- 35. Avoid Grid-Style Tables
- 37. Tabular Data
- 40. Other Ideas • Use Google Charts to show a pie chart instead of a table • Provide a CSV download of the data
- 41. Sidebars
- 44. Panels
- 47. CSS to Adjust Panel
- 49. Use CSS3
- 50. Font-face @font-face { font-family: Futura; src: url("../fonts/Futura-Book.otf"); }
- 51. Border-radius #example1 { -moz-border-radius: 15px; border-radius: 15px; }
- 52. Other CSS Tricks
- 54. iframe { max-width: 100%; }
- 55. Responsive Drupal Base Themes
- 57. Responsive Themes • Omega Theme • Adaptive Theme • Square Grid • Others...
- 59. • EW Blog: http://evolvingweb.ca/story/responsive- theming-how-apply-responsive-design-techniques- drupal-theme • Media Features: http://www.w3.org/TR/css3- mediaqueries/#media1 • Responsive Tables: http://css-tricks.com/9096- responsive-data-tables/ • Drupal Base Themes Poll: http://groups.drupal.org/ node/175234 • Responsive Design Testing: http://mattkersley.com/ responsive/ • A list apart Article: http://www.alistapart.com/ articles/responsive-web-design/
- 60. Thank You!
Editor's Notes
- \n\n\nWhat are media queries?\nYou've probably used media queries before, you just didn't know it. &#xA0;Media queries allow you to load different CSS for different types of displays. So you would have used this to load a print.css file only when the user prints a webpage. To target only screens, you would use 'screen'.\n\nBut mediaqueries can also specify the screen-width. You can set the max-width at which the file is loaded, or the min-width.\n\nIn a Drupal .info file, media queries look like this.\nSo to target large screens, you could use the first one, and to target smaller screens, use the second one.\n\nDevice-width vs. Browser-width\nThe great thing about using min-width and max-width is that these target the browser-width. So you don't need to change your device width to test your changes, you can just resize your browser.\n(Demo?) If you use min-device-width and max-device-width, these will only target a screen that is physically a certain width.\n\nResolution\n\nInternet Explorer\nOf course, Internet Explorer is always the party pooper. Internet Explorer (up until IE9) doesn't support media queries. So you have to decide what work-around to use.\n\nAndroid\nIf you're like me, the first think you do after you've written these queries is to pull out your phone and see how the site looks!&#xA0;\n\nI was really disappointed to see that my site didn't look any different on my mobile phone.\n\nFor Android phones, which is what I have, the browser actually doesn't know what its width is. You have to add a viewport meta tag to your site for the browser to know its width.\n\nCSS3\n
- Designing for every device is the theme of the upcoming DrupalCon Denver. We all know that mobile devices have become ubiquitous, and with comes a change in how we approach designing for mobile devices.\nImage: DrupalCon Denver\n
- It's impossible to target every device and create a separate design for each one. Instead, the goal of responsive design is to build websites that adpat to the width of the browser that the user chooses.\n\nThis doesn't mean&#xA0;\n
- Creating a responsive design is not as easy as adding a couple extra CSS files to your theme. It does involve an actual redesign and putting some thought into the ideal layout for smaller and larger screens.&#xA0;\n\nAcquia switched to the Omega theme a while ago, and their website still isn't responsive. It does take a lot of time, and usually involves a site redesign.&#xA0;\n\nEven if you're using a base theme that is responsive.\n
- What is responsive design?\n\nThe goal of building a responsive website is that it will adapt to anyone's screen width.&#xA0;\n
- I redesigned the Evolving Web site to be responsive, and it involved changing a number of views and panels, changing image styles, re-doing the homepage, and landing page-style layouts, and adjusting the menu items.\n\nAnd if you're like me, once you start you can't stop. Moving around blocks and columns always makes you want to do more in changing the style of the site.\n
- The approach that I took was to start with a flexible-width layout that would take up the entire width of the browser.\nIf you don't remember flexible width websites, think of Wikipedia or a Drupal admin theme.&#xA0;\n\nBut of course, you don't want your website to expand across someone's 30 inch browser. For most &#xA0;use cases, it's kind of sprawling and it's really hard to read text that goes on forever across the page.&#xA0;\n\nSo the next step is to limit the width of the website for larger screen-sizes.&#xA0;\n
- And then for really small screensizes, less than 780px, you can start re-aligning and removing elements. So if you show three portfolio images at 960px, maybe you want to cut that down to 2 at 780px, or change the widths of these images.&#xA0;\n
- And you can use media queries to target browsers of a particular width and load CSS for that particular browser width.&#xA0;&#xA0;\n
- What is responsive design?\n
- But of course, you don't want your website to expand across someone's 30 inch browser. For most &#xA0;use cases, it's kind of sprawling and it's really hard to read text that goes on forever across the page.&#xA0;\n\nSo the next step is to limit the width of the website for larger screen-sizes.&#xA0;\n
- \n
- \n
- What is responsive design?\n
- What is responsive design?\n
- Conditional Stylesheets or load them with&#xA0; drupal_add_css()\n
- The approach that I took was to start with a flexible-width layout that would take up the entire width of the browser.\nIf you don't remember flexible width websites, think of Wikipedia or a Drupal admin theme.&#xA0;\n\nBut of course, you don't want your website to expand across someone's 30 inch browser. For most &#xA0;use cases, it's kind of sprawling and it's really hard to read text that goes on forever across the page.&#xA0;\n\nSo the next step is to limit the width of the website for larger screen-sizes.&#xA0;\n
- What is responsive design?\n
- What is responsive design?\n
- What is responsive design?\n
- What is responsive design?\n
- What is responsive design?\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- By default in Drupal, form elements won&#x2019;t resize for small screens.\n
- Solve this by using max-width: 100%;\n\nYou can also check out the jQuery mobile module if you want to make your forms more app-like..\n
- \n
- \n
- What is responsive design?\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- Watch out for elements that are altered with javascript, including slideshows and text replacement tools&#xA0;&#xA0;\n
- Watch out for elements that are altered with javascript, including slideshows and text replacement tools&#xA0;&#xA0;\n
- \n
- What is responsive design?\n
- \n
- Themes that&#xA0;\n
- What is responsive design?\n
- \n
- What is responsive design?\n
- \n
- \n