Pięciolatka RWD – podsumowanie Część 1. RWD – z czym się to się je i dlaczego niektórym nie smakuje?

Wszyscy lubimy rocznice, tym bardziej te okrągłe. I tak responsive web design obchodzi właśnie piąte urodziny. Już niedługo skończy zerówkę i śmiało pójdzie do podstawówki. Jednak znaczenie RWD jest dużo większe niż wskazuje na to jego wiek. W internecie czas płynie dużo szybciej. Dlatego już niedługo RWD stanie się podejściem w pełni obowiązującym w świecie internetu. Artykułem tym rozpoczynamy krótką serię, w ramach której spojrzymy na RWD z trzech różnych stron – podstaw technologicznych tego podejścia, stopnia wdrożenia na polskim rynku oraz możliwości reklamowych.

25 maja 2010 roku opublikowany został artykuł Ethana Marcotte’a „Responsive Web Design”, w którym autor przedstawia kolekcję technik tworzenia stron internetowych, dzięki którym możliwe jest poprawne wyświetlanie treści na ekranie o każdym rozmiarze. Tekst stanowił odpowiedź na zwiększenie liczby urządzeń mobilnych opartych o różniące się od siebie systemy operacyjne, mających inną wielkość ekranu czy rozdzielczość. Mnogość urządzeń dostępnych na rynku doprowadziła do sytuacji, w której stworzenie oddzielnej, mobilnej wersji strony (tzw. stron m.) przestało być wystarczające, aby dobrze obsłużyć ruch na urządzeniach innych niż desktop.

Nie każdy zdaje sobie sprawę, że do 2010 roku (i nie oszukujmy się – często także po nim) projektowano strony internetowe tak, jakby miały iść do druku. Nawet samo pojęcie „strony internetowej” jest przeniesieniem nazewnictwa z prasy. Druk, z punktu widzenia projektanta, jest prosty – istnieje możliwość precyzyjnego ustalenia wielkości elementów, palety barw, rozmiaru czcionki, a sama interakcja z treścią jest mocno ograniczona. Projektanci webowi próbowali przenieść swoje doświadczenia z prasy na tworzenie layoutów stron internetowych. Do pewnego moment zdawało to egzamin.

Słuchaj „Marketer+” Podcast

Podejście to musiało się jednak zmienić – tak jak zmienił się sposób korzystania z treści w internecie. Jak wspomniałem, artykuł Marcotte’a powstał jako odpowiedź na rosnącą liczbę urządzeń, które, z uwagi na ograniczenia np. w swojej wielkości, nie radziły sobie z wyświetlaniem layoutu strony przygotowanej wg standardowego dla tego czasu podejścia. Przygotowywanie osobnych wersji dla każdego możliwego urządzenia było zbyt nieefektywne czasowo i finansowo. Strony mobilne, często odpowiednio „odchudzone”, ładowały się szybciej, ale gorzej pozycjonowały się w wyszukiwarkach. RWD miało dać możliwość prezentowania pełnej treści strony na każdym urządzeniu, zmieniając jedynie samo „rozłożenie” poszczególnych elementów na stronie.

O co w gruncie rzeczy chodzi w projektowaniu stron RWD? Marcotte w swoim tekście wyróżnił trzy podstawowe elementy technologiczne responsive web designu:

• • płynna siatka projektu (ang. fluid grid) – autor sugerował, aby wszystkie parametry strony (lub większość z nich), np. wielkość poszczególnych elementów, wyrażane były za pomocą relatywnych wartości, takich jak procenty czy wprowadzone nieco później vw (ang. viewportwidth) czy vh (ang. viewportheight), czyli procent wysokości lub szerokości okna, na którym dany layout jest wyświetlany. Zastosowanie relatywnych wartości pozwala mieć pewność, że strona będzie płynnie skalowana i dopasowywana do wielkości ekranu. Spójrzmy na poniższy przykład – zmniejszając całe okno widzimy, że każdy z elementów strony również staje się mniejszy;

See the Pen Płynna siatka by Maciej Kiełczewski (@keucz) on CodePen.

• płynne zdjęcia (ang. fluid images) – zdjęcia, podobnie jak inne elementy layoutu, również powinny się płynnie dostosować do wielkości ekranu. Istotne, aby zdjęcia były w stanie zarówno zmniejszyć się w przypadku mniejszego okna, jak i nie zwiększać się nadmiernie na bardzo dużych ekranach;
• wyrażenia typu media queries – samo stosowanie relatywnych wartości nie pozwoli uzyskać optymalnego wyglądu strony na wszystkich urządzeniach. Każdy projekt oparty na płynnej siatce staje się w pewnym momencie nieczytelny, np. trzy kolumny tekstu będą znacznie gorzej wyglądać i funkcjonować na telefonie niż na desktopie. Dlatego projektując strony responsywne konieczne jest wykorzystanie media queries – warunkowych deklaracji w CSS, wykonywanych tylko w momencie, kiedy konkretny warunek, dotyczący np. szerokości ekranu czy orientacji urządzenia, jest spełniony. Do przykładu pokazywanego powyżej dodałem kilka media queries – zmniejszając okno widzimy jak zmienia się układ strony, tak aby zapewnić optymalne wykorzystanie dostępnej powierzchni.

See the Pen Media queries by Maciej Kiełczewski (@keucz) on CodePen.

RWD to jednak nie tylko technologia, a nowe podejście do projektowania – wymaga bowiem od projektantów, twórców treści oraz marketerów całkiem nowego sposobu myślenia. Marcotte pokazywał, że można tworzyć jeden design, który pozwoli zapewnić równie dobre doświadczenie na każdym urządzeniu. Głębokie rozumienie idei stojącej za RWD nakazuje tak naprawdę odrzucenie dogmatu przejętego z prasy, który narzucał budowę jednej, spójnej strony, na rzecz projektowania systemu elementów, które mogą być różnie rozkładane w zależności od wielkości, rodzaju czy rozdzielczości urządzenia, na którym są wyświetlane. Trzeba pamiętać o specyfice konkretnych urządzeń, które różnią się przecież nie tylko wielkością ekranu. Na telefonach i tabletach nie uświadczymy gestu :hover (moment gdy kursor myszki tylko najeżdża na dany element), a w wypadku urządzeń dotykowych mamy zupełnie nowy rodzaj interakcji z treścią.

Mimo że od publikacji artykułu Marcotte’a minęło już pięć lat, niewiele zmieniło się w kwestii samego podejścia i rozumienia podstawowych założeń responsive web design. Nie dziwi fakt, że coraz większą wagę przykłada się do wprowadzania tego podejścia przy większości projektów. Powód jest prosty – stale rosnąca popularność urządzeń mobilnych, jak i coraz większa różnorodność urządzeń dostępnych na rynku. Zacierają się również granice między prostym podziałem na mobile, tablet i desktop. Dlaczego? Wchodzimy w okres, kiedy coraz większe znaczenie mają inne urządzenia, takie jak konsole, telewizory ze smartTV, wearables, różniące się od siebie nie tylko wielkością ekranu, ale i innym sposobem interakcji.

Projektowanie responsywne to w głównej mierze nowy sposób myślenia. Niestety do tej pory w wielu przypadkach nie było szeroko wspieranej technologii, która pomogłaby wcielić w życie wszystkie pomysły projektantów czy marketerów. To na szczęście szybko się zmienia. Dzięki elementowi html5 <video> możemy już w pełni responsywnie wyświetlać natywne materiały wideo na każdej prawie platformie. Być może już niedługo pełnego wsparcia doczeka się także element <picture>, umożliwiający dynamiczne sprawdzanie wielkości okna i rozdzielczości, tak aby serwować zdjęcia o odpowiednim dla danego urządzenia rozmiarze i gęstości pixeli. Problemy z dostosowywaniem zdjęć sprawiają, że coraz częściej wykorzystywane są grafiki wektorowe w postaci plików SVG, umożliwiające zachowanie bardzo wysokiej dokładności obrazu przy niedużej wadze pliku. Doskonałą kontrolę nad rozłożeniem elementów strony na dostępnej przestrzeni daje flexbox – nowy model pozycjonowania treści, pomagający dynamicznie dopasowywać i układać treści w każdym wymiarze, w sytuacji, w której nieznane są stałe parametry poszczególnych elementów. W tym momencie flexbox jest już powszechnie wspierany – wg caniuse.com ponad 95% ruchu w internecie generowanego jest przez przeglądarki potrafiące obsłużyć tę technologię.

Najbliższa przyszłość internetu to właśnie jak najlepsze wykorzystanie podejścia RWD. Pojawiać się będą nowe technologie wspierające projektantów. CSS4 wprowadzić ma nowe media queries, które pozwalać będą na wykorzystanie np. sensorów światła (tak aby zmieniać nasycenie barw lub kontrast w warunkach dużego natężenia światła), żyroskopu, kompasu czy akcelerometru, a także umożliwią dostęp do GPSa Wi-Fi, RFiD, Bluetootha, a nawet wibracji przez API.

Jednak najważniejsze zadanie leży przed osobami odpowiedzialnymi za treść na stronie. Konieczne jest przedefiniowanie tego, jak działamy z treścią i co chcemy przedstawiać użytkownikom. Informacja musi zostać wysunięta na pierwszy plan, bo to do niej, niezależnie od urządzenia, dotrzeć chcą użytkownicy. Niektórzy już teraz idą krok dalej, sugerując wyróżnienie z contentu wyłącznie kluczowych danych, które powinny być lepiej widoczne dla użytkowników poszukujących informacji na mniejszych ekranach. Stąd idea responsywnego tekstu (oznaczanie fragmentów, które są mniej ważne i powinny być wyświetlane tylko na niektórych urządzeniach). Skoro zmieniliśmy już sposób, w jaki myślimy o projekcie strony, może warto też przyjąć inną perspektywę odnośnie samego contentu. Treść, podobnie jak layout, również może być rozbijana na bloki informacji, które na rożnych urządzeniach mogłyby być dowolnie składane, aby zapewnić użytkownikowi możliwe najwygodniejszy odbiór.

Sieć, nieustannie się rozwijając, zmusiła nas do przedefiniowania tego, w jaki sposób przygotowujemy i budujemy nasze strony internetowe. Nie oszukujmy się – RWD jest trudne, wymaga więcej pracy na poziomie koncepcyjnym, często zmusza do wykorzystywania niewspieranych jeszcze w pełni technologii. Niemniej, w przypadku większości projektów, to jedyna droga aby zapewnić możliwie najlepsze doświadczenia dla użytkowników. A przecież to oni – czytelnicy, klienci, fani – powinni być dla nas najważniejsi.