Your SlideShare is downloading. ×
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
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
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
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
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
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
×

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

Building Responsive Websites with Drupal

18,743

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 …

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
37 Likes
Statistics
Notes
No Downloads
Views
Total Views
18,743
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
5
Likes
37
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

Transcript

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

×