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

Sonja Hoffmann Última actualização 21.12.2020
7 min.
Web design sustentável
Última actualização 21.12.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? Eu compilei as respostas a estas perguntas e algumas ferramentas importantes neste post.

Fatos sobre o guzzler do poder Internet

Quanto custa o nosso consumo digital em energia

Segundo a Websitecarbon, a Internet consome 416,2 terawatts-hora (TWh) por ano. Isso é tanto quanto só a Alemanha consome. Se a Internet fosse um país, já teria o sexto maior consumo de eletricidade do mundo hoje.

Mas como é que isso pode realmente ser? Não fomos para o digital para salvar o nosso ambiente? A realidade aqui é um pouco diferente: Infelizmente, digital não significa automaticamente "verde". Desde fazendas de servidores, centros de dados até o dispositivo final real - tudo consome energia para funcionar.

Estima-se que um website produz, em média, 1,76 gramas de CO2. Com 10.000 visitantes por mês, isso chega a 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? Mais do que você pensa, garantido! Cada pedido enviado pelo seu site é recebido em algum lugar, processado, devolvido e armazenado, se necessário. Isso soma muito.

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

1. hospedagem

Entretanto, muitos fornecedores de alojamento estão a aderir e a contar com as energias renováveis. Porque uma coisa é clara: o alojamento Web consome energia e causa uma quantidade considerável de emissões de CO2. Em RAIDBOXES , sustentabilidade e proteção climática não são apenas frases vazias, mas uma parte integrante da cultura corporativa.

Alojamento Verde para WordPress em RAIDBOXES

Se você administra um site ou uma loja online, você consome muitos recursos. RAIDBOXES contraria isto - com o alojamento climático positivo para WordPress e WooCommerce.

Você pode facilmente determinar se o seu site é "verde" com a ajuda desta ferramenta da The Green Web Foundation. Se o resultado for negativo, você deve mudar o seu provedor de hospedagem. Você pode ver 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 em primeiro lugar. Como você pode conciliar design e sustentabilidade e poupar recursos?

Mobile First

Em Mobile First , você otimiza seu conteúdo para o uso do smartphone desde o início. As páginas optimizadas não precisam de carregar suportes sobredimensionados em dispositivos móveis. Eles são programados para que os estilos de desktop não tenham que ser sobregravados, mas são projetados diretamente para o menor dispositivo.

experiência do utilizador

lhe falei sobre os benefícios de uma usabilidade bem planeada. 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. Porque, idealmente, apenas as páginas que o usuário realmente quer visitar são carregadas. Se você reduzir os cliques indesejados, você envia menos pedidos de dados e, portanto, consome menos energia.

Contagem de páginas

Aqui, também, você pode trabalhar na sua sustentabilidade enquanto planeja o site. Em geral, quanto menos páginas precisarem ser carregadas, menos pedidos de dados serão enviados. Além de facilitar a navegação do seu site, também faz sentido do ponto de vista ecológico combinar 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 intencional. Todas as imagens, vídeos, ícones e animações que você planejou para o seu site realmente agregam valor? Ou você pode passar sem alguns deles?

3. desenvolvimento

Pagespeed

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

Sites mais rápidos - melhor para o clima

Por isso, é ainda mais importante que optimize bem o seu site e a sua loja. Esta é a sua contribuição pessoal para a protecção do clima. Saiba mais sobre isso em nosso e-book Page Speed & Performance.

A velocidade da sua página é lenta pode ter vários motivos. Muitas ferramentas fornecem-lhe não só a análise, mas também soluções para um maior 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 oposta - dependendo de qual aplicação é testada. Por isso, deves considerar quais são os teus objectivos com os testes.

google lighthouse
Este resultado dá-me a ferramenta popular PageSpeed Insights.
gllighthouse
OGoogle Lighthouse também testa meu site para acessibilidade, entre outras coisas.

Aqui como comparação, a ferramenta de desenvolvimento Chrome Google Lighthouse e Google PageSpeed Insights. Ambas as ferramentas são pontos de referência úteis para a otimização 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. A informação é apresentada de forma concisa e compreensível, as dicas para melhorar a velocidade das páginas são úteis.

