12 ventajas importantes del diseño adaptable

() translation by (you can also view the original English article)

Nadie puede negar que el diseño web adaptable ha ido ganando popularidad e importancia desde que Google anunció en el 2015 que los sitios web adaptables que se visualizaban bien en teléfonos móviles subirían su ranking en el motor de búsqueda.

Sin embargo, el diseño adaptable se remonta incluso más atrás. De hecho, el primer sitio web con un diseño que se adaptaba a diferentes anchos de viewport en el navegador fue diseñado alrededor del año 2002. Gracias al desarrollo tecnológico y al hecho de que diseñar para la web siempre implica que el sitio se verá en miles de tamaños de pantalla, el diseño adaptable fue una consecuencia natural.

Sin embargo, no fue sino hasta el 2010 que el término “diseño web adaptable” fue acuñado oficialmente por Ethan Marcotte, un desarrollador web independiente que también escribió un libro sobre el tema.

Desde entonces, la tecnología avanzó incluso más y hemos visto un número cada vez mayor de usuarios que usan sus teléfonos inteligentes y tabletas no solo para hacer llamadas y enviar mensajes, sino también para leer noticias y visitar otros sitios web de interés. En el futuro, la importancia del diseño web adaptable de seguro continuará (como la mayoría de expertos predice) debido al uso constante y generalizado de dispositivos móviles.

Tomando en cuenta todos estos factores, está claro que el diseño web adaptable ha llegado para quedarse. Más importante aún es el hecho de que este presenta una serie de ventajas. En este artículo, revisaremos las características del diseño web adaptable y sus beneficios. También te mostraremos cómo tu sitio web y tu negocio se pueden beneficiar si lo adoptan.

Los elementos fundamentales del diseño web adaptable

El diseño adaptable es posible gracias a los principios básicos a los que se adhieren todos los diseñadores, todos los frameworks (o esquemas modernos para el desarrollo de aplicaciones) y cualquier CMS:

1. Cuadrículas fluidas

Las cuadrículas fluidas son la base del diseño adaptable. Las cuadrículas permiten alinear elementos en la página y organizarlos de una manera visualmente atractiva siguiendo determinada jerarquía. Las cuadrículas fluidas cambian de tamaño de acuerdo a las dimensiones de la pantalla del usuario y hacen que todos los elementos de la página también lo hagan. Si bien el uso de cuadrículas siempre ha estado presente en el mundo del diseño, las primeras cuadrículas adaptables eran simples y fueron desarrolladas para ayudar tanto a diseñadores como a desarrolladores en el diseño de sitios web. Después de esas cuadrículas adaptables iniciales aparecieron en escena una serie de frameworks o esquemas adaptables que funcionaban con CSS, cuyo código estaba basado en cuadrículas fluidas.

Hoy en día, CSS integra las cuadrículas como “CSS Grid layout module”. El soporte del navegador es bastante sólido ahora y ofrece enormes posibilidades para los diseñadores web que quieren explorar cuadrículas fluidas adaptables sin depender de los frameworks existentes.

2. Consultas de medios

Las consultas de medios han existido desde principios de los años 2000, pero no fue sino hasta el 2012 que se volvieron el estándar W3C recomendado. Tal como las cuadrículas fluidas, las consultas de medios representan una piedra angular del diseño web adaptable. Gracias a ellas, el sitio web puede recolectar datos que le ayuden a determinar el tamaño de la pantalla con la que está accediendo el usuario. Una vez que cuenta con esta información, el sitio carga los estilos CSS apropiados para ese tamaño específico de pantalla.

3. Imágenes y medios adaptables

El diseño web adaptable funciona bastante bien cuando se trabaja únicamente con texto. Sin embargo, los sitios web modernos incluyen muchos medios como imágenes y videos, lo cual puede resultar más complicado.

La manera correcta de trabajar con imágenes y otros archivos de medios es usar la propiedad de ancho máximo en lugar de usar las dimensiones del archivo de imagen o del medio. Por ejemplo:

img {

    max-width: 100%;
    height: auto;

}

Si se quiere incluir otro tipo de medios, el proceso se complica. La propiedad de altura no funcionará, así que hay que añadir un margen interior o "padding" en el contenedor y luego colocar el medio en su interior. Thierry Koblentz sugirió este método (truco) en el 2009 y aún es la manera más segura de proceder.

.wrapper-with-intrinsic-ratio {
    position: relative;
  padding-bottom: 20%;
	height: 0;
}

.element-to-stretch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Una vez que añadido esto al código CSS, todas las imágenes y archivos de medios respetarán la escala del navegador y no se saldrán de los límites del contenedor.

Ahora que hemos cubierto los principios fundamentales del diseño web adaptable, profundicemos en las ventajas que este conlleva.

Ventajas del diseño web adaptable

El diseño web adaptable aporta muchos beneficios. Puede mejorar tu SEO, las tasas de conversión, la experiencia del usuario y muchos otros aspectos que contribuyen al crecimiento de tu negocio. Estas son las 12 ventajas y características más importantes del diseño web adaptable.

1. Mejor experiencia para el usuario

Un sitio web adaptable le ofrece una mejor experiencia al usuario. Un factor importante que refleja la calidad de la experiencia del usuario es el tiempo que se queda en tu sitio. Si les parece difícil de navegar o usar porque constantemente tienen que estar moviendo el contenido y haciendo zoom, no se quedarán.

Pero si el sitio se adapta bien a las dimensiones de su pantalla, los visitantes no tendrán problemas para acceder a los menús, enlaces y botones, o para llenar formularios. En consecuencia, su experiencia será mejor y pasarán más tiempo en tu sitio.

Si el usuario tiene una buena experiencia y el sitio es fácil de usar, aumentarán las posibilidades de que te recomienden y de que ganes nuevos clientes para tu negocio.

2. Mayor tráfico proveniente de teléfonos móviles

Las estadísticas muestran que en el último trimestre del 2017, casi el 52% de todo el tráfico mundial se realizaba a través de teléfonos móviles. Esto representa más de la mitad de todo el tráfico en internet y demuestra que no puedes permitirte prescindir de un diseño web adaptable. Comienza por investigar cuántos de tus visitantes acceden a través de un dispositivo móvil y cuánto tiempo pasan en tu sitio. Luego implementa un diseño adaptable y compara las cifras. Una vez que tu sitio web se adapte al ancho de viewport, notarás un incremento en el número y la duración de las visitas desde dispositivos móviles.

3. Desarrollo web más veloz

No hace mucho era común hacer una versión aparte de tu sitio para dispositivos móviles que funcionaba si se detectaba un tamaño de pantalla más pequeño. Sin embargo, desarrollar una versión móvil aparte toma más tiempo que desarrollar un sitio web adaptable que se vea genial y funcione como se espera en cualquier dispositivo. Otra desventaja de la versión móvil es que cuesta más porque el desarrollador tendrá que crear dos sitios en lugar de uno.

4. Fácil mantenimiento

En directa relación con el punto anterior, el mantenimiento de un sitio web adaptable es más fácil. Con dos versiones de tu sitio, tu personal y equipo de desarrollo tiene que dividir su tiempo y recursos en administrar dos sitios. En cambio, con un sitio web adaptable, tu personal le dedicará menos tiempo al mantenimiento y se centrará en tareas más importantes como el marketing, pruebas A/B, servicio al cliente, desarrollo de productos o contenidos y más.

5. Riesgo cero de penalidad por contenido duplicado

Otro punto a tomar en cuenta es que si tienes dos versiones de tu sitio, básicamente estás creando contenido duplicado. Si bien los motores de búsqueda se están volviendo más inteligentes día a día, aún necesitan entender qué versión de tu sitio web es más importante. Si estás usando una versión móvil de tu sitio, tu contenido será el mismo incluso si la URL es diferente.

Esto puede causar que ambas versiones bajen su ranking en los motores de búsqueda porque estos no sabrán cuál de los contenidos es relevante. Si quieres que ambas versiones se encuentren bien posicionadas, tendrías que crear dos estrategias SEO y campañas por separado e invertir significativamente mucho más dinero en producir contenido original y único tanto para la versión de escritorio como para la versión móvil.

Dado que llevar adelante dos estrategias de SEO por separado requiere demasiado tiempo y dinero, la mayoría de los propietarios de sitios web usan una etiqueta canónica en sus sitios móviles que redirige a la versión de escritorio. En consecuencia, la mayoría de los sitios web móviles ni siquiera aparecen en los motores de búsqueda.

Con un sitio web adaptable se pueden evitar todos los dolores de cabeza antes mencionados. Si tenías dudas sobre la importancia del diseño web adaptable, esto debería convencerte.

6. Analíticas más simples para el sitio web

Cuando tienes dos versiones distintas de tu sitio web, tienes que hacer el seguimiento de dos estadísticas para saber de dónde vienen tus visitantes y cómo interactúan con tu contenido. Esto quiere decir que debes estar al tanto de varias páginas de inscripción y de agradecimiento, puntos de conversión, embudos de conversión y más.

