Cómo pasé mi blog a un diseño responsive

viernes, 8 de enero de 2016

Como se puede ver, el diseño del blog ha cambiado. La esencia se mantiene pero las tripas son distintas. No podía ser que estudiando desarrollo web no tuviese un blog responsive. Lo que tenía hasta ahora era una plantilla para ordenadores y otra para móviles, ésta última siendo una por defecto que era bastante horrible y en la que se perdían los gadgets por el camino.
Aviso: entrada muy larga

Es posible que no sepáis lo que significa un blog o web responsive y realmente es algo muy sencillo. Con una única plantilla tu página se verá correctamente en todos los dispositivos y tamaños de navegador. El diseño básico suele fijarse con 3 tamaños adecuados por defecto a ordenadores, tablets y móviles, pero las posibilidades son infinitas.

Con nuestro mágico amigo el CSS le indicamos que con un tamaño máximo o mínimo, depende de cómo lo plantees, de navegador se apliquen unos estilos u otros. Eso te permite jugar con las distintas secciones de la página: cambiando su ubicación, mostrándolas o escondiéndolas. Después de mi corta experiencia debo decir que es 10 veces más rompecabezas de lo que parece.

Para que se entienda mejor la idea, os dejo aquí con un ejemplo:




Aunque como ya dije antes, no tiene porque ser siempre así. Por ejemplo, en mi caso solo tengo 2 de estructura y ya detalles pequeños que se van cambiando según el tamaño del navegador. Bueno, realmente son 3, pero del de tablet al de móvil no hay unos cambios que destaquen tanto como en el ejemplo que puse. 


La primera es con pantallas grandes, en ordenador o con el navegador ocupando toda la pantalla, y la segunda es para tablets, móviles y si haces pequeño el navegador en el ordenador. En este caso, los gadgets de la derecha no desaparecen, se van debajo de las entradas, y el menú de debajo del dibujo se contrae en lo que se le llama un menú hamburguesa. 



Mi idea inicial era crear yo una plantilla de cero pero Blogger usa un lenguaje un poco particular y es difícil acostumbrarse. Su archivos no son HTML y CSS, son XML. El curso pasado lo estudiamos pero claro, una versión más sencilla, a parte de que acabamos hasta las narices. 

Como lo veía complicado, el otro día por fin me dio por mirar plantillas para Blogger responsive y gratuitas. Estuve mirando mucho rato en la web de Gooyaabi que tiene 85 páginas de plantillas. De primeras lo que hice fue seleccionar diseños que me gustasen y que podrían ajustarse bien a mi contenido, sobretodo el tener una imagen como cabecera.

Las fui descargando y probando en un blog de pruebas que tengo. Cada cual quedaba peor que la anterior. Después de varias decepciones al final lo que hacía era descargar sin mirar de si el blog era demasiado blanco o parecido a las plantillas típicas. Nada, ni con esas.

Después de mirar en otras páginas y recopilaciones de mejores plantillas, llegué a ésta entrada de 55 best free responsive Blogger templates y encontré por fin una que se ajustaba muy bien. Encima con una gama de colores gris oscuro, verde y blanco. Vamos, me estaba esperando. 

Llegué a la página original, que es Blogtipsntricks, y me encantó ver lo bien que estaba todo explicado y lo majo que parecía su creador. Tienen más plantillas y entradas interesantes, aunque en inglés claro. 

Algunas de las plantillas que me iba encontrado tenían versión gratuita y si luego querías más opciones la comprabas. Justo en este caso no existe esa posibilidad y tampoco tiene un botón de donar. Esto lo digo porque estoy tan contenta con la plantilla que lo haría sin dudarlo.

Una cosa importante. Si ponéis una plantilla responsive en vuestro blog tendréis que desactivar la opción para móvil.



Y ahora os cuento qué me tocó cambiar de la plantilla Ozura de Blogtipsnsticks

↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭

Disposición de los gadgets

De las cosas más sencillas de Blogger. En la página interna del blog, entrar en Diseño y como imagino que ya habréis hecho ya más de una vez, moverlos donde más os guste. Esta disposición sirve solo para la versión en tamaño grande. En el caso de la plantilla que utilicé, luego manda esa columna lateral debajo de la columna principal de entradas, exactamente en el mismo orden.

Además de los que tuvierais ya, la propia plantilla lleva alguno extra. Se pueden borrar todos directamente en Diseño excepto uno, que es el de suscripción vía email y unos botones de redes sociales (está todo en el mismo). 

Pensando en algo sencillo, se me ocurrió decirle que no lo mostrase a través del CSS. Usando Chrome y Firefox, pulsando F12 al ver una página web puedes inspeccionar su código. Ese elemento tenía la id HTML100, así que añadí lo siguiente: 
#HTML100{display: none;}

Lo puedes poner directamente en Plantilla/Editar HTML o en Plantilla/Personalizar. Si no controlas mucho lo mejor es la segunda opción. En avanzado puedes añadir código CSS y una vez lo apliques se añadirá en la plantilla. 


Hacer que las imágenes se adapten

Hay varias maneras de hacer esta parte pero me pareció que la correcta era aplicar unos estilos a todas las imágenes a la vez. Otra vez editando el CSS pero aplicando el estilo simplemente a la etiqueta img

Este paso es un poco más largo ya que requiere de muchos más cambios, al menos cómo lo hice yo, que no quiere decir que sea la mejor forma. Hay que usar de nuevo el inspeccionador de código utilizando el F12. Con eso abierto, si haces más pequeña o más grande la ventana del navegador, en la parte superior derecha te indica su tamaño (solo en Chrome, en Firefox no sé cómo se podría ver). 

En mi caso, las fotos que subo en las entradas son siempre de ancho 614px y las dejo en tamaño original. Me di cuenta de que al reducir la ventana se quedaban las fotos cortadas, así que observé los tamaños y fui reduciendo el de las imágenes. 

Se puede hacer de distintas maneras pero yo utilizo siempre esta sintaxis que es la primera que nos enseñaron y es la que controlo mejor. 
@media screen and (max-width:744px) { }
Significa que cuando el recurso utilizado sea una pantalla y el máximo ancho sea de 744px, entonces se aplicarán los estilos que estén entre sus llaves. Esa es la primera medida en la que modifico las imágenes.
@media screen and (max-width:744px){     img { max-width:580px;     }}
Hasta el más pequeño que es el siguiente. En total tengo 12.
@media screen and (max-width:380px){    img { max-width:250px;    }}

Añadir un fondo al blog

Me gustaba el color verde de la plantilla pero quería volver a tener el fondo anterior que hice y que me encanta. Así que este es el paso más sencillo. Tiene que estar la imagen subida a internet y simplemente:
body{     background-image: url('http://oi63.tinypic.com/2a6r2th.jpg');}
Por defecto tiene el valor de repetición, así que en mi caso como es un patrón no me hizo falta hacer nada más.


Centrar el gadget de entradas populares en versión reducida

Este fue el único que dejé de los que venían en la plantilla. No sé, me gustaba el diseño que tenía y lo conservé. El problema es que cuando se reducía la ventana y se iba todo debajo de las entradas, no quedaban centrados en medio, sino que estaban todos a la izquierda y lo veía raro.

De nuevo, hay varias maneras de hacerlo pero yo usé la opción de añadirle un margen a la izquierda. Revisé de nuevo los tamaños y fui jugando hasta dejar unos valores que hacían que quedase más o menos centrado.

En este caso se trataba de una clase, de ahí que empiece por punto. El primer valor fue ese. El resto es ir jugando según más te guste, en mi caso hasta el 15%. 
@media screen and (max-width:1100px){    .popular-posts{       margin-left:35%;    }}

Modificar tamaños de fuentes

En este caso fueron los títulos de las entradas y los de la fecha y número de comentarios. Los vi demasiado grandes cuando se reducía el tamaño del navegador así que simplemente, busqué el elemento y fui cambiando algunas cosas. 
@media screen and (max-width:600px){    .post-info {        font-size: 14px;     }}
@media screen and (max-width:533px){    h3.post-title {       font-size: 33px;       line-height: 110%;       margin-bottom: 20px;    }}
En el caso de los títulos modifiqué también la altura de las líneas y el margen inferior. 


Modificar tamaños de los elementos de los comentarios

Me di cuenta de que en el móvil, la zona de los comentarios, más si había respuestas, no era nada legible. Se quedaba todo muy estrecho, así que modifiqué algunas cosas como el tamaño de la imagen de avatar de los usuarios y los márgenes. Aquí hay que también jugar con las cifras e ir mirando. En este caso solo lo modifiqué una vez: 
@media screen and (max-width:572px){   .comments .avatar-image-container{ width:50px; max-height:50px;   }
  .comments .avatar-image-container img{  max-width:50px;   }
  .comments .comment-block {      margin-left: 52px;      padding: 0 0 0 10px;  }
  .comments {     margin: 40px 0 0;     padding: 40px 2%;  }
  .comments .comments-content .datetime a {     font-size: 10px;   }}

Añadir la fecha y las etiquetas en cada entrada

