Optimal Mobile Experiences using Drupal and Responsive Web Design

Uploaded on

An introduction to using Drupal to fashion a site design with Responsive Web Design.

An introduction to using Drupal to fashion a site design with Responsive Web Design.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1.   Daniel Stout – Nov. 1, 2012
  • 2.  What is it? How does it work?
  • 3.  A List Apart article by Ethan Marcotte, May 25, 2010 o http://www.alistapart.com/articles/responsive-web-design/  A Book Apart book, 2011  What is it? o Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). [Wikipedia]
  • 4.  Before: o No mobile sites, 1024x768 screen standard o Fixed-width designs o Separate mobile sites (http://m.wisc.edu/) • Mobile users have different needs • Quick access to info on the go (bus schedules, sports scores) • Problem: maintaining two sites instead of one
  • 5.  After: o One site that adjusts to the screen width • One site = Less maintenance o Fluid layouts o Images scale up and down o Design adjusts on-the-fly
  • 6.  How does it work?  CSS3 media queries o Original W3C draft in 2001 o Official W3C standard as of June 2012  Breakpoints o Desktop: 1024px or more o Tablet: 768px o Smartphone: 320px / 480px o Also: landscape and portrait
  • 7.  CSS3 media query @media only screen and (max-device-width: 480px) { div#wrapper { width: 460px; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float: none; width: auto; } }
  • 8. CITS Website @ 1024px width
  • 9. CITS Website @ 320px width
  • 10.  What makes for an optimal mobile experience? o One column o Small header – text only? o Easy navigation access o Sidebars go below content o Less emphasis on images and most of all— o Focus on the content!
  • 11. 
  • 12.  What is Drupal? o An open source Content Management System (CMS) or Content Management Framework (CMF)  Widely used in academia  Look & Feel o Themes o Theme frameworks supporting RWD • AdaptiveTheme • Omega • Zen o Sub-themes o http://drupal.org/project/themes
  • 13.  AdaptiveTheme o Developed by Jeff Burnz • Top 30 Drupal core contributor • Maintainer of Seven and Bartik default themes • Full-time Drupal themer o http://drupal.org/project/adaptivetheme
  • 14.  AdaptiveTheme: three components o AT Core • Must be enabled for sub-themes to work • Provides RWD and design functionality in Appearance menu o AT Admin • Replacement theme for Drupal admin o AT Sub-theme • Template for creating your own sub-theme • Provides little CSS design
  • 15.  Sub-themes o AT sub-theme (blank slate) o Corolla o Sky o Pixture Reloaded o Footheme (sub-sub-theme)  Gives more of a basic design to build from  CSS theme hierarchy o AT Core o Corolla, Sky or Pixture Reloaded o Your theme (based on Footheme)
  • 16.  Smaller breakpoints = Fewer layout options  A lot of power without needing to code  AdaptiveTheme, Omega, Zen o All good options o Start with a theme framework and build from there
  • 17. 
  • 18.  RWD has also come to WordPress  Different audience o Less technical  Where to start? o http://wordpress.org/extend/themes/ o Search for ―responsive‖
  • 19.  WP default themes o Twenty Eleven o Twenty Twelve (new default) • Available now on WordPress.org or with WP 3.5  Creating themes o Can create CSS from scratch o Or use an existing theme that supports RWD
  • 20.  Plugins o WPtouch • Serves a mobile version of site • Does browser/device sniffing • Not RWD o Jetpack: Mobile Theme • New Jetpack feature • Uses RWD to serve up a mobile version • No configuration • Expects standard class and ID names • Offers option to view full site • Not stuck in mobile view on tablets
  • 21. 1024px width
  • 22. 320px width
  • 23.  Drupal – o Powerful admin interface o Theme frameworks vs. themes • Frameworks offer a lot more functionality  WordPress – o Easier to setup o Simpler out-of-the-box experience o Auto-mobile with Jetpack’s Mobile Theme
  • 24.  RWD is a best practice  New thinking on RWD: o Don’t use arbitrary pixel breakpoints o Android proves screens come in many, many sizes o Instead, base breakpoints on the design o When design breaks, create a breakpoint
  • 25.  Related ideas: o Mobile First • Design with mobile in mind • Content-centric orientation o Progressive Enhancement • Check for browser/device capability • If available, give a fuller experience • The reverse of ―graceful degradation‖
  • 26.  http://mediaqueri.es/
  • 27.  RWD is like when you cross the streams. It opens a doorway to a new experience.
  • 28.  