En İyi Duyarlı Web Sitesi Tasarımı Test Araçları ve Sitelerinden 9'u

Hepimiz oradaydık…

Tasarladığınız bir web sitesi dizüstü bilgisayarınızda, telefonunuzda ve tabletinizde harika görünüyor. Ama sonra birisi size sitenin kendi cihazında nasıl göründüğünün bir ekran görüntüsünü gösteriyor ve siz sadece ağlamak istiyorsunuz. Muhtemelen olan şey, tasarımınızı test etmediğiniz bir kırılma noktası olan bir ekranda olmalarıdır.

Duyarlı tasarım, zamanın bu noktasında beyinsizdir. Tasarımlarınızın herhangi bir ekranda doğru görünmesi gerekir. Divi kullanıcısıysanız, duyarlı tasarım yapmanıza yardımcı olacak bir dizi pratik araç zaten var. Yine de, mümkün olan en fazla görüntü alanını kontrol etmek her zaman iyi bir fikirdir. En iyi seçeneğiniz, Divi Builder ile bir pencereye ve düzenli olarak yenileyebileceğiniz duyarlı bir araca sahip bir pencereye sahip olmaktır.

Bazı insanlar "önce mobil" tasarım yapmayı tercih ederken, diğerleri bunu aynı anda yapar ve diğerleri önce masaüstünü tasarlar ve ardından daha küçük ekranlar için ayarlar. Süreciniz ne olursa olsun, sitenizin ne kadar duyarlı olduğunu kontrol etmek için doğru araçlara sahip olmanız gerekir.

Bu nedenle, bu listeyi en pratik duyarlı web sitesi tasarımı test araçlarından ve sitelerinden bazılarıyla bir araya getirdik. Onları deneyin ve hangisinde en rahat olduğunuzu görün.

Hadi dalalım.

Youtube Kanalımıza Abone Olun

Chrome'da İnceleme Aracı

Listedeki ilk duyarlı test aracı, Chrome tarayıcınızın tam içindedir. Bir sitenin kodunu incelemek için kullandığınız aracın aynısı, ekran boyutlarını ve görünüm pencerelerini test etme özelliğine de sahiptir. Herhangi bir web sitesine sağ tıklayın ve 'İncele'ye tıklayın. İnceleme penceresi açıldığında, 'Öğeler' adlı düğmenin yanında cihazlar için simgeyi göreceksiniz. Cihazlar düğmesine tıkladığınızda, ekranınız bulunduğunuz web sitesini farklı kesme noktalarında gösterir.

Kesme noktasını manuel olarak değiştirmek için belirli bir boyut girebilir veya pencerenin köşesini tutup sürükleyebilirsiniz. Bu, tasarımınızın farklı görünümlere nasıl uyum sağladığını kontrol etmek için harikadır.

Duyarlı Test Aracı

Duyarlı Test Aracı, çoğu duyarlı test web sitesi gibidir, test etmek istediğiniz sayfanın URL'sini ekranın üst kısmındaki bir arama çubuğuna girebilirsiniz. Bu özel araç, aralarından seçim yapabileceğiniz uzun bir önceden ayarlanmış cihaz boyutları listesine sahiptir. Başka bir boyuta ihtiyacınız varsa, özel boyut ölçümlerini seçebilirsiniz. Tasarımdaki bir değişikliği kontrol etmek istediğinizde, yeniden yüklemek için 'Kontrol Et' düğmesine tıklamanız yeterlidir. Test penceresinde kaydırma yetenekleri arasında geçiş yapmak için bir düğme ve hem dikey hem de yatay düzenleri kontrol etmek için bir 'döndür' düğmesi vardır.

Bu aracın arkasındaki geliştirici, duyarlı web siteleri için bir ızgara sistemi de oluşturdu. Sağ üstteki ampul simgesinde bulacaksınız.

Bu aracı deneyin

Duyarlı Tasarım Denetleyicisi

Duyarlı Tasarım Denetleyicisi, önceden ayarlanmış bir dizi ekran boyutuna ve özel bir boyut seçeneğine sahip bir sitedir. Yukarıdaki araçla karşılaştırıldığında bu araçta eksik olan şey, ekranın üst kısmındaki numaralı cetvel ve bir döndürme düğmesidir. Ortak özelliği, 'Git' düğmesinin aynı şekilde çalışmasıdır, tasarımda bir değişiklik yaptığınızda ve sonuçları kontrol etmek istediğinizde tıklamanız yeterlidir.

