Responsive Web Design – moda czy konieczność?

Responsywne strony WWW to dziś standard, do którego dążą wszyscy projektanci stron. W świecie smartfonów, tabletów, laptopów, telewizorów z dostępem do sieci oraz komputerów stacjonarnych stworzenie strony, która będzie dobrze się prezentowała i zachowa swoją funkcjonalność na każdym z urządzeń, to klucz do sukcesu!

Otóż do tej pory mieliśmy sprawę dosyć prostą: koncepcja serwisu, struktura i makiety, potem grafika, jej akceptacja i pliki źródłowe grafiki wysyłane do developera. Klient zaangażowany na każdym etapie procesu, aktywnie nanoszący swoje uwagi, szczególnie w kontekście grafiki (czasem destrukcyjne dla całego projektu), akceptujący strona po stronie, projekt po projekcie, ikonka po ikonce, aż do szczęśliwej akceptacji.
I nagle wkracza Responsive Web Design. Jedni wiedzą i chcą, inni coś słyszeli, ale nie traktują go poważnie, jeszcze inni pierwsze słyszą.

… no dobra, ale co to jest ten Responsive Web Design?

Pierwszy raz pojęcie Responsive Web Design pojawiło sie w artykule Ethana Marcotte w maju 2010 roku. Jest to całkowicie nowa idea budowania witryn internetowych. Polega ona głównie na tym że strona internetowa będzie wrażliwa (ang. responsive) na zmiany szerokości ekranu na którym jest oglądana. Strona będzie automatycznie „dopasowywać się” do wielkości ekranu. Przeglądanie jej będzie wygodne zarówno na dużym monitorze, jak i na smartfonie czy tablecie (iPad). Na każdym ekranie, strona może wyglądać trochę inaczej – na dużym będzie wykorzystywać możliwości ekranu, na średnim – delikatnie zmniejszy szerokość kolumn, a na mniejszym – utworzy jedną kolumnę i „przebuduje” nawigację w łatwe do trafienia palcem, duże linki. Obrazki przeskaluje do najbardziej optymalnej wielkości. Dostosuje wielkość czcionek aby czytanie było wygodne na każdym ekranie.

… to od czego zacząć?

Design strony należy zacząć projektować od “końca” – czyli od wersji dla urządzeń mobilnych, o małych rozdzielczościach, których używa się inaczej – w innym środowisku – niż standardowych desktopów. Strony www to już nie jest sam wygląd – w erze wszechobecnej mobilności mamy już prawdziwe „look&feel”. Większość smartfonów ma już wyłącznie dotykowe ekrany.
Nie możemy władować wszystkiego co ma znaleźć się na stronie do wersji mobilnej – musimy zacząć od prawidłowej hierarchizacji danych. Na urządzeniach mobilnych powinny wyświetlać się niezbędne, nierozpraszające elementy, które w sposób prosty i szybki pozwolą wykonać użytkownikowi czynność lub dotrzeć do potrzebnych informacji.

Łatwiej jest dodawać elementy w miarę rozszerzania się strony, niż ukrywać przy zmniejszaniu. Mały ekran urządzenia wymusza na nas określenie, które informacje na stronie są tak znaczące, że muszą znaleźć się na tej niewielkiej dostępnej przestrzeni.

.. a może cyfrowa tablica?

Jeśli chcemy wykonać serwis RWD efektywnie, a rezultat końcowy ma „oszczędzać” użytkownika Internetu mobilnego i ładować się bezproblemowo, odpuszczamy sobie projekt (w tym klasycznym rozumieniu pojęcia „projekt graficzny”). Nie robimy grafik strona po stronie, bo efekt końcowy nie będzie ani zgodny z nimi, ani sensownie wyświetlany, ani ekonomiczny jeśli chodzi o wagę i szybkość ładowania. PSD dostarczone webdeveloperowi nie sprawdzi się.
Zamiast tego możemy zaproponować klientowi moodboard. I wierzcie mi zobaczycie zdzwinienie w jego oczach.

Mooboard to najprościej rzecz ujmując taki worek z klockami, z których ma powstać statek kosmiczny, a patrząc na te kawałeczki zupełnie nie wiadomo, jak to będzie wyglądało. Trochę tak jest z moodboardem. Zbiera on do jednego worka ikony, które będą użyte na stronie, fonty tekstów i nagłówków, same boksy, główny motyw graficzny (key visual).
Nie ma tu miejsca na skomplikowane motywy graficzne, projektowanie strona po stronie, przesuwanie krok po kroczku, a to w jedną a to w drugą (w ramach strategii pixel perfect).

W RWD developer dostaje worek z klockami w postaci moodboarda oraz skalowalne makiety jako instrukcję i układa to wszystko w jedną, działającą już całość. Dopiero wtedy klient ma pełen obraz serwisu.

Twój komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *