Wraz ze wzrostem ruchu mobilnego, każda strona musi być dostosowana do mniejszych ekranów. Dwa główne podejścia to dedykowana wersja mobilna i Responsive Web Design (RWD).

Dedykowana wersja mobilna

Osobna strona pod adresem typu m.example.com lub example.com/mobile.

Zalety

  • Pełna kontrola nad wersją mobilną
  • Możliwość uproszczenia contentu
  • Szybsze ładowanie (mniej zasobów)

Wady

  • Dwa osobne systemy do zarządzania
  • Podwójna praca przy aktualizacjach
  • Problemy z SEO (duplicate content)
  • Konieczność przekierowań

Responsive Web Design (RWD)

Jedna strona, która automatycznie dostosowuje się do rozmiaru ekranu.

Zalety

  • Jeden URL - lepsze dla SEO
  • Jeden CMS do zarządzania
  • Automatyczne dostosowanie do wszystkich urządzeń
  • Łatwiejsze utrzymanie

Wady

  • Wszystkie zasoby ładowane na każdym urządzeniu
  • Bardziej skomplikowany CSS
  • Wymaga przemyślanego projektu od początku

Porównanie

AspektWersja mobilnaRWD
URLm.example.comexample.com
SEOProblematyczneOptymalne
Zarządzanie2 systemy1 system
WydajnośćMoże być lepszaZależy od implementacji
Koszt utrzymaniaWyższyNiższy

Jednostki CSS dla RWD

Zamiast stałych pikseli, używaj jednostek względnych:

/* Zamiast */
font-size: 16px;
width: 960px;

/* Używaj */
font-size: 1em;
width: 100%;
max-width: 60rem;

Statystyki ruchu mobilnego

Obecnie ponad 50% ruchu w internecie pochodzi z urządzeń mobilnych. Dominującym systemem jest Android.

Rekomendacja

RWD jest lepszym wyborem dla większości projektów:

  • Jeden kod do utrzymania
  • Lepsze SEO
  • Gotowość na przyszłe urządzenia
  • Niższe koszty długoterminowe

Podsumowanie

Responsive Web Design stał się standardem branżowym. Dedykowane wersje mobilne mają sens tylko w specyficznych przypadkach, np. aplikacje o skrajnie różnej funkcjonalności na mobile i desktop.