Metamorphosis

After 9 grueling weeks, I am happy to say that the 2018 Perishable Press redesign is complete. There are still a few small details that I am contemplating, but overall the work is finished and the site is back to full production capacity. From the old Wire theme rolled out in 2013 (five years ago!), to the minimalist, lightweight X Theme, Perishable Press has metamorphosed into a lean, mean, content sharing machine. This is the 24th time Perishable Press has been redesigned, and I couldn’t be more inspired with the results.

Vision

Going into the new design, my vision was clear. The next evolution of the site would culminate from a core set of principles:

• Minimalist design: less is more
• Focus on content and usability
• Best possible performance

In other words, I wanted the next theme design to be as lightweight and fast as possible, with a strong focus on content and usability. Then for the “look and feel” of the site, I wanted something that would inspire me to write more and spend more time with the site in general. So I went back. Way back to around 10 years ago, when I was first really getting into it. Back then, I was using one of my favorite themes, named Perishable.

2008 “Perishable” theme. Warning: “Light on dark” themes may trigger certain visitors

The 2008 Perishable theme is a minimalist, black-&-white theme. So when someone visited the site, they got light text on a dark background, as shown in the previous screenshot. From there, one of three scenarios would unfold:

• User likes the dark theme and uses it
• User clicks the “switch theme” button to use the “lite” theme
• User absolutely hates the dark theme and immediately sends hate mail

In retrospect, serving visitors a dark theme with small, grey text is borderline masochistic, but back 10 years ago it was just cool. I thought the design was awesome, and it inspired me to write and share content. Despite having to endure the occasional “what are you thinking, your design sucks, nobody can read it, I hate you forever, blah blah blah”, finding a design that resonates is huge when it comes to expressing yourself and sharing content.

With great power..

So the new X Theme basically is a “reboot” of the 2008 Perishable theme. Same look, feel, and experience, but completely reimagined with new code and enhanced functionality. Features include:

• Mega menu via hamburger icon (upper-left corner of screen)
• Switch between light and dark UI (upper-right corner of screen)
• Show/Hide sidebar for 1-column or 2-column layout (zen mode)

These three features enable me to return to the classic, 2008 Perishable theme without scaring away regular visitors. It takes three clicks to get there:

1. Click “Night Mode” icon to switch to the dark theme
2. Click the hamburger icon
3. Click “Zen Mode” icon to hide the sidebar

Those three clicks take me from the user-friendly design that’s served to all visitors by default (click images for full-size view):

2018 “X” theme (two-column, light mode)

..to the single-column dark theme that’s my personal favorite:

2018 “X” theme (one-column, dark mode)

So up front, serving a traditional dark-text-on-light-background design, I am behaving like a responsible web developer slash designer who understands the importance of usability and accessibility. Most visitors never will know that behind the scenes, I’m “breaking all the rules” working with small, grey text on a dark background. So it’s a “win-win” for everyone. Moral of the story? A fundamental design problem was solved with a few extra clicks.

Details

The X theme marks the 24th (official) redesign of Perishable Press. I liked the previous theme a lot. But after using it for five years, realized that I no longer want the following things:

• Too many advertisements
• Too much social media stuff
• Too “boxy” looking layout
• Too many WordPress plugins
• Too many creeping PHP errors/warnings/notices
• Too many custom theme functions
• Too many dependencies

How I let things get as bad as they were.. I guess when you get busy time flies and you gotta keep on going. Fortunately this year, I found the time to get it done. Before the renovation, the site figuratively was like an old caterpillar. Working on the site from late Spring into the Summer was like crawling into a virtual cocoon, slowly changing from the inside out. Eventually the renovated site emerged from the crumbling facade of the previous design.

I want simple. I want fast. I want awesome.

Some details of the new design:

Clean Code

All theme code is clean, lightweight and minimal. Also refactored all code for my Demos and Tools. Everything under my purview is kept as simple as possible. Just makes it easier to maintain, update, extend, port, and so forth. Also cleaned up a bunch of creeping PHP errors, warnings, and notices. So everything “under the hood” is in tippy top shape ;)

Consistency

The X theme is built from my free shapeSpace starter theme. So all template code is DRY, modular, and consistent. Also refactored all post markup with consistent UI patterns. For example, all captions, image galleries, and download links use the same HTML and CSS. Basically I spent a lot of time in the ’ol WP database synchronizing markup, deep-linking content, and cleaning things up. Overall added about 5MB to the database, but trimmed about 10MB.

Simplicity

The new design is kept simple. This brings nice intrinsic benefits: focus on content, easier to navigate, better performance, and easier to maintain. Most web pages these days are either too boxy looking, too cluttered with useless crap, or both. Visiting some sites feels like getting punched in the face with a pile of garbage. So the new design takes things in the opposite direction. Back to basics. Back to roots.

Zero Dependency

Or as close to it as possible. The previous theme made quite a few requests, for things like background images, icons, banners, ads, social media, and so forth. Plus many of my posts include images, so in general performance was not optimal and maintenance was time-consuming. By vigorously eliminating as many dependencies as possible, the new theme boosts performance, decreases time spent on maintenance, and reduces overall liability. For example, all JavaScript is 100% library-free.

WordPress

Specifically WordPress-related, the new design enabled me to remove the following plugins: Akismet, Yet Another Related Posts Plugin, Subscribe to Comments, and Art Directed Styles. So now running only 13 plugins. I also replaced my contact form plugin with my latest creation, Contact Form X. Also installed Disable Gutenberg to make sure that my precious post content is not disturbed by teh whole Gutenberg thing. I prefer the plain-text editor for muh 800+ carefully formatted WordPress posts.

Social Media

For reasons that grow more clear every day, all social media scripts have been removed from this site. Five years ago, the pros may have outweighed the cons. But these days? I know better. The rewards simply are not worth the costs. For example, recently visitors started reporting that there was some weird JavaScript error on most of my websites. Turns out the JavaScript used to load the Facebook “like” box was blowing up my web pages. So yeah, after realizing that my pristine code was at the mercy of random Facebook developers, I made the final decision to remove all social media scripts entirely. Just not worth it.

Advertisements

Someday soon, I hope to remove all 3rd-party advertisements from Perishable Press. Currently running a set of BSA ads in the sidebar, but that’s just to help pay for the server. Once I can remove the BSA script from the site, the pages will load even faster. But for now, a few ads are necessary. Any other ads you see around the site are for my own products (like my books and plugins), and should be displayed with appropriate levels of contextual discretion.

Performance

As mentioned, one of the primary goals of this redesign is to further improve site performance. My strategy for this mostly happens at the theme level, where everything is minimized and optimized as much as possible. Also cleaned up the database and resolved a bunch of creeping PHP warnings. And on the front-end, I want to keep things nice and snappy, so did not implement smooth scrolling in this theme. Actual before/after performance test results provided below.

Better Performance

Faster, better, stronger. That is what I strive for when building sites. And Perishable Press is my baby, so obviously want it to be as freaking fast as possible. The results of the new theme/design? Well, the site is pretty fast. See for yourself with these screenshots (click images to view full-size results).

BEFORE: 2013 Wire theme holds up well enough (tested @ gtmetrix.com)

AFTER: 2018 X theme performs much better (tested @ gtmetrix.com)

And those results are fresh out the box: I ran the Wire test before starting the new theme, and ran the X theme test almost immediately after the site went live. So the results shown in these screenshots are before any specific performance-boosting tweaks. And given the high scores, most likely I won’t bother with any additional performance tuning. Fast enough just the way it is :)

Methodology

For anyone who may be wondering about the methodology behind redesigning a site with lots of traffic and over 1,000 pages, tools, demos, and resources: it was all done live right on the server. How? Using my free plugin, Theme Switcha. That’s it. When working on the site, I simply switched to my new X theme privately, while all regular visitors continued to get the old Wire theme.

So there was no need for replicating sites offline, database synchronization, redundant testing, or any of that. The simplicity is almost silly. Just jumped on, switched themes, and went to town.

Unsolved Mysteries

While I have your attention, allow me to ask a couple of questions. The first is, why does transform: translate(-50%, -50%); interfere with the element’s text-decoration color? Is it because of dithering or something? I was trying to absolutely center a div (the mega menu) with text-decoration set to #eee, but after applying the transform property, the color displayed like #777. Any clues or infos welcome on this.

And the other question I have is, for the post navigation on archive pages, do the “next” and “previous” buttons seem backward? I could just be overthinking things, but when displayed adjacent to the page numbers, the Next and Previous links seem backward. To see what I am talking about, try just clicking Next or Previous a few times, and watch the “current” page number change along with the other numbers. Now imagine it with the Next and Previous links reversed. Seems to make more sense, right? Or am I just crazy?

T0D0 List

Despite the progress made during this round of redesign and cleanup, there remain some things for which time was just too limited. This is a fairly large site with lots of diversely formatted and technical content, and some tasks require significant amounts of time. And I’ve already used up my quota of time allotted for the 2018 Perishable Press redesign. So, the following tasks are offloaded until the next redesign (or whenever I can find time before then).

• Replace Feedburner (before Google kills the service)
• Replace all target="_blank" with rel="external" or similar
• Replace all <acronym> tags with <abbr> tags
• Clean up extra/loose images
• Sync/update all tools and demos
• Go thru comments (clean up code, fix order, et al)
• Upscale deep content images
• Update deep content 404s

Until then, the current design is complete and frankly has me pumped up tuff. Once again, going through and updating my old content (nearly 13 years worth!) reminds me of how much I value my audience. You fine folks are the best. I want to THANK YOU for your generous attention, participation, and support.

Needless to say, more fresh content on the way. Stay tuned for more exciting web-development adventures :)

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.