Duyarlı Düzenleri Test Etmek İçin 7 Ücretsiz Araç
Her web sitesi duyarlı bir yaklaşımla tasarlanmalıdır. Sizi doğru yolda tutmak için, bu duyarlı test araçlarının herhangi biriyle, erken ve sıklıkla test etmek, tasarımınızın tüm tarayıcılarda ve tüm görünüm boyutlarında doğru görünmesini sağlayacaktır.
Her modern web sitesi ihtiyacı duyarlı bir tasarım . Bu daha fazla çaba gerektiriyor, ancak sonuç olumlu.
Sitenizin her aşamada nasıl göründüğünü görmek için fikirlerinizi duyarlı tasarım araçlarıyla test etmenizi öneririz. Kullanışlılık konularını tek bir kullanışlı araçtan farklı ekran boyutlarında arayabilirsiniz.
Ve bu ücretsiz araçlar, hepsi süper kullanımı kolay olduğu için duyarlı testler için en iyi seçimlerim. Tüm bunların en iyisi, birçok cihaz boyutunu destekler; böylece, düzeninizin akıllı telefonlardan masaüstlerine nasıl bakması gerektiği konusunda iyi bir fikir edinebilirsiniz.
1. XRespond
XRespond app XRespond uygulaması Kendisine bir “sanal cihaz laboratuvarı” diyor ve bunun oldukça açık olduğunu söyleyebilirim.
Bu siteyle, herhangi bir web sitesinin çeşitli cihazlarda nasıl göründüğünü önizleyebilirsiniz. Site, tüm ekran formatlarını görmek için yana doğru kaydırmanız gereken uzun yatay bir tarzda çalışır.
Her ekranın üstündeki etiket size tam boyutu ve hangi cihazla eşleştiğini gösterir. Ayrıca, açılır menüden, belirli cihazları test etmek için geniş bir akıllı telefon, tablet ve dizüstü bilgisayar seçeneği vardır.
Bu açılır kapanır, sitenizin belirli monitörlerde nasıl görüneceğini görmek için özel bir genişlik / yükseklik ayarını bile destekler. Duyarlı tasarım için mükemmel bir test aracıdır ve cihaz stillerinde çok çeşitli destekler.
2. Sorumlu
Ayrıca beğenebileceğiniz bir benzer uygulama Responsinator .
Yatay kaydırma çubuğu kullanmak yerine, bu site her bir cihaz önizlemesini dikey bir sütunda listeler. Bu sayede her cihazda aşağı doğru ilerleyebilir ve her birinde siteyi önizleyebilirsiniz.
Cihazlar, hem portre hem de manzara önizlemeleriyle en yaygın iPhone'ları ve Android Nexus cihazlarını içerir. Ayrıca iPad cihaz önizlemelerini portre ve manzarada da bulabilirsiniz.
Başka bir harika özellik ise HTTP ve HTTPS arasındaki geçiş. Yanıtlayıcı, girdiğiniz URL'ye bağlı olarak sitelerin önizlemesini yapmak için iki tür sunar. SSL hatalarından kaçınmak için önizlemesini yaptığınız siteyle otomatik olarak eşleşecektir.
3. Duyarlı Tasarım Denetleyicisi
Bir web sitesinin gerçekten duyarlı olup olmadığını hızlı bir şekilde kontrol etmeniz mi gerekiyor? Sonra bunu kullanmayı dene Duyarlı Tasarım Denetleyicisi özel ekran boyutları için özel olarak yapılmıştır.
Bir URL girdikten sonra, duyarlı test alanı üzerinde tam kontrol sahibi olursunuz. Genişlik / yüksekliğini istediğiniz gibi değiştirebilir ve hatta kullanıyorsanız, belirli ekran oranlarıyla eşleştirmek için kullanabilirsiniz. en boy oranı aracı .
Kenar çubuğunda, Nexus tabletler, Kindles ve Google Pixel gibi daha yeni telefonlar gibi yaygın cihazlar için önceden tanımlı ekran boyutlarında bir ton bulacaksınız.
Site ayrıca 24 ″ genişliğe kadar masaüstü monitörleri ile geniş ekran boyutlarını desteklemektedir. Şaşırtıcı bir şekilde, bu büyük boyutlar küçük monitörlerde bile iyi çalışır çünkü ön izleme bölmesi, toplam piksel genişliğine değil, orana göre yeniden boyutlandırılır.
Bu nedenle, küçük MacBook ekranınızda 1920px monitörleri test etmek için mücadele ediyorsanız, bu araç iyi bir yer imi demektir.
4. Google Mobil Testi
Google, web yöneticileri için harika araçlarla dolu Mobil Uyumluluk Testi böyle bir örnek.
Bu test aracı gerçekten bir önizleyicidir ve UI hatalarını tespit etmenize yardımcı olmaz. Bunun yerine, sitenizdeki mobil cihazlarda sorunları saptamak için özel bir mobil araç.
Test çalıştıktan sonra ya mobil cihazlara uygun bir site olarak geçersiniz ya da başarısız olursunuz. Bu, tasarımcılar için biraz fazla genel bir uygulamadır, ancak Google, iyileştirme kullanabilecek sorunlu alanlara ve sayfa öğelerine dayalı ipuçları sunmaktadır.
Bunu güvenilir bir mobil test aracı olarak saklayın. Bu duyarlı test için tam bir kaynak değil, bilgi toplamak için harika bir yer ve belki de web üzerindeki en yetkili şirketten geliyor.
5. Matt Kersley'nin Duyarlı Aracı
Tasarımcı ve geliştirici Matt Kersley kendi serbest bıraktı test aracı duyarlı düzenler için. Bu, diğerlerinden çok daha basit ve birçok fırfırlar içermiyor.
Bunun yerine, 5 sabit genişliğe sahip düz bir satır içi site önizleyicisidir: 240px, 320px, 480px, 768px, 1024px.
Önizleme bölmeleri kaydırma çubuğuna sahiptir, böylece içeriğinizi zahmetsizce tarayabilirsiniz. Ancak, herhangi bir bağlantıyı tıklatamaz veya bölmelerdeki diğer sayfalara göz atamazsınız, bu nedenle tekil sayfaları test etmek için gerçekten en iyisi budur.
Ancak işi yapan basit bir araç için bu harika çalışıyor ve varsayılan olarak 240 piksel genişlik sunan birkaç test aracından biridir.
6. Duyarlı mıyım?
Pixel-perfect doğruluğunu arıyorsanız muhtemelen bu araca ihtiyacınız olmaz.
Bunun yerine Duyarlı mıyım? Web sitesi birkaç yaygın cihaz türünde hızlı kontroller ve önizlemeler için en iyi şekilde çalışır.
Bir web sitesi URL'sini girmeniz yeterlidir ve dört cihaz önizleme panosuna yüklenir: bir akıllı telefon, tablet, dizüstü bilgisayar ve masaüstü. Bunlar ölçeklendirilmeyecek, böylece siteye sadece bir oran olarak bakıyorsunuz.
Ancak bu, sitenizin ekran görüntülerini çeşitli cihazlarda nasıl göründüğünü göstermek için gerçekten harika. Oluşturma, ölçeklendirmede doğrudur ve düzgün bir şekilde oluşturulmasını sağlamak için tarayıcınıza güvenir.
Ayrıca bu araç, bulunduğunuz projeleri kontrol edebilmeniz için localhost adreslerini çalıştırmanıza izin verir. yerel olarak inşa etmek bilgisayarınızda.
7. Designmodo Duyarlı Testi
Gerçekten hoşlandığım bir başka araç Duyarlı Web Tasarım Test Cihazı Designmodo tarafından oluşturuldu. Bu ücretsiz araç, tarayıcınızdaki bir siteyi belirli genişliklere göre önizlemenizi sağlar.
Ancak bu araca bir tane daha serin ek olarak ızgara tabanlı sayfa kurulumu. Sayfanızı piksel noktaları için kontrol edebilir ve hatta ders çalışabilirsiniz. sayfanın ızgarası Bu webapp kullanarak.
Önceden tanımlanmış cihaz genişliklerinin yanı sıra, önizleme panelini, test ettiğiniz ekran genişliğine sığacak şekilde de sürükleyebilirsiniz. Boyutları manuel olarak girmeniz gerekiyorsa, genişlik / yükseklik için girdilere sahiptir.
Ancak, sağ üst köşedeki her cihaz simgesi, bu aracı, hayal edebileceğiniz herhangi bir cihazı kontrol etmek için mükemmel yapan düzinelerce ortak ekran boyutundan birini seçmenize izin verir.
