Off-Canvas Mobile Menu, Masonry.js and More

Frustration

It seems that most Self Storage facilities have terrible websites. Seriously, if you want to take a stroll through a house of horrors, look no further than the website of your nearest mom & pop storage facility. I’ve been looking at facility websites in my area and I came across three that were built with tables. That’s right, TABLES!

A lot of my development time has been spent working with a large project. If you’re reading this then you’ve probably read about my Self Storage Dashboard. I’m still deep in the trenches adding new features and I love it. Though, with a project this large I don’t get to see quick results, which is also frustrating. I decided to take a quick breather and build a simple website for Self Storage.

My goal for the site was to follow the trend of “mobile first” using a responsive design. I also wanted to experiment with an off-canvas menu for mobile and to play with the card design motif. As an added bonus I got to incorporate Masonry.js (I had been looking for a legitimate reason to do so). My desire was to make an excellent user experience (UX), a good design and a fairly decent sales funnel.

A Fun Project

I started off wireframing each page to help me figure out what content would go where. The Card motif lends itself nicely to responsive design so it was easy to visualize how it would look on desktop and mobile. After the wireframes I prototyped/built it using a front-end framework. Other than adding a bit of content and some polish that was it.

For the front-end I used a framework called UIkit which is similar to Bootstrap and Foundation. I had been considering using it for the Self Storage Dashboard redesign. This was my test drive. The one thing that sealed the deal was the off-canvas menu. It reminded me of a native app experience and I liked that. I will definitely be using UIkit for future projects. I really liked the experience.

The site itself was hand-coded with HTML, CSS and a bit of JavaScript all within the UIkit framework with jQuery. I used PHP to create header and footer templates and to provide unique titles and descriptions. The unique titles and descriptions are important for search engine optimization (SEO). I don’t consider myself an SEO expert but I think these things should be baked in from the get-go.

It felt great to move quickly and build a simple website that included most everything a small storage facility would need. For the sake of brevity I decided not to include a blog. The site would be an informational sales funnel that would drive people to call, email or stop by the self-storage office.

Take a Look

Here are some screenshots but please take a stroll through the site. If you have a mobile device check it out from there too.

Acme Storage

 

Acme Storage - Screenshot - Location & Hours

 

Acme Storage - Screenshot - Card Design Motif

Acme Storage - Screenshot - Mobile View