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

Wie wird meine Website auf Mobilgeräten dargestellt?

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

Alle Squarespace-Websites passen sich an kleinere Browser und passen das Format eines Geräts an. Wir tun dies mit Responsive Design, bei dem Ihre Inhalte automatisch angepasst werden, basierend auf der Größe des Browserfensters, das Ihre Website anzeigt. Im Allgemeinen werden Inhalte vertikal auf Mobilgeräten gestapelt. Das bedeutet, dass Besucher scrollen können, um all Ihre Inhalte zu sehen, anstatt in viele Richtungen zusammenziehen, zoomen und scrollen zu müssen.

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 die mobile Ansicht an, aber einige Bereiche, wie Kopfzeilen, verfügen über Mobilgerät-spezifische Stil-Optionen.

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

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

Die Geräteansicht ist ein Tool, mit dem du die verschiedenen mobilen Ansichten deiner Website sehen kannst. Dies ist eine gute Möglichkeit, das Responsive Design deiner Website von einem Desktop aus zu testen, während du sie bearbeitest. Ausführliche Anweisungen findest du unter Geräteansicht.

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

SEO und Optimieren Ihrer Squarespace-Website für Mobilgeräte

Google gibt für Mobilgeräte optimierten Websites eine höhere Priorität. Die einzigartigen Stile für Mobilgeräte von Squarespace Websites bedeuten, dass sie suchmaschinenfreundlich und bereit sind, in mobilen Suchanfragen gefunden zu werden. Weitere Informationen finden Sie unter Was Squarespace für SEO tut.

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.

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

Audio- und Video-Dateien

Audio- und Video-Dateien werden je nach Funktionalität des Browsers auf dem entsprechenden Gerät 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.

Banner-Bilder

Banner-Bilder werden auf Mobilgeräten immer etwas zugeschnitten. So minimierst du die Auswirkungen des Zuschneidens:

  • Ändern Sie die Stile Ihrer Website, um die Position oder Größe eines Banners zu bearbeiten.
  • Abstrakte Muster und Bilder ohne Text oder Rand funktionieren am besten.
  • Bei den meisten Banner-Bildern kannst du den Bildausschnitt anpassen, um zu steuern, wo das Bild zentriert wird.

Blöcke

Blöcke fügen Abschnitten, Seiten und anderen bearbeitbaren Bereichen wie Blogeinträgen Inhalt hinzu. Das Responsive Design von Squarespace stapelt Blöcke automatisch vertikal auf Mobilgeräten.

Nähere Informationen und ein Video finden Sie hier: Seiten- und Block-Layout-Veränderungen auf Mobilgeräten.

  • Einzelne Spalten – Auf Mobilgeräten werden Blöcke in ihrer vollen Breite vertikal gestapelt, wodurch das Layout für den Desktop-PC einer Seite beibehalten wird.
  • 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 eigenen Domains Ihrer Website funktionieren sowohl auf dem Desktop als auch auf Mobilgeräten. Sie benötigen keine separate mobile URL.

Wenn Sie Probleme mit einer Drittanbieter-Domain bei der Verbindung auf Mobilgeräten haben, stellen Sie sicher, dass Sie diese korrekt mit Ihrer Website verknüpft haben.

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-Abschnitte

Wie Galerieabschnitte auf Mobilgeräten angezeigt werden, hängt vom Layout ab: 

  • Raster: Einfach - Anzeige als Raster. Abschnitte, die auf eine Spalte festgelegt sind, werden in einer Spalte angezeigt. Abschnitte, die auf zwei oder mehr Spalten festgelegt sind, werden in zwei Spalten angezeigt.
  • Raster: Streifen - Anzeige in einer Spalte gestapelt.
  • Raster: Masonry – Abschnitte, die auf eine Spalte festgelegt sind, werden in einer Spalte angezeigt. Abschnitte, die auf zwei oder mehr Spalten festgelegt sind, werden in zwei Spalten angezeigt. 
  • Alle Slideshow-Layouts - Bleiben als Slideshow.

Untertitel werden in der Lightbox-Ansicht nicht angezeigt.

Galerie-Seiten

Viele Templates verwenden die Standard-Galerie-Seite. Für diese Templates gilt auf Mobilgeräten:

  • Raster – Galerie-Seiten werden vertikal gestapelt. Tippe auf ein Bild, um die Lightbox-Ansicht zu öffnen. Tippe in der Lightbox auf den Punkt in der rechten unteren Ecke, um Bildtitel und Beschreibungen anzuzeigen.
  • Slideshow – Galerie-Seiten werden als Slideshow angezeigt. Tippe zur Navigation auf den Bildschirm. Bildtitel und Beschreibungen werden nicht auf Browsern mit einer Breite von unter 480 Pixeln angezeigt.

Wenn Ihr Template Hyperlinks oder Deeplink-URLs unterstützt, funktionieren diese auch auf einem Mobilgerät.

