Eri näytön resoluutiot. Parhaat työkalut reagoivien asettelujen testaamiseen

Olen kohdannut tarpeen tarkastella sivustoa eri näytön tarkkuudella. Älypuhelimien kehityksen ja monien eri näyttökokojen myötä on hyödyllistä nähdä, miltä sivustosi näyttää tietyllä laitteella. Tämän ongelman ratkaisemiseksi on useita vaihtoehtoja. Jos haluat tarkastella sivustoa tietokoneella pienemmällä resoluutiolla kuin näyttösi, siirry näyttöasetuksiin ja valitse haluamasi arvo.

Toinen vaihtoehto on käyttää selainlaajennuksia, kuten Web Developer for Firefox, joka on olemassa myös Google Chromelle. Muuta kokoa -vaihtoehdon avulla voit muuttaa selaimen kokoa haluamaasi kokoon.

Nämä menetelmät ovat yksinkertaisimpia, mutta nyt ne eivät enää riitä - et voi tarkastella sivustoa suuremmilla näytön resoluutioilla tai nähdä, miltä se näyttää matkapuhelimella. Muistan, että äskettäin harkitsin projektia, jonka avulla voit testata sivustoja kaikilla selaimilla. Se on erittäin hyödyllinen selaimien välisen asettelun tarkistamiseen eri käyttöjärjestelmissä ja selaimissa, mutta siellä ei ollut niin paljon näytön resoluutioita. Lisäksi sinun on rekisteröidyttävä käyttääksesi sitä. Tänään harkitsen muutamaa yksinkertaisempaa ja edullisempaa palvelua sivuston nopeaan katselemiseen eri näyttötarkkuuksilla.

Palvelut sivuston katseluun eri näyttötarkkuuksilla

Joissakin projekteissa voit muuttaa vain näytön resoluutiota, kun taas toisissa on lisäominaisuuksia. En käsittele niitä yksityiskohtaisesti, mainitsen ne vain katsauksessa, ehkä niistä on sinulle hyötyä.

Muuten, pari mielenkiintoista yksinkertaista palvelua on piilotettu quirktools.com-verkkotunnuksen alle:

Smaps - sivustokarttojen tai vain hierarkkisen mallin luominen.
Wires on hieno asia, jonka avulla voit luoda verkkosivujen asetteluja käyttämällä erilaisia toiminnallisia lohkoja (teksti, välilehdet, lomakkeet, painikkeet jne.)

Yksinkertaisin palvelu eri näyttötarkkuuksien katseluun. Siellä on myös luettelo suosituimmista laitteista, joista sinun on valittava omasi.

Erittäin hieno suunnittelu projektista.

Tämä palvelu on samanlainen kuin CrossBrowserTesting, koska sen avulla voit lisäksi arvioida sivustoasi eri selaimissa ja käyttöjärjestelmissä. Lisäksi se vaatii rekisteröinnin ja siinä on maksullisia ominaisuuksia. Vaikka tämä ei ole välttämätöntä eri näyttötarkkuuksien tarkastelemiseksi, siirry Responsiivinen-valikkokohtaan.

Suunnittelun ja toiminnallisuuden suhteen kaikki on erittäin siistiä, mikä on vain sen arvoista, että älypuhelimet voivat valita muotokuva- ja maisemakatseluvaihtoehtojen välillä. Kyllä, muissa palveluissa on Rotate-toiminto, mutta näet, kaikki näyttää paljon kirkkaammalta tällä tavalla. Muuten, jos ymmärrän oikein, voit rekisteröitymisen jälkeen käyttää interaktiivista live-testausvaihtoehtoa reaaliajassa.

Palvelu minimalismin hengessä. Siellä on kenttä sivuston nimen syöttämistä varten + mahdollisuus valita näyttökoot katselua varten.

Toinen hyvin yksinkertainen projekti. Sivuston osoitteen ja kokojen lisäksi suosituimmat näytön resoluutiot on esitetty avuksesi.

Jos katsot tarkasti kuvan alaosaa, voit nähdä, että InfoByIp-palvelu näyttää alemman vierityspalkin resoluutiolla 1024x768. Jos muutat näytön resoluutiota manuaalisesti, näet, että siellä ei ole vierityspalkkia. Tällaiset epätarkkuudet joissakin palveluissa ovat hieman masentavia, mutta et mittaa näytettävän tuloksen luotettavuutta viivaimella. Siksi suosittelen sinua tarkastelemaan sivustoa eri näyttötarkkuuksilla käyttämällä pari eri palvelua varmuuden vuoksi.

Hyvää päivää kaikille, rakkaat ystäväni ja blogini vieraat. Muistan, että vain kolme vuotta sitten en ollut koskaan kuullut sellaisesta konseptista kuin mukautuva asettelu tai mobiiliversio. Mutta nykyään ilman sitä mikä tahansa sivusto näyttää jo huonommilta. Kuvittele, että menet sivustolle matkapuhelimellasi, ja se on siellä täysikokoisena ja pienellä kirjaimilla.

Eli sinun on jatkuvasti zoomattava, vieritettävä, mikä on hirveän hankalaa. Ja mobiiliversio tai mukautuva asettelu poistaa kaikki nämä ongelmat. Muistan jopa, että kun laitoin responsiivisen mallin ensimmäiseen projektiini, kiinnostuin siitä, miltä sivusto näyttää eri laitteilla. Tätä varten käytin yhtä ihanaa palvelua. Ja tänään kerron sinulle siitä.

Mutta yleensä, itse asiassa tätä asiaa tarvitaan myös, jotta voit tarkastella resurssi asettelua ja nähdä kaikki jambit. Koska tavallisessa ja mobiiliversiossa kaikki voi olla hyvin, mutta tableteilla kaikki voi olla perseestä. Siksi tällaisia tarkistuksia tulee käyttää myös resurssia luotaessa.

En käyttänyt sitä kerralla, ja sitten kävi ilmi, että näytössä on jambeja eri laitteissa. Nyt minun on käännyttävä muiden ladottavien puoleen saadakseni apua.

Quirktools.com

Todennäköisesti suosituin palvelu, josta näet kuinka sivusto toimii, on quirktools.com. Siirry siihen ja näet yksinkertaisen palvelun intuitiivisella käyttöliittymällä. Varmista vain, että olet Screenfly-välilehdessä.

Kirjoita nyt sivustosi osoite erityiselle riville, jonka jälkeen näet resurssi normaalitilassa. No sitten se hauskuus alkaa. Yläosassa on useita kuvakkeita, jotka edustavat eri laitteita: tietokoneita, tabletteja, televisioita, puhelimia. Napsauttamalla mitä tahansa kuvaketta avautuu pudotusvalikko, jossa on tiettyjä resoluutioita ja malleja, jotka vastaavat sitä.

Haluan esimerkiksi nähdä, miltä aivolapseni näyttää Samsung Galaxy S3 -puhelimessa, jonka resoluutio on 360*440. Siirryn puhelinkuvakkeeseen ja valitsen haluamasi resoluution. Muuten, tässä Galaxy S -linja on otettu vakiona, joten valitsin mallini.

Ja nyt kaikki on säädetty hyvin. Ja tietenkään sinun ei pitäisi rajoittua yhteen resoluutioon. Tarkastetaan kaikkialla, missä voimme. Ja muuten, valikossa on toinen mielenkiintoinen painike - Kierrä. Hänen ansiosta voimme tietää, miltä sivustomme näyttää, jos näyttöä käännetään 90 astetta.

ami.responsivedesign.is

Toinen vahvistuspalvelu, josta pidin todella - http://ami.responsivedesign.is/. Siirry sivustolle ja kirjoita etsimäsi resurssin osoite erityiseen kenttään ja napsauta sitten MENNÄ. Tämän seurauksena näet jopa neljä erilaista näyttöä neljälle laitteelle.

Huomionarvoista tässä palvelussa on, että suosittuja laiteresoluutioita on vain neljä, mutta ne kaikki näytetään samanaikaisesti, joten näet kokonaiskuvan. Se on hienoa, eikö?

deviceponsive.com

deviceponsive.com on hyvin samanlainen kuin yllä kuvattu, mutta siellä on kaksi kertaa enemmän erilaisia näyttövaihtoehtoja. Mene siis hiljaa sivustolle, kirjoita omasi riville ja selaa sitten näkymää sisältäviä sivuja.

Tämän palvelun, kuten edellisen, etuna on, että et vain katso näyttöä, vaan voit myös jäljitellä näiden laitteiden työtä, esimerkiksi vierittää, napsauttaa jne.

Mobiili/responsiivinen web-suunnittelun testaaja

Ja tietysti, en voi olla mainitsematta joitakin selainlaajennuksia. Itse asiassa monissa tapauksissa sen kanssa on paljon mukavampaa työskennellä kuin minkään palvelun kanssa.

Meidän tarkoituksiamme varten suosittelen, että asennat Google Chromeen laajennuksen nimeltä Mobiili/responsiivinen Web Design Tester. Asennuksen jälkeen näet yläreunassa vastaavan kuvakkeen, jota napsauttamalla voit valita minkä tahansa käytettävissä olevista resoluutioista (matkapuhelinten ja tablettien suosituimmat mallit) sekä asettaa oman osion alareunassa. "Muokattu käyttäjäagentti/resoluutio".

Muuten, kaikesta edellä kuvailemastani, tämä menetelmä on ainoa, joka näyttää mukautuvan asettelun lisäksi myös erilliset mobiiliversiot (vk.com), joten muista.

Työskentely ikkunan kanssa

Ja tietysti, en voi olla mainitsematta sekin klassisin versio. Nähdäksesi, kuinka sivusto näyttää eri resoluutioilla, sinun on vain avattava se ikkunatilassa, ei koko näytössä, minkä jälkeen tätä ikkunaa pienennetään vähitellen.

Pienentämällä tätä ikkunaa resurssimme sisältö mukautuu tämän ikkunan kokoon. Se on niin yksinkertaista.

Mutta tietysti näillä menetelmillä on huonot puolensa. Ne eivät näytä, miltä sivustot näyttävät, joilla on erillinen mobiiliversio eikä responsiivinen. Esimerkiksi vk.com ja ok.ru. Kun siirrymme heille laitteelta, siirrymme m.vk.com- ja m.ok.ru-mobiiliversioihin.

Ja tässä tapahtuu pääkiista. Ainoa asia, joka näyttää tällaiset sivustot, on yllä kuvailemani selainlaajennus. Täällä kaikki toimii hyvin. Muuten, jos sinulla on jokin suosikkitavoistasi, katson niitä mielelläni. Joten kirjoita kommentteihin).

Ystävällisin terveisin Dmitri Kostin.

Lopeta selainikkunan koon muuttaminen, lopeta sen raiskaaminen! Lyön vetoa, että olet kuullut tämän useammin kuin kerran. Okei, ehkä et ole kuullut. Mutta jos olet ammattimainen responsiivinen verkkokehittäjä, tiedät mitä tarkoitan: mitä tahansa DOM-muutosta tai CSS-muokkausta, ja alat vetää selaimen reunaa edestakaisin, testata muutoksia ja nähdä, onko jokin rikki.

Liikkeiden tarkoitus on simuloida eri laitteiden näyttöjä.

Yritysympäristössä sinulla on usein paljon yrityksen toimittamia gadgeteja testattavaksi. Työssäni minulla on käytössäni iPad, iPod, muut tabletit, kannettavat tietokoneet ja pöytätietokoneiden näytöt. Jos sinulla ei ole sitä ylellisyyttä, sinun on käytettävä sitä, mikä on käsillä.

Onneksi on olemassa vaikuttava valikoima online-työkaluja, jotka simuloivat erikokoisia laitteita. Tietenkin jokaisella niistä on omat etunsa ja haittansa, harkitsemme useita tällaisia työkaluja.

Testaustarkoituksiin valitsin PyjamasOnYourFeet.com-sivuston, todella responsiivisen sivuston, joka perustuu EGrapplerin maksutta tarjoamaan HTML5-malliin.

Olenko reagoiva?

Am I Responsive, erittäin yksinkertainen työkalu, jonka avulla voit tarkastella sivustoasi nopeasti neljällä laitteella. Kaikki ne ovat IOS-järjestelmiä, ja kehittäjä selittää tämän sivuston ominaisuudella. Yleensä ei asetuksia, ei valinnanvaraa, mutta hyvin yksinkertainen ja selkeä.

Saatavilla olevat koot:

pöytätietokoneen näyttö - 1600 x 992px;
kannettava tietokone - 1280 x 802 px;
tabletti - 768 x 1024 pikseliä;
matkapuhelin - 320 x 480 pikseliä.

Lainaan kehittäjää: "Tämä ei ole testaustyökalu, on erittäin tärkeää testata oikeilla laitteilla. Ja tämä työkalu auttaa sinua ottamaan nopeasti kuvakaappauksen ja näyttämään asiakkaalle, mitä tarkoitat."

Siinä on kaksi mukavaa ominaisuutta: mahdollisuus vetää laitteita ympäri näyttöä ja mahdollisuus jakaa linkki testisivustolle.

laitepositiivinen

deviceponsive on hyvin samanlainen kuin Am I Responsive, sillä se on yhtä yksinkertainen, ja siinä on vain vähän asetuksia ja vaihtoehtoja. Kaikki käytettävissä olevat laitteet näkyvät kerralla yhdellä pitkällä sivulla. Kaikista käytettävissä olevista vaihtoehdoista tämä on mahdollisuus muokata otsikon taustaa ja lisätä siihen logosi, mikä on hyödyllistä, kun päätät jakaa kuvakaappauksen.

Laitteet ja käytettävissä olevat näytön resoluutiot.

Macbook - 1280x800
iPad muotokuva - 768 x 1024
iPad muotokuva - 1024 x 768
Kindle muotokuva - 600 x 1024
Kindle Landscape - 1024 x 600
iPhone muotokuva - 320 x 480
iPhone vaakasuunta - 480 x 320
Galaxy muotokuva - 240 x 320
Galaxy-maisema - 320 x 240

Kuten useimmat samankaltaiset työkalut, vierityspalkit näytetään, joita ei olisi oikeissa laitteissa. Tämä on pakotettu vaihe vierityksen mahdollistamiseksi laitteissa, joissa ei ole kosketusta.

reagoiva testi

Kuten laiteponsiivinen, responsiivinen testi näyttää sivustosi eri laitteilla. Mutta sen sijaan, että näytät kaikki kerralla, valitset tarvitsemasi laitteen sivun ylävalikosta. Muuten, skaalaus toimii täällä oikein, joten voit testata suurempaa resoluutiota pienemmällä.

Sivustolla on saatavilla 30 eri resoluutiota, aina valtavasta pöytätietokoneen näytöstä niin sanottuun "hulluksi androidiksi" (rehellisyyden nimissä, siellä on myös tavallinen Android).

Mitä tulee Firefox-selaimeen, se ei toimi oikein tämän sivuston kanssa. Huomaa, että kuvakaappauksessa ei näy liukusäädintä vihreän otsikon ja valkoisen taustan sisältöalueen välillä.

reagoiva.is

Hyvin samankaltainen kuin kaksi edellistä työkalua, mutta yksi asia tekee responsive.ista erilaisen kuin muut. Tämä on sujuva animaatio siirryttäessä laitteelta toiselle, sekä puoliksi läpinäkyvä alue, joka näyttää sivuston todellisen alueen, joka ei kuulu katselualueelle.

Käytettävissä olevat laitevaihtoehdot ovat automaattinen (tapa, jolla näet sivuston), pöytäkone, tabletti vaaka- ja pystyasennossa, älypuhelin pysty- ja vaakakuvassa. Valitettavasti et voi asettaa mielivaltaisia kokoja px.

Näytöskyselyt

Mutta mahdollisuudet ja käytettävissä olevat vaihtoehdot erottavat näyttökyselyt aiemmista palveluista. Tässä on 14 puhelinta ja 12 tablettia, joissa on erillinen mahdollisuus vaihtaa pysty- ja vaakatilan välillä. Tulokset näytetään ruudukossa, jossa on viivoja. On myös mahdollista asettaa mielivaltainen resoluutio vetämällä oikeaa tai alareunaa.

Tämän sivuston mielenkiintoinen ominaisuus on, että useille laitteille on olemassa Trueview-vaihtoehto, joka näyttää sivustosi laitteen alkuperäisessä selaimessa.

Valitettavasti Firefox ei myöskään voinut näyttää liukusäädintä tässä. Ei tarvitse syyttää minua, Firefox on suosikkiselaimeni, mutta niin asiat ovat.

Screenfly

Screenfly on ehkä toimivin kaikista. Saatavilla on 9 enemmän kuin tablettilaitteita - 10" kannettavista, jopa 24" näyttöjä, 5 tablettia, 9 puhelinta, 3 television resoluutiota sekä mukautettuja resoluutioita. Lisää tähän erillinen kytkin pysty- ja vaakatilaa varten sekä mahdollisuus näyttää vieritys. Voit myös jakaa linkin testiin yhdellä painikkeella.

Jokaisen laitteen näytön koko on valikossa px, ja selainikkunasi todellinen koko näkyy oikeassa yläkulmassa.

Kaikki nämä edut antavat sinun vaatia johtajuutta, jos se ei olisi yhden, mutta (kehittäjälainaus): "Screenfly voi käyttää välityspalvelinta matkimaan laitteita selatessaan sivustoasi. Välityspalvelin jäljittelee käyttäjäagenttimerkkijonoa, mutta ei näiden laitteiden toimintaa." Screenfly on luettelon ainoa palvelu, joka sallii testauksen käyttäjäagenttimerkkijonon perusteella.

Käytätkö näitä työkaluja työssäsi? Jaa responsiivisten verkkosivustojen kehittämisen salaisuutesi kommenteissa.

P.S. Käännösvirheitä, ilmoita henkilökohtaisesti.

Yhä useammat laitteet ovat kuluttajien saatavilla, ihmiset käyttävät Internetiä useammin tableteista ja älypuhelimista. Hakukoneet kiinnittävät huomiota sivustoihin, jotka ovat "ystäviä" eri näytön resoluutioilla, eivätkä vain työpöydän kanssa. Responsiivinen muotoilu on muotoilu, joka näkyy oikein kaikilla laitteilla.

Lokakuussa 2016 Google ilmoitti muutoksista hakutuloksiin. Aikaisemmin responsiiviset sivustot merkittiin hakutuloksissa erillisellä kuvakkeella mobiiliystävällisiksi. Lähikuukausina alkaa mobiilihakutulosten (älypuhelimet, tabletit) ja pöytätietokoneiden (tietokoneista ja kannettavista) erottelu. Siksi, jos merkittävä osa yleisöstäsi käyttää mobiililaitteita, saatat menettää osan hakuliikenteestä, jos sivuston ulkoasua ei ole mukautettu älypuhelimille ja tableteille.

Miksi tarkistaa, miltä sivusto näyttää mobiililaitteilla?

Vuonna 2015 TNS Web Index teki johdantotutkimuksen. Tutkimme 60 000 venäläistä 12–64-vuotiaille ja havaitsimme, että 64 % Internetin käyttäjistä käyttää myös mobiililaitteita. 15 % näistä ihmisistä tulee toimeen ilman tietokoneita. Ja tässä on Yandex-tiedot.

Haetuin tieto ja sisältö: kirjat, musiikki, pelit jne. Siksi on toivottavaa, että tieto- ja viihdesivustoilla on mukautuva muotoilu. Ja kaupallinen, jos tarjoat "polttavia" palveluita: hinausauton tai lukkosepän kutsuminen, lukkojen hätäavaaminen, pizzan tai sushien toimitus.

Jaetun verkkosivuston isännöinti suosituille sisällönhallintajärjestelmille:

Sopeutumiskyky ei ole tarpeeton millekään resurssille, koska mobiiliyleisö kasvaa, laskua ei ole odotettavissa. Saman tutkimuksen mukaan osa käyttäjistä tulee jo toimeen ilman pöytäkoneita.. Ja hakurobotit aliarvioivat "ei-kumia" olevat sivustot hakutuloksissa. Poikkeus: resurssit, joiden osuus mobiililiikenteestä on pieni.

On muitakin tapoja miellyttää eri laitteiden käyttäjiä, esimerkiksi luomalla sivustosta mobiiliversio. Tämä on kätevä vierailijoille, koska sivusto ei ole ylikuormitettu tarpeettomalla grafiikalla ja sisällöllä. Jos verkkovastaava tekee merkittäviä muutoksia koodiin, se ei vaikuta pääsivustoon. Mutta on myös merkittäviä huonoja puolia.

Toisen sivuston ulkoasu on paljon kalliimpaa kuin vanhan mallin mukauttaminen.
Erilaiset mobiili- ja vakioresurssiosoitteet jakavat liikenteen kahteen virtaan.
Kahden hankkeen tukeminen vie enemmän aikaa ja rahaa.

Mobiiliversion tekeminen kannattaa, kun suurin osa liikenteestä tulee puhelimista ja tableteista: jos olet sosiaalinen verkosto tai viihdeportaali. Muissa tapauksissa - mukautuva suunnittelu.

Kuinka tarkistaa, miltä sivusto näyttää tabletilla tai älypuhelimella?

Verkkopalveluiden Yandex.Webmaster ja Google työkalupakki sisältää erityisiä apuohjelmia, jotka analysoivat sivuston ja osoittavat, mistä etsiä ongelmia.

Voit nähdä omin silmin, miltä sivusto näyttää mobiililaitteiden omistajille kaikissa suosituissa selaimissa. Firefoxissa katselua kutsutaan näppäinyhdistelmällä Ctrl+Shift+M.

Näytä Google Chromessa painamalla F12. Venytämme ikkunaa hiirellä tai asetamme haluamasi resoluution numeroilla.

Jos etsit isännöintiä tietylle sisällönhallintajärjestelmälle, katso sivumme.

Verkkopalvelut, joilla voit tarkistaa, miltä sivusto näyttää eri resoluutioilla.

Voit tarkistaa, miltä sivusto näyttää käyttäjän eri näyttötarkkuuksilla verkkopalveluiden avulla.

Mobiili - 320x480px;
Tabletti - 768x1024px;
Kannettava tietokone - 1280x802px;
PC - 1600x992px.

Ensimmäiseen palveluun verrattuna toimivuus on parempi. Näyttää luvat:

10 matkapuhelinta;
9 tablettia;
sama määrä tietokoneita ja kannettavia tietokoneita;
Jos haluttu vaihtoehto ei ole käytettävissä, aseta parametrit näppäimistöltä.

Muista katsoa matkapuhelimella eri Android-versioilla.

Tällaiset palvelut ovat vain jäljitelmä. Sattuu, että niissä ei ole suunnitteluongelmia, mutta asettelu kelluu Android-laitteessa. Fonttimittarit, painikkeiden koot, joidenkin css\html-tunnisteiden näyttö ovat eri käyttöjärjestelmille ja selaimille ominaisia.

On välttämätöntä tarkastella, miltä sivusto näyttää oikeilla laitteilla ja onko niillä mahdollista suorittaa kohdistettuja toimia. Sattuu niin, että sivusto näyttää hyvältä, mutta tilauslomake ei toimi.

Mutta tarvittavat työkalut eivät ole aina käsillä - kaikille ei anneta iPadia, iPhonea ja paria Android-laitetta töissä. Kaikkia mahdollisia vaihtoehtoja ei tarvitse etsiä, mutta on parempi tarkistaa ainakin niillä laitteilla, joista käyt useammin.

Jos sellaisia ei ole, kysy ystävältäsi tarvitsemasi malli tai testaa sitä lähimmässä myymälässä. Muuten voit menettää suuren osan liikenteestäsi. Saamme tietoja sivuston yleisöstä, suosituimmista käyttöoikeuksista ja käyttöjärjestelmistä samoilla Yandex.metricsilla.

Mobiiliselaimen käyttönopeus kasvaa päivittäin. Tilastojen mukaan noin 32 % Internet-liikenteestä tulee matkapuhelimista ja tablet-tietokoneista. Tämä tarkoittaa myös sitä, että kuluttajien odotukset mobiilisivustoja kohtaan kasvavat.

Artikkelissa navigointi:

Sivuston testaus ennen julkaisua on olennainen askel, koska kuluttajien käytettävissä on valtava valikoima mobiililaitteita. Ja edes sellaisen joustavan menetelmän käyttö, joka ei poista tätä tarvetta. Mobiililaitteet korvaavat vähitellen pöytätietokoneet – katso alla oleva kaavio, näetkö kuinka paljon mobiililiikenne on kasvanut viimeisen 2 vuoden aikana?

Mobiilisivustojen tarkistamiseen on useita eri tapoja. Alla on lueteltu viisi päätestausmenetelmää tehokkaimmasta vähiten suositeltuun.

1. Testaus oikeilla mobiililaitteilla

On parasta testata sivustoa oikeilla laitteilla, koska monia vuorovaikutuksen vivahteita ei voida jäljitellä. Käyttäjäkokemukseen (UX) vaikuttavat useat tekijät: ajoittainen verkkoyhteys, pikselitiheys, sivun aktiivisten elementtien suhteellinen koko ja sivun todellinen latausaika. Ihannetapauksessa sivusto tulisi tarkistaa kaikilla mobiililaitteilla.

Täysi testaus on luonnollisesti käytännössä mahdotonta, koska se vaatii paljon aikaa ja resursseja. Paras ratkaisu olisi ostaa useita mobiililaitteita ns. testisarjaan, mikä on erityisen tärkeää asiakaslähtöisessä liiketoiminnassa. Testisarja koostuu yleensä suosituimmista verkkoselailuun käytetyistä laitteista. Tämän lähestymistavan avulla voit suorittaa fyysisiä testejä todellisissa olosuhteissa ja tarkastella sivustoa käyttäjän silmin. Jos matkapuhelimien ostaminen testipakkaukseen ei kuulu projektin budjettiin, käytä omaa älypuhelintasi. Todennäköisesti älypuhelimesi toimii iOS:ssä, mikä antaa ainakin käsityksen siitä, kuinka useimmat käyttäjät näkevät analysoidun sivuston. Ole kiinnostunut sukulaisten, työtovereiden ja ystävien mobiililaitteista, jotta voit tarkistaa sivuston muilla laitteilla.

2. iOS-simulaattorin ja Android-emulaattorin käyttäminen

Varsinaista laitteistoa ei voi vaihtaa, mutta paremman puuttuessa ohjelmistoemulaattorit käyvät. iOS- ja Android-emulaattorit on suunniteltu ensisijaisesti natiivisovellusten testaamiseen. Ne tarjoavat kuitenkin oletusselaimia mobiililaitteille, jotka toistavat sivuston tarkasti sellaisena kuin se näyttää oikealla laitteella. Korostamme lausetta melko tarkasti, koska emulaattorit eivät ota huomioon verkkoyhteyden tilaa, sivun latausnopeutta, aktiivisten elementtien suhteellisia kokoja ja muita vivahteita, jotka voidaan havaita vain todellisissa olosuhteissa. Visualisointityökalut vastaavat kuitenkin toiminnallisesti oikeita laitteita ja tekevät hyvää työtä selainten välisen yhteensopivuuden tarkistamisessa.

Xcode IDE:ssä toimitettu iOS-simulaattori simuloi, miltä sivusto näyttää iPhonella ja iPadilla

iOS-simulaattori on osa Xcode IDE:tä. Asenna ensin Xcode App Store -alustalta. Siirry Xcode-valikkoon ja valitse Xcode > Open Developer Tool > iOS Simulator. Valitettavasti työkalu on yhteensopiva vain Mac OS:n kanssa, joten Windows- tai Linux-käyttäjien on etsittävä muualta.

Android-emulaattorin mukana tulee Android SDK -sovelluskehitysympäristö. Yksityiskohtaiset tiedot Android-emulaattorista löytyy.

3. Selaimen testaus

Jos et pysty rakentamaan testipakettia tai käsittelemään iOS- ja Android-ohjelmistoemulaattoreita, voit käyttää muita menetelmiä.

BrowserStack-verkkopalvelu simuloi kiinteitä ja mobiililaitteita testaussivustoille, se on kätevä verkkotyökalu sivustojen testaamiseen eri laitteilla ja eri selaimilla.

4. Service Responsinator

Sivustojen testauksen tulisi tapahtua oikeilla mobiililaitteilla tai käyttämällä korkealaatuisia emulaattoreita. Jos näitä menetelmiä ei jostain syystä voida toteuttaa, verkkovastaavalla on valtava määrä muita vaihtoehtoja, koska testaus tiivistyy lähinnä selainikkunan koon muuttamiseen. Tämän ongelman ratkaisemiseksi on kehitetty monia älykkäitä työkaluja, mutta Responsinaattoria pidetään tehokkaimpana.

Responsinator muuttaa sivuston kokoa annettujen parametrien mukaan. Työkalu on hyödyllinen responsiivisen suunnittelun toiminnan nopeaan testaamiseen, mutta se ei kuitenkaan korvaa testausta oikeilla laitteilla.

Siirry sivustolle ja kirjoita analysoitavan sivuston URL-osoite. Palvelu näyttää sivustosi sellaiselta kuin se näyttäisi suosituilla laitteilla eri näyttötarkkuuksilla. Työkalu voi olla hyödyllinen nopeassa pinnantarkastuksessa. Se ei kuitenkaan voi korvata täydellistä testausta oikeilla laitteilla ja edes ohjelmistoemulointia, koska työkalu toimii aktiivisen selaimen grafiikkamoottorilla. Toisin sanoen palvelu ei sisällä mobiiliselainmoottoreita sivustojen näyttämiseen. Itse asiassa tulos on täsmälleen sama kuin selainikkunan kokoa manuaalisesti muuttaessa.

5. Selainikkunan koon muuttaminen

Työskennellessään työpöytäsivustolla suunnittelijat ja kehittäjät testaavat usein reagoivien suunnitteluelementtien toimintaa vaihtamalla selainikkunan kokoa. Tämä toiminta on niin alkeellista, että kieli ei uskalla kutsua sitä "testaukseksi", mutta siitä ei ole järkeä kieltäytyä. Responsiiviseen suunnitteluun liittyvien koodinpätkien parissa työskenneltäessä nopea "vaihda-katso-vaihda takaisin" -tarkistus auttaa arvioimaan tehtyjä muutoksia. Tätä tekniikkaa ei kuitenkaan voi edes verrata muihin testausmenetelmiin: kokovirhe, erilaiset grafiikkamoottorit, verkon signaaliviiveen puute jne. Tällä menetelmällä on liian monia haittoja, jotta se voisi korvata muita testausvaihtoehtoja.

Miten teet testauksen?

Web-sivustojen kehittämiseen osallistuvien ihmisten on yleensä testattava, kuinka sivustojen asettelut näkyvät eri näyttötarkkuuksilla ja selaimilla. Sivuston näyttöä on vaikea seurata eri laitteilla, joilla on eri näytön resoluutio. Onneksi jotkin sivustot tarjoavat loistavan työkalun sivun asettelun tarkistamiseen eri näyttötarkkuuksilla.

Nämä sivustot näyttävät verkkosivun esikatselun kirjoittamalla sivuston URL-osoitteen. Jos haluat nähdä, miltä verkkosivusi näyttää eri näyttötarkkuuksilla, voit kokeilla näitä ilmaisia resursseja tarkistamalla helposti yhteensopivuus eri näyttökokojen kanssa.

Jotkut näistä sivustoista tarjoavat laajan valikoiman suosittuja pöytätietokoneiden, kannettavien, television, tablettien ja matkapuhelimien resoluutioita, kun taas toisilla voit syöttää resoluution manuaalisesti ja testata sivun asettelua tietyllä resoluutiolla.

Vaikka kaikki työkalut ovat yksinkertaisia ja helppokäyttöisiä, niillä jokaisella on omat etunsa toisiinsa nähden.

Ensimmäinen paikka voidaan ottaa pois - erittäin hyvä palvelu sivuston online-testaukseen eri resoluutioilla, jolla on selkeä ja mukava käyttöliittymä. Sivustolta löydät erilaisia näytön tarkkuusvaihtoehtoja, mukaan lukien pöytäkoneet, netbookit, kannettavat tietokoneet, tabletit, televisiot.

Laitteen nimen voi valita suoraan, jos et tiedä sen tarkkaa resoluutiota. Joten voit valita avattavasta luettelosta Kindlen, Googlen, Samsungin, Motorolan, Applen ja tarkistaa sivun asettelun vastaavassa resoluutiossa.

Lisäksi Screenfly antaa sinun asettaa mukautetun näytön koon pikseleinä ja antaa sinun käyttää sitä sivullasi. Näin voit helposti tarkistaa web-sivut melkein missä tahansa resoluutiossa.

Lisäksi voit kiertää näyttöä, ottaa web-sivun vierityksen käyttöön tai poistaa sen käytöstä tai käyttää välityspalvelinta web-sivun testaamiseen.

Toinen ilmainen online-resurssi, jossa voit helposti tarkistaa sivuston eri resoluutioilla. Sivustolta löydät hyvän valikoiman laitteita pöytäkoneista, kannettavasta tietokoneesta, tabletista älypuhelimeen. Lisäksi sen avulla voit syöttää resoluution manuaalisesti ja tarkistaa sivuasettelut.

Lisäksi on "selaimessa" -vaihtoehto, joka jättää tilaa selaimen reunuksille ja säätimille sekä esikatseluikkunan tehtäväpalkille.

Seuraavaksi on toinen ilmainen työkalu, jonka avulla voit testata sivustoasi eri resoluutioilla. On mahdollista valita ehdotetuista resoluutiovaihtoehdoista tai syöttää omat mitat sivustolle.

Tämä sivusto tarjoaa kaksi eri näyttövaihtoehtoa: ikkunat ja kehykset. Ikkunavaihtoehto toimii hyvin alhaisella näytön tarkkuudella, mutta jos valittu resoluutio on suurempi kuin näytön koko, voit tarkistaa kehykset-vaihtoehdon avulla sen yhteensopivuuden näytön koon kanssa.

havaitsee myös nykyisen näytön resoluution ja näyttää sen viitteeksi.

Toinen verkkotyökalu, jonka avulla voit testata erikokoisia verkkosivustojen sivuja. Sivusto toimii parhaiten Internet Explorerin kanssa ja näyttää web-sivut valitulla resoluutiolla. Lupaluettelo on kuitenkin hyvin rajallinen. Tämä tarkoittaa, että voit tarkistaa verkkosivut vain kahdeksalla resoluutiolla, mukaan lukien 800×600, 1024×768, 1280×960, 1440×900, 1600×1200, 1680×1050 ja 1920×1200.

Sillä ei ole niin paljon vaihtoehtoja kuin muilla vastaavilla verkkosivustoilla, mutta sitä kannattaa kokeilla.

Hyvää päivää kaikille, rakkaat ystäväni ja blogini vieraat. Muistan, että vain kolme vuotta sitten en ollut koskaan kuullut sellaisesta asiasta kuin mukautuva asettelu tai mobiili...

Sivuston katselu eri resoluutioilla on yksi verkkovastaavan tehtävistä, joka on tehnyt valintansa mukautuvan suunnittelun hyväksi.

Muutin vähän aikaa sitten blogini ulkoasua. Yksinkertaisesti - muutti mallia (Mistä ladata?). Tämä menettely on tehty jo useita kertoja. 5 kertaa varmasti.

Edellisen kerran syynä oli se, että päätin tarkistaa sivustoni latausnopeuden Google Speed Insight -palvelussa. Tämän toiminnon lisäksi oli myös mahdollisuus nähdä sivuston käytettävyys mobiililaitteita käyttäville vierailijoille.

Se, mitä näin, ei miellyttänyt minua.

En tietenkään löytänyt sieltä mitään uutta itselleni. Tiedän hyvin blogini heikkoudet. Tämä sai minut kuitenkin ajattelemaan. Jos muokkaan sivustoa erilaisiin resoluutioihin, en menetä niitä 5 % kävijöistä, jotka tulevat sivustolleni mobiililaitteilla päivittäin. Siksi, jos nämä 5 % olivat aiemmin negatiivisia minulle käyttäytymistekijöiden suhteen, nyt ne ovat minulle positiivisia.

Samana päivänä otin mallin, jonka näet nyt. Ja tällä hetkellä Yandex Metrican mukaan minulla on vain 5-10% aiemman mobiililaitteiden epäonnistumisen sijaan 50%. Mikä on mielestäni erittäin hyvä. Lisäksi huomasin liikenteen hieman lisääntyneen. Vaikea sanoa, oliko sopeutumiskykyä edistävällä kohteen muutoksella vaikutusta vai jollain muulla kohteen kanssa tehdyllä työllä, mutta haluan uskoa sen.

Oli miten oli, vain todella käyttäjäystävälliset sivustot voivat kilpailla täysin Internetissä ja saavuttaa arvokkaita paikkoja hakutuloksissa.

Niille, jotka eivät vielä tiedä miltä hänen sivustonsa näyttää eri resoluutioilla, Esitän pienen luettelon online-palveluista, joiden avulla voit tarkastella sivustoa eri laitteilla. Olen varma, että artikkelin alussa antamani WordPress-teemalinkki on jotain, jota tarvitset ehdottomasti sen nähtyäsi.

Sivuston tarkistaminen eri laitteilla

On monia verkkopalveluita, joista voit tarkistaa miltä sivusto näyttää erilaisilla mobiililaitteilla. Mutta pidin eniten kiinteästä ohjelmasta Opera Mobile Classic Emulator.

Opera Mobile Classic -emulaattori

Jossain foorumilla huomasin, että verkkopalvelut eivät aina anna tarkkaa näyttöä. Tästä syystä päätin asentaa tämän ohjelman tarkistaakseni sivuston eri laitteilla.

Sillä on melko yksinkertainen käyttöliittymä, joten sen toimivuutta ei yksinkertaisesti tarvitse kuvailla.

Liikkeiden tarkoitus on simuloida eri laitteiden näyttöjä.

Onneksi on olemassa vaikuttava valikoima online-työkaluja, jotka simuloivat erikokoisia laitteita. Tietenkin jokaisella niistä on omat etunsa ja haittansa, harkitsemme useita tällaisia työkaluja.

Testaustarkoituksiin valitsin PyjamasOnYourFeet.com-sivuston, todella responsiivisen sivuston, joka perustuu EGrapplerin maksutta tarjoamaan HTML5-malliin.