Accessibilité

Outils

  • Wave : service en ligne de test d'accessibilité (existe aussi sous forme de plugin)
  • Andi : bookmarklet de test d'accessibilité
  • HeadingsMap : application permettant d'auditer la hiérarchie de titres d'une page web

Guides et checklists

  • RGAA 4 : référentiel général d'amélioration de l'accessibilité (obligations légales et méthode technique)
  • Visionary : guide pour comprendre le daltonisme (+ extension à destination des daltoniens)

Allez plus loin

  • AVH : association d'aide aux aveugles et aux malvoyants
  • Koena : expert en accessibilité web
  • Atalan : expert en accessibilité web
Note

Certains outils ne fonctionnent pas sur les sites privés ou pas sécurisés.

Banques d'images

Gratuites et libres de droit

  • Stock up (site qui pioche dans différentes banques d'images gratuites : licence à vérifier pour chaque photo)

Payantes

  • Istock : photos et illustrations
Note

Outils d'optimisation d'images : partie éco-conception

Banques typographiques

Gratuites et libres de droit

Payantes

Toujours plus

  • WhatFont : extension à installer pour pouvoir connaitre le nom d'une typographie utiliser sur un site web
Note

Attention, parfois une typographie peut être gratuite uniquement pour une certaine utilisations (personnelle ou commerciale), pour certains supports (print, web, application) ou pour un nombre de vues maximum. Veuillez vérifier les différentes conditions d'utilisation et les licences.

Blogs & Actualités

  • WP formation : actualités et formation WordPress & Woocommerce
  • Novethic : actualité et transition numérique
  • Green IT, association autour de la sobriété numérique, l'écoconception web et de la lowtech

Couleurs

Créer des gammes colorées

  • CSS Gradient : créer des dégradés de couleurs (export CSS inclus)

Allez plus loin

  • Pentone : marque de couleurs calibrées pour l'impression (documents, affiches, papeteries, etc.)
  • RAL : marque de couleurs calibrées pour la création de peinture (murs, meubles, industrie, etc.)
  • Gradients.app Converter : convertisseur de couleurs (Hex, CMJN, RVB, TSV, TSL)
    (= Hex, CMYK, RGB, HSV, HSL en anglais)
Note

Vérifier les contrastes pour une bonne visibilité : partie accessibilité

Éco-conception

Chiffres & Sources

  • ADEME : agence de la transition écologique (officiel)
  • MiNumEco : mission interministérielle numérique écoresponsable (officiel)

Outils de mesure

  • Eco Index : Note l'impact environnemental d'un site
  • Sami : calculer l’empreinte carbone d’une entreprise (service payant)

Guides et checklist

  • RGESN : Référentiel général d'écoconception de services numériques (Officiel)
  • Opquast : 240 règles pour améliorer vos sites et mieux prendre en compte vos utilisateurs

Outils d'optimisation d'images

  • SVGOMG : optimisation de SVG en ligne
  • Riot : logiciel d'optimisation de JPG et PNG

Allez plus loin

  • Green IT, actualités autour de la sobriété numérique, l'écoconception web et de la lowtech
  • Kirby : CMS (Content Management System) pour construire un site léger sur mesure, avec un backoffice (prise en main : pour les initiés)
  • Gutenberg : thème et builder natif à WordPress (CMS non écoconçu, mais parfois adapté à certains projets) - L'option la plus légère pour ce CMS, car déjà présente par défaut - (prise en main : pour les initiés)
  • Underscores : thème blanc compatible WordPress (CMS non écoconçu, mais parfois adapté à certains projets) - (prise en main : pour les initiés)

Gestion et organisation

Outils de travail

  • Notion : centraliser mes notes et créer des espaces clients
  • todoist : organiser mes journées de travail et projets en créant des listes "to do"
  • Freebe : logiciel de facturation (Français)
  • Calendly : gestionnaire de prise de rendez-vous
  • Antidote : correcteur orthographique et aide à la rédaction (payant)
  • Mural : outil de brainstorming et mind mapping collaboratif
  • Toggl : traqueur de temps
  • Markup : faire des remarques en pointant directement sur un site existant

Outils open source et/ou éthiques

  • Yeswiki : outil libre facilitant la collaboration ouverte
  • Framapad : éditeur de texte collaboratif
  • Filevert : partage de dossiers volumineux (français et responsable)

Applications divers

  • Fireshot : pour pouvoir faire des captures des pages web en entier
  • Loom : créer des messages vidéos tout en partageant son écran
  • Pocket : enregistrer des sites web et les trier
  • WhatFont : pour pouvoir connaitre le nom d'une typographie utiliser sur un site web

Bibliothèques d'inspiration

Design

  • Design note : bibliothèque avec pleins de liens d'inspirations et d'outils, autour du design
  • Kiblind : magazine dédié aux arts visuels, aux cultures actuelles et aux industries créatives
  • Behance : plateforme qui sert de portfolio à de nombres artistes et designers
  • Dribbble : plateforme qui sert de portfolio à de nombres artistes et designers
  • Instagram : avec les recherches #webdesign, #logo, #chartegraphique, etc.
  • Pinterest : avec les recherches webdesign, logo, charte graphique, etc.
  • Pousse ta fonte : bibliothèque de sites de typographies (payants et gratuits)

Web

  • One page love : bibliothèque de sites web composés d'une seule page

Ressources juridiques

  • INPI : comprendre les droits d'auteurs et se protéger (officiel)
  • RGPD : le règlement général sur la protection des données (RGPD), mode d’emploi (officiel)
  • CGV : bien former vos clients sur vos conditions générales de vente (officiel)
Note

Il existe des générateurs gratuits pour tous ces textes indispensables à votre site web. Ils peuvent servir de base (surtout au démarrage). Mais rien ne remplace l'œil expert d'un spécialiste pour s'assurer de leurs pertinences, de leurs légalités et leurs efficacités en cas de pépin.

Site web

CMS

  • Kirby : construire un site sur mesure (pour les initiés) - Très léger, bonne base pour créer un site écoconçu avec un backoffice
  • Wordpress.org : construire des sites à partir de thèmes pré-conçus, builder ou sur-mesure (tout public) - CMS lourd, mais parfois nécessaire à certains types de projet, par exemple les e-commerces

Thèmes WordPress

  • DIVI : thème et builder non écoconconçu, mais accessible à tous (prise en main 4/5)
  • Oxygen builder : thème et builder créé avec l'objectif d'être plus léger que la moyenne (prise en main 2,5/5)
  • Underscores : thème blanc (bonne base pour créer un site écoconçu sur-mesure, prise en main : pour les initiés)
  • Gutenberg : Thème et builder natif à WordPress (bonne base pour créer un site écoconçu ++ sur-mesure, prise en main : pour les initiés)

Hébergements

Veille & Ressources

  • WP formation : actualités et formation WordPress & Woocommerce

Vous voulez contribuer à l'annuaire ?
Proposer un lien, une catégorie ?

Écrivez-moi : cecile@quifaitmouche.com !

Votre participation sera évidemment citée.