RSS

Feed

29 de noviembre de 2015

Convertir una plantilla de blogger en responsive y no morir en el intento

3 comentarios
Aviso, este post va a ser un poco técnico y quejica. Necesito desahogarme como buena informática que soy y dejar constancia de cómo a veces la menor chorrada hace que pierdas horas de trabajo para luego solucionarlo en… 1 hora como mucho ¬¬

Esta semana, después de la gracia de 000whebhost, he estado intentando crear una nueva versión de la web difunta, pero esta vez con Blogger.

La primera web estaba hecha en wordpress con un theme responsive que me gustaba, así que esa propiedad no quería perderla. Además ahora Google penaliza si tu web no se ve bien en dispositivos móviles, así que había que currárselo un poquito.



Al final ha resultado que no he tenido que currármelo un poquito, sino un muchito. En un principio la plantilla que había escogido, aunque no indicaba explícitamente que era responsive, por código se veía que algo hacía 

<voz_en_off> Eso es… MENTIRA</voz_en_off>

Las etiquetas de Blogger no parecía que se percataran de cuándo se estaba accediendo a través de un dispositivo móvil, así que no podía elegir qué elementos se mostraba según el tipo de pantalla. Revisé blogs y más blogs para probar las diferentes soluciones que sugerían y ninguna me funcionaba. Al final iba a tener que morir al palo de usar las plantillas de móvil que Blogger te ofrece por defecto, aunque fuera fea rematada.

Por suerte, no sé cómo, llegué a un blog que decía que las etiquetas tipo <b:if cond=blog.mobile> no funcionan a la hora de presentar por pantalla. Aaaaaaaargh! Tres tardes intentando apañar el diseño con esas etiquetas para nada… Así que nada, a tirar de estilos y a hacer media queries.

Yo he creado tres tipos de pantalla: escritorio, tablet y móvil. Algo así:

<!-- = / Responsive / = -->
<style>
    @media screen and (max-width: 2000px) {
           /*tus estilos aqui
      }

    @media screen and (max-width: 780px) {
      /*tus estilos aqui
      
    }

    @media only screen and (max-width : 640px) {
         /*tus estilos aqui
      }
</style>

Y oye! mano de santo! Todo empezó a funcionar como yo quería y en muy poco rato conseguí que se mostrara contenido cómo y cuándo quería.

Así que ya sabéis, si alguien está en fase desesperación con la plantilla, a respirar hondo y a hacer todo por CSS.

Mis recomendaciones son:
  1. Paciencia. Y prueba y error
  2. Saber qué quieres mostrar en la versión mobile.
  3. Usar diseño líquido, creando todos los estilos con %, nada de medidas absolutas
  4. Jugar con display:none en las versiones para móvil, para quitar elementos no deseados (sliders que ocupan mucho y no dicen nada, elementos exclusivos para pantallas grandes...) y display:inline/block para mostrarlo cuando toque.
  5. Tamaño de letra adecuado
  6. Indicar que las imágenes como mucho son max-width:100%, para evitar el feo scroll horizontal
Espero que os sea útil. ¡Feliz domingo!
Elena

3 comentarios:

  1. Hola Elena. La verdad es que el tema me sobrepasa. Sabrías ponerme un ejemplo de lo que tengo que poner dentro de esas etiquetas? Mi blog no es responsive y estoy intentado convertirlo pero NO TENGO NI IDEA de cómo hacerlo. Un saludo

    ResponderEliminar
    Respuestas
    1. Hola!

      Los inicios en los mundos del HTML y CSS son duros, pero con un poquito de práctica se le coge el truco enseguida.

      Como has leido en el post normalmente se dividen las "vistas" en tres, una para cada tipo de dispositivo. Lo más importante es que decidamos que queremos que se muestre en cada vista.

      Por ejemplo, en mi blog el slider de la cabecera no se ve en los móviles. Para ello, en la especificación de la vista correspondiente he indicado a través del id del div que contiene el slider que no se muestra mediente la etiqueta none.

      Este es el código html donde ves que id (en ocasiones será un class, hay que analizar el código bien) utiliza el slider:

      div id="main-slider"

      Y en el css o zona de estilos hay que añadir la propiedad display:none.

      @media (max-width: 767px) {
      #main-slider{display:none}
      }


      Espero que este ejemplo te clarifique un poco el tema... Sino pregúnatame nuevamente :)

      Muchas gracias por pasarte por el blog y comentar.

      Un saludo!

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar

Licencia de Creative Commons
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates