Diseño de páginas web sostenibles: Cómo diseñar páginas web sostenibles

Sonja Hoffmann Actualizado el 21.10.2020
7 Min.
Diseño web sostenible
Actualizado por última vez el 21.10.2020

¿Qué significa exactamente "Diseño Web Sostenible"? ¿Cómo sabes lo ecológico tu sitio que es? ¿Cómo puedes hacer que la tu websitiosea más sostenible y cuáles son los beneficios para tu los clientes? Las respuestas a estas preguntas y algunas herramientas importantes que he recogido para ustedes en este artículo.

Hechos sobre la Internet hambrienta de poder

Lo que cuesta nuestro consumo digital de energía

De acuerdo con Sitio web de carbono la Internet consume 416,2 teravatios hora (TWh) por año. Eso es casi tanto como consumirlo España solo. Si la Internet fuera un país, entonces tendría sexto mayor consumo de electricidad del mundo.

¿Pero cómo puede ser eso en realidad? ¿No nos hemos vuelto más digitales para proteger nuestro medio ambiente? La realidad se ve un poco diferente aquí: Desafortunadamente, digital no significa automáticamente verde. Desde las granjas de servidores hasta los centros de datos y el dispositivo final, todo utiliza energía para funcionar.

Una red mediasitio produce un estimado de 1,76 gramos de CO2. Con 10.000 visitantes al mes, tienes 211 kg de CO2 por año - para unositio! 

¿Has pensado alguna vez cuántos recursos sesitio necesitan para la tu Web? ¡Garantizado más de lo que piensas! Cada petición que la tu websitio envía es recibida, procesada, devuelta y, si es necesario, guardada en algún lugar. Así es como se juntan muchas cosas.

Nuestros sitios web deben ser más ecológicos, pero ¿cómo?

1. alojamiento

Mientras tanto, muchos proveedores de alojamiento se están uniendo y se están centrando en las energías renovables. Porque una cosa está clara: el alojamiento web devora energía y causa considerables emisiones de CO2. La sostenibilidad y la protección RAIDBOXES del clima no es sólo una frase vacía, sino una parte integral de nuestra cultura corporativa.

Green Hosting para WordPress en RAIDBOXES

Si diriges una websitio o una tienda online, consumes muchos recursos. RAIDBOXES controles contra ella - con clima positivo de acogida para WordPress y WooCommerce.

Si la tu websitio es "verde", puedes averiguarlo fácilmente con la ayuda esta herramienta de la Fundación Green Web. Si el resultado es negativo, es aconsejable cambiar el proveedor de alojamiento. Puedes hacer una comparación aquí de acuero. 

La Fundación Green Web
RAIDBOXES depende de la electricidad verde sostenible y certificada de la energía hidroeléctrica.

2. diseño

El diseño correcto puede evitar el consumo innecesario de energía, por ejemplo cuando un tu sitio web no carga contenido innecesario y no deseado en absoluto. ¿Cómo se puede combinar el diseño y la sostenibilidad y ahorrar recursos?

Mobile First

Con usted Mobile First optimiza el tu contenido para el uso del smartphone desde el principio. Las páginas optimizadas no necesitan cargar medios de gran tamaño en los dispositivos móviles. Estos 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.

la experiencia del usuario

Acerca de los beneficios de un uso bien planeado te he dicho reportado anteriormente. Una experiencia de usuario que funcione bien le ayuda a usted y a sus clientes a hacer la tu web mássitio sostenible. Se minimizan los desvíos no deseados tus de los usuarios. 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 lo tanto se utiliza menos energía.

Recuento de páginas

Aquí también puedes trabajar en tus la sostenibilidad mientras planeas la websitio . En general, cuantas menos páginas haya que cargar, menos solicitudes de datos se envían. Además de que tu sitio esto facilita la navegación, también tiene sentido desde el punto de vista ecológico resumir el contenido y reducir el número de páginas.

Deberíamos usar los medios de comunicación como las fotos, las animaciones y los vídeos de forma más consciente y específica. ¿Todas las fotos, vídeos, iconos y animaciones que has tu sitio planeado aportan un valor añadido? ¿O puedes prescindir de algunos de ellos?

