Responsive Web Design w projektowaniu stron internetowych

Responsive Web Design (RWD) to termin, o którym prawdopodobnie słyszał każdy.  Krótko mówiąc jest to sposób projektowania stron internetowych, który pozwala dostosować szablon do każdej rozdzielczości kładąc główny nacisk na urządzenia mobilne. Strona taka z założenia ma być czytelna, wygodna w korzystaniu i w pełni funkcjonalna na wszystkich urządzeniach mobilnych i stacjonarnych dostępnych na rynku.

Dlaczego RWD jest taki niezwykły i czy warto sobie nim zaprzątać głowę?

Jeszcze do niedawna strony internetowe projektowało się o stałej szerokości, tak aby wyświetlały się one poprawnie na urządzeniach stacjonarnych i laptopach. W niewielu przypadkach strona posiadała również wersję mobilną, przeznaczoną na telefony komórkowe. Taka strona charakteryzowała się brakiem zaawansowanej grafiki i ograniczoną ilością tekstu. Wersje mobilne oferowały funkcjonalnie znacznie mniej od desktopowych dlatego były mało praktyczne i niewielu klientów decydowało się na ich wdrożenie.

Żyjemy jednak w czasach, w których zwykły telefon komórkowy zamieniliśmy na smartphone’a, a oprócz komputera stacjonarnego posiadamy także tablet oraz szereg innych urządzeń pozwalających wyświetlać strony internetowe. Zróżnicowanie rozdzielczości, z jakimi mamy do czynienia na rynku sprzętów multimedialnych sprawia, że tworzenie stron o stałej rozdzielczości to zdecydowanie za mało.

Zaistniała sytuacja zmusiła web-developerów do zmiany sposobu myślenia o tworzeniu strony  WWW. Zaczęli oni projektować strony, które płynnie dostosowują swoje wymiary do rozdzielczości ekranu, na którym są wyświetlane, świetnie wyglądają i działają na każdej platformie sprzętowej.

Zasady projektowania stron Responsywnych

1. Dostosowanie do ekranów dotykowych

   Projektując szablon responsywny nadal robi się to z nastawieniem na  obsługę za pomocą myszki, jednak należy również pamiętać o aspektach związanych z jej użytkowaniem na ekranach dotykowych.   Mówiąc ściślej, należy przeskalować wielkość przycisków i linków na stronie tak, aby były łatwe do kliknięcia palcem, a obrazy oraz czcionki dostosować do szerokości ekranu.  Bardzo ważne jest również dostosowanie głównej nawigacji na najniższych rozdzielczościach, co najprościej można uzyskać poprzez zaimplementowanie menu mobilnego, które będzie się wysuwało po kliknięciu w tzw. ikonę „hamburger menu”.

2. Hierarchizacja danych

   Na rozdzielczościach smartphone’ów oraz niektórych mniejszych tabletów nie możemy wyświetlić wszystkich informacji. Dane muszą być odpowiednio hierarchizowane, aby na urządzeniach mobilnych wyświetlały się tylko niezbędne, nierozpraszające elementy. Mają one w prosty sposób umożliwiać wykonanie czynności lub pomóc dotrzeć do potrzebnych informacji. Przykładem hierarchizacji danych na stronie RWD mogą być dane kontaktowe i formularz umieszczony w stopce. Na rozdzielczościach desktopowych będą prezentowane wszystkie informacje. Na tabletach- same dane kontaktowe, a formularz po rozwinięciu zakładki. Na smartphone’ach, które z założenia służą do komunikacji telefonicznej, wyświetlany może być sam numer telefonu.

3. Ustalenie poprawnych punktów progowych (break points)

   Punkty progowe to zakresy rozdzielczości, przy jakich następuje zmiana w layoucie strony. Ich poprawne ustalenie jest bardzo ważne dla strony responsywnej, ponieważ to od nich zależy elastyczność strony i to jak będzie się ona dostosowywała do danej rozdzielczości. Pomiędzy punktami breakpoints zmieniać się może układ elementów, ich wymiary, rodzaj nawigacji, a nawet treści.

Zalety strony responsywnej

1. RWD odpowiada na zjawisko wzrostu ilości urządzeń mobilnych

   Ilość urządzeń mobilnych z roku na rok rośnie. Oznacza to, że witryny oparte o technikę Responsive Web Design będą wspierane przez sprzęty, które dopiero pojawią się w przyszłości, dlatego witryna w RWD nie zestarzeje się tak szybko jak strona napisana głównie pod komputery stacjonarne i laptopy.

2. Koszt strony responsywnej jest zazwyczaj niższy niż wersji stacjonarnej i mobilnej

   Wdrożenie strony responsywnej może się okazać na dłuższą metę o wiele tańsze od przygotowania kilku wersji dla poszczególnych urządzeń. Wynika to z tego, że każdy layout należy „pociąć” osobno, a w przypadku strony responsywnej wiele elementów będzie jedynie zmieniać swoje położenie.

3. RWD wpływa na poprawę pozycjonowania strony w Google

   Wyszukiwarka Google winduje pozycję stron poprawnie wyświetlających się na urządzeniach mobilnych. Jest to szczególny powód, aby zmienić swoją stronę na responsywną!

Podsumowanie

Responsive Web Design jest techniką, która zdecydowanie jest przyszłością. Ignorowanie jej potencjału nie może wyjść na dobre żadnej stronie internetowej. Pomimo tego, że koszty budowy serwisu w RWD są wyższe niż w przypadku zwykłej strony to jej eksploatacja w dłuższej perspektywie niesie za sobą znacznie większe korzyści. Jako agencja reklamowa rekomendujemy strony responsywne nie ze względu na trend ale dlatego, że uznajemy je za przyszłość, bez której strony WWW nie będą mogły istnieć.