7 upeaa työkalua reagoivan verkkosuunnittelun testaamiseen

Jokaisen modernin verkkosuunnittelijan tulisi tietää reagoivan verkkosuunnittelun periaatteet - miten saada sivustosi renderöimään täydellisesti millä tahansa laitteella tai näytön koolla, missä se näkyy. (Jos tarvitset päivityksen, tutustu meidän ammattilaisen opas reagoivaan verkkosuunnitteluun ).

Mutta teoria on yksi asia, ja käytäntö on toinen. Varmistaaksesi, että sivustosi on täysin reagoiva, sinun on testattava se eri laitteilla.

Suurimmalla osalla meistä ei kuitenkaan ole budjettia saamaan kiinni sadoista fyysisistä laitteista, joita tarvitset todellisen testin suorittamiseen. Mutta älä pelkää! Nämä työkalut tarjoavat puolivälissä talon antamalla sinun testata reagoivia malleja virtuaalisessa ympäristössä.



miten hämärtää taustaa Photoshop CC 2017: ssä

01. Responsinaattori

Responsinatorilla näet, miltä sivustosi näyttää eri näkymissä

Responsinatorilla näet, miltä sivustosi näyttää eri näkymissä

Responsinatorin kauneus on sen yksinkertaisuudessa. Kirjoita vain verkkosivusi URL-osoite, ja tämä ilmainen, selainpohjainen työkalu näyttää, kuinka verkkosivusi toimii suosituimmissa näyttömuotoissa ja -koossa.

Loistavasti voit sitten olla vuorovaikutuksessa sivusi kanssa, napsauttaa linkkejä, kirjoittaa hakukenttiin ja niin edelleen. Huomaa, että nämä ovat yleisiä laitteita, ei kuitenkaan erityisiä.

02. Screenfly

Tarkista, kuinka verkkosivustosi näkyy eri laitteilla, myös televisioissa, Screenfly-sovelluksella

Tarkista, kuinka verkkosivustosi näkyy eri laitteilla, myös televisioissa, Screenfly-sovelluksella

Screenfly on ilmainen työkalu verkkosivuston testaamiseen erikokoisilla ja erilaisilla laitteilla. Se on ollut olemassa muutaman vuoden ajan, mutta se on edelleen suosittu ja tekee työnsä erittäin hyvin.

Syötä vain URL-osoitteesi, valitse laitteesi ja näytön koko valikoista ja näet, kuinka hyvin verkkosivustosi toimii sillä. Esillä olevia laitteita ovat pöytätietokoneet, tabletit, televisiot ja älypuhelimet.

kuinka tulla elokuvan taiteelliseksi johtajaksi

03. Google DevTools -laitetila

DevTools-laitetila emuloi erilaisia ​​laitteita Chromessa

DevTools-laitetila jäljittelee erilaisia ​​laitteita Chromessa

DevToolsin laitetila tarjoaa kehittäjille helpon tavan simuloida mobiililaitteita Chrome-selaimessa. Sen avulla voit oppia, miten sivustosi näyttää eri kokoisilla ja tarkkuuksilla, mukaan lukien verkkokalvonäytöt.

Voit jopa simuloida laitetuloja kosketusta, maantieteellistä sijaintia ja laitteen suuntaa varten emulaattorissa.

04. Google Resizer

Resizer auttaa sinua määrittämään materiaalisuunnittelun katkaisupisteet reagoivalle sivustollesi

Resizer auttaa sinua määrittämään materiaalisuunnittelun katkaisupisteet reagoivalle sivustollesi

Googlen materiaalisuunnitteluohjeet sisältävät neuvoja katkaisupisteiden, reagoivien ruudukkojen, pintakäyttäytymisen ja käyttöliittymämallien käytöstä. Viime vuonna se julkaisi ilmaisen työkalun, jotta voit nähdä, miltä tämän ohjeen noudattaminen näyttää todellisissa laitteissa.

Google Resizerin avulla voit syöttää muokatun URL-osoitteen ja tarkastella sivustoa Material Design -rajapisteissä työpöydälle ja mobiililaitteille. Jos haluat nähdä esittelyn ensin, napsauta osoiteriviä ja valitse Pesto ”Tai” Pyhäkkö ’Pudotusvalikosta.

05. Ghostlab

Ghostlab keskittyy samanaikaiseen testaukseen useissa laitteissa ja selaimissa

Ghostlab keskittyy samanaikaiseen testaukseen useissa laitteissa ja selaimissa

Maksettu verkkosivustojen testaussovellus Ghostlab antaa sinun testata verkkosivustoasi useilla selaimilla ja mobiililaitteilla samanaikaisesti. Aloita testaus yhdessä selaimessa tai laitteessa, ja kaikki muut vastaavat toimintojasi, napsautat sitten linkkejä, valitset painikkeita, täytät lomakkeita tai lataatko sivun uudelleen.

Kätevästi voit myös ottaa kuvaruudun mistä tahansa laitteesta, merkitä sen ja vetää ja pudottaa sen vikaseuraajaan. Katso se toiminnassa Tämä video .

06. Selainpino

Browser Stack on maksettu yrityksille suunnattu testaustyökalu

Browser Stack on maksettu yrityksille suunnattu testaustyökalu

Selainpino on yksi kehittyneimmistä, monipuolisimmista testaustyökaluista. Maksullinen sovellus tarjoaa pääsyn yli 1 000 mobiili- ja pöytätietoselaimeen testausta varten, luetteloa, jota päivitetään jatkuvasti, perustuen markkinoiden kehitykseen ja käyttötilastoihin, jotka perustuvat Browser Stackin 36 000 asiakkaaseen.

Käyttäjät, kuten Twitter, Microsoft, AirBnB ja Mastercard, tekevät ilmeisesti jotain oikein.

taidetarvikkeet jokaisella taiteilijalla pitäisi olla

07. CrossBrowserTestaus

CrossBrowserTesting tarjoaa valtavan määrän reaalimaailman laitteita ja testausominaisuuksia

CrossBrowserTesting tarjoaa valtavan määrän reaalimaailman laitteita ja testausominaisuuksia

Browser Stackin suurin kilpailija testaustilassa on CrossBrowserTesting, joka tarjoaa yli 1500 selainta ja laitetta reagoivan verkkosivustosi testaamiseen.

Sen all-in-one-alustan avulla voit suorittaa rinnakkaisia ​​automatisoituja testejä, verrata kuvakaappauksia visuaalisesti, pyyhkäistä ja olla vuorovaikutuksessa verkkosivustosi kanssa reaalimaailman laitteilla ja etsiä koodisi etänä etenemisen aikana.