Optimal Mobile Experiences using Drupal and Responsive Web Design

  • 464 views
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

Views

Total Views
464
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

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.   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.  