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