Historias

La web de Monnou: un caso de web sostenible

24/3/2023

Cuando hablamos de sostenibilidad, de economía circular o de impacto positivo, a menudo olvidamos los impactos que tiene el diseño digital. Si hablamos de economía circular, lo primero que nos viene a la mente son productos físicos o productos industriales. Queda muy claro que estos productos tienen un impacto en la extracción de materias primas, en su producción, en su uso y posteriormente en su fin de vida. Pero, ¿qué ocurre con los productos digitales? Webs, apps, plataformas diversas… También tienen impactos. Consumen energía, pueden no ser accesibles o inclusivos, y con su comunicación pueden fomentar comportamientos no sostenibles. Por ello, el diseño digital sostenible es un conjunto de prácticas que ha venido para quedarse.

¿Por qué un diseño web sostenible?

¿Qué nos aporta invertir en un diseño web sostenible?

En primer lugar, como marcas éticas y de impacto positivo, nos permite estar alineadas con nuestros valores y nuestro propósito. Considerar la sostenibilidad de cada uno de los aspectos de nuestra marca, incluida la web, nos permite no contribuir a prácticas como el greenwashing o el socialwashing. Con una marca y una web sostenibles, estaremos comunicando con honestidad ante nuestros clientes y colaboradores.

Además, si aplicamos la sostenibilidad en el propio proceso de diseño web, ahorraremos tiempo de diseño y desarrollo. Por ejemplo, empleando métodos de trabajo ágiles (Lean). Esto contribuye a un mayor bienestar de los equipos de diseño y desarrollo, y a reducir costes y riesgos en el lanzamiento de nuestros productos y servicios digitales.

Una web sostenible no sólo consume menos energía, también debe ser más accesible. Así, puede ofrecer una experiencia de usuario mejor, con un tiempo de carga menor: las personas que visiten nuestra página web estarán más satisfechas.

El diseño web sostenible también implica hacer que el contenido se encuentre de forma fácil y rápida. Por ello, contribuye a mejorar el posicionamiento SEO; de hecho, el SEO es un gran aliado de la sostenibilidad digital.

Algunos criterios del impacto de la web son importantes para relacionarnos, como marcas, con el sector público. Por ejemplo, los estándares WCAG, de accesibilidad digital, son obligatorios para que un diseño web cumpla con los requisitos del kit digital. ¿Ocurrirá pronto lo mismo con otros requisitos de sostenibilidad medioambiental?

Ya estamos viendo cómo, para obtener acceso a muchas ayudas y subvenciones, la sostenibilidad medioambiental es un requisito para las marcas. Si miramos el contexto europeo, cada vez existen más incentivos para caminar hacia una transición digital y ecológica. De hecho, los fondos Next Generation se centran, sobre todo, en la transformación digital y en la sostenibilidad. Parece que la digitalización y la sostenibilidad van de la mano pero, para hacer que esto sea real, necesitamos considerar los impactos de nuestras soluciones digitales.

Diseñando una web sostenible

Vale, ya nos hemos convencido de la necesidad de un diseño web sostenible. Pero, ¿cómo podemos llevarlo a la práctica?

En Monnou hemos tenido en cuenta estrategias de sostenibilidad en nuestra propia web.

Para nosotros, el primer paso para que una web sea sostenible es que el negocio también lo sea (o esté en ello). El primer paso es tener un propósito de impacto positivo, que la marca tenga la sostenibilidad integrada en sus valores y su estrategia. Si una marca no ofrece productos y servicios que contribuyan a un mundo mejor, ¿de qué sirve que su web sea sostenible?

El siguiente paso, podría ser la elección de un hosting verde, es decir, uno que funcione con energías renovables. Cada vez más proveedores de hosting están transitando hacia una producción renovable, y esto no implica necesariamente mayores costes para el cliente. En el caso de Monnou, hemos utilizado el servidor de Amazon Web Services (AWS). AWS estableció unos compromisos con la producción de energía renovable y sigue avanzando en el camino de la sostenibilidad.

Otra de las estrategias que hemos seguido en Monnou, es optimizar el contenido. No poner demasiadas imágenes y vídeos ahorra mucha energía en el uso de la web. Las imágenes que sí ponemos, se pueden incluir en formatos más ligeros (como el WebP, en lugar de PNG), y con un tamaño ajustado al que se va a mostrar en pantalla.

Igual que las imágenes, otros archivos que necesitamos subir a la web también deben ser optimizados. Por ejemplo, podemos subir sólo las fuentes tipográficas que vamos a emplear, en lugar de todas las variantes que hay disponibles (light, regular, bold, extrabold…). De igual forma, reducir el número de familias tipográficas no sólo ayuda a la claridad del diseño, también a la sostenibilidad.

El contenido debe ser fácil y rápido de encontrar. Por ello, diseñar una arquitectura de la información que facilite encontrar el contenido, y aplicar buenas prácticas de posicionamiento SEO, es importantísimo. Hay una relación entre SEO, sostenibilidad y accesibilidad. Por ejemplo, en Monnou hemos incluido todas las imágenes con textos alternativos (‘alt’). Esto, si se realiza bien, ayuda a que los usuarios que no ven puedan navegar más fácilmente la web, ya que los asistentes virtuales pueden leer la descripción de la imagen en voz alta. Pero también facilita a los motores de búsqueda encontrar el contenido, lo que contribuye a mejorar el posicionamiento SEO. Por otro lado, si algún dispositivo no consigue mostrar las imágenes por cualquier razón (por ejemplo, mala conexión a internet), la web puede mostrar el texto alt en su lugar.

Otra estrategia de sostenibilidad que hemos empleado en nuestra web es el lazy loading o ‘carga diferida’. Esto quiere decir que el contenido que está fuera de la pantalla (porque aún no se ha hecho scroll hasta él), no se carga hasta que no es necesario.

También es importante revisar el código de la web, y evitar tener código que no se está utilizando. El exceso de código hará que una web sea más lenta y menos sostenible.

Otros aspectos de accesibilidad que podemos contemplar son los contrastes entre los tipos de letra (títulos, subtítulos, etc.). También, evitar incluir en nuestro diseño web elementos visuales que puedan distraer del contenido principal.

Estas son sólo algunas de las estrategias que podemos seguir para hacer un diseño web sostenible y de impacto positivo. Otra estrategia es ayudar, mediante la experiencia de usuario, a que las personas tomen las decisiones más sostenibles en tu web o en tu app. También, usar un lenguaje inclusivo y no sexista. Hay muchas otras cuestiones que se pueden explorar, y el diseño web sostenible debe ser un camino y un aprendizaje continuo.

Evaluando el impacto de la web

¿Cómo podemos asegurarnos de que nuestras estrategias de diseño web sostenible son efectivas?

Si bien evaluar los impactos de la actividad digital es complicado, existen varias herramientas de evaluación. Una de ellas es Ecograder, desarrollada por la agencia Mightybytes.

Normalmente, en las páginas con mucho contenido como la Home o la página de proyectos, las puntuaciones que se obtienen son más bajas que en otras. En otras páginas que nos permiten poner menos contenido pesado (como fotos y vídeos), conseguimos puntuaciones mayores. Es el caso de la página de servicios, con una puntuación por encima de 90/100 y unas emisiones de CO2 menores a 0,2g por visita. Como la página funciona con un servidor verde, esta energía procede de energías renovables.

A pesar de tener una buena puntuación en una herramienta de evaluación concreta, la sostenibilidad y el diseño web sostenible son un proceso continuo. Siempre hay espacio para la mejora, y, como se ha dicho, es importante seguir explorando nuevas estrategias.

Diseñemos un mundo sostenible y bello

¿Quieres recibir estas Historias directamente en tu bandeja de correo y estar al tanto de todas las novedades sobre diseño, innovación y sostenibilidad?