Ok, entonces sabes qué es el diseño Responsive, pero no logras entender cómo funciona. Aquí te lo explicamos para que puedas sacar el mejor provecho de tu diseño web.

 

El diseño Responsive se refiere al concepto de diseño web donde el diseño de un sitio se modifica automáticamente para adaptarse a la pantalla del dispositivo a través de la cual el usuario acceda al sitio. Así uno puede tener la misma experiencia en un sitio web independiente de si uno ingresa al sitio desde su Smartphone, tablet, portátil o computador de escritorio.

Sin embargo esto no significa que haya un diseño distinto para cada pantalla o dispositivo. Sino el diseño Responsive significa que el mismo dominio, el mismo contenido y la misma sintaxis responden a las distintas pantallas para proporcionar la mejor experiencia del usuario posible por cada dispositivo.

 

Las técnicas de diseño Responsive

 

Las dos técnicas principales que se usan para lograr el diseño Responsive son las cuadrículas flexibles y las Media Queries de CSS versión 3.

 

Las cuadrículas flexibles

 

A diferencia del diseño no Responsive, que usa un sistema de cuadrículas fijas que determinan el tamaño de los varios elementos en base a pixeles, el diseño Responsive usa un sistema de cuadrículas flexibles. Estas determinan el tamaño de los elementos de una página web (los botones, la barra lateral, los menús, el texto y las imágenes, etc.) en base a proporciones. Por ejemplo, si tienes tres columnas, no indicarías la amplitud exacta de cada columna, sino cuán amplia debe ser en relación con las otras columnas: ej. Columna 1 debe ocupar la mitad de la página; columna 2 debe ocupar el 30%; y columna 3 el 20%.

 

Diseño Responsive CSS HTML

CSS y las Media Queries

 

CSS (Hoja de estilos en cascada), es un lenguaje de diseño que describe el formato y apariencia de una página web escrito en HTML. CSS hace referencia a un archivo externo que indica cómo los distintos elementos de una página web deberían ser presentados.

Las Media Queries permiten que una página web determine el tamaño y la resolución de pantalla del dispositivo desde lo cual estás viendo el sitio. Con esta información la página puede aplicar el perfil de CSS correspondiente, adaptando el diseño de la página (mediante las cuadrículas flexibles) a las necesidades del dispositivo, y como tal del usuario.

 

Una combinación Responsive

 

Al combinar las dos técnicas, el resultado es un sitio que “responde” a los visitantes, entregándoles la mejor versión de tu sitio web, en proporción a la pantalla.

Por ejemplo, si accedes a una página web responsive desde tu PC, puede que el sitio aparezca en tres columnas, pero si accedes a la misma página desde una tablet, la página se adaptará automáticamente para verse en dos columnas, porque así es más fácil leer el contenido. Desde un Smartphone, puede que el mismo contenido aparezca en una pura columna. Las imágenes se reescalarán en vez de distorsionar el diseño de la página o quedar fuera del plano.

Recuerda que todos los planes de diseño web de Hostname incorporan el diseño responsive para que tus usuarios tengan la misma experiencia independiente de su dispositivo.

 

Diseño Responsive