Praktische Anwendung > Schritt 2 - Vorlage > Erstellen einer mobil-optimierten Website > Erstellung der Desktop-Version und mobilen Version einer Website

Besuchern soll beim Surfen auf einer Website die beste Benutzererfahrung ermöglicht werden, dies kann unabhängig von dem verwendeten Gerät auf verschiedene Weise erreicht werden. Ein Weg führt über das responsive Webdesign, es sieht die Einrichtung einer einzigen Website vor, die sich automatisch an verschiedene Geräte anpasst. Eine andere Möglichkeit wäre, unterschiedliche Versionen derselben Website zu erstellen, jede erhält eine eigene URL und wird für ein bestimmtes Gerät optimiert.

Im Unterschied zum responsiven Webdesign erlaubt diese Konfiguration mit verschiedenen URLs, einfachere Projekte zu verwalten, die ad hoc für bestimmte Geräte konzipiert werden. Der Nachteil jedoch ist, dass eventuelle Aktualisierungen und Änderungen dann für alle Projekte wiederholt werden müssen.

Wenn man zum Beispiel eine Desktop-Version, eine Tablet- und eine Smartphone-Version für eine Webseite erstellen möchte, kann man Introseite verwenden, um die automatische Weiterleitung auf der Grundlage der erkannten Auflösung des Browsers einzustellen.

▪	Zunächst muss dafür erst einmal die Website für die Desktop-Version erstellt werden, indem Struktur und Inhalte festgelegt werden.

▪	Klicken Sie im Schritt 1 - Website-Einstellungen \| Erweitert auf die Schaltfläche Introseite und im entsprechenden Fenster auf die Option Introseite anzeigen wählen Sie dann die Option Erkennt automatisch die Auflösung.

▪	Stellen Sie über die verfügbaren Funktionen die Liste der Umbruchpunkte ein. Klicken Sie dann auf die Schaltfläche Hinzufügen... um zusätzlich zu den standardmäßig eingestellten Umbruchpunkten einen neuen Umbruchpunkt einzustellen und den Wert auf 480px festzulegen.

Auf diese Weise erhalten Sie 3 Umbruchpunkte, die 3 verschiedene Intervalle konfigurieren: Der erste Intervall umfasst alle Auflösungen, die höher sind als die der aktuell ausgewählten Vorlage; der zweite Intervall umfasst die Auflösungen zwischen denen des manuell eingestellten Umbruchpunkts und der aktuell eingestellten Vorlage; der dritte Intervall schließlich umfasst alle Auflösungen, die unter dem manuell einstellen Umbruchpunkt liegen.

Für die Desktop-Ansicht, die dem ersten Intervall entspricht, wird automatisch das aktuelle Projekt vorgeschlagen und man muss nichts weiter tun. Für die anderen Ansichten jedoch muss der Link zu den jeweiligen am geeignetsten Website-Versionen eingerichtet werden:

▪	In Liste der Umbruchpunkte muss die „Ansicht 1“ ausgewählt werden, die dem zweiten Intervall entspricht, dann müssen Sie auf die Schaltfläche Bearbeiten... klicken, um das folgende Fenster aufzurufen Einstellungen des Umbruchpunkts.

▪	Im Feld URL für diesen Umbruchpunkt müssen Sie die URL der Website angeben, die für die Anzeige auf dem Tablet vorbereitet wurde: zum Beispiel, http//www.meinewebsite.de/tablet/, wenn dieser Site im Unterordner „Tablet“ des Hauptordners auf dem Server veröffentlichen werden soll.

▪

Wiederholen Sie die gleichen Arbeitsschritte entsprechend auch für die Smartphone-Ansicht, die dem dritten Intervall entspricht, und verlinken Sie sie mit dem relativen URL: zum Beispiel http//www.meinewebsite.de/smartphone/, wenn die Smartphone-Version der Seite im Unterordner „Smartphone“ des Hauptordners auf dem Server veröffentlicht werden soll.

Jetzt ist die Seite bereit für die Weiterleitung auf der Grundlage der erkannten Auflösung des Geräts, aber es fehlen noch die entsprechenden Websites für die Tablet- und Smartphone-Version.

▪

Um die Website für die Tablet-Version schneller zu erstellen, machen Sie zunächst eine Kopie der Desktop-Website: Wählen Sie im Startfenster Auswahl des Projekts das Projekt der Desktop-Website aus und klicken Sie auf die Schaltfläche Duplizieren. Klicken Sie dann auf die Schaltfläche Umbenennen: um entsprechend den Namen des neuen Projekts zu ändern.

