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 Sie keine unterschiedlichen Versionen derselben Website erstellen müssen, weil:

  • sich die Inhalte an den verfügbaren Platz anpassen;
  • sich die Objekte neu anordnen können;
  • sich Texte und Ränder an unterschiedliche Auflösungen anpassen können;
  • Menüs und Bilder für unterschiedliche Bildschirmgrößen optimiert werden.


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.
  • Prüfen Sie die vorgeschlagenen Breakpoints. Die Grafik hilft Ihnen dabei, die standardmäßig vorgesehenen Breakpoints zu erkennen: Sie finden sie auch in der Tabelle aufgelistet. 
  • Verwenden Sie die Befehle Hinzufügen, Entfernen und Bearbeiten, um festzulegen, welche Breakpoints Sie im Projekt tatsächlich aktivieren möchten. 


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

Neben den Seiteninhalten müssen sich auch die Elemente der Vorlage an die unterschiedlichen Auflösungen anpassen.


So konfigurieren Sie sie:

  • Gehen Sie zu Schritt 2.
  • Öffnen Sie den Bereich Struktur der Vorlage.
  • Verwenden Sie die Responsive Bar, um die verschiedenen Ansichten nacheinander auszuwählen. 
  • Legen Sie für jede Ansicht fest, wie die Elemente der Vorlage dargestellt werden sollen.


#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 auf den Seiten eingefügten Inhalte müssen sich neu anordnen können, wenn sich der verfügbare Platz ändert.


So verwalten Sie sie:

  • Gehen Sie zu Schritt 4 - Seiten und erstellen Sie die Seite für die Desktop-Ansicht.
  • Klicken Sie auf die Schaltfläche Responsive, um das Fenster Responsive-Einstellungen zu öffnen (siehe Responsive Inhalte. Wie verwaltet man Seiteninhalte und Layouts an den verschiedenen Breakpoints?). Die Inhalte passen sich automatisch an, Sie können das Ergebnis aber auch manuell optimieren.
  • Verwenden Sie die Responsive Bar, um von einer Ansicht zur nächsten zu wechseln: Beginnen Sie mit Desktop und gehen Sie bis Smartphone weiter.
  • Klicken Sie in der Desktop-Ansicht auf die Schaltfläche Reihenfolge und klicken Sie anschließend auf die verschiedenen im Raster eingefügten Objekte, um ihre Reihenfolge festzulegen. Denken Sie daran, dass WebSite X5 die Reihenfolge der Objekte in jedem Abschnitt separat verwaltet, wenn die Seite in mehrere Abschnitte unterteilt ist (siehe Responsive Objektanordnung. Wie organisiert man Inhalte korrekt in den verschiedenen Ansichten?).
  • Wenn Sie bestimmte Inhalte bei bestimmten Auflösungen ausblenden möchten, klicken Sie auf die Schaltfläche Objekt anzeigen/ausblenden und wählen Sie die Elemente aus, die ausgeschlossen werden sollen.
  • Wenn Sie die Pro-Version verwenden, können Sie erzwingen, dass einige Objekte in die nächste Zeile wechseln: Klicken Sie auf die Schaltfläche Zeilenumbruch und klicken Sie anschließend auf die gestrichelten Linien zwischen den Objekten im Raster, an denen Sie die "Umbrüche" einfügen möchten (siehe Responsive-Einstellungen. Wie erstellt man flexiblere Layouts mit Zeilenumbrüchen?).

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.