Responsive Web Design Workflow

For teams struggling to design responsively, Photoshop just ain't cuttin' it anymore. The problem is, our traditional workflows demand flat design comps, which don't quite jive with a flexible, content-first methodology.

Plus, responsive challenges us to rethink our roles. After all, who is the designer these days?

Fortunately, Stephen Hay has a practical, 10-step approach to improving your responsive web design workflow. With new ease, you'll go from text content to wireframes, deciding on breakpoints, and creating browser mockups before topping it off with style guidelines.

And your team will thank you for it.

Start with the content

• Take inventory of what must transition to new product experiences
• Define a high-level content structure

Establish UX flows and styles in text

• Shape the basis of your design by writing real content, even if it's boring
• Begin applying styles to that content and voila! A basic mobile site is born

Create and present web-based mockups

• Design in the browser—even if you're not a developer
• Pitch your design like a pro and get sign-off long before it's

Keep styles in-check

• Document the style systems and decisions inherent to your design
• Build a guide that auto-updates whenever the styles change in your design

Watch this seminar if you:

• Feel like your team could move faster but is confused by roles or next steps
• Want client buy-in sooner while preventing surprises (aka derailments) later
• Focus too much on artifacts rather than decision-making, especially early on

Designing for different devices and screen sizes—amid changing budgets, roles, and timelines—doesn't have to be painful. Get some medicine from Stephen.