En el principio la web era desordenada y vacía — Principios de Responsive design.

Tres elementos para iniciarse como un maestro del diseño responsivo

Crear un sitio web responsivo no es una labor que requiera un gran despliegue de ingeniería o programación, por su puesto que en muchos casos se puede acudir a frameworks que de una u otra forma facilitan el desarrollo de sitios web responsivos, pero en otros casos es necesario empezar desde cero ya sea por obtener un mayor nivel de conocimiento o porque sea evidentemente necesario personalizar nuestros desarrollos según nuestros antojos y caprichos.

Para comenzar en la materia del diseño adaptable o responsivo se deben usar tres elementos imprescindibles de HTML5 y CSS3.

1. Usar el metaTag viewport de la siguiente manera:

<meta name=”viewport” content=“width=device-width”>

Al especificar que el valor del content será width=device-width le estamos diciendo al navegador que el tamaño disponible para renderizar los componentes gráficos será del tamaño de la pantalla del dispositivo, de lo contrario muchos navegadores asumirán que el tamaño es el de una pantalla estándar de unos 960px de ancho.

Con esta simple etiqueta ya tenemos asegurado gran parte para que nuestro sitio web sea responsivo, asegurando que nuestro contenido se adaptará al tamaño del dispositivo que cargará la pagina web.

2. Reajustar las imágenes según el tamaño del dispositivo.

Como gran parte de los sitios web se componen en su gran mayoría de imágenes, debemos asegurarnos de que los elementos gráficos se adapten de igual manera a los diferentes dispositivos. La manera de hacerlo es usando la siguiente composición de css.

img{max-width: 100%;}

Al usar max-width le estamos diciendo al navegador que las imágenes solo pueden ser tan grandes como la pantalla lo permita, esto es necesario ya que si tienes una imagen de tal vez unos 1200px pero la pantalla o el viewport es de tan solo 480px no dejara que se desborde la imagen.

3. Media Queries

Con esto ya se tiene una versión minificada de una web responsiva, pero el hecho de que el contenido no se desborde o este se vea de manera proporcional y escalada en dispositivos con diferentes características, no quiere decir que el trabajo este culminado, digamos que aquí es donde el ingenio y la creatividad deben aparecer, este es el punto de empezar a jugar con diferentes pantallas, personalizando el contenido y el diseño de acuerdo a diferentes criterios como el tamaño de la pantalla, el aspect ratio, el tipo de medio(pantalla, impresora, proyector, etc).

Para empezar a jugar con todos estos elementos y tener una aplicacion web realmente responsiva es necesario hacer uso de los elementos media queries.

Los media queries son condicionales con las que podemos activar diferentes comportamientos con los que se logra que el sitio web se renderize de manera especifica bajo ciertos criterios.

Por ejemplo, si el tamaño de la pantalla es mayor de 300px la letra aumente x pixeles, o si la pantalla es mas pequeña de un tamaño especificado elimine de ciertos componentes gráficos.

A continuación un ejemplo de media queries:

@media screen and (min-width: 900px){

.IntroText {

margin-left: auto;

margin-right: auto;

width: 60rem;

font-size: 1.5rem;

}

}

Para hacer uso de los media queries se debe indicar haciendo uso del selector @media , posteriormente indicar a que tipo de medio o media(screen, print, protector etc) se le aplicará el estilo, como son condicionales podemos especificar diferentes filtros concatenándolos con “and” y entre paréntesis agregar la condición de aplicabilidad que se debe cumplir, y posteriormente fijar el bloque css que se aplicara si la condición se cumple.

En nuestro ejemplo al renderizar la pantalla el texto se hace mas grande solo cuando el tamaño es superior a 900px, para las pantallas de menor tamaño el texto permanece igual, aplicando los estilos por defecto especificados en nuestro archivo .css.

Para el caso de nuestro dispositivo mobil solo justifica el texto, ver código fuente de ejemplo.

En el ejemplo, cuando la pantalla es mayor de 900px el tamaño de la letra se reajusta, aumentando de tamaño.

Eso es todo amigos. Código de ejemplo.