Ein responsives Website-Design bedeutet, dass sich die Elemente auf der Website (z. B. Texte, Bilder, Videos) automatisch an das Gerät anpassen, von dem aus sie besucht wird. Dies gewährleistet das beste Nutzererlebnis.

Jeden Tag nimmt die Zahl der mobilen Nutzer im Internet zu. Im Jahr 2016 war der Anteil der mobilen Nutzer weltweit erstmals höher als der der Desktop-Nutzer und steigt seit dem regelmäßig. Eine responsive Website ist nicht nur für das Nutzererlebnis wichtig, sondern auch für dein Ranking in Suchmaschinen. Google beispielsweise schaut sich die mobile Version diner Website an, um zu bestimmen, wo sie in den Suchmaschinenergebnissen platziert werden soll. Eine schlechte mobile Website bedeutet eine schlechte Platzierung, was zu weniger Besucherzahlen führt.

Die gute Nachricht ist: Alle Website-Templates in Sitejet sind standardmäßig responsive - es sei denn, du deaktivierst diese Funktion oder nimmst erhebliche Änderungen an den Elementen vor, so dass diese nicht mehr responsive genug für die mobile Website sind. 

Wenn du das responsive Design deaktivieren möchtest, kannst du dies unter Mehr > SEO-Einstellungen tun. Entferne hierfür das Häkchen bei "Responsiv" unter der Vorschau. Dieses Kontrollkästchen ist natürlich standardmäßig aktiviert und wir raten Ihnen dringend, es aktiviert zu lassen.

Wechsel zwischen den Viewports

Über die Viewport-Icons in der oberen Menüleiste des Website-Builders kannst du zwischen der Desktop-, Tablet- und Smartphone-Ansicht wechseln. Dazu gehören Auflösungen für gängige Geräte sowie die Ausrichtung im Hoch- und Querformat. Hier kannst du auch den Zoom im Website Builder an deine Bedürfnisse anpassen.

Unabhängig davon, welche Ansicht du auswählst, kannst du für jeden Viewport den Vorschaumodus nutzen. Der Präsentationsmodus allerdings zeigt jedoch die Desktop-, Tablet- und Smartphone-Ansichten alle auf einem Bildschirm in einem neuen Browser-Tab an. Diese Vorschauen sind vollständig interaktiv.

Elemente für jeden Viewport individuell anpassen

Im Website Builder kannst du mit nur wenigen Klicks das responsive Verhalten der meisten Elemente mit verbessern - von der Änderung der Anzahl der Spalten in einer Abschnittsvorlage über die Änderung der Reihenfolge der Elemente in einem Container bis hin zum Ausblenden von Elementen.

Elemente ausblenden

In manchen Fällen kann es sinnvoll sein, bestimmte Elemente in einem bestimmten Ansichtsfenster nicht anzuzeigen oder diese neu zu bauen, damit sie deinen Bedürfnissen für die mobile Version deiner Website entsprechen. Wechsel bitte in den entsprechenden Viewport, in dem du ein Element ausblenden möchtest. In unserem Beispiel gehen wir zur Smartphone-Ansicht und blenden ein Element aus.

Doppelklicke auf das Element, den Container oder eine ganze Abschnittsvorlage in der jeweiligen Ansicht und öffne das Panel auf der linken Seite. Unter Style findest du den Reiter "Sichtbarkeit".

Erweitere nun die Option Sichtbar und deaktiviere das Kontrollkästchen „Sichtbar“. Der Website Builder zeigt dir nun an, dass dieses Element „für Mobilgeräte ausgeblendet“ ist und graut das ausgewählte Element aus:

Elemente nach Viewport anpassen

Diese wichtige Funktion eignet sich für die meisten Änderungen, die du an deinen Elementen, ganzen Containern und Abschnittsvorlagen vornehmen möchtest. Als Beispiel verwenden wir die vierspaltige Abschnittsvorlage und passen die Anzahl der auf Tablet und Mobilgeräten angezeigten Bilder an. In der Desktop-Ansicht wollen wir vier Bilder nebeneinander anzeigen.

Wenn du nun zur Tablet-Ansicht wechselst siehst du, dass vier Bilder nebeneinander zu eng aussehen, und deshalb werden wir für diese Ansicht zu zwei Spalten wechseln. In der Regel sind die meisten Presets responsiv, allerdings kann es nicht Schaden, hier je nach Inhalt das Preset bzw. das Element nochmal anzupassen.
Zwei Spalten mit jeweils zwei Bilder sehen auf Tablet natürlich viel besser aus. Nun siehst du auch, dass sich die Farbe der Einstellung geändert hat. Diese Farbe spiegelt die Farbe des Viewports widerspiegelt.

Diese Farben zeigen Änderungen an, die nur für ein bestimmtes Ansichtsfenster vorgenommen wurden.

• Keine Farbe = Die Standardeinstellung und für Desktop
• Violett = Die Änderungen wurden für die Tablet-Ansicht vorgenommen
• Gelb = Die Änderungen wurden für die Smartphone-Ansicht vorgenommen

Änderungen, die du vornimmst, wirken sich immer auch auf die anderen Ansichtsfenster aus - es sei denn, du hast bereits eine Ansichtsfenster-spezifische Anpassung vorgenommen. Wenn du z. B. die Anzahl der Spalten auf dem Desktop änderst, wirkt sich dies auch auf die Tablet- und Smartphone-Ansicht aus. Wenn du nun die Anzahl der Spalten für das Tablet änderst, wirkt sich dies auf die Smartphone-Ansicht aus und wird nur geändert, wenn du smartphone-spezifische Änderungen vornimmst. Die Farbe der Einstellung zeigt immer an, ob es ansichtsspezifische Änderungen gegeben hat.

Im Allgemeinen macht der Website Builder die meisten Abschnittsvorlagen responsive, es sei denn, du legst bestimmte Einstellungen fest, die das Erscheinungsbild in einem anderen Ansichtsfenster stören könnten. Sei also vorsichtig mit zum Beispiel absoluten Höhen und Breiten und überprüfe immer die Änderungen in jedem Ansichtsfenster. 

Mit dieser Funktion kannst du also das Erscheinungsbild deiner Website in jeder Ansicht erheblich verändern. Beispiele dafür sind: 

• Ausblenden von Elementen für bestimmte Ansichten
• die Anzahl der Spalten für jede Ansicht ändern
• Anpassung der Flexbox-Einstellungen sowie der Höhe, Breite und Ausrichtung der Elemente
• das Menü und viele andere Abschnittsvorlagen für jedes Ansichtsfenster anpassen

Bitte beachte, dass z.B. das Löschen eines Elements in einem Viewport dies auch in jedem anderen Viewport bewirkt. Wenn du ein Element nur in einem Ansichtsfenster hinzufügen möchtest, musst du es für die anderen Ansichtsfenster unsichtbar machen. Auch das Ändern von Farben oder Schriftarten wirkt sich auf alle Ansichtsfenster aus.

Responsive Einstellungen in den Design-Einstellungen

Um wieder zu einem globaleren Ansatz zurückzukehren, kannst du mit dieser Funktion in den globalen Designeinstellungen für jede Website Einstellungen vornehmen, um deine Website für jedes Ansichtsfenster ansprechender zu gestalten.

Gehe dafür im oberen Menü auf Design und passe deine Änderungen für jedes Ansichtsfenster an, indem du durch die Fenster wechselst. Praktisch ist diese Funktion, um zum Beispiel die Schriftgrößte anzupassen. Vergiss nicht, deinen Fortschritt im Anschluss zu speichern. 

Wir empfehlen dringend, den Präsentationsmodus zu verwenden, um die von dir vorgenommenen Änderungen für jedes Ansichtsfenster zu sehen. So stellest du sicher, dass die vorgenommenen Änderungen auf jedem Gerät gut aussehen.

Werde ein Teil unserer Community!

Tausche dich mit anderen Webdesignern über aktuelle Entwicklungen, Tipps und Tricks aus und präsentiere deine Lieblingsseiten. Hole dir Feedback und sprich mit uns über Funktionen, die du dir für Sitejet wünschst. Hier gelangst du direkt zur Sitejetters Community.

Zurück zum Anfang