Como otimizar um site para visualização em dispositivos móveis
Configurar a exibição da página em vários dispositivos na Área Visível
Área visível é uma configuração que determina quais blocos podem ou não ser exibidos em determinados tipos de dispositivos. Você pode ajustar este parâmetro no painel Configurações de qualquer bloco.
Por que você pode precisar dele e como ele funciona
Se um bloco parecer bom no desktop, mas não tão bom no celular, convém definir a visibilidade do bloco para 980px ou mais. Dessa forma, o bloco se tornará orientado para desktop e não aparecerá em dispositivos móveis.
Depois disso, copie o bloco e otimize-o para visualização no celular, ajustando suas configurações (o que pode envolver a alteração da imagem, fonte, etc.). Defina a visibilidade do bloco como "0-980px". Como resultado, você receberá uma versão móvel do bloco.
No final, aqueles que acessam seu site a partir de um PC verão a versão para desktop e os usuários móveis a versão para dispositivos móveis.
A visibilidade do bloco é um parâmetro que você pode encontrar no painel Configurações de qualquer bloco e ajustar para que o bloco apareça ou não em dispositivos com uma resolução de tela específica. Por exemplo, alguns blocos não ficam bem em tablets e outros em telefones celulares.
Se um bloco parecer bom no desktop, mas não tão bom no celular, convém definir a visibilidade do bloco para 980px ou mais. Dessa forma, o bloco se tornará orientado para desktop e não aparecerá em dispositivos móveis.
Depois disso, copie o bloco e otimize-o para visualização no celular, ajustando suas configurações (o que pode envolver a alteração da imagem, fonte, etc.). Defina a visibilidade do bloco como "0-980px". Como resultado, você receberá uma versão móvel do bloco.
No final, aqueles que acessam seu site a partir de um PC verão a versão para desktop e os usuários móveis a versão para dispositivos móveis.
A visibilidade do bloco é um parâmetro que você pode encontrar no painel Configurações de qualquer bloco e ajustar para que o bloco apareça ou não em dispositivos com uma resolução de tela específica. Por exemplo, alguns blocos não ficam bem em tablets e outros em telefones celulares.
Exemplo
Temos uma capa que fica ótima na área de trabalho, o texto alinhado à esquerda e o objeto principal à direita. Agora, vamos ajustá-lo para que fique bem em dispositivos móveis também.
Como vemos, a capa fica cortada no celular e não fica muito boa.
Para evitar que ele apareça em dispositivos móveis, vá para o painel Configurações do bloco de capa e defina a visibilidade do bloco como "> 980px". Agora, os usuários móveis não verão mais.
Copie o bloco.
Ajuste o bloco para a versão móvel — altere o alinhamento da foto e do texto.
Agora que definimos a visibilidade do bloco como "≤ 980px", ele não aparecerá em dispositivos com telas maiores que 980px.
Feito! Agora a capa é exibida de forma diferente dependendo da largura da tela.
Exemplos de largura de tela para vários dispositivos:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galáxia: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galáxia: 360px
Nokia Lumia: 320px
