Rola Responsive Web Design w projektowaniu stron internetowych

W 2010 roku ilość wyszukań i konsumpcji treści na urządzeniach mobile przekroczyła tą na desktop.

Pojawił się problem, jak dostosować zawartość stron do diametralnie różnych możliwości ekranu komputera i telefonu lub innych urządzeń. Zanim powstał wzorzec RWD próbowano jeszcze kilku innych rozwiązań, które jednak nie wytrzymały starcia z rzeczywistością kształtowaną przez smartfony i ich możliwości.

Główna walka toczyła się pomiędzy wzorcem adaptatywnym AWD a responsywnym RWD. Czasami można jeszcze spotkać strony dostosowane do mobile poprzez ładowanie innej statycznej wersji siebie na urządzenie przenośne. Charakterystyczny dla nich jest przedrostek m. w adresie URL. Jest to jednak rzadkość i przywołuję to jedynie jako ciekawostkę, jeden z pomysłów na poradzenie sobie z problem, który się nie sprawdził. Strony takie musiały być bowiem tworzone oddzielnie dla każdego typu urządzenia co znacznie podnosiło koszty ich powstawania i utrzymania. Ponadto zapewnienie oddzielnych wersji na wszystkie urządzenia, jak się z czasem okazało, jest po prostu prawie nierealne.

W skrócie – strony responsywne odpowiadają (respond) na rozmiar okna przeglądarki, są plastyczne. Strony adaptatywne adaptują się do okien przeglądarki w specyficznych punktach (break points). RWD jest płynne, podczas gdy AWD przeskakuje:

• RWD – górny pasek
• AWD – dolny pasek

AWD

Idea działania AWD opartego o break pointy:

W praktyce przyjęło się ustawiać break pionty dla sześciu szerokości wyrażonych w pikselach:

• 320
• 480
• 760
• 960
• 1200
• 1600

Już pierwszy rzut oka sugeruje, że developera czeka więcej pracy niż przy podejściu RWD, jednak metoda ta ma swoje plusy. Jednym z nich jest tzw. retrofitting, czyli dopasowanie już istniejącej, rozbudowanej witryny do wymagań ekranu smartfona.

See the Pen Adaptive Example by CSS-Tricks (@css-tricks) on CodePen.

Zaletą podejścia AWD jest możliwośc dopasowania layoutu do określonego rozmiaru ekranu, a co za tym idzie nie ładowania wszystkich zasobów dla desktopu na mobile – a to się często „zdaża”, choć nie powinno, przy podejściu RWD. Dzięki temu strony AWD co do zasady wypadają korzystniej w testach wydajności, np. narzędzia Page Speed Insights. Jest to jednak efekt uboczny, osiągany nie dzięki przewadze AWD, a raczej dzięki niedoskonałości warsztatu developerów tworzących w RWD.

Przykład wyników czasu ładowania dla RWD kontra AWD. Źródło: „Responsive Design vs. Adaptive Design: What’s the Best Choice for Designers?”

Charakterystyczne jest też to, że strony konstruowane metodą AWD różnią się designem od tych z wersji desktop, jednak jest to zabieg zamierzony.

RWD

Termin został ukuty i wszedł do użytku w 2010 roku za sprawą artykułu Ethan’a Marcotte: Responsive Web Design by Ethan Marcotte.

Wraz z upływem czasu i rozwojem technologii o Flexbox, CSS Grid i Media Queries (i ostatnio Container Queries) można podsumować RWD jako składający się z trzech bazowych elementów:

1. Flexible Grid based layout – elastyczny, reaktywny layout. Doskonałym przykładem jest technologia CSS Grid: Grid by Example & A Complete Guide to Grid. W połączeniu z Flexboxem: A Complete Guide to Flexbox działa cuda: Grid for layout, flexbox for components.
2. Flexible Media – elastyczność mediów typu grafiki, filmy, osadzone fragmenty innych stron (via <iframe>). Więcej dla zainteresowanych tutaj: responsivedesign.is
3. Media Queries – A Complete Guide to CSS Media Queries

Świetnym przykładem zastosowania powyższych w praktyce jest filmik instruktażowy Uny Kravets: 10 modern layouts in 1 line of CSS. Polecam obejrzeć aby zobaczyć RWD w działaniu od kuchni.

Mobile first & Progressive Enhancement

21 kwietnia 2015 roku strony mobile friendly poprzez update algorytmu Google (potocznie zwanym „Mobile First”) zaczęły rankować wyżej w wynikach wyszukiwania. Tym samym Google wymusił stosowanie się do swoich zaleceń, gdyż od początku sugerował podejście RWD. Przejście od rekomendacji do wymagań zaowocowało powstaniem mobile first website approach.

Mobile first website approach oznancza proces projektowania i tworzenia witryny od skali najmniejszego device w kierunku desktop. Jest więc odwróceniem początkowego trendu tworzenia na desktop i dopasowywania za pomocą AWD lub RWD layoutu do mniejszej skali.

Z pojęciem tym koresponduje znakomicie kolejny wzorzec projektowy. Progressive Enhancement to model tworzenia aplikacji czy stron nastawiony na maksymalne uproszczenie i zapewnienie podstawowych funkcji na jak najniższej klasy urządzeniu. W miarę jak rośnie moc urządzenia lub przeglądarki i jego możliwości, aplikacja i strona może uruchomić bardziej złożone i wyrafinowane właściwości, np. layoutu lub ozdobników, aby poprawić UX.

Waga takiej strony oraz poziom skomplikowania na podstawowym poziomie pozwala na to, że telefony sprzed 15 lat są w stanie takie witryny obsłużyć. Kolejnym atutem i cechą takiego podejścia jest łatwość utrzymania takiej strony oraz jej duża kompatybilność wsteczna. Zwolennikiem Progressive Enhancement jest również Tomasz Jakut, który napomyka o tym nawet przy okazji rozkmin nad semantyką kodu: Semantyczny blog w HTML. Odwołuję się tu do Tomasza, gdyż można spotkać sugestie jakoby Progressive Enhancement dotyczyło stricte AWD.

Mads Soegaard w artykule „Adaptive vs. Responsive Design”

Adaptive Web Design was introduced in 2011 by web designer Aaron Gustafson in his book, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. It is also known as progressive enhancement of a website.

Podejście Mobile First & Progressive Enhancement zapobiega wielu problem, ucinając je zanim powstaną. Niestety wymaga to przerucenia się na taki tryb myślenia o projekcie, gdyż nadal dominuje wypracowany latami model projektowania na desktop a następnie degradowanie projektu do ram urządzeń o mniejszym innym potencjale.

Do popularności RWD przyczyniła się z pewnością szeroka dostępność tanich templatek w ramach popularnych CMS, jak Wordpress. W połączeniu z preferowaniem tego typu rozwiązania przez Google, zanim jeszcze zdecydowało się na włączenie RWD do wymagań rankingowych, przeważyło szalę ilości wdrożeń na korzyść tej technologii.

UX

Nieodzowną częścią Responsive Web Design jest User Experience. W podejściu mobile first projektujemy przede wszystkim na telefon, wraz ze wszystkimi tego konsekwencjami, jak obsługa dotykowa palcem lub penem a nie myszką z kilkoma klawiszami. Pamiętać należy o Accesibility, gdyż telefon umożliwia bardziej niż desktop nawigację głosem i konsupcję treści poprzez odsłuch.

Konieczne jest zapoznaqnie się ze sprawdzonymi w użytkowaniu Responsive Web Design Patterns. Część z nich, jak Holy Albatros jest przedstawiona na osadzonym wyżej filmie Uny Kravets.

Skorzystaj z gotowych, opracowanych przez najwyższej klasy specjalistów bibliotek jak Material Design. Dzięki nim zapewnisz swojemu projektowi spójność i przejrzystość.

No dobra, ale po co to wszystko?

Święta konwersja

Odpowiedź jest prosta – każda strona ma cel lub kilka, a poziom ich realizacji to stopień konwersji. W czasach, gdy większość interakcji z siecią odbywa się via smartfon trudno mówić o konwersji bez dostosowania się do tego urządzenia. Dodając do tego jeszcze nacisk Google na konkurowanie stronami właśnie w obszarze mobile a nie desktop oraz włączenie zagadnień UX do czynników rankingowych dopełnia obraz tego, gdzie toczy się walka o konwersję.

Podsumowując – twoja strona ma być jak Floyd Mayweather:

• szybka
• lekka
• dynamicznie reagująca na sytuację
• i celnie trafiająca w użytkownika

A będzie zarabiać również jak Floyd!