sudo: Jack of all trades, master of some

Diseño Web Responsivo, tan simple como es

7 comentarios

Después de no publicar nada en un tiempo bastante largo –echemosle esta vez la culpa a la aparición de otros proyectos de trabajo y personales– quisiera compartir con ustedes uno de los temas bien interesantes del mundo del diseño web actual y uno de los que más me inspira en estos momentos: Responsive Web Design (Diseño Web Responsivo).

Como dice una querida vecina:

En internet está todo.

Aunque nunca haya usado un navegador ni tenga la más mínima idea de lo que es y su frase parezca un tanto ingenua, en parte, tiene razón. Como la gente lo quiere saber “todo” y en todo momento, caminando, en la guagua o en la situación más extraña que se haya visto, más dispositivos móviles y de otra índole se comercializan y se conectan a internet casi que ininterrumpidamente.

El boom de dispositivos no tradicionales (desktops) conectados a internet, la variedad, así como sus características: tamaño, sistema operativo, entre otros, sacudieron a la mayoría de los desarrolladores y diseñadores web en su momento. Si antes de este boom había que escribir código para que se interpretara y se mostrara lo más similar posible por varios navegadores (actualmente la tendencia continúa así, IE6 no, por favor), y los desarrolladores tenían que probar sus productos en diferentes sistemas operativos y navegadores, ahora es necesario hacerlo además en varios dispositivos, incluyendo móviles y de estos últimos hay una jungla y son ampliamente utilizados.

Varias tecnologías web han mejorado y evolucionado para satisfacer la demanda de los propios desarrolladores ya sea para el desktop o plataformas diferentes (smartphones, tablets, consolas de videojuegos, TVs y quién sabe qué más), sobre todo HTML5 y CSS3, –aún borradores en continuo cambio por el consorcio W3C— poco a poco van desplazando sus anteriores versiones y no hay duda que han “calmado” a muchos de los que pedían mejoras para poder sobrevivir en uno de los medios que más rápido cambia –esto de las tecnologías web es como desarrollar pensando en lo que pueda pasar la semana que viene–.

El término Responsive Web Design, acuñado por Ethan Marcotte (cada vez que veo algo escrito por él lo quiero leer), a diferencia de cómo muchos piensan, no son más que técnicas para distribuir, adaptar y mostrar en diferentes dispositivos el contenido web, sin dañar la experiencia del usuario. Ethan, en su artículo Responsive Web Design que sigue siendo una referencia aún con la constante evolución y aparición de otras técnicas y soluciones, propone tres conceptos claves: fluid grid, fluid images y media queries.

Fluid grid

Tradicionalmente los sitios web se han diseñado dándole proporciones fijas a sus elementos, sin embargo esta solución en la actualidad no es conveniente en parte, por las razones antes expresadas.

Básicamente el principio consiste en obtener las proporciones a partir de su contenedor: tamaño deseado / contenedor = proporción

Para una mejor explicación, pensemos en un layout muy común –a muchos les parece un cliché hoy en día– con un wrapper de 960px de ancho (contenedor), un sidebar de 320px (tamaño deseado), una sección de contenido de 640px (tamaño deseado) además de los omnipresentes header y footer ambos con un ancho de 100%, esto se verá perfecto en un monitor con una resolución de 1024px de ancho, pero a medida que el tamaño de la pantalla vaya disminuyendo o aumentando, el layout comenzará a quebrarse y fallar.

La solución siguiendo la fórmula anterior:

Sidebar: 320px / 960px = 0.3333 = 33.33%
Contenido: 640px / 960px = 0.6666 = 66.66%

También pudieramos verlo como: el sidebar ocupará la tercera parte (1/3) del contenedor y el contenido, las dos terceras partes (2/3).

Especificando el ancho de estas secciones en porcentaje se asegura que se mantengan las proporciones en resoluciones diferentes, claro está que en resoluciones muy pequeñas o muy grandes es necesario hacer otra cosa (ver más adelante “Media queries”).

Fluid images

La idea básica de este concepto es que las imágenes puedan disminuir su tamaño dentro de un fluid grid sin afectarlo. Con una simple línea de código CSS resolvemos el problema:

img {
  max-width: 100%;
}

Simple, ¿no?

Por ejemplo, si una imagen de 640px de ancho y su contenedor es de 320px, esta disminuirá su ancho hasta justamente 320px, el alto se calculará automáticamente manteniendo las proporciones originales.

Nota: no confundir max-width: 100%; con width: 100%;

Media queries

Para ser breve e ilustrar este concepto, seguimos la idea del contenedor de 960px. Es casi imposible ver el contenido de 960px en una pantalla de 320px –como muchos dispositivos móviles la tienen–. En cierto punto el fluid grid comenzará a quebrarse mostrándose el contenido de una manera indeseada, además de que el espacio no se utiliza óptimamente. El punto en el que el contenido no se muestra correctamente se conoce como breakpoint.

El siguiente código es el markup del layout:

<html>
  <head>
    <title>título</title>
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1>encabezado</h1>
      </header>
      <aside>
        <nav>
           <ul>
             <li><a href="#"link1</a></li>
             <li><a href="#"link2</a></li>
             <li><a href="#"link3</a></li>
           </ul> 
        </nav>
      </aside>
      <div>
        <p>contenido</p>
      </div>
      <footer>
        <p>pie</p>
      </footer>
    </div>
  </body>
</html>

Y el siguiente fragmento de código CSS que nos interesa:

#wrapper {
  margin: 0 auto;
  width: 93.75%; /* 960px / 1024px */
}

.sidebar {
  float: left;
  width: 33.33%; /* 320px / 960px */
}

.content {
  clear: both;
  float: left;
  width: 66.66%; /* 640px / 960px */
}

Así las secciones content y sidebar se muestran una a continuación de la otra dentro del wrapper. Pero si queremos que este layout se vea de una manera más práctica en una pantalla de 320px de ancho debemos utilizar el siguiente código CSS:

@media screen and (max-device-width: 320px) {
  .content, 
  .sidebar,
  .wrapper {
    float: none;
    width: auto;
  }
}

En español plano: cuando la ventana del navegador alcanza el ancho de 320px las secciones content y sidebar se verán entonces una debajo de la otra y de esta manera se hace un uso óptimo del espacio y la resolución.

Conclusiones

Simple como es: para lograr un buen diseño responsivo, necesitamos un buen fluid grid, detectar los breakpoints, tener imágenes fuidas y utilizar media queries correctas para que nuestro producto se adapte y convierta en responsivo. Distribuir el contenido de modo que se haga un uso óptimo del espacio y que los elementos estén dispuestos de manera coherente y limpia, aumenta además la calidad de nuestro diseño y por ende, el contenido se hace más accesible. Pensar para mañana, de todos modos eventualmente habrán más dispositivos conectados a internet y no precisamente los convencionales desktops, si no es un hecho ya.

Sí, sé que muchos dirán: “para qué perder tanto tiempo en esto si existe –entre el nombre del framework aquí–” cierto, pero los que se aventuren a hacer las cosas por sí mismos obtendrán sus recompensas y aunque parezca raro, con copiar el layout de un sitio anteriormente hecho y tomarlo como base para uno nuevo, ya estamos usando un framework.

Referencias

Comentarios desactivados
  1. Excelente artículo! Kudos!
    Lecturas recomendadas: http://www.nngroup.com/topic/web-usability/

    1. @Ozkar

      Gracias (leyendo la sugerencia…)

  2. Dariel Vicedo 5 años atrás

    Excelente. Trabajo con Symfony2.
    Eso lo logramos con Bootstrap no?

    1. @Dariel Vicedo

      Negativo, eso lo logramos con CSS y HTML. No sé por qué me parece que Boostrap es para muchos la solución trivial. Boostrap hace uso de estas mismas técnicas.

      1. @oneohthree

        O para muchos también Bootstrap es LA solución(me incluyo). Aunque tenemos otras alternativas muy buenas como PureCSS o Poole/Hyde. Bootstrap digamos que es la solución integral(vamos, que tiene muchos componentes) y te ahorra código JS(qué para mí es mas que suficiente, porque le tengo tirria a JS).Y como BS te trae un CSS precocido pues tanto mejor!
        My last humble achievement: http://codeshard.github.io/datatables-and-django-finally-with-ajax.html

        1. @Ozkar

          Para mí no es un secreto que Boostrap es un producto que tiene DE TODO (no niego el concepto de DRY), pero como framework al fin abarca muchos aspectos, un poco bloated para mi gusto, no es menos cierto que usándolo se edifica una webapp en menos de lo que canta un gallo, pero para mí es overkill en la mayoría de las cosas que hago. También está la variante de tomar lo que está hecho en BS y adaptarlo a tus necesidades.

          About your last humble achievement: I wish I could program in –enter program language here–.

  3. Excelentisimo articulo…
    Bootstrap simplemente ahorra trabajo pero no necesariamente es la solucion. En mi caso, la mayoria de las veces uso el esqueleto de Bootstrap para adaptarlo a mis necesidades, o las necesidades del proyecto en cuestion.
    Estuve revisando PureCSS (cortesia de @Ozkar) y muy bueno por cierto.