Cómo hacer que tu blog se vea perfecto en el iPhone y el iPad

A la hora de visualizar nuestro blog en un dispositivo iOS, ya sea un iPhone o un iPad, o en Android, podemos encontrarnos con varios problemas. Si tenemos suerte el mayor de éstos será que el texto y todos los demás elementos del blog se verán demasiado pequeños, obligando a los lectores a hacer zoom para poder leer los posts, desplazarse por las páginas o pulsar algún botón o enlace. Pero si no tenemos tanta suerte lo más normal es que el theme quede roto, ya que no está diseñado para ser visto en pantallas tan pequeñas como las del teléfono, y quede absolutamente horrible esteticamente.

Para solucionar esto podemos acudir a 3 opciones, cada una con distinto resultado, pero que pueden salvarnos el día, y hacer que nuestro blog se vea tal y como queremos en un dispositivo móvil.

Elegir un theme sensible

Un theme sensible (responsible en inglés) es aquel que se adapta al dispositivo en el que es visualizado, da igual que sea la pantalla del ordenador, la pantalla del iPhone o la de un Android. Todos los elementos de diseño, incluídas las imágenes y el texto se reorganizan automáticamente para ofrecernos la mejor experiencia posible de lectura. Si quieren hacer una prueba pueden acceder a mi blog guillermocarvajal.net desde el ordenador y desde un iPhone para ver como el theme responsible se adapta.

En los últimos meses este tipo de diseños se ha puesto muy de moda, y los principales creadores de themes de WordPress ya lo están implementando como una opción. Pueden encontrar muchos themes responsibles en Themeforest, por ejemplo.

Instalar un plugin

En el pasado esta era la opción más utilizada, básicamente porque no existía otra más sencilla, y muchos blogs hicieron uso de este sistema. Muchos incluso siguen usándolo, aunque personalmente no me gusta y recomiendo evitarlo, sobre todo porque el theme móvil no tendrá demasiado que ver con la versión normal de tu blog, lo que puede llevar a confusión a los lectores. Existen varios plugins que convierten tu blog a un diseño movil cuando es visitado desde el iPhone, puedes encontrar algunos en el directorio de plugins de WordPress.

Adaptar tu theme

Esta es la opción que he elegido para este blog. Es la que mantendrá practicamente intactos los elementos característicos de tu blog, y la similitud con la versión normal. Tiene la ventaja de que no necesita de ningún plugin ni añadido (salvo para la versión iPhone, donde yo uso la opción de W3 Total Cache User Agent Groups, que permite especificar el theme servido a cada dispositivo móvil).

Para que tu blog se vea pefecto en el iPad tan sólo debes seguir estos pasos:

  • Apuntar el ancho en píxeles de tu blog. Esto puedes averiguarlo utilizando el inspector web de Safari o de Chrome, en las herramientas para desarrolladores que vienen integradas en el navegador. Simplemente inspecciona la home de tu blog y mira cuantos píxeles tiene de ancho.

  • Editar el archivo header.php del theme de tu blog. Aquí vamos a añadir un código que indicará al dispositivo en que se visualice el blog el tamaño que éste debe tener para verse correctamente. Si el ancho del blog son 1100 píxeles, insertaremos este código:

<meta name="viewport" content="width=1120, initial-scale=0.8">

Como veis hay que dejar siempre un pequeño margen de píxeles, 10 está bien para este blog, pero puede variar en otros diseños. Con esto el blog se verá perfectamente en el iPad en posición horizontal. Si giramos el iPad a vertical seguiremos obteniendo el mismo efecto, sin reducción de tamaño ni de texto ni de imágenes.

Para que esta última solución funcione en el iPhone o en un teléfono Android es necesario hacer una cosa más. Hay que hacer una copia del theme que estemos usando, pero esta vez editaremos todos los archivos eliminando las sidebars y dejando sólo el bloque de contenido. Una vez hecho, si usamos el plugin W3 Total Cache, podemos acceder a la pestaña User Agent Groups y definir un nuevo grupo para los dispositivos móviles que queramos, donde indicaremos que carguen el nuevo theme movil. Además, en el archivo header.php del theme movil debemos insertar este código:

<meta name="viewport" content="width=300, initial-scale=0.8">

En cualquier caso, los tres sistemas expuestos aquí van en orden de facilidad para el usuario. El primer método es sin duda el más sencillo y el que requiere de menos trabajo. El segundo, a pesar de tener que depender un theme movil que puede o no gustarnos y que no tiene ninguna similitud con nuestro blog, también es relativamente sencillo. Y el tercero, reconozco que es el más complicado, aunque al final el que mejor resultado da. No les recomiendo usarlo si no saben exactamente lo que están haciendo.

Tweet about this on Twitter27Share on Facebook4Share on Google+3Share on StumbleUpon0Share on LinkedIn0Pin on Pinterest1Buffer this page

Te puede interesar