Four Seasons HomeTown old website home page

The website’s old design

Four Seasons | HomeTown Pest Control is a pest extermination company that services the Outer Banks of North Carolina as well as the southeastern region of Virginia, and stands by their motto of “If it crawls, give us a call!” Recently, the company’s owners came to Mitro Digital Marketing looking for help improving their SEO and ranking potential. After consulting with them and viewing their site, we advised them that it would be beneficial to build them a cleaner, more user friendly, and modern website following the best practices of today’s online marketing. Our main priorities for the new site were focused on proper URL structure and SEO keyword research.

Being that they technically run two separate businesses, the owners wanted a more unified website that would showcase both the North Carolina business (Four Seasons) and the Virginia business (HomeTown). Coupled with the fact that their old website was rather large and complex – with close to a dozen main pages, a pest library to showcase all the creatures they cover in their extermination plans, and a blog with a fair number of articles – we were presented with an interesting challenge. Even though it was a more difficult task than most of our other recent website builds, it was nothing that our developers couldn’t handle!

The first step of the new build was to set up a blank WordPress site and implement a basic mockup as designed by our operations manager. The mockup focused on modernizing the look of the old website while still maintaining a similar feel to the original. It also prioritized ease of use for non tech-savvy clients who might visit the website looking for pest control services.

Our developer started the build with the home page, using it as a prototype for the other primary pages. He placed contact form up at the top of the page that rests over the banner image, presenting potential clients with an immediate chance to get in touch with Four Seasons | HomeTown. As the visitor scrolls down the home page, hidden text becomes visible, providing a more interesting user experience. At the bottom of the page are recent blog posts for visitors to read about pests that might be afflicting their home and how to deal with them.

Upon completing the home page, our developer moved on to transferring and cleaning up the blog posts while our operations manager continued making the mockups for the remaining primary pages. The blogs were rather simple to format; most only had one or two images and a few paragraphs of text, while the blog index page contains a list of articles as well as a sidebar.

Coding wise, the website was rather simple. One of the main features is an image slider on the pest library pages. Here’s a code snippet to show some of what’s involved in building the functionality for that slider:

// Initialize variables
let track_width = 1;
let autoplay = slider_autoplay();
let distance = 0;
let step = 500;
let interval = 0;

// Add up the width of each image to get the width the slider track needs to be.
$('.pest-gallery-slide').each(function() {
	track_width += $(this).outerWidth();
});

// If the width of the screen is greater than 650 pixels, then set the track width.
// Otherwise, set the step variable to the current width of the track.
if($(window).width() > 650)
	$('.pest-gallery-track').css('width', track_width + 'px');
else
	step = $('.pest-gallery-track').outerWidth();

 
The slide_left function will control switching to the previous slide.

function slide_left() {
	if($(window).width() > 650) {
		// If the width of the screen is greater than 650 pixels, calculate the distance
		// and loop to the end of the track if the beginning is reached.
		distance > 0 ? distance = -track_width + (step * 2) : distance += step;
	} else {
		// Otherwise, jump to the previous slide (on mobile only one slide shows at a time).
		if(interval <= 0) {
			distance = -track_width + step;
			interval = $('.pest-gallery-slide').length - 1;
		} else {
			distance += step;
			interval--;
		}
	}

	// Slide the track.
	$('.pest-gallery-track').css('transform', 'translateX(' + distance + 'px)');
}

 
The slide_right function will control switching to the next slide.

function slide_right() {
	if($(window).width() > 650) {
		// If the width of the screen is greater than 650 pixels, calculate the distance
		// and loop to the beginning of the track if the end is reached.
		distance <= -track_width + (step * 2) ? distance = 0 : distance -= step;
	} else {
		// Otherwise, jump to the next slide (on mobile only one slide shows at a time).
		if(interval >= $('.pest-gallery-slide').length - 1) {
			distance = 0;
			interval = 0;
		} else {
			distance -= step;
			interval++;
		}
	}

	// Slide the track.
	$('.pest-gallery-track').css('transform', 'translateX(' + distance + 'px)');
}

 
The autoplay function will cause the slider to move on its own when the page loads.

function slider_autoplay() {
	// The JavaScript setInterval function allows us to make a timer for our slider event.
	let autoplay = setInterval(function() {
		// Call the slide_right function.
		slide_right();
	}, 3500);

	return autoplay;
}

 
This event handler will allow us to navigate the slider at will by clicking on the arrows on either side.

$('.pest-gallery-arrow').on('click', function() {
	// Determine which arrow was clicked (previous or next).
	let dir = $(this).data('slide');

	// Call the appropriate slide function.
	if(dir === 'prev')
		slide_left();
	else if(dir === 'next')
		slide_right();
});

Speaking of the pest library, this is a part of the website we really wanted to make stand out. Not only is it one of the main parts of the website that users will likely gravitate to, but it showcases Four Seasons | HomeTown’s dedication to quality pest control. Our development team worked hard to polish the pest library to a state of elegance that was fitting for this new website. The top part of each article describes each pest in detail and provides tips on reducing or eliminating said pests. Below is the image slider, and finally a call to action to get in touch with Four Seasons | HomeTown to ensure that home or business owners’ pest infestations are taken care of properly.

While our developer was hard at work coding and formatting the website, our operations manager conducted keyword research for optimal search engine ranking. She took both the researched keywords and the old site’s analytics into account when building the new URL structure. A solid URL structure is very important for not only Google’s ranking algorithms, but also for potential visitors. They should be able to easily discern the article’s main subject by simply reading the URL.

Four Seasons HomeTown new website home page

The website’s new design

The website required the installation of a few plugins to improve its functionality. Autoptimize condenses HTML, CSS, and JavaScript files to make the site load faster. Yoast SEO assists with keywords and meta descriptions for search engines. Gravity Forms allows for the creation of responsive and modern looking web forms. Redirection is used to redirect old or broken URLs to new ones. We made ample use of these and others on the site.

Upon completion of the first draft, we submitted it to the clients for review. They desired a few minor changes, including tweaking the colors, font sizes, and removing the bug banner that we had added in the draft. As one of the last steps, we added a plugin to redirect the old URLs to the new ones that we created through our keyword research, to avoid having any broken links after the site migration. Our operations manager also completed the SEO descriptions and focus keywords for all the pages. We then tested all the contact forms and made the site public. Finally, we set up Google analytics and the Google search console to track traffic to the website and improve search visibility for the clients.

Our clients with Four Seasons | HomeTown Pest Control now have a much cleaner, responsive, and optimized site thanks to the efforts of our Mitro Digital Marketing team.