Sprawdzenie adaptacji. Jak przetestować responsywny design? Mobilny kontroler od W3C

Współczesny użytkownik przegląda strony nie tylko z komputera, ale także ze smartfona czy tabletu. Dla wygody ludzi, twórcy strony powinni sprawić, by była ona responsywna do wyświetlania na wszystkich popularnych urządzeniach i we wszystkich rozdzielczościach. Dlatego każdy web designer i web developer musi znać zasady projektowania responsywnego. Aby sprawdzić możliwości dostosowania strony, istnieje wiele specjalnych usług, z których wybraliśmy najbardziej dogodną i funkcjonalną, z których korzystanie jest bezpłatne.

XOdpowiedz

To narzędzie obsługuje ogromny wybór urządzeń, które można przeglądać, przewijając na bok witryny. Zalecamy dodanie zakładki XRespond.

Responsinator

Usługa Responsinator umożliwia sprawdzenie wyświetlania strony w orientacji poziomej i pionowej na smartfonach iPhone, Nexus i iPad. Istnieje również możliwość przełączania się między HTTP i HTTPS.

Responsywny kontroler projektu

Responsive design checker daje możliwość sprawdzenia responsywności strony na smartfonach, w tym nowych telefonach, takich jak Google Pixel, tabletach, różnych rozdzielczościach monitorów, a także umożliwia samodzielne dostosowanie rozmiaru okna.

Matt Kersley

Projektant i programista z Anglii Matt Kersley uruchomił na swojej stronie własną usługę, w której można sprawdzić responsywność strony, gdzie domyślna szerokość to 240 pikseli. Kersley postanowił nie dodawać dodatkowych rozmiarów i ograniczył się do pięciu: 240px, 320px, 480px, 768px, 1024px.

Projektant umieścił kod narzędzia na github dla tych, którzy chcą go zainstalować na swojej stronie.

Czy odpowiadam?

Czy odpowiadam? - doskonały wybór, jeśli potrzebujesz szybko sprawdzić responsywność strony na wielu urządzeniach i zademonstrować to klientowi na zrzucie ekranu.

Test przyjazny dla urządzeń mobilnych

Google oferuje wiele usług pomocy dla webmasterów, a jednym z nich jest test optymalizacji mobilnej. Test przyjazności dla urządzeń mobilnych różni się od pozostałych usług internetowych z naszej listy - nie można go używać do wyświetlania witryny na różnych urządzeniach. Jego funkcją jest sprawdzanie optymalizacji strony na urządzeniach mobilnych, przy jednoczesnym doradzaniu, jak rozwiązać problemy. Nie ma wątpliwości co do wartości porad Google.

W przeglądzie rozważymy wygodne i popularne usługi sprawdzania szybkości ładowania stron internetowych i ich adaptacji.

Szybkość ładowania strony wpływa zarówno na jej pozycję w wyszukiwaniu, jak i na jakość konwersji. Dlatego im szybsza jest Twoja witryna, tym lepiej. Za pomocą kilku prostych i wygodnych usług możesz sprawdzić ten wskaźnik i rozpocząć pracę nad jego poprawą. W końcu nawet 100 milisekund może zadecydować o wszystkim na twoją korzyść lub nie.

Przydatny w tym temacie będzie również nasz poprzedni artykuł „Dwie metody na przyspieszenie witryny: PWA lub AMP. Co lepiej wybrać?”. Za pomocą.

Pierwsza usługa w recenzji -Statystyki PageSpeed... Specjalna usługa od Google, która sprawdza szybkość ładowania strony i podaje zalecenia dotyczące jej poprawy ... Jednocześnie analizowana jest efektywność wersji mobilnej strony oraz desktopowej.

Ocena usługi zależy nie tylko od analizy szybkości pobierania, ale obejmuje również inne kryteria usługi. Jak mówią twórcy PageSpeed ​​Insights, nie ma sensu ścigać się z wynikiem 100, ponieważ ta usługa korzysta z własnych wewnętrznych wskaźników z własnymi regułami.

Drugą usługą oceny prędkości jestNarzędzia Pingdom... Dzięki niemu możesz zobaczyć szybkość ładowania, waga strony i liczba żądań ... Zawiera również raport na temat elementów, które wpływają na szybkość ładowania zasobu.

Test strony internetowej- dość prosta usługa do sprawdzenia. Zapewnia ponad 40 lokalizacji do wyboru ... Między innymi możesz dodać linki do konkurentów i dokonać analizy porównawczej prędkości pobierania.

Jest jeszcze jedno przydatne narzędzie do sprawdzania szybkości ładowania strony -GTmetrix... W porównaniu z konkurencją posiada Kilka zalet :

• harmonijny interfejs i wybór szybkości połączenia ;
• możliwość oceny z wyszukiwarki Yahoo, co jest ważne, jeśli promujesz swój zasób za granicą;
• raport można pobrać w formacie pdf;
• możesz również podłączyć monitorowanie strony.

To prawda, że ​​nie ma możliwości przetestowania na urządzeniu mobilnym, jest kilka przeglądarek internetowych do wyboru, a dostępnych jest tylko 7 lokalizacji. Usługa oferuje również płatną wersję dla tych użytkowników, którzy muszą dokładniej i częściej sprawdzać swoje zasoby.

Szybkość witryny- serwis dla sprawdź szybkość ładowania strony z różnych punktów ... rosyjskojęzyczny i pozwala na analizę pracy Twojego projektu. Możesz również dodać własny serwer do testów, jeśli chcesz zostać sponsorem serwisu.

8 wskazówek które pomogą przyspieszyć pracę Twojej strony,.

Popularne narzędzia do przyspieszania stron internetowych.

USŁUGI SPRAWDZANIA ADAPTACYJNOŚCI

Zdolność do adaptacji jest jedną z najważniejszych czynniki do oceny użyteczności Twojej witryny ... Obecnie duża liczba użytkowników dokonuje zakupów za pomocą urządzeń mobilnych, więc jeśli Twoja witryna nie jest dostosowana do urządzeń mobilnych, tracisz konwersje. Aby sprawdzić zgodność witryn w różnych przeglądarkach, skorzystaj z następujących usług, które wybraliśmy w naszej recenzji.

Test przyjazności dla urządzeń mobilnych- prosta usługa sprawdzania zdolności adaptacyjnych zasobów. Dzięki niemu dowiesz się, czy strona jest zoptymalizowana pod kątem urządzeń mobilnych, a także zapoznasz się z błędy występujące podczas ładowania ... W rezultacie zrzut ekranu pierwszej strony zasobu jest dostarczany jak na urządzeniu mobilnym.Yandex.Webmaster również udostępnia podobne narzędzie, ale pozwala tylko na analizę Twojej witryny.

Przeglądanie- specjalne narzędzie testujące, pełnoprawny emulator ... Pozwala wybrać system operacyjny i określić przeglądarkę z wersją. Wadą jest to, że darmowa wersja jest znacznie ograniczona.

Adaptatorumożliwia bezpłatne sprawdzenie możliwości dostosowania strony. Dzięki niemu użytkownik otrzymuje oceny i rekomendacje dotyczące dalszej optymalizacji serwisu ... Wada: podczas analizy niektórych zasobów internetowych w Adaptivatorze często pojawia się błąd, że właściciele tego zasobu zabronili analizowania witryny, chociaż inne usługi pokazują wyniki bez problemów.

Mucha ekranowa- w porównaniu z poprzednią usługą analizy adaptacyjności jest bardziej funkcjonalna. Wybór jest oferowany 30 różnych rozmiarów ekranu lub możesz sam określić wymiary. Przycisk „Zezwól na przewijanie” pozwala zobaczyć wszystkie elementy strony.

kocham adaptację- usługa analizy wieloplatformowego charakteru zasobu internetowego. Dzięki niemu możesz łatwo wybierz żądaną kombinację urządzenia i systemu operacyjnego , a także obrócić ekran i skorygować powiększenie. Wada systemu: nie ma wyboru systemu operacyjnego dla komputerów PC i laptopów. W przypadku niektórych witryn konieczne jest zainstalowanie specjalnego rozszerzenia w przeglądarce Chrome.

Jakich narzędzi używasz do testowania responsywności i mierzenia szybkości ładowania strony? Mogliśmy przegapić coś interesującego ...

Uwzględniane są czynniki, które mają największy wpływ na ranking mobilnej wersji serwisu.

1324 raz (y) 2 Oglądany czas (y) dzisiaj

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 układu ma pełny zestaw urządzeń ze wszystkimi możliwymi rozszerzeniami wyświetlania, bo testowanie układu... Nie jest to zaskakujące, ponieważ technika ta w dzisiejszych czasach nie jest tania.
Więc. Kupowanie gór telefonów komórkowych i tabletów nie wchodzi w grę - zbankrutujemy. Co robić? Dla tych zadań zostały opracowane usługi do testowania responsywnych stron... Ich zasada działania jest bardzo prosta. Najczęściej w miejscu otwarcia strony znajduje się ramka o określonym rozmiarze. Efekt jest w przybliżeniu 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 kodowania powinieneś testować 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.

Narzędzie do testowania responsywnych witryn 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. Obecnie obsługiwane są 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 ze stroną internetową. Wraz z wprowadzeniem czynnika rankingu mobilnego adaptacja stała się jeszcze ważniejsza. Podpowiadamy, jak przeprowadzić podstawowe testy mobilności witryny ”

Wygoda wyświetlania strony internetowej na urządzeniach mobilnych to czynnik, który w ostatnich latach zyskuje na znaczeniu. I nie chodzi tu 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.

Wpływ tego czynnika na pozycję serwisu Google oficjalnie ogłosił 21 kwietnia 2015 roku. Niedawno informacje o tym pojawiły się na blogu Yandex. Algorytm, który uwzględnia wygodę wyświetlania witryny na urządzeniach mobilnych, został nazwany „Władywostok” i według przedstawicieli Yandex jest już aktywnie wdrażany w Rosji.

Rośnie i będzie rosło znaczenie dostosowywania witryn do potrzeb użytkowników mobilnych. Adaptacja mobilna znajdzie odzwierciedlenie zarówno w konwersji odwiedzających, jak i w rankingu stron w wynikach 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 nie wszystko 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 przeprowadzanie testów:

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

To całkiem naturalne, że wypróbowanie strony na różnych urządzeniach nie zawsze jest niewygodne. Choćby dlatego, że możesz nie mieć pod ręką wszystkich niezbędnych gadżetów. Możesz rozwiązać ten problem za pomocą różnych emulatorów ekranów mobilnych. Jednak nie jest konieczne kontaktowanie się z usługą innej firmy: taki emulator jest preinstalowany w Google Chrome. Aby z niego skorzystać wystarczy otworzyć interesującą Cię stronę, nacisnąć F12 (wywołać konsolę programisty) i kliknąć ikonę z obrazem telefonu komórkowego:

Niezwykle ważne jest uwzględnienie specyfiki przeglądarek mobilnych, ponieważ mogą one również mieć swoje własne cechy. Podczas testowania ważne jest, aby wyświetlić witrynę pod kątem:

• preinstalowana przeglądarka dla 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ą witrynę?

Pierwszym automatycznym sprawdzeniem, przez które powinieneś przejść, jeśli interesuje Cię problem z responsywnością Twojej strony, to: test przyjazny dla urządzeń mobilnych Google... To narzędzie jest dość proste i daje jednoznaczny werdykt dotyczący optymalizacji strony pod kątem urządzeń mobilnych. A jeśli ta odpowiedź brzmi „nie”, prawie na pewno jest uważana za niewygodną dla małych ekranów i na poziomie algorytmów Google – ze wszystkimi wynikającymi z tego konsekwencjami.

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

Uwaga: zrzut ekranu witryny na ekranie telefonu komórkowego w wynikach skanowania może nie odpowiadać temu, w jaki widzisz go 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 skryptów (js) są często zamykane do indeksowania 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 widokom 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).

W Google Search Console wyniki bieżącego sprawdzania strony są dostępne tutaj: Ruch związany z wyszukiwaniem => Użyteczność mobilna. Ta strona powiela informacje, które możemy uzyskać za pomocą testu przyjaznego dla urządzeń mobilnych, ale jest udostępniana dla wszystkich zindeksowanych stron witryny podczas ich indeksowania przez roboty Google:

