RWD (responsive web design) – co to jest i dlaczego jest takie ważne?

Co to jest RWD

Responsywne projektowanie stron internetowych (ang. responsive web design, RWD). Jest to technika budowania strony www tak, aby jej układ automatycznie dostosowywał się do okna przeglądarki. Dzięki czemu użytkownicy telefonów, tabletów, laptopów i desktopów będą mogli wygodnie przeglądać Twoją stronę internetową.

Zasady RWD:

Fluid Grid Systems

Płynna sitka strony www. Podczas tworzenia strony ustala się domyślną szerokość sitaki (np. 1200px). Siatka jest podzielona na określoną liczbę kolumn, aby układ był czysty i łatwy w obsłudze. Następnie projektujemy każdy element z proporcjonalnymi szerokościami i wysokościami zamiast wymiarów opartych na pikselach.

Tak więc jeżeli zmieni się rozmiar przeglądarki elementy na stronie dopasują się proporcjonalnie do swojego kontenera nadrzędnego.

Do tworzenia płynnej siatki i nie tylko można skorzystać z Bootstrap 5. Dzięki temu framework’owi można szybko na stronie zaimplementować Fluid Grid System. W kodzie prezentuje się to następująco:

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

W tym przypadku nasz nadrzędny element o klasie container zostanie podzielony na 3 równe kolumny. Taką siatkę można dużo bardziej rozbudować. Powyższy przykład to najprostsza metoda, która ma na celu przedstawienie jak to działa od strony kodu.

Fluid Image

Jest to dostosowanie elementów graficznych (zdjęć, grafik) do konkretnej wielkości.

Ustawienie konkretnej szerokości w CSS daje przeglądarce informację w jaki sposób grafika ma być skalowana. Dzięki temu automatycznie dopasuje się do szerokości okna.

Poniżej przedstawiam przykład bardzo podstawowego zastosowania tej metody w pliku .html

<img scr="/logo.png" style="max-width: 500px; width: 50%;" />

Media Queries / Breakpoints

Media Queries pozwala określić w jaki sposób dany element ma wyświetlać się na danym urządzeniu. Daje to bardzo dużo możliwości podczas tworzenia responsywnej strony www. Poniżej znajduje się prosty przykład pokazujący jak można wykorzystać media queries we własnym projekcie.

<div class="square"></div>

.square {
   width: 200px;
   height: 100px;
   background-color: red;
   transition: 180ms ease-in-out;
}

@media screen and (max-width: 768px) {
   .square {
      background-color: green;
      width: 100px;
   }
} 

Frameworks

To szkielet do budowy aplikacji, który dostarcza gotowe komponenty i biblioteki. Dzięki takiemu rozwiązaniu można przyśpieszyć proces tworzenia strony lub aplikacji. Pozwala on na pracowanie ze wszystkimi zasadami Media Queries w projekcie.

Przykładowy projekt strony www zbudowany z pomocą Framework’a Bootstrap: https://bocahome.pl/
Koniecznie sprawdź jak strona zachowuje się na innych urządzeniach oraz podczas zmiany rozmiaru okna przeglądarki.

Dlaczego RWD jest takie ważne?

Jak przeczytałeś wyżej RWD jest potrzebne do dostosowania strony pod różne urządzenia. Dzięki temu Twoi potencjalni klienci mogą przeglądać Twoją stronę na różnych urządzeniach w wygodny sposób. Wyobraź sobie, że Twój klient jest w drodze i potrzebuję szybko znaleźć informacje o Twojej firmie na stronie www. Jeżeli zobaczy ładną i intuicyjną stronę dopasowaną do urządzenia, z którego korzysta masz większa szanse, że skontaktuje się z Tobą lub wykona określoną czynność na stronie (zostawi maila, wypełni formularz, zadzwoni…). Jeżeli jednak klient trafi na Twoją stronę, która nie jest przystosowana do jego urządzenia… No właśnie co wtedy? Prawdopodobnie natychmiast wyjdzie z Twojej strony. Dlatego tak ważne jest, aby posiadać responsywną stronę internetową. Warto pamiętać, że RWD to jeden z wielu czynników, który znacząco wpływa na poziom konwersji na Twojej stronie www.

Jak sprawdzić, czy strona jest responsywna?

To proste. Wystarczy wejść na stronę z telefonu lub po prostu zmniejszyć okno przeglądarki na laptopie, lub desktopie. Jeżeli układ strony się zmienia i cały czas strona jest czytelna to oznacza, że jest ona responsywna. Poniżesz video pokazuje jak wygląda responsywna strona.

Jak wdrożyć responsywność na stronie www?

W wielu przypadkach wdrożenie responsywności na stronie wiąże się ze stworzeniem nowej strony. RWD jest umieszczone w szkielecie strony – dlatego przebudowa aktualnej strony może być nieopłacalna. Aktualnie RWD jest standardem, który powinien być obecny na każdej stronie www.

Ile kosztuje responsywna strona www?

Kosz każdej strony internetowej jest ustalany indywidualny. W uproszczeniu można przyjąć, że zbudowanie prostej strony wizytówki to koszt rzędu 1000zł netto.

RWD a wizerunek firmy

To bardzo ważne, aby Twoje logo kojarzyło się z dobrze zbudowaną stroną www. Należy unikać sytuacji, w której klient może zobaczyć Twoje logo i rozjechaną stronę www. Wtedy źle zapamięta Twoją firmę, a pierwsze wrażenie robi się tylko raz! Badania bezpośrednio wskazują, że użytkownik w kilka sekund ocenia stronę www, którą odwiedza. Jeżeli nie spełni jego oczekiwań i wyda mu się niewłaściwa (np. przez brak responsywności) natychmiast z niej wyjdzie. Warto rozważyć nową stronę www, jeżeli chcesz utrzymać lub zbudować dobry wizerunek swojej firmy.

Podsumowanie

RWD jest techniką projektowania stron internetowych. Jest to jeden z kilku kluczowych czynników, które bezpośrednio przekładają się na poziom konwersji. Aktualnie wszystkie tworzone strony www powinny być responsywne.

Sprawdź jak Twoja strona zachowuje się na telefonie oraz podczas zmniejszania okna przeglądarki. Dodatkowo skorzystałbym z Google Analytics, aby sprawdzić ile użytkowników trafia na moją stronę z danej grupy urządzeń.