If you read web design blogs, you’ve likely heard of the debate between “designing in the browser” and good old-fashioned “comps”. In corner number one, we have those who believe in designing every single pixel in Photoshop (read: graphics engine of your choice). In corner number two are those who believe in eschewing Photoshop in favor of designing in the browser. But like most things in life, the best solution rarely lies in extremities. I believe the happy medium of good web design lies somewhere near the middle of the Photoshop/browser spectrum.

When I had the chance to hear Ben Callahan speak at Convege FL this past year, the idea of this happy medium coalesced for me. Callahan and the folks at SparkBox have come up with a great solution: style prototypes. These quick HTML/CSS prototypes present the styles for a given site in a simple, responsive webpage allowing them to be viewed on all kinds of devices. You can include everything from color palette options to heading styles to types of imagery, icons and more. This does several awesome things:

1.) It gives the client a real sense of how the site will feel on the screen sizes that are relevant to them.

Maybe that red is too much when viewed on your client’s huge display. Or maybe that <h3> heading doesn’t stand out enough on mobile. Style prototypes create more accurate client expectations. They show how the design will perform once it’s out in the real world.

2.) It allows you to accurately display web typography.

I’m always amazed how different typography looks when rendered by the browser. Wouldn’t you rather know what it will look like before dropping it in 5 different comps?

3.) You can show site interactions with ease.

I have found that, although there are several prototyping tools out there for linking PSDs, I end up spending too much time linking together static pages and learning tricks for mimicking real site interactions—all things that will promptly be thrown in the digital garbage once the project has progressed to real development. Wouldn’t it be better to create the actual interactions in code that can be reused in production?

4.) It gives you an excellent, low-pressure way to practice your responsive coding chops.

If you’re anything like me, you don’t get to code enough. This is a great way to become better and faster at coding. And as I mentioned above, style prototypes go a long way to transitioning your work to development.

5.) It saves you hours in Photoshop.

Enough said, right? But a cool thing about this is once you have a style prototype that’s approved, implementing the style over multiple pages is easy. It keeps you consistent and makes changes happen site-wide, not per PSD.

For more on style prototypes, SparkBox’s Jeremy Loyd wrote an excellent blog post. He also posted a great example of a style prototype.

Samantha Warren wrote an excellent article about her version of these prototypes, or style tiles, back in 2012.

I originally wrote this blog post 6 months ago, but for some unconscious reason I didn’t post it. It wasn’t until I read Andrew Clarke’s Smashing Conference presentation that I was able to understand my hesitance to make it public. As much as I understand why style prototypes are great, I still have a hard time convincing myself to change my antiquated process. I still long for (and continue to create) fully-realized Photoshop comps. Yet each time, the finished product never looks like the ephemeral Photoshop document I’ve spent hours creating. Lesson learned? Not quite yet… but I’m getting there. This statement by Clarke hits it home for me:

“Using these static visuals is ‘bringing a knife to a gun fight.’ They can only communicate something that’s superficial, artificial. They’re high-fructose, extra sweet, but even though of little nutritional value, people love them and so want more and more. We designers have largely learned to live with all of the deficiencies of static visuals, and we compensate for them with our familiarity with the tools that we use to make them.”

So, ok, I get it. My addiction to perfect Photoshop comps is just that: an addiction. But it’s time to break free. Join me in my journey to a better, more responsible way to design for the web. I pledge to use style prototypes on my next project and so should you. Let’s do this.