Je pravdepodobné, že ste už videli, ako môže iPhone otáčať a rozširovať webové stránky. Môže vám zobraziť celú webovú stránku jedným pohľadom alebo priblížiť, aby bol text, ktorý vás zaujíma, čitateľný. V jednom zmysle, keďže iPhone používa Safari, by weboví dizajnéri nemuseli robiť nič zvláštne, aby vytvorili webovú stránku, ktorá bude fungovať na iPhone. Naozaj však chcete, aby vaša stránka iba fungovala - alebo vynikla a zažiarila?
Keď ty vytvoriť webovú stránku, musíte premýšľať o tom, kto to bude pozerať a ako to bude pozerať. Niektoré z najlepších webov berú do úvahy, na akom type zariadenia sa stránka zobrazuje, vrátane rozlíšenia, možností farieb a dostupných funkcií. Nespoliehajú sa iba na to, že na to zariadenie príde.
Všeobecné pokyny pre tvorbu webových stránok pre mobilné zariadenia
- Vyskúšajte na čo najväčšom počte zariadení. Prvá vec, ktorú by ste mali urobiť, je prezerať si svoje stránky na iPhone a v mnohých ďalších mobilné zariadenia alebo emulátory, ako môžete. Aj keď môžete na svoje testovanie použiť emulátory, nedajú vám rovnaký pocit, ako keď sa pokúšate prechádzať webom na malej maličkej obrazovke. Mali by ste čo najviac testovať na skutočných zariadeniach.
- Nechajte svoje stránky ladne degradovať. Môžete napísať svoje stránky pre Flash povolený, širokouhlé prehliadače, ale uistite sa, že sú dôležité informácie 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 stránku zameranú na bezdrôtové pripojenie - a uľahčite jej hľadanie. Ak sa chystáte vytvoriť konkrétnu stránku pre svojich zákazníkov mobilných telefónov a bezdrôtových sietí - sprístupnite ju. Skvelým spôsobom je umiestniť odkaz na bezdrôtovú stránku na samý vrch dokumentu a potom tento odkaz skryť pred zariadeniami, ktoré nie sú vreckové, pomocou typu ručného média. Väčšina ľudí nakoniec navštívi vašu domovskú stránku, a to aj prostredníctvom mobilných telefónov - a ak odkaz na vašu bezdrôtovú stránku neexistuje, odíde, ak je stránka príliš ťažko použiteľná.
Rozloženie webovej stránky pre smartfóny
Prvá vec, ktorú by ste mali mať na pamäti pri písaní stránok pre trh so smartphonmi, je, že ak nechcete, nemusíte robiť žiadne zmeny. Skvelá vec na väčšine dostupných smartfónov je, že používajú prehliadače Webkit (Safari pre iOS a Chrome pre Android) zobrazovať webové stránky, takže ak vaša stránka vyzerá dobre v prehliadači Safari alebo Chrome, bude vyzerať dobre na väčšine smartphonov (len veľa menšie). Existujú však veci, ktoré môžete urobiť, aby ste si spríjemnili prehliadanie webu:
- Pamätajte, že obrazovka je malá. Smartfóny všetky tieto stĺpce skondenzujú do malého okienka, čo ich môže bez zväčšenia veľmi ťažko čítať. Väčšina používateľov je zvyknutá na priblíženie, ale môže to byť únavné. Jeden dlhý stĺpec textu sa číta ľahšie.
- Stránky rozdeľte na menšie časti. Čítanie dlhých častí textu na mobilnom telefóne môže byť ťažké, takže ich umiestnenie na viac stránok uľahčuje čítanie.
Odkazy a navigácia v telefónoch iPhone
- Čím kratšie sú adresy URL, tým lepšie. Ak ste sa niekedy pokúsili zadať adresu URL do mobilného telefónu, budete vedieť, že je to nepríjemné (okrem tínedžerov, ktorí zvyknú posielať veľa textových správ). Aj v telefónoch iPhone je namáhavé zadávať dlhé adresy URL. Držte ich krátke.
- Ľahšie sa však klepá na dlhý text odkazu. Na stránke, kde je na rôzne články prepojených niekoľko samostatných slov, úplne vedľa seba, môže byť veľmi ťažké ťuknúť na správne slovo bez zväčšenia. Mnoho ľudí to vzdá a odíde niekam inam. Na odkazy, ktoré obsahujú 3 až 5 slov, sa kliknutím v telefóne klikne ľahšie ako na jednoslovné odkazy.
- Neukladajte navigáciu na úplnú hornú časť obrazovky. Nie je nič nepríjemnejšie, ako keď musíte prechádzať obrazovkami a obrazovkami odkazov, aby ste našli požadované informácie. Ak ste sa pozreli na webové stránky určené pre mobilné telefóny, uvidíte, že prvé, čo sa zobrazí, je obsah a nadpis. Potom je pod tým navigácia.
- Nebojte sa skryť navigáciu.Skryjú sa navigačné odkazy pomocou CSS alebo JavaScript a ich zobrazovanie iba vtedy, keď to používateľ požaduje, je to spôsob, ako uľahčiť používateľom smartfónov stránku.
Tipy pre obrázky v smartfónoch
- Obrázky musia byť malé. Áno, Android a iPhone môžu obrázky zväčšovať a zmenšovať, ale čím menšie budú, v rozmeroch aj v čase sťahovania, tým spokojnejší budú zákazníci bezdrôtových sietí. Optimalizácia obrázkov je vždy dobrý nápad, ale pre stránky mobilných telefónov je to kritické.
- Obrázky sa musia rýchlo stiahnuť. Pri prehliadaní obrázkov z mobilného zariadenia obrázky zaberajú na webových stránkach veľa miesta. A hoci sú často veľmi pekné a vylepšujú vzhľad stránok pri prehliadaní cez webový prehliadač na celú obrazovku, často im prekážajú mobilné zariadenia. Navyše, keď je používateľ smartfónu v mobilnej sieti, poslednou vecou, ktorú chce zaplatiť, je stiahnutie množstva obrovských obrázkov alebo navigačných ikon.
- Na hornú časť stránky nedávajte veľké obrázky. Rovnako ako v prípade navigácie, aj tu môže byť veľmi zdĺhavé čakať na načítanie obrázka, ktorý zaberie 3 až 4 obrazovky, v úplnej hornej časti stránky. A to je na webových stránkach veľmi bežné. Jedinou výnimkou je, ak čitateľ vie, že po kliknutí povedzme vo fotogalérii získa obrázok.
Čomu sa treba vyhnúť pri navrhovaní pre mobilné zariadenia
Pri vytváraní stránky vhodnej pre mobilné zariadenia by ste sa mali vyhnúť viacerým veciam. Ako už bolo spomenuté vyššie, ak naozaj chcete mať tieto informácie na svojej stránke, môžete, ale ubezpečte sa, že web funguje bez nich.
- Blesk: Väčšina mobilných telefónov nepodporuje Flash, takže nie je dobré zahrnúť ho na vaše bezdrôtové stránky.
- Cookies: Mnoho mobilných telefónov nemá podporu súborov cookie. Telefóny iPhone majú podpora súborov cookie.
- Rámy: Aj keď ich prehliadač podporuje, myslite na rozmery obrazovky. Rámečky na mobilných zariadeniach jednoducho nefungujú - dajú sa čítať len veľmi ťažko alebo vôbec.
- Tabuľky: Nepoužívajte tabuľky na rozloženie na mobilnej stránke. A skúste sa všeobecne vyhnúť tabuľkám. Nie sú podporované na každom mobilnom telefóne (aj keď ich podporujú telefóny iPhone a ďalšie smartphony) a môžete skončiť s podivnými výsledkami.
- Vnorené tabuľky: Ak musíte použiť tabuľku, nezabudnite ju vnoriť do inej tabuľky. Pre desktopové prehľadávače je ťažké ich podporiť a v najlepšom prípade spomaliť načítanie stránky.
- Absolútne opatrenia: Inými slovami, nedefinujte rozmery objektov v absolútnych veľkostiach (napríklad pixely, milimetre alebo palce). Ak definujete niečo ako šírku 100 pixelov, na jednom mobilnom zariadení, ktoré by mohlo mať polovicu obrazovky, a na druhom by to mohla byť dvojnásobná šírka. Najlepšie fungujú relatívne veľkosti (napríklad ems a percentá).
- Písma: Nepredpokladajte, že niektorý z písma ste zvyknutí mať prístup k, budú k dispozícii na mobilných telefónoch.