Response Web Design – RWD

W ostatnim czasie coraz modniejsze staje się projektowanie stron internetowych z wykorzystaniem techniki ang. RWD (Response Web Design). W tym artykule postaram się przedstawić podstawowe informacje na ten temat. Zanim jednak dokładnie opiszę na czym ta technika polega i z czym się wiąże odpowiedzmy sobie na pytanie: Co to takiego jest RWD?

Co to jest Response Web Design?

Response Web Design polega na takim zaprojektowaniu witryny internetowej/sklepu internetowego lub innej aplikacji WWW, aby jej wygląd dostosowywał się do urządzenia na jakim jest wyświetlana strona. Zazwyczaj sprowadza się to do przygotowania minimum trzech widoków strony: na komputer, tablet oraz smartfon. RWD pozwala nam na odpowiednie przygotowanie układu strony, jej nawigacji i wyglądu, tak aby maksymalnie wykorzystać możliwości wyświetlania (prezentacji) urządzenia na którym przeglądamy witrynę.

Przykładem strony w technice RWD jest strona onisoft.pl, która prezentuje się w odmienny sposób na poszczególnych urządzeniach. Możesz to sprawdzić zawężając okno przeglądarki internetowej.

Technologia

Projekty RWD wykorzystują możliwości dostarczone wraz z CSS3 tzw. CSS3 Media Queries. Polega to na tworzeniu alternatywnych styli CSS w zależności od rozdzielczości ekranu, na którym jest wyświetlana strona internetowa. Dzięki temu możliwa jest prezentacja tych samych treści w odmienny sposób. Możemy pewne elementy ukrywać lub pokazywać na poszczególnych urządzeniach, zmieniać wielkość, kolor, krój czcionek itp. Możliwych wariantów jest bardzo wiele i zależą one od konkretnego projektu strony.

Dzięki zastosowaniu techniki RWD nie musimy projektować mobilnej wersji serwisu internetowego, dostępnej pod innym adresem URL.

Wady i zalety

Oczywiście „Nie ma róży bez kolców” czyli każde rozwiązanie ma swoje wady i zalety. Tak też jest w przypadku techniki RWD.
Poniżej zostało zaprezentowane zestawienie wad i zalet Response Web Design. Decyzję o ich wyborze pozostawiam Wam. Ja osobiście jestem zwolennikiem techniki RWD.

Zalety Wady
  • Serwis automatycznie dostosowujący swój wygląd do urządzenia
  • Brak konieczności tworzenia wersji mobilnej
  • Niższe koszty wdrożenia RWD niż wersji mobilnej
  • Utrzymanie jednej wersji serwisu
  • Łatwa implementacja 

 

  • Zwiększenie wielkości kodu a co za tym idzie większe obciążenie sieci i serwera
  • Brak obsług starszych wersji przeglądarek – nie obsługujących CSS3 (problem już raczej marginalny)
  • Dodatkowe koszty związane z projektem strony
udostępnij: