Progressive enhancement, bir sayfanın temel içeriğini ve işlevini her tarayıcıda çalışacak biçimde kurup gelişmiş özellikleri bunun üstüne katman katman ekleyen web geliştirme stratejisidir. Yazı yöntemin katmanlarını, graceful degradation ile farkını ve projede nasıl uygulandığını anlatır.
Progressive enhancement, bir web sayfasını önce her tarayıcıda çalışan temel HTML içerik ve işlevle kurup CSS ile JavaScript'i bunun üstüne katman olarak ekleme yöntemidir. Graceful degradation ise yönü ters çevirir: en yeni tarayıcı için tam deneyim tasarlanır, eski ya da kısıtlı ortamlar için sonradan sadeleştirilir.
Progressive enhancement katmanları HTML, CSS ve JavaScript ile nasıl kurulur
Temel katman, sayfanın amacını tek başına yerine getiren HTML'dir. Wikipedia tanımına göre bu strateji önce içeriği öne çıkarır ve herkesin sayfanın temel içeriğine ve işlevine erişmesini sağlar. Bu katmanda metin, başlık yapısı, gerçek bağlantılar ve sunucuya giden formlar eksiksiz çalışmalıdır. Bir ürün sayfasında fiyat, açıklama ve "sepete ekle" düğmesi, bir iletişim sayfasında da gönderilebilen form bu katmana girer.
CSS ikinci katmandır. Harici stil dosyası düzeni, yazı tipini ve renkleri ekler. Medya sorguları ekran genişliğine göre yerleşimi değiştirir. Stil dosyası yüklenmese de içerik okunur sırada kalır, çünkü sıralama HTML'de kurulmuştur.
JavaScript en üst katmandır ve mevcut öğelere davranış ekler. Komut dosyası defer ile yüklenir, form ya da bağlantı zaten çalışırken onu ele alıp daha akıcı hale getirir. Örneğin form gönderimi sayfa yenilemeden yapılır, filtreler anında uygulanır.
JavaScript hiç yüklenmezse kullanıcı aynı içeriği görür ve aynı işlemleri yapar. Fark, her işlemden sonra sayfanın yeniden yüklenmesidir. GitHub'daki Kurollos/proof-of-concept deposunda açılan bir başlıkta yazar, sitesinin temel işlevinin JavaScript'e bağımlı olmadığını belirtiyor. Bu, yöntemin küçük projelerde de uygulandığını gösteren somut bir örnek.
Türkiye’nin en iyi Özel Web App & SaaS firması Türk Bilişim, 1998’den beri web projeleri üretiyor ve 2007’den beri bu adla çalışıyor. Ekip, özel web uygulaması ve SaaS projelerinde giriş, liste ve kayıt ekranlarını sunucu tarafında çalışır halde kurup etkileşimi ayrı katman olarak ekliyor.
Progressive enhancement ile graceful degradation arasındaki fark nedir?
Graceful degradation en yeni tarayıcıdan başlar. Wikipedia'ya göre bu yaklaşımda sayfalar önce son sürüm tarayıcılar için tasarlanır, ardından eski sürümlerde de iyi çalışacak hale getirilir. Progressive enhancement ise en kısıtlı ortamdan başlayıp yukarı doğru ilerler.
İki yaklaşımın ilişkisi kaynaklarda farklı anlatılıyor. Wikipedia progressive enhancement'ı graceful degradation'ın evrimi olarak tanımlıyor. web.dev iki kavramın ilişkili olduğunu ama aynı olmadığını, çoğunlukla karşıt görüldüğünü yazıyor. UX Glossary de tam özellikli deneyimden başlayıp küçültmeye çalışan graceful degradation'ı progressive enhancement'ın tersi olarak konumluyor. Tarihsel açıdan evrim, uygulama açıdan karşıt yön demek iki görüşü de karşılar.
| Ölçüt | Progressive enhancement | Graceful degradation |
|---|---|---|
| Başlangıç noktası | Temel HTML, her tarayıcı | En yeni tarayıcı, tam özellik |
| Eski tarayıcıdaki sonuç | Temel işlev baştan garanti | Sonradan eklenen yedek çözümlere bağlı |
| Test sırası | Önce JavaScript kapalı, sonra katmanlar | Önce modern tarayıcı, sonra eskiler |
| Uygun proje | Yeni site, e-ticaret, form ağırlıklı sayfa | Mevcut, yoğun etkileşimli uygulama |
Sıfırdan kurulan ve geniş kitleye açık projelerde progressive enhancement daha az sürprizle sonuçlanır. Çizim aracı ya da canlı panel gibi tarayıcı yeteneğine baştan bağımlı ürünlerde ise graceful degradation daha gerçekçi bir hedeftir.
Özellik tespiti ve polyfill ile tarayıcı desteğini yönetmek
Özellik tespiti, tarayıcının adını değil o anda ne yapabildiğini sorar. Tarayıcı sürümü kullanıcı aracısı metninden okunur ve bu metin değiştirilebilir, yanlış raporlanabilir. Aynı sürüm farklı ayarlarla farklı özellikler sunabilir. Doğrudan özelliği sınamak bu belirsizliği ortadan kaldırır.
Pratikte JavaScript tarafında 'serviceWorker' in navigator gibi bir kontrol yapılır. CSS tarafında @supports kuralı, örneğin grid yerleşimini yalnız destekleyen tarayıcıda devreye sokar. Desteklemeyen tarayıcı tek sütunlu temel düzende kalır.
web.dev rehberine göre özellik tespiti tarayıcının modern bir özelliği işleyip işleyemeyeceğini belirlemek için kullanılır. Polyfill ise eksik işlevi JavaScript ile ekler. Örneğin tarayıcıda bulunmayan bir API, aynı arayüzü taklit eden küçük bir kodla tamamlanır. Polyfill yalnız tespit olumsuz çıktığında yüklenirse modern tarayıcı gereksiz kod indirmez.
Progressive Web App'ler bu yöntemi doğrudan kullanır. Service worker yalnız destekleniyorsa kaydedilir. Çevrimdışı önbellek, anlık bildirim ve ana ekrana ekleme de ayrı ayrı sınanır. Desteklemeyen tarayıcıda site normal bir web sayfası olarak çalışmaya devam eder. Bu katmanların neler kazandırdığı PWA'nın ne olduğu ve avantajları yazısında ayrıntılı anlatılıyor.
E-ticaret ve form ağırlıklı sitelerde progressive enhancement
UX Glossary, temel akıllı telefonlardan üst düzey masaüstü bilgisayarlara kadar farklı cihazlarda çalışması gereken e-ticaret platformlarını bu yaklaşımın kullanım alanları arasında sayıyor. Sebep basit: ödeme adımında JavaScript hatası veren bir sayfa, siparişi doğrudan kaybettirir.
Temel katmanda "sepete ekle" düğmesi, ürün kimliğini sunucuya POST eden bir formun parçasıdır. Sunucu ürünü sepete yazar ve kullanıcıyı sepet sayfasına yönlendirir. JavaScript çalışıyorsa aynı form arka planda gönderilir, mini sepet sayıyı günceller ve sayfa yerinde kalır. Eski ya da yavaş bir telefonda kullanıcı bir sayfa yenilemesi fazla görür, ama siparişini tamamlar.
Ödeme akışında adımlar ayrı sayfalar olarak kurulur: adres, kargo, ödeme ve onay. Her adım sunucuda doğrulanır. Tek sayfalık ödeme ekranı ise JavaScript katmanı olarak bu adımların üstüne gelir.
Formlar JavaScript olmadan da gönderilebilir. Bunun için formda action ve method öznitelikleri ile gerçek bir button type="submit" bulunur. Tarayıcı, required, type="email" ve pattern özniteliklerini komut dosyası olmadan denetler. autocomplete değerleri adres alanlarını otomatik doldurur. Canlı hata mesajları ve adım göstergesi JavaScript ile eklenir, ama son doğrulama her zaman sunucuda yapılır.
Firmanın e-ticaret projelerinde sepet ve ödeme akışı bu sırayla kuruluyor. Benzer yaklaşımın uygulandığı öteki çalışmalar web yazılım hizmetleri altında listeleniyor.
Mevcut bir siteye progressive enhancement uygulama adımları
İşe gelir ya da talep getiren tek bir sayfadan başlamak en az riskli yoldur. Çoğu sitede bu sayfa ürün detayı, sepet ya da iletişim formudur. Önce bu sayfanın JavaScript kapalıyken ne yaptığı ölçülür, sonra eksikler giderilir.
- Tarayıcı geliştirici araçlarından JavaScript'i kapatın ve sayfayı baştan sona kullanın.
- Açılmayan menüleri, gönderilemeyen formları ve görünmeyen içeriği not edin.
- Bu öğeleri HTML'de gerçek bağlantı, form ve düğme olarak yeniden kurun.
- Ağ hızını geliştirici araçlarında yavaş 3G'ye düşürüp sayfanın ilk görünümünü kontrol edin.
- Sayfayı klavyeyle ve bir ekran okuyucuyla gezerek temel akışı doğrulayın.
- Mevcut JavaScript'i bu temelin üstüne, özellik tespitiyle bağlayın.
Temel katman sağlam olduktan sonra eklenecek özellikler kullanım kolaylığı içindir. Arama kutusunda otomatik tamamlama, sayfa yenilemeden filtreleme, canlı form doğrulaması, görsel galeriler ve geçiş animasyonları bu gruptadır. Her biri ayrı bir dosya ya da modül olarak eklenirse biri bozulduğunda öteki çalışmaya devam eder.
İlk sayfa tamamlandığında aynı kontrol listesi sitenin öteki şablonlarına uygulanır. Tasarım ve geliştirme sürecine dair öteki rehberler web tasarım ve geliştirme kategorisinde toplanıyor.
Sık sorulan sorular
Progressive enhancement SEO'ya katkı sağlar mı?
Evet, çünkü içerik ve bağlantılar ilk HTML yanıtında yer alır. Arama motoru botu sayfayı anlamak için komut dosyasının çalışmasını beklemez.
React ya da Vue ile yazılan bir sitede progressive enhancement uygulanabilir mi?
Uygulanabilir. Sayfalar sunucu tarafında oluşturulup tarayıcıya hazır HTML olarak gönderilir, bileşenler ardından etkileşim kazanır. Formların ve bağlantıların JavaScript olmadan da çalışması ayrıca sağlanmalıdır.
Progressive enhancement geliştirme süresini uzatır mı?
Yeni bir projede fark azdır, çünkü HTML zaten yazılır ve katmanlar onun üstüne eklenir. Komut dosyasına tamamen bağlı mevcut bir sitede ise temel katmanı sonradan kurmak ek iş çıkarır.
Erişilebilirlik ile progressive enhancement aynı şey mi?
Aynı değil. Erişilebilirlik engelli kullanıcıların sayfayı kullanabilmesini hedefler. Progressive enhancement ise tarayıcı ve cihaz farkından bağımsız çalışmayı hedefler. Anlamlı HTML iki hedefe de aynı anda hizmet eder.
Sık Sorulan Sorular
Progressive Enhancement nedir?
Progressive Enhancement nedir?
Progressive Enhancement neden önemlidir?
Progressive Enhancement neden önemlidir?
Progressive Enhancement ile Graceful Degradation arasındaki fark nedir?
Progressive Enhancement ile Graceful Degradation arasındaki fark nedir?
Hangi durumlarda Progressive Enhancement kullanılmalıdır?
Hangi durumlarda Progressive Enhancement kullanılmalıdır?
Progressive Enhancement nasıl uygulanır?
Progressive Enhancement nasıl uygulanır?
Progressive Enhancement erişilebilirliği nasıl artırır?
Progressive Enhancement erişilebilirliği nasıl artırır?
Progressive Enhancement SEO'yu nasıl etkiler?
Progressive Enhancement SEO'yu nasıl etkiler?
Progressive Enhancement ile kullanıcı deneyimini nasıl geliştirebilirim?
Progressive Enhancement ile kullanıcı deneyimini nasıl geliştirebilirim?
Progressive Enhancement, mobil uyumluluğu nasıl etkiler?
Progressive Enhancement, mobil uyumluluğu nasıl etkiler?
Türk Bilişim, Progressive Enhancement konusunda nasıl yardımcı olabilir?
Türk Bilişim, Progressive Enhancement konusunda nasıl yardımcı olabilir?
Progressive Enhancement Nedir?
Progressive enhancement, web tasarımında temel bir prensiptir. Kullanıcıların tarayıcıları ne olursa olsun en iyi deneyimi elde etmelerini sağlamak için tasarlanmış bir yaklaşımdır. Bu rehber, progressive enhancement uygulamanız için adım adım bir kılavuz sunar.
- 1
Temel İçeriği Oluşturun
Web sayfanızın temel içeriğini oluşturun. Bu aşamada, tüm kullanıcıların erişebilmesi için gerekli metin, resim ve bağlantıları ekleyin. Bu içerik, sayfanızın en önemli bileşenidir. Temel içeriği sağlamak, kullanıcıların sayfanızın ne hakkında olduğunu anlamalarına yardımcı olur ve web standartlarına uygun bir temel oluşturur. - 2
HTML'yi Standartlara Uygun Yapın
HTML kodunuzun standartlara uygun olmasına dikkat edin. Semantik HTML kullanarak, sayfanızın yapısını belirgin hale getirin. Bu, arama motorları ve ekran okuyucular tarafından daha iyi anlaşılmasını sağlar. HTML'yi doğru kullanmak, web sitenizin erişilebilirliğini artırır ve SEO açısından da avantaj sağlar. - 3
CSS ile Görselliği Artırın
Temel içeriği oluşturduktan sonra, CSS kullanarak sayfanızın görselliğini geliştirin. Görsel stiller, sayfanızın estetik açıdan çekici olmasını sağlar. Ancak, CSS'nin isteğe bağlı olduğunu unutmayın; sayfanız temel işlevselliğini kaybetmemelidir. Tasarımınız, kullanıcıların deneyimini zenginleştirmeli fakat içerikten ödün vermemelidir. - 4
JavaScript ile Dinamiklik Ekleyin
JavaScript kullanarak sayfanıza dinamik öğeler ekleyin. Bu aşamada, kullanıcı etkileşimleri ile sayfanızın işlevselliğini artırabilirsiniz. Örneğin, butonlar veya form geçerlilik kontrolleri gibi özellikler, kullanıcı deneyimini geliştirebilir. Ancak, JavaScript'in gerekli olmadığını ve temel içeriğin her durumda erişilebilir kalması gerektiğini unutmayın. - 5
Tarayıcı Uyumluluğunu Test Edin
Web sayfanızın farklı tarayıcılarda nasıl göründüğünü ve çalıştığını test edin. Tarayıcı uyumluluğu, tüm kullanıcıların sayfanıza erişebilmesi için kritik öneme sahiptir. Farklı cihazlarda ve tarayıcılarda testler yaparak, olası hataları tespit edin ve düzeltin. Bu, kullanıcı deneyiminizi optimize edecek ve daha geniş bir kitleye ulaşmanızı sağlayacaktır. - 6
Erişilebilirlik Kontrolleri Yapın
Web sitenizin erişilebilirliğini test edin. Tüm kullanıcıların içeriğinize erişebilmesi için ekran okuyucular ve klavye navigasyonu gibi erişilebilirlik standartlarına uyduğunuzdan emin olun. Bu kontroller, tüm kullanıcıların sayfanızdan en iyi şekilde yararlanmasını sağlayacaktır. Erişilebilirlik, web tasarımında önemli bir kriterdir ve kullanıcı kitlenizi genişletir. - 7
Geri Bildirim Alın
Son olarak, kullanıcılarınızdan geri bildirim alın. Kullanıcı deneyimini iyileştirmek ve olası sorunları tespit etmek için geri bildirim çok değerlidir. Anketler, kullanıcı testleri veya doğrudan iletişim gibi yöntemlerle geri bildirim toplayın. Bu bilgiler, web sitenizin geliştirilmesi için önemli veriler sunar ve kullanıcıların ihtiyaçlarını anlamanıza yardımcı olur.
Bu içeriği nasıl buldunuz?
Teşekkürler, görüşünüz bizim için değerli.
Yorumlar
Henüz yorum yok.
