Gone Floating Labels y Green Lighthouse Scores

Siempre hay algo que sucede detrás de escena en Smashing. En los últimos meses, hemos estado trabajando continuamente en torno al rendimiento del sitio, pero también eliminamos las etiquetas flotantes de nuestros formularios, rediseñamos nuestros mensajes de error, renovamos nuestro panel de Membresía, refactorizamos y ajustamos nuestras tablas receptivas y trabajamos con nuevos autores en un montón de nuevos artículos que se publicarán en el sitio durante los próximos meses. Entonces, aquí está tu actualización mensual de Smashing.

Las etiquetas flotantes se han ido

Después de publicar el artículo de Adam Silver sobre por qué las etiquetas flotantes son una mala idea, hemos visto una gran discusión en Twitter y en los comentarios sobre ellas. Seguramente puede ahorrar bastante espacio vertical con ellos, pero el costo tiene muchos problemas de accesibilidad y autocompletado . Irónicamente, en el momento de publicar ese artículo a fines de febrero, todavía teníamos etiquetas flotantes en la mayoría de nuestros formularios, y queríamos explorar si eliminarlas realmente nos ayudaría a mejorar la experiencia general en el sitio.

Así que eliminamos las etiquetas flotantes y rediseñamos los campos de entrada, colocando las etiquetas sobre el campo de entrada, tal como lo sugirió Adam. También aprovechamos la oportunidad para agregar algunos ajustes sutiles a nuestras formas reales, y todavía estamos trabajando en ello. Pero el resultado ya se veía mejor.

Después de algunos días de mejoras, nos topamos con problemas de estilo con el autocompletado . Queríamos ajustar el tamaño de la fuente y la fuente utilizada con autocompletar con la pseudoclase CSS :-webkit-autofill (coincide cuando un elemento <input> tiene su valor autocompletado por el navegador), pero no es compatible con un gama de navegadores y, francamente, causó bastante molestia cuando un valor autocompletado se valida una vez que el visitante abandona un campo de entrada.

De hecho, tuvimos que investigar varios casos para el diseño del formulario:

• ¿Qué sucede cuando no se proporciona ningún dato ?
• ¿Qué sucede cuando recuperamos los datos de localStorage y los insertamos automáticamente en los campos de entrada, pero luego no se activó el autocompletado?
• ¿Qué sucede cuando algunos valores se completan automáticamente , pero otros no?
• ¿Qué sucede con la validación en línea y cuándo validamos?
• ¿Qué sucede si algunos campos de entrada autocompletados tienen errores ?
• ¿Cómo deberían aparecer los valores de entrada en :active y en :focus ?

Francamente, esto resultó ser una madriguera de conejo, y todavía estamos investigando todos estos problemas en este momento. Dado que la gran mayoría de nuestros lectores (personas maravillosas como usted) utilizan el autocompletado, vale la pena dedicar tiempo a diseñar una experiencia a su alrededor.

Después de algunos refinamientos, alrededor de 2 semanas después de la publicación del artículo inicial de Adam, implementamos los cambios en vivo . Logramos resolver muchos problemas de accesibilidad y de diseño en dispositivos móviles simplemente eliminando las etiquetas flotantes. Pero todavía no podemos decir si tuvo algún impacto en las métricas comerciales; bueno, tendremos que esperar el lanzamiento de un gran libro para ver eso.

Puntuaciones verdes en Lighthouse en dispositivos móviles

Trabajar para mejorar el rendimiento fue un viaje continuo en SmashingMag durante un tiempo. A fines del año pasado, notamos que habíamos visto una caída considerable en el rendimiento en 2020, así que nos arremangamos y nos pusimos a trabajar. Al cambiar la entrega de CSS y JavaScript, aterrizamos en el área de puntaje verde para la mayoría de las páginas del sitio en la vista de escritorio; sin embargo, el rendimiento en dispositivos móviles seguía siendo bastante bajo , con un promedio de entre 60 y 70 puntos de Lighthouse para la mayoría de los artículos.

El mensaje final para una optimización más agresiva fue el panel de control "Core Web Vitals" en Google Search Console. El 19 de febrero, se marcaron más de 3590 artículos con una puntuación CLS deficiente (>0,25), en computadoras de escritorio y dispositivos móviles. Primero pensamos que podría estar relacionado con los ajustes del banner de cookies que hicimos recientemente, pero resultó que era una Actualización de la Búsqueda de Google que parecía estar penalizándonos más agresivamente por un CLS alto.

Así que recurrimos a Twitter para preguntarle a la comunidad si alguien tenía más sugerencias sobre lo que podríamos hacer. Los comentarios fueron fantásticos de personas de todo el mundo, con algunas revisiones exhaustivas enviadas a través de mensajes directos de Twiter y opiniones generales de personas sobre lo que podríamos hacer.

Patrick Meenan sugirió retrasar la instalación del trabajador de servicio, que implementamos el mismo día. Aparentemente, el trabajador del servicio se estaba instalando y activando antes que LCP y estaba causando controversia.

Gael Metais sugirió crear subconjuntos de fuentes web de manera más agresiva y buscar problemas de almacenamiento en caché con nuestros archivos AVIF. Al día siguiente subdividimos las fuentes y las publicamos. No pudimos solucionar el problema de AVIF rápidamente debido a la forma en que se ejecuta actualmente la administración de medios, pero luego Barry Pollard sugirió probar si el uso de la codificación base64 para las imágenes ayudaría.

La codificación Base64 parecía un concepto un poco extraño en el mundo de HTTP/2, pero decidimos construir un pequeño prototipo para probar si ayuda. Entonces, ¿lo hizo? Oh, sí, seguramente lo hizo.

Nos sorprendieron mucho los primeros resultados. Después de algunas iteraciones, terminamos publicando nuestras fotos de perfil de autor de LCP de una manera un poco enrevesada pero bastante efectiva:

 <picture> <source type="image/avif"> <img src="https://.../author.jpg" loading="eager" decoding="async" width="200" height="200" alt=""> </picture>

• Si un navegador es compatible con AVIF, obtiene una cadena codificada en base64 de la imagen AVIF (sin solicitud del navegador).
• Si un navegador no es compatible con AVIF, obtiene un archivo JPEG (en caché correctamente),
• La negociación de contenido ocurre a través <picture> + srcset en el navegador.

Esto funcionaría solo para las fotos de perfil de autor de LCP en la página de inicio y en las páginas de artículos. En este momento, alrededor del 35% de nuestro tráfico móvil está en iOS , por lo que esos usuarios no obtendrían las imágenes más rápido, pero codificar solo una imagen JPEG grande, o codificar archivos AVIF y JPEG inflaría innecesariamente HTML que queríamos evitar.

Luego ajustamos nuestra compilación para generar cadenas base64 para archivos AVIF automáticamente durante el tiempo de compilación (si las imágenes del autor están disponibles como imágenes AVIF). Eso también nos facilita eliminarlo cuando ya no lo necesitamos.

Además, eliminamos los duplicados y las redundancias con YellowLab.Tools, refactorizamos algunos CSS en función de los informes de las herramientas de auditoría de CSS y ajustamos la configuración de nuestra lista de navegadores para reducir las optimizaciones para IE10 e IE11.

En total tenemos:

• redujo la carga útil de las fuentes web en un 38 %,
• redujo el tamaño de CSS crítico en un 14%,
• redujo el tamaño de los archivos JS en un 8%,
• (probablemente) aumentó el tamaño de HTML en alrededor del 1%,

¡El impacto fue bastante notable! Por primera vez en años, hemos encontrado nuestro camino hacia la zona de puntaje verde de 90–95 en dispositivos móviles , mientras que también logramos rondas de 96–100 en computadoras de escritorio . Y eso con una aplicación React ejecutándose en segundo plano y muchas secuencias de comandos detrás de escena.

Todavía queda mucho trabajo por hacer, especialmente en el mundo de JavaScript, pero parece que estamos en el camino correcto; además, estamos a punto de implementar f-mods con la amable y generosa ayuda de Simon Hearne.

Y lo mejor: todo el crédito es para la increíble comunidad y las personas generosas, apasionadas y amables que nos han estado enviando sugerencias y sugerencias a través de Twitter. Por eso, estamos muy agradecidos, esa es la verdadera fortaleza y amabilidad de las personas en la comunidad. ¡Gracias! ️

Nueva serie de artículos sobre Smashing

Sin embargo, estábamos ocupados no solo con el rendimiento y las optimizaciones de UX. Probablemente visite el sitio debido a los artículos que publicamos, por lo que hemos estado experimentando con algo nuevo.

En marzo, comenzamos a trabajar en una nueva serie de artículos dedicados a herramientas y recursos que pueden ayudarlo como diseñador o desarrollador a mejorar en su trabajo. Podrías verlos como buenos resúmenes a la antigua, pero nos tomamos el tiempo para preparar piezas con punteros que puedas usar de vez en cuando con el tiempo .

Comenzamos con herramientas en torno a CSS, pero espere más piezas similares en todo lo demás del front-end. Esperamos mantenerte alerta con ellos, ¡así que prepárate! Y aquí están los primeros artículos que hemos publicado hasta ahora:

• Herramientas de auditoría de CSS
• Generadores de CSS

También nos hemos estado comunicando para invitar a nuevos autores y personas inteligentes como usted a trabajar en estudios de casos interesantes de sus proyectos en curso. Comuníquese con nosotros si recientemente ha estado trabajando en un proyecto interesante y desafiante, ya sea sobre accesibilidad, CSS/JS, rendimiento, migración, refactorización o prácticamente cualquier otra cosa. No se preocupe si nunca ha escrito antes: estamos aquí para ayudarlo y guiarlo.

