13

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

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 nuestro blog 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 leer otros blogs o 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 rimo 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.

Estó 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 post 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 y 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 ésto hay que tenerlo en cuenta y 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 muchos de ellos 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 yo mismo he tenido 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 famosa actualización 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 comprobar como nuestro tráfico orgánico, que tanto nos ha costado conseguir, cae 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.

Prueba de optimización para móviles

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 ésto, lejos de ralentizarse, seguirá creciendo durante los próximos años.

Si no os fiáis 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 organizas por tamaño de la pantalla, tipo de dispositivo y marca.

Ver pagina web en otro dispositivo o pantalla con Screenfly

Como véis, en este caso hemos seleccionado ver cómo queda el diseño de mi blog en un Ipad pero la lista de posibilidades es enorme, desde pequeñas pantallas de móviles hasta enormes dispositivos como las 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 6 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?

Espero vuestros comentarios :)

David Soto

Periodista apasionado del marketing digital, las redes sociales y el blogging. Muy ilusionado con este proyecto que es mi blog personal :)

13 Comments

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

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

    • 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 :)

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

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

  3. 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!

    • 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

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

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

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

    • 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 :)

Deja un comentario