Tworząc stronę, która ma dobrze wyglądać na urządzeniach mobilnych, mamy dwa podstawowe podejścia:
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.
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.
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.
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.
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 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.
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.
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.
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.
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).