I coded all the big banners by hand. Sure, you can achieve similar results with page builders, but in my experience it takes longer to get everything just right, there’s always a ton of random little problems, and they’re bloated as hell and run like molasses on a winter’s morn.
Client: Eloquent Light Films, independent documentary film company of Director and DP Jeff Crum.
Project Description: Create a website that can showcase Jeff’s upcoming documentary, The Question of War, with high quality stills, a donation form, and an optional survey for site visitors. Jeff specifically wanted a slick and artistic style which set a tone appropriate to his film.
The Inside Scoop
Jeff asked me to build a site for his documentary film, and out of the gate there were a few unique requirements. Namely, a survey, a donation form, and a way to host large, high quality stills of his gorgeous camerawork without bogging down the site.
Banners
I coded all the big banners by hand. Sure, you can achieve similar results with page builders, but in my experience it takes longer to get everything just right, there’s always a ton of random little problems, and they’re bloated as hell and run like molasses on a winter’s morn.
The animated logo and paragraphs at the top of the page are pure CSS. I set up the responsiveness by hand as well.
Originally I used procedural gradients (via CSS) for the banners. While lean, this approach created banding the client wasn’t thrilled about, so I wound up replacing them with custom repeating PNGs I cooked up in Photoshop.
I’m particularly proud of the contact form at the bottom of the page which also functions as a final banner to show off more of Jeff’s amazing work.
Survey and Donation Form
For the survey, I used Modal Survey, which is a great plugin. I ran into a couple of hitches getting it to work with the aggressive page caching and code optimizations I was running. But the developer was super helpful in the process of tracking down and eliminating the issues. If you need a survey on your site, this plugin is pretty great.
The donation form is via Give. First time setting it up, but no complaints. It’s an industry standard for a reason.
In order to keep everything on one page, I set up both the survey and the donation form to appear in pop-ups. I did the same for the interviewee profiles as well.
Speed Optimization
The need to host huge high quality stills lead me deeper into speed optimizations than I’ve ever delved before, and I came away with some great new techniques. I was already uploading the smallest possible images and lazy loading for all my sites, but that wasn’t enough.
I wound up leveraging the WebP file format and offloading images to an image CDN (in this case Optimole) to keep things loading quick. But I don’t really like the aesthetic of Optimole’s lazy load feature, so I stuck with Smush for that. Plus, Smush’s server-side optimization features are good in any case.
After that I compared different caching plugins using speed ranking sites since my previous go-to caching plugin, W3TC, wasn’t cutting it. Honestly, that plugin is overly complicated, and in my experience is just as likely to slow a site down as speed it up. A lot of folks really like it, but I’ve never gotten stellar results.
Generally speaking, plugins that do one thing really well tend to outperform those which do a million. WP Fastest Cache has great caching ability and a small footprint, but its minification isn’t as strong (or as customizable) as Autoptomize‘s. So I cached with WP Fastest Cache, minified with Autoptimize, and selected specific javascripts for exclusion from deferment based on the site’s functionality. It was a process, but the site zips pretty good now.
Lastly, I set WP-Optimize to do regular cleanups to keep the database tidy.
My Favorite Part
It’s always a pleasure to work on a project which addresses social and political issues — especially one that involves so many beautiful photos to work with. Assets like that practically create the design for you.
See the results:
thequestionofwar.com
