MDA.pl   Baza Wiedzy    Co oznacza "responsive design"?

Co oznacza "Responsive Design"?

Powrót do bazy wiedzy

W ostatnim czasie dużą popularność zyskał skrót RWD i jego rozwinięcie: Responsive Web Design. Każda strona ma być „responsive”, ale co to tak naprawdę znaczy?

Responsive Web Design to sposób budowania stron internetowych tak, aby automatycznie dostosowywały się one do ekranu urządzenia, na którym są wyświetlane. Znaczy to, że niezależnie czy daną stronę internetową będziemy wyświetlać na ogromnym 27-calowym monitorze, 13-calowym laptopie, 10-calowym tablecie czy 4-calowym smartphonie, strona internetowa będzie wyglądać bardzo dobrze.

Strona będzie automatycznie zmieniać swój wygląd tak, aby jak najlepiej dopasować się do rozmiaru ekranu. W zależności od rozmiaru ekranu będą zmieniać się szerokości elementów, a na najmniejszych ekranach strona może się delikatnie przebudowywać np. tworząc jedną kolumnę z elementów, które na dużym ekranie wyświetlały się w dwóch lub więcej kolumnach.

Projektując stronę, która będzie zakodowana w RWD, tworzy się tzw. brake point czyli punkty, w których strona ma zareagować i zmienić swój układ. Już na etapie projektu graficznego należy zaplanować i zwizualizować jak strona zachowa się na co najmniej trzech najważniejszych rozdzielczościach ekranu:

  • Dla szerokości 1024 pikseli i większych, dla komputerów
  • Dla szerokości 768 pikseli, dla tabletów
  • Dla szerokości 320 pikseli, dla telefonów i smartphonów

 
Jak budować responsywną stronę WWW

Przykładem resposnsywnej strony internetowej może być strona internetowa naszej agencji interaktywnej, www.mda.pl. Strona automatycznie przebudowuje swój układ w zależności od rozmiaru ekranu. Proszę spróbować uruchomić naszą stronę na komputerze, tablecie czy telefonie (można obracać ekran żeby zobaczyć zmiany w trybie poziomym i pionowym tabletu czy telefonu). W zależności od urządzenia, na jakim wyświetli się naszą stronę, prezentuje się ona następująco:

Responsywna strona mda.pl

Data publikacji: 2013-11-14