Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander

Duo. (Bild: Duo)

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar.

Responsive Webdesign: Duo hilft beim Testen von Webseiten. (Bild: Apple App-Store)
Responsive Webdesign: Duo hilft beim Testen von Webseiten. (Bild: Apple App-Store)

Respsonsive Webdesign: Duo soll die Arbeit vereinfachen

Browser gibt es viele. Duo will sich aus der Menge der verfügbaren Programme dadurch abheben, dass er Entwicklern dabei hilft, ihre responsiven Webseiten zu testen. Dazu bringt die Software eine zweigeteilte Ansicht mit. Links wird die mobile Ansicht einer Webseite präsentiert, wie sie auch auf Smartphones angezeigt wird. Parallel dazu wird die angesurfte Webseite im Desktop- beziehungsweise Tablet-Modus angezeigt. Die Breite lässt sich vom Nutzer dabei frei wählen, um verschiedene Geräte zu simulieren.

Da beide Seiten des Browsers gleichzeitig dieselbe Seite anzeigen, sollen Entwickler sich Zeit sparen können, da sie die Seite nicht in unterschiedlichen Größen neu laden müssen. Der Webkit-basierte Browser bringt die entsprechenden Entwickler-Tools gleich mit, um beide Ansichten debuggen zu können. Außerdem haben die Entwickler verschiedene Tastaturkürzel integriert, um beispielsweise auf Knopfdruck Cookies löschen zu können.

Responsive Webdesign testen mit Duo

Die Entwickler haben Duo außerdem mit einer praktischen Möglichkeit ausgestattet, um eine URL von eurem Standard-Browser an Duo zu senden. Dazu verwendet ihr ein Bookmarklet. Duo benötigt OS X 10.8 oder höher und kann über Apples App-Store für 4,49 Euro heruntergeladen werden. Den entsprechenden Link findet ihr unter diesem Artikel.

Wer sich eingehender mit dem Thema responsives Webdesign beschäftigen möchte, dem können wir die vierteilige Responsive-Webdesign-Reihe unseres Kollegen Mario Janschitz ans Herz legen. In den vier Teilen behandelt er die Themen Layout- und Textdarstellung, Navigationsmenüs, Darstellung von Galerien und Videos sowie Steuerungselemente und Datendarstellung. Einen fünften Teil über Animationen werden wir demnächst veröffentlichen.

Duo
Duo
Entwickler: Electric Pulp
Preis: 5,49 €

Ebenfalls interessant:

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
Till Kleinert

Im Firefox deckt diese Funktionen der Web Developer ab unter >> Größe ändern findet man die >> angepassten Layouts. Diese lassen sich auch um weitere ildschimrdimensionen editieren.

Werbedesign Berlin

Nette Idee, aber dafür extra einen Browser "erfinden"? Es gibt doch schon längere Zeit den Ripple Emulator für Google Chrome. Mit Angabe der verschiedenen Endgeräte etc.

dqwacw

eigentlich reicht es die developer tools nach rechts zu pinnen und mit dem rand der developer tools den viewport zu verändern.

Jens Richter

Achso, und hätte man das Tool nicht auch einfach als Webseite mit 2 IFrames umsetzen können? So nebeneinander und so.

Jens Richter

Bestimmt wurde um das Tool herum ein Startup gegründet, in einer Finanzierungsrunde wurden Investitionen in 2-stelliger Millionenhöhe beschlossen und der Börsengang ist auch schon geplant. Nein? Gott sei Dank - eine Ausnahme.

Hilfs-Tools

Interessant wären gängige Auflösungen incl. Statistiken und den Handy-Namen bzw. Tablett-Bezeichnungen und Möglichkeit, mehrere zu markieren um gezielt diese ausgewählten 2-5 Auflösungen anzusehen weil es da Probleme gibt oder das die Geräte beim Kunden repräsentiert.

Benny Lava

Für Firefox gibt es das Addon "Tile Tabs" mit dem man das auch ganz einfach hinbekommt.

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst