Como adaptar as páginas do meu site ao telefone ?

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.

Comment adapter mes pages de site web au téléphone ?

Recebam páginas “Responsive”!

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

Site Web Twaino Agence SEO

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.

Site Web Twaino Version ordinateur

Ela é feita no WordPress CMS e o tema que eu uso é “Avada”.

Version ordinateur méthode optimisée

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.

Version ordinateur optimisée

1) Verifique a exibição de seu website no celular

Site Twaino Slider revolution telephone

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
Version téléphone non optimisée
  • 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;
Version téléphone non optimisée
  • As flechas da “Metodologia da Campanha SEO” não se encaixam horizontalmente, mas se seguem umas às outras verticalmente;
Version téléphone non optimisée
  • 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.
Version téléphone non optimisée
Version téléphone non optimisée

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 “.

Modifier les pages

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.

Modifier la page accueil

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

Les blocs de la page accueil

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.

Bloc Agence

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.

Création bloc agence pour mobile

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.

Modification blog agence

Em seguida, nomeie este novo bloco para que o senhor possa encontrá-lo facilmente. Para mim, uso a “Agência Móvel”.

Changement de nom agence mobile

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.

Option du bloc

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:

Container visibility selection

  • Tela pequena: Para telas pequenas, inclusive telefones;
  • Tela média: Para telas médias, inclusive tabletes;
  • Tela grande: para telas grandes, inclusive computadores.
Container visibility

Como quero que esse bloco seja visível apenas nos computadores, desmarcarei “tela pequena” e manterei apenas “tela média” e “tela grande”.

Désélectionner small screen

Depois, guarde essa modificação para continuar.

Container visibility Medium Large

4-3) Criar o bloco somente para os celulares

Changement agence mobile

Este é o mesmo processo do passo anterior, exceto que aqui o senhor vai desmarcar :

Small screen uniquement

  • 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.

Sélectionner uniquement small screen

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.

Editer la partie texte

Na página que aparece, o senhor tem um campo contendo seu texto e várias opções para formatá-lo.

Appuyer pour éditer le texte

Em seguida, clique na guia “Texto”, no canto superior direito do campo de texto.

Changer le titre de la page pour téléphone

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.

Taille du texte avant changement

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”.

Taille du texte après changement

Isso indica que o tamanho do título é de 50 pixels, que eu mudo para 40 pixels.

Nouveau visuel téléphone après changement

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.

Emplacement de limage

É 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.

Modification place image

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.

Changement image emplacement

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.

Relocalisation images

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.

Changement méthode

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.

Création page pour téléphone

Image méthode bloc après changement

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.

Sauvegarde du bloc

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.

Image bloc avant changement

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.

Edit image méthode

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.

Choix flèches méthodes

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.

Sauvegarde des méthodes

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.

Résultat méthode

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.

Nos services avant changement téléphone

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.
Dupliquer le bloc service

No meu caso, tenho “Serviço” como o bloco antigo e “Serviço móvel” como o novo bloco.

Visibilité pour téléphone

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.

Bloc pour le service mobile

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.

Changement des images

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.

Allocation des images

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.

Se rendre sur onglet design

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”.

Changement de margin

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.

Résultat des services mobile

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.

Avant changement téléphone partie blog

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.

Ajout du carousel pour images

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.

Choix des images

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;
Taille des images automatiques
  • Hover Type” e selecione “Lift Up”;
Sélectionner lift up
  • Autoplay” e cheque “Não”;
Nombre de colonne 2
  • 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”.
Sélectionner le bon paramètrage

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.

Après changement téléphone partie blog

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.

Images avant changement

Depois disso, vá e escolha as imagens que deseja colocar no lugar daquelas que já estão lá.

Paramètrage images

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.

Présentation blog avec images

Em meu nível, levo as duas imagens marcadas “ROBOT” e “USER EXPERIENCE” para o carrossel “Criação do site”.

Sélection correct image

Faço o mesmo para outro carrossel de imagem, desta vez importando “WORDPRESS” e “WEBSITE”.

Choix image pour partie BLOG

Aproveito também para fixar a “Margem” do parâmetro “Desenho” em “-19%”, para que a distância entre as imagens seja pequena.

Sélection du padding

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”.

Choix images

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.

Téléphone après changement partie blog

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!

Deixe um comentário