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;
    }
}