TEMAS×
Ventanillas móviles para las experiencias adaptables
Las ventanillas móviles ayudan a obtener una vista previa de cómo aparecen las actividades en pantallas de diversos tamaños.
La característica de vista previa de ventanilla móvil está diseñada para sitios que responden. 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 otra estructura como, por ejemplo, m.mysite.com, utilice una
actividad multipágina
.
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. Es el tamaño de la ventana del navegador menos las barras de desplazamiento y las 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 tiene las ventanillas móviles y las resoluciones de algunos dispositivos populares. No se olvide de usar el tamaño de la ventanilla móvil en Target.
Dispositivo
| Tamaño de la ventanilla móvil
| Resolución del dispositivo
|
---|---|---|
iPhone X
| 375 ancho x 812 alto
| 1125 ancho x 2436 alto
|
iPhone 8 Plus
| 414 ancho x 736 alto
| 1080 ancho x 1920 alto
|
iPhone 8
| 375 ancho x 667 alto
| 750 ancho x 1.334 alto
|
iPhone 7 Plus
| 414 ancho x 736 alto
| 1080 ancho x 1920 alto
|
iPhone 7
| 375 ancho x 667 alto
| 750 ancho x 1.334 alto
|
iPhone 6
| 375 ancho x 667 alto
| 750 ancho x 1.334 alto
|
iPhone 6s
| 414 ancho x 736 alto
| 1080 ancho x 1920 alto
|
iPad Pro
| 1024 ancho x 1366 alto
| 2048 ancho x 2732 alto
|
iPad de tercera y cuarta generación
| 768 ancho x 1024 alto
| 1.536 ancho x 2.048 alto
|
iPad Air 1 y 2
| 768 ancho x 1024 alto
| 1.536 ancho x 2.048 alto
|
iPad Mini
| 768 ancho x 1024 alto
| 768 ancho x 1024 alto
|
iPad Mini 2 y 3
| 768 ancho x 1024 alto
| 1.536 ancho x 2.048 alto
|
Nexus 6P
| 411 ancho x 731 alto
| 1440 ancho x 2560 alto
|
Nexus 5X
| 411 ancho x 731 alto
| 1080 ancho x 1920 alto
|
Google Pixel
| 411 ancho x 731 alto
| 1080 ancho x 1920 alto
|
Google Pixel XL
| 411 ancho x 731 alto
| 1440 ancho x 2560 alto
|
Google Pixel 2
| 411 ancho x 731 alto
| 1080 ancho x 1920 alto
|
Google Pixel 2 XL
| 411 ancho x 731 alto
| 1440 ancho x 2560 alto
|
Samsung Galaxy Note 5
| 480 ancho x 853 alto
| 1440 ancho x 2560 alto
|
LG G5
| 480 ancho x 853 alto
| 1440 ancho x 2560 alto
|
One Plus 3
| 480 ancho x 853 alto
| 1080 ancho x 1920 alto
|
Samsung Galaxy S9
| 360 ancho x 740 alto
| 1440 ancho x 2960 alto
|
Samsung Galaxy S9+
| 360 ancho x 740 alto
| 1440 ancho x 2960 alto
|
Samsung Galaxy S8
| 360 ancho x 740 alto
| 1440 ancho x 2960 alto
|
Samsung Galaxy S8+
| 360 ancho x 740 alto
| 1440 ancho x 2960 alto
|
Samsung Galaxy S7
| 360 ancho x 640 alto
| 1440 ancho x 2560 alto
|
Samsung Galaxy S7 Edge
| 360 ancho x 640 alto
| 1440 ancho x 2560 alto
|
Nexus 7 (2013)
| 600 ancho x 960 alto
| 1200 ancho x 1920 alto
|
Nexus 9
| 768 ancho x 1024 alto
| 1.536 ancho x 2.048 alto
|
Samsung Galaxy Tab 10
| 800 ancho x 1280 alto
| 800 ancho x 1280 alto
|
Chromebook Pixel
| 1280 ancho x 850 alto
| 2560 ancho x 1700 alto
|
Diversos sitios web enumeran los tamaños de las ventanillas para dispositivos populares. For example, see
https://mediag.com/news/popular-screen-resolutions-designing-for-all/
or consult the device maker's website.
Si quiere ofrecer una actividad en un dispositivo concreto, elija la audiencia adecuada para ese dispositivo en el diagrama de la actividad. Use el Compositor web móvil para editar la página en la actividad de dicho dispositivo. Si quiere llevar a cabo una actividad en toda la experiencia digital y asegurarse de que el aspecto sea satisfactorio en todos los dispositivos, no aplique segmentación y use ventanillas móviles para previsualizar la actividad en cada tamaño de pantalla.
Si tiene un sitio adaptable, se suele diseñar para que se abra en una vista diferente cuando accede un dispositivo con un tamaño de pantalla concreto. Los tamaños de pantalla que activan las vistas nuevas se conocen como
puntos de interrupción CSS
. Guarde los puntos de interrupción CSS en Target para poder previsualizar las experiencias de cada vista que defina. Cada una de estas experiencias se muestra en una ventanilla móvil en la interfaz de 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.
Aunque su sitio no sea adaptable, puede usar el Compositor web móvil para ver un sitio si la actividad está dirigida a un dispositivo concreto.
Aunque puede editar una experiencia desde las ventanillas móviles, esos cambios se aplican a todas las ventanillas y todos los dispositivos, no solo a la ventanilla móvil que modifique. 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. En estos momentos, no se admiten los cambios en páginas específicas de cada ventanilla móvil.
Configuración de las ventanillas móviles
Configure todas las ventanillas móviles que quiera que estén disponibles cuando cree sus experiencias.
- Haga clic en Configuración > Preferencias .
- En la sección Configuración de ventanillas móviles de la página Preferencias de la cuenta, haga clic en Agregar nueva para agregar una ventanilla móvil.Para cambiar la configuración de una ventanilla móvil existente, selecciónela y, a continuación, haga clic en el icono de editar (el lápiz).
- 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.
- Introduzca el tamaño de pantalla del dispositivo móvil, tanto la anchura como la altura.La anchura puede estar entre 150 y 968 píxeles. La altura puede estar entre 150 y 1.280 píxeles.
- (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, Target imita ese dispositivo cuando visualiza la página. Si, por ejemplo, existe un aspecto diferente para Android y para iOS en su sitio adaptable, Target imita ese comportamiento.
- Haga clic en Guardar .
Crear experiencias adaptables
Agregue ventanillas móviles a las actividades de Target para crear experiencias adaptables para las pantallas móviles.
- Cree una actividad.
- En el Compositor de experiencias visuales, haga clic en el icono de engranaje de Configuración y, a continuación, seleccione Agregar ventanillas móviles .
- Haga clic en el icono de Dispositivos y, a continuación, active todos los dispositivos que deban tener una ventanilla móvil.Las ventanillas móviles se muestran de la más grande a la más pequeña en anchura.
- Edite las ventanillas móviles según quiera.Todos los cambios que realice en la experiencia (por ejemplo, si cambia el texto de un título) se aplicarán a la experiencia en todos los dispositivos.Pase el cursor por encima del nombre de una ventanilla móvil para ver su tamaño.
- Si quiere, haga clic en el icono de orientación para cambiar entre los modos horizontal y vertical.
- Vertical:
- Horizontal:
Caso de uso: Dirigirse a dos versiones de iPhone
Este caso de uso muestra cómo configurar experiencias para dos versiones de iPhone, la iPhone 6 y la iPhone 6 Plus, mediante la función Ventanillas móviles de Target Standard.
- En Target Standard, haga clic en Configuración > Preferencias .
- En la sección Configuración de las ventanillas móviles de la página Preferencias, cree ventanillas móviles para iPhone 6 y para iPhone 6 Plus.Aplique los ajustes siguientes para cada ventanilla:NombreAnchuraAlturaSistema operativoiPhone 6375667iOSiPhone 6 Plus414736iOS
- Cree una actividad con la experiencia que quiere mostrar.
- Seleccione la experiencia que quiere dirigir a los visitantes que accedan al sitio desde un iPhone 6 o un iPhone 6 Plus.
- Al seleccionar el objetivo, haga clic en Crear audiencia y configure una audiencia tal como se muestra en la imagen siguiente:Como el teléfono podría girarse para colocarse en horizontal, el requisito de definir una altura y anchura simultáneas de más de 320 crea una condición que solo los dispositivos 6 y 6 Plus pueden satisfacer al combinarse con el modelo de dispositivo iPhone.
- Haga clic en Guardar .
- Continúe configurando la actividad con normalidad.
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)
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
En este vídeo se explica cómo configurar las ventanillas móviles en las preferencias de cuenta a partir del minuto 4:40.