Duyarlı tasarım testleri için javascript kullanma. Duyarlı web tasarımı nasıl test edilir? Mobil ekranlar için küçük öğeler

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.

Mobil 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.

Tipik 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 çoğu zaman farkına varmaz teknik problemler Masaüstü için tasarlanmış bir siteyi akıllı telefon boyutuna getirmek.
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 mobil cihazlarda Windows, Mac OS, Android, IOS. 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.

Ç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.

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.

Ç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. Tipik olarak, çevrimiçi alışveriş yapanların yaklaşık %90'ının yaptığı gibi, satın alma işlemi sırasında farklı cihazlar kullanırlar. Bunları duyarlı tasarım yöntemleriyle sınırlamak büyük bir hatadır.

Responsive 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ü.

Sitenin 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 Bu, müşteriyle önemli bir iletişim noktasıdır; 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.

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. Hiçbir iOS cihazı yok ve her ne kadar erken benimseyen biri olarak görülsem de, her yeni telefonu/tableti/tableti satışa çıkar çıkmaz 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? – sitenizin dörtte nasıl görüneceğine ilişkin tamamen kolay, anında önizleme farklı cihazlar. 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 ettiğim 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. .

Sadece olanlar mevcut seçenekler buradaki cihazlar, tarayıcı pencerenizi dolduran ve siteye gittiğinizde göreceğiniz gibi siteyi 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. İşte 14 telefon ve 12 tablet cihazlar portre ve portre arasında geçiş yapmak için ayrı bir öğeye sahip 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.

Bu sitenin ilginç bir özelliği, birden fazla cihaz için sitenizi o cihaza uygun görünümde gösteren bir "Gerçek görünüm" seçeneğinin bulunmasıdı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 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.

Oluşturduğum bir web sitesini mevcut mobil versiyonuyla bu şekilde test ettiğimde 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 yararlı araçlara ne kadar sahip olursak o kadar iyi.

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.

Siteleri kontrol etmek için iyi bir hizmet. Hem tabletler hem de telefonlar için birçok ekran çözünürlüğü vardır.

Matt 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 :-)

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 mucize senaryomuzun zamanı geldi uyarlanabilir düzen. 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. 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,

Bugün artık kimseyi ihtiyaç konusunda ikna etmeye gerek yok mobil versiyon alan. Sonuçta, her geçen gün akıllı telefonlardan ve tabletlerden daha fazla ziyaretçi geliyor. Bu yazının yazıldığı an itibarıyla blog ziyaretçilerimin yaklaşık %20'si gezinmek için mobil cihaz kullanıyor. Yani her beş kişiden biri web sitemi telefon veya tabletten ziyaret ediyor.

Birkaç yıl önce bu tür ziyaretçileri düşünmüyordum bile, ancak sayıları %10'u aştığında toplam sayısı Uyarlanabilir düzeni kullanmaya başladım. Bu, içeriğin mobil cihazlarda doğru şekilde görüntülenmesini ve hem ziyaretçiler hem de kullanıcılar için siteye olan bağlılığın artırılmasını mümkün kıldı. arama motorları.

Bir web sitesinin mobil versiyonu ile duyarlı tasarım aynı şey değildir. Bu yazımızda site tasarımının ziyaretçinin cihazının ekran çözünürlüğüne göre değiştiği durumlarda uyarlanabilir düzenin test edilmesinden bahsedeceğiz.

Sitenizin mobil cihazlarda doğru görüntülendiğinden emin olmak için kontrol etmeniz gerekir ve bunun için birkaç tane vardır. yararlı hizmetler ve araçlar.

Popüler İnternet tarayıcısı (tarayıcı) Mozilla Firefox Web sitesi tasarımının mobil cihazlarda görüntülenmeye uygunluğunu kontrol etmek için yerleşik araçlarla donatılmıştır. Kullanmak için “Menü” - “Geliştirme” - “Uyarlanabilir Tasarım” a gidin. Veya klavyenizdeki üç tuşa aynı anda basın ++[M]

Bunun gibi bir şey görmelisiniz:

Ekran çözünürlüğünü ve yönünü değiştirerek sitenizin mobil ziyaretçilere nasıl görüntüleneceğini kontrol edebilirsiniz.

Tarayıcı Google Chrome Ayrıca site tasarımının uyarlanabilirliğini kontrol etmek için yerleşik desteğe de sahiptir. Bunu yapmak için menüye gidin, “Ek araçlar”ı ve ardından “geliştirici araçları”nı seçin (veya tuşuna basın).

Bundan sonra duyarlı tasarım simgesine tıklayın (veya aynı anda klavyede ++[M] tuşuna basın):

Ekranın ortasında sitenizin mobil cihaz ekranlarında nasıl görüntüleneceğini göreceksiniz:

Bildiğiniz gibi, iki dünya arama lideri Google ve Yandex'in, bir web sitesinin mobil cihaz ekranlarında nasıl görünmesi gerektiği konusunda kendi utanmaz fikirleri var. Bir sitenin mobil ziyaretçiler için sakıncalı olduğu düşünülürse arama sonuçlarında sıralaması düşer. Dolayısıyla, SEO açısından bakıldığında, mobil ziyaretçileri kaybetmek istemiyorsanız, yalnızca duyarlı bir tasarıma sahip olmanız gerekmez, aynı zamanda arama motorlarının da onu duyarlı, yani mobil uyumlu olarak değerlendirmesi gerekir.

Kullanarak uyarlanabilirliği kontrol etmek için Google hizmeti aşağıdaki adrese gidin ve sitenizin adını girin: https://www.google.com/webmasters/tools/mobile-friends/.

Blogumu kontrol etmenin sonucu şöyle görünüyor:

Yandex'de durum biraz daha karmaşıktır; kontrol etmek için Yandex.Webmaster hizmetine kaydolmanız ve arayüzün beta sürümünü kullanmanız gerekir:

Bu hizmetlerin ana görevi web sitenizin nasıl görüneceğini sunmaktır (göstermektir). mobil cihaz. Bu tür işlevlere sahip pek çok site var. Bunlardan sadece birkaçını vereceğim. Çoğu durumda, FireFox ve Chrome'un yerleşik işlevlerini kopyalarlar.

Uyarlanabilirliği göstermek için kendi hizmeti olan Google ile tekrar başlayacağım: http://design.google.com/resizer/#

İkinci güzel hizmet http://quirktools.com/screenfly/'dir. Web sitenizin TV'de bile nasıl görünebileceğini size gösterecektir!

Peki, "yerli üreticiyi" rahatsız etmemek için başka bir siteye örnek vereceğim: http://symby.ru/adaptest/. Bir sayfada farklı ekran çözünürlüklerine sahip çeşitli görünümler göreceksiniz.

Sitenizin duyarlı olduğundan ve çoğu cihazda doğru şekilde görüntülendiğinden emin olduktan sonra hızını kontrol etmelisiniz. Yine mobil ziyaretçilerle ilgili olarak.

Google her zamanki gibi diğerlerinden önde: https://developers.google.com/speed/pagespeed/insights/. Bu hizmet size sitenin telefon ekranında nasıl göründüğünü gösterecek ve mobil cihazlarda yükleme hızını artırmak için kodu optimize etmeye yönelik öneriler verecektir.

Sonuç olarak, bir sitenin yalnızca mobil cihazda nasıl göründüğünü değil aynı zamanda hızını da gösterecek bir hizmet örneği vereceğim: http://www.webpagetest.org/

Bana göre günlük çalışmalarda site tasarımında değişiklik yaparken yerleşik yetenekleri kullanmak daha kolaydır. FireFox tarayıcıları ve Chrome. Bundan sonra elbette arama motorlarının tasarımınıza olan sadakatini kontrol etmeniz gerekiyor. Ve ancak o zaman ruhunuzu sakinleştirmek veya gösteriş yapmak için çevrimiçi hizmetleri kullanabilirsiniz.