¿Qué es el diseño web responsivo (responsive web design)?

Responsive web design:

Es una práctica en diseño y desarrollo web que da prioridad a una interfaz amigable para el usuario, sin importar el dispositivo que utilice o el tamaño y orientación de su pantalla. El diseño del sitio debe ser capaz de adaptarse a cualquier resolución con la que se acceda al sitio para consumir su contenido.

Este método consiste en una mezcla de rejillas (o grids) y diseños flexibles, imágenes pensadas en diferentes dispositivos y un uso inteligente de CSS queries para lograr una interfaz consistente entre varias pantallas.

A medida que el usuario pasa de su portátil a una tablet, el sitio web debería cambiar automáticamente para adaptarse a la nueva resolución, el tamaño de la imagen y las capacidades de escritura del dispositivo.

¿Por qué usar diseño web responsive?

Todo el mundo está conectado a internet hoy en día. 

Así como hay más usuarios conectados, también hay más formas de conectarse a internet. Desde computadoras de escritorio, laptops, iPhones, tablets y hasta refrigeradoras, todos estos dispositivos con diferentes tamaños de pantalla necesitan conectarse a tu sitio web. Aquí entra en acción el diseño web responsive.

Si no logras presentar tu información de una forma agradable al usuario en su dispositivo, simplemente se irá para no volver. Esto se conoce como tasa de rebote o bounce rate (cuántas personas rebotan y se van apenas llegan a tu contenido).

Elementos a tomar en cuenta para una web responsive

Contenedores:

Deben poder adaptarse a las diferentes pantallas de manera fluida.

Tipografías:

Es una buena práctica usar textos relativos y no solamente fijos, que no se verán bien en pantallas más grandes o más pequeñas.

Imágenes y multimedia:

Contenido optimizado en relación a su peso para velocidad de carga y adaptabilidad tanto a orientación vertical como horizontal. Si el contenido a mostrarse es importante, debe tener la opción para verlo en pantalla completa o una lightbox.

Menús:

Fáciles de desplegar y encontrar en distintos dispositivos, con información útil priorizada para el usuario.

Visto de otra manera, un sitio web responsive debería contar con la tecnología adecuada para responder automáticamente a las preferencias del usuario. Esto garantiza una experiencia de navegación fluida y elimina la necesidad de diseñar un sitio web diferente para cada diferente dispositivo que las empresas de Silicon Valley decidan sacar al mercado. Esto lo explica también el manifiesto original sobre responsive design.

Diseño Responsive vs. Adaptativo - ¿Es lo mismo?

El diseño web responsive y adaptativo no son lo mismo. A pesar de estar pensados hacia un futuro similar, en el que el sitio web debe ser capaz de servir contenido a distintos tipos de pantallas, hay una diferencia clave entre ambos. El diseño responsive es “fluido”, esto quiere decir que no está enfocado a una pantalla en específico, sino que va mostrando su contenido de forma que ocupa el tamaño completo de la pantalla, independiente del tamaño de la misma.

En el diseño adaptativo, por el contrario, se usan media queries para conocer la resolución de la pantalla y con base en esa información, mostrar una versión diferente del sitio web hecha para esa pantalla o la que más se le aproxime.

¿Qué son las media queries?

Los media queries son una regla o un conjunto de reglas que solo se verán aplicadas cuando se cumpla una determinada condición (break points), haciendo una comparación con los lenguajes de programación un media query seria como una sentencia if pero en css.

Estas condiciones o breakpoints son establecidos en base a los tamaños de anchura de la pantalla en los que queremos que se aplique un cambio de diseño responsive.

Hay dos formas de crear estos media queries, la primera desde un archivo css y la segunda desde un archivo externo cargado de manera condicional.

información obtenida de el siguiente enlace:

https://platzi.com/blog/que-es-diseno-responsive/?utm_source=google&utm_medium=cpc&utm_campaign=12915366154&utm_adgroup=&utm_content=&gclid=CjwKCAiAwKyNBhBfEiwA_mrUMkCRN0mVxcE7VwHMn6HlLHRq0g6P3rBbSshN_1vQK7HotvUx61eaEBoCviMQAvD_BwE&gclsrc=aw.ds