Diseño v18

¡Rediseñé el sitio! Nunca puedo pensar en la palabra rediseño sin pensar también en realineal, del artículo fundamental de Cameron Moll. No comencé de la nada. Este diseño no era un lienzo de diseño en blanco y un editor de código vacío. Dudo que cualquier rediseño futuro lo sea. Empecé con lo que ya teníamos y cambié algunas cosas. Pero presioné tanto, tocando casi todos los archivos, que vale la pena trazar una línea y decir que esta es la v18.

Mantengo aquí una historia de diseño muy incompleta.

empezando

Siempre tiendo a empezar husmeando en una herramienta de diseño. Después de 3 o 4 pases en Figma (luego regresando después de que comenzó a construir para desarrollar el diseño del pie de página), aquí es donde lo dejé.

Una vez que estoy relativamente satisfecho con lo que está sucediendo visualmente, abandono el barco y empiezo a codificar, tomando todas las decisiones finales allí. El producto final no es 1000 millas diferente a este, pero tiene bastantes diferencias (y requirió 10 veces más decisiones).

Sencillaz

Puede que no lo parezca una primera vista, pero para mí mientras trabajaba en ello, el tema central era la simplificación. No es drástico, como un 20%.

El encabezado en v17 tenía una versión móvil especial y trataba sobre el estado abierto/cerrado. El encabezado v18 son solo un puñado de enlaces que caen a la siguiente línea en pantallas pequeñas. Agregué un enlace “volver al principio” en el pie de página que aparece una vez que te has desplazado desde la parte superior para ayudarte a regresar a la navegación. Esa detección de desplazamiento ( IntersectionObserverbasada) es lo que uso para “hacer girar la estrella” en el camino de regreso también.

Ya puedo decir que el encabezado del sitio será una de las cosas que evolucionan significativamente en la versión 18, ya que allí se puede encontrar más pulido.

El formulario de búsqueda en v17 también tenía estados abiertos/cerrados y plantillas especiales para la página de resultados. Ahora estoy totalmente involucrado en Jetpack Search, así que no hago más que abrirlo cuando haces clic en el ícono de búsqueda.

Esta búsqueda funciona con JavaScript, por lo que, para hacerla más resistente, también es un hipervínculo válido a los resultados de búsqueda de Google:

a   href="https://www.google.com/search?q=site:css-tricks.com%20layout"   spanSearch/span  svg ... /svg/a

Antes había una variedad de diseños diferentes en v17 (por ejemplo, barra lateral a la izquierda o derecha) y estilos de encabezado (por ejemplo, video en el encabezado). Ahora existe en gran medida sólo uno de ambos.

El pie de página en la versión 17 se volvió bastante extenso, con secciones completas para el formulario del boletín, redes sociales, sitios relacionados y más. Lo he compactado todo en un pie de página más tradicional, si es que existe tal cosa.

Ahora hay una forma de buscar "tarjetas", ya sea un artículo, video, guía, etc. Hay ligeras variaciones dependiendo de si el autor es relevante, si tiene etiquetas, un llamado a la acción, etc., pero es toda la misma base (y plantilla). La variación principal es una tarjeta "mini", que ahora se usa de manera mayoritariamente consistente en artículos populares, la confusión mensual y las tarjetas de artículos relacionados dentro del artículo.

El área del boletín se simplifica bastante. En la versión 17, la URL /newsletters/ era una especie de "página de destino" para el boletín y se podía ver lo último en una barra lateral.

Ahora esa URL simplemente lo redirige al último boletín para que pueda leerlo fácilmente como cualquier otro contenido, así como navegar a números anteriores.

Imágenes destacadas

WordPress tiene el concepto de una imagen destacada por artículo. No es necesario que lo uses, pero nosotros sí. Me gusta cómo se integra naturalmente con otras cosas. Como si se convirtiera automáticamente en la imagen para la integración de las redes sociales. Lo usamos en v17 como background-imagealgo sutil.

Quizás en un mundo perfecto, un sitio perfecto tendría una estrategia de contenido perfecta, de modo que cada artículo tenga una imagen destacada perfecta. Una combinación de colores a juego, dimensiones exactas, muy predecible. Pero este no es un mundo perfecto. Prefiero sistemas que permitan el descuido. El diseño de nuestras imágenes destacadas acepta casi cualquier cosa.

• Se coloca un degradado con la marca del sitio encima y mix-blend-modese coloca sobre él, lo que hace que todos se sientan relacionados.
• La excepción es que se dimensionarán/recortarán según sea necesario.

Dicho esto, nuestras imágenes destacadas se utilizan en muchos contextos:

Estadísticas CSS

Mirando solo el CSS entre las dos versiones (Project Wallace ayuda aquí):

Minimizada y comprimida con Gzip, la hoja de estilo principal pesa 16,4 kB. Quizás no sea tan pequeño como podría ser una hoja de estilo de utilidad, pero ese no es un tamaño del que jamás me preocuparé, especialmente porque el tamaño tuvo una fuerte tendencia a la baja sin intentarlo realmente.

No es exactamente un demonio de la velocidad

Hay bastantes recursos en uso en CSS-Tricks. Si la velocidad fuera mi prioridad número uno, lo primero que haría es empezar a recortar los recursos en uso. En mi opinión, haría que el sitio fuera mucho menos divertido, pero probablemente no dañaría tanto el contenido. Simplemente no quiero. Prefiero encontrar formas de mantener el sitio relativamente rápido y al mismo tiempo mantenerlo visualmente rico. Tal vez en el futuro pueda explorar algunas de estas cosas para permitir una versión mucho más liviana del sitio que se opte por participar de manera basada en estándares.

Sobre esos recursos…

• Las imágenes son el mayor peso. Casi todas las páginas tienen bastantes de ellos (más de 10). Intento ofrecerlos desde una CDN en un formato optimizado con la sintaxis de imágenes receptivas. Hay más que puedo hacer, pero ya he tenido un buen comienzo.
• Todavía hay ~180 kB de JavaScript. La función Jetpack Search funciona con él, que es el módulo más pesado. Se carga un polyfill (probablemente por eso), que debería investigar para ver si se puede eliminar. Sigo usando jQuery, que definitivamente consideraré eliminar en la próxima ronda. Nada en contra de jQuery, simplemente no lo uso mucho. De todos modos, la mayor parte de lo que estoy haciendo está escrito en JavaScript básico. Google Analytics está ahí, y luego el resto son pequeños scripts (irónicamente) para aspectos de rendimiento o publicidad.
• Las fuentes pesan ~163 kB y no están cargadas de ninguna manera particularmente sofisticada.

Esas tres cosas son objetivos para mejorar la velocidad.

Y, sin embargo, el informe de Desktop Lighthouse no está mal:

Esos resultados provienen de la página de inicio, que debido a las grandes cuadrículas de contenido, es una de las páginas más pesadas. Todavía hay muchos intentos de aplicar las mejores prácticas de rendimiento aquí:

• Todo se sirve desde CDN http/2 globales y se almacena en caché
• Activos optimizados/minimizados/combinados cuando sea posible
• Activos/anuncios cargados de forma diferida siempre que sea posible
• Alojamiento premium
• HTML sobre el cable + página.instantánea

Me aseguré de ejecutar informes SpeedCurve antes y después también y hubo algunas noticias alentadoras:

Mi esperanza es que al hacer clic en el sitio y regresar en visitas posteriores, se sienta bastante ágil.

Tipo

Es HoeflerCo. de nuevo en todos los ámbitos.

Dejé la mayor parte de la tipografía del artículo en paz, ya que ese fue uno de los últimos sprints de diseño que hice en la versión 17 y me gusta dónde quedó. Ahora que ya clamp()está aquí, lo estoy usando para hacer una tipografía fluida en gran parte del sitio. Por ejemplo, encabezados:

font-size: clamp(2rem, calc(2rem + 1.2vw), 3rem);

hacha

Utilicé el complemento axe DevTools para probar las páginas antes del lanzamiento y encontré algunas cosas que arreglar. No es exactamente una inmersión profunda en la accesibilidad, pero tampoco fue una reescritura completa, por lo que no espero que haya cambiado mucho en términos de accesibilidad. Estoy particularmente interesado en solucionar cualquier problema aquí, ¡así que no me reprimas!

Insectos

Estoy seguro de que hay algunos. Prefiero no utilizar este hilo de comentarios para errores. Si se ha topado con uno, contáctenos a team@css-tricks.com.