¿Qué es el diseño responsive?
El diseño responsive se basa en adaptar dinámicamente el diseño web en función de la resolución de la pantalla del visitante. De esta forma adaptamos nuestras webs a dispositivos móviles sin necesidad de tener dos sitios separados y también podemos adaptar la web a resoluciones grandes para mejorar la experiencia de usuario.
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.
¿Por qué debes usarlo?
Viéndolo desde un lado de costes, deberíamos plantear el diseño responsive desde el inicio del proyecto, ya que permitiría ahorrar hasta un 60% el coste de adaptación posterior. Además, dependiendo de la web que tengamos, puede ser altamente complejo adaptar nuestra web a este tipo de diseño en el futuro. Te recomendaría que si estás pensando en este tipo de diseño, te plantees un rediseño total para poder planificar bien el diseño en base a los diferentes dispositivos.
Viva la web semántica. Diseño Responsive y HTML5
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 ruido 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, desmontando algunas de las teorias 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 inspirarte y aquí te dejo algunos recursos que necesitarás 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.
No hay comentarios.:
Publicar un comentario