Test edilecek genişlikler tasarımın bozulduğu noktalardan çıkar. Cihaz modeli listesi bu kararı vermez. Doğru yöntem, tarayıcıyı daraltıp düzenin kırıldığı genişlikleri işaretlemek ve kırılma noktalarını oraya koymaktır.
Neden popüler cihaz listesi yeterli değil
Cihaz listesiyle çalışmak iki sorun üretir. Liste her yıl eskir ve aradaki genişlikler test edilmemiş kalır. Bir tasarım 390 piksel ile 768 pikselde düzgün görünüp 520 pikselde bozulabilir.
Medya sorguları cihaz kimliğine değil görüntü alanı ölçüsüne bakar. MDN'in medya sorguları belgesinde koşullar genişlik, yükseklik ve yönelim üzerinden tanımlanır.
Kırılma noktası nasıl bulunur
Sıra şu şekilde ilerler.
- Tarayıcıyı en dar halinden başlatıp yavaşça genişletin.
- Metin satırının aşırı uzadığı, kartların yan yana sığmadığı veya görselin taştığı ilk genişliği not edin.
- O genişliği kırılma noktası yapın ve düzeni orada yeniden kurun.
- Aynı işlemi tabletten masaüstüne kadar tekrarlayın.
Çoğu arayüzde üç ile beş arası kırılma noktası yeterli olur.
Genişlik dışında atlanmaması gereken üç kontrol
Dokunma hedefleri. Küçük ekranda düğmeler parmakla basılabilir büyüklükte kalmalı.
Metin ve arka plan kontrastı. Renk seçimi küçük ekranda değişmese de okunabilirlik ölçülmeli.
Yatay kaydırma. Sayfanın gövdesi hiçbir genişlikte yana kaymamalı.
Test edilecek içerik de seçilir. En uzun ürün adı, en uzun müşteri ismi ve en kalabalık tablo dar ekranda denenmelidir. Kısa örnek metinle yapılan test, gerçek veriyle çalışan sayfanın nerede taşacağını göstermez.
Testin tek ekranda toplanması
Aynı sayfayı üç farklı genişlikte yan yana görmek, bu kontrolleri tek turda bitirir. Simulator Panel bir adresi birden fazla cihaz boyutunda aynı anda açıyor ve ekran görüntüsü alıyor, alınan görüntüler Lodrive klasörüne inceleme paketi olarak konuyor. Tasarım tarafındaki modüller Designers sayfasında.
Sınır şurada. Simulator Panel görüntü alanını taklit ediyor, gerçek cihaz üzerinde çalışmıyor. Cihaza özgü tarayıcı hatalarını ve dokunma davranışını yakalamak için gerçek telefonla son bir kontrol gerekiyor.
Yayın öncesi performans eşikleri Web Analyzer yazısında duruyor.
SSS
Kaç kırılma noktası olmalı? Çoğu arayüzde üç ile beş arası yeterlidir. Sayı, tasarımın bozulduğu genişliklerden çıkar.
Önce mobil mi tasarlanmalı? Dar ekrandan başlamak, içeriği önceliklendirmeye zorladığı için düzeni sadeleştirir. Geniş ekrandan başlayıp daraltmak çoğunlukla daha fazla düzeltme üretir.