Używanie JavaScript do testów responsywnych projektów. Jak przetestować responsywny projekt strony internetowej? Drobne elementy do ekranów mobilnych

Sklep internetowy wymaga optymalizacji pod kątem urządzeń mobilnych. Problem ten rozwiązuje się za pomocą projektowania adaptacyjnego, które pozwala na prawidłowe wyświetlanie witryny na dowolnej platformie. Jednak wdrożenie responsywnego projektu wiąże się ze standardowym zestawem pułapek. Wymieńmy 8 najczęstszych problemów typowych dla sklepów internetowych.

Pośpiech wkroczenia w segment mobilny zmusza sprzedawców detalicznych do zaprojektowania strony internetowej bez przeprowadzania poważnych analiz zachowań odwiedzających. Analiza zachowań odwiedzających to najważniejszy etap przygotowań, który pozwala zidentyfikować najpopularniejsze urządzenia mobilne i w pierwszej kolejności zoptymalizować dla nich witrynę. Analityka pomaga określić najpopularniejsze działanie użytkownika, np. powiększenie zdjęcia produktu; pokazuje współczynnik konwersji użytkowników mobilnych itp. Dane te dadzą wgląd w preferencje zachowań użytkowników i pomogą spełnić oczekiwania mobilnych odbiorców. Analiza ruch mobilny konieczne jest systematyczne i konsekwentne wdrażanie wyników, finalizacja i optymalizacja serwisu pod kątem potrzeb klientów.

Zazwyczaj desktopowa wersja sklepu internetowego jest przeprojektowywana z myślą o ekranach mobilnych, chociaż bardziej logiczne jest wzięcie małego ekranu urządzenia mobilnego, a następnie przeskalowanie go do pulpitu. Sprzedawcy często nie zdają sobie z tego sprawy problemy techniczne Doprowadzenie witryny przeznaczonej na komputer stacjonarny do rozmiaru smartfona.
Rozpoczęcie projektowania dla ekrany mobilne, skupiasz się na doświadczeniach użytkowników mobilnych. Dzięki temu łatwiej będzie Ci projektować dla obu kanałów: desktopowego i mobilnego.

Testowanie układu mobilnego sklepu internetowego to obowiązkowy etap startu, jednak wielu właścicieli często go zaniedbuje i uruchamia bez testów. Dzięki temu w działającej wersji serwisu na urządzenia mobilne błędy mogą pojawiać się już w trakcie dokonywania zakupu i składania zamówienia.

Wady projektowania adaptacyjnego można łatwo zidentyfikować po wstępnych testach sklepu internetowego, jednak wielu sprzedawców nie ma na to zasobów. Aby zmniejszyć ryzyko utraty pieniędzy, przetestuj najważniejsze trasy użytkownika po witrynie w głównych przeglądarkach - Chrome, IE, Firefox, Safari i system operacyjny– Windows, Mac OS, Android, IOS na popularnych urządzeniach mobilnych. Testuj za każdym razem, gdy wprowadzasz zmiany; usługi takie jak BrowserStack lub Viewport Resizer mogą pomóc skrócić czas testowania do kilku godzin.

Chcąc zmieścić więcej miejsca na ekranie smartfona, właściciele sklepów internetowych skąpią w wielkości przycisków „wezwania do działania”. Nie zmuszaj użytkowników do powiększania witryny w celu kliknięcia przycisku Kup i nie umieszczaj małych elementów zbyt blisko siebie, w przeciwnym razie użytkownicy wybiorą wygodniejszą witrynę. Projektuj interfejsy z dużymi elementami nawigacyjnymi i rozmiarami przycisków wezwania do działania.

Użytkownicy urządzeń mobilnych uwielbiają szybkie witryny i minimalne czasy ładowania. Oceń komponenty swojego strony mobilne– zdjęcia, przyciski, tekst, skrypty – muszą być zoptymalizowane pod kątem urządzeń mobilnych. Google bierze pod uwagę czas ładowania strony w swoich SERPach i szereguje witryny mobilne i przyznaje im pierwszeństwo na górze, dzięki czemu „lekkie” witryny zyskują dodatkową poważną przewagę.

Podziel treść na różne zakładki, np. strona produktu może zawierać tylko podstawowe zdjęcie, opis, cenę i przycisk „Kup”. Recenzje klientów i filmy można umieścić na osobnej zakładce i odciążyć główną część strony. Oprócz treści optymalizuj inne elementy wpływające na szybkość ładowania - pliki CSS, obrazy i skrypty, wysyłaj tylko niezbędne dane. Pomogą Ci w tym narzędzia zmniejszające rozmiar plików zasobów i czas ich ładowania: Uglify lub JSCompress.

Często zdarza się, że programiści ukrywają część treści, aby ładowanie było szybsze na urządzeniach mobilnych. Często jednak rozmiar strony w rzeczywistości nie jest zmniejszany, a treść po prostu nie jest wyświetlana użytkownikowi. Twój sklep powinien mieć możliwość dynamicznego generowania strony, zmniejszając wagę strony i czas ładowania dla odwiedzających mobilnych. Poza tym daj użytkownicy mobilni Mniej treści jest zła i negatywnie wpływa na doświadczenia konsumentów. Zwykle podczas procesu zakupu korzystają z różnych urządzeń, tak jak robi to około 90% kupujących online. Ograniczanie ich do responsywnych metod projektowania jest dużym błędem.

Dobra strona internetowa o responsywnym wyglądzie automatycznie zmienia rozdzielczość obrazów w zależności od rodzaju urządzenia. Duże obrazy wydłużają czas ładowania. Istnieje kilka sposobów automatycznego dostosowywania rozmiarów obrazów do rozmiaru konkretne urządzenie. Obrazy „Elastyczne” (obrazy płynne) to metoda oparta na CSS, która pozwala kompresować i rozciągać obraz w zależności od szerokości elementu go zawierającego lub elementu HTML5, który pozwala załadować obraz o wymaganym rozmiarze dla każdego typ urządzenia.

Zdarza się, że z samą witryną wszystko jest w porządku, projekt adaptacyjny Działa dobrze na komputerach stacjonarnych i urządzeniach mobilnych. Jednak e-maile nie reagują, a użytkownicy mobilni muszą mieć trudności ze sprawdzeniem szczegółów zamówienia lub przewijaniem niekończącej się listy polecanych produktów, aby dotrzeć do zrealizowanych zakupów. E-maile To kluczowy punkt kontaktu z klientem. Zintegruj responsywny projekt e-maili ze swoją strategią mobilną. Projektuj i testuj swoje listy i biuletyny; szablony listów powinny być „lekkie” i zawierać tylko ważne informacje.

Od autora: „Przestań zmieniać rozmiar tej przeglądarki, wkrótce zostanie ona usunięta!” Jak często to słyszysz? No dobrze, może nie tak często, ale jeśli tworzysz responsywne strony internetowe, wiesz o czym mówię: za każdym razem, gdy edytujesz DOM lub CSS, przeciągasz krawędź przeglądarki w tę i z powrotem, testując zmiany i szukanie nieścisłości.

Ogólnie rzecz biorąc, większość tych wysiłków ma na celu naśladowanie rozmiarów ekranów różnych urządzeń.

Jeśli zajmujesz się rozwojem przedsiębiorstw, prawdopodobnie masz wiele urządzeń dostarczonych przez firmę do przetestowania. Tam, gdzie pracuję, mamy iPady, iPhone'y, jeden lub dwa inne tablety, laptopy i komputery stacjonarne. Jeśli nie masz tego luksusu, musisz korzystać z tego, co masz pod ręką.

