Responsive Design: puesta en marcha

Ya he contado la mayoría de lo que hay que saber sobre el Responsive Design, pero algunas veces lo difícil es aplicarlo de la forma que necesitamos o mostrar el contenido de una forma eficaz sin perder en diseño ni usabilidad, y en esto es en lo que me voy a centrar, en estructurar correctamente de distintas formas el contenido de una página que se adapta a distintos tipos de pantalla.

Para empezar voy a tratar el tema de como hacer fluir elementos como imágenes, bloques de texto o cualquier cosa en general de la forma más actual (olvidándonos de esos antiguos float y dejando paso a una propiedad que no da mucho que hablar, pero es muy útil: display).

La propiedad display de CSS nos permite establecer como se comportará un elemento respecto a los demás, y destaco estas propiedades de las muchas que hay (también digo que hay algunas propiedades que no se implementan de forma correcta en todos los navegadores, pero estas tres si):

• block: esta es la forma de visualizarse que adoptan las etiquetas <div>, y son bloques que se ponen uno debajo del anterior, y por defecto no puede haber más de un elemento que se visualice de esta forma de lado, siempre están uno debajo del otro.

• inline: esta forma de visualizarse se “adapta al texto” y es propia de etiquetas como <span>, que sirven para cambiar aspectos del texto sin influir el resto del mismo ni a su estructura.

• inline-block: esta última forma de visualizarse un elemento es una mezcla de las dos anteriores, siendo un bloque pero se puede poner en línea a otros iguales (a diferencia de block) y como ejemplo podemos tomar las etiquetas <img> que son bloques, y actúan como tal, pero se pueden poner unas cuantas en línea.

Bloques fluidos

Una de las cosas que se dan mucho en los diseños adaptativos es crear un conjunto de bloques con imágenes y texto que según el tamaño de la ventana se van recolocando, por ejemplo, en la web de la imagen se ven seis bloques, tres encima y tres debajo, pero si lo vemos desde un ancho grande de pantalla se verán en línea.

  Como muchos habréis visto en <strong>GenbetaDev</strong> hemos empezado a coger <a href="https://www.genbetadev.com/workshopw8/brainstorming-para-definir-las-funcionalidades-de-la-appgenbetadev-para-windows-8" target='_blank'>ideas para la #appGenbetaDev</a> (de Windows 8) y he hecho una pequeña <a href="http://lab.xitrus.es/interfaz-app/" target='_blank'>propuesta sobre el diseño</a> que es perfecta para explicaros como hacer que se comporten bloques de forma fluida, en este caso solo contienen texto, pero podrían contener imágenes perfectamente (como en el ejemplo anterior).</p>

Este ejemplo incorpora efectos 3D de CSS3 (por lo que si se os visualiza raro no os preocupéis, lo importante es el flujo de elementos).
Para hacer este ejemplo simplemente necesitamos una etiqueta, que en este caso será <div> y le estableceremos en su CSS el modo de visualización display:inline-block, y cuando detecten los elementos que no cogen en el contenedor se reajustarán sin perder su tamaño.

HTML:

<div id="contenedor">
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
</div>

CSS:

#contenedor .bloque{
    display: inline-block;  /* Es esencial para que se muestren los bloques en línea */
    height:300px;
    width: 300px;
    border:1px solid #333;
    background: #999;
    margin:20px;
}

Podéis probar el código anterior, que es la estructura básica para poder crear estos elementos que se comportan como bloques en línea.

De bloques fluidos a bloques en cascada

Esto es algo más usado aún que el anterior método, consiste en tener los bloques de forma más o menos fluida y en tamaños de pantalla estrechos se colocan estos elementos uno encima del otro, y la mejor forma de hacerlo es usar las @media queries
para establecer que su disposición en pantalla sea inline-block y al estrecharse sea block, podemos ver como ejemplo esta web de libros.

Este ejemplo que os voy a mostrar tiene la misma estructura que el anterior, solo que usamos una @media query para que se convierta en un bloque al tener una pantalla inferior a 800px, como siempre podéis probarlo y disminuir el tamaño de la ventana.

HTML:

<div id="contenedor">
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
    <div class="bloque">[Texto/Imágenes]</div>
</div>

CSS:

@media all and (max-width: 800px){
    #contenedor .bloque{
        display: block !important;  /* Cuando el ancho sea inferior a 800px el elemento será un bloque */
        width: auto !important;
    }
}
#contenedor .bloque{
    display: inline-block;  /* Es esencial para que se muestren los bloques en línea */
    height:300px;
    width: 300px;
    border:1px solid #333;
    background: #999;
    margin:20px;
}

De columnas a cascada

Me atrevería a decir que es el método que se utiliza más a menudo para cambiar la estructura de una web adaptativa, que suelen tener una cabecera y dos o tres columnas (con el menú, el propio contenido, enlaces…), como ejemplo os propongo que probéis como se adapta la estructura de la web de la imagen.

Y voy ha explicar como hacer una estructura adaptable similar a la web anterior, que esta formada por un título con un menú, una cabecera y dos columnas, la primera con una agenda con eventos y la segunda columna con el contenido.

Esto es relativamente fácil, lo que debemos de hacer para que sea totalmente adaptativo es ajustar pequeños cambios según las necesidades, pero para el ejemplo solo van ha haber dos estados, la estructura bien maquetada y la estructura en cascada, como se representa en esta imagen.

HTML:

<div class="superior">[Menú]</div>
<div class="cuerpo">
    <div class="cabecera">[Cabecera]</div>
    <div class="agenda">[Agenda]</div>
    <div class="contenido">[Contenido]</div>
</div>

CSS:

@media all and (max-width: 600px){
    div{
        display: block !important;  /* Cuando el ancho sea inferior a 600px el elemento será un bloque */
        width: 100% !important;
        max-width: 100% !important;
        margin: auto !important;
        position: static !important;
        float: none !important;
    }
}
.superior{
    background: #F99;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 30px;
}
.cuerpo{    /* Este es el delimitador para que la página no sea excesivamente grande */
    max-width: 1000px;
    margin:auto;
}
.cabecera{
    background: #9F9;
    margin-top: 30px;
    height: 200px;
}
.agenda{
    background: #99F;
    float: left;    /* flotamos el elemento a la izquierda */
    width: 35%;
    height: 600px;
}
.contenido{
    background: #AAA;
    width: 65%;
    margin-left: 35%;
    height: 900px;
}

Podéis verlo en funcionamiento, a partir de 600px todo el contenido maquetado pasa a estar en cascada, perdiendo los márgenes, los anchos y los floats.

Resumen

Un Responsive Design se puede hacer de muchas formas, es cuestión de conseguir solucionar los problemas que se presente visualizar la web en un dispositivo móvil, por este motivo os he mostrado estas formas distintas que os pueden inspirar a la hora de crear vuestros propios diseños adaptativos, aunque podría haber mostrado otra, así que si queréis compartir webs que tengan diseños que se adapten y sean interesantes no lo dudéis.

En Genbeta Dev | Introducción al Responsive Design