Guía Responsive: adapta 100% tu web a dispositivos móviles (2024)

Hoy te traigo una guía donde te voy a explicar los aspectos mas importantes para tener una web responsive. Voy a repasar las cosas mas relevantes que debes tener en cuenta para que tu web esté perfectamente adaptada a dispositivos móviles, básico para ofrecer una correcta experiencia de usuario. Además te traigo una lista de consejos que no debes pasar por alto si quieres dejar resuelto hasta el último detalle en tu web.

Beneficios de tener una web Responsive.Estadísticas y datos.

1.Aumento del uso móvil

• El aumento del tiempo del uso diario de dispositivos móviles es creciente año tras año.
• 7 de cada 10 personasse conecta todos los días a través de su teléfono móvil durante mas detreinta minutos.
• El 90% de los usuarios se conecta todos o casi todos los días a internet desde el móvil.
• El 70% de las personas mira su teléfono móvil durante la primera media hora trasdespertarse.
• El uso del SMS ha descendido, pero el uso de apps de mensajería instantánea continua en aumento.
• En 2020 los teléfonos móviles serán responsables del 80% de las operacionesbancarias.
• El número de personas que compran en internet a través de un dispositivo móvilaumenta año tras año.

[Tweet «7 de cada 10 personas se conecta todos los días a través de su móvil durante mas de 30minutos»]

2. Usabilidad y experiencia de usuario

La navegación desde dispositivos móviles es cada vez mayor, por eso es importante tener una web optimizada, que se adapte y sea usable en todos los dispositivos. Así estarás mejorando la experiencia de los usuarios en tu sitio web. En éste post puedes ver qué es la usabilidad y cómo mejorarla.

3. Beneficioso para el SEO

Tener una web responsive te permitirá abarcar un rango mayor de dispositivos desde los cuales van a poder encontrarte cuando busquen en Google, por lo que podrás captar mas tráfico hacia tu web.

1. Aumentarás tu tasade conversión:Los usuarios nos sentimos más segurosa comprar un producto desde una web amigable para móviles.
2. Mas fácil de optimizar:La url es la misma para la versión móvil que para la versión escritorio, por lo que solo deberás optimizar el contenido para SEO una única vez. Ahorrarás en tiempo y dinero.

[Tweet «Guía Responsive. Adapta 100% tu web a dispositivos móviles»]

Riesgos de no tener una página web responsive

Si ignoras la importancia de tener una web adaptada a dispositivos móvilespuedes perder oportunidades y correr los siguientes riesgos:

1. Pérdida de comunidad: Los nuevos usuarios responden ante su primera impresión de un sitio web. Si tienen problemas para ver tu sitio, posiblemente no volverán y perderás lectores potenciales.
2. Pérdida de tráfico hacia tu Blog: El consumo de los contenidos desde teléfonos móviles podría suponer entre un 20% y un 40% de tu tráfico.
3. Menos suscriptores a tu lista de Email: Si tu Blog y tu formulario de suscripción no están correctamente optimizados para ser usables en móviles sólo conseguirás frustrar a tus usuarios, que finalmente no se suscribirán.

Si no tienes una web responsive puedes perder comunidad y tráfico web, además de conseguir menos suscripciones.

Cómo saber cuantas visitas recibes desde dispositivos móviles con Google Analytics

Para saber el porcentaje de visitas que recibes desde móviles y tablets debes hacer clic en “Añadir segmento”, en la parte superior de tu panel en Google Analytics, y seleccionar “móviles y tablets”.

De esta forma tendrás una visión de la cantidad de tu audiencia que visita tu sitio web desde móviles.Los resultados se te mostrarán de la siguiente manera:

Como puedes ver, yo el pasado mes tuve un 24.71% de tráfico desde estos dispositivos.

Google Analytics también te permite saber el número devisitas estas recibiendo desde dispositivos móviles. Accediendo a tu cuenta de Google Analytics, desde Audiencia > Móvil, tendrás una visión general de las sesiones en tu web desde los diferentes dispositivos.

Lo interesante es que podrás ver la marca de aquellos dispositivos desde los que recibes visitas, pudiendo así optimizar el tamaño de algunos elementos de tu web, en función de la resolución de la pantalla.

Compruebaque tu web está correctamente preparada para dispositivos móviles

En una web responsive lo óptimo es que puedas leer todos los contenidos sin tener que hacer zoom con los dedos.Con Screenfly puedes ver tu web en diferentes dispositivos de diferentes marcas, con varios tamaños de pantalla diferentes.

A la izquierda te muestro un ejemplo de una web no adaptada a dispositivos móviles, y a la derecha una que si está adaptada:

No optimizada para móviles

Sí optimizada para móviles

¿Cómo crear un Blog responsive adaptado a dispositivos móviles?

Tienes diferentes formas de tener una web responsive.

1.Crear una versión móvil independiente de tu Blog: Crear una versión totalmente independiente de tu web puede tener ventajas cómo la mejora de los tiempos de carga. Al ser un diseño diferente, las imágenes y demás elementos pueden ser optimizados mucho mas. Esto mejorará la velocidad de tu sitio ya que no se usan los mismos de la versión de escritorio, cuyo peso será mayor.

Si utilizas WordPress, la forma mas económica y fácil de hacer tu versión móvil responsive es con algún plugin que lo haga de forma automática, como por ejemplo, WPtouch Pro.

2.Utilizar una plantilla responsive para toda tu web:las plantillas para CMS como WordPress o Joomla, por lo general, son todas responsive.

Lo interesante de estas plantillas es que detectan el tamaño de cada pantalla y adaptan el contenido para que se vea y adapte correctamente.Hay varios sitios para descargar plantillas responsivecómo Themeforest o Studiopress.

En el curso de WordPress presencialy online que impartimos en Aula CM utilizamos plantillas premium responsive que están totalmente adaptadas a todos los dispositivos móviles.

Consejos para crear y adaptar tuweb a dispositivos móviles

1) Reemplaza los links de texto por botones visibles y fácilmente clicables

Todos los botones de tu web deberían verse en un tamaño óptimo para ser visibles y que se pueda hacer clic fácilmente. Es importante reducir al mínimo los enlaces en el texto y convertirlos en botones. De esa forma la experiencia de usuario será optima y ganaras clics en enlaces que quizáno eran visibles a primera vista.

• ¿Cómo de grandes deben ser los botones táctiles para ser usables en móviles?

Apple recomienda un mínimo de 44px de ancho y 44px de alto en su Guía

Microsoft recomienda 34px de ancho y 26px de alto.

Nokia sugiere botones que no sean menores de 0.7 cm de ancho y de alto, o 48px de anchura y altura.

• ¿Cómo crear menús y botones amigables para móviles?

En el caso de los menús, puede ser que tu plantilla no se adapte correctamente y no los muestre bien. En tal caso puedes utilizar un plugin llamado “Responsive Menu”, que coloca un menú del tipo Hamburguesa desplegable y totalmente responsive.

En cuanto a los botones, si utilizas WordPress o algún CMS similar seguramente tu plantilla incorpore algún sistema de Shortcodes para incluir botones de diversos tamaños.También puedes usar varios plugins que hacen exactamente lo mismo.

2) Utiliza formularios mobile friendly

Los campos a rellenar en un formulario visto desde el móvil deben ser lo suficientemente grandes como para escribir sin tener que hacer zoom.Una forma simple y correcta de capturar emails en móviles es utilizando plugins como Sumo Me u Optinmonster.

Formulario de Sumo Me

Formulario de Optinmonster

Estos plugins hacen que tus formularios se vean correctamente en todos los dispositivos, pudiendo aprovechar al máximo el potencial de tus Lead Magnets.

[Tweet «Usa formularios de suscripción optimizados para móviles para aprovechar tus Lead Magnets»]

3) Utilizapasarelas de pago adaptadas a dispositivos móviles

Si tienes una tienda online, puedes utilizar plugins de terceros para el checkout como Clickbank, para productos digitales, o Gumroad, que crea una pasarela de pago muy simple y usable en móviles.

Si utilizas plantillas premium para CMS’s como WordPress o Prestashop es probable que las pasarelas de pago estén bastante bien optimizadas.

4) Crea contenido fácilmente escaneableen pequeños dispositivos

Consumimos muchos contenidos desde el móvil, dónde solemos buscar algo específico o llegamos a través de las redes sociales, atraídos
por un título llamativo.

Contenido en texto: Debes hacer que sea escaneable visualmente atractivo. Así podrás dirigir la vista de tus lectores a los puntos de interés y hacerles la lectura mas llevadera. Para ello puedes:

• Crear titulares atractivos y con buen tamaño de fuente.
• Separa el contenido con subtítulos.
• Colocar imágenes entre párrafos.

Contenido multimedia: Tanto tus videos e imágenes insertados en tu web deben reescalarse bien.

• Videos responsive en WordPress: Puedes introducir el código que aparece desde la opción de “Insertar”, o poner directamente la Url.
• Plugins para hacer los videos responsive: Si no te funciona el método anterior, puedes usar el plugin “Advanced responsive video embedder”.
• Para insertar otros contenidos como Tweets o publicaciones de Instagram, en WordPress también funciona simplemente colocar la Url de la publicación.

5) Aprovecha los controles Responsive en Visual Composer

El conocido plugin para WordPress, Visual Composer, tiene una opción para ajustar y adaptar tus columnas en móviles y otros dispositivos.

Esta opción se encuentra dentro de la pestaña Responsive options, dentro de los ajustes de cada columna.

Esta opción te permite controlar la responsividad de las columnas para diversos dispositivos y variar el ancho de las columnas por defecto.

También podrás ocultar cada columna en los diferentes dispositivos con el fin de no mostrar algún bloque específico que no te interese.

6) Usa plantillas de Email Marketing Responsive.

No solo hay que centrarse en el Blog o la web, sino que se puede ir mas allá.Todo lo que hemos visto está en relación con los blog o páginas web. Pero los emails que enviamos desde nuestras plataformas para hacer Email Marketing deben verse correctamente.

Esto es muy importante porque mas del 60% de los emails los abrimos por primera vez desde el teléfono móvil.

Hoy en día tener emails atractivos en móviles es sencillo con Mailchimp o Aweber. Estas plataformas utilizan plantillas que son totalmente responsive y se adaptan perfectamente a todos los dispositivos.

En el caso de que tu plantilla de email no esté optimizada para móviles puedes solucionarlo eligiendo una plantilla simple de una sola columna para evitar que los usuarios tengan que hacer zoom.

➨Cómo conseguir que los usuarios abran tus mails

Mas importante incluso que mostrar unos emails responsive es conseguir que los abran.

Para lograr que hagan el mayor número de clics en tus emails es muy importante, en primer lugar, el nombre del remitente. Recuerda que puedes editar el nombre que se muestra en tus emails cuando estás configurando tu campaña de email marketing.

En móviles, resalta mucho mas el nombre del remitente de Email que el propio asunto. Debes tener en cuenta esto y escribir nombres cortos con el fin de que no se corten, o salgan los puntos suspensivos.

El asunto de los emails deberá tener entre 5 y siete palabras. De esa forma te asegurarás de que no queden partes ocultas que impidan que se lea entero. Es mucho mejor que lean un asunto corto a que se queden a medias de saber lo que querías decir.

7) Haz uso de las Media Queries para ajustar al máximo tu diseño web responsive

Las Media Queries te van a permitir hacer tu página web totalmente responsive.Podrás aplicar estilos CSS a determinados elementos de tu web, para que se muestren únicamente cuando la plantilla sea de una resolución determinada.

Lo que puedes hacer con Media Queries es aplicar esos estilos CSS, pero con la condición de que solo tengan efecto cuando la pantalla del navegador sea inferior, o superior a la anchura que especifiques.

[Tweet «Con las Media Queries podrás personalizar los estilos responsive de tu página web al máximo»]

Para nuestro caso lo que nos interesa son las reglas “min-width” y “max-width”, o lo que es lo mismo, “ancho mínimo” y “ancho máximo”, porque para hacer el contenido responsive, nos interesará aplicar esos estilos cuando la ventana del navegador sea inferior o superior a una anchura especificada.

