Hvordan Test Responsive Designs gratis
"Stopp å endre størrelsen på nettleseren, du skal bruke den!" Hvor mange ganger har du hørt den? Vel, ok, kanskje ikke så mange ganger, men hvis du utvikler responsive designwebsteder, vet du hva jeg snakker om: med hver DOM- eller CSS-redigering drar du nettleserkanten frem og tilbake, tester endringene og ser etter noe ødelagt.
Til slutt er det meste av denne innsatsen et forsøk på å etterligne skjermstørrelsen til forskjellige enheter.
Hvis du driver bedriftsutvikling, kan du ha en rekke enheter levert av selskapet til å teste på. Hvor jeg jobber har vi en iPad, iPod, en eller to andre tabletter, bærbare datamaskiner og stasjonære datamaskiner. Hvis du ikke har den luksusen, må du bruke det som er tilgjengelig.
I mitt hjem har vi to forskjellige bærbare datamaskiner, to forskjellige Android-enheter, en Kindle og en Nexus 7. Disse er enhetene jeg bruker for å teste freelance-utviklingen, men det er klart at dette ikke er en uttømmende samling. Ingen iOS-enheter i det hele tatt, og selv om jeg er litt av en tidlig adopter, planlegger jeg ikke å kjøpe hver ny telefon / phablet / tablett da den treffer markedet.
Så hva er en utvikler å gjøre? Heldigvis finnes det et økende antall nettleserbaserte verktøy som etterligner skjermstørrelsene på et bredt utvalg av enheter. Ulike verktøy leveres med forskjellige funksjonssett og varierende bruksområder, selvsagt. Vi ser på flere av dem her.
For testformål brukte jeg det første virkelig lydhøre nettstedet jeg laget, PajamasOnYourFeet.com. Dette nettstedet er basert på Brownie HTML5-mal, veldig nådig til utviklingssamfunnet gratis på EGrappler.
Er jeg Responsive?
Er jeg Responsive? er en død enkel, umiddelbar oversikt over nettstedet ditt som det ville vise på fire forskjellige enheter. Alle fire er iOS, og utvikleren forklarer at fokus på nettstedet. Det gir ingen kontroller og ingen valg, bare en veldig enkel, elegant presentasjon.
Viewport størrelser er
- Skrivebord - 1600 x 992px nedskalert til skala (0.3181)
- Laptop - 1280 x 802px nedskalert til skala (0.277)
- Tablet - 768 x 1024px nedskalert til skala (0.219)
- Mobil - 320 x 480px nedskalert til skala (0.219)
Sitere utvikleren, "Dette er ikke et verktøy for testing, det er veldig viktig at du gjør det på ekte enheter. Dette er i stedet et verktøy for raske skjermbilder (for meg) og å visuelt tillate folk å "få" det du mener på klientmøter. "
To flotte funksjoner er evnen til å dra "enhetene" hvor du vil på skjermen, og muligheten til å legge inn teststedet ditt i en kobling du kan dele. I Firefox, i hvert fall med strukturen på teststedet, viser ikke sideskjermen på iPhone, men det gjør det i IE og Chrome.
deviceponsive
deviceponsive ligner på jeg er responsiv? ved at den enkelt og rent viser nettstedet ditt, uten kontroller eller muligheter tilgjengelig når det gjelder enhetene. Alle enhetene vises samtidig på en langside. Det har den interessante funksjonen at du kan tilpasse sidens topptekst ved å redigere en baktekstfarge og legge inn din egen logo, og deretter dele via skjermopptak. Dette lar deg merke nettstedet, på en måte, når du deler skjermbilder med en kunde.
Enheter og skjermstørrelser som er emulert på dette nettstedet er
- Macbook - 1280 x 800
- iPad portrett - 768 x 1024
- iPad landskap - 1024 x 768
- Kindle portrett - 600 x 1024
- Tenne landskap - 1024 x 600
- iPhone portrett - 320 x 480
- iPhone landskap - 480 x 320
- Galaksportrett - 240 x 320
- Galaxy landskap - 320 x 240
Som med de fleste av disse verktøyene vises rullestenger på de mindre enhetene. På den aktuelle enheten ville de ikke vise, men for å tillate å rulle testvisningen på en ikke-berøringsrulle, må det være noen innrømmelser.
responsiv test
Som enhetsponsiv, responsiv test viser nettstedet ditt i en rekke enheter, men i stedet for å vise dem alle på siden samtidig, velger du hvilken enhet som skal vises fra en enkel meny øverst på siden. Hvis jeg ser på dette nettstedet på en mellomstor laptop, fant jeg at du zoomet ut siden fungerer bra, slik at du kan se hele teststedet i testenhetens bezel.
Tretten forskjellige visningsportaler tilbys her, alt fra en stor stasjonær skjerm til det de kaller "Crappy Android" (for å være rettferdig, har de også et alternativ kalt "Nicer Android").
Igjen, Firefox er nettleseren som snubler litt på dette nettstedet. Legg merke til i skjermbildet, mellom grønt overskrift og det hvite bakgrunnsinnholdsområdet, er det bare en blå stripe hvor en bildeskyve skal vises.
responsive.is
Ganske likt de to foregående oppføringene, den ene tingen som setter responsive.is bortsett fra dem er den glatte animasjonen fra en enhetens display til den neste, og et semi-gjennomsiktig overlegg som viser eiendomsområdet som faller utenfor visningsporten.
De eneste enhetene som er tilgjengelige her, er automatiske, som fyller nettleservinduet, viser nettstedet som du ville se det hvis du faktisk gikk dit, Desktop; Tablet Landscape; Tablet portrett; SmartPhone Landscape; og SmartPhone Portrait, piksel dimensjoner er ikke gitt.
Screenqueries
Igjen, noen forskjellige funksjoner og alternativer satt Screenqueries litt bortsett fra de andre. 14 telefoner og 12 tabletter leveres her, med separat kontroll for å bytte mellom stående og liggende modus. De viser på et nummerert pikselrutenett, med dimensjonene vist nederst til høyre på testdisplayet. Kanten på skjermen er dragerbar, slik at du kan teste tilpassede størrelser. Mus over eller klikk på testområdet og bakgrunnen bytter til grå, noe som gir deg en mindre rotete visning.
En interessant funksjon av dette nettstedet, for flere av enhetene er det et "Trueview" -alternativ som viser nettstedet ditt pakket inn i den angitte enhetens nettleserkrom.
Dessverre, og jeg blir vant til det nå, mislykkes Firefox til å vise teststedets bildeskli. Ikke flamme meg, Firefox er faktisk min nettleser av valg, men heldigvis har vi muligheter.
Screenfly
Screenfly virkelig skritt opp brukervennlighet kvotenienten. Den tilbyr ni større enn nettbrettetheter, fra 10 "bærbare til 24" -bord, fem tabletter, ni smarttelefoner, tre tv-størrelser og et tilpasset skjermstørrelsesalternativ. Ethvert alternativ du velger kan roteres til stående eller liggende med en egen menykontroll. Du kan velge å tillate rulling eller ikke, og du kan generere en delbar lenke med et klikk på en knapp.
Nettstedet er proaktivt nyttig med hvordan det presenterer pixeldimensjonsinformasjon. Hver enhet i menyene vises med navn og pikselmål, dimensjonene til ditt eget faktiske nettleservindu vises nær øverst til høyre i vinduet, og det valgte alternativets dimensjoner vises i en bunntekst under displayet, sammen med nettadressen til Nettstedet blir testet. Den lille funksjonen gir en fin touch for å dokumentere skjermbilder og dele informasjonen med klienter.
Alle de nevnte ville gjøre dette til et helt godt verktøy, men utviklerne av Screenfly så passe for å slå den opp en stor hakk og gi en proxy-serverfunksjon. Quote fra deres nettsted, "Screenfly kan bruke en proxy-server til å etterligne enheter mens du ser på nettstedet ditt. Proxy-serveren etterligner brukeragentstrengen av enhetene du velger, men ikke oppførselen til disse enhetene. "
Alle de andre verktøyene som dekkes her, gjelder kun CSS. Screenfly er den eneste som tillater testing basert på agent streng.
Testing med det ene nettstedet jeg har laget som gir en mobil versjon basert på agentstreng, var resultatene for mobilnettstedet veldig bra. Ting som vises akkurat som forventet og funksjoner var testbare. Ganske vist er testing for agentstrenger eldgammel, men dette nettstedet ble gjort "tilbake på dagen", og proxy-serverfunksjonen er et nyttig tillegg til dette nettstedet.
Konklusjon
Så vi ser at det er ganske mange ressurser for å teste dine lydhøre nettsteder. Differensiert av unike funksjoner, hvilke nettsteder du kan bruke, vil være basert på dine egne individuelle preferanser og krav, og jeg oppfordrer deg til å utforske og eksperimentere med dem. Jo mer virkelig nyttige verktøy vi har som webutviklere, jo bedre.
Bruker du noen av disse verktøyene? Hvordan tester du dine responsive design? Gi oss beskjed i kommentarene.