Meu design não fica bom no celular

Por que sua página pode parecer ruim em dispositivos móveis (e como corrigir isso)

1. Você projetou apenas para visualização em desktop

Um dos erros mais comuns é projetar a página inteira na visualização para desktop e esquecer de ajustá-la para dispositivos móveis. Embora o GemPages tente automaticamente tornar o conteúdo responsivo, elementos como texto grande, imagens grandes e espaçamento apertado geralmente precisam de ajustes manuais na visualização para dispositivos móveis.

Solução:
Depois de terminar o design da sua área de trabalho, mude para o Exibição móvel no editor e ajuste tamanhos de fonte, escala de imagem, margens, preenchimentos e posições de elementos especificamente para usuários de dispositivos móveis.

Veja como fazer isso neste guia oficial do GemPages: Visão geral do design da Web responsivo.

2. Uso impróprio do elemento Row

O processo de Elemento de linha é essencial para criar layouts responsivos. Se não for usado corretamente, os elementos aninhados podem não se ajustar corretamente em todos os dispositivos, causando problemas de layout.

Para mais informações sobre como criar um layout responsivo usando o elemento row, consulte isto:

3. Os elementos são visíveis quando não deveriam ser

Às vezes, você oculta um elemento no desktop, mas esquece de ocultá-lo no celular, ou vice-versa. Isso resulta em conteúdo duplicado ou desnecessário aparecendo nas telas dos dispositivos móveis, confundindo o usuário e atrapalhando a experiência.

Solução:
Use o Configurações de visibilidade no GemPages para mostrar ou ocultar elementos específicos dependendo do tipo de dispositivo. Por exemplo, você pode querer ocultar controles deslizantes de imagem complexos ou grandes blocos de texto em dispositivos móveis para uma experiência mais organizada.

 Saiba mais sobre como controlar a visibilidade: Mostrar/ocultar elemento ou seção em cada dispositivo.

4. Imagens não otimizadas para dispositivos móveis

Usar imagens de alta resolução para desktop em dispositivos móveis pode causar lentidão no carregamento e distorção visual. Além disso, não definir dimensões de imagem adequadas pode resultar em imagens ampliadas ou desalinhadas em telas menores.

Por favor, verifique este artigo no Tamanho recomendado para imagens.

Melhores práticas para um ótimo design para dispositivos móveis no GemPages

Para garantir que suas páginas do GemPages tenham uma ótima aparência em dispositivos móveis, siga estas práticas importantes:

1. Comece com o desktop, mas sempre ajuste para dispositivos móveis

O GemPages foi criado para design responsivo, mas ainda é importante alternar manualmente para a visualização móvel e ajustar seu layout, tipografia e espaçamento para telas menores.

2. Use o elemento Row para criar layouts flexíveis

Sempre estruture seu layout com o elemento Row. Ele permite que o conteúdo seja redimensionado ou empilhado automaticamente, dependendo do tamanho da tela. Não crie seu layout apenas com elementos independentes; envolva-os dentro de uma linha para melhor controle.

3. Ajuste o tamanho da fonte para dispositivos móveis

Fontes grandes ficam bem no desktop, mas podem sobrecarregar o usuário no celular. Reduza o tamanho das fontes e o espaçamento entre linhas de títulos, nomes de produtos e botões de CTA ao criar conteúdo para dispositivos móveis.

Para saber como definir tamanhos de fonte diferentes para desktop e celular, consulte Este artigo.

4. Visualize com frequência no celular

Use o visualização Clique no botão no GemPages e teste seu layout em dispositivos reais ou em simuladores de navegadores móveis. Isso ajuda a identificar qualquer layout quebrado ou conteúdo desalinhado antes da publicação.

5. Minimize os elementos ocultos

Evite usar elementos ocultos em excesso. Mesmo que algo esteja oculto no celular, ele ainda carrega em segundo plano, o que pode deixar sua página lenta. Use as configurações de visibilidade apenas quando absolutamente necessário.

6. Use imagens otimizadas para dispositivos móveis

Carregue imagens leves e com tamanho adequado para dispositivos móveis. Isso ajuda a acelerar o carregamento da página e evita distorções visuais.