Otwórz Zamknij Wyszukaj
naglowek_dedykowana_vs_RWD_jestemmmobi

Dedykowana strona mobilna vs. Responsive Web Design

25

04 czerwca 2013

Autor: Monika

Na konferencji Mobile Trends 4 Marketers razem z Anią Zarudzką z Chilid podejmowałyśmy temat podobieństw, różnic i kryteriów wyboru między dedykowaną stroną mobilnąstroną przygotowaną zgodnie z ideą Responsive Web Design. Temat jest ważny, polskich publikacji wciąż mało, dlatego postanowiłyśmy spisać wszystkie poruszane zagadnienia w niniejszym artykule.

Poziom przekazywanej wiedzy jest podstawowy – rozpatrujemy w nim tylko typowe dylematy, nie zagłębiamy się w przypadki krzyżowe, w których to na przykład dedykowana strona mobilna może posiadać właściwości responsywne. Nie zagłębiamy się też w kwestie techniczne, których detale mogą zaważyć na końcowym uogólnieniu. Chcemy dać jedynie podstawę do podejmowania wstępnych decyzji.

Na początek obejrzyj prezentację, która stanowiła tło naszej prelekcji:

Dedykowana strona mobilna vs Responsive Web Design – Mikowska Zarudzka – MT4M

 

Wprowadzenie do problemu

W ulubionej kawiarni w kolejce po latte czas płynie wolno. Telefon to najlepszy przyjaciel człowieka, szczególnie w czasie nudy :) Czekając na swoje zamówienie, Twój klient może więc po niego sięgnąć i np. „pochodzić po Internecie”. I Ty, jako twórca, właściciel strony internetowej możesz zdecydować, w jakiej oprawie mu ją zaserwujesz. Masz 3 opcje.

  1. Pierwsza jest najłatwiejsza. Potrzeby swojego „mobilnego” Klienta możesz olać. Dokładnie tak. Zobacz, jak działa strona CinemaCity.pl. Sprawdzenie aktualnego repertuaru i zarezerwowanie miejsca na tej stronie internetowej jest łatwe, gdy robisz to na komputerze lub laptopie w domu lub w biurze. Na telefonie to droga przez mękę – spróbuj zarezerwować bilet do kina we Wrocławiu na jutrzejszy na seans wieczorny „Drugie oblicze” z Ryanem Goslingiem. Daj znać, czy Ci się w ogóle udało i ile czasu Ci to zajęło.Oczywiście oceniając świadomie swój serwis możesz pozostawić go bez dodatkowych zmian (pod warunkiem, że budujący go deweloperzy nie zapomnieli o skalowalności). Pozostawiasz wówczas użytkownika z możliwą do odczytania treścią serwisu nieprzystosowanego do urządzeń mobilnych oraz z działającymi funkcjonalnościami. Zapytaj siebie jednak, jak wytrwały będzie Twój odbiorca w powiększaniu, przesuwaniu palcem po ekranie i jak długo będzie musiał docierać do interesujących go treści.
  2. Twoja druga opcja to przygotowanie dla odbiorcy nowej wersji strony, zaprojektowanej specjalnie dla telefonów komórkowych. Nie zmieniasz niczego w dotychczasowej wersji, tylko tworzysz nową, pod innym adresem, z projektowanymi i realizowanymi specjalnie na rzecz nośników mobilnych elementami: interfejsem, grafiką i funkcjonalnościami. Zobacz przykład serwisu plotkarskiego nocoty.pl. Wpis o nowym partnerze Dody posiada 2 adresy internetowe. Pierwszy (http://nocoty.pl/title,Doda-ma-juz-nowego-partnera,wid,15659561,wiadomosc.html) to ten “tradycyjny”, który widzisz poruszając się po serwisie na komputerze, czy laptopie, a drugi (http://nocoty.pl/martykul.html?wid=15659561&ticaid=610b3a) przeznaczony jest do czytania na telefonie.
  3. Jeśli chcesz zaproponować pełne wsparcie czytania i używania serwisu i wspólny adres, z pomocą przyjdzie idea Responsive Web Design. I to jest Twoja trzecia opcja. Możesz całkowicie przebudować swoją stronę internetową, aby automatycznie dopasowywała się do rozmiaru ekranu, na którym Twój czytelnik będzie ją otwierał. Zobacz, jak to działa na przykładzie serwisu www.starbucks.com, w którym to Twój klient może delektować się wspomnianą wyżej ulubioną kawą. Możesz to zrobić otwierając ją (najlepiej) kolejno na komputerze stacjonarnym, notebooku, tablecie i smartfonie, lub też skorzystać z narzędzia ami.responsivedesign.is, które błyskawicznie zaprezentuje, jak dana strona internetowa wygląda na różnych urządzeniach. Polecamy testowanie bezpośrednio na nośnikach, ale tego typu narzędzia to dobra zabawa :-)

Co to jest dedykowana strona mobilna?

Dedykowana strona mobilna jest jak kot. Zupełnie niezależna od swojej wersji tradycyjnej („desktopowej”) i chodząca swoimi ścieżkami (linkami).

Stronę dedykowaną poznasz po konstrukcji jej adresu URL. Strony mobilne zazwyczaj otrzymują adresy domen z subdomeną lub też pracują na zupełnie innej domenie (np. m.nazwastrony.pl, mini.nazwastrony.pl, nazwastrony.mobi).

Strona niezależna od wersji desktopowej daje Ci możliwość wypracowania dużo lepszego user experience, dedykowanego w sposób zupełny. Struktura strony, nawigacja, treści mogą być zaprojektowane od nowa. Jeśli masz wiedzę, że Internauta mobilny wykonuje inne czynności na Twojej stronie, kiedy ogląda ją na telefonie komórkowym od tych, które praktykuje na jej tradycyjnej wersji, możesz to wykorzystać i zaproponować mu inne, nowe doświadczenia.

Wybór takiego podejścia zazwyczaj oznacza konieczność zarządzania i aktualizowania wielu wersji serwisów, co z jednej strony może być koszto- i czasochłonne, ale z drugiej – ułatwia tworzenie i serwowanie różnych treści, osobno dla wersji mobilnej i osobno dla wersji tradycyjnej.

Dużą zaletą stron dedykowanych jest ich szybszy czas ładowania się w przeglądarce, co dziś (jeszcze) stanowi o ich przewadze. Internet dostępny z poziomu telefonów komórkowych jest niemal 30 proc. wolniejszy niż ten szeropasmowy, a mobilni Internauci nie wykazują dużej cierpliwości podczas czekania na załadowanie się wszystkich danych. Kwestia tempa ładowania oraz obciążenia stron zmienia się wraz z rozwojem technologii i rozwiązań, argument ten zatem przytaczamy, jako obowiązujący dziś, ale w najbliższym czasie coraz mniej ważny i przeważający na rzecz dedykowanych stron mobilnych. 

Co to jest strona zaprojektowana zgodnie z filozofią RWD?

Strona w RWD jest jak woda – dopasowuje się do naczynia, w którym się znajduje.

Responsive Web Design to nowe podejście, nowa filozofia tworzenia i budowania serwisów i aplikacji internetowych z nadrzędnym założeniem „responsive websites respond to their environment”. Responsive Web Design to termin ukuty przez Ethana Marcotte’a w artykule „Responsive Web Design”, który kilka dni temu (dokładnie 25. maja) obchodził swoje drugie urodziny. Serwis WWW tworzony jest w taki sposób, który pozwala na jego samodzielną adaptację do wielkości ekranu/urządzenia czy okna przeglądarki. Strona prezentuje się więc w różny sposób w zależności od szerokości (i rzadziej wysokości) wyżej wymienionych. Takie podejście do projektowania serwisów ułatwia Internautom czytanie zawartości, nawigację oraz ogranicza potrzebę powiększania/pomniejszania i przewijania.

Porównanie

Spróbujmy zatem wypunktować cechy charakterystyczne i porównać wady i zalety obu opisywanych przez nas rozwiązań. Wszystkie zagadnienia porządkujemy w poniższej tabeli i każdemu z nich przyznajemy punkty, w oparciu o które można rozpatrywać wyższość jednego rozwiązania nad drugim. 1. gwiazdka oznacza, że dane rozwiązanie umiarkowanie odpowiada na dane potrzeby, 2. gwiazdki oznaczają względnie dobre dopasowanie, a 3. gwiazdki – najlepszy wybór.

 

Zatem jak dokonać wyboru?

Zanim podejmiesz decyzję sprawdź bardzo dobrze swoje potrzeby i cele oraz przemyśl długoterminową strategię obecności w kanale mobilnym. Sposobów i narzędzi pomocnych przy tych wyborach jest wiele. My w niniejszym artykule uogólniamy je do dwóch następujących:

