Seguro que todas tenemos un blog bonito cuando los visitamos desde el pc, pero ¿ qué ocurre cuando nos visitan desde dispositivos móviles?. Normalmente la versión que te da blogger por defecto poco tendrá que ver con el diseño de tu blog. Los que me conocéis y/o me seguís, sabréis que soy un apasionada del diseño y de compartir lo que voy aprendiendo para mejorar el blog.

Hace meses que una bloguera a la que admiro, Miss Lavanda empezó un curso para personalizar nuestra plantilla móvil. Yo y muchas más blogueras seguimos sus dos primeros capítulos del curso pero inexplicablemente Laura desapareció del mundo blogger hace ya varios meses y no sabemos nada de ella ni de su blog. Aunque su blog sigue estando activo y ayudando a mucha gente, no hay publicaciones nuevas ni comentarios por su parte. Solo espero que esté bien y si algún día decide volver, la estaremos esperando.

 

Odio dejar las cosas a medias así que me puse a investigar, leer artículos sobre html, css y plantilllas moviles personalizadas. Hice pruebas, me equivoque, rectifique y con mucho tiempo y esfuerzo estoy consiguiendo personalizar la mía y la de los blogs que diseño.
Hace unas semanas me decidí a compartir mi manera de hacerlo. Recalco mi manera porque puede ser que haya otras más correctas o simplemente diferentes, pero yo os explicaré la mía con ejemplos prácticos.

 

¿Por qué debería personalizar mi plantilla móvil de blogger?

Como seguro que ya sabrás, desde el mes de abril Google penalizara en cuestión de posicionamiento las webs que no tengan un plantilla móvil responsative. Hay gente que huyendo de las opciones poco personales que te ofrece blogger, esté tentada a poner la versión web también para los móviles cosa que no beneficia en absoluto a la usabilidad del lector. Comprueba que tienes una plantilla optimizada para móvíles aquí.

 

Es bueno que compruebes cuantas visitas ven tu blog desde un dispositivo móvil así podrás hacerte una idea en que grado es conveniente meterte en faena con tu plantilla y el CSS. Si tienes tu blog conectado a Google Analytics podrás verlo muy facilmente en tu panel de Informes→audiencia→móvil→visión general

 

En mi caso aunque la mayoría de visitas me vienen desde un pc o portátil (Desktop) las 2.178 sesiones desde un móvil, le siguen muy de cerca. Por esa razón es importante facilitar la experiencia del usuario desde el móvil y que no parezca que al ver tu blog tenga poco que ver, visualmente, con la versión web. Lo ideas sería que ambas versiones compartan paletas de colores, tipografía y estilo.

 

Para hacerte una idea de este datos desde las estadísticas de blogger, ve a Estadisticas→público→páginas vistas por sistemas operativos. Allí podrás ver el porcentaje que te vine de Sistema android y Iphone. Aunque los valores de las estadísticas de blogger son poco precisos y completos comparados con los de Google Analytics.

 

Temario de Personaliza tu plantilla móvil

 

♦Crea una barra fija superior solo para versión móvil.
♦Crea un menú tipo páginas solo para versión móvil.
♦Crea una cabecera especial para tu móvil.
♦Añade y adapta gadgets a la versión móvil.

Publicaré un post cada semana y lo compartiré por mis redes sociales y newsletter quincenal. No es necesario que apliquéis todos los posts a vuestros blogs. Podéis elegir los elementos que os apetezcan incluir.

A tener en cuenta:
  • Esta serie de posts esta dedicada solo para los que tenéis un blog en la plataforma blogger. Ya sabéis que soy chica blogger 100%. WordPress es un mundo casi desconocido para mi, sobre todo su versión de pago.
  • Personalizar la plantilla móvil requiera mucha paciencia y un poco de tiempo. No siempre salen las cosas como queremos a la primera o en el peor de los casos, a veces simplemente no salen. Cada plantilla es un mundo y aunque yo lo he probado en varias plantillas para comprobar que funciona, en algunas que tenia más toqueteadas que otras, me ha costado más encontrar el resultado esperado.
  • Si tenéis plantillas descargadas fuera de blogger quizás podáis tener algún pequeño contratiempo para conseguir que funcione ya que a veces las personalización de este tipo de plantillas esta limitada o no funcionan los cambios que en las que trae blogger si. No me preguntéis porque.
  • Procurar copiar los códigos con tranquilidad y sin prisas. Si os olvidáis una letra, paréntesis o comilla, la cosa no ira bien. Ojo también puede ser que me haya pasado a mi en los posts aunque están revisados así que si descubrís alguna errata, avisarme.
  • Estos posts los comparto de forma desinteresada y con el objetivo de ayudaros pero en ningún caso me hago responsable de los cambios que hagáis en vuestra plantilla ni entraré en ningún blog. Por esta razón es imprescindible que antes de empezar a toquetear tu plantilla, te descargues una copia de seguridad para que tengas la opción de re-establecerla cuando quieras o si te has equivocado en los códigos y te sale algún error. Claro esta que podéis dejar todas vuestras dudas en los comentarios e intentare resolverlas en la medida de mis posibilidades.

Por si no seguiste los primeros pasos del Curso de Miss Lavanda prefiero que visites su blog antes de hacer dos posts prácticamente copiando lo que ella hizo tan bien en su tiempo.

 

ACTUALIZACIÓN 2016: Desafortunadamente el Blog de Miss Lavanda ya no existe. Cuando encuentre un hueco en mi agenda me dedicaré a escribir los posts referentes a estas dos primera lecciones. Aunque no son necesarias para personalizar el resto de elementos que te explico en las otras lecciones.

He tenido la suerte de encontrar un post en el blog de mi compañera Raquel Orta -De morros con el mundo 2.0- que te puede ayudar en los primeros pasos para personalizar tu plantilla móvil e incluso te aporta información complementaria que yo no trato en este cursos gratuito.

VISITAR EL POST ADAPTA TU PLANTILLA DE BLOGGER A LA VISTA MÓVIL
 

Por ultimo os dejo algunas capturas de pantalla para que tengáis una ideas de lo que aprenderemos a hacer de mi blog de pruebas que también os ánimos a visitar.

Vista móvil con cabecera del blog, barra fija con iconos web y menu.

 

 

Vista móvil con cabecera especial , barra fija superior con enlaces de texto y menú

 

Vista móvil de gadgets

 

 

Ya que este curso es gratuito y me ha costado sudores casi fríos encontrar la manera de conseguir el resultado esperado, estaría genial que lo compartierais para que sea visible al mayor número de bloggers posible y puedan por fin tener la plantilla móvil acorde con su blog. Cuando lleguemos a las 50 veces compartido, lanzó el primer tema. ¿Me echáis una manita? Un saludo, muchas gracias adelantadas y nos vemos por las redes.

 

¿Te ha sido de utilidad el artículo?
(Votos: 1 Promedio: 5)

Pin It on Pinterest