¿Cómo puedo adaptar las páginas de mi sitio web al teléfono?

Según Hootsuite y We Are Socialsegún Hootsuite y We Are Social, el 55% de la población mundial utiliza Internet, es decir, casi 4.200 millones de personas. El medio tecnológico que más tráfico de Internet atrae sigue siendo el móvil, con una cuota del 51,6%, seguido del ordenador, con un 44,1%, frente al 4,3% de otros medios. Esto significa que más de la mitad de los usuarios de Internet acceden a los sitios web a través de su móvil. Por este motivo, su proyecto de creación de un sitio web debe tener en cuenta el hecho de que debe proponer una interfaz que se adapte a las diferentes interfaces. En efecto, se trata de hacerla receptiva para disfrutar del tráfico procedente de usuarios que no utilizan necesariamente un ordenador. Para ello, le guiaré a través del proceso de adaptación de una página de su sitio web al teléfono. Este artículo, que forma parte de una larga serie, se encargará de mostrarle todos los pasos «paso a paso» para que pueda hacerlo usted mismo. No se olvide de ver el vídeo que lo acompaña, que probablemente sea muy útil.

¡Obtenga páginas «Responsive»!

Descubra en este vídeo

cómo adaptar las páginas de su sitio web al teléfono:

¿Qué es un sitio web responsivo?

Con la evolución de la tecnología, cada vez más personas se conectan a Internet. La mayoría de ellos lo hacen a través de su teléfono móvil, por lo que su sitio web debe estar perfectamente adaptado al formato del teléfono para garantizar una experiencia de navegación optimizada para los usuarios.

Por cierto, Mobify descubrió en un estudio que el 30% de los usuarios de Internet abortan una transacción cuando un sitio web no se ajusta a su formato móvil. Además, si un sitio web tarda más de 3 segundos en cargarse, el 57% de los clientes móviles tienden a abandonarlo.

Por ejemplo, es probable que le moleste un sitio web que le obligue a hacer zoom con los dedos, a desplazarse hacia arriba y hacia abajo o a desplazarse hacia la izquierda y la derecha para leer su contenido.

Por lo tanto, un sitio web responsivo debe ser capaz de adaptarse automáticamente a los diferentes dispositivos de los usuarios. Y hay varias razones por las que debería cambiar a un sitio web responsivo.

Por qué debe tener un sitio web responsivo

Hay muchas razones para adoptar un sitio web responsivo, pero le diré las más importantes que pueden tener un gran impacto en su negocio.

Google recomienda los sitios web responsivos

Con más de 90,6 % de la cuota de mercado mundial, Google sigue siendo el motor de búsqueda más utilizado por los internautas. Por lo tanto, es una referencia en cuanto a la experiencia del usuario y el hecho de que favorezca los sitios web responsivos no es una coincidencia.

De hecho, la empresa de Mountain View destaca en sus resultados de búsqueda los sitios web que se adaptan al formato móvil. En este sentido, Google no dudó en poner en marcha el Amigable con el móvil en este sentido, Google no ha dudado en establecer la etiqueta «Mobile Friendly» para que los webmasters y administradores de sitios puedan determinar si las páginas de su sitio web se visualizan correctamente en el móvil.

En esta lógica, para un internauta que va a realizar una búsqueda a través de su móvil, Google se encargará de clasificar las páginas que son «Mobile Friendly» en primer lugar en los resultados, en detrimento de las que no lo son.

Mejorar sus ventas o contactos

Es probable que los visitantes abandonen automáticamente su sitio web si ven que las páginas de éste no se muestran correctamente en su móvil. Y sin embargo, 12,1 millones de euros

los franceses compran a través del móvil de un total de 37,5 millones que han comprado en Internet.

Por ello, esta categoría de usuarios de Internet es de gran interés para usted.

Su sitio es más fácil de gestionar

En el pasado, ocurrió que algunos propietarios crearon dos sitios diferentes, uno para móviles y otro para ordenadores. Esto tenía el inconveniente de multiplicar por dos las tareas relacionadas con la gestión de los sitios, los contenidos, etc

Por ello, le sugiero que opte por un sitio web responsivo que le evitará todos estos problemas al tratarse de un solo sitio.

Cómo adaptar mi página web al teléfono: pasos para que lo haga usted mismo

Site Web Twaino Agence SEO

Para que tenga una comprensión completa de cómo hacer que su sitio web sea amigable con el teléfono, voy a utilizar el sitio web de mi agencia de SEO, Twaino.com.

