Der ein oder andere wird sich bestimmt noch daran erinnern, als zum ersten Mal von Responsive Websites die Rede war. Plötzlich waren die Smartphones in einer Größe verfügbar, die das Surfen angenehm gestalteten und die Websites mussten entsprechend darauf reagieren. Das geschah, indem sich alles automatisch anpasste, verkleinerte, zusammenschob. Ganz am Anfang gab es zwar auch noch separate Mobile Varianten einer Homepage, doch das Thema war schnell vom Tisch und alles ging rein über die automatische Größenanpassung – responsive Webdesign.

Responsive Websites sind demnach zu einem Standard geworden und mit immer neuen Kniffen und Kalkulationen ausgestattet. Mittlerweile gibt es variable Fonts, Berechnungen von Schriftgrößen innerhalb von CSS sowie eine Menge weiterer Features. So ist es möglich geworden, eine Website plattformübergreifend anzubieten, ohne sie dafür an alle Geräte einzeln anpassen zu müssen, weil das Layout jederzeit flexibel bleibt. Eigentlich ist das fantastisch.

Dumm für uns Web-Entwickler ist allerdings, dass wir dennoch daran denken müssen, wie unsere Website auf den zig unterschiedlichen Geräten aussehen wird. Denn viele Geräte haben ihre bestimmten Eigenheiten, Größen und Auflösungen. Als wären die verschiedenen Browser nicht schon genug, sind es nun also auch noch die vielen Smartphones, die jede Zeile und jede Grafik unter Umständen anders darstellen oder gar verschieben.

In großen Agenturen sind die meisten Geräte vorhanden, sodass alles direkt Live getestet werden kann. Das ist immer noch am besten, denn nur wer das jeweilige Gerät wirklich in der Hand hat, weiß auch, wie etwas auf eben diesem wirkt. Wer nicht so groß ist, arbeitet mit verschiedenen Testumgebungen. Eine Möglichkeit sind hier die responsive Browser, die mehrere Darstellungen und Geräte auf einmal verwirklichen können. Wir stellen euch die besten von ihnen ein wenig genauer vor.

Responsive Browser: Was bringen die Browser für Web-Entwickler? 1

Responsive Browser im Vergleich

Gleich vorweg die wichtige Info, dass viele solcher Services in der Regel kostenpflichtig sind. Es gibt zwar einige kostenlose Varianten, die dann aber wiederum oft weniger Updates erhalten oder eben nicht ganz so umfangreich ausfallen. Das sollte jedem klar sein.

Direkt am Anfang müsst ihr euch daher die Frage stellen, ob ihr bereit seid, Geld für einen responsive Browser auszugeben oder ob ihr solche Tests viel zu selten durchführt, es sich also nur bedingt für euch lohnt.

So oder so haben wir versucht, in beiden Bereichen ein paar Empfehlungen zu finden. Wir stellen euch also sowohl kostenlose Varianten als auch kostenpflichtige vor. Wählt einfach selbst, was euch am Ende besser gefällt. Da die kostenpflichtigen Tools fast immer einen gratis Testzeitraum beinhalten, kann auch dort ruhig mal ein Blick riskiert werden.

Blisk (kostenlose Empfehlung)

Anfangen möchten wir mit einem sehr starken Vertreter. Blisk ist kostenlos und ein wunderbares Hilfsmittel, um Responsive Websites zu gestalten. Das liegt vor allem daran, dass der Workflow in Blisk so logisch aufgebaut ist und eigentlich exakt so funktioniert, wie viele Designer tatsächlich arbeiten.

So zeigt Blisk an der linken Seite die ausgewählte Mobile Variante der Website an, während im rechten Bereich einfach der restliche Bildschirm entsprechend aufgefüllt wird. Das ist sehr naheliegend und funktioniert gut, um schnell und auf den ersten Blick beide Hauptversionen im Auge zu behalten. Besonders fantastisch finden wir, dass die Geräte mitsamt ihrem Gehäuse dargestellt werden. Das gibt zusammen mit dem Rand des Gerätes nämlich einen realistischeren Eindruck wieder, als einfach nur die verschiedenen Größen darzustellen.

Die Grundversion von Blisk ist dabei komplett kostenlos und ohne Anmeldung nutzbar. Wer ein paar Features vermisst, der darf in Richtung der Premium Variante schauen. Dort gibt es dann die neusten Geräte, einen Recorder für Videos und Screenshots, einen Scroll-Sync und ein paar weitere Annehmlichkeiten, die nett sind, jedoch nicht zwingend gebraucht werden, um aus Blisk einen Nutzen zu ziehen. Premium bleibt also stets optional für diejenigen, die mit Blisk einfach etwas mehr anstellen wollen. Das finden wir fair.

Blisk

Polyplane (kostenpflichtige Empfehlung)

Polyplane hat eine 14-tägige Trial, kostet danach aber mindestens 9 Euro im Monat. Dafür besitzt der responsive Browser jede Menge Einstellungsmöglichkeiten und verschiedene Darstellungen, die im realen Einsatz sehr praktisch sein können. Auch das allgemeine Design (eigentlich weniger wichtig) gefällt. So hinterlässt das Tool einen guten ersten Eindruck.

