Sürdürülebilir Web Tasarımı: Sürdürülebilir web siteleri nasıl oluşturulur?

Sonja Hoffmann 21 Ekim 2020 tarihinde güncellendi
7 Dk.
Sürdürülebilir Web Tasarımı
Son güncelleme 21 Ekim 2020

"Sürdürülebilir Web Tasarımı" tam olarak ne anlama geliyor? Sitenizin ne kadar ekolojik olduğunu nasıl biliyorsunuz? Web sitenizi nasıl daha sürdürülebilir hale getirebilirsiniz ve bu müşterilerinize ne gibi faydalar sağlar? Ben cevapları ve bu makalede bazı önemli araçlar topladık.

Internet güç yiyen hakkında gerçekler

Enerji açısından dijital tüketimimizin maliyeti

Yüksek sesle Web sitesi karbon Internet yılda 416,2 terawatt saat (TWh) tüketir. Bu sadece Almanya'nın tükettiği kadar. İnternet bir ülke olsaydı, zaten olurdu dünyanın en büyük altıncı elektrik tüketimi.

Ama bu nasıl olabilir ki? Çevremizi korumak için ekstra dijital eve gitmedik mi? Burada gerçek biraz farklı: Ne yazık ki, dijital otomatik olarak "yeşil" anlamına gelmez. Sunucu çiftliklerinden veri merkezlerine, gerçek bitiş noktasına kadar her şey çalışmak için enerji tüketir.

Ortalama bir web sitesi CO2 1,76 gram üretmek için tahmin edilmektedir. Ayda 10.000 ziyaretçi ile, Yılda 211 kg CO2 – tek bir sayfa için! 

Hiç web siteniz için kaç kaynak gerekli olduğunu düşündünmü? Düşündüğünden daha fazla garanti! Web sitenizin gönderdiği her istek alınır, işlenir, iade edilir ve gerekirse bir yerde saklanır. Bu şekilde çok şey bir araya gelir.

Web sitelerimizin daha yeşil olması gerekir - ama nasıl?

1. Hosting

Bu arada, birçok barındırma sağlayıcıları katılıyor ve yenilenebilir enerjiler güveniyor. Çünkü açık: web barındırma enerji tüketir ve CO2 emisyonlarının önemli bir emisyon sağlar. At RAIDBOXES sürdürülebilirlik ve iklim koruma boş bir ifade değil, şirket kültürünün ayrılmaz bir parçasıdır.

Yeşil Hosting için WordPress at RAIDBOXES

Bir web sitesi veya çevrimiçi mağaza çalıştırdığınızda, çok fazla kaynak tüketirsiniz. RAIDBOXES kontrolleri, diğer taraftan, ile iklim-pozitif barındırma için WordPress Ve WooCommerce.

Web siteniz "yeşil" olsun, kolayca kullanabilirsiniz bu araç Yeşil Web Vakfı tarafından. Sonuç negatifse, barındırma sağlayıcıları arasında geçiş yapmak isteyebilirsiniz. Bir karşılaştırma yapabilirsiniz Burada Görüş. 

Yeşil Web Vakfı
RAIDBOXES hidroelektrik sürdürülebilir, sertifikalı yeşil elektrik dayanır.

2. Tasarım

Doğru tasarım, örneğin web siteniz in gereksiz ve istenmeyen içerik indirmediğinde gereksiz enerjinin kullanılmasını engelleyebilir. Tasarımı ve sürdürülebilirliği nasıl bağdaştırabilir ve kaynakları nasıl korursunuz?

Mobile First

At Mobile First akıllı telefon kullanımında içeriğinizi en başından itibaren optimize edersiniz. Optimize edilmiş sayfalarda, büyük boyutlu ortamların mobil cihazlara yüklenmesi gerekmez. Bunlar, masaüstü stillerinin üzerine yazılması gerekmeyecek, ancak doğrudan en küçük aygıt için tasarlanacak şekilde programlanır.

Kullanıcı Deneyimi

İyi planlanmış bir kullanılabilirliğin yararları hakkında sizi bilgilendirdim. zaten rapor. İyi işleyen bir kullanıcı deneyimi, sizin ve müşterilerinizin web sitenizi daha sürdürülebilir hale getirmenize yardımcı olur. Kullanıcılarınızın kasıtsız sapmalarını minimit. İdeal olarak, yalnızca kullanıcının gerçekten ziyaret etmek istediği sayfalar yüklenir. İstenmeyen tıklamaları azaltmak daha az veri isteği gönderir ve bu nedenle daha az enerji tüketir.

Sayfa çevresi

Burada da, web sitesini planlarken sürdürülebilirlik üzerinde çalışabilirsiniz. Genel olarak konuşursak, yüklenmesi gereken daha az sayfa, daha az veri isteği gönderilir. Sayfanızda gezinmeyi kolaylaştırmanın yanı sıra, içeriği özetlemek ve sayfa sayısını azaltmak ekolojik açıdan da anlamlıdır.

Görüntüler, animasyonlar ve videolar gibi medyayı daha bilinçli ve kasıtlı olarak kullanmalıyız. Siteniz için planladığınız tüm resimler, videolar, simgeler ve animasyonlar gerçekten değer katıyor mu? Ya da bazıları olmadan yapabilir misin?

3. Geliştirme

Sayfa hızı

Pagespeed uzun web tasarımıküçük 1x1 bir parçası olmuştur. Neden iyi bir performans dikkat çevre koruma için iyidir? Daha hızlı yüklenen bir sayfa, yüklenmesi gereken az verinin sonucudur!

Daha hızlı web siteleri - iklim için daha iyi

Bu, web sitenizi ve mağazanızı iyi optimize etmek için daha da önemli hale getirir. Bu iklim koruma için kişisel katkınızdır. E-kitabımızda daha fazla bilgi edinebilirsiniz Sayfa Hızı ve Performans.

Sayfa hızınız neden yavaş olabilir çeşitli nedenlerden dolayı olabilir. Analize ek olarak, birçok araç size daha fazla performans için çözümler de sunar.

Bu yazı için onun adımlarını ile kendi sayfa koyduk. Benim kendi kendine test göreceğiniz gibi, bir analiz bile tamamen tam tersi olabilir - hangi uygulama test ediliyor bağlı olarak. Bu yüzden testlerde hangi hedeflere ulaşacağını düşünmelisin.

google deniz feneri
Bu sonuç bana popüler bir araç verir PageSpeed Insights .
gllighthouse
Google Deniz Feneri de diğer şeylerin yanı sıra, erişilebilirlik için sitemi test ediyor.

Burada bir karşılaştırma chrome geliştirici aracı olarak Google Deniz Feneri Ve Google PageSpeed Insights. Her iki araç da sayfa optimizasyonu için yararlı başvuru noktalarıdır.

ecograder
Ecograder sayfa optimizasyonu için iyi yaklaşımlar sağlar.

Ecograder özellikle web sitelerinin sürdürülebilirliğini test etmek için oluşturuldu. Ben şahsen Ecograder en kullanıcı dostu bulabilirsiniz. Bilgiler kısa ve anlaşılır bir şekilde sunulur, sayfa hızını artırmak için ipuçları yararlıdır.

Hatta Web Sitesi Karbon Hesaplama esas olarak sürdürülebilirlik için test edilmiştir. Sonucun resimli sunumuna olumlu bir bakış açısıyla bakacağım. Daha az soyut ölçü birimleriyle yapılan karşılaştırmalar, çalışmalarının kapsamının daha fazla farkına varmalarını kolaylaştırır.

Ben genellikle Web Sitesi Karbon bilgilendirici hizmet bulmak rağmen, ben Google Tools yanı sıra Ecograder biliyorum gibi bireysel olarak uyarlanmış ayrıntıları eksikliği. Buna ek olarak, profesyonel projeler ve argümanlar yetersiz bir ölçüsü olarak diğer test web siteleri ile karşılaştırma bulabilirsiniz.

web sayfası testi
Popüler web sayfası test aracı büyük derinliğe gider.

Özellikle geliştiriciler için, Web sayfası testi mükemmel bir araç, bir çok detay gider gibi. Burada farklı ön ayarlardan test edebilirsiniz. "Basit Test"ten, web sitenizin farklı bileşenlerini hariç tutma veya kod üzerinden parçacıklar ekleme ve aynı zamanda iki web sitesinin karşılaştırma sınaması için bir Google Deniz Feneri Raporu sağlama olanağı sağlayan "Gelişmiş Ayarlar"a kadar, "her şey" önce burada mümkündür. Sonuçlar teknik olarak en küçük ayrıntıya da ayrılır. Bu nedenle bu web sitesi gelişmiş testler için kullanılırken, Google ve Co. analizlerinde daha geneldir.

Resimler ve diğer ortamlar

Sunulan içeriğin nasıl yeniden gözden geçirilen bir şekilde yeniden gözden geçirilenbir şeyden bahsetmiştim. Şimdi önemli olan görüntüleri en iyi şekilde entegre etmek. 

Tinypng görüntüleri sıkıştırmak için harika çalışır - ve çoğunlukla kalite herhangi bir fark kaybı olmadan. Photoshop ve "Web için Dışa Aktarma" ayarı ile aynı sonucu elde edebilirsiniz. Resimlerinizi cms'ye dönüştürdüyseniz, örneğin WordPress , daha sonra bir ile bağlanabilir Plugin , Smush gibi, yine de çözünürlüğü optimize edin.

Çok sayıda resim veya simgeniz varsa, CSS sprite'lerle başa çıkabilirsiniz. Onlar bilgisayar oyunu geliştirme sprite benzer çalışır. Burada, görüntüler bir sprite levha kullanılarak entegre edilmiştir. CsS daha sonra hangi koordinatların hangi görüntünün altında olduğunu belirler. Bu konuda daha fazla bilgi bulabilirsiniz Burada.

Sprite sayfaları, tek bir dosyada birleştirilen birden çok resim/simgedir. Genellikle tasarımcılar tematik olarak kendi resimleri grup. Karşılık gelen x- ve y-koordinatları esas alınılarak, yapraklar buna göre bölünür ve entegre edilir. Bu, çeşitli görsel bileşenleri oynayan tek bir belge yükler.

Lazy Load, görüntülerin en iyi şekilde yüklenmesi için başka bir çeşididir. Burada, ziyaretçiler ihtiyaç duyduğunda görüntüler yüklenir. Için WordPress şimdi sayısız (ücretsiz ve ücretli) vardır Plugins .

WordPress

Tabii ki, biz de şirketlerin ekolojik yaklaşımlar otantik olduğunda kendimize sormak: Hiç sürdürülebilir bir Internet var mı? Nasıl "yeşil" olabilir WordPress Aslı -nda? Makalede WordPress ve sürdürülebilirlik Almanca konuşan WP topluluğunda tartışmak için güncel bir durum bulacaksınız.

Sürdürülebilir WordPress : Bize katılın

RAIDBOXES en başından itibaren, kararlıdır Sürdürülebilir WordPress A. Bak, diğer şeylerin yanı sıra, bizim ipuçları WordPress & Sürdürülebilirlik yanı sıra Yeşil online mağazalar. Daha fazla sorumluluk almak ister misin? O zaman katkını oku. Yeşil Hosting için WordPress Tarafından.

Sürdürülebilir ve verimli web tasarımına ne gibi katkılar sağlayabiliriz? Kaynakları kaydetmek için günlük tasarımdaki en önemli kaldıraçlar nelerdir? Fwe Plugins ve hafif Theme Burada üst ipuçları vardır.

Ortalama WordPress sayfalar yaklaşık 600 KB gelir. Hakkı seçme Themes ve daha önce açıklanan yaklaşımı dikkate alarak, yüzde 50 veya daha fazla tasarruf edebilirsiniz. Test edilmiş küçük bir seçim Themes sizi bulmak Burada.

Web siteniz zaten yerinde yse ve Themes hariç tutulursa, WordPress Bu 10 ayar vidasıyla performansı artırın.

Müşterilerinizin katılmasını nasıl sağlarsınız?

 Aslında, aşağıdaki anahtar kelimeler sürdürülebilir web tasarımı müşterilerinizi ikna etmek için yeterli olmalıdır: 

  • Geliştirilmiş kullanılabilirlik ve kullanıcı deneyimi,
  • açık ve anlaşılması kolay tasarımlar, 
  • daha iyi SEO sıralaması, 
  • daha kısa şarj süresi ve 
  • Mobil cihazlar için optimize edilmiş sayfalar. 

Daha fazla bağımsız değişkene hala ihtiyacınız varsa, çeşitli vakıflar müşterilerinizin sayfalarına entegre edebileceğiniz rozetler de sunar.

Sürdürülebilir, sertifikalı yeşil elektrik kullanan bir barındırma sağlayıcısı seçerken, bu rozet dahil edilebilir:

Örneğin, Web SitesiKarbon içeriğinizin sürdürülebilir ve ekolojik olduğunu göstermek için sayfalarınızda entegre edebileceğiniz bir rozettir.

Sonuç, daha aşırı yaklaşımlar ve okuma materyali

Bu konuda benim araştırma sırasında, sayısız istatistik üzerine tökezledi. Bu nedenle e-posta göndermek, plastik poşet kullanımıyla çevremiz üzerinde aynı etkiye sahiptir. Bu nedenle kitaplar genellikle e-kitaplardan daha çevre dostudur. Müzik albümleri satın almak, kaynaklarımız üzerinde dizel akışından daha naziktir. Liste sonsuzdur. Her şeyden önce, bu istatistikler biraz dijital de "yeşil" anlamına gelir önceki genel anlayış sallamak.

Web tasarımcıları ve geliştiricileri olarak, web'in gelecekte nasıl geliştiği konusunda doğal olarak büyük bir rol oynamamız dışında, kendimizle de başlayabilir ve Internet'i biraz daha bilinçli kullanabiliriz.

Uygulamanızdan hangisinin yeşil olduğunu ve hangilerinin acilen temizlenmesi gerektiğini öğrenin: Araçla ClickClean Greenpeace size (favori) uygulamaları ilginç bir bakış alacak ve ne kadar ekolojik değerli.

Daha yeşil bir gelecek için daha fazla farkındalık yaratan katkılar: 

  • Jack Lenox böyle. WordPress - Theme sadece 7 KB ışık. 
  • Brad Frost kendi blogunda bizi teşvik ediyor Ölüm tam olarak bu olmadan yapmak için mizahi bir bükülme ile. 
  • Heydon Pickering verir Kodlama İpuçları nasıl tarafı ince yapmak için.

İnternetin çevremiz üzerindeki olumlu etkilerini de unutmamalıyız. Bu şekilde, video konferans kullanımı bize seyahat rotaları kaydeder. Özellikle son birkaç ay içinde, herkes ulaşım araçlarını kullanmaktan kaçınmak ve böylece CO2 emisyonlarını azaltmak için Internet'i nasıl kullanabileceğimizi niçin kullanabileceğimizi biliyor olmalıdır. 

Buna ek olarak, ev ofis sayesinde azaltılabilir ofisler vardır. Buna ek olarak, ağ bize başkalarıyla ekip kurma fırsatı sunar: örneğin, araba paylaşım platformlarını kullanabilir ve otellerden daha çevre dostu airbnb gibi "aile yanında kalma" rezervasyonu yapabiliriz.

Sürdürülebilirlik ve çevre koruma ile ilgili bilgilerin yayılması da Internet tarafından çok daha kolay hale getirmektedir. Sunan ve çevre dostu ürünler (aksi takdirde daha az erişim olabilir) edinme, tabii ki, dijital endüstrinin olumlu etkilerinden biridir - isim ama birkaç.

Konunun daha derinine inmek istiyorsanız, web sitesini öneririm sustainablewebdesign.org bir başlangıç noktası olarak. Açık paragraflarda, burada en önemli noktalar açıklanır ve bunların uygulanması için olası teknik çözümler sunulur.

Sürdürülebilir Web Tasarımı: Sonja için ne gibi sorularınız var?

Lütfen yorum işlevini kullanın. Web tasarımı ve geliştirmeye yapılan yeni katkılar hakkında bilgi sahibi olmak ister misiniz? O zaman bizi takip et. TwitterFacebook ya da bizim aracılığıyla Bülten.

Yapraklı Auckland'da oyun tasarımı ve yaratıcı yazarlık eğitimi aldıktan sonra, Sonja Hoffmann web ve uygulama tasarımı ve geliştirme konusunda uzmanlaşmıştır. Onun odak gamification ve kullanıcı motivasyonu ve deneyimi keşfetmek, teknolojik eğilimler için bir tutku ve merak ile birleştiğinde.

Benzer makaleler

Bu makaledeki yorumlar

Yorum yaz

E-posta adresiniz yayınlanmayacaktır. Gerekli alanlar * Işaretlenmiş.