I create HTML mockups. How do I share them for collaboration?

Question

When working with a client, I build several sets of HTML mockups. They range in fidelity, are responsive, sometimes have a bit of content, have a few animations etc. They usually come in batches - a set of linked screens that displays a user flow or a set of components. This part of my workflow is great.

But I also need to collaborate with client, so I then upload the mockups to a server and share a link to them to my client. After that, the client gives me feedback in meetings, calls, e-mails and so on. This approach has several shortcomings that I'd like to address:

1. Versioning is handled manually using folder names, i.e. is unreliable and a chore
2. There is no good way for the client to browse and compare versions
3. The client get no navigation or overview of their mockups
4. I have to add annotations, notes etc. as part of my HTML mockup (instead of related to the mockup version)
5. The feedback from the client is located in an e-mail or in my notebook rather than in direct correlation with the correct version of the actual mockup, visible to me and the client

I know that using e.g. InVision would solve my problem, but I'm not interested in using a wireframing tool (or JPEG-to-wireframe tool). I often use the mockups going into the implementation phase. They also gets me full control over fidelity, from a sketchy set of boxes to final front-end code if I want to. This makes the dialogue with the client easier - "Resize your browser window to see the tablet view". Another nifty thing about them is that I can pull in the client's current website's base layout, or a widget that correlates with the change. I'm simply not interested in using a wireframing tool. If InVision supported HTML mockups, however, my problem would be solved!

Answer 1

This isn't one tool but two - Dropbox and Github. Here's instructions of how somebody else set it up:

http://alexcican.com/post/guide-hosting-website-dropbox-github/

---

Edit:

Zurb's Notable feels like the best tool out there for collaborating on HTML mockups: http://www.zurb.com/notable

Answer 2

You could try any of these, they're not UX tools but they'll display your HTML well enough and all have versioning and sharing.

bl.ocks.org

This is a simple viewer for code examples hosted on GitHub Gist.

It's created by Mike Bostock and mostly used for showing d3.js pages. But essentially each page is just an HTML page with javascript - so you can use it to show your mockups. Then you can collaborate on the comments in the gist as well as the versions.

CodePen

Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects.

Finally there's always jsfiddle.

Update:

As per comments - WordPress might work for a less technically minded client. WordPress page templates are just an HTML page with a PHP comment at the top giving the page a name. Then on the page you can have comments from the client by including the following PHP at the bottom of the page:

<?php comments_template(); ?> 

Answer 3

http://notableapp.com provides some nice functionality for what your suggesting. It allows you to host entire code projects, have users comment and commit changes and even expands into usability testing.

Here's a better link - http://zurb.com/notable/features/code