Leia este artigo para saber como criar sites para dispositivos móveis ou smartphones.

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.

Você pode criar e projetar sites para celulares usando o design web responsivo no Adobe Muse. Com o layout responsivo, você pode usar um único arquivo do Muse para criar sites para todos os dispositivos, incluindo para celulares.

Primeiro, você deve determinar a largura do navegador para o qual deseja criar seu site. Você pode continuar a criar seu site. Para obter mais informações sobre como criar sites móveis usando o layout responsivo, consulte Criar sites responsivos.

Se você deseja criar layout alternativo para sites móveis, leia o artigo a seguir.

Design de sites somente para celulares

Usando o Adobe Muse, você pode criar layouts de site para que o conteúdo da Web seja exibido em computadores desktops, smartphones e tablets. Usando os recursos de design móvel, você pode criar layouts alternativos para celulares e tablets, bem como para área de trabalho.

O Adobe Muse inclui configurações, como alternar a 100% da largura e a funcionalidade Rodapé adesivo para garantir que o design seja bem exibido nas várias telas de dispositivos existentes no momento. O Adobe Muse permite usar fluxos de trabalho familiares para criar designs complexos em todas as dimensões de tela possíveis.

Para criar um layout alternativo para celulares:

  1. Abra o Adobe Muse e clique em Arquivo > Novo site.

    Selecione Largura fixa para criar sites para dispositivos específicos.
    Selecione Largura fixa para criar sites para celulares.

  2. Selecione a opção Largura fixa e, em seguida, clique em Configurações avançadas na mesma caixa de diálogo.

    Configurações avançadas do novo site
    Configurações avançadas ao criar um novo site.

  3. Especifique a Largura máxima da página.

    Determine a largura apropriada do navegador para celulares e especifique o valor.

  4. Insira os valores de Margem e Preenchimento para seu site para celulares. Insira os seguintes detalhes:

    • Largura e Altura da página: permite que você defina as dimensões iniciais da página. O Muse aumenta automaticamente a altura da página conforme você adiciona conteúdo e, portanto, o valor máximo não será definido para a altura da página.
    • Colunas e Largura da coluna: as colunas dividem visualmente uma página da Web do Muse em partes iguais, permitindo alinhar elementos de design com precisão. O Muse define automaticamente a Largura da coluna para um número específico de valores de Coluna e Medianiz.
    • Margens e Preenchimento: as Margens limpam a área ao redor da página da Web, fora da área do design. O Preenchimento permite limpar a área dentro do perímetro de design da página da Web.

    Clique em OK.

    Você pode iniciar o projeto de seus layouts para o site para celular.

Adicionar um layout de telefone para um site do Adobe Muse existente

Ao iniciar um novo projeto do zero, você pode criar qualquer um dos layouts primeiro e depois criar layouts adicionais, tudo dentro do mesmo arquivo .Muse.  Quando você publica ou exporta um site, o Adobe Muse gera automaticamente um arquivo chamado sitemap.xml que contém uma lista de todas as páginas para todos os layouts. O arquivo sitemap.xml é carregado com outros ativos de site. Isso aprimora a Otimização do mecanismo de pesquisa (SEO) do site ajudando os mecanismos de pesquisa a indexarem o site, para que as páginas sejam classificadas com precisão nos resultados da pesquisa.

