Czy (i dlaczego?) warto zainwestować w Responsive Web Design

Czy (i dlaczego?) warto zainwestować w Responsive Web Design

Responsive Web Design to nowe podejście do budowania serwisów i aplikacji internetowych. Czy serwis wykonany zgodnie z regułami RWD jest droższy od tradycyjnej strony internetowej? A jak to wygląda w relacji serwis RWD/dedykowana strona mobilna?

Halo, bileciki do kontroli!

Pełną treść dostaniesz bez grosza,
ale musisz być w naszym newsletterze.

Raz, raz, wpisywać e-mail. Tylko prawdziwy, bo sprawdzę!

partner technologiczny: GetResponse

Dla uzasadnienia i rozwinięcia powyższych stwierdzeń ale przede wszystkim dla przedstawienia złożoności sprawy, poświęcimy chwilę na bliższe przyjrzenie się tematowi:

Za i przeciw Responsive Web Design

Powiedzmy, że zdecydowaliśmy, iż klient w kolejce po latte ma widzieć na swoim smartfonie dedykowaną mu wersję strony. Rozważamy Responsive. Co przemawia na jego korzyść a co na niekorzyść?

RWD - powszechnie znane “za”

  • Serwis tworzony jest raz i działa na tysiącach urządzeń o różnych parametrach ekranu.
  • Jednokrotnie powstaje koncepcja interfejsu, projektowana jest architektura informacji, planowane ułożenie kontentu i projekt graficzny. Jeden raz pisze się kod.
  • Utrzymanie - wprowadzona raz zmiana, poprawiony raz błąd, zaktualizowany raz kontent widoczne są natychmiast wszędzie i dla wszystkich.
  • Jeden URL, jeden hosting.
  • Łatwiejsze zarządzanie linkami.

RWD - mniej znane “za”

  • Realia utrzymania - z doświadczenia spotkań z Klientami wiemy, że zazwyczaj jedna agencja tworzy (lub stworzyła serwis jakiś czas temu), inna zaś buduje dedykowaną wersję mobilną serwisu. Rodzi to jeszcze większe realne problemy z zarządzaniem kontentem, aktualizacjami i utrzymaniem spójności (także technicznej) obu serwisów.
  • RWD pozwala zarządzającym serwisem czerpać zmultiplikowany zysk z pojedynczej inwestycji na wielu platformach i rozdzielczościach - jeden design, produkcja, wspólne zarządzanie treścią i nakładami marketingowymi.
  • Jeden URL - posiadanie jednego serwisu dla wszystkich nośników oznacza także, że za pomocą jednego URL-u dostarczysz kontent wszystkim Twoim odbiorcom. Nie musisz się martwić o przekierowania i niezgodności pomiędzy nośnikami. Kiedy promujesz link, masz pewność, że niezależnie od tego, jak i gdzie użytkownik wyświetla Twój website, dotrze do tych samych linków.
  • Google rekomenduje RWD… (jakie lepsze “za” możemy przytoczyć? :-) https://developers.google.com/webmasters/smartphone-sites/)
  • Możliwości - RWD pozwala tworzyć NAPRAWDĘ różne interfejsy, budować odmienną architekturę informacji, prezentować kontent strony na bardzo różne sposoby – (niestety, powszechnie pokazywane dziś serwisy zrealizowane w RWD nie oddają nawet w połowie możliwości, jakie RWD ze sobą niesie. W większości to dość prymitywne odwzorowania tego samego serwisu w różnym ułożeniu treści, ale bez skupienia na różnicach potrzeb użytkowników nośników, ich przyzwyczajeń i oczekiwań).

RWD - Co tak naprawdę wpływa na koszty?

