Analizando las nuevas plantillas responsive de Blogger

domingo, abril 02, 2017


Tras años de espera Blogger se decidió, el pasado día 20 de marzo, a regalarnos cuatro juegos de plantillas por fin 100% responsive. El cambio me pilló por sorpresa mientras trabajaba en la personalización de un blog, y no he podido esperar más para compartir mis primeras impresiones contigo. De hecho tal soberano evento  merecía una publicación inmediata pero preferí esperar un poco, acabar con mis obligaciones como profesora  y analizar las plantillas con más detenimiento.

Para quien está al día de las progresivas mejoras de Blogger las ideas que la tachan como una plataforma en declive y cerca del cierre no son creíbles. Aunque es cierto que hasta ahora sus plantillas nativas se habían quedado desfasadas en todos los sentidos, funcionales y estéticos. Muchos bloggers lo íbamos sorteando a base de toquetear código, e incluso algunos de ellos se especializaron en la personalización de la plantilla simple de Josh Peterson.

Pero cuando el desfase entre plantillas nativas y los estándares actuales en diseño web fue insalvable yo como otros tantos nos decantamos por utilizar plantillas desarrolladas por terceros. Seleccionando bien se encuentran a buen precio plantillas de código y diseño más moderno, la mayoría a imitación de themes en Wordpress, con multitud de funcionalidades y SEO friendly. Y ante este panorama aparecen por sorpresa nuevas plantillas en nuestro panel de Tema, en concreto cuatro juegos con sus cinco respectivas variaciones de estilo (colores, tipografía, gráficos, etc)

En este post analizaremos los grandes cambios producidos, porque realmente son muchos los pequeños nuevos  detalles. Y digo analizaremos porque en este estudio me acompaña Cyball Ruiz de Studio Blogger, apasionada de esta plataforma y una pro armando código. De su ojo clínico parten las siguientes líneas que resumen en si los grandes cambios que estas plantillas presentan, y que más adelante comentaré.

Analisis de las nuevas plantillas por Cyball Ruiz

 Pros:

  • Diseño responsive, basado en una sola columna (ya no hay sidebar a simple vista)
  • Carga más rápida, debido a que lo más pesado de cualquier plantilla es cargado externa y asíncronamente, incluso los estilos básicos.
  • Facilidad de configuración desde el Editor, para quién no tiene idea de código o simplemente no quiere complicarse con él.
  • Nuevas funcionalidades, cómo aspecto del formulario de comentario (aunque YA tengo un tutorial para implementarlo en las demás plantillas) y nuevo estilo del header, más minimalista y que incluye el buscador y un sidebar expandible (emulando un menú lateral).

Contras

  • Poca libertad de personalización, en el sentido de que mucho está ya configurado externamente; aunque siempre es posible hacer cambios, hacerlo podría afectar la nueva velocidad de carga (deberíamos sobreescribir código o implementar lo externo dentro de la plantilla para poder editar a gusto).
  • Tiene tanto pero tanto incluido (por ejemplo gadgets) para editar rápidamente, que terminas con una plantilla con funcionalidades que no usarás en su 100%
  • Los tutoriales anteriores NO funcionarán fácilmente aquí, sobretodo aquellos sobre cómo agregar Entradas relacionadas por etiquetas o Formularios de suscripción de otros servicios como Mailrelay o Mailchimp justo debajo del cuerpo del post; todo lo que implica trastear plantilla no es recomendado para quién tiene nociones simples de edición en Blogger. 

Lo que me hubiera gustado

  • Plantillas que permitieran realizar páginas principales como portadas. Es algo que muchos en Blogger envidian de las plantillas en Wordpress.com ( y si me lo preguntan, es lo único que deberían envidiar)

Consejos si decides cambiar a una de estas plantillas:

  • Apunta en un editor de texto sin formato todo el código de personalización que desees conservar. No es garantía que sea posible usarlo todo, pero al menos puedes implementar los colores y fuentes que ya tenías establecido como imagen.
  • Revisa el formato de tus entradas, si has metido personalizaciones es posible que se descuadre con la nueva plantilla. 
  • Es preferible crear un blog de pruebas y en este subir una copia de tu contenido, antes de dar el gran paso en tu blog.

Características ventajosas de las nuevas plantillas

Tras el resumen de Cyball quiero incidir en aquellos aspectos que considero francas mejoras respecto a las nativas anteriores, en especial a la plantilla simple, la más utilizada hasta ahora. Este análisis parte siempre desde mi punto de vista como bloguera y graduada en Gráfica interactiva, y aunque suelo ser muy objetiva dejaré caer mis primeras impresiones personales.  Analicemos pues estas nuevas características:

Diseño responsive

En estas plantillas la estructura está cuidadosamente pensada para que se adapte como un guante a cualquier ancho de pantalla, conociéndose este tipo de diseño como fluido o líquido. Si aumentas y estrechas el ancho del navegador de la plantilla podrás comprobar como funciona.

La plantilla simple tiene una estructura antigua: una columna central de ancho fijo. Si éste supera el tamaño del monitor el contenido aparecerá cortado y con suerte será navegable gracias a unas barras de desplazamiento.  Esto no pasa en las nuevas, y tampoco necesitarás activar la vista móvil del blog. Esta vista suponía una solución parche para el verdadero problema del diseño web actual : la diversidad de tamaños y formatos que presentan los nuevos dispositivos.

En el diseño responsive la página web se adapta a cada pantalla respetando la misma imagen y siendo siempre legible. Así el contenido se redistribuye en una o varias columnas,  se oculta y/o hace expansible mediante botones, y se modifica los tamaños de tipografías e imágenes.


Sidebar que se despliega en dispositivos móviles mediante un icono

Es muy curioso observar como Blogger ha resuelto qué hacer con el sidebar. Personalmente lo interpreto como una afirmación de Blogger de definirse como plataforma antetodo de blogging. Así si el desarrollo de Wodpress va más allá generando webs, tiendas, y hasta plataformas de e-learning ...Blogger continuará siendo una excelente - y gratuita - plataforma para montar un blog. Y es razonable pensar así porque Google (su propietario) quiere que le ayudemos a inundar de contenido Internet, ya que sin éste de nada servirían sus servicios como buscador.

Una de las tendencias de las web actuales es mantener una lectura del contenido (a ancho completo) bajando (haciendo scroll) de manera casi infinita, sea cual sea el dispositivo. El sidebar ocupa espacio y distrae la atención de esta lectura lineal, pero en un blog su función es primordial. En esa zona podemos: anunciar quien somos, dejar que se suscriban al blog, mostrar un archivo cronológico de entradas, permitir búsquedas mediante etiquetas, publicitar mediante banners, etc.

No se puede hacer desaparecer este espacio tan valioso...pero incompatible en anchos de pantalla diferente. Si no cabe en el ancho de la pantalla se puede mostrar al final de la entrada, pero ¿qué ha hecho Blogger? Hacer que el sidebar sea siempre accesible mediante un desplegable. Así el típico menú de tres rallitas (también llamado menú hamburguesa) nos da acceso a él cuando el ancho de pantalla no permita mostrarlo.


Barra superior fija, centrada en suscripción y búsqueda

Las barras superiores de navegación,  fijas o que aparecen al subir por la pantalla,  son realmente cómodas. Muchas veces incluso tienen el logo integrado de manera que es muy difícil sentirse desorientado en una web. Blogger apuesta por esto y al hacer scroll y bajar por el blog la cabecera se convierte en una fina barra fija. En esta se encuentra además del título del blog tres enlaces: suscripción, búqueda y botón para desplegar el sidebar.

Estos dos elementos, botón de suscripción a feedburner y buscador,  aparecen por defecto en todas las cabeceras, pero no es así con el gadget de páginas. Este gadget, que nos permite crear un menú horizontal, se puede integrar en el espacio de la cabecera.

Observaremos que en cada plantilla este menú de páginas tiene un estilo distinto, y que al reducirse la pantalla aparece un botón que permite desplegar la parte que no cabe. Hasta aquí bien, la única pega es que al hacer scroll no aparece en  la barra fija, lo que hace pensar que tal vez sería mejor situar el gadget en el sidebar, siempre accesible a través del icono de las tres rallitas. Seguramente para Blogger no es tan prioritario un menú, al fin y al cabo lo importante de un blog  es que navegues por sus entradas.

Otro cambio importante: se ha eliminado la barra de navegación de Blogger. Un elemento que apenas tenía  sentido mantener, y que ahora es totalmente incompatible con esta barra superior fija.


Mensaje de cookies en la parte inferior de la pantalla

Es un alivio pensar que por fin ponen remedio al molestoso mensajito de aviso de cookies. Sigue siendo igual de grande y gris pero al menos ahora las plantillas incorporan un sencillo código CSS para desplazarlo abajo. De esta manera será más compatible con la navegación a través de la barra superior fija.


Página de inicio con sumario de entradas nativo

Cuando se aterriza a un blog nuevo se suele cotillear en la página de inicio cuales son las últimas entradas. Cómo se presentan éstas dependerá de cómo gestione nuestra plantilla esta página. La plantilla nativa solo nos ofrecía la posibilidad de acortar el post mediante el botón de salto de página, tras el cual se introducía un botón de leer más. En cambio en las nuevas plantillas los posts se presentan acortados de manera automática. En cada una el sumario es diferente y marcará bastante nuestra elección. Resumidamente :



Contempo

El "feed" de entradas se despliega en forma de filas. La primera imagen aparece recortada en formato cuadrado y a su derecha se muestra un extracto del post. Esta plantilla en mi opinión es la más versatil, en cuanto a que el texto es un poco más importante que la imagen. Esta distribución permite también mostrar un numero amplio de entradas sin hacer mucho scroll.



Soho

Esta plantilla está concebida para blogs donde la imagen es la protagonista, especialmente si se presenta en varios formato. Es la única que nos mostrará la imagen sin recortarla, llenando columnas del mismo ancho pero con altos diferentes. Para que nos hagamos una idea, aparecera  las primera imagen de cada post al estilo  Pinterest. Si tus fotos en tamaño son similares pero no estrictamente iguales piensa que el apecto que obtendrás será de una retícula levemente desplazada, no muy estético. Es muy recomendable para blogs de fotógrafos, diseñadores, artistas y en general cualquier blog en el que se muestren fotos de productos en formato diferente,  por ejemplo de manualidades.




Emporio

Esta es la plantilla con un estilo más "magazine", que irá muy bien a blogs de cocina, de belleza, y multitemáticos. Está pensada para mostrar en poco espacio un mayor número de posts. Es ideal en blogs con multitud de artículos, en los que predominen las fotografías en formato horizontal. El código recorta todas las imágenes al mismo tamaño y formato creando una retícula regular. Esta plantilla es la  única que al pasar el ratón encima de las imágenes aparecen las etiquetas, con la posibilidad de hacer un filtrado de entradas al clicar sobre ellas.





Destacable

Esta es en mi opinión la plantilla más indicada para blogs donde prime la lectura, sobretodo desde tablets. El tamaño de la tipografía es mayor que en las anteriores, y el texto ocupa todo el ancho de la pantalla, apareciendo el sidebar sólo en pantallas Full HD o mayores. La imagen se subordina al texto, las entradas aparecen en filas, con el texto de inicio de cada post recortado y la imagen a la izquierda, recortada en formato cuadrado.



En todas las plantillas la paginación se ha simplificado en un único botón que permite cargar más entradas.


Gadgets de diseño responsive incorporados en la misma plantilla

Estas plantillas incorporan los gadgets más usuales en el código, colocándolos en su justo sitio y  pudiéndose activar/desactivar desde el diseñador de Blogger, otra gran novedad. Además cada plantilla personaliza de manera algo diferente estos gadgets.

El gadget que nos permite destacar una entrada concreta aparece siempre en la página de inicio, encabezando el resto de posts. Aunque cada plantilla lo hace de manera diferente, el objetivo en todas es hacerla resaltar del resto de entradas. Me gusta esta opción, y es posible que sea la alternativa más correcta a artefactos más pomposos y pesados como los sliders.

