Sürdürülebilir Web Tasarımı: Çevre dostu bir web nasıl tasarlanır.

Güzel web sitesi, hızlı bir şekilde yük ... ama bilmeden dünyayı yok ettiğinizi biliyor musunuz?

Bir işletme sahibi, pazarlamacı veya web sitesi geliştiricisi olarak hepimiz "en güzel" web sitesi "ve" en kolay kullanım "ın oluşturulmasına takıntılıyız. Yüksek performanslı bir sunucu yazma ve seçme karmaşık bir kod var, ancak kendimize hiç sormamış olabileceğimiz bir soru var: Bu dünyada" karbon ayak izini "bırakmak için yarattığımız web sitesi?

Dijital dünyanın temiz olduğunu düşünüyoruz. Uygunsuz ve çevreyi etkilemez, ancak gerçekte birisi web sitemizi her ziyaret ettiğinde sunucu, dünyanın dört bir yanındaki internet ağı aracılığıyla veri işlemek ve göndermek için enerji gerektirir. Bu enerjinin çoğu hala fosil yakıt yanmasından üretilmektedir. Küresel ısınmanın ana nedeni budur. Bu, her yüke ve her akışa her tıklamanın arkasına gizlenmiş "görünmez sorunlar" dır.

İllüstrasyonlar istemi: Bir taraftaki resim, güzel bir modern web sitesi gösteren bir bilgisayar ekranıdır. Yansıtmanın diğer tarafı bir kraterdir. Fabrika dumanı serbest bırakıyor. Dijital dünyanın gizli etkisini aktarır

Neden "güzel web sitesi" yanlışlıkla bir "suç tahrip" haline geldi?

Bu soruna kimsenin kötü niyetinden kaynaklanmaz. Ancak, sadece gözlerin gördüğü sonuçlara odaklanarak, web'e aşina olan "cehalet" ve "uygulamalardan" kaynaklanır. Bakalım web sitemizi hevesli bir karbon sürümü haline getiren kaynak nedir:

• Görüntüler ve videolar gerekenden daha fazla: Web sitesinin güzel ve net olmasını istiyoruz. Bu nedenle, doğru formatı sıkıştırarak veya kullanarak büyük bir resim dosyası yükleyin, her web sayfasının harika bir veri iletiminde göndermek için enerji kullanmasına neden olur
• Komple ve karmaşık kod: Eklenti, dışarıdan komut dosyası veya düzensiz CSS kullanma, tarayıcının tüm elektrik gücünü kullandığı web sayfasının işlenmesinde ve görüntülenmesinde daha fazla çalışmasına neden olur. Ekranı bloglayan kaynaklar (engelleme kaynakları) daha fazla. Ve kodun ne kadar önemli olduğunu anlayacak
• Işığı vurgulayan tasarım: ekran parlak renkler gösterir. Özellikle OLED ekrandaki beyaz renk, koyu veya siyah ekrandan daha fazla enerji kullanır. Karanlık modun kullanımı sadece güzel bir trendden daha fazlasıdır. sürdürülebilir tasarımın bir parçasıdır .
• kiraladığımız sunucu ile veri merkezi Hepsi iyi güç kaynakları

Bu faktörler, bir tehlikeye benzeyen bir web sitesi yapmak, daha önce hiç düşünmemiş olduğumuz küresel çevre sorununun bir parçası olarak ortaya çıktı

İllüstrasyonlar istemi: Basit infografik görüntüler, web sitesinin kompozisyonunu gösterir (resim, kod, video) ve enerji kullanımının kökenini açıklamak için elektrik santraline ve CO2 sembolüne işaret eden bir oka sahiptir.

Eğer global ısınmanın yanı sıra markanız da "sıcak" olacaktır.

Web sitesinin çevresel etkisini görmezden gelmek, sadece dünyayı etkilemekle kalmaz, aynı zamanda işletmeniz ve markanızın uzun vadede daha kısa sürede imajı üzerinde doğrudan bir etkisi vardır:

