Responsive Web Tasarım Nedir? Mobil Uyumlu Site Nasıl Yapılır?

Responsive web tasarım, tek bir sitenin aynı adres ve aynı içerikle telefon, tablet ve masaüstü ekranlara kendini uyarlamasıdır. Ayrı bir teknoloji değil, bir yaklaşımdır: esnek yerleşim, esnek görseller ve ekran genişliğine göre devreye giren CSS kurallarıyla sayfa her genişlikte okunabilir ve kullanılabilir kalır. Google da mobil siteler için en kolay uygulanan ve bakımı en kolay desen olduğu için responsive tasarımı öneriyor.

Responsive tasarım ile mobil uyumlu site aynı şey mi?

Tam olarak değil. "Mobil uyumlu" bir sonucu anlatır: sitenin telefonda rahat kullanılması. Responsive tasarım bu sonuca ulaşmanın yollarından biridir. Eskiden sık görülen diğer yol, masaüstü sitenin yanına m. ile başlayan ayrı bir mobil site kurmaktı. Bu yapıda iki ayrı sayfa setini güncel tutmak gerekir ve mobil sürümde eksik kalan içerik zamanla sorun olur.

Bu sorun artık doğrudan aramaya yansıyor. Google dizine ekleme ve sıralama için sitenin akıllı telefon tarayıcısıyla taranan mobil sürümünü kullanıyor ve mobil sürümün masaüstüyle aynı içeriği taşımasını istiyor. Responsive tasarımda tek bir sayfa olduğu için bu eşitlik kendiliğinden sağlanır.

Mobil öncelikli (mobile-first) yaklaşım ne demek?

Mobil öncelikli yaklaşım, tasarıma ve koda en dar ekrandan başlamaktır. Önce telefonda çalışan sade bir düzen kurulur, sonra ekran genişledikçe sütunlar, yan menüler ve büyük görseller eklenir. Bootstrap ve Tailwind gibi yaygın CSS çatıları da bu mantıkla çalışır: ön eksiz kurallar her ekranda geçerlidir, kırılma noktasına bağlı kurallar yalnız o genişlikte ve üstünde devreye girer.

Bu sıralamanın pratik faydası önceliklendirmedir. 360 piksellik bir ekranda her şeye yer yoktur; hangi bilginin ilk ekranda, hangisinin aşağıda duracağına baştan karar vermek zorunda kalırsınız. Masaüstünden başlayıp küçülten projelerde ise mobil sürüm genellikle "sığmayanı gizle" mantığıyla eksik kalır.

Responsive tasarımın teknik temelleri nelerdir?

Viewport etiketi