▪	Öffnen Sie die Kopie des Projekts und bringen Sie alle Änderungen an der Vorlage und an den Inhalten an, die als geeignet betrachtet werden.

▪	Klicken Sie im Schritt 1 - Website-Einstellungen \| Erweitert das Fenster Introseite an, und deaktivieren Sie die Option Introseite anzeigen.

▪	Sobald das Projekt für die Tablet-Version der Website beendet wurde, wiederholen Sie denselben Vorgang, um auch das Projekt für die Smartphone-Version zu erstellen.

Zur Veröffentlichung der Websites auf dem Server gehen Sie bitte wie folgt vor:

▪

Veröffentlichung der Desktop-Version: Die Desktop-Version der Website ist diejenige, die mit Introseite assoziiert ist. Bei der Veröffentlichung wird eine Datei erstellt (index.html), die dem Introseite entspricht, sie wird im Veröffentlichungsordner gespeichert. Für die für die anderen Versionen der Websites eingerichteten URLs müssen auf dem Server entsprechende Unterverzeichnisse erstellt werden: „Tablet“ und „Smartphone“.

Danach ist die Desktop-Version online und im Introseite ist der Code aktiv, der die Auflösung des Browser erkennt und entsprechend die Weiterleitung zu den anderen Website-Versionen einrichtet.

▪	Veröffentlichung der Tablet-Version der Website: Damit die Weiterleitung auf der Seite Introseite zur Tablet-Version der Website funktioniert, muss das Projekt im Unterordner „Tablet“ veröffentlicht werden.

▪	Die Veröffentlichung der Smartphone-Version der Website: Entsprechend gilt auch: Damit die Weiterleitung auf der Seite Introseite zur Smartphone-Version der Website funktioniert, muss das Projekt im Unterordner „Smartphone“ veröffentlicht werden.

Google erlaubt ausdrücklich die Konfiguration mit separaten URLs für die Desktop- und die mobile Version derselben Website, es wird aber empfohlen, einige Notationen zu verwenden, damit die Algorithmen diese richtig interpretieren. Insbesondere verlangt Google, dass:

▪	Auf der Seite für die Desktop-Version der Tag link rel="alternate" hinzugefügt wird, der zur URL für das entsprechende Mobilgerät weiterleitet.

▪	Auf der Seite für die mobile Version wird der Tag link rel="canonical" hinzugefügt wird, der zur URL für die entsprechende Desktop-Version weiterleitet.

Diese Art von Notation zeigt den Algorithmen von Google an, dass zwei URLs gleiche Inhalte haben und als eine Seite betrachtet werden müssen und nicht als zwei unterschiedliche Seiten. Dies ist ein sehr wichtiger Aspekt, denn sollten die Desktop- und die Mobil-Version der Seite als zwei unterschiedliche Seiten betrachtet werden, werden für mobile Geräte sowohl die Desktop-URL als auch die URL für mobile Geräte angezeigt. In diesem Fall kann das Ranking für beide Seiten fallen, denn der sogenannte Duplicate Content („Doppelter Inhalt“) wird von Google beim Seitenranking bestraft.

Bei der Einstellung dieser Notationen muss auf Folgendes geachtet werden:

▪	Es muss ein Verhältnis von 1:1 zwischen den Seiten für den Desktop und den Seiten für Mobilgeräte beibehalten werden. Insbesondere muss vermieden werden, Notationen in vielen Desktop-Seiten einzufügen, die sich auf die gleiche Seite für Mobilgeräte beziehen (oder umgekehrt).

▪	Eine Weiterleitung darf nur zwischen tatsächlich auf einander bezogenen Seiten eingerichtet werden.

Bei WebSite X5 ist es am einfachsten, die Website für die mobile Version als eine identische Kopie der Website für den Desktop zu erstellen: Auf diese Weise haben beide Websites genau dieselben Seiten (Dateien mit dem selben Namen) und es ist einfach eine exakte 1: 1-Entsprechung einzurichten.

Wenn wir das vorhergehende Beispiel wieder aufnehmen und einmal annehmen, dass wir die von Google verlangten Notationen einfügen wollen, um die Versionen für Desktop, Tablet und Smartphone zu verwalten, ist Folgendes zu tun:

