Ao projetar seu site, é importante garantir que ele tenha uma boa aparência em qualquer dispositivo, independentemente do tamanho e do formato da tela. Os sites responsivos são projetados para ter uma boa aparência em todos os tipos de dispositivos modernos, como computadores, telefones, tablets, TVs, wearables e até telas de carros. Para tornar um site responsivo, você precisará modificar seu código CSS e HTML para redimensionar automaticamente seus elementos, dependendo de condições específicas. Este wikiHow ensina como planejar e implementar web design responsivo básico.
Passos
Método 1 de 3: Planejamento de Design Responsivo
Etapa 1. Descubra como o seu público usa o seu site
Atualmente, a maioria das pessoas que navegam na web o faz em celulares e tablets. Para que um site seja responsivo, você deve garantir que ele seja exibido corretamente, não importa onde esteja sendo visualizado. Se tempo e dinheiro são essenciais, concentre-se nos tipos de dispositivos mais populares entre seus usuários (se essa informação estiver disponível) e em como eles usam seu site. Usando seu software de análise ou alguma outra forma de pesquisa, descubra:
- Que tipo de dispositivo eles usam com mais frequência para visualizar o site, com atenção especial às marcas de celulares / tablets / computadores e tamanhos de tela / resolução.
- Quais navegadores são mais populares entre seus usuários. No que diz respeito às estatísticas globais, o Google Chrome é o navegador da web mais popular em todo o mundo, mas o Safari está em segundo lugar.
- Como seus visitantes usam seu site, por exemplo, quanto tempo eles passam visualizando-o, onde estão visualizando e qual conteúdo é mais popular. Isso pode ajudá-lo a determinar qual tipo de conteúdo é importante incluir e qual pode ser omitido.
Etapa 2. Projete layouts diferentes para dispositivos diferentes
Você pode usar uma combinação de CSS e JavaScript para detectar o dispositivo de um usuário, bem como seus recursos (se ele suporta Java, Flash, etc.) e exibir uma versão específica de seu site de acordo. Consultas de mídia CSS são particularmente úteis para determinar o tamanho / resolução do dispositivo.
Etapa 3. Considere os diferentes tipos de interações
Seu visitante pode estar interagindo com seu site usando um mouse, um teclado, uma tela sensível ao toque ou até mesmo um leitor de tela para deficientes visuais. Considerando isso, seu site deve responder a cliques do mouse, teclas do teclado (Tab, Enter, Return, etc.) e toques de dedo na tela.
Os efeitos de foco não funcionam com nada, exceto com o mouse. Em vez de usar esses efeitos, você pode exigir que o visitante clique em um botão ou ícone para exibir o que quer que tenha sido exibido anteriormente ao passar o mouse
Etapa 4. Considere o uso de um Sistema de gerenciamento de conteúdo (CMS)
Uma maneira fácil de garantir que o design do seu site seja responsivo é usar um CMS com um tema responsivo predefinido. Usar um CMS como Joomla, Drupal ou Wordpress permite que você garanta que seu site tenha uma ótima aparência em todos os dispositivos, sem ter que codificar os elementos responsivos você mesmo. Verifique com seu provedor de hospedagem na web quais ferramentas CMS estão disponíveis com o seu serviço.
Etapa 5. Use ferramentas online para testar seu site
Agora que o design responsivo da Web aumentou em popularidade, há uma variedade de ferramentas gratuitas que você pode usar para testar seu site. Se você já codificou seu site, use essas ferramentas para testar sua aparência em várias condições, para saber onde é necessário melhorar a capacidade de resposta:
- Teste de compatibilidade com dispositivos móveis do Google: permite saber se seu site funciona tão bem em dispositivos móveis quanto em telas de computador.
- resizeMyBrowser: Permite que você visualize seu site em diferentes resoluções.
- Responsiator: exibe seu site em telas de dispositivos diferentes em layouts diferentes (lateralmente ou do lado direito para cima).
Método 2 de 3: Tornando o Layout da Página Responsivo
Etapa 1. Considere uma estrutura de folha de estilo responsiva e gratuita
Uma estrutura é um conjunto pré-escrito de HTML, CSS e / ou JavaScript que você pode usar como esqueleto para seu site. Os frameworks são todos testados e otimizados para funcionar com todos os navegadores, então tudo que você precisa fazer é inserir seu conteúdo, adicionar suas preferências de mídia e cor e publicar seu site. Algumas estruturas populares são:
- Bootstrap
- Esqueleto
- Fundação
Etapa 2. Defina a janela de visualização com uma metatag
Se você não estiver usando uma estrutura, comece com o aspecto mais importante da codificação de um site responsivo: a janela de visualização. A janela de visualização é a parte do site que é visível para o usuário. A chave para fazer seu site ser exibido corretamente, independentemente do tamanho da tela, é dimensionar o tamanho da janela de visualização na tag META. Para fazer isso, inclua esta tag na parte superior de cada página do site:
Etapa 3. Especifique o tamanho do texto em relação à janela de visualização
Depois que sua janela de visualização estiver definida, o texto em sua página será dimensionado para caber na tela. No entanto, as fontes podem ser exibidas muito grandes ou muito pequenas se seus tamanhos não forem especificados em relação à janela de exibição. Você pode fazer isso definindo o tamanho da fonte como uma porcentagem específica da janela de visualização com a unidade vw. Este exemplo diz aos cabeçalhos H1 para serem exibidos em 10% da largura da janela de visualização, independentemente do tamanho:
wikiHow
Etapa 4. Use as consultas de mídia para mostrar estilos diferentes para tamanhos de tela diferentes
As consultas de mídia permitem que você escolha se deseja exibir certos elementos CSS, dependendo do tamanho da tela. Você pode especificar as especificações de sua consulta de mídia em seu arquivo CSS. Neste exemplo, a cor de fundo do corpo ficará vermelha se o tamanho da tela do usuário for 480px ou maior:
wikiHow
@media screen e (min-width: 480px) {body {background-color: aqua; }}
Método 3 de 3: tornando as imagens responsivas
Etapa 1. Use a propriedade de largura CSS para dimensionar as imagens
Em vez de definir a largura da imagem para uma quantidade específica de pixels (por exemplo, 500px), use uma porcentagem (por exemplo, 100%) para que a imagem olhe para a largura de seu pai e ajuste de acordo. Definir a largura de uma imagem em 100% força a imagem a aumentar ou diminuir, dependendo do tamanho da tela do visualizador. Para fazer isso in-line:
Etapa 2. Use a propriedade max-width para limitar o dimensionamento do tamanho real da imagem
Se você usar a propriedade de largura na etapa anterior para dimensionar uma imagem para 100%, a imagem aumentará ou encolherá para caber 100% de seu contêiner, independentemente do tamanho. Isso significa que se a imagem estiver no lado menor, ela será ampliada para um tamanho maior do que seu tamanho original e terá uma aparência de qualidade inferior. Para evitar que isso aconteça, use max-width para definir o tamanho de dimensionamento máximo da imagem para 100% (seu tamanho real). Veja como:
Etapa 3. Use o elemento de imagem HTML para exibir imagens diferentes em tamanhos de tela diferentes
Se quiser criar imagens de tamanho personalizado para exibição em telas de tamanhos diferentes, você pode especificar quais fotos exibir em seu código HTML. Crie as imagens de tamanhos diferentes e, em seguida, use este código como um exemplo para especificar qual imagem usar em telas de 600px e 1500px de largura:
