Responsive design, czyli elastyczne projektowanie

Termin responsive design używany jest do opisywania stron internetowych, odpowiadającym różnym urządzeniom i rozdzielczościom ekranów. Strony tworzone w ten  sposób, wykorzystują specyficzne techniki stylów, liczne kaskadowe arkusze CSS oraz skrypty wykonywane po stronie klienta. Dzięki temu, w zależności od zmiany rozdzielczości i rozmiaru ekranu, na stronie odbywają się różnorodne interakcje zawartości.

Sposób obsługiwania stron wyświetlanych na telefonach komórkowych, tabletach oraz mniejszych ekranach, jest zupełnie inny niż na ekranie standardowego laptopa lub monitora LCD. Z pewnością pamiętacie czasy, kiedy wiele firmy tworzyło swoje strony w wersji na urządzenia mobilne. Adresy tych stron były zazwyczaj poprzedzone literką „m”.
Przykład adresu dla wersji mobilnej strony: www.mfacebook.com lub www.m.facebook.com

Metoda projektowania i budowania oddzielnych wersji nie była wygodna i szybka. Dodatkowo, generowała dodatkowe koszty, a strony wymagały częstej aktualizacji.

Główną siłą responsive design jest to, że taka strona zawsze zostanie poprawnie wyświetlona, bez konieczności tworzenia odrębnych wersji. Decydując się na wykorzystanie responsive design w projektowaniu stron, mamy pewność że będzie dobrze wyglądać zarówno na smartfonie, tablecie, laptopie jak i komputerze  stacjonarnym. Wersja strony dedykowana dla użytkowników laptopów, może zawierać pokaz slajdów z dużymi zdjęciami. Wyświetlając tę stronę na ekranie telefonu komórkowego, nie zauważymy pokazu slajdów, a np. jedno statyczne zdjęcie.

Doskonała dostępność – zbudowane w ten sposób strony, automatycznie dostosowują się do dowolnego rozmiaru ekranu. Dawno minęły czasy, kiedy projektowane strony internetowe były z myślą o użytkownikach komputerów stacjonarnych. Wraz z pojawieniem się małych, przenośnych urządzeń, webdesignerzy zauważyli konieczność projektowania stron elastycznych, które mogą być otwierane i oglądane na dowolnym urządzeniu.

• Czytelność i funkcjonalność – responsive design skupia się na tym, aby najważniejsze elementy i funkcje strony były łatwe do znalezienia. Poprawia to ich użyteczność. Bez względu na to, na jakim urządzeniu strona zostanie wyświetlona, menu, przyciski nawigacyjne i pozostałe istotne elementy, będą łatwo dostępne.
• Ekonomiczny design – webdesignerzy nie muszą opracować kilku wersji dla jednej strony internetowej. Strony zbudowane przy użyciu najnowszych narzędzi i  technologii, pasują do wszystkich ekranów, co znacznie zmniejsza ich koszt.
• Niski współczynnik odrzuceń – współczynnik odrzuceń to procent odwiedzających, którzy opuszczają witrynę bez całościowego lub częściowego jej poznania. Współczynnik odrzuceń wzrasta z kilku powodów: słabej nawigacji i wolnemu ładowaniu się stron internetowych. Responsive design osiąga niższy współczynnik odrzuceń, zapewniając łatwą nawigację i zwiększając iloraz użyteczności strony.

• Duplikacja kodu i zawartości – strony responsive design mają tylko jeden kod źródłowy. W tym kodzie muszą się znaleźć elementy odpowiedzialne za prawidłowe wyświetlanie strony na wszystkich urządzeniach we wszystkich rozdzielczościach. Stwarza to konieczność duplikowania niektórych elementów, co  zwiększa objętość kodu strony.
• Więcej elementów do załadowania – ta wada jest ściśle związana z pierwszą, czyli duplikacją kodu. Im większa ilość kodu, tekstu i grafik, tym dłuższy czas ładowania się strony. Na szczęście, ten problem jest coraz mniej zauważalny, za sprawą coraz szybszych łączy internetowych.
• Dłuższy czas projektowania – responsive design oznacza większą ilość czasu, potrzebnego na zaprojektowanie strony. Z każdą kolejno napisaną linijką kodu, konieczne jest przetestowanie strony na różnych urządzeniach. Pomimo że to czasochłonne, jest to najskuteczniejsza metoda na szybkie wykrycie błędów.

Strona zaprojektowana zgodnie z zasadami responsive design występuje tylko w jednej wersji kodu źródłowego. Pomimo tego, ma nieskończone możliwości  prawidłowego wyświetlania, niezależnie od rozdzielczości i urządzeniom, a co najważniejsze – cały czas tym samym adresem www.

Jeśli czytasz tę stronę z urządzenia mobilnego, zapewne doceniłeś już jej wygodę ;) To właśnie jest responsive design.