Der Unterschied zwischen Seiten-Padding und Breite bei Squarespace
Oft sind es die kleinen Detail-Einstellungen im Editor, die deiner Squarespace-Website das letzte Finish verleihen. Und die teilweise einen Riesen-Unterschied machen, wie lange die Leute auf deiner Website bleiben!
Heute geht es um die Frage der Seitenränder bei deiner Squarespace-Website: Was bedeuten die verschiedenen Wörter? Was ist “Seiten-Padding”, was die “Breite”? Wo liegt der Unterschied? Und wie breit sollte deine Seite eigentlich optimalerweise sein?
Inhaltsverzeichnis:
👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufend neuen Tutorials! 🎥
Warum die Textbreite so wichtig ist
Bevor wir mit den Einzelheiten loslegen: Auch wenn du viel mit Bannern arbeitest, die über die gesamte Breite gehen - setze für deine Texte im Fließtext (Blogartikel etc.) auf jeden Fall einen deutlichen Rand.
Es ist viel schwieriger, lange Zeilen zu lesen, als kurze. Vielleicht ist dir auch aufgefallen, dass der Text, den du gerade liest, auch nicht über die gesamte Breite der Seite geht. Das hat den einfachen Grund, dass es viel zu anstrengend für die Augen ist, die langen Linien “entlangzufahren”.
Gerade wenn du bloggst, kann diese scheinbar winzige Änderung große Bedeutung für deine Lesezeiten und Abbsprungraten haben.
Was ist der Unterschied zwischen “Padding” und “Breite”?
Bei manchen Squarespace-Templates, wie z.B. hier dem Hayden-Template, ist die Breite des Texts bei Blogposts automatisch eingestellt:
Hier beim Hayden-Template haben die Blogposts automatisch links und rechts viel Platz zum Rand.
Dadurch ist die Breite automatisch festgelegt, sodass du dich nicht sorgen musst, zu lange “Textwälder” zu schaffen. (Und auf mobilen Bildschirmen ist der Rand automatisch verschwunden.)
Selbst wenn du den Blogpost jetzt an einem deutlich größeren Bildschirm ansiehst, wird der Text nicht breiter. Lediglich der Rand passt sich an und wird “größer”:
Bei anderen Templates, wie z.B. denen der Brine-Familie, kannst du allerdings die Breite und das Seiten-Padding selbst bestimmen.
Und da wird es auch schon tricky.
Auf den ersten Blick ist es nämlich schwierig zu erkennen, was jetzt der Unterschied zwischen dem Seiten-Padding und der Breite ist.
Wenn du schon ein bisschen unter Design > Website Stil herum probiert hast, wirst du feststellen, dass du mit dem Verstellen der beiden Werte ähnliche Ergebnisse siehst.
Der Unterschied liegt allerdings hier:
Die Breite ist die maximale Größe, die deine Seiteninhalte (außer Bannern bei Index-Seiten) einnehmen. Das Bedeutet, auf großen Bildschirmen wird - selbst wenn der Bildschirm riesig ist, immer eine fest definierte Maximalbreite gezeigt.
Padding ist der Abstand zum Rand. Das heißt, wenn der Bildschirm groß ist, wird auch der Inhalt der Website “gedehnt”.
Ein größeres Padding ist beispielsweise für die Anzeige auf Tablets oft nicht optimal. Regle das am besten über die Breite.
Um wirklich zu sehen, was die Einstellung des Paddings für deine Seite bedeutet, hilft es, die Einstellungen zu ändern und dir das ganze auf einem sehr großen Bildschirm anzusehen. Wenn du dann das Browserfenster kleiner und größer ziehst, siehst du, ob dir der Effekt gefällt oder nicht.
👉 Wenn du noch nicht mit Squarespace arbeitest und es testen willst, bekommst du hier mit dem Code VICTORIA10 nach der gratis Testphase einen Rabatt von 10% auf dein erstes Jahr. (Das ist natürlich ein Werbelink.)
Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.
Was bedeutet “Rand anzeigen” bei Squarespace?
Anstatt deine Ränder über das Seiten-Padding oder die Breite einzustellen, kannst du auch einen “richtigen Rahmen” anzeigen lassen.
Du kannst dir z.B. überlegen, einen weißen Rahmen um alles herum zu legen.
Vorteil: Du hast auch bei der mobilen Anzeige einen großen Rand.
Nachteile: Der Rand ist auch unter der Navigation zu sehen und wirkt wie ein großes Loch (wenn du einen sehr breiten Rand wählst). Du kannst also nicht so viel “spielen” und einstellen wie mit der Einstellung über das Padding und die Breite.
Natürlich kannst du auch einen farbige Rand für deine Website verwenden:
Dieser Rand ist dann auf jeder Seite gleich - also nicht nur auf deiner Homepage. Auch deine Blogartikel haben dann den farbigen Rand.
Das kann als Stilelement sehr gut funktionieren, wenn du in deinem Branding besonders stark mit einer zentralen Farbe arbeitest.
Wenn du mit Breiten und Rändern arbeitest, folgt die nächste wichtige Frage gleich auf dem Fuße:
Wie breit soll ich den Mobil-Breakpoint bei Squarespace einstellen?
Was bedeutet der “Mobil-Breakpoint” bei Squarespace?
Dies ist der Punkt (die Breite), ab dem die Seite von der Desktop- zur mobilen Ansicht “springt”. Du weißt schon - bei Smartphones siehst du meistens die typischen Hamburger-Menüs mit drei Strichen - wogegen du bei der Desktop-Version ein großes Menü siehst.
Das sind die besten Einstellungen für deinen Mobil-Breakpoint
Klassische Breakpoint-Empfehlungen sind ca. 320 Pixel für Smartphones, 720 Pixel für Tablets und 1024 für Laptops.
Bei Squarespace ist es allerdings so, dass du nicht verschiedene, sondern nur einen Breakpoint festlegst. (Einzustellen bei Design > Website-Stil > “Mobil-Breakpoint”).
Die optimalen Breakpoint-Angaben von oben sind auch schon ein paar Jahre alt - die Größen der mobilen Bildschirme ändern sich aber ständig. Smartphones zum Beispiel scheinen mit den Jahren immer riesiger zu werden.
Ich selbst habe meinen Mobi-Breakpoint zur Zeit auf 640 Pixel eingestellt. Auf den Geräten, die ich für meine Website getestet hatte, war das die für mich beste Lösung.
Das Ganze ist - ganz wichtig - immer in Kombination mit deinen Einstellungen zu Seiten-Padding und der Breite zu sehen. Es gilt: Je mehr Rand du hast, desto mehr braucht deine Website wahrscheinlich einen früheren Breakpoint (also bei eine höhere Pixelzahl in den Einstellungen).
Mein Tipp: Teste deine Website, bevor sie live geht, immer auf einem Laptop, einem großen Bildschirm, einem Smartphone und einem Tablet.
Ich selbst habe am Anfang zum Beispiel das Testen auf Tablets außen vor gelassen, dann aber schnell gemerkt, dass meine Einstellungen dafür nicht optimal waren.
Es gilt, den besten Kompromiss für alle Geräte zu finden.
Und vergiss nicht: Mobile first! (Auch, wenn du selbst am liebsten alles am Desktop machst.)
Was bedeutet die “Inhaltseinrückung” in den Design-Einstellungen von Squarespace?
Wenn du nur einen Textblock hast, sorgt die Inhaltseinrückung dafür, dass dein Text nicht über die volle Breite der Zeile läuft.
Wenn du allerdings zwei oder mehr Textblöcke nebeneinander hast (z.B. wenn du Spalten baust), haben sie gemäß den Standard-Einstellungen der meisten Squarespace-Templates eine andere Breite.
Hast du weitere Fragen zu deinen Design-Einstellungen bei Squarespace? Schreib sie unten in die Kommentare!
Diese Artikel könnten dich auch interessieren:
