El diseño (web) responsivo es un principio de diseño basado en el formato HTML para mostrar páginas o documentos web de forma clara y fácil de usar en los respectivos dispositivos finales utilizados. La pantalla reacciona o «responde» a las características respectivas del smartphone o la tableta y se adapta de forma flexible en cuanto a diseño, formato y posicionamiento. La atención se centra en la multitud y diversidad de dispositivos móviles, por lo que se utiliza el término «optimización móvil». Bajo el lema «mobile first», ha sustituido en gran medida la tradicional priorización de la visualización en el escritorio. Los elementos característicos del diseño responsivo son:
Con la Serie M/
Documentos en diseño responsivo
La base técnica del HTML dinámico, no basado en páginas, es el etiquetado de los documentos con información estructural como párrafo, encabezado, gráfico, etc. La Serie M/ equipa automáticamente los documentos con estos metadatos en forma de ‘tags’. Este «etiquetado» es elemental para mantener la estructura básica del documento HTML – ¿dónde empieza un nuevo párrafo, dónde está otra columna, dónde está un encabezamiento, una tabla, etc.? Los documentos accesibles en formato PDF/UA también se basan en este etiquetado, que garantiza que, por ejemplo, los lectores de pantalla reconozcan el orden correcto de lectura de las columnas/secciones basándose en la información estructural.
Con la Serie M/, es muy fácil crear documentos HTML no vinculados a la página con un diseño responsivo. El diseñador de plantillas define una vez en el editor gráfico las diferentes vistas para, por ejemplo, el formato vertical y el horizontal, y les asigna los puntos de ruptura, a partir de los cuales debe producirse el cambio de maquetación – hecho esto, el renderizador HTML hace el resto automáticamente para todas las plantillas.
Documentos dinámicos
El dinamismo y la usabilidad de los documentos HTML en el diseño responsivo pueden aumentar aún más. La técnica de las hojas de estilo en cascada permite cambiar la disposición y el posicionamiento de los elementos de contenido de forma dinámica e interactiva. El siguiente ejemplo, por ejemplo, se basa en un documento HTML responsivo creado con la Serie M/, al que se han añadido hojas de estilo CSS preparadas. Por ejemplo, se puede
Temas relacionados
Otros formatos de salida
Otros formatos de salidaGestión de Salida Omnicanal con M/OMS
Servicio de Devolución de Llamada para sus preguntas
