Aufgrund der zunehmenden Verbreitung von Mobilgeräten und deren häufiger Nutzung für das Internet sollten Sie vor der Realisierung einer neuen Website berücksichtigen, an welche Zielgruppe Sie sich wenden und auf dieser Grundlage entscheiden, ob sie nur für die Desktop-Ansicht oder für die Navigation an allen Geräten optimiert werden soll, Eine Website, deren Layout und Inhalte sich an die Displaygröße aller Geräte anpassen, an denen sie angezeigt wird, die also sowohl für die Anzeige am Desktop als auch an Tablets und Smartphones geeignet ist, wird responsiv genannt.
|
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 |
In diesem Bereich können Sie festlegen, welche Art von Website Sie erstellen möchten. Zur Auswahl stehen:
| ▪ | Desktop-Website: Website, die für die Anzeige am Desktop optimiert ist. Das bedeutet, die Website wird an Mobilgeräten genauso dargestellt, wie am Computer. Das Layout und die Inhalte werden nicht den Bildschirmauflösungen angepasst, sondern können lediglich über den Browser gezoomt werden. |
| ▪ | Responsive Website: Website, die für alle Gerätetypen optimiert ist, vom Desktop bis hin zum Smartphone. Dies bietet den Nutzern einen höheren Navigationskomfort, unabhängig von dem Gerät, das sie zum Surfen nutzen. |
Für die Erstellung einer Desktop-Website müssen Sie die
| ▪ | Auflösung der Website festlegen: einen Wert in Pixeln, der der Breite der Seiten Ihrer Website entspricht. Der voreingestellte Standardwert variiert je nach gewählter Vorlage und kann frei verändert werden. |
|
Der Standardwert der Auflösung der Website ist für eine Bildschirmauflösung von 1024x768 Pixeln optimiert. |
Wenn Sie hingegen eine Responsive Website erstellen möchten, müssen Sie die Umbruchpunkte festlegen.
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:
| ▪ | Desktop: 960 Pixel |
| ▪ | Tablet im Landscape-Modus: 720 Pixel |
| ▪ | Tablet im Porträt-Modus: 600 Pixel |
| ▪ | Smartphone-Ansicht im Landscape-Modus: 480 Pixel |
| ▪ | Smartphone-Ansicht im Porträt-Modus: weniger als 480 Pixel |
Gleich darunter wird dagegen die Linie der eingestellten Auflösungen angezeigt, die standardmäßig beim Öffnen eines neuen Projekts folgende 3 Umbruchpunkte vorschlägt :
| ▪ | Desktop: definiert die Größe, über der die Website immer im Desktop-Modus angezeigt wird. |
| ▪ | Zwischenpunkt: Es handelt sich um einen Umbruchpunkt, 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 diesen 3 Umbruchpunkten standardmäßig zugeordneten Auflösungen werden automatisch der jeweils gewählten Vorlage entnommen.
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 im Fenster Struktur der Vorlage und, die im Browser erscheint, der für der Vorschau der Website verwendet wird.
Neben der Anzeige auf der Leiste der eingestellten Auflösungen sind die Umbruchpunkte in einer Tabelle mit folgenden Angaben aufgelistet:
| ▪ | Umbruchpunkt: In dieser Spalte werden alle für das Projekt aktivierten Umbruchpunkte aufgeführt. Jeder Umbruchpunkt wird durch den Wert der Auflösung gekennzeichnet, bei der er aktiviert wird. |
| ▪ | Ansichten: In dieser Spalte werden alle Ansichten angegeben, die durch die Umbruchpunkte definiert werden. Neben jeder Ansicht erscheint das Symbol einer Kugel, jeweils in unterschiedlichen Farben: Dieselbe Farbe wird dann auf der Linie der eingestellten Auflösungen für das Segment verwendet, das dem Intervall entspricht, auf das die Ansicht selbst angewendet wird. Zur besseren Übersicht erscheinen die gleichen Farben auch bei den Symbolen in der Tabelle des Fensters Responsive Einstellungen und in der Auflösungsleiste im Fenster Struktur der Vorlage sowie im Browser, der für der Vorschau der Website verwendet wird. |
| ▪ | Intervalle: In dieser Spalte werden die Bereiche, die von zwei aufeinander folgenden Umbruchpunkten bestimmt werden, angegeben, für die die entsprechenden Ansichten vorgeschlagen werden. Für die Desktop-Ansicht liegt der Bereich nicht zwischen zwei Umbruchpunkten, sondern wird in der Regel oberhalb des obersten Umbruchpunkts definiert. |
Um die Liste der vorgeschlagenen Umbruchpunkte und die Ansichten, die dadurch festgelegt werden, zu bearbeiten, verwenden Sie die Funktionen neben der Tabelle:
| ▪ |  Hinzufügen: fügt einen neuen Umbruchpunkt hinzu, und legt fest, bei welcher Auflösung er aktiviert wird. Insgesamt können bis zu maximal 10 Umbruchpunkte festgelegt werden. |
| ▪ | Bearbeiten...: Erlaubt es, den Wert der Auflösung des ausgewählten Umbruchpunkts zu ändern. |
| ▪ | Entfernen: entfernt den ausgewählten Umbruchpunkt. Während der Umbruchpunkt Smartphone nicht entfernt werden kann, können Sie den Umbruchpunkt Desktop zwar markieren und löschen, auf diese Weise wird jedoch automatisch der nächst niedrige Umbruchpunkt als Umbruchpunkt Desktop festgelegt. Wird ein Umbruchpunkt entfernt, werden alle Einstellungen, die damit verbunden sind (die im Fenster Responsive Einstellungen eingestellt wurden), auf den darunter liegenden Umbruchpunkt angewendet. Es müssen mindestens 2 Umbruchpunkte konfiguriert sein: Desktop und Smartphone. |
|
Es ist nicht möglich, vorher festzustellen, wie viele Umbruchpunkte aktiviert werden müssen: Wichtig ist es, die Umbruchpunkte so einzustellen, dass die Makrokategorien, die alle möglichen Fälle einschließen, identifiziert werden, und erlauben, eine zufriedenstellende Benutzererfahrung auf jedem Gerät zu gewährleisten. |
Verwenden Sie beispielsweise für Ihre Website eine Vorlage einer Breite von 960 Pixeln, legen die 3 Standard-Umbruchpunkte 4 Intervalle fest, 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 die Desktop-Ansicht verwendet (definiert durch das Fenster Struktur der Vorlage); die Inhalte werden dabei so angeordnet, wie die Seiten im Schritt 4 - Seiten konstruiert wurden. |
| ▪ | Umbruchpunkt: 720 px - Ansicht: Ansicht 1 - Bereich: Zwischen 959 px und 720 px |
Für Auflösungen zwischen dem Desktop-Umbruchpunkt und dem Zwischenumbruchpunkt wird je nach Einstellung für diese Ansicht im Fenster Struktur der Vorlage. 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.
In der Edition Professional kann dieser Umbruchpunkt geändert oder entfernt werden und, im Gegensatz zur Edition Evolution, werden die Objekte der Seiten so positioniert, wie es für die jeweilige Ansicht im Fenster Responsive Einstellungen festgelegt wurde.
| ▪ | Umbruchpunkt: 480 px - Ansicht: Ansicht 2 - Bereich: Zwischen 719 px und 480 px |
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 Intervall die Vorlage, wie sie für diese Ansicht im Fenster Struktur der Vorlage die Breite des Seiteninhalt jedoch 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.
In der Edition Professional kann dieser Umbruchpunkt nicht nur geändert, sondern auch entfernt werden und, im Unterschied zur Edition Evolution, werden die Objekte der Seiten nicht linear dargestellt, sondern gemäß den Einstellungen für diese Ansicht im Fenster Responsive Einstellungen.
| ▪ | Umbruchpunkt: 0 px - Ansicht: Smartphone - Bereich: Unter 479 px |
In diesem Bereich wird die Website linearisiert angezeigt. Die Vorlage verwendet, die für diese Ansicht im Fenster Struktur der Vorlage und die Breite der Seite wird nicht absolut, sondern relativ angezeigt, sodass diese stets 100 % des verfügbaren Raums einnimmt. In der linearisierten Website werden alle Objekte untereinander angezeigt (dabei werden die Reihenfolge und die im Fenster erfolgte Auswahl der Objekte, die verborgen werden sollen, berücksichtigt Responsive Einstellungen) und wurden auch so eingerichtet, dass die Fläche in der Breite zu 100 % ausgefüllt wird.
Auch in der Edition Professional ist dieser Umbruchpunkt uneingeschränkt verfügbar, kann aber weder geändert noch gelöscht werden.
|
Wenn Sie mit der Professional ein Projekt bearbeiten, das mit der Evolution responsiv erstellt wurde, werden automatisch alle eingerichteten Umbruchpunkte übernommen. Wenn man mit der Version Professional arbeitet, können neue Umbruchpunkte aktiviert werden und/oder die bereits vorhandenen geändert werden. |
|
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. |
Praktische Anwendung:
