En esta segunda edición vamos a proceder a conocer la técnica conocida como Mostly Fluid o en español Mayormente Fluido o Líquido. Esta técnica ya la comparamos con la técnica de Column Drop en el artículo anterior, en este nuevo artículo la conoceremos con más profundidad.

column drop

Esta técnica es el patrón mas popular y dentro de la comunidad responsive uno de los mayormente empleados en los distintos diseños. En dimensiones de smartphone se apilan todas las columnas  y según aumentan estas dimensiones se voltean en un desarrollo multicolumna tanto como el ancho del navegador deje acomodarlas. Estos elementos se vuelven fluidos y se expanden hasta los diferentes breakpoints. Además se puede combinar con la técnica de Column Drop.

Otro concepto que este patrón emplea es definir un ancho máximo para el wrapper que contiene las capas pudiendo crecer el diseño y expandirse a cualquier resolución del navegador quedando un espacio en blanco a los lados del contenido. A estas dimensiones el diseño se basa en los layouts de ancho fijo y centrados típicos de los últimos años.

El órigen del nombre “mayormente líquido” es debido a que la estructura principal de los layouts no cambia realmente hasta dimensiones mobile donde se aplica la caída de columna. Como hemos comprobado las columnas se vuelven liquidas con su contenido hasta alcanzar el ancho maximo

A continuación mostraré algunos ejemplos de webs empleando este patrón.

Five Simple Steps
Five Simple Steps

Princess Elisabeth Antarctica
Princess Elisabeth Antarctica

Trent Walton

Trent Walton

ChoiceResponse
ChoiceResponse

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, todo ello envuelto en un contenedor o wrapper general.


<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width" />
 Mostly Fluid
			<link href="style.css" rel="stylesheet" /></pre>
<header>Header</header>
<div id="wrapper"><section><article id="column1">Column 1</article><article id="column2">Column 2</article><article id="column3">Column 3</article>
</section><footer></footer></div>
<pre>

A continuación el código css:

*
{
	margin:0;
}

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

#wrapper
{
	width: 80%;
	margin: 0 auto;
}

header
{
	margin: 0 auto;
	height: 1em;
	padding-top: 2%;
	padding-bottom: 2%;
	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: 100%;

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

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

	#wrapper
	{
		width: 90%;
		margin: 0 auto;
	}
}

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

	#wrapper
	{
		width: 100%;
		margin: 0 auto;
	}
}

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

#wrapper
	{
		width: 100%;
		margin: 0 auto;
	}
	#column1
	{
	width: 100%;
	}
	#column2
	{
	width: 100%;
	}
	#column3
	{
	width: 100%;
	}

	header
	{
	width:100%;
	}
}
[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

Hacer Comentario

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