Mobile first to podejście do projektowania stron, w którym wersja mobilna jest priorytetem, a desktopowa rozszerzeniem. Od marca 2021 roku Google stosuje mobile-first indexing dla 100% stron – to znaczy, że Googlebot crawluje i ocenia przede wszystkim wersję mobilną Twojej witryny. Jeśli treść jest widoczna tylko na desktopie (np. ukryta w zakładkach, accordion), Google może jej nie zaindeksować. W praktyce mobile first wpływa na pozycje w wynikach wyszukiwania, Core Web Vitals i współczynnik konwersji (53% użytkowników opuszcza stronę, która ładuje się dłużej niż 3 sekundy na mobile).
Na czym polega mobile first design?
Wzrost popularności urządzeń mobilnych i ich wykorzystania do różnych celów, w tym także do przeglądania Internetu i robienia zakupów w sieci, sprawił, że powstał pomysł projektowania stron internetowych przyjaznych dla smartfonów. RWD, czyli Responsive Web Design, oznacza responsywny projekt witryny internetowej. Jest to proces tworzenia serwisu, który będzie działać na różnych urządzeniach mobilnych, z dowolnym rozmiarem ekranu bez konieczności powiększania i pomniejszania, aby zobaczyć znajdującą się treść na stronie. Dzięki temu jest ona dostępna praktycznie dla wszystkich użytkowników, co oczywiście przekłada się na wzrost jakości doświadczeń. Sprawy jednak posunęły się znacznie dalej w momencie, kiedy narodził się projekt mobile first design. Chodzi w tym o zaprojektowanie witryny od najmniejszych rozmiarów ekranów, a następnie przechodzenie do największych.
Czym jest mobile first index?
Wraz z rozwojem mobile first design pojawiło się mobile first index, czyli strategia od Google, która polega na tym, aby głównym punktem odniesienia przy indeksowaniu przyjmować mobilną wersję strony. Na podstawie tych danych Google określa między innymi SERPy. Należy jednak zauważyć, iż istnieje indeks o nazwie mobile first, co nie oznacza, że obejmuje on tylko i wyłącznie urządzenia mobilne. Jeśli strona www nie została w żaden sposób dostosowana do smartfonów czy tabletów, indeks będzie skupiał się jedynie na stronie dostosowanej do laptopa, czyli desktopu. Warto przy tym pamiętać, że brak obsługi urządzeń mobilnych może mieć negatywny wpływ na jej pozycję w wynikach wyszukiwania.
O sprawdzonych metodach dotyczących wersji mobilnych stron internetowych można przeczytać na https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing?hl=pl
Na temat Mobile First Indexing oraz co tak naprawdę czyta Googlebot możecie znaleźć pod adresem: https://www.searchenginejournal.com/google-mobile-first-indexing/346170/
UX a mobile first
Czy mobile first może wpływać na UX? Generowanie leadów oraz współczynnik konwersji są w głównym stopniu zależne od wyglądu i treści witryny, która widoczna jest w sieci dla użytkowników. Jeśli nie ma możliwości wyjaśnienia odbiorcom, jak oferowane im usługi czy produkty mogą im pomóc lub jakie mogą dać korzyści, to nie zostaną oni dłużej na stronie sklepu internetowego, czy wizytówce firmy. Projektując witrynę, która będzie głównie skupiona na urządzeniach mobilnych można pomóc firmie w spełnieniu wszystkich wymagań i osiągnięciu celów biznesowych. User Experience jest najważniejszym aspektem w trakcie tworzenia witryny www. Jeśli można realnie poprawić doświadczenia użytkowników, którzy ją odwiedzają, z pewnością przełoży się to na zyski oraz lojalność potencjalnych klientów.
Jakie są wady i zalety podejścia mobile first design?
Mimo że tworzenie strony w duchu mobile first brzmi jak rozwiązanie wręcz idealne, to wciąż nie jest to norma dla większości firm, które zajmują się projektowaniem serwisów internetowych i sklepów. Warto więc przedstawić wady i zalety podejścia mobile-first.
Dlaczego warto postępować zgodnie z zasadą mobile first?
Rozdzielczość ekranu jest najważniejszym powodem tworzenia stron w myśl mobile first. Narzuca on jednak wiele ograniczeń, ponieważ na urządzeniach mobilnych można zamieszczać zdecydowanie mniej informacji niż w wersji desktopowej. Dlatego też projektując taki interfejs należy unikać zatłoczenia i przepełnienia danymi. Co istotne, trzeba pamiętać sposób, w jaki wchodzi się z nim w interakcję. Przez to, że na telefonie nie dysponuje się kursorem, a operuje palcem, który jest znacznie większy, powinno się odpowiednio dostosować elementy klikalne:
- minimalne wymiary 44×44 px
- umiejscowienie w łatwodostępnych obszarach,
- zapewnienie ich wystarczających odległości od siebie.
Dzięki temu możliwe będzie uniknięcie przypadkowych kliknięć, jednak jak to wygląda w praktyce? Niewielkich rozmiarów element klikalny może świetnie sprawdzać się przy klikaniu w niego myszą. Wykonanie tej samej czynności przy pomocy kciuka jest zadaniem jednak zdecydowanie trudniejszym. Dlatego też powinno się rozważać alternatywne opcje, które pozwolą na zaznaczenie tej opcji przez kliknięcie w większy obszar ekranu.
Jakie są jeszcze zalety mobile first? Wśród nich można wymienić:
- doskonałe doświadczenia użytkownika,
- koncentracja użytkowników na najważniejszej treści,
- odpowiednio dopracowana strategia i plan działania,
- szybszy czas ładowania strony.
Dlaczego nie stosować mobile first?
Postępowanie zgodnie z podejściem mobile first ma jedną wadę – łatwo wtedy zapomnieć o możliwościach, jakie dają wersje na komputer, a przecież tam także użytkownicy chcą w pełni z nich korzystać. Dlatego też bezpośrednie przenoszenie designu dla użytkowników mobilnych na większy ekran może skutkować wdrożeniem rozwiązań, które nie będą dla nich przyjazne na desktopie. Bardzo popularnym przykładem takiego błędu jest stosowanie hamburger menu, które znajduje się pod ikonką z poziomych kresek. To rozwiązanie okazuje się użyteczne na małym ekranie, ponieważ stanowi świetny sposób na zaoszczędzenie miejsca. Nie znajduje jednak uzasadnienia w wersji komputerowej.
Na co zwrócić uwagę podczas projektowania strony z uwzględnieniem mobile first?
Prawie połowa użytkowników zgodnie twierdzi, że nie poleci strony internetowej danej firmy, jeśli będzie źle zaprojektowana, a jej funkcjonalność będzie zła. Aby uniknąć takiej sytuacji, podczas projektowania witryny powinno się postępować zgodnie z poniższymi zasadami.
Skoncentrowanie się na użytkownikach
Podstawową rzeczą, jaką należy zrobić przed rozpoczęciem prac nad serwisem jest zdiagnozowanie i usunięcie problemów, na które napotykają użytkownicy. Witryna dostosowana do urządzeń mobilnych powinna pomóc odwiedzającym im wykonać określone czynności albo szybko i sprawnie rozwiązać jakieś problemy. Drugim krokiem jest określenie ścieżki, jaką muszą przebyć internauci i jej zaimplementowanie na mobile. Warto rozważyć różne scenariusze zachowań odbiorców na każdej podstronie.
Ustalenie hierarchii treści
Tworząc treści dla mobilnej wersji strony internetowej, należy zadbać o to, aby była ona treściwa i zwięzła. Daje to użytkownikom treści, których szukają. Należy pozbyć się bałaganu i tego, co może ich rozpraszać. Z racji tego, że responsywne strony internetowej mają ograniczenia dotyczące ekranu, powinno się prezentować odbiorcom treści w taki sposób, aby respektowały one wizualną hierarchię według ważności.
Postawienie na minimalizm i prostotę designu
W dzisiejszych czasach liczy się prosty i intuicyjny design. Przede wszystkim poprawia on czytelność i skupia użytkowników na najważniejszych elementach. W praktyce oznacza to, że budując stronę mobile first, powinno się zachować te elementy, których naprawdę się potrzebuje, a resztę usunąć. Nie powinno się więc obciążać internautów nadmiarem wyskakujących okienek i reklam.
Widoczne CTA
Jasna kolorystyka, proste linie i elementy topograficzne zadziałają cuda na stronach dostosowywanych do urządzeń mobilnych. Połączenie ich wszystkich w efektywny przycisk CTA jest wręcz koniecznością. Brak CTA może skutkować utratą cennych leadów oraz konwersji. Jeśli to możliwe, lepiej wykorzystać takie przyciski, aniżeli trudno klikalne linki.
Podejście mobile-first – podsumowanie
Użytkownicy mobilni stanowią w dzisiejszych czasach większość odwiedzających strony internetowe. Prowadząc firmę w sieci niezbędne będzie więc zaspokojenie ich potrzeb. Oznacza to tyle, że jeśli oni korzystają głównie ze smartfonów i tabletów, strona firmowa powinna być do nich dostosowana. Mobile first to nowe podejście do projektowania witryn www i najlepszych doświadczeń użytkowników, co oznacza, że zastosowanie tej strategii może przynieść szereg korzyści. Sprawdzenie responsywności i zgodności z mobile-first to standardowa część audytu SEO.
Mobile first a Core Web Vitals – co sprawdzić w pierwszej kolejności?
Najczęstsze problemy mobile first w polskich witrynach: LCP powyżej 2.5s (za duże obrazy bez lazy loading i formatu WebP/AVIF), CLS powyżej 0.1 (baner cookie przesuwający treść), INP powyżej 200ms (ciężki JavaScript). Sprawdź w Google Search Console > Core Web Vitals > Mobile. W PageSpeed Insights wynik poniżej 50 punktów wymaga natychmiastowej interwencji.
Typowe poprawki: zamień obrazy na WebP (oszczędność 25-35%), wdróż lazy loading poniżej foldu, usuń nieużywany CSS i JS (narzędzie Coverage w Chrome DevTools), użyj font-display: swap dla webfontów. Dla WordPress z Kadence: wyłącz pluginy, które ładują assety na każdej stronie (typowy problem: Contact Form 7 ładujący CSS/JS nawet tam, gdzie nie ma formularza).
Czym jest podejście mobile first?
Mobile first to strategia projektowania stron internetowych, w której najpierw tworzy się wersję mobilną, a dopiero potem rozbudowuje ją o elementy dla większych ekranów. Podejście to wynika z faktu, że ponad 60% ruchu internetowego pochodzi z urządzeń mobilnych.
Czy Google preferuje strony mobile first?
Tak, od 2021 roku Google stosuje mobile-first indexing, co oznacza, że do indeksowania i rankingowania wykorzystuje przede wszystkim mobilną wersję strony. Strony niedostosowane do urządzeń mobilnych mogą tracić pozycje w wynikach wyszukiwania.
Jak sprawdzić, czy strona jest mobile friendly?
Najszybszym sposobem jest skorzystanie z narzędzia Lighthouse w Chrome DevTools lub testu PageSpeed Insights od Google. Warto też ręcznie przetestować stronę na różnych urządzeniach mobilnych, zwracając uwagę na czytelność tekstu, rozmiar przycisków i łatwość nawigacji.
