Mobile Darstel­lungen im Browser - Responsive Optimierung

Beitrag vom Mai 2023 | Autor Bettina Blaschek

Wie kann ich die mobilen Ansichten meiner Website im Browser simulieren?

Sie haben Ihre neue Website fertig gestaltet und stehen jetzt vor der Heraus­forderung, diese auch für die mobilen Darstellungen verschiedenster Endgeräte anzupassen.

Mit Browsern können Sie die ver­schiedensten responsive Darstellungen Ihrer Website simulieren und überprüfen. So sehen Sie etwa, wo noch mobile Anpassungen hinsichtlich Layout und Styling möglich sind. Wenn beispiels­weise eine Überschrift über den Bildschirm­rand hinaus rutscht oder Abstände nicht optimal passen, können Sie diese leicht korrigieren. Prinzipiell sind die Tools in beiden Browsern sehr ähnlich. Sie müssen sich nur entscheiden, mit welchem Browser Sie lieber arbeiten. Wir erklären Ihnen im Beitrag die Möglich­keiten in den Browsern Mozilla Firefox & Google Chrome.

Mobile Ansichten im Browser Mozilla Firefox

  • Besuchen Sie im Mozilla Firefox jene Website, die Sie überprüfen möchten.
  • Öffnen Sie mit Klick auf die rechte Maustaste in Ihrem Browser­fenster das Dropdown-Menü.
  • Wählen Sie im Dropdown-Menü "Untersuchen" aus und es öffnet sich eine neue Sidebar. Je nach Einstellung befindet sich diese im Fenster rechts, links, unten oder öffnet sich als neues Fenster.
Grafik wie das Tool Untersuchen im Mozilla Firefox aktiviert wird
Mozilla Firefox: "Untersuchen"
  • Klicken Sie nun innerhalb der Sidebar rechts oben auf "Bildschirm­größen testen". Es öffnet sich eine neue Bearbeitungs­leiste.
Grafik über Darstellung der Bildschirmgrößen im Mozilla Firefox
Mozilla Firefox: Bildschirmgrößen testen

Mobile Ansichten im Google Chrome

  • Besuchen Sie im Google Chrome jene Website, die Sie überprüfen möchten.
  • Klicken Sie im Browser­fenster auf die rechte Maustaste und es öffnet sich das Dropdown-Menü.
  • Öffnen Sie die Sidebar mit Klick auf "Untersuchen" im Dropdown-Menü. Je nach Einstellung befindet sich die Sidebar im Fenster rechts, links, unten oder öffnet sich als neues Fenster.
Grafik wie das Tool Untersuchen im Google Chrome aktiviert wird
Google Chrome: "Untersuchen"
  • Klicken Sie nun innerhalb der Untersuchen-Toolbar oben links auf "Geräte­symbol­leiste ein- und ausblenden" und öffnen Sie damit die neue Bearbeitungs­leiste.
Grafik über Darstellung der Bildschirmgrößen im Google Chrome
Google Chrome: Gerätesymbolleiste ein- und ausblenden

Auflösung mobiler Endgeräte im Browser darstellen

Sie können in der Bearbeitungs­leiste...

  • ... verschiedene Endgeräte auswählen und somit die mobilen Ansichten Ihrer Website simulieren.
  • ... die Bildschirm­größen für Geräte anpassen oder ändern.
  • ... die Bildschirm­darstellung in Hoch- oder Quer­format ausrichten.

Mit "Liste anpassen" im Mozilla Firefox oder "Bearbeiten" im Google Chrome können Sie benutzer­spezifische Geräte zu Ihrer Liste hinzu­fügen, gängige Geräte sind bereits vorhanden.

Grafik wie die Barbeitungsleise im Mozilla Firefox aussieht
Mozilla Firefox: Mobile Endgeräte zum Simulieren der Darstellung auswählen
Grafik wie die Barbeitungsleise im Google Chrome aussieht
Google Chrome: Mobile Endgeräte zum Simulieren der Darstellung auswählen

Kann man die Dar­stellung der Website auf unter­schiedlichen mobilen Geräten im Browser prüfen?

Ja. In den Geräte­einstellungen finden Sie bereits eine Reihe von gängigen Geräten, die Sie auswählen können.

Sie können aber auch benutzer­definierte Geräte hinzu­fügen und die Bildschirm­größe in Pixel anpassen.

  • Im Mozilla Firefox legen Sie diese unter "Benutzer­definiertes Gerät hinzufügen..." an und finden diese dann in der Spalte "Custom".
  • Im Google Chrome legen Sie neue Geräte unter "Geräte" "Benutzer­definiertes Gerät hinzu­fügen..." an.
Grafik wie eine neue Bildschirmgröße im Mozilla Firefox hinzugefügt werden kann
Mozilla Firefox: Geräteeinstellungen
Grafik wie eine neue Bildschirmgröße im Google Chrome hinzugefügt werden kann
Google Chrome: Geräteeinstellungen

Einige Tipps für die optimale, responsive Website-Gestaltung

Die mobile Optimierung einer Website ist deshalb so wichtig, weil die Zugriffe auf Websites über mobile End­geräte sehr hoch ist. Damit Ihre Website auf allen End­geräten gut aussieht, beachten Sie folgende Tipps:

  • Bedenken Sie bereits bei der Planung Ihres Contents die unter­schiedlichen Auflösungen der mobilen Geräte.
  • Prüfen & optimieren Sie jede Seite Ihrer Website zumindest für die gängigen mobilen End­geräte.
  • Planen Sie für die Prüfung und Optimierung ausreichend Zeit in der Web-Redaktion ein.

Icon Smartphone mit Apps Sie möchten Unter­stützung bei der mobilen Optimierung?

Eine professionelle Website muss auf allen End­geräten gut aussehen. Wie die Prüfung erfolgen kann, haben wir Ihnen in diesem Beitrag erklärt. Bei weiteren Fragen melden Sie sich bei uns. Wir helfen Ihnen gerne weiter.

Termin vereinbaren