W nowym biurze webmastera w Yandex dane z bieżącej kontroli masowej nie są jeszcze wyświetlane. Zamiast tego można tam znaleźć podobne narzędzie do testu przyjaznego dla urządzeń mobilnych Google. Za jego pomocą możesz ręcznie sprawdzić, czy algorytmy wyszukiwarek uznają tę lub inną stronę za wygodną do przeglądania na smartfonach.

PS

To, jak wyszukiwarki postrzegają witrynę i jej responsywność, to ogromny problem, ale równie ważne jest doświadczenie użytkownika. Czyli według kryteriów formalnych strona może w pełni spełniać wymagania dotyczące wygody 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 jest spadek konwersji, utrata sprzedaży, pogorszenie czynników behawioralnych (które z kolei wpływają również na rankingi).

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

wnioski

Wygoda przeglądania mobilnego odgrywa coraz większą rolę zarówno w konwersjach, jak i w rankingach wyszukiwarek.

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

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

Test pokazuje, jak wygląda responsywna strona internetowa na różnych urządzeniach mobilnych. W celu weryfikacji witryna musi obsługiwać wczytywanie i kadrowanie. Aby ułatwić przeglądanie, przełącz przeglądarkę w tryb pełnoekranowy.

Sprawdzać

Czym jest strona responsywna?

Strona responsywna automatycznie dopasowuje się do szerokości urządzenia. W takim przypadku bloki strony można ukryć lub zmodyfikować. Na przykład na komputerze logo i menu witryny znajdują się od lewej do prawej, a na telefonie - od góry do dołu.

Jaka jest różnica między stroną responsywną a wersją mobilną?

Jeśli witryna ma wersję mobilną, to podczas ładowania takiej witryny z telefonu komórkowego zostaniesz przekierowany na inny adres: site.ru → m.site.ru. Wersja mobilna to osobna witryna z innym adresem.

Jeśli strona nie ma wersji mobilnej, adres strony nie zmieni się po załadowaniu z telefonu. Do telefonu zostaną pobrane te same dane, co do komputera. Najczęściej jest to niewygodne dla użytkownika, bo ekran telefonu jest kilkakrotnie mniejszy.

Ten problem można rozwiązać na dwa sposoby: dodaj mobilną wersję m.site.ru lub NIE twórz oddzielnej witryny, ale dodaj do swojej głównej witryny zdolność adaptacji. Są to specjalne style i skrypty, które są uwzględniane, jeśli szerokość ekranu jest zbyt mała: na przykład ukryj menu, zwiększ czcionkę, pokaż małe obrazy zamiast dużych itp.

Ściśle mówiąc, nie można porównywać witryny responsywnej z witryną mobilną. Zasadniczo strona responsywna = pełna wersja + wersja na tablet + wersja na telefon (mobilna), wszystko w jednej butelce. Oznacza to, że jedno pojęcie jest zawarte w innym.

Witryna adaptacyjna łączy zarówno zwykłą (na komputery PC), jak i komórkową (na telefony) oraz kilka opcji pośrednich (duże telefony, tablety, telewizory itp.). Główną zaletą responsywnej strony internetowej jest to, że dobrze wygląda na każdej szerokości ekranu.

Dlaczego szerokość telefonu w tym serwisie jest tak mała?

Rzeczywista liczba pikseli w nowoczesnych gadżetach jest zwykle bardzo duża, a witryny nie są przystosowane do tak dużej szerokości. Dlatego urządzenia mobilne z ekranami o wysokiej rozdzielczości otwierają witryny, doprowadzając je do pewnego wirtualnego standardu. Aby samemu znaleźć te numery, kliknij przycisk, otwierając tę ​​stronę na telefonie lub tablecie:

Jaki jest rozmiar okna przeglądarki?

Na urządzeniach z wyświetlaczami podobnymi do siatkówki pokazane wymiary będą się różnić od rzeczywistej rozdzielczości w pikselach określonej w specyfikacji urządzenia. Smartfony pokażą 320×480 lub 480×800 pikseli, tablety – 1280×800.