7 großartige Tools zum Testen Ihrer reaktionsschnellen Webdesigns

Jeder moderne Webdesigner sollte die Prinzipien des reaktionsschnellen Webdesigns kennen - wie Sie Ihre Websites auf jedem Gerät oder jeder Bildschirmgröße, auf der sie angezeigt werden, perfekt rendern können. (Wenn Sie eine Auffrischung benötigen, lesen Sie unsere Leitfaden für Profis zum reaktionsschnellen Webdesign ).

Aber Theorie ist eine Sache und Praxis ist eine andere. Um sicherzustellen, dass Ihre Site vollständig reagiert, müssen Sie sie tatsächlich auf verschiedenen Geräten testen.



wie man Bilder in Photoshop teilt

Die meisten von uns haben jedoch nicht das Budget, um an die Hunderte von physischen Geräten zu gelangen, die Sie für einen realen Test benötigen. Aber keine Angst! Mit diesen Tools können Sie Ihre reaktionsschnellen Designs in einer virtuellen Umgebung testen.



01. Responsinator

Sehen Sie mit Responsinator, wie Ihre Website in verschiedenen Ansichtsfenstern aussieht

Sehen Sie mit Responsinator, wie Ihre Website in verschiedenen Ansichtsfenstern aussieht

Die Schönheit von Responsinator liegt in seiner Einfachheit. Geben Sie einfach die URL Ihrer Webseite ein und dieses kostenlose, browserbasierte Tool zeigt Ihnen, wie Ihre Webseite in den beliebtesten Bildschirmformen und -größen gerendert wird.



Genialerweise können Sie dann mit Ihrer Seite interagieren, auf Links klicken, in Suchfelder eingeben und so weiter. Beachten Sie, dass dies generische Geräte sind, jedoch keine spezifischen.

02. Screenfly

Überprüfen Sie mit Screenfly, wie Ihre Website auf verschiedenen Geräten, einschließlich Fernsehgeräten, angezeigt wird

Überprüfen Sie mit Screenfly, wie Ihre Website auf verschiedenen Geräten, einschließlich Fernsehgeräten, angezeigt wird

Screenfly ist ein kostenloses Tool zum Testen einer Website auf verschiedenen Bildschirmgrößen und verschiedenen Geräten. Es gibt es schon seit ein paar Jahren, aber es ist immer noch beliebt und macht seine Arbeit sehr gut.



Geben Sie einfach Ihre URL ein, wählen Sie Ihr Gerät und die Bildschirmgröße aus den Menüs aus und Sie werden sehen, wie gut Ihre Website daran arbeitet. Zu den vorgestellten Geräten gehören Desktop-Computer, Tablets, Fernseher und Smartphones.

03. Google DevTools-Gerätemodus

Der DevTools-Gerätemodus emuliert verschiedene Geräte in Chrome

Der DevTools-Gerätemodus emuliert verschiedene Geräte in Chrome

Der Gerätemodus von DevTools bietet Entwicklern eine einfache Möglichkeit, mobile Geräte im Chrome-Browser zu simulieren. Verwenden Sie diese Option, um zu erfahren, wie Ihre Website auf verschiedenen Bildschirmgrößen und Auflösungen angezeigt wird, einschließlich Retina-Bildschirmen.

Sie können sogar Geräteeingaben für Berührung, Geolokalisierung und Geräteorientierung im Emulator simulieren.

04. Google Resizer

Mit Resizer können Sie Material Design-Haltepunkte für Ihre reaktionsfähige Site festlegen

Mit Resizer können Sie Material Design-Haltepunkte für Ihre reaktionsfähige Site festlegen

Die Material Design-Richtlinien von Google enthalten Hinweise zur Verwendung von Haltepunkten, Reaktionsgittern, Oberflächenverhalten und Benutzeroberflächenmustern. Und letztes Jahr wurde ein kostenloses Tool eingeführt, mit dem Sie sehen können, wie das Befolgen dieser Anleitung auf realen Geräten aussieht.

Mit Google Resizer können Sie eine benutzerdefinierte URL eingeben und eine Website über Material Design-Haltepunkte für Desktop und Mobile hinweg anzeigen. Wenn Sie zuerst eine Demo sehen möchten, klicken Sie auf die Adressleiste und wählen Sie ' Pesto ' oder ' Schrein ’Aus dem Dropdown-Menü.

05. Ghostlab

Ghostlab konzentriert sich auf das gleichzeitige Testen einer Reihe von Geräten und Browsern

Ghostlab konzentriert sich auf das gleichzeitige Testen einer Reihe von Geräten und Browsern

Ghostlab ist eine kostenpflichtige Website-Test-App, mit der Sie Ihre Website auf einer Vielzahl von Browsern und Mobilgeräten gleichzeitig testen können. Beginnen Sie mit dem Testen in einem Browser oder Gerät, und alle anderen spiegeln Ihre Aktionen wider, unabhängig davon, ob Sie auf Links klicken, Schaltflächen auswählen, Formulare ausfüllen oder die Seite neu laden.

Sie können auch ein Screengrab von jedem Gerät nehmen, mit Anmerkungen versehen und per Drag & Drop auf Ihren Bug-Tracker ziehen. Sehen Sie es in Aktion in Dieses Video .

06. Browser-Stapel

Browser Stack ist ein kostenpflichtiges Testtool für Unternehmen

Browser Stack ist ein kostenpflichtiges Testtool für Unternehmen

Browser Stack ist eines der fortschrittlichsten Testwerkzeuge mit vollem Funktionsumfang. Die kostenpflichtige App bietet zu Testzwecken Zugriff auf mehr als 1.000 mobile und Desktop-Browser. Diese Liste wird ständig aktualisiert und basiert auf Markttrends und Nutzungsstatistiken, die auf den 36.000 Kunden von Browser Stack basieren.

Wie viel kostet ein AP-Laser?

Mit Benutzern wie Twitter, Microsoft, AirBnB und Mastercard macht es offensichtlich etwas richtig.

07. CrossBrowserTesting

CrossBrowserTesting bietet eine Vielzahl realer Geräte und Testfunktionen

CrossBrowserTesting bietet eine Vielzahl realer Geräte und Testfunktionen

Der größte Rivale von Browser Stack im Testbereich ist CrossBrowserTesting, das mehr als 1.500 Browser und Geräte zum Testen Ihrer reaktionsfähigen Website bietet.

Mit der All-in-One-Plattform können Sie parallele automatisierte Tests durchführen, Screenshots visuell vergleichen, auf realen Geräten mit Ihrer Website wischen und interagieren und Ihren Code aus der Ferne debuggen.