Tipps, um Ihre Website für Mobilgeräte zu optimieren

Best Practices, um sicherzustellen, dass deine Besucher auf Mobilgeräten deine Website problemlos nutzen können.

Zuletzt aktualisiert: 21. Februar 2025

Alle Squarespace-Websites sind so konzipiert, dass sie von Anfang an großartig auf Mobilgeräten aussehen. Allerdings können Ergänzungen, die Sie vornehmen – wie z. B. große Mediendateien, viele Inhalt auf einer Seite und enge Zeichenabstände – Probleme beim Laden der Website und der mobilen Anzeige verursachen. Diese Anleitung enthält unsere Best Practices, um sicherzustellen, dass Ihre Website für Mobilgeräte optimiert ist.

Die Kompatibilität Ihrer Website mit Mobilgeräten testen

Um zu sehen, wie deine Website auf Mobilgeräten angezeigt wird, besuche sie auf einem Mobilgerät oder verwende die Geräteansicht, um eine Vorschau davon zu erhalten, wie sie auf kleineren Bildschirmen aussieht. Wenn deine Website den Kreativen Editor verwendet, stelle sicher, dass du den Inhalt in deinem mobilen Layout so anordnest, wie er angezeigt werden soll.

Unter Wie wird meine Website auf Mobilgeräten angezeigt? kannst du außerdem mehr darüber erfahren, wie verschiedene Merkmale auf Mobilgeräten angezeigt werden.

Verwenden Sie den Test auf Optimierung für Mobilgeräte von Google, um eine schnelle Beurteilung der Kompatibilität Ihrer Website mit Mobilgeräten zu erhalten. Wenn der Test ergibt, dass Ihre Website nicht für Mobilgeräte optimiert ist, oder wenn Sie Probleme beim Testen Ihrer Website auf einem Mobilgerät haben, befolgen Sie die Tipps in dieser Anleitung.

Hinweis

Der Test auf Optimierung für Mobilgeräte von Google ist ein Drittanbieter-Tool und fällt nicht in den Zuständigkeitsbereich unseres Supports.

Jedes Mobilgerät geht unterschiedlich mit Websites um

Beispielsweise können neuere Telefone besser mit großen Websites umgehen, und die Ladezeiten in einem WLAN-Netzwerk sind in der Regel kürzer (im Vergleich zu einer Mobilfunkverbindung).

Bei einigen mobilen Browsern wird möglicherweise eine Fehlermeldung angezeigt, wenn die Seitengröße zu groß ist. Befolge diese Tipps, um deine Seiten zu verkleinern.

Halten Sie Ihre Seiten unter 5 MB

Wenn ein Besucher eine Seite lädt, lädt sein Gerät den gesamten Inhalt herunter. Mobilgeräte verwenden einfache Hardware und sind für den Internetzugang auf Mobilfunknetze angewiesen, weshalb das Anfordern großer Datenmengen sie überfordern kann. Um Probleme zu vermeiden, minimieren Sie die Menge an Inhalten auf jeder Seite.

Da die Ladezeiten vom Gerät und der Verbindung abhängig sind, gibt es keine genaue Grenze. Es kann jedoch sein, dass Seiten mit mehr als 5 MB Inhalt über Mobilfunkverbindungen nur langsam geladen werden. Es gilt also: je kleiner, desto besser.

Um die Seitengröße zu überprüfen oder Tipps zum Verkleinern der Seitengröße zu erhalten, gehe zu Seitengröße für schnelleres Laden reduzieren.

Setzen Sie den Zeichenabstand auf 0 px oder höher

Wenn der Zeichenabstand einer Schriftart auf weniger als 0 px eingestellt ist, können sich die Buchstaben auf einem Mobilgerät überlappen.

Klicke im Menü „Schriftarten“ auf das Schriftformat, das du formatieren möchtest. Stelle sicher, dass der Buchstabenabstand auf 0 px oder höher eingestellt ist. Mehr dazu erfährst du unter Schriftarten ändern.

Stelle im Menü „Website-Stile“ sicher, dass der Buchstabenabstand für alle deine Schriftarten auf 0 px oder höher eingestellt ist.

image2.jpg

Verlassen Sie sich nicht auf Abstands-Blöcke

So erlangst du Zugriff auf diese Funktion

Abstands-Blöcke werden im Kreativen Editor nicht unterstützt. Gestalte stattdessen dein mobiles Layout unabhängig von deinem Computer-Layout.

Abstands-Blöcke fügen einer Seite Leerraum hinzu und schaffen beim Anzeigen einer Website auf einem Computer minimalistische Layouts. Auf Mobilgeräten sind Abstands-Blöcke jedoch normalerweise verborgen. Dies kann das Aussehen deines Layouts für mobile Websites auf unbeabsichtigte Weise ändern. Anstatt viele Abstands-Blöcke zu verwenden, könntest du beispielsweise das Padding ändern, um mehr Leerraum hinzuzufügen.

Sicherstellen, dass Stil für Mobilgeräte aktiviert ist (Version 7.0)

So erlangst du Zugriff auf diese Funktion

Stil für Mobilgeräte ist in Version 7.1 immer aktiviert. Weitere Informationen findest du unter Wie wird meine Website auf Mobilgeräten dargestellt?

Die meisten Squarespace-Templates zeigen Inhalte auf Mobilgeräten in einem einzigartigen, gestapelten Layout an, sodass Besucher problemlos durch Ihre Inhalte scrollen können. Wenn Stil für Mobilgeräte deaktiviert ist, müssen die Besucher mit den Fingern heranzoomen, um auf Ihrer Website zu navigieren.

So stellst du sicher, dass Stil für Mobilgeräte aktiviert ist:

  1. Öffne das Design-Menü und klicke auf Template-Einstellungen.
  2. Vergewissern Sie sich, dass Stil für Mobilgeräte anzeigen deaktiviert ist.

Diese Einstellung wird nur angezeigt, wenn Ihr Template das Deaktivieren von „Stil für Mobilgeräte“ unterstützt.

Weitere Tipps zur Formatierung

Weitere Tipps zur Formatierung für Mobilgeräte findest du unter Wie wird meine Website auf Mobilgeräten dargestellt? In diesem Artikel behandeln wir, wie Inhalte auf kleineren Bildschirmen angezeigt werden und wie bestimmte Arten von Inhalten für die Kompatibilität mit Mobilgeräten optimiert werden können.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Tipps, um Ihre Website für Mobilgeräte zu optimieren