Mobile Darstellungen im Browser - Responsive Optimierung
Wie kann ich die mobilen Ansichten meiner Website im Browser simulieren?
Sie haben Ihre neue Website fertig gestaltet und stehen jetzt vor der Herausforderung, diese auch für die mobilen Darstellungen verschiedenster Endgeräte anzupassen.
Mit Browsern können Sie die verschiedensten responsive Darstellungen Ihrer Website simulieren und überprüfen. So sehen Sie etwa, wo noch mobile Anpassungen hinsichtlich Layout und Styling möglich sind. Wenn beispielsweise eine Überschrift über den Bildschirmrand 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öglichkeiten in den Browsern Mozilla Firefox & Google Chrome.
- wie Sie Auflösung mobiler Endgeräte einstellen.
- die Einstellung individueller mobiler Geräte.
- Tipps zur responsiv Optimierung.
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 Browserfenster 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.
- Klicken Sie nun innerhalb der Sidebar rechts oben auf "Bildschirmgrößen testen". Es öffnet sich eine neue Bearbeitungsleiste.
Mobile Ansichten im Google Chrome
- Besuchen Sie im Google Chrome jene Website, die Sie überprüfen möchten.
- Klicken Sie im Browserfenster 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.
- Klicken Sie nun innerhalb der Untersuchen-Toolbar oben links auf "Gerätesymbolleiste ein- und ausblenden" und öffnen Sie damit die neue Bearbeitungsleiste.
Auflösung mobiler Endgeräte im Browser darstellen
Sie können in der Bearbeitungsleiste...
- ... verschiedene Endgeräte auswählen und somit die mobilen Ansichten Ihrer Website simulieren.
- ... die Bildschirmgrößen für Geräte anpassen oder ändern.
- ... die Bildschirmdarstellung in Hoch- oder Querformat ausrichten.
Mit "Liste anpassen" im Mozilla Firefox oder "Bearbeiten" im Google Chrome können Sie benutzerspezifische Geräte zu Ihrer Liste hinzufügen, gängige Geräte sind bereits vorhanden.
Kann man die Darstellung der Website auf unterschiedlichen mobilen Geräten im Browser prüfen?
Ja. In den Geräteeinstellungen finden Sie bereits eine Reihe von gängigen Geräten, die Sie auswählen können. Sie können aber auch benutzerdefinierte Geräte hinzufügen und die Bildschirmgröße in Pixel anpassen.
- Im Mozilla Firefox legen Sie diese unter "Benutzerdefiniertes Gerät hinzufügen..." an und finden diese dann in der Spalte "Custom".
- Im Google Chrome legen Sie neue Geräte unter "Geräte" "Benutzerdefiniertes Gerät hinzufügen..." an.
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 Endgeräte sehr hoch ist. Damit Ihre Website auf allen Endgeräten gut aussieht, beachten Sie folgende Tipps:
- Bedenken Sie bereits bei der Planung Ihres Contents die unterschiedlichen Auflösungen der mobilen Geräte.
- Prüfen & optimieren Sie jede Seite Ihrer Website zumindest für die gängigen mobilen Endgeräte.
- Planen Sie für die Prüfung und Optimierung ausreichend Zeit in der Web-Redaktion ein.
Sie möchten Unterstützung bei der mobilen Optimierung?
Eine professionelle Website muss auf allen Endgerä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.