Yleiset mobiilimainonnan virheet
Mobiililaitteiden käyttö on yhä kasvussa, ja web-suunnittelun maailma kehittyy edelleen, joten suunnittelijoiden on opittava mukautumaan mobiililaitteisiin. Ajattelu "Oh, käyttäjät eivät käy verkkosivustollani mobiililaitteella" on kaikkien pahin virhe.
Kukaan ei voi estää mobiilikäytön kasvamista, ja kertoimet ovat, että jokainen sivusto vastaanottaa kävijöitä mobiililaitteissa. Joten paras strategia on olla mahdollisimman valmistautunut.
Ajatteleminen vain liikkuvista käyttäjistä ei riitä tilanteen korjaamiseen. Monet virheet ovat edelleen sitoutuneet prosessin aikana ja tietäen, mitä he ovat, on ensimmäinen askel niiden tehokasta välttämisessä tulevissa projekteissa.
Seuraavat ovat yleisimpiä virheitä mobiilisivustoilla.
Ei lasketa laitteen leveydestä
Tämä saattaisi kuulostaa itsestään selvältä, mutta kammottava sivusto näyttää tältä mobiililaitteelta (tässä tapauksessa iPhone):
Sinun on ymmärrettävä, että sivun sisältämillä elementeillä olisi oltava mahdollisimman suuri leveys sekä pystyttävä muodostamaan koko HTML-dokumentti erilaisten näyttökokojen huomioon ottamiseksi.
Sivun yläreunassa oleva kuvakaappaus on muotoiltu muuttuvien laitteiden leveydelle, mutta sen elementit eivät ole. Oikealla olevaa sivua ei ole alustettu muuttuvien laitteiden leveydelle, joten sen elementit näyttävät liian pieniltä. Vaikka body elementti asetettiin kapeammaksi leveydeksi (esimerkiksi 320 pikseliä), se vain työnnetään näytön vasemmalle puolelle ja on edelleen pieni ja lukukelvoton.
Tämä voidaan korjata yksinkertaisella HTML-rivillä kustakin asiakirjasta:
Tämä pieni yksityiskohti ja alustetut elementit tekevät hyvää mobiilikokemusta.
Käyttäjät täyttävät pitkän lomakkeen
Lomakkeiden täyttäminen on ärsyttävää jopa pöytätietokoneissa, ja se on vieläkin ikävämpää mobiililaitteella. Mobiililaitteiden web-lomakkeen suunnittelu on monimutkainen tehtävä; keskittyä rakentamaan yksinkertaisia muotoja, jotka eivät kysy paljon käyttäjiltä.
Määritä pyydettävän tyypin käyttäjä, niin että näppäimistöllä on elementit, joita käyttäjä tarvitsee, kun he keskittyvät kenttään. Esimerkiksi kentän syöttötyyppi määritetään nimellä number asettaa näppäimistön näyttämään numeroita oletusarvoisesti, eikä kirjaimia.
Ei uudelleenarviointia
Sisällön siirto isojen näyttöjen verkkoympäristöistä on tullut omaksi strategiaksi, kuten silloin, kun sisältöä oli siirrettävä tulostuksesta verkkoon. Avaruus- ja painorajoitteet matkaviestimille ovat paljon merkittävämpiä kuin tietokoneissa.
Luke Wroblewskin "design for mobile first" -menetelmällä määritellään vahva lähestymistapa, jota voimme toteuttaa. Se estää meitä luomasta yhden sarjan sisältöä työpöydän webille ja toiselle asetukselle mobiilisovellukselle. Liikkuvan suunnittelun tiimin pitäisi harkita, onko sisältö, joka ei näy mobiiliversiossa, edes välttämätöntä? Ehkä se ei edes tarvitse näkyä työpöydän versiossa.
Käyttämällä sisältöä koristetarkoituksiin tai vain täyttämään tilaa lähes takaa, että se poistetaan myöhemmin, joten miksi ei pidä vain olennaista sisältöä alusta alkaen?
Prosessin kulku voi paljastaa muita yleisiä virheitä ja ongelmia.
Sisällön ja toiminnallisuuden poistaminen ilman syytä
Sisällön tarkistaminen voi olla hankalaa ja tiukat aikataulut voivat pakottaa sen tapahtumaan nopeammin kuin pitäisi. Tämä johtaa usein sisällön ja toimintojen poistamiseen virheellisesti - itse asiassa melkein satunnaisesti.
Prosessi sisältää syvällisen analyysin ennen muokkausta ja kurkistamista. Nykyistä sisältöä on tarkistettava, jotta voidaan erottaa sisältöä, joka lisää arvoa ja täyttää käyttäjien odotukset sisällöstä, joka vain häiritsee tai täyttää tilaa.
Jotta ymmärtäisit sisällön luomisen ja muokkaamisen strategian, tutustu kirjaan Sisällön strategia verkossa Kristina Halvorson. Se kattaa kaikki yksityiskohdat, sisällön sisältöstrategiasta, merkittävän materiaalin tarkastuksesta ja muokkaamisesta.
Unohtamatta sormen kokoa ja rajoituksia
Kun käytät tietokonetta, käytämme täsmällisiä hiiren napsautuksia jokaiseen tehtävään. Voimme helposti napsauttaa 16 × 16 -kuvaketta; prosessi ei sisällä mitään vaikeuksia.
Mobiilikäyttäjällä on kuitenkin sormen tarkkuus, joka on lähes koskaan ohut.
Apple on päättänyt 44 kuvapistettä vähintään hyväksyttävä koko (44 × 30, tarkasti) ja on ottanut tämän standardin käyttöön tuotteissaan.
Elementtien koon lisäksi näiden elementtien välinen tila jätetään usein huomiotta. Ajattele vaihtoehtoisia vaihtoehtoja, joista jokaisella on valintanappi ja rivin korkeus 0 heidän välillään. Käyttäjät joutuvat tekemään virheitä, vaikka he ottaisivatkin aikaa. Miksi me monimutkaisimme asioita tällä tavoin?
Luke Wroblewski on ehkä mennyt pidemmälle kuin kuka tahansa tunnistaa vakiokokoja mobiilisuunnittelua varten, laatimalla suosituksia useilta alustoilta. Windows Phone UI: n ja vuorovaikutusoppaan mukaan elementtien välisen vakiokoon tulee olla vähintään 8 pikseliä.
Pitkä sivun latausaika: Heavy image files
Raskaat kuvatiedostot ovat olleet ongelma alusta alkaen web-suunnittelussa. Ja mobiiliverkossa on entistä suurempia haasteita, sillä latausajat lisääntyvät, kun yhdistät joidenkin laitteiden rajalliset ominaisuudet muuttuviin tiedonsiirtosignaaleihin (jotka riippuvat Internet-yhteyden tyypistä).
Kuvan optimointi on myös tärkeä näkökohta mobiilisuunnittelussa.
Pitkä sivun latausaika: Liian monta kuvaa
Monet pienet kuvat aiheuttavat saman haittapuolen kuin yhden raskaan kuvan.
Tämä on erityisesti ongelma, kun suunnittelijat yrittävät jäljitellä älykkäiden älypuhelinsovellusten ulkoasua, mukaan lukien iOS-otsikoiden ja painikkeiden kaltevuudet ja pyöristetyt kulmat.
Tämä johtaa jälleen toiseen virheeseen ...
Ei hyödynnä CSS3- ja HTML5-ominaisuuksia
Monenlaisia kuvia voidaan välttää kokonaan heti, kun HTML5 ja CSS3 ovat ympärillä. Lisäksi mobiiliselaimet antavat meille paljon enemmän vapautta kuin työpöytäselaimissa, koska lähes kaikki ne on rakennettu Webkit moottori, joka tukee sekä HTML5 että CSS3.
Miksi ei hyödynnä tätä? element in HTML5 can reduce the need for images, as can the new CSS3 properties that provide basic styles like gradients and rounded corners. elementti HTML5: ssa voi vähentää kuvien tarvetta, samoin kuin uudet CSS3-ominaisuudet, jotka tarjoavat perusstylejä, kuten kaltevuuksia ja pyöreitä kulmia. Se on tärkeä tapa tallentaa sivun latausaikoihin.
Liian grafiikka nyt. Liian monien kuvien käyttäminen ei ole ainoa tapa vahingoittaa mobiilisuunnittelua, ja kuvat eivät ole ainoita, jotka hidastavat sitä.
Pitkä sivun latausaika: Liian monta tuontia
Näemme tämän pääasiassa puitteissa (ja näissä kehyksissä olevat laajennukset). Katsotaanpa kohta, se tapahtuu paljon, ja se on tapahtunut niin oh-so-needed-ja-hyödyllisten AJAX-kehysten, kuten jQueryn ja MooToolsin, saapumisen jälkeen. jQuery-kehittäjät jopa menivät niin pitkälle, että luodaan mobiililaajennuksen nimeltään jQuery Mobile.
Nämä tekevät työstä niin yksinkertaista, että monet suunnittelijat eivät ole huolissasi seurauksista, jotka riippuvat voimakkaasti niistä. Olet todennäköisesti nähnyt jotain tällaista a tag:
Ja älä unohda jQuery Mobile -tuontia:
Jokainen yksittäinen tuonti tässä otsikossa on paluu palvelimelle, ja se hidastaa sivua samalla tavalla kuin latauskuva.
On olemassa keinoja tämän asian ympärille. Voit syntetisoida tuontia. Miksi tuoda useita pieniä skriptejä, jos voit soittaa isoksi? Voit myös arvioida, tarvitsetko kehyksen lainkaan. Onko todella sen arvoista? Voisitteko tehdä työtä itse vähemmän monimutkaisuudella?
Pitkä sivun latausaika: Ei tiedota selkeästi
Sanotaan, että tietyt toiminnot mobiilisivustollasi kestää pidempään kuin toiset. Se on hieno; se ei ole jotain hulluksi, jos olet tehnyt todella vaivaa nopeuttaa asioita. Tärkeää nyt harkitsemaan on, miten voit odottaa käyttäjäystävällisempiä käyttäjälle?
Ratkaisun tarkoituksena on tehdä mallista mahdollisimman läpinäkyvä. Mitä tapahtuu? Käyttäjän on kyettävä vastaamaan tähän kysymykseen aina. Jokaisesta kuormitustoiminnasta mallissa pitäisi olla selkeä lausunto siitä käyttäjälle.
Älkää koskaan aliarvioi yksinkertaista "Loading ..." merkkijonoa.
Ei asetuksia kotinäytön kuvaketta
Kukaan ei halua, että heidän mobiilisovelluksensa pikakuvake näyttää jotain yllä olevasta vasemmasta. Oikealla oleva poikkeava ART-kuvake on paljon houkuttelevampi ja todennäköisemmin napsautettu.
Käyttäjien käsitys on, että he eivät yleensä ymmärrä. Kotikäyttö, jossa on täynnä pikavalintoja, joilla ei ole tunnistettavia kuvakkeita, tekee käyttäjistä 100 prosenttia riippuvaisista otsikoista. (Ja silloinkin pitkät otsikot pakotetaan ja täytetään ellipseillä, kuten yllä, mikä tekee niistä vielä vähemmän tunnistettavia).
Koti-näytön kuvakkeen asettaminen ei ole ollenkaan vaikeaa. Kun olet luonut kuvakkeen PNG-tiedostona (jonka pitäisi olla 158 × 158 pikseliä), lisää seuraava koodi riviin HTML-asiakirjasta:
Yksinkertainen ja hyödyllinen. Tämä koodi toimii myös Android-puhelimilla. Sinun ei tarvitse edes lisätä kiiltoa tai pyöristettyjä kulmia; iPhone lisää automaattisesti.
Ei ole herkkä
Responsive web-suunnittelu on yksi vastaus näihin kysymyksiin. Se on hankala toteuttaa, mutta tehokas, kun se on tehty hyvin. Äskettäin kirjoitti Ethan Marcotte koko kirja aiheesta. Suosittelen sitä, jos haluat päästä tähän paljon yksityiskohtaisemmin.
Responsive design on suunnittelemasta muotoilua, joka mukautuu mukavasti kontin koosta riippumatta. Se sisältää näkökohdat, kuten nestejohdot (joissa elementit uudelleenorganisoidaan selaimen muuttuessa kooltaan) ja kuvat, jotka sopeutuvat sivun laajentuessa ja sopimuksina.
Marcotte kirjoitti myös yksityiskohtainen johdanto herkälle suunnittelulle , mikä voi auttaa sinua ymmärtämään aiheen paremmin.
Onko sinulla henkilökohtaista kokemusta mobiilisuunnittelun haasteista? Mitä ongelmia olette kohdanneet? Mobiilikäyttäjänä, oletko kohdannut muita ongelmia kuin tässä mainitut?