Duyarlı (Responsive) Web Tasarımı Nedir Nasıl Çalışır ?

Duyarlı (Responsive) Web Tasarımı Nedir?

Duyarlı tasarımın amacı, tek bir siteye sahip olmaktır, ancak farklı boyutlardaki cihazlarda görüntülendiğinde farklı yanıt veren farklı öğeler içerir. Geleneksel bir "sabit" web sitesini ele alalım. Örneğin, bir masaüstü bilgisayarda görüntülendiğinde, web sitesi üç sütun gösterebilir.
Ancak, aynı düzeni daha küçük bir tablette görüntülediğinizde, kullanıcıların sevmediği bir şeyi yatay olarak kaydırmaya zorlayabilir. Veya öğeler görünümden gizlenebilir veya bozuk görünebilir. Darbe ayrıca birçok tabletin dikey yönde izlenebildiği veya yatay görünüm için yana doğru döndüğü gerçeğiyle de karmaşıklaşmaktadır.

Küçük bir akıllı telefon ekranında, web siteleri görmek daha da zor olabilir. Büyük görüntüler düzeni bozabilir. Siteler ağır grafiklerse akıllı telefonlara yüklenebilir. Ancak, bir site duyarlı tasarım kullanıyorsa, tablet sürümü yalnızca iki sütunu gösterecek şekilde otomatik olarak ayarlanabilir. Bu şekilde, içeriğin okunabilir ve gezinmesi kolaydır.

Akıllı telefonda içerik, belki de dikey olarak yığılmış tek bir sütun olarak görünebilir. Ya da muhtemelen, kullanıcı diğer sütunları görüntülemek için üzerine kaydırmayı becerebilir. Görüntüler düzeni bozmak veya kesmek yerine yeniden boyutlandırılacaktır. Önemli olan: duyarlı tasarımla, web sitesi görüntüleyicinin gördüğü cihaza göre otomatik olarak ayarlanır.

Duyarlı (Responsive) Web Tasarımı Nasıl Çalışır?

Duyarlı siteler sezgisel ızgaraları kullanır. Tüm sayfa öğeleri pikselden ziyade, orantılıdır. Yani eğer üç sütununuz varsa, her birinin ne kadar geniş olması gerektiğini değil, diğer sütunlarla ne kadar geniş olması gerektiğini söyleyemezsiniz. Sütun 1 sayfanın yarısını almalı, sütun 2% 30, sütun 3 ise% 20 almalıdır. Görüntüler gibi medya da nispeten yeniden boyutlandırılır. Bu şekilde bir görüntü kendi sütununda veya ilgili tasarım öğesinde kalabilir.