junio 12, 2013 Rafa Villaplana

Diseño Web: Como utilizar Responsive Design en tu página web


Diseño Web Responsive

Con la aparición de toda la colección de dispositivos móviles que hay en el mercado, el Responsive Resign está a la orden del día. En este post, te explicaremos de forma breve, 3 pasos básicos a seguir para que tu sitio web se ajuste a cualquier dispositivo móvil.

Paso 1 Meta Tag

La mayoría de los navegadores móviles escala las páginas web a un ancho de ventana para que quepa en la pantalla.  Utilizando la etiqueta meta viewport se puede indicar esto. A continuación, la etiqueta viewport  le indica al navegador que utilice la anchura del dispositivo como la anchura de visualización y desactiva la escala inicial. Hay que incluir esta etiqueta meta en el head.

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

Paso 2 HTML Structure

En el siguiente ejemplo, tenemos un diseño de página básica con una cabecera, contenido, barra lateral, y un pie de página. La cabecera tiene una altura fija 180px, el contenido es de 600px de ancho y la barra lateral es de 300px de ancho.

Responsive Design

Paso 3 Media Queries

CSS3 consulta los tamaños del dispositvo para conseguir el responsive design. Es como escribir las condiciones para decirle al navegador cómo hacer la página para un ancho de ventana especificado.

El siguiente conjunto de reglas será vigente si el ancho de ventana es de 980px o menos.

Diseño Web Responsive Design

Luego para una vista de 700px o menos, hay que especificar el #content y #sidebar al ancho automático y borrar el float para que se muetre a modo de ancho completo.

Diseño páginas web responsive design

Para 480px o menos (pantalla del móvil), hay que restablecer la altura #header a auto, cambiar el tamaño de la  fuente a 24px y ocultar el # sidebar.

Diseño web responsive

Se pueden definir tantos anchos de pantalla como se necesiten. En el post solo se han mostrado 3 ejemplos de media queries diferentes. El propósito del responsive design es aplicar diferentes reglas CSS para lograr diferentes diseños para el ancho de ventana especificado. Se pueden definir las reglas en la misma hoja de estilo o en un fichero css específico.

¿Qué experiencia teneís con el Responsive Design?¿Qué pasos seguís para el diseño responsive de vuestros sitios web?

Comment (1)

  1. Rafa Villaplana

    En Cloud TIC creamos un fichero CSS específico para el diseño responsive. De esta forma diferenciamos el estilo a nivel de CSS entre los 3 tamaños más usuales del mercado: PC, tablet y móvil.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.