Type de mise en page de conception Web
Un type de mise en page de conception Web (également mise en page de page Web ou mise en page Web ) définit les propriétés graphiques de base ou les paramètres d'affichage ( mise en page ) d'une page Web . Ces paramètres donnent à un navigateur Web des informations sur la manière dont le contenu (par exemple, des images, du texte, des vidéos, ...) doit être présenté sur l' écran d'un appareil.
Pour les représentations visuelles dans un processus de conception, une mise en page doit donner une impression de ce à quoi ressemblera le résultat entre-temps ou à la fin. Une mise en page de textes purs, d'images ajoutées ou d' animations complexes peut montrer la fonctionnalité du site Web ultérieur comme résultat final.
Types de mise en page standard
Lors de la conception d'un site Web avec ses pages Web individuelles, il existe différentes approches ou propriétés de la façon dont une conception doit se comporter sur un appareil une fois terminée . Ceux-ci sont résumés dans les types de mise en page standard. Pour les mises en page standard, une seule unité de taille est utilisée pour l'affichage dans le sens horizontal dans la fenêtre d'affichage.
Disposition fixe
Une mise en page fixe est conçue avec des valeurs de pixels prédéterminées ( px ) pour ses dimensions, ce qui signifie que ce type de mise en page ne peut pas s'adapter à des fenêtres d'affichage de différentes tailles sur les terminaux. [1]
En guise de solution à cette propriété, les appareils terminaux redimensionnent linéairement le site Web si petit qu'il s'affiche complètement sur l'appareil terminal ou des barres de défilement horizontales apparaissent dans la fenêtre d'affichage, [1] [2] afin de pouvoir lire l'intégralité de site Web en déplaçant la zone d'affichage. De nombreux appareils finaux ont une zone d'affichage plus grande que le maximum réellement requis, ce qui peut entraîner un espace blanc inutilisé. [3]
Aménagement fluide
Les mises en page fluides sont ajustées en taille à la fenêtre d'affichage à l' aide de valeurs en pourcentage ( % ), ceci est également appelé ajustement à la fenêtre d'affichage . L'agencement s'adapte ainsi avec souplesse aux différentes zones d'affichage, d'où le mot "fluide" pour "coulant ou se déformant en permanence" ou une autre appellation possible "agencement flexible". [1] Par conséquent, lorsque les dimensions d'une fenêtre d'affichage sont modifiées, les positions du contenu sont ajustées avec le changement de mise en page. Cependant, le contenu (par exemple les textes, les images) reste de la même taille. [1] [2]
Disposition élastique
Ce type de mise en page est appelé "mise en page élastique" et est basé sur des informations typographiques , l'accent étant mis sur le texte d'une page Web. Les spécifications de taille pour la taille de la police sont données dans l'unité relative em (1 em = 16 px en standard dans le navigateur Web). C'est pourquoi ce type de mise en page adapte toujours ses propriétés à la taille de police actuellement définie. [2] La plupart des navigateurs Web implémentent déjà ce comportement, également en principe, avec la fonction de zoom de page . [1] rem est également utilisé comme unité de taille alternative pour ce type de mise en page .
Par exemple, la conception Web de Wikipedia utilise une mise en page Web élastique pour afficher les articles. Wikipédia en allemand résume les explications de l'utilisation de la mise en page de Wikipédia dans des articles sous l'article Help:Text Design/Layout Flow . Ce type de mise en page est classé différemment dans la littérature spécialisée et par les concepteurs de sites Web, soit comme un hybride de mise en page fixe et fluide, [1] ou comme une forme standard. En raison de l'utilisation d'une seule unité de taille, la disposition élastique est regroupée dans les types standard de cet article.
formes mixtes
Les types de mise en page peuvent être combinés sous des formes mixtes [2] pour compenser les inconvénients du type de mise en page respectif et pour que les avantages individuels se complètent. Différentes unités de taille des types de mise en page individuels (par exemple, px, em, rem, %, ...) peuvent être utilisées simultanément dans un formulaire mixte.
Disposition adaptative
La mise en page adaptative est une mise en page fixe avec plusieurs versions de vue pour différentes tailles de fenêtres d'affichage. [4] A partir d'une certaine largeur de la fenêtre d'affichage, la mise en page "saute" automatiquement vers un autre affichage du site. Ces tailles de largeur précédemment définies sont également appelées points d' arrêt . [1] Le nombre de versions d'affichage peut être librement sélectionné, ce qui signifie que n'importe quel nombre de points d'arrêt peut être utilisé.
Mise en page réactive
Une mise en page réactive, également appelée mise en page réactive, combine les propriétés d'une mise en page fluide avec une mise en page adaptative. [4] Des points de rupture fixes sont définis dans la mise en page, dans lesquels des parties ou la totalité de la mise en page changent de manière significative. Entre ces points d'arrêt, ce type de mise en page se comporte comme une mise en page fluide. [1] Le contenu (par exemple, texte, images) d'une mise en page réactive s'adapte à l'espace disponible dans la mise en page par mise à l'échelle.
approches de mise en page
En raison des différentes résolutions d'écran et en raison de l'évolution historique des formes de représentation et de conception Web , deux approches de mise en page ont prévalu d'un point de vue pratique. L'un s'appelle Mobile First et l'autre Desktop First. Ces noms font référence au point de départ respectif d'une taille d'affichage approximative des terminaux pour la première mise en page d'un site Web.
Ces approches doivent mettre l'accent sur le contenu d'un site Web afin qu'il soit clair et lisible pour les visiteurs du site Web. [5]
Bureau d'abord
Ce terme est également connu sous le nom d' approche de dégradation gracieuse [1] ou de site de bureau. L'approche de développement de la mise en page est prise du point de vue des écrans d'ordinateur, passant de la largeur du bureau à la largeur de la tablette, puis à la largeur du smartphone. Cela peut être un avantage pour les sites Web relativement complexes. [5]
mobile d'abord
Ce terme désigne la création d'une mise en page initialement pour les appareils mobiles (par exemple, les smartphones) avec une mise à l'échelle ultérieure pour des appareils plus larges tels que les tablettes et les ordinateurs de bureau. [5] Luke Wroblewski a inventé ce terme en 2009 et a publié très tôt de nouvelles stratégies et approches avec le livre "Mobile First". [6] L'accent doit être mis sur le contenu prioritaire, c'est pourquoi cette approche est également appelée Content First . [1]
intégration dans un site web
Pour la description et l'alignement d'un type de mise en page, une feuille de style en cascade (CSS) peut être utilisée directement dans le code HTML à l' aide de points d' arrêt ou "en une ligne - CSS" (en anglais : "inline CSS"), qui fournit les paramètres nécessaires pour le navigateur Web que la représentation dans la fenêtre d'affichage communique. Les styles CSS standard (styles CSS par défaut) s'appliquent au point de départ respectif de la première mise en page du site Web. Cela serait sélectionné pour la première approche mobile pour le plus petit écran possible et pour la première approche de bureau pour la plus grande résolution possible dans la mise en page. [1]
Conversion entre les types de mise en page
Les types standard sont généralement développés plus avant pour les formulaires mixtes, tels que la conception Web réactive, puis convertis, par exemple, de valeurs de taille fixes avec des pixels en valeurs de taille flexibles avec des pourcentages. Les systèmes de grille CSS sont utilisés pour cela [ 1] et le contenu est ainsi converti de structures rigides en structures flexibles afin qu'ils puissent s'adapter à leur environnement changeant de manière contrôlée.
Littérature
- Andrea Ertel, Kai Laborenz : Responsive web design – programmation et conception d'un site web adaptable . 2e édition. Galileo Computing (aujourd'hui Rheinwerk Verlag), Bonn, 2015, ISBN 978-3-8362-3200-5
- Björn Rohles : Bonne conception de sites Web - cours de base . 1ère édition. Galileo Design (aujourd'hui Rheinwerk Verlag), Bonn, 2014, ISBN 978-3-8362-1992-1
- Jürgen Wolf : HTML5 et CSS3 - Le manuel complet . 1ère édition. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5
- Martin Han : Conception Web – Le manuel de conception Web . 3e édition. Rheinwerk Verlag, Bonn 2020, ISBN 978-3-8362-7216-2
liens web
- Luke Wroblewski : Mobile First , publié en 2020
les détails
- ↑ a b c d e f g h i j k l Andrea Ertel, Kai Laborenz : Responsive web design – programmation et conception d'un site Web adaptable . 2e édition. Galileo Computing (aujourd'hui Rheinwerk Verlag), Bonn 2015, ISBN 978-3-8362-3200-5 , p. 29-32, 75, 170 à partir de _
- ↑ a b c d Björn Rohles : Good web design - basic course . 1ère édition. Galileo Press (aujourd'hui Rheinwerk Verlag), Bonn 2014, ISBN 978-3-8362-1992-1 , p. 136-137 .
- ↑ Jonas Hellwig : Les types de mise en page d'un site Web : fixe, fluide et élastique. Dans : blog.kulturbanause.de. 7 juin 2016, récupéré le 7 avril 2020 .
- ^ un b Jonas Hellwig : le Site Web Adaptatif contre le Site Web Réactif. Dans : blog.kulturbanause.de. 19 novembre 2018, récupéré le 7 avril 2020 .
- ↑ a b c Jürgen Wolf : HTML5 et CSS3 - Le manuel complet . 1ère édition. Rheinwerk Verlag, Bonn 2015, ISBN 978-3-8362-2885-5 , p. 567 à partir de _
- ↑ Luke Wroblewski, Mobile First. Sur : Lukew.com. octobre 2011, consulté le 6 mai 2020 (anglais).