Respre
October 24, 2014This 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. November 11, 2015 |
RespreIntroducing a new tool for Responsive Design. October 24, 2014 |
Anxiety DebtMental overhead from our digital social lives is getting us down. July 2, 2014 |
Three from Last WeekCompany retreats, client projects and babaganouj. May 27, 2014 |
For the Love of the URLA love letter to the endangered visible URL. May 20, 2014 |
The Internet is a MirrorReminding myself that the internet is what you make of it. May 13, 2014 |
This WebsiteConsider this my "About" page. May 4, 2014 |
FallMotivation, cold weather, and moving to New York City. November 17, 2013 |
FinishingThe journey can be so addicting, I might never arrive. May 31, 2013 |