Responsive Mind Vault Site

When I was finishing development for the first version of Mind Vault last summer I was anxious to have it on the store as soon as possible. I was so anxious, in fact, that I did not even think about the promotional website until I had submitted the app to Apple for review. I knew I had a week or two before the app would be approved, hopefully, for sale. So I cranked out a website that, timeline considering, actually turned out well.

The site did well, but unfortunately there were two issues; the site was not responsive, and it did not simultaneously feature the iPad and iPhone versions of the Mind Vault. With these problems in mind I decided to update the design a couple months ago in order to address them.

You can see the results over at the website. I decided to keep the content to a single column, as this would easily translate to a variety of devices and reflect the simplicity of the app itself, it’s just text. I wanted to feature Mind Vault on the iPad and iPhone, as well as provide hint at the main functionality of the app. You can see the Javascript and CSS animations at work on the landing page to give people a flavor of the app and feature both form factors.

This site was a first for me in my use of CSS preprocessors, SASS, and my new favorite web dev tool, Hammer for Mac. I built the site in static templates that mirrored the class names that would exist in the live Wordpress site. The development process moved quickly thanks to SASS and Hammer’s building and dev tools. Once the static templates looked the way I want it was a pretty simple process of pasting compressed Javascript and CSS into my Wordpress template and slight markup updates in a few files. It was a great process that I will be using and refining again. I can’t recommend Hammer and its companion Anvil enough.

I am happy with the results and think that the updated website will serve Mind Vault well. I hope that you like it as well.