• Dünyaya bağlı olmayan markanın imajı: Şu anda dünyanın dört bir yanındaki tüketiciler özellikle Millennials ve Gen Z grupları markanın sürdürülebilirliği ve sosyal sorumluluğu için çok önemlidir. Çevreye dikkat etmeden hala iş yapan markalar, satın almayı doğrudan etkileyebilecek "modası geçmiş" ve "bencil" olarak görülebilir.
• Bir fark yaratma fırsatını kaybettim: Son derece rekabetçi bir pazarda "çevre dostu web siteleri" hikayesinin hikayesi olağanüstü satış noktaları haline gelebilir ve rakiplerden bir fark yaratabilir. Bu konunun piyasa avantajını ortadan kaldırmasına izin verirseniz
• Yüksek Gizli Maliyetler: Ağır ve komik web siteleri sadece yavaş yüklenecek ve yalnızca kullanıcılar için kötü bir deneyim yaratmakla kalmaz, aynı zamanda size yüksek bir bant genişliği ve gereksiz yere barındırma maliyeti de verebilir.
• SEO sıralaması daha kötü olabilir: Google, sayfa hızı ve kullanıcı deneyimi için büyük önem veriyor. Büyük dosyalar ve hantal kod nedeniyle yavaş yüklenen web sitesi. Trafiği ve satışları etkileyen azaltma eğilimindedir. markayı yansıtan ve olumlu bir etki yaratan bir organizasyon web sitesi oluşturmak Bu nedenle sürdürülebilirlik dahil tüm boyutlara da bakmak zorundadır

Web sitemizin çevrenin bir parçası olmasına izin vermek, marka fırsatlarına ve markanın itibarına kademeli olarak izin vermekten farklı değildir. Yavaş yavaş aşınmıştı.

İllüstrasyonlar istemi: 2 grafik görüntüleri ters yönde bir satır, yükselen bir karbon sürümünü gösteren bir grafiktir. Diğer satır, düşen müşterinin (marka güven) güvenini gösteren bir grafiktir.

"Fikirler" den "Eylemler" e başlayın. Web sitenizi yeşil için değiştirmek zor değil.

sürdürülebilir web tasarımı olarak değiştirmek zor veya uzak değildir. Çeşitli teknikleri düşünme ve kullanma yöntemlerinin bir değişikliğidir. Akıllıca kullanılmış Bu noktalardan başlayabiliriz:

1. Verimliliği vurgulayan tasarım (verimlilik ilk tasarım):

• Temiz Kod: HTML, CSS, JavaScript kodunu mümkün olduğunca temiz ve sıkı yazın. Gereksiz komut dosyalarının kullanımını azaltın.
• Görüntü Optimizasyonu: Yüklemeden ve formatta her yüklemeden önce görüntüleri sıkıştırma , yüksek kalite sağlayan WebP veya AVIF gibi modern görüntüler, ancak dosya JPEG veya PNG'den daha küçüktür.
• Tembel Yükleme: Ekranın görüntünü veya videosunu altına ayarlayın. Kullanıcı ertelendiğinde indirin, ilk başta gereksiz veri yüklemesini azaltmak için

2. Dünyayı önemseyen UX/UI (Yeşil UX/UI):

• Karanlık Mod: Karanlık Modlu Tasarım bir alternatiftir. OLED ekranının gücünü azaltmaya gerçekten yardımcı olabilir.
• Sistem Yazı Tipleri: Çok sayıda web yazı tipini yüklemek yerine sistem yazı tipleriyle birlikte gelen standart yazı tiplerinin kullanımı, veri iletimini azaltmaya ve web indirmesini daha hızlı hale getirmeye yardımcı olacaktır.
• Hareket kullanımını azaltın: gereksiz yere animasyon veya otomatik oyun videosunu azaltın çünkü bunlar iyi enerji kullanıcılarıdır.

3. Yeşil Teknoloji (Yeşil Teknoloji) seçin:

• Yeşil Hosting: Veri merkezi operasyonlarında yenilenebilir enerjiyi açıkça duyuran bir web barındırma seçin.

, dünyanın dört bir yanındaki geliştiricilerin ve tasarımcıların sahip olduğu bir kılavuz olan sürdürülebilir web manifestosu ile uyumludur Perspektifi ayarlamaktan ve bu küçük noktalarda yapmaktan başlayarak temiz ve sürdürülebilir bir dijital dünya yaratmak en önemli ilk adımdır.

İllüstrasyonlar istemi: Güzel Infographic, sürdürülebilir web tasarımının özetlenmesi, 3 ana konuya bölünmüş: Verimli tasarım, yeşil UX, kolay anlama bileşenlerine sahip yeşil teknoloji.

Gerçek Örnek: Web sitesinin başarılı olması için organik temel bilgiler "kıyafet çıkardığında"

Daha açık bir şekilde görmek için, ana kalp olarak sürdürülebilirliğe önem veren bir marka olan "Organik Temel" giyim markası örneğine bir göz atın. Sadece ürünü durdurmuyorlar. Aynı zamanda bu felsefeyi kendi web sitesinde de uyguladı

Organik temel bilgiler web sitesinin "düşük etkili" versiyonunu yarattı. Kullanıcı ziyaretleri bu modu açmayı seçebileceğinde, olanlar:

• Gereksiz unsurları kesin: Ağır video ve komut dosyası görüntüleri çıkarılacak ve sadece gerçekten gerekli bilgileri bırakacaktır.
• Gerektiğinde bilgileri indirin: Kullanıcı fareyi (Hover) gösterene kadar ürün görüntüsü görüntülenecek şekilde yüklenmez.
• Şaşırtıcı sonuçlar: , normal sürüm web sitesine kıyasla CO2'nin piyasaya sürülmesini% 70'e düşürdüğünü buldular

Bu durum, sürdürülebilir web tasarımının sadece güzel bir teori olmadığının iyi bir kanıtıdır. Ancak bu yapılabilecek ve aslında ölçebilen bir şeydir ve müşterilere gönderilen markanın kararlılığını ve samimiyetini gösterir. Ve unutulmaz bir fark yarat

İllüstrasyonlar istemi: Karşılaştırma görüntüleri. Normal sürüm ve düşük etkili sürüm arasındaki organik temel bilgiler ekranı güçlü basitlik gösterir.

Hemen yap! Kontrol listesi web sitenizi "temiz" ve "yeşil" olarak değiştirin.

Web sitenizi daha çevre dostu hale getirmeye hazır mısınız? Hemen başlamak için bu basit kontrol listesini bir kılavuz olarak kullanmayı deneyin:

1. Mevcut karbon ayak izi: Web sitesi karbon hesap makinesine gitmeye çalışmadan önce web sitenizin mevcut durumunu anlayarak başlayın ve web sitenizi URL'inizi koyun. Web sitenizin ne kadar yayınlandığını görelim.
2. Yağ Operasyonu:
   • Tüm görüntü dosyalarını sıkıştırmak için Tinypng veya Squosh gibi araçları kullanın.
   • WebP veya AVIF biçimine dönüştürün
   • Tembel yüklemeyi tüm görüntülere ayarlayın.
3. Evi süpürün, kodu düzenleyin:
   • Kullanılmayan JavaScript veya CSS'yi kontrol edin ve silin.
   • Dosya boyutunu yükseltmek için Minify araçlarını kullanın.
4. Tasarımı gözden geçirin (UX/UI):
   • Karanlık Mod seçeneğini eklemeyi düşünün. Web sitenizin parlak bir arka planı varsa.
   • Gerekirse özel yazı tiplerinin kullanımını, azalmaları gözden geçirin.
   • Otomatik Video Oynatma (Otomatik Oyun)
5. Yeni bir yeşil ev arıyor:
   • Bilgi arayın ve yenilenebilir enerji kullanan yeşil barındırma servis sağlayıcılarına geçmeyi düşünün.

Bu kontrol listesinden yeni başlayarak, büyük bir değişiklik yaratabilir. Bu gelişmeler dünya için iyi değil. Ancak web sitenizin daha hızlı indirmesine yardımcı olur, bu da kullanıcıların ve SEO'nun deneyimi üzerinde doğrudan iyi bir etkiye sahiptir. Anlayan bir UX/UI tasarım ekibine sahip olmak , bu süreci daha kolay ve daha etkili hale getirecektir.

İllüstrasyonlar istemi: Her öğede simgeli güzel kontrol listesi görüntüleri (simgeler, karbon için ölçekler, görüntüleri optimize etmek için görüntü simgeleri), takip etmeyi kolay ve çekici hale getirir.

Her soruyu temizleyin! Soru-cevap sürdürülebilir web tasarımı

Bunun birçok insan için yeni olabileceğini biliyoruz. Bu nedenle bu soruyu cevaplamak için en yaygın soruları derliyorum.