W domu mam dwa różne laptopy, dwa różne Urządzenia z Androidem: Kindle i Nexus 7. Używam tych urządzeń do testowania moich niezależnych projektów, ale jasne jest, że nie jest to wyczerpujący wybór. Nie ma w ogóle urządzeń z systemem iOS i chociaż jestem uważany za wczesnego użytkownika, nie planuję kupować każdego nowego telefonu/tabletu/tabletu, gdy tylko trafią do sprzedaży.

Co zatem powinien zrobić deweloper? Na szczęście pojawia się coraz więcej narzędzi opartych na przeglądarce, które symulują rozmiary ekranów różnych urządzeń. Różne narzędzia oczywiście mają różne zestawy cech i różne poziomy wydajności. Przyjrzymy się niektórym z nich tutaj.

Do celów testowych skorzystałem z pierwszej naprawdę responsywnej witryny, którą stworzyłem, PjamasOnYourFeet.com. Opiera się na szablonie Brownie HTML5, bardzo hojnie i bezpłatnie udostępnianym społeczności programistów na EGrappler.

Czy odpowiadam? – całkowicie łatwy, natychmiastowy podgląd Twojej witryny pod kątem tego, jak będzie wyglądać na czterech różne urządzenia. Wszystkie cztery to iOS, a deweloper wyjaśnia swój wybór na stronie internetowej. Nie oferuje żadnych elementów sterujących ani opcji wyboru, a jedynie bardzo prosty i elegancki wyświetlacz. Zobacz wymiary okna:

Pulpit — 1600 x 992 pikseli, zmniejszanie według skali (0,3181)

Laptop — 1280 x 802 pikseli, skala malejąca (0,277)

Tablet — 768 x 1024 pikseli, zmniejszanie skali (0,219)

Urządzenia mobilne — 320 x 480 pikseli, zmniejszanie skali (0,219)

Cytując dewelopera: „To nie jest narzędzie do testowania, bardzo ważne jest, aby robić to na prawdziwych urządzeniach. Ale on jest narzędziem szybkie zrzuty ekranu(dla mnie) i zapewnienie wizualnej możliwości „dogłębnienia” podczas spotkań z klientami, co miałeś na myśli.

Deviceponsive jest podobne do witryny Am I Responsive? taki, który wyświetla Twoją witrynę w prosty i schludny sposób, ale nie ma kontroli ani dostępnych opcji, jeśli chodzi o urządzenia. Wszystkie są pokazane jednocześnie na jednej długiej stronie. Ma ciekawą właściwość - możesz modyfikować nagłówek edytując jego kolor tła i wstawiając własne logo, a następnie „wydrukować”. W ten sposób, w pewnym sensie, możesz obrandować swoją witrynę, pokazując klientowi zrzuty ekranu. Symulowane urządzenia i rozmiary ekranów w tej witrynie:

Macbook – 1280 x 800

iPada ( orientacja pionowa) - 768 x 1024

iPad (poziomo) – 1024 x 768

Kindle (portret) – 600 x 1024

Kindle (poziomo) – 1024 x 600

iPhone (orientacja pionowa) – 320 x 480

iPhone (poziomo) – 480 x 320

Galaktyka (portret) - 240 x 320

Galaktyka (krajobraz) – 320 x 240

Podobnie jak w przypadku większości podobnych narzędzi, paski przewijania pojawiają się na małych urządzeniach. Nie pojawią się na prawdziwym urządzeniu, ale aby móc przewijać widok testowy na urządzeniu bez dotyku, trzeba pójść na pewne ustępstwa.

Podobnie jak test responsywny, test responsywny wyświetla Twoją witrynę na wielu urządzeniach, ale zamiast wyświetlać je wszystkie na jednej stronie, wybierasz urządzenie, które chcesz wyświetlić, z prostego menu u góry strony. Przeglądając tę ​​witrynę na średniej wielkości laptopie, stwierdziłem, że zmniejszenie strony działa świetnie, pozwalając zobaczyć całą witrynę w oknie testowanego urządzenia.

Oferowanych jest tutaj trzynaście różnych okien podglądu z dużego monitora komputer stacjonarny na tak zwanego „Gównianego Androida” (szczerze mówiąc, mają też opcję o nazwie „ Android jest lepszy„(Ładniejszy Android).

Po raz kolejny Firefox potyka się trochę na tej stronie. Zauważ na zrzucie ekranu - pomiędzy zielonym nagłówkiem a obszarem zawartości z białym tłem - znajduje się tylko niebieski pasek w miejscu, w którym powinien pojawić się suwak obrazu.

Jest bardzo podobny do dwóch poprzednich, a jedyną rzeczą, która wyróżnia Response.is od nich jest płynna animacja wyświetlacza z jednego urządzenia na drugie, a także półprzezroczysta nakładka pokazująca wypadanie nieruchomości witryny z rzutni .

Tylko raz dostępne opcje urządzenia tutaj są urządzeniami automatycznymi, które wypełniają okno przeglądarki i wyświetlają witrynę tak, jak byś ją widział, gdybyś na nią poszedł: Pulpit; Tablet (orientacja pozioma); Tablet (orientacja pionowa); Smartfon (orientacja pozioma) i Smartfon (orientacja pionowa), wymiary w pikselach nie są podane.

Po raz kolejny kilka różnych funkcji i opcji odróżnia Screenqueries od innych witryn. Oto 14 telefonów i 12 urządzenia typu tablet z oddzielnym elementem do przełączania trybów portretu i krajobrazu. Są one wyświetlane na numerowanej siatce pikseli, a wymiary są pokazane w prawym dolnym rogu ekranu testowego. Krawędzie wyświetlacza można przeciągać, dzięki czemu można testować niestandardowe rozmiary. Przeciągnij lub kliknij obszar testowy, a tło zmieni kolor na szary i będzie mniej zaśmiecone.

Ciekawą funkcją tej witryny jest to, że w przypadku wielu urządzeń dostępna jest opcja „True View”, która wyświetla witrynę w widoku odpowiednim dla tego urządzenia. przeglądarka Chrome. Niestety, a jestem już do tego przyzwyczajony, Firefox nie jest w stanie wyświetlić suwaka obrazu strony testowej. Nie martw się, jeśli chodzi o przeglądarki, naprawdę wolę Firefoksa, ale na szczęście mamy wybór.

Screenfly naprawdę zwiększa współczynnik użyteczności. Oferuje dziewięć urządzeń większych niż tablety, od 10-calowego laptopa po 24-calowy komputer stacjonarny, pięć tabletów, dziewięć smartfonów, trzy rozmiary telewizorów i opcję niestandardowego rozmiaru ekranu. Każdą wybraną opcję można obracać w pionie lub poziomie za pomocą element indywidualny elementy sterujące menu. Możesz wybrać, czy chcesz zezwolić na przewijanie, czy nie, i wygenerować link do udostępnienia jednym kliknięciem przycisku.

Witryna jest aktywnie użyteczna, ponieważ przedstawia informacje o rozmiarze pikseli. Każde urządzenie w menu pokazywane jest z nazwą i wymiarami w pikselach, w prawym górnym rogu okna pokazana jest wielkość własnego okna przeglądarki, a wymiary wybranej opcji pokazane są w stopce pod wyświetlaczem wraz z ikoną Adres URL testowanej witryny. Ta niewielka funkcja ułatwia dokumentowanie zrzutów ekranu i udostępnianie informacji klientom.

Wszystko to uczyniłoby z niego idealne narzędzie, ale programiści Screenfly znaleźli okazję, aby uczynić go po prostu najwyższej klasy i udostępnili właściwość serwera proxy. Cytat z ich strony internetowej: „Screenfly może używać serwera proxy do podszywania się pod urządzenia podczas przeglądania ich witryny. Serwer proxy symuluje ciąg agenta użytkownika wybranych urządzeń, ale nie zachowanie tych urządzeń. Wszystkie inne narzędzia omówione tutaj dotyczą wyłącznie CSS. Screenfly jest jedynym, który umożliwia testowanie w oparciu o ciąg agenta użytkownika.

Po przetestowaniu w ten sposób jednej strony internetowej, którą stworzyłem z istniejącą wersją mobilną, mogę powiedzieć, że wyniki były bardzo dobre. Wszystko wyświetlało się dokładnie tak, jak się spodziewałem, a funkcje można było przetestować. Trzeba powiedzieć, że testowanie ciągów agentów użytkownika stało się tradycją, ale ta strona powstała dawno temu, a właściwość proxy okazała się rzeczywiście bardzo przydatnym dodatkiem.

Widzisz więc, że dostępnych jest mnóstwo zasobów do testowania responsywnych stron internetowych. Różnią się unikalnymi właściwościami; z których witryn skorzystasz, będzie zależeć od Twoich osobistych preferencji i wymagań. Staram się zachęcać Cię do ich eksplorowania i eksperymentowania z nimi. Im więcej my, programiści, mamy naprawdę przydatnych narzędzi, tym lepiej.

Witajcie drodzy czytelnicy bloga. Nic dziwnego, że projektowanie adaptacyjne staje się coraz bardziej popularne w rosyjskim Internecie. I oczywiście projektanci układu muszą to przestudiować. Ponieważ responsywność już niedługo będzie dostępna na niemal wszystkich stronach internetowych, gdyż coraz więcej osób korzysta z urządzeń mobilnych.

I chciałbym powiedzieć, że strony z nim są znacznie wygodniejsze do czytania na takich urządzeniach niż bez niego.

Dziś chcę przedstawić Ci 5 bardzo przydatnych i fajnych usług, dzięki którym możesz sprawdzić swoją witrynę pod kątem możliwości dostosowania.

I tak, chodźmy.

Dobra usługa sprawdzania witryn. Istnieje wiele rozdzielczości ekranu zarówno dla tabletów, jak i telefonów.

Prosta usługa sprawdzania strony internetowej Matta Kersleya. Dostępne są także wszystkie popularne rozdzielczości urządzeń mobilnych.

Bardzo fajna usługa, która sprawdzi każdą witrynę. Bardzo spodobał mi się design, a także funkcjonalność.

Bardzo piękna i funkcjonalna obsługa. Można nawet sprawdzić jak strona będzie wyglądać w telewizji :-)

Wraz z rozwojem technologii internetowych rosną również wymagania dotyczące tworzenia stron internetowych. Największą presję odczuwają programiści WWW, projektanci układów, czyli jak się ich dziś nazywa, programiści frontendowi.

W tym artykule porozmawiamy trochę o układzie adaptacyjnym, ponieważ ta „sztuczka” jest obecnie bardzo droga. Jeśli chodzi o układ adaptacyjny, projektanci układu na każdym poziomie patrzą na klientów lub kierowników projektów, delikatnie mówiąc, ze złością, ponieważ rozumieją, jakie to trudne.

Wiele osób zaczyna mylić układ adaptacyjny z układem elastycznym; jest to bardzo częsty błąd początkujących projektantów układów. Jaka jest różnica, pytasz?

Najpierw, żeby było dla ciebie jasne i że tak powiem, umieść wszystkie kropki i sprawdź, jakie są rodzaje układów.

Istnieją 4 typy układu:

Przyjrzyjmy się wszystkim typom bardziej szczegółowo.

1. Naprawiono układ

Bloki nie zmieniają swojej szerokości. Na monitorach o niskiej rozdzielczości pojawia się poziomy pasek przewijania.

#temnyi, #svetlyi ( szerokość: 440px; )

2. Układ gumy

Bloki zmieniają swoją szerokość w zależności od wielkości okna przeglądarki. Może przyjmować wartości maksymalne i minimalne (właściwość max-width). Ale nie możesz zrobić 50% z 50% do 100%, gdy ekran się zmniejsza.

#temnyi, #svetlyi ( szerokość: 50%; )

3. Układ adaptacyjny

