Thank You (2022 Edition)

You know, this is the time of year where Chris normally publishes a big ol’ reflection of the past year. The first one was published in 2007, the same year CSS-Tricks began, and it continued all the way through 2021 without missing a beat. Having been a CSS-Tricks reader myself all those years, I’d hate to see that change.

So, here we are! 2022 was sure a heckuva year as far as transition goes. At this time last year, we were looking ahead at some goals for the upcoming year (which we’ll get to) but wound up joining DigitalOcean. That was a massive sea change (pun intended) and yet you stuck with us the whole way. It really means a lot to me that so many of you come here to read the things that I and a slew of other guest writers publish here. It just ain’t a community (or any fun) without y’all.

Thank you!

This is the last post we’re publishing this year as we hang up our Gone Fishin’ sign for the holidays. We’ll be back January 9 with a spate of content that’s fresh from the oven.

OK, this is where we start digging into the site’s analytics. That’s something we’ve always been transparent about and will continue to do. It’s not like our numbers are in some off-limits black box, and the hope is that sharing them somehow helps you and your business.

Overall traffic

Overall, Google Analytics is showing a total of 64m pageviews for the entire year. That’s wayyyyy down from last year’s 88m, which is alarming at first glance. I mean, who wants to see a 27% drop in year-over-year traffic?

But there’s good reason for that because we published a wayyyy less content this year. We all know Chris was a prolific writer (and still is, of course), often spitting out multiple posts a day. It’s sorta like we lost our most productive contributor for the bulk of the year. Let’s compare the publishing activity for the last few years:

  • 2020: 1,183 articles
  • 2021: 890 articles
  • 2022: 390 articles

A 27% drop in pageviews is a lot less concerning considering we published 43% fewer articles than last year, and a whopping 67% fewer than 2020’s overall total.

Hmm, I don’t feel like I’m working 67% less…

And all of this comes with the caveat that this is just what we get from Google Analytics. In past years, Chris has compared those numbers with stats from Cloudflare (the CDN layer that sits on top of the site) and Jetpack (the plugin that connects our self-hosted WordPress site to WordPress.com’s SaaS-y features). The results are always consistently inconsistent to the extent that I’m not even bothering to look this time around. (Alright, alright maybe just Jetpack… which shows 59.9m pageviews — oddly more than 2021’s 55m total.)

Articles, by the numbers

This is what I always look forward to each year! Here are the top ten articles in 2022 that were published in 2022:

  1. 6 Creative Ideas for CSS Link Hover Effects — Harshil Patel
  2. Explain the First 10 Lines of Twitter’s Source Code to Me — Anand Chowdhary
  3. What Were the Hottest Front-End Tools in 2021? — Louis Lazaris
  4. Replace JavaScript Dialogs With the New HTML Dialog Element — Mads Stoumann
  5. Say Hello to selectmenu, a Fully Style-able select Element — Patrick Brosset
  6. Reliably Send an HTTP Request as a User Leaves a Page — Alex MacArthur
  7. grid-template-columns — Mojtaba Seyedi
  8. A Complete Guide to CSS Cascade Layers — Miriam Suzanne
  9. CSS Database Queries? Sure We Can! — Chris Coyier
  10. CSS-Tricks is joining DigitalOcean! — Chris Coyier

I’m actually surprised that last one wasn’t higher on the list. And I’m really stoked to see one from the Alamanac in there, especially because Mojtaba chipped away at all of the CSS Grid properties over the past year and half and he knocked it way out of the ballpark. I thought I had a good handle on grid until I started reading all of the gold nuggets he packed into each property. There’s so much to learn in there and Mojtaba has a knack for clearly explaining complicated things. I’m hoping to update the CSS Grid guide with all that fresh information (but more on that in a bit).

I love seeing the CSS Cascade Layers guide in there, too! I had so much fun working with Miriam on it. If you didn’t know it, she’s an editor for the spec. It’s a treat (and honor, really) to host her work here and make it available for us all to bookmark and reference.

Here’s 11-20 for kicks:

  1. Animation With Basic JavaScript —Md Shuvo
  2. Flutter For Front-End Web Developers —Obumuneme Nwabude
  3. CSS Grid and Custom Shapes, Part 1 — Temani Afif
  4. Write HTML, the HTML Way (Not the XHTML Way) — Jens Oliver Meiert
  5. A Whistle-Stop Tour of 4 New CSS Color Features — Chris Coyier
  6. Cool Hover Effects That Use Background Properties — Temani Afif
  7. Let’s Create a Tiny Programming Language — Md Shuvo
  8. Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D — Temani Afif
  9. A Perfect Table of Contents With HTML + CSS — Nicholas C. Zakas
  10. CSS-Based Fingerprinting — Chris Coyier

All posts that were published in 2022 make up 4.8m pageviews, or about 7.8% of all pageviews. Our most viewed article is always the ol’ Flexbox guide which garnered 5.8m views this year. I’d love to see our new content outpace that one item, and I believe that would’ve easily happened if we’d kept up the pace of publishing. Back of the napkin math here, but we may have been around 67m pageviews if we had published 540 more articles to match last year’s number of published articles.

If we take a few steps back, then we can see the most-viewed articles from the past year, regardless of when they were published:

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

Yep, nearly identical to last year. And the year before. And the year before. And… well, almost. “Gradient Borders in CSS” is new, bumping the box-shadow property off the list. Everything else from the four spot on merely swapped places.

Speaking of the properties in the Almanac, I wanna see what y’all referenced most this past year:

  1. ::after / ::before
  2. transition
  3. box-shadow
  4. scrollbar
  5. justify-content
  6. flex-wrap
  7. gap
  8. overflow-wrap
  9. animation
  10. white-space

One pseudo at the top and nothing but properties after that. Interesting, given that relational pseudo selector functions like :has(), :is(), and :where() are new kids on the block.

Newsletter

The numbers here are way too messy to draw any insightful conclusions. After moving to DigitalOcean, we had to scrub our list of 91K+ subscribers for compliance purposes and the number plummeted as a result. If you were dropped from the list, you can re-subscribe here.

The good news? We’re still doing the newsletter! We actually fired it back up in August after a five-month hiatus. We were on a weekly cadence, but are at once a month now while yours truly is authoring it. I sure hope to bump it back to a weekly publication. (I miss you, Robin!)

Site updates

It’s been mostly about keeping the ship afloat, if I’m being honest. Other than some minor tweaks and maintenance, the site is pretty much where it was at this time last year.

That will change big time in 2023. If you’ve been keeping up with our monthly Behind the CSScenes updates, then you know that we’re planning to migrate CSS-Tricks from WordPress to the same homespun CMS that DigitalOcean uses for all of its (stellar) community content.

That work kicked off a couple months ago and should be done within the first half of the year. You can bet that we’ll keep you updated along the way. Besides a fresh design and a new back-end, it should be business as usual. If you have any questions about that work and what it means for your favorite front-end publication, please do hit me up in the comments or shoot me an email.

If you haven’t seen it yet, here are a few comps that our designer, Logan Liffick, put together:

  • Slideshow of Redesign Preview

2021 goal review

Oy, I’m hesitant to even look. All the effort it’s taken to integrate with DigitalOcean and find a new rhythm dominated everybody’s time, leaving precious little to take a crack at Chris’ goals, which were:

  • More SEO focus. I’ll give us a passing grade here. The truth is that Chris and I were already digging our heels into this prior to the acquisition. We replaced the Yoast SEO plugin with RankMath, taking advantage of its in-editor tools to help us learn how to optimize our posts for search results. And to be clear: it’s less about increasing traffic for more sponsorship revenue than it is recognizing that search is the primary way readers like you find us, and making it easier for you to find what you’re looking for. That’s especially true now that we’re backed by DigitalOcean and rely on sponsorships way less than we used to.
  • 🚫 Another digital book. Swing and a miss! Well, we never actually swung in the first place, or stepped into the batter’s box for that matter. (Is this how sports analogies work?) Chris published a book of The Greatest CSS Tricks in 2020 and made it a perk of being a paid CSS-Tricks subscriber. The idea was to do another one this year, but we got rid of the paid subscriptions and opened The Greatest CSS Tricks up for everyone to enjoy, free of charge.
  • 🚫 More social media experimentation. Nope! But that might be for the best, considering where Twitter is at right this second. We might be forced to experiment in this area next year more out of neccessity than interest. Twitter has always been a drip in the proverbial bucket of CSS-Tricks traffic; so much so that investing in it feels like putting our eggs in the wrong basket, er bucket. I dunno. Part of me just wants to sit on my hands and see how things shake out before deciding on anything new or different.

2023 goal-setting

New year, new goals, right? Allow me to put a bunch of words in the team’s mouth and project what I feel are top priorities for us heading into 2023:

  • A smooth site migration. Nothing would make me happier1 than a hiccup-free move to DigitalOcean’s architecture. But c’mon, we all know something always comes up when it’s go time. This site has 7,000+ articles that have been written over 15 years, and there have been 19 versions of the site in that timespan. There are so many custom post types, custom fields, page templates, functionality plugins, integrations, and a database that’s over 6GB to move over and map to an existing system. Good thing we have a team of top-notch developers here to take it on!
  • Publish 1-2 new guides. I’d love to aim higher, actually. We went from nine new guides in 2020 to a paltry one new guide in 2021, and another one this past year: Miriam’s Complete Guide to CSS Cascade Layers. I have a list of 10 more that I’d love to write, but think we’ll set the bar super low given our recent track record. I mentioned earlier that I’d love to incorporate Mojtaba’s work in the Almanac into the existing CSS Grid guide. That’s no small amount of work and I’d count it towards the goal if we can pull it off.
  • Expand the Almanac. This is my moonshot. I’d love to see more types of documentation in there. We have pseudo-selectors and properties, which is great and always has been. But, geez, think of all the other things we could have in there: functions, at-rules, units, selectors, property values, etc. We’re only scratching the surface of what could possibly go in there! If we get even one of those, I’d be in place-self: heaven.

Thank you so, so, so much!

This is my dream job and I wouldn’t have it without readers like you. I can’t believe it’s been eight years since my very first article was published and that I’m still here, working with learning from the brightest minds in our field. I could ramble (more than I already have) on how much the CSS-Tricks community means to me, but what it really comes down to is… thank you, thank you, thank you. From the bottom of my heart, thank you.

And thanks to all the fine folks here at DigitalOcean who have made a great home for CSS-Tricks. Extra special high-fives to Haley Mills, Sydney Rossman Reich, Bradley Kouchi, Karen Digi, David Berg, Matt Crowley, Logan Liffick, and Kirstyn Kellogg for getting me personally up to speed and making me feel so welcome here. It’s a great place to be.

Forward, we go!

  1. Well, as happy as a WordPress fanboy like myself can be. ↩️

Thank You (2022 Edition) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

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.

Thank you from Chris. Clear Ornaments hanging from the sky with gold glitten in them. A cookie candy cane embedded into the ground. Little tiny pine trees with gold stands and frosted white tips.

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

  1. To the brain, reading computer code is not the same as reading language — Geoff Graham 
  2. In Praise of the Unambiguous Click Menu — Mark Root-Wiley 
  3. aspect-ratio — Geoff Graham 
  4. Theming and Theme Switching with React and styled-components — Tapas Adhikary 
  5. The Holy Grail Layout with CSS Grid — Chris Coyier
  6. Creating the Perfect Commit in Git — Tobias Günther 
  7. What if… you could use Visual Studio Code as the editor of in-browser Developer Tools? — Geoff Graham 
  8. Is CSS a Programming Language? — Chris Coyier
  9. A Love Letter to HTML & CSS — Ashley Kolodziej 
  10. 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 EntryPublished
scale2021-11-10
translate2021-11-09
rotate2021-11-08
mask-border2021-11-03
padding-inline2021-09-23
overscroll-behavior2021-09-14
border-block2021-09-02
outline-color2021-09-01
accent-color2021-08-26
block-size2021-08-25
outline-style2021-08-16
outline-width2021-08-10
text-emphasis2021-08-04
::backdrop2021-08-03
hyphenate-limit-chars2021-07-15
:fullscreen2021-07-14
mask2021-07-02
content-visibility2021-06-21
place-content2021-05-13
mask-composite2021-05-10
:empty2021-04-27
:where2021-03-23
justify-self2021-03-18
mask-type2021-03-02
place-self2021-03-02
:current2021-02-23
:future2021-02-23
border-boundary2021-02-09
mask-mode2021-02-03
caret-shape2021-01-27
caret2021-01-27
aspect-ratio2021-01-20
margin-inline2021-01-14
margin-inline-end2021-01-14
margin-block-start2021-01-08
margin-block-end2021-01-08
margin-block2021-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!

🙏


Thank You (2021 Edition) originally published on CSS-Tricks

Thank You (2020 Edition)

Heck of a year, eh? Like we do every year, I’d like to give you a huge thanks for reading CSS-Tricks, and recap the year. More downs than ups, all told. Here at CSS-Tricks, it was more of a wash. Allow me to me share some numbers, milestones, and thoughts with you about our journey of 2020.

Let’s do the basic numbers

The site saw 94m pageviews this year. Last year we lost a smidge of pageviews (from 91m to 90m), so it’s nice to see that number go back up again, setting a new high record. Now I don’t have to tell myself stories like “jeez usage of browser extensions that block Google Analytics must be up.” Hitting 100m pageviews will be a nice milestone some future year. This number, long term, climbs very slowly. It’s a good reminder to me how much time, money, and energy are required to just maintain the traffic to a content site, let alone attempt to drive growth.

I have Cloudflare in front of the site this year. I think that’s a good idea generally, but especially now that they have specific technology to make it extra good. I’m a fan of pushing as much to the edge as we can, and now it’s not only static assets that are CDN-served but the content as well.

I mention that because now I have access to Cloudflare analytics, so I can compare across tools. I can’t see a whole year of data on Cloudflare, but comparing last month’s unique visitors between the two services, I see 6,847,979 unique visitors on Cloudflare compared to 6,125,272 sessions (or 7,449,921 unique page views — I’m not sure which is directly comparable) on Google Analytics. They seem pretty close. Closer than I thought they would be, since Google Analytics requires client-side JavaScript and Cloudflare analytics are, presumably, gathered at the DNS level, and thus not blockable like client-side JavaScript. I’ve turned off the WordPress-powered analytics for now, as having three places for analytics seemed a bit much, although I might flip them back on because, without them, I can’t see top on-site search results, which I definitely like to have.

Traffic that comes from organic¹ search was 77.7% this year, versus 80.6% last year. A 3% swing feels pretty large, yet almost entirely accounted for by a 3% swing from 9% to 12% in “direct” traffic. I have no idea what to make of that, but I suppose I don’t mind a better diversification in sources.

I find these end-of-year looks at the numbers sorta fun, but I’m generally not a big analytics guy. Last year I wrote:

There is a bunch of numbers I just don’t feel like looking at this year. We’ve traditionally done stuff like what countries people are from, what browsers they use (Chrome-dominant), mobile usage (weirdly low), and things like that. This year, I just don’t care. This is a website. It’s for everyone in the world that cares to read it, in whatever country they are in and whatever browser they want to.

I feel even more apathetic toward generalized analytics numbers this year. I think analytics are awesome when you have a question in mind you want an answer to, where the numbers help find that answer. Or for numbers that are obviously important and impactful to your site that you determined for yourself. Just poking around at numbers can fool you into thinking you’re gathering important insights and making considered decisions when you’re kinda just picking your nose.

One question that does interest me is what the most popular content is by traffic (we’ll get to that in a bit). Looking at the most popular content (by actual traffic) gives me a sense of what brings people here. Bringing traffic to the site is a goal. While we don’t generally sell sponsorship/advertising based on page views directly, those numbers matter to sponsors and fairly correlate directly to what we can charge.

Another bit of data I care about is what people search for that bring them to the site. Here’s how that breaks down:

  • Top 10: Various combinations of terms that have to do with flexbox and grid layout
  • Mixed into the top 20: Various alterations of the site’s name

From there, 10-100 are “random specific CSS things.” Beyond 100 is where SVG, JavaScript, design stuff, and CSS are sprinkled into the mix. The 251st ranked search term is the first time React shows up. The insight here is that: (1) our layout guides continue to do very well, (2) a lot of people like to get to the site first, then find what they need, and (3) searches for library-specific content isn’t a particularly common way to land here.

Top posts of the year

Thanks to Jacob, we can look at analytics data based on the year the content was written (and a few other bits of metadata).

Here’s an interesting thing. In 2019, articles written in 2019 generated about 6.3m page views. Those same articles, in 2020, generated 7.3m page views. Neat, huh? The articles drove more traffic as they aged.

Articles written in 2020 generated 12m pageviews. Here’s the top 10:

  1. CSS-Only Carousel
  2. Fluid Width Video (cheat, as this was written a few years ago as a stand-alone page, and I only moved it to the blog in 2020)
  3. How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
  4. A Complete Guide to Links and Buttons
  5. The Hooks of React Router
  6. A Complete Guide to Dark Mode on the Web
  7. Neumorphism and CSS
  8. A Complete Guide to Data Attributes
  9. Why JavaScript is Eating HTML
  10. Front-End Challenges

Interesting backstory on that list. I dug into Google Analytics and created that Top 10 list based on the data it was showing me in a custom report, which Jacob taught me to do. Serendipitously, Jacob emailed me right after that to show me the Top 10 that he calculated, and it was slightly different than mine. Then I went back and re-ran my custom report, and it was slightly different than both the others. Weird! Jacob knew why. When you’re looking at a huge dataset like this in Google Analytics, they will only sample the data used for the report. It will show you a “yellow badge” and tell you what percentage of the data the report is based on. 500,000 sessions is the max, which is only 0.7% of what we needed to look at. That’s low enough that it accounted for the different lists. Jacob had already done some exporting and jiggering of the data to account for that, so the above list is what’s accurate to 100% of all sessions.

The top articles on the entire site from any year:

  1. The Complete Guide to Flexbox
  2. The Complete Guide to Grid
  3. Using SVG
  4. Perfect Full Page Background Images
  5. The Shapes of CSS
  6. Media Queries for Standard Devices
  7. Change Color of SVG on Hover
  8. CSS Triangle
  9. How to Scale SVG
  10. Using @font-face

Nothing from the Almanac made the top 10, but interestingly, right after that, the next 20 are so are heavily sprinkled with random articles from there. All told, the Almanac is about 14.8% of all traffic.

Two other things that I think are very cool that we did with content is:

  1. Published Jay Hoffman’s series on Web History, which include audio adaptations from Jeremy Keith that are served as a podcast.
  2. Published our end-of-year series like we did last year.

One of the many reasons I love being on WordPress is how easy it is to spin up series like these. All we did was toss up a category-specific template file and slapped on a little custom CSS. That gives the posts a cool landing page all to themselves, but are still part of the rest of the “flow” of the site (RSS, search, tags, etc.).

COVID

Perhaps the slight increase in traffic was COVID-related? With more people turning to coding as a good option for working from home, maybe there are more people searching for coding help. Who knows.

What we definitely found was that nearly every sponsor we work with, understandably, tightened their belt. Add in advertising plans with us that were reduced or canceled and, as a rough estimate, I’d say we’re down 25% in sponsorship revenue. That would be pretty devastating except for the fact that we try not to keep too many eggs in one basket.

Feels like a good time to mention that if your company is doing well and could benefit from reaching people who build websites, let’s talk sponsorship.

I’m trying to diversify revenue somewhat, even on this site alone. For example…

eCommerce

We’ve been using WooCommerce here to sell a couple of things.

Posters, mainly. A literal physical bit of printed paper sent through the post to you. The posters are unique designs made from the incredible illustrations that Lynn Fisher created for the flexbox and grid guides. We essentially “drop ship” them, meaning they are printed and shipped on-demand by another company. So, you buy them from this site, but another company takes it from there and does all the rest of it. That’s appealing because the amount of work is so low, but there are two major downsides: (1) Customer support for the orders becomes our problem and I’d say ~20% of orders need some kind of support, and (2) the profit margin is fairly slim compared to what it would be if we took on more of the work ourselves.

We also sell MVP Supporter memberships, which are great in that they don’t require much ongoing work. The trick there is just making sure it is valuable enough for people to buy, which we’ll have to work more on over time. For now, you basically get a book, video downloads, and no ads.

Loose math, eCommerce made up 5% of the lost revenue. Long way to go there, but it’s probably worth the journey as my guess is that this kind of revenue is less volatile.

I’m also still optimistic about Web Monetization in the long-term (here’s the last post I wrote on it). But right now, it is not a solution that makes for a significant new revenue stream. Optimistically, it’s something like 0.05% of revenue.

Social media

As far a website traffic driver goes, social media isn’t particularly huge at 2.2% of all traffic (down from 2.3% last year). That’s about where it always is, whether or not we put much effort into it over the course of a year, which is exactly why I try not to spend energy there. What little effort we do expend, 95% of it is toward Twitter. We lean on Jetpack’s social automation features, mostly. It is still cool to have @css as a handle, and we are closing in on half a million followers. You’d think that would be worth something. We’ll have to figure that out someday.

When we hand-write Tweets (rare), those are still the ones with the most potential. I only do that when it feels like something fun to do, because even though they can get the most engagement, the time/value thing still just doesn’t make it worthwhile.

Example hand-written tweet

Most of our tweets are just auto-generated when a new post is published. And we’ve been doing that for so long, I think that’s what the Twitter followers largely expect anyway, and that’s fine. We do have the ability to customize the Tweet before it goes out, which we try to, but usually don’t.

Example Auto-Generated Tweet

The other 5% of effort is Instagram just because it’s kinda fun. I don’t even wanna think about trying to extract direct value from Instagram. Maybe if we had a lot more products for direct sale it would make sense. But for now, just random tips and stuff to hold an audience.

Example Instagram Post

Screencasts

I did 22 screencasts this year. That’s a lot compared to the last many years! I’m not sure if I’ll be as ambitious in 2021, but I suspect I might be, because my setup at my desk is getting pretty good for doing them and my editing skills are slowly improving. I enjoy doing them, and it’s an occasional income stream (my favorite being pairing up with someone from a company and digging into their technology together). Plus, we got that cool new intro for our videos done by dina Amin.

The screencasts are published on the site and to iTunes as a videocast, but the primary place people watch is YouTube. I guess we could consider YouTube “social media” but I find that screencasts are more like “real content” in a way that I don’t with other social media. They are certainly much more time-consuming to produce and I hope more evergreen than a one-off tweet or something.

Newsletter

We hit 81,765 subscribers to the newsletter. On one hand, that’s a respectable number. On the other, it’s far too low considering how gosh darn good it is! I was hoping we’d hit 100k this year, but I didn’t actually do all that much to encourage signups, so that’s on me. I don’t think we missed a single week, so that’s a win, and considering we were at 65,000 last year, that’s still pretty good growth.

Comments

Y’all left 4,322 comments on the site this year. That’s down a touch from 4,710, but still decent averaging almost 12 a day.

I rollercoaster emotionally about comments. One day thinking they are too much trouble, requiring too much moderation and time to filter the junk. The vitriol can be so intense (on a site about code, wow) that some days I just wanna turn them off. Other times, I’m glad for the extra insight and corrections. Not to mention, hey, that’s content and content is good. We’ve never not had comments, so, hey, let’s keep ’em for now.

I absolutely always encourage your helpful, insightful, and kind comments, and promise to never publish rude or wrong comments (my call).

The forums completely shut down this year (into “read only” mode), so commenting activity from that didn’t exactly make its way over to the blog area. Closing the forums still feels… weird. I liked having a place to send (especially beginners) to ask questions. But, we just do not have the resources (or business model) to support safe and active forums. So closed they will remain, for now.

Goal review

  • 100k on email list. Fail on that one. That was kind of a moonshot anyway, and we never executed any sort of plan to help get there. For example, we could encourage it on social media more. We could attempt to buy ads elsewhere with a call to action to sign up. We could offer incentives to new subscribers somehow. We might do those things, or we might not. I don’t feel strongly enough right now to make it a goal for next year.
  • Two guides. We crushed this one. We published 9 guides. I consider this stuff our most valuable content. While I don’t want to only do this kind of content (because I think it’s fun to think of CSS-Tricks as a daily newspaper-style site as well), I want to put most of our effort here.
  • Have an obvious focus on how-to referential technical content. I think we did pretty good here. Having this in mind all the time both for ourselves and for guest posts meant making sure we were showcasing how to use tech and less focus on things like guest editorials which are, unfortunately, our least useful content. I’d like to be even stricter on this going forward. We’re so far along in our journey on this site. The expectation people have is that this site has answers for their technical front-end questions, so there is no reason not to lean entirely into that.
  • Get on Gutenberg. We also crushed it here. I think in the first month of the year I had us using Gutenberg on new content, and within a few months after that, we had Gutenberg enabled for all posts. It was work! And we still have a long way to go, as most posts on the site haven’t been “converted” into blocks, which is still not a brainless task. But, I consider it a fantastic success. I think Gutenberg is largely a damn pleasure to work with, making content authoring far more pleasurable, productive, and interesting.

New goals

  • Three guides. I know we did nine this year, but the goal was only two. I actually have ideas for three more, so I’ll make three the goal. Related side goal: I’d like to try to make mini-books out of some of these guides and either sell them individually or make it part of the MVP Supporter subscription.
  • Stay focused on how-to technical content around our strengths. Stuff like useful tips. Technical news with context. Advice on best-practices. I want to reign us in a bit more toward our strengths. HTML, CSS, and JavaScript stuff is high on that list of strengths, but not every framework, serverless technology, or build tool is. I’d like us to be more careful about not publishing things unless we can strongly vouch for it.
  • Complete all missing Almanac entries. There are a good 15-20 Almanac articles that could exist that don’t yet. Like we have place-items in there, but not place-content or place-self. Then there is esoteric stuff, like :current, :past, and :future time-dimensional pseudo-classes which, frankly, I don’t even really understand but are a thing. If you wanna help, please reach out.

Wrapping up

Thank you, again, for being a reader of this site. I hope these little peeks at our business somehow help yours. And I really hope 2021 is better than 2020, for all of us.

🧡

  1. I actually prefer my search grass-fed in addition to organic, but ok. ↩️

The post Thank You (2020 Edition) appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Thank You (2019 Edition)

One of our yearly traditions here is to thank all y'all CSS-Tricks readers at the passing of a new year. It means a lot to me that people come here and read the words I write, and the words of all our staff and guest authors that contribute here as well.

Thank you!

Plus, we dig into the numbers this time of year. I've always tried to be open about the analytics on this site. Looking at them year after year always serves up a good reminder: niche blogging is a slow game. There's no hockey-stick growth around here. Never has been, never will be. The trick is to build slowly over time, taking care of the site, investing in it, working hard, and with some luck, numbers trend upward. This year, overall traffic didn't even do that. Sometimes you gotta fight for what you've got! Growth came in other areas though. Let's take a gander.

It was January 1st, 2019 that the current design of this site (v17) debuted, so this entire year overlaps perfectly with that. I'll certainly be tempted to release major iterations with that same timing in the future for comparison sake.

Overall numbers

Google Analytics is showing me 90.3 million pageviews, which is a bit of a decline from 2018 at over 91 million. A 1% decline. Not a big problem, but of course I'd way rather see a 1% increase instead. We'll take that as a kick in the butt to produce a stronger year of content to hopefully more than win it back.

Looks like we published 726 articles over the year, which includes link posts and sponsored links. A good leap from 636 last year and 595 the year before that. Clearly quantity isn't the trick to traffic for us.

I don't know that we'll slow down necessarily. I like the fact that we're publishing multiple times a day with noteworthy links because I like to think of us as a timely industry publication that you can read like a daily or weekly newspaper in addition to being an evergreen reference. I don't think we'll invest in increasing volume, though. Quality moves the needle far more than quantity for this gang.

There is a bunch of numbers I just don't feel like looking at this year. We've traditionally done stuff like what countries people are from, what browsers they use (Chrome-dominant), mobile usage (weirdly low), and things like that. This year, I just don't care. This is a website. It's for everyone in the world that cares to read it, in whatever country they are in and whatever browser they want to. We still track those numbers (because Google Analytics automatically does), so we can visit them again in the future and look historically if it gets interesting again. Taking a quick peak, however, it's not much different than any other year.

Performance numbers are always fascinating. Google Analytics tells me the average page load time is 5.32s. On my fast home internet (even faster at the office), the homepage loads for me in 970ms, but it's more like 30 seconds when throttled to "Slow 3G." "Fast 3G" is 8 seconds. Sorta makes sense that most visitors are on faster-than-3G connections since the traffic is largely skewed toward desktop. No cache, we're talking 54 requests (including ads) and 770KB (fits on a floppy). It's good enough that I'm not itching to dig into a performance sprint.

Top posts of the year

You'd think we would do a section like this ever year, but because of our URL structure, I haven't had easy access to figure this out. Fortunately, in March 2019, Jacob Worsøe helped us add some Custom Dimensions to our Google Analytics so we can track things like author and year with each pageview.

That means we can find things, like the most popular articles written in 2019, rather than just the most popular articles looked at in 2019 — regardless of when they were was written. Here's a graph Jacob sent:

Here's that list in text:

  1. The Great Divide
  2. Change Color of SVG on Hover
  3. New ES2018 Features Every JavaScript Developer Should Know
  4. An Introduction to Web Components
  5. Where Do You Learn HTML & CSS in 2019?
  6. The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
  7. Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
  8. How to Section Your HTML
  9. Prevent Page Scrolling When a Modal is Open
  10. CSS Animation Libraries

8.25% of traffic came from articles written this year. If you look at where these articles fall on the list of all URLs in 2019 (not just those published in 2019), the top article starts at #75! Hard to compete with older articles that have had time to gather SEO steam. This kind of thing makes me want to get re-focused on referential content even more.

Interesting that our top article was editorial, but everything else is referential. I like a little editorial here and there, but clearly our bread and butter is how-to technical stuff.

Search

There are two aspects of search that are interesting to me:

  1. What do people search for right here on the site itself?
  2. What search terms do people use on Google to find this site?

On-site search is handled by Jetpack's Elasticsearch feature, which I'm still quite liking (they are a sponsor, but it's very true). This also means we can track its usage pretty easily using the analytics on my WordPress.com dashboard. I also installed a Search Meter plugin to track search form entries. I can look at Google searches through the SiteKit plugin, which pulls from Google Search Console.

Here are all three, with duplicates removed.

Jetpack Search Data Search Meter Search Data Google Search Data
1 amazon (?!) flexbox flexbox
2 flexbox grid css grid
3 css tricks flex css tricks
4 flexbox guide animation css important
5 css grid svg css triangle
6 css flex position mailto link
7 grid guide css grid vertical align css
8 css important css css comment
9 the great divide border css shapes
10 css shapes background css background image opacity

There is a bit of a fat head of traffic here with our top 10 pages doing about 10% of traffic, which syncs up with those big searches for stuff like flexbox and grid and people landing on our great guides. If you look at our top 100 pages, that goes out to about 38% of traffic, and articles past that are about 0.1% of traffic and go down from there. So I'd say our long tail is our most valuable asset. That mass of articles, videos, snippets, threads, etc. that make up 62% of all traffic.

Social media

It's always this time of year I realize how little social media does for our traffic and feel stupid for spending so much time on it. We pretty much only do Twitter and it accounts for 1% of the traffic to this site. We still have a Facebook page but it's largely neglected except for auto-posting our own article links to it. I find value in Twitter, through listening in on industry conversations and having fun, but I'm going to make a concerted effort to spend less time and energy on our outgoing social media work. If something is worth tweeting for us, it should be worth blogging; and if we blog it, it can be auto-tweeted.

But by way of numbers, we went from 380k followers on @css to 430k. Solid growth there, but the rate of growth is the same every year, to the point it's weirdly consistent.

I also picked up an Instagram account this year. Haven't done much there, but I still like it. For us, I think each post on Instagram can represent this little opportunity to clearly explain an idea, which could ultimately turn into a nice referential book or the like someday. A paultry 1,389 followers there.

Newsletter

I quite like our newsletter. It's this unique piece of writing that goes out each week and gives us a chance to say what we wanna say. It's often a conglomeration of things we've posted to the site, so it's an opportunity to stay caught up with the site, but even those internal links are posted with new commentary. Plus, we link out to other things that we may not mention on the site. And best of all, it typically has some fresh editorial that's unique to the newsletter. The bulk of it is done by Robin, but we all chip in.

All that to say: I think it's got a lot of potential and we're definitely going to keep at it.

We had the biggest leap in subscribership ever this year, starting the year at 40k subscribers and ending at 65k. That's 2.5× the biggest leap in year-over-year subscribers so far. I'd like to think that it's because it's a good newsletter, but also because it's integrated into the site much better this year than it ever has been.

Comments

Oh, bittersweet comments. The bad news is that I feel like they get a little worse every year. There is more spam. People get a little nastier. I'm always teetering on the edge of just shutting them off. But then someone posts something really nice or really helpful and I'm reminded that we're a community of developers and I love them again.

4,710 approved comments. Up quite a bit from 3,788 last year, but still down from 5,040 in 2017. Note that these are approved comments, and it's notable that this entire year we've been on a system of hand-approving all comments before they go out. Last year, I estimated about half of comments make it through that, and this year I'd estimate it at more like 30-40%. So, the straight-up number of comments isn't particularly interesting as it's subject to our attitude on approval. Next year, I plan to have us be more strict than we've ever been on only approving very high-quality comments.

I'm still waiting for WordPress to swoon me with a recommitment to making commenting good again. ;)

Forums

There were a couple of weeks just in December where I literally shut down the forums. They've been teetering on end-of-life for years. The problem is that I don't have time to tend to them myself, nor do I think it's worth paying someone to do so, at least not now. Brass tacks, they don't have any business value and I don't extract enough other value out of them to rationalize spending time on them.

If they just sat there and were happy little forums, I'd just leave them alone, but the problem is spam. It was mostly spam toward the end, which is incredibly tedious to clean up and requires extra human work.

I've kicked them back on for now because I was informed about a spam-blocking plugin that apparently can do incredible work specifically for bbPress spam. Worth a shot!

Interestingly, over the year, the forums generated 7m pageviews, which is 7.6% of all traffic to the site. Sorta makes sense as they are the bulk of the site URLs and they are user-generated threads. Long tail.

Goal review

Polish this new design. Mixed feelings. But I moved the site to a private GitHub repo half-way through the year, and there have been 195 commits since then, so obviously work is getting done. I'll be leaving this design up all of 2020 and I'd like to make a more concerted effort at polish.

Improve newsletter publishing and display. Nailed this one. In March, we moved authoring right here on the site using the new Gutenberg editor in WordPress. That means it's easier to write while being much easier to display nicely on this site. Feels great.

☯️ Raise the bar on quality. I'm not marking it as a goal entirely met because I'm not sure we changed all that much. There was no obvious jump upward in quality, but I think we do pretty good in general and would like to see us continue to hold steady there.

Better guides. We didn't do all that much with guides. Part of the problem is that it's a little confusing. For one thing, we have "guides" (e.g. our guide to flexbox) which is obviously useful and doing well. Then there are "Guide Collections" (e.g. our Custom Properties Guide) which are like hand-picked and hand-ordered selections of articles. I'm not entirely sure how useful those hand-curated guides are, especially considering we also have tag pages which are more sortable. The dudes with the biggest are the hand-written articles-on-steroids types, so that's worth the most investment.

New goals

100k on email list. That would be a jump of 35k which is more than we've ever done. Ambitious. Part of this is that I'm tempted to try some stuff like paid advertising to grow it, so I can get a taste for that world. Didn't Twitter have a special card where people could subscribe right from a Tweet? Stuff like that.

Two guides. The blog-post-on-steroids kind. The flexbox one does great for us, traffic-wise, but I also really enjoy this kind of creative output. I'll be really sad if we can't at least get two really good ones done this year.

Have an obvious focus on how-to referential technical content. This is related to the last goal, but goes for everyday publishing. I wouldn't be mad if every darn article we published started with "How To."

Get on Gutenberg. The new WordPress block editor. This is our most ambitious goal. Or at least I think it is. It's the most unknown because I literally don't know what issues we're going to face when turning it on for more than a decade's worth of content that's been authored in the classic editor. I don't think it's going to hurt anything. It's more a matter of making sure:

  1. authoring posts has all the same functionality and conveniences as we have now,
  2. editing old posts doesn't require any manual conversion work, and
  3. it feels worth doing.

But I haven't even tried yet, so it's a don't-know-what-I-don't-know situation.


Again, thanks so much!

I was thinking about how stage musicians do that thing where they thank their fans almost unfailingly. Across any genre. Even if they say hardly anything into a microphone during the performance, they will at least thank people for coming, if not absolutely gush appreciation at the crowd. It's cliché, but it's not disingenuous. I can imagine it's genuinely touching to look out across a room of people that all choose to spend a slice of their lives listening to you do your thing.

I feel that way here. I can't see you as easily as looking out over a room, but I feel it in the comments you post, the emails you send, the tweets you tagged us in, and all that. You're spending some of your life with us and that makes me feel incredibly grateful. Cheers.

🍻

The post Thank You (2019 Edition) appeared first on CSS-Tricks.