diff --git a/best-practices-WordPress/fiches/20. Concevoir vos sites en Mobile First.md b/best-practices-WordPress/fiches/20. Concevoir vos sites en Mobile First.md new file mode 100644 index 00000000..02a6dd9f --- /dev/null +++ b/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 | diff --git a/best-practices-WordPress/fiches/20. Mobile First.md b/best-practices-WordPress/fiches/20. Mobile First.md deleted file mode 100644 index fa248870..00000000 --- a/best-practices-WordPress/fiches/20. Mobile First.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 20. Concevez 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: - - 1 - En amont - - 2 - Conception / Design -priority_implementation: Fort 👍👍👍 -environmental_impact: Moyen 🌱🌱 -saved_resources: - - Processeur - - Mémoire vive - - Réseau -path: /fiches/20-concevez-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. - -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". - -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.** - -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 !** - -## 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 - -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. - -## Principe de validation - -| Le nombre ... | est inférieur ou égal à | -| ---------------------------------------------------- | :---------------------: | -| de pages ou templates de pages non adaptés au mobile | 0 | 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..763be10f --- /dev/null +++ b/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. 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)