Udržitelný webový design: Jak vytvářet udržitelné webové stránky

Sonja Hoffmann Naposledy aktualizováno na Prosinec 21, 2020
7 min.
Sustainable Web Design
Naposledy aktualizováno na Prosinec 21, 2020

Co přesně znamená "Udržitelný webový design"? Jak víte, jak ekologická je vaše lokalita? Jak můžete učinit své webové stránky udržitelnějšími a jaké výhody to přináší vašim zákazníkům? Shromáždil jsem odpovědi a některé důležité nástroje v tomto článku.

Fakta o internetovém pojídači energie

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

Podle webových stránek uhlík, internet spotřebovává 416.2 terawatthod hodiny (TWh) za rok. To je asi tolik, kolik spotřebuje jen Německo. Kdyby byl internet zemí, měl by již dnes šestou největší spotřebuelektřiny na světě.

Ale jak to vlastně může být? Nebyli jsme extra digitální, abychom ochrá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ý bod, vše spotřebovává energii k práci.

Odhaduje se, že průměrná internetová stránka produkuje 1,76 gramů CO2. S 10 000 návštěvníky měsíčně dostanete 211 kg CO2 ročně – za jednu stránku! 

Přemýšleli jste někdy o tom, kolik zdrojů je pro váš web potřeba? Zaručeno víc, než si myslíš! Každý požadavek, který vaše webové stránky odešle, je přijat, zpracován, vrácen a v případě potřeby někde uložen. Tak se toho hodně sečte.

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

1. Hostování

Mezitím se účastní mnoho poskytovatelů hostingu a spoléhá se na obnovitelné energie. Protože je to jasné: webhosting spotřebovává energii a zajišťuje významné emise emisí CO2. Na RAIDBOXES udržitelnost a ochrana klimatu nejsou prázdnou frází, ale nedílnou součástí firemní kultury.

Zelený hosting pro WordPress Na RAIDBOXES

Když provozujete web nebo internetový obchod, spotřebováváte mnoho zdrojů. RAIDBOXES ovládací prvky, na druhé straně, s klimaticky pozitivní hosting pro WordPress A WooCommerce .

Pomocí tohoto nástroje můžete snadno určit, zda je váš web zelený, pomocí nadace Green Web Foundation. Pokud je výsledek negativní, možná budete chtít změnit poskytovatele hostingu. Srovnání můžete vidět zde. 

Nadace Zeleného webu
RAIDBOXES spoléhá na udržitelnou certifikovanou zelenou elektřinu z vodní energie.

2. Design

Správný design může zabránit použití zbytečné energie, například když váš web v první řadě nestahuje nepotřebný a nežádoucí obsah. Jak můžete sladit design a udržitelnost a šetřit zdroje?

Mobile First

Na Mobile First optimalizujete svůj obsah od začátku při používání smartphonů. Optimalizované stránky, není třeba načítat naddimenzovaná média na mobilních zařízeních. Ty jsou naprogramovány tak, aby styly plochy nebylo možné přepsat, ale jsou navrženy přímo pro nejmenší zařízení.

Uživatelské prostředí

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. Minimalistujte neúmyslné objížďky svých uživatelů. V ideálním případě jsou načteny pouze stránky, které uživatel skutečně chce navštívit. Snížení nežádoucích kliknutí odesílá méně požadavků na data, a proto spotřebovává méně energie.

Obvod stránky

I zde můžete při plánování webu pracovat na své udržitelnosti. Obecně řečeno, čím méně stránek je třeba načíst, tím méně požadavků na data je odesláno. Kromě snadnější navigace na stránce má také smysl z ekologického hlediska shrnout obsah a snížit počet stránek.

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

3. Vývoj

Pagespeed

Pagespeed je již nějakou dobu součástí × 11 webového designu. Proč je dobré, aby ochrana životního prostředí věnovala pozornost dobrému výkonu? Stránka, která se načítá rychleji, je důsledkem malého množství dat k načtení!

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

O to důležitější je, abyste dobře optimalizovali své webové stránky a svůj obchod. Toto je váš osobní příspěvek k ochraně klimatu. Více se dožiji v naší e-knize Rychlost a výkon stránky.

Proč je rychlost stránek pomalá, může být z několika důvodů. Kromě analýzy vám mnoho nástrojů také poskytuje řešení pro větší výkon.

Pro tento článek jsem dal svou vlastní stránku přes její 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. Takže byste se měli zamyslet nad tím, jaké cíle s testy dosáhnete.

maják Google
Tento výsledek mi dává populární nástroj PageSpeed Insights .
gllighthouse
Google Lighthouse také testuje dostupnost mého webu, mimo jiné.

Zde pro srovnání Chrome Developer Tool Google Lighthouse a Google PageSpeed Insights . Oba nástroje jsou užitečnými referenč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 uživatelsky nejpřísnější. Informace jsou prezentovány stručným a srozumitelným způsobem, tipy pro zlepšení rychlosti stránky jsou užitečné.

Webové stránky Karbonové kalkulačky také testují udržitelnost. Mám pozitivní pohled na obrazovou prezentaci výsledku. Srovnání s méně abstraktními jednotkami měření usnadňuje, aby si o něco více uvědomoval rozsah své práce.

Ačkoli obecně mi služba webové stránky Carbon informativní, postrádám individuálně přizpůsobené detaily, jak je znám z Google Tools i Ecograder. Kromě toho mi srovnání s jinými testované webovými stránkami přisudí jako měřítko profesionálních projektů a argumentů za nedostatečné.

webová stránkatest
Populární testovací nástroj webové stránky jde do velké hloubky.

Zejména pro vývojáře je testování webových stránek vynikajícím nástrojem, protože jde do mnoha detailů. Můžete zde testovat z různých předvolby. Od "Jednoduchého testování" po "Pokročilé nastavení", které vám dává možnost vyloučit různé komponenty vašeho webu nebo přidat úryvky prostřednictvím kódu a zároveň dodat zprávu Google Lighthouse Report do srovnávacího testování dvou webových stránek, "vše" je zde možné nejprve. Výsledky jsou také technicky rozděleny do nejmenších detailů. Tato webová stránka se proto používá pro pokročilé testování, zatímco Google a spol. jsou obecnější ve své analýze.

Obrázky a jiná média

Již jsem se zmínil o tom, jak znovu zvážit nabízený obsah. Nyní je to o optimální integraci obrazů. 

Tinypng skvěle funguje pro kompresi obrazů – a většinou bez jakékoli znatelné ztráty kvality. Stejného výsledku můžete dosáhnout pomocí aplikace Photoshop a nastavení "Exportovat pro web". Pokud jste již převedli obrázky na CMS, například WordPress , lze následně připojit Plugin , například Smush, stále optimalizujte rozlišení.

Pokud máte mnoho obrázků nebo ikon, můžete se vypořádat se střiky CSS. Fungují podobně jako sprites ve vývoji počítačových her. Zde jsou obrázky integrovány pomocí listu sprite. CSS pak určí, které souřadnice jsou pod kterým obrázkem. Více o tomto tématu naleznete zde.

Sprite listy je více obrázků / ikon, které jsou sloučeny do jednoho souboru. Návrháři často seskupují své obrázky 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řehraje 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 (zdarma a placené) Plugins .

WordPress

Samozřejmě si také klást otázku, kdy jsou ekologické přístupy společností autentické: Existuje vůbec udržitelný internet? Jak "zelený" může WordPress Skutečně? V článku WordPress a udržitelnost najdete aktuální stav diskuse v německy mluvící komunitě WP.

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

RAIDBOXES od samého počátku, je odhodlánaUdržitelné WordPress A. Podívejte se mimo jiné na naše tipy na WordPress & Udržitelnost, stejně jako zelené internetové obchody. Chceš na sebe vzít víc zodpovědnosti? Pak si přečtěte svůj příspěvekZelený hosting pro WordPress Do toho.

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 Plugins a lehký Theme zde jsou hlavní tipy.

Průměrná WordPress Webové stránky mají přibližně 600 KB. Výběr správného Themes a s přihlédnutím k dříve vysvětlenému přístupu můžete ušetřit 50 procent nebo více. Malý výběr testovaných Themes najdete ji zde.

Pokud je vaše webová stránka již zavedena a změna Themes vyloučena, můžete WordPress Zlepšete výkon pomocí těchto 10 seřizovacích šroubů.

Jak získat zákazníky, 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 srozumitelné návrhy, 
  • lepší SEO hodnocení, 
  • kratší doba nabíjení a 
  • Stránky optimalizované pro mobilní zařízení. 

Pokud stále potřebujete více argumentů, různé základy nabízejí také tzv. odznaky, které můžete integrovat na stránkách svých zákazníků.

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

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

Závěr, extrémnější přístupy a materiál ke čtení

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

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

Zjistěte, která z vašich aplikací je zelená a kterou je třeba naléhavě vyčistit: Nástroj ClickClean greenpeace vám poskytne zajímavý přehled o vašich (oblíbených) aplikacích a o tom, jak jsou ekologicky cenné.

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

Neměli bychom zapomínat ani na pozitivní dopady internetu na naše životní prostředí. Tímto způsobem nám používání videokonferencí šetří cestovní trasy. Zejména v posledních několika měsících si všichni museli být vědomi toho, jak můžeme používat internet, abychom se vyhnuli používání dopravních prostředků, a tím snížili emise CO2. 

Kromě toho existují kanceláře, které lze díky domácí kanceláři snížit. Kromě toho nám síť nabízí příležitost, abychom se spojili s ostatními: například můžeme používat platformy carsharingu a rezervovat "ubytování v soukromí", 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í usnadňuje také internet. Nabízení a pořizování ekologických produktů (ke kterým bychom jinak mohli mít menší přístup) je samozřejmě jedním z pozitivních účinků digitálního průmyslu – abychom jmenovali jen některé.

Pokud se chcete ponořit 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 provádění.

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

Použijte funkci komentáře. Chcete být informováni o nových příspěvcích k návrhu a vývoji webu? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho zpravodaje.

Po studiu designu počítačových her a kreativního psaní v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamifikaci a výzkum motivace uživatelů a jejích zkušeností, a s velkou vášní a zvědavostí na technologické trendy.

Podobné články

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.