Jak převést webové stránky pro mobilní Browser

Mobilní zařízení, jako jsou smartphony a tablety, tvoří více než polovinu veškerého internetového provozu. Podle průzkumu provedeného společností BrightEdge v roce 2014 však více než čtvrtina navštívených webových stránek není pro tato zařízení správně nakonfigurována - v průměru je to 68% ztráta v provozu. Správná úprava vlastního webu pro mobilní prohlížeče vyžaduje plánování a testování. Samotné kódování však obvykle není příliš náročné, zejména pokud jste již obeznámeni s CSS. Pokud používáte platformu, jako je WordPress, nemusíte znát kód vůbec.

Společné platformy
Od nástupu iPhone vývojáři za webovými platformami jako WordPress, Joomla a Drupal mají integrovaný mobilní design. Drupal, například, přichází s mobilními tématy v původní instalaci. Každá z těchto platforem má mobilní motivy, které jsou navrženy tak, aby mohly kopat, jakmile vaše webové stránky zjistí, že k nim přistupuje mobilní prohlížeč. Další motivy jsou již mobilní a budou reagovat na dotyková gesta, stejně jako budou reagovat na kliknutí myší, aniž by významně změnily vzhled nebo rozvržení webových stránek napříč různými zařízeními.

Používání CSS a HTML
Pro Webové stránky HTML, použijte kaskádový styl nebo CSS soubor, který bude zobrazovat mobilní verzi vašich stránek, když k nim přistupuje mobilní prohlížeč. I když je možné kódovat CSS pro detekci konkrétních zařízení, běžnějším přístupem je určit rozvržení podle velikosti obrazovky v pixelech. V případě potřeby můžete mít jeden styl pro velké obrazovky, jeden pro tablety a jeden pro mobilní telefony. Použití CSS má další výhodu v tom, že stačí pouze jednou napsat kód - v souboru CSS. Každá z vašich stránek pak potřebuje k vykreslení svých stylů pouze jeden řádek kódu z CSS.

Interaktivní funkce dotykové obrazovky
Pokud jste nakonfigurovali webovou stránku jako interaktivní zážitek pro návštěvníky pomocí jazyka JavaScript nebo HTML5 Je důležité, abyste věděli, jak budou vaše webové stránky reagovat na dotykové události, a to nejen v mobilním prohlížeči, ale i na rostoucím počtu počítačů s dotykovou obrazovkou. Ve většině případů byste měli zvážit přidání dotykových událostí a gest do kódu návrhu. Například v aplikaci JQuery je ekvivalentem klepnutí myší na dotykové obrazovce událost klepnutí, která se spustí, když se uživatel dotkne a potom zvedne prst z obrazovky. V závislosti na vaší stránce můžete také zakázat výchozí nastavení mobilního prohlížeče, jako je například klepnutí na přiblížení nebo přetažení, pomocí rolí „preventDefault“.

Testování a ověřování
Nejlepší způsob, jak otestujte, zda vaše nové mobilní webové stránky používají vlastní mobilní zařízení. Prohlédněte si styl a rozložení stránky, navigujte s dotyky a gesty a pozorně se podívejte na obrázky, abyste se ujistili, že vypadají ostře. K emulaci mobilního displeje můžete také použít webový prohlížeč počítače. Například v prohlížeči Google Chrome otevřete konzolu vývojáře stisknutím klávesy F12. Klikněte na ikonu Nastavení a poté klikněte na kartu Emulace a vyberte zařízení, jako je Google Nexus nebo Apple iPad.
URL:https://cs.whycomputer.com/Internet/100101856.html