Para criar um novo layout móvel para um telefone, uma das primeiras ações que você deverá executar com um site existente é examinar o conteúdo e determinar quais itens são necessários para a experiência de usuário do smartphone. Como os visitantes de smartphone frequentemente estão em trânsito e visualizam o conteúdo em uma tela menor, é importante simplificar o design e exibir apenas o conteúdo útil e com o qual é fácil interagir em uma tela sensível ao toque.

  1. Abra o arquivo .Muse existente ao qual você deseja adicionar layout de telefone alternativo.

  2. Abra cada página em seu projeto e clique em Página > Adicionar layout alternativo > Telefone.

    Opções de Adicionar layout de telefone
    Adicione o layout de telefone para criar o site para celular.

  3. Use o menu para selecionar um layout existente para copiar. Neste artigo, escolha Desktop para copiar o layout de desktop para o layout do telefone.

    Observe que você tem a opção de copiar o Plano do site, os Atributos de página e o Preenchimento do navegador. Deixe as configurações padrão para copiar as informações de site de desktop para o layout de telefone.

  4. Clique em OK para fechar a caixa de diálogo e adicione o layout de telefone.

    O Muse cria um plano de site para layout de telefone. Os nomes de página, a estrutura do site e os atributos da página-mestre serão copiados. O botão Layout de telefone não exibe mais um sinal de adição (+) ao lado de seu nome, pois o layout de telefone foi adicionado ao projeto do Muse.

    Você verá que o conteúdo de página real não foi adicionado à miniatura da página de layout de telefone. Isso é intencional, para permitir que você copie apenas o conteúdo realmente desejado em cada página de layout móvel. À medida que inserir o conteúdo que deseja adicionar a cada nova página, você poderá redimensioná-lo de acordo com as dimensões menores da tela móvel.

    Você pode adicionar novas páginas clicando no sinal de adição à direita da página inicial. Assim que você configurar o mapa, pode iniciar o design da experiência para celular.

    Leia a próxima seção para saber como configurar as páginas-mestres para o layout de telefone.

    Crie o mapa do site para o layout móvel adicionando novas páginas
    Crie o mapa do site para o layout móvel adicionando novas páginas.

Configurar a página-mestre e adicionar elementos comuns de página da Web

  1. No modo de exibição Plano, clique duas vezes na página-mestre A para abri-la no modo de exibição Design.

  2. Abra a interface Preenchimento do navegador para definir uma imagem de fundo.

  3. Clique em Adicionar imagem na seção Imagem. Procure e selecione o arquivo que deseja definir como a imagem de fundo.

    Adicionar opções de imagem
    Adicione uma imagem de fundo à página-mestre de telefone.

  4. Defina o Ajuste como Dimensionar para preencher e clique na posição central.

  5. Clique na área cinza fora da página ou em qualquer lugar no painel de controle para fechar a interface Preenchimento do navegador.

Adicionar hiperlinks para a navegação do site

O Adobe Muse permite vincular facilmente para páginas externos, arquivos disponíveis para download, seções em páginas da Web e muito mais por meio do uso de Hiperlinks. Definir a navegação apropriada no site é importante para garantir que um visitante seja capaz de mover-se facilmente entre as páginas do site. Uma navegação adequada também auxilia a otimizar o site para os mecanismos de pesquisa. Para mais informações, consulte Criar hiperlinks.

A lista suspensa Hiperlinks relaciona páginas ou links de ancoragem adicionados ao mapa do site. Para procurar por links corretos, comece a digitar o nome da página ou da ancoragem. Você só precisa digitar as primeiras letras e o menu Hiperlinks filtrará os resultados e os exibirá em uma lista suspensa. Isso facilita o acesso aos links que você deseja atualizar rapidamente.

Opções de hiperlinks
Filtre a lista de links digitando as primeiras letras no campo de menu Hiperlink.

Adicione conteúdo às páginas de layout de telefone

Você começará finalizando a página Inicial.

  1. Clique na página Interior (telefone). Copie o grupo inteiro de quatro botões numerados.
  2. Use o recurso Ir para página para passar para a página Inicial (telefone) e colar o grupo. Os links adicionados na seção anterior são mantidos, portanto, esteja ciente de que a página Início e a página-mestre Interior compartilham a mesma navegação.
  3. Use a ferramenta Seleção para posicionar o grupo no centro da página Inicial, perto da parte inferior do rodapé.
  4. Clique na guia Rascunho (Desktop) para retornar à página rascunho. Copie o quadro de texto na extremidade esquerda que diz: Há mais de uma maneira de resolver um problema.
  5. Clique na guia Home (telefone) e cole o quadro de texto. Use a ferramenta Seleção para posicionar o quadro de texto, para que ele seja centralizado acima do grupo de botões.
O design da página inicial está completo
O design da página inicial está completo.

Em seguida, você adicionará o conteúdo à página Seção 01.

  1. Clique na guia Rascunho (Desktop) para retornar à página Rascunho. Selecione o retângulo de fundo arredondado e três quadros de texto, no segundo pod da esquerda. Os três quadros incluem o círculo 01, o texto de espaço reservado 01 da seção e o botão Telefone laranja. Copie os itens selecionados.
  2. Pressione Command+J (Mac) ou Control+J (Windows) e digite as primeiras letras da Seção 01. Clique na tecla de seta para baixo para selecionar a página de telefone Seção 01 e pressione Return/Enter para abri-la no modo de exibição Design.
  3. Cole os elementos na página Seção 01 do layout de telefone. Use a ferramenta Seleção para centralizá-los na página usando as guias exibidas temporariamente.

A finalidade da página Seção 01 é fornecer uma breve introdução à empresa e facilitar sua chamada para os visitantes. Ao projetar sites móveis, você pode adicionar um novo tipo de link que permite que o visitante toque na tela e chame o discador de telefone do smartphone para ligar para um número. Trata-se de um excelente recurso de site móvel porque permite que possíveis clientes liguem para uma empresa de modo muito fácil.

Para adicionar um link a um layout móvel para acessar o número de telefone, siga estas etapas:

  1. Use a ferramenta Seleção para selecionar o botão Telefone.
  2. No campo de menu Links, digite tel:+1 e depois um número de telefone, como esse:
    tel:+14155551234

Esse é o formato que os navegadores móveis reconhecem para links de número de telefone.

  1. Pressione as teclas Return ou Enter para salvar o link.

Observação: se você preferir criar um link de email, insira o seguinte formato no campo de menu Hiperlink:
mailto:designers@design-is-fun.com

Depois que você adicionar o link ao botão Telefone, o design da página Seção 01 estará completo.

  1. Clique na guia Rascunho (Desktop) para retornar à página Rascunho. Selecione o retângulo de fundo arredondado, o círculo verde 02, o quadro de texto Seção 02, o mapa incorporado e o botão verde Mapa. Copie os itens selecionados.
  2. Pressione Command+J (Mac) ou Control+J (Windows) e digite as primeiras letras da Seção 02. Clique na tecla de seta para baixo para selecionar a página de telefone Seção 02 e pressione Return/Enter para abri-la no modo de exibição Design.
  3. Cole os elementos copiados na etapa 1 na página Seção 02 do layout do telefone. Use a ferramenta Seleção para centralizá-los na página usando as guias de alinhamento.

A página Seção 02 contém código HTML incorporado que foi gerado no site Google Maps para criar um mapa interativo.

Se você seguiu o tutorial chamado Introdução ao Muse, vai se lembrar de que copiou o código-fonte Google Map do site do Google e usou o recurso de HTML incorporado no Muse para colá-lo na página.

Felizmente, o código do Google Map já inclui suporte para gestos com os dedos nas telas sensíveis ao toque, para que os visitantes com dispositivos possam interagir com o mapa facilmente. Para este projeto de exemplo, as dimensões do mapa já foram redimensionadas.

Entretanto, se for necessário redimensionar as dimensões do conteúdo HTML incorporado em seus projetos, clique com o botão direito do mouse no conteúdo e escolha HTML para exibir o código na janela HTML. Você pode editar os valores de largura e altura do código para redimensionar o mapa para ajustar a uma tela menor.

Redimensionar as dimensões dos elementos HTML incorporados no código
Se for necessário redimensionar elementos HTML incorporados, você poderá atualizar as dimensões no código.

Se você abriu a janela Editar HTML, clique em OK para fechá-la sem fazer alterações.

  1. Selecione o botão Mapa.

Dessa vez, você adicionará um link para um site externo (Google Maps) para permitir que os clientes móveis visitem facilmente a versão completa do mapa em uma nova janela do navegador.

  1. Copie o link abaixo e cole-o no campo de menu Links:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

  1. Clique na palavra Links à esquerda do menu Links. Na caixa de diálogo exibida, marque a caixa de seleção: Abrir link em uma nova janela ou guia. Além disso, no campo Dica de ferramenta, insira o seguinte texto: Mapear para Adobe Fremont.
Opções de hiperlink
Defina o link será para abrir em uma nova janela do navegador e adicione uma dica de ferramenta.

  1. Clique fora da caixa de diálogo Links para fechá-la.

Em seguida, você adicionará o conteúdo à página Seção 03.

  1. Clique na guia Rascunho (Desktop) para retornar à página Rascunho. Selecione o retângulo de fundo branco arredondado, o círculo 03 roxo, o quadro de texto Seção 03, o formulário de contato e o botão de envio. Copie os itens selecionados.
  2. Pressione Command+J (Mac) ou Control+J (Windows) e digite as primeiras letras da Seção 03. Clique na tecla de seta para baixo para selecionar a página de telefone Seção 03 e pressione Return/Enter para abri-la no modo de exibição Design.
  3. Cole os elementos copiados na etapa 1 na página Seção 03 do layout do telefone. Use a ferramenta Seleção para centralizá-los na página usando as guias de alinhamento. Os widgets aplicados ao widget de Formulário de contato de desktop são mantidos quando copiados no layout de telefone. A única alteração feita para preparar o formulário para um layout móvel envolve redimensioná-lo e também seus elementos de acordo com a tela menor.

A página Seção 03 contém um widget de Formulário de contato que usa scripts de servidor do Business Catalyst e banco de dados para processar os dados do formulário exibido. Quando você clicar em Publicar e carregar os arquivos de site do Muse, a funcionalidade de formulário funcionará automaticamente.

Observação: embora seja possível usar outros provedores de serviço para hospedar o site completo do Muse, esteja ciente de que você precisará realizar alguma codificação tradicional para que os formulários de contato funcionem se não estiverem hospedados nos servidores Business Catalyst.

Neste projeto de exemplo, o formulário de contato não tem CAPTCHA ativado. CAPTCHA é uma configuração no menu Opções para widgets de Formulário de contato que você poderá adicionar quando quiser confirmar se o formulário foi enviado por um humano e não um script ou "spam bot" - a interface CAPTCHA exibe uma imagem com uma série de caracteres que requer que o visitante digite a cadeia de caracteres correspondente para enviar com êxito a mensagem pelo formulário. Embora os envios de formulário com spam bot possam constituir um incômodo, também é importante considerar a capacidade de uso do site em um telefone móvel. Se você tornar o formulário muito difícil de preencher, os visitantes poderão decidir não enviar a mensagem.

A página Seção 03 está completa agora. Não é necessário adicionar um link ao botão Enviar, pois ele já está configurado como parte do widget de Formulário de contato.

A página final do layout do telefone, Seção 04, contém um widget de Apresentação de slides. Os widgets no Muse são projetados e testados para funcionar com todos os navegadores modernos de desktop e móveis, para que não seja necessário alterar nenhum item para fazer a apresentação de slides funcionar em uma tela sensível ao toque.

Siga estas etapas para copiar o conteúdo da página de rascunho do layout de desktop na página Seção 04 no layout de telefone:

  1. Clique na guia Rascunho (Desktop) para retornar à página Rascunho. Selecione o retângulo de fundo branco longo, o círculo vermelho 04, o widget de Apresentação de slides e o quadro de texto Seção 04. Use a ferramenta Seleção para clicar e arrastar sobre todos os elementos para selecioná-los de uma vez. Copie os itens selecionados.
  2. Pressione Command+J (Mac) ou Control+J (Windows) e digite as primeiras letras da Seção 04. Clique na tecla de seta para baixo para selecionar a página de telefone Seção 04 e pressione Return/Enter para abri-la no modo de exibição Design.
  3. Cole os elementos copiados na etapa 1 na página Seção 03 do layout do telefone. Use a ferramenta Seleção para centralizá-los na página usando as guias de alinhamento. Os widgets aplicados ao widget de Formulário de contato de desktop são mantidos quando copiados no layout de telefone. A única alteração feita para preparar o formulário para um layout móvel envolve redimensioná-lo e também seus elementos de acordo com a tela menor. Quando você adicionar widgets com recursos interativos (como widgets de Apresentação de slides) a layouts móveis criados no Muse, perceberá que o painel Opções inclui a opção: Ativar gesto de passar o dedo. Esta configuração é ativada por padrão, para que todos os widgets adicionado aos designs móveis são configurados automaticamente para os visitantes que batam e usar gestos em telas sensíveis ao toque. A página de seção 04 contém um widget de slides que indica a imagem correspondente quando uma miniatura é atingida. A apresentação de slides é configurada para usar uma transição horizontal para inverter entre as imagens da galeria. Este exemplo requer interação do usuário para exibir as fotos, embora se você escolher, poderá definir o widget de Apresentação de slides para reprodução automática, para que ele percorra as imagens automaticamente quando a página for carregada.

Observação: se você configurar widgets de apresentação de slides a serem usados nas transições Esmaecimento, Horizontal ou Vertical, o código no Muse ativará automaticamente o gesto de Passar o dedo para permitir que os visitantes passem o dedo na tela sensível ao toque para percorrer as imagens da apresentação de slides.

Na próxima seção, Criar designs de layout móvel no Muse, você aprenderá a atualizar facilmente ativos em todas as plataformas móveis e a publicar o site do Muse para cada layout móvel.

Atualizar e otimizar ativos para seu site para dispositivos móveis

Em comparação aos computadores pessoais, tablets e smartphones têm um processador mais limitado, velocidades de conexão mais baixas e menor capacidade de armazenamento. Como resultado, uma atenção especial é necessária durante o desenvolvimento e o fornecimento de designs de site para dispositivos móveis.

O Muse inclui recursos que podem ajudá-lo na otimização de gráficos exibidos em layouts móveis para garantir que o site seja carregado rapidamente e executado de forma aceitável.

  1. Pressione Command/Control+7 para exibir o layout de desktop e clique duas vezes no arquivo de desktop Mestre A para abri-lo no modo de exibição Design.
  2. Abra o painel Ativos clicando em sua guia no conjunto de painéis para torná-lo ativo. Ou, se for fechada, escolha Janela > Ativos.
  3. Selecione a imagem de fundo de montanhas verde. O ativo é destacado no painel Ativos.
  4. Clique no nome do item, background.jpg, para expandir a lista de instâncias usadas no site. Observe que o arquivo de imagem de fundo é listado três vezes, com dois ícones diferentes, indicando que é usado nos layouts de telefone e desktop.
Painel Ativos
Verifique as instâncias de background.jpg no painel Ativos para obter informações sobre onde o recurso existe no site.

Nesta pequena amostra de site, a lista de recursos razoavelmente gerenciada, mas quando você cria sites maiores, a lista de ativos pode ficar maior e mais difícil de verificar.

Para facilitar a navegação na lista de ativos, selecione o primeiro item de cada ativo e clique na seta à esquerda para recolher o conjunto. Clique novamente quando quiser expandir para ver a lista completa de instâncias em que o ativo será usado no projeto de site.

Se você quiser localizar os ativos usados para um layout específico, clique na parte superior da coluna na extremidade direita do painel Ativos que exibe os ícones Desktop, Tablet ou Telefone. Isso classifica a lista de ativos de modo que os ativos de cada layout sejam exibidos em um conjunto consolidado.

Painel Ativos
Clique nos títulos de cabeçalho de qualquer coluna no painel Ativos para classificar a lista de ativos dessa forma.

Se você quiser alterar para um gráfico que atualizará todas as instâncias dele (em todos os layouts), clique com o botão direito do mouse no nome de um ativo e escolha Editar original no menu exibido.

Escolha Editar original para atualizar o ativo para todo o site
Escolha Editar original para atualizar o ativo para todo o site.

O arquivo original que você colocou é aberto no Photoshop, no Fireworks ou no programa de edição usada para criar, para que possa fazer alterações rapidamente.

Depois que você salvar o arquivo original revisado e retornar ao Muse, o item no painel Ativos exibirá o ícone Fora de sincronia para indicar que a versão do gráfico no site não corresponde mais ao arquivo de origem. Clique com o botão direito do mouse no arquivo novamente e escolha Atualizar para atualizar todas as iterações do gráfico para o uso da nova versão.

Use o recurso Atualizar para revisar todas as instâncias do ativo usadas no site
Use o recurso Atualizar para revisar todas as instâncias do ativo usadas no site.

Visualizar layouts móveis

Há várias opções que podem ser usadas para visualizar designs locais criados:

Enquanto estiver no modo de exibição Design do layout Desktop, clique em Visualizar para ver o emulador baseado em Webkit interno renderizar o HTML, CSS e JavaScript. A Visualização permite ver como seus layouts serão exibidos em um navegador antes da publicação de um site e verificá-lo on-line com um dispositivo.

No modo de exibição Design do telefone, clique em Visualizar para ver o layout do telefone. Use o menu Tamanho da visualização para selecionar entre iPhone 4, iPhone 5, Samsung Galaxy S III e Nokia Lumia 920 para ver o layout exibido em tamanhos de tela diferentes.

Visualizar layout móvel
O menu Tamanho da visualização é exibido durante a visualização de páginas no layout do telefone ou tablet.

Clique no ícone à direita da janela Tamanho da visualização para alternar entre o layout nos modos de retrato ou paisagem.

O Tamanho da visualização inclui proporções de altura e largura predefinidas que cobrem os tamanhos de tela de telefone celular mais comuns.

Algumas telas de smartphone são mais amplas, como a do Motorola Droid. Se o visitante tiver uma tela mais ampla, o recurso Viewport no Muse dimensiona automaticamente a largura do layout de telefone de acordo com o tamanho real disponível.

No modo de visualização, você pode clicar nos links e navegar para o site. Você pode rolar, o que simula um gesto de toque com o dedo, mas para testá-lo de verdade, é recomendável testá-lo no dispositivo.

Se você clicar no botão i próximo ao menu Tamanho da visualização no modo de visualização, verá uma nota com um link que descreve a ferramenta da Adobe Edge Inspect. A ferramenta Edge Inspect permite usar uma extensão de navegador do Chrome para conectar dispositivos móveis ao computador e depois sincronizá-los com o conteúdo exibido no navegador Chrome para desktop.

Com a Edge Inspect, você pode usar o Chrome e a opção Visualizar no navegador do Adobe Muse para exibir um site no seu desktop e a mesma página também é mostrada automaticamente nos dispositivos conectados. (Não se esqueça de definir o Chrome como o navegador padrão).

Se desejar, você também poderá adquirir uma ferramenta de terceiros chamada Reflection, que permite ver a emulação do dispositivo (conectado usando a mesma conexão de rede) na tela do computador desktop. Quando você usa seu smartphone ou tablet para navegar em um site, o emulador espelha a tela sensível ao toque do dispositivo.

Recursos adicionais relacionados a layouts móveis

Rodapés adesivos

Como nas versões anteriores do Muse, é possível arrastar as guias para definir a área abaixo da página e definir a região de rodapé. Você também pode definir qualquer elemento de conteúdo como um item de rodapé, o que faz com seja exibido abaixo da altura mínima definida nas Propriedades do site ou abaixo do conteúdo existente de página, o que for mais longo.

É muito útil definir o conteúdo do rodapé quando um site tem páginas de tamanhos variáveis, pois o posicionamento do rodapé é ajustado verticalmente para ser exibido de forma consistente na parte inferior das páginas, sobrepondo-se ao conteúdo da página.

Por padrão, a opção Rodapés adesivos está otimizada. Esse é um recurso especialmente projetado para visitantes com monitores maiores de desktop. Na maioria dos casos, você vai querer manter a opção de rodapés adesivos ativada quando criar sites, pois ela faz com que o rodapé permaneça no local desejado, mesmo que a janela do navegador seja significativamente maior do que o design da página da Web, já que está em um monitor de cinema da Apple.

Para ver como isso funciona, visualize um site do Muse em um navegador e diminua o zoom da página. Observe que, se o conteúdo da página ficar muito pequeno em relação à janela do navegador, a área abaixo do rodapé exibirá a janela do navegador, em vez de manter o rodapé na parte inferior.

Ao criar novos sites no Muse, você verá que a opção Rodapé adesivo está ativada na caixa de diálogo Novo site.

Novas opções de site
A caixa de seleção Rodapé adesivo é selecionada automaticamente quando você cria novos sites.

De modo geral, é melhor usar o recurso Rodapés adesivos ao criar sites. No entanto, se você observar que o comprimento das páginas exibe muito mais do que o desejado (pois um site tem menos conteúdo e as páginas são bem curtas), sempre poderá desativá-las desmarcando a caixa de seleção na caixa de diálogo Propriedades da página.

Desative o rodapé fixo nas Propriedades da página.
Depois de criar um site, atualize as Propriedades da página e desative a opção Rodapé adesivo.

Elementos fixos

O código gerado pelo Muse é testado para garantir que seja exibido e se comporte conforme esperado nos navegadores e plataformas modernos da Web.

Um dos padrões da Web que difere entre desktop e navegadores móveis é o suporte para elementos fixos de página. Ao criar sites para navegadores de desktop, você pode selecionar um elemento e usar a opção Painel de controle para fixá-lo na janela do navegador. Fixar é útil para criar a navegação consistente. Também é útil nos casos em que você deseja manter um elemento na mesma região de uma página maior, independentemente do quanto abaixo na página o visitante rola.

Quando este texto foi escrito, os navegadores móveis não ofereciam o mesmo suporte a objetos fixos. Como resultado, é necessário ter estratégias alternativas para objetos fixos ao criar layouts de telefone e tablet.

Ao criar layouts de telefone ou tablet, você observará que as opções Fixar estão acinzentadas e inativas.

Opções dos elementos fixos
A interface Fixar no painel de controle não está disponível para criar layouts móveis.

Publicar um site com layouts móveis

Você pode publicar locais com vários layouts no Muse usando o mesmo método utilizado geralmente para publicar sites de desktop. Isso é útil para publicar os sites de avaliação e depois usar dispositivos móveis para visualizar a versão ao vivo para testar designs em telas menores.

Clique em Publicar ou escolha Arquivo > Carregar no host de FTP para carregar os arquivos de site no servidor host.

Quando você publica um site do Muse com vários layouts, ele é encaminhado ao vivo com uma única URL. Assim você só terá que registrar um nome de domínio, como este:

http://www.my-site.com

Quando você publica um site com dois ou três layouts diferentes, o Muse gera o código do site que inclui scripts de detecção que identificam o tipo de computador ou do dispositivo e o tipo de navegador que o visitante estiver usando para acessar a página.

O código de detecção determina a versão da plataforma e do navegador e depois exibe automaticamente o layout correto. Não é necessário fazer nada para assegurar que os visitantes que usam um tablet visualizarão o design do tablet e os visitantes que usam smartphones verão o design de telefone. Isso acontecerá em segundo plano.

Os novos recursos de layout móvel no Muse permitem otimizar os layouts móveis para que os usuários do dispositivo não façam download de arquivos maiores desnecessariamente. A funcionalidade de layout alternativa serve apenas os arquivos de imagem menores e redimensionados para que o site seja bem executado em todas as plataformas e navegadores.

Para saber mais sobre como trabalhar com o Muse, consulte os artigos e tutoriais na Página de ajuda do Adobe Muse.

Usar Ir para página para copiar o conteúdo do site entre layouts

Clique na guia Mestre (Desktop) para ativar a página-mestre de desktop no modo de exibição Design.

O Muse facilita alternar entre layouts usando a ferramenta de navegação incluída: Ir para a página. Esse botão aparece no modo de exibição Design em qualquer projeto com vários layouts.

  1. Clique no botão Ir para página.
Botão Ir para a página
O botão Ir para página parece uma seta apontando para a página.

Durante o trabalho com vários layouts, é útil poder saltar rapidamente entre duas ou mais páginas, para que você possa facilmente copiar e colar o conteúdo.

Observação: além de clicar no botão Ir para página, você também pode usar o atalho de teclado: Command+J (Mac) ou Control+J (Windows).

A caixa de diálogo Ir para página é exibida. Contém um campo de texto que pode ser usado para digitar as primeiras letras do nome da página no site, para que você possa facilmente ir para a página sem voltar repetidamente para o modo de exibição Plano.

  1. Digite as três primeiras letras do nome que você deseja localizar. Neste exemplo, digite as três primeiras letras da palavra mestre: mes.

O campo procura os nomes correspondentes de página no site e os exibe na lista abaixo.

  1. Pressione a seta para baixo duas vezes para selecionar a página Mestre A (telefone) e pressione Return/Enter para abri-la.

A página Mestre (telefone) é aberta no modo de exibição Design e está pronta para edição.

Outra ótima maneira de passar entre os layouts diferentes em um site é usar os novos atalhos de teclado:

  • Command/Control+7 exibe o layout de desktop
  • Command/Control+8 exibe o layout do tablet
  • Command/Control+9 exibe o layout de telefone

Estes atalhos só estão ativos quando você edita um site com um layout correspondente. Teste o uso desses novos atalhos para desenvolver um fluxo de trabalho de sua preferência ao alternar entre layouts e páginas específicas.

Em seguida, você criará uma segunda página-mestre de telefone e adicionará os elementos de design.

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