• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Responsive Websites in Drupal
 

Building Responsive Websites in Drupal

on

  • 3,893 views

This presentation is a bit outdated. Read these slides instead: http://www.slideshare.net/rupl/responsive-drupal-beyond-the-media-query ...

This presentation is a bit outdated. Read these slides instead: http://www.slideshare.net/rupl/responsive-drupal-beyond-the-media-query

This is an overview for Drupal themers looking to integrate responsive design into their workflow.

From mobile-first CSS3 media queries to feature detection and performance testing, this presentation will get you started down the path to flexible, responsive layouts look great and adapt to any device, regardless of size or capability.

This was presented at Dallas Drupal Days 2011 by Chris Ruppel.

Statistics

Views

Total Views
3,893
Views on SlideShare
3,883
Embed Views
10

Actions

Likes
8
Downloads
50
Comments
0

3 Embeds 10

url_unknown 7
http://twitter.com 2
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

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…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Building Responsive Websites in Drupal Building Responsive Websites in Drupal Presentation Transcript

  • Building Responsive Websites and Apps with Drupal Dallas Drupal Days 20112011.07.09 - Dallas Drupal Dayshttp://dallasdrupal.org/sessions/building-responsive-websites-and-apps-drupal
  • What is Responsive?‣ Responsive layouts are the original design on the web: http://naked.dustindiaz.com/‣ As screens got bigger, we got pickier about the look of a site on the desktop monitor
  • What is Responsive? ‣ Now we deal with these:Credits: Aaron Stanush
  • What is Responsive? ‣ Now we deal with these:Credits: Aaron Stanush
  • What is Responsive? ‣ Not to mention these:Credits: http://j.mp/rethink-mobile
  • So many browsersCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
  • So many browsers ‣ Do you really have time to test for and cater to:Credits: http://en.wikipedia.org/wiki/Mobile_operating_system
  • So many browsers ‣ Do you really have time to test for and cater to: ‣ Chrome, Firefox, Safari, Opera, Internet Explorer, Symbian, iPhone, iPad, Android phones, Android tablets, RIM (Blackberry), Windows CE, Windows mobile, Windows Phone 7, Linux, bada, MeeGo, Brew OSCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
  • So many browsers ‣ Do you really have time to test for and cater to: ‣ Chrome, Firefox, Safari, Opera, Internet Explorer, Symbian, iPhone, iPad, Android phones, Android tablets, RIM (Blackberry), Windows CE, Windows mobile, Windows Phone 7, Linux, bada, MeeGo, Brew OS ‣ ...booCredits: http://en.wikipedia.org/wiki/Mobile_operating_system
  • Forget about...
  • Forget about...‣ User-agent detection + Separate mobile theme
  • Forget about...‣ User-agent detection + Separate mobile theme‣ Separate subdomain / path + redirection
  • Forget about...‣ User-agent detection + Separate mobile theme‣ Separate subdomain / path + redirection‣ External services
  • Forget about...‣ User-agent detection + Separate mobile theme‣ Separate subdomain / path + redirection‣ External services‣ These are alternatives, each with strengths and weaknesses. We don’t care about them today :)
  • Go Responsive
  • Go Responsive‣ Use the front-end the way it wants to be used — as a versatile presentation layer
  • Go Responsive‣ Use the front-end the way it wants to be used — as a versatile presentation layer‣ The layout of a website can shift and adapt to changes in screen size and device capability
  • Go Responsive‣ Use the front-end the way it wants to be used — as a versatile presentation layer‣ The layout of a website can shift and adapt to changes in screen size and device capability‣ CSS3 Media Queries JavaScript tools that adapt real-time Feature detection
  • ExampleCredits: http://mediaqueri.es
  • ExampleCredits: http://mediaqueri.es
  • CSS Media Queries<plug> or check out http://fourkitchens.com </plug>
  • CSS Media Queries ‣ The spec: http://www.w3.org/TR/css3-mediaqueries/<plug> or check out http://fourkitchens.com </plug>
  • CSS Media Queries ‣ The spec: http://www.w3.org/TR/css3-mediaqueries/ ‣ The buzz: http://www.alistapart.com/articles/responsive-web-design/<plug> or check out http://fourkitchens.com </plug>
  • CSS Media Queries ‣ The spec: http://www.w3.org/TR/css3-mediaqueries/ ‣ The buzz: http://www.alistapart.com/articles/responsive-web-design/ ‣ The hotness: http://mediaqueri.es<plug> or check out http://fourkitchens.com </plug>
  • Basic Example<link rel=”stylesheet” href=”this.css”>
  • Basic Example<link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”>
  • Basic Example <link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”> /* This CSS will always apply - global styles */ body {padding: 10px; } #container {width: 100%; margin: 0; }Do not use these in conjunction!
  • Basic Example <link rel=”stylesheet” href=”this.css” media=”(min-width: 960px)”> /* This CSS will always apply - global styles */ body {padding: 10px; } #container {width: 100%; margin: 0; } /* This CSS will only apply when the window is 960px or greater */ @media screen and (min-width: 960px) { body {padding: 0; } #container {width: 960px; margin: 0 auto; } }Do not use these in conjunction!
  • cool, but...
  • cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)
  • cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’t just pop open your existing stylesheets, wrap them in queries, and call it a day
  • cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’t just pop open your existing stylesheets, wrap them in queries, and call it a day‣ We need to mentally remove the line between mobile and desktop...
  • cool, but...‣ IE 8 and below do not recognize media queries (weep not, more on this later)‣ Don’t just pop open your existing stylesheets, wrap them in queries, and call it a day‣ We need to mentally remove the line between mobile and desktop...‣ ...but don’t freak out. They’re just differently sized screens.
  • Mobile First Approachhttp://j.mp/rethink-mobile
  • Mobile First Approach ‣ aka Progressive Enhancementhttp://j.mp/rethink-mobile
  • Mobile First Approach ‣ aka Progressive Enhancement ‣ Read, re-read, and bookmark (game changer) http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuhttp://j.mp/rethink-mobile
  • Mobile First Approach ‣ aka Progressive Enhancement ‣ Read, re-read, and bookmark (game changer) http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibuhttp://j.mp/rethink-mobile
  • Progressive CSShttp://j.mp/rethink-mobile
  • Progressive CSS ‣ No media query support is a media queryhttp://j.mp/rethink-mobile
  • Progressive CSS ‣ No media query support is a media query ‣ Target the least capable browser firsthttp://j.mp/rethink-mobile
  • Progressive CSS ‣ No media query support is a media query ‣ Target the least capable browser first ‣ Query for more functional browsershttp://j.mp/rethink-mobile
  • Progressive CSS ‣ No media query support is a media query ‣ Target the least capable browser first ‣ Query for more functional browsers ‣ More compatible than when you start with desktop styles and filter “down” to mobile versionhttp://j.mp/rethink-mobile
  • Feature Detectionhttp://www.modernizr.com/
  • Feature Detection‣ Not just limited to screen sizehttp://www.modernizr.com/
  • Feature Detection‣ Not just limited to screen size‣ Modernizr tests for the specific features you needhttp://www.modernizr.com/
  • Feature Detection‣ Not just limited to screen size‣ Modernizr tests for the specific features you need‣ More reliable than user-agent detectionhttp://www.modernizr.com/
  • Feature Detection‣ Not just limited to screen size‣ Modernizr tests for the specific features you need‣ More reliable than user-agent detection‣ Modular and lightweight, pick your tests: http://www.modernizr.com/download/http://www.modernizr.com/
  • Drupal Modules
  • Drupal Modules‣ Semantic Views: http://drupal.org/project/semanticviews Allows you to clean up your Views output sans templates
  • Drupal Modules‣ Semantic Views: http://drupal.org/project/semanticviews Allows you to clean up your Views output sans templates‣ Responder: http://drupal.org/sandbox/rupl/1104416 Force module stylesheets into mobile-first approach
  • Drupal Themes‣ Sadly, this is lacking at the moment.‣ We haven’t yet found solid patterns that can be encapsulated into a theme.‣ Look for responsive designs to pop up in distros before there’s a go-to solution in Drupal proper
  • Useful Libraries
  • Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond
  • Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond‣ Responsive-Images - Bandwidth savings for smaller screens https://github.com/filamentgroup/Responsive-Images
  • Useful Libraries‣ Respond.js - For I ncapabl E browsers https://github.com/scottjehl/Respond‣ Responsive-Images - Bandwidth savings for smaller screens https://github.com/filamentgroup/Responsive-Images‣ Adapt.js - JavaScript alternative to media queries. Built upon 960 Grid System https://github.com/nathansmith/adapt
  • Front-end Performancehttp://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
  • Front-end Performance‣ Up to 97% of perceived mobile response time depends on the front-end... reallyhttp://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
  • Front-end Performance‣ Up to 97% of perceived mobile response time depends on the front-end... really‣ Your super-stack might serve requests quickly, but if you don’t request quickly, it still seems slow.http://www.webperformancetoday.com/2011/04/20/desktop-vs-mobile-web-page-load-speed/
  • Front-end Performance
  • Front-end Performance‣ Cache HTML, internal and external if possible
  • Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS
  • Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS‣ Move $scripts to the bottom of your templates
  • Front-end Performance‣ Cache HTML, internal and external if possible‣ Optimize CSS/JS‣ Move $scripts to the bottom of your templates‣ Use responsive images, data URIs, and/or sprites
  • Check your Work
  • Check your Work
  • Check your Work‣ YSlow http://developer.yahoo.com/yslow/
  • Check your Work‣ YSlow http://developer.yahoo.com/yslow/‣ Page Speed http://code.google.com/speed/page-speed/docs/extension.html
  • Thank You! chris@fourkitchens.com twitter.com/rupl http://drupal.org/user/4119992011.07.09 - Dallas Drupal Dayshttp://dallasdrupal.org/sessions/building-responsive-websites-and-apps-drupal
  • All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2011 Four Kitchens, LLC.