7 kostenlose Tools zum Testen von Responsive Layouts
Jede Website sollte mit einem responsiven Ansatz gestaltet werden. Um Sie auf dem richtigen Weg zu halten, können Sie mit diesen anpassungsfähigen Test-Tools frühzeitig und häufig testen, ob Ihr Design in allen Browsern und bei allen Darstellungsfeldgrößen richtig aussieht.
Jede moderne Website benötigt ein ansprechendes Design . Dies erfordert mehr Aufwand, aber das Endergebnis lohnt sich.
Ich empfehle Ihnen, Ihre Ideen mit Responsive Design-Tools zu testen, um zu sehen, wie Ihre Website in jeder Phase aussieht. Sie können Usability-Probleme auf verschiedenen Bildschirmgrößen von einem handlichen Werkzeug suchen.
Und diese kostenlosen Tools sind meine besten Tipps für reaktionsfähiges Testen, da sie alle super einfach zu bedienen sind. Die meisten dieser Geräte unterstützen viele Gerätegrößen, damit Sie ein gutes Gefühl dafür bekommen, wie Ihr Layout von Smartphones zu Desktops aussehen sollte.
1. XRespond
Das XRespond-App nennt sich selbst ein "virtual device lab" und ich würde sagen, das ist ziemlich genau.
Mit dieser Website können Sie eine Vorschau der Websites auf einer Vielzahl von Geräten anzeigen. Die Site funktioniert in einem langen horizontalen Stil, in dem Sie seitwärts scrollen müssen, um alle Bildschirmformate zu sehen.
Die Beschriftung über jedem Bildschirm zeigt Ihnen die genaue Größe und das Gerät, mit dem es übereinstimmt. Zusätzlich zum Dropdown-Menü finden Sie eine große Auswahl an Smartphones, Tablets und Laptops zum Testen bestimmter Geräte.
Dieses Dropdown unterstützt sogar eine benutzerdefinierte Einstellung für Breite und Höhe, wenn Sie sehen möchten, wie Ihre Website auf bestimmten Monitoren angezeigt wird. Ein hervorragendes Testwerkzeug für Responsive Design und unterstützt eine große Vielfalt an Gerätestilen.
2. Verantwortlicher
Eine ähnliche App, die Sie vielleicht auch genießen können, ist Verantwortlicher .
Anstatt eine horizontale Bildlaufleiste zu verwenden, listet diese Seite jede Gerätevorschau in einer vertikalen Spalte auf. Auf diese Weise können Sie nach unten durch jedes Gerät blättern und die Site auf jeder einzelnen Seite anzeigen.
Zu den Geräten gehören die gebräuchlichsten iPhones und die Android Nexus-Geräte, sowohl mit Hoch- als auch Querformat-Vorschau. Sie finden iPad-Vorschauen auch im Hoch- und Querformat.
Ein weiteres cooles Feature ist der Wechsel zwischen HTTP und HTTPS. Responsinator bietet beide Arten für die Vorschau von Websites in Abhängigkeit von der eingegebenen URL. Es passt sich automatisch an die Site an, auf der Sie die Vorschau anzeigen, um SSL-Fehler zu vermeiden.
3. Responsive Design Checker
Müssen Sie schnell überprüfen, ob eine Website wirklich reaktionsfähig ist? Versuchen Sie es dann Responsive Design Checker speziell für benutzerdefinierte Bildschirmgrößen gemacht.
Sobald Sie eine URL eingegeben haben, haben Sie die volle Kontrolle über den Responsive Testing Space. Sie können die Breite / Höhe ändern, wie Sie möchten, und sie sogar verwenden, um bestimmte Bildschirmverhältnisse zu erreichen, wenn Sie eine verwenden Seitenverhältnis-Werkzeug .
In der Seitenleiste finden Sie eine Reihe von vordefinierten Bildschirmgrößen für gängige Geräte wie Nexus-Tablets, Kindles und sogar neuere Handys wie Google Pixel.
Die Website unterstützt auch große Bildschirmgrößen mit Desktop-Monitoren bis zu einer Breite von 24 Zoll . Überraschenderweise funktionieren diese großen Größen auch auf kleinen Monitoren gut, da das Vorschaufenster die Größe basierend auf dem Verhältnis und nicht der Gesamtpixelbreite ändert.
Wenn Sie also Schwierigkeiten haben, 1920px-Monitore auf Ihrem kleineren MacBook-Bildschirm zu testen, lohnt es sich, dieses Tool zu bookmarken.
4. Google Mobile-Test
Google ist voll von großartigen Tools für Webmaster und deren Mobilfreundlicher Test ist ein solches Beispiel.
Dieses Test-Tool ist nicht wirklich ein Vorschauprogramm und es hilft Ihnen nicht, Fehler in der Benutzeroberfläche zu erkennen. Stattdessen ist es ein dediziertes mobiles Tool zum Lokalisieren von Problemen auf Ihrer Website auf mobilen Geräten.
Sobald der Test ausgeführt wird, werden Sie als für Mobilgeräte optimierte Website entweder bestehen oder fehlschlagen. Dies ist ein wenig zu allgemein für Designer, aber Google bietet Tipps basierend auf Problembereichen und Seitenelementen, die Verbesserungen verwenden könnten.
Bewahren Sie diese als vertrauenswürdiges mobiles Testwerkzeug auf. Es ist keine vollständige Ressource für reaktionsfähiges Testen, aber es ist ein großartiger Ort, um Informationen zu sammeln, und es kommt von der vielleicht autoritativsten Firma im Web.
5. Matt Kersleys Responsive Tool
Designer und Entwickler Matt Kersley gab sein eigenes frei Testwerkzeug für ansprechende Layouts. Dieser ist viel einfacher als andere und hat nicht viele Rüschen.
Stattdessen ist es ein einfacher Inline-Site-Previewer mit 5 festen Breiten: 240px, 320px, 480px, 768px, 1024px.
Die Vorschaubereiche verfügen über Bildlaufleisten, sodass Sie mühelos durch Inhalte navigieren können. Sie können jedoch keine Links anklicken oder andere Seiten in den Fenstern durchsuchen, daher ist dies am besten für das Testen einzelner Seiten geeignet.
Aber für ein einfaches Tool, das den Job erledigt, funktioniert das großartig und es ist eines der wenigen Test-Tools, das standardmäßig eine 240px Breite bietet.
6. Bin ich ansprechend?
Sie werden dieses Werkzeug wahrscheinlich nicht brauchen, wenn Sie nach pixelgenauer Genauigkeit suchen.
Stattdessen die Bin ich ansprechend? Die Website funktioniert am besten für schnelle Überprüfungen und Vorschauen auf einige gängige Gerätetypen.
Sie geben einfach eine Website-URL ein und sie wird in vier Gerätevorschaubereiche geladen: ein Smartphone, ein Tablet, ein Laptop und ein Desktop. Diese sind nicht maßstabsgetreu, sodass Sie die Website nur als Verhältnis betrachten.
Aber das ist wirklich cool, um Screenshots Ihrer Website zu erstellen, um zu zeigen, wie sie auf verschiedenen Geräten aussieht. Das Rendering ist maßstabsgetreu und es hängt von Ihrem Browser ab, ob es korrekt gerendert wird.
Außerdem können Sie mit diesem Tool localhost-Adressen ausführen, so dass Sie selbst Projekte überprüfen können lokal bauen auf deinem Computer.
7. Designmodo Responsive Test
Ein anderes Werkzeug, das ich wirklich mag, ist das Responsive Web Design Tester erstellt von Designmodo. Mit diesem kostenlosen Tool können Sie eine Website in Ihrem Browser basierend auf bestimmten Breiten in der Vorschau anzeigen.
Aber die eine coole Ergänzung zu diesem Tool ist die Raster-basierte Seiteneinrichtung. Sie können Ihre Seite auf Pixelpunkte überprüfen und sogar studieren das Gitter der Seite Verwenden Sie diese Webanwendung.
Neben den vordefinierten Gerätebreiten können Sie das Vorschaufenster auch an die von Ihnen getesteten Bildschirmbreiten anpassen. Es gibt Eingaben für die Breite / Höhe, wenn Sie die Größen auch manuell eingeben müssen.
Mit jedem Gerätesymbol in der oberen rechten Ecke können Sie jedoch aus Dutzenden von gängigen Bildschirmgrößen auswählen. Damit ist dieses Tool perfekt für die Überprüfung von Geräten, die Sie sich vorstellen können.
