Coraz częściej korzystamy z Internetu na urządzeniach innych niż komputer. W komunikacji miejskiej wyciągamy smartfony, leżąc na kanapie sięgamy po tablety, czasami przeglądamy strony internetowe na „mądrych” telewizorach. Dołóżmy do tego tych, którzy korzystają w pracy z dużych monitorów, na których mają jednocześnie otwarte wiele okien w niestandardowych proporcjach. Za każdym razem wyświetlamy te same strony internetowe w różnych rozdzielczościach. Smartfony orientowane są pionowo, ekrany komputerów przeważnie mają horyzontalne proporcje 16:9. Tablety różnią się między sobą proporcjami krawędzi ekranów i rozdzielczościami, na dodatek kiedy obracamy ja z poziomu do pionu, strona musi dostosować się do zmiany orientacji.
Tradycyjnie wykonane strony nie biorą pod uwagę rozdzielczości ekranu urządzenia, na którym są przeglądane. Czytając je na smartfonie, musimy powiększać wybrane części strony i przewijać to w jedną, to w drugą stronę, żeby przeczytać niedługi tekst od początku do końca.
Responsywny Web Design (po polsku responsywne projektowanie stron) to nowy sposób myślenia o projektowaniu stron internetowych. Czym jest RWD i co wnosi do filozofii współczesnego Internetu?
Spieszę wyjaśnić.

Responsywny design, czyli projektowanie stron z myślą o użytkowniku

Proszę wyobrazić sobie niezwykłą lodówkę. Kiedy jest pusta, kurczy się i chowa pod szafką. Ale w miarę ustawiania w niej kolejnych produktów, rośnie i dostosowuje się do kształtu wszystkiego, co do niej wkładamy. Zawsze zajmuje tyle miejsca, ile wystarczy na przechowywanie zawartości, ale nie więcej.
Tak działająca lodówka to wizja rodem z kreskówki „Jetsonowie”. Pewnie przez przynajmniej kilka lat nie będziemy mieć takich mieć w domach. Ale działające w ten sposób strony internetowe to już w coraz większej mierze codzienność. Rozlewają się na ekranach jak ciecze w naczyniach, zapełniając przeznaczoną dla nich przestrzeń jak najefektywniej. A wszystko ku uciesze i komfortowi użytkownika.
Przy okazji dbałości o dostosowywanie stron internetowych do rozdzielczości ekranów, na których są wyświetlane, twórcy witryn spod znaku responsywnego projektowania pamiętają o niuansach. Na ekranie dotykowym niewygodnie korzysta się z rozwijanych menu. Znacznie przyjemniejsze w obsłudze są po prostu listy linków. Strona zaprojektowana w zgodzie z zasadami responsywnego projektowania bierze to pod uwagę. Kiedy strona ma kilka kolumn, niewygodnie przegląda się ją na wąskim, pionowym smartfonie. Dlatego responsywne strony internetowe przenoszą zawartość kolumn bocznych do oddzielnych ramek pod albo nad zasadniczą częścią tekstu. Z logiki poziomej orientacji dużego ekranu komputera należy przejść do logiki pionowego ekranu, który użytkownik cały czas „scrolluje”, czyli przewija w dół.

Giganci idą w RWD

Na wyprawę w kierunku responsywnego projektowania stron WWW zdecydowali się także wielcy gracze internetowego dziennikarstwa i e-handlu.
TheVerge to popularny serwis informacyjny publikujący artykuły dotyczące nowoczesnych technologii, gier wideo i kultury popularnej. Aby zobaczyć, jak projektanci witryny poradzili sobie z wprowadzeniem responsywnego projektowania, wystarczy otworzyć stronę Verge i po załadowaniu powolnym ruchem zmniejszyć okno przeglądarki. Zobaczymy, jak poszczególne składowe strony zamieniają się miejscami i zmieniają proporcje. Podobnie będzie, kiedy otworzymy stronę na tablecie albo smartfonie – automatycznie dostosuje się do naszego ekranu i sprawi, że lektura będzie przyjemna, a nawigacja wygodna i bezproblemowa. <http://theverge.com>
Witryna internetowa amerykańskiej gazety Boston Globe też została dostosowana do wymogów responsywnego projektowania. W miarę zwężania strony, zobaczymy że górne poziome menu zostaje zwinięte do ikonki pozwalającej wywołać je kliknięciem, a potem nawigować po działach pisma kolejnymi kliknięciami. Projektanci uniknęli w ten sposób kłopotliwej dla czytających na smartfonach nawigacji przez najechanie kursorem na wskazane pole. Na smartfonie najechanie równa się kliknięciu, nie ma jak rozróżnić obu tych czynności. Dlatego takie proste zmiany w interfejsie witryn internetowych są kluczowe, by nie zniechęcić do siebie użytkowników urządzeń z ekranami dotykowymi. <http://www.bostonglobe.com>
Bardzo podobnie działa witryna potentata polskiego rynku handlu elektronicznego – Allegro. Kolumny zwijają się i zamieniają miejscami, a menu przechodzi w nawigację za pomocą kliknięć.

Wnioski

Jeśli zależy nam na tym, by użytkownicy przeglądający naszą stronę na tabletach i smartfonach nie uciekali od naszej nieprzystępnej witryny, musimy koniecznie pomyśleć o responsywnym projektowaniu.
Ta grupa w przyszłości będzie jedynie rosnąć.