Leia este artigo para começar com design responsivo no Adobe Muse. Saiba como criar sites responsivos para qualquer dispositivo.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Quando você cria um site responsivo, pode não ser útil adicionar pontos de quebra baseados em um dispositivo, SO ou em uma marca de produto específicos. Definir pontos de quebra com base nesses fatores pode resultar em alta necessidade de manutenção. Em vez disso, o layout e o conteúdo do seu site devem determinar como e onde incluir os pontos de quebra.

Leia para saber a abordagem recomendada do design para criar um site ágil usando o Adobe Muse.

1

Crie um site. Escolha a largura fluida da caixa de diálogo Novo site.

Para evitar o espaço em branco e outros problemas de design, defina suas dimensões de página. Clique em Configurações avançadas para ajustar a largura mínima e máxima e altura mínima para o seu site.


Na caixa de diálogo Novo site, selecione Largura fluida.
Na caixa de diálogo Novo site, selecione Largura fluida.

 

 

 

2

Abra uma página mestre ou uma página individual. Observe o ponto de quebra padrão em 960 pixels.


Observe o ponto de quebra padrão em 960 pixels.
Observe o ponto de quebra padrão em 960 pixels.

 

 

 

3

Comece a criar o layout dos elementos de sua página como texto, imagens, apresentação de slides e dispositivos no ponto de quebra.


Faça o layout de suas páginas da Web.
Faça o layout de suas páginas da Web.

 

 

 

4

Use o controle deslizante para simular várias larguras da janela do navegador. Veja como seu site é exibido em diferentes larguras de navegadores.


Use o controle deslizante para ver como o site é exibido em diferentes larguras do navegador.
Use o controle deslizante para ver como o site é exibido em diferentes larguras do navegador.

 

 

 

5

Onde quer que o design quebre, adicione um ponto de quebra. Por exemplo, na imagem anterior, você percebe que a caixa de texto sai da largura quando você arrasta o controle deslizante. Adicione um ponto de quebra nessa largura onde o design quebra.


Adicione um ponto de quebra onde deseja que o de design quebre.
Adicione um ponto de quebra onde deseja que o de design quebre.

 

 

 

6

Ajuste o layout no novo ponto de quebra para que o site fique com uma boa aparência.


Ajuste o layout no ponto de quebra
Ajuste o layout no ponto de quebra

 

 

 

7

Continue a visualizar seu site até a largura mínima. Adicione pontos de quebra e defina seu layout sempre que necessário.


Com esta abordagem de design, o site fica com uma boa aparência em toda a largura do navegador, em qualquer dispositivo. O design é independente de um tamanho específico do dispositivo ou do tamanho da tela.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online