fbpx

Wersje mobilne strony – najczęstsze błędy

W poradniku:

  • dlaczego wersja mobilna jest tak ważna
  • ile osób przegląda strony na urządzeniach mobilnych – nasze statystyki
  • jak dopracować wersję mobilną swojej strony, dobre praktyki i porady
  • najczęstsze błędy w wersjach mobilnych stron internetowych
Wersje mobilne strony - najczęstsze błędy

Nie jest dla nikogo zaskoczeniem – więcej stron internetowych jest przeglądanych na urządzeniach mobilnych niż na komputerach (źródło). Sytuacja różni się w zależności od kraju, ale można z pewnością powiedzieć że w Polsce gonimy ten trend. Wydawałoby się, ze dopracowana wersja mobilna będzie standardem. Tak jednak nie jest. Zobaczmy więc na co warto zwracać uwagę przy wersjach mobilnych i dlaczego w ogóle są tak istotne.

Dlaczego wersja mobilna jest tak ważna?

Pierwszy powód, który poda wielu pozycjonerów to wpływ wersji mobilnej na pozycje witryny w wynikach wyszukiwania. Google otwarcie przyznał, że jeśli witryna nie ma wersji mobilnej (lub jest niedopracowana) to gdy wyszukiwanie ma miejsce na urządzeniach mobilnych strona będzie niżej w wynikach. Co więcej, tu plany idą jeszcze dalej, bo w przyszłym roku Google planuje uruchomić całkowicie osobny indeks wyników dla wyszukań mobilnych.

Drugi powód jest oczywiście związany z kwestiami usability i konwersji. Jeśli użytkownik nie będzie mógł poprawnie wyświetlić witryny na swoim urządzeniu to po prostu zamknie stronę i przejdzie do następnej witryny.

Myślę, że to dwa całkiem dobre powody dla których warto zadbać o wersję mobilną strony. Zobaczmy więc jakie są najczęstsze problemy.

Brak wersji mobilnej

Oczywiście największym problemem przy wersji mobilnej jest jej brak :). Pomimo że dane o tym, że wyszukiwania z urządzeń mobilnych są tak liczne jak z urządzeń stacjonarnych to nadal znajdziemy sporo przykładów stron, które takowych wersji nie mają. Każdy dąży do większego ruchu, większej sprzedaży ale trzeba najpierw zadbać o podstawy.

Sprawdziliśmy jak to wygląda na kilku losowych serwisach naszych klientów o różnej tematyce (taką możliwość daje np. Google Analytics w części Odbiorcy → Ruch mobilny ). Wyniki przedstawiają się następująco:

Klient 1 – sklep internetowy:
Desktop: 59%
Tablety: 6%
Telefony: 35%

Klient 2 – portal medyczny:
Desktop: 48%
Tablety: 7%
Telefony: 45%

Klient 3 – portal finansowy:
Desktop: 76%
Tablety: 4%
Telefony: 20%

Klient 4 – strona lekarza, usługi lokalne w ramach miasta:
Desktop: 64%
Tablety: 5%
Telefony: 31%

Klient 5 – blog:
Desktop: 46%
Tablety: 4%
Telefony: 50%

Ciekawe jest, że udział tabletów jest raczej mały, co nie znaczy że można pominąć je przy tworzeniu wersji mobilnej. .

Natomiast liczby desktop vs. telefony różnią się zależnie od branży. W kilku przypadkach ruch z wersji desktop stanowił mniej niż 50%. Nawet jeśli dla danej branży ruch mobilny jest mniejszy to i tak oscyluje w granicach 20-30%. Jakby na to nie patrzeć, 30% ruchu to nadal spora część odwiedzających o których warto zadbać.

Wersja dostosowana tylko do niektórych urządzeń

W przypadku wersji mobilnych można mówić o dwóch głównych typach to jest:

– wersja RWD (Responsive Web Design) – strona responsywna, która dostosowuje się do danego urządzenia. Czyli mamy jeden kod html strony, a style CSS są napisane tak że dostosowują się do rozdzielczości danego urządzenia

wersja responsywna

– wersja AWD (Adaptive Web Design) – wersja adaptacyjna strony, pisana z myślą o konkretnym urządzeniu. Przy otwieraniu strony rozpoznawany jest typ urządzenia i wyświetlany jest odpowiedni kod. Dla każdej wersji mamy osobny kod html, stąd często ładowany jest z subdomeny (np. http://m.strona.pl).

Najpopularniejszy obecnie format to RWD, zaś AWD rzadko kiedy ma uzasadnienie w dzisiejszych czasach.

Jeszcze jeden problem jest w ramach samego RWD. Dobra wersja RWD dostosuje się do każdego urządzenia, ale żeby tak było trzeba napisać dobry kod jak również przetestować naszą wersję RWD. Tymczasem często zdarza się, że deweloper ogranicza się tylko do testów na swoim smartfonie albo smartfonie klienta :). A tu przecież nie o to chodzi. Jest dużo różnych urządzeń, o różnych rozdzielczościach.

Długi czas ładowania

Prędkość ładowania to wiele razy poruszany temat. Można przeczytać wiele badań na temat tego jak szybkość ładowania strony wpływa na zachowania użytkowników, porzucenia itd. Jednak prawda jest taka, że tu nawet bez zapoznawania się z wynikami testów można dojść do podobnych wniosków. Nawet na bazie własnych doświadczeń :).

Ile to razy zdarzyło się nam zamknięcie strony lub przejście do następnej zakładki gdy pierwsza strona nie chciała się otworzyć? Użytkownicy chcą dane tu i teraz i jest to coś do czego się trzeba dostosować.

Narzędzie Google PageSpeed Insights pokazuje wyniki szybkości ładowania strony osobno dla PC i urządzeń mobilnych.

narzędzie google pagespeed insights

Bardzo fajne jest w tym narzędziu to, że po analizie dostajemy dokładne sugestie co wymaga poprawy. Nawet jak nie jesteśmy się w stanie z czymś sami uporać to zawsze możemy przekazać dokładne wytyczne programiście odpowiedzialnemu za stronę.

Niepoprawne ładowanie / Źle wykonana wersja mobilna

Zdarza się to dość często. Wersja mobilna źle się wyświetla na naszym urządzeniu mobilnym. Bierze się to stąd, że jest po prostu niedopracowana. Czasem są to błędy, które psują tylko wizualny odbiór strony, czyli np. źle wyświetlający się obrazek, źle dobrany rozmiar czcionki.

Są też błędy, które uniemożliwiają całkiem korzystanie z niektórych elementów witryny jak np. schowany przycisk wyślij przy formularzu, nieczytelne menu. Jeszcze raz widać tu, że testy są po prostu konieczne i nie można zadowolić się faktem, że na jednym urządzeniu strona wyświetla się poprawnie.

Zła nawigacja mobilna

To mogłoby wpaść pod temat źle wykonanej wersji mobilnej, ale warto osobno omówić osobno nawigację mobilną. Musi ona być czytelna i łatwa w obsłudze. Nie jest to takie łatwe do osiągnięcia, szczególnie przy stronach, które mają mocno rozbudowaną strukturę.

Na szczęście z pomocą przychodzi jQuery i jest sporo sposobów, by zrobić czytelne menu gdy mamy do czynienia z rozbudowaną strukturą. Na tej stronie zaprezentowane zostały najróżniejsze podejścia do nawigacji mobilnej.

W przypadku wersji mobilnej często wdrażałem to wielopoziomowe menu (demo na http://tympanus.net/Development/ResponsiveMultiLevelMenu/). Jest trochę ciężkie do wdrożenia i ostylowania, ale efekt końcowy zawsze jest dobry. Jest przejrzyste i bardzo funkcjonalne:

menu mobilne przykład

Popupy

Wtyczki popup jak również sam CSS (z pomocą media query) dają możliwość wyłączenia popupów na urządzeniach mobilnych. Nie ma chyba nic bardziej irytującego niż popupy na smartfonie, bo najczęściej zajmują one od razu cały ekran. Co gorsza, zdarza się że przycisk do zamknięcia chowa się gdzieś poza ekranem… Samo zło.

Długie formularze i inne grzechy UX

Strona może dobrze się wyświetlać na urządzeniach mobilnych i na desktop. Jednak co do samej funkcjonalności to nie zawsze to co zdało egzamin na dużym monitorze komputera będzie działać tak samo dobrze na smartfonie. Przykład który pierwszy przychodzi na myśl to długie formularze składające się z wielu pól. Mało komu będzie chciało się wypełniać taki formularz na komórce.

To tylko przykład. Warto zrobić analizę UX zarówno wersji desktop jak i wersji mobilnej, by wyłapać problemy tego typu.

Brak dostosowania do starszych urządzeń pod kątem wyświetlacza

Nowe smartfony pojawiają się teraz średnio co roku a nawet częściej (przykład Galaxy S, iPhone) i wielu użytkowników idzie tym trendem i chce mieć najnowszy dostępny model. Jest jednak spora grupa użytkowników, która wymienia swoje telefony rzadziej lub kupuje urządzenia używane.

Co za tym idzie, mają smartfona ale o mniejszym wyświetlaczu. Przykładem jest iPhone 5, który przez długi czas był bardzo popularny ale jego mały wyświetlacz znacznie odbiegał od konkurencji. Nie znaczy to jednak że przy tworzeniu strony można pomijając użytkowników piątki.

Po premierze modelu 6 i 7 piątki mocno staniały i krążą gdzieś w obiegu na rynku telefonów używanych. Dlatego warto przy testowaniu wersji mobilnej strony sprawdzić jak zachowuje się strona na nieco starszych smartfonach. Oczywiście bez przesady, nie trzeba cofać się w czasie do pierwszych smartfonów. Ale sprawdzenie jak strona wyświetla się na modelach telefonów sprzed 3-4 lat jest dobrą zasadą.

Niedostosowana do Safari / różnych przeglądarek

Bardzo często zapominana rzecz przy tworzeniu urządzeń mobilnych to różnorodność oprogramowania i przeglądarek. Na androidzie mamy wbudowane przeglądarki, ale użytkownik może też zainstalować Firefoxa, Chrome lub inną. Trzeba sprawdzić jak na wersji mobilnej na każdej z nich wyświetla się strona.

iphone zdjęcie

Osobny przykład to Safari na iOS. Szczególnie starsze wersje Safari to jest niezła zabawa przy tworzeniu wersji mobilnej, prawie taka jak walka z Internet Explorerem ;). W skrócie, pewne style interpretowane są inaczej na Safari niż na Firefox czy Chrome. W efekcie dopracowana wersja mobilna pięknie działająca na Firefox i Chrome totalnie się sypie na Safari. Dotyczy to zarówno wersji desktop jak i wersji mobilnych.

Stąd popularność strony Can I use wśród web developerów. Dzięki niej mogą sprawdzić, które funkcje i style działają na określonych przeglądarkach i konkretnych ich wersjach. Przykład: http://caniuse.com/#feat=dragndrop.

Liczby mówią same za siebie. Jest moda na telefony od Apple i nawet jeśli w naszym gronie przeważają androidowcy to nie znaczy to wcale, że liczba osób przeglądających stronę na iPhone będzie mała. Wręcz przeciwnie, a szczególnie jeśli strona ma wersję zagraniczną. Na Zachodzie iPhone dominuje i dlatego warto zadbać o wersję mobilną, która dobrze wyświetla się na iOS.

Osobny przykład to Safari na iOS. Szczególnie starsze wersje Safari to jest niezła zabawa przy tworzeniu wersji mobilnej, prawie taka jak walka z Internet Explorerem ;). W skrócie, pewne style interpretowane są inaczej na Safari niż na Firefox czy Chrome. W efekcie dopracowana wersja mobilna pięknie działająca na Firefox i Chrome totalnie się sypie na Safari. Dotyczy to zarówno wersji desktop jak i wersji mobilnych.

Stąd popularność strony Can I use wśród web developerów. Dzięki niej mogą sprawdzić, które funkcje i style działają na określonych przeglądarkach i konkretnych ich wersjach. Przykład: http://caniuse.com/#feat=dragndrop.

Liczby mówią same za siebie. Jest moda na telefony od Apple i nawet jeśli w naszym gronie przeważają androidowcy to nie znaczy to wcale, że liczba osób przeglądających stronę na iPhone będzie mała. Wręcz przeciwnie, a szczególnie jeśli strona ma wersję zagraniczną. Na Zachodzie iPhone dominuje i dlatego warto zadbać o wersję mobilną, która dobrze wyświetla się na iOS.

Niedostosowana do tabletów

Często przy tworzeniu wersji mobilnej koncentracja jest na smartfonach, a zapomina się o tabletach. Wersja responsywna strony powinna zapewnić dobre wyświetlanie także na nich, ale warto to sprawdzić.

Nacisk warto położyć na popularne iPady. Jest tam Safari i są podobne problemy z wyświetlaniem jak opisane wcześniej przy smartfonach.

Jak sprawdzić wyświetlanie naszej strony na różnych urządzeniach?

Dużo we wpisie było o testowaniu, sprawdzaniu na różnych systemach, przeglądarkach, urządzeniach. Jak najlepiej testować to w praktyce?

Na pewno najlepsze są testy na prawdziwych urządzeniach. Dobrze jest przynajmniej przetestować po jednym urządzeniu z Androidem i iOSem. Już to powinno pozwolić wyłapać większe błędy i niedociągnięcia.

Inny sposób to narzędzia dostępne w przeglądarkach.

W przeglądarce Google Chrome po przejściu do opcji i włączeniu Narzędzi dla programistów możemy wybrać zakładkę do testowania urządzeń mobilnych (druga ikona od lewej):

To tworzy nam podgląd jak wyświetla się strona w rozdzielczości typowej dla danego urządzenia (lista urządzeń jest większa niż na screenie, można ją poszerzyć):

chrome różne rozdzielczości telefonów

Również w Safari jest podobna opcja. Po włączeniu menu Programowanie mamy do wyboru podgląd na różnych przeglądarkach i urządzeniach:

testowanie wersji mobilnych

Jeśli ktoś chce jeszcze dokładniej sprawdzić wersję mobilną to są strony oferujące emulatory jak np. https://www.browserstack.com. To płatne narzędzie ale daje możliwość sprawdzenia strony na naprawdę dużej liczbie urządzeń.

Podsumowując

Jak widać temat wersji mobilnej nie jest tak prosty jakby mogło się wydawać. Jest tu kilka pułapek i sporo rzeczy o których warto pamiętać. Technika idzie do przodu i wersja mobilna po prostu musi być dobrze dopracowana.

sprawdź też

Porozmawiajmy

Powiedz nam czego potrzebujesz

Kontakt