Explorando el tema de WordPress "The Affair": Suave, intuitivo, técnicamente sólido

The Affair es un tema de WordPress para blogs y revistas que se vende a sí mismo como:

"Tema de WordPress limpio y bien pensado para bloggers creativos y editores."

En esta revisión voy a poner a punto el tema, lo voy a instalar en un sitio de prueba, aprovecharé mis 12 años de experiencia profesional con WordPress para evaluarlo, y te contaré en qué destaca exactamente este tema y dónde flojea.

Ten en cuenta que para los propósitos de esta revisión, no voy a hablar de la apariencia del tema. La razón es que ya puedes comprobar por ti mismo cuál es la apariencia del tema a través de sus demos, así que no necesitas que te diga qué debes opinar sobre su aspecto visual.

En lugar de eso, cubriré los aspectos que solo puedes comprobar después de haberlo comprado, cuando empiezas a usar el tema, y dividiré la información en dos secciones clave.

• Parte 1: Experiencia de usuario, centrándose en la instalación y la personalización
  
• Parte 2: Pruebas técnicas, que cubren la velocidad de carga, el SEO, la responsividad y la accesibilidad
  

Luego terminaré con una sección "Veredicto global" para que sepas cuál ha sido el desempeño del tema.

Muy bien, ¡vamos!

Parte 1: Experiencia del usuario

En esta sección usaremos el tema para realizar el típico proceso que una persona promedio llevaría a cabo al empezar con un nuevo tema. Este tema puede instalarse en un sitio existente que ya tenga contenido, pero para garantizar una evaluación justa sin interferencias de contenido antiguo trabajaremos con la pizarra en blanco que proporciona una nueva instalación de WordPress.

Experiencia de instalación

Organización de los archivos descargados

Después de la compra descargarás un archivo zip, y cuando lo descomprimas verás un método muy simple de organización de archivos. Sólo hay un archivo zip del tema, un archivo zip para el tema hijo, una carpeta con dos archivos de texto de licencia y un archivo de texto con la dirección URL de la documentación.

Muchos temas se dejan arrastrar un poco con complejas estructuras de directorios anidados que te obligan a buscar hasta encontrar los archivos de reales del tema, pero en este caso se estos se localizan sin esfuerzo, y desde mi punto de vista eso es un soplo de aire fresco.

Acceso a las instrucciones

La URL en el archivo de texto de documentación anteriormente mencionado te lleva al sitio de documentación para el tema:

La documentación está bien presentada, es legible y de fácil navegación.

También se apreciaría una versión offline de la documentación, aunque la documentación online que se puede añadir a los marcadores del navegador y visitar desde cualquier lugar, también es excelente.

Plugins complementarios sugeridos

Tras la instalación del tema verás un mensaje solicitando que proceses la instalación automática de una selección de plugins que los desarrolladores sugieren que utilices con el tema.

Mis experiencias pasadas con esta característica usando otros temas ha sido que a veces, en mi opinión, los desarrolladores se toman libertades que probablemente no deberían, empujando al empleo de plugins innecesarios y / o incluidos con propósitos de marketing.

Este no es el caso con el equipo de desarrollo detrás de "The Affair". Cada uno de los plugins sugeridos para la instalación tiene una excelente utilidad, y ninguno de ellos está ofreciendo up-sells. Así es exactamente como se supone que se debe usar esta función en WordPress.

Además, la documentación ofrece un completo resumen de lo que es cada plugin y de por qué se aconseja su instalación.

Para resumir esa información:

• Powerkit es una colección de prácticas utilidades que ayudan con cosas como la integración de redes sociales, la presentación de imágenes, las suscripciones a newsletters, etc.
• Contact Form 7 es un histórico plugin de formulario de contacto clásico
  
• Kirki ayuda con la personalización
• One Click Demo Import ayuda con el proceso de configuración de la importación del contenido de demostración
  
• Post Views Counter puede mostrar el número de veces que se ha visto una publicación
  
• Regenerate Thumbnails te ayuda a aplicar este tema correctamente a un sitio preexistente, cambiando el tamaño de las miniaturas de la imagen para que se adapten al nuevo diseño.
• SearchWP Live Ajax Search permite mostrar resultados de búsqueda predictivos mientras se escribe esta
  

Todos estos son útiles y dignos plugins cuya instalación se sugiere.

Contenido de demostración

Durante el proceso de instalación, el tema te pide que añadas tu código de compra para añadir contenido de demostración. Una vez hecho esto, también te guía a través del proceso de importación de ese contenido, y te hace saber que puedes desactivar el plugin de importación de contenido de demostración una vez hecho esto.

El contenido de demostración proporcionado hace un excelente trabajo al encontrar un equilibrio entre mostrar cómo se pueden configurar las cosas y permanecer lo suficientemente neutral como para que se perciba claramente que se trata de contenido de marcador de posición.

Todo el proceso de adición de contenido de demostración fue fluido y sin problemas, muy buen trabajo.

Ajustes preestablecidos de la demostración

Además del proceso de importación de la demostración, en el área de administración Apariencia > Personalizar encontrarás una excepcional característica que desearía que todos los temas tuviesen: una colección de ajustes preestablecidos que reflejan las demostraciones del tema.

A veces, al usuario de un tema le puede resultar bastante complicado replicar lo que han visto en las demostraciones, pero "The Affair" elimina por completo esta dificultad, se puede replicar cualquier demostración dirigiéndonos simplemente a la sección "Theme Demos" (demostraciones del tema) del personalizador:

En esta sección verás siete grandes miniaturas, que representan cada una de las siete demostraciones del tema. Haz clic en el botón Activate (activar) de una de ellas y se configurará automáticamente tu sitio para que se parezca a la demostración correspondiente. (Ten en cuenta que esto alterará cualquier configuración existente).

Todos los ajustes preestablecidos se ven sustancialmente diferentes entre sí, y al mismo tiempo sirven como una gran manera de ponerse en marcha rápidamente, y como escaparate de lo que se puede hacer cambiando los ajustes del tema.

Preajuste de demostración de Amber Decor:

Preajuste de demostración de Salt & Pepper:

Preajuste de demostración de Steal My Style:

Veredicto de la instalación: Claro y rápido

Todo lo relativo al proceso de configuración inicial fue conveniente y rápido. Los archivos descargados han sido organizados de tal manera que podrás localizar de inmediato lo que estés buscando. La instalación del tema y los plugins relacionados fue rápida y gestionada a conciencia por los desarrolladores. La instalación del contenido de demostración fue fácil y sin problemas, y la excelente función "Theme Demos" fue aún más allá consiguiendo que el proceso de configuración fuese rápido y accesible.

Personalización

Añadir la imagen de marca

Logo

Lo primero que la mayoría de la gente quiere hacer en un nuevo tema es añadir su propio logotipo y el nombre de su negocio o sitio. Para lograr esto, la documentación del tema dice que vayas a Apariencia > Identidad del sitio en el escritorio, algo que no es del todo correcto. Primero tienes que ir a Apariencia > Personalizar:

Y después, desde allí, puedes ir a la identidad del sitio. Una vez allí, podrás buscar la imagen de logotipo que quieras mostrar en tu cabecera.

Esta es una manera muy conveniente de añadir un logotipo y prefiero mucho más este enfoque a algunos otros que he experimentado en varios temas. (Por cierto, para esta demostración usaré el logotipo de Hexagon de Envato Elements).

La documentación no indica un tamaño recomendado para la imagen de logotipo que carguemos, diciendo:

"No existe un tamaño de logotipo recomendado, ya que los logotipos se muestran en su tamaño original y serán escalados. Asegúrate de cambiar el tamaño de tus logotipos en consecuencia antes de subirlos a WordPress desde una aplicación gráfica (por ejemplo, Photoshop)."

Sin embargo, es debido al hecho de que las imágenes del logotipo deben ser redimensionadas para su uso en este tema, sería más fácil si la documentación sugiriese una altura máxima que se adapte a los límites del diseño del tema.

El logotipo se muestra en la cabecera, y si la imagen es excesivamente grande, sobresaldrá fuera de sus límites.

Esto le deja al usuario teniendo que averiguar qué tamaño de imagen del logotipo cabe en la cabecera.

Al inspeccionar la cabecera utilizando herramientas de desarrollo del navegador se puede ver que esta tiene 60px de alto, pero el usuario medio no sabrá cómo averiguar esto.

Para permitir el espacio por encima y por debajo del logotipo, te recomendaría una altura máxima de 40px. (No olvides cargar también una segunda imagen a una altura de 80px para las pantallas HiDPI, consulta la nota sobre el protocolo de nomenclatura en la sección del personalizador relacionada).

Una nota extra es que al añadir un logotipo de imagen se elimina el título basado en texto que se muestra nada más instalar el tema por primera vez. Sería buena idea tener la opción de mostrar también el título de texto junto a la imagen del logotipo, pero por ahora, si quieres que tu sitio o el nombre de la empresa aparezca en la cabecera tendrás que incluirlo en la propia imagen del logotipo, por ejemplo:

Colores de marca

"The Affair" tiene una sección Colors (colores) en el personalizador. Algunos ajustes, como los del pie de página y la navegación, realizan un cambio obvio. Pero lo que algunos otros controles de configuración hacen no es inmediatamente evidente, como los colores de fondo del cover. Sería genial disponer de una explicación a estos ajustes añadida a su correspondiente sección en la documentación.

El tema responde muy bien a los cambios en los colores de fondo, como para los menús de navegación o los botones. Si cambias de un color de fondo claro a oscuro, o viceversa, invertirás automáticamente el color de cualquier texto que aparezca sobre dicho fondo para garantizar un contraste y una legibilidad adecuados.

Añadir enlaces de redes sociales

La configuración de los enlaces de redes sociales fue un proceso que se realiza excelentemente mediante el plugin Powerkit instalado durante la configuración. Powerkit trae consigo una serie de subplugins, o módulos, uno de los cuales se llama "Social Links".

Al marcar la casilla en los ajustes de la cabecera (Header Settings) del personalizador especificando que deseas mostrar enlaces sociales (Display social links), se muestra inmediatamente un claro mensaje en la sección de la cabecera donde aparecerán dichos enlaces sociales:

Esto te permite conocer de inmediato que debes dirigirte a otro lugar en el panel de administración para configurar tus enlaces de redes sociales. En Settings > Social Links encontrarás la ubicación en cuestión:

Aquí tienes una extensa lista de plataformas de redes sociales, y todo lo que tienes que hacer es marcar una casilla para cada una a la que quieras enlazar desde tu sitio.

Aparecerá una pestaña para cada casilla que hayas marcado, proporcionando la configuración para la plataforma de redes sociales correspondiente. Revisa las pestañas, añade tus datos para cada red, y listo.

Nota al margen: No olvidaron el Fediverse en este plugin, incluyendo opciones para Mastodon y PixelFed. Como un gran fan de estos proyectos, personalmente, esto me pareció una sorpresa encantadora.

Después de configurar los ajustes del plugin Social Links, puedes volver a la configuración de la cabecera del personalizador y establecer el número de enlaces de redes sociales que deseas que aparezcan en ella. Guarda tus cambios y los iconos de cada red aparecerán en un formato limpio y agradable, incluyendo como extra diseños que muestran el número de suscriptores y seguidores.

Contenido del pie de página

El enlace de pie de página al sitio del desarrollador del tema se elimina fácilmente a través del personalizador borrando el contenido del campo Copyright. Los enlaces de redes sociales también se pueden mostrar fácilmente marcando las correspondientes casillas Display social links (mostrar vínculos sociales), que funciona de la misma manera que se mencionó anteriormente para la cabecera.

Página de inicio

La página de inicio tiene una Hero Section (sección "hero") y una sección Featured Posts (entradas destacadas) habilitadas por defecto. Si no deseas mostrar ninguna de estas, puedes desactivarlas mediante una casilla de verificación en el área de configuración del personalizador para la página de inicio. Si quieres usarlas, los controles del personalizador de cada una son muy intuitivos y su funcionalidad está muy clara.

Unidad hero

Modificar la sección hero resultó ser una operación muy rápida que no requiere esfuerzo ni la consulta de ninguna documentación. Por ejemplo, cambiar su altura y añadir un fondo de vídeo de YouTube:

O añadir una imagen de fondo:

El único problema en esta parte de los ajustes de personalización es que no parece haber una forma de controlar directamente el color del texto superpuesto. Esto puede dificultar la seguridad de que haya suficiente contraste para la legibilidad.

Una solución alternativa que puedes utilizar en su lugar es cambiar los ajustes de Background Color (color de fondo) para que sea similar al color de la imagen de fondo. A continuación, el tema cambiará automáticamente el color del texto para que contraste con él:

Sin embargo, esta opción no está disponible para los fondos de vídeo, por lo que no podrás ver el texto superpuesto en un vídeo de color oscuro:

Es posible que exista un medio para solucionar este problema, pero entre la muy exhaustiva documentación no existe ninguna sección con detalles sobre cómo trabajar con la unidad de hero, así que no puedo estar seguro. En ausencia de una solución, solo tendrás que asegurarte de usar un fondo de vídeo de color relativamente claro.

Entradas destacadas

La sección de entradas destacadas es un control deslizante compuesto por imágenes de las entradas, sus títulos y alguna meta información. No existen muchas cosas que puedas modificar aquí: solo la cantidad de entradas, el número de columnas entre 1 y 3, y algunas opciones de filtrado. Sin embargo, los ajustes presentes son bastante sencillos de realizar.

Diseño de la página de inicio

El resto de la página de inicio, (suponiendo que no la tengas establecida como página estática), consiste en una visualización de tus últimas entradas, y tenemos a nuestra disposición una serie de ajustes para controlar cómo se distribuyen estas.

Puedes determinar si quieres un diseño a ancho completo o en caja, el cómo se organizan tus entradas individuales, si deseas o no una columna lateral, qué fragmentos de meta información deben mostrarse por cada entrada y cómo deseas que funcione la paginación.

El acceso a todos estos ajustes resultó muy intuitivos, y las diversas combinaciones para el diseño de página funcionaron bien en conjunto.

Una pequeña característica a destacar en la página de inicio es el hecho de que se pasa sobre la imagen destacada, esta mostrará el tiempo de lectura estimado del artículo correspondiente.

Otros ajustes de personalización

Ya hemos repasado las configuraciones más importantes para la personalización, así que no vamos a revisar una por una todas las áreas de configuración restantes. En lugar de eso, te voy a proporcionar un rápido resumen:

• Las entradas, páginas, archivos y categorías pueden tener su propio diseño y contenido que son controlados de una manera similar a cómo se controla para la página de inicio
• Existen controles adicionales para la barra de búsqueda, la alineación de la galería, los efectos parallax y el método de carga de las fuentes web
• Los campos "Additional content" (contenido adicional) están disponibles para cargar HTML personalizado antes y después de varias secciones en todo el sitio.

Veredicto del proceso de personalización: Pequeños problemas, pero en general excelente

Si bien la experiencia de personalización no fue 100% perfecta, los problemas que se plantean son manejables. En general, mi sensación sobre cómo se gestiona la personalización en "The Affair" fue que está por delante de la ofrecida por muchos otros temas que he probado.

Es algo habitual que los desarrolladores de temas creen inadvertidamente una experiencia de personalización confusa debido a que proporcionan excesivas ubicaciones en el área de administración y demasiados procesos diferentes con los que trabajar y no proporcionan suficiente documentación.

No es el caso de “The Affair”.

Toda la personalización puede realizarse desde una única ubicación. En donde un plugin complementario debe ser utilizado para la configuración, y para informarte de ello se muestra claramente un aviso en el área del personalizador. Los procesos para cambiar la configuración eran coherentes, por lo que una vez hayas cambiado correctamente una cosa, podrás usar el mismo enfoque para cambiar otras. La documentación es clara y exhaustiva, sólo faltaban un par de pequeñas áreas, por ejemplo, más información sobre la sección hero y la sección del contenido destacado.

Esta ha sido definitivamente una de las mejores experiencias que he tenido con la personalización de temas de WordPress.

Parte 2: Pruebas técnicas

Ahora que hemos terminado de ver la experiencia del usuario para la instalación y la personalización, vamos a comprobar los aspectos técnicos del tema, cosas como la velocidad de carga, el rendimiento, el SEO, su capacidad responsiva y su accesibilidad.

La prueba de velocidad se realizará en nuestro sitio WP en blanco que instalamos localmente para asegurarnos de que no se diesen anomalías causadas por mi propia conexión a Internet.

Las pruebas del SEO y de la accesibilidad se llevarán a cabo con la demostración estándar de "The Affair" para asegurarnos de que se están ejecutando con una instalación completamente configurada del tema.

Las pruebas se realizan con una combinación de herramientas de desarrollo para la velocidad y la responsividad de Firefox, y auditorías de Chrome Lighthouse.

Pruebas de velocidad

Para las pruebas de velocidad estamos utilizando la pestaña Network de Firefox Developer Tools, la cual nos permite desactivar la caché para simular una primera visita al sitio, y para limitar la velocidad de carga con el fin de simular diferentes tipos de conexiones a Internet como 3G, 4G y DSL.

Comencé probando una emulación de la primera carga del tema en mi sitio de prueba local, en la página de inicio con únicamente contenido de demostración, y sin haber realizado ningún paso de optimización. En una conexión 3G simulada esto tardó 14 segundos, lo cual por desgracia no es excesivamente bueno.

En DSL simulado la carga duró 5 segundos, algo que es mejor, aunque todavía no alcanza la ideal velocidad de carga de menos de 3 segundos, es una buena aproximación.

En 4G tardó 2.44 segundos, que cumple nuestro objetivo de estar por debajo de los 3 segundos de tiempo, pero los administradores de la mayoría de los sitios no pueden permitirse asumir que todas las visitas provengan de conexiones 4G o equivalentes a menos que tu audiencia esté en un área geográfica bastante limitada.

La velocidad de carga inferior a la ideal puede estar debida en parte al número de solicitudes: 71. El plugin Powerkit parece ser un culpable significativo detrás de esto, ya que carga archivos CSS y JS independientes por herramienta o módulo que añade al sistema, y viene con un total de 28 módulos. (No todos se activan durante la instalación).

Claramente tendrás que utilizar un plugin que combine y minifique archivos CSS y JS si deseas optimizar los tiempos de carga si combinas este tema y plugin. Yo sugeriría a los desarrolladores que sería genial que ellos mismos seleccionasen un plugin de buena reputación, comprobando previamente que funciona bien con su tema y su paquete de plugins, para posteriormente recomendarlo durante la instalación como un plugin complementario, y proporcionar instrucciones en su documentación sobre cómo ajustarlo durante el proceso de configuración.

Tras ver estos resultados quería comprobar cuál sería la diferencia que se podría alcanzar llevando a cabo un par de optimizaciones.

Instalé el plugin Autoptimize y habilité su configuración de optimización CSS & JS. También activé la opción de Carga diferida en Powerkit. Esto proporcionó alguna diferencia inicial, bajando el número de solicitudes de 71 a 24 y redujo el tiempo de carga resultante con una simulación 3G de 14 a 12 segundos, con DSL de 5 a 4 segundos, y con 4G de 2.44 a 2.35 segundos.

Parecía que incluso con la combinación y compresión CSS y JS, el tamaño del archivo que se cargaba todavía estaba causando algún retardo. Así que accedí también a la configuración de Powerkit y desactivé cualquier plugin que no estuviese siendo utilizado explícitamente, dejando sólo 5 activos.

Esto proporcionó un tiempo de carga de más de 9 segundos en la emulación 3G, 5 segundos más veloz que el valor predeterminado:

Logré una velocidad de 3 segundos en la emulación DSL partiendo de los 5 segundos originales, alcanzando casi nuestro objetivo de estar por debajo de los 3 segundos:

Y he reducido la emulación 4G a 1,49 segundos, mejorando los 2,44 originales:

También intenté desactivar Powerkit por completo y los tiempos se redondear más cerca de los 7 segundos para 3G, 2.3 segundos para DSL, y 1.3 segundos para 4G.

Sin embargo, muchas de las características más útiles del tema son proporcionadas a través de Powerkit, por lo que no recomendaría desactivarlo totalmente. La mejor manera de verlo es que la utilidad añadida por Powerkit puede ser excelente, pero definitivamente debes desactivar las partes del mismo que no estés utilizando.

Ten en cuenta que sería posible aplicar optimización extra con el fin de acelerar aún más los tiempos de carga, a partir de la configuración de una red CDN y de la caché. Los propios autores del tema también ofrecen consejos para mejorar el rendimiento en la documentación.

Veredicto de velocidad, el tema en sí: Bueno tras la optimización

Los tiempos de carga en conexiones rápidas son sólidos una vez que se añade la optimización, pero no es ideal en conexiones más lentas.

Veredicto de velocidad, tema + Powerkit predeterminado: Necesita cambios tras a la instalación

Si sigues las indicaciones y permites la instalación automatizada de Powerkit obtendrás muchas excelentes utilidades, pero pagarás por ella en la velocidad de carga.

Con la aplicación de técnicas de optimización es posible obtener velocidades de carga sólidas y continuar beneficiándote de la funcionalidad ofrecida por Powerkit, por lo que sería muy útil si los desarrolladores pudieran proporcionar más recomendaciones e instrucciones para los usuarios a tal efecto en su documentación en el futuro.

Comprobación del SEO

"The Affair" obtiene puntuaciones 97/100 en la auditoría SEO de Chrome Lighthouse, que es un excelente resultado. Pasa todas las pruebas excepto una, la evaluación del código de la sección principal, las descripciones de los enlaces, las etiquetas alt y algunas otras áreas es magnífica.

La única prueba que no pasa se debe a que alrededor de un tercio de las áreas clicables son demasiado pequeñas. La nota adjunta en la auditoría dice:

"Los elementos interactivos como botones y enlaces deben ser lo suficientemente grandes (48x48px), y tener suficiente espacio a su alrededor, para ser suficientemente fáciles de tocar sin interferir con otros elementos."

Veredicto SEO: Sobresaliente

El tema sólo tendría que hacer un pequeño cambio para obtener una puntuación SEO perfecta, de manera que ocupa una estupenda valoración en esta categoría.

Prueba de la capacidad responsiva

Ajuste entre los breakpoints

A veces los diseñadores hacen que sus diseños se ajusten a puntos específicos que creen que representan dispositivos como tabletas, teléfonos, etc., pero no realizan las comprobaciones necesarias para asegurarse de que el diseño continúa funcionando entre esos puntos fijos.

Me alegra decir que no es el caso de "The Affair". Probé aumentos y disminuciones graduales de 2300px a 300px y todo fluyó sin problemas, ajustándose muy bien en todos los anchos en el rango. Podemos decir con confianza que este tema tiene un tamaño que se adapta a todos.

Retrato y paisaje

Otro aspecto con el que se tropiezan en ocasiones los desarrolladores son los cambios de orientación que hacen que los diseños tengan un aspecto extraño en la orientación vertical u horizontal en los distintos tamaños de pantalla.

Una vez más, con este tema no se dan tales problemas. El diseño continúa siendo perfecto en ambas orientaciones.

Colapso adecuado del diseño

Con el logotipo, el menú y los enlaces sociales todos ubicados en el encabezado, así como el diseño de mensajes de varias columnas en la página de inicio, tenía curiosidad por ver si el diseño se contraería eficazmente y asegurarse de que no hubiera elementos de encabezado superpuestos o columnas estrechas.

"The Affair" tuvo un desempeño admirable en este frente. Tan pronto como ya no había suficiente espacio en el encabezado, se contrajo para mostrar solo un logotipo centrado, y el número de columnas de mensajes cambió dinámicamente dejando un espaciado correcto en todos los tamaños de ventana gráfica.

Navegación táctil

Un problema que todavía, sorprendentemente, permanece en la web actual es la falta de controles táctiles en los elementos clave de la navegación.

Una vez más, “The Affair” no presenta este problema.

He probado los menús desplegables utilizados en el tema en la pantalla grande del iPad Pro. Hice esto porque un error común entre los desarrolladores es asumir que cualquier pantalla grande es un monitor de escritorio o portátil, y que el usuario tiene un ratón o trackpad con el que pueden pasar el ratón. A continuación, dejan a los usuarios basados en el tacto sin un medio para acceder a los submenús de navegación que tienen que ser abiertos mediante el uso del ratón.

Al tocar un elemento de nivel superior, su submenú se abrió y permaneció abierto para que pudiese ver los elementos de navegación que contenía durante el tiempo que desease. Este es exactamente el comportamiento esperado.

El tema también tiene un menú de hamburguesa que abre una sección superpuesta en el lateral de la página. Cuando te encuentras en una ventana gráfica amplia que tiene suficiente espacio en la cabecera para acoger la navegación, la superposición solo muestra una colección de widgets:

Pero en una ventana gráfica más estrecha en la que la cabecera no tiene espacio para la navegación, el menú se mueve en cambio a la parte superior de la superposición. Una solución muy ingeniosa en mi opinión.

Veredicto sobre la responsividad: Casi perfecto

"The Affair" ha hecho un trabajo casi impecable en la gestión de la responsividad con este tema, incluyendo la ingeniosa forma en la que han gestionado la navegación principal. El único espacio de mejora, que me conste, sería seguir la sugerencia de Chrome Lighthouse anteriormente mencionada de aumentar el espacio de los objetivos de toque táctil.

Pruebas de accesibilidad

"The Affair" obtiene 70/100 puntos en una auditoría de accesibilidad de Lighthouse. Esta prueba se ejecutó en la demostración principal del tema, ya que se supone que se trata de una instalación completamente configurada del mismo.

Entre los aspectos relativos a la accesibilidad que el tema cumple correctamente se incluyen el adecuado uso de roles WAI-ARIA, lo que garantiza identificadores únicos, incluidas las etiquetas alt en las imágenes, y algunos otros.

Las tareas en las que se queda un poco corto incluyen el asegurarse un contraste adecuado, algunos enlaces, subtítulos y texto de la meta información de las entradas es demasiado claro en comparación con el fondo, pero el texto regular y el contraste de los titulares está bien. También podría mejorar si añadiesen etiquetas y nombres a algunos enlaces, botones y elementos de formulario.

Veredicto de accesibilidad: Buena base, aunque podría mejorarse

Claramente, los desarrolladores se han esforzado en la accesibilidad de este tema dado que pasa auditorías sobre roles WAI-ARIA, etiquetas alt y varias otras cosas.

Si ajustan sus niveles de contraste de color y miran los otros puntos que revelará una auditoría usando la herramienta Lighthouse de Chrome, estarían a un corto paso de lograr unas puntuaciones perfectas en este aspecto.

Veredicto general de "The Affair": excelente experiencia de usuario y un sólido rendimiento técnico

"The Affair" es un tema excelente tanto desde el punto de vista técnico como desde el de los usuarios.

En cuanto a la parte relativa a la experiencia del usuario, ofrece un flujo de configuración suave que es consistente e intuitivo, y sólo se ralentiza por un par de puntos de fricción que en mi opinión podrían ser fácilmente remediados. Evita ampliamente muchos de los habituales escollos que he encontrado innumerables veces en otros temas, y para mí eso lo clasifica en un nivel muy alto en el territorio de WordPress.

En el área de rendimiento técnico es excepcional en las categorías SEO y la responsividad, y sólo necesita algunos ajustes para llegar a la perfección en la categoría de accesibilidad.

Tiene algunos pequeños problemas con la velocidad, pero un motivo probable y principal de esto sea que intenta proporcionar un conjunto de herramientas muy útiles en forma del plugin Powerkit, que constituye una característica bastante potente para la experiencia del usuario. El efecto sobre la velocidad podría ser compensado con algunas instrucciones adicionales en la documentación sobre cómo utilizar los plugins y los ajustes para optimizar un sitio recién instalado.

Como nota extra, no encontré errores al evaluar este tema. Parece ser estable y funcional en todos los sentidos.

En resumen, el tema WordPress "The Affair" es un muy sólido actor, sólo tiene un par de puntos débiles. Está diseñado con cuidado y reflexión, en general, es sólido desde el punto de vista técnico, y rico en características. Yo lo calificaría como una adecuada opción para la mayoría de los sitios web estándar.