Diseño web adaptativo con media queries (Responsive Web Design)

Responsive design

Estos días he tenido el placer de echar una mano a un grupo de estudiantes de último curso de la Escuela Superior de Diseño Bau, en Barcelona, que necesitaban una ayuda en cuestiones tecnológicas. Les han pedido que hagan muy rápidamente una web cuyo diseño pueda adaptarse a la pantalla de cualquier dispositivo: PC, iPad, tablet, smartphone, etc.

Los siguientes ejemplos son una muestra muy buena de lo que estos estudiantes necesitaban. Por favor, ¡observa cómo el diseño de estos websites se adapta a la pantalla a medida que cambias el ancho de la ventana de tu navegador!:

¡Qué pasada!, ¿verdad? Estos ejemplos están muy bien hechos.

¿Qué es el diseño web adaptativo (Responsive Web Design)?

El problema de la adaptación del diseño a tal o cual dispositivo se ha solucionado tradicionalmente de varias maneras. Nosotros en este artículo vamos a poner ya un pie en el futuro más inmediato dando nuestros primeros pasos de la mano de CSS3 hacia el Responsive Web Design, o diseño web adaptativo.

El diseño adaptativo es una técnica de maquetación web que surge de la necesidad de dar soporte a la infinidad de dispositivos con acceso a Internet que han aparecido en los últimos años. Para profundizar más en este tema puedes leer el libro Responsive Web Design de Ethan Marcotte, el creador de esta nueva tendencia.

En pocas palabras, el diseño web adaptativo consiste en combinar las media queries CSS3 y las unidades de medida relativas CSS de toda la vida, ems y tantos por ciento, para que nuestras páginas web se vean bien en todas las máquinas. Veamos todo esto con un ejemplo sencillo.

¿Y qué son las media queries?

Las media queries son una característica de CSS3 con la que podemos ajustar la presentación del contenido a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí.

Ejemplo sencillo

Vamos a adaptar el diseño de una web de escritorio normal a los smartphones. Por motivos didácticos, este ejemplo no se va a adaptar a todos los dispositivos que hay en el mercado sino que muestra la idea principal para que tú puedas tomarla y hacer las adaptaciones que necesites, o todas las adaptaciones, si lo que quieres conseguir es un resultado de lo más profesional. En este otro post, de css-tricks.com, encontrarás a modo de plantilla todas las resoluciones a las que debes adaptar el diseño de tu web para conseguir el mismo resultado que en Liferay y UX London.

Nosotros, por tanto, como decimos, sólo vamos a contemplar dos versiones: escritorio y smartphone. ¿Y cómo funcionará? Pues muy sencillo, nuestra web se irá adaptando a la ventana del navegador a medida que el usuario cambie la anchura de ésta. Utilizaremos unidades de medida relativas. Cuando la anchura sea menor que 800 píxeles se mostrará automáticamente la versión para dispositivos móviles:

Idea principal de nuestro diseño web adaptativo

Primero hacemos la estructura HTML y luego el CSS de los elementos comunes a todos los diseños: definimos el estilo de los párrafos, los botones de las barras de navegación, etc. Finalmente añadimos al CSS las especificidades de los diseños concretos, en nuestro caso, escritorio y smartphone. Para esto último utilizamos las media queries de CSS3.

El resultado final a nivel de HTML + CSS es pues éste:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Diseño web adaptativo</title>
        <style type="text/css">
 
            body {
              background: #cccccc
            }
 
            nav ul {
                clear: both;
            }
 
            nav ul li {
                list-style-type: none;
                background-color: #cccccc;
                padding: 5px
            }
 
            #wrapper {
              background: #ffffff;
              padding: 10px;
              width: 95%
            } 
 
            article#welcome {
                clear: both;
            }
 
            article#welcome img {
                max-width: 100%
            }
 
        /* Máquinas de escritorio */
 
        @media only screen and (min-width : 800px) {
 
            nav ul {
                height: 40px                    
            }
 
            nav ul li {
                float: left;
                margin-right: 30px;
                width: 125px
            }
 
        }
 
        /* Anchuras inferiores a 800px (smartphones, en nuestro ejemplo) */
 
        @media only screen and (max-width : 800px) {
 
            nav ul {
                height: 165px;
            }
 
            nav ul li {
                text-align: center;
                clear: both;
                margin-bottom: 15px;
                width: 90%
            }  
 
        }
 
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header>
                <hgroup>
                    <h1>Hola mundo</h1>
                </hgroup>
            </header>
            <nav>
                <ul>
                    <li>Inicio</li>
                    <li>Quiénes somos</li>
                    <li>Servicios</li>
                    <li>Contacto</li>
                </ul>
            </nav>
            <article id="welcome">
                <img src="sky.jpg" alt="Sky" />
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </article>
            <footer></footer>
        </div>
    </body>
</html>

Deja un comentario

1. Los campos con un asterisco (*) son obligatorios.
2. Tu dirección de correo electrónico no será publicada.