Jak Sprawdzić i Dostosować Stronę do Urządzeń Mobilnych

jak dostosować stronę do urządzeń mobilnych

Szukasz prostych i skutecznych sposobów na dostosowanie swojej strony internetowej do urządzeń mobilnych? Jeśli odpowiedź jest twierdząca to z pewnością ten poradnik będzie dla Ciebie pomocny.

Niedawno Google na swoim oficjalnym blogu zapowiedziało, że jest w trakcie wdrażania specjalnego systemu indeksacji, który będzie dostosowany dla urządzeń mobilnych. Co to oznacza dla nas, dla twórców witryn i właścicieli sklepów internetowych?

Oznacza to, że powinniśmy wyjść naprzeciw trendom i dostosować stronę, w taki sposób, aby spełniała wszelkie wytyczne i jednocześnie była wygodna dla użytkowników.

Dlaczego ważna jest mobilna wersja strony?

Mobilna wersja strony inaczej jest nazywana responsywną. Ma za zadanie zapewnić maksymalny komfort w użytkowaniu na urządzeniach przenośnych.

Mówiąc prościej i nie używając aż nadto specjalistycznego żargonu chodzi o to, żeby nasza strona, była dopasowana do ekranów smartfonów. Jak zapewne wiesz nasze ekrany telefonów mają różne rozdzielczości.

różne rozdzielczości ekranów

Strony które nie są dostosowane do tych rozdzielczości będą “rozjeżdzać” się na boki i nie będą wygodne w użytkowaniu. Czcionka będzie wychodziła poza ekran a obrazki będą duże i niedopasowane do ekranu.

Jak myślisz co użytkownik zrobi, gdy zobaczy taką stronę na swoim smartfonie?

Pytanie, na które pewnie każdy z nas zna odpowiedź. Oczywiście że wyjdzie ze strony przy pierwszej lepszej nadarzającej się okazji. Tym samym stracimy czytelnika lub klienta.

Jak Google ocenia niemobilne wersje strony

Oprócz tego jest jeszcze kwestia związana z pozycjonowaniem. Do tej pory niektóre strony, które nie były dostosowane do urządzeń mobilnych zajmowały wysokie rankingi w wyszukiwarce Google.

W ciągu najbliższego czasu ma się to zmienić. Strony które nie będą dostosowane do urządzeń mobilnych będą otrzymywały punkty ujemne co spowoduje, że spadną w rankingu na niższe pozycje.

Takich stron w internecie jest naprawdę dużo. Zdziwiłbyś się, że nawet duże firmy, które mają ogromne budżety reklamowe nie mają dobrze dostosowanych stron do urządzeń mobilnych.

Możesz zapytać dlaczego tak wiele z nich jeszcze tego nie zrobiło? Podejrzewam, że czekają na ostatnią chwilę, aby dokonać zmiany.

Ciekawostką jest fakt, jak dużo ludzi lubi załatwiać bieżące sprawy przy pomocy telefonu.

W niektórych branżach statystyki pokazują, że internauci częściej korzystają z urządzeń mobilnych niż z tradycyjnych komputerów. Jak wynika ze statystyk przeprowadzonych przez Narodowy Bank Polski w 2016 roku ponad 38% osób korzystało z usług bankowości mobilnej.

bankowośc mobilna raport

Ten trend oznacza, że ludzie coraz częściej przywiązują się do dokonywania płatności przy pomocy urządzeń mobilnych. Nie trudno się temu dziwić, ponieważ jest to wygodne i możemy zapłacić za produkt lub usługę praktycznie z dowolnego miejsca na świecie – pod warunkiem, że posiadamy przy sobie smartfon z dostępem do internetu.

Jak sprawdzić czy Twoja strona jest dostosowana do urządzeń mobilnych?

Są pewne narzędzia, dzięki którym możesz sprawdzić, czy Twoja strona jest już dostosowana do urządzeń mobilnych. W tym celu najlepiej skorzystać z narzędzia, które zostało nam udostępnione przez Google.

Jeżeli Twoja strona jest podłączona do Google Search Console, to wejdź do panelu administracyjnego. Jeśli nie posiadasz tam konta to powinieneś je, jak najszybciej utworzyć, aby mieć ogólny wgląd do tego co się dzieje z Twoją stroną.

Gdy już jesteś zalogowany w panelu administracyjnym Search Console kliknij w wybraną stronę. W menu znajdującym się po lewej stronie wybierz zakładkę “Ruch związany z wyszukiwaniem” i kliknij “Obsługa na urządzeniach mobilnych”.

obsługa na urządzeniach mobilnych

Po kliknięciu pojawi się informacja na temat mobilności witryny. Jeśli wszystko jest OK to na ekranie pokaże się następujący komunikat:

komunikat o responsywności witryny

W przypadku, gdy pojawi się inny komunikat będzie to oznaczało, że stronę trzeba dostosować do urządzeń mobilnych.

Test mobilności strony

Innym narzędziem udostępnionym przez Google jest tzw. Mobile Friendly. Służy ono do sprawdzenia, czy nasza strona jest odpowiednio dostosowana dla urządzeń przenośnych.

