DrupalCon London 2011: ADAPTIVE, RESPONSIVE, MOBILE FIRST

Presented by
Jake Strawn
As designers/themers we've always been pressed with dealing with screen sizes. I remember the days when we had to worry how many of our site visitors used a 800x600 screen resolution and when we could stop accommodating those users, much like we have with IE6 users today.

The problem is that in the past years, and more and more every day, the web is shifting back to smaller devices and resolutions in the mobile market. iPhones, iPads, Android phones & tablets, crackberries and more are quickly becoming the primary source by which our users consume the internet and media. So today, once again, there IS actually a reason to consider designs that will work well on an 800 pixel wide resolution. What you ask? An iPad in portrait viewing mode, and other large screen tablets. But it's not time to focus on a single resolution, but to focus on the concepts that will let us build for them ALL at ONCE.

This session will introduce you to Adaptive Design and Responsive Layouts and how you can implement designs and themes that will work on ANY device without the need for multiple versions of a site all with different themes and designs.

This session will be broken into two main portions:

Introduction to Responsive Design/Layouts & Examples
This portion will cover the ins and outs of responsive concepts and how to apply those to Drupal, the shortcomings in Drupal (and most frameworks) that make Responsive concepts still a somewhat "hacky" solution, and how we can better improve upon core to make this better for the mobile web in the future.
Introduction to ONE technique to get you started using these concepts now...
This portion will cover how Omega implements Responsive/Adaptive concepts, and where the future of this project is going, and how you can begin using the framework today, and contribute to it for the future all while creating powerful themes for any device your users may be using.
Omega has moved to a mobile first approach on design and layout concepts, making it simple to quickly push out a mobile friendly version of ANY drupal site, with options now to use multiple grids based on the 960.gs framework, but sized to your choosing. It is possible now to target certain device capabilities and sizes to render content in new ways using CSS3 @media queries.

Drupal is a registered trademark of Dries Buytaert.