Esto es un hecho y lo que nos toca hoy día como administradores es, además de usar plantillas adaptadas para dispositivos móviles, intentar que cuando nuestro sitio se vea en uno de ellos la carga sea lo más rápida posible.
Amén de otros asuntos que debemos tener en cuenta, lo que con mucho mejorará esa carga será eliminar todo aquello que no se vaya a utilizar o que por su peso consideremos que no merece la pena cargar en un dispositivo más lento que los ordenadores de escritorio. Un pequeño análisis beneficios vs. inconvenientes nos dirá qué cosas podríamos olvidar.
Para que se entienda esto, un fabuloso slider con imágenes de alta calidad que va a tardar mucho en cargar, podría llegar a agotar la paciencia de un usuario y eso nos llevaría a que no esperara lo suficiente para ver ese slider y, claro está, tampoco el resto del contenido de la página. Entonces si no aporta información realmente relevante sobre el resto del contenido ¿no sería mejor eliminarlo en móviles para no correr el riesgo?
Para aplicar esto en Blogger nos podemos basar en una sencilla variable data que hace unos pocos días +Kseso nos descubrió desde su blog en un artículo titulado Condicional de Blogger para detectar dispositivos móviles sin habilitar su plantilla.
Hablábamos hace poco del "lenguaje Blogger" y este es otro ejemplo del vocabulario de ese dialecto. El condicional en cuestión es isMobileRequest que nos da el valor true cuando hemos accedido desde un dispositivo móvil y false en caso contrario.
Tan sencillo como práctico, su uso sería así:
<b:if cond='data:blog.isMobileRequest == "true"'>
<b:section class='slider' id='slider'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
...
</b:includable>
</b:widget>
</b:section>
</b:if>
<b:section class='slider' id='slider'>
<b:widget id='HTML1' locked='false' title='' type='HTML'>
...
</b:includable>
</b:widget>
</b:section>
</b:if>
Todo lo que quede dentro de la apertura y el cierre de la condición, expresada de esta manera, sólo se ejecutará si se está accediendo desde un dispositivo móvil. Si por el contrario la igualdad se conjuga con false, lo que quede dentro sólo se ejecutará cuando NO accedemos desde móvil.
Luego se podrían utilizar else y otros operadores para que en una misma sentencia digamos qué se debe ver/no ver en un caso y qué en el contrario, pero todo eso ya entra dentro de otro tipo de explicaciones (y 2). Lo importante es que con esto podréis elegir los elementos que se cargarán en cada tipo de dispositivo (fijos/móviles) de manera independiente.
Cómo distingue Blogger cuándo asigna un valor u otro, lo ignoro, pero el true coincide con los casos en que Blogger añade a la URL visitada un ?m=1 y aunque esto no sea muy académico, con saber eso de momento nos vale para la resolución de este problema.
Previendo algunas preguntas al respecto de todo este tema de los móviles, me adelanto haciendo las siguientes consideraciones:
- Usar una condición para intentar detectar si una URL tiene el ?m=1 añadido no sirve para este fin de "eliminar" elementos
- Otra data que se cita en muchos artículos como que sirve para hacer esto mismo, sólo funciona cuando se tiene activada alguna plantilla móvil de Blogger. Se trata de data:blog.isMobile. El inconveniente de esta es que si se desactiva dicha plantilla, por ejemplo para usar una propia RWD, la variable no nos dará el resultado esperado, es decir, no funcionará. Esto ha generado muchas dudas escritas y no resueltas en este mismo blog... hasta ahora. Esta es la explicación de por qué unas veces iba y otras no.
- El uso de display: none; dentro de alguna regla @media para ocultar ciertos elementos en los accesos desde pantallas pequeñas (presuntamente de dispositivos móviles) sigue estando bien pero resulta incompleto. Aquello que se oculta con este sistema se carga igualmente aunque luego lo volvamos invisible, pero lo cierto es que se carga.
Esto último no quiere decir que haya que reajustar esas media queries. Al contrario, hay que dejarlas como las tuvierais y nos van a servir de perfecta guía para añadir esta data que hemos visto hoy, a todo aquello que tenemos marcado con ellas para ocultar cosas. Es decir, ambos sistemas son complementarios.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Y aquí se nota para bien... :)
ResponderEliminarPues que sepas que todavía no he aplicado esto. Cuando lo haga va a volar ;)
EliminarVaya... pues ahora va ligerisima. Ya te contaré :)
EliminarGracias por la mención y el par de enlaces.
ResponderEliminarAhora a sacarle provecho.
Un saludo
Buenísimo. Saludos a ambos :)
ResponderEliminarBuenas:
ResponderEliminarComento unicamente para felicitarte por el blog, he estado mirandolo y la verdad es muy completo, yo mismo estoy un poco atascado con el mio jajaja, a veces es dificil saber por donde seguir con tu blog, pero tu lo haces, felicidades y gracias por el esfuerzo que te debe costar
Un saludo
Muchas gracias. Iván. Realmente lo difícil es tener sobre qué escribir, pero en esto del código no se termina nunca ;)
ResponderEliminarHola estoy poniendo este codigo
ResponderEliminar#header-inner img {margin: 0 55px !important;}
#header-inner img {
width:280px; /*Ancho*/
height:55px; /*Alto*/
}
para ajustar la cabezera en la version para iphone de mi web el problema es que si pongo ese codigo se modifica en toda la plantilla .
pd : cada resolucion sale con @media en el codigo ..tendria que reajustar el codigo en cada resolucion?
Hola Sergio
ResponderEliminarSi lo pones así, en la parte del HEAD, te debería funcionar bien de manera que ese CSS sólo se ejecutara en móviles.
<b:if cond='data:blog.isMobileRequest == "true"'>
<style>
#header-inner img {margin: 0 55px !important;}
#header-inner img {width:280px;height:55px;}
</style>
</b:if>
Aunque lo que añadas con @media tendrá preferencia con respecto a ese código, así que seguramente está prevaleciendo ese sobre el condicionado.
Hola Oloman,
ResponderEliminarPorque mi blog en IPhone por ejemplo no se ve el banner principal ni lo que está debajo del menú del carro de compras?.
Le agregue el código que le sugieres a Sergio justo después del head y nada.
Mi blog es, qtdpremama.blogspot.com
Puedes orientarme que debería hacer?.
Muchas gracias
No tengo iPhone para poder verlo en acción y en tu blog no veo nada raro, así que esta vez no te voy a poder ayudar :(
EliminarERES EL AMO ! xD gracias oloman sigue asi mi blog es lo que es por tus enseñanzas
ResponderEliminarHola oloman en la plantilla que tengo en los dispositivos mobiles si te fijas el fondo es blanco pero sobre pasa por encima de todo como muchos puntos y no me deja hacer nada como compartir etc... mientras esta cargando en el dispositivo todo se ve bien hasta centrado pero cuando termina de cargar el lado derecho se sale del margen y me gustaria que todo quede centrado este es el sitio http://www.ccjehovanisi.org/ muchisimas gracias por tu ayuda que pases un exelente dia.
ResponderEliminarHola. Quita de esta parte de tu plantilla ese float: none; Aunque no es lo óptimo, por lo pronto te funcionará mejor:
Eliminar@media only screen and (max-width: 768px)
#post-wrapper, #sidebar-wrapper {
float: none;
width: 100%;
max-width: 100%;
}
Hola Oloman, muy bueno tu blog, tengo una duda...
ResponderEliminarcomo quito la navegacion lateral en moviles de blogger?
http://4.bp.blogspot.com/-k2mdhWuj_Fc/VmJhttok0cI/AAAAAAAAqwQ/qETt1hwQGhc/s1600/blogger%2Bmovil.jpg
quiero poner una imagen con scroll, pero en moviles me molesta esa navegacion entre posts
No lo veo ahora mismo en ese blog, Emanuel, pero precisamente sería tal y como explico aquí... metiendo el gadget que forma esa navegación lateral dentro de una condición con "data:blog.isMobileRequest".
EliminarHola Oloman gracias por contestar, esa navegacion lateral viene por defecto y no aparece en la plantilla,
Eliminarusé este codigo antes de /body
script
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
var orig = document.getElementById("main");
var clone = orig.cloneNode(true);
orig.parentNode.replaceChild(clone, orig);
}
}
/script
de esta fuente saque la info
https://productforums.google.com/forum/#!topic/blogger/8hNsCLpEn6U;context-place=forum/blogger
pero todos esos codigos que escribieron en la fuente hacen que funcione mal otros codigos, como la caja de comentarios.
parece que no hay una forma de eliminar solo el swipe de navegacion entre post en moviles blogger
Lo siento, pero a mí no me sale y si no puedo verlo funcionando, no soy capaz de decirte qué puedes cambiar para quitarlo.
EliminarEn el hilo que me pusiste hay algo al final que quizás te valga, pero sinceramente, ni eso sé seguro.
Hola Oloman! Muchísimas gracias por el tuto, tendré que comenzar a aplicarlo:3 Aunque me ha quedado una duda; ¿puedo utilizarlo en un post? Ya sabes, así cargo una imagen un poco más liviana y solo el CSS que necesito para los móviles. ¡Desde ya muchas gracias!
ResponderEliminarNo Ani. Tanto las condiciones como las variables DATA, sólo funcionan desde la plantilla.
EliminarSi lo que quieres es usar un CSS para móviles y otro para PC, entonces sí, pero escribiendo ambos en plantilla y condicionando como se explica en el post. Con las imágenes de las entradas no podrás usar este truco.
Ya lo suponía, aunque probando y probando terminé de comprobarlo. Aún así, muchas gracias por tu pronta respuesta. ^^
EliminarHola: de nuevo recurro a tu ayuda aunque no sé si quizá en la página más adecuada. Disculpa si no fuera así.
ResponderEliminarMi consulta es que cuando activé en la plantilla del blog la vista para móviles de mi blog https://disfrutarconelhuertoyeljardin.blogspot.com.es/, de golpe bajaron las páginas vistas una auténtica barbaridad: tal como de 20.000 a 4.000 al día siguiente y quisiera saber si habré hecho algo mal o si sería mejor volver a desactivarla pese a que blogger está todo el tiempo insistiendo en que lo haga. Un saludo y muchas gracias de antemano.
Hola Lidia. El SEO no es lo mío pero creo que activar la plantilla móvil sólo puede tener efectos beneficiosos y no lo contrario. En principio tengo que achacarlo a una mera casualidad pues tampoco es normal que un cambio en un blog tenga unos efectos en las visitas (al alza o a la baja) tan inmediato.
EliminarWow, esto es el mejor sitio de blogger que he visto en la vida!
ResponderEliminarFelicidades!