Site Web Twaino Version ordinateur

Funciona con el CMS WordPress y el tema que utilizo es «Avada».

Version ordinateur methode optimisee

En primer lugar, tenga en cuenta que he iniciado un serie de artículos sobre cómo crear un sitio web que puede leer en función de la fase en la que se encuentre en la creación del suyo.

Version ordinateur optimisee

1) Compruebe la visualización de su sitio web en el móvil

Site Twaino Slider revolution telephone

Puede utilizar simplemente su smartphone para ver el aspecto de su sitio en este medio, pero también puede utilizar el navegador de su ordenador. Para ello, basta con reducir la anchura de la ventana de su navegador en al menos un tercio, manteniendo su altura.

Cuando hago esto para el mío, noto que en la página de inicio, entre otras cosas

  • El título «Twaino: Agencia SEO» es demasiado grande para un teléfono
Version telephone non optimisée
  • La disposición de las imágenes no es buena porque tengo dos imágenes que se suceden y voy a cambiar su posición poniéndolas entre cada texto;
Version telephone non optimisee
  • Las flechas de la «Metodología de la campaña SEO» no encajan horizontalmente, sino que se suceden verticalmente;
Version telephone non optimisee
  • Hay grandes cuadros de imágenes en la sección «Blog», mientras que los carruseles de dos pequeñas podrían hacer más agradable la experiencia del usuario.
Version telephone non optimisee
Version telephone non optimisee

Estos son algunos de los cambios que voy a realizar. ¡Siga adelante!

2) Acceda al panel de control de su sitio web

Para realizar los cambios que necesita, debe acceder a la consola de WordPress.

Para ello, simplemente añada «…./wp-admin» a la URL de su sitio web en su navegador. El mío es » https://twaino.com/wp-admin «.

Modifier les pages

En la página de inicio de sesión, rellene las casillas con sus identificadores y, a continuación, valídelas para acceder al panel de control.

3) Vaya a la página de inicio

Una vez que esté en su tablero, vaya a la página que desea hacer responsiva. En mi caso, se trata de la página de inicio y, una vez en ella, haga clic en la ventana «Editar página» con el icono del lápiz, situada justo a la derecha de «Crear» y justo en la parte superior de la página.

Modifier la page accueil

Una vez en la nueva interfaz, verá todos los bloques que componen su página web, gracias al tema de su sitio web. El mío es «Avada» y utilizaré esta interfaz para realizar las diferentes configuraciones

Les blocs de la page accueil

A este nivel, le sugiero que duplique la ventana de la página de inicio en su navegador y la reduzca. Esto le permitirá apreciar todos los cambios que tendrá que hacer sobre la marcha.

Bloc Agence

4 Creación de bloques para teléfonos móviles o para ordenadores y tabletas

Tendrá que hacerlo varias veces, ya que creará bloques móviles para todos los bloques que quiera modificar. Utilizaré la primera modificación que pienso hacer para ilustrar esto.

Si tiene títulos en su página, es posible que no estén optimizados para su visualización en un teléfono. Este es el caso del título «Twaino: Agencia SEO» que es demasiado grande y que voy a reducir.

4-1) Duplicar el bloque a modificar

Para ello, busque el bloque donde está el texto y haga clic en él. El bloque que quiero modificar es «Agencia» y hago clic en la pequeña flecha de la derecha para ver su contenido.

Création bloc agence pour mobile

A continuación, le sugiero que duplique el bloque pulsando el segundo icono de la izquierda. Esto le permite crear el bloque que se mostrará en los móviles.

Modification blog agence

A continuación, asigne un nombre a este nuevo bloque para que pueda encontrarlo fácilmente. En mi caso, utilizo «Mobile Agency».

Changement de nom agence mobile

4-2) Cree el bloque sólo para ordenadores y tabletas

El primer bloque que ha duplicado, que es «Agencia» en mi caso, es el que se mostrará por defecto en todos los soportes. Por lo tanto, debe desactivar la opción de visualización del teléfono.

Option du bloc

Esta acción le permite reservar sólo el primer bloque para su visualización en ordenadores y tabletas y el segundo bloque, «Agence Mobile» en mi caso, para su visualización en teléfonos.

Para ello, haga clic en el icono de edición que es el primero de la izquierda. A continuación, desplácese hasta «Visibilidad del contenedor», que le ofrece tres opciones:

20 Container visibulity selection

  • Pantalla pequeña: Para pantallas pequeñas, incluidos los teléfonos;
  • Pantalla mediana: Para pantallas medianas, incluidas las tabletas;
  • Pantalla grande: Para pantallas grandes, incluidos los ordenadores.
Container visibulity

Como quiero que este bloque sea visible sólo en los ordenadores, deseleccionaré «pantalla pequeña» y mantendré sólo «pantalla mediana» y «pantalla grande».

22 deselectionner small screen

A continuación, guarde esta modificación para continuar.

21 Container visibility Medium Large

4-3) Cree el bloque sólo para móviles

24 Changement agence mobile

Este es el mismo proceso que el paso anterior, excepto que aquí deseleccionará :

26 Small screen uniquement

  • Pantalla media
  • Pantalla grande

Asegúrese de que su color sea gris, lo que le permitirá utilizar la configuración del segundo bloque, «Agencia móvil» a mi nivel, para su visualización sólo en teléfonos.

25 Selectionner uniquement small screen

Guarde esta modificación para que se tenga en cuenta. En este punto, le aconsejo que reduzca siempre los bloques que no utiliza para no cometer errores. De hecho, si no es así, corre el riesgo de hacer ciertas modificaciones en el bloque equivocado y tendrá que empezar de nuevo, lo que no es deseable.

5) Cambie el tamaño de la letra de su título

Tras estos pasos, ya puede pasar a la fase de edición propiamente dicha. Para cambiar el tamaño del texto, mueva el cursor del ratón sobre la zona en la que se muestra el texto en forma de miniatura. Verá un icono de edición en forma de lápiz, que está en la primera posición de la izquierda, que pulsará.

27 Editer la partie texte

En la página que aparece, tiene un campo que contiene su texto y varias opciones para formatearlo.

28 Appuyer pour editer le texte

A continuación, haga clic en la pestaña «Texto» situada en la esquina superior derecha del campo de texto.

29 Changer le titre de la page pour telephone

Tiene el formato html de su texto y busca la palabra «font-size» seguida de un número. Este es el tamaño del texto que quiere cambiar.

30 Taille du texte avant changement

En mi nivel, tengo «font-size: 50 px» que está en la misma línea que el título al que quiero cambiar el tamaño, «Twaino: Agencia SEO».

31 Taille du texte apres changement

Esto indica que el tamaño del título es de 50 píxeles, que cambio a 40 píxeles.

34 Nouveau visuel telephone apres changement

6) Mueva sus imágenes

Hay dos imágenes que se suceden en el bloque «Agencia móvil», lo que no se ve bien en el teléfono. Para ello, voy a desplazar uno de ellos por debajo del texto que le sigue. Aquí le explicamos cómo hacerlo si quiere hacer lo mismo.

32 Emplacement de limage

Es una operación muy sencilla y una vez en el bloque, haga clic con el botón izquierdo del ratón y mantenga pulsado el marco de la imagen y arrástrelo hasta la zona en la que desee colocarlo.

33 Modification place image

A mi nivel, lo arrastro hacia la derecha y ocupa el lugar del segundo texto, por lo que acabo de colocarlo en la última posición.

Guarde este cambio pulsando el botón azul «Actualizar» en la esquina inferior derecha. Puede comprobar si se han tenido en cuenta los ajustes.

35 Changement image emplacement

Para ello, actualizo la página de inicio de la pestaña reducida de mi navegador y los cambios se han tenido en cuenta con una buena representación que es diferente al pasar de la vista del ordenador a la del teléfono.

36 Relocalisation image

7) Organice la disposición de las formas

En el bloque «Método», tengo flechas que se ajustan bien a la pantalla del ordenador, pero dan un resultado diferente para el teléfono.

37 Changement methode

Para realizar la misma acción que yo, primero duplique y nombre. En mi caso, escribo «Methode Mobile» para poder diferenciarlo del primero.

38 Creation page pour telephone

42 Image methode bloc apres changement

A continuación, como hizo en el paso 4, desactive :

  • La visualización en «Pantalla pequeña» en el primer bloque.
  • La visualización en «Pantalla media» y «Pantalla grande» en el nuevo bloque.

Esto le permite realizar los cambios para el teléfono.

40 Sauvegarde du bloc

7-1) Borrar las flechas antiguas

Haga clic en la pequeña flecha del extremo derecho para ver el contenido del nuevo bloque que desea modificar, «Methode Mobile» en mi caso.

41 Image bloc avant changement

Elimino los demás elementos dejando sólo uno, lo que me permitirá tener todo el contenido en la misma línea. Para ello, basta con hacer clic en el icono de la papelera que los acompaña.

7-2) Insertar una imagen

Arrastre el cursor sobre la imagen y pulse el icono del lápiz de la izquierda para realizar los distintos cambios.

43 Edit image methode

En la interfaz que aparece, seleccione el botón «Editar» que se encuentra en el extremo derecho y justo debajo de la imagen. Esto le llevará a la «Biblioteca de medios» de su sitio web.

44 Choix fleches methodes

Tiene la opción de seleccionar una de las imágenes que ya tiene en su biblioteca o subir una nueva imagen. A mi nivel, ya he creado una pequeña imagen con el programa Adobe Illustrator que puedo utilizar.

45 Sauvegarde des methodes

Para ello, hago clic en «Subir archivos» y luego en «Seleccionar archivos» para subir la imagen desde mi ordenador.

Me ocupo de nombrar la imagen y de pulsar el botón «Insertar en la página». Después de guardar haciendo clic en «Guardar», hago clic en «Actualizar», que tiene en cuenta mis cambios.

Una vez actualizada la página de inicio, puedo ver que tengo el aspecto deseado.

46 Resultat methode

Tenga en cuenta que en este punto, acabamos de insertar una sola imagen para la pantalla del teléfono en lugar de tres imágenes diferentes para la pantalla del ordenador. Por lo tanto, sólo habrá un enlace y una imagen sobre la que se pueda hacer clic para la visualización móvil en lugar de tres en el segundo caso.

8) Cree un cubo de varias imágenes bien estructuradas

En el bloque «Servicios», la visualización real en el móvil está sesgada. En efecto, de las tres imágenes que se suceden bajo el cartel «REFERENCIA NATURAL», sólo aparecen dos.

47 Nos services avant changement telephone

Para corregir esto, crearé un cubo en el que pondré las tres imágenes así como una imagen cuadrada de «REFERENCIA NATURAL».

8-1) Crear el nuevo bloque

Para realizar estos cambios, que sólo afectarán a la pantalla del móvil, proceda inicialmente de la misma manera que en el paso 4. En otras palabras:

  • Duplique el bloque antiguo;
  • Cambie el nombre del nuevo bloque;
  • Configure la pantalla para ambos bloques.
48 Dupliquer le bloc service

En mi caso, tengo «Servicio» como bloque antiguo y «Servicio móvil» como bloque nuevo.

50 Visibilite pour telephone

8-2) Crear un cubo de 4 imágenes

Haga clic en la pequeña flecha del extremo derecho para ver el contenido del nuevo bloque. Para obtener el resultado que quiero, borro el cartel de «REFERENCIA NATURAL». A continuación, cambio la organización de las tres imágenes.

51 Bloc pour le service mobile

Hago clic en el icono de edición en forma de lápiz y borro una de las imágenes para tener las dos que formarán una línea en mi cubo. Para ello, basta con pulsar el icono de la papelera en la misma barra que el nombre de la imagen y guardar.

Finalmente tengo dos imágenes que duplico para tener la segunda línea de mi cubo. Para ello, haga clic en el icono que viene justo después del icono del lápiz y que está en la segunda posición.

52 Changement des images

Ajústelos para que las dos secciones queden correctamente alineadas una debajo de la otra. Ahora cambie las imágenes duplicadas colocando las otras dos imágenes en su lugar, ya sea desde su «Biblioteca Multimedia» o cargándolas desde su ordenador.

53 Allocation des images

Ya tengo mis cuatro imágenes con mis servicios:

  • REFERENCIA NATURAL ;
  • REDACCIÓN WEB ;
  • FORMACIÓN ;
  • AUDITORÍA SEO.

8-3) Cambiar la distancia entre las imágenes

Guardo los cambios y actualizo la página de inicio para ver cómo queda. Mi cubo con las cuatro imágenes apareció bien, pero la distancia vertical es bastante grande.

56 Se rendre sur onglet design

Para reducirlo, pulse el icono de edición en la primera fila de imágenes del bloque «Servicio móvil». A continuación, haga clic en la ventana «Diseño», que se encuentra en medio de «General» y «Animación».

57 Changement de margin

En «Margen» introduzca un número inferior, yo he rellenado «-15%» en mi nivel. A continuación, guarde y actualice su página para ver cómo queda. El mío es perfecto y recomiendo variar el «Margen» para obtener el resultado ideal si no lo tiene todo de una vez.

54 Resultat des services mobile

9) Añada carruseles de imágenes

