¿Qué es el diseño web adaptable para móviles?

Hoy en día, hay 2 billones de habitantes del planeta tienen acceso a smartphones. En Latinoamérica la mitad de la población tiene acceso a uno de estos "celulares inteligentes" y la gente pasa en promedio 3 horas al día consultando algún tipo de información por este medio. Google reporta que más de la mitad de las búsquedas se realizan hoy en día desde dispositivos móviles

Esto significa que ya no es aceptable que los sitios de internet no estén adaptados para poder verse correctamente desde un celular. Todas las páginas tienen que ser responsive, lo que significa que puedas leer y hacer click fácilmente desde tu pantalla táctil.

 Ejemplo de un sitio con diseño adaptable. El contenido se reacomoda y cambia de tamaño para que se pueda leer y interactuar con el fàcilmente.

Ejemplo de un sitio con diseño adaptable. El contenido se reacomoda y cambia de tamaño para que se pueda leer y interactuar con el fàcilmente.

El pasado 21 de abril, Google lanzo una modificación a su algoritmo de búsqueda que muchos llamaron "Mobilegeddon" porque afecta a millones de sitios. Los sitios que no se muestren adecuadamente en dispositivos móviles bajarán de ranking en las búsquedas. Google tiene razón; cuántas veces no hemos buscado algo en nuestro celular y encontrado una página donde tenemos que hacer zoom para poder verla y hacer click en los botones. Esto es super molesto para los usuarios y hace que se vayan del sitio rápidamente. Sin embargo es increíble que grandes empresas como Banorte, Soriana o Ryanair todavía no tengan sitios adaptados a celulares.

Ahora que ya entendimos de que se trata el diseño adaptable y por qué es tan importante, les diré como checar que su sitio sea apto para móviles y qué opciones tenemos en caso de que no pase la prueba.

PRUEBA SI TU SITIO ES APTO PARA MÓVILES

Google ha desarrollado una herramienta que te ayuda a ver si su sitio se puede ver correctamente desde la pantalla de un celular. Puedes acceder a esta herramienta aquí.  Una vez que escribas el URL de tu sitio, Google hará un análisis y te dirá si pasas la prueba o si hay algún problema con la página.

 Google muestra los problemas que tiene las páginas cuando se muestran en dispositivos móviles

Si el sitio no pasa la prueba de mobile-friendliness, Google te dará una lista de los problemas que encontró. Aunque esta lista puede parecer muy larga, si aplicas una de las soluciones siguiente para adaptar tu diseño, lo más probable es que soluciones todas de un solo golpe.

Soluciones para sitios móviles

Hasta ahora hemos estado hablando del diseño adaptable, o responsive design. Esta no es la única solución. También puedes tener un sitio exclusivo para móviles o una app, sin embargo el diseño adaptable es el mas recomendado.

 Un buen diseño web cambia el tamaño y disposición del contenido dependiendo del dispositivo que se este usando.

Un buen diseño web cambia el tamaño y disposición del contenido dependiendo del dispositivo que se este usando.

Responsive Design

El responsive design es una serie de instrucciones que se escriben en el código de tu sitio para indicarle como debe de mostrar el contenido dependiendo del tamaño del dispositivo. El contenido es el mismo, no se crean dos copias diferentes. Lo que cambia es, por ejemplo, el tamaño de la letra, el tamaño de los botones, la disposición de la barra de navegación, etc. El diseño adaptable normalmente se programa para 4 dispositivos: computadoras, laptops, tabletas y celulares, ya que todos estas tienen tamaños diferentes y así se puede definir la mejor experiencia para cada uno.

El responsive design en general la solución mas recomendada por que mantiene todo el contenido en un sólo lugar, Esto hace más fácil de mantener el sitio a largo plazo, y además todos tus esfuerzos de marketing y SEO beneficiaran a tu sitio en general y no tendrás que duplicarlos.

Sitio exclusivo para celulares

Algunas empresas prefieren hacer un sitio exclusivo para celulares y normalmente lo hacen en un subdominio como "mobile.example.com". En este caso el sitio reconoce el dispositivo que el usuario tiene y lo redirecciona a un sitio diferente. Unas de las empresas que eligen hacer esto son, por ejemplo, Banamex y la tienda departamental Macy's. Estas empresas te redirigen a una versión diferente de su página y aunque normalmente se trata de incluir el mismo contenido, en realidad se trata una copia. Esta copia es modificada y actualizada por separado, y por lo tanto, es comùn que los usuarios se frustren porque no pueden encontrar la misma información

Tener un sitio exclusivo es recomendado en el caso de que, por alguna razón, quieras cambiar de contenido. Por ejemplo, un usuario visita la página de un restaurant desde su computadora para ver el menu y las fotos, pero desde su móvil para saber, sobre la marcha, la dirección y los horarios de apertura. Hacer énfasis en diferentes partes de tu sitio por medio de responsive design es posible pero mucho más complicado que si simplemente creas un sitio específico para celulares. Sin embargo ahora tendrás que esforzarte en mantener los dos subdominios actualizados y con buenos rankings en buscadores.

Aplicación móvil

La tercera opción es desarrollar una aplicación especial para celulares. Esta es la opción más costosa aunque tiene el beneficio de poder ser construida específicamente para mejorar la experiencia desde un teléfono y además guarda muchos más datos acerca del usuario. Sin embargo, el construir una aplicación móvil es un tema independiente, ya que de todas maneras se necesita un sitio móvil para todos los usuarios que prefieren no bajar un programa adicional.

¿Cómo adapto mi sitio para celulares?

Después de todo lo que acabas de leer puede que sientas un poco agobiado del trabajo que representa tener un sitio con diseño adaptable. Sin embargo, esto puede ser más fácil de lo que te imaginas.

Si tienes tu sito esta construido en un CMS como Wordpress, lo único que tienes que hacer es cambiar el tema a uno que tenga un diseño adaptable.  La mayoría de los temas de buena calidad se adaptan automáticamente, pero si el tuyo no lo hace es hora de cambiar.

Si tu sitio esta programado desde cero con HTML/CSS, tendrás que hablar con tu programador. Si se trata de un especialista en front-end y no esta haciendo todo adaptable desde el principio, es una señal que vive en el pasado y no se ha actualizado.

Hay otros servicios que prometen hacer una versión móvil de tu sitio por tan poco como $13 USD al mes. Algunas opciones populares son Mobify, Mofuse, MobiSiteGalore y Wirenode. Sin embargo estos servicios crearan una version limitada y será una copia que tendrá que ser actualizada por separado como explicamos en la sección anterior.

Cualquiera que sea la opción que elijas, es importante saber que tener una version de tu sitio adaptada para dispositivos móviles ya no es opcional. Probablemente estas perdiendo cientos de visitas y clientes potenciales que se salen de tu sitio por la mala experiencia de navegación. Considera este potencial de estos ingresos adicionales cuando estés calculando el presupuesto para actualizar tu sitio.


ARTICULOS RELACIONADOS

 La importancia del análisis web

La importancia del análisis web