El gadget de post populares se añade al final de cada entrada, exceptuando el caso de la plantilla  Emporio, que se haya en el sidebar. Aunque este es el mejor sitio para mostrar las "entradas relacionadas" esta opción permite al menos invitar al lector a seguir leyendo nuestros mejores artículos.

El sidebar se encabeza por el gadget de perfil, profundamente modificado.  Pocos utilizaban ya este gadget,  con un diseño y funcionalidades bastante desfasada. Ahora en cambio muestra bien enmarcado el perfil  de Google + con el botón incorporado de Seguir

Otros dos gadgets de gran sentido en un blog, el archivo y el de etiquetas, siguen encontrandose en el sidebar, pero adoptan un diseño desplegable, más limpio y en onda con  la economía de espacio en diseño responsive.Y por si a alguien le preocupa comentaré que el mensaje "Denunciar uso inadecuado" puede ocultarse sin problemas.


Diseño más moderno y minimalista

Aunque visualmente estas plantillas no me atraigan en demasía se tiene que reconocer que comparadas con la plantilla simple el diseño está en consonancia con las tendencias actuales.

Se siguen las directrices del Material Design de Google que hacen que la navegación en dispositivos móviles sea más intuitiva y sencilla.

La jerarquía tipográfica está mejor cuidada, las fuentes por defecto ya no son las del sistema y se muestran a un tamaño mayor.
 
También es de agradecer infinitamente que hayan eliminado el borde y las sombras de las imágenes. En fotografías a todo lo ancho siempre encontraremos un pequeño espacio a los márgenes laterales, pero quedaran centradas y nunca se desbordaran del ancho del post.

El blanco preside las primeras versiones de cada plantilla, aunque las cuatro restantes se llenen de color, mostrando lo que podremos seguramente personalizar desde el diseñador de plantillas.

El aspecto de los botones de compartir en redes sociales se han modernizado y se le ha añadido uno nuevo que permite copiar la URL del post. Ocupan muy poco espacio ya que se muestran solo si se despliega el botón de compartir. Aparecen también en las entradas resumidas de la página de inicio.

Otro diseño mejorado y simplificado es el de la cajita de comentarios, mucho más compacto y limpio.

Si hablamos de código la modernización también es notable, utilizando las últimas versiones de HTML y CSS. Aún así los títulos continuan mostrándose como etiquetas h3, y podría optimizarse más de cara al SEO.


Posibilidades de personalización

Por una parte el diseño y disposición de los gadgets está más condicionado por la plantilla. Así por ejemplo ya no tenemos la posibilidad de colocar sidebars a nuestro antojo, ni de dividir el pie del blog en dos o tres áreas de gadgets.

 Pero por otra si miramos cada plantilla  en el diseñador descubrimos que podemos cambiar tipografías y colores a un gran número de elementos. Como ejemplo menciono la posibilidad de personalizar el aspecto de las citas y pies de imágenes (leyenda), cosa que antes solo se podía hacer añadiendo líneas de código CSS.

A pesar de estas nuevas posibilidades muchos usuarios añoraran el nivel de personalización que gracias a tutoriales habían logrado con la plantilla simple. Pero como bien dice Cyball gran parte de éstos tutoriales no funcionaran ahora, y puede que algunos elementos sean más dificiles de cambiar mediante código.


En conclusión

Desde mi punto de vista Blogger con estas plantillas  ha dado un paso adelante, o más bien, dado el desfase de inicio, un salto a la modernidad. Ha remodelado la estructura del blog a nivel estético y funcional, pero sobretodo a lanzado su propuesta de blog ante el panorama actual. Un blog que debe adaptarse a nuevos dispositivos de lectura, cargarse veloz sea donde sea, y conectarse fácilmente con las redes sociales (de preferencia Google + claro)

Me temo que para muchos algunos de los cambios no seran muy bien acogidos y envidiaran modelos asentados en otras plataformas. Pero la postura creo que es bastante clara: ser fiel al espíritu inicial de blog como bitácora o diario personal. ¿O no? ¿Hechas en falta o te sobra algun elemento de estas plantillas? Nos leemos en los comentarios.

