Durch die Funktionen in diesem Bereich kann die Erstellung einer responsiven Website freigeschaltet werden. Dabei können die erforderlichen Umbruchpunkte eingestellt werden, um dafür zu sorgen, dass die Website die beste Benutzererfahrung unabhängig vom für die Navigation verwendeten Gerät liefert.
Die Erstellung einer responsiven Website ist optional, daher muss die folgende Option aktiviert werden Resonsive Website zulassen.
|
Auch wenn es empfohlen wird, ist es nicht zwingend erforderlich, dass eine Website responsiv erstellt wird. Je nach Projekt könnte es beispielsweise praktischer sein, die Website in zwei verschiedenen Versionen zu erstellen, eine für den Desktop und eine mobile Version. Es kann Situationen geben, in denen die Grundoptimierung, die von WebSite X5 gewährleistet wird und die Fähigkeit der Browser ausnutzt, die Seiten zu vergrößern, um die Anzeige auf mobilen Geräten zu ermöglichen, ausreicht.
Für weitere Informationen siehe Erstellen einer mobil-optimierten Website
|
Sobald die Option Resonsive Website zulassen aktiviert wird, müssen die Umbruchpunkte definiert werden.
Ein Umbruchpunkt ist ein Punkt auf der idealen Linie, der die Auflösung der möglichen Geräte, auf denen eine Website angezeigt werden kann, zum Ausdruck bringt.
Zur Verdeutlichung wird im Fenster ein Schema angezeigt, das die wichtigsten Gerätearten zeigt.
Auf der Linie der verschiedenen Auflösungen der Geräte werden die Umbruchpunkte angegeben, die den normalerweise verwendeten Auflösungen für jedes Gerät entsprechen:
| ▪ | Tablet im Landscape-Modus: 720 Pixel |
| ▪ | Tablet im Portrait-Modus: 600 Pixel |
| ▪ | Smartphone-Ansicht im Landscape-Modus: 480 Pixel |
| ▪ | Smartphone-Ansicht im Portrait-Modus: weniger als 480 Pixel |
verbunden sind. Gleich darunter wird dagegen die Linie der eingestellten Auflösungen angezeigt, die standardmäßig beim Öffnen eines neuen Projekts 3 Umbruchpunkte vorschlägt:
| ▪ | Desktop: definiert die Größe, über der die Website immer im Desktop-Modus angezeigt wird. Die mit diesem Umbruchpunkte verbundene Auflösung wird automatisch von der Breite der gerade gewählten Vorlage übernommen. |
| ▪ | Zwischenpunkt: Es handelt sich um einen Umbruchpunkt, der automatisch vom Programm berechnet und eingestellt wird, um einen reibungsloseren Übergang von der Desktop-Ansicht zur mobilen Ansicht zu ermöglichen. |
| ▪ | Smartphone: Definiert die Mindestgröße, unter der die Website vollständig linearisiert angezeigt wird. Die mit diesem Umbruchpunkt verbundene Auflösung wird manuell durch die entsprechende Option eingestellt Gibt die Auflösung an, unter der die Website im Smartphonemodus angezeigt wird. |
Die 3 Umbruchpunkte bestimmen 4 Intervalle, die 4 verschiedenen Anzeigemodi entsprechen:
| ▪ | Für Auflösungen, die größer sind als die für den Desktop-Umbruchpunkteingestellten, wird die Vorlage für den Desktop verwendet (definiert durch das Fenster Struktur der Hauptvorlage); die Inhalte werden dabei so angeordnet, wie die Seiten im Schritt 3 - Erstellen der Seiten konstruiert wurden. |
| ▪ | Für Auflösungen zwischen dem Desktop-Umbruchpunkt und dem Zwischenumbruchpunktwird die Vorlage verwendet, die für die responsive Website eingerichtet wurde (definiert durch das Fenster Struktur der Vorlage für Mobilgeräte). In diesem wird die Breite für Seiteninhalt für die für den Zwischenumbruchpunkt definierte Auflösung eingestellt: Da das Browserfenster bis zur für den Desktop-Umbruchpunktfestgelegten Auflösung verbreitert werden kann, wird der überstehende Bereich durch Seitenhintergrund ausgefüllt. Die Objekte der Seiten sind jedoch wie im vorangegangenen Intervall angeordnet, das der Desktop-Ansicht entspricht. |
| ▪ | Für Auflösungen zwischen dem Zwischenumbruchpunkt und dem Smartphone-Umbruchpunkt ist die Website linearisiert: Dies bedeutet, dass alle Objekte untereinander angezeigt werden (berücksichtigt werden die Reihenfolge und die Auswahl der Objekte, die unsichtbar gemacht werden sollen, die im Fenster Responsive Einstellungen erfolgt ist). Wie für das vorherige Intervallwird die Vorlage verwendet, die für die responsive Website eingerichtet wurde (definiert durch das Fenster Struktur der Vorlage für Mobilgeräte), aber in diesem Fall ist die Breite des Seiteninhalt die für den Smartphone-Umbruchpunkt eingerichtete, da das Browserfenster bis zur für den Zwischenumbruchpunkt festgelegten Auflösung verbreitert werden kann und vom Seitenhintergrund ausgefüllt wird. |
| ▪ | Für Auflösungen, die geringer als derl Smartphone-Umbruchpunkt sind, bleibt die Website weiterhin linearisiert. Es wird die responsive Vorlage verwendet (definiert durch das Fenster Struktur der Vorlage für Mobilgeräte), aber im Unterschied zum vorherigen Intervall werden sowohl die Breite der Seite als auch die Breite der Objekte nicht mehr in absoluter Weise eingerichtet, sondern in relativer Weise, sodass immer 100% des verfügbaren Platzes in der Breite ausgefüllt wird. |
|
Wenn man mit der Version Professional ein Projekt mit der Version Evolution erstellt, für das die responsive Website aktiviert wurde, werden automatisch alle eingerichteten Umbruchpunkte wieder aufgenommen, einschließlich des Zwischenumbruchpunkts, der automatisch berechnet wird. Wenn man mit der Version Professional arbeitet, können neue Umbruchpunkte aktiviert werden und/oder die bereits vorhandenen geändert werden.
|
Auf der Linie der eingestellten Auflösungen nehmen die Segmente, die durch zwei Umbruchpunkte begrenzt werden, die dem Wertintervall entsprechen, für die eine bestimmte Ansicht vorgesehen ist, unterschiedliche Farben an. Zur besseren Übersicht erscheinen die gleichen Farben auch bei den Symbolen in der Tabelle des Fensters Responsive Einstellungen und auf der Auflösungsleiste, die im Browser erscheint, der für der Vorschau der Website verwendet wird.
|
Wenn ein neues Projekt begonnen wird, richtet das Programm eine vordefinierte Vorlage ein, die zufällig gewählt wird: Dieses Vorlage wird beibehalten, bis die Vorlage ausgewählt wird, die tatsächlich verwendet wird. Auf diese Weise wird der Wert des Desktop-Umbruchpunkts immer definiert: Er wird dann automatisch aktualisiert, wenn eine andere Vorlage ausgewählt wird (durch das Fenster Standard-Template) oder die Vorlage geändert wird (durch das Fenster Struktur der Hauptvorlage).
|
|
und nutzen Sie die Optionen im Fenster 
rufen Sie die offizielle Website des Dienstes auf: 