Võimalik, et olete näinud, kuidas iPhone saab veebilehti klappida ja laiendada. See võib näidata kogu veebilehte lühidalt või suurendada, et soovitud tekst oleks loetav. Mõnes mõttes, kuna iPhone kasutab Safari, ei peaks veebidisainerid tegema midagi erilist, et luua iPhone'is töötavat veebilehte.
Kuid kas sa tõesti tahad, et teie leht toimiks lihtsalt? Enamik disainerid soovivad oma lehti särama!
Veebilehe ehitamisel peate mõtlema, kes seda vaatab ja kuidas seda vaadatakse. Mõned parimad saidid võtavad arvesse seda, millist seadet leht lehti vaadatakse, sealhulgas resolutsioon, värvivalikud ja saadaolevad funktsioonid. Nad ei kasuta seadet ainult selle välja selgitamiseks.
Mobiilseadmete veebisaidi loomise üldised juhised
- Katsetage nii palju seadmeid kui võimalik. Esimene asi, mida peaksite tegema, on teie saidi kuvamine iPhone'is ja nii palju erinevaid mobiilseadmeid või emulaatoreid kui võimalik. Kuigi saate kasutada emulante kogu testimise jaoks, ei anna need tõesti teile samasugust tundlikkust kui väikesele väikesele ekraanile veebisaidile liikumiseks, nii et katsetage tegelikke seadmeid nii palju kui võimalik.
- Muutke oma lehti graatsiliselt maha. Võite oma lehti kirjutada Flash-funktsiooniga laiekraaniga brauseritele, kuid veenduge, et kriitiline teave on nähtav isegi väikeses monitoris, mis ei suuda mingeid erilisi funktsioone (nagu küpsised, Ajax, Flash, JavaScript jne) hallata. Midagi kaugemale kui XHTML Basic jääb mõnest mobiiltelefonist kaugemale. Kuigi enamik nutitelefoni suudab kõiki neid asju (va muidugi iPhone'is Flash), ei saa teised mobiilseadmed seda teha.
- Ehitage traadita spetsiifiline leht ja saate seda hõlpsasti otsida. Kui kavatsete oma mobiiltelefoni ja traadita klientide jaoks spetsiaalset lehte luua, tehke see kättesaadavaks. Suurepärane võimalus on paigutada traadita lehe link dokumendi ülaosas ja seejärel varjata selle lingi pihuarvutite abil pihuarvutite abil. Lõppude lõpuks jõuavad enamik inimesi teie avalehele, isegi mobiiltelefone, ja kui teie traadita lehe lingi pole seal, jätavad nad lehe, kui lehte on liiga raske kasutada.
Nutitelefonide veebi lehe kujundus
Esimene asi, mida peaksite meeles pidama, kui kirjutad lehti nutitelefoni turule, on see, et te ei pea midagi muutma, kui te ei soovi seda teha. Suurem osa kõige nutitelefonidest on see, et veebilehtede kuvamiseks kasutavad Webkiti brauserid (Safari iOS-is ja Chrome Androidis), nii et kui teie leht looks Safari või Chrome-i korral õige, siis tundub see enamikule nutitelefonidele (vaid palju väiksematele ) Kuid on palju asju, mida saate teha, et muuta sirvimise kogemus meeldivamaks:
- Pidage meeles, et ekraan on väike. Nutitelefonid koondavad kõik need veerud väikestesse akendesse ja see võib neid lugeda suumita raskeks. Enamikku kasutajaid kasutatakse suurendamiseks, kuid see võib osutuda tüütuks. Üks pikk tekstitekst on lihtsam lugeda.
- Jagage lehed väiksemateks osadeks. Mobiiltelefoni teksti pikkade segmentide lugemine võib olla keeruline, mistõttu neid mitmele lehele pannes nad hõlpsamini loetaks.
IPhone'i lingid ja navigeerimine
- Lühem URL-id, seda parem. Kui olete kunagi proovinud mobiiltelefoni URL-i sisestada, siis teate, et see on valu (välja arvatud ehk teismeliste jaoks, kes kasutavad suure hulga tekstsõnumite saatmist). Isegi iPhone'is on pikkade URL-ide sisestamine tüütu. Hoia neid lühidalt.
- Kuid pika lingi teksti on hõlpsamini puudutada. Kui lehel, kus erinevate artiklitega on seotud mitu eraldi sõna, on kõik üksteise kõrval üks väga õige, ilma et suumida. Paljud inimesed lihtsalt loobuvad ja lähevad kuskil mujale. Nendes on 3-5-sõnaliste lingid, mida on lihtsam telefoni klikkida kui ühe sõna lingid.
- Ärge paigutage navigatsiooni ekraani ülaosas. Ei ole midagi tüütu, kui teil on soovitud teabe leidmiseks ekraanide ja ekraanide kuvamine. Kui olete vaadanud mobiiltelefonidele mõeldud veebilehti, näete, et esimesed asjad, mis kuvatakse, on sisu ja pealkiri. Siis allpool on navigeerimine.
- Ära karda oma navigeerimist peita. Navigeerimislinkide varjamine CSS-i või JavaScriptiga ning nende ilmumine ilmub ainult siis, kui kasutaja küsib, et see on viis, kuidas nutitelefoni kasutajaid hõlbustada.
Nutitelefonide piltide näpunäited
- Pildid peavad olema väikesed. Jah, Android-i ja iPhone saab pilte suurendada ja suurendada, kuid mida väiksemad on need mõlemad mõõtmed ja allalaadimise aeg, seda nauda saavad teie traadita kliendid. Piltide optimeerimine on alati hea mõte, kuid mobiiltelefonide lehtedel on see kriitiline.
- Pildid peavad kiiresti alla laadima. Kui mobiilseadmes vaatate neid, võtab veebilehtedel palju ruumi. Ja kuigi nad on sageli väga toredad ja muudavad lehti täisekraanvaates veebibrauseris vaatamisel paremaks, jõuavad nad sageli mobiilseadmesse. Kui mobiiltelefonivõrgu kasutajal on nutitelefoni kasutaja, siis viimane asi, mida nad tahavad maksta, laadib hulga tohutuid pilte või navigeerimisikoneid alla.
- Ärge asetage suuremaid pilte lehe ülaosas. Nii nagu navigeerimise puhul, võib ka väga tüütu oodata pildi laadimist, mis võtab 3-4 lehte, et laadida lehe ülaosasse. Ja see on veebilehtedel väga levinud. Ainsaks erandiks on see, kui lugeja teab, et nad hakkavad pilti klõpsama, öeldes fotogalerii.
Mida vältida mobiilseadmete projekteerimisel
Mobiilisõbraliku lehe ehitamisel tuleb vältida mitmeid asju. Nagu eespool mainitud, saate tõesti, kui soovite, et need oleksid teie lehel, kuid veenduge, et see töötab ilma nendeta.
- Flash - enamik mobiiltelefoni ei toeta Flashi, seega ei ole hea mõte lisada see traadita lehtedele.
- Küpsised - paljudel mobiiltelefonidel puudub küpsiste tugi. iPhone'idel on küpsiste tugi.
- Raamid - isegi kui brauser neid toetab, mõelge ekraani mõõtmed. Raamid lihtsalt ei tööta mobiilseadmetes - neid on väga raske või võimatu lugeda.
- Tabelid - ärge kasutage tabeleid mallilehekülje kujundamiseks. Ja proovige tabelit üldiselt vältida. Neid ei toetata igal mobiiltelefonil (kuigi iPhones ja muud nutitelefonid neid toetavad) ja võite jõuda kummardavate tulemustega.
- Pesastatud tabelid - kui peate lauda kasutama, veenduge, et see ei asuks teises tabelis. Arvutirakenduste jaoks on neid raske toetada ja parimal moel lehte laadida aeglasemalt.
- Absoluutsed meetmed - teisisõnu, ei määratle objektide mõõtmeid absoluutväärtustes (näiteks piksleid, millimeetrites või tollides). Kui määrate midagi 100-piksliseks laiuseks, võib see olla ühes mobiilseadmes, mis võib olla pool ekraanist, ja teisel võib see olla kahekordne laius. Suhtelised suurused (nt ems ja protsendid) töötavad kõige paremini.
- Fondid - ärge eeldage, et ühtegi fonti, millega te varem pääsete juurde, on saadaval mobiiltelefone.
Loe rohkem
- Kuidas teha oma veebisaiti mobiilne kasutajanimega PHP