Go mobile - co to właściwie znaczy

W artykule zaprezentowano aspekty dostosowania stron internetowych do urządzeń mobilnych. Artykuł polecany szczególnie małym przedsiębiorcom istniejącym w internecie oraz osobom nieobeznanym w kwestiach technicznych.

Od kilku lat Google i inni internetowi giganci coraz większą uwagę zwracają na użytkowników urządzeń mobilnych. Dlaczego? Dlatego że już 2 lata temu liczba komórek na świecie przekroczyła liczbę komputerów osobistych. Każdy z nas ma komórkę, większość ma nowoczesny smartfon a część nawet dwa. Smartfonu używamy nie tylko do prowadzenia rozmów. To urządzenie o mocy obliczeniowej porównywalnej z komputerem PC, mogącym służyć nam za przenośne biuro, organizer, nawigację, urządzenie do przeglądania internetu (a jakże), odtwarzacz muzyki, kamerę, urządzenie do gier. Możliwości zastosowań jest mnóstwo, skupmy się natomiast na samym przeglądaniu stron internetowych. Smartfon jest mały i poręczny, co jest jednocześnie jego wadą i zaletą. Zaletą dlatego że zmieści się w kieszeni, mało waży i zajmuje mało miejsca. Wadą dlatego, że posiada mały ekran o rozdzielczości mniejszej niż w komputerze stacjonarnym. To wszystko sprawia, że projektując strony internetowe trzeba inaczej podejść do użytkowników mobilnych.

Jak Google ocenia witryny mobilne?

Google ma na uwadze komfort i wrażenia użytkowników przeglądających witrynę na urządzeniach mobilnych. Dziś wersja mobilna witryny to właściwie nie żaden komfort albo dodatek dla nielicznych, to must-have, czyli coś co każdy właściciel witryny musi mieć. Jest kilka nadrzędnych kryteriów, którymi Google się kieruje. Przede wszystkim wielkość tekstu. Po załadowaniu witryny najlepiej by było, aby tekst był od razu odpowiedniej wielkości (tj. duże litery) i aby użytkownik na starcie nie musiał go powiększać. Druga sprawa to wszelkie linki, przyciski, elementy menu i nawigacji. Jako że ekran telefonu ma mniejsze rozmiary od ekranu komputera, a palec ludzki służy w smartfonie jako myszka (element wskazujący), to trudno oczekiwać precyzji aby palcem kliknąć w mały element na ekranie. Z tego powodu aby ograniczyć frustrację użytkowników mobilnych, linki i przyciski muszą być odpowiednio powiększone w stosunku do wersji komputerowej. Ważna jest też odpowiednia odległość elementów klikalnych (linków, przycisków) od innych elementów. Znowu, urządzeniem wskazującym jest nasz palec i trudno oczekiwać od niego wielkiej precyzji. Ogólnie przeglądanie stron powinno być łatwe i przyjemne dla użytkowników mobilnych. Kolejnym elementem jest szybkość wczytywania się strony. Nikt nie lubi wieki czekać na załadowanie się strony. Badania potwierdzają, że jeśli strona ładuje się dłużej niż 3 s, to użytkownik mobilny nie czeka dłużej tylko wychodzi i szuka innej strony. Aby nie stracić odwiedzającego na rzecz konkurencji, warto zadbać o szybki serwer oraz o to, aby witryna zawierała mało dodatkowych skryptów javascript i elementów zewnętrznych. Im więcej elementów do załadowania podczas wczytywania strony, tym dłużej trwa ładowanie strony i tym większe jest zniecierpliwienie użytkowników. Od ponad roku szybkość wczytywania się witryny jest jednym z elementów użytych do ustalania pozycji w Google. Przyjmijcie zasadę, że jeśli czytelników witryny macie w Polsce, to serwer też powinien być w Polsce. Może zainteresujesz się funkcjonalnością AMP do polepszenia szybkości wczytywania stron mobilnych.

Kolejna rzecz to obrazki. Powinny one być zoptymalizowane pod kątem użytkowników mobilnych, gdyż zarówno rozmiar ekranu jak i rozdzielczość komórki ogranicza jego możliwości prezentacji zdjęć. Mając na uwadze również prędkość wczytywania się witryny, obrazki dla użytkowników komórek powinny być zoptymalizowane zarówno pod kątem rozmiaru, jak i rozdzielczości. Waga obrazu z kB nie powinna przekraczać 250 kB, a rozdzielczość 2 Megapikseli. Preferowany format obrazków na cele webowe to jpeg dla zdjęć z kompresją 70-90 % oraz gif dla schematów, diagramów, prostych animacji i obrazów zawierających małą liczbę kolorów.

Kolejnym czynnikiem jest obszar roboczy ekranu. Oczywiste jest, że obszar taki dla komórek jest mniejszy niż dla desktopów, w związku z tym stronę trzeba przeprojektować tak, aby nie była przeładowana niepotrzebnymi elementami, aby wszystko miało właściwy rozmiar i odstępy, aby nie trzeba było niepotrzebnie scrollować witryny. Mam tu na myśli że po załadowaniu witryny mobilnej część elementów wystaje poza obszar widoczny witryny i w związku z tym użytkownik musi przewijać stronę aby odczytać treść poza obszarem widocznym. Zasada jest prosta. Maksymalna szerokość witryny powinna wynikać z obszaru roboczego urządzenia mobilnego i powinna się dostosować dynamicznie do urządzenia. Oznacza to także, że zmieniając orientację komórki z pionowej na poziomą, również witryna sama się dostosuje do nowych wymiarów (przestrzeni roboczej) i odpowiednio wypełni cały dostępny obszar.

Pamiętaj, że ze względu na mniejszy ekran komórek, często ilość informacji prezentowana użytkownikom mobilnym jest mniejsza niż użytkownikom desktopów. Oznacza to, że witryna mobilna powinna zapewniać użytkownikowi dostęp do kluczowych funkcji i informacji, a nie do wszystkich treści które są na witrynie. Strona główna nie może być przeładowana, musi prezentować tylko naprawdę potrzebne funkcjonalności i zajawki artykułów, a menu powinno być intuicyjne i czytelne. Pamiętaj jeśli coś sprzedajesz lub rezerwujesz na swojej witrynie mobilnej to spraw, aby przyciski wzywające do akcji były duże, czytelne, odpowiednio oddalone od innych elementów witryny i ciekawe kolorystycznie. Zwróć uwagę na nawigację, upewnij się że z każdej strony w obrębie Twojej witryny możliwy jest powrót do strony głównej. Jeśli masz długie strony z artykułami to dodaj do takich stron przycisk 'Powrót na górę'. Zaoszczędzi to użytkownikowi komórki żmudnego przewijania.

Ogranicz wszelkiej maści wyskakujące okienka, zmniejsz okna informujące o cookies, nie wyświetlaj na każdej stronie formularza zapisu na newsletter. Pamiętaj że to denerwuje użytkowników komórek, jako że na ekranie komórki trudniej jest zamknąć wyskakujące okienko. Projektuj witrynę tak, jakbyś Ty sam chciał ją oglądać. Ułatw użytkownikom maksymalnie znalezienie potrzebnej informacji. Oznacza to, żebyś wstawił wyszukiwarkę na stronie, a także wypisał w podręcznym menu przydatne linki z których mogą korzystać mobilni użytkownicy witryny. Ułatw użytkownikom mobilnym nawigację i przeglądanie witryny. Jako przykłady mogę podać: automatyczne uzupełnianie zapytań podanych przez użytkowników mobilnych, automatyczne poprawianie błędów przy wyszukiwaniu frazy, Pamiętaj: mniej znaczy więcej w przypadku użytkowników mobilnych. 

W przypadku formularzy rejestracji i koszyka zakupowego spraw, aby użytkownik nie musiał odpowiadać na zbyt dużo pytań i wypełniać zbyt wielu pól. Pisanie na klawiaturze telefonu nie jest tak przyjemne i sprawne jak pisanie na klawiaturze komputera. Jeśli użytkownik próbuje się zarejestrować lub dokonać zakupu spraw, aby wiedział on w którym etapie procesu on się znajduje i aby wiedział ile zostało mu jeszcze do końca. Rozważ wprowadzenie logowania za pomocą serwisów społecznościowych, jak Google+ czy facebook. Pamiętaj że większość użytkowników jest na stałe podłączona do konta Google, Twitter lub Facebook w swoich telefonach, możesz więc to wykorzystać i ułatwić im logowanie lub rejestrację na swojej witrynie.

Jak Google może pomóc Ci dostosowań swoją stronę do urządzeń mobilnych

Możesz skorzystać z kilku narzędzi które odpowiedzą na pytania: czy Twoja witryna jest dostosowana do urządzeń mobilnych i co powinieneś w niej poprawić.

Po pierwsze polecam Ci prosty test który odpowiada Tak/Nie czy podana witryna dobrze wyświetla się na urządzeniach mobilnych. Pamiętaj że powyższe narzędzie nie bada całej witryny tylko konkretny adres, więc radzę Ci abyś sprawdził kilka stron w Twojej witrynie, np. stronę główną, stronę z artykułem, produktem lub postem, stronę z kontaktem, stronę rejestracji, logowania lub koszyka.

Jeśli z testu wyjdzie Ci, że strona nie jest dostosowana do komórek, może będziesz chciał się dowiedzieć więcej o projektowaniu witryn mobilnych. Jako trzecie narzędzie polecam Ci dodanie strony do Search Console. Dzięki temu dowiesz się, jak Twoja witryna widoczna jest w wyszukiwarce Google, czy nie ma z nią problemów, możesz przyspieszyć zaindeksowanie nowych podstron lub zmienić jej konfigurację w Google. Na koniec zainstaluj kod Google Analytics na swoją witrynę aby śledzić, ile użytkowników odwiedza Twoją witrynę, z jakich urządzeń (komputery,komórki,tablety),jaka tendencja się utrzymuje, czy aby przypadkiem ruch z urządzeń mobilnych nie jest słabszej jakości (krótszy czas przeglądania podczas sesji, wyższy współczynnik odrzuceń, mniej stron przeglądanych podczas sesji, mniej celów zrealizowanych podczas wizyty). Możesz do tego celu stworzyć segmenty, które pozwolą wyfiltrować Ci użytkowników mobilnych i poddać taki segment analizie. Po wdrożeniu witryny mobilnej porównaj jej statystyki w porównaniu do miesiąca kiedy wersji mobilnej jeszcze nie było i odpowiedz na pytanie, czy wersja mobilna witryny ułatwiła odwiedzającym przeglądanie witryny. Jeśli pozycjonujesz się w wyszukiwarce to powinieneś regularnie sprawdzać pozycję fraz używając specjalnych narzędzi, jak np. Web-tools.pl. Pamiętaj jednak, aby sprawdzać widoczność poszczególnych fraz osobno w komputerowej wersji wyszukiwarki jak i w wersji mobilnej wyszukiwarki Google. To dwie różne sprawy.

Podsumowanie

Jeśli wytrwałeś do tego miejsca to masz już wystarczającą wiedzę nt. aspektów witryn mobilnych. Wiesz, że spełniając wymogi Google dotyczące witryn mobilnych ułatwisz swoim użytkownikom przeglądanie witryny, za co oni odwdzięczą Ci się dłuższym czasem spędzanym na witrynie, czytaniem większej ilości artykułów, a być może bardziej ochoczo kupią oni towary w Twoim sklepie.

Strona główna - przed dostosowaniem do mobile i po

Strona produktu - przed dostosowaniem do mobile i po

Na koniec chciałem Wam pokazać kilka obrazków witryn zoptymalizowanych pod kątem urządzeń mobilnych przed i po, które sam optymalizowałem w zeszłym roku. Napiszcie w komentarzach jakie widzicie zalety dostosowania witryn do użytkowników mobilnych. Pochwalcie się adresem swojej witryny dostosowanej do urządzeń mobilnych.