Web Design Sustentável: Como criar sites sustentáveis

Sonja Hoffmann Atualizado em 21.10.2020
7 min.
Web design sustentável
Última actualização em 21.10.2020

O que significa exactamente "Web Design Sustentável"? Como você sabe o quão ecológico é o seu site? Como você pode tornar seu(s) website(s) mais sustentáveis e quais são os benefícios para seus clientes? As respostas a estas perguntas e algumas ferramentas importantes que recolhi para vocês neste artigo.

Fatos sobre a Internet faminta de poder

Quanto custa o nosso consumo digital de energia

De acordo com websitecarbon a Internet consome 416,2 terawatt horas (TWh) por ano. Isso é tanto quanto só a Alemanha consome. Se a Internet fosse um país, teria sexto maior consumo de eletricidade do mundo.

Mas como é que isso pode realmente ser? Não nos tornámos mais digitais para proteger o nosso ambiente? A realidade parece um pouco diferente aqui: Infelizmente digital não significa automaticamente verde. Desde fazendas de servidores, centros de dados, até o dispositivo final real - tudo usa energia para funcionar.

Um website médio produz uma estimativa de 1,76 gramas de CO2. Com 10.000 visitantes por mês, você recebe 211 kg de CO2 por ano - por uma única página! 

Você já pensou em quantos recursos são necessários para o seu site? Garantido mais do que você pensa! Cada pedido enviado pelo seu site é recebido, processado, devolvido e, se necessário, salvo em algum lugar. É assim que muita coisa se junta.

Os nossos sites devem tornar-se mais ecológicos - mas como?

1. hospedagem

Entretanto, muitos fornecedores de alojamento estão a aderir e a concentrar-se nas energias renováveis. Porque uma coisa é clara: o alojamento Web devora energia e causa consideráveis emissões de CO2. Sustentabilidade e proteção RAIDBOXES climática não é apenas uma frase vazia, mas uma parte integrante da nossa cultura corporativa.

Alojamento Verde para WordPress RAIDBOXES

Se você administra um site ou uma loja online, você consome muitos recursos. RAIDBOXES controles contra ele - com Acolhimento climático positivo para WordPress e WooCommerce.

Se o seu site é "verde", você pode facilmente descobrir com a ajuda de este instrumento da The Green Web Foundation. Se o resultado for negativo, é aconselhável mudar o provedor de hospedagem. Você pode fazer uma comparação aqui

A Fundação Green Web
RAIDBOXES depende de eletricidade verde sustentável e certificada de energia hidrelétrica.

2. desenho

O design correto pode evitar o consumo desnecessário de energia, por exemplo, se o seu site não carregar conteúdo desnecessário e indesejado. Como você pode combinar design e sustentabilidade e economizar recursos?

Mobile First

Com Mobile First você, otimize seu conteúdo para o uso de smartphones desde o início. Os sites otimizados não precisam carregar mídias superdimensionadas em dispositivos móveis. Eles são programados de tal forma que os estilos de desktop não precisam ser sobrescritos, mas são projetados diretamente para o menor dispositivo.

experiência do utilizador

Sobre os benefícios de uma usabilidade bem planeada, já vos disse reportado anteriormente. Uma experiência de usuário que funciona bem ajuda você e seus clientes a tornar seu site mais sustentável. Você minimiza os desvios indesejados de seus usuários. Idealmente, apenas aquelas páginas são carregadas que o usuário realmente quer visitar. Se você reduzir os cliques indesejados, você envia menos pedidos de dados e, portanto, consome menos energia.

Contagem de páginas

Aqui você também pode trabalhar na sua sustentabilidade enquanto planeja o site. Em geral, quanto menos páginas precisarem ser carregadas, menos pedidos de dados são enviados. Além do fato de que isso facilita a navegação do seu site, também faz sentido do ponto de vista ecológico resumir o conteúdo e reduzir o número de páginas.

Devemos usar meios como imagens, quaisquer animações e vídeos de forma mais consciente e mais específica. Todas as imagens, vídeos, ícones e animações que você planejou para o seu site realmente trazem valor agregado? Ou você pode passar sem alguns deles?

3. desenvolvimento

Pagespeed

Pagespeed há muito tempo faz parte do pequeno 1×1 do web design. Porque é que também é bom para o ambiente prestar atenção a um bom desempenho? Uma página que carrega mais rápido é a consequência de poucos dados que precisam ser carregados!

Sites mais rápidos - melhor para o clima

É ainda mais importante que você otimize bem o seu site e a sua loja. Esta é a sua contribuição pessoal para a protecção do clima. Você pode saber mais sobre isso no nosso e-book Velocidade e desempenho da página.

A velocidade da sua página é lenta pode ter várias razões. Muitas ferramentas fornecem-lhe não só uma análise, mas também soluções para um melhor desempenho.

Para este artigo eu coloquei o meu próprio site nos seus ritmos. Como você verá pelo meu autoteste, uma análise pode até ser completamente o oposto - dependendo de qual aplicação é testada. Por isso, devias pensar no que queres alcançar com os testes.

farol do google
Este resultado é fornecido pela popular ferramenta PageSpeed Insights.
gllighthouse
O Google Lighthouse testa meu site para acessibilidade, entre outras coisas.

Aqui, como comparação, a ferramenta de desenvolvimento do cromado Google Lighthouse e Google PageSpeed Insights. Ambas as ferramentas são pontos de referência úteis para a otimização da onpage.

ecograder
Ecograder oferece boas abordagens para a otimização onpage.

Ecograder foi criado especificamente para testar a sustentabilidade dos websites. Eu pessoalmente acho Ecograder o mais fácil de usar. As informações são concisas e fáceis de entender, as dicas para melhorar a velocidade da página são úteis.

Também com o Calculadora de carbono do site é testada principalmente para a sustentabilidade. Acho que a representação pictórica do resultado é positiva. As comparações com unidades de medida menos abstratas facilitam a tomada de consciência da extensão do seu trabalho.

Acho o serviço do Website Carbon geralmente informativo, mas sinto falta dos detalhes individualmente adaptados, pois os conheço das Ferramentas Google e Ecograder. Além disso, considero insuficiente a comparação com outros sites testados como medida para projetos profissionais e argumentação.

teste da página web
A popular ferramenta Webpagetest vai muito fundo.

Especialmente para os desenvolvedores é Webpagetest, uma excelente ferramenta, porque entra em grandes detalhes. Você pode testar aqui a partir de diferentes predefinições. Desde "Testes simples" até "Configurações avançadas", que permitem excluir vários componentes do seu site, ou adicioná-los através de trechos de código, e ao mesmo tempo incluir um Relatório do Farol do Google, até o teste de comparação de dois sites, "qualquer coisa" é possível aqui. Mesmo os resultados são tecnicamente decompostos até ao mais pequeno detalhe. Este site é, portanto, utilizado para testes avançados, enquanto Google e Co. são mais gerais na sua análise.

Imagens e outros meios de comunicação

Eu já mencionei antes para reconsiderar o conteúdo oferecido. Agora é tudo uma questão de integrar as imagens de uma forma óptima. 

Tinypng funciona muito bem para comprimir imagens - e normalmente sem qualquer perda de qualidade perceptível. Você pode alcançar o mesmo resultado com o Photoshop e a configuração "Exportar para Web". Se você já tiver integrado suas fotos em um CMS, por exemploWordPress , você pode otimizar a resolução posteriormente com umPlugin, por exemplo, Smush.

Se você tem muitas imagens ou ícones, você pode usar sprites CSS. Eles funcionam de forma semelhante aos sprites no desenvolvimento de jogos de computador. Aqui as imagens são integradas uma vez por folha de sprite. Em seguida, o CSS é usado para determinar sob quais coordenadas cada imagem está localizada. Você pode encontrar mais sobre este tópico aqui.

As folhas Sprite são múltiplas imagens/íons que são fundidas num único ficheiro. Muitas vezes os designers agrupam suas imagens tematicamente. Com base nas coordenadas x e y correspondentes, as folhas são divididas e integradas em conformidade. Desta forma, um único documento é carregado, o que reproduz diferentes componentes visuais.

Lazy Load é outra variante para o carregamento ideal de imagens. Aqui as imagens são carregadas quando o visitante precisa delas. Existem inúmeras Pluginsversões (gratuitas e pagas) também para WordPress isso.

WordPress

Naturalmente, também nos perguntamos quando as abordagens ecológicas das empresas são autênticas: Existe sequer uma Internet sustentável? Quão "verde" pode WordPress realmente ser? No artigo WordPress e sustentabilidade você encontrará um status atualizado da discussão na comunidade WP de língua alemã.

Sustentabilidade WordPress : Faça parte dela

RAIDBOXES está comprometido desde o início a sustentável WordPress um. Veja entre outras coisas as nossas dicas sobre WordPress & Sustentabilidade bem como para Lojas verdes online. Queres assumir mais responsabilidades sozinho? Então leia a nossa contribuição Alojamento verde para WordPress .

Que contribuição podemos dar a um web design sustentável e eficiente? Quais são as alavancas mais importantes no design quotidiano para poupar recursos? Poucas Plugins e um peso Theme leve são as melhores dicas aqui.

A média de WordPress páginas chega a cerca de 600 KB. Ao escolher a abordagem correcta Themes e tendo em conta a abordagem anteriormente explicada, pode poupar 50% ou mais. Você encontrará uma pequena seleção de testesThemes aqui.

Se o seu site já está em funcionamento e a mudança de um deles Themes é impossível, você pode mudar o seu WordPress Melhore o desempenho com a ajuda destes 10 parafusos de ajuste.

Como você convence seus clientes a participar

 Na verdade, as seguintes palavras-chave já devem ser suficientes para convencer os seus clientes de um web design sustentável: 

  • Melhoria da usabilidade e da experiência do usuário,
  • Desenhos claros e fáceis de entender, 
  • melhores classificações de SEO, 
  • tempo de carregamento mais curto e 
  • Páginas otimizadas para celular. 

Se você ainda precisar de mais argumentos, várias fundações também oferecem os chamados crachás, que você pode integrar nos sites dos seus clientes.

Ao escolher um provedor de hospedagem que utiliza eletricidade verde sustentável e certificada, este crachá pode ser incluído:

Por exemplo, também WebsiteCarbon um crachá que você pode integrar em suas páginas para mostrar que o seu conteúdo é sustentável e ecológico.

Conclusão, abordagens mais extremas e material de leitura

Durante a minha pesquisa sobre este tema, deparei-me com inúmeras estatísticas. O envio de um e-mail tem o mesmo efeito no nosso ambiente que o uso de um saco plástico. Os livros são, portanto, muitas vezes mais amigos do ambiente do que os livros eletrônicos. Comprar álbuns de música é melhor para os nossos recursos do que transmiti-los. A lista é interminável. Acima de tudo, estas estatísticas abalam o nosso anterior entendimento geral de que o digital também significa "verde".

Além do fato de que nós, como web designers e desenvolvedores, naturalmente desempenhamos um papel importante na forma como a web irá se desenvolver no futuro, também podemos começar por nós mesmos e usar a internet um pouco mais conscientemente.

Descubra quais das suas aplicações são verdes e quais precisam de ser limpas urgentemente: Com a ferramenta ClickClean do Greenpeace você obtém uma visão geral interessante das suas aplicações (favoritas) e aprende o quanto elas são ecologicamente valiosas.

Contribuições que criam mais consciência para um futuro mais verde: 

  • Então Jack Lenox tem um WordPress -Theme que é apenas 7 KB de luz. 
  • Brad Frost nos encoraja em seu blog DeathToBullshit com uma reviravolta humorística para dispensar essa mesma coisa. 
  • Heydon Pickering dá Dicas de codificação como tornar o teu lado mais fino.

Também não devemos esquecer os efeitos positivos que a Internet tem sobre o nosso ambiente. Por exemplo, o uso da videoconferência nos poupa viagens. Nos últimos meses em particular, todos deveriam ter percebido como a Internet pode nos ajudar a evitar o uso do transporte e, assim, reduzir as emissões de CO2. 

Além disso, há espaço de escritório que pode ser reduzido em tamanho graças ao escritório em casa. Além disso, a rede nos oferece a oportunidade de unir forças com outros: Por exemplo, podemos usar plataformas de compartilhamento de carros e reservar "homestays", como a AirBnB, que são mais amigáveis ao meio ambiente do que os hotéis.

A Internet também facilita muito a divulgação de informações sobre sustentabilidade e proteção ambiental. A oferta e compra de produtos ecológicos (aos quais, de outra forma, poderíamos ter menos acesso) é também, naturalmente, um dos efeitos positivos da indústria digital - para citar apenas alguns.

Se você gostaria de aprofundar o tema, recomendo o site sustainablewebdesign.org como um ponto de partida. Em parágrafos claramente organizados, os pontos mais importantes são explicados aqui e são oferecidas possíveis soluções técnicas para a sua implementação.

Web Design Sustentável: Que perguntas você tem para Sonja?

Esteja à vontade para usar a função de comentários. Você quer ser informado sobre novas contribuições para o web design e desenvolvimento? Então siga-nos em TwitterFacebook ou através da nossa Newsletter.

Depois de estudar design de jogos e escrita criativa na verde Auckland, na Nova Zelândia, a Sonja especializou-se em design de web e aplicações e seu desenvolvimento. O seu foco é a gamificação e a exploração da motivação e experiência do utilizador, aliado à paixão e curiosidade pelas tendências tecnológicas.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com * .