A text-based bookmark manager rendered in a web page
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

264 lines
26 KiB

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Le CMS Kirby pour nos projets écoresponsables - Écoconception</title>
<meta name="description" content="Cet article décrit notre démarche dans le choix du CMS Kirby pour la réalisation de nos projets écoresponsables." />
<link rel="canonical" href="https://www.pikselkraft.com/blog/pourquoi-le-cms-kirby-pour-nos-projets-ecoresponsables" />
<link rel="alternate" type="application/rss+xml" title="Nos derniers articles" href="https://www.pikselkraft.com/feed"/>
<link rel="alternate" hreflang="en" href="https://www.pikselkraft.com/en/blog/kirby-cms-and-sustainable-web-design" />
<link rel="alternate" hreflang="pl" href="https://www.pikselkraft.com/pl/blog/pourquoi-le-cms-kirby-pour-nos-projets-ecoresponsables" />
<!-- CSS -->
<link href="https://www.pikselkraft.com/assets/css/style.min.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="https://www.pikselkraft.com/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="180x180" href="https://www.pikselkraft.com/assets/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.pikselkraft.com/assets/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.pikselkraft.com/assets/fav/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="https://www.pikselkraft.com/assets/fav/safari-pinned-tab.svg" color="#303E5A">
<meta name="msapplication-TileColor" content="#303E5A">
<meta name="theme-color" content="#303E5A">
<!-- Social tags -->
<meta property="og:type" content="website">
<meta property="og:title" content="Le CMS Kirby pour nos projets écoresponsables - Écoconception">
<meta property="og:description" content="Cet article décrit notre démarche dans le choix du CMS Kirby pour la réalisation de nos projets écoresponsables.">
<meta property="og:url" content="https://www.pikselkraft.com/blog/pourquoi-le-cms-kirby-pour-nos-projets-ecoresponsables">
<meta property="og:image" content="https://www.pikselkraft.com/media/site/1c7a6b9896-1668083511/pikselkraft-connexion-lowtech.png"/>
<!-- Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@pikselkraft">
<meta name="twitter:title" content="Le CMS Kirby pour nos projets écoresponsables - Écoconception" />
<meta name="twitter:description" content="Cet article décrit notre démarche dans le choix du CMS Kirby pour la réalisation de nos projets écoresponsables." />
<meta name="twitter:image" content="https://www.pikselkraft.com/media/site/1c7a6b9896-1668083511/pikselkraft-connexion-lowtech.png" />
<meta name="twitter:image:alt" content="">
<link rel="me" href="https://twitter.com/pikselkraft">
<link rel="me" href="https://mastodon.zaclys.com/@pikselkraft">
<link rel="me" href="https://mamot.fr/web/accounts/239164">
<link rel="me" href="https://mastodon.zaclys.com/@pikselkraft">
<link rel="author" href="humans.txt" />
</head>
<body class="bg-piks-grey">
<header class="header-top bg-piks-green ">
<div id="top" class="top_container">
<a rel="nofollow" href="#hero" class="skip-main">Visiter le contenu principal directement</a>
<a rel="nofollow" href="mailto:contact@pikselkraft.com" class="skip-main">Nous envoyer un e-mail directement</a>
<a class="logo-svg" href="https://www.pikselkraft.com" title="Lien vers l'accueil"><svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 136.3 21.2" aria-hidden="true">
<style>.logo-st0{fill:#1d4229}</style><path class="logo-st0" d="M0 15.1h5.8v5.8H0zM20.8 3.1c1.1.6 2 1.3 2.6 2.3.6 1 .9 2.2.9 3.6s-.3 2.6-.9 3.6c-.6 1-1.5 1.8-2.6 2.3-1.1.5-2.5.8-4.1.8h-3.5V21h-4V2.3h7.6c1.5 0 2.9.3 4 .8zm-1.5 8.4c.6-.6 1-1.4 1-2.4s-.3-1.9-1-2.4c-.6-.6-1.6-.8-2.8-.8h-3.3v6.5h3.3c1.3-.1 2.2-.4 2.8-.9zM25.6 4c-.5-.4-.7-1-.7-1.7s.2-1.2.7-1.7c.4-.4 1-.6 1.7-.6s1.3.2 1.8.6c.5.4.7 1 .7 1.6 0 .7-.2 1.3-.7 1.7-.5.5-1 .7-1.8.7-.7 0-1.3-.2-1.7-.6zm-.2 2.6h3.9V21h-3.9V6.6zM37.1 15.4l-1.9 2V21h-3.9V1.2h3.9v11.2l5.7-5.8h4.7L40 12.7l6.1 8.3h-4.7l-4.3-5.6z"/><path class="logo-st0" d="M48.6 20.8c-1.1-.3-1.9-.7-2.6-1.1l1.3-3c.6.4 1.3.7 2.2 1 .9.3 1.7.4 2.5.4 1.7 0 2.5-.4 2.5-1.3 0-.4-.2-.7-.7-.9-.5-.2-1.1-.3-2.1-.5-1.1-.2-2-.4-2.7-.6-.7-.2-1.3-.6-1.9-1.2-.5-.6-.8-1.4-.8-2.5 0-.9.2-1.7.7-2.4.5-.7 1.2-1.2 2.2-1.6.9-.4 2.1-.6 3.3-.6 1 0 1.9.1 2.8.3.9.2 1.7.5 2.3.9l-1.3 3c-1.2-.7-2.5-1.1-3.9-1.1-.8 0-1.5.1-1.9.4-.4.2-.6.6-.6 1s.2.8.7.9 1.2.3 2.2.5c1.1.2 2 .4 2.7.6.7.2 1.3.6 1.8 1.2s.8 1.4.8 2.5c0 .9-.3 1.7-.8 2.4s-1.2 1.2-2.2 1.6c-1 .4-2.1.6-3.4.6-1-.1-2.1-.3-3.1-.5zM72.7 15H62.5c.2.9.6 1.6 1.3 2.1.7.5 1.5.8 2.6.8.7 0 1.3-.1 1.9-.3.5-.2 1-.6 1.5-1.1l2.1 2.4c-1.3 1.5-3.1 2.3-5.6 2.3-1.5 0-2.9-.3-4-.9-1.2-.6-2.1-1.5-2.7-2.6-.6-1.1-1-2.4-1-3.8s.3-2.7.9-3.8c.6-1.1 1.5-2 2.6-2.6 1.1-.6 2.3-.9 3.7-.9 1.3 0 2.5.3 3.6.9 1.1.6 1.9 1.5 2.5 2.6.6 1.1.9 2.4.9 3.9 0-.1 0 .3-.1 1zm-9.1-4.6c-.6.5-1 1.3-1.1 2.2h6.6c-.1-.9-.5-1.6-1.1-2.2-.6-.5-1.3-.8-2.2-.8-.9 0-1.6.2-2.2.8zM73.8 1.2h3.9V21h-3.9V1.2zM85.7 15.4l-1.9 2V21h-3.9V1.2h3.9v11.2l5.7-5.8h4.7l-5.6 6.1 6.1 8.3H90l-4.3-5.6z"/><path class="logo-st0" d="M100.3 7c.8-.4 1.7-.5 2.7-.5v3.8c-.4 0-.7-.1-.9-.1-1.1 0-2 .3-2.6 1-.6.7-1 1.7-1 3V21h-3.9V6.6h3.7v1.9c.6-.7 1.3-1.2 2-1.5zM114 8c1.1 1.1 1.7 2.7 1.7 4.8V21H112v-1.8c-.7 1.3-2.1 2-4.1 2-1 0-1.9-.2-2.7-.6-.8-.4-1.3-.9-1.7-1.5-.4-.7-.6-1.4-.6-2.2 0-1.3.5-2.4 1.4-3.1.9-.8 2.4-1.1 4.4-1.1h3.1c0-.9-.3-1.6-.8-2.1s-1.3-.7-2.3-.7c-.7 0-1.4.1-2.1.4-.7.2-1.3.6-1.8 1l-1.4-2.9c.7-.6 1.6-1 2.6-1.3 1-.3 2.1-.5 3.2-.5 2.1-.2 3.7.4 4.8 1.4zm-3.3 9.9c.5-.3.9-.8 1.1-1.5V15h-2.7c-1.6 0-2.4.6-2.4 1.7 0 .5.2 1 .6 1.3.4.3.9.5 1.6.5.7-.1 1.3-.3 1.8-.6zM122.2 7h3.5v3.2h-3.4V21h-3.9V10.2h-2.1V7h2.1v-.7c0-1.6.5-2.9 1.4-3.9.9-1 2.2-1.4 3.9-1.4.6 0 1.1.1 1.7.2.5.1 1 .3 1.3.6l-1 3c-.5-.3-1-.5-1.6-.5-1.2 0-1.8.7-1.8 2.1V7z"/><path class="logo-st0" d="M136.3 20.3c-.4.3-.9.5-1.4.7s-1.1.2-1.8.2c-1.6 0-2.8-.4-3.7-1.3-.9-.9-1.3-2.1-1.3-3.8v-5.9H126V7h2.1V3.5h3.9V7h3.4v3.2H132V16c0 .6.1 1.1.4 1.4.3.3.7.5 1.2.5.6 0 1.1-.2 1.6-.5l1.1 2.9z"/></svg></a>
<nav class="menu" aria-label="menu principal">
<input type="checkbox" id="burgerbutton"/>
<label for="burgerbutton" class="burgerimage" title="Navigation">&#x2630; MENU</label>
<ul class="menu__list">
<li class="menu__item">
<a
href="https://www.pikselkraft.com/nos-services"
hreflang="fr"
title="Services">Services</a>
</li>
<li class="menu__item">
<a
href="https://www.pikselkraft.com/projets"
hreflang="fr"
title="Projets">Projets</a>
</li>
<li class="menu__item">
<a class="active"
href="https://www.pikselkraft.com/blog"
hreflang="fr"
title="Publications">Publications</a>
</li>
<li class="menu__item">
<a class="active"
href="#section-contact"
title="Lien vers la section de contact">Contact</a>
</li>
<span class="languages">
<li>
<a
href="https://www.pikselkraft.com/en/blog/kirby-cms-and-sustainable-web-design"
hreflang="en"
class="lang__link lang__link1" >
EN </a>
</li>
<li>
<a
href="https://www.pikselkraft.com/pl/tlumaczenie-w-toku"
class="lang__link lang__link2"
hreflang="pl">
PL </a>
</li>
</span>
</ul>
</nav>
</div>
<div class="bg-piks-green bg-hero-grey ">
<div id="hero" class="hero">
<div class="baseline
bg-piks-grey
quote-
baseline--article
piks-blue">
<h1>Pourquoi le CMS Kirby pour nos projets écoresponsables ?</h1>
</div>
</div>
</div></header><main class="article block-0">
<article class="article__container">
<header class="article__header">
<time class="article__published" datetime="2021-09-27">Publié le 27/09/2021</time>
<time class="article__lastupdate" datetime="2022-11-10">Dernière modification le 10/11/2022</time>
</header>
<section class="article__content stack">
<p><em>Cet article décrit notre démarche dans le choix du <a href="https://getkirby.com/" rel="noreferrer" target="_blank">CMS Kirby</a>, il n'est en aucun cas un exemple qui s'applique à toutes les situations. Le choix d'un outil est un processus long qui demande de prendre de nombreux aspects en compte (technique, sociétal, humain et environnemental).</em></p>
<p>La mention CMS (content management system) sera privilégiée à la version française système de gestion de contenu, ce terme étant plus répandu.</p>
<h2>Le point de départ : le contexte est les besoins</h2>
<p>Avant de choisir un outil, il convient de définir les objectifs de cet outil. Il faut déterminer les besoins auxquels l'outil doit répondre. Il est aussi important de prendre en compte <strong>les externalités positives et négatives</strong> d'un outil (impacts sociaux, environnementaux, etc.).</p>
<p>Notre besoin principal est de concevoir <strong>des sites web écoconçu</strong> avec un <strong>poids par page limité</strong> (de 100 à 250 ko). En plus de cette limite, nos sites doivent être accessibles dans <strong>des conditions contraignantes</strong> (réseau internet à faible débit, appareils anciens). Nous devons favoriser l'inclusivité. c'est pourquoi l'ergonomie et le design sont des points cruciaux pour nos projets. À cela s'ajoute l'importance de <strong>protéger la vie privée et de privilégier des acteurs éthiques</strong> (exclusion des <abbr title="Google Apple Facebook Amazon Microsoft">GAFAM</abbr>). Nous avons des services complémentaires pour conseiller, former et configurer des services éthiques. Ce champ d'action est divers et demande déjà des compétences dans des domaines très variés, d'où la taille restreinte de nos projets (sites vitrines).</p>
<figure><img alt="Capture d'écran du site internet thegreenroom.fr avec la mention du poids d'une page. Le poids par page est de 100ko.Capture d'écran du site internet thegreenroom.fr avec la mention du poids d'une page. Le poids par page est de 100ko." src="https://www.pikselkraft.com/media/pages/blog/pourquoi-le-cms-kirby-pour-nos-projets-ecoresponsables/6a1e4f59c1-1668083539/greenroom-poids-page.jpg"><figcaption>La limite de poids est une donnée centrale dans notre processus.</figcaption></figure>
<p>Nous sommes une petite équipe, nous ne pouvons pas réaliser des projets trop conséquents à moins de s'associer à d'autres prestataires. Nous avons choisi d'avoir un champ d'action limité pour se concentrer sur la qualité. Par conséquent, nous travaillons avec des structures qui ont aussi des engagements éthiques. Ce point n'est pas déterminant pour le choix d'une technique, mais il augmente la cohérence de nos projets avec nos valeurs.</p>
<p>Notre processus est très collaboratif, nous commençons toujours avec une <strong>phase de recherche en design</strong> qui nous amène à travailler sur l'organisation du contenu et l'arborescence. Après cette étape, nous démarrons le travail sur le style graphique, l'ergonomie et le web design. Une fois cette phase validée, nous démarrons le travail de développement avec un prototype qui sert pour la phase de test. Nous allons voir pourquoi le processus de création de site avec Kirby s'adapte très bien à notre manière de travailler.</p>
<h2>Le CMS Kirby</h2>
<p><strong>Kirby est un CMS flat-file</strong>, le contenu est stocké dans de simples fichiers texte. Il s'oppose aux CMS comme Wordpress ou Drupal qui utilisent une base de données. Ce point technique simplifie le processus d'installation et de maintenance. Pour faire simple, la structure des dossiers du site reflète son arborescence. Cette simplicité rend Kirby plus accessible. Il est rapide pour un développeur externe de s'adapter et de comprendre la structure du CMS. </p>
<p>De plus, il est facile d'étendre la structure et d'ajouter des fonctionnalités. Malgré cette structure, il présente tous les avantages d'un CMS moderne avec la possibilité de structurer son code en fonction des besoins (modèles, API, cache, etc.).</p>
<p>La flexibilité du code se retrouve dans le processus de création du design. Kirby n'impose pas un processus précis pour le design. La gestion du frontend (partie graphique d'un site) ne dépend pas de technologies prédéfinies, elle est complètement <strong>agnostique</strong>. Nous avons choisi une gestion simple du style en essayant de limiter les surcouches. Il est possible de travailler avec des langages et des bibliothèques variés pour réaliser le design. En sachant que l'administration du site et la partie visuelle peuvent être créés de zéro avec une séparation claire entre design et contenu.</p>
<p>Ce CMS est basé sur les <strong>logiciels libres LAMP</strong> (Linux, Apache, MySQL, PHP/Perl), même si cette technologie est impopulaire pour de nombreux développeurs (principalement pour une raison de mode), elle est <strong>résiliente</strong> dans le sens où <strong>elle a fait ses preuves sur le long terme</strong>. Cette solution technique est la plus répandue, il est donc facile de trouver un hébergement et de la documentation. À noter, que pour une personnalisation très poussée de l'administration (non nécessaire pour une majorité de projets), une connaissance de Vue.js est un plus.</p>
<p>Un système de plugin est disponible et une bibliothèque de plugins permet d'ajouter des fonctionnalités essentielles au site. Le développement de plugins reste accessible comparé à d'autres plateformes.</p>
<p>Enfin, <strong>Kirby respecte le RGPD par défaut</strong>. Il n'inclut pas de code de suivi et de cookies par défaut. C'est un critère important pour le respect de la vie privée des utilisateurs.</p>
<h2>Le CMS Kirby et ses avantages pour l'écoconception (dans notre cas)</h2>
<h3>Processus</h3>
<p>C'est surtout par rapport à son processus de création que Kirby s'adapte à nos pratiques. Le fait de construire l'administration et le visuel de zéro nous permet de s'adapter au mieux aux besoins des utilisateurs. Avec ce processus, nous pouvons diviser notre travail de manière à se focaliser sur les fonctions utiles et l'ergonomie. <strong>Contrairement à beaucoup de CMS, Kirby nécessite d'ajouter des fonctions plutôt que d'en retirer. </strong></p>
<p>Par rapport à notre processus, dès la validation de l'arborescence et de l'organisation du contenu, nous pouvons travailler sur l'ergonomie de l'administration pour tester les premières idées. Bien sûr, cette organisation peut évoluer tout au long du projet.</p>
<p>À la fin de l'étape de design, nous pouvons intégrer le style graphique et mettre à jour la partie visuelle du site pour tester un premier prototype en situation réelle. Cette étape permet de tester l'ergonomie et de valider les dernières fonctionnalités en phase de test. Pendant cette dernière étape, nous utilisons <strong>nos indicateurs d'écoconception</strong> pour respecter le cahier des charges et nos objectifs.</p>
<h3>Technologie et résilience</h3>
<p><strong>La technologie LAMP est très bien documentée </strong>et une majorité de développeurs connaît cette technologie, ce qui est encore<strong> un gage de longévité pour un service numérique</strong>. Il sera plus simple pour une majorité développeurs de maintenir un site avec cette technologie. Ce qui répond à notre objectif de faire durer les projets sur le long terme. <a href="https://getkirby.com/docs/guide" rel="noreferrer" target="_blank">La documentation Kirby</a> est aussi très claire (bien qu'uniquement en anglais).</p>
<p>Kirby de par sa structure facilite la maintenance et limite les risques de sécurité, car l'absence de base de données créée un point de faille en moins. Bien sûr, il est toujours nécessaire de suivre des règles de sécurité strictes et de faire des mises à jour régulières.</p>
<p>Les sauvegardes ainsi que les déploiements de fichiers sont facilités, il s'agit uniquement d'un transfert de fichier.</p>
<h3>Usage</h3>
<p>L'aspect formation est aussi facilité, les retours sur l'ergonomie de Kirby sont positifs et le fait d'impliquer progressivement les utilisateurs dans la construction de l'administration permet déjà aux utilisateurs de s'habituer à l'édition du site.</p>
<p>Côté développement et design, la structure de Kirby rend le travail agréable, ce qui est un argument non négligeable pour choisir un CMS sur le long terme.</p>
<h3>Les points de discussion</h3>
<p>Tout n'est pas rose, une technologie peut toujours évoluer négativement, il est nécessaire d'avoir un suivi sérieux de son développement. Un point de controverse et le modèle économique de Kirby. Ce CMS fonctionne avec une licence par site à 99€. Au lancement de Kirby, nous avions évité d'utiliser ce CMS <strong>en raison de ce modèle économique</strong>, mais <strong>nous avions fait une erreur.</strong> <strong>Ce modèle permet au projet de durer dans le temps</strong> et malgré<strong> une petite communauté</strong>, cette dernière est active et très saine dans le sens où elle est <strong>soucieuse de la qualité et de l'éthique</strong>. L'activité sur <a href="https://forum.getkirby.com/" rel="noreferrer" target="_blank">le forum</a> montre un suivi sérieux du projet. Cette petite échelle facilite la proximité et permet de participer et suivre l'avancement du projet.</p>
<p><a href="https://www.kirbysites.com/" rel="noreferrer" target="_blank">La galerie des projets</a> signale un souci pour la qualité de la communauté. Des projets complémentaires comme ce <a href="https://www.figma.com/community/file/966999916684515329" rel="noreferrer" target="_blank">template Figma</a> montre qu'il existe un engouement suffisant pour faire vivre le projet. Surtout, le code reste open source et soumis à des audits externes ce qui permet un suivi de qualité du projet.</p>
<p><strong>Rappel :</strong> l'écoconception ne dépend pas d'un outil ou d'une pratique fixe, elle demande un état d'esprit qui doit s'adapter à une situation précise qui dépend aussi bien d'aspect humain que technique.</p>
<h2>Aller plus loin dans l'écoconception</h2>
<p><strong>La génération de sites statiques </strong>présente de nombreux avantages pour éliminer tous les calculs liés à la génération de pages dynamiques. Pour le moment, les solutions qui facilitent l'édition de sites statiques ne sont <strong>pas encore assez ergonomiques pour nos besoins.</strong> Elles peuvent s'adapter à certains projets qui ont une équipe plus formée aux outils numériques.</p>
<p>L'édition de sites statiques dépend de plateformes et services extérieurs qui créent des dépendances. Ces solutions sont moins résilientes que LAMP et sont plus complexes techniquement. Il sera nécessaire de trouver un compromis pour les utiliser sur une plus grande quantité de projets. Rien n'exclut d'avoir Kirby pour la gestion de contenu d'un site statique aussi. Nous sommes toujours en train d'effectuer des recherches sur ce sujet pour trouver une solution plus adaptée.</p>
<h2>Pour tous les projets</h2>
<p><strong>Il n'existe pas de système qui s'adapte à toutes les situations.</strong> Kirby ne sera pas la solution pour tous les projets, mais il répond très bien à nos besoins actuels. Nous limitons nos projets à des sites vitrines avec des fonctionnalités basiques. Cette limite fait que le CMS Kirby est utilisé pour la majorité de nos projets, mais il est possible qu'avec l'évolution de nos recherches d'autres outils soient utilisés ou que nous ajoutions des fonctionnalités à Kirby. Par exemple, l'e-commerce pourrait aussi nécessiter une autre solution, même s'il existe des intégrations de <a href="https://merx.wagnerwagner.de/" rel="noreferrer" target="_blank">module de paiement sur Kirby</a>. L'important est aussi d'avoir une bonne maitrise de ses outils et nous avons encore beaucoup de possibilités à tester avec Kirby pour améliorer la qualité et aller plus loin dans <strong>notre démarche écoresponsable.</strong></p> </section>
<footer class="article__content">
<a class="btn btn--blue article__btn" href="https://www.pikselkraft.com/blog">Retour au blog</a>
</footer>
<aside class="article__content article__comments">
<h3>Poster un commentaire</h3>
<p>Pour laisser un commentaire, envoyez-nous un <a href="mailto:%63o&#109;&#64;%70&#105;%6b&#115;%65l%6br&#97;f%74%2ec&#111;m?subject=Votre%20Commentaire%20sur%20Pourquoi le CMS Kirby pour nos projets écoresponsables ?&body=%0D%0AVotre%20pseudo%20:%20%0D%0AVotre%20site%20:%20%0D%0AVotre%20commentaire%20:">Mail</a></p>
<p>Nous publierons les commentaires manuellement pour éviter d'ajouter un service externe de commentaires. Vous pouvez inclure un pseudo et un site internet.</p>
<small>(Nous ne stockerons pas votre adresse email, elle sera supprimée après la publication du commentaire).</small>
</aside>
</article>
<nav class="prevnext">
<div class="prevnext__container">
<a class="prevnext__link prevnext__prev" href="https://www.pikselkraft.com/blog/la-sobriete-numerique-pour-un-usage-quotidien">< Articles précédents</a>
<a class="prevnext__link prevnext__next" href="https://www.pikselkraft.com/blog/le-domaine-public-et-les-licences-libres">Articles suivants ></a>
</div>
</nav>
<div id="section-contact" class="bg-piks-green bg-start start-yellow">
<section class="row piks-salmon piks-salmon-link">
<h2 class="title h2 title__underline underline--salmon piks-salmon">Nous contacter</h2>
<div class="new-columns contact">
<div class="contact__container">
<h3 class="piks-salmon contact__title underline">Courriel</h3>
<p>
<a href="mailto:contact@pikselkraft.com" id="contact">contact[@]pikselkraft.com</a>
<br><span class="f7"> (Nous supportons PGP)</span>
</p>
</div>
<div class="contact__container">
<h3 class="piks-salmon contact__title underline">Réseaux sociaux</h3>
<ul class="contact__list">
<li>Décentralisé : <a href="https://mastodon.zaclys.com/@pikselkraft">Mastodon</a> </li>
</ul>
</div>
</div>
</section>
</div>
</main>
<footer class="bg-piks-salmon">
<div class="row footer piks-blue piks-blue-link">
<div class="columns">
<div class="footer__col footer__links">
<h4 class="base-size">Liens utiles</h4>
<ul class="footer-links__list">
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/en-ce-moment">En ce moment</a>
</li>
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/liens">Liens</a>
</li>
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/presentation-numerique-responsable">Le numérique responsable</a>
</li>
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/decroissance-le-festival-2023">Convivialisme numérique</a>
</li>
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/accessibilite-bugs">Accessibilité & Bugs</a>
</li>
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/nos-outils">Nos outils</a>
</li>
<li class="footer-list__item html-sitemap__item">
<a href="https://www.pikselkraft.com/mentions-legales">Mentions légales</a>
</li>
</ul>
</div>
<div class="footer__col footer__sitemap piks-blue">
<nav aria-labelledby="sitemapTitle">
<h4 id="sitemapTitle" class="base-size">Plan du site</h4>
<ul id="footer-nav" class="footer__plan">
<li class="f-plan__item">
<a class="f-plan__link" href="https://www.pikselkraft.com">Accueil</a>
</li>
<li class="f-plan__item">
<a class="f-plan__link" href="https://www.pikselkraft.com/blog">Publications</a>
</li>
<li class="f-plan__item">
<a class="f-plan__link" href="https://www.pikselkraft.com/nos-services">Services</a>
</li>
<li class="footer__languages">
<a href="https://www.pikselkraft.com/en/blog/kirby-cms-and-sustainable-web-design" hreflang="en">
EN </a>
<a class="active" href="https://www.pikselkraft.com/blog/pourquoi-le-cms-kirby-pour-nos-projets-ecoresponsables" hreflang="fr">
FR </a>
<a href="https://www.pikselkraft.com/pl/blog/pourquoi-le-cms-kirby-pour-nos-projets-ecoresponsables" hreflang="pl">
PL </a>
</li>
</ul>
</nav>
</div>
<div class="footer__col footer__eco piks-blue">
<p>Site web à faible empreinte écologique<br />
Poids moyen par page de 100 ko<br />
Sans tracking</p> </div>
</div>
<div class="footer__mention">
<p>© Pikselkraft 📍Bourgogne, fait avec <a href="https://getkirby.com/" rel="noreferrer" target="_blank">Kirby</a></p> </div>
</div>
</footer>
</body>
</html>