Your SlideShare is downloading. ×
Optimal Mobile Experiences using Drupal and Responsive Web Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Optimal Mobile Experiences using Drupal and Responsive Web Design


Published 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.

Published in: Technology

1 Like
  • 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  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 ( • 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
  • 13.  AdaptiveTheme o Developed by Jeff Burnz • Top 30 Drupal core contributor • Maintainer of Seven and Bartik default themes • Full-time Drupal themer o
  • 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 o Search for ―responsive‖
  • 19.  WP default themes o Twenty Eleven o Twenty Twelve (new default) • Available now on 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. 
  • 27.  RWD is like when you cross the streams. It opens a doorway to a new experience.
  • 28.  