Duyarlı tasarım nedir

Duyarlı tam olarak ne demek?

Duyarlı tasarım, her genişlikte kendini yeniden düzenleyen tek bir HTML dosyası, tek bir adres ve tek bir içerik demektir. Dizüstünde yan yana üç sütun, telefonda aynı üçü alt alta. Hiçbir şey çıkarılmaz ve ikinci bir adres üretilmez.

Tek yol bu değildi. Yıllarca iki yol daha yaygındı: mobil alt alan adında ayrı bir site ve sunucudan cihaza göre farklı HTML sunmak. İkisi de hâlâ çalışır ve ikisi de iki kat iştir, çünkü her değişikliğin iki yerde yapılması gerekir. Google'ın kendi mobil öncelikli dizine ekleme belgesi, duyarlı tasarımda içeriğin ve meta verilerin mobil ile masaüstü sürümde aynı olduğunu söyler; diğer iki kurulumu ise ayrıca belgeler.

Pratikte bunu tek bir satır açar. O satır olmadan mobil tarayıcı sayfayı yaklaşık 980 piksel genişliğinde sanal bir tuval üzerine yerleştirip küçültür; okumak için iki parmakla büyüttüğünüz sayfa tam olarak budur:

<meta name="viewport" content="width=device-width, initial-scale=1">

Bu sitede o satır temanın header.php dosyasının on dördüncü satırında duruyor. Kaç medya sorgusu yazdığınız önemli değil; bu satır yoksa hiçbiri beklediğiniz gibi davranmaz.

Neden en dar durumdan başlanır?

Çünkü darlık sizi önceliklendirmeye zorlar. Tek bir dar sütunda fazlalık olan her şey kendini ele verir: dekoratif afiş, kimsenin okumadığı kenar sütunu, bir zamanlar bir gerekçeyle yan yana durup artık durmayan üç düğme. Masaüstünden başlarsanız bu kararları hiç almazsınız, sadece sonradan CSS ile gizlersiniz.

Kodda iki yolunuz var. Temel durumu dar yazıp geniş genişlikleri min-width ile eklersiniz ya da temel durumu masaüstü yazıp max-width ile geri çekilirsiniz. Yeni bir genel site için birincisini seçin: mobil tarayıcı fazladan kural işlemez ve CSS'iniz eklenen her kırılma noktasıyla birikmez. Yalnızca masaüstü için yapılmış eski bir siteyi yenilerken ikincisi daha dürüsttür; var olanı yokmuş gibi gösteremezsiniz.

Bir yanlış anlamayı da burada bitirelim: mobil öncelik bir yazma sırasıdır, mobilde daha az içerik yayınlama izni değil. Google açıkça mobil sürümün içeriğinin masaüstü sürüme denk olması gerektiğini, az ise tamamlanmasını söyler. Tasarım farklı olabilir; içerik olamaz.

Kırılma noktası sayısı nereden gelir?

Bir cihaz listesinden değil, kendi yerleşiminizden. Bu, dersin en önemli cümlesi ve çoğu eğitim tersini söylüyor: her yerde tekrarlanan 768, 992 ve 1200 sayıları bir çatının varsayılanıdır ve sitenizle ilgisi yoktur.

Kendi sayılarınızı bulma yolu sıkıcı ve güvenilirdir. Sayfayı açın ve pencereyi kademe kademe daraltın. Bir başlığın kötü sardığı, bir sütunun ezildiği ya da bir şeyin yandan taştığı genişlik sizin kırılma noktanızdır. Sayıyı not edin ve devam edin. Normal bir sayfa on değil, üç dört sayı üretir.

Canlı örnek bu site. Temanın main.css dosyasında 43 medya sorgusu bloğu var ve bunlar birlikte 17 ayrı genişlik sınırı oluşturuyor: 430, 580, 600, 640, 700, 720, 780, 820, 860, 880, 900, 920, 980, 1100, 1259, 1299 ve 1359. Hiçbiri 768 ya da 992 değil. Blok sayısı sınır sayısından fazla, çünkü bazı sınırlar iki kez yazılmış: biri max-width ile, biri bir piksel yukarıda min-width ile: 640 ve 641, 1100 ve 1101. Her sayının kendi hikâyesi var: 1100 altında camsı masaüstü başlığı yerini mobil çubuğa bırakır, 780 altında ise üç ve daha çok sütunlu her içerik tablosu alt alta kartlara dönüşür, çünkü üç sütunlu bir tablo telefonda okunmaz.

Öğrenmesi uzun süren bir nokta: kırılma noktası sayfaya değil bileşene aittir. Dar bir sütunun içinde duran bir kart pencerenin genişliğinde kırılmaz; kendi kapsayıcısının genişliğinde kırılır. @container CSS'e bu yüzden eklendi ve aynı kart tek bir sayfanın iki ayrı yerine konduğunda birinde doğru, diğerinde yanlış olabilir.

Göreli birimler, kapsayıcılar ve yerini önceden ayıran görseller

Medya sorgusu ilk değil son araçtır. Baştan göreli birimlerle yazılmış bir yerleşim, çoğu genişliği tek bir sorgu olmadan geçer. Genişlikleri yüzdeyle ya da ızgarada fr ile verin, yazı boyutunu rem ile ayarlayın ve gerçekten işe yaradığı yerde clamp() kullanın ki tek bir değer iki sınır arasında yumuşak hareket etsin. px, bir kenarlık ya da küçük bir boşluk için yerindedir; bir bloğun genişliği için genelde değil.

Ekranı değil kapsayıcıyı sınırlayın. Bu sitede --wrap adında 1200 piksele ayarlı bir değişken var ve içerik sütunu monitör ne kadar büyük olursa olsun onu aşmaz. Sebep zevk değil: bir metin satırı fazla uzayınca göz, sonraki satırın başına dönerken yerini kaybeder.

Sağdan sola burada devreye girer ve bu bir ayrıntıdan fazlasıdır. margin-left yerine margin-inline-start yazın; aynı tek CSS dosyası Farsça ve Arapçaya da İngilizce ve Türkçeye de hizmet eder, tarayıcı yönü html etiketindeki dir değerinden alır. Bu iddia bu sitede sayılabilir: main.css genelinde yetmiş mantıksal özellik bildirimi ve margin-left, margin-right, padding-left ya da padding-right için sıfır kullanım var.

Ve görseller. Her img, CSS onu yeniden boyutlandırsa bile width ve height ister. Tarayıcı bu ikisinin oranından, dosya gelmeden önce yeri açık tutar; böylece altındaki metin yüklenirken zıplamaz. Yanlarına srcset ve sizes koyun ki telefon masaüstü sürümünü değil küçük sürümü indirsin. Bu sitenin blog yazılarında her görsel ikisini de taşıyor ve öne çıkan görsel iki genişlik sunuyor: 720 ve 1200 piksel.

Duyarlı demeden önce üç kontrol

Birincisi, 320 piksel. WCAG standardındaki Reflow ölçütü, içeriğin 320 CSS pikseline denk bir genişlikte iki yönlü kaydırma gerektirmeden kullanılabilir olmasını söyler. Çoğu kişi bu sayının eski telefonlarla ilgili olduğunu sanır, ama belgenin kendi vurgusu başka yerdedir: 320 CSS piksel, yüzde dört yüz yakınlaştırmadaki 1280 piksellik bir ekrana denktir. Yani ölçüt aslında sayfayı büyütmek zorunda olan, gözü iyi görmeyen biriyle ilgilidir; telefonla değil.

İkincisi, dokunulması gereken şeyin boyutu. Aynı standarttaki başka bir ölçüt, işaretçi hedeflerinin çevresinde yeterli boşluk yoksa en az 24 çarpı 24 CSS piksel olmasını söyler. Altbilgide sıkışmış simgeler ve bir tablonun içindeki silme düğmeleri, bunun genelde çuvalladığı iki yerdir.

Üçüncüsü, içerik. Telefonda gördüğünüz sürüm, masaüstü sürümün söylediğini söylüyor mu? Bir blok mobilde display: none ile gizlenmişse o blok Google için de fiilen sönükleşmiştir, çünkü dizine ekleme mobil sürümden yapılır.

Ve W3C'nin kendi belirttiği bir istisna: doğası gereği iki boyutlu içerik, örneğin büyük bir veri tablosu ya da bir harita, ölçütün dışındadır. Böyle bir şeyin çözümü onu 320 piksele tıkıştırmak değil; sayfanın geri kalanı kaymazken o tek şeyin kendi kapsayıcısı içinde kaymasına izin vermektir.