Sklepy i strony internetowe mobile-first

Urządzenia mobilne zaczynają na dobre dominować w ruchu internetowym. Już od jakiegoś czasu ponad połowa wyszukiwań w przeglądarce Google odbywa się za pomocą urządzenia mobilnego – i tutaj muszę uściślić że chodzi o konkretnie o smartfony a nie tablety. I co z tego wynika? A no to, że tworzenie stron z wykorzystaniem zasady mobile-first w końcu staje się opłacalne a przewidywana rewolucja, (którą odważyłem się poruszyć 3 lata temu w mojej pracy inżynierskiej) w końcu stałą się faktem.

Po opublikowaniu artykułu o trendach projektowania stron wiele osób drwiło (nie wiem czy to dobre słowo) z punktu o mobile first, na zasadzie, „Panie gdzie tam, jeszcze dobrych kilka lat…”. Wystarczyło 8 miesięcy i wszystko się sprawdziło 🙂 Google już oficjalnie podało, że wyniki będą ustalane „oczami” smartfona, tzn. wyszukiwarka ustala jakość strony w oparciu o to jak ona wygląda i co się na niej znajduje na smartfonie a nie komputerze klasy PC.

Czym jest indeksowanie Mobile-First?

W dużym skrócie: kiedyś algorytmy wyszukiwarki sprawdzały czy strona jest adekwatna na zapytania w oparciu o widok desktopowy (czyli standardową wersję na komputery klasy PC). Jeżeli strona wykazywała cechy wysokiej jakości i była czytelna na smartfonach (Responsive Web Design) – była nagradzana poprzez dobre pozycje w wyszukiwarce. Obecnie jest tak, że to tak jakby urządzenia mobilne rozstrzygają o jakości treści na stronie internetowej. Dlatego warto tworzyć stronę internetową w oparciu o zasadę Mobile-First.

Jak projektować stronę aby pogodzić wrażenia użytkownika mobilnego i stacjonarnego oraz skutecznie pozycjonować swoją stronę w nowym indeksie Google? Poniżej odpowiedź…

Zasady projektowania stron mobile-first

1. Treść na twojej stronie internetowej nie powinna być „obcinana” ukrywana w widoku mobilnym. Przy tworzeniu posta wklejaj zdjęcia przeznaczone na widok mobilny. Wszelkie alternatywy i podmiany stosuj w widoku desktopowym (mechanizm elastycznych zdjęć).
2. W procesie projektowym – zaprojektuj widok mobilny. Traktuj to jak natywną wersję strony. Niech widok na komputer będzie rozszerzeniem właściwej (mobilnej) wersji strony.
3. Jeżeli twoja strona bardzo dobrze prezentuje się na telefonach, upewnij się że masz mocny hosting – twoje pozycje pójdą w górę a twoją stronę będzie odwiedzać coraz więcej klientów –  nawet tych którzy korzystają tylko z komputerów PC.
4. Zapomnij o oddzielnych stronach mobilnych – z osobnym adresem np. „mobi.domena.pl” . Teraz możesz sobie za to stworzyć osobną stronę dla desktopów np. „desk.domena.pl” 🙂
5. Odwiedź stronę Page Speed Insights i sprawdź czy „wynik mobilny” wynosi co najmniej 50% idealnie by było mieć tutaj zielony wynik (czyli powyżej 90).
6. Dbaj o przyspieszenie wczytywania się stron WWW w każdym aspekcie ich budowy i utrzymania.

Interfejs, styl i skrypty zgodne z Mobile-First

Mobile-First to szerokie pojęcie i odnosi się także do praktyk deweloperskich. Kiedy w 2011 – 2013 roku wkraczała era Responsive Web Design, wizualną część strony projektowało się tak jak do tej pory – z tą różnicą, że dodawano dodatkowe instrukcje, które zawierały wyjątki dla urządzeń mobilnych. Przykładowo chcąc dopasować widok do ekranów urządzeń mobilnych deweloperzy stosowali takie podejście:

.container{
  width: 1200px;
}
@media screen and (max-width:768px){
   width: 100%;
}

Najpierw jest „ogólny” styl dla urządzeń Desktop a dopiero potem mamy do czynienia z instrukcjami odnoszącymi się do urządzeń mobilnych. Dokładnie ten sam kod stworzony zgodnie z ideą mobile First wyglądałby tak:

.container{
  width: 100%;
}
@media screen and (min-width:769px){
   width: 1200px;
}

To samo można zastosować w odniesieniu do skryptów JavaScript, które korzystają z metody matchMedia. Niejako ciężar „dodatkowej pracy” przenosimy na urządzenia klasy PC bo posiadają dużo więcej zasobów.

Zastosowanie w praktyce tej filozofii dobrze widać w nowych frameworkach front-endu typu Bootstrap, gdzie zniesiono klasę hidden-xs (która ukrywała coś na urządzeniach mobilnych). Teraz ten sam efekt można uzyskać ukrywając coś wszędzie a potem pokazać (czyli wykonać dodatkową pracę przy renderowaniu) w urządzeniach klasy desktop za pomocą klas: d-none i d-lg-block.

Teraz już wiesz skąd się wzięła nazwa Mobile-First. Urządzenia mobilne mają pierwszeństwo. Stosowanie tej reguły powoduje że strona lepiej działa na urządzeniach mobilnych, a komputery klasy PC mogą przetworzyć dodatkowe instrukcje aby dostosować wygląd do własnych parametrów. Rozwiązanie niosło ze sobą te same korzyści już przy samych początkach ery Responsive Web Design. biorąc jednak pod uwagę statystyki korzystania z Internetu dopiero od niedawna urządzeń mobilnych jest więcej w ruchu Internetowym i obecnie ten dodatkowy wysiłek i przestawienie się deweloperów przy tworzeniu stron jest bardziej opłacalne.

Technologie wspierające filozofię Mobile-First

Progresywne strony webowe (PWA)

Nową technologią w jaką można się zainteresować to PWA czyli Progressive Web Apps. Rozwiązanie to stworzone zostało przede wszystkim z myślą o użytkownikach mobilnych. Jeżeli chcesz sprawdzić jak działa PWA odwiedź moją stronę główną a potem kilka podstron. Odłącz Internet i spróbuj na nią wejść jeszcze raz… niezła magia co? 🙂  To jest właśnie Progressive Web Apps. Rozwiązanie to ułatwia użytkownikom mobilnym korzystać ze sklepów i stron internetowych w przypadku wolnego lub „zrywającego” łącza internetowego (np. podczas podróży albo w wielu miejscach które nie są idealnie pokryte infrastrukturą LTE itd…).

Jeżeli przypniesz taką stronę do ekranu głównego to już nie odróżnisz strony, sklepu internetowego od dedykowanej aplikacji. Nie widać paska z adresem i wszystko działa błyskawicznie szybko. Nie wierzysz? Sprawdź! Czytaj więcej o tworzeniu Progressive Web Apps

Single-Page Application (SPA)

Kolejna technika to SPA czyli Single-Page Application. Technologia ta jest przyjazna urządzeniom mobilnym. Czytaj więcej w osobnym artykule, w którym także można się zapoznać z zaletami stron SPA.

Przykłady stron mobile-first na lata 2018/2020

Zwróć uwagę na „menu mobilne” oraz to jak o wiele lepiej strona prezentuje się w widoku mobilnym: Najładniejsze strony 2020

Wnioski

Witryny, w których położono nacisk na wrażenia użytkowników urządzeń mobilnych czekają dobre czasy. Google mówi (cytuję):

Nasze algorytmy ostatecznie wykorzystają mobilną wersję treści witryny do pozycjonowania stron

Strony internetowe, które nie mają wersji responsive web design wkrótce praktycznie znikną z indeksu. Planowałeś wykonać nową wersję strony internetowej? Nie poganiam ale jest to idealny moment.