Pobierz najnowsze wydanie Choice

Czym jest Choice?

Eksoc Online Choice to czasopismo internetowe wydawane przez 3 koła naukowe z Wydziału Ekonomiczno-Socjologicznego UŁ: Advisor, Equilibrium i IM-Tech. Magazyn zawiera artykuły dotyczące finansów i podatków, IT i technologii, modelowania w ekonomii oraz ciekawostki z życia studenckiego. Ty też możesz umieścić swój artykuł!


Mobilność w każdym calu

Data: 16 kwietnia, 2014 | Kategoria: Dział ogólny | Tagi: , , , ,

Cyfrowa rewolucja dosięga już powoli każdego człowieka. Ponad 10% ruchu w Interncie pochodzi z urządzeń mobilnych. Coraz częściej użytkownicy poszukują informacji w biegu, korzystając z Internetu na smartfonach i tabletach. Projektanci stron internetowych dostrzegli ten trend i stwierdzili, że muszą dostosować się do zmieniających się potrzeb. Dlatego coraz częściej można spotkać w internecie responsywne strony internetowe, które dostosowują się do rodzaju urządzenia i wielkości ekranu.

Postępujący ruch mobilny
Od kilku lat nieustannie rośnie liczba urządzeń mobilnych, co ma spore znaczenie dla projektantów stron internetowych. Na urządzeniach przenośnych, które mają mniejsze ekrany, tradycyjne witryny internetowe nie będąc do nich dostosowane, często wyświetlają się nieprawidłowo. Chcąc zaprojektować stronę, która jest dostępna również na urządzeniach mobilnych można skorzystać z dwóch, a nawet trzech podejść (jeśli weźmiemy pod uwagę również aplikacje instalowane na platformach mobilnych). Pierwszym rozwiązaniem jest dedykowana wersja mobilna, która jest oddzielona od tradycyjnej witryny. Odmienną strategią jest stworzenie responsywnej strony internetowej, która dostosowuje się do ekranu urządzenia.

“Inteligentne” strony

Responsive Web Design to podejście w tworzeniu stron internetowych, które pozwala na dostosowanie się witryny do rozdzielczości okna przeglądarki w celu zapewnienia większej użyteczności i optymalnej jakości wyświetlanych elementów. Ten nowy trend w projektowaniu stron internetowych jest coraz częściej widoczny w Internecie. Można spotkać coraz więcej witryn opartych na tym rozwiązaniu, szczególnie wizytówek firmowych i blogów.

Dlaczego budowane są strony responsywne?

Ponieważ jest potrzeba i są możliwości. Możliwości te daje CSS3, który odpowiada za formatowanie elementów na stronie, a potrzeba jest widoczna gołym okiem. Na świecie używa się coraz więcej smartfonów i tabletów, a ich liczba cały czas rośnie. Ponadto ludzie coraz częściej surfują po Internecie w biegu i przeglądają strony internetowe właśnie na urządzeniach mobilnych.

Strona responsywna to wygodne rozwiązanie dla twórców stron, gdyż layout i treść przygotowują tylko raz. Witryna, w zależności od środowiska, na jakim jest uruchamiana, dostosowuje swój wygląd i ładuje treść. To inteligentne dopasowywanie możliwe jest dzięki CSS3 Media Queries, które pozwala na rozpoznawanie urządzenia, wielkości i rozdzielczości ekranu oraz jego aktualnego położenia. Przy wykorzystaniu Media Queries można wczytać odpowiedni dokument ze stylami CSS w zależności od podanych atrybutów. Podczas dostosowywania wyglądu możliwe jest ukrycie lub pokazanie niektórych elementów, co ma spore znaczenie w przypadku urządzeń mobilnych, gdzie nie ma miejsca na dodatkowe elementy, które mogą pojawić się na monitorze komputera o większej rozdzielczości.
Wygoda jest również po stronie użytkownika, który otrzymuje stronę odpowiednio dostosowaną do urządzenia, na którym jest wyświetlana. Niezależnie od tego, czy jest to telefon komórkowy, smartfon, tablet, laptop, komputer osobisty czy też telewizor, internauta będzie miał możliwość obejrzenia wciąż tej samej strony. Użytkownik oglądając stronę responsywną na urządzeniu, które może zmienić orientację (z pionowej na poziomą lub odwrotnie), będzie miał wygląd strony dopasowany do szerokości ekranu, co wpłynie na jej użyteczność. Zadowolenie osoby wyświetlającej dobrze zaprojektowaną witrynę przełoży się zatem na inne czynniki: powracalność, wiekszą konwersję, lepsze user experience.

RWD czy AWD?

Omawiając Responsive Web Design mamy na myśli elastyczne podejście, dzięki któremu w płynny sposób wygląd jest dostosowywany do wielkości ekranu. Bardzo podobnym rozwiązaniem jest Adaptive Web Design, w którym zmiana wyglądu zależy od wielkości okna przeglądarki , lecz w przeciwieństwie do RWD dokonywana jest w sposób skokowy. Taki layout może mieć zdefiniowane konkretne wersje, w zależności od rozdzielczości np. 320px (jednokolumnowy układ treści dla smartfonów), 720px (dwukolumnowy układ dla tabletów) i 1024px (trzykolumnowy układ dla pozostałych urządzeń), zaś ten wykonany w podejściu RWD będzie dostosowywał się płynnie w przypadku zmiany wielkości okna przeglądarki (elementy będą zmieniały swoją wielkość, obrazki zachowają się elastycznie). AWD skupia się raczej na kontekście użycia, nie zaś na rozdzielczości ekranu, dzięki czemu budowane jest pozytywne doświadczenie użytkownika, który korzysta z danego urządzenia. Aby sprawdzić, czy dana strona jest responsywna, nie potrzeba urządzenia mobilnego. Wystarczy zmienić wielkość okna przeglądarki na swoim pececie i zobaczyć, jak zachowuje się strona. Jeśli jej poszczególne elementy zmieniają wielkość, przesuwają się i przyjmują inną formę wraz ze zmniejszaniem okna, oznacza to, że witryna jest wykonana zgodnie z podejściem Responsive Web Design i dostosowana również do urządzeń mobilnych.

Mobile First!

Mobile First to strategia opierająca się na projektowaniu serwisu internetowego z uwzględnieniem na samym początku wersji dla
urządzeń mobilnych. Dzięki takiemu rozwiązaniu tworzona jest strona, która dostosowana jest do urządzeń o najmniejszej rozdzielczości ekranu. Ponadto taka wersja witryny dla telefonów zawiera podstawowe elementy, które muszą zostać wyświetlone. Wraz z procesem projektowania dołączane są kolejne moduły i elementy, dzięki czemu powstają layouty dla tabletów i komputerów. Projektowanie interfejsów warto zacząć od uwzględnienia najmniejszych ekranów, gdyż cały proces jest szybszy i tańszy, a zarazem dostosowany do rozwoju technologii i całego mobilnego ekosystemu. Nie oznacza to, że należy zignorować wersję desktopową, lecz nadać priorytet wersji mobilnej strony. Powiązaną koncepcją jest Progressive Enhancement, która mówi o wzbogacaniu layoutu w miarę możliwości urządzenia i technologii obsługiwanych przez przeglądarkę (m.in. HTML5 i CSS3). Cała gama
poszczególnych wersji serwisu internetowego tworzona przy zachowaniu zasady Mobile First pozwala na odpowiednią prezentację treści i poprawę jakości obsługi strony w zależności od urządzenia, w szczególności sprawia, że strona jest przyjazna dla smartfonów i innych urządzeń dotykowych, które podbijają rynek.

Dedykowane rozwiązanie

W przypadku dedykowanej strony mobilnej użytkownik korzystający z urządzenia przenośnego przekierowywany jest na wersję mobilną, która jest dostępna pod innym adresem (najczęściej w subdomenie m, lajt i mobile lub rzadziej na osobnej domenie). Dedykowana wersja mobilna strony działa równolegle do pełnej wersji witryny i może zawierać zupełnie inne treści, a także być przystosowana m.in. do wyświetlania na telefonach komórkowych. Organizacja posiadająca taką stronę może zastosować zupełnie inną strategię marketingową. Poza tym strona mobilna jest najczęściej uboga w grafikę i nie zawiera animacji, które mogą się znaleźć w pełnej wersji serwisu. Ma to wpływ na kieszenie użytkowników, którzy nie muszą się martwić o zakup drogich pakietów internetowych. Dedykowana wersja mobilna strony nie sprawia użytkownikowi żadnego kłopotu podczas korzystania i poszukiwania potrzebnych informacji na urządzeniu mobilnym lub nawet na ekranie komputera, lecz aby skorzystać z pełnej wersji serwisu, wymagane jest przełączenie się na tradycyjną stronę. Z punktu widzenia twórcy strony, koszt utrzymania dodatkowej wersji mobilnej może być w perspektywie czasu wyższy, niż wybór konkurencyjnego rozwiązania, jakim jest Responsive Web Design.

Strona mobilna czy responsywna?

Strona responsywna, w przeciwieństwie do stron dedykowanych, dostępna jest pod jednym adresem URL i posiada taką samą strukturę kodu HTML na każdym urządzeniu. Natomiast dwie wersje strony to dwa osobne adresy witryny WWW, co może być kłopotliwe do zapamiętania. Ponadto ze względu na rygorystyczne indeksowanie treści przez wyszukiwarki internetowe, muszą być one poddawane dodatkowym działaniom SEO, które pozwolą zapobiec duplikowaniu treści. Nawet Google rekomenduje tworzenie stron responsywnych, tłumacząc, że oddzielenie warstwy prezentacji od publikacji na stronach internetowych tworzy w większym stopniu sieć semantyczną.
Jest kilka zalet stron tworzonych w podejściu Responsive Web Design. Po pierwsze są to niższe koszty utrzymania takiego serwisu i ewentualnej aktualizacji. Łatwiej również zachować spójność komunikacji marketingowej budując stronę responsywną. Poza tym użytkownik ma pewność, że strona będzie się poprawnie renderować w każdej rozdzielczości, niezależnie od urządzenia. Korzystanie z zasad RWD poprawia użyteczność witryny, użytkownikom ułatwia czytanie i nawigację na różnych urządzeniach.

Obama jedną ma

Ciekawym i dość często powtarzanym przykładem przy omawianiu zagadnienia stron responsywnych jest kampania prezydencka Baracka Obamy i Mitta Romneya. Tuż przed wyborami prezydenckimi w USA w 2012 roku porównywano obu kandydatów na wielu płaszczyznach – uwzględniono również ich strony internetowe. Witryna Baracka Obamy zbudowana jest w oparciu o podejście Responsive Web Design i dostosowuje się do urządzenia. Jego kontrkandydat, Mitt Romney, w takcie kampanii miał dwie wersje strony – tradycyjną i dedykowaną mobilną. Jak ta walka się skończyła, wszyscy wiedzą. Czy to oznacza, że strony responsywne są lepsze?
Nie wszędzie można zastosować nowe podejście. RWD nie nadaje się w przypadku stron, które muszą zawierać zupełnie inną treść wyświetlaną na desktopie a inną na urządzeniu mobilnym. Często dzieje sie tak w przypadku sklepów internetowych, czy aplikacji internetowych (np. Facebook, YouTube, Dropbox), które muszą zawierać zupełnie inne funkcjonalności, a przeniesienie ich na urządzenia  dotykowe w niezmienionej formie jest kłopotliwe. Rozsądne wydaje się wtedy stworzenie dwóch osobnych serwisów, odpowiednio dostosowanych do urządzenia.

Kiedy aplikacja?

W przypadku serwisów, które odwiedzane są przez użytkowników bardzo często można spotkać, oprócz tradycyjnych stron internetowych, również aplikacje mobilne. Najczęściej są to aplikacje serwisów oferujących konkretne funkcjonalności, gdzie użytkownik musi mieć szybki dostęp do różnych opcji bez konieczności uruchamiania przeglądarki, logowania się czy podawania dodatkowych danych. Wymienić tutaj można serwisy społecznościowe, aplikacje wykorzystujące multimedia, strony wymagające dodatkowego zabezpieczenia (np. serwisy transakcyjne banków), a także aplikacje posiadające nietypowe funkcje wykorzystujące dobrodziejstwa urządzenia mobilnego, takie jak moduł GPS, aparat i gesty (np. Mapy Google, Instagram). Stworzenie aplikacji mobilnej wiąże się niestety z wysokimi kosztami dla twórcy. Zarówno samo zbudowanie aplikacji, jak i jej utrzymanie może być kłopotliwe, ponieważ aby aplikacja była dostępna dla większości posiadaczy smartfonów, musi być przygotowana na najpopularniejsze platformy mobilne: Android, system iOS oraz Windows Phone. Choć aplikacja mobilna, to wygodne rozwiązanie dla użytkowników, to decydują się na nie jedynie najwięksi gracze na rynku. Poza tym aplikacja mobilna nie musi być do końca traktowana jako substytut tradycyjnej strony internetowej. W niektórych przypadkach te dwa kanały mogą się wzajemnie uzupełniać.

Mobilna przyszłość

Rynek rozwiązań mobilnych wciąż się rozwija. Według prognoz firmy Cisco, w 2016 roku ma być więcej urządzeń mobilnych, niż ludzi na świecie. Następuje więc zmiana zachowania i stylu życia. Ludzie coraz częściej korzystają z Internetu w biegu, sprawdzając informacje na smartfonach i innych urządzeniach przenośnych.
Strony internetowe muszą więc być dostosowywane do potrzeb użytkowników, którzy chcą mieć swobodny dostęp do informacji w każdym momencie. Podejście Responsive Web Design umożliwia zbudowanie tylko raz witryny, która będzie dostępna (a jednocześnie użyteczna), na każdym urządzeniu, niezależnie od tego, czy jest to telefon, tablet czy notebook. RWD umożliwia stworzenie rozwiązania dla ekranów, które dzisiaj mogą być nawet jeszcze niedostępne, m.in. przeglądanie stron na telewizorach o wysokiej rozdzielczości. Poza tym strony responsywne są bardziej przyjazne dla bardziej wymagających użytkowników. Mashable, znany serwis internetowy zajmujący się tematyką  nowych technologii, ogłosił rok 2013 rokiem Responsive Web Design, więc można mieć nadzieję na strony WWW lepiej dostosowane do wszelakich urządzeń i jednoczesne zwiększenie świadomości użytkowników w temacie usług mobilnych.
Niestety nie w każdym przypadku strona responsywna będzie najlepszym rozwiązaniem, dlatego też będziemy mogli korzystać zarówno z dedykowanych wersji mobilnych, stron responsywnych, jak i aplikacji. Niemniej jednak widoczny jest wpływ rosnącego wykorzystania urządzeń mobilnych, które są coraz tańsze i coraz lepsze. Dodatkowo zmiany w technologiach i metodach tworzenia stron internetowych dają nadzieję na nieograniczony dostęp do informacji w dowolnym miejscu na Ziemi.

Piotr Mijas

SKN IM-Tech