It’s almost the new year so I’m getting started early in trying something new.
I moved to using only HTML/CSS for almost all of my mock-up purposes a while ago (see Why we skip Photoshop) . It’s just as fast, interactive, and removes much of the translation issues that that happen when an image is converted into HTML.
While the switch to HTML mock-ups has been good, I’ve continued to encounter the same issues I had with Photoshop images where I have to systematically save new versions of the original source and output.
I’ve had many different approaches in trying to version my files.
No index file, just use the HTML list page the web server provides.
- version 1/
- version 1.1/
- version 2/
Or just appending the version numbers to each of the files as you save them.
Later I end up with a mess of files with version numbers and I don’t really remember what happened changed in each of the versions. This is both true for myself and for anyone else who browsed my designs later.
I’ve also tried creating an
index.html file so I could link to all the different versions and describe them but that index file is hard to maintain; eventually getting old and out of date.
Oh so you want to participate in the design process? A remix of my mock-up simply means you have to choose a version and then copy all the files onto your own web server and try to get my attention so we can discuss your changes.
Am I still working on this mock-up or have I moved on? You’ll probably never really know because there’s no easy way to tell. If I have an
index.html file then hopefully I put the last active date on it or if I don’t you could use the last modified time in the directory listing.
A New Way!
My new trick that I’ve recently started trying is to use GitHub Pages to host my HTML mock-ups. So far it seems to fix my version and forking problems.
I’m keeping a simple rule that each check-in must work (I can’t break the whole thing) and I should describe the changes in my commit messages as much as possible so myself and others can understand why the mock-up might have changed drastically.
There is no version numbering to deal with here since git does all the versioning. The GitHub page only displays the latest version, which is a little bit of a setback, but anyone can clone the source and then checkout the older versions locally.
Not only does GitHub provide a super simple way for people to fork my mock-ups but it also allows me to see what those people are doing by keeping track of the forks and their progress. I could actually incorporate changes from someone else into my mock-ups by merging them in.
It’s pretty easy to see from the source view the last time I was actively working on a mock-up. And you could drop over to my profile view to see what other mock-ups I was more actively working on.e Bonus!
I’m going to try to add some standard pieces to my pages so it’s easy to find the source code and perhaps a
README page which quickly describes how to see the older versions of the mock-ups.
Any other ideas?