Soru: Çevre dostu web sitesi, web sitesinin ilginç görünmediğini ilginç değil mi?
Cevap: Doğru değil! Sürdürülebilir web tasarımı, web sitesinin sıkıcı veya boş görünmesi anlamına gelmez, ancak "akıllı tasarım", kullanıcıların güzelliğini veya iyi deneyimini azaltmadan kaynakları azaltmanın yollarını bulmak için yaratıcılığın kullanılmasıdır. Basitlik (minimalizm) ve verimlilik (verimlilik) çok güçlü bir biçimde güzeldir.

Soru: Bunun gibi bir web oluşturmak, işletmenin maliyetini gerçekten azaltabilir misiniz?
Cevap: Gerçekten! Web sitesi dosyanız daha küçük olduğunda, veri iletim miktarı (bant genişliği) azalır, bu da daha uzun vadeli barındırma hizmetine yol açabilir. Buna ek olarak, daha hızlı yükleme olan web sitesi, dönüşüm oranını artırmaya ve iş gelirine doğrudan fayda sağlayan hemen çıkma oranını azaltmaya yardımcı olur.

Soru: Yalnızca geliştirici olmalı, değil mi? Bunu yapmak için?
Cevap: gerekli değil. Herkes katılabilir. Tasarımcılar enerji tasarrufu sağlayan renk ve düzeni kullanmayı seçebilirler. İçerik yüklemeden önce resimleri optimize etmeyi seçebilir. kuruluş web sitesi için bir web sitesi aramak gibi sürdürülebilirliğe dikkat eden ajanslardan veya ev sahiplerinden kullanmayı seçebilirler Bu anlaşılır ve bu tavsiyeyi doğrudan verebilir

S: Müşteriler veya kullanıcılar bu konuda gerçekten ilgileniyor mu?
Cevap: Her gün daha fazla ilgileniyor! Birçok ofisten raporlar, modern tüketicilerin sosyal ve çevresel sorumluluğu ifade eden markaları desteklemeye hazır olduklarını göstermektedir. Web sitenizin bunun umurunda olduğu iletişim, değerlendirilemeyen bir marka sevgisi ve uzun vadeli sadakat yaratmaktır.

İllüstrasyonlar istemi: görüntü simgeleri, soru işaretleyicileri (?) Ve doğru işaretler (✓), her sorunun cevaplarını kolay ve ilginç bir anlayış için özetleyen kısa mesajlarla (✓)

"Web sitesi" ni dünyanız ve işinizle "dost" olarak değiştirmenin zamanı geldi.

sürdürülebilir web tasarımının sadece bir trend değil, aynı zamanda herkesin adapte olması gereken dijital dünyanın yaratılmasının "bir sonraki evrimi" olduğunu gördük Bu, iş hedeflerini sorumlulukla dünyaya mükemmel ve zeki olarak bütünleştirmenin bir yoludur.

Win'de bir durum yaratmaktır (enerji ve karbon serbest bırakmayı azaltın), kullanıcılar için iyi (hızlı yükleme web siteleri, kullanımı kolay) ve iş için iyi (daha iyi marka görüntüleri, maliyetleri azaltmak, dönüşüm oranını artırmak). "Gerçekten iyi"

Web sitenizin artık sadece güzel ama kalpsiz bir iş aracı olmasına izin vermeyin. Bugünden yapmaya başlayın. Teker teker kullanmak için verdiğimiz kontrol listesini kullanın. İyi niyetinizi dünyaya iletin. Ve bugün dünya yatırımının gelecekte işinizin sürdürülebilir büyümesi için yatırım olduğunu göreceksiniz.

Web sitenizin sadece güzel değil, "akıllı" ve "dünyadan da sorumlu" olmasını istiyor, değil mi? UX/UI uzmanlarından oluşan bir ekibe ve web sitesi geliştirmemize danışın. Yalnızca iş sonuçları oluşturmakla kalmayan bir web sitesi oluşturmanıza yardımcı olmaya hazırız. Aynı zamanda bu dünya için olumlu bir etki yaratmak

İllüstrasyonlar istemi: Güçlü Son Resim, bir bilgisayar kodu ve yükselen bir iş grafiği olarak arka planla büyüyen küçük bir ağaç tutan bir el görüntüsüdür.

‍