Diseño responsivo: primeros pasos

El diseño responsivo es la forma de crear una página web de tal forma que se vea adecuadamente en distintos tamaños de pantalla, esto se vuelve cada vez mas importante debido a que una página correctamente diseñada se adaptara a los dispositivos moviles, que son cada mas usados, sin tener que crear una página separada para dispositivos moviles y de escritorio evitandonos así la detección del dispositivo, proceso que tiene mas dificultades y no es 100% exacto.

El primer paso para crear un diseño responsivo es incluir en el head de la página un "meta viewport":
 

<meta name="viewport" content="width=device-width, maximum-scale=1" /> 

esto le indicara al browser que el tamaño de la pagina debe restringirse al tamaño de la pantalla o mas bien al innerWidth del navegador y evita que el mismo haga "zoom" a la pagina con lo cual los moviles mostraran los tamaños de elementos tal cual como los hemos especificado en nuestro css.

El siguiente paso es usar los estilos css adecuados, esto es muy importante y si todavía no usas css es momento de empezar a hacerlo. Entre las cosas que debemos cuidar en el css es usar porcentajes cuando podamos por ejemplo si a un div le damos un ancho de 500px obviamente no cabra en una pantalla típica de teléfono de tamaño de 320px, en cambio un ancho de 100% nunca se saldrá de la pantalla.
El siguiente paso es usar los media queries de css que son una forma de decirle al navegador como mostrarse en diferentes tamaño de pantalla, o mas bien innerWidth.
por ejemplo los siguiente media query:

@media screen {

 body { 

    margin-left: 10px;

 } 

}

 
@media screen and (max-width: 475px) 
{  

    body 

    { 

      margin-left: 0px;

     } 

}

Indica que por defecto el body de la página tenga un espacio vació de 10px a la izquierda de la pagina pero si la ventana tiene un ancho de menos de 475px no exista este espacio con lo que aprovechamos mas el tamaño reducido de la pantalla.
Otro truco es usar diseños verticales es decir que los elementos estén uno sobre el otro, pues si los mismos están uno al lado del otro en pantallas chicas uno de ellos puede acaparar el tamaño de la pantalla sin que se vea el otro.

Bueno solo es un introducción, mas adelante hablaremos con mas detalle de estos temas.