Sahip olmadığınız cihazlarda test etmek

Simulator Panel bir sayfayı birden fazla cihaz boyutunda aynı anda önizliyor; içinde DevTools var — konsol, ağ ve depolama — ayrıca tüm cihazlarda ekran görüntüsü alma, performans ve erişilebilirlik profilleme, kontrast denetleyici, dokunma hedefi doğrulayıcı ve özel cihaz yapılandırmaları.

Akışı değiştiren şey çoklu cihaz kısmı. Tek bir tarayıcı penceresini yeniden boyutlandırmak bir sıralamadır; dört genişliği yan yana görmek bir karşılaştırmadır ve kart düzeninin tam olarak tek bir kırılma noktasında acayip biçimde çöktüğünü fark ettiğiniz yer de karşılaştırmadır.

Gerçekten açık tutulacak boyutlar

Listedeki her cihazı eklemek cazip geliyor. Sekiz önizleme, sekiz küçük pencere demek ve hiçbirini okumayı bırakıyorsunuz.

Faydalı kalan sayı dört:

• Küçük bir telefon — desteklediğinizi söylediğiniz en dar genişlik. Metnin kötü kaydığı ve düğmelerin çakıştığı yer burası.
• Büyük bir telefon — mobil trafiğinizin gerçekte olduğu yer.
• Dikey tablet — herkesin unuttuğu boyut ve masaüstü yerleşimlerinin yanlış anda belirdiği yer.
• Bir dizüstü — 27 inçlik monitör değil. Masaüstü ziyaretçilerinin çoğu 13-14 inçlik ekranda ve büyük monitörlerde tasarlanan arayüzler orada düzenli olarak bozuluyor.

Gerçek bir kitle eğiliminiz varsa özel cihaz yapılandırmalarını bir kez kurmaya değer — bir kiosk çözünürlüğü, bir müşterinin kullandığı belirli bir tablet. Bir kez yapın, kaydedin, bir daha düşünmeyin.

Her seferinde çalıştırmaya değen iki kontrol

Erişilebilirlik araçlarının kimsenin üzerine gitmediği yüz uyarı üretme şöhreti var. Bu ikisi farklı, çünkü bir dakikada düzeltebileceğiniz sebeplerle hata veriyorlar ve gerçek insanları anında etkiliyorlar.

Kontrast. Beyaz zemin üzerine gri metin, web’deki en yaygın erişilebilirlik hatası ve genelde biri tasarım daha sakin görünsün diye bir rengi açtığında ortaya çıkıyor. Denetleyici size bir sayı veriyor; kalıyorsa sayıyla tartışmak yerine metni koyulaştırın.

Dokunma hedefleri. Fareyle sorunsuz olan bir denetim, başparmakla gerçekten zor olabiliyor. Doğrulayıcı fazla küçük olanı işaretliyor ve çözüm genelde yeniden tasarım değil dolgu. Bu en çok küçük telefon önizlemesinde önemli — yani insanların atladığı önizlemede.

İkisini de incelemeden sonra değil önce çalıştırın. İncelemede yakalanan bir kontrast hatası bir gidiş geliş eder; panelde yakalanan bir tuş vuruşu eder.

Tüm cihazlarda tek seferde ekran görüntüsü

Toplu yakalama özelliği ilk bakışta göründüğünden faydalı ve sebebi çok belirli: bir yerleşim sorununu tartışılabilir kılmanın en hızlı yolu.

“Mobilde bozuk görünüyor” bir tartışma başlatır. Görev kartına iliştirilmiş dört genişlikteki dört ekran görüntüsü bir tartışmayı bitirir. Görüntüler aynı andan geldiği için kimse eski bir sürüme baktığınızı da öne süremez.

Sohbete yapıştırmak yerine karta iliştirin. Üç hafta sonra dolgunun neden değiştiğini merak eden kişinin bakacağı yer karttır.

Bir simülatörün size söyleyemeyeceği

Dürüst olmaya değen kısım bu, çünkü başarısızlık biçimi sessiz.

Simülatör sayfanızı belirli bir boyutta, sizin tarayıcı motorunuzda, sizin makinenizde, sizin bağlantınız üzerinden çiziyor. Yerleşim konusunda isabetli, geri kalan her şey konusunda işe yaramaz.

Size sayfanın dört yıllık bir Android’de on bir saniye sürdüğünü, yazı tipinin gerçek bir iPhone’da farklı çizildiğini, ekran klavyesi açıldığında yapışkan başlığın girdi alanını kapattığını ya da düzgün bir GPU olmayan donanımda animasyonun takıldığını söylemez. Temiz bir simülatör geçişinden sonra canlıya ulaşan hatalar bunlardır.

Yani: paneli gerçekten iyi olduğu şeyler için kullanın — yerleşim, kontrast, dokunma hedefleri — ve geri kalan her şey için masada ucuz, gerçek bir Android telefon bulundurun. Tek bir fiziksel cihaz, hiçbir simülatörün yakalayamayacağı bir sorun sınıfını yakalar.

Resmin performans tarafı için Web Analyzer sayfayı yerelde çizildiği hâliyle değil, gerçekte sunulduğu hâliyle ölçüyor. Bu, “yerleşim tutuyor mu” sorusundan farklı bir soru ve yayından önce ayrıca sormaya değer.