Cet article Protégé : #25 – Erika et les princes en détresse – tome 2 est apparu en premier sur YATUU .

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..

Contents

• Minimalismist
• Design Goals
• Screenshots
• Hello “Yes” theme
  • Yes CSS
  • Yes JavaScript
  • Other Details
• Performance Optimization
  • Micro-Optimizing Code
  • Cutting the Fat
• Performance Results
• Tested Browsers
• Retrospection
• Almost There

Minimalismist

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.

Designed with 15KB of CSS and 2KB of JavaScript.

Design Goals

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 JavaScript
• No reliance on CSS
• 100% cross-browser compatibility
• High fidelity/consistency across platforms
• Device agnostic
• Responsive

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.

Screenshots

Before getting into the details of the new theme, here are some screenshots for comparing the previous #24: Metamorphosis"> X theme and the new #25: Performance Over Perfection"> Yes theme (click thumbnails to view full-size images):

Previous site design: X theme

New site design: Yes theme

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.

Yes theme rocking Night Mode (click the sun icon in the top nav bar)

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 )

So the Yes theme is all optimized PHP outputting clean HTML , and also minimal use of CSS and JavaScript. I’ll spare us the deep dive into all the theme template code (PHP and HTML), and instead focus on the CSS and JavaScript..

Yes CSS

For the CSS, the Yes theme relies on browser defaults as much as possible. This includes properties like font-family , font-size , and 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 .

Yes JavaScript

For JavaScript, the Yes theme employs progressive enhancement and graceful degradation. That means essentially that JavaScript is not required to access site content normally. In fact, the only JavaScript used for the entire site:

• Anchor offsets
• Break out of frames
• External links in new tabs
• Toggle light/dark mode

All that weighs in at a paltry 2KB, and none of it is required for normal functionality. If the user supports JavaScript, then the scripts are employed in progressive fashion, to enhance the user experience (a little bit). So when JavaScript is not available, the site still looks and behaves the same (i.e., graceful degradation).

Other Details

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, #25: Performance Over Perfection"> 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.

Performance Optimization

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
• Only 2KB of JavaScript
• ~ 500KB of theme graphics (GIF, JPG, PNG, SVG)
• Use browser default font families, sizes, weights, colors, etc.
• Limits to two (or three) HTTP requests for CSS and JavaScript
• 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.

Micro-Optimizing Code

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 post_class()
• all the class names added to the body tag, from body_class()

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:

• How to Micro-Optimize Your CSS
• Obsessive CSS Code Formatting

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

Plus lots of other CSS and JavaScript tricks that just aren’t necessary. Call me a weirdo, but it’s a good feeling to drop the frills and focus instead on content.

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 :)

Performance Results

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.

Yes theme performance results at gtmetrix.com

Yes theme performance results at Google PageSpeed (desktop)

Yes theme performance results at Google PageSpeed (mobile)

Yes theme performance results at pingdom.com

Yes theme performance results at uptrends.com

Yes theme performance results at webpagetest.org

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.

Tested Browsers

Here are the browsers used to test the new design:

macOS

• 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

PC/Win

• 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

Android 8.0.0

• 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-color not 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 .

Retrospection

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 ;)

Almost There

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.