Responsive Design Workflow

A workflow for multi-platform responsive web design

The Responsive Era has changed our mindset as professionals and users, and of course it has also changed our design workflow in the same way in order to be more efficient.

Stephen Hay a coherent and practical responsive web design process, which involves creating low-fi web-based wireframes beginning with “mobile-first” strategy and working up to bigger screen sizes and hi-fi approaches in a process of progressive enhancement. This method gives us the opportunity to get constructive feedback from the client during the process, and allows us to make agile changes throughout the site with few changes to the CSS, and without needing to make dozens of modifications to the photoshop templates.

He proposes a content-based approach, starting with plain text and thinking about accessibility and usability starting from the content, not from a pre-designed UI.

“One of the biggests problems in web accessibility is that many people start with the advanced user interface, take that as a given, and try to “add accessibility”. Many website are designed from the UI in rather than form the content out”.

The book suggests tools and describes processes like content inventories, how to create a design language, sketching, applying styles incrementally, using web-based interactive mockups or designing and documenting breakpoints and visualizing them through graphs.

Share on Facebook

Share on Twitter

Share on Google

Share on Stumbleupon

Share on Pinterest

Share on Linkedin

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world.
We aim to create a meeting point where web professionals from across the globe can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.