Galerie-Seiten in diesen Template-Familien haben auf Mobilgeräten einzigartige Eigenschaften:

  • Avenue – Bilder werden vertikal gestapelt.
  • Flatiron – Bilder werden zwischen dem Seitentitel und dem Beschreibungstext gestapelt.
  • Forte – Bilder sind vertikal gestapelt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt. Lightbox-Slideshow ist deaktiviert.
  • Ishimoto – Bilder werden vertikal gestapelt.
  • Momentum – Die Navigationspfeile verschwinden nach dem ersten Bild.
  • Montauk – Bilder werden unterhalb der Seitenbeschreibung gestapelt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt.
  • Supply – Galerie-Seiten werden zwischen dem Seitentitel und dem Beschreibungstext gestapelt angezeigt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt.
  • Tremont – Galerie-Bilder werden auf den meisten Smartphones vertikal gestapelt. Größere Smartphones und Tablets zeigen hingegen das Original-Layout an.

Galerie-Blöcke

Wie Galerie-Blöcke auf Mobilgeräten angezeigt werden, hängt von ihrem Layout ab: 

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

In meisten Fällen werden Bildbeschriftungen auf dem Mobilgerät genauso angezeigt wie auf dem Desktop. Für Slideshow-Galerie-Blöcke gilt jedoch, dass Beschriftungen nicht in Browsern angezeigt werden, die schmaler als 480 Pixel sind.

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. Beispiele: 

  • Drop-Down-Ordnermenü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.

Bildbeschriftungen

Welche Arten von Untertiteln Ihre Website verwendet, hängt von der Version Ihrer Website ab.

  • Galerieabschnitte – Beschriftungen werden normalerweise auf Mobilgeräten genauso angezeigt wie auf dem Desktop, mit der Ausnahme, dass Beschriftungen nicht im Layout Slideshow: Einfach angezeigt werden.
  • Bild-Blöcke und Galerie-Blöcke – Beschriftungen werden im Normalfall auf Mobilgeräten und Desktop-PCs unverändert angezeigt. Je nach Art des Mobilgeräts und der Weite des Browsers werden bei Mouseover erscheinende Bildbeschriftungen möglicherweise immer, bei Antippen oder gar nicht angezeigt.
  • Bild-Blöcke und Galerie-Blöcke – Beschriftungen werden im Normalfall auf Mobilgeräten und Desktop-PCs unverändert angezeigt. Je nach Art des Mobilgeräts und der Weite des Browsers werden bei Mouseover erscheinende Bildbeschriftungen möglicherweise immer, bei Antippen oder gar nicht angezeigt.
  • Galerie-Seiten – Die Darstellung auf Mobilgeräten hängt von deinem Template ab.

Instagram, Flickr und 500px-Blöcke

Blöcke, die Bilder von Social-Media-Konten anzeigen, wie Instagram, Flickr und 500px, 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 Ihr Bild über eine Beschriftung verfügt, die beim Mouseover angezeigt wird, wird unten rechts in der Lightbox ein weißer Punkt angezeigt. Tippen Sie auf den Punkt, um die Beschriftung anzuzeigen.
  • In Version 7.0 sind Lightboxes auf Wexley Galerie-Seiten deaktiviert.

Navigations-Menüs

Wie Ihr Navigationsmenü angezeigt wird, hängt von der Version Ihrer Website ab.

Die mobile Darstellung Ihrer Navigation hängt vom Kopfzeilenlayout Ihrer Website ab. Die Primärnavigation wird immer hinter einem Menüsymbol ausgeblendet, aber Sie können das Navigationslayout und den Typ des Symbols in den Kopfzeileneinstellungen festlegen.

Auf Mobilgeräten hängt das Erscheinungsbild deiner Navigationsfunktionen von dem gewählten Template ab. Die Primärnavigation wird normalerweise hinter einem Menüsymbol (auch „Hamburger“-Symbol genannt) oder einem Link zusammengeklappt. 

Wenn dein Template Fußzeilen-Navigation unterstützt, wird diese am unteren Ende der Seite vertikal gestapelt angezeigt. 

Weitere Informationen finden Sie unter Die Navigation gestalten.

Padding

Squarespace-Websites verfügen oft über integriertes Mobile-Padding, das hilft, Ihre Website für kleinere Browser und Responsive Design zu optimieren. Dies bedeutet, dass Abstands- und Padding-Änderungen, die Ihre Website auf einem Computer beeinflussen, möglicherweise nicht immer das Erscheinungsbild auf Mobilgeräten beeinflussen.

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.

Verwenden Sie das Style-Menü zur Anpassung Ihres mobilen Designs oder deaktivieren Sie mobile Pop-ups im Display- und Timing-Menü.

Seitentitel und Logos

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

Der Stil Ihres Website-Titels oder -Logos hängt vom Layout Ihrer Website-Kopfzeile ab. Klicken Sie im Kopfzeilen-Editor auf das Mobile-Symbol, um das Layout zu ändern.

