Zpět

Specifika mobilního webu

Od dob čtrnáctipalcových CRT monitorů s rozlišením 640×480 technický vývoj poněkud pokročil, takže už se webové stránky nemusí tísnit na malých obrazovkách. Tedy nemusely, dokud nepřišly chytré telefony a jejich kapesní displeje, pro které je 640×480 luxus.

Naštěstí pokročil i vývoj softwaru a ovládacích rozhraní, takže i na mrňavém prkýnku můžeme celkem pohodlně surfovat. Má to ovšem svoje zvláštnosti, na které bychom při tvorbě internetových stránek neměli zapomínat.

Uživatel nemá myš

Má jenom dotykový displej a prsty. Jediné, na co se dá bezpečně spolehnout, je jednoduché kliknutí levým myšítkem: ťuknutí na odkaz, stisknutí tlačítka nebo událost onclick. Většinou existuje i nějaký ekvivalent pravého myšítka (obvykle dlouhý stisk), ale to je asi tak všechno.

Co z toho vyplývá? Jestli si navigaci stránek založíte na javascriptovém menu, které se rozbaluje podle toho, jak ho přejíždí myš, bude pro dotykové obrazovky pravděpodobně nepoužitelná, protože prst může jenom klikat. Rovněž si nikdo nepřečte poznámky v atributu title, vysvětlivky k acronymům a podobně. Událost onmouseover se při ťuknutí vyhodnotí, pokud na stejném objektu není zároveň onclick, ale nespoléhal bych na to. Bezpečnější je udělat všechno klikací a na přejíždění kurzorem stavět jenom postradatelné grafické efekty a ozdoby.

Další důležité doporučení je, aby byly všechny aktivní věci na první pohled poznat. Tedy aby bylo i bez přejíždění kurzorem jasné, co je odkaz a co jenom zvýrazněný text.

Načítání může být pomalé a poruchové

Počítejte s tím, že někteří mobilní operátoři poskytují rychlost připojení v řádu jednotek KB za sekundu. Vítejte zpátky v dobách vytáčeného připojení! Navíc se často platí za každý přenesený kilobajt, takže uživatel zastavuje načítání, jakmile se stáhne to, co ho zajímá. Případně se načítání může zastavit samo, když na chvíli vypadne signál. Dá se samozřejmě připojit přes wi-fi nebo si vybrat nějakého lepšího operátora, ale nedá se spoléhat na to, že to udělají všichni.

Co z toho pro nás vyplývá? Zaprvé, udržujte datové objemy stránek co nejmenší. Většina grafiky se dá nakódovat v CSS, zbylé obrázky se určitě dají lépe zkomprimovat (na co 50KB logo?), neovlivnitelný kód reklam se dá umístit na konec zdrojáku a napozicovat absolutně.

Zadruhé, stránka musí fungovat, i když se nenačetla celá. Obzvláště kritické to je u formulářů: je velice nepříjemné něco pracně vyplnit a pak zjistit, že odesílací tlačítko nefunguje, protože se nenačetl složitý externí javascript, který ho měl obsluhovat (takže zbývá refresh a nové vyplňování). Proto u formulářů používejte pokud možno výhradně klasické submity a všechny serepetičky nechte v PHP na straně serveru.

Scrolluje se prstem, ne posuvníkem nebo klávesami

Klasické posuvníky se na mobilech nezobrazují, místo nich během posouvání uvidíte nanejvýš nějaký nenápadný ukazatel pozice ve stránce. A protože šoupání prstem po kterémkoli místě vždycky znamená posun celé stránky, zapomeňte na ovládací prvky ve stylu "click and drag". Speciální vlastnoručně naprogramované posuvníky obecně nejsou problém, ale musí být ovladatelné i klikáním (onclick), ne jenom taháním.

Další potíž je, že nefungují běžné navigační klávesy jako třeba Home nebo End. Některé mobilní prohlížeče poskytují nějaký ekvivalent, jiné ne a k navigační liště se musí rolovat ručně. Proto není od věci pomocí kotvy typu stranka.htm#nekam umožnit rychlý skok např. nahoru k navigaci. Jenom prosím vás nedělejte takový odkaz plovoucí a zakrývající část textu stránky, to je na zabití.

Kapitola sama pro sebe jsou rámy. Některé prohlížeče je umí posouvat nezávisle, ostatní je slepí napevno a vy pak šoupete všemi najednou, jako by šlo o jedinou stránku. Rámy přes celou výšku nebo šířku okna (frameset) fungují bez problémů, horší je to s vnořenými rámečky uvnitř stránek (iframe). Některé prohlížeče takový rám roztáhnou na výšku, aby byl bez posouvání vidět celý jeho obsah, což může trochu rozhodit rozvržení stránek. Jiné zobrazí rám přesně podle zadaných rozměrů a co se do nich nevejde, to prostě neuvidíte. Z toho vyplývá, že iframy se dají bezpečně použít jedině když víte, že se do nich obsah bezpečně vejde i bez posouvání.

Nemůžeme všichni všechno

Na PC můžeme předpokládat, že si uživatel umí zkopírovat adresu odkazu, podívat se na zdroják, přepnout kódování, deaktivovat styly, změnit písmo, vypnout nebo zapnout skripty a podobně. V mobilních prohlížečích většina těchto "pokročilých" možností prostě není. Spolehnout se dá jenom na možnost otvírání odkazů do nových oken, ukládání obrázků a kopírování úseků textu do schránky. Zkrátka optimalizujte stránky jakoby pro lamy, které nevědí, že myš má dvě tlačítka.

Flash

Dělat hlavní navigační lištu ve Flashi je blbost, protože na mobilech takovéhle věci většinou nefungují a doinstalovávat pluginy třeba ani nejde. Z takové stránky návštěvník uvidí akorát úvodní text a prázdný obdélník. Takže jestli nutně potřebujete zamachrovat Flashem, omezte ho na nepodstatnou oživující grafiku, reklamy a podobně, nebo aspoň dopište nějakou alternativní navigaci z obyčejných odkazů.

Malá obrazovka a nepohodlná klávesnice

Samotná mrňavost displejů není žádný zásadní problém, od toho existuje zoomování (většinou se dělá přímo dvěma prsty, takže nijak nezdržuje). Potíž ovšem je, že ne každý prohlížeč umí zvětšený text automaticky zalamovat podle šířky okna, takže pak musíte při čtení honit stránku sem a tam. Dá se nastavit větší písmo, ale to pak zase rozhodí design stránky, pokud byl stavěný na nějakou pevnou velikost. Ideální je navrhnout velikost písma a šířku sloupců tak, aby to i na deseticentimetrovém displeji bylo čitelné.

S přesností prstů potíže nejsou, odkazy a tlačítka si vždycky můžeme na chvilku zvětšit a pak už se nějak trefíme. Některé prohlížeče nám dokonce automaticky přizoomují, když omylem ťukneme na víc odkazů najednou. Takže rozhodně není nutné dělat všechny ovládací prvky velké jak pro slona.

Na virtuální klávesnici se pochopitelně nedá psát tak dobře jako na reálné, protože jí chybí hmatová zpětná vazba a nedá se datlovat více prsty najednou. Navíc klávesnice zakrývá část zobrazené stránky, někdy dokonce celou. Na to myslete hlavně při navrhování různých antispamů - opsat kód z obrázku nemusí být vůbec jednoduché. Taky opatrně s různě oskriptovanými textovými poli a WYSIWYG editory. Klávesnice si píše do svého vlastního plaintextového okénka a to potom přesype do příslušného inputu nebo textarey, takže moc nepočítejte s vyhodnocováním jednotlivých kláves nebo formátováním pomocí tlačítek.

Dohromady, nebo zvlášť?

Naskýtá se otázka, jestli je lepší dělat stránku "obojživelnou" pro PC i mobily, nebo ji rozdělit na klasickou a mobilní verzi.

Pokud máte nějaký megaweb, který se neobejde bez půl megabytu reklam a grafiky na titulní stránce, ale zároveň potřebujete, aby byl snadno a rychle přístupný přes kapesní telefony, asi vám nezbyde než napsat dvě oddělené verze. Typický příklad je třeba server s jízdními řády. Výhodou je možnost optimalizace přesně pro cílové zařízení, nevýhodou nutnost starat se o dva různé weby.

Systém jedné univerzálně přizpůsobivé stránky má řadu jiných výhod. Tvůrce nemusí řešit údržbu a synchronizaci dvou stránek. Návštěvník vidí jeden obsah a ví, že mu nic neuniklo (to mi na mobilních verzích vadí nejvíc: bývají osekané, takže pak stejně musím přepnout na plnou verzi, abych našel to, co hledám). A co rychle a bezchybně funguje na mobilech, to na písíčku funguje ještě rychleji a bezchybněji.

Sranda je, jak se od "moderního" designu webů s pevnými rozměry vracíme zpátky k "zastaralému" rozvržení podle šířky obrazovky, akorát tomu teď vznešeně říkáme responsivní design :-).

Najednou, nebo po kouscích?

Další otázka: je lepší nechat stránku zobrazit celou, nebo radši nejdřív jenom kousek a zbytek dososat, až když si to uživatel bude přát? Podle mého soukromého názoru je postupné načítání totální pitomost. Nevím, jak se po internetu pohybují ostatní, ale já vždycky jednu stránku čtu a další mezitím nechávám v jiném okně načítat (ani nevím, jestli existuje nějaký mobilní prohlížeč, který by to neuměl). Když po mně nějaká stránka chce, abych kvůli každému odstavci klikal a čekal na načtení, může si trhnout nohou, zavírám ji a jdu jinam.

Další možnost je načíst sice všechno, ale pak to pomocí display:none schovat a pomocí javascriptu na vyžádání zase zobrazovat (takhle to dělá třeba mobilní verze Wikipedie). V tom případě se při rozklikávání nečeká na stažení, ale na to, až si to prohlížeč naskládá do okna, což může taky chvíli trvat. Navíc přibude hromada skriptů.

Doporučoval bych tedy zobrazit stránku normálně celou a rychlost vylepšit spíš zredukováním přebytečné grafiky a externích skriptů. Ale to je spíš můj subjektivní názor než obecné doporučení, někomu třeba může postupné rozklikávání vyhovovat víc.

Závěr

Optimalizujte pro rychlé načítání, nepřehánějte to s klientskými skripty, vykašlete se na Flash, neriskujte s iframy, používejte přiměřenou velikost písma a délku řádků.

A hlavně: v jednoduchosti je síla.

Zpět

Reklamy: