Mobile Viewports für responsive Erlebnisse

Mit mobilen Viewports können Sie Ihre Adobe Target -Aktivitäten auf Bildschirmen unterschiedlicher Größe in der Vorschau anzeigen.

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

HINWEIS
  • Verwenden Sie mobile Viewports, wenn Ihre Site responsiv ist und dieselben Elemente auf Ihrer Desktop-Seite in einer anderen Konfiguration auf Ihrer mobilen Seite verwendet werden. Wenn Sie über eine separate mobile Site mit einer separaten Struktur verfügen, z. B. m.mysite.com, verwenden Sie stattdessen eine mehrseitige Aktivität.

  • Mobile Viewports sind nicht verfügbar, wenn sie von einem Umleitungsangebot überlagert werden.

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.

Im Folgenden finden Sie die Viewports und Auflösungen für beliebte Geräte. Denken Sie daran, die Darstellungsfeldgröße in Target zu verwenden.

HINWEIS

Auf verschiedenen Websites sind die Viewport-Größen für gängige Geräte aufgeführt. Ein Beispiel finden Sie unter https://viewportsizer.com/devices/. Die genauesten und aktuellsten Informationen finden Sie auf der Website des Geräteherstellers.

Gerät Viewport-Größe (Breite x Höhe) Geräteauflösung (Breite x Höhe)
iPhone 12 390 x 844 1170 x 2532
iPhone 12 Mini 360 x 780 1080 x 2340
iPhone 12 Pro 390 x 844 1170 x 2532
iPhone 12 Pro Max 428 x 926 1248 x 2778
iPhone SE 214 x 379 640 x 1136
iPhone 11 Pro Max 414 x 896 1242 x 2688
iPhone 11 Xs Max. 414 x 896 1242 x 2688
iPhone 11 414 x 896 828 x 1792
iPhone 11 Xr 414 x 896 828 x 1792
iPhone 12 Pro 375 x 812 1125 x 2436
iPhone 11 X 375 x 812 1125 x 2436
iPhone 11 Xs 375 x 812 1125 x 2436
iPhone X 375 x 812 1125 x 2436
iPhone 8 Plus 414 x 736 1080 x 1920
iPhone 8 375 x 667 750 x 1334
iPhone 7 Plus 414 x 736 1080 x 1920
iPhone 7 375 x 667 750 x 1334
iPhone 6s Plus 414 x 736 1080 x 1920
iPhone 6s 375 x 667 750 x 1334
iPhone 6 Plus 414 x 736 1080 x 1920
iPhone 6 375 x 667 750 x 1334
iPad Pro 1024 x 1366 2048 x 2732
iPad der 3. und 4. Generation 768 x 1024 1536 x 2048
iPad Air 1 und 2 768 x 1024 1536 x 2048
iPad Mini 768 x 1024 768 x 1024
iPad Mini 2 und 3 768 x 1024 1536 x 2048
Nexus 6P 411 x 731 1440 x 2560
Nexus 5X 411 x 731 1080 x 1920
Google Pixel 411 x 731 1080 x 1920
Google Pixel XL 411 x 731 1440 x 2560
Google Pixel 2 411 x 731 1080 x 1920
Google Pixel 2 XL 411 x 823 1440 x 2880
Samsung Galaxy Note 5 480 x 853 1440 x 2560
LG G5 360 W x 640 1440 x 2560
LG G4 360 W x 640 1440 x 2560
LG G3 360 W x 640 1440 x 2560
One Plus 3 480 x 853 1080 x 1920
Samsung Galaxy S9 360 x 740 1440 x 2960
Samsung Galaxy S9+ 360 x 740 1440 x 2960
Samsung Galaxy S8 360 x 740 1440 x 2960
Samsung Galaxy S8+ 360 x 740 1440 x 2960
Samsung Galaxy S7 360 x 640 1440 x 2560
Samsung Galaxy S7 Edge 360 x 640 1440 x 2560
Nexus 7 (2013) 600 x 960 1200 x 1920
Nexus 9 768 x 1024 1536 x 2048
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 1280 x 850 2560 x 1700

