Rynek urządzeń mobilnych rozwija się w błyskawicznym tempie, a wraz z nim, w takim samym tempie, rośnie liczba użytkowników korzystających do przeglądania Internetu ze swoich smartphone’ów, phablet’ów, tabletów, czy nawet wearables. Wydawać by się mogło, że tworzenie responsywnych stron internetowych jest już standardem. Niekiedy jednak target mobilny jest brany pod uwagę z niższym priorytetem, co jest ogromnym błędem!

Oto zalety koncepcji „Mobile first” i dlaczego tworzyć RWD zaczynając od urządzeń mobilnych:

1. Zapewnienie kompatybilności z mniej zaawansowanymi urządzeniami,
2. Zmniejszenie ilości oraz złożoności kodu CSS,
   
3. Priorytetyzacja funkcjonalności oraz treści,
4. Dostosowanie do dynamicznie rozwijającego się rynku urządzeń mobilnych,
5. Wykorzystanie rozszerzonych możliwości,
6. Skrócenie czasu realizacji.

Poniżej przedstawiam rozwinięcie każdej z nich.

1. Zapewnienie kompatybilności z mniej zaawansowanymi urządzeniami

Dzięki budowaniu strony zaczynając od pisania CSS dla urządzeń o najmniejszych rozdzielczościach zapewniamy, że efekt będzie prawidłowy również dla telefonów nie obsługujących media queries.

...  /* style dla najmniejszych ekranów */ 
@media only screen and (min-width: 320px) { /* style dla szerokości powyżej 320px */
}

@media only screen and (min-width: 768px) { /* style dla szerokości powyżej 768px */
}

2. Zmniejszenie ilości oraz złożoności kodu CSS

Ze względu na mniejszą szerokość ekranu, dla telefonów wiele elementów strony układanych jest w stos. Jest to zarazem domyślne zachowanie elementów blokowych. Przykładowo na urządzeniu mobilnym chcemy sidebar umieścić w stosie, a dla większych rozdzielczości obok contentu.

Wychodząc od wersji desktop’owej w kierunku mobilnej, kod mógłby wyglądać tak:

aside {
  width: 20%;
  float: left;
}

@media only screen and (max-width: 320px) {
  aside {
    width: 100%;
    float: none;
  }
}

Natomiast zgodnie z „mobile first”:

@media only screen and (min-width: 320px) {
  aside {
    width: 20%;
    float: left;
  }
}

W pierwszym przykładzie, dla szerokości ekranu < 320px musimy nadpisać wartość zadeklarowane wcześniej. W drugim przykładzie nie ma takiej potrzeby, ponieważ domyślne zachowanie elementu blokowego aside jest zgodne z oczekiwanym i wystarczy dodać regułę dla większych ekranów.
Wynika z tego, że stosowanie najpierw prostszego, dostosowanego do urządzeń mobilnych layoutu, a następnie rozszerzanie go wedle potrzeb, pozwala zachować przejrzystszy, krótszy kod. Ma to przełożenie na łatwiejsze zarządzanie CSS’em oraz na szybkość działania strony.

3. Priorytetyzacja funkcjonalności oraz treści

Projektowanie „mobile first” pomaga skupić się na treści strony, która ma największe znaczenie. W odróżnieniu od desktop’ów, na urządzeniach mobilnych jest mniej miejsca na rozmieszczenie treści. W rezultacie należy serwować użytkownikowi najważniejsze i najużyteczniejsze dla niego treści, a następnie rozszerzać je dla większych ekranów. Priorytetyzacja pomaga ustalić, czy np. treść, która została uznana za zbyt mało ważną na umieszczenie jej na stronie głównej wersji mobilnej strony, jest na tyle ważna by umieścić ją na stronie głównej wersji desktop’owej.

4. Dostosowanie do dynamicznie rozwijającego się rynku urządzeń mobilnych

Rynek urządzeń mobilnych rozrasta się w ogromnym tempie. Wraz z nim rośnie liczba użytkowników mobilnych korzystających ze swoich urządzeń do przeglądania Internetu. Wg statystyk^[2] w 2012r. ich liczba wynosiła 1.6 miliarda, natomiast rok później już 2.1 miliarda. Pojawianie się coraz bardziej zaawansowanych technologicznie telefonów sprawia, że dla części osób ich urządzenie mobilne jest jedynym źródłem dostępu do Internetu.

Poniższa tabela przedstawia procentowe zestawienie użytkowników korzystających z Internetu wyłącznie za pomocą urządzeń mobilnych w wybranych krajach:

Źródło: http://mobiforge.com/research-analysis/global-mobile-statistics-2014-part-b-mobile-web-mobile-broadband-penetration-3g4g-subscribers-and-ne#mobile-only

Powyższe statystyki pokazują, że przyszłościowym podejściem jest branie pod uwagę, przy tworzeniu stron, urządzeń mobilnych jako tych z wyższym priorytetem.

5. Wykorzystanie rozszerzonych możliwości

Często można spotkać się z myśleniem, że strona mobilna jest „okrojoną” wersją strony desktop’owej, Takie podejście ma zaszłości historyczne, kiedy przypisywana była etykieta dla stron „mobile” dla tego typu strony, a na niej znajdował się link do „pełnej wersji strony”. Prawda jest taka, że obecnie smartphone’y, czy tablety mają więcej możliwości niż komputery. Potrafią wykorzystywać geolokalizację, mogą przełączać layout w zależności od sposobu ich trzymania, posiadają funkcje multidotyku oraz wiele sensorów. Ma sens rozważenie mobilnych możliwości w pierwszej kolejności podczas tworzenia web aplikacji.

6. Skrócenie czasu realizacji

Kolejna zaleta stosowania koncepcji „mobile first” wywodzi się z pkt. 2. Bazowanie na prostszym layoucie, utrzymywanie mniejszej ilości, bardziej przejrzystego kodu pozwala w szybszym tempie rozwijać layout dla urządzeń o większych ekranach.

Podsumowanie

Moim zdaniem, w dobie błyskawicznie rozwijającego się rynku urządzeń mobilnych, strony RWD powinny być już absolutną koniecznością, zamiast niekiedy funkcjonalnością odkładaną na później. Rynek mobilny jest przyszłością i warto traktować go z wyższym priorytetem, a tworzone strony z zasadą „mobile first” przyniosą więcej korzyści.

Bibliografia

[1] Kadlec Tim, Implementing Responsive Design: Building sites for an anywhere, everywhere web, USA, New Riders, 2013

[2] http://mobiforge.com/research-analysis/global-mobile-statistics-2014-part-b-mobile-web-mobile-broadband-penetration-3g4g-subscribers-and-ne#mobilebroadband

Materiały pomocniczne

Mobile First

Global mobile statistics 2014 Home: all the latest stats on mobile Web, apps, marketing, advertising, subscribers, and trends…