Ako previesť webovú stránku na mobilný prehliadač

Mobilné zariadenia, napríklad smartfóny a tablety, predstavujú viac ako polovicu všetkej internetovej prevádzky. Podľa prieskumu spoločnosti BrightEdge v roku 2014 však viac ako štvrtina webových stránok, ktoré ľudia navštevujú, nie je pre tieto zariadenia správne nakonfigurovaná - ich cena je v priemere o 68 percent nižšia. Správna úprava vlastnej webovej stránky pre mobilné prehliadače si vyžaduje plánovanie a testovanie. Samotné kódovanie však zvyčajne nie je príliš náročné, najmä ak už poznáte CSS. Ak používate platformu ako WordPress, nepotrebujete vôbec žiadny kód.

Bežné platformy

Od nástupu iPhone vývojári za platformami webových stránok ako WordPress, Joomla a Drupal. majú integrovaný mobilný dizajn. Napríklad Drupal prichádza s témami prispôsobenými pre mobilné zariadenia v pôvodnej inštalácii. Každá z týchto platforiem obsahuje mobilné témy, ktoré sú navrhnuté tak, aby sa spustili hneď, ako vaše webové stránky zistia, že k nim pristupuje mobilný prehliadač. Ostatné témy sú už prispôsobené pre mobilné zariadenia a reagujú na dotykové gestá rovnako, ako reagujú na kliknutia myšou, bez toho, aby sa výrazne zmenila podoba alebo rozloženie vášho webu na rôznych zariadeniach.

Používanie CSS a HTML

Pre Webové stránky HTML, použite kaskádový štýl alebo CSS súbor na prezentáciu mobilnej verzie vašich stránok, keď k nim pristupuje mobilný prehliadač. Aj keď je možné kódovať CSS na detekciu konkrétnych zariadení, bežnejším prístupom je špecifikovať rozloženie založené na veľkosti obrazovky v pixeloch. V prípade potreby môžete mať jeden štýl pre veľké obrazovky, jeden pre tablety a jeden pre mobilné telefóny. Použitie CSS má ďalšiu výhodu v tom, že kód je potrebné zapísať iba raz - do súboru CSS. Každá z vašich stránok potom potrebuje na vykreslenie svojich štýlov z CSS iba jeden riadok kódu.

Interaktívne funkcie dotykového displeja

Ak ste nakonfigurovali webovú stránku tak, aby bola interaktívnou skúsenosťou pre návštevníkov používajúcich JavaScript alebo HTML5. , je dôležité, aby ste vedeli, ako bude váš web reagovať na dotykové udalosti, a to nielen v mobilnom prehliadači, ale aj na rastúcom počte stolových počítačov s dotykovou obrazovkou. Vo väčšine prípadov by ste mali zvážiť pridanie dotykových udalostí a gest do kódu návrhu. Napríklad v JQuery je ekvivalentom kliknutia myšou na dotykovú obrazovku udalosť poklepania, ktorá sa spustí, keď sa používateľ dotkne, a potom zdvihne prst z obrazovky. V závislosti od vašej stránky možno budete chcieť zakázať predvolené nastavenia v mobilnom prehliadači, ako je napríklad priblíženie alebo oddialenie pritiahnutia alebo pretiahnutie pomocou udalostí „preventDefault“.

Testovanie a overenie

Najlepší spôsob, ako vyskúšajte na svojom novom mobilnom webe použitie vlastného mobilného zariadenia. Preskúmajte rozloženie štýlov a stránok, navigujte dotykmi a gestami a pozorne si pozrite obrázky, aby ste sa uistili, že vyzerajú sviežo. Na emuláciu mobilného displeja môžete použiť aj webový prehľadávač počítača. Napríklad v prehliadači Google Chrome stlačením klávesu „F12“ otvoríte Konzolu pre vývojárov. Kliknite na ikonu „Nastavenia“ a potom na kartu „Emulácia“ a vyberte zariadenie, ako je Google Nexus alebo Apple iPad.

• Predchádzajúca strana: Ako kúpiť priestor na serveri
• Ďalšia strana: Výhody softvéru na tvorbu webu