18
Oct 2012

Entendiendo el diseño
web responsivo – PARTE 1

Anteriormente habíamos mencionado el motivo que originó las técnicas del diseño web responsivo, ahora toca el turno de hablar sobre cómo funcionan estas técnicas a detalle. Lo haremos lo más digerible posible para no perdernos en el texto. Si queda alguna duda ó esta interesado en más detalles acerca de cierta parte, agradecemos un comentario al respecto.

 

El diseño responsivo de un sitio consiste principalmente en la habilidad del navegador de detectar el tamaño del dispositivo en el cual es desplegado y adaptar el contenido a mostrar dependiendo de ello, pero, ¿cómo se logra esto? Con CSS, mas específicamente con media queries. Si se preguntan qué es eso, continuemos.

 

CSS es una herramienta que nos permite definir los estilos de los elementos que conforman un sitio web mediante la definición de reglas, estas pueden estar dentro del archivo HTML (inline) o puede estar referenciados desde un archivo externo “.css”, de esta manera podemos manipular forma, tamaño, color, posición y transición. La estructura básica de una declaración en CSS es como sigue:

El selector es el identificador del elemento sobre el cual se aplicará el estilo, este se refiere a etiquetas, identificadores y clases en los archivos HTML. La propiedad es lo que queremos cambiar del selector, su tamaño, color, posición, etc. El valor, como su nombre lo indica, es el valor que se le asignará a la propiedad, dependiendo si la propiedad hace referencia a estados, colores o posicionamiento los valores que aceptan son numéricos o caracteres. Dentro de una regla podemos definir varias propiedades a la vez. Por ejemplo, si queremos que el texto de un párrafo específico en nuestra página tenga un tamaño y color de letra especifico se haría lo siguiente:

/*HTML*/
<p id="diferente">Este es un párrafo diferente</p>
/*CSS*/

#diferente{font-size:14px;color:blue;}

El resultado sería el siguiente:

Este es un párrafo diferente

Aquí p es una etiqueta HTML que indica que el texto encerrado dentro de ella pertenece a un párrafo, el navegador automáticamente lo interpretará como tal. Luego id=”diferente” es el identificador que asignamos a la etiqueta, que a la vez en CSS se vuelve nuestro selector (#diferente) en la regla de estilo, donde indicamos que el texto del párrafo tendrá un tamaño de 14 puntos (font-size:14px) y será de color azul (color:blue). De esta forma podemos agregar diferentes propiedades separadas por un punto y coma (;) y cambiar la apariencia de los elementos que componen una página web .

Ahora bien, las media queries por otra parte, son declaraciones que identifican el medio en el que se despliega el archivo HTML. Su estructura es similar a la siguiente:

/*CSS*/
@media screen and (max-width: 640px)
{
// Definición de estilos
}

Aquí es donde la magia sucede, @media indica sobre que tipo de dispositivo se va a aplicar el estilo a definir, en este caso indicamos que se aplicará en monitores de escritorio (screen), aunque actualmente no es muy necesario indicar el tipo de dispositivo. La ultima declaración max-width:640px, indica que el estilo se aplicará en pantallas con un máximo de 640 pixeles de ancho, aclarando que no necesariamente se refiere al tamaño de la pantalla físicamente, sino el espacio que ocupa en esta el navegador que despliega el sitio; en cuanto sobrepase el valor, CSS sabe que ya no debe aplicarlo.

Esto era lo que sucedía con los ejemplos en el post anterior, dependiendo del ancho del navegador cambiaba el estilo a aplicar en los elementos del sitio. Obviamente que se trataba de reglas diferentes, ya que @media permite definir el valor mínimo y máximo del ancho del medio en el que se aplicará, por ejemplo:

/*CSS*/
@media screen and (min-width: 640px and max-width: 900px)
{
body{background-image: url (fondo_mediano.jpg)}
}
@media screen and (min-width: 900px and max-width: 1024px)
{
body{background-image: url (fondo_grande.jpg)}
}

En la primera media query indicamos que mientras el tamaño de la pantalla se encuentre entro 640px y 900px la imagen de fondo a utilizar sera una versión de tamaño mediano, mientras que la segunda indica que en pantallas con dimensiones entre los 900px y 1024px se usará de fondo una imagen más grande. Técnica útil para cuidar la resolución de las imagenes y el uso de ancho de banda.

Básicamente ese es el modo en que funciona el diseño responsivo, conocer el tamaño de las pantallas de diferentes dispositivos, y con base a eso, diseñar el sitio web. Esto nos permite no modificar contenido directamente en HTML y solo manipularlo mediante archivos CSS externos. No suena como un gran reto, ¿o sí? La realidad es que es más complicado de lo que aparenta, ya que no todas las personas utilizan la misma resolución en monitores y no todos los dispositivos móviles tienen pantallas de iguales dimensiones. Agreguemos a ello que los navegadores que existen actualmente se comportan de manera diferente ante algunas propiedades y se necesitan prefijos al definir ciertas reglas, definir las reglas con determinados valores, usar archivos JavaScript para que soporten ciertos estilos,  tamaños de imagenes y su visualización,consumo de ancho de banda del dispositivo, entro muchos otros detalles.

Resumiendo, el verdadero reto del diseño responsivo es que sea multiplataforma, es decir, independientemente de las características físicas del medio y del software que este use (navegador) la experiencia y usabilidad del diseño sea agradable al usuario. ¿Cómo logramos eso? Dejémoslo para la siguiente parte de este tema, mientras escriban sus dudas y opiniones para tomarlas en cuenta en siguientes publicaciones.

 

Por: Arturo Tadeo / Diseño web

2 Comentarios a Entendiendo el diseño
web responsivo – PARTE 1

  1. Pingback: Entendiendo el diseño web responsivo – PARTE 3 | Front:Blog

  2. Pingback: Entendiendo el diseño web responsivo – PARTE 2 | Front:Blog

DOTTO