Ako písať webové stránky pre mobilné zariadenia

ObsahRozbaliť

• Všeobecné usmernenia
• Rozloženie pre smartfóny
• Odkazy a navigácia
• Tipy pre obrázky
• Veci, ktorým sa treba vyhnúť

Je pravdepodobné, že ste videli, ako môže iPhone prevracať a rozširovať webové stránky. Môže vám na prvý pohľad zobraziť celú webovú stránku alebo priblížiť, aby bol text, ktorý vás zaujíma, čitateľný. V istom zmysle, keďže iPhone používa Safari , weboví dizajnéri by nemali robiť nič špeciálne, aby vytvorili webovú stránku, ktorá bude fungovať na iPhone. Naozaj však chcete, aby vaša stránka len fungovala – alebo aby vynikla a zažiarila?

Keď ty vytvoriť webovú stránku , musíte sa zamyslieť nad tým, kto a ako si to bude prezerať. Niektoré z najlepších stránok berú do úvahy typ zariadenia, na ktorom sa stránka zobrazuje, vrátane rozlíšenia, možností farieb a dostupných funkcií. Nespoliehajú sa len na to, že na to príde zariadenie.

Všeobecné pokyny pre vytváranie stránok pre mobilné zariadenia

Otestujte na čo najväčšom počte zariadení.Prvá vec, ktorú by ste mali urobiť, je zobraziť svoje stránky na iPhone a na mnohých rôznych mobilné zariadenia alebo emulátory, ako môžete. Aj keď môžete použiť emulátory na všetky svoje testy, v skutočnosti vám nedávajú rovnaký pocit, ako keď sa pokúšate prechádzať webovou stránkou na malej malej obrazovke. Mali by ste čo najviac testovať na skutočných zariadeniach. Nechajte svoje stránky elegantne degradovať.Môžete písať svoje stránky pre Povolený blesk , širokouhlé prehliadače, ale uistite sa, že dôležité informácie sú viditeľné aj na malom monitore, ktorý nedokáže spracovať žiadne špeciálne funkcie (ako sú súbory cookie, Ajax, Flash, JavaScript atď.). Čokoľvek nad rámec XHTML Basic bude nad rámec niektorých mobilných telefónov. Zatiaľ čo väčšina smartfónov zvládne všetky tieto veci, iné mobilné zariadenia nie. Vytvorte si stránku špecifickú pre bezdrôtovú sieť – a uľahčite jej nájdenie.Ak sa chystáte vytvoriť špecifickú stránku pre zákazníkov mobilného telefónu a bezdrôtového pripojenia – sprístupnite ju. Skvelým spôsobom je umiestniť odkaz na stránku bezdrôtového pripojenia úplne hore v dokumente a potom tento odkaz skryť pred zariadeniami, ktoré nie sú vreckové, pomocou typu prenosného média. Koniec koncov, väčšina ľudí prichádza na vašu domovskú stránku, dokonca aj na mobilných telefónoch – a ak tam odkaz na vašu bezdrôtovú stránku nie je, odídu, ak je používanie stránky príliš ťažké.

Rozloženie webovej stránky pre smartfóny

Prvá vec, ktorú by ste si mali zapamätať pri písaní stránok pre trh smartfónov, je, že ak nechcete, nemusíte robiť žiadne zmeny. Na väčšine dostupných smartfónov je skvelé to, že na zobrazenie webových stránok používajú prehliadače Webkit (Safari v systéme iOS a Chrome v systéme Android), takže ak vaša stránka vyzerá dobre v prehliadači Safari alebo Chrome, bude vyzerať dobre na väčšine smartfónov (iba oveľa menších ). Existujú však veci, ktoré môžete urobiť, aby ste si spríjemnili prehliadanie:

Pamätajte, že obrazovka je malá.Smartfóny zhustia všetky tieto stĺpce do malého okna, čo môže sťažiť ich čítanie bez priblíženia. Väčšina používateľov je zvyknutá na približovanie, ale môže to byť únavné. Jeden dlhý stĺpec textu sa ľahšie číta.Rozdeľte strany na menšie časti.Čítanie dlhých úsekov textu na mobilnom telefóne môže byť náročné, takže ak ich umiestnite na viacero strán, budú sa ľahšie čítať.

Odkazy a navigácia na telefónoch iPhone

Čím kratšie sú adresy URL, tým lepšie.Ak ste sa niekedy pokúsili zadať adresu URL na mobilnom telefóne, budete vedieť, že je to utrpenie (snáď okrem tínedžerov, ktorí sú zvyknutí posielať veľa textových správ). Dokonca aj na iPhone je únavné zadávať dlhé adresy URL. Udržujte ich krátke. Ale na dlhý text odkazu je jednoduchšie klepnúť.Na stránke, kde je niekoľko samostatných slov spojených s rôznymi článkami, všetky hneď vedľa seba, môže byť veľmi ťažké klepnúť na to správne bez priblíženia. Veľa ľudí to jednoducho vzdá a odíde niekam inam. Na odkazy s 3 až 5 slovami sa v telefóne kliká ľahšie ako na jednoslovné odkazy. Neumiestňujte navigáciu úplne hore na obrazovku.Nie je nič otravnejšie, ako keď musíte listovať po obrazovkách a obrazovkách odkazov, aby ste našli požadované informácie. Ak ste sa pozreli na webové stránky, ktoré boli navrhnuté pre mobilné telefóny, uvidíte, že prvé veci, ktoré sa zobrazia, sú obsah a nadpis. Potom pod tým je navigácia. Nebojte sa skryť svoju navigáciu. Skrytie navigačných odkazov pomocou CSS alebo JavaScriptu a ich zobrazovanie iba vtedy, keď o to používateľ požiada, je spôsob, ako uľahčiť používateľom smartfónov.

Tipy pre obrázky na smartfónoch

Obrázky musia byť malé.Áno, Android a iPhone dokážu približovať a odďaľovať obrázky, ale čím sú menšie z hľadiska rozmerov aj času sťahovania, tým šťastnejší budú vaši zákazníci s bezdrôtovým pripojením. Optimalizácia obrázkov je vždy dobrý nápad, ale v prípade stránok pre mobilné telefóny je to rozhodujúce. Obrázky sa musia sťahovať rýchlo.Obrázky zaberajú veľa miesta na webových stránkach, keď si ich prezeráte z mobilného zariadenia. A hoci sú často veľmi pekné a stránky vyzerajú lepšie pri prezeraní vo webovom prehliadači na celú obrazovku, na mobilnom zariadení často prekážajú. Navyše, keď je používateľ smartfónu v mobilnej sieti, posledná vec, za ktorú chcú platiť, je sťahovanie obrovských obrázkov alebo navigačných ikon. Neumiestňujte veľké obrázky na začiatok stránky.Rovnako ako pri navigácii môže byť veľmi únavné čakať, kým sa obrázok, ktorý zaberie 3 až 4 obrazovky, načíta úplne hore na stránke. A to je na webových stránkach veľmi bežné. Jedinou výnimkou je, ak čitateľ vie, že po kliknutí dostane obrázok, povedzme vo fotogalérii.

Čomu sa vyhnúť pri navrhovaní pre mobil

Existuje niekoľko vecí, ktorým by ste sa pri vytváraní stránky vhodnej pre mobilné zariadenia mali vyhnúť. Ako už bolo spomenuté vyššie, ak ich naozaj chcete mať na svojej stránke, môžete, ale uistite sa, že stránka funguje aj bez nich.

Flash: Väčšina mobilných telefónov nepodporuje Flash, takže nie je dobrý nápad zahrnúť ho na vaše bezdrôtové stránky. Cookies: Mnoho mobilných telefónov nemá podporu súborov cookie. iPhony majú podpora cookies . Rámy:Aj keď ich prehliadač podporuje, myslite na rozmery obrazovky. Rámy jednoducho nefungujú na mobilných zariadeniach - je veľmi ťažké alebo nemožné ich čítať. Tabuľky: Na rozloženie na mobilnej stránke nepoužívajte tabuľky. A snažte sa vyhýbať tabuľkám vo všeobecnosti. Nie sú podporované na každom mobilnom telefóne (hoci iPhone a iné smartfóny ich podporujú) a môžete skončiť s podivnými výsledkami. Vnorené tabuľky: Ak musíte použiť tabuľku, uistite sa, že ju nevnoríte do inej tabuľky. Prehliadače na stolných počítačoch ich len ťažko podporujú a prinajlepšom spomaľujú načítanie stránky. Absolútne miery: Inými slovami, nedefinujte rozmery objektov v absolútnych veľkostiach (ako sú pixely, milimetre alebo palce). Ak definujete niečo ako 100 pixelov na šírku, na jednom mobilnom zariadení to môže byť polovica obrazovky a na inom to môže byť dvojnásobná šírka. Relatívne veľkosti (ako ems a percentá) fungujú najlepšie. Písma: Nepredpokladajte, že niektorý z fonty ku ktorým ste zvyknutí, budú dostupné na mobilných telefónoch.