RWD testen
Der einfachste Weg, um Responsive Web Design (RWD) zu testen, ist das Browser-Fenster auf dem Desktop Computer (bzw. Laptop oder Notebook) in der Breite und Höhe anpassen:
– zuerst das Browser-Fenster verkleinern:
– das Browser-Fenster an der Breite oder Ecke ziehen:
Bei Veränderung der Breite bitte das Broswe-Fenster neu laden!
Moderne Web-Browser wie Google Chrome und Mozilla Firefox bieten jedoch Entwickler Tools, mit denen man genaue Bildschirmgrößen und auch bekannte Geräte (verschiedene Smartphones, Tablets, Notebooks) testen kann.
Man kann auch eigene benutzerdefinierte Geräte hinzufügen sowie bestimmen, ob das Gerät über eine Tastatur oder Touchscreen verfügt und dadurch noch besser die Berührung simulieren.
Unten finden Sie eine kurze Anleitung mit Screenshots zum Testen von Bildschirmgrößen im Web-Browser.
1) Google Chrome oder Mozilla Firefox öffnen
2) Entwicklertools mit den folgenden Tasten bzw. Tastenkombination öffnen:
F12
oder
Strg + ⇧ Umschalt/Shift + I
Alternativ mit der rechten Maustaste auf die Website klicken und dann auf (Element) Untersuchen.
3) In dem neuen Bereich rechts das kleine Icon mit zwei Rechtecken (Abbildung von Tablet und Smartphone) anklicken:
Ansicht bei Google Chrome:
Ansicht bei Mozilla Firefox:
4) Links wird der Website-Vorschau verkleinert und darüber findet man eine Menüleiste mit Optionen, u.a.:
- Geräte aus der Liste auswählen oder neue hinzufügen
- manuell die Größen (Breite × Höhe) angeben
- das Gerät-Vorschau umkippen (vertikal/horizontal)
Ansicht bei Google Chrome:
Ansicht bei Mozilla Firefox:
Es ist empfohlen das Browser-Fenster zu aktualisieren (neu laden), wenn man das Gerät, die Breite oder die Ausrichtung (hoch/quer) wechselt!
Die Taste um das Browser-Fenster zu aktualisieren ist:
F5
bzw. die Tastenkombination:
Strg + R
Auch direkt im Browser gibt es ein Icon um neu zu laden:
Testen von flüssigen Elementen in responsivem Webdesign ist nur auf einem größerem Bildschirm möglich.
„Flüssige“ Elemente in responsivem Webdesign an einer Muster-Seite testen – den Button unten anklicken und die Gerät-Vorschau an die Ecke ziehen (um die Höhe und Breite zu verändern) und das Verhalten der Elemente zu beobachten (funktioniert nur mit Browsern wie: Google Chrome, Mozilla Firefox, Opera, Edge).