An Event Apart: Responsive Design Workflow

by Luke Wroblewski July 9, 2012

In her presentation at An Event Apart in Austin, TX 2012 Sarah Parmenter talked about the changes responsive Web design requires of Web designers. Here's my notes from her talk on Responsive Design Workflow:

  • Responsive design is new for many organizations. Our workflows are responsible for most of the challenges teams face with responsive design. 56% of people surveyed had to change their workflow considerably to accommodate responsive web design.
  • Responsive design is never really quite finished. It’s a constant evolving process. We can’t simply make mock-ups in Photoshop and assume we are done. Web design is no longer one size fits all.
  • Most of us store our workflows in our heads. We need to share what we are doing so others can learn and enhance them.
  • Workflow issues with responsive design: content, UI pattern libraries, asset management.

Content

  • We need to stop using lorem ipsum text in our designs. It’s ok if we don’t have complete content but we need complete content structure when we start designing.
  • Even if you get content in advance, it may need to be re-written or adjusted for the Web. As a quick fix, consider using a traffic light system: red (remove), yellow (for large screens only?), green (all devices).
  • 65% of Web developers surveyed design to common breakpoints (320px, 768px, etc.) but we need to be more device agnostic.
  • Adobe’s InDesign allows you to make more fluid layouts than Photoshop. As a result, it may be a better design tool for responsive sites.
  • Native application design can be easier than Web design because there is a fixed canvas. But porting these fixed designs between platforms can be problematic. Different platforms require different solutions.

Asset Management

  • Creating multiple assets for different screen resolutions can be challenging. A scratch file of the UI elements in an interface can isolate all the assets you need to give developers into a single file.
  • Slicy is a Photoshop supporting application that allows you to name layers or groups with asset names and export all the required assets for a project at once. It’s great with scratch files.
  • Slicy can automatically export assets when your Photoshop file changes. This can be a big time savings for designers.
  • A transparent layer of touch target sizes can be overlaid on a comp to make sure all the touch targets are sized appropriately.
  • If you use shape layers in Photoshop, you can simply scale up 200% to create 2x images. This works well for most assets except those with patterns.
  • Automator can be used to write some simple actions to modify file names for 2x naming conventions.

Pattern Libraries

  • We learn by repetition. A lot of designers have a hard time articulating why a design solution is right. This is likely because we base decisions on our experiences that allows us to detect patterns.
  • Publishing a set of interface elements as a pattern library can help designers and developers collaborate on consistent product experience.
  • Gridpak is a tool for generating responsive grids.
  • Style Tiles are a useful tool for presenting designs independent of screen sizes. They focus more on mood and brand attributes.
  • A typical UI pattern library contains: Multiple size buttons and hover states, Contextual error, success and informational messages, Lists, Paragraphs with all H-Styles, Headers with imagery, Side navigation with advertisements, Blog post layout, Cross device navigation implementations, Color Swatches, Table layout, Forms, Tone of voice examples
  • This is Web design not religion. We are in one of the most fun industries in the World. We need to stay humble and work hard.