Web Responsive Desing

El Web Responsive Desing, es la respuesta que un sitio web tiene a la hora de mostrarse a cualquier dispositivo, móvil, Tablet, etc.

El diseño web adaptable, es una técnica que mediante el uso de estructuras flexibles y junto con Media Queries especificados en CCS, se logra adaptar un sitio web al entorno del dispositivo.

Con esto se asegura que el contenido de la página web sea legible y agradable tanto si se ingresa en un equipo de escritorio como si se ingresa desde un móvil.

Teniendo claro que la resolución por píxel de un móvil no es la misma que la de un Smart TV o que la de un equipo de escritorio, en la antigüedad se generaban subdominios “.movil” donde el objetivo era mostrar el contenido específicamente para móviles.

Lo que implica el uso de Web Responsive Desing

Que la web debe poseer ese nivel de adaptabilidad de un único dominio, ya sea si el sitio web se visualice desde móvil o desde donde sea.

Se debe programar la web para que sea capaz de detectar las resoluciones en las cuales se va a mostrar la web y así mismo la adapte, por otro lado, es importante resaltar que las cargas graficas que pueden llegar a tener el sitio sean livianas para no afectar la navegación por medio de datos móviles.

Tipos de patrones de Diseño para Web Responsive Desing

Existen varios patrones de diseños preestablecidos que funcionan bien en la mayoría de los dispositivos tales como mostly fluid, column drop, layout shifter, tiny tweaks y off canvas.

Mostly Fuid

Es una cuadricula fluida para pantallas grandes y medianas que ajustan sus márgenes acordes al tamaño.
En las pantallas pequeñas, se reprocesa el contenido principal y las columnas se apilan verticalmente, lo mismo pasa para cuando hay varias columnas se apilan una debajo de la otra.

Layout Shifter

En este caso es el más adaptable, gracias al desplazamiento de contenido que no hace necesario que se reprocese nada, lo que lo hace menos complejo y más adaptable a los diferentes tipos de pantallas sobre todo las móviles.

Tiny Tweaks

Hace cambios muy poco significativos y es ideal únicamente para sitios de una sola columna, sitios web de una sola página y artículos con mucho texto.

Básicamente lo único que cambia es que a partir del cambio del ancho de pagina se cambia la fuente y el relleno.

Off Cavans

Oculta el contenido poco relevante en submenús y solo muestra el contenido principal, por tanto, entre más grande sea la pantalla más contenido se visualiza en la misma.

Para ver mas contenido clic aquí.

Autor: Kevin Bernal.

Editor: Luz Adriana Muñoz

Código: UCP2-3

Fuentes

Medina Zapata, JF._(s/f)._¿Qué es Responsive Web Design?. Recuperado de: https://devcode.la/blog/que-es-responsive-web-design/

Garcia, J._(2013)._ ¿QUÉ ES EL RESPONSIVE DESIGN O DISEÑO SENSIBLE? Recuperado de: https://www.departamentodeinternet.com/que-es-responsive-design-diseno-adaptable-sensible/

LePage, P._(2019)._ Patrones de diseño web adaptables. Recuperado de: https://developers.google.com/web/fundamentals/design-and-ux/responsive/patterns

Mudassar Iqbal ._(2018)._ sitio-web-sensible-creativa-diseño-3374825[Imagen]. Recuperado de: https://pixabay.com/es/illustrations/sitio-web-sensible-creativa-dise%C3%B1o-3374825/

Kevin Bernal

Estudiante de Ing. de Sistemas de la U. central, apasionado por los vídeojuegos, la lectura, la música y sobre todo la tecnología.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *