Je pravdepodobné, že ste videli, ako iPhone môže flip a rozbaliť webové stránky. Môže vám zobraziť celú webovú stránku na prvý pohľad alebo priblížiť, aby ste text, ktorý vás zaujíma, čitateľný. V istom zmysle, pretože iPhone používa Safari, web dizajnéri by nemali robiť nič zvláštne na vytvorenie webovej stránky, ktorá bude fungovať na iPhone.
Ale naozaj chcete, aby vaša stránka práve fungovala? Väčšina návrhárov chce, aby ich stránky svietili!
Keď vytvoríte webovú stránku , musíte premýšľať o tom, kto ju bude vidieť a ako ju budú zobrazovať. Niektoré z najlepších stránok berú do úvahy typ zariadenia, na ktoré sa stránka pozerá, vrátane rozlíšenia, možností farieb a dostupných funkcií. Nepoužívajú len na prístroj, aby to na to prišli.
Všeobecné pokyny na vytvorenie stránky pre mobilné zariadenia
- Testujte toľko zariadení, koľko môžete. Prvá vec, ktorú by ste mali urobiť, je prezerať vaše stránky na iPhone a toľko rôznych mobilných zariadení alebo emulátorov, ako môžete. Zatiaľ čo môžete použiť emulátory na všetky vaše testy, naozaj vám nedávajú rovnaký pocit, ako sa snažíte prechádzať webovou stránkou na malej malej obrazovke, takže otestujte na skutočných zariadeniach čo najviac.
- Vytvárajte elegantné stránky. Môžete si napísať svoje stránky pre širokoplošné prehliadače s podporou Flash, ale uistite sa, že kritické informácie sú viditeľné aj na malom monitore, ktorý nedokáže spracovať žiadne špeciálne funkcie (ako cookies, Ajax, Flash, JavaScript, atď.). Niečo za XHTML Basic bude za niektoré mobilné telefóny. Zatiaľ čo väčšina smartphonov dokáže spracovať všetky tieto veci (okrem technológie Flash v systéme iPhone samozrejme), ostatné mobilné zariadenia nemôžu.
- Vytvorte si konkrétnu bezdrôtovú stránku a jednoducho ju vyhľadajte. Ak plánujete vybudovať konkrétnu stránku pre mobilný telefón a zákazníkov bezdrôtovej siete, sprístupnite ho. Skvelým spôsobom je umiestniť prepojenie na bezdrôtovú stránku v hornej časti dokumentu a potom skryť tento odkaz z nepájaných zariadení pomocou typu ručného média. Koniec koncov, väčšina ľudí prichádza na vašu domovskú stránku, dokonca aj na mobilné telefóny - a ak odkaz na vašu bezdrôtovú stránku nie je tam, odídu, ak je stránka príliš ťažká na použitie.
Rozloženie webovej stránky pre smartphony
Prvá vec, ktorú by ste si mali pamätať pri písaní stránok na trhu smartphonov, je, že nemusíte robiť žiadne zmeny, ak nechcete. Skvelá vec týkajúca sa väčšiny dostupných inteligentných telefónov je, že na zobrazovanie 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á v poriadku v prehliadačoch Safari alebo Chrome, bude to na väčšine smartphonov vyzerať jemne (len oveľa menšie ). Existujú však aj veci, ktoré môžete urobiť, aby sa zážitok z prehliadania stal príjemnejším:
- Nezabudnite, že obrazovka je malá. Inteligentné telefóny kondenzujú všetky tie stĺpce do malého okna, a preto je veľmi ťažké ich čítať bez priblíženia. Väčšina používateľov sa používa na zväčšenie, ale môže to byť únavné. Jeden dlhý stĺpec textu je ľahšie čitateľný.
- Rozdeľte stránky na menšie kúsky. Je ťažké čítať dlhé segmenty textu na mobilnom telefóne, takže ich umiestňovanie na viacerých stranách ich uľahčuje čítanie.
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 to je bolesť (s výnimkou teenagerov, ktorí sú zvyknutí posielať veľa textových správ). Dokonca aj na zariadení iPhone je únavné zadávať dlhé adresy URL. Udržujte ich krátke.
- Text dlhého odkazu je však ľahšie klepnúť. Keď na stránke, kde je niekoľko samostatných slov spojených s rôznymi článkami, hneď vedľa seba, môže byť veľmi ťažké vybrať ten správny bez priblíženia. Mnohí ľudia sa jednoducho vzdávajú a idú inde. Odkazy s 3-5 slovami v nich sú jednoduchšie kliknúť na telefón ako 1-slovné spojenia.
- Vašu navigáciu nestavte v hornej časti obrazovky. Neexistuje nič viac nepríjemné, než aby ste museli stránku prostredníctvom obrazoviek a obrazoviek odkazov nájsť informácie, ktoré chcete. Ak ste sa pozreli na webové stránky, ktoré boli navrhnuté pre mobilné telefóny, uvidíte, že prvé veci, ktoré sa zobrazujú, sú obsah a nadpis. Potom, pod to je navigácia.
- Nebojte sa skryť navigáciu. Skrytie navigačných odkazov pomocou CSS alebo JavaScript a ich zobrazenie iba vtedy, keď o to používateľ požiada, je spôsob, ako zjednodušiť stránku pre používateľov smartfónov.
Tipy pre obrázky na smartphonoch
- Obrazy musia byť malé. Áno, Android a iPhone môžu zväčšiť a rozložiť obrazy , ale čím sú menšie, v oboch rozmeroch a čase sťahovania, tým šťastnejší bude váš zákazník bezdrôtovej siete. Optimalizácia obrázkov je vždy dobrý nápad, ale pre stránky mobilného telefónu je to dôležité.
- Obrázky sa musia rýchlo stiahnuť. Obrázky zaberajú veľa miesta na webových stránkach, keď ich prezeráte z mobilného zariadenia. A keď sú často veľmi pekné a robia stránky lepšie, keď sa pozerajú na celoobrazovkový webový prehliadač, často sa dostanú do cesty na mobilnom zariadení. Keď je používateľ inteligentného telefónu v celulárnej sieti, posledná vec, ktorú chcú zaplatiť, je sťahovanie veľa obrovských obrázkov alebo navigačných ikon.
- Neumiestňujte veľké obrázky do hornej časti stránky. Rovnako ako pri navigácii, môže byť veľmi zdĺhavé čakať na obrázok, ktorý zaberá 3-4 screenfuls načítať v hornej časti stránky. A to je na webových stránkach veľmi bežné. Jedinou výnimkou je, ak čitateľ vie, že získajú obrázok, keď kliknú, povedzme v fotogalérii.
Čo treba vyhnúť pri navrhovaní pre mobilné zariadenia
Existuje niekoľko vecí, ktoré by ste sa mali vyhnúť pri vytváraní stránky priateľskej pre mobilné zariadenia. Ako už bolo spomenuté vyššie, ak naozaj chcete mať na svojej stránke, môžete, ale uistite sa, že stránka funguje bez nich.
- Flash - väčšina mobilných telefónov nepodporuje Flash, takže nie je vhodné zahrnúť ho do vašich bezdrôtových stránok.
- Súbory cookie - mnohé mobilné telefóny nemajú podporu súborov cookie. iPhony majú podporu súborov cookie.
- Rámy - aj keď ich prehliadač podporuje, premýšľajte o rozmeroch obrazovky. Rámy práve nefungujú v mobilných zariadeniach - sú veľmi ťažké alebo ťažko čitateľné.
- Tabuľky - nepoužívajte tabuľky na usporiadanie na mobilnej stránke. Pokúste sa všeobecne vyhýbať tabuľkám. Nie sú podporované na každom mobilnom telefóne (aj keď ich podporujú telefóny iPhone a iné smartphony) a môžete skončiť s podivnými výsledkami.
- Vnorené tabuľky - ak musíte použiť tabuľku, nezabudnite ju vložiť do inej tabuľky. Je to ťažké pre stolové prehliadače na podporu, a to v najlepšom prípade zaťaženie stránky pomalšie.
- Absolútne opatrenia - inými slovami, nedefinujte rozmery objektov v absolútnych veľkostiach (ako pixely, milimetre alebo palce). Ak definujete niečo široké ako 100 pixlov, na jednom mobilnom zariadení, ktoré môže mať polovicu obrazovky a na druhom môže byť dvojnásobok šírky. Relatívne veľkosti (ako ems a percentá) fungujú najlepšie.
- Písma - nepredpokladajte, že akékoľvek písma, na ktoré ste zvyknutí mať prístup, budú k dispozícii na mobilných telefónoch.
Čítaj viac
- Ako urobiť svoj web mobilný Friendly pomocou PHP