Cuáles son las etiquetas HTML que se utilizan en páginas web que están optimizadas para dispositivos móviles.
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">
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...