Lekcja 8: W jakiej technologii stworzyć stronę na urządzenia mobilne, czyli jakie są różnice pomiędzy stroną mobilną a responsywną??

Lekcja wideo (4 min 57 sekund)

Podsumowanie

Tworząc stronę, która ma dobrze wyglądać na urządzeniach mobilnych, mamy dwa podstawowe podejścia:

  • stronę mobilną,
  • stronę responsywną.

Strona mobilna jest osobną wersją strony www, która często dostępna jest pod innym adresem. Dzięki takiemu podejściu może zawierać zupełnie inną treść i spełniać inne funkcje niż strona dla komputerów. Wadą takiego rozwiązania jest konieczność utrzymywania dwóch wersji strony, co oznacza większe koszty.

Strona responsywna oznacza jedną stronę zawierającą tę samą treść dla komputerów i urządzeń przenośnych, różniącą się tylko sposobem prezentacji. Wybór wyglądu strony dokonywany jest przez przeglądarkę internetową na urządzeniu, w oparciu o pliki stylów.

Zaletą strony responsywnej jest dużo mniejszy koszt wytworzenia. Rozwiązanie to doskonale sprawdza się w przypadku stron, które mają wyświetlać treść np. blogi lub strony z wiadomościami.

Transkrypcja

Witaj w 8 lekcji kursu Mobile Academy. Nazywam się Sylwester Madej. Dzisiaj porozmawiamy o technologiach tworzenia stron mobilnych.

Pierwszą rzeczą, na którą sobie warto odpowiedzieć, to dlaczego nie możemy po prostu skorzystać z istniejącej strony? Otóż okazuje się, że strony, które były tworzone z myślą o komputerach, nie wyglądają dobrze i tak naprawdę są trudne w użytkowaniu. Poza tym okazuje się także, że część ludzi ma zupełnie inne cele, jeżeli korzystają ze strony na komputerze a inne cele, jeżeli korzystają na urządzeniu mobilnym. Tak, więc w jakiś sposób należy dostosować tą stronę tak, aby ona wyglądała lepiej na urządzeniu mobilnym. Istnieją tak naprawdę dwa podejścia, tu już nie będziemy mówili o konkretnych technologiach, tylko bardziej o podejściach do tego, jak właśnie przystosowywać strony dla użytkowników.

Dedykowana strona mobilna

  • Sposób realizacji

    Po pierwsze, mamy dedykowaną stronę mobilną, którą tworzymy z myślą właśnie o urządzeniach mobilnych. I tutaj mamy jeden podstawowy problem wynikający z tego faktu, ponieważ to oznacza, że musimy tworzyć tak naprawdę dwie strony. Z jednej strony stronę przygotowaną dla urządzeń typu desktop lub laptop, a z drugiej strony stronę dla urządzeń mobilnych. Najczęściej realizowane jest to w ten sposób, że strona dla urządzeń mobilnych jest wystawiona na innym adresie internetowym. Najczęściej jest to taki sam adres, jak na przykład mamy facebook.com, z przedrostkiem m- lub mobi- po to, żeby wiadomo było, że to jest akurat strona przeznaczona dla takich urządzeń. Dodatkowo w momencie, kiedy wchodzimy na taką stronę, komputer, z którym się łączymy rozpoznaje, czy jesteśmy na urządzeniu desktopowym czy na urządzeniu mobilnym i przekierowuje nas na odpowiednią stronę. Tak, więc mamy dwie wersje strony.

  • Założenia

    I teraz tworząc stronę z myślą o urządzeniu mobilnym, możemy przyjąć kilka założeń. To znaczy możemy przyjąć, że tworzymy dane specjalnie dla użytkownika mobilnego, wyświetlamy mu zupełnie inną stronę. Przykładowo w przypadku Facebooka mamy stronę, która wygląda zupełnie jak aplikacja mobilna.

  • Możliwości

    I dzięki temu, że mamy zupełnie inną stronę, pod innym adresem, możemy ją zmodyfikować tak, żeby ona wyglądała i działała inaczej, udostępniała użytkownikowi inne dane w inny sposób. Jednak ma to jedną podstawową wadę. Ze względu na to, że mamy dwie wersje strony, tak naprawdę musimy utrzymywać dwa projekty i jakiekolwiek zmiany w jednej wersji strony muszą zostać przeniesione do drugiej wersji strony, co wymaga tak naprawdę podwójnej pracy. Dlatego pojawiło się rozwiązanie, które nazywa się stroną responsywną.

Strona responsywna (RWD)

  • Sposób realizacji

    Strona responsywna to podejście, w którym mamy wspólne dane, czyli wyświetlamy tak naprawdę to samo, tylko wyświetlamy w inny sposób. Wchodzimy na określony adres, dostajemy tak naprawdę kod strony i w zależności od tego, na jakim urządzeniu jest ona wyświetlana, będzie wyglądała nieco inaczej. I w tym przypadku mamy po pierwsze, najważniejszą zaletę taką, że tworzymy jedną stronę, tylko tworzymy dwa wyglądy dla niej, a po drugie, mamy tak naprawdę możliwość przygotowywania treści raz i wyświetlania w zależności od urządzenia.

  • Założenia

    Dzięki temu mamy dużo mniejsze koszty, jednak okazuje się, że wtedy nie możemy zmodyfikować zupełnie takiej strony, jej zawartości, możemy tylko ukrywać pewne elementy i modyfikować ich wygląd.

  • Możliwości

    Tak, więc mniejsze możliwości, dużo mniejszy koszt i w przypadku stron, które opierają się o treści typu właśnie gazety, różnego rodzaju blogi, jak najbardziej strona responsywna jest dobrym podejściem. W przypadku stron, które potrzebują zupełnie innego podejścia dla użytkowników mobilnych, ponieważ przykładowo w przypadku banków, jeżeli użytkownik wchodzi na stronę banku, to chce widzieć inne rzeczy, niż jeżeli wchodzi na tą samą stronę banku z urządzenia mobilnego, bo wtedy prawdopodobnie chce zobaczyć albo gdzie są najbliższe oddziały, albo sprawdzić sobie stan swojego konta lub wykonać przelew.

Którą opcję wybrać?

Tak, więc mamy tutaj dwie filozofie, które w zależności od tego, czy chcemy mieć tańszą wersję wyświetlającą ten sam kontent w inny sposób lub stronę, którą musimy utrzymywać, jako drugą niezależną stronę, ale z dużo większymi możliwościami.


### W następnej lekcji Tak, więc to są podejścia do stron mobilnych i w kolejnej lekcji zastanowimy się już nieco inaczej, zastanowimy się nie nad częścią techniczną, ale znowu wrócimy do tego, jak tak naprawdę zrobić badanie konkurencji, żeby sprawdzić, czy nasz produkt ma sens i z kim będziemy musieli konkurować, i co to nam daje. Tak, więc do zobaczenia w kolejnej lekcji. Jak zwykle w razie jakichkolwiek pytań możesz się ze mną skontaktować pisząc na sylwester@byoutline.com lub korzystając z innych kanałów komunikacji. Do zobaczenia.

Dodatkowe materiały

Prezentacja z lekcji nr 8
Prezentacja w formacie PDF.

Dedykowana strona mobilna vs. Responsive Web Design
Nieco stary, ale nadal aktualny, artykuł przedstawiający oba podejścia.

M.dot vs. Responsive vs. Adaptive: What’s the Right Solution for your Company? (ENG)
Porównanie strony mobilnej, RWD oraz nowego podejścia AWD (Adaptive Web Design).

Zadanie do wykonania

Zastanów się, która z technologii lepiej pasuje do Twojego produktu.

Odpowiedz na pytania:

  1. Czy możesz sobie pozwolić na utrzymywanie dwóch wersji strony?
  2. Czy zachowania i oczekiwania odwiedzających stronę na urządzeniach mobilnych są znacząco inne?
  3. Czy strona może korzystać z możliwości oferowanych przez przeglądarki mobilne np. pobieranie lokalizacji?
  4. Czy celem strony jest głównie serwowanie treści użytkownikom np. artykułów?