Utiliza la optimización móvil en Klaviyo formulario de registro

Resumen

Personaliza tus formularios de Klaviyo para computadoras de escritorio y dispositivos móviles sin duplicarlos, lo que te ayudará a publicarlos más rápido y mejorar la experiencia de los visitantes móviles.

La optimización móvil te permite diseñar experiencias específicas para cada dispositivo editando las vistas móviles y de escritorio simultáneamente, y eligiendo si los cambios en los bloques se sincronizan entre dispositivos o se mantienen específicos para cada dispositivo.

Antes de empezar

• Algunos tipos de bloques no admiten la desvinculación entre dispositivos. Las excepciones incluyen: divulgación, Spin to win, imagen (tratada por separado) y número de teléfono (consentimiento en varios pasos).

   

Cómo funciona

Alternar vista previa en dos dispositivos

Previsualiza tu formulario en el escritorio y en el móvil, uno al lado del otro, para ver cómo se adaptan los cambios en los distintos dispositivos en tiempo real. Esto reduce las idas y venidas y acelera la calidad del diseño móvil.

Bloques vinculados frente a bloques no vinculados

De forma predeterminada, los bloques equivalentes en la versión de escritorio y móvil están vinculados: los cambios en una vista se transfieren a la otra. Puedes optar por desvincular bloques para realizar ediciones solo en dispositivos móviles o de escritorio sin duplicar tu formulario.

Puedes desvincular/volver a vincular un bloque seleccionado haciendo clic en el botón Desvincular del lienzo o en el botón Desvincular del panel lateral. 

Cuando un bloque se desvincula:

• Las modificaciones solo se aplican a la vista actual del dispositivo; el bloque del otro dispositivo no se modifica.
• Al clonar un bloque no vinculado, el clon solo se crea en la vista del dispositivo actual (al clonar un bloque vinculado, este se duplica en ambos dispositivos).

Volver a vincular bloques:

• Al volver a vincular, se crea un nuevo bloque emparejado entre dispositivos. Si se ha eliminado el bloque homólogo, al volver a vincularlo se crea para el otro dispositivo, de modo que ambas vistas vuelven a tener el bloque (luego puedes eliminar los duplicados que no necesites).

adelanto por dispositivo

Puedes desvincular Adelanto a través del panel lateral, de modo que el escritorio y el móvil tengan cada uno su propio estilo Adelanto. Al volver a vincular, se restablece la visibilidad en todos los dispositivos para el adelanto vinculado de nuevo.

Paso a paso

Abrir vista previa dual

1. Abre tu formulario en el editor.
2. Cambia a la vista previa mediante el botón que muestra tanto la versión para computadora como la versión móvil una al lado de la otra para evaluar el diseño y el espaciado de un vistazo.

Desvincular un bloque para ediciones específicas del dispositivo

1. Selecciona el bloque que deseas personalizar en el celular.
2. Selecciona Desvincular para que las ediciones realizadas en el móvil no afecten al escritorio.
3. Ajusta el diseño de tu móvil (por ejemplo, la ubicación, el tamaño de la fuente, el espaciado) para facilitar la lectura en pantallas más pequeñas.
4. Repite el proceso con los demás bloques según sea necesario.

Vuelve a vincular cuando quieras volver a compartir el comportamiento.

1. Selecciona el bloque y elige Volver a vincular.
2. Si la contraparte no se encuentra en el otro dispositivo, el editor la crea automáticamente.
3. Elimina los bloques duplicados.

Configurar el adelanto por dispositivo (opcional)

1. Abre la configuración de Adelanto y selecciona Desvincular.
2. Configura el contenido o la visibilidad de Adelanto para computadoras de escritorio y dispositivos móviles de forma independiente.

3. Vuelve a conectarte más tarde si deseas que un adelanto se aplique a ambos dispositivos.

    

Mejores prácticas para formularios móviles

• Da prioridad a las pantallas más pequeñas: utiliza fuentes más grandes y textos concisos.

• Aumenta los objetivos táctiles y el espaciado vertical para que los botones y las entradas sean fáciles de usar.

• Considera la posibilidad de utilizar la pantalla completa en dispositivos móviles para mejorar la claridad y la concentración, especialmente en dispositivos más pequeños.

• Mantén las imágenes con un propósito. Si una imagen lateral compite con el contenido en pantallas pequeñas, ocúltala o simplifica el diseño.

   

Limitaciones y comportamientos que debes conocer

• Un bloque vinculado es un bloque único con visibilidad del dispositivo configurada tanto para computadoras de escritorio como para dispositivos móviles. Cualquier edición que realicen en cualquiera de las vistas actualizará ese bloque compartido.

• Cuando desvinculas un bloque, el editor crea un segundo bloque en segundo plano y configura cada bloque para un dispositivo diferente (uno solo para computadoras de escritorio y otro solo para dispositivos móviles). A partir de ese momento, las ediciones no se sincronizan entre ustedes.

• La desvinculación no es compatible con algunos tipos de bloques: Divulgación, Gira para ganar, Imagen (se gestiona por separado en el trabajo con imágenes laterales) y Número de teléfono (consentimiento en varios pasos).

• La clonación se comporta de manera diferente según el estado del enlace: los clones de bloques vinculados aparecen en ambos dispositivos; los clones de bloques no vinculados solo aparecen en la vista del dispositivo actual.

• Cuando vuelves a vincular, el bloque seleccionado se convierte en la fuente de verdad y se configura para que se muestre en ambos dispositivos. Si falta una contraparte, el editor la crea; si existen varias versiones, es posible que tengas que eliminar manualmente los bloques adicionales que no quieras conservar.

   

Resultado

Ahora deberías poder crear un formulario de registro optimizado para dispositivos móviles sin necesidad de crear dos formularios distintos. 

Guía de solución de problemas

• No veo la opción de desvincular/revinculas en un bloque:
  Es posible que el tipo de bloque no admita la desvinculación (consulta las excepciones).

• Mi cambio en el celular afectó al escritorio (o viceversa):
  Asegúrate de que el bloque esté desvinculado antes de editar la versión específica del dispositivo.

• Mi reenlace creó un bloque adicional:
  Eso es lo que se espera si faltaba la contraparte. Elimina el duplicado que no necesites después de volver a vincular.

   

Siguientes pasos

• Primeros pasos con el formulario de registro.

• Conceptos básicos: diseño de formularios.

• Cómo realizar una prueba A/B en un formulario de registro.