Alle Webador-Websites verwenden ein responsives Design, was bedeutet, dass sich die Website automatisch an die Bildschirmgröße des verwendeten Geräts anpasst - egal, ob es sich um einen PC, einen Laptop, ein Tablet oder ein Mobilgerät handelt.
Es kann jedoch eine Herausforderung sein, sowohl die Desktopversion als auch die mobile Version deiner Website richtig aussehen zu lassen.
Hier sind daher hier einige Tipps für dich:
1. Spalten
Mit dem Spalten-Element kann man den Inhalt trennen, wenn mehrere Elemente nebeneinander angeordnet sind. Diese Spalten werden in der mobilen Ansicht übereinander platziert.
Beim Platzieren des Spalten-Elements auf der Website werden automatisch 3 Spalten erstellt, wie unten gezeigt. Durch Ziehen und Ablegen kannst du andere Elemente in deine Spalten ziehen, um Inhalte hinzuzufügen.
Ein häufiger Fehler ist die Platzierung jedes Inhaltselements in einem eigenen Spalten-Element, wodurch 3 vertikale und 3 horizontale Spalten auf einmal erzeugt werden, was etwa so aussieht:
und so sieht es auf dem Mobiltelefon aus:
⚠ Fazit: Wenn du also eine Spalte mit Inhalt füllst, denke daran, alle Inhaltselemente innerhalb des gleichen, einzelnen Spalten-Elements zu platzieren, wie unten gezeigt.
Mobile Ansicht:
2. Tabellen
Das Tabellen-Element ist ideal für das Hinzufügen von Informationen mit mehreren Zeilen und Spalten, wie z. B. Menüs und Öffnungszeiten. Das Spalten-Element ist aufgrund der Art und Weise, wie es den Inhalt anzeigt, dafür nicht geeignet:
Mobilansicht mit Spalten-Element:
Wie der Screenshot zeigt, führt die Verwendung des Spalten-Elements zu einer Liste von Tagen, gefolgt von einer Liste von Uhrzeiten, was für die Anzeige von Öffnungszeiten nicht gerade ideal ist.
⚠ Fazit: Mit dem Tabellen-Element werden deine Öffnungszeiten wie vorgesehen auf allen Geräten, einschließlich Computern, angezeigt:
und auf Mobilgeräten:
Weiße Fläche
Um in der mobilen Ansicht Platz zwischen den Spalten zu schaffen, kannst du das Element Weiße Fläche verwenden. Dies funktioniert nur, wenn du dieses Element unter jeder einzelnen Spalte platzieren, nicht unter dem Spalten-Element als Ganzes:
So sieht es auf dem Mobiltelefon aus:
⚠ Fazit: Das folgende Beispiel zeigt das Ergebnis, wenn das Element Weiße Fläche unter jeder einzelnen Spalte platziert wird.
Hier siehst du, wie das auf einem Computer aussieht:
und so sieht es auf dem Handy mit dem Element Weiße Fläche zwischen allen Spalten aus:
Spalten-Ausrichtung
Wenn du auf deiner Website Spalten verwendest, solltest du die Ausrichtung für die mobile Ansicht im Auge behalten.
Ein häufiger Fehler ist die Ausrichtung von Elementen in der linken Spalte nach links, von Elementen in der mittleren Spalte in die Mitte und von Elementen in der rechten Spalte nach rechts. Das sieht auf Computern und Laptops gut aus, aber nicht auf dem Handy.
Hier kannst du sehen, wie es auf einem Computer mit linker, mittlerer und rechter Ausrichtung aussieht:
und hier siehst du, wie es auf dem Handy mit linker, mittlerer und rechter Ausrichtung aussieht:
⚠ Fazit: Alle Elemente in allen Spalten müssen mittig ausgerichtet sein, um sowohl auf Computern als auch auf mobilen Geräten richtig angezeigt zu werden.
So sieht es auf einem Computer mit der Ausrichtung Zentrum, Zentrum, Zentrum aus:
So sieht es auf einem Mobiltelefon mit der Ausrichtung Zentrum, Zentrum, Zentrum aus:
