Responsive Design: visualización sin ataduras

14 octubre, 2020 Nicolas Esteban Echeverri Sanchez 662 Views 1 Comment CSS, JavaScript, Página web, Páginas web, Responsive, Web desing

Durante los últimos años hemos sido testigos del crecimiento desenfrenado de la tecnología y cómo son cada vez más los nuevos dispositivos que cuentan con la capacidad de conectarse a internet, desde los pequeños celulares Smartphone y Tabletas hasta los televisores inteligentes; por lo que es necesario ofrecer una experiencia cómoda de visualización para cada dispositivo cuando se navega por internet. Esto es posible gracias a un concepto denominado Responsive Design.

¿Qué es Responsive Design?

Para poder entrar en materia es necesario tener primero una idea inicial. Con el concepto fundado por fundada por Ethan Marcotte, el Responsive Design (RWD) o conocido también como diseño web adaptable es una técnica de diseño web que le da a la página una versatilidad y fluidez que permiten adaptarse a la resolución que posea la pantalla del usuario, dando una comodidad agregada independientemente del dispositivo en el que se conecte, ya sea portátil o un ordenador de escritorio(Catalá,2013).

Figura 1: Ejemplo de un diseño responsive para la página 3200 Tigres.

Según (Harb,2011) algunos de los objetivos que busca el diseño web adaptable pueden resumirse concretamente en estos puntos:

Adaptar el diseño para que éste se adapte a los diferentes tamaños de las pantallas.
Redimensionar imágenes sin perder la resolución de estas.
Hacer uso de imágenes con bajo ancho de banda para dispositivos móviles.
Simplificar o esconder elementos innecesarios durante el uso de dispositivos móviles.
Proporcionar botones y enlaces amigables durante el uso de dispositivos móviles.

Técnicas y herramientas para hacer diseños adaptables

El Responsive design cuenta con diferentes técnicas y herramientas que se pueden emplear para crear un diseño adaptable. Hay que aclarar primero un concepto previo y es que todas las pantallas de la actualidad se basan en pixeles para generar una imagen en el monitor; pero esto cambia un poco cuando hablamos de Responsive design. Es necesario dejar de lado el concepto de pixeles a un lado para empezar a hablar de porcentaje y proporción.

Las 3 herramientas más usadas para el diseño web adaptable son la declaración de Viewport, hojas de estilos en cascada (CSS) y JavaScript. Para (Baquero,2016)

Viewport

Es una etiqueta que permite escalar la página correctamente en los dispositivos móviles como celulares o tablets, realizando una emulación en pixeles de una pantalla completa sobre un área inferior al ancho que tiene el dispositivo.

Hojas de estilos en cascada (CSS)

Es un lenguaje de diseño gráfico que está enfocado en el diseño directo de la página web donde el diseñador puede establecer con su libertad creativa el color, el ancho, la transparencia o elementos que estén en la página como imágenes, texto, menús o botones.

JavaScript

Se puede elegir el comportamiento de los elementos. Posee dentro de su codificación un evento conocido como window.onresize, que es el que posibilita la ejecución de un código cuando la ventana del navegador cambia sus dimensiones.

Con las herramientas anteriores, se pueden aplicar diferentes técnicas diseñadas para el diseño Responsive. Las más conocidas son Flexible Grid, Fluid Images y Media Queries.

Tras ajustar el layout con la técnica anterior, es necesario ajustar las imágenes a través del uso de Fluid Images. Dentro de esta existe un método embebido conocido como CSS Cropping, cuya labor es lograr que las imágenes se redimensionen

de manera dinámica, utilizando los atributos width y height en una hoja de estilos CSS. Las imágenes deben ser colocadas dentro de un elemento padre, con la particularidad de que sea un elemento flotante, para que se pueda establecer cierto ancho que permita generar el impacto requerido.

Finalmente se encuentra el uso de Media Queries, una parte esencial para el desarrollo web adaptable. Es este último quien permite obtener el tamaño de la pantalla del usuario para usarlo dentro de un formato CSS. Gracias a esto, también se pueden desarrollar múltiples layouts a través de documentos HTML y diferentes hojas de estilo que se pueden basar en características del navegador como el tamaño, la resolución o los colores que maneja.

Queda claro que el Responsive Design es un concepto que ofrece una gran cantidad de posibilidades a los diseñadores web, permitiendo que los sitios que se desarrollen bajo esta filosofía tengan un amplio alcance para el público y que su contenido pueda ser presentado con excelente calidad y una gran comodidad para la navegación de los sitios regidos bajo el diseño adaptable.

Autor: Nicolás Esteban Echeverri Sánchez

Editor: Carlos Pinzón

Código:UCRV-8

Universidad: Universidad Central