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:

Browser-Fenster minimieren

 

– das Browser-Fenster an der Breite oder Ecke ziehen:

Browser-Fenster 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:
device toolbar toggle goggle chrome

Ansicht bei Mozilla Firefox:
device toolbar toggle 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:
device toolbar google chrome

Ansicht bei Mozilla Firefox:
device toolbar 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).