Visit BCTrees.co.uk

BC Trees asked Blackspike to come up with a fresh design to replace their default WordPress theme they had been using for a number of years. The fact that it ‘looks crap on my phone’ was the main gripe.

The answer was a completely fresh custom built WordPress theme to include BC Trees’ new branding and to be fully responsive from mobile to tablet to laptop to desktop.

Interesting features

Custom 3D Icons

For a bit of pop and to represent their four core services, we drew up some colourful icons in Blender 3D. Very simple and low poly, but quite striking isographic renders.

Search Engine Optimisation (SEO)

Because tree surgery is a hugely crowded market in the countryside, it was important to follow Google’s new SEO advice, namely sites will be rewarded for being secured with https, and sites will be penalised if they are not mobile friendly.

It’s also important to ‘go green’ on Google Page insights for mobile, desktop and user experience

CSS-only slider with SVG clipping mask

We thought we’d try building the site without using jQuery to reduce the http requests and eliminate unnecessary overhead, so we investigated just using a keyframe animation to loop through 4 still images, fading between each one. It seems to work well in our tests, and falls back to a static image in old browsers.

We also used an SVG clipping path to mask the images to the shape of the logo which also worked better than anticipated. Here’s the code:

<svg>
  <title>BC Trees - Tree Surgeons at work photo gallery</title>
  <clipPath id="clip1">
    <path
       d="M137,0L137,0c-5.8,0-8.8,0-8.8,0S99.4-1.6,81.5,15.1c-15.9,14.8-21,41.8-21,41.8L0,348.4h361.4v0
c5.7,0,8.8,0,8.8,0S399,350,417,333.2c15.9-14.8,21-41.8,21-41.8L498.5,0H137z"/>
    </clipPath>
    <image clip-path="url(#clip1)" xlink:href="img/slider-quad.jpg"   ></image>
    <image clip-path="url(#clip1)" xlink:href="img/slider-climber.jpg"></image>
    <image clip-path="url(#clip1)" xlink:href="img/slider-felling.jpg"></image>
    <image clip-path="url(#clip1)" xlink:href="img/slider-van.jpg"    ></image>
</svg>

Screencap

Reflections

Going forward, Blackspike will put this site on a pedestal in terms of SEO friendliness, and aim to replicate this success and loading speed for all our websites to come, while reducing our reliance on the chunky old jQuery when possible.