Bu aracı deneyin

Tasarım Modu

Design Modo, sitelerinin bir parçası olarak ücretsiz yanıt veren bir test aracına sahip bir web sitesi ve e-posta oluşturucudur. Bu araç, yukarıdaki iki aracın sahip olduğu her şeye ve görünüm alanı küçülüp genişledikçe tasarımın nasıl değiştiğini görmek için bir sürükleme düğmesine sahiptir. Tabii ki, ana hizmetleri için bir reklam ve olası satış yaratma aracı olarak da çalışır. Tek dezavantaj, aracın gösterdiği ölçümlerin görüntü alanına göre değil, çözünürlüğe göre olmasıdır. Bu biraz kafa karıştırıcı olabilir.

Bu aracı deneyin

Ekran Sineği

Screenfly, yukarıdaki örneklerle aynı duyarlı test özelliklerine sahip başka bir web sitesidir, ancak ön ayarlar biraz eskidir. Son iPhone ön ayarı 7X'tir. Bununla birlikte, araç hala iyi çalışıyor ve özel bir boyut özelliğine, döndürme ve yenileme düğmelerine ve kaydırma geçişine sahip.

Bu aracı deneyin

sorumlu

Responsinator, muhtemelen çok havalı göründüğü için hala en popüler duyarlı web tasarım test uygulamalarından biridir. Bir URL eklediğinizde, siteyi bir dizi farklı mobil cihazda hem dikey hem de yatay düzende gösterir. Bu araç, en yaygın cihazlarda hızlı kontroller için pratiktir ancak tüm kesme noktalarını kontrol etmek istiyorsanız sınırlıdır.

Bu aracı deneyin

Duyarlı mıyım

Duyarlı mıyım, test sitesini belirli sayıda cihazda göstermesi açısından Yanıtlayıcı'ya benzer. Bu aracın avantajı, sonuçların ekran görüntüsünü alabilmeniz ve portföyünüz için kullanabilmenizdir. Ayrıca, her ekran bağımsız olarak kaydırılabilir.

Bu aracı deneyin

piksel ayarlayıcı

Pixeltuner, Responsinator'a benzer bir sitedir. Araç yalnızca 6 ekran boyutu gösterir ancak bunlar iyi bir seçimdir. Bu altı boyutla, tüm temelleri kapladığınızdan emin olabilirsiniz. Eksik olan tek şey 1500 pikselin üzerindeki daha büyük ekran boyutları.

Bu aracı deneyin

Duyarlı Web Tasarım Test Cihazı

Responsive Web Design Tester bir web sitesi değil, bir tarayıcı uzantısıdır. Bunu tarayıcınızın uzantısında veya eklenti kitaplığında bulacaksınız. Aşağıdaki bağlantı Chrome uzantısı içindir, ancak araç Safari ve Firefox için de çalışır. Uzantı simgesine tıkladığınızda, bir ön ayar listesinden seçim yapabilirsiniz ve ardından site, seçtiğiniz görünüm boyutunda yeni bir pencerede açılır. Ön ayarlar biraz eski ama yeni cihazlar ekleyebilir ve kendi tercih ettiğiniz grupları oluşturabilirsiniz.

Bu aracı deneyin

Listemizi Tamamlıyoruz Duyarlı Tasarım Test Araçları ve Siteleri

Divi ile tasarım yaptığınızda, masaüstü, tablet ve telefon ekranları için düzenlerinizi ayarlama seçeneğiniz vardır. Divi'deki seçenekler son derece pratiktir ve her ekran boyutu için mizanpajınızın mükemmel görünmesine yardımcı olabilir. Ancak duyarlı Divi tasarımlarınızı destekleyen ekstra bir araç kullanmak her zaman sizin yararınızadır.

Hangi aracı kullanıyorsunuz? Burada bahsettik mi? Bu listedeki araçları, hepsi pratik ve kullanımı kolay olduğu için seçtik. Bazıları diğerlerinden daha iyidir ve ihtiyacınız olan şey tasarımınızın ne kadar karmaşık olduğuna bağlıdır. En sevdiğinizi bulana kadar deneyin ve hangisi olduğunu bize bildirin.

aurielaki / Shutterstock.com üzerinden Öne Çıkan Görsel