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 :-)
Duyarlı bir web sitesi nasıl test edilir? Web sitelerini test ederken ne gibi sorunlar ortaya çıkıyor? farklı cihazlar? Bir web sitesini masaüstü monitörde test etmenin cep telefonu gibi elde taşınır bir cihazda test etmekten farkı nedir? Duyarlı web sitelerini test etmek için hangi araçları kullanabiliriz? Bizim
Duyarlı web tasarımı nedir?Duyarlı web tasarımı (RWD), minimum boyut, kaydırma ve kaydırma ile okunması ve gezinmesi kolay olan en iyi deneyimi sağlama hedefiyle web siteleri oluşturmayı amaçlayan bir web tasarımı yaklaşımının tanımıdır. geniş aralık cihazlar (masaüstünden bilgisayar monitörleri cep telefonlarına).
RWD ile oluşturulan bir site, akıcı, orantılı ızgaralar, duyarlı görüntüler ve CSS3 medya sorgularını kullanarak aşağıdaki yöntemlerle düzenini görüntüleme ortamına uyarlar:
- Değişken ızgara konsepti, sayfa öğesi boyutlarının piksel veya nokta gibi mutlak birimler yerine yüzde gibi göreli birimler cinsinden olmasını gerektirir.
- Esnek görseller içeren öğenin dışında oluşturulmasını önlemek için ilgili birimler halinde de değerlendirilir.
- Medya sorguları, bir sayfanın, sitenin görüntülendiği cihazın özelliklerine (çoğunlukla tarayıcı genişliğine) bağlı olarak farklı CSS stil kuralları kullanmasına olanak tanır.
Artık pek çok kişi web sitelerine erişmek için cep telefonlarını veya tabletlerini kullanıyor; bu nedenle, duyarlı web tasarımını test etmek önemlidir çünkü mobil cihazlardaki kullanıcı deneyimi, masaüstü bilgisayarlardan çok farklıdır.
Uyumlu bir web sitesini test etmenin belki de en zorlu kısmı, web sitesinin birden fazla cihaz ve platformda beklendiği gibi performans göstermesidir, ancak aslında piyasadaki her mobil cihazda test yapmak çoğumuz için pratik değildir.
Duyarlı web tasarımını test etmeye başlayan birçok test uzmanı genellikle tarayıcı penceresini görünüm boyutuna uyacak şekilde yeniden boyutlandırarak başlar cep telefonu, tablet ve masaüstü. Bu yöntem genellikle bir web sitesinin farklı görüntüleme bağlantı noktalarında hızlı bir şekilde görsel olarak incelenmesi için uygundur ve tarayıcı penceresini küçülttüğümüzde veya büyüttüğümüzde altta yatan görüntüleme sorunlarını belirlememize yardımcı olur.
Ancak gerçek mobil cihazlarda test yapmak tamamen farklı bir deneyimdir.
Emülatörleri kullanma
Mobil emülatör, web sitelerinin ve uygulamaların mobil ortamda nasıl görüntüleneceğini ve çalışacağını gösteren web tabanlı bir simülasyondur.
Emülatörler ihtiyacınız olan test araçlarını size tam olarak sağlayamasa da, bir web sitesinin üst düzey işlevselliğini test etmek için hâlâ uygun maliyetli bir çözümdür.
Google Geliştirici Araçları
DevTools'ta Google Chrome Yanıt veren projeleri test etmek ve hata ayıklamak için kullanışlı araçlarla dolu, cihaz modu adı verilen bir özellik vardır.
Ekranınızı kolayca yeniden boyutlandıran diğer birçok duyarlı tasarım test aracının aksine, bu araç aslında mobil cihaz deneyimini, özellikle de dokunma ve kaydırma gibi dokunma etkileşimlerini doğrudan web tarayıcınızın içinde taklit eder.
Bazı genel kurallar duyarlı web tasarımını test etmek:
Tarayıcı penceresini küçültürken ve genişletirken veya mobil cihazınızı döndürürken modüllerin konumunu kontrol edin. Geçiş yaparken çeşitli modüller kaybolabilir masaüstü bilgisayar mobilde, ancak hangi modüllerin hangi görünüm alanında görünmesi gerektiğini tam olarak bildiğinizden emin olun.
Sonuç olarak
Web uygulamanızın nasıl kullanıldığını öğrenin. Alabilirsin büyük miktar Müşterilerinizin web sitenize erişmek için hangi cihazları kullandığını görmek için Google Analytics aracından bilgi alın. Temel kontrolleri ve üst düzey işlevsel testleri gerçekleştirmek için otomatik araçları ve emülatörleri kullanın ve bunu gerçek manuel cihaz testiyle birleştirin.
Web teknolojilerinin gelişmesiyle birlikte web geliştirmeye yönelik gereksinimler de artmaktadır. Web geliştiricileri, düzen tasarımcıları veya günümüzde ön uç geliştiricileri olarak adlandırıldıkları şekliyle en fazla baskıyı hissediyorlar.
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 seviyedeki 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 (maksimum 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 şu şekilde mümkündür: CSS stilleri, ancak tüm yöntemleri bilmeniz gerekir; bazen bazı yerlerde bazıları işe yaramayabilir, bazıları ise tam olarak doğru olabilir.
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.< 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") } });
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())
Hepsi bu. Sorularınız olursa yorumlara yazı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.: 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ı özelliklerle 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, hızlı ekran görüntüleri almak (benim için) ve müşteri toplantılarında ne demek istediğinizi "ayrıntıya çıkarmak" için görsel bir fırsat sunan 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 (yatay) - 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. İÇİNDE gerçek cihaz 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 ettiğim cihazın penceresi içinde görmenize olanak tanıdığını gördüm.
Burada on üç farklı görüntüleme penceresi mevcuttur: büyük monitör masaüstü bilgisayardan sözde “Berbat Android”e (adil olmak gerekirse, aynı zamanda “Berbat Android” 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 benzer 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 portre arasında geçiş yapmak için ayrı bir öğeye sahip 14 telefon ve 12 tablet cihazı bulunmaktadır. yatay yönlendirme. 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 sitenin – birden fazla cihaz için sitenizi o cihaza uygun görünümde gösteren bir “Gerçek görünüm” seçeneği vardır krom tarayıcı. 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 kullanılarak dikey veya yatay olarak döndürülebilir. bireysel eleman menü kontrolleri. 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 getiriyordu, ancak Screenfly geliştiricileri bunu basitleştirme fırsatı buldu üst sınıf ve proxy özelliğini sağladı. 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; sizi bu siteleri keşfetmeniz ve denemeniz konusunda cesaretlendirmeye çalışıyorum. Biz geliştiriciler gerçekten ne kadar çok şeye sahipsek faydalı araçlar, daha iyi.
Sayfa düzenini büyük ölçüde kolaylaştıran ve hızlandıran veya gibi çerçeveler.
bir web sayfasının tüm cihazlarda ve monitör uzantılarında mükemmel görüntülenmesini sağlar. Muhtemelen her düzen tasarımcısı, düzenlerini test etmek için olası tüm ekran uzantılarına sahip tam bir cihaz setine sahip değildir. Bu şaşırtıcı değil çünkü günümüzde teknoloji ucuz değil.
Bu yüzden. Dağlarca cep telefonu ve tablet satın almak bir seçenek değil; iflas edeceğiz. Ne yapalım? Bu görevler için uyarlanabilir web sitelerini test etmeye yönelik hizmetler geliştirilmiştir. Çalışma prensibi çok basittir. Çoğu zaman sayfanın açıldığı yerde belirli bir boyutta bir çerçeve bulunur. Etki, TV'de görüntülerkenkiyle yaklaşık olarak aynıdır. mobil cihaz. Hizmetin sayfanın görüntüsünü bir telefonda veya tablette her zaman doğru şekilde göstermeyeceğini belirtmek isterim. Kodlama yaparken hizmetleri kullanarak test etmelisiniz, ancak tamamlandıktan sonra mümkünse en yaygın cihazlarda test etmelisiniz.
Bu yüzden. Dikkatiniz için en iyi araçlar uyarlanabilir web sitelerini test etmek için.
Adobe'nin duyarlı web sitelerini test etmeye yönelik bir araç. Kullanmak için bilgisayarınıza yüklemeniz gerekmektedir.
Program, cihazlarınızı WIFI aracılığıyla senkronize etmenize ve siteyi cihazınızda görüntüleneceği şekilde görüntülemenize olanak tanır. Açık şu anda Aşağıdaki işletim sistemlerine sahip cihazlar desteklenir: iOS, Android, Kindle Fire.