Duyarlı tasarımı ücretsiz olarak nasıl test edebilirsiniz? JavaScript komut dosyası kullanan duyarlı düzen Duyarlı tasarımın test edilmesi
Merhaba sevgili blog okuyucuları. Uyarlanabilir tasarımın Rus İnternet'te giderek daha popüler hale gelmesi şaşırtıcı değil. Ve tabii ki düzen tasarımcılarının da bunu incelemesi gerekiyor. Duyarlı tasarım yakında hemen hemen tüm web sitelerinde yer alacak çünkü giderek daha fazla insan mobil cihaz kullanıyor.
Ve şunu söylemek isterim ki, bu tür cihazlarda bu tür sitelerin okunması, onsuz olduğundan çok daha uygundur.
Bugün size web sitenizin uyarlanabilirliğini kontrol edebileceğiniz çok kullanışlı ve harika 5 hizmeti tanıtmak istiyorum.
Hadi gidelim.
Web sitenizin uyarlanabilirliğini kontrol edebileceğiniz 5 hizmet. www.responsivedesigntest.netSiteleri kontrol etmek için iyi bir hizmet. Hem tabletler hem de telefonlar için birçok ekran çözünürlüğü vardır.
mattkersley.comMatt Kersley'den bir web sitesini kontrol etmek için basit bir hizmet. Tüm popüler mobil cihaz çözünürlükleri de mevcuttur.
Herhangi bir siteyi kontrol edecek çok harika bir hizmet. Hem tasarım hem de işlevsellik çok hoşuma gitti.
Çok güzel ve işlevsel bir hizmet. Sitenin TV'de nasıl görüneceğini kontrol etmek bile mümkün :-)
Yazardan: "Bu tarayıcıyı yeniden boyutlandırmayı bırakın, yakında silinecek!" Bunu ne sıklıkla duyuyorsunuz? Tamam, belki o kadar sık değil, ama duyarlı web siteleri geliştirirseniz neden bahsettiğimi bilirsiniz: DOM veya CSS'yi her düzenlediğinizde, tarayıcının kenarını ileri geri sürükleyerek değişiklikleri test edersiniz. ve yanlışlıklar arıyoruz.
Genel olarak bu çabaların çoğu, farklı cihazların ekran boyutlarını taklit etme girişimidir.
Kurumsal geliştirme yapıyorsanız muhtemelen test etmeniz gereken çok sayıda şirket tarafından sağlanan cihazınız vardır. Çalıştığım yerde iPad'lerimiz, iPhone'larımız, bir veya iki tabletimiz, dizüstü bilgisayarlarımız ve masaüstü bilgisayarlarımız var. Eğer o lüksünüz yoksa elinizde olanı kullanmak zorundasınız.
Evde iki farklı dizüstü bilgisayarım var, iki farklı Android cihazlar: Kindle ve Nexus 7. Bu cihazları serbest çalışma geliştirmelerimi test etmek için kullanıyorum ancak bunun kapsamlı bir seçim olmadığı açık. Tam olarak değil iOS cihazları Her ne kadar erken benimseyenlerden biri olarak görülsem de, her yeni telefonu/tableti/tableti indirime girer girmez satın almayı planlamıyorum.
Peki bir geliştirici ne yapmalı? Neyse ki, çeşitli cihazların ekran boyutlarını simüle eden, giderek artan sayıda tarayıcı tabanlı araç var. Farklı araçlar elbette farklı özellikler ve farklı verimlilik düzeyleriyle birlikte gelir. Burada bunlardan bazılarına bakacağız.
Test amacıyla, oluşturduğum ilk gerçekten duyarlı web sitesi olan PajamasOnYourFeet.com'u aldım. EGrappler'daki geliştirici topluluğuna çok cömertçe ve ücretsiz olarak sağlanan Brownie HTML5 şablonunu temel alır.
Cevap veriyor muyum?Cevap veriyor muyum? – sitenizin dört farklı cihazda nasıl görüneceğine ilişkin tamamen kolay, anında önizleme. Dördü de iOS'tur ve geliştirici, web sitesinde seçimini açıklar. Herhangi bir kontrol veya seçim sunmuyor, yalnızca çok basit ve zarif bir ekran sunuyor. Pencere boyutlarını görüntüleyin:
Masaüstü - 1600 x 992 piksel, ölçeğe göre azalan (0,3181)
Dizüstü bilgisayar - 1280 x 802 piksel, azalan ölçek (0,277)
Tablet - 768 x 1024 piksel, ölçeğe göre azalan (0,219)
Mobil - 320 x 480 piksel, ölçeğe göre azalan (0,219)
Geliştiriciden alıntı yapmak gerekirse: “Bu bir test aracı değil, bunun gerçek cihazlarda yapılması çok önemli. Ancak bu, (benim için) hızlı ekran görüntüleri almaya ve müşteri toplantılarında ne demek istediğinizi "ayrıntıya dökmek" için görsel bir fırsat sağlamaya yönelik bir araçtır."
Deviceponsive, Duyarlı mıyım sitesine benzer mi? sitenizi basit ve düzenli bir şekilde görüntüleyen ancak cihazlar söz konusu olduğunda hiçbir kontrolü veya kullanılabilir seçeneği olmayan bir site. Hepsi aynı anda uzun bir sayfada gösteriliyor. İlginç bir özelliği var - arka plan rengini düzenleyerek ve kendi logonuzu ekleyerek başlığı değiştirebilir ve ardından "yazdırabilirsiniz". Bu sayede bir anlamda müşteriye ekran görüntülerini gösterirken sitenizi markalaştırabilirsiniz. Bu sitede simüle edilen cihazlar ve ekran boyutları:
MacBook-1280x800
iPad (dikey) - 768 x 1024
iPad (yatay) - 1024 x 768
Kindle (dikey) - 600 x 1024
Kindle (manzara) - 1024 x 600
iPhone (dikey yönlendirme) - 320 x 480
iPhone (yatay) - 480 x 320
Galaksi (portre) - 240 x 320
Galaksi(manzara) - 320 x 240
Çoğu benzer araçta olduğu gibi, küçük cihazlarda kaydırma çubukları görünür. Gerçek bir cihazda görünmezler, ancak dokunmatik olmayan bir cihazda test görünümünü kaydırabilmek için bazı tavizler vermeniz gerekir.
Cihaza duyarlı test gibi, duyarlı test de sitenizi birden fazla cihazda görüntüler ancak hepsini tek bir sayfada aynı anda göstermek yerine, sayfanın üst kısmındaki basit bir menüden hangi cihazı görüntüleyeceğinizi seçersiniz. Bu siteyi orta büyüklükte bir dizüstü bilgisayarda gezerken, sayfayı küçültmenin harika sonuç verdiğini ve sitenin tamamını test edilen cihazın penceresinde görmenize olanak tanıdığını gördüm.
Burada büyük bir monitörden on üç farklı görüntüleme penceresi sunuluyor masaüstü bilgisayar sözde "Berbat Android"e (dürüst olmak gerekirse, ayrıca "" adlı bir seçeneğe de sahipler) Android daha iyi"(Daha güzel Android).
Firefox bir kez daha bu sitede biraz tökezledi. Ekran görüntüsünde, yeşil başlık ile beyaz arka plana sahip içerik alanı arasında, görüntü kaydırıcısının görünmesi gereken yerde yalnızca mavi bir çubuğun bulunduğuna dikkat edin.
Önceki ikisine çok benziyor ve responsive.is'i onlardan ayıran tek şey, ekranın bir cihazdan diğerine pürüzsüz animasyonunun yanı sıra sitenin gayrimenkulünün görünüm alanından düştüğünü gösteren yarı saydam bir kaplamadır. .
Burada kullanılabilen tek cihaz seçeneği, tarayıcı pencerenizi dolduran ve siteyi gittiğinizde göreceğiniz gibi gösteren otomatik cihazlardır: Masaüstü; Tablet (yatay yönlendirme); Tablet (dikey yönlendirme); Akıllı telefon (yatay yönlendirme) ve Akıllı Telefon (dikey yönlendirme), piksel boyutları verilmemiştir.
Bir kez daha, birkaç farklı özellik ve seçenek Screenqueries'i diğer sitelerden farklı kılmaktadır. Portre ve manzara modlarını değiştirmek için ayrı bir öğeye sahip 14 telefon ve 12 tablet cihazı bulunmaktadır. Bunlar, boyutları test ekranının sağ alt kısmında gösterilen, numaralı bir piksel ızgarasında görüntülenir. Özel boyutları test edebilmeniz için ekranın kenarları sürüklenebilir. Test alanının üzerine sürükleyin veya tıklayın; arka plan daha az karmaşık bir görünümle griye dönecektir.
İlginç özellik bu site - birkaç cihaz için, sitenizi bu cihaza atanmış krom tarayıcıya sarılmış olarak gösteren bir "Gerçek görünüm" seçeneği vardır. Ne yazık ki, buna zaten alıştım, Firefox test sitesinin resim kaydırıcısını görüntüleyemiyor. Endişelenmeyin, tarayıcılar söz konusu olduğunda gerçekten Firefox'u tercih ediyorum ama neyse ki seçeneklerimiz var.
Screenfly gerçekten kullanılabilirlik faktörünü artırıyor. 10 inçlik dizüstü bilgisayardan 24 inçlik masaüstüne kadar tabletlerden daha büyük dokuz cihaz, beş tablet, dokuz akıllı telefon, üç TV boyutu ve özel ekran boyutu seçeneği sunuyor. Seçtiğiniz herhangi bir seçenek, menüdeki ayrı bir kontrol kullanılarak dikey veya yatay yönde döndürülebilir. Kaydırmaya izin verip vermeyeceğinizi seçebilir ve tek bir tıklamayla paylaşılabilir bir bağlantı oluşturabilirsiniz.
Site, piksel boyutlandırma bilgilerini sunması açısından proaktif olarak faydalıdır. Menüdeki her cihaz bir ad ve piksel boyutlarıyla birlikte gösterilir, kendi tarayıcı pencerenizin boyutu pencerenin sağ üst köşesine yakın bir yerde gösterilir ve seçilen seçeneğin boyutları ekranın altındaki alt bilgide, Test edilen sitenin URL'si. Bu küçük özellik, ekran görüntülerini belgelemeyi ve istemcilerle bilgi paylaşmayı kolaylaştırır.
Yukarıdakilerin tümü onu zaten ideal bir araç haline getirebilirdi, ancak Screenfly geliştiricileri onu birinci sınıf hale getirme fırsatını buldular ve bir proxy sunucu özelliği sağladılar. Web sitelerinden alıntı: “Screenfly, web sitelerini görüntülerken cihazları taklit etmek için bir proxy sunucusu kullanabilir. Proxy, seçtiğiniz cihazların kullanıcı aracısı dizesini simüle eder, ancak bu cihazların davranışını simüle etmez." Burada ele alınan diğer tüm araçlar yalnızca CSS ile ilgilidir. Screenfly, kullanıcı aracısı dizesine dayalı olarak test yapılmasına izin veren tek kişidir.
Mevcut siteyle oluşturduğum bir siteyi bu şekilde test ettikten sonra mobil versiyon Sonuçların oldukça iyi olduğunu söyleyebilirim. Her şey tam olarak beklediğim gibi görüntülendi ve özellikler test edilebilirdi. Kullanıcı aracısı dizelerini test etmenin geleneksel hale geldiğini söylemek gerekir, ancak bu site uzun zaman önce yapıldı ve proxy özelliğinin gerçekten de buna çok yararlı bir katkı olduğu ortaya çıktı.
Yani duyarlı web sitelerini test etmek için pek çok kaynağın mevcut olduğunu görebilirsiniz. Benzersiz özellikler bakımından farklılık gösterirler; hangi siteleri kullanacağınız kişisel tercihlerinize ve gereksinimlerinize bağlı olacaktır ve sizi bu siteleri keşfetmeniz ve denemeniz konusunda cesaretlendirmeye çalışıyorum. Biz geliştiriciler gerçekten ne kadar çok şeye sahipsek kullanışlı araçlar, çok daha iyi.
Bir çevrimiçi mağazanın mobil cihazlar için optimize edilmesi gerekir. Bu sorun, sitenin herhangi bir platformda doğru şekilde görüntülenmesini sağlayan uyarlanabilir tasarım kullanılarak çözülmektedir. Bununla birlikte, duyarlı tasarımın uygulanması standart bir takım tuzakları da beraberinde getirir. Çevrimiçi alışveriş sitelerinde karşılaşılan en yaygın 8 sorunu listeleyelim.
Ziyaretçi davranışı analizlerinin ihmal edilmesiMobil segmente girme telaşı, perakendecileri, ziyaretçi davranışına ilişkin ciddi analizler yapmadan bir web sitesi tasarlamaya zorluyor. Ziyaretçi davranışının analizi, hazırlığın en önemli aşamasıdır; bu, en popüler mobil cihazları belirlemenize ve öncelikle siteyi onlar için optimize etmenize olanak tanır. Analytics, en "popüler" kullanıcı eyleminin (örneğin, bir ürün görselinin büyütülmesi) belirlenmesine yardımcı olur; mobil ziyaretçilerin dönüşüm oranını vb. gösterir. Bu veriler, kullanıcı davranışı tercihleri hakkında bilgi sağlayacak ve mobil hedef kitlenin beklentilerinin karşılanmasına yardımcı olacaktır. Analiz mobil trafik Sonuçları sistematik ve tutarlı bir şekilde uygulamak, siteyi müşterilerin ihtiyaçlarını karşılayacak şekilde sonuçlandırmak ve optimize etmek gerekir.
Masaüstü Mağazası TasarlamaTipik olarak bir çevrimiçi mağazanın masaüstü sürümü, mobil ekranlar için yeniden tasarlanır, ancak bir mobil cihazın küçük ekranını alıp masaüstüne ölçeklendirmek daha mantıklıdır. Perakendeciler genellikle masaüstü için tasarlanmış bir web sitesini akıllı telefon boyutuna getirmenin teknik sorunlarının farkında değiller. 
için tasarım başlatılıyor mobil ekranlar, mobil kullanıcı deneyimine odaklanırsınız. Sonuç olarak, hem masaüstü hem de mobil kanallar için tasarım yapmanız daha kolay olacaktır.
Bir çevrimiçi mağazanın mobil düzenini test etmek, lansmanın zorunlu bir aşamasıdır, ancak çoğu mağaza sahibi bunu genellikle ihmal eder ve test etmeden piyasaya sürer. Sonuç olarak, sitenin mobil cihazlara yönelik canlı sürümünde, satın alma ve sipariş verme sürecinde bile hatalar ortaya çıkabilir.
Uyarlanabilir tasarımın eksiklikleri, bir çevrimiçi mağazanın ön testleriyle kolayca tespit edilebilir, ancak çoğu satıcı bunun için kaynaklara sahip değildir. Para kaybetme riskini azaltmak için sitedeki önemli kullanıcı rotalarını ana tarayıcılarda (Chrome, IE, Firefox, Safari ve) test edin. işletim sistemleri– Popüler Windows, Mac OS, Android, IOS mobil cihazlar. Her değişiklik yaptığınızda test edin; TarayıcıStack veya Viewport Resizer gibi hizmetler test süresini birkaç saate indirmenize yardımcı olabilir.
Mobil ekranlar için küçük öğelerÇevrimiçi mağaza sahipleri, akıllı telefon ekranına daha fazla alan sığdırmak amacıyla "harekete geçirici mesaj" düğmelerinin boyutundan tasarruf ediyor. Kullanıcıları Satın Al düğmesini tıklamak için yakınlaştırmaya zorlamayın ve küçük öğeleri birbirine çok yakın yerleştirmeyin, aksi takdirde kullanıcılarınız daha uygun bir siteye gitmeyi seçecektir. Büyük gezinme öğelerine ve harekete geçirici mesaj düğme boyutlarına sahip arayüzler tasarlayın.
Yavaş sayfa yükleme hızıMobil kitleler hızlı siteleri ve minimum yükleme sürelerini sever. Bileşenlerinizi değerlendirin mobil sayfalar– resimler, düğmeler, metinler, komut dosyaları – bunların mobil cihazlar için optimize edilmesi gerekir. Google, SERP'lerinde sayfa yükleme süresini hesaba katarak mobil siteleri sıralıyor ve onlara tercihi en üst sıralarda veriyor, böylece "hafif" siteler ciddi bir ek avantaj elde ediyor.
İçeriği farklı sekmelere ayırın; örneğin bir ürün sayfası yalnızca temel bir görsel, açıklama, fiyat ve "Satın Al" düğmesi içerebilir. Müşteri incelemeleri ve videolar ayrı bir sekmeye yerleştirilebilir ve sayfanın ana bölümünün "ağırlığını" azaltabilir. İçeriğe ek olarak, yükleme hızını etkileyen diğer öğeleri de optimize edin - CSS dosyaları, resimler ve komut dosyaları, yalnızca gerekli verileri gönderin. Kaynak dosyalarının boyutunu ve yükleme sürelerini azaltan araçlar size bu konuda yardımcı olacaktır: Uglify veya JSCompress.
Mobil kullanıcılar için içeriği kırpmaÇoğu zaman geliştiriciler, mobil cihazlara yüklemenin daha hızlı olması için içeriğin bir kısmını gizler. Ancak çoğu zaman sayfa boyutu gerçekte küçültülmez ve içerik kullanıcıya görüntülenmez. Mağazanız, mobil ziyaretçiler için sayfa ağırlığını ve yükleme sürelerini azaltarak dinamik bir sayfa oluşturabilmelidir. Ayrıca mobil kullanıcılara daha az içerik vermek kötüdür ve tüketici deneyimini olumsuz etkiler. Genellikle satın alma sürecinde kullandıkları farklı cihazlar, çevrimiçi alışveriş yapanların yaklaşık %90'ı bunu yapıyor. Bunları duyarlı tasarım yöntemleriyle sınırlamak büyük bir hatadır.
Yalnızca tek bir çözünürlükteki görüntüleri desteklerResponsive tasarıma sahip iyi bir web sitesi, cihazın türüne bağlı olarak görsellerin çözünürlüğünü otomatik olarak değiştirir; ağır görseller yükleme süresini artırır. Görüntü boyutlarını sığacak şekilde otomatik olarak ayarlamanın birkaç yolu vardır özel cihaz. "Esnek" görüntüler (akışkan görüntüler), bir görüntüyü, onu içeren öğenin genişliğine bağlı olarak sıkıştırmanıza ve uzatmanıza olanak tanıyan CSS tabanlı bir yöntemdir veya her biri için gerekli boyutta bir görüntü yüklemenize olanak tanıyan bir HTML5 öğesidir. cihazın türü.
"Yanıt vermeyen" e-postalarSitenin kendisinde her şey yolunda gidiyor; duyarlı tasarım masaüstü bilgisayarlarda ve mobil cihazlarda iyi çalışıyor. Ancak e-postalar yanıt vermiyor ve mobil kullanıcılar, tamamladıkları satın alma işlemlerine ulaşmak için sipariş ayrıntılarını kontrol etmek veya sonsuz sayıda önerilen ürünler listesinde gezinmek zorunda kalıyor. 
E-postalar önemli bir müşteri temas noktasıdır, bu nedenle duyarlı e-posta tasarımını mobil stratejinize entegre edin. Mektuplarınızı ve haber bültenlerinizi tasarlayın ve test edin; mektup şablonları "hafif" olmalı ve yalnızca önemli bilgileri içermelidir.
Web teknolojilerinin gelişmesiyle birlikte web geliştirmeye yönelik gereksinimler de artmaktadır. Web geliştiricileri, düzen tasarımcıları veya bugün adlandırıldığı şekliyle ön uç geliştiricileri en fazla baskıyı hissediyor.
Bu yazıda biraz uyarlanabilir düzenden bahsedeceğiz çünkü bu "numara" artık çok pahalı. Uyarlanabilir düzen söz konusu olduğunda, her düzeydeki düzen tasarımcıları müşterilere veya proje yöneticilerine en hafif deyimle öfkeyle bakarlar çünkü bunun ne kadar zor olduğunu anlarlar.
Birçok kişi uyarlanabilir düzeni esnek düzen ile karıştırmaya başlar; bu, acemi düzen tasarımcılarının çok yaygın bir hatasıdır. Sorduğunuz fark nedir?
Öncelikle, tabiri caizse, tüm noktaları açıklığa kavuşturmak için tüm noktaları koyalım ve ne tür düzenlerin olduğuna bakalım.
4 tür düzen vardır:
Her türü daha ayrıntılı olarak ele alalım.
1. Sabit düzen
Blokların genişlikleri değişmez. Düşük çözünürlüklü monitörlerde yatay bir kaydırma çubuğu görünür.
#temnyi, #svetlyi ( genişlik: 440px; )
2. Kauçuk düzeni
Blokların genişliği, tarayıcı penceresinin boyutuna bağlı olarak değişir. Maksimum ve minimum değerleri alabilir (max-width özelliği). Ancak ekran küçüldükçe %50'den %100'e %50 yapamazsınız.
#temnyi, #svetlyi ( genişlik: %50; )
3. Uyarlanabilir düzen
@media veya komut dosyaları kullanılarak uygulanır. Bilinen belirli cihazlar (320, 768, 1024 vb.) için özelleştirilmiştir. Belirtilen seviyelerden birine ulaştıktan sonra herhangi bir değişiklik sarsıntılarla meydana gelir. Kesinlikle uygun
#temnyi, #svetlyi ( genişlik: 430px; ) @media (maks. genişlik: 1220 piksel) ( #temnyi, #svetlyi ( genişlik: 380 piksel; )) @media (maks. genişlik: 1120 piksel) ( #temnyi, #svetlyi ( genişlik : 325px; )) @media (maks-genişlik: 680px) ( #temnyi, #svetlyi ( genişlik: 200px; ))
4. Duyarlı düzen
Bu, akıcı ve uyarlanabilir düzenin bir birleşimidir. Uygulanması en zor olanıdır. Ancak sonuç en kabul edilebilir olanıdır. Sitenin her cihaza uyum sağlayacağını söylemek yanlış olmaz.
#temnyi, #svetlyi ( genişlik: %50; ) @media (maks. genişlik: 1006 piksel) ( #temnyi, #svetlyi ( genişlik: %100; ))
Bu yüzden 4 tür web sitesi düzeninden bahsettik. Artık mucizevi uyarlanabilir düzen komut dosyamızın zamanı geldi. Umarım bir şey açıklamama gerek yoktur, senaryo oldukça basittir, sadece şunu söylüyoruz, değiştirdiğinizde bir yerde bazı bloklar karışacak ve bu kadar. Elbette bu CSS stilleri aracılığıyla da mümkün ancak tüm yöntemleri bilmeniz gerekiyor; bazen bazı yerlerde bazıları işe yaramayabilir, bazıları ise tam olarak doğru sonuç verebilir.
Uyarlanabilir düzen komut dosyası:
/* Kodda rahatça kullanabilmek için monogest sınıflarını koyabileceğiniz bir değişken oluşturalım. Yani, burada onları bir kez tespit ediyor ve hepsi bu, her numuneden önce değil! bu kullanışlı bir özelliktir */ var my = ( window: $(window) ); /*Aslında fonksiyonun kendisi*/ $(window).resize(function () ( /*Pencerenin genişliğini belirleyip bunu genişlik değişkenine koyan bir değişken*/ var width = my.window.width( ); /*pencere dönüştürme koşulu, yani pencere genişliği belirli bir boyuta ulaştığında yürütülen bir koşul */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
Bu kadar. Sorularınız olursa yorumlara yazın,
