4 maneras en que puede practicar el diseño web sostenible

La devastación climática es un problema creado por el hombre: como diseñadores en el espacio digital, ¿qué podemos hacer al respecto? Mucho, en realidad. Los diseñadores pueden hacer pequeños cambios en su trabajo diario que pueden tener un gran impacto para aligerar nuestra carga en la web y la madre naturaleza.

Tyson Read, director de gestión de productos, y el diseñador de productos Michael Weimann creen que el primer paso hacia un diseño web mejor y más sostenible es equiparse con el conocimiento y la práctica que puede transmitir a los demás. Les apasiona crear productos digitales sostenibles y comparten cuatro formas prácticas de hacer que su diseño funcione de manera más sostenible:

• Aclare las imágenes para reducir las emisiones
• Limpia tu código
• Elija colores sostenibles
• Elige tipografías ecológicas

También creen que el espacio del diseño web sostenible está maduro para la innovación . “Crear una experiencia digital que responda directamente a los impactos climáticos no solo ayuda a abordar el problema, sino que también lo hace sentir más inmediato para cualquiera que visite ese sitio”, dijo Read. “Es un ejemplo fenomenal de buen diseño”.

Aclare las imágenes para reducir las emisiones

Si te enfocas en una cosa, ser consciente de cómo administras las imágenes podría tener el mayor impacto ambiental positivo. Las imágenes y los videos requieren más energía para transmitir y ver que el texto. Un informe de Cisco estima que hoy en día el tráfico de video representa el 82 % de todo el tráfico de Internet de los consumidores, lo que representa un aumento del 73 % en 2017.

Una innovación sobre el peso que tienen las imágenes en la web es una revista en línea de ClimateAction.tech llamada The Branch . Su sitio está diseñado para reaccionar a la cantidad de carbono que produce la red eléctrica. El diseño dinámico del sitio se adapta para consumir menos energía al cargar imágenes en blanco y negro u omitirlas por completo cuando se utilizan muchos combustibles fósiles. Read dijo que están pensando en el diseño de formas que él nunca consideró.

Aquí hay algunos consejos sobre cómo reducir y comprimir imágenes para aligerar su huella de carbono:

• Utilice imágenes monocromáticas y en escala de grises
• Evite los carruseles de imágenes porque afectan el rendimiento de la CPU
• Comprime imágenes con herramientas como TinyPNG o Image-Alpha
• Duplicar una imagen en ancho/alto más que duplica su tamaño. En su lugar, genere múltiples versiones de imágenes para diferentes diseños y use marcado receptivo para informar a los navegadores qué imagen cargar
• Pruebe técnicas para aplicar un desenfoque sutil a áreas menos importantes de una imagen que pueden reducir el tamaño de la imagen en general. Para empezar, echa un vistazo a este vídeo de Una Kravets
• Use gráficos vectoriales escalables (SVG) para mostrar imágenes vectoriales que se pueden escalar a pantallas de alta resolución cuando sea necesario
• Considere formatos de imagen más eficientes como WebP (alrededor de un 30 % más pequeño que los archivos JPEG)
• Los sprites de CSS extraen imágenes en una sola imagen de fondo y "minifican" sus archivos JavaScript y CSS

Limpia tu código

Danny Van Kooten es un programador holandés que tuvo un gran impacto al limpiar su código. Creó un complemento de Mailchimp para WordPress y luego, en 2020, refactorizó su complemento para enviar 20 KB menos de datos para cada uso. Eso no es mucho, pero a la escala de 2 millones de sitios que usan Mailchimp, suma. Estima que al eliminar 20 KB de código, está reduciendo la producción mensual mundial de CO2 en 59 000 kilogramos. Eso es casi lo mismo que volar de Nueva York a Amsterdam y viceversa 85 veces.

Otra opción es usar Salesforce para ayudarlo a llegar a cero operaciones netas . “Si diseña y construye sobre la plataforma Salesforce, nuestras operaciones son netas cero”, dijo Weimann. “Significa que obtenemos la energía renovable que podemos y compramos energía limpia en otros lugares para compensar lo que no podemos obtener en tiempo real. El objetivo es energía renovable las 24 horas del día, los 7 días de la semana”. Dicho esto, muchos diseñadores trabajan en proyectos que usan código personalizado fuera de Salesforce, donde es más difícil compensar su huella de carbono . Incluso si es cero neto, siempre es mejor reducir su huella de carbono y evitar la necesidad de compensar en primer lugar.

Maneras de reducir el uso de energía con menos código:

• Use bases de código compartidas, marcos y herramientas declarativas que se optimizarán con el tiempo
• Use soluciones listas para usar de Lightning Design System en lugar de crear soluciones personalizadas
• Preste atención a las métricas y emisiones relacionadas con el uso y el ancho de banda de la unidad central de procesamiento (CPU) porque las CPU y las GPU consumen mucha energía y deben limitarse
• Optimice las redes de entrega de contenido
• Utilice servicios de alojamiento web ecológicos que utilicen energía renovable en lugar de comprar compensaciones. “En última instancia, queremos descarbonizar la red eléctrica/internet”, dijo Read.
• Evalúe y vuelva a evaluar su huella de implementación con regularidad.

Elija colores sostenibles

Desde que se inventó Internet en 1983, se ha vuelto pesado con código excesivo, imágenes de gran tamaño, páginas innecesarias y mucho más. Una estimación amplia que incluye todos los centros de datos, equipos de redes y dispositivos conectados sitúa la huella de carbono total de Internet en el 2 % de las emisiones globales . Esa es aproximadamente la misma contribución que las emisiones de combustible de la industria de la aviación o las emisiones de países enteros como Canadá o Francia . El color juega un papel importante porque muchas de las pantallas de nuestros teléfonos inteligentes, computadoras portátiles y televisores iluminan cada píxel individualmente.

Más allá del agotamiento de nuestra batería y el medio ambiente, la accesibilidad de sus opciones de color también puede tener un impacto negativo en los usuarios.

Estos son algunos consejos para elegir colores asequibles y de bajo consumo:

Elige tipografías ecológicas

El lugar donde obtiene sus tipos de letra puede marcar la diferencia en su huella de carbono. Las fuentes del sistema son nativas de los dispositivos, lo que significa que se cargan rápidamente y requieren menos energía para funcionar. Las fuentes web se cargan desde Internet, pero dependiendo de dónde se alojen pueden reducir su impacto ambiental negativo.

Michael comparte formas de reducir el uso de energía con fuentes web:

• Use fuentes web alojadas directamente en lugar de servicios de suscripción
• Si usa fuentes web alojadas, debe tener en cuenta cuántos pesos y estilos usa porque cada archivo de fuente agrega peso
• Puede obtener tanta variación como necesite utilizando fuentes OpenType variables que permiten a los usuarios escalar el peso y la inclinación de un solo archivo de fuente.

Pequeñas acciones hacen una gran diferencia

Cuando se trata de diseño web sostenible, cuanto más sepamos, mejor será nuestro mundo y las experiencias de los usuarios. Cada acción importa. Puede comenzar por elegir el libro Diseño web sostenible de Tom Greenwood y compartir sus aprendizajes con los demás. También puede educarse con los módulos, libros y herramientas de diseño sostenible de Trailhead. Estamos todos juntos en este viaje, lo que significa que pequeñas acciones a gran escala pueden marcar una gran diferencia.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://www.salesforce.com/blog/4-ways-you-can-practice-sustainable-web-design/