Responsywne projektowanie stron internetowych

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. 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

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

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 pomniejszania 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

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

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.

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.

Zasady Responsive Web Design

Fluid Grid Systems

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

Fluid Image

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

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

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.