Responsive Design and   Drupal Theming      Suzanne Kennedy        Co-founder        @evolvingweb
What is Responsive     Design?
Media Queries
Media Query         Components• Media Type (i.e. screen or print)• Media Feature (i.e. max-width)  <link rel="stylesheet" ...
Targeting Large Screens
Targeting Small Screens
Other Media Features• height• device-width, device-height• orientation• resolution• color• aspect-ratio 
Browser Issues
Android Devices
Internet Explorer
Responsive Menus
Menu Wrapping
Images
Images thatare too wide
img {  max-width: 100%;}
Other Options• TinySrc Module (http://drupal.org/project/  tinysrc)• Set different image styles using Mobile Tools  module...
Responsive Forms
Form Element Width
Set Max Widthinput {  max-width: 100%;}
jQuery Mobile
Tables
Avoid Grid-Style     Tables
Tabular Data
Other Ideas• Use Google Charts to show a pie chart  instead of a table• Provide a CSV download of the data
Sidebars
Panels
CSS to Adjust Panel
Use CSS3
Font-face@font-face {   font-family: Futura;   src: url("../fonts/Futura-Book.otf"); }
Border-radius#example1 {  -moz-border-radius: 15px;  border-radius: 15px;}
Other CSS Tricks
Avoid absolutepositioning
iframe {  max-width: 100%;}
Responsive Drupal  Base Themes
Responsive Themes• Omega Theme• Adaptive Theme• Square Grid• Others...
•   EW Blog: http://evolvingweb.ca/story/responsive-    theming-how-apply-responsive-design-techniques-    drupal-theme•  ...
Thank You!
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Responsive Design and Drupal Theming
Upcoming SlideShare
Loading in...5
×

Responsive Design and Drupal Theming

4,119

Published on

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.

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,119
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n\n\nWhat are media queries?\nYou&apos;ve probably used media queries before, you just didn&apos;t know it. &amp;#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 &apos;screen&apos;.\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&apos;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&apos;t support media queries. So you have to decide what work-around to use.\n\nAndroid\nIf you&apos;re like me, the first think you do after you&apos;ve written these queries is to pull out your phone and see how the site looks!&amp;#xA0;\n\nI was really disappointed to see that my site didn&apos;t look any different on my mobile phone.\n\nFor Android phones, which is what I have, the browser actually doesn&apos;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&apos;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&apos;t mean&amp;#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.&amp;#xA0;\n\nAcquia switched to the Omega theme a while ago, and their website still isn&apos;t responsive. It does take a lot of time, and usually involves a site redesign.&amp;#xA0;\n\nEven if you&apos;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&apos;s screen width.&amp;#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&apos;re like me, once you start you can&apos;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&apos;t remember flexible width websites, think of Wikipedia or a Drupal admin theme.&amp;#xA0;\n\nBut of course, you don&apos;t want your website to expand across someone&apos;s 30 inch browser. For most &amp;#xA0;use cases, it&apos;s kind of sprawling and it&apos;s really hard to read text that goes on forever across the page.&amp;#xA0;\n\nSo the next step is to limit the width of the website for larger screen-sizes.&amp;#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.&amp;#xA0;\n
  • And you can use media queries to target browsers of a particular width and load CSS for that particular browser width.&amp;#xA0;&amp;#xA0;\n
  • What is responsive design?\n
  • But of course, you don&apos;t want your website to expand across someone&apos;s 30 inch browser. For most &amp;#xA0;use cases, it&apos;s kind of sprawling and it&apos;s really hard to read text that goes on forever across the page.&amp;#xA0;\n\nSo the next step is to limit the width of the website for larger screen-sizes.&amp;#xA0;\n
  • \n
  • \n
  • What is responsive design?\n
  • What is responsive design?\n
  • Conditional Stylesheets or load them with&amp;#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&apos;t remember flexible width websites, think of Wikipedia or a Drupal admin theme.&amp;#xA0;\n\nBut of course, you don&apos;t want your website to expand across someone&apos;s 30 inch browser. For most &amp;#xA0;use cases, it&apos;s kind of sprawling and it&apos;s really hard to read text that goes on forever across the page.&amp;#xA0;\n\nSo the next step is to limit the width of the website for larger screen-sizes.&amp;#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&amp;#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&amp;#xA0;&amp;#xA0;\n
  • Watch out for elements that are altered with javascript, including slideshows and text replacement tools&amp;#xA0;&amp;#xA0;\n
  • \n
  • What is responsive design?\n
  • \n
  • Themes that&amp;#xA0;\n
  • What is responsive design?\n
  • \n
  • What is responsive design?\n
  • \n
  • \n
  • Responsive Design and Drupal Theming

    1. 1. Responsive Design and Drupal Theming Suzanne Kennedy Co-founder  @evolvingweb
    2. 2. What is Responsive Design?
    3. 3. Media Queries
    4. 4. 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" />
    5. 5. Targeting Large Screens
    6. 6. Targeting Small Screens
    7. 7. Other Media Features• height• device-width, device-height• orientation• resolution• color• aspect-ratio 
    8. 8. Browser Issues
    9. 9. Android Devices
    10. 10. Internet Explorer
    11. 11. Responsive Menus
    12. 12. Menu Wrapping
    13. 13. Images
    14. 14. Images thatare too wide
    15. 15. img { max-width: 100%;}
    16. 16. Other Options• TinySrc Module (http://drupal.org/project/ tinysrc)• Set different image styles using Mobile Tools module (http://drupal.org/project/ mobile_tools)
    17. 17. Responsive Forms
    18. 18. Form Element Width
    19. 19. Set Max Widthinput {  max-width: 100%;}
    20. 20. jQuery Mobile
    21. 21. Tables
    22. 22. Avoid Grid-Style Tables
    23. 23. Tabular Data
    24. 24. Other Ideas• Use Google Charts to show a pie chart instead of a table• Provide a CSV download of the data
    25. 25. Sidebars
    26. 26. Panels
    27. 27. CSS to Adjust Panel
    28. 28. Use CSS3
    29. 29. Font-face@font-face { font-family: Futura; src: url("../fonts/Futura-Book.otf"); }
    30. 30. Border-radius#example1 { -moz-border-radius: 15px; border-radius: 15px;}
    31. 31. Other CSS Tricks
    32. 32. Avoid absolutepositioning
    33. 33. iframe {  max-width: 100%;}
    34. 34. Responsive Drupal Base Themes
    35. 35. Responsive Themes• Omega Theme• Adaptive Theme• Square Grid• Others...
    36. 36. • 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/
    37. 37. Thank You!

    ×