Die Seite EINS

Bilder Karusell

Hier ein Bild-Slider nur mit CSS. Klicke rechts oder links auf das nur wenig sichtbare nächste Bild um es in die Mitte zu stellen.

Darstellung Testen mit Firefox-Tools

Das Firefox-Tool. Wir selber testen übrigens auch damit. Klicken Sie im Menü des Browsers Firefox den Button Entwicklerwerkzeuge. Wählen Sie dann die Option "Bildschirmgrössen testen".

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

Der schnelle Weg

Schneller und einfacher, aber eher für einen ersten Überblick gedacht, testen Sie wie folgt: Wir gehen davon aus, dass Sie Ihre grösste 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össe 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 grosser Vorteil um mal direkt zu sehen, welche aktuellen CSS-Eigenschaften in der jeweiligen IE-Version greifen.

Unter Win 10 heisst der Browser Microsoft Edge, auch da ist ein Entwicklertools vorhanden. im Edge-Browser das Icon drei Punkte anklicken. Jetzt können Sie im Menü den Reiter "Mit Internet Explorer öffnen" aufrufen.