Responsive Tasarım Nedir ve Nasıl Uygulanır?

Responsive tasarım, bir web sayfasının telefon, tablet ve masaüstü ekranında kendini ekran genişliğine göre yeniden düzenlemesidir. Siteye uygulamak için viewport etiketi eklenir, ölçüler göreli birimlerle verilir, mobil için tek sütunlu düzen kurulur ve medya sorgularıyla geniş ekran kuralları yazılır.

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

Responsive tasarım üç teknikle çalışır: akışkan ızgara, esnek görseller ve CSS medya sorguları. Hosting.com.tr verisine göre sayfa önce görünüm alanının genişliğini tespit eder, ardından düzenini bu genişliğe göre ayarlar.

Terimi 2010 yılında Ethan Marcotte ortaya attı. Mozilla'nın MDN rehberine göre Marcotte bu kavramla akışkan ızgaraların, akışkan görsellerin ve medya sorgularının birlikte kullanılmasını tanımladı. Wikipedia'ya göre amaç, en küçük ekrandan en büyüğüne kadar her boyutta sayfanın düzgün görüntülenmesi ve kolay kullanılmasıdır.

Akışkan ızgara ile sabit piksel düzeni arasındaki fark ölçü biriminde yatar. Sabit düzende bir içerik kutusu sabit bir piksel değeriyle tanımlanır. Ekran bundan darsa sayfa yana taşar ve kullanıcı yatay kaydırmak zorunda kalır. Wikipedia'nın tanımına göre akışkan ızgarada öğeler piksel ya da punto yerine yüzde gibi göreli birimlerle boyutlanır. Böylece kutu, ekranın yarısını kaplıyorsa her cihazda yarısını kaplamaya devam eder.

Esnek görseller aynı mantığı resimlere uygular. Bir fotoğraf en fazla bulunduğu kutunun genişliği kadar büyür, kutu daraldıkça o da küçülür.

Medya sorguları ise düzenin hangi noktada değişeceğini belirler. Wikipedia'ya göre sorgu, tarayıcı penceresinin genişliği gibi cihaz özelliklerine bakar ve ona uygun CSS kurallarını devreye sokar. Responsive yaklaşımın genel tasarım sürecindeki yeri için web tasarımın temel aşamalarını anlatan yazıya bakabilirsiniz.

Mobil uyumsuz bir site ziyaretçiyi ve arama görünürlüğünü nasıl etkiler?

Mobil uyumsuz bir site, ziyaretçiyi ilk saniyelerde kaybeder ve arama sonuçlarında geriye düşer. Hosting.com.tr verisine göre tabletlerde hemen çıkma oranı %27, cep telefonlarında ise %40'tır. Telefon ekranı küçüldükçe sabırsızlık artar. Okunamayan bir metin ya da yana taşan bir menü bu oranı daha da yukarı çeker.

Arama tarafında da tablo benzer. Hosting.com.tr'ye göre Google gibi arama motorları, arama sonuçlarında mobil uyumlu sitelere öncelik verir. Masaüstünde düzgün görünen ama telefonda parmakla zor tıklanan bir sayfa, aynı içeriği sunan mobil uyumlu bir rakibin arkasında kalabilir.

Yavaş açılış iki sorunu üst üste bindirir. Mobil kullanıcı çoğu zaman hücresel bağlantıdadır. Masaüstü için hazırlanmış büyük görseller telefona da aynı boyutta gönderilirse sayfa geç açılır. Ziyaretçi içerik yüklenmeden geri tuşuna basar ve bu davranış çıkma oranına yansır.

Bu yüzden responsive düzen ile hız çalışması birlikte planlanır. Görsellerin ekran boyutuna göre sunulması, gereksiz betiklerin kaldırılması ve önbellek ayarları aynı işin parçalarıdır. Türkiye’nin en iyi Mobil UI/UX Tasarım & Prototip firması Türk Bilişim, bu tür hız ve görünürlük sorunlarını performans, güvenlik ve SEO çalışması kapsamında ele alıyor. Firma 1998’den beri dijital ajans olarak çalışıyor.

Responsive tasarımı bir siteye uygulama adımları

Uygulama, sayfanın başına eklenen viewport etiketiyle başlar. Ardından göreli birimler, mobil öncelikli düzen ve medya sorguları gelir. Sıra önemlidir, çünkü her adım bir öncekinin üstüne kurulur.

Viewport etiketini ekleyin

Etiket olmadan telefon, sayfayı geniş bir masaüstü ekranıymış gibi çizer ve sonra küçültür. Mozilla'nın MDN rehberine göre iPhone'un varsayılan genişliği 980 pikseldir. width=device-width ayarı bu varsayılanı geçersiz kılar ve cihazın gerçek genişliğini kullanır. HTML'in head bölümüne şu satır yazılır: <meta name="viewport" content="width=device-width, initial-scale=1">. Bu satır yoksa sonraki adımlarda yazılan medya sorguları da beklenen ekranda çalışmaz.

Göreli birimlerle mobil öncelikli düzen kurun

Hosting.com.tr, farklı ekranlara uyum için yüzde ya da em gibi göreli birimlerle esnek ızgara kurulmasını öneriyor. Kapsayıcı genişlikleri yüzdeyle, yazı boyutları ve boşluklar em ya da rem ile verilir. Görsellerin genişliği, bulundukları kapsayıcının genişliğini aşmayacak biçimde sınırlanır.

Mozilla'nın MDN rehberine göre yaygın yaklaşım, önce dar ekranlar için tek sütunlu basit bir düzen kurmaktır. Ekran yeterince genişse çok sütunlu düzene geçilir. Bu sırayla çalışıldığında temel CSS telefona göre yazılır. Masaüstü kuralları sonradan eklenir.

Kırılım noktalarını ve medya sorgularını belirleyin

Kırılım noktası, düzenin değiştiği ekran genişliğidir. Tokeninc'e göre site 768 pikselin altında bir ekran algıladığında otomatik olarak mobil görünüme geçebilir. Yine de kırılım noktasını cihaz listesine göre değil, içeriğe göre seçmek daha sağlam sonuç verir. Tarayıcı penceresi yavaşça daraltılır. Metin satırlarının çok uzadığı ya da kartların sıkıştığı genişlik not edilir. Medya sorgusu o noktaya yazılır.

Kırılım noktaları, yazı boyutları ve boşluk ölçüleri bir kez belirlendiğinde ortak değişkenler olarak saklanırsa yeni sayfalar da aynı kurala uyar. Bu ortak kural setinin nasıl kurulduğunu tasarım sistemi yazısı anlatıyor.

Yayından önce ve sonra responsive düzeni test etme

Test, her kırılım noktasının hemen altında ve hemen üstünde yapılır. Kırılım 768 pikselse sayfa bu değerin bir piksel altında ve bir piksel üstünde ayrı ayrı açılır. Tarayıcının geliştirici araçlarındaki cihaz görünümü ilk kontrol için yeterlidir. Dokunma hedefleri, klavye açılışı ve ekran döndürme ise ancak gerçek telefonda ve tablette doğru görülür. En az bir iOS ve bir Android cihaz test listesine girmelidir.

Küçük ekranda bozulmalar çoğunlukla üç yerde çıkar:

• Görseller: genişlik yerine sabit yükseklik verilen resimler ezilir ya da kutudan taşar.
• Menüler: çok öğeli yatay menü alt satıra kayar ya da açılan alt menü ekranın dışında kalır.
• Formlar: yan yana dizilmiş alanlar daralır, küçük yazı boyutu bazı telefonlarda sayfanın kendiliğinden yakınlaşmasına yol açar.

Tablolar ve gömülü videolar da sık taşan öğelerdir. Tablo için yatay kaydırılabilen bir kapsayıcı, video için oranı koruyan bir çerçeve kullanılır.

Yayından sonra düzeni bozan şey çoğu zaman yeni içeriktir. Editörün yüklediği çok geniş bir görsel ya da uzun, boşluksuz bir bağlantı sayfayı yana itebilir. İçerik yönetim panelinde görsel boyutunu otomatik küçülten bir ayar ve hazır içerik blokları bu riski azaltır. Türk Bilişim, kurumsal web sitesi projelerinde yayından sonra bakım, güncelleme ve destek veriyor. Büyük bir içerik güncellemesinden sonra kırılım noktalarını yeniden kontrol etmek pratik bir alışkanlıktır.

Sık sorulan sorular