Craig Builders is a home builder in Central Virginia with a history stretching back six decades. They pride themselves on their refined, clean style, and needed a website that matched the same level of quality they put into their homes.
Craig Builders needed to replace their old website with a more mobile-friendly one. They wanted it to be more usable than their old one, allowing users to find and navigate to the content they were looking for more quickly than before.
The site also needed to fetch home listing data from their MLS (Multiple Listing Service). Their old site did this, but it was slow, making requests to the MLS every time a page loaded. It also requred URLs to use the MLS number, which wasn't very human-readable.
The new site was built on top of WordPress. I used Advanced Custom Fields to build out a series of modules that could be easily moved around and edited by future site maintainers, while still ensuring that the aesthetic of the site remained intact. I also used Timber in order to build out the site structure using Twig templating. I like Timber because it keeps my theme code cleaner, allowing me to use PHP for the data and logic, and Twig for the display and HTML.
I wanted the site to look minimal and modern, while still retaining the elegant and classic look that a Craig Builders home has. I chose a refined looking serif font for the body copy and headings on the site in order to bring home the class and legacy of Craig Builders. I used a bold sans-serif font to clearly differentiate buttons and navigation elements, while giving the site a slightly more modern feel.
Large images surrounded by ample white space were essential for conveying the wide-open feel of one of their homes.
One of the biggest challenges in building this site was the MLS pull. Fetching data from the MLS was slow, and really hurt page load times. In order to avoid this slowdown I decided to cache data from the MLS locally. I set up a cron job to fetch data from the MLS twice per day. The job created new WordPress posts cooresponding to MLS house listings. It also unpublished old posts that had had their MLS listing taken down. Then it checked the details of each post against its listing, updating any attributes that had changed, such as if the price or the description changed.
This approach gave us better control over the data pulled from the MLS, as well as allowing whatever URL structure we wanted to use for the listing pages.
It was important that the site worked just as well on mobile as it did on desktop. I wanted to make sure that all of the same functionality was available, and that as many navigational elements could remain exposed as possible. To achieve this goal I used a bottom bar for the primary navigation on mobile. This meant that most of the navigation never had to be hidden behind a tap or a click.
The client was very satisfied with their updated site. They started getting a much higher proportion of mobile traffic, and the number of qualified leads from their site increased dramatically. Check out the site at the link below.