Blogger móvil: Cómo eliminar de la carga los elementos que no necesitas | Oloblogger No creo que a estas alturas haga falta explicar mucho sobre la cada vez mayor relevancia del uso de ...

13 de julio de 2015

Blogger móvil: Cómo eliminar de la carga los elementos que no necesitas

No creo que a estas alturas haga falta explicar mucho sobre la cada vez mayor relevancia del uso de Internet desde móviles; que en consecuencia, para que un sitio web tenga más visibilidad es conveniente que esté adaptado para este tipo de dispositivos; que Google da puntos positivos y destaca aquellos blogs que practican el RWD; y bla, bla, bla...

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 móvil sí. Para móvil no.


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 == &quot;true&quot;'>
<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.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

21 comentarios :

  1. Y aquí se nota para bien... :)

    ResponderEliminar
    Respuestas
    1. Pues que sepas que todavía no he aplicado esto. Cuando lo haga va a volar ;)

      Eliminar
    2. Vaya... pues ahora va ligerisima. Ya te contaré :)

      Eliminar
  2. Gracias por la mención y el par de enlaces.
    Ahora a sacarle provecho.

    Un saludo

    ResponderEliminar
  3. Buenas:
    Comento 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

    ResponderEliminar
  4. Muchas gracias. Iván. Realmente lo difícil es tener sobre qué escribir, pero en esto del código no se termina nunca ;)

    ResponderEliminar
  5. Hola estoy poniendo este codigo

    #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?

    ResponderEliminar
  6. Hola Sergio

    Si 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 == &quot;true&quot;'>
    <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.

    ResponderEliminar
  7. Hola Oloman,

    Porque 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

    ResponderEliminar
    Respuestas
    1. 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 :(

      Eliminar
  8. ERES EL AMO ! xD gracias oloman sigue asi mi blog es lo que es por tus enseñanzas

    ResponderEliminar
  9. Hola 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.

    ResponderEliminar
    Respuestas
    1. Hola. Quita de esta parte de tu plantilla ese float: none; Aunque no es lo óptimo, por lo pronto te funcionará mejor:
      @media only screen and (max-width: 768px)
      #post-wrapper, #sidebar-wrapper {
      float: none;
      width: 100%;
      max-width: 100%;
      }

      Eliminar
  10. Hola Oloman, muy bueno tu blog, tengo una duda...
    como 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

    ResponderEliminar
    Respuestas
    1. 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".

      Eliminar
    2. Hola Oloman gracias por contestar, esa navegacion lateral viene por defecto y no aparece en la plantilla,
      usé 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

      Eliminar
    3. Lo siento, pero a mí no me sale y si no puedo verlo funcionando, no soy capaz de decirte qué puedes cambiar para quitarlo.

      En el hilo que me pusiste hay algo al final que quizás te valga, pero sinceramente, ni eso sé seguro.

      Eliminar
  11. 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!

    ResponderEliminar
    Respuestas
    1. No Ani. Tanto las condiciones como las variables DATA, sólo funcionan desde la plantilla.

      Si 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.

      Eliminar
    2. Ya lo suponía, aunque probando y probando terminé de comprobarlo. Aún así, muchas gracias por tu pronta respuesta. ^^

      Eliminar