Their website was on a Content Management System called CMS Made Simple, and as that served them well for many years, they had outgrown the features and functionality it supplied. Similar to the CMS, the website design was also showing it’s age.
We needed to outline the goals of the project, starting with the business goals.
Superior Campers’ Goals
They had some major goals they wanted to accomplish with the project:
- Increase sales by having the ability to manage their inventory on a regular basis.
- Update design to be more content-focused for an imminent PPC campaign.
- To decrease costs in the future, have the ability to easily add functionality down the road.
We had goals of our own as the Web Designers for the project:
- Setting a performance budget to keep page-weight under 1mb.
- Google PageSpeed score over 90 out of 100.
- Easily add functionality to website through minimal development time or plugins.
After deciding on WordPress as a platform, we had WordPress-specific goals:
Our WordPress Goals
- Use native WordPress framework as much as possible.
- Keep administrator interface as simple as possible.
- Use minimal plugins as to mitigate risk when updating WordPress core/plugins.
For the design we chose an earthy, natural color palette to reflect the outdoor feel of the company as well as showing the products they sell in use. Because the inventory section was big focal point of the site, we feature the latest 5 units on the home page with some broken out navigation items. We purposefully kept all of the navigation items visible, and did not hide any links under buttons or hamburger menus.
In order satisfy PageSpeed Insights, we had to use some tools to optimize the site. Here are some of the highlights:
We used SVG‘s whenever possible to keep image file sizes down. Because IE8 doesn’t support SVG’s, we used a png fallback.
They use a Managed WordPress Hosting package which takes care of a lot of these small optimizations on the server.
Ensured theme-related and client-uploaded images are losslessly compressed.
Render Blocking JS/CSS
We enqueued all scripts using
$in_footer and put all css calls in the footer while putting the criticalCSS in the
<head>. On one plugin, we did have to contact the author to get their scripts in the footer.
Surprisingly enough, we were somewhat of trailblazers with render blocking scripts in WordPress. To help the community out, Ryan wrote a blog post on the key learnings of render blocking js/css.
We worked with Superior Campers to identify the most important taxonomies for inventory items and display them. The user can then filter the results by using the side column of taxonomies.
On an item's page, there are multiple ways to browse through images, to make it as intuitive as possible for the user.
To maximize client contact on these pages, we created a prevalent call to action for contacting Superior Campers about the camper with the name of the unit pre-filled in the subject line of the form.
The main feature of the site was the inventory piece. This was accomplished by creating a custom plugin using Custom Post Types and Custom Taxonomies. We searched through existing inventory plugins but most didn't have the features we wanted or were kludgy and hard to use. We wanted something that was custom-taylored for Superior Campers so it was effortless to add/remove/edit content.
We used the built-in taxonomies to create attributes for each inventory item so they can be easily updated in the WordPress admin.
Some stats on the performance of the site:
- Page-weight is 638kb.
- PageSpeed is at 97/100.
- Load Times (first visit, nothing cached):
- 3G (750kbps): 4.37s perceived load; 7.41s actual.
- 4G (4mbps): 1.35s perceived load; 2.14s actual.
- Wifi (30mbps): 780ms perceived load; 1.47s actual.