Serwis buduj tylko raz. Ale tak, żeby użytkownik oglądał go na czym chce

Warto stosować ideę responsive web design, czyli projektować witrynę tak, by dopasować ją także do sprzętów mobilnych i pokazać treść inaczej w zależności od urządzenia, zachowując jednocześnie koncepcje serwisu.

Eksperci przekonują, że niemal każdy layout można zbudować w ten sposób, trzeba tylko pamiętać o kilku zasadach podczas planowania i projektowania.

Badania rynku prowadzone przez Morgan Stanley Research pokazują, że użytkownicy równie często zaglądają do sieci z urządzeń mobilnych, co z desktopowych. Prognozy na najbliższe lata (2013-14) przewidują zdominowanie rynku przez urządzenia mobilne. Responsive web design jest wiec naturalna i wychodzącą na przeciw erze urządzeń mobilnych reakcja. Projektowanie serwisów w RWD zakłada przygotowanie czterech layoutów strony dla każdego typu urządzeń: komputerów stacjonarnych, laptopów, tabletów oraz smartfonów.

Jak twierdza specjaliści, głównymi zasadami przy budowanie stron w oparciu o RWD są: elastyczna siatka strony www, elastyczny rozmiar obrazów zawartych na stronie, precyzyjne dopasowywanie jakości kontentu strony do mediów.

- Stosowanie wymienionych zasad umożliwia płynne przejście miedzy czterema kluczowymi układami strony pozwalając na obejrzenie strony www nawet w urządzeniach, które jeszcze nie powstały - mówi Maciej Bednarczyk, project director w agencji Biuro Podróży Reklamy. W zasadzie prawie każdy layout można stworzyć stosując responsywne projektowanie stron.

- Wymaga to jednak prawie zawsze przemyślenia od podstaw nawigacji, umiejscowienia i rodzaju reklam i innych elementów składowych. To z kolei wymusza najczęściej inny layout i przeprojektowanie elementów graficznych tak, by można było je elastycznie przearanżować lub zmienić w zależności od urządzenia, rozdzielczości czy orientacji ekranu – stwierdza Tomasz Stradomski, prezes InteliSoft.

Niektórzy uważają nawet, ze bazując na html5 oraz css3 (media queries), możliwe jest przygotowanie layoutu dopasowanego do każdego typu urządzenia.

Mimo tego należy jednak pamiętać o istotnych zasadach podczas planowania i projektowania. - Przede wszystkim należy rozpocząć projektowanie od końca, czyli od urządzeń mobilnych z małymi rozdzielczościami, których używa się inaczej niż tradycyjnych serwisów internetowych. Obecnie, gdy dostęp do technologii mobilnych jest bardzo szeroki, projektanci nie są w stanie określić w jakich warunkach i z jakich urządzeń korzystał będzie użytkownik końcowy, dlatego tez tak istotny jest sam dobór treści i mechanizmów wykorzystywanych podczas korzystania z produktu - tłumaczy Łukasz Nowacki, senior project manager z agencji Kamikaze.

Dodaje, ze należy pamiętać np. o tym, ze użytkownik może korzystać z serwisu w tramwaju jadącym po zdezelowanym torowisku w mroźny poranek. Korzystanie z ekranów dotykowych skostniałymi palcami musi być bardzo intuicyjne, a szybkość odnajdywania szukanego kontentu bardzo wysoka. - Nawigacja musi być przystosowana do rozmiaru ekranu urządzenia mobilnego zachowując odpowiednia czytelność, a możliwość scrollowania zostaje zachowana do osi pionowej - mówi Łukasz Nowacki.

Projektowanie pod responsive rozpoczyna się od naszkicowania pomysłów na makietach przy zachowaniu dużej wrażliwości na szczegóły. - Podczas makietowania istotny jest dobór elastycznego gridu, który zmienia się proporcjonalnie do szerokości strony, tzw. płynnego gridu - wyjaśnia Nowacki. Podkreśla, ze bardzo istotne jest również ustalenie, zaprojektowanie i przetestowanie płynnych przejść pomiędzy poszczególnymi designami. Kolejna zasad, której trzeba się trzymać korzystając z responsie web design to unikanie popupów, lightboxów, otwierania linków w osobnych oknach, czy tym bardziej multipopupów.

- Koniecznością staje się rezygnacja z ciężkich rozwiązań flashowych, których nie obsługują urządzenia z iOS, a w Androidzie wymagają dodatkowej aplikacji. Należy uważać na skrypty JavaScript z uwagi na to, ze nie każdy zadziała w każdej przeglądarce. Nie należy również używać pozycjonowania elementów o ustalonej pozycji, czyli position: fixe - przestrzega ekspert. Są jednak i tacy, którzy wskazują, ze tylko określone typy portali i serwisów nadają się do budowania wedle zasad RWD, czyli przede wszystkim dynamicznego dostosowania wyglądu i działania strony do urządzenia na którym jest ona wyświetlana, oraz jednego kodu (html+css+js) dla całego serwisu.

- Nie każdy layout nadaje się do realizacji w tak przyjętych założeniach. Można oczywiście spierać się, co do poziomu dostosowania, ale resposive web design zakłada, ze na końcu użytkownik ma kontakt z ergonomiczna, w pełni funkcjonalna strona. Najlepszym kandydatem do takiego podejścia są serwisy typowo contentowe z minimalnym designem: galerie zdjęć, listy dyskusyjne, itp. - wylicza Jan Namedynski, partner, strategy & Social Media director w agencji Red8 Digital.

Stosunkowo słabym pomysłem jest jego zdaniem projektowanie narzędzi i serwisów typowo reklamowych opartych o rozbudowany, bogaty projekt graficzny.

Nie wszystko do pokazania

Urządzenia mobilne stawiają przed projektantami stron wymagania, które sprawiają, ze trzeba odpowiedzieć na pytanie - czy wszystkie elementy strony, które chcemy pokazać na desktopach, jest sens pokazywać również na urządzeniach z mniejszymi ekranami?

- Musimy pamiętać o innym kontekście, w jakim znajduje się użytkownik takiego serwisu. Skoro wchodzi na dany serwis na urządzeniu mobilnym, to pewnie, dlatego, ze już, teraz potrzebuje informacji. W większości przypadków w zupełności zadowoli go informacja o produkcie/usłudze, cennik, dane kontaktowe/adres i może jakaś galeria produktu. Cała reszta informacji, które może by przeglądał siedząc przed komputerem jest raczej zbędna - przekonuje Jacek Tobiasz, projektant systemów informatycznych z Ideo.