Skip to main content
Jorge Piñon
List

Watsco.com 2018

screenshot of Watsco.com homepage detail
Homepage detail

Watsco.com needed a site redesign to update their old, non-responsive one. The new site design was provided by the client and based heavily on Microsoft’s Metro UI tiles. The challenge for the tile pattern was to make them responsive while keeping them somewhat square. I made a demo fiddle to see the solution.

Another problem to solve was that there were several tile types and it took a few rounds with the pattern library to find a good BEM approach.

There was a requirement to use Bootstrap, and I opted to use the excellent Bones Wordpress theme to build on. Bones is a sparse (as in “Bare Bones”, "Skeleton", etc) theme that is really easy to customize.

screenshot of Watsco.com homepage investor story widget
Investor story widget