Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Wie wird meine Website auf einem Mobilgerät dargestellt?

Ob Desktop-PC, Tablet oder Smartphone: Sämtliche Templates von Squarespace wurden so entworfen, dass Besucher auf Geräten aller Art bequem und einfach durch Ihre Website navigieren können.

Sämtliche Squarespace-Websites passen sich kleineren Browsern an und fügen sich in das Format eines Geräts ein. Das erreichen wir auf zwei Arten:

  • Anpassungsfähiges Design – Ihr Inhalt wird automatisch an die Größe des Browser-Fensters angepasst, in dem Ihre Website betrachtet wird.
  • Mobile Style – Die meisten Squarespace-Templates verfügen außerdem über eingebaute Mobile Styles, die automatisch aktiviert werden, wenn Ihre Website erkennt, dass Sie über ein Mobilgerät betrachtet wird. Mobile Styles beeinflussen im Regelfall die Navigation und Design-Elemente, damit Ihre Website stets für Mobilgeräte optimiert ist und auf Touch-Gesten reagiert.

Auch wenn die meisten Templates ähnliche Funktionen aufweisen, kann sich die Darstellung Ihrer Website auf Mobilgeräten je nach Template geringfügig unterscheiden. In dieser Anleitung wird beschrieben, was Sie genau von Ihrer mobilen Website erwarten können. Darüber hinaus finden Sie verschiedene Tipps zur Anpassung Ihrer Mobile Styles.

Ihre Website auf Mobilgeräten

Am einfachsten erfahren Sie, wie Ihre Website auf Mobilgeräten funktioniert, indem Sie es selbst testen. Es gibt zwei Hauptmethoden für das Betrachten der mobilen Funktionen Ihrer Website: die Geräteansicht und der Test auf Mobilgeräten und in kleineren Browsern. Wir empfehlen beide.

Geräteansicht

Die Geräteansicht stellt eine gute Möglichkeit dar, das Responsive Design Ihrer Website auf einem Desktop-PC zu testen, während Sie Änderungen vornehmen. Um die Geräteansicht zu öffnen, melden Sie sich bei Ihrer Website an und fahren Sie mit dem Mauszeiger oben im Browser über die Seite. Klicken Sie auf den dort erscheinenden Pfeil und wählen Sie den gewünschten Gerätetyp aus. Genauere Anweisungen finden Sie unter Geräteansicht.

Ihre Geräte verwenden

Die Geräteansicht vermittelt Ihnen eine allgemeine Vorstellung davon, wie Ihre Website in einem gängigen mobilen Browser angezeigt wird. Die tatsächliche Darstellung kann sich auf verschiedenen Mobiltelefonen oder Tablets jedoch geringfügig unterscheiden. So variiert etwa die Fenstergröße von Gerät zu Gerät. Auch das tatsächliche Erscheinungsbild einiger mobiler Features Ihres Templates kann auf Mobilgeräten von der Geräteansicht abweichen. Daher ist es eine gute Idee, Ihre Website mit möglichst vielen unterschiedlichen Geräten 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. Die Adresse Ihrer Website ändert sich auf Mobilgeräten nicht.

Tipp: Im Rahmen einer Test-Website können Sie den Besucherzugang (nicht den Inhaberzugang) verwenden, um sich als mobiler Besucher ein erstes Bild von Ihrer Website zu machen.

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

Google weist Websites, die für Mobilgeräte optimiert sind, eine höhere Prioritätsstufe zu. Die einzigartigen Mobile Styles der Squarespace-Templates sind somit suchmaschinenfreundlich und speziell darauf ausgelegt, bei mobilen Suchanfragen gefunden zu werden. Näheres erfahren Sie hier: SEO und Squarespace im Überblick.

Neben den speziell für Mobilgeräte optimierten Templates gibt es weitere Verfahren, mit denen Sie sicherstellen, dass Ihre Website stets für Mobilgeräte optimiert ist. So können Sie beispielsweise den Inhalt einer Index-Seite beschränken, Blog-Auszüge verwenden, die Größe der Bilder verringern und die Anzahl der Bilder auf einer Seite minimieren. Näheres erfahren Sie hier: Ihre Squarespace-Website für Mobilgeräte optimieren.

Allgemeine Regeln

Im Allgemeinen werden die Inhalte auf einem Mobilgerät vertikal gestapelt. Dies bedeutet, dass die Besucher scrollen können, um Ihre gesamten Inhalte anzusehen, anstatt zu tippen, zoomen und die Seite in verschiedene Richtungen zu verschieben.

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

Im Folgenden werden allgemeine Regeln für bestimmte Website-Elemente auf Mobilgeräten beschrieben.

Hinweis: Einige Templates verfügen über spezifische Style-Optionen für Mobilgeräte im Style Editor. Da Sie Ihre Seite nicht über ein Mobilgerät bearbeiten können, müssen Sie diese Änderungen mithilfe eines Desktop-Computers durchführen. Hilfe dazu erhalten Sie unter Style-Änderungen vornehmen.

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 Ihres Geräts geöffnet.

Video-Dateien werden in allen von uns unterstützten Browsern für Mobilgeräte direkt auf der Seite abgespielt. Wenn Sie ein eigenes Vorschaubild als Bild-Overlay verwenden, tippen Sie es zwei Mal an, um das Video abzuspielen.

Hintergrundbilder

Hintergrundbilder werden auf Mobilgeräten unterstützt. In einigen Templates müssen Sie die Leinwand oder den Inhaltsbereich möglicherweise auf "transparent" einstellen, damit das Hintergrundbild sichtbar wird. Welche Schritte dabei zu befolgen sind, erfahren Sie hier: Farben ändern.

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 Fehlerbeseitigung erfahren Sie Näheres über Anpassungen im Style Editor, die auf Mobilgeräten besonders gut funktionieren.
  • Wenn Sie ein Hintergrundbild hinzufügen, sollten Sie ein Mobilgerät oder die Geräteansicht verwenden, um sich einen Eindruck der mobilen Darstellung zu verschaffen.

Banner-Bilder und Parallax Scrolling

Banner-Bilder werden auf Mobilgeräten immer ein wenig zugeschnitten. Beachten Sie Folgendes, um dies zu minimieren:

  • Verwenden Sie den Style Editor, um die Position eines Banners anzupassen, die Größe zu ändern oder eine feste Position zuzuordnen.
  • Muster eignen sich besser als Wörter und Landschaftsbilder besser als Porträtaufnahmen.
  • Bei Seitenbanner-Bildern können Sie den Fokuspunkt des Bildes einstellen, um zu steuern, wie das Bild zugeschnitten wird.

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. Bei den folgenden Templates wird dieser Effekt auf Mobilgeräten unterstützt.

  • Brine-Gruppe - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Cover-Seiten

Cover-Seiten passen sich Mobilgeräten entsprechend Ihres Layouts an. Näheres erfahren Sie hier: Mobile Styles der Cover-Seite.

Schriftarten

Schriftarten behalten auf Mobilgeräten im Normalfall denselben Style. Dennoch kann es passieren, dass große Schriftarten (z. B. in Überschriften) verkleinert werden, um sich der Breite des Browsers anzupassen.

Einige Templates verwenden skalierbare Schriften, bei denen die minimale und maximale Schriftgröße für Titel, Überschriften und andere wichtige Texte manuell eingestellt werden können.

Hinweis: Wenn Sie auf Mobilgeräten übereinanderliegenden Text bemerken, passen Sie die Zeilenhöhe der Schriftart im Style Editor an.

Padding

Templates weisen zwecks Nutzung auf Mobilgeräten häufig Padding auf. Dies hilft Ihnen dabei, Ihre Website für kleinere Browser zu optimieren und ein besonders anpassungsfähiges Design zu entwickeln. Dies bedeutet aber auch, dass sich Anpassungen an Zwischenräumen und Padding auf Ihrer Desktop-Site nicht zwangsläufig auf die Darstellung auf Mobilgeräten auswirken.

Galerien

Die Darstellung Ihrer Galerie-Seiten oder Galerie-Blöcke richtet sich auf Mobilgeräten nach dem gewählten Format.

Tipp: Große Bild-Dateien oder zu viele Bilder können dazu führen, dass Ihre Website langsam lädt. Um mehr zu erfahren, besuchen Sie Optimieren Sie Ihre Squarespace-Website für Mobilgeräte.

Galerie-Blöcke

Hinweis: In den meisten Fällen werden Bildbeschriftungen auf Mobilgeräten und Desktop-PCs unverändert dargestellt. Für Galerie-Blöcke im Slideshow-Format gilt jedoch, dass Beschriftungen nicht in Browsern angezeigt werden, die schmaler als 480 Pixel sind.

Galerie-Seiten

Bei jedem Template gelten eigene Regeln für die Anzeige von Galerie-Seiten auf Mobilgeräten. Im Allgemeinen bestehen folgende Varianten:

  • Grid (Raster) – Galerie-Seiten werden vertikal gestapelt. Tippen Sie auf ein Bild, um die Lightbox-Ansicht zu öffnen. Bildtitel und Beschreibungen werden nicht angezeigt.
  • Slideshow – Galerie-Seiten werden als Slideshow angezeigt. Tippen Sie zur Navigation auf den Bildschirm.
  • Wenn Ihr Template Hyperlinks oder Deeplink-URLs unterstützt, funktionieren diese auch auf einem Mobilgerät.

Die Galerie-Seiten der folgenden Templates verfügen auf Mobilgeräten über einzigartige individuelle Eigenschaften. Die Templates sind in Gruppen eingeteilt.

Template Hinweise
Avenue

Bilder sind vertikal gestapelt.

Flatiron Bilder werden unterhalb des Seitentitels und Beschreibungstexts gestapelt.
Forte Bilder sind vertikal gestapelt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt. Lightbox-Slideshow ist deaktiviert.
Galapagos Tippen Sie für Lightbox-Bilder im Rastermodus auf den Punkt in der rechten unteren Ecke, um Bildtitel und Beschreibungen anzuzeigen.
Ishimoto Bilder sind vertikal gestapelt.
Momentum Die Navigationspfeile verschwinden nach dem ersten Bild.

Montauk-Gruppe

Julia, Kent, Montauk, Om

Bilder werden unterhalb der Seitenbeschreibung gestapelt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt.
Supply Galerie-Seiten werden unterhalb des Seitentitels und Beschreibungstexts gestapelt angezeigt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt.

Tremont-Gruppe

Camino, Carson, Henson, Tremont

Bilder aus der Galerie werden auf den meisten Smartphones vertikal gestapelt. Größere Smartphones und Tablets zeigen hingegen das Original-Layout an. 
Wells  Bilder sind vertikal gestapelt. Titel und Beschreibungen der Bilder werden unter dem jeweiligen Bild angezeigt.
Wexley Bilder sind vertikal gestapelt. Die Lightbox ist deaktiviert.

 

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. 

Navigations-Menüs

Auf Mobilgeräten hängt das Erscheinungsbild Ihrer Navigationsfunktionen von dem gewählten Template ab. Die Hauptnavigation wird normalerweise hinter einem Menüsymbol (auch „Hamburger“-Symbol genannt) oder einem Link zusammengeklappt. Wenn Ihr Template Fußzeilen-Navigation unterstützt, wird diese am unteren Ende der Seite vertikal gestapelt angezeigt. Spezifische Informationen zu Ihrem Template finden Sie hier: Symbole des Navigationsmenüs

Die mobile Navigation des Templates Supply sieht beispielsweise folgendermaßen aus:

Seitenspezifische Fuß- und Kopfzeilen

Bei Templates, die Kopf- und Fußzeilen auf einer Seite unterstützen, wird der Inhalt auf Mobilgeräten angezeigt.

Produkt-Seiten und E-Commerce

Kunden können per Mobilgerät auf Ihrer Website genauso einkaufen, wie sie es mit einem Desktop-PC tun würden. Ihr Squarespace-Shop passt sich, wie alle Elemente Ihrer Website, einem kleinen Bildschirm an und ist über ein Mobilgerät navigierbar. Produkte werden vertikal in einer oder zwei Spalte(n) gestapelt. Bei individuellen Produktelement-Seiten wird das Produktbild über der Beschreibung, dem Preis und dem Button In den Einkaufswagen gestapelt angezeigt.

Die Kategorienavigation wird normalerweise als Filtermenü in Drop-Down-Form angezeigt. Bei Supply wird die Kategorienavigation im Navigationsmenü angezeigt.

Der Warenkorb erscheint, sobald der Kunde mindestens einen Artikel hinzugefügt hat. Tippen Sie auf den Warenkorb, um zur Kasse zu gelangen. In den meisten Templates wird der Warenkorb in einer schwarzen Mobiltelefon-Leiste am unteren Ende der Website angezeigt. Dabei gibt es einige wenige Ausnahmen, die weiter unten aufgeführt sind. In der folgenden Liste werden die Templates in Gruppen eingeteilt.

Template Hinweise

Brine-Gruppe

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Wird unten oder oben in der Leiste für Mobilgeräte angezeigt. Die Anzeige lässt sich verbergen.

Farro-Gruppe

Farro, Haute

Wird unten oder oben in der Leiste für Mobilgeräte angezeigt. Die Anzeige lässt sich verbergen.

Pacific-Gruppe

Charlotte, Fulton, Horizon, Naomi, Pacific

Wird als ein Button angezeigt.

Tremont-Gruppe

Camino, Carson, Henson, Tremont

Wird im Overlay der Navigation oder der Kopfzeile angezeigt. Die Anzeige lässt sich verbergen.

York-Gruppe

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Wird im Overlay der Navigation angezeigt.

Erweiterte und einzigartige Produktseiten weisen besondere Produkt-Features auf. Die Schnellansicht und die Produkt-Zoom-Ansicht sind auf Mobilgeräten derzeit nicht verfügbar. In bestimmten Templates können Sie Style-Änderungen an den Mobileinstellungen Ihres Warenkorbs vornehmen.

Standard-Seiten und Blöcke

Mit Blöcken fügen Sie Inhalte in Standard-Seiten und editierbare Bereiche aller Art ein, wie etwa in Seitenleisten, Fußzeilen und Blog-Einträge. Das anpassungsfähige Design von Squarespace stapelt Blöcke auf Mobilgeräten automatisch vertikal.

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-Blocks werden auf Mobiltelgeräten bei den meisten Templatesautomatisch ausgeblendet.

Promotional Pop-ups

Wenn auf Ihrer Website Promotional Pop-ups eingesetzt werden, können Sie 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ü.

Bildbeschriftungen

  • Galerie-Seiten - Die Darstellung auf Mobilgeräten hängt von Ihrem Template ab.
  • Bild-Blöcke und Galerie-Blöcke - Im Normalfall werden Beschriftungen 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.

Seitenleisten

Die Seitenleisten werden auf Mobilgeräten unterhalb der Seite angezeigt. Bei Ishimoto werden auf den Mobilgeräten keine Seitenleisten angezeigt.

Seitentitel und Logos

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

Eine Übersicht, wie die jeweiligen Seitentitel der Templates auf Mobilgeräten angezeigt werden, finden Sie unter Seitentitel hinzufügen.

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. 

Template-spezifische Mobile Styles

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

Mobile Style deaktivieren

Mobile Styles übersetzen die Features des Templates in eine für Mobilgeräte optimierte Benutzeroberfläche, die Touch-Gesten unterstützt, wie einklappbare Menüs und gut lesbare Schriftarten.

Mobile Style sind standardmäßig aktiviert, Sie können diese jedoch bei den meisten Templates im Menü Erweiterte Einstellungen deaktivieren. Um mehr zu erfahren, lesen Sie bitte Mobile Styles deaktivieren.

Hinweis: Anpassungsfähiges Design ist in jede Squarespace-Website integriert und kann nicht deaktiviert werden.

Domains

Die integrierten und benutzerdefinierten Domains Ihrer Website gelten sowohl für Desktop-PCs als auch für Mobilgeräte. Sie benötigen keine separate URL für Mobilgeräte.

Hinweis: Sollten Sie Schwierigkiten haben, die Domain eines Drittanbieters über ein Mobilgerät aufzurufen, stellen Sie sicher, dass Sie diese korrekt mit Ihrer Website verbunden haben. 

Lightboxen

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

  • Pinch-to-Zoom wird nicht unterstützt.
  • Lightboxen sind auf der Galerie-Seite des Templates Wexley deaktiviert.
  • Wenn Ihr Bild eine Bildunterschrift aufweist, erscheint in der unteren rechten Ecke der Lightbox ein weißer Punkt. Tippen Sie auf den Punkt, um die Bildunterschrift anzuzeigen.

lightbox-caption-mobile.png

Mouseover-Effekte

Touchscreen-Geräte wie Smartphones, Tablets und Touchscreen-Laptops unterstützen keine Mouseover-Effekte. Elemente Ihrer 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.

Häufig gestellte Fragen

Was ist der Unterschied zwischen anpassungsfähigem Design und Mobile Style?

Anpassungsfähiges Design ermöglicht die automatische Anpassung der Darstellung Ihres Seiteninhalts an die vorhandene Größe und Auflösung des Bildschirms. Alle Squarespace-Websites verfügen über integriertes anpassungsfähiges Design.

Mobile Styles sind in die einzelnen Templates integrierte Style-Regeln, welche die Anzeige des Seiteninhalts auf einem Mobilgerät neu organisieren. Diese Styles ermöglichen die optimale Darstellung des Seiteninhalts auf kleineren Bildschirmen. Eine Website mit Mobile Styles sieht auf einem Mobilgerät anders aus, als wenn Sie auf einem Desktop-Browser angezeigt wird.

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

Wenn Sie eine Website mit einem Mobilgerät aufrufen, bemerkt Squarespace automatisch das mobile Betriebssystem. Dies sendet ein Signal, wodurch die Mobile Syles angezeigt werden. Eine Ausnahme besteht, wenn Sie Mobile Styles in den Einstellungen deaktiviert haben.

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

Ja, das ist mit einem benutzerdefinierten Code möglich, aber dies ist eine Modifizierung für Fortgeschrittene. Wir sind nicht in der Lage, Ihnen bei dieser Konfiguration oder jeglichen Hinzufügungen oder Modifikationen von Codes von Dritten zu helfen. Wir empfehlen Ihnen, unser Community-Forum auf answers.squarespace.com zu besuchen, um Fragen bezüglich des Code beantwortet zu bekommen. Für weitere Informationen über das Hinzufügen von benutzerdefiniertem Code, besuchen Sie Den CSS Editor benutzen.

Kann ich meine Website über ein Mobilgerät bearbeiten?

Sie können sich auch über Ihr Mobilgerät anmelden und einige Aspekte Ihrer Squarespace-Website verwalten. Bestimmte Funktionen sind jedoch ausschließlich auf einem Desktop-PC oder Laptop verfügbar.

Mit unseren mobilen Apps können Sie bestimmte Aspekte Ihrer Website auch auf Mobilgeräten verwalten.

War dieser Beitrag hilfreich?
27 von 82 fanden dies hilfreich
Wie wird meine Website auf einem Mobilgerät dargestellt?