Media queries - CSS dla urządzeń mobilnych

Pojawienie się iPhona, Androida, czy rozwój Opery Mini doprowadziły do zwiększonego zapotrzebowania na aplikacje webowe kompatybilne z nowymi przenośnymi urządzeniami. Dostosowanie silników desktopowych przeglądarek dla potrzeb smartphonów umożliwia twórcom stron www na korzystanie z dobrodziejstw XHTML, CSS, czy JavaScriptu na stronach pisanych pod urządzenia mobilne (choć nie na wszystkich dostępne są te najnowocześniejsze mobilne przeglądarki). Poniżej znajdziesz zbiór wskazówek odnośnie tworzenia stron pod urządzenia mobilne, a także różne przykłady kodu.

Wskazówki dla twórców stron www pod urządzenia mobilne

Testuj na jak największej liczbie telefonów: Jeżeli tworzysz stronę pod różne telefony - testuj stronę na jak największej liczbie z nich. Dla np. Androida, czy iPhone można także posłużyć się emulatorami dostępnymi w pakietach SDK.
Bezproblemowa degradacja elementów strony: Jeżeli stosujesz elementy Flashowe, Ajax to zaprojektuj stronę tak by była nadal funkcjonalna gdy przeglądarka ich nie obsłuży.
Stwórz dedykowaną stronę i spraw by była łatwa do znalezienia: rozwiązania server-side nie zawsze wykryją że klient używa mobilnej przeglądarki - dodaj link do wersji mobilnej na początku strony. Link ten można ukryć dla urządzeń mobilnych stosując typy media w CSS (handheld).
Testy, testy i jeszcze raz testy. Różne formy wstawiania CSS z wykorzystaniem typów media niestety nie są ładnie i bezboleśnie obsługiwane przez różne wbudowane przeglądarki.
Pamiętaj że ekran jest mały: Strony o kilku wąskich kolumnach będą wyglądały lepiej w przeglądarce mobilnej niż strony o szerokich kolumnach - które muszą być zmniejszone w większym stopniu.
Podziel stronę na części: Czytanie długiego fragmentu tekstu może być niezbyt poręczne. Warto rozbić długi tekst na kilka stron.
Linki muszą być krótkie: Wpisywanie adresów URL nie jest łatwe i poręczne na urządzeniach mobilnych. Linki muszą być krótkie i łatwe do wpisania.
Nie umieszczaj nawigacji na początku strony: Wchodząc na daną stronę użytkownik chce zobaczyć jej treść a nie kilka ekranów przewijania nawigacji. Dla urządzeń mobilnych nawigację zazwyczaj umieszcza się na dole strony.
Skróty klawiszowe są ważne na komórkach: HTML pozwala za pomocą atrybutu accesskey przypisać skróty klawiszowe do kilku ważnych tagów: a, area, button, input, label, legend i textarea. Klikanie w linki za pomocą skrótów klawiszowych jest znacznie szybsze i wygodniejsze.
Grafiki muszą być małe: Wymiary grafiki, jak i jej rozmiar powinny być małe żeby dobrze wpasowywały się w ekran o niewielkich wymiarach, jak i żeby szybko się pobierały przez sieć WiFi, GPRS.
Nie umieszczaj grafik na początku strony: topy, nagłówki graficzne i inne ozdobniki na początku strony nie są wskazane. Zamiast treści strony użytkownik widzi kilka ekranów grafik.
Unikaj stosowania: Flasha (nie każda przeglądarka posiada wtyczkę), ramek - używanie ramek na urządzeniach mobilnych jest praktycznie niewykonalne (trudne w użytkowaniu), table, a tym bardziej zagnieżdżonych tabel, absolutnych wymiarów jak piksele, centymetry, używaj wymiarów procentowych i jednostki em.
Proste i łatwe w nawigacji formularze: w przypadku iPhona gdy użytkownik rozpoczyna wypełnianie formularza pojawia mu się na dole ekranu klawiatura. Widoczne jest około 140px strony, więc formularz musi być prosty i krótki, czy też łatwy w nawigacji.
Myszka nie istnieje: pojęcie myszki w urządzeniach mobilnych jest raczej obce, więc unikaj stosowania np. onmouseover.

Wykrywanie urządzeń mobilnych

Jednym rozwiązaniem jest wykrywanie urządzenia mobilnego po nazwie przeglądarki (USER_AGENT) i stosowanie po dopasowaniu odpowiedniego szablonu, lecz nie zawsze tym sposobem da się wykryć wszystkie urządzenia mobilne. Także mogą być problemy, gdy użytkownik łączy się z twoją stroną poprzez różne systemy keszujące - wtedy może dostać wersję niezgodną z dopasowaną nazwą przeglądarki. Można także stosować różne arkusze CSS dla różnych urządzeń za pomocą CSS i atrybutu media (np. handheld). Dla iPhona, czy Androida można zastosować rozwiązanie:

<link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet" />

iPhone i Android pod "handheld" nie podpadają:

Zastosowanie podejścia różnych arkuszy CSS upraszcza tworzenie wersji dla urządzeń mobilnych, lecz niestety niektóre mobilne przeglądarki, szczególnie te starsze lub gorsze nie obsługują np. typów media dla arkuszy. Jeżeli serwis musi obsługiwać wiele urządzeń, nawet starszych, albo z gorszymi przeglądarkami może być konieczne (znacznie łatwiejsze) stworzenie oddzielnych wersji serwisu dla takich urządzeń bazując po USER_AGENCIE wykrytym po stronie serwera.

Ekran iPhone to 320x480px i przeglądarka Safari w nim dostępna w czasie ładowania zwykłej strony ustala współczynnik pomniejszenia strony, tak by pasowała do rozmiarów urządzenia. Można ustawić własny współczynnik, jeżeli domyślnie strona nie jest skalowana tak jak tego chcemy, wystarczy zastosować:

<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

W powyższym przykładzie ustawiliśmy współczynnik pomniejszenia na 2.3, oraz wyłączyliśmy opcję skalowania strony przez użytkownika. Wchodząc głębiej w aplikacje www dla urządzeń mobilnych możemy także zainteresować się projektem wurfl zawierającym bazę danych (plik XML lub DB) urządzeń mobilnych i ich możliwości.

Testowanie - emulatory

Jeżeli mamy dostęp do stosownych telefonów to testowanie nie stwarza problemu. Lecz nie zawsze jest tak dobrze (np. na początku procesu projektowania szablonu). Pomocne mogą okazać się wtedy emulatory dostarczane wraz z narzędziami do tworzenia aplikacji na dane mobilne platformy. Dla Androida można pobrać i zainstalować pakiet SDK i za pomocą wtyczki do Eclipse w prosty sposób uruchamiać emulator z różnymi ustawieniami ekranu. W przypadku iPhone potrzebny jest nam komputer firmy Apple i Mac OS X. Wystarczy pobrać iPhone SDK (2GB) i poprzez XCode będzie można odpalić emulator iPhona. Także do Palm Pre (WebOS) dostępne jest SDK wraz z emulatorem (nie testowałem jeszcze. Palm sprawia wrażenie jakby nie chciał popularyzować swoich technologii wśród programistów). Tablety Nokii (N800, N810 i inne) wykorzystują platformę Maemo, która posiada przeglądarkę opartą o silnik Firefoxa. Można zainstalować pod 32-bitowym Linuksem Maemo-SDK (choć dostęp do standardowych aplikacji może być ograniczony).

Trendy w projektowaniu stron dla urządzeń mobilnych

Wiele dobrych rozwiązań można znaleźć oglądając to co zrobili najlepsi w branży internetowej. Przykładowo Facebook oferuje oddzielną stronę dla iPhone http://iphone.facebook.com, który ładnie integruje się z interfejsem telefonu.

Jak widać strona wygląda bardzo prosto, lecz jest zarazem bardzo czytelna. Formularz logowania jest na tyle mały, że po wysunięciu się klawiatury pozostaje całkowicie widoczny (pierwsze dwa - emulator Androida, trzecie iPhone).

Jednakże strony nie muszą wyglądać goło, wystarczy przyjrzeć się różnym projektom na cssiphone.com, żeby przekonać się iż można śmiało tworzyć "ładne i kolorowe" strony z zachowaniem funkcjonalności. Podane tam strony oprócz iPhona będą kompatybilne także z innymi nowoczesnymi mobilnymi przeglądarkami (np. Android), choć mogą pojawić się drobne problemy (np. brak odpowiedniej wtyczki):

Nawet azjatyckie specjały można dostosować do iPhona:

Przykładowa strona dostosowana do urządzeń mobilnych

Poniżej zaprezentowany jest przykładowy kod strony dostosowanej zarówno dla desktopowych przeglądarek jak i dla tych na urządzeniach mobilnych. Oto plik HTML z dwukolumnowym układem w wersji standardowej:

Z jakiegoś powodu nowsze wersje Androida (zaczynając od wersji 2.3 lub 2.2) nie używają max-device-width. Zamiast tego stosują -webkit-device-pixel-ratio.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Strona Testowa</title>
<meta name="Description" content="Opis Strony Testowej" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Robots" content="index,follow" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="style_print.css" media="print" type="text/css" />
<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />
<!-- nowsze androidy -->
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:0.75)" href="style_mobile.css" />
<link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]--><style>
/* tak też można  */
@media handheld {
   body {
     background-color:tan;
   }
 }
 @media only screen and (max-device-width: 480px) {
   body {
      background-color:yellow;
   }
 }
</style>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>

<div class="content">
<h4>Lorem Ipsum This!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</div>

<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">my art 1</a></li>
<li><a href="#">my art 2</a></li>
</ul>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">my art 1</a></li>
<li><a href="#">my art 2</a></li>
</ul>
</div>

<p><br style="clear:both;" /></p>

<div class="footer">Moja Strona, Autor Imie i Nazwisko</div>

</body>
</html>

Bardzo ważnym elementem jest wstawienie stylów CSS:

<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />
<link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]-->
<!-- żeby iPhone nie pomniejszał już dopasowanej mobilnej strony -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Domyślny styl wstawiany jest nie jako screen, ale jako: screen and (min-device-width: 481px). Wstawienie go poprzez "screen" spowoduje że np. Android czy iPhone użyją domyślnego arkusza (a przynajmniej ich emulatory). Zastosowanie screen and (min-device-width: 481px) załatwia sprawę dla tych platform, jak i jest poprawnie obsługiwane przez desktopowe przeglądarki takie jak Opera, Firefox, czy te oparte o WebKita (Safari, Chrome).

Styl mobilny dla Androida i iPhone wstawiamy stosując only screen and (max-device-width: 480px).

style.css przeznaczony dla desktopu tworzy układ dwukolumnowy:

body
{
margin:0px;
padding:0px;
font-family:Verdana, Tahoma, Arial, "DejaVu Sans";
line-height: 1.6em;
font-size:1.1em;
background-color:#DDDDDD;
}

.content
{
float:left;
width:73%;
margin:5px;
padding:5px;
background-color:white;
border:1px solid #AAAAAA;
text-align:justify;
}

.menu
{
float:right;
width:22%;
margin:5px;
padding:5px;
background-color:white;
border:1px solid #AAAAAA;
}

.footer
{
margin:5px;
padding:5px;
text-align:center;
font-size:2em;
font-weight:bold;
border:1px solid #AAAAAA;
margin-top:20px;
margin-bottom:20px;
background-color:white;
}

style_mobile.css dla wersji mobilnych nie stosuje opływania i menu "prawe" umieszczane jest na dole strony poniżej bloku treści:

body
{
margin:0px;
padding:0px;
line-height: 1.6em;
font-size:1.1em;
}
h4
{
font-size:1.5em;
}
.content
{
margin:5px;
padding:5px;
text-align:justify;
}

.menu
{
margin:5px;
padding:5px;
background-color:white;
border:1px solid #AAAAAA;
}

.footer
{
margin:5px;
padding:5px;
text-align:center;
font-size:1.5em;
font-weight:bold;
border:1px solid #AAAAAA;
margin-top:9px;
margin-bottom:9px;
}

Pobierz źródła. Poniżej testowa strona pod iPhone bez i z mobilnym arkuszem CSS:

A tak wygląda pod Androidem:

Identyfikacje mobilnych przeglądarek (USER AGENT)

iPhone, przykładowo:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

Android, przykładowo G1:

Mozilla/5.0 (Linux; U; Android 1.0; en-us; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2

Android, przykładowo emulator:

Mozilla/5.0 (Linux; U; Android 1.0; en-us; generic) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2

RkBlog

Strony mobilne, 2 July 2009, Piotr Maliński