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.

O design responsivo é compatível com a versão de fevereiro de 2016 do Adobe Muse e posterior. Se você criou sites nas versões anteriores à versão de fevereiro de 2016, você pode converter seus sites em designs responsivos.

Por que migrar para o layout responsivo?

Caso você tenha um projeto do Adobe Muse existente que use um layout alternativo, pode migrá-lo para o layout responsivo. Entretanto, para continuar trabalhando com layouts alternativos, você pode fazer o mesmo.  

Sites responsivos, muitas vezes, são sinônimos de códigos e modelos complexos. Pela primeira vez, o Adobe Muse oferece a possibilidade de criar sites responsivos sem qualquer codificação e sem grades ou modelos. Além disso, você pode usar um único arquivo para criar sites totalmente responsivos com aparência ótima em qualquer dispositivo, com qualquer tamanho da tela. Layouts separados são coisas do passado!

Atualizar texto e imagens também é algo conveniente com o design responsivo do Adobe Muse. Você não precisa passar horas para atualizar cada layout com a mesma alteração. Além disso, a In-Browser Editing, um aplicativo que permite editar o conteúdo do site diretamente no navegador, também suporta o layout responsivo.

O Adobe Muse também oferece diversas flexibilidades ao durante a criação de seu site. Você pode optar por mostrar ou ocultar objetos específicos em pontos de interrupção específicos. Por exemplo, você pode optar por mostrar opções de menu sensíveis ao toque quando o site for visualizado em dispositivos móveis. Você também pode fixar objetos em um local ou reposicionar objetos em pontos de interrupção específicos.

Leia mais para saber como migrar seus sites do Adobe Muse existentes para o layout responsivo. Migre seu site para o design responsivo e deixe seus sites preparados para o futuro.

Como migrar layouts alternativos para layouts responsivos?

Antes de tornar seu site um layout responsivo, talvez você queira consultar uma visão geral do design responsivo para web no Adobe Muse.

Para começar a tornar seu layout responsivo:

  1. Abra o site existente.

  2. Abra cada página do seu site e clique em Página > Propriedades da página.

    Clique em Propriedades da página
  3. Na guia Layout, mude a opção de Largura fixa para Largura fluida. Você também pode definir seus os valores de Mínimo e Máximo da largura da página, das Margens e do Preenchimento nesta janela.

    Clique em OK.

    Alterar Largura fixa para Largura fluida
    Alterar Largura fixa para Largura fluida na janela Propriedades da página.

  4. Para garantir que todas as novas páginas que você adicionar também sejam fluidas, clique em Arquivo > Propriedades do site. Modifique a opção de Largura fixa para Largura fluida nesta janela.

  5. Escolha a largura máxima, a largura mínima e a altura mínima do layout da página.

  6. Clique em OK.

  7. Vá para a página-mestre e páginas individuais para abrir suas páginas na Largura fluida.

    Para usar o recurso de design responsivo, desative os efeitos de rolagem. Se desejar manter efeitos de rolagem para páginas específicas, continue com Largura fixa para essas páginas.

    Quando você abre as páginas na Largura fluida, por padrão, os objetos na página têm configurações de Largura fixa. Os objetos também são fixados à esquerda.

  8. Torne os objetos fluidos de forma que eles sejam redimensionados em proporção à largura do navegador. Clique com o botão direito em cada um dos objetos que precisam ser fluidos e selecione a opção responsivas.

    Remova a fixação se quiser que os objetos sejam fluidos. Para remover a fixação, clique com o botão direito do mouse no objeto e selecione em Fixar à página > Fluido.

  9. Use a alteração e exiba o layout de página em larguras diferentes do navegador.

    Você notará que alguns widgets não são fluidos. Seja onde for que esses widgets interrompem o design, adicione pontos de interrupção a essas larguras de página. Você pode então redimensionar o widget ou ocultar o widget para esse ponto de interrupção.

    Por padrão, a barra de ponto de interrupção não fica visível quando você estiver trabalhando com um site criados em versões anteriores. Para mostrar pontos de interrupção, clique em Exibir > Mostrar pontos de parada

    Mostrar pontos de interrupção no menu Exibir
    Clique em Exibir > Pontos de interrupção

    Observação:

    Quando você planeja o layout no design responsivo, crie o layout das páginas primeiro para a largura maior. Em seguida, exiba as páginas em larguras do navegador diferentes usando a alteração. Se o seu design quebrar, adicione pontos de interrupção nessas larguras. Em seguida, defina o layout nesses pontos de interrupção.

    Em geral, adicione os pontos de interrupção com base no layout de seu site e não com base no tamanho da tela de dispositivos do usuário.

  10. Ajuste o tamanho e a posição dos objetos e a formate o texto de modo que tudo apareça bem posicionado em todas as larguras do navegador. Para obter informações sobre como organizar objetos em layouts responsivos, consulte Organizar objetos no design responsivo para web.

    Observação:

    Enquanto organiza os objetos, verifique a distância entre eles e a distância entre o objeto e a borda do navegador. Talvez seja necessário ajustar as posições do objeto ou adicionar mais pontos de interrupção para resolver os problemas de design que ocorrem entre os pontos de quebra.

  11. Verifique o alinhamento e a legibilidade do texto em todos os pontos de interrupção. Se deseja realinhar a caixa de texto ou formata o texto para larguras de página específicas, consulte Formatar texto em layouts responsivos.

  12. Visualize as alterações arrastando a alteração até pontos de interrupção específicos ou visualize as alterações em um navegador.

  13. Exclua todos os layouts alternativos do site que tenham sido criados para outros dispositivos. O design responsivo para web permite migrar e manter seu site para todos os dispositivos em uma única tela.

Seu site responsivo agora está pronto para ser publicado!

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