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

Sonja Hoffmann Última actualización 21.12.2020
7 min.
Diseño web sostenible
Última actualización 21.12.2020

¿Qué significa exactamente "diseño web sostenible"? ¿Cómo sabes lo ecológico que es tu sitio ? ¿Cómo se puede hacer que el sitio web 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 post.

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 España solo. 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 hemos pasado a lo digital para salvar el 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 CO2. Con 10.000 visitantes al mes, esto supone 211 kg de CO2 al año, ¡para un solo sitio! 

¿Ha pensado alguna vez cuántos recursos se necesitan para el sitio web tu ? Garantiza más de lo que cree. Cada solicitud que el sitio web tu envía se recibe en algún lugar, se procesa, se devuelve y se almacena si es necesario. Esto suma mucho.

Nuestras páginas web deben ser más ecológicas, pero ¿cómo?

1. Hosting

Mientras tanto, muchos proveedores de Hosting se suman y apuestan por las energías renovables. Porque está claro: el alojamiento web consume energía y provoca una cantidad considerable de emisiones de CO2. 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.

Green Hosting WordPress en RAIDBOXES

Si tienes un sitio web o una tienda online, consumes muchos recursos. RAIDBOXES lo contrarresta, con un clima positivo Hosting para WordPress y WooCommerce.

Puede averiguar fácilmente si tu es "verde" utilizando esta herramienta de The Green Web Foundation. Si el resultado es negativo, debe cambiar de proveedor de Hosting. Puede ver una comparación aquí

La Fundación Web Verde
RAIDBOXES se basa en la electricidad verde, sostenible y certificada, procedente de la energía hidroeléctrica.

2. diseño

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 se puede combinar diseño y sostenibilidad y ahorrar recursos?

Mobile First

En Mobile First , se optimizan los contenidos de tu para su uso en smartphones desde el principio. Páginas optimizadas, no tienen que cargar medios de gran tamaño en los dispositivos móviles. Están programados para no tener 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 antes 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 . Usted minimiza los desvíos no deseados tus usuarios. Porque 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 tus Sostenibilidad mientras se planifica el sitio web. En general, cuantas menos páginas haya que cargar, menos solicitudes de datos se envían. Aparte de que tu sitio es más fácil de navegar, 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 decidida. ¿Todas las imágenes, vídeos, iconos y animaciones que ha planeado para tu sitio realmente aportan valor? ¿O puede prescindir de algunos de ellos?

3. desarrollo

Velocidad de las páginas

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 a un 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 eso es tan importante que optimice bien el sitio web tu y su tienda. Se trata de tu contribución personal a la protección del clima. Puede obtener más información al respecto en nuestro libro electrónico Page Speed & Performance.

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

Para este artículo, he puesto a prueba mi propio sitio . Como verás en mi autocomprobación, un análisis puede incluso resultar completamente opuesto, dependiendo de la aplicación con la que se pruebe. Así que debe pensar en lo que quiere conseguir con las pruebas.

faro de google
Este resultado me da la popular herramienta PageSpeed Insights.
gllighthouse
Google Lighthouse también comprueba la accesibilidad de mi sitio , entre otras cosas.

Aquí como comparación 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
Ecograder proporciona buenos enfoques 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 se presenta de forma concisa y comprensible, los consejos para mejorar la velocidad de las páginas 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 la toma de conciencia de la magnitud del propio trabajo.

El servicio de Website Carbon me parece en general informativo, pero echo de menos los detalles personalizados que conozco de las herramientas de Google y 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.

Especialmente para los desarrolladores, Webpagetest es una herramienta excelente porque entra en gran detalle. Aquí puedes hacer pruebas con distintos preajustes. Desde "Pruebas simples" hasta "Ajustes avanzados", que le dan la opción de excluir varios componentes tus sitio web, o añadirlos a través de fragmentos de código, y al mismo tiempo entregar un informe de Google Lighthouse a la prueba de comparación de dos sitios web, aquí es en primer lugar "todo" posible. 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 un poco más general.

Imágenes y otros soportes

Para replantear el contenido ofrecido, ya me he ocupado antes. 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 ha integrado sus imágenes en un CMS, como WordPress , puede optimizar la resolución posteriormente con un Plugin, como Smush.

Si tienes muchas imágenes o iconos, puedes buscar sprites CSS. Funcionan de forma similar a los sprites en el desarrollo de juegos de ordenador. Aquí, las imágenes se integran una vez por hoja de sprites. Después, el CSS determina bajo qué coordenadas se encuentra la imagen. Puede encontrar más información sobre este tema aquí.

Las hojas de Sprite son múltiples imágenes/iconos que se fusionan en un solo archivo. Los diseñadores suelen agrupar sus imágenes por temas. En función de las coordenadas x e y asociadas, las hojas se dividen y se incluyen 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. Para WordPress existen ahora también innumerables (gratuitos y de pago) Plugins.

WordPress:

Por supuesto, nosotros también nos preguntamos cuándo los planteamientos ecológicos de las empresas son auténticos: ¿Existe un Internet sostenible? ¿Hasta qué punto puede ser "verde" 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 una WordPress sostenible desde el principio. Vea, entre otras cosas, nuestros consejos sobre WordPress y sostenibilidad y sobre tiendas online ecológicas. ¿Quieres asumir más responsabilidades? A continuación, lea nuestro artículo Green Hosting 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 Plugins y un ligero Theme son los principales consejos en este caso.

La media de los sitios web WordPress es de unos 600 KB. Si se elige el sitio web adecuado Themes y se tiene en cuenta el enfoque explicado anteriormente, se puede ahorrar un 50% o más. Aquí se puede encontrar una pequeña selección de Themes probada.

Si el sitio web tu ya está en funcionamiento y cambiar Themes no es posible por ahora, puedemejorar el rendimiento de tu WordPress con la ayuda de estos 10 ajustes.

Cómo convencer a los clientes de tu para que se afilien

 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, 
  • mejor clasificación SEO, 
  • menor tiempo de carga y 
  • Páginas optimizadas para móviles. 

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

Al elegir un proveedor de Hosting que utilice electricidad ecológica sostenible y certificada, se puede incluir este distintivo:

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

Conclusión, enfoques más extremos y material de lectura

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 mejor para nuestros recursos que transmitirlos en streaming. La lista es interminable. Sobre todo, estas estadísticas sacuden nuestra idea común de que lo digital también significa "verde".

Aparte del hecho de que nosotros, como diseñadores y desarrolladores web, obviamente jugamos un gran papel 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.

Descubra qué aplicaciones de tus están en verde y cuáles necesitan ser limpiadas urgentemente: Con la herramienta ClickClean de Greenpeace, puedes obtener una interesante visión general de las aplicaciones (favoritas) de tus y averiguar 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 ahorra desplazamientos. Especialmente durante los últimos meses, todo el mundo debería haber tomado conciencia de cómo, con la ayuda de Internet, podemos evitar el uso de medios de transporte y reducir así las emisiones de CO2. 

Además, disponemos de 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 "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 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) son también, por supuesto, algunos de 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 aplicarlos.

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

No dudes en utilizar la función de comentarios. ¿Quiere estar informado/a de los nuevos artículos sobre diseño y desarrollo web? Entonces síguenos en Twitter, Facebook o a través de nuestra newsletter.

Después de estudiar Diseño para Juegos y Escritura Creativa en Auckland, Sonja Hoffmann se ha especializado en el diseño y desarrollo web. Su labor profesional se enfoca en la gamificación y exploración de la motivación y la experiencia del usuario, junto con su pasión y curiosidad por las tendencias tecnológicas.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.