Monochrome Pro es unos de los temas con los que más trabajo. Por su sencillez y su diseño bastante minimalista. No en vano fue uno de los temas más vendidos por StudioPress el año pasado.
Pero no es oro todo lo que reluce. Si que hay unas cuantas cosas que suelo cambiar por sistema con este Genesis theme en concreto. No muchas, pero para mi son importantes. ¡Veamos cuales!
Tamaño de la tipografía
Una de las cosas que he cambiado de este tema es el tamaño de la fuente o tipografía. Esto puede parecer una manía mía o capricho, pero no lo es. Lo explico. Desde mi punto de vista y estoy hablando de accesibilidad, Monochome Pro tiene un tamaño de fuente demasiado pequeño.
Normalmente cuando hablamos en general de accesibilidad pensamos en rampas para personas en sillas de ruedas o de cara al diseño, pensamos en web diseñadas y desarrolladas para invidentes. Pero se nos olvida que hay muchos tipos de discapacidades. Yo mismo tengo una discapacidad. Uso gafas. Son sólo de una dioptría pero eso ya me dificulta leer algunas webs que tengan la tipografía demasiado pequeña.
Es decir, y dicho a groso modo, una discapacidad es una falta de capacidad. Luego la accesibilidad, tiene que ver literalmente, con hacer accesible tu web a todo tu público. Por ende, si no facilitamos la lectura de nuestros textos, desde luego fallamos en la base de dicha accesibilidad.
Quizás me he ido un poco por las ramas, pero quería explicar la base de mi razonamiento. De porque aumento el tamaño de la fuente. Evidentemente lo hago de manera adaptativa. Si aumentamos el tamaño, debemos cuidar que en pantallas pequeñas tenga una buena legibilidad y no tenga un tamaño de texto excesivamente grande. Así que con CSS voy adaptando el tamaño de los diferentes textos (títulos, parrafos, etc…) al tamaño de la pantalla según el dispositivo en el que se visualiza.
Por defecto en el tema viene con Muli, una fuete atractiva y legible. En su hoja de estilos viene configurada a un tamaño de 18px. Yo lo he aumentado a 20px. Si lo hacéis veréis que no es un cambio drástico, pero si significativo, que mejora bastante la lectura sobre todo en artículos largos. Incluso, dependiendo de la tipografía que uses, no tendrás que aumentar el tamaño. Al final es una cuestión un poco de sentido común.
Monochrome Pro trabaja con tamaños de tipografía absolutos, es decir, en pixeles. Osea, si queréis cambiar el tamaño de texto en algunas secciones, tendréis que ir una a una las que queráis cambiar.
Menos tipografías, mayor velocidad de carga
Sin dejar de hablar de la tipografía, Monochrome Pro viene maquetado/desarrollado con 7 estilos de tipografía, sin contar la tipografía de los iconos. Ni que decir tiene que eso ralentiza al carga sobremanera. Debemos pensar en que estilos son los que vamos a usar y los pesos de las fuentes y deshacernos de los demás. En esta línea de código del archivo functions.php del tema podéis ver todos los estilos y pesos que carga. En mi opinión son demasiados.
wp_enqueue_style(
'monochrome-fonts', '//fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i|Open+Sans+Condensed:300',
array(),
CHILD_THEME_VERSION );Para disminuir la cantidad de tipografías y sus tamaños, simplemente editaremos esa función del fichero functions.php y eliminaremos las que no nos convengan. un ejemplo de como podría quedar sería así:
wp_enqueue_style(
'monochrome-fonts', '//fonts.googleapis.com/css?family=Muli:300,300i,600',
array(),
CHILD_THEME_VERSION );Trabajaríamos con la tipografía Muli en tres tamaños, teniendo como recurso una itálica y una negrita.
Si al final nos decidimos a quitar algunos pesos de fuente, deberemos hacer una revisión del archivo style.css para corregir las líneas en las que se apliquen estos estilos que acabamos de eliminar. En su lugar usaremos algunos de los que hemos dejado.
Icono de buscar
He detectado, casi al principio de empezar a trabajar con el tema, que cuando el menú se contrae en pantallas pequeñas y se oculta detrás el famoso icono de hamburguesa, el icono de buscar desaparece. Sigue activo, pero no se muestra, luego el usuario no puede acceder a él. Esto entra dentro de lo que llamamos una mala experiencia del usuario. O lo que es lo mismo, la tan nombrada Accesibilidad.
Uno de nuestros trabajos como diseñadores, en mi opinión, es permitir que los usuarios, independientemente de en que dispositivo visualicen la página, tengan los mismos recursos.
Para mi es un fallo enorme el ocultar cosas para dispositivos pequeños. En este caso en especial, dado que es una funcionalidad y no simplemente contenido informativo. Esto lo he solucionado en un artículo que tengo de como sacar el icono de buscar del menú en Monochrome Pro.
Imagina que visitas una web, la que sea de un tema que te gusta, haces búsquedas miras contenido, etc… Y cuando sales a la calle, le enseñas la web a una amiga o amigo y le recomiendas el blog. Vas a hacer la misma búsqueda y no encuentras el icono. Es tan sencillo como que te estoy dificultando la navegación y creando una mala experiencia. Con la cantidad de oferta que hay hoy en día en Internet, no vas a esperar a averiguar lo que pasa, irás a Google a buscar otro blog. Y es sólo un ejemplo de los muchos que se me han venido a la cabeza.
En fin que otra vez me pierdo en ejemplos. Pero así lo entendéis más claramente. Lo dicho, el icono, dentro del menú pero que esté presente y accesible. que los que navegamos por móvil también tenemos derecho a hacer búsquedas ;).
Demasiado CSS
Pues eso mismo que dice el título, que el tema por defecto tiene demasiado CSS que seguramente no vamos a usar. ¿Esto que significa? Pasa lo mismo con todos los temas. Gratuitos o de pago. Vienen diseñados para un montón de cosas. Sin ir más lejos, la página de portada se lleva un montón de líneas de CSS. Cada área de widgets está diseñada de una manera, para ofrecer a los usuarios distintas maneras de mostrar su contenido. Esto está genial, pero recarga mucho la página de CSS que seguramente no vamos a usar.
Por ejemplo la galería de fotos. Pocas personas usan la galería de fotos de WordPress y todos los temas vienen son soporte para esta galería. Si es cierto que lo tienen que traer por si acaso pero, ¿Porqué dejarlo ahí si al final vamos a instalar un plugin tipo Envira Galery que trae su propia hoja de estilos? Es a ese tipo de limpieza de código CSS de la que hablo.
Si al final vamos a mostrar las últimas entradas en la página de Inicio ¿para que todo el CSS que trae de base el tema?. que no es poco creeme. Pero hay algo en este tema que me encanta y es que todo el código CSS de la portada está en una hoja de estilos separa de la principal (me refiero a la portada como se muestra en la demo).
Pues nada, a hacer limpieza ;).
Finalizando
Estas son tres modificaciones que hago si o si, en el tema Monochrome Pro. No quiero decir que no se puedan hacer más. Por supuesto que se puede. En la mayoría de la veces no parece el mismo tema cuando termino. Estas son básicas y salvo excepciones muy claras, yo personalmente las hago siempre a la hora de trabajar con este tema.
¿Hay alguna que creas que se debería hacer? O crees que alguna de las que he nombrado está demás. Deja en los comemtarios tu pregunta, consejo o duda y contestaré lo antes posible.