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

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!