El concepto de página o lienzo en blanco

Sin olvidar los conceptos convencionales del diseño de páginas web, que siguen siendo necesarios para entender su estructura y función, conviene que, a la hora de elaborar diseños más modernos e innovadores, pensemos más en términos de página en blanco (o lienzo en blanco), sobre el que podemos «pintar», más o menos libremente. Nuestra capacidad de «pintar» dependerá en gran medida de la potencia de las herramientas que manejemos, pero también, y sobre todo, de nuestro talento como diseñadores.

Pensemos, pues, en nuestras futuras páginas web no tanto como construcciones dependientes de un marco de referencia prefijado (el tema o plantilla), sino como espacios vacíos que vamos a organizar de acuerdo con nuestras necesidades funcionales, el contenido que pensamos insertar, y el diseño más apropiado para lograr los objetivos comunicativos y de diseño que nos hayamos marcado.

El concepto de cuadrícula

Como ocurre a muchos escritores cuando se ponen ante la hoja de papel en blanco, dibujar o pintar sobre un lienzo vacío genera a menudo una sensación de angustia, especialmente a los usuarios noveles, porque no saben por dónde empezar ni cómo manejar sus herramientas. Pues bien, para alejar de nosotros esta molestísima sensación y aproximarnos de forma eficiente a la realidad de un sitio web, aconsejamos añadir a la metáfora del «lienzo en blanco» otra metáfora visual y conceptual: la de «cuadrícula» o «rejilla».

Si concebimos nuestra página web como un espacio dividido en filas y columnas que se cruzan entre sí, enseguida podremos imaginar la cuadrícula formada por esa intersección. Esta idea de la página web organizada en una o varias cuadrículas nos ayudará sobremanera a diseñar los elementos constitutivos de la página e insertar contenido en ellos.

El concepto de cajas

Cada uno de los espacios delimitados por la intersección de las columnas y las filas de la cuadrícula imaginaria que acabamos de definir puede concebirse, a su vez, como una «caja», en la que podemos insertar diversos elementos de contenido. Pulsando sobre el botón que aparece a continuación podemos ver un ejemplo de este modelo de diseño:

En resumen, hemos de pensar en nuestra página web como un lienzo en blanco, sobre el que superpondremos una o varias cuadrículas. En cada cuadro de esas cuadrículas, es decir, en cada caja, insertaremos (o no) los elementos de contenido que nos hagan falta para lograr los objetivos planteados. A lo largo de las diferentes sesiones de este curso, y especialmente en las sesiones cuarta y quinta, aprenderemos las técnicas necesarias para conseguirlo.

La entrada Página en blanco, cuadrícula y cajas se publicó por primera vez en Curso de WordPress 2020.

Cuándo hay que rediseñar un sitio web

El rediseño de un sitio web es un proceso complejo que puede representar muchas horas de trabajo Por tanto, conviene plantearse seriamente en qué circunstancias merece la pena embarcarse en esa tarea, ya que, a menudo, el rediseño no es más que una parte de un proceso más amplio de cambios y actualizaciones. A continuación detallamos algunas de las circunstancias más habituales, con las orientaciones correspondientes.

• Cuando el sitio web no funciona bien o presenta errores. Este es probablemente el peor escenario posible, pues las causas de este comportamiento pueden ser muchas y a menudo no fáciles de resolver si no medía el asesoramiento de un experto. Por tanto, mucho antes de plantearse cualquier trabajo de diseño, habrá que realizar un análisis técnico a fondo, y actuar en función de sus resultados.
• Cuando el sitio web tiene un aspecto y funcionalidad desfasados. En la mayor parte de los casos, esta situación obligará a un cambio de tema y un rediseño a fondo de todo el sitio.
• Cuando el sitio web no se comporta bien en dispositivos móviles o tabletas. Esta situación no es sino una variante de la anterior, pero la hemos desglosado por la importancia que desde hace años tiene la experiencia de navegación en dispositivos móviles. Como en el punto anterior, cualquier mejora de diseño probablemente pase antes por un cambio de tema, lo cual, a su vez, puede exigir muchas e importantes modificaciones del sitio web.
• Cuando el aspecto y funcionalidad del sitio son aceptables, pero existen aspectos inadecuados. En la mayor parte de estos casos, los fallos se deben a prácticas incorrectas, que habrán de ser identificadas y corregidas.
• Cuando el aspecto y funcionalidad del sitio son aceptables, pero se pretende hacerlo más funcional y atractivo. Esta es la situación en la que vamos a centrarnos en este curso, y para ello veremos cómo se pueden rediseñar algunas de las páginas clave de un sitio web, como por ejemplo la página de inicio, algunas páginas especiales, etc.

Qué conviene rediseñar

Tal como hemos indicado en artículos previos, recomendamos que los trabajos de rediseño de un sitio web determinen, al menos en un principio, unos objetivos modestos y factibles que puedan alcanzarse en un periodo de tiempo relativamente breve y con un esfuerzo razonable.

De acuerdo con este principio operativo, las demostraciones y prácticas que vamos a realizar en esta primera sesión del curso se centrarán en el diseño de una nueva página estática, destinada a convertirse en la página de inicio del sitio web.

Esa página puede mantenerse en estado de borrador todo el tiempo que sea necesario, y solo se publicará y configurará como página de inicio del sitio (desde el menú Ajustes> Lectura), cuando hayamos cobrado suficiente confianza en las técnicas y procedimientos de diseño visual que proporciona el editor de WordPress.

Limitaciones del editor de WordPress

Es preciso tener muy en cuenta que el editor de bloques de WordPress: está limitado por el momento a la edición del contenido de las entradas y las páginas. Esto significa que el editor no puede utilizarse para modificar varios elementos clave de un sitio web, a saber:

• La cabecera.
• El pie de página.
• Los menús.
• Las áreas de widgets y los widgets.
• Las páginas de archivo o índice, y las páginas especiales, como la página de error 404.
• Las plantillas de páginas y entradas.

Si nos vemos en la necesidad de rediseñar esos elementos, tendremos que utilizar técnicas y herramientas especiales, que abordaremos en la cuarta y quinta sesiones de este curso.

El futuro del editor de WordPress

La situación que hemos descrito en el párrafo precedente va a cambiar de forma radical en un tiempo relativamente breve. De hecho, está previsto que la edición basada en bloques pueda llegar a utilizarse en todas las demás áreas de WordPress. En esta dirección avanza el desarrollo del plugin Gutenberg, cuyas últimas versiones ya incluyen, aunque todavía de forma experimental, la capacidad de utilizar la edición con bloques en el diseño global del tema. Un panorama muy sugestivo del estado actual de la evolución de la edición mediante bloques es el que describen estos dos artículos: Cómo crear un tema con bloques desde el editor – La revolución llega por fin a WordPress. y WordPress en 2020 – Lo que nos espera … quieras o no.

El problema de los temas

Además de las limitaciones propias del editor de WordPress, la tarea de rediseño de un sitio web puede verse entorpecida por otro obstáculo: que el tema utilizado en el sitio web no sea compatible con las innovaciones propias del nuevo editor de WordPress y su enorme variedad de bloques.

En efecto, si el tema no es compatible con esas innovaciones, resultará imposible utilizar muchos de los bloques más vistosos y elegantes, como por ejemplo las imágenes de anchura completa o las imágenes de fondo. Mejor dicho, se podrán utilizar, pero no tendrán el efecto apetecido sobre la apariencia del sitio web; en algunos casos, hasta es posible que tengan un efecto negativo.

Desde un punto de vista conceptual, la solución a este problema es fácil: sustituir el tema por otro que esté actualizado y sea plenamente compatible con el nuevo editor. Sin embargo, esa alternativa a veces puede ser imposible de abordar, porque obliga a un rediseño completo de todo el sitio.

Situación de los temas de la familia Genesis

Aunque el framework Genesis es plenamente compatible con el editor de WordPress, no todos los temas-hijos basados en Genesis permiten obtener todo el partido posible de sus bloques. Conviene elegir, por tanto, un tema moderno que asegure la mayor compatibilidad posible, y de aquí que para las prácticas de este curso vayamos a utilizar el tema hijo Magazine Pro, el cual nos ofrece una compatibilidad máxima con el editor.

En cuanto a los plugins de colecciones de bloques, que abordaremos en la tercera sesión del curso, hemos optado por seleccionar el plugin Atomic Blocks porque se integra perfectamente con los temas de la familia Genesis. Y no solo eso: algunos de los temas más modernos permiten configurar páginas espectaculares basadas en los bloques de este plugin (si la marcha del curso lo permite, haremos alguna demostración de esta técnica).

Por último, los temas de la familia Genesis se comportan razonablemente bien en conjunción con los plugins Elementor y Elementor Pro. Es cierto que su integración mutua no es perfecta, pero las dificultades que puedan derivarse del uso conjunto de estas tres piezas pueden superarse con un esfuerzo relativamente pequeño.

La entrada Diseño visual con el editor de WordPress se publicó por primera vez en Curso de WordPress 2020.