Mobilní uživatelé dobývají internet. A trpí. Pracovat s běžnou webovou stránku na malém displeji telefonu je totiž většinou za trest. Proto je vhodné nabídnout jim přizpůsobenou verzi stránek. Vytvořit ji přitom není tak složité.

Mobilní uživatelé používají stránky jinak

  • Nemají myš ani pohodlnou klávesnici. Web ovládají šmatláním prstu po displeji.
  • Web často používají mimo domov, nemají tolik pohodlí ani času jako u počítače.
  • Displej jejich zařízení je prťavý a špatně čitelný na slunci.
  • Jejich řipojení k internetu je pomalejší.
  • Výkon jejich zařízení je nižší, stránky se jim načítají déle.
  • Často platí za přenesená data, tedy i za zobrazení vaší stránky.
  • Nebaví je psát. Na dotykovém displeji je to strašná pruda.

Tohle všechno musíme vzít v potaz a nějak se s tím popasovat.


Tři způsoby, jak udělat mobilní verzi

1. Univerzální responzivní design, který se přizpůsobuje zařízení uživatele
Na malém displeji se některé prvky automaticky přesunou nebo změní. Design, obsah i zdrojový kód stránky zůstává společný. Zobrazení obsahu je společné pro desktop i mobil, prvky stránky se však přeskládávají nebo skrývají podle velikosti displeje.

2. Oddělená mobilní verze webu
Oddělená mobilní verze určená pouze pro zařízení jako jsou telefony a tablety. Část obsahu je vynechána a část zobrazena zjednodušeně. HTML, CSS, JS kód i design je výrazně zjednodušený a často odlišný od verze pro PC. Část obsahu se vůbec nenačítá, část se zobrazuje upravená, část se skrývá v závislosti na velikosti displeje.

3. Samostatná mobilní stránka
Mobilní web fungující nezávisle na hlavní stránkách. Používá vlastní kód i obsah, který je nutno spravovat zvlášť.

Všechna řešení mají své výhody a nevýhody. Doporučuju oddělenou mobilní verzi, o které bude tento článek. Výhod je více: stránky se načítají mnohem rychleji, není třeba brát ohledy na velké monitory, můžeme více zjednodušovat, osekávat design a vyhnout se načítání obsahu, který se pro mobilní zařízení nehodí (reklamní bannery, slideshow, apod.). Zároveň nemusíme zasahovat do administrace, protože upravujeme pouze frontend. Z hlediska tvorby obsahu pak nevzniká žádná práce navíc.

Klasická a mobilní verze stránky
Klasická a mobilní verze stránky


1. Nastavte bílé pozadí a černý text

Možná se to nehodí vašeho designu. Vypadá to suše. Ale vaši uživatelé to uvítají. Zvláště na sluníčku je vysoký kontrast stránky na mobilním telefonu kriticky důležitý. Mnohdy to znamená rozdíl mezi stránkou, kterou si uživatel přečte a kterou opustí.


2. Plýtvejte místem

Zní to potrhle, že? Máme prťavý displej, na který se toho vejde výrazně méně než na monitor a ještě mu budeme ukrajovat drahocenné místo volnými plochami? Přesně tak. Důvod je jednoduchý: čitelnost a přehlednost. Když text naňahňáte na sebe, sice se toho na displej vejde více, ale nevyzná se v tom ani prase. CSS atribut padding je váš přítel. Nastavte pro body padding: 20px zleva i zprava. Odstavcům přidejte klidně levý a pravý padding: 30px. Zvyšte řádkování pomocí CSS vlastnosti line-height:150%. Ano, vzniknou masy volného místa. Skoro by to až vypadalo jako plýtvání. Ale čitelnost vystřelí vzhůru.

Využití bílého místa a vyššího kontrastu
Využití bílého místa a vyššího kontrastu


3. Zjednodušte menu

Klasické menu rozbalující se po najetí myši fungovat nebude. Kromě toho, že mobilní uživatelé nemohou "pohybovat myší", zblázní se při neustálém šourání prstem po displeji doleva, doprava, nahoru, dolů. Navíc se vám celé menu na malé displeje nejspíš ani nevejde. Uděláme to jinak. Všichni mobilní uživatelé přece znají typickou ikonku menu, se kterou se denně setkávají v mobilních aplikacích. Udělejte jim radost a použijte ji také. Stačí jeden "klik" prstem a menu se vysune. A nezapomeňte, padding je váš přítel. Položky menu musí být dostatečné velké. Není nic horšího, než když se uživatel nemůže trefit na odkaz a sem tam klikne na něco jiného. V té chvíli by vás nejraději zastřelil.

Tlačítko pro menu umístěte do pravého horního rohu obrazovky, protože je to nejblíž k palci na ruce, kterou pravák drží tablet či mobil. Mnoho mobilních stránek má menu chybně vlevo. Tam je to logické na klasické verzi stránek, ale nelogické pro mobilního uživatele. Jakmile uživatel na tlačítko Menu "klikne", menu se musí zobrazit tak, aby nebylo nutné dělat zbytečné pohyby prstem ve více směrech. Optimálně pouze nahoru a dolů. Musí být jednoduché, přehledné a jednoduše použitelné. Takže hlavně velké.

Menu mobilní verze stránek
Menu mobilní verze stránek


4. Zvýrazněte vyhledávání

Spousta uživatelů na mobilním zařízení nemá chuť procházet vašimi stránkami sem a tam, aby něco našli. Jen se vžijte do jejich kůže. Cesta autobusem, školní lavice, posezení v parku. Kdo by chtěl trávit na jednom webu půl dne? Tím spíš, když ještě platí operátorovi za přenesená data. Tedy za zobrazení každé stránky. Buďte ohleduplní a nabídněte těm chudákům fulltextové vyhledávání. Zobrazte přímo vyhledávací políčko nebo umístěte vedle odkazu na menu velkou ikonku lupy, kterou všichni dobře znají.


5. Počítejte s různou velikostí displeje

Tohle je obzvlášť důležité. Nejmenší mobily mají displej s úhlopříčkou okolo osmi centimetrů. To je fakt málo. A musíme s tím počítat. Na tak malé ploše je problém nejen stránku ovládat, ale i přečíst. Oproti tomu úhlopříčka větších tabletů je i 25 centimetrů. Ale jak uspokojíme uživatele pidimobilů a zároveň majitele větších tabletů? Řešení se jmenuje Media Query v CSS. Tato technika umožňuje vytvořit několik různých variant stylů, které se nastaví právě podle velikosti displeje. Přitom vše zůstává v jednom CSS souboru. Říká se tomu responzivita nebo responzivní web.

Sám používám pro mobilní stránky čtyři breakpointy

@media (min-width: 1301px) {CSS vlastnosti pro obrazovky nad 1300px šířky...}
@media (max-width: 1300px) {CSS vlastnosti pro obrazovky od 801px do 1300px šířky...}
@media (max-width: 800px) {CSS vlastnosti pro obrazovky od 401px do 800px šířky...}
@media (max-width: 400px) {CSS vlastnosti pro obrazovky do 400px šířky...}

V první sadě vlastností je největší písmo, největší rozestupy mezi bloky textu, největší řádkování, velké položky i tlačítka. Zároveň je omezena šířka obsahu na 1200px. Pokud bychom šířku neomezovali, na širokých displejích by byly řádky textu příliš dlouhé. Oko by mělo problém přeskakovat z konce jednoho řádku na druhý. V poslední sadě vlastností by pak mělo být nejmenší písmo a zároveň by měly být vypnuty všechny zbytečné designové prvky (např. méně důležité obrázky, logo, apod.), které zabírají místo a nenesou důležitou informaci. Na takto malých displejích je nutné zobrazovat jen to nejdůležitější.

Mobilní verze na různých velikostech obrazovky
Mobilní verze na různých velikostech obrazovky


6. Zobrazte mobilní verzi automaticky

Při každém načtení stránky zjistěte, zda uživatel používá počítač nebo mobilní zařízení. A podle toho mu zobrazíte klasickou nebo mobilní verzi. Jak? Stačí se podívat na hodnotu HTTP_USER_AGENT, kterou každý prohlížeč automaticky posílá ve všech požadavcích. Bude v ní něco takového:

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.111 Safari/537.36

V tomto případě je vidět, že uživatel používá Windows XP (NT 5.1) a prohlížeč Google Chrome 40. Každý operační systém i prohlížeč má vlastní označení. Stačí tedy použít databázi značek mobilních zařízení a s tou porovnávat aktuální hodnotu HTTP_USER_AGENT. PHP script, který to dělá, vypadá takto:

if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|android|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|playbook|plucker|pocket|ppc|psp|series(4|6)0|silk|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$_SERVER['HTTP_USER_AGENT'])||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($_SERVER['HTTP_USER_AGENT'],0,4))) {$mobile = 1;}

Ve zbytku kódu už stačí jen kontrolovat existenci proměnné $mobile. Pokud existuje, načteme PHP soubor se šablonou a CSS stylem pro mobilní uživatele, jinak načteme klasickou šablonu pro stolní PC. Kódy pro další programovací jazyky jsou k dispozici na webu detectmobilebrowsers.com (uvedený kód jsem upravil a doplnil o detekci tabletů).


7. Umožněte přepínání mezi klasickou a mobilní verzí

Pro případ, že by váš script detekoval zařízení chybně nebo pro uživatele, kteří i na mobilu preferují plnohodnotný design, umožněte přepínání mezi mobilní a klasickou verzí stránky. Na klasické verzi umístěte do patičky stránky odkaz na mobilní verzi. A na mobilní verzi umístěte hned na začátek k logu a také do patičky odkaz na klasickou verzi. Pokud si uživatel kliknutím na takový odkaz nastaví jinou verzi, než jste mu nabídli jako výchozí, uložte volbu do cookies. Jeho prohlížeč si ji bude pamatovat.


8. Optimalizujte zobrazení videa

Uživatelé na mobilu uvítají, když se jim YouTube videa zobrazí automaticky roztažená přes celou šířku stránky. Tento krátký javascriptový kód využívající knihovnu jQuery to zařídí za vás:

var $allVideos = $('iframe[src*=\'youtube\']'), $fluidEl = $('#content');
$allVideos.each(function() {$(this).data('aspectRatio',this.height/this.width).removeAttr('height').removeAttr('width');});
$(window).resize(function() {var newWidth = $fluidEl.width();
$allVideos.each(function() {var $el = $(this); $el.width(newWidth).height(newWidth * $el.data('aspectRatio'));});
}).resize();

Selector #content nahraďte za vlastní - měl by to být div, který ohraničuje obsah stránky. Script nejprve najde všechny přehrávače YouTube na stránce. Poté načte a uloží poměr stran a poté odstraní atributy šířky a výšky. Nakonec nastaví všem videím šířku přes celou stránku a výšku dopočítá podle poměru uloženého v prvním kroku.


9. Ošetřete zobrazení velkých obrázků

Pokud obrázkům v desktopové verzi nastavujete pevné rozměry (což byste měli, protože se tím eliminuje poskakování stránky během načítání), pravděpodobně narazíte na problém. Na malém displeji se velké obrázky nevejdou na obrazovku. Vložením následujícího řádku do CSS souboru zajistíte, že velikost obrázku nikdy nepřekročí šířku obrazovky. Velké obrázky se automaticky přizpůsobí displeji.

#content img {max-width: 100% !important; height: auto !important;}

Selector #content nahraďte za vlastní - měl by to být div, který ohraničuje obsah stránky.


10. Minimalizujte počet načítaných souborů

Téměř 50 % lidí očekává, že se jim web načte do dvou vteřin a 40 % uživatelů odejde, pokud se stránka nenačte do 3 vteřin. Podle průzkumu KissMetrics stojí 1 vteřina načítání stránky až 7 % zákazníků.

Na desktopové verzi si můžete dovolit načítat 10 css a 15 javascriptových souborů najednou (i když pokud to děláte, pravděpodobně máte chybně navržený web). V mobilní verzi ne. Mobil načítá stránku mnohem pomaleji než počítač. Sjednoťte všechny CSS/JS soubory do jednoho, dvou. A ještě je zkomprimujte. Čím více samostatných souborů se načítá, tím déle uživatel musí čekat na zobrazení stránky a může docházet k trhání při pohybu. Fikané je načítat externí soubory až v případě, že jsou potřeba. Typické je to u like tlačítek pro sociální sítě jako je Facebook, Google Plus nebo Twitter. Obvyklé řešení je nechat je načít ihned při načítání stránky. Jenže to je zrovna okamžik, kdy uživatel čeká... a čeká... a čeká... zvláště pokud má pomalejší připojení k internetu. Přitom není důvod čekat na načtení tlačítek umístěných až někde pod článkem, tedy na místě, kam se uživatel dostane nejdříve za několik desítek vteřin nebo dokonce nikdy. Načtěte tato tlačítka až v okamžiku, kdy k nim uživatel doscrolluje.


11. Nabídněte alternativní cesty

Jsou lidé, pro které je nejpohodlnější proklikat se webem klasickým způsobem. Jiní preferují vyhledávání. Někdo raději používá menu. Snažte se všem zpříjemnit zážitek a nabídněte i další cesty. Skvělá je drobečková navigace, kdy pod hlavním nadpisem zobrazíte umístění aktuální stránky v hierarchii webu. Například Úvod > Název rubriky > Název stránky. Kromě toho, že uživatel ihned uvidí, kde se nachází, může kliknutím přejít přímo do nadřazané rubriky nebo na úvodní stránku. Pod článkem pak nabídněte odkazy na podobné články. Úplně vespod klidně zobrazte znovu všechny odkazy hlavního menu. Užitečná je i mapa stránek. Vždy nabídněte uživateli další obsah, aby neměl důvod váš web opustit. Nezapomeňte, váš zákazník je vždy jeden klik od konkurence.

Výborným doplňkem je také několik variant odkazů v seznamu článků. Někteří lidé jsou zvyklí prokliknout se na detail článku kliknutím na perexový obrázek, někdo raději kliká na nadpis článku a někdo preferujte tlačítko "více". Nebojte se nabídnout všechny tři možnosti. Ať lidé používají web tak, jak jsou zvyklí. Nenuťte jim svou cestu.

Mobilní verze - více odkazů vede na stejný cíl
Mobilní verze - více odkazů vede na stejný cíl


12. Používejte tlačítka

Kde je to možné, používejte místo odkazů velká tlačítka. Jsou čitelná a lehce se na ně trefuje prstem. Mobilní uživatelé je milují. Jako tlačítka můžete zpracovat i původně netlačítkový obsah. Typicky dokumenty ke stažení, kategorie ve fotogalerii, témata diskusních fór, apod.

Tlačítkům nastavte šířku přes celou obrazovku. Text tlačítek udržujte maximálně stručný. Pokud je příliš dlouhý, zkraťte ho automaticky pomocí těchto CSS:

text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

Tímto zajistíte, že dlouhý text v tlačítku se nebude zalamovat na více řádků a pokud se do tlačítka nevejde, automaticky se zkrátí a doplní třemi tečkami.

Mobilní verze - tlačítka místo klasických odkazů
Desktopová vs mobilní verze - tlačítka místo klasických odkazů


13. Nenačítejte reklamu

Velká část mobilních uživatelů platí za přenesená data. Když jim budete zobrazovat to, co je nezajímá nebo dokonce obtěžuje, otočí se na podpadku a odejdou. Vypněte v mobilní verzi veškerou reklamu, slideshow i další zbytečnosti. Reklama je otravná už tím, že existuje. Když za ni nutíte uživatele ještě platit, už je na svém webu neuvidíte. Nevyplatí se vám to. Nemějte strach, že přijdete o zobrazení reklam. Pokud získáte nového mobilního uživatele, je vysoká pravděpodobnost, že si váš web s reklamou prohlédne později na počítači.


14. Testujte. Testujte. Znovu testujte.

Mobilních zařízení je obrovská škála, liší se nejen velikostí displeje, ale i výkonem a (ne)podporou různých technologií. Otestujte mobilní verzi na co největším množství mobilů i tabletů. Budete se divit, že na některých z nich se vaše stránky zobrazí úplně jinak, než očekáváte. Počítejte s tím, že testování, opravy a ladění zabere minimálně tolik práce, co kompletní návrh a zpracování mobilního webu.


15. Důležité rady nakonec

  • Upozorněte uživatele, že má zobrazenu mobilní verzi. Může ji omylem považovat za vaši plnohodnotnou stránku.
  • Koncipujte tok stránky vertikálně. Na širokoúhlém monitoru dává smysl zobrazovat obrázky vedle sebe, používat široké tabulky nebo vícesloupcový design. Na displeji telefonu, který navíc často lidé používají ve svislé poloze, je takový obsah nečitelný. Koncentrujte vše do jednoho sloupce.
  • Nenastavujte prvkům, které obsahují vlastní posuvník (mapy, diskusní chaty, apod.), příliš velkou šířku. Pokud uživatel potáhne prstem uvnitř takového objektu, bude posouvat obsah uvnitř, nikoliv celou stránku. A pokud bude tento objekt svou šířkou zabírat celou plochu displeje, uživatel se může dostat do situace, kdy nebude schopen posunout stránku nahoru ani dolů. Vhodné je nastavit podobným prvkům šířku 80 % a zarovnat je vlevo, aby měl uživatel prostor v místech, kde pravým palcem posouvá obrazovku.
  • Nepočítejte s podporou Flashe. Mobilní zařízení už Flash v drtivé většině nepodporují.
  • Nespoléhejte na detekci pohybu myši po obrazovce (css selektory :hover a javascriptové události onmouseover). Počítejte s tím, že uživatel může pouze klikat.
  • Zvětšete formulářová pole, aby se do nich lidé lehce trefili prstem. Neumísťujte formulářové prvky vedle sebe, ale vždy pod sebe. Raději ať je formulář vertikálně větší, než aby se na malé obrazovce zobrazila prťavá textová políčka vedle sebe.
  • Nevyžadujte zbytečné psaní. Na mobilu je to otrava. Lidé se vám na to vyprdnou.
  • Neblokujte možnost zoomovat pro mobilní prohlížeče. Tohle je častá chyba. Přitom to nedává smysl - zablokováním zoomu ničemu nepomůžete. Vyvarujte se tohoto meta tagu: < meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  • Nebojte se používat pokročilejší vlastnosti moderních prohlížečů. HTML5 i CSS3 vám ulehčí spoustu práce. Nemusíte se ohlížet na Internet Explorer 8 a starší, protože na mobilech neexistuje.
  • Mobilních uživatelů je stále více. Na některých webech je to i 60 a více procent z celkové návštěvnosti. Význam mobilní verze webu narůstá a brzy bude důležitější než klasické stránky.
  • Nepoužívejte pro mobilní verzi oddělenou URL adresu nebo subdoménu (často se používá např. http://m.web.cz). Zdá se to jako dobrý nápad? Jen do té doby, než uživatel mobilní verze pošle odkaz na stránku, kterou právě vidí, někomu jinému. Nebo ji sdílí na sociálních sítích. Přímo v odkazu je pevně nastavena mobilní verze, která se pak zobrazí i nemobilním uživatelům. Toto je častá chyba i na velkých serverech. A uživatelé u stolních PC trpí. Nehledě na problémy s vyhledávači, certifikáty a podobně.
  • Omezte maximální šířku bloku s textem. Příliš dlouhé řádky na velkých displejích se velmi špatně čtou.
Vytisknout stránku Vytisknout stránkuMichal Škrabálek, 17. 2. 2015, 07:29, zobrazeno 18392x, dnes 0x
3.6 13Hodnocení