La nueva Zona VIP y el “Facelift” de Ciudadano 2.0

En el último post te hablaba de una reforma del blog por fases que vamos a acometer para solucionar algunos problemas estratégicos que hemos detectado y, de paso, darle un aire fresco a Ciudadano 2.0. Hoy ya tengo algunas novedades importantes para contarte 🙂

cabecera nueva zonavip facelift

De hecho, este post confirma que eso de tomarnos un descanso durante el verano es más bien “de mentirijilla” porque este mes (y los anteriores) realmente se ha trabajado mucho en estos cambios, y lo que ves es sólo el pico del iceberg.

Las novedades son dos básicamente:

  1. Que hemos estrenado la nueva Zona VIP en su fase I
  2. Aprovechando este trabajo, hemos realizado también un “facelift”, un rediseño menor, en Ciudadano 2.0

De hecho, estrenamos la Zona VIP poco después del último post en lo que anunciaba todos estos cambios. El rediseño de Ciudadano 2.0 es más reciente, lleva visible en público sólo unos días.

En este post te contaré cuáles son estos cambios, los motivos que hay detrás de ellos y algunos detalles y reflexiones entre los cuales seguramente encuentres alguna idea útil en ellos para tu propio proyecto.

Por otra parte, quiero aprovechar este post también para pedirte feedback de lo que te han parecido estos cambios en la sección de comentarios.

La nueva Zona VIP: una nueva casa para los suscriptores

Como ya comentaba en el último post, creo que una buena reforma hay que comenzarla por los cimientos. Si queremos, como queremos, reformar y mejorar la experiencia que tienen nuestros lectores más comprometidos, los suscriptores de la “Zona VIP”, el punto más lógico por dónde empezar me parece su “casa”.

¿Qué mejor que estrenar una nueva fase en nuestra relación y experiencia que mudarnos a una nueva casa juntos? 🙂

Por eso, la Zona VIP ha pasado de ser una simple colección de páginas privadas de la web de Ciudadano 2.0 a una web propia para la Zona VIP.

captura zona vip

La portada de la nueva Zona VIP.

A esto le veo dos puntos positivos principalmente:

  1. Una web propia da mucho más juego para organizar los contenidos, las actividades de la Zona VIP y la relación con los lectores. Es mucho más “limpio” que tener esta parte integrada en Ciudadano 2.0
  2. El simple hecho en sí mismo de encontrarte en una web propia, diferente al blog, creo que es muy positivo en la percepción inicial y en lo sucesivo que tiene una persona que se da de alta en la Zona VIP.

Por eso, en este primer despliegue de la Zona VIP (la fase I) salvo el mini-curso gratuito de email marketing, exclusivo para los miembros de la Zona VIP, no hay muchos contenidos nuevos. El objetivo era el cambio de concepto.

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

Cambia por completo la estructura y organización, y se añaden muchas pequeñas cosas como una organización por secciones, una ayuda, una herramienta para recuperar la contraseña, etc. No son cambios tremendos, pero creo que suficientes para que la experiencia ya sea totalmente diferente a lo que era antes.

La Zona VIP la estamos alojando, por cierto, en SiteGround que es uno de los nuevos proveedores de hosting que, junto con Webempresa y otros como Raiola, te recomendamos a partir de ahora como nuestras opciones preferidas de hosting.

Ciudadano 2.0 seguirá en Webempresa, lo que también nos da juego para aportar datos y experiencias en este terreno. En los próximos meses hablaré también más sobre temas de hosting ya que aquí estamos haciendo también una importante puesta al día.

Más adelante, cuando hayamos avanzado con la segmentación de la lista de correo, se añadirán secciones que serán platos fuertes como la personalización de los contenidos que se quieran recibir, etc.

El Facelift de Ciudadano 2.0

Hace dos años que rediseñé por completo la web de Ciudadano 2.0. Como ya conté entonces en el post sobre este tema, fue un poco accidental: en realidad, la idea era hacer el trabajo con un diseñador, pero en el proceso de elaboración de maquetas fue saliendo poco a poco algo que me empezó a gustar bastante y se convirtió en el diseño final.

Hacer un diseño un poco más a medida, más personal tiene la ventaja de que ayuda también a resistir mejor el paso del tiempo. Por el feedback que me llega, parece que ha sido así. Si acaso, sí veo que el logotipo necesitaría una vuelta, pero no me parece tampoco algo sangrante en este momento.

No obstante, sí que hubo cosas con las que ya en su momento me había quedado satisfecho del todo y las que tenía muchas ganas de meterles mano.

Eran principalmente estas dos:

  1. La estética de la portada
  2. Los widgets de los posts

Cambios en la portada

Con la portada no me quedé del todo satisfecho, pero con el tiempo, además, me ha ido pareciendo cada vez más “gris”.

En ese sentido, parte de la nueva imagen de la cabecera, he revisado el grid (rejilla) de categorías y los widgets de los posts y páginas.

Aquí puedes ver el grid de categorías antiguo:

categorias viejas

El grid de categorías de la portada con el diseño antiguo un tanto “gris”…

Y éste es el aspecto del nuevo:

categorías nuevas

El grid de categorías nuevo no cambia radicalmente, pero un poco de color le sienta bien.

Otro cambio importante han sido los widgets de los contenidos.

Aquí tienes el aspecto de la sección de los posts más populares en la antigua portada:

portada vieja

Los widgets de los posts un tanto “deslabazados” del antiguo diseño.

Y aquí el nuevo diseño, diría que bastante más limpio, funcional y estético:

portada nueva

El nuevo diseño basado en “tarjetas”.

En esta parte del nuevo diseño puedes ver el diseño en formato “tarjetas” para los posts y páginas. Creo es el punto que más mejoran con respecto a lo que había antes.

Además, un matiz importante es que el texto de resumen ya no son simplemente las primeras frases del post, sino que ahora es la meta-descripción lo que aporta ventajas tanto para el lector como para nosotros.

El problema fue que WordPress no permite editar “desde fábrica” la meta-descripción, por tanto, me he apoyado en el plugin de Yoast SEO dónde ya editamos expresamente las meta-descripciones de cara al SEO. Ahora, con esto, les sacamos doblemente partido 🙂

Tengo que agradecer aquí la idea públicamente a Arturo García, ya que la idea de usar el formato de tarjetas me vino después de ver este análisis de Elementor Pro suyo.

En mi caso, las tarjetas están programadas a por mí mismo, pero con este plugin (de pago) puedes hacer cosas similares en tu blog si te gusta cómo queda.

Nueva navegación por tarjetas

Las tarjetas aportan bastantes ventajas a mi modo de ver, principalmente:

  1. Las encuentro mucho más limpias, atractivas visualmente y más funcionales porque su formato compacto permite agruparlas muy bien y visualizar mucho más información en el mismo espacio. Eso hace, por ejemplo, que la navegación por posts sea más ágil y agradable.
  2. Permiten implementar una navegación mucho más ágil y agradable. Usan tarjetas, las páginas de listados de posts, por categorías y por etiquetas cambian por completo.
  3. Usar una descripción basada en la meta-información permite crear textos mucho más útiles que el típico extracto de las primeras palabras de un post. A la vez es mucho más coherente con Google ya que es el mismo texto que verás en los resultados del buscador.
  4. Da mucho juego poder configurarlas para que muestren o no ciertas partes. Esto permite usarlas en muchos contextos diferentes. Por ejemplo: se puede utilizar una versión muy reducida, sin descripción, etc. para referenciar en enlazar otro contenido.
listado posts viejo

La antigua página de listado de posts sin tarjetas y con las imágenes destacadas en formato cuadrado.

Extractos de posts basados en la meta-descripción

Por otra parte, con las tarjetas he podido solucionar también un pequeño problema de diseño que llevábamos arrastrando ya unos años: la necesidad de crear, de manera redundante, una imagen destacada en formato cuadrado para los listados de los posts, junto con una imagen de cabecera en formato horizontal.

Ahora la imagen destacada y cabecera son la misma imagen, lo cual soluciona, entre otras cosas, algunos problemas que teníamos, por ejemplo, en Feedly que tomaba la imagen (cuadrada) para sus entradas generando con ello un resultado estético y funcional malo (títulos cortados, etc.).

listado posts nuevo

La misma página de listado de posts antes, pero con el diseño nuevo.

Aquí solamente falta sustituir las imágenes destacadas de los posts antiguos más populares, para que todo esté al día, ya que, hasta entonces, en las tarjetas de estos saldrán estas antiguas imágenes en formato cuadrado que no encajan con el nuevo diseño. Poco a poco.

Próximos temas

Como ves, no han sido cambios espectaculares los que te he contado, sino unos pocos cambios en sitio muy concretos, el formato en sí de las páginas, por ejemplo, no ha cambiado nada.

No obstante, creo es un buen ejemplo cambios menores, pero con un gran impacto bastante importante porque, al menos, tanto las personas con las que he visto estos cambios como yo mismo, hemos percibido subjetivamente un cambio considerable a mejor.

