Aşamalı Geliştirme için Tam Bir Kılavuz
Web tasarımcıları yıllardır, eski tarayıcılardaki ziyaretçilerin, web sitesinin içeriğini en azından web sitelerinde görebilmelerini sağlamak için, tasarımcının tam olarak nasıl tasarladığını görmeseler bile, zarif ayrıştırma ilkelerini kullanıyorlar.
Zarif bozulma, tasarımcıların eski tarayıcı sürümlerini kullanmadan tamamen en yeni ve en iyi tarayıcıları tasarlamalarına olanak tanır.
Ve daha eski tarayıcılara sahip olanların çoğu zaman daha az uygun bir kullanıcı deneyimi elde ettikleri için, tasarımcıların odaklarını en yeni teknolojilere ve tekniklere odaklamalarını engellemediler. Eski tarayıcıları kullananların ya kullandığını ya da yeni sürüme geçmeleri gerektiğini rasyonel hale getirdiler.
Aşamalı geliştirme bize daha iyi bir seçenek sunuyor. Tarayıcı teknolojilerine ve desteğine odaklanmak yerine, PE içeriğe odaklanır.
Çoğu tasarımcı kesinlikle kabul edeceğinden, içerik hemen hemen tüm web sitesi projelerinin en önemli parçasıdır. Ancak birçok tasarımcı, aşamalı geliştirmeyi, nasıl çalıştığını ve niçin zarif bozulmadan daha iyi bir model olduğunu anlamıyor.
Bir sonraki web sitesi tasarım projenizde aşamalı geliştirmenin nasıl kullanılacağıyla ilgili bu soruların yanıtları ve bilgileri için okumaya devam edin.
Aşamalı Geliştirmeden Kimler Yarar?
Birçok tasarımcı, aşamalı geliştirmenin yalnızca eski moda tarayıcıları kullanan kullanıcılara yarar sağladığını düşünür, ancak diğer kullanıcılar da fayda sağlar. Mobil tarayıcılar, aşamalı geliştirmenin tüm avantajlarından yararlanma olasılığı en yüksektir. Bunun sebepleri iki kat. İlk olarak, CSS veya JavaScript'i desteklemeyen mobil tarayıcılar, sitenizin içeriğini hala görüntüleyebilir. Çoğu modern akıllı telefon tarayıcıları bunlardan en az birini desteklerken, temel cep telefonları için tüm tarayıcılar bunu yapmaz.
Mobil tarayıcıların yararlandığı ikinci yol, aşamalı geliştirmeyle oluşturulan sitelerin bir mobil sürümü daha kolay bir şekilde birleştirebilmeleridir. Sonuçta, temel HTML, üstte yer alan CSS'den bağımsız olarak çalışır. Dolayısıyla, mobil tarayıcılar için ayrı bir stil sayfası oluşturmak, fazladan bir fazla çalışma gerektirmez.
Temel HTML iyi yapılandırılmış ve semantik ise ekran okuyucular da çok daha kolay bir zamana sahip. Bu, sitenizi ekran okuyucu kullanan kişiler için daha erişilebilir hale getirir. Arama motorları, iyi kodlanmış HTML'leri daha iyi kodlanmış sayfalardan daha kolay tarayabilir, bu da siteniz için daha iyi bir arama motoru yerleşimi anlamına gelebilir.
Aşamalı Geliştirmenin Diğer Faydaları
İyileştirilmiş kullanıcı deneyiminin anında yararlarının ötesinde, ilerleyici geliştirmeyle oluşturulan siteler, diğer sitelere kıyasla genellikle daha kolaydır.
Temel içerik ve işlevsellik, sayfanın görsel öğelerinden tamamen ayrı tutulduğundan, sitenin görünümünde değişiklikler yapmak, sitenin işlevlerini veya içerdiği içeriği etkilememelidir. Sitenizi yeniden tanımlamak, bu yüzden çok daha kolay. Tek yapmanız gereken CSS dosyalarınızı değiştirmek.
Ve dürüst olmak gerekirse, bir sitenin en fazla sayıda tarayıcıda görülebilen yararlarını göz ardı etmemeliyiz.
Herkes benzer bir deneyim elde etmeyecek olsa da, eski veya eski bir tarayıcıyı kullanan birinin sitenizin içeriğini hala görüntüleyebileceği gerçeği, daha fazla ziyaretçi veya müşteriye yol açabilir. Aşamalı geliştirme ile başlayan bir yaklaşımı benimseyen sitelerin bunu mümkün kılmak için fazladan bir çalışma yapmasına gerek yoktur.
İçten Dışa Yapmak
Aşamalı geliştirmeler, tarayıcı uyumluluğuna, zarif bozulmanın yaptığı gibi odaklanmaz. Bunun yerine, önce içeriğe, sonra bu içeriğin sunumuna ve sonra herhangi bir komut dosyasına odaklanır. Bu şekilde, bir ziyaretçinin kullandığı cihaz veya tarayıcıdan bağımsız olarak, içeriğinizi herhangi bir sorun olmadan görebilirler.
Aşamalı geliştirme ayrıca erişilebilirlik ve hatta arama motoru optimizasyonu için de avantajlara sahip olabilir. İyi yapılandırılmış, semantik HTML ile başlayarak, sitenizin tasarımını oluşturmak için iyi bir temel sağlayacaktır. Ve bu temel HTML, ekran okuyucular ve arama motoru örümcekleri tarafından kolayca yorumlanabilir.
Önce İçeriği Koy
Yeni bir web sitesi projesi başlattığınızda, öncelikle içerik yapısına odaklanmalısınız. Web sitenizin tabanı olarak iyi yapılandırılmış, semantik HTML oluşturarak, tasarımınızın sunum düzeyiyle daha kolay bir zamana sahip olacaksınız.
İyi düşünülmüş HTML, anlamlı olmak için sunum katmanlarına ihtiyaç duyma avantajına sahiptir. Bu, ekran okuyucular, arama motoru örümcekleri ve temel mobil tarayıcılardakilerin dikkatinizi dağıtan biçimlendirme sorunları olmadan içeriğinizi görüntüleyebilecekleri anlamına gelir.
Yukarıda, MSNBC'nin bütün içeriğini CSS olmadan bile aynı sırayla nasıl sakladığını görebilirsiniz. Site, sunum katmanı olmadan bile mükemmel şekilde kullanılabilir.
Bir sitenin yapısı o sitenin içeriğine bağlı olsa da, temel siteler için kullanmanız gereken bazı kurallar vardır.
Başlığı, ardından ana gezinmeyi, ardından içerikle başlayın. İçeriğinizden sonra, ek herhangi bir kenar çubuğu bilgisi veya bağlantıyı ve altbilgi bilgilerinizi koymak isteyeceksiniz.
Bu şekilde, siteniz için tanımlayıcı bilgiler önce gösterilir, ardından gezinme (kişinin bir başkası doğrudan, sayfanız veya sayfanız gibi farklı bir sayfaya gitmek istemesi durumunda) ve daha sonra doğrudan içeriğe ulaşır. İlk etapta sitenizde çoğu kişi var. Bu modeli siteniz için gereken şekilde uyarlayın, ancak ziyaretçilerinize en çok ilgiyi çekecek olanları her zaman aklınızda bulundurun ve bunları mümkün olduğunca kodun en üstüne yerleştirin.
Bu temel katmanda sitenizdeki tüm işlevlerin mümkün olduğundan emin olun. Bu, formların ve uygulamaların yalnızca HTML ve sunucu tarafı komut dosyası ile kullanılabilir olması gerektiği anlamına gelir. İşlevsellik, istediğiniz gibi ya da kullanıcı dostu olarak sunulmayacak gibi görünse de, en azından kullanılabilir olmalıdır.
Sunum Sonraki
HTML'niz ve temel işlevleriniz ayarlandıktan sonra, sunum öğelerine dönüşmek isteyeceksiniz. Birçok mobil tarayıcı da dahil olmak üzere tarayıcıların büyük çoğunluğu CSS'yi desteklemektedir (hepsi CSS'nin her yönünü desteklemese de, özellikle CSS3'ü desteklemektedir). Sunum seviyesi içeriği geliştirmelidir. Kullanıcı deneyimini görüntüleme ve kullanma ve kullanıcı deneyimini iyileştirmeyi kolaylaştırmalıdır.
Bir dereceye kadar, birden fazla CSS geliştirmesi katmanına sahip olabilirsiniz. İlk olarak hemen hemen her modern tarayıcı tarafından tanınan temel stillere odaklanılmalıdır. Düzeniniz, tipografiniz ve renk düzeniniz, diğer stil seçenekleriyle birlikte bu katmana dahil edilmelidir.
Ardından, her tarayıcı tarafından desteklenmeyebilecek daha gelişmiş özelliklerden yararlanan ancak destek içeren tarayıcıları kullanan kullanıcılar için kullanıcı deneyimini artıracak başka bir katman ekleyin.
JavaScript Sonunda Olmalı
Bazen JavaScript neredeyse oluşturulan her yeni web sitesinde kullanılır gibi görünüyor. JavaScript, bir web sitesinin veya web uygulamasının kullanılabilirliğine ve kullanıcı deneyimine büyük katkıda bulunabilir.
Ajax, birçok sitenin işleyiş şeklini değiştirdi ve şu anda çevrimiçi yaptığımız şeylerde büyük bir fark yarattı. Ancak web siteniz veya uygulamanız JS olmadan çalışmalıdır. Özellikle web uygulamaları yerine genel web sitelerinden bahsederken, her zaman bir HTML veya sunucu tarafı kodlama alternatifi olmalıdır.
Sitenizin JavaScript olmadan kullanılabilir olduğundan emin olun. Çoğu web kullanıcısının tarayıcısında JS etkin olmasına rağmen, JavaScript'in istenmediği durumlar da vardır. Dışarıdaki her mobil tarayıcı, JavaScript için iyi bir desteğe sahip değildir. Ekran okuyucuları için çoğu zaman erişilebilir değildir. Ve hala tarayıcılarında JavaScript etkin olmayan bazı insanlar var.
Aşağıdaki ekran görüntülerinden de görebileceğiniz gibi, Alfred uygulaması web sitesinin JavaScript özellikli sürümü ile JavaScript kapalı olanı arasında hiçbir işlev kaybı olmaz. Tek gerçek fark, Şartlar ve Koşullar bağlantının tıklandığında kalıcı bir pencerede açılmak yerine sayfanın alt kısmında sabitlenmiş olmasıdır. Ama her iki durumda da, birbirine bağlı ve tamamen okunabilir.
Modal pencereyle sitenin tam işlevsel versiyonu.
Burada, JavaScript'in devre dışı bırakılmış sürümü, Şartlar ve Koşullar'ın hemen altbilgilerin üstünde görünmesi. Hala içerikteki aynı yerden bağlantılı.
Aşamalı İyileştirme Uygulanması
Yukarıda teori düzeyinde PE hakkında konuştuk. Ancak, bir web sitesi projesinde uygulamaya koymanın pratik yönlerine bakalım. Yapmanız gereken ilk şey, siteniz için bilgi mimarisini bulmaktır.
Mevcut içeriğe ve nasıl düzenleneceğine bakın. İçeriği göstermek, farklı öğelerin yerleşimini göstermek, vb. İçin bazı tel kafesler oluşturun. Bu noktada, bu noktaya, kodun en yakınına (en önemli öğeler) ve neyin aşağı inebileceğine bakarak öncelik verin.
Bu bilgi mimarisi adımı ilerici geliştirme ile hayati önem taşımaktadır. Nereye gitmek gerektiğini bilmek istediğinizde, kodlamaya başlayabilirsiniz. HTML kodunuzu, en önemlisine göre doğru sıraya göre ayarladığınızdan emin olun. Bu, tamamlanmış, tarzlanmış web sitenizde görünen şeylerle tam olarak örtüşmeyecek, ancak muhtemelen çok uzak olmayacak (üstte başlık, ortadaki içerik, altta altbilgi).
Burada kodladığınız HTML'nin anlamsal olduğundan emin olun. Uygun kullanın , , etiketler, vb. yanı sıra içeriğinizin göründüğü div'ları doğru şekilde adlandırarak. Bu sadece daha erişilebilir olmasını sağlamakla kalmaz, aynı zamanda kodunuzu korumayı ve CSS'nizi kodlamayı çok daha kolay hale getirir.
Sunucu tarafı komut dosyalarını kullanarak bu noktada herhangi bir işlevselliği de kodlamak isteyeceksiniz. Son siteniz birincil işlevsellik için Ajax'ı kullanabilirken, her ihtimale karşı sunucu tarafında yedeklemenin olması hala önemlidir.
Temel HTML'niz bittiğinde, sunum katmanına geçmek isteyeceksiniz. Herhangi bir web sitesi projesinin tasarımını yaptığınız gibi, büyük ölçüde bu konuya gidin. Ancak CSS'yi kodlarken, her CSS özelliğinin her tarayıcıda çalışmayacağı fikrini sürdürdüğünüzden emin olun. Bazı seçmenler çalışmazsa bile, genel sunumunuzun etkilenmeyeceğinden emin olun.
Çok fazla desteklenmeyen belirli bir tekniği gerçekten kullanmak istediğiniz durumlarda, CSS'nizden bazıları için bir miktar zarif degradasyon uygun olabilir. Özel durumlarda, seçici olarak kullanmakta yanlış bir şey yoktur. Ancak burada amaç, zarif bozulmayı gereksiz kılmak için iyi, standartlara dayalı kodlamaya ve anlamsal işaretlemeye dayanmaktır.
Aşamalı geliştirme için birden fazla stil sayfası kullanmanın iyi bir fikir olup olmadığı konusunda bazı tartışmalar olmuştur. Özellikle stil sayfanız uzun veya karmaşıksa, sunumunuzun farklı yönlerini (düzen, tipografi, renk, vb. Yanı sıra yazdırma veya mobil düzen gibi şeyler için farklı stil sayfaları) ayırmak mantıklı olabilir.
Ayrı stiller, belirli bir öğeyi bulmayı kolaylaştırır ve siteyi korumak için hem daha kolay hem de daha karmaşık hale getirebilir. Sonuçta, sadece bir rengi değiştirmek isterseniz, renk stil sayfanızı açıp o rengin tüm örneklerini bulmanız ve hiçbir şeyi kaçırmadığınızı bilmeniz daha kolay. Ancak, sayfanızdaki belirli bir öğe türünün rengini ve tipografisini değiştirmek istediğinizi varsayalım (tüm H1'leriniz veya kenar çubuğu bağlantılarınız gibi). Değişiklikleri yapmak için birden fazla stil sayfası açmanız gerekecek. Birden fazla CSS dosyası kullanıp kullanmayacağınız veya başka bir şeyden ziyade kişisel tercihinize göre daha fazla gelir.
CSS'niz kodlandığında ve her şey test edildikten sonra, istemci tarafında herhangi bir komut dosyası eklemenin zamanı geldi. Bu noktada, siteniz JavaScript ile veya JavaScript olmadan çalışmalıdır. Ancak JS ekleyerek kullanıcı deneyimini ve memnuniyetini büyük ölçüde artırabilir. Gerekli tüm komut dosyalarını ekledikten sonra, her şeyin hala kabul edilebilir şekilde çalıştığından emin olmak için siteyi bu komut dosyasıyla kapatmayı tekrar deneyin.
Müşterilerinizi İkna Etmek
Kişisel web sitenizin projeleri üzerinde çalışırken, aşamalı geliştirme, sorunsuz bir şekilde uygulayabileceğiniz bir şeydir. Bununla birlikte, müşterilerle çalışırken, biraz daha zor olabilir. Bir çok müşteri hala web sitelerinin, kullandıkları her tarayıcıda tam olarak aynı görünmesi gerektiği fikrine takılıyor. Hiç.
Müşterilerinize ilerleyen geliştirmenin faydalarını açıklayın. Onlara, siteyi ilerici bir geliştirmeyle tasarlamanız için daha hızlı ve daha az maliyetli olduğunu ve ziyaretçilerin, içerik kullanılabilir olduğu sürece her iki şekilde de ilgilenmeyeceklerini söyleyin.
Hala direniyorlarsa, ekstra kodlama zamanını ve gerekli çabayı telafi etmek için teklifinizi buna göre ayarlamanız gerektiğini söyleyin.
Çoğu durumda, bir müşteri bu ilerleyici donanımın ziyaretçilerine zararlı bir etkisi olmadan paradan tasarruf edeceğini düşündüğünde, sitelerini bu şekilde tasarlamanız için mutlu olurlar.
Kaza Sonrası Artan İyileştirme
Eminim bu yazıyı okuyan ve bu yazıyı okuyanlar arasında birileri var. “Ama bu, web sitelerini zaten nasıl tasarladığım!” Diye bir şey var. Pek çok tasarımcı, web sitelerini içerik etrafında tasarlıyor, her katmanın başka bir şey eklemeden önce işlevsel olmasını sağlıyor. katmanı.
Onların HTML'si iyi yapılandırılmıştır, CSS'leri bir bütün olarak çalışır ancak bir ya da iki eleman düzgün çalışmaz ve hatta istemci tarafı komut dosyası olmadan bile, hala iyi görünüyor.
Bazı tasarımcılar, doğal olarak, web tasarımının ilerici bir iyileştirme stilinde görünümünü almıştır. Bu tasarımcılar için, bu makale eski şapka gibi görünüyor.
Ancak, ya zıt bir yaklaşımla ya da en düşük ortak paydayı tasarlamak ve daha gelişmiş tekniklerle uğraşmak yerine karşıt yaklaşımı benimseyenler için, bir sonraki projeniz için aşamalı olarak geliştirmeyi düşünün.
Sadece WDD için yazılmış Cameron Chapman .
Siteleri otomatik olarak aşamalı geliştirmeyle tasarlıyor musunuz? Ya da zarif bir bozulma yaklaşımını tercih ediyor musunuz? Lütfen stratejilerinizi yorumlarda paylaşın!