Web Tasarımında Aşamalı Geliştirme İçin En İyi Uygulamalar

Web siteleri inşa zanaat birçok hızlı değişen parçaları ile inanılmaz derecede karmaşık. Web tasarım topluluğunun amacı, karmaşıklığı azaltmak, ve hata olasılığını azaltmak oluşturma sürecinin her aşamasında.

İlerici geliştirme amaçlayan web tasarımında böyle bir fikir hataları azaltmak ve tutarlı bir kullanıcı deneyimi sağlamak yönüyle. Kavram, bir yöntem olarak açıklayan kendi Wikipedia sayfasına sahiptir. tam erişilebilir içerik, yalnızca tarayıcı tarafından desteklendiğinde gelişmiş özellikler oluşturma.

Aşamalı geliştirmeyi anlamak kolaydır, ancak bunu doğrudan tasarım çalışmanıza uygulamak kadar kolay değildir. Biraz gizlemek istiyorum Gerçek dünya projelerinde ilerici geliştirme için en iyi yöntemler için tasarımcıların iş akışları hakkında daha sürdürülebilir düşünmelerini sağlama.

1. İlerici Geliştirmeyi Anlamak

İlerici geliştirme teorisi tavsiye basit bir web sitesi ile başla Tüm tarayıcılarda çalışır, bunu yapar her ziyaretçi için erişilebilir. Ardından, mümkün olduğunda özellikler ekleyin.

Bu, varsayılan olarak tüm özellikleri içeren zarif bir bozulmanın tam tersidir, daha sonra bir şey çalışmadığında azalır..

Aşamalı geliştirme genel kullanıcı deneyimi için daha iyidir, çünkü özünde sadece gerekli elemanları yükler. Her web tarayıcısı metni (ve genellikle görüntüleri) destekleyebilir. Herhangi bir CSS olmadan bu bilgi yumuşak ve tatsız görünecek, ancak erişilebilir olacak.

Bu Ayrı Listele makale ilerici geliştirmenin olduğunu savunuyor İçerik birinci ile stiller ve daha sonra eklenen dinamik bileşenler. Anlamsal HTML'deki içerik her şeyden önce yayınlanmalıdır.

Bugün kullandığımız gelişmiş CSS ve JavaScript yaygın olarak desteklenmektedir, ancak ilerici geliştirme ilkelerini takip etmek istiyorsak, lüks olarak kabul edilmeleri gerekir..

Aşağıda, dikkate almanız gereken, aşamalı iyileştirmenin temel özelliklerinin genel bir özetini bulacaksınız:

Anlamsal işaretleme tüm içerik için
Kullanıcılar' tarayıcı tercihleri saygı duyulması gerekiyor
İçerik ve temel işlevsellik olmalıdır tüm kullanıcılar tarafından kullanılabilir
Göze çarpmayan JavaScript yalnızca yüklenir bunu destekleyebilecek ortamlarda

Ön uç geliştirmedeki teknolojik kısıtlamalar öncelikle tarayıcı uyumluluğu ile belirlenir. Aşamalı geliştirme, nasıl yapıldığını düşünerek temel konulara geri dönmenizi sağlar Çıplak kemik basit web sayfası benziyor olabilir. Oradan, yapabilirsin daha gelişmiş özellikler için plan yapın, CSS3 özellikleri gibi.

Peki ya modern CSS3'ü desteklemeyen tarayıcılar? Burası, Kullanabilir miyim gibi sitelerin devreye girdiği yerdir. Hangi özelliklerin uygulanmaya değer olduğuna karar vermeli ve kararları esas almalısınız web sitenizin hedef kitlesi üzerinde.

2. Stil Sayfalarında Geçim

Günümüzde çoğu tarayıcı, ihtiyacınız olan tüm temel özellikleri desteklemektedir. Fakat gelişmiş CSS3 hala eski kullanıcılar için bir sorundur, ve aşamalı geliştirme bir çözüm sunar.

Bu yeni özellikleri korumak için geri dönüş yöntemleri aramak yerine, öncelikle uygun yerleşim yapıları.

Mümkün olduğunca çok sayıda aktif tarayıcıda çalışan semantik HTML ve CSS işaretlemesi yazın (IE5 desteği gibi eski tarayıcılar için destek gerekli değildir).

Örneğin, iki kenar çubuklu kayan nokta kullanan bu JSFiddle'ı kullanın (.sabit) ve bir sıvı içerik alanı (.akışkan). Tüm CSS’leri silerseniz ve kodu yeniden çalıştırırsanız, her şeyin ilk sütunla, sonra ikinciyle ve en sonuncuyla iyi bir şekilde yığıldığını fark edeceksiniz..

Bazı geliştiriciler içerik sütununa sahip olmayı tercih eder (.akışkan) ilk HTML'de görünür. Bu, aşamalı iyileştirmenin devreye girdiği ve alternatif CSS çözümlerinin uygulanabilir olduğu yerdir..

HTML’nizin iki ana hedefi şunlardır:

Tamamen anlamsal ve geçerli kod
bir tutarlı deneyim herkes için

Bu hedeflere ulaşmanın en kolay yolu hiçbir şeyden başlamak ve çalışmak, çoğu ilerici geliştirme savunucusunun önereceği gibi.

Kodunuz hem devre dışı bırakılmış hem de etkin olan CSS’de iyi görünüyorsa, herkes için makul bir çözüm sunar.

Aynı zamanda dikkate değer hangi noktada bir şeye destek bırakıyorsun. Microsoft zaten IE6 için büyük destek bıraktı, bu yüzden bu tarayıcıyı çalıştıran kullanıcılar zaman ayırmayabilir.

Ancak yine de büyük bir soru var: bir tarayıcı modern CSS'mi desteklemiyorsa ne yapmalıyım??

Sen sadece işe yarayan kod yaz olmadan o, ve modern CSS'yi ilerici bir donanım olarak düşünün. Bu ilerici geliştirme metodolojisinin güzelliğidir.

Geri dönüşlere ihtiyacınız yok, çünkü temelde varsayılan olarak hiçbir şeyin desteklenmediğini varsaymak.

Aşamalı geliştirme yöntemleri, bir şeyin desteklenmediği durumlarda bile siteyi kullanılabilir kılmakla ilgilidir; ancak destekleniyorsa, daha iyi.

Düşünmen gerek içerik aslında CSS olmadan nasıl akıyor?. Örneğin, Transmit'in web sitesinde CSS'yi devre dışı bıraktığımda, içerik yine de sayfada normal olarak akıyor.

Evet, çirkin ve evet, yirmi yıllık ilerlememizi yitirmişiz gibi hissediyor… ama işe yarıyor.

3. JavaScript'i Kullanma

Geliştirme sürecinde karşılaşabileceğiniz her JavaScript sorununun zor ve benzersiz olduğunu belirtmekte fayda var. Aşamalı geliştirmeye sahip yeni bir proje oluştururken, tüm gerekli JS tabanlı özelliklerinizi listelemeli ve bunların nasıl yapılabileceğini düşünmelisiniz. JavaScript olmadan çalış.

Bu, geçerli çözümler bulmak için pek çok çevrimiçi araştırma gerektirecektir. Aaron Gustafson, Ajax'ın iframe içindeki içerik için meta yenilemeyle değiştirilmesi gibi çeşitli sorunların çözümlerini içeren harika bir blog yazısı yazdı.

Ayrıca, JavaScript sekmeleri oluşturduğunuzda, bu iyi bir fikirdir. gerçek kimlik değerlerine sahip bağlantı bağlantıları kullanın. Bu şekilde, JavaScript devre dışı bırakıldığında, sekmelerin bağlantı değerine göre görünür ve erişilebilir olmasını sağlayabilirsiniz. Aaron, bu sorunlar hakkında nasıl düşünmeniz gerektiğine dair daha genel bir genel bakış içeren A List Apart'a başka bir parça yazdı..

İşte başka bir örnek. İçeriği dinamik olarak yükleyen bir bağlantınız olduğunu varsayalım. href değer boştur, çünkü her şey JavaScript ile yüklendi.

Bunun yerine, ayarlamak için akıllıca olacaktır href özellik farklı bir sayfaya yönlendir içeriğin doğal olarak yüklenebileceği, ancak ziyaretçi yalnızca JavaScript devre dışı bırakıldığında bu sayfayı görür.

Aşamalı geliştirme, JavaScript'ten daha fazlasıdır, ancak web geliştirme her yıl daha da ilerliyorsa, JavaScript'in önemli bir rol oynadığına dair hiçbir şüphe yoktur..

Varsayım altında işletmek her şey devre dışı bırakıldı, ve oradan yukarı ölçeklendirmek. Bu, kontrolünüz dışında olan gömülü widget'larla ilgili sorunları içerebilir;