Responsive web design to ostatnio bardzo popularne pojęcie. RWD to projektowanie stron tak, by dostosowywały się one do rozdzielczości ekranu, na których są wyświetlane. Celem Responsive Web Design jest zaprojektowanie strony w taki sposób by była ona czytelna, przejrzysta, posiadała prostą nawigację z minimalną ilością suwaków.

W odróżnieniu do zwykłego stylowania w Responsive Web Design używa się:

• Relatywnych jednostek wielkości np. procentów, zamiast pikseli/punktów,
• Płynnych obrazków, które są tak zaprojektowane by nie wychodziły poza element, w którym są tak zwany outflow.

Wdrażanie Reponsive Web Design

Bardzo istotnym i obowiązkowym elementem Responsive Web Design jest umieszczenie poniższego fragmentu kodu w sekcji meta strony

  <meta name="viewport" content="width=device-width" />

Kod ten powoduje, że wielkość strony zostanie rozciągnięta do 100% wielkości ekranu. Jednakże zastosowanie tego kodu w przypadku gdy nie mamy odpowiedniego kodu CSS spowoduje wyświetlenie tylko skrawka strony.

Dlatego następną istotną rzeczą jest użycie tak zwanych Media Queries

<link rel="stylesheet" type="text/css"
   media="screen and (max-width: 400px)"
   href="400.css" />

Powyższy fragment kodu odpowiada za wstawienie pliku CSS tylko wtedy gdy maksymalna szerokość przeglądarki wynosi 400px. Powyższy efekt można również osiągnać bez stosowania osobnych plików CSS za pomocą poniższego kodu CSS:

  @media screen and (max-width: 400px) { 
     p {
       font-size:14px;
     }
   }

Kod ten zmieni wielkość czcionki na 14px w przypadku gdy maksymalna wielkość ekranu to 400px.

Więcej na temat Responsive Web Design opiszę w wpisie poświęconym CSS MEDIA