Das wirklich Interessante bei Polyplane sind die Möglichkeiten. So ist es realisierbar, verschiedene Elemente in den unterschiedlichen Geräten gleichzeitig zu bearbeiten. Ein Live-Reloading ist ebenfalls mit an Board, es zeigt also Änderungen ohne einen echten Refresh an. So lässt sich alles ganz direkt über den Inspector testen und umsetzen. Einen Dark Mode gibt es natürlich ebenso.

Polyplane macht vieles richtig, anders lässt es sich gar nicht sagen. Allerdings kostet der Browser auch eine Kleinigkeit, kann sich also gar nicht erlauben, so viel falsch zu machen. Wir finden das Tool super, weil es sehr ausgereift und mächtig erscheint. Da gibt es kaum eine Funktion, die wir am Ende noch vermissen würden.

Polyplane

Responsively (kostenlos)

Kostenlos, jedoch nicht ganz so beeindruckend wie Blisk, erlaubt es Responsively, verschiedene Bildschirmgrößen auf einmal darzustellen. So lässt sich dann eine ganze Reihe von Geräten anzeigen, wobei der gesamte Workspace zur Seite gescrollt werden kann, sodass auch auf kleineren Displays die Darstellung vieler Geräte problemlos gelingt.

Allerdings geht es hier nur um die Größe selbst, was dann einfach nicht so ansprechend gelöst ist wie bei Blisk. Responsively ist dafür aber Open Source und kann komplett kostenlos genutzt werden, was natürlich praktisch ist. Uns gefällt der Responsive Browser sehr gut, aber eben nicht so gut wie Blisk, der ebenfalls kostenfrei verwendet werden kann.

Responsively

Sizzy (kostenpflichtig)

Das Tool wäre so gut, wäre es nicht unglaublich überladen. Dieser Satz trifft es vielleicht auf den punkt und kann beschreiben, was Sizzy zum Verhängnis wird. Die Aufmachung weiß zu begeistern und Sizzy funktioniert auch schön, wirkt aber vergleichsweise langsam und überladen. Das ist sicherlich Geschmackssache, aber wir mögen es als Entwickler lieber durchdacht und performant und das kann Sizzy uns in vielen Fällen leider nicht bieten.

Zu meckern gibt es abseits dessen aber dennoch nicht viel. Ein mächtiger Browser für Entwickler, der alle wichtigen Funktionen beinhaltet. Richtig gut ist dennoch nur die Tatsache, dass Sizzy alles exakt emuliert, wie es am Gerät aussieht. Browser und OS sehen dann ganz genau so aus wie auf dem jeweiligen Gerät. Auch Smartphones und Co werden als komplette Hardware angezeigt, was uns schon beim kostenlosen, aber weniger umfangreichen Blisk mehr als gut gefallen hat.

Vielleicht ist Sizzy das mächtigste aller hier vorgestellten Tools. Vielleicht mögen wir es aber auch gerade deshalb nicht ganz so gern wie die schlankeren Varianten. Wer Code schreibt und schnell etwas testen möchte, braucht nicht unzählige Funktionen, sondern nur wenige, auf die er sich dafür voll und ganz verlassen kann. Die immer bereit sind und mit keinerlei Ladezeiten oder Haklern im Workflow verbunden sind.

Sizzy

Es ist KEINE Frage der Features

Am Ende erfolgt die Auswahl, so sehen wir die Sache jedenfalls, nicht nach den angebotenen Features. Als Entwickler kommt es einfach nicht zwangsläufig darauf an, jede noch so kleine Funktion in einem Tool zu haben. Vielmehr geht es darum, wie eben schon erwähnt, schnell und direkt testen zu können. Das geht auch mit wenigen Funktionen, wenn es dafür zuverlässig und effektiv funktioniert.

Der responsive Browser muss also in erster Linie zum eigenen Workflow passen. Was benutze ich wirklich? Diese Frage solltet ihr euch stellen. Wo fühle ich mich am wohlsten, welches Tool startet am schnellsten, wie verwende ich es im Alltag?

Gut ist, dass sich auch die kostenpflichtigen responsive Browser testen lassen oder zumindest einen günstigen Account anbieten, sodass der einmalige Test nicht sonderlich schmerzt. Denn so viel wir euch auch über die Features und Möglichkeiten erzählen – am Ende kommt es eigentlich nur auf euch und eure Art zu arbeiten an. Probiert die verschiedenen Browser also durch und trefft dann eure eigene Wahl.

by A-DIGITAL one

Unsere Herzen schlagen Digital, unsere Projekte leben Digital, unsere Kunden lieben und schätzen Digital! Die einzigartige digitale Performance die wir seit 1999 an den Tag legen.

Mit unserem Team von über 25 Experten begleiten wir Sie auf Ihrem Weg der digitalen Transformation. Mit klaren Strategien, persönlicher Betreuung und exzellenter Ausführung entwickeln wir, innovativ und individuell, maßgeschneiderte digitale Lösungen, die performen und verkaufen können.