Blog

Responsive design

14 września 2012

Coraz więcej naszych projektów serwisów internetowych jest wdrażanych w technologii responsive design. Strony responsywne wciąż jednak są dużą nowością na rynku. Dlatego postanowiliśmy odpowiedzieć na najczęściej zadawane pytania klientów i wyjaśnić, czym w zasadzie jest ten responsive design.
Jakie zasady przyświecają budowaniu stron internetowych według responsive web design?
Naczelną zasadą responsive web design (RWD) jest czytelność strony w każdej rozdzielczości ekranu. Serwis ma być równie przejrzysty na ekranie 20' jak i na smartfonie. Aby to osiągnąć, nie wystarczy już samo manipulowanie szerokością kolumn tekstu. W zależności od rozmiaru okna, poszczególne elementy strony (obrazki, reklamy, formularze) zmieniają swoje położenie i formę, a czasem zupełnie znikają. Wszystko to ma przede wszystkim zapewnić czytelność na małych ekranach, często dotykowych (a więc i bez precyzyjnego kursora). Z tego względu projekt responsywnej strony, warto zacząć „od końca” - najpierw tworząc wersję mobilną. Bo dużo łatwiej najpierw wybrać treści najważniejsze, niż po zbudowaniu wersji pełnoekranowej, usuwać zbędne.
Czy każdy layout da się zaprojektować w taki sposób?
Pełne wykorzystanie możliwości jakie daje RWD, zależy tak naprawdę od umiejętności grafika oraz projektanta strony. Jako, że jej tworzenie warto prowadzić zgodnie z regułą „mobile first”, można się równie dobrzy spytać: czy strona mobilna może mieć każdy layout? Najważniejsze przecież, by był on dostosowany do małych ekranów. Zbyt skomplikowane układy są więc z założenia bezużyteczne. Jednak wraz ze zwiększaniem rozmiarów okna przeglądarki, można do widoku strony dodawać kolejne elementy. Efekt końcowy może więc znacznie się różnić od wersji minimalistycznej. Nie twierdzę, że responsive web design nie ma wad i wszystko da się w nim zrobić, jednak nie stwarza przeszkód nie do przejścia i przy odpowiednim nakładzie pracy można stworzyć naprawdę rewelacyjne strony! Co więcej, jest to w miarę nowy trend, więc z czasem będzie się pojawiało coraz więcej stworzonych przez społeczności developerów opracowań czy pomocy. Wszelkie dzisiejsze problemy z RWD, już za tydzień mogą mieć dziesiątki rozwiązań.
Jakie są korzyści z takiego modelu budowania stron, a co może być wadą? Czy tworzenie stron wedle idei responsive web design jest droższe od tradycyjnego projektowania?
Nie ma co ukrywać, że największą wadą jest pracochłonność tworzenia strony responsywnej. Jej zaprojektowanie zajmuje znacznie więcej czasu niż w przypadku tradycyjnego serwisu. Pociąga to niestety za sobą koszty. Jednak jeśli porównamy to z czasem pracy nad stroną tradycyjną plus wersją mobilną plus na tablety... wypada zdecydowanie lepiej. Wtedy zamiast wdrażać kilka stron, zajmujemy się jedną – jest ona za to doskonale dopracowana i dogłębnie przemyślana. To właśnie jej planowanie, ustalanie hierarchii elementów oraz ich zmian, jest głównym powodem różnicy w kosztach stworzenia serwisu. I faktycznie, dla firmy, której nie zależy na klientach korzystających z ich strony z urządzeń innych niż komputery, może to być zbędny wydatek. Jednak są to przypadki pojedyncze. Jeśli natomiast firma troszczy się o mobilnych użytkowników swojej witryny, zdecydowanie bardziej będzie jej się opłacało stworzenie jednej wersji, za to wykorzystującej responsive design. Zalety możemy dostrzec także już po wdrożeniu. Do 'utrzymania' jest tylko jeden kod, a zmiany wystarczy wprowadzić jednorazowo. Wszystkim użytkownikom możemy podawać ten sam adres, nieważne z jakiego urządzenia będą korzystać. Jeszcze w fazie projektu, problemem może być nowość tego modelu. W związku z czym trudniej znaleźć pomoc czy gotowe rozwiązania. Tak więc należy się liczyć z tym, że początki pracy z RWD będą przebiegały metodą prób i błędów. Jest to jednak całkowicie naturalne i te mankamenty szybko znikną. Największa natomiast zaleta stron responsywnych, widoczna jest ze strony użytkownika. W końcu nie będziemy zmuszeni przewijać „w bok” w mniejszym oknie, a na telefonie nie będziemy mieli problemu z kliknięciem w to, w co chcemy (bo link jest za mały). Strona będzie wyglądać dobrze i naturalnie – jakby pod nasze właśnie urządzenie została stworzona. Nie zostaniemy też zasypani mniej istotnymi treściami, gdy nie będzie na nie miejsca. Będzie po prostu i w końcu: wygodnie oraz czytelnie.