• Save
Building Responsive Websites with Drupal
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Building Responsive Websites with Drupal

on

  • 17,415 views

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

Statistics

Views

Total Views
17,415
Views on SlideShare
17,380
Embed Views
35

Actions

Likes
30
Downloads
0
Comments
5

7 Embeds 35

http://mvp-fil 25
https://twitter.com 3
http://www.avlis.nl 3
https://si0.twimg.com 1
http://pinterest.com 1
http://www.slashdocs.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice presentation.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks. I find the resources links near the end of the slideshow very helpful.
    Are you sure you want to
    Your message goes here
    Processing…
  • That's useful.
    Are you sure you want to
    Your message goes here
    Processing…
  • In your assumption, we can use the technique scroll or zoom that leads users to control their views.
    Are you sure you want to
    Your message goes here
    Processing…
  • Good introduction into responsive design, but unfortunately there are some issues that still remain unanswered by the responsive philosophy.
    The main in my view are 'responsive tables', which is a common issue not yet solved by responsive design.
    What to do when you 'must' display a table with 10 columns ? that doesn't look great in a smartphone when responsive design is applied to it.
    Greeting and thanks for sharing your view on responsive design.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building Responsive Websites with Drupal Presentation 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!