Czym jest responsywność

Responsywne strony internetowe swoją nazwę wzięły od angielskiego słowa "response" oznaczającego "odpowiedź".
W skrócie chodzi o to, aby wygląd strony "odpowiadał" na istniejące warunki/możliwości urządzenia użytkownika, który tą stronę ogląda.
Temat ten jest młody, bo dyskusje na ten temat rozpoczęły się w połowie 2010r., jednak z punktu widzenia internetu nie jest to już taki krótki okres.

Bardzo prostym (ale w zasadzie najważniejszym) przykładem tego jest po prostu dostosowanie szerokości strony do wymiarów ekranu użytkownika. Czytając ten tekst na swoim komputerze pewnie nie masz problemu z widocznością tekstu, przewijaniem, czy klikaniem w przyciski. Niestety na urządzeniu, które musi mieścić się w dłoni czytanie tekstu czy nawigowanie po stronie (która nie jest responsywna) przestaje być takie wygodne.

Co się dzieje jeśli strona nie jest responsywna? Z reguły jest ona zmniejszana tak, aby dopasować się do rozmiarów ekranu urządzenia. Skutkuje to brakiem czytelności tekstu i niemożliwością kliknięcia w jakikolwiek link, ponieważ wszystko staje się zbyt małe. Oczywiście strony takie nie są w pełni bezużyteczne, ponieważ można je powiększać i pomniejszać. Jednak może to przypominać czytanie książki w pokoju obok przez dziurkę od klucza przy użyciu lornetki. Jakkolwiek karkołomnie to brzmi nie jest z reguły przesadą.
Wyświetlenie czytelnej strony na różnych wielkościach ekranów jest możliwe właśnie dzieki responsywności.

Jak to wygląda w praktyce

Zasadę działania responsywnej strony internetowej przedstawię w najprostszej jej formie, czyli dostosowania wyglądu strony do rozmiarów ekranu.
Poniższe zrzuty ekranu przestawiają tą samą stronę widzianą przez użytkowników 3 różnych urządzeń: komputera, tabletu i telefonu komórkowego. Widać na nich zmianę sposobu prezentacji poszczególnych elementów strony, w zależności od dostępnej szerokości ekranu.

Korzyści z posiadania responsywnej strony

Zwiększa się ilość różnorodnych urządzeń z dostępem do internetu, przez co zwiększa się zapotrzebowanie na tworzenie responsywnych stron. Dąży się do tego, aby osoba korzystająca z telefonu komórkowego czy tabletu mogła przeglądać strony z porównywalną przyjemnością, co osoba siedząca za dużym monitorem komputerowym.

Jest to jedna z głównych korzyści przygotowania responsywnej strony. Nie chodzi jednak tylko o to, aby były dostosowane wymiary samej strony. Należy także zwrócić uwagę na takie elementy jak: menu czy przyciski. Korzystając z myszki komputerowej mamy możliwość bardzo dokładnego "klikania" w linki na stronie, nawet te bardzo małe. Użytkownik, np. tabletu, który do "klikania" używa palca (jako urządzenia) , nie jest często w stanie precyzyjnie nacisnąć w odpowiedną ikonę. Dlatego przyciski te w takiej sytuacji muszą być większe, aby zminimalizować ryzyko pomyłkowego wybrania, np. złej pozycji w menu.
W przypadku bardzo małych ekranów (w telefonach komórkowych) dobrą praktyką jest też ograniczenie zbędnych elementów na stronie. Decydujemy się więc na wyświetlanie tylko niezbędnych treści, aby internauta nie musiał w nieskończoność "przewijać" naszej strony w poszukiwaniu potrzebnej informacji. W takim przypadku znaczenie ma kolejność wyświetlania treści. Najważniejsze elementy muszą być wyświetlone na początku.

Z uwagi na to, że coraz więcej osób korzysta z internetu za pomocą mobilnych urządzeń, opisane wyżej ułatwienia mogą być dla nich bardzo istotne. Brak owych ułatwień może spowodować, że potencjalny klient nie będzie zainteresowany Twoją ofertą. W praktyce może oznaczać to, że Twoja restauracja straci klienta, tylko dlatego, że osoba korzystająca z telefonu nie będzie mogła dostatecznie szybko odnaleźć menu lub kontaktu na stronie.

Jak przygotować stronę, aby była responsywna

Wbrew pozorom przygotowanie responsywnej strony (lub dostosowanie istniejącej) nie jest trudne ani kosztowne.

1. Jeśli korzystasz ze starszej wersji Quick.Cms lub Quick.Cart na pewno znajdziesz wśród naszych partnerów » kogoś, kto dostosuje Twoją (nawet dosyć starą) stronę tak aby była responsywna.
2. Jeśli posiadasz najnowszą wersję tych skryptów lub dopiero będziesz przygotowywał swoją stronę, możesz skorzystać z gotowych responsywnych skórek dla Quick.Cms.Ext » lub Quick.Cart.Ext », które przygotowaliśmy dla Ciebie. Dla wersji darmowej jest dostępna tylko skórka "Webmaster responsive" opisana w pkt. 4.
3. Jeśli Twoja strona będzie posiadała indywidualną grafikę, warto abyś zapytał wykonawcę czy będzie ona responsywna.
4. Natomiast jeśli sam przygotowujesz swoją stronę skorzystaj ze specjalnie przygotowanego "startera" do przygotowywania wyglądu strony - skórki o nazwie Webmaster responsive, która ułatwi Ci zadanie przez zdefiniowane już podstawowe zachowania, które wystarczy tylko dostosować.

Nie wiesz jak to zrobić? Zleć wykonanie responsywnej grafiki jednemu z naszych partnerów »

Podsumowanie

Responsywne projektowanie stron staje się coraz bardziej popularnym trendem. Zapewne w niedługiej przyszłości stanie się wręcz standardem. W związku z tym już teraz warto zainteresować się tym tematem, aby o ile to możliwe dostosować swoją aktualną stronę lub pamiętać o tym przygotowując jej kolejną wersję.

Autor: Zdzisław Zawada, OpenSolution