Zaimplementowano przy użyciu @media lub skryptów. Dostosowane do konkretnych znanych urządzeń (320, 768, 1024 itp.). Jakakolwiek zmiana następuje w szarpnięciach, po osiągnięciu jednego z określonych poziomów. Zdecydowanie nadaje się do

#temnyi, #svetlyi ( szerokość: 430px; ) @media (maks. szerokość: 1220px) ( #temnyi, #svetlyi ( szerokość: 380px; ) ) @media (maks. szerokość: 1120px) ( #temnyi, #svetlyi ( szerokość : 325px; ) ) @media (maksymalna szerokość: 680px) ( #temnyi, #svetlyi ( szerokość: 200px; ) )

4. Responsywny układ

Jest to połączenie układu płynnego i adaptacyjnego. Najtrudniejszy do zrealizowania. Ale wynik jest najbardziej akceptowalny. Można śmiało powiedzieć, że strona dostosuje się do każdego urządzenia.

#temnyi, #svetlyi ( szerokość: 50%; ) @media (max-width: 1006px) ( #temnyi, #svetlyi ( szerokość: 100%; ) )

Mówiliśmy więc o 4 typach układu strony internetowej. Teraz przyszedł czas na nasz cudowny skrypt układu adaptacyjnego. Mam nadzieję, że nie muszę niczego wyjaśniać, scenariusz jest dość prosty, mówimy tylko, że jak zmienisz, jakiś blok zostanie gdzieś zmiksowany i tyle. Oczywiście jest to możliwe poprzez Style CSS, ale trzeba znać wszystkie metody; czasami w niektórych miejscach niektóre nie będą działać, a niektóre będą w sam raz.

Skrypt układu adaptacyjnego:

/* Stwórzmy zmienną, w której możesz umieścić klasy monogestowe, aby wygodnie używać ich w kodzie. Czyli tutaj wykrywa je raz i tyle, a nie przed każdą próbką! jest to przydatna funkcja */ var my = ( window: $(window) ); /*Właściwie sama funkcja*/ $(window).resize(function () ( /*Zmienna określająca szerokość okna i umieszczająca ją w zmiennej szerokości*/ var szerokość = my.window.width( ); /*warunek transformacji okna, czyli warunek, który zostanie wykonany, gdy szerokość okna osiągnie określony rozmiar */ 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") } });

To wszystko. Jeśli masz pytania, napisz w komentarzach, przejdź do

Dziś nie trzeba już nikogo przekonywać o takiej konieczności wersja mobilna strona. W końcu każdego dnia coraz więcej odwiedzających korzysta ze smartfonów i tabletów. W chwili pisania tego tekstu około 20% osób odwiedzających mój blog korzysta z urządzeń mobilnych do przeglądania. Oznacza to, że co piąta osoba odwiedza moją stronę internetową z telefonu lub tabletu.

Kilka lat temu nawet nie myślałem o takich gościach, ale gdy ich liczba przekroczyła 10%. Łączna Zacząłem używać układu adaptacyjnego. Umożliwiło to prawidłowe wyświetlanie treści na urządzeniach mobilnych i zwiększyło lojalność wobec witryny zarówno dla odwiedzających, jak i Wyszukiwarki.

Mobilna wersja strony internetowej i responsywny projekt to nie to samo. W tym artykule porozmawiamy o testowaniu układu adaptacyjnego, gdy wygląd witryny zmienia się w zależności od rozdzielczości ekranu urządzenia odwiedzającego.

Aby mieć pewność, że Twoja witryna wyświetla się poprawnie na urządzeniach mobilnych, musisz to sprawdzić, a jest ich kilka przydatne usługi i narzędzia.

Popularna przeglądarka internetowa (przeglądarka) Mozilla Firefox wyposażony we wbudowane narzędzia umożliwiające sprawdzenie projektu serwisu pod kątem przydatności do wyświetlania na urządzeniach mobilnych. Aby z niego skorzystać, przejdź do „Menu” - „Rozwój” - „Projekt adaptacyjny”. Lub po prostu naciśnij trzy klawisze na klawiaturze jednocześnie ++[M]

Powinieneś zobaczyć coś takiego:

Zmieniając rozdzielczość i orientację ekranu, możesz sprawdzić, jak Twoja witryna będzie wyświetlana użytkownikom mobilnym.

Przeglądarka GoogleChrome Posiada również wbudowaną obsługę sprawdzania adaptowalności projektu witryny. W tym celu należy wejść do menu, wybrać „Narzędzia dodatkowe”, a następnie „Narzędzia deweloperskie” (lub nacisnąć klawisz ).

Następnie kliknij ikonę projektu responsywnego (lub jednocześnie naciśnij ++[M] na klawiaturze):

Na środku ekranu zobaczysz, jak Twoja witryna będzie wyświetlana na ekranach urządzeń mobilnych:

Jak wiadomo, dwaj światowi liderzy wyszukiwarek Google i Yandex mają własne, nieskromne zdanie na temat tego, jak strona internetowa powinna wyglądać na ekranach urządzeń mobilnych. A jeśli witryna zostanie uznana za niewygodną dla użytkowników mobilnych, zostanie obniżona w wynikach wyszukiwania. Zatem z punktu widzenia SEO, jeśli nie chcesz stracić użytkowników mobilnych, nie tylko musisz mieć responsywny projekt, ale także wyszukiwarki muszą uznać go za responsywny, co oznacza, że ​​jest przyjazny dla urządzeń mobilnych.

Aby sprawdzić zdolność adaptacji za pomocą Usługa Google'a przejdź pod poniższy adres i wpisz nazwę swojej witryny: https://www.google.com/webmasters/tools/mobile-Friendly/.

Tak wygląda wynik sprawdzenia mojego bloga:

W przypadku Yandex jest to nieco bardziej skomplikowane; aby to sprawdzić, musisz zarejestrować się w usłudze Yandex.Webmaster i skorzystać z wersji beta interfejsu:

Głównym zadaniem tych usług jest zaprezentowanie (pokazanie), jak będzie wyglądać Twoja witryna internetowa urządzenie przenośne. Istnieje wiele witryn oferujących taką funkcjonalność. Podam tylko kilka z nich. W większości przypadków powielają wbudowaną funkcjonalność FireFox i Chrome.

Zacznę jeszcze raz od Google, które ma własną usługę demonstrowania zdolności adaptacyjnych: http://design.google.com/resizer/#

Drugą miłą usługą jest http://quirktools.com/screenfly/. Pokaże Ci jak Twoja strona może wyglądać nawet w telewizji!

Cóż, aby nie urazić „krajowego producenta”, podam przykład innej strony: http://symby.ru/adaptest/. Na jednej stronie zobaczysz kilka widoków o różnych rozdzielczościach ekranu.

Gdy już będziesz mieć pewność, że Twoja witryna jest responsywna i poprawnie wyświetla się na większości urządzeń, sprawdź jej szybkość. Ponownie w odniesieniu do odwiedzających mobilnych.

Google jak zawsze wyprzedza konkurencję: https://developers.google.com/speed/pagespeed/insights/. Usługa ta pokaże Ci jak strona wygląda na ekranie telefonu oraz poda rekomendacje dotyczące optymalizacji kodu w celu zwiększenia szybkości ładowania na urządzeniach mobilnych.

Na zakończenie podam przykład usługi, która nie tylko pokaże, jak strona wygląda na urządzeniu mobilnym, ale także pokaże jej szybkość: http://www.webpagetest.org/

Moim zdaniem w codziennej pracy, wprowadzając zmiany w projekcie strony, łatwiej jest skorzystać z wbudowanych możliwości Przeglądarki FireFox i Chrome. Następnie musisz oczywiście sprawdzić lojalność wyszukiwarek wobec Twojego projektu. I dopiero wtedy, dla uspokojenia duszy lub popisu, możesz skorzystać z usług online.