The design team at Agenda Global created a unique website for the Heritage Defender brand, utilizing large photos to showcase the authentic craftsmanship that goes into restoring these beautiful Land Rover Defender 110s.
I was brought on to develop the website on a strict deadline. Using the WordPress framework as I do for all of my website development projects, I brought the design to life by building a completely custom WordPress website.
Details & Craftsmanship
Large Photos. Small Details.
The website design for Heritage Defender is eye candy. It shows off the small details with large photos, diving deep into the restoration process of the Land Rover Defender 110s.
The website uses multiple carousels, sliders, and progressive enhancement for browser compatibility. To make the website look and feel right with modern browsers and smaller devices, testing was thorough.
Image Heavy Carousels
The website has a ton of great looking photos. They are huge. The web design categorized them in such a way that it made use of carousels in multiple places. The user can click on buttons on the left and right sides of each carousel section to move to the next photo and block of content.
Doing this allowed us to show off the main subject of the photo while displaying content on the side. The WordPress admin area makes it easy to switch sides for the content, easily upload photos, and straight forward options to make the section look as intended.
Smooth Scroll Navigation
A cool feature of the website is a full page, drawer navigation menu. It’s used on all browser widths, not just small mobile devices. Naturally, it uses some jQuery to change classes on click, but uses smooth CSS transitions for an animated effect.
Along with the menu comes smooth scrolling functionality. The website is a single page. When a user clicks on a navigation menu item the screen scrolls to the desired section.
Slideshows Within Carousels
Move Photos. More Eye Candy.
There are slideshows showing off more photos within some of the carousel sections. Some of these section include the way Defender 100’s are dismantled and rebuilt with new, higher-end parts. My favorite way to do carousels is using an awesome script from Ken Wheeler called Slick JS. It is the last carousel script you’ll ever need. It’s awesome.
Of course the images pop-up in a lightbox when the thumbnail is clicked on. Lightbox functionality is handled with jQuery from Lokesh Dhakar called Lightbox 2. It is small in file size and the functionality is beautiful.
The cool thing about the Admin area is that the client only has to upload the large, high resolution photo. The back-end does the rest. It handles adding the photo to the carousel or slideshow, adds the lightbox functionality to the image if needed, and and creates the thumbnail on the fly.
Since most clients don’t have photo editing software to make the images smaller and optimized, I build all my custom WordPress websites by making it as easy as possible for the client to do the things they need to do.
In relation to the image functionality, the backend this website does a couple of neat things:
- While keeping the original image, the system creates an optimized version that scrunches the file size down for faster loading times. Faster load times saves bandwidth on your visitors’ device, increases your search engine ranking efforts, and gives users information faster. Nobody likes waiting.
- Makes sure that the largest dimensions the client can upload does not exceed 2000px. This saves space on my blazing fast WordPress hosting and makes sure that the client cannot use an unnecessarily large image (both in file size and dimensions) in the front-end.