Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

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

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 Ihre Website auf Mobilgeräten angezeigt wird, rufen Sie sie auf einem Mobilgerät auf oder verwenden Sie Geräteansicht, um eine Vorschau davon zu erhalten, wie sie auf kleineren Bildschirmen aussieht. Sie können außerdem mehr darüber erfahren, wie verschiedene Merkmale auf Mobilgeräten angezeigt werden, indem Sie zu Wie wird meine Website auf Mobilgeräten angezeigt? gehen.

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).

Fehlermeldung: Ein Problem ist wiederholt aufgetreten

Der mobile Safari-Browser auf iOS kann diesen Fehler anzeigen, wenn Ihre Seitengröße zu groß ist. Befolgen Sie diese Tipps, um sie kleiner zu machen.

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 Größe einer Seite zu überprüfen, gehen Sie zu Größe von Seiteninhalten überprüfen. Wenn Seiten zu groß sind, befolgen Sie diese Tipps, um sie kleiner zu machen.

Tipp: Wenn Ihr Template dies unterstützt, aktivieren Sie Ajax Loading, wodurch Browser angewiesen werden, Ihre Inhalte seitenweise zu laden.

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.

In the Fonts panel, click the-gear-icon on your selected font pack, then click the font format you want to style. Ensure the letter spacing is set to 0px or higher. To learn more, visit Version 7.1 style and design options

Vergewissere dich im Menü „Website-Stile“, dass Zeichenabstand für alle deine Schriftarten auf 0 px oder höher eingestellt ist.

image2.jpg

Verlassen Sie sich nicht auf Abstands-Blöcke

Abstands-Blöcke fügen einer Seite Leerraum hinzu und schaffen so minimalistische Layouts, wenn Sie eine Website auf einem Computer betrachten. In den meisten Templates werden Abstands-Blöcke jedoch auf Mobilgeräten verborgen, was dazu führen kann, dass sich das Layout ändert und anders aussieht als von Ihnen gewünscht. Anstatt viele Abstands-Blöcke zu verwenden, sollten Sie in Betracht ziehen, das Padding zu ändern, um mehr Leerraum hinzuzufügen. Probieren Sie zum Beispiel die Funktion Inhaltseinrückung, die bei einigen Templates verfügbar ist.

AMP für Blog-Seiten aktivieren

Wenn Sie Squarespace zum Bloggen verwenden, aktivieren Sie Accelerated Mobile Pages (AMP), um die Ladegeschwindigkeit zu erhöhen.

Stellen Sie sicher, dass Stil für Mobilgeräte aktiviert ist

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 stellen Sie sicher, dass Stil für Mobilgeräte aktiviert ist:

  1. Klicken Sie im Hauptmenü auf Design und dann 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 mobilen Formatierung finden Sie unter Wie wird meine Website auf einem Mobilgerät angezeigt?, wo wir die mobile Darstellung nach Template behandeln und darauf eingehen, wie Sie bestimmte Arten von Inhalten für die Kompatibilität mit Mobilgeräten optimieren können.

War dieser Beitrag hilfreich?
113 von 236 fanden dies hilfreich
Tipps, um Ihre Website für Mobilgeräte zu optimieren