Responsible Web Design

Responsible Web Design (RWD) - Flexi design - jest to technika projektowania stron internetowych zapewniająca automatyczne dostosowanie się ich wyglądu i układu do platformy - nośnika, na którym są wyświetlane (np. komputery, smartfony, tablety, telewizory). RWD ma zapewnić przejrzystość i łatwe poruszanie się po stronie, a ograniczyć przesuwanie i przewijanie.

Strona zaprojektowana w RWD - Flexi designie dostosowuje swój układ do urządzenia za pomocą płynnych siatek, elastycznych zdjęć oraz zapytań mediów (ang. media queries) w CSS3.

  • Płynne siatki wymagają od elementów strony stosunkowych jednostek takich jak procenty, a nie bezwględnych (piksele, punkty).
  • Elastyczne obrazy mają wymiary w jednostkach względnych, aby dostosować je do wielkości urządzenia.
  • Zapytania mediów pozwalają stronie stosować różne zasady stylu CSS na podstawie charakterystyki urządzenia (przeważnie jest to szerokość przeglądarki), które ją wyświetla.
  • Komponenty po stronie serwera w połączeniu z elementami ze strony Klienta, takimi jak zapytania mediów, powodują szybsze ładowanie się stron, a także dostarczają większej funkcjonalności poprzez pomijanie niektórych wad po stronie urządzenia.

Pojęcia pokrewne

Koncepcja mobile first, dyskretna JavaScript i postępująca poprawa to strategie, które poprzedzały rozwiązanie RWD: przeglądarki podstawowych telefonów nie rozumieją JavaScript lub zapytań mediów, więc zalecane było utworzenie podstawowej strony internetowej i rozszerzenie jej dla smartfonów i komputerów.

Postępująca poprawa oparta na wykrywaniu przeglądarki, urządzeń i funkcji

Kiedy strona internetowa musi obsługiwać podstawowe urządzenia mobilne, które nie posiadają JavaScript, przeglądarek wykrywających klientów użytkownika (ang. user agent), czy wykrywania urządzeń mobilnych, są dwa sposoby na sprawdzenie, czy pewne funkcje HTML i CSS są obsługiwane (jako podstawa do stopniowego rozwoju). Jednakże te sposoby nie są niezawodne, o ile stosowane są w połączeniu z bazą danych o możliwościach urządzenia.

Dla bardziej sposobnych telefonów komórkowych czy komputerów, biblioteki JavaScript takie jak Modernizr, jQuery i jQuery Mobile mogą bezpośrednio przetestować wsparcie przeglądarki dla funkcji HTML czy CSS (lub identyfikacji urządzenia czy klienta użytkownika). Kod polyfill może być używany, aby wesprzeć niektóre funkcje np. zapytania mediów (wymagane dla RWD) czy zwiększenie wsparcia dla HTML5 w przeglądarce Internet Explorer.

Log In

Log in with Facebook

Nie pamiętasz hasła? / Nie pamiętasz nazwy?

Czekamy na kontakt. Mailem, telefonicznie lub osobiście. Wybierzcie Państwo formę która Wam najbardziej odpowiada.
1000 znaków pozostało
1000 znaków pozostało