7 gratis tools voor het testen van responsieve lay-outs
Elke website moet ontworpen zijn met een responsieve benadering. Om ervoor te zorgen dat u op de goede weg bent, zal het testen van vroege en vaak, met een van deze responsieve testtools, ervoor zorgen dat uw ontwerp er goed uitziet in alle browsers en bij alle viewportgroottes.
Elke moderne website heeft het nodig een responsief ontwerp . Dit vereist meer inspanning, maar het eindresultaat is de moeite waard.
Ik raad eigenlijk aan om uw ideeën te testen met responsieve ontwerphulpmiddelen om te zien hoe uw site naar elke fase kijkt. U kunt bruikbaarheidsproblemen op verschillende schermformaten allemaal met één handig hulpmiddel opzoeken.
En deze gratis tools zijn mijn beste keuze voor responsieve tests, omdat ze allemaal supereenvoudig in gebruik zijn. Het beste van dit alles ondersteunt vele apparaatgroottes, zodat u een goed gevoel kunt krijgen voor hoe uw lay-out eruit moet zien van smartphones naar desktops.
1. XRespond
De XRespond-app noemt zichzelf een 'virtueel apparaatlab' en ik zou zeggen dat dat een mooie plek is.
Met deze site kunt u een voorbeeld bekijken van hoe een website er uit ziet op verschillende apparaten. De site werkt in een lange horizontale stijl waarbij je zijwaarts moet schuiven om alle schermformaten te zien.
Het label boven elk scherm geeft de exacte grootte en het apparaat aan. Plus in het vervolgkeuzemenu is er een brede selectie van smartphones, tablets en laptops voor het testen van specifieke apparaten.
Die vervolgkeuzelijst ondersteunt zelfs een aangepaste breedte / hoogte-instelling als u wilt zien hoe uw site op specifieke monitoren wordt weergegeven. Een uitstekende testtool voor responsief ontwerp en het ondersteunt veel variatie in apparaatstijlen.
2. Responsant
Een vergelijkbare app die je misschien ook leuk vindt, is Responsinator .
In plaats van een horizontale schuifbalk te gebruiken, geeft deze site elk apparaatvoorbeeld in een verticale kolom weer. Op deze manier kunt u door elk apparaat bladeren en een voorbeeld van de site op elk apparaat bekijken.
Tot de apparaten behoren de meest voorkomende iPhones en de Android Nexus-apparaten, beide met portret- en landschapspreviews. U vindt ook previews van iPad-apparaten in portret en landschap.
Een andere leuke functie is de omschakeling tussen HTTP en HTTPS. Responsinator biedt beide typen voor het bekijken van sites, afhankelijk van de URL die u invoert. De site past automatisch de site aan die u bekijkt om SSL-fouten te voorkomen.
3. Responsieve ontwerpcontrole
Moet u snel controleren of een website echt reageert? Probeer dit dan te gebruiken Responsieve ontwerpcontrole speciaal gemaakt voor aangepaste schermformaten.
Zodra u een URL opgeeft, heeft u volledige controle over de reagerende testruimte. U kunt de breedte / hoogte desgewenst wijzigen en zelfs gebruiken om bepaalde schermverhoudingen te evenaren als u een beeldverhoudingstool .
In de zijbalk vindt u een heleboel vooraf gedefinieerde schermformaten voor veelgebruikte apparaten zoals Nexus-tablets, Kindles en zelfs nieuwere telefoons zoals de Google Pixel.
De site ondersteunt ook grote schermformaten met desktopmonitors tot 24 "breed . Verrassend genoeg werken deze grote formaten ook op kleine monitoren omdat het voorvertoningsvenster wordt aangepast op basis van de verhouding, niet de totale pixelbreedte.
Dus als je moeite hebt om 1920px-monitoren op je kleinere MacBook-scherm te testen, is deze tool zeker de moeite waard om te bookmarken.
4. Google Mobile-test
Google zit vol met geweldige hulpmiddelen voor webmasters en hun Mobielvriendelijke test is zo'n voorbeeld.
Deze testtool is niet echt een previewer en het helpt je niet om UI-bugs te herkennen. In plaats daarvan is het een speciale mobiele tool voor het lokaliseren van problemen binnen uw site op mobiele apparaten.
Zodra de test is uitgevoerd, sla je over of slaag je als een mobielvriendelijke site. Dit is iets te generiek voor ontwerpers, maar Google biedt tips op basis van probleemgebieden en pagina-elementen die verbetering zouden kunnen gebruiken.
Houd dit opgeslagen als een betrouwbare mobiele testtool. Het is geen volledig hulpmiddel voor responsieve tests, maar het is een geweldige plek om informatie te verzamelen en het komt van misschien wel het meest toonaangevende bedrijf op internet.
5. Responsible Tool van Matt Kersley
Ontwerper en ontwikkelaar Matt Kersley zijn eigen gratis uitgebracht testtool voor responsieve lay-outs. Deze is een stuk eenvoudiger dan andere en heeft niet veel franjes.
In plaats daarvan is het een eenvoudige inline site-previewer met 5 vaste breedtes: 240 px, 320 px, 480 px, 768 px, 1024 px.
De preview-vensters beschikken over schuifbalken zodat u moeiteloos door inhoud kunt bladeren. U kunt echter niet op koppelingen klikken of bladeren door andere pagina's in de panelen, dus dit is echt het beste voor het testen van enkelvoudige pagina's.
Maar voor een eenvoudige tool die de klus klopt, werkt dit prima en is het een van de weinige testtools die standaard een breedte van 240 px biedt.
6. Ben ik responsief?
U hebt deze tool waarschijnlijk niet nodig als u op zoek bent naar pixel-perfecte nauwkeurigheid.
In plaats daarvan de Ben ik responsief? website werkt het beste voor snelle controles en voorbeelden van enkele gangbare apparaattypen.
U voert eenvoudig een website-URL in en deze laadt in vier preview-vensters van apparaten: een smartphone, tablet, laptop en desktop. Deze zijn niet op schaal, dus je kijkt alleen naar de site als een verhouding.
Maar dit is echt gaaf om schermafbeeldingen van uw site te pakken om te laten zien hoe deze eruit ziet op verschillende apparaten. De weergave is nauwkeurig op schaal en het is afhankelijk van uw browser voor een juiste weergave.
Bovendien kunt u met dit hulpprogramma localhost-adressen uitvoeren, zodat u zelfs projecten kunt controleren die u bent lokaal bouwen op jouw computer.
7. Designmodo Responsieve test
Een andere tool die ik echt leuk vind, is de Responsive Web Design Tester gemaakt door Designmodo. Met deze gratis tool kunt u opnieuw een voorbeeld van een site in uw browser bekijken op basis van bepaalde breedten.
Maar de enige coole toevoeging aan deze tool is de op rasters gebaseerde pagina-instelling. U kunt uw pagina controleren op pixelpunten en zelfs studeren het raster van de pagina met behulp van deze webapp.
Naast de vooraf gedefinieerde apparaatbreedten kunt u het voorbeeldvenster ook slepen om te passen in de schermbreedten die u test. Het heeft ingangen voor de breedte / hoogte als u de maten ook handmatig moet invoeren.
Met elk apparaatpictogram in de rechterbovenhoek kunt u kiezen uit tientallen veelgebruikte schermformaten, waardoor dit hulpmiddel perfect is voor het controleren van elk apparaat dat u maar kunt bedenken.
