Jak podaje Wikipedia:

Responsive Web Design -- (RWD) technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru okna urządzenia, na którym jest wyświetlany (np. przeglądarki, smartfonów czy tabletów. Strona tworzona w takiej technice jest uniwersalna i wyświetla się dobrze zarówno na wielkich ekranach (np. Full HD), jak i na ekranach smartfonów czy tabletów.

Nowe technologie wymagają ciągłego doskonalenia, polepszania swojego produktu, ciągłego bycia na bieżąco. Dobra strona, zbudowana przy pomocy techniki RWD ułatwia czytanie zawartości strony, nawigację oraz ogranicza potrzebę powiększania/pomniejszania i przewijania oferty sklepu na boki. Staje się to czasem niezbędnym elementem, by zatrzymać odwiedzających na swojej stronie internetowej.

Jak dobrze zbudować stronę RWD?

Budowa stron RWD różni się nieco od podejścia klasycznego.

W obydwu przypadkach najlepiej jest zacząć od przygotowania treści strony i jak najdokładniejszego jej opisania. Kolejnym krokiem dla stron RWD jest analiza i przygotowanie właściwej siatki dla strony i prezentowanych treści. O ile w podejściu klasycznym, siatka jest umiarkowanie istotna, o tyle w stronach responsywnych nabiera szczególnego znaczenia. Rozkładając informacje na stronie RWD zawsze trzeba mieć na uwadze to, jak będą wyglądać na różnych ekranach.

Należy też pamiętać, aby strona prezentowana na telefonach miała uproszczony wygląd i działanie. Obrazki, efektowne slidery czy komunikaty wyświetlane na warstwach wyglądają bardzo ładnie na dużych ekranach, na małych bardzo często zaciemniają obraz i ograniczają przestrzeń. Każde rozwiązanie powinno być jak najlepiej dopasowane do koncepcji oraz nie powinno wpływać negatywnie na jej odbiór.
Istotne także jest zapewnienie właściwego komfortu pracy ze stroną. Pamiętajmy, że telefon czy tablet to urządzenia do których nie podłączamy klasycznej myszki komputerowej, a co za tym idzie nawigacja na stronie nie powinna działać tak, jakby była stworzona dla myszek.

Częstą niedogodnością spotykaną na tym zagadnieniu jest uruchamianie rozwijania menu akcją po najechaniu kursorem na wybrany element menu (onHover). Tymczasem dla telefonów i tabletów takie działanie jest kompletnie nieużyteczne i tak coś co jest pomocne na komputerach stacjonarnych, staje się niewygodne na mniejszych urządzeniach.

Prawidłowy kierunek projektowania stron RWD

Dodatkowo, pamiętajmy że: Strony RWD zawsze zaczynamy projektować od rozdzielczości najmniejszej (Smartfony (480px)) i następnie idziemy w górę poprzez tablety do ekranów komputerów stacjonarnych w proporcjach 16:9. Przyjmuje się graniczną rozdzielczość 1200px - dla większości serwisów zwiększenie maksymalnej szerokości spowodowałoby zmniejszenie czytelności dostępnych treści. Istnieją oczywiście strony, dla których wykorzystuje się zawsze całą dostępną przestrzeń ekranu - trzeba pamiętać, aby zawsze dostosować rozwiązania do potrzeb konkretnego projektu.

Korzyści

  • Jeden adres URL dla wszystkich
  • Jedno środowisko programistyczne
  • Czytelna strona www
  • Elastyczność i wszechstronność layoutu
  • Mniejsze koszty utrzymania strony
  • Spójność wizerunkowa
  • Nowoczesny wygląd strony
  • Google rekomenduje RWD...
  • Pozytywny wpływ na SEO
  • Poprawne wyświetlanie strony na wszystkich urządzeniach, dla wszystkich odwiedzających

Przykłady stron RWD