Responsive Webdesign testen
Dazu gibt es verschiedene Möglichkeiten. Die allerbeste Möglichkeit steht uns allerdings in diesem Fall leider ausschließlich unter Mac OS X zur Verfügung. Das heißt, Windows- oder Linux-Nutzer sind hier außen vor.
Schritt 1
Fangen wir aber erst einmal bei den ganz allgemeinen Möglichkeiten an, die unter jedem System zur Verfügung stehen. Hierzu wechsle ich in den Safari und habe hier bereits die Test-Webseite aus einem anderen Workshop hier aus der Responsive-Webdesign-Reihe geöffnet:
http://cdn.webdesign-podcast.de/kaffee-am-meer/
Schritt 2
Zum einen können wir natürlich das Ganze ganz einfach testen, indem wir hier den Browser einfach zusammenziehen, die Browser-Größe quasi minimieren und …
damit testen, ob die Media Queries richtig funktionieren.
Schritt 3
Das ersetzt natürlich keinen Test auf dem richtigen Smartphone oder Tablet. Eine Möglichkeit, damit das Ganze zumindest von den Größen her passt, bietet zum Beispiel die Webseite http://testiphone.com/.
Schritt 4
Hier haben wir eine kleine iPhone-Nachbildung und darin ein iframe mit der entsprechenden Darstellung. Ich kann jetzt die URL kopieren, das Ganze aufrufen und dann sehen wir hier, wie das Ergebnis aussehen soll.
Schritt 5
Das hilft an der Stelle beim Testen die Darstellung nachzuvollziehen. Ersetzt aber auch an der Stelle kein richtiges Testgerät wie zum Beispiel das iPhone.
Eine weitere und meiner Meinung nach die beste Lösung, um das Ganze einfach durchzuprobieren, bietet an dieser Stelle der Dreamweaver von Adobe.
Schritt 6
Hier haben wir die Möglichkeit, verschiedene Darstellungen auszuwählen. In der Entwurfsansicht im oberen Bereich gibt es die Möglichkeit, sich mit der Multi-Screen-Vorschau …
… verschiedene Varianten anzeigen zu lassen.
Schritt 7
Hier haben wir zum Beispiel ein ganz normales Handy.
Schritt 8
Hier ein Tablet.
Schritt 9
Und hier die Desktop-Anzeige.
Schritt 10
Wir können es natürlich auch spezifischer machen und hier direkt Größen auswählen.
480 x 800 Smartphone
Zum Beispiel hier hätten wir es in der Form.
Schritt 11
Hier unten können wir auch alles noch mal durchklicken und können quasi hier direkt im Dreamweaver, in dem wir ja in dem Fall auch entwickeln, das Ganze durchspielen und testen.
Schritt 12
Das dürfte für die meisten an der Stelle die beste Lösung sein, weil wir einfach entwickeln können, gleichzeitig testen und vor allen Dingen auch vom eigentlichen Workflow und der Darstellung die besten Möglichkeiten zum Debuggen und zum Anschauen haben.
Schritt 13
Wer jetzt an der Stelle unter Mac OS X arbeitet, für diejenigen gibt es an der Stelle ein bombastisches Tool, mit dem man wirklich testen kann wie auf einem richtigen Gerät.
Voraussetzung dafür ist aktuell Mac OS X Lion oder neuer und wir benötigen an der Stelle den Mac App Store.
Schritt 14
Es geht auch mit älteren Systemen, dann muss man die Software, die ich euch gleich zeige, allerdings von anderen Quellen beziehen. Wir gehen an der Stelle von Lion aus und dem Mac App Store.
In der Suche geben wir „xcode“ ein.
Schritt 15
Xcode ist die Entwicklungsumgebung unter Mac OS X, die direkt von Apple zur Verfügung gestellt wird, und zwar kostenlos. Hier haben wir sie:
Schritt 16
Ich habe es bereits installiert, deswegen ist der Button hier ausgegraut. Hier kann man es beziehen. Der Download selbst ist nicht gerade klein, es sind 1,43 GB.
Schritt 17
Ich öffne jetzt einfach mal die Software und das hier ist der Startbildschirm von Xcode.
Schritt 18
Hier erstelle ich ein neues Projekt.
Was ich hier auswähle, ist vollkommen egal.
Schritt 19
Das Programm ist eigentlich da, um Mac-OS-X-Apps zu schreiben oder iPhone-Apps, und zwar native, nicht Web-Apps.
Schritt 20
Das heißt, da wir das an der Stelle gar nicht machen wollen, ist es vollkommen egal, was wir jetzt hier eintragen oder auswählen.
Schritt 21
Wir wollen hier letztendlich nur an einen kleinen Part dieser Software ran, und zwar den Software Simulator. Wenn wir das Ganze hier mit einem Testprojekt gestartet haben, ist relativ viel zu sehen, das für uns an dieser Stelle komplett unerheblich ist. Interessant ist der Bereich hier oben.
Schritt 22
Hier haben wir einen iPad- und iPhone Simulator und können das Ganze jetzt mit Run starten.
Schritt 23
Dann bekommen wir den entsprechenden Simulator.
Schritt 24
Wir kommen jetzt in die Test-App rein, die ich gerade erstellt habe. Wir gehen über den Home-Button raus und …
… öffnen an der Stelle den Safari, wie auf unserem Handy auch.
Schritt 25
Hier können wir nun testen. Die Darstellung ist hier zu 100% garantiert, genauso wie auf einem richtigen iPhone auch.
Schritt 26
Das funktioniert natürlich auch mit dem iPad Simulator.
An der Stelle wird das Ganze jetzt nicht so dargestellt, wie wir es normalerweise hätten. Und zwar dadurch, dass ich jetzt hier mit einer relativ kleinen Auflösung aufnehme, fehlt hier quasi der Rest von dem Simulator wie bei dem iPhone.
Bei dem iPhone hatten wir noch den eigentlichen Rahmen drum herum und der fehlt uns hier an dieser Stelle. Das musst du einfach mal ausprobieren, wenn du quasi die Auflösung höher hast, das ist jetzt bei mir hier aufnahme- und auflösungsbedingt, dass es nicht direkt angezeigt wird.
Schritt 27
Soviel also zum Thema Testen von Responsive Webdesign. Ein direktes Beispiel, wie wir das Ganze debuggen können, gibt es auch im vierten Teil von der Erstellung zu Kaffee am Meer.
