alainericgauthier.com

construire une présence sur le web

Un design flexible, première partie

Aperçu d'une page web avec un design entièrement flexible. Design

Pour les curieux, allez voir le résultat final immédiatement.

Pour ceux qui aime explorer et comprendre (voire même apprendre de nouvelle choses), lisez la suite.

Qu'est-ce qu'un design flexible?

Nous aurons un design flexible quand les éléments sur une page s'adapteront à la taille du navigateur et que toutes les proportions du design seront préservées. Autrement dit, un design flexible ne prescrit pas des dimensions absolues (en pixels par exemple) mais des proportions (en pourcentage).

Cette approche repose sur l'idée qu'il n'y a pas plusieurs écrans mais qu'il n'y en a qu'un seul, c'est celui du visiteur.

Plutôt que de concevoir plusieurs designs, un pour chaque type d'appareil, le designer accepte l'idée qu'il n'a pas le contrôle sur la taille de la fenêtre du visiteur d'autant plus que, puisque la technologie évolue très rapidement, il est futile de tenter de prévoir toutes les situations possibles.

Malgré son intention d'être le plus universel possible, le design flexible rencontre tout de même des limites notamment pour les cas extrêmes où la fenêtre du navigateur est soit très petite, soit très large. De plus, avec cette approche, il n'est pas simple d'ajuster la taille du texte pour respecter toutes les situations.

Comme pour toutes les approches, l'utilisation sans compromis du design flexible mènera à un cul de sac et il est préférable de contourner les faiblesses d'une approche par les forces d'une autre mais cela dépasse la portée du présent article.

Ce qui ne fait pas partie de ce design flexible

Dans ce tutoriel, nous ne verrons rien sur le choix des polices et des couleurs. En fait, cet aspect du design est ici très rudimentaire puisque ce qui importe, c'est la disposition et la fluidité des différents éléments de la page.

De plus, l'approche "mobile en premier" (en anglais mobile first ou encore progressive enhancement) ne sera pas touchée. Avec un design flexible pur et dur, nous arriverons vite aux limites de cette approche mais encore une fois, combiner différentes stratégies dépasse la portée de cet article.

Finalement, dans cette première partie, je n'aborderai pas non plus le design flexible des images. Ce sera pour un autre article.

Créer un design flexible

Le HTML

Tout d'abord, voici le code HTML :​

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Design flexible 1 par Alain Éric Gauthier</title>
<style>
</style>
</head>
<body>
<div id="head">
<h1>Un design flexible...</h1>
</div>
<div id="content">
<div id="col1">
<h1>...avec non pas une mais...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="col2">
<h1>...deux colonnes...</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="brand">
<h1><span>...par </span>Alain Éric Gauthier</h1>
</div>
</body>
</html>

L'objectif n'est pas de vous présenter un code parfaitement sémantique ni une version utilisant tous les atouts de la norme HTML5.

Structure

En gros, la structure de la page comporte une première section qui sert d'entête. La deuxième section présentera le contenu dans deux colonnes de texte. Dans l'extrait de code ici, les paragraphes sont très courts mais le résultat final comporte deux paragraphes très longs pour tester les limites du design. Finalement, une dernière section sert de pied de page et de branding.

Le tout est extrêmement minimaliste comme vous pouvez le voir ici :

Page web sans CSS

Avant de créer la composition

C'est n'est qu'une préférence personnelle mais je commence mes projets de design de pages web par la typographie et les couleurs. Ce n'est qu'après avoir défini ces éléments du design visuel que je porte mon attention sur la composition de la page et la disposition des éléments. Encore une fois, je vous rappelle que je me limite à une simplicité brutale seulement pour des fins de démonstrations.

Voici le CSS qui permet d'obtenir ce que vous voyez plus bas :

​* {margin: 0; padding: 0;}
body {font-family: sans-serif;}
h1 {text-align: center;}
#head {color: white; background: black; text-align: center;}
#content, #col1, #col2 {color: black; background: grey;}
#col1 {background: red;}
#col2 {background: blue;}
#brand {color: white; background: green;}
#brand span {font-size: 66.666666%;}

La disposition

Comme vous pouvez le voir dans le wireframe qui suit, la disposition est très simple. J'ai utilisé des couleurs d'arrière-plan pour faciliter l'identification des différentes parties de la page.

  • L'entête est en noir;
  • le contenu en gris
  • et le pied de page en vert.
  • La première colonne est en rouge
  • et la seconde en bleue.

Lorsque la programmation sera terminée, cette disposition sera respectée peu importe la taille de la fenêtre qui affiche la page. Pour y arriver, nous allons tout d'abord déterminer les proportions de chacune des sections.

Les proportions

Les proportions, voilà ce qui caractérise un design flexible.

Plutôt que de penser en hauteur et en largeur absolues, toutes les sections sont définies en proportion de la page. Ces proportions ne portent pas seulement sur la largeur des éléments mais aussi sur leur hauteur.

Dans son livre, Responsive Web Design, Ethan Marcotte explique comment, à partir d'un design fixe avec des dimensions en pixels, on peut calculer les proportions qui permettent de créer un design flexible.

Pour cet article, puisque nous faisons la conception du design à même la page web (c'est l'approche que je préfère), nous allons définir les proportions directement et ensuite créer le CSS pour réaliser notre plan.

Voici les proportions de chaque section de la page :

  • L'entête et le pied de page auront une hauteur de 10% et une largeur de 100%.
  • Le contenu aura une hauteur de 80% et une largeur de 100%.
  • Chaque colonne aura une largeur de 40% et une hauteur de 80% et elles seront centrées dans la moitié de gauche et de droite de la section contenu.

Et c'est probablement un des designs les plus simples que vous n'aurez jamais vu.

Le code CSS

Voici le CSS pour obtenir cette disposition et ce, peu importe la taille de la fenêtre de votre navigateur.

#head {position: fixed; top: 0; left: 0; width: 100%; height: 10%;}
#content {position: fixed; top: 10%; left: 0; height: 80%; width: 100%;}
#col1, #col2 {position: fixed; width: 35%; height: 80%; margin: 0 5%; padding: 0 2.5%;}
#col1 {top: 10%; left: 0;}
#col2 {top: 10%; right: 0;}
#brand {position: fixed; top: 90%; left: 0; height: 10%; width: 100%;}

position: fixed

Pour que le page occupe toujours l'entièreté de la fenêtre du navigateur, j'ai utilisé position: fixed. Cet attribut CSS indique que l'élément sélectionné sera toujours positionné en fonction de la fenêtre du navigateur. Le positionnement se fait à l'aide des attributs top, bottom, left et right. Il est aussi possible d'utiliser  les attributs height et width pour définir la heuteur et la largeur de l'élément.

Exemple de position: fixed

Si on observe le positionnement de l'élément #head, nous pouvons voir comment chaque attribut CSS permet de placer cet élément dans la page.

Tout d'abord, la déclaration position: fixed; indique que cet élément se place toujours au même endroit dans la fenêtre du navigateur et ce, même si on utilise la barre de défilement.

Ensuite, les déclarations top: 0; et left: 0; indique que l'élément se position dans le coin supérieur gauche.

Finalement, les déclaration height: 10%; et width: 100%; indique que l'élément aura toujours une hauteur égale à 10% de la hauteur de la page et qu'il occupera toute le largeur de la page.

Équivalent

Cette déclaration est tout aussi valide :

#head {position: fixed; top: 0; left: 0; right: 0; bottom: 90%;}

Pour est-ce que j'ai choisi la largeur et la hauteur : voici comment je choisi de faire, Les valeur pour top et left positionne le coin gauche d'un élément. La largeur et la hauteur détermine la taille de cet élément.

Si je voulais utiliser right et bottom, je devrais penser en terme de positionnement du coin gauche et du coin droit. Pour moi, cette façon de voir les choses est moins confortable. Mais les deux façons de positionner les éléments sont tout à fait valables.

Problèmes avec le design strictement flexible

Comme vous pouvez le voir ci-haut, lorsque la fenêtre du navigateur est très large (3395 pixels dans ce cas-ci), il n'est pas très facile de lire le contenu de la page.

De la même manière, si la fenêtre du navigateur est très petite, le texte devient illisible et certains éléments sont même incomplet.

Pour tenter de régler ce problème, nous allons ajouter une petite déclaration CSS.

#col1, #col2 {overflow: scroll;}

Mais, vous pouvez voir que le résultat est loin d'être optimum.

Par contre, le fait d'ajouter des barres de défilement pour de très longs paragraphes dans les deux colonnes du centre de la page permettra à l'usager de lire tout le texte.

La capture d'écran ci-haut vous permet de voir le résultat final pour une largeur de fenêtre moyenne. Vous pouvez suivre le lien pour voir la page web et faire vos propres expériences changeant les dimensions de la fenêtre de votre navigateur.

Les inconvénients du design flexibles

La perte de contrôle

Un des inconvénients majeurs pour le designer, c'est que l'approche flexible retire beaucoup de contrôle sur ce que verra l'utilisateur. Il faut donc penser au design non pas en tant qu'un objet fixé sur papier mais bien comme un objet flexible et malléable qui s'adaptera à l'environnement de l'utilisateur.

Et c'est une des raisons principales pourquoi j'aime bien faire le design directement avec du code et un navigateur. Je peux faire des essais, modifier la largeur ou la hauteur de la fenêtre et aller faire les corrections immédiatement dans le code.

Si je devais utiliser une approche conventionnelle et faire des design avec un programme graphique (pour ma part j'utilise GIMP), je devrais faire plusieurs versions du design avant de commencer à coder le HTML et le CSS.

La typographie

Vous l'aurez sûrement remarqué, dans ce design, toutes les zones de la page conservent leurs proportions les unes par rapport aux autres mais l'ensemble s'ajuste à la taille de la page. Dans les situations extrême que nous avons vu plus haut, l'inconvénient est que la typographie ne s'adapte pas à la taille de la fenêtre. Ce qui fait que la largeur de la ligne est plus ou moins confortable pour les tailles de fenêtre moyennes mais le texte devient pratiquement illisible dans les largeurs extrêmes.

Les images

Nous ne l'avons pas vu dans cet article mais le même problème se pose avec les images et les vidéos. Qu'arrive-t-il quand la largeur d'une vidéo dépasse la largeur de la fenêtre du navigateur.

Nous ne verrons pas les solutions à ces problèmes tout de suite. Dans le prochain article, nous verrons comment rendre les images flexibles. Les images portent autant sur les photos qui font partie du texte que les images qui servent de fond.

Finalement, si vous avez des commentaires, des suggestions ou simplement pour partager vos réactions, n'hésitez pas à me contacter

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.