Ayer tuve el placer de asistir a un curso de 8 horas impartido por Javier Usobiaga, diseñador y desarrollador front-end que tiene el estudio Swwweet en Barcelona.

El curso trataba sobre las webs responsive. La verdad es que pensaba, antes de asistir al curso, que ya hacía webs responsive, pero me equivocaba. Lo que hacía eran webs que ligeramente se veían correctamente en un iPhone. Pero el Diseño web responsive va más allá. Hoy en dia tenemos que dejar de diseñar para dispositivos concretos, hay tantos que no es posible hacer grandes grupos. Los más popularizados son los iPhone, Galaxy, iPad… Pero qué pasa cuando un smartphone está a caballo entre un smartphone y un tablet (creo que se tendría que acuñar un nuevo término para estos dispositivos tan incómodos de utilizar cómo teléfono, Smarlet), pues que no se ve bien.

Hasta ahora yo usaba PHP para determinar si se trataba de un iPhone, un móvil Android, un iPad… Pero eso limitaba el correcto acceso al resto de móviles no contemplados así cómo tabletas raras.

Ahora tenemos que diseñar por anchos. Se trata de hacer un poco de investigación y diseñar y maquetar por rangos de anchos. Es decir, vamos a hacer un diseño determinado para anchos de menos de 500px, uno para un ancho comprendido entre 500 y 800px, y uno para más de 800px. Eso nos permite llegar a todo tipo de dispositivos y resoluciones, controlando el diseño en cada uno de los casos.

Para hacer esto usaremos dentro de nuestro CSS lo siguiente (esto es un ejemplo, luego cada uno se lo pondrá cómo le venga mejor, hay quién hace dos divisiones hay quién hace más):

@media screen and (max-width : 500px){
     /* Estilos para resoluciones de menos de 500px */
     div{
          width:50%;
          font-size:12px;
     }
}
@media screen and (min-width : 501px){
     /* Estilos para resoluciones de más de 500px */
     div{
          width:25%;
          font-size:14px;
     }
}

Aparte de este manera de organizar los estilos también hay más utilidades para poder hacer una web responsive, como es el caso de utilizar em en tamaños de tipografía en vez de px o pt. El em lo que hace es coger el tamaño de letra de su padre (el contenedor) y lo multiplica por el valor em. Ejemplo:

     div{
          font-size:12px;
     }
     div p{
          font-size:2em;
          /* este p será de 24px de tamaño (12px * 2 = 24px) */
     }
     div p a{
          font-size:2.5em; 
          /* este a será de 60px de tamaño (24px * 2,5 = 60px) */
     }

De esta forma los estilos está encadenados y si todos están en tamaños relativos hasta el body, sólo con cambiar el tamaño inicial se modifica toda las web. Práctico, ¿no?

A partir de aquí hay muchos plugins para que diferentes partes de una web se vuelvan responsive cómo:

  • FitText.js: Ajusta los títulos al ancho que tenga su contenedor.
  • FitVids.js: escala de forma proporcional vídeos en iframe.
  • Respond.js: Para llegar dónde las media queries no llegan (al IE6 hasta el 8)
  • Adaptive Images: Sirve para servir imágenes pequeñas a dispositivos con pantallas pequeñas
  • CSS3 Patterns: Crea fondos de repetición con CSS3, sin imágenes.

Recordad que todo recurso es bueno para hacer una web responsive pero a veces poner demasiados scripts de javascript ralentiza mucho la carga de una web (cosa que no nos interesa en cuestión de móviles navegando en 3G) y además consume más datos (cosa que no les interesa a los usuarios.