Responsive Web Design (RWD)

Responsive Web Design (RWD)

Z Internetu korzystamy dziś nie tylko za pomocą tradycyjnego komputera (PC), ale również mobilnie czyli poprzez smartfony, tablety, itd. Mobilny Internet rozwija się w bardzo szybkim tempie, więc dostosowanie stron do wymagań mobilnych urządzeń jest naprawdę konieczne.

Dotychczasowo, najczęściej tworzona była kolejna wersja strony internetowej tak, by możliwe było jej odtworzenie przy pomocy urządzenia niewielkich rozmiarów czyli tak zwana mobilna strona www. Serwis jest dzięki temu zdecydowanie „lżejszy”, z prostym systemem nawigacyjnym ułatwiającym odbiór treści. Jednak tworzenie kilku wersji stron internetowych, gdzie każda ma być dopasowana do wymagań innego urządzenia (tabletu, smartfona, notebooka, itp.), jest z jednej strony kłopotliwe (technologie się ciągle zmieniają, pojawią się nowe urządzenia), a z drugiej – kosztowne.

Idea Responsive Web Design

Nie trzeba było długo czekać, aby na ten problem pojawiła się odpowiedź – idea Responsive Web Design (RWD). Zapoczątkowana została przez Ethana Marcotte i szybko zainteresowała twórców stron, zyskując wielu zwolenników. RWD zakłada, że odpowiednio przygotowana witryna może automatycznie dopasowywać się do urządzeń, przez które jest aktualnie przeglądana. Responsive Web Design jest jednak tylko koncepcją, założeniem, nie jest to technika ani technologia tworzenia stron www.

Do tworzenia witryn zgodnie z tą koncepcją wykorzystuje się różne dostępne technologie, techniki, które ze względu na stale rosnącą liczbę urządzeń, za pomocą których korzystamy z Internetu (co jakiś czas pojawiają się nowinki technologiczne, zmieniają się parametry sprzętu) oraz wymagań internautów, są ciągle rozwijane.

„Elastyczna” witryna, czyli breakpoints

Można powiedzieć, że strona tworzona zgodnie z koncepcją Responsive Web Design jest „elastyczna”. Zmienia się w tzw. breakpoints (lub breaking points), które stanowią „granicę” reakcji serwisu na zmiany. Strona zmieniana jest tak, by przystosować się do rozdzielczości ekranu, na którym jest przeglądana. Zmienić w punkcie (breakpoints) może się zarówno układ witryny, jak i elementy graficzne (mogą zniknąć bądź dopasować się szerokością i wysokością), ilość elementów na stronie czy system nawigacyjny, itd. Punktów zmian może być wiele, są one związane z rozdzielczością sprzętu, z którego korzystają internauci.

Czy jest to dla tworzących strony pracochłonne?

Praca włożona w budowę serwisu stworzonego zgodnie z założeniami RWD zależna będzie w głównej mierze od ilości punktów zmian (breakpoints) oraz ilości elementów, które będą się zmieniały. Wszystko trzeba odpowiednio zaplanować, jako że każda wersja musi być przemyślana tak, by umożliwić prosty jej odczyt i intuicyjną nawigację na stronie. Ponadto, na każdym etapie powstawania strony trzeba wziąć pod uwagę wszystkie powyższe założenia.

Przygotowanie strony zgodnie z ideą RWD wymaga zatem sporego nakładu pracy oraz czasu. Jednak z drugiej strony, dzięki dostosowaniu witryny do współczesnych wymagań będziemy mieli pewność, że jest ona prawidłowo wyświetlana na urządzeniach mobilnych. Gdy, przykładowo za rok pojawi się nowy tablet czy inne urządzenie, które podbije serca (a także i rynek) internautów, nie będziemy martwili się koniecznością inwestycji w następną wersję strony internetowej.

Ilość breakpoints czyli wersji serwisu

„Wersji”, które zmieniać się będą w punktach granicznych (breakpoints), możemy mieć tak naprawdę wiele, wszystko zależy od nas. Najczęściej przygotowywane wersje to opcje na tablet, smartfon, komputer PC, czy netbook.

Graniczne dla wersji strony są najczęściej następujące rozdzielczości:

  • 320px,
  • 480px,
  • 600px,
  • 768px,
  • 900px,
  • 1200px.

Na zakończenie

Responsive Web Design zakłada, że strona internetowa, w zależności od rozdzielczości ekranu urządzenia, na jakim jest przeglądana, dostosowuje się – pod względem treści, wyglądu, poszczególnych elementów, nawigacji. Może być również tak, że w pewnych wersjach witryna zrezygnuje z niektórych elementów (które mogą być zbyt „ciężkie” np. dla małego urządzenia, takiego jak smartfon). Od czasu, kiedy pojawiło się CSS3, a dokładniej właściwość Media Queries, a także dzięki wykorzystaniu Fluid Design czy odpowiednich skryptów Javascript, dość dynamicznie rozwija się trend RWD.

Niniejszy artykuł jest wyrazem wiedzy i poglądów autorów i nie może być podstawą do wysuwania jakichkolwiek roszczeń. Właściciel serwisu nie gwarantuje, że zawarte w dokumencie informacje są zgodne z prawdą i nie ponosi odpowiedzialności za szkody, jakie mogą wyniknąć z podjęcia decyzji na podstawie informacji zawartych w niniejszym dokumencie.

Jesteś zainteresowany naszą ofertą?

Skontaktuj się z nami lub wypełnij formularz kontaktowy - oddzwonimy!

  • 40-950 Katowice, Pl. Grunwaldzki 8-10 , IV p.
  • Nasze biuro czynne jest od poniedziałku do piątku
    w godzinach od 8:30 do 17:00