O site Calculadora de Carbono também testa principalmente 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 trabalho.

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

webpagetest
A popular ferramenta Webpagetest entra em grande profundidade.

Especialmente para desenvolvedores, a 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 lhe dão a opção de excluir vários componentes do seu site, ou adicioná-los através de um trecho de código, e ao mesmo tempo entregar um Relatório do Farol do Google, até o teste de comparação de dois sites, "tudo" é possível aqui. Os resultados também são tecnicamente decompostos até ao mais pequeno detalhe. Este site é, portanto, utilizado para testes avançados, enquanto Google e Co. tornam a sua análise um pouco mais geral.

Imagens e outros meios de comunicação

Para repensar o conteúdo oferecido, já falei antes. Agora é uma questão de integrar as imagens de forma óptima. 

Tinypng funciona maravilhosamente 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á integrou suas imagens em um CMS, como WordPress , você ainda pode otimizar a resolução posteriormente com um Plugin, como o Smush.

Se você tem muitas imagens ou ícones, você pode olhar para os 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. Depois, o CSS determina sob quais coordenadas a imagem está localizada. Mais informações sobre este tópico podem ser encontradas aqui.

As folhas Sprite são múltiplas imagens/íons que são fundidas num único ficheiro. Os designers muitas vezes agrupam suas imagens tematicamente. Com base nas coordenadas x e y associadas, as folhas são divididas e incluídas em conformidade. Desta forma, é carregado um único documento que exibe vários componentes visuais.

O carregamento diferido é outra variante para o carregamento ideal de imagens. Aqui, as imagens são carregadas quando o visitante precisa delas. Para o WordPress há agora também inúmeros plugins (gratuitos e pagos).

WordPress

É claro que também nos perguntamos quando as abordagens ecológicas das empresas são autênticas: Existe mesmo uma internet sustentável? Como "verde" pode ser realmente WordPress ? No artigo WordPress e sustentabilidade você encontrará um estado atual da discussão na comunidade de língua alemã do WP.

WordPress sustentável: faz parte disto

RAIDBOXES está comprometida com um WordPress sustentável desde o início. Veja, entre outras coisas, as nossas dicas em WordPress & sustentabilidade e em lojas verdes online. Queres assumir mais responsabilidades sozinho? Depois leia o nosso artigo Green Hosting 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? Poucos Plugins e um leve Theme são as melhores dicas aqui.

Média WordPress sites chegam a cerca de 600 KB. Escolhendo o Themes correcto e tendo em conta a abordagem anteriormente explicada, pode poupar 50% ou mais. Uma pequena selecção de Themes testado pode ser encontrada aqui.

Se o seu site já está em funcionamento e mudar para Themes está fora de questão por agora, pode melhorar o seu desempenhoWordPress com a ajuda destas 10 afinações.

Como convencer os 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 nas páginas de seus clientes.

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

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

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 impacto no nosso ambiente que o uso de um saco plástico. Os livros são frequentemente mais amigos do ambiente do que os e-books. 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 entendimento comum de que o digital também significa "verde".

Além do fato de que nós, como web designers e desenvolvedores, obviamente desempenhamos um grande papel na forma como a web se desenvolve 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 as que necessitam de limpeza urgente: Com a ferramenta ClickClean do Greenpeace, você pode obter uma visão geral interessante de seus aplicativos (favoritos) e descobrir o quanto eles são ecologicamente valiosos.

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

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 de viagens. Especialmente durante os últimos meses, todos deveriam ter tomado consciência de como, com a ajuda da Internet, podemos evitar o uso de meios de transporte e assim reduzir as emissões de CO2. 

Além disso, temos espaço de escritório que pode ser reduzido graças aos escritórios 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 a compra de produtos amigos do ambiente (aos quais, de outra forma, poderíamos ter menos acesso) também estão, naturalmente, entre os efeitos positivos da indústria digital - para citar apenas alguns.

Se você quiser aprofundar o tema, recomendo o site sustainablewebdesign. org como ponto de partida. Os pontos mais importantes são explicados aqui em parágrafos claros 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 novos artigos sobre web design e desenvolvimento? Depois siga-nos no Twitter, Facebook 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 *.