Opera Mini a tipy pro webdesignéry

Až do pátku jsem byl mobilním internetem nepoznamenaný. V pátek jsem se konečně stal majitelem telefonu, se kterým jsem se mohl pokusit o své první krůčky. Stal jsem se takovým batoletem mobilního webu.

Zklamání z Czech Internet Forum 2007

Mám ještě v živé paměti Czech Internet Forum 2007, kde jsem se těšil zejména na debatu o mobilním internetu. Byl jsem však zklamán. Zástupci mobilních operátorů se snažili, aby neřekli vůbec nic a pan moderátor byl slabý na to, aby tuto situaci zlomil. Takže jediná mobilní zkušenost, co jsem si odnesl, byla Opera Mini, kterou mi předvedl Petr Krčmář na svém zařízení.

Tento pátek jsem konečně prvně spustil svou Nokii 3109. Bylo mi sice vysvětleno, že se jedná o přístroj téměř obstarožní, to ale mně jakožto mobilnímu analfabetovi vůbec nevadí. A hned jsem zkoumal: Jak s tím tedy na ten web?

Nokia prohlížeč je pěkný louda

Vestavěný webový prohlížeč od Nokie jsem rychle zavrhnul. Jednak stahoval stránky NESKUTEČNĚ pomalu, zlobila mi v něm čeština (evidentně neumí iso-8859–2) a pak celé jeho ovládání musel navrhovat nějaký masochista. Ať si to tedy používá sám!

Opera Mini překvapí

Zkusil jsem tedy Operu Mini 4 a rychle jsem zjistil, že u ní zatím zůstanu. Stažení stránek bylo tak 5krát (!) rychlejší (kdo nevěří, nechť sám porovná), čeština byla téměř vždy v pohodě (ještě rozvedu) a na ovládání jsem si rychle zvykl.

A jelikož mne Opera Mini začala zajímat (další prohlížeč ve sbírce!), začal jsem se pomalu nořit do jejích tajemných zákoutí. A čím jsem byl hlouběji, tím větší úžas na mne padal.

Klient-Server prohlížeč

Opera Mini není vůbec webový prohlížeč ve smyslu, v jakém webové prohlížeče chápeme. Nejedná se o klient řešení, ale o řešení klient-server.

Při zobrazování stránky komunikuje Opera Mini klient ve vašem telefonu s Opera Mini serverem někde v Norsku, který stáhne požadovanou webovou stránku, připraví ji (včetně parsování HTML, CSS, vykonání JavaScriptu) a do vašeho telefonu už putuje jen popis výsledné stránky v jakémsi OBML (Opera Binary Markup Language) přizpůsobený vašemu zařízení. Tedy s vypočteným layoutem přímo pro rozměry vašeho displaye (vašemu kolegovi s jiným telefonem tak server bude zasílat lehce odlišné OBML než vám).

Komunikace klient-server je komprimovaná, takže surfování je pro vás ve výsledku rychlejší a levnější. Opera Software se chlubí těmito čísly. Já je neměřil, ale odhadem opravdu odpovídají.

Tipy pro webdesignéry

Všiml jsem si pár drobností, které si jednak chci někam poznamenat, a pak se možná budou hodit všem, kdo chtějí, aby jejich web byl dobře přístupný i v Opeře Mini.

• Opera Mini nepodtrhává odkazy. Na stránkách, kde jsou odkazy od okolního textu odlišeny nejen podtržením, ale např. i barvou nebo tučností písma je vše v pořádku. V opačném případě odkazy neobjevíte, dokud na ně nenajedete kurzorem. Mezi výjimky patří např. tento blog, na kterém se odkazy zobrazí podtržené, jelikož k podtržení nepoužívají text-decoration:underline, ale spodní rámeček.
• Nefunguje drag&drop, což je logické, protože k tomu není pořádné polohovací zařízení, ale dokud jsem si to nezkusil, tak mne to vůbec nenapadlo 8-) Což mne připomíná, že jsem bohužel nenašel Mapy, které by pod Operou Mini správně fungovaly.
• Pokud jakémukoliv elementu přidáme atribut onclick, zobrazí se stejně jako odkaz (což dobře, protože jinak nevíte, že na něj můžete kliknout). Souvisí to se způsobem, jakým je vykonáván JavaScript, viz dále.
• Pokud se opticky blízko sebe objevuje více odkazů se stejným cílem, vytvoří se jeden společný odkaz (když nemáme status bar, neumíme identičnost odkazů jinak identifikovat). Zmíněné sloučení se logicky neděje, pokud odkazy mají atribut onclick (opět souvisí s vykonáváním JavaScriptu).
• Zvládne HTTP autentizaci (ale pozor na vaše soukromí, všechna data jsou viditelná na serveru a to i při HTTPS!)
• Zvládá cookies, např. pokud si zapnu černé zobrazení Root.cz, vydrží mi i po vypnutí prohlížeče. Zajímalo by mne, zda se cookies uchovávají na klientovi nebo na serveru.
• Umí přehledně zobrazit RSS i Atom soubory, dokonce obsahuje jakousi primitivní RSS čtečku.
• Flash Opera Mini neumí
• Mailové odkazy mailto: nejsou aktivní. Bohužel pokud není e-mailová adresa obsažena i v textu stránky, nelze nijak vyčíst, kam mail vede. Což je škoda, protože když už máte na svém mobilním přístroji přístup na web, máte tím i automaticky přístup na e-mail. Zde to pánové z Opery trochu nedomysleli.
• Obrázky na pozadí Opera Mini někdy ignoruje (tedy konkrétně vlastnost background-image). Zdá se, že o tom rozhodují rozměry obrázku – prostě pokud je obrázek na pozadí příliš veliký (vyzkoušeno na 550×550px), prohlížeč ho ignoruje (nejspíš, aby po velkém zmenšení nerušil text, na jehož pozadí se nachází), po zmenšení na 500×500px je již vše ok.
• Ačkoliv se čeština na stránkách zobrazuje běžně bez problémů, problém se objeví u textu vkládaného JavaScriptem, např. reklama na server Digizone na titulce Roota, která je vkládaná scriptem, má špatnou češtinu.
• Opera Mini se snaží detekovat telefonní čísla zapsaná ve stránce, která zobrazí jako odkaz. Narozdíl od běžných odkazů, které jsou při focusu označeny modrým rámečkem, mají telefonní odkazy rámeček zelený. To se ne vždy daří, mě např. detekuje jako telefonní číslo i klasické datum, např. řetězec „11. 12.“
• Menší variabilita velikostí písma. Opera Mini umí zobrazit více velikostí písma, ale zapomeňte na spektrum velikostí, na jaké jste zvyklí z desktopu. Vzhledem k malému rozlišení Opera Mini podobné velikosti sjednocuje, takže např. hlavní nadpis sice bývá větší než ostatní písmo, ale příliš velkou škálu velikostí nečekejte.

JavaScript

JavaScript je v Opeře Mini kapitola sama pro sebe. Není totiž vykonáván na straně klienta, ale na serveru!!! Pokud jste teď spadli ze židle, zůstaňte sedět na zemi, protože divům není konec. V případě onload událostí je to jasné, na klienta se pošle až podoba stránky s provedenými skripty, ale jak je to s dalšími událostmi?

• Pokud vyvoláte nějakou událost, např. kliknutím na odkaz s onclick, je zaslán požadavek na Opera Mini server, kde je JavaScript zpracován a vám je pak nabídnuta výsledná stránka po zpracovaném skriptu. Ať to vypadá, jak chce divně, funguje to (tedy až na výjimky, viz dále).
• Během jedné události může být vykonána pouze jedna interakce s uživatelem (to je docela velké omezení nejspíše dané architekturou), takže skript „alert(0);“ proběhne bez problému, ale skript „alert(0); alert(1);“ skončí chybou.
• Funguje alert, ale již nefungují prompt nebo confirm.
• AJAX zdá se funguje. Minimálně jsem si byl schopen zahlasovat v AJAXové anketě na tomto blogu. Nezkoušel jsem poctivý asynchronní AJAX, tam by mohl být problém.
• Nejsou podporovány události onmouseover, onmouseout. Pokud na nich máte založeno rozbalovací menu, bude váš web nepřístupný. To bohužel platí i pro mé oblíbené NAVRCHOLU.cz 8-(

Dvě odlišná zobrazení

Opera Mini nabízí pro zobrazování webových stránek dva módy, mezi kterými můžete přepínat.

Mobilní zobrazení je po instalaci zapnuto u přístrojů s menším displayem (což platí i pro můj 128×160px) a zobrazuje web jako jednu úzkou nudli.

Desktopové zobrazení je standardně zapnuto u těch štastnějších a snaží se až na výjimky zobrazovat web, jak ho známe z klasických prohlížečů.

Obě zobrazení se výrazně liší nejen v zobrazení stránky, ale i v tom jak pracují s CSS.

• Mód desktop načítá CSS media screen a ignoruje CSS pro medium handheld (akceptuje kombinovaná média, např. media=„screen,handheld“).
• Jelikož Opera Mini umí CSS3 media queries, můžete použít např. media=„only screen and (max-device-width: 320px)“ pro přidání CSS pravidel pouze pro malá zařízení.
• Pokud je stránka v desktopovém zobrazení příliš široká, zobrazí Opera náhled stránky s obdélníkovou lupou. Tou se můžete po stránce snadno pohybovat a zvětšit si žádanou část. U užších stránek se lupa nezobrazí a stránky si prohlížíte přímo. Na mém maličkém display 128×160px se zvětšovací režim zapne, pokud je šířka stránky větší než 228px. V případě, že používám display na šířku, zvětšovací režim se zapne při šířce větší než 292px. Obecně mě vychází, že se zvětšovací režim zapne, pokud je velikost stránky větší než zhruba 1 a třičtvrtě šířky displaye.
• Navíc v desktopovém zobrazení je layout stránek na serveru připravován dle velikosti displaye zařízení (často poznáte rozdíl když přepnete display z šířky na výšku a reloadnete stránku). Dotkne se to hlavně bloků textu, ty jsou totiž zužovány do nudlí tak, aby se na váš display vešly. To je důležitý krok, protože pak lze text číst pouze skrolováním dolů (a nemusíte na každém řádku skrolovat do stran, což by bylo nemyslitelné). Např. tento blog bude v desktopovém režimu vypadat prakticky stejně jako ho vidíte na vašem desktopu, až na to, že text článku bude „znudlovatěn“ pro váš display (pouze text, layout stránky zůstane neupraven, v tom je ta finta), viz obr.

• Mód mobile na to jde jinak. Nyní se přepněme do mobilního módu a podívejme se, co se změní. Pokud má stránka CSS pro medium handheld, použije se a ostatní média včetně screen se ignorují (akceptuji se i kombinovaná média, např. media=„screen,handheld“). To však samo o sobě nestačí. Webů s handheld CSS je relativně málo a tak by uživatelé povětšinou procházeli stránky beze stylů. Na to je další finta.
• Pokud stránka žádný handheld stylesheet neobsahuje (když je handheld ze stránky odkazován, ale neexistuje a server vrací 404, je to stále bráno jako obsahuje), použije se SSR (small screen rendering). Prvně jsem se s SSR setkal u Daniela Glazmana, který na tom postavil Minimo (experimentální small screen rendering pro Gecko). To funguje tak, že se sice načtou obyčejné media screen CSS stánky, ale před nimi je aplikován tzv. SSR-stylesheet, který resetuje s příznakem important všechny layoutovací CSS vlastnosti (šířky, výšky, marginy, floaty atd.) u všech elementů. Ve výsledku tak stránka ztratí původní layout a vytvoří jednu dlouhou nudli (proto není zapotřebí lupy, po stránce se pohybujeme pouze směrem nahoru a dolů, šířka je daná vaším displayem), ale ponechá si základ ze svého look&feel (zachová se barva textu, barva pozadí, velikost textu…). Screenshot tohoto blogu v mobilním zobrazení:

• Mobilní mód umí jednu zajímavou vlastnost. Pokud narazí na dlouhý seznam (např. ul), tak jej sbalí. Zobrazí jen první položky a tlačítko plus pro rozbalení zbytku. Někdy se to povede, jindy naopak ne. Protože pokud máte černé pozadí, není na něm černé plus vůbec viditelné. Takže např. u mé homepage www.met.cz můžete stejně jako já dumat, proč vám Opera Mini schovala část textu stránky. Tak tedy neschovala, pouze ho sbalila a označila neviditelným plus.

Jak vidíte, ve výsledku si můžeme vybrat mezi zobrazením dlouhá nudle (mobilní zobrazení) a zobrazením několika nudlí (desktopové zobrazení). Já preferuji více nudlí, ale možná někdo přijde na chuť jedné dlouhé nudli.

Závěr

Snažil jsem se v tomto článku upozornit na některé nedostatky Opery Mini a věřím, že se mi to podařilo. Přesto ale Operu Mini hodnotím jako velmi povedený produkt.

Je ovšem jasné, že v Opeře Mini není budoucnost mobilního webu. Jedná se spíše o jakéhosi předskokana, který řeší potřebu mobilního webu v době, kdy většina lidí stále ještě přístroj pro plnohodnotné prohlížení webu nemá. Předskokana, který vyplní mezeru několika málo let, než se stav věcí změní.

Opera Mini může ve výsledku rozvoj mobilního webu značně urychlit. Pochopitelně jen v případě, že by se dostala k masám.

Smekám klobouk

Nedá mi to. Když by mi ještě nedávno kdokoliv řekl, že jde postavit webový prohlížeč způsobem, že vytvoří jen tenkého klienta a všechny základní kameny prohlížeče a la HTML parser, CSS parser, JavaScript engine atd. přesune na server (jak říká David Majda „ještě tenčí klient, než jste čekali“), nevěřil bych mu. Musím před Opera Software smeknout klobouk. Jim se to podařilo a nadmíru elegantně. Přes všechny nedostatky došli na této cestě dál než všichni ostatní. Viva Opera!

Dodatek speciálně pro JasnouPaku a AHA: S Webkitem nekončím, jen jsem ještě neměl možnost odzkoušet S60 8-)

Související články

• Opera Mobile vs. Opera Mini
• Prohlížeč pro S60 aneb Skoro-WebKit v mobilu