Mucho se habla ahora del diseño web responsive, ¿pero sabes en qué consiste? ¿Por qué es tan importante actualmente? ¿Y cómo conseguirlo?

No es ningún secreto que actualmente las personas acceden desde todo tipo de dispositivos a Internet, por lo que adaptar el sitio a los diferentes tamaños de pantalla ahora es más importante que nunca.

Eso es lo que, precisamente, persigue el responsive design, ¿qué cosa? Que cada página se muestre correctamente en cualquier equipo, sea:

• Un ordenador.
• Un teléfono inteligente.
• Un ordenador portátil.
• O una tableta.

En esta guía, te contamos qué es exactamente un diseño responsivo, qué tener en cuenta para hacer un sitio adaptativo, e incluso algunos ejemplos.

¡Sigue bajando!

¿Qué es el diseño web responsive?

Básicamente, el diseño web responsive o adaptativo es una técnica que intenta que un mismo sitio se visualice correctamente en distintos dispositivos.

Se trata de un procedimiento que intenta colocar o redimensionar los elementos de la web, de forma que cada página se adapte perfectamente al ancho de la pantalla del dispositivo para ofrecer la mejor experiencia de usuario.

No tiene ninguna relación con las Web Mobile, aunque se suelen confundir con los sitios tipo responsivos, no son lo mismo:

• Una Web Responsive, adapta automáticamente su contenido para permitir su correcta visualización en ordenadores, tabletas o móviles.
• Una Web Móvil, implica desarrollar un sitio con un contenido especialmente adaptado para funcionar en dispositivos móviles. 

No obstante, el diseño responsive surge, precisamente, para responder a la necesidad actual de ofrecer experiencias positivas, principalmente, en dispositivos móviles. ¿La razón? La explican los últimos informes:

• Un análisis reciente muestra que el 93,1% de los españoles usa sólo un smartphone para navegar por Internet.
• Otro informe refleja que 9 de cada 10 clientes se pierden por un sitio que proporciona una mala experiencia en dispositivos móviles.
• Otro análisis expone cómo más de la mitad del tráfico web proviene de teléfonos inteligentes o tabletas.

Pero la idea final es lograr que una misma página proporcione una User Experience óptima en dispositivos de todo tipo.

¿Por qué tener un diseño responsive es importante?

En la actualidad, los usuarios acceden a Internet desde ordenadores, tabletas, smart TV, relojes inteligentes, pero sobre todo desde teléfonos.

Esto refleja claramente la necesidad de que un sitio actual sea compatible con distintos tamaños de pantalla, a fin de ofrecer la misma experiencia tanto en escritorio como en Mobile con la misma página. ¿Por qué?

Porque si un usuario tiene una experiencia satisfactoria en un sitio de Internet, la probabilidad de que consuma un producto aumenta en un 67%, según Google Think Insights.

¿Te queda clara la importancia de un diseño responsive en una web? ¿No? Estos son algunos de sus otros beneficios:

Mejora el SEO

Desde abril de 2015, Google penaliza a aquellos sitios que no ofrecen un diseño responsive o uno desarrollado especialmente para móviles, según informó en su blog.

Eso quiere decir que los sitios que no optimicen su diseño para smartphones o tablets tendrán una seria reducción de las posiciones que ocupan sus páginas en las SERPs o páginas de resultados.

De hecho, el buscador de Alphabet Inc. actualmente se basa en la versión móvil para rastrear e indexar un sitio tras implementar el Mobile First Indexing, algo lógico sabiendo que el 63% de usuarios acceden a Google desde dispositivos móviles.

Google deja claro con esto que los sitios que no estén debidamente optimizados para móviles nunca llegarán a posicionarse mejor que las páginas responsivas.

Reduce costos

No es lo mismo diseñar un sitio compatible con todos los dispositivos o resoluciones de pantalla que crear una web independiente para cada tipo de dispositivo, hablando específicamente en términos de tiempo-dinero. ¿Por qué?

Si bien, el código de un diseño responsivo es más complejo, igualmente permite ahorrar costes en desarrollo, e incluso tiempo a la hora de actualizar su apariencia o contenidos.

Por el contrario, montar un sitio que sirva una versión diferente según el dispositivo requeriría de mucho más trabajo a la larga, piénsalo:

• En primer lugar, se disparan los costes al crear 2 sitios (móvil + escritorio).
• En segundo lugar, aumenta la carga de trabajo a la hora de mantener ambas webs.

Potencia el branding

¿Eres de los que cree en el dicho de que la primera impresión cuenta? Bueno, en Internet esto también aplica si tienes una página. Según un estudio, el 57% de los consumidores decide no recomendar un negocio con un sitio mal diseñado para dispositivos móviles.

De hecho, si un usuario que accede a un sitio no ofrece una experiencia móvil satisfactoria se llevará la impresión de que el negocio está desfasado o que, peor aún, piense negativamente sobre la empresa.

En cambio, un diseño responsive con buena usabilidad para teléfonos o tabletas causará una buena impresión, lo que alentará a los usuarios a regresar para consumir más productos o a recomendar el negocio.

Garantiza la mejor User Experience (UX)

El diseño responsive permite crear un único sitio que garantice una experiencia amigable a los usuarios sin importar el tamaño de la pantalla.

De esta forma, se logra que los usuarios disfruten de los mismos contenidos así como una experiencia similar independientemente del dispositivo, logrando así múltiples beneficios como por ejemplo:

• Evitar el contenido duplicado.
• Mejorar la navegación de los usuarios.
• Contenidos e imágenes adaptadas a cada pantalla.
• Reducir el tiempo de desarrollo o mantenimiento del sitio.

Elementos a tener en cuenta para diseñar un sitio web 

En el mercado actual, existen una inmensa cantidad de dispositivos con diferentes tamaños de pantalla, por lo que es necesario adaptar distintos elementos del sitio para que su contenido se muestre perfectamente en todos los tamaños.

Estos son los elementos a optimizar para lograr un diseño web responsive o adaptativo que se visualice en cualquier dispositivo:

Tipografía

No es lo mismo leer un sitio desde un teléfono de 4,6 pulgadas que desde un monitor de 27 pulgadas. El tamaño de la pantalla no es la misma, por lo que el tamaño de la fuente tiene que ser la adecuada tanto en Desktop como en Mobile.

Si el tráfico que llega no puede leer el contenido del sitio, no comprarán ni realizarán la acción deseada, por lo que ten en mente estos consejos:

• El tamaño de fuente de 16 píxeles es la norma en la versión móvil.
• El texto tiene que ser leído fácilmente sin necesidad de hacer zoom.
• El color de la fuente tiene que contrastar con el color de fondo del sitio.
• La fuente no tiene que ser demasiado fina, o no se leerá en pantallas más pequeñas.

Elementos multimedia

Las imágenes, iconos, ilustraciones u otros elementos multimedia de la página tienen que tener un tamaño proporcional al tamaño de la pantalla en la que se muestran.

Por ejemplo, en lugar de cargar la misma resolución de imagen en cada dispositivo, algo que haría más lenta la carga del sitio en algunos equipos, sería mejor designar la resolución a mostrar en función del tamaño de la pantalla.

De hecho, todos los medios multimedia del sitio tienen que adaptarse incluso cuando el usuario cambia la rotación del teléfono o tableta.

Carga de página

Un sitio responsive no tiene que cargar los mismos recursos de la versión para escritorio en la versión móvil del mismo. ¿Por qué?

Si se cargan, exactamente, los mismos elementos en todos los dispositivos, el tiempo de carga aumenta, por lo que hacer una carga de página condicional que permita cargar sólo los recursos necesarios para el móvil es más que necesario.

Lo ideal es que un sitio cargue en 5 segundos o menos, porque esto, según algunos estudios, garantiza que el 70% de las sesiones sean más largas.

Usabilidad

Un sitio para móvil no presenta el mismo ancho que el de escritorio, por lo que botones, menús u otros elementos tienen que ser implementados de una forma inteligente en ambos casos.

Por ejemplo, si un sitio ofrece múltiples Llamadas a la Acción (CTA) o distintos botones en el header top, quizás en escritorio se aprecie bien, pero en móvil no: una opción sería mover todo, o una parte, al menú.

De hecho, si una página tiene un CTA tipo “Chatea ahora” en Desktop, se podría cambiar en Mobile por “Contacta por Whats” o “Llama ahora” para exprimir las funciones de un teléfono inteligente. ¿Por qué?

Lo importante es adaptar cada elemento para cada dispositivo para ofrecer una experiencia de usuario óptima independientemente del mismo.

Efectos

Existen algunos efectos que funcionan perfectamente en la versión de escritorio de un sitio web responsive pero no en el móvil.

Entre ellos está el Hover, por ejemplo: no funciona en dispositivos móviles, razón por la que si pones un “Leer más” de un artículo en él, los usuarios de smartphones o tablets no podrán acceder a él.

En este sentido, probar el sitio desde diferentes dispositivos es esencial a la hora de detectar errores o posibles mejoras.

Ejemplos de web con diseño responsive

Hasta aquí sabes (casi) todo acerca de los sitios responsivos, ¿pero cómo lucen las páginas que han sido desarrolladas con esta técnica? Para que te hagas una idea, he aquí algunos ejemplos de webs con diseño responsive con sus versiones para:

• Escritorio.
• Móvil.

1. Slack

El sitio del popular software como servicio (SaaS), que ofrece una plataforma de comunicación para trabajo en equipo, presenta una UI limpia que incluso ilustra perfectamente su utilidad en escritorio.

En cambio, desde teléfonos inteligentes el sitio cambia su principal CTA en función del sistema del dispositivo así como la imagen de la interfaz de Slack.

2. Starbucks

Sin duda alguna, el sitio de Starbucks está diseñado para garantizar la mejor User Experience en cualquier pantalla: organiza de forma óptima su contenido para facilitar la navegación, e incluso hace buen uso del menú de hamburguesa para ocultar:

• Sus principales páginas.
• El localizador de tiendas.
• Los botones de registro e inicio de sesión.

De hecho, los botones tienen el tamaño perfecto para que el usuario de móvil pueda apreciarlos o pulsar sobre ellos.

3. Evernote

La página oficial de la útil aplicación para organizar notas hace un magnífico uso de las Call to Action según el dispositivo.

En Desktop, el principal CTA es un lindo botón que guía al usuario a un registro completamente gratuito en la aplicación, mientras que en Mobile cambia por un botón para descargar la app desde la tiendas oficiales para facilitar su instalación en dispositivos móviles.