Responsive testen

Wie testet man?

Hier drei gute Möglichkeiten ein responsives Layout zu testen. Laden Sie zunächst wie gewohnt unsere Vorlage ganz normal herunter, entpacken die zip-Datei und rufen dann die Startdatei index.html in ihrem Browser auf. Bei nachfolgend genannter Möglichkeit [1]) rufen Sie den Browser Internet Explorer bzw. Firefox [2] auf, bei der dritten Möglichkeit [3] ist die Browserwahl egal, es funktioniert in jedem Browser, nehmen Sie Ihren Lieblingsbrowser.

Und zwar soll mit sogenannten Entwicklertools gearbeitet werden. Das Gute ist, der Browser hat diese gleich mit an Bord, man braucht also nicht auf externe Tools zurückgreifen.

[1] Testen mit IE-Tools

Der Browser Internet-Explorer ab der Version 11 hat Entwicklertools an Bord. 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.

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.

[2] Testen mit Firefox-Tools

Richtig gut gemacht, das Tool. Wir selber testen übrigens auch damit. Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrößen testen".

Toll ist bei diesem Testwerkzeug, das sich die jeweilige Auflösung leicht per Klick (Button mit kleinem Pfeil) drehen läßt. So hat man einen guten Überblick über den Portrait- und Landscapemodus, um das Verhalten von Smartphone und Tablet zu prüfen (Hoch-und Querformat).

Mittlerweile hat Firefox diesen Tester um noch eine weitere Option erweitert, nämlich die Möglichkeit verschiedene Marken-Geräte zu testen. Das kann aber auch leicht verwirrend sein, da es ja auch etliche Zwischengrößen bei den Geräten gibt und ja auch niemand wohl bei jeder wechselnden Testauflösung alle Geräte durchklicken möchte. Im Übrigen sind unsere Templates so konstruiert, das diese sich auch an Zwischengrößen anpassen.

Eine Möglichkeit es übersichtlicher zu gestalten ist, das Sie im Firefox-Tester unter 'Liste anpassen' eigene Geräte-Profile anlegen und zwar Standard-Größen (die ja auch jeweils umschaltbar sind in Hochkant und Quer-Modus) , auf jeden Fall: 320x480, 360x640, 600x800, 768x1024. Unter der Rubrik 'Custom' sehen Sie dann Ihre Profile. Hier ein Foto, welches zeigt, wie es aussehen könnte.

[3] Der schnelle Weg

Noch schneller und einfacher, aber eher für einen ersten allgemeinen Überblick gedacht, testen Sie wie folgt: Wir gehen davon aus, daß Sie Ihre größte Bildschirmauflösung auf dem Desktop-PC eingestellt haben.

Minimieren Sie nun das Browser-Fenster in Ihrem Lieblingsbrowser und ziehen Sie dann das Browser-Fenster mit gedrückt gehaltener Maustaste ganz langsam von rechts nach links in der Breite immer schmaler zusammen und dann wieder umgekehrt von links nach rechts wieder ganz auf.

Achten Sie darauf, wann das Layout umbricht, zum Beispiel von zwei-spaltig auf ein-spaltig oder Objekte sich in der Größe verändern.

 

 

Ältere Browser testen

Per Entwicklertools im Internet Explorer

Die technische Entwicklung schreitet immer mehr voran. So möchte man vielleicht gerne sehen, wie die Webseite in älteren Versionen des Browsers Internet Explorer aussieht. So geht es: Der Browser Internet-Explorer ab der Version 11 bietet die ausgezeichnete 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 im genannten Browser bei eingeschalteter Menüleiste unter Extras diese Tools anklicken. Beim Reiter "Emulation" befindet sich unter Modus das Feld Dokumentmodus. Dort können Sie gezielt alle Versionen des Internet Explorers prüfen. Auch ein großer Vorteil um mal direkt zu sehen, welche aktuellen CSS-Eigenschaften in der jeweiligen IE-Version greifen.

Hinweis: Unter Win 10 heißt der Browser Microsoft Edge, dort sind zwar auch die Entwicklertools vorhanden, jedoch nicht mehr der IE-Versionen-Tester. Um auch dort testen zu können, klicken Sie im Edge-Browser das Icon mit den drei Punkten (MEHR). Jetzt können Sie im Menü den Reiter "Mit Internet Explorer öffnen" aufrufen.