Responsive Web Design   for Drupal   www.responsivewebdesignguild.com          @emmajanedotnet          emma@designtotheme...
I am IAM
SorryA boot eh?
Drupaldrupal.org/user/1773                       Photo: morten.dk                       Legs: walkah
Author / Trainerhttp://www.designtotheme.com/workshopshttp://www.designtotheme.com/ebooks
</me>
Agenda●    Whirlwind tour of responsive web design.●    Crash course on base themes in Drupal.●    Applying responsive pri...
IntroductionIn the beginning: ● Flexible Layouts ● Media queries ● Resizeable Images
Flexible Layouts
Screen Sizes● 320px / 80px per column = 4 columns● 480px / 80px = 6 columns● 600px / 80px = 7 columns with extra  breathin...
Media Queries in HTML<link rel="stylesheet" type="text/css"media="screen and (max-width: 320px)”href="320-and-smaller.css"...
Media Queries in CSS@media screen and (max-width: 320px) {  #content, #nav, #sidebar {    width: 100%;  }  #banner {    di...
Flexible Content● Images, Media● Formsimg, iframe, embed, object, input, form {    max-width: 100%;}
Tables●   Decide how to linearize your data and collapse or    hide <td>s as appropriate.
IE8 and Lower● Polyfill: a javascript shim that replicates the  standard API for older browsers (e.g. for media  queries, ...
Viewport Sizes
Adaptive Navigation
Responsive Media Handling● This is not solved yet. We’re still working on what a “best practice” is.● Typically a JS scrip...
Your Responsive ToolkitCheck out your handout forresources.
Summary●   Responsive web sites are “just” sites that squish    down politely.●   The technology is harder because of our ...
Drupal ThemesProvides “overrides” for any CSS or HTML markup inDrupal core or contrib modules. Occasionally addadditional ...
Base Themes Drupal●   Base themes are a set of improved theming    defaults over Drupal core.●   If your base theme doesnt...
My Fave Base Themes●    Zen has amazing documentation. Use with    Zen Grids for maximum efficiency.●    NineSixty is my g...
Responsive + Drupal = ?●   Creating a responsive Drupal site can be as simple    as applying a single style sheet.●   http...
Planning the Retrofit● Audit the content on the site.● Identify content break points.● Determine page element  characteris...
Planning the Retrofit●   Identify the goal of every type of page.    “Beauty” is not a page goal. (And if it is, you’re do...
Content Audit● Find all the different kinds of things you  display on the site.● Make a spreadsheet if you have a big site...
Identify Break Points● Retrofit is (sort of) a luxury because  you have real content.● Use content, not device sizes, to  ...
Domicile – Original Design
Domicile – under 960px
Domicile – under 750px
Domicile – under 600px
Page Element Characteristics● Navigation (reflow)● Font sizes (allow to adapt)● Imagery (is it necessary to  accomplish pa...
Flexible Layouts●Add a new CSS file to your theme that will override fixed- pixel #ID and .class properties.stylesheets[al...
Media Queries●   Based on your content’s break    points, set up the media queries in    your new CSS file.@media screen a...
Revised – Below 960px
Revised – Below 750px
Revised – Below 650px
Below 650px With Nav Fix
Flexible Content● Reset fixed-width content to be  fluid.● Images, Forms, Video● Maybe also data tables.
Viewport Sizes● Create a new template file  html.tpl.php● Add the relevant meta tags● Don’t forget to clear Drupal’s  cache
Maybe Support IE● Choose and use a polyfill.● e.g. respond.js
Test Your Site● Check content reflows.● Check rich media resizes.● Check navigation is usable.● Adjust CSS if necessary.
Retrofit Summary● Define your goals for each page.● Ensure your page goals can be  met for a variety of device sizes.● App...
Working with Fusion
Get It For YourselfThe responsive Drupal theme, Alloy, isavailable from:http://drupal.org/project/alloy
Fusion●   Uses 960gs with 12 columns by default.●   Uses more than just regions for layout.●   Uses “skins” to alter the p...
DisclaimerFusion is my favourite GUI-based basetheme.●   I love their team of developers.●   The skins are great for clien...
Responsive Features●   Flexible layouts.●   Sane media queries with four layouts.●   Context-aware forms. Need to add resp...
Layouts●    Desktop only screen and (min-width:1200px)●    Tablet (landscape) only screen and (max-device-width: 1024px) a...
Regions + Blocks● Fusion relies on the 960gs for its  regions and block  configurations.● You may subdivide any region  in...
Default Layout
Alloy Design
Wireframe
Alloy Responsive●   Fusion compresses the wireframe for    desktop -> tablet.●   The mobile layout is linearized.●   You c...
Desktop (1200px)
Tablet – Landscape (960px)
Tablet – Portrait (768px)
Mobile
Applying Skins
Applying Grid Width Skins
Applying Layout Skins
Navigation● Using superfish JS library.● No additional adjustments are made  for mobile-friendly navigation.● You can make...
Get It For YourselfThe responsive Drupal theme, Alloy, isavailable from:http://drupal.org/project/alloy
Give Aways!     @emmajanedotnet     emma@designtotheme.com  www.responsivewebdesignguild.com
Upcoming SlideShare
Loading in...5
×

Responsive Web Design for Drupal, CMS Expo

3,100
-1

Published on

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

No Downloads
Views
Total Views
3,100
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
63
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Web Design for Drupal, CMS Expo

  1. 1. Responsive Web Design for Drupal www.responsivewebdesignguild.com @emmajanedotnet emma@designtotheme.com
  2. 2. I am IAM
  3. 3. SorryA boot eh?
  4. 4. Drupaldrupal.org/user/1773 Photo: morten.dk Legs: walkah
  5. 5. Author / Trainerhttp://www.designtotheme.com/workshopshttp://www.designtotheme.com/ebooks
  6. 6. </me>
  7. 7. Agenda● Whirlwind tour of responsive web design.● Crash course on base themes in Drupal.● Applying responsive principles to Drupal sites.● Case study #1: responsive retrofit● Case study #2: using Fusion● Awesome give-away
  8. 8. IntroductionIn the beginning: ● Flexible Layouts ● Media queries ● Resizeable Images
  9. 9. Flexible Layouts
  10. 10. Screen Sizes● 320px / 80px per column = 4 columns● 480px / 80px = 6 columns● 600px / 80px = 7 columns with extra breathing room● 768px / 80px = 9 columns with extra breathing room● 960px / 80px = 12 columns
  11. 11. Media Queries in HTML<link rel="stylesheet" type="text/css"media="screen and (max-width: 320px)”href="320-and-smaller.css" />
  12. 12. Media Queries in CSS@media screen and (max-width: 320px) { #content, #nav, #sidebar { width: 100%; } #banner { display: none; }}
  13. 13. Flexible Content● Images, Media● Formsimg, iframe, embed, object, input, form { max-width: 100%;}
  14. 14. Tables● Decide how to linearize your data and collapse or hide <td>s as appropriate.
  15. 15. IE8 and Lower● Polyfill: a javascript shim that replicates the standard API for older browsers (e.g. for media queries, border radius, etc).● respond.js● adapt.js – doesn’t serve stuff until it can be used by the browser (good for bandwidth)● modernizr
  16. 16. Viewport Sizes
  17. 17. Adaptive Navigation
  18. 18. Responsive Media Handling● This is not solved yet. We’re still working on what a “best practice” is.● Typically a JS script determines screen size and reports back to the server.● Server then gives predetermined “low bandwidth” content.● However, small screen doesnt always mean “low bandwidth.” Its just easier to make that assumption.● e.g. http://drupal.org/project/responsive_images
  19. 19. Your Responsive ToolkitCheck out your handout forresources.
  20. 20. Summary● Responsive web sites are “just” sites that squish down politely.● The technology is harder because of our expectations of delivering perfect content.● By using existing libraries we can provide an acceptable experience to browsers that dont support modern tech.
  21. 21. Drupal ThemesProvides “overrides” for any CSS or HTML markup inDrupal core or contrib modules. Occasionally addadditional effects.
  22. 22. Base Themes Drupal● Base themes are a set of improved theming defaults over Drupal core.● If your base theme doesnt improve Drupal, its not the right base theme for you.● http://www.designtotheme.com/blog/base-themes
  23. 23. My Fave Base Themes● Zen has amazing documentation. Use with Zen Grids for maximum efficiency.● NineSixty is my go-to theme for quickly banging out just about any theme.● Fusion is my go-to theme when I will be handing off the site to someone else to maintain who is tech savvy and may need to update the layout later on.
  24. 24. Responsive + Drupal = ?● Creating a responsive Drupal site can be as simple as applying a single style sheet.● http://drupal.org/project/domicile_responsive
  25. 25. Planning the Retrofit● Audit the content on the site.● Identify content break points.● Determine page element characteristics for each new width.● Bonus: allocate time for retrofit based on visitor stats.
  26. 26. Planning the Retrofit● Identify the goal of every type of page. “Beauty” is not a page goal. (And if it is, you’re doing it wrong.)● Audit the content on the site.● Identify content break points.● Determine page element characteristics for each new width.● Bonus: allocate time for retrofit based on visitor browser stats.
  27. 27. Content Audit● Find all the different kinds of things you display on the site.● Make a spreadsheet if you have a big site.● If relevant, note the contextual relationships of content pieces (e.g. user picture + video submission).
  28. 28. Identify Break Points● Retrofit is (sort of) a luxury because you have real content.● Use content, not device sizes, to determine break points.● Stretch / expand your browser to find where the design “breaks”.
  29. 29. Domicile – Original Design
  30. 30. Domicile – under 960px
  31. 31. Domicile – under 750px
  32. 32. Domicile – under 600px
  33. 33. Page Element Characteristics● Navigation (reflow)● Font sizes (allow to adapt)● Imagery (is it necessary to accomplish page goals?)
  34. 34. Flexible Layouts●Add a new CSS file to your theme that will override fixed- pixel #ID and .class properties.stylesheets[all][] = responsive­default.css
  35. 35. Media Queries● Based on your content’s break points, set up the media queries in your new CSS file.@media screen and (max­width: 960px) {}● Assign new properties and values for containers, fonts and navigation.
  36. 36. Revised – Below 960px
  37. 37. Revised – Below 750px
  38. 38. Revised – Below 650px
  39. 39. Below 650px With Nav Fix
  40. 40. Flexible Content● Reset fixed-width content to be fluid.● Images, Forms, Video● Maybe also data tables.
  41. 41. Viewport Sizes● Create a new template file html.tpl.php● Add the relevant meta tags● Don’t forget to clear Drupal’s cache
  42. 42. Maybe Support IE● Choose and use a polyfill.● e.g. respond.js
  43. 43. Test Your Site● Check content reflows.● Check rich media resizes.● Check navigation is usable.● Adjust CSS if necessary.
  44. 44. Retrofit Summary● Define your goals for each page.● Ensure your page goals can be met for a variety of device sizes.● Apply relevant CSS media queries to ensure content “squishes”.
  45. 45. Working with Fusion
  46. 46. Get It For YourselfThe responsive Drupal theme, Alloy, isavailable from:http://drupal.org/project/alloy
  47. 47. Fusion● Uses 960gs with 12 columns by default.● Uses more than just regions for layout.● Uses “skins” to alter the properties of blocks for layout.● Most configuration done through the admin interface.● Well documented.
  48. 48. DisclaimerFusion is my favourite GUI-based basetheme.● I love their team of developers.● The skins are great for clients who want to extend their site.● They don’t rush to market with the latest feature. They get it right the first time.
  49. 49. Responsive Features● Flexible layouts.● Sane media queries with four layouts.● Context-aware forms. Need to add responsiveness for rich media.● Supports older browsers with polyfill css3- mediaqueries.js● Focuses on “show all” approach, so there are no hidden elements eating up bandwidth.
  50. 50. Layouts● Desktop only screen and (min-width:1200px)● Tablet (landscape) only screen and (max-device-width: 1024px) and (orientation:landscape), only screen and (min-width:960px) and (max- width:1199px) and (min-device-width: 1100px)● Tablet (portrait) only screen and (max-device-width: 1024px) and (orientation:portrait), only screen and (min-width:768px) and (max-width:959px) and (min-device-width: 1100px)● Mobile only screen and (max-width:759px)● These can all be easily adjusted in the UI.
  51. 51. Regions + Blocks● Fusion relies on the 960gs for its regions and block configurations.● You may subdivide any region into more columns by assigning the width of a block.
  52. 52. Default Layout
  53. 53. Alloy Design
  54. 54. Wireframe
  55. 55. Alloy Responsive● Fusion compresses the wireframe for desktop -> tablet.● The mobile layout is linearized.● You can choose the position of the sidebars through the UI for each of the layouts.● With additional CSS you might want to collapse / linearize regions for the the tablet – portrait display.
  56. 56. Desktop (1200px)
  57. 57. Tablet – Landscape (960px)
  58. 58. Tablet – Portrait (768px)
  59. 59. Mobile
  60. 60. Applying Skins
  61. 61. Applying Grid Width Skins
  62. 62. Applying Layout Skins
  63. 63. Navigation● Using superfish JS library.● No additional adjustments are made for mobile-friendly navigation.● You can make these adjustments based on the Domicile retrofit.● Or look at the beta superfish options for touch-friendly navigation.
  64. 64. Get It For YourselfThe responsive Drupal theme, Alloy, isavailable from:http://drupal.org/project/alloy
  65. 65. Give Aways! @emmajanedotnet emma@designtotheme.com www.responsivewebdesignguild.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×