Duyarlı web tasarımı, bir ziyaretçinin siteye erişmek için kullanabileceği farklı cihaz türlerini dikkate alan bir web sitesi oluşturmaya yönelik bir yaklaşımdır. Duyarlı web tasarımı, cihaz ekranının boyutlarına göre bir sayfadaki içeriğin nasıl görüntülendiğini ayarlar. Bu, ekranın hangi boyutta kullanıldığına bakılmaksızın aynı özellikleri koruyan, duyarlı olmayan web tasarımıyla doğrudan zıtlık içindedir.
Yanıt vermeyen web tasarım sayfasına bir örnek, masaüstü tarayıcılarda iyi okunan ancak akıllı telefonlarda çok küçük, okunamayan metin içeren, genellikle bir akıllı telefonun sınırlı görüntü alanı ekran genişliğine sığamayacak kadar büyük olan çok fazla sütun veya görüntüye sahip olmasından dolayıdır. . Duyarlı web tasarımıyla, web geliştiricilerinin belirli ekran boyutlarına odaklanması gerekmez; bunun yerine, duyarlı web kodları, çeşitli ekran boyutlarına otomatik olarak uyum sağlayacak şekilde tasarlanmıştır.
Bir web sitesi nasıl duyarlı hale getirilir
Duyarlı web sitesi tasarımı aşağıdaki üç ana bileşenden oluşur:
- Esnek düzenler - Dinamik olarak herhangi bir genişliğe göre yeniden boyutlandırılacak web sitesi düzenini oluşturmak için esnek bir ızgara kullanmak.
- Medya sorguları - Stilleri hedeflerken ve dahil ederken medya türlerine yönelik bir uzantı. Medya sorguları, tasarımcıların belirli tarayıcı ve cihaz durumları için farklı stiller belirlemesine olanak tanır.
- Esnek ortam - Görüntü alanının boyutu değiştikçe ortamın boyutunu değiştirerek medyayı (görüntüler, video ve diğer biçimler) ölçeklenebilir hale getirir.
Duyarlı web siteleri oluşturmak için çeşitli duyarlı tasarım teknikleri kullanılabilir. Çoğu zaman, web geliştiricileri, görüntü alanı etiketlerine ve CSS medya sorgularına göre büyük ve küçük genişlik kesme noktaları belirler. Ardından, belirlenen kesme noktaları arasındaki görüntü boyutlarına göre optimize edilmiş bir içerik düzeni oluşturmak için sitenin tamamına kod eklenir.
Duyarlı web tasarımının bir başka anahtarı, genişlik gibi sabit özelliklerin aksine, göreli değerleri olabildiğince çok kullanmaktır. Bu, okuyucunun o anda kullandığı cihaz ve platforma göre içeriğin boyut olarak ölçeklenmesini sağlar. Bu taktiklerin her ikisi de, duyarlı tasarımı destekleyen temel bir şablon veya tema kullanılarak gerçekleştirilebilir.
Duyarlı web tasarımı neden önemlidir?
Duyarlı web tasarımı, öncelikle kullanıcı deneyimi ve site performansına odaklanan bir dizi nedenden dolayı önemlidir. Birincisi, ekran standart bir masaüstü bilgisayardan daha küçük olduğundan, bir cep telefonu veya tablet kullanan biri için metin ve görüntüleri okumayı / görüntülemeyi kolaylaştırır. Bu özellikle önemlidir çünkü mobil tarama yükselmeye devam ediyor ve çoğu web sitesi trafiğinin önemli bir kısmı sosyal medya bağlantıları tarafından yönlendiriliyor. Duyarlı tasarım, yoğunlaştırılmış bir masaüstü tarayıcı penceresini veya bölünmüş ekran görünümünü görüntüleyen kullanıcılar için de yararlıdır.
Ayrıca arama motorlarına sayfanın herhangi bir görüntüleme deneyimi için optimize edildiğini ve bu da SEO performansını artırdığını gösterir. Bu amaçla, Google 2015 yılında, mobil duyarlılığın arama motoru sıralamalarını belirlemede kilit bir faktör olacağını ve duyarlı tasarımı bir web sitesinin temel performans göstergelerinin kritik bir bileşeni olarak etkin bir şekilde yeniden önceliklendireceğini duyurdu.
Duyarlı web tasarımı ve uyarlanabilir web tasarımı
Uyarlanabilir web tasarımı, bir sayfaya mobil cihazdan erişen birinin benzersiz ihtiyaçlarını göz önünde bulundurarak duyarlı tasarım ilkelerini bir adım öteye taşır. Uyarlanabilir tasarımlar, özellikle dokunmatik özelliklerle ilgilidir ve en alakalı bilgilerin net bir şekilde görüntülenmesini sağlar. Uyarlanabilir web tasarımı, kullanıcının ekran parlaklığı, metin boyutu ve varsayılan dil gibi benzersiz cihaz ayarlarını algılamak için yerine kontroller koyabilir.
Duyarlı web tasarımı önce bir sitenin masaüstü deneyimine ve ikinci olarak mobil deneyime öncelik verirken, uyarlanabilir web tasarımı hem deneyimleri aynı anda hem de eşit ağırlıkta dikkate alır. Bu, uyarlanabilir web tasarımının yürütülmesinin genellikle basit duyarlı tasarımdan çok daha uzun sürdüğü anlamına gelir, ancak bitmiş ürün genellikle çok daha iyi bir kullanıcı deneyimi sunar.