Udržitelný web design: Jak vytvořit udržitelné webové stránky

Sonja Hoffmann Aktualizováno 21.
7 min.
Sustainable Web Design
Naposledy aktualizováno 21.

Co přesně znamená "Udržitelný Web Design"? Jak víte, jak ekologické jsou vaše stránky? Jak můžete udělat vaše webové stránky (y) udržitelnější a jaké výhody to přináší svým zákazníkům? Shromáždil jsem odpovědi a některé důležité nástroje v tomto článku.

Fakta o internetu power-jedlík

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

Hlasité Webové stránkykarbonové internet spotřebovává 416,2 terawatthodin (TWh) za rok. To je asi tolik, kolik spotřebuje jen Německo. Pokud by byl internet zemí, šestá největší spotřeba elektřiny na světě.

Ale jak to vlastně může být? Nešli jsme extra digitálně, abychom ochránili naše životní prostředí? Realita je zde poněkud odlišná: Bohužel, digitální neznamená automaticky "zelené". Od serverových farem přes datová centra až po skutečný koncový bod – vše spotřebovává energii do práce.

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

Přemýšleli jste někdy o tom, kolik zdrojů je potřeba pro vaše webové stránky? Zaručeně 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 někde uložen. Tak se toho hodně sejde.

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

1. Hosting

Mezitím se mnoho poskytovatelů hostingu účastní a spoléhá se na obnovitelné zdroje energie. Protože je to jasné: web hosting spotřebovává energii a zajišťuje významné emise emisí CO2. Na RAIDBOXES udržitelnost a ochrana klimatu není 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 velké množství zdrojů. RAIDBOXES kontroly, na druhé straně, s klimaticky pozitivní hosting pro WordPress A WooCommerce.

Ať už je vaše webové stránky "zelené", můžete snadno použít tento nástroj nadace Green Web Foundation. Pokud je výsledek záporný, můžete přepnout poskytovatele hostingu. Můžete provést srovnání zde

Nadace Zelený web
RAIDBOXES na udržitelné, certifikované zelené elektřině z vodní energie.

2. Design

Správný design může zabránit použití zbytečné energie, například když vaše webové stránky nestahují zbytečný 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 na používání smartphonů. Optimalizované stránky, nemusíte načítat nadměrná média na mobilních zařízeních. Ty jsou naprogramovány tak, aby styly plochy nemusely být přepsány, ale byly navrženy přímo pro nejmenší zařízení.

Uživatelské prostředí

Informoval jsem vás o výhodách dobře naplánované použitelnosti již hlášena. Dobře fungující uživatelská zkušenost pomáhá vám a vašim zákazníkům, aby vaše webové stránky byly udržitelnější. Minimimit neúmyslné objížďky vašich 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ím nechtěných kliknutí odešle méně žádostí o data, a proto spotřebuje méně energie.

Obvod stránky

I zde můžete při plánování webových stránek pracovat na své udržitelnosti. Obecně řečeno, čím méně stránek, které je třeba načíst, je odesláno méně požadavků na data. Kromě toho, že usnadňuje navigaci na stránce, má také smysl z ekologického hlediska shrnout obsah a snížit počet stránek.

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

3. Rozvoj

Rychlost stránek

Pagespeed je již dlouho součástí malého 1x1 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 je důležitější, že optimalizujete své webové stránky a váš shop. To je váš osobní příspěvek k ochraně klimatu. Více se dozvíte v našem e-booku Page Speed & Performance.

Proč je vaše 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 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. Takže byste měli přemýšlet o tom, jaké cíle budete dosáhnout s testy.

google maják
Tento výsledek mi dává populární nástroj PageSpeed Insights .
gllighthouse
Google Lighthouse také testuje mé stránky pro přístupnost, mimo jiné.

Zde jako srovnání Nástroj pro vývojáře Chrome Google Lighthouse a Google PageSpeed Insights. Oba nástroje jsou užitečnými referenčními body pro optimalizaci na stránce.

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

Ecograder byla vytvořena za účelem testování udržitelnosti internetových stránek. Já osobně považuji Ecograder za uživatelsky nejpřísnější. Informace jsou prezentovány stručně a srozumitelným způsobem, tipy pro zlepšení rychlosti stránky jsou užitečné.

Dokonce i při Webové stránky Uhlíková kalkulačka je testována především na udržitelnost. Pozitivně se dívám na obrazovou prezentaci výsledku. Srovnání s méně abstraktními měrněmi usnadňuje, aby si byl o něco více vědom rozsahu jeho práce.

I když jsem obecně najít službu webových stránek Carbon informativní, chybí mi individuálně přizpůsobené detaily, jak ho znám z Google Tools, stejně jako Ecograder. Kromě toho považuji srovnání s jinými testovanými webovými stránkami za měřítko profesionálních projektů a argumentů nedostatečné.

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

Speciálně pro vývojáře, Webpagetest vynikající nástroj, jak to jde do mnoha detailů. Můžete zde testovat z různých předvoleb. Od "Jednoduché testování" na "Pokročilé nastavení", které vám možnost vyloučit různé součásti vašich webových stránek nebo přidat úryvky prostřednictvím kódu, a zároveň dodat Google Lighthouse Zpráva o porovnání testování dvou webových stránek, "všechno" je možné zde první. 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.

Obrázky a jiná média

Již jsem se zmínil, jak přehodnotit nabízený obsah. Nyní je to o optimální integraci obrázků. 

Tinypng řekl: funguje skvěle pro kompresi obrázků - a většinou bez zřetelné ztráty kvality. Stejného výsledku můžete dosáhnout s aplikací Photoshop a nastavením Export pro web. Pokud jste již své obrázky převedli na cms, například WordPress , mohou být následně spojeny Plugin , například Smush, stále optimalizovat rozlišení.

Pokud máte mnoho obrázků nebo ikon, můžete se vypořádat s SKŘÍTKY CSS. Pracují podobně jako skřítci ve vývoji počítačových her. Zde jsou obrázky integrovány pomocí listu sprite. ČSSD pak určuje, které souřadnice jsou pod kterým obrázkem. Více na toto téma najdete zde.

Listy Sprite jsou více obrázků/ikon, které jsou sloučeny do jednoho souboru. Často návrháři 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řehrává různé vizuální součásti.

Lazy Load je další varianta pro optimální načítání obrázků. Zde jsou obrázky načteny, když je návštěvník potřebuje. Pro WordPress tam jsou nyní bezpočet (zdarma a placené) Plugins .

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 Skutečně? V článku WordPress a udržitelnost najdete aktuální status pro diskusi v německy mluvící komunitě WP.

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

RAIDBOXES se od samého počátku zavázal udržitelnému WordPressu . Podívejte se na naše tipy k WordPressu a udržitelnosti stejně jako k zeleným e-shopům. Chcete také převzít více zodpovědnosti? 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 Plugins a lehký Theme Zde jsou nejlepší tipy.

Průměrná WordPress stránky se o cca 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 najít vás zde.

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

Jak přimět své 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 web designu: 

  • Vylepšená použitelnost a uživatelské prostředí,
  • jasné a srozumitelné návrhy, 
  • lepší SEO žebříčku, 
  • kratší dobu nabíjení a 
  • Stránky optimalizované pro mobilní zařízení. 

Pokud stále potřebujete více argumentů, nabízejí různé nadace také takzvané 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ř. WebOvá stránkaKarbonný odznak, který můžete integrovat na svých stránkách, abyste ukázali, že váš obsah je udržitelný a ekologický.

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

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 web designéři a vývojáři přirozeně hrají 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íce vědomě.

Zjistěte, které z vašich aplikací jsou zelené a které je třeba naléhavě vyčistit: Pomocí nástroje Klepněte na tlačítkoClean z Greenpeace získáte 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 zelenější budoucnosti: 

  • Takhle to udělal Jack Lenox. WordPress - Theme je pouze 7 KB světlo. 
  • Brad Frost nás povzbuzuje na svém blogu DeathToBullshit s humorným zvratem, aniž by se to přesně stalo. 
  • Heydon Pickering dává Tipy pro kódování jak udělat svou stranu štíhlejší.

Neměli bychom zapomínat ani na pozitivní účinky, které má internet 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 každý musel uvědomit, 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é mohou být sníženy díky domácí kanceláři. Kromě toho nám síť nabízí možnost spolupracovat s ostatními: například můžeme použí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é velmi usnadněné internetem. Nabízení a získávání ekologicky šetrných produktů (k nimž bychom jinak mohli mít menší přístup) je samozřejmě jedním z pozitivních účinků digitálního průmyslu – abychom jmenovali alespoň 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 realizaci.

Udržitelný Web Design: Jaké otázky máte pro Sonja?

Použijte funkci komentáře. Chcete být informováni o nových příspěvcích k web designu a vývoji? Pak nás následujte na TwitterFacebook nebo přes náš Bulletin.

Po studiu game designu a creative writingu v zeleném Aucklandu se Sonja specializovala na design webových aplikací a jeho vývoj. Zaměřuje se na gamification a výzkum motivace uživatelů a jejích zkušeností, spolu s vášní a zvědavostí pro 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 * .