Ya hemos hablado del término Responsive Design. En los siguientes artículos voy a implementar distintas técnicas conocidas a la hora de desarrollar un layout. En esta primera edición vamos a proceder a conocer la técnica conocida como Column Drop o en español Caída de Columna. Es un patrón popular que comienza con un layout multicolumna y termina con un layout sencillo de una columna, dejando caer las columnas a medida que la dimensión de la pantalla se va estrehando.

A diferencia del patrón Mostly Fluid, el tamaño total de los elementos en esta disposición tiende a permanecer constante. En este diseño la adaptación a distintos tamaños de pantalla se basa en apilar las columnas como en el siguiente wireframe:

patron mostly fluid

Saber el cuándo y cómo cada columna se debe de apilar apilan en los breakpoints de resolución no es un dogma, debe ser es diferente para cada diseño. A continuación mostraré algunos ejemplos de webs empleando este patrón.

Modernizr
modernizr

Wee Nudge
weenudge

Ash Personal Training
ash personal training

Festival de Saintes
saintes

Tras ver como distintos diseños tratan esta técnica ahora es el momento de que nosotros implementemos un layout empleándola. Vamos a simular el wireframe mostrado anteriormente. Lo primero que debemos de definir es nuestra estructura html. Para simular las columnas emplearemos tres article dentro de un section.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="widht=device-width"/>
		<title> Column Drop</title>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<div id="wrapper">
			<header>Header</header>
			<section>
				<article id="column1">Column 1</article>
				<article id="column2">Column 2</article>
				<article id="column3">Column 3</article>
			</section>
			<footer></footer>
		</div>
	</body>
</html>
 

A continuación viene la magia. Es bastante sencillo implementar este patrón ya que solo debemos de jugar con los porcentajes de las capas. En la resolución desktop hemos dado un porcentaje de anchura a cada div sumando un 100% dentro de su contenedor. Al estrecharse y percibir que los tamaños ya no son adecuados (lo hemos asignado a 800px) lo que se realiza es una caída de la tercera columna. Para ello el 100% se reparte entre las dos columnas restantes y a la nueva columna se le aplica un ancho de 100% para que se apile debajo de sus dos columnas contiguas.

El mismo procedimiento se aplicará cuando el tamaño de la ventana del navegador llegue a 480px apilando las tres columnas cada una con un ancho del 100%; dejando ver a la versión mobile una sola columna. A continuación el código css:

*
{
	margin:0;
}

body{
	background: #f2f2f2;
	color: black;
	font-size: 16px;
	font-family: sans-serif;
	height:100%;
}

#wrapper
{
	width: 100%;

}

header
{
	width: 100%;
	margin: 0 auto;
	height: 1em;
	padding: 1%;
	text-align: center;
	background-color: grey;
	color:white;
}

article
{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	float:left;
	height: 100%;
	background-color: grey;
	padding: 2%;
	text-align: center;
	height: 400px;

}

	#column1
	{
	background-color: #96c144;
	width: 20%;

	}
	#column2
	{
	background-color: #6fa843;
	width: 60%;
	}
	#column3
	{
	background-color: #cde0aa;
	width: 20%;
	}

@media screen and (max-width: 800px){

	#column1
	{
	width: 34%;
	}
	#column2
	{
	width: 66%;
	}
	#column3
	{
	width: 100%;
	height: 200px;
	}
}

@media screen and (max-width: 480px){

	#column1
	{
	width: 100%;
	}
	#column2
	{
	width: 100%;
	}
	#column3
	{
	width: 100%;
	}

	header
	{
	width:100%;
	}
}
 

Podéis ver el código completo en mi GitHub

[googleplusauthor]

Artículos relacionados...

Sobre El Autor

Coordinador en AnalyticaWeb.com Me encanta el SEO y la Analítica Web. Emprendedor y autodidacta que con pasión intenta alcanzar los máximos de su proyección. Disfruto convirtiendo datos en negocio.

Artículos Relacionados

Una Respuesta

Hacer Comentario

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