Erfahre, wie verschiedene Website-Elemente für Besucher auf Mobilgeräten aussehen.

Squarespace-Websites sind so konzipiert, dass Besucher deine Website auf jedem beliebigen Gerät, von Computern über Tablets bis hin zu Smartphones, besuchen können.

Diese Anleitung erklärt, wie bestimmte Website-Elemente auf Mobilgeräten angezeigt werden, und bietet Tipps zum Anpassen deiner Stile für Mobilgeräte.

Video ansehen

Deine Website für Mobilgeräte optimieren

Sämtliche Squarespace-Websites passen sich kleineren Browsern und dem Format eines Geräts an. Dies geschieht mittels Responsive Design, bei dem deine Inhalte je nach der Größe des Browserfensters, das deine Website anzeigt, automatisch angepasst werden. Im Allgemeinen werden die Inhalte auf einem Mobilgerät vertikal gestapelt. Dies bedeutet, dass die Besucher scrollen können, um alle deine Inhalte anzusehen, anstatt zu tippen, zoomen und die Seite in verschiedene Richtungen zu verschieben.

Wenn deine Website auf Squarespace Version 7.0 läuft, verfügt dein Template möglicherweise auch über zusätzliche integrierte Stile für Mobilgeräte, die aktiviert werden, wenn deine Website erkennt, dass sie auf einem mobilen Gerät angezeigt wird. Weitere Informationen findest du im Abschnitt Stile für Mobilgeräte, Version 7.0 unten.

In Version 7.1 passen sich Websites automatisch an mobile Ansichten an, aber einige Bereiche, wie Abschnitte des Kreativen Editors oder Header, verfügen über spezifische Optionen für Mobilgeräte.

SEO für Mobilgeräte

Google weist Websites, die für Mobilgeräte optimiert sind, eine höhere Prioritätsstufe zu. Die einzigartigen Stile für Mobilgeräte der Squarespace-Websites sind somit suchmaschinenfreundlich und speziell darauf ausgelegt, bei mobilen Suchanfragen gefunden zu werden. Weitere Informationen findest du unter SEO bei Squarespace.

Zusätzlich zu den für Mobilgeräte optimierten Designs gibt es bestimmte Dinge, die Sie tun können, um sicherzustellen, dass Ihre Website für Mobilgeräte optimiert bleibt. Dazu gehören die Begrenzung der Inhalte in einer Portfolio- oder Index-Seite, die Verwendung von Blog-Auszügen, die Reduzierung der Bildgröße und die Minimierung der Anzahl der Bilder auf einer Seite. Um mehr zu erfahren, besuchen Sie Tipps, um Ihre Website für Mobilgeräte optimiert zu halten.

Ihre Website auf Mobilgeräten

Der beste Weg, um zu erfahren, wie Ihre Website auf Mobilgeräten funktioniert, besteht darin, sie selbst zu testen. Wir empfehlen, die integrierte Geräteansicht zu verwenden und auf einem mobilen Gerät zu testen.

Geräteansicht

Das Tool „Geräteansicht“ zeigt die verschiedenen mobilen Ansichten deiner Website an. Dies ist eine gute Möglichkeit, das Responsive Design deiner Website von einem Computer aus zu testen, während du sie bearbeitest. Ausführliche Anweisungen findest du unter Geräteansicht. Verwende in Bereichen, in denen der Kreative Editor verwendet wird, die Geräteansicht, um dein mobiles Layout unabhängig von deinem Computer-Layout zu bearbeiten.

Ihre Geräte verwenden

Die Fenstergrößen variieren je nach Gerät und einige mobile Funktionen sehen auf einem mobilen Gerät anders aus als in der Geräteansicht. Daher ist es hilfreich, deine Website auf so vielen Geräten wie möglich zu besuchen.

Wenn Sie Ihre Website auf einem Mobilgerät betrachten möchten, geben Sie die URL Ihrer Website in die Navigationsleiste Ihres mobilen Browsers ein.

Tipp: Um deine Website während deiner Probephase als mobiler Besucher betrachten zu können, füge ein Website-Passwort hinzu (anstatt den Inhaber-Login zu benutzen).

Audio und Video

Audio-Dateien und Videos werden entsprechend den Funktionen des jeweiligen Browsers oder Gerätes geöffnet und abgespielt. Auf einigen Geräten (darunter iOS) werden Audio-Dateien im Media-Player deines Geräts geöffnet.

Video-Dateien werden in allen von uns unterstützten Browsern für Mobilgeräte direkt auf der Seite abgespielt. Wenn du ein benutzerdefiniertes Vorschaubild als Bild-Overlay verwendest, tippe es zweimal an, um das Video abzuspielen. Im nächsten Abschnitt erfährst du, wie Video-Banner auf Mobilgeräten funktionieren.

Blöcke

Blöcke fügen Inhalte zu Abschnitten, Seiten und anderen bearbeitbaren Bereichen wie Blogeinträgen hinzu. Wie Blöcke auf Mobilgeräten angezeigt werden, hängt von der Version deiner Website ab und davon, wo die Blöcke hinzugefügt wurden.

Ordne in Bereichen von Websites der Version 7.1, die den Kreativen Editor verwenden, dein mobiles Layout unabhängig von deinem Computer-Layout an.

In Websites der Version 7.0 und in Bereichen von Websites der Version 7.1, die den Klassischen Editor verwenden, stapelt das Responsive Design von Squarespace Blöcke auf Mobilgeräten automatisch vertikal. Weitere Informationen und ein Video zur Funktionsweise findest du unter Wie Blöcke auf Mobilgeräten im Klassischen Editor gestapelt werden.

• Einzelne Spalten – Auf Mobilgeräten werden Blöcke in ihrer vollen Breite vertikal gestapelt. Das Computer-Layout der Seite wird beibehalten.
• Mehrere Spalten – Auf Mobilgeräten wandern die zweite, dritte sowie alle weiteren Spalten unter die erste und werden somit vertikal anstatt horizontal gestapelt.
• Schwebende Blöcke werden auf Mobilgeräten über dem dazugehörigen Text-Block angezeigt.

Abstands-Blöcke werden automatisch auf Mobilgeräten ausgeblendet, außer in einigen Templates auf Version 7.0.

Domains

Die integrierten und benutzerdefinierten Domains deiner Website funktionieren sowohl auf Computern als auch auf Mobilgeräten. Du benötigst keine separate URL für Mobilgeräte.

Wenn du Probleme mit einer Drittanbieter-Domain bei der Verbindung auf Mobilgeräten hast, stelle sicher, dass du diese korrekt mit deiner Website verknüpft hast.

Favicon oder Browser-Symbol

Die Darstellung des Favicons (oder Browser-Symbols) richtet sich nach dem verwendeten mobilen Browser. In einigen Fällen wird das Favicon nicht angezeigt.

Galerien

Wie Ihre Galerie auf Mobilgeräten angezeigt wird, hängt von der Version Ihrer Website und dem Galerieformat ab.

Tipp: Große Bilddateien oder zu viele Bilder können dazu führen, dass Ihre Website auf Mobilgeräten langsam geladen wird. Um mehr zu erfahren, besuchen Sie Tipps, um Ihre Website für Mobilgeräte optimiert zu halten.

Galerie-Blöcke

Im Kreativen Editor werden Galerie-Blöcke auf Mobilgeräten genauso angezeigt wie auf einem Computer, aber du kannst ihre Größe und Platzierung ändern. Wie Galerie-Blöcke im Klassischen Editor auf Mobilgeräten angezeigt werden, hängt von ihrem Layout ab:

• Raster – Anzeige als Raster mit zwei Spalten.
• Slideshow – Slideshow bleibt bestehen.
• Karussell – Anzeige als Karussell, es wird aber jeweils nur ein Bild gezeigt.
• Stapel – Bleibt gestapelt.

Normalerweise werden Bildbeschriftungen auf Mobilgeräten genauso angezeigt wie auf einem Computer. Für Slideshow-Galerie-Blöcke gilt jedoch, dass Beschriftungen nicht in Browsern angezeigt werden, die schmaler als 480 Pixel sind.

Um mehr zu erfahren, besuche Galerie-Blöcke.

Kopfzeilen-Elemente

Deine Mitteilungsleiste, deine Navigationsmenüs sowie der Website-Titel und das Logo können sich auf Mobilgeräten verschieben.

Mitteilungsleiste

Die Mitteilungsleiste wird oben auf Mobilgeräten oben der Seite angezeigt.

In diesen Template-Gruppen der Version 7.0 wird die Mitteilungsleiste unterhalb des Kopfzeilen-Overlay und über dem Seiteninhalt angezeigt:

• Brine
• York

Navigations-Menüs

Wie dein Navigationsmenü angezeigt wird, hängt von der Version deiner Website ab.

