Kompatibilität:

WebSite X5 Evo und Pro

Eine responsive Website  ist eine Website, bei der das Layout und die Inhalte sich dem Verhalten und dem Gerät des Nutzers anpassen. Dabei spielen Faktoren wie die Bildschirmgröße, die Plattform und die Ausrichtung des Geräts eine Rolle. Wenn der Nutzer zum Beispiel von seinem Desktop-PC auf ein Tablet oder ein Smartphone wechselt, passt sich die responsive Website automatisch der neuen Auflösung an, wodurch die Inhalte und Interaktionsmöglichkeiten optimal genutzt werden können.


Das Prinzip, das dem responsiven Design zugrunde liegt, ist daher, dass keine unterschiedlichen Versionen derselben Website erstellt werden brauchen: Jede Website muss sich an die wachsende Vielfalt der Geräte, mit denen sie genutzt wird, anpassen können.


Um dies zu erreichen, verwendet das responsive Webdesign eine Mischung aus Gestaltungsrastern, sogenannten Grids, Layouts und flexiblen Bildern, sowie CSS-Mediaqueries. Unabhängig von den verwendeten technischen Mitteln ist es für die Erstellung einer responsiven Website wichtig, genau zu verstehen, welche Ziele diese Art der Gestaltung hat und wie diese Ziele die Art beeinflussen, wie die Inhalte angeordnet und verwaltet werden.


Mit dem Zweck, eine positive Nutzererfahrung in den verschiedensten Verwendungszusammenhängen zu erlauben, setzt sich das responsive Webdesign unter anderem folgende Ziele:

  • das Layout muss an die größtmögliche Anzahl von möglichen Bildschirmauflösungen angepasst sein (vom Smartphone bis zum Desktop);
  • die Bildgrößen müssen an die Auflösung und die Bildschirmgröße angepasst sein (und in der Regel alle anderen Inhalte mit fester Breite);
  • das Layout der auf der Seite für die mobilen Geräte mit kleinem Display wird vereinfacht;
  • die nicht wesentlichen Elemente werden auf diesen Geräten ausgeblendet;
  • für Geräte mit Touchscreen wird eine entsprechende Benutzeroberfläche bereitgestellt.

Wenn man sich diese Mindestziele vor Augen hält und den eigentlichen Zweck, nämlich die bestmögliche Benutzererfahrung zu gewährleisten, unabhängig vom verwendeten Gerät, kann man mit WebSite X5 responsive Websites erstellen, mithilfe der Tatsache, dass das Programm die Verwaltung der Inhalte vereinfacht und die Erstellung des Codes für die Seiten vollständig übernimmt.


Um eine responsive Website zu erstellen, sollen Sie so vorgehen:

  • Gehen Sie auf Schritt 2> Auflösungen und responsives Design und wählen Sie die Option Responsive Website aus
  • Definieren Sie dort die Liste der Umbruchpunkte für Ihre Website (mehr Informationen dazu: So definieren Sie die Umbruchpunkte einer responsiven Website).
  • Gehen Sie auf Schritt 2 > Struktur des Templates und definieren Sie mit der Responsive-Leiste, wie die Website bei jeder Auflösung angezeigt werden muss (mehr Informationen dazu: So stellen Sie eine responsive Vorlage ein).   
  • Die Inhalte der Seite sollen sich auch korrekt anpassen. Nachdem Sie Ihre Seite für die Desktop-Ansicht erstellt haben, öffnen Sie mit der Schaltfläche das Fenster Responsive Einstellungen (mehr Informationen dazu: So verwalten Sie die Inhalte einer responsiven Website). 
  • Wählen Sie die gewünschte Auflösung aus der Responsive-Leiste, aus der Desktop bis zum Smartphone. 
  • Klicken Sie bei jeder Auflösung auf der Schaltfläche Anordnung und definieren Sie dann durch Klick, wie die Objekte angeordnet werden müssen  (mehr Informationen dazu: Wie funktioniert das Verfahren der Anordnung der Objekte). 
  • Eventuell können Sie bei manchen Auflösungen einige Elemente mit dem Befehl   Objekt einblenden/ausblenden verbergen.
  •  Wenn Sie mit der Pro-Edition arbeiten, können Sie definieren, dass einige Objekte auf der nächsten Zeile angezeigt werden. Darum sollen Sie auf der Schaltfläche  Zeilenumbruch und dann auf der grauen gepunkteten Linie klicken, wo Sie einen  Zeilenumbruch aktivieren möchten (mehr Informationen dazu: Warum und wie werden Zeilenumbrüche eingestellt).
  • Nachdem Sie damit fertig sind, können Sie Ihre Website mit der lokalen Vorschau durch Klick auf der entsprechenden Schaltfläche kontrollieren. Mit den Schaltflächen können Sie die verschiedene Auflösungen sehen (mehr Informationen dazu: So überprüfen Sie mit der lokalen Vorschau Ihre responsive Website).