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!

I hope you enjoyed this blog post. It’s not the only one! Please enjoy reading another from the list of selected posts below. You can see all my posts here.

How much does it cost to sell stuff online?

Looking at the current state of consumer ecomm fees.

Respre

Introducing a new tool for Responsive Design.

Anxiety Debt

Mental overhead from our digital social lives is getting us down.

Three from Last Week

Company retreats, client projects and babaganouj.

For the Love of the URL

A love letter to the endangered visible URL.

The Internet is a Mirror

Reminding myself that the internet is what you make of it.

This Website

Consider this my "About" page.

Fall

Motivation, cold weather, and moving to New York City.

Finishing

The journey can be so addicting, I might never arrive.

Google+