Praktische Anwendung > Schritt 2 - Vorlage > Erstellen einer mobil-optimierten Website

Eine responsive Website ist eine Website, bei der das Layout und die Inhalte sich dem Verhalten und dem Gerät des Nutzers anpassen. Dabei spielen Faktoren wie die Bildschirmgröße, die Plattform und die Ausrichtung des Geräts eine Rolle. Wenn der Nutzer zum Beispiel von seinem Desktop-PC auf ein Tablet oder ein Smartphone wechselt, passt sich die responsive Website automatisch der neuen Auflösung an, wodurch die Inhalte und Interaktionsmöglichkeiten optimal genutzt werden können.

Das Prinzip, das dem responsiven Design zugrunde liegt, ist daher, dass keine unterschiedlichen Versionen derselben Website erstellt werden brauchen: Jede Website muss sich an die wachsende Vielfalt der Geräte, mit denen sie genutzt wird, anpassen können.

Um dies zu erreichen, verwendet das responsive Webdesign eine Mischung aus Gestaltungsrastern, sogenannten Grids, Layouts und flexiblen Bildern, sowie CSS-Mediaqueries. Unabhängig von den verwendeten technischen Mitteln ist es für die Erstellung einer responsiven Website wichtig, genau zu verstehen, welche Ziele diese Art der Gestaltung hat und wie diese Ziele die Art beeinflussen, wie die Inhalte angeordnet und verwaltet werden.

Mit dem Zweck, eine positive Nutzererfahrung in den verschiedensten Verwendungszusammenhängen zu erlauben, setzt sich das responsive Webdesign unter anderem folgende Ziele:

▪	das Layout muss an die größtmögliche Anzahl von möglichen Bildschirmauflösungen angepasst sein (vom Smartphone bis zum Desktop);

▪	die Bildgrößen müssen an die Auflösung und die Bildschirmgröße angepasst sein (und in der Regel alle anderen Inhalte mit fester Breite);

▪	das Layout der auf der Seite für die mobilen Geräte mit kleinem Display wird vereinfacht;

▪	die nicht wesentlichen Elemente werden auf diesen Geräten ausgeblendet;

▪	für Geräte mit Touchscreen wird eine entsprechende Benutzeroberfläche bereitgestellt.

Wenn man sich diese Mindestziele vor Augen hält und den eigentlichen Zweck, nämlich die bestmögliche Benutzererfahrung zu gewährleisten, unabhängig vom verwendeten Gerät, kann man mit WebSite X5 responsive Websites erstellen, mithilfe der Tatsache, dass das Programm die Verwaltung der Inhalte vereinfacht und die Erstellung des Codes für die Seiten vollständig übernimmt.

Bei der Planung eines neuen Projekts für eine responsive Website sind zunächst Überlegungen zu den möglichen Umbruchpunkten anzustellen.

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.

Um diesen Mechanismus besser deutlich zu machen, wollen wir von einem Beispiel ausgehen, das Beispielbild stellt schmatisch das Verhalten einer Website dar, für die 3 Umbruchpunkte festgelegt wurden: bei 960px, bei 720px und 480px.

Mit 3 Umbruchpunkten werden 4 unterschiedliche Ansichtstypen festgelegt. Für Auflösungen von weniger als 480px wird die Website mit einem blauen Hintergrund dargestellt. Wenn das Browserfenster eine Breite von 480px erreicht, wird der Hintergrund grün und behält diese Farbe bei, bis die Breite 720px erreicht: dann wird der Hintergrund gelb. Bei 960px befindet sich dann ein anderer Umbruchpunkt, ab dem der Hintergrund dann rot ist.

Aber wie viele Umbruchpunkte müssen nun eigentlich festgelegt werden? Eine endgültige Antwort auf diese Frage ist nicht möglich: Viel hängt von den Eigenschaften der Website ab, vom Layout, vom Publikum, an das sich die Website richtet usw. Man könnte sagen, man muss so viele Umbruchpunkte festlegen, wie nötig sind, damit sich die Seite am besten an die Geräte anpasst, auf denen sie angezeigt wird.

