Optimal Mobile Experiences using Drupal, WordPress and Responsive Web Design

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

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)
21. ˜ 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
22. – —
23. ˜ RWD has also come to WordPress ˜ Different audience o Less technical ˜ Where to start? o http://wordpress.org/extend/themes/ o Search for “responsive”
24. ˜ 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
25. ˜ 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
26. 1024px width
27. 320px width
28. ˜ 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
29. ˜ 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
30. ˜ 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”
31. ˜ http://mediaqueri.es/
32. ˜ RWD is like when you cross the streams. It opens a doorway to a new experience.
33. — –