Responsive, Mobile First: Designing for the Future

The following outline is based on the presentation by Jake Strawn given at D4D Boston 2011 and DrupalCon London. This outline is a complete bullet point list of the topic points of the presentation, and the resources discussed during the presentation.

DrupalCon London Presentation

D4D 2011 Presentation

Session Outline

• Introduction

• Let's talk Mobile...

  • Types of Mobile Devices

    • Feature Phones & Smart Phones
    • Why we should still care about Feature Phones

  • User Agent Detection

    • IS WRONG

  • Mobile First Concepts

    • Reasons for Mobile First
    • Build for the Lowest Common Denominator

• Responsive Web Design

  • What is Responsive?

  • Examples

    • colly.com
    • sasquatchfestival.com

  • Drupal Can Do That Too!!

    • fourkitchens.com
    • omega.developmentgeeks.com
    • kmubusinesspartner.ch
    • DrupalCampNH.org
    • acquia.com

• The Path to Responsive

  • The JavaScript Method

    • Adapt.js

  • The CSS3 Method

    • @media queries
      • @media all/print/screen
      • @media all and (max-width/min-width)
      • @media all and (max-device-width/min-device-width)

  • Combining The Methods

    • Respond.js

  • Which Method is Right?

• Implementing Responsive Layouts

  • History of Omega

  • Features in Omega 3.x

    • Responsive Grids

      Omega 3.x ships with a 1200px, 960px, 720px, and fluid grid by default with customizable @media queries for each grid/layout.

    • Mobile First Approach

      No, not the First Mobile.... MOBILE FIRST!

    • Enhanced Performance

      Advanced Caching, Less looping, clever CSS aggregation.

    • (pre) Aggregation of Responsive CSS

      Because of a large set of media queries, the Responsive CSS (when CSS aggregation is turned on) will pre-aggregate all the media queries into a single CSS file.

    • Zones & Regions Easily Configurable

      Any zone can be placed in either <header>, <section> (main content) or <footer> semantic page elements, and any region can be assigned to any zone...

    • Primary Region, Source & Visual Ordering

      You can set a region to be the Primary Region, and adjust to regions around it, and set the visual ordering on page and ordering in source.

    • css[], libraries[], grids[]

      The new elements present in the .info structure for Omega allows customizable css, javascript libraries and grids with simple setup.

    • Extend/Implement your own Grids

      Using the new grids[ ] array in the .info file, you can declare your own grid structure based on 960.gs standards for your subtheme.

    • Equal Height Regions & Blocks

      Each zone can have equal height regions, and every region can have equal height blocks...

    • Simplified Theme Settings UI

      It really is this friggin’ simple...

    • Did I mention sites that are using Omega?!
      • maclife.com
      • maximumpc.com
      • maximumtech.com
      • guitarworld.com
      • acquia.com
      • training.acquia.com
      • getlaunchkit.com
      • kmubusinesspartner.ch
      • stonyfield.com
      • developmentgeeks.com
      • omega.developmentgeeks.com
      • DrupalCampNH.org

  • Where Drupal Falls Short

    • Drupal 8 Web Services & Context Core Initiative
    • Drupal 8 Design Initiative

• Resources

  • Omega Resources

    • omega.developmentgeeks.com
    • drupal.org/project/omega
    • drupal.org/project/delta
    • drupal.org/project/omega_tools
    • groups.drupal.org/omega-framework
    • #drupal-omega on Freenode IRC

  • Other Resources

    • 960.gs
    • adapt.960.gs
    • github.com/scottjehl/Respond
    • abookapart.com
    • alistapart.com/articles/responsive-web-design/
    • zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/
    • alistapart.com/articles/fluidgrids/
    • unstoppablerobotninja.com/entry/fluid-images
    • lukew.com/ff/entry.asp?933
    • garfieldtech.com/blog/web-services-initiative
    • adaptivethemes.com/drupal-8-design-initiative

• Who can I thank for this?

  • Jake Strawn

    • Twitter
    • Facebook
    • LinkedIn
    • Google+
    • Drupal.org

  • Sebastian Siemssen

    • Twitter
    • Facebook
    • LinkedIn
    • Google+
    • Drupal.org