Darstellungsprobleme auf mobilen Geräten

Bei der Darstellung von Webseiten auf Smartphones oder Tablets kann es vorkommen, dass einzelne Objekte nicht optimal skaliert werden.

Dieses Verhalten hängt sowohl von den Layout-Einstellungen als auch von den verwendeten Elementen ab.

Ursachen der fehlerhaften Skalierung

Allgemeine Skalierungseinstellungen
Unter Alles über den Baukasten finden Sie Tipps zu den empfohlenen Voreinstellungen, um Skalierungsfehlern vorzubeugen.

Unterschiedliche Wirkung je nach Element
Manche Elemente reagieren nicht gleich zuverlässig auf die Anpassung an kleine Bildschirme.

Besonders große Bilder oder sehr große Titeltexte können problematisch sein.

Beispiel

Sehr große Bilder erscheinen auf dem Desktop korrekt, auf dem Smartphone wird jedoch oft nur ein Ausschnitt angezeigt.
Sehr große Überschriften können auf mobilen Geräten dazu führen, dass nach jedem zweiten Buchstaben ein Zeilenumbruch erfolgt und der Text kaum noch lesbar ist.

Warum passiert das?

Große Bilder oder Überschriften werden am Desktop korrekt dargestellt, können auf Smartphones aber Probleme machen.
Der Grund: Sie sind häufig mit festen Größen statt mit flexiblen Angaben versehen.

Auf kleineren Bildschirmen passt sich das Layout dadurch nicht optimal an – Bilder werden beschnitten und Texte brechen unschön um.

Lösung über „Sichtbarkeit“

In solchen Fällen empfehlen wir, mit der Funktion Sichtbarkeit zu arbeiten:

Wählen Sie das betroffene Element aus, das in der Handy-Ansicht nicht gut dargestellt wird.
Stellen Sie rechts unten bei Sichtbarkeit ein, dass dieses Element in der Handy-Ansicht nicht sichtbar ist.
Fügen Sie das gleiche Element erneut ein – diesmal jedoch in einer für mobile Geräte angepassten, kleineren Version.
Aktivieren Sie bei diesem Element die Sichtbarkeit ausschließlich für die Handy-Ansicht.

So wird auf Desktop- und Tablet-Geräten das ursprüngliche Element angezeigt, während auf dem Smartphone die optimierte Version sichtbar ist.

Weitere Tipps bei Darstellungsproblemen

Es gibt auch hilfreiche Video-Anleitungen vom Entwickler des Baukastens:
Zur Video-Playlist

Darüber hinaus können auch Überlappungen einzelner Objekte auftreten. Prüfen Sie in solchen Fällen:

Sind die betroffenen Elemente als schwimmend eingestellt?
Überlappen sich die blauen Ränder bereits in anderen Ansichten?
Ist das gewählte Element grundsätzlich geeignet, um auf kleinen Bildschirmen korrekt dargestellt zu werden?

Mögliche Ursachen für Abweichungen zwischen Baukasten und veröffentlichter Webseite

Es gibt verschiedene Gründe, weshalb die Ansicht der Webseite von der Darstellung im Baukasten abweichen kann:

Änderungen wurden vorgenommen, aber noch nicht veröffentlicht.
Die Webseite wird mit einem Gerät betrachtet, das ein anderes Layout nutzt; dadurch kann sich der Inhalt verschieben.
Die Sichtbarkeit von Objekten (z. B. Bilder oder Texte) wurde so eingestellt, dass sie online nicht regulär angezeigt werden.
Übereinandergelegte Objekte verdecken sich gegenseitig, sobald die Webseite veröffentlicht wird.