Aquí hay que sumergirse en Plantilla/Editar plantilla porque hay que añadir código en algunas zonas. Para las etiquetas de las entradas, coloqué el código justo encima de donde están los comentarios como tal. Buscad esta línea <b:includable id='threaded_comments' var='post'> y añadir esto encima:
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
  </span>
Quedaban muy pegadas a la izquierda así que le añadí este estilo:
.post-labels{ margin-left:20px;    font-size:20px;}
Las etiquetas solo salen cuando estás dentro de una entrada y no desde el inicio al ver el conjunto de ellas. Es porque solo lo añadí en esa parte.

Para la fecha, hay que buscar las líneas de la fecha <span class='post-timestamp'> y añadir esto encima o debajo según prefieras. 
<b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
 </b:if>
Le añadí este CSS:
.date-header { display:inline; margin-right:10px;}


Hacer responsive los vídeos incluidos en las entradas

Como YouTube te ofrece un tamaño fijo para los vídeos, me puse a buscar y encontré la página Embed Responsively que te permite, añadiendo la URL del vídeo, hacerle un contenedor que sea responsive. Esto hay que hacerlo a mano en cada entrada, copiando el código HTML que te facilita.

En la misma web tienes más opciones. Más vídeos como Vimeo o Dailymotion, Google Maps, Instagram, Vine, Getty Images, crear uno genérico o información sobre los que ya te lo facilita la web oficial.


↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭↭


Me dejo algún detalle pero lo importante es lo que os he contado y además creo que ya bastante tediosa ha quedado la entrada. Espero no haberme pasado de aburrida pero me parecía interesante explicarlo.

Yo me lancé a poner la plantilla, una vez sabía que quedaría bien, y editar directamente en este blog porque ya controlo un poco. Si no es vuestro caso, podéis crearos un blog de pruebas y allí jugar un poco. Se descargan la plantilla y el contenido de tu blog principal y se suben en el otro. De esta manera podréis ver mejor cómo se modifican las cosas de manera más cercana a lo que quedará luego.

Por supuesto, no soy una experta ni mucho menos. Estoy aprendiendo y me puedo equivocar o hacer las cosas de maneras no tan correctas. 

Justamente quise añadir lo de los posts relacionados y me daba conflicto el jQuery. Intenté arreglarlo con una cosa que se hace para ello y no había manera. Prefiero que se despliegue el menú antes de eso, que bueno, de momento puedo pasar sin que esté. 

Y ya me callo que menuda chapa acabo de soltar. ¿Qué os parece el nuevo diseño? ¿Tenéis vosotros una plantilla responsive en vuestro blog? 


