Mobile Ansicht

Gerade in der heutigen Zeit wird die mobile Ansicht für Webseiten immer wichtiger. Um das Layout der Seiten entsprechend zu testen, kann die Bildschirmgröße auch am Desktop eingestellt werden. Die folgende Klick-Anleitung zeigt, wie man verschiedene Endgeräte simulieren kann.

Diese Simulation sollte nur als "erster Eindruck" genutzt werden und ersetzt kein finales Testing der jeweiligen Seite auf echten mobilen Endgeräten.

Einstellungen zur mobilen Ansicht in den Templates

Je nach Layout einer Seite, kann es sinnvoll sein, einzelne Module oder ganze Themenblöcke für die mobile Ansicht anzupassen. Dazu kann in den Templates eingestellt werden, wie es sich bei verschiedenen Bildschirmgröße verhalten soll und ob es angezeigt oder ausgeblendet werden soll.

Das Standard-Verhalten der Rahmenlayouts auf Tabletgröße ist hier beschrieben.

Untersuchen-Funktion Desktop

Um die Ansicht für verschiedene Geräte zu testen, kann die Bildschirmgröße angepasst werden.

Nachfolgend wird der Klickweg für Firefox, Chrome und Edge kurz beschrieben.

Firefox

Um die mobile Ansicht zu testen, muss die Seite über die Vorschau oder über das Front-End geöffnet sein.

Mit einem Rechtsklick auf die Seite das Pop-Up öffnen und "Untersuchen" auswählen

Es öffnet sich ein neues Dialogfenster. Hier können verschiedenen Funktionen und HTML-Codes geprüft werden. Durch Klicken auf die kleinen Symbole am rechten Rand des Fensters, öffnet sich die mobile Ansicht.

Nach dem Klick wechselt der Bildschirm auf die Größe eines Smartphones oder Tablets. Auf der Schaltfläche mit dem aktuellen Endgerät kann das Gerät auch gewechselt werden. Durch einen Klick auf den seitlichen Pfeil gelangt man in die Ansicht des gewählten Geräts im Querformat.

Sobald nun auf den sichtbaren Bereich der Seite geklickt wird, können Links genauso kontrolliert werden, wie in der Desktopansicht.

Um die mobile Ansicht zu verlassen, muss lediglich auf das X am rechten Bildschirmrand geklickt werden.

Chrome

Um die mobile Ansicht zu testen, muss die Seite über die Vorschau oder über das Front-End geöffnet sein.

Mit einem Rechtsklick auf die Seite das Pop-Up öffnen und "Untersuchen" auswählen.

Es öffnet am rechten Bildschirmrand eine neue Spalte. Hier können verschiedenen Funktionen und HTML-Codes geprüft werden. Durch Klicken auf die kleinen Symbole am linken Rand des Fensters, öffnet sich die mobile Ansicht.

Nach dem Klick wechselt der Bildschirm auf die Größe eines Smartphones oder Tablets. Auf der Schaltfläche mit dem aktuellen Endgerät kann das Gerät auch gewechselt werden. Durch einen Klick auf die Pfeile gelangt man in die Ansicht des gewählten Geräts im Querformat.

Sobald nun auf den sichtbaren Bereich der Seite geklickt wird, können Links genauso kontrolliert werden, wie in der Desktopansicht.

Um die mobile Ansicht zu verlassen, muss lediglich auf das untere X am rechten Bildschirmrand geklickt werden.

Edge

Um die mobile Ansicht zu testen, muss die Seite über die Vorschau oder über das Front-End geöffnet sein.

Mit einem Rechtsklick auf die Seite das Pop-Up öffnen und "Untersuchen" auswählen.

Es öffnet sich am rechten Bildschirmrand eine neue Info-Spalte. Hier können verschiedenen Funktionen und HTML-Codes geprüft werden. Durch Klicken auf die kleinen Symbole am linken Rand des Fensters, öffnet sich die mobile Ansicht.