USANDO CONSULTAS DE MÍDIA CSS3 PARA UM PROJETO RESPONSIVO DO WORDPRESS

Um design responsivo para o seu site WordPress não é mais opcional – é uma necessidade. Pelo menos, é de acordo com o algoritmo atualizado do Google , que penaliza o site que não está totalmente otimizado para dispositivos móveis.

E a atualização do algoritmo do Google faz sentido. De acordo com a comScore , o celular tornou-se a plataforma digital líder, com atividade total em smartphones e tablets que representam 60% do tempo de mídia digital gasto nos EUA.

Usando CSS3, você pode atualizar seu site para torná-lo receptivo. Ao contrário de outros métodos, como o Bootstrap, o CSS3 é menos complicado e muito mais fácil de aprender e implementar, mas como também há CSS no Bootstrap, é uma excelente linguagem de estilo para aprender ou aprimorar tanto para iniciantes quanto para profissionais.

Nesta publicação, passaremos pelas etapas que você precisa tomar para tornar seu site sensível ao CSS3.

Responsive vs Mobile-Friendly

Os termos “responsivo” e “amigável para dispositivos móveis” são freqüentemente usados indistintamente ao descrever um site, mas é importante entender o que ambas as palavras realmente significam para garantir que o seu site atenda aos requisitos necessários necessários para se divertir em todos os dispositivos.

Com certeza, um design responsivo é diferente de um design amigável para dispositivos móveis, por definição.

Um design totalmente responsivo se encaixa perfeitamente em uma tela menor e tem ícones, imagens e outros elementos que são dimensionados para que sejam fáceis de ver e usar quando você toca neles.

Os sites amigáveis para dispositivos móveis, por outro lado, apenas atendem aos requisitos de exibição em telas móveis. Isso também significa que eles não são sensíveis.

Por exemplo, um site pode ser considerado amigável para dispositivos móveis quando você não precisa rolar para a esquerda e para a direita para visualizar todo o conteúdo, mas isso também significa que toda a página e seu conteúdo diminuem para que isso aconteça.

O conteúdo torna-se ilegível a menos que você aperte a tela de toque para tornar a página e seu conteúdo maiores.

Sites que não são sensíveis ou móveis, exibem o site de desktop padrão em todos os dispositivos móveis.

Em telas menores, você precisa rolar para a esquerda e para a direita para ler todo o conteúdo da página, pois não se encaixa na tela. Estes tipos de sites são difíceis de usar em dispositivos móveis.

Idealmente, você quer que seu site seja receptivo e não apenas amigável para dispositivos móveis. Felizmente, o CSS3 inclui a @mediaregra, que tem as ferramentas para ajudá-lo a criar um tema e conteúdo do site que são totalmente responsivos.

Qual é a @media regra?

Para tornar seu site WordPress sensível ao CSS, você precisa usar a @mediaregra. Você usaria isso da mesma forma que você faria com estilo regular com suportes curly, exceto que esta propriedade encerra outros estilos, como neste exemplo:

Com esta estrutura, os elementos incluídos assumem as regras estabelecidas por @media. Você pode definir o tipo de mídia a ser exibida, como telefones e tablets, impressoras ou leitores de tela. Depois de escolher um tipo de mídia, você pode definir seus valores em termos de dimensionamento com uma expressão.

Com esta regra CSS, pode dizer a um navegador que exiba conteúdo específico, dependendo do dispositivo que está sendo usado para visualizar seu site. Isso significa que você pode criar uma área de trabalho – ou versão completa do seu site, juntamente com um outro estilo que veja bem em telas e tablets menores que os visitantes que estão usando esses dispositivos podem ver.

Seu site responsivo seria compatível com todos os principais navegadores e seria facilmente visível para todos.

Na verdade, todos os principais navegadores conseguiram exibir a @mediaregra por algum tempo. Aqui está uma quebra das primeiras versões de cada navegador que o suporta:

• Chrome  – 21.0
• Safari  – 4.0
• Firefox  – 3.5
• Borda  – 12,0
• Internet Explorer  – 9.0
• Opera  – 9.0

Há tanto que você pode fazer com CSS ao criar um site responsivo e começa com a escolha do tipo de mídia que você deseja responder.

Definindo diferentes telas

A primeira coisa é a primeira: comece fazendo backup de seu arquivo do style.css para garantir a manutenção , caso você cometa um erro e precise restaurar sua versão original. Depois de abrir o arquivo e depois de digitar @media, você precisa adicionar o tipo de mídia ao lado dele.

Se você decidir não adicionar nada, então ele é padrão para todos os tipos de tela ou o tamanho específico que você descreve na próxima etapa. Você também pode usar  all.

Aqui estão as outras opções que você possui para os tipos de mídia:

• screen – Você pode usar isso para qualquer tela de celulares e tablets para laptops e desktops.
• print– Este é usado para impressoras. Você pode criar uma versão para impressão de uma página com este tipo de mídia.
• speech – Este tipo de mídia é usado para leitores de tela que analisam uma página e leem o conteúdo do texto em voz alta para pessoas com deficiência visual.

Antes do tipo de mídia, você também pode inserir notpara exibir um estilo para qualquer tela que não seja o tipo de mídia digitado ou apenas para exibir o estilo apenas para o tipo de mídia que você define. Se você usar qualquer um destes, você também precisa adicionar um tipo de mídia, pois isso não será mais opcional.

Com tudo isso em mente, até agora você pode digitar algo semelhante a este:

Estilo para tamanhos de tela

Em seguida, você pode obter mais específico e definir os tamanhos de tela que são necessários para aplicar os estilos que você inseriu mais tarde. Após o tipo de mídia, digite and, depois siga com uma expressão. Se você usa múltiplas expressões, todas elas devem estar separadas andtambém.

Neste caso, uma expressão é usada para adicionar recursos de mídia, como dimensionamento e eles são inseridos entre parênteses. Quando terminar de adicionar as expressões, digite seus suportes curly e adicione seu CSS para modelar seu design para o tipo de mídia que você definiu.

Veja o que parece quando está tudo juntado:

Neste exemplo, usei um max-widthde 1024 pixels. Isso significa que eu estabeleço a largura máxima para o tamanho de uma tela do iPad. É também assim que você pode usar uma expressão para definir um tamanho específico de uma tela.

Por que você gostaria de fazer isso exatamente? Quando você usa um dos seguintes itens como expressões, você pode controlar como diferentes dispositivos móveis visualizam o design e o conteúdo do seu site:

• max-width – O tamanho máximo da largura da tela do tipo de mídia permitido para exibir os estilos que estão definidos dentro da @mediaregra. Qualquer coisa maior e os estilos não serão exibidos.
• min-width –  Este é o oposto do acima. Define o tamanho mínimo da largura da tela do tipo de mídia. Qualquer coisa menor e os estilos não serão exibidos.
• max-height – Isso define a altura máxima que a tela de um tipo de mídia pode ter para que os estilos incluídos sejam exibidos.
• min-height – Você pode definir uma altura mínima para uma tela. Se uma tela for igual ou maior do que a quantidade que você inseriu, os estilos incluídos são exibidos no dispositivo.

Normalmente, as larguras geralmente são definidas e você pode deixar de fora a altura, a menos que você tenha um estilo específico que a exija. Tenha em mente que todos os dispositivos devem rolar para cima e para baixo para ver todo o conteúdo da página e é precisamente por isso que geralmente não é usado.

Uma vez que você conhece a largura dos diferentes tamanhos de tela para dispositivos móveis, você pode facilmente modelar seu tema e conteúdo para exibir bem para os dispositivos específicos que você escolher.

Aqui está uma referência rápida para as larguras das telas para os dispositivos mais populares:

• IPhone – 640px
• IPad – 1024px
• Comprimidos – 1366px
• Telefones Android – 640px, 720px, 854px, 960px são os tamanhos mais típicos
• Telefones extra-grandes para Android – 1024px ou 1066px
• Pequenos telefones Windows – 480px
• Maiores telefones do Windows – 768px
• Telefones mais pequenos e mais antigos – 320px
• Netbooks e desktops pequenos – 128px
• Ultrabooks / laptops – 1366px
• Desktops e TVs – 1920px

Se você usa essas larguras de tela para o seu  screentipo de mídia, você está no caminho certo para tornar o seu site ótimo em todos os dispositivos.

Há um tesouro inteiro de outras expressões e recursos de mídia que você pode usar. Por exemplo, você também pode definir a resolução, a proporção de cores e o índice de cores para seus tipos de mídia, para citar apenas alguns.

