Bei der Gestaltung der eigenen Homepage werden die meisten Menschen zum Perfektionisten. Schließlich präsentiert man sich mit ihr einem Millionenpublikum. Jeder Internetbesucher kann sich – oft im wahrsten Sinne des Wortes – auf Deiner Seite ein Bild von Dir machen. Und da möchte sich jeder nur von der besten Seite zeigen.
Doch durch die steigende Zahl mobiler Endgeräte ist das Ergebnis des Web Designs kaum noch verlässlich vorhersehbar. Viele unterschiedliche Displayformate erschweren den Gestaltern von Internetseiten die Arbeit, weil jede Bildschirmgröße und –auflösung eine andere Wiedergabe erzeugt. Über die Möglichkeit des Responsive Web Designs, dem reaktionsfähigen Seitenlayout haben wir bereits in diesem Blog berichtet. Damit kann man eine Menge auftauchender Probleme elegant umschiffen.
… Kontrolle ist besser
Doch in jedem Fall ist es wichtig, dass man seine Arbeit an der Internetseite während des Entstehungsprozesses verlässlich überprüfen kann. Dafür gibt es verschiedene Hilfsprogramme, die das Aussehen der Website auf den unterschiedlichen Bildschirmen simulieren und somit eine gute Kontrolle bieten.
Viele der Anwendungen arbeiten internetbasiert, was den Vorteil hat, dass Du Dir nicht umständlich Programme auf den Computer laden musst. Wichtig bei der Auswahl der Software ist, dass Du unterscheidest zwischen Anwendungen, die lediglich einen verkleinerten Bildschirmausschnitt liefern, und denen die auch die voraussichtliche Skalierung der Seiten auf dem jeweiligen Endgerät simulieren. Hier trennt sich schnell die Spreu vom Weizen.
Mobile Phone Emulator
Ein Beispiel für eine sehr realitätsnahe Nachahmung liefert der Mobile Phone Emulator. Wie sein Name schon sagt, beschränkt sich dieses Programm auf die Simulation von Telefon-Displays. Zur Verfügung stehen drei Apple-Modelle, zwei von HTC, zwei von Samsung und jeweils ein Gerät von LG und Blackberry. Die Handhabung ist sehr einfach und übersichtlich. Wie bei allen anderen Anwendungen sollten Dir allerdings die wichtigsten Fachbegriffe zu diesem Thema in englischer Sprache geläufig sein, da es keine deutschsprachigen Software-Varianten in diesem Bereich gibt. Für den Mobile Phone Emulator geht auch Französisch.
Beim Start der Session wirst Du zum Format des eigenen Computerbildschirms befragt. Das wird benötigt, um eine Simulation in realer Größe erstellen zu können. Die Software errechnet anhand der Bildschirmgröße und der Auflösung Deines Displays in welchem Format sie das simulierte Gerät darstellen muss, um ein genaues Abbild schaffen zu können. Nachdem das erledigt ist, kann es sofort losgehen.
Auf der rechten Seite befindet sich die Eingabemaske, die Du beliebig auf dem Bildschirm verschieben kannst. Im zweiten Frame dieses Menüs wählst Du nun das Smartphone aus, das simuliert werden soll, wobei Du Dich auch für das Quer- oder Hochformat entscheiden kannst.
Eine weitere Variable ist die Auswahl zwischen einer realen und einer dem Bildschirm angepassten Darstellung des Gerätes. Somit erhältst Du einen Eindruck, wie die tatsächliche Wiedergabe auf dem jeweiligen Smartphone wirkt. Du kannst Dir aber über die „screen“-Funktion die Simulation auch vergrößern lassen, um besser einzelne Details zu begutachten.
Im dritten Menü-Rahmen findest Du die Eingabemöglichkeit der gewünschten URL zur Überprüfung der jeweiligen Website. Einfach die betreffende Adresse eingeben und schon erhältst Du die passende Emulation.
Der Viewport Resizer
Dieses Programm erlaubt Dir eine Vielzahl von Testmöglichkeiten und vor allem eine individuelle Konfiguration der Varianten. Zur Nutzung dieses browser-basierten Tools ziehst Du Dir wie auf der Seite gezeigt ein Bookmark in Deine Symbolleiste. Danach gibst Du einfach die zu testende Seite normal im Browser ein und klickst dann auf den Resizer-Button. Daraufhin klappt sich eine schwarze Toolbar aus, auf der Du verschiedene Geräte zur Auswahl findest. Großer Vorteil dieser Software ist, dass sie neben Smartphones auch Tablets, Notebooks und sogar Desktop-Bildschirme simuliert.
Je nachdem welches Device Du nun auswählst, stellt der Reziser die Seite in dem gewünschten Format dar. Mit einem weiteren Klick auf das jeweilige Gerät in der Toolbar kannst Du zwischen horizontaler und vertikaler Ansicht wechseln. Wenn Du in der Programmierung eine Änderung vornimmst, kannst Du diese direkt kontrollieren. Dazu drückst Du die Kreispfeile auf der rechten Seite der Funktionsleiste. Auf diese Weise erhältst Du einen Refresh, der sich nur auf den simulierten Bildschirm bezieht.
Ein besonders komfortables Feature des Viewport Resizers ist die Möglichkeit der Konfiguration einer eigenen benutzerdefinierten Toolleiste. Im unteren Bereich des Portals findest Du eine große Auswahl an aktuellen Geräten, vom 240 x 240 Pixel-Handy-Display bis zum Amazon Kindle Fire HD. Hier kannst Du die für Dich relevanten Devices durch Anklicken markieren und ein eigenes Bookmark erstellen.
Ein weiteres Plus ist die Möglichkeit, mit der Maus den Bildschirmausschnitt individuell zu verändern. Unabhängig davon, welche Konfiguration Du in der Werkzeugleiste ausgewählt hast, kannst Du so Zwischenformate kreieren. Dazu verschiebst Du einfach den Rahmen an den grauen Markierungen in der Ecke oder an der Seite.
Die Reziser Toolbar lässt sich einfach über das Kreuz-Symbol auf der rechten Seite schließen und Du bekommst wieder die normale Darstellung Deines Browsers zu sehen.
Firefox intern
Speziell für den Firefox Web Browser gibt es den sogenannten Web Developer, der als Add-On ebenfalls mit einer eigenen Toolbar installiert werden kann. Hierbei handelt es sich um ein mächtiges Werkzeug, das eine Vielzahl an Optionen für den Internet-Programmierer enthält. Mit der Firefox web Browser Toolbar stehen Dir alle erdenklichen Kontrollfunktionen zur Inspektion Deiner fertigen Programmierung zur Verfügung. Du kannst zum Beispiel durch die Bearbeitung des CCS- oder des HTML-Codes simultan die Veränderungen an der Seite beobachten, ohne die Editierung tatsächlich an den Daten auf dem Server vorzunehmen. Es ist möglich die Größen der Bilddaten anzeigen zu lassen, alle verwendeten Farben zu exzerpieren, defekte Images aufzuspüren und vieles mehr.
Für unser Vorhaben, das Layoutverhalten einer bestimmten Website auf unterschiedlichen Displays zu beobachten, gibt es ebenfalls ein Tool. Unter dem Reiter „Rezise“ findest Du ganz am Ende der Liste die Funktion „View Responsive Layouts“. Diese Funktion bietet Dir wieder die Übersicht über verschiedene Display-Formate allerdings mit zwei Unterschieden zu den bisherigen Programmen.
Zum einen werden die Bildschirmausgaben hierbei nicht nach Geräten, sondern nach Auflösungs-Varianten sortiert. 320 x 480 Pixel, 600 x 800 Pixel und 768 x 1024 Pixel stehen in Portait- oder Landscape-Wiedergabe zur Verfügung.
Der zweite Unterschied ist, dass es sich beim Web Developer um eine Anzeige speziell für Responsive Layouts handelt. Das bedeutet, dass mit diesem Tool idealerweise eine Website überprüft wird, die bereits auf ihre Reaktionsfähigkeit bei veränderten Displayformaten optimiert wurde. Es simuliert nicht das Verhalten starrer Layouts.
Soweit der erste Teil zum Thema Test-Tools – in Teil zwei folgt ein Überblick über Software für den Test von Responsive Web Design und Profi-Programme für App-Entwickler.
