¿Qué es diseño responsivo, receptivo?

Responsive Design o más precisamente Responsive Web Design (RWD) es una técnica de diseño de interfaz digital que asegura que la visualización de cualquier página en un sitio se adapta automáticamente al tamaño de la pantalla del terminal del sitio web que la lee. Es diferente del Diseño Adaptativo aunque los dos conceptos apuntan a mejorar la ergonomía móvil del sitio web.

Lo que significa

El diseño reactivo o responsivo, adapta el diseño de un sitio de acuerdo con la resolución de la pantalla El diseño web autoadaptable es la expresión que mejor explica esta tecnología para mostrar sitios web en dispositivos móviles. El objetivo es, por supuesto, facilitar la lectura y la navegación del internauta independientemente del tipo de terminal que utilice.

Con un teléfono inteligente, una tableta, un netbook, un televisor conectado o simplemente una computadora, la página le parecerá completa y ergonómica sin ninguna manipulación en términos de acercamiento / alejamiento y la barra de desplazamiento horizontal.

El código del sitio adapta su diseño de acuerdo con la pantalla que presenta sus páginas. Hay un cambio de tamaño automático de los bloques de contenido textual y gráfico, así como una reorganización de su disposición.

Esta solución, que se puede resumir con la expresión «Mobile first», es una respuesta a la tendencia actual de los internautas de utilizar cada vez más dispositivos móviles y fue posible gracias a CSS3 Media Queries.

Detrás de esta autoadaptación hay un código HTML idéntico para los diferentes tipos de terminales, gráficos con resoluciones adaptables, un sistema de cuadrícula fluida y por supuesto las CSS3 Media Queries que gestionan las hojas de estilo. Una regla permite a los diseñadores web gestionar fácilmente la creación de este diseño. Se trata de partir de una pantalla en 320 px para luego ir subiendo hacia resoluciones cada vez mayores.

CSS3 hizo posible el diseño web receptivo

El Responsive Web Design se ha beneficiado de la llegada de CSS3 Media Queries (gestión dinámica de hojas de estilo). Un sitio diseñado en Responsive Web Design está diseñado de la siguiente manera:

• Una única base de código HTML idéntico para todos los terminales.
• Un sistema de cuadrícula fluida donde se coloca el contenido de la página.
• Uso de CSS3 Media Queries para aplicar la hoja de estilo correcta.
• Imágenes flexibles / adaptables cuyo tamaño / resolución se ajusta automáticamente.

Cuando se alcanza el objetivo, la interfaz del sitio web es legible y utilizable en todos los dispositivos. El contenido se encoge y se expande a voluntad sin cambiar. Sin embargo, es posible ocultar contenido. Por ejemplo, una imagen o un texto puede ser visible solo en el sitio web en modo computadora (escritorio) y tableta, y ausente para mostrarse en dispositivos móviles.

Beneficios y problemas

El diseño web receptivo tiene ciertas ventajas, pero también un gran inconveniente de todos modos Las ventajas del RWB son importantes, al menos siempre que el diseñador web lo haga bien en su diseño, es decir si cuida el contenido de sus páginas, se anticipa al comportamiento de los usuarios, tiene en cuenta las funcionalidades de los diferentes terminales con pantalla táctil y sabe explotar la tendencia al crecimiento de las resoluciones.

Para crear un sitio que se adapte a todas las pantallas, solo tendrá que desarrollar un único código HTML. Por el lado del usuario, la positividad de la experiencia en el nivel ergonómico ya no se presenta.

Sin embargo, la perfección no existe ya que esta capacidad de adaptación en las pantallas de los móviles se acompaña de una degradación de la velocidad de visualización de la página. La razón es que RWB tiene que cargar el archivo CSS completo. Aunque esta degradación es mínima, puede ser suficientemente penalizante para determinadas aplicaciones móviles como para justificar la elección de una solución distinta al diseño adaptable.

Todavía existe la posibilidad de que el creador del sitio solo permita que ciertos elementos de contenido aparezcan en resoluciones superiores a las de los teléfonos inteligentes para sortear este tipo de problema. Cabe destacar también que este tiempo de carga de la página solo tiene un impacto muy bajo en el posicionamiento en términos de SEO pero es de gran importancia para el usuario móvil.

Leer también: Beneficios De Un Sitio Web Responsive Para Mejorar El Ranking En Google; 9 Principios Básicos Del Diseño Web Responsive; 7 Buenas Prácticas De Diseño Web Responsive