alainericgauthier.com

construire une présence sur le web

Un design flexible, deuxième partie

Capture d'écran d'une page avec un design flexible. Design

Article précédent dans la série

Dans le premier article de ce tutoriel, nous avons vu comment la déclaration position: fixed; permet d'accrocher des blocs de contenu à la fenêtre du navigateur. En utilisant des coordonnées (top, left, right, bottom) et des dimensions (width, height) qui sont en pourcentage plutôt qu'en pixel, les blocs de contenu conservent leurs proportions relatives mais s'ajustent à la fenêtre peu importe sa taille (écran de téléphone intelligent, de tablette, de laptop ou d'un moniteur grand format). Finalement, nous avons vu que cette approche a des limites dans les situations extrêmes.

Dans ce deuxième article, nous allons voir comment nous pouvons intégrer des images qui elles aussi vont s'ajuster aux dimensions de la fenêtre du navigateur.

Le code est le même (voir le premier article) si ce n'est pour deux images qui seront insérées dans les colonnes de texte.

Ces images seront flottantes, la première à gauche et la deuxième à droite.

Le CSS qu'on ajoute permettra de déterminer les proportions de ces images par rapport aux paragraphes et nous rendrons flexible une image d'arrière plan.

La source des images

Les colonnes

Deux images sont insérées directement dans le code. Une image est insérée au début de chaque paragraphe. Accédez au résultat final pour voir la page et lire le code source (le CSS est intégrée à l'intérieur des balises style). Dans la colonne de gauche, l'image d'un chat emprunté à Maurice07 (Own work) [CC BY-SA 3.0], via Wikimedia Commons. Dans la colonne de droite, une autre image d'un félin qui est elle aussi est emprunté à Syed Shiyaz Mirza (Own work) [CC BY-SA 4.0], via Wikimedia Commons.

L'arrière plan

Une image d'arrière plan est aussi ajoutée au design. Mais plutôt que d'ajouter l'image directement dans le code, elle est ajoutée par le CSS. D'un point de vue sémantique, c'est la meilleure chose à faire car cette image n'a aucune signification pour le texte lui-même, sa fonction principale est d'améliorer la présentation visuelle du contenu. L'image que j'ai choisie se trouve sur pexels.com : un site qui offre des images de hautes qualité libre de droits.

La stratégie

Pour les images qui font partie du texte (c.-à-d. qu'elles utilisent la balise img), j'ai choisi la plus grand taille disponible. Le prix à payer sera un chargement plus long mais c'est très important pour optimiser la qualité de l'image à toute les tailles de fenêtres.

Mais il est toujours difficile de faire un bon choix car il faut toujours faire un compromis entre la taille d'une image, sa qualité et la qualité de son rendu quand elle est redimensionné par le navigateur.

Les images en fond (via la propriété CSS background-image) seront aussi d'une taille très grande. Si elles ne sont pas assez grandes et que la fenêtre du navigateur est très grande, l'image ne cachera pas entièrement le fond. Nous verrons donc une bande de couleur unie au-dessous de l'image et peut-être aussi sur le côté de celle-ci. Je vous laisse imaginer à quel point cela rendra le fond de la page irrégulier, dérangeant et inefficace.

L'idéal serait d'utiliser des images de tailles différentes et de charger uniquement celles qui seront utilisées en fonction de la taille de la fenêtre mais cette technique dépasse la portée de ce tutoriel. Nous allons donc nous concentrer sur ce qu'il est possible de faire seulement et un minimum de propriétés CSS.

Planification des proportions

Les images dans le texte

Tout d'abord, comme je l'ai mentionné plus haut, les images qui sont intégrées dans le texte feront partie des paragraphes. Le CSS pour les balises img permettra à chaque image d'occuper la moitié de la largeur du paragraphe. L'image dans la colonne de gauche sera flottante à gauche et l'image dans la colonne de droite s'alignera à droite.

img {width: 45%;}
#col1 img {float: left; padding: 2.5% 5% 2.5% 0;}
#col2 img {float: right; padding: 2.5% 0 2.5% 5%;}

L'image de fond

Voic le CSS pour l'image de fond :

#content {background: url('i/blue-abstract-glass-balls.jpg'); background-size: cover; background-repeat: no-repeat;}

La première déclaration permet de placer une image sur le fond de l'élément #content. La seconde déclaration utilise l'attribut cover pour la propriété background-size. À noter que cette propriété n'est compatible qu'avec IE9 et des versions assez anciennes de Chrome (4.0), Firefox (4.0), Safari (4.1) et Opera (10.5).

Pour ce qui est de la dernière déclaration, la question de la compatibilité n'est pas vraiment importante puisque même IE4 les supporte! Si vous voulez en savoir plus sur ces propriété CSS, faites une recherche sur internet.

Les limites de cette approche

Pour ce qui est de l'affichage pour une largeur de fenêtre normale, notre design tient encore la route.

Encore une fois, les cas extrêmes pose problème.

Pour ce qui d'une fenêtre très large, le problème principal vient surtout du pourcentage de padding qui devient un peu trop grand. Nous en retiendrons que des proportions identiques ne donnent pas la même impression selon différentes dimensions de l'ensemble. En fait, plus l'ensemble est grand, moins l'espace entre les éléments doit être grand. Et cette impression est renforcée par le fait que la taille des lettres ne change pas peu importe la taille de la fenêtre.

Pour un affichage dont largeur est réduite, on peut voir que les images sont excessivement réduites et que le navigateur montre ses faiblesse pour l'optimisation de l'affichage. Nous pouvons voir des pertes de qualité dans les deux images.

De plus, il ne faut pas oublier que pour l'attribut cover, il faut que l'image de fond soit aussi grande que la taille maximale que la fenêtre pourra prendre. Lorsqu'on utilise une image qui est plus petite que la taille de la fenêtre, on voit le bord de l'image et la couleur de fond de l'élément. L'effet visuel est plutôt dérangeant. Dans ce cas-ci, l'image fait 4943 par 2515 pixels. Ce qui devrait être suffisant pour la plupart des plateformes actuelles.

Qui sait, dans une dizaine d'années, peut-être que tout le monde aura la possibilité d’utiliser les murs de sa maison pour afficher des pages web et que les écrans standard auront des centaine de miliers de pixels. Mais d'ici ce jour, tout devrait bien aller avec une image de cette taille.

Votre page souffre d'un excès de poids

L'avantage de cette approche : une seule image et une seule page. Nous n'avons pas besoin de CSS complexe et pas besoin de JavaScript pour optimiser la taille des images à la largeur de la fenêtre. Mais cet avantage vient au prix d'un inconvénient majeur :
le poids des pages est grand. Pour les petits appareils et les connections mobiles, ce qui est loin d'être idéal.

Pour pallier à ce problème, il faudra utiliser plus de code CSS pour les images de fond et du JavaScript pour les images à valeur sémantique. Mais ça, c'est une autre stratégie pour le design de page web et c'est un bon sujet pour un autre article.

À suivre...

Ajouter un commentaire

Plain text

  • Les lignes et les paragraphes vont à la ligne automatiquement.
Actualiser Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.