• Save
Optimal Mobile Experiences using Drupal and Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Optimal Mobile Experiences using Drupal and Responsive Web Design

on

  • 821 views

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.

Statistics

Views

Total Views
821
Views on SlideShare
821
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Optimal Mobile Experiences using Drupal and Responsive Web Design Presentation 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.  