Cada día se hace más relevante el tener tu web optimizada para dispositivos móviles. Uno de los grandes motivos, es el creciente número de personas que navegan desde su smartphone. Esto hace que adaptar la web al móvil, sea uno de los grandes retos del diseño web hoy en día.

No sólo tiene que ser una web bonita, sino que se vea de forma correcta y optimizada tanto en escritorio como en el móvil. Si tu web no está lista, puedes estar perdiendo oportunidades.

A continuación te voy a contar:

  • Por qué deben estar una web adaptada al móvil
  • Qué significa que una web sea Responsive
  • Qué puedes hacer para adaptar tu web a dispositivos móviles

Motivos por los que debes adaptar tu web al móvil

1) – Las visitas desde móviles aumentan cada día

¿Has mirado alguna vez cuánto porcentaje de visitas llegan a tu web desde dispositivos móviles? Puede que te sorprendas.

Navegar desde el teléfono móvil cada día está más extendido. A día de hoy, suele rondar entre un 50 y hasta un 90% de visitas desde móviles. Por eso es importante si ya tienes tu web, que sepas cuál es tu caso. Así podrás adaptarte mejor.

¿Cómo verificar desde qué dispositivos visitan mi web?

Si tienes un sistema de estadísticas, seguro tendrá un apartado en que te indicará este dato. En Google Analytics por ejemplo, en la página principal ya te da una estadística general del porcentaje de usuarios que acceden desde cada tipo de dispositivo.

Adaptar tu web al móvil: Cómo saber cuántas visitas vienen desde móviles
Estadísticas reales de mi blog lasaventurasdetaisa.com

¿Y qué pasa con las tablet?

Las tablet sin embargo, aunque no deben dejarse de lado, no han tenido tanto éxito como se esperaba. Como puedes ver en el ejemplo anterior, menos de un 2% de las visitas provienen desde tablets. Y suele ser similar en casi todos los casos, lo que no quita que revises tus estadísticas. Ya que en tu sector podría haber diferencias.

Aunque igualmente, las pantallas de los smartphone cada vez son más grandes y con mayor resolución. Lo que las hace más similares a la resolución de una tablet, y aumenta la variabilidad entre teléfonos inteligentes también.

2) Indexación Mobile First de Google

El segundo motivo, es porque tener una web bien adaptada al móvil, también afecta en tu posicionamiento SEO.

Google está cambiando sus sistemas de indexación, y el tener tu página web preparada para dispositivos móviles cada día cobra más importancia.

Aquí puedes leer más sobre estos cambios.

Esto implica principalmente, que Google, a la hora de indexar tu web, revisa únicamente la versión para el móvil. Si no está bien optimizada, podría penalizarte.

¿Cómo adaptar tu web al móvil?

El concepto de Web Responsive

En la optimización de la web para móviles, el concepto de Responsive es muy importante. Antes, las webs adaptadas a móviles, se hacían creando otra web diferente adaptada sólo al móvil.

Posteriormente se fue evolucionando, hasta inventar métodos que permitían adaptar la interfaz de las páginas web, y a esto se le llamó «Web Responsive«. De este modo, según el tamaño del dispositivo, se verán de una forma u otra.

Aquí en mi Instagram te contaba más sobre esto, y tienes un ejemplo de cómo se adapta mi web…

View this post on Instagram

¿Qué es eso de adaptar la web al móvil? 🤔📱 Seguro que has oído alguna vez mencionar todo este tema de que las webs deben estar adaptadas a los móviles. O a todos los dispositivos, porque también están las tablets. Al inicio de aparecer móviles en que se podía navegar por internet, y cuando empezaron a popularizarse, lo que se hacía era un "tema" web diferente para el móvil. Esto era, tener una plantilla de presentación totalmente diferente para el escritorio y para los móviles. A veces, incluso una web completamente separada. Luego apareció el "Responsive", que vendría a ser que responde y se adapta. Para ello se crearon técnicas de diseño web que permitieran hacer la adaptación de forma más fácil. Con esta idea, para hacer una web responsive, se añaden unas "normas" al diseño (en el código css), de forma que las proporciones cambien en función del tamaño de la pantalla. Por ejemplo, cambiar el tamaño de la fuente. O hacer los tamaños proporcionales. O que las imágenes en escritorio ocupen la mitad del ancho y en el móvil el ancho completo… Y así alterar todas las propiedades que se quieran. Por qué debe ser responsive tu web: 1 – Cada vez hay más gente que navega desde su móvil. Es interesante que según tu cliente o lector objetivo veas hasta qué punto. Yo en algunos proyectos tengo un 50% y en otros un 80%. 2 – Es más sencillo de mantener una web responsive que tener temas o webs independientes. 3 – Google valora muy positivamente que tu web esté adaptada a dispositivos móviles, y que sea el mismo contenido en pc y en móvil. ¿Está tu web bien adaptada? PD: En otra ocasión te hablaré del famoso "Mobile First". #designer #diseñoweb #emprendedoras #marketing #mujeresemprendedoras #responsive #sitioweb #taisadesigner #userexperience #web #websitedesigner

A post shared by Taisa – Diseño web – Alemania (@taisawebdesigner) on

Ejemplos de adaptación web a dispositivos

  • Es posible cambiar el tamaño de los elementos
  • Cambiar las dimensiones de las imágenes
  • Cambiar el tamaño de fuente del texto
  • Incluso cambiar de orden elementos, o ocultar algunos y mostrar otros.

En general, prácticamente cualquier elemento de diseño (posición, o atributos de un elemento) pueden personalizarse en función del tamaño de la pantalla.

¿Cómo optimizar tu web para móviles?

Siento decirte, que esto puede ser o muy sencillo, o bastante complejo según el caso. Si usas un buen tema, ya estará preparado para ser Responsive. Y no tendrás que hacer prácticamente nada.

Pero a veces quedan «detalles» que se pueden mejorar para que la navegación por la web sea mejor en el móvil.

Hay algunos temas y constructores, que te facilitan la tarea, como son los temas Divi y Extra de Elegantthemes. Y te permiten, sin modificar código, cambiar las propiedades de los elementos para PC, tablet o móvil.

En caso contrario, las modificaciones se hacen directamente en el código css de la página web (aquí te explico lo que es esto y cómo funciona una web).

¿Cómo puedo ver mi web cómo un móvil desde el PC?

Obviamente, estar todo el rato mirando tu web en el teléfono mientras vas corrigiendo es un poco rollo. Por ello, existen métodos para ver una web en el PC como si fuese un móvil.

El más sencillo, es utilizando el navegador Google Chrome: Pulsas botón derecho > Inspeccionar. Y allí encuentras un botón con una imagen de un móvil y una tablet:

Botón para ver tu web como un móvil desde el PC en Chrome

Esta opción te permite convertir la vista a distintos dispositivos.

En el vídeo te muestro lo sencillo que es usarla.

Igualmente, te recomiendo que siempre hagas una revisión al menos de la web desde un teléfono real.

Un ejemplo de blog diseñado para el móvil

Como comentaba antes, ya de antemano se puede preveer en muchos casos según el sector cuánto tráfico vendrá desde el móvil.

En caso de que se estime un alto tráfico desde el móvil, se puede optar por directamente crear un diseño a una sola columna, pensado exclusivamente en dispositivos móviles. Como en este ejemplo siguiente:

¿Quieres una web profesional y adaptada a móviles?

Si crees que tu web necesita renovarse, y que no está adaptada a tus visitantes, puedes ponerte en contacto conmigo. Valoraremos la forma de optimizar tu web para cumplir mejor tus objetivos.

[Guía práctica] 10 pasos para empezar a crear tu web de servicios.compressed plus

¿Preparada para crear o mejorar tu web?

Apúntate a mi lista VIP y recibe de inmediato mi [Guía práctica] 10 pasos para empezar a crear tu web de servicios.

Elige además qué otros contenidos quieres recibir ¡Te prometo que serán interesantes!

¡Gracias por suscribirte! Tus datos se han enviado correctamente. Ahora sólo tienes que confirmar tu suscripción desde el e-mail que habrás recibido. Echa un vistazo en SPAM o promociones por si acaso.