Cómo crear un sitio web con Responsive Design

Ya hemos hablado mucho sobre lo que significa crear un sitio con Web Resposive Design, cómo se implementa, lo que se debe hacer y lo que no, pero hasta ahora no hemos hecho un ejemplo práctico sobre la forma de manejar nuestros elementos HTML para poder adecuar nuestro sitio a cualquier resolución y por tanto a cualquier dispositivo móvil o de escritorio.

Entonces, en este tutorial vamos a ver cómo crear un sitio web con Responsive Design, desde 0 e iremos viendo cómo sólo tenemos que pensar en la estructura una sola vez para que después de eso toquemos partes clave del CSS para que de un momento a otro todo esté adaptado a la resolución de la pantalla.

Demo del tutorial

Dificultad: fácil

HTML

Nuestro HTML es bastante sencillo, tenemos un menú, una imagen principal y varios posts con imágenes y texto. Lo más importante aquí es ver que cada sección tiene su propio contenedor, y que las imágenes tienen un ancho de 100% para que se escalen de forma automática y no tengamos que hacer nada en esa parte.

En la parte del head añadimos el meta para que se impida hacer zoom al sitio y se ajuste.

CSS

No se puede hacer un sitio web con responsive design sin antes tener el diseño plantilla, por así decirlo. El diseño plantilla es siempre el de escritorio ya que a partir de ese diseño se elabora el diseño para los demás dispositivos ya que la idea del responsive design es acomodar o quitar partes para que encaje con el diseño.

Para iPad y tabletas modo landscape

Para tabletas vamos a poner todo el sitio al 100% para que el fondo apenas alcance a verse, y ya que nuestro sitio es de 1024px sólo necesitamos hacer eso, y ajustar el margen de los posts para que sigan apareciendo 3 en línea.

Para iPad y tabletas modo portrait

Cuando la tableta este en modo retrato o de pie necesitamos además del ancho del sitio y el margen de los posts necesitamos acomodar la imagen y texto de los posts para que queden en línea y no uno bajo de otro. También alineamos de forma diferente los links para que no se vean con saltos innecesarios.

Para iPhone y smartphones en modo landscape y portrait

Como casi el ancho de estas resoluciones sólo se diferencia por 100px aplicamos el mismo estilo para ambos modos de pantalla.En esta ocasión le quitamos la imagen para que se pueda ver mejor el texto y acomodamos los links para que se alineen correctamente.

Conclusiones

Si fe fijan sólo tenemos que ajustar algunos elementos del sitio para poder hacer que el responsive design cobre vida. Obviamente entre más compleja es la estructura más complicado será controlar todos los elementos, por eso es que si se planea hacer un sitio web que se adapte a diferentes resoluciones siempre es bueno plantear y diseñar con esa idea, de que se pueda escalar y modificar de una forma muy fácil.