En el bloque «Blog» de mi sitio web, tengo imágenes grandes que se suceden horizontalmente, lo que no se ve bien. Para ello, voy a crear filas con dos imágenes cada una.

69 Avant changement telephone partie blog

Así que voy al bloque «Blog» y lo duplico para crear el «Blog Móvil». Para ello, utilice el mismo proceso descrito en el paso 4.

9-1) Elija el carrusel e inserte las imágenes

A continuación, abra el contenido del bloque «Blog móvil» haciendo clic en la flechita de la derecha. A continuación, haga clic en «+ Elemento» y busque la palabra «Carrusel» en la barra prevista para ello.

63 Ajout du carousel pour images

Aparecerá el botón «Carrusel de imágenes» y podrá hacer clic en él. En la página que aparece, pulse «Seleccionar imágenes» en «Carga masiva de imágenes», lo que le llevará a su «Biblioteca multimedia» para seleccionar las imágenes.

64 Choix des images

En mi caso, primero tomo las dos imágenes marcadas como «ON SITE» y «OFF SITE» para el carrusel «SEO».

9-2) Prepare el carrusel

Después de seleccionar las imágenes, baje al nivel :

  • Desde «Tamaño de la imagen» y pulse «Auto» para que el tamaño sea automático;
65 Taille des images automatiques
  • Tipo de elevación» y seleccione «Elevación»;
66 Selectionner lift up
  • Reproducción automática» y marque «No»;
67 Nombre de colonne 2
  • En «Columnas máximas» y elija el número que desee. Utilizo dos para mis imágenes;
  • Desde «Mostrar navegación» y seleccione «No».
68 Selectionner le bon parametrage

A continuación, guardo estas modificaciones para ver la representación en la página de inicio de mi sitio web.

El resultado es concluyente y para continuar, eliminará los elementos superfluos de su bloque. Para ello, haga clic en los iconos de las papeleras en la parte superior de los elementos.

70 Apres changement telephone partie blog

9-3) Crear más carruseles

En caso de que quiera añadir otros carruseles de imágenes, duplique el primero que acaba de hacer. Esto le permite mantener las diferentes configuraciones que ya ha realizado.

71 Images avant changement

Después, vaya y elija las imágenes que quiera poner en lugar de las que ya están ahí.

72 Parametrage images

Esto se hace pulsando el icono de edición que está presente en cada imagen antigua. Esto le permite seleccionar las nuevas imágenes una por una.

77 Presentation blog avec images

A mi nivel, tomo las dos imágenes marcadas como «ROBOT» y «EXPERIENCIA DEL USUARIO» para el carrusel de «Creación de sitios web».

76 Selection correct image

Hago lo mismo para otro carrusel de imágenes, esta vez importando «WORDPRESS» y «WEBSITE».

75 Choix image pour partie BLOG

También aprovecho para ajustar el «Margen» del parámetro «Diseño» a «-19%» para que la distancia entre las imágenes sea pequeña.

74 Selection du padding

9-4) Ajuste los espacios

Guardo los cambios y actualizo la página de inicio. Se ve bien, excepto por el espacio entre los bloques «Blog móvil» y «Contacto».

73 Choix images

Para reducirlo, pulse el icono de edición en la misma línea que el nombre del bloque y haga clic en la ventana «Diseño».

Disminuya o aumente el «Acolchado» en función de si desea disminuir o aumentar la distancia.

No dude en ir y venir varias veces para encontrar el resultado perfecto.

78 Telephone apres changement partie blog

10) Compruebe los cambios una última vez

Acaba de terminar de optimizar su sitio web para los teléfonos móviles. Pero para asegurarse de que todo funciona correctamente, haga una última comprobación. Se trata de comprobar la visualización final en cada soporte.

Esto le permitirá saber si ha tocado la pantalla panorámica sin saberlo. A partir de ahí sabrá exactamente qué hacer para solucionar el problema.

¡Y ya está! Acaba de adaptar su página web al teléfono.

Conclusión

En la actualidad, más de la mitad de los usuarios de Internet utilizan el móvil para conectarse a la red. Como este número está creciendo, es importante crear un sitio web responsivo que se adapte automáticamente a todo tipo de medios. Esto aumentará considerablemente la experiencia del usuario. Un factor que también es muy importante para Google, que no duda en situar los sitios web responsivos en las primeras posiciones. Le sugiero que siga los diferentes pasos presentados en este artículo para ofrecer la mejor experiencia a sus usuarios.

¡Hasta pronto!

Deja un comentario