Um eine Aktivität für Besucher auf einem bestimmten Gerät bereitzustellen, wählen Sie im Aktivitätsdiagramm die entsprechende Zielgruppe für dieses Gerät aus. Verwenden Sie den Mobile Web Composer, um die Seite für das Gerät in der Aktivität zu bearbeiten. Wenden Sie kein Targeting an, um eine Aktivität für das gesamte digitale Erlebnis auszuführen und sicherzustellen, dass sie auf allen Geräten gut aussieht. Verwenden Sie stattdessen mobile Viewports, um eine Vorschau der Aktivität auf jeder Bildschirmgröße anzuzeigen.

Bei responsiven Sites wird Ihre Site in der Regel so konzipiert, dass sie in einer anderen Ansicht geöffnet wird, wenn ein Gerät mit einer bestimmten Bildschirmgröße darauf zugreift. Diese Bildschirmgrößen, die solche neuen Ansichten auslösen, werden auch als CSS-Haltepunkte bezeichnet. CSS-Haltepunkte sind Punkte, an denen der Website-Inhalt abhängig von der Gerätebreite reagiert, um Besuchern das optimale Layout anzuzeigen. CSS-Haltepunkte werden auch Medienabfragen genannt.

Speichern Sie Ihre CSS-Haltepunkte in Target, damit Sie Ihre Erlebnisse für jede von Ihnen definierte Ansicht in der Vorschau anzeigen können. Jedes dieser Erlebnisse wird in einem mobilen Viewport in der Target-Benutzeroberfläche 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 ist, verwenden Sie den Mobile Web Composer, um eine Site anzuzeigen, wenn Ihre Aktivität auf ein bestimmtes Gerät ausgerichtet ist.

WICHTIG

Sie können ein Erlebnis über mobile Viewports bearbeiten. Diese Änderungen gelten jedoch für alle Viewports und Geräte, nicht nur für den Viewport, in dem Sie arbeiten. Gleichermaßen wird bei der Bearbeitung eines Erlebnisses in der normalen Desktop-Ansicht die Seite für alle Bildschirmgrößen und nicht nur für die Desktop-Ansicht geändert. Derzeit unterstützt Target keine Viewport-spezifischen Seitenänderungen.

Mobile Viewport-Konfiguration

Konfigurieren Sie mobile Viewports, die Sie beim Erstellen Ihrer Erlebnisse verfügbar machen möchten.

  1. Klicken Sie auf Administration > Visual Experience Composer.

  2. Klicken Sie im Abschnitt Mobile Viewports configuration auf Hinzufügen.

    Viewport hinzufügen

    Oder

    Um die Konfiguration eines vorhandenen mobilen Viewports zu ändern, wählen Sie diesen Viewport aus und klicken Sie dann auf das Symbol Bearbeiten (Stift).

  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. Geben Sie die Bildschirmgröße des Mobilgeräts mit Breite und Höhe an.

    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 dieses Gerät, wenn Sie die Seite aufrufen. Target Wenn es beispielsweise auf Ihrer responsiven Site ein anderes Erscheinungsbild für Android als für iOS gibt, imitiert Target dieses Verhalten.

  6. Klicken Sie auf Speichern.

HINWEIS

Wenn Sie versuchen, einen verwendeten mobilen Viewport zu löschen, wird die folgende Meldung angezeigt: "Dieser Viewport ist derzeit mit einer oder mehreren Aktivitäten verknüpft. Sie müssen den Viewport aus diesen Aktivitäten entfernen, um ihn löschen zu können“.

Responsive Erlebnisse erstellen

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 (VEC) auf das Zahnradsymbol Einstellungen und wählen Sie dann Mobile Viewports hinzufügen aus.

    Option "Mobile Viewports"

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

    Mobile Viewports aktivieren

    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. Sie ändern beispielsweise den Text in einer Überschrift.

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

    iPhone 11 Pro Maximales responsives Erlebnis

  5. Schalten Sie bei Bedarf zwischen dem Hoch- und dem Querformatmodus um, indem Sie auf das gewünschte Ausrichtungssymbol klicken.

    Ausrichtungsoptionen

Schulungsvideos

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

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

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 Badge "Überblick"

In diesem Video finden Sie Informationen zum Einrichten von mobilen Viewports, angefangen bei 4:40 Uhr im Video.

Auf dieser Seite