Mobilna wersja strony


smartpfone

Po co strona mobilna?

 Tworzenie strony przystosowanej do wyświetlania na urządzeniach mobilnych, nie jest już tylko ciekawostką dla nielicznych odbiorców, ale koniecznością wobec stale rosnącej liczby użytkowników smartfonów, ipodów, tabletów i innych mobilnych urządzeń.

 Nowoczesne telefony standardowo mają zainstalowane przeglądarki internetowe. Ich użytkownicy coraz częściej mogą korzystać z taniego dostępu do Internetu, dlatego liczba mobilnych internautów rośnie w nieprawdopodobnym stopniu. Telefon ma już statystycznie co trzecia osoba na świecie, nie każdy jest jeszcze przystosowany do przeglądania zwykłych stron internetowych, ale to się wkrótce zmieni. Analitycy rynku usług internetowych oceniają, że przyszłość Internetu należy właśnie do urządzeń mobilnych.


Ewolucja systemów dla mobilnego Internetu

 Telefon komórkowy w krótkim czasie zmieniał się w urządzenie wielofunkcyjne. Opcja dostępu do Internetu, była bardzo pożądanym gadżetem. Korzystanie z sieci przez komórkę wiązało się z wieloma ograniczeniami: niski transfer, mały ekran oraz brak klawiatury QWERTY. W telefonie można było przeglądać tylko strony specjalnie dostosowane do tych urządzeń. Opracowany został specjalny standard WAP, który był bardzo uproszczoną wersją HTMLu. Dokumenty w języku WML dopuszczały tylko najprostsze znaczniki dla tryby tekstowego. Strony WAP posiadały tylko duże serwisy, a użytkownicy telefonów mieli bardzo ograniczony dostęp do zasobów Internetu.

 Sytuacja zmieniała się w miarę rozwoju technologii, pojawiły się nowe systemu EDGE, UMTS, na rynku pojawił się Iphone i smartphone. W nowoczesnych telefonach można już przeglądać zwykłe strony internetowe, a telefony poprzedniej generacji nazywa się już złośliwie "dumphone". Duże firmy jak Apple, Microsoft i Google wprowadziły swoje platformy dla urządzeń mobilnych jak Windows Mobile, Symbian i Android. Strony wyświetlane na ekranie telefonu coraz mniej różnią się od tych oglądanych na komputerze stacjonarnym.

 Pomimo rozwoju technologii mobilnych nie da się całkiem poprawnie przetwarzać stron tworzonych pod tradycyjne komputery. Największe problemy stwarza różnica miedzy wielkością ekranu mobilnego a tradycyjnego monitora. System mobilny może nieprawidłowo wyświetlać układ strony oparty o tabelki lub zbyt rozbudowane style kaskadowe. Utrudniona może być nawigacja wewnątrz dokumentu. Czynniki te decydują, że użytkownik smartfona może się zniechęcić do niektórych stron, zbyt przeładowanych treścią i źle zoptymalizowaną grafiką.


Dostosowanie strony dla użytkowników mobilnych

 Ponieważ mobilni użytkownicy Internetu stanowią już znaczącą liczbę wszystkich odwiedzających, trzeba zadbać o to aby nasza strona była zoptymalizowana specjalnie dla tej grupy klientów.

 Sposobów dostosowania strony dla użytkownika mobilnego jest kilka. Najprościej jest dostosować sam wygląd strony aby był prawidłowo wyświetlany na małym ekranie smartfona. Wystarczy stworzyć dodatkowa wersję arkusza stylów kaskadowych, w którym układ strony będzie pasował do ekranu wielkości 200x250 lub nieco więcej. Wywołanie odpowiedniego arkusza stylów nastąpi po rozpoznaniu rozdzielczości ekranu klienta lub nagłówku user-agenta.

<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" />

 Sposób dopasowanie wyglądu przez podmianę arkusza stylów jest powszechnie stosowany, jednak wygląd to nie wszystko, strona nadal nie jest zoptymalizowana, zbyt długo się ładuje i jest przepełniona niepotrzebną treścią trudną do oglądanie na małym ekranie.



Strona responsywna

Strona responsywna to taka, która automatycznie dostosowuje się do każdej rozdzielczości ekranu i na każdym urządzeniu wygląda prawidłowo.

Zalety takiej strony są oczywiste, jest jeden adres URL bez względu, czy wyświetlana jest na smartfonie czy na dużym monitorze. Nie ma konieczności aktualizowania dwóch stron: mobilnej i tradycyjnej.

Technicznie wykonanie takiej strony jest dużo trudniejsze, przed jej załadowaniem przeglądarka musi wybrać właściwy arkusz stylów i skryptów dla danej rozdzielczości. Strona responsywna zawiera dużo więcej kodu, czyli się wolniej ładuje. Po mimo starań webmastera strona nadal może nieprawidłowo się wyświetlać dla niektórych urządzeń i przeglądarek.

Kod który dopasowuje wyglad strony do urzadzenia odbiorczego może być błednie rozpoznany przez Google jako Cloaking i strona może mieć słabą pozycję w wyszukiwarce.


Mobilna wersja strony

 Najlepszym rozwiązaniem jest stworzenie osobnej wersji specjalnie dla smatfonów, tabletów i podobnych urządzeń mobilnych. Tworząc stronę od nowa, można wszystko dopasować tak aby była przejrzysta, łatwa w nawigacji i szybko się ładowała.

 Skoro nowa strona, to powinna mieć nowy adres. Nie jest dobrym zwyczajem tworzenia jej w podkatalogu domeny głównej, ma zbyt długi adres, trudno go wpisywać ręcznie.

 Lepiej wybrać osobna domenę lub utworzyć w obecnej nową subdomenę. W Polsce częściej stosuje się to drugie rozwiązanie, subdomena nic nie kosztuje, a najłatwiej do niej przekierować użytkowinków mobilnych. Niema ustalonych norm odnoście nazewnictwa takiej subdomeny. Najczęściej stosuje się jedną literę "m"" lub "mobile". Np. m.nazwadomeny.pl lub mobile.nazwadomeny.pl

 Zanim utworzymy stronę trzeba zaplanować jej wygląd tak aby architektura strony była dostosowana do wygodnej nawigacji w telefonie z klawiszami oraz z ekranem dotykowym.

 Standardowy układ to kolejno od góry: tytuł, przyciski do nawigacji, treść strony, nawigacja i stopka. Belka dolnej nawigacji powinna zawierać odnośnik do strony głównej i poprzedniej strony, jest to zalecana aby ułatwić nawigację w telefonach bez ekranu dotykowego.

  • Układ nawigacji powinien być przejrzysty i uproszczony do kilku podstawowych poziomów. Odsyłacze powinny zawierać atrybut accesskey="1" gdzie kolejna numerki odpowiadają klawiszom na telefonie.
  • Treść strony powinna zawierać tylko najistotniejszą część tego co jest na witrynie głównej. Wielkość całego dokumentu nie powinna przekraczać 10kB
  • Grafika powinna być zoptymalizowana i pomniejszona do wymiarów nie przekraczających 120px. Obrazki powinny zawierać atrybut alt z tekstem zastępczym opisującym obrazek. Zalecane jest podanie atrybutów width oraz height obrazka, gdyż przyśpiesza to renderowanie strony.
  • Należy unikać JavaScript gdyż może być nieprawidłowo wyświetlany na niektórych urządzeniach.
  • Nie wolno stosować ramek
  • Należy unikać stosowania tabel oraz budowy układu strony na układzie tabeli. Zamiast tego należy stosować styla kaskadowe.
  • W sekcji nagłówkowej musi być określona wersja kodowania znaków. Dla stron mobilnych zaleca się unicode UTF-8 lub ISO-8859-2
  • Kod strony powinien być zgodny ze standardami W3C i MWI. Dokument XHTML musi zaczynać się od deklaracji języka znaczników DOCTYPE. Na witrynach mobilnych można stosować dwie odmiany XHTML - Basic oraz Mobile.

Basic

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Mobile

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Obecnie nie ma potrzeby automatycznego przekierowywania użytkownika na stronę mobilną. Wystarczy na stronie głównej wstawić odsyłacz do mobilnej. Wyszukiwarka Google rozpoznaje strony zoptymalizowane dla urządzeń mobilnych. Jeśli użytkownik korzysta ze smartfona lub tableta to w wynikach wyszukiwania takie strony maja wyższą pozycje, czyli strona mobilna pokaże się przed stroną tradycyjną.

Trzeba tylko pamiętać, aby nie kopiować tekstów na obu wersjach strony. Google nie indeksuje duplikatów, strona mobilna, która jest kopią nie będzie w ogóle indeksowana.


Testowanie strony mobilnej

 Projektując stronę dobrze jest wiedzieć jak będzie wyglądała na ekranie użytkownika. Nawet jak sprawdzamy na bieżąco na własnym smartfonie to wcale nie ma pewności, że na innych urządzeniach będzie wyglądać podobnie. Mnogość urządzeń mobilnych i różnorodność systemów operacyjnych stawia przed twórcami spore wyzwania. Aby uniknąć niespodzianek warto dodatkowo skorzystać z emulatorów różnych telefonów.

 Prosty podgląd możemy przygotować sami, umieszczając naszą stronę w ramce. Już w takim widoku można zauważyć obcinanie fragmentów strony lub grafiki.

<iframe src ="adresstronymobilnej.html" width="240" height="320" style="border: 1px solid;"> </iframe>

 Aby lepiej przetestować stronę trzeba zainstalować bezpłatną wersję przeglądarki mini Opera lub poszukać w Internecie emulatorów online różnych urządzeń.

 Informacje o błędach i niezgodności ze standardem można wykryć korzystając z bezpłatnego walidarora na stronie: http://ready.mobi

 Po wpisaniu adresu testowanej strony, rozpoczyna się jej testowanie pod względem zgodności z W3C i optymalizacją poszczególnych składników witryny.



Strona mobilna z wykorzystaniem jQuery Mobile

 Zrobienie ładnej i przejrzystej strony prawidłowo wyświetlanej na różnych urządzeniach może być trudne. Dużym ułatwieniem dla projektantów jest możliwość skorzystania z gotowych bibliotek: jQuery Mobile. Używanie zewnętrznych arkuszy stylów bardzo upraszcza kodowanie strony. Ładna wersję strony mobilnej można utworzyć w krótkim czasie i mieć pewność, że jest kompatybilna z większością urządzeń.

 Poniżej zamieszczony jest gotowy kod strony składającej się z dwóch kart. Jest to tylko przykład jak łatwo można tworzyć ładne serwisy pod iPhone'a i Androida.


< !DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-2" />
<title>Modilna wersja strony</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>

<body>

<div data-role="page" id="strona1">

<header data-role="header" class="ui-bar-a ui-header">
<h1 role="heading" class="ui-title">Tytuł pierwszej strony</h1>

<nav>
<ul>
<li><a href="#strona1" data-role="button" data-icon="home">Pierwsza strona</a></li>
<li><a href="#strona2" data-role="button" data-icon="star">Druga strona</a></li>
</ul>
</nav>
</header>

<div data-role="content">
<p>To jest tekst widoczny na drugiej stronie<br />
Strona została zbudowana z wykorzystaniem biblioteki jQuery Mobile</p>

</div>

<footer data-role="footer">
<h4>Stopka</h4>
<p align="right">copyright <a href="http://szablony.freeware.info.pl/" rel="external">szablony</a> </p>
</footer>
</div>


<div data-role="page" id="strona2">

<header data-role="header" class="ui-bar-a ui-header">
<h1 role="heading" class="ui-title">Tytuł drugiej strony</h1>

<nav>
<ul>
<li><a href="#strona1" data-role="button" data-icon="home">Pierwsza strona</a></li>
<li><a href="#strona2" data-role="button" data-icon="star">Druga strona</a></li>
</ul>
</nav>
</header>

<div data-role="content">
<ul class="ui-listview" data-role="listview" role="listbox">
<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" data-theme="c">
<div class="ui-btn-inner">
<div class="ui-btn-text">
<h3 class="ul-li-heading">Pierwsza pozycja</h3>
<p class="ul-li-desc">Opis dla pierwszej pozycji</p>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" data-theme="c">
<div class="ui-btn-inner">
<div class="ui-btn-text">
<h3 class="ul-li-heading">Druga pozycja</h3>
<p class="ul-li-desc">Opis dla drugiej pozycji</p>
</div>
<span class="ui-icon ui-icon-arrow-r"></span>
</div>
</li>
</ul>
</div>

<footer data-role="footer">
<h4>Stopka</h4>
<p align="right">copyright <a href="http://szablony.freeware.info.pl/" rel="external">szablony</a> </p>
</footer>
</div>

</body>
</html>


 W sekcji nagłówkowej, pomiędzy znacznikami <head> i </head> wywoływana jest biblioteka jQuery i dedykowane arkusze stylów dla jQuery Mobile.

 W sekcji <body> wydzielone są dwie karty, znacznik pierwszej to: <div data-role="page" id="strona1">.

 Każda karta podzielona jest na sekcje: nagłówek, zawartość i stopka oznaczone odpowiednio: header, kontent i footer.

W stosunku do tradycyjnego HTML-u widać tu nowe atrybuty znaczników:

  • data-role - do tworzenia własnych atrybutów symantycznych
  • data-icon - do wstawiania ikon w przyciskach.
  • role - do przydzielania ról w rozumieniu semantycznym

 Biblioteka iQuery odpowiada tez za pamiętanie historii, zatem wewnątrz dokumentu nawigacja jest bardzo szybka i efektowna. Trzeba tylko pamiętać, ze linkując do zewnętrznej strony należy dodać do znacznika odsyłacza atrybut rel="external"

 Biblioteka iQuery korzysta z najnowszej wersji HTML5, strony tworzone przy jej zastosowaniu ładnie prezentują się na urządzeniach mobilnych i maja wiele ciekawych efektów. Aby w pełni korzystać z jej dobrodziejstw odsyłam do oryginalnej dokumentacji w jezyku angielskim: http://jquerymobile.com/demos/1.1.0/


Brak mobilnej wersji strony

Jeśli nie dostosujemy naszej strony do urządzeń mobilnych stracimy znaczny procent wszystkich klientów. Nie tylko dlatego, że strona tradycyjna źle się prezentuje na smartfonie, ale zniknie zupełnie z wyników wyszukiwania dla użytkowników takich urządzeń.

Google już masowo ostrzega webmasterów, wysyłając im powiadomienia: "Napraw problemy z obsługą witryny na urządzeniach mobilnych". Otrzymanie takiej wiadomości na koncie webmasterskim oznacza, że nie przeszła ona testu zgodności i będzie miała bardzo niską pozycję w wyszukiwarce dla użytkowników smartfonów. Uzyskanie stanu zgodności powyżej 70 % jest praktycznie niemożliwe na tradycyjnej stronie, dlatego rozwiązaniem kompromisowym jest stworzenie lekkiej wersji serwisu, która będzie zgodna w 100% z przeglądarką na urządzeniu mobilnym i będzie w wyszukiwarkach mobilnych na wysokiej pozycji.