Personalizar la Plantilla Móvil de Blogger. Lo que Necesitas Saber
Voy a tratar de explicar lo más claro posible y de forma sencilla todos los detalles. Si algo no queda claro, crees que está mal explicado o se me escapó algo, por favor házmelo saber ya sea en un comentario público o privado, o usando el formulario de contacto y con gusto vemos cómo mejorarlo ;)
¿Lista (o) para empezar? Empecemos ;)
Echando un vistazo al funcionamiento de las plantillas para móviles de Blogger
Cuando eliges una plantilla para móvil, Blogger devuelve al navegador el código de la plantilla que seleccionaste y ésta podrá ser vista en un teléfono inteligente.La estructura de la plantilla móvil, es decir su código, viene incluido en las plantillas nativas de Blogger, pero solo es descargado por el navegador, si un usuario visita el blog usando un dispositivo móvil ya que utilizan código condicional para lograrlo.
Por ejemplo, considerando las entradas: ¿te has preguntado porqué en la versión móvil aparece la imagen miniatura y un fragmento de texto de la entrada y enseguida una flechita en la página de inicio?
Éso sucede porque en el gadget de las entradas (Blog1) incluye código específico para dicha versión y se muestra gracias al uso de condicionales.
Al seleccionar la opción "Personalizado" al elegir la plantilla móvil, será posible personalizarla y crear la apariencia que desees. También podrás "controlar la visibilidad" de los elementos que agregues tanto en la versión web como la móvil.
Por ejemplo, si agregas una barra superior en el blog y tienes seleccionada la opción "Personalizado" para la plantilla móvil, la barra sí va a parecer. Pero, si tienes seleccionada cualquiera de las otras plantillas para móvil, como por ejemplo: "la sencillo" o la "Window Picture", la barra no va aparecer.
Los gadgets que por defecto aparecen en la versión móvil "si los has añadido a tu blog", (con excepción al del Blog, Attribution y Header que ya están agregados por defecto al crear el blog) son:
- Header. Que es el gadget de la Cabecera del blog. Por lo tanto si utilizas una imagen en la cabecera del blog, también aparecerá en la versión móvil.
- Blog. El gadget de las entradas. Obviamente este elemento no puede dejar de aparecer. Sin entradas no hay blog ;)
- Profile. El gadget del perfil del autor (es) del blog.
- PageList. Que es el gadget de "Lista de páginas".
- AdSense. El gadget de la publicidad de Adsense.
- Attribution. El gadget con el crédito de la plantilla y el crédito de las imágenes si se usaran las que Blogger facilita desde el diseñador de plantillas.
Preparando la plantilla para poder Personalizar la versión móvil
Primero lo primero
Algo importante que hay que hacer para poder personalizar la plantilla para móvil y "se muestren los elementos que queramos", es seleccionar la opción: "Personalizado" al elegir la Plantilla para móviles.
Ésto lo hacemos, si vamos a: Plantilla, haces click en el icono de rueda dentada o engranaje
que aparece en la sección de plantillas para móvil y que al poner el puntero encima dice: "Personalizar la plantilla para móviles" y elegimos la opción: "Personalizado" y guardas el cambio en Guardar.
También, hay que verificar que la etiqueta
<body> aparezca como se muestra a continuación:<body expr:class='"loading" + data:blog.mobileClass'>De otro modo, aunque agreguemos CSS para que se aplique en la versión móvil, éste no se aplicará.
Así que, asegúrate que la etiqueta
<body> se muestre con ese atributo y valores.
Recuerda: para poder personalizar la plantilla móvil, ya sea cambiando un color de texto o fondo, y/o agregar elementos, o hacer cualquier otro cambio, es necesario tener seleccionada la opción: Personalizado. De otro modo no será posible personalizarla y no aparecerán los elementos que agregues.
Excluyendo elementos en la versión móvil
Excluir gadgetsEs posible excluir gadgets por ejemplo, imaginemos que no quieres mostrar cierto bloque de publicidad de Adsense en la versión móvil, que por defecto también aparece en dicha versión si lo has agregado al blog.
Para que no aparezca, habrá que añadir un atributo de Blogger denominado:
mobile con el valor no en el elemento b:widget del código del gadget, como se aprecia a continuación:<b:widget id='AdSense1' locked='false' title='' type='AdSense' mobile='no'>Excluir un elemento o sección que incluya un gadget
Vamos a imaginar que has agregado una sección que no está optimizada para dispositivos móviles, creada con un
div en donde tienes puesto cualquier elemento usando el gadget con la opción HTML/JavaScript.El
div o envoltura de la sección a las que has definido un alto va a aparecer, mientras que el contenido no, puesto que el gadget HTML/JavaScript no aparece por defecto en la versión móvil.Si quieres excluir esa sección, es posible envolverla en una condicional de Blogger que creamos para tal fin, como puedes ver a continuación:
<b:if cond='data:blog.isMobile == "false"'>
<div id="seccion">
<!-- Aquí dentro contenido como un gadget(s), etc. -->
</div>
</b:if>
De ese modo dicha sección solo aparecerá en la versión de escritorio. Hay que mencionar que, solo es útil usar la condición si la sección tiene definido un alto, de otro modo no será necesario, considerando que el gadget no se muestra en la versión móvil, y al no haber un alto definido ni contenido, la sección no será visible en la versión móvil.
Excluir un elemento o sección que NO incluya un gadget
Lo mismo harás para una sección que hayas incluido en la plantilla, en la que no hayas colocado ningún gadget, es decir, donde hayas usado código HTML para agregarla.
<b:if cond='data:blog.isMobile == "false"'>
<div id="seccion">
<!-- Aquí dentro contenido -->
</div>
</b:if>
Incluir gadgets en la versión móvil
Mostrar gadgets solo en la versión móvil.Vamos a imaginar que quieres mostrar un widget "solo en la versión móvil". Por ejemplo un bloque de publicidad de AdSense.
Para que solo aparezca en dicha versión, habrá que usar el atributo de Blogger: "
mobile" con el valor "only" en el elemento b:widget del respectivo código del gadget, como se muestra a continuación:<b:widget id='AdSense1' locked='false' title='' type='AdSense' mobile='only'>Y listo. El bloque publicitario solo se mostrará en la versión móvil.
Mostrar un gadget "también en la version móvil".
Vamos a imaginar que quieres incluir el gadget de lista de enlaces. En tal caso y como el resto de widgets que no aparecen por defecto en la version móvil, agregamos el atributo:
mobile y el valor yes en el elemento b:widget del código del widget, como se aprecia a continuación:<b:widget id='LinkList1' locked='false' title='' type='LinkList' mobile='yes'>La linea de código del gadget/widget donde hay que poner el atributo
mobile con el valor que nos interesa, es la primera linea de código del gadget y empieza con b:widget. Podemos Acceder al código del widget fácilmente si conocemos su Id, usando la lista desplegable que dice: Ir al widget.
En esta entrada menciono cómo identificar el Id de un widget, y te facilito una lista con el Ids de los widgets más comunes. Te resultará muy útil si quieres incluir/excluir gadgets en la versión web o móvil.
Crear una versión móvil y una versión web para cierto elemento
Podemos hacer uso de código condicional, de tal modo que agreguemos la estructura de un elemento para la versión web, y otra para la versión móvil.Por ejemplo, imaginemos que tenemos un menú de navegación en donde en la versión de escritorio aparecerán los enlaces de foma horizontal, mientras en la versión móvil, queremos que aparecerza un botón y al hacer click sobre éste se desplieguen los elementos del menú de forma vertical para que puedan ser vistos cómodamente.
En tal caso usamos la variable:
data:blog.isMobile y creamos la condicional anidada: <b:if cond="data:blog.isMobile">
<!-- Elemento que se mostrará en la version móvil-->
<div>
...
</div>
<b:else/>
<!-- Elemento que se mostrará en la versión Web -->
<nav>
...
</nav>
</b:if>Lo mismo podemos hacer con los gadgets de Blogger. Podemos manipular su código, usando código condicional, para mostrar el elemento de forma distinta en ambas versiones, buscando que en la versión móvil se "devuelva" el elemento "adaptado u optimizado" para que sea visto y usado apropiadamente en dispositivos móviles.
<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!--Contenido que se mostrará en la versión móvil-->
...
<b:else/>
<!-- Contenido que se mostrará en la versión web -->
...
</b:if>
</div>Hay que tener en cuenta que al agregar el elemento dinámico es decir que tendrá una versión web y una móvil, hay que ponerlo en el código de la plantilla que no sea exclusivo a la versión web o móvil, por ejemplo, debajo de la cabecera está bien. En otras palabras que se encuentre fuera del código de los gadgets. Es distinto para los propios gadgets, ya que es en el código del mismo gadget, donde creamos la condición incluyendo el código para las dos versiones como se aprecia en el código anterior.
Aplicar CSS
Podemos aplicar CSS a ciertos elementos en la versión móvil si creamos reglas de estilo usando el llamado "selector" en CSS del elemento que nos interesa personalizar, precediendo la clase: ".mobile".Un selector en CSS especifica la forma en que está nombrado/identificado un elemento, con el fin de poderle aplicar propiedades que definirán su apariencia.
Pero mejor veamos un ejemplo. Imaginemos que queremos hacer que el título del blog aparezca centrado en la versión móvil al usar la plantilla personalizada.
Teniendo el selector para el título que es:
.Header h1, y que debemos ponerle antes: .mobile creamos la regla de CSS agregando la propiedad: "text-align", que sirve para definir la alineación del texto, con el valor center para centrarlo..mobile .Header h1 {
text-align: center;
}Consejos al Incluir elementos como Secciones o Gadgets también en la versión móvil
Si quieres mostrar un elemento también en la versión móvil, hay tener en cuenta que dicho elemento tiene que estar optimizado para que se adapte apropiadamente en la versión móvil y que los usuarios puedan usarlo sin dificultad.Por ejemplo, si agregas una barra superior que incluye elementos táctiles como botones o enlaces, éstos tienen que tener una medida adecuada y la separación recomendada, para que se pueda hacer click sobre ellos sin problemas.
Recomendaciones a seguir cuando quieres incluir un elemento en la versión móvil:
- NO definas un ancho fijo de la sección usando píxeles, por ejemplo:
#seccion{width:1000px}. Ésto evitará que el elemento se adapte apropiadamente a la ventana gráfica considerando la resolución de pantalla del usuario. En su lugar utiliza porcentaje o ancho automático (auto) al definir el ancho. - NO Agregues elementos que tengan un ancho superior a 320 pixeles a un gadget o sección. Esto provocará que el elemento se desborde y generará una barra de desplazamiento horizontal en la ventana de navegador.
- Evita usar
display:nonepara ocultar un elemento en la versión móvil, especialmente si el elemento consume muchos recursos, pues afectarás el rendimiento del blog en dicha versión. - Agrega elementos táctiles como botones, enlaces y otros que vayan a ser usado por el usuario siguiendo las recomendaciones de Google.
- No agregues más elementos de los que puedan mostrarse apropiadamente tomando en cuenta el máximo ancho que puede tener un elemento considerando las distintas resoluciones de pantalla de un dispositivo móvil. Por ejemplo si usas una sección con un ancho de 100%, el elemento que incluyas, debe tener un ancho relativo a dicha sección, o bien no rebasar los 320 píxeles para que pueda visualizarse en resoluciones de hasta 320px sin problemas.
Conclusiones
La plantilla personalizada ofrece la flexibilidad y dinamismo necesario para lograr la apariencia que desees en la versión móvil del blog. Solo hay que tomar en cuenta las recomendaciones en términos de usabilidad para que el diseño se adapte correctamente a dispositivos móviles y pueda ser usado sin dificultades por los usuarios que visitan el blog usando teléfonos inteligentes.Referencias y lecturas recomendadas:
Plantillas móviles para tu blog
Introducing Custom mobile template
Usabilidad móvil
Etiquetas:Plantilla móvil