Kocjan.net

wizytówka internetowa

• Strona główna
• Publikacje
• Projekty
• Warto (po)czytać
• Oprogramowanie
• Kontakt

Strona www w komórce

Tworzenie serwisów mobilnych

Tworzenie witryn internetowych dla urządzeń mobilnych – biorąc pod uwagę aspekty technologiczne - nie różni się od procesu budowy tradycyjnych stron www. Dokumenty serwowane przeglądarce uruchomionej np. w telefonie komórkowym wciąż są plikami XHTML czy CSS. Mimo to, decydując się na uruchomienie serwisu mobilnego, musimy poznać szereg zasad i reguł, które charakteryzują dobrze wykonany, dostępny i przyjazny dla mobilnego odbiorcy projekt.

Wojciech Kocjan

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".

Tak odważne stwierdzenie ma wiele logicznych podstaw, które corocznie potwierdzają kolejne badania i raporty firm analitycznych. Firmy T-Mobile i Pyramid Research szacują, że urządzenie mobilne (najczęściej telefon komórkowy) posiada blisko 1/3 ludzi na świecie – co daje rynek ponad 2 miliardów użytkowników. Stale rozwijane są i powstają nowe technologie, które umożliwiają co raz to 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 – poza Apple – wkracza również Google ze swoją platformą „Android”, a nie można przecież zapominać o obecnych liderach rynku – systemach Windows Mobile Microsoftu i Symbian, który został kupiony przez Nokię i ma wkrótce zostać otwarty. Istnieją więc wszelkie powody ku temu, by prognozy Brina w najbliższych latach się spełniły.

Jako webmasterzy prędzej czy później spotkamy się z zadaniem stworzenia mobilnej wersji serwisu internetowego – dlatego warto już teraz przyswoić sobie reguły, jakimi trzeba się kierować podczas każdego etapu tworzenia i mieć świadomość, na jakie aspekty trzeba zwrócić szczególną uwagę. Tym bardziej, że nie wymaga to od nas poznania 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 definicji stylów dla tagów użytych na stronie oraz dodanie znacznika w sekcji z odnośnikiem do osobnego arkusza CSS:

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

Nie jest to – jak widać – operacja skomplikowana, można jej dokonać niewielkim nakładem sił i poświęconego czasu. Jakie są jednak wady tego rozwiązania i dlaczego 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 1024x768 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. 200x250px zmieści się niewiele tekstu). Stosując dodatkowy arkusz CSS nie osiągniemy tych celów, dlatego o wiele lepszym wyjściem jest stworzenie osobnej wersji strony, mimo iż początkowo będzie to wymagało większego nakładu pracy.

Poradnik dewelopera – czyli jak to się robi?

Szczęśliwie, webmaster chcący przygotować mobilną stronę internetową nie jest pozostawiony samemu sobie. Organizacja dotMobi (piszemy o niej w osobnej ramce) przygotowała obszerny, 91-stronicowy poradnik dewelopera, przedstawiający dokładnie wszelkie aspekty, jakie musimy mieć na uwadze podczas każdego etapu tworzenia serwisu. Poradnik dostępny jest bezpłatnie po zarejestrowaniu się na stronie http://dev.mobi, umieszczony został również na płycie CD, dołączonej do magazynu. W chwili pisania tego tekstu dostępna jest pierwsza wersja poradnika, trwają jednak zaawansowane prace nad drugą edycją. Dokument przedstawia zalecane rozwiązania techniczne, bazując m.in. rekomendacjach W3C (World Wide Web Consortium), przybliża także sens przystosowania serwisu do urządzeń mobilnych oraz wymienia liczne zalety takiej operacji.

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ż jak widać brak tutaj standaryzacji – użytkownik musi pamiętać jaki serwis jakiej subdomeny użył (lajt.? mobile.? mini.? a może m.?).

Organizacja dotMobi zaleca stosowanie osobnych domen .mobi – wydaje się to najrozsądniejszym wyjściem, nie tylko dlatego że ten rodzaj domeny wszedł w życie dzięki lobbingowi firm 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 co prawda 200zł netto rocznie, jednakże możemy skorzystać z rejestratorów zagranicznych, gdzie cena jest ponad 10-krotnie niższa – przykładowo w GoDaddy.com zapłacimy około 8$, co przy obecnym kursie naszej narodowej waluty daje mniej niż 20zł.

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 http://serwis.mobi oraz http://www.serwis.mobi). 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

Posiadanie domeny .mobi obliguje nas do użycia XHTML nie bez powodu – 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 niezwykle 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ątną ekranu, rozdzielczością, a także systemem operacyjnym i co za tym idzie – aplikacjami, z których kluczową 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, a do walki o rynek wkrótce przystąpi także mobilna wersja Firefoksa. Przy takiej mnogości rozwiązań przestrzeganie standardów jest niezwykle ważne, gdyż jest jedynym sposobem na zapewnienie dobrego działania witryny na wszystkich platformach.

W celu opracowania jednolitych standardów, W3C na wiosnę 2005 roku utworzyło tzw. Mobile Web Initiative (MWI) – składającą się z kilku grup roboczych, odpowiedzialnych za przygotowanie dokumentów i opracowań, mających na celu opisanie dobrych praktyk przy tworzeniu mobilnych serwisów internetowych.

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:

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

W drugiej wersji mamy do czynienia z tzw. XHTML-MP (Extensible Hypertext Markup Language - Mobile Profile), 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ą:

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

Tworząc kod XHTML możemy korzystać z większości podstawowych znaczników – szczegółowe informacje o usuniętych opcjach dostępne są w dokumentacjach, dostępnych na stronach http://w3c.org. Od strony praktycznej, każdy webmaster znający XHTML ze stworzeniem poprawnej strony poradzi sobie bez najmniejszych problemów – musimy pamiętać o znacznikach zamykających i innych podstawowych zasadach, jakie wymaga specyfikacja XHTML. 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 często przeglądarki mobilne 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 'application/xhtml+xml'. Kolejną zalecaną opcją jest kodowanie znaków: 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: <?xml version="1.0" encoding="UTF-8” ?> oraz nagłówka HTTP, który w PHP możemy wysłać za pomocą funkcji: header('Content-Type:application/xhtml+xml;charset=UTF-8');

Architektura informacji

Zanim przystąpimy do kodowania, koniecznie należy poświęcić czas na zaplanowanie i przygotowanie odpowiedniej architektury/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 – podstawowe słowa-klucze, o których musimy na tym etapie pamiętać to 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, 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 200x250 pikseli, który stanowi kompromis wśród dostępnych na rynku urządzeń, zapewniający prawidłowe wyświetlanie na większości z nich. Być może nowym standardem stanie się wkrótce 240x320 pikseli – według analiz przeprowadzonych na rynku brytyjskim, na chwilę obecną taki rozmiar strony prawidłowo wyświetli blisko 82% urządzeń. Póki co 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 sprawić znaczne przekroczenie zalecanej maksymalnej wysokości. Problem ten dotyczy 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.

Poradnik przedstawia także dobrą praktykę jeśli chodzi o strukturę strony, która powinna składać się z nagłówka, nawigacji (górna oraz dolna), miejsca na treść oraz stopki.

Obecność dolnej belki nawigacyjnej ma sens, gdyż 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 do poziomu wyżej.

Zalecenia techniczne

Serwisy mobilne nie powinny generować zbyt wiele transferu – standardowo uznaje się, że poszczególna strona 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: <meta http-equiv="Cache-Control" content="max-age=300" /> i/lub też skorzystać z funkcji PHP: header ('Cache-Control: max-age=300');

Powinniśmy się wystrzegać kodu JavaScript, jeśli nie jest on konieczny, podobnie jak i obiektów osadzanych (np. video) 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. Powinno unikać się tworzenia tabel, gdyż na większości ekranów będą one źle wyświetlane – złym rozwiązaniem jest także oparcie layoutu strony o tabelki. Każda podstrona powinna posiadać swój tytuł, zalecany schemat zawartości znacznika <title> wygląda następująco: <title>Opis podstrony | Nazwa strony</title>

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: <a href="aktualnosci.html" accesskey="1">Aktualności</a>. 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:

<ol>
<li><a href="aktualnosci.html" accesskey="1">Aktualności</a><li>
<li><a href="produkty.html" accesskey="2">Produkty</a></li>
<li><a href="kontakt.html" accesskey="3">Kontakt</a></li>
<li><a href="onas.html" accesskey="4">O nas</a></li>
</ol>

Warto również pamiętać o odnośnikach do numerów telefonów – w tym celu stosowany jest przedrostek „tel:”: <a href="tel:+48400123123">+48 400 123 123</a>.

Kolejny ważny aspekt stanowią zdjęcia – oczywistym 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 graficzne po takim pomniejszeniu będą czytelne. Interesującym rozwiązaniem jest pobieranie szerokości ekranu urządzenia mobilnego użytkownika i dynamiczne zmniejszanie zdjęcia do takiego rozmiaru, aby zmieściło się ono na ekranie. Pamiętajmy także o konieczności użycia parametru „alt” opisującego co jest na obrazku, warto również podać szerokość (width) oraz wysokość (height), dzięki czemu przeglądarka będzie szybciej renderowała stronę.

Swoją specyfikę 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 np. w telefonach komórkowych czy palmtopach, powinniśmy ograniczać liczbę pól w formularzach, sprawiając, by 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:
<input type="text" style=' -wap-input-format: "*N"' />

Wymuszenie podania jedynie znaków alfabetu, z czego pierwsza litera powinna być duża, osiągniemy dzięki kodowi:
<input type="text" style=' -wap-input-format: "A*a"' />

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 na bieżąco chcemy śledzić efekty naszej pracy. Jednym ze sposobów jest oczywiście przeglądanie strony w urządzeniu przenośnym, który posiada dostęp do sieci (np. WiFi) – nie jest to jednak najwygodniejsze wyjście. O wiele prostszym rozwiązaniem jest użycie... ramki. Wystarczy utworzyć dokument html z zawartością:

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

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/mobileOK-basic10-tests) i 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 blisko 50 milionów użytkowników.

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. Na chwilę obecną 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).

Materiały dodatkowe