The Sparkbox Responsive Design Process

Jeremy Loyd on Dec 5th 2012 with 16 comments

At Sparkbox our responsive design process is fluid and changing, just like the technology we build with. I thought it would be nice to visualize this with a flowchart to illustrate our process, the team, our tools and workflow.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

Pin It

By Jeremy Loyd

Rollover to read this author's bio or click through to see a full list of posts by this author.

Creative Director @hearsparkbox. Husband, Father. Lover of type, history and sports.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

Jack Scotty
Any links or suggestions on how to perform a professional content audit?

http://eichefam.net Paul
The very thought fills me with dread.

Thomas Bates
I want this on a giant poster that I can have professionally printed and framed. I want to hang this in my office. Please make it so.

Lowal
lol

shivabeach
I hadnt thought of going small first then allowing it to expand. But it makes perfect sense

http://www.twitter.com/KreativeMente Kreative Mente
How does it make perfect sense?? I still dont get the reason for starting on mobile and working up

Chad
It makes sense because your mobile browser doesn’t have to filter through ALL of the styles to find the mobile stuff. if it starts with mobile first then the only styles it will see are the ones that are pertinent to the windows current media query being used.
http://www.facebook.com/phil.winkel Phil Winkel
I suggest reading “Mobile First”, see this link http://www.abookapart.com/products/mobile-first

dougieladd
I agree with Thomas… I’d like a huge one for my office wall :) Love the launch icon too.

jordon
What about the digital picture frames? Maybe a giant digital picture frame!

Lowal
Nice thought

http://twitter.com/MusepeakTeam Musepeak
Very interesting work!
However, as regards the right side of the infographic, we adopt a slightly different process. We use Mood boards to define the overall style of the project, then we design the main layouts in Photoshop. We tend to keep the HTML prototype only on the left side of the process and to join the 2 paths only after the client’s has approved the design layouts.
Basically, we tend to use the process described in this infographic: http://musepeak.tumblr.com/post/37479828813/ideal-design-process
Andrea
jordon
I like that you do an html mock up first. Then you integrate the template/theme. I wish my previous employer would have listened. It makes tasks so much less time consuming. Very interesting approach to responsive web development. I do not know to much about responsive web design, however I am in the process of learning. Any other good resources or maybe new WordPress theme tutorials? Thank you for sharing!
Pingback: Best of Tuts+ in December 2012 | DigitalMofo
Pingback: Best of Tuts+ in December 2012 | PJExploration
Pingback: Best of Tuts+ in December 2012 | SearchPsd Blog
Pingback: Best of Tuts+ in December 2012 | My Creative Directory
Pingback: Best of Tuts+ in December 2012 | Crafttuts+
http://www.facebook.com/charles.conti Charles Conti
love this
Pingback: Best of Tuts+ in December 2012 | IBN8 – Ableton Live Tutorials – Free VST's
Pingback: Best of Tuts+ in December 2012 | Wordpress Webdesigner
Pingback: Best of Tuts+ in December 2012 | Webdesigntuts+
Pingback: Best of Tuts+ in December 2012 | Gamedevtuts+
Pingback: Best of Tuts+ in December 2012 - Website Design Prices
Pingback: Best of Tuts+ in December 2012 | GMancer
Pingback: Best of Tuts+ in December 2012 | Wordpress Leaks
Kent
Very nice! Have you found that some CMS implementations work better with responsive sites? Any recommendations?
Pingback: Best of Tuts+ in December 2012 | Graphfucker
Pingback: Líquido vs. Responsivo, o cómo diseñar una coreografía para el contenido | Renomme blogg | Teaming up for you
Guest
At our our responsive design process it’s much better than Sparkbox
Pingback: Fluid vs. Responsive, or how to design a choreography for the content | Renomme blogg | Teaming up for you
Pingback: Angike.com
Pingback: 60+ Responsive Web Design Tutorial Roundup – Spoil Your Mobile visitors! | Good Favorites
Pingback: 10 Infographics for Learning About Responsive Web Design
Pingback: Tudo sobre Design Responsivo em 6 infográficos | Blog Lecom
Pingback: 20+ Examples Of Cool Infographics For Web Designers

The Sparkbox Responsive Design Process

Enjoyed this Post?

By Jeremy Loyd

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

The Sparkbox Responsive Design Process

Enjoyed this Post?

By Jeremy Loyd

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Webdesigntuts+ and Tuts+ on Twitter