Oletko nähnyt, miten iPhone voi kääntää ja laajentaa verkkosivuja. Se voi näyttää koko verkkosivun yhdellä silmäyksellä tai suurentaa sen, jotta teksti, josta olet kiinnostunut, on luettavissa. Yhdessä mielessä, koska iPhone käyttää Safaria, web-suunnittelijoiden ei pitäisi joutua tekemään mitään erityistä web-sivun luomiseen, joka toimii iPhonessa.
Haluatko varmasti sivusi toimimaan vain? Suurin osa suunnittelijoista haluaa, että heidän sivunsa loistavat!
Kun rakennat verkkosivun , sinun täytyy miettiä, kuka näkee sen ja miten he näkevät sen. Jotkut parhaista sivustoista ottavat huomioon, millaista laitetta sivu katsellaan, mukaan lukien tarkkuus, värivaihtoehdot ja käytettävissä olevat toiminnot. He eivät vain luota laitetta käsittelemään sitä.
Yleiset ohjeet sivuston rakentamiseksi mobiililaitteille
- Testaa mahdollisimman monta laitetta. Ensimmäinen asia, jonka pitäisi tehdä, on nähdä sivustosi iPhonessa ja niin monta eri mobiililaitetta tai emulaattoria kuin mahdollista. Vaikka voit käyttää emulaattoreita kaikkiin testeihisi, ne eivät todellakaan anna sinulle samaa tunnetta kuin yrittää selata verkkosivustoa pienellä pienellä näytöllä, joten testata todellisia laitteita niin paljon kuin mahdollista.
- Tee sivusi heikkenevästi. Voit kirjoittaa sivuillesi Flash-yhteensopivat laajakuvaselaimet, mutta varmista, että kriittiset tiedot ovat näkyvissä myös pienessä näytössä, joka ei pysty käsittelemään mitään erityisiä ominaisuuksia (kuten evästeet, Ajax, Flash, JavaScript jne.). Kaikki XHTML Basicin ulkopuolella jäävät matkapuhelinten ulkopuolelle. Vaikka useimmat älypuhelimet voivat käsitellä kaikkia näitä asioita (paitsi iPhone-Flash, tietenkin), muut mobiililaitteet eivät voi.
- Rakenna langaton tietyn sivun - ja etsiä sitä helposti. Jos aiot rakentaa tietyn sivun matkapuhelimeesi ja langattomille asiakkaille, saat sen saataville. Hyvä tapa on laittaa linkki langattomaan sivulle asiakirjan yläosassa ja piilottaa tämä linkki ei-kädessä pidetyistä laitteista kämmenlaitteen tyypin avulla. Loppujen lopuksi useimmat ihmiset tulevat kotisivullesi, jopa matkapuhelimissa - ja jos linkki langattomaan sivuosi ei ole, he lähtevät, jos sivu on liian vaikea käyttää.
Älypuhelinten verkkosivun asettelu
Ensimmäinen asia, jonka pitäisi muistaa, kun kirjoitat älypuhelinten sivuja, on, että sinun ei tarvitse tehdä muutoksia, jos et halua. Suurin osa useimmista älypuhelimista on, että he käyttävät Webkit-selaimia (Safari iOS: ssä ja Chrome Androidissa), jotta verkkosivut näkyvät. Jos sivuesi näyttää sopivalta Safariin tai Chromeon, se näyttää hyvältä useimmilta älypuhelimista (vain paljon pienemmät ). Mutta voit tehdä selailukokemuksen miellyttävää:
- Muista, että näyttö on pieni. Älypuhelimet tiivistävät kaikki nämä sarakkeet alas pieneen ikkunaan, ja tämä voi tehdä niistä erittäin vaikeita lukea ilman zoomausta. Useimpia käyttäjiä käytetään zoomaukseen, mutta se voi olla hankalaa. Yksi pitkä sarake tekstiä on helpompi lukea.
- Jaa sivut pienempiin paloihin. Matkapuhelimesta voi olla vaikea lukea pitkät tekstisegmentit, joten niiden asettaminen useisiin sivuihin helpottaa niiden lukemista.
Linkit ja navigointi iPhonissa
- Mitä lyhyempi URL-osoitteet ovat, sitä paremmin. Jos olet joskus yrittänyt kirjoittaa URL-osoitteen matkapuhelimeen, tiedät, että se on kipu (paitsi ehkä teini-ikäisille, jotka ovat tottuneet lähettämään paljon tekstiviestejä). Jopa iPhonessa on tylppää kirjoittaa pitkiä URL-osoitteita. Pidä ne lyhyt.
- Pitkä linkkiteksti on kuitenkin helpompi koskettaa. Kun sivulle, jossa useat erilliset sanat on linkitetty eri artikkeleihin, aivan vierekkäin, voi olla erittäin vaikea napata oikein ilman zoomausta. Monet ihmiset luopuvat ja menevät muualle. Linkit, joissa on 3-5 sanaa, on helpompi napsauttaa puhelinta kuin yhden sanan linkit.
- Älä laita navigointiasi näytön yläosaan. Ei ole mitään ärsyttävää, että sinun täytyy selata sivuja näytöissä ja linkkien näytöissä löytääksesi haluamasi tiedot. Jos olet tutkinut matkapuhelimiin suunniteltuja verkkosivuja, näet, että ensimmäiset esiin tulevat asiat ovat sisältö ja otsikko. Sen jälkeen alla on navigointi.
- Älä pelkää piilottaa navigointiasi. Navigointiyhteyksien kätkeminen CSS: llä tai JavaScript-ohjelmalla ja niiden tekeminen näkyvät vasta, kun käyttäjä kysyy sitä, mikä helpottaa sivun älypuhelinten käyttäjille.
Vinkkejä kuvia älypuhelimissa
- Kuvien on oltava pieniä. Kyllä, Android ja iPhonet voivat zoomata ja zoomata kuvia , mutta pienemmät ovat molemmissa mittasuhteissa ja latausaikana onnellisempia langattomia asiakkaitasi. Kuvien optimointi on aina hyvä asia, mutta matkapuhelimen sivuilla se on kriittinen.
- Kuvia on ladattava nopeasti. Kuvat vievät paljon tilaa verkkosivuilla, kun katselet niitä mobiililaitteesta. Ja vaikka ne ovat usein erittäin mukavia ja tekevät sivuista näyttävän paremmilta, kun niitä katsellaan koko näytön web-selaimella, ne tulevat usein matkalla mobiililaitteeseen. Plus, kun älypuhelimen käyttäjä on solukkoverkossa, viimeinen asia, jonka he haluavat maksaa, lataa joukon valtavia kuvia tai navigointikuvakkeita.
- Älä laita suuria kuvia sivun yläosaan. Aivan kuten navigoinnin yhteydessä, voi olla hyvin tylsiä odottaa kuvaa, joka kestää 3-4 lajittua kuvaruudusta ladataksesi sivun yläosaan. Tämä on erittäin yleistä verkkosivuilla. Ainoa poikkeus tähän on, jos lukija tietää, että he saavat kuvan, kun he napsahtavat, sanovat valokuvagalleriassa.
Mitä sinun pitäisi välttää suunnittelemalla mobiililaitteille
On monia asioita, joita sinun pitäisi välttää rakentaessasi mobiiliystävällistä sivua. Kuten edellä mainittiin, jos haluat todella, että nämä ovat sivuillasi, voit kuitenkin varmistaa, että sivusto toimii ilman niitä.
- Flash - useimmat matkapuhelimet eivät tue Flashia, joten se ei ole hyvä idea sisällyttää siihen langattomia sivuja.
- Evästeet - monilla matkapuhelimilla ei ole evästetukea. iPhoneilla on evästetuki.
- Kehykset - vaikka selain tukee niitä, mieti ruudun mitat. Kehykset eivät toimi mobiililaitteilla - ne ovat hyvin vaikeita tai mahdotonta lukea.
- Taulukot - älä käytä taulukoita ulkoasulle mobiilisivulla. Ja yritä välttää taulukoita yleensä. Niitä ei tueta kaikissa matkapuhelimissa (vaikka iPhones ja muut älypuhelimet tukevat niitä) ja voit päätyä outoja tuloksia.
- Sisäkkäiset taulukot - jos sinun on käytettävä taulukkoa, varmista, ettet pistä sitä toiseen taulukkoon. Nämä ovat vaikeita pöytäselaimille, ja ne voivat parhaimmillaan tehdä sivun latauksen hitaammin.
- Absoluuttiset toimenpiteet - toisin sanoen, älä määritä objektien mitat absoluuttisissa kokoluokissa (kuten pikseleissä, millimetreissä tai tuumissa). Jos määrität jotain 100px leveä, yhdellä mobiililaitteella, joka saattaa olla puolet näyttöruudusta, ja toinen voi olla kaksi kertaa leveys. Suhteelliset koot (kuten ems ja prosenttiosuudet) toimivat parhaiten.
- Fontit - älä oleta, että jokin käytetyistä kirjasimista on käytettävissä matkapuhelimissa.
Lue lisää
- Kuinka tehdä sivustosi Mobile Friendly PHP