Responsive testen

Ein responsives Layout testen. Laden Sie zunächst wie gewohnt unsere Vorlage ganz normal herunter, entpacken die zip-Datei und rufen dann die Startdatei index.php in ihrem Browser auf. Bei nachfolgend genannter Möglichkeit (1a) rufen Sie den Browser Internet Explorer bzw. Firefox (1b) auf, bei Möglichkeit 1c ist die Browserwahl egal, es funktioniert in jedem Browser, nehmen Sie Ihren Lieblingsbrowser.

1a. Testen mittels Entwicklertools im IE

Der Internet-Explorer ab der Version 11 hat Entwicklertools an Bord. Zum Aufrufen klicken Sie auf der Tastatur die Funktionstaste F12 oder bei eingeschalteter Menüleiste unter Extras dieses Tool anklicken. Im eingeschalteten Entwicklertools-Bereich wählen Sie dann den Reiter "Emulation". Dann können Sie unter Anzeige im Feld "Auflösung" unterschiedliche Auflösungen anklicken.

Hinweis: Unter Win10 heisst der Browser Microsoft Edge, klicken Sie im Edge-Browser das Icon mit den drei Punkten an. Jetzt können Sie im Menü den Reiter "Mit Internet Explorer öffnen" aufrufen.

1b. Testen mittels Entwicklertools im Firefox

Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrössen testen". Toll ist dass sich die Auflösung leicht per Klick (Button mit kleinem Pfeil) drehen lässt. So hat man einen guten überblick über den Portrait- und Landscapemodus, um die Ansicht von Smartphone und Tablet zu prüfen (Hoch-und Querformat).

1c. Der schnelle Weg um Responsive zu testen

Für einen ersten überblick minimieren Sie das Browser-Fenster und ziehen es bei gedrückt gehaltener Maustaste langsam von rechts nach links in der Breite immer schmaler zusammen und dann wieder umgekehrt von links nach rechts wieder auf. Achten Sie auf die Ansicht, zum Beispiel von zwei-spaltig auf ein-spaltig oder Objekte die sich in der Grösse verändern.

Responsive bei älteren Browsern testen

Per Entwicklertools im Internet Explorer

Internet-Explorer ab der Version 11 bietet die Möglichkeit, per sogenannter Entwicklertools, diese älteren Versionen zu testen. Zum Aufrufen klicken Sie auf Ihrer Tastatur die Funktionstaste F12. Alternativ dazu können Sie auch bei eingeschalteter Menüleiste unter Extras diese Tools anklicken. Beim Reiter "Emulation" befindet sich unter Modus das Feld Dokumentmodus. Dort können Sie gezielt auch alle Versionen des Internet Explorers prüfen. Auch ein grosser Vorteil um mal direkt zu sehen, welche aktuellen CSS-Eigenschaften in der jeweiligen IE-Version greifen.