Responsive Web Design trata sobre el uso de HTML y CSS para cambiar el tamaño, ocultar, reducir, ampliar o mover el contenido respondiendo al comportamiento y al entorno del usuario basándose en el tamaño de la pantalla, la plataforma y la orientación.
¡ Una página web debería tener buen aspecto en cualquier dispositivo !
A medida que el usuario cambia de su computadora portátil a iPad, el sitio web debe cambiar automáticamente para acomodar la resolución, el tamaño de la imagen y las capacidades de secuencias de comandos. En otras palabras, el sitio web debe tener la tecnología para responder automáticamente a las preferencias del usuario.
La tecnología ha venido cambiando vertiginosamente y por desgracia muchos sitios en línea se han quedado atrás y no se pueden ver bien en estos dispositivos móviles.
Si tu tienes un sitio web con este problema es probable que estés en desventaja competitiva ya que cada vez son mas los usuarios que consultan internet mediante estos dispositivos. Lo que tienes que hacer es cambiar de diseño o adaptar tu sitio web a este tipo de diseño.
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. Pero ¿cómo se pude hacer que un tema wordpress sea responsivo?
Esto puede funcionar 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.
En Nexbit podemos ayudarte ya sea a crear un nuevo sitio responsive o a migrar el que ya tienes. Aqui te dejo un ejemplo de un sitio web que "rehicimos" respetando el diseño original, pero que ahora es completamente responsive: CEA IDEA www.construccionesidea.com.mx
¿Cómo hacer responsive un theme WordPress?