Aqui está um exemplo do que esses recursos de mídia poderiam parecer para lhe dar uma idéia melhor de como você poderia usá-los:

Neste exemplo, para exibir o estilo do conteúdo, o tamanho da tela deve ter pelo menos 1920 pixels de largura com uma relação de aspecto mínima de 16: 9 para o dispositivo. Simplificando, este código é perfeito para exibir estilos que são apenas para TVs e telas de mesa grandes, o que é excelente para mostrar vídeos de alta definição.

Para ver uma lista completa de todos os disponíveis, veja w3schools e do Mozilla site do desenvolvedor .

Testando seu site para responder

Quando terminar, é importante testar o que você criou para garantir que ele realmente funcione em vários ou em todos os tamanhos de tela. Se você tiver esses dispositivos à mão, você pode dispará-lo facilmente e testá-lo, mas isso pode ser difícil se você não os tem todos úteis.

Felizmente, existem muitas maneiras de testar seus estilos e sites para garantir que seja adequado.

Você pode usar as extensões de navegador do Windows Resizer Chrome , ResponsiveResize ou ResizeMe Safari e Firesizer ou Window Resizer para Firefox.

Há também muitos emuladores de dispositivos móveis online que você pode usar de graça.

• Responsivepx

  
  Eu acho que este site é de longe o meu favorito para verificar a capacidade de resposta de um site, pois você pode alternar a tela de amostra para qualquer tamanho desejado. É praticamente um balcão único para testes no local, pelo menos quando se trata de capacidade de resposta.

  Pode ser importante que você saiba que este site usa quadros para exibir o URL que você inseriu na parte superior da página para que alguns sites não sejam exibidos se estiverem codificados para desabilitar o carregamento em um quadro.

• IPad Peek

  
  Este site é ótimo para testar seu site nos últimos dispositivos da Apple, incluindo iPad e iPhone. Basta inserir o URL do seu site e você está pronto para ir.

  Pode ser importante notar que, se você codificou seu site para não ser exibido em um quadro, o site não será exibido.

• Emulador de celular

  Esta é uma ótima ferramenta para testar tamanhos de telefone mais antigos e menores. Você pode facilmente ver exatamente como seu site procura no dispositivo que você seleciona na caixa suspensa no menu.

  Você também vê especificações para o telefone para ajudá-lo a descobrir o que você precisa mudar se achar que as coisas parecem um pouco vacilantes. A boa notícia é que todos os sites devem ser capazes de carregar com esta ferramenta.

• Screenfly

  
  Este site é capaz de carregar sites em determinados tamanhos, desde desktops até tablets, como Kindle Fire, Samsung Galaxy Tab e Google Nexus 7, muitos tipos de telefone e televisões.

  Ele também possui outras opções disponíveis, como tamanhos personalizados que você pode inserir, atualizar, girar a área da janela de amostra em seu lado para visualizar paisagens em tablets e smartphones e até mesmo um link personalizado para compartilhar seus resultados.

  Este site não funciona bem com qualquer site que tenha desativado sua visão nos quadros, então tenha isso em mente se parecer que isso descreve seu site.

Depois de testar o seu site e você está satisfeito, parece ótimo em todos os dispositivos, há mais um teste que você pode tentar e é importante: o Teste móvel amigável do Google .

Tudo o que você precisa fazer é inserir o URL do seu site e esta ferramenta exibe um relatório e um exibe uma nota pass / fail. Se você passar no teste, seu site não será penalizado pelo algoritmo do Google e pode até dar um impulso ao seu ranking.

Você está pronto para obter uma resposta

Garantir que seu site seja responsivo é essencial à medida que mais e mais pessoas acessam a Web em um número crescente de dispositivos com diferentes resoluções de tela.

Se você quiser mais inspiração CSS3, confira as Consultas de mídia , uma mostra de projetos de sites sensíveis.

Com todas as ferramentas e informações contidas neste artigo, você deve ter tudo o que precisa para tornar o seu site sensível ao CSS3. Depois de terminar, você também pode testar o seu site apenas para garantir que você atenda aos requisitos de capacidade de resposta.

Você conseguiu criar um site responsivo com este tutorial? Quais são seus objetivos para um site responsivo? Compartilhe seus pensamentos nos comentários abaixo.