Mobile first – dlaczego warto dbać o użytkowników urządzeń mobilnych?

Nie jest tajemnicą, że kolosalna liczba osób używa do przeglądania sieci urządzeń mobilnych, a zwłaszcza smartfonów. Jak podają statystyki, w ten sposób Internet „odwiedza” codzienne ponad 56% Polaków! Oznacza to, że smartfon jest źródłem informacji i rozrywki dla ponad 15 mln osób.

Dlatego każdy właściciel witryny powinien zadbać o to, aby była ona w pełni przyjazna dla użytkowników zaglądających na nią za pomocą smartfona lub tabletu. Witryny, które wyświetlają się tak samo dobrze zarówno na desktopie, jak i wyświetlaczu telefonu, nazywamy responsywnymi.

Ale co oznacza „mobile first” i dlaczego jest to tak ważna sprawa?

Mobilność – cecha XXI wieku

Można zauważyć, że wraz z XXI wiekiem zapanowała powszechna mobilność. Dotyczy to nie tylko smartfonów, ale również takich zjawisk jak rozwój usług chmurowych czy brak konieczności przywiązywania użytkownika do konkretnego urządzenia. Doskonałym przykładem są serwisy streamingowe – jeśli masz np. wykupiony abonament Netflixa, możesz oglądać filmy na tej platformie na telewizorze, monitorze komputera lub też na smartfonie.

Tak samo uniwersalne muszą być witryny internetowe – użytkownik powinien móc czerpać przyjemność z ich przeglądania w każdej sytuacji. „Mobile first” to w dosłownym tłumaczeniu „najpierw mobilność”. Konkretniej oznacza to, aby dawać pierwszeństwo użytkownikom mobilnym. W jaki sposób i dlaczego?

Co to jest podejście mobile first?

Jeśli myślisz o swojej stronie, zapewne oczyma wyobraźni widzisz, jak będzie prezentować się na monitorze komputera lub wyświetlaczu laptopa. „Mobile first” stawia sprawę na głowie – tu najpierw należy pomyśleć, jak witryna zaprezentuje się na najmniejszym ekranie, a dopiero potem idziesz w górę, do coraz większych rozdzielczości, aż po 4K. Na szczęście nie jesteśmy w początkach smartfonowej rewolucji, gdy wyświetlacze miały rozdzielczości SD lub niższą – kolosalna liczba modeli używanych przez ludzi na całym świecie ma wyświetlacze pokazujące obraz HD i lepszej jakości.

Co daje to w praktyce? Lista pozytywów jest spora:

• mobilna edycja strony jest dopracowana optymalnie pod kątem smartfonów, co w żaden sposób nie wpływa negatywnie na wersję desktopową, a wręcz przeciwnie – dzięki wersji mobilnej każdy szczegół standardowej jest lepiej wyeksponowany;
• mobilna edycja niczym nie różni się funkcjonalnością od desktopowej – co jest szczególnie istotne w przypadku sklepu online;
• strona mobilna „waży” mniej niż desktopowa, co ma istotne znaczenie dla osób korzystających z limitowanego transferu danych;
• strona zaprojektowana pod kątem urządzeń mobilnych działa na nich z optymalną prędkością, co znacznie zwiększa komfort użytkowników i zachęca do jej częstego odwiedzania.

Projektowanie mobile first zależy oczywiście od specyfiki danej strony i związanego z nią interfejsu. Nie należy jednak zapominać o żelaznej zasadzie – przede wszystkim użytkownik. Strona musi być zaprojektowana tak, aby miał on pełen komfort jej użytkowania zarówno na komputerze stacjonarnym, jak i smartfonie. W obydwu sytuacjach należy unikać zbytnich komplikacji i stawiać na proste rozwiązania. Na przykład niech menu będzie rozwijaną listą, a nie spisem kategorii zajmującym poziomą belkę.

Jak wdrożyć reguły mobile first na swoich stronach?

Jak wspomniano przed chwilą – najpierw projektujemy na urządzenia mobilne, mające mniejsze wyświetlacze, a dopiero potem idziemy coraz wyżej. Jednak to nie może być po prostu „pomniejszona wersja” strony desktopowej. Smartfony i tablety mają dwie często używane funkcje, wpływające na doświadczenie użytkownika. Jakie?

Pierwszą będzie zmiana orientacji. O ile w przypadku np. systemu Windows zmiana orientacji pionowej z poziomej wymaga wchodzenia w ustawienia i wprowadzenia ręcznie odpowiedniego ustawienia, o tyle smartfony mają tę funkcję w podręcznym menu, a wiele osób włącza ją i zostawia na stałe. Dlatego gdy obrócą telefon lub tablet, automatycznie zmienia się sposób wyświetlania strony. Przy jej projektowaniu należy więc uwzględnić zarówno położenie pionowe, jak i poziome.

