Mobile Viewports für responsive Erlebnisse

Mit mobilen Viewports können Sie eine Vorschau Ihrer Adobe Target-Aktivitäten auf unterschiedlich großen Bildschirmen anzeigen.

Die Vorschaufunktion für mobile Viewports wurde für responsive Websites entwickelt, damit diese auf verschiedenen Geräten und Bildschirmgrößen gut dargestellt werden. Responsive Websites passen sich automatisch an jede Bildschirmgröße an, einschließlich Desktops, Laptops, Tablets oder Mobiltelefone.

Ein Viewport wird durch die Größe des Rechtecks definiert, das von einer Webseite auf Ihrem Bildschirm ausgefüllt wird. Der Viewport entspricht der Größe des Browser-Fensters abzüglich der Bildlaufleisten und Symbolleisten. Browser verwenden „CSS-Pixel“. Für viele Geräte, zum Beispiel solche mit Retina-Bildschirm, ist der Viewport kleiner als die beworbene Geräteauflösung.

Nachstehend finden Sie die Viewports und Auflösungen für häufig verwendete Geräte. Denken Sie daran, die Viewport-Größe in Target zu verwenden.

Wenn Sie eine Aktivität für Besucher auf einem bestimmten Gerät bereitstellen möchten, wählen Sie im Aktivitätsdiagramm die entsprechende Zielgruppe für das Gerät aus. Verwenden Sie den Mobile Web Composer, um die Seite für das Gerät in der Aktivität zu bearbeiten. Wenn Sie eine Aktivität für das gesamte digitale Erlebnis ausführen und sicherstellen möchten, dass sie auf allen Geräten gut dargestellt wird, wenden Sie kein Targeting an. Verwenden Sie stattdessen mobile Viewports, um eine Vorschau der Aktivität auf jeder Bildschirmgröße anzuzeigen.

Eine responsive Site wird in der Regel so erstellt, dass beim Zugriff durch ein Gerät mit einer bestimmten Bildschirmgröße eine andere Ansicht geöffnet wird. Diese Bildschirmgrößen, die solche neuen Ansichten auslösen, werden auch als CSS Breakpoints bezeichnet. CSS Breakpoints sind Punkte, an denen der Website-Inhalt abhängig von der Gerätebreite reagiert, um Besuchern das optimale Layout anzuzeigen. CSS Breakpoints werden auch als Medienabfragen bezeichnet.

Speichern Sie Ihre CSS Breakpoints in Target, damit Sie für jede definierte Ansicht eine Vorschau für Ihr Erlebnis anzeigen können. Jedes dieser Erlebnisse wird in der Target-Benutzeroberfläche in einem mobilen Viewport angezeigt. Öffnen Sie die Ansicht für jeden Bildschirm, indem Sie entlang der Oberkante der Anzeige auf diesen Viewport klicken.

Wenn Ihre Site nicht responsiv und Ihre Aktivität auf ein bestimmtes Gerät ausgerichtet ist, können Sie zum Anzeigen einer Site den Mobile Web Composer verwenden.

Konfigurieren von mobilen Viewports

Konfigurieren Sie die mobilen Viewports, die Sie verfügbar machen möchten, während Sie Ihre Erlebnisse erstellen.

1. Klicken Sie auf Administration > Visual Experience Composer.

2. Klicken Sie im Abschnitt Konfiguration mobiler Viewports auf Hinzufügen.

   

   Oder

   Um die Konfiguration eines bestehenden mobilen Viewports zu ändern, wählen Sie diesen Viewport aus und klicken Sie anschließend auf das Stiftsymbol „Bearbeiten“.

3. Geben Sie einen Namen für den mobilen Viewport ein.

   Geben Sie Ihrem mobilen Viewport einen beschreibenden Namen, der leicht wiederzuerkennen ist. Der Name kann aus bis zu 36 Zeichen bestehen.

4. Definieren Sie die Bildschirmgröße des Mobilgeräts mit Breite und Höhe.

   Die Breite kann 150 bis 968 Pixel betragen. Die Höhe kann 150 bis 1280 Pixel betragen.

5. (Optional) Wählen Sie das Betriebssystem des Geräts aus.

   Optionen:

   • Android
   • iOS
   • Windows
   • Symbian
   • BlackBerry

   Wenn Sie Enhanced Experience Composer verwenden und ein Betriebssystem auswählen, emuliert Target dieses Gerät, wenn Sie die Seite aufrufen. Wenn beispielsweise Ihre responsive Site auf Android eine andere Oberfläche aufweist als auf iOS, ahmt Target dieses Verhalten nach.

6. Klicken Sie auf Speichern.

Erstellen eines responsiven Erlebnisses

Fügen Sie Ihren Target-Aktivitäten mobile Viewports hinzu, um responsive Erlebnisse für Mobilgeräte zu erstellen.

1. Erstellen Sie die gewünschte Aktivität.

2. Klicken Sie im Visual Experience Composer auf das Symbol Einstellungen und wählen Sie anschließend Mobile Viewports hinzufügen aus.

   

3. Klicken Sie auf das Symbol Geräte und aktivieren Sie dann jedes Gerät, das über einen mobilen Viewport verfügen soll.

   

   Die mobilen Viewports sind nach Breite aufsteigend (vom kleinsten zum größten) aufgelistet.

4. Bearbeiten Sie die mobilen Viewports nach Bedarf.

   Alle Änderungen, die Sie am Erlebnis vornehmen, werden auf allen Geräten auf das Erlebnis angewendet. Beispiel: Sie ändern den Text in einer Überschrift.

   Bewegen Sie den Mauszeiger über den Namen eines Viewports, um die Größe des Viewports anzuzeigen.

   

5. Wechseln Sie nach Bedarf zwischen dem Hoch- und Querformat, indem Sie auf das jeweilige Ausrichtungssymbol klicken.

   

Schulungsvideos

In den folgenden Videos erhalten Sie weitere Informationen zu den in diesem Artikel behandelten Konzepten.

Visual Experience Composer (2 von 2) (7:29)

Im folgenden Demonstrationsvideo erfahren Sie etwas dazu, wie Sie in Visual Experience Composer mit mobilen Viewports arbeiten:

• Erlebnis umbenennen und duplizieren
• Umleitungserlebnis erstellen
• Aktivität auf eine einzelne URL oder eine Gruppe von URLs ausrichten
• Mehrseitige Aktivität erstellen
• Erlebnisse für responsive Websites ansehen und erstellen
• Überlagerungen zum Hervorheben von Elementtypen nutzen

Kontovoreinstellungen in Adobe Target

In diesem Video finden Sie Informationen zur Einrichtung von Mobile Viewports. Dies wird ab 4:40 erläutert.