Y es que hoy en día se espera que toda web pueda verse correctamente desde cualquier dispositivo. Como seguramente ya has escuchado, son cada vez más las personas que se conectan a Internet desde su móvil. De hecho, una encuesta realizada por Zenith el año pasado, pronosticó que en 2017 el 75% del uso de Internet sería móvil.

Es por esto que existen varias opciones para los negocios que deseen que su web se visualice correctamente desde dispositivos móviles. Aunque hoy nos centraremos en el diseño responsive (también llamado responsivo o adaptativo), quiero mencionarte otras opciones también para que te hagas una idea general de las alternativas que tienes.

Tus alternativas de diseño web para móvil

 

1. Una web móvil

Consiste en crear una web específicamente para dispositivos móviles (además de la versión para computador). Es una opción que requiere tiempo y puede ser costosa, ya que además implica que se realice más de un diseño.

Esta alternativa puede ser interesante para quienes ya tienen un sitio web tradicional que les funciona bien y no quieren desarrollar uno nuevo, o para quienes desean mostrar contenidos diferentes según el tipo de pantalla.

Puedes identificarlas porque comienzan con una “m”, así: m. dominio.com o movil.dominio.com.

2. Una app

Las apps son prácticas, intuitivas y brindan una excelente experiencia de usuario, por lo que representan una excelente opción para muchos. Sin embargo también pueden llegar a ser costosas, ya que cómo mínimo, debes desarrollar versiones para Android y iOS.

Además, desarrollando una aplicación entras a competir con la gran cantidad de apps que se lanzan cada día, y que luchan por un espacio en la limitada memoria de los móviles. En mi opinión, esta alternativa funciona solo para las marcas que realmente ofrecen valor a través de sus apps, como aquellas que permiten hacer compras online.

3. Una web responsive

Ahora sí, ¿qué es diseño responsivo? Es crear un solo sitio web que se adapte a dispositivos diferentes, manteniendo su estructura y orden. Así, cada elemento de la web se adapta a las proporciones de cualquier pantalla, permitiendo una correcta visualización y navegación.

Por ejemplo, si ingresas a una página web desde tu computador y observas que esta tiene un diseño con 4 columnas, cuando ingreses desde tu tablet verás que estas columnas se transformarán en 2 y, si lo haces desde tu móvil, se convertirán en una sola.

De hecho, ni siquiera tienes que entrar desde varios dispositivos para notar estas diferencias. Basta con visitar el sitio desde tu computador y reducir con el cursor el tamaño de la ventana del navegador para que veas cómo automáticamente se reorganizan los elementos. También puedes verificarlo escribiendo tu URL aquí.

Esta opción de diseño tiene múltiples ventajas y además reduce costos y tiempo de desarrollo, ya que se realiza un solo diseño.

Ventajas del diseño web responsivo

• Mejora la experiencia de usuario, ya que los visitantes pueden acceder a los mismos contenidos fácilmente desde cualquier dispositivo. Brindarles un sitio web bien diseñado que puedan recorrer sin problema es clave para que quieran volver una y otra vez.

• A Google le gusta el diseño responsivo. Tener una web responsive es importante para el SEO, ya que al favorecer la experiencia de usuario y tener más tráfico, las páginas con diseño responsive tienen mayores  probabilidades de éxito en el posicionamiento en buscadores.

• Aumenta la viralidad de los contenidos, permitiendo que los usuarios compartan el contenido de manera natural y sin problemas como la duplicación de información.

• Es más práctico, debido a que no hay necesidad de subir diferentes tipos de contenidos ni mantener diferentes webs.

• Te preparas para lo que venga. Constantemente aparecen nuevos dispositivos de tamaños distintos, y tú querrás que tu web se visualice correctamente desde cualquiera de ellos, ¿verdad?. El diseño responsivo se adelanta a esta necesidad, ya que no se limita por el tipo de dispositivo.

Dos ejemplos (muy distintos) de diseño web responsivo

 

1. Spotify

• Visualización desde PC: un excelente ejemplo de diseño responsivo, ya que se emplea pocos elementos para que estos se adapten fácilmente a cualquier pantalla.

• Visualización desde móvil:

Aunque en general se conservan los mismos elementos, el menú principal se convierte en un menú desplegable.

2. CNN en español

• Visualización desde PC:

Aquí vemos una gran columna con las noticias destacadas y una pequeña a la derecha con información de interés, además de un menú con varias opciones visibles.

• Visualización desde móvil:

Se crea una sola columna con la información más relevante. También se genera un menú desplegable.

Para terminar: lo que debes tener en cuenta al elegir un diseño responsivo

Como ves, tener un sitio web con diseño responsivo es una necesidad para todos aquellos que busquen posicionarse bien en los buscadores y brindar una excelente experiencia a sus usuarios. Antes de ponerlo en práctica, ten en cuenta:

• Evita efectos y elementos que puedan hacer lenta la carga de tu página. Usa librerías que no cargen recursos innecesarios.

• Ten en cuenta los hábitos de navegación de tus usuarios. Recuerda que necesitan soluciones rápidas y concretas, más si se conectan desde su móvil.

• Evita la sobrecarga de información, usa textos cortos y botones para que tu usuario sepa exactamente qué debe hacer en un momento determinado.

• Los tamaños de las fuentes, las imágenes. los menús y los elementos gráficos deben estar pensados para adaptarse a cualquier tamaño. De hecho algunos recomiendan hacer un desarrollo mobile first.

Espero que hayas encontrado interesante esta información y que te ayude a tomar la mejor decisión de diseño para tu sitio web. ¡Hasta pronto!