Responsives Webdesign 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 auf jedem Endgerät.

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.

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 SEO > Website SEO tun. Entferne hierfür das Häkchen bei "Responsive" unter der Vorschau. Dieses Kontrollkästchen ist natürlich standardmäßig aktiviert und wir raten dazu, es aktiv 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, gewisse Elemente in einer bestimmten Ansicht nicht anzuzeigen oder diese neu zu bauen, damit sie den Bedürfnissen für die mobile Version deiner Website entsprechen. Wechsel dafür 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 die Website Section in der jeweiligen Ansicht und öffne das Panel auf der rechten Seite. Unter Style findest du den Reiter Sichtbar.

Erweitere nun die Option Sichtbar und deaktiviere die Checkbox für 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, Containern und Website Sections vornehmen möchtest. Als Beispiel verwenden wir eine Website Section mit 4 Spalten und passen die Anzahl der Spalten nach Endgerät an. In der Desktop-Ansicht wollen wir vier Spalten nebeneinander anzeigen.

In der Tablet-Ansicht sind 4 Spalten nebeneinander zu eng. Deshalb ändern wir die Anzahl der Spalten fürs Tablet auf zwei. Die meisten Website Sections wurden responsive erstellt und sollten auf allen Endgeräten gut aussehen. 

Beim Ändern der Spalten-Anzahl in der Tablet-Ansicht, hat sich die Farbe der Einstellung von weiß auf violett geändert. 

Diese Farben zeigen Änderungen an, die nur für eine bestimmte Ansicht vorgenommen wurden.

• Weiß = 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 in größeren Ansichten wirken sich immer auf die kleineren Versionen aus - außer, du hast bereits Änderungen in den kleineren Ansichten 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.

Die meisten Website Section sind responsive. Es kann aber sein, dass deine Änderungen dazuführen, dass die Voreinstellungen nicht mehr greifen. Sei also vorsichtig mit Einstellungen wie absoluten Höhen und Breiten und überprüfe Änderungen immer auf allen Endgeräten. 

Die responsive Einstellungen helfen dir, dass deine Website auf allen Endgeräten gut aussieht. Die häufigsten Use Cases sind: 

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

Beachte, dass nicht alle Einstellungen responsive sind. Wenn du z.B. ein Element löschst, wird es in allen Ansichten gelöscht. Wenn ein Element nur in einer Ansicht sichtbar sein soll, musst du die Sichtbarkeit in den anderen Ansichten für das Element deaktivieren. Auch das Ändern von Farben oder Schriftarten wirkt sich auf alle Ansichten aus.

Responsive Einstellungen in den Theme-Einstellungen

Diese Funktion ist auch in den Theme-Einstellungen wirksam, um ein konsistentes Design auf der ganzen Website zu schaffen, dass auf allen Endgeräten gut aussieht. 

Klicke auf Theme, wähle die gewünschte Ansicht und passe die Einstellungen entsprechend an:

Wir empfehlen, den Präsentationsmodus zu verwenden, um die von dir vorgenommenen Änderungen für jedes Engerät zu prüfen.

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