JavaScript Yokluğu Nasıl Planlanır?
Web sitesi trafiği istatistiklerini toplamak için kullanılan yöntemler, istatistiklerin geçerliliğini sorgulamakla birlikte, web sitenizin ziyaretçilerinden bazıları JavaScript devre dışı bırakılmış olacaktır.
Trafik kaynaklarınızı dört geniş kategoriye ayırabilirsiniz:
Arama motorlarını, mobil ziyaretçileri, ekran okuyucularını ve JavaScript kullanan ziyaretçileri ziyaret eden ziyaretçiler .
Bilgi mimarinizi ve tasarımınızı planlarken, bu özel gruplarla nasıl baş edeceğinizi öğrenmelisiniz.
Konuyla ilgili netlik sağlamak için birkaç yeni gerçek dünya senaryosu hazırladım.
Animasyonlu bir kaydırıcının ardında uzun içerik gizlemek veya sıralı olarak ürün veya referanslar arasında geçiş yapmak veya kategorize sayfa düzeyinde içerik sunmak istiyorsanız, akordeonlar, karuseller veya başka herhangi bir hayali çözüm kullanabilirsiniz.
JavaScript'in en iyi uygulamalarına ayak uyduruyorsanız veya çok sayıda JavaScript kitaplığından birini kullanıyorsanız, JavaScript'in etkinliğini yalnızca JavaScript etkinleştirildiğinde JavaScript etkileşimli sunma tekniğiyle tanıyorsunuzdur.
Bu ilke, sunuya da genişletilmelidir: dinamik özelliklerinizi oluşturun ve görüntü ve görünürlük değerlerinizi yalnızca belgenin hazır olduğunu ve yalnızca ziyaretçinin JavaScript etkinse, HTML kodunuzdaki özellikleri ayarlamak yerine tanımlayın veya tanımlayın. sunucu tarafı.
Birçok ekran okuyucusu gibi, Google'ın tarayıcısı bir öğe kümesine sarılmış içeriği göz ardı etme eğilimindedir. display: none herhangi bir içerik ayarlandığında display: visible .
Yani bir tasarımcı olarak göreviniz , dinamik özelliklerinizin etrafındaki alanı ve düzeni planlamak ve “dinamik” bir seçenek olmadığında örneklere hazırlamaktır.
Sayfalarınızdan birindeki içerik her zaman belirli kullanıcıların tarayıcılarında görünürse, nasıl görüntülenmelidir? JavaScript devre dışı bırakılmış olsa bile gizli içerik gizlenmiş mi? Okuyucular ve arama motorları için tüm içerik kullanılabilir mi? Bir içerik parçası yalnızca bir AJAX çağrısından sonra görünür hale gelirse, JavaScript devre dışı bırakıldığında bu alanı nasıl yeterli bir şekilde doldurursunuz?
Akordeon
Bir akordeon, genellikle bir başlık ve içerik çiftleri modelinden oluşan bir yapıdır. İçerik blokları, başlıkta tetiklenen bir olaya karşılık olarak her seferinde bir tane genişleyecektir.
Hulu Akordeon
Son zamanlarda bir müşterinin çok uzun sayfalara sahip olma sorununu aşmasına yardımcı oldum. Bu müşterinin çevrimiçi bir eğitim kursları kataloğu vardı ve belirli bir program için tüm bilgilerin ön tarafa sunulması gerektiğini belirtiyordu: Çekirdek ders tanımları veya program tanımları için sayfa atlama veya pop-up yok.
Tüm program bilgileri, ziyaretçi kataloğunda, ileri ve geri gezinmek zorunda kalmadan, aynı sayfada ziyaretçiye sunulmak zorundaydı.
Buradaki doğru çözüm, her çalışma alanı için başlıkların altında yer alan (örneğin matematik ya da tarih) ders tanımlarını aktaran bir akordu idi. Zayıf bir uygulama, bu daraltılmış kurs açıklamalarının HTML'yi ekranda oluşturmadan önce görünürlüğünü belirlemekti.
İçerik ön görüntülemede gizlenmişse, bazı ziyaretçiler ve arama motorları önemli içeriğin çoğunu özlerler.
JQuery'yi kullanarak, çöken içeriği hedefledim ve sayfa yüklendikten ve belgenin hazır olduğunda akordeonyu tetiklemeye ayarladım. Bu müşteri için, içeriği tüm kitlelere sunmak son derece önemlidir. İçeriğin bir kısmı çok uzun sürebilir ve bu nedenle aşırı dikey genişlemeye uygun bir tasarıma ihtiyaç duyuldu.
Atlı Karınca
Genellikle portföylerde ve ürün spotlarında karuselleri göreceksiniz.
Tipik olarak döner disklerde, içerik bir zaman aşımı aralığı veya bazı kullanıcı etkileşimlerine yanıt olarak kayacaktır (bkz. Amazon'daki “Son Tarihiniz”). Esnekliklerinden dolayı karuselleri severim, çünkü kabın en az bir boyutunu düzeltmenize izin verir.
Amazon'un atlıkarınca
Bir başka müşteri yakın zamanda kendi ana sayfasının “Haberler ve Öne Çıkanlar” alanı hakkında bilgi aldı. Bu türden diğer birçok içerik bloğu gibi, bu da haber sayfalarına en son eklenen sekiz yeni özelliği içeriyordu (ancak bu sayı değişebilir).
Bu bloktaki teaserlar, makalenin bir özetini ve bir görüntüyü içeriyordu. Görüntüler büyük ve içerik uzun olabilir, bu yüzden teaserlar arasında döndürülmüş bir atlıkarınca burada doğru çözümdü.
Yine jQuery'yi kullanarak, döngüsel için DIV sarmalayıcısını hedefledim ve sayfa yüklendikten ve belge hazırlandıktan sonra, karuseli uyguladıktan sonra geçişlerimi ayarladım. JavaScript etkinleştirildiğinde, ana sayfa güzel bir şekilde işlendi: her 15 saniyede, atlıkarınca bir sonraki teaser'a karıştırıldı. Varsayılan olarak, tüm tanıtımlar görülebilirdi, ancak karuseli oluşturduğumda ilkini sakladım.
Bu müşteri için JavaScript’in devre dışı bırakılması durumunda tüm gizli içeriği görüntülemeye karar verdik. Bu durumda, ana sayfa ekstra içeriği karşılamak için dikey olarak genişler.
Yine de alternatiflerimiz vardı. Bu makalenin başında belirttiğimiz dört kullanıcı kategorisini göz önünde bulundurarak, bu içeriğin önceliği erişilebilirlik, arama motoru sıralamasında ise yakın bir saniyedir. Bu iki grubu, görünür olan tüm teaser'ları bırakarak, ancak DIV kabının ve ayarının boyutlarını sabitleyerek tatmin edebilirdik. overflow için scroll , auto veya hidden .
Bu seçeneklerden herhangi biri düzenin boyutlarını koruyacaktı. İçerik okuyucuları ve arama motorları da içeriğe sahip olacaktı çünkü içeriğin içeriği gizlenmeyecekti. display veya visibility özelliği.
İçerik Değiştirme Aracı
Bu teknik, bir bloktaki içeriğin bazı animasyonlar kullanılarak döndürüldüğü karusel'e benzer.
Ana fark, ara doldurma animasyonu kullanılmamasıdır; Bunun yerine, bir parça içeride kaybolurken bir başkası kaybolur (ya da solma olmadan zor bir geçiş yapabilirsiniz). Swapper, yukarıda bahsedilen alternatif no-JavaScript çözümlerinin doğru olduğu atlı karıncaya yeterince benzer.
Yine de başka bir müşteri, web sitelerinde belirsiz sayıda referans gösterme göreviyle bana geldi. Bu durumda bir içerik swapper'ı seçtik çünkü tipik olarak karusellerde bulunan sayfalama işlemine ihtiyaç duymadık (kullanıcının bir referansını geri kaydırması veya sonuna kadar atlaması gerekmez).
JavaScript'i devre dışı bırakan ziyaretçiler için, tasarıma saygı gösterdik. Dikkatli bir şekilde değerlendirildikten sonra, müşteri, referansların ziyaretçilerin bu kadar küçük bir etkiye sahip olacağını doğru bir şekilde belirledi. display için none zararlı olmaz.
Karar bana, referansların gösterileceği web sitesinin sağ sütunu planlama konusunda biraz daha özgür hale getirdi.
Sıralayıcı
Hulu kuyruğunu ayarlayan herkes, sürükle ve bırak notlayıcısını gördü. Bu JavaScript, kullanıcıların satırları (tablo satırları, liste öğeleri, bağımsız DIV'ler, vb.) Farklı bir sıraya sürükleyip bırakmalarını sağlar.
Netflix'in sıralayıcısı
Tüm çalışanların takip etmesi gereken bir dizi standart prosedürü olan örnek olarak son bir müşterimi al.
Her prosedür, herhangi bir sayıda görevden oluşuyordu. Bir yönetici görevleri ekleyebilir veya kaldırabilir ve görev sırasını değiştirebilir.
Bu, sıralama , sürükle ve bırak yeniden sıralama uygulamasının bir ders kitabı örneğiydi.
Scriptaculous ve Prototype.js sayesinde, sıralanabilir listeyi oluşturmak kolaydı. Kod yazıldığında ve sayfa canlı olduğunda, tasarım comp'in mükemmel bir şekilde işlenmesini sağladık. Sonra, JavaScript olmadan, yalnızca bir kağıt ağırlığının HTML eşdeğerine sahip olduğumuzu fark ettik. Sürükle-bırak ya da uçuş sırasında yeniden sıralama yoktu.
Tasarımın bazı hızlı düşünme ve hafif modifikasyonları bize daha önce sahip olduğumuz satırların aynı satırını verdi, ancak satır düzeninin girilmesini engelleyebilecek metin giriş kutularının eklenmesiyle (not, yine de, JavaScript olmadan), bu giriş kutuları için önemli sunucu tarafı doğrulaması). Uçuş sırasında yeniden sipariş vermeyi kaybettik, ancak en azından sıralama işlevini yeniden kazandık.
Ardından JavaScript destekli tarayıcılara geri döndük ve yukarıda belirtilen metin kutularını sakladık; Sonuçta, bu grup için sürükleme ve bırakma işlevselliği vardı. Bu noktada, JavaScript'i devre dışı bırakan ziyaretçiler için de kullanılabilecek, tasarım bileşenlerinin mükemmel bir şekilde işlenmesini sağladık. Bir dahaki sefere bu durumu planlamayı öğreneceğim.
Sonuç
Web'in gelişimi devam edecek ve web sitemizi ziyaret edenler dinamik zevki yaşamaya devam edebilmelidir.
Animasyonlu aralar ile etkileşimli yanıtlar için planlama yapmayı sürdürün: solmaya, kaybolmaya, daraltmaya, genişletmeye, etrafındaki şeyleri kaydırmaya. Bu animasyonun tamamı göz önüne alındığında, web sitenizin JavaScript sınırlamaları nedeniyle animasyonu göremeyen ziyaretçilere nasıl görüneceğini düşünün. Müşterileriniz daha mutlu olacak ve bunun için daha iyi bir tasarımcı olacaksınız.
http://www.thecounter.com/stats/2008/January/javas.php
http://www.w3schools.com/browsers/browsers_stats.asp
Jason Corns, tüm izleyiciler için kullanılabilirlik konusunda uzmanlaşmış, Systems Alliance, Inc. için ücretsiz bir web geliştiricisi ve tam zamanlı GUI geliştiricisidir.
JavaScript'in yokluğunu nasıl planlıyorsunuz? Lütfen ipuçlarını bizimle paylaşın…