Responsive Web Design – czym jest i do czego służy?

| czas czytania: 5 min | Web Design
projektowanie stron responsywnych

RWD (responsive web design) to sposób projektowania uniwersalnych stron www, które prawidłowo będą dostosowywały się do wielkości okna przeglądarki wszystkich urządzeń, uwzględniając m.in. tablety, smartfony, telewizory i monitory o standardowych i wysokich rozdzielczościach.

Do niedawna jedynym wyznacznikiem projektowania stron www była standardowa rozdzielczość 1024px x 768px. Bezpieczna szerokość strony, tzw. wrappera, była definiowana na ok. 960-980px, uwzględniając boczny pasek przewijania przeglądarki. Dolny boczny scrollbar miał być niewidoczny.

Wraz z pojawieniem się smartfonów i tabletów powstało również pojęcie RWD, które można zdefiniować jako dopasowanie strony internetowej do wielkości określonego ekranu, zapewniając jednocześnie czytelność i wygodną nawigację po stronie oraz uwzględniając dotykową obsługę interfejsu. Trend ten wymusił zmianę podejścia do projektowanych stron www i stosowanie nowszych technologii.

RWD - urządzenia mobilne i stacjonarne

Za prawidłową obsługę RWD odpowiadają tzw. media queries implementowane w kodzie CSS, które pozwalają wydzielić osobny arkusz stylów pod określoną rozdzielczość, zakres rozdzielczości lub medium (różne rodzaje ekranów i urządzeń – tablety, drukarki, telewizory) oraz skryptów JS wspomagających dotykową nawigację po witrynie lub modyfikujące elementy DOM w kodzie HTML w zależności od potrzeb.

etap projektowy RWDProjektowanie responsywnej strony www musi być dokładnie przemyślane już na etapie przygotowania makiet, prototypów, grafiki, kodu HTML i CSS. Aby wspomóc ten proces, powszechne staje się korzystanie z rozszerzeń języka CSS (np. LESS, SASS), tzw. preprocesorów, zmieniających sposób pisania arkuszy stylów ze statycznego na programowy i ułatwiających implementację RWD. Bardzo pomocne są również w pełni konfigurowalne frameworki, wykorzystujące siatkę kolumnową (grid), np. Bootstrap, Foundation, Tweeter Bootstrap. Posiadają one już zdefiniowane, najczęściej wykorzystywane elementy stron www wraz z pełnym kompletem dodatkowych narzędzi niezbędnych do jej tworzenia i rozwijania.

Aby dotrzeć do największej liczby odbiorców, warto dostosować swoją stronę www do zmieniającej się rzeczywistości. Dzisiaj każdy ma dostęp do Internetu praktycznie wszędzie. Do przeglądania sieci coraz częściej wykorzystujemy urządzenia mobilne, ponieważ są wygodniejsze i mamy je zawsze pod ręką.

Prawidłowo zaprojektowana strona www ułatwi nawigację, zwiększy jej czytelność i dostępność również na urządzeniach, które pojawią się w przyszłości.

Dowiedz się więcej : Mobilna rewolucja stron internetowych

Ostatnie artykuły