Web design case study - DHBathrooms.co.uk

How I built DHBathrooms.co.uk

How I built DHBathrooms.co.uk

Let's lift the lid on building a website...

Here's how I took over an existing website, refreshed it, improved and optimised it, and helped it to generate more leads for the business.

How I built DHBathrooms.co.uk

Web design case study - DHBathrooms.co.uk

Distinctive Home Bathrooms

Distinctive Home Bathrooms is a long established bathroom, shower and wet room design and installation company based in central Lincolnshire. They came my way because their original web design agency was going to be imminently closing due to illness, so at the very least their website needed continuity.

That web design agency had already sent a couple of their existing clients my way and had been happy and my overall approach and with the results I have been getting. On that basis the agency recommended that David from Distinctive Home Bathrooms also contacts me to take over his website.

Let’s get started

Like I often do, I carried out some analysis on the original website to see how it had been built, to get an idea of any problems it might have, and to see if there are any areas for improvements... especially quick wins which could potentially make a difference at minimal cost.

The original website had been built using Dreamweaver, and as a result was using some pretty hefty CSS files... some using Bootstrap, and others which we using more conventional CSS methods.

In all cases only a fraction of the CSS and JavaScript file content was being used, meaning that far more data than necessary was having to be downloaded to display the web pages, and that slows things down.

Identifying the usual suspects

The main culprit for websites being slow is the use of images which are far larger than they should be for use on the web. Many of them were in excess of 1mb, and those same images were also used for the mobile display. So testing the website on 4G (not broadband) really showed what impact these oversized images were having.

I should add at this point that because Bootstrap had been used extensively throughout the original build of the website, to have completely reconfigured everything for the purpose of removing Bootstrap would not have justified the time and cost, and so the website refresh still makes use of Bootstrap and vanilla CSS... just far less than before!

Poor use of HTML tags can hurt SEO

I was also surprised to see that the TITLE tags were not be being used very well.

The TITLE tag on most of the pages simply contained the name of the business and very little elses. What was also really surprisingly was that many pages actually had NO H1 tags at all.

Display of H1 tag content

Making good use of the H1 and TITLE tags is essential for search engine success, and so by resolving those two tag issues for each page, as well as optimising the oversized images could make a big difference to the website’s speed and effectiveness in the search engines.

The contact form on the original website was by a third party, and wasn't at all reliable or very user friendly. Due to the styling it also looked like it didn't look like it was part of that website, and so I had some recommendations to make on contact forms going forward.

I had also noticed that the email address displayed on the original website actually had a different email address embedded into the email link, and the contact form was pointed to yet another email address. So when I spoke again with David he chose which one of the three email addresses to use, and that would be one of the first things for me to change once I was given the go-ahead to make any updates.

I summarised my findings of the audit and sent over a report to David. He subsequently suggested that as I knew what I was talking about, I should give his website a refresh, and fix all of the problems I had uncovered.

I want to stress that I never suggest fixes or updates for the sake of it so I get some paid work out of it. I will always justify my recommendations, and prioritise them by order of importance and simplicity. Any fix or update which is quick and has a significant impact is therefore more likely to be prioritised high on the list, as it gives the client more bang for their buck.

Starting to code

Although the new Distinctive Home Bathrooms website wasn’t going to be dynamic in any way, I still prefer to use PHP instead of static HTML for a number of reasons.

For example, instead of every page on the website having the exact same code for its top primary navigation bar and footer, using PHP allows a separate file to be created for the top navigation, and then each of the pages can call that code in... or in other words include the code from that separate file.

It would display in the same way as it had previously done, but whenever a change to the navigation was needed, the original method would have required me to make identical changes on every single page.

Using the method where the navigation is held in a separate file, it means that I only have to make changes to the top navigation in a single file.

Simpler, more economical and less error prone

So whether a single change or an entire restructure of the navigation is required, that change only needs to be made in one place. It makes things far more efficient and far less prone to error.

In addition to the navigation I handled the footer in the same way, but there were also other commonly used elements and features on multiple pages which were able to benefit in the same way.

TITLE and H1 tags

As previously mentioned, the original website was seriously lacking in it’s use of these HTML tags, and I so made sure that they were set up to do their job on the new version of this website.

In simple terms we would want the TITLE and H1 tags to be representative of the page they’re on. So in the context of Distinctive Home Bathroom being specialists in designing and installing bathrooms, showers, wet rooms and mobility accessible rooms in various towns in Lincolnshire, the TITLE and H1 tags and page content was set up to give each page a much better chance in the search engines.

Display of TITLE tag content

Schema Markup

Also to help with the search engines I applied schema markup to the code of each page.

Google doesn’t see web pages in the same way as you or I do, so to help Google and other search engines to get a better understanding of what each page is about, schema markup can be added to the code.

Viewers of a website don’t see the schema markup, although in some cases it can make a difference to not only how the page ranks in search results, but how that entry in the search results listing actually appears to the person who initiated the search.

Increasing the visibility of links in search results can go a long way to increasing the number of clicks it gets, and that can mean more visitors to your website.

Things such as FAQs in schema markup can help, and in fact an FAQs page was something I recommended adding to the redesigned website.

Website designed for Distinctive Home Bathrooms

Website launch

As you would expect, no website would be published without the customer being completely happy with it. A number of checks also needed to be carried out pre-launch and post-launch to make sure there were no errors, broken links, missing images, and other things which needed attention.

It would be negligent of any web designer or design agency to publish a website without sufficient checks and testing, but a surprising number do, especially those which build websites to a tight budget or with little experience.

Also, during the lifetime of many website they’ll undergo updates, but so often those updates will not be thoroughly tested on mobile, tablet and desktop, and they can become progressively broken and ineffective.

https = Securely hosted this time

The hosting was set up so that the domain name could be pointed to the location of the new website instead of the old website. I also made sure that the new hosting made the website secure. This required a valid SSL certificate so that the website displays with a secure padlock and https instead of just http. You might recall that the previous version of the website had been hosted insecurely.

Post launch testing also includes mobile and tablet testing, and that includes tablets in landscape and portrait orientation. Distinctive Home Bathrooms website was no different in that respect, and anything which was found to be either incorrect or below the high standard I set, got resolved.

It's also important to remember that the original pages which ended with .html had been replaced with pages ending with .php and in some cases they had been completely renamed to something more appropriate. So where necessary I needed to use the .htaccess file to handle 301 redirects so that anyone trying to access an old version of the page name gets redirected to the new version.

Furthermore, besides adding new bespoke contact forms to most of the pages on the website, and introducing a privacy policy page, I also created a branded 404 page which is intended to display in the even that a URL to a missing page is encountered.

Google Analytics

Although it would be useful for the owner of the business to know how well his website is doing, I also find it extremely beneficial to monitor the progress of each page of the website. So I always set up Google Analytics for each website as soon as the site goes live.

Then between Google Analytics, Google Search Console, and additional weekly scanning of the website by Ahrefs (a specialist website auditing and analysis tool) I’m able to keep a watchful eye over the progress of each website I manage.

Display of AHREFS audit

Reaching more people with localised web pages

As previously mentioned, Distinctive Home Bathrooms serves customers in various towns in Lincolnshire, including Sleaford, Grantham and Boston, and carries out a number of different services throughout that area.

So to improve chances of the website being found when people search for bathroom installation in Sleaford shower installation in Boston wet room installation in Grantham etc., a number of additional pages were created to focus on each service in each area.

These are known in the industry as landing pages and can benefit many businesses by being able to be very specific in what they promote, whether it be products, services, offers, and of course they can be location specific.

Building relationships and going the extra mile

The success of a website is far greater when the web designer or agency is able to develop a good working relationship with the client.

Without that partnership it's difficult for the web designer to get an understanding of the business and its objectives, and for the business owner to understand what the website can and cannot do when trying to meet those objectives.

It also provides the opportunity for discussions around supplementary ways of driving traffic to their website, as well as ways of making the best use of their Google Business Profile and social media accounts.

So David and I had several discussions, we exchanged notes, thoughts, suggestions and recommendations, and also made good use of video which allowed me to talk David through some things on his new website so he could look through it at a time when he wasn't consumed by his own work.

An imposter? You've got to be kidding!

One additional piece of work I needed to do (which I carried out free of charge) was due to a clone of the original website which resided at wordpressnerd.co.uk

So I needed to spend a few hours finding who owned that domain, question why it contained a copy of the dhbathrooms.co.uk website, and insist that it gets taken down straight away.

It turned out that another agency had previously been asked to host the website, and had used wordpressnerd.co.uk for testing. So thankfully it wasn't anything malicious, but it wasn't good that the agency had allowed it to remain live for many months, during which time Google had indexed the cloned website and was displaying it in search results.

In summary - A happy ending

The DHBathrooms website at dhbathrooms.co.uk is doing well...

It’s growing in size and reach, although during the Christmas period of 2022 things went a bit slack. This was largely attributed to the time of year and the squeeze that the economy was having on us all.

But the good news is that things have picked up, and David has been happy enough with my handling of his website that he requested me to build a new separate website for his other business, Distinctive Decor which went live with just a small number of pages a few days before this article was written.

For consistency of branding, speed to market and also to help keep costs down on design, I used carried the original styling of the DHBathrooms website through to his new website at distinctivedecor.co.uk and so far he is very pleased with the outcome!

Website designed for Distinctive Decor

How can I help?

The above case study is an example of a business with an existing website approaching me to take over their website, and made changes to improve its effectiveness in generating them more business.

If you think I could do the same for your website, get in touch and I’ll offer you a completely free website audit, an easy to understand report, and a short video of things I find on your website.

Thoughts, suggestions or comments?

Comments or Feedback?

If you have any comments, thoughts or suggestions about this article, please let us know.

Use the social media buttons below to share this article.

Fields marked with * are mandatory

security code 1st charactersecurity code 2nd charactersecurity code 3rd charactersecurity code 4th character

Daron Harvey

I'm Daron Harvey, founder of Targa Web Solutions, specialising in AI chatbot implementation, website testing, auditing & consultancy. I am now in my 28th year of professional website production, testing and eCommerce best practices, and excited about the opportunities that AI chatbots and digital assistants can bring to ourselves, our customers, and our customer's customers.
Twitter  Facebook  LinkedIn

Targa Web Solutions Targa Web Solutions logo