Melhores Práticas > Passo 2 - Modelo > Como criar um website "Amigável para Celulares"

Um website responsivo pode adaptar seu layout e conteúdo aos requisitos do usuário, reconhecendo fatores tais como tamanho de tela, a plataforma que estiver rodando o website e como o dispositivo está orientado. Isto significa que quando um usuário passa do seu PC para um tablet ou um smartphone, por exemplo, o website responsivo automaticamente se adapta (responde) à nova resolução (tamanho de tela expresso em pixels) e continua a oferecer a melhor interação possível e uso do conteúdo no viewport (a janela que contém a página web).

O princípio básico do design responsivo é que ele não cria necessariamente versões diferentes do mesmo website: em vez disso, cada website deverá se adaptar à crescente variedade de dispositivos nos quais ele poderá ser exibido.

Para alcançar este resultado, o web design responsivo usa uma mistura de grades, layouts e imagens flexíveis, além de um uso ponderado de consultas de mídia CSS. Deixando de lado os termos técnicos, entretanto, a fim de criar um website responsivo é importante compreeender plenamente os objetivos deste tipo de design e como estes objetivos influenciam no modo como o conteúdo é organizado e gerenciado.

A meta final do web design responsivo é oferecer ao usuário uma experiência positiva em todas as circunstâncias, e assim os objetivos são:

▪	adaptar o layout ao maior número de resoluções de tela possível (desde celulares até PCs);

▪	adaptar o tamanho das imagens (e de todo o conteúdo de largura fixa em geral) à resolução e tamanho de tela em que forem exibidos;

▪	simplificar o layout de página para dispositivos móveis com telas menores;

▪	ocultar os elementos não essenciais nesses aparelhos;

▪	fornecer uma interface de usuário que seja adequada à interação de toque para os dispositivos que dão suporte esta tecnologia.

Mantendo em mente estes objetivos básicos e que o objetivo final é garantir a melhor experiência de navegação possível, que seja independente do aparelho que estiver sendo utilizado, é possível criar websites responsivos com o WebSite X5 porque ele é o programa que simplifica o gerenciamento de conteúdo e fornece o código necessário para criar as páginas.

Uma das primeiras coisas a se pensar, quando projetar um website responsivo, são os intervalos de breakpoints a incluir.

Um breakpoint é um ponto, ao longo de uma linha de referência de diversos valores de resolução, que indica onde o layout de página deverá alterar a exibição da melhor forma mediante uma resolução de tela diferente (lembre-se que a resolução de tela, ou tamanho, é fornecida pelo número de pixels que podem ser exibidos horizontal e verticalmente, e é o valor na horizontal que interessa para websites responsivos - a largura disponível para exibição).

O diagrama abaixo pode ajudar a esclarecer o mecanismo. Este exemplo representa esquematicamente o comportamento de um website que tenha 3 breakpoints configurados: o primeiro a 960px, o segundo a 720px e o terceiro a 480px. As diversas cores representam os diversos layout de modelos onde

3 breakpoints criam 4 viewports. Os viewports no diagrama são exibidos em cores diferentes. A maneira como uma página web será exibida na tela muda a cada breakpoint. A exibição permanece basicamente a mesma para todas as resoluções no intervalo dentro de um breakpoint e o seguinte. A mudança de cor no diagrama corresponde à mudança do layout de página em cada viewport novo. Em resoluções maiores que 480px, o plano de fundo fica verde. Ele permanece verde até que a largura atinja 720px, aí ele se torna amarelo. Quando a janela do navegador atinge a resolução de 960px na horizontal, então o plano de fundo se torna vermelho.

De quantos breakpoints você precisa? Não existe uma resposta única a esta questão: uma grande parte depende das características do seu website, seu layout, seu público-alvo e assim por diante. A melhor coisa é definir tantos breakpoints quanto for o número de tamanhos de telas diferentes você acredita que seu público provavelmente terá em seus diversos aparelhos (PCs, tablets pequenos e grandes, telas de smartphones grandes e pequenas, etc., sem se esquecer das orientações em paisagem ou retrato).

A maioria das pessoas tende a configurar breakpoints baseando-se nos diversos tamanho de tela dos aparelhos mais comuns. O WebSite X5 também faz assim e propõe os seguintes breakpoints na linha de Resoluções de Referência:

▪	960px: Desktop

▪	720px: Tablet com orientação em paisagem

▪	600px: Tablet com orientação em retrato

▪	480px: Smartphone com orientação em paisagem

▪	Menor que 480px: Smartphone com orientação em retrato

O ideal a atingir são breakpoints que identifiquem macro-categorias: há tantos dispositivos diferentes no mercado que seria impossível fixar um breakpoint para cada um deles. A edição Evo do WebSite X5 trabalha com 3 breakpoints; a edição Pro, por outro lado, pode trabalhar com até 10 breakpoints, inclusive os associados aos viewports de Desktop e de Smartphone.

Quando tiver planejado os breakpoints que serão configurados, o procedimento para criar um website responsivo com o WebSite X5 é o seguinte:

▪	No Passo 2, abra a janela Resoluções e Design Responsivo e selecione a opção Site responsivo.

▪	Permaneça em Resoluções e Design Responsivo e defina a lista de breakpoints a serem configurados para o website, usando os comandos fornecidos.

Quando configurar os breakpoints, tenha em mente que:

•	Por padrão, todos os breakpoints são definidos de acordo com valores tirados do modelo gráfico que tiver escolhido para o projeto.

•	Todos os breakpoints, com exceção do breakpoint de Smartphone que automaticamente assume o valor do breakpoint mais alto, podem ser alterados usando o botão Editar....

•	Na edição Evo, não é possível remover os breakpoints que já estão lá, nem adicionar novos.

•

Na edição Pro, não é possível remover o breakpoint de Smartphone, mas é possível remover os intermediários (com o botão Remover). O breakpoint de Desktop pode ser selecionado e removido, mas o breakpoint seguinte se tornará automaticamente o novo breakpoint de Desktop. É preciso ter pelo menos 2 breakpoints, um para Smartphone e um para Desktop.

•	Na edição Pro, você pode adicionar até 8 novos breakpoints (com o botão Adicionar), obtendo no máximo 10, inclusive os breakpoints obrigatórios de Desktop e Smartphone.

•

O breakpoint de Smartphone define a resolução mínima sob a qual o website sempre será exibido de forma linear: todos os objetos serão exibidos em uma única coluna (respeitando a ordenação e seleção de visibilidade realizadas na janela Configurações para site responsivo) e, assim como a largura da página, eles ocuparão 100% da largura disponível.

Todos os breakpoints são listados na tabela de resumo e repetidos na janela Configurações para site responsivo.

Na edição Evo será pedido que você defina somente o breakpoint de Smartphone, mas na edição Pro, você pode definir até 10 breakpoints, inclusive os breakpoints padrão de Desktop e Smartphone. Se você usar a edição Pro para abrir um projeto que tenha sido criado com a edição Evo, o breakpoint de Smartphone será mantido e outros poderão ser adicionados.

Se você pensar sobre como um website será exibido em aparelhos diferentes, você perceberá que o modelo gráfico precisará se adaptar também, de modo que o conteúdo seja sempre exibido da melhor maneira possível em cada dispositivo. À medida em que a resolução da tela fica gradualmente menor, pode não haver espaço suficiente para exibir algumas partes do modelo e, portanto, você poderá preferir remover aquelas partes que forem menos importantes.

No WebSite X5 você pode trabalhar no modelo para indicar como ele deve se alterar nos diversos viewports, entre os breakpoints ativos.

▪	Depois de decidir se quer usar um modelo padronizado ou se irá criar o seu próprio modelo, vá para a janela Resoluções e Design Responsivo, selecione criar um Website Responsivo e estabeleça todos os breakpoints que desejar.

▪	Ainda no Passo 2, vá para a janela Estrutura do Modelo.

▪	Use a Barra Responsiva para selecionar o viewport de Desktop e use as opções disponíveis para especificar como o modelo deverá aparecer neste viewport e, consequentemente, no intervalo de resolução correspondente a ele.

▪	A Barra Responsiva exibe todos os intervalos que resultam da configuração dos breakpoints feita na janela Resoluções e Design Responsivo. Quando tiver definido o modelo para o viewport de Desktop, selecione o próximo intervalo na Barra Responsiva e realize as alterações necessárias no modelo.

▪	Siga este procedimento para todos os intervalos na Barra Responsiva, realizando as alterações necessárias ao modelo para cada um deles.

Quando o layout do modelo tiver sido definido, você poderá personalizar o cabeçalho e o rodapé: estas áreas também podem variar de acordo com a resolução em que o website será exibido.

▪	No Passo 2, vá para a aba Conteúdo do Modelo. Por estar trabalhando em um website responsivo, a Barra Responsiva também aparecerá nesta janela.

▪	Selecione o intervalo de viewport Desktop na Barra Responsiva e crie o cabeçalho/rodapé do modelo.

▪	Selecione todos os intervalos, um a um, na Barra Responsiva e faça as alterações necessárias no cabeçalho/rodapé para cada um deles.

Em cada um dos viewports, é possível

•	adicionar novos objetos. O novo objeto ficará visível no viewport atual e nos seguintes, mas não nos viewports anteriores (onde ficará automaticamente oculto).

•	ocultar objetos. Para selecionar um objeto, clique no botão Exibir/Ocultar Objeto e indique se é para ele ficar oculto somente no viewport atual ou em todos os viewports subsequentes.

•	exibir objetos que foram ocultos anteriormente. Clique no botão Exibir/Ocultar Objeto para abrir o menu e então clique em Gerenciamento de Objetos ocultos. Uma nova janela se abre onde você pode selecionar o objeto em que irá trabalhar, a partir da lista de objetos, e selecione a opção Visível.

•	alterar a posição e/ou tamanho dos objetos. Todos as outras propriedades dos objetos permanecerão sem alteraçãos em todos os viewports.

Pode acontecer que alguns objetos não fiquem completamente visíveis em alguns viewports, na primeira vez. Eles são automaticamente reposicionados, o que significa que eles são movidos porém não são redimensionados. Você pode descobrir que alguns objetos se sobrepõem a outros. Use a pré-visualização para verificar como os objetos se comportam no cabeçalho e no rodapé nos diversos breakpoints.

Lembre-se que todos os modelos padronizados no WebSite X5 são otimizados para a criação de websites responsivos: isto significa que um determinado conjunto de breakpoints é estabelecido por padrão para cada modelo e se tornam ativos quando você seleciona a opção Site responsivo na janela Resoluções e Design Responsivo. Você pode alterar esses breakpoints padrão conforme o necessário.

As configurações para o comportamento responsivo do modelo são salvas no arquivo do modelo, e não no arquivo do projeto. Se você alterar o modelo e escolher um outro a partir da lista de modelos padronizados, uma janela se abrirá onde você será solicitado a indicar como deseja lidar com as diferenças entre o modelo antigo e o novo.

Basicamente esta janela avisa que os estilos serão sobrescritos e pede para escolher se:

▪	os breakpoints do modelo atual deverão ser mantidos ou se deseja substituí-los pelos do modelo novo,

▪	você quer manter somente os objetos adicionados ao modelo atual no cabeçalho e rodapé, somente os modelos presentes no novo modelo, ou todos os objetos no modelo atual e no modelo novo.

No web design responsivo, não importa o quão complexo o website seja, é fundamental desenvolver uma boa estratégia de gerenciamento do conteúdo, considerando não só o conteúdo que será incluído, mas também como ele será apresentado:

▪	Qual conteúdo precisará ser incluído na página?

▪	Você quer manter o mesmo conteúdo tanto para desktops quanto para dispositivos móveis?

▪	Caso contrário, quais conteúdos ficarão ocultos nos dispositivos móveis?

▪	Em que ordem o conteúdo será apresentado?

