Information 02
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.
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).
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.