Visores móveis para experiências responsivas

Os visores móveis permitem visualizar como as atividades do Adobe Target aparecem em telas de vários tamanhos.

O recurso de visualização de visor móvel é projetado para sites responsivos que são renderizados em vários dispositivos, janelas e tamanhos de tela. Sites responsivos ajustam-se e se adaptam automaticamente a qualquer tamanho de tela, incluindo desktops, laptops, tablets ou telefones celulares.

Uma visor é definido pelo tamanho do retângulo preenchido por uma página da Web na sua tela. O visor é o tamanho da janela do navegador, menos as barras de rolagem e as barras de ferramentas. Os navegadores usam "pixels CSS". Em vários dispositivos, como os com telas de retina, o visor é menor que a resolução de dispositivo anunciada.

Abaixo, estão visores e resoluções para dispositivos populares. Lembre-se de usar um tamanho de visor no Target.

Para entregar uma atividade aos visitantes em um dispositivo específico, escolha o público apropriado para esse dispositivo no diagrama de atividades. Use o Mobile Web Composer para editar a página na atividade daquele dispositivo. Para executar uma atividade em toda a sua experiência digital para garantir que ela fique boa em todos os dispositivos, não aplique o direcionamento. Em vez disso, use visores móveis para visualizar a atividade em cada tamanho de tela.

Para sites responsivos, normalmente seu site é projetado para abrir em uma visualização diferente quando acessado por um dispositivo com um tamanho de tela específico. Esses tamanhos de tela que acionam as novas exibições são conhecidas como pontos de interrupção de CSS. Os pontos de interrupção de CSS são pontos em que o conteúdo do site responde, dependendo da largura do dispositivo, para exibir o layout ideal para os visitantes… Os pontos de interrupção de CSS também são chamados de consultas de mídia.

Salve seus pontos de interrupção de CSS no Target para que você possa visualizar as suas experiências para cada exibição que definir. Cada uma dessas experiências é exibida em um visor móvel na interface do Target. Abra a exibição em cada tamanho de tela ao clicar no visor ao longo da parte superior do visor.

Se o seu site não for responsivo, use o Mobile Web Composer para exibir um site se sua atividade estiver direcionada para um dispositivo específico.

Configuração do visor móvel

Configure os visores móveis que você deseja disponibilizar ao criar suas experiências.

1. Clique em Administração > Visual Experience Composer.

2. Na seção Configuração de visores móveis, clique em Adicionar.

   

   Ou

   Para alterar a configuração de um visor móvel existente, selecione o visor e clique no ícone Editar (lápis).

3. Digite um nome para a janela de visualização móvel.

   Use um nome descritivo que seja fácil de reconhecer. O nome pode ter até 36 caracteres.

4. Especifique o tamanho da tela do dispositivo móvel: largura e altura.

   A largura pode ser de 150 a 968 pixels. A altura pode ser de 150 a 1280 pixels.

5. (Opcional) Selecione o sistema operacional do dispositivo.

   Opções:

   • Android
   • iOS
   • Windows
   • Symbian
   • BlackBerry

   Se você usa o Enhanced Experience Composer e selecionar um sistema operacional, o emula aquele dispositivo quando você visualiza a página. Target Por exemplo, se houver uma aparência diferente para Android e iOS em seu site responsivo, o Target imita esse comportamento.

6. Clique em Salvar.

Criar uma experiência responsiva

Adicione visores móveis a atividades do Target para criar atividades responsivas para telas móveis.

1. Crie a atividade desejada.

2. No Visual Experience Composer (VEC), clique no ícone de engrenagem Configurações e selecione Adicionar visores móveis.

   

3. Clique no ícone Dispositivos e ative cada dispositivo com um visor móvel.

   

   As janelas de visualização móvel estão listadas da menor para a maior de acordo com a largura.

4. Edite as janelas de visualização móvel conforme desejado.

   Todas as alterações feitas na experiência são aplicadas à experiência em todos os dispositivos. Por exemplo, você altera o texto em um cabeçalho.

   Passe o mouse sobre o nome de uma janela para ver o tamanho da janela.

   

5. Caso desejar, altere entre os modos retrato e paisagem ao clicar no ícone de orientação.

   

Vídeos de treinamento

Os vídeos a seguir contêm mais informações sobre os conceitos discutidos neste artigo.

Visual Experience Composer (2 de 2) (7:29)

O vídeo de demonstração a seguir inclui informações sobre o uso do Visual Experience Composer para funcionar com visores móveis:

• Renomear e duplicar uma experiência
• Criar uma experiência de redirecionamento
• Direcionar uma atividade para um único URL ou um grupo de URLs
• Criar uma atividade multipáginas
• Visualizar e criar a experiência para sites responsivos
• Use sobreposições para destacar tipos de elementos

Preferências da conta no Adobe Target

Este vídeo inclui informações sobre como configurar visores móveis, começando às 4:40 do vídeo.

Recursos do Business.Adobe.com

Ab Multivariate Testing Omnichannel Personalization Email Optimization Website Personalization Behavioral Targeting Multivariate Testing