Your SlideShare is downloading. ×
Responsive Design and Drupal Theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive Design and Drupal Theming

4,009
views

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 …

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,009
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n\n\nWhat are media queries?\nYou've probably used media queries before, you just didn't know it.  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! \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 \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. \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. \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. \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. \n\nBut of course, you don't want your website to expand across someone's 30 inch browser. For most  use cases, it's kind of sprawling and it's really hard to read text that goes on forever across the page. \n\nSo the next step is to limit the width of the website for larger screen-sizes. \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. \n
  • And you can use media queries to target browsers of a particular width and load CSS for that particular browser width.  \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  use cases, it's kind of sprawling and it's really hard to read text that goes on forever across the page. \n\nSo the next step is to limit the width of the website for larger screen-sizes. \n
  • \n
  • \n
  • What is responsive design?\n
  • What is responsive design?\n
  • Conditional Stylesheets or load them with  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. \n\nBut of course, you don't want your website to expand across someone's 30 inch browser. For most  use cases, it's kind of sprawling and it's really hard to read text that goes on forever across the page. \n\nSo the next step is to limit the width of the website for larger screen-sizes. \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’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  \n
  • Watch out for elements that are altered with javascript, including slideshows and text replacement tools  \n
  • \n
  • What is responsive design?\n
  • \n
  • Themes that \n
  • What is responsive design?\n
  • \n
  • What is responsive design?\n
  • \n
  • \n
  • Transcript

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