Además, si ha lanzado una herramienta de código abierto y le gustaría llamar más la atención sobre ella, háganoslo saber y nos encantaría que presente su proyecto aquí en la revista también. Y, por supuesto, si tiene algún comentario, déjelo aquí y háganos saber lo que piensa.

Nuevos talleres en línea sobre Smashing

Hace casi un año, comenzamos a realizar nuestros propios talleres en línea, y todos y cada uno de ellos han sido una experiencia increíble para todo nuestro equipo. Con asistentes maravillosos de todo el mundo que se unieron para aprender juntos, muchas ideas cobraron vida, especialmente en las sesiones de codificación y diseño en vivo.

Aquí hay una breve descripción de los talleres que hemos planeado para los próximos meses :

Ah, también tenemos paquetes de talleres de los que puede elegir 3, 5 o incluso 10 boletos para los talleres de su elección: en curso, próximos o futuros. Además, no dude en suscribirse aquí si desea ser el primero en recibir una notificación cuando surjan nuevos talleres. Además, también tiene acceso a boletos anticipados .

Nuestra reunión gratuita: ¡Únete a Smashing Meets!

El 27 de abril, puede unirse a nosotros en vivo en Smashing Meets, una reunión en línea amigable e inclusiva para personas que trabajan en la web. Esta edición de " Las acciones hablan más fuerte " presenta tres sesiones increíbles en las que nuestros expertos diseñarán y codificarán en vivo para ayudar a una ONG increíble a obtener un sitio mejor.

Smashing Meets es gratis para todos, ¡así que dígales a sus amigos y colegas que se unan! Por supuesto, nos encantaría que te unieras a nuestra comunidad y te hicieras miembro. Una Membresía Smashing comienza en solo 3 USD al mes. Obtiene acceso a todos los Smashing Books digitales, seminarios web y recibe muchos obsequios y descuentos amigables para eventos, servicios y productos.

Smashing Podcast: sintoniza e inspírate

El año pasado, publicamos un nuevo episodio de Smashing Podcast cada dos semanas, ¡y los comentarios fueron increíbles ! Con más de 56 000 descargas (poco más de mil por semana, ¡y creciendo!), hemos tenido 34 invitados en el podcast con diferentes antecedentes y ¡mucho para compartir!

Si no ve un tema que le gustaría escuchar y obtener más información, no dude en comunicarse con el presentador Drew McLellan o comunicarse a través de Twitter en cualquier momento. ¡Nos encantaría saber de usted!

Y, por último... Nuestro amistoso boletín informativo por correo electrónico

Con nuestro Smashing Newsletter, nuestro objetivo es brindarle información útil y práctica y compartir algunas de las cosas útiles en las que la gente está trabajando en la industria web. ¡Hay tanta gente talentosa trabajando en proyectos brillantes y le agradeceríamos que ayudara a correr la voz y darles el crédito que se merecen! Además, al suscribirse, no hay correos de terceros ni publicidad oculta, y su apoyo realmente nos ayuda a pagar las facturas. ️

JavaScript, paquetes, marcos

• ¿Cuál es la herramienta de agrupación adecuada?
• Elegir el marco de JavaScript correcto
• this contra that
• Búsqueda de operadores de JavaScript
• Estrategias para migrar a TypeScript
• La lista de lectura del desarrollador de JavaScript

Técnicas y herramientas CSS

• ¿Qué significa 100%?
• Las cosas sorprendentes que CSS puede animar
• Crear aleatoriedad con CSS puro
• Creación de diseños de una sola línea robustos y modernos
• CSS de auditoría
• Selectores de CSS avanzados
• Mejorar el contraste con una superposición

Reuniones y productividad de correo electrónico

• Codificación de revisiones de código con escaleras de retroalimentación
• Hacer tiempo para lo que realmente importa
• Mejorar el correo electrónico
• Sincronice temas de color para su entorno de desarrollo
• Recopilación de comentarios de los clientes
• Cómo escribir un anuncio de trabajo

Accesibilidad Front-End

• Modales accesibles
• Pestañas accesibles
• Implementación de navegación de teclado en toda la aplicación
• Buscar y solucionar problemas de accesibilidad
• Apoyar las preferencias del usuario con prefers-reduced-*
• Autocompletar accesible
• Cómo hacer que los enlaces de íconos sean accesibles

¡Eso es un envoltorio!

¡Uf, gracias por leer todo el camino hasta el final! Somos un pequeño equipo con poco más de 15 personas apasionadas y dedicadas repartidas por todo el mundo, y hacemos todo lo posible para ayudarte a ti y a nuestra maravillosa comunidad a mejorar en nuestro trabajo. ¡Así que gracias por quedarte tanto tiempo!

Francamente, estamos ansiosos por verte en línea y en persona, pero una cosa es cierta: apreciamos sinceramente que estés arrasando mes tras mes, y por eso, te estamos eternamente agradecidos. Y, por supuesto, lo mantendremos informado sobre nuestras actualizaciones, ¡seguro! ;-) (¡Pero siempre puedes suscribirte a nuestro boletín también!)

¡Manténganse aplastando, todos!