Responsive web design

(Przekierowano z Responsive Web Design)

Responsywne projektowanie stron internetowych (ang. responsive web design, RWD) – technika projektowania strony WWW, aby jej układ dostosowywał się samoczynnie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona utworzona tą techniką jest uniwersalna: wyświetla się dobrze na dużych ekranach oraz na smartfonach i tabletach: zmienia swój rozmiar oraz układ, obsługuje różne rozdzielczości w zależności od przekątnej ekranu, na jakim aplikacja webowa, czy strona internetowa ma być wyświetlona.

Rozpoznanie i dostosowanie do wielkości urządzenia – responsive web design (RWD).

Wdrażanie Responsive Web Design edytuj

Obsługa tej techniki odbywa się za pomocą tzw. media queries, które pozwalają rozpoznać rozdzielczość okna przeglądarki i zastosować odpowiedni arkusz stylu, lub jego fragment. Do działania możemy również użyć różnych skryptów JavaScript.

Tag HTML edytuj

Poniższy kod zmienia domyślne ustawienia skalowania zawartości przez urządzenie mobilne, co pozwala na tworzenie stron niewymagających ciągłego powiększania i pomniejszanie przez użytkownika. Określa on również domyślną szerokość dokumentu na 100% szerokości wyświetlacza. Błędne określenie szerokości lub położenia elementów za pośrednictwem arkuszy stylów nadal powoduje konieczność przewijania strony w lewo bądź prawo.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Można również wstawić cały arkusz stylu, używając media queries.

    <link rel="stylesheet"
    media="screen and (max-width: 600px)"
    href="arkusz600.css">

Powyższy fragment mówi o tym, że arkusz stylu o nazwie arkusz600.css będzie działał tylko wtedy, kiedy szerokość przeglądarki będzie mniejsza lub równa 600 pikseli. Można również użyć np. min-width, max-height, min-height.

Media Queries w CSS edytuj

Jeśli nie potrzeba dzielić stylów na różne arkusze, można zrobić to wszystko w jednym pliku, używając media queries.

    @media screen and (min-width: 480px) {
      a {
        color: red;
      }
    }

Powyższy fragment CSS powoduje pokolorowanie wszystkich odnośników, jeśli tylko szerokość przeglądarki będzie wynosić minimum 480 pikseli.

Popularność Responsive Web Design edytuj

Popularność RWD wynika z proporcji udziału urządzeń mobilnych, które z roku na rok zdobywają coraz większą część rynku.

Tę zmianę w znacznym stopniu przyspieszył Google, który lepiej ocenia strony internetowe w wynikach wyszukiwania, które poprawnie wyświetlają się na urządzeniach mobilnych.

Zmiana była na tyle rewolucyjna, że doczekała się własnej nazwy - Mobilegeddon(inne języki).

W końcówce 2020 roku ponad 3,5 miliarda osób używa smartfonów. Na korzystaniu ze smartfonów spędzamy średnio prawie 3 godziny[2].

Zasady Responsive Web Design[3] edytuj

Fluid Grid Systems edytuj

Wyrażanie wymiarów strony internetowej w sposób względny - docelowego rozmiaru oraz kontekstu wyświetlania.

Fluid Image edytuj

Dostosowywania elementów graficznych do danej wielkości - na przykład zdjęć, czy grafik.

Dla przeglądarki internetowej stanowi to informację, w jaki sposób obraz ma być skalowany, aby dostosować je do poszczególnych urządzeń. Dzięki temu rozwiązaniu, chronimy obrazy przed nadmiernym rozciągnięciem.

Media Queries / Breakpoints edytuj

Pozwalają na określenie, w jaki sposób wyświetlać stronę internetową na danym urządzeniu. Pomagają określić, po spełnieniu jakich warunków układ witryny może być zmieniony i w jaki sposób.

Frameworks edytuj

Rozwój podejścia mobile first zaowocował powstaniem ogólnodostępnych frameworków. Dobrą praktyką jest korzystanie z nich. Samodzielne poszukiwanie rozwiązań zazwyczaj oznacza niepotrzebną stratę czasu dla projektanta danej strony internetowej.

Przypisy edytuj

  1. Przyszłość bankowości mobilnej to serwisy lite – PRNews.pl (Dostęp: 2014-03-04).
  2. 10 Mobile Usage Statistics You Should Know in 2021 [Infographic] [online], www.oberlo.com, 22 kwietnia 2020 [dostęp 2021-02-22] (ang.).
  3. The Story, Kluczowe zasady RWD - Responsive Web Design [online], thestory.is [dostęp 2021-02-22] (pol.).