Web Design Blog / Web:

Sklepy i strony internetowe mobile-first

Jak wiadomo już z poprzednich wpisów, np tych o optymalizacji stron www czy statystykach Internetu – 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.

trendy web design 2018 - mobile first

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. Google 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ś Google sprawdzało czy strona jest adekwatna na zapytania w oparciu o widok desktopowy. 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. To 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.

Progressive Web Apps (PWA)

Nową technologią jaką należy się zainteresować w pierwszej kolejności 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 zrób mały eksperyment.

  1. Odwiedź moją stronę główną,
  2. Poklikaj w parę miejsc (dowolnych np. „O mnie” , „Oferta” itd…)
  3. Potem odłącz internet i spróbuj wejść na te strony które odwiedziłeś… 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…).

Możesz jeszcze „zainstalować” moją aplikację  w Chrome klikając w „kropeczki” po prawej stronie i „Zainstaluj”. To samo można zrobić na urządzeniach mobilnych – będzie ona korzystać ze strony tak jak z aplikacji polepszając wrażenia użytkownika.

mobile-first-sklepy-internetowe

Jeżeli przypniesz ją 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ź!

Słów kilka o AMP

Wracając do stron i sklepów AMP, często zgłaszaliście mi obawy, że w końcu AMP jest dla przyspieszonych stron mobilnych co z wersją Desktop? Czy desktop też może być w wersji AMP? Czy posiadając tylko wersję AMP strony nie zaszkodzę wynikom wyszukiwania? Odpowiedź brzmi: Można wykonać responsywną stronę internetową zgodną z AMP. Błyskawiczna prędkość strony internetowej  wpłynie na jej pozycje tylko pozytywnie. Witam w erze urządzeń mobilnych. Wadą stron AMP jest stosunkowo mała funkcjonalność i mała ilość gotowych szablonów ale już są.

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

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

dior.com

bugatti.com

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.

Sklepy i strony internetowe mobile-first
4.6 (92.38%) głosów: 21

Autor:

Służę pomocą w razie wykonania lub odnowienia strony internetowej dla twojej firmy niezależnie od lokalizacji czy skali przedsięwzięcia. Masz pytania? Pisz w komentarzu.

Zadaj pytanie lub skomentuj


Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail