Saltar al contenido

¿Qué es un diseño web responsive?

diseno-web-responsive

El diseño Web responsive es una práctica en diseño y desarrollo web que da prioridad a una interfaz amigable para el cliente, sin que importe el dispositivo que use o la medida y orientación de su pantalla. El diseño del lugar debería ser capaz de ajustarse a cualquier resolución con la que se acceda al lugar para consumir su contenido.

Este procedimiento se apoya 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 poder hacer una interfaz consistente entre algunas pantallas.

Mientras el cliente pasa de su portátil a una tablet, el cibersitio debe modificar automáticamente para ajustarse a la nueva resolución, la medida de la imagen y las habilidades de escritura del dispositivo.

Si no conoces lo cual es un CSS query, Platzi tiene un curso completo de HTML y CSS que puedes comenzar gratis y te ayudará a comprenderlo mucho mejor.

¿Por qué utilizar diseño web responsive?

Todo el planeta está conectado a internet en la actualidad. Si no tienes un smartphone en tu bolsillo en este instante, eres posiblemente un caso poco común (¿qué tiene de malo mi Nokia con lucecitas de colores?). Esta tendencia se sabe como mobile first.

Así como hay más usuarios conectados, además hay más maneras de conectarse a internet. A partir de pcs de escritorio, laptops, iPhones, tablets y hasta refrigeradoras, todos dichos dispositivos con diferentes tamaños de pantalla requieren conectarse a tu portal web. Aquí entra en acción el diseño web responsive.

Si no logras exponer tu información de una manera amable al cliente en su dispositivo, sencillamente se irá para no volver. Esto se sabe como tasa de rebote o bounce rate (cuántas personas rebotan y se van apenas llegan a tu contenido).

Elementos a tener en cuenta para una web responsive

Contenedores:

Deben poder ajustarse a las diversas pantallas de forma dinámica.

Tipografías:

Es una buena práctica utilizar textos relativos y no únicamente fijos, que no se verán bien en pantallas mayores o más pequeñas.

Imágenes y multimedia:

Contenido optimizado respecto a su peso para rapidez de carga y adaptabilidad tanto a orientación vertical como horizontal. Si el contenido a mostrarse es fundamental, debería tener la elección para verlo en pantalla completa o una lightbox.

Menús:

Sencillos de desplegar y hallar en diversos dispositivos, con información eficaz priorizada para el cliente.

Observado de otra forma, un portal web responsive debe disponer de la tecnología idónea para contestar automáticamente a las preferencias del cliente. Esto asegura una vivencia de navegación dinámica y descarta la necesidad de diseñar un website distinto para cada distinto dispositivo que las organizaciones de Silicon Valley decidan sacar al mercado. Esto lo explica además 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. Pese a estar pensados hacia un futuro parecido, en el cual el website debería ser capaz de servir contenido a diversos tipos de pantallas, existe una diferencia clave entre los dos. El diseño responsive es “fluido”, esto significa que no está enfocado a una pantalla en concreto, sino que va demostrando su contenido de forma que ocupa la medida completo de la pantalla, libre del tamaño de la misma.

En el diseño adaptativo, por otro lado, se utilizan media queries para conocer la resolución de la pantalla y basado en dicha información, enseñar una versión distinto del portal web realizada para dicha pantalla o la que más se le aproxime.

Qué son las media queries

Los media queries son una regla o un grupo de normas que unicamente se verán aplicadas una vez que se cumpla una cierta condición (break points), realizando una comparación con los idiomas de programación un media query seria como una sentencia if empero en css.

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

Hay 2 maneras de producir dichos media queries, la primera a partir de un documento css y la segunda a partir de un documento externo cargado de manera condicional.

¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)