Com a quantidade de dispositivos móveis em uso continuamente aumentando e mais e mais pessoas preferindo usá-los para acessar a Internet, antes de começar a criar um website, é melhor considerar bem seu público-alvo para decidir se ele deverá ser destinado basicamente para uso em desktop ou se deverá atender a uma navegação a partir de todos os tipos de dispositivos. Um website cujo layout e conteúdo possa se adaptar automaticamente ao tamanho da tela do dispositivo em que for exibido (desktop, tablet ou smartphone) é conhecido como responsivo.
|
Você não tem que criar um website responsivo, apesar de ser a solução recomendada. Em alguns casos, você pode sentir que para o seu projeto seria melhor criar duas versões do website, uma para PCs e outra para dispositivos móveis. Em outros casos, pode ser suficiente tirar proveito dos recursos de otimização do WebSite X5 que exploram a capacidade dos navegadores de dar zoom nas páginas para que possam ser exibidas em dispositivos móveis. Para maiores informações, veja Como criar um website "Amigável para Celulares" |
Nesta seção, você pode definir o tipo de website que deseja, que pode ser:
| ▪ | Site de desktop: o website será otimizado para exibição em Desktop: se ele for exibido em um dispositivo móvel, o layout e o conteúdo não sofrerão alterações e o usuário poderá ter que ficar dando zoom com o navegador. |
| ▪ | Site responsivo: o website será otimizado para exibição em todos os dispositivos, desde desktops até smartphones, para dar ao usuário a melhor visualização possível do seu conteúdo, qualquer que seja o dispositivo que estiver usando. |
Se você escolher criar um Site de desktop, deverá especificar o:
| ▪ | Resolução do site: indica a largura das páginas do website em pixels. O valor padronizado varia de acordo com o o modelo escolhido, mas em todos os casos ele pode ser alterado. |
|
O valor padrão para o Resolução do site é calculado para visualização otimizada em uma resolução de 1024x768 pixels. |
Se, por outro lado, você decidir criar um Site responsivo, terá que indicar os breakpoints.
Um website responsivo pode ser exibido em diversos dispositivos que tenham tamanhos de tela (resoluções) diferentes. Um breakpoint é um ponto no qual, numa faixa dentro destas variedades de resoluções, o layout da página do website muda de forma a adaptar sua exibição a resoluções (tamanho de tela) diferentes.
Para ajudar a esclarecer este conceito, a janela abaixo exibe um diagrama que arruma os diversos tipos de dispositivos numa sequência.
Imediatamente abaixo desta linha você pode ver a linha de Resoluções Selecionadas que exibe 3 breakpoints definidos automaticamente quando um novo projeto é aberto:
| ▪ | Desktop: este breakpoint indica o tamanho acima do qual o website será sempre exibido no viewport de desktop. |
| ▪ | Intermediário: este breakpoint permite uma passagem mais fluida do viewport de desktop para o viewport de celular. |
| ▪ | Smartphone: este breakpoint define a resolução mínima a partir da qual a exibição do website será sempre linear. |
Por padrão, as resoluções associadas a estes 3 breakpoints são configuradas automaticamente de acordo com o modelo atual.
Na linha de Resoluções Selecionadas, os segmentos entre dois breakpoints, que correspondem aos intervalos de viewport, são exibidos em cores diferentes. Para maior clareza, as mesmas cores são usadas pra os ícones na tabela da janela Configurações para site responsivo e na Barra Responsiva na janela Estrutura do Modelo e no Navegador que estiver sendo usado para exibir as pré-visualizações do website.
Os breakpoints são exibidos na linha Resoluções Selecionadas e também ficam listados em uma tabela com os seguintes itens:
| ▪ | Breakpoint: todos os breakpoints ativos para o projeto estão listados nesta coluna. Um breakpoint indica o valor de resolução no qual ao layout de página do website tem que ser alterado para se adaptar ao novo tamanho de tela. Cada breakpoint é identificado pela resolução na qual ele se torna ativo. |
| ▪ | Viewport: todos os viewports que forem determinados pelos breakpoints são exibidos nesta coluna. Um viewport corresponde a um layout específico para o website. Na tabela, cada viewport tem um ponto colorido ao lado: a mesma cor aparece na linha Resoluções Selecionadas, bem como do segmento que corresponde ao intervalo ao qual o viewport se aplica. Para uma maior clareza, as mesmas cores são usadas nos ícones na tabela da janela Configurações para site responsivo e na Barra Responsiva da janela Estrutura do Modelo e do Navegador que exibe as pré-visualizações do website. |
| ▪ | Intervalos: esta coluna mostra os intervalos (faixas de valores de resolução) entre dois breakpoints consecutivos para os quais os viewports relacionados são propostos. O intervalo para o Viewport de Desktop não fica entre dois breakpoints, mas é definido de forma genérica como maior que o breakpoint mais alto. |
Você pode usar os comandos ao lado da tabela para trabalhar nos breakpoints sugeridos e nos viewports resultantes:
| ▪ |  Adicionar: Adiciona um novo breakpoint e indica a resolução a partir da qual ele se torna ativo. Você pode ter no máximo 10 breakpoints. |
| ▪ | Editar...: Use este comando para alterar a resolução do breakpoint selecionado. |
| ▪ | Remover: remove o breakpoint selecionado. Apesar do breakpoint Smartphone não poder ser removido, o breakpoint Desktop pode ser selecionado e removido. Porém, neste caso, o próximo breakpoint automaticamente se torna o novo breakpoint de Desktop. Quando um breakpoint é removido, todas as configurações associadas a ele (estabelecidas na janela Configurações para site responsivo) serão aplicadas ao breakpoint abaixo. É preciso haver pelo menos 2 breakpoints, um para Desktop e um para Smartphone. |
|
É difícil decidir de antemão quantos breakpoints serão necessários: o importante é configurar breakpoints de modo a criar macro categorias que cubram todos os casos possíveis e garanta uma navegação satisfatória em todos os dispositivos. |
Vamos considerar, por exemplo, um website cujo modelo tenha 960px de largura. A tabela exibe os 3 breakpoints padronizados, que determinam 4 intervalos, correspondentes a 4 viewports diferentes:
| ▪ | Breakpoint: 960px - Viewport: Desktop - Intervalo: Maior ou igual a 960px |
Para resoluções que forem maiores que o breakpoint de Desktop, o modelo para o viewport de Desktop será usado (definido na janela Estrutura do Modelo) e o conteúdo será organizado de acordo a como as páginas tiverem sido criadas no Passo 4 - Páginas.
| ▪ | Breakpoint: 720px - Viewport: Viewport 1 - Intervalo: Entre 959px e 720px |
Para resoluções entre os breakpoints de Desktop e Intermediário, o modelo se adaptará de acordo com as configurações estabelecidas para este viewport na janela Estrutura do Modelo. Neste caso, a largura da Conteúdo da página foi configurada para 720px, mas a janela do navegador poderá atingir até 959px, e o espaço que sobrar será ocupado pelo Fundo da página. Os objetos nas páginas serão arrumados como no intervalo anterior, que corresponde ao viewport de desktop.
Na edição Professional, este breakpoint pode ser alterado ou removido e, ao contrário da edição Evolution, os objetos na página serão arrumados de acordo com as configurações para este viewport estabelecidas na janela Configurações para site responsivo.
| ▪ | Breakpoint: 480px - Viewport: Viewport 2 - Intervalo: Entre 719px e 480px |
Para resoluções entre os breakpoints Intermediário e Smartphone, o website é linearizado: isto significa que todos os objetos serão exibidos um acima do outro (respeitando as configurações para sua ordenação e visibilidade que tiverem sido especificadas na janela Configurações para site responsivo). Assim como no intervalo anterior, o modelo assume as configurações dadas para este viewport na janela Estrutura do Modelo: a largura da Conteúdo da página é definida como 480px mas a janela do navegador poderá chegar a 719px e o espaço que sobra será ocupado pelo Fundo da página.
Na edição Professional, este breakpoint pode ser modificado ou removido, ao contrário da edição Evolution, os objetos na página não serão arrumados linearmente, mas sim de acordo com as configurações para este viewport conforme especificado na janela Configurações para site responsivo.
| ▪ | Breakpoint: 0px - Viewport: Smartphone - Intervalo: Menor que 479px |
O website continua a ser linearizado para resoluções que fiquem abaixo do breakpoint de Smartphone. O modelo aparece conforme as configurações para este viewport estabelecidas na janela Estrutura do Modelo e a largura da página será definida com um valor relativo em vez de absoluto, ocupando, portanto, 100% do espaço disponível.
Este breakpoint também é exibido na edição Professional, porém não pode nem ser modificado nem removido.
|
Se você criar um projeto com a edição Evolution e definir como um website responsivo, e depois abrir o projeto com a edição Professional, todos os breakpoints que tiverem sido configurados inicialmente serão mantidos. Quando trabalhar com a edição Professional, poderá configurar novos breakpoints e/ou alterar os existentes. |
|
Quando começar um novo projeto, o programa atribuirá a ele um modelo padronizado escolhido ao acaso: este modelo será mantido até que você escolha aplicar um modelo diferente. |
Melhores práticas:
