Merge pull request #97 from cnumr/feat/57-20-concevoir-en-mobile-first

Feat/57-20-concevoir-en-mobile-first

best-practices-WordPress/fiches/20. Concevoir vos sites en Mobile First.md

@@ -0,0 +1,55 @@
+---
+title: 20. Concevoir vos sites en Mobile First
+people: Renaud H. Yann Gautreau
+scope: Thèmes
+state_validation: TO VALIDATE
+responsible:
+  - Low-code → Freelance et développeur Front-End d'agences
+  - Code(use·ur) → Développeu·se·r
+  - Designeu(se·r)
+lifecycle: Conception & Design
+priority_implementation: Fort 👍👍👍
+environmental_impact: Fort 🌱🌱🌱
+saved_resources:
+  - Processeur
+  - Mémoire vive
+  - Réseau
+path: /fiches/20-concevoir-vos-sites-en-mobile-First
+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|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 ?
+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é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'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
+
+- Sensibilisez vos clients à ce sujet ;
+- 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]].
+
+## 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 à |
+| ---------------------------------------------------- | :---------------------: |
+| de pages ou templates de pages non adaptés au mobile |            0            |

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.

lexique/assets.md

@@ -0,0 +1,9 @@
+---
+title: Assets
+path: /lexique/assets
+toIndex: true
+---
+
+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.

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)