Uno de los retos con los que se enfrentan los webmasters o bloggers de hoy en día, es el hacer que su sitio o blog sea responsive, es decir que pueda verse correctamente en todos los dispositivos, y es un reto por la variedad de dispositivos que existen, así como sus tamaños.
En la actualidad todos los sitios o blogs en internet deben cumplir este requisito indispensable en cuanto a la usabilidad para generar una buena experiencia de usuario.
Recientemente tuve que cambiar algunos sitios de plantilla, y buscando varias de ellas fueron pocas las que lograron convencerme, ya que buscaba y debes buscar dos cosas en un theme o plantilla: Que esté optimizada para buscadores y que pueda cargar rápido.
De nada sirve tener una plantilla bonita visualmente si tardará más de 5 segundos en cargar, con esto los usuarios terminarán abandonando la página antes de que cargue.
Después de buscar encontré una que me llamó la atención, pero tenía un detalle, no era responsive, lo cual hoy en día es casi una obligación. Luego de instalar el theme en un sitio de prueba, el siguiente paso fue buscar la forma de hacer que pudiera responder ante cualquier dispositivo.
¿Cómo hago responsive un theme o plantilla?
Vamos al grano.
El truco es bastante sencillo y funciona tanto para plantillas Blogger como para themes WordPress, dos de los cms actualmente más usados.
Lo que tienes que hacer es agregar unos códigos especiales al final de tus estilos css; estos códigos son llamados media queries y son códigos especiales que le indican al navegador la forma de desplegar una página según el tamaño de la pantalla.
En WordPress tendrás que ubicar el archivo style.css de tu theme actual y al final agregar el código; en Blogger tienes que ubicar la etiqueta de cierre </b:skin> y justo antes de ella agregar el siguiente código:
@media only screen and (max-width: 480px) {
CSS
}
@media only screen and (min-width: 771px) and (max-width: 960px) {
CSS
}
@media only screen and (min-width: 961px) and (max-width: 1140px) {CSS
}
No es tan fácil como parece, luego deberás investigar cada elemento de tu plantilla, es decir el nombre de estilo que tienen, ya sean #ids o .clases e irlas modificando, y agregándolas en la parte del código que dice CSS.
Es un trabajo que podría tomarte varios días, según los cambios que desees realizar, sin embargo aprenderás mucho y luego podrás modificar o hacer responsive cualquier plantilla o theme.
Si no deseas realizar esto también tienes la opción de buscar otra que sea responsive, o contactar a un programador para que te haga el trabajo.
