Este post viene a petición de Kaduh Santos, que preguntó como usar el diseño sensible (Responsive Web Design) en una plantilla para blogger.

El resultado lo podéis ver aquí (los fondos están añadidos para clarificar).

Al principio no sabía por donde empezar (hay millones de plantillas con millones de estilos distintos, así que me decidí a usar la plantilla minima de blogger, por eso de que es la estándar, y los pasos deberían de ser parecidos en muchos blogs).

Paso 0: Eliminar la plantilla móvil

Si vamos a hacer un diseño apto para móviles no queremos redirección en caso de que nos visiten con un smartphone, por ejemplo . Ir a Blogger › Plantilla y desactívala.

Paso 1: La meta viewport

La meta viewport es la que usan los móviles para mostrar la web a una escala inicial. Una web optimizada para móviles tiene que tener por lo menos width=device-width. La opción más considerada en mi opinión es la que puse hace dos entradas, así que sólo tenéis que eliminar la que pone blogger y poner la nueva.

Paso 2: Eliminar los estilos que dan la estructura.

No es necesario empezar desde cero, sólo quitar los estilos que se usan para dar un ancho estático al contenido. En este caso, los estilos se encuentran en <b:template-skin>, aunque dependiendo de la plantilla puede estar en otros sitios.

Dejaremos algo así (tenéis que sustituir ANCHO_MÁXIMO por el ancho máximo que queréis que tenga el diseño final. Un buen valor puede ser 1200px, pero podéis cambiarlo).

    <b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='ANCHO_MÁXIMO_EN_PIXELSpx'/>
<![CDATA[
]]>
</b:template-skin>

Paso 3: Añadir los anchos fluidos

Por defecto una plantilla de blogger tiene estas tres clases para designar el contenido:

  • column-center-outer, la columna central
  • column-left-outer, la columna izquierda (en este caso no nos interesa usarla)
  • column-right-outer, la columna derecha