▪

Etc…

Uma boa estratégia é fazer uma lista de todo o conteúdo que precisa estar em uma página e colocá-lo em ordem de importância, do maior para o menor: isto ajudará a identificar o conteúdo essencial, qual deles precisará estar presente em todas as circunstâncias, e ordenar o restante de acordo com sua utilidade efetiva para que possa ocultá-los em resoluções mais baixas. Obviamente, esta operação tem que ser repetida para cada página do website.

Para entender melhor este mecanismo, o exemplo clássico é o website de um restaurante. Quando o website for exibido em um PC, você pode fazer uso integral de imagens e animações para apresentar os diversos pratos do menu, para despertar o interesse e o apetite do visitante! Quando o website for visto através de um dispositivo móvel, entretanto, considere que talvez o visitante esteja mais interessando nas avaliações ou nas informações de contato do que tentar ver fotos grandes. Portanto, você precisará reduzir imagens e se concentrar nas informações essenciais que irão interessar o cliente em potencial que estiver navegando a partir de um smartphone ou talvez sem banda larga, etc. e só esteja buscando informações essenciais de forma rápida.

No WebSite X5, uma vez que tenha criado a página como ela deverá ser vista no viewport de desktop (veja Como criar uma página usando a tabela de layout de página), você poderá começar a definir as alterações que serão necessárias a cada breakpoint. Isto é o que você terá que fazer:

▪	No Passo 4 - Páginas crie a página arrastando os diversos objetos para a tabela de layout de página e adicione seu conteúdo. A página será exibida como você a criar aqui no viewport de desktop (ou seja, em todas as telas que tiverem uma resolução maior que o breakpoint de desktop).

▪

Quando tiver terminado de criar a página, clique no botão

Responsivo para abrir a janela Configurações para site responsivo. A Barra Responsiva é exibida nesta janela e exibe todos os viewporte resultantes dos breakpoints que tenham sido configurados para o website (na janela Resoluções e Design Responsivo). Você terá que trabalhar em todos os breakpoints na ordem, começando pelo viewport de Desktop na Barra Responsiva e continuando até atingir o viewport de Smartphone.

▪

Ao selecionar o viewport de desktop, a configuração que você definiu na janela Criação da página aparecerá em um diagrama esquemático que é muito parecido com a tabela de layout de página. Clique no botão

Ordenação para começar a definir a ordem na qual os objetos serão exibidos no layout de página. O programa automaticamente associará um número de ordem de exibição a cada objeto.

▪	Se necessário, altere a ordem dos objetos de acordo com a importância do conteúdo e onde você quer que eles apareçam na página. Há várias formas de fazer isto

•	Se você selecionar Ordenação \| Ordenar todos os objetos desde o início, primeiro terá que clicar no objeto que quer que apareça primeiro na página e depois ir clicando em todos os outros objetos na ordem em que quer que eles apareçam.

•

Se você selecionar Ordenação | Continuar a ordenação a partir de um objeto, clique no objeto a partir do qual quer definir manualmente a ordem de exibição. Todos os objetos antes dele manterão o número de ordem atribuídos pelo programa, mas você deverá clicar em cada objeto subsequente para definir sua posição na ordem de exibição.

Você termina de ordenar os objetos quando:

•	Clica no último objeto da página.

•	Clica em Ordenação \| Ordenação completa para encerrar manualmente o procedimento e confirmar a ordenação atual.

•	Clica em Ordenação \| Cancelar ordenação dos objetos para interromper manualmente o procedimento e cancelar as alterações feitas até então, restaurando a ordenação original.

WebSite X5 guiará você durante o processo de ordenação da exibição: quando selecionar um objeto, as bordas de todos os objetos que podem vir em seguida são exibidas em vermelho, para que você saiba quais podem e quais não podem ser colocadas a seguir na ordenação. A ordem dos objetos que você decidir para o viewport de desktop será mantida para todos os outros viewports.

Para maiores informações, veja Como a Ordem de Exibição de Objetos funciona.

▪	Clique no botão Exibir/Ocultar Objeto para começar a indicar quais objetos deverão ficar invisíveis. Clique nos objetos que não quiser que sejam exibidos a resoluções mais baixas que a atual. Clique no botão Exibir/Ocultar Objeto novamente para confirmar suas escolhas e finalizar o procedimento.

▪

Clique no botão

para começar a definir as quebras de linha obrigatórias em resoluções menores que a do viewport de desktop atual. O programa ajudará você exibindo uma linha tracejada onde você poderá inserir uma nova quebra de linha: clique nessas linhas tracejadas para adicionar uma nova quebra de linha naquela posição. Clique no botão

Quebra de linha novamente para confirmar seu trabalho e sair deste procedimento.

Para maiores informações, veja Como adicionar quebras de linha e por quê você precisa delas.

▪

Se estiver usando a edição Pro, pode haver até 10 breakpoints configurados. Se houver qualquer viewport intermediário, use a Barra Responsiva para selecionar o viewport seguinte depois do Desktop. O layout de página será atualizado com as novas configurações feitas para o viewport de desktop: você agora poderá ocultar quaisquer objetos que não devem aparecer neste viewport e adicionar quaisquer quebras de linha que achar necessárias. Siga os mesmos procedimentos para cada viewport que tiver.

▪

Quando chegar ao viewport de smartphone você não terá que fazer nada porque todos os objetos que permanecerem visíveis (ou seja, que não tenham sido ocultados nos viewports anteriores) aparecerão de forma linear na tela, na ordem que você tiver determinado inicialmente ao configurar o viewport de desktop.

Como pode ver nesta explicação, o layout de página refletirá a estrutura de página em cada viewport. Todas as alterações que fizer em cada viewport determinará a estrutura que a página terá no seguinte.

Quando criar uma nova página em um website que deseje tornar responsivo, terá que se certificar que não há células vazias na tabela de layout de página. O programa tratará células vazias como se elas contivessem objetos (vazios) e dará a cada uma delas um número de ordenação: você não conseguirá alterar este número, mas conseguirá alterar a ordem em que eles aparecerão (apesar de quase sempre serão um espaço vazio). Para manter um controle maior sobre a ordem de exibição dos objetos, é melhor, portanto, evitar ter células vazias. Se realmente quiser ter um espaço vazio, insira um objeto na célula sem acrescentar qualquer conteúdo nele: se um objeto for adicionado manualmente ele não afetará o layout da página e poderá ser adicionado manualmente à ordem de exibição.

Para verificar se um website responsivo funciona corretamente antes de colocar online, basta dar uma olhada na pré-visualização offline, porque ela lhe dará as ferramentas que precisará para simular o comportamento da página nas diversas resoluções.

▪	No Passo 4 - Páginas, depois de ter criado a página e feito as configurações necessárias para torná-la responsiva, clique no botão Pré-visualizar para exibir uma pré-visualização dela no Navegador interno.

▪

O navegador interno exibirá uma barra de resolução que mostrará todos os breakpoints que tiverem sido configurados para o projeto. Clique em um dos breakpoints na barra para automaticamente redimensionar a janela do navegador para a resolução correspondende, de modo que poderá verificar o layout da página. Uma alternativa seria alterar o tamanho da janela do navegador manualmente para ajustar a largura e então verificar o layout do conteúdo.

▪

Se a página não tiver a aparência correta na pré-visualização, clique no botão

Exibir numeração: o conteúdo da página será contornado, o que corresponderá aos objetos que tiverem sido adicionados, e cada um exibirá seu numero de ordenação. Isto tornará mais fácil para você trabalhar onde precisar intervir para obter o resultado desejado.

Sugerimos que você verifique a pré-visualização de cada página a cada breakpoint para ter certeza que o website irá funcionar corretamente quando estiver online e for exibido em aparelhos diferentes.

Melhores práticas:

-	Como funciona Ordem de Exibição de Objetos
-	Como adicionar quebras de linha e por quê você precisa delas

Como criar um Website Responsivo

Como criar um Website Responsivo