Responsive Design hat eine ganze Reihe neuer Herausforderungen für Webdesigner mit sich gebracht, die sich entschieden haben, das statische Design hinter sich zu lassen. Das Erstellen eines Layouts, das nicht nur in einer, sondern in mehreren oder sogar allen möglichen Breiten funktioniert, erfordert Geduld, Kreativität und natürlich viele Tests.
Es gibt nichts Schöneres, als Ihr Design auf den tatsächlichen Geräten zu überprüfen, auf die Sie abzielen. Wenn Sie jedoch gerade bauen, ist es schön, einen kurzen Einblick in das Layout in verschiedenen Breiten direkt auf Ihrem Computer zu erhalten. Sie können die Größe Ihres Browser-Fensters manuell ändern, was jedoch lächerlich langweilig wird, wenn Sie genaue Pixelabmessungen vornehmen. Glücklicherweise haben einige talentierte Entwickler bereits einige großartige Tools entwickelt, die Sie in diesem Prozess unterstützen. Kommen Sie heute zu uns und betrachten Sie drei davon.
Warten Sie, warum brauche ich diese?
Wenn Sie mit dem Konzept des responsiven Webdesigns noch nicht vertraut sind, könnten Sie verwirrt sein, warum die folgenden Dienstprogramme hilfreich sind. Grundsätzlich besteht das Ziel hinter responsive Design darin, eine Site zu erstellen, die sich an unterschiedliche Viewport-Größen anpasst und weiterentwickelt. Anstatt eine Site zu erstellen, die auf Desktops gut funktioniert, eine andere für mobile und eine dritte für Tablets, erstellen Sie ein einziges Layout, das auf alle diese Szenarien gut reagiert.
Um dies zu erreichen, müssen Sie Ihr Layout natürlich in verschiedenen Breiten sehen können. Ich persönlich empfehle, für jede mögliche Breite zu entwerfen, anstatt nur gängige Gerätebreiten anzustreben, aber es ist auf jeden Fall eine gute Idee, zu versuchen, ein Gefühl für das Layout zu bekommen, das den Benutzern bestimmter Geräte angezeigt wird. Die folgenden Tools helfen Ihnen, dieses Unterfangen zu vereinfachen.
Der Verantwortliche
Der Responsinator ist wahrscheinlich der einfachste Weg, um einen Überblick über gängige Gerätebreiten zu erhalten. Es ist schnell, es ist einfach und die Erfahrung wurde so gestaltet, dass jeder sofort erkennen kann, was los ist. Dies ist ein wichtiges Konzept, das wir noch nicht angesprochen haben. Manchmal müssen Sie Ihrem Kunden Ihr responsives Design zeigen, und Tools wie diese vereinfachen diesen Prozess erheblich.
Der Grund, warum diese Site das Konzept des responsiven Designs so gut kommuniziert, besteht darin, dass sie Silhouetten beliebter Geräte verwendet, in denen die Site Ihrer Wahl angezeigt wird.
Um zu beginnen, müssen Sie lediglich die URL einer Website eingeben, die Sie testen möchten. Es muss sich nicht um eine Website handeln, die Ihnen gehört, daher ist dies auch eine großartige Möglichkeit, um zu untersuchen, was andere Designer getan haben. Für dieses Beispiel habe ich die Website von United Pixel Workers verwendet.
Von hier aus scrollen Sie einfach die Seite nach unten und sehen eine Vorschau des Layouts in allen verfügbaren Geräten. Diese Vorschaubilder sind live und können gescrollt, angeklickt werden usw. Die Auswahl an Vorschaubildern hier ist ziemlich beeindruckend. Sie enthalten nicht nur wichtige Geräte wie iPads, sondern sie haben auch die gängigen Breiten, die auf mehreren Geräten verwendet werden, wie beispielsweise "crappy" Android? Beispiel unten.
Ich habe gesehen, dass der Responsinator das einzige Tool ist, das die Software-Benutzeroberfläche tatsächlich berücksichtigt. Anstatt Ihre Website für ein horizontales iPad mit den gesamten 1024 x 768 Pixeln anzuzeigen, reservieren sie beispielsweise die besten 125 Pixel für den mobilen Safari-Browser.
Bevor wir zum nächsten Tool übergehen, finden Sie hier einen kurzen Überblick über die Vor- und Nachteile dieser App.
Verantwortlicher Pros
- Fast mühelos fügen Sie einfach einen Link ein und scrollen Sie
- Viele verschiedene Gerätevorschauen
- Schöne visuelle Darstellung, die die Kunden verstehen werden
- Die Abmessungen der Software-Benutzeroberfläche werden eindeutig berücksichtigt
Verantwortlicher Cons
- Muss mehrere Instanzen jeder Site laden
- Keine Möglichkeit, Größen zu untersuchen, die nicht aufgeführt sind
Responsive.is
Das nächste Werkzeug auf der Liste ist Responsive.is. Das Konzept ist das gleiche wie zuvor. Die Site bietet eine schnelle Möglichkeit, Ihr Layout in mehreren verschiedenen Breiten anzuzeigen. Der Ansatz unterscheidet sich jedoch drastisch.
Für den Anfang gibt es keine Silhouetten von Geräten. Oben auf dem Bildschirm befindet sich eine kleine Symbolleiste, der Rest ist jedoch für eine einzelne Site-Vorschau reserviert, die sich je nach ausgewähltem Gerät ändert. Dies ist ein wenig bequemer, da das scheinbar endlose Scrollen sowie das Laden mehrerer Vorschaubilder eliminiert werden, aber ein Teil des Offensichtlichen dessen, was passiert, geht dabei verloren. Die minimale Benutzeroberfläche ist wirklich nett, etwas, das ich schätzte, nachdem ich viel Zeit mit den sperrigen Silhouetten von The Responsinator verbracht hatte.
Responsive.is enthält ein Menü, das integrierte responsive Sites für Testfahrten enthält, so dass Sie ein Gefühl für die Funktionsweise des Dienstes erhalten (ich habe Food Sense verwendet). Wenn Sie eine andere Site testen möchten, geben Sie diese einfach in das Feld ein.
In der Symbolleiste oben finden Sie sechs verschiedene Optionen für die Größe von Ansichtsfenstern, von denen jede durch ein kleines Symbol dargestellt wird: Desktop, Tablet-Landschaft, Tablet-Vertikale, Smartphone-Landschaft, Smartphone-Vertikale und Auto.
Wie zu erwarten, erhalten Sie durch Klicken auf ein Gerät eine Vorschau der Site in dieser Breite. Ich finde es sehr gut, wie die Vorschau hier behandelt wurde. Die vollständige Site wird in der angegebenen Breite angezeigt, jedoch wird alles außerhalb des sichtbaren Teils des Ansichtsfensters dunkel dargestellt.
Mein größter Kerl hier ist, dass die tatsächlichen Gerätebreiten nicht wirklich angegeben sind. Anstelle von Pixelabmessungen werden nur allgemeine Symbole angezeigt. Da dies der Fall ist, ist diese Seite definitiv mehr für allgemeine Tests als für bestimmte Umstände (obwohl Sie die verschiedenen Größen selbst messen konnten).
Responsive.ist Pros
- Saubere, minimale Oberfläche, die sich auf den Inhalt konzentriert
- Es wird nur eine Instanz der Test-Site geladen
- Sie müssen nicht blättern. Klicken Sie einfach auf ein Symbol, um den Darstellungsbereich zu ändern
- Eingebaute Testoptionen
Responsive.ist Cons
- Sie sind auf sechs generische Ansichtsfenster beschränkt
- Keine spezifischen Abmessungen aufgeführt
- Für Kunden ist dies möglicherweise schwieriger als der Responsinator
Responsivepx
Bis jetzt zwingen Sie alle Tools, die wir gesehen haben, zum Testen in vorgegebene Abmessungen. Wenn Sie die Testgrößen nicht mögen oder einfach nur eine weitere hinzufügen möchten, ist das hart! Es gibt keine Möglichkeit, dies zu tun. Wohin wenden Sie sich, wenn Sie die Abmessungen für den Test genau bestimmen möchten? Die Antwort ist eine Site mit dem Namen Responsivepx.
Hier haben wir einen einfachen Begrüßungsbildschirm mit einigen Anweisungen und einem Link zu einem Tutorial-Video. Geben Sie zunächst eine URL in das Feld oben rechts ein. Mit Responsivepx können Sie sogar lokale Websites testen, die sich auf Ihrem Computer befinden und an denen gerade gearbeitet wird. Wir werden die Website von Bryan Connor als Beispiel für diesen Test verwenden.
Wenn Sie eine Site eingegeben haben, können Sie die Dimensionen mithilfe der Werkzeuge oben auf dem Bildschirm anpassen. Wie Sie in der Aufnahme unten sehen können, gibt es diesmal keine voreingestellten Größen. Sie können die Abmessungen der Vorschau vollständig steuern, indem Sie entweder eine Zahl eingeben oder die Schieberegler verwenden.
Wenn Sie die Einstellungen anpassen, wird die Website-Vorschau entsprechend den Änderungen aktualisiert. Es wird in einem Transparenzraster angezeigt, das dem von Photoshop ähnelt.
Meiner Meinung nach ist Responsivepx bei weitem die nützlichste Option für Entwickler, die auf ihrer eigenen responsive Site arbeiten. Dafür gibt es verschiedene Gründe. Erstens wurde es speziell dafür entwickelt, Haltepunkte basierend auf Ihrem einzigartigen Design zu finden. Sie können ein Design laden, die Breite an einen Punkt verschieben, an dem das Layout nicht mehr funktioniert, und dann die angegebenen Pixelwerte verwenden, um sie in Ihre Medienabfrage einzufügen. Wenn Sie die Änderungen vorgenommen haben, speichern Sie Ihre Datei, aktualisieren Sie die Vorschau, und Sie können den nächsten Haltepunkt angreifen. Die Tatsache, dass es mit lokalen Dateien arbeitet, ist hier wirklich hilfreich.
Während Sie die Testfälle eingeben und die Einstellungen ändern, wird die Adresse in der URL-Leiste Ihres Browsers entsprechend aktualisiert, so dass Sie die Möglichkeit haben, einen bestimmten Testfall mit Kollegen zu teilen.
Da diese App eine großartige Möglichkeit ist, um potenzielle Haltepunkte festzulegen, würde ich gerne eine Schaltfläche enthalten, die eine Medienabfrage basierend auf der aktuellen Größe des Ansichtsfensters generiert. Dies würde Responsivepx wirklich zu einem Killer-Tool für responsive Designer machen.
Responsivepx Pros
- Sie bestimmen die Vorschaumaße
- Perfekt zum Auffinden von Haltepunkten
- Remote- und lokale Tests
- Einfach, bestimmte Testfälle zu teilen
Responsivepx Cons
- Verwenden Sie für Entwickler meist eine andere Option für Kunden
- Die Symbolleisten-Benutzeroberfläche könnte einige Arbeit benötigen
Fazit
Sie haben jetzt drei neue Waffen in Ihrem responsiven Webdesign-Arsenal. Alle diese Sites haben ihre besonderen Stärken und sind es wert, ein Lesezeichen für später zu erstellen. Mit dem Responsinator können Sie viele verschiedene Geräte schnell und einfach simulieren. Sie können Kunden dabei unterstützen, sich mit dem zu beschäftigen, was Sie erreichen wollen. Responsive.is ist eine gute Methode, um ein allgemeines Gefühl dafür zu bekommen, wie sich ein responsives Layout auf verschiedenen Gerätegenres auswirkt. Für bestimmte Testzwecke ist es nicht das Beste, aber für einen schnellen Test kann es nützlich sein. Responsivepx ist das ultimative Werkzeug, um die idealen Haltepunkte für Ihr Design zu finden. Sie übernehmen die Kontrolle über die genauen Pixelabmessungen und können lokale Dateien testen, an denen Sie gerade arbeiten.
Haben Sie eines der oben genannten Tools ausprobiert? Was denkst du von ihnen? Wie können sie verbessert werden? Teilen Sie uns bitte auch ähnliche ähnliche Tools mit, die Sie gefunden haben.
Stock Bilder zur Verfügung gestellt von: Bigstock.