Ogznet.com

Web sitenizi farklı cihazlar ve ekran boyutları için bu araçlar ile test edin. Modern web tasarım unsurlarının başında duyarlı web tasarım kavramını bilmek geliyor. Amaç, web sitelerinizin farklı cihaz veya ekran boyutlarında mükemmel şekilde görünmesini sağlamaktır. Ancak teori ve pratik farklı olabilir. Sitenizin çeşitli ekran tipleri için tamamen duyarlı olduğundan emin olmak için sitenizi farklı cihazlarda test etmeniz gerekir.

Bununla birlikte, gerçek bir çözünürlük testi yapmak için ihtiyaç duyacağınız yüzlerce cihazı elimizin altında bulunduramayız. Bu araçlar, responsive tasarımlarınızı sanal bir ortamda test etmenizi sağlayarak bu yükten sizi kurtarıyor.

1. Responsinator

Responsinator

Responsinator ile sitenizin farklı cihazların ekranlarında nasıl göründüğünü görün. Responsinator sade bir arayüze sahiptir. Sadece web sayfanızın URL'sini yazın ve bu ücretsiz, tarayıcı tabanlı araç, web sayfanızın en popüler ekran şekillerinde ve boyutlarında nasıl görüntülendiğini göstersin. Sonrasında sayfanızla etkileşime girebilir, bağlantıları tıklayabilir, arama alanlarına yazabilirsiniz.

2. Google DevTools Device Mode

Google DevTools Device Mode

DevTools Cihaz Modu, Chrome web tarayıcısı üzerinden farklı cihazları taklit eder. DevTools'un Cihaz Modu, geliştiricilerin Chrome tarayıcısında mobil cihazları simüle etmeleri için kolay bir yol sunar. Sitenizin Retina ekranlar da dahil olmak üzere farklı ekran boyutları ve çözünürlüklerinde nasıl göründüğünü öğrenmek için kullanabilirsiniz. Bunun için Chrome web tarayıcısında sitenizi açıp klavyede F12 tuşuna basmanız yeterlidir. Ardından üst menüden çeşitli cihaz tipleri arasından seçim yapabilirsiniz.

Emülatördeki dokunma, coğrafi konum ve cihaz yönlendirmesi için cihaz girişlerini bile taklit edebilirsiniz.

3. Resizer

Resizer

Resizer, responsive web siteniz için Materyal Tasarım değerleri oluşturmanıza yardımcı olur. Google’ın Materyal Tasarımı yönergeleri, duyarlı ızgaralar, yüzey davranışları ve kullanıcı arayüzü kalıpları hakkında öneriler içerir. Ayrıca ücretsiz site çözünürlüğü test aracı ile farklı cihazlarda web sitenizin nasıl göründüğünü görebilirsiniz.

4. Ghostlab

Ghostlab

Ghostlab, responsive web sitenizi bir grup cihaz ve tarayıcıda eşzamanlı olarak test eder. Ücretli bir web sitesi test uygulaması olan Ghostlab, web sitenizi aynı anda çok sayıda tarayıcı ve mobil cihazda test etmenizi sağlar. Bir tarayıcıda veya cihazda test yapmaya başlayabilir; bağlantılara tıklayabilir, form doldurabilir veya sayfayı yeniden yüklüyebilirsiniz.

5. Browser Stack

Browser Stack

Web sitenizi 2000'den fazla gerçek cihaz ve tarayıcıda test ederek kullanıcılarınıza sorunsuz bir deneyim yaşatın. Browser Stack, en gelişmiş, tam özellikli test araçlarından biridir. Ücretli uygulama, pazar eğilimleri ve Browser Stack’in 36.000 müşterisine dayanan kullanım istatistiklerine dayalı olarak sürekli güncellenen bir liste olan test amaçlı 2.000'den fazla mobil ve masaüstü tarayıcıya erişim sunar.

6. CrossBrowserTesting

CrossBrowserTesting

CrossBrowserTesting, çok çeşitli cihazlar ve test özellikleri sunar. CrossBrowserTesting, Stack’in test alanındaki en büyük rakibidir ve responsive web sitenizi test etmek için 1.500'den fazla tarayıcı ve cihaz sunar.

Hepsi bir arada platformu, paralel otomatik testler çalıştırmanıza, ekran görüntülerini görsel olarak karşılaştırmanıza, farklı cihazlarda web sitenizle hızlıca kaydırmanıza ve etkileşimde bulunmanıza ve kodlama yaparken uzaktan hata ayıklamanıza olanak tanır.

7. Resolution Test

Resolution Test

Son olarak göstereceğiniz araç bir Chrome uzantısıdır. Bu uzantı ile responsive web sitelerinizi test edebilirsiniz. Geliştiricilere, tarayıcı üzerinden web sayfalarını farklı çözünürlüklerde test etme seçeneği sunar.

Resolution Test, geliştiricilerin web sitelerini farklı ekran çözünürlüklerinde önizlemesi için tarayıcı penceresinin boyutunu değiştirir. Yaygın olarak kullanılan çözünürlüklerin bir listesini ve bu listeyi özelleştirme seçeneğini içerir.