Knowledge center Diseño gráfico y web Diseño web

¿Sabes qué es el diseño responsive?

La filosofía Responsive Web Desig se basa en adaptar dinámicamente la apariencia de las páginas web al dispositivo que se esté usando para visualizarlas.

El término Responsive, aquí hace referencia a lo que podríamos definir como un modelo "Responsivo" , lo que significa que es perteneciente o relativo a la respuesta, es decir, que sería un sistema que obtiene una respuesta en función de las condiciones donde se encuentra.

Es más común definir en español esta filosofía como Modelo Adaptativo, ya que se ADAPTA al dispositivo en el que se visualiza.

Por eso puedes encontrar esta filosofía como Responsive Web Desig, como Diseño Web Responsivo o como Diseño Web Adaptativo.

Tradicionalmente

las páginas web estaban creadas para su versión de ordenador, esa era en un principio la visualización por defecto.

Pero con la llegada de móviles y tablets

que se conectan a internet, la misma página podría ser visualizada desde un móvil.

Durante un tiempo

se hacían dos versiones de la web, una para móviles y tablets y otra versión para ordenador y es por ello por lo que había que mantener ambos desarrollos a la vez.

De ahí surgió la idea de que tener una sola web es la mejor situación y por tanto adaptarla al dispositivo. A partir de CSS3, se incluyó unas propiedades que ya empezaban a brindarnos esta posibilidad.

Pero el concepto de adaptarse, no implica que tenga que ser la misma web que se vea igual en distintas resoluciones, sino que la web se adapta, cambiando su formato o diseño de la mejor forma posible a la pantalla, englobando cambios de técnicas, funcionamientos, prácticas, etc.

Funcionamiento del diseño adaptable

A la hora de desarrollar nuestra web, necesitamos ver el resultado final en cada uno de los dispositivos para la corrección de errores.

Tenemos que probarlo y para ello tenemos varias opciones, una de ellas es usar algunas de las webs que existen para tal fin.

Por ejemplo:

Responsinator

http://www.responsinator.com

Jamus

https://jamus.co.uk/demos/rwd-demonstrations/

Demostrating_Responsive_Desing

Websiteplanet

https://www.websiteplanet.com/es/webtools/responsive-checker/

Estas herramientas están disponibles solamente de forma online, pero nos permite ver de un solo vistazo como se mostraría nuestra web con el tamaño de los smarthones y tablets más populares, como por ejemplo las diferentes versiones de iPhone, iPad, Kindle y algunas versiones de teléfonos Android.

El problema de estas herramientas es que tenemos que acceder a una versión publicada de nuestra web (no permiten localhost) y son un poco más lentas para realizar pruebas continuas, por esta razón es mucho más recomendable utilizar alguno de los kits de herramientas para el desarrollador web que existen para los diferentes navegadores.

Esta píldora formativa está extraída del Curso online de Desarrollo web adaptativo con Bootstrap.

¿Sabes qué es el diseño responsive?

Funcionamiento del diseño adaptable

¿Te gusta el contenido de esta píldora de conocimiento?