Responsive Design: Una Técnica De Adaptación Para Cualquier Tamaño De Pantalla

Actualmente el diseño de páginas web tiene infinidad de enfoques y técnicas para su desarrollo, desde interfaces gráficas que permiten al diseñador arrastrar componentes visuales, hasta tecnologías cuyo entorno es netamente para desarrollo en código. De cualquier forma, es muy importante garantizar la correcta visualización de la página web en lo que a diferentes dispositivos respecta, es decir, se debe poder asegurar a los usuarios finales, que la navegación y utilización de una página web sea tan sencilla y funcional en su smartphone o tablet, como lo es su computador de escritorio o portátil. Para cumplir este propósito, existe el concepto de responsive design.

Entonces ¿Qué es exactamente responsive design?

Es una técnica de adaptación de un diseño web para diferentes tamaños de pantallas, es decir, que aplicando dicha técnica es posible ajustar textos, imágenes, formularios, y componentes en general, de tal forma que cuando la página web sea visualizada en dispositivos con pantallas de diversos tamaños, estos elementos se vean correctamente, y que sea posible interactuar con ellos de la misma forma que si estuvieran en una cómoda pantalla de escritorio. El responsive design no crea diferentes copias de una misma página web, en cambio, ajusta los elementos de la misma en tiempo real y en función de cada navegador, para que el usuario pueda visualizarla correctamente.

Figura 1.

Imágen ilustrativa sobre responsive design en varios dispositivos

Nota. Tomado de Responsive Design: an essential element [Imágen], por Enyosolutions

¿Cómo puedo implementar responsive design en mis páginas web?

Como se había mencionado al inicio de este artículo, existen diversas formas de diseñar una página web, los entornos gráficos ciertamente facilitan la labor de implementación de responsive design, debido a que es una característica que normalmente incluyen en sí este tipo de entornos, por ejemplo: Wix Create tiene una opción llamada “switch to mobile view / switch to desktop view”, por lo que, aunque Wix no haga el trabajo de reajustar los componentes de la página para ambas vistas (escritorio y móvil), sí permite cambiar la vista del diseñador, lo que posibilita el ajuste manual del contenido de la página.

Ahora bien, si hablamos de responsive design a nivel de entornos de código fuente, esta técnica debe ser implementada a partir de los archivos de estilos en CSS3. CSS es un lenguaje que permite estilizar y personalizar la apariencia de componentes escritos en HTML en páginas web. Normalmente esto se consigue a partir de atributos de tipo MediaQuery. 

Un MediaQuery es un tipo de atributo propio de CSS3 que permite, entre otras cosas, adaptar el tamaño del contenido de una página web en función del tamaño de la pantalla del usuario. Esta sentencia también puede ser utilizada para cambiar otro tipo de características de la página, como por ejemplo el color de fondos, botones o labels. Usar MediaQuery para ajustar el tamaño de la pantalla, permite incluso que al reducir la ventana del navegador en su versión de escritorio, esta responda y se ajuste en consecuencia.

Figura 2.

Imágen ilustrativa sobre el uso de media queries y su enfoque “Mobile First Desktop Last”

Nota. Tomado de Media queries en CSS ¿cómo funcionan? [Imágen], por Silo Creativo.

Finalmente, existen múltiples herramientas para previsualizar una página web en diferentes dispositivos, estas herramientas simulan los tamaños de las pantallas de varios tipos móviles (Android y iPhone), tablets, ipads y PCs. Un ejemplo es Responsively App, que incluso puede ser usada como una extensión de navegador.

Autor: Luis Fernando Herrera Quintana

Editor: Carlos Pinzón

Código: UCPW-102

Universidad: Universidad Central

Fuentes:

MDN Web Docs. (s.f). Responsive Design. MDN Web Docs. 

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

IEBS. (s.f). Que es el Responsive Design y porque tu web debería tenerlo. Innovation & Entrepreneurship Business School.

https://www.iebschool.com/blog/que-es-responsive-web-design-analitica-usabilidad/

Wix Create. (s.f).Is Wix Responsive. Wix Create.

https://www.wixcreate.com/post/is-wix-responsive

MDN Web Docs. (s.f). Using media queries. MDN Web Docs. 

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Enyosolutions. (s.f).Responsive Design: an essential element. [Imágen]. Enyosolutions

https://www.enyosolutions.com/news/en/responsive-design-an-essential-element/

Silo Creativo. Media Queries en CSS ¿Cómo funcionan?. [Imágen]. Silo Creativo.

https://www.silocreativo.com/media-queries-css/

Alvaroweb. (Fernández, 2015). ¿Qué es Responsive Design?. [Imágen]. Alvaroweb.

https://www.alvaroweb.com/es/blog/que-es-el-responsive-design/