Diseño Responsive, adiós a las webs separadas para móviles
El diseño responsive es más que una tendencia web en 2012, es un boom que está arrasando con el concepto de “movilizar” una web y que está dejando en desuso al ya mítico m.dominio.com o dominio.mobi.
¿Qué es el diseño responsive?
El diseño responsive o sensible 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 estaríamos pensando en hacer 2 diseños, uno para móviles y otro para web, sin embargo, el diseño responsive se trata simplemente de estructurar el contenido que ya tienes en el diseño original en otros 3 formatos diferentes, como bien muestra esta imagen:
¿Por qué debes implementarlo en tu web?
Viéndolo desde un lado de costes, deberíamos plantear el diseño responsive desde el inicio del proyecto, ya que esto permitiría ahorrar hasta un 60% el coste de adaptar nuestra web para diferentes dispositivos. Además, dependiendo de la web que tengamos, puede ser altamente complejo adaptar nuestra web a este tipo de diseño. 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
Lo mejor de todo es que para poder hacer un diseño responsive debemos empezar pensando en HTML5. Hoy en día todos los clientes nos hablan de HTML5 pero realmente pocos saben las ventajas que aporta con respecto a HTML4 o XHTML en desarrollo de una web, simplemente está de moda y lo quieren.
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 permitirá un mejor posicionamiento en buscadores dando un mayor entendimiento de como está construida 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. Para ello es importante que siempre que hablemos de usabilidad y diseño responsive pensemos primero en el móvil y después en la web de escritorio.
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.
Algunos ejemplos de Diseño Responsive
O incluso prueba a redimensionar nuestra web, verás como se adapta perfectamente a diferentes resoluciones :-).
En mediaqueri.es tienes un amplísimo catálogo de webs responsive para inspirarnos.
Manos a la obra
Si estás pensando en esta tendencia de diseño para tu próximo diseño web, aquí tienes 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
- Frameworks:
Y un sin fin de herramientas para diseño responsive en Trip Wire Magazine.
