Responsive Webdesign testen

In diesem Tutorial möchte ich dir zeigen, wie du deine Responsive-Webdesign-Seiten mittels Dreamweaver, XCODE oder Online-Tools testen kannst.

Hinweis: Dieses Tutorial ist die im Rahmen unseres Vertextlichungsaufrufs entstandene Textversion des zugehörigen Video-Trainings von Pascal Bajorat. Die Texte können daher durchaus auch einen umgangssprachlichen Stil aufweisen.

Wir empfehlen:
Dreamweaver-Video-Training
In diesem Tutorial möchte ich dir zeigen, wie du deine Webseiten in Hinblick auf Responsive Webdesign am besten testen kannst.

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.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training