De acordo com Hootsuite e Nós Somos Sociaisde acordo com Hootsuite e We Are Social, 55% da população mundial usa a Internet, ou quase 4,2 bilhões de pessoas. O meio tecnológico que mais atrai o tráfego de Internet continua móvel com uma participação de 51,6%, seguido pelos computadores com 44,1% contra 4,3% para outros meios. Isso significa que mais da metade de todos os usuários da Internet acessam websites através de seu celular. Por essa razão, o projeto de criação do site do senhor deve levar em conta o fato de que o senhor precisa propor uma interface que se adapte às diferentes interfaces. Na verdade, trata-se de torná-lo sensível para poder desfrutar do tráfego proveniente de usuários que não utilizam necessariamente um computador. Para isso, vou orientar o senhor durante o processo de adaptação de uma página de seu site ao telefone. Este artigo, que faz parte de uma longa série, terá o cuidado de mostrar-lhe todos os passos “passo a passo”, para que o senhor mesmo possa fazê-lo. Não se esqueça de seguir o vídeo que o acompanha, que provavelmente o ajudará muito.
Recebam páginas “Responsive”!
Table des matières
Descubra neste vídeo
como adaptar suas páginas do site ao telefone:O que é um website que responde?
Com a evolução da tecnologia, cada vez mais pessoas estão se conectando à Internet. A maioria deles o faz por meio de seu telefone celular, portanto seu website precisa ser perfeitamente adaptado ao formato do telefone, a fim de garantir uma experiência de navegação otimizada para os usuários.
A propósito, Mobify descobriu em um estudo que 30% dos usuários da Internet abortam uma transação quando um website não se ajusta ao seu formato móvel. Além disso, se um website demora mais de 3 segundos para carregar, 57% dos clientes móveis tendem a sair.
Por exemplo, é provável que o senhor se sinta incomodado por um website que exige que o senhor faça zoom com os dedos, que role para cima e para baixo, ou que role para a esquerda e para a direita a fim de ler seu conteúdo.
Portanto, um website com capacidade de resposta deve ser capaz de se adaptar automaticamente aos diferentes dispositivos dos usuários. E há várias razões pelas quais o senhor deveria mudar para um website que responda.
Por que o senhor deve ter um website com capacidade de resposta
Há muitas razões para adotar um website que responda, mas eu lhe direi as mais importantes que podem ter um grande impacto em seus negócios.
O Google recomenda sites sensíveis
Com mais de 90,6 % da participação do mercado mundial, o Google continua sendo o mecanismo de busca mais usado pelos usuários da Internet. É, portanto, uma referência em termos de experiência do usuário e o fato de favorecer sites sensíveis não é coincidência.
De fato, a firma Mountain View destaca em seus resultados de busca websites que se adaptam ao formato móvel. Neste sentido, o Google não hesitou em criar o Móvel Amigável nesse sentido, o Google não hesitou em criar a etiqueta “Mobile Friendly” para permitir aos webmasters e administradores do site determinar se as páginas de seu site são exibidas corretamente no celular.
Nessa lógica, para um internauta que vai fazer uma busca através de seu celular, o Google se encarregará de classificar primeiro, nos resultados, as páginas que são “Mobile Friendly”, às custas daquelas que não o são.
Melhoria de suas vendas ou contatos
É provável que os visitantes saiam automaticamente do site do senhor se virem que as páginas do site do senhor não são exibidas corretamente em seu celular. E no entanto, 12,1 milhões
os franceses fazem compras via celular de um total de 37,5 milhões que compraram na Internet.
É por isso que essa categoria de usuários da Internet é de grande interesse para o senhor.
Seu site é mais fácil de administrar
No passado, aconteceu que alguns proprietários criaram dois locais diferentes, um para celulares e o outro para computadores. Isso tinha a desvantagem de multiplicar por dois, as tarefas relacionadas com a administração dos sites, conteúdo, etc.
Por essa razão, sugiro que o senhor opte por um site de Internet que permita evitar todos esses problemas, uma vez que é apenas um site.
Como adaptar minha página do website ao telefone: passos para que o senhor mesmo o faça
Para que o senhor tenha um entendimento completo de como tornar seu website amigável, vou usar o website da minha Agência SEO, Twaino.com.
Ela é feita no WordPress CMS e o tema que eu uso é “Avada”.
Antes de mais nada, observe que comecei um série de artigos sobre como criar um website que o senhor pode ler, dependendo do estágio em que se encontra na criação do seu.
1) Verifique a exibição de seu website no celular
O senhor pode simplesmente usar seu smartphone para ver como é seu site nesse meio, mas também pode usar o navegador em seu computador. Para isso, basta reduzir a largura da janela do seu navegador em pelo menos um terço, mantendo a altura do mesmo.
Quando faço isso para o meu, noto que na página inicial, entre outras coisas
- O título “Twaino: Agência SEO” é um pouco grande demais para um telefone
- A disposição das imagens não é boa, porque tenho duas imagens que se sucedem e vou deslocar a posição delas colocando-as entre cada texto;
- As flechas da “Metodologia da Campanha SEO” não se encaixam horizontalmente, mas se seguem umas às outras verticalmente;
- Há grandes quadrados de imagem na seção “Blog”, enquanto os carrosséis de dois pequenos podem tornar a experiência do usuário mais agradável.
Estas são algumas das mudanças que vou fazer. Sigam!
2) Entrar no painel de bordo do seu website
Para fazer as mudanças que o senhor precisa, é preciso acessar o console do WordPress.
Para fazer isso, simplesmente acrescente “…./wp-admin” à URL do seu site no seu navegador. A minha é ” https://twaino.com/wp-admin “.
Na página de login, preencha as caixas com seus identificadores e depois valide para acessar o painel de instrumentos.
3) Ir para a página inicial
Uma vez no tablier, vá para a página em que deseja responder. No meu caso, esta é a página inicial e uma vez sobre ela, clique na janela “Editar Página” com um ícone de lápis, localizada à direita de “Criar” e logo no topo da página.
Uma vez na nova interface, o senhor verá todos os blocos que compõem sua página da Internet, graças ao tema de seu site. A minha é “Avada” e vou usar essa interface para fazer as diferentes configurações
A esse nível, sugiro que o senhor duplique a janela da página inicial do seu navegador e a reduza. Isso lhe permitirá apreciar todas as mudanças que terá que fazer à medida que for avançando.
4 Criação de blocos para telefones celulares ou para computadores e tablets
O senhor terá que fazer isso várias vezes, pois criará blocos móveis para todos os blocos que quiser modificar. Vou usar a primeira modificação que pretendo fazer para ilustrar isso.
Se o senhor tem títulos em sua página, eles podem não ser otimizados para exibição por telefone. É o caso do título “Twaino: Agência SEO”, que é muito grande e que vou reduzir.
4-1) Duplicar o bloco a ser modificado
Para fazer isso, encontre o bloco onde se encontra o texto e clique nele. O bloco que quero modificar é “Agência” e clico na pequena seta à direita para ver seu conteúdo.
Sugiro então que o senhor duplique o bloco, pressionando o segundo ícone da esquerda. Isso permite que o senhor crie o bloco a ser afixado nos celulares.
Em seguida, nomeie este novo bloco para que o senhor possa encontrá-lo facilmente. Para mim, uso a “Agência Móvel”.
4-2) Criar o bloco somente para computadores e tabuletas
O primeiro bloco que o senhor duplicou, que no meu caso é “Agência”, é o que será exibido em todos os meios de comunicação, por padrão. O senhor deve, portanto, desativar a opção de exibição do telefone.
Essa ação lhe permite reservar apenas o primeiro bloco para exibição em computadores e tablets e o segundo bloco, “Agence Mobile”, no meu caso, para exibição em telefones.
Para fazer isso, clique no ícone de edição, que é o primeiro da esquerda. Em seguida, desça até “Visibilidade do recipiente”, o que lhe dá três opções:
- Tela pequena: Para telas pequenas, inclusive telefones;
- Tela média: Para telas médias, inclusive tabletes;
- Tela grande: para telas grandes, inclusive computadores.
Como quero que esse bloco seja visível apenas nos computadores, desmarcarei “tela pequena” e manterei apenas “tela média” e “tela grande”.
Depois, guarde essa modificação para continuar.
4-3) Criar o bloco somente para os celulares
Este é o mesmo processo do passo anterior, exceto que aqui o senhor vai desmarcar :
- Tela média
- Tela grande
Certifique-se de que a cor deles se torne cinza, o que permitirá ao senhor usar a configuração do segundo bloco, “Agência Móvel” no meu nível, para exibição apenas em telefones.
Guarde essa modificação para que ela seja levada em conta. Neste momento, aconselho o senhor a sempre reduzir os blocos que não utiliza para não cometer erros. De fato, se não for esse o caso, o senhor corre o risco de fazer certas modificações no bloco errado e terá de recomeçar, o que não é desejável.
5) Altere o tamanho da fonte de seu título
Depois dessas etapas, o senhor pode agora passar à fase de edição propriamente dita. Para mudar o tamanho de seu texto, arraste o cursor do mouse sobre a área onde o texto é exibido em forma de miniatura. O senhor verá um ícone de edição em forma de lápis, que se encontra na primeira posição à esquerda, que o senhor vai apertar.
Na página que aparece, o senhor tem um campo contendo seu texto e várias opções para formatá-lo.
Em seguida, clique na guia “Texto”, no canto superior direito do campo de texto.
O senhor tem o formato html de seu texto e procura a palavra “tamanho da fonte” seguida de um número. Este é o tamanho do texto que o senhor deseja modificar.
No meu nível, tenho “font-size: 50 px” que está na mesma linha do título que quero mudar o tamanho de, “Twaino: Agência SEO”.
Isso indica que o tamanho do título é de 50 pixels, que eu mudo para 40 pixels.
6) Movam suas imagens
Há duas imagens que se sucedem no bloco “Agência Móvel”, que não tem bom aspecto ao telefone. Para fazer isso, vou mover um deles abaixo do texto que os segue. Eis como fazê-lo, se o senhor quiser fazer o mesmo.
É uma operação muito simples e, uma vez no bloco, clique com o botão esquerdo do mouse sobre a moldura da imagem e arraste-a para a área que deseja colocá-la.
No meu nível, arrasto-o para a direita e ele toma o lugar do segundo texto, por isso acabo de colocá-lo na última posição.
Guarde essa mudança clicando no botão azul “Update”, no canto inferior direito. O senhor pode verificar se as configurações foram levadas em conta.
Para fazer isso, atualizo a página inicial da aba reduzida do meu navegador e as mudanças foram levadas em conta com uma boa renderização que é diferente quando se passa da visão de um computador para a visão de um telefone.
7) Organizar o layout das formas
No bloco “Método”, tenho setas que se encaixam bem no visor do computador, mas dão um resultado diferente para o telefone.
Para realizar a mesma ação que eu, primeiro duplicar e dar-lhe um nome. No meu caso, escrevo “Methode Mobile” para poder diferenciá-lo do primeiro.
Então, como fez no passo 4, desative :
- A exibição em “Tela pequena” no primeiro bloco.
- A exibição em “Tela média” e “Tela grande” no novo bloco.
Isso permite ao senhor fazer as modificações para o telefone.
7-1) Eliminar as setas antigas
Clique na pequena seta na extrema direita para ver o conteúdo do novo bloco que o senhor deseja modificar, “Methode Mobile”, no meu caso.
Suprimo os outros elementos deixando apenas um, o que me permitirá ter todo o conteúdo na mesma linha. Para fazer isso, basta clicar no ícone do lixo que os acompanha.
7-2) Inserir uma imagem
Arraste o cursor sobre a imagem e pressione o ícone do lápis à esquerda para fazer as diversas mudanças.
Na interface que aparece, selecione o botão “Edit” que se encontra na extrema direita e logo abaixo da imagem. Isso o levará à “Biblioteca da mídia” de seu website.
O senhor tem a opção de selecionar uma das imagens já existentes em sua biblioteca ou de fazer o upload de uma nova imagem. Em meu nível, já criei uma pequena imagem com o software Adobe Illustrator que posso usar.
Para fazer isso, clico em “Upload files” e depois em “Select files” para carregar a imagem do meu computador.
Tenho o cuidado de nomear a imagem e pressionar o botão “Inserir na página”. Depois de salvar clicando em “Salvar”, clico em “Atualizar”, o que leva em conta minhas mudanças.
Uma vez que a página inicial foi atualizada, vejo que tenho a aparência desejada.
Tenha em mente que neste momento acabamos de inserir uma única imagem para a tela do telefone, em vez de três imagens diferentes para a tela do computador. Portanto, haverá apenas um link e uma imagem clicável para a tela móvel, em vez de três no segundo caso.
8) Criar um cubo de várias imagens bem estruturadas
No bloco “Serviços”, a exibição real no móvel é distorcida. De fato, das três imagens que se seguem abaixo da bandeira “REFERENCIAMENTO NATURAL”, apenas duas aparecem.
Para corrigir isso, vou criar um cubo no qual vou colocar as três imagens, bem como uma imagem quadrada de “REFERENCIAMENTO NATURAL”.
8-1) Criar o novo bloco
Para fazer essas mudanças, que só afetarão a exibição móvel, proceder inicialmente da mesma maneira que no passo 4. Em outras palavras:
- Duplicar o antigo bloco;
- Renomear o novo bloco;
- Configure a visualização para ambos os blocos.
No meu caso, tenho “Serviço” como o bloco antigo e “Serviço móvel” como o novo bloco.
8-2) Criar um cubo de 4 imagens
Clique na pequena seta na extrema direita para ver o conteúdo do novo bloco. Para obter o resultado que quero, apago a faixa “REFERENCIAMENTO NATURAL”. Em seguida, mudo a organização das três imagens.
Clico no ícone de edição em forma de lápis e apago uma das imagens para ter as duas que formarão uma linha em meu cubo. Para isso, basta clicar no ícone do lixo na mesma barra que o nome da imagem e salvar.
Finalmente tenho duas imagens que duplico para ter a segunda linha do meu cubo. Para isso, clique sobre o ícone que vem logo após o ícone do lápis e está na segunda posição.
Ajuste-as para que as duas seções estejam corretamente alinhadas uma abaixo da outra. Agora mude as imagens duplicadas, colocando as outras duas imagens no lugar delas, seja de sua “Biblioteca da mídia”, seja carregando-as de seu computador.
Tenho agora minhas quatro imagens com meus serviços:
- REFERÊNCIA NATURAL ;
- WEB WRITING ;
- FORMAÇÃO ;
- SEO AUDITORIA.
8-3) Mudar a distância entre as imagens
Eu guardo as mudanças e atualizo a página inicial para ver como fica. Meu cubo com as quatro imagens parecia bem, mas a distância vertical é bastante grande.
Para reduzi-lo, pressione o ícone de edição na primeira fila de imagens do bloco “Serviço Móvel”. Em seguida, clique na janela “Desenho”, que se encontra no meio de “Geral” e “Animação”.
Em “Margem” digitei um número mais baixo, eu preenchi “-15%” no meu nível. Depois salve e atualize sua página para ver como fica. O meu é perfeito e recomendo que se varie a “Margem” para obter o resultado ideal, se o senhor não o tiver todo de uma só vez.
9) Acrescentar carrosséis de imagem
No bloco “Blog” do meu site, tenho imagens grandes que se sucedem horizontalmente, o que não me parece bom. Para fazer isso, vou criar filas com duas imagens cada uma.
Por isso vou ao bloco “Blog” e o duplico para criar o “Blog Móvel”. Use o mesmo processo descrito no passo 4 para fazer isso.
9-1) Escolher o carrossel e inserir as imagens
Em seguida, abra o conteúdo do bloco “Mobile Blog”, clicando na pequena seta à direita. Em seguida clique em “+ Elemento” e procure a palavra “Carrossel” na barra prevista para esse fim.
O botão “Imagem Carrossel” aparecerá e o senhor poderá clicar sobre ele. Na página que aparece, pressione “Selecionar imagens” em “Carregar imagem em massa”, o que o leva à sua “Biblioteca de Mídia” para selecionar imagens.
No meu caso, primeiro tiro as duas imagens marcadas “ON SITE” e “OFF SITE” para o carrossel “SEO”.
9-2) Montar o carrossel
Depois de selecionar as imagens, desça ao nível :
- De “Picture size” e pressione “Auto” para que o dimensionamento seja automático;
- Hover Type” e selecione “Lift Up”;
- Autoplay” e cheque “Não”;
- A partir de “Colunas Máximas” e escolha o número que deseja. Uso dois para minhas imagens;
- Em “Mostrar Navegação” e selecione “Não”.
Guardo então essas modificações para ver a apresentação na página inicial de meu site.
O resultado é conclusivo e, para continuar, o senhor vai retirar os elementos supérfluos de seu bloco. Para fazer isso, clique nos ícones do lixo na parte superior dos elementos.
9-3) Criar mais carrosséis
Caso o senhor queira acrescentar outros carrosséis de imagem, duplicar o primeiro que acabou de fazer. Isso lhe permite manter as diferentes configurações que o senhor já fez.
Depois disso, vá e escolha as imagens que deseja colocar no lugar daquelas que já estão lá.
Isso é feito clicando no ícone de edição que está presente em cada imagem antiga. Isso permite ao senhor selecionar as novas imagens uma a uma.
Em meu nível, levo as duas imagens marcadas “ROBOT” e “USER EXPERIENCE” para o carrossel “Criação do site”.
Faço o mesmo para outro carrossel de imagem, desta vez importando “WORDPRESS” e “WEBSITE”.
Aproveito também para fixar a “Margem” do parâmetro “Desenho” em “-19%”, para que a distância entre as imagens seja pequena.
9-4) Ajustar os espaços
Eu guardo as mudanças e atualizo a página inicial. Parece bom, exceto pelo espaço entre os blocos “Blog Móvel” e “Contato”.
Para reduzi-lo, clique no ícone de edição na mesma linha do nome do bloco e clique na janela “Desenho”.
Diminua ou aumente o “Padding”, dependendo se o senhor deseja diminuir ou aumentar a distância.
Não hesite em ir e voltar várias vezes para encontrar o resultado perfeito.
10) Verifique suas mudanças uma última vez
O senhor acaba de concluir a otimização de seu site para telefones celulares. Mas, para ter certeza de que tudo está funcionando bem, faça uma verificação final. Isso envolve a verificação da exposição final em cada meio.
O senhor saberá se o senhor tocou a tela sem saber. De lá o senhor saberá exatamente o que fazer para resolver o problema.
E é isso! O senhor acaba de adaptar seu website ao telefone.
Conclusão
Hoje, mais da metade dos usuários da Internet usa celulares para se conectar à Internet. Como esse número está crescendo, é importante criar um website que se adapte automaticamente a todos os tipos de mídia. Isso vai aumentar consideravelmente a experiência do usuário. Um fator que também é muito importante para o Google, que não hesita em classificar os sites sensíveis nas primeiras posições. Sugiro ao senhor que siga as diferentes etapas apresentadas neste artigo para oferecer a melhor experiência a seus usuários.
Até breve!