Weitere Informationen finden Sie unter Die Navigation gestalten.

Seitentitel und Logos

Die Art und Weise, wie dein Website-Titel oder Logo angezeigt wird, hängt von der Version deiner Website ab.

Bilder

Um die geringe Breite von Mobilgeräten zu berücksichtigen, ändern sich einige Bilder und Bildfunktionen auf Mobilgeräten.

Banner und Abschnittshintergrundbilder

Banner und Abschnittshintergrundbilder werden auf Mobilgeräten immer etwas zugeschnitten. Das Zuschneiden erfolgt, da Banner-Bilder und -Videos breit und horizontal sind, die Bildschirme von Mobilgeräten aber schmal und vertikal sind.

Befolge unsere Tipps zur Formatierung von Banner-Bildern sowie die Best Practices für Bilder im Responsive Design, bevor du Bilder hochlädst. Beachte bei der Anzeige deiner Website auf Mobilgeräten Folgendes:

• Wie stark der Beschnitt ist, hängt von der Höhe des Banners und der Breite des Browsers ab.
• Die Höheneinstellungen eines Banners werden auf Mobilgeräten nicht immer übernommen.
• Video-Banner werden auf Mobilgeräten nicht geladen, wenn die Verbindungsgeschwindigkeit langsam ist oder wenn der Browser dies nicht zulässt. Lege ein Ersatzbild für Mobilgeräte fest, das angezeigt wird, wenn das Video nicht geladen werden kann.
• Auf einigen Mobilgeräten, darunter auch auf iOS-Geräten, wird die Einstellung Feste Position für seitenübergreifende Banner nicht angezeigt. Weitere Informationen findest du unter Hintergrundbilder für die gesamte Website in Version 7.0 hinzufügen.

Um die Auswirkungen des Zuschneidens für deine Banner-Bilder zu minimieren, besuche Fehlerbehebung beim Zuschneiden.

Bildbeschriftungen

Welche Arten von Untertiteln deine Website verwendet, hängt von der Version deiner Website ab.

Instagram- und Flickr-Blöcke

Blöcke, die Bilder von Social-Media-Konten wie Instagram und Flickr anzeigen, zeigen Bilder in einem zwei Spalten breiten Raster an.

Lightboxen

Auch wenn Lightbox-Effekte von Mobilgeräten grundsätzlich unterstützt werden, bestehen einige Einschränkungen:

• Pinch-to-Zoom wird nicht unterstützt.
• Wenn dein Bild über eine Beschriftung verfügt, die beim Mouseover angezeigt wird, wird unten rechts in der Lightbox ein weißer Punkt angezeigt. Tippe auf den Punkt, um die Beschriftung anzuzeigen.
• In Version 7.0 sind Lightboxes auf Wexley Galerie-Seiten deaktiviert.

Seitenelemente

Mouseover-Effekte und Padding-Änderungen auf Mobilgeräten sorgen dafür, dass deine Website für Mobilgeräte optimiert wird.

Mouseover-Effekte

Touchscreen-Geräte wie Smartphones, Tablets und Touchscreen-Laptops unterstützen keine Mouseover-Effekte. Elemente deiner Website mit Mouseover-Effekten werden unter Umständen durch Antippen angezeigt. Zum Beispiel:

• Drop-down-Menüs werden durch Antippen angezeigt.
• Bezeichnungen und Preise von Produkten werden unter dem jeweiligen Bild angezeigt.
• Je nach Art des Mobilgeräts und der Weite des Browsers werden Bildbeschriftungen möglicherweise immer, bei Antippen oder gar nicht angezeigt.
• Titel und ausgewählte Bilder von Portfolio-Unterseiten werden möglicherweise nie angezeigt.

Padding

Squarespace-Websites verfügen oft über integriertes Mobile-Padding, das zur Optimierung deiner Website für kleinere Browser und Responsive Design beiträgt. Somit beeinflussen Abstands- und Padding-Änderungen, die deine Website auf einem Computer beeinflussen, möglicherweise nicht immer das Erscheinungsbild auf Mobilgeräten.

Werbe-Pop-ups

Wenn auf deiner Website Werbe-Pop-ups eingesetzt werden, kannst du diese auch auf Mobilgeräten aktivieren. Alle mobilen Pop-ups werden standardmäßig auf einer halben Seite angezeigt, um die Vorgaben von Google zur Einstufung von Websites in Suchergebnissen zu erfüllen.

Verwende das Stil-Menü, um das Design auf Mobilgeräten anzupassen, oder deaktiviere mobile Pop-ups im Menü Darstellung & Timing.

Shop-Seiten und E-Commerce

Kunden können auf deiner Website per Mobilgerät genauso einkaufen, wie sie es auf einem Computer tun würden. Dein Squarespace-Shop passt sich, wie alle Elemente deiner Website, einem kleinen Bildschirm an und ist über ein Mobilgerät navigierbar. Produkte werden in vertikaler Reihenfolge angezeigt. Bei individuellen Produktdetailseiten wird das Produktbild über der Beschreibung, dem Preis und dem Button Zum Warenkorb hinzufügen gestapelt angezeigt.

Andere Stile hängen von der Version deiner Website ab.

Text und Schriftarten

Schriftarten behalten in der Regel den gleichen Stil auf Mobilgeräten, aber große Schriftarten wie Überschriften können auf eine kleinere Größe skaliert werden, um sie an die Breite des Browsers anzupassen. Wenn der Text sich auf Mobilgeräten überlappt, ändere die Zeilenhöhe der Schriftart.

Telefonnummern, die dem Textkörper oder Footertext deiner Website hinzugefügt wurden, werden als Links im mobilen Safari-Browser angezeigt.

Einige Templates der Version 7.0 verwenden skalierende Schriftarten, sodass Sie die maximale und minimale Größe für Titel, Überschriften und andere Schlüsseltexte manuell festlegen können.

Stile für Mobilgeräte Version 7.0

Video ansehen

Diese Funktionen sind nur für Websites der Version 7.0 verfügbar:

• Cover-Seiten – Cover-Seiten passen sich layoutbasiert an Mobilgeräte an.
• Seitenspezifische Kopf- und Fußzeilen – Bei Templates, die Seitenkopf- oder Fußzeilenunterstützen, wird der Inhalt auf Mobilgeräten angezeigt.
• Parallax Scrolling – Parallax Scrolling ist ein Spezialeffekt, der in bestimmten Templates zur Verfügung steht. Dabei wird der Eindruck erweckt, dass sich das Hintergrundbild langsamer bewegt als der Inhalt im Vordergrund. Es ist in der Brine-Familie auf Mobilgeräten verfügbar.
• Seitenleisten – Seitenleisten werden am unteren Rand der Seite auf Mobilgeräten angezeigt. Im Ishimoto-Template werden Seitenleisten nicht auf Mobilgeräten angezeigt.
• Hintergrundbilder für die gesamte Website – Hintergrundbilder für die gesamte Website werden auf Mobilgeräten unterstützt. Möglicherweise musst du den Inhaltsbereich transparent machen, damit das Hintergrundbild angezeigt wird.

Template-spezifische Stile

Um mehr über die mobilen Optionen eines bestimmten Templates zu erfahren, besuchen Sie unseren Template-Guide.

Eine Liste aller Templates mit spezifischen Optionen für Mobilgeräte finden Sie unter Erweiterte Mobile Styles.

Stile für Mobilgeräte deaktivieren

Die meisten Squarespace-Templates verfügen über ein einzigartiges Design, das für mobile Geräte optimiert ist und deinen Besuchern dabei hilft, deine Website von jedem Gerät aus anzusehen und zu navigieren. Bei einigen Templates gibt es die Option, diese Funktion zu deaktivieren, wenn du dies bevorzugst. Wir empfehlen jedoch, den Stil für Mobilgeräte aktiviert zu lassen.

Denk daran:

• Wenn du die Stile für Mobilgeräte deaktivierst, wird deine Website auf einem Mobilgerät genauso angezeigt wie auf einem Computer. Der Inhalt der Website wird daher nicht in einer vertikalen Spalte gestapelt, weshalb Blöcke und andere Inhalte im gleichen Layout angezeigt werden, das du auf einem Computer siehst.
• Das Deaktivieren der Stile für Mobilgeräte kann sich auf deine SEO auswirken. Im April 2015 verfolgte Google Pläne zur „mobilen Freundlichkeit“ für das Ranking von Websites bei Suchen auf Mobilgeräten. Squarespace-Websites erfüllen die Anforderungen von Google nur dann, wenn der Stil für Mobilgeräte aktiviert ist.
• Wenn du Stil für Mobilgeräte deaktivierst, wird die mobile Navigation deaktiviert.
• Es ist nicht möglich, Stil für Mobilgeräte für Cover-Seiten zu deaktivieren.

