Responsive tasarım nedir?

Bir stüdyonun çalışmalar sayfasını düşün. Masaüstünde üç proje yan yana, geniş bir başlık ve sakin bir filtre alanı var. Aynı düzeni telefona yüzde kırk küçültmek, görsellerin ve yazıların da yüzde kırk kullanılabilir olması demek değildir. Başlık okunmaz, filtre etiketleri kesilir, kartın dokunma alanı daralır. Responsive tasarımın ilk sorusu kaç sütunun sığdığı değil, bu ekranda kişinin ne yapmak istediğidir. Projeyi seçmek, okumak ve iletişime geçmek hâlâ kolay olmalıdır.

Önce içerik sırasını kurarız. Proje adı kapaktan önce anlaşılmalı mı, filtre her zaman görünür mü kalmalı, ayrıntı metni ne kadar alan istiyor? Dar ekranda kartları tek sütuna almak bu kararların sadece bir sonucudur. Bir fiyat karşılaştırmasında tek sütun, seçenekler arasındaki ilişkiyi kaybettirebilir; bunun yerine satır başlıklarını koruyan yatay kaydırma gerekebilir. Aynı teknik çözümün farklı içeriklerde aynı derecede iyi çalışmasını beklemeyiz.

Eşikler içerik sıkıştığında belirlenir. Bir telefon modeli için tek bir ölçüye çizilmiş tasarım, başka bir telefonun yazı boyutunda taşabilir. Tarayıcı yakınlaştırması, sistem font ayarı, Türkçe uzun bir başlık ve çevrilmiş düğme etiketi bu sınırları değiştirir. Bu yüzden birkaç popüler cihazın ekran görüntüsü yanında ara genişlikler de önemlidir. İyi bir düzen, iki onaylı ekran arasında saklanan kırılgan bir noktaya sahip olmamalıdır.

Görsel kadrajı da düzenin parçasıdır. Geniş bir fotoğrafın tam ortasını telefonda kesmek ürünün kendisini dışarıda bırakabilir. Görselin hangi bölgesinin anlam taşıdığına göre odak noktası seçilir veya farklı kadraj hazırlanır. Teknik tarafta ekrana uygun dosya boyutu sunmak, sanat yönetiminde önemli parçayı korumakla birlikte düşünülür. Küçük ekrana büyük dosyayı indirdikten sonra CSS ile küçültmek görseli sığdırır, fakat aktarım maliyetini azaltmaz.

Bir başka karar, aynı bileşenin farklı genişliklerde aynı önceliği korumasıdır. Masaüstünde yan yana duran fiyat ve satın alma eylemi telefonda birbirinden çok uzaklaşırsa kullanıcı ilişkiyi kaybedebilir. Sadece sütunları alt alta dizmek yerine anlamlı grupları birlikte taşı. Dokunma hedeflerinin çevresindeki alanı, klavyeyle odak sırasını ve ekran okuyucunun izlediği belge sırasını da düşün. Görsel olarak sağa taşınan bir parça kaynak sırasından kopuyorsa farklı kullanıcılar farklı akışlarla karşılaşabilir. Responsive karar, yalnız kutunun genişliği değildir; bilginin hangi sırayla ve hangi ilişkiyle sunulduğudur. Bir hizmet kartının başlığı, açıklaması ve bağlantısı birlikte anlaşılmalı; dar ekran bu bağı bozmamalıdır.