Desarrollo Web: Responsive Design

Hoy en día proliferan todo tipo de dispositivos con distintos tipos de pantalla y conexión a Internet. Esta situación ha llevado a que el diseño web tenga que adaptarse para poder ser sensible a las diferentes resoluciones.

La respuesta a esta situación viene de la mano de HTML5 y de CSS3, se engloba bajo el nombre de "Resposive Design", es decir, diseño sensible.

La primera parte del trabajo debe venir por parte del diseñador, hay que olvidarse de los diseños "pixel perfect" salvo que te den una versión para todas y cada una de las resoluciones posibles. El responsive design se basa más en posicionar los elementos en pantalla en base a porcentajes.

El primer elemento clave para la maquetación de este tipo de diseño es este meta:

<
meta name="viewport" content="width=device-width, initial-scale=1.0">


Gracias a él el contenido de nuestra web se ajusta al 100% del ancho disponible del dispositivo e impide que se haga un zoom inicial.

En cuanto al CSS podemos determinar con condiciones basadas en la resolución del dispositivo que estilos vamos a utilizar. Os pongo un ejemplo:


@media 
screen and (min-width320px) and (max-width640px) {
 /*Todo lo que añadamos aquí se utilizará solo en resoluciones iguales o mayores a 320 píxeles y menores que 640 píxeles de ancho*/
}


Cómo veis no hace falta saber programar en Javascript para acercarse al responsive design.

Conforme pueda iré haciendo más tutoriales sobre este apasionante tema.

Comentarios

Cirujano Jaen ha dicho que…
Gracias por los consejos!