Aby uruchomić test wejdź na Mobile Friendly. Następnie wpisz nazwę swojej strony internetowej i kliknij “Rozpocznij test”. Może to chwilę potrwać.

Po ukończonym teście pojawią się informacje o mobilności strony.

informacja o teście mobilności

Jeśli Twoim oczom ukaże się powyższy komunikat to oznacza, że strona jest dostosowana do urządzeń mobilnych. Gdy zobaczysz inny komunikat to niestety, ale nad stroną będzie trzeba popracować i odpowiednio ją zoptymalizować.

Moja strona jest responsywna. Czy już nic nie muszę robić?

W wielu przypadkach ludzie, którzy wykonali te testy sprawdzające responsywność strony myślą, że już nic więcej nie trzeba robić.

Okazuje się, że pomimo tego, że nasza strona jest w miarę przyjazna dla urządzeń mobilnych to może być niewygodna w użytkowaniu dla odwiedzających. Co należy zrobić z takim fantem?

Istnieje tu kilka sposobów, aby przekonać się, jak nasza strona wyświetla się na urządzeniach mobilnych w różnych rozdzielczościach. W Samsung Galaxy S5 strona może wyświetlać się inaczej niż w Iphonie 8, ponieważ rozdzielczości ekranu różnią się nieznacznie.

Jak posiadasz te dwa telefony to świetnie. Możesz wykonać test i sprawdzić, jak wyświetlane treści prezentują się na ekranie.

Jednak bardziej praktycznym sposobem jest wykorzystanie specjalnego narzędzia, które udostępnia nam przeglądarka Chrome.

W tym celu wejdź w przeglądarkę Chrome i kliknij przycisk “F12”. Pojawi się okienko, w którym zobaczysz, jak strona prezentuje się na smarfonach i tabletach.

testy mobilności witryny

Dzięki temu narzędziu sprawdzisz, jak strona wyświetla się zarówno na Iphonach, jak i na Ipadach.

Po prawej stronie znajdziesz informacje o kodowaniu, dzięki której webmaster jest w stanie dokładnie zbadać różne elementy strony (np. w CSS).

Zwróć uwagę na takie aspekty jak szerokość ekranu. Sprawdź czy czcionka nie wychodzi znacznie poza obszar ekranu smartfona.

Czy na pewno wszystko poprawnie się wyświetla?

Często zdarza się tak, że w jesteśmy w 100% pewni, że wszystko już działa, jak należy. Zdarzają się jednak przypadki, w których coś przeoczymy.

Wersja responsywna strony różni się od wersji, z której korzystasz na ekranie monitora lub laptopa. Problem może pojawić się, gdy na stronie widzisz zbyt dużo elementów.

Mogą one nachodzić na siebie co spowoduje, że użytkownik będzie miał problem z nawigacją strony.

U mnie na przykład przyciski społecznościowe w wersji mobilnej zasłaniały okienko z wyskakującą polityką prywatności u dołu ekranu co powodowało trudności z naciśnięciem przycisku “akceptuję”.

Jeśli na Twojej stronie jest dużo zainstalowanych wtyczek, wyskakujących pop-upów oraz innych elementów skłaniających do podjęcia akcji to polecam sprawdzić, czy wyświetlają się tak samo poprawnie jak na ekranie w wyższej rozdzielczości.

Niektóre z nich to drobne szczegóły, ale niekiedy potrafią zirytować czytelnika. Dlatego upewnienie się, że wszystkie elementy znajdujące się na ekranie w mniejszej rozdzielczości wyświetlają się prawidłowo zwiększą komfort w przeglądaniu strony.

Jak dostosować naszą stronę do urządzeń mobilnych?

A co w przypadku, gdy nasza strona nie jest dostosowana do urządzeń mobilnych?

W takiej sytuacji mamy dwie opcje do wyboru.

Pierwszą z nich jest zatrudnienie programisty, który dostosuje stronę do urządzeń mobilnych (zakładając oczywiście, że sam nie jesteś programistą). To zajęcie jest czasochłonne i może trochę kosztować.

Przestarzałe i nieaktualizowane strony mają to do siebie, że trzeba wykonać przy nich dużo pracy. Czasem zdarzy się, że większość kodu będzie trzeba napisać od nowa. Nowe trendy wymuszają na nas prawidłową optymalizację dlatego dostosowanie do smartfonów jest niezbędne.

Drugą opcją jest sięgnięcie po dedykowane lub ogólnodostępne systemy zarządzania treścią. Do darmowych nalezą m.in.: Joomla, WordPress lub Prestashop (dla sklepów internetowych).

Ja sam jestem zwolennikiem WordPressa i póki co nie wyobrażam sobie, żeby prowadzić bloga w innym systemie zarządzania treścią.

Dla niektórych osób tworzących sklep internetowy dobrym systemem może być Prestashop jednak WordPress posiada doskonałą wtyczkę WooCommerce, dzięki której jesteś w stanie stworzyć dobrze działający sklep internetowy.

Nie odbiegając jednak za bardzo od tematu skupmy się na dostosowaniu naszej strony do urządzeń mobilnych. Korzystając z WordPressa powinieneś wybrać szablon, który jest w pełni dostosowany do smartfonów i innych tego typu urządzeń.

Większość nowoczesnych szablonów oferowanych przez zaufane firmy na świecie, jak np. Elegant Themes przykłada dużą uwagę do dostosowania szablonu do urządzeń mobilnych. Jednak czasem można trafić na szablony, które nadal trwają w epoce kamienia łupanego.

O tym jak wybrać dobry szablon do WordPressa napisałem już poradnik. Znajdziesz w nim przydatne informacje, które pomogą Ci w podjęciu dobrej decyzji.

Możesz też przeczytać nieco skróconą wersję innego artykułu, w której znajdziesz kilka przydatnych firm oferujących profesjonalne szablony.

Responsywna strona

Nie wchodząc już w aspekty czysto techniczne najlepiej wybrać gotowe rozwiązanie, które spełni wszelkie wytyczne Google. Większość osób korzysta z tej wyszukiwarki internetowej, dlatego na niej powinniśmy się głównie skupić.

Stworzenie responsywnej strony dostosowanej do urządzeń mobilnych wymaga wyczucia i wiedzy. W dobrych szablonach do WordPressa znajdziesz opcje, dzięki którym jednym kliknięciem sprawisz, że strona automatycznie dostosuje się do smartfonów.

mobilna wersja strony

Przykład opcji włączenia mobilnej wersji strony dla telefonów i tabletów.

Istnieją też specjalnie zaprojektowane wtyczki, które umożliwiają wygenerowanie mobilnej wersji naszej witryny. Niestety ale nie wszystkie z nich są kompatybilne z szablonami, dlatego najpierw należy zasięgnąć informacji w tym temacie lub zlecić to programiście.

Niektóre strony korzystają z technologii AMP, która ma za zadanie stworzyć specjalną wersję w pełni przystosowaną do urządzeń mobilnych.

Takie strony wczytują się niemal błyskawicznie, lecz na obecnym etapie ciężko jest stwierdzić, czy w najbliższej przyszłości wejdą do użytku codziennego. Zdania w tej kwestii są na chwilę obecną podzielone.

Zadbaj o poprawną optymalizację

Wprowadzenie wersji mobilnej strony to nie tylko dostosowanie szerokości ekranu do smartfonów. To także poprawna optymalizacja.

Szybkość wczytywania się strony jest sprawą kluczową, która nie powinna być zaniedbywana. To jak szybko załaduje się strona wpływa na ocenę przyznawaną przez algorytmy Google oraz na to, jak jest postrzegana w oczach internautów.

Nawet jeśli Twoja strona jest dostosowana do urządzeń mobilnych to może wczytywać się wolno. W dobie informatyzacji cierpliwość internautów jest znacząco ograniczona i najzwyczajniej w świecie nie będą czekać kilkanaście sekund, aż strona wczyta się na ich urządzeniu mobilnym.

Co w takim razie zrobić, aby zmniejszyć ilość odrzuceń?

Rozwiązaniem jest to, żeby skrócić maksymalny czas wczytywania strony. Najpierw jednak dowiedzmy się, jak szybko strona wczytuje się na urządzeniach mobilnych.

Aby to sprawdzić skorzystaj z tego narzędzia. Wpisz nazwę strony a następnie kliknij w niebieską strzałkę po prawej.

Po chwili pojawi się ekran, w którym będzie informacja o szybkości załadowania strony oraz procentowej ilości osób, które opuszczą stronę zanim całkowicie się wczyta.

jak szybko strona się wczytuje

Jeżeli strona wczytuje się poniżej 10 sekund to polecam popracować nad optymalizacją. W tym celu warto zainstalować wtyczkę do cachowania, która znacząco zmniejszy zużycie zasobów serwera i skróci czas wczytywania na komputerach i urządzeniach mobilnych.

O tym jak przyspieszyć czas ładowania strony napisałem szerzej w tym temacie.

Podsumowanie

Czasy kiedy to nie przywiązywaliśmy uwagi do optymalizacji strony do urządzeń mobilnych już dawno minęły. Teraz responsywność stron i szybkość wczytywania mają coraz większe znaczenie.

Istnieją branże, w których zdecydowana większość klientów korzysta ze smartfonów oraz innych urządzeń przenośnych. Jeżeli zależy Ci na dobrych wynikach w wyszukiwarkach internetowych oraz wygodzie korzystania to powinieneś już na początku zadbać o aspekty związane z mobilnością.

Przyszłość pokazuje, że nadchodzi epoka Mobile First i miną długie lata zanim w świecie internetu pojawi się coś nowego.

A jakie są Twoje przemyślenia dotyczące dostosowania stron do urządzeń mobilnych? Napisz o tym w komentarzu poniżej.

Jak Sprawdzić i Dostosować Stronę do Urządzeń Mobilnych
5 (100%) 1 vote

Zostaw błyskotliwy komentarz

Twój adres e-mail nie będzie publikowany.

Strona korzysta z plików cookie. więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close