Udržitelný webový design

Udržitelný webový design: Jak navrhnout udržitelné webové stránky

Co přesně znamená "Udržitelný webový design"? Jak víte, jak ekologické jsou vaše stránky? Jak můžete své webové stránky učinit udržitelnějšími a jaké jsou výhody pro vaše zákazníky? Sestavil jsem odpovědi na tyto otázky, stejně jako některé důležité nástroje pro vás v tomto příspěvku.

Fakta o internetu, který hltá moc

Kolik stojí naše digitální spotřeba energie

Podle Websitecarbon , internet spotřebuje 416,2 terawatthodin (TWh) ročně. To je asi tolik, kolik Německo spotřebuje samo. Kdyby byl internet zemí, měl by již šestou největší spotřebu elektřiny na světě.

Ale jak je to vlastně možné? Nešli jsme digitálně, abychom chránili naše životní prostředí? Realita je zde poněkud odlišná: Digitální bohužel automaticky neznamená "zelený". Od serverových farem přes datová centra až po skutečné koncové zařízení – vše spotřebovává energii k fungování.

Průměrná webová stránka produkuje odhadem 1,76 gramů CO₂. S 10 000 návštěvníky měsíčně získáte 211 kg CO₂ ročně – na jednu stránku! 

Přemýšleli jste někdy o tom, kolik zdrojů vaše webové stránky potřebují? Zaručeno více, než si myslíte! Každý požadavek, který vaše webové stránky odešlou, je přijat, zpracován, vrácen a v případě potřeby uložen na jakémkoli místě. Takže se toho hodně sejde.

Naše webové stránky musí být ekologičtější

1. WordPress Hosting a udržitelný webový design

Mezitím se mnoho poskytovatelů hostingu WordPress účastní a spoléhá se na obnovitelné energie. Protože jedna věc je jasná: WordPress hosting spotřebovává energii a zajišťuje významné emise CO₂. U Raidboxes Udržitelnost a ochrana klimatu není prázdná fráze, ale nedílná součást firemní kultury.

Zelený WordPress Hosting pro WordPress na Raidboxes

Když provozujete webové stránky nebo internetový obchod, spotřebováváte spoustu zdrojů. Raidboxes kontroluje proti tomu - s klimaticky pozitivním WordPress hostingem.

Pomocí tohoto nástroje od Nadace Green Web Foundation můžete snadno určit, zda jsou vaše webové stránky "zelené". Pokud je výsledek negativní, má smysl změnit poskytovatele hostingu WordPress. Srovnání si můžete prohlédnout zde

Nadace Green Web Foundation
Raidboxes spoléhá se na udržitelnou, certifikovanou zelenou elektřinu z vodní energie.

2. Design a udržitelný webový design

Správný design může zabránit spotřebě zbytečné energie, například pokud vaše webové stránky nenačítají zbytečný a nežádoucí obsah na prvním místě. Jak můžete sladit design a udržitelnost a šetřit zdroje?

Mobilní zařízení na prvním místě

S Mobile First optimalizujete svůj obsah pro použití smartphonů hned od začátku. Optimalizované stránky nemusí na mobilních zařízeních načítat nadměrná média. Ty jsou naprogramovány tak, aby styly stolních počítačů nemusely být přepisovány, ale jsou navrženy přímo pro nejmenší zařízení.

Uživatelské prostředí

Již jsem vám řekl o výhodách dobře naplánované použitelnosti. Dobře fungující uživatelské prostředí pomáhá vám a vašim zákazníkům učinit vaše webové stránky udržitelnějšími. Minimalizujete nežádoucí objížďky uživatelů. V ideálním případě jsou načteny pouze stránky, které chce uživatel skutečně navštívit. Ti, kteří snižují počet nechtěných kliknutí, posílají méně požadavků na data, a proto spotřebovávají méně energie.

Velikost stránky

Opět platí, že již při plánování webových stránek můžete pracovat na udržitelnosti. Obecně platí, že čím méně stránek je třeba načíst, tím méně požadavků na data je odesláno. Kromě toho, že se vaše stránka snadněji orientuje, má také ekologický smysl shrnout obsah a snížit počet stránek.

Měli bychom používat média, jako jsou obrázky, jakékoli animace a videa, vědoměji a účelněji. Opravdu všechny obrázky, videa, ikony a animace, které jste naplánovali pro svůj web, přidávají hodnotu? Nebo se bez některých z nich obejdete?

3. Vývoj a udržitelný webový design

Rychlost stránky

Pagespeed je již dlouho součástí malého 1×1 webového designu. Proč je také dobré pro ochranu životního prostředí věnovat pozornost dobrému výkonu? Stránka, která se načítá rychleji, je důsledkem malého množství dat, která se mají načíst!

Rychlejší webové stránky – lepší pro klima

O to důležitější je, abyste optimalizovali své webové stránky a dobře nakupovali. To je váš osobní příspěvek k ochraně klimatu. Více se o tom dozvíte v naší e-knize Page Speed & Performance.

Může existovat několik důvodů, proč je rychlost stránky pomalá. Kromě analýzy vám mnoho nástrojů také poskytuje řešení pro vyšší výkon.

Pro tento článek jsem dal svou vlastní stránku přes jeho kroky. Jak uvidíte z mého autotestu, analýza může být dokonce zcela opačná – v závislosti na tom, která aplikace je testována. Měli byste tedy zvážit, jaké cíle s testy sledujete.

Google maják
Tento výsledek mi poskytuje populární nástroj PageSpeed Insights.
gllighthouse
Google Lighthouse také mimo jiné testuje přístupnost mého webu.

Zde jako srovnání Chrome Developer Tool Google Lighthouse a Vyhledávač Google PageSpeed Insights. Oba nástroje jsou užitečnými orientačními body pro optimalizaci na stránce.

ekograder
Ecograder poskytuje dobré přístupy k optimalizaci na stránce.

Ecograder byl vytvořen speciálně pro testování udržitelnosti webových stránek. Osobně považuji Ecograder za nejpřátelštější službu. Informace jsou prezentovány stručně a srozumitelně, tipy pro zlepšení rychlosti stránky jsou užitečné.

Webová stránka Carbon Calculator je také převážně testována na udržitelnost. Obrazové znázornění výsledku považuji za pozitivní. Srovnání s méně abstraktními měrnými jednotkami usnadňuje poněkud více si uvědomit rozsah jeho práce.

I když obecně považuji službu Website Carbon za informativní, postrádám individuálně přizpůsobené detaily, které znám z Nástrojů Google a Ecograderu . Navíc považuji srovnání s jinými testovanými weby jako měrnou jednotku pro profesionální projekty a argumentaci za nedostatečné.

test webových stránek
Populární nástroj Webpagetest jde do velké hloubky.

Zejména pro vývojáře je Webpagetest vynikajícím nástrojem, protože jde do velkých detailů. Zde můžete testovat z různých předvoleb. Od "Jednoduchého testování" až po "Pokročilá nastavení", která vám umožňují vyloučit různé komponenty vašeho webu, přesněji je přidat pomocí fragmentu kódu a zároveň poskytnout zprávu Google Lighthouse Report pro srovnávací testování dvou webových stránek, je zde možné "vše". Výsledky jsou také technicky rozčleněny do nejmenších detailů. Tato webová stránka se proto používá pro pokročilé testování, zatímco Google a spol. dělají svou analýzu trochu obecnější.

Obrázky a další média

Již jsem se zmínil o přehodnocení nabízeného obsahu. Nyní jde o optimální integraci obrázků. 

Tinypng funguje skvěle pro kompresi obrázků - a obvykle bez znatelné ztráty kvality. Stejného výsledku můžete dosáhnout s aplikací Photoshop a nastavením "Export pro web". Pokud jste již integrovali obrázky do CMS, jako je WordPress, můžete následně optimalizovat rozlišení pomocí pluginu, jako je Smush.

Pokud máte mnoho obrázků nebo ikon, můžete se vypořádat s CSS Sprites. Pracují podobně jako skřítci ve vývoji počítačových her. Zde jsou obrázky integrovány jednou pomocí sprite listu. Pak se CSS používá k určení, pod kterými souřadnicemi je který obrázek umístěn. Více o tomto tématu se dozvíte zde.

Přehledové listy jsou více obrázků/ikon, které jsou sloučeny do jednoho souboru. Designéři často seskupují své obrazy tematicky. Na základě odpovídajících souřadnic x a y jsou listy rozděleny a odpovídajícím způsobem integrovány. Tím se načte jeden dokument, který přehrává různé vizuální komponenty.

Lazy Load je další variantou pro optimální načítání obrázků. Zde se obrázky načítají, když je návštěvník potřebuje. Pro WordPress nyní existuje nespočet (bezplatných a placených) pluginů.

WordPress

Samozřejmě se také ptáme sami sebe, když jsou ekologické přístupy firem autentické: Existuje vůbec udržitelný internet? Jak "zelený" může WordPress ve skutečnosti být? V článku WordPress a udržitelnost najdete aktuální stav pro diskusi v německy mluvící komunitě WP.

Udržitelný WordPress: Přidejte se k nám

Raidboxes se zavázal k udržitelnému WordPress hned od začátku. Podívejte se mimo jiné na naše tipy na WordPress & udržitelnost, stejně jako zelené internetové obchody. Chcete sami převzít větší odpovědnost? Pak si přečtěte náš příspěvek Zelený hosting pro WordPress.

Jak můžeme přispět k udržitelnému a efektivnímu webovému designu? Jaké jsou nejdůležitější páky v každodenním designu pro úsporu zdrojů? Několik pluginů a lehké téma jsou zde nejlepšími tipy.

Průměrné webové stránky WordPress přicházejí na přibližně 600 KB. Výběrem správného motivu a zohledněním dříve vysvětleného přístupu můžete ušetřit 50 procent a více. Malý výběr testovaných témat naleznete zde.

Pokud vaše webové stránky již stojí a změna motivu je vyloučena, můžete zlepšit výkon WordPress pomocí těchto 10 nastavovacích šroubů.

Jak přesvědčit ostatní, aby se připojili

 Ve skutečnosti by následující klíčová slova měla stačit k přesvědčení vašich zákazníků o udržitelném webovém designu: 

  • Vylepšená použitelnost a uživatelská zkušenost,
  • jasné a snadno srozumitelné návrhy, 
  • lepší SEO hodnocení, 
  • kratší doba nabíjení a 
  • Stránky optimalizované pro mobilní zařízení. 

Pokud stále potřebujete další argumenty, různé nadace nabízejí také tzv. odznaky, které můžete integrovat na stránky svých zákazníků.

Při výběru poskytovatele hostingu WordPress, který používá udržitelnou, certifikovanou zelenou elektřinu, může být tento odznak integrován:

Například WebsiteCarbon také nabízí odznak, který můžete integrovat na své stránky, abyste ukázali, že váš obsah je udržitelný a ekologický.

Souhlas*
Toto pole slouží k ověření a nemělo by se měnit.

Závěr o udržitelném webovém designu

Během svého výzkumu na toto téma jsem narazil na nespočet statistik. Odeslání e-mailu má stejný dopad na naše životní prostředí jako použití plastové tašky. Knihy jsou proto často šetrnější k životnímu prostředí než e-knihy. Nákup hudebních alb je šetrnější k našim zdrojům než jejich streamování. Seznam je nekonečný. Tyto statistiky především otřásají naším předchozím obecným chápáním, že digitální znamená zároveň také "zelený".

Kromě toho, že my jako weboví designéři a vývojáři přirozeně hrajeme hlavní roli v tom, jak se web vyvíjí v budoucnu, můžeme také začít u sebe a používat internet trochu vědoměji.

Zjistěte, které z vašich aplikací jsou zelené a které je naléhavě třeba vyčistit: S nástrojem ClickClean od Greenpeace získáte zajímavý přehled o svých (oblíbených) aplikacích a zjistíte, jak jsou ekologicky cenné.

Příspěvky, které vytvářejí větší povědomí o zelenější budoucnosti: 

  • Například Jack Lenox vytvořil téma WordPress, které je pouze 7 KB lehké. 
  • Brad Frost nás na svém blogu DeathToBullshit povzbuzuje humorným zvratem, abychom se obešli právě bez tohoto. 
  • Heydon Pickering poskytuje kódovací tipy , jak udělat vaše stránky štíhlejší.

Neměli bychom také zapomínat na pozitivní účinky, které má internet na naše životní prostředí. Tímto způsobem nám použití videokonferencí šetří cestovní trasy. Zejména v posledních několika měsících by si každý měl uvědomit, jak můžeme využít internet k tomu, abychom se obešli bez dopravních prostředků, a tím snížili emise CO2. 

Kromě toho existují kancelářské prostory, které lze díky domácí kanceláři zmenšit. Kromě toho nám síť nabízí příležitost spojit síly s ostatními: například můžeme využít platformy pro sdílení automobilů a rezervovat "homestays", jako je AirBnB , které jsou šetrnější k životnímu prostředí než hotely.

Šíření informací o udržitelnosti a ochraně životního prostředí je také mnohem snazší díky internetu. Nabízení a nákup ekologických produktů (ke kterým bychom jinak měli menší přístup) patří také mezi pozitivní účinky digitálního průmyslu – abychom jmenovali jen několik.

Pokud se chcete ponořit ještě hlouběji do tématu, doporučuji webové stránky sustainablewebdesign.org jako výchozí bod. V jasných odstavcích jsou zde vysvětleny nejdůležitější body a jsou nabízena možná technická řešení pro jejich realizaci.

Udržitelný webový design: Jaké otázky máte pro Sonju?

Neváhejte použít funkci komentáře. Chcete být informováni o nových příspěvcích k webovému designu a vývoji? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.