25 Feb 2015

Diseño responsivo vs elástico

Diseño responsivo vs elástico

La forma de navegar en la web se está expendiendo a los diferentes dispositivos con que contamos, por lo que al aplicar un diseño a nuestro sitio hay que tener en cuenta que este sea agradable a cada pantalla que lo visite.

Existen dos métodos de diseño web que resuelven la adaptabilidad según el tamaño de la pantalla.

El primero de ellos es el diseño elástico, que básicamente tiene la idea de dejar de utilizar medidas duras (por ejemplo, 100px), para sustituirlas por medidas relativas (10%, 75%). Esto hace los elementos del sitio se expandan o contraigan según el tamaño disponible en la pantalla.

Y aunque es una técnica que en efecto, permite mantener el diseño de nuestro sitio sin importar la pantalla en que lo veamos, en los dispositivos móviles pequeños (cómo los smartphones) puede presentar algunos conflictos al mostrar un tamaño de letra ya sea demasiado grande o chico con respecto al contenido general, haciendo que la lectura no resulte tan placentera.

Por otro lado el diseño responsivo se basa precisamente en la idea de responder con un comportamiento adecuado al tamaño de pantalla que realiza la visita.

Al resultar adaptable al dispositivo, se organizan los elementos visuales del sitio en distintas posiciones según el tamaño de la pantalla que se dispone.

Por ejemplo, este sitio está basado en el modelo responsivo, por lo que al visitarlo desde una PC o Tableta, la barra derecha dónde se muestra el menú de navegación o la imagen del titulo, son visibles, pero al navegarlo desde un smartphone, estás se ocultan para que el contenido tome una mayor importancia.

El reordenamiento de estos elementos se consigue mediante media-queries y es una técnica que está permitiendo cambiar el paradigma del diseño de sitios web, orientándolo a centrar el diseño y funcionamiento principal en dispositivos móviles (principalmente el smartphone) y de ahí adaptarle a pantallas de mayor dimensión, y es que, ¿en qué dispositivo navegas la mayor parte de las veces?.

Artículos relacionados