La aparición de Pinterest en el amplio panorama de las redes sociales no ha pasado inadvertida para nadie. Esto es debido a la gran cantidad de ideas que puedes obtener explorando pineadores o tableros, pero, sobre todo, lo más destacado ha sido su revolucionario y elegante layout.
A continuación me gustaría exponer algunos ejemplos para conseguir tener nuestro layout a la última en tendencias de organización de contenidos. Cada uno de los siguientes ejemplos está basado en distintas técnicas pero con resultados similares. ¡Inspírate!
Muchos han sido los que en los últimos meses han tratado de adaptar el diseño de esta plataforma a sus blogs en WordPress o webs personales y corporativas. El primer error que se suele cometer a la hora de hacerlo es pensar en crear contenedores y un float left para alinearlos todos a la izquierda con márgenes similares, pero con esta técnica solo conseguiremos un entramado de cajas con irregulares espacios en blanco entre ellas.
Para poder crear este layout podemos hacerlo con las siguientes técnicas:
Sistema de columnas con CSS3
La primera opción que os presento es un sistema basado en CSS3, que si bien ahora mismo es bastante inestable por no estar soportado por todos los navegadores, muchos tenemos la esperanza de que pronto se convierta en un sistema habitual para ordenar los contenidos sin tener que recurrir a javascript.En esta técnica, desarrollada por cssdeck, la idea principal es crear columnas e incluir las cajas con el contenido en su interior. Os muestro a continuación un ejemplo de la distribución HTML de las columnas:
<div id=“container">
<div class=“column">
<div class=“box">
<img src”">
</div>
<div class=“box">
<img src”">
</div>
<div class=“box">
<img src”">
</div>
<img src”">
</div>
<div class=“box">
<img src”">
</div>
<div class=“box">
<img src”">
</div>
</div>
</div>
Por otra parte, en el archivo CSS, gracias a la propiedad "column-count", indicaremos cuántas columnas habrá en total y esto hará que se adapten repartiendo el espacio disponible. Además, habrá que añadir la propiedad "column-break-inside" para que el contenido no fluya de una columna a otra. Por último, añadiremos las etiquetas para los distintos navegadores "-moz-" y "-webkit-". Para ver un ejemplo en vivo puedes visitar este link.
#columns {
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.box {
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
display: inline-block;
margin: 0 2px 15px;
padding: 15px;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
background: #FEFEFE;
background-image: linear-gradient(45deg, #FFF, #F9F9F9);
}
Masonry
En el siguiente caso veremos la posibilidad de aplicar un plugin de jQuery bastante sencillo que, con apenas 2 líneas de código y un par de clases aplicadas a nuestro HTML, conseguirá darnos la apariencia que buscamos para nuestro site.
Masonry nos permite un control bastante sencillo de los márgenes y los paddings de nuestros elementos, lo que nos permitirá adaptar el diseño a la perfección. El comportamiento responsive podremos gestionarlo a partir de CSS, con lo que conseguiremos un desarrollo muy parecido al habitual en una maquetación front-end de lo más básica.
Para aplicar este método deberemos descargarnos el plugin desde la web oficial de esta librería o incluyendo el CDN a nuestro head (siempre después de la llamada a jQuery). Después de esto sólo nos queda crear un div contenedor principal al que asignaremos una id (grid) y el resto de cajas aplicables con la clase (item) que decidamos aplicarle.
<div id=“grid”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
A continuación, llamaremos a la función del plugin a través del div contenedor, y dentro de esta señalaremos cuales serán el selector que usamos para nuestros elementos apilables. Además de esto, podremos añadir otra serie de opciones disponibles (grosor de las cajas, márgenes, padding, etc.), que podremos encontrar en la documentación del plugin.
$(‘#grid’).masonry({
//options
itemSelector: ‘.item’,
});
<div id=“grid” data-columns>
<div class=“”></div>
<div class=“”></div>
<div class=“”></div>
</div>
Esta id y la metaetiqueta estarán definidas en el archivo CSS, en el que señalaremos el contenido que tendrá (en este caso, tres columnas con proporciones similares y con un float a la izquierda que garantiza que estén dentro de cada columna).
#grid [data-columns] :: before {
content: ‘3 .column.size-1of3;
}
.column { float:left }
. size-1of3 { width:33,333%
Masonry nos permite un control bastante sencillo de los márgenes y los paddings de nuestros elementos, lo que nos permitirá adaptar el diseño a la perfección. El comportamiento responsive podremos gestionarlo a partir de CSS, con lo que conseguiremos un desarrollo muy parecido al habitual en una maquetación front-end de lo más básica.
Para aplicar este método deberemos descargarnos el plugin desde la web oficial de esta librería o incluyendo el CDN a nuestro head (siempre después de la llamada a jQuery). Después de esto sólo nos queda crear un div contenedor principal al que asignaremos una id (grid) y el resto de cajas aplicables con la clase (item) que decidamos aplicarle.
<div id=“grid”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
A continuación, llamaremos a la función del plugin a través del div contenedor, y dentro de esta señalaremos cuales serán el selector que usamos para nuestros elementos apilables. Además de esto, podremos añadir otra serie de opciones disponibles (grosor de las cajas, márgenes, padding, etc.), que podremos encontrar en la documentación del plugin.
$(‘#grid’).masonry({
//options
itemSelector: ‘.item’,
});
Salvattore
<div id=“grid” data-columns>
<div class=“”></div>
<div class=“”></div>
<div class=“”></div>
</div>
Esta id y la metaetiqueta estarán definidas en el archivo CSS, en el que señalaremos el contenido que tendrá (en este caso, tres columnas con proporciones similares y con un float a la izquierda que garantiza que estén dentro de cada columna).
#grid [data-columns] :: before {
content: ‘3 .column.size-1of3;
}
.column { float:left }
. size-1of3 { width:33,333%
}
Adaptar el diseño responsive de este layout se realizará simplemente cambiando dentro de las media-queries el número de columnas y el grosor de estas según el viewport del dispositivo. De este modo, en la visión para tablets podremos reducir el número de columnas a dos, y a una para smartphones.
Para el correcto funcionamiento de este plugin es conveniente colocarlo al final de la página en la que será aplicado. Por supuesto, si necesitas más información acerca del funcionamiento, puedes consultarlo en el website del desarrollador, donde viene todo correctamente explicado y desde donde podrás descargarlo de forma gratuita.
La versatilidad que ofrece para distintos dispositivos móviles y su naturaleza responsive nos permite garantizar una grata experiencia visual en cualquier formato y dimensiones de pantalla. Esta experiencia visual mejora exponencialmente para proyectos relacionados con profesiones en las que prime la imagen como método para transmitir información y muestren su trabajo a través de portfolio: ilustradores, diseñadores, fotógrafos o modelos son algunos de ellos.
Adaptar el diseño responsive de este layout se realizará simplemente cambiando dentro de las media-queries el número de columnas y el grosor de estas según el viewport del dispositivo. De este modo, en la visión para tablets podremos reducir el número de columnas a dos, y a una para smartphones.
Para el correcto funcionamiento de este plugin es conveniente colocarlo al final de la página en la que será aplicado. Por supuesto, si necesitas más información acerca del funcionamiento, puedes consultarlo en el website del desarrollador, donde viene todo correctamente explicado y desde donde podrás descargarlo de forma gratuita.
Por qué utilizar este layout
Dejando a un lado cuestiones de diseño y el aspecto de nuestra web, el sistema cuadriculado ofrece otras ventajas que deben tenerse en cuenta a la hora de elegir este sistema como el método más óptimo para presentar la información a los contactos que visiten nuestra web. En primer lugar, nos ofrece una visión muy completa de todos los contenidos que ofrecemos y, del mismo modo, es muy fácil jerarquizar según importancia o actualidad.La versatilidad que ofrece para distintos dispositivos móviles y su naturaleza responsive nos permite garantizar una grata experiencia visual en cualquier formato y dimensiones de pantalla. Esta experiencia visual mejora exponencialmente para proyectos relacionados con profesiones en las que prime la imagen como método para transmitir información y muestren su trabajo a través de portfolio: ilustradores, diseñadores, fotógrafos o modelos son algunos de ellos.
Conclusión
En definitiva, hay muchas formas de aplicar este diseño para nuestro contenido, y aquí os presento algunos métodos que funcionan correctamente o que esperamos que funcionen en un futuro próximo con el fin de facilitar el trabajo a los desarrolladores. Además, en este caso se trata de métodos simples y fácilmente aplicables para los más inexpertos.Y, por supuesto, ¡si has probado otros métodos que funcionen, no dudes en compartirlos con nosotros en la sección de comentarios!
