Responsive web design

Z Wikipedii, wolnej encyklopedii
Rozpoznanie i dostosowanie do wielkości urządzenia – responsive web design (RWD).

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.

Wdrażanie Responsive Web Design[edytuj | edytuj kod]

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 | edytuj kod]

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 | edytuj kod]

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 | edytuj kod]

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 | edytuj kod]

Fluid Grid Systems[edytuj | edytuj kod]

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

Fluid Image[edytuj | edytuj kod]

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 | edytuj kod]

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 | edytuj kod]

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 | edytuj kod]

  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], www.oberlo.com, 22 kwietnia 2020 [dostęp 2021-02-22] (ang.).
  3. The Story, Kluczowe zasady RWD - Responsive Web Design, thestory.is [dostęp 2021-02-22] (pol.).