Responsive design

El responsive design, también conocido como diseño responsivo, es una técnica de diseño web que tiene como objetivo que los contenidos web se visualicen de la misma forma sin importar el tamaño de pantalla donde se muestren.

Ello se consigue haciendo que el contenido se adapte automáticamente a los distintos tipos de pantalla y plataformas (ordenadores de sobremesa, portátiles, tabletas, teléfonos móviles, televisores, etc.)

Del mismo modo, en email marketing también se habla de responsive design en lo referente a la correcta visualización de las campañas de email marketing en los distintos dispositivos en los que los suscriptores puede abrir los newsletters.

1. Diseño web responsive y diseño web adaptive

En muchas ocasiones el diseño web responsive y diseño web adaptive se confunden, dado que ambos buscan ofrecer una buena visualización de los sitios web en cualquier circunstancia, pero no son lo mismo.

El diseño web responsive es una técnica para desarrollar interfaces que ese cale del uso de media queries y hojas de estilos, para así autoajustar de forma proporcional la forma en la que se visualizan los contenidos de una web a distintas resoluciones.

Trabajo de forma porcentual, en base a porcentajes del espacio de pantalla disponible y como no, a la resolución de salida demandada.

Por su parte el diseño web adaptado es una técnica que se basa en la utilización de tamaños de pantalla preestablecidos: 320px, 480px, 760px, 960px, 1200px, etc.

Crea un diseño para cada uno de los tamaños, de tal manera que al identificar el dispositivo sobre el que ofrecer la visualización, muestra el diseño que mejor se adapte de entre los disponibles. Trabaja con medidas fijas, no en base a tamaños porcentuales.

2. Ventajas del responsive design

El auge de los teléfonos smartphones y la tabletas, hace vital que cualquier contenido que consuman desde esos dispositivos tenga una correcta visualización, por lo que resulta de vital importancia hace uso del responsive design.

Ademas, ello nos reporta una serie de ventajas en comparación con los diseños no responsive. Entre esas ventajas destacan:

• Mejora la experiencia de los usuarios. Los que visiten el contenido van a tener una experiencia de uso unificada, sin importar el tipo de dispositivo que utilicen y si posteriormente acceden utilizando otro, no notaran cambios relevantes.
• Adiós a los contenidos duplicados. Ya no es necesario contar con una versión específica para los que accedan a la web desde un teléfono móvil y con ello tener duplicados los contenidos (el SEO de tu web te lo agradecerá). La versión responsive es una sola.
• Ahorro de costes de mantenimiento y desarrollo web. Esta ventaja es obvia, dado que al solo ser necesario mantener una versión de la web el coste de mantenimiento de la misma se ve reducido con respecto a disponer de versiones para cada tipo de dispositivo.
• Mejora el SEO. La velocidad de carga del sitio mejora, ello unido a que los visitantes consiguen una mejor visualización de los contenidos y con ello el tiempo medio de la visita tiende a ser mayor, potencia positivamente el posicionamiento del sitio web responsive.
• Aumenta las opciones viralidad. La mayor parte del trafico web se lleva a cabo desde dispositivos móviles, donde se tienen instaladas las distintas apps de redes sociales. Por ello, gracias al responsive y su excelente comportamiento con dispositivos móviles, los usuarios están en mejor disposición para compartir los contenidos que son visualizados de forma correcta y atractiva.

3. Características de un diseño responsive

El diseño responsive apareció en el 2010, cuando el diseñador gráfico Ethan Marcotte se valió de HTML y CSS para llevar a cabo un sitio responsive.

No siendo hasta pocos años después, hasta 2013, cuando su uso comenzó a ser generalizado para dar solución a las ingente cantidad de tráfico web que se generaba desde los teléfonos móviles.

Los diseños tienen que tener una serie de características para poder ser considerados como responsive:

• Adaptarse al ancho del dispositivo, de forma correcta e instantánea.
• Hacer uso de media-queries de CSS3.
• Dar los contenidos e imágenes al visitante con total fluidez.
• Ser capaz de reorganizar los elementos de la web para disposiciones horizontales y verticales.
• De ser necesario, dar una apariencia distinta a ciertos elementos e incluso llegar a eliminarlos.
• Evitar la existencia de contenidos duplicados.
• Compensar el tamaño y espaciado de las tipografías en pro de una mejor legibilidad.
• Facilitar al visitante que comparta los contenidos rápidamente.