Thank You (2021 Edition)

The year has come to a close and it’s time again for our end-of-year wrapup. The most important message is this: thank you. (thankyouthankyou)

Thanks for stopping by and reading this site. If you didn’t, I’d be out of a job around here, and I quite like this job so I owe it all to you. Like a family holiday card, allow me to share how the year went from our perspective, both with numbers and feelings, and then do a review of our goals.

Overall Traffic Analytics Numbers

The site saw 88m pageviews this year down 6% from the 93m last year. Traffic has yo-yo’d up and down a smidge like that a little over the last 4-5 years, but this 6% is a bit of an alarming drop that I don’t like to see. These numbers are from Google Analytics, and some of my own research this year suggests perhaps 20-30% of visitors to this site actually block the run-of-the-mill client-side JavaScript-powered Google Analytics I use. So perhaps the real traffic is higher, but as the analytics implementation is exactly the same and I don’t see any reason blocking would have skyrocketed just this past year alone, the downward movement seems real.

A ~3% drop in organic search traffic was largely responsible for the dip. That’s big, as search is 74.6% of all traffic. This points to us just not hitting the mark well enough for what people are searching for. A nice 36% increase in direct traffic points to pretty decent brand awareness, but direct traffic is only 5% of overall traffic anyway so it doesn’t make much of a difference compared to search engine traffic. Referral traffic is down, social is up, but both are such small slices right now they just don’t move the needle.

You might think, well hey content ages out, search engine traffic to existing content will decline over time. That’s true, but we publish a ton of new content every year as well as maintain and improve existing content, hence the concern.

We invest well into 6-figures in new and updated content every year. So seeing a decline in traffic is disheartening.

But hey that’s the game sometimes. I suspect it’s heavy competition in the developer writing space, which is something we all benefit from as developers, so it ain’t all bad. We’ll live and learn and do our best to turn it around for the sake of the health of this site. I’ve already got (counts fingers and toes) a million ideas.

All that said, while I do think pageviews is an interesting and relevant metric to a site that uses advertising as a primary business model, there are many others. Unique Visitors are up year over year to 26.3m from 25.8m, suggesting more different people came to the site this year, which is great, they just didn’t bop around the site as much or come back quite as often. Pages per visit is very steady at 1.35 meaning for the most part people come, they read, they leave. No surprise there. It’s mostly that “come back” thing to work on.

The Biggest Leap in Mobile Traffic Yet

Pretty big jump in mobile usage this year!

2021: 20%
2020: 15%
2019: 15%
2018: 12%

A fifth of all traffic is pretty interesting. Before 2018, even though mobile traffic was surging then too, we were in the low single digits, which I always thought hey this is a reference site for coding and people code on desktop. But clearly, that’s changing and perhaps people are reading the site in a more news kinda way, which I like. For years I had goals of making this site both full of referential long-green content and a site you could subscribe to for news, like an industry rag. So far so good.

Content by the Numbers

You’d think if we missed the mark on new content this year, that perhaps some better year would beat articles-written-in-2021 in traffic, but that’s not the case. Articles written in 2021 drove the most traffic to the site in 2021 (13.5% of overall traffic). Here are the articles that were top-by-pageviews in 2021 that were written in 2021:

1. VS Code Extensions for HTML — Chris Coyier
2. How to Create Neon Text With CSS — Silvia O’Dwyer
3. Animating with Lottie — Idorenyin Udoh 
4. Did You Know About the :has CSS Selector? — Robin Rendle
5. A table with both a sticky header and a sticky first column — Chris Coyier
6. Comparing the New Generation of Build Tools — Hugh Haworth 
7. Mistakes I’ve Made as an Engineering Manager — Sarah Drasner 
8. Let’s Create a Custom Audio Player — Idorenyin Udoh 
9. HTML Inputs and Labels: A Love Story — Amber Wilson
10. Front-End Testing is For Everyone — Evgeny Klimenchenko

I almost shouldn’t post these lists! Look at what happens to Daniel Aleksandersen.

Those articles above range from 100k pageviews to 71k pageviews. What’s interesting is that if you group together all posts that got 40k or more pageviews, there are 44 of them, putting them at about 2.5-3m pageviews. That’s kinda cool I think — the “medium tail” of content is pretty thick around here. The flexbox guide page alone did 6.7m pageviews, so that’s still a beast, but it is bested by all content published in 2021 which clocks in at 11.8m. So investing in content works, it just needs to get tuned such that we aren’t dropping overall. Perhaps that means SEO tuning of both new content and old.

Here’s 11-20 from 2021 just for fun:

11. To the brain, reading computer code is not the same as reading language — Geoff Graham 
12. In Praise of the Unambiguous Click Menu — Mark Root-Wiley 
13. aspect-ratio — Geoff Graham 
14. Theming and Theme Switching with React and styled-components — Tapas Adhikary 
15. The Holy Grail Layout with CSS Grid — Chris Coyier
16. Creating the Perfect Commit in Git — Tobias Günther 
17. What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? — Geoff Graham 
18. Is CSS a Programming Language? — Chris Coyier
19. A Love Letter to HTML & CSS — Ashley Kolodziej 
20. JSON in CSS — Chris Coyier

And here’s the top 10 regardless of year, but still scoped to traffic-in-2021:

1. A Complete Guide to Flexbox
2. A Complete Guide to Grid
3. Perfect Full Page Background Image
4. Using SVG
5. The Shapes of CSS
6. Media Queries for Standard Devices
7. box-shadow
8. CSS Triangle
9. How to use @font-face in CSS
10. How to Scale SVG

I like seeing the Almanac not only perform pretty well overall but have some individual pages be top-performers on their own.

Comments

We had about 4,320 legit comments on the site this year, almost exactly the number from last year. Weird!

That seems like a lot, especially as we approve… I’d say half?… of commenters that are left. There is a lot of junk posts (e.g. “good post!” kinda stuff, that we just don’t post as to not bother the author with useless email notifications of new comments, nor readers with useless content). We just delete those junk posts (as in, not approve them in the first place).

There is spam too of course. We crossed the 2m spam comments threshold, but through a combination of Akismet and Anti-Spam not too much spam sneaks through and is easily trashed before approval.

Mentally, I really rollercoaster on comments. Sometimes they are great and helpful. Sometimes they are full of rudeness, hate, and anger. Those need to be looked at and trashed, meaning comments represent an entry point into my brain for all that negativity. Part of me thinks we should just shut them off, and if people have something important to say, we can encourage them to use their own blog (it ain’t hard to spin one up!) to comment and we’ll link to it if it’s good.

But then I think of all the helpful comments and comments that help keep me up to date. Heck I just learned that Chrome is postponing all that removal of alert() stuff via a comment from Kyle, and I probably would have missed that otherwise. Plus the fact that there are 4,320 of them this year that pass muster feels like the scale is tipped toward keeping them.

Newsletter

We’re at about 91,000 newsletter subscribers as this year wraps, up from 81,000 last year. A respectable march forward and makes it likely we’ll hit that 100k milestone sometime in 2022.

Huge props to Robin for leading up the newsletter with wonderful writing. I think he really found a voice and stride on the newsletter this year.

We didn’t miss a single week. Part of what helps there is that they have sponsors so there is some clear obligation to get them out on time, but I think it’s more like we have a system and the system works.

I’d really like to juice up newsletter subscriptions moreso because I think it’s actually a darn nice weekly read than for any specific business reason.

Video

Thanks to Dave’s idea that we get ShopTalk more into video, we’ve been using the CSS-Tricks YouTube channel and thus had a banner year in publishing video! 35 brand new videos!

Site Updates

The design evolved a bit this year, but nothing overly dramatic. Normally this time of year my fingers are itching for a new design, and believe me there are Figma drafts cooking, but I just haven’t had the time or inspiration for a true v19 just yet.

So no major changes to the tech behind the site, but plenty of minor ones. For instance:

• The Yoast SEO plugin was giving me problems. It had super frequent updates, which I guess is good, but there was a high frequency of problems with the updates where either the core plugin or the pro plugin wouldn’t update correctly (up to causing such problems as literally taking down the site) and settings getting messed up during updates. For a while I just turned it off entirely. But then I started hearing good things about RankMath so I’m trying that, and so far so good. It’s got me kinda inspired to take content SEO more seriously. Yoast had some claws in the site in other ways, for example it provides a pretty nice Table of Contents block that I’m still searching for a solution for (maybe it’s coming to core?). It also had pretty nice breadcrumbs, and had to switch over to Breadcrumb NavXT.
• Jetpack Boost is new to the site this year, and I’m impressed at how it handles critical CSS. Jetpack (full disclosure: a long time sponsor) is generally extremely helpful. I particularly like how the site search works, which is just out-of-the-box Jetpack Instant Search.
• We really dialed in the social media images this year.
• We also dialed in the eCommerce situation. The MVP Supporter membership unlocks additional content on the site, which I can now provide in eBook formats. So I’m really all set to produce more of that type of content.

Goal Review

🚫 Publish Three Guides. I thought this would be easy since last year our goal was 2 guides and we published 9! But this year we only managed one: A Complete Guide to Custom Properties. We did publish some other pretty big series like Tobias Günther’s 9-part Advanced Git series and four more entries in Jay Hoffman’s Web History series.

🚫 Stay focused on how-to technical content around our strengths. Kind of a close call here. It’s not like we didn’t publish quite a bit of how-to technical content. But I’m going to say we failed because I don’t think we kept this in mind strongly enough throughout the year. We didn’t say “we’re good at this type of content so we’re going to lean into that specifically” like this goal suggested we should.

🚫 Complete all missing Almanac entries. I hate marking this as failed, but I’m only doing that because of how it was worded with “all”. I think I had in mind that there was a really clear finite number of Alamanc articles to finish and we just had to do that. I think it’s a lot more wishy-washy than that, partially because of editorial choices (do you publish a unique entry for every single logical property or group them, for example).

But also, should we build an SVG-specific section? Should we have a new section for all the @at rules? It’s hard to say when the Almanac would be “complete”, so I’d just rather not. This page really needs a cleanup, but it’s got many ideas in there for more work that needs to be done/commissioned if anyone is so inclined.

We did do a pretty good job on publishing new entries though — more than any relatively recent year!

Almanac Entry	Published
scale	2021-11-10
translate	2021-11-09
rotate	2021-11-08
mask-border	2021-11-03
padding-inline	2021-09-23
overscroll-behavior	2021-09-14
border-block	2021-09-02
outline-color	2021-09-01
accent-color	2021-08-26
block-size	2021-08-25
outline-style	2021-08-16
outline-width	2021-08-10
text-emphasis	2021-08-04
::backdrop	2021-08-03
hyphenate-limit-chars	2021-07-15
:fullscreen	2021-07-14
mask	2021-07-02
content-visibility	2021-06-21
place-content	2021-05-13
mask-composite	2021-05-10
:empty	2021-04-27
:where	2021-03-23
justify-self	2021-03-18
mask-type	2021-03-02
place-self	2021-03-02
:current	2021-02-23
:future	2021-02-23
border-boundary	2021-02-09
mask-mode	2021-02-03
caret-shape	2021-01-27
caret	2021-01-27
aspect-ratio	2021-01-20
margin-inline	2021-01-14
margin-inline-end	2021-01-14
margin-block-start	2021-01-08
margin-block-end	2021-01-08
margin-block	2021-01-06

Settting 2022 Goals

• More SEO focus. I’ve almost shunned SEO in the past. Partially because the HTML best practices seem pretty easy and obvious, and my inbox is so full of total slimeball link builders I’d like to see do literally anything else with their time. Butttt. I’m just being ignorant about it. I think it will be fun, interesting, and likely useful to take a more considered look at SEO best practices for a content site like this and make a stab at improving it. The related goal being: Gain 10% in pageview traffic. We lost 6% this year, so I think 10% will get us back on track and moving upward. But it’s a big goal so I’m already nervous about it.
• Another digital book. All the infrastructure is there for this and I’ve got ideas. I just need to write and put it in place.
• More social media experimentation. That’s a loosey-goosey goal but whatever, we’ve got our work cut out for us in other ways. Like SEO, for a few years there I kinda shunned dedicated social media work for the CSS-Tricks brand. Mostly because when I look at the traffic numbers, so very little of it comes from social media, especially considering how much time we were spending on it in the past. We don’t really benefit much from brand social media, so why bother? Well, maybe I was thinking about it the wrong way. Maybe we can just not care what traffic it drives but care about the connection with readers directly there. If we’re more fun and interesting on social media, maybe we continue to build trust in what we’re doing here. Maybe it can help drive sales if we get that second goal done. Maybe its more directly monetizeable.

Thank You

Special thanks to Geoff! If you didn’t know, he’s our lead editor around here and keeping this entire site humming along nicely. You’ll work with Geoff if you do any guest writing here at all.

Special thanks to our biggest year-long sponsors Automattic and Frontend Masters. Our year-end series is both a thank you to you the readers and to them.

To another year!

🙏