Druga funkcja, z której często korzysta się na smartfonach, to podzielony ekran. Tutaj można wykorzystać tę możliwość do prezentowania dwóch elementów. Na przykład na jednej połowie menu kategorii, na drugiej – wybrany przez internautę produkt. Wszystko zależy od potrzeb użytkownika.

O czym jeszcze trzeba pamiętać? Tu lista rzeczy nie jest zbyt długa i są to standardowe praktyki dla stron internetowych, czyli:

• interesujące, przejrzyste treści;
• wysokiej jakości zdjęcia (zalecamy korzystanie z formatu .webp);
• możliwość dopasowania strony (np. jej motywu) do upodobań użytkownika;
• możliwość integracji z aplikacjami mobilnymi, np. opcje podzielenia się treściami ze strony w komunikatorach i sieciach społecznościowych (jak Facebook czy WhatsApp);
• wygodny w obsłudze interfejs.

Responsive Web Design – klucz do mobilnego sukcesu

Responsive Web Design – w skrócie RWD – to właśnie zbiór najlepszych praktyk związanych z tworzeniem stron internetowych pod kątem użytkowników mobilnych. Warto się z nimi zapoznać i wdrożyć je w życie, ponieważ Internet mobilnością stoi, a kto nie chce zostać za burtą, musi podążać za trendami – wyznaczają je sami internauci, którzy najlepiej wiedzą, co jest dla nich wygodne. Ale poza samymi użytkownikami stoją także mechanizmy Google.

Internetowy gigant ma swoją skalę oceniania stron, a responsywność jest jednym z ważniejszych czynników decydujących o pozycji witryny w wyszukiwarce. A im mniej Twoja witryna będzie responsywna, tym gorzej zostanie wypozycjonowana, czego z pewnością chciałby uniknąć każdy właściciel strony.

Ponadto za posiadaniem witryny responsywnej przemawia sam rozwój technologii – rynek smartfonów rośnie z roku na rok, a choć desktopy i laptopy trzymają się nieźle, któż z nas nie spędził popołudnia czy wieczoru, przeglądając witryny internetowe na swoim telefonie? I któż z nas nie opuściłby oglądanej witryny, jeśli byłaby ona niewygodna w obsłudze? No właśnie – nie można odebrać ludziom komfortu, do którego się przyzwyczaili.

Jak łatwo dopasować istniejącą stronę do urządzeń mobilnych?

Rynek technologiczny błyskawicznie odpowiada na zapotrzebowanie i już od dawna istnieje wiele sposobów na to, aby przekształcić strony „klasyczne” w mobilne. Te technologie to:

• AMP (Accelerated Mobile Pages) – technologia rozwijana przez wiele wiodących firm na rynku, m.in. Google. Ma za zadanie zoptymalizować kod tak, aby strona wczytywała się szybciej (do czego wykorzystywana jest pamięć podręczna), a renderowanie grafik było skrócone;
• PWA (Progressive Web App) – sposób tworzenia witryn mobilnych działających niczym aplikacje. Ogranicza pobieranie zawartości, dzięki czemu strony są lżejsze. Stanowi świetną alternatywą dla aplikacji mobilnych, a ponieważ działa w sieci, jest niezależna od przeglądarek oraz systemów operacyjnych.

Ponadto istnieje szereg wtyczek do WordPressa, które umożliwiają przystosowanie posiadanej witryny do wymagań mobile first.

Mobile first to przyszłość? Zdecydowanie!

Nic nie wskazuje na to, aby smartfony szybko ustąpiły pola innym urządzeniom telekomunikacyjnym. W chwili obecnej większość ludzi nie wyobraża sobie bez nich życia. Przeglądają strony w autobusach, pociągach, odpoczywając na ławkach w parku czy kładąc się do snu. Dlaczego nie mieliby wówczas przeglądać właśnie Twojej strony?

Choć wymogi dotyczące projektowania stron „mobile first” mogą wydawać się niełatwe do spełnienia, nie taki diabeł straszny, jak go malują. W praktyce przystosowanie witryny do urządzeń mobilnych nie powinno zająć dużo czasu, podobnie jak stworzenie od podstaw nowej. Ilekolwiek by to nie trwało, korzyści będzie się czerpać przez kolejne miesiące, a strona przyjazna urządzeniom mobilnym będzie mogła być w łatwy sposób rozwijana i usprawniania.

Dlatego warto już dzisiaj zainteresować się RWD i zapewnić swojej stronie bezpieczną przyszłość w sieci!