La méthode Natural Flow First

Also available in: English

Il y a quelques semaines, j’ai travaillé sur un court projet web : le site internet de la société WP Media. C’est une simple page avec quelques sections typiques et animations subtiles. J’étais prêt à le coder à la sauce Mobile First, et finalement j’ai pensé à une méthode plus naturelle, je l’ai appelée (Natural) Flow First.

J’ai fait quelques recherches, en particulier sur Google, pour trouver plus d’informations sur ce genre de méthode afin de me documenter sur les pour et contre, voir comment d’autres experts ont pu traiter l’approche, mais aucun expert n’a parlé de ça avant, ou alors pas dans ces termes.

Quoi qu’il en soit je vais donc expliquer mon approche à propos de cette méthode Flow First, en vous montrant quelques cas pratiques.
Avant de commencer, sachez que je parle essentiellement de la partie intégration statique (front-end) du travail, qui n’est qu’une (grosse) partie (visible) d’un projet web.

Mobile First VS Flow First

Parlons théorie (j’aime la théorie). Quand vous pensez Mobile First, vous pensez alors aux terminaux que vous ciblez. En d’autres termes, même si un élément HTML a un comportement naturel, vous allez faire en sorte que celui-ci soit respectueux de la mise en page et des effets graphiques proposés par le designer en premier lieu. Et ce même si cela ne respecte pas le flux naturel.
Seul le terminal compte, et vous commencez par coder pour ce terminal et seulement lui.

Quand vous commencez à penser au flux naturel des éléments HTML, vous commencez réellement à penser Adaptative Web Design. Vous créez des styles seulement quand les éléments ont réellement besoin d’un changement de leur comportement naturel. Votre code CSS devient plus léger et plus efficace: chaque terminal reçoit les styles qui lui vont bien. Pas plus ! Aucun besoin d’écraser des styles « mobiles » pour appliquer des styles « tablette » ou « bureau », par exemple.

Retour au flux naturel

Le flux naturel est cette chose bizarre qui fait de l’élément HTML un block ou inline, un table ou list. Ce flux est défini par le W3C sous le nom plus global de Visual formatting model qui inclus box-model, la propriété display, containing block, block-level, inline-level, etc. Donc, le flux naturel est l’enchaînement des comportements naturels qui composent votre document web.

Lorsque vous utilisez le concept de Flow first, vous respectez le fait que chaque élément HTML arbore un comportement qui lui est propre, et possède son propre aspect visuel. Votre contenu devient respectueux de son conteneur, comme l’eau prend la forme de son récipient. Si vous changez la propriété du contenu pour seulement un conteneur, c’est comme faire des glaçons : certaines tailles ne sont pas compatibles avec le goulot des bouteilles. (et vous seriez obligés de créer d’autres glaçons avec d’autres propriétés de dimensions et formes)

Soit comme l’eau qui fait son chemin à travers les fissures. Ne soit pas trop ferme, mais adapte toi à l’objet, et tu devrais trouver un chemin autour ou à travers lui. Si rien en toi ne reste rigide, de nouvelles choses vont se révéler par elles-mêmes.
— Bruce Lee

Analyser chaque situation

Lorsque vous utilisez le concept de Mobile First, vous appliquez strictement les « styles mobiles » en premier lieu, puis vous créez des styles spécifiques pour les terminaux plus larges en utilisant les CSS media queries. Souvent, cela fonctionne car nous avons moins d’espace en largeur, donc nous composons avec des éléments les uns en dessous des autres. (J’ai dit « souvent » ;p)

Quand vous utilisez la bonne vieille méthode, et appliquez les CSS media queries comme écrasements pour des terminaux de plus en plus petits, vous créez parfois beaucoup trop de règles CSS inutiles.

Mais parfois, dans les deux cas, vous écrasez du code que vous avez vous-même écrit, créant alors des lourdeurs dans votre CSS, le transformant en une chose non maintenable et illisible.
Flow First est une analyse constante issue d’une meilleure compréhension entre les styles à appliquer et les styles déjà existants (naturellement) composant un élément.

Des exemples de Natural Flow First

Pour être plus consistent, je vous donne quelques exemples utilisés lors du développement du site web de WP Media, le premier projet où j’ai réellement essayé d’appliquer le concept de Flow First.

Membre de l’équipe

Dans cette section du site web, le designer graphique a proposé quelque chose dans ce goût :

L’élément .team-member-photo est une simple division contenant une image avec quelques effets visuels. Ici, je porte mon attention uniquement sur cette <div>, pas sur l’image à l’intérieur, et encore moins sur le système de grille pour placer chaque membre.

Si j’étais en phase de code Mobile First j’écrirais :

.team-member-photo {
	float: left;
	width: 100px;
	margin-right: 15px;
}
@media (min-width: 640px) {
	.team-member-photo {
		float: none;
		margin: 0;
		width: auto;
	}
}

En étant en mode Flow First, je code quelque chose comme ça :

@media (max-width: 639px) {
	.team-member-photo {
		float: left;
		margin: 0 15px 0 0;
		width: 100px;
	}
}

En effet, dans mon premier bloc de code, la seconde partie avec la media query ne fait que réinitialiser les valeurs par défaut (naturelles) des propriétés de l’élément <div>.

Maintenant, si je veux créer le système de colonnes pour aligner mes membres d’équipe, je vais m’y prendre dans l’autre sens, en pensant d’abord au code « mobile » puisque celui-ci est plus respectueux du comportement naturel d’un élément <div>. (éléments les uns en dessous des autres)

Le système de colonnes

Cet exemple va vous sembler plus naturel certainement, mais respecte la même logique de Flow First, même s’il correspond à l’identique au résultat d’une réflexion Mobile First.

Sur ce site, nous avons fait le choix de ne pas avoir de colonnes avant 640 pixels de large, ce qui nous donne un code proche de celui-ci.

@media (min-width:640px){
	[class^="cols-"] {
		margin: 0 -25px;
	}
	[class^="col-"] {
		float: left;
		padding: 0 25px;
	}
	.col-1-2 {
		width: 50%;
	}
	.col-1-3 { 
		width: 33.33%;
	}
}

Il n’y a ici besoin de rien d’autre pour mobile, puisque les éléments s’enchainent naturellement en se plaçant les uns en-dessous des autres.

Flow First pour résumer

Si je devais résumer cette idée de Flow First, je dirais qu’il faut garder en tête les comportements naturels de chaque élément et ne les contraindre à faire différemment qu’en cas de besoin, et donc avoir une media query adaptée en max- on min- suivant le besoin.

Et vous, comment écrivez-vous votre code actuellement ?

Remerciements à Stéphanie Walter son illustration « Content is like water »