Czas czytania 6 minut

Dlaczego ważne jest testowanie stron internetowych pod kątem responsywności? Według Yandex.Metrica liczba osób korzystających z urządzeń mobilnych w Rosji zbliża się do 50% i stale rośnie.

Dotyczący Wyszukiwarki staraj się, aby wydawanie produktów mobilnych było wygodniejsze dla użytkowników. W lutym 2015 r. Google twierdzi, że posiadanie wersji responsywnej lub mobilnej ma pozytywny wpływ na rankingi. Dokładnie rok później, w lutym 2016 r., Yandex ogłasza to samo.

Jakie cechy powinna mieć responsywna strona internetowa?

• Brak przewijania w poziomie.
• Metatag okna roboczego jest poprawny.
• Elementy interaktywne (linki, przyciski, formularze itp.) nie są zbyt blisko siebie.
• Brak elementów Flash, wtyczek Silverlight.
• Wygodna nawigacja po sekcjach.
• Treść (tekst i zdjęcia) jest dostosowana do wielkości ekranu i jest odczytywana bez powiększenia.

Usługi sprawdzania przez Internet możliwości adaptacji witryny

1. Przyjazny dla urządzeń mobilnych Google - https://search.google.com/test/mobile-friendly

Wyświetla jak wygląda pierwszy ekran strony na smartfonie, daje ogólną ocenę jakości optymalizacji.

Zalety

• Oficjalna usługa Google.
• Wskazuje określone błędy.
• Potrafi określić obecność wersji mobilnej.

Wady

• Nie możesz zobaczyć, jak witryna wygląda na różnych rozmiarach ekranu.
• Pokazuje tylko pierwszy ekran, nie można wchodzić w interakcje z witryną.

1. Yandex.Webmaster Przyjazny dla urządzeń mobilnych - https://webmaster.yandex.ru/site/tools/mobile-friendly/

W przeciwieństwie do narzędzia od Google, możesz sprawdzić tylko własne zasoby, do których potwierdziłeś prawa w Yandex.Webmaster. Pokazuje ogólną ocenę i pokazuje, jak witryna wygląda na smartfonie.

Zalety

• Oficjalna usługa Yandex.
• Wskazuje konkretne problemy w optymalizacji.
• Rozumie, czy witryna ma wersję mobilną.

Wady

• Możesz sprawdzić tylko swoje witryny.
• Nie ma sposobu, aby zobaczyć, jak strona wygląda na różnych ekranach

1. Quirktools- http://quirktools.com/screenfly/

Wygodna i funkcjonalna obsługa, można zobaczyć jak będzie wyglądała strona różne urządzenia od smartfonów po telewizory.

Zalety

• Możesz wybrać z gotowej listy urządzeń lub ustawić własną rozdzielczość
• Możesz wchodzić w interakcję z witryną

Wady

• Nie mogę wykryć wersji mobilnej
• Brak listy błędów

1. Kochamadaptacyjny- http://iloveadaptive.com/

Usługa, dzięki której sprawdzisz możliwości dostosowania do popularnych urządzeń mobilnych i systemów operacyjnych.

Zalety

• Można zobaczyć, jak strona wygląda inaczej system operacyjny(iOS i Android)
• On sam rozumie, czy istnieje wersja mobilna
• Rozszerzenie dla Google Chrome

Wady

• Nie możesz samodzielnie określić rozmiaru ekranu, tylko wybierz z gotowej listy
• Brak listy błędów
• Zawsze pobiera automatycznie wersja mobilna, bez możliwości zobaczenia jak wygląda wersja desktopowa w różnych rozdzielczościach

1. http://adaptivator.ru/

Zalety

• Daje ogólną ocenę jakości optymalizacji, udziela porad dotyczących korygowania błędów.
• „Nie widzi” wersji mobilnej.

Wady

• „Nie widzi” wersji mobilnej.
• Nie ma możliwości ustawienia rozmiaru ekranu.

Wniosek

Jeśli masz dostęp do usług webmasterów (Yandex.Webmaster lub Google Search Console), najlepiej przetestować ich adaptacyjność za ich pomocą. Odzwierciedlają one najbardziej odpowiednie wymagania wyszukiwarek dla Twojej witryny.

Jeśli nie jest to możliwe, możesz użyć http://iloveadaptive.com/ w połączeniu z http://adaptivator.ru/, ponieważ uzupełniają się one pod względem funkcjonalności.

W wielu krajach smartfony są częściej używane do surfowania po Internecie niż komputery. Dlatego bardzo ważne jest dostosowanie serwisu do urządzeń mobilnych. Aby dowiedzieć się, czy Twoje strony są odpowiednie dla użytkowników smartfonów, pomoże Ci specjalne narzędzie w Search Console.

Stosowanie

Sprawdzenie, czy strona nadaje się do przeglądania na smartfonie, jest łatwe: wystarczy wpisać jej pełny adres URL. Sprawdzenie trwa zwykle mniej niż minutę. Jeśli na stronie znajdują się przekierowania, również zostaną przetworzone.

Na podstawie wyników sprawdzenia zobaczysz, jak strona wygląda na smartfonie, a także dowiesz się, jakie problemy mogą pojawić się podczas jej przeglądania. Najczęściej są to drobny druk (trudny do odczytania na małym ekranie) i elementy Flash (w większości nieobsługiwane) urządzenia mobilne).

Nie ustawiono wartości metatagu widocznego obszaru

Kod strony nie określa właściwości viewport, która informuje przeglądarkę, jak prawidłowo zmienić rozmiar elementów strony, aby dopasować je do rozmiaru ekranu urządzenia. Aby Twoja witryna wyświetlała się poprawnie na ekranach o różnych rozmiarach, dostosuj widoczny obszar za pomocą metatagu widocznego obszaru. Szczegółowe informacje na ten temat znajdziesz w naszym poradniku w sekcji Podstawy projektowania responsywnych stron internetowych.

Metatag widocznego obszaru musi mieć wartość szerokości urządzenia

Dostosowanie strony do ekranów o różnych rozmiarach jest niemożliwe, ponieważ właściwość viewport o stałej szerokości jest określona w jej kodzie. W takim przypadku musisz złożyć wniosek projekt adaptacyjny dostosowując skalowanie strony do ekranu.

Treść szersza niż ekran

Ten raport identyfikuje strony, na których należy przewijać w poziomie, aby wyświetlić tekst i obrazy. Ten problem występuje, gdy rozmiary CSS są ustawione na wartości bezwzględne lub gdy używane są obrazy zaprojektowane dla określonej szerokości okna przeglądarki. Upewnij się, że wartości szerokości i pozycji są elementy css są względne, a obrazy są skalowane. Szczegółowe informacje na ten temat znajdziesz w naszym poradniku w rozdziale Rozmiary zawartości w oknie roboczym.

Zbyt mała czcionka

Ten raport zawiera listę stron pisanych drobnym drukiem, które wymagają od użytkowników użycia gestów powiększenia do czytania. Po skonfigurowaniu rzutni należy określić rozmiary czcionek, aby wyświetlały się w niej poprawnie.

Frameworki, takie jak lub , które znacznie ułatwiają i przyspieszają układ strony.
oznacza doskonałe wyświetlanie strony internetowej na wszystkich urządzeniach i rozszerzeniach monitora. Prawdopodobnie nie każdy projektant ma komplet urządzenia ze wszystkimi możliwe rozszerzenia wyświetlacze, dla testowanie układu. Nie jest to zaskakujące, ponieważ technologia nie jest w dzisiejszych czasach tania.
Więc. Kupowanie gór telefonów komórkowych i tabletów nie wchodzi w grę - zbankrutujemy. Co robić? W tym celu opracowaliśmy usługi testowania stron adaptacyjnych. Ich zasada działania jest bardzo prosta. Najczęściej w miejscu otwarcia strony znajduje się ramka o określonym rozmiarze. Efekt jest prawie taki sam, jak podczas oglądania na urządzeniu mobilnym. Pragnę zauważyć, że usługa nie zawsze dokładnie pokazuje wyświetlanie strony na telefonie lub tablecie. Podczas rozmieszczania należy przetestować za pomocą usług, ale po zakończeniu, jeśli to możliwe, przetestuj na najpopularniejszych urządzeniach.
Więc. Za twoją uwagę najlepsze narzędzia do testowania responsywnych stron internetowych.

Narzędzie do testowania responsywnych witryn internetowych firmy Adobe. Aby z niego skorzystać, musisz go zainstalować na swoim komputerze.
Program umożliwia synchronizację urządzeń przez WIFI i przeglądanie witryny tak, jak będzie ona wyświetlana na Twoim urządzeniu. Na ten moment obsługiwane urządzenia z następującymi systemami operacyjnymi: iOS, Android, Kindle Fire.

„Kierownik projektu zespołu Business Motor, webmaster, copywriter.
Adaptacja mobilna to ważny etap pracy z serwisem. Wraz z wprowadzeniem czynnika rankingu mobilnego, onboarding stał się jeszcze ważniejszy. Powiemy Ci, jak przeprowadzić podstawowe testy mobilności witryny»

Wygoda wyświetlania strony na urządzeniach mobilnych to czynnik, którego znaczenie ma ostatnie lata stale rośnie. I chodzi tu nie tylko o rosnącą liczbę użytkowników przeglądających strony ze smartfonów i tabletów, ale także o ranking na poziomie wyszukiwarek.

Google oficjalnie poinformowało o wpływie tego czynnika na pozycję serwisu 21.04.2015. Niedawno informacje o tym pojawiły się na blogu Yandex. Algorytm, który uwzględnia wygodę wyświetlania witryny na urządzeniach mobilnych, nazwano „Władywostok” i według przedstawicieli Yandex jest już aktywnie wdrażany w Rosji.

Znaczenie dostosowania stron internetowych do potrzeb użytkowników mobilnych rośnie i będzie rosło w przyszłości. Adaptacja mobilna zostanie odzwierciedlona zarówno w konwersjach odwiedzających, jak i w rankingach stron w wyniki wyszukiwania. Ale skąd wiesz, czy Twój projekt spełnia te wymagania? Jak sprawdzić, czy strona jest przyjazna dla urządzeń mobilnych w każdym szczególe? Porozmawiamy o tym w naszej dzisiejszej recenzji.

Czy witryna jest przyjazna dla urządzeń mobilnych?

Pierwszym etapem diagnostyki jest samodzielne otwarcie serwisu na urządzeniach mobilnych. Ale nawet tutaj wszystko nie jest tak proste, jak mogłoby się wydawać, ponieważ pewne problemy z adaptacją mogą objawiać się tylko w niektórych przeglądarkach i na określonych rozmiarach ekranu. Z tego powodu zalecamy przetestowanie:

• na smartfonie z pionową orientacją ekranu (w tym na wąskich ekranach o szerokości około 300 pikseli);
• na smartfonie z orientacja pozioma ekran (od 480 pikseli szerokości);
• na tabletach z pionową i poziomą orientacją ekranu (od 768 pikseli szerokości).

Wypróbowanie strony jest naturalne różne urządzenia nie zawsze niewygodne. Choćby dlatego, że pod ręką może nie być wszystkich niezbędnych do tego gadżetów. Możesz rozwiązać ten problem za pomocą różnych emulatorów ekranu mobilnego. Jednak nie jest konieczne kontaktowanie się z usługą innej firmy: podobny emulator jest preinstalowany w przeglądarce Google Chrome. Aby z niego skorzystać, po prostu otwórz interesującą Cię stronę, naciśnij F12 (wywołaj konsolę programisty) i kliknij ikonę z obrazem telefonu komórkowego:

Niezwykle ważne jest uwzględnienie funkcji przeglądarek mobilnych, ponieważ mogą one mieć również swoje własne cechy. Podczas testowania ważne jest, aby przeglądać witrynę na:

• preinstalowana przeglądarka systemu operacyjnego Android;
• Google Chrome na telefon komórkowy;
• „szybkie” przeglądarki – na przykład Opera Mini lub UC Browser;
• Safari (na przykład na iPhonie).

Jak wyszukiwarki widzą Twoją witrynę?

Pierwszy automatyczne sprawdzenie, który warto przejrzeć, jeśli interesuje Cię problem adaptacyjności Twojej witryny, to test przyjazny dla urządzeń mobilnych przez google. Narzędzie to jest dość proste i daje jednoznaczny werdykt dotyczący optymalizacji strony pod kątem urządzeń mobilnych. A jeśli odpowiedź brzmi „nie”, to jest prawie pewne, że strona jest uważana za niewygodną dla małych ekranów i na poziomie algorytmów Google – ze wszystkimi tego konsekwencjami.

Jeśli istnieją jakiekolwiek roszczenia dotyczące formatowania treści na ekranach smartfonów, zostaną one tutaj wymienione. Umożliwi to szybkie zdiagnozowanie konkretnych problemów z wyświetlaniem i przejście od razu do ich rozwiązywania:

Uwaga: zrzut ekranu strony jest włączony ekran mobilny w wynikach skanowania mogą nie odpowiadać temu, w jaki widzisz to na smartfonie. Najczęściej wynika to z faktu, że w teście przyjaznym dla urządzeń mobilnych biorą udział tylko pliki zaindeksowane przez wyszukiwarkę, a pliki stylów (css) i skrypty (js) są często zamykane na indeksowanie na poziomie robots.txt. Przy okazji, zgodnie z najnowszymi zaleceniami Google, powinny być widoczne dla wyszukiwarek.

Optymalizacja strony pod urządzenia mobilne w biurze webmastera Google i Yandex

Należy pamiętać, że informacje o tym, jak strona odpowiada wyobrażeniom wyszukiwarek o wygodzie wyświetlania na urządzeniach mobilnych, można uzyskać w biurach webmasterów - Konsola wyszukiwania Google oraz Yandex.Webmaster (na razie tylko w wersji beta nowego konta).

Wyniki Google Search Console obecny czek strony są dostępne tutaj: Ruch związany z wyszukiwaniem => Widoczność na urządzeniach mobilnych. Ta strona powiela informacje, które możemy uzyskać za pomocą testu przyjaznego dla urządzeń mobilnych, ale jest podawana dla wszystkich zindeksowanych stron witryny podczas ich indeksowania przez roboty Google:

W biurze nowego webmastera w Yandex masowe bieżące dane kontrolne nie są jeszcze wyświetlane. Zamiast tego możesz znaleźć narzędzie podobne do testu przyjaznego dla urządzeń mobilnych Google. Dzięki niemu możesz ręcznie sprawdzić, czy algorytmy wyszukiwarek uznają konkretną stronę za wygodną do przeglądania na smartfonach.

PS

To, jak strona i jej adaptacyjność są postrzegane przez wyszukiwarki to niezwykle ważna kwestia, ale równie ważne jest doświadczenie użytkownika. Tak więc, zgodnie z formalnymi cechami, strona może w pełni spełniać wymagania dotyczące łatwości przeglądania na urządzeniach mobilnych, ale w rzeczywistości - dla "żywych" użytkowników - ta wygoda będzie wątpliwa. Bezpośrednim skutkiem tego są niższe konwersje, utracona sprzedaż, gorsze czynniki behawioralne(co z kolei wpływa również na rankingi).

W kolejnym artykule z tego cyklu za tydzień opowiemy, jak spojrzeć na stronę oczami odwiedzających, jak znaleźć wąskie gardła w wyświetlaniu mobilnym oraz jakimi kryteriami należy się kierować, aby ocenić jego wygodę.

wnioski

Łatwość przeglądania witryny na urządzeniach mobilnych odgrywa coraz większą rolę zarówno w konwersji, jak i ranking wyszukiwania stron.

Pierwszym krokiem do oceny zdolności adaptacyjnych witryny jest testowanie na różnych ekranach i w różnych przeglądarkach mobilnych.

Aby dowiedzieć się, jak wyszukiwarki oceniają wygodę wyświetlania strony na urządzeniach mobilnych, pomoże test Google na przyjazność dla urządzeń mobilnych, a także odpowiednia funkcjonalność w biurach webmastera (Google Search Console i nowe biuro webmaster w Yandex).

2015-09-11 8204 4 Denis Abdullin

Projektowanie responsywne nie jest łatwe nowy trend i do pewnego stopnia konieczność. Teraz rosyjskie witryny są również tworzone w taki sposób, aby wyglądały dobrze, pięknie i wygodnie na każdym ekranie.

Udostępniamy Ci listę usług online sprawdzenie responsywności strony internetowej. W przeciwieństwie do innych blogów mamy tylko najlepsze usługi.

Zaznaczam, że w oficjalnym sklepie szablonów uCoz wszystkie motywy są responsywne, ponieważ. jest to jeden z głównych warunków opublikowania szablonu na sprzedaż.

Screenfly - sprawdzanie możliwości adaptacji strony przy wyborze urządzenia

Screenfly zajmuje pierwsze miejsce, ponieważ zawiera listę popularnych rozmiarów ekranu telefony komórkowe, smartfony, laptopy i komputery osobiste. Oczywiście możesz ustawić własne wymiary i zobaczyć, możliwe jest również przeglądanie strony przez serwer proxy, włączanie i wyłączanie przewijania.

Mattkersley - wszystkie rozmiary na jednej stronie

Projekt jest dobry pod tym względem, że wpisujesz link do swojej witryny i ładuje go do wszystkich ramek na stronie. Możesz od razu przetestować witrynę w 5 rozmiarach. Dostępne są 2 tryby: po prostu przetestuj szerokość lub pokaż nazwy urządzeń i ich wysokość.

Responsive.is - Test responsywności na wielu urządzeniach

Dobra i wygodna obsługa, ale stronę można sprawdzić tylko na 5 urządzeniach. W porównaniu do poprzednich usług jest to bardzo małe. Dla tych użytkowników, którzy zgubili się we wszystkich tych rozmiarach, nie są nawet tutaj wymienieni, wyświetlane są tylko ikony urządzeń.

Osobiście nie korzystam z takich usług, ale po prostu zmniejsz szerokość przeglądarki. Dodatkowo usługi sprawdzania adaptacji witryny robią to samo, lepiej oglądać projekt na prawdziwych urządzeniach, w standardzie Przeglądarki na Androida i Safari na iPhonie.

Istnieją inne usługi, w tym w języku rosyjskim. Na początku chcieliśmy je sprowadzić, ale po prostu skopiowali strony wymienione powyżej, istniejący tekst został po prostu przetłumaczony, tylko zamiast „Telefonu” zobaczysz na przykład „Telefon”.