Jak běhá mobilní Chytrák Tim?
Zjednodušený pohled na zpracování mobilní verze webu.
Začnu tím, že odkazuji na úvodní článek k mobilitě svých stránek. Dnešní část se týká použitých platforem, jejich zapojení a vlivu prohlížečů. Vzhledem k tomu, že jde o mobilní přístup výrazně orientovaný na uživatele, výrobci se naštěstí snaží udržet tempo doby. Průběžný test jsem prováděl v Safari (iPad, iPod Touch), Nokia Browseru a Opeře Mini (Nokia N8), Internet Exploreru (Nokia Lumia) a Google Chrome (Samsung Galaxy SIII). Kromě toho je dobré vidět, jak se k použitým platformám staví tradiční prohlížeče. Zklamáním je Firefox, který jinak používám nejčastěji, zde si ale částečně neporadil s CSS 3. Jsem docela zvědav na jeho mobilní operační systém. Výborným nástrojem je doplněk prohlížeče Google Chrome Ripple, který umožní vytvořit mobilní emulátor přímo na počítači.
HTML 5 a CSS 3
Základem je HTML 5, především v meta informacích, kde je zapsáno, jak se má web chovat. Kromě tradičního kódování jde o nastavení parametrů pro zobrazení a cestu ke kaskádovým stylům v režimu screen. Verze kaskádových stylů CSS 3 naopak přináší řadu prvků, které mohou designově selhat. Některé prohlížeče si s nimi neporadí, což je znát hlavně v gradientu a zaoblených rozích u navigačního tlačítka (IE ve WP8). Do obsahu souboru CSS můžete samozřejmě psát i vaše osvědčené úpravy včetně layoutu. Přínos CSS 3 je hlavně při využití jádra WebKit, na kterém stojí prohlížeče Google Chrome (Android), a Safari (iOS). Což je dobře vidět u Firefoxu (jádro Gecko) a Opery (jádro Presto), ty některé prvky nezobrazí správně. Díky důslednému oddělení obsahu a layoutu jde pouze o designový problém, ten ale na malých plochách určitě není bezvýznamný. Jako zajímavý experiment slouží Internet Explorer. V posledních verzích jde sice o bezproblémový a rychlý produkt, ale jako testovací platformu jej doporučuji využívat u každého webu. Jeho mobilní verze je totiž velkou výzvou.
jQuery
Tato javascriptová knihovna je velmi silná. Rád ji používám i v klasickém zobrazení webu, protože přináší řadu efektních prvků, zejména při ukrývání nadbytečných bloků, formulářů, apod. Je volně ke stažení a hlavně z ní vychází Google, neboť Chrome ji potřebuje velmi. Zapsat menší kód do nového souboru není moc obtížné, navíc je pro jQuery velká publikační podpora na Internetu i v knižní podobě. Osobně si myslím, že tato knihovna patří k nejlepším produktům poslední doby.
Když to shrnu, tak díky HTML 5 používám bloky, které by v (X)HTML nebyly myslitelné. Hlavička webu je informačně velmi úsporná a každý meta tag má jasný význam. V CSS 3 formátuji celkový layout i jednotlivé části ve dvou verzích, vždy podle šířky prohlížeče. Mobilní a tabletová verze používá skrývání navigačního tlačítka, desktopová verze nikoli (tu nepotřebuji, jde jen o porovnání). Pomocí jQuery reguluji skrývání/zobrazování navigace a několik doplňkových vlastností pro formulář. Všechny tyto platformy nejsou podmínkou nutnou. Pro zobrazení webu v mobilní verzi stačí (X)HTML a CSS 2.1, navíc bez JavaScriptů. Je to ale přešlapování na místě, přičemž zejména rozšiřování rendovacího jádra WebKit se stává cestou ve vývoji prohlížečů.
05-07-2013