Avant de mettre en œuvre un design, il est important de clarifier certains points fondamentaux. Vous devriez commencer par décider du type de design. Fondamentalement, il existe trois options.
• Fixe
• Flexible
• Élastique
Le CSS permet de créer des designs avec des dimensions fixes ou flexibles. Les designs fixes sont généralement basés sur des mesures en pixels. En revanche, les designs flexibles sont basés sur des valeurs en pourcentage. Chacune de ces variantes de design a ses avantages et inconvénients.
Les designs fixes sont généralement utilisés lorsque des graphiques doivent être intégrés dans le design. (Bien qu'il existe des exceptions grâce à l'utilisation de graphiques de fond en CSS). Lorsque les designs nécessitent un positionnement précis des éléments en pixels, on opte également généralement pour un positionnement fixe. Dans ce type de design, au moins la largeur du design est généralement définie en pixels. Cette largeur vise généralement des résolutions d'écran spécifiques.
Les designs flexibles, en revanche, n'ont pas de largeur fixe. Le design s'adapte à la largeur de la fenêtre du navigateur.
Dans ces designs, par exemple, la largeur est spécifiée en pourcentage. Si un utilisateur ajuste la taille de la fenêtre du navigateur, la taille du design change également.
Grâce aux propriétés CSS modernes, il existe maintenant une autre variante de design, appelée design réactif. Ce design évolue pour s'adapter complètement à un smartphone par exemple, contrairement à un ordinateur de bureau. Sur PSD-Tutorials.de, par exemple, un tel design a été utilisé. Si vous consultez le site sur un ordinateur de bureau avec une taille de fenêtre de navigateur "normale", voici à quoi cela ressemblerait.
Cependant, si vous réduisez la fenêtre, la disposition des éléments présents sur la page web change effectivement.
La création d'un design réactif est relativement complexe. La taille de l'écran du visiteur doit être déterminée pour lui présenter un design adapté, et ce design doit être développé pour les différentes tailles d'écran. Par exemple, un visiteur consultant votre site sur un grand moniteur verra un design à trois colonnes. À l'inverse, un autre visiteur consultant votre site sur un smartphone verra un design à une colonne.
Avantages et inconvénients des versions
Avant de mettre en œuvre un design, vous devez réfléchir à quel type de design vous souhaitez utiliser. Je vais rapidement vous montrer quels sont les avantages et inconvénients des designs fixes.
• Les modèles de conception sont probablement les plus faciles à implémenter ici.
• Si vous vous basez sur des résolutions standard, la représentation du site web ne pose généralement aucun problème.
• Les designs sont facilement compréhensibles. (Cet avantage vous sera bénéfique lorsque vous devrez expliquer un design à un client en tant que développeur web).
Cependant, les designs fixes présentent également des inconvénients.
• En raison des dimensions fixes, ils ne sont pas flexibles et ne s'adaptent pas bien aux petits ou grands écrans. Souvent, de l'espace est gaspillé.
• Ils présentent certaines limitations en termes d'accessibilité.
Les designs flexibles ont également leurs forces et faiblesses. Commençons par les avantages.
• Les designs s'adaptent automatiquement à la taille de la fenêtre du navigateur.
• Les visiteurs peuvent donc avoir un impact important sur la représentation du site web.
Cependant, il y a aussi des inconvénients.
• En tant que développeur, vous avez peu de contrôle sur les résultats. Les spécifications de design ne peuvent donc être qu'en partie respectées.
• Les contenus des pages doivent être ajustés de manière complexe.
• Sur de grands écrans, la représentation de courts textes peut être peu esthétique, car ils sont souvent affichés sur une seule ligne. (CSS propose des propriétés adaptées comme min-width).
Un autre type de design représente un compromis entre les designs fixes et les designs flexibles. Il s'agit des designs élastiques. Leur principal élément est l'unité de mesure em. (De nos jours, rem est de plus en plus à la mode. Contrairement à em, rem est basé sur l'élément racine, et non sur l'élément parent).
Dans ces designs, la largeur et la hauteur sont flexibles. Le design de la page s'agrandit proportionnellement à la taille de la fenêtre du navigateur. Cette forme de conception est certainement la plus complexe à mettre en œuvre en pratique. Cela est principalement dû au fait qu'il faut savoir exactement comment les éléments se comporteront avec une fenêtre de navigateur en évolution. Les designs élastiques sont principalement utilisés pour les sites web qui proposent de nombreuses photos et vidéos.
Les avantages des designs élastiques:
• L'espace disponible est pleinement exploité.
• Les contenus sont affichés aussi grand que possible de manière proportionnelle.
Cependant, les designs élastiques ont également leurs inconvénients.
• La conception de ces designs est très complexe.
• Leur mise en œuvre est loin d'être facile.
Le dilemme du choix
Vous devez donc décider lequel des types de design mentionnés vous souhaitez utiliser. Si vous êtes encore débutant dans le développement HTML/CSS, je vous recommande de commencer par un design fixe. En revanche, si vous avez déjà des connaissances avancées dans le domaine du développement web, vous devriez travailler directement avec des designs réactifs. Ainsi, vous serez prêt quel que soit le périphérique à partir duquel votre site web sera finalement consulté.
