Responsive Design Process [Infographic]

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.

Establish style

Create an HTML-based style prototype that establishes a visual guide for the site.

A typical style prototype can include:
• Typography
• Color swatches
• Button styles/states
• Header
• Navigation
• Photography

Establish content priority
Establish content priority for the designer using real content via a:

Priority guide
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.

Finalize design
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.

CMS integration
Integrate templates into the content management system of choice.

Release the responsive creation to the world.

Responsive Design Process [Infographic]

Community manager at Visual Contenting. Jacqueline loves to talk about social media trends, new technology and how they help businesses accelerate their marketing efforts.

1 thought on “Responsive Design Process [Infographic]

Comments are closed.