Skip to content

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”.

Diseño para la Sostenibilidad

Aplique los principios de diseño y las mejores prácticas a los desafíos más urgentes del mundo.

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

Diseño sostenible

Utilizar principios de diseño para fortalecer la relación entre empresa y sociedad.

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.

Conceptos básicos de la nube Net Zero

Utilice Net Zero Cloud para obtener información crítica sobre la huella de carbono de su empresa.

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.

Mejores prácticas para el diseño sostenible

Utilice herramientas y estrategias sencillas para llevar el diseño sostenible a su trabajo.

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/

Últimas novedades 
de EGA Futura
1954
Desde hace más de 25 años potenciamos a las Empresas de Iberoamérica

🎬 Video de Juan Manuel Garrido » Claves para tu Productividad diaria 🙌✅

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Conceptos básicos con EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Configuración de EGA Futura Windows

🎬 Video de EGA Futura » Facturación Electrónica en Uruguay » Funcionamiento con EGA Futura Windows

🎬 Video de EGA Futura » Configuración de la Plataforma EGA Futura

🎬 Video de EGA Futura » Configuración de usuario en EGA Futura

🎬 Video de EGA Futura » Como automatizar la publicación en Redes Sociales?

🎬 Video de Juan Manuel Garrido » Cómo restaurar la configuración de fábrica de EGA Futura Windows sin perder la información

🎬 Video de Juan Manuel Garrido » Factura electrónica: Prueba de Factura Electronica previa a la activacion

🎬 Video de EGA Futura » Como se registran los Beneficios de cada Empleado en la base de datos de EGA Futura

🎬 Video de EGA Futura » EGA Futura Time Clock » Reloj de Control horario y asistencia

🎬 Video de EGA Futura » Como registrar Observaciones en un Empleado dentro de EGA Futura People?

🎬 Video de EGA Futura » Cómo registrar la Educación de cada Empleado en EGA Futura People?

🎬 Video de EGA Futura » Como hacer la Desvinculación de un Empleado? (Offboarding)

🎬 Video de EGA Futura » Como registrar Habilidades o Skills de empleados dentro de EGA Futura

🎬 Video de EGA Futura » Como hacer el Onboarding o Proceso de Incorporación de un Empleado?

🎬 Video de EGA Futura » Cómo administrar Turno de trabajo dentro de EGA Futura

🎬 Video de EGA Futura » Que es un Ticket interno dentro de la Plataforma EGA Futura

🎬 Video de EGA Futura » Que son los Entrenamientos de Empleado en EGA Futura people?

🎬 Video de EGA Futura » Qué son los Epics dentro de EGA Futura

🎬 Video de EGA Futura » Qué es EGA Futura People?

🎬 Video de EGA Futura » EGA Futura People » Asistencias

🎬 Video de EGA Futura » Soporte EGA Futura » Software de Gestión Windows vs Software de Gestión Nube 🤩

🎬 Video de EGA Futura » ツ Comparando un Objeto con un Fichero

🎬 Video de EGA Futura » ✍( ͡* ͜ʖ ͡*) ¿Qué es una Aplicación?

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