Presented by Sarah Parmenter.

  • Rebranded! “The Responsive Workflow”
  • Responsive design is like a never-ending piece of art. It’s always evolving.
  • Read Luke Wroblewski’s “Mobile First” already!
  • 2015: Mobile and Desktop usage collide!
  • Trent Walton: “To think about the web responsively is to think about the web in proportions, not pixels.””
  • Aptus: screenshot your responsive designs at different breakpoints.
  • responsive.is

Sarah’s Workflow

  1. Structure
  2. Content
  3. Typography
  4. Mood board
  5. UI Pattern Library
  6. Asset Management
  7. Native considerations

Structure

  • 65% of designers say they work to common breakpoints.
  • Mark Boulton: “You can create good experiences without knowing the content. You can’t create good experiences without content structure.”
  • Gridset, by Mark Boulton, for creating custom grids.
  • Gridpak, a responsive grid generator.
  • Crazyegg heatmapping service.

Content

  • Time to let go of using lorem ipsum in our designs.
  • Traffic light system for identifying important content. Color-coding content green, yellow, or red. Green content for all devices/experiences. Yellow for context-specific content. Red for content that may not be entirely necessary or useful.
  • Voice & Tone

Typography

Mood board

  • styletil.es
  • Pinterest can be a good source for imagery for mood boards.
  • Andy Clarke: “Static visuals are the currency of the web.”

UI Pattern Library

Asset Management

  • Slicy (née Layer Cake) for busting out design elements/assets from a PSD by layers/groups. Would be very useful for a pattern library full of buttons and other similar UI patterns. Automatically create retina-ready graphics by adding +@2x to end of filename.

Native considerations

  • Touch guidelines: 45-47px averge index finger, 72px average thumb size when used on a touch device.
  • When designing, keep a set of overlays at 44px x 44px touch size to see if hit areas overlap. If so, adjust your design.
  • When developing for mobile, don’t forget about border-image for creating assets.
  • OS cross-contamination: design patterns on iOS do not translate to Android do not translate to Blackberry, etc.
  • Use Automator to add @2x to a bunch of filenames.
  • Brad Frost: “This is web design not religion.”