Her responsive sayfanın başında `<meta name="viewport" content="width=device-width">` etiketi bulunur. Bu etiket olmadan mobil tarayıcı sayfayı masaüstü genişliğinde çizip küçültür (MDN'nin örneğinde iPhone için varsayılan 980 piksel); kırılma noktalarınız ve medya sorgularınız da beklendiği gibi çalışmaz.

Esnek yerleşim

Sabit piksel genişlikleri yerine Flexbox ve CSS Grid kullanılır. Grid'deki `fr` birimi ya da Flexbox'taki esneme özelliği, alanın ekrana göre paylaşılmasını sağlar. Böylece aynı kart listesi telefonda tek, tablette iki, masaüstünde dört sütun olabilir.

Medya sorguları

Medya sorguları belirli bir genişlikten sonra devreye girecek kuralları tanımlar. MDN, kırılma noktalarını tek bir cihazın mutlak ölçüsüne göre değil göreli birimlerle (`em`, `rem`) tanımlamayı öneriyor; böylece kullanıcı yazı boyutunu büyüttüğünde düzen de buna göre değişir.

Esnek görseller

Görsellere `max-width: 100%` verilerek kapsayıcısından taşmaları engellenir. Daha ileri adımda `srcset` ve `sizes` özellikleri ya da `<picture>` öğesiyle telefona küçük, geniş ekrana büyük dosya gönderilir. Telefona masaüstü boyutunda görsel indirtmek, mobil hız sorunlarının en yaygın nedenlerinden biridir.

Akışkan tipografi

Başlık boyutları ekran genişliğiyle orantılı büyüyebilir. MDN burada önemli bir uyarı yapıyor: yalnız `vw` birimiyle verilen yazı boyutu kullanıcının yakınlaştırmasına tepki vermez; bu yüzden `calc(1.5rem + 4vw)` gibi sabit bir birimle birlikte kullanılmalıdır.

Responsive tasarım ölçüleri (kırılma noktaları) kaç olmalı?

Tek bir standart yok. Yaygın çatıların varsayılanları fikir verir:

• Tailwind CSS: 640, 768, 1024, 1280 ve 1536 piksel
• Bootstrap 5.3: 576, 768, 992, 1200 ve 1400 piksel

Bu değerleri ezberlemek yerine içerikten yola çıkın. Tarayıcı penceresini yavaşça daraltın; satır boyu okunamayacak kadar uzadığı, kartların sıkıştığı ya da menünün taştığı genişlik sizin kırılma noktanızdır. Belirli telefon modellerine göre ölçü seçmek, yeni cihazlar çıktıkça düzeni eskitir. Çoğu kurumsal site için üç ya da dört kırılma noktası yeterlidir.

Mobilde en sık gördüğümüz hatalar

• Küçük dokunma hedefleri: Menü bağlantıları ve form düğmeleri parmakla isabet edilemeyecek kadar küçük ya da birbirine yapışık. WCAG 2.2'nin AA seviyesindeki 2.5.8 ölçütü, istisnalar dışında dokunma hedefleri için en az 24 x 24 CSS piksel istiyor.
• Gizlenen içerik: Mobilde yer açmak için metnin bir kısmı kaldırılıyor ya da bir düğmenin arkasına saklanıyor. Google kaydırma, tıklama ya da yazma gibi kullanıcı etkileşimi gerektiren içeriği yüklemediği için bu içerik aramada da eksik kalabilir.
• Yatay kaydırma: Sabit genişlikli bir tablo, uzun bir bağlantı ya da taşan bir görsel sayfanın tamamını yana kaydırtıyor. Geniş tabloları kendi kapsayıcısı içinde kaydırılabilir yapın.
• Masaüstü görselleri: Telefonda 400 piksel gösterilecek görsel 2.000 piksel olarak indiriliyor.
• Formlar: Telefon alanında sayı klavyesi açılmıyor, e-posta alanında otomatik büyük harf devrede. Doğru `type` ve `autocomplete` değerleri bu sürtünmeyi kaldırır.
• İlk ekranı kapatan pencereler: Çerez bildirimi, kampanya penceresi ve sohbet balonu aynı anda açılınca asıl içerik görünmez hale geliyor.

Dokunma hedefi ve form konularının ayrıntısı web erişilebilirliği yazımızda, hız tarafı ise Core Web Vitals yazımızda.

Responsive siteyi nasıl test edersiniz?

Google'ın Mobil Uyumluluk Testi aracı ve Search Console'daki Mobil Kullanılabilirlik raporu 1 Aralık 2023'te kullanımdan kaldırıldı. İnternette hâlâ bu araçlara yönlendiren eski rehberler görebilirsiniz. Güncel test düzeni şöyle:

1. Tarayıcı geliştirici araçları: Chrome'daki cihaz modu ile farklı genişlikleri ve dokunma davranışını hızlıca deneyin; Lighthouse raporu da aynı yerden alınabilir.
2. Gerçek cihaz: En az bir küçük ekranlı Android ve bir iPhone'da menüyü, formları ve ödeme ya da iletişim akışını baştan sona deneyin. Emülatör klavyenin açılmasını ve parmakla dokunmayı tam taklit etmez.
3. Search Console URL denetleme: Google'ın sayfayı nasıl gördüğünü ekran görüntüsüyle kontrol edin.
4. Yakınlaştırma testi: Tarayıcıda yazı boyutunu büyütün; düzen bozulmadan okunabilir kalmalı.

Kısaca: responsive site kontrol listesi

• Her sayfada viewport etiketi var
• Yerleşim Flexbox ya da Grid ile kurulmuş, sabit genişlikli kapsayıcı yok
• Kırılma noktaları cihaz modeline göre değil, içeriğin bozulduğu genişliğe göre seçilmiş
• Görseller ekrana uygun boyutta sunuluyor
• Mobilde masaüstüyle aynı ana içerik var, hiçbir bölüm gizlenmemiş
• Dokunma hedefleri en az 24 x 24 CSS piksel ve aralarında boşluk var
• Sayfanın hiçbir genişlikte yatay kaydırması yok
• Formlar ve dönüşüm akışı gerçek telefonda denenmiş

Yeni bir site planlıyorsanız mobil sürümün arama tarafındaki etkisini SEO uyumlu web sitesi yazımızda ayrıca anlattık. Sitenizi mobil öncelikli olarak yeniden kurmak ya da mevcut sitenizin mobil sorunlarını çıkarmak isterseniz web tasarım hizmetimizi inceleyebilir, bize ulaşabilirsiniz.