¿Que es el diseño Web Responsive?
El diseño responsive se basa en proporcionar a todos los usuarios de una web los mismos contenidos y una experiencia de usuario lo más similar posible, frente a otras aproximaciones al desarrollo web móvil como la creación de apps, el cambio de dominio o webs servidas dinámicamente en función del dispositivo.
Aunque todas tienen pros y contras, la web responsive es considerada por muchos expertos como la mejor práctica posible, al unificar la web, reducir tiempos de desarrollo y ofrecer grandes ventajas para SEO móvil.
¿Qué es el diseño responsive?
Antiguamente se pensaba en hacer 2 diseños, uno para móviles y otro para web, sin embargo, el diseño responsive trata de estructurar el contenido que ya tienes en el diseño original en otros formatos diferentes: móviles, tablets y versión de escritorio, como bien muestra esta imagen:
¿Por qué debes usarlo?
Diseño responsive es sinónimo de HTML5.
Básicamente lo que HTML5 nos ha facilitado es poder tener una mayor definición de elementos. Antes, solamente teníamos listas, párrafos, capas, tablas… ahora sin embargo, gracias a HTML5 tenemos recetas, productos, noticias, etc. Esto es la web semántica y nos permite mejorar la estructura a nivel de código, por lo que mejorará el entendimiento que tienen los buscadores de nuestra web.
Usabilidad
Hay mucho ruído con respecto a temas de usabilidad en este tipo de diseños pero conceptualizando bien el diseño desde el primer momento, no deberíamos tener problemas de usabilidad en absoluto.
En Smashing Magazine tratan este tema con un gran post sobre porque no debemos separar la web de escritorio de la web móvil, dejando de lado, algunas de las teorías de Jakob Nielsen sobre que la web móvil debería estar separada de la web de escritorio, ¿tú que piensas?
Sea como sea, esta tendencia ha llegado para quedarse.
En mediaqueri.es tienes un amplísimo catálogo de webs responsive para inspirarlos y aquí les dejo algunos recursos que necesitarán tener a mano:
- Patrones de diseño multi-dispositivo
- Diagrama para la planificación de diseño responsive
- Herramienta de testeo de diseños responsive
- Responsive Wireframes
Y un sin fin de herramientas para diseño responsive.
Esperamos que lo disfruten, y cualquier duda nos consultan!!