Design v18

The website has been revamped online! When it comes to "revising", I always think of the "re-adjustment" in Cameron Moll's classic article. This revision did not start from scratch, nor was it a blank piece of paper and an empty code editor. I believe that no future revisions will be like this. I have adjusted some content based on the existing foundation. But the adjustment is very large, involving almost every file, so it is worth drawing a clear line and calling it "v18".

I keep an incomplete revision history here.

Project start

I usually like to explore with design tools first. After 3 to 4 iterations in Figma (after returning to perfect the footer design when starting the build), the final effect is as follows.

After basically satisfied with the visual effect, I turned to coding and made the final decision during the coding process. The final product is not much different from this version, but there are still some differences (and it requires 10 times the design decision).

simplify

It may not be visible at first glance, but in my work, the core theme is simplification. Not a complete simplification, it's just about 20%.

The header of the v17 version has a dedicated mobile version and handles the on/off state. The header of the v18 version is just some links and will be displayed in a new line on the small screen. I added a "Back to Top" link in the footer, which appears when you scroll to a location outside the top, helping you return to the navigation bar. I use scroll detection (based on IntersectionObserver) to "rotate the stars" when returning to the top.

I can already predict that the website header will be one of the significant improvements in the v18 version, as it needs further improvement.

The search form for v17 version also has an open/close status, as well as a special template for the result page. I'm using Jetpack Search completely now, so when I click on the search icon it will only open.

This search feature is powered by JavaScript, and for improving its stability, it is also a valid hyperlink to Google search results:

 <code><a href="https://www.php.cn/link/fce40f257a6c2f9bcbd0b1f562a8e276">Search</a></code> ...

There are many different layouts (e.g., the sidebar on the left or right) and header styles (e.g., videos in the header). Now both have one version.

The footer of the v17 version has become very large, including complete parts such as newsletter forms, social media, and related websites. I've compressed it into a more "traditional" footer, if that's the case.

Now there is only one style for "cards", whether it is articles, videos, guides, etc. There will be some subtle differences depending on whether the author is relevant, whether there is a label, whether there is a call to action, etc., but they are all the same benchmarks (and templates). The main change is the "mini" card, which is now used in popular articles, monthly mashups and related article cards in the article.

The newsletter area has also been greatly simplified. In v17, the /newsletters/ URL is a "login page" for newsletters, where you can view the latest content in the sidebar.

This URL now redirects you directly to the latest newsletter so you can read it as easily as you read other content, as well as browse past issues.

Featured pictures

WordPress has the concept of a featured picture for each article. You don't have to use it, but we used it. I love how it integrates naturally into other content. For example, it will automatically become a picture integrated on social media. We use it as a subtle background image in v17 version.

Perhaps in a perfect world, a perfect website will have a perfect content strategy, so that every article will have a perfect featured picture. Matching color schemes, precise sizes, very predictable. But this is not a perfect world. I prefer systems that allow some omissions. Our design around featured images can accept almost anything.

• Overlay a gradient of a website brand on top and mix-blend-mode with it to make them all look relevant.
• The only exception is that they will be resized/cropped as needed.

With this in mind, our featured images will be used in many cases:

CSS Statistics

Just look at CSS between the two versions (Project Wallace helps here):

The main stylesheet after compression and Gzip is 16.4 kB. Maybe not as small as a full utility stylesheet, but that's not the size I'm worried about, especially with a massive drop in size without a deliberate pursuit.

Not the speed demon

CSS-Tricks uses quite a lot of resources. If speed is my top priority, the first thing I would do is start reducing the resources I'm using. In my opinion, this will make the website less interesting, but may not cause much damage to the content. I just don't want to do that. I'd rather find some ways to keep the website relatively fast while keeping its visually rich. Maybe in the future I can explore some of this to provide a lighter version of the website in a standard-based way and allow users to choose.

About these resources...

• Pictures are the main weight. There are many pictures on almost every page (10). I've tried using responsive image syntax to serve these images from CDN in an optimized format. I can do more, but I've made a good start.
• There is still about 180 kB of JavaScript. The Jetpack Search function is powered by it, which is the most important module. A polyfill is loaded (probably loaded by it) and I should look into whether it can be removed. I'm still using jQuery and I'll definitely consider removing it in the next round. Not against jQuery, it's just that I don't use it that much. Most of the work I do is written in native JavaScript. Google Analytics is also in it, the rest are small scripts for performance or advertising (ironically).
• The font weighs about 163 kB and is not loaded in any particularly fancy way.

All three are the goals of speed improvement.

However, hey, the desktop Lighthouse report is pretty good:

These results come from the home page, which is one of the heavier pages due to the large grid of content. There are still many performance best practices to try here:

• All content comes from global http/2 CDN and is cached
• Optimize/compress/combinate resources as much as possible
• Delay loading resources/advertising as much as possible
• Premium Hosting
• Online HTML instant.page

I also made sure that the SpeedCurve report was run before and after, and there was some encouraging news:

I hope it will feel very fast when you click around the website and then visit again.

Font

Use Hoefler&Co. Site-wide again.

I kept most of the article typography because this was one of the last design sprints I had in v17 version and I kind of liked the final effect. However, now clamp() appears, I'm using it to fluidize most of the content of the website. For example, title:

 <code>font-size: clamp(2rem, calc(2rem 1.2vw), 3rem);</code>

aX

I used the axe DevTools plugin to test the page before publishing and found some issues that need to be fixed. This is not an in-depth study of accessibility, but it is not a complete rewrite, so I do not expect a big change in accessibility. I'm particularly interested in solving any issues that arise here, so please don't hesitate!

mistake

I'm sure there are some errors. I'd rather not use this comment thread to report the error. If you encounter any errors, please contact us by contacting us. ?

The above is the detailed content of Design v18. For more information, please follow other related articles on the PHP Chinese website!