Este es un ejemplo de cómo se podría ajustar el tamaño de tus h2 y h3 únicamente para dispositivos pequeños.

@media screen and (max-width: 480px) {h2 {font-size: 25px;}h3 {font-size: 22px; } }

En la versión móvil puede ser interesante ocultar algunas franjas que si se muestren en pantallas mayores. Aquellos elementos más visuales o animados que no sean tan importantes se pueden ocultar con CSS.

Para ello se debe nombrar a ese elemento con una clase y aplicarle la regla «display: none», por medio de una media query:

@media (max-width: 480px) {.loquesea { display: none; }}

Para ocultar algún elemento únicamente en móviles, por ejemplo, el autor de las publicaciones del blog, lo primero es identificar la “clase” (class) de dicho elemento. Con el inspector de Chrome esto es muy fácil de hacer.

En este ejemplo, si quisiera no mostrar el autor de las entradas en móviles, el código a usar sería el siguiente.

@madia screen and (max-width: 480px) {.post-author { display: none; }}

➨ Operadores Lógicos: Puedes redactar Queries utilizando palabras como “and”, “not” y «only”.

Utilizando el operador and en tus Queries puedes combinar varias reglas, como el tamaño y la orientación de la pantalla:

@media screen (min-width: 700px) and (orientation: landscape) {Tu CSS}

En este caso la Media Query solo se aplicaría en los casos en los que la pantalla esté en horizontal.

Aquí te muestro un ejemplo de Media Queries que utilicé para adaptar correctamente el formulario de suscripción de mi web.

@media only screen and (max-width: 480px) {#mailchimp input.email { width: 100%; }}@media only screen and (max-width: 480px) {#mailchimp input[type="submit"] { width: 100%; }}

Como ves, lo que he hecho es poner la condición de que cuando la pantalla sea inferior a 480px, el campo de email, y el botón de suscripción, ocupen el 100% de la anchura de la pantalla. Aquí puedes ver cómo estaba antes y después del ajuste.

Para este caso, he usado el id “mailchimp” para aplicar esta regla.

Dependiendo de cómo configures tus Media Queries podrás establecer reglas responsive para diferentes tamaños de pantalla. Los tamaños mas utilizados son los siguientes:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

Estos son tamaños recomendados a nivel general, aunque si quieres pulir al detalle, lo correcto sería ajustar tu plantilla para la anchura de cada uno de los dispositivos.

➨Tipos de “Medios” que podemos usar en nuestras Media Queries:Tenemos la posibilidad de ajustar al detalle la responsividad de nuestra web y adaptarla, por ejemplo, a una televisión. Pata ello usaríamos el medio TV, pudiendo quedar el código de la siguiente manera:

@media tv and (min-width: 800px) and (orientation: landscape) { Tu CSS }

Estos son otros de los medios disponibles para utilizar:

• All
• screen (el utilizado para pantallas de ordenador y teléfonos móviles)
• braille
• embossed
• handheld
• print
• projection
• speech
• tty
• tv

➨Expresiones:Además de los tipos de medios, tenemos las expresiones que pueden usarse:

• width
• height
• device-width
• device-height
• orientation (landscape o portrait)
• aspect-ratio (16/9 por ejemplo)
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

Si quieres saber mas sobre cómo editar tu web en WordPress, te recomiendo leer éste artículo sobre códigos HTML y CSS de Ernesto G Bustamante.

8) Usa las dimensiones relativas en CSS

Las dimensiones de los elementos de tu web, en CSS se pueden definir con valores absolutos, por ejemplo en px, o en valores relativos, como el porcentaje, que se calculan en función de otro valor previamente definido.

Es interesante utilizar un valor en porcentajes cuando establecemos márgenes o paddings en nuestra web. ¿Porque? Porque evidentemente no es lo mismo un padding-left de 150 px en una pantalla grande que en una pantalla de teléfono móvil. Usando los porcentajes los elementos se adaptarán en función de valores como el ancho de cada dispositivo.

Además del porcentaje hay otras unidades de medida relativas muy utilizadas, como el em y el rem.

• em: Es una unidad relativa para definir el tamaño de fuente. Utilizando em, el tamaño de fuente se irá aumentando gradualmente en función del tamaño inicial definido.
• rem: Es una unidad similar a em, pero toma como referencia el tamaño establecido en el cuerpo del documento. Así no se duplica el reescalado de los documentos afectando al tamaño, sino que conserva el tamaño de la fuente en todo momento.

Podríamos usar la medida em de la siguiente manera:

En primer lugar hay que definir un valor para el tamaño de la fuente. En el siguiente código hemos definido dicho tamaño, y el tamaño para diferentes dispositivos usandoMedia Queries.

body { font-size: 18px;}@media (max-width: 1280px) { body { font-size: 16px; }}@media (max-width: 800px) { body { font-size: 13px; }}

Después solo queda definir el tamaño para cada uno de los diferentes elementos (títulos, párrafo, listas…). En el siguiente código estamos indicando que los h2 tengan un tamaño de 2.3 veces el tamaño normal, los párrafos un tamaño de 1.3 veces superior al normal, y las listas un tamaño de 1.2 veces superior al normal.

h2 { font-size: 2.3em; }p { font-size: 1.3em; }li { font-size: 1.2em; }

9) Reduce los efectos y animaciones como Carousels

Debes comprobar que todos los efectos visuales de tu web se visualizan correctamente en varios dispositivos. Efectos como animaciones o efectos hover pueden mostrarse bien en pantallas grandes pero fallar o no mostrarse del todo bien en otros dispositivos.

10) Cuidado con los Sliders y Carousels

Los sliders son elementos muy visuales y atractivos en pantallas grandes. Aún así ten en cuenta que estas imágenes serán reescaladas y adaptadas en móviles. Algunas pueden quedar ocultas, por lo que dejarían de ser útiles. Puede ser que convenga adaptarlos u ocultarlos.

Lo mismo ocurre con los Carousels. Ya de por si son elementos algo confusos para el usuario, que en ocasiones no detecta que debe hacer clic para visualizar mas contenido.En móviles quizá tenga mucho menos sentido usarlos, por lo que quizá sea conveniente que no se muestren.

11) Usa un tamaño detexto que sea legible

En móviles, te aconsejo que como mínimo tus textos sean de 15 px para que todos los usuarios puedan leer tus contenidos sin tener que hacer zoom.

Para editar el tamaño puedes hacer uso de las Media Queries como te contaba en el consejo número 7, introduciendo el siguiente código CSS:

@media screen and (max-width: 480px) {p {font-size: 12px;}}

12) Revisa y prueba constantemente

Es muy importante que revises tu web en varios dispositivos para que todo funcione correctamente. Si pasas por alto algún pequeño fallo en dispositivos móviles puedes estar perdiendo tráfico de valor.

Cada vez que incluyas un nuevo elemento debes probarlo y así te aseguras de que no salgande tu web por estar experimentando una mala experiencia de usuario.

Conclusiones finales para tener una web responsive

Tener una web responsive a día de hoy es básico. No sólo debes comprobarque se adapta correctamente en móviles y tablets, además, tener una web responsive supone que todos los elementos principales sean usables.

Todos aquelloselementos principales de tu web deben ser la mayor prioridad en una web responsive. Esos elementos quesupongan generar mayores conversiones deben estar adaptados al máximo. Y quizá la programación de tu web o plantilla deba ser modificada u adaptada a tal efecto para optimizar la conversión en estos dispositivos.

Te recomiendo centrarte en elementos como los campos de tus formularios de contacto y de suscripción, el tamaño de fuentede tus títulos o cuerpo de texto en los dispositivos más pequeños, o elementos animados como carousels o sliders. Puede ser conveniente adaptar estos elementos con Media Queries, o no mostrarlos en pequeños dispositivos.

Si quieres dar el paso y crear tu página web responsive puedes informarte sobre nuestro curso de WordPress presencial. Además también impartimos un curso de WordPress Online para crear páginas web si no estás en Madrid.

¿Conoces algún otro punto interesante para adaptar tu web a dispositivos móviles, o alguna técnica responsive interesante? Si es así, anímate a dejar un comentario con tus opiniones.