{"id":331717,"date":"2020-12-29T09:15:33","date_gmt":"2020-12-29T17:15:33","guid":{"rendered":"https:\/\/css-tricks.com\/?p=331717"},"modified":"2020-12-30T10:14:19","modified_gmt":"2020-12-30T18:14:19","slug":"design-v18","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/design-v18\/","title":{"rendered":"Design v18"},"content":{"rendered":"\n

I redesigned the site! I can never think about the word redesign without also thinking about realigning<\/em>, from Cameron Moll’s seminal article<\/a>. I did not<\/em> start from nothing. This design wasn’t a blank design canvas and empty code editor thing. I doubt any future redesign will be either. I started with what we already had and pushed some things around. But I pushed so much around, touching almost every single file, that it’s worthy of drawing a line and saying this is v18.<\/em> <\/p>\n\n\n\n\n\n\n\n

I keep a very incomplete design history here<\/a>.<\/p>\n\n\n

Getting Started<\/h3>\n\n\n

I always tend to start by poking around in a design tool. After 3 or 4 passes in Figma (then coming back after I started building to flesh out the footer design), this is where I left off. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once I’m relatively happy with what is happening visually, I jump ship and start coding, making all the final decisions there. The final product isn’t 1000 miles different than this, but it has quite a few differences (and required 10\u00d7 more decisions).<\/p>\n\n\n

Simplicity<\/h3>\n\n\n

It may not look<\/em> like it at first glance, but to me as I worked on it, the core theme was simplification. Not drastic, just like, 20%.<\/p>\n\n\n\n

\n
\n

The header in v17 had a special mobile version and dealt with open\/closed state. The v18 header is just a handful of links that fall down to the next line on small screens. I tossed in a “back to top” link in the footer that shows up once you’ve scrolled away from the top to help get you back to the nav. That scroll detection (IntersectionObserver<\/code> based) is what I use to “spin the star” on the way back up also.<\/p>\n\n\n\n

I can already tell that the site header will be one of the things that evolves significantly in v18 as there is more polish to be found there.<\/p>\n<\/div>\n\n\n\n

\n
\"Emulated<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

The search form in v17 also had open\/closed states, and special templates for the results page. I’m all-in on Jetpack Search<\/a> now, so I do nothing but open that<\/a> when you click the search icon. <\/p>\n\n\n\n

This search is JavaScript-powered, so to make it more resiliant, it’s also a valid hyperlink to Google search results:<\/p>\n\n\n\n

<a \n  href=\"https:\/\/www.google.com\/search?q=site:css-tricks.com%20layout\"\n  class=\"jetpack-search-filter__link\"\n>\n  <span class=\"screen-reader-text\">Search<\/span>\n  <svg> ... <\/svg>\n<\/a><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
There were a variety of different layouts in v17 (e.g. sidebar on the left or right) and header styles (e.g. video in the header) before. Now there is largely just one of both.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
The footer in v17 became quite sprawling, with whole sections for the newsletter form, social media, related sites, and more. I’ve compacted it all into a more traditional<\/em> footer, if there is such a thing.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
There is one look for “cards” now, whether that is an article, video, guide, etc. There are slight variations depending on if the author is relevant, if it has tags, a call-to-action, etc, but it’s all the same base (and template). The main variation is a “mini” card, which is now used mostly-consistently across popular articles, the monthly mixup, and in-article related-article cards.<\/p>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n
\n
The newsletter area is simplified quite a bit. In v17, the \/newsletters\/ URL was kind of a “landing page” for the newsletter, and you could view the latest in a sidebar. <\/p>\n\n\n\n
Now that URL just redirects you to the latest newsletter so you can read it like any other content easily, as well as navigate to past issues.<\/p>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n