Mobil cihazlar için uyarlanabilirlik kontrol ediliyor. Duyarlı tasarım nasıl test edilir? Mobil tasarımın SEO testi

2015-09-11 8204 4 Denis Abdullin

Responsive tasarım sadece yeni bir trend değil aynı zamanda bir dereceye kadar bir zorunluluktur. Artık Rus web siteleri de her ekranda iyi, güzel ve kullanışlı görünecek şekilde yapılıyor.

Çevrimiçi hizmetlerin bir listesini sizinle paylaşıyoruz web sitesi uyumluluk kontrolleri. Diğer blogların aksine, yalnızca en iyi hizmetlere sahibiz.

Resmi uCoz şablon mağazasında tüm temaların uyarlanabilir olduğunu unutmayın çünkü... Bu, satış için bir şablon yayınlamanın ana koşullarından biridir.

Screenfly – cihaz seçimiyle web sitesinin uyumluluğunu kontrol etme

Screenfly, cep telefonları, akıllı telefonlar, dizüstü bilgisayarlar ve masaüstü bilgisayarlar için popüler ekran boyutlarının bir listesine sahip olduğu için ilk sırada yer alıyor. Elbette kendi boyutlarınızı ayarlayabilir ve siteyi bir proxy sunucusu aracılığıyla görüntülemenin, kaydırmayı etkinleştirmenin ve devre dışı bırakmanın da mümkün olduğunu görebilirsiniz.

Mattkersley - tüm boyutlar tek sayfada

Projenin iyi yanı sitenize bir bağlantı girmeniz ve bu bağlantıyı sayfalardaki tüm çerçevelere yüklemesidir. Siteyi hemen 5 boyutta test edebilirsiniz. 2 mod vardır: sadece genişliği test edin veya cihazların adlarını ve yüksekliklerini gösterin.

Responsive.is – birden fazla cihazdaki yanıt verme hızını kontrol eder

İyi ve kullanışlı bir hizmet, ancak siteyi yalnızca 5 cihazda kontrol edebilirsiniz. Önceki hizmetlerle karşılaştırıldığında bu çok az. Tüm bu boyutlarda kaybolan kullanıcılar için burada belirtilmemiş bile, cihaz simgeleri basitçe gösteriliyor.

Şahsen ben bu tür hizmetleri kullanmıyorum ama Sadece tarayıcının genişliğini azaltıyorum. Ayrıca, web sitesinin uyarlanabilirliğini kontrol etmeye yönelik hizmetler de aynı şeyi yapar; projenize gerçek cihazlarda, standart Android tarayıcılarda ve iPhone'daki Safari'de bakmak daha iyidir.

Rusça da dahil olmak üzere başka hizmetler de var. İlk başta onları getirmek istedik, ancak yukarıda listelenen siteleri kopyaladılar, mevcut metin basitçe tercüme edildi, sadece "Telefon" yerine, örneğin "Telefon" göreceksiniz.

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 sitelerin bu tür cihazlarda 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.net

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

mattkersley.com

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.

screenqueri.es

Herhangi bir siteyi kontrol edecek çok harika bir hizmet. Hem tasarım hem de işlevsellik çok hoşuma gitti.

quirktools.com

Çok güzel ve işlevsel bir hizmet. Sitenin TV'de nasıl görüneceğini kontrol etmek bile mümkün :-)

Test, duyarlı bir web sitesinin çeşitli mobil cihazlarda nasıl göründüğünü gösterir. Test edilebilmesi için sitenizin çerçevelerde yüklemeyi ve çalıştırmayı desteklemesi gerekir. Görüntüleme kolaylığı için tarayıcınızı tam ekran moduna geçirin.

Kontrol etmek

Duyarlı bir web sitesi nedir?

Duyarlı bir web sitesi, cihazın genişliğine göre otomatik olarak ayarlanır. Bu durumda site blokları gizlenebilir veya değiştirilebilir. Örneğin bilgisayarda sitenin logosu ve menüsü soldan sağa, telefonda ise yukarıdan aşağıya doğru konumlandırılır.

Duyarlı bir web sitesi ile mobil sürüm arasındaki fark nedir?

Sitenin mobil sürümü varsa, böyle bir siteyi cep telefonundan yüklerken başka bir adrese yönlendirileceksiniz: site.ru → m.site.ru. Mobil versiyon farklı adrese sahip ayrı bir sitedir.

Sitenin mobil versiyonu yoksa telefondan yükleme yaparken site adresi değişmeyecektir. Bilgisayara indirilen verilerin aynısı telefona da indirilecektir. Çoğu zaman bu kullanıcı için sakıncalıdır çünkü telefon ekranı birkaç kat daha küçüktür.