Entradas relacionadas

23 comentarios

  1. Gracias por el post, me ha parecido muy interesante. Una pregunta, comenta Cyball que es preferible hacer un blog de pruebas y cargar en èl una copia del contenido: si al blog de pruebas le cargamos la copia de seguridad (entiendo q eso es el contenido) no se cargan también todo los cambios de HTML y CSS que tenemos en el bolg original y se desconfiguraría el diseño original de la plantilla de prueba? No sé si me explicado, estoy un poco pez en blogging y todos los cambios los hago con corta y pega de tutoriales :)

    ResponderEliminar
    Respuestas
    1. Hola. En realidad tienes que hacer copia de dos cosas diferentes. una es la que te refieres: al código "HTML" de tu plantilla, mas que nada por si te arrepientes que puedas volver a tenerlo todo casi como estaba. Y otra copia es la de tu contenido, es decir tus entradas y páginas. Eso se guarda en un archivo .xml que es lo que permite migrar tu contenido a otra plataforma. Se hace desde el panel /otros/guardar copia de seguridad. Entonces abres un blog de pruebas, lo haces invisible a google e importas tu contenido. En ese blog puedes ver como quedaría tu contenido con estas nuevas plantillas.

      Eliminar
    2. Hola Eva, como bien te comenta Minerva, existen dos tipos de copias de seguridad: la de la plantilla y la de tu contenido; es a esta última a la que me refiero y es porque ponerla en el blog de pruebas te permite tener una mejor idea de cómo luciría la plantilla nueva con tus posts. Suele pasar que a veces agregamos estilos al texto del post y este podría cambiar de plantilla en plantilla, algunas veces para mejor, y otras se convierte en una pesadilla el cambio.

      Eliminar
  2. Gracias Minerva! Hace rato que doy vueltas con el blog! cuando vi que habían sacado nuevas plantillas responsive no me animaba a meterme en ese berenjenal. Ahora investigaré. Un abrazo

    ResponderEliminar
    Respuestas
    1. Estamos todos en ello. De momento es mejor sin duda que la simple blanca, pero si tienes una plantilla de terceros habría que mirar las diferencias para saber si te compensa o no.
      Un saludo!

      Eliminar
  3. Hola Minerva! Imagínate todo lo que sufrí con el cambio de plantilla y ahora Blogger tiene sus propias responsive, jaja! Bueno, me parece un buen paso y me gusta el diseño del sidebar de esa forma, también el display de las entradas con una foto pequeña y el texto lo que permite tener mejor visión de toda las entradas de la página principal.
    Supongo que así como en principio sucedió con las plantillas anteriores, la gente le buscará la vuelta a estas y saldrán tutoriales para optimizarlas a gusto.
    Un saludo!

    ResponderEliminar
    Respuestas
    1. Bueno, de todo se aprende! Ahora mismo yo me quedo con mi plantilla de terceros por simple comodidad y balanceando lo que me ofrece cada una. Espero también ver cómo se dinamiza un poco Blogger porque últimamente estoy viendo cosas que no me gustan en este mundillo ...demasiado vendehumos que te hacen saltar a Wordpress con los ojos cerrados, en fin

      Eliminar
  4. ¡Gracias por toda la información! Creo que a todos nos tomó por sorpresa y estamos ahí viendo qué tal jajaja

    Con sus pros y contras, lo que más rescato es que con esto los creadores de Blogger han demostrado que no han olvidado la plataforma y qué no están dispuestos a dejar que caiga en el olvido cómo muchos decían

    ResponderEliminar
    Respuestas
    1. Sí por fin han reaccionado, yo creo que mientras Google siga siendo el buscador por excelencia tenemos Blogger para rato. Y sobre los agoreros...los continuará habiendo, al fin y al cabo tienen muchos intereses puestos en otras plataformas.
      Un saludo!

      Eliminar
  5. Gracias por este post quiero dar una lavada de cara a mi blog y justo estaba pensando en esas nuevas plantillas nuevas de Blogger mi blog es de fotografía... Creo que la adecuada para mi es la plantilla Soho

    ResponderEliminar
    Respuestas
    1. Seguramente que buena elección, es muy elegante. Un saludo

      Eliminar
  6. Hola, un post muy interesante. Yo probé las nuevas plantillas pero no las uso porque la barra lateral sólo se ve si el lector da a desplegar, y pocos lo harán. Tengo banners patrocinados y si no se ve la barra lateral a la primera tendré que quitarlos. ¿Hay alguna forma de hacer que se vea la barra lateral de forma permanente? ¿Y cambiarla de lado es fácil?

    ResponderEliminar
    Respuestas
    1. Hola, exceptuando destacable el resto de plantillas muestra la barra lateral en desktop. El mismo problema que comentas lo sigues teniendo en las plantillas responsive convencionales. Como no hay espacio se empuja al final del post...y normalmente no se sigue haciendo scroll mucho más allá de los comentarios. Sobre la situaciín de la barra lateral no creo que sea muy dificil, pero aún no me he puesto a investigar.

      Eliminar
  7. Disculpa ¿como puedo ocultar el mensaje "Denunciar uso inadecuado"? donde debo acceder y que debo editar?

    ResponderEliminar
    Respuestas
    1. Hola, lo puedes hacer desde menu Diseño. Lo encontrarás como un gadget que puedes desactivar facilmente. Saludos

      Eliminar
  8. Hola, disculpa una duda ¿Cómo hacer que la barra lateral se vea permanentemente sin necesidad de recurrir al "desplegar"?
    Besos y abrazos

    ResponderEliminar
  9. Hola, te felicito por la explicación muy clara !!! Yo soy de las que cambió a la plantilla nueva sin hacer prueba!!! Puse Soho y es un desastre!!! Las imagenes se ven gigantes y cortadas y en la versión de pc no sale la barra lateral visible. Prove con las otras plantillas y me hace lo mismo, las imagenes salen enormes y cortadas. No tenes idea porque me hara eso? Desde ya gracias por tu tiempo!!!

    ResponderEliminar
    Respuestas
    1. Hola, Soho es la única plantilla que no recorta las imágenes. Si tus primeras imágenes son muy diferentes puede que se vea un poco desordenado, especilamente si no tienen fondo o es blanco. Viendo la temática de tu blog creo que Emporio funcionará mejor:recorta las imágenes y las muestra más pequeñas. Otras cosas que mejoraría en tu blog es sustituir la cabecera por un logo. Sobre ese desbordamiento de imágenes populares al final del post prueba a eliminar el gadget y volverlo a crear. Espero que eso lo solucione. Ánimo a veces hay que probar varias plantillas hasta dar con la adecuada

      Eliminar
    2. Gracias Minerva!!! Si, habia pensado en esa plantilla, incluso la probé,voy a poner esa provisoriamente hasra que encuentre otra que me convenza. Muchas gracias por tu tiempo y desde ya que me tenes de abonada a tu pagina.

      Eliminar
  10. ¡Pero qué diva, Minerva! Me ha gustado mucho tu análisis.
    Y sí, menos mal que por fin añadieron esas plantillas. Las otras estaban un tanto obsoletas.

    ¡Un beso!

    ResponderEliminar
  11. Buenas tardes, excelente articulo, saludos desde la seudo dictadura en venezuela, quisiera saber si hay alguna forma de colocar fija la sidebar, o sea que en el pc aparezca siempre tambien,
    O donde crees que deberia cambiar para lograrlo, gracias saludos

    ResponderEliminar
    Respuestas
    1. Disculpa en las plantillas emporio, gracias

      Eliminar
  12. La barra lateral no aparece en las entradas, lo que lleva a redimensionar la idea de nuestra pagina, es mas la barra que aparece en la pagina principal es de menos de 300 pixeles y no se puede cambiar.
    Las plantillas anteriores son tambien responsive seran mas lentas pero funcionan bien y estas no permiten hacer casi nada lo que coloca los blogs en repetitivos algo que se vera igual muy parecidos casi todos.

    Creo prefiero malo por conocido, saludos

    ResponderEliminar