3. desarrollo

Pagespeed

Pagespeed ha sido durante mucho tiempo parte del pequeño 1×1 del diseño de la web. ¿Por qué también es bueno para el medio ambiente prestar atención a una buena actuación? ¡Una sitioque se carga más rápido es consecuencia de los pocos datos que hay que cargar!

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

Esto hace que sea más importante que optimices bien tu tu sitio web y tu tienda. Esta es una tu contribución personal a la protección del clima. Puede encontrar más información sobre esto en nuestro libro electrónico Page Speed & Performance.

La razón por la que tu Pagespeed es lento puede tener varias razones. Muchas herramientas le proporcionan no sólo análisis sino también soluciones para un mejor rendimiento.

Para este artículo he puesto el mío propio a sitio través de sus pasos. Como verán en mi autocomprobación, un análisis puede incluso resultar completamente opuesto, dependiendo de la aplicación con la que se pruebe. Así que deberías considerar qué objetivos persigues con las pruebas.

faro de google
Este resultado lo proporciona la popular herramienta PageSpeed Insights.
gllighthouse
Google Lighthouse prueba el mío sitio entre otras cosas también para la accesibilidad.

Aquí como una comparación la herramienta de desarrollo de Chrome Google Lighthouse y Google PageSpeed Insights. Ambas herramientas son puntos de referencia útiles para la optimización de la página.

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

Ecograder fue creado específicamente para probar la sostenibilidad de los sitios web. Personalmente encuentro a Ecograder el más fácil de usar. La información es concisa y fácil de entender, los consejos para mejorar la velocidad de la página son útiles.

También con el Calculadora de Carbono del sitio web se prueba principalmente para la sostenibilidad. Encuentro positiva la representación pictórica del resultado. Las comparaciones con unidades de medida menos abstractas facilitan la toma de conciencia de la extensión de su trabajo.

Encuentro el servicio de la página web de Carbono generalmente informativo, pero echo de menos los detalles personalizados tal y como los conozco de Google Tools y Ecograder. Además, encuentro insuficiente la comparación con otros sitios web probados como medida para los proyectos y la argumentación profesionales.

prueba de la página web
La popular herramienta Webpagetest va muy profundo.

Especialmente para los desarrolladores es Webpagetest una excelente herramienta, porque entra en gran detalle. Puedes probar aquí desde diferentes preajustes. Desde "Pruebas simples" hasta "Configuración avanzada", que le dan la posibilidad de excluir varios componentes tus websitio , o añadirlos mediante fragmentos de código, y al mismo tiempo proporcionar un informe de Google Lighthouse, hasta la prueba de comparación de dos sitios web, aquí está "todo" posible. Incluso los resultados están técnicamente desglosados hasta el más mínimo detalle. Por lo tanto, esta websitio se utiliza para pruebas avanzadas, mientras que Google y Co. hacen su análisis más general.

Las imágenes y otros medios de comunicación

Ya lo he mencionado antes para reconsiderar el contenido ofrecido. Ahora se trata de integrar las imágenes de manera óptima. 

Tinypng funciona muy bien para comprimir las imágenes, y por lo general sin ninguna pérdida notable de calidad. Puedes conseguir el mismo resultado con Photoshop y el ajuste "Exportar para la Web". Si ya ha integrado sus imágenes en un CMS, por ejemploWordPress , puede optimizar la resolución con unPlugin, por ejemplo, smush, después.

Si tienes muchas imágenes o iconos, puedes usar 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 cada hoja de sprite. Luego se utiliza el CSS para determinar bajo 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 fusionan en un solo archivo. A menudo los diseñadores agrupan sus imágenes por temas. Basándose en las correspondientes coordenadas x e y, las hojas se dividen e integran en consecuencia. De esta manera, se carga un único documento, que reproduce diferentes 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. Hay innumerables versiones (gratuitas y de pago) Pluginspara WordPress esto también.

WordPress