Bu sorun iki şekilde çözülebilir: m.site.ru'nun mobil sürümünü ekleyin veya ayrı bir site OLUŞTURMAYIN, ana sitenize ekleyin. uyarlanabilirlik. Bunlar, ekran genişliği çok küçük olduğunda etkinleştirilen özel stiller ve komut dosyalarıdır: örneğin, menüyü gizlemek, yazı tipini artırmak, büyük resimler yerine küçük olanları göstermek vb.

Açıkçası, duyarlı bir web sitesi ile bir web sitesinin mobil sürümünü karşılaştıramazsınız. Temel olarak duyarlı bir web sitesi = tam sürüm + tabletler için sürüm + telefonlar (mobil) için sürüm ve bunların hepsi tek bir şişede. Yani bir kavram diğerinin içinde yer alır.

Uyarlanabilir bir web sitesi, hem normal bir web sitesini (PC'ler için), hem de mobil olanı (telefonlar için) ve birkaç ara seçeneği (büyük telefonlar, tabletler, TV'ler vb.) Birleştirir. Responsive bir web sitesinin temel avantajı, her ekran genişliğinde iyi görünmesidir.

Bu hizmette telefonun genişliği neden bu kadar küçük?

Modern cihazlardaki gerçek piksel sayısı genellikle çok fazladır ve web siteleri bu kadar büyük bir genişliğe göre tasarlanmamıştır. Bu nedenle yüksek çözünürlüklü ekranlara sahip mobil cihazlar web sitelerini açarak onları belirli bir sanal standarda getirir. Bu numaraları kendiniz öğrenmek için telefonunuzdan veya tabletinizden bu sayfayı açarak düğmeye tıklayın:

Tarayıcı pencere boyutum nedir?

Retina benzeri ekranlara sahip cihazlarda gösterilen boyutlar, cihazın teknik özelliklerinde belirtilen gerçek piksel çözünürlüğünden farklı olacaktır. Akıllı telefonlar 320x480 veya 480x800 piksel, tabletler ise 1280x800 piksel gösterecektir.

Arama motorları, mobil cihaz (akıllı telefonlar, tabletler) kullanıcıları için arama sonuçlarını iyileştirmeye çalışır; böylece farklı ekran boyutları için optimize edilmiş siteler, bu tür optimizasyonun olmadığı sitelere göre daha yüksek görüntülenir. Buna sitelerin mobil versiyonları da dahildir.

Mobil uyumlu bir web sitesinin işaretleri:

1. Okunması kolay içerik (büyütmeden okunabilir), geniş form alanları ve düğmeler.
2. "Ağır" resimlerin, Flash öğelerinin ve gereksiz animasyonların eksikliği.
3. Java uygulamalarının ve Silverlight eklentilerinin eksikliği.
4. Yatay kaydırma çubuğu yok.
5. Minimum site yükleme hızı.
6. Mümkün olduğu kadar basit gezinme.
7. Görünüm meta etiketi eklendi.

Bir sitenin "hareketlilik" açısından kontrol edilmesine yönelik hizmetler

Hizmetlerin nasıl çalıştığını göstermek için iyi ortaklarım CONTEXT çeviri bürosunun web sitesini ele alalım.

1. Google Mobil Dostu

Herhangi bir siteyi, adresini bir satıra girerek kontrol edebilirsiniz.

Sitenin akıllı telefonda nasıl göründüğünü ekranda görüntüler ve mobil cihazlar için optimizasyonuna ilişkin genel bir değerlendirme sunar.

Diğer hizmetlerin aksine, burada her siteyi değil, yalnızca kendi sitenizi kontrol edebilirsiniz. Yani, site, haklarının onaylanmasıyla birlikte web yöneticisinin arayüzüne eklendikten sonra.

Hizmet genel derecelendirmeyi görüntüler, 6 uyumluluk noktasını kontrol eder ve sitenin akıllı telefonda nasıl göründüğünü gösterir.

3. Bing Denetleyicisi

Genel optimizasyon artı 4 noktaya uygunluk kontrol edilir.

Ayrıca sitenin bir akıllı telefon ekranında nasıl göründüğünü de görüntüler (tabii ki işletim sistemi pencerelerinde, önceki hizmetler bir Android akıllı telefon görüntülüyorken =)).

4. W3C'den Mobil Denetleyici

Tüm hizmetlerin en uzunu. O kadar "uzun" ki çekin bitmesini bile beklemedim =)

Ben 5 dakika bekledim, diğer servisler 5-20 saniyede halletti.

5. Sorumlu

Diğerlerinden farklı olarak herhangi bir derecelendirme vermez ancak sitenizin 6 farklı cihazda nasıl göründüğünü iki yönde görüntüler: IOS ve Android, bu çok hoş.

GÜNCELLEME1: 20.07.2017:

6. Adaptör

Bu makaleye yapılan yorumlarda önerilen hizmet. Şahsen kullanmadım ama oldukça iyi görünüyor. Yetenekler müdahalecininkine benzer, ancak aynı zamanda uyarlanabilirliğin sonucunun bir değerlendirmesi de vardır.

UPD2: 3.11.2017:

7. iloveadaptive.ru

Yorumlarda önerilen yeni bir hizmet daha. Benim düşünceme göre, biraz hantal ve pratik değil, ancak bu, harika yeteneklerle fazlasıyla karşılığını veriyor. İşletim sistemine göre sıralama bile var.

Çözüm

Kuşkusuz, bir web sitesini mobil cihazlara uyarlamak sadece modaya ve zamana bir övgü değil, aynı zamanda modern bir web sitesinin sadece son kullanıcıya yardımcı olmayan gerekli bir özelliğidir.

Bu nedenle, müşteriye daha yakın olmak ve daha fazla ziyaret/potansiyel satış elde etmek isteyen herkese web sitelerini mümkün olduğunca çabuk uyarlamalarını öneririm. Bana bir soru sorun -

Modern kullanıcı web sitelerini yalnızca bilgisayardan değil aynı zamanda akıllı telefon veya tabletten de görüntüler. İnsanların rahatlığı için, web sitesi yaratıcıları siteyi tüm yaygın cihazlarda ve tüm çözünürlüklerde görüntülenmeye duyarlı hale getirmelidir. Bu nedenle her web tasarımcısı ve web geliştiricisinin duyarlı tasarımın ilkelerini bilmesi gerekir. Bir web sitesinin uyarlanabilirliğini kontrol etmek için, kullanımı ücretsiz olan, en kullanışlı ve işlevsel olanı seçtiğimiz birçok özel hizmet vardır.

Yanıtla

Bu araç, ekranı sitede yana doğru kaydırılarak görüntülenebilen çok çeşitli cihazları destekler. XRespond'u yer imlerinize kaydetmenizi öneririz.

Yanıtlayıcı

Responsinator hizmeti, iPhone, Nexus akıllı telefonlar ve iPad tabletlerde bir web sitesinin görünümünü yatay ve dikey yönde kontrol etmenize olanak tanır. Ayrıca HTTP ve HTTPS arasında geçiş yapma olanağı da vardır.

Duyarlı tasarım denetleyicisi

Responsive tasarım denetleyicisi, bir web sitesinin Google Pixel gibi yeni telefonlar, tabletler, farklı monitör çözünürlükleri de dahil olmak üzere akıllı telefonlara uyarlanabilirliğini kontrol etme olanağı sağlar ve ayrıca pencere boyutlarını kendiniz ayarlamanıza olanak tanır.

Matt Kersley

İngiltere'den tasarımcı ve geliştirici Matt Kearsley, web sitesinde, varsayılan genişliğin 240 piksel olduğu sitenin uyarlanabilirliğini kontrol edebileceğiniz kendi hizmetini başlattı. Kearsley ekstra boyut eklememeye karar verdi ve kendisini beş boyutla sınırladı: 240 piksel, 320 piksel, 480 piksel, 768 piksel, 1024 piksel.

Tasarımcı, web sitesine yüklemek isteyenler için araç kodunu github'da yayınladı.

Cevap veriyor muyum?

Cevap veriyor muyum? – web sitesinin yanıt verme yeteneğini birkaç cihazda hızlı bir şekilde test etmeniz ve bunu müşteriye bir ekran görüntüsüyle göstermeniz gerekiyorsa mükemmel bir seçim.

Mobil Uyumluluk Testi

Google'ın web yöneticilerine yardımcı olacak birçok hizmeti vardır ve Mobil Uyumluluk Testi bunlardan biridir. Mobil Uyumluluk Testi, listemizdeki diğer web hizmetlerinden farklıdır; bir sitenin farklı cihazlarda nasıl görüntülendiğini görüntülemek için kullanılamaz. İşlevi, sitenin mobil cihazlarda optimizasyonunu kontrol ederken sorunların nasıl çözüleceği konusunda tavsiyelerde bulunmaktır. Google'ın tavsiyelerinin değeri konusunda hiç şüphe yok.