Kuinka havaita verkkosivustoosi osuvia mobiililaitteita

click fraud protection

Asiantuntijat ovat jo vuosien ajan sanoneet, että mobiililaitteiden kävijöiden liikenne verkkosivustoille on kasvanut dramaattisesti. Tästä syystä monet yritykset ovat älykkäästi alkaneet omaksua mobiilistrategian online-läsnäololleen luomalla kokemuksia, jotka soveltuvat puhelimelle ja muille mobiililaitteille.

Kun olet viettänyt aikaa oppimiseen suunnitella matkapuhelinten verkkosivuja, ja strategian toteuttamiseksi sinun on myös varmistettava, että sivustosi kävijät näkevät nämä mallit. Voit tehdä tämän monilla tavoilla, ja jotkut toimivat paremmin kuin toiset. Tässä tarkastellaan tapaa, jolla voit käyttää mobiilitukea verkkosivustollasi, sekä suosituksen loppupuolella, mikä on paras tapa saavuttaa tämä nykypäivän verkossa.

Anna linkki toiseen sivustoversioon

Tämä on ylivoimaisesti helpoin tapa käsitellä matkapuhelimen käyttäjiä. Sen sijaan, että olisit huolissasi siitä, näkevätkö he sivusi tai eivät, laita sivun yläosaan lähelle linkki, joka viittaa erilliseen sivustosi mobiiliversioon. Sitten lukijat voivat itse valita, haluavatko he nähdä mobiiliversiota vai jatkaa "normaalilla" versiolla.

instagram viewer

Tämän ratkaisun etuna on, että se on helppo toteuttaa. Se edellyttää, että luot optimoidun version mobiililaitteille ja lisää sitten linkki jonnekin lähellä normaalien sivustosivujen yläosaa.

Haittoja ovat:

  • Sinun on ylläpidettävä erillistä versiota sivustosta mobiilikäyttäjille. Kun sivustosi kasvaa, saatat unohtaa ylläpitää sitä toista versiota, ja sivustosi voivat pudota synkronoinnista.
  • Luodaanko myös kolmas versio tableteille? Entä neljäs versio puettavat? Tämä laitekohtaisten versioiden käsite voi siirtyä hallinnan ulkopuolelle hyvin nopeasti.
  • Sinun on laitettava ruma linkki sivun yläosaan, jonka muut kuin mobiililaitteet voivat nähdä (ja mahdollisesti napsauttaa).

Viime kädessä tämä lähestymistapa on vanhentunut, joka ei todennäköisesti ole osa modernia mobiilistrategiaa. Sitä käytetään joskus stop-gap-korjauksena parempaa ratkaisua kehitettäessä, mutta se on tässä vaiheessa oikeastaan ​​lyhytaikainen kaistaapu.

Käytä JavaScriptiä

Jotkin kehittäjät käyttävät edellä mainitun lähestymistavan muunnelmissa jonkinlaista selaimen tunnistusta skripti havaitsemaan, onko asiakas mobiililaitteella, ja ohjaamaan heidät sitten kyseiseen erilliseen matkapuhelimeen sivusto. Ongelma selain havaitsemis- ja mobiililaitteet on, että siellä on tuhansia mobiililaitteita. Jos yrität havaita ne kaikki yhdellä JavaScriptillä, kaikki sivut voivat muuttua lataavaksi painajaiseksi - ja sinulla on edelleen monia samoja haittoja kuin edellä mainitussa lähestymistavassa.

Käytä CSS @media -kämmenlaitetta

CSS-komento @media-kämmenlaite näyttää olevan ihanteellinen tapa näyttää CSS tyylit vain kannettaville laitteille - kuten matkapuhelimille. Tämä näyttää olevan ihanteellinen ratkaisu sivujen näyttämiseen mobiililaitteille. Kirjoitat yhden verkkosivun ja luot sitten kaksi tyylisivua. Ensimmäinen "näyttö" -mediatyypistä tyylittää sivusi näytöille ja tietokoneen näytöille. Toinen "kämmenlaite" -tyylistä tyylittää sivusi pienille laitteille, kuten matkapuhelimille. Kuulostaa helpolta, mutta se ei todellakaan toimi käytännössä.

Tämän menetelmän suurin etu on, että sinun ei tarvitse ylläpitää verkkosivustosi kahta versiota. Sinä vain ylläpidät yhtä ja sitä tyylilehti määrittelee, miltä sen pitäisi näyttää - mikä on todella lähestymässä haluamaamme loppuratkaisua.

