Documentos HTML optimizados para móviles

  • Por
Cuáles son las etiquetas HTML que se utilizan en páginas web que están optimizadas para dispositivos móviles.
Estamos haciendo un recorrido por las características del diseño y la animación de sitios web para móviles. En pasados artículos explicamos las diferencias conceptuales y de uso de la Web en movilidad, así como unas guías de usabilidad que merece la pena tener en cuenta a la hora del desarrollo. En esta ocasión vamos a comenzar a poner manos a la obra y a ver unos primeros códigos, que seguro interesarán a más de uno.

De momento y aunque el título del artículo parezca muy ambicioso, "documentos HTML optimizados para móviles", nos vamos a limitar a ver aquellas etiquetas de la cabecera del código HTML. Contendrá varios formatos y metadatos que nos conviene conocer y utilizar, algunos más importantes que otros.

¡HTML 5 por favor!

Lo primero que vamos a hacer cuando diseñamos un sitio web optimizado para móviles es codificarlo como HTML 5. Las diferencias con un archivo HTML tradicional son mínimas, pero merece la pena tenerlas en cuenta, pues los navegadores para móviles tienen generalmente compatibilidad con esta nueva versión del lenguaje de marcación.

Tendremos pues que utilizar el doctype del HTML5, que quizás conozcamos ya:

<!DOCTYPE html>

Además, incluiremos la etiqueta META para definir el juego de caracteres que estamos utilizando. Esto se define en HTML5 con el atributo "charset", de una manera más simple que en otras versiones anteriores del lenguaje.

<meta charset="UTF-8">

Nota: HTML 5 permite en principio varios juegos de caracteres, sin embargo, para mejorar la compatibilidad de éstos con la mayor gama de dispositivos móviles, se recomienda utilizar el charset UTF-8.

Metadatos de configuración de la página para dispositivos móviles

Existen además diversas etiquetas META que nos permiten especificar la configuración del documento HTML de cara a cómo lo deben interpretar y renderizar los dispositivos móviles. Estos metadatos fueron creados inicialmente por distintas empresas de tecnología móvil, pero en algunos casos la utilidad de la etiqueta ha sido tan importante que han sido adoptados e interpretados también por otros fabricantes. Es el caso de la etiqueta "Viewport", originalmente creada por Apple, que hoy es casi un estándar que tienen en cuenta hasta los navegadores de escritorio.

A continuación vamos a ver algunas etiquetas META para especificar cosas que los navegadores de teléfonos móviles entenderán, con alguna breve explicación.

<meta name="MobileOptimized" content="width" />

Es una etiqueta creada desde versiones antiguas de Internet Explorer en el sistema Windows Mobile. Hace que el navegador adapte el contenido de la página a la ventana del dispositivo. Permite que el navegador no haga ningún cambio en el layout de la página que contenga ese META Tag.

Si lo indicamos tal cual aparece en el código anterior, con content="width", se adaptará a la anchura de cada dispositivo. Si no queremos eso, también podemos definir un valor numérico en el atributo content, que indicará el tamaño en píxeles para el que se diseñó la página.

<meta name="HandheldFriendly" content="true" />

Esta etiqueta informa al navegador que la página está optimizada para móviles y que, por tanto, no se debe escalar su contenido al mostrarlo en la pantalla de los dispositivos. Creada para los navegadores de AvantGO, compatible con dispositivos BlackBerry, no se ha llegado a popularizar en muchas otras plataformas.

Lo que nos lleva a la última etiqueta META para optimizar para móviles un sitio, que sí que ha sido adoptada por un gran abanico de fabricantes, el "viewport".

<meta name="viewport" content="width=device-width, initial-scale=1">

Esta etiqueta, como se dijo antes, fue creada por Apple para sus dispositivos basados en iOS y hoy es ampliamente compatible con diversos otras familias de dispositivos y navegadores, lo que la ha llevado a ser considerada como un estándar.

Como todas las anteriores, indica al navegador que el sitio web está optimizado para móviles, pero en este caso nos sirve también para especificar cómo el cliente web debe interpretar el documento y cómo debe renderizarlo.

Esta etiqueta viewport nos sirve para indicar el diversas informaciones al navegador, como la anchura a la que se tiene que representar el documento, la escala inicial, si se puede o no hacer zoom, etc.

En el artículo siguiente haremos una descripción en profundidad de la etiqueta Viewport, dada su importancia en la web móvil, pero además porque existen varios conceptos y usos interesantes que requieren unas explicaciones más detalladas.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Tony

04/7/2012
Compativilidad IE
Hola. Yo he tenido problemas de compatibilidad con las diferentes versiones de IE y se han solucionado colocando etiquetas en el head de la página de este tipo<br />
<br />
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE8&quot;/&gt;<br />
<br />
Como dato complementario diré que estaba usando ASP.NET. Pero creo que funcionaria en cualquier otro framework, aunque no lo he probado.<br />
<br />
¿Hasta que punto es necesaria la librería js que se referencia en este articulo?<br />
<br />
Gracias.

midesweb

10/7/2012
IE?
Hombre, esto no tiene mucho que ver con IE... es un navegador para escritorio, o al menos imagino que te refieres a eso... realmente para probar lo que se comenta en este artículo necesitas un navegador en móviles.

pablofrancisco

29/7/2012
web para moviles
Hola, no sé si entendi bien el post, pero yo creo que con CSS y las mediaqueries se simplifica mucho la adaptacion de la pagina para moviles....

Cruni505

24/10/2012
Cual de todas las etiquetas?
Veo que la ultima etiqueta es muy útil la he tratado de usar pero nomas no cambia nada a la hora de verlo en android. ¿tengo que combinar la etiqueta wieport con las otras?