En cambio, con un sitio web adaptable, las estadísticas de tu sitio se simplifican en gran medida, ya que solo manejas una única fuente de datos donde puedes ver qué dispositivos y navegadores están usando tus visitantes, qué ven en tu sitio y cuánto tiempo pasan en él, pero no necesitarás leer datos de múltiples fuentes para hacerte una idea clara de la situación.

7. Menor tiempo de carga del sitio web

Los sitios web adaptables, tienden a cargar más rápido en todos los dispositivos, pero especialmente en los teléfonos inteligentes y tabletas. Gracias a las imágenes adaptables y las cuadrículas fluidas, toma mucho menos tiempo que la página cargue, lo que influye directamente en cuánto dura la visita del usuario. Según las investigaciones, el 53% de los usuarios de dispositivos móviles abandonan el sitio si la página demora más de tres segundos en cargar. La misma investigación muestra que los usuarios pasan más tiempo en los sitios web que cargan más rápido y, así mismo, sus tasas de conversión son mejores. Esto es un signo evidente de la importancia del diseño web adaptable.

8. Menores tasas de rebote

La tasa de rebote equivale al porcentaje de visitantes a un sitio web en particular que se van después de haber visto una sola página. Como lo mencionamos anteriormente, un sitio web adaptable hace que los visitantes se queden en el sitio más tiempo, lo cual reduce la tasa de rebote. Los visitantes estarán más dispuestos a hacer clic y a leer otras páginas de tu sitio, así como a explorar todo lo que ofreces.

9. Tasas de conversión más altas

Las visitas más largas y menores tasas de rebote son buenos puntos de partida para mejorar la experiencia del usuario visitante y generar confianza. Ambos factores propician tasas de conversión más altas, tanto si la conversión consiste en suscribirse a tu boletín, hacer una compra o reservar una cita. Si consideras por un momento que la tasa de conversión desde los teléfonos móviles es en promedio 65% más alta que en el caso de los dispositivos de escritorio, es fácil darse cuenta por qué hay que contar con un sitio adaptable.

10. Mejor SEO

Otra de las ventajas del diseño web adaptable es que tiene un mejor ranking en los motores de búsqueda. Desde abril de 2015, Google toma en cuenta la adaptabilidad de tu sitio en sus resultados. Si tu sitio web no es adaptable, el gigante de los motores de búsqueda lo ubicará más abajo en la página de resultados. En cambio, aparecerá más arriba si pasa la prueba de adaptabilidad a las pantallas de dispositivos móviles.

SEO improves — Otra de las ventajas del diseño web adaptable es que mejora la posición de tu sitio en los resultados de búsqueda (Fuente: Envato Elements)

11. Más contenido compartido en las redes sociales

Si está bien hecho, otro de los beneficios que aporta el diseño web adaptable es que puede generar un incremento en la cantidad del contenido compartido en las redes sociales. El contenido adaptable sumado a los botones de las redes sociales, hace que sea más fácil compartir enlaces a las páginas de tu sitio, incluso en pantallas pequeñas. Esto ayudará a fortalecer tu credibilidad y aumentar tu exposición a una nueva audiencia, lo cual generará más tráfico y más conversiones. Al mismo tiempo, los indicios de actividad social también pueden influir de manera indirecta en la posición de tu sitio en el motor de búsqueda, ya que el buscador registrará mayor interés y más búsquedas.

12. Mejores enlaces externos

Finalmente, vale la pena mencionar que un sitio web adaptable te puede ayudar cuando se trata de crear enlaces externos o backlinks. Los enlaces externos juegan un papel importante en cualquier estrategia de SEO porque les muestran a los motores de búsqueda que otros sitios web consideran tu sitio como una fuente de información confiable. Otros sitios web estarán menos dispuestos a incluir un enlace a tu sitio si este no es adaptable. Después de todo, incluir un enlace a un sitio web que no provee una buena experiencia para el usuario, también perjudica su propia imagen.

Mejora tus finanzas con un sitio web adaptable

Como puedes ver, un diseño web adaptable le aporta varios beneficios a tu negocio. Si tu sitio web todavía no es adaptable, el primer gran paso es plantearse cómo renovar el diseño e integrar cuadrículas fluidas. Esto te ayudará a determinar qué elementos en la página son los más importantes, qué páginas pueden ser eliminadas y cuánto quieres conservar de tu sitio.

Una vez que tienes claro cómo quieres hacer la renovación, puedes lanzarte a elegir la plataforma correcta y el tema adecuado. Luego puedes implementar los consejos de esta serie de tutoriales y mejorar la tasa de conversión, la duración de las visitas, tu ranking SEO y más.