Diseño responsive

Hola amigos. Después de una semana sin publicar, vuelvo 😀
Y en esta entrada les voy a enseñar lo básico para crear una versión móvil de su plantilla. Antes que nada, tienen que saber que para hacer esto, necesitan conocimientos básicos en css; y aunque para crear una plantilla responsive también se necesita javascript, en este caso no lo utilizaremos. Como ya dije, sera solo con css. Bueno, empecemos.

En primer lugar, se van a plantilla, ahí seleccionan Móvil, hacen clic en el botón que está abajo, y dan clic en “personalizado”.

Plantilla movil

Primero se tiene que ir a Blogger – Su Blog – Plantilla – Editar HTML. Una vez ahí, agregan una metaetiqueta en cualquier parte de <head>:

<meta content=’width=device-width,initial-scale=1.0,maximum-scale=2.0name=’viewport‘/>

Lo que hace esa metaetiqueta es detectar el tipo de dispositivo (PC, celular, tablet) y ajustar la pantalla según los estilos. Muy bien, ya agregada esa etiqueta, lo primero que tenemos que hacer es definir el tamaño de la cabecera en versión móvil; vale aclarar que el logo puede ser el mismo, pero también existe la posibilidad de cambiarlo, al igual que a los estilos. Para hacer esto buscamos:

]]></b:skin>

Y justo arriba de esa linea, agregamos lo siguiente:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#header{
width:95%;
margin:0 auto;
}
}

Con eso le estamos diciendo al navegador que si la resolución del dispositivo está entre 320 y 480 píxeles, los estilos que tendrán que aparecer son los que se encierran. Como ven ahí, puse un width de 100%, lo cual significa que ocupará todo el ancho de la pantalla. Además, definí un margen de 0 píxeles desde arriba, y lo que hago con auto es centrar todo. Pueden modificar lo que está en rojo.

Bueno, ya tenemos la cabecera para el móvil. El siguiente paso es modificar el logo… y si tienen un texto como título, igual: las dos cosas se modificarán. Para esto agregamos el código que ven aquí, arriba de ]]></b:skin>

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#logo, #text-logo{
width:auto;
height:auto;
margin:10px auto;
}}

Y listo, tendremos el logo del tamaño original, con un margen de 10 píxeles desde arriba; con auto, le decimos que lo queremos al centro.
Si tenemos en la cabecera algún gadget, el cual podría hacer que quedara mal el diseño, tenemos la opción de ocultarlo. Para esto agregamos en los estilos:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#AQUÍ-EL-ID-DEL-GADGET{
display:none;
} }

Y solo cambiamos lo marcado en rojo por el ID del gadget a ocultar.

Ahora haremos responsive las entradas; solo agregamos los estilos:

@media screen and (max-width:768px) {
#main {
width: 100%; } }

Con este paso también tendríamos listas las entradas, con un ancho de 100%. O sea que ocuparían todo el ancho de la pantalla. Recuerden que lo pueden cambiar; es importante que sea por un porcentaje (%), porque si lo hacemos con píxeles, siempre será igual, sin importar la resolución.

Ahora solo falta ocultar la sidebar. Para hacer esto, agregaremos en los estilos:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#sidebar{
display:none;
} }

Y ya estará oculta.

Esto es todo en el presente tutorial. Habrán notado que en esta entrada explico solo lo básico, pero con estos estilos podemos personalizar completamente la plantilla para el celular. No olviden agregar:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#AQUI-EL-ID-A-APLICAR-ESTILOS{
AQUI LOS ESTILOS
} }

Y cambiar lo marcado en rojo por el ID o la clase del gadget a aplicar los estilos en el móvil.

¡IMPORTANTE!
Yo utilicé los ID’s que tengo en mi plantilla. En el caso de ustedes, tendrán que cambiarlos por los suyos. En cada estilo que aquí dejo, el ID que se debe cambiar está marcado en azul.

Espero que les sirva este tutorial.

Esta es una captura de mi plantilla. Claro que no quedará igual, pero con lo que explico en este tutorial, si saben de css podrán dejarla mucho mejor.