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.

Lo ideal es programar directamente de forma estructurada, según las directrices de identación, pero nunca está de más disponer de herramientas que te ayuden a identar el código de un determinado script.

Puede ser útil para continuar un código hecho por otra persona o para descifrar JavaScript, HTML o CSS, que ha sido colocado intencionadamente sin espacios y saltos de línea, para que consuma menos en el servidor.

1. Identar código Javascript

2. Identar código HTML y CSS

3. Identar código PHP

4. Identar código ASP

Una de las grandes encrucijadas de un diseñador web, es conseguir que su página se vea bien en todos los navegadores. Nuestro mayor enemigo es Internet Explorer, sobretodo sus versiones anteriores, ya que incomprensiblemente aún existen usuarios o incluso universidades que las siguen usando.

Afortunadamente dispones de un buen número de herramientas para comprobar la visibilidad de tu portal en los diferentes navegadores, desde complementos de Firefox hasta aplicaciones online.

Complementos de Firefox

Puedes optar por instalar los navegadores más utilizados y comprobar su apariencia con un solo clic mediante complementos de Firefox.

• Safari: Complemento Safari View Win | Instalador Safari.
• Chrome: Complemento Chrome View | Instalador Chrome.
• Opera: Complemento OperaView | Instalador Opera.
• Internet Explorer: Complemento IE View o IE Tab | Instalador IE.

Herramientas Online

Una de las mejores alternativas es utilizar alguna herramienta online que permite comprobar tu web en distintas versiones de los navegadores más utilizados y en varios sistemas operativos.

Navegadores de Texto

Aunque muy poca gente utiliza este tipo de navegadores, si es cierto que los navegadores de los móviles no son tan distintos a los de modo texto.

Si bien existen algunas herramientas para facilitar un poco las cosas a los móviles, también puede ser útil para mejorar la usabilidad y observar cómo ven tu sitio los buscadores.

• Linx View: http://www.delorie.com/web/lynxview.html
• Html2txt: http://cgi.w3.org/cgi-bin/html2txt

Resolución de Pantalla

Es interesante hacerse una idea de cómo se ve tu sitio web dependiendo de la resolución de pantalla del usuario, ya que puede ser útil para mejorar la accesibilidad.

Seguro que muchas de estas herramientas nos pueden hacer la vida un poco más fácil para diseñar nuestras páginas y tener la tranquilidad de que se ven bien en todos los navegadores.

Como curiosidad, en el 2008 se desarrollo una aplicación llamada Acid3 Test que comprueba los estándares web de distintos navegadores, y los que mejores resultados dan, como era de esperar, son Firefox y Chrome.

Por lo general, el valor de un blog se mide por el contenido y la manera que lo transmites a tus lectores. Pero a veces la diferencia entre que un usuario lea tu artículo o cierre directamente el blog radica simplemente en si es visualmente agradable de leer.

Quiero compartir una serie de recomendaciones para que puedas aprender a elaborar un contenido que permita una lectura mucho más cómoda.

Diseño y estilos

• Anchura: Es importante que la anchura de los artículos tu blog no sea excesivamente grande, que no sea necesario tener que girar la cabeza hacia la izquierda para leer la siguiente línea...
• Contraste: El contraste entre el fondo y las letras debe estar entre colores opuestos, lo más recomendable es fondo blanco o claro y letras negras u oscuras.
• Títulos: El tamaño del título del artículo siempre debe ser mayor que cualquier título del contenido. Lo ideal es H1 para el título del artículo, y H2 y H3 para los títulos del contenido.
• Interlineado: Un espacio entre líneas adecuado, hace que la lectura sea mucho más cómoda, creo que 1.5 em (line-height: 1.5em) es suficiente.
• Tipografía: Busca una fuente de texto compatible para los distintos navegadores, no uses fuentes raras, sino las más conocidas, Sans Serif, Arial, etc.
  También debe tener un tamaño adecuado, si las letras son muy pequeñas, será difícil leerlas, y si son muy grandes habría que avanzar constantemente hacia abajo para continuar la lectura.

Ayudas visuales

• Negrita: Debes utilizar la negrita adecuadamente ya que llama demasiado la atención. Se utiliza sobretodo en palabras especialmente relacionadas con la información (palabras clave), y que pretendes que el lector encuentre fácilmente, para que tenga una idea general del artículo sin necesidad de leerlo.
• Cursiva: La cursiva (o Itálica) no suele destacar demasiado en la pantalla, si tu intención es expresar énfasis usa la negrita, la cursiva se utiliza sobretodo en extranjerismos, términos usados impropiamente, etc.
• Subrayado: No es recomendable usar el subrayado en los artículos ya que es utilizado comúnmente en los enlaces y puedes confundir al lector.
• Imágenes: Acompañar tu artículo de una o varias fotografías o imágenes puede contribuir considerablemente a la comprensión del texto. Procura situar una imagen al comienzo del artículo que resuma su contenido, y alguna más como apoyo al texto siempre que tenga relación con la información.

Estructura

• Listas: Usa listas (UL y LI en HTML) cuando sea necesario describir varias partes de un determinado tema, el artículo quedará mucho más estructurado y el lector podrá apreciar con facilidad los distintos apartados.
• Párrafos: Una de las cosas más importantes para facilitar la lectura son los párrafos, un artículo cuyo contenido aparezca todo junto, da dolor de cabeza, sin embargo uno correctamente estructurado con sus pausas y separaciones, parece muchísimo más corto, y es más cómodo de leer.

Enlaces

Muchas veces, por comodidad, simplemente pasamos de enlazar algunas palabras que sabemos que el lector podría no entender o información interesante que ayudaría a completar tu contenido.

Es cierto que el lector fácilmente podría buscar esa determinada palabra en Google o en Wikipedía, pero sabemos que nadie se molestará en hacer eso, por ese motivo es importante que un artículo esté bien enlazado, hacia referencias que puedan ser del interés del lector, palabras poco comunes, tecnicismos, etc.

Características de un enlace

• Subrayado: Los enlaces que se encuentran en medio de un texto siempre deben aparecer subrayados, si le quitas dicha propiedad el lector no sabrá que es un enlace.
• Colores: Es recomendable que el color del enlace sea diferente al color del texto, además debe aparecer de un color diferente cuando un enlace ha sido visitado con anterioridad.
• Destino: Una de las cosas más incómodas para un lector es que al pulsar en un enlace se abra una ventana nueva (agregando target="_blank" al enlace), es algo intrusivo, ya que lo correcto es permitir al usuario elegir si quiere abrirlo en una nueva ventana o no.

Otras recomendaciones

• Es evidente que nada de lo anterior serviría de algo si lo que escribes no tiene ningún sentido, trata de expresar tus ideas de una manera clara y coherente.
• Como siempre, por muy bien que esté estructurado, el contenido debe ser de calidad o interés para el lector, sino lógicamente no lo leerá.
• Evita confusiones, un titulo adecuado y una o varias frases cortas al principio donde expliques de forma resumida lo más importante, puede despertar el interés del lector por el resto del contenido.
• Un artículo es algo que permanecerá en tu blog a lo largo del tiempo, por lo que merece la pena dedicar tan solo unos minutos a corregir las faltas de ortografía, quizá pueda ayudar un poco este complemento de Firefox.
• Las sensaciones también guardan cierta relevancia, dependiendo del color de tu blog puedes llegar a transmitir subconscientemente determinadas emociones a tus lectores, puedes echar un vistazo al siguiente artículo.

Espero que el artículo sea de utilidad, aunque me da la sensación de que me dejo algún punto importante... bueno, si a alguien se le ocurre alguna otra recomendación es libre de comentarlo.