Legibilidad, agilidad y espacio en blanco son las principales características de la versión 3 de la plantilla.

Aún no está completa al 100%, le faltan algunos detalles y está llena de bugs que iré corrigiendo con el tiempo mientras siguen apareciendo otros, pero estoy muy satisfecho con el resultado hasta ahora y quiero compartirlo con todos aquí.

¿Qué tenía de malo el anterior diseño?

La verdad es que le anterior diseño nunca me gustó y hace tiempo quería cambiarlo. Era una mezcla de experimentos y viejos bugs que nunca me decidí a corregir.

Era lento, pesado, las fuentes no combinaban, el menú no tenía buen aspecto, usaba un montón de librarías innecesariamente y lo peor de todo era la tonta animación que le había agregado a las entradas, una efecto «reveal» simulando la aparición de la entrada de abajo hacía arriba que solo lograba que la página pareciera aún más lenta.

Por todo esto decidí que en lugar de arreglar estos errores uno por uno mejor los corregía todos a la vez eliminando la plantilla y arrancando de cero.

La plantilla base

Para poder tener el mayor control posible de mi nueva plantilla decidí eliminar todo lo innecesario que traen las plantillas de Blogger como el CSS por defecto y removiendo classe's e id's que sabía no iba a usar. También modifiqué algunos elementos mejorando el HTML para que sea más semántico.

La cabecera

Las cabeceras «no rectangulares» y se me antojó tener una. Con unas pocas lineas en svg creé una sutil curva al final del header que le da el toque moderno al blog y queda bien con el menú debajo alineado a la derecha.

El menú

El menú lo hice lo más sencillo que pude. Con letras grandes en negrita que lo hacen fácil de encontrar y de entender, a diferencia del anterior que casi no se veía y estorbaba la lectura en pantallas pequeñas.

Letra legible

Para el texto estuve investigando un poco sobre tipografía en la web para tratar de hallar el tamaño perfecto para cada pantalla y poder hacer que el texto de las entradas sea legible y responsivo. Decidí crear mi propia librería CSS especial para textos que llamé textCSS (cómo más), luego la incluí en el CSS del blog adaptándola un poco. ¿Un poco grande tal vez? Yo creo que está bastante bien por ahora.

Bloques de código

He optado por cambiar la librería de resaltado de sintaxis. Anteriormente utilizaba Prettify que funciona muy bien pero me parece un poco pesada. La elegida para remplazarla fue Prism.js que es mucho más ligera, moderna y personalizable.

Lo complicado de esto es ahora tener que adaptar manualmente a Prism.js el código de los posts anteriores que usan Prettify.

Imágenes del post

En las imágenes utilicé la librería zoom.js que encontré de casualidad hace poco. Simplemente crea una especie de lightbox minimalista al estilo de Medium y es justamente lo que necesitaba.

Enlaces sociales

Esta es una parte importante para el rendimiento del blog. Los botones sociales que utilizaba antes (tuitear, me gusta y plusone) le agregaban una carga extra bastante pesada al blog (o tres cargas extras en este caso). Esto sin mencionar lo que pasaría si por alguna razón alguno de los servidores de estos servicios se caía o en el peor de los casos se caían los tres.

Decidí simplemente crear los enlaces manualmente, sin librerías, sin pesados sdk's, sin depender de servidores externos. Así, si alguno de los servicios falla, simplemente el enlace, que se abre en una pestaña emergente, no funcionaría y eso sería todo.

Sección de comentarios

Por allá en 2012 cuando Blogger presentó por primera vez su sistema de comentarios anidados solo estaba disponible para los blogs que utilizaban las plantillas más nuevas en esa época. Por suerte para el resto de nosotros ahí estaba Felipe Calvo, quién creó un script que implementaba el sistema de comentarios anidados para todo aquel que lo quisiera en su blog. Cuatro años después he vuelto a preferir este script por encima del sistema original de Blogger simplemente porque no me da el control que necesito sobre el código para modificarlo y adaptarlo a mi gusto.

Accesibilidad

Colores

Intenté no variar mucho los colores del diseño anterior, simplemente los oscurecí un poco para dar mayor contraste y hacerlo más visible para personas con problemas de visión, tratando de cumplir con las recomendaciones de la WCAG 2.0 al menos para el nivel AA.

Navegación con teclado

La navegación con teclado es comúnmente ignorada por los desarrolladores web y yo quise dejar de ignorarla y alentar a los demás a que no la ignoren tampoco. Es el 2017 y todos los usuarios tienen un mouse, y los que no tienen seguramente es porque están viendo la página desde un móvil, pero la realidad es que este no siempre es el caso. Algunas veces el mouse se te puede dañar en algún momento que no puedes salir corriendo a comprar otro o no hay nadie que te preste uno, o en otros casos se puede tratar de un usuario con problemas motores que le cuesta mucho usar el mouse y por eso prefiere el teclado.

En este blog simplemente le di un borde grueso de un color rojo oscuro al elemento señalado con el teclado para que sea fácil de identificar.

Velocidad

La velocidad de carga de la página era el aspecto más importante para mí. Planeé todo el diseño en base al rendimiento del sitio tratando de hacerlo lo más ligero posible, como ya mencioné antes. El resultado: 450kb en 1.340 segundos con un SpeedIndex de 681… ¡Misión cumplida!

Claro, todavía se puede mejorar, pero está más que bien para ser un blog de Blogger.

Nota rápida sobre el logo

Letras del mismo color, lowerCamelCase y un punto al principio tratando de simular un selector CSS. Creo que se entiende bastante, ¿no?