8

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!

Improve this question
7
  • 1
    This is a great question for chat. I don't know if it's a good question for stackexchange as things get out of date very quickly.
    – Mayo
    Jan 21, 2016 at 17:42
  • 2
    As @mayo says, these questions aren't really suited to Stack Exchange sites, because there is no such thing as a correct answer. See this Stack Exchange blog post for more reasoning here: blog.stackoverflow.com/2010/11/qa-is-hard-lets-go-shopping
    – JonW ♦
    Jan 22, 2016 at 12:04
  • See this related question: ux.stackexchange.com/questions/1403/…. As it turns out handcraft is from @Rahul who's one of the site moderators
    – icc97
    Jan 22, 2016 at 13:10
  • @JonW Not sure I agree here, I'm not asking whether "X is better than Y". I'm asking if there is a way to improve a specific part of my workflow. There are possibly others out there using this or a similar workflow, that also would like to benefit from those improvements.
    – Simeon
    Jan 22, 2016 at 20:13
  • 1
    @GrahamHerrli Better now? I've rewritten parts and expanded on the actual shortcomings of my current workflow that I need help with
    – Simeon
    Jan 23, 2016 at 15:09

3 Answers 3

Reset to default
3

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

Improve this answer
4
  • Thanks for your answer! While there is a possibility to add comments in Dropbox, the client would have to find the index.html (or other) file in order to add a comment on it. That's not the collaboration level I'm looking for. I want view-centric feedback management in direct relation to my mockups, preferably with the possibility to collaborate using comments (for discussion), notes (for documenting decisions) and annotations (for clarifying UX/UI details).
    – Simeon
    Jan 22, 2016 at 10:26
  • 4
    Ah I see. What about this: zurb.com/notable?
    – jay
    Jan 23, 2016 at 13:09
  • Amazing find, that platform looks exactly like what I need!
    – Simeon
    Jan 23, 2016 at 15:41
  • Would you edit your answer to suggest Notable? That way I can accept the answer.
    – Simeon
    Feb 9, 2016 at 8:19
1

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(); ?>
Improve this answer
5
  • Thanks for your answer! I don't see any collaboration features for bl.ocks.org, unfortunately. Regarding CodePen, it's a great tool for collaboration between developers! Unfortunately it doesn't have the collaboration features that I need when working with a code-clueless client.
    – Simeon
    Jan 22, 2016 at 10:40
  • How about setting up a WordPress site for it? Then you can create page templates that have the HTML and create a new page with the specific template. Add your client as a user with a plugin that informs them of updates. There is a versioning tool inside WordPress
    – icc97
    Jan 22, 2016 at 11:52
  • There's a 5 star rated plugin for it too wordpress.org/plugins/mockup ((not that I've tried it)
    – icc97
    Jan 22, 2016 at 11:55
  • For bl.ocks, you can collaborate via the comments in the Gist which has the versions too - but as you say this wouldn't work for a non technically minded client
    – icc97
    Jan 22, 2016 at 12:02
  • I will check out the mockup plugin for WordPress. It looks interesting!
    – Simeon
    Jan 22, 2016 at 20:05
1

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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.