10 tools en apps voor het testen van uw responsieve ontwerp
Het is nog nooit zo belangrijk geweest om ervoor te zorgen dat uw ontwerp voor de lancering gereed is voor elk type gebruiker en apparaat. Hoewel het moeilijk kan zijn om fysiek op elk apparaat te testen, zijn er enkele tools en apps waarmee u verschillende responsieve scenario's kunt repliceren.
Met gratis en premium toolopties is er geen reden om uw responsieve ontwerp niet te testen voordat u het inzet. Zorg ervoor dat u die informatie gebruikt voor veel noodzakelijke ontwerpaanpassingen! Vandaag leiden we u door een selectie van tools om een responsief ontwerp te testen.
Verken Envato Elements
1. Google Mobielvriendelijke test
Google Mobielvriendelijke test is een van die tools die op de een of andere manier over het hoofd wordt gezien. U heeft uw website-ontwerp nodig om te voldoen aan de normen van Google om de zichtbaarheid van de zoekresultaten te helpen; het is zo simpel.
Het gebruik is eenvoudig, typ gewoon een URL in en kijk hoe uw pagina scoort op mobiele apparaten. Het beste deel van deze tool is dat het aangeeft waar uw website mogelijk vertraagt of niet goed wordt weergegeven op mobiel, zodat u de oplossingen kunt maken.
Kosten: gratis
2. Verantwoordelijke
Met Responsiator kunt u het ontwerp van uw website bekijken in een aantal verschillende apparaatomgevingen. (Dit is een geweldige manier om apparaten te repliceren zonder ergens een stapel telefoons in een la te hebben.)
Het beste van deze site is dat er snel nieuwe apparaten worden toegevoegd en dat ze je eigenlijk allemaal laten scrollen zodat je een hele pagina ziet, niet alleen wat er boven de scroll verschijnt. Apparaten worden ook aangeboden in portret- en landschapsweergave. Bovendien is elk apparaatvoorbeeld gelabeld, zodat u precies weet waar u naar kijkt en waar problemen op de loer liggen.
Kosten: gratis, maar met advertenties (verwijder advertenties voor een donatie)
3. Responsieve ontwerpcontrole
Responsive Design Checker plaatst uw website in een venster waar u handmatig de afmetingen kunt aanpassen - ideaal voor het controleren van breekpunten - en verschillende apparaatoriëntaties kunt zien.
Waar deze tool uitblinkt, is dat het zowel desktopformaten als mobiele en tablet-apparaten toont. (Sommige van de andere tools leggen echt de nadruk op mobiele en niet op grotere schermen.)
Het leuke is dat je verschillende formaten kunt zien zonder de grootte van je browser te veranderen. Nog een handig gebruik voor deze tool? Gebruik het om screenshots te maken voor mockups.
Kosten: gratis
4. XRespond
Met XRespond kunt u meerdere versies van uw site tegelijkertijd op verschillende apparaten vergelijken. Het mooie van deze tool is dat u kunt achterhalen hoe consistent de gebruikerservaring is die u van het ene apparaat naar het andere biedt. (Gebruikers verwachten dat websites overal hetzelfde zijn.)
Test het ontwerp in liggende of staande weergave en kies apparaten van dezelfde fabrikant - zoals Apple of Samsung - of vergelijk ze op verschillende apparaten van vergelijkbare grootte. Het enige nadeel van deze tool is dat deze niet alle nieuwste apparaten bevat, hoewel veel van de meest populaire modellen worden vermeld.
Kosten: gratis
5. Schermvlieg
Screenfly heeft een aantal leuke tools, zoals delen, zodat je als team kunt werken om een responsief ontwerp te testen en te bekijken. Het bevat ook meer apparaattypes dan sommige andere tools - desktopcomputers, telefoons, tablets, televisies en de mogelijkheid om elk gewenst aangepast schermformaat toe te voegen.
Met tools kunt u roteren, scrollen en meer met eenvoudige klikknoppen bovenaan en alles werkt rechtstreeks in de browser.
Kosten: gratis
6. LambdaTest
LambdaTest is een van de robuustere tools in deze lijst. Het biedt de mogelijkheid om te testen op meer dan 2000 echte browsers en besturingssystemen.
Deze tool is meer dan alleen zien hoe uw website eruit zal zien, hij test op compatibiliteit, gebruikerservaring, pixelperfectie en meer in een live omgeving. Het test op meerdere apparaten, browsers en browserversies, zodat u precies weet hoe uw website werkt.
U kunt screenshots krijgen van hoe het er allemaal uitziet en zelfs online samenwerken met de tool (en het team). Bovendien is de bonus van een premium-tool zoals deze dat het debug-functies bevat om u te helpen bij het oplossen van ontwerpproblemen wanneer ze zich voordoen.
Kosten: de Lite-versie is gratis; betaalde abonnementen beginnen bij $ 15 per maand
7. Responsive Design geïllustreerd
Responsive Design Illustrated is meer een planningstool dan een testtool. Beschouw deze beginnersoptie als iets dat u kunt gebruiken om beeldverhoudingen te visualiseren en ontwerpelementen te plannen voor verschillende apparaat- en schermformaten.
Je doet het allemaal goed in de browser, zodat je visueel kunt verkennen hoe je over het ontwerp in verschillende maten kunt nadenken.
Kosten: gratis
8. Responsive Web Design Testing Tool
De Responsive Web Design Testing Tool is een eenvoudige URL-gebaseerde viewer waarmee u apparaten kunt vergelijken op grootte of apparaattype.
Het leuke aan deze tool zijn de schakelopties om met één klik verschillende oriëntaties, lengtes of weergaven te zien. Als u deze tool wilt hosten voor testen in uw eigen omgeving, is dat ook een optie. (U kunt dus testen voordat een site live gaat.)
De ontwikkelaar van de tool, Matt Kersley, heeft deze beschikbaar gemaakt op Github.
Kosten: gratis
9. Designmodo responsieve test
De Designmodo Responsive Test is misschien wel een van de best uitziende tools om het ontwerp van uw website te testen. Het bevat veel eenvoudige schakelaars, heel veel apparaatopties en een schone interface als kijkomgeving.
Gebruikers kunnen ook aangepaste afmetingen toevoegen en in verschillende oriëntaties bekijken. Het wordt vaak bijgewerkt met nieuwe apparaten, zodat u het gemakkelijk kunt testen.
Kosten: gratis
10. CrossBrowserTesting
CrossBrowserTesting is een eersteklas tool die handmatige en geautomatiseerde tests biedt. Gebruikers kunnen handmatige, visuele en Selenium-tests in de cloud uitvoeren op meer dan 1.500 echte desktop- en mobiele browsers.
De tool is zeer schaalbaar - zelfs voor bedrijfsactiviteiten. Het is eenvoudig te implementeren, bevat foutopsporingstools, werkt op een aantal browsers, versies en apparaten en heeft een robuuste testconfiguratie, zodat u problemen in de test kunt vinden voordat ze grote problemen worden.
Kosten: plannen beginnen bij $ 29 per maand
Gevolgtrekking
Heeft u een favoriete tool die niet op deze lijst staat? Deel het met ons. We zien graag tools die we niet kenden.
Zoals met elke website-ontwerp- en ontwikkelingstool, is het een goed idee om met een paar opties te spelen voordat u slechts op één ding beslist. De meeste van deze tools kunnen u helpen erachter te komen of uw ontwerp werkt, maar ze werken allemaal op enigszins verschillende manieren en hebben verschillende niveaus van gebruikerscontrole. Speel rond en vind degene die het meest comfortabel voor je is.
