Blog
17/11/2016
Responsive Web Design (RWD)

Responsive Web Design (RWD)

 

Co to znaczy i czym są strony responsywne?

 

RWD to technika projektowania stron tak, aby ich wygląd oraz układ automatycznie dostosowywał się do rozmiaru okna urządzenia, na którym jest wyświetlana.
Tak więc strony responsywne to takie, które dobrze wyświetlają się zarówno na dużych ekranach, jak i na smartfonach czy tabletach. Bez ucinania treści oraz utraty jej czytelności.

 

Aby strona działała poprawnie na różnych ekranach i dostosowała do nich swój wygląd musi być odpowiednio zaprojektowana.

 

Layout strony musi swobodnie dopasowywać się do poszczególnego ekranu, a szerokość strony powinna być równa jego szerokości - aby  nie było konieczne przesuwanie strony na boki w celu wyświetlenia jej całej zawartości. Czcionka musi posiadać odpowiedni kolor i wielkość, tak aby nie sprawia problemów podczas czytania. Elementy menu również muszą posiadać odpowiednią wielkość, aby bez problemu można było nacisnąć na nie palcem.

 

Google ceni responsywność

 

Strony dostosowane do urządzeń mobilnych są docenianie przez Google i  osiągają lepsze pozycję w wynikach wyszukiwania niż te, które nie są do nich przystosowane.
Strony responsywne cieszą się również większą ilość odwiedzin, ponieważ potencjalny klient może na nią wejść w praktycznie dowolnym momencie np. podczas stania w korku.

 

Wdrożenie RWD odbywa się za pomocą tzw. media queries, które pozwalają rozpoznać rozdzielczość okna przeglądarki i zastosować odpowiedni arkusz stylu, lub jego fragment. Można wykorzystać również skrypty JavaScript.

 

Tag HTML

 

Domyślne ustawienie skalowania zawartości strony przez urządzenia mobilne jest możliwe  za pomocą poniższego kodu, który określa domyślną szerokość dokumentu na 100% szerokości wyświetlacza, co pozwala na tworzenie stron nie wymagających ciągłego powiększania i pomniejszania przez użytkownika

 

<meta name="viewport" content="width=device-width, initial-scale=1" />