7 gode værktøjer til test af dine responsive webdesign
Hver moderne webdesigner skal kende principperne for responsivt webdesign - hvordan man får dine websteder til at gengive perfekt på den enhed eller skærmstørrelse, den vises på. (Hvis du har brug for en genopfriskning, så tjek vores pro's guide til responsivt webdesign ).
Men teori er en ting, og praksis er en anden. For at sikre, at dit websted er fuldt responsivt, skal du faktisk teste det på forskellige enheder.
De fleste af os har dog ikke budgettet til at få fat i de hundredvis af fysiske enheder, du har brug for for at udføre en test i den virkelige verden. Men frygt ikke! Disse værktøjer giver et halvvejs hus ved at lade dig teste dine lydhøre design i et virtuelt miljø.
01. Responsinator
Responsinators skønhed ligger i sin enkelhed. Indtast bare din websides URL, og dette gratis, browserbaserede værktøj viser dig, hvordan din webside gengives i de mest populære skærmformer og størrelser.
Strålende kan du derefter interagere med din side ved at klikke på links, skrive i søgefelter og så videre. Bemærk, at disse er generiske enheder, men ikke specifikke.
02. Screenfly
Screenfly er et gratis værktøj til test af et websted på forskellige skærmstørrelser og forskellige enheder. Det har eksisteret i et par år nu, men det er stadig populært og gør sit job ekstremt godt.
Indtast bare din URL, vælg din enhed og skærmstørrelse i menuerne, så ser du, hvor godt dit websted fungerer på det. Udvalgte enheder inkluderer stationære computere, tablets, fjernsyn og smartphones.
03. Google DevTools-enhedstilstand
DevTools 'Device Mode tilbyder en nem måde for udviklere at simulere mobile enheder i Chrome-browseren. Brug det til at lære, hvordan dit websted vises på tværs af forskellige skærmstørrelser og opløsninger, herunder Retina-skærme.
Du kan endda simulere enhedsindgange til berøring, geolokalisering og enhedsretning i emulatoren.
04. Google Resizer
Googles retningslinjer for materialedesign inkluderer råd om brug af breakpoints, lydhøre net, overfladeadfærd og brugergrænseflademønstre. Og sidste år lancerede det et gratis værktøj, så du kan se, hvad der følger denne vejledning på enheder i den virkelige verden.
Google Resizer giver dig mulighed for at indtaste en brugerdefineret URL og se et websted på tværs af Material Design-breakpoints til desktop og mobil. Hvis du først vil se en demo, skal du klikke på adresselinjen og vælge ' Pesto 'Eller' Helligdom Fra rullemenuen.
05. Ghostlab
En betalt webtest-app, Ghostlab, giver dig mulighed for at teste dit websted på en række browsere og mobile enheder samtidigt. Start test i en browser eller enhed, og alle de andre vil spejle dine handlinger, uanset om du klikker på links, vælger knapper, udfylder formularer eller genindlæser siden.
Du kan også tage en screengrab fra en hvilken som helst enhed, kommentere den og trække og slippe den til din bug tracker. Se det i aktion i denne video .
06. Browser-stak
Browser Stack er et af de mest avancerede testværktøjer med alle funktioner. Den betalte app giver adgang til mere end 1.000 mobile og desktop-browsere til testformål, en liste, der løbende opdateres, baseret på markedstendenser og brugsstatistikker baseret på Browser Stack's 36.000 kunder.
Med brugere inklusive Twitter, Microsoft, AirBnB og Mastercard gør det selvfølgelig noget rigtigt.
07. CrossBrowserTesting
Browser Stacks største rival i testrummet er CrossBrowserTesting, der tilbyder mere end 1.500 browsere og enheder, du kan teste dit responsive websted på.
Dens alt-i-en-platform giver dig mulighed for at køre parallelle automatiserede tests, sammenligne skærmbilleder visuelt, stryge og interagere med dit websted på virkelige enheder og fejlagtigt debugge din kode, mens du går.
