Odborníci už roky tvrdia, že návštevnosť mobilných zariadení od návštevníkov na webových stránkach dramaticky rastie. Z tohto dôvodu mnoho spoločností chytro začalo prijímať mobilnú stratégiu svojej online prítomnosti a vytvárať zážitky vhodné pre telefón a iné mobilné zariadenia.
Akonáhle ste strávili čas učením sa ako dizajn webových stránok pre mobilné telefónyPri implementácii svojej stratégie sa tiež budete musieť uistiť, že si návštevníci vašich stránok môžu tieto návrhy pozrieť. Existuje mnoho spôsobov, ako to môžete urobiť, a niektoré fungujú lepšie ako iné. Tu je pohľad na metódu, ktorú môžete použiť na implementáciu podpory mobilných zariadení na vaše webové stránky, spolu s odporúčaním na konci, ktorá metóda je na dnešnom webe najlepšia.
Poskytnite odkaz na inú verziu webu
Toto je zďaleka najjednoduchší spôsob zaobchádzania s používateľmi mobilných telefónov. Namiesto obáv z toho, či môžu alebo nemôžu vidieť vaše stránky, stačí umiestniť odkaz niekde v hornej časti stránky, ktorý smeruje na samostatnú mobilnú verziu vášho webu. Potom si čitatelia môžu sami zvoliť, či chcú vidieť mobilnú verziu, alebo pokračovať v „normálnej“ verzii.
Výhodou tohto riešenia je, že sa dá ľahko implementovať. Vyžaduje to, aby ste vytvorili optimalizovanú verziu pre mobil a potom pridali odkaz niekde v hornej časti normálnych stránok webu.
Nevýhody sú:
- Pre používateľov mobilných zariadení musíte udržiavať samostatnú verziu stránok. Ako sa váš web zväčšuje, môžete zabudnúť udržiavať túto druhú verziu a vaše webové stránky by mohli vypadnúť zo synchronizácie.
- Tvoríte aj tretiu verziu pre tablety? Čo tak štvrtá verzia pre nositeľné doplnky? Táto koncepcia verzií špecifických pre zariadenie sa môže vymknúť spod kontroly veľmi rýchlo.
- V hornej časti stránky musíte umiestniť škaredý odkaz, ktorý môžu čitatelia, ktorí nie sú mobilní, vidieť (a prípadne na ne kliknúť).
V konečnom dôsledku je tento prístup zastaraný a je nepravdepodobné, že bude súčasťou modernej mobilnej stratégie. Niekedy sa používa ako oprava medzery pri vyvíjaní lepšieho riešenia, ale v tomto okamihu je to skutočne krátkodobá pomocná náplasť.
Použite JavaScript
V obmene vyššie uvedeného prístupu používajú niektorí vývojári určitý typ detekcie prehľadávača skript na zistenie, či sa zákazník nachádza na mobilnom zariadení, a potom ich presmeruje na tento samostatný mobil stránky. Problém s prehliadač detekcie a mobilných zariadení je to, že existujú tisíce mobilných zariadení. Pokus o ich detekciu pomocou jedného JavaScriptu by mohol zmeniť všetky vaše stránky na nočnú moru sťahovania - a stále sa na vás vzťahujú rovnaké nevýhody ako vyššie uvedený prístup.
Použite vreckový počítač CSS @media
Ručný príkaz CSS @media sa javí ako ideálny spôsob zobrazenia CSS štýly iba pre vreckové zariadenia - napríklad mobilné telefóny. To sa javí ako ideálne riešenie na zobrazovanie stránok pre mobilné zariadenia. Napíšete jednu webovú stránku a potom vytvoríte dve šablóny štýlov. Prvý pre typ obrazovky „obrazovky“ upravuje štýl vašej stránky pre monitory a obrazovky počítača. Druhý krok pre „vreckový“ štýl upravuje vašu stránku pre malé zariadenia, ako sú tieto mobilné telefóny. Znie to jednoducho, ale v praxi to naozaj nefunguje.
Najväčšou výhodou tejto metódy je, že nemusíte udržiavať dve verzie svojich webových stránok. Iba udržiavate ten a štýl definuje, ako by to malo vyzerať - čo sa vlastne blíži ku konečnému riešeniu, ktoré chceme.
Problém s touto metódou spočíva v tom, že veľa telefónov nepodporuje typ média - namiesto toho zobrazuje svoje stránky s typom média na obrazovke. A veľa starších mobilných telefónov a vreckových počítačov nepodporuje CSS vôbec. Táto metóda je nakoniec nespoľahlivá, a preto sa zriedka používa na doručovanie mobilných verzií webových stránok.
Na detekciu užívateľského agenta použite PHP, JSP, ASP
Toto je oveľa lepší spôsob presmerovania používateľov mobilných telefónov na doménu mobilná verzia sa nespolieha na skriptovací jazyk alebo CSS, ktoré mobilné zariadenie nepoužíva. Namiesto toho používa jazyk na strane servera (PHP, ASP, JSP, ColdFusion atď.), Aby sa pozrel na agenta užívateľa a potom zmenil HTTP požiadavka smerovať na mobilnú stránku, ak je to mobilné zariadenie.
Jednoduchý kód PHP, ktorý by to urobil, by vyzeral takto:
Problém je v tom, že existuje veľa a veľa ďalších potenciálnych agentov používateľov, ktorí používajú mobilné zariadenia. Tento skript zachytí a presmeruje veľa z nich, ale nie všetky, v žiadnom prípade. A neustále pribúdajú ďalšie.
Rovnako ako v prípade iných riešení vyššie, budete musieť pre týchto čitateľov aj naďalej udržiavať samostatnú mobilnú stránku! Táto nevýhoda správy dvoch (alebo viacerých!) Webových stránok je dostatočným dôvodom na hľadanie lepšieho riešenia.
Použite WURFL
Ak ste stále odhodlaní presmerovať svojich mobilných používateľov na samostatnú stránku, potom WURFL (Wireless Universal Resource File) je dobré riešenie. Toto je súbor XML (a teraz súbor DB) a rôzne knižnice DBI, ktoré obsahujú nielen aktuálne údaje bezdrôtových užívateľských agentov, ale aj ktoré funkcie a schopnosti títo agenti používateľov podporujú.
Ak chcete používať program WURFL, stiahnete si konfiguračný súbor XML, potom si vyberiete jazyk a implementujete API na svojom webe. Existujú nástroje na používanie WURFL s programami Java, PHP, Perl, Ruby, Python, Net, XSLTa C ++.
Výhodou používania WURFL je, že existuje veľa ľudí, ktorí neustále aktualizujú a pridávajú do konfiguračného súboru. Takže aj keď je súbor, ktorý používate, zastaraný takmer predtým, ako ste ho stiahli, je pravdepodobné, že ak áno, je to tak Stiahnite si ju približne raz za mesiac. Budete mať všetky mobilné prehliadače, ktoré vaši čitatelia zvyčajne používajú, bez akýchkoľvek problémy. Nevýhodou je samozrejme to, že to musíte neustále sťahovať a aktualizovať - všetko, aby ste mohli používateľov nasmerovať na druhý web a na vzniknuté nevýhody.
Najlepšie riešenie je responzívny dizajn
Takže ak údržba rôznych webov pre rôzne zariadenia nie je odpoveďou, čo je to? Responzívny webový dizajn.
Responzívny dizajn je miesto, kde pomocou mediálnych dotazov CSS definujete štýly pre zariadenia rôznych šírok. Responzívny dizajn umožňuje vytvoriť jednu webovú stránku pre mobilných aj nemobilných používateľov. Potom sa nemusíte starať o to, aký obsah sa má zobraziť na mobilnom webe, alebo nezabudnite preniesť najnovšie zmeny na svoj mobilný web. Navyše, ak už máte napísaný CSS, nemusíte sťahovať nič nové.
Responzívny dizajn nemusí fungovať úplne dobre na extrémne starých zariadeniach a prehliadačoch (dnes sa väčšina z nich používa veľmi málo a nemal by vám robiť veľké starosti), ale preto, že je aditívum (skôr pridávanie štýlov do obsahu ako odoberanie obsahu), títo čitatelia si budú môcť naďalej prečítať váš web, jednoducho to nebude vyzerať ideálne na ich starom zariadení alebo prehliadač.