İçerik PazarlamaPazarlama ve Satış VideolarıPazarlama İnfografikleriMobil ve Tablet Pazarlama

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

On yıl sürdü duyarlı web tasarımı (RWD) beri ana akım gitmek Cameron Adams ilk kez tanıtıldı 2010 yılında konsept. Fikir dahiceydi – neden görüntülendiği cihazın görünümüne uyum sağlayan siteler tasarlayamıyoruz?

Duyarlı Tasarım nedir?

Duyarlı web tasarımı, bir web sitesinin ekran boyutu veya çözünürlüğü ne olursa olsun herhangi bir cihazda en iyi görüntüleme deneyimini sağlamasını sağlayan bir tasarım yaklaşımıdır. Görüntülenmekte olduğu ekranın boyutuna göre ayarlanan bir site oluşturmak için esnek düzenler, ızgara tabanlı düzenler ve medya sorguları kullanmayı içerir. Bu, duyarlı web tasarımıyla tasarlanan bir web sitesinin bir masaüstü bilgisayarda, tablette veya akıllı telefonda iyi görüneceği ve çalışacağı anlamına gelir.

Başka bir deyişle, görseller gibi öğeler ve bu öğelerin düzeni ayarlanabilir. Duyarlı tasarımın ne olduğunu ve şirketinizin bunu neden uygulaması gerektiğini açıklayan bir videoyu burada bulabilirsiniz. Yeni bir site tasarımı veya web uygulaması geliştiriyorsanız, tüm web trafiğinin yarısından fazlasının değişen görüntü alanı genişliklerine ve yüksekliklerine sahip mobil cihazlardan geldiği göz önüne alındığında, duyarlı web tasarımı bir seçenek değil, bir zorunluluktur.

Duyarlı tasarım, cihaza veya görünüme dayalı olarak benzersiz olan bağımsız deneyimler oluşturmak zorunda olmayan web tasarımcıları için de idealdir. Duyarlı web tasarımı kullanılarak gerçekleştirilebilir CSS.

Duyarlı Tasarım CSS Görüntü Alanı Sorguları

Burada, bir medya sorgusu kullanarak görünüme göre yazı tipi boyutunu ayarlayan bir stil sayfası örneği verilmiştir:

/* Default styles for all devices */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
  body {
    font-size: 18px;
  }
}

/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
  body {
    font-size: 22px;
  }
}

Tarayıcılar boyutlarının farkındadır ve stil sayfasını yukarıdan aşağıya yüklerler. Ekran boyutu için geçerli stilleri sorgulayarak, her minimum ve maksimum cihaz genişliği için belirli stil öğeleri ayarlayabilirsiniz. Bu, her ekran boyutu için farklı siteler tasarlamanız gerektiği anlamına gelmez, yalnızca medya sorgularını kullanarak 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

İşte bir infografik Monetate birden fazla cihaz için tek bir duyarlı tasarım oluşturmanın potansiyel faydalarını gösteren:

Responsive Web Tasarım İnfografik

Siteniz Duyarlı mı?

Sitenizin duyarlı olup olmadığını görmenin basit bir yolu, öğelerin tarayıcının genişliğine göre hareket edip etmediğini görmek için tarayıcı pencerenizi büyütmek veya küçültmektir.

Daha fazla kesinlik için, Google Chrome sitenize tarayıcı. Seçme Görünüm> Geliştirici> Geliştirici Araçları menüden. Bu, bir panele veya yeni pencereye bir grup araç yükleyecektir. Geliştirici Araçları menü çubuğunun solundaki mobil ve tablet simgesine benzeyen küçük simgeye tıklayın. Bazı standart cihazları seçebilir ve hatta sayfayı yatay veya dikey olarak görüntülemek isteyip istemediğinizi değiştirebilirsiniz.

  • chrome geliştirici araçları duyarlı tablet
  • krom geliştirici araçları duyarlı mobil yatay
  • chrome geliştirici araçları duyarlı mobil
  • chrome geliştirici araçları duyarlı masaüstü

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!

Douglas Karr

Douglas Karr CMO'su AÇIK İÇGÖRÜLER ve kurucusu Martech Zone. Douglas düzinelerce başarılı MarTech startup'ına yardımcı oldu, Martech satın almaları ve yatırımlarında 5 milyar doların üzerindeki durum tespitine yardımcı oldu ve şirketlere satış ve pazarlama stratejilerini uygulama ve otomatikleştirme konusunda yardımcı olmaya devam ediyor. Douglas, uluslararası alanda tanınan bir dijital dönüşüm ve MarTech uzmanı ve konuşmacısıdır. Douglas aynı zamanda Dummie's Guide ve iş liderliği kitabının yayınlanmış yazarıdır.

İlgili Makaleler

Başa dön düğmeye
Kapanış

Adblock Algılandı

Martech Zone sitemizden reklam geliri, bağlı kuruluş bağlantıları ve sponsorluklar yoluyla para kazandığımız için size bu içeriği ücretsiz olarak sağlayabilir. Sitemizi gezerken reklam engelleyicinizi kaldırırsanız seviniriz.