Duyarlı Tasarım nedir? (Açıklayıcı Video ve İnfografik)

duyarlı web tasarımı

On yıl sürdü duyarlı web tasarımı (RWD) beri yaygınlaşacak Cameron Adams ilk kez tanıtıldı kavram. Fikir dahice bir fikirdi - neden görüntülendiği cihazın görüntü alanına uyum sağlayan siteler tasarlayamıyoruz?

Duyarlı Tasarım nedir?

Duyarlı web tasarımı (RWD), çok çeşitli cihazlarda (cep telefonlarından masaüstü bilgisayara kadar) optimum görüntüleme deneyimi (minimum yeniden boyutlandırma, kaydırma ve kaydırma ile kolay okuma ve gezinme) sağlamak için siteler oluşturmayı amaçlayan bir web tasarımı yaklaşımıdır monitörler). RWD ile tasarlanan bir site, @media kuralının bir uzantısı olan akışkan, orana dayalı ızgaralar, esnek görüntüler ve CSS3 ortam sorgularını kullanarak düzeni görüntüleme ortamına uyarlar.

Vikipedi

Başka bir deyişle, resimler gibi öğeler ve bu öğelerin düzeni ayarlanabilir. İşte duyarlı tasarımın ne olduğunu ve şirketinizin bunu neden uygulaması gerektiğini açıklayan bir video. Yakın zamanda yeniden geliştirdik Highbridge site duyarlı ve şimdi üzerinde çalışıyor Martech Zone aynısını yapmak!

Görünümün boyutuna göre düzenlenen stilleriniz için bir hiyerarşiye sahip olmanız gerektiğinden, duyarlı bir site oluşturmanın metodolojisi biraz sıkıcıdır.

Tarayıcılar kendi boyutlarının farkındadır, bu nedenle stil sayfasını yukarıdan aşağıya yükleyerek ekranın boyutu için uygulanabilir stilleri sorgularlar. Bu, her ekran boyutu için farklı stil sayfaları tasarlamanız gerektiği anlamına gelmez, sadece gerekli öğeleri değiştirmeniz gerekir.

Mobil öncelikli bir zihniyetle çalışmak günümüzde temel standarttır. Sınıfının en iyisi markalar, sitelerinin yalnızca mobil uyumlu olup olmadığını değil, aynı zamanda eksiksiz müşteri deneyimini de düşünüyor.

Lucinda Duncanalfe, Monetate CEO'su

Monetate'den, birden çok cihaz için tek bir duyarlı tasarım oluşturmanın potansiyel faydalarını gösteren bir infografik:

Responsive Web Tasarım İnfografik

Duyarlı bir sitenin işleyişini görmek istiyorsanız, Google Chrome tarayıcı (Firefox'un aynı özelliğe sahip olduğuna inanıyorum) Highbridge. Şimdi seç Görünüm> Geliştirici> Geliştirici Araçları menüden. Bu, tarayıcının altına bir dizi araç yükleyecektir. Geliştirici Araçları menü çubuğunun en solundaki küçük mobil simgesine tıklayın.

duyarlı-test-chrome

Görünümü yataydan portreye değiştirmek için üstteki gezinme seçeneklerini kullanabilir, hatta herhangi bir sayıda önceden programlanmış görüntü alanı boyutunu seçebilirsiniz. Sayfayı yeniden yüklemeniz gerekebilir, ancak bu, duyarlı ayarlarınızı doğrulamak ve sitenizin tüm cihazlarda harika görünmesini sağlamak için dünyadaki en havalı araçtır!

3 Yorumlar

  1. 1
  2. 2

    Bu iyi açıklanmış makale için çok teşekkürler Douglas. Bununla birlikte, şeylerin içerik tarafında buna katılıyorum. Çoğu site için responsive bir düzen yapmak yeterli olmayacaktır. Duyarlı içeriğe ihtiyacımız var. Ancak daha temel web siteleri için, bununla nasıl başa çıkılacağına dair iyi belgelenmiş makalenizi kullanacağız!

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.