Como otimizar um site para exibição em dispositivos móveis
Configure a exibição da página em vários dispositivos na Área visível
A Viewable Area é uma configuração que determina quais blocos podem ou não ser exibidos em determinados tipos de dispositivos. Você pode ajustar esse parâmetro no painel Settings (Configurações) de qualquer bloco.
Por que você pode precisar dele e como funciona
Se um bloco tiver uma boa aparência no desktop, mas não for 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 em dispositivos móveis ajustando suas configurações (o que pode envolver a alteração da imagem, da fonte etc.). Defina a visibilidade do bloco como "0-980px". Como resultado, você obterá uma versão móvel do bloco.
No final, as pessoas que acessarem seu site de um computador verão a versão para desktop e os usuários de celular verão a versão para celular.
A visibilidade do bloco é um parâmetro que pode ser encontrado no painel Configurações de qualquer bloco e ajustado 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 celulares.
Se um bloco tiver uma boa aparência no desktop, mas não for 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 em dispositivos móveis ajustando suas configurações (o que pode envolver a alteração da imagem, da fonte etc.). Defina a visibilidade do bloco como "0-980px". Como resultado, você obterá uma versão móvel do bloco.
No final, as pessoas que acessarem seu site de um computador verão a versão para desktop e os usuários de celular verão a versão para celular.
A visibilidade do bloco é um parâmetro que pode ser encontrado no painel Configurações de qualquer bloco e ajustado 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 celulares.
Exemplo
Temos uma capa que fica ótima no desktop, com o texto alinhado à esquerda e o objeto principal à direita. Agora, vamos ajustá-la para que fique boa também em dispositivos móveis.
Como podemos ver, a capa é cortada no celular e não fica muito boa.
Para evitar que ele apareça em dispositivos móveis, acesse o painel Settings (Configurações) do bloco de capa e defina a visibilidade do bloco como "> 980px". Agora, os usuários de dispositivos móveis não 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.
Pronto! 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 Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