El trabajo en el diseño no acaba aquí, se harán más cosas, pero, de momento, lo vemos “suficiente”. Por tanto, la siguiente tanda de trabajo se la dedicaremos principalmente a la revisión de los contenidos existentes, planificación de los contenidos para la nueva temporada y, sobre todo, a ese trabajo de segmentación de la lista de correo del que ya he hablado anteriormente. Te iré informando.

Mientras tanto, disfruta del verano y si me quieres dejar un poco de feedback sobre qué te han parecido los cambios, críticas, sugerencias o lo que fuese, encantado de leer tus comentarios 🙂

1 Star2 Stars3 Stars4 Stars5 Stars (6 valoraciones, media: 4,17 sobre 5)
Cargando…

Acerca del autor: Berto López

Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho.

Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicos en sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.


Comentarios

  1. Me parece genial, me siento especial jeje :). Sin más palabras que excelente.

  2. Wow, en realidad que han avanzado bastante con el paso del tiempo, os sigo desde hace ya unos cuantos años atrás y las mejoras se perciben rápidamente. Gracias por publicar este tipo de posts, me animan a ponerme las pilas con mis proyectos 🙂

  3. Aurelio Fernando Vásquez García dice:

    Estimado Berto, es extraordinaria tu propuesta, recibe mis reconocimientos.
    Ahora necesito vivenciar para poder emitir mi juicio con certeza.
    Un fuerte abrazo

  4. ¡Muy bueno! Felicidades

  5. Buenas Berto!
    Pues tengo que decir que me mola mucho la estética que está cogiendo poco a poco, los iconos tanto de la zona VIP como la rejilla de la home son muy “luminosos” y eso le da mucha más alegría. Al meno a mí me encanta, jeje.

    Lo de las tarjetas de los posts me ha gustado mucho, sobre todo porque pensé que al “enmarcarlos” quedaría quizá muy recargado y sin embargo veo que el efecto es al contrario, queda todo como más organizado. Pero vamos que si es obra de Arturo García no me extraña nada porque es una fiera del diseño. 🙂

    Lo dicho, está quedando muy chulo la verdad. Un trabajo brutal el que os pegáis como siempre con el blog para que podamos estar a gusto, y así es, jeje.

    Un abrazo!

    • Berto López dice:

      Hola Rubén,

      Me alegro de que te guste 🙂

      Sí, el tema de las tarjetas desde luego que es un paso adelante.

      De todos modos, éstas no las ha diseño Arturo como tales, simplemente vi la tarjetas del plugin Elementor Pro en el post suyo que enlazo.

      La idea la tenía en mente desde hace un tiempo, pero no acaba de encontrar un diseño estético (y conceptual) que satisfaciese. Cuando ví las de su post, me encantaron, eso era lo que buscaba, y ya las implementé a medida para el blog, adaptando el estilo y con algunas diferencias con el original de Elementor, como el footer que en Elementor resuelven de otra manera.

      ¡Un abrazo!
      Berto

  6. Sonia Duro Limia dice:

    Me encanta la navegación por tarjetas! Creo que es un acierto porque, además de que la navegación es más agradable y apetece más estar en casa, la información previa basada en la metadescirpción será más acertada.
    Imagino que esto, además, os reduce un poco la carga de trabajo y posiciona mejor.
    Felicidades y a se seguir!

    • Berto López dice:

      Hola Sonia,

      La reducción de carga de trabajo es anecdótica, pero sí, al menos, nos hemos quitado aquello de hacer por partida doble las imágenes, que era absurdo y una especie de “herencia histórica”.

      En cuanto al SEO, creo que los efectos van a ser también muymarginales. Pero si en las siguientes evoluciones logramos un impacto en la permanencia de la gente en el blog, eso junto con que las meta-descripción ayudarán a que a nivel de palabras clave hay un poco más de coherencia, un poquito puede ayudar 🙂

      ¡Un saludo!
      Berto

Deja un comentario

Para ello, por favor, sigue estas pautas, por respeto a nuestra comunidad (y a nosotros):

  • Usa tu nombre personal, ni nombres inventados, ni el de tu web, ni el de tu empresa.
  • Cuida la redacción: separa párrafos y no escribas en mayúsculas (equivale a gritar).
  • No dejes enlaces a tu web en el comentario, dispones del campo "sitio web" para ello.
  • Eliminaremos comentarios con insultos, ofensivos o con lenguaje soez.

*

 

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)