Sayfa Yerleşimini Ekran Çözünürlüğüne Göre Kurmayın
1024×768 için tasarlamak diye bir şey kalmadı. Cihaz listesi her yıl değişiyor, düzeniniz o listeyi kovalayamaz; kovalarsa da her yeni ekran boyutunda baştan yazılır. Yerleşimi ekrandan değil içerikten kurmak gerekiyor: metin nerede okunmaz hale geliyor, sütun nerede sıkışıyor, kırılma noktası tam orası.
Cihazın çözünürlüğü sizin pikseliniz değil
Telefon "1080×2400" diye satılır, tarayıcı o ekrana 390 CSS pikseli genişliğinde davranır. Aradaki çarpan cihazın piksel yoğunluğudur. Medya sorgularınız donanım pikselini değil CSS pikselini görür. Ürün sayfasındaki çözünürlük tablosuna bakarak kırılma noktası yazmak, bu yüzden baştan yanlış hedefe nişan almaktır.
Aynı ilişki görsellerde ters yönde işler. 390 CSS piksellik bir alanı yoğunluğu 3x olan ekranda net göstermek için kaynağın 1170 piksel olması gerekir. srcset tam olarak bunun için var: aynı görselin birkaç boyutunu tanımlarsınız, hangisinin indirileceğine tarayıcı karar verir.
Kırılma noktası cihazdan gelmez
Kırılma noktalarını cihaz adlarına bağlamam. "Tablet" bir genişlik değil, bir pazarlama kategorisidir; içine 744 piksel de girer 1180 piksel de. İşleyen yöntem şudur: pencereyi yavaşça daraltın, düzenin ilk bozulduğu genişliği not edin, kırılma noktasını oraya koyun. Çıkan sayının 768 gibi yuvarlak olması gerekmez.
Üstelik bugünkü CSS'te düzenlerin çoğu kırılma noktası olmadan da kuruluyor. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) tek satırda dört ekrandan üçünün ihtiyacını karşılar: kart alan buldukça yan yana dizilir, bulamayınca alt satıra iner. Yazdığınız medya sorgusu sayısı azaldıkça bakım maliyeti de azalır, çünkü her sorgu ileride ayrıca test edilmesi gereken bir dal demektir.
Ölçünüz satır uzunluğu olsun
Satır başına 50-75 karakter aralığı hâlâ geçerli bir hedef. Sorun bunun piksele çevrilerek uygulanması. Karakter genişliği yazı tipine göre değişir; 700 piksel bir fontta 68 karakter, başkasında 82 karakter eder. CSS'te bunun doğrudan birimi var: ch. Metin bloğuna max-width: 65ch verirseniz sınırı fontun kendi ölçüsüne bağlamış olursunuz, tipografi değişince sınır kendini düzeltir.
Geniş ekranlarda asıl hata metnin küçük kalması değil, sayfanın boydan boya uzayan tek sütuna dönüşmesidir. 2560 piksellik bir monitörde 200 karakterlik satırı kimse okumaz; göz satır sonundan satır başına dönerken yerini kaybeder.
Sabit bir "fold" yok
İlk ekranda ne göründüğü hâlâ önemli, ama bunu sabit bir çizgi gibi düşünmek yanlış. Mobilde tarayıcı çubuğu kayboldukça görünür yükseklik değişir, masaüstünde kullanıcı pencereyi yarım ekran kullanır. Sayfayı "şu piksele kadar olan kısım" diye tasarlamak yerine okuma sırasına göre kurun: ne olduğu, kime yaradığı, sonraki adım. Bu sıra her yükseklikte çalışır.
Mobil için işlev kısmak çözüm değil
Eski yaklaşım mobil kullanıcıya daha az işlevli, ayrı bir site vermekti. Bu bugün ürüne zarar veriyor. Kullanıcı aynı işi telefonda da yapmak istiyor; bulamayınca vazgeçiyor. Yapılması gereken işlevi kesmek değil, sıralamak: ekranda az yer varken hangi eylem birinci, hangisi menüye iner. Ayrıntılı bir çerçeve için Nielsen Norman Group'un mobil kullanılabilirlik derlemesi iyi bir başlangıç.
Yayına almadan önce
- Tarayıcı yakınlaştırmasını %200 yapın; düzen bozuluyorsa sabit piksel kalıntısı var demektir.
- Pencereyi 320 piksele kadar daraltın, yatay kaydırma çubuğu çıkmamalı.
- Metin alanlarını gerçek içerikle doldurun; iki kelimelik başlık her yerde güzel görünür, otuz kelimelik başlık göstermesi gerekeni gösterir.
- Görselleri en dar ve en geniş halde ayrı ayrı kontrol edin.
Kaynaklar