When I joined Accelerate Media, one of my first major projects was the relaunch of the Geotherm website. Geotherm specializes in solar and geothermal heating and cooling systems across Rochester, NY, and beyond. This project was a collaborative team effort, and while I’m proud to highlight the aspects I contributed to, it’s important to acknowledge the collective work that made this relaunch possible.
The primary goal was to bring a longstanding WordPress site up to speed with modern development practices, specifically integrating WordPress’s block editor and Advanced Custom Fields (ACF). This site was originally built before the Gutenberg block editor existed, so modernizing it required significant restructuring. Now, the site is fully editable without needing HTML experience, making it accessible for a broader range of users.
Enhancing Editing Flexibility and Optimizing User Experience
One notable improvement involved working with WordPress patterns—a shift from the traditional WYSIWYG editor, which often introduced HTML errors. By adopting the block editor, we reduced the chances of errors while providing editors with controlled flexibility. Although the approach is evolving, I’m optimistic about the direction it’s heading, especially compared to the unrestricted nature of WYSIWYG editors.
A key feature I developed was support for large hero videos on the frontend. While these videos appear seamless, we put considerable effort into optimizing their delivery. For example, mobile users on cellular data or lower-powered devices don’t have to load these videos, ensuring a faster, smoother experience. This setup relies on JavaScript to conditionally load the video source based on screen size:
if (window.innerWidth > 768) {
var videoElement = document.querySelector('.hero-video');
var sourceElement = document.createElement('source');
sourceElement.setAttribute('src', '/wp-content/uploads/2024/05/home-video-mast-darkened.mp4');
sourceElement.setAttribute('type', 'video/mp4');
videoElement.appendChild(sourceElement);
} else {
mediaBox.style.backgroundImage = 'url("/wp-content/uploads/2024/07/Home-mast-mobile.webp")';
mediaBox.style.backgroundSize = "cover";
}This approach allows us to provide a high-quality experience on desktop without overloading mobile users. I’d be interested in hearing other developers’ opinions on this mobile-first approach to hero videos; it seems to be a common choice, but perhaps that could evolve as mobile processing power increases.
Bootstrap Upgrades and Component Choices
Another major part of the project involved upgrading from Bootstrap 3 to Bootstrap 5. We built a custom SCSS version of Bootstrap, removing unnecessary components to keep things lightweight. Although I’m considering Tailwind for future projects, Bootstrap’s flexibility still serves us well, especially when we can strip it down to essentials. Using a custom build allows us to keep Bootstrap’s core utility without the bloat that sometimes comes with its pre-built components.
For the testimonials page, we used the Masonry JS component to achieve a clean, modern layout: Testimonials. While CSS Flexbox can achieve similar effects, Masonry remains a reliable tool in my kit for grid-based layouts.
Embracing a Minimalist Plugin Approach
In this project, I aimed to minimize plugin usage. Besides ACF and an SEO plugin, we kept things lean to reduce dependencies. However, we did find value in the Gutslider plugin, which helped make the “Our Process” sliders fully editable within the block editor: Our Process. I’ve found that block-based plugins integrate well with the WordPress block editor’s UI, streamlining the editing experience and avoiding the scattered control panels often seen with older plugins.
This relaunch has been a fulfilling journey, blending technical upgrades with a user-friendly editorial experience. I look forward to seeing how these improvements will support Geotherm’s growth and provide inspiration for future projects at Accelerate Media.