Im Allgemeinen werden dein Seitentitel und Logo auf einem Mobilgerät in einer ähnlichen Position bleiben. Wenn sich dein Seitentitel zum Beispiel auf dem Desktop in der rechten oberen Ecke befindet, wird er normalerweise auch in der rechten oberen Ecke des Mobilgeräts angezeigt.

Eine Aufschlüsselung darüber, wie der Website-Titel jedes Template auf Mobilgeräten angezeigt wird, finden Sie unter Website-Titel und Logo-Anzeige.

Shop-Seiten und E-Commerce

Kunden können auf deiner Website per Mobilgerät genauso einkaufen, wie sie es mit einem Desktop-PC 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 vertikal in einer oder zwei Spalte(n) gestapelt. 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 Ihrer Website ab.

  • Mehrere Produktbilder werden in einer Slideshow angezeigt, durch die Käufer wischen können.
  • Die Kategorienavigation wird horizontal angezeigt, damit Käufer durch sie wischen können.
  • Wenn der Warenkorb in den Kopfzeileneinstellungen aktiviert ist, wird er immer oben auf der Seite angezeigt. Wenn Sie das Warenkorbsymbol deaktivieren, wird es nur am unteren Rand der Seite angezeigt, wenn jemand ein Produkt zu seinem Einkaufswagen hinzufügt.
  • Die Schnellansicht und die Artikelvorschau sind auf Mobilgeräten derzeit nicht verfügbar.
  • Mehrere Produktbilder werden in kleinen Vorschaubildern angezeigt oder auf Produktdetail-Seiten gestapelt.
  • Die Kategorienavigation wird normalerweise als Dropdown-Menü Filter angezeigt. Bei Supply wird sie im Navigationsmenü angezeigt.
  • Der Warenkorb erscheint, nachdem der Kunde mindestens einen Artikel hinzugefügt hat. In den meisten Templates wird sie in einer schwarzen Leiste für Mobilgeräte am unteren Rand der Website angezeigt.
  • Momentan sind Schnellansicht und Produktbild-Zoom auf Mobilgeräten nicht verfügbar.
  • Erweiterte und einzigartige Shop-Seiten haben besondere Produkt-Features. In einigen Templates kannst du Änderungen am Erscheinungsbild deines Warenkorbs auf Mobilgeräten vornehmen.

Text und Schriftarten

Schriftarten behalten in der Regel den gleichen Stil auf Mobilgeräten, aber große Schriftarten wie Überschriften können nach unten skaliert werden, um sie an die Breite des Browsers anzupassen. Wenn Text auf Mobilgeräten überlappt, änderst du 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

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

  • Cover-Seiten – Cover-Seiten passen sich an Mobilgeräte basierend auf ihrem Layout an.
  • Seitenspezifische Kopf- und Fußzeilen – Bei Templates, die Seitenkopf- oder Fußzeilenunterstützen, wird der Inhalt auf Mobilgeräten angezeigt.
  • Parallax ScrollingParallax 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.
  • SeitenleistenSeitenleisten 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 müssen Sie den Inhaltsbereich transparent machen, damit das Hintergrundbild angezeigt wird.

Auf Desktops und Mobilgeräten wird dasselbe Hintergrundbild angezeigt. Im Zuge der Anpassung an den längeren und schmaleren Browserbildschirm auf einem Mobilgerät können Hintergrundbilder zugeschnitten oder verzerrt dargestellt werden. Beachten Sie Folgendes, um dies zu vermeiden:

  • Bei der Auswahl eines Hintergrundbildes gilt es zu bedenken, dass die Form des Bildes die Darstellung auf Mobilgeräten stark beeinflussen kann.
  • In unseren Tipps zur Fehlerbehebung erfährst du Näheres über Stil-Einstellungen, die auf Mobilgeräten besonders gut funktionieren.
  • Verwenden Sie ein Mobilgerät oder eine Geräteansicht, um zu testen, wie das Hintergrundbild auf Mobilgeräten aussieht.

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

Stile für Mobilgeräte übersetzen die Features des Templates in eine für Mobilgeräte optimierte Benutzeroberfläche, die Touch-Gesten unterstützt, wie zum Beispiel einklappbare Navigationsmenüs und gut lesbare Schriftarten. Stile für Mobilgeräte sind standardmäßig aktiviert, du kannst diese jedoch bei den meisten Templates deaktivieren.

Tipp: Responsive Design ist in jede Squarespace-Website integriert und kann nicht deaktiviert werden.

Häufig gestellte Fragen

Wie entscheidet Squarespace, wann Desktop Style oder Mobile Style angezeigt werden?

Wenn Sie eine Website auf einem Mobilgerät besuchen, erkennt Squarespace automatisch ein mobiles Betriebssystem. Dies sendet ein Signal zum Anzeigen der Stile für Mobilgeräte, es sei denn, Ihre Website ist auf Version 7.0 und Sie haben sie deaktiviert.

Kann ich meine Website auf Mobilgeräten bearbeiten?

Sie können Ihre 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.

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:

War dieser Beitrag hilfreich?
44 von 121 fanden dies hilfreich
Wie wird meine Website auf Mobilgeräten dargestellt?