banner bloomnet

Na czym polega mobile first w projektowaniu?

Mobile first vs desktop first – jeszcze do niedawna w tym pojedynku linę mocniej przeciągał desktop, ale teraz coraz częściej jest on w odwrocie. Kiedy mobile first design jest szczególnie przydatny? Jakie są zalety projektowania najpierw wersji mobilnej, a dopiero później dopasowywania produktu do coraz większych ekranów? Czy ten trend będzie jeszcze mocniej postępował?

Na czym polega mobile first w projektowaniu?

Smartfon jak podręczny komputer

Według raportu „Polska.Jest.Mobi 2018” firmy Mobee Dick, udział smartfonów i tabletów w czasie spędzanym na urządzeniach podpiętych do internetu systematycznie zwiększa się: obecnie jest to 46 proc., przy 43 proc. w poprzednim roku. Ponadto, 48 proc. Polaków deklaruje, że korzysta z urządzeń mobilnych ponad dwie godziny dziennie, a średnia to już 2,3 godz. (przed rokiem 1,8 godz.).

Smartfon jest więc coraz częściej wykorzystywany jako podręczny komputer, przy pomocy którego możemy załatwić już niemalże wszystkie sprawy.

Co oznacza mobile first

Sposób postrzegania projektowania stron diametralnie zmieniła popularyzacja RWD, które dziś jest już standardem, ale mobile first to pójście jeszcze dalej.    

Idea mobile first to odejście od schematu, w którym pierwszym krokiem jest budowa wersji desktopowej, a dopiero później dostosowanie jej do rozdzielczości mobilnych. Zamiast więc okrajać funkcjonalności produktu pod smartfony i tablety, proponuje się start od bardzo funkcjonalnej wersji mobilnej, która następnie będzie sukcesywnie rozbudowywana pod większe ekrany (tzw. progressive enhancement).

Jest to więc wyjście od mobile’u do desktopu. Zamiast myślenia, „co wyciąć”, przechodzimy do perspektywy rozwoju produktu.  

- Korzystanie z rozwiązań mobilnych stało się masowe. (…) Mobile jest dobry dla internetu, ponieważ go porządkuje. Mniejszy ekran i podejście „mobile first” powoduje, że także desktopowe rozwiązania są czystsze i lepiej zaprojektowane. Ponad 2 lata temu Google wręcz wymusił dostosowanie stron do urządzeń mobilnych pod groźbą przesunięcia niżej w wynikach wyszukiwania. To zmotywowało większość podmiotów do przeprowadzenia gruntownej przebudowy swoich serwisów. Trudno dziś znaleźć wśród szanujących się brandów przypadki stron, które w smartfonie nie wyświetlają się poprawnie – pisze Tomasz Woźniak we wspomnianym na wstępie badaniu Mobee Dick.

Mobile first a user experience

Podejście mobile first początkowo może wydawać się nieco trudne. Chodzi tutaj o wyzbycie się desktopowych nawyków, bo tam designer ma jednak szerokie pole do działania.

W przypadku „mobilki”, gdzie możliwości są mniejsze, trzeba umieć zrezygnować z pewnych rozwiązań kosztem jak najlepszej funkcjonalności. Z drugiej jednak strony, dokładając kolejne cegiełki pod coraz większe ekrany, tradycyjna strona może okazać się bardziej spójna i wygodna w użytkowaniu. Korzystanie z witryny na smartfonie jest wówczas w pełni komfortowe, a przy otwarciu jej na domowym komputerze user jeszcze zyskuje.

A przecież właśnie o UX tutaj chodzi. Owszem, projektowanie pod potrzeby Kowalskiego nie jest niczym nowym, ale ograniczenia mobilne zmuszają projektantów do szukania jeszcze prostszych i skuteczniejszych rozwiązań. Rozwiązań, które pozwolą później przyciągnąć klienta na dłużej.

- Jeżeli ktoś myśli, że podejście mobile first design go nie dotyczy, to jest w błędzie. Mówiąc mobile first nie mamy na myśli tylko ostatniego update'u algorytmu Google (mobile first index – red.), ale przede wszystkim dostarczenie funkcjonalności oraz optymalizację witryny pod kątem wydajności działania i doświadczenia usera. Jeżeli ktoś stawia jakiekolwiek cele biznesowe przed swoją stroną, to zdecydowanie powinien zacząć projektowanie od urządzeń mobilnych. A chcący sprzedawać przez internet powinni rozważyć wdrożenie Progressive Web App (PWA) – podkreśla Piotr Muzyka, specjalista ds. marketingu internetowego agencji Bloomnet.

Znacznie mniej kodu

Na koniec kilka słów o kwestiach technicznych, które przemawiają za stosowaniem mobile first.

Przede wszystkim w CSS-ie oznacza to rozpoczęcie kodowania stylów od tych działających dla urządzeń o małych ekranach. Kiedy zaczynamy projekt od wersji mobilnej, nie mamy niepotrzebnej nadmiarowości, a style dla elementów przypisanych do wyższych rozdzielczości są wczytywane dopiero na tradycyjnym urządzeniu.

- Przy tworzeniu stron w oparciu o mobile first, projekt ma więc dużo mniej kodu. Urządzenie czyta po prostu tylko kod dla „mobilnych”, a nie najpierw dla desktopu, a potem wszystkie style, które nadpisują te wcześniejsze. Obecnie także największe freamworki, takie jak Bootstrap i Foundation, mocno rekomendują właśnie pisanie od mobile first. Zaletą jest też szybsze tworzenie całego projektu, ponieważ jeśli coś wygląda dobrze na mniejszym urządzeniu, to na większym także będzie przystępne – wyjaśnia Damian Czechowski, developer agencji interaktywnej Bloomnet.

Podejście desktop first wciąż ma wielu zwolenników, ale jak widać, będzie ono prawdopodobnie coraz śmielej wypierane przez mobile. Strategia mobile first powoli przestaje już być innowacyjnym rozwiązaniem, a staje się normą w e-commerce.

***

Projektowanie stron i aplikacji mobilnych to jedna z pozycji w ofercie agencji Bloomnet.

Źródła:własne