24
Oct 2012

Entendiendo el diseño
web responsivo – PARTE 2

En la publicación anterior, preguntamos, ¿cómo hacer posible que nuestro sitio web se adapte correctamente a cualquier dispositivo y la experiencia de usuario sea satisfactoria? También vimos el principio básico del diseño responsivo, pero no es suficiente para lograr el objetivo de un sitio multiplataforma. A continuación seguiremos profundizando el tema, de nuevo tratando de explicar de la manera más simple. Si buscamos una palabra para definir una web responsiva, sería: fluidez. Hagamos una analogía y pensemos que nuestra página es una corriente de agua y los diversos navegadores son el caudal de agua que pueden contener.  Lo que hará el agua es adaptarse a los márgenes del caudal, pero quizás no será perfecto y en algún punto el agua no podrá adaptarse a los márgenes y se saldrá de él. No es un hecho, pero puede pasar.

Cada navegador funciona con un motor diferente, el cual puede darnos sorpresas.

Algo similar sucedería con nuestro diseño, a pesar del cuidado que se le de, en algún punto se romperá y algo malo podrá ocurrir. Ahí es donde necesitamos modificar el caudal para que se adapte a la corriente del agua. Es ahí donde está la labor de prueba y error en la construcción del sitio. La manera de lograr fluidez en una página es manejar medidas y posiciones  de elementos en porcentaje. Lo primero a definir en el diseño  son los puntos donde queremos que la estructura de la página cambie, es decir, las dimensiones en donde indicaremos a las media queriesque entraran en acción. Para estos, tomamos como referencia las medidas de los dispositivos, ¿pero cuáles se preguntarán? ¿Cómo seleccionar determinadas medidas si hay tantos? A pesar de haber gran variedad, podemos definir 3 puntos de cambio:

  • Monitores
  • Tabletas / Netbooks
  • Smartphones

Los monitores se consideran a partir de resoluciones de 640px en adelante, las media queries en el post anterior pueden servir como referencia para la definición del estilo. Para tabletas y netbooks (pantallas entre los 7 y 10.1 pulgadas) las dimensiones van desde los 600px hasta 1028px, aunque modelos más recientes comienzan a soportar mayor resolución por las pantallas con retina, mientras que los smartphones rondan entre los 320px y 480px, y algunos casos hasta 560px. Otro dato importante es recordar que tanto tabletas y smartphones pueden contar con dos diferentes modos de visualización, landscape y portrait, lo cual invierte el ancho con el largo de la pantalla.

En ocasiones, las funciones o características de un dispositivo significan trabajo extra para el diseñador.

Con las medidas anteriores se podrían generar reglas de estilo que generalicen las dimensiones de los dispositivos, como en los siguientes ejemplos:

/*******************Monitores******************/
@media screen and ( min-width:800px and max-width: 1024px)
{
//estilos...
}
/******************Tabletas********************/
/* Landscape */
@media (max-device-width: 1024px) and (orientation: landscape)
{
//estilos...
}
/* Portrait */
@media (max-device-width: 768px) and (orientation: portrait)
{
//estilos...
}

/***************Smartphones******************/
/*Landscape*/
@media screen and (max-device-width: 480px) and (orientation:landscape)
{
//estilos...
/* Portrait*/
@media screen and (max-device-width: 320px) and (orientation:portrait)
{
//estilos...
}

Si observan en las reglas anteriores, solo en la que corresponde a monitores, se usa el medio “screen”, así el estilo se aplicará a esas dimensiones solo si la página se despliegue en un monitor y no afecte a tabletas y netbooks que se encuentren dentro del rango. Para que el contenido sea fluido solo queda definir dentro de cada media querie las propiedades de los elementos que requieran cambiar sus dimensiones con porcentajes. Como en este ejemplo:

/* Landscape */
@media (max-device-width: 1024px) and (orientation: landscape) {
body {
position:relative;float:left;width:100%;height:auto;
}
img{widht:100%;height:auto;}
}
/* Portrait */
@media (max-device-width: 768px) and (orientation: portrait) {
body{
position:relative;float:left;width:90%;height:auto;}
img{
width:100%;height:auto;
}
}

Al definir en la etiqueta <img>el ancho al 100% y la altura como automática (height: auto;) indicamos que el ancho de la imagen siempre será relativo al contenedor que ocupa mientras que su altura mantendrá la proporción para que se realice un efecto de escalado. Permitiendo así que la imagen se adapte a la pantalla. De la misma manera se pueden definir con porcentajes, posiciones,márgenes, interlineados, etc., para que así el tamaño del contenido sea proporcional.

Con nuestros puntos de cambio definidos, lo siguiente es realizar el respectivo diseño para cada uno. Teniendo las bases de la definición de estilos, lo que resta es definir el orden de los elementos, para ello hay que considerar la relevancia de la información, que tan fácil será acceder a ciertos medios en los diferentes diseños, optimización del espacio, sustituir elementos,etc.

Mencionaremos algunos puntos en la siguiente publicación y con eso daremos por terminada esta serie sobre el diseño web responsivo. Y nunca se sabe, si las técnicas de diseño web siguen evolucionando rápidamente  quizás pronto estemos hablando de nuevas implementaciones de CSS o HTML que hagan el trabajo mas ligero, o algúna herramienta nueva para ello.

Soy responsivo 😀

Por: Arturo Tadeo / Uncategorized

Comments are closed.

DOTTO