El término “página” es una metáfora que refiere a un elemento de la era pre-web y sigue de alguna manera determinando la manera en que componemos el diseño en la pantalla: de tal manera como si se tratase de una pieza gráfica para un soporte de papel. Algo que ya deberíamos replantearnos.
Hasta hace unos años, el tamaño de la “hoja” sobre la que armábamos la composición tenía una leve y regular variación dada fundamentalmente por la resolución de su monitor: 640 x 480 – 800 x 600 – 1024 x 768 – 1280 x 800.. etc.
Luego aparecieron las notebooks. Mas tarde los dispositivos móviles, encabezado por teléfonos celular y reproductores mp3 al principio y luego las tablets. Y la variación es mas radical en todos estos dispositivos dado que usan browsers particulares y “portviews” con un tamaño muy diferente según marcas y modelos. Y a todo esto los browsers de televisores HD (resoluciones de 1920 x 1080 pixels) y consolas de juegos… socorro!!
¿Qué hacemos? Armamos una página diferente para cada uno de los dispositivos? ¿No será posible crear un layout lo suficientemente flexible para que este pueda verse elegante en cualquiera de ellos? Justamente, de eso se trata esta el Responsive web design.
El desafío que presenta este nuevo concepto es la adaptabilidad de un layout según el dispositivo con que se accede. Donde por ejemplo, el ancho de columnas, o la cantidad de estas variaría según el ancho de la pantalla o dispositivo.
Andy Hume nos muestra con el responsive es un fenómeno que se da por defecto en los navegadores y ciertamente su mismo blog aplica esta filosofía. Tal como ocurrió otras veces, la moda rescata un concepto o criterio que existía desde hacía mucho tiempo
Suena bien ¿no? pero ¿cómo lo resolvemos?
Grillas líquidas, imágenes flexibles y media querys
A excepción del tercer elemento de este título, a simple vista se entiende de que se trata cada uno de estos conceptos, y son la clave para tener en cuenta a la hora de alcanzar un diseño adaptable. Analicemos paso a paso como aplicar cada una de estas cuestiones.
Grillas líquidas
Se acabaron los valores fijos expresados en píxeles. Claro está que eso no significa que tendremos columnas capaces de extenderse tan infinitamente como sea posible en el dispositivo que utilicemos. En la columna principal y contenedora de todas las columnas internas, donde antes usabamos el:
width:960px;
Ahora habremos de usar la propiedad
max-width:960px;
que le indica el máximo posible de ancho. Si el viewport es menor, la columna se extenderá al 100% de este.
Es dentro de este contenedor principal donde nos manejaremos con valores porcentuales: Suponiendo que estamos armando un layout típico de blog, de dos columnas, y nuestra columna derecha tenía 320px de ancho,ahora debería ser 33.5%. Ese número lo tenemos de:
320/960 = 33.3
Veamos un ejemplo:
Código html:
<body>
<div id="main">
<div class="col1"></div>
<div class="col2"></div>
</div>
</body>
Código css:
#main{
max-width:960px;
border:1px solid #F00;
margin-left:auto;
margin-right:auto;
}
.col1{
width:66.5%;
float:left;
background:#F00;
}
.col2{
width:33.5%;
float:right;
background:#0F0;
}
Aquí podemos ver un ejemplo del uso de grillas líquidas
Imágenes flexibles
El otro gran pilar del Responsive, es la imagen flexible o fluida, que modifica su tamaño según la ventana. La clave de esto básicamente asignarle un tamaño porcentual via css:
image{
width:100%;
}
En el siguiente ejemplo vemos una Bettie Page que modifica su tamaño hasta llegar a los 1000px de ancho máximo. Dado por un contenedor (div) con un
max-width:1000px;
aquí está el ejemplo en cuestión
Media Queries
En css2 se introdujo el @media que nos permitía especificar el tipo de medio al que apuntábamos nuestra hoja de estilos. A partir de css3 aparece una expresión que nos permite chequear si cierta condición se cumple en donde se aplicarán los estilos.
Por ejemplo, si queremos aplicar un layout de una o dos columnas para monitores con un tamaño menor a los 650 pixeles:
@media screen and (max-width: 650px){
// tus estilos aca...
}
Si queremos aplicar otros estilos en cambio, para monitores mas usuales, fundamentalmente notebooks cuyo ancho sea no mayor a 1324:
@media screen and (max-width: 1324px){
// tus estilos aca...
}
Así también si queremos determinar estilos para pantallas que no estén por debajo de los 900px:
@media screen and (min-width: 900px) {
// tus estilos aca...
}
Como así también podemos combinar múltiples condiciones. En el siguiente ejemplo veremos estilos que aplican a pantallas que oscilen entre 600px y 900px:
@media screen and (min-width: 600px) and (max-width: 900px) {
// tus estilos aca...
}
Filtrar estilos según el máximo posible del dispositivo, este ejemplo es para un iphone:
@media screen and (max-device-width: 480px) {
// tus estilos aca...
}
Asignar una hoja de estilos exclusivamente para iphone 4:
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
O en el caso de un ipad filtrar también por su orientación:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
En conclusión…
El responsive web design es una moda que es está aplicando muchísimo, y como tal, no podemos dejar de prestarle atención. Si bien hay grandes y buenos críticos no podemos pasar por alto su utilidad e importancia.
Comments are closed.