¿Qué significa exactamente "diseño web sostenible"? ¿Cómo sabes lo ecológico que es tu sitio ? ¿Cómo puedes hacer que tu sea más sostenible y cuáles son los beneficios para los clientes de tu ? He recopilado las respuestas a estas preguntas y algunas herramientas importantes para ti en este artículo.

Datos sobre el devorador de energía Internet

¿Pero cómo puede ser eso realmente? ¿No nos convertimos en digitales específicamente para proteger nuestro medio ambiente? La realidad aquí es algo diferente: Por desgracia, lo digital no significa automáticamente "verde". Desde las granjas de servidores hasta los centros de datos y el propio dispositivo final, todo consume energía para funcionar.

Se calcula que un sitio web medio produce 1,76 gramos de CO₂. Con 10.000 visitantes al mes, esto supone 211 kg de CO₂ al año, ¡para un solo sitio! 

¿Has pensado alguna vez en cuántos recursos se necesitan para tu ? Más de lo que crees, ¡garantizado! Cada solicitud que envía el sitio web tu se recibe, se procesa, se devuelve y, si es necesario, se guarda en cualquier momento. Esto supone una gran cantidad.

Nuestros sitios web deben ser más ecológicos

1. Hosting WordPress y diseño web sostenible

Mientras tanto, muchos proveedores de alojamiento de WordPress se están sumando y confiando en las energías renovables. Porque una cosa está clara: el alojamiento de WordPress consume energía y provoca importantes emisiones de CO₂. En Raidboxes , la sostenibilidad y la protección del clima no son sólo frases vacías, sino una parte integral de la cultura corporativa.

Puedes determinar fácilmente si tu es "verde" con la ayuda de esta herramienta de la Fundación Web Verde. Si el resultado es negativo, debes cambiar de proveedor de alojamiento de WordPress. Puedes ver una comparación aquí. 

2. diseño y diseño web sostenible

Un diseño adecuado puede evitar el consumo innecesario de energía, por ejemplo si tu no carga contenidos innecesarios y no deseados en primer lugar. ¿Cómo puedes combinar diseño y sostenibilidad y ahorrar recursos?

El móvil primero

Con mobile first, optimizas el contenido de tu para su uso en smartphones desde el principio. Las páginas optimizadas no tienen que cargar medios de gran tamaño en los dispositivos móviles. Están programados de tal manera que no hay que sobrescribir los estilos de escritorio, sino que están diseñados directamente para el dispositivo más pequeño.

Experiencia del usuario

Ya te he hablado de las ventajas de una usabilidad bien planificada. Una experiencia de usuario que funcione bien te ayuda a ti y a tus clientes a hacer más sostenible tu . Minimizas los desvíos no deseados tus usuarios. Lo ideal es que sólo se carguen las páginas que el usuario realmente quiere visitar. Si reduces los clics no deseados, envías menos solicitudes de datos y, por tanto, consumes menos energía.

Recuento de páginas

Aquí también puedes trabajar en tus Sostenibilidad mientras planificas el sitio web. En general, cuantas menos páginas haya que cargar, menos peticiones de datos se envían. Además de facilitar la navegación en tu sitio , también tiene sentido desde el punto de vista ecológico combinar el contenido y reducir el número de páginas.

Deberíamos utilizar los medios de comunicación, como las imágenes, las animaciones y los vídeos, de forma más consciente y específica. ¿Todas las imágenes, vídeos, iconos y animaciones que has planeado para tu sitio añaden realmente valor? ¿O puedes prescindir de algunos de ellos?

3. desarrollo y diseño web sostenible

Velocidad de página (pagespeed)

Hace tiempo que la velocidad de las páginas forma parte del pequeño 1×1 del diseño web. ¿Por qué también es bueno para el medio ambiente prestar atención al buen funcionamiento? ¡Un sitio que carga más rápido es la consecuencia de que hay pocos datos que cargar!

El motivo por el que tu pagespeed es lento puede tener varias razones. Muchas herramientas te proporcionan no sólo un análisis, sino también soluciones para mejorar el rendimiento.

Para este artículo, he puesto a prueba mi propia sitio . Como verás en mi autocomprobación, un análisis puede resultar incluso completamente opuesto, dependiendo de la aplicación que se utilice para las pruebas. Por tanto, debes considerar qué objetivos persigues con las pruebas.

Aquí tienes una comparación de la herramienta para desarrolladores de Chrome Google Lighthouse y Google PageSpeed Insights. Ambas herramientas son puntos de referencia útiles para la optimización onpage.

Ecograder se creó específicamente para comprobar la sostenibilidad de los sitios web. Personalmente, considero que Ecograder es el más fácil de usar. La información es concisa y fácil de entender, y los consejos para mejorar la velocidad de la página son útiles.

El sitio web Calculadora de Carbono también realiza principalmente pruebas de sostenibilidad. La representación pictórica del resultado me parece positiva. Las comparaciones con unidades de medida menos abstractas facilitan la toma de conciencia de la magnitud del propio trabajo.

El servicio de Website Carbon me parece en general informativo, pero me faltan los detalles individualizados que conozco de Google Tools así como de Ecograder. Además, me parece inadecuada la comparación con otros sitios web probados como medida para los proyectos profesionales y la argumentación.

Webpagetest es una herramienta excelente, especialmente para los desarrolladores, porque entra en gran detalle. Puedes hacer pruebas a partir de diferentes preajustes. Desde las "Pruebas sencillas" hasta los "Ajustes avanzados", que te permiten excluir varios componentes del sitio web tus , o para ser más precisos, añadirlos mediante un fragmento de código, y al mismo tiempo entregar un informe de Google Lighthouse, hasta la prueba comparativa de dos sitios web, "todo" es posible aquí. Los resultados también se desglosan técnicamente hasta el más mínimo detalle. Por lo tanto, este sitio web se utiliza para realizar pruebas avanzadas, mientras que Google y compañía hacen su análisis de forma algo más general.

Imágenes y otros medios

Ya he mencionado la necesidad de replantear el contenido que se ofrece. Ahora se trata de integrar las imágenes de forma óptima. 

Tinypng funciona de maravilla para comprimir imágenes, y normalmente sin ninguna pérdida de calidad apreciable. Puedes conseguir el mismo resultado con Photoshop y el ajuste "Exportar para la web". Si ya has integrado tus imágenes en un CMS, como WordPress, puedes optimizar la resolución con un plugin como Smush.

Si tienes muchas imágenes o iconos, puedes probar con sprites CSS. Funcionan de forma similar a los sprites en el desarrollo de juegos de ordenador. Aquí, las imágenes se integran una vez a través de una hoja de sprites. Después, se utiliza el CSS para determinar en qué coordenadas se encuentra cada imagen. Puedes encontrar más información sobre este tema aquí.

Las hojas de Sprite son múltiples imágenes/iconos que se combinan en un solo archivo. Los diseñadores suelen agrupar sus imágenes temáticamente. A partir de las coordenadas x e y correspondientes, las hojas se subdividen y se integran en consecuencia. De este modo, se carga un único documento que muestra varios componentes visuales.

Lazy Load es otra variante para la carga óptima de las imágenes. Aquí, las imágenes se cargan cuando el visitante las necesita. Actualmente existen innumerables plugins (gratuitos y de pago) para WordPress.

WordPress

Por supuesto, nosotros también nos preguntamos cuándo los planteamientos ecológicos de las empresas son auténticos: ¿Existe un internet sostenible? ¿Cómo de "verde" puede ser realmente WordPress? En el artículo WordPress y la sostenibilidad encontrarás el estado actual del debate en la comunidad de WP de habla alemana.

¿Qué contribución podemos hacer al diseño web sostenible y eficiente? ¿Cuáles son las palancas más importantes en el diseño cotidiano para ahorrar recursos? Pocos plug-ins y un tema ligero son los principales consejos en este caso.

La media de los sitios web de WordPress es de unos 600 KB. Si eliges el tema adecuado y tienes en cuenta el enfoque explicado anteriormente, puedes ahorrar un 50% o más. Puedes encontrar una pequeña selección de temas probados aquí.

Si tu ya está en marcha y cambiar de tema no es posible, puedesmejorar el rendimiento de tu WordPress con la ayuda de estos 10 ajustes.

Cómo convencer a otros para que se unan

 En realidad, las siguientes palabras clave ya deberían ser suficientes para convencer a los clientes de tu del diseño web sostenible: 

• Mejora de la usabilidad y la experiencia del usuario,
• diseños claros y fáciles de entender, 
• mejores clasificaciones SEO, 
• menor tiempo de carga y 
• Páginas optimizadas para móviles. 

Si todavía necesitas más argumentos, varias fundaciones también ofrecen las llamadas insignias, que puedes integrar en las páginas de los clientes de tus .

Si eliges un proveedor de alojamiento de WordPress que utilice electricidad ecológica sostenible y certificada, puede incluirse esta insignia:

• https://www.thegreenwebfoundation.org/ (por código)
• https:// wordpress.org /plugins/the-green-web-widget/ (vía plugin)

Por ejemplo, WebsiteCarbon también ofrece una insignia que puedes integrar en tus páginas para mostrar que el contenido de tu está construido de forma sostenible y ecológica.

Conclusión sobre el diseño web sostenible

Durante mi investigación sobre este tema, me encontré con innumerables estadísticas. Enviar un correo electrónico tiene el mismo impacto en el medio ambiente que utilizar una bolsa de plástico. Los libros suelen ser más ecológicos que los libros electrónicos. Comprar álbumes de música es más respetuoso con nuestros recursos que el streaming. La lista es interminable. Sobre todo, estas estadísticas sacuden nuestra idea general de que lo digital también significa "verde".

Aparte del hecho de que nosotros, como diseñadores y desarrolladores web, desempeñamos naturalmente un papel importante en el desarrollo de la web en el futuro, también podemos empezar por nosotros mismos y utilizar Internet de forma un poco más consciente.

Averigua qué aplicaciones de tus están en verde y cuáles necesitan ser limpiadas urgentemente: La herramienta ClickClean de Greenpeace te ofrece un interesante resumen de las aplicaciones (favoritas) de tus y te indica su valor ecológico.

Contribuciones que crean más conciencia para un futuro más verde: 

• Jack Lenox, por ejemplo, ha creado un tema para WordPress que sólo pesa 7 KB. 
• Brad Frost, en su blog DeathToBullshit, nos anima con un toque de humor a prescindir precisamente de eso. 
• Heydon Pickering da consejos de codificación sobre cómo hacer que tu sitio sea más ágil.

Tampoco debemos olvidar los efectos positivos que tiene Internet en nuestro entorno. Por ejemplo, el uso de la videoconferencia nos evita tener que viajar. Especialmente durante los últimos meses, todo el mundo debería haber tomado conciencia de cómo podemos utilizar Internet para evitar el uso de medios de transporte y reducir así las emisiones de CO2. 

Además, hay espacio de oficina que puede reducirse gracias a las oficinas en casa. Además, la red nos ofrece la oportunidad de unir fuerzas con otros: Por ejemplo, podemos utilizar plataformas para compartir el coche y reservar "estancias en casa" como AirBnB, que son más ecológicas que los hoteles.

Internet también facilita la difusión de información sobre la sostenibilidad y la protección del medio ambiente. La oferta y la compra de productos ecológicos (a los que de otro modo tendríamos menos acceso) también se encuentran, por supuesto, entre los efectos positivos de la industria digital, por nombrar sólo algunos.

Si quieres profundizar en el tema, te recomiendo el sitio web sustainablewebdesign.org como punto de partida. Los puntos más importantes se explican aquí en párrafos claros y se ofrecen posibles soluciones técnicas para su aplicación.