Por supuesto, también nos preguntamos cuándo los enfoques ecológicos de las empresas son auténticos: ¿Existe siquiera una Internet sostenible? ¿Qué tan "verde" puede WordPress ser en realidad? En el artículo WordPress y la sostenibilidad encontrará un estado actualizado de la discusión en la comunidad de habla alemana del WP.

Sostenibilidad en WordPress : Sea parte de ella

RAIDBOXES se compromete desde el principio a un WordPress sostenible uno. Lee entre otras cosas nuestros consejos sobre WordPress y la sostenibilidad así como a Tiendas verdes en línea. ¿Quieres asumir más responsabilidades? Entonces lee nuestra contribución Hosting verde en WordPress a través de.

¿Qué contribución podemos hacer a un diseño web sostenible y eficiente? ¿Cuáles son las palancas más importantes en el diseño diario para ahorrar recursos? Pocos Plugins y un peso ligero Theme son los mejores consejos aquí.

El promedio de WordPress páginas llega a unos 600 KB. Si se elige el enfoque correcto Themes y se tiene en cuenta el enfoque explicado anteriormente, se puede ahorrar un 50 por ciento o más. Encontrará una pequeña selección de Themes los probados aquí.

Si tu la websitio ya está en marcha y cambiar una Themes es imposible, puedes tu WordPress Mejorar el rendimiento con la ayuda de estos 10 tornillos de fijación.

Cómo tu convences a los clientes para que participen

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

  • Mejora de la usabilidad y la experiencia del usuario,
  • diseños claros y fáciles de entender, 
  • mejores clasificaciones de SEO, 
  • un tiempo de carga más corto 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 tus páginas de clientes.

Al elegir un proveedor de hospedaje que utilice electricidad verde sostenible y certificada, esta insignia puede ser integrada:

Por ejemplo, también WebsiteCarbono ofrece una insignia que puede integrar en sus páginas para mostrar que tu el contenido es sostenible y ecológicamente estructurado.

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

Durante mi investigación sobre este tema me encontré con innumerables estadísticas. El envío de un e-mail tiene el mismo efecto en nuestro medio ambiente que el uso de una bolsa de plástico. Por lo tanto, los libros son a menudo más respetuosos con el medio ambiente que los libros electrónicos. Comprar álbumes de música es mejor para nuestros recursos que transmitirlos. La lista es interminable. Por encima de todo, estas estadísticas sacuden nuestra anterior comprensión general de que digital también significa "verde".

Aparte del hecho de que nosotros, como diseñadores y desarrolladores de la web, naturalmente jugamos un papel importante en cómo se desarrollará la web en el futuro, también podemos empezar por nosotros mismos y usar la internet un poco más conscientemente.

Averigua qué tus aplicaciones son verdes y cuáles necesitan ser limpiadas urgentemente: Con la herramienta ClickClean de Greenpeace se obtiene una interesante visión general tus de las aplicaciones (favoritas) y se aprende lo valiosas que son desde el punto de vista ecológico.

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

Tampoco debemos olvidar los efectos positivos que Internet tiene en nuestro entorno. Por ejemplo, el uso de la videoconferencia nos ahorra viajes. En los últimos meses en particular, todo el mundo debería haberse dado cuenta de cómo Internet puede ayudarnos a evitar el uso del transporte y así reducir las emisiones de CO2. 

Además, hay espacio de oficina que puede reducirse en tamaño gracias a la oficina en casa. Además, la red nos ofrece la oportunidad de unir fuerzas con otros: Por ejemplo, podemos usar plataformas de coche compartido y reservar "homestays" como AirBnB, que son más respetuosos con el medio ambiente que los hoteles.

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

Si quieres profundizar en el tema, te recomiendo la Websitio sustainablewebdesign.org como punto de partida. En párrafos claramente dispuestos, se explican aquí los puntos más importantes y se ofrecen posibles soluciones técnicas para su aplicación.

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

Siéntase libre de usar la función de comentarios. ¿Quiere estar informado sobre las nuevas contribuciones al diseño y desarrollo de la web? Entonces síguenos en TwitterFacebook o sobre nuestro Boletín de noticias.

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

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

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