Hoy toca hablar un poco de diseño web. Quiero hablar de responsive design enfocado por supuesto a la plataforma que amo, wordpress.

En pocas palabras un [theme](https://paraisolinux.com/nuevo-theme-y-mas-en- paraisolinux-com/ “Nuevo theme y mas en ParaisoLinux.com”) resposive es aquel que se adapta a la pantalla de cada usuario. Pero antes de avanzar veamos como se hace normalmente para mostrar un blog a un usuario de telefonos celulares.

  1. Lo mas comun es que no hagan nada. Entonces un usuario que entra desde el movil lo que ve es tu blog tal como tu lo ves pero en miniatura. Casi siempre tiene que hacer un doble touch sobre la pantalla del movil y puede maximinar alguna parte de la web para poder leer. Seguro que todos hemos vivido esto alguna vez.
  2. Usar plugins o servicios externos para mostrar una version movil de tu blog. Hace un tiempo publique 11 maneras de hacer tu blog mas amigable para telefonos moviles, y alli veiamos el popular plugin wp-touch que muchos usan. Esto es una buena alternativa, rapida y sin problemas.
  3. La tercer manera es poco usada pero aun asi la he visto por alli. Es crear en un subdominio una version movil del blog a la que eran redirigidos mediante php. Realmente no se que opinar sobre esto, no me parece gracioso tener 2 dominios con practicamente el mismo contenido, y calculo que a google tampoco le debe gustar mucho.

De todas esas opciones solo la segunda es algo valido, la tercera podria usarse en una aplicacion web pero no lo veo conveniente usarlo en un blog. Y de la primera ni hablar, es horrible ver una pagina en miniatura y tener que andar viendo de a pedacitos.

El resposive design es otra opcion mas, en la que mediante css, jquery u otras tecnicas se logra adaptar UN solo diseño a cualquier pantalla.

Esto casi siemper se logra (o al menos yo lo veo mas facil) creando divs con anchos porcentuales. Es decir que no se deben usar en el theme del blog anchos como 960px sino mas bien cosas como 45%. Esto aplica tambien a los textos, en vez de usar 13px se deben usar 1.2em. Se entiende?

Tambien se puede usar otra caracteristica de css que son los media querys pero navegadores viejos como Internet Explorer 8, 7 y 6 no lo soportan y lamentablemente todavia hay un monton de gente que los usa.

Resposive theme

Ventajas de un theme resposive

  • Mejora la experiencia del usuario. No tienen que andar haciendo cosas raras para ver tu blog desde una tablet o un celular.
  • Mantienes el diseño. Plugins como WP-Touch lo que hacen es usar su propio diseño para mostrar el blog y ese diseño no tiene ni parecido a como ven tu blog en una pantalla de pc.
  • Ahorro de coste de mantenimiento. Cuando haces un cambio en la web este se ve reflejado en tablets y celulares por igual.

Themes wordpress con resposive design

En un monton, yo siempre recomiendo buscar en wordpress.org en la categoria de flexible-widht

Pero los que me conocen saben que yo soy mas fanatico de armar mi propio theme con algun framework. Y recomiendo 2: reverie y bones.

Ejemplos de responsive design

En esta pagina pueden ver lo que suceden al agrandar o achicar la ventana del navegador. De paso terminaran de entender lo que es esto del diseño adaptable.

Y sino pueden agrandar o achicar la pantalla de paraisolinux.com para ver el efecto en un blog que usar wordpress.