Responsywny design – ciąg dalszy

Parę ładnych miesięcy minęło odkąd napisałam posta ze wstępem do RWD. Dobrze się stało bo dziś wiem na ten temat więcej niż wtedy, co tylko dowodzi, że był to czas dobrze spędzony. Nie wiem czy po tym czasie jest jednak sens kogokolwiek przekonywać że RWD to przyszłość. RWD już tu jest i nie pozostaje nam nic innego jak się z tym pogodzić. Jeśli potrzebujesz drobnego wprowadzenia do tematu, to pierwsza część tego posta jest tutaj. See you in a bit, czyli do zobaczenia w bicie :]

Już? Wszyscy na bieżąco? No to jedziemy.

Termin Responisive Web Design do tej pory nie znalazł w języku polskim wdzięcznego tłumaczenia czy chociażby odpowiednika. Słowo responsive często tłumaczony jako responsywny oznacza reagujący. Strona wykrywa rozdzielczość urządzenia i odpowiednio na nią reaguje, dostosowując swój układ do odpowiednich rozmiarów. Często zdarza się również że na telefonie będziemy mieć niektóre informacje w wersji skróconej, z kolei przy ekranach szerokokątnych możemy się spotkać z dodatkową kolumną. Sposób działania responsywnej strony można zobaczyć na żywo otwierając wizualizację jak działa RWD w nowym oknie a następnie chwycić prawy dolny róg przeglądarki i w wygodnym dla siebie tempie, zmniejszać i zwiększać okno. Za zwichnięte nadgarstki i powyłamywane paluchy nie odpowiadam:-) 

Wszystko ładnie ale…

Projektowanie stron responsywnych do najłatwiejszych zadań nie należy. Przede wszystkim dlatego, że trzeba o wiele więcej planować pamiętając o najdrobniejszych szczegółach. Dobrą praktyką jest tutaj zaczynanie od projektowania wersji mobilnej i dostosowywania tego projektu do kolejnych punktów zmiany (Breakpoint – punkt na granicy przedziałów rozdzielczości w którym następuje zmiana w układzie strony). Takich punktów zmiany przy jednym projekcie powinno być minimum 2, 3. Co oznacza przygotowanie projektu każdej z podstron w trzech lub czterech formatach. Optymalnie jest stosować następujące “brejkpointy” :-)

• mobile < 768px
• Ipad portrait 768px
• Ipad landscape/notebook 1024px
• monitor 3/4 1280px
• monitory szerokokątne 1440px w zwyż

Jak się łatwo domyślić projektowanie responsywne jest więc praco- i czasochłonne, chyba że… pozbędziemy się grafiki, wtedy powinno pójść całkiem sprawnie, brzmi znajomo? :-)

Tak jak celebryci masowo oddają się pod nóż chirurgów plastycznych (odsysają nadmiar z zadków tylko po to by uzupełnić niedomiar w innych rejonach), tak strony internetowe masowo poszły pod nóż designerów. I zaczęło się odcinanie. Na pierwszy ogień poszły graficzne przyciski, zaraz potem ornamenty, tekstury i w końcu gradienty. Te ostatnie radośnie przygarnął Johny Ive przy projektowaniu nowego iOS7.

Różnica pomiędzy celebrytami a stronami jest taka, że po tych zabiegach, strony w odróżnieniu od celebrytów w ogromnej większości wyglądają znacznie lepiej.

Myślę, że popularność stylu metro i płaskiego designu zwłaszcza przy stronach w responsive wynika z tego że tak jest po prostu łatwiej. Łatwiej jest zapanować nad tłem które ma jednolity kolor, bo w takim wypadku kiedy zmieni się rozmiar okna nie ma większej różnicy. Śmiem twierdzić, że to co teraz jest sprzedawane jako modny minimalizmy jest zwyczajnie najbardziej praktycznym i najmniej czasochłonnym podejściem składania stron i systemów responsywnych. To i oczywiście przesyt jaki pozostał po wodotryskach z okresu panowania flasha:-) Ale nic straconego, fortuna kołem się toczy, wodotryski w wersji płaskiej dopiero przed nami. Zapytajcie Johnego:-) Albo poguglajcie “long shadow” którego zgrabny generator tworzący długie cienie w aż 8 kierunkach można kupić już za 4$

Ale o czym ja to… aha!

Strony po obozie odchudzającym pozbyły się ciężkich grafik i pogrubiających tekstur, zostały tylko czcionka, kolor, fotografia i … marginesy. Witamy w świecie flatsponsive. Gdzie wszystkie strony wyglądają jak jeden mąż bo przecież mając do dyspozycji tylko 4 składowe, ilość możliwych kombinacji jest mocno ograniczona. Czyż nie?

Nie, nie odpowiadajcie, sama sobie odpowiem: na ten moment na pewno tak.

Płaski design przy rwd jest popularny bo, oprócz tego że jest miłą odmianą od dotychczasowego graficznego bogactwa, to najprostsze i jednocześnie najbardziej logiczne z możliwych wyjść. Prostsze technologicznie bo projektowo nie do końca. Paradoksalnie im mniej narzędzi do dyspozycji tym trudniej zaprojektować coś co się naprawdę wyróżnia. Tutaj dopiero wychodzi kunszt i warsztat designera. Już nie można chować swoich braków i niedociągnięć za przemieloną przez Photoshopa teksturą. Wiem, sama mam parę takich projektów na sumieniu:-)

Design responsywny to również cała masa nowych wyborów dotyczących tego, co i w jakiej formie ma się pokazać na danym urządzeniu. Wyszliśmy ze sztywnych ram najmniejszej minimalnej rozdzielczości, i dostaliśmy wolnością w twarz. Bo tak jak kontrolować możemy treść, tak już na to jak się połamie tekst nie mamy najmniejszego wpływu. 

Po pierwsze użytkownik

Mogę się tak rozpisywać bez końca, wytykać wady i opiewać zalety, wskazywać różnice, liczyć plusy i minusy. To wszystko jednak się chowa bo prawdziwym wygranym RWD jest użytkownik. Nareszcie! W końcu będzie można korzystać z sieci gdzie chcemy i jak chcemy, bo nie ma nic bardziej wkurzającego jak mordowanie się ze standardową stroną na telefonie komórkowym, kiedy pociąg nam właśnie odjeżdża a numer telefonu na informację podany jest we flashu.

Reasumując

Bez względu na to jaka moda dopadnie nas w danym sezonie, czy będzie to płaski design, pierwiastek z minimalizmu, czy też grafika bogata niczym wnętrze przemytnika biżuterii, nie sądzę abyśmy kiedykolwiek jeszcze powrócili do wytartego już zwrotu jakim jest: najmniejsza popularna rozdzielczość. Nie przy ilości urządzeń które już w tej chwili mają stały dostęp do internetu, a następne są już w drodze. Ani się obejrzymy jak RWD z innowacji przejdzie w standard.

Kto robi w rwd?

Odpowiedź z pewnością jest bardziej skomplikowana ale to mój blog i pora na trochę autopromocji.
W eRWuDe robię ja, robi też Eliza, która jest moją wspólniczką. Możesz nas zaczepić o wycenę na AIO collective jeśli marzy Ci się w pełni responsywna strona oparta na WordPressie.