Die vorherrschende Praxis ist, die Umbruchpunkte auf der Grundlage der Bildschirmgröße der wichtigsten Gerätearten festzulegen. Entsprechend dieser Praxis gibt WebSite X5 auf der Linie der verschiedenen Auflösungen die folgenden Umbruchpunkte an:

▪	960px: Desktop

▪	720px: Tablet im Landscape-Modus

▪	600px: Tablet im Portrait-Modus

▪	480px: Smartphone im Landscape-Modus:

▪	Weniger als 480px: Smartphone im Portrait-Modus:

Ziel ist es, die Umbruchpunkte so einzustellen, dass Makrokategorien identifiziert werden: Es gibt so viele verschiedene Geräte, dass es unmöglich ist, für jedes einen Umbruchpunkt festzulegen. Die Edition Evo von WebSite X5 unterstützt drei Umbruchpunkte, während Sie in der Edition Pro bis zu 10 Umbruchpunkte festlegen können, einschließlich solcher für die Desktop- und Smartphone-Anzeige.

Nach den Überlegungen, welche Umbruchpunkte in WebSite X5 aktiviert werden sollen, um eine responsive Webiste zu erstellen, sind folgende Schritte erforderlich:

▪	Bei Schritt 2 im Fenster Auflösungen und responsives Design die Option.

▪	Im Fenster Auflösungen und responsives Design, die Liste der Umbruchpunkte festlegen, die für die Website zu aktivieren sind, dafür werden die entsprechenden Funktionen verwendet.

Bei der Festlegung der Umbruchpunkte ist Folgendes zu berücksichtigen:

•	Standardmäßig sind alle Umbruchpunkte nach den Werten der für das Projekt gewählten Vorlage eingestellt.

•	Alle Umbruchpunkte, außer dem für Smartphones, bei dem automatisch der Wert des nächst höheren Umbruchpunktes übernommen wird, können mit der Schaltfläche Bearbeiten... frei verändert werden.

•	In der Edition Evo ist es nicht möglich, vorhandene Umbruchpunkte zu entfernen oder neue hinzuzufügen.

•

In der Edition Pro können außer dem Umbruchpunkt Smartphone alle übergeordneten Umbruchpunkte über die Schaltfläche Entfernen) entfernt werden. Der Umbruchpunkt Desktop kann markiert und entfernt werden, auf diese Weise wird jedoch automatisch der nächst niedrige Umbruchpunkt als Desktop eingestellt. Es müssen mindestens zwei Umbruchpunkte vorhanden sein - Smartphone und Desktop.

•	In der Edition Pro können (über die Schaltfläche Hinzufügen) bis insgesamt 10 Umbruchpunkte, einschließlich Desktop und Smarphone, hinzugefügt werden.

•

Der Umbruchpunkt Smartphone definiert die Mindestauflösung, unter der die Website linear angezeigt wird, d.h. alle Objekte erscheinen untereinander (ohne die verborgenen Objekte und in der Reihenfolge, die im Fenster Responsive Einstellungen festgelegt wurde). In der Breite füllen sie 100% des auf der Seite verfügbaren Platzes aus.

Alle eingestellten Umbruchpunkte sind in der Übersichtstabelle im Fenster Responsive Einstellungen angegeben.

In der Edition Evo muss nur der Smartphone-Umbruchpunkt festgelegt werden, in der Edition Pro können bis zu 10 Umbruchpunkte festgelegt werden, einschließlich Desktop-Umbruchpunkt und Smartphone-Umbruchpunkt. Wird mit der Edition Pro ein Projekt geöffnet, das mit der Edition Evo erstellt wurde, wird der Smartphone-Umbruchpunkt übernommen es können auch neue hinzugefügt werden.

Wenn man Überlegungen dazu anstellt, wie eine Website auf unterschiedlichen Geräten angezeigt wird, bemerkt man schnell, dass auch die Grafikvorlage geändert werden muss, damit eine möglichst gute Präsentation gelingt. Mit zunehmend geringer werdender Auflösung der Geräte könnten einige Elemente der Vorlage nicht mehr genügend Platz haben, um angezeigt zu werden,und in Abhängigkeit ihrer Bedeutung könnte es sinnvoll sein, sie zu entfernen.

In WebSite X5 können Sie in der Vorlage festlegen, wie die Ansichten auf der Grundlage der Umbruchpunkte wechseln sollen.

▪	Öffnen Sie nach der Auswahl einer fertigen oder leeren Vorlage die Seite Auflösungen und responsives Design, wählen Sie dort die Erstellung einer responsiven Website und aktivieren Sie alle Umbruchpunkte, die Sie verwalten möchten.

▪	Öffnen Sie, ebenfalls in Schritt 2, das Fenster Struktur der Vorlage.

▪	Wählen Sie auf der Responsiv-Leiste die Ansicht Desktop und legen Sie mit den verfügbaren Optionen fest, wie die Vorlage in den jeweiligen Ansichten, also den Intervallen der entsprechenden Auflösungen, dargestellt werden soll.

▪

Die Responsiv-Leiste enthält alle Intervalle, die bei der Einstellung der Umbruchpunkte im Fenster Auflösungen und responsives Design festgelegt wurden. Wählen Sie nach der Konfiguration der Ansicht Desktop auf der Responsiv-Leiste das nächste Intervall und nehmen Sie an der Vorlage die erforderlichen Änderungen vor.

▪	Gehen Sie absteigend analog mit allen Intervallen auf der Responsiv-Leiste vor und ändern Sie die jeweilige Vorlage.

Nachdem die Struktur der Vorlage definiert wurde, können noch der Header und die Fußzeile angepasst werden. Auch diese Bereiche können auf der Grundlage der jeweiligen Auflösung, in der die Website angezeigt wird, geändert werden.

▪	Öffnen Sie in Schritt 2 den Bereich Inhalt des Templates. Auch in diesem Fenster ist bei der Erstellung einer responsiven Website die Responsiv-Leiste verfügbar.

▪	Wählen Sie auf der Responsiv-Leiste das Intervall der Ansicht Desktop und gestalten Sie den Header und die Fußzeile der Vorlage.

▪	Wählen Sie dann auf der Responsiv-Leiste nacheinander die folgenden Intervalle und nehmen Sie am Header und der Fußzeile die notwendigen Änderungen vor.

Für jede Ansicht können Sie im Einzelnen:

•	Neue Objekte hinzufügen. Wenn Sie ein Objekt einfügen, ist es in der aktuellen Ansicht und allen kleineren, aber nicht in den größeren sichtbar (wo es automatisch verborgen wird).

•	Objekte verbergen. Markieren Sie ein Objekt, klicken Sie auf die Schaltfläche Objekt einblenden/ausblenden und legen Sie fest, ob es nur in der aktuellen Ansicht oder auch in allen kleineren Ansichten verborgen werden soll.

•

Objekte erneut anzeigen, die zuvor verborgen wurden Klicken Sie auf das Dreieck auf der Schaltfläche

Objekt einblenden/ausblenden, um das Menü zu öffnen, und dann auf die Option Verwaltung verborgener Objekte. Wählen Sie in dem geöffneten Fenster das betreffende Objekt aus und aktivieren Sie die Option Sichtbar.

•	Die Position und/oder Größe von Objekten ändern Alle anderen Eigenschaften der Objekte bleiben in allen Ansichten unverändert.

Wen ein oder mehrere Objekte in einer bestimmten Ansicht nicht mehr vollständig sichtbar sind, werden sie automatisch neu positioniert. Bei dieser Neupositionierung werden die Objekte verschoben, aber nicht in ihrer Größe verändert, daher können sie sich überschneiden. Aus diesem Grund wird empfohlen, immer in der Vorschau zu prüfen, wie der Header und die Fußzeile in den verschiedenen Ansichten dargestellt werden.

Alle fertigen, in WebSite X5 enthaltenen Vorlagen sind für responsive Websites optimiert. Das heißt, dass für jede Vorlage bereits Umbruchpunkte konfiguriert sind, die bei Auswahl der Option Responsive Website im Fenster Auflösungen und responsives Design aktiviert werden. Diese standardmäßig voreingestellten Umbruchpunkte können dann den jeweiligen Anforderungen frei angepasst werden.

