Como Criar Widgets Responsivos: 6 Dicas com Exemplos
Widgets responsivos estão se tornando cada vez mais essenciais. Dado que quase 58% do tráfego na web vem de dispositivos móveis, é importante que todos os elementos do seu site, incluindo pop-ups, se adaptem facilmente a diferentes telas. Neste artigo, compartilharemos dicas sobre como criar widgets que fiquem perfeitos tanto em telas de desktop quanto móveis. Além disso, analisaremos diferentes widgets amigáveis para dispositivos móveis em sites reais e demonstraremos como é fácil criar semelhantes no nosso editor.
O que é um Widget Responsivo
Widgets ou pop-ups responsivos são elementos da web que ajustam automaticamente seu layout e tamanho para se adequar a diferentes telas. Isso garante uma experiência de usuário contínua em vários dispositivos, incluindo desktops, tablets e telefones celulares. Outra opção é o design de widget adaptativo, que envolve a criação de várias versões de um pop-up, cada uma otimizada para uma tela específica. Embora conceda um controle mais preciso sobre o design para cada tipo de dispositivo, também significa gerenciar e manter essas diferentes versões.
No Claspo, você pode usar ambas as abordagens. Com elementos responsivos, você pode criar rapidamente e facilmente versões web e móveis de um widget simultaneamente. Ao usar elementos adaptativos, você pode fazer ajustes em cada versão separadamente, se necessário.
Criando Widgets Responsivos: 6 Dicas com Exemplos
Nossa extensa biblioteca contém mais de 700 modelos, todos otimizados para telas móveis. Você pode facilmente substituir imagens, alterar estilos de texto, adicionar fundos e muito mais para garantir que tudo funcione perfeitamente. Além disso, criar um widget responsivo completamente novo é simples, pois fornecemos todas as ferramentas necessárias.
1. Use Colunas para Criar Widgets Responsivos
Nosso editor possui o componente de colunas, que você pode usar para garantir que seu formulário de inscrição fique bem em dispositivos móveis. Vamos dar uma olhada mais de perto em seus recursos.
Posicionamento Automático de Conteúdo de Cima para Baixo
Ele coloca automaticamente todos os elementos do widget verticalmente. Isso ocorre porque os usuários visualizam conteúdo em dispositivos móveis de cima para baixo. Assim, você pode ter certeza de que seu widget será exibido corretamente em uma pequena tela.
No entanto, se necessário, você pode desativar essa opção quando as colunas forem pequenas. Por exemplo, colocamos um pequeno ícone em uma coluna e um texto curto na outra. Para uma aparência mais compacta do widget móvel, é melhor organizá-los horizontalmente em vez de verticalmente.
Ajustando o Comprimento dos Widgets Responsivos
Se uma imagem ocupar muito espaço na versão para desktop, o sistema reduz seu tamanho para 150px na versão móvel. Isso é possível porque as colunas possuem proporções de exibição especiais que são recalculadas ao alternar para a versão móvel. A otimização se concentra na imagem, para que você não precise se preocupar com nenhum campo importante desaparecendo na versão móvel.
Além disso, você pode facilmente ocultar qualquer coluna na versão móvel e mantê-la na versão desktop.
2. Faça Widgets Responsivos Limpos
Widgets móveis devem ter um tamanho adequado para garantir que não bloqueiem os usuários de acessar o conteúdo principal. Isso é especificamente declarado nos requisitos do Google para pop-ups. Para reduzir o tamanho de um widget responsivo, você pode minimizar seu componente visual. No editor do Claspo, ocultar imagens é simples. Basta alternar para o modo de edição móvel e clicar no botão correspondente. Isso manterá a imagem no widget de desktop, mas a removerá da versão para telas menores.
No Claspo, por padrão, ao editar um formulário de inscrição, todas as fontes são automaticamente alteradas nos modelos de status de assinatura: Sucesso, Já Inscrito, Erro. O tamanho da fonte é sincronizado em ambas as versões. No entanto, você pode reduzi-lo separadamente no modo móvel para tornar o texto menor e parecer mais orgânico em uma pequena tela. Nas configurações, clique na lista suspensa ao lado de 'Estilo de texto' e selecione 'Remover estilo de um elemento.'
Para a versão móvel, recomendamos o uso de fontes de 2 a 4 pontos menores do que as usadas no desktop. No entanto, você não deve tornar o texto principal menor do que 14-16 pontos ou notas de rodapé e dicas menores do que 10-12 pontos.
Observe que remover o estilo de texto também exigirá a alteração do tamanho da fonte em modelos adicionais se você estiver criando um formulário de inscrição.
Você pode alterar simultaneamente as configurações para as versões desktop e móvel de um widget responsivo. O sistema sincroniza configurações como fundo, traço, sombra e cantos arredondados. Por exemplo, você pode alterar a aparência dos campos de e-mail e nome do assinante arredondando os cantos e adicionando um fundo. O mesmo acontece instantaneamente na versão móvel.
3. Use o Launcher para Executar um Widget Responsivo
Se você precisar adicionar um formulário de inscrição grande ou algum outro widget responsivo de tamanho considerável, pode usar o launcher. Este elemento ocupa um espaço mínimo na tela, sendo notável. Veja como essa abordagem é usada no site U.S. Art Supply.
No Claspo, todos os modelos de assinatura de newsletter têm launchers que podem ser personalizados rapidamente. Da mesma forma, você pode construir um do zero e anexá-lo a um pop-up específico. Escolha uma animação de entrada para fazer o elemento aparecer à esquerda, direita, embaixo ou em cima. Se você quiser tornar o launcher mais visível, configure-o para Loop animation. Isso ajudará a destacá-lo se houver um botão de chat ao lado dele, etc.
4. Considere Alternativas ao Launcher
O launcher é um elemento muito prático, mas alguns usuários podem achá-lo intrusivo porque não pode ser fechado. Se você tem medo de tal reação de seus visitantes do site, tente criar um pequeno widget responsivo em vez disso, que abrirá outro pop-up em tamanho real quando clicarem nele. Veja como fica no site Handicraft:
Visualmente, a única diferença de um launcher será a presença de um botão de fechar.
Para definir uma regra para chamar outro pop-up, abra a opção 'Ação ao clicar' nas configurações e anexe o widget pronto.
Você também pode configurar uma barra flutuante de maneira semelhante. Por exemplo, a empresa Makers Market criou um widget lacônico com um único botão que ativa um formulário de inscrição em tamanho real.
Em nosso editor, você pode criar um widget responsivo semelhante e personalizá-lo alterando a cor do botão CTA, adicionando um fundo que combine com o design do seu site, etc.
5. Execute Widgets Responsivos com Elementos de Conversão
Você pode adicionar componentes especiais a widgets responsivos para capturar a atenção dos usuários e incentivar a conversão. Por exemplo, o Wine.com oferece aos novos visitantes um código promocional para sua primeira compra:
E adivinhe? No editor do Claspo, você pode adicionar um código promocional embutido no widget que o usuário pode copiar facilmente e se apressar para fazer compras com você. Por exemplo, use essa abordagem em pop-ups de saída para capturar visitantes prestes a sair. Veja como fica em um de nossos modelos de widget responsivo:
Você também pode incentivar os usuários a se inscreverem na sua newsletter oferecendo um desconto instantâneo em suas compras. Para isso, adicione o componente de código promocional embutido ao modelo de Sucesso. Isso aumentará as chances de que o visitante se converta em comprador e, ao mesmo tempo, aumentará sua base de contatos.
Um temporizador de contagem regressiva pode aumentar o efeito FOMO do seu desconto. A marca Fragrance Outlet usa isso em um pop-up de saída.
O componente temporizador relativo do Claspo começa a contagem regressiva quando o widget aparece na frente do usuário específico. Além da intenção de saída, ele pode ser adicionado a qualquer widget promocional responsivo para aumentar a urgência. A característica única do temporizador relativo é ajustar o período de tempo para cada visitante. Isso permite que você execute uma 'promoção eterna' e atraia um público maior sem levantar suspeitas de desonestidade. O tempo de decisão de uma pessoa expira, mas outros visitantes poderão aproveitar a oferta antes que o temporizador atinja zero para eles.
6. Evite Erros de Posicionamento de Widgets Responsivos
Às vezes, o posicionamento de widgets responsivos pode ser problemático quando um pop-up ou launcher se sobrepõe a outro conteúdo em uma tela móvel. Por exemplo, na versão móvel do blog Ten Thousand Villages, os usuários têm pouca chance de chegar à página do produto porque o botão de chat bloqueia o botão CTA.
Da mesma forma, a marca Jubilee corre o risco de perder assinantes potenciais devido à pequena distância entre o botão 'enviar e-mail' e o botão de chat. Ao pressionar a tela com o polegar direito, é fácil perder o botão 'enviar e-mail'.
Para evitar esses problemas com um launcher, você pode ajustar facilmente seu posicionamento. Basta colocá-lo no lado oposto da tela em relação a outros elementos importantes do site. Além disso, você pode definir uma distância personalizada do launcher para as bordas da tela, se necessário.
Se você deseja adicionar vários widgets ao seu site para diferentes finalidades, é importante evitar o erro de executá-los simultaneamente, como aconteceu no site Burke Decor:
O Claspo protege você de telas confusas com seus recursos inteligentes — intervalo de silêncio e proteção contra sobreposição.
Defina o intervalo de silêncio para criar um buffer entre as exibições de widgets. O intervalo padrão de 3 minutos garante uma experiência de navegação suave, mas você pode personalizá-lo facilmente com base no tempo médio de visita ao seu site ou tempos de permanência em páginas específicas.
Além disso, o Claspo alivia a pressão ao impedir automaticamente a sobreposição de widgets, mesmo quando você tem regras de exibição duplicadas. Isso significa que você pode se concentrar na criação de conteúdo envolvente sem se preocupar em gerenciar configurações complexas de pop-ups.
Melhorando a Experiência do Usuário com Widgets Responsivos
Widgets responsivos são elementos chave do site para uma experiência positiva do usuário. Eles garantem que seu conteúdo permaneça acessível e envolvente, independentemente do tamanho da tela. O Claspo simplifica o processo oferecendo modelos pré-construídos otimizados para dispositivos móveis e ferramentas de edição intuitivas.
Antes de publicar, teste seus pop-ups prontos no site. Nossa plataforma facilita isso. Dessa forma, você verá sua localização real e poderá fazer os ajustes necessários rapidamente.
Depois de lançá-los, comece a realizar testes A/B. Isso também pode ser feito diretamente no Claspo. Gradualmente, teste todos os elementos essenciais: design, CTA, texto e mais. Isso ajudará você a entender melhor seu público e aumentar as conversões. A melhor parte é que você obterá toda a funcionalidade descrita neste artigo, incluindo testes, com nosso plano gratuito vitalício. Portanto, inscreva-se e crie widgets responsivos sem qualquer complicação.
