Responsive web design and Drupal

What is a responsive design?

As one of the leading innovators in responsive design Ethan Marcotte explains it is composed of three distinct parts.

 

1. A flexible grid.
2. Flexible images. Or more specifically, images that work in a flexible context (whether fluid themselves, or perhaps controlled via overflow).
3. Media queries. The final layer of a responsive design, media queries optimize the design for different viewing contexts, and spot-fix bugs that occur at different resolution ranges.

 

OK, so what is responsive design?

The best way to quickly appreciate what is responsive web design is to visit a few really good examples. Start with a large browser window and slowly resize right down. Notice how the follwoing sites reposition, remove or repurpose the layout to cope with the smaller view port.

• http://hicksdesign.co.uk/
• http://meltmedia.com/work/
• http://colly.com/
• http://51bits.com/
• http://sasquatchfestival.com

To fully understand why we have arrived at adaptive and responsive approaches I strongly recommend listening to Lullabot's podcast "Who is Jeffrey Zeldman?". It provides some historical perspective about web standards, how we thought 960 grid was the perfect solution and subsequently that it emerged it was not.

Do responsive with Drupal

Jake Strawn and Sebastian Siemssen have delivered Omega 3, a responsive mobile first theming system for Drupal. This enables Drupal themers to create web sites which actively change based upon the screen size of the device used in order to provide an optimised interface and images at appropriate size for the available bandwidth.

Examples of responsive sites on Drupal include

• http://fourkitchens.com
• http://drupalcampnh.org

DrupalCon London session

Jake Strawn presented at DrupalCon London "Adaptive, Responsive, Mobile First and Drupal Theming for the Future with HTML5, CSS3 and Omega" which gives a good executive overview of the challenges responsive web and mobile devices represents. You can watch it here.

Find extensive documentation and support for Omega for Drupal.

 

Posted via email from Web, Social, Analytics, Open Source