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
Comments
Zurb Foundation & Twitter Bootstrap
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
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.
well worth going to drupalcon
Excellent session!