Okuma süresi 6 dakika
Web sitelerini yanıt verebilirlik açısından test etmek neden önemlidir? Yandex.Metrica'ya göre Rusya'da mobil cihaz kullananların sayısı %50'ye yaklaşıyor ve sürekli artıyor.
İlişkin arama motorları mobil düzenlemeyi kullanıcılar için daha uygun hale getirmeye çalışın. Şubat 2015'te Google, duyarlı veya mobil bir sürüme sahip olmanın sıralamalar üzerinde olumlu bir etkisi olduğunu belirtiyor. Tam bir yıl sonra, Şubat 2016'da Yandex aynı şeyi duyurdu.
Duyarlı bir web sitesi hangi özelliklere sahip olmalıdır?
- Yatay kaydırma yok.
- Görünüm alanı meta etiketi doğru.
- Etkileşimli öğeler (bağlantılar, düğmeler, formlar vb.) birbirine çok yakın değildir.
- Flash öğelerinin eksikliği, Silverlight eklentileri.
- Bölümler arasında rahat gezinme.
- İçerik (metin ve resimler) ekran boyutuna uyarlanır ve büyütülmeden okunur.
Site uyarlanabilirliğinin çevrimiçi kontrolü için hizmetler
- Google Mobil Dostu - https://search.google.com/test/mobile-friendly
Sitenin ilk ekranının bir akıllı telefonda nasıl göründüğünü görüntüler, optimizasyon kalitesinin genel bir değerlendirmesini verir.
Avantajlar
- Resmi Google hizmeti.
- Belirli hataları gösterir.
- Bir mobil sürümün varlığını belirleyebilme.
Kusurlar
- Sitenin farklı ekran boyutlarında nasıl göründüğünü göremezsiniz.
- Sadece ilk ekranı gösterir, site ile etkileşime giremezsiniz.
- Yandex.Web Yöneticisi Mobil Dostu - https://webmaster.yandex.ru/site/tools/mobile-friendly/
Google'ın sunduğu aracın aksine, yalnızca Yandex.Webmaster'da haklarını onayladığınız kendi kaynaklarınızı kontrol edebilirsiniz. Genel puanı ve sitenin bir akıllı telefonda nasıl göründüğünü gösterir.
Avantajlar
- Yandex resmi hizmeti.
- Optimizasyondaki belirli sorunları gösterir.
- Sitenin mobil versiyonu olup olmadığını anlar.
Kusurlar
- Sadece sitelerinizi kontrol edebilirsiniz.
- Sitenin farklı ekranlarda nasıl göründüğünü görmenin bir yolu yok
- Quirktools- http://quirktools.com/screenfly/
Kullanışlı ve işlevsel hizmet, sitenin nasıl görüneceğini görmek mümkün çeşitli cihazlar akıllı telefonlardan televizyonlara.
Avantajlar
- Hazır bir cihaz listesinden seçim yapabilir veya kendi çözünürlüğünüzü belirleyebilirsiniz.
- Site ile etkileşime geçebilirsiniz
Kusurlar
- Mobil sürüm algılanamıyor
- Hata listesi yok
- Iloveadaptif- http://iloveadaptive.com/
Popüler mobil cihazlar ve işletim sistemleri için uyarlanabilirliği kontrol edebileceğiniz bir hizmet.
Avantajlar
- Sitenin nasıl farklı göründüğünü görmek mümkün işletim sistemleri(IOS ve Android)
- Mobil versiyonu olup olmadığını kendisi anlıyor
- için uzantı Google Chrome
Kusurlar
- Ekran boyutunu kendiniz belirleyemezsiniz, sadece hazır bir listeden seçim yapın
- Hata listesi yok
- Her zaman otomatik olarak indirilir mobil versiyon, masaüstü sürümünün farklı çözünürlüklerde nasıl göründüğünü görme yeteneği olmadan
- http://adaptivator.ru/
Avantajlar
- Optimizasyonun kalitesi hakkında genel bir değerlendirme yapar, hataların düzeltilmesi konusunda tavsiyelerde bulunur.
- Mobil sürümü "görmez".
Kusurlar
- Mobil sürümü "görmez".
- Ekran boyutunuzu ayarlamanın bir yolu yoktur.
Çözüm
Web yöneticisi hizmetlerine (Yandex.Webmaster veya Google Search Console) erişiminiz varsa, onların yardımıyla uyarlanabilirliği test etmek en iyisidir. Siteniz için en alakalı arama motoru gereksinimlerini yansıtırlar.
Bu mümkün değilse, işlevsellik açısından birbirlerini tamamladıkları için http://iloveadaptive.com/ adresini http://adaptivator.ru/ ile birlikte kullanabilirsiniz.
Birçok ülkede, akıllı telefonlar internette gezinmek için bilgisayarlardan daha yaygın olarak kullanılmaktadır. Bu nedenle sitenin mobil cihazlara uygun hale getirilmesi çok önemlidir. Sayfalarınızın akıllı telefon kullanıcıları için uygun olup olmadığını öğrenmek için Search Console'daki özel bir araç size yardımcı olacaktır.
kullanım
Bir sayfanın akıllı telefonda görüntülenmeye uygun olup olmadığını kontrol etmek kolaydır: tam URL'sini girmeniz yeterlidir. Kontrol genellikle bir dakikadan az sürer. Sayfada yönlendirmeler varsa, bunlar da işlenecektir.
Kontrolün sonuçlarına dayanarak, sayfanın bir akıllı telefonda nasıl göründüğünü görecek ve görüntülerken hangi sorunların ortaya çıkabileceğini öğreneceksiniz. Çoğu zaman, bunlar küçük baskılar (küçük ekranda okunması zor) ve Flash öğeleridir (çoğunda desteklenmez). mobil cihazlar).
Görünüm alanı meta etiketi değeri ayarlanmadı
Sayfa kodu, tarayıcıya, sayfa öğelerini aygıtın ekran boyutuna sığdırmak için nasıl düzgün bir şekilde yeniden boyutlandıracağını söyleyen görüntü alanı özelliğini belirtmez. Sitenizin farklı ekran boyutlarında doğru şekilde görüntülenmesini sağlamak için, görünüm alanı meta etiketini kullanarak görünüm alanını ayarlayın. Bununla ilgili ayrıntılar, kılavuzumuzun Duyarlı Web Tasarım Temelleri bölümünde verilmiştir.
Görünüm alanı meta etiketi, cihaz genişliği değerine sahip olmalıdır
Sayfanın farklı boyutlardaki ekranlara uyarlanması, kodunda sabit genişliğe sahip viewport özelliği belirtildiğinden mümkün değildir. Bu durumda başvurmanız gerekir uyarlanabilir tasarım ekrana sığdırmak için sayfa ölçeklendirmeyi ayarlayarak.
Ekrandan daha geniş içerik
Bu rapor, metin ve resimleri görüntülemek için yatay olarak kaydırmanız gereken sayfaları tanımlar. Bu sorun, CSS boyutları mutlak değerlere ayarlandığında veya belirli bir tarayıcı penceresi genişliği için tasarlanmış resimler kullanıldığında oluşur. Genişlik ve konum değerlerinin olduğundan emin olun. css öğeleri görecelidir ve görüntüler ölçeklenir. Bununla ilgili ayrıntılı bilgi, kılavuzumuzun Görünüm Alanı İçerik Boyutları bölümünde verilmiştir.
Çok küçük yazı tipi
Bu rapor, kullanıcıların okumak için yakınlaştırma hareketlerini kullanmasını gerektiren küçük baskılı sayfaları listeler. Görünüm penceresini ayarladıktan sonra, yazı tipi boyutlarını, içinde doğru şekilde görüntülenecek şekilde belirlemeniz gerekir.
Sayfa düzenini büyük ölçüde kolaylaştıran ve hızlandıran veya gibi çerçeveler.
tüm cihazlarda ve monitör uzantılarında bir web sayfasının mükemmel bir şekilde görüntülenmesi anlamına gelir. Muhtemelen her düzen tasarımcısında tam set tüm cihazlar olası uzantılar görüntüler, için düzeninizi test etme. Bu şaşırtıcı değil çünkü teknoloji bugünlerde ucuz değil.
Yani. Dağlarca cep telefonu ve tablet satın almak bir seçenek değil - iflas edeceğiz. Ne yapalım? Bu amaçlar için geliştirdiğimiz uyarlanabilir siteleri test etmek için hizmetler. Çalışma prensipleri çok basittir. Çoğu zaman, sayfanın açıldığı yerde belirli bir boyutta bir çerçeve vardır. Etki, bir mobil cihazda görüntülendiğindekiyle yaklaşık olarak aynıdır. Hizmetin bir telefonda veya tablette sayfanın görüntüsünü her zaman doğru bir şekilde göstermediğini belirtmek isterim. Yerleşim sırasında servisleri kullanarak test etmelisiniz, ancak tamamlandıktan sonra mümkünse en yaygın cihazlarda test edin.
Yani. Dikkatinize en iyi araçlar duyarlı web sitelerini test etmek için.
Adobe'den duyarlı web sitesi test aracı. Kullanmak için bilgisayarınıza yüklemeniz gerekir.
Program, cihazlarınızı WIFI üzerinden senkronize etmenize ve siteyi cihazınızda görüntüleneceği şekilde görüntülemenize olanak tanır. Üzerinde şu an aşağıdaki işletim sistemlerine sahip desteklenen cihazlar: iOS, Android, Kindle Fire.
“Business Motor ekibinin proje yöneticisi, web yöneticisi, metin yazarı.
Mobil adaptasyon, site ile çalışmanın önemli bir aşamasıdır. Mobil sıralama faktörünün devreye girmesiyle, işe alım daha da önemli hale geldi. Size temel site mobilite testini nasıl yapacağınızı anlatıyoruz»
Sitenin mobil cihazlarda görüntülenmesinin kolaylığı, sitede önem arz eden bir faktördür. son yıllar istikrarlı bir şekilde büyüyor. Ve buradaki nokta, yalnızca siteleri akıllı telefonlardan ve tabletlerden görüntüleyen kullanıcı sayısının artması değil, aynı zamanda arama motoru düzeyindeki sıralamadır.
Google, bu faktörün sitenin konumu üzerindeki etkisini 04/21/2015 tarihinde resmi olarak duyurdu. Daha yakın zamanlarda, Yandex blogunda bununla ilgili bilgiler ortaya çıktı. Siteyi mobil cihazlarda görüntülemenin kolaylığını hesaba katan algoritmaya "Vladivostok" adı verildi ve Yandex temsilcilerine göre Rusya'da zaten aktif olarak uygulanıyor.
Web sitelerini mobil kullanıcıların ihtiyaçlarına uyarlamanın önemi artıyor ve gelecekte de büyümeye devam edecek. Mobil adaptasyon, hem ziyaretçi dönüşümlerine hem de sayfa sıralamalarına yansıyacaktır. Arama Sonuçları. Ancak projenizin bu gereksinimleri karşılayıp karşılamadığını nasıl anlarsınız? Her ayrıntıda bir sitenin mobil uyumlu olup olmadığı nasıl belirlenir? Bugünkü incelememizde bunun hakkında konuşacağız.
Site mobil uyumlu mu?
Teşhisin ilk aşaması, siteyi mobil cihazlarda kendiniz açmaktır. Ancak burada bile her şey göründüğü kadar basit değildir, çünkü belirli uyum sorunları yalnızca belirli tarayıcılarda ve belirli ekran boyutlarında kendini gösterebilir. Bu nedenle, test etmenizi öneririz:
- dikey ekran yönelimli bir akıllı telefonda (yaklaşık 300 piksel genişliğindeki dar ekranlar dahil);
- ile bir akıllı telefonda yatay yönlendirme ekran (480 piksel genişliğinden itibaren);
- dikey ve yatay ekran yönelimli tabletlerde (768 piksel genişliğinden itibaren).
Bir siteyi denemek sadece doğaldır farklı cihazlar her zaman rahatsız olmaz. Sadece elinizde olduğu için bunun için gerekli tüm araçlar olmayabilir. Çeşitli mobil ekran emülatörlerini kullanarak bu sorunu çözebilirsiniz. Ancak, üçüncü taraf bir hizmetle iletişim kurmak gerekli değildir: Google Chrome'da benzer bir emülatör önceden yüklenmiştir. Kullanmak için ilgilendiğiniz siteyi açın, F12'ye basın (geliştirici konsolunu arayın) ve cep telefonu resmi olan simgeye tıklayın:
Mobil tarayıcıların özelliklerini dikkate almak son derece önemlidir, çünkü kendi özelliklerine de sahip olabilirler. Test ederken, siteyi şurada görüntülemek önemlidir:
- önceden yüklenmiş Android işletim sistemi tarayıcısı;
- Google Chrome mobil;
- "hızlı" tarayıcılar - örneğin, Opera Mini veya UC Tarayıcı;
- Safari (örneğin, iPhone'da).
Arama motorları sitenizi nasıl görüyor?
Öncelikle otomatik kontrol, sitenizin uyarlanabilirliği sorunuyla ilgileniyorsanız, üzerinden geçmeye değer, google'dan mobil uyumlu test. Bu araç oldukça basittir ve mobil cihazlar için sayfa optimizasyonu konusunda net bir karar verir. Ve cevap hayır ise, sitenin küçük ekranlar için ve Google'ın algoritmaları düzeyinde uygunsuz olduğu ve bunun sonucunda ortaya çıkan tüm sonuçlarla birlikte neredeyse kesindir.
Akıllı telefon ekranlarında içerik biçimlendirme ile ilgili herhangi bir iddia varsa, bunlar burada listelenecektir. Bu, belirli görüntüleme sorunlarını hızlı bir şekilde teşhis etmenize ve bunları hemen çözmenize olanak tanır:
Lütfen dikkat: sitenin ekran görüntüsü mobil ekran tarama sonuçları, akıllı telefonunuzda gördüğünüz şekilde eşleşmeyebilir. Çoğu zaman bunun nedeni, yalnızca arama motoru tarafından dizine eklenen dosyaların mobil uyumlu teste katılması ve stil dosyalarının (css) ve komut dosyalarının (js) genellikle robots.txt düzeyinde dizine eklenmesi için kapatılmasıdır. Bu arada, en son Google önerilerine uygun olarak, arama motorlarına görünür hale getirilmelidir.
Google ve Yandex web yöneticisi ofisinde mobil cihazlar için web sitesi optimizasyonu
Sitenin, arama motorlarının mobil cihazlarda görüntüleme kolaylığı hakkındaki fikirlerine nasıl karşılık geldiğine dair bilgilerin web yöneticilerinin ofislerinde alınabileceğini belirtmek önemlidir - Google Arama Konsolu ve Yandex.Webmaster (şimdiye kadar yalnızca yeni hesabın beta sürümünde).
Google Arama Konsolu sonuçları geçerli çek sayfalar burada mevcuttur: Arama trafiği => Mobil cihazlarda görüntülenebilirlik. Bu sayfa, mobil uyumlu testi kullanarak elde edebileceğimiz bilgileri çoğaltır, ancak sitenin dizine eklenen tüm sayfaları için Google robotları tarafından taranırken verilir:
Yandex'deki yeni web yöneticisinin ofisinde toplu güncel kontrol verileri henüz görüntülenmiyor. Bunun yerine Google'ın mobil uyumlu testine benzer bir araç bulabilirsiniz. Bununla, arama motoru algoritmalarının akıllı telefonlarda görüntülemek için belirli bir sayfayı uygun görüp görmediğini manuel olarak kontrol edebilirsiniz.
not
Sitenin ve uyarlanabilirliğinin arama motorları tarafından nasıl algılandığı son derece önemli bir konudur, ancak kullanıcı deneyimi de bir o kadar önemlidir. Bu nedenle, resmi özelliklere göre, sayfa mobil cihazlarda görüntüleme kolaylığı gereksinimlerini tam olarak karşılayabilir, ancak gerçekte - "canlı" kullanıcılar için - bu kolaylık şüpheli olacaktır. Bunun doğrudan sonucu, daha düşük dönüşümler, satış kaybı, daha kötü davranışsal faktörler(sırasıyla sıralamaları da etkiler).
Bu döngünün bir hafta sonraki yazısında, siteyi ziyaretçi gözüyle nasıl göreceğinizi, mobil görüntülemede darboğazları nasıl bulacağınızı ve uygunluğunu değerlendirmek için hangi kriterlerin kullanılması gerektiğini anlatacağız.
sonuçlar
Bir siteyi mobil cihazlarda görüntüleme kolaylığı, hem dönüşüm hem de arama sıralaması sayfalar.
Sitenin uyarlanabilirliğini değerlendirmenin ilk adımı, farklı ekranlarda ve farklı mobil tarayıcılarda test etmektir.
Arama motorlarının bir siteyi mobil cihazlarda görüntülemenin kolaylığını nasıl değerlendirdiğini öğrenmek için, Google'ın mobil uyumlu testi ve web yöneticisinin ofislerindeki ilgili işlevlerin (Google Arama Konsolu ve yeni ofis Yandex'de web yöneticisi).
2015-09-11 8204 4 Denis Abdullin
Duyarlı tasarım kolay değil yeni moda ve bir dereceye kadar bir zorunluluktur. Artık Rus siteleri de herhangi bir ekranda iyi, güzel ve kullanışlı görünecek şekilde yapılmıştır.
Sizinle çevrimiçi hizmetlerin bir listesini paylaşıyoruz web sitesi yanıt verme kontrolü. Diğer blogların aksine, yalnızca en iyi hizmetlere sahibiz.
Resmi uCoz şablon mağazasında, tüm temaların duyarlı olduğunu unutmayın, çünkü. bu, satılık bir şablon yayınlamanın ana koşullarından biridir.
Screenfly - cihaz seçimiyle sitenin uyarlanabilirliğini kontrol etme
Screenfly, popüler ekran boyutları listesine sahip olduğu için ilk sırada yer alıyor cep telefonları, akıllı telefonlar, dizüstü bilgisayarlar ve masaüstü bilgisayarlar. Tabii ki, kendi boyutlarınızı ayarlayabilir ve siteyi bir proxy sunucusu üzerinden görüntülemenin, kaydırmayı etkinleştirip devre dışı bırakmanın da mümkün olduğunu görebilirsiniz.
Mattkersley - tüm boyutlar tek sayfada
Proje, sitenize bir bağlantı girmeniz ve bunu sayfadaki tüm çerçevelere yüklemeniz açısından iyidir. Siteyi 5 boyutta hemen test edebilirsiniz. 2 mod vardır: sadece genişliği test edin veya cihaz adlarını ve yüksekliklerini gösterin.
Responsive.is - Birden fazla cihazda yanıt verme testi
İyi ve kullanışlı bir hizmet, ancak siteyi yalnızca 5 cihazda kontrol edebilirsiniz. Önceki hizmetlerle karşılaştırıldığında, bu çok küçük. Tüm bu boyutlarda kaybolan kullanıcılar için burada listelenmiyor bile, sadece cihaz simgeleri gösteriliyor.
Şahsen, bu tür hizmetleri kullanmıyorum, ancak sadece tarayıcının genişliğini azaltın. Ayrıca, site uyarlanabilirlik kontrol hizmetleri de aynı şeyi yapar, projenizi standart olarak gerçek cihazlarda izlemek daha iyidir Android tarayıcılar ve iPhone'da Safari.
Rusça da dahil olmak üzere başka hizmetler de var. İlk başta tam olarak onları getirmek istedik, ancak yukarıda listelenen siteleri kopyaladılar, mevcut metin basitçe çevrildi, sadece “Telefon” yerine, örneğin “Telefon” göreceksiniz.