Kompatibilität:

WebSite X5 Evo und Pro

Bei der Gestaltung einer Website werden Textgrößen und Abstände häufig mit Blick auf die Desktop-Ansicht festgelegt. Diese Einstellungen funktionieren jedoch auf kleineren Bildschirmen nicht immer optimal: Überschriften können zu groß wirken, Texte umbrechen ungünstig und Abstände zwischen Elementen erscheinen zu weit.


Um diese Probleme zu lösen, stellt WebSite X5 ein System zur Verfügung, das Texte und Abstände in den verschiedenen responsiven Ansichten automatisch optimiert und so Lesbarkeit und visuelles Gleichgewicht verbessert, ohne dass manuelle Anpassungen für jedes einzelne Element erforderlich sind.


Wie die automatische Optimierung funktioniert

Wenn Sie diese Funktion aktivieren, passt WebSite X5 automatisch einige grundlegende Aspekte des Layouts an:

  • Textgröße: Die Schriftgrößen werden schrittweise von der Desktop-Ansicht bis zu kleineren Auflösungen reduziert;
  • Zeilenabstand: Er passt sich automatisch proportional zur Textgröße an und gewährleistet eine gute Lesbarkeit;
  • Ränder: Sie folgen derselben proportionalen Reduktionslogik, um sich an den verfügbaren Platz anzupassen.


Es ist wichtig zu beachten, dass die Reduzierung nicht einheitlich auf alle Elemente angewendet wird, sondern einer proportionalen Logik folgt: Größere Texte werden stärker reduziert als kleinere. Dadurch bleibt die visuelle Hierarchie zwischen Titeln, Untertiteln und Absätzen auch bei geringeren Auflösungen erhalten und es wird vermieden, dass alle Texte auf dieselbe Größe vereinheitlicht werden.


Auf diese Weise passt sich die Website nicht nur im Layout an, sondern behält auch konsistente Proportionen und eine gute Lesbarkeit auf allen Geräten bei.


Wie aktiviert man die Optimierung von Texten und Rändern

Um diese Funktion zu konfigurieren:

1. Zugriff auf die Responsive-Einstellungen

  • Gehen Sie zu Schritt 2 - Vorlage. 
  • Öffnen Sie das Fenster Auflösungen und Responsive Design.
  • Rufen Sie den Bereich Texte und Ränder auf.

2. Funktion aktivieren

  •  Aktivieren Sie die Option Automatische Reduzierung von Texten und Rändern aktivieren: Nach der Aktivierung wird die Optimierung auf die gesamte Website angewendet.

3. Parameter anpassen

  • Sie können die Funktionsweise der Optimierung an Ihre grafischen Anforderungen anpassen, um das richtige Gleichgewicht zwischen visueller Wirkung und Benutzerfreundlichkeit zu finden. Insbesondere können Sie folgende Einstellungen vornehmen:
    • Maximaler Reduktionsfaktor: Legt fest, wie stark Texte und Ränder bei kleineren Auflösungen reduziert werden können. Dieser Wert stellt die theoretische maximale Reduktionsgrenze dar, wird jedoch nicht auf alle Texte gleichermaßen angewendet.
    • Mindestschriftgröße: Wird in Punkten (pt) angegeben und definiert die Größe, unter die der Text nicht reduziert werden kann. Wenn ein Text bereits kleiner ist als dieser Wert, wird er nicht verändert. Wird beispielsweise eine Mindestgröße von 12 pt festgelegt, bleiben Texte mit 10 pt unverändert.


Die festgelegte Mindestgröße dient als Referenz für die proportionale Reduzierung der Texte: Größere Schriftarten werden stärker reduziert und nähern sich dem festgelegten Maximalwert, während kleinere Schriftarten weniger stark reduziert werden.


Dieses Verhalten verhindert, dass bei kleineren Auflösungen alle Texte auf dieselbe Mindestgröße vereinheitlicht werden. Dadurch bleibt die visuelle Hierarchie zwischen Überschriften und Inhalten erhalten, was die Lesbarkeit und die Seitenstruktur verbessert.


Auf welche Elemente sie angewendet wird

Die automatische Optimierung wirkt sich auf die wichtigsten Elemente der Website aus, darunter:

  • Texte des Templates und typografische Stile;
  • Seiten- und Abschnittsüberschriften;
  • Textinhalte der Objekte (Text, Blog, Produkte usw.);
  • Ränder und Abstände von Objekten und Abschnitten.


Auf diese Weise wird ein einheitliches Verhalten im gesamten Projekt gewährleistet.


Praktische Hinweise

Für bessere Ergebnisse:

  • aktivieren Sie die Optimierung immer in responsiven Projekten;
  • überprüfen Sie die Vorschau auf mehreren Geräten;
  • vermeiden Sie zu starke Reduktionsfaktoren;
  • legen Sie eine geeignete Mindestschriftgröße fest;
  • prüfen Sie besonders sorgfältig komplexe Überschriften und Abschnitte.


Zusammenfassung

Die automatische Optimierung von Texten und Rändern ist ein wesentliches Werkzeug, um die responsive Qualität einer Website schnell zu verbessern.


Mit WebSite X5 können Sie einen Großteil der typografischen und strukturellen Anpassungen dem Programm überlassen und gleichzeitig die wichtigsten Parameter kontrollieren, ohne jedes einzelne Element manuell bearbeiten zu müssen.


Bei korrekter Anwendung verbessert sie die Lesbarkeit, die visuelle Harmonie und die Benutzererfahrung auf jedem Gerät.