Mobiele viewports voor responsieve ervaringen
Met mobiele viewports kunt u een voorvertoning van uw Adobe Target -activiteiten weergeven op schermen van verschillende formaten.
De voorvertoningsfunctie voor mobiele viewport is ontworpen voor responsieve sites die goed worden weergegeven op verschillende apparaten, vensters en schermgrootten. Responsieve sites worden automatisch aangepast en aangepast aan elke schermgrootte, zoals desktops, laptops, tablets of mobiele telefoons.
-
Gebruik mobiele viewports als uw site reageert en dezelfde elementen op uw desktoppagina in een andere configuratie op uw mobiele pagina worden gebruikt. Als u een afzonderlijke mobiele plaats met een afzonderlijke structuur, zoals
m.mysite.comhebt, gebruik in plaats daarvan a multipage activiteit . -
Mobiele viewports zijn niet beschikbaar als deze worden overlapt door een overlay voor omleidingsaanbiedingen.
Een viewport wordt bepaald door de grootte van de rechthoek die wordt gevuld door een webpagina op het scherm. De viewport is de grootte van het browservenster, min de schuifbalken en werkbalken. Browsers gebruiken ‘CSS-pixels’. Voor veel apparaten, zoals apparaten met Retina-schermen, is de viewport kleiner dan de geadverteerde apparaatresolutie.
Hieronder staan de viewports en de resoluties voor populaire apparaten. Vergeet niet de viewportgrootte in Target te gebruiken.
https://viewportsizer.com/devices/ . Raadpleeg de website van de fabrikant van het apparaat voor de meest nauwkeurige, actuele informatie.Om een activiteit aan bezoekers op een bepaald apparaat te leveren, verkies het aangewezen publiek voor dat apparaat in het activiteitendiagram. Met de Mobile Web Composer kunt u de pagina bewerken in de activiteit voor dat apparaat. Om een activiteit over uw volledige digitale ervaring in werking te stellen om het te verzekeren goed kijkt over alle apparaten, pas geen het richten toe. Gebruik in plaats daarvan mobiele viewports om een voorvertoning van de activiteit op elke schermgrootte weer te geven.
Voor responsieve sites is uw site doorgaans ontworpen om in een andere weergave te worden geopend wanneer deze wordt geopend door een apparaat met een specifieke schermgrootte. De schermgrootten die de nieuwe weergaven activeren, worden CSS-onderbrekingspunten genoemd. CSS-onderbrekingspunten zijn punten waar de website-inhoud afhankelijk van de apparaatbreedte reageert om de optimale lay-out voor bezoekers weer te geven. CSS de breekpunten worden ook genoemd media vragen .
Sla de CSS-onderbrekingspunten op in Target zodat u een voorvertoning van uw ervaringen kunt weergeven voor elke weergave die u definieert. Elk van deze ervaringen wordt weergegeven in een mobiele viewport in de Target -interface. Open de weergave voor elke schermgrootte door op die viewport boven aan de weergave te klikken.
Als uw site niet reageert, gebruikt u de Mobile Web Composer om een site weer te geven als uw activiteit is gericht op een specifiek apparaat.
Configuratie van mobiele viewport task_B4B161499DC0470584ED922A4D20FCAB
Configureer mobiele viewports die u beschikbaar wilt maken tijdens het maken van uw ervaringen.
-
Klik op Administration > Visual Experience Composer .
-
Klik in de sectie Mobile viewports configuration op Add .
toe
of
Als u de configuratie van een bestaande mobiele viewport wilt wijzigen, selecteert u die viewport en klikt u op het pictogram Edit (potlood).
-
Typ een naam voor de mobiele viewport.
Geef uw mobiele viewport een beschrijvende naam die u gemakkelijk kunt herkennen. De naam mag maximaal 36 tekens lang zijn.
-
Geef de schermgrootte van het mobiele apparaat op, zowel de breedte als de hoogte.
De breedte kan 150 tot 968 pixels zijn. De hoogte kan 150 tot 1280 pixels zijn.
-
(Optioneel) Selecteer het besturingssysteem van het apparaat.
Opties:
- Android
- iOS
- Windows
- Symbian
- Blackberry
Als u Uitgebreide Composer van de Ervaring gebruikt en een werkend systeem kiest, Target emuleert dat apparaat wanneer u de pagina bekijkt. Als er bijvoorbeeld een ander uiterlijk voor Android dan voor iOS op uw responsieve site staat, navigeert Target dat gedrag.
-
Klik op Save.
Een responsieve ervaring maken task_D6332438B5EE48CCA8AF199270F1CAEF
Voeg mobiele viewports toe aan uw Target activiteiten om responsieve ervaringen voor mobiele schermen te creëren.
-
Creeer de gewenste activiteit .
-
Klik in Visual Experience Composer (VEC) op het tandwielpictogram Settings en selecteer vervolgens Add Mobile Viewports .
-
Klik op het pictogram Devices en schakel vervolgens elk apparaat in dat een mobiele viewport moet hebben.
De mobiele viewports worden vermeld van kleinste tot grootste volgens breedte.
-
Bewerk de mobiele viewports naar wens.
Alle wijzigingen die u aanbrengt in de ervaring worden op alle apparaten toegepast. U wijzigt bijvoorbeeld de tekst in een kop.
Plaats de muis boven de naam van een viewport om de grootte van de viewport weer te geven.
-
U kunt desgewenst schakelen tussen de modi Staand en Liggend door op het pictogram voor de gewenste richting te klikken.
Trainingsvideo’s
De volgende video’s bevatten meer informatie over de concepten die in dit artikel worden besproken.
De visuele Composer van de Ervaring (2 van 2) (7 :29)
De volgende demo video omvat informatie over het gebruiken van de composer van de Ervaring van Visual Studio om met mobiele viewports te werken:
- Een ervaring hernoemen en dupliceren
- Omleiden maken
- Een activiteit als doel instellen op één URL of een groep URL’s
- Een activiteit met meerdere pagina’s maken
- Ervaring voor responsieve websites voorvertonen en opbouwen
- Overlays gebruiken om typen elementen te markeren
De Voorkeur van de rekening in Adobe Target
Deze video omvat informatie over vestiging mobiele viewports, die bij 4 :40 in de video beginnen.