Quick, easy and free prototyping on Heroku

Matt Griffin’s recent article on A List Apart about designing responsive sites in HTML, rather than something like OmniGraffle or Photoshop is a great idea and something I’ve done a few times before.

Clients love it as it let’s them click through a site, resize their browser, look at it on their smartphone and see hover states – rather than go through pages and pages of ‘static’ designs. You do spend longer on the wireframe and design phases than you would traditionally, but as the article mentions, you’ll have a boat load of frontend work done before you go full on into build.

One new thing that caught my attention was the use of Heroku as the service where they hosted the wireframes, which is a great idea – you get everything in version control from the start, don’t have to worry about setting up hosting or domains on your own servers and best of all it’s free.

I spent a couple of hours this afternoon getting to grips with the platform and knocking together a lean prototyping kit, which I’d like to release after I’ve given it a bit more polish. You can’t just host static content on Heroku, but it’s easy to use one of the supported languages (PHP is supported, but currently undocumented), to wrap up and serve any static content.

With just a couple of dozen lines using the Express framework on Node.js you can build an app that serves plain ol’ HTML as well as doing cleverer stuff using Jade templates and routing (a bit like fancy permalinks in WordPress).

Responsive web design requires a whole new way of thinking about how sites are built, so having a tools like this makes the process better for clients and easier for developers.