Primeros pasos e impresiones del tema twentyseventeen de WordPress

Primeros pasos con el twentyseventeen
El primer paso, como siempre, es configurar un child theme.

Hace un par de semanas me regresó la inspiración y decidí escribir algo para mi abandonado blog. El caso, es que una vez que publiqué aquella última entrada, noté que mi lindo blog, que hacía un par de años tanto me había gustado, en realidad se veía bien ñoño, que le hacía falta una manita de gato y una urgente actualizadita.

Así que me puse a buscar qué había entre los temas más recientes y populares de WordPress, sobre todo, algo que estuviera enfocado al contenido o estuviera pensado para un blog. Nada de lo que vi me convenció. Después recordé que el tema último modelo de WordPress estaba por ser lanzado y decidí echarle un vistazo.

Ahora sí, hablemos del twentyseventeen

En esta ocasión WordPress nos presenta el tema twentyseventeen (2017), el cual, está pensado para un sitio corporativo (o bien, de una compañía o un negocio).

Entre sus características principales puedo listar:

  • Permite configurar y mostrar la imagen de una marca. El tema te permite agregar un logotipo al lado del nombre así como una imagen que sirva de ícono para los navegadores (favicon) o de App Icon.

    Configuración de la identidad corporativa en el twentyseventeen
    El twentyseventeen ya permite elegir una imagen de forma “nativa” para que aparezca como logotipo, favicon o icon App
  • También permite crear de manera sencilla una página estática de portada con diferentes secciones. Cada sección va separada con imágenes con un efecto de transición parecido al parallax pero sin tanto movimiento. Este tipo de acomodo es muy bien utilizado para dar una idea general de los servicios, localización, horarios y presentación de un negocio.
  • Menú de redes sociales: Es un menú que aparece en área de footer. Lo especial de este menú, es que no hay necesidad de un plugin externo para agregar el área social del sitio, sólo basta poner la URL del perfil de Facebook, Twitter u otra red social y automáticamente lo va a mostrar como un elegante ícono. Si agregas la URL de un sitio que no sea red social (o que no reconozca), el ícono que aparecerá será el de una cadenita.

    Menú Social en el twentyseventeen
    En el área del footer el tema trae de forma “nativa” una forma de agregar un menú social. Ojo: Para sacar el ícono de la cartita hay que poner mailto: seguido del correo como URL.
  • El menú principal de navegación es horizontal y de tipo sticky, o séase, que se queda pegado en la parte superior de la pantalla mientras exploras la página. Una opción bastante cómoda y útil de navegación.
  • Y finalmente, cerrando con las características generales, el tema es responsivo, permite 1 o 2 columnas, imágenes destacadas y flexibilidad de personalización.

Primeros pasos e impresiones

Tema twentyseventeen de Worpress
Su mayor característica es la colosal imagen en su cabecera

Pues lo primero que noté y que seguro es lo primero que todos van a ver, es la colosal imagen de portada. El twentyseventeen presume mucho de la utilización “elegante” de grandes imágenes, que como varios hemos tenido la desgracia de comprobar, es algo que resulta bastante atractivo para los clientes. Incluso permite agregar un video en la cabecera.

Y pues, si bien nunca he sido fan de este tipo de diseño, creo que es una alternativa interesante para aquellos que quieran causar un impacto visual, a final de cuentas, se ve bastante bien en el sitio demo.

Las únicas consideraciones que pienso que hay que tomar, es que se preocupen por utilizar una imagen profesional y de buena calidad (igual con el video, si no, que dios nos ampare).

Literalmente, la imagen que se elija en esa área es lo único y lo primero que alguien va a ver una vez que entre al sitio. Por lo tanto, si encuentra que la foto es un selfie de alguien que no se bañó o si la resolución no es suficiente, pensarán en todo tipo de calificativos excepto “elegante”.

Página Estática en iPad
En un teléfono o tablet sólo veremos imágenes estáticas, hay que cuidar que las imágenes no sean tan altas, si no empujará innecesariamente el contenido hacia abajo.

Lo segundo es la plantilla de la página principal. Como había mencionado antes, el twentyseventeen se diseñó pensando principalmente como base de sitio web para una compañía o negocio, entonces ofrece la opción de colocar una página de presentación como página principal en vez de un feed de posts. Esta página permite mostrar diferentes secciones (que en realidad son diferentes páginas) separadas por una imagen (se configura como featured image en el área de admin), también colosal, con un entretenido efecto de transición.

En esta parte, lo único que me preocupa es el uso excesivo que se pueda hacer de las imágenes. Las imágenes de esta área ocupan un gran espacio en la pantalla, así que para que luzcan, deben ser grandes. Tomando en cuenta que el tema te permite poner hasta 4 secciones, entonces estamos hablando de 4 imágenes grandes adicionales a la de la cabecera; no quiero pensar cómo es que esto va a repercutir en el performance del sitio.

Además, el encanto del efecto de estas imágenes sólo pueden apreciarse si el sitio se está viendo desde una lap o computadora de escritorio, ya que al parecer, en tablet o teléfono, el efecto de transición desaparece y sólo nos muestra las imágenes estáticas.

Y esto nos trae dos problemas: Número uno, esta práctica es algo que no le gusta a Google, el cual sugiere el uso de imágenes responsivas en vez de redimensionar tanto una imagen muy grande. Y segundo, si las imágenes varían mucho en dimensiones, puede verse feo.

En este caso, será imperativo planear bien las dimensiones de las imágenes para que se vean consistentes, que no vayan a ocupar tanto espacio vertical y buscar opciones que nos permitan generar un archivo menos pesado, por ejemplo: imágenes vectoriales, colores sólidos, pocos colores o con fondos borrosos y con el mínimo de ruido.

Y la última de mis primeras impresiones, que también tiene que ver con el uso de imágenes, consiste en el uso que hace este tema de las featured images (imágenes resaltadas).

Las featured Images en el twentyseventeen se usan de 3 maneras:

  1. Como separador de secciones en la página estática principal
  2. Ilustrando cada post en la plantilla de listado
  3. Como cabezal en las páginas secundarias o de posts
Featured image en lista
Las featured images aparecen ilustrando cada post en la plantilla de listado

Como ya hablé de las implicaciones del punto 1, voy a pasar al 2 y 3 respectivamente.

Ilustrando cada post: El twentyseventeen posee una plantilla de listado que muestra un excerpt de cada nueva entrada que se va publicando.

Featured Images
Hay que cuidar las dimensiones de las imágenes.

Debajo del título es donde va a aparecer la featured image, lo cual me parece un buen detalle, pues permite darle un toque personalizado a cada post y aparte tiene un sutil efecto de hover. Sin embargo, habrá que prestar atención para que las imágenes que designemos como ”featured” sean consistentes en sus dimensiones, ya que imágenes muy altas pueden empujar demasiado el contenido hacia abajo o la desigualdad entre las dimensiones puede verse fea.

Como cabezal en páginas secundarias: El twentyseventeen también hará uso de las featured images para encabezar cada página secundaria o de post. El mayor problema que veo aquí, es que el área designada para este cabezal parece ser el ancho completo de la página, ocupando nuevamente, imágenes grandes.

Featured Image
En el demo se ve bien la featured image, pero nótese que la imagen es gigante también, lo cual no es muy recomendable porque esconde el contenido

Además, si el sitio web tiene habilitada la imagen de cabecera, entonces la featured image, puede verse de más, sobre todo si el sitio no tiene la barra de navegación activa que separa ambos elementos.

Featured Images en el área de posts.
No recomiendo el uso de featured images para posts. Aunque las dimensiones estén correctas, se ve excesivo

Por otro lado, si esta imagen no es grande, o no se planearon las dimensiones, el tema sólo la colocará en el centro con su tamaño original, lo cual, creo yo, se va a ver horrendo en la mayoría de los casos.

Featured Image, efecto no deseado 1
En la mayoría de los casos, la featured image no va a quedar bien como cabecera

El mal uso que el twentyseventeen hace de las featured images me parece una de sus grandes flaquezas hasta el momento, pues, por un lado, te obliga a estar utilizando imágenes grandes para cada entrada que publiques, o bien, te obliga a no utilizarla del todo y es como tener in-habilitada esta capacidad.

¿Qué hacer y qué no hacer con el twentyseventeen?

  • Aunque el twentyseventeen fue pensado para sitios corporativos o de negocios, es en realidad muy versátil, también me parece útil para sitios personales o blogs.
  • Para lo que no me parece muy adecuado es para revistas o periódicos en línea, ya que por su diseño limpio y gran uso del espacio en blanco, no cuenta con mucho para colocar publicidad o contenido secundario.
  • Trabajar con este tema va a requerir de una excelente planeación de los recursos gráficos.
  • Explora la flexibilidad del tema. No es obligatorio seguir el diseño del tema, puedes prescindir de poner imágenes tamaño Godzilla en todas partes.
  • Cuida que las imágenes que utilices tengan dimensiones similares.
  • Reserva el uso de Featured images sólo para las divisiones de la página estática principal.
  • No abuses del uso de imágenes.
  • Si vas a colocar un video en la cabecera, házlo con responsabilidad y buen gusto. No uses cualquier cosa que te encuentres en Youtube.
  • Parece que el mayor encanto de este tema se aprecia desde una computadora de escritorio, así que no te confíes y revisa el diseño constantemente en dispositivos móviles.

Y en conclusión…

A pesar de que el twentyseventeen parece haberse diseñado siguiendo las tendencias visuales del momento (famosas por dañar el performance y luego caer en mal gusto), también tiene mucho potencial para lograr muy buenos sitios con diseños interesantes, si es que se planea bien el uso de los recursos gráficos.

Uno de los objetivos del twentyseventeen según sus creadores, fue la facilidad de configuración. Esto es algo que les concedo, todos los cambios que hice para mi blog lo conseguí desde las opciones del administrador, lo cual encontré sencillo y rápido.

Creo que a pesar de que puede estar mejor, el twentyseventeen es un buen tema para utilizar de base, es flexible, limpio y versátil.

Pues bien, como mencionaba antes, éstas son sólo unas primeras impresiones con el nuevo tema de WordPress, si quieren comenzar a probarlo y ver sus opciones de configuración, pueden revisar los siguientes recursos: