CSS Grid Layout: Mejores diseños con menos código

CSS Grid Layout: Mejores diseños con menos código

En esta guía te voy a enseñar sobre CSS grid Layout y de que manera lo puedes usar en tus diseños, la verdad es que no es complicado, solo es cuestion de acostumbrarse a la sintaxis.

La primera vez que empece adentrarme en el tema, me costó mucho trabajo, ya que estaba acostumbrado a trabajar con floats y flexbox, y CSS Grid Layout es un concepto completamente nuevo que, como te digo la primera vez puede ser intimidante, pero no te preocupes aquí te voy a explicar todo lo que tienes que saber para qué empieces a usar CSS Grid en tus proyectos.

¿En qué consiste CSS Grid Layout?

CSS Grid Layout es un módulo completamente nuevo que trae un sistema de cuadrícula bidimensional a CSS por primera vez.

CSS Grid no es actualmente un estándar oficial, es un Candidate Recommendation por parte del W3C, aunque es una recomendación, los navegadores principales lo han adoptado.

Reemplaza el uso de floats, lo que genera menos y más legible código de css. Esto nos permite crear diseños mas complejos sin tantas complicaciones.

Si estas acostumbrado al sistema de grid de bootstrap… olvídate de él, con CSS Grid no estás limitado a 12 columnas, puedes usar cualquier cantidad de filas y columnas.

¿Qué es un grid o rejilla?

Un grid o rejilla, es una conjunto de cuadrados de medidas regulares, que están formados por una serie de líneas paralelas y perpendiculares a estas que se intersecan. Forman un grupo definido como columnas y filas.

CSS Grid Layout container

El elemento padre se llama grid container (Elemento padre contenedor). Todos los elementos que son hijos directos del elemento padre se llaman grid items.

Contamos además con ejes; El eje de las filas y el eje de las columnas, el eje de las columnas corresponde con el «Eje Y» y el eje de las filas con el «Eje X», Como se muestra en la siguiente imagen.

CSS Grid Layout: Ejes X y Y

Y hay más… Las líneas verticales y líneas horizontales que dividen la rejilla y separan las filas y las columnas, se llaman grid lines y se numeran automáticamente para las columnas así como para las filas, empezando por el uno, hasta el número de filas más uno, lo mismo para las columnas.

Ahora, El espacio que hay entre las filas y las columnas se llama gutter, el gutter para las filas puede ser diferente al de las columnas.

CSS Grid Layout: Grid lines and Gutter

El objetivo final es hacer la rejilla que aparece en la imagen, Para empezar vamos a crear el contenedor con sus elementos hijo.

<div class="wrapper">
  <div class="one">Uno</div>
  <div class="two">Dos</div>
  <div class="three">Tres</div>
  <div class="four">Cuatro</div>
  <div class="five">Cinco</div>
  <div class="six">Seis</div>
</div>
.wrapper {
  display: grid;
}

CSS Grid Layout: first approach

Filas y columnas del Grid

Lo que hicimos hasta el momento fue crear el contenedor con la propiedad display: grid. Ahora definimos las columnas y filas con la propiedad grid-template-rows y grid-template-columns.

Estas propiedades definen las pistas o tracks, qué es el espacio entre dos líneas de la rejilla «horizontal y/o vertical». Si es vertical se llama columna o column y si es horizontal se llama row o fila.

Grid Tacks

Para nuestro cometido necesitamos definir dos filas y cuatro columnas. Vamos a necesitar dos filas de 150px y cuatro columnas de 150px, quedaría de la siguiente forma.

Nota: Las propiedades aceptan todas las unidades conocidas: em, rem, porcentajes, pixeles, vh, vw, etc.

.wrapper {
  display: grid;
  grid-template-columns: 150px 150px 150px 150px;
  grid-template-rows: 150px 150px;
}

CSS Grid Layout: filas y columnas

Para separar las ítems uno del otro, lo podemos hacer cambiando el tamaño del gutter con la propiedad grid-row-gap para las filas y grid-column-gap para las columnas. Si quieres que el gap sea el mismo para filas y columnas, lo puedes hacer con la propiedad grid-gap.

.wrapper {
  display: grid;
  /* El mismo tamaño para filas y columnas */
  grid-gap: 25px;

  /* Diferente tamaño para filas y columnas */
  grid-row-gap: 25px;
  grid-column-gap: 50px;
}

Tamaños fijos y flexibles: la unidad fr

Hasta ahorita hemos definido las filas y columnas de forma manual, que siendo honestos no es muy práctico a la hora de trabajar en proyectos complejos (grid de 12 columnas).

CSS Grid trae consigo una función que nos va a facilitar la vida al momento de crear filas y columnas, la función se llama repeat(), esta función recibe dos argumentos: el primero es la cantidad de elementos que quieres crear y el segundo recibe el tamaño de dichos elementos.

.wrapper {
  grid-template-columns: repeat(4, 150px);
  grid-template-rows: repeat(2, 150px);
}

Al igual que la forma manual, estamos creando cuatro columnas de 150px y 2 filas de 150px, tenemos el mismo resultado con menos código ¡Genial!

Si quieres crear una nueva columna o fila con un tamaño diferente, lo haces de la siguiente forma:

.wrapper {
  grid-template-columns: repeat(3, 150px) 250px;
  grid-template-rows: repeat(2, 150px);
}

CSS Grid Layout: función repeat con columna extra al final

Como se muestra en la imagen las tres columnas definidas por la función tienen en el mismo tamaño, la cuerta es un poco más grande.

Ok, definir los tamaños de los elementos esta bien, digo, por lo general se define el ancho de un contenedor, pero hay ocasiones en las que se espera que el contenido tome la mayor cantidad de espacio que hay disponible. Esto es un poco similar a Flexbox donde la propiedad flex si la ponemos en uno se expandirá y ocupara todo el espacio posible.

CSS grid cuenta con una unidad de medida que tiene el mismo tipo de funcionamiento, se llama fractional unit o fr, esta unidad permite que un elemento se expanda y tome todo el espacio restante que tenga disponible.

El elemento va a tomar “una fracción” del espacio disponible, así si definimos el tamaño como 2fr; Va a tomar dos veces el tamaño de una fracción.

Usando 1fr en la columna final queda de la siguiente forma:

.wrapper {
  grid-template-columns: repeat(3, 150px) 1fr;
  grid-template-rows: repeat(2, 150px);
}

CSS Grid Layout: 1fr en la última columna

Debido a que nuestra rejilla tiene un tamaño de 1000px la última columna toma el espacio restante.

Ok, ¿Qué podemos hacer para que las columnas tengan el mismo tamaño? Bueno, en ese caso tendríamos que definir el tamaño en 1fr.

.wrapper {
  grid-template-columns: repeat(4, 1fr);
}

CSS Grid Layout: función repeat con 1fr

Posicionando elementos en la cuadrícula

Todos los elementos de la cuadrícula se distribuyen según el orden de origen, esto es de izquierda a derecha, podemos cambiar dicho orden y hacerlo a nuestro antojo.

Para hacer el movimiento nos tenemos que basar en las grid lines y elegir a que puntos queremos mover el elemento, por ejemplo:

CSS Grid Layout: posicionando elementos

Si queremos cambiar de posición el primer elemento y lo colocamos en lugar del elemento seis, haríamos lo siguiente en el elemento que queremos mover:

.one {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

Con esto le estamos diciendo que para la fila, tiene que empezar en la línea 2 y terminar en la línea 3; y para las columnas empieza en la 2 y termina en la tres, queda de la siguiente forma.

CSS Grid Layout: moviendo un item

Existe una forma corta para definir la ubicación: grid-row y grid-column.

.one {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

Con menos código tenemos el mismo resultado, el primer parámetro es donde empieza, se separan con un “/” y el segundo parámetro donde termina.

Extender Grid Items

Para abarcar elementos de la cuadrícula en varias celdas o grid cells, existen varias maneras de realizar esa tarea, por ejemplo, digamos que queremos expandir dos lugares el ítem con número dos, para eso tenemos que hacer lo siguiente:

.two {
  grid-column: 2 / 4;
}

Con esto le estamos diciendo que el elemento empieza en el grid line número dos y que se expanda hasta el grid line número cuatro, este es el resultado en imagen.

CSS Grid Layout: grid implícito

Debido a que el elemento abarca dos grid cells, entonces se hace espacio al final del grid para agregar el elemento que hace falta, el número ocho.

Otra forma de expandir determinadas posiciones es usando el keyword, span:

.two {
  grid-column: 2 / span 2;
}

Con la palabra span, le estamos indicando las posiciones que queremos que abarque, en este caso dos y tenemos el mismo resultado que con la instrucción anterior.

Hay ocasiones en las que no sabemos el espacio que puede abarcar el contenido de las ítems, y queremos que abarque todo el espacio disponible, en ese caso en lugar de especificar cuanto espacios abarcara, usamos -1 para indicarle que tome todo el espacio disponible.

.eight {
  grid-column: 1 / -1;
}

CSS Grid Layout: expandir todo el espacio

Nombres en grid lines y grid áreas

Usar números para definir los grid cells, es sencillo si tu diseño también lo es, en el mundo laboral te vas a encontrar con proyectos más complejos que otros, para esos casos lo mejor que podemos hacer es asignarles un nombre a las líneas, veamos como.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
}

Dentro de la función repeat(), definimos el nombre de las filas y columnas, en el caso de las filas, definimos el inicio que se llama row-start y el final se llama row-end.

La función repeat(), básicamente es un loop, y va a crear dos filas con nombres row-start y row-end. ¿Cómo podemos manipulas las columnas independientemente? Bueno, cuando los elementos se crean dentro de la función automáticamente les asigna un número. Por ejemplo, la primera fila se llama ahora: row-start 1 y row-end 1, la segunda queda: row-start 2 y row-end 2.

Bueno, ya tenemos definidos los nombres para las filas y las columnas, ahora vamos a usarlos. Si factorizamos un poco el código usando los nombres, el código queda así:

.eight {
  grid-column: col-start 1 / col-end 4;
}

Con esto tenemos el mismo resultado de la imagen anterior, solo que ahora es mucho más sencillo posicionar los elementos en la cuadrícula.

Grid áreas

Existe otra forma de posicionar elementos que consiste en nombrar las áreas. Para nombrar “áreas” usamos la propiedad grid-template-areas en el contenedor.

.wrapper {  
  grid-template-areas: 'box-1 box-2 box-3 box-4'
                       'box-5 box-6 box-7 box-8'
}

.one {
  grid-area: box-1;
}

.two {
  grid-area: box-2;
}

.three {
  grid-area: box-3;
}

.four {
  grid-area: box-4;
}

.five {
  grid-area: box-5;
}

.six {
  grid-area: box-6;
}

.seven {
  grid-area: box-7;
}

.eight {
  grid-area: box-8;
}

Básicamente, grid-template-areas crea una representación con texto de cómo nuestro diseño final se verá. En el elemento hijo mediante la propiedad grid-area le asignamos el nombre definido en grid-template-areas y automaticamente el elemento será asignada a dicha área.

Esta técnica es práctica con diseños sencillos que no impliquen mucha complejidad, si tu diseño es muy complejo (12 columnas, header elaborado, etc.), te sugiera que no uses esta técnica, ya que se vuelve poco práctica.

Implicit Grids vs. Explicit Grids

Son las áreas que definimos manualmente y las que se generan automáticamente, para colocar todos los elementos que son.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(2, [col-start] 1fr [col-end]);
}

En el código anterior estamos definiendo dos filas y dos columnas, nuestro diseño cuenta con 8 columnas, entonces al estar definiendo solo dos columnas y dos filas y el resto de los elementos se convierten en un grid implícito, ya que nosotros no lo definimos como tal, el mismo CSS Grid se encarga de posicionar los elementos restantes.

Implicit grid vs explicit grid

Usando min-content, max-content y la función minmax()

Max-content

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: max-content 1fr 1fr 1fr;
}

La especificación max-content se adapta al tamaño del contenido con mayor tamaño dentro del elemento, mientras 1fr hace que el elemento tome el espacio disponible, max-content toma el tamaño del elemento más grande, como se puede ver en la imagen siguiente.

CSS Grid Layout: max-content

Min-content

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: min-content 1fr 1fr 1fr;
}

La especificación min-content trabaja a la inversa, el elemento se adapta al tamaño del elemento con el contenido de menor tamaño.

CSS Grid Layout: min-content

Se puede dar el caso, por ejemplo al usar min-content, que el contenido del elemento se desborde, para esos casos hacemos uso de la función minmax().

Minmax()

Es una función que recibe dos parámetros, CSS se asegura que la fila o columna siempre se mantendrá entre estos dos valores. Por ejemplo, imagina que pasamos a la función minmax() 150 píxeles y 250 píxeles para una columna, CSS Grid Layout garantizará que, pase lo que pase, esta columna de la cuadrícula siempre permanecerá entre 150 y 250 píxeles de ancho.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: minmax(150px, 250px) repeat(3, 1fr);
}

CSS Grid Layout: minmax()

Como se puede observar la primera columna gracias a la función minmax(), tendrá un tamaño entre 150 y 250px nomas, si cambiamos el tamaño del contenedor por un valor en porcentaje, digamos un 90% y cambias el tamaño del navegador, vas a notar que en cierto punto por más pequeña que sea la pantalla, el valor siempre se mantendrá en 150px, esto es de suma utilidad cuando queremos controlar el tamaño del contenido que tenemos, esta función también acepta los valores min-content y max-content.

Diseños responsivos: auto-fit y auto-fill

Gracias a CSS Grid, podemos tener diseños responsivos sin tener que escribir media queries, veamos como funciona auto-fit y auto-fill.

Auto-fill

Llena la fila con las columnas que puedan caber. Es decir que crea columnas siempre que quepa una nueva, ya que está tratando de llenar la fila con tantas columnas como sea posible.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(auto-fill, 100px);
}

Las columnas recién agregadas aunque están vacías, seguirán ocupando un espacio designado en la fila.

CSS Grid Layout: auto-fill

Auto-fit

Tiene el mismo que funcionamiento que auto-fill. La diferencia es que auto-fit colapsa los espacios vacíos, como se puede ver en la siguiente imagen.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(auto-fit, 100px);
}

Colocadas estas propiedades, a medida que va cambiando que vamos variando el tamaño de las pantallas, van a hacer que se distribuyan automáticamente.

Ahora, si nos apoyamos de la función minmax(), podemos hacer un diseño responsive, sin media queries, y con un código más ligero.

.wrapper {
  grid-template-rows: repeat(2, [row-start] 150px [row-end]);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Nota: Firefox y Chrome viene dotados de un visor de grid, te será de mucha utilidad al momento de escribir los estilos CSS.

See the Pen
CSS Grid Layout Example
by Plectro lab (@Plectro-lab)
on CodePen.

En resumen

CSS Grid Layout te abre un nuevo abanico de oportunidades a la hora crear diseños. Gracias a su fácil uso, ofrece un gran poder de diseños, además si lo combinas con flexbox te será mucho más sencillo crear los diseños que tengas en mente.

Esto también nos va a permitir ofrecer estilos más ligeras, que se traduce en tiempos de carga más rápido y usuarios contentos 😉.

Es un poco confuso al comienzo debido a que es un cambio respecto a como veníamos manejando los diseños de las páginas web.

Definitivamente deberías de darle una oportunidad y empezar a jugar con él, actualmente es un Candidate Recommendation, aun así tiene un alto nivel de soporte por parte de los navegadores.

Si quieres investigar más al respecto, la documentación oficial te será de gran ayuda.

 

Polyfill: cubriendo las grietas en la web

Polyfill: cubriendo las grietas en la web

En esta entrada vamos a tocar un tema que muchas veces damos por sentado cuando trabajamos con frameworks o con librerías de terceros y que tienen un gran impacto al momento de diseñar una página web.

Actualmente existe una gran variedad de dispositivos para consumir contenido web, gracias a la obsolescencia programada, la brecha entre dispositivos actualizados y desactualizados (Android / iOS / Windows Phone) es abismal.

Ni hablar de Windows y Microsoft, que cada versión de sistema operativo viene con una nueva versión de navegador web, que muchas veces es difícil actualizar a no ser que cumplas con los requisitos necesarios (actualizar el sistema operativo).

Existe el caso de personas con versiones antiguas de sistemas operativos y navegadores, tan solo por el hecho de que se sienten cómodos con lo que tienen o que el ordenador que usan, es muy viejo y no es posible instalar una versión resiente de sistema operativo.

Es aquí donde entran los polyfills.

¿Qué es un polyfill?

Un polyfill o polyfiller es un módulo de código, plugin (o script) que sirve para implementar funcionalidades de HTML5 y CSS3 a navegadores antiguos (internet explorer 6, 7 y 8) que no lo admiten de forma nativa.

En la mayoría de los casos es código escrito en JavaScript, (esto no quiere decir que solo se limite a esta tecnologia) que implementa un estándar HTML5, CSS.

Otro de sus funciones es dar soporte a funcionalidades nuevas, que aún no tienen una integración nativa en el navegador.

El término fue usado por primera vez por Remy Sharp, desarrollador web y co-autor, junto con Bruce Lawson del libro Introducing HTML5 en el año 2009.

Algunos polyfills de ejemplo

Estos son algunos ejemplos de polyfills que puedes usar para tus proyectos, solo recuerda que si estás usando un framework, probablemente el polyfill que necesitas, ya venga integrado.

Core-js

Agrega funcionalidades del ECMAScript 2021 en navegadores antiguos, como las promesas, funciones de flecha, colecciones, propuestas del ECMAScript y de la W3C.

Esta librería viene integrada con Babel que se encargará de usar los módulos necesarios de core-js en tu código.

HTML5 Shiv

Script que da soporte a elementos de seccionamiento HTML5 (section y nav) en versiones de IE (Internet Explorer) de la 6 a la 9, Safari 4.x (e iPhone 3.x), y Firefox 3.x.

-prefix-free

Permite que los navegadores actuales reconozcan las versiones sin prefijos de varias propiedades de CSS3, no hay necesidad de que el desarrollador escriba todos los prefijos de los proveedores.

SessionStorage

La funcionalidad sessionStorage está disponible en los navegadores más recientes (IE8 y posteriores), pero no en IE7 y versiones anteriores.

Existe un polyfill de almacenamiento que se encarga de dar soporte a navegadores antiguos que no soportan sessionStorage.

En resumen

Son de gran ayuda al brindar soporte a versiones antiguas de navegadores, y buenos para unificar el soporte a nuestros proyectos.

Si estás trabajando con un framework como Angular 2+, React o Vue. En ese caso el mismo framework ya tiene inlcuido su set de polyfills, lo que es de gran ayuda, ya que nos permite centrarnos en la solución principal y dejar la compatibilidad al framework.

En caso de que no trabajes con algun framework. En el GitHub de Modernizr, hay una colección de plugins, seguro ahí encuentras la solución de código que necesitas.

Clip path: crea diseños asombrosos con esta propiedad

Clip path: crea diseños asombrosos con esta propiedad

En este artículo vamos a hablar sobre la propiedad clip path, aprenderás técnicas modernas de CSS para crear diseños y efectos vanguardistas.
Desde los inicios nos han acostumbrado a que todo debe ser rectangular, no me malentiendan. Los rectángulos están bien, no tengo nada contra ellos, de hecho son de gran utilidad al momento de definir la estructura del sitio.

Solo creo que para hacer diseños que te destaquen de la competencia, a veces es necesario salir de los esquemas y apostar por algo nuevo.

Antes de esta propiedad, si querías cambiar la forma de alguna sección de tu web, tenías que hacer malabares con los pseudo elementos before y/o after, posiciones absolutas, usar imágenes…

Ya no tiene por qué ser así, clip path nos facilita la vida al momento de crear figuras o efectos que llaman la atención.

¿Cómo funciona la propiedad clip path?

La propiedad clip-path recorta o “delimita” una porción de elementos SVG, imágenes o cualquier elemento HTML. Esta propiedad viene a sustituir la obsoleta clip: clip: rect(), de CSS2.

El trazado de recorte o clipping path se define por medio de patrones, formas o polígonos.

Este trazo de recorte es una región donde todo lo que está “dentro” de esta zona es visible y todo lo que está “fuera” de esta zona no se dibuja.

ejemplo de la propiedad clip-path

El patrón de recorte (centro) se aplica a la figura con diferentes colores (izquierda). Esto da como resultado una figura recortada (derecha).

Sintaxis

La forma correcta de escribir esta propiedad es la siguiente:

clip-path: <clip-source> | [ <basic_shape> || <geometry_box> ] | none

<clip-source>: La URL que haga referencia a un elemento SVG <clipPath> interno o externo.

clip-path: url(resources.svg#blob);

<basic shape>: Acepta las formas definidas en la especificación de formas de CSS. Una forma básica utiliza el cuadro de referencia especificado para dimensionar y colocar la forma básica. Si no se especifica ningún cuadro de referencia, el cuadro de borde (border-box) se utilizará como cuadro de referencia.

Las formas que acepta son las siguientes: inset(), circle(), ellipse(), polygon() y path():

clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

<geometry-box>: Si se usa en combinación con <basic-shape>, proporciona el box de referencia para <basic-shape>. Si se especifica por sí mismo, utiliza los bordes del cuadro especificado, incluida cualquier forma de esquina (border-radius), como ruta de recorte. Geometry-box puede tener uno de los siguientes valores:

  • margin-box: utiliza el margin box como el cuadro de referencia.
  • border-box: utiliza el border box como cuadro de referencia.
  • padding-box: utiliza el padding box como cuadro de referencia.
  • content-box: utiliza el content box como cuadro de referencia.
  • fill-box: utiliza el cuadro delimitador del objeto como cuadro de referencia.
  • stroke-box: Utiliza el cuadro delimitador de trazo como cuadro de referencia.
  • view-box: Utiliza el viewport SVG más cercano como cuadro de referencia.
  • none: No se crea ningún trazado de recorte.
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

En este ejemplo, el círculo usaría el content-box como cuadro de referencia.

.caja {
  clip-path: circle(50%) content-box;
}

Actualmente, los navegadores no admiten el uso de valores de cuadro para la propiedad clip-path. Sin embargo, son compatibles con shape-outside.

Ahora, veamos la función polygon(), que se ve así:

img {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Le estamos diciendo que todas las imágenes serán recortadas en forma de triángulo equilatero, la forma se la damos por medio de los vértices (x, y), la siguiente imagen lo ilustra mejor:

vertices en clip path

La primera coordenada determina la posición en el eje x, la segunda especifica la posición en el eje y. Los puntos están trazados en sentido de las manecillas del reloj.

Nota: no sucede así en el caso que el polígono tenga 3 pares de valores, como es el caso del triángulo de la imagen.

El primer valor se localiza a la mitad del eje x, por lo que su coordenada es 50%, para el eje y tiene un valor de 0%.

clip path función polygon

Usando las formas básicas

Como mencionamos arriba clip path acepta las formas: inset(), circle(), ellipse(), polygon().

Circle

La función circle() se define con la siguiente sintaxis: circle(radio en posX posY). La posición es opcional y está predeterminada en 50% 50%.

.circulo1 {
  clip-path: circle(50%);
}
.circulo2 {
  clip-path: circle(70% at 70% 20%);
}
Imagen para ejemplos con clip-path y las formas básicas

Ellipse

La función ellipse() se define de la siguiente forma: ellipse(radioX radioY at posX posY). La posición es opcional y está predeterminada en 50% 50%.

.ellipse1 {
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  clip-path: ellipse(50% 65% at 70% 50%);
}
gato ejemplo con clip-pathgato ejemplo con clip-path

Inset

Con la función inset() puedes definir un rectángulo, todo lo que quede fuera de esa área, desaparece. También es posible redondear las esquinas con la palabra border radius:

.inset1 {
  clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
  clip-path: inset(45% 0 33% 10% round 10px);
}
gato ejemplo con clip-pathgato ejemplo con clip-path

Polygon

Con esta forma puedes crear una gran variedad de figuras, al ser un polígono puedes especificar cualquier cantidad de puntos. Se requieren al menos tres vértices para definir un polígono. Acepta pares de coordenadas en X y Y, lo valores que pueden tomar son: píxeles, porcentajes, ems, rems, etc.

.triangle {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.right-arrow {
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}
.octagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.close {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

See the Pen
Clip path
by Plectro lab (@Plectro-lab)
on CodePen.

Usando con un elemento SVG

Además de recortar con las figuras básicas, puedes hacer uso de un vector SVG para hacer los recortes.

<svg width="0" height="0">
  <defs>
    <clipPath id="blob">
      <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105
      199,150 145,159 155,139 126,120 112,138 80,128 39,126
      24,104"/>
    </clipPath>
  </defs>
</svg>

Trabaja con las mismas propiedades que usamos en CSS, cada par de coordenadas separadas por comas representa un punto del polígono.

Ahora puedes aplicar la forma definida en la función url(), usando el id definido en el elemento <clipPath>:

.clipped {
  clip-path: url(#blob);
}

See the Pen
Clip path SVG
by Plectro lab (@Plectro-lab)
on CodePen.

Animaciones y transiciones

Las animaciones y transiciones también se pueden aplicar con clip-path para crear efectos interesantes. Solo asegúrate de que todos los pasos de tu animación contengan la misma cantidad de pares de puntos.

See the Pen
Clip path animation
by Plectro lab (@Plectro-lab)
on CodePen.

Soporte en navegadores en 2021

Al momento de escribir estas líneas, la propiedad clip path tiene un excelente soporte para navegadores.

Sí deseas ofrecer soporte a navegadores antiguos, una alternativa puede ser permitir que el navegador ignore la propiedad clip-path y muestre la imagen sin recortar. Otra alternativa, puedes probar la propiedad con @supports de css y ofrecer un diseño alternativo para los navegadores que no son compatibles.

@supports(clip-path: circle(45%)) {
  /* soporte para clip-path */
}

Al principio el trabajar con la propiedad clip path puede ser intimidante, pero una vez ubicas la forma en que opera con elementos SVG y conoces el sentido de los pares de valores para la función polygon(), verás que es muy sencillo. Echa a valor la imaginación y atrévete a crear diseños únicos.

Para más información:

¿Qué es Above the fold y de que manera influye en tu web?

¿Qué es Above the fold y de que manera influye en tu web?

Este artículo busca que aprendas lo que quiere decir la expresión above the fold y de que manera puede afectar a tu sitio web.

¿Qué es above the fold?

El concepto above the fold está inspirado en los periódicos impresos. Es el contenido que aparece en la mitad superior de la primera página. Debido a que estaban impresos en grandes hojas de papel, se tenían que doblar cuando llegaban a exhibirse en los quioscos.

Los titulares y las historias principales que aparecían en la portada del periódico, al ser la parte más visible, se usaba para atraer la atención de los transeúntes y convencerlos de adquirir una pieza.

Above the Fold

Algo similar sucede con los sitios web, al ser lo primero que ve el usuario sin hacer scroll, muchas personas empezaron a cargar la sección con banners y publicidad excesiva que provocaba serios problemas en la usabilidad y experiencia de usuario.

Esto provoco que Google actualizara su algoritmo. La actualización fue introducida a nivel global el 19 de enero de 2012, tiene por nombre Page Layout Algorithm Update (Ads Above the fold) y tiene por objetivo mejorar la calidad de los resultados.

A partir de ese momento Google empezó a prestar más atención a la relación entre contenido y anuncios (ads, publicidad y/o banners) que tienen una visibilidad más directa (Above the fold) de un sitio web.

Con esta actualización, la experiencia de usuario gana relevancia y tiene más peso como factor de posicionamiento.

¿Por qué es importante?

El diseño y la ubicación del contenido es importante, ya que es lo primero que ve el usuario al cargar la página; Hay que darles una buena impresión. Por esto debes incluir en la mitad superior de la página la información más importante y si es por razones de conversión, un llamado a la acción. Recuerda que es la parte que recibe la mayor parte de la atención de los usuarios.

Con esto no quiero decir que no incluyas publicidad en la mitad superior de la página. Lo que quiero decir es que no satures esa zona con publicidad, busca un equilibrio con el contenido, para que incluyas información relevante.

Por el contrario si no tienes mucho contenido visual en esta sección, no es una experiencia de usuario óptima, por lo que este tipo de sitios no suelen posicionar del todo bien.

Un estudio reciente de Google mostró que los anuncios que aparecen en la mitad superior de la página tenían una visibilidad del 73%, mientras que los que estaban debajo tenían solo el 44%. Pero esto debe sopesarse con el hecho de que el contenido que atrae al espectador reduce esa brecha considerablemente, y los anuncios pueden ser un obstáculo para eso. Como siempre en este tema, el contexto y el equilibrio son clave.

¿Cómo se mide la mitad superior del pliegue?

Es imposible definir un tamaño de pliegue para un sitio web. Debido a la gran variedad de tamaños de monitores (computadoras de escritorio y laptops), resoluciones de pantalla, smartphones y tablets.

La mayoría de los diseñadores web están de acuerdo en que la línea de pliegue tiene aproximadamente 1000 píxeles de ancho y 600 píxeles de alto.

La combinación de monitor / navegador más común es de: 1024×786 píxeles, con la ventana del navegador maximizada y sin barras de herramientas instaladas en la parte superior.

Google Analytics tiene un apartado donde te muestra las dimensiones de pantalla más comunes, así como el sistema operativo y el dispositivo que usaron.

Cómo afecta a los dispositivos móviles

El uso cada vez mayor de dispositivos móviles para la navegación web complica aún más el concepto de optimizar el diseño web para la parte superior de la página.

Los dispositivos móviles ofrecen una gran variedad de tamaños de pantalla, por lo que, a diferencia de una computadora de escritorio, la línea de plegado es un concepto mucho menos predecible.

Con tanta gente accediendo a páginas web a través de una gran variedad de dispositivos, las prácticas actuales de diseño web implican el uso de diseño responsive: hacer uso de diseños flexibles.

En el diseño responsive no hay estructuras fijas para una página, el contenido se adapta a cualquier tamaño de pantalla. Las páginas se adaptan al entorno en el que se consume o navega, en este caso el navegador web.

Si bien el contenido importante aún debe estar más arriba en la página, hoy en día, las páginas deben diseñarse para alentar al usuario a hacer scroll para que no se pierdan contenido importante.

Hay un estudio realizado por Huge, sobre el scroll. En el cual prueban cuatro diseños diferentes:

1. Una imagen, sin señales visuales para desplazarse por debajo del pliegue (below the fold).

Resultado:

  • 91% hicieron scroll
  • 91% hicieron scroll inmediatamente
  • 91% llego al final de la página

2. Una flecha de desplazamiento que indica a los usuarios que se desplacen hacia abajo.

Resultado:

  • 100% hicieron scroll
  • 92% hicieron scroll inmediatamente
  • 92% llego al final de la página

3. Una imagen corta que deja ver una parte del contenido.

Resultado:

  • 100% hicieron scroll
  • 92% hicieron scroll inmediatamente
  • 92% llego al final de la página

4. Una imagen animada con un elemento en movimiento para llevar a los usuarios por debajo de la página.

Resultado:

  • 91% hicieron scroll
  • 91% hicieron scroll inmediatamente
  • 73% llego al final de la página
Estudio realizado por Hugeinc

Imagen tomada de las pruebas de hugeinc.com.

Como podrás observar, todos los que participaron en la prueba hicieron scroll sin importar qué. Para poder determinar que tanta información es la que hay que poner al principio. Siempre es recomendable que analices el contexto, así como el mercado y el negocio en específico, los resultados pueden variar dependiendo del caso.

Recuerda procurar un balance entre el contenido y la publicidad, y debido a que los usuarios suelen hacer scroll, tienes la posibilidad de hacer una estructura más elaborada y no saturar la mitad superior de la página con contenido.

Landing page, ¿Qué es? y ¿Para que sirve?

Landing page, ¿Qué es? y ¿Para que sirve?

Quizá hayas escuchado del término landing page, pero aún no tienes claro ¿Qué es?, ¿Para qué sirve? o ¿Cuándo necesitas una para tu negocio?, aquí te explicaremos que es, y porque es importante considerarla en tu estrategia de marketing digital.

¿Le has dado click a un call to action como: “Estoy interesada”, “Quiero saber más”, “Más información”? Si has realizado esta acción y te manda a una página en específico. A esto es a lo que le llamamos landing page que traducida es “página de aterrizaje”.

¿Qué es una Landing page?

Una landing page es una página de conversión, su finalidad es que el usuario realice una acción en específico por medio de un botón de llamado a la acción (call to action), a donde tus clientes potenciales llegarían después de hacer click en este.

Generalmente los “call to action” los encontramos en las redes sociales, newsletter, página web, o cualquier otro tipo de fuente online.

¿Para qué sirve una Landing page?

Y si te estás preguntando ¿Para qué sirve? ¿Qué voy a obtener de una landing page?

Es sencillo, queremos generar más leads llegar a nuestro público objetivo. Generalmente recurrimos a una landing page cuando queremos dar visibilidad especial y aumentar nuestra tasa de conversión, como cuando es el lanzamiento de un nuevo producto o servicio, una oferta, una campaña de publicidad en específico, una promoción a un evento, etc.

Con la tasa de conversión nos referimos al porcentaje de usuarios que cambian su estatus de ser solo un visitante a ser un cliente de tu marca.

En muchas ocasiones el uso de una “página de aterrizaje” es en la primera etapa del embudo de ventas, cuando el usuario se encuentra en la etapa de descubrimiento, pero aún no está listo para realizar la compra.

Ventajas de una Landing Page

Uno de los principales objetivos de una landing page es el de aumentar la visibilidad de tu marca en internet y atraer nuevos clientes, sin embargo tiene diversas ventajas que te pueden ayudar en el crecimiento de tu marca como:

  • Potenciar un producto. Una landing page te puede ayudar en aumentar el alcance de tu producto y/o servicio.
  • Atraer usuarios que aún no conocen tu producto o servicio. Y es que si ofrecemos algo de interés a nuestros usuarios, como un ebook, una plantilla, etc. Ellos estarán dispuestos a proporcionarnos datos de contacto para posteriormente comunicarte con ellos, como su correo, nombre, teléfono, información que te pueda servir.
  • Segmentar ofertas. Si cuentas con más de un producto, puedes enfocarte en ofertas de alguno en específico o el lanzamiento de algún producto nuevo.
  • Direccionar a tu cliente potencial. Al mandarlo a una landing page evitaras que se distraiga y lo guiaras a que realice la acción deseada.

¿Cómo funciona una landing page?

Una landing page cumple con una serie de pasos que sigue nuestro cliente potencial, como se muestra en el gráfico de abajo:

  1. El primer paso es que el usuario da click en el llamado a la acción que haya sido de su interés.
  2. Posteriormente llega a nuestra página de aterrizaje para realizar la acción deseada y comenzar con el proceso de conversión.
  3. Para finalizar el usuario recibe una respuesta, generalmente es una página de agradecimiento donde se les da indicaciones por ejemplo de que su ebook llegara a su correo electrónico, o que recibirán el link para iniciar la descarga, etc.

¿Cómo funciona una landing page?

Diseño de una Landing page

Una de las características de una landing page es la de centrarse en la oferta ofrecida y no distraer al usuario con otros elementos, ya que su objetivo principal es la conversión.

Por eso se recomienda que el diseño de una landing page sea simplificado, la sencillez en la navegación es una forma de evitar la distracción de los usuarios.

Existen elementos que son indispensables para el éxito de una landing page, y a continuación te explicamos cada uno de ellos.

Título

El título es uno de los elementos más vistos por eso es importante dar un mensaje claro de la propuesta de valor que sé está ofreciendo y de una forma convincente para generar confianza con tus potenciales clientes.

Por eso debe de ser claro, llamativo, directo y que contenga la palabra clave.

Oferta

Una persona simplemente no entrará a un sitio web a dejar sus datos personales, por eso es importante que nuestra oferta tenga una propuesta de valor interesante para los usuarios, por la cual decidan llenar el formulario.

Para esto es importante tener definido a nuestro cliente ideal, para conocer sus necesidades o problemas y ofrecer algo que le dé solución a lo que está buscando.

Llamado a la acción

Los CTA “call to action” es lo que esperas que haga tu visitante en tu página, es necesario colocarlo donde el usuario tenga fácil acceso y no necesite hacer scroll para encontrarlo.

Generalmente es una solo palabra o una frase imperativa, donde le indicas al usuario cuál es la acción especifica que quieres que realice.

  • Descargar E-book
  • Registrarme
  • Programa tu consultoría
  • Comprar ahora
  • Descárgalo ahora

Como crear un call to action para convencer a tus clientes

Formulario de contacto

El formulario de contacto en una landing page es muy importante, ya que a través de este obtendremos la información que necesitamos de nuestros potenciales clientes para hacer nuestra labor de venta.

Por eso es importante tener un formulario simple, pero que cumpla con su principal objetivo, obtener la información que será útil para la empresa, como nombre, correo electrónico, ubicación, y datos que te ayudaran a tener una comunicación con tu lead.

Entre más simple, intuitivo y fácil de llenar tu porcentaje de éxito será mayor, ya que los formularios con muchos campos son considerados como burocráticos.

Imágenes

Elige imágenes ligeras, archivos entre 100 y 200 KB, ya que con archivos que pesen poco la velocidad de carga de tu página se vera beneficiada y con eso la experiencia del usuario (UX).

Tu imagen tiene que transmitir el propósito de tu landing page, así como complementar tus textos.

Copywriting

Con el mensaje adecuado sobre tu oferta, que genere empatía con tus usuarios, que lo consideren atractivo y les dé la idea clara de lo que obtendrán, podrás incrementar tu porcentaje de conversión, logrando que realicen tú CTA.

La redacción de tus textos con uso de palabras clave, persuasivos y directos. Textos que conecten con tus potenciales clientes, logrando que confíen en tu marca, es un elemento importante en tu landing page así como tu sitio web.

Diseño web responsive

El diseño web responsive es obligatorio y no solo para tu landing page sino también para tu sitio web. Esto quiere decir que tu página tiene que estar creada para que se visualice bien en cualquier tipo de pantalla (ordenadores de escritorio, tablet, smartphone).

Hoy en día la mayoría de los usuarios navegan en internet desde un smartphone, por esto si queremos tener éxito en la campaña de marketing y que nuestro alcance sea mayor es importante el diseño responsive.

Thank you page

Con una thank you page, le estamos dando las gracias a nuestros usuarios así como indicando que ha completado una acción en la landing page. Con esto la experiencia de usuario mejorará y tus leads recibirán un mensaje de que la acción ha finalizado.

No nos olvidemos del SEO

Una landing page también necesita de técnicas SEO para el posicionamiento en los motores de búsqueda, por esto te recomendamos hacer uso de ellas, entre más optimizada este tu landing page mejor será vista por Google.

Recuerda que Google considera más de 200 factores para el posicionamiento orgánico por eso haz uso de técnicas SEO como:

  • Uso de keywords en el contenido.
  • Uso de alt text en las imágenes
  • Uso de las keywords en la meta description
  • Una URL que tenga sentido con la oferta

Entre muchas otras que te ayudaran a posicionar mejor tu página y obtener mejores resultados.

En conclusión…

Las landing page juegan un papel importante en tu estrategia de marketing digital y tu proceso de venta. Haz uso de estas herramientas para generar más oportunidades y hacer crecer tu negocio. Solo no te olvides de las necesidades de tus potenciales clientes, ofrecerles contenido de calidad y de los elementos que son necesarios en una página de aterrizaje.