Responsive Web Design

Responsive Web Design
(foto: http://www.downgraf.com/all-articles/what-makes-a-website-design-more-responsive/)

W ostatnim czasie mogliśmy zaobserwować duży wzrost różnych rodzajów urządzeń, dzięki którym korzystamy z internetu. Problemem dla twórców stron www zaczęło być to, co zrobić, aby użytkownicy różnych urządzeń widzieli tę samą treść na stronie. W grę wchodziły najróżniejsze rozdzielczości oraz wielkości ekranów zaczynając od małych ekranów smartfonów, kończąc na 40-calowych wielkich monitorach.

Kolejnym problemem, z którym spotykali się twórcy stron internetowych, stało się to, że na różnych urządzeniach używamy różnych sposobów nawigacji. Na monitorze komputera możemy używać tradycyjnego oraz dokładnego urządzenia jakim jest myszka, a na małych telefonach jesteśmy skazani na grube palce. Takie zróżnicowanie wymaga od nas zastosowania innych interfejsów oraz sposobów nawigacji.

Projektowanie strony w kilkunastu/kilkudziesięciu różnych wersjach byłoby co najmniej ekonomicznie nieuzasadnione, szczególnie, że nie jesteśmy w stanie przewidzieć czy za cztery miesiące nie pojawi się jakieś nowe urządzenie, na którym nasza kosztowna strona www będzie praktycznie nieużyteczna.

Jako odpowiedź na ten problem przychodzi nam Responsive Web Design.

Dzięki Media Queries w CSS3 mamy możliwość użycia tego samego kodu HTML, który będzie ukazywał nam stronę internetową zależnie od położenia oraz rozdzielczości ekranu. Mówimy tutaj o znacznie większych możliwościach, niż tylko zmiana szerokości strony internetowej. Możemy zmieniać sposób działania nawigacji, układ oraz wygląd elementów na stronie www, czyli praktycznie wszystko co nam potrzebne do pełnej optymalizacji strony pod danym urządzeniem.

W jaki sposób to działa?

Zgodnie z wymaganiami wyznaczamy punkty, przy których strona www powinna zmienić swój wygląd, układ, sposób nawigacji i ilość wyświetlanych elementów. Punkty takie powinno się ustalać tak, by odnosiły się do wybranych klas urządzeń typu komputer, tablet czy smartfon, dodając do tego dodatkowo to, czy urządzenie jest położone pionowo czy poziomo. Oczywiście oprócz tego możemy zrobić znacznie więcej, biorąc pod uwagę szerokość monitora od szerokości 1024p, 1600p itp. Można by tak było w nieskończoność, jednak ważne jest to aby znaleźć złoty środek, w końcu chcemy uniknąć nadmiernego projektowania.

Projektowanie oraz tworzenie stron internetowych w idei RWD narzuca od wszystkich członków zespołu na każdym etapie pracy więcej poświęcenia niż tworzenie standardowej sztywnej strony, ale dzięki temu raz podjętemu wysiłkowi zyskujemy pewność, że nasza strona www będzie na takim samym poziomi użyteczna na wszystkich urządzeniach obecnie istniejących na rynku, jak i tymi pojawiającym się w przyszłości.

< powrót