Kompatibilität:

WebSite X5 Evo und Pro

Heute ist das Surfen über Smartphones zur Normalität geworden. Immer mehr Nutzer besuchen Websites über mobile Geräte, Tablets oder Bildschirme mit sehr unterschiedlichen Größen. Aus diesem Grund kann die Gestaltung einer Website ausschließlich für Desktop die Nutzererfahrung erheblich einschränken: Texte werden schwer lesbar, Inhalte unübersichtlich und Menüs schwer bedienbar.


Mit WebSite X5 können Sie dieses Problem dank Responsive Design lösen: einem Ansatz, der es der Website ermöglicht, sich automatisch an verschiedene Auflösungen anzupassen und so auf jedem Gerät eine effektivere und professionellere Darstellung zu gewährleisten.


Was ist Responsive Design

Eine responsive Website ist so gestaltet, dass sie die Anordnung ihrer Elemente automatisch an den verfügbaren Platz anpasst.


Das bedeutet, dass keine unterschiedlichen Versionen derselben Website erstellt werden müssen, denn:

  • Inhalte passen sich automatisch in der Größe an;
  • Objekte werden neu angeordnet;
  • Texte und Abstände passen sich an;
  • Menüs und Bilder werden für verschiedene Bildschirmgrößen optimiert.


Das Ziel ist es, stets eine klare und funktionale Navigation zu gewährleisten, ohne dass Nutzer zoomen oder umständlich scrollen müssen.


Warum eine responsive Website erstellen

Die Wahl eines responsiven Designs bietet zahlreiche Vorteile:

  • verbessert die Benutzererfahrung;
  • macht die Website barrierefreier;
  • erleichtert die Nutzung auf mobilen Geräten;
  • wirkt sich positiv auf die SEO aus;
  • vermeidet die Notwendigkeit, separate Desktop- und Mobile-Versionen zu erstellen.


In vielen Fällen ist dies die einfachste und effektivste Lösung für die Umsetzung eines modernen Projekts.


So aktivieren Sie Responsive Design in WebSite X5

Mit WebSite X5 können Sie responsive Websites erstellen, da das Programm die Verwaltung der Inhalte vereinfacht und die Erstellung des zugrunde liegenden Codes vollständig übernimmt.


Um eine responsive Website zu erstellen, gehen Sie wie folgt vor:

1. Responsive Design aktivieren

  • Gehen Sie zu Schritt 2 - Template
  • Öffnen Sie den Bereich Auflösungen und Responsive Design.
  • Aktivieren Sie die Option Responsive Website.

2. Breakpoints verwalten

Breakpoints legen fest, bei welchen Auflösungen die Website ihre Struktur ändert, sodass Sie Desktop-, Tablet- und Smartphone-Layouts gezielt steuern können. Sie stellen die Übergänge zwischen den verschiedenen Ansichten dar. 


So legen Sie die Breakpoints fest:

  • Bleiben Sie im Fenster Auflösungen und Responsive Design im Bereich Breakpoints.
  • Die Oberfläche zeigt die standardmäßig vorgesehenen Breakpoints an, die auch in einer Tabelle aufgeführt sind. Verwenden Sie die Befehle Hinzufügen, Entfernen und Bearbeiten, um festzulegen, welche im Projekt aktiv sein sollen. 


Beispielsweise können Sie 3 Breakpoints definieren:

  • eine Desktop-Version für große Bildschirme;
  • eine Tablet-Version für mittlere Auflösungen;
  • eine Smartphone-Version für kleinere Bildschirme.


#tip - Weitere Informationen finden Sie unter Breakpoints. Wie legt man die Auflösungen für eine responsive Website korrekt fest?.


3. Texte und Abstände optimieren 

Ein besonders wichtiger Aspekt ist die Lesbarkeit der Texte, die auch auf kleineren Geräten gewährleistet sein muss.


WebSite X5 erleichtert dies durch automatische Anpassung von:

  • proportionaler Textskalierung;
  • Abständen;
  • Abständen zwischen Elementen;
  • Zeilenabständen;
  • Verteilung der Inhalte.


Vorgehensweise:

  • Wechseln Sie im Fenster Auflösungen und Responsive Design in den Bereich Texte und Ränder.
  • Aktivieren Sie die Option Automatische Reduzierung von Texten und Rändern aktivieren, um die Darstellung bei geringerer Bildschirmbreite zu optimieren.


#tip - Weitere Informationen finden Sie unter Texte und Ränder. Wie optimiert man Lesbarkeit und Abstände automatisch in responsiven Webseiten?


4. Layout für jeden Breakpoint verwalten

Für jeden Breakpoint können Sie das Layout anpassen und alle Template-Elemente optimieren:

  • Gehen Sie zu Schritt 2.
  • Öffnen Sie den Bereich Struktur des Templates.
  • Verwenden Sie die Responsive Bar, um nacheinander die verschiedenen Ansichten auszuwählen. 
  • Legen Sie für jede Ansicht fest, wie das Template dargestellt werden soll.


#tip - Weitere Informationen finden Sie unter Responsive Template. Wie passt man das Layout der Website an verschiedene Geräte an?.


5. Seiteninhalte für jeden Breakpoint verwalten 

Auch die Seiteninhalte müssen sich an unterschiedliche Auflösungen anpassen. 

6. Verhalten der Website überprüfen

Während der Gestaltung ist es wichtig, das Ergebnis zu überprüfen.

  • Klicken Sie auf Vorschau, um die Website im lokalen Browser anzuzeigen.
  • Verwenden Sie die Steuerelemente , um verschiedene Auflösungen zu simulieren, alle Breakpoints zu testen und den Inhaltsfluss zu überprüfen.


#tip - Weitere Informationen finden Sie unter Lokale Vorschau. Wie überprüft man die korrekte Funktion einer responsiven Website?


Praktische Tipps

Um ein wirkungsvolles Ergebnis zu erzielen, reicht es nicht aus, nur die verfügbaren responsiven Funktionen zu aktivieren: Es ist wichtig, jede Seite von Anfang an so zu gestalten, dass berücksichtigt wird, wie Inhalte, Bilder und Layout auf verschiedenen Geräten genutzt werden.


Hier einige praktische Tipps für ein wirkungsvolles Ergebnis:

  • wählen Sie einfache und übersichtliche Layouts;
  • vermeiden Sie zu komplexe Inhalte auf mobilen Geräten;
  • verwenden Sie optimierte Bilder;
  • prüfen Sie immer Menüs und Schaltflächen;
  • kontrollieren Sie die Lesbarkeit des Textes;
  • testen Sie jede Änderung regelmäßig.


Wenn Sie diese Aspekte bereits während der Gestaltung berücksichtigen, können Sie ein professionelleres Erlebnis bieten, die Zufriedenheit der Benutzer verbessern und jeden veröffentlichten Inhalt optimal zur Geltung bringen.


Zusammenfassung

Eine responsive Website mit WebSite X5 zu erstellen bedeutet, eine moderne, vielseitige und an aktuelle Anforderungen angepasste Website zu gestalten, die eine effektive Navigation auf Desktop, Tablet und Smartphone ermöglicht.


Dank Breakpoints, erweiterter Layoutverwaltung und Vorschauwerkzeugen können Sie problemlos ein professionelles Projekt erstellen, ohne die komplexeren technischen Aspekte direkt verwalten zu müssen: Das Programm kümmert sich automatisch um die Anpassung des Layouts, die Neuverteilung der Inhalte sowie die Optimierung von Texten und Abständen.


Ihre Aufgabe besteht vor allem darin, sich auf die Qualität der Struktur, die Organisation der Inhalte und die Benutzererfahrung zu konzentrieren und nur dann manuell einzugreifen, wenn es notwendig ist, das Endergebnis zu verfeinern und die bestmögliche Darstellung auf jedem Gerät zu gewährleisten.