20 comentarios :

  1. Madre mía! Vaya trabajo. Yo no tengo ni idea de nada de esto y me voy a poner en breve a tocar cositas del bol, pero nada demasiado importante ni que me desconfigure la plantilla.

    Besos.

    ResponderEliminar
    Respuestas
    1. Al final con la tontería sí, el diseño y el hacer la entrada xDDD
      Imagino que bol es blog jaja
      Ánimo con ello ^_^

      Eliminar
  2. Yo me uno a Ro y... ¡Madre mía!
    A parte de llevar mucho trabajo parece bastante complejo. Yo sigo buscando un estilo para mi blog(no sé si la gente suele tenerlo claro desde el principio)... la verdad es que yo aún no lo tengo claro.
    Quizá me anime a probar con esto un poco más adelante. Si me trae por la calle de la amargura será solo culpa tuya :P

    ResponderEliminar
    Respuestas
    1. ajajaja :D

      Sí... yo ahora leo los códigos y sé lo que pone, porque antes le tenía que pedir ayuda a mi marido y ni aún así xD
      Yo he cambiado mucho de diseño. Si le das a la etiqueta de diseño blog puedes ver algunos xD Sobretodo ayuda en fijarse en otros o ver lo que le gusta más a la gente. Leer entradas de básicos en un blog ayuda, aunque no los cumplas todos, es una buena referencia para adaptarlo a tu gusto.

      Seguro que si buscas hay blogs en los que lo explican mejor, yo solo quería abrir la puerta del infierno :P

      Eliminar
  3. Te quedó genial, ¡me encanta!, la verdad que tener un diseño adaptable es bueno porque ahora muchas personas ven todo en sus tablets y móviles, lo malo de muchos de los diseños que sueles encontrar es que son diseños para wordpress adaptados a blogger y que hay cosas que dan muchos errores que tienes que ir cambiando. Yo debería de cambiar un poco el diseño pero es que me da una pena enorme quitar mi cabecera de peces.

    ¡Me encanta!, besinos :-)

    ResponderEliminar
    Respuestas
    1. Muchas gracias ♥
      Sí, es una barbaridad. Además lo que digo, es una vergüenza que no lo tuviera cuando lo estoy estudiando ahora xDDD Ya que ahora tenía ya un poco de práctica con ello me arriesgué y salió bien la cosa XD
      A mí me costó una que se ajustara un poco y aún así he cambiado cosas, también que soy muy tiquismiquis xD y voy cambiando todavía jaja
      Lo que te dije en tu blog: no tienes porque perder la cabecera que tienes. La mía aquí sigue :)

      Eliminar
  4. Lo he leído con la boca abierta desde antes de la mitad de la entrada, tal cual. En seguida me di cuenta del cambio de diseño y me gustó mucho, pero madre mía, ¡qué currazo!

    Yo creo que lo voy a dejar. Lo siento por los pobres que lo lean en el móvil -porque es verdad que es feo, feo, y se pierden muchas cosas-, pero yo no doy pa' más XDDD

    ¡Besos!

    ResponderEliminar
    Respuestas
    1. XDDDDDDDDDDDDDDDDDDDDDD
      Hacer la entrada también lo fue, también jaja Muchas gracias ♥

      Bueno, mientras se puedan leer las preciosidades que escribes, todo bien ♥

      Eliminar
  5. Una información muy muy interesante. Me guardo el enlace porque me gustaría convertir mi blog también en cuanto tenga tiempo.
    ¡Un saludo! :)

    ResponderEliminar
    Respuestas
    1. ^_^ me alegro de que te sirva ♥
      Ánimo con ello cuando te pongas :)

      Eliminar
  6. Pues te ha quedado muy chulo!
    Estuve mirando fondos responsive para el mio, pero no me convencieron mucho los que probé, asi que miraré la página que comentas.

    ResponderEliminar
    Respuestas
    1. Muchas gracias ♥
      Ya ves que a mí me costó un montón encontrar uno que me gustase cómo quedaba xD
      Si tienes alguna duda me puedes preguntar :)

      Eliminar
  7. Blogger incluye su plantilla para moviles pero el diseño no es tan genial, asi que vendría bien crear su propia plantilla resposive, es más creo que seria mejor modificar la plantilla para moviles que Google propociona, un saludo.

    ResponderEliminar
    Respuestas
    1. La plantilla responsive justamente sirve para solo tener una plantilla y que se vaya adaptando en todos los tamaños del navegador. Si pongo una plantilla para móviles y otra para tamaño pc, lo que ocurre al poner el navegador más estrecho es que se pierde contenido. En cambio, si es responsive, se adapta.
      Yo por ejemplo estoy mucho con la pantalla partida. A la izquierda un navegador y a la derecha otro. Si el blog o web no es responsive tendré que moverme con el scroll horizontal para leer. Un engorro vamos. Bueno claro, si tienes una pantalla grande no, pero con mi portátil de 15 pulgadas me ocurre.
      Ahora empezaré el proceso de hacer una plantilla yo, partiendo de una básica de Blogger. Con Bootstrap la haré además xD

      Eliminar
  8. Acabo de encontrar tu entrada buscando información, y la verdad es que es super útil! Yo estoy pensando crearme un blog, pero estoy luchando con el diseño responsive en la parte de entradas... Con el resto me manejo, pero odio que el texto quede todo apretujado en el inicio (Sin que aparezcan los enter, y la foto super grande) y no sé como cambiarlo por algo más parecido al original de blogger >.<

    ResponderEliminar
    Respuestas
    1. Muchas gracias ♥ Me alegro de que te haya ayudado en algo :)
      Mmmm no visualizo exactamente lo que me dices XD Si quieres mándame un email con el enlace o las capturas a ver si te puedo decir por dónde tirar. Tampoco es que sepa mucho, acabo de empezar y ahora no trabajo con eso exactamente, pero yo que sé XD Igual hacemos algo jaja

      Eliminar
  9. Gracias por los trucos compartidos, he pasado un tiempo personalizando esta plantilla http://programacion-moviles.blogspot.com/ y ahora funciona muy bien para pc de escritorio, pero no se adapta a telefonos. Implementaré algunos de tus trucos y veremos como queda.

    ResponderEliminar
  10. Hola lancy, tengo una plantilla de blogger, y se ve bien en celulares sale la versión para móviles, pero en tablets me sale la versión para escritorio, me puedes ayudar, gracias.

    ResponderEliminar
  11. Lindo Blog le estaré dando un vistazo porque no lo conocía y espero poder hacer por fin una plantilla responsive D: por cierto ya blogger tiene nuevas en su diseño pero esas toca darles un buen recorrido a su código porque tienen nuevas cosas. Saludos :)

    ResponderEliminar

Muchas gracias por pasarte a leer y comentar ^.^

Related Posts Plugin for WordPress, Blogger...