Olet todennäköisesti nähnyt, kuinka iPhone voi kääntää ja laajentaa verkkosivuja. Se voi näyttää koko verkkosivun yhdellä silmäyksellä tai lähentää, jotta kiinnostava teksti on luettavissa. Yhdessä mielessä, koska iPhone käyttää Safaria, verkkosuunnittelijoiden ei pitäisi joutua tekemään mitään erityistä luoda verkkosivun, joka toimii iPhonessa. Mutta haluatko todella, että sivusi vain toimii - tai erottuu ja loistaa?
Kun sinä rakentaa verkkosivu, sinun on mietittävä, kuka tarkastelee sitä ja miten he näkevät sen. Jotkut parhaista sivustoista ottavat huomioon minkä tyyppisessä laitteessa sivua katsellaan, mukaan lukien tarkkuus, värivaihtoehdot ja käytettävissä olevat toiminnot. He eivät vain luota laitteeseen sen selvittämiseksi.
Yleiset ohjeet sivuston rakentamiseen mobiililaitteille
- Testaa mahdollisimman monella laitteella. Ensimmäinen asia, jonka sinun pitäisi tehdä, on tarkastella sivustoasi iPhonella ja yhtä monella eri tavalla mobiililaitteet tai emulaattorit kuin mahdollista. Vaikka voit käyttää emulaattoreita kaikkeen testaukseen, ne eivät todellakaan anna sinulle samaa tunnetta kuin yrittäessäsi selata verkkosivustoa pienellä pienellä näytöllä. Testaa todellisilla laitteilla mahdollisimman paljon.
- Sivut hajoavat sulavasti. Voit kirjoittaa sivusi Flash-yhteensopiva, laajakuvaselaimet, mutta varmista, että kriittiset tiedot ovat näkyvissä myös pienessä näytössä, joka ei pysty käsittelemään mitään erityisominaisuuksia (kuten evästeet, Ajax, Flash, JavaScript jne.). Kaikki muu kuin XHTML Basic on yli joidenkin matkapuhelinten. Vaikka useimmat älypuhelimet pystyvät käsittelemään kaikki nämä asiat, muut mobiililaitteet eivät.
- Luo langattomille sivuille sopiva sivu - ja tee siitä helppo löytää. Jos aiot rakentaa tietyn sivun matkapuhelinta ja langattomia asiakkaita varten, tee se saataville. Erinomainen tapa on laittaa linkki langattomalle sivulle asiakirjan yläosaan ja piilottaa linkki ei-kädessä pidettäviltä laitteilta kämmenlaitetyypillä. Loppujen lopuksi useimmat ihmiset tulevat kotisivullesi, jopa matkapuhelimilla - ja jos linkkiä langattomaan sivuun ei ole, he lähtevät, jos sivua on liian vaikea käyttää.
Web-sivuasettelu älypuhelimille
Ensimmäinen asia, joka sinun tulisi muistaa kirjoittaessasi sivuja älypuhelinmarkkinoille, on, että sinun ei tarvitse tehdä mitään muutoksia, jos et halua. Suurin osa käytettävissä olevista älypuhelimista on se, että he käyttävät Webkit-selaimia (Safari iOS: ssä ja Chrome Android: ssa) näyttää verkkosivuja, joten jos sivusi näyttää kunnolta Safarissa tai Chromessa, se näyttää hyvältä useimmilla älypuhelimilla (vain paljon pienempi). Mutta voit tehdä selauskokemuksesta miellyttävämpää:
- Muista, että näyttö on pieni. Älypuhelimet tiivistävät kaikki sarakkeet pieneen ikkunaan, mikä voi tehdä niistä erittäin vaikea lukea zoomaamatta. Useimmat käyttäjät ovat tottuneet zoomaukseen, mutta se voi olla väsyttävää. Yksi pitkä tekstisarake on helpommin luettavissa.
- Jaa sivut pienempiin paloihin. Matkapuhelimessa voi olla vaikea lukea pitkiä tekstiosia, joten niiden asettaminen useille sivuille helpottaa niiden lukemista.
Linkit ja navigointi iPhonessa
- Mitä lyhyemmät URL-osoitteet ovat, sitä parempi. Jos olet joskus yrittänyt kirjoittaa URL-osoitteen matkapuhelimeen, tiedät, että se on tuskaa (paitsi ehkä teini-ikäisille, jotka ovat tottuneet lähettämään paljon tekstiviestejä). Jopa iPhonessa on ikävä kirjoittaa pitkiä URL-osoitteita. Pidä ne lyhyinä.
- Mutta pitkää linkkitekstiä on helpompi napauttaa. Kun sivulla, jossa useita erillisiä sanoja on linkitetty eri artikkeleihin, aivan vierekkäin, voi olla hyvin vaikeaa napauttaa oikeaa sanaa zoomaamatta. Monet ihmiset vain luopuvat ja menevät muualle. Linkkejä, joissa on 3–5 sanaa, on helpompi napsauttaa puhelimessa kuin yhden sanan linkkejä.
- Älä aseta navigointiasi näytön yläreunaan. Mikään ei ole ärsyttävämpää kuin se, että sinun täytyy selata näyttöjä ja linkkinäytöksiä löytääksesi haluamasi tiedot. Jos olet tarkastellut matkapuhelimille suunniteltuja verkkosivuja, huomaat, että ensimmäiset esiin tulevat sisältö ja otsikko. Sitten sen alapuolella on navigointi.
- Älä pelkää piilottaa navigointiasi.Navigointilinkkien piilottaminen CSS: n tai JavaScriptin kanssa ja tekemällä niistä näkyvät vain, kun käyttäjä pyytää sitä, se on tapa helpottaa sivua älypuhelinten käyttäjille.
Vinkkejä älypuhelimien kuviin
- Kuvien on oltava pieniä. Kyllä, Android ja iPhone voivat zoomata ja loitontaa kuvia, mutta mitä pienempiä ne ovat, sekä mitoiltaan että latausaikaltaan, sitä onnellisempia langattomat asiakkaasi ovat. Kuvien optimointi on aina hyvä idea, mutta matkapuhelinsivuille se on kriittinen.
- Kuvien on ladattava nopeasti. Kuvat vievät paljon tilaa verkkosivuilla, kun katselet niitä mobiililaitteella. Ja vaikka ne ovat usein erittäin mukavia ja saavat sivut näyttämään paremmilta, kun niitä katsellaan koko näytön verkkoselaimella, ne estävät usein mobiililaitteen. Lisäksi kun älypuhelimen käyttäjä on matkapuhelinverkossa, viimeinen asia, jonka he haluavat maksaa, on ladata joukko valtavia kuvia tai navigointikuvakkeita.
- Älä laita suuria kuvia sivun yläosaan. Aivan kuten navigoinnissa, voi olla hyvin ikävystyttävää odottaa, että sivun yläosassa latautuu 3-4 kuvaruutua vastaava kuva. Ja tämä on erittäin yleistä verkkosivuilla. Ainoa poikkeus tähän on, jos lukija tietää, että hän saa kuvan, kun hän napsauttaa, esimerkiksi valokuvagalleriassa.
Mitä on vältettävä suunniteltaessa mobiililaitteille
Mobiililaitteille sopivan sivun luomisessa kannattaa välttää useita asioita. Kuten edellä mainittiin, jos haluat todella saada nämä sivullesi, voit, mutta varmista, että sivusto toimii ilman niitä.
- Salama: Useimmat matkapuhelimet eivät tue Flashia, joten ei ole hyvä idea sisällyttää sitä langattomille sivuillesi.
- Keksit: Monilla matkapuhelimilla ei ole evästetukea. iPhoneilla on evästetuki.
- Kehykset: Vaikka selain tukee niitä, ajattele näytön mittoja. Kehykset eivät vain toimi mobiililaitteilla - niitä on erittäin vaikea tai mahdotonta lukea.
- Taulukot: Älä käytä taulukoita asettelulle mobiilisivulla. Ja yritä välttää pöytiä yleensä. Niitä ei tueta kaikissa matkapuhelimissa (vaikka iPhonet ja muut älypuhelimet tukevat niitä), ja voit saada outoja tuloksia.
- Sisäkkäiset taulukot: Jos sinun on käytettävä taulukkoa, varmista, että et sijoita sitä toiseen taulukkoon. Näitä on vaikea tukea työpöydän selaimille, ja ne tekevät parhaimmillaan sivun latautumisen hitaammin.
- Ehdottomat toimenpiteet: Toisin sanoen, älä määritä objektien mittoja absoluuttisissa kooissa (kuten pikselit, millimetrit tai tuumat). Jos määrität jotain 100 kuvapisteen levyiseksi, yhdellä mobiililaitteella, joka voi olla puolet näytöstä, ja toisella se voi olla kaksi kertaa leveämpi. Suhteelliset koot (kuten ems ja prosentit) toimivat parhaiten.
- Fontit: Älä oleta, että jokin fontit olet tottunut siihen, että sinulla on pääsy matkapuhelimiin.