Responsive Design

Erfahre, wie Squarespace den Inhalt deiner Website an jedes Gerät anpasst.

Zuletzt aktualisiert: 16. Dezember 2024

Das integrierte Responsive Design von Squarespace passt deine Inhalte und Bilder an verschiedene Geräte und Bildschirmbreiten an. Mit Responsive Design können Besucher deine Website automatisch auf viele Arten anzeigen, sodass du nicht für jedes potenzielle Gerät, jeden Browser und jede Anzeigebreite separate Websites erstellen und verwalten musst.

Die Antwort auf häufig gestellte Fragen wie „Warum wird mein Banner auf Mobilgeräten zugeschnitten?“ oder „Mein Hintergrundbild ist verzerrt. Wie behebe ich das?“ liegt darin, Responsive Design zu verstehen und Bilder auszuwählen, die sich an die Form verschiedener Browser und Geräte anpassen können.

Tipp

Um mehr darüber zu erfahren, wie bestimmte Website-Elemente auf Mobilgeräten dargestellt werden, besuche Wie wird meine Website auf Mobilgeräten dargestellt?

sizes.gif

Bewährte Verfahrensweisen bei Bildern

Stell dir einen schmalen Teppich vor, der perfekt auf den Boden eines engen Raumes passt. Wenn du den Teppich in einen kleineren Raum verlegst oder ihn zur Seite drehst, passt er nicht mehr richtig.

Bilder, insbesondere Banner- und Hintergrundbilder, funktionieren genauso. Responsive Design hilft deinem „Teppich“, seine Größe und Form zu ändern. Um den besten Effekt zu erzielen, wähle Bilder aus und richte sie so ein, dass sie in so vielen „Räumen“ wie möglich gut aussehen.

Beachte bei der Auswahl eines hochzuladenden Bildes Folgendes:

Bildgröße

  • Um Empfehlungen zur Größe und Breite von Bilddateien zu erhalten, befolge unsere Best Practices für Bilder.
  • Weitere Informationen zu Best Practices für Banner-Bilder findest du unter Banner-Bilder hinzufügen.
  • Wähle Bilder mit ungefähr der gleichen Form wie der Container aus, in dem sie angezeigt werden. Verwende zum Beispiel ein breites Bild für ein Banner. Um zu verstehen, wie das Zuschneiden funktioniert, besuche Fehlerbehebung beim Zuschneiden.

Bildinhalte

  • Abstrakte Muster und Bilder ohne Text oder Rand funktionieren am besten.
  • Bei Hintergrundbildern bieten wiederholte Muster die größte Flexibilität.
  • Ändere den Bildausschnitt, um festzulegen, wie das Bild zentriert wird.
  • Wenn es wichtig ist, dass ein bestimmter Bereich des Bildes (wie eine Person oder ein Objekt) nicht abgeschnitten wird, kann es hilfreich sein, einen „Bleed“-Bereich an den Rändern hinzuzufügen, wodurch das Zuschneiden weniger auffällt.

bleed-areas.png

bleed-areas.png

Best Practices für Text

Die Größe des Texts wird automatisch an den Bildschirm angepasst.

Tipps:

  • Füge Text als Beschriftung, Overlay oder direkt auf der Seite hinzu, anstatt Bilder zu verwenden, die Text enthalten. Dies reduziert Probleme beim Zuschneiden, da die Schriftarten mit der Breite des Browsers skaliert werden. Suchmaschinen können es auch für Ergebnisse indizieren.
  • Einige Templates der Version 7.0 bieten eine fein abgestimmte Kontrolle darüber, wie die Textgröße auf Mobilgeräten angepasst wird.

Inhalte werden auf Mobilgeräten neu angeordnet

Im Kreativen Editor kannst du deine Inhalte für dein mobiles Layout unabhängig vom Computer-Layout neu anordnen.

Im klassischen Editor werden Inhalte auf Mobilgeräten vertikal gestapelt. Dies erleichtert die Navigation auf deiner Website und trägt dazu bei, dass Bilder und Texte in einem kleineren, schmaleren Browser sichtbar bleiben.

Um mehr zu erfahren:

Hinweis

Wenn deine Website Version 7.0 nutzt und du Stile für Mobilgeräte deaktiviert hast, werden deine Website-Inhalte nicht neu angeordnet oder auf Mobilgeräten gestapelt.

Inhalte reagieren auf Retina-Displays unterschiedlich

Die Darstellung deiner Website auf Retina- und HD-Displays hängt von der Originalgröße der Bilder ab, die du auf deine Website hochgeladen hast.

Wenn du ein Bild hochlädst, speichern wir bis zu sieben Versionen davon, jede mit einer anderen Breite. Unser integriertes Responsive Design erkennt automatisch den Bildschirm des Besuchers und wählt die beste Bildgröße aus. Auf Retina-Displays zeigen wir ein doppelt so großes Bild wie nötig.

Hinweis

Bilder, die über Website-Stil in Version 7.0 geladen werden, wie Hintergrundbilder, sind von dieser Regel ausgenommen. Für diese Bilder zeigen wir das Originalbild immer in voller Größe.

Hier sind einige andere Bildtypen, die zu berücksichtigen sind:

  • Logos: Das Hochladen einer großen Bilddatei (doppelt so groß wie erforderlich) für dein Logo kann das Erscheinungsbild auf HD- und Retina-Displays verbessern. Dies kann jedoch zu Unschärfen auf anderen Bildschirmen und einigen Browsern führen. Berücksichtige die Zielgruppe deiner Website und verwende eine Logo-Größe, die für die meisten Bildschirme deiner Besucher geeignet ist. Du kannst die Höhe des Logos bei den meisten Templates ändern.
  • Icons: Die meisten Symbole in unseren Templates, wie Menü- und Social-Media-Symbole, werden ohne Verlust der Bildqualität skaliert, da sie auf Webschriftarten oder SVG basieren. Einige ältere oder eingestellte Templates haben bildbasierte Symbole, die auf Retina-Displays nicht skaliert werden.
  • Text: Jeder Text, der zu deiner Website hinzugefügt wird, wird für Retina-Displays ohne Qualitätsverlust skaliert.

Weitere Tipps zur Optimierung von Bildern findest du unter Bilder zur Darstellung im Internet formatieren.

Auf verschiedenen Geräten vergleichen

Der Vergleich deiner Website auf Mobilgeräten mit einem Computer ist eine gute Möglichkeit, um zu testen, wie sich deine Website an verschiedene Browsergrößen anpasst. Wenn du größere Änderungen an deiner Website vornimmst, ist es eine gute Idee, dein Handy in der Nähe zu haben und deine Website im mobilen Browser zu öffnen. Wenn du große Änderungen auf einem Computer speicherst, aktualisiere den Browser auf deinem Smartphone, um das neue Ergebnis zu sehen.

Das Testen von Änderungen auf deinem Mobilgerät bietet die genaueste Anzeige und ist die einzige Möglichkeit, Hoch- und Querformat zu untersuchen. Für eine schnelle Vorschau während der Bearbeitung auf einem Computer verwende die Geräteansicht.

Weitere Informationen darüber, wie sich die Größe deines Browserfensters auf die Formatierung deines Website-Inhalts auswirken kann, findest du unter Unterstützte Browser.

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.