Da die Einstellungen für die Responsiv-Funktionen nicht in der Projektdatei, sondern in der Vorlagendatei gespeichert werden, kann bei einem Wechsel der Vorlage eine Meldung eingeblendet werden, die dazu auffordert, festzulegen, wie die Inhalte beim Übergang von der alten zur neuen Vorlage verwaltet werden sollen.

Die Meldung weist im Einzelnen darauf hin, dass die bestehenden Einstellungen überschrieben werden und fordert auf, Folgendes festzulegen:

▪	ob die Umbruchpunkte der bestehenden Vorlage beibehalten oder durch die der neuen Vorlage ersetzt werden sollen;

▪	ob im Header und in der Fußzeile nur die Objekte der bestehenden Vorlage, nur die Objekte der neuen Vorlage oder die Objekte sowohl der alten als auch der neuen Vorlage beibehalten werden sollen.

Beim responsiven Webdesign ist es grundlegend, ganz unabhängig von der Komplexität der Website, die erstellt werden soll, dass eine gute Strategie für die Verwaltung der Inhalte entwickelt wird, dabei ist es nicht nur wichtig, welche Inhalte erscheinen sollen, sondern auch, wie diese präsentiert werden:

▪	Welche Inhalte sollen auf der Seite erscheinen?

▪	Sollen sowohl für den Desktop als auch für die mobilen Geräte dieselben Inhalte erscheinen?

▪	Falls nicht, welche Inhalte sollen für das mobile Gerät weggelassen werden?

▪	In welcher Reihenfolge sollen die Inhalte angeordnet werdeni?

▪

Etc.…

Eine gute Strategie ist es, eine Liste aller Inhalte zu machen, die auf einer Seite erscheinen sollen und diese nach wichtigeren und unwichtigeren Inhalten zu ordnen: Auf diese Weise ist es einfacher, wesentliche Inhalte zu identifizieren, also solche die immer sichtbar bleiben müssen, sowie zusätzliche Inhalte, die dagegen verborgen werden können, wenn, bei geringeren Auflösungen, nur das präsentiert werden kann, was wirklich wichtig ist. Diese Anordnung muss dann für jede Seite der Website wiederholt werden.

Um diesen Mechanismus besser zu verstehen, kann die Website eines Restaurants als klassisches Beispiel genannt werden. Wenn die Website auf einem Desktop angezeigt wird, kann man viel mit Bildern und Animationen arbeiten, die die verschiedenen Gerichte, die das Restaurant anbietet, vorstellen, um die Besucher der Website neugierig zu machen und Appetit zu machen. Wird jedoch diese Website von einem mobilen Gerät aus besucht, kann man davon ausgehen, dass der Nutzer die Beurteilungen anderer Gäste lesen möchte und die Adresse und Kontaktinformationen des Restaurants sucht, großformatige Bilder sind in diesem Fall nicht von Nutzen. Daher ist es erforderlich bei der Darstellung für das mobile Gerät an Bildern zu sparen, um die Anforderungen eines Benutzers zu erfüllen, der mit einem mobilen Gerät auf die Seite zugreift (kleiner Bildschirm, möglicherweise keine schnelle Internetverbindung u.a.) und der unterwegs schnelle und genaue Informationen benötigt.

In WebSite X5 ist es möglich, die Seite, sobald sie erstellt wurde, wie sie für die Desktop-Ansicht angezeigt wird (siehe Einrichtung einer Seite mit dem Gestaltungsraster (Grid), fetzulegen, welche Änderungen an dieser Seite in Abhängigkeit von den verschiedenen aktivierten Umbruchpunkte vorgenommen werden müssen. Genauer gesagt, muss wie folgt vorgegangen werden:

▪	Im Schritt 4 - Seiten wird die Seite erstellt, indem die erforderlichen Objekte ins Gestaltungsraster gezogen werden und dann die jeweiligen Inhalte eingegeben werden. Die so erstellte Seite ist die, die für Auflösungen angezeigt wird, die größer sind als der Desktop-Umbruchpunkt.

▪

Nachdem die Seite erstellt wurde, auf die Schaltfläche

Responsive klicken, um das folgende Fenster aufzurufen Responsive Einstellungen. In diesem Fenster wird ebenfalls die Responsiv-Leiste mit allen Ansichten angezeigt, die von den für die Website aktivierten Umbruchpunkten bestimmt werden (im Fenster Auflösungen und responsives Design ). Markieren Sie hier die Intervalle auf der Responsiv-Leiste, beginnend mit der Desktop-Ansicht und dann absteigend die weiteren bis zur Smartphone-Ansicht.

▪

Nach Auswahl der Desktop-Ausicht wird im Raster die im Fenster eingestellte Konfiguration eingestellt Erstellen der Seiten. Klicken Sie auf die Schaltfläche

Anordnung um den Modus zu aktivieren, in dem die Anordnung der ins Gestaltungsraster eingefügten Objekte vorgenommen werden kann. Für jedes in das Gestaltungsraster eingefügte Objekt wird eine Zahl auf der Grundlage der automatisch vom Programm durchgeführten Anordnung zugewiesen.

▪	Ändern Sie die Anordnung der Objekte in Abhängigkeit von der Wichtigkeit, die bestimmte Inhalte haben, und wie diese auf der Seite angeordnet werden. Um mit der Anordnung fortzufahren, gibt es verschiedene Möglichkeiten:

•	Durch die Einstellung der Anordnung \| Alle Objekte von Anfang an anordnen muss man damit beginnen, auf das Objekt zu klicken, das zuerst positioniert werden soll, und dann unter Beachtung der Reihenfolge auf alle anderen Objekte.

•

Bei der Einstellung von Anordnung | Mit der Anordnung eines Objekts fortfahren muss man auf das Objekt klicken, mit dem man dann in der Anordnung fortfahren will. Alle vorangehenden Objekte werden bestätigt, während man auf alle nachfolgenden Objekte klicken muss, um die Position in der Anordnung zu definieren.

Die Anordnung endet:

•	Wenn man auf das letzte Objekt der Seite klickt.

•	Wenn man auf Anordnung klickt\| Anordnung abschließen: wird der Vorgang beendet, indem die aktuelle Anordnung bestätigt wird.

•	Wenn man auf Anordnung klickt\| Anordnung abbrechen: wird der Vorgang beendet, indem die durchgeführten Änderungen annulliert und die ursprüngliche Anordnung wiederhergestellt wird.

WebSite X5 führt durch den Anordnungsvorgang: Sobald ein Objekt ausgewählt wird, werden alle Objekte, auf die man klicken kann ausgewählt, um das festzulegen, das folgen soll. Die für die Desktop-Ansicht eingestellte Anordnung wird auch für die anderen Ansichten angezeigt.

Beachten Sie für weitere Informationen Wie funktioniert die Anordnung der Objekte.

▪

Klicken Sie auf die Schaltfläche

Objekt einblenden/ausblenden, um den Modus zu aktivieren, in dem die Objekte als ausgeblendet eingerichtet werden können Klicken Sie auf die Objekte, die bei Auflösungen, die niedriger sind als die ausgewählte, nicht mehr angezeigt werden sollen. Klicken Sie ein zweites Mal auf die Schaltfläche

Objekt einblenden/ausblenden um diesen Modus zu verlassen

▪

Klicken Sie auf die Schaltfläche

um den Modus zu starten, in dem es möglich ist, auf die Ausrichtung der Objekte einzuwirken, indem einige gezwungen werden, einen neuen Absatz einzunehmen und damit in eine neue Zeile zu gehen, bei Auflösungen, die geringer sind, als die Desktop-Auflösung (die zur Zeit ausgewählt ist). An allen Stellen, an denen ein Zeilenumbruch eingefügt werden kann, erscheint eine graue gestrichelte Linie: Klicken Sie auf die gestrichelte Linie, um die gewünschten Zeilenumbrüche einzustellen. Klicken Sie erneut auf die Schaltfläche

Zeilenumbruch um zu bestätigen und diesen Modus zu verlassen

Für weitere Informationen sehen Sie bitte Warum und wie werden Umbrüche eingestellt.

▪

In der Edition Pro können insgesamt bis zu 10 Umbruchpunkte eingestellt werden. Sind Zwischenansichten vorhanden, klicken Sie auf die Responsiv-Leiste, um die der Desktop-Ansicht folgende Ansicht auszuwählen. Das Gestaltungsraster (Grid) wird auf der Grundlage der Einstellungen für die Desktop-Ansicht eingerichtet: Für diese neue Konfiguration können, falls erforderlich, weitere Objekte als nicht sichtbar eingerichtet werden oder weitere Umbrüche definiert werden. Wiederholen Sie diese Schritte für alle folgenden Ansichten.

▪	Wenn Sie die Smartphone-Ansicht erreichen, müssen Sie nichts mehr tun, da sämtliche noch sichtbaren Objekte einfach linearisiert werden, dass heißt auf der Grundlage der zu Beginn eingestellten Anordnung unter einander angeordnet werden.

Auf dem Bild kann man sehen, dass das Gestaltungsraster (Grid) dieselbe Struktur zeigt, die die Seite im Intervall der Auflösungen einnimmt, die in der ausgewählten Ansicht identifiziert ist. Alle Änderungen, die vorgenommen werden, bestimmen dagegen die Struktur, die die Seite im Auflösungsintervall einnimmt, die mit der unmittelbar folgenden Ansicht verbunden ist.

Wird eine neue Seite in einer Website erstellt, die reponsiv gemacht werden soll, wird empfohlen, dafür zu sorgen, dass das Gestaltungsraster nicht aus leeren Zellen besteht. Das Programm behandelt die leeren Zellen nämlich, als ob es sich um Objekte (leere Objekte) handelte und weist jedem dieser Objekte eine Position in der Anordnung zu: Diese Positionen können nicht geändert werden, beeinflussen aber die Anordnungsmöglichkeiten der tatsächlichen Objekte. Um sich für die Anordnung der Objekte eine größtmögliche Gestaltungsfreiheit zu bewahren, ist es daher besser, leere Zellen zu vermeiden und dafür lieber leere Objekte einzufügen: Wenn diese Objekte manuell eingefügt werden, beeinflussen sie die Komposition der Seite nicht und können manuell angeordnet werden.

Um die korrekte Funktionsweise einer responsiven Website zu überprüfen, müssen Sie die Website zuerst online veröffentlichen, dabei reicht es aus, die lokale Vorschau aufzurufen, die die erforderlichen Tools anbietet, um das Verhalten der Seiten bei unterschiedlichen Auflösungen zu simulieren.

▪	Klicken Sie im Schritt 4 - Seiten, nachdem die Seite estellt wurde und alles Erforderliche eingestellt wurde, damit die Seite responsiv ist, auf die Schaltfläche Vorschau um mithilfe des internen Browsers eine lokale Ansicht der Seite anzuzeigen.

▪

Im internen Browser wird eine Auflösungsleiste angezeigt, die alle für das Projekt aktivierten Umbruchpunkte anzeigt. Es reicht aus, auf den Indikator eines Umbruchpunkts zu klicken, um automatisch die Größe des Browserfenster für die entsprechende Auflösung zu ändern und die Wiedergabe der Seite zu überprüfen. Alternativ dazu ist es möglich, dass Browserfenster manuell einzustellen, um die Breite zu ändern und zu prüfen, wie sich das Layout und die Anordnung der Objekte ändern.

▪

Wenn in der Vorschau die Inhalte nicht in der erwarteten Weise angeordnet sind, klicken Sie auf folgende Schaltfläche

Zeigt die Nummer an: Die Inhalte der Seite werden eingerahmt und auf jedem Inhalt wird eine Nummer angezeigt. Dabei handelt es sich jeweils um die dem Objekt zugeordnete Nummer, das dem Inhalt während der Anordnung entsprach. Auf diese Weise ist es einfacher, zu verstehen, was Sie ändern müssen, um das gewünschte Ergebnis zu erhalten.

Es wird empfohlen, über die lokale Vorschau alle Seiten und alle Umbruchpunkte zu überprüfen, die aktiviert sind, um so sicher zu gehen, dass die Website korrekt funktioniert, wenn sie online geschaltet und auf verschiedenen Geräten angezeigt wird.

Praktische Anwendung:

-	Erstellen einer mobil-optimierten Website
-	Wie funktioniert das Verfahren der Anordnung der Objekte
-	Warum und wie werden Umbrüche eingestellt

Erstellen einer responsiven Website

Erstellen einer responsiven Website