Responsive web design czyli elastyczne projektowanie stron internetowych
24 październik 2013 | Kategoria: E-marketing
Jeszcze do niedawna skupiano się na layoucie, strukturze strony internetowej i umieszczonych na niej grafikach w kontekście wyświetlania jej na ekranach komputerów stacjonarnych i laptopów. Tylko największe strony internetowe miały wersje mobilne (czyli przeznaczone na telefony komórkowe). Były to jednak wersje znacznie okrojone, które nie zawierały np. grafik. Projektowanie stron osiągnęło nowy poziom w roku 2010, kiedy po raz pierwszy użyto terminu RWD (responsive web design), co na język polski można tłumaczyć jako projektowanie elastyczne (responsywne).
Według najnowszych doniesień, w krajach rozwiniętych (a Polska do takich się zalicza) do 2017 roku smartfony wyprą w pełni tradycyjne telefony komórkowe. Urządzenia mobilne odgrywają i będą odgrywać coraz większą rolę. Współczesny użytkownik nie przegląda stron internetowych jedynie na komputerze, stacjonarnym czy przenośnym, ale także, a może przede wszystkim na tablecie czy smartfonie.
Co oznacza Responsive Web Design (RWD)?
Projektowanie responsywne to takie tworzenie strony, które ma na uwadze, że użytkownik będzie korzystał z niej na różnych urządzeniach. Zgodnie z koncepcją RWD strona ma być czytelna i wygodna w użytkowaniu bez względu na to, na jakim urządzeniu jest wyświetlana. RWD pozwala na dostosowanie struktury strony – jej układu, wyglądu, również nawigacji.
Co jest najważniejsze w projektowaniu responsywnym?
Projektant strony, już od pierwszych chwil jej tworzenia, musi mieć na uwadze, że będzie ona wyświetlana również na urządzeniach mobilnych. Wielu specjalistów radzi, by projektowanie strony rozpocząć właśnie od wersji mobilnej, dostosowanej do najmniejszych urządzeń, czyli smartfonów. Potem można stronę poszerzać i rozbudowywać, dostosowując ją do wyświetlania na większych urządzeniach.
Projektowanie responsywne nie polega na zmniejszaniu tekstów, grafik czy układu menu. Strona wyświetlana w pomniejszeniu na smartfonie nie będzie czytelna. Witryna, która jest zaprojektowana responsywnie dostosowuje wygląd grafik czy tekstu do parametrów urządzenia tak, by odczytywana treść była czytelna i wygodnie dostępna dla użytkownika. Dobrym przykładem dostosowania funkcji strony jest responsywność serwisu Facebook. Przy zmniejszeniu szerokości strony, czat minimalizuje się na dolnym pasku strony, a po jego otwarciu, okno czata jest nadal czytelne, ale ograniczone tylko do kontaktów – w przeciwieństwie do połączonych funkcji czata i ostatnich aktywności znajomych na pełnej szerokości strony.
Projektowanie responsywne ma również duże znaczenie dla optymalizacji SEO. Niegdyś projektowano osobną wersję strony dla urządzeń mobilnych, która była często dostępna pod innym adresem w osobnej subdomenie (m, mobile, mobi itp.) czy chociażby w podkatalogu (domena.pl/wersja-mobilna). Działania tego typu były dość problematyczne dla mechanizmów SEO, gdyż pojawiał się szereg problemów związanych ze stosowaniem praktyk niedozwolonych dla mechanizmów Google. Wersje mobilne z założenia były wersjami mniej rozbudowanymi, a co za tym idzie webmaster tworzący stronę był zmuszony do stosowania wspomnianych zakazanych praktyk np. do ukrywania części treści i linków strony właśnie w tych wersjach. Ponadto problemem była też duplikacja treści na wersji standardowej i mobilnej. Samo przekierowanie na stronę mobilną mogło być również przez Google uznane jako przekierowanie wprowadzające w błąd użytkowników. Obecnie projektowanie responsywne pozwala na przygotowanie jednej wersji strony, która automatycznie dopasowuje swój wygląd i funkcje – dzięki temu nie tylko dla użytkownika, ale również dla Google nie ma znaczenia, na jakim urządzeniu strona jest otwierana – to cały czas jedna wersja strony.
Jak rozpoznać czy strona ma budowę responsywną?
Budując stronę responsywną zakłada się minimalną szerokość, na jakiej strona powinna funkcjonować prawidłowo. By sprawdzić, czy strona jest zaprojektowana reponsywnie, należy zmieniać szerokość okna przeglądarki – przy stronie reponsywnej taka zmiana nie spowoduje pojawienia się poziomego suwaka. Zaobserwujemy również, że wraz ze zmianą wielkości okienka elementy witryny zmieniają swoją warstwę prezentacji.
