Crear un Diseño Web Adaptable o Responsive Web Design

Share Button

Lo primero, que es?

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

Ésto significa que nuestro diseño Web se adaptará a las diferentes medidas de los diferentes dispositivos desde el que el visitante utilice para visualizar nuestro sitio Web.

Hoy en día, el uso de dispositivos móviles a aumentado de una forma muy significativa, casi desplazando a un segundo plano a los PC´s de sobremesa o a los portátiles.

En éste gráfico perteneciente a http://www.emarketer.com podremos ver la estadística de uso pasada, presente y futura, según el creciente uso de dichos dispositivos.
use-of-smartphones-by-2015Aún no siendo la mejor solución, cosa que ya publicaremos en otra entrada, si es una buena forma de acercarnos al disfrute de nuestros usuarios y visitantes cuando nos visiten desde sus dispositivos móviles.

 

 

 

 

 

Menos cháchara y a la acción!

Empezaremos creando un archivo llamado index.html (muy original), y en el escribiremos las siguientes líneas de código:

Ahora, para diferenciar los distintos bloques o div´s, vamos a darles estilo y color así:

Ahora, si vemos en el navegador nuestro pequeño diseño, nos quedaría algo así:

resp1

 

Hasta aquí todo normal.

El siguiente paso que daremos para que nuestro pequeño diseño sea adaptable, es usar las @media queries en nuestro css, como por ejemplo:

En éste caso, estamos diciéndole al navegador que si la resolución máxima es de 1024px de ancho, el dispositivo es de 600px máximo de ancho y el dispositivo es de 600px de alto, interpretará el código que pondremos dentro, posibilitando así el adaptar nuestro diseño al dispositivo visitante.

Para nuestro ejemplo usaremos lo siguiente:

Pues básicamente, ésto es todo.

Podéis ver un ejemplo funcionando aquí.

Un saludo!!

Share Button

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Captcha *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">