Optymalizacja strony pod urządzenia mobilne – co warto wiedzieć?

Projektując stronę internetową, warto pamiętać, że użytkownicy będą korzystać z jej zasobów nie tylko na komputerach stacjonarnych czy laptopach, ale także za pomocą smartfonów. Pojawia się jednak pytanie, od czego zacząć budowę strony pod różne urządzenia? Od teraz nie tylko SEO powinno być Twoim celem, ale również optymalizacja i wszystko, co związane jest z zagadnieniem SXO. Użyteczność strony to wyjście naprzeciw potrzebom potencjalnego klienta. Jej responsywność ma dziś kluczowe znaczenie przy budowaniu marki w sieci. Brak dostosowania witryny do okna przeglądarki zniechęci nowych, ale również dotychczasowych klientów do dalszego przeglądania produktów czy skorzystania z usług.

Projektowanie stron internetowych pod urządzenia mobilne

Dawniej funkcjonowało powiedzenie: „projektowanie na urządzenia mobilne to przyszłość Internetu”. Obecnie pojęcie Mobile First jest już mocno zakorzenione wśród marketingowców oraz projektantów stron internetowych. Jeśli chcemy być brani pod uwagę nie tylko przez samych użytkowników, ale również przeglądarki, musimy nadążyć za wprowadzanymi zmianami oraz ulepszeniami. Budowanie rentownej marki to proces, jednak końcowym etapem tej drogi jest konwersja – nie tylko zainteresowanie asortymentem, ale dodanie produktu do koszyka. To powinno zakończyć się zakupem, będącym tym samym potwierdzeniem, że dana firma jest naszym jedynym wyborem. Na temat samej konwersji można przeczytać tutaj.

Co właściwie oznacza Mobile First?

Podejście noszące nazwę Mobile First (z ang. Progressive Enhancement) to nic innego, jak projektowanie strony internetowej pod najmniejsze urządzenia. Chodzi tutaj o najniższą możliwą rozdzielczość ekranu. Ten etap prac nad stroną obejmuje skupienie się na urządzeniach mobilnych. Designerzy i wdrożeniowcy zwracają uwagę na projekt odpowiadający wymaganiom UX oraz specyfikacji danego urządzenia. Celem tych działań jest właśnie użytkownik i jego komfort podczas przeglądania strony, a co za tym idzie – ułatwienie mu poszukiwań oraz drogi zakupowej. Dzięki temu dana marka „zapisze się” w jego pamięci jako spełniająca oczekiwania i gwarantująca przyjemne, szybkie zakupy.

Aby nasza praca miała sens, a wdrożone zmiany i modyfikacje działały, należy nieustannie śledzić sugestie przeglądarek, ich najnowsze badania oraz ulepszenia. Projektując przeglądarkę pod konkretne urządzenie, należy wziąć pod uwagę wszystkie jego możliwości, ale również ograniczenia. Współcześnie smartfon stał się numerem jeden, jeśli chodzi o przeglądanie stron czy robienie zakupów w sieci. Nie możemy przy tym zapominać, że konsumenci nadal korzystają z tabletów, komputerów stacjonarnych czy laptopów. Na szczęście możemy modyfikować tworzone skrypty strony bez szkody dla pozostałych wersji. Na przykład, witryna budowana pod przeglądarkę w laptopie nie wpłynie w żaden sposób na wyświetlanie się strony internetowej na smartfonie.

Zmieniają się trendy, zmienia się podejście do projektowania stron

Wraz ze zmieniającymi się przyzwyczajeniami użytkowników urządzeń stacjonarnych zmieniła się także dotychczasowa metodologia pracy designerów. Na jej miejscu pojawiła się wspomniana metoda Mobile First. Aby witryna była w pełni dostosowana do urządzeń mobilnych, należy zastosować projektowanie responsywne tzw. RWD (z ang. Responsive Web Design). Tak zaprojektowana strona internetowa automatycznie dostosowuje się do wielkości ekranu, na którym jest w danym momencie wyświetlana.
Pojęcie RWD jest nieodłącznie związane z popularyzacją pracy zgodną z zasadą Mobile First.

Na czym polega responsywność?

Responsywność odnosi się do możliwości wyświetlania informacji zawartych na stronie internetowej w odpowiedniej rozdzielczości, czyli dopasowanej do danego urządzenia. Wielkość ekranu jest swego rodzaju ramką, bezpiecznym obszarem, w którym wszystkie informacje muszą pozostać czytelne, jak np. reklamy, które powinny być umieszczone w taki sposób, aby można było łatwo je zamknąć czy menu, które powinno być w pełni czytelne, czyli w całości się rozwijać.

Warto wspomnieć także o technice RWD dotyczącej tworzenia uniwersalnych stron WWW. Dzięki niej witryna internetowa może otwierać się prawidłowo nie tylko na nośnikach mobilnych, ale również na komputerach. W związku z tym tekst oraz elementy znajdujące się na stronie automatycznie powinny dostosowywać się do wielkości ekranu i rozdzielczości danego urządzenia. Mamy tutaj do czynienia z automatycznym skalowaniem, zapewniającym wygodę korzystania ze strony.

Mobile First w kontekście wyszukiwarki Google

O Mobile First Index usłyszeliśmy po raz pierwszy mniej więcej 6 lat temu. To właśnie wtedy przeglądarka Google ogłosiła, że planuje sukcesywnie usprawniać format oraz wprowadzać zmiany samego algorytmu. Głównym powodem tych działań były przeprowadzone badania, które wykazały, że ponad 50% użytkowników wchodzi na strony WWW z poziomu urządzeń mobilnych. Nic więc dziwnego, że Google chciało dostosować wyniki wyszukiwania w jak najlepszy sposób, czyli najbliższy użytkownikom. Od tego czasu strony indeksowane są przez Googlebot Mobile. W praktyce oznacza to tyle, że pozycja danej witryny jest zależna od przystosowania strony do wyświetlania na urządzeniach mobilnych.

Ciężko wyobrazić sobie, że firmy do dziś nie posiadają w pełni użytecznych stron WWW. Wciąż zdarzają się takie, które nie wyświetlają się prawidłowo na smartfonach. Jako specjaliści branży e-commerce, chcąc budować swoją pozycję w sieci, musimy liczyć się z jednym: niewłaściwie działająca strona dyskwalifikuje nasz biznes już na samym początku. Jak pokazują statystyki, nieprawidłowe wyświetlanie się treści na urządzeniach mobilnych skutkuje utratą nawet 70% użytkowników. Wniosek? Warto pracować nad witryną i traktować wskazówki Google na poważnie.

Narzędzia Google a urządzenia mobilne

Przyszedł czas na kolejny update – Mobile First Index. Jest on cały czas wdrażany w świecie e-commerce, ale co najważniejsze, Google nie zostawia nas z tym samych. Zaproponowało więc dodatkowe narzędzia, mające pomóc nam dostosować strony pod urządzenia mobilne na najwyższym poziomie. O czym mowa?

1. Mobile Friendly Test – jedno z oficjalnych narzędzi Google, które ma za zadanie usprawnić wyszukiwanie błędów, przede wszystkim w wersjach mobilnych naszej strony internetowej. Wśród najczęstszych znajdują się te ściśle związane z UX, m.in. nieprawidłowe rozmieszczenie elementów klikalnych. Są one często usytuowane zbyt blisko siebie, a to uniemożliwia swobodne, intuicyjne korzystanie z witryny. Kolejnymi błędami są: treści oraz elementy znajdujące się poza wyżej wspomnianą „ramką” tworzącą ekran urządzenia; zbyt mała czcionka; źle dobrane kolory oraz mały kontrast pomiędzy treścią a tłem.
2. Google PageSpeed Insight – amerykański gigant w 2018 roku zaprezentował dwa nowe wskaźniki, które miały służyć do analizy PSI (z ang. PageSpeed Insight). Należą do nich FCP (z ang. First Contentful Paint) oraz DCL (z ang. DOM Content Loaded). Pierwszy wskaźnik pozwala mierzyć czas, po którym użytkownik zobaczy treści strony. Drugi natomiast pomaga mierzyć czas wczytywania się dokumentu HTML. Oba wskaźniki miały na celu usprawnić naszą stronę, a przy tym badać ją pod kątem użyteczności. Jeśli Google wprowadza takie narzędzia, można się tylko domyślać, jak bardzo stawia na komfort użytkownika.

Wszystkie te elementy były jednak wstępem do dalszych modyfikacji. W maju 2021 roku Google ogłosiło zmianę w głównym algorytmie, zaliczającą się do czynników oceny UX, czyli doświadczenie użytkowników w interakcji ze stroną internetową. Page Experience Update zaczął być traktowany przez Google bardzo poważnie, stał się wręcz wyznacznikiem rankingowym.

Co to oznacza w praktyce? Jeśli Twoja witryna okaże się użyteczna, a potencjalni klienci będą mogli poruszać się po niej swobodnie, Google doceni Twoją pracę, umieszczając stronę wyżej w swoim rankingu. W dobie tak dużej konkurencji to nieocenione. Jeśli okaże się jednak, że witryna nie jest dopasowana do urządzeń mobilnych, a oczekiwanie na wyświetlenie informacji trwa zbyt długo, Google może ocenić ją znacznie niżej niż dotychczas.

Na Page Experience składa się kilka istotnych czynników rankingowych, które szczegółowo opisane są w dokumentacji Google.

Jak zrobić responsywną stronę internetową?

Z pewnością wielu z nas zastanawia się nad modernizacją witryny lub jest w trakcie jej tworzenia. Z tego względu oczekuje prostej instrukcji, mówiącej, co zrobić, aby strona wyświetlała się wysoko w wynikach wyszukiwania i jednocześnie była poprawna pod kątem UX. Dobra wiadomość: wszystkie te działania łączą się ze sobą!

Od czego jednak zacząć? Aby zoptymalizować stronę internetową pod urządzenia mobilne, należy wykonać projekt graficzny na najmniejszy ekran, następnie przejść do rozwoju aplikacji i technicznych aspektów związanych z kodem strony.

Projekt strony dostosowany do urządzeń mobilnych

Mniej znaczy lepiej

Pamiętajmy, że strona ma być nie tylko użyteczna, ale również czytelna. Krótkie treści podzielone na sensowne bloki, słowa kluczowe i listowania to jej obowiązkowe elementy. Przejrzyste menu, stworzone na podstawie dotychczasowego, znanego już klientowi, wyważona liczba grafik, komplementarne kolory, dopasowana czcionka – może wydawać się to trudne i skomplikowane, ale wizualny aspekt strony pozwala zrobić dobre, pierwsze wrażenie. Jeśli chodzi o wyważenie elementów znajdujących się na witrynie, warto przyjąć maksymę: „jeśli wszystko jest widoczne, nic nie jest widoczne”.

Responsywność fontów

Podczas projektowania strony internetowej należy pamiętać o odpowiednim skalowaniu treści. Można to zrobić na dwa sposoby: użyć breakpointów (czyli tzw. punktów wstrzymania – miejsce umyślnego wstrzymania wykonania programu w celu przeanalizowania jego działania), aby ustawić wielkość fontów dla różnych rozmiarów ekranów lub skorzystać z nieco nowszej technologii. Chodzi o responsywność fontów, gdzie font dostosuje się do wielkości ekranu. Należy pamiętać jednak, że wyszukiwarka Google patrzy na to, czy strona jest czytelna na urządzeniach mobilnych, w związku z tym lepiej nie ustawiać zbyt małych wartości. 12 px wygląda dobrze i sprawdza się w praktyce.

Położenie nawigacji oraz linków

Linki i elementy „klikalne” na telefonach nie mogą być zbyt blisko siebie, ponieważ utrudnia to poruszanie się po stronie. Użytkownik może wówczas pomylić się i wcisnąć nie to, co trzeba. Dodatkowo Google uważa takie rozmieszczenie informacji za błąd – oczekiwania narzucone przez przeglądarkę oraz samego klienta nie zostały bowiem spełnione. Warto więc dbać o zachowanie odstępu między elementami klikalnymi.

Kolorystyka strony

Ważne jest, aby zachować odpowiedni kontrast pomiędzy tłem a elementami na stronie WWW. To bowiem nieodłączny element czytelnej witryny. Powinna być jasna, przystępna w odbiorze, pozbawiona zbitych bloków tekstowych oraz treści zlewających się z tłem. Nie chodzi tylko o wybór odpowiedniej czcionki, ale również o czytelność przycisków. Oczy użytkownika nie mogą męczyć się podczas czytania i śledzenia informacji.

Wygoda użytkownika

Jest kilka aspektów, na które należy zwrócić szczególną uwagę. Pamiętajmy, że ekrany mobilne są małe, a użytkownik nie lubi szukać informacji między zakładkami. W związku z tym zadajmy o to, by w centralnym punkcie strony internetowej pojawiły się najważniejsze elementy, czyli niezbędne dla użytkownika i odpowiadające jego potrzebom. W tej kwestii pomocny może okazać się ten artykuł.

SXO techniczne a optymalizacja strony pod urządzenia mobilne

Zmiana formatu na WebP

Ważnym elementem strony z punktu widzenia urządzeń mobilnych jest szybko ładująca się jej zawartość. Możemy wyobrazić sobie, jak przemieszczamy się po mieście lub jedziemy pociągiem i mamy średniej jakości zasięg. Zdarza się to często, przez co rośnie poziom naszej irytacji. Podobnie jest z kwestią czasu ładowania się witryny. Aby go poprawić, należy zmienić format zdjęć na nowy standard WebP, czyli nowy format pliku opracowany przez Google. Dzięki temu witryny internetowe będą wczytywać się szybciej, a praca z nimi okaże się wygodniejsza.

Lazy loading, czyli progresywne wczytywani

Technika „leniwego” ładowania zasobów pozwala na optymalizację szybkości działania strony. Polega ona na tym, że w pierwszej kolejności wczytywane są istotne dla użytkowników elementy zaraz po wejściu na stronę, a następnie cała reszta. W ten sposób zoptymalizowany jest wstępny czas ładowania witryny. Pozwala to na szybkie przeglądanie jej zawartości na urządzeniach mobilnych. Ponadto poprawia się wskaźnik UX oraz widoczność w organicznych wynikach wyszukiwania.

Pamięć podręczna

Witryny, które na urządzeniach mobilnych otwierają się powoli, niestety tracą użytkowników. Można temu zapobiec dzięki pamięci podręcznej, czyli tzw. cache. Pozwala ona na zapamiętywanie danych witryny w schowku przy pierwszej wizycie i szybsze ich odczytywanie podczas kolejnych odwiedzin. Jest to jedna z najpopularniejszych metod optymalizacji, która przynosi rewelacyjne efekty zarówno pod kątem SEO, jak i UX.

Podsumowanie

Skupienie się na wymaganiach przeglądarki to najlepsza droga do tego, aby zbudować użyteczną dla użytkownika witrynę. Responsywność, czyli dopasowanie jej do urządzeń mobilnych, to najważniejszy element tego procesu. Oczywiście należy pamiętać również o pozostałych. Dobrze zbudowaną stronę WWW będzie można szybko i sprawnie dostosować do obowiązujących trendów, dodając lub zmieniając kolejne funkcjonalności. Solidna podstawa z pewnością ułatwi późniejszą pracę!