12 Nov 2014


A site I have built while working at whitespace just went live, so I would like to describe the work that went into it.

Check it out here: http://www.deseo-living.co.uk/

Design was done by the awesome creative team at whitespace. Given that the artistic style of the site is far from the usual collection of pages, I proposed to build the back end for it using freshly released Rails 4 rather than a stock CMS.

The work started with implementing the hybrid front page/about page, which uses full screen panes. Given that most of the elements present in the rest of the site are all on this one page, getting this done would make the rest of the work straight forward.

The plugin responsible for the full screen panes is fullPage.js (http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/). This was modified to pick up options from 'data' attributes of each pane rather than using the initialisation call.

Since the initializer was within a coffee script in the Rails asset system (which speeds up asset loading by combining all the scripts into one) and all the content was CMS generated - it would be impractical to have all the options baked in at the asset compile time. In addition it makes the fullPage.js plugin more pleasant to use, with attributes defined along with the content they apply to rather than separately in the initialisation call.

Along with this, the full page plugin was patched for some bugs and supplemented with nice link titles, some changes to #hash link handling and addition of a scroll button - which is placed at the bottom of the pane and scrolls to the next pane when activated.

Another front end plugin is the Owl carousel (http://www.owlcarousel.owlgraphic.com/), the new version 2 has better mobile support and responsive features but lacks documentation at this stage. I did have to tweak some parts to get it to work just right and fix a few issues.

And finally for the little extra, WOW.js - combined with animate.css (and with extra bonus points coming from being themed on the doge meme) adds a nice lace of dynamics to the page.

Back end is very clean and easy to use, based on Bootstrap 3 with a few css animations to make it feel extra special.

All the images are automatically resized and cropped to the required size, making the content management a breeze for any user. Because of the large images used, some are also interlaced, filtered and compressed based on some experiments I have done to get the lowest file size without compromising visual quality.

The result is a beautiful site, which is easy to use, mobile ready and feels every bit as special as the products it offers.

All blog posts