Respre

This past weekend, I spent a few hours creating a little tool for responsive design. So little, in fact, that I think it can fit into most people’s responsive design workflows. It’s called Respre (short for responsive preview). Respre helps teams preview responsive web designs in-browser without writing any code.

Get Respre

Download Respre (.zip)github.com

Docs and “Getting Started” Guidegithub.com

Example Respre Previewrespre.herokuapp.com

A Little Background

At RTO+P, when we get a new project, we tend to design a handful of pages very early in the process. These designs help get the client and the team excited about the project and give us immediate “artifacts” which can be distributed for internal and client critique and feedback. We do it like this because it’s a lot easier to get people to give open feedback when there’s something that feels finished and ready to judge. Compared to any other UX strategy like wireframes or user flows, creating early static comps gets us further, faster. Speed is always of the essence in advertising.

As responsive design took hold, it got a bit harder to conveniently pass around comps for feedback. Instead of looking at a single page in a PDF, you might have to review three or more different pages for mobile, tablet, and desktop breakpoints. And you’d need to connect the dots between the design elements completely outside of the in-browser context that would eventually house the finished website – really tough for a lot of people who aren't fully up-to-speed on RWD.

We had this problem for a long time. We’d found and used some apps that helped (Invision is one notable example; it’s super polished and client-friendly). But we didn’t find anything that was free and simple enough to not be a drag to use. So I made Respre to scratch that itch.

Respre is a little open-source app that does, essentially, one thing: it reads image files from a folder and presents them as a responsive preview in your browser. Creating and organizing previews is a matter of creating folders and renaming image files within them. No code required.

Here’s an example of a Respre preview, stocked with some boilerplate images.

Respre runs on most PHP-friendly servers (including Heroku) and doesn’t require any installation other than dragging-and-dropping the files wherever you want them to live. Run it locally to preview your own work, or put it up online to share the previews with your teammates.

I hope that you and your team find Respre useful. If you have the time and an idea on how to improve it, please feel free to contribute!