Responsive
Heute nutzen die meisten Menschen mobile Endgeräte wie Smartphones und Tablets, um Webseiten zu besuchen.
Diese Geräte haben einen kleineren Bildschirm und somit eine kleinere Auflösung. Das hat zur Folge, dass deine Webseite weniger Platz zur Verfügung hat.
Deshalb solltest du deine Webseite nicht nur für Desktop stylen, sondern auch immer darauf achten, diese für kleinere Bildschirmgrößen anzupassen.
Man nennt das Ganze auch „Responsive Webdesign“. Eine responsive Webseite ist flexibel und passt sich automatisch der Breite des Browserfensters an:
Dafür arbeitet man mit Breakpoints. Diese erlauben dir, dein Design für verschiedene Geräte - Desktop, Tablet, Smartphone (quer) und Smartphone (hochkant) - und ihre jeweiligen Browsergrößen zu verändern.
Unsere Themes sind bereits angepasst
Alle unsere Themes sind bereits so gestaltet, dass sie auf allen Geräten gut aussehen. Eigentlich musst du da gar nichts machen.
Wenn du aber ein bisschen extremere Stylings oder starke Änderungen am Layout durchführst (z.B. eine große Schriftgröße für eine Überschrift, sehr viel Innen- oder Außenabstand, oder Elemente oft ineinander verschachtelst), dann musst du nachträglich noch mal anpassen.
Tipp: Keine feste Breite und Höhe
Vergib beim Styling am besten keine feste Breite und Höhe. Versuche hier lieber mit Außen- oder Innenabständen zu arbeiten.
Wenn du z.B. bei einer Sektion die Höhe auf 800px setzt, der Bildschirm vom Smartphone aber nur 400px hat, wird sehr viel „abgeschnitten“. Designst du aber mit Innenabständen, ist alles etwas flexibler. In diesem Fall würdest du einfach den Innenabstand oben und unten auf 400px setzen - und zack hast du eine Höhe von 800px. Jetzt müsstest du evtl. nur bei kleineren Geräten den Abstand etwas verkleinern - z.B. einfach auf 100px setzen.
Feste Höhen und Breiten machen eigentlich nur Sinn, wenn du ein Bereich als Form benutzen möchtest oder einem Bild feste Maße geben willst - wenn es z.B. als Profilbild mit 100x100px dargestellt werden soll.
Allgemein: Seiten (und Templates) anpassen
Klicke auf einen der Geräte-Icons in der Topbar, um dein Design für das jeweilige Gerät anzupassen. Der Canvas wird kleiner:
Hier kannst du den Canvas des jeweiligen Geräts noch etwas größer oder kleiner ziehen, um dein Design auf wirklich allen Auflösungen abchecken zu können:
Wichtig ist hier, dass du nur das Styling und nicht die Elemente veränderst (diese würden sich sonst auf allen Größen ändern).
Außerdem solltest du wissen, dass die Styling-Anpassungen nur für das ausgewählte Gerät sowie für alle kleineren Geräte gelten:
Workflow: Seiten (und Templates) anpassen
Erstelle dein Design immer zuerst für Desktop.
Wenn du mit dem Styling dafür fertig bist, beginne mit der nächst kleineren Auflösung - dem Tablet.
Prüfe hier von oben nach unten deine komplette Seite (oder dein Template) durch und mach die erforderlichen Anpassungen.
Hast du bei Desktop zu viel Abstand und unter Phone Portrait wirkt der Inhalt gequetscht? Dann verändere den Innen- oder Außenabstand des Elements:
Geht die Überschrift über den Bildschirm hinaus? Dann verändere die Schriftgröße und ggf. den Zeichenabstand und die Zeilenhöhe:
Ist ein Element (z.B. ein Bereich oder ein Bild) zu groß und geht über den Bildschirmrand bzw. wird verzerrt dargestellt? Dann setze die Breite des Element auf „100%“. Damit erreichst du, dass das Element so breit dargestellt wird, wie die Auflösung es hergibt:
Passt das Design für Tablet, machst du mit der nächst kleineren Auflösung weiter. So gehst du vor, bis du bis zum kleinsten Gerät - Smartphone (hochkant) - angekommen bist.
