{"id":5336,"date":"2015-09-09T13:37:45","date_gmt":"2015-09-09T11:37:45","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5336"},"modified":"2018-12-11T12:07:03","modified_gmt":"2018-12-11T11:07:03","slug":"methode-natural-flow-first","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/methode-natural-flow-first","title":{"rendered":"La m\u00e9thode Natural Flow First"},"content":{"rendered":"

Il y a quelques semaines, j’ai travaill\u00e9 sur un court projet web : le site internet de la soci\u00e9t\u00e9 WP Media<\/a>. C’est une simple page avec quelques sections typiques et animations subtiles. J’\u00e9tais pr\u00eat \u00e0 le coder \u00e0 la sauce Mobile First<\/em>, et finalement j’ai pens\u00e9 \u00e0 une m\u00e9thode plus naturelle, je l’ai appel\u00e9e (Natural) Flow First.<\/p>\n

<\/p>\n

J\u2019ai fait quelques recherches, en particulier sur Google, pour trouver plus d\u2019informations sur ce genre de m\u00e9thode afin de me documenter sur les pour et contre, voir comment d\u2019autres experts ont pu traiter l\u2019approche, mais aucun expert n\u2019a parl\u00e9 de \u00e7a avant, ou alors pas dans ces termes.<\/p>\n

Quoi qu’il en soit je vais donc expliquer mon approche \u00e0 propos de cette m\u00e9thode Flow First<\/em>, en vous montrant quelques cas pratiques.
\nAvant de commencer, sachez que je parle essentiellement de la partie int\u00e9gration statique (front-end<\/em>) du travail, qui n’est qu’une (grosse) partie (visible) d’un projet web.<\/p>\n

Mobile First VS Flow First<\/h2>\n

Parlons th\u00e9orie (j’aime la th\u00e9orie). Quand vous pensez Mobile First<\/strong>, vous pensez alors aux terminaux que vous ciblez. En d’autres termes, m\u00eame si un \u00e9l\u00e9ment 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\u00e9s par le designer en premier lieu. Et ce m\u00eame si cela ne respecte pas le flux naturel.
\nSeul le terminal compte, et vous commencez par coder pour ce terminal et seulement lui.<\/p>\n

Quand vous commencez \u00e0 penser au flux naturel des \u00e9l\u00e9ments HTML, vous commencez r\u00e9ellement \u00e0 penser Adaptative Web Design. Vous cr\u00e9ez des styles seulement quand les \u00e9l\u00e9ments ont r\u00e9ellement besoin d’un changement de leur comportement naturel. Votre code CSS devient plus l\u00e9ger et plus efficace: chaque terminal re\u00e7oit les styles qui lui vont bien. Pas plus ! Aucun besoin d’\u00e9craser des styles \u00ab\u00a0mobiles\u00a0\u00bb pour appliquer des styles \u00ab\u00a0tablette\u00a0\u00bb ou \u00ab\u00a0bureau\u00a0\u00bb, par exemple.<\/p>\n

Retour au flux naturel<\/h3>\n

Le flux naturel est cette chose bizarre qui fait de l’\u00e9l\u00e9ment HTML un block<\/em> ou inline<\/em>, un table<\/em> ou list<\/em>. Ce flux est d\u00e9fini par le W3C sous le nom plus global de Visual formatting model<\/a> qui inclus box-model<\/em>, la propri\u00e9t\u00e9 display<\/em>, containing block<\/em>, block-level<\/em>, inline-level<\/em>, etc. Donc, le flux naturel est l’encha\u00eenement des comportements naturels qui composent votre document web.<\/p>\n

\"Natural<\/p>\n

Lorsque vous utilisez le concept de Flow first<\/em>, vous respectez le fait que chaque \u00e9l\u00e9ment HTML arbore un comportement qui lui est propre, et poss\u00e8de son propre aspect visuel. Votre contenu devient respectueux de son conteneur, comme l’eau prend la forme de son r\u00e9cipient. Si vous changez la propri\u00e9t\u00e9 du contenu pour seulement un conteneur, c’est comme faire des gla\u00e7ons : certaines tailles ne sont pas compatibles avec le goulot des bouteilles. (et vous seriez oblig\u00e9s de cr\u00e9er d’autres gla\u00e7ons avec d’autres propri\u00e9t\u00e9s de dimensions et formes)<\/p>\n

Soit comme l’eau qui fait son chemin \u00e0 travers les fissures. Ne soit pas trop ferme, mais adapte toi \u00e0 l’objet, et tu devrais trouver un chemin autour ou \u00e0 travers lui. Si rien en toi ne reste rigide, de nouvelles choses vont se r\u00e9v\u00e9ler par elles-m\u00eames.
\n\u2014 Bruce Lee<\/p><\/blockquote>\n

\"Content<\/a><\/p>\n

Analyser chaque situation<\/h3>\n

Lorsque vous utilisez le concept de Mobile First<\/em>, vous appliquez strictement les \u00ab\u00a0styles mobiles\u00a0\u00bb en premier lieu, puis vous cr\u00e9ez des styles sp\u00e9cifiques pour les terminaux plus larges en utilisant les CSS media queries<\/em>. Souvent, cela fonctionne car nous avons moins d’espace en largeur, donc nous composons avec des \u00e9l\u00e9ments les uns en dessous des autres. (J’ai dit \u00ab\u00a0souvent\u00a0\u00bb ;p)<\/p>\n

Quand vous utilisez la bonne vieille m\u00e9thode, et appliquez les CSS media queries comme \u00e9crasements pour des terminaux de plus en plus petits, vous cr\u00e9ez parfois beaucoup trop de r\u00e8gles CSS inutiles.<\/p>\n

Mais parfois, dans les deux cas, vous \u00e9crasez du code que vous avez vous-m\u00eame \u00e9crit, cr\u00e9ant alors des lourdeurs dans votre CSS, le transformant en une chose non maintenable et illisible.
\nFlow First<\/em> est une analyse constante issue d’une meilleure compr\u00e9hension entre les styles \u00e0 appliquer et les styles d\u00e9j\u00e0 existants (naturellement) composant un \u00e9l\u00e9ment.<\/p>\n

Des exemples de Natural Flow First<\/h2>\n

Pour \u00eatre plus consistent, je vous donne quelques exemples utilis\u00e9s lors du d\u00e9veloppement du site web de WP Media<\/a>, le premier projet o\u00f9 j’ai r\u00e9ellement essay\u00e9 d’appliquer le concept de Flow First<\/em>.<\/p>\n

Membre de l’\u00e9quipe<\/h3>\n

Dans cette section du site web, le designer graphique a propos\u00e9 quelque chose dans ce go\u00fbt :<\/p>\n

\"Flow<\/a><\/p>\n

L’\u00e9l\u00e9ment .team-member-photo<\/code> est une simple division contenant une image avec quelques effets visuels. Ici, je porte mon attention uniquement sur cette <div><\/code>, pas sur l’image \u00e0 l’int\u00e9rieur, et encore moins sur le syst\u00e8me de grille pour placer chaque membre.<\/p>\n

Si j’\u00e9tais en phase de code Mobile First<\/em> j’\u00e9crirais :<\/p>\n

.team-member-photo {\r\n\tfloat: left;\r\n\twidth: 100px;\r\n\tmargin-right: 15px;\r\n}\r\n@media (min-width: 640px) {\r\n\t.team-member-photo {\r\n\t\tfloat: none;\r\n\t\tmargin: 0;\r\n\t\twidth: auto;\r\n\t}\r\n}<\/code><\/pre>\n
En \u00e9tant en mode Flow First<\/em>, je code quelque chose comme \u00e7a :<\/p>\n
@media (max-width: 639px) {\r\n\t.team-member-photo {\r\n\t\tfloat: left;\r\n\t\tmargin: 0 15px 0 0;\r\n\t\twidth: 100px;\r\n\t}\r\n}<\/code><\/pre>\n
En effet, dans mon premier bloc de code, la seconde partie avec la media query ne fait que r\u00e9initialiser les valeurs par d\u00e9faut (naturelles) des propri\u00e9t\u00e9s de l’\u00e9l\u00e9ment <div><\/code>.<\/p>\n
Maintenant, si je veux cr\u00e9er le syst\u00e8me de colonnes pour aligner mes membres d’\u00e9quipe, je vais m’y prendre dans l’autre sens, en pensant d’abord au code \u00ab\u00a0mobile\u00a0\u00bb puisque celui-ci est plus respectueux du comportement naturel d’un \u00e9l\u00e9ment <div><\/code>. (\u00e9l\u00e9ments les uns en dessous des autres)<\/p>\n
Le syst\u00e8me de colonnes<\/h3>\n
Cet exemple va vous sembler plus naturel certainement, mais respecte la m\u00eame logique de Flow First<\/em>, m\u00eame s’il correspond \u00e0 l’identique au r\u00e9sultat d’une r\u00e9flexion Mobile First<\/em>.<\/p>\n
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.<\/p>\n
@media (min-width:640px){\r\n\t[class^=\"cols-\"] {\r\n\t\tmargin: 0 -25px;\r\n\t}\r\n\t[class^=\"col-\"] {\r\n\t\tfloat: left;\r\n\t\tpadding: 0 25px;\r\n\t}\r\n\t.col-1-2 {\r\n\t\twidth: 50%;\r\n\t}\r\n\t.col-1-3 { \r\n\t\twidth: 33.33%;\r\n\t}\r\n}<\/code><\/pre>\n
Il n’y a ici besoin de rien d’autre pour mobile, puisque les \u00e9l\u00e9ments s’enchainent naturellement en se pla\u00e7ant les uns en-dessous des autres.<\/p>\n
Flow First<\/em> pour r\u00e9sumer<\/h2>\n
Si je devais r\u00e9sumer cette id\u00e9e de Flow First<\/em>, je dirais qu’il faut garder en t\u00eate les comportements naturels de chaque \u00e9l\u00e9ment et ne les contraindre \u00e0 faire diff\u00e9remment qu’en cas de besoin, et donc avoir une media query<\/em> adapt\u00e9e en max-<\/code> on min-<\/code> suivant le besoin.<\/p>\n
Et vous, comment \u00e9crivez-vous<\/strong> votre code actuellement ?<\/p>\n
Remerciements \u00e0 St\u00e9phanie Walter<\/a> son illustration \u00ab\u00a0Content is like water\u00a0\u00bb<\/p>\n","protected":false},"excerpt":{"rendered":"
Il y a quelques semaines, j’ai travaill\u00e9 sur un court projet web : le site internet de la soci\u00e9t\u00e9 WP Media. C’est une simple page avec quelques sections typiques et animations subtiles. J’\u00e9tais pr\u00eat \u00e0 le coder \u00e0 la sauce Mobile First, et finalement j’ai pens\u00e9 \u00e0 une m\u00e9thode plus naturelle, je l’ai appel\u00e9e (Natural) […]<\/p>\n","protected":false},"author":4,"featured_media":5420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17],"tags":[142,680],"coauthors":[597],"class_list":["post-5336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","tag-css","tag-reflexion"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t