Tämän menetelmän ongelmana on, että monet puhelimet eivät tue mediatyyppiä - ne näyttävät sivunsa sen sijaan näytön mediatyypillä. Ja monet vanhemmat matkapuhelimet ja kämmenlaitteet eivät tue lainkaan CSS: ää. Loppujen lopuksi tämä menetelmä on epäluotettava ja sitä käytetään siksi harvoin verkkosivuston mobiiliversioiden toimittamiseen.

Käytä PHP: tä, JSP: tä, ASP: tä tunnistamaan User-Agent

Tämä on paljon parempi tapa ohjata mobiilikäyttäjät a mobiiliversio koska se ei ole riippuvainen komentosarjakielestä tai CSS: stä, jota mobiililaite ei käytä. Sen sijaan se käyttää palvelinpuolen kieltä (PHP, ASP, JSP, ColdFusion jne.) Tarkastellakseen käyttäjäagenttia ja muuttamalla sitten HTTP-pyyntö osoittaa mobiilisivulle, jos se on mobiililaite.

Yksinkertainen PHP-koodi tätä varten näyttäisi tältä:

Ongelmana on, että on paljon ja paljon muita potentiaalisia käyttäjäagentteja, joita mobiililaitteet käyttävät. Tämä komentosarja saa kiinni ja ohjaa monet niistä, mutta ei kaikkia millään tavalla. Ja lisää lisätään koko ajan.

Lisäksi, kuten muillakin yllä olevilla ratkaisuilla, joudut ylläpitämään erillistä mobiilisivustoa näille lukijoille! Tämä haitta kahden (tai useamman!) Verkkosivuston hallinnoimisesta on riittävä syy etsiä parempaa ratkaisua.

Käytä WURFL: ää

Jos olet edelleen päättänyt ohjata matkapuhelimesi käyttäjät erilliselle sivustolle, niin WURFL (Wireless Universal Resource File) on hyvä ratkaisu. Tämä on XML-tiedosto (ja nyt DB-tiedosto) ja erilaiset DBI-kirjastot, jotka eivät sisällä vain ajantasaista langatonta käyttäjäagenttitietoa, mutta myös mitä ominaisuuksia ja ominaisuuksia nämä käyttäjäagentit tukevat.

Jos haluat käyttää WURFL: ää, lataat XML-määritystiedoston, valitset sitten kielesi ja otat API: n käyttöön verkkosivustollasi. On työkaluja WURFL: n käyttämiseen Java, PHP, Perl, Ruby, Python, Net, XSLTja C ++.

WURFL: n käytön etuna on, että monet ihmiset päivittävät ja lisäävät kokoonpanotiedostoa koko ajan. Joten vaikka käyttämäsi tiedosto on vanhentunut melkein ennen kuin olet lopettanut sen lataamisen, on todennäköistä, että jos sinä lataa se noin kuukaudessa, sinulla on kaikki mobiiliselaimet, joita lukijasi käyttävät tavallisesti ilman mitään ongelmia. Haittapuoli on tietysti se, että sinun on ladattava ja päivitettävä tämä jatkuvasti - kaikki, jotta voit ohjata käyttäjät toiselle verkkosivustolle ja sen luomista haitoista.

Paras ratkaisu on herkkä muotoilu

Joten jos eri sivustojen ylläpitäminen eri laitteille ei ole vastaus, mikä on? Reagoiva verkkosivujen suunnittelu.

Reagoiva suunnittelu tarkoittaa, että CSS-mediakyselyjen avulla määritetään tyylit eri levyisille laitteille. Reagoivan suunnittelun avulla voit luoda yhden verkkosivun sekä mobiilikäyttäjille että muille käyttäjille. Sitten sinun ei tarvitse huolehtia siitä, mitä sisältöä mobiilisivustolla näytetään, tai muista muistaa siirtää viimeisimmät muutokset mobiilisivustollesi. Lisäksi kun CSS on kirjoitettu, sinun ei tarvitse ladata mitään uutta.

Reagoiva suunnittelu ei välttämättä toimi täydellisesti erittäin vanhoissa laitteissa ja selaimissa (joista suurin osa on nykyään hyvin vähäistä eikä niiden pitäisi olla sinulle paljon huolta), mutta koska se on lisäaine (tyylien lisääminen sisältöön sen sijaan, että ottaisi sisällön pois) nämä lukijat voivat silti lukea verkkosivustoasi, se ei vain näytä ihanteelliselta vanhalla laitteellaan tai selain.

instagram story viewer