Redesign v15 Notes

Avatar of Chris Coyier
Chris Coyier on

Little redesign around here. As ever, it’s just a start. It will ebb and flow in the weeks, months, and years to come.

There are bugs! There are little differences that might take a tiny bit of getting used to! You’re always welcome to contact us and report bugs or let us know what you think. You know how a lot of people are all like “all websites are the same!”, well, some things are different here quite on purpose.

Dedicated Area for the Newsletter

It feels much better to have a web archive of the newsletter. Since it’s hand-written, I’d hate for that content to be lost in email-only-land. This is just a simple v1, I’m sure we can make these archives even more usable moving forward.

Card-based Layout with Featured Images

What I like about card-based layouts is that you can limit the width of the card such that the line-length isn’t too wide and images aren’t too enormous, then arrange the cards any way you like. Many of the pages use CSS columns to lay out the cards.

Cards can make for fun browsing.

It’s already confused a number of people how the next chronological card is below the top left one instead of to the right. I understand the confusion, but I’m not particularly concerned. Not all pages are chronological. I’m not sure how much chronology matters, especially when dates are clearly presented and the content is relevant. I like how it gives slightly-older articles a new chance to shine at the top of the next column.

On mobile, the cards stack on top of each other.

Which has also been confusing for some folks. The thinking is: cards are always excerpts. The stacking (and thus hiding of some text) says: click/tap this to keep reading it.

Expanding Images and Pens

The main content area is exactly centered, which differs from the last few designs. It’s also slightly narrower. I prefer the narrowness for text, but I was a little bummed that it made images and embedded Pens smaller. So I made images expandable!

Which is pretty much Dave’s thing.

Plus we made the Pens expand both ways:

Oh, plus, code, too, if it needs it:

Tagging

We’ve been tagging content for the last few years, but haven’t meaningfully exposed it. This design is our first crack at it.

Commenting

Comments are sticking around, and we want to continue encouraging discussion via comments, but we also want to have clear expectations for commenting behavior. Here’s the latest stab at that:

Think of it like a letter to the editor.

In other words: more moderation. Which isn’t just keeping out the bad, it’s giving lots of super rad stars to the good!

Fluid Type

I just can’t get enough.

The Lodge Combined with Videos

The Lodge was always just video screencasts anyway, and since we no longer charge for it, we squished them together. All these series are still available in there.

Performance

As ever, there are improvements to be made. But…

500ms for the DOM and 1.16s for full load on 3G ain’t bad (cache hit, tho).

I was able to do some performance optimizations on the front end like the removing of some libraries, removing of some images, lazy loading others…

Header

For the curious, the weird moving backgrounds are SVG that is pseudo-randomly generated points of a <polygon>. Here’s the stripped down code for it:

See the Pen CSS-Tricks Header by Chris Coyier (@chriscoyier) on CodePen.

New Areas

None of these are ready yet, but the main motivator for me to mess around with a redesign was to bring to live some new areas. Here’s a sneak peak at just one page of one area.