{"id":6391,"date":"2021-10-20T15:25:14","date_gmt":"2021-10-20T13:25:14","guid":{"rendered":"https:\/\/www.luklagroup.com\/sem-categoria\/pensez-web-design-ecologique-ou-encore-eco-conception-dans-vos-projets\/"},"modified":"2021-10-20T15:25:14","modified_gmt":"2021-10-20T13:25:14","slug":"pensez-web-design-ecologique-ou-encore-eco-conception-dans-vos-projets","status":"publish","type":"post","link":"https:\/\/www.luklagroup.com\/pt-pt\/web-marketing-pt-pt\/pensez-web-design-ecologique-ou-encore-eco-conception-dans-vos-projets\/","title":{"rendered":"Pensez Web design \u00e9cologique, ou encore \u00e9co-conception dans vos projets."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong><em>L&#8217;informatique et le monde du digital sont des domaines o\u00f9 la consommation d&#8217;\u00e9nergie augmente tr\u00e8s rapidement.<br>En respectant certains principes du web design \u00e9cologique, il est possible de r\u00e9aliser un site \u00e0 faible consommation sans perdre en qualit\u00e9 d\u2019exp\u00e9rience utilisateur. Digiwin peut vous accompagner dans votre d\u00e9marche d&#8217;\u00e9co-conception. A travers cet article, nous allons d\u00e9couvrir comment le num\u00e9rique nuit \u00e0 l\u2019environnement et quels leviers peuvent \u00eatre mis en place pour r\u00e9duire l\u2019impact \u00e9cologique d\u2019internet dans un futur proche.<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-pullquote is-style-solid-color\"><blockquote><p>Qu&#8217;est-ce que l&#8217;\u00e9co-conception web&nbsp;?<\/p><cite>L&#8217;\u00e9co-conception web, repr\u00e9sente le fait d&#8217;orienter la conception de site web vers des <strong>actions plus responsables \u00e9cologiquement<\/strong>. Les UX\/UI designer peuvent agir pour r\u00e9duire cette consommation en concevant des sites Web \u00e9nerg\u00e9tiquement plus \u00e9conomes en se focalisant sur les performances et la consommation des interfaces.<\/cite><\/blockquote><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/10\/eco-conception-web-etapes-1.jpg\" alt=\"\" class=\"wp-image-3586\"\/><figcaption>L&#8217;\u00e9co-conception web en 6 \u00e9tapes<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Comment les appareils num\u00e9riques nuisent-ils \u00e0 l&#8217;environnement ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aujourd&#8217;hui, <strong>22 milliards d&#8217;appareils num\u00e9riques<\/strong> sont utilis\u00e9s et consomment chacun une part d&#8217;\u00e9nergie ; internet est lui utilis\u00e9 par plus de <strong>4,5 milliards d\u2019internautes<\/strong> connect\u00e9s chaque jour. Avec autant d&#8217;utilisateurs, de donn\u00e9es sollicit\u00e9es et de technologies utilis\u00e9es, la consommation se multiplie \u00e0 grande vitesse.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il faut des clouds num\u00e9riques et des bases de donn\u00e9es cons\u00e9quentes pour faire vivre et stocker toute cette donn\u00e9e que nous consommons tous quotidiennement. L\u00e0 encore, ces serveurs sont aliment\u00e9s en \u00e9lectricit\u00e9. Chaque fichier stock\u00e9 a une influence sur l&#8217;empreinte carbone d&#8217;un individu ou d&#8217;une entreprise.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi faire du web design \u00e9cologique ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans une \u00e9poque o\u00f9 l\u2019humain cherche \u00e0 r\u00e9duire son empreinte sur la plan\u00e8te, le web a son importance car chaque octet consomme de l\u2019\u00e9nergie, du stockage. C&#8217;est aussi le cas pour les terminaux (smartphone, ordinateur, tablette\u2026) qui se d\u00e9gradent avec le temps.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les applications, les sites web et les bases de donn\u00e9es deviennent de plus en plus lourds. Entre les images, les vid\u00e9os, les technologies utilis\u00e9es, quantit\u00e9 d&#8217;\u00e9l\u00e9ments sont susceptibles d&#8217;<strong>entra\u00eener une surconsommation d&#8217;\u00e9nergie et une surproduction de CO<sup>2<\/sup><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lors de la conception de sites web, on pense forc\u00e9ment \u00e0 l\u2019UX, au produit, \u00e0 l\u2019UI, aux fonctionnalit\u00e9s\u2026 mais rarement aux cons\u00e9quences \u00e9cologiques de la conception que l\u2019on r\u00e9alise. Or, si chaque interface web applique des grands principes, il est possible de <strong>r\u00e9duire consid\u00e9rablement<\/strong> l\u2019impact \u00e9cologique du web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment appliquer l&#8217;\u00e9co-conception dans le domaine du web ?<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">#1 Limiter l\u2019utilisation des images, optimiser et r\u00e9duire les vid\u00e9os<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Les images<\/strong>&nbsp;sont omnipr\u00e9sentes dans tous les sites que nous consultons quotidiennement.<br>Cependant, leur accumulation repr\u00e9sente une quantit\u00e9 colossale de donn\u00e9es. Le premier objectif pour optimiser un site et le rendre plus \u00e9conomique et \u00e9cologique sera de <strong>r\u00e9duire la taille des visuels<\/strong> en minimisant leur poids et leur utilisation. Une image peut \u00eatre pr\u00e9sente \u00e0 plusieurs endroits d\u2019un site tout en \u00e9tant trait\u00e9e diff\u00e9remment, avec l\u2019utilisation de filtres CSS par exemple.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/10\/screenshot-tinypng.jpg\" alt=\"\" class=\"wp-image-3562\"\/><figcaption><a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tiny png<\/a> peut compresser rapidement vos images par exemple<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Les vid\u00e9os<\/strong> aussi se sont largement r\u00e9pandues \u00e0 travers la toile. <br>Il faudra aussi veiller \u00e0 v\u00e9rifier la r\u00e9elle utilit\u00e9 de ce type de m\u00e9dia tr\u00e8s gourmand en ressources et s\u2019assurer qu\u2019elles soient <strong>br\u00e8ves<\/strong>, en <strong>basse r\u00e9solution<\/strong> et <strong>compress\u00e9e<\/strong> au maximum. Les vid\u00e9os qui se lancent automatiquement sont \u00e9galement \u00e0 proscrire. Il faut laisser le choix \u00e0 l\u2019internaute de visualiser ou non le m\u00e9dia pour ne pas ajouter un chargement inutile.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">#2 Utiliser le lazy loading pour le chargement vos images et m\u00e9dias<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Une autre astuce peut \u00eatre l\u2019utilisation du lazy loading. Cette solution permet de charger en diff\u00e9r\u00e9 vos visuels en fonction des besoins de l\u2019utilisateur. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En effet, seuls les m\u00e9dias visibles \u00e0 l\u2019\u00e9cran sont charg\u00e9s par le navigateur, les autres apparaissent quand l\u2019utilisateur scroll vers le bas de la page. Avec le lazy loading, vos m\u00e9dias ne sont pas sollicit\u00e9s inutilement. Le chargement diff\u00e9r\u00e9 permet d\u2019<strong>\u00e9conomiser de l\u2019\u00e9nergie<\/strong> et <strong>acc\u00e9l\u00e8re le temps de chargement<\/strong> de votre site internet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/10\/lazy-loading-green-UX.jpg\" alt=\"\" class=\"wp-image-3575\"\/><figcaption>Le lazy loading permet de charger les \u00e9l\u00e9ments quand ils sont visibles \u00e0 l&#8217;\u00e9cran.<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">#3 Utiliser une solution d\u2019h\u00e9bergement \u00e9cologique<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Un h\u00e9bergement \u00ab&nbsp;vert&nbsp;\u00bb peut avoir un impact important pour rendre votre site internet orient\u00e9 &#8220;Green&#8221;. Rapprochez-vous d\u2019h\u00f4tes qui utilisent des <strong>sources d\u2019\u00e9nergies durables<\/strong> (g\u00e9othermie, \u00e9nergie hydro\u00e9lectrique, \u2026). Cela r\u00e9duira consid\u00e9rablement votre impact environnemental.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">#4 Penser \u00e0 recycler vos \u00e9l\u00e9ments<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Pour optimiser le temps de chargement, la conception de votre UX \/ UI devra \u00eatre pens\u00e9e avec une vision \u00ab&nbsp;<strong><a href=\"http:\/\/design.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a><\/strong>&nbsp;\u00bb. L\u2019utilisation de composants que l\u2019on peut int\u00e9grer \u00e0 plusieurs endroits du site internet permet de r\u00e9duire le code CSS en utilisant des blocs types, des styles pr\u00e9d\u00e9finis en amont pour ne pas r\u00e9\u00e9crire un nouveau code pour chaque page et ainsi r\u00e9duire le poids du fichier de style design. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On utilise du code &#8220;minifi\u00e9&#8221; pour gagner de l&#8217;espace en poids de fichiers, technique que l&#8217;on peut utiliser pour le CSS et le JS. Pour le code Javascript, on peut travailler avec <a href=\"http:\/\/vanilla-js.com\/\">Vanilla JS<\/a> par exemple, qui n&#8217;est pas un framework mais veut simplement dire &#8220;\u00e0 nu&#8221;, c&#8217;est du JavaScript sans biblioth\u00e8que, beaucoup plus l\u00e9ger que JQuery. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">On utilise le principe \u00ab\u00a0less is more\u00a0\u00bb, principe que Digiwin a mis en place pour le\u00a0<a href=\"https:\/\/www.loire-atlantique.fr\/44\/accueil\/c_1155312\" target=\"_blank\" rel=\"noreferrer noopener\">D\u00e9partement de la Loire-Atlantique<\/a> avec un <a href=\"http:\/\/design.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design system<\/a> appliqu\u00e9 sur 5 sites web et intranet.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">#5 Minimiser le nombre de polices de caract\u00e8res<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Cela peut para\u00eetre un d\u00e9tail mais la multiplication des polices d\u2019\u00e9criture a \u00e9galement un impact sur la consommation de donn\u00e9es, et par le m\u00eame biais, le temps de chargement de votre page. Limitez-vous \u00e0 <strong>deux ou trois polices maximum<\/strong>. Aussi, n\u2019importez pas toute la famille si vous n\u2019utilisez que le regular et le bold par exemple. Fixez-vous une variable de taille pour vos titres H1, H2 etc et int\u00e9grez-les \u00e0 votre design system pour une meilleure transversalit\u00e9 et partage de votre \u00e9co-conception graphique.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img alt=\"\" decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/10\/polices-green-ux-1600x1113.png\" alt=\"\" class=\"wp-image-3561\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">#6 Penser \u00ab&nbsp;responsive&nbsp;\u00bb&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Depuis plusieurs ann\u00e9es, l\u2019utilisation de nos mobiles est omnipr\u00e9sente dans nos quotidiens. Le trafic venant des ordinateurs n\u2019est plus aussi important qu\u2019avant. Il faut penser obligatoirement les sites de <strong>fa\u00e7on responsive<\/strong>, ces derniers doivent s\u2019adapter au format de l\u2019\u00e9cran. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Une solution qui permet de r\u00e9duire le temps de chargement est d\u2019aller plus loin en cr\u00e9ant un site \u00ab&nbsp;<strong>mobile first<\/strong>&nbsp;\u00bb. Le site internet est alors pens\u00e9 et \u00e9tudi\u00e9 pour le format mobile en premier, les \u00e9l\u00e9ments graphiques sont all\u00e9g\u00e9s, la navigation est claire et fluide. Il est d\u00e9coule un temps de chargement optimis\u00e9 et donc moins de ressources utilis\u00e9es.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">#7 Faciliter la navigation et l&#8217;accessibilit\u00e9&nbsp;<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Penser \u00e0 une <strong>navigation efficace et simple<\/strong>.<br>Avoir une navigation complexe est extr\u00eamement n\u00e9faste pour l\u2019exp\u00e9rience utilisateurs. Plus une personne passe du temps \u00e0 chercher l\u2019information souhait\u00e9e, plus elle navigue sur de nombreuses pages inutiles. Une ergonomie claire et fluide permet de limiter le nombre de pages charg\u00e9es et augmente la satisfaction utilisateur. La chose \u00e0 retenir pour s&#8217;orienter vers l&#8217;\u00e9co-conception web, c&#8217;est de jouer sur la <strong>simplicit\u00e9, le minimalisme et l&#8217;efficacit\u00e9<\/strong>.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Concevoir en prenant en compte<strong> l&#8217;accessibilit\u00e9<\/strong>.<br>Un code propre et adapt\u00e9 aux logiciel d\u2019adaptation aux handicaps permettra au site d\u2019\u00eatre accessible \u00e0 tous. Digiwin, avec ses <strong>experts accessibilit\u00e9 certifi\u00e9s<\/strong> par Accessiweb, accompagne ses clients dans leurs mises en conformit\u00e9 RGAA depuis de tr\u00e8s nombreuses ann\u00e9es. L\u2019objectif d\u2019un <a href=\"https:\/\/digiwin.fr\/actualites\/rgaa-4-mise-en-oeuvre-dun-audit-daccessibilite\/\" target=\"_blank\" rel=\"noreferrer noopener\">site conforme RGAA 4<\/a> est d\u2019offrir des plateformes utilisables de fa\u00e7on optimale par toutes cat\u00e9gories de public, que ce soit par des&nbsp;personnes handicap\u00e9es&nbsp;ou par des&nbsp;populations moins familiaris\u00e9es avec les outils num\u00e9riques.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>La conception \u00e9cologique n\u2019est encore qu\u2019\u00e0 ces d\u00e9buts mais le facteur environnemental est amen\u00e9 \u00e0 prendre une place de plus en plus importante et entre d\u00e9j\u00e0 dans les consciences collectives. L\u2019\u00e9co-conception est \u00e0 prendre en compte en amont d\u2019un projet. Et bien \u00e9videment, il faudra y allouer des ressources et une r\u00e9flexion ad\u00e9quate lors de la phase de d\u00e9veloppement UX.&nbsp;Pour aller plus loin, vous pouvez lire &#8220;<a href=\"https:\/\/livre.fnac.com\/a13370555\/Frederic-Bordage-Ecoconception-web-les-115-bonnes-pratiques\" target=\"_blank\" rel=\"noreferrer noopener\">Ecoconception web : les 115 bonnes pratiques<\/a>&#8221; de <em>Fr\u00e9d\u00e9ric Bordage<\/em>, un r\u00e9f\u00e9rentiel introduisant les concepts de l&#8217;\u00e9co-conception web.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><br>De l\u2019image \u00e0 la navigation, le Webdesign \u00e9cologique propose une r\u00e9flexion afin de r\u00e9duire l\u2019impact \u00e9nerg\u00e9tique et environnemental de nos sites internet et intranet.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;informatique et le monde du digital sont des domaines o\u00f9 la consommation d&#8217;\u00e9nergie augmente tr\u00e8s rapidement.En respectant certains principes du web design \u00e9cologique, il est possible de r\u00e9aliser un site \u00e0 faible consommation sans perdre en qualit\u00e9 d\u2019exp\u00e9rience utilisateur. Digiwin peut vous accompagner dans votre d\u00e9marche d&#8217;\u00e9co-conception. A travers cet article, nous allons d\u00e9couvrir comment [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":6392,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[184,185,192,182],"tags":[227,228],"class_list":["post-6391","post","type-post","status-publish","format-standard","has-post-thumbnail","category-change-adopt-pt-pt","category-digital-workplace-pt-pt","category-managed-services-pt-pt","category-web-marketing-pt-pt","tag-eco-conception-pt-pt","tag-webdesign-pt-pt"],"_links":{"self":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=6391"}],"version-history":[{"count":0,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media\/6392"}],"wp:attachment":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=6391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=6391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=6391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}