Buenas prácticas en Web Móvil: Maquetación de las páginas
Hojas de Estilo
La capa de presentación debe realizarse integramente en CSS, no se deben utilizar ni el atributo style ni el elemento STYLE.
Hay que asegurar que cuando no están disponibles los estilos el contenido siga siendo legible y el orden del mismo sea el adecuado.
El soporte que los dispositivos móviles ofrecen para CSS no siempre es el mismo:
- Dispositivos con compatibilidad completa, incluyendo almacenamiento en cache del archivo CSS.
- Dispositivos con compatibilidad completa sin almacenamiento en cache: en este caso se pueden incluir los estilos en el elemento STYLE, para disminuir las peticiones al servidor.
- Dispositivos que no soportan el elemento STYLE.
- Dispositivos que solo soportan que se enlace una sola hoja de estilo.
- Dispositivos que no soportan CSS.
Distintas CSS para distintos dispositivos
Los dispositivos móviles suelen interpretar las CSS definidas para handheld (dispositivo móvil):
<link rel="stylesheet" href="estilo_movil.css" type="text/css" media="handheld" />Hay navegadores (Safari, Opera Mobile, Android, Nokia S60) que interpretan las CSS definidas para screen (pantalla) en lugar de las definidas para handheld:
<link rel="stylesheet" href="estilo_normal.css" type="text/css" media="screen" />Estos navegadores interpretan una etiqueta META que define el ancho del área visible de pantalla. Se define así para que coja el ancho de la pantalla del dispositivo:
<meta name="viewport" content="width=device-width" />O con un ancho fijo:
<meta name="viewport" content="width=480" />Opera Mobile 10 en dispositivos de alta resolución aplica un 200% de zoom de modo predeterminado (enlace externo, en inglés), lo que puede ocasionar que la configuración de esta etiqueta META parezca incorrecta, a pesar de no serlo.
Mediante CSS 3 se pueden restringir un grupo de reglas a unas dimensiones específicas de pantalla (debe insertarse a final de la CSS para evitar conflictos):
@media all and (max-device-width: 480px) {
[Reglas CSS para móviles]
}También puede hacerse la restricción por ancho de ventana:
@media all and (max-width: 480px)WCAG 1
- El uso de hojas de estilo para controlar la presentación se cumple con el punto 3.3: Utilice hojas de estilo para controlar la maquetación y la presentación (enlace externo, en inglés).
- Organizar los documentos para que puedan ser leídos sin hojas de estilo se cumple con el punto 6.1: Organice el documento de forma que pueda ser leído sin hoja de estilo (enlace externo, en inglés). Por ejemplo, cuando un documento HTML es interpretado sin asociarlo a una hoja de estilo, tiene que ser posible leerlo.
WCAG 2
El uso de hojas de estilo para controlar la presentación y organizar los documentos para que puedan ser leídos sin hojas de estilo se cumplen con el punto 1.3.1: Información y relaciones (enlace externo, en inglés): La información, estructura y relaciones transmitidas mediante presentación pueden ser determinado mediante aplicación de usuario o estar disponible en el texto.