+ Importance of Good Plumbing Website Design
+ 9 Plumbing Website Design Tips and Best Practices
+ How to Build a Plumbing Website
+ Real World Plumbing Website Design Examples
+ Build Your Next Website With DEV.co
Some businesses come and go. The tech industry, for example, is filled with them. A company senses momentum in a particular niche and rides the wave for a few months or years before eventually fizzling out when interest and demand disappear.
Plumbing falls into this latter category.
Plumbing might not be a sexy industry, but it’s stable, lucrative, and necessary. And despite its “offline” business model, increasing competition and changing consumer perceptions within this space means plumbing companies have to pay attention to online presence.
And if there’s one aspect of an online presence that matters most, it’s the website.
Most people have an intuitive understanding that website design matters, but in order to take it seriously within your own business, it’s important that you dig a little deeper and attempt to understand why it matters so much.
Here are a few of the top reasons:
There are obviously dozens of other reasons good website design matters, but most of them can be placed into one of these three categories.
The more you peel back the layers to understand why website design matters, the more clearly you’re able to see how a new or redesigned website could benefit your plumbing business. But before going any further, you need to understand some of the effective design principles and best practices between high-ranking and high-converting plumbing websites.
Here are a few powerful tips:
Good web design is simple, clean, minimalist, and frictionless. It’s about eliminating all distraction so that a visitor’s focus goes to the content and elements that matter most.
Study any effective website inside the plumbing industry (or outside) and you’ll see plenty of negative space (also known as white space).
The power of negative space is found in what it’s not. By providing a clean backdrop, white space fees up visual interest and attention to focus in on what really matters.
For best results, surround the most important elements in your design with negative space. Having said that, you don’t want the website to look boring. Other unique and color aesthetic elements can pick up the visual slack and draw attention to the page.
In other words, your background might be a gradient white, while the call-to-action button is bright red. It’s this sort of visual contrast that makes a big statement.
Visual hierarchy is the arrangement, color, size, and contrast of all the visual elements on a page. It refers to the assortment, order, and relative prominence as seen by human visitors.
There are certain laws of visual hierarchy that rule good website design.
Low visual prominence items tend to be small and textual. They’re located at the bottom of the page, have low contrast, and are more closely bunched together.
HIgh visual prominence items are usually large and visual. They’re positioned towards the top of the page, have strong contrast, and are surrounded by negative space.
So much of web design is still shaped by other forms of content design – including its cousin from decades ago: the newspaper. And if there’s one design element that we still use all these years later, it’s the notion of the “the fold.”
With a newspaper, the fold is the horizontal crease down the middle. Once creased, you’re left with half of the newspaper above the fold and half of the paper below the fold.
In newspaper design, this fold is a clear line of demarcation. Anything above the fold is going to attract eyeballs. Anything below the fold will see a dropoff in exposure.
The same is true in website design. Anything above the fold – which is the upper portion of the design that is seen without having to scroll down – gets exponentially more visibility than the portion of the page that’s below the fold.
In light of this, there’s a temptation to cram as much value as you can at the top of every page. But you have to balance the need for simplicity. A high-resolution graphic with a clear value statement and simple CTA is the best approach.
While the above-the-fold content gets more visibility, research shows that below-the-fold content actually gets more engagement.
How could this be? And what does it mean?
Well, in the simplest terms, people are more likely to see what’s above the fold (since it’s the portion of the page that’s automatically populated when a visitor arrives). But most visitors aren’t going to click on a CTA or link without first learning more.
So what do they do? They scroll down and read the other content.
Research from Chartbeat – which analyzed 25 million visits – found that engagement peaks just below the fold.
So the best rule of thumb is to sprinkle CTAs throughout the page – including them at the top, just below the fold, and at several other locations throughout the remainder of the page.
Did you know that upwards of 76 percent of website visitors are “scanners.” In other words, they aren’t reading your content word from word in some logical progression. They scan your page and look for the elements that stick out.
If you have a bunch of content hidden behind tabs, accordions, and elements that don’t reveal until they’re clicked or hovered over, you’re stifling engagement.
There’s a time and place for tabs, but your best information should be visible at all times.
Engagement rates, click through rates, and conversion rates all see huge lift when you use real pictures of people instead of animations, stock photos, or abstract graphics.
Stock photos might be the norm in this industry, but you can do better. Pay a professional photographer a few hundred bucks to follow you around for half a day and take some pictures. Use these to populate your website design and you’ll instantly garner credibility and trust.
Video is something every plumbing company should include in their website design. Just make sure you’re using it the right way.
Feel free to incorporate video at the top of your homepage and on service pages, but give visitors control over what they watch. (Autoplay videos – particularly videos that autoplay with sound – are seen as intrusive and frustrating.)
Forms are an easy way to collect leads, schedule appointments, or even book service calls. But don’t make the mistake of asking for too much information.
A good opt-in or submission form asks for the bare minimum information. If you can get away with nothing more than a first name and email address, use a two-field form. If you need other information, be discerning in what you ask for. A phone number or mailing address can be a major turnoff (depending on the purpose of the form).
We live in a world where people quickly switch between devices. While many people still access the internet via desktop browsers, smartphones and tablets are popular too.
Use a responsive design to make sure your web design effortlessly scales down to the proper screen size without hurting the user experience. This level of consistency strengthens trust in your brand.
Now comes the practical part: Building a plumbing website.
Here are some of your options:
As you can see, there are an abundance of options to choose from. And if it helps you to wrap your brain around the “how-to” portion of building a plumbing website, you can just think of it in terms of DIY vs. DFY (done for you).
DIY options include any method that requires your input – i.e. the first three options on this list – whereas DFY methods are completely hands – i.e. the latter two options.
If you have more time than you do money, DIY is a reasonable choice. If you have more money than time, a DFY service is a superior approach.
Okay, enough theory.
Let’s get granular by examining a few real world plumbing websites.
This will give us some visual examples and illustrations to flesh out the theoretical tips and best practices previously highlighted.
This website is clean, simple, and easy to navigate.
Notice the use of social proof on the home page (including trust badges and a clear value statement).
If you scroll down just below the fold, you get a CTA (which is a best practice based on the aforementioned Chartbeat study.
Even the navigation menu is clean. (There are no dropdown menus or accordions with these tabs. One click takes you straight to the page.)
This website instantly stands out because of its use of negative space, simple graphics, and a clear value statement above the fold.
While the navigation menu could use a little help, the simplicity of the content throughout the page is something that other plumbers could learn from and replicate.
This website is far from perfect. (In fact, in many ways it has a lot of web design mistakes.) But it’s also highly effective.
Rather than using the generic stock photos that you see on so many plumbing websites, they’ve taken the time to integrate real pictures of their team. This builds instant trust.
Regardless of which direction you choose to take with your plumbing website, we would love to be a resource for you. Whether you need a developer or designer to assist you, someone to handle things from start to finish, or a consultant to bounce ideas off, we’re here to help.
Contact us today to learn more about our design and development services!
Ryan is the VP of Operations for DEV.co. He brings over a decade of experience in managing custom website and software development projects for clients small and large, managing internal and external teams on meeting and exceeding client expectations–delivering projects on-time and within budget requirements. Ryan is based in El Paso, Texas.