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

El diseño responsive habla de crear sitios web mucho más amigables en términos de experiencia de usuario, tarea que no es tan sencilla como se lee pero implica una relación limpia con diseño, disposición de elementos, estructura adaptable a dispositivos móviles, televisores, computadores, tablets. Respondiendo a las dinámicas de conexión de hoy, un trabajo juicioso cuidando de éstos detalles puede resultar en mejores conversiones.

¿Cuál es el diseño responsive?

Se trata de redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada dispositivo permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se usa código media-queries de CSS3.

Hay que hacer la salvedad, pues Responsive Web Design es algo más que tamaños de pantalla, hay que adaptarse en muchos otros sentidos a las características de la navegación en escritorio y dispositivos. La compatibilidad de dispositivos móviles, la velocidad de carga de la página y el diseño rico en UI / UX son los tres factores más importantes para decidir el destino y la tasa de éxito de un sitio web. En resumen es “capacidad de respuesta móvil” la que define tu posición frente a competidores.

Reconocer webs no adaptables:

El primer efecto que se nota en caso de no disponer de un diseño web responsive, fallas en la visualización que dan cuenta de una mala estructura, o que el dispositivo no soporte ciertos gráficos. Esto debido a las pantallas, los procesadores que llevan, los sistemas operativos, la resolución o que la memoria es diferente en cada dispositivo.

Sitios web adaptables

Es tener en cuenta que con la llegada de nuevos dispositivos los ya conocidos laptops, tablets y celulares, se hace cada vez mas urgente adaptar los contenidos de nuestro sitio web a los mismos (aunque esto no es del todo cierto y lo veremos más adelante). Un sitio web receptivo ofrecerá una excelente experiencia de usuario en una pantalla de teléfono inteligente de 4 pulgadas y la misma experiencia de alta calidad en un cine de 40 pulgadas

Los principales navegadores tienen su propia versión para dispositivos móviles y de escritorio que representan los sitios web de manera diferente. También hay varias actualizaciones para los navegadores a lo largo del año que debe tener en cuenta el diseñador.

No es la verdad absoluta pero éstos son algunos de los tamaños a tener en cuenta:

• Tamaño del teléfono con menos de 600 píxeles
• Teléfono grande, tamaño de tabletas con 600-900 píxeles
• Tamaño de computadora personal con más de 900 píxeles
• Posicionamiento en motores de búsqueda

Veamos a continuación algunas recomendaciones antes de iniciar la ruta hacia un diseño web responsive:

• Énfasis en la navegación: Los usuarios necesitan encontrar más rápidamente sus enlaces y página del sitio web mientras el contenido se ajusta a las pantallas pequeñas
• Apunte a CTA o llamados a la acción clásicos: no pongan en juego sus objetivos de negocio, lleve al usuario por la ruta de conversión. No pruebe diseños de botones, éstos son conocidos por su aspecto reactangular y medianamente redondeados, no lo complique.
• Cuide del contenido: planifique el que va a ir en su sitio y cuáles elementos dinámicos van a acompañarlo (videos, gifs, imágenes animaciones etc). Determinar la cantidad de los mismos le ahorrará dolores de cabeza.
• La imagen cuenta y mucho: literalmente Google nos castiga por no optimizar el contenido gráfico, por eso recomendamos optimizar las fotos y elegir un tamaño ideal. De esta forma no se compromete la carga del sitio y por el contrario, se favorece la experiencia de usuario y el posicionamiento.
• Ojo con la fuentes o tipografías: sin detenernos en tendencias 2020, la razón la tiene el usuario o más bien el clic por eso al construir diseño responsive deberá dedicarle más tiempo a elegir un alto de línea y un espaciado efectivo para la lectura. “Haga que amen su contenido, sea amable”

No podemos cerrar esta entrada de blog sin destacar las recomendaciones que hace actualidadecommerce.com a la hora de guiarnos en la construcción de un diseño web responsive de lujo:

1. Crea una versión móvil. Imprescindible y luego hablaremos de ello. Esta es la forma más «aparatosa», pero vas a conseguir los mismos beneficios (con algo más de trabajo). Al tener un peso de escritorio menor, y la opción de mejores imágenes, podrás mejorar la velocidad de tu sitio. Si por ejemplo usas WordPress, puedes usar algún Plugin, que es lo más económico y rápido. Por ejemplo el WPtouch Pro.
2. Utiliza una plantilla prediseñada responsive. En el caso de WordPress y otros sistemas de gestión de contenidos (CMS) como Joomla, tienen por lo general casi todas sus plantillas con diseño responsive.
3. Descarga plantillas responsive. Lo mejor de estos casos, es que llegan a detectar el tamaño de la pantalla de cada dispositivo y adaptan el contenido a él. Eso sí, hay que tener en cuenta que cada tipo de producto o servicio que ofrezcas será más interesante una que otra. No es lo mismo una plantilla para un blog que otra para una tienda de artículos de cocina.

Respecto a servicios y entendimiento de WordPress, Srweb es experto. El trabajo que aquí se hace es impecable y el equipo que lo consigue está de lujo también. Pero continuemos con este artículo, que ya vamos para el final.

¿Cómo validar si mi diseño responsive está funcionando?

Esto es de tiempo, por lo que sugerimos dejar que su sitio se estabilice y asegúrese de tener todos los puntos de conversión medidos.

La mejor muestra de éxito sin duda son las conversiones ya sea que busque registros, compras, suscripciones. Otros datos relevantes serán: el tiempo de permanencia en la web y hasta el porcentaje de rebote.

Otras decisión clave es la consulta permanente del comportamiento de sus usuarios con  herramientas clásicas como Google Analytics. Ésta muestra datos relevantes de la navegación a través de dispositivos. Estos informes y monitoreo puede darle luces sobre muchos detalles como: Sistemas operativos, tipos de celulares (marcas), resolución de pantallas etc.

Hacemos nuevamente la salvedad, no diseñe para ajustar su web a los dispositivos más recientes, investigue cuáles utilizan sus usuarios y construya sobre esto.