Page tree
Skip to end of metadata
Go to start of metadata

Responsywność (od ang. response – odpowiedź) to określenie opisujące osobę albo rzecz dostosowującą się do stanu sytuacji, odpowiadającą na bieżący tok wydarzeń, osobę lub rzecz wrażliwą wobec zmian. W informatyce w kontekście stron www słowo to oznacza cechę przypisywaną witrynom, których wygląd (układ graficzny) dostosowywany jest do rozdzielczości ekranu, w której strona jest wyświetlana. Strona responsywna to taka, która wyświetla się w sposób czytelny i bez konieczności przewijania na boki na każdym rodzaju urządzenia wyposażonego w ekran: na komputerze stacjonarnym, na laptopie, tablecie, smartfonie czy też na telewizorze.


Responsywność stron internetowych

Technika projektowania stron internetowych prowadząca do uzyskania przez nie cechy responsywności przyjęła nazwę Responsive Web Design (RWD).

W celu zapewnienia czytelności witryn responsywnych na mniejszych ekranach urządzeń mobilnych, niektóre elementy graficzne widoczne na ekranach większych, mogą być w tej sytuacji nie wyświetlane lub mogą zmienić swoje położenie po to, aby ułatwić użytkownikowi nawigację za pomocą dotyku.

Strona responsywna powinna być:

  • czytelna (niezależnie od rozmiarów ekranu, na którym jest wyświetlana),
  • wyświetlana bez zbędnych szczegółów (zwłaszcza na niewielkich ekranach urządzeń mobilnych),
  • przewijalna tylko w pionie,
  • dostosowana do obsługi na ekranach dotykowych.

Ilość użytkowanych przez ludzi urządzeń mobilnych (tabletów, smartfonów) z roku na rok wciąż wzrasta. Responsywność jest więc jednym ze sposobów dostosowania się do obecnych wymagań użytkowników. Zgodnie z tą potrzebą w październiku 2015 w systemie eKontakt wprowadzono szatę graficzną zgodną z RWD. Poniżej prezentujemy ilustrację z poglądowym wyglądem witryn w systemie eKontakt na różnych rozmiarach ekranów.

Idea tworzenia RWD z wykorzystaniem zasady „Mobile first”

Zasada „Mobile first” przy tworzeniu stron RWD wprowadza zasadę projektowania „od końca” – począwszy od wersji dla urządzeń mobilnych (o małych rozdzielczościach), których używa się odmiennie niż standardowe komputery PC.

Poleca się w pierwszej kolejności przeprowadzenie weryfikacji wyświetlania zawartości strony www na urządzeniu mobilnym. W razie problemów treść należy odpowiednio poprawić tak, aby prezentowała się poprawnie. Dzięki takiemu podejściu, w większości przypadków ta sama treść będzie dobrze wyświetlana na „zwykłym” monitorze w dużej rozdzielczości.

Odwrócenie tej kolejności polegające na szczegółowym dopracowaniu wyglądu strony najpierw w dużych rozdzielczościach może skutkować uzyskaniem materiału, który będzie prezentowany niewłaściwie na niewielkich ekranach urządzeń mobilnych.

Praktyczne zasady tworzenia witryn responsywnych

System eKontakt dysponuje wprawdzie elastyczną (responsywną) szatą graficzną, która będzie się „starać” o poprawny wygląd stron zarówno na ekranach urządzeń desktopowych (komputery PC) jak i na ekranach urządzeń mobilnych, nie zwalnia to jednak administratorów i redaktorów od zachowywania podstawowych zasad tworzenia treści, które będą w pełni współdziałały z elastycznością szaty graficznej. 

Nie ma więc miejsca sytuacja, w której każdy element uzyska lub odziedziczy automatycznie cechę responsywności. Niekiedy może to wymagać pewnego wysiłku ze strony osób tworzących zawartość witryny internetowej.

Obrazki (fotografie, rysunki, ilustracje)

Obrazki są elementami, które najczęściej powodują problemy z poprawnym wyświetlaniem strony na urządzeniach mobilnych. Podczas przygotowywania responsywnej szaty graficznej eKontakt zadbaliśmy o to, aby obrazki automatycznie zmieniały swoją wielkość oraz dostosowywały się do rozdzielczości urządzeń mobilnych. Aby mechanizm ten działał poprawnie, pamiętaj o:

  • przygotowaniu zasobu graficznego przed wyświetlaniem go na stronie: wykonaj kadrowanie (jeśli jest konieczne) i zeskaluj go – szerokość obrazka nie powinna przekraczać 1166 pikseli; więcej o tym temacie zawarto w sekcji Praca z zawartością tekstową oraz z grafiką,
  • nie definiuj szerokości ani wysokości obrazków (zwłaszcza za pomocą wielkości wyraż
  • onych w pikselach),
  • jeśli nie jest to konieczne – nie ustawiaj opływania tekstu względem obrazków

Powiązane artykuły