Sådan Test Responsive Designs gratis
"Stop med at ændre størrelsen på den browser, du skal bruge den!" Hvor mange gange har du hørt den? Godt okay, måske ikke så mange gange, men hvis du udvikler lydhurtige designwebsteder, ved du hvad jeg taler om: med hver DOM eller CSS-redigering trækker du browserskanten frem og tilbage, tester dine ændringer og søger efter noget brudt.
I sidste ende er det meste af denne indsats et forsøg på at efterligne skærmens størrelse på forskellige enheder.
Hvis du laver virksomhedernes udvikling, kan du have en række enheder, der leveres af virksomheden til at teste på. Hvor jeg arbejder, har vi en iPad, iPod, en eller to andre tabletter, bærbare computere og stationære computere. Hvis du ikke har den luksus, skal du bruge hvad der er til rådighed.
I mit hjem har vi to forskellige bærbare computere, to forskellige Android-enheder, en Kindle og en Nexus 7. Disse er de enheder, jeg bruger til at teste min freelance-udvikling, men det er klart, at dette ikke er en udtømmende samling. Ingen iOS-enheder overhovedet, og selv om jeg er lidt af en tidlig adopter, planlægger jeg ikke at købe hver ny telefon / phablet / tablet, da den rammer markedet.
Så hvad er en udvikler at gøre? Heldigvis er der et stigende antal browserbaserede værktøjer til rådighed, der efterligner skærmstørrelserne på en bred vifte af enheder. Forskellige værktøjer kommer med forskellige funktionssæt og forskellige anvendelsesniveauer, selvfølgelig. Vi vil se på flere af dem her.
Til testformål brugte jeg det første rigtigt reagerende websted, jeg lavede, PajamasOnYourFeet.com. Dette websted er baseret på Brownie HTML5 skabelon, meget nådigt til udviklingssamfundet gratis på EGrappler.
Er jeg Responsive?
Er jeg Responsive? er en død enkel, øjeblikkelig visning af dit websted, som det ville vise på fire forskellige enheder. Alle fire er iOS, og udvikleren forklarer, at fokus på webstedet. Det giver ingen kontrol og ingen valg, bare en meget enkel, elegant præsentation.
Viewport størrelser er
- Desktop - 1600 x 992px nedskaleret til skala (0.3181)
- Laptop - 1280 x 802px skaleres ned til skalaen (0.277)
- Tablet - 768 x 1024px nedskaleret til skala (0.219)
- Mobil - 320 x 480px nedskaleret til skala (0.219)
Citat udvikleren, "Dette er ikke et værktøj til testning, det er virkelig vigtigt, at du gør det på rigtige enheder. Dette er i stedet et værktøj til hurtige skærmbilleder (for mig) og for visuelt at give folk mulighed for at "få" hvad du mener på klientmøder. "
To meget flotte funktioner er evnen til at trække "enhederne", hvor du vil have på skærmen, og evnen til at integrere dit testwebsted i et link, du kan dele. I Firefox, i det mindste med strukturen på testwebstedet, vises sideskærmen på iPhone ikke, men det gør det i IE og Chrome.
deviceponsive
deviceponsive ligner Am I Responsive? ved at det simpelthen og rent viser dit websted uden kontrol eller muligheder, der er tilgængelige for enhederne. Alle enheder vises samtidigt på en lang side. Det har den interessante funktion, at du kan tilpasse webstedets header ved at redigere en baggrundsfarve og indlejre dit eget logo og derefter dele via skærmoptagelse. Dette giver dig mulighed for at mærke webstedet på en måde, når du deler skærmbilleder med en kunde.
Enheder og skærmstørrelser emuleret på dette websted er
- Macbook - 1280 x 800
- iPad portræt - 768 x 1024
- iPad landskab - 1024 x 768
- Kindle portræt - 600 x 1024
- Kindle landskab - 1024 x 600
- iPhone portræt - 320 x 480
- iPhone landskab - 480 x 320
- Galaxy portræt - 240 x 320
- Galaxy landskab - 320 x 240
Som med de fleste af disse værktøjer vises rullestænger på de mindre enheder. På den aktuelle enhed ville de ikke vise, men for at muliggøre at rulle testvisningen på en ikke-berøringsrulleenhed, skal der indrømmes nogle indrømmelser.
responsiv test
Ligesom deviceponsive, responsiv test viser dit websted i en række enheder, men i stedet for at vise dem alle på siden på en gang vælger du hvilken enhed der skal vises fra en simpel menu øverst på siden. Visning af dette websted på en mellemstor bærbar computer, jeg fandt ud af at zoome ud, fungerer godt, så du kan se hele teststedet i testenhedens bezel.
Der tilbydes tretten forskellige visningsporte her, alt fra en stor stationær skærm til et, hvad de kalder 'Crappy Android' (for at være retfærdige har de også en mulighed kaldet 'Nicer Android').
Endnu engang er Firefox den browser, der snuble lidt på dette websted. Bemærk i skærmbilledet, mellem det grønne overskrift og det hvide baggrundsindholdsområde, er der kun en blå stribe, hvor en billedskyder skal vises.
responsive.is
Meget ligner de to foregående indgange, den ene ting, der sætter responsive.is bortset fra dem er den glatte animation fra den ene enhedens skærm til den næste og et halvt transparent overlag, der viser ejendomsstedet, der falder uden for visningsporten.
De eneste enhedsindstillinger, der er tilgængelige her, er auto, som fylder dit browservindue og viser webstedet, som du ville se det, hvis du faktisk gik der, Desktop; Tablet Landskab; Tablet Portræt; SmartPhone Landskab; og SmartPhone Portrait, pixel dimensioner er ikke angivet.
Screenqueries
Endnu et par forskellige funktioner og muligheder indstilles Screenqueries lidt bortset fra de andre. Der findes 14 håndsæt og 12 tabletter her, med separat kontrol for at skifte mellem portræt og liggende tilstand. De vises på et nummereret pixelgitter med de dimensioner, der vises nederst til højre på testdisplayet. Kanterne på displayet kan trækkes, så du kan teste brugerdefinerede størrelser. Musen over eller klik på testområdet, og baggrunden skifter til grå, hvilket giver dig en mindre rodet visning.
En interessant funktion af dette websted, for flere af enhederne er der en "Trueview" -indstilling, der viser dit websted indpakket i den angivne enheds browserkrom.
Desværre, og jeg bliver vant til det nu, ignorerer Firefox ikke testwebstedets billedskyder. Lad mig ikke flamme, Firefox er faktisk min browser af valg, men heldigvis har vi muligheder.
Screenfly
Screenfly virkelig trin op brugskvoten. Det tilbyder ni større end tablet-enheder, fra 10 "notebook til 24" desktop, fem tabletter, ni smartphones, tre tv-størrelser og en brugerdefineret skærmstørrelse indstilling. Enhver mulighed du vælger kan roteres til portræt eller landskab med en separat menu kontrol. Du kan vælge at tillade scrolling eller ej, og du kan generere et delbart link med et klik på en knap.
Webstedet er proaktivt nyttigt med, hvordan det præsenterer pixeldimensionsinformation. Hver enhed i menuerne vises med navn og pixeldimensioner, dimensionerne af dit eget faktiske browservindue vises øverst til højre i vinduet, og den valgte valgmåls dimensioner vises i et footer under displayet sammen med webadressen til webstedet bliver testet. Den lille funktion giver et godt præg for at dokumentere skærmbilleder og dele informationen med klienter.
Alle de ovennævnte ville gøre dette til et perfekt godt værktøj, men udviklerne af Screenfly så passende til at sparke det op en stor hak og give en proxyserverfunktion. Med henvisning fra deres websted, "kan Screenfly bruge en proxyserver til at efterligne enheder, mens du ser dit websted. Proxyserveren efterligner brugeragentstrengen af de enheder, du vælger, men ikke adfærden af disse enheder. "
Alle de andre værktøjer, der er omfattet her, vedrører udelukkende CSS. Screenfly er den eneste der tillader test baseret på agent streng.
Test med det ene websted, jeg har lavet, giver en mobilversion baseret på agentstrengen, resultaterne for mobilwebstedet var meget gode. Ting vises nøjagtigt som forventet og funktioner var testbare. Ganske vist er test for agentstrenge gammel skole, men dette websted blev lavet "tilbage på dagen", og proxyserverfunktionen gør en nyttig tilføjelse til dette websted.
Konklusion
Så vi ser, at der er mange ressourcer til at teste dine lydhøre websteder. Differentieret af unikke funktioner, hvilke websteder du muligvis bruger vil være baseret på dine egne individuelle præferencer og krav, og jeg opfordrer dig til at udforske og eksperimentere med dem. Jo mere virkelig nyttige værktøjer vi har som webudviklere, desto bedre.
Bruger du et af disse værktøjer? Hvordan tester du dine lydhøre design? Lad os vide i kommentarerne.