So deaktivierst du Stil für Mobilgeräte:

1. Öffne das Design-Menü und klicke auf Template-Einstellungen.
2. Aktiviere Stile für Mobilgeräte deaktivieren.
3. Klicken Sie auf Speichern.

Diese Option wird nicht erneut angezeigt, wenn dein Template das Deaktivieren der Stile für Mobilgeräte nicht unterstützt. Stile für Mobilgeräte können in folgenden Template-Familien nicht deaktiviert werden:

• Brine
• Farro
• Galapagos
• Skye
• Supply
• Tremont
• York

Häufig gestellte Fragen

Wie entscheidet Squarespace, wann der Stil für Mobilgeräte oder der Desktop-Stil angezeigt werden soll?

Wenn du eine Website auf einem Mobilgerät besuchst, erkennt Squarespace automatisch ein mobiles Betriebssystem. Dies sendet ein Signal zum Anzeigen der Stile für Mobilgeräte, es sei denn, deine Website basiert auf Version 7.0 und du hast diese Stile deaktiviert.

Kann ich meine Website auf Mobilgeräten bearbeiten?

Du kannst deine Website auf Mobilgeräten mit der Squarespace-App für iOS oder Android bearbeiten.

Sie können sich auch über Ihren mobilen Browser anmelden und einige Aspekte Ihrer Squarespace-Website auf einem mobilen Gerät verwalten. Einige Funktionen sind jedoch nur auf einem Computer verfügbar.

Was ist der Unterschied zwischen Stil für Mobilgeräte und Responsive Design?

Stil für Mobilgeräte auf Version 7.0 und Responsive Design sind unterschiedliche, aber verwandte Konzepte.

• Stil für Mobilgeräte ist einzigartig für Templates der Version 7.0. Diese Stile wirken sich nur auf Mobilgeräte-spezifische Navigationselemente, Einschränkungen beim Laden von Inhaltshintergründen und andere Designelemente aus, die auf mobilen Geräten möglicherweise unhandlich sind. Diese Elemente sind deaktiviert, wenn du Stile für Mobilgeräte deaktivierst, um eine mit der Darstellung auf einem Computer vergleichbare Version deiner Website zu präsentieren.
• Responsive Design bezieht sich auf die Fähigkeit deiner Website und ihrer Inhaltselemente, ihre Größe an das Browserfenster des Besuchers anzupassen. Responsive Design bleibt für alle Squarespace-Websites erhalten, auch wenn 7.0 Stil für Mobilgeräte deaktiviert ist. Das bedeutet, dass die gesamte Website weiterhin für kleinere Geräte geeignet ist, aber wenn Stil für Mobilgeräte deaktiviert ist, wird der Inhalt nicht neu angeordnet, um die Navigation zu erleichtern. Stil für Mobilgeräte kann in Version 7.1 nicht deaktiviert werden. Daher werden Inhalte immer neu angeordnet und in der Größe geändert. Um mehr zu erfahren, besuche Responsive Design.

Kann ich benutzerdefiniertes CSS hinzufügen, um das auf den Mobilgeräten angezeigte Layout meiner Website zu verändern?

Ja, aber benutzerdefinierte Code-Änderungen fallen außerhalb unseres Support-Bereichs. Das bedeutet, dass wir keine weitere Unterstützung bei der Einrichtung oder Fehlerbehebung bieten können. Außerdem können wir bei einer codebasierten Lösung die Funktionalität oder vollständige Kompatibilität mit Squarespace nicht garantieren. Dies bezieht sich etwa auf die Funktionalität in Verbindung mit Responsive Design, insbesondere auf das Erscheinungsbild auf Mobilgeräten, und auf die Kompatibilität mit allen Templates. Zudem kann benutzerdefinierter Code im Anschluss an zukünftige Updates unserer Plattform zu Anzeigeproblemen führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings gibt es viele andere Informationsquellen, die dich hier unterstützen können:

• Mach dich mit den bewährten Verfahrensweisen zum Hinzufügen von benutzerdefiniertem Code vertraut.
• Lesen Sie unsere allgemeine Anleitung für externe Anpassungen.
• Besuche das Squarespace Forum, unsere Community für Kunden und Entwickler.
• Beauftrage Squarespace-Experten mit der Erstellung eines benutzerdefinierten Codes für deine Website. Erfahre mehr über die Experten-Services, die über Squarespace Marketplace verfügbar sind.