This is an infographic about responsive design process shared by Sparkbox.
Our responsive design process is fluid and changing, just like the technology we build with. The flowchart below outlines the general process we use today to develop responsive sites. This process stems from our team make-up, our tools and our work flow.
Talk with client and gather expectations about the project.
Determine site goals, evaluate technical requirements, perform content audit.
Create an HTML-based style prototype that establishes a visual guide for the site.
A typical style prototype can include:
• Color swatches
• Button styles/states
Establish content priority
Establish content priority for the designer using real content via a:
For complex sites with many unique templates, create static, mobile-width priority guides, similar to wireframes.
Content priority prototype
For simpler sites, create a responsive, HTML-based priority prototype.
Create design assets in HTML and CSS based on needs on style outlined in previous steps. This step is often a cyclical collaboration between designer and developer.
Code responsive templates
Code responsive templates starting with mobile first. Use the priority guide or prototype as a roadmap for how to prioritize mobile content. Incorporate design assets and establish how the design should respond as browser width increases.
Integrate templates into the content management system of choice.
Release the responsive creation to the world.