Responsive Design: Hazlo fácil y comodamente

  • Ruben Carracedo Cano
  • Sin categoría
  • 25 / 04 / 2013
  • 0 Comments

Hoy en día esta muy de moda el diseño responsive o adaptativo.

He decidido hacer este pequeño tutorial para aclarar que no es necesario incrustar una librería como Skeleton o como Bootstrap para conseguir este efecto de adaptación a todos los dispositivos. Tan solo hay que hacer uso de las media queries.

Lo tratare de explicar por pasos:

Paso 1. Estructura y Metas

Lo primero de todo es tener muy en cuenta como funciona un navegador web de smartphone a grandes rasgos. Cuando hace una carga de una web, trata de buscar si existe alguna recomendación de ancho para utilizar. De no ser así  busca la que mejor se adapta. Si no puede hacerlo, muestra la web tal cual la veríamos en un navegador tradicional.

Para evitar esto, haremos uso de una de las meta-etiquetas, en concreto, viewport.

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

Pero como no, no podría ser de otra manera, si Internet Explorer no tuviese algo que decir. Si amigos, si, Internet Explorer 8 no soporta de manera nativa los media queries. Tenemos que forzarlos utilizando javascript, usando media-queries.js o respond.js:

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> < ![endif]-->

 

Paso 2. El groso HTML

En este ejemplo hemos creado una simple estructura con un header, content, sidebar lateral derecho  y un footer. El header es fixed y tiene una altura de 180px. El content tiene una anchura de 600px y el sidebar de 300px.

<div id="header">
<h1>Header</h1>
<p>Tutorial por <a href="http://www.rubencarracedo.com/">Ruben Carracedo</a>.</p>
</div>

<div id="content">
<h2 align="center">Contenido</h2>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
<p>texto</p>
</div>

<div id="sidebar">
<h3 align="center">Sidebar</h3>
<p>texto</p>
<p>texto</p>
</div>

<div id="footer">
<h4>Footer</h4>
</div>

 

Paso 3. CSS utilizando las Media Queries.

Esta es la clave. No lo dudéis amigos, si esto no se hace bien, nada de lo anterior servirá para nada. Gracias a estas queries CSS3, le indica al navegador, como ha de renderizar la pagina.

Primero ponemos las reglas que estructuran la mayor anchura de las que vamos a contemplar. Recomiendo que como mínimo sean 3: 980px, 700px y 480px. Estas son las medidas estandar para smartphones, tablets y el resto.

Como veis, el valor de la anchura lo cambiamos de pixel a porcentaje, de este modo los contenedores fluirán, en lugar de estar estáticos.

/* para 980px o menos */
#pagewrap {width: 94%:}
#content {width: 65% ;}
#sidebar { width: 30%;}

Para  700px o menos el #content y #sidebar pasa a una anchura auto y se elimina el float así tendrá una anchura completa, al 100%.

/* para 700px o menos. Con auto width se hace un reset al container. */
#content {
width: auto;
float: none ;}

#sidebar { width: auto;
float: none;}

Para 480px o menos resetea el #header a auto, cambia la fuente h1 a 24px y esconde la barra lateral:

/* para 480px o menos */ #header { height: auto;}

h1 {font-size: 24px ;}

#sidebar { display: none;}

Podéis ver un ejemplo del diseño responsive funcional hecho por mi. Disfrutadlo

Compartid el artículo en vuestras redes sociales y no olvidéis comentar!!!

The following two tabs change content below.
Ruben Carracedo Cano

Ruben Carracedo Cano

Analista Programador at Adviqo Telelinea
Soy un profesional Web Multiplataforma con mucha curiosidad y ganas de seguir mejorando. Tecno-Friki entre otros vicios. Me encanta todo lo relacionado con la programación y el desarrollo de aplicaciones. En mis ratos libres investigo novedades tecnológicas, busco adaptar la tecnología para facilitar su uso cotidiano.
Ruben Carracedo Cano

Latest posts by Ruben Carracedo Cano (see all)

Deja un comentario