Conception réactive

La mise en page réactive est un principe de conception basé sur le format HTML pour afficher des pages web ou des documents de manière claire et conviviale sur les appareils finaux respectifs utilisés. L’affichage réagit ou « répond » aux caractéristiques respectives du smartphone ou de la tablette et s’adapte de manière flexible au niveau de la mise en page, du formatage et du positionnement. L’accent est mis sur la multitude et la diversité des appareils mobiles, d’où l’utilisation du terme « optimisation mobile ». Sous la devise « mobile first », il a largement remplacé la traditionnelle priorisation de l’affichage sur le bureau. Les éléments caractéristiques de la mise en page réactive sont:

Mise en forme du corps du texte dans les limites de la largeur d’écran trouvée (ou du facteur de zoom, de l’orientation de l’écran, de la résolution, etc.) de sorte que le défilement horizontal ne soit pas nécessaire.

Repositionnement des éléments de contenu de manière à ce que, par exemple, les colonnes soient disposées les unes en dessous des autres dès que l’espace requis pour une disposition en plusieurs colonnes les unes à côté des autres n’est pas atteint.

Mise à l’échelle ou masquage progressif des éléments d’image dès qu’une exigence d’espace définie est inférieure ou supérieure.

Ces ajustements de mise en page réactive sont déclenchés dès qu’une largeur d’écran définie, appelée point de rupture, est dépassée ou non atteinte. En revanche, la mise en page fluide ne connaît pas de points d’arrêt fixes, mais remplit l’espace disponible de manière « fluide » selon un pourcentage défini de la taille de l’écran.

En savoir plus
En savoir plus sur les formats de sortie de la Serie M/
Avec la Serie M/

Documents en conception réactive

La base technique du HTML dynamique, non basé sur des pages, est le balisage des documents avec des informations structurelles telles que paragraphe, titre, graphique, etc. La Serie M/ équipe automatiquement les documents de ces métadonnées sous la forme de .
Ce « balisage » est élémentaire pour maintenir la structure de base du document HTML – où commence un nouveau paragraphe, où se trouve une autre colonne, où se trouve un titre, un tableau, etc.? Les documents accessibles au format PDF/UA sont également basés sur ce balisage, ce qui garantit que les lecteurs d’écran, par exemple, reconnaissent l’ordre de lecture correct des colonnes/sections sur la base des informations structurelles.

Avec la Serie M/, il est très facile de créer des documents HTML aux pages non reliées, en disposition réactive. Le concepteur du modèle définit une fois dans l’éditeur graphique les différentes vues, par exemple pour les formats portrait et paysage, et leur attribue les points d’arrêt à partir desquels la largeur du support doit être modifiée.

Documents dynamiques

La dynamique et la convivialité des documents HTML dans le cadre du responsive design peuvent être encore accrues. La technique des feuilles de style en cascade permet de modifier la disposition et le positionnement des éléments de contenu de manière dynamique et interactive. L’exemple suivant, par exemple, est basé sur un document HTML réactif créé avec la Serie M/, auquel des feuilles de style CSS préparées ont été ajoutées. Par exemple, vous pouvez

  • Afficher ou masquer les informations détaillées,
  • mettre l'accent sur certaines personnes ou certains thèmes
  • ou choisir entre différents styles d'affichage de graphiques (diagramme à barres ou à secteurs)

Exemple HTML disponible uniquement en allemand. ( documents HTML réactifs créé avec la serie M/).

Exemple HTML

Rubriques associées

Autres formats de sortie

En savoir plus

Gestion des sorties omnicanales avec M/OMS

En savoir plus

Service de rappel pour vos questions

  • Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
Christel Heusler
Print Page 📄