I.  Zadaj sobie pytania o Odbiorcę, Strategię i Szczegóły Projektu

Za nadrzędne determinanty wyboru powinniśmy postawić cele biznesowe, które dalej powinny wpływać na decyzje finansowe i strategiczne. Pytania, które pomogą Tobie je zdefiniować zadawała już wcześniej Ania i dla przypomnienia je powtarzamy:

ODBIORCA

  1. Jak duży jest ruch generowany przy użyciu urządzeń mobilnych w Twoim serwisie w ciągu ostatnich 12 miesięcy? Jak znaczny (co najważniejsze) jest procent jego przyrostu?
    Czy przewidujesz lawinowy wzrost, czy dotknie Cię on dopiero za jakiś czas? (mniejsze nakłady – wybierasz tańsze rozwiązanie)
  2. Czy odwiedzający Twój serwis użytkownicy mobilni to Twoja główna grupa docelowa i czy zależy Ci na niej w szczególny sposób? Jeśli tak, możesz wybierać, czy warto im zaoferować coś specjalnego, niedostępnego dla użytkowników “desktopowych” lub też właśnie przekazać wszystkie treści i akcje w najlepiej uporządkowany sposób.

STRATEGIA

  1. Jaka jest strategia Twojej organizacji dotycząca użytkowników mobilnych i obecności w mobile web?
  2. Czy Twoja firma jest technicznie, kreatywnie i emocjonalnie (tak, emocjonalnie) gotowa na Responsive Web Design – na większe niż dotychczas współdziałanie z projektantami, pracę w Agile, i przede wszystkim wydłużony czas testów i tworzenia?
    Wstępna rozmowa pomiędzy Tobą a wykonawcą serwisu, przed rozpoczęciem projektu o zachowaniach interfejsu na różnych nośnikach nie wystarczy. Tu szczegółowe testowanie serwisu na różnych nośnikach decyduje o jakości wdrożenia, a bliska współpraca między Wami jest absolutnie kluczowa.

SZCZEGÓŁY

  1. Czy istnieją wyraźne i jasne powody dla realizacji dedykowanego mobilnego serwisu? Jeśli planujesz złożone funkcjonalności, których użycie na nośnikach mobilnych mogłoby być kłopotliwe, najprawdopodobniej z RWD nie będzie Ci po drodze.
  2. Czy masz w zespole osobę gotową do podjęcia odpowiedzialności i zarządzania contentem na wielu wersjach serwisu (w przypadku wyboru dedykowanej strony mobilnej), czy też nie dysponujesz zespołem, który mógłby pilnować spójności i aktualizacji, zatem możliwe jest jedynie utrzymywanie jednego serwisu (wówczas lepiej wybrać RWD)?
  3. Czy twórcy serwisu są w stanie wykonywać należycie pracę opisaną w punkcie wyżej?
  4. Czy Twój serwis posiada coś, co może być dostarczane wyłącznie dzięki możliwościom smartphone’ów, czy też content i funkcjonalności są na tyle uniwersalne, że nie wymagają zastosowania natywnych możliwości urządzeń mobilnych?

 

II. Przeanalizuj potrzeby mobilnych Internautów

Mobile Web Designer Kristofer Layon w oparciu o piramidę potrzeb ludzkich Maslowa (Maslow’s hierarchy of needs – Abraham Maslow, A Theory of Human Motivation, 1943) stworzył “theory of mobile motivation”.

Każdy człowiek ma swoje potrzeby, mobilny Internauta również. I zaspokaja je, zaczynając od tych najbardziej podstawowych i oczywistych, gdzie najważniejsza staje się możliwość obejrzenia serwisu na telefonie komórkowym i nawigowania pomiędzy jego podstronami (see, navigate). Zwróć uwagę, że serwisy oparte na technologii Flash tej potrzeby w pełni nie zaspokoją (na iPhonie zobacz sklep www.endo.pl). W następnej kolejności istotna będzie możliwość komfortowego zapoznania się z treścią serwisu internetowego i to najlepiej bez konieczności powiększania poszczególnych elementów layoutu (read). Wyżej w piramidzie potrzeb znajduje się możliwość interakcji z treścią, możliwość jest współdzielenia ze znajomymi (respond, share). Dalej – wydajność, szybkość ładowania danych, stabilność, płynne działanie (performance). Na samym szczycie plasują się wszystkie dobrodziejstwa i ulepszenia, które niesie ze sobą dziś np. HTML5.
O uproszczenie tej piramidy potrzeb pokusił się Brad Frost.

I tak na 4 poziomach mamy:

  • Access‚, który oznacza ni mniej ni więcej jak dostęp do informacji – wszystkich, których użytkownik potrzebuje i się spodziewa.
  • Interact’ to korzystanie z zasobów strony, nawigowanie po niej, wykonywanie akcji i wszystkie czynności, które się z tym wiążą. Ocenianie jak ta potrzeba jest zaspokajana wiąże się z analizą sposobu nawigacji, intensywności scrollowania.
  • Perform’ to nic innego jak wydajność strony. Jej waga ma wpływ na tempo ładowania się danych. Na tym poziomie wykłada się większość stron responsywnych. Z danych serwisu Blaze.io wynika, że tylko 3% stron w RWD posiada wersje na małe ekrany lżejsze od ich dużych odpowidników! To największe wyzwanie najbliższych miesięcy dla projektantów serwisów RWD – o ten aspekt należy dbać szczególnie.
  • Enhance’ oznacza możliwość zaspokajania “starych” potrzeb w nowy/ szybszy/ przyjemniejszy/ lepszy sposób niż na desktopie. Urządzenia i przeglądarki mobilne mogą więcej niż ich desktopowe odpowiedniki. Wykorzystanie ich natywnych właściwości (np. linki click-to-call, usprawnienia w wypełnianiu formularzy, wykorzystanie geolokalizacji, swipe’owanie w galeriach zdjęć) przenosi nas więc na najwyższy poziom.

…A teraz odpowiedz sobie na pytanie, który poziom potrzeb zaspokaja Twoja obecna strona internetowa? :-)

Nie tylko my zastanawiamy się nad wyborem…

Najpopularniejszym przykładem walki serwisów internetowych (dedykowany czy w RWD) szeroko komentowanym w mediach branżowych były strony kandydatów na prezydenta Stanów Zjednoczonych w roku 2012. Dla osób zainteresowanych zgłębieniem tego tematu, polecamy artykuł na Smashing Magazine.

Oficjalny serwis internetowy Baracka Obamy działa pod adresem www.barackobama.com i jest responsywny. Natomiast Mitt Romney zbudował stronę www.mittromney.com, która na urządzenia mobilne posiadała wersję dedykowaną pod adresem m.mittromney.com.

 

Kto wygrał wybory prezydenckie w Ameryce? To pytanie retoryczne. Który serwis internetowy był lepszy? Tu już odpowiedź nie jest już taka oczywista. Bitwa serwisów Obamy vs. Romneya to tylko i wyłącznie doskonały przykład, który pokazuje, jak ważne jest zadawanie sobie pytań o cele i potrzeby. Kto odwiedza strony kandydatów na prezydentów? Czego dokładnie na nich poszukuje? Jakie akcje będzie chciał wykonać, gdy będzie korzystał z niej na telefonie komórkowym? Właśnie – czy będzie chciał podjąć jakiekolwiek akcje (‚looking for action’ u Obamy) czy będzie tylko poszukiwał informacji (‚looking for information’ u Romneya)?

Konkluzja

Nie chcąc Ciebie pozostawić bez końcowego konkretu – zmuszone jesteśmy pokusić się o pewną generalizację, aby podpowiedzieć, które rozwiązanie powinieneś wybrać. Jak w każdym przypadku, nie jest ona złotym rozwiązaniem, ale nadaje pewien nadrzędny ton podejmowania decyzji (na przykład o tym, jakiego wykonawcy szukać).

W przypadku, gdy potrzebny jest Ci złożony serwis, zaspokajający bardzo specyficzne potrzeby lub też serwis korzystający z natywnych własności telefonu – wybierz dedykowaną stronę mobilną. Podobnie rzecz się ma w sytuacji, gdy masz już dobrze działający, świeży i spełniający oczekiwania serwis www i potrzebujesz mobilnej prezencji – wówczas kalkulacja czasu i kosztów może Cię doprowadzić do decyzji budowania dedykowanej strony mobilnej.

W każdym innym przypadku, szczególnie jeśli budujesz swój serwis od nowa lub w ogóle startujesz nowy projekt – rekomendujemy serwis zgodnie z Responsive Web Design. Wszystkie znaki na niebie i ziemi wskazują bowiem, że “going responsive” znaczy “going smart”. 

Źródło obrazka z miniaturki wpisu.

Masz chwilę? Przeczytaj jeszcze:

jestem.mobi

Zamknij

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close