Information 2

Responsive testen

Hier zwei 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 (1b) auf, bei Möglichkeit 2 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. Im Übrigen können manch andere Online-Tools oft eher verwirrend, das sie unzählige Geräte mit unterschiedlichen Abmessungen testen. Wie so oft, ist da weniger mehr, denn hat man das Prinzip einmal verstanden, kommt man mit den unten genannten Entwicklertools der Browser Internet Explorer und Firefox schneller zum Ziel.

1. Testen mittels Entwicklertools im IE

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.

1b. Testen mittels Entwicklertools im Firefox

Richtig gut gemacht, das Tool. Ansehen lohnt sich! 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 Qerformat). Auch wir testen mittlerweile nur noch hiermit.

2. Der schnelle Weg um Responsive zu testen

Noch schneller und einfacher zumindest für den ersten Überblick 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 vier-spaltig auf zwei-spaltig und dann auf ein-spaltig.

Responsive bei älteren Browsern testen

Per Entwicklertools im Internet Explorer

Ältere Browser - in der Regel betrifft dieses die älteren Versionen (7 und 8) des Browsers Internet Explorer - verstehen kein CSS3 und damit auch keine Media Queries (Bildschirmabfragen). Der Browser Internet-Explorer ab der Version 11 bietet aber 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 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.

Hinweis: Damit ältere Browserversionen trotzdem noch aussehen, arbeiten wir mit einer Browserweiche, die nur für den Internet Explorer entwickelt wurde, nämlich die sogenannnten "Conditional Comments". Damit wird bei Bedarf bei älteren IE-Browsern eine angepaßte CSS-Datei aufgerufen. Mit dieser gestalten wir eine Seite, die mit absoluten Pixelwerten (Breite ca. 960 Pixel) angelegt ist.

Weiter

Hier geht es zu Information 03.