Mobilný dizajn webových stránok je komplikovaný, pretože jedna mobilná verzia stránky nemusí byť kompatibilná so všetkými zariadeniami. Návrhári si musia byť vedomí najlepších dizajnových postupov, aby vaša mobilná prítomnosť bola zmysluplná a užitočná.
Medzi webovými vývojármi sa neustále diskutuje o tom, ktorý spôsob vytvárania webových stránok optimalizovaných pre mobilné zariadenia je najlepší. Existujú tri hlavné metódy vývoja mobilných webových stránok.
Sú to:
- Zodpovedný dizajn webu.
- Vyhradené webové stránky pre mobilné zariadenia.
- RESS: Programovanie na strane servera vykresľuje CSS a HTML v závislosti od typu zariadenia.
Každá metóda má svoje výhody a nevýhody. Webový vývojár si musí byť vedomý každej techniky, aby realizoval to najlepšie pre danú situáciu.
3 spôsoby, ako vytvoriť mobilný web
Racionálny dizajn (RWD)
RWD sa spolieha na dotazy médií CSS3 na zosúladenie rozloženia webovej stránky s veľkosťou zobrazovacej oblasti zariadenia. Rovnaký kód HTML slúži na zobrazenie rôznych rozložení webových stránok pre tablety, mobilné zariadenia, pracovné plochy a ďalšie miniaplikácie.
výhody:
- Vaše webové stránky budú mať podobný obsah a značku HTML, takže návštevníci v mobilných zariadeniach budú mať rovnaké skúsenosti bez ohľadu na to, aké zariadenie používajú.
- Jediná adresa URL uľahčuje používateľom prepojenie a zdieľanie obsahu. (Ak je webová stránka k dispozícii pod viac ako jednou adresou URL, môžu sa používatelia zamieňať.)
nevýhody:
Nie je možné samostatne optimalizovať mobilný obsah. Preto návrhár používajúci RWD nemôže prispôsobiť obsah osobitne pre mobilných používateľov.
Podľa údajov z januára 2013 z archívu HTTP je priemerná webová stránka približne 1,3 MB. Väčšina miest RWD je však pomerne väčšia. Táto väčšia veľkosť znižuje výkonnosť mobilných stránok a znižuje ich výkonnosť.
Používatelia mobilných telefónov sú viac prispôsobení vzhľadom na dizajny používateľského rozhrania špecifické pre mobilné zariadenia. Okrem toho sú mobilní používatelia zvyknutí na multi-tasking. Pokiaľ nie je navigačná štruktúra prispôsobená pre konkrétne zariadenia, môžu používatelia čeliť problémom pri pokuse o vykonanie viacerých úloh súčasne.
Vyhradené mobilné lokality
Táto metóda zlepšuje skúsenosti mobilných používateľov vytvorením úplne samostatnej webovej stránky.
výhody:
- Jednoduchosť správy: pre mobilné a desktopové lokality sú potrebné samostatné zmeny. Uvedené zmeny sú obmedzené na každú príslušnú verziu. Znamená to, že z platformy nemožno pristupovať k zmenám určeným pre mobilnú platformu.
- Pri vývoji webových stránok špecifických pre mobilné zariadenia sa stáva jednoduchšie zjednodušiť a optimalizovať ich pre konkrétne publikum.
- Obsahovú a navigačnú štruktúru môžete prispôsobiť pre mobilných používateľov.
nevýhody:
Zdieľanie webovej stránky prostredníctvom sociálnych médií sa stáva zložitejšou, pretože so špecializovanými stránkami pre mobilné zariadenia existuje viacero adries URL. Keď používatelia na pracovnej ploche kliknú na mobilné adresy URL zdieľané na platformách sociálnych médií, môžu neúmyselne prijať mobilnú verziu stránky a nie verziu pre stolné počítače.
Aby nedochádzalo k duplicitným problémom s obsahom, webový vývojár musí používať meta tagy rel = "alternative" a rel = "canonical". Ak mobilný používateľ vyhľadá Google a klikne na adresu URL pracovnej plochy, používateľ buď zobrazí verziu počítača, alebo sa presmeruje na mobilnú verziu webovej stránky. Ak mobilná verzia neexistuje, používateľ dostane chybové hlásenie.
Vytvorenie úplne inej webovej stránky pre mobilných používateľov znamená, že stránky budú prispôsobené špeciálne pre mobilných používateľov. Avšak na dosiahnutie tohto cieľa musia weboví vývojári odstrániť funkčnosť a obsah, čo sa pre nich ukazuje ako nočná mora.
Zodpovedný dizajn webu+ Komponenty na strane servera (RESS)
Táto metóda závisí od programovania na strane servera s cieľom poskytnúť vlastné HTML a CSS pre rôzne zariadenia. Kód pre mobilných používateľov sa bude líšiť od kódu používateľov počítačov.
Hlavným cieľom tejto implementácie je zlepšiť výkonnosť webových stránok. Táto metóda funguje dobre v kombinácii s citlivým dizajnom webu. Preto sa táto implementácia môže označovať ako Responsive Web Design + komponenty na strane servera (RESS).
výhody:
- Navigačná štruktúra môže byť prispôsobená rôznym úlohám vykonávaným používateľmi počítačov a mobilných zariadení.
- Vývojári môžu odstrániť prvky stránky z HTML a CSS, aby dosiahli požadované zobrazenie.
- Z HTML je možné odstrániť zbytočný JavaScript, ktorý uvoľní zdroje CPU, pamäť a vyrovnávaciu pamäť mobilných zariadení.
nevýhody:
- Dynamické HTML zvyšuje zaťaženie na serveri.
- Nie je možné spoľahnúť na detekciu zariadenia.
- HTML a CSS sú optimalizované pre mobilné výkony. Verzia pre stolné počítače používa viac požiadaviek HTTP a Java Scripts.
Ktorú metódu zvolíte?
Rozhodnutie navrhnúť web optimalizované pre mobilné zariadenia závisí od produktov, ktoré predávate, od cieľového publika, od požadovanej investície, od konkurencie, od miery konverzie atď. Najlepšie funguje návrhová metóda, ktorá závisí predovšetkým od formátov obrazoviek, operačných systémov, prehliadačov a rezolúciou.
Webové stránky s najvyššou citlivosťou na web sú optimálne implementované a výsledkom je, že tieto stránky potrebujú viac času na načítanie. Keďže konkurencia je zúfalá, môžete stratiť zákazníkov, ak vaše stránky fungujú pomalšie. Používateľ jednoducho prepne na inú webovú stránku, ktorá trvá menej času na otvorenie. Hoci je možné vytvoriť webové stránky s kratšími časmi načítania so špecializovanými mobilnými stránkami, k tejto implementácii patria aj rôzne nevýhody.
RESS poskytuje výhody RWD, ktoré prekonávajú dve hlavné nevýhody. Hlavnou nevýhodou RESS je, že detekcia zariadenia je nespoľahlivá. Musíte často testovať nové zariadenia, aby ste zabezpečili, že proces bude aj naďalej fungovať správne.
Existujú služby ako DeviceAtlas, WURFL a ďalšie, ktoré dokážu odhaliť nové zariadenia. Bude to skvelá pomoc pri aktualizácii nových zariadení vo vašej databáze.
Mobilný webový dizajn je úspešný len vtedy, keď sa webové stránky správne zobrazujú na mobilnom zariadení. Aj keď je to skvelá úloha pre dizajnérov, aby reprezentovali všetky podstatné časti pracovnej plochy v malom mobilnom okne, objavujú sa každý deň nové techniky, ktoré umožňujú lepšie, rýchlejšie a plnohodnotnejšie zobrazovanie mobilných webových stránok.
Mobilné webové stránky Fotografie cez Shutterstock
15 Komentáre ▼
