Estos días ha cambiado la portada de mi página y el blog, tras varios días de desarrollo. Tal ha sido el trabajo, que he pensado que sería útil compartir qué he aprendido y qué ha cambiado. Como documentar era lo que más me gustaba cuando trabajaba para otras empresas, he querido aplicarlo aquí también.

Desarrollo de la plantilla WordPress

Aunque originalmente utilizaba una pequeña modificación del tema Unicorn de Hugo Cornejo, estos días la he completado y rediseñado hasta lo que se ve ahora. Faltaba mejorar lo siguiente:

Mejorar la estructura CSS

Cargaba 4 archivos CSS, incluía un framework (960 Grid), un reset aparte, etc. Ahora el código está concentrado en un sólo style.css de 136 líneas (en este momento) y sin ningún ID, sólo clases y una estructura orientada a objetos.

Responsive design

Responsive design con media queries

La plantilla ahora se adapta perfectamente a dispositivos de todos los tamaños mediante media queries.

HTML5 y microformatos

He replanteado la estructura completa para darle sentido semántico a cada palabra del código. Fue muy confuso el cómo dar formato a las fechas en HTML5, pero lo he solucionado con la etiqueta <time> y el atributo datatime.

Páginas, categorías y buscador

Eran puntos a medio terminar o sin desarrollar aún en Unicorn. He incorporado un buscador en el pie de página (footer) después de mucho meditar su posición, ya que no encontré ninguna manera convincente y sencilla de integrarlo en la cabecera sin que robase protagonismo al contenido.

Footer del blog con buscador y menú

En la misma línea de incluir sólo elementos útiles y con sentido, las categorías y etiquetas sólo aparecen dentro de cada artículo y las categorías quedan repartidas también en las migas de pan (breadcrumbs) cuando se navega por una taxonomía (categoría, etiqueta, etc.). He dejado la opción al usuario de encontrarlo todo recogido en el menú Archivos del footer, junto con el enlace a la portada y la sección de contacto. Este menú se gestiona a través de la opción «Menús» del panel de control (con la función register_nav_menus).

Rediseño

Portada

Me gustaba mucho la idea original de la portada tipo blog clásico, con todos los artículos completos de un vistazo. Pero tras un tiempo navegando por mi propia página, he comprendido por qué este diseño ha ido desapareciendo; hacer scroll se hace tedioso teniendo que cargar artículos tan largos en portada, cuando quizá sólo quiera ir al último de la lista o localizar el footer. Es por eso que ahora lo he simplificado (menos es más, recuerden) sólo con el título, imagen y una descripción sencilla.

Fecha

Es el primer dato que busco en un artículo antes de empezar a leerlo: cuándo fue escrito. A veces me frustra no encontrarlo, incluso. Así que le he dado el protagonismo que merece.

Espaciado

Blanco. Mucho blanco. Más espacio me ayuda a distinguir mejor la estructura del contenido. Mientras aplicaba estos espacios en la cabecera, recordé a compañeros de Marketing y clientes que me pedían que sus landings o webs tenían que tener poco espacio en la parte principal de la página «para que se viese todo bien de un vistazo». Incluso una de mis compañeras pedía a veces «subir» elementos de forma inexplicable porque «en su portátil no se veía». La explicación es que su navegador tenía varias toolbars instaladas y una resolución muy pequeña, con lo que veía la mitad de lo que yo veía en mi ordenador.

En resumen a esto último: no hay que preocuparse por cuánto ve el usuario en el primer golpe de vista. Algunos tenemos pantallas de 27 pulgadas, otros tienen portátiles de resoluciones enanas y navegadores llenos de barras promocionales. Ya se encargará el usuario de hacer scroll y, si cierra la web sin hacer nada (rebote), mala suerte.

Imágenes

Ahora casi todos los artículos, siempre que sea posible, incorporan una imagen adjunta y/o destacada. Escribo artículos muy largos y con imágenes y logotipos, aunque no vengan al caso, ayudan a la vista a digerir el texto.

¿Widgets?

Aunque en las notas de «To do» de Unicorn se menciona la idea de integrar widgets, ya era demasiado. He hecho un gran esfuerzo para integrar más elementos en la plantilla (buscador, categorías, páginas, etc.) sin corromper la simplicidad original y una barra de widgets no encaja en una plantilla como esta.

Posicionamiento (SEO)

Enlaces externos

He revisado los atributos rel hasta en el último enlace de la página y me he ayudado del plugin WP External Links, que he tenido que modificar a mano porque mete JS y CSS innecesario en la cabecera. Automáticamente, este plugin me permite añadir un «nofollow» a todos los enlaces externos al blog. Lo cual tampoco es una buena idea y me gustaría poder decidir a cuáles dárselo y a cuáles no. No es interesante decirle a Google que sólo siga a mis propios enlaces. Esto tengo que arreglarlo.

Encabezados

Uno de los mayores dilemas que he tenido con todas las plantillas que he desarrollado y que, por fin, he solucionado. Hay mucho escrito sobre qué nivel de encabezado (H1, H2…) darle a los títulos y al nombre del blog en según qué secciones. Sobre esto publicaré un artículo próximamente, ya que da mucho de sí.

Taxonomías personalizadas

También para otro artículo dejaré la explicación de por qué no es bueno usar taxonomías personalizadas en el functions.php de la plantilla de WordPress. Como no tenía suficiente con las etiquetas y categorías, he usado el plugin WCK para crear la taxonomía «Empresas/productos«:

WCK - Custom Fields and Custom Post Types Creator

Velocidad de carga

Lo que más me obsesiona y un punto importante en términos de usabilidad y posicionamiento.

Hasta estos días he usado el plugin W3 Total Cache, pero tiene demasiadas funciones y es excesivamente complicado de entender y utilizar. He trasladado el blog al alojamiento WordPress de Siteground, en Amsterdam, y en su panel ofrecen dos opciones para cachear el contenido:

Varnish & Google Pagespeed en Cpanel de Siteground

Cpanel de Siteground con opciones de Pagespeed Insights y Varnish.

A falta de conocimientos técnicos, he optado por la idea de «a Google le debe gustar más mi web si uso sus herramientas». Y eso he elegido. El resultado en su propio test ha sido de un 95%:

Google PageSpeed Insights

Superado el 95% del test en escritorio y 89% en móvil. Great!

Ahora la página vuela.

Compresión de imágenes

Google Pagespeed Insigihts me recordaba que mis imágenes tenían que comprimirse aún más. Así que he encontrado el plugin WP Smush.it que hace el proceso de Smush.it para cada imagen que subimos a WordPress.

Posted by Hans Christian

freelance especialista en para blogs y proyectos de contenidos.

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *