Tworzenie serwisów internetowych dla urządzeń mobilnych nie różni się znacznie od budowy tradycyjnych stron WWW. Dokumenty serwowane przeglądarce uruchomionej w telefonie komórkowym wciąż są plikami XHTML lub CSS. Mimo to, decydując się na uruchomienie serwisu mobilnego, należy pamiętać o szeregu reguł, których należy przestrzegać.

Prawidłowo wykonanych i popularnych witryn mobilnych w Polsce nie ma zbyt wiele. Podobnie jak i specjalistów w dziedzinie ich tworzenia. Musi się to jednak zmienić, gdyż rynek rozwija się bardzo dynamicznie, a prognozy na najbliższe lata najłatwiej można streścić w zdaniu wypowiedzianym w Polsce przez jednego z założycieli Google, Sergeya Brina: „Przyszłość należy do mobilnego internetu”.

Firmy T-Mobile i Pyramid Research szacują, że
urządzenie mobilne (najczęściej telefon komórkowy)
ma blisko jedna trzecia ludzi na świecie
- co daje ponad 2 miliardów użytkowników.
Stale rozwijane są i powstają nowe technologie,
które umożliwiają coraz szybszy przesył danych
do urządzeń mobilnych (EDGE, UMTS). Bardzo
dynamicznie zmienia się również rynek systemów
operacyjnych, a co za tym idzie – oprogramowania
dostępnego na przenośne urządzenia.

Miniony rok to olbrzymi sukces telefonu
iPhone z wbudowaną przeglądarką internetową
i szeregiem innych aplikacji, korzystających
z sieci. Do walki szykuje się także Google ze swoją
otwartą platformą Android. A nie można przecież
zapominać o obecnych liderach rynku, systemach
Windows Mobile Microsoftu i Symbianie, który
został kupiony przez Nokię i ma wkrótce zostać
otwarty.

Jako webmasterzy wcześniej czy później spotkamy
się z zadaniem stworzenia mobilnej wersji
serwisu internetowego. Dlatego warto już teraz
przyswoić sobie reguły, jakimi trzeba się kierować
w trakcie każdego etapu tworzenia i wiedzieć, na
jakie aspekty trzeba zwrócić szczególną uwagę.
Tym bardziej że nie wymaga to wcale poznawania
nowych technologii czy języków programowania.

„Mobilize, don’t miniaturize”

Chcąc poszerzyć liczbę użytkowników naszej
strony internetowej o odbiorców korzystających
z niewielkich urządzeń przenośnych (telefony,
PDA), możemy zdecydować się na dwie różne
opcje: dostosować istniejącą wersję za pomocą
dodatkowego arkusza stylów CSS lub też stworzyć
osobną, dedykowaną witrynę. Obydwa rozwiązania
mają swoje wady i zalety.

Wersja z osobnymi stylami jest o wiele prostsza
do wprowadzenia, ale także znacznie mniej funkcjonalna
i wygodna dla użytkowników. Wdrożenie
sprowadza się do przygotowania alternatywnych
defi nicji stylów dla tagów użytych na stronie oraz
dodania znacznika w sekcji {html}{/html} z odnośnikiem
do osobnego arkusza CSS:

1

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

Nie jest to operacja skomplikowana, można ją
wykonać praktycznie od ręki. Jakie są jednak wady
tego rozwiązania i dlaczego najczęściej zalecana
jest druga opcja, czyli stworzenie osobnej wersji
całego serwisu?

Przede wszystkim w bardzo małym zakresie
uwzględniona została specyfika urządzeń
mobilnych. Strony przeznaczone do odczytu na
niewielkich gabarytowo urządzeniach powinny
charakteryzować się lekkością i umiejętnym
doborem wyświetlanych informacji. Połączenia
z siecią są w większości przypadków rozliczane
na podstawie wygenerowanego transferu, a więc
liczby odebranych i wysłanych danych.
Poprzez dodatkowy arkusz stylów nie zmienimy
przesyłanej wersji XHTML, która zawiera standardowo
informacje przeznaczone dla ekranów
o rozdzielczości 1024×768 pikseli i większych.

Tworząc strony dla urządzeń mobilnych, musimy
więc mieć na uwadze przede wszystkim dwa fakty
- minimalizm przesyłanych danych (aby nie narazić
użytkownika na wysokie koszty połączenia) oraz
dobór i wyświetlenie najważniejszych informacji
(na ekranie o rozdzielczości np. 200×250 pikseli
zmieści się niewiele tekstu).

Stosując dodatkowy arkusz CSS, nie osiągniemy
tych celów. Dlatego o wiele lepszym rozwiązaniem
jest stworzenie osobnej wersji strony, mimo że początkowo
będzie to wymagało większego nakładu pracy.

No to startujemy

Zaprojektowaliśmy zgodnie z zaleceniami
witrynę mobilną, wykonaliśmy ją z dbałością
o standardy, przetestowaliśmy na różnych urządzeń
i opublikowaliśmy pod wybraną domeną
internetową – co nam pozostało? Oczywiście jej
promocja i sprawienie, by zaistniała w świadomości
użytkowników.

Niestety, do mierzenia efektów działań
marketingowych nie wykorzystamy popularnych
systemów statystyk – do śledzenia witryn mobilnych
nie są prawidłowo przystosowane ani Google
Analytics, ani Stat.pl czy inne tego typu aplikacje.

Obecnie pozostaje nam analiza logów serwera
lub też zakup licencji dedykowanych rozwiązań,
przeznaczonych do mierzenia ruchu na witrynach
mobilnych: Mobile Stats (http://mobilestats.co.uk)
albo Mobile Analytics (http://www.amethon.com/Content_Common/pg-Mobile-Analytics.seo).

Obydwa systemy oferują dosyć zbliżoną funkcjonalność,
zapewniając wszelkie potrzebne dane
analityczne: od liczby wizyt, odsłon, po geolokalizacje
czy parametry techniczne użytkowników
(przeglądarki, platformy etc.). Co ciekawe, w przypadku
pierwszego rozwiązania statystyki naszego
mobilnego serwisu sprawdzimy nie inaczej, jak
właśnie poprzez urządzenie mobilne (poprzez
stronę http://mobilestats.mobi).

Jak widać, trudno mieć serwis mobilny,
samemu nie korzystając w ten sposób z sieci. Tak
można najlepiej przekonać się, jakie rozwiązania
sprawdzają się w praktyce.

Wykrywanie urządzenia mobilnego i jego parametrów

Nie wszyscy użytkownicy będą pamiętać adres mobilnej wersji twojego
serwisu. Dlatego bardzo dobrym rozwiązaniem jest ich wykrycie i przekierowanie
na odpowiedni adres. Ważnym aspektem jest również określenie
parametrów urządzenia – szerokości ekranu czy rodzaju używanej przeglądarki.
Pomocne okazują się gotowe bazy danych urządzeń, zawierające
szereg rekordów identyfikujących ich wszelakie parametry.

Największa tego typu baza danych to DeviceAtlas.com, firmowana przez
dotMobi. W zakładce „devices” znajdziemy dokładne charakterystyki
(przykład: http://deviceatlas.com/devices/Nokia/E51) kilku tysięcy modeli.
Poza standardowymi parametrami (takimi jak rozmiar i rozdzielczość ekranu,
system operacyjny) obecne są m.in. informacje o obsługiwanych kodekach
dźwięku i obrazu, maszynie wirtualnej Java czy dostępnych protokołach
sieciowych (GPRS, EDGE, UMTS, HSDPA i inne).

Niestety, baza danych jest bezpłatna jedynie do przeglądania w wersji on-line.
Jeżeli chcemy pobrać ją na dysk, wówczas musimy zakupić jedną z trzech
licencji, w cenie od 99 $ do 299 $ rocznie, w zależności od częstotliwości
aktualizacji. Twórcy DeviceAtlas.com udostępniają również API (Application
Programming Interface), które dostępne jest w językach Java, .NET (w postaci
biblioteki .dll), PHP 5, a wkrótce także w Ruby i Pythonie. Do celów
deweloperskich możemy korzystać z bazy danych i API bezpłatnie.

Jeżeli jednak chcemy tylko wykryć urządzenie mobilne i jego parametry, możemy
skorzystać z darmowego rozwiązania. A to za sprawą open source’owego
projektu WURFL (Wireless Universal Resource File), będącego otwartą
bazą danych w postaci pliku XML, zawierającego informacje o szeregu
urządzeń mobilnych.

Na jego stronie internetowej, działającej pod adresem http://wurfl.sourceforge.net, znajdziemy do pobrania bazę w formacie .xml lub archiwum .zip.
Ponadto udostępniono szereg przykładów użycia dla takich języków i technologii
jak Java, PHP, Perl, Ruby, Python, .NET, C++ czy transformacji XSLT.
W przypadku języka PHP dostępne są dwie gotowe aplikacje przeznaczone
do integracji z bazą WURFL. Pierwsza to zestaw PHP Tools version 2.1 Final,
składający się z 3 głównych plików (konfiguracja, parser i klasa główna).

Drugi to Tera WURFL, bazujący na pierwszym rozwiązaniu, jednak rozszerzający
go o dodatkową funkcjonalność – głównie o korzystanie z bazy danych
MySQL oraz panel administracyjny ułatwiający aktualizację pliku wurfl .xml.
Zalecamy użycie właśnie tej bardziej zaawansowanej biblioteki, która charakteryzuje
się szybszym działaniem, większymi możliwościami, a jednocześnie
równie prostą instalacją.

Wdrożenie Tera WURFL

Aktualne wydanie Tera WURFL oznaczone jest numerkiem 1.5.2 i można je z oficjalnej strony biblioteki:
http://www.tera-wurfl.com.
Rozpakowane pliki kopiujemy do osobnego katalogu na serwerze, a następnie
uruchamiamy w przeglądarce plik {stala}install.php{/stala} z katalogu /admin.
Zostanie wyświetlony instalator, który każe nam skorygować uprawnienia
do katalogów, w których przechowywane będą dane, m.in. plik z bazą urządzeń.

Po podaniu prawidłowych danych logowania do bazy MySQL zostaną
utworzone potrzebne tabele, po czym zostaniemy poproszeni o pobranie
najświeższego pliku wurfl .xml – wystarczy kliknąć w odpowiedni link – dane
mogą pochodzić z pliku lokalnego, z serwera WURFL lub z repozytorium CVS,
gdzie dostępna jest najbardziej aktualna wersja.

Jeśli wszystkie operacje zostaną wykonane poprawnie, kasujemy plik install.
php i przechodzimy w przeglądarce do katalogu /admin. Możemy tutaj m.in.
sprawdzić poprawność instalacji, klikając na opcji „Tera-WURFL test script”.
Kolejnym krokiem jest wykorzystanie biblioteki w skryptach PHP serwisu. Integracja
jest niezwykle prosta – aby sprawdzić, czy odwołanie nastąpiło z przeglądarki
mobilnej, wystarczy wstawić następujące linie w kodzie serwisu:

1
2
3
4
5
6
7
8
9

<?php
require_once(\'tera_wurfl .php\');
$wurfl = new tera_wurfl ();
$matched = $wurfl -> getDeviceCapabilitiesFromAgent ($_SERVER[\"HTTP_USER_AGENT\"]);
if ($matched && $wurfl -> getDeviceCapability (\"is_wireless_device\")) {
  header(\"Location: http://serwis.mobi\");
  exit;
}
?>

W pierwszej linijce kodu ładujemy plik z klasą, a następnie tworzymy jej instancję
i przypisujemy do zmiennej {stala}$wurfl{/stala} . Kolejnym krokiem jest wywołanie
metody pobierającej właściwości urządzenia z podanego parametru „User
Agent”, który w tym wypadku przyjmuje wartość wysłaną przez przeglądarkę
użytkownika. Jeżeli urządzenie zostało znalezione w bazie ({stala}$matched{/stala} jest
równe true) oraz parametr „is_wireless_device” jest prawdziwy – przekierowujemy
użytkownika za pomocą funkcji {stala}header(){/stala} na wersję mobilną serwisu.

Kluczową metodą, która ma bardzo wiele zastosowań, jest {stala}getDeviceCapability(){/stala}.
Jako argument podajemy parametr urządzenia, który chcemy sprawdzić.
Ich obszerna lista przedstawiona jest na stronach WURFL pod adresem:
http://wurfl.sourceforge.net/help_doc.php#product_info. Lista najczęściej
wykorzystywanych została zamieszczona w tabeli:

Internetowe serwisy mobilne w Polsce

Mobilne strony internetowe nie są jeszcze w Polsce
popularne, zarówno wśród użytkowników, jak
i wśród webmasterów. Największe serwisy powoli
dostrzegają jednak potencjał drzemiący w usługach
mobilnych, o czym świadczą m.in. przenośne
wersje polskich portali: Onetu (http://lajt.onet.pl),
Wirtualnej Polski (http://mini.wp.pl), Interii (http://mobinteria.pl) oraz Gazety (http://gazeta.mobi).
Na tym rynku aktywne są zwłaszcza porównywarki
cen, co nie dziwi, gdyż akurat sprawdzenie
wielu ofert np. przez komórkę może być bardzo
przydatne podczas zakupów. Aby zapoznać się
z ich serwisami mobilnymi, odwiedź porównywarki
Ceneo (http://mceneo.pl), Radar (http://m.radar.pl) oraz Nokaut.pl (http://m.nokaut.pl).

Na uwagę zasługuje zwłaszcza rozwiązanie wprowadzone
przez Nokaut.pl, gdzie poza nazwą poszukiwanego produktu możemy podać naszą obecną
lokalizację, dzięki czemu odnajdziemy najtańszą ofertę w okolicy.
Swoje wizytówki mobilne posiadają także niektóre miasta, m.in. Kraków (http://mobi.krakow.pl) oraz
Wrocław (http://mobi.wroclaw.pl). Na uwagę zasługują również serwisy PLL „Lot” (mobile.lot.com) oraz
mapa Polski Targeo (http://www.targeo.mobi).

Jak widać, spory problem stanowi brak jakiejkolwiek standaryzacji, jeżeli chodzi o nazewnictwo
domen. Jedynie dwa z wymienionych serwisów korzystają z dedykowanych adresów .mobi. Pozostałe
zdecydowały się na różnego rodzaju subdomeny, przez co internautom trudniej zapamiętać ich nazwę.

Architektura informacji

Zanim przystąpimy do kodowania, koniecznie
należy spędzić trochę czasu na planowaniu
i przygotowywaniu odpowiedniej architektury oraz
struktury serwisu mobilnego. Dostępna powierzchnia
(ekran urządzania przenośnego) jest niewielka,
dlatego musimy ją wykorzystać jak najbardziej
efektywnie.

Obowiązują tutaj nieco inne zasady, aniżeli
przy tradycyjnych serwisach internetowych.
Podstawową rolę odgrywa prostota i łatwość
w nawigowaniu. Odrzućmy skomplikowane menu
i ścieżki dostępu do danych. Zaleca się, aby główna
nawigacja nie składała się z więcej niż pięciu
działów, a liczba odnośników na jednej podstronie
nie przekraczała dziesięciu.

Niezwykle istotny jest dobór informacji. Nie
każdy materiał musimy przedstawić w wersji
mobilnej. Zamiast tego oferujmy i promujmy to,
co przez użytkowników jest najbardziej pożądane.
Możemy to jasno określić za pomocą prostych
statystyk, opierających się na liczniku czytań
poszczególnych tekstów. Unikajmy także „pustych”
stron, czyli takich, które nie niosą za sobą żadnych
informacji, a tylko linkują do kolejnych podstron.
Przykładowo tworząc sekcję „artykuły”, przedstawmy
w niej 2.3 teksty, a nie tylko odnośniki do
kolejnych działów, jak np. „sport” czy „polityka”.

Przy pracach nad designem bardzo ważnym
aspektem jest dobór szerokości i wysokości strony.
Poradnik dotMobi mówi o optymalnym maksymalnym
rozmiarze 200×250 pikseli, który stanowi
kompromis wśród dostępnych na rynku urządzeń.
Być może nowym standardem stanie się wkrótce
240×320 pikseli – według analiz przeprowadzonych
na rynku brytyjskim, obecnie taki rozmiar
strony prawidłowo wyświetli blisko 82% urządzeń.
Na razie jednak, zwłaszcza na polskim podwórku,
lepszym wyjściem wydaje się stosowanie się do
zalecenia dotMobi.

Szerokość strony zazwyczaj jest stała, nieco
więcej problemu może natomiast sprawić znaczne
przekroczenie zalecanej maksymalnej wysokości.
Dotyczy to zwłaszcza dłuższych artykułów, które
dodatkowo mogą zawierać np. komentarze.
Rozwiązaniem jest rozbicie obszernych tekstów
na kilka podstron, tak aby dalszy ciąg artykułu był
dostępny po kliknięciu w odnośnik zawierający np.
słowo „czytaj dalej” czy też numer strony.

Z kolei według autorów poradnika optymalna
struktura strony powinna składać się z nagłówka,
nawigacji (górna oraz dolna), miejsca na treść oraz
stopki. Obecność dodatkowej dolnej belki nawigacyjnej
ma sens, ponieważ operacja przewijania
strony na telefonach komórkowych (zwłaszcza bez
ekranu dotykowego) nie jest taka łatwa jak w przypadku
standardowych witryn. Dzięki umiejscowieniu
nawigacji u dołu strony, użytkownik może
szybko przejść do dalszej części serwisu. Dolna
belka powinna zawierać m.in. odnośnik do strony
głównej i/lub przejście poziom wyżej.

Zalecenia techniczne

Serwisy mobilne nie powinny generować
zbyt wiele transferu. Standardowo uznaje się, że
jedna podstrona nie powinna przekraczać 10KB,
a w szczególnych wypadkach (np. dłuższy artykuł)
- 25KB. Ważne w kontekście ograniczenia pobieranych
przez użytkownika danych jest wykorzystanie
lokalnego cache. Aby umożliwić jego stosowanie,
warto dodać znacznik:

1

<meta http-equiv=\"Cache-Control\" content=\"max-age=300\" />

lub też skorzystać z funkcji PHP:

1

header (\'Cache-Control:max-age=300\');.

Powinniśmy wystrzegać się kodu Java-
Script, jeśli nie jest on konieczny, podobnie jak
i obiektów osadzanych (np. materiałów wideo)
czy animacji Flash. Ważne, aby unikać stron
przekierowujących (zamiast tego lepiej skorzystać
z nagłówków 3xx) oraz automatycznego odświeżania
witryny (meta refresh).

Niemile widziane jest także otwieranie przez
witrynę nowych okien. Nie jest to zbyt wygodne
dla użytkownika, dlatego też część przeglądarek
nie obsługuje takiego rozwiązania, a inne
stosują mechanizmy blokujące wszelkiego rodzaju
pop-upy.

Ważne jest używanie odpowiednich znaczników,
oddających strukturę strony – tj. nagłówków
(h1-h6), akapitów czy list oraz definicji. Każda podstrona
powinna obowiązkowo posiadać swój tytuł
- zalecany schemat zawartości znacznika {html}