From 0f1fc990cc42b14150454c2db2ce2af0b38ac353 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?hrenaud=20=28NovaGai=CC=88a=29?= Date: Thu, 6 Oct 2022 13:39:29 +0200 Subject: [PATCH 01/13] =?UTF-8?q?feat(Concevez=20vos=20sites=20en=20Mobile?= =?UTF-8?q?=20First):=20Mise=20=C3=A0=20jour=20pour=20matcher=20la=20nomen?= =?UTF-8?q?clature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...20. Concevez vos sites en Mobile First.md} | 32 ++++++++++++------- 1 file changed, 20 insertions(+), 12 deletions(-) rename best-practices-WordPress/fiches/{20. Mobile First.md => 20. Concevez vos sites en Mobile First.md} (92%) diff --git a/best-practices-WordPress/fiches/20. Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md similarity index 92% rename from best-practices-WordPress/fiches/20. Mobile First.md rename to best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index fa248870..56c42e52 100644 --- a/best-practices-WordPress/fiches/20. Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -7,16 +7,14 @@ responsible: - Low-code → Freelance et développeur Front-End d'agences - Code(use·ur) → Développeu·se·r - Designeu(se·r) -lifecycle: - - 1 - En amont - - 2 - Conception / Design +lifecycle: Conception & Design priority_implementation: Fort 👍👍👍 environmental_impact: Moyen 🌱🌱 saved_resources: - Processeur - Mémoire vive - Réseau -path: /fiches/20-concevez-en-mobile-First +path: /fiches/20-concevez-vos-sites-en-mobile-First toIndex: true --- @@ -36,24 +34,34 @@ Cela questionne dès le début les donneurs d'ordres et les forcent à se focali Techniquement, ces sites sont développés en ayant en tête un usage mobile, donc avec une bande passante réduite. **Les sites conçus en Mobile First, auront donc un impact écologique plus réduit vu qu'ils sont, de base, léger, optimisés et répondant à l'essentiel !** -## Exemple - -- les sites d'actualités, blog, etc. qui sont consultés dans les transports. -- les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc. -- ... - ## GreenIT vous conseille -### WordPress Gutenberg +### Solution no-code 🌱 + +#### WordPress Gutenberg Editer vos pages en version mobile (commande Previsualiser, sélectionner Mobile), afin d'avoir la vison optimisée pour vos utilisateurs **L'utilisation du web se faisant maintenant "partout" et "tout le temps", tous les sites sont concernés.** -### Avec les builders de pages +#### Avec les builders de pages Tout comme pour **WordPress Gutenberg**, concevez vos interfaces en sélectionnant l'affichage mobile, puis passer à celui tablette et finissez par le desktop. +### Solution code pas à pas 🌱🌱🌱 + +TODO + +### Solution code 🌱🌱🌱 + +TODO + +## Exemple + +- les sites d'actualités, blog, etc. qui sont consultés dans les transports. +- les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc. +- ... + ## Principe de validation | Le nombre ... | est inférieur ou égal à | From b65d69f575a003a57c18c5e4e901e8e37de429ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?hrenaud=20=28NovaGai=CC=88a=29?= Date: Thu, 6 Oct 2022 17:49:38 +0200 Subject: [PATCH 02/13] feat(20. Concevez vos sites en Mobile First): Normalisation du contenu https://github.com/cnumr/fiches-wordpress-greenit/issues/57 --- .../20. Concevez vos sites en Mobile First.md | 34 ++++++------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index 56c42e52..c6afe80d 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -22,44 +22,32 @@ toIndex: true **Le "Mobile First" est une stratégie de conception qui, due à la surface d'affichage réduite et l'utilisation en mobilité, se focalise sur l'essentiel (du contenu) et sur la rapidité d'affichage (la performance).** Ces design de sites seront ensuite déclinés sur desktop. -Ces contraintes font que ces sites sont, de base optimisés, sans contenus superflus, ayant une navigation adaptée et avec des assets (illustrations, pictos, polices, etc.) adaptés, léger et surtout utilisés pour ajouter de la valeur et pas pour "remplir l'espace". +Ces contraintes font que ces sites sont, de base, optimisés, sans contenus superflus, ayant une navigation adaptée et avec des assets (illustrations, pictos, polices, etc.) adaptés, léger et surtout utilisé pour ajouter de la valeur et pas pour "remplir l'espace". C'est une stratégie de conception en accord avec l'augmentation de l'utilisation du web qui s'effectue aujourd'hui majoritairement sur mobile (applications et sites web confondus). --- -**Pour les concepteurs d'interfaces web, faire du Mobile First évite le casse tête de devoir réagencer tous les éléments que la grande surface d'un écran d'ordinateur à permis d'afficher dans une surface plus réduite.** +**Pour les concepteurs d'interfaces web, faire du Mobile First évite le casse-tête de devoir réagencer tous les éléments que la grande surface d'un écran d'ordinateur a permis d'afficher dans une surface plus réduite.** Cela questionne dès le début les donneurs d'ordres et les forcent à se focaliser sur l'essentiel de leur contenu/informations qu'ils pourront publier et éviter la frustration de devoir, lors de la conception mobile, "écrémer" les interfaces. -Techniquement, ces sites sont développés en ayant en tête un usage mobile, donc avec une bande passante réduite. **Les sites conçus en Mobile First, auront donc un impact écologique plus réduit vu qu'ils sont, de base, léger, optimisés et répondant à l'essentiel !** +Techniquement, ces sites sont développés en ayant en tête un usage mobile, donc avec une bande passante réduite. **Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, léger, optimisés et répondant à l'essentiel !** -## GreenIT vous conseille +## GreenIT vous conseille 🌱🌱🌱 -### Solution no-code 🌱 +- Sensibilisez vos clients à ce sujet ; +- Débutez votre phase design en ne créant que artboards de taille mobile. +- Si vous utilisez du papier, pour vos sessions de réflexion, découpez vos A4 en 3 bandes verticales. -#### WordPress Gutenberg +**L'objectif étant de se restreindre l'espace disponible et de le garder restreint le plus longtemps possible.** -Editer vos pages en version mobile (commande Previsualiser, sélectionner Mobile), afin d'avoir la vison optimisée pour vos utilisateurs - -**L'utilisation du web se faisant maintenant "partout" et "tout le temps", tous les sites sont concernés.** - -#### Avec les builders de pages - -Tout comme pour **WordPress Gutenberg**, concevez vos interfaces en sélectionnant l'affichage mobile, puis passer à celui tablette et finissez par le desktop. - -### Solution code pas à pas 🌱🌱🌱 - -TODO - -### Solution code 🌱🌱🌱 - -TODO +Dans un second temps, déclinez vos écrans vers les versions plus grandes, tablettes puis desktop. ## Exemple -- les sites d'actualités, blog, etc. qui sont consultés dans les transports. -- les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc. +- Les sites d'actualités, blog, etc. qui sont consultés dans les transports. +- Les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc. - ... ## Principe de validation From be4a8b6d5b1e2cebbe3e23d17b7c5905d89a8677 Mon Sep 17 00:00:00 2001 From: hrenaud Date: Sat, 15 Oct 2022 18:04:21 +0200 Subject: [PATCH 03/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md Co-authored-by: Florine Sueur --- .../fiches/20. Concevez vos sites en Mobile First.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index c6afe80d..aed83311 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -22,7 +22,7 @@ toIndex: true **Le "Mobile First" est une stratégie de conception qui, due à la surface d'affichage réduite et l'utilisation en mobilité, se focalise sur l'essentiel (du contenu) et sur la rapidité d'affichage (la performance).** Ces design de sites seront ensuite déclinés sur desktop. -Ces contraintes font que ces sites sont, de base, optimisés, sans contenus superflus, ayant une navigation adaptée et avec des assets (illustrations, pictos, polices, etc.) adaptés, léger et surtout utilisé pour ajouter de la valeur et pas pour "remplir l'espace". +Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des assets (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serez une musique, un discours et un design sans pause pour reprendre son souffle ? C'est une stratégie de conception en accord avec l'augmentation de l'utilisation du web qui s'effectue aujourd'hui majoritairement sur mobile (applications et sites web confondus). From 103756fb260e795ad488a9f34dc10359b9799b2d Mon Sep 17 00:00:00 2001 From: hrenaud Date: Sat, 15 Oct 2022 18:04:39 +0200 Subject: [PATCH 04/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md Co-authored-by: Florine Sueur --- .../fiches/20. Concevez vos sites en Mobile First.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index aed83311..5253c1db 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -24,7 +24,7 @@ toIndex: true Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des assets (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serez une musique, un discours et un design sans pause pour reprendre son souffle ? -C'est une stratégie de conception en accord avec l'augmentation de l'utilisation du web qui s'effectue aujourd'hui majoritairement sur mobile (applications et sites web confondus). +Cette stratégie de conception est en accord avec les usages exponentiels actuels du web qui s'effectue majoritairement sur mobile (applications et sites web confondus). --- From 7ef30a0d6dd1a2e7462ee0d2c9d575dbf6540345 Mon Sep 17 00:00:00 2001 From: hrenaud Date: Sat, 15 Oct 2022 18:05:31 +0200 Subject: [PATCH 05/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md Co-authored-by: Florine Sueur --- .../fiches/20. Concevez vos sites en Mobile First.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index 5253c1db..fefb38f0 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -30,7 +30,7 @@ Cette stratégie de conception est en accord avec les usages exponentiels actuel **Pour les concepteurs d'interfaces web, faire du Mobile First évite le casse-tête de devoir réagencer tous les éléments que la grande surface d'un écran d'ordinateur a permis d'afficher dans une surface plus réduite.** -Cela questionne dès le début les donneurs d'ordres et les forcent à se focaliser sur l'essentiel de leur contenu/informations qu'ils pourront publier et éviter la frustration de devoir, lors de la conception mobile, "écrémer" les interfaces. +Cela questionne dès le début les donneurs d'ordres et les force à se focaliser sur l'essentiel de leur contenu/informations qu'ils pourront publier et éviter la frustration de devoir, lors de la conception mobile, "écrémer" les interfaces. Techniquement, ces sites sont développés en ayant en tête un usage mobile, donc avec une bande passante réduite. **Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, léger, optimisés et répondant à l'essentiel !** From 5eee3663aa1ff54eedf5c296abee2b6fb9af3e9f Mon Sep 17 00:00:00 2001 From: hrenaud Date: Sat, 15 Oct 2022 18:05:41 +0200 Subject: [PATCH 06/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md Co-authored-by: Florine Sueur --- .../fiches/20. Concevez vos sites en Mobile First.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index fefb38f0..c3f86f22 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -37,7 +37,7 @@ Techniquement, ces sites sont développés en ayant en tête un usage mobile, do ## GreenIT vous conseille 🌱🌱🌱 - Sensibilisez vos clients à ce sujet ; -- Débutez votre phase design en ne créant que artboards de taille mobile. +- Débutez votre phase design en ne créant que [[artboards]] de taille mobile ; - Si vous utilisez du papier, pour vos sessions de réflexion, découpez vos A4 en 3 bandes verticales. **L'objectif étant de se restreindre l'espace disponible et de le garder restreint le plus longtemps possible.** From 2a3ff644380d9ea65e8d6d7863292e9a17e30119 Mon Sep 17 00:00:00 2001 From: hrenaud Date: Mon, 24 Oct 2022 08:10:54 +0200 Subject: [PATCH 07/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md Co-authored-by: dNicolle --- .../fiches/20. Concevez vos sites en Mobile First.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index c3f86f22..66cc82de 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -22,7 +22,7 @@ toIndex: true **Le "Mobile First" est une stratégie de conception qui, due à la surface d'affichage réduite et l'utilisation en mobilité, se focalise sur l'essentiel (du contenu) et sur la rapidité d'affichage (la performance).** Ces design de sites seront ensuite déclinés sur desktop. -Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des assets (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serez une musique, un discours et un design sans pause pour reprendre son souffle ? +Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des assets (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serait une musique, un discours et un design sans pause pour reprendre son souffle ? Cette stratégie de conception est en accord avec les usages exponentiels actuels du web qui s'effectue majoritairement sur mobile (applications et sites web confondus). From e53febffd1a412516f732d464659db19186999c6 Mon Sep 17 00:00:00 2001 From: hrenaud Date: Mon, 24 Oct 2022 08:11:06 +0200 Subject: [PATCH 08/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md Co-authored-by: dNicolle --- .../fiches/20. Concevez vos sites en Mobile First.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index 66cc82de..181ae162 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -40,7 +40,7 @@ Techniquement, ces sites sont développés en ayant en tête un usage mobile, do - Débutez votre phase design en ne créant que [[artboards]] de taille mobile ; - Si vous utilisez du papier, pour vos sessions de réflexion, découpez vos A4 en 3 bandes verticales. -**L'objectif étant de se restreindre l'espace disponible et de le garder restreint le plus longtemps possible.** +**L'objectif étant de se restreindre à l'espace disponible et de le garder restreint le plus longtemps possible.** Dans un second temps, déclinez vos écrans vers les versions plus grandes, tablettes puis desktop. From bfdeb1b603a7502b80f0d00f708dba15f893259f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?hrenaud=20=28NovaGai=CC=88a=29?= Date: Mon, 24 Oct 2022 08:59:59 +0200 Subject: [PATCH 09/13] Ajout au lexique --- lexique/artboards.md | 9 +++++++++ lexique/assets.md | 9 +++++++++ lexique/responsive.md | 9 +++++++++ 3 files changed, 27 insertions(+) create mode 100644 lexique/artboards.md create mode 100644 lexique/assets.md create mode 100644 lexique/responsive.md diff --git a/lexique/artboards.md b/lexique/artboards.md new file mode 100644 index 00000000..aff39322 --- /dev/null +++ b/lexique/artboards.md @@ -0,0 +1,9 @@ +--- +title: Artboards, Plans de travail +path: /lexique/assets +toIndex: true +--- + +Les **Artsboards** ou **Plans de travail** sont l'équivalent de la feuille, de la planche a dessin du web designer. + +Ils ont la taille de l'écran cible (desktop, tablette, mobile) et le designer va y poser tous les composants de la page web. diff --git a/lexique/assets.md b/lexique/assets.md new file mode 100644 index 00000000..6da9ea26 --- /dev/null +++ b/lexique/assets.md @@ -0,0 +1,9 @@ +--- +title: Assets +path: /lexique/assets +toIndex: true +--- + +Les assets sont des fichiers utillisés par votre site web et qui ne sont pas du code (.php, .js, html, etc.). + +Ce sont plutôt des fichiers comme les images, les icônes, les polices de caractères, etc. diff --git a/lexique/responsive.md b/lexique/responsive.md new file mode 100644 index 00000000..77783197 --- /dev/null +++ b/lexique/responsive.md @@ -0,0 +1,9 @@ +--- +title: Responsive Web Design +path: /lexique/responsive +toIndex: true +--- + +Un site web réactif (RWD, de l’anglais responsive web design : conception de sites web réactifs) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable sur des écrans de tailles très différentes. L'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphone, tablettes, télévision…) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l'expérience utilisateur, tant en lecture qu'en navigation. Un site web réactif est un exemple de plasticité des interfaces. + +source : [Wikipedia](https://fr.wikipedia.org/wiki/Site_web_r%C3%A9actif) From 77d807857dcdba3a6ef4629fd34051ce60d65aff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?hrenaud=20=28NovaGai=CC=88a=29?= Date: Mon, 24 Oct 2022 09:00:25 +0200 Subject: [PATCH 10/13] fusion de deux paragraphe --- .../fiches/20. Concevez vos sites en Mobile First.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index 181ae162..9e02f2c2 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -20,9 +20,12 @@ toIndex: true ## Sujet -**Le "Mobile First" est une stratégie de conception qui, due à la surface d'affichage réduite et l'utilisation en mobilité, se focalise sur l'essentiel (du contenu) et sur la rapidité d'affichage (la performance).** Ces design de sites seront ensuite déclinés sur desktop. +**Le "Mobile First" est une stratégie de conception qui, due à la surface d'affichage réduite et l'utilisation en mobilité, se focalise sur l'essentiel (du contenu) et sur la rapidité d'affichage (la performance).** Ces design de sites seront ensuite déclinés sur [[desktop|Responsive]]. -Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des assets (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serait une musique, un discours et un design sans pause pour reprendre son souffle ? +Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des [[assets]] (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serait une musique, un discours et un design sans pause pour reprendre son souffle ? +Techniquement, ces sites utiliseront une bande passante réduite. + +**Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, léger, optimisés et répondant à l'essentiel !** Cette stratégie de conception est en accord avec les usages exponentiels actuels du web qui s'effectue majoritairement sur mobile (applications et sites web confondus). @@ -32,8 +35,6 @@ Cette stratégie de conception est en accord avec les usages exponentiels actuel Cela questionne dès le début les donneurs d'ordres et les force à se focaliser sur l'essentiel de leur contenu/informations qu'ils pourront publier et éviter la frustration de devoir, lors de la conception mobile, "écrémer" les interfaces. -Techniquement, ces sites sont développés en ayant en tête un usage mobile, donc avec une bande passante réduite. **Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, léger, optimisés et répondant à l'essentiel !** - ## GreenIT vous conseille 🌱🌱🌱 - Sensibilisez vos clients à ce sujet ; From ce5e7e0bb6ff338df2762aee8178973a6aa26953 Mon Sep 17 00:00:00 2001 From: Florine Sueur Date: Tue, 25 Oct 2022 10:50:57 +0200 Subject: [PATCH 11/13] Update best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md --- .../fiches/20. Concevez vos sites en Mobile First.md | 1 - 1 file changed, 1 deletion(-) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md index 9e02f2c2..13047808 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md @@ -49,7 +49,6 @@ Dans un second temps, déclinez vos écrans vers les versions plus grandes, tabl - Les sites d'actualités, blog, etc. qui sont consultés dans les transports. - Les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc. -- ... ## Principe de validation From 622588934b9282abb13d161bf90d3b36c750b42f Mon Sep 17 00:00:00 2001 From: Florine Sueur Date: Tue, 25 Oct 2022 10:57:05 +0200 Subject: [PATCH 12/13] Update and rename 20. Concevez vos sites en Mobile First.md to 20. Concevoir vos sites en Mobile First.md --- ...0. Concevoir vos sites en Mobile First.md} | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) rename best-practices-WordPress/fiches/{20. Concevez vos sites en Mobile First.md => 20. Concevoir vos sites en Mobile First.md} (81%) diff --git a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevoir vos sites en Mobile First.md similarity index 81% rename from best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md rename to best-practices-WordPress/fiches/20. Concevoir vos sites en Mobile First.md index 13047808..02a6dd9f 100644 --- a/best-practices-WordPress/fiches/20. Concevez vos sites en Mobile First.md +++ b/best-practices-WordPress/fiches/20. Concevoir vos sites en Mobile First.md @@ -1,5 +1,5 @@ --- -title: 20. Concevez vos sites en Mobile First +title: 20. Concevoir vos sites en Mobile First people: Renaud H. Yann Gautreau scope: Thèmes state_validation: TO VALIDATE @@ -9,12 +9,12 @@ responsible: - Designeu(se·r) lifecycle: Conception & Design priority_implementation: Fort 👍👍👍 -environmental_impact: Moyen 🌱🌱 +environmental_impact: Fort 🌱🌱🌱 saved_resources: - Processeur - Mémoire vive - Réseau -path: /fiches/20-concevez-vos-sites-en-mobile-First +path: /fiches/20-concevoir-vos-sites-en-mobile-First toIndex: true --- @@ -25,33 +25,31 @@ toIndex: true Ainsi un site pensé "Mobile First" est, de base, optimisé, sans contenus superflus, ayant une navigation claire et adaptée et avec des [[assets]] (illustrations, pictogrammes, polices, photographies, etc.) adaptés, plus légers et surtout utilisés pour ajouter une réelle plus-value pour l'utilisateur et non pour "remplir l'espace blanc" nécessaire à la bonne respiration du design. Que serait une musique, un discours et un design sans pause pour reprendre son souffle ? Techniquement, ces sites utiliseront une bande passante réduite. -**Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, léger, optimisés et répondant à l'essentiel !** +**Les sites conçus en Mobile First, auront de ce fait un impact écologique plus réduit comme ils sont, de base, légers, optimisés et répondant à l'essentiel !** -Cette stratégie de conception est en accord avec les usages exponentiels actuels du web qui s'effectue majoritairement sur mobile (applications et sites web confondus). - ---- +Cette stratégie de conception est en accord avec les usages exponentiels actuels du web qui s'effectuent majoritairement sur mobile (applications et sites web confondus). **Pour les concepteurs d'interfaces web, faire du Mobile First évite le casse-tête de devoir réagencer tous les éléments que la grande surface d'un écran d'ordinateur a permis d'afficher dans une surface plus réduite.** Cela questionne dès le début les donneurs d'ordres et les force à se focaliser sur l'essentiel de leur contenu/informations qu'ils pourront publier et éviter la frustration de devoir, lors de la conception mobile, "écrémer" les interfaces. -## GreenIT vous conseille 🌱🌱🌱 +## GreenIT vous conseille - Sensibilisez vos clients à ce sujet ; -- Débutez votre phase design en ne créant que [[artboards]] de taille mobile ; +- Débutez votre phase design en ne créant que des [[artboards]] de taille mobile ; - Si vous utilisez du papier, pour vos sessions de réflexion, découpez vos A4 en 3 bandes verticales. **L'objectif étant de se restreindre à l'espace disponible et de le garder restreint le plus longtemps possible.** -Dans un second temps, déclinez vos écrans vers les versions plus grandes, tablettes puis desktop. +Dans un second temps, déclinez vos écrans vers les versions plus grandes, tablettes puis [[desktop]]. -## Exemple +## Exemples - Les sites d'actualités, blog, etc. qui sont consultés dans les transports. - Les sites principalement utilisés en mobilité pour trouver une information répondant au besoin immédiat, comme ceux de la restauration, des boutiques physiques ou digitales, contenant des informations touristiques, etc. ## Principe de validation -| Le nombre ... | est inférieur ou égal à | +| Le nombre | est inférieur ou égal à | | ---------------------------------------------------- | :---------------------: | | de pages ou templates de pages non adaptés au mobile | 0 | From a76b531ee89f13299b69eff6c00dbf655b2cf08c Mon Sep 17 00:00:00 2001 From: Florine Sueur Date: Tue, 25 Oct 2022 10:59:30 +0200 Subject: [PATCH 13/13] Update lexique/assets.md --- lexique/assets.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lexique/assets.md b/lexique/assets.md index 6da9ea26..763be10f 100644 --- a/lexique/assets.md +++ b/lexique/assets.md @@ -4,6 +4,6 @@ path: /lexique/assets toIndex: true --- -Les assets sont des fichiers utillisés par votre site web et qui ne sont pas du code (.php, .js, html, etc.). +Les assets sont des fichiers utilisés par votre site web et qui ne sont pas du code (.php, .js, html, etc.). Ce sont plutôt des fichiers comme les images, les icônes, les polices de caractères, etc.