Creating Responsive and Mobile-First Drupal Themes

Responsive Web Design is all the rage these days, and everyone wants a slice of the pie, regardless if it's for your own site refresh, or something you want to pitch to your next client. Responsive design has exploded in the past year, as can be easily evident by the number of large (and small) sites adopting responsive techniques to serve content to ALL devices at once using the same codebase.

This session will assume that you have a current understanding of what responsive and mobile-first are, and that you come to this session ready to learn EXACTLY how to incorporate these technologies now in your Drupal projects.

This session will guide you through the methods to actually implement responsive, mobile-first themes in Drupal, today... On your way out the door when this session ends, you'll be armed with the latest knowledge, tools, and inspiration to skip a time slot or two after the session, and start hacking away at your own responsive design!!

Session Outline

  • Introduction
  • Responsive CSS3 Media Queries (in 10 minutes)
    • min-width/min-device-width
    • max-width/max-device-width
    • orientation (portrait/landscape)
  • Creating Responsive from scratch…
    • Build the .info
    • Adding Responsive CSS (method 1)
    • Customizing Responsive CSS (method 1)
    • Adding Responsive CSS (method 2)
    • Customizing Responsive CSS (method 2)
    • Responsive Images
    • Viewport Meta Tag
    • Browser Support
    • Touch Icon
    • Responsive Breakpoints
  • Making Responsive easier with Omega
    • Omega is Responsive
    • Omega is Mobile-First
    • Omega is Growing
      • Over 20,000 Installs
      • Distributions using Omega
        • OpenPublic - http://openpublicapp.com
        • OpenPublish - http://openpublishapp.com
        • Open Enterprise - http://leveltendesign.com/enterprise
    • Omega has Grids
    • Omega has Friends
      • Omega Tools - http://drupal.org/project/omega_tools
      • Delta - http://drupal.org/project/delta
    • Omega is always Innovating
    • Omega has Resources
      • Documentation - http://drupal.org/node/819164
      • IRC - #drupal-omega
      • Drupal Group - http://groups.drupal.org/project/omega-framework
      • Premium Themes - http://themegeeks.com (launching soon)
    • Omega has an upcoming Webinar
      • March 28th, 2012 9:00 a.m. EST - http://himer.us/xkzf9d
      • March 28th, 2012 1:00 p.m. EST - http://himer.us/wQsMRN
    • Omega has Stickers
    • Omega is a Community Effort
      • Jake Strawn - himerus - http://drupal.org/user/159141
      • Sebastian Siemssen - fubhy - http://drupal.org/user/761344
      • Joel Moore - banghouse - http://drupal.org/user/381416
      • Chris Teitzel - cellar door - http://drupal.org/user/658076
      • Marco Kleine-Albers - e-anima - http://drupal.org/user/255202
  • Responsive Inspiration for your project
    • Responsive sites built using Omega

Speakers

Time slot: 
Thursday 10:45am-11:45am
Track: 
Mobile
Experience level: 
Intermediate
Questions answered by this session: 
How to implement a responsive theme from scratch...
How to use the Omega Framework to create a responsive project...
A common list of gotchas during the responsive process...
How can you implement these methods NOW in Drupal
Inspiration from Responsive, mobile first sites running on Drupal (and some that aren't)

Comments

Would be nice to see how we can take advantage of Zurb Foundation and Twitter's Bootstrap frameworks to implement responsive website in Drupal.

If you're interested, Zurb Foundation and Twitter Bootstrap (as well as Aura and general Sass responsive practices) will be touched upon at the Responsive Theming using Sass+Compass BoF Thursday afternoon.

Excellent session!

Colorado mountains