Responsive Design: estructura adaptable

Tras la introducción al Responsive Design ahora toca conocer lo esencial para crearlos: el meta-tag Viewport, las @media queries y tener en cuentas ciertas cosas más "clásicas", pero que son esenciales (cosas como las que permiten que los borradores y notas de W3C se adapten "casi" perfectamente al ancho de pantalla).

Viewport

Esta meta-etiqueta fue creada en principio por Apple para su móvil predilecto, pero se ha convertido en todo un estándar que es soportado por la mayoría de los dispositivos móviles (smartphones, tablets y gran parte de móviles de gama media y baja).

Su uso es totalmente necesario, ya que sino el navegador establece el ancho con el que prefiere visualizar una página en lugar de usar el ancho del que dispone (es decir, si la pantalla de nuestro móvil tiene 400px y el navegador detecta que lo óptimo sería visualizarla con 700px así lo hará si no usamos esta meta-etiqueta).

Este es un ejemplo de como usarla, es el que yo recomiendo, ya que es la configuración más habitual (hay que añadirlo en el ):

Se pueden usar los siguientes parámetros (separados por comas):

• Width: ancho de la página (se puede establecer en píxeles o como device-width y usará el ancho del que dispone).

• Height: alto de la página, actúa igual que el width.

• Initial-scale: escala o zoom inicial de la página (este y los demás tipos de escala se establecen con valores como 1.0 para no tener zoom o 2.5 para tener un zoom del 2,5 de aumento, por ejemplo).

• Minimum-scale: zoom mínimo que podemos hacer en la página.

• Maximum-scale: zoom máximo que podemos hacer en la página.

• User-scalable: establece si está permitido o no hacer zoom (yes/no).

Parámetros CSS básicos para el Resposnive Design

Para lograr que se adapte nuestra web a los anchos de pantalla debemos de poner en práctica ciertas cosas necesarias:

• La primera, y la más importante es dejar de usar píxeles en todos los sitios y usar porcentajes (por ejemplo: width:60%).

• Que establezcamos el ancho de la página con el 100% no significa que queramos que sea este en una pantalla con alta resolución y para limitar el ancho (o alto si se terciara) debemos de usar el parámetro max-width o si quisiésemos establecer un alto máximo max-height (y para establecer el mínimo sería min-width y min-height, aunque no será demasiado necesario usarlo).

• No usar posiciones absolutas ni fijas (menos cuando hagan falta), para crear una barra lateral donde tendremos un menú, por ejemplo, lo mejor es flotarlo con float:left/right, aunque esto sería lo básico puede que este ejemplo no se ajustase a nuestras necesidades, pero es una técnica muy usada.

• Un diseño sensible deja de serlo en el momento que la imagen de fondo (de tenerla) se repita y no debiera de hacerlo, para eso debemos de escoger una imagen mejor o saber adaptarla (siendo una imagen de fondo lo mejor sería usar @media queries, que explicaré más abajo).

• Las imágenes y vídeos hay que hacer que no sobresalgan de la estructura, sino aparecerá un scroll lateral en los dispositivos móviles que reventará totalmente el diseño (en la próxima parte de la guía os contaré como hacer ambas cosas).

@media queries

Ya hace tiempo hablamos en Genbeta Dev sobre las @media queries (de una forma muy completa) por lo que yo voy a hacer un breve resumen con lo más importante sin entrar en detalles.

La regla @media es un elemento que podemos usar dentro del CSS y podemos configurar de una forma u otra para que su contenido sea visible para según que dispositivo (pantallas, móviles, proyectores... aunque nosotros ya que tenemos un diseño que se adapta a todo usaremos all, ahora lo veréis) o también podemos establecer ciertos parámetros del dispositivo que lo visualiza (como alto, ancho, ratio de la pantalla, orientación...).

En este ejemplo le daremos a una etiqueta div un ancho del 100%, un alto automático y un margen izquierdo de 10 píxeles cuando lo visualicemos con cualquier dispositivo pero que su ancho no supere los 600 píxeles (si tiene un ancho superior la pantalla no se ejecutará la regla CSS):

@media all and (max-width: 600px){
    div{
        width:100%;
        height:auto;
        margin-left:10px;
    }
}

Esta es la forma básica de adaptar detalles específicos según el tamaño de la pantalla, usar el max-width y min-width (puede que las necesidades nos requieran hacer algo más específico, pero con esto nos debería de valer).

Voy a poner un ejemplo que podría ser funcional, que se basa en un menú que hay en una cabecera y consta de cinco links que mandan a las distintas partes de la web y actuará de la siguiente forma los elementos :

a.menu {
    display:inline-block;
    padding:0px 12px;
    margin:0px 8px;
}

@media all and (max-width: 1200px) {
    a.menu {
        display: inline-block;
        padding:0px 6px;
        margin:0px 4px;
    }
}

@media all and (max-width: 840px) {
    a.menu{
        margin:0px;
        padding:0px;
        padding-left:5%;
        display:block;
        float:none;
        text-align:left;
    }
}

@media all and (max-width: 520px) {
    a.menu{
        padding-left:20%;
    }
}

En Genbeta Dev | Introducción al Responsive Design