Cómo adaptar contenidos a móviles + 3 herramientas gratis para ver tu web en dispositivos móviles

by David Soto

}

Nov 13, 2017

Los contenidos online hace tiempo que dejaron de consumirse únicamente desde ordenadores. El especular aumento de la presencia de los dispositivos móviles en nuestro día a día, hace de la  adaptación de nuestros diseños web y contenidos, una obligación si no queremos desaprovechar gran parte del tráfico que conseguimos atraer a nuestros blogs o páginas web.

Herramientas online gratis ver tu web en dispositivos moviles telefonos y tablets

No es solo una cuestión estética. La mala imagen que dejamos en un lector interesado por nuestros contenidos que no puede navegar por nuestra web o que no puede, por ejemplo, llevar a cabo una conversión porque no visualiza el CTA u otra parte de la pantalla, bien merece que prestemos una atención especial a estos detalles.

¿Qué caracteriza al consumo de contenidos desde dispositivos móviles?

Seguro que utilizas de la misma forma tu ordenador, tu smartphone o tu tablet a la hora de navegar por internet, ¿verdad?. Cada uno de ellos tiene sus particularidades que debemos conocer si queremos adaptarnos a la forma de consumir la información por parte de los usuarios.

Las diferencias entre todos ellos darían para hacer una lista enorme pero, a grandes rasgos, los usuarios que utilizan sus dispositivos móviles demandan:

Inmediatez

El móvil o la tablet es, aún, un medio que necesita mayor inmediatez en el consumo de información que un ordenador, porque su uso no está restringido a estar sentado en caso o en el trabajo, se utilizan en todo momento.

Esto permite una enorme ventaja a los creadores  de contenido, ya que pueden adaptarse al ritmo de vida de los usuarios e incluso utilizar esa inmediatez para crear contenidos adaptados a cada momento del día.

Simplicidad

El usuario que busca información desde su smartphone reclama contenidos breves, simples y de consumo rápido. Normalmente el tiempo de uso del móvil no es constante, sino que está dividido en pequeños fragmentos de tiempo durante todo el día.

Esto debe ser tenido en cuenta por el creador de contenidos para dispositivos móviles, ya que debe adaptarse a estas particularidades y pensar que el usuario quizá no tenga tiempo para leer grandes contenidos de 5000 palabras de una sola vez.

¿Cómo deben ser los contenidos para dispositivos móviles?

A la hora de preparar contenidos para dispositivos móviles, tenemos que tener en cuenta que sus características técnicas no son las mismas que las de un ordenador. Dispositivos más lentos, pantallas más pequeñas, navegación más complicada…

1. Imágenes

Deben ser mucho más ligeras que las utilizadas para la web destinada al resto de dispositivos. Una elección errónea del tamaño de las imágenes puede multiplicar el tiempo de carga de la web, con la consiguiente desesperación del usuario.

Una imagen grande, no va a reducir drásticamente el tiempo de carga de nuestra web, pero decenas o cientos de imágenes si, y en dispositivos móviles aún más.

El uso de formatos como JPG o PNG que compriman las imágenes, la elección de un tamaño adecuado que no sobrecargue el diseño y el tiempo de carga de la web, serán tus mejores aliados para aportar un plus de efectividad a tus contenidos, aprovechando el contenido visual pero sin ralentizar en exceso el tiempo de carga desde dispositivos móviles.

2. Textos

Como hemos comentado antes, deben ser más breves y sencillos. Las propias características de los dispositivos móviles, hacen complicada la lectura de textos demasiado largos (al menos de una sola vez) y esto hay que tenerlo en cuenta al adaptar nuestra redacción web de contenidos.

En este caso, una buena idea es presentar la estructura del texto de una forma muy visual y tratar de “enganchar” al lector aportando mucha fuerza al comienzo de tus post para que, en caso de que no lea el contenido entero, vuelva a acabar el post en otro momento.

3. Navegación

Tenemos que pensar en facilitar al usuario la navegación por la web, para evitar que la abandone por no comprenderla.

Nos dirigimos a dispositivos con pantallas más pequeñas y táctiles. Lo más importante es no sobrecargar visualmente la web, para que no haya errores al pulsar en un icono u otro, lo que puede provocar la huida del usuario.

Os recomiendo prestar especial atención a los pop ups de suscripción a la newsletter y los botones de compartir en redes sociales (con los que nosotros mismos tuvimos al principio bastantes problemas en la versión móvil de este blog).

¿Qué dice Google sobre la adaptación de la webs para dispositivos móviles?

Desde la actualización de hace años del algoritmo de Google llamada Mobilegeddon, la adaptación de nuestro diseño y nuestros contenidos a dispositivos móviles no es una opción, es una obligación.

Desde el punto de vista del SEO, pensar en estos dispositivos a la hora de diseñar nuestras webs o crear nuestros contenidos es fundamental para no llevarnos una penalización del buscador y evitar que nuestro tráfico orgánico, que tanto nos ha costado conseguir, caiga por no hacer caso a las directrices de Google.

Antes de meternos de lleno en las herramientas gratis que os propongo para ver vuestra web en móviles y todo tipo de pantallas y dispositivos, os recomiendo hacer la prueba de optimización para móviles que ofrece Google de forma gratuita y echar un ojo a la documentación que ofrece sobre este tema.

Ahora que ya estamos un poco más cerca de los usuarios que utilizan dispositivos móviles y sabemos que nuestra web está optimizada para móviles, vamos a ver cómo ven los usuarios nuestro site en sus diferentes dispositivos y pantallas.

¿Por qué es importante ver nuestros contenidos en otro tipo de pantallas?

En la red podéis ver un montón de estudios que coinciden en que el tráfico desde dispositivos portátiles crece a un ritmo brutal (cerca del 50% anual) y que esto, lejos de ralentizarse, seguirá creciendo durante los próximos años.

Si no os fiais de estos estudios podéis recurrir a Google Analytics para adaptar estos datos a vuestro caso personal y veréis que gran parte del tráfico que llega a vuestros sites procede de móviles y tablets, así que no podemos olvidarnos de ellos.

3 Herramientas para ver cómo queda nuestra web en otros dispositivos y pantallas

Vamos a ver distintas herramientas que nos van a permitir previsualizar nuestros páginas web o blog adaptadas a todo tipo de pantallas y dispositivos móviles.

1. ScreenFly

Empezamos por el que más me gusta ,porque me parece el más completo y porque no necesita de un registro previo. Entramos, introducimos la URL de nuestro blog o página web y ya podemos previsualizarla en todo tipo de pantallas y organizar por tamaño de la pantalla, tipo de dispositivo y marca.

Como veis, en este caso hemos seleccionado ver cómo queda el diseño del blog en un Ipad o móvil, pero la lista de posibilidades es enorme, desde pequeñas pantallas de móviles hasta enormes dispositivos o nuevas televisiones de última generación.

2. Responsinator

Vamos con la segunda herramienta. En este caso, en vez de elegir entre una lista de dispositivos, simplemente introducimos la URL de nuestro blog o página web y la herramienta nos presenta cómo se ve en otros dispositivos en una larga lista.

En este caso he elegido una pantalla de Iphone para ver qué tal se veía la Guia de publicidad en Facebook (que de paso os recomiendo), pero podemos escoger, desde una gran pantalla de tablet hasta una mucho más pequeña, como la de un pequeño móvil de 240px x 230px.

ver como queda mi web en otras pantallas y dispositivos con responsianator

3. IpadPeek

Esta herramienta encantará a todos los amantes a Apple porque, aunque solo nos permita ver cómo queda nuestra web en dispositivos de esta marca, la información es muy completa.

Podemos elegir un Ipad, Iphone 5 e Iphone 6, pero además podemos girar estos dispositivos y ver cómo el diseño se adapta ( o debería adaptarse) al cambio.

como se ve nuestra web en dispositivos apple ipad iphoneComo veis, tenemos a nuestra disposición un montón de herramientas totalmente gratuitas para ver cómo se ve nuestra web en móviles, así que ya no hay excusa para no tener en cuenta a los usuarios que acceden a tus contenidos desde este tipo de dispositivos.

Os he recomendado estas 3 pero tenemos muchas más ¿habías probado alguna vez estas herramientas o utilizas otras técnicas para ver tu diseño web en otro tipo de dispositivos? ¿piensas en los dispositivos móviles a la hora de crear contenidos para tu blog?

Socialtur: Sobre Nosotros

En Socialtur: Markeitng y Turismo apoyamos al pequeño directo a través de unos servicios integrales de marketing digital orientado 100% al sector de la hotelería y de comercialización turística con las que lleva tu estrategia comercial al siguiente nivel, multiplicando tu venta directa y la rentabilidad de tu hotel

CATEGORÍAS

SIGUE DESCUBRIENDO NUEVOS POST

POST RELACIONADOS

SOBRE EL AUTOR DE ESTE POST…

AUTOR: DAVID SOTO

Soy el encargado de Marketing Digital y Diseño Web en SocialTur. Junto a Daniel, mi compañero y encargado del área comercial, desarrollamos el servicio integral de marketing turístico que es la seña de identidad de SocialTur

QUEREMOS CONOCER TU OPINIÓN

DEJA TUS COMENTARIOS

14 Comments

  1. Max Camuñas (@maxcf)

    Hola David 🙂

    Muy buen post! Hoy en día hay que estar adaptado sí o sí al móvil por dos motivos:

    1) Para conseguir el contacto directo con nuestros lectores y usuarios (tenemos que meternos en sus bolsillos).

    2) Para no ser penalizados por Google. Desde hace un tiempo ya priman los sitios web responsives. Si no estás adaptado a todos los dispositivos móviles, se supone que te penaliza.

    Para WordPress, yo uso el plugin WP touch mobile. Si quieres echarle un vistazo, en mi blog he hablado sobre él http://www.maxcf.es/google-cambia-algoritmo-webs-responsive/

    ¡Muchas gracias por la mención!

    Un abrazo

    Reply
    • David Soto

      Muchas gracias por el comentario Max!!
      Coincido con todo lo que comentas, tanto en el contacto directo como el cumplimiento de las directrices de Google!
      Voy a echar un vistazo a tu post ahora mismo 🙂
      Un fuerte abrazo!

      Reply
  2. Juanjo Santana

    Totalmente de acuerdo con lo que has expuesto en este artículo David. Probaré algunas de las herramientas que has mencionado, que desconocía.

    Un abrazo! 🙂

    Reply
    • David Soto

      Muchas gracias por el comentario Juanjo!!
      Ya me contarás qué tal te van. Te recomiendo la primera, permite un montón de opciones de visualización en decenas de dispositivos, está genial.
      Un fuerte abrazo amigo 🙂

      Reply
  3. RaMGoN

    Totalmente de acuerdo con lo que argumentas y expones David, es un gran caballo de batalla para todos el conseguir hacer 100% responsive una web.

    Yo por ejemplo recurro directamente a la consola del propio Chrome que permite elegir la visualización por dispositivo.

    Reply
    • David Soto

      Buenos días amigo!!
      Perdón por no responder antes pero llevo dos días sin parar 🙂
      Encantadísimo de leer ésto RamGon, yo también utilizo la función de Search Console pero estas herramientas creo que nos pueden dar una “visión externa” que puede ser útil para comprar los resultados.
      Yo llevo tiempo peleando con el blog para intentar que se vea bien en todo tipo de dispositivos y me he vuelto loco pero parece que ya está, al menos, medio solucionado.
      Un fuerte abrazo y muchas gracias por pasarte a comentar compañero!

      Reply
  4. Johanna

    Hola David, en mi caso nunca había utilizado estas herramientas, pero he tratado de que mi web se adapte lo mejor posible a los dispositivos móviles, claro esta que revisando directamente desde uno, pero con estas herramientas que nos compartes de seguro que el trabajo se me hará mucho mas fácil, pues ahora ya podré revisar mis publicaciones en todos los tipos de tamaños que existen.

    Muchas gracias por compartirlas, un saludo!

    Reply
    • David Soto

      Muchas gracias por el comentario Johana!!
      Encantadísimo de que te haya resultado de utilidad! A mí me han venido genial estas herramientas para adaptar mi web a estos dispositivos tan importantes 🙂
      Un saludo

      Reply
  5. ropa de cama infantil

    Hay muchas webs que ya tienen más tráfico de móviles y táblets que de desktop. Para mi es muy importante hacer una web responsive o con su versión mobile.
    En cuanto a las herramientas para ver como queda la web en otros dispositivos yo utilizo http://mobiletest.me/
    es vital comprobar como queda la página, al menos en los modelos como iphone y samsung.

    Saludos

    Javi

    Reply
    • David Soto

      Muchas gracias por el comentario!!
      Completamente de acuerdo, este blog casi tiene más desde dispositivos móviles que desde ordenadores. No conocía esta herramienta a así que voy a ponerla en marcha ahora mismo 🙂
      Muchas gracias por la aportación!!

      Reply
  6. Nubemedia

    Buen artículo, lo comparto en mis redes. Yo suelo hacerlo desde chrome, haciendo click en “inspeccionar elemento” para ver cómo queda en otros dispositivos

    Reply
    • David Soto

      Muchas gracias por el comentario 🙂
      También, esa opción es muy interesante pero aportaba estas 3 para buscar una visión más “independiente” aunque yo creo que cuantas más herramientas gratis conozcamos, más oportunidades de hacerlo bien tendremos 🙂

      Reply
  7. valentingom

    Muy bueno el artículo, pero no te imaginas lo que molesta para la lectura el menú lateral

    Reply
  8. Juliu | Baterias para moviles

    Buenas!!

    AMP es lo que yo ahora mismo estoy liado con ello, parece bastante sencillo desde Search Console te ayuda e indica todo, pero ya sabes…jejejeje siempre se complica un poco!!

    Un saludo!

    Reply

Trackbacks/Pingbacks

  1. Cómo adaptar contenidos a móviles... - […] ¿Ya tienes tus contenidos adaptados a móviles? Te recomiendo 3 herramientas para comprobar cómo se ve tu blog o…

Submit a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Abrir Whatsapp
Contacta con nosotros :)