Diseño web sostenible

Diseño web sostenible: Cómo diseñar sitios web sostenibles

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

Datos sobre el devorador de energía Internet

Lo que cuesta nuestro consumo digital en energía

Según Websitecarbon, Internet consume 416,2 teravatios hora (TWh) al año. Eso es más o menos lo que consume Alemania sola. Si Internet fuera un país, ya tendría el sexto mayor consumo de electricidad del mundo en la actualidad.

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, pasando por 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! 

¿Ha 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 tuse recibe, se procesa, se devuelve y, si es necesario, se guarda en cualquier momento. Esto suma bastante.

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 suman y apuestan por 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.

Alojamiento ecológico para WordPress en Raidboxes

Si tienes un sitio web o una tienda online, consumes muchos recursos. Raidboxes lo contrarresta, con un alojamiento de WordPress que es positivo para el clima.

Puede determinar fácilmente si tues "verde" con la ayuda de esta herramienta de The Green Web Foundation. Si el resultado es negativo, debería cambiar de proveedor de alojamiento de WordPress. Puede ver una comparación aquí

La Fundación Web Verde
Raidboxes depende de la electricidad verde, sostenible y certificada, procedente de la energía hidroeléctrica.

2. diseño y diseño web sostenible

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

Primero el móvil

Con mobile first, se optimiza el contenido de tupara 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 los estilos de escritorio no tienen que ser sobrescritos, sino que están diseñados directamente para el dispositivo más pequeño.

Experiencia del usuario

Ya le he hablado de las ventajas de una usabilidad bien planificada. Una experiencia de usuario que funcione bien le ayuda a usted y a sus clientes a hacer más sostenible tu. Se minimizan los desvíos no deseados tususuarios. Lo ideal es que sólo se carguen las páginas que el usuario realmente quiere visitar. Si se reducen los clics no deseados, se envían menos solicitudes de datos y, por tanto, se consume menos energía.

Recuento de páginas

Aquí también se puede trabajar en tusSostenibilidad mientras se planifica el sitio web. En general, cuantas menos páginas haya que cargar, menos solicitudes de datos se envían. Además de facilitar la navegación en tusitio , también tiene sentido desde el punto de vista ecológico combinar los contenidos 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 ha planeado para tusitio realmente aportan valor? ¿O puede prescindir de algunos de ellos?

3. desarrollo y diseño web sostenible

Velocidad de las páginas

La velocidad de las páginas ha sido durante mucho tiempo 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 rendimiento? Un sitio que carga más rápido es la consecuencia de que haya pocos datos que cargar.

Sitios web más rápidos: mejor para el clima

Por ello, es aún más importante que optimice su sitio web y su tienda tu. Se trata de tucontribución personal a la protección del clima. Puede encontrar más información al respecto en nuestro libro electrónico Page Speed & Performance.

Por qué tupagespeed es lento puede tener varias razones. Muchas herramientas le proporcionan no sólo un análisis, sino también soluciones para mejorar el rendimiento.

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

faro de google
Este es el resultado que obtengo de la popular herramienta PageSpeed Insights.
gllighthouse
Google Lighthouse tambiéncomprueba la accesibilidad de mi sitio, entre otras cosas.

A continuación, 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 en la página.

ecograder
Ecograder proporciona buenos enfoques para la optimización en la página.

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 Carbon Calculator 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 que uno sea algo más consciente de la magnitud de su trabajo.

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

webpagetest
La popular herramienta Webpagetest profundiza en el tema.

Webpagetest es una herramienta excelente, especialmente para los desarrolladores, porque entra en gran detalle. Puedes probar desde diferentes preajustes. Desde las "Pruebas simples" hasta los "Ajustes avanzados", que permiten excluir varios componentes del sitio web tus, o para ser más precisos, añadirlos a través de un fragmento de código, y al mismo tiempo entregar un informe de Google Lighthouse, hasta las pruebas de comparación 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 realizan sus análisis de forma algo más general.

Imágenes y otros soportes

Ya he mencionado la necesidad de replantear los contenidos que se ofrecen. 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 la opción "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 bajo qué coordenadas se encuentra cada imagen. Puede 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 por temas. 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 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á el estado actual del debate en la comunidad de WP de habla alemana.

Sostenibilidad WordPress: únete tú también

Raidboxes ha apostado por un WordPress sostenible desde el principio. Consulte, entre otros, nuestros consejos sobre WordPress y sostenibilidad y sobre tiendas online ecológicas. ¿Quieres asumir más responsabilidades? Entonces lea nuestro artículo Alojamiento ecológico para WordPress.

¿Qué contribución podemos hacer al diseño web sostenible y eficiente? ¿Cuáles son las palancas más importantes del 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. Puede encontrar una pequeña selección de temas probados aquí.

Si tuya está en funcionamiento y cambiar de tema no es posible, puedesmejorar el rendimiento de tuWordPress con la ayuda de estos 10 ajustes.

Cómo convencer a los demás para que se unan

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

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

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

Al elegir un proveedor de alojamiento de WordPress que utilice electricidad ecológica sostenible y certificada, puede incluirse este distintivo:

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

Consentimiento*
Este campo es de validación y no debe ser modificado.

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 respetuosos con el medio ambiente 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.

Descubre qué aplicaciones de tusestán en verde y cuáles necesitan una limpieza urgente: 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: 

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 coche y reservar "alojamientos en casa" como AirBnB, que son más ecológicos que los hoteles.

Internet también facilita la difusión de información sobre sostenibilidad y 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.

Diseño web sostenible: ¿Qué preguntas tiene para Sonja?

No dude en utilizar la función de comentarios. ¿Quiere estar informado de los nuevos artículos sobre diseño y desarrollo web? Entonces síganos en Twitter, Facebook o a través de nuestro Newsletter.

¿Te ha gustado el artículo?

Con tu valoración nos ayudas a mejorar aún más nuestro contenido.

Escribe un comentario

Tu dirección de correo electrónico no se publicará.