Strona WWW w komórce

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:

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:

 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:

lub też skorzystać z funkcji PHP:

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}

Powinno unikać się tworzenia tabel, gdyż na
większości ekranów będą one źle wyświetlane.
Jeszcze gorszym pomysłem jest opieranie layoutu
strony na tabelach.

Istotnym zaleceniem jest używanie klawiszy
dostępu przy odnośnikach. Urządzenia mobilne
w większości przypadków wyposażone są w klawiatury
numeryczne, tak więc użycie parametru
\”accesskey\” pozwoli na znaczne przyspieszenie
nawigacji pomiędzy podstronami. Przykładowy
link może wyglądać następująco:

Aktualności

Tworząc odnośniki, pamiętajmy też, aby ich opis
(tzw. anchor text) jasno dawał do zrozumienia,
dokąd prowadzi. W przypadku menu i większej
liczby linków zalecane jest wykorzystanie list
numerowanych:

Aktualności

Produkty
Kontakt
O nas

Warto również stosować odnośniki do numerów
telefonów. W tym celu stosowany jest przedrostek
\”tel:\”:

+48 400 123 123.

Kolejny ważny aspekt mobilnego serwisu
stanowią zdjęcia. Oczywiste jest, że musimy je
pomniejszać do takiego rozmiaru, który nie wygeneruje
dużego transferu, a także zmieści się na ekranie użytkownika. Twórcy poradnika dotMobi
nie zalecają umieszczania obrazków szerszych
niż 120 pikseli. Zwracają też uwagę na to, że nie
wszystkie pliki grafi czne po takim pomniejszeniu
będą czytelne. Interesującym rozwiązaniem wydaje
się być pobieranie zastosowanej szerokości ekranu
w urządzeniu użytkownika i dynamiczne zmniejszanie
zdjęcia do optymalnego rozmiaru.

Pamiętajmy także o konieczności użycia
parametru \”alt\” opisującego, co jest na obrazku.
Warto również podać jego szerokość (width) oraz
wysokość (height), dzięki czemu przeglądarka
będzie szybciej renderowała stronę.

Swoją specyfi kę na witrynach mobilnych mają
także wszelkiego rodzaju formularze, tak często
wykorzystywane w serwisach internetowych.

Ze
względu na mało wygodne wprowadzanie tekstu
w telefonach komórkowych czy palmtopach,
powinniśmy ograniczać liczbę pól w formularzach,
sprawiając, aby były one możliwie krótkie.
Użytkownicy z pewnością docenią także użycie
dodatkowego parametru css \”wap-input-format\”,
określającego rodzaj wprowadzanych danych
w konkretnym polu.

Przykładowo, pole tekstowe z możliwością
wprowadzenia jedynie liczb powinno wyglądać
następująco:

Wymuszenie podania jedynie znaków alfabetu,
z czego pierwsza litera powinna być duża, osiągniemy
dzięki wstawieniu kodu:

Zastosowanie tego rozwiązania automatycznie

przedstawi klawiaturę użytkownika w odpowiedni
tryb pracy – warto więc o tym pamiętać i wdrażać
we wszelkiego typu formularzach.

Testowanie witryn mobilnych

Podczas tworzenia witryny dobrze jest móc
na bieżąco śledzić efekty naszej pracy. Jednym
ze sposobów jest oczywiście przeglądanie strony
w urządzeniu przenośnym, które posiada nieograniczony
dostęp do sieci, np. poprzez WiFi. Nie jest
to jednak najwygodniejsze wyjście. O wiele prostszym
rozwiązaniem jest użycie… ramki. Wystarczy
utworzyć dokument html z zawartością:

W pliku zmieniamy oczywiście parametr \”src\”,
podając w nim ścieżkę do wersji mobilnej, a następnie
otwieramy go w dowolnej przeglądarce
internetowej – obojętnie, czy będzie to Internet
Explorer, Firefox, Opera czy jeszcze inna aplikacja.

O ile taki sposób wystarcza w zupełności do
monitorowania efektów codziennych prac, o tyle
przed oficjalnym opublikowaniem witryny mobilnej
należy poczynić dodatkowe kroki, mające na celu
sprawdzenie poprawności wyświetlania w różnych
urządzeniach i przeglądarkach. Ze względu na
mnogość możliwych konfiguracji użytkowników
(wiele przeglądarek, platform oraz urządzeń różniących
się rozmiarem ekranu, rozdzielczością czy
głębią kolorów) jest to operacja niezwykle istotna.

Bardzo przydatny okazuje się zaawansowany
walidator, dostępny do użycia bezpłatnie na stronie
http://ready.mobi. Udostępniane przez dotMobi
narzędzie bazuje na szeregu testów, określonych
przez W3C (http://www.w3.org/TR/mobileOKbasic10-tests).

Sprawdza – poza zgodnością ze
standardami – takie parametry jak rozmiar witryny,
czas i koszt jej pobrania, wymiary obrazków,
zastosowanie parametru accesskey w odnośnikach,
parametry cache\’owania czy obecność ramek. Po
podaniu adresu naszej strony wykonywanych jest
łącznie 27 testów, pozwalających wyłapać popełnione
przy projektowaniu i programowaniu błędy.

Co ważne, ready.mobi udostępnia również
emulator telefonów pięciu producentów (Nokia
N70, Samsung z105, SE k750i, Motorola v3i, Sharp
GX-10), dzięki któremu możemy sprawdzić, jak wygląda
na nich testowana strona internetowa. Podobnych
emulatorów różnych urządzeń mobilnych
(a raczej przeglądarek na nich zainstalowanych)
jest w sieci sporo. Ponadto warto zwrócić uwagę
na rozwiązanie udostępniane przez Operę pod
adresem http://www.operamini.com/demo, gdzie
sprawdzimy, jak zachowuje się witryna renderowana
przez norweski produkt, z którego korzysta już
blisko 50 milionów użytkowników.

Wybieramy domenę

Jedną z pierwszych decyzji przy tworzeniu
strony jest określenie, pod jakim adresem będzie
ona dostępna. Nie inaczej jest w przypadku wersji
mobilnej witryny. Jeśli decydujemy się na jej stworzenie
w postaci osobnej strony, należy również
zadbać o jej unikalny URL.

W praktyce spotyka się trzy warianty: osobna
subdomena (np. mobile.serwis.pl czy m.serwis.
pl), katalog (serwis.pl/mobile) lub specjalna
domena .mobi (serwis.mobi). W Polsce najczęściej
stosuje się rozwiązanie z subdomeną. Czynią tak
największe portale (lajt.onet.pl czy mini.wp.pl),
choć nie wydaje się to najlepszym wyjściem, gdyż
przeszkadza tutaj brak standaryzacji – użytkownik
musi pamiętać, jaki serwis jakiej subdomeny
wybrał (lajt.? mobile.? mini.? a może m.?).

Organizacja dotMobi zaleca stosowanie
osobnych domen .mobi. Wydaje się to najbardziej
rozsądnym wyjściem, nawet pomimo tego, że
ten rodzaj domeny powstał dzięki lobbingowi
fi rm wspierających dotMobi. W Polsce z tego
rozwiązania skorzystał między innymi portal
Gazeta.pl, który w wersji mobilnej dostępny jest
pod adresem Gazeta.mobi. Wadą takiej opcji jest
konieczność zakupu nowej domeny – na szczęście
nie jest to duży wydatek. U większości polskich
rejestratorów koszt zakupu domeny .mobi wynosi
200 zł netto rocznie, jednakże możemy skorzystać
z rejestratorów zagranicznych, gdzie cena jest
kilkukrotnie niższa. Przykładowo w GoDaddy.
com zapłacimy około 8 $, co przy obecnym kursie
złotego daje ok. 20 zł.

Musimy również pamiętać o tym, że uruchomienie
serwisu w domenie .mobi obliguje nas (takie są
zasady rejestracji) do kilku działań. Strona pod tym
adresem nie może używać ramek, musi serwować
strony w języku XHTML, a także standardowo
stworzona powinna być subdomena www. (tak, aby działały adresy {stala}http://serwis.mobi{/stala} oraz {stala}http://www.serwis.mobi{/stala}). Nie są to wymagania trudne
do spełnienia, ale musimy je mieć na uwadze.

Pamiętajmy o tym, aby poinformować użytkowników
o wersji mobilnej i domenie, w której
jest ona uruchomiona. Dobrą praktyką jest także
użycie skryptu, który w momencie wejścia na
\”normalną\” witrynę wykryje, iż nastąpiło ono
z przenośnego urządzenia, po czym wykona
stosowne przekierowanie na wersję mobilną.

W osobnej części artykułu omówiony został
sposób, jak to wykonać, wraz z przykładowym
kodem w języku PHP.

Stosuj standardy

Nie bez powodu posiadanie domeny .mobi
obliguje nas do użycia XHTML. Tworząc witryny dla
urządzeń mobilnych, koniecznie musimy bowiem
przestrzegać standardów stworzonych przez W3C.
Jest to w interesie zarówno twórców, jak i wszystkich
użytkowników.

Charakterystyczne dla rynku mobilnego
jest duże zróżnicowanie dostępnych na rynku
urządzeń. Telefony komórkowe, palmtopy i inne
urządzenia różnią się między sobą przekątnymi
ekranu, obsługiwanymi rozdzielczościami,
a także systemami operacyjnymi i co za tym idzie
– aplikacjami, z których kluczowa dla webmasterów
jest oczywiście przeglądarka internetowa.
Istnieje szereg programów tego typu, m.in.
mobilna wersja Internet Explorer, Safari, Opera
Mini czy dedykowana przeglądarka dla systemów
Symbian. Do walki o ten rynek przystąpi wkrótce
także mobilna wersja Firefoksa. Przy takiej mnogości
rozwiązań przestrzeganie standardów jest
niezwykle ważne, gdyż stanowi jedyny sposób
na zapewnienie dobrego działania witryny na
wszystkich platformach.

Każdy poprawnie zbudowany dokument
XHTML powinien posiadać znacznik DOCTYPE,
który deklaruje wybrany język znaczników. W przypadku
witryn mobilnych możemy stosować dwie
odmiany XHTML: Basic oraz Mobile. W tym pierwszym
przypadku prawidłowa sekcja otwierająca
plik wygląda następująco:

W drugiej wersji mamy do czynienia z tzw.
XHTML-MP (Extensible Hypertext Markup Language
– Mobile Profi le), będącym specjalistycznym rozszerzeniem
XHTML Basic, włączającym kilka użytecznych
funkcji dla urządzeń mobilnych. Jeśli chcemy
z nich skorzystać, dokument otwieramy sekcją:

Tworząc kod XHTML, możemy korzystać
z większości podstawowych znaczników. Dlatego
każdy webmaster znający XHTML poradzi sobie ze
stworzeniem poprawnej strony bez najmniejszych
problemów. Do definiowania wyglądu strony wykorzystuje
się oczywiście style CSS, chociaż należy
pamiętać, aby nie korzystać ze zbyt wyszukanych
i zaawansowanych opcji – których przeglądarki
mobilne często po prostu nie obsługują.

Strony mogą być wysyłane przez dowolny serwer
HTTP (np. Apache), zalecane jest jednak, aby
korzystać z konkretnego typu MIME, którym jest
{html}\’application/xhtml+xml\'{/html}. Kolejną zalecaną opcją
jest kodowanie znaków w formacie UTF-8. Niezależnie
jednak, czy wybierzemy Unikod, czy też np.

ISO-8859-2, musimy pamiętać o poinformowaniu
o tym przeglądarki. Najlepiej za pomocą znacznika
XML:

oraz nagłówka HTTP, który w PHP możemy
wysłać za pomocą funkcji:

header(\'Content-Type:application/xhtml+xml;charset=UTF-8\');