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…
  • Overview of the wireframe(s)
  • Examine the Media Queries we need
  • Build the .info...
  • Create the appropriate CSS files...
  • Sample CSS to see the media queries at work...
• Using Responsive Frameworks
  • Omega
  • Considering other newly responsive base theme like Zen or Adaptive Theme
• Responsive Inspiration for your project
  • Non-Drupal Inspiration
  • Drupal Inspiration
  • Omega Inspiration