A capacidade de resposta do site é a capacidade do site de ser exibido corretamente em dispositivos diferentes com características diferentes.
Mais vídeos em nosso canal - aprenda marketing na internet com SEMANTICA
Hoje, os sites são visualizados em computadores pessoais, tablets, smartphones. Cada dispositivo tem suas próprias características - velocidade operacional, resolução da tela.
Se o site não estiver respondendo, ele será exibido corretamente no computador. E no telefone ele pode "ir" - os blocos se sobrepõem, a fonte pode se tornar ilegível.
O próprio termo responsividade tem sido amplamente utilizado desde o lançamento do livro de Ethan Marcotte, Responsive Web Design - Responsive Web Design. Os sites capazes de se ajustar dinamicamente a determinadas características dos dispositivos de visualização passaram a ser chamados de adaptativos.
Um exemplo de layout responsivo
Exibir no PC:
No prato:
Em um smartphone:
Por que você precisa de um site responsivo
As tecnologias estão se desenvolvendo em um ritmo rápido e os fabricantes de equipamentos as acompanham. Smartphones, tablets, TVs e outros dispositivos eletrônicos conectados à Internet estão disponíveis para todos os gostos e bolsos, há muitas opções de tamanho de tela.
Ao mesmo tempo, o consumo de conteúdo está aumentando exponencialmente. Na luta pelo cliente, os proprietários dos sites usam todos os meios e métodos. Em particular, no estágio de desenvolvimento, a possibilidade de exibição correta de seu recurso da web em vários dispositivos é apresentada.
A porcentagem de dispositivos que permitem visualizar informações online está crescendo a cada ano. A variedade de formatos e resoluções complica o processo de desenvolvimento como um todo, requisitos adicionais devem ser levados em consideração em todos os estágios: designers e designers de layout e programadores.
O conceito de design responsivo permite agilizar o processo, já que não é necessário criar múltiplas variações do site, como era antes, por exemplo, nas versões mobile. Nesse caso, um conjunto separado de funções foi projetado em um subdomínio separado.
Os sites antigos precisam ser melhorados e uma variedade de abordagens para adaptabilidade torna possível implementar isso. O principal é avaliar corretamente a escala no início, em alguns casos é mais fácil, rápido e barato usar novos layouts e templates de design. Se sua identidade corporativa não for uma marca reconhecível, muitas vezes o fato de estar moralmente desatualizada também o leva a retrabalhar. E ninguém cancelou o rebranding como um estágio de transição para um novo nível. Um site responsivo é uma ferramenta poderosa para o seu negócio.
Existem serviços para verificar a capacidade de resposta do site.
Além disso, hoje os maiores buscadores Google e Yandex levam esse parâmetro em consideração ao classificar os sites. Desde a usabilidade, a navegação é um dos fatores indispensáveis na avaliação da qualidade do site. A velocidade de carregamento da informação, e no caso de imagens otimizadas, cai, texto ilegível e elementos distorcidos que são muito pequenos ou não cabem na tela dificultam a localização de informações e simplesmente levam a um aumento de recusas - o usuário fecha a página. Esses são fatores comportamentais que também afetam a posição nos resultados da pesquisa.
Para proprietários de sites, a terminologia técnica e os parâmetros de classificação não são critérios totalmente claros e tangíveis. Mas basta que eles entendam como isso afeta a dinâmica do atendimento. Em muitas áreas, a participação do tráfego de dispositivos móveis é comparável e até excede o tráfego de desktop. Isso deve ser levado em consideração. É cada vez menos possível encontrar desenvolvedores que não se oferecem para adaptar o site, mas não vai custar nada navegar nessa questão para controlar o processo.
Princípios de adaptabilidade
Threading
Digamos que você tenha desenvolvido um design para navegadores de desktop. Está tudo bem. Ao visualizar este site de um dispositivo móvel, os blocos se deslocam e se embaixo do outro.
Isso é chamado de fluxo. E agora é um dos principais princípios usados no design responsivo. Considere isto.
Relatividade unitária
Nas aulas de física da escola sabe-se que a velocidade pode ser absoluta, quando não importa de onde você observe o movimento, a velocidade será a mesma. E relativo - quando, dependendo do ponto de referência, a velocidade pode mudar.
As unidades são iguais. Dispositivos diferentes têm densidades de pixel diferentes. E o tamanho, por exemplo, 320 px terá uma aparência diferente na tela de um computador e de um smartphone.
A solução é usar unidades relativas. Quando você define todos os tamanhos, escalas e coordenadas do bloco em relação ao elemento que está na tela do PC e na tela do smartphone. Por exemplo, a borda superior.
Usando pontos de verificação
Estes são elementos cuja disposição muda apenas se um determinado dispositivo é usado para visualização com parâmetros dados tela.
Por exemplo, se o conteúdo da página “rasteja”, faz sentido adicionar tal ponto e corrigir o conteúdo.
Valores mínimo e máximo
Em um telefone celular, o artigo pode ser exibido como deveria. Mas agora você abre a mesma página em um monitor widescreen e não fica feliz com a imagem. Tudo está esticado, a legibilidade está fora de questão.
Por exemplo, você pode especificar propriedades. Se a largura da tela for inferior a 1000 pixels, o conteúdo deve ser exibido em tela inteira. Caso contrário, a largura máxima será de 1000 pixels.
Aninhamento de objetos
Acontece que você precisa usar muitos elementos que dependem da posição de outros blocos. É difícil controlar. Você pode aninhar esses objetos em um contêiner. Isso é adequado para aqueles blocos que você não deseja adaptar aos parâmetros da tela - botões, logotipos, etc.
Fontes corretas
As fontes da Web parecem bonitas. Mas não se esqueça de que estão todos carregados. Isso afeta a velocidade de carregamento das páginas para o usuário.
Uso correto de gráficos raster e vetoriais
Se a imagem tiver muitos pequenos detalhes, use um formato raster. Caso contrário - vetor.
Mas nenhuma imagem deve ser usada sem otimização - compressão. As imagens vetoriais geralmente já estão compactadas. Mas nem todos os navegadores mais antigos os suportam.
Respeito por layouts
Existem padrões gerais para quais dimensões básicas geralmente são consideradas guiadas ao desenvolver um layout.
No design responsivo, existem pontos de interrupção. Esses são parâmetros que são passados em funções de mídia. Indique em que resoluções ocorre a alteração do projeto.
- Para celular de 320 px, 480 px.
- Para tablets de 768 px.
- Para netbooks e alguns tablets de 1024 px.
- Para computadores pessoais de 1280 px e mais.
A vinculação a uma resolução específica não é rígida. Depende das configurações e parâmetros dos dispositivos.
Às vezes, não há necessidade de criar um layout para resoluções intermediárias, por exemplo, 480px, se o layout for exibido corretamente no intervalo de 768 - 320px.
Se o layout "quebrar" em um gadget específico for exibido incorretamente em uma resolução diferente, os valores reais para esta tela são considerados os pontos de interrupção.
Consultas de mídia
O desenvolvimento de sites responsivos baseia-se no princípio de definição de parâmetros de estilo por meio de consultas de mídia.
As consultas definem:
- Tipo de dispositivo: projetores, smartphones, monitores, TVs, etc.
- Condições
A solicitação e a resposta correspondentes aplicarão as configurações de exibição apropriadas do arquivo de folha de estilo css.
Verificando a capacidade de resposta do site
Você pode verificar como o seu site é exibido em dispositivos móveis usando vários serviços e ferramentas.
Usando um navegador
Por exemplo, o Google Chrome tem um kit de ferramentas integrado para verificar se o design do site está correto para exibição em dispositivos móveis. Você precisa pressionar a tecla F12 ou Ctrl + Shift + I, ou selecionar "Ferramentas Adicionais" - "Ferramentas de Desenvolvedor" no Menu.
V Mozilla Firefox pode ser feito desta forma "Menu" - "Desenvolvimento" - "Design Responsivo", ou Ctrl + Shift + M.
Compatível com Google Mobile (Google Search Console)
Nós apenas digitamos o URL completo na string e obtemos os resultados. A verificação geralmente leva menos de um minuto.
Um site responsivo é um padrão de desenvolvimento web, um dos indicadores da qualidade de um recurso da Internet e de uma atitude atenta às necessidades dos usuários.
Layout adaptável O site permite que as páginas da web se ajustem automaticamente às telas de tablets e smartphones. O tráfego da Internet móvel está crescendo a cada ano e, para processar esse tráfego de forma eficiente, você precisa oferecer aos usuários sites responsivos com uma interface amigável.
Os mecanismos de pesquisa usam uma série de critérios para avaliar a capacidade de resposta de um site quando visualizado em dispositivos móveis. O Google está tentando simplificar o uso da internet para proprietários de smartphones e tablets, marcando resultados móveis adaptados para dispositivos móveis sites com uma marca especial compatível com dispositivos móveis... Yandex também possui um algoritmo que dá preferência a sites com versão mobile / responsiva para usuários de busca mobile.
Você pode verificar a exibição da página em dispositivos móveis em serviços e.
Arroz. 1. Resultados de pesquisa para celular do Yandex e do Google com uma observação sobre a facilidade de uso do site para dispositivos móveis O que é layout responsivo
O layout responsivo pressupõe a ausência de Listras horizontaisáreas de rolagem e zoom quando visualizadas em qualquer dispositivo, texto legível e grandes áreas para elementos clicáveis. Com as consultas de mídia, você pode controlar o layout e a posição dos blocos na página, reconstruindo o modelo para se adaptar a diferentes tamanhos de tela do dispositivo.
As técnicas básicas para criar um site responsivo são fornecidas no artigo. Por design responsivo a largura do contêiner principal do site é definida em%, embora possa ser igual a 100% da largura da janela do navegador ou menos. A largura das colunas da grade também é definida em%. V design responsivo as larguras do contêiner principal e das colunas da grade são fixadas usando valores em px.
A técnica de layout fluido responsivo discutida nesta lição funciona muito bem em um layout de duas colunas, tornando o site responsivo e fácil de visualizar em dispositivos móveis. O modelo assume um layout diferente do conteúdo principal das páginas, nesta lição o layout da página principal será analisado.
Layout da página principal
Uma página consiste em três blocos principais: um cabeçalho (cabeçalho), um contêiner de wrapper para o conteúdo principal e barra lateral e um rodapé (rodapé). Usaremos 768 px e 480 px como nossos pontos de inflexão de design.
No primeiro ponto, vamos ocultar o menu superior e mover a barra lateral sob o contêiner com postagens. No segundo ponto, vamos alterar a posição dos elementos do cabeçalho, cancelar o posicionamento dos botões de mídia social nas postagens e cancelar o agrupamento em torno das colunas do rodapé.
Arroz. 2. Um exemplo de layout responsivo 1. Meta tags e seção
1) Adicionar à seção
arquivos necessários - um link para as fontes usadas, a biblioteca jQuery e o plug-in prefixfree (de modo a não escrever prefixos de navegador para propriedades):
2. Cabeçalho da página
No cabeçalho da página
o logotipo ;
botão para mostrar / ocultar o menu principal