Czyli znane nam “przeciw”

  • Czas potrzebny na dewelopment - proces powstawania projektu RWD jest bardziej czasochłonny, niż mogłoby się wydawać. Pod uwagę trzeba wziąć takie czynniki jak:
    - wydłużony czas projektowania interfejsu - od samego początku ważne jest określenie zasad zachowania i zmian UI w zależności od nośnika;
    - wykorzystanie odpowiednich patternów;
    - wybranie odpowiedniego dla nas frameworka (o ile mamy zamiar z takowego korzystać) lub projektu bazowego;
    - planowanie szczegółowe podstawowych elementów (np. break-pointów, chociaż niektóre osoby dostosowują break-pointy do projektu graficznego, nie na odwrót).
    Trzeba pamiętać przede wszystkim o tym, cytując Bryana Riegera, że “The absence of a media query is in fact, the first media query”, co jest najważniejszym czynnikiem przy pracy “mobile first”, która to metodologia optuje za stworzeniem podstawowego projektu z pełnym kontentem, jaki chcemy przekazać użytkownikowi i rozwijanie go wraz z udostępnianymi nam możliwościami nowych rozwiązań.
    Jest to kluczowe przy próbie przeniesienia aktualnego serwisu stworzonego z myślą wyłącznie o desktopach do świata mobilnego. W większości przypadków operacja taka będzie wymagała dużo większych zasobów czasowych, niż napisanie strony od podstaw.
  • Zwiększony czas testowania i zapewnienia jakości - testowanie serwisu w wielu środowiskach, szczególnie na prawdziwych urządzeniach, a nie z wykorzystaniem emulatorów lub poprzez zwykłe zsuwanie okna przeglądarki, jest czasochłonne. Bardzo czasochłonne. Dni, kiedy do testów wystarczyło nam zanistalowanie kilku wersji znanych przeglądarek, minęły. Aktualnie nadal oczywiście testujemy aplikacje na przeglądarkach, tyle, że mamy do czynienia ze zwielokrotnieniem opcji - przeglądarki desktopowe i mobilne, w dziesiątkach przeróżnych wersji, o różnej specyfikacji, z różnymi funkcjonalnościami i możliwościami które możemy wykorzystać. Każde z urządzeń zachowuje się inaczej, a my musimy zrozumieć, na jakiej zasadzie ono działa i starać się zapewnić odpowiedni sposób przedstawienia naszej treści. Większość gotowych narzędzi, które pomagają developerom w testowaniu responsywnych rozwiązań, bazuje na zmianie dostępnej szerokości i wysokości, na której wyświetlana jest strona. Nie oddaje to jednak szybkości generowania strony, różnicy w możliwościach dostępnych przeglądarek mobilnych, prędkości łącza czy zachowania bez wykorzystania myszki i klawiatury, chociaż i takie narzędzia zaczynają powstawać jak grzyby po deszczu. Możemy jedynie z nadzieją czekać na idealne narzędzie do testowania... Na dzień dzisiejszy jednym z rozwiązań problemu jest analiza użytkowników pod kątem korzystania z konkretnych nośników i zamknięcie tej fazy wyłącznie do testowania tych nośników.
  • “Przeprogramowanie” mentalne i emocjonalne zespołu do innego system pracy
    Resposive Web Design kocha Agile. W Agile klient jest częścią procesu. Należy się zatem przygotować na iteracyjność i współdziałanie oraz na to, że proces Waterfall nie działa w rzeczywistości multi-screen. Ścisła współpraca jest absolutnie niezbędna dla udanego projektu responsive, więc upewnij się, że zespoły projektowe po stronie wykonawcy i po stronie klienta są w pełni komunikatywne i dysponują czasem (i ochotą) na regularne kontakty i wzajemne weryfikowanie swojej pracy. Praca iteracyjna pozwala klientowi na uczestniczenie w procesie i wgląd w prototypy klikalnych, w pełni zaimplementowanych części serwisu. Dzięki temu może on decydować na bieżąco o dodatkowych funkcjonalnościach i zaawansowanych potrzebach - to zaleta, jest jednak i wada - taki sposób pracy wymaga często podjęcia decyzji o budżecie zmiennym, zamkniętym jedynie w minimalnej i maksymalnym przedziale.
  • Szczególnie wykwalifikowany zespół realizujący - aktualnie na polskim rynku nadal niewielu twórców RWD potrafi w pełni go wykorzystać i dostarczyć. Dotyczy to w mniejszym stopniu front-end deweloperów (oni najbardziej dynamicznie zareagowali na trend RWD), w większym zaś projektantów interfejsów i grafików. RWD wymaga bowiem innego procesu myślenia o grafice, dodatkowych umiejętności i wiedzy, która musi być stale pogłębiana i rozwijana. 
    Wykwalifikowane zespoły, jeśli są w mniejszości, kosztują więcej...

Podsumowując

Serwis tworzony zgodnie z regułami Responsive Web Design jest droższy w tworzeniu od tradycyjnego serwisu www. Koszty budowy serwisu RWD są podobne, jak w przypadku serwisu mobilnego, jednak eksploatacja tego pierwszego w dłuższej perspektywie czasowej niesie ze sobą niższe koszty, niż w przypadku mobile web. Decyzja – mobile, czy RWD zależy od potrzeb. W przypadku, gdy potrzebujesz złożonej aplikacji o bardzo specyficznych potrzebach lub serwisu korzystającego z natywnych własności telefonu – wybierz mobile web. W każdym innym – rekomendujemy serwis Responsive. Nie tylko dlatego, że taka jest fala. Taka jest przyszłość!

Autorzy: Anna Zarudzka, Kamil Ogórek

Autorzy reprezentują Chilid Web Design Agency, pasjonaci łączenia dobrego designu z technologiami client side, uparci ewangeliści Responsive Web Design.

Polecane

Dzięki, link został przesłany

Zamknij

Serdeńko!
Lubisz już nasz fanpage?

Wystarczy kliknąć:

zobacz nasz fanpage >> Zamknij

Niech zapisze się
do newslettera!

Zostaw e-mail
i powolutku strzałeczka na guziczek!

Zamknij