comparte el articulo 

Cómo hacer un diseño web adaptable (reponsive design)

Actualizado el 05/10/2013 < > 0 Comentarios

Resumen: El diseño web adaptable o responsive design es una de las más recientes soluciones de diseño existentes, en este artículo analizamos algunas de sus principales características.

El diseño web adaptable o responsive design es un concepto relativamente reciente, el cual se ha venido aplicado con la finalidad de alcanzar una correcta funcionalidad de las interfaces, buscando lograr uniformidad y estandarización al momento en que desplegamos nuestro contenido en distintos dispositivos y presentaciones.

Algunas personas siguen viendo a este tipo de diseño como una tendencia, pero ha tomado tal relevancia que se ha llegado a considerar una solución de diseño, ya que ayuda a resolver los problemas asociados con las diferentes resoluciones y la variedad de dispositivos que se utilizan en la actualidad para desplegar páginas web.

Puede que al principio este concepto suene como algo difícil de aplicar, pero en la práctica resulta bastante sencillo, basta con seguir ciertas reglas básicas para permitir que nuestro diseño sea adaptable al medio del usuario.

Para ayudarle a comenzar a trabajar rápidamente con este tipo de diseño, en este artículo enlistaremos los principales conceptos a considerar para realizar la lógica básica del diseño adaptable. Si tienes conocimiento previo de CSS, el aprendizaje de estos conceptos no se te dificultará.

Uso de viewport en la etiqueta metatag

La mayoría de los navegadores utilizados en dispositivos móviles, escalan las páginas HTML en base a un ancho fijo el cual las ajusta para que quepan en la pantalla que las despliega. Para modificar esto y restablecer el valor que tomará, podemos hacer uso del metatag viewport, el cual indica al navegador que ancho debe tomar y deshabilita la escala inicial.

Este metatag debe ser incluido dentro de la etiqueta “head” y debe ser representado de la siguiente manera:

meta name="viewport" content="width=device-width, initial-scale=1.0">

Con el código que mostramos en el ejemplo, estaríamos utilizando la anchura del dispositivo donde visualizamos la página para establecerlo como el nuevo viewport de nuestro sitio.

Uso de Media Queries

Los media queries son propiedades de CSS3, las cuales básicamente nos dan la capacidad de agregar condiciones a nuestra hoja de estilo, permitiéndonos utilizar una serie de layouts para desplegar de distintas formas un mismo contenido, el cual se irá adaptando al dispositivo que lo despliegue.

Para ver el potencial de media queries, esta web vale más que mil palabras: mediaqueri.es

El truco esta en preveer la manera en que nuestro sitio se desplegará en distintos dispositivos y tamaños de ventana, para ello debemos utilizar una estructura HTML responsiva, que sea flexible y fácil de adaptar a distintos entornos, para que después de esto, baste con agregar las condiciones necesarias a la hoja de estilo, las cuales permitan el uso de distintos layouts.

Por ejemplo si quisiéramos aplicar un layout exclusivo para dispositivos que funcionen con un ancho de ventana menor a 980 píxeles, bastaría con utilizar el siguiente conjunto de reglas:

@media screen and (max-width: 980px){
    #contenedor{
        width: 90%;
    }
    #contenido{
        width: 60%;
    }
    #barra_lateral{
        width:30%;
    }
}

Como se puede apreciar, utilizamos porcentajes para establecer el ancho de cada elemento del layout, esto hace que los contenedores sean más fluidos y adaptables, así no dependemos de un ancho fijo y nos ahorramos el despliegue de barras desplazadoras. Si quisiéramos realizar lo mismo para el ancho de un dispositivo móvil podríamos hacer esto:

@media screen and (max-width: 480px){
    #encabezado{
        height: auto;
    }
    #contenido{
        width: auto;
    }
    #barra_lateral{
        display:none;
    }
}

En esta instrucción quitamos la barra lateral para que no ocupe espacio, asignamos un ancho automático al div de contenido y hacemos que el encabezado de nuestro sitio tenga una altura adaptable.

Así como en este par de ejemplos, puedes utilizar todos los media query que desees, así lograrás aplicar diferentes reglas CSS y estructurar diseños diferentes determinados por el ancho de ventana. Debes tener presente que los media queries pueden estar en la misma hoja de estilo o en un archivo separado, todo dependerá de la manera en que tú quieras organizarte.

Uso de Max-Width y Min-Width

Estas dos propiedades CSS juegan un papel muy relevante en el diseño adaptable, gracias a ellas podemos idear distintas estructuras.

Estas propiedades nos permiten establecer la mínima y máxima anchura que puede recibir un elemento, esto es importante de fijar cuando se manejan porcentajes como valor de las propiedades CSS, de esta manera establecemos un limite de ampliación.

Si por ejemplo quisiéramos un contenedor que ocupe el 90% de la pantalla, pero que en casos donde la ventana sea muy grande su tamaño no exceda de 1024 píxeles, tendríamos que establecer un código como el siguiente:

#contenedor {
    width: 90%;
    max-width: 1024px;
}

De esta manera el contenedor se desplegará a lo ancho del 90% de la pantalla en todos los dispositivos donde esta medida no pase de 1024px, en caso de desplegar la misma página en un dispositivo más grande el div contenedor no sobrepasará la medida que especificamos.

Esta propiedad también se puede aplicar a imágenes, si necesitamos que una imagen se ajuste a las dimensiones del contenedor, podemos hacer algo como esto:

img {
    max-width: 100%;
    height: auto;
}

Uso de medidas relativas

Finalmente debes tener siempre en consideración que las medidas relativas siempre serán mejores que las absolutas al realizar diseños adaptables. El uso de porcentajes como valor de las propiedades hace que resulte más sencillo adaptar elementos a diferentes entornos, es por ello que se recomienda utilizarlos para márgenes, tamaños de fuente y padding.

Con el uso de valores relativos el espacio que se despliega en los elementos puede ser heredado, así no hay necesidad de utilizar medidas distintas para buscar uniformidad, ya que el resto de los elementos tomará como base el porcentaje especificado en el elemento padre.

De igual manera, permite crear estructuras más balanceadas, como en el caso de los paddings. Cuando utilizamos un padding con valor absoluto, si hacemos más chica nuestra ventana y el contenedor va disminuyendo su tamaño, al final veremos un recuadro con un margen muy grande y con un contenedor muy pequeño, esto hará que no luzca bien, en cambio si utilizáramos porcentajes, el margen y el contenedor disminuirán proporcionalmente.

Publicado el 26/07/2012, última actualización 05/10/2013.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras