Duyarlı Tasarım Nedir?

Tasarımcıların web sitelerinin cep telefonlarında ve tabletlerde nasıl göründüğü konusunda gerçekten endişelenmelerine gerek olmadığı çok uzun zaman önce değildi. Telefonlar henüz web görüntüleme için gerçekten pratik değildi ve iPad'den önce tabletler, gerekli olmaktan çok bir yenilikti.

Açıkçası, her şey değişti ve çoğu teknoloji uzmanı, önümüzdeki birkaç yıl içinde, muhtemelen er ya da geç, mobil taramanın Web'i görüntülemenin baskın yolu olarak masaüstü taramayı geride bırakacağını tahmin ediyor.

Video oyun konsolları ve İnternet TV'leri de dahil olmak üzere sürekli gelişen ekran boyutları ve cihazlarla, web tasarımının eski yöntemleri artık işe yaramaz. Ve işletmeler, çevrimiçi deneyimlerini mobil kullanıcılar için optimize etme ihtiyacını fark ettiğinde, uyum sağlamayan tasarımcılar geride kalacak.

Editörün Notu: Aşağıdakiler, daha deneyimli web tasarımcıları için tasarlanmayan duyarlı tasarıma yeni başlayanlar için bir giriştir.

Duyarlı Tasarımın Ana Bileşenleri

İşte bu noktada Responsive Web Design devreye giriyor, içerik ve/veya görüntülendiği ekranın boyutuna otomatik olarak uyum sağlayan düzen. En temelde, Duyarlı Tasarımın üç ana öğesi esnek bir ızgara, esnek görüntüler ve ikincisi CSS3'lerin bir parçası olarak tanıtılan Medya Sorgularıdır. Bir anda olanlar hakkında daha fazlası.

Esnek Izgaralar

Esnek ızgaralar temel olarak tasarım öğelerinin piksel yerine yüzde olarak ayarlandığı temalar ve şablonlardır. Ölçü birimi olarak yüzdelerle, bu, %50'de tasarlanan bir öğenin, ekran ne kadar büyük veya küçük olursa olsun, her zaman ekranın yarısını kaplayacağı anlamına gelir.

Esnek Görüntüler

En temel haliyle, aşağıdakileri belirten basit bir kural yazarak esnek görüntüleri oluşturmak daha kolay olamazdı:

 img { max-width: 100%; }

Esasen bu, eğer bir eleman kabından daha büyükse, kuralın onu o kabın genişliğiyle eşleşmeye zorladığı anlamına gelir. Modern tarayıcılar görüntüleri orantılı olarak yeniden boyutlandırdığından, görüntünün en boy oranı da korunur. Ayrıca %100 kuralı, gömülü videolar gibi hemen hemen tüm diğer öğeler için de kullanılabilir.

Medya Sorgusu

Ortam Türlerinin CSS 2.1'de tanıtılmasından bu yana, stil sayfaları mobil ve diğer cihazları çok daha fazla kapsayıcı hale geldi. Medya Türleri, stilin, elde taşınabilir, ekran ve tv dahil olmak üzere bu türlerle belirli web cihazları sınıflarını hedeflemesine olanak tanır. Ancak cihazlar arasında çok az standardizasyon ve cihaz üreticilerinin çok az desteği ile Medya Türleri hiçbir zaman potansiyellerine ulaşamadı.

Medya Sorguları bu potansiyele ve ardından bazılarına kadar yaşar. Ancak Medya Sorguları, Medya Türleri gibi aygıt türüyle ilgilenmek yerine aygıtın özelliklerine bakar.

Basit bir Medya Sorgusu şöyle görünebilir:

Sorgunun iki bileşeni, ekran olarak ayarlanan ortam türü ve ardından esas olarak cihazın genişliğinin 480 piksel mi yoksa daha az mı olduğunu soran asıl sorgu – (max-device-width: 480px) şeklindedir. Bu durumda, cihaz general.css dosyasını yükler. Değilse, diğerleri gibi, doğru çözünürlük belirlenene ve uygun stil sayfası yüklenene kadar bağlantı yok sayılır.

Çözünürlükten Daha Fazlası

Ancak çözünürlük, Medya Sorguları kullanılarak kontrol edilebilecek tek tasarım öğesi değildir. Tarayıcı penceresinin genişliği ve yüksekliği, yatay ve dikey yönlendirme, hatta düzen, ayarlanabilecek diğer parametrelerden bazılarıdır.

Örneğin, bir Medya Sorgusu bir cihazın bir akıllı telefon olduğunu algılarsa, bir bilgisayar ekranında bir metin alanı ile üç sütun ve iki dikey kenar çubuğu gösteren bir tasarım yükleyebilen bir tasarım, akıllı telefon ekranına tam genişlikte bir metin alanı olarak yüklenebilir. altında yatay elemanlar olarak iki kenar çubuğu.

Esnek Bir Zihniyet

Elbette esnek tasarım için temel gereksinim, esnek tasarım zihniyetine sahip tasarımcılardır. Ne yazık ki, çoğu web sayfası mobil cihazlarda hala o kadar kolay değil, çünkü çoğu tasarımcı hala akıllı telefonlar ve tabletler ile masaüstü için sonradan düşünülerek tasarım yapıyor. Çok az tasarımcı, tasarıma birden fazla platformu göz önünde bulundurarak yaklaşır.

Medya Sorgularını stil sayfalarına dahil etmenin bir öğrenme eğrisi olsa da, bazı web tasarımcılarını durduran piksellerle tasarımdan yüzdelerle tasarlamaya geçiştir. Ancak gerçekte, yüzdelerle tasarım yapmak arasında pek bir fark yoktur ve aynı zamanda daha kolaydır.

Örneğin, iki özdeş öğeye %100 ve 100 piksel genişlik atama arasındaki farkı düşünün. Birinde, bir masaüstü, dizüstü bilgisayar veya iPhone ekranı olsun, öğenin ekranı dolduracağından emin olabilirsiniz. Ancak 100 piksel genişliğindeki bir öğe, 480 piksellik bir iPhone ekranında büyük, ancak 1600×900 çözünürlüğe sahip bir masaüstü ekranında nispeten küçük olacaktır.

Duyarlı Tasarım İş Demektir

İşletmeler için duyarlı tasarımı uygulamanın ana nedeni açıktır. Potansiyel müşterilerin gezinmesi ve aradıklarını bulması ne kadar kolay olursa, dönüşüm oranı da o kadar yüksek olur. Ancak birçok tasarımcı için, bir işletme web sitesi için duyarlı tasarım, genellikle içeriğin boyutunu daha küçük bir ekrana sığdırmak için küçültmek anlamına geliyordu. Aradıkları bilgiyi bulmak için etrafta gezinip yakınlaştırıp uzaklaştırarak zaman harcayan herkes, bir web sitesinin minyatür bir versiyonunun cevap olmadığını bilir.

İşletmelerin ve tasarımcıların bir mobil cihaz için tasarım yapma konusunu ele almalarının bir başka yolu, cihaza göre otomatik yönlendirmelerle farklı cihazlar için ayrı bir site oluşturmak olmuştur. Bu, JavaScript ve büyük resimlerin neden olduğu yavaş yüklemeyi önlemenin yanı sıra en iyi arayüzün sağlanmasına olanak tanır.

Fakat bu yaklaşımın birkaç dezavantajı var. Elbette bunlardan biri, birden fazla site oluşturma ve sürdürme ve bu siteler arasında içeriği koordine etme masrafıdır. Ve elbette, yeni bir cihaz çıktığında kurulacak yeni bir site daha var. Neyse ki, Duyarlı Tasarım doğru yapılırsa, mobil cihazlar için tasarım yaparken neredeyse tüm sorunları çözebilir.