Võimalik, et olete näinud, kuidas iPhone saab veebilehti ümber pöörata ja laiendada. See võib näidata teile kogu veebisaiti ühe pilguga või suurendada, et teid huvitavat teksti loetavaks muuta. Ühes mõttes, kuna iPhone kasutab Safarit, ei tohiks veebidisainerid iPhone'is töötava veebilehe loomiseks midagi erilist teha. Kuid kas soovite, et teie leht lihtsalt töötaks - või paistaks silma ja säraks?
Kui sa ehitada veebileht, peate mõtlema, kes seda vaatab ja kuidas nad seda vaatavad. Mõned parimad saidid võtavad arvesse seda, mis tüüpi seadmetega lehte vaadatakse, sealhulgas eraldusvõimet, värvivalikuid ja saadaolevaid funktsioone. Nad ei looda selle selgitamiseks ainult seadmele.
Üldised juhised saidi ehitamiseks mobiilseadmetele
- Testige võimalikult paljude seadmetega. Esimene asi, mida peaksite tegema, on vaadata oma saiti iPhone'is ja sama palju erinevaid mobiilseadmed või emulaatorid, kui võimalik. Ehkki saate kogu testimiseks kasutada emulaatoreid, ei anna need teile tegelikult sama tunnet, kui üritate väikesel väikesel ekraanil veebisaidil navigeerida. Testida tuleks nii palju kui võimalik tegelike seadmetega.
- Pange oma lehed graatsiliselt alla. Saate oma lehti kirjutada Flash-toega, laiekraanibrauserid, kuid veenduge, et kriitiline teave oleks nähtav isegi väikeses monitoris, mis ei saa hakkama ühegi erifunktsiooniga (nt küpsised, Ajax, Flash, JavaScript jne). Kõik, mis jääb kaugemale XHTML Basicist, ületab mõned mobiiltelefonid. Kuigi enamik nutitelefonidest saab kõigi nende asjadega hakkama, ei saa seda teha muud mobiilseadmed.
- Ehitage traadita ühenduse leht ja hõlbustage selle leidmist. Kui kavatsete oma mobiiltelefoni ja traadita klientide jaoks luua kindla lehe, tehke see kättesaadavaks. Suurepärane viis on panna link traadita lehele oma dokumendi ülaossa ja peita see link pihuarvutite hulgast, kasutades pihuarvuti tüüpi. Lõppude lõpuks tulevad enamik inimesi teie avalehele, isegi mobiiltelefoniga - ja kui teie traadita lehe linki pole, siis nad lahkuvad, kui lehte on liiga raske kasutada.
Nutitelefonide veebilehtede paigutus
Esimene asi, mida peaksite nutitelefonide turule lehti kirjutades meeles pidama, on see, et kui te ei soovi, ei pea te muudatusi tegema. Enamiku saadaolevate nutitelefonide puhul on suurepärane see, et nad kasutavad selleks veebikomplekti brausereid (Safari iOS-is ja Chrome Android-is) kuvada veebilehti, nii et kui teie leht tundub Safaris või Chrome'is korras, näeb see enamikus nutitelefonides hea välja (lihtsalt palju väiksem). Kuid sirvimiskogemuse meeldivamaks muutmiseks saate teha järgmist.
- Pidage meeles, et ekraan on väike. Nutitelefonid kondenseerivad kõik need veerud tillukesse aknasse ja see võib muuta need ilma suumimata väga raskesti loetavaks. Enamik kasutajaid on harjunud suumima, kuid see võib muutuda tüütuks. Ühte pikka veergu teksti on lihtsam lugeda.
- Jagage lehed väiksemateks tükkideks. Mobiiltelefoni pikkade tekstilõikude lugemine võib olla keeruline, nii et nende asetamine mitmele lehele muudab nende lugemise lihtsamaks.
Lingid ja navigeerimine iPhone'is
- Mida lühemad on URL-id, seda parem. Kui olete kunagi proovinud mobiiltelefoni URL-i sisestada, teate, et see on piin (välja arvatud võib-olla teismelistele, kes on harjunud palju tekstsõnumeid saatma). Isegi iPhone'is on pikkade URL-ide sisestamine tüütu. Hoidke need lühikesed.
- Kuid pika lingi teksti on lihtsam puudutada. Kui olete lehel, kus mitu artiklit on lingitud erinevate artiklitega, on need kõik üksteise kõrval, siis võib olla väga raske puudutada seda õiget ilma suumimata. Paljud inimesed lihtsalt annavad alla ja lähevad kuhugi mujale. Lingid, milles on 3–5 sõna, on telefonil lihtsamini klõpsatavad kui 1-sõnalised.
- Ärge asetage navigeerimist ekraani ülaossa. Pole midagi tüütumat kui see, kui soovitud teabe leidmiseks tuleb sirvida ekraanide ja linkide ekraanide vahel. Kui olete tutvunud veebilehtedega, mis olid mõeldud mobiiltelefonide jaoks, näete, et esimesena kuvatakse sisu ja pealkiri. Siis allpool on navigeerimine.
- Ärge kartke navigeerimist varjata.Navigeerimislinkide peitmine CSS-i või JavaScripti abil ja nende ilmumine ainult siis, kui kasutaja seda küsib, on viis lehe nutitelefoni kasutajatele lihtsamaks muutmiseks.
Nõuandeid nutitelefonide piltide jaoks
- Kujutised peavad olema väikesed. Jah, Android ja iPhone suudavad pilte suumida ja suumida, kuid mida väiksemad nad on, nii mõõtmete kui ka allalaadimise aja jooksul, seda õnnelikumad on teie traadita kliendid. Piltide optimeerimine on alati hea mõte, kuid mobiiltelefonilehtede jaoks on see kriitiline.
- Pilte tuleb kiiresti alla laadida. Kujutised võtavad veebilehtedel palju ruumi, kui vaatate neid mobiilseadmest. Ja kuigi need on sageli väga toredad ja muudavad lehed paremaks, kui neid täisekraanil kuvatavas veebibrauseris vaadata, takistavad nad sageli mobiilseadet. Lisaks, kui nutitelefoni kasutaja on mobiilsidevõrgus, on viimane asi, mille eest maksta soovitakse, hulga tohutute piltide või navigeerimisikoonide allalaadimine.
- Ärge pange suuri pilte lehe ülaossa. Nii nagu navigeerimise puhul, võib olla väga tüütu oodata, kuni pildi, mis võtab kuni 3–4 ekraanitäit, laaditakse lehe ülaserva. Ja see on veebilehtedel äärmiselt tavaline. Ainus erand on see, kui lugeja teab, et ta saab pildigaleriis klõpsates pildi.
Mida tuleks mobiilseadmete jaoks disainimisel vältida
Mobiilisõbraliku lehe loomisel peaksite vältima mitut asja. Nagu eespool mainitud, kui soovite, et need tõesti teie lehel oleksid, saate seda teha, kuid veenduge, et sait toimiks ilma nendeta.
- Välk: Enamik mobiiltelefone ei toeta Flashi, seega pole mõistlik seda oma traadita lehtedele lisada.
- Küpsised: Paljudel mobiiltelefonidel pole küpsiste tuge. iPhone'idel on küll küpsiste tugi.
- Raamid: Isegi kui brauser neid toetab, mõelge ekraani mõõtmetele. Raamid lihtsalt ei tööta mobiilseadmetes - neid on väga raske või võimatu lugeda.
- Tabelid: Ärge kasutage mobiililehe paigutamiseks tabeleid. Ja püüdke tabeleid üldiselt vältida. Neid ei toeta iga mobiiltelefon (kuigi iPhone ja muud nutitelefonid neid toetavad) ja võite lõpuks saada kummaliste tulemustega.
- Pesastatud tabelid: Kui peate tabelit kasutama, siis ärge pesitsege seda teise tabelisse. Töölauabrauseritele on neid keeruline toetada ja need teevad parimal juhul lehe aeglasema laadimise.
- Absoluutsed meetmed: Teisisõnu, ärge määrake objektide mõõtmeid absoluutsuurustes (nagu pikslid, millimeetrid või tollid). Kui määrate midagi 100px laiuseks, võib see ühes mobiilseadmes olla pool ekraani ja teises kaks korda laiem. Suhtelised suurused (näiteks emid ja protsendid) toimivad kõige paremini.
- Fondid: Ärge arvake, et mõni neist fondid olete harjunud juurdepääsu omama, on see saadaval mobiiltelefonides.