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

Przy budowaniu serwisów internetowych standardem powinno być już myślenie o tym, że komputery stacjonarne i laptopy nie będą jedynymi urządzeniami, na których użytkownicy wyświetla stronę.

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.

Należy również pamiętać o tym, ze palec, jako urządzenie wskazujące nie ma takiej precyzji jak myszka, dlatego wszystkie elementy interaktywne powinny zachować odpowiednie rozmiary i odstępy. Dobrym przykładem dylematu, na jaki możemy się natknąć jest próba pokazania menu. - Na desktopach chcemy pokazać poziome menu rozwijane po najechaniu myszka, na ekranach dotykowych nie jest to takie oczywiste - zwraca uwagę Jacek Tobiasz. Pełne wykorzystanie możliwości, jakie daje RWD, zależy tak naprawdę od umiejętności grafika oraz projektanta strony. - Jako, ze jej tworzenie warto prowadzić zgodnie z reguła mobile first, można się równie dobrze spytać: czy strona mobilna może mieć każdy layout? Najważniejsze przecież, by był on dostosowany do małych ekranów. Zbyt skomplikowane układy są wiec z założenia bezużyteczne. Jednak wraz ze zwiększaniem rozmiarów okna przeglądarki, można do widoku strony dodawać kolejne elementy. Efekt końcowy może zatem znacznie różnic się od wersji minimalistycznej - wskazuje Piotr Kulczycki, dyrektor zarządzający Crafton.

Responsive web design nie stwarza przeszkód nie do przejścia i przy odpowiednim nakładzie pracy można stworzyć z nim naprawdę rewelacyjne strony. - Jest to w miarę nowy trend, wiec z czasem będzie się pojawiało coraz więcej stworzonych przez społeczności deweloperów opracowań i pomocy. Wszelkie dzisiejsze problemy z RWD, już za tydzień mogą mieć dziesiątki rozwiązań - uważa Piotr Kulczycki.

Po stronie plusów

Tworzenie stron internetowych z wykorzystaniem responsive design jest zdecydowanie tańszym rozwiązaniem niż zrobienie osobnej strony dla urządzeń mobilnych, chociażby z uwagi na duża liczbę rozdzielczości urządzeń mobilnych oraz zupełnie osobny layout dla tabletów.

- Korzyści można wymienić sporo. Najważniejsze jest to, ze dzięki RWD można dosyć szybko przygotować wersje mobilna strony, nawet już istniejącej - mówię tutaj o samej implementacji. Ponadto nie jest to zadanie specjalnie skomplikowane, gdyż opiera się o już istniejące standardy - ocenia Jacek Tobiasz.

Po stronie korzyści specjaliści wymieniają tez to, ze pracuje się zawsze na jednej strukturze html. - Zmiana wyglądu witryny odbywa się bez konieczności przeładowywania strony, wszystko dzieje się w locie, a wiec bardzo szybko. RWD jest przyszłościowy, już dziś możemy przygotować stronę, która będzie ciekawie wyglądała czy to na smartfonie, czy tez na ekranie telewizora połączonego z konsola do grania - mówi Michał Patera, frontend developer w Hypermedia Isobar.

Z kolei z punktu widzenia przedsiębiorców podstawowa korzyścią, jest łatwiejszy odbiór treści serwisu, w tym również reklam, przez użytkowników. Według szacunków IDC do końca 2012 r. udział smartfonów przekroczy w Polsce 50 proc. użytkowników telefonów komórkowych. Jest to wiec duża i dynamicznie rosnąca grupa potencjalnych odbiorców.

- Kolejnym plusem jest często mniejszy rozmiar stron, a wiec szybsze ich pobieranie również na desktopach. Wynika to z faktu, iż responsive design jest najłatwiej osiągnąć przy ograniczonym użyciu ozdobników graficznych i poleganiu na stylach css w miejsce tradycyjnie wykorzystywanych do tego celu obrazków - tłumaczy Tomasz Stradomski.

Czasem decyzja o pójściu w stronę RWD może oznaczać świadoma rezygnacje ze wsparcia dla starych przeglądarek używanych przez niewielka liczbę użytkowników. - To może owocować mniejsza ilością kodu do pobrania (poprawiającego błędy tych przeglądarek) czy tez bardziej przejrzysta, łatwiej indeksowalna przez wyszukiwarki składnia html. Jeszcze jedna zaleta jest zmniejszenie kosztów etapu analizy prezentacji uwzgledniającego nie jedno, a kilka urządzeń; jest on dużo prostszy przy stosowaniu responsive design - podkreśla Stradomski.

Warto ponieść koszty?

Nie brakuje opinii, ze zaprojektowanie i stworzenie responsywnej strony zajmuje znacznie więcej czasu niż w przypadku tradycyjnego serwisu. Pociąga to niestety za sobą koszty.

- Jednak, jeśli porównamy to z czasem pracy nad strona tradycyjna, wersja mobilna i jeszcze wersja na tablety - to wypada zdecydowanie lepiej. Wtedy zamiast wdrażać kilka stron, zajmujemy się jedna - jest ona za to doskonale dopracowana i dogłębnie przemyślana - argumentuje Piotr Kulczycki.

Właśnie planowanie, ustalanie hierarchii elementów oraz ich zmian, jest głównym powodem różnicy w kosztach stworzenia serwisu. Dla firmy, której nie zależy na klientach korzystających z jej strony z urządzeń innych niż komputery, może to być zbędny wydatek.

Obecnie są to już z dużym prawdopodobieństwem przypadki pojedyncze.

- Jeśli natomiast firma troszczy się o swoich mobilnych użytkowników, zdecydowanie bardziej będzie się jej opłacało stworzenie jednej wersji, za to wykorzystującej responsive design. Zalety możemy dostrzec także już po wdrożeniu. Do utrzymania jest tylko jeden kod, a zmiany wystarczy wprowadzić jednorazowo. Wszystkim użytkownikom możemy podawać ten sam adres, nieważne, z jakiego urządzenia będą korzystać - podkreśla Piotr Kulczycki i dodaje, ze jeszcze w fazie projektu, problemem może być stosunkowa nowość tego modelu. Przez to trudniej znaleźć pomoc lub gotowe rozwiązania. Dlatego należy się liczyć z tym, ze początki pracy z RWD będą przebiegały metoda prób i błędów.

- Największa zaleta stron responsywnych, widoczna jest ze strony użytkownika. W końcu nie będzie on zmuszony przewijać w bok w mniejszym oknie, a na telefonie nie będzie miał problemu z kliknięciem w to, w co chce, bo akurat link jest za mały - dodaje Kulczycki.

Strona będzie wyglądać dobrze i naturalnie - jakby została stworzona właśnie pod dane urządzenie. Internauta nie zostanie tez zasypany mniej istotnymi treściami.

Podsumowując - zalety RWD można ująć w następujących punktach:

• Oszczędność pieniędzy - niższe koszty utrzymania jednej wersji strony,
• oszczędność czasu - wprowadzanie zmian wiąże się z modyfikacja jednego kodu źródłowego,
• poprawa SEO - wymaga detalicznego przygotowania kodu strony, co jest bardzo dobrze odbieranie przez crawler'y Google,
• lepsza wydajność - szybsze ładowanie się stron www, dzięki dopasowaniu, jakości contentu do urządzeń (od czasu wprowadzenia css3 media queries),
• szersza obsługa przeglądarek,
• jeden adres URL,
• kompleksowe śledzenie ruchu na stronie,
• gromadzenie wszystkich społeczności wokół jednego miejsca,
• architektura informacji na każdym urządzeniu jest analogiczna, co pozwala użytkownikowi łatwiej się po niej poruszać.

Trochę wad

Nie można jednak nie wspomnieć o tym, co jest niedoskonałością RWD. Bo rozwiązanie to, jak każde inne, ma tez swoje wady.

- To przykładowo zbędny transfer danych na urządzeniach mobilnych. Mimo tego, ze pokazujemy zdjęcia w mniejszych rozmiarach to i tak najczęściej są przesyłane do urządzenia duże zdjęcia - takie same jak na komputerze stacjonarnym - i dopiero podczas wyświetlania są skalowane do rozdzielczości urządzenia - Jacek Tobiasz wskazuje na jeden mankamentów. Analogicznie pliki css, JavaScript czy sam html będą zawierać wszystkie elementy wykorzystywane na ekranach o dużych rozdzielczościach mimo tego, ze nie wszystkie pojawia się na urządzeniach mobilnych. Tobiasz dorzuca do tego jeszcze fakt, ze nie wszystkie starsze przeglądarki w pełni spełniają wymagania nakładane przez koncepcje RWD.

Dla wielu firm istotna wada będzie tez kwestia wspomnianych już kosztów. - Z punktu widzenia przedsiębiorcy są to na pewno dodatkowe koszty związane z dostosowaniem serwisu - przyznaje Michał Patera.

- Na pewno jest to rozwiązanie droższe niż zaprojektowanie strony tylko pod desktopy. Trzeba przygotować projekt graficzny kilku wersji dostosowanych do różnych rozdzielczości, a następnie wytłumaczyć klientowi, ze poszczególne elementy mogą zmieniać swoje położenie i rozmiary - tłumaczy Jacek Tobiasz. Zaznacza jednak, ze późniejsze utrzymywanie tak zaprojektowanej strony jest tańsze niż utrzymywanie dwóch lub więcej odrębnych stron. A to znacznie ogranicza koszty w ujęciu całościowym.

Artykuł ukazał się w październikowym Raporcie Interaktywnie.com Internet Software House

Pobierz ebook "Social media marketing dla firm i agencje się w nim specjalizujące"