We sit in Peter’s living room, whiskey in hand, and discuss what it is exactly I am planning to do with this story and the portraits we just took.
At this point, sitting in the house of Bromka in the sleepy tree lined Portland, OR neighbourhood of Laurelhurst, it hadn’t occurred to me what I was going to do with this story. I assume I plan to sell it to TEMPO Journal, but when Peter asks, I only critically think about it for the first time.
Not long after a couple more long pours and the plan is hatched, I’m going to build a site for this story using a brand I’ve been playing with for a while, and Religion.Run is effectively started in motion.
Primary Goals
- Simple navigation 🍱
- Flexible CMS to quickly tell photo stories 📸
- Basic e-commerce to sell prints 💵
- Gotta be fast ⚡️
Navigation
Can it get more simple than a single logo at the top and bottom of every page that opens a three item menu? Stories, Prints, and Checkout … what else do you need for a simple e-commerce site? The stories page is also the home page.
Put together with my performance base custom theme, and a stripped down WooCommerce, for a quick and dirty little site.
All other navigation is in the footer with simple text links. Simple. Simple. Simple.
Flexible CMS
With but a few different module styles for both text and images, using Advanced Custom Fields Pro, I’m able to quickly and easy put posts together with Lead-in text, regular paragraph text, H2, and H3 titles, centered small, centered full width, and side by side images with various effects automatically applied vis CSS, a wide variety of layouts are achievable with a small amount of components and code.
The following screen shot is from the Bromka story that inspired this site, that captures a lot of the variety of the layout options. It’s not too fancy, but effective in framing the words and images well in my opinion.
All output code of the above modules are stripped of WP fluff, and the stories end up being semantically marked up, Google pleasing, easily indexed, all the schema’d, wonderfulness one could ask for.
Simple E-Commerce
Install WooCommerce, fill in the details, setup Stripe, turn off all the JS / CSS that crap loads, then build out the few views that we actually need for this site. In a hot minute or two, we’ve got an e-commerce site ready to roll!
WooCommerce does so much heavy lifting and after you’ve setup as many sites as I have, it really is just a couple hours to get up and running with the full power of WordPress at your fingertips.
In the name of simple, as is the theme, we go with a single page cart/checkout/all the things. When there is no need to mess around, why mess around?
Greased Lightning
I don’t like it, if it isn’t fast. Cars, bikes, and web sites … it’s just how I roll. I make them all go as fast as I possibly can. It boils down to the fact that I hate computers because they don’t operate at the speed of our minds. I try to mitigate that as much as possible, most especially with e-commerce sites.
Speed == Conversions.
First up, I like to ensure sites hit production at 100% across the Lighthouse board both on mobile (Emulated Moto G4, 150ms TCP RTT, 1,638.4 Kbps, and 4x slow CPU), and desktop (40 ms TCP RTT, 10,240 Kbps, and 1x slow CPU) tests. Lighthouse is a preliminary test to ensure no glaring Performance/Accessibility/Best Practices/SEO issues snuck through quality assurance.
For those interested in what is under the hood, I run LiteSpeed web server + LS Cache WP plugin, hosted on a single Digital Ocean LAMP stack droplet. Through extensive testing and benchmarking over the years, I’ve tied my Grunt build script to my LiteSpeed config. What the server handles better, the build script doesn’t … and vice versa.
1 x vCPU
1GB RAM
25GB Disk
All for just $5/mo
(5-6 WP sites hosted)
Digital Ocean Droplet Powered
A more complete performance audit involves WebPageTest which provides a more complete performance analysis. Effectively, we get our first paint after just one round trip to retrieve the 10.7KB home page bundled HTML. LiteSpeed bundles the CSS and JS, pushing them through HTTP2 in the background as soon as that first trip is complete.
Everything else is then loaded in with ethical analytics, fonts, SVG images, JS packages, and finally images. I believe some images are being served WEBP, but I haven’t fully setup QUIC Cloud to integrate with all images on this site … I don’t think. I know, what a professional.
I won’t be hard on myself though and keep things in perspective. This is a personal site built to host a single story that has sold two … TWO … prints. The complexity of this setup is wild for what it actually does.
It sure does look good on the drag strip at full throttle with no restrictions 😎
