Building the Perishable Press Bookstore

After six months of on-again, off-again hard work (and plenty of unexpected challenges), I am excited to launch the new Perishable Press Bookstore. The old bookstore was located on a separate domain, but I wanted it to be better integrated with the main site here at Perishable Press. So now there is the site blog at perishablepress.com and the store at books.perishablepress.com.

Having both sites under the same domain enables me to now streamline and simplify a LOT of stuff and ultimately make my life easier. It’s also a step forward in my plan for 2020 (and beyond). Currently I have four books, each of which has its own fully functional website. Of course, each of those sites is an ongoing maintenance activity. Each site has its own set of users. And each site costs time and money to operate.

Screenshot of the Perishable Press Books homepage (click to open in new tab)

So now that I have a single, unifying bookstore for all of my books, I can begin to dismantle and/or streamline the other book sites and just keep everything focused here at Perishable Press. It’s all about integration, consolidation, and simplification.

Going In

Going into the new bookstore project, I wanted the look and feel to “gel” with the main site’s simplified design. The main site design currently looks like this:

Perishable Press current site design (click to open in new tab)

Very minimal design, with traditional link styles and focus on content. Also, to help maintain a consistent user experience, I wanted to continue the same basic layout and patterns used at the original bookstore. Here is a partial screenshot of the original store design:

Original bookstore design (click to open in new tab)

Again very minimal presentation with strong focus on content. And so blending the main site design with the original store design (as shown in the two above screenshots), here is the new store design:

New bookstore design (click to open in new tab)

So to sum up, the new bookstore design:

• Is a combination of the main site design and the original store design
• Is similar to the main site design while remaining visually distinct
• Preserves UX continuity going from the old store to the new store
• Provides a seamless experience going from the blog to the new bookstore (and vice-versa)

As if it were all designed together from the get-go. Which of course it wasn’t. Perishable Press the blog started over 15 years ago (in 2005). I didn’t start selling web-dev books until 2009. The original bookstore at wp-tao.com was built in 2015. So going into the development process, one of the main goals was to bring everything together and focus brand identity as much as possible.

During..

During the development process, things got crazy out there in meatspace. I started the project around Christmas last year. The plan was to launch during the first quarter of 2020. But thanks to the mindless hysteria and other chaotic world events, it took about two months longer than planned to get it done. It’s like the world slowed down to a crawl and is taking its sweet time getting back up to speed. It’s like life is buffering or going in slow motion or something.

Thankfully, things are getting back on track. So take advantage muh peeps. Work now while you can. Who knows when the next “lockdown” or riots or God-knows what else will happen. Something tells me whatever it is will be soon.

Looking Back

Looking back, I tried to keep things super tight going into development. Not to the degree where perfection slows you down. But to the point where there are no loose ends or little things to keep track of going forward. Just a clean, well-built website with no strings attached. I wanted to automate as much as possible, no repeating myself, and minimal reliance on 3rd-party services.

The result is an e-commerce/shopping-cart site that is very lightweight, fast, and flexible. Without sacrificing usability, I made the site very easy to operate, maintain, and redesign. Such aspects inspire me to write some more books and add them to the store. Which is a good thing, because Phase 6 of the plan is to write more books :)

Screenshot of Perishable Press Books single-post view (click to open full-size image)

Design Details

About the design. It’s a custom WordPress theme built with shapeSpace to be as clean and light as possible. What does that mean? It means DRY in the template code, and keep assets to a minimum. To give you an idea, here are some fun stats for the new bookstore theme:

• Total CSS: less than 50 KB
• Total JavaScript: less than 2 KB
• Total Images: ~ 1.7 MB
• Fonts: Crete Round and Work Sans (via Google Fonts)

So most pages are lightweight and load very fast on all devices. I am still in the process of fine-tuning the design to look good on all browsers (i.e., cross-browser testing and tweaking). But for the most part, everything is well-optimized for top performance. This is demonstrated by the results of various performance tests.

Performance Tests

After launch, I tested site performance using some free online tools. Here are the results of the tests (click thumbnails to view images in new tab). Note that all tests were just using whatever default settings provided by the testing service. I didn’t bother tweaking any locations, browsers, etc.

Bookstore performance results at gtmetrix.com

Bookstore performance results at Google PageSpeed (desktop)

Bookstore performance results at Google PageSpeed (mobile)

Bookstore performance results at pingdom.com

Bookstore performance results at uptrends.com (desktop)

Bookstore performance results at uptrends.com (mobile)

Bookstore performance results at webpagetest.org

My performance optimization process is simple: build a fast site, launch and test. Usually, I don’t spend much time tweaking performance to chase high performance scores. That’s a fool’s errand. Instead, I build the site to be fast from the ground up. Optimize as much as possible while building the site. Much easier and requires much less time than trying to reverse-optimize a site that was poorly built in the first place.

One other thing to mention about the performance results. The mobile scores are lower than the desktop scores. Not by much, but there could be some work done in that area. Most of the hits there are image-related. So I could go in and optimize all the images even further, cookie-free subdomain and whatnot, but everything else loads up super fast, so I’m gonna call it good and move on.

To the Future

It’s been a rough past several months, and we’re just barely to the halfway point of 2020. How much crazier will the world get? Read the Bible and find out. The accuracy is mind-blowing. Until then, I’m just gonna keep on working hard to achieve my goals. For 2020 and beyond. I hope you do too.

Thanks for reading :)

About the Author

Jeff Starr = Creative thinker. Passionate about free and open Web.