Responsive Tasarım nedir?

Responsive tasarım nasıl çalışır?

Bir suyu farklı şekilli bardaklara döktüğünüzü düşünün: su aynıdır, yalnızca kabın biçimini alır. Responsive tasarımda da içerik tektir; sayfanın düzeni ise ekranın genişliğine göre şekil değiştirir. Bunu sağlayan üç temel teknik vardır:

• Esnek ızgaralar: Sütun genişlikleri sabit piksel yerine yüzde veya esnek birimlerle tanımlanır. Masaüstünde yan yana duran üç kutu, telefonda alt alta dizilir.
• Esnek görseller: Fotoğraflar bulundukları alandan taşmaz; ekran küçüldükçe orantılı olarak küçülür.
• Medya sorguları: CSS içinde "ekran 768 pikselden darsa şu kuralları uygula" gibi koşullar yazılır. Bu kırılma noktaları sayesinde her cihaz grubuna uygun düzen gösterilir.

Sayfanın başındaki <meta name="viewport" content="width=device-width, initial-scale=1"> satırı da tarayıcıya sayfayı cihaz genişliğinde göstermesini söyler. Bu satır olmadan telefon, siteyi küçültülmüş bir masaüstü görüntüsü olarak açar.

İşletmeniz için ne anlama gelir?

Bir kuaför, emlakçı ya da kafe sahibiyseniz ziyaretçilerinizin büyük kısmı sizi büyük ihtimalle telefondan arıyor: yol tarifine bakıyor, fiyat listesine göz atıyor, WhatsApp'tan yazmak istiyor. Telefonda yakınlaştırıp kaydırmadan okunamayan bir site, bu kişiyi birkaç saniye içinde rakibinize gönderir.

Arama motoru tarafı da önemlidir. Google siteleri büyük ölçüde mobil sürümlerine bakarak değerlendirir. Yani masaüstünde kusursuz görünen ama telefonda dağılan bir site, SEO açısından da geride kalır.

Örnek: Bir pansiyonun ana sayfası

İçerik değişmedi; yalnızca her ekranda en kullanışlı haliyle sunuldu. Telefonda ayrıca "Ara" butonuna dokunulduğunda doğrudan arama başlatılması, masaüstünde ise numaranın yalnızca yazı olarak gösterilmesi gibi küçük farklar da düşünülebilir.

Nasıl test edilir?

Tarayıcıların geliştirici araçlarındaki cihaz görünümü hızlı bir fikir verir, fakat gerçek cihazın yerini tutmaz. Yayına almadan önce siteyi en az bir Android ve bir iOS telefonda, dikey ve yatay konumda açın; menüyü, formu ve ödeme adımını parmağınızla deneyin.

Sık yapılan hatalar

• Tasarımı yalnızca masaüstünde onaylayıp telefonda hiç denememek.
• Butonları ve bağlantıları parmakla basılamayacak kadar küçük veya birbirine yakın yapmak.
• Telefonda da masaüstü boyutundaki ağır görselleri yüklemek; sayfa yavaşlar.
• Geniş tabloları küçük ekranda yatay kaydırmasız bırakmak.
• Telefonda açılan ve kapatma düğmesi zor bulunan açılır pencereler kullanmak.

Responsive ile ayrı mobil site arasındaki fark

Eskiden bazı firmalar "m.siteadi.com" gibi ayrı bir mobil sürüm hazırlardı. Bu yaklaşımda iki site bakımı gerekir, içerik zamanla birbirinden kopar ve yönlendirme hataları çıkar. Responsive tasarımda tek adres, tek içerik ve tek yönetim paneli vardır. Bir de "adaptif tasarım" kavramı vardır: burada belirli ekran boyutları için önceden hazırlanmış sabit şablonlar sunulur. Responsive yaklaşım ise aradaki tüm genişliklerde akıcı biçimde uyum sağladığı için çoğu işletme sitesi için daha pratik bir tercihtir.