Ventanillas móviles para experiencias interactivas

Las ventanillas móviles permiten la previsualización de sus Adobe Target actividades en pantallas de diversos tamaños.

La función de previsualización de ventanilla móvil está diseñada para sitios interactivos que funcionan bien en distintos dispositivos, ventanas y tamaños de pantalla. Los sitios interactivos se ajustan automáticamente y se adaptan a cualquier tamaño de pantalla, incluidos equipos de escritorio, portátiles, tabletas o teléfonos móviles.

NOTA
  • Use ventanillas móviles si su sitio se adapta y si en la página móvil se usan los mismos elementos que en su página de escritorio, con otra configuración. Si tiene un sitio móvil independiente con una estructura separada, como m.mysite.com, utilice una actividad de varias páginas en su lugar.

  • Las ventanillas móviles no están disponibles si quedan superpuestas por una superposición de oferta de redireccionamiento.

Una ventanilla móvil está definida por el tamaño del rectángulo que se rellena con una página web en la pantalla. La ventanilla es el tamaño de la ventana del navegador, menos las barras de desplazamiento y las barras de herramientas. Los navegadores usan “píxeles de CSS”. Para muchos dispositivos, como los que tienen pantallas de retina, la ventanilla móvil es menor que la resolución anunciada para el dispositivo.

A continuación se muestran las ventanillas móviles y las resoluciones para dispositivos populares. No se olvide de usar el tamaño de la ventanilla móvil en Target.

NOTA

Diversos sitios web enumeran los tamaños de las ventanillas para dispositivos populares. Por ejemplo, consulte https://viewportsizer.com/devices/. Consulte el sitio web del fabricante del dispositivo para obtener la información más precisa y actualizada.

Device Tamaño de la ventanilla (anchura x altura) Resolución del dispositivo (anchura x altura)
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 máx. 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 de tercera y cuarta generación 768 x 1024 1536 x 2048
iPad Air 1 y 2 768 x 1024 1536 x 2048
iPad Mini 768 x 1024 768 x 1024
iPad Mini 2 y 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 ancho x 640 1440 x 2560
LG G4 360 ancho x 640 1440 x 2560
LG G3 360 ancho 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

Para enviar una actividad a visitantes en un dispositivo concreto, elija la audiencia adecuada para ese dispositivo en el diagrama de actividad. Use el Compositor web móvil para editar la página en la actividad de dicho dispositivo. Para ejecutar una actividad en toda la experiencia digital y garantizar que tenga un buen aspecto en todos los dispositivos, no aplique el objetivo. En su lugar, utilice ventanillas móviles para previsualización de la actividad en cada tamaño de pantalla.

En el caso de los sitios interactivos, el sitio suele estar diseñado para abrirse en una vista diferente cuando se accede a él desde un dispositivo con un tamaño de pantalla específico. Los tamaños de pantalla que activan las vistas nuevas se conocen como puntos de interrupción CSS. Los puntos de interrupción CSS son puntos en los que el contenido del sitio web responde en función del ancho del dispositivo para mostrar el diseño óptimo a los visitantes. Los puntos de interrupción CSS también se denominan consultas de medios.

Guarde los puntos de interrupción de CSS en Target para que pueda realizar la previsualización de sus experiencias con cada vista que defina. Cada una de estas experiencias se muestra en una ventanilla móvil en la interfaz Target. En la parte superior de la pantalla, haga clic en la ventanilla móvil correspondiente para abrir la vista de cada tamaño de pantalla.

Si el sitio no responde, utilice el Compositor web móvil para realizar la vista de un sitio si la actividad está dirigida a un dispositivo específico.

IMPORTANTE

Puede editar una experiencia desde las ventanillas móviles. Sin embargo, estos cambios se aplican a todas las ventanillas móviles y dispositivos, no solo a la ventanilla móvil en la que está trabajando. De modo similar, si edita una experiencia en la vista de escritorio normal, se cambia la página en todos los tamaños de pantalla, no solo en la vista de escritorio. Actualmente, Target no admite cambios de página específicos de la ventanilla móvil.

Configuración de ventanilla móvil

Configure las ventanillas móviles que desee que estén disponibles al crear sus experiencias.

  1. Haga clic en Administración > Compositor de experiencias visuales.

  2. En la sección Configuración de ventanillas móviles, haga clic en Añadir.

    Añadir ventanilla

    O

    Para cambiar la configuración de una ventanilla móvil existente, seleccione esa ventanilla y haga clic en el icono Editar (lápiz).

  3. Escriba un nombre para la ventanilla móvil.

    Póngale un nombre descriptivo para que sea fácil reconocerla. El nombre puede tener hasta 36 caracteres.

  4. Especifique el tamaño de pantalla del dispositivo móvil, tanto el ancho como el alto.

    La anchura puede ser de 150 a 968 píxeles. La altura puede ser de 150 a 1280 píxeles.

  5. (Opcional) Seleccione el sistema operativo del dispositivo.

    Opciones:

    • Android
    • iOS
    • Windows
    • Symbian
    • BlackBerry

    Si usa el Compositor de experiencias mejorado y elige un sistema operativo, imita ese dispositivo cuando visualiza la página. Target Por ejemplo, si hay un aspecto diferente para Android que para iOS en el sitio interactivo, Target imita ese comportamiento.

  6. Haga clic en Guardar.

NOTA

Si intenta eliminar una ventanilla móvil que está en uso, se muestra el siguiente mensaje: "Esta ventanilla está asociada actualmente a una o varias actividades. Debe quitar la ventanilla de esas actividades antes de poder eliminarla".

Crear una experiencia adaptable

Añada ventanillas móviles a sus actividades Target para crear experiencias adaptables para pantallas móviles.

  1. Cree la actividad deseada.

  2. En el Compositor de experiencias visuales (VEC), haga clic en el icono de engranaje Configuración y, a continuación, seleccione Añadir ventanillas móviles.

    Opción añadir ventanillas móviles

  3. Haga clic en el icono de Dispositivos y, a continuación, active todos los dispositivos que deban tener una ventanilla móvil.

    Habilitar ventanillas móviles

    Las ventanillas móviles se muestran de la más grande a la más pequeña en anchura.

  4. Edite las ventanillas móviles según quiera.

    Cualquier cambio que realice en la experiencia se aplicará a ella en todos los dispositivos. Por ejemplo, puede cambiar el texto de un encabezado.

    Pase el cursor por encima del nombre de una ventanilla móvil para ver su tamaño.

    iPhone 11 Pro Experiencia de máxima capacidad de respuesta

  5. Si lo desea, puede alternar entre los modos vertical y horizontal haciendo clic en el icono de orientación deseado.

    Opciones de orientación

Vídeos de formación

Los siguientes vídeos contienen más información sobre los conceptos mencionados en este artículo.

Compositor de experiencias visuales (2 de 2) (7:29) Distintivo de información general

El siguiente vídeo de demostración incluye información sobre cómo usar el Compositor de experiencias visuales para trabajar con ventanillas móviles:

  • Cambiar el nombre de una experiencia y duplicarla
  • Crear una experiencia de redirección
  • Segmentar una actividad en una sola dirección URL o un grupo de direcciones URL
  • Crear una actividad de varias páginas
  • Obtener una vista previa y generar experiencia para sitios web adaptables
  • Usar superposiciones para destacar tipos de elementos

Preferencias de cuenta en Adobe Target distintivo de información general

Este vídeo incluye información sobre la configuración de ventanillas móviles a partir de las 4:40 del vídeo.

En esta página