Notes from the Studio

Responsive Design Workflow Tips

Responsive design is rapidly becoming the new standard in our industry, along with its evolving carousel of best practices, platforms and tools. The movement has caused a shift in thinking, especially as we adapt our workflows for a more efficient project process.

Dissecting the responsive design workflow, though, can be difficult — it’s highly individual and iterative. However, you can apply general tips and techniques to almost every responsive project.

From content structure to scalable images, we’ll cover seven techniques to consider in your next responsive design.

1. Mobile First

Starting with a mobile first approach and designing with progressive enhancement covers all bases, helps you focus and prioritize the constraints of mobile design, while you build new innovative experiences and capabilities.

It means the default presentation and base content is mobile, optimized for the simplest devices first. Devices with small screens and media query support is then served an advanced layout. Finally, the content and layout are then enhanced for the “desktop.” It’s an approach even Google has adopted, as the number of people perusing the web on mobile devices continues to grow at an incredible rate.

Designing for the mobile experience should now be our starting point, not the end. It forces us to focus on the essential content, to build optimized, fast-loading mobile experiences that are progressively enhanced, with the user at the forefront.

As ZURB, the team behind the popular responsive CSS framework, Foundation, noted, “A mobile first approach doesn’t just concentrate on developing for mobile phones; it is also used to develop better usability of sites, develop better use of web real estate and better reduce the amount of unnecessary elements from web pages.”

While the mobile first responsive design technique is still in its infancy, and presents a variety of technical challenges, embracing it means you are building on an adaptive, focused, lean, uncluttered future-friendly foundation.

This is an excerpt of my Mashable article, to read about the 7 Responsive Design Tips to Revamp Your Workflow, head over to Mashable, and let me know what you think!

Leave a Comment

Got something to say? Then I want to hear from you!