Observando o uso crescente de dispositivos móveis, desde o final de abril de 2015, o Google penalizou sites cujas páginas não estão preparadas para dispositivos móveis. Conseqüentemente, para sua SEO, você precisa ter certeza de que seu site é exibido de maneira adequada em telas grandes e pequenas.
Neste artigo, mostrarei como você pode colocar seu site na página usando a regra @media de CSS3.
É importante notar que os termos “responsivo” e “compatível com dispositivos móveis” são freqüentemente usados de forma intercambiável, apesar da diferença em seu significado real. Entender o que cada um significa é importante para garantir que seu site atenda aos critérios necessários para acomodar todos os tamanhos de tela.
Mas antes, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Então, voltemos ao porquê de estarmos aqui.
Ágil e móvel-Compatible
Sites que não são nem responsivos nem compatível com celular, são exibidos de forma idêntica em todas as telas, ou seja, a versão para telas grandes é exibida em todos os lugares. Em telas menores, você precisa rolar a página horizontalmente para ver todo o conteúdo. Eles são difíceis de navegar nessas telas.
Descubra também estes 8 WordPress plugins para personalizar o visual do seu site
Um site é móvel compatível quando atende apenas o mínimo estrito para ser visto no celular, o que não o torna um site responsivo. Por exemplo, um site pode ser considerado compatível com dispositivos móveis se você não precisar navegar horizontalmente. Isso faz com que seus elementos se tornem pequenos e indistinguíveis. Você deve então ampliar para ler seu conteúdo.
Do lado deles, os sites responsivo se adaptam perfeitamente a diferentes tamanhos de tela. Eles redefinem seus elementos para que possam ser vistos e usados facilmente nas menores telas. Esse é o tipo de design que você deseja para o seu site.
Veja também nossa 10 WordPress plugins para criar um formulário de reserva em seu site
Agora você sabe a diferença entre responsivo e móvel compatível. Agora vamos ver a regra @media de CSS3 que permite atualizar seu site para responsivo ou criar facilmente Temas do WordPress com conteúdo responsivo.
A regra @media de CSS3
Para tornar seu tema responsivo, você precisará da regra @media de CSS3. Basicamente, permite definir os estilos que deseja usar para um determinado tipo (tamanho) de tela. Você o usará como outra regra CSS (com colchetes), com a única diferença de que se sobrepõe a outras regras CSS.
@media media-type (expressão) {seletor de teste css {propriedade1: valor1; propriedade2: valor2; }}
Nesta estrutura, os elementos dentro da regra @ media só funcionam quando o tipo-de-media especificado para ter sido detectado com sucesso. O tipo de mídia escolhido, você pode especificar as características em termos de dimensões.
Discover Como aplicar a interface e a experiência do usuário ao WordPress
A regra @media detecta para você o tipo de tela com a qual seu site é visitado e escolhe as regras que melhor se adequam a esse tipo de tela. Todos os principais navegadores já integraram a regra @media.
Aqui está a lista para suas informações: Chrome , Safári, Firefox, IE, Opera et borda.
Definir as telas de destino
Se você deseja modificar um tema WordPress existente, faça uma cópia de segurança do CSS deste último para poder voltar se necessário.
Leia também nosso artigo sobre Como carregar gradualmente os comentários do Facebook e Disqus
Como vimos em sua estrutura, para definir o tipo de tela, deve-se encaminhar @media o tipo de tela de destino. Aqui está a lista dos diferentes tipos de tela:
- todos os : para todos os tipos de telas ou para as dimensões especificadas em expressão
- tela : para todas as telas, seja móvel, tablet, laptop ou desktop
- impressão : para impressoras, se você deseja estilos específicos para as páginas que podem ser impressas
- discurso : para leitores de tela, se você deseja estilos para deficientes visuais.
Existem também operadores que você pode colocar antes do tipo de tela; Como não para exibir estilos para telas que são de um tipo diferente do especificado ou só para aplicar estilos apenas a telas especificadas. Portanto, você pode ter:
@media única tela
Definir estilos para dimensões da tela
Você pode usar expressão para fornecer mais detalhes sobre as características da tela. Depois de @media entrar e seguido pela expressão. Se você estiver usando várias expressões, elas devem ser separadas por e. Aqui está um exemplo da estrutura:
@media only screen e (max-width: 640px) {selector-css-example {/ * Seu CSS usual aqui * /}}
Neste exemplo eu uso max-width com um valor de 640px. Isso é para definir uma largura máxima de tela do tamanho de um iPhone ou um pequeno smartphone Android. Com esse tipo de estrutura, você tem controle sobre a aparência do seu site em diferentes dispositivos. Aqui está uma lista de propriedades relacionadas às dimensões que você pode usar em expressão :
Descubra também o nosso 8 SEO WordPress plugins para otimizar o SEO do seu site
- mem de largura et max-width : respectivamente a largura mínima e máxima exigida para a exibição dos estilos contidos na regra @media. Mais um pixel e estilos não são exibidos.
- mem altura et max-height : respectivamente, a altura mínima e máxima exigida para exibir os estilos contidos na regra @media. Como a maioria das telas é projetada para desenrolar páginas verticalmente, as propriedades min-altura et max-height são pouco usados.
Aqui está uma lista de tamanhos de tela para alguns terminais:
- IPhone: 640px
- IPad: 1024px
- Tablets: 1366 px
- Smartphone Android: 640px, 720px, 854px, 960px
- Android extra grande: 1024 px, 1066 px
- Windows phone: 480
- Windows phone grande: 768 px
- jovens e idosos: 320px
- Ultrabook / laptops: 1366px
- Desktops e TVs: 1920 px
Existem muitas outras propriedades que você pode usar em expressão. Por exemplo, se você está segmentando desktops ou telas de televisão capazes de exibir imagens de proporção de 16: 9, você pode usar uma estrutura como esta:
@media only screen and (min-width: 1920px) and (device-aspect-ratio: 16/9) {selector-css-example {/ * Seu CSS usual aqui * /}}
Para listas e exemplos mais completos, consulte w3schools et Mozilla Developpers.
Teste a funcionalidade responsiva do seu site
Conforme você modifica ou constrói seu tema WordPress ou no final, se você gosta de surpresas, deve testar o resultado para ver se ele finalmente responde. Lembre-se, o Google observa sites que não são responsivos.
Veja também estes 10 WordPress plugins para criar abas no seu blog
Por não ter todos os dispositivos móveis que você almeja, há (felizmente para nossas bolsas de valores) um bom número de ferramentas para ver como seu site se adapta a diferentes telas.
Diretamente no navegador do seu computador você pode usar Janela extensão do navegador Chrome Resizer, ResponsiveResize, ResizeMe ou Firesizer. Abaixo está uma imagem do BlogPasCher no Responsive Design View, que vem por padrão com o Firefox.
Existem também sites dedicados à tarefa:
Este site tem a particularidade de permitir que você mesmo escolha as dimensões da tela. Esteja ciente de que este site carrega o seu em um quadro. Então se o seu tema WordPress foi projetado para não ser exibido em um quadro, portanto é bem possível que não seja exibido aqui.
Peek iPad
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Este site é interessante para testar seu site nos dispositivos Apple, iPad e iPhone mais recentes. Basta inserir seu URL. Observe que ele está sujeito ao mesmo problema de quadro que o responsivepx.
Neste site você pode testar o seu em telas pequenas e em modelos mais antigos de telefones que você seleciona no lado direito da tela. Você também pode configurar algumas propriedades da tela.
Teste de compatibilidade com dispositivos móveis do Google
Este é um dos testes mais importantes, senão o mais importante. Basta inserir seu endereço na barra e clicar em Analise para iniciar o teste. Após o teste, a ferramenta exibe um relatório e uma pontuação. Se o teste for positivo, melhor ainda, você não será penalizado pelo Google.
Se você não é desenvolvedor, aconselho uma lista de temas responsivos do WordPress para começar.
Recursos Recomendados
Descubra também outros recursos recomendados que o ajudarão a atrair melhor seus parceiros e assinantes, mas também a melhorar a segurança do seu site.
- Como criar links personalizados cursos sobre WordPress
- 5 WordPress plugins para adicionar comentários de clientes ao seu blog
- Como criar uma roda de fortuna para cupons no WooCommerce
- Descubra as melhores ofertas e cupons para o seu blog
Conclusão
Aqui ! você sabe tudo o que há para saber sobre como tornar seu site ou tema WordPress responsivo usando a regra @media de CSS3. Se perdemos um tema WordPress que é caro a você ou que você prefere, deixe um link na seção Comentários abaixo.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Também convidamos você a compartilhe em suas diferentes redes sociais.
...
