Jak přizpůsobit webové stránky pro mobilní prohlížeče

Mobilní zařízení, jako jsou chytré telefony a tablety, představují více než polovinu veškerého internetového provozu. Přesto podle výzkumu BrightEdge z roku 2014 není více než čtvrtina navštěvovaných webů optimalizována pro tato zařízení, což vede k průměrnému poklesu návštěvnosti až o 68 %.

Úprava webu pro mobilní prohlížeče vyžaduje plánování a testování, ale samotné kódování není obvykle složité, zejména pokud už máte zkušenosti s CSS. Na platformách jako WordPress můžete úpravu provést i bez znalosti kódu.

Obvyklé platformy

Od doby, kdy se objevil iPhone, začaly platformy jako WordPress, Joomla a Drupal integrovat mobilní design. Například Drupal již v základní instalaci obsahuje témata optimalizovaná pro mobily. Každá z těchto platforem nabízí mobilní šablony, které se aktivují automaticky, jakmile server rozpozná přístup z mobilního prohlížeče. Další šablony jsou od začátku responzivní a reagují na dotyková gesta stejně jako na kliknutí myší, aniž by výrazně měnily vzhled webu na různých zařízeních.

Použití CSS a HTML

U HTML stránek můžete pomocí souboru kaskádových stylů (CSS) zobrazit mobilní verzi stránek, když jsou načteny v mobilním prohlížeči. Místo detekce konkrétních zařízení se častěji používá responzivní návrh založený na šířce obrazovky v pixelech. Můžete tak mít jeden styl pro velké obrazovky, jeden pro tablety a další pro chytré telefony. Výhodou CSS je, že kód napíšete jen jednou – v souboru stylů – a každá stránka potřebuje pouze jediný odkaz na tento soubor.

Interaktivní funkce pro dotykové obrazovky

Pokud je vaše stránka interaktivní díky JavaScriptu nebo HTML5, musíte zajistit, aby správně reagovala na dotykové události nejen v mobilních prohlížečích, ale i na rostoucím počtu dotykových stolních počítačů. V mnoha případech je vhodné do kódu přidat podporu dotykových událostí a gest. V jQuery například ekvivalentem kliknutí myší na dotykové obrazovce je událost tap, která se spustí po dotyku a následném zvednutí prstu. V závislosti na stránce můžete také zakázat výchozí chování mobilních prohlížečů, jako je přibližování gesto „pinch“ nebo posouvání, pomocí metody preventDefault().

Testování a ověřování

Nejlepší způsob, jak otestovat mobilní verzi webu, je použít vlastní mobilní zařízení. Zkontrolujte vzhled a rozvržení, ověřte funkčnost dotyků a gest a ujistěte se, že obrázky zůstávají ostré. Pro rychlé ověření můžete také využít emulaci v počítačovém prohlížeči. V Google Chrome otevřete vývojářskou konzoli klávesou F12, klikněte na ikonu nastavení a v záložce „Emulation“ vyberte zařízení, například Google Nexus nebo iPad.