Deine Website für mobil optimieren + 7 Tipps für Squarespace
Über die Hälfte der Zugriffe auf das Internet werden heute über Smartphones getätigt. Daher ist es auch für dich wichtig, deiner Zielgruppe eine Nutzung deiner Website über ihr Handy zu ermöglichen.
Wie die mobile Optimierung funktioniert, besonders in Squarespace, schauen wir uns hier an.
Grundlagen der mobilen Optimierung
1. Was bedeutet mobile Optimierung?
Die meisten von uns haben heute ein eigenes Smartphone. Vielleicht nutzen wir es sogar eher zu viel, als zu wenig. 🤭 Das führt dazu, dass etwa 64 % aller Suchanfragen im Internet über das Smartphone durchgeführt werden. 33 % der Zugriffe entstehen über Desktop und nur 2 % über Tablets. Quelle
Die mobile Optimierung von Websites, auch deiner, ist daher wirklich wichtig. Optimierung, das bedeutet, dass deine Website nicht nur vom Computer, sondern eben auch von allen möglichen mobilen Endgeräten aus bedient werden kann.
Responsive Websites sind solche, die sich automatisch an die Bildschirmgröße des jeweiligen Geräts anpassen. Vielleicht hast du es in letzter Zeit mal erlebt. Eine Website, die nicht für mobile Geräte optimiert war. Ganz schön schwierig, diese effektiv zu navigieren, oder? Da ist dann ganz viel Zoomen angesagt. 🔍
Lass uns dafür sorgen, dass deine Website auf allen Bildschirmgrößen gut aussieht und problemlos nutzbar ist.
2. Wie gut ist Squarespace für mobile Geräte geeignet?
Squarespace macht dir die Optimierung für mobil recht einfach. Im Editor gibt es eine Desktop-Ansicht und eine mobile Ansicht. Diese sind nutzbar, egal ob deine Website von null an erstellt wurde, oder du ein Template genutzt hast.
Der Editor von Squarespace funktioniert so, dass Elemente und Blöcke zuerst in der Desktop-Ansicht hinzugefügt werden. Danach können sie auch in der mobilen Ansicht neu platziert und bearbeitet werden.
Eine Tablet-Ansicht gibt es nicht, da eben nur etwa 2 % der Nutzenden über Tablets auf das Internet zugreifen. Es betrifft also vermutlich nur eine kleine Menge deiner Zielgruppe. Trotzdem wird die Tablet-Ansicht von einigen Menschen genutzt, sodass wir später darauf eingehen werden, wie du deine Website auch für Tablets optimierst.
Welche der beiden Ansichten, Desktop oder mobil, zuerst gestaltet werden sollte, erfährst du nun.
3. Responsives Design oder Mobile-First?
Die ursprüngliche Art, Websites zu gestalten, funktioniert so: zuerst wird die Desktop-Variante mit all ihren Elementen fertiggestellt. Danach wird die mobile Ansicht angepasst, sodass sie auf verschiedenen Gerätetypen funktioniert. Dabei kann es allerdings vorkommen, dass die mobile Variante nicht ganz so gut aussieht, wie die auf großen Bildschirmen. Kompromisse sind hier oft nötig.
Dieser Ansatz des responsiven Designs ist heute nicht immer die beste Lösung. Je nach Zielgruppe kann es sinnvoll sein, zuerst die mobile Variante zu designen, damit diese bestmöglich funktioniert. Die Desktop-Ansicht nimmt dann eine zweitrangige Stellung ein. Dieses Verfahren nennt sich Mobile-First.
Überlege also einmal: Wird deine Zielgruppe deine Website eher über das Handy, den Laptop oder einen Computer aufrufen? Als Faustregel kann man hier meist davon ausgehen, dass Menschen, die private Käufe tätigen, eher auf dem Handy unterwegs sind, während B2B Geschäfte noch mehr über Computer getätigt werden.
Zu welcher Gruppe gehört deine Zielgruppe? Auf dieser Antwort kannst du deinen Designprozess basieren.
Mobile Optimierung in Squarespace
Wie funktioniert also die mobile Optimierung für deine Squarespace Website? Bevor ich dir ein paar Tipps und Hacks zeige, kommen wir vorher erstmal zu den Basics.
1. Die mobile Ansicht
Gestaltest du heute eine neue Squarespace Website, wird diese auf dem Fluid Engine System beruhen. Dieses hat das alte Classic Editor System abgelöst. Siehst du beim Bearbeiten deiner Website ein Raster, dann nutzt du Fluid Engine. Damit können Elemente frei auf dem Raster abgelegt werden, während im Classic Editor Abstandsblöcke dafür sorgten, dass Elemente dort platziert bleiben, wo sie hingehören.
Im Fluid Engine Editor angekommen, findest du oben rechts einen Desktopbildschirm und ein Handy. Über diese Symbole wechselst du zwischen der Desktop- und mobilen Ansicht.
Du siehst einen blauen Punkt am Smartphone-Symbol? Dann wird es höchste Zeit, die mobile Variante zu bearbeiten. Der blaue Punkt ist Squarespace, das dir mitteilen möchte, dass eine deiner Änderungen auch die mobile Ansicht beeinflusst hat.
2. Desktop und mobile Änderungen
Möchtest du nun deine Elemente hinzufügen, gehst du in die Desktop-Ansicht. Hast du alles platziert, wirst du sehen, dass die Blöcke in der mobilen Variante in der Reihenfolge erscheinen, wie du sie hinzugefügt hast. Nicht optimal, also ist es Zeit, anzupassen.
Die Platzierung der Blöcke kannst du in beiden Ansichten unabhängig voneinander verändern. Änderst du allerdings etwas innerhalb eines Blocks, schreibst also beispielsweise einen neuen Text, änderst das Foto oder die Buttonfarbe, hat dies Einfluss auf beide Varianten.
3. Fluid Engine und das Raster
Das Raster hast du eben schon gesehen, als du die Elemente hinzugefügt hast. Es besteht in der Desktop-Ansicht aus 24 Spalten. In der mobilen Ansicht gibt es dagegen nur 8 Spalten. Die Anzahl der Zeilen ist von der Höhe des Abschnitts abhängig.
Tipp: Wenn du deine G-Taste drückst, bleibt das Raster dauerhaft sichtbar. Manchmal ganz praktisch.
Platzierst du nun als Beispiel einen Textblock so, dass er 6 der 24 Kästchen einnimmt, belegt er 25 % der Breite. Diese 25 % belegt der Text später auch auf dem Tablet und dem Handy (wenn du die Ansicht nicht mehr bearbeitest). Das bedeutet, dass der Text auf dem Handy nur noch 2 Kästchen breit und damit wahrscheinlich nicht mehr ganz so gut lesbar ist. Die Tablet-Variante behält ebenfalls 25 % der Breite bei.
Die Handy-Ansicht kannst du anpassen, die Tablet-Variante nicht. Achte also darauf, dass du den Blöcken genügend Platz gibst, damit sie auch auf dem Tablet noch gut aussehen, wenn der Bildschirm schmaler und 25 % deshalb deutlich kleiner sind.
Benötigst du Unterstützung bei der mobilen Optimierung?
In der Power Hour gehen wir deine To-dos an. Deine Website für mobile Geräte optimieren, die Domain verbinden, Fotos recherchieren, …
Gib uns deine Liste und lehne dich zurück!
Tipps für mobile Squarespace Layouts
Um die mobile und auch Tablet-Version zu verbessern, gibt es einige Tipps und Hacks. Diese machen nicht nur dir das Leben einfacher, sondern helfen auch deiner Zielgruppe bei der Nutzung deiner Website.
1. Lieber ein Textblock, als zwei
Die Überschrift und der darunterliegende Absatz sind dir zu weit voneinander entfernt. Was machst du also? Anstatt den Text in einem Block zu belassen, nutzt du zwei Textblöcke. Cool, Problem gelöst, oder?
Was passiert aber, wenn sich die Bildschirmgröße ändert und die beiden Blöcke sich auf einmal übereinander schieben? Man kann keinen der beiden Texte mehr lesen. 🙈
Ich würde dir daher empfehlen Texte, die zusammengehören und neben- oder untereinander liegen, in einem Block zu lassen. So kann sich nichts verschieben.
In diesem Fall ist die Lücke zwischen Überschrift und Absatz, die dir vielleicht etwas groß vorkommt, das kleinere Übel. Außerdem gibt uns Leerraum Platz zu denken.
2. Lieber mehr Platz, als zu wenig
Informationen können erst wirken, wenn wir die Freiheit haben, diese auch aufnehmen zu können. Deshalb sind die Teile deiner Website, auf denen „nichts“ zu sehen ist, auch Leerraum oder White Space genannt, genauso wichtig wie die Texte, Bilder und Grafiken.
Gleichzeitig wollen wir, dass unsere Zielgruppe so wenig wie möglich scrollen muss, bis sie all die wichtigen Informationen erhalten hat. Hier ist eine Balance zwischen genügend leerem Raum und einem effektiven Layout wichtig.
Lass im Zweifel aber lieber zu viel Freiraum, als die Informationen und grafischen Elemente alle neben- und übereinander zu quetschen. Das sieht nicht nur unschön aus, sondern macht die Nutzung auch schwerer.
Stell dir eine ältere Person vor, die vielleicht Schwierigkeiten beim Sehen hat oder deren Hände heute etwas zittrig sind. Nicht nur dieser Person würde es helfen, wenn um Buttons und Links herum genügend freier Platz ist. So erwischt sie seltener den falschen Button und kann sicher durch die Website navigieren.
3. Text skalieren Funktion
Du möchtest, dass deine Überschrift sowohl auf dem Computer als auch dem Handy die volle Breite des Bildschirms einnimmt? Dafür gibt es die Text skalieren Funktion. Du findest sie in der Leiste, in der du auch die Überschriftgröße und die Formatierung anpassen kannst.
Nutzt du diese Funktion, solltest du allerdings nochmal genau prüfen, wie dein Text auf dem Handy aussieht. Ist die Überschrift zu lang, wird der Text nämlich schnell zu klein. Dann kann es sinnvoll sein, ihn in zwei Zeilen unterzubringen.
4. Buttons anpassen oder füllen
Auch bei Buttons können lange Texte dazu führen, dass diese in der Tablet-Ansicht komisch aussehen. Der Text wird dann ebenfalls in zwei Zeilen aufgeteilt.
Und so kannst du das verhindern (manchmal zumindest): Wähle in den Design-Einstellungen des Buttons die Funktion Anpassen. Damit nimmt der Button nur so viel Platz ein, wie er aufgrund des Textes braucht. Wenn du den Container (der blaue Rahmen um den Button) nun auf die volle Breite des Bildschirms ziehst, hat der Button auf Tablets und auch Handys mehr Platz, nämlich 100 % des Bildschirms, und bleibt trotzdem nur so groß wie nötig.
5. Elemente verstecken
Du nutzt ein grafisches Element, das im Desktop-Design super aussieht und sinnvoll ist, auf dem Handy aber einfach nur nervt? Oft kannst du Blöcke wie den Form-Block so klein wie möglich ziehen und hinter einem Foto oder anderen Element verstecken.
So brauchst du das Element nicht mit CSS-Code zu verbergen.
6. Bildschirm füllen Funktion
Nutzt du die Bildschirm füllen Funktion, um beispielsweise Fotos mit den oberen und unteren Kanten des Abschnitts abschließen zu lassen, solltest du darauf achten, allen anderen Elementen genügend Leerraum zu geben.
Besonders Buttons und Texte benötigen etwas Platz zum Rand, um nutzbar und auch einfach ästhetisch zu sein. Ziehe hierfür das Raster nach unten und platziere die Elemente so, dass mindestens ein Kästchen nach oben und unten frei bleibt.
7. Externe Plugins
In einigen Fällen können externe Plugins hilfreich sein. Kein Muss, aber vielleicht helfen sie dir ja weiter. Der Fluid Engine Tablet Spacing Fixer von Chris Schwartz-Edmisten ist über den Chrome Web Store kostenlos verfügbar und ermöglicht eine zusätzliche Tablet-Ansicht.
Auch die Squarekicker Extension hilft bei der mobilen Optimierung und ermöglicht sogar vier verschiedene Geräteansichten. Zusätzlich bekommst du Zugang zu allen weiteren Tools.
Häufige Fragen
-
Ja, es ist total egal, ob und welches Template für deine Website genutzt wurde. Die Funktionen zur mobilen Optimierung sind in Squarespace 7.1 immer gleich.
-
Wenn deine Seite schon online ist, kannst du sie natürlich auf verschiedenen Geräten testen. Falls nicht, ändere einfach mal die Größe deines Browserfensters.
Weiterhin gibt es einige Chrome Extensions, die das Imitieren von verschiedenen Gerätegrößen möglich machen. -
Um sicherzustellen, dass deine Website auch auf dem Handy schnell lädt, solltest du deine Bilder und Grafiken optimieren. Wenn möglich, sollten diese nicht mehr als 250 KB groß sein.
Ich hoffe, du hast einen guten Überblick und mehr Verständnis für die mobile Optimierung gewonnen. Solltest du Unterstützung benötigen, kannst du dir gerne unsere Squarespace Power Hour anschauen oder uns direkt kontaktieren. Viel Erfolg mit deiner Website. 💜
Auf Pinterest merken
