Session: Rethinking Responsive Building Techniques with Drupal
Speaker:  John Albin Wilkins - creator and maintainer of Zen theme

30,000 Foot View

John's work shows brilliance and there were some well worthwhile tips and tricks from the session that made it well worth the hour spent listening.  However, don't expect it to directly address responsive - rather he touches on the surrounding topics that loosely float in the "responsive" sphere.  Also, (like many brilliant coders?) he isn't exactly an organized teacher.

Ungrouped Notes

• Zen 5 coming out (out now in dev version) with responsive built in - Omega has shot to the top as the responsive theme for Drupal while Zen has wilted in the background.  John has been working on many surrounding issues to enable a full featured responsive release of Zen which is now out and almost ready for prime-time. 
• Analysis of layout patterns for responsive websites - Off Canvas seems most interesting/promising to me as the incredibly long scrolling issue becomes very real for mobile users very quickly
•  Identified an issue with region-based layouts as they are "boring and look like every other site".  True.  I didn't hear a direct alternative, but I believe John led to field-driven layouts instead of region-based.
• Mobile First is a key mantra of responsive design.  John equated these three: Mobile First > Content First > Users First which provides a more business-strategy line of thinking in my opinion.  Mobile First ultimately begs the question, "What do users care about most (first)?"  The answer to that is typically content-based, which in turn gives clear guidance to a mobile first design.
• Content First thinking works very well with Drupal 7 because D7 is field based.  We don't have to move whole nodes around, instead we can move fields.
• "Field-based responsive layouts means 'responsive content'" - this is perhaps the shift John was pointing at when he decried regions-driven layouts.

John seemed to jump around a lot in the rest of the session, however once I looked at the Zen project page and saw the feature list for Zen 5.x it became a lot more clear as most of these are listed as now key components of Zen.

Fences

http://drupal.org/project/fences

Fences is a module John and a few others built to address some issues with Drupal 7's handling of fields.

• D7 has a poor field.tpl.php setup (way too many divs and blind blanket-treatment of all field types)
• Fences provides more fitting wrapping around fields with HTML5-spec-based markup
• Fences allows for choosing what wrapper (field.tpl.php replacement effectively) to use on a per-field basis
• "When in doubt, go naked" - Fences' "naked" option is just the H3 label and value(s)
• Used everywhere automatically - anywhere field.tpl.php is called
• Fences uses theme hook suggestions (go learn about these is John's recommendation)

Fences is important from the outset, to make a D7 site lean.  The default field.tpl.php isn't lean.

Custom Layouts

I never quite followed how this was relevant, but I'm assuming Zen makes use of custom layouts to help with either flexible node displays and/or responsive setups (more likely the former I'd guess).  Quite possibly this is just a nifty thing John wanted to hit on as it helps for site reusability of layouts across projects.

Many people are familiar with Panels and how it can have custom built layouts.  However, it was news to me that these layouts have ben abstracted out of Panels and into CTools therby allowing other modules to use them.  First in line is Display Suite which lets you choose from your custom layouts for node rendering and then fields can be placed on a per-region basis.

John ran through the steps, but ultimately watching the video will be your best bet:

1. Add layouts directory to your theme by adding this line to your .info file:
   plugins[panels][layouts] = layouts
2. Add these files to your theme's directory:
   layouts/layout_name/layout_name.inc
   layouts/layout_name/layout_name.tpl.php
   layouts/layout_name/layout_name.css
   Optionally you can add some other custom files for an icon (.png) and potentially separate admin vs. front-end layouts.
3. Configure your content type to use your custom layout (/admin/structure/types/manage/node-type/display), but be sure to clear the cache first.
4. Manage Display settings now provide "regions" from the layout that you can use and choose per-field.

Adaptive Images

There isn't an easy answer for adaptive images.  Each approach available has pros and cons.  John's recommendation in the current Drupal world of adaptive image modules is http://drupal.org/project/adaptive_image.

On a more big-picture note he suggested reading http://blog.cloudfour.com/responsive-imgs/ to first understand the issue, then you're informed to pick the best option for your project based on the current Drupal module options.

+++++++++++++++++++++++++++++++

Additionally, John touched on SASS and the new Zen Grids system he's building.  He ran through what he calls natural vs. unnatural breakpoints and made the thoughtful point that breakpoints perhaps should be guided more by design than by device sizes as device sizes will change.  One happy-medium to these two approaches is bounding a device size, so instead of setting the iPad Portrait mode as your boundary to-the-pixel, instead have that size within a larger range so design isn't driven by it, but rather informed.  A recommended blog post by his colleague on this topic.

And my personal favorite part of the entire session was this slide: