SiloCreativo 3.0: Nuevo diseño y novedades!

En Mayo de este año SiloCreativo cumplió 5 años y no quisimos dejar pasar la oportunidad para hacer algo, aunque simplemente fuese a modo de hito, para marcar esta fecha en el calendario. Así que nos sentamos a pensar que podríamos hacer: ¿una infografía? ¿un pack de iconos? ¿un tema WordPress tipo feliz cumpleaños? … Todo nos parecía bien, pero al final eran creaciones puntuales, que aunque nos servían para subrayar esta fecha, se perderían entre los artículos del blog.

Cinco años dan para mucho, aprendes a base de golpes (sobre todo los primeros años) y más golpes (aunque los veas venir, los siguientes años sigues recibiendo), pero también falta tiempo, tiempo para reflexionar y para dedicarlo a proyectos propios, cosas que se quedaron inacabadas o ideas que nunca tomaron forma. Por ello, estos cinco años los queríamos celebrar con calma, haciendo algo sin prisas pero que nos dejase algo de huella e hiciese recuperar ilusiones e ideas que se quedaron en el tintero.

Así pues, ¿qué mejor que un rediseño para SiloCreativo que nos permita experimentar y  probar cosas nuevas? Además ya tocaba, pese a que no estábamos del todo descontentos con la antigua versión, ni te imaginas la importancia de estar en sincronía con el diseño de tus artículos. Desde el momento que comienzas a redactar un post, el cómo vas a organizar las imágenes, los snippets de código, las negritas y los enlaces empiezan a rondar por tu cabeza al mismo tiempo que vas generando contenido. Y si no hay sincronía o el diseño que tiene tu blog o web te coarta dicha organización, la calidad del contenido se resiente.

Así que manos a la obra, redactamos una lista interminable de ideas y mejoras, que hoy tras cinco meses de trabajo ven la luz en este nuevo SiloCreativo 3.0, todavía en versión Alfa (aún queda trabajo por delante). ¿Nos acompañas a repasar lo que hemos aprendido por el camino?

Cómo hemos llegado hasta aquí: 1.0 y 2.0

Primera versión de SiloCreativo

Si nos llevas leyendo desde el principio, recordarás la primera versión de nuestra web. La página principal estaba dividida en varias secciones, cada uno recopilaba información que nos parecía mas o menos importante: Sobre nosotros, recopilación de últimos trabajos y proyectos, sección de contacto y al final del todo aparecían los dos últimos artículos del blog. Hubo unos meses que incluso tuvimos un slider encabezando todas estas secciones (que locura!).

En aquel momento nos parecía importante mostrar quienes eramos y lo que hacíamos. Nuestra web era nuestra carta de presentación para los proyectos que íbamos haciendo, e incluso el formulario de contacto primaba sobre lo que escribíamos en el blog, con una periodicidad algo anárquica, cuya única regla era: artículos cuando no haya nada más que hacer.

Pero con el paso de los meses y con los datos que recopilábamos en Analytics nos dimos cuanta que muchos usuarios obviaban las primeras secciones de la home para ir directamente al apartado del blog, que era el que más clics recibía y era además donde volvían los usuarios en las semanas y meses posteriores. Habíamos conseguido nuestros primeros lectores, y era el momento de no ponerles trabas y mejorar su UX. Con esta decisión por bandera decidimos dar prioridad a nuestros post por encima de otras secciones, y así fue como creamos la que llamamos versión 2.0 de Silo.

Segunda versión de diseño web de SiloCreativo

En esta nueva versión la página principal recopilaba nuestros artículos por orden cronológico a dos columnas o a una si accedías desde móvil. Era un cambio importante, pues pasábamos de una web tipo agencia o estudio de diseño a un blog o magazine, donde corríamos el riesgo de que no se entendiera bien que hacíamos o a que nos dedicábamos. Esta nueva versión trajo también un hecho importante a nivel organizativo: ya no valía con escribir cuando la inspiración cayese del cielo, sra el momento de crear un calendario editorial, con sus artículos programados y con una previsión de temas e ideas, para poder publicar al menos un artículo semanal.

Unos meses mas tarde del lanzamiento, decidimos que con un idioma no era bastante y lanzamos SiloCreativo en Inglés, que aunque con una frecuencia de publicación menor, nos permitiera ayudar y llegar a más publico con aquellos tutoriales o artículos que hayan tenido más relevancia en el sitio principal. Y ahí paramos la maquinaría de las ideas, era el momento de ponerse a trabajar y crear contenido de calidad útil para todo aquel que estuviese interesado en el diseño gráfico, el diseño web y en WordPress.

Nuevo Diseño centrándonos en lo importante: el contenido

Jerarquía de artículos en la home
Así es la nueva organización de artículos en la página inicial de Silo.

Y hasta el día de hoy! Este nuevo diseño busca acercar todavía más el contenido al usuario, hacerlo más amigable, accesible y participativo. Como puntos importantes nos hemos marcado continuar con una home que recopile los últimos artículos, pero esta vez aplicando una cierta jerarquía al layout, para establecer distintos niveles entre los contenidos. Esto nos va a permitir dar más importancia a aquello que consideremos tenga cierta actualidad o sea útil frente a otros contenidos. Si te interesa este punto, CSS flexbox y su propiedad order son geniales para lograr esto. Pero vayamos punto por punto:

Adiós barra lateral!

Buscador de categorías y etiquetasHa sido una decisión dolorosa, pero necesario. Durante todo este tiempo nos ha acompañado un sidebar tanto en la página de inicio como en la vista individual de los post donde ubicábamos el buscador, las categorías, las etiquetas, el formulario de suscripción y algún banner propio o externo. Hemos tratado siempre de mantener esta barra de widgets lo más limpia y fina posible, pero el ancho que ocupa en escritorio y la posición de la misma en responsive no ayudaban mucho. Además, para nuevos usuarios entendemos que era útil, pero para los asiduos no tenía mucho sentido tanta distracción si ya sabían moverse por el sitio.

Además, todos los enlaces que se accedían via barra lateral estaban ya presentes o tenían una fácil reubicación en la web sin ocupar el mismo espacio. Por ejemplo, nuestras plantillas WordPress ya eran accesibles desde el menú. ¿Queremos darle más visibilidad? Resaltemos el elemento del menú! Lo mismo sucedía con el buscador, categorías y etiquetas, son elementos de navegación dentro de la web, mejor ubicarlos todos juntos bajo el icono de la lupa en el menú.

ENcabezado de un artículo de SiloCreativo

Eliminar la barra lateral nos ha permitido jugar con todo el ancho para mostrar los contenidos, posibilitando una lectura en escritorio sin tanto scroll, así como una mejor gestión de los recursos en responsive, sin necesidad de tanto elemento que se muestra por defecto. ¿Significa que desaparecen los widgets? No, significa que es hora de ser más creativo con ellos y flexibles a la hora de mostrarlos. Ahora podemos decidir en donde se muestran y como se muestran (en la sección de comentarios, dentro de contenido, integrados como un artículo más dentro del listado de posts…)

Los comentarios, esos grandes olvidados

Durante este tiempo nos hemos dado cuenta de la importancia de los comentarios dentro de los posts. La preguntas y sugerencias ayudan de una forma increíble a mejorar el contenido y completarlo, mil gracias a todos los que habéis comentado o dejado vuestro gratino de arena! Sin vosotros no sería posible tener contenidos tar ricos como este o este. En las versiones anteriores la sección de comentarios era «lo que va al final del artículo», con pocas posibilidades de edición y un diseño muy poco optimizado.

Comentarios Anidados en WordPress
Comentarios anidados, con respuestas intercaladas y posibilidad de compartir etiquetas de código y demás extras.

Ahora queremos darle una vuelta de tuera, sin pretender inventar la rueda, pero hacer de la experiencia de comentar algo especial. Al fin y al cabo, es la manera que tenemos de interactuar con el lector, por lo tanto, mejorar esta experiencia es importante para nosotros. Para ello hemos añadido permalinks a los comentarios para poderlos citar, además de mejorar el diseño de los mismos y con posibilidad de dar formato a snippets de código y otros recursos. El formulario por defecto de WordPress ha sido ligeramente modificado, para adaptar la experiencia tanto en escritorio como en mobile.

Texto, imagen, video y código: a bailar!

La vida es muy corta para no disfrutar de una buena tipografía. Así que sin complejos, vamos con un 21px para tamaño de texto en escritorio y unos heading generosos, pues para eso están las pantallas grandes ¿no? para disfrutar de estos pequeños placeres. Si accedes desde resoluciones menores todo será más suave, Seguramente leerás los contenidos mas cerca de la pantalla, así que podrás seguir disfrutando de las tipografías sin problemas pero con más contenido mostrado. Jugar con distintos tamaños de fuentes aquí es importante.

En cuanto al resto de elementos que componen el contenido (imágenes, videos, audios, código…) queremos que tengan un papel más importante a partir de ahora. Si bien las imágenes de los post que veníamos haciendo hasta ahora mantenían un ancho fijo, lo más cercano posible al ancho del contenido de texto, en este nuevo diseño queremos que no siga siendo así, y que cada imagen ocupe el ancho y alto que necesite.

Resultaba un poco frustrante tener que recortar o realizar una captura de pantalla para ilustrar algo con unas medidas prefijadas de antemano. Muchas cosas quedaban fuera del área de captura, y podrían dar entorno a lo que estábamos mostrando, o simplemente complementar el contenido. Ahora esto ha cambiado. Si necesitamos una imagen de más de 1000 píxeles, tendremos una ubicación para ellas. Si por el contrario queremos mostrar un detalle a 300px, lo mostremos sin tener que cortar la redacción del texto.

@media (min-width: 1200px) {
    .single .type-post h1.entry-title {
        line-height: 1.05;
        font-size: 74px;
        margin-bottom: 36px;
        margin-top: 70px;
    }
}

Lo mismo para vídeos e iframes. Pero sin duda uno de los grandes inconvenientes que teníamos era compartir código. Aunque las etiquetas pre y code hacían un trabajo correcto, el formato era mejorable, además del ancho necesario. Por ello hemos optado por incluir una librería que nos permita resaltar las etiquetas y distintos elementos del código, pudiendo diferenciar entre CSS, HTML, PHP y JS.

Algo más que solo diseño

Lo cierto es que el nuevo diseño ha sido la piedra angular sobre la que ha girado nuestra actividad estos últimos meses. Pero además de esto hay algunas otras novedades en las que hemos estado trabajando para incorporar junto a este nuevo diseño.

Showcase de nuestros temas! Nos encanta conocer como nuestros usuarios utilizan nuestras plantillas, que hacen con ellas, como las customizan. Es quizás el punto más gratificante de todos, cuando vez que lo que has creado sirve a otros y lo mejoran, es genial. Por ello y también con el objetivo de servir de inspiración al resto de usuarios de nuestros themes, hemos recopilado una selección de sitios que han creado cosas increíbles. Puedes verlo aquí!

Showcase de Temas WordPress de SiloCreativo

Videos! Aunque ya habíamos hecho alguna incursión, no nos habíamos planteado hacer una serie de videos explicativos que acompañen algunos de nuestros tutoriales o posts mas explicativos. Muchas veces el paso a paso por capturas resulta un poco tedioso, y con un vídeo corto la duda queda resulta. Utilizaremos nuestro canal de YouTube (ya estás tardando en suscribirte!) para ir recopilando estos contenidos, que serán integrados dentro de los artículos correspondientes contando con la genial voz radiofónica de Alfonso Serrano 😀

Post de invitados. Es algo que siempre tenemos en el tintero y la verdad nos encararía poder contar el Silo con otros puntos de vista y con la experiencia de amigos y gente que admiramos. Aunque en los últimos años hemos tenido algún invitado especial de forma esporádica, lo cierto es que nos gustaría incluir estos artículos dentro de nuestro calendario editorial, como una sección más. Sería fantástico!

Por otro lado, SiloMag, nuestro recopilatorio quincenal con enlaces y artículos externos que nos han resultado de interés y queremos compartir con vosotros. La idea principal de esta sección es que lo bueno que no se comparte se pierde, y de esta forma aportamos nuestro modesto granito de arena a dar difusión a proyectos chulos o contenidos que nos ayudado a aprender algo nuevo.

Nueva documentación para nuestros temas WordPress. Tras varios años y cientos de pregustas de soporte sobre nuestros temas, hemos podido recopilar una buena lista de preguntas frecuentes y detectar donde los usuarios de nuestras plantillas encuentran más inconvenientes. La idea es rehacer e incorporar estas cuestiones a una documentación mejorada y más sencilla de gestionar.

Y por ahora eso es todo! Solo falta dar las gracias a todos los compañeros, lectores y amigos que durante estos meses nos han ido dando feedback y soporte. Muchas gracias! Esperamos que el resultado os guste a todos 🙂

Comentarios (10)

  1. Enhorabuena por el nuevo diseño. A mí me encantáis, aprendo un montón con vosotros y cada mes estoy puntual para decorar mi escritorio con vuestros calendarios!

    Por cierto. ¿utilizáis algún plugin para que vuestra página sea en dos idiomas?

    Gracias y a por otros 5 años más!

    1. Gracias Marta!

      Un gusto estar rodeado de gente como tú 🙂

      Para el site en inglés utilizamos otra instalación de WordPress utilizando los atributos rel="alternate" hreflang="x" para cada uno de los artículos o páginas que si están en ambos sites. Optamos por esta opción pues nos parecía lo más flexible en ese momento y ninguno de los plugins que valoramos nos daba el 100% del resultado que buscábamos.

      La otra opción es usar una instalación de WordPress multisite o bien via plugins como bien comentas. Aquí un artículo sobre esto 🙂

      Gracias de nuevo por comentar!

  2. Felicidades por esos 5 años, y por otros muchos que vendrán más.

    Personalmente habéis sido fiel a vuestro estilo en temas de colores, eso no podía cambiar porque forma parte de vosotros, por lo demás, me gusta los cambios a nivel tipográfico, y aunque supongo que lo de la barra lateral lo hayáis comentado y mucho, me gusta mucho las páginas sin ella, ya he visto varias que también lo han hecho, y creo que el resultado es mejor, no me cabe la menor duda.

    Sobra decir que me gustan los artículos, las recopilaciones y que intento que no se me escape nada.

    Un abrazo a todo el equipo, gracias y como he dicho, por muchos años más.

  3. Mis felicitaciones por sus primeros 5 años, por experiencia sé lo difícil que es llegar a uno siquiera. Los leo desde hace más de dos años y he aprendido mucho con ustedes, sigan adelante.

    En cuanto al rediseño, por lo que leo no fue solo de cambiar el tema y ya. Lo analizaron y estudiaron mucho y creo que dieron en el clavo en cada una de las implementaciones que realizaron, especialmente en la forma en que ahora podemos leer sus artículos.

    ¡Felicitaciones!

Deja una respuesta

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