Responsive Web Tasarım: Uygulamalı Rehber
Responsive tasarım, ayrı bir mobil sürüm değil, her genişlikte çalışan tek bir sitedir. Pratikte çoğu site kâğıt üzerinde responsive ve belirli yerlerde bozuktur — yatay kaydırmaya zorlayan bir tablo, ekranın üçte birini yiyen bir gezinme, iOS’ta beklenmedik şekilde yakınlaşan bir form.
Bu rehber konuya nasıl yaklaşacağınızı, gerçek hataların nerede olduğunu ve nasıl test edeceğinizi ele alıyor.
Dar uçtan tasarlayın#
Dardan başlamak önceliklendirmeyi zorunlu kılar. 320 pikselde aynı anda tek bir şeye yer vardır, dolayısıyla o şeyin ne olduğuna karar vermek zorundasınız; bir tasarımı sonradan genişletmek çoğunlukla öğelere daha fazla yer vermek meselesidir.
Ters yönde gitmek — 1440’ta tasarlayıp sonra parça çıkarmak — masaüstünün parçaları gizlenmiş mobil düzenler üretir; önemli içeriğin ziyaretçilerin çoğunun kullandığı cihazda display:none olarak bitmesinin yolu budur.
- Düzenlere yaygın olarak kullanılan en dar cihazlar olan 320–360px’te başlayın.
- Mobil ziyaretçinin ihtiyaç duyduğu içeriği mobilde asla gizlemeyin; taşıyın ya da katlayın.
- Kırılma noktalarını içerik belirlesin — cihaz adlarında değil, düzenin bozulduğu yerde.
- Tarayıcı yazı boyutunu %200’e alarak test edin: bu yaygın bir erişilebilirlik ayarıdır ve düzenleri her telefondan çok bozar.
Cihaz adlı kırılma noktaları hızla eskir. "Tablet" on yılda altı farklı genişlik demekti; "kart ızgarasının çirkinleştiği nokta" değişmiyor.
Gerçekten bozulan öğeler#
Responsive hatalarının çoğunu az sayıda bileşen üretir ve bunlar bilerek kontrol edilecek kadar öngörülebilir.
| Öğe | Hata | Çözüm |
|---|---|---|
| Tablolar | Bütün sayfa yatay kayıyor | Kaydırma kabı ya da kart yığınına dönüştürme |
| Uzun kelime / URL | Sayfa yana kayıyor | overflow-wrap ve esnek/ızgara çocuklarında min-width:0 |
| Görseller | Taşma ya da düzen kayması | max-width:100%, açık width ve height nitelikleri |
| Gezinme | Ekranın üçte birini alıyor | Katlayın ya da ana hedefleri alt çubuğa taşıyın |
| Formlar | iOS yakınlaştırıyor ve geri çıkmıyor | Alanlarda yazı boyutu en az 16px |
| Sabit öğeler | Bağlandıkları içeriği örtüyor | scroll-padding ve gövde boşluğunda hesaba katın |
| Modaller | Küçük ekranda kapatılamıyor | Mobilde tam ekran ve görünür bir kapatma denetimi |
Görseller ve medya#
Görseller genelde sayfadaki en büyük şey ve düzen kaymasının en yaygın kaynağıdır. Üç nitelik bunun çoğunu düzeltir ve hiçbir maliyeti yoktur.
- width ve height niteliklerini her zaman verin ki tarayıcı dosya gelmeden yeri ayırsın.
- Modern formatları sunun — WebP ya da AVIF — hâlâ gerekliyse bir yedekle.
- srcset ve sizes kullanın ki telefon 2000px’lik bir hero değil telefon boyutunda bir dosya indirsin.
- Katlamanın altındaki görselleri geç yükleyin, ama görünen en büyük görseli asla: o sizin LCP öğeniz.
- Ana görsele fetchpriority="high" verin ki dekoratif varlıkların arkasında kuyruğa girmesin.
- Arka plan görsellerine en boy oranı verin ki kap yüklenmeden çökmesin.
Yalnız genişlik değil, dokunma#
Responsive yalnız düzenle ilgili değildir. Dar bir görünüm genelde fare değil parmak demektir ve parmak girdisinin, yalnız genişliğe bakan medya sorgularının karşılamadığı farklı gereksinimleri vardır.
- Dokunma hedefleri en az 44×44px ve aralarında boşluk olsun; yan yana duran 30px’lik bağlantılara sürekli yanlış basılıyor.
- Önemli hiçbir şey hover’ın arkasında olmasın — yalnız hover ile açılan bir menü dokunmatikte erişilemez.
- Dokunuştan sonra takılı kalan hover etkilerini kaldırmak için pointer:coarse medya sorgusu kullanın.
- Birincil eylemleri uzun telefonlarda başparmağın ulaştığı alanda tutun; sağ üst köşe tek elle basılması en zor yerdir.
- prefers-reduced-motion’a saygı gösterin: paralaks ve büyük geçişler bazı kullanıcılarda gerçek rahatsızlık yaratıyor.
Sık sorulan sorular
Kaç kırılma noktası gerekir?
Genelde üç ile beş ve bunlar cihaz listesinden değil içeriğinizden çıkmalı. Pencereyi genişletirken düzenin yanlış görünmeye başladığı yere bir tane ekleyin, belirli bir telefon var diye değil. Bir düzine kırılma noktası olan siteler neredeyse her zaman baştan akışkan olmayan bir düzeni telafi ediyordur.
Ayrı bir mobil site hiç doğru olur mu?
Nadiren. İki kod tabanı, iki URL kümesi, iki dağıtım ve bakılacak bir kanonik ilişki demek ve genelde ikisinden biri sessizce geride kalarak biter. Hâlâ görüldüğü durumlar responsive yapılamayan eski sistemler ve orada bile bu bir plan değil geçici çözümdür.
Responsive tasarımı düzgün nasıl test ederim?
Tarayıcı cihaz taklidi düzen sorunlarını yakalar ama dokunuşu, ağı ve platform davranışını yakalamaz. En az bir gerçek orta seviye Android ve bir iPhone’da, ofis wifi’si yerine mobil veriyle test edin. Sonra önemli sayfaları tarayıcı yazı boyutu %200’de tekrarlayın; düzenlerin asıl çöktüğü yer orasıdır.
Telefonda veri tabloları ne olacak?
İki çalışan seçenek: tabloyu görünür bir ipucu ve yapışkan bir ilk sütunla yatay kaydırılan bir kaba koymak ya da her satırı, her hücrenin kendi sütun adını taşıdığı bir karta dönüştürmek. Kaydırma kabı karşılaştırmayı mümkün tutar; kart yığını okumayı kolaylaştırır. Ziyaretçilerin satırları karşılaştırmasına mı yoksa tek tek okumasına mı göre seçin.
responsive web tasarımmobil uyumlu sitekırılma noktalarımobile firstresponsive görsellerdokunma hedefleri