Así que debajo del <![CDATA[ de ahí arriba, daremos el ancho máximo a la parte de fuera, y los anchos a la columna central y derecha. El único requisito es que ambos sumen al final 100%.
Además he usado un box-sizing: border-box; para evitar problemas con márgenes y paddings en caso de que los haya.

/*Ancho principal. He usado la variable anterior, pero puedes usar cualquiera*/
.content-outer {
max-width: $(content.width);
_width: $(content.width);
}
/* Contenido central. He usado 70 - 30, pero podéis sumar otros*/
.column-center-outer,
.column-right-outer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.column-center-outer {
width: 70%;
float: left;
}
.column-right-outer {
width: 30%;
float: right;
}

Paso 4: Media queries

Ahora hemos conseguido que la página sea fluida en cualquier resolución. Ahora sólo falta hacer que cuando deje de ser legible (en este caso yo he estimado unos 900px, pero depende de la plantilla), el contenido y la sidebar se centren y dejen de flotar. Para eso hace falta usar media queries (para entendernos, las reglas que de estilo en ellas sólo se cumplirán si la condición es cierta, en este caso, que la pantalla sea menor de 900px).

Para eso debajo del código anterior pondremos:

@media screen and (max-width: 900px) {
.column-center-outer,
.column-right-outer {
width: 100%;
float: none;
clear:both;
}
}

Paso 5: Disfrutar

Te esperabas más pasos? Siento decepcionarte. Ahora puedes visitar desde tu móvil el blog y verlo perfectamente. Es probable que dependiendo de la plantilla necesite retoques en el menú, cambios en el ancho total, etc. Pero así ya tienes una buena base para tu plantilla. Si te apetece puedes ver la demo (he usado colores chillones para que se vea la diferencia).

Truco extra

Este truco (con un CSS algo más difícil de entender), consiste en dejar la sidebar con un ancho fijo, y el contenido fluido.

Voy a poner los estilos necesarios directamente (lo que iría entre <![CDATA[ y ]]>), pero en lo que consiste es:

  • En dar al padre de la columna central (.columns-inner) un margen derecho del ancho de la sidebar (o un poco más si se quiere una separación) para que reduzca su ancho al que queremos que tenga la columna central.
  • En dar a la columna central un ancho de 100%
  • En dar a la sidebar un ancho fijo, y un margen derecho negativo del ancho de la sidebar (más la separación opcional) para “compensar” el que le hemos dado positivo al padre, y que se quede estática.
  • En la media querie habría que eliminar ese margen al padre y a la sidebar
.content-outer {
max-width: $(content.width);
_width: $(content.width);
}
.column-center-outer,
.column-right-outer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*Aquí va el truco*/
.columns-inner {
margin-right: 300px;
}
.column-right-outer {
width: 300px;
float: right;
margin-right: -300px;
}

.column-center-outer {
float: left;
width: 100%;
}

@media screen and (max-width: 900px) {
.column-center-outer,
.column-right-outer {
width: 100%;
float: none;
clear:both;
}
.columns-inner,
.column-right-outer {
margin-right: 0;
}
}

21 pensamientos en “Responsive Web Design en Blogger

  1. Imagen de Kaduh Santos el dijo:

    Estoy muy sorprendido, no esperaba una respuesta tan rápida.
    Pero realmente quiero darle las gracias por siempre responder a nuestras preguntas.
    Bueno, ahora que sé cómo usar el Diseño sensible, manos el obra a personalizar mi blogger.
    Abrazos.

  2. Imagen de Nimsrules el dijo:

    This is a great post Emilio. I still can’t forget your unasked help on my blog for the ncr parth resolve. One request though, can you please write a tutorial on converting an HTML template to a blogger template step-by-step? There are only vague tips available elsewhere. Thanks!

  3. Imagen de Amandysha el dijo:

    Hola Emilio! te agradezco mucho este artículo. Parecería que pocos diseñadores saben que pueden crear plantillas para Blogger con un diseño sensible ya que encuentras muy pocas plantillas para blogger así. Los diseñadores de templates harían un gran favor a la plataforma de Blogger si pusieran en práctica este artículo tuyo. Nada para mí es más detestable que tener un buen diseño en mi versión de escritorio y la móvil sea totalmente diferente, y solo por esa razón he pensando migrar a WordPress pero económicamente me es imposible hacerlo.

    No sé nada de diseño web, solo soy una bloggera y sé que estoy excediendo tu confianza y buena fe con esta petición, pero no tengo más nadie a quien acudir. Me gustaría saber si puedo enviarte mi actual plantilla blogger para que tú hagas los cambios pertinentes para hacerla sensible. Ya tienes mi mail, puedes responder este comentario en público o en privado. Saludos y un millón de gracias anticipadas.

  4. Imagen de Obed el dijo:

    Gracias por el tutorial, va a ser de gran ayuda. Si no fuera mucha molestia podrías poner la plantilla mínima para descargar. Así funcionaria como una plantilla base de Responsive Web Design.

    Saludos Emilio.

  5. Imagen de MarianneMarianne el dijo:

    Hola Emilio, ante todo quiero agradecerte por este post que es simplemente genial, y aunque no lo creas me fue difícil encontrar algo tan básico como lo que explicás.

    Me sumo a la petición de Obed, si pudieras compartir la plantilla con nosotros sería de mucha utilidad ya que en mi caso no manejo muy bien todo esto todavía, estoy aprendiendo, si no podés hacerla pública tenés mi email.

    Gracias!
    M.

  6. Imagen de Renzo el dijo:

    Hola emilio puse este truco del responsive design web y cuando trato de cambiar el aspecto de mi blog mediante Css no puedo, yo recuerdo alguna vez, que , desactive la plantilla para moviles y no me funcionaba el css que añadia despues, como puedo arreglar eso?

    Gracias

    • Imagen de Emilio Cobos Álvarez el dijo:

      A qué te refieres, a editar el blog mediante CSS directamente (en la plantilla)? o desde el editor de blogger?

      En el segundo caso es posible que algunos cambios no funcionen, porque los sobreescribimos.

      Si es el primer caso, revisa donde pones los estilos, creo que tienes un comentario mal terminado en <b:skin>.

  7. Imagen de CharlyAppleTree el dijo:

    Hola Emilio,

    Primero darte las gracias por la inspiración para diseñar el blog en responsive web design. Me he encontrado con el problema de que el blog crece y crece sin parar de ancho. Y si le restrinjo el ancho, me encuentro con que se quedan las columnas a la izquierda de la página.

    ¿Me ayudas?

    Gracias por adelantado.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Puedes usar max-width para restringir el alto, si el problema de las columnas es la posición absoluta, deberías de crear un padre, que sería el elemento al que le especifiques un ancho, y además especificarle position: relative.

      No sé hasta qué punto me he podido pasar de técnico en la respuesta, pero sin ver tu página no puedo hacer nada más :S

  8. Imagen de mariamaria el dijo:

    Hola Emilio, he estado siguiendo tus pasos de la entrada Responsive Web Design en Blogger para tratar de conseguir que mi blog sea lo más responsive posible, así que lo primero, muchas gracias!!!
    En segundo lugar, ¿cómo podría hacer para que el sidebar flotase debajo de un gadchet que tengo abajo del todo? Siguiendo tus pasos el orden es:
    entradas -> sidebar -> gadchets de abajo
    Muchas gracias!!

  9. Convierte tu plantilla de Blogger en Responsive | Mil Trucos Blogger
  10. Imagen de anaana el dijo:

    Hola, como lo hago para que me saparezca ese espacio vacio que qeda a la derecha cuando navego desde el movil. he hecho todo lo que dices arriba, pero sigue sin desaparecer.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.