Gracias (Edición 2020)

Vaya año, ¿eh? Como hacemos todos los años, me gustaría agradecerles enormemente por leer CSS-Tricks y resumir el año. Más altibajos que altibajos, en total. Aquí en CSS-Tricks, fue más bien un lavado. Permítanme compartir con ustedes algunos números, hitos y pensamientos sobre nuestro viaje de 2020.

Hagamos los números básicos.

El sitio registró 94 millones de páginas vistas este año. El año pasado perdimos una pizca de páginas vistas (de 91 millones a 90 millones), por lo que es bueno ver que ese número vuelve a aumentar, estableciendo un nuevo récord. Ahora no tengo que contarme historias como “el uso de las extensiones del navegador que bloquean Google Analytics debe estar en aumento”. Alcanzar los 100 millones de páginas vistas será un buen hito en el futuro. Esta cifra, a largo plazo, aumenta muy lentamente. Es un buen recordatorio para mí de cuánto tiempo, dinero y energía se requieren para mantener el tráfico a un sitio de contenido, y mucho menos para intentar impulsar el crecimiento.

Tengo Cloudflare al frente del sitio este año. Creo que es una buena idea en general, pero especialmente ahora que tienen tecnología específica para hacerlo aún mejor. Soy partidario de llevar todo lo que podemos al límite, y ahora no sólo los activos estáticos son servidos por CDN, sino también el contenido.

Menciono esto porque ahora tengo acceso a los análisis de Cloudflare, por lo que puedo comparar entre herramientas. No puedo ver un año completo de datos en Cloudflare, pero al comparar los visitantes únicos del mes pasado entre los dos servicios, veo 6.847.979 visitantes únicos en Cloudflare en comparación con 6.125.272 sesiones (o 7.449.921 páginas vistas únicas; no Estoy seguro de cuál es directamente comparable) en Google Analytics. Parecen bastante cercanos. Más cerca de lo que pensé que estarían, ya que Google Analytics requiere JavaScript del lado del cliente y los análisis de Cloudflare, presumiblemente, se recopilan a nivel de DNS y, por lo tanto, no se pueden bloquear como JavaScript del lado del cliente. He desactivado los análisis basados ​​en WordPress por ahora, ya que tener tres lugares para análisis me parecía un poco excesivo, aunque podría volver a activarlos porque, sin ellos, no puedo ver los principales resultados de búsqueda en el sitio, lo cual Definitivamente Me gustaría tener.

El proveniente de la búsqueda orgánica ¹ tráfico fue del 77,7% este año, frente al 80,6% el año pasado. Una variación del 3% parece bastante grande, pero casi en su totalidad se explica por una variación del 3% del 9% al 12% en el tráfico “directo”. No tengo idea de qué hacer con eso, pero supongo que no me importa una mejor diversificación de las fuentes.

Estos análisis de los números de fin de año me parecen divertidos, pero en general no soy un gran analista. El año pasado escribió:

Hay un montón de números que simplemente no tengo ganas de mirar este año. Tradicionalmente hemos hecho cosas como de qué países son las personas, qué navegadores usan (predominantemente Chrome), uso de dispositivos móviles (extrañamente bajo) y cosas así. Este año simplemente no me importa. Este es un sitio web. Es para todas las personas del mundo que quieran leerlo, en cualquier país en el que se encuentren y en cualquier navegador que deseen.

Este año me siento aún más apático hacia las cifras analíticas generalizadas. Creo que los análisis son fantásticos cuando tienes una pregunta en mente y quieres una respuesta, donde los números ayudan a encontrar esa respuesta. O para números que son obviamente importantes e impactantes para su sitio y que usted mismo asume. Simplemente husmear en los números puede engañarte haciéndote pensar que estás recopilando información importante y tomando decisiones meditadas cuando simplemente te estás hurgando la nariz.

Una pregunta que sí me interesa es cuál es el contenido más popular según el tráfico (llegaremos a eso en un momento). Mirar el contenido más popular (según el tráfico real) me da una idea de lo que atrae a la gente hasta aquí. Atraer tráfico al sitio es un objetivo. Si bien generalmente no vendemos patrocinio/publicidad basada directamente en las visitas a la página, esos números son importantes para los patrocinadores y se correlacionan directamente con lo que podemos cobrar.

Otro dato que me importa es lo que la gente busca y que les lleva al sitio. Así es como se desglosa:

• Top 10: Varias combinaciones de términos que tienen que ver con flexbox y diseño de cuadrícula
• Mezclado en el top 20: varias modificaciones del nombre del sitio

A partir de ahí, 10-100 son “cosas CSS aleatorias específicas”. Más allá de 100 es donde SVG, JavaScript, elementos de diseño y CSS se añaden a la mezcla. El término de búsqueda ^número 251 es la primera vez que aparece React. La idea aquí es que: (1) nuestras guías de diseño siguen funcionando muy bien, (2) a muchas personas les gusta llegar primero al sitio y luego encontrar lo que necesitan, y (3) las búsquedas de contenido específico de la biblioteca son cada vez más frecuentes. No es una forma particularmente común de aterrizar aquí.

Publicaciones más destacadas del año

Gracias a Jacob, podemos ver datos analíticos según el año en que se escribió el contenido (y algunos otros fragmentos de metadatos).

Aquí hay algo interesante. En 2019, los artículos escritos en 2019 generaron alrededor de 6,3 millones de páginas vistas. Esos mismos artículos, en 2020, generaron 7,3 millones de páginas vistas. Genial, ¿eh? Los artículos generaron más tráfico a medida que envejecían.

Los artículos escritos en 2020 generaron 12 millones de páginas vistas. Aquí está el top 10:

1. Carrusel solo CSS
2. Video de ancho fluido (truco, ya que esto se escribió hace unos años como una página independiente y solo lo moví al blog en 2020)
3. Cómo crear un temporizador de cuenta regresiva animado con HTML, CSS y JavaScript
4. Una guía completa de enlaces y botones.
5. Los ganchos del enrutador React
6. Una guía completa para el modo oscuro en la Web
7. Neumorfismo y CSS
8. Una guía completa de atributos de datos.
9. ¿Por qué JavaScript se está comiendo HTML?
10. Desafíos iniciales

Interesante historia de fondo en esa lista. Busqué en Google Analytics y creé esa lista de los 10 principales en función de los datos que me mostraron en un informe personalizado, lo cual Jacob me enseñó a hacer. Por casualidad, Jacob me envió un correo electrónico inmediatamente después para mostrarme el Top 10 que calculó, y era ligeramente diferente al mío. Luego volví y volví a ejecutar mi informe personalizado, y era ligeramente diferente a los demás. ¡Extraño! Jacob sabía por qué. Cuando observe un conjunto de datos enormes como este en Google Analytics, solo tomarán muestras de los datos utilizados para el informe. Le mostrará una “insignia amarilla” y le indicará en qué porcentaje de los datos se basa el informe. 500.000 sesiones es el máximo, que es sólo el 0,7% de lo que necesitábamos analizar. Eso es lo suficientemente bajo como para representar las diferentes listas. Jacob ya había exportado y modificado algunos datos para tener en cuenta eso, por lo que la lista anterior es necesaria para el 100% de todas las sesiones.

Los artículos principales de todo el sitio de cualquier año:

1. La guía completa de Flexbox
2. La guía completa de Grid
3. Usando SVG
4. Imágenes de fondo de página completas perfectas
5. Las formas de CSS
6. Consultas de medios para dispositivos estándar
7. Cambiar el color de SVG al pasar el mouse
8. Triángulo CSS
9. Cómo escalar SVG
10. Usando @font-face

Nada del Almanaque llegó al top 10, pero curiosamente, justo después de eso, los siguientes 20 están muy plagados de artículos aleatorios de allí. En total, el Almanaque representa aproximadamente el 14,8% de todo el tráfico.

Otras dos cosas que creo que son muy interesantes que hicimos con el contenido son:

1. Publicó la serie de Jay Hoffman sobre Historia Web, que incluye adaptaciones de audio de Jeremy Keith que se sirven como podcast.
2. Publicamos nuestra serie de fin de año como lo hicimos el año pasado.

Una de las muchas razones por las que me encanta estar en WordPress es lo fácil que es crear series como estas. Todo lo que hicimos fue crear un archivo de plantilla específico de una categoría y aplicarle un poco de CSS personalizado. Eso les da a las publicaciones una página de inicio interesante para sí mismas, pero siguen siendo parte del resto del “flujo” del sitio (RSS, búsqueda, etiquetas, etc.).

COVID-19

¿Quizás el ligero aumento del tráfico estuvo relacionado con el COVID? Dado que cada vez más personas recurren a la codificación como una buena opción para trabajar desde casa, tal vez haya más personas que busquen ayuda con la codificación. ¿Quién sabe?

Lo que definitivamente descubrimos fue que casi todos los patrocinadores con los que trabajamos, comprensiblemente, se apretaron el cinturón. Agregue los planos publicitarios con nosotros que se redujeron o cancelaron y, como estimación aproximada, diría que hemos bajado un 25% en los ingresos por patrocinio. Eso sería bastante devastador excepto por el hecho de que intentamos no poner demasiados huevos en una sola canasta.

Parece un buen momento para mencionar que si a su empresa le está yendo bien y podría beneficiar al llegar a personas que crean sitios web, hablemos de patrocinio.

Estoy intentando diversificar un poco los ingresos, incluso solo en este sitio. Por ejemplo…

comercio electrónico

Hemos estado usando WooCommerce aquí para vender un par de cosas.

Carteles, principalmente. Un trozo físico literal de papel impreso que se le envía por correo. Los carteles son diseños únicos hechos a partir de las increíbles ilustraciones que Lynn Fisher creó para las guías flexbox y grid. Básicamente, los “enviamos directamente”, lo que significa que otra empresa los imprime y envía bajo demanda. Entonces, las compras en este sitio, pero otra empresa los toma desde allí y hace el resto. Esto es atractivo porque la cantidad de trabajo es muy baja, pero hay dos desventajas importantes: (1) la atención al cliente para los pedidos se convierte en nuestro problema y yo diría que ~20% de los pedidos necesitan algún tipo de soporte, y (2) la El margen de beneficio es bastante reducido en comparación con lo que sería si asumiéramos la mayor parte del trabajo nosotros mismos.

También vendemos membresías de MVP Supporter , que son excelentes porque no requieren mucho trabajo continuo. El truco es simplemente asegurarse de que sea lo suficientemente valioso como para que la gente lo compre, algo en lo que tendremos que trabajar más con el tiempo. Por ahora, básicamente obtienes un libro, descargas de videos y sin anuncios. Actualización : ¡Ya no! Todo es gratis ahora.

En matemáticas sueltas, el comercio electrónico representó el 5% de los ingresos perdidos. Hay un largo camino por recorrer, pero probablemente valga la pena el viaje, ya que supongo que este tipo de ingresos es menos volátil.

También sigo siendo optimista sobre la monetización web a largo plazo (aquí está la última publicación que escribí al respecto). Pero en este momento, no es una solución que genere una nueva fuente de ingresos significativa. De manera optimista, es algo así como el 0,05% de los ingresos.

Medios de comunicacion social

En lo que respecto a los impulsores de tráfico de un sitio web, las redes sociales no son particularmente grandes, con un 2,2% de todo el tráfico (en comparación con el 2,3% del año pasado). Eso es lo que siempre está, independientemente de si ponemos mucho esfuerzo en ello durante el transcurso de un año, que es exactamente la razón por la que trato de no gastar energía allí. El poco esfuerzo que dedicamos, el 95% se destina a Twitter. Nos apoyamos principalmente en las funciones de automatización social de Jetpack. Todavía es genial tener a @css como identificador y nos estamos acercando al medio millón de seguidores. Uno pensaría que eso valdría algo. Tendremos que resolverlo algún día.

Cuando escribimos Tweets a mano (poco común), esos siguen siendo los que tienen mayor potencial. Solo hago eso cuando me parece divertido, porque aunque pueden lograr la mayor participación, la cuestión del tiempo/valor todavía no hace que valga la pena.

Ejemplo de tweet escrito a mano

::marker es fantástico y ahora está disponible en todos los navegadores modernos. https://t.co/EAIb3HHUX3 @simevidas señala un caso de uso favorito (enumera los marcadores que coinciden con el tamaño de los encabezados): https://t.co/KVKMCSq4pg pic.twitter.com/b4fei5Uw3V

– Trucos CSS (@css) 13 de diciembre de 2020

La mayoría de nuestros tweets se generan automáticamente cuando se publica una nueva publicación. Y hemos estado haciendo eso durante tanto tiempo que creo que eso es lo que los seguidores de Twitter esperan en gran medida de todos los modos, y está bien. Tenemos la capacidad de personalizar el Tweet antes de que se publique, lo cual intentamos, pero generalmente no lo hacemos.

Ejemplo de tweet generado automáticamente

Una guía completa de funciones CSS https://t.co/ty82onsTvA pic.twitter.com/uaZ2YJKQop

– Trucos CSS (@css) 4 de mayo de 2020

El otro 5% del esfuerzo es Instagram sólo porque es un poco divertido. Ni siquiera quiero pensar en intentar extraer valor directo de Instagram. Quizás si tuviéramos muchos más productos para venta directa tendría sentido. Pero por ahora, solo consejos aleatorios y cosas para mantener a la audiencia.

Ejemplo de publicacion de Instagram

Screencasts

Hice 22 screencasts este año. ¡Eso es mucho comparado con los últimos años! No estoy seguro de si será tan ambicioso en 2021, pero sospecho que podría serlo, porque mi configuración en mi escritorio se está volviendo bastante buena para hacerlos y mis habilidades de edición están mejorando lentamente. Disfruto haciéndolos y es una fuente de ingresos ocasionales (mi favorito es emparejarme con alguien de una empresa y profundizar juntos en su tecnología). Además, tenemos esa nueva y genial introducción para nuestros videos realizados por Dina Amin.

Los screencasts se publican en el sitio y en iTunes como un videocast, pero el lugar principal donde la gente los ve es YouTube. Supongo que podríamos considerar a YouTube como una “red social”, pero creo que los screencasts se parecen más a un “contenido real” de una manera que no ocurre con otras redes sociales. Ciertamente, su producción requiere mucho más tiempo y espero que sea más perenne que un tweet único o algo así.

Boletín informativo

Llegamos a 81.765 suscriptores al boletín. Por un lado, es una cifra respetable. Por otro lado, ¡es demasiado bajo considerando lo bueno que es! Tenía la esperanza de alcanzar los 100.000 este año, pero en realidad no hice mucho para fomentar las inscripciones, así que eso depende de mí. No creo que nos hayamos perdido ni una sola semana, así que eso es una victoria, y considerando que el año pasado teníamos 65.000, sigue siendo un crecimiento bastante bueno.

comentarios

Todos ustedes dejaron 4.322 comentarios en el sitio este año. Eso es un poco menos que 4.710, pero sigue siendo decente, con un promedio de casi 12 por día.

Me siento en una montaña rusa emocional con los comentarios. Un día pensando que son demasiado problemáticos, que requieren demasiada moderación y tiempo para filtrar la basura. El vitriolo puede ser tan intenso (en un sitio sobre código, guau) que algunos días simplemente quiero apagarlos. Otras veces, me alegra por la información adicional y las correcciones. Sin mencionar, oye, eso es contenido y el contenido es bueno. Nunca hemos tenido comentarios, así que mantengámoslos por ahora.

Siempre aliento absolutamente sus comentarios útiles, perspicaces y amables, y prometo nunca publicar comentarios groseros o incorrectos (mi decisión).

Los foros cerraron por completo este año (en modo “solo lectura”), por lo que la actividad de comentarios no llegó exactamente al área del blog. Cerrar los foros todavía se siente… raro. Me gustó tener un lugar al que enviar (especialmente a los principiantes) para hacer preguntas. Pero simplemente no tenemos los recursos (o el modelo de negocio) para respaldar foros activos y seguros. Así de cerrados permanecerán, por ahora.

Revisión de objetivos

• ❌ 100k en la lista de correo electrónico. Falla en eso. De todos los modos, eso fue una especie de tiro a la luna y nunca ejecutamos ningún tipo de plan para ayudar a llegar allí. Por ejemplo, podríamos fomentarlo más en las redes sociales. Podríamos intentar comprar anuncios en otros lugares con un llamado a la acción para registrarse. Podríamos ofrecer incentivos a los nuevos suscriptores de alguna manera. Podríamos hacer esas cosas o tal vez no. No me siento lo suficientemente fuerte ahora como para convertirlo en una meta para el próximo año.
• ✅Dos guías. Aplastamos este. Publicamos 9 guías. Considere que esto es nuestro contenido más valioso. Si bien no quiero hacer solo este tipo de contenido (porque creo que es divertido pensar en CSS-Tricks también como un sitio estilo periódico), quiero poner la mayor parte de nuestro esfuerzo aquí.
  • Una guía completa de atributos de datos.
  • Una guía completa para el modo oscuro en la Web
  • Una guía completa de funciones CSS.
  • Una guía completa de enlaces y botones.
  • Una guía completa para los degradados CSS
  • Una guía para los comandos de la consola.
  • Una guía para la sintaxis de imágenes responsivas en HTML.
  • Una guía completa para calc() en CSS
  • Una guía completa para consultas de medios CSS
• ✅ Tener un enfoque obvio en el contenido técnico referencial. Creo que lo hicimos bastante bien aquí. Tener esto en mente todo el tiempo, tanto para nosotros como para las publicaciones de invitados, significaba asegurarnos de mostrar cómo usar la tecnología y centrarnos menos en cosas como editoriales de invitados que, desafortunadamente, son nuestro contenido menos útil. Me gustaría ser aún más estricto con esto en el futuro. Estamos muy avanzados en nuestro viaje en este sitio. La expectativa que tiene la gente es que este sitio tenga respuestas para sus preguntas técnicas iniciales, por lo que no hay razón para no confiar completamente en eso.
• ✅ Súbete a Gutenberg. También lo aplastamos aquí. Creo que en el primer mes del año hicimos que usáramos Gutenberg en contenido nuevo y, unos meses después, teníamos Gutenberg habilitado para todas las publicaciones. ¡Fuera trabajo! Y todavía nos queda un largo camino por recorrer, ya que la mayoría de las publicaciones en el sitio no han sido “convertidas” en bloques, lo cual todavía no es una tarea tonta. Pero lo considero un éxito fantástico. Creo que es en gran medida un placer trabajar con Gutenberg, lo que hace que la creación de contenido sea mucho más placentera, productiva e interesante.

nuevas metas

• Tres guías . Sé que este año hicimos nueve, pero el objetivo era sólo dos. De hecho, tengo ideas para tres más, así que haré de tres el objetivo. Objetivo secundario relacionado: Me gustaría intentar hacer minilibros a partir de algunas de estas guías y venderlos individualmente o hacerlos parte de la suscripción de MVP Supporter.
• Manténgase enfocado en el contenido técnico instructivo sobre nuestras fortalezas. Cosas como consejos útiles. Noticias técnicas con contexto. Asesoramiento sobre mejores prácticas. Quiero guiarnos un poco más hacia nuestras fortalezas. HTML, CSS y JavaScript ocupan un lugar destacado en esa lista de fortalezas, pero no todos los marcos, tecnologías sin servidor o herramientas de construcción lo son. Me gustaría que tuviéramos más cuidado al no publicar cosas a menos que podamos dar fe de ello.
• Complete todas las entradas del Almanaque que faltan. Hay entre 15 y 20 artículos del Almanaque que podrían existir y que aún no existen. Como tenemos place-itemsahí, pero no place-contento place-self. Luego están las cosas esotéricas, como :current, :pasty :futurepseudoclases de dimensión temporal que, francamente, ni siquiera entiendo realmente, pero existen. Si quieres ayudar, por favor comunícate.

terminando

Gracias nuevamente por ser lector de este sitio. Espero que estos pequeños vistazos a nuestro negocio ayuden de alguna manera al suyo. Y realmente espero que 2021 sea mejor que 2020, para todos nosotros.

1. De hecho, prefiero mi búsqueda de animales alimentados con pasto además de orgánicos, pero está bien. ↩️