Drupal & Responsive Design

UPDATE: Here is a link to the Layout Techniques Demo
Here is a link to the slides.

What is Responsive Web Design? What factors have led to this movement? How is it applied? Why is it important to incorporate this from the very beginning?

I'll walk people through the brief history of web design layout practices to demonstrate the "whats" and "whys" of these strategies and how they have collectively distilled into this new practice; Responsive Web Design.

The presentation will guide the audience through a single, static HTML document. I will demonstrate each layout strategy applied through the years by layering stylesheets one by one. This (as a not-so coincidental consequence) demonstrates progressive enhancement and how it goes hand-in-hand with Responsive Web Design. While the final layout lends itself to small screen...there are still a few steps to optimize for mobile (touch screen devices). This demonstration is done to support the presentation and will not be a training session.

Layout strategies demonstrated
(each adds to the previous)
------------------------------------------------
None: simple HTML
Simple layout
Better layout
Fluid layout
Adaptive layout
Responsive layout
Mobile optimized

Where does this intersect with Drupal?
------------------------------------------------
While these strategies are not tied to any CMS or framework, it is important for Drupal developers and themers to incorporate this now. While the reasons for "themers" to incorporate this may be obvious (themers *should* have the ultimate control of the HTML, CSS, and JS delivered to the browser), it is just as important for "developers" in that the HTML coming out of their modules should be lean and adaptable (not the div soup we are all used to).

Who would benefit from this presentation?
------------------------------------------------
- New web designers, ones that may not be familiar with
history of layout strategies, or those not familiar with RWD
- Themers
- Module developers whose modules output HTML
- Anyone involved with web strategy decisions. The more
you know about what should be planned for up front, the
more successful your projects will be

Related topics covered simply by the nature of this topic
------------------------------------------------
- HTML5
- Progressive Enhancement
- Capabilities detection
- Webkit meta tags

Time: 
9:40-10:30 AM
Room number: 
Auditorium

Session Info

Skill: 
Intermediate
Category: 
Design and UX

Comments

kenyob's picture

I would love to see the slides for this session.
Any ETA on when they may get here?