Consejos para Responsive Design.

Uno de los trends en 20212/2013 en el desarollo web es tener diseños adaptables a los distintos dispositivos desde los cuales se accede a internet, sean estos celulares, tablets y esas cosas que sirven para llamar pero que no te caben en la mano (si me refería al Galaxy Note), sin olvidarnos de aquellos usuarios con monitores de >2000 pixeles de ancho.
Atrás quedaron los días en los que si queríamos acceder a un sitio desde un celular, éste nos direccionaba
a un subdominio m, es decir algo como m.ejemplo.com, ahora todo se maneja en un solo sitio con un diseño capaz de amoldarse a la pantalla del usuario, si bien este artículo no es un tutorial de Responsive Design, servirá para que te des una idea y recibas algunos consejos de nuestra experiencia.

Fluido, Adaptable y Responsivo.

Ok, tratemos de aclarar esto, porque dentro de una aplicación web que se adapta al usuario hay más que Responsive Design, existen cosas como Adaptive Design y algunas otras más. 
Para nosotros quienes hacemos la web, esto es Responsive Design (just kidding). 
Responsive Design significa que tu aplicación tiene un diseño flexible y que además es capaz de adaptarse a las necesidades del usuario. Lo primero se logra evitando definir tamaños fijos, como en el siguiente ejemplo.

#main{
   width:960px;
}

Lo anterior, hará que tengamos un horrible scroll horizontal, en cambio si tenemos algo como lo siguiente:

#main{
  width:80%;
}

Tenemos ahora un diseño fluido, aún no responsivo. Esto nos lleva a concluir que un diseño fluido es aquél que modifica los tamaños de los contenedores según el tamaño del dispositivo.
Sé que aún no hemos definido como se debe qué es responsive design, pero estoy seguro que al terminar el artículo no te quedará duda, pasemos a lo siguiente.

Media queries.

Sé que si te gusta CSS, estarás al tanto de lo que un media query es, se tratan de reglas que se especifican para ciertas reglas dentro de CSS. 
Cuando un sitio utiliza media queries podemos decir que tiene un diseño adaptable, cabe mencionar que  un diseño que se adapta, no necesariamente es un fluido, es decir, puede tener tamaños estáticos.
A todo esto, así es como se ve un media query:

@media screen and (max-width: 700px) {
   .curso{
      float:none;
   } 
}

Sólo un ejemplo, en el caso anterior, definimos que los elementos de clase curso, no se flotarán, en caso de que el dispositivo tenga un ancho menor a 700px.

Ahora sí, ¿qué es responsive design?

Con lo mencionado anteriormente, podemos definir qué es responsive design. Bien, se trata de un diseño que además de ser fluido, es capaz de adaptarse a diferentes dispositivos.
Las ventajas del responsive, sobre los otros, es que no trata de que la aplicación se vea igual en todos los dispositivos (como el fluido), más bien trata de que el diseño se adapte a las necesidades del usuario. El diseño adaptable, tiene la desventaja de que al usar tamaños estáticos, suele estar dirigido a dispositivos en específico, es decir, "esta regla aplica para Iphones", por el contrario, un buen diseño responsivo se deberá adaptar correctamente a cualquier dispositivo.

¿Consejos?

• Utiliza valores fluidos no sólo para el ancho y alto de tus elementos, si no también para los paddings, margins y ese tipo de valores que afectan el tamaño final del elemento.
• Define los tamaños de las fuentes en ems, en lugar de pixeles. También es una buena unidad de medida para tamaños de bordes, incluso márgenes y padings. Puedes checar aquí, el valor de un em.
• Deja las media queries al final, este es un consejo personal. Probablemente algunas personas encuentren mejor hacerlo de otra manera.
• Practica, la mejor forma de hacerse un gurú del responsive es practicándolo en distintos sitios.
• Haz mobile first, es decir, piensa primero cómo se verá el diseño en un móvil y así hacia arriba.

Sé que algunas personas que lean el artículo dominará el tema más que yo, así que me gustaría ver sus consejos en los comentarios.

Uriel Hdz.