Rediseño del blog para celebrar su aniversario

Hoy no os voy a contar sobre viajes, ni sobre restaurantes, sino sobre el propio blog y es que, si habéis entrado en estos últimos días, habréis visto un cambio muy notable. Pero el pobre pedía a gritos un rediseño y qué mejor que aprovechar la cercanía de su (doble) aniversario.

Esta nueva vida del blog comenzó hace casi 4 años, aunque mi blog original, que también se llamaba Profundidad de Campo, cumple en junio 10 años. De lo que era entonces a lo que es ahora ha cambiado mucho, ya que el concepto original del blog estaba centrado exclusivamente en la fotografía.

Versión original del blog Profundidad de Campo
Versión original del blog Profundidad de Campo

Por el camino se quedó un rediseño que llegó a estar casi completado pero que nunca vio la luz. Aunque al menos me sirvió en parte para uno de los rediseños de Japonismo. Y cuando lo reestrené en 2011, el cambio fue radical, mucho más minimalista y, aunque con otras temáticas, la idea era dar protagonismo a las fotos.

Este blog vio algunos cambios, pero más cosméticos que otra cosa pero carecía de funcionalidades modernas, como una plantilla responsive adaptada a móviles. Y eso era algo imperdonable. No ya porque Google diga que tienes que hacerlo, sino porque es un hecho que cada vez hay más visitas que se hacen desde dispositivos móviles y hay que estar a la última.

Versión 2 del blog Profundidad de Campo, con fotos en grande
Versión 2 del blog Profundidad de Campo, con fotos en grande

Una plantilla traducida

Empiezo quizás por lo que menos se ve en la gran mayoría de los casos que es tener la plantilla traducida, pero que para mí denota profesionalidad y cuidado por los detalles. Plantillas hay muchas, sí, pero no siempre están disponibles en castellano. Y si estamos escribiendo en este idioma, conceptos como «post» puede que den igual, porque ya son de uso común.

Plantilla traducida
Plantilla traducida

Pero usar «comments» en lugar de comentarios, o tener mensajes como «Leave a reply» cuando todo tu blog está escrito en castellano, para mí es tener el blog algo descuidado. En este caso, hice yo mismo la traducción de la plantilla, aunque no es algo difícil hoy en día y, sinceramente, da una mejor imagen de nuestro espacio.

Versión móvil

Esto es algo que, como decía, no puede faltar hoy en día. Google va a dar prioridad en breve en las búsquedas desde móviles a las páginas con versiones adaptadas para estos dispositivos y no podía dejar pasar la oportunidad.

Además, con el rediseño, no sólo consigo una versión responsive que se ve bien, sino que además las fotos siguen teniendo protagonismo y los posts destacados que aparecen en la cabecera, también son responsive en versión móvil. Es decir, podéis navegar entre ellos simplemente deslizando el dedo.

Nuevas cabeceras y logos

He pasado de los tonos naranjas a tonos rojos que me gustaban más, con un logo que es una versión ligeramente actualizada del anterior.

Cabeceras de la versión 3 de Profundidad de Campo
Cabeceras de la versión 3 de Profundidad de Campo

Pero sin duda uno de los detalles que más me gusta es que, con un poco de programación y con la ayuda de mis amigas Chari y Zulmi, la cabecera cambia en función de la categoría que estemos visitando, como podéis comprobar con el pequeño collage que os muestro. Así, si estamos leyendo una entrada en la categoría de Viajes, veremos un avión. Pero cuando leemos una reseña de un restaurante especializado en hamburguesas, el logo cambia a una hamburguesa. Es un pequeño detalle visual pero que seguro que algunos os daréis cuenta.

Más cambios

En la parte superior de la página, por encima del logo y del menú principal, si hacéis scroll veréis un formulario de búsqueda. Pero además, ahora también se puede comentar en todos los posts utilizando el formulario nativo o los comentarios de Facebook.

También se puede ver que la barra lateral en un momento dado, aunque hagáis scroll, queda fija, lo que hace que mis fotos en Instagram se vean en casi todos los momentos y, además, que no aparezcan espacios blancos desaprovechados en la pantalla, cosa que suele ocurrir cuando el post es muy largo y la barra lateral no tiene suficiente contenido. Ver esos espacios en blanco siempre me han matado (y es algo que en breve solucionaré también en Japonismo).

La realidad es que mi anterior diseño permitía mostrar fotos en grande (a un tamaño máximo de 940px, aunque hace tiempo que pasé a mostrarlas a 800px) pero era bastante complicado navegar por sus categorías y encontrar contenidos relacionados. Ahora esto es mucho más fácil y además, cada categoría en el menú principal tiene un menú desplegable que, en algunos casos, muestra los últimos contenidos de la categoría de forma muy visual.

Menú desplegable
Menú desplegable

Y, sobre todo, ya que el inicio de mi blog fue la fotografía, quería seguir dándole protagonismo a las imágenes. Cuando los posts tienen barra lateral, las fotos siguen teniendo un tamaño considerable (800px). Pero si os fijáis en la categoría Fotografía (y en algunos posts seleccionados dentro de la categoría Viajes), veréis que la sidebar desapareceEntonces las fotos se muestran a 1024px, lo que hace que se puedan disfrutar muchísimo más.

Habrá casos, además, en los que podré mostrar fotos incluso a mayor tamaño, unos 1400px, cosa que hasta ahora me era imposible. Esto, además, me permitirá publicar más imágenes sueltas, que es algo que con mi plantilla anterior me resultaba algo incómodo.

El gran problema es que todos estos cambios requieren, ahora, un gran trabajo por mi parte. Mi anterior plantilla no tenía imágenes destacadas, por lo que ahora tengo que ir añadiéndoselas a todos los posts (hay 484 publicados). Y tengo que ir cambiando las fotos de menor tamaño por versiones más grandes, para aprovechar todo lo que este diseño puede dar de sí. Pero aunque sea mucho trabajo, es muy satisfactorio.

Así que espero que os guste el cambio tanto como a mí y que sigáis pasando a leerme. Yo, por mi parte, no dejaré de escribir y de mostraros fotos.

Luis
Luis

Luis es el fundador y director de Japonismo.com, la mejor página web sobre Japón. Tiene un máster en estudios contemporáneos de China y Japón y además es ingeniero de telecomunicación. Antes de dedicarse a Japonismo fue program manager en Google, en Londres.

Artículos: 510

5 comentarios

  1. Felicidades Luis! A nivel diseño me parece limpia, intuitiva y fácil de navegar además de muy bonita y bien estructurada.

    Unos apuntes a nivel optimización. Las imágenes de instagram tardan en cargar, las imágenes alojadas fuera del servidor no están escaladas correctamente (flickr e instagram).
    Una primera vista a la página sin cache tarda 8 segundos.
    El peso de la página supera los 5MB y por mucha foto que haya no hay photoshop que no pueda resolverlo aunque imagino que en la mayoría de casos son peticiones a fotos originales en terceros que la plantilla redimensiona sin cortarlas.
    Existen 150 peticiones exteriores (vamos, a terceros tipo facebook etc) es mucho.
    Tienes 10 javascripts y 19 páginas de CSS (ya sea del mismo template o de cualquier otro plugin). Veo que usas WP Super Cache. Quizás lo podrías combinar con WP minify para consolidar los js y css en uno cada uno o bien pasar a Fastest cache que hace ambos a la vez.
    En resumen, échale un vistazo al tema cache y trata (si es posible) de alojar las imágenes en tu servidor tanto como puedas (veo que plantilla recorta las fotos correctamente para todos los dispositivos, vamos que no hace la chapuza de la mayoría de temas responsive que mandan la foto original escalada cosa que no sirve a ojos de robots)

  2. Me gusta mucho el nuevo estilo, sobre todo el responsive design y la pijadita de los logos por secciones :)

    Pars los comentarios yo llevo una semanas probando Postmatic y me parece un inventazo, sobre todo si ya tienes suscriptores por email.

    ¡Salud!

    • Gracias Andrés!!!! Lo de los logos me costó un poco, pero la idea era genial (fue de una amiga) y tenía que hacerla realidad. Lo de Postmatic en los comentarios, para qué es? Porque esta plantilla permite suscribirte a comentarios y demás… Cuéntame más que me interesa :D

  3. Todo cambio implica, en ocasiones, un curro extra, como es tu caso.
    No obstante, es un gran salto hacia adelante.
    Tomo nota de tus cambios para decidir qué quiero hacer en el futuro cercano porque, como dices, Google está al acecho y dentro de nada, o estás en los «esmarfons» o no estás.

    Muy muy buen trabajo.

    Me gusta mucho.

    Un saludo

    • Gracias Javi! Es verdad que cualquier salto hacia adelante supone un cambio, creo que en este caso muy a mejor, pero con Google al acecho el tema móvil tiene que estar sí o sí, y ya que te pones, pues mejor darle un buen lavado de cara, no? :)

Deja un comentario

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

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies