Redesign #25: Performance Over Perfection
Welcome to the 2020 (25th!) redesign for Perishable Press. Like many of the previous designs, the new design is super minimal and organic. The #1 goal this time around was to find an optimal balance between performance and aesthetics. Or put another way..
..the least amount of code for the best possible user experience.
This article goes thru the design and attempts to explain some of the techniques and thinking that went into the process. Here is an overview of the contents..
- Design Goals
- Hello “Yes” theme
- Performance Optimization
- Performance Results
- Tested Browsers
- Almost There
I heart minimalism. Many of the site’s previous 24 designs were minimalist and focused on performance and lightweightedness. The new design pushes it even further by using the least possible amount of code to produce the best possible user experience. A rigorous application of minimalism balancing performance with usability and aesthetics.
First, I wanted smooth continuation from the previous design (no sudden drastic changes). New designs are a great opportunity to improve through iteration, where you can fix all the little things that you didn’t like about the previous design, while improving the things that work to make them even better. Going for design evolution, not shock and awe.
I also wanted the content to speak for itself and visually pop on screen. You can see this by comparing the before and after screenshots. Easier said than done when using a minimal amount of code and browser default fonts and styles.
Other design goals include:
- Optimal performance
- Exceptional usability
- No reliance on CSS
- 100% cross-browser compatibility
- High fidelity/consistency across platforms
- Device agnostic
To accomplish these goals, I decided to stick as closely to browser defaults as possible. After all, the developers of great software like Chrome, Firefox, Opera and others know what they are doing. So instead of ignoring or fighting years of battle-tested default browser styles, I use them as the foundation for my design.
This strategy saves massive time and requires way less code than trying to reinvent the wheel using tactics such as CSS resets or normalization. Most (if not all) of the above design goals were achieved by letting the browser do most of the work.
Before getting into the details of the new theme, here are some screenshots for comparing the previous X theme and the new Yes theme (click thumbnails to view full-size images):
If you compare the two screenshots, you’ll notice the main vibe of the previous theme is continued in the new Yes theme. But now the content “pops” out more, with more focus on the post content plus some new added information and resources in the sidebars. Besides that, the biggest change is the addition of a fixed top navigation bar and mega footer area. The previous design had a simple one-line footer.
Hello “Yes” Theme
Behind the scenes of the new design, there is a WordPress theme called Yes. Not named after the legendary rock band, the Yes theme is more of a general nod toward positivity and optimism. As in “yes” instead of “no” sort of thing. Or in terms of design:
Simple, light and refreshing as opposed to complex, heavy and busy.
The Yes theme serves as the 25th redesign for Perishable Press. The very first theme, named Apathy, was (way) back in 2005. The next theme was named Bananaz, and then Casket, and so forth. With each new theme beginning with the next letter of the alphabet. So the next redesign/theme will be named after the letter “Z”, and will complete the series.
Some features of the Yes theme:
- Theme built with shapeSpace
- Design based on the X Theme
- Night mode (lite/dark toggle button in top menu)
- Mega site menu (inspired by previous minimalist theme)
- Thoughts (asides) displayed in sidebar + thoughts archive
- Super responsive layout/design
- Sticks close to browser defaults
- No plugin dependencies
- Big focus on content
- Removes 3rd-party ads
The Yes theme is built with my shapeSpace starter theme, so the template files are well-organized, streamlined, and kept as simple/lightweight as possible. Keeping the theme light and fast means that you don’t need to try to and compensate by installing all sorts of performance plugins. Honestly, I can’t remember the last time I needed to install any sort of cache or performance plugin on any of my sites.
Not using any cache or performance plugins. Site performance measures close to 100%. (view results)
For the CSS, the Yes theme relies on browser defaults as much as possible. This includes properties like
line-height, as well as details like colors, borders, and link styles. So basically the design is a giant exercise in margin manipulation while using browser defaults for most everything else.
To give you a better idea, this site’s content spans over 15 years with over 850 posts, pages, and demos. To style all of that, previous designs required upwards of 250KB–500KB of CSS. The previous design boasted a stylesheet weighing less than 50KB. This new design’s stylesheet is less than 15KB.
It may seem like overkill, but again I want to emphasize the goal of this design: greatest possible impact using the least possible amount of code.
- Anchor offsets
- Break out of frames
- External links in new tabs
- Toggle light/dark mode
As far as design goes, here are some other details worth mentioning:
- Added a related posts archive
- Added a thoughts side blog for random thoughts and links
- The site menu is now its own page instead of a popup/overlay
- Implemented support for syntax-highlighting code (thanks to Prismatic)
- Decided to keep the comments section (thanks to a few die-hard commenters)
- Added the site tagline beneath the logo (was missing in previous theme)
- Fixed related posts script (wasn’t working correctly in previous theme)
- Better responsive for larger screens (displays 2nd sidebar)
- Kept the print styles, just in case (only costs 200 bytes)
- Dropped a bunch of social-media scripts and plugins
Basically, Yes is an example of a super minimal and lightweight WordPress theme. I did however splurge on a few bells and whistles:
- Subtle box shadows for images
- Subtle background image for top nav menu and footer
- And of course night mode
Everything else is about as bare-bones as possible without killing the inspiration. In my mind, the current design achieves an ideal balance between performance and usability slash aesthetics. The design is clean yet sort of has an unfinished, subtle rough feel to it that keeps me motivated and focused.
I really liked the previous design. But I’ve got some big plans for 2020 and redesigning Perishable Press sort of kicks off the whole process. So there were some key design patterns that I wanted to bring forward with the new design, things like:
- Sitewide uniform hyperlinks
- Uniform form fields and inputs
- Generous use of white space
- Sidebar-enabled layout
- Less emphasis on social media
- And of course Night Mode
I wanted it to be a natural progression from previous theme, very responsive, lightweight, fast, and flexible. The previous design was relatively close to running on browser default styles (fonts, sizes, colors, etc.). But the Yes theme obviously takes it much further. Especially “under the hood”, where the code is micro-optimized to balance aesthetic with performance. Things like:
- Only 15KB of CSS
- ~ 500KB of theme graphics (GIF, JPG, PNG, SVG)
- Use browser default font families, sizes, weights, colors, etc.
- Overall page weight kept as light as possible
- All post images optimized for Web
I actually went into the fine-tuning phase of the design with like 12KB of CSS. It’s a good feeling that probably very few can appreciate.
To give you an example of how the code for this theme is micro-optimized for performance. WordPress includes all sorts of class names for the HTML output of many of its template tags. In general adding the extra class names and markup is useful, but it works against minimalist/performance-focused design.
So to avoid the extra weight when displaying lists of things like related posts, popular posts, post categories, tags, and so forth, wherever possible I replaced the template tag with the hard-coded output. To get that, first I spit out the list (or whatever) using the relevant template tag, edited the HTML to remove all the fluff, and then replaced the template tag with the simplified markup.
The theme also makes use of custom loops where possible, to display posts and whatnot using a minimal amount of markup.
Another example of micro-optimization at the theme level are template codes that are not necessary for the current design. For example, the design has no reason to include things like:
- the id attribute on each post, like
id="post-<?php the_ID(); ?>"
- all the class names on each post, from
- all the class names added to the body tag, from
And so forth, for whatever extraneous template tags. Likewise with the CSS. Considerable time was spent optimizing the code to be as simple and concise as possible, while remaining flexible and human readable, so I can jump in and make changes on the fly. I’ve written before about micro optimizing CSS:
I used some of these techniques while formulating the Yes theme stylesheet. There you can find further tips for optimizing CSS for performance.
Cutting the Fat
Optimizing performance means sacrifice. You’ve got to be a tyrant. For this design, here are some of the cool little bells and whistles that didn’t make the cut:
- Social media post buttons — simple cost vs. reward
- Twitter latest tweet thing — replaced with thought blog
- 3rd-party advertisements — sharing my own content instead
- Smooth “jump-to” scrolling — just not necessary
- Jump to top button — also not necessary
Honestly, I could have kept it even more super simple by omitting the toggling light/dark functionality. Shaved off a few more kilobytes off the load. But I hear from people who like being able to switch between the light and dark styles. So it stays for now :)
After launching the site’s new design, I tested its performance using some great (and free) online tools. Here are the results of the tests (click thumbnails to view full-size images). Note that all tests were just using whatever default settings provided by the service. I didn’t bother tweaking anything.
The home page weighs in at around 110KB delivered, depending on which images are displayed. Try downloading the homepage (or any page) and look at the results. It’s like four files plus the
.html file. Now compare that to other web pages. Google homepage currently downloads as six files (total download size = 1 MB). Twitter homepage is 16 files (2.3 MB). Facebook login page is 33 files (3.4 MB). Amazon is 194 files (3.2 MB). So it’s all relative, but I try to aim for the lower end of the scale.
The previous design was fast. This one is faster.
Built with speed in mind from the ground up. In fact, unlike almost all previous designs, no extra time was spent optimizing things post-launch. And performance scores may improve further, once the random query string is removed from the CSS/stylesheet request (leaving it in place for awhile). Or what Google refers to as “Critical Request Chains” in their PageSpeed report.
Take-home point: much performance awesomeness can be accomplished with good hosting and smart theme design.
So what’s the secret? Simple is better. Less is more. You’ve heard it a million times. That’s all it is. All those great performance scores are because of two main factors: fast server defaults and theme optimization. I don’t use any performance scripts or plugins, other than some caching rules in the site’s .htaccess file. If I had the time, I would dig into all the performance data and recommendations and work on fine-tuning toward even greater speed. But I’m fine with the current performance. “Mission accomplished” as they say.
Here are the browsers used to test the new design:
- Safari 13.0.3
- Firefox 72.0.2
- Waterfox 56.2.11
- Opera 66.0.3515
- Chrome 80.0.3987.87
- Brave Version 1.2.43
- Edge 44.18362
- IE 11.535
- Firefox 72.0.2
- Waterfox 2020.01
- Opera 65.0.3467
- Chrome 80.0.3987
iOS 13.3.1 (iPad/iPhone)
- Safari 13.3.1
- Firefox 14.0b12646
- Brave 1.6.6
- Chrome 76.0.3809
- Chrome 79.0.3945
- Opera 55.2.2719
- Brave 1.5.3
- Opera Mini 46.0.2254
The design was tested pretty extensively on all of these browsers; it is fully responsive from widths of 320px and up. I could find only two unresolvable bugs:
- On iOS fixed/sticky position is kinda wonky in all browsers, for example
background-colornot working on sticky-position elements
- Tabbing thru the document on Chrome, the focus styles on the first two (icon) links look weird/offset
If you happen to come across any bugs or weirdness while visiting the site, or if you have ideas for improving, please let me know.
I began this redesign on December 20th and launched today, February 6th 2020. Probably spent on average about 4 hours per day, pretty much seven days a week. So around 200 hours from initial plan to completion. As explained, going into the redesign, I wanted to find an optimal balance of performance and aesthetics.
During the redesign process, I found it very challenging to restrain my creative compulsivity while pushing design limits and breaking old habits. I found that focusing on performance, and trying to balance with usability, helps to restrain the endless design options. It frees you to explore concepts more deeply, because you’re working in a finite creative space. You have to make more of every bit of design you want to use. It’s entirely an iterative process: diving in, making progress, getting stuck, letting go, and then coming back to it.
Now looking back on the event, I see that the challenges and frustrations along the way meant that I was learning and expanding my skills. Overall I think the design turned out great. It inspires me to work on the site, post content, etc. And more importantly, it completes the Phase 1 of my plan for 2020. So now it’s on to Phase 2: add a sub-domain to Perishable Press and build a new bookstore. Then it will be time to write some more books ;)
The previous several themes have been trending further toward absolute minimal. Now that there is only one theme left — the “z” theme — in the Perishable Press Alphabet-series themes, I think the next one will be more visually striking, with more graphics and super styles, like Chris Coyier’s latest space-age incarnation of CSS-Tricks. With the fancy scrollbars, bold colors, and all-around fun user experience. Maybe something reminiscent of the Quintessential theme. I still want to keep strong performance focused. So the next challenge will be to spend my design credits as wisely as possible.
Yell done Jeff, thank you for sharing the work flow and steps.
I really liked the “X-Theme”. I was wondering when you were going to release it, but I guess that was not meant to be?
The “Yes” Theme loads very quickly. Does seem a bit plain compared to a few of your past “lean themes”, but is well organized and very readable.
I noticed you were using:
On your FORM tag. I have tried to eliminate all occurrences of of onEvent . . . attributes because they will not work with my CSP-Header settings (especially when using “nonce” values). So I try to use, within a SCRIPT container, event-capture statements for these actions, instead. Just a minor thought, here.
I will be trying to figure out to properly use SRI’s (“Sub-Resource Integrity”) hashes, which are supposed to also work for embedded in-lines too. There again, I have not tested this theory for myself yet.
Is there perhaps a chance of setting your comment textbox to a little bit wider, without wrecking your page’s appearance? It does seem a bit narrow at its current width.
Here’s to a new year of possibilities! I also need to start picking up on writing some more. I used to run a blog or two, a few years ago, that were fairly active. Always enjoyed helping others’ knowledge and pursuits. Keep up the great work!
– Jim S.
Thanks Jim! Your feedback and insights are appreciated. Yes the theme is super minimal and loads very quickly. I agree it is a bit “plain”, but for some reason the rawness inspires me to work on the site, post new content, etc. Next theme should be more visually stunning ;)
Also do you think I should modify anything with the
onsubmitstuff for the search field? It’s been like for years without any reported issues.
And definitely will widen the comment message field. I’m still in the process of fine-tuning and tweaking, so that will be no problem. Thanks for the suggestion.
Cheers and best success to you in 2020!
Just a question for understanding. The theme is great, the design is great, but the standard browser font is not. So why don’t you at least use the system fonts? Is there a special reason for that? Like that:
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji
Thanks for the feedback. I’ve used that stack before and it’s great. But as explained in the article, I wanted to stick as close as possible to browser defaults (for numerous reasons). Also the the system font stack is sans-serif, whereas for this design I wanted to go with a serif font.
Very nice and love it:)
I would very much want to know what rules you followed in order to maintain usability in high levels. Did you make your work based on a predifined set of rules? Could you please share with me more information about “usability”? Thanks for your time.
Mostly 20 years of experience, plus testing on various users to get feedback, fine tune etc. I’m not an expert in usability. You tell me if anything is not up to snuff or could be improved. Cheers.
Love the new simplicity. Think I last went through a dive through your site during Quintessential theme (under a pseudo name then) and loved aspects of that. Looking forward to the next one.
Thanks Arfan! Great to hear from you.