¿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?

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, como bien muestra esta imagen:

¿Por qué debes usarlo?

Viéndolo desde un lado de costos, deberíamos plantear el diseño responsive desde el inicio del proyecto, ya que permitiría ahorrar hasta un 60% el costo 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 recomendamos 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.

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:

Y un sin fin de herramientas para diseño responsive.

Esperamos que lo disfruten, y cualquier duda nos consultan!!