▪	Öffnen Sie das Projekt für die Website für die Desktop-Version. Greifen Sie bei Schritt 1 - Website-Einstellungen \| Erweitert auf das Fenster Statistiken, SEO und Code zu und öffnen Sie den Abschnitt Code.

▪	Wählen Sie im Feld Benutzerdefinierter Code die Option Vor dem </HEAD> Tag und schreiben Sie die folgenden Notationen:

Nachdem die erfolgten Änderungen gespeichert wurden, kann man an der Website für die Tablet-Version arbeiten:

▪	Öffnen Sie das Projekt der Website für die Tablet-Version und gehen Sie, wie für das andere Projekt, auf Schritt 1 - Website-Einstellungen \| Erweitert greifen Sie auf das Fenster Statistiken, SEO und Code zu und öffnen Sie den Abschnitt Code.

▪	Wählen Sie im Feld Benutzerdefinierter Code die Option Vor dem </HEAD> Tag und schreiben Sie die folgende Notation:

▪	Wiederholen Sie diese Schritte, die für die Tablet-Version erfolgt sind, nun für die Smartphone-Version: Die Notation, die eingefügt werden muss, bleibt unverändert.

Um die Funktionsweise des eben beschriebenen Verfahrens besser zu verstehen, beachten Sie bitte Folgendes:

▪	Wenn Sie die Notationen über das Fenster Statistiken, SEO und Code einfügen, werden diese automatisch in den Code aller Seiten der Website übernommen.

▪	Bei den Notationen muss als Attribut href die URL der Seite eingegeben werden, an der man arbeitet: Wenn man den String [CURPAGE] verwendet, wird die Datei, die zur Seite gehört identifiziert und automatisch vom Programm eingefügt.

▪	Auf den Seiten der Desktop-Version der Website muss der Tag link rel="alternate" verwendet werden, um alle alternativen Möglichkeiten anzuzeigen: Im spezifischen Fall wurde er zweimal wiederholt, um sowohl die Tablet-Version als auch die Smartphone-Version zu verbinden.

▪

In der Notation des Tag link rel="alternate" muss auch angegeben werden, wann die Smartphone- oder Tablet-Version einer Website anstelle der Desktop-Version angeboten werden. Im angegebenen Beispielcode definieren die Strings der Medienabfragen (Media query), dass bei Auflösungen unter 480px Google die URL der Smartphone-Version anbieten muss, während für Auflösungen zwischen 481px und 1024px die Tablet-Version der Website angeboten wird.

Für den Fall, dass die Websites der Versionen für Desktop, Tablet und Smartphone nicht genau dieselben Seiten enthalten und/oder Seiten enthalten, die einander entsprechen, aber unterschiedliche Namen haben, muss manuell auf den Code jeder einzelnen Seite eingegriffen werden, um die erforderlichen Notationen korrekt einzufügen.

▪	Öffnen Sie das Projekt für die Website für die Desktop-Version und wählen Sie im Schritt 3 - Sitemap die Seite, an der Sie arbeiten wollen. Klicken Sie dann auf die Schaltfläche Eigenschaften.

▪	Öffnen Sie im aufgerufenen Fenster Eigenschaften der Seite den Bereich Erweitert und positionieren Sie sich im Feld Benutzerdefinierter Code.

▪	Wählen Sie die Option Vor dem </HEAD> Tag und schreiben Sie die folgenden Notationen:

Wobei Folgendes gilt: http//www.meinewebsite.de/smartphone/page-1.html e http//www.meinewebsite.de/tablet/page-1.html sind die URLs der Seiten der Website für die Smartphone- und Tablet-Version, die der Website für die Desktop-Version entsprechen, an der man gerade arbeitet.

▪	Wiederholen Sie den letzten Schritt für alle Seiten der Website, sodass in jede die Notationen mit den URLs der Seiten für die entsprechende Smartphone- und Tablet-Version eingefügt werden.

Entsprechend ist auch für die Seiten der Website in der Smartphone- und Tablet-Version vorzugehen. In diesen Fällen muss die folgende Notation eingefügt:

Wobei Folgendes gilt: http//www.meinewebsite.de/desktop/page-1.html ist die URL der Seite der Website für die Desktop-Version, die der der Website für die Smartphone- oder Tablet-Version entspricht, an der man gerade arbeitet.

Praktische Anwendung:

-	Erstellen einer mobil-optimierten Website