Pasos para adaptar tu web para Móviles

Cada vez es más alto el número de personas que se conectan a Internet a través de un móvil, y cada vez sus navegadores son más avanzados y capaces de interpretar CSS, Javascript y otras tecnologías.

Pero aun así sigue siendo importante adaptar la páginas web para que se vean con comodidad en las pantallas reducidas y conexiones lentas de los móviles.

Acabo de terminar la versión de MirarPorMirar para móviles, como puedes ver carece de fondo, menú y cualquier otro elemento innecesario. Es muy parecido a cuando creamos una hoja de estilos para imprimir.

A continuación explico algunos pasos y recomendaciones a seguir para crear una versión para móviles de tu web o blog:

Detectar si la visita procede de un móvil

Existe una interesante página web que te proporciona el código fuente (en diversos lenguajes) necesario para detectar si un visitante procede de un móvil, y de ese modo poder redireccionarlo a una página adecuada.

Básicamente lo que hace es obtener su agente de conexión y mediante lenguajes regulares comprueba si pertenece o no a un teléfono móvil.

Enlace: Detect Mobile browser.

Un subdominio para móviles

Existe una norma no escrita que dice que la versión para móviles de una web debe encontrarse en un subdominio llamado m, ya que es lo más frecuente y será donde buscaría un usuario avanzado.

http://m.tudominio.com/

También es posible ahorrarte usar el subdominio y indicar una hoja de estilos (media="handheld") que se utilizará cuando un usuario acceda desde un móvil.

Como adaptar tu código

• Elimina el menu, y todo que no sea contenido esencial, en un blog con dejar los artículos y botones para avanzar por las páginas es suficiente.
• Consigue que tu web se vea lo suficientemente bien sin necesidad de una hoja de estilos, después añádele de nuevo el CSS y mejora un poco su diseño, pero sin tocar el HTML, y no uses fondos, sino imágenes.
• La anchura de tu web debe ser dinámica (sin la propiedad width), para que se adapte a todo tipo de pantallas.
• Si puedes reduce el peso de todas las imágenes y evita usar PNG, ya que no interpreta las transparencias, lo ideal es usar GIF, por su reducido número de colores y peso.

Evitar el contenido duplicado

Hay que tener en cuenta que al crear versión para móviles de tu web, estás haciendo una copia de todo tu contenido, por lo que Google puede interpretarlo como contenido duplicado, y penalizarte.

¿Cómo se soluciona esto?, lo único que se me ocurre es usar URLs canonicas:

De forma que cada página posea una URL canonica hacia la original.

Del mismo modo si asignas un sitemap.xml o un feed Rss a la versión para móviles, todos los enlaces deben apuntar hacia la original.

Probar tu versión para móviles

En la red existen algunas herramientas que permiten observar cómo se vería tu web en un móvil:

• Con el sistema operativo Opera, mediante la opción "Small Screen".
• Con este emulador de un Nokia y un Sony Ericsson.
• Google también dispones de una herramienta para ver tu web móvil.