Danke (2020 Ausgabe)

Was für ein Jahr, was? Wie jedes Jahr möchte ich Ihnen ein riesiges Dankeschön für das Lesen von CSS-Tricks aussprechen und das Jahr rekapitulieren. Alles in allem mehr Tiefen als Höhen. Hier bei CSS-Tricks war es eher ein Ausgleich. Erlauben Sie mir, Ihnen einige Zahlen, Meilensteine und Gedanken zu unserer Reise im Jahr 2020 mitzuteilen.

Lassen Sie uns die grundlegenden Zahlen betrachten

Die Seite verzeichnete in diesem Jahr **94 Mio.** Seitenaufrufe. Letztes Jahr haben wir ein kleines bisschen an Seitenaufrufen verloren (von 91 Mio. auf 90 Mio.), daher ist es schön zu sehen, dass die Zahl wieder steigt und einen neuen Rekord aufstellt. Jetzt muss ich mir keine Geschichten mehr erzählen wie: *"Mensch, die Nutzung von Browsererweiterungen, die Google Analytics blockieren, muss zugenommen haben."* 100 Mio. Seitenaufrufe zu erreichen, wird in Zukunft ein schöner Meilenstein sein. Diese Zahl steigt langfristig sehr langsam. Das ist eine gute Erinnerung für mich daran, wie viel Zeit, Geld und Energie erforderlich ist, um den Traffic auf einer Content-Website einfach nur **aufrechtzuerhalten**, geschweige denn Wachstum anzustreben.

Ich habe dieses Jahr Cloudflare vor der Seite. Ich denke, das ist im Allgemeinen eine gute Idee, aber besonders jetzt, wo sie spezielle Technologie haben, um es besonders gut zu machen. Ich bin ein Fan davon, so viel wie möglich zum Edge zu verschieben, und jetzt werden nicht nur statische Assets per CDN ausgeliefert, sondern auch der Inhalt.

Ich erwähne das, weil ich jetzt Zugriff auf Cloudflare-Analysen habe und so verschiedene Tools vergleichen kann. Ich kann keine vollständigen Jahresdaten von Cloudflare einsehen, aber im Vergleich der eindeutigen Besucher des letzten Monats zwischen den beiden Diensten sehe ich **6.847.979** eindeutige Besucher auf Cloudflare im Vergleich zu 6.125.272 Sitzungen (oder 7.449.921 eindeutigen Seitenaufrufe – ich bin mir nicht sicher, was direkt vergleichbar ist) auf Google Analytics. Sie scheinen ziemlich nah beieinander zu liegen. Näher, als ich gedacht hätte, da Google Analytics clientseitiges JavaScript erfordert und Cloudflare-Analysen vermutlich auf DNS-Ebene gesammelt werden und somit nicht blockierbar sind wie clientseitiges JavaScript. Ich habe die WordPress-gestützten Analysen vorerst ausgeschaltet, da es **etwas viel** war, drei Orte für Analysen zu haben, obwohl ich sie vielleicht wieder einschalten werde, denn ohne sie sehe ich keine Top-Suchergebnisse auf der Website, die ich unbedingt haben möchte.

Der Traffic, der aus der organischen¹ Suche stammt, lag in diesem Jahr bei **77,7 %**, gegenüber 80,6 % im letzten Jahr. Eine Schwankung von 3 % fühlt sich ziemlich groß an, wird aber fast vollständig durch eine Schwankung von 9 % auf 12 % beim „direkten“ Traffic ausgeglichen. Ich habe keine Ahnung, was ich davon halten soll, aber ich schätze, eine bessere Diversifizierung der Quellen stört mich nicht.

Ich finde diese Jahresendbetrachtungen der Zahlen irgendwie unterhaltsam, aber im Allgemeinen bin ich kein großer Analytics-Typ. Letztes Jahr schrieb ich

Es gibt eine Menge Zahlen, die ich mir dieses Jahr einfach nicht ansehen möchte. Wir haben traditionell Dinge wie die Herkunftsländer der Leute, die von ihnen genutzten Browser (Chrome-dominant), die mobile Nutzung (seltsam niedrig) und ähnliches gemacht. Dieses Jahr ist mir das einfach egal. Das ist eine Website. Sie ist für jeden auf der Welt, der sie lesen möchte, egal in welchem Land und mit welchem Browser.

Ich fühle mich dieses Jahr noch apathischer gegenüber verallgemeinerten Analytics-Zahlen. Ich denke, Analysen sind großartig, wenn man eine **Frage im Kopf** hat, die man beantworten möchte, und die Zahlen helfen, diese Antwort zu finden. Oder für Zahlen, die **offensichtlich wichtig und wirkungsvoll** für Ihre Website sind und die Sie selbst bestimmt haben. Einfach nur Zahlen herumzustöbernd kann Sie dazu verleiten zu denken, dass Sie wichtige Erkenntnisse sammeln und überlegte Entscheidungen treffen, wenn Sie eigentlich nur in Ihrer Nase bohren.

Eine Frage, die mich **wirklich** interessiert, ist, welche Inhalte am beliebtesten nach Traffic sind (dazu kommen wir gleich). Die beliebtesten Inhalte (nach tatsächlichem Traffic) zu betrachten, gibt mir ein Gefühl dafür, was die Leute hierher bringt. Traffic auf die Seite zu lenken, **ist** ein Ziel. Auch wenn wir Sponsoring/Werbung nicht direkt nach Seitenaufrufen verkaufen, sind diese Zahlen für Sponsoren wichtig und korrelieren direkt damit, was wir verlangen können.

Ein weiterer Datenpunkt, der mir wichtig ist, ist, wonach die Leute suchen, was sie auf die Seite bringt. Hier ist die Aufschlüsselung:

• Top 10: Verschiedene Kombinationen von Begriffen, die mit Flexbox und Grid-Layout zu tun haben
• Im oberen Bereich der Top 20: Verschiedene Variationen des Namens der Website

Von dort bis 10-100 sind es „zufällige spezifische CSS-Dinge“. Über 100 werden SVG, JavaScript, Design-Sachen und CSS eingemischt. Der 251. Rang bei den Suchbegriffen ist das erste Mal, dass React auftaucht. Die Erkenntnis hier ist: (1) unsere Layout-Anleitungen sind weiterhin sehr erfolgreich, (2) viele Leute kommen zuerst auf die Seite, **dann** finden sie, was sie brauchen, und (3) Suchen nach bibliotheksspezifischem Inhalt ist keine besonders übliche Art, hierher zu gelangen.

Top-Beiträge des Jahres

Dank Jacob können wir uns die Analysedaten **nach dem Jahr, in dem der Inhalt geschrieben wurde** (und einigen anderen Metadaten) ansehen.

Hier ist etwas Interessantes. Im Jahr 2019 generierten Artikel, die **2019 geschrieben wurden**, etwa **6,3 Mio.** Seitenaufrufe. Dieselben Artikel generierten 2020 **7,3 Mio.** Seitenaufrufe. Nett, oder? Die Artikel brachten mehr Traffic, je älter sie wurden.

Artikel, die 2020 geschrieben wurden, generierten **12 Mio.** Seitenaufrufe. Hier sind die Top 10:

1. Reines CSS-Karussell
2. Fluid Width Video (Cheat, da dieser Artikel vor ein paar Jahren als eigenständige Seite geschrieben und erst 2020 in den Blog verschoben wurde)
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-Herausforderungen

Interessante Hintergrundgeschichte zu dieser Liste. Ich habe mich mit Google Analytics beschäftigt und diese Top-10-Liste anhand der Daten erstellt, die mir in einem benutzerdefinierten Bericht angezeigt wurden, den Jacob mir beigebracht hat. Zufälligerweise hat Jacob mir kurz danach per E-Mail die Top 10 geschickt, die er berechnet hatte, und sie waren leicht unterschiedlich. Dann bin ich zurückgegangen und habe meinen benutzerdefinierten Bericht erneut ausgeführt, und er war leicht unterschiedlich zu beiden anderen. Seltsam! Jacob wusste warum. Wenn man sich ein riesiges Datenset wie dieses in Google Analytics ansieht, werden die Daten für den Bericht nur stichprobenartig erfasst. Es wird eine „gelbe Markierung“ angezeigt und mitgeteilt, auf welchem Prozentsatz der Daten der Bericht basiert. 500.000 Sitzungen sind das Maximum, was nur 0,7 % dessen ist, was wir uns ansehen mussten. Das ist niedrig genug, um die unterschiedlichen Listen zu erklären. Jacob hatte bereits einige Exporte und Datenmanipulationen vorgenommen, um das zu berücksichtigen, sodass die obige Liste die genaue Darstellung von 100 % aller Sitzungen ist.

Die Top-Artikel auf der gesamten Website aus **jedem** Jahr

1. The Complete Guide to Flexbox
2. The Complete Guide to Grid
3. SVG verwenden
4. Perfect Full Page Background Images
5. Die Formen von CSS
6. Media Queries für Standardgeräte
7. Farbe einer SVG bei Hover ändern
8. CSS-Dreieck
9. How to Scale SVG
10. Using @font-face

Nichts aus dem Almanach schaffte es in die Top 10, aber interessanterweise sind direkt danach die nächsten 20 stark mit zufälligen Artikeln daraus durchsetzt. Insgesamt macht der Almanach etwa **14,8 %** des gesamten Traffics aus.

Zwei weitere Dinge, die wir mit Inhalten gemacht haben und die ich sehr cool finde:

1. Veröffentlichung von Jay Hoffmans Serie zur Webgeschichte, die Audioanpassungen von Jeremy Keith enthält und als Podcast angeboten wird.
2. Veröffentlichung unserer Jahresend-Serie, wie wir es im letzten Jahr getan haben.

Einer der vielen Gründe, warum ich gerne auf WordPress bin, ist, wie einfach es ist, solche Serien zu starten. Wir mussten nur eine kategoriespezifische Vorlagendatei hochladen und ein wenig benutzerdefiniertes CSS hinzufügen. Das gibt den Beiträgen eine eigene coole Landingpage, aber sie sind immer noch Teil des restlichen „Flusses“ der Seite (RSS, Suche, Tags usw.).

COVID

Vielleicht war der leichte Anstieg des Traffics auf COVID zurückzuführen? Da immer mehr Menschen das Programmieren als gute Option für die Arbeit von zu Hause aus wählen, gibt es vielleicht mehr Leute, die nach Hilfe beim Programmieren suchen. Wer weiß.

Was wir definitiv festgestellt haben, war, dass fast jeder Sponsor, mit dem wir zusammenarbeiten, verständlicherweise seine Ausgaben reduziert hat. Hinzu kommen Werbepläne mit uns, die reduziert oder storniert wurden, und grob geschätzt würde ich sagen, dass wir bei den Sponsoring-Einnahmen um **25 % zurückgegangen** sind. Das wäre ziemlich verheerend, außer der Tatsache, dass wir versuchen, nicht zu viele Eier in einen Korb zu legen.

Es scheint ein guter Zeitpunkt zu sein, zu erwähnen, dass, wenn Ihr Unternehmen gut läuft und davon profitieren könnte, Leute zu erreichen, die Websites erstellen, lassen Sie uns über Sponsoring sprechen.

Ich versuche, die Einnahmen etwas zu diversifizieren, auch auf dieser Website allein. Zum Beispiel…

E-Commerce

Wir nutzen WooCommerce, um ein paar Dinge zu verkaufen.

Poster, hauptsächlich. Ein buchstäbliches Stück gedrucktes Papier, das Ihnen per Post zugeschickt wird. Die Poster sind einzigartige Designs, die aus den unglaublichen Illustrationen von Lynn Fisher für die Flexbox- und Grid-Anleitungen stammen. Wir versenden sie im Wesentlichen im „Drop-Shipping-Verfahren“, d. h. sie werden von einem anderen Unternehmen auf Abruf gedruckt und versendet. Sie kaufen sie also von dieser Seite, aber ein anderes Unternehmen kümmert sich um den Rest. Das ist attraktiv, da der Arbeitsaufwand gering ist, aber es gibt zwei Hauptnachteile: (1) Kundensupport für die Bestellungen wird zu unserem Problem, und ich würde sagen, dass etwa 20 % der Bestellungen irgendeine Art von Support benötigen, und (2) die Gewinnspanne ist ziemlich gering im Vergleich zu dem, was sie wäre, wenn wir mehr Arbeit selbst übernehmen würden.

Wir verkaufen auch MVP Supporter-Mitgliedschaften, die großartig sind, da sie wenig laufende Arbeit erfordern. Der Trick dabei ist nur, sicherzustellen, dass sie für die Leute kaufenswert sind, woran wir im Laufe der Zeit mehr arbeiten müssen. Vorerst erhalten Sie im Grunde ein Buch, Video-Downloads und keine Werbung. **Update**: Nicht mehr! Alles ist jetzt kostenlos.

Grobe Rechnung, E-Commerce machte **5 %** der verlorenen Einnahmen aus. Ein langer Weg dorthin, aber es ist wahrscheinlich die Reise wert, da meine Vermutung ist, dass diese Art von Einnahmen weniger schwankungsanfällig ist.

Ich bin auch langfristig noch optimistisch, was Web Monetization angeht (hier ist der letzte Beitrag, den ich dazu geschrieben habe). Aber im Moment ist es keine Lösung, die einen signifikanten neuen Einnahmestrom generiert. Optimistisch betrachtet sind es etwa **0,05 %** der Einnahmen.

Soziale Medien

Als Treiber für Website-Traffic sind soziale Medien mit **2,2 %** des gesamten Traffics nicht besonders großartig (gegenüber 2,3 % im letzten Jahr). Das ist ungefähr dort, wo es immer ist, egal ob wir im Laufe des Jahres viel Aufwand betreiben oder nicht, und genau deshalb **versuche** ich, dort keine Energie zu investieren. Von dem geringen Aufwand, den wir betreiben, fließt 95 % nach Twitter. Wir nutzen meist die Social-Automation-Funktionen von Jetpack. Es ist immer noch cool, @css als Handle zu haben, und wir nähern uns einer halben Million Followern. Man sollte meinen, das wäre etwas wert. Das müssen wir irgendwann herausfinden.

Wenn wir Tweets von Hand schreiben (selten), sind das immer noch die, mit dem größten Potenzial. Ich mache das nur, wenn es sich wie etwas Spaßiges anfühlt, denn auch wenn sie die meiste Interaktion erzielen können, lohnt sich das Verhältnis von Zeit/Wert immer noch nicht.

Beispiel für einen handgeschriebenen Tweet

::marker ist fantastisch und jetzt in allen modernen Browsern verfügbar. https://#/EAIb3HHUX3@simevidas merkt sich einen bevorzugten Anwendungsfall an (Listenmarkierungen passend zur Größe von Überschriften):https://#/KVKMCSq4pg pic.twitter.com/b4fei5Uw3V

— CSS-Tricks (@css) 13. Dezember 2020

Die meisten unserer Tweets werden einfach automatisch generiert, wenn ein neuer Beitrag veröffentlicht wird. Und das machen wir schon so lange, dass ich denke, das ist es, was die Twitter-Follower größtenteils erwarten, und das ist in Ordnung. Wir haben die Möglichkeit, den Tweet vor dem Absenden anzupassen, was wir versuchen, aber normalerweise nicht tun.

Beispiel für einen automatisch generierten Tweet

Ein vollständiger Leitfaden zu CSS-Funktionen https://#/ty82onsTvA pic.twitter.com/uaZ2YJKQop

— CSS-Tricks (@css) 4. Mai 2020

Die anderen 5 % der Bemühungen sind Instagram, einfach weil es irgendwie Spaß macht. Ich möchte gar nicht daran denken, direkten Wert aus Instagram zu ziehen. Vielleicht wäre es sinnvoll, wenn wir viel mehr Produkte direkt zum Verkauf hätten. Aber vorerst nur zufällige Tipps und Sachen, um ein Publikum zu halten.

Beispiel für einen Instagram-Post

Diesen Beitrag auf Instagram ansehen

Ein Beitrag geteilt von CSS-Tricks (@real_css_tricks)

Screencasts

Ich habe in diesem Jahr **22** Screencasts gemacht. Das ist **viel** im Vergleich zu den letzten Jahren! Ich bin mir nicht sicher, ob ich 2021 genauso ehrgeizig sein werde, aber ich vermute, ich werde es vielleicht sein, denn mein Schreibtisch-Setup wird immer besser für sie und meine Schnittfähigkeiten verbessern sich langsam. Ich mache sie gerne, und es ist eine gelegentliche Einkommensquelle (mein Favorit ist die Zusammenarbeit mit jemandem aus einem Unternehmen und das gemeinsame Eintauchen in deren Technologie). Außerdem haben wir dieses coole neue Intro für unsere Videos von Dina Amin bekommen.

Die Screencasts werden auf der Website und auf iTunes als Videocast veröffentlicht, aber der primäre Ort, an dem die Leute zuschauen, ist YouTube. Ich schätze, wir könnten YouTube als „soziale Medien“ betrachten, aber ich finde, dass Screencasts eher „echte Inhalte“ sind, im Gegensatz zu anderen sozialen Medien. Sie sind sicherlich viel zeitaufwändiger in der Produktion und ich hoffe, sie sind langlebiger als ein einmaliger Tweet oder etwas Ähnliches.

Newsletter

Wir haben **81.765** Abonnenten für den Newsletter erreicht. Einerseits ist das eine beachtliche Zahl. Andererseits ist es viel zu wenig, wenn man bedenkt, wie verdammt gut er ist! Ich hatte gehofft, wir würden dieses Jahr 100k erreichen, aber ich habe nicht wirklich viel getan, um Anmeldungen zu fördern, das liegt also an mir. Ich glaube nicht, dass wir auch nur eine Woche verpasst haben, also ist das ein Gewinn, und wenn man bedenkt, dass wir letztes Jahr bei 65.000 waren, ist das immer noch ein ziemlich gutes Wachstum.

Kommentare

Ihr habt dieses Jahr **4.322** Kommentare auf der Website hinterlassen. Das ist ein kleiner Rückgang gegenüber 4.710, aber immer noch ordentlich, durchschnittlich fast 12 pro Tag.

Ich bin emotional Achterbahn gefahren wegen der Kommentare. An einem Tag dachte ich, sie sind zu viel Mühe, erfordern zu viel Moderation und Zeit, um den Müll herauszufiltern. Die Gehässigkeit kann so intensiv sein (auf einer Website über Code, wow), dass ich sie manchmal einfach ausschalten möchte. Andererseits bin ich froh über die zusätzliche Einsicht und Korrekturen. Ganz zu schweigen davon, dass das Inhalte sind und Inhalte gut sind. Wir hatten nie **keine** Kommentare, also, na ja, lassen wir sie vorerst bestehen.

Ich ermutige absolut **immer** Ihre hilfreichen, aufschlussreichen und freundlichen Kommentare und verspreche, niemals unhöfliche oder falsche Kommentare zu veröffentlichen (meine Entscheidung).

Die Foren wurden dieses Jahr komplett geschlossen (in den „nur Lese“-Modus versetzt), sodass die Kommentaraktivität von dort nicht wirklich in den Blogbereich übergeschwappt ist. Die Schließung der Foren fühlt sich immer noch… seltsam an. Ich mochte es, einen Ort zu haben, an den ich (besonders Anfänger) senden konnte, um Fragen zu stellen. Aber wir haben einfach nicht die Ressourcen (oder das Geschäftsmodell), um sichere und aktive Foren zu unterstützen. Also bleiben sie vorerst geschlossen.

Zielüberprüfung

• ❌ **100.000 auf der E-Mail-Liste.** Fehlgeschlagen. Das war sowieso ein bisschen ein Mondschuss, und wir haben nie einen Plan umgesetzt, um dorthin zu gelangen. Zum Beispiel könnten wir es auf Social Media mehr fördern. Wir könnten versuchen, Anzeigen woanders mit einem Aufruf zur Anmeldung zu schalten. Wir könnten Anreize für neue Abonnenten anbieten. Das tun wir vielleicht, vielleicht auch nicht. Ich fühle mich im Moment nicht stark genug, um es zu einem Ziel für nächstes Jahr zu machen.
• ✅ **Zwei Leitfäden.** Diesen haben wir gerockt. Wir haben **9** Leitfäden veröffentlicht. Ich halte diese Dinge für unsere wertvollsten Inhalte. Auch wenn ich nicht **nur** diese Art von Inhalten machen möchte (weil ich es lustig finde, CSS-Tricks auch als tägliche Zeitung zu betrachten), möchte ich **den Großteil** unserer Bemühungen hierauf konzentrieren.
  • A Complete Guide to Data Attributes
  • A Complete Guide to Dark Mode on the Web
  • A Complete Guide to CSS Functions
  • A Complete Guide to Links and Buttons
  • A Complete Guide to CSS Gradients
  • A Guide to Console Commands
  • A Guide to the Responsive Images Syntax in HTML
  • A Complete Guide to calc() in CSS
  • A Complete Guide to CSS Media Queries
• ✅ **Klarer Fokus auf How-to-Referenz-Technologieinhalte.** Ich denke, das haben wir ziemlich gut gemacht. Dies ständig im Hinterkopf zu haben, sowohl für uns selbst als auch für Gastbeiträge, bedeutete, sicherzustellen, dass wir die Nutzung von Technologie hervorheben und weniger Fokus auf Dinge wie Gastkommentare legen, die leider unsere am wenigsten nützlichen Inhalte sind. Ich möchte das in Zukunft noch strenger handhaben. Wir sind auf dieser Website schon so weit gekommen. Die Erwartung der Leute ist, dass diese Seite Antworten auf ihre technischen Frontend-Fragen hat, also gibt es keinen Grund, sich nicht vollständig darauf zu konzentrieren.
• ✅ **Auf Gutenberg umsteigen.** Auch das haben wir gerockt. Ich glaube, im ersten Monat des Jahres hatten wir Gutenberg für neue Inhalte in Gebrauch, und innerhalb weniger Monate danach hatten wir Gutenberg für alle Beiträge aktiviert. Es war Arbeit! Und wir haben noch einen langen Weg vor uns, da die meisten Beiträge auf der Seite noch nicht in Blöcke „konvertiert“ wurden, was immer noch keine hirnlose Aufgabe ist. Aber ich betrachte es als einen fantastischen Erfolg. Ich denke, Gutenberg ist weitgehend eine verdammt angenehme Arbeit, die die Content-Erstellung weitaus angenehmer, produktiver und interessanter macht.

Neue Ziele

• Drei Leitfäden. Ich weiß, dass wir dieses Jahr neun gemacht haben, aber das Ziel war nur zwei. Ich habe tatsächlich Ideen für drei weitere, also setze ich drei als Ziel. Verwandtes Nebenziel: Ich würde gerne versuchen, aus einigen dieser Leitfäden Mini-Bücher zu machen und sie entweder einzeln zu verkaufen oder sie als Teil des MVP Supporter-Abonnements anzubieten.
• Konzentration auf How-to-Technologieinhalte rund um unsere Stärken. Dinge wie nützliche Tipps. Technische Nachrichten mit Kontext. Ratschläge zu Best Practices. Ich möchte uns etwas mehr auf unsere Stärken konzentrieren. HTML, CSS und JavaScript sind hierbei ganz oben auf der Liste der Stärken, aber nicht jedes Framework, jede Serverless-Technologie oder jedes Build-Tool. Ich möchte, dass wir vorsichtiger sind, Dinge nicht zu veröffentlichen, es sei denn, wir können sie stark bürgen.
• Vervollständigung aller fehlenden Almanach-Einträge. Es gibt gut 15-20 Almanach-Artikel, die existieren könnten, aber noch nicht existieren. So wie wir `place-items` dort haben, aber nicht `place-content` oder `place-self`. Dann gibt es esoterische Dinge, wie die zeitdimensionalen Pseudoklassen `:current`, `:past` und `:future`, die ich ehrlich gesagt nicht einmal wirklich verstehe, die aber existieren. Wenn Sie helfen möchten, melden Sie sich bitte.

Zusammenfassung

Vielen Dank nochmals, dass Sie ein Leser dieser Seite sind. Ich hoffe, diese kleinen Einblicke in unser Geschäft helfen Ihnen auf Ihre Weise. Und ich hoffe wirklich, dass 2021 besser wird als 2020, für uns alle.

🧡