7 ilmaista työkalua testattavien vastasuuntausten testaamiseen
Jokainen sivusto on suunniteltava reagoivan lähestymistavan avulla. Jotta sinut pysyisi oikealla tiellä, testaamalla varhaisessa vaiheessa ja usein näillä reagoivilla testaustyökaluilla varmistat, että suunnittelusi näyttää oikealta kaikissa selaimissa ja kaikissa näkymän kooissa.
Jokainen moderni sivusto tarvitsee reagoiva muotoilu . Tämä vaatii enemmän työtä, mutta lopputulos on kannattava.
Itse asiassa suosittelen testata ideoita herkillä suunnittelutyökaluilla, jotta näet, miten sivustosi tarkastellaan jokaisessa vaiheessa. Voit etsiä käytettävyysongelmia eri näytöissä kooltaan yhdestä kätevästä työkalusta.
Ja nämä ilmaiset työkalut ovat suosituimpia testejä, koska ne ovat erittäin helppokäyttöisiä. Paras niistä tukee monia laitteiden kokoja, jotta saat hyvän tunnelman siitä, miten ulkoasun pitäisi näyttää älypuhelimilta työasemiin.
1. XRespond
XRespond app XRespond app kutsuu itseään "virtuaalilaitteeksi", ja sanoisin, että se on aika paikalla.
Tällä sivustolla voit esikatsella minkä tahansa verkkosivuston näkymää useilla eri laitteilla. Sivusto toimii pitkään horisontaalisessa tyylissä, jossa sinun on vieritettävä sivuttain nähdäksesi kaikki näytön muodot.
Jokaisen näytön yläpuolella oleva tarra kertoo tarkan koon ja laitteen, johon se vastaa. Plus-pudotusvalikosta on laaja valikoima älypuhelimia, tabletteja ja kannettavia tietokoneita erityisten laitteiden testaamiseen.
Tämä pudotus edes tukee mukautettua leveys / korkeusasetusta, jos haluat nähdä, miten sivustosi näkyy tietyissä näytöissä. Erinomainen testaustyökalu herkälle suunnittelulle ja se tukee runsaasti erilaisia laitetyyppejä.
2. Responsinator
Yksi samanlainen sovellus, jonka saat myös nauttia, on Responsinator .
Sen sijaan, että käytit vaakasuoraa vierityspalkkia, tämä sivusto näyttää jokaisen laitteen esikatselun pystysuorassa sarakkeessa. Näin voit vierittää alaspäin kunkin laitteen läpi ja esikatsella kustakin sivustosta.
Laitteisiin kuuluvat tavallisimmat iPhones ja Android Nexus -laitteet, sekä pysty- että maisema-esikatseluina. IPadin laitteiden esikatselu löytyy myös muotokuvauksesta ja maisemasta.
Toinen hieno ominaisuus on kytkin HTTP: n ja HTTPS: n välillä. Responsinator tarjoaa molemmat tyypit sivustojen esikatselulle riippuen antamastasi URL-osoitteesta. Se vastaa automaattisesti mitä esikatseltavaa sivustoa välttää SSL-virheitä.
3. Responsive Design Checker
Tarvitseeko nopeasti tarkistaa, onko verkkosivusto todella reagoiva? Yritä sitten käyttää tätä Responsive Design Checker joka on suunniteltu erityisesti räätälöidyiksi näytön kokoiksi.
Kun annat URL-osoitteen, voit hallita täysiä reagoivaa testaustilaa. Voit muuttaa leveyttä / korkeutta haluamallasi tavalla ja jopa käyttää sitä vastaamaan tiettyjä kuvasuhteita, jos käytät kuvasuhde työkalu .
Sivupalkissa on useita ennalta määritettyjä kokoisia kokoisia laitteita, kuten Nexus-tabletteja, Kindlejä ja jopa uudempia puhelimia, kuten Google Pixelia.
Sivusto tukee myös suuria näytön kokoisia, jopa 24 tuuman työpöydän näytöissä. Yllättäen nämä suuret kokot toimivat hyvin myös pienillä monitoreilla, koska esikatseluruudun koko muuttuu suhteessa, ei koko pikselin leveyden mukaan.
Joten jos olet kamppaillut testata 1920px-näyttimiä pienemmällä MacBook-näytöllä, tämä työkalu on hyvin kirjanmerkin arvoinen.
4. Google Mobile Test
Google on täynnä hienoja työkaluja verkkovastaaville ja niiden käyttäjille Mobile-Friendly Test on yksi tällainen esimerkki.
Tämä testaustyökalu ei ole oikeastaan esikatselulaite eikä se auta sinua havaitsemaan UI-vikoja. Sen sijaan se on omistettu mobiilityökalu, jolla voidaan tunnistaa sivustossasi olevat ongelmat mobiililaitteissa.
Kun testiohjelma on kulunut, siirryt tai epäonnistuvat matkaviestinnän kannalta sopivana sivustona. Tämä on hieman liian yleinen suunnittelijoille, mutta Google tarjoaa vinkkejä ongelma-alueisiin ja sivuelementteihin, jotka voisivat parantaa sitä.
Pidä tämä tallennettuna luotettavana mobiilikokeilutyökaluna. Se ei ole täydellinen resurssi reagoivaan testaukseen, mutta se on erinomainen paikka kerätä tietoja ja se tulee kenties internetistä arvovaltaiselta yritykseltä.
5. Matt Kersleyn reaktiivinen työkalu
Suunnittelija ja kehittäjä Matt Kersley julkaisi oman vapaansa testaustyökalu reagoiviin asetteluihin. Tämä on paljon yksinkertaisempi kuin toisilla eikä sillä ole kovin monta tasoa.
Sen sijaan se on tavallinen inline-sivuston esikatselulaite, jossa on 5 kiinteää leveyttä: 240px, 320px, 480px, 768px, 1024px.
Esikatselualueilla on vierityspalkkeja, jotta voit siirtyä sisältöä vaivattomasti. Et kuitenkaan voi napsauttaa linkkejä tai selata muita sivuja paneeleissa, joten tämä on todella parasta yksittäisten sivujen testaamista varten.
Mutta yksinkertainen työkalu, joka saa työn, toimii hyvin, ja se on yksi harvoista testausvälineistä, jotka oletuksena tarjoavat 240px: n leveyden.
6. Ovatko ne reagoivia?
Sinun ei todennäköisesti tarvitse tätä työkalua, jos etsit pikselin täydellistä tarkkuutta.
Sen sijaan Olenko vastaava? verkkosivusto toimii parhaiten pikavalintojen ja esikatselujen löytämiseksi muutamilla yleisillä laitetyypeillä.
Syöt vain verkkosivuston URL-osoite ja latautuu neljään laitteen esikatselualueeseen: älypuhelimeen, tablet-laitteeseen, kannettavaan tietokoneeseen ja työpöydälle. Nämä eivät ole mittakaavassa, joten tarkastelet vain sivustoa suhdeluvuksi.
Mutta tämä on todella hienoa tarttua sivustosi kuvakaappauksiin, jotta se näyttää miten se näyttää eri laitteissa. Suorituskyky on tarkka asteikolla, ja se luottaa selaimeesi asianmukaiseen renderointiin.
Plus tämän työkalun avulla voit suorittaa localhost-osoitteita, jotta voit jopa tarkistaa hankkeet rakentaa paikallisesti tietokoneellesi.
7. Designmodo Responsive Test
Yksi muu työkalu, josta pidän todella, on Responsive Web Design Tester luonut Designmodo. Tämän ilmaisen työkalun ansiosta voit esikatsella selaimesi sivustoa tiettyjen leveyksien perusteella.
Mutta tämä hieno lisäys tähän työkaluun on ruudukko-pohjainen sivun asennus. Voit tarkistaa sivusi pikselipisteille ja jopa tutkia sivun ruudukko käyttämällä tätä webappia.
Voit myös vetää esikatseluruudun esivalittujen laitteiden leveyden ohella mihin tahansa testattaviin näytön leveyksiin. Siinä on syöttöjä leveydelle / korkeudelle, jos haluat syöttää koot myös manuaalisesti.
Mutta kunkin laitteen kuvake oikeassa yläkulmassa voit valita kymmeniä yhteisiä ruutukokoja, jotka tekevät tästä työkalusta täydellisen tarkistaa minkä tahansa laitteen voit kuvitella.
