The Dial House Hotel
With its enviable position a stone’s throw off the charming High Street of Bourton on the Water. With the calming waters of the River Windrush, The Dial House offers a unique way to enjoy life in the Cotswolds. Built in the world-renowned style of ‘Cotswold Vernacular’, the building dates back to 1698 and is one of the village’s elder statesmen.
Another project from the Calm Collective, I received detailed mockups from their team and began work immediately. This time the site was larger than Huxleys, clocking in at 14 pages. To make sure I was creating a website *exactly* to spec, this required some extra Javascript. For example, how the header changes when scrolling, and how the DIVI structure renders as the page width changes.
The first change was to fade elements of the Dial House logo out to create a thinner, more simplified variant when the user scrolls past a certain point. I achieved this with two logos fixed in the same place, fading between them when the header height changes.
The second was more advanced. This required writing code that ‘unwrapped’ the grid layout in specific sections. First, it unwraps the columns, counts the number of modules that were in that section, and then rewraps them in a new column layout. I’ll be releasing this code to the DIVI forums to enable others to have this benefit.
As the client needed to edit the site, I built it in WordPress using a heavily modified child of the DIVI framework. Fully responsive, mobile first, and thoroughly optimised.
