D&D Coatings, a Cheshire based Industrial Painting Company, asked me to design and develop a brand new website, to replace their existing site built about 5 years ago, which had become out of date and was not mobile friendly!
D&D Coatings current website home page layout.
I was delighted to be given the task of overhauling this website! It was already well established and received a good number of visits each week. However, the old website wasn’t mobile friendly and certain areas of the site were no longer relevant. Instead of trying to update the old site it was decided the best option would be to rebuild from the ground up!
I met with the management of the business to discuss the project and explained the possibilities and options that would be available with the new website. They were very excited and eager to get started as they felt the old sight had become slightly neglected. I proposed a WordPress build and highlighted the many benefits of using this popular CMS. I was given the go-ahead and started work soon afterwards.
About D&D Coatings
The company was originally setup by Paul Drinkwater and his partner way back in 1997. Paul continues to run the business to this day in his role as managing director. D&D Coatings specialize in cut edge corrosion and other industrial painting services, for their clients all over the United Kingdom. They carry out quite a lot of roof painting and cladding coating for large warehouses, retail outlets, schools and council buildings. It’s quite amazing the amount of work that goes into maintaining metal structured buildings. I must say I’ve learned quite a lot about this industry since I started working for D&D Coatings.
Website Design for D&D Coatings
Starting any website design project requires at least a little bit of research. In this case I had already gained a good understanding of the business, having worked closely with managing director Paul Drinkwater on the logo branding design for the business. I’ll cover the second phase in the logo branding in another post but for now you can see the first draft logo designs for D&D Coatings here. So, prior to working on the new website designs I already had a head start with the colours and fonts. Gafata font was the type style of choice with shades of cool blue for the colour scheme.
As with all my website design projects I started off sketching ideas on paper. This gives me a visual picture of how the new site will look, before I start work on the high resolution digital designs. I worked out the hierarchy on each home page, which elements needed to be displayed first and so on. The primary goal is always to put the most important content at the top and work you’re way down the page. You can see the first draft sketches I came up with below.
Website design sketches for D&D Coatings before I started work on the finished visuals.
I created 3 different website design styles with various layout options and I’ll go into detail about each design later. All 3 are painted up in various shades and tints of the new D&D colours. I went ahead with two open layout designs and one boxed option. As you can see the boxed layout option won on the day. I was pleased to be told it was a difficult decision as the stakeholders were equally happy with all three! Okay, here goes with the first three website design drafts, take a look and see what you think.
Website Design Option 1
This is the first design I came up with, its got an semi-open layout in that the header and footer areas span the width of the browser window while the content area boundary is clearly defined with a white fill set against a pale blue background.
Website Design Option 2
I opted for a fully open layout here with this design, more contrast in the colours too. The content is all much the same but I’ve created an alternative banner slide showing how different areas of the site can be showcased, front and centre.
Website Design Option 3
This was the design that triumphed over the others, the boxed layout won Paul over as he felt it projected a more organised impression with its modular sections. The Quick Contact form appealed to Paul and his colleagues as its a great way to encourage potential clients to send a brief message or introduction. Its all about achieving the best user experience for people viewing a website at the end of the day and anything that improves this has got to be a good thing!
I presented all three designs as separate links, sent via email, to be viewed in a browser just like a regular website. This is the best way to demonstrate a website design to my clients. I’ve heard the argument, mobile first, but frankly this doesn’t make sense. If most of your target audience are going to be viewing your website in an office on their desktop PC, then why show them a design optimised for mobile screen sizes. Trust me, I’ve explored other methods and this gets the message across just fine!
Having reviewed all the website design visuals and breaking each one down into different segments, Paul decided he wanted to run with option 3 as a base layout. He also wanted to introduce elements from the other two designs. We arranged a meeting and worked on a revised version on the third design. You will notice similarities with the first two designs and the final version. For instance you’ll see we used the three main service blocks from option 1, Roof Coating, Wall Cladding Coating and Industrial Painting. A modified version of the sub section blocks from option 2 along with the branded vehicle image and contact details in the lower section of the main container.
Paul wanted a way to push the blog posts into a more prominent place, so we decided to display the 4 latest posts to the left hand side of the vehicle image. I created a final demo link of this revised version of option 3 and sent it for approval. The following day I got the go ahead and started work on the development phase of the project.
Website Development Phase
As with the majority of my website design and development projects, I created the website theme template for D&D Coatings from scratch. When I say bespoke theme development I mean it, unlike many other purveyors of website design! They simply buy a $20 website from Theme Forest and charge you hundreds or even thousands of pounds. I do buy third party open-source and premium plugins for extra functionality, but I’m open about this with my clients. They understand that you can’t do everything and that if you did it would take many thousands of hours more to achieve the same functionality.
After installing the latest version of WordPress straight out the box I headed over to Underscores for the base theme files. I always choose the Advance Options to quickly setup the theme name, uri and author etc. Underscores in its raw state is basically a skeleton of a WordPress theme. It has no styling and only the bare minimum code to make a working website template. So one of the first tasks I do is add the Internet Explorer HTML5 Shiv to the functions file, you can see the code snippet below. You’d be surprised now many people still use Internet Explorer! You can read an interesting post by Paul Irish about the history HTML5 Shiv here and hopefully soon it will indeed be history and no longer needed.
function add_ie_html5_shim () {
echo '<!--[if lt IE 9]>';
echo '<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>';
echo '<![endif]-->';
}
add_action('wp_head', 'add_ie_html5_shim');
I’m not going to cover every single detail about the code customizations I made while working on this project, I’ll do a separate post about my Underscores themes at a later date. For now I’ll just cover the highlights, specific to D&D Coatings new website, including the plugins I used.
Theme Functions
I added and customised a number of functions to make the theme work the way I wanted. I setup post thumbnails and a post excerpt limited to 15 words for the blog. I added a function to remove form allowed tags, I think that just looks messy. Another nifty little function I use automatically adds the first image uploaded to a page or post as the featured thumbnail. I also added some extra widget areas in the footer along with a full width page template file.
Theme Plugins
No self respecting WordPress website design should be without some form of caching. My preferred choice is WP Super Cache, look it up on the WP repo! As the new site was going to have a different url structure I needed to setup permanent redirects from the old website urls, to the new pages. For this I used Simple 301 Redirects. For the banner slider on the home page, I headed over CodeCanyon and purchased a copy of Slider Revolution. Again look it up if you’ve never used it, I guarantee you’ll be impressed.
Thanks for reading and you can see D&D Coatings completed site here. If you have any questions about the things I covered in this post please feel free to contact me.