La capacidad de respuesta en el diseño web ya no es opcional. Casi nadie discutiría con esa premisa, a menos que hayan estado viviendo en una cueva durante la última década. El verdadero debate radica en cuál es la mejor manera de hacer que sus diseños respondan. ¿Debería comenzar sus diseños desde un punto de vista móvil y avanzar hasta las vistas regulares? ¿Debería limitarse a ajustar sus diseños terminados a dispositivos móviles? Es una elección complicada.
El flujo de trabajo de todos es diferente y es probable que ya haya desarrollado su propio enfoque para el diseño receptivo. Lo único que podemos afirmar con casi absoluta certeza es que si aún no ha comenzado a incorporar unidades de ventana gráfica (por ejemplo , vw , vh y rem ) en su CSS, se lo está perdiendo.
Antes de sumergirnos en la incorporación de estas unidades en Divi para crear páginas fluidas, repasemos exactamente qué las hace preferibles al uso de unidades de medida regulares.
Vw (ancho de la ventana) y vh (altura de la ventana) son unidades de longitud que representan exactamente el 1 % del tamaño de cualquier ventana, independientemente de sus medidas. Rem (abreviatura de ‘root em’) también es similar en su funcionalidad, aunque se ocupa específicamente de los tamaños de fuente y deriva su nombre del valor del tamaño de fuente del elemento raíz, que debería ser de 16 píxeles por defecto en la mayoría de los navegadores.
También hay algunas unidades de ventana gráfica más disponibles para su uso (aunque se usan incluso menos que vw y vh ), como vmin (ventana gráfica mínima) y vmax (ventana gráfica máxima) que se refieren respectivamente al 1 % de la dimensión más pequeña de la ventana gráfica. , y el 1% de su dimensión mayor. También tenemos ex (altura x) y ch (unidades de caracteres), que son incluso menos comunes que vmin y vmax: principalmente debido a lo increíblemente específicos que son. La altura X, por ejemplo, usa el tamaño de una ‘x’ minúscula para determinar su valor base, que es aproximadamente igual a 0,5 em (es decir, 8 píxeles o una fuente de 6 puntos), y las unidades de caracteres usan la medida de la ‘ 0’ carácter como su punto de referencia.
Para resumir, si alguna vez se encuentra leyendo detenidamente el CSS de otra persona y se encuentra con estas unidades relativas, haría bien en dirigirlo a la institución de salud mental más cercana.
Curiosamente, los navegadores en realidad calculan toda la ventana del navegador en lo que respecta al ancho, lo que significa que tienen en cuenta la barra de desplazamiento en esta dimensión. Si intenta establecer el ancho de un elemento en un valor de 100vw, forzaría a que apareciera una barra horizontal, ya que estaría estirando ligeramente su ventana gráfica.
¿Cuál es la ventaja de usar unidades de ventana gráfica?
En pocas palabras, al implementar correctamente las unidades de ventana gráfica, puede crear un efecto de respuesta fluida que es bastante diferente de un sitio web adaptable simple. Un diseño receptivo ajustará automáticamente su tamaño a medida que cambie su ventana gráfica, mientras que un diseño adaptativo se corregirá solo una vez que su ventana gráfica alcance un tamaño específico, gracias al uso de consultas de medios.
La ventaja es obvia desde el punto de vista estético: un diseño fluido simplemente se ve mejor. Además, el uso de ventanas gráficas sobre unidades fijas presenta la ventaja adicional de ser más fácil de implementar y mantener. La implementación de un diseño adaptable, en la mayoría de los casos, requerirá la adición de múltiples consultas de medios, con valores específicos que deben ser perfectos en píxeles.
Además, el uso de unidades de ventana gráfica le permite diseñar fácilmente su texto para permanecer siempre en una longitud de línea cómoda, y luego hacer que esa experiencia se escale hacia arriba o hacia abajo a medida que se ajusta su resolución. También puedes modificar tu CSS para que tu texto siempre sea proporcional, así:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
h1 {font-size: 6vw;}h2 {font-size: 3vw;}p {font-size: 2vmin;} |
En ese ejemplo, su texto siempre permanecería proporcional entre sí y al ancho de su ventana gráfica a medida que cambia. Incluso puede ir un paso más allá y usar estas unidades para crear contenedores para su texto que, con el ancho adecuado, siempre proporcionarán una longitud de línea óptima como mencionamos anteriormente.
Tomemos un crack en otro ejemplo corto y dulce. Esta vez, crearemos algunos cuadros utilizando unidades de ventana gráfica que servirán como una demostración básica de páginas fluidas. Comenzamos con el HTML:
|
01
02
03
04
05
06
07
08
09
|
<h1>Example of Fluid Responsiveness</h1><div class=”responsivebox”></div><div class=”responsivebox”></div><div class=”responsivebox”></div><div class=”responsivebox”></div> |
Luego pasamos al CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
|
body {padding: 3vh 3vw;text-align: center;}.responsivebox {display: inline-block;width: 16vw;height: 60vmin;margin: 2vh 2vw;background-color: #81d8d0;} |
Una mirada rápida al código debería ser todo lo que necesita para descubrir exactamente lo que hace. Primero, creamos cuatro divs con la clase responsivebox , luego les dimos ancho, alto y margen, todo usando unidades de ventana gráfica. Lo único que nos falta es darle a h1 un tamaño relativo para tener una página 100% fluida (aunque muy básica), así que sigamos adelante y corríjalo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
|
body {padding: 3vh 3vw;text-align: center;}h1 {font-size: 6vw;}.responsivebox {display: inline-block;width: 16vw;height: 60vmin;margin: 2vh 2vw;background-color: #81d8d0;} |
Estos son los conceptos básicos de lo que se puede lograr con las unidades de ventana gráfica, pero como es de esperar, algunas personas han llevado su implementación más allá y han improvisado algunas cosas realmente geniales al usarlas: eche un vistazo a este CSS MacBook en CodePen , por ejemplo .
Si echaste un vistazo al CSS, es posible que hayas notado cómo mezcla unidades de ventana gráfica con valores de píxeles antiguos regulares para lograr un efecto muy bueno. Nuestro punto es que, como con todo lo demás relacionado con CSS, el cielo es el límite cuando se trata de lo que se puede hacer con él.
Con lo básico detrás de nosotros, es hora de seguir adelante y aplicar nuestra nueva sabiduría al tema Divi .
Cómo usar unidades de ventana gráfica con Divi
Hasta ahora, todo lo que hemos cubierto ha sido bastante sencillo y, afortunadamente para usted, seguirá siendo así, ya que usar unidades de ventana gráfica para crear páginas Divi es bastante simple.
De hecho, todo lo que necesita para lograr esto es familiarizarse un poco con el constructor Divi y saber cómo agregar CSS personalizado a sus secciones y módulos. Luego, solo es cuestión de modificar el código hasta que esté satisfecho con los resultados. Una vez que esté dentro de Divi Builder, querrá hacer clic en uno de estos íconos para abrir la ventana de Configuración de la sección o módulo correspondiente:
Cada una de estas ventanas tendrá una pestaña de CSS personalizado , lo que le permitirá agregar fácilmente CSS a todo el bloque en un solo movimiento. Para mantener un mayor grado de control sobre el tamaño de sus módulos, querrá agregar CSS directamente a ellos, en lugar de sus contenedores:
Usemos uno de los diseños predefinidos de Divi como campo de pruebas. Este es el diseño básico de la página de inicio , con un par de pequeños ajustes:
Si desea seguir nuestro proceso de prueba sin afectar ninguna de sus páginas de WordPress existentes , simplemente cree una nueva página, active Divi Builder, haga clic en Cargar desde biblioteca y elija cualquiera de los múltiples diseños predefinidos disponibles. Le recomendamos que lo haga, ya que no podemos mostrarle exactamente estas páginas fluidas en acción; además, lo ayudará a familiarizarse con el proceso.
El diseño básico de la página de inicio es una combinación simple de una pequeña cantidad de módulos. Un control deslizante, un encabezado de ancho completo, cuatro anuncios publicitarios con los iconos correspondientes y una llamada a la acción. Juguemos un poco con ese control deslizante:
Como puede ver, configuramos el ancho del control deslizante al 75% del ancho de la ventana gráfica, un tamaño de fuente de 5 rem (que es relativo al valor de tamaño de fuente predeterminado del HTML). Aunque el efecto se parece bastante a la capacidad de respuesta predeterminada de Divi, con esta configuración podrá ejercer un mayor control sobre cómo se verá su sitio en diferentes resoluciones.
Ahora, pasando al encabezado de ancho completo. Si todo lo que está usando es un título simple como lo hace el diseño básico de la página de inicio , querrá ingresar su CSS en el cuadro Título dentro de la pestaña CSS personalizado :
Los tamaños de fuente pueden escalar bastante rápido usando unidades rem, así que tenga cuidado. Si bien el encabezado en cuestión se estableció en 30 píxeles de forma predeterminada en este diseño, anular ese valor con 5 rem como se ve arriba daría como resultado el equivalente a un tamaño de fuente de 80 píxeles.
Para nuestro ejemplo final, intentemos algo un poco diferente. Como habrás notado, el diseño básico de la página de inicio incluye cuatro anuncios de texto con íconos que los acompañan. Ahora, con un ajuste bastante simple en solo dos de estos anuncios: el segundo y el cuarto…
…podemos obtener un efecto de escalado bastante agradable (y totalmente receptivo):
Como puede ver, implementar unidades de ventana gráfica en su CSS para crear páginas Divi fluidas es bastante simple. Todo lo que necesita es un poco de tiempo y paciencia para modificar la configuración de su módulo hasta que esté satisfecho con los resultados en múltiples resoluciones.
Por supuesto, deberá probar estas configuraciones constantemente para ver cómo se mantienen; lo tenemos cubierto allí .
Conclusión
La importancia de crear diseños listos para dispositivos móviles difícilmente puede exagerarse, como todos sabemos. Los dispositivos móviles se han convertido en la norma tan rápidamente que no incorporar la capacidad de respuesta en sus diseños puede equivaler a afirmar que no le importa su éxito. Todo esto significa que es importante mantenerse a la vanguardia en lo que respecta a las mejores prácticas.
En lo que respecta a Divi, tenga en cuenta los siguientes consejos al crear páginas fluidas:
- Familiarícese con la nueva opción CSS personalizada dentro de la configuración de Divi Builder.
- Utilice unidades de ventana gráfica para crear cuadros fluidos para los «bloques de construcción» de su página.
- Pon a prueba tu CSS comprobando si tus páginas resisten varias resoluciones.
¿Tienes algún truco bajo la manga cuando se trata de un diseño receptivo? ¡Compártelos con nosotros y suscríbete a la sección de comentarios a continuación!
Imagen en miniatura del artículo por yurikslb / shutterstock.com