Habitat by Resene

9th October 2014
All posts

Habitat is Resene’s quarterly magazine and Habitat by Resene is the website we built for them at Image Centre.

The old site needed a refresh, but also needed to be repurposed to capture people’s imaginations. There’s an obvious comparison to Pinterest that can be made with all the great photos and the Lookbook, but the management of content elements with Packery/Masonry really makes this site work.

The fun part was sorting out a changing grid with breakpoints at 1200, 1000, 800, 600, 400 and 320 pixels wide and creating content blocks that would always fit eveny inside those widths. I settled on a base content width of 200px wide and 150px high.

Add to that lots of other responsive content elements, on the Foundation framework, and you have the new Habitat by Resene website.

Home Page

Habitat by Resene - Home Page

Article Page

Habitat by Resene - Article Page

Search Result

Habitat by Resene - Search Result

Lookbooks

Habitat by Resene - Lookbook

Lookbook

Habitat by Resene - Lookbook Items

Tablet Responsive View and Menu

Habitat by Resene - Tablet and nav Habitat by Resene – Tablet and nav

Mobile Responsive View

Habitat by Resene - Mobile Responsive Habitat by Resene – Mobile Responsive

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with WordPress, Shopify, Rails, Python, and ASP.net/Umbraco frameworks.