Seuraava artikkeli auttaa sinua: 10 erinomaista työkalua sivustosi testaamiseen mobiililaitteilla
Älypuhelimien jatkuvasti kasvavan myynnin ja kasvavan tablettimarkkinoiden alkaessa nousta pilviin sekä entistä paremman käyttömahdollisuuden myötä entistä vahvempiin mobiilidataverkkoihin, käyttäjämme pääsevät nyt Internetiin monilla uusilla tavoilla. Internetin selaamiseen käytetty valtava valikoima mobiililaitteita tarkoittaa nyt, että sinun on todella harkittava sivustosi mobiiliyhteensopivan tekemistä suunniteltaessa responsiivista verkkosivustoasi. Mutta miten teet sen?
Sivuston testaaminen mobiililaitteilla voi olla aikaa vievää ja kallista erilaisten mobiililaitteiden suuren määrän vuoksi. Älä pelkää, sillä käytettävissäsi on käteviä työkaluja, joiden avulla voit varmistaa, että verkkosivustosi näkyy oikein mobiiliverkossa. Tässä artikkelissa jaetaan ja käsitellään 10 tällaista työkalua.
1. iPhoney
Erinomainen ilmainen iPhone-testeri, iPhoney ei ole varsinainen emulaattori, mutta sen avulla kehittäjät voivat luoda 320x480px-sivustoja käytettäväksi iPhonessa. Sen avulla voit testata kuvia ja koodia pikselin täydellisessä Apple-Safari-pohjaisessa ympäristössä, jossa on kaikki normaalit ominaisuudet, mukaan lukien muotokuva- ja maisematilat, koko näyttö, zoomaus ja laajennukset.
2. W3C mobileOK Checker
Tämä tarkistus on verkkopohjainen automaattinen validointityökalu, joka tarkistaa, kuinka mobiililaiteystävällinen verkkosivustosi on. Testit verrataan W3C:n kehittämään W3C mobileOK Basic Tests -spesifikaatioon.
3. iPad Peek
Tämän kätevän verkkopohjaisen työkalun avulla voit nähdä, miltä verkkosivustosi näyttävät iPadilla renderöitynä. On suositeltavaa käyttää WebKit-pohjaista selainta, kuten Apple Safaria tai Google Chromea, jotta saat mahdollisimman tarkan simulaation – tai ainakin CSS3-yhteensopivaa selainta, joka tukee muunnosominaisuuksia (kuten Opera), koska se käyttää niitä renderöi sivu muotokuvatilassa.
4. Muokkaa otsikkolisäosaa Firefoxille
Firefoxissa on lisäosia, jotka voivat muokata palvelimille lähetettyjä tietoja saadakseen vaikutelman siltä, että käyttäjäagentti selaa mobiililaitetta, vaikka se ei olisikaan. Tätä varten tarvitset Modify Headers -nimisen lisäosan (Firefoxille). Kun olet ladannut ja asentanut tämän lisäosan, uudet vaihtoehdot, Työkalut > Oletuskäyttäjäagentti ja Työkalut > Muokkaa otsikoita, pitäisi ilmestyä selaimeesi.
Mobiililaitteen selaamisen emulointia varten sinun on löydettävä mobiililaitteesi User Agent Profile (UAProf) -arvo, joka löytyy Googlesta pikahaulla “käyttäjäagentti” ja puhelimesi malli (esim. Google-tulokset haulle “user agent ipad”). Vaihtoehtoisesti voit tutustua tähän UAProf-arvojen luetteloon.
Kun olet löytänyt haluamasi puhelimen UA-profiilin arvon, kirjoita se Muokkaa otsikkoa -valintaikkunaan ja bingossa näet, millaista on selata kyseisellä laitteella. Google Chromessa voit kokeilla User-Agent Switcher -laajennusta. Jos haluat käyttää selaimesta riippumatonta työpöytäsovellusta, joka toimii käytännössä kaikissa Internet-yhteensopivissa sovelluksissa, kokeile Fiddler Web Debuggeria, jonka avulla voit muun muassa muokata HTTP-pyyntöjä.
5. Adobe Device Central CS5
Osana uusinta Adobe Creative Suitea Device Central emuloi mobiililaitteiden toimintaa työpöydälläsi, jolloin voit testata HTML:ää ja Flashia mukavasti työpöydältäsi. Avaa sivu tai sivusto valitsemalla Laiteprofiilit > Selaa laitteita, napsauttamalla hiiren kakkospainikkeella ja valitsemalla . Nyt kun olet lisännyt laitteen, siirry kohtaan Tiedosto > Avaa (paikallinen testaus) tai Tiedosto > Avaa URL (etätestausta varten).
Vaikka olet kaukana ilmaiseksi, jos olet ammattimainen suunnittelija tai kehittäjä, sinulla on hyvät mahdollisuudet päästä käsiksi Adoben luovaan sovellussarjaan.
6. Google Mobilizer
Google Mobilizer on yksinkertainen verkkotyökalu, jonka avulla voit syöttää verkkosivun osoitteen ja tehdä sivusta mobiiliverkkoystävällisen leikkaamalla sen sisällön olennaiseen. Tämä on erinomainen työkalu nähdäksesi, missä voit optimoida sivustosi suorituskykyä.
7. Gomez
Gomezin mobiilivalmiustesti antaa sinulle arvosanan 1–5, joka perustuu yli 30 todistetun mobiiliverkkokehitystekniikan analyysiin, aina tyylisivujen käytöstä (esim. mediakyselyt) välimuistitekniikoihin ja standardien mukaiseen koodiin. Tulokset näkyvät helposti ymmärrettävässä asiakirjassa, joka tarjoaa neuvoja sivustosi parantamiseen.
Valitettavasti voidaksesi testata sivustoasi, sinun on syötettävä joukko tietoja, kuten sähköpostiosoitteesi, maasi, postinumerosi ja puhelinnumerosi.
8. MobiReady
Samaan tapaan kuin Gomez, MobiReady on toinen online-testaussivusto, jonka avulla voit syöttää URL-osoitteen, jotta se voi suorittaa joukon arviointeja, mukaan lukien verkkosivun sivutesti, merkintätesti ja sivustotesti. Tämä on hieman yksityiskohtaisempi versio yllä olevasta Gomezista ja tarjoaa kattavan testitulossivun, joka sisältää dotMobi-yhteensopivuuden, W3C mobileOk -testit, laiteemulaattorit, yksityiskohtaiset virheraportit, HTTP-testit ja koodintarkistuksen. Tulokset eivät kuitenkaan ole yhtä ytimekkäitä kuin Gomezin tulokset, mikä on haitta, kun tiedot esitetään teknisesti vähemmän taitaville asiakkaille/työnantajille.
9. DotMobi-emulaattori
DotMobi-emulaattori antaa sinulle live-esikatselun sivustostasi (rehellisesti sanottuna melko pienestä) eri matkapuhelimista. Tämä mobiilitestaustyökalu on loistava, jos haluat testata sivuasi vanhemmilla mobiililaitteilla. Mikä voi ärsyttää tämän työkalun mahdollisia käyttäjiä, on se, että se vaatii Java-selainlaajennuksen toimiakseen.
10. Opera Mini Simulator
Yli 120 miljoonaa myytyä älypuhelinta, joissa Opera on esiasennettu[1] ja versio, joka on saatavilla melkein kaikille käyttöjärjestelmille. Hyvä käytäntö on sisällyttää testaustyönkulkuun varmistaa, että sivustosi toimii Opera Minissä (Opera-verkkoselaimen mobiiliversio). Onneksi Opera on velvoittanut meidät tarjoamalla ilmaisen verkkopohjaisen emulaattorin web-suunnittelun testaamiseen ja arvioimiseen Opera Miniä käyttävällä mobiililaitteella. Tämä työkalu vaatii Java-selainlaajennuksen toimiakseen.
Koska useilla toimialoilla suurin osa liikenteestä tulee mobiililaitteista pöytätietokoneiden sijaan, sinulla on oltava mobiiliystävällinen sivusto. Ajattele esimerkiksi yliopistokampusta. Suurimmalla osalla, ellei kaikilla opiskelijoilla on matkapuhelin, ja he vierailevat kampuksen verkkosivustolla tällä puhelimella luultavasti paljon aikaa.
Tämä on avain pitää mielessä, kun suunnittelet korkeakoulun verkkosivustoa. Jos se ei ole mobiiliystävällinen, se jättää huonon käyttökokemuksen.
Lue lisää
- Mobiiliverkkosuunnittelu: parhaat käytännöt: Tässä artikkelissa on luettelo 20 matkapuhelinemulaattorista.
- Web-sovellusten suunnittelu iPadille: Vinkkejä ja suunnittelunäkökohtia, kun suunnittelet iPad-sivustoa.
- 10 iPhone-sovellusta, joista jokaisen verkkosuunnittelijan tulisi tietää: Tämä on kokoelma mobiilisovelluksia suunnittelijoille.
- iPhone SDK:n käytön aloittaminen: Haluatko oppia iPhone-sovellusten luomisesta? Lue tämä esittelyopas.
Viitteet
- Opera: Mobile Web -raportti. www.opera.com
