3 Tips for a Better Responsive Design Workflow

By James Knutila on Tuesday, August 27, 2013

3 Tips for a Better Responsive Design Workflow
The old model of web design -- fixed Photoshop mock-ups and separate coding -- doesn't translate well to the responsive web. And while media queries are great, separate designs for a lot of breakpoints can be just as unsustainable. Responsive design disrupts the traditional workflow, but offers a more efficient alternative: one that ultimately benefits designers and clients.

1. Make Content Your #1 Priority

The most effective foundation for a responsive design starts with content. Focus on content before aesthetics or structure; boil it down to the most essential level. Create a message that works consistently across all contexts, regardless of device or screen. This editing process can be powerful-- a content first approach can save time, confusion, and complexity down the road.

2. Encourage Collaboration Between Designers and Developers

Responsive calls for a more iterative wireframing process. Many designers increasingly rely on sketching and rapid HTML and CSS prototyping.

Make your process more efficient by encouraging collaboration between designers and developers. The days of keeping teams and skill sets apart are numbered. Strong collaboration means a design prepared for the technical challenges of responsive, and a design that translates more easily into the finished product.

3. Show Your Clients the Web in a Browser, Where it Belongs

Bringing clients a mock-up as an image or a print-out no longer makes sense… and it never really did. Send your clients a working URL, and they can view the latest wireframe in their browser, on their device. Create specific URLs for each iteration, and you'll have a reference for previous iterations and billable hours.

Developing a new design workflow requires innovative thinking. Everyone’s solution will be unique to their team and project-- what best practices have helped you?


Image via Flickr 

DevKit Templates

Find the website template you want in the Moboom Market