O consumo de dados pelo tráfego móvel aumentou 74% em 2015, com mais de um bilhão de dispositivos vendidos durante o mesmo período, e a tendência ainda está mudando. Isso por si só deve ser suficiente para destacar a importância de otimizar seus projetos para o tráfego móvel.
Alguns Temas do WordPress são melhor otimizados para lidar com resoluções mais baixas, mas isso não significa compatibilidade absoluta em que você confiará completamente. Na verdade, existem várias correções a serem implementadas que permitirão que você otimize melhor seu site para dispositivos móveis.
Neste tutorial, exploraremos diferentes dicas específicas para dispositivos móveis, otimização de imagem, design de layout e muito mais.
Dica 1: adicione ícones iOS e telas iniciais
Apesar dos muitos avanços feitos pelo Android, os dispositivos iOS permanecem muito popular e se beneficiar do suporte de uma comunidade ativa de desenvolvedores. O que quero dizer é que muitos dos seus visitantes provavelmente possuirão um dispositivo Apple e, se quiserem aproveitar ainda mais o seu site, basta salvar o ícone na tela inicial.
Para prepará-lo para essa eventualidade, mostraremos como você pode adicionar ícones do iOS de blog WordPress.
Primeiro, você terá que encontrar o arquivo header.php do seu tema (ou tema filho), já que teremos que adicionar um pequeno código na tag .
Aqui está o código que você precisa adicionar:
Como você pode ver, o código menciona ícones específicos para iPhones, iPads e dispositivos Retina, todos os quais devem ser precedidos pelo atributo rel com o valor "call-touch-icon".
Enquanto você está nisso, você também pode projetar uma nova tela inicial do iOS para o seu site com o seguinte código:
Observação: A tela inicial é aquela que aparece quando você inicia um aplicativo. É como a tela de carregamento de um aplicativo.
Dica 2: use vários tamanhos de imagem em associação com "consultas de mídia"
Você, é claro, já está familiarizado com a noção de " mídia-consultas" Pense nas regras de design específicas incorporadas ao seu CSS quando surgir um cenário específico. No caso do design móvel, esses cenários são as diferentes resoluções, orientações do dispositivo e dimensões do navegador. O problema com " mídia-consultas É que hoje muitos designers e desenvolvedores estão construindo sites com uma abordagem móvel secundária, mas o inverso deveria ser.
Essa abordagem móvel secundária pode ser vista em mídia-consultas Quando você vê as dimensões de dispositivos populares (ou seja, 320px, 480px, 768px) usadas como diretrizes. Embora em teoria isso possa parecer uma boa abordagem, uma vez que, para ser eficaz, não se pode pretender usar as dimensões de todos os dispositivos, que variam com a frequência com que são criados.
Então, da próxima vez que você estiver trabalhando em um design, faça da compatibilidade móvel uma prioridade:
- Projete seu "Consultas" então trabalhe em pequenas resoluções.
- Evite usar pixels para declarar seus pontos de interrupção. Em vez disso, tente trabalhar com "Ems" e as porcentagens sempre que possível para que seus designs possam se ajustar ao zoom.
- Lembre-se de pagar o seu " mídia-consultas Para que se adaptem aos dispositivos Retina (resolução mínima: 192dpi).
Dica # 3: otimize suas imagens
Mesmo que você tenha um design fantástico e responsivo, os visitantes em potencial podem escapar se perceberem que seu site está demorando muito para carregar e as imagens desempenham um papel importante nesse aspecto. Os usuários desejam ver belas imagens, mas que carregam muito rapidamente, daí a necessidade de otimizar suas imagens.
Embora possa parecer um enigma, existem muitas ferramentas que podem ajudá-lo a alcançar esses resultados. No topo da lista, temos EWWW Image Optimizer et WP Smush , que uma vez instalado, aplicará automaticamente técnicas de compressão de qualidade sem perdas para cada imagem enviada para o seu site WordPress e seu site WordPress pode até mesmo passar por sua biblioteca de mídia para otimizar as imagens enviadas antes.
Se você preferir não adicionar outro plug-in ao seu site, sempre existem ferramentas independentes, como TinyJPG et TinyPNG, que faz essencialmente o mesmo trabalho do EWWW Image Optimizer, reduzindo seletivamente o número de cores em suas imagens, bem como removendo meta (removendo dados desnecessários). Isso se traduz em um tamanho de arquivo consideravelmente menor com muitas alterações quase indetectáveis, o que é um compromisso ideal.
Dica # 4: pense em usar o SVG
Escaláveis Vector Graphics (SVG) são uma ferramenta bacana que você deve considerar. Apesar do que o nome implicaria, eles usam alguma forma de linguagem de marcação XML em vez de um formato de imagem e são especialmente úteis para gráficos simples, como logotipos, ícones, infográficos e outros aplicativos.
« Por SVG tão útil?“Você pode imaginar razoavelmente. Bem, para começar, eles são expansíveis, o que significa que você não terá que se preocupar em encaixar em janelas diferentes. Além disso, eles também podem ser facilmente animados com CSS.
Você deve estar familiarizado com ferramentas como Adobe Illustrator, Inkscape e Sketch, que incluem suporte para este formato, então experimente!
5 Dica: escolher boas fontes
O design móvel não se resume a imagens. A escolha de quais fontes usar pode ter tanto (senão mais) impacto em seus designs quanto os gráficos, uma vez que a maioria dos sites usa texto como seu principal método de transmissão de informações.
Da perspectiva de um designer, isso significa escolher as fontes certas, o que envolve:
- Não use fontes muito finas ou complicadas. Sua fonte deve ser facilmente visível em dispositivos móveis, se você não quiser que os usuários ajustem o zoom para ler melhor.
- Evite fontes com muito pouco espaço entre as letras para melhor legibilidade.
- Se você usar o media-consulta Para o seu texto, use ems para tamanhos em vez de pixels.
- Considere o uso de fontes sans serif, pois elas tendem a se ajustar melhor na maioria das resoluções.
Dica 6: trate o texto como parte da interface do usuário
Como estamos trabalhando com tipografia, você deve saber que a fonte não é a única coisa a se considerar, e sozinha não se trata de legibilidade. Como trabalharemos com uma ampla variedade de janelas, você deseja que seu design considere o texto como parte integrante da experiência do usuário para maximizar a legibilidade, o que significa:
- O uso de " mídia-consultas "Para manter um limite gerenciável de caracteres por linha (lembre-se de usar ems em vez de pixels!). A quantidade geralmente aceita é definida entre os caracteres 45-75.
- Lembre-se de usar vw, vh e vhmin (tudo isso está relacionado à porcentagem da janela de visualização) Valores CSS3 para manter o tamanho da fonte em relação ao tamanho do visualizador ou em janelas específicas.
Resumo
Vimos ao longo deste artigo que o tráfego móvel está se tornando cada vez menos insignificante, o que deveria ser uma prioridade para todo desenvolvedor de design de sites. Então você tem algumas dicas que você pode aplicar seu blog para entrar no seu site atual « mobile-friendly"