La première chose que la plupart des concepteurs considèrent lors de la création de leur page Web est ce que résolution pour concevoir. Cela revient vraiment à décider de la largeur de votre conception. Il n'y a plus de largeur standard de site Web.
Pourquoi envisager la résolution
En 1995, les moniteurs standard de 640 pixels sur 480 pixels étaient les plus grands et les meilleurs moniteurs disponibles. Cela signifiait que les concepteurs de sites Web se concentraient sur la création de pages qui semblaient bien dans les navigateurs Web, maximisées sur un moniteur de 12 à 14 pouces à cette résolution.
De nos jours, la résolution de 640 x 480 représente moins de 1% du trafic de la plupart des sites Web. Les gens utilisent des ordinateurs avec des résolutions beaucoup plus élevées, notamment 1366 x 768, 1600 x 900 et 5120 x 2880. Dans de nombreux cas, la conception pour un écran de résolution 1366 par 768 fonctionne.
Aujourd'hui, la plupart des gens ont de grands écrans larges et ils n'optimisent pas la fenêtre de leur navigateur. Donc, si vous décidez de concevoir une page qui ne dépasse pas 1366 pixels de large, votre page aura probablement l'air bien dans la plupart des fenêtres de navigateur, même sur de grands moniteurs avec des résolutions plus élevées.
Largeur du navigateur
L'un des problèmes souvent négligés lors du choix de la largeur d'une page Web est la taille de leurs navigateurs. Plus précisément, maximisent-ils leurs navigateurs en plein écran ou les gardent-ils plus petits que le plein écran?
Après avoir pris en compte les clients qui maximisent ou non, pensez aux limites du navigateur. Chaque navigateur Web utilise une barre de défilement et des bordures sur les côtés qui réduisent l'espace disponible de 800 à environ 740 pixels ou moins sur des résolutions de 800 x 600 et environ 980 pixels sur des fenêtres maximisées à 1024 x 768 résolutions. C'est ce qu'on appelle le navigateur chrome et cela peut réduire l'espace utilisable pour la conception de votre page.
Pages de largeur fixe ou liquide
La largeur numérique réelle n'est pas la seule chose à laquelle vous devez penser lors de la conception de la largeur de votre site Web. Vous devez également décider si vous aurez un largeur fixe ou largeur liquide. En d'autres termes, allez-vous régler la largeur sur un nombre spécifique (fixe) ou sur un pourcentage (liquide)?
Largeur fixe
Les pages à largeur fixe sont exactement comme elles sonnent. La largeur est fixée à un nombre spécifique et ne change pas, peu importe la taille du navigateur. Cette approche peut être bonne si vous avez besoin que votre conception soit exactement la même, peu importe la largeur ou l'étroitesse des navigateurs de vos lecteurs, mais cette méthode ne prend pas en compte vos lecteurs. Les personnes avec des navigateurs plus étroits que votre conception devront faire défiler horizontalement, et les personnes avec des navigateurs larges auront de grandes quantités d'espace vide sur l'écran.
Pour créer des pages à largeur fixe, utilisez des nombres de pixels spécifiques pour les largeurs de vos divisions de page.
Largeur du liquide
Pages à largeur liquide (parfois appelées pages à largeur variable) varient en largeur en fonction de la largeur de la fenêtre du navigateur. Cette stratégie apporte des conceptions qui se concentrent davantage sur les clients. Le problème avec les pages de largeur liquide est qu'elles peuvent être difficiles à lire. Si la longueur de numérisation d'une ligne de texte est plus longue que 10 à 12 mots ou plus courte que 4 à 5 mots, il peut être difficile à lire. Cela signifie que les lecteurs avec des fenêtres de navigateur grandes ou petites ont des problèmes.
Pour créer des pages de largeur flexible, utilisez des pourcentages ou ems pour les largeurs de vos divisions de page. Familiarisez-vous avec le CSS largeur maximale propriété. Cette propriété vous permet de définir une largeur en pourcentage, mais de la limiter ensuite afin qu'elle ne devienne pas si grande que les gens ne puissent pas la lire.
Requêtes de média CSS
La meilleure solution de nos jours consiste à utiliser des requêtes multimédias CSS et un design réactif pour créer une page qui s'adapte à la largeur du navigateur qui la visualise. Une conception Web réactive utilise le même contenu pour créer une page Web qui fonctionne, que vous la visualisiez à 5120 pixels de large ou 320 pixels de large. Les pages de tailles différentes semblent différentes, mais elles contiennent le même contenu. Avec la requête multimédia dans CSS3, chaque appareil récepteur répond à la requête avec sa taille et la feuille de style s'adapte à cette taille particulière.