Responsive Design: Cómo adaptar tu web a los dispositivos móviles

Analizando los datos de los últimos años podemos comprobar el crecimiento continuo del uso de Internet a través del móvil. Solo en el periodo que va desde el principio de 2012 a mediados de 2013 el acceso a internet vía dispositivos móviles ha pasado de un 11,1% a un 17,5%, con previsión de que este valor siga aumentando. Sin ninguna duda este dato se incrementará considerablemente en los próximos años, por lo que tener una web optimizada para dispositivos móviles es algo fundamental.

En el siguiente gráfico podemos ver datos concretos del crecimiento de la navegación en internet desde dispositivos móviles:

grafica-responsive-design

Frente a esta situación podemos optar por diferentes soluciones: Un diseño responsive, una web específicamente creada para la navegación móvil o el uso de herramientas que se encargan de transformar nuestra web en una adaptada a un móvil.

¿Qué es el diseño responsive o diseño web adaptable?

Básicamente es aplicar un diseño a la pagina web que le permite adaptarse a todo tipo de resoluciones, ya sea la de un móvil, una tableta, pantallas Widescreen o sea cual sea la resolución requerida. De esta manera se puede contar con una sola web para todo tipo de conexiones, evitando costes, redireccionamientos o duplicidad de contenido en webs alternativas que pueden afectar a nuestro posicionamiento en buscadores (SEO). Los conceptos fundamentales que debemos tener en cuenta en el diseño web adaptable son:

  • CSS Media Queries: Nos ofrece la posibilidad de optimizar la pagina web activando o desactivando partes del CSS del diseño.
  • Porcentajes mejor que pixeles: Recurrir a porcentajes en lugar de pixeles nos permite contar con un diseño mas flexible
  • Selección de imágenes: A la hora de incluir imágenes, es mejor evitar aquellas que cuenten con un tamaño fijo ya que no se ajustarán correctamente.

¿Cómo adapto mi web a dispositivos móviles?

A la hora de adaptar una pagina web a la navegación a través de dispositivos móviles tenemos varias opciones que van a depender de nuestra capacidad de desarrollarlo o del presupuesto disponible:

  • Si no tienes limitaciones de presupuesto, la mejor opción es recurrir a empresas especializadas en este tipo de desarrollo, consiguiendo resultados profesionales.
  • Si por el contrario prefieres reducir el coste al máximo y cuentas con conocimientos para editar el CSS puedes hacerlo por ti mismo, eso si, es un trabajo duro ya que hay que adaptar todos los componentes de la web.
  • En caso de contar con una desarrollada en WordPress puedes optar por diferentes plugins que se encarguen de adaptar la web. Wptouch o WordPress Mobile Pack son algunos ejemplos.
  • Recurrir a herramientas online que realizan este tipo de servicio. Algunas de estas herramientas son:

mofuse

MoFuse: Rápido y sencillo, a través de la web de Mofuse, solo debemos introducir la Url y en unos pocos pasos más conseguimos adaptar la web.

 

 

 

 

gomobi

 

 

GoMobi: El funcionamiento es el mismo que MoFuse, solamente con introducir la web y pocos pasos dispondremos de la web adaptada.

 

 

mobiten

 

Mobi Ten: En este caso no resulta tan directa la adaptación. Requiere de un proceso mas largo y complejo.

 

Algunos ejemplos de paginas web que recurren al diseño responsive o adaptado:

A continuación se puede apreciar como la web se ajusta automáticamente en función de el tamaño del dispositivo a través del cual se navega:

  • dConstruc 2011:

dConstruct2011

 

  • Boston Globe:

 

bostonglobe

 

  • Food Sense:

food-sense

 

  • Dereck Keskin:

 

Dereck-kestin

 

Muchos mas ejemplos en http://designmodo.com/responsive-design-examples/

 

Cuando NO debo recurrir al diseño responsive o adaptado

Hay situaciones en las que el responsive design no es suficiente para adaptar la navegación por la web para dispositivos móviles. Esto puede deberse a que parte del contenido no sea adaptable a resoluciones pequeñas, lo que conlleva frustración en los usuarios y perjuicios para la empresa.

Un ejemplo es la web de Disney, en la cual recurren al diseño adaptado sin tener en cuenta que parte de su contenido más importante, los de juegos, no se ejecutan en pequeñas pantallas. Ésto supone el descontento de aproximadamente 30.000 usuarios al mes, algo que se podría evitar desarrollando una web alternativa para los juegos diseñada específicamente para navegación en pantallas pequeñas.

Esto es lo que se les ofrece a los usuarios que llegan desde dispositivos móviles:

disney-responsive

Y esto el mensaje que encuentran al intentar acceder a alguno de los juegos:

disney-responsive-2

 

Los factores que pueden hacernos rechazar la opción del diseño adaptado son:

  • Características: No todos los diseños web son aptos para cualquier tipo de resolución, por lo tanto puede darse el caso en el que algunos componentes del diseño fallen al reflejarse en baja resolución.
  • Contenido Relevante: En el caso de que se pretenda que los usuarios de dispositivos móviles lleguen a un contenido especifico o realicen alguna actividad especifica es recomendable realizar una web alternativa diseñada específicamente para estos dispositivos. (Como en el caso de Disney)
  • Ecommerce: En el caso de contar con un ecommerce como pagina web, es preferible recurrir a un diseño especifico de móvil

Cuando SÍ debería recurrir al diseño responsive o adaptado

Si no te encuentras en ninguna de las situaciones planteadas en el punto anterior lo mas razonable es acudir al diseño adaptado por las siguientes razones:

• Costes: El coste de aplicarle un diseño adaptado a una web es inferior a recurrir al desarrollo de otras web alternativas especificas para móviles

• Tiempo: Además de un mayor coste, también te llevará mas tiempo crear una web especifica para móviles

• Consistencia: Lo lógico es que todos los usuarios de la web la vean en las mismas condiciones de calidad. Sin embargo esto puede no ser así en el caso de contar con webs especificas para móviles en lugar de diseño adaptado. Por ejemplo, si alguien llega a una web a través de su móvil y decide compartir el enlace en alguna red social como Twitter, el enlace que comparta será el de la web móvil, por lo que si alguien observa ese enlace y entra desde su ordenador de pantalla grande será enviado a la web móvil, en tamaño de pantalla móvil, que puede ser 10 veces o más pequeña que la pantalla del ordenador.

• Conversión: En definitiva todo se puede resumir en una pregunta: ¿Necesitas una web móvil alternativa para convertir? La gran mayoría de las respuestas son NO. Simplemente lo necesario es ofrecer a los usuarios una navegación cómoda a través de la web.

Entonces… ¿es bueno el diseño responsive o adaptado para el SEO?

Si lo resumimos en una sola palabra, SÍ

Si lo detallamos un poco más, es fácil: Si cuentas con una web que se adapta a todos los formatos conseguirás que cualquier usuario pueda acceder cómodamente a tu contenido desde cualquier dispositivo. Usuarios contentos implica más visitas, y más contenido compartido, por lo tanto mejor SEO. Pero antes de preocuparse por el SEO hay que pensar en si el diseño es bueno para  los usuarios. Solo en caso de un contenido muy especifico y una cartera llena debes recurrir a crear una web especifica para dispositivos móviles

También puedes descargar la guía totalmente GRATIS en formato PDF rellenando el siguiente formulario 

Descarga la Guia completa en formato PDF rellenando el siguiente formulario

El objetivo de esta Guía definitiva del Mobile Marketing es ayudarte a entender cómo puedes sacar provecho de estas herramientas y cómo te ayudan a mejorar tu proceso de marketing y ventas:

  1. Responsive Design: Cómo adaptar tu web a los dispositivos móviles
  2. Cómo utilizar las aplicaciones para móviles como herramienta de Marketing
  3. Códigos QR: Cómo utilizarlos en tu Mobile Marketing
  4. El Mobile Marketing y Las Redes Sociales
  5. La Realidad Aumentada: Qué es y cómo utilizarla como herramienta de Marketing
  6. SMS Marketing: Un canal que sigue funcionando y generando resultados
  7. Mobile Commerce: Tu tienda adaptada a los dispositivos móviles
  8. Mobile Advertising: Cómo crear campañas de PPC para dispositivos móviles
  9. Mobile Marketing Analytics: Cómo medir los resultados del Mobile Marketing

Asesoria Fiscal Madrid

Opt In Image
¿Eres una Agencia de Marketing?
Te ayudamos a que tu Agencia de Marketing crezca y sea capaz de gestionar más clientes sin que necesites incrementar tu equipo

, , , , , , , ,

Trackbacks/Pingbacks

  1. Introducción: Cómo Entender el Mobile Marketing - Blog Netizen Online - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  2. Mobile Advertising: Cómo crear campaña de PPC para dispositivos móviles - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  3. Codigos QR: Cómo utilizarlos en tu Mobile Marketing - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  4. Cómo utilizar las aplicaciones para moviles como herramienta de marketing - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  5. El Mobile Marketing y Las Redes Sociales - Blog Netizen Online - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  6. La Realidad Aumentada: Qué es y cómo utilizarla como herramienta de Marketing - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  7. Mobile Marketing Analytics: Cómo medir los resultados del Mobile Marketing - Blog Netizen Online - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  8. Mobile Commerce: Tu tienda adaptada a los dispositivos móviles - October 17, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

  9. SMS Marketing: Un canal que sigue funcionando y generando resultados - November 6, 2013

    […] Responsive Design: Cómo adaptar tu web a los dispositivos móviles […]

Leave a Reply