Diseño web adaptativo o responsive design (Infografía)

Estamos en un mundo móvil, y cada vez más accedemos a Internet desde dispositivos variados, con necesidades y en situaciones diferentes. Queremos compartir con vosotros una interesante infografía sobre el diseño web adaptado a móviles o responsive web design que explica gráficamente qué esta nueva metodología de diseño y porqué deberías plantearte incorporarla a tu sitio web si aún no lo has hecho.

El diseño web adaptativo, (responsive web design), es una técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas y media queries en la hoja de estilo CSS permite que el sitio web se adapte al entorno del usuario, sea cual sea el dispositivo que utilice para navegar.

Esto es sumamente importante, ya que, cada vez se venden más dispositivos de distinta índole y tamaño de pantalla, y está cambiando la forma de diseñar las páginas web para que sean visualizadas correctamente en cualquier dispositivo.

Si además de esto tenemos en cuenta que en los sitios móviles puede darse el caso de que las funciones y contenidos necesiten ser diferentes que en la versión vista en un ordenador de sobremesa, el diseño adaptativo es la solución más acertada, quitando o reduciendo la visibilidad de ciertos elementos.

Si observamos los datos que muestra la infografía de más abajo, el 67% de los internautas utiliza dispositivos móviles para comprar o visitar tiendas online. Esto es un avance muy importante con respecto a años anteriores, y el diseño adaptativos está haciendo mucho para que  este porcentaje siga creciendo.

El diseño web adaptativo supone que usando HTML y CSS logremos una sola versión que cubre todas las resoluciones de pantalla, por lo que el sitio web creado es accesible desde todo tipo de dispositivos.

A continuación os resumo los tres elementos técnicos para el diseño web adaptativo:

• Fluid grid (cuadrícula fluida): En lugar de píxeles utiliza porcentajes para definir los anchos de las columnas o divs.
• Media queries: Permiten consultas a la hoja de estilos CSS basándose en el ancho mínimo y máximo de un navegador.
• Imágenes flexibles: Las imágenes no tienen anchos fijos sino un máximo, que por lo general suele mostrarse al 100% en un PC.

Ventajas

• Mejor experiencia para el usuario: Ayuda a que todos los usuarios vean la web de la mejor manera posible para el dispositivo desde el que acceden.
• Costes más bajos: Se van a reducir los costes de creación y mantenimiento.
• Mejor SEO: Google puede descubrir mejor tu contenido.
• Actualizaciones más eficientes: cualquier actualización o modificación en el diseño, se ve reflejado en todas las plataformas, lo que reduce tiempos y márgenes de errores.
• Accesible a todos: Se incrementa la accesibilidad de los usuarios, incluidos las personas con distintos problemas de disminución visual.
• Búsquedas: Al hacer una búsqueda, aparecerá una URL única en los resultados, por lo que se ahorran redirecciones y posibles fallos que puedan surgir.

Conclusión

El diseño web adaptativo es actualmente una solución imprescindible si deseas conservar tu presencia en la web y cualquiera que sea el soporte de navegación usado por el visitante. El diseño web adaptativo es definitivamente una solución eficaz que ofrece una experiencia de usuario deseada. Es una evolución superior del diseño web que invita a los diseñadores a un nuevo desafío ergonómico y asegura a los usuarios una experiencia enriquecida. Sin embargo, es necesario saber qué alternativas hay. Existen sitios alternativos para móviles que dirigen a los visitantes en posesión de un smartphone hacia el sitio móvil o a aplicaciones móviles que aunque son mejores para controlar la experiencia del usuario, son bastante costosas en desarrollar y no permiten una indexación óptima.

En esta infografía podemos ver, a parte de tendencias en navegación, casos de éxito de algunas de las más importantes editoriales internacionales.

Cortesía de Uberflip.

¿Qué otras razones consideras tú importantes para adaptar el diseño de tu web a dispositivos móviles?

Espero que este artículo te ayude a decidirte a pasar tu sitio web a un diseño web adaptativo si es que aún no lo has hecho. Si te ha gustado, asegúrate no perderte ninguno de nuestros posts y suscríbete a nuestro blog…