Responsives Web-Design ist ein Thema mit vielen Facetten, das gleichzeitig immer wichtiger wird. Denn wer in Zeiten von Smartphones und Tablets weiterhin nur auf die klassische Webseiten-Version ohne weitere Anpassungen setzt, kann sich die Seite mittlerweile fast ganz sparen – zu groß ist der Frust vieler mobiler User, wenn die Navigation auf einer Seite zu einem wahren Kunststück wird. In diesem Sinne stellen wir Euch heute weitere Test-Tools für die Simulation von Internetseiten auf mobilen Geräten vor – dieses Mal speziell Anwendungen, die für die Prüfung von Responsive Web Designs erstellt wurden.
Inhaltsverzeichnis:
Responsive Design – spezielle Anforderungen
Zwei Tools, die für die Kontrolle von responsiven Designs gut funktionieren, sind der Responsinator und ein browser-basiertes Programm von Matt Kersley. Es sei in diesem Zusammenhang noch einmal darauf hingeweisen, dass diese beiden Programme nicht dazu dienen, gewöhnliche Internetseiten auf ihre Wiedergabe bei mobilen Browsern zu testen. Es findet keine Skalierung der Darstellung statt. Die Anwendungen sollen ausschließlich Entwicklern von Responsive Web Designs bei der Kontrolle ihrer Arbeit helfen, indem sie die Umstrukturierungen des Layouts auf den kleineren Displays simulieren.
Falls Du noch mehr Details zu diesem zugegeben nicht ganz einfachen Thema wissen möchtest, legen wir Dir unseren Text zum Thema Responsives Web Design ans Herz, der vor wenigen Tagen hier im Blog gelaufen ist.
Einfach und funktionabel: Der Responsinator
Der Responsinator bezieht sich in seiner Darstellung auf konkrete Geräte. Unter anderem auf das iPhone, das iPad, das Samsung Galaxy oder das Kindle Fire. Die Simulation wird in grauen Frames dargestellt, die eine generelle Anmutung des jeweiligen Gerätes wiedergeben soll, und sie ist nicht naturgetreu in der Größe. Das muss sie auch nicht, da sie lediglich zeigen soll, ob das Seitenlayout bei verändertem Format auch tatsächlich in der gewünschten Form umbricht.
Die Displayformate sind in Pixelgröße unter dem jeweiligen Geräte-Abbild angegeben. Im oberen linken Seitenrand kann dann die URL der gewünschten Seite eingetippt und mit dem Klick auf den GO-Button aktiviert werden.
Schade ist, dass der Programmierer eine beliebige Auswahl an Gerätetypen verwendet und eine Anpassung der Simulation auf ein gewünschtes Format nicht möglich ist. Unterm Strich ist der Responsinator aber dennoch ein elegantes, einfaches und funktionables Test-Tool.
Matt Kersley – die Minimal-Lösung
Eine ähnliche Programmierung findet sich auf der Webpage von Matt Kersley. Er hat seine Seite für die Simulation fester Display-Formate mit verschiedenen Pixelangaben ausgelegt. Dargestellt werden Bildschirme mit 230 x 320 Pixel, 320 x 480 Pixel, 480 x 640 Pixel und schließlich ein iPad Bildschirm in Hoch- und Querformat, allerdings noch nicht in der Retina-Auflösung.
Dieses Tool ist sicherlich nicht sehr umfangreich und bietet nur einen kleinen Einblick in die Welt der unterschiedlichen Bildschirmformate. Es hat aber einen besonderen Vorteil gegenüber den anderen Varianten. Zum einen kann man wählen, ob man sich lediglich die Bildschirmbreite oder das ganze Display anzeigen lässt und zum anderen sind die Simulationen nebeneinander und nicht untereinander angeordnet. Dadurch hast Du einen direkten Vergleich der verschiedenen Darstellungsvarianten und musst nicht permanent rauf- und runterscrollen.
Editoren für Betriebssysteme
Wer sich tiefer mit der Materie beschäftigt und mit der Programmierung gerätespezifischer Anwendung – sogenannter Apps – zu tun hat, der verwendet sicherlich einen Editor für das jeweilige mobile Betriebssystem. In diesen Programmpaketen, die meist einen sehr leistungsstarken Funktionsumfang bieten, findest Du auch immer eine Kontrollmöglichkeit für die Display-Ausgabe Deiner Programmierung.
Ich möchte an dieser Stelle einmal beispielhaft den Apple Editor Xcode zeigen, mit dem alle Apple Devices perfekt simuliert werden können – und das nicht nur für Apps, sondern auch für Web Designs.
Zu finden ist das Programm im App Store, wo Du es kostenlos downloaden kannst. Nach dem Öffnen gehst Du in der Menüleiste unter dem Reiter Xcode zu „Open Developer Tool“. Darin verbirgt sich unter anderem der iOS Simulator. Über das Menü „Hardware“ kannst Du Dir nun das gewünschte Apple Device aussuchen und nach einem Klick auf den Safari-Button im simulierten Bildschirm Deine gewünschte Testseite im Internet öffnen.
Die Simulation ist funktional absolut realistisch, sie kann in drei Größen auf dem Computerbildschirm skaliert werden und es ist ebenfalls möglich die Geräte um jeweils 90 Grad zu drehen. Alles funktioniert wie auf einem richtigen Apple iPhone oder iPad.
Solche Editoren gibt es auch für die anderen gängigen Betriebssysteme wie zum Beispiel Android und Windows.
Für den semiprofessionellen Anwender sind sie sicherlich nicht unbedingt empfehlenswert, weil sie viel Speicherplatz beanspruchen und oft zu komplex sind, um sie lediglich für die Display-Simulation zu benutzen. Andererseits bieten sie eben einen großen Leistungsumfang und dienen dem User gleich für mehrere Zwecke, wenn es denn von Nöten sein sollte.
Fazit
Aufgrund der zunehmenden Display Varianten ist es sicher ein großer Vorteil, dass Du die Programmierung Deiner Website auf alle möglichen Eventualitäten abklopfen kannst. Schließlich möchtest Du so viele User wie möglich erreichen.
Die meisten Prüfmöglichkeiten findest Du im Internet und kannst sie ohne umständliche Downloads nutzen. Andererseits kann es auch von Vorteil sein, wenn Du Dein Test-Tool auch ohne Internetzugang benutzen kannst. Das erhöht Deine Unabhängigkeit, ist aber bei manchen Programmen mit einer zeitaufwändigen Installation verbunden.
Der Komfort der einzelnen Varianten reicht von kleinen restriktiven, aber dafür übersichtlichen Angeboten bis hin zum Power-Feature für den Profi-Programmierer. Wie groß Dein Bedarf ist, weißt Du sicher selbst am besten und Du wählst Dir Dein Werkzeug dementsprechend aus.
Wir hoffen auf jeden Fall, wir haben Euch mit unserem Überblick neue Einblicke verschafft und freuen uns wie immer auf Feedback von Eurer Seite. Haben wir Euer favorisiertes Tool übersehen? Oder habt Ihr weitere Tipps für die anderen User?
