Webové stránky, ktoré sú optimalizované na použitie v mobilných zariadeniach, sa líšia od tých, ktoré sa zobrazujú na stolných a prenosných počítačoch. Posledné menované sú navrhnuté pre veľké obrazovky a presné klikanie myšou, zatiaľ čo mobilné webové stránky sú dimenzované na menšie obrazovky a nepresné klepanie prstom.
- Navrhnuté pre menšie obrazovky a nepresné klepanie prstom.
- Navrhnuté pre veľké obrazovky s presným kliknutím myšou.
Vzhľadom na to, že väčšina návštev webových stránok pochádza z mobilných zariadení, úlohou dizajnérov stránok je poskytnúť verzie, ktoré fungujú s mobilnými zariadeniami aj stolnými počítačmi. Najbežnejším prístupom je použitie responzívneho webového dizajnu, ktorý automaticky poskytuje správnu verziu na základe zariadenia používateľa a veľkosti obrazovky, ktorú zistí prehliadač.
V každom prípade sa webové stránky vhodné pre mobilné zariadenia líšia od verzií pre počítače mnohými spôsobmi.
Dizajn stránky: Mobilné obrazovky majú menej miesta
- Zobrazenia smartfónov a tabletov majú uhlopriečku 4 až 10 palcov.
-
Miniaplikácie ponuky, ktoré sa dajú zbaliť alebo rozbaliť, zvyčajne nahrádzajú bočné panely a objemné ponuky hlavičiek.
- Grafika na celú šírku so súdnym využitím medzery medzi textom.
- Väčšina stolových monitorov má uhlopriečku od 19 palcov do 24 palcov.
- Sponzorované odkazy a veľké bannerové reklamy sú bežnejšie.
- Hustší text s väčším priestorom pre grafiku.
Najzrejmejším rozdielom medzi webovými stránkami pre počítače a mobilné zariadenia je veľkosť obrazovky. Zatiaľ čo väčšina stolných monitorov má uhlopriečku najmenej 19 palcov až 24 palcov, tablety majú bežne okolo 10 palcov. Smartfóny majú uhlopriečku približne 4 palce. Jednoduché oddialenie neprevedie webovú stránku úspešne na verziu vhodnú pre mobilné zariadenia, pretože text je nečitateľný a vyžaduje si od návštevníka stránky ďalší krok. Presné poklepanie na drobné prvky je tiež nemožné.
Na vyriešenie problému môžu dizajnéri odstrániť bočné panely a grafiku, ktoré nie sú nevyhnutne potrebné. Namiesto toho používajú menšiu grafiku, zväčšujú veľkosť písma a zbaľujú obsah do rozšíriteľných miniaplikácií. Toto obmedzenie nehnuteľností podnietilo medzi webovými dizajnérmi úplne iný druh myslenia.
Postranné panely a objemné ponuky hlavičiek zvyčajne nahrádzajú aj zbaliteľné alebo rozbaliteľné miniaplikácie ponuky. V snahe využiť každý milimeter priestoru na obrazovke dizajnéri odstránia nadbytočný biely priestor a zároveň pozorne sledujú čitateľnosť.
Množstvo sponzorovaných odkazov a veľkých bannerových reklám jednoducho na telefóne alebo malom tablete nefunguje. Namiesto toho sú na mobilných webových stránkach bežnejšie malé kontextové reklamy.
Rozloženia s textom obaleným okolo grafiky sa na mobilných zariadeniach nehrajú dobre. Namiesto toho dizajnéri často dávajú tejto grafike celú šírku obrazovky a text spúšťajú pod alebo nad. Podobne dobrý webový dizajn rozdeľuje text na kúsky kvôli čitateľnosti; nikto nechce čítať pevné steny textu. Na malých obrazovkách sa to stáva ešte dôležitejším. Rozumné používanie bieleho miesta je kľúčové.
Ovládacie prvky stránky: presnosť z počítača vs. mobilné objekty
-
Veľké oblasti na poklepanie alebo aktívne body pre presnejšiu navigáciu.
- Iná adresa URL: pridá písmeno "m." Často možnosť zobrazenia počítačovej verzie stránky.
- Prihlasovacie poverenia majú často vyhradený priestor, niekedy s dostupnosťou odtlačkov prstov.
- Presnejšie odkazy a tlačidlo založené na kurzore.
Na rozdiel od presného ukazovateľa myši na pracovnej ploche je ľudský prst škvrna a klepnutie vyžaduje veľké ciele na obrazovke pre hypertextové odkazy. Stránky vhodné pre mobilné zariadenia ponúkajú veľké oblasti na poklepanie (alebo hotspoty) na uľahčenie presnej navigácie.
Webové stránky vhodné pre mobilné zariadenia tiež bežne obsahujú vo svojich adresách písmeno m; napríklad mobilná adresa Facebooku je m.facebook.com. Mobilná URL sa zvyčajne vyberie automaticky, keď surfujete s mobilným tabletom alebo smartfónom. V niektorých prípadoch uvidíte odkaz, na ktorý môžete klepnúť a ktorý vám umožní prepnúť na bežnú počítačovú verziu stránky.
Polia pre prihlasovacie meno a heslo určené pre stolné počítače a prenosné počítače sú v telefóne malé a nepoužiteľné, takže weboví vydavatelia ich zväčšujú a niekedy im dajú svoje vlastné stránky, aby sa uľahčili používanie. Prihlasovanie pomocou odtlačku prsta alebo iného účtu, ako je Google alebo Facebook, sa stáva čoraz bežnejším, keďže sa vyvíjajú možnosti zariadení a služieb.
Prečo na tom záleží?
Webové stránky pre mobilné zariadenia sú navrhnuté pre vreckové zariadenia a značne sa líšia od stránok vytvorených na čítanie na počítači. Verziu webovej stránky pre počítač môžete zvyčajne zobraziť na mobilnom zariadení a naopak, sú navrhnuté inak